CarFix Paint Manager
Dashboard complet pentru o vopsitorie auto — gestiune comenzi, urmărire stadiu reparații, vizualizări D3.js pentru statistici și interfață modernă cu Radix UI și Framer Motion.
Stack principal
Provocarea
Vizualizarea timeline-ului de reparații pentru mai multe mașini simultan (Gantt-like) cu D3.js a necesitat implementarea unui layout custom care să gestioneze suprapunerile și să permită zoom/pan pe axa timpului. Integrarea Framer Motion cu Radix UI a necesitat atenție la gestionarea focus-ului și a animațiilor de exit pentru dialog-uri.
Soluția
Timeline D3.js implementat cu scalare temporală și collision detection pentru evitarea suprapunerilor. Zoom/pan implementat cu d3-zoom cu limite configurabile. Animațiile Framer Motion pe Radix Dialog folosesc AnimatePresence cu forceMount pentru a controla ciclul de viață al animației de exit independent de starea Radix.
Complexitate notabilă
CarFix Paint Manager este o aplicație React 19 construită pentru managementul intern al unei vopsitorii auto. Aplicația centralizează toate comenzile active, istoricul reparațiilor, statisticile de productivitate și comunicarea cu clienții. Interfața folosește Radix UI pentru componentele accesibile (dialog, dropdown, select, tabs) și Framer Motion pentru animații fluide la tranziții de pagină și actualizări de stare. Vizualizările de date sunt construite cu D3.js pentru grafice custom (timeline reparații, distribuție tipuri daune) și Recharts pentru graficele standard (evoluție comenzi, timp mediu reparație). Modulul de urmărire comenzi permite înregistrarea mașinilor la intrare (foto daune, estimare ore, piesele necesare), actualizarea stadiului în timp real (recepție → demontare → vopsire → asamblare → control calitate → livrare) și notificarea automată a clientului la fiecare schimbare de stadiu. Aplicația include și un modul de gestiune stocuri vopsele și consumabile cu alertă la stoc minim, un calendar de programări și un modul de raportare cu export Excel.
Rezultate cheie
- Dashboard centralizat pentru toate comenzile active
- Timeline D3.js cu zoom/pan pentru urmărire reparații
- Notificări automate clienți la schimbare stadiu
- Gestiune stocuri vopsele cu alertă stoc minim
Vrei ceva similar?
Începe cu wizard-ul de estimare — răspunzi la câteva întrebări și primești un range de preț + timeline realist.