Filament oltre il CRUD: dashboard operative in tempo reale
Filament non serve solo per gestire tabelle e form. Uno degli aspetti piu sottovalutati del framework e il sistema di widget, che permette di costruire dashboard operative con statistiche, grafici e dati aggregati che si aggiornano in tempo reale grazie a Livewire. Per molti clienti, la dashboard e la pagina piu importante dell intero pannello admin: e quella che aprono ogni mattina per capire come sta andando il business.
Ogni widget in Filament e un componente PHP autonomo che definisce i propri dati, il layout e la logica di aggiornamento. Si compongono nella dashboard come blocchi, senza toccare HTML. La potenza sta nella semplicita: dichiari i dati in PHP e Filament si occupa del rendering, della reattivita e del layout responsive.
I tipi di widget disponibili in Filament 5
Filament 5 mette a disposizione quattro tipi di widget principali, ognuno ottimizzato per un caso d uso specifico. Combinandoli si costruiscono dashboard che coprono qualsiasi esigenza informativa.
Stat widget: KPI e metriche chiave
Il widget piu usato nelle dashboard business. Mostra un valore numerico con label, icona opzionale e indicatore di trend (percentuale di variazione rispetto al periodo precedente). Ideale per fatturato, numero ordini, utenti attivi, ticket aperti e qualsiasi metrica che il cliente vuole monitorare a colpo d occhio.
Ogni stat widget puo avere un colore che cambia in base al valore — verde se il trend e positivo, rosso se negativo — e un link che porta alla pagina di dettaglio per approfondire il dato.
Chart widget: grafici interattivi con Chart.js
Filament integra Chart.js per generare grafici a linee, barre, torta, area e radar. Il widget chart si dichiara in PHP specificando i dataset e le label, e Filament si occupa del rendering JavaScript. I grafici sono interattivi: hover per il dettaglio, click per filtrare, zoom su periodi specifici.
Per un e-commerce, un grafico a linee con l andamento del fatturato giornaliero degli ultimi 30 giorni, sovrapposto allo stesso periodo dell anno precedente, si implementa in una classe PHP di 30-40 righe. Senza Filament, lo stesso grafico richiederebbe un controller per i dati, una chiamata AJAX, la configurazione di Chart.js nel frontend e la gestione del layout responsive.
Table widget: tabelle compatte per dati recenti
Una versione ridotta del table builder di Filament, pensata per mostrare dati tabulari direttamente nella dashboard. Perfetta per gli ultimi ordini, i ticket piu urgenti, i prodotti in esaurimento o qualsiasi lista che richiede attenzione immediata.
Il table widget supporta le stesse colonne e formattazioni del table builder completo, ma in un formato compatto che si integra nel layout della dashboard senza dominare la pagina.
Custom widget: componenti Livewire personalizzati
Quando i widget standard non bastano, si crea un custom widget che e a tutti gli effetti un componente Livewire. Si ha accesso completo al rendering Blade, alla reattivita di Livewire e a qualsiasi libreria JavaScript necessaria. Questo e utile per mappe interattive, timeline di eventi, feed in tempo reale o integrazioni con servizi esterni.
Esempio reale: dashboard per un e-commerce
Un caso concreto che ho implementato per un cliente. La richiesta: una dashboard che mostri la situazione del business in tempo reale, senza bisogno di aprire report o fogli di calcolo.
- Riga superiore con 4 stat widget — fatturato giornaliero con trend rispetto alla settimana precedente, ordini del giorno, carrelli abbandonati e tasso di conversione
- Grafico a linee — andamento fatturato ultimi 30 giorni con confronto anno precedente
- Grafico a torta — distribuzione ordini per stato (in lavorazione, spediti, consegnati, resi)
- Tabella ultimi 10 ordini — con nome cliente, importo, stato e link al dettaglio
- Alert prodotti in esaurimento — tabella dei prodotti con stock sotto la soglia minima, con link diretto alla pagina di modifica
Il cliente apre il browser ogni mattina e ha subito la fotografia completa del business. Nessun export, nessun foglio di calcolo, nessuna email con report allegati. I dati sono sempre aggiornati e la dashboard si aggiorna automaticamente ogni 30 secondi grazie al polling di Livewire.
Aggiornamento in tempo reale: polling e WebSocket
Filament offre due strategie per mantenere i widget aggiornati. La prima e il polling: ogni widget puo definire un intervallo di aggiornamento (es. ogni 10 secondi) e Livewire si occupa di fare la richiesta al server e aggiornare il DOM. Semplice e funziona senza configurazione aggiuntiva.
La seconda strategia e l integrazione con Laravel Echo e WebSocket per aggiornamenti push in tempo reale. Quando un evento viene dispatchato — un nuovo ordine, un pagamento confermato — il widget si aggiorna istantaneamente senza aspettare il polling. Questa strategia e ideale per dashboard di monitoraggio operativo dove anche pochi secondi di ritardo contano.
Quale strategia scegliere?
Il polling e sufficiente per la maggior parte dei casi: dashboard business, report giornalieri, metriche che cambiano lentamente. I WebSocket servono quando i dati cambiano frequentemente e l utente ha bisogno di vederli subito: monitoraggio ordini in tempo reale, chat di supporto, sistemi di alerting.
Organizzazione delle dashboard: pagine multiple e filtri globali
Un pannello admin complesso puo avere bisogno di piu dashboard: una per le vendite, una per il magazzino, una per il marketing. Filament supporta pagine dashboard multiple, ognuna con i propri widget e il proprio layout. Il menu laterale del pannello mostra le varie dashboard come voci separate.
I filtri globali permettono di cambiare il periodo temporale — oggi, ultima settimana, ultimo mese, custom range — e tutti i widget della dashboard si aggiornano di conseguenza. Questo evita di dover implementare filtri individuali per ogni widget e garantisce consistenza nei dati mostrati.
Performance delle dashboard con molti widget
Una dashboard con 10-15 widget puo diventare lenta se ogni widget esegue query pesanti al caricamento. Filament 5 risolve questo problema con il lazy loading: i widget vengono caricati in modo asincrono, mostrando uno skeleton placeholder mentre i dati vengono recuperati. L utente vede la pagina subito e i widget si popolano man mano.
Per query particolarmente pesanti — aggregazioni su milioni di record, join complessi — il consiglio e usare tabelle materializzate o cache Redis con invalidazione basata su eventi. Il widget legge dalla cache e la cache viene aggiornata quando i dati cambiano. Il risultato: dashboard che caricano in meno di un secondo anche con dataset enormi.
In definitiva, le dashboard di Filament 5 trasformano un pannello admin da semplice strumento di gestione dati a centro di comando operativo. Il cliente smette di chiedere report via email e inizia a prendere decisioni basate su dati aggiornati in tempo reale — e questo e il valore piu grande che un pannello admin puo offrire.