Dashboard & Navigazione
Pannello di controllo, topbar, menu laterale, workspace, manuale contestuale
Riferimenti normativi
- GDPR art. 25 — Protezione fin dalla progettazione (privacy by design): L'interfaccia mostra solo i moduli e i dati a cui l'utente è autorizzato. Le card statistiche e il menu laterale rispettano la configurazione dei moduli abilitati per utente/workspace.
- GDPR art. 32 — Sicurezza del trattamento: Il sistema di login con credenziali individuali, il selettore workspace e il menu utente implementano l'identificazione e l'autorizzazione richieste dalla normativa.
- D.Lgs. 196/2003 All. B — Sistema di autenticazione: Credenziali individuali (username/password), timeout sessione, logout esplicito. Il menu utente nella topbar consente il logout sicuro.
- Provv. Garante Privacy 27/11/2008 — Log accessi: Il login viene tracciato nei log di sistema con timestamp, username e workspace selezionato, come richiesto per la figura dell'amministratore di sistema.
- D.Lgs. 82/2005 (CAD) art. 53 — Caratteristiche dei siti: L'interfaccia deve essere accessibile, chiara e dotata di aiuto in linea. Il manuale contestuale (icona libro nella topbar) soddisfa questo requisito.
La Dashboard è la pagina iniziale dopo il login. Offre una visione d'insieme dello stato dell'azienda e accesso rapido a tutti i moduli. È composta da:
- Topbar (barra superiore fissa): logo, titolo azienda, nome modulo attivo, selettore workspace, manuale, menu utente
- Menu laterale (sidebar): navigazione per moduli, organizzata in gruppi espandibili
- Area centrale: card statistiche, situazione finanziaria, azioni rapide
Il contenuto della dashboard si adatta automaticamente ai moduli abilitati per l'utente corrente nel workspace attivo. Le card e le voci di menu dei moduli disabilitati non vengono mostrate.
La topbar è la barra orizzontale fissa in alto. Da sinistra a destra contiene:
| Elemento | Icona | Posizione | Funzione |
|---|---|---|---|
| Logo NOX | Orb animato + “NOX Enterprise Suite” | Sinistra | Clic: apre/chiude il menu laterale. Se il menu è già aperto, naviga alla Dashboard. |
| Titolo azienda | — | Centro (riga 1) | Nome dell'azienda dai Parametri → Dati Aziendali |
| Nome modulo | — | Centro (riga 2) | Titolo della pagina/modulo corrente (es. “DOCUMENTI”, “CATALOGO”) |
| Nome componente | — | Destra (riga 1) | Nome tecnico del componente sorgente attivo |
| Selettore Workspace | storage | Destra (riga 2) | Mostra il database/workspace in uso. Clic: apre il menu per cambiare workspace. Freccia ▼ se ci sono più workspace. |
| Manuale | auto_stories | Destra (riga 2) | Apre il manuale contestuale nella modale iframe. Il manuale cambia in base al modulo attivo. |
| Menu Utente | key + nome | Destra (riga 2) | Mostra username e ruolo. Clic: apre il menu con Dashboard, Profilo, Gestione Utenti (se ADMIN), Logout. |
| Scudo ADMIN | shield | Accanto al nome utente | Visibile solo per gli Amministratori. Indica che l'utente ha privilegi elevati. |
Logo NOX
Il logo è composto da un orb animato con halo e archi rotanti, più la scritta “NOX — Enterprise Suite”. In modalità compatta (quando non si è in Dashboard) il logo si riduce mostrando solo l'orb.
Selettore Workspace
Il chip mostra l'icona database (storage), il nome del workspace corrente e una freccia se sono disponibili più workspace. Facendo clic si apre un menu con:
- Elenco di tutti i workspace assegnati all'utente
- Segno di spunta (check_circle) accanto al workspace attivo
- Icona visibility_off per workspace nascosti (visibili solo ai SUPERADMIN)
- Icona folder_open per workspace normali
Il menu laterale si apre cliccando il logo NOX nella topbar. Contiene i moduli organizzati in gruppi espandibili:
| Gruppo | Voci principali |
|---|---|
| Ciclo Attivo / Passivo | Soggetti, Catalogo, Documenti, Scadenzario, Agenti & Provvigioni, Spedizioni & Vettori, Lettere di Intento, Listini, Sconti, CRM / Pipeline |
| Magazzino | Giacenze & Movimenti, Inventario Fisico |
| Contabilità | Piano dei Conti, Prima Nota, Registro IVA, Aliquote IVA, Bilancio, Budget, Riconciliazione Bancaria, F24 |
| Reporting | Dashboard Analitica, Statistiche Catalogo |
| Integrazioni | SDI / Fatture Elettroniche, Sistema TS, Corrispettivi, Conservazione, PEC, E-commerce, API |
| Impostazioni | Parametri, Gestione Utenti, Tabelle, Backup, Print Designer, Import/Export |
Le voci con etichetta “Coming Soon” (in grigio con icona lucchetto) rappresentano moduli pianificati ma non ancora attivi. Possono essere nascosti dall'opzione “Nascondi Coming Soon” nella configurazione moduli utente.
L'area centrale della dashboard mostra una griglia di card statistiche con contatori in tempo reale. Ogni card è cliccabile e porta direttamente al modulo corrispondente.
| Card | Icona | Dato mostrato | Navigazione |
|---|---|---|---|
| Soggetti | contacts | Numero totale soggetti in anagrafe | /soggetti |
| Listini attivi | sell | Numero listini prezzi attivi | /listini |
| Regole sconto | local_offer | Numero regole sconto configurate | /sconti |
| Catalogo | apps | Numero voci nel catalogo prodotti/servizi | /catalogo |
| Fatture Totali | receipt_long | Totale fatture emesse (tipo TD01) | /documenti?tipo=TD01 |
| Documenti | description | Totale di tutti i documenti | /documenti |
| Documenti in bozza | edit_note | Documenti non ancora emessi (sfondo alert se > 0) | /documenti?stato=BOZZA |
| Scadenze aperte | event_note | Scadenze di pagamento non ancora saldate | /scadenzario |
| Fatture scadute | warning | Numero fatture scadute + importo totale in euro (sfondo rosso) | /scadenzario |
| Incassi del mese | account_balance_wallet | Totale incassato nel mese corrente in euro (sfondo verde) | /scadenzario |
| Aging scaduto | schedule | Ripartizione scaduti per fasce: 0-30gg, 31-60gg, 61-90gg, >90gg | /scadenzario |
| Provvigioni | payments | Provvigioni da liquidare | /provvigioni |
| Spedizioni | airport_shuttle | Spedizioni in attesa di evasione | /spedizioni |
| Lettere di intento | description | Lettere di intento attive | /lettere-intento |
| Bolle del mese | inventory | DDT emessi nel mese corrente | /documenti?tipo=DDT |
| Opportunità CRM | track_changes | Opportunità commerciali aperte | /crm |
| Giacenze attive | inventory_2 | Articoli con giacenza a magazzino | /magazzino |
| Alert magazzino | warning_amber | Articoli sotto scorta minima (sfondo alert) | /magazzino |
Tutti i valori numerici sono formattati in formato italiano (es. 1.234 con punto delle migliaia). I valori monetari mostrano il simbolo € (es. 8.089,62 €).
Sotto le card statistiche, se ci sono scadenze aperte, appare la sezione “Situazione Finanziaria” con card più dettagliate:
| Card | Contenuto | Stile |
|---|---|---|
| Crediti in scadenza | Numero totale di scadenze aperte | Neutro |
| Scaduto da incassare | Importo totale scaduto in euro + numero documenti | Bordo rosso (danger) |
| Incassato questo mese | Totale incassi del mese in euro | Bordo verde (success) |
| Aging scaduti | Ripartizione per fasce temporali (0-30gg, 31-60gg, 61-90gg, >90gg) | Barre colorate per fascia |
Cliccando su qualsiasi card della situazione finanziaria si apre lo Scadenzario con i filtri appropriati.
La sezione “Azioni Rapide” offre pulsanti per le operazioni più frequenti:
- Nuovo Soggetto: apre il form di creazione soggetto
- Nuovo Documento: apre la creazione documento
- Nuova Voce Catalogo: apre il form catalogo
I pulsanti appaiono solo se il modulo corrispondente è abilitato.
Il selettore workspace nella topbar (icona storage) mostra il database attualmente in uso e permette di cambiare ambiente:
Come cambiare workspace
- Fare clic sul chip workspace nella topbar (icona storage + nome).
- Si apre un menu dropdown con tutti i workspace assegnati all'utente.
- Fare clic sul workspace desiderato.
- La pagina si ricarica con i dati del nuovo workspace. Tutte le statistiche e i moduli si aggiornano.
Indicatori visivi
- check_circle: workspace attualmente attivo (segno di spunta verde)
- folder_open: workspace normale disponibile
- visibility_off: workspace nascosto (visibile solo ai SUPERADMIN)
- expand_more: freccia nel chip indica che ci sono più workspace disponibili
L'icona auto_stories (libro aperto) nella topbar apre il manuale utente in una modale iframe sovrapposta all'interfaccia.
Funzionamento
- Il manuale è contestuale: si apre automaticamente sulla pagina relativa al modulo attivo. Ad esempio, se si è in Documenti si apre il manuale documenti, se si è in Catalogo si apre il manuale catalogo.
- La modale ha un pulsante “Apri in nuova finestra” (icona open_in_new) per consultare il manuale in un tab separato del browser.
- Chiudere con il pulsante X o cliccando fuori dalla modale.
Manuali disponibili
Ogni modulo ha il proprio manuale HTML dedicato con: normativa di riferimento, istruzioni passo-passo, tabelle di configurazione, FAQ. Sono disponibili 31 manuali per tutti i moduli del sistema.
Cmd+Shift+/ (Mac) o Ctrl+Shift+/ (Windows) apre il manuale dalla tastiera in qualsiasi modulo.Il pulsante utente nella topbar (icona key + nome utente) apre un menu a tendina con:
Intestazione
Avatar con icona person_outline, username e ruolo (Amministratore o Utente).
Voci del menu
| Voce | Icona | Azione | Visibile a |
|---|---|---|---|
| Dashboard | dashboard | Torna alla pagina iniziale | Tutti |
| Profilo | manage_accounts | Apre il profilo personale (nome, email, password) | Tutti |
| Gestione Utenti | admin_panel_settings | Apre l'elenco utenti per la gestione | Solo ADMIN |
| Logout | logout | Disconnette l'utente e torna alla pagina di login | Tutti |
Pulsante Accedi
Quando nessun utente è loggato, al posto del menu utente appare il pulsante “Accedi” (icona key) che porta alla pagina di login.
La pagina di login è la prima schermata visualizzata quando non si è autenticati.
Procedura di accesso
- Inserire lo Username nel primo campo.
- Inserire la Password nel secondo campo.
- Premere Accedi o il tasto
Enter. - Se le credenziali sono corrette, il sistema carica il workspace assegnato e mostra la Dashboard.
- Se le credenziali sono errate, appare un messaggio di errore (senza indicare se è sbagliato username o password, per sicurezza).
Sessione
- La sessione viene mantenuta tramite token JWT salvato nel browser
- Il token ha una scadenza configurabile (default: 24 ore)
- Alla scadenza, il sistema richiede un nuovo login
- Il Logout dal menu utente invalida il token e riporta alla pagina di login
Aggiornamenti dashboard e TopBar con nuove funzionalità di collaborazione e fruizione.
Icone utenti online
Nella TopBar, tra il logo e il titolo azienda, compare una fila di avatar circolari con l'iniziale del nome di ciascun utente attualmente connesso:
- Il tuo avatar è colorato in dorato
- Gli altri utenti hanno il bordo verde
- Passando il mouse sopra compare il tooltip con nome completo e ruolo
Gli utenti sono rilevati tramite middleware socket nel backend e aggiornati in tempo reale.
Le statistiche rispettano i moduli abilitati
Le card statistiche della dashboard mostrano ora solo i dati dei moduli effettivamente abilitati nel workspace. Esempio: se lo Scadenzario è disabilitato, il banner “Scadenze aperte” non appare più. Evita segnalazioni incoerenti sulla home.
Manuale in modale
L'icona 📖 (libro) nella TopBar apre il manuale contestuale in una modale sovrapposta all'applicazione invece di una nuova finestra del browser. Vantaggi:
- Nessun popup bloccato dal browser
- Si resta sulla pagina dell'applicazione
- Chiusura con Esc o clic fuori dalla modale
- Il manuale mostrato è sempre coerente col modulo aperto
Tra le card KPI della dashboard, se hai almeno un lotto di magazzino scaduto o vicino alla scadenza, appare automaticamente una card colorata “Lotti in scadenza”.
Colore della card
- Rossa — hai almeno un lotto già scaduto (urgente: smaltire o rettificare)
- Arancione — ci sono lotti critici (scadenza entro 7 giorni)
- Neutra — solo warning (scadenza entro 30 giorni)
Cosa mostra
- Numero totale di lotti scaduti + critici (quelli urgenti)
- Valore a rischio in euro (somma di quantità residue × costo unitario)
Un click sulla card ti porta direttamente al tab Lotti della pagina Giacenze Magazzino già filtrato sui lotti problematici.
Aggiornamento automatico
La card si aggiorna ogni 5 minuti senza bisogno di ricaricare la pagina. Se risolvi il problema (fai scarico, sposti, rettifichi) il numero scende in tempo reale.
La barra superiore del gestionale mostra sempre, da sinistra a destra:
- Logo NOX cliccabile — ti riporta alla dashboard
- Nome della tua azienda in bianco (configurabile in Parametri)
- Nome pagina/modulo attualmente aperto
- Pillola utenti connessi con gli avatar colorati di chi sta lavorando ora nel tuo workspace
- Badge versione (es.
v 1.3.0) — vedi § 14 - Cerca ovunque (Ctrl+K) — apre la ricerca globale
- Database corrente — se hai più workspace, lo switcher permette di cambiare
- Manuale (libro) — apre il manuale del modulo corrente
- Menu utente in fondo a destra — profilo, sicurezza, logout
A schermi stretti (sotto 780px) i badge minori si nascondono per lasciare spazio al titolo. Sotto 800px la topbar non si deforma: compare uno scroll orizzontale mantenendo tutto leggibile.
Cliccando sul badge versione (es. v 1.3.0) nella topbar si apre una finestra con le informazioni sull'autore del software.
Cosa vedi
- Foto ritratto dell'autore
- Nome e cognome
- Numero WhatsApp cliccabile (apre direttamente la chat con l'autore)
- Logo del team di sviluppo
- Anno di rilascio
Scorciatoia tastiera
Stessa finestra si apre digitando in sequenza le lettere M—D—P (entro un secondo e mezzo), senza bisogno del mouse.
Chiusura della modale: tasto Esc, click sulla × in alto a destra, oppure click fuori dal riquadro.
Topbar
- Colore più scuro: sfondo da
rgba(145, 195, 235, 0.55)a un blu-azzurro più opaco (rgba(149, 197, 236, 0.918)). Migliore contrasto con il titolo azienda bianco e meno effetto "lavato" sui display luminosi. - Titolo azienda centrato verticalmente: prima il nome era ancorato in alto (
align-self: flex-start), ora è centrato verticalmente nella topbar alta 64px per un look più bilanciato.
Sidebar — logo ERP nel footer
Il footer della sidebar ora mostra un logo ERP animato (con leggero alone azzurro drop-shadow) al posto della scritta "ERP" in testo. Rimane la riga "distribuito da" seguita dal logo DEV Systems, linkato alla pagina di Stato Avanzamento Lavori.
Il logo è salvato in /assets/erp-logo.png (1.3 MB) con altezza 44px. Caricato solo una volta a inizio sessione.
topbar.component.css, dashboard.component.html, dashboard.component.css. Nessun impatto funzionale.