CL Jobsite Installer
Offline-first PWA építőipari beépítő csapatoknak: lakásonkénti feladatkövetés, fotódokumentáció, raktári igénylések, hibalista-kezelés és IndexedDB-szinkron.
A kihívás
A CL Jobsite full-stack, offline-first progresszív webalkalmazás (PWA), amely építőipari beépítési projekteket hangol össze a terepi csapatok és a projektvezetők között. A rendszer mindent kezel a többlakásos feladatkövetéstől és a fotódokumentációtól a raktári igényléseken és a hibalistákon át a valós idejű jegyzetekig, olyan adatmodellel, amely a terepi munka valóságára épül: akadozó kapcsolat, mobilközpontú használat, valamint a beépítők és az account managerek szerepköreinek szigorú szétválasztása.
A beépítő csapatok egyszerre több emeleten és lakásban dolgoznak, gyakran gyenge lefedettségű épületekben. A rendszer előtt a terepi munka összehangolása ezt jelentette:
- Nem volt valós idejű rálátás arra, hogy mely lakások vannak folyamatban, készültek el vagy akadtak el
- A feladatkiosztás kézzel történt, kötelező visszaigazolási és jóváhagyási folyamat nélkül
- A fotódokumentáció személyes telefonokon szóródott szét, központi gyűjtőhely nélkül
- A raktári és szállítási igényeket szóban vagy SMS-ben intézték, követés nélkül
- A projektvezetők telefonhívásokkal szereztek állapotjelentést a terepről
- A hibalistákat és a lezárási tételeket mindig elavult táblázatokban vezették
A megoldás
Egyedi fejlesztésű PWA, amely ugyanolyan jól működik telefonon egy épület pincéjében, mint laptopon a helyszíni irodában. A terepi csapatok feladatközpontú, offline is használható mobilfelületet kapnak; az account managerek a teljes projektet átlátják fotógalériákkal, hibalista-követéssel és jegyzetkezeléssel, és minden automatikusan szinkronizálódik, amint visszatér a kapcsolat.
Több szerepkörös hozzáférés-kezelés
- Két külön szerepkör eltérő jogosultságokkal: Installer és Account Manager
- A beépítők csak a hozzájuk rendelt feladatokat látják és kezelik; az account managerek mindent látnak, és a teljes projektet kezelhetik
- A szerepkör alapú megjelenítést a felületen a CASL, az API szintjén middleware és lekérdezésszűrés érvényesíti
- URL alapú projekthozzáférés hitelesítő kulccsal, nincs külön bejelentkezési oldal
Hierarchikus projektstruktúra
- Teljes hierarchia: Projektek → Emeletek → Lakások → Feladatok + Tételek
- A lakásokhoz állapot, elvégzett feladatok száma és fotógaléria tartozik
- A feladatok visszaigazolási folyamatot támogatnak, a jóváhagyáshoz kötelező fotófeltöltéssel
- A tételek lakásonként követik a megrendelt és a leszállított mennyiséget
Offline-first architektúra
- Az IndexedDB helyi gyorsítótár a teljes projektadatot az eszközön tárolja (5 object store: projektek, emeletek, lakások, igénylések, felhasználók)
- Minden módosítás először helyben íródik, majd szinkronizál a szerverrel
- Az online állapot 5 másodpercenként frissül; a függő szinkron jelzője figyelmeztet a még el nem küldött módosításokra
- Kézi offline mód kapcsoló a szándékos lecsatlakozáshoz
- Az automatikus szinkron a kapcsolat visszatérésekor indul
Progresszív webalkalmazás
- A Vite PWA plugin olyan service workert generál, amely minden JS-t, CSS-t, képet és betűtípust gyorsítótáraz
- A service worker 30 percenként automatikusan frissül a háttérben
- iOS és Android kezdőképernyőre telepíthető, és natív alkalmazásként viselkedik
Fotódokumentáció
- Fotófeltöltés feladat-visszaigazoláskor, lakáslezáráskor és hibalista-tételeknél
- Kliensoldali tömörítés feltöltés előtt a browser-image-compression segítségével
- Backend: Multer (memóriában) → Sharp átméretezés → aszinkron S3 feltöltés BullMQ-val
- A fotók AWS S3-ban tárolódnak rendezett projektútvonalak alatt, és fotógaléria-nézetekben érhetők el
Raktári igénylések
- A terepi beépítők közvetlenül a Units fülről adják le a raktári igényléseket
- Az account managerek projektenként megtekinthetik, szűrhetik és kezelhetik az igénylések előzményeit
- A lakásonkénti igénylési napló a teljes szállítási előzményt követi
Punchlist és Closeout fülek
- A Closeout fül emeletenkénti nézetben mutatja a lakások készültségi állapotát, fotógalériákkal
- A Punchlist fül az összes lakás nyitott feladatait mutatja, emelet vagy típus szerinti szűréssel
- Mindkét fül ugyanabból a React Query gyorsítótárból, konzisztens adatokkal dolgozik
Formázott jegyzetek
- A Notes fül Quill alapú formázott szövegszerkesztést támogat képbeágyazással
- A megjegyzések felhasználónként követik az olvasott/olvasatlan állapotot
- A jegyzetekben lévő képek ugyanazon az S3 feltöltési folyamaton mennek át, mint a feladatfotók
A rendszer méretei
A terepi csapatok megbízható mobileszközt kaptak, amely gyenge kapcsolat mellett is működik, és nem veszít adatot, ha elmegy a térerő.
A lakásonkénti feladat-visszaigazoláshoz ma fotó kell, így minden elkészült lakásról automatikusan dokumentáció készül. Az account managerek a laptopjukról nézik meg az élő projektállapotot, böngészik a fotógalériákat és tekintik át a hibalista tételeit, ahelyett hogy a helyszínt hívnák. A raktári igénylések közvetlenül a rendszerbe kerülnek előzménynaplóval, így megszűnt az az oda-vissza egyeztetés, amely korábban elmaradt szállításokhoz vezetett. A PWA a kezdőképernyőre telepíthető, így a terepi dolgozók olyan alkalmazást kapnak, amely azonnal betölt, még mielőtt a hálózat válaszolna.