Anmeldung

Register

Wir stellen Ihnen unser Open-Source-Admin-Panel für Ihr Hapio-Projekt vor

,

Hapio ist „headless“. Sie gestalten das Buchungserlebnis, das Ihre Kunden sehen, und wir kümmern uns hinter den Kulissen um Verfügbarkeit, Termine und Buchungen. Aber jedes Projekt hat auch einen Backoffice-Bereich. Jemand muss die Buchungen dieser Woche einsehen, einen Nachmittag freihalten, eine neue Dienstleistung hinzufügen oder eine Buchung korrigieren, wegen der ein Kunde angerufen hat. Bislang hat jeder diesen Teil selbst umgesetzt.

Heute veröffentlichen wir „Hapio Admin“, ein Open-Source-Admin-Panel für die Hapio-API. Klonen Sie es, fügen Sie Ihren API-Token hinzu, und schon verfügen Sie in wenigen Minuten über ein komplettes Backoffice für Ihr Projekt.

Das Hapio-Admin-Dashboard mit anstehenden Buchungen

Was es bewirkt

Hapio Admin deckt alle Funktionen der Hapio-API v1 ab: Standorte, Ressourcen, Dienstleistungen, Zeitpläne, buchbare Termine, Buchungen und Buchungsgruppen. Was auch immer die API leisten kann, dafür gibt es im Admin-Bereich eine Seite, ein Formular oder eine Schaltfläche.

Einige Höhepunkte:

  • Kalender. Wochen-, Tages-, Monats- und Listenansichten Ihrer Buchungen, jeweils für einen Standort und in der Zeitzone dieses Standorts. Aktivieren Sie die Option „Freie Zeiten anzeigen“, um den Zeitplan einer Ressource hinter den Buchungen schattiert darzustellen, sodass Lücken leicht zu erkennen sind.
  • Buchungen. Eine sortierbare Tabelle mit Filtern für Datumsbereich, Ort, Ressource, Dienstleistung, vorübergehende Sperren und stornierte Buchungen. Sie können Buchungen direkt aus der Liste heraus abschließen, stornieren, wiederherstellen oder löschen und zugehörige Buchungen mithilfe von Buchungsgruppen zusammenfassen.
  • Von einem Terminfeld aus buchen. Die Registerkarte „Buchbare Termine“ eines Dienstes zeigt die Verfügbarkeit so an, wie sie Ihren Kunden angezeigt wird. Jedes Terminfeld verfügt über eine Schaltfläche „Buchen“, über die ein vorausgefülltes Buchungsformular geöffnet wird.
  • Zeitpläne. Legen Sie wiederkehrende wöchentliche Arbeitszeiten pro Ressource fest, fügen Sie einmalige Zeitblöcke für Feiertage und Ausnahmen hinzu und überprüfen Sie eine Verfügbarkeitsübersicht mit freien und bereits ausgebuchten Terminen.
  • Regeln außer Kraft setzen. Jedes Buchungsformular stellt die API-Flags zum Außerkraftsetzen bereit, sodass ein Administrator bei Bedarf auch außerhalb des Zeitplans oder nach Überschreiten der Stornierungsfrist Buchungen vornehmen kann.
  • JSON im Rohformat, wann immer Sie es brauchen. Jede Detailseite verfügt über eine JSON-Registerkarte mit der API-Antwort im Rohformat, mit den Optionen „Kopieren“ und „Vollständiges Ersetzen“ (PUT). Bei regulären Bearbeitungen wird ein PATCH-Request gesendet, der nur die von Ihnen geänderten Felder enthält.
  • Teilbare Ansichten. Filter, Sortierfunktionen und Registerkarten sind in der URL enthalten, sodass eine Ansicht als Lesezeichen gespeichert oder an einen Kollegen gesendet werden kann. Der Dunkelmodus ist integriert und funktioniert auch auf dem Smartphone.
Die Kalenderwochenansicht, in der die freien Zeiten einer Ressource hinter den Buchungen angezeigt werden

Ihr Token verbleibt auf dem Server

Der Browser erhält niemals Einblick in Ihren Hapio-API-Token. Das Panel kommuniziert mit einem kleinen serverseitigen Proxy, der den Token hinzufügt und die Anfrage an Hapio weiterleitet. Der Proxy antwortet nur auf Hostnamen, die Sie zulassen, und lehnt siteübergreifende Anfragen ab.

Es ist keine integrierte Anmeldung vorhanden. Führen Sie die Anwendung auf Ihrem eigenen Rechner oder hinter Ihrem bereits vorhandenen VPN bzw. Single-Sign-On aus. Weisen Sie dem Token nur die Berechtigungen zu, die Ihre Administratoren benötigen, und Hapio sorgt für deren Einhaltung. In der Kopfzeile wird Ihr verbleibendes Ratenlimit in Echtzeit angezeigt.

Die Buchungsliste mit Filtern für Zeitraum, Ort, Ressource und Dienstleistung

Erste Schritte

Sie benötigen Node.js 22 oder höher sowie einen API-Token aus dem Hapio-Portal.

Shell



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

Um es ohne Projekt auszuprobieren, npm run mock startet eine In-Memory-Simulation der Hapio-API mit Beispieldaten. Wenn Ihr eigenes Projekt leer ist, npm run seed ergänzt um Vorführorte, Ressourcen, Dienstleistungen und Buchungen sowie --clean entfernt sie wieder.

Die Verfügbarkeit einer Ressource für die Woche, mit freien und ausgebuchten Zeiten

Was im Portal verbleibt

API-Token, Webhooks und Projekteinstellungen verfügen über keine API-Endpunkte und verbleiben daher im Hapio-Portal. Auf der Seite „Projekt“ des Dashboards werden Ihre Projektdetails angezeigt und alle Webhook-Ereignisse aufgelistet, einschließlich eines Hinweises zur Überprüfung der Signaturen.

Buchbare Termine für eine Dienstleistung, jeweils mit einer Schaltfläche „Buchen“

Hapio Admin wurde mit Next.js 16, React 19, Tailwind CSS 4 und shadcn/ui entwickelt. Der Kalender basiert auf Hapio Calendar, unserer eigenen Kalenderkomponente für React. Das Projekt steht unter der MIT-Lizenz und wird durch Unit- und End-to-End-Tests abgedeckt. Issues und Pull-Requests sind auf GitHub willkommen.

Mit Hapio Admin ist das Backoffice schon vom ersten Tag an einsatzbereit. Probieren Sie es noch heute aus!

Autor

Johannes