TASK: Convertire tutti i template HTML esistenti per usare componenti Flowbite (markup + behavior JS) mantenendo logica MVC e HTMX.
Non modificare controller, services, repo.
Modificare solo template e layout.
-------------------------------------
1) LAYOUT GLOBALE
-------------------------------------
Aggiornare /web/templates/layout.html:
- Layout container moderno Tailwind
- Navbar Flowbite responsive con:
- Logo/AppName a sinistra
- Link:
- Public: Login / Signup
- Private: Dashboard / Users
- Admin: Admin (solo se role=admin)
- Dropdown utente con logout
- Include:
Struttura:
- Navbar top
- Container max-w-7xl mx-auto p-6
- Footer minimale
-------------------------------------
2) PUBLIC TEMPLATES
-------------------------------------
Convertire:
/web/templates/public/login.html
/web/templates/public/signup.html
/web/templates/public/forgot_password.html
/web/templates/public/reset_password.html
Usare:
- Card Flowbite per form
- Input Flowbite style
- Button primary
- Alert Flowbite per flash messages
- Layout centrato verticalmente (flex items-center justify-center min-h-screen)
-------------------------------------
3) PRIVATE USERS
-------------------------------------
/web/templates/private/users/index.html
- Header sezione con:
- Titolo
- Pulsante "Nuovo Utente" (modal Flowbite)
- Search input Flowbite
- Table Flowbite styled (striped, hover)
- Pagination button Flowbite
- Modal Flowbite per dettaglio utente
Assicurarsi che:
- fetch/get
- target DOM update
- swap HTML manuale
rimangano funzionanti
-------------------------------------
4) ADMIN
-------------------------------------
/web/templates/admin/dashboard.html
/web/templates/admin/users.html
/web/templates/admin/audit_logs.html
Usare:
- Card summary (stats)
- Table Flowbite
- Badge per ruoli (admin = red, user = blue)
- Tabs Flowbite se presenti più sezioni
-------------------------------------
5) FLASH MESSAGES
-------------------------------------
Creare partial:
- /web/templates/components/flash.html
Usare Flowbite alert component:
- success -> green
- error -> red
- warning -> yellow
Includere in layout sopra {{embed}}
-------------------------------------
6) MODAL STANDARD
-------------------------------------
Creare partial riusabile:
/web/templates/components/modal.html
Markup Flowbite standard con:
- id dinamico
- header con titolo
- body slot
- footer slot opzionale
- data-modal-toggle attributes
Usare nelle pagine private.
-------------------------------------
7) ACCESSIBILITÀ
-------------------------------------
- Usare aria attributes corretti come in documentazione Flowbite
- Non rompere keyboard interaction
- Mantenere form method e csrf se presente
-------------------------------------
8) RESPONSIVE DESIGN
-------------------------------------
- Navbar collapse mobile
- Table scrollable mobile
- Forms full width mobile
-------------------------------------
9) CRITERI DI ACCETTAZIONE
-------------------------------------
- Tutte le pagine hanno layout moderno Flowbite
- Modals funzionano
- Dropdown funzionano
- Navbar responsive
- HTMX partial update continua a funzionare
- Nessuna modifica backend richiesta
- Nessun errore JS in console
Scrivere codice pulito, leggibile, con commenti minimi.
Non eliminare logica Go template esistente.