DetailLab.

01 — A kiindulás

Mi volt a feladat?

Egy detailing stúdiónál a foglalás nem egy gomb, hanem egy folyamat: másfél óra egy külső mosás, négy óra egy kerámiabevonat — és a kettő nem fér ugyanabba a résbe. A feladat, amit kitűztem magam elé: olyan foglalási felület, amely a szolgáltatás valós időigényével számol, mégsem tart tovább három percnél kitölteni.

Iparág

Autókozmetika

Mi készült

Weboldal + időpontfoglaló rendszer

Technológia

Next.jsReactTypeScriptTailwind CSS

02 — A megoldás

Mit építettem?

Ötlépéses varázsló vezet végig: szolgáltatás → nap → időpont → adatok → összegzés. Mögötte egy 30 perces rácsra épülő elérhetőségi logika fut, amely minden kezdőidőponthoz eldönti, hogy a munka befér-e zárásig és nem ütközik-e meglévő foglalással. A stúdió oldalán admin lista áll, ahol a foglalások státusza egy kattintással állítható.

• A naptár tudja, meddig tart a munka

  A rács 08:00 és 17:00 között fut, fél órás lépésekben. Egy kezdés akkor foglalható, ha a munka befér zárásig és nem ütközik meglévő foglalással — a négyórás csomagnál ezért 13:00 az utolsó választható időpont. Ami kiesik, áthúzva marad a rácsban, nem tűnik el: a látogató látja, hogy miért nem az övé az az idő.

• Öt lépés, egy kérdés per képernyő

  Minden lépés egyetlen döntést kér, a folyamatjelző pedig végig mutatja, hol tart. Vissza lehet lépni anélkül, hogy a beírt adatok elvesznének — és ha a szolgáltatás cserélődik, a rendszer eldobja a hozzá már nem illő idősávot.

• Admin felület a stúdiónak

  A foglalások külön nézetben, státusz szerint szűrhetően állnak: függőben → visszaigazolva → elkészült, vagy lemondva. A lemondott idő azonnal felszabadul a naptárban.

• Adatréteg, ami adatbázisra vár

  A felület sosem nyúl közvetlenül az adatokhoz: mindent egy vékony adatréteg függvényein keresztül kér el. A demó mögött ma mock adat van — a helyére valódi adatbázis kerülhet anélkül, hogy egyetlen képernyőt át kellene írni.