Centro Notifiche
Pannello centralizzato di notifiche in-app con badge dei non letti e aggiornamenti in tempo reale.
Panoramica
Il Centro Notifiche è il punto centralizzato dove gli utenti visualizzano e gestiscono tutte le loro notifiche in-app. Integrato direttamente nell'header della dashboard, fornisce accesso immediato ad avvisi, assegnazioni ed eventi rilevanti.
Icona campana con badge
L'icona della campana si trova nell'header principale della dashboard e mostra:
- Badge numerico con il conteggio delle notifiche non lette
- Indicatore visivo (punto rosso) quando c'è almeno una non letta
- Il badge scompare quando tutte le notifiche sono contrassegnate come lette
// Componente di riferimento
<NotificationBell unreadCount={5} />Il badge mostra un massimo di "99+" quando ci sono più di 99 notifiche non lette. Questo evita problemi di layout con numeri grandi.
Lista a tendina
Cliccando sulla campana, si apre un dropdown con le notifiche più recenti.
Struttura di ogni notifica
| Campo | Descrizione |
|---|---|
title | Titolo breve della notifica |
body | Descrizione dettagliata dell'evento |
timestamp | Data e ora di creazione |
read | Stato di lettura (true/false) |
resource_type | Tipo di risorsa correlata (task, alarm, ecc.) |
resource_id | ID della risorsa per la navigazione |
Esempio di notifica
{
"id": "ntf_001",
"title": "Compito assegnato",
"body": "Ti è stato assegnato 'Revisione compressore #3' con priorità alta.",
"timestamp": "2026-03-25T14:30:00Z",
"read": false,
"resource_type": "task",
"resource_id": "tsk_abc123"
}Navigazione alla risorsa
Cliccando su una notifica, il sistema:
- Contrassegna automaticamente la notifica come letta
- Naviga alla risorsa correlata in base a
resource_typeeresource_id
| Tipo di risorsa | Destinazione navigazione |
|---|---|
task | Dettaglio del compito |
alarm | Pannello allarmi con l'allarme selezionato |
maintenance | Ordine di lavoro di manutenzione |
inspection | Dettaglio dell'ispezione |
loto | Esecuzione LOTO attiva |
Contrassegnare come letta
Individuale
PATCH /api/v1/notifications/{notification_id}/readContrassegna una notifica specifica come letta. Il badge si aggiorna immediatamente.
Tutte le notifiche
POST /api/v1/notifications/mark-all-readL'azione di contrassegnare tutte come lette è irreversibile. Una volta eseguita, non è possibile riportare le notifiche allo stato non letto.
Contrassegna tutte le notifiche in sospeso dell'utente come lette in un'unica operazione. Il badge si azzera.
Aggiornamenti in tempo reale
Il Centro Notifiche utilizza Ably per ricevere aggiornamenti in tempo reale.
Funzionamento
- Al caricamento della dashboard, il client si iscrive al canale notifiche dell'utente
- Quando arriva una nuova notifica, viene aggiunta in cima alla lista
- Il badge si incrementa automaticamente
- Se il dropdown è aperto, la nuova notifica appare con un'animazione
Canale Ably
notifications:{tenant_id}:{user_id}Riconnessione automatica
Se la connessione con Ably viene interrotta, il client ritenta automaticamente con backoff esponenziale. Alla riconnessione, sincronizza le notifiche perse tramite una query all'API.
Paginazione
La lista delle notifiche supporta lo scroll infinito con paginazione basata su cursore:
GET /api/v1/notifications?limit=20&cursor={last_notification_id}