Dashboard personalizzate con Filament 5 e widget Livewire

Filament oltre il CRUD: dashboard operative in tempo reale

Filament non serve solo per gestire tabelle e form. Uno degli aspetti più sottovalutati del framework è 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 è la pagina più importante dell'intero pannello admin: è quella che aprono ogni mattina per capire come sta andando il business.

Ogni widget in Filament è 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 semplicità: dichiari i dati in PHP e Filament si occupa del rendering, della reattività 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 più 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 può avere un colore che cambia in base al valore — verde se il trend è 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 più 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 è a tutti gli effetti un componente Livewire. Si ha accesso completo al rendering Blade, alla reattività di Livewire e a qualsiasi libreria JavaScript necessaria. Questo è 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 è il polling: ogni widget può 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 è 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 è ideale per dashboard di monitoraggio operativo dove anche pochi secondi di ritardo contano.

Quale strategia scegliere?

Il polling è 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 può avere bisogno di più 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 può 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 è 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 è il valore più grande che un pannello admin può offrire.