Inicio de sesión

Regístrese en

Te presentamos nuestro panel de administración de código abierto para tu proyecto Hapio

,

Hapio es una plataforma «headless». Tú creas la experiencia de reserva que ven tus clientes, y nosotros nos encargamos de la disponibilidad, los horarios y las reservas entre bastidores. Pero todo proyecto tiene también una parte administrativa. Alguien tiene que consultar las reservas de esta semana, reservar una tarde, añadir un nuevo servicio o modificar una reserva por la que ha llamado un cliente. Hasta ahora, cada uno creaba esa parte por su cuenta.

Hoy lanzamos Hapio Admin, un panel de administración de código abierto para la API de Hapio. Clónalo, añade tu token de API y tendrás un back office completo para tu proyecto en unos minutos.

El panel de control de Hapio Admin con las próximas reservas

Para qué sirve

Hapio Admin abarca todas las operaciones de la API v1 de Hapio: ubicaciones, recursos, servicios, horarios, franjas horarias reservables, reservas y grupos de reservas. Si la API puede hacerlo, el panel cuenta con una página, un formulario o un botón para ello.

Algunos aspectos destacados:

  • Calendario. Vistas por semana, día, mes y lista de tus reservas, una ubicación cada vez y en la zona horaria de dicha ubicación. Activa la opción «Mostrar horario disponible» para sombrear el horario de un recurso detrás de las reservas, de modo que resulte fácil detectar los huecos.
  • Reservas. Una tabla ordenable con filtros por intervalo de fechas, ubicación, recurso, servicio, reservas en espera y reservas canceladas. Confirma, cancela, restablece o elimina directamente desde la lista, y mantén juntas las reservas relacionadas mediante grupos de reservas.
  • Reservar desde una franja horaria. La pestaña «Franjas horarias reservables» de un servicio busca la disponibilidad tal y como la ven tus clientes. Cada franja horaria cuenta con un botón «Reservar» que abre un formulario de reserva ya rellenado.
  • Horarios. Establece un horario semanal recurrente para cada recurso, añade bloques horarios puntuales para días festivos y excepciones, y consulta un calendario de disponibilidad con los horarios libres y los que ya están completos.
  • Reglas de excepción. Todos los formularios de reserva muestran los indicadores de excepción de la API, de modo que un administrador puede realizar reservas fuera del horario previsto o más allá del plazo de cancelación cuando sea necesario.
  • JSON sin procesar cuando lo necesites. Cada página de detalles cuenta con una pestaña «JSON» que muestra la respuesta sin procesar de la API, con opciones para copiar y sustituir por completo (PUT). Las modificaciones habituales envían una solicitud PATCH con solo los campos que hayas cambiado.
  • Vistas compartibles. Los filtros, la ordenación y las pestañas se incluyen en la URL, por lo que se puede añadir una vista a los favoritos o enviarla a un compañero. Incluye el modo oscuro, que funciona en el móvil.
La vista semanal del calendario, en la que se muestra el tiempo disponible de un recurso detrás de las reservas

Tu token permanece en el servidor

El navegador nunca ve tu token de la API de Hapio. El panel se comunica con un pequeño proxy del lado del servidor que añade el token y reenvía la solicitud a Hapio. El proxy solo responde a los nombres de host que tú autorices y rechaza las solicitudes entre sitios.

No hay ningún sistema de inicio de sesión integrado. Ejecútalo en tu propio equipo o a través de la VPN o del sistema de inicio de sesión único que ya tengas. Otorga al token únicamente las capacidades que necesiten tus administradores, y Hapio se encargará de hacerlas cumplir. El encabezado muestra tu límite de rate restante en tiempo real.

La lista de reservas con filtros por intervalo de fechas, ubicación, recurso y servicio

Cómo empezar

Necesitas Node.js 22 o una versión posterior y un token de API del portal de Hapio.

concha



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

Para probarlo sin un proyecto, npm run mock inicia una simulación en memoria de la API de Hapio con datos de demostración. Si tu propio proyecto está vacío, npm run seed añade lugares de demostración, recursos, servicios y reservas, y --clean las vuelve a eliminar.

Disponibilidad de un recurso para la semana, con franjas horarias libres y con todas las plazas ocupadas

Lo que permanece en el portal

Los tokens de API, los webhooks y la configuración del proyecto no tienen puntos finales de API, por lo que permanecen en el portal de Hapio. La página «Proyecto» del panel muestra los detalles de tu proyecto y enumera todos los eventos de webhook, con una nota sobre cómo verificar las firmas.

Franjas horarias disponibles para reservar un servicio, cada una con un botón «Reservar»

Hapio Admin está desarrollado con Next.js 16, React 19, Tailwind CSS 4 y shadcn/ui. El calendario se basa en Hapio Calendar, nuestro propio componente de calendario para React. Cuenta con licencia MIT y está respaldado por pruebas unitarias y de extremo a extremo. Se aceptan incidencias y solicitudes de incorporación de cambios en GitHub.

Con Hapio Admin, el back office estará listo desde el primer día. ¡Pruébalo hoy mismo!

Autor

Johannes