Logga in

Registrera

Vi presenterar vår öppen källkodsbaserade administratörspanel för ditt Hapio-projekt

,

Hapio är ett ”headless”-system. Du skapar den bokningsupplevelse som dina kunder ser, och vi hanterar tillgänglighet, scheman och bokningar bakom kulisserna. Men varje projekt har också en administrativ del. Någon måste kunna se veckans bokningar, reservera en eftermiddag, lägga till en ny tjänst eller ändra en bokning som en kund har ringt om. Hittills har alla byggt den delen själva.

Idag lanserar vi Hapio Admin, en administratörspanel med öppen källkod för Hapio API. Klona den, lägg till din API-token, så har du ett komplett backoffice för ditt projekt på bara några minuter.

Hapio Admin-instrumentpanelen med kommande bokningar

Vad den gör

Hapio Admin täcker alla funktioner i Hapio API v1: platser, resurser, tjänster, scheman, bokningsbara tidsluckor, bokningar och bokningsgrupper. Om API:et kan göra det, finns det en sida, ett formulär eller en knapp för det i kontrollpanelen.

Några höjdpunkter:

  • Kalender. Veck-, dags-, månads- och listvyer av dina bokningar, en plats i taget och i den platsens tidszon. Aktivera ”Visa ledig tid” för att skugga en resurs tidsplan bakom bokningarna, så att luckor blir lätta att upptäcka.
  • Bokningar. En sorterbar tabell med filter för datumintervall, plats, resurs, tjänst, tillfälliga reservationer och avbokade bokningar. Slutför, avboka, återställ eller ta bort direkt från listan, och håll samman relaterade bokningar med hjälp av bokningsgrupper.
  • Boka från ett tidsfönster. Fliken ”Bokningsbara tidsfönster” för en tjänst visar tillgängligheten precis som dina kunder ser den. Varje tidsfönster har en ”Boka”-knapp som öppnar ett förifyllt bokningsformulär.
  • Scheman. Ställ in återkommande veckotider per resurs, lägg till engångsblock för helgdagar och undantag, och granska en tillgänglighetstidslinje som visar lediga och fullbokade tider.
  • Överskrivningsregler. Varje bokningsformulär visar API:ets överskrivningsflaggor, så att en administratör vid behov kan boka utanför schemat eller över avbokningsgränsen.
  • Rå JSON när du behöver det. Varje detaljsida har en JSON-flik med det råa API-svaret, med möjlighet att kopiera och ersätta hela innehållet (PUT). Vid vanliga redigeringar skickas ett PATCH-meddelande som endast innehåller de fält du har ändrat.
  • Delbara vyer. Filter, sortering och flikar ingår i webbadressen, vilket gör att en vy kan läggas till som bokmärke eller skickas till en kollega. Mörkt läge ingår och fungerar på mobilen.
Kalenderveckovyn där en resurs lediga tider visas bakom bokningarna

Din token förblir på servern

Webbläsaren får aldrig tillgång till ditt Hapio API-token. Panelen kommunicerar med en liten proxy på serversidan som lägger till tokenet och vidarebefordrar begäran till Hapio. Proxyn svarar endast på begäranden från de värdnamn du tillåter och avvisar begäranden från andra webbplatser.

Det finns ingen inbyggd inloggning. Kör programmet på din egen dator eller via det VPN eller den SSO-lösning som du redan har. Ge token endast de behörigheter som dina administratörer behöver, så ser Hapio till att de efterlevs. I rubriken visas din återstående begränsning i realtid.

Bokningslistan med filter för datumintervall, plats, resurs och tjänst

Kom igång

Du behöver Node.js 22 eller senare samt en API-token från Hapio-portalen.

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

Om du vill prova utan ett projekt, npm run mock startar en mock av Hapio-API:et i minnet med exempeldata. Om ditt eget projekt är tomt, npm run seed lägger till demonstrationsplatser, resurser, tjänster och bokningar, samt --clean tar bort dem igen.

En resurs tillgänglighet för veckan, med lediga och fullbokade tider

Vad som finns kvar i portalen

API-token, webhooks och projektinställningar har inga API-ändpunkter, så de finns kvar i Hapio-portalen. På panelens projektsida visas information om ditt projekt och en lista över alla webhook-händelser, tillsammans med en anvisning om hur du verifierar signaturer.

Bokningsbara tider för en tjänst, var och en med en ”Boka”-knapp

Hapio Admin är byggt med Next.js 16, React 19, Tailwind CSS 4 och shadcn/ui. Kalendern bygger på Hapio Calendar, vår egen kalenderkomponent för React. Den är licensierad under MIT-licensen och omfattas av enhets- och end-to-end-tester. Felrapporter och pull-förfrågningar är välkomna på GitHub.

Med Hapio Admin är backoffice-systemet klart redan från första dagen. Prova det redan idag!

Författare

Johannes