登录

注册

为您介绍适用于 Hapio 项目的开源管理面板

,

Hapio 采用无前端架构。您负责构建客户所见的预订体验，而我们则在后台处理房源空房情况、日程安排和预订事宜。但每个项目都离不开后台管理。总需要有人查看本周的预订情况、预留一个下午的时间、添加新服务，或者处理客户来电反映的预订问题。直到现在，这部分工作一直都是由大家自行完成的。

今天，我们发布了 Hapio Admin——一个面向 Hapio API 的开源管理面板。克隆该项目，添加您的 API 密钥，几分钟内您就能为项目搭建好一个完整的后台管理系统。

Hapio 管理控制台，显示即将到来的预订

功能介绍

Hapio Admin 涵盖了 Hapio API v1 中的所有操作：地点、资源、服务、日程、可预订时段、预订和预订组。只要 API 能实现的功能，控制面板中都会提供相应的页面、表单或按钮。

部分亮点：

  • 日历。以周、日、月和列表视图查看您的预订，每次仅显示一个地点，并采用该地点的时区。开启“显示空闲时间”功能，可在预订背后对资源的日程进行阴影处理，以便轻松识别空闲时段。
  • 预订。一个可按日期范围、地点、资源、服务、临时保留和已取消预订进行筛选和排序的表格。可直接在列表中确认、取消、恢复或删除预订，并通过预订组将相关预订归类在一起。
  • 从时段预订。服务页面上的“可预订时段”选项卡会以客户所见的方式查询可用性。每个时段都有一个“预订”按钮，点击后会打开一个已预填信息的预订表单。
  • 日程安排。为每个资源设置每周的固定工作时段，为节假日和特殊情况添加一次性日程时段，并查看空闲时间与已预约时间的可用性时间线。
  • 覆盖规则。每个预订表单都会显示 API 的覆盖标志，因此管理员在必要时可以进行超出日程安排或超过取消时限的预订。
  • 在需要时提供原始 JSON。每个详情页面都设有“JSON”选项卡，其中包含原始 API 响应，支持复制和完全替换（PUT）。常规编辑操作会发送 PATCH 请求，仅包含您修改过的字段。
  • 可共享的视图。筛选条件、排序和标签都包含在URL中，因此可以将视图添加到书签或发送给同事。支持深色模式，且在手机上也能正常使用。
日历周视图，其中资源的可用时间显示在预订条目后面

您的令牌将保留在服务器上

浏览器永远不会看到您的 Hapio API 令牌。该面板通过一个小型服务器端代理与 Hapio 通信，该代理会添加令牌并将请求转发给 Hapio。该代理仅响应您允许的主机名，并拒绝跨站请求。

该系统未内置登录功能。请在您自己的机器上运行，或通过您现有的VPN或单点登录环境进行访问。仅向令牌授予管理员所需权限，Hapio将严格执行这些权限。请求头会实时显示您剩余的速率限制。

带日期范围、地点、资源和服务筛选条件的预订列表

入门指南

您需要 Node.js 22 或更高版本，以及从 Hapio 门户获取的 API 令牌。

外壳



git clone https://github.com/Hapio-Booking-and-Scheduling-API/hapio-admin-panel-nextjs
cd hapio-admin
npm install
cp .env.example .env.local   # set HAPIO_API_TOKEN
npm run dev                  # http://127.0.0.1:3000

如果想在不创建项目的情况下试用， npm run mock 使用示例数据启动 Hapio API 的内存模拟。如果您的项目为空， npm run seed 添加演示地点、资源、服务和预订，以及 --clean 再次将它们移除。

该资源本周的可用情况，包括空闲时段和已预订时段

门户中保留的内容

API 令牌、Webhook 和项目设置没有 API 端点，因此它们都保存在 Hapio 门户中。控制面板的“项目”页面会显示您的项目详细信息，并列出每个 Webhook 事件，同时附有关于如何验证签名的说明。

某项服务的可预约时段，每个时段都配有一个“预约”按钮

Hapio Admin 基于 Next.js 16、React 19、Tailwind CSS 4 和 shadcn/ui 构建。日历组件基于 Hapio Calendar，这是我们为 React 开发的自有日历组件。该项目采用 MIT 许可证，并经过单元测试和端到端测试的验证。欢迎在 GitHub 上提交问题和拉取请求。

借助 Hapio Admin，后台系统从第一天起即可投入使用。今天就来试用吧！

作者

约翰内斯