zentral/docs/development/devlog/2025-12-04-030000_dashboard_widgets.md

Zentral Dashboard Widgets

Stato Attuale

Completato.

Obiettivo

Implementare un sistema di widget per la dashboard di Zentral.

• I moduli devono poter esporre widget.
• Gli widget sono visibili solo se il modulo è attivo.
• La dashboard deve essere personalizzabile (drag & drop, resize) tramite react-grid-layout.
• La configurazione della dashboard deve essere salvata per ogni utente.

Lavoro Svolto

1. Backend:

   • Creata entità UserDashboardPreference per salvare il layout JSON della dashboard per ogni utente.
   • Creato DashboardController per salvare/caricare la configurazione.
   • Aggiornato ZentralDbContext e creata migrazione AddUserDashboardPreference.
   • Nota: Il salvataggio su backend è attualmente disabilitato in favore del localStorage su richiesta utente, in attesa del sistema di gestione utenti completo.

2. Frontend - Setup:

   • Installato react-grid-layout.
   • Creato WidgetRegistry (src/frontend/src/services/WidgetRegistry.ts) per gestire i widget disponibili.
   • Definita interfaccia WidgetDefinition.
   • Creata funzione di registrazione registerWidgets chiamata in main.tsx.

3. Frontend - Implementazione Widget:

   • Creato ActiveModulesWidget: lista moduli attivi (sostituisce la vecchia dashboard statica).
   • Creato WelcomeWidget: banner di benvenuto.
   • Creati widget statistici per tutti i moduli:
     • WarehouseStatsWidget
     • SalesStatsWidget
     • PurchasesStatsWidget
     • ProductionStatsWidget
     • HRStatsWidget
     • EventsStatsWidget

4. Frontend - Dashboard:

   • Aggiornato Dashboard.tsx per usare ResponsiveGridLayout.
   • Implementata modalità "Edit" per aggiungere/rimuovere/spostare widget.
   • Implementato salvataggio della configurazione su localStorage (browser).
   • Implementato caricamento configurazione con fallback a layout di default (Welcome + Active Modules).
   • Fix Sovrapposizione e Griglia Rigida:
     • Disabilitato ridimensionamento widget (isResizable={false}).
     • Impostato compactType={null} per disabilitare il riposizionamento automatico (galleggiamento) e permettere posizionamento libero.
     • Impostato preventCollision={true} per impedire sovrapposizioni e spostamenti indesiderati durante il trascinamento.

5. Testing:

   • Attivati tutti i moduli tramite API.
   • Verificato caricamento dashboard con tutti i moduli attivi.
   • Verificato funzionamento modalità Edit:
     • Ridimensionamento disabilitato.
     • Spostamento widget in spazi vuoti funzionante.
     • Tentativo di sovrapposizione bloccato (collisione prevenuta).
     • Salvataggio layout persistente.