Découvrez notre panneau d'administration open source pour votre projet Hapio

,

Hapio est une solution « headless ». Vous concevez l'expérience de réservation que vos clients voient, et nous gérons les disponibilités, les horaires et les réservations en coulisses. Mais chaque projet comporte également un back-office. Quelqu'un doit consulter les réservations de la semaine, bloquer un après-midi, ajouter un nouveau service ou modifier une réservation pour laquelle un client a appelé. Jusqu'à présent, chacun développait cette partie lui-même.

Nous lançons aujourd’hui Hapio Admin, un panneau d’administration open source dédié à l’API Hapio. Clonez-le, ajoutez votre jeton API, et vous disposerez en quelques minutes d’un back-office complet pour votre projet.

Le tableau de bord d'administration Hapio avec les réservations à venir

Fonctionnalités

Hapio Admin couvre toutes les opérations de l'API Hapio v1 : lieux, ressources, services, plannings, créneaux réservables, réservations et groupes de réservations. Si l'API permet d'effectuer une opération, le tableau de bord dispose d'une page, d'un formulaire ou d'un bouton dédié à cette opération.

Quelques points forts :

  • Calendrier. Affichage de vos réservations sous forme de semaine, de jour, de mois ou de liste, un lieu à la fois et selon le fuseau horaire de ce lieu. Activez l’option « Afficher les créneaux disponibles » pour ombrer l’emploi du temps d’une ressource derrière les réservations, ce qui permet de repérer facilement les créneaux libres.
  • Réservations. Un tableau triable avec des filtres par plage de dates, lieu, ressource, service, réservations en attente et réservations annulées. Validez, annulez, rétablissez ou supprimez directement depuis la liste, et regroupez les réservations associées à l'aide des groupes de réservations.
  • Réserver un créneau. L'onglet « Créneaux disponibles » d'un service affiche les disponibilités telles que vos clients les voient. Chaque créneau comporte un bouton « Réserver » qui ouvre un formulaire de réservation prérempli.
  • Plannings. Définissez des horaires hebdomadaires récurrents pour chaque ressource, ajoutez des plages horaires ponctuelles pour les jours fériés et les exceptions, et consultez un calendrier des disponibilités indiquant les créneaux libres et ceux déjà réservés.
  • Règles de dérogation. Chaque formulaire de réservation met à disposition les indicateurs de dérogation de l'API, ce qui permet à un administrateur d'effectuer une réservation en dehors des horaires prévus ou au-delà du délai d'annulation, si nécessaire.
  • Du JSON brut quand vous en avez besoin. Chaque page de détail comporte un onglet « JSON » contenant la réponse brute de l'API, avec des options de copie et de remplacement complet (PUT). Les modifications courantes envoient une requête PATCH ne contenant que les champs que vous avez modifiés.
  • Vues partageables. Les filtres, le tri et les onglets sont intégrés à l'URL ; il est donc possible d'ajouter une vue à ses favoris ou de l'envoyer à un collègue. Le mode sombre est inclus et fonctionne sur mobile.
La vue hebdomadaire du calendrier, avec les disponibilités d'une ressource affichées derrière les réservations

Votre jeton reste sur le serveur

Le navigateur n'a jamais accès à votre jeton API Hapio. Le panneau communique avec un petit proxy côté serveur qui ajoute le jeton et transmet la requête à Hapio. Le proxy ne répond qu'aux noms d'hôtes que vous autorisez et rejette les requêtes intersites.

Il n'y a pas de système d'authentification intégré. Exécutez-le sur votre propre machine ou via le VPN ou l'authentification unique dont vous disposez déjà. Attribuez au jeton uniquement les autorisations dont vos administrateurs ont besoin, et Hapio veillera à leur respect. L'en-tête affiche en temps réel votre limite de requêtes restante.

La liste des réservations avec des filtres par période, lieu, ressource et service

Pour commencer

Vous devez disposer de Node.js 22 ou d'une version ultérieure, ainsi que d'un jeton API obtenu via le portail Hapio.

coquille
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

Pour l'essayer sans projet, npm run mock lance une simulation en mémoire de l'API Hapio avec des données de démonstration. Si votre projet est vide, npm run seed ajoute des lieux de démonstration, des ressources, des services et des réservations, et --clean les supprime à nouveau.

Disponibilité d'une ressource pour la semaine, avec les créneaux disponibles et ceux déjà réservés

Ce qui reste sur le portail

Les jetons API, les webhooks et les paramètres de projet ne disposent pas de points de terminaison API ; ils restent donc dans le portail Hapio. La page « Projet » du tableau de bord affiche les détails de votre projet et répertorie tous les événements de webhook, avec une note expliquant comment vérifier les signatures.

Créneaux horaires disponibles pour un service, chacun doté d'un bouton « Réserver »

Hapio Admin est développé avec Next.js 16, React 19, Tailwind CSS 4 et shadcn/ui. Le calendrier repose sur Hapio Calendar, notre propre composant de calendrier pour React. Il est distribué sous licence MIT et fait l'objet de tests unitaires et de tests de bout en bout. N'hésitez pas à signaler des problèmes et à envoyer des pull requests sur GitHub.

Avec Hapio Admin, votre back-office est opérationnel dès le premier jour. Essayez-le dès aujourd’hui !

Auteur

Johannes