nis2-agile/docs/kb/V2_UI_NAVIGAZIONE.md

FONTE: Documentazione interfaccia prodotto NIS2 Agile (interfaccia "V2" — design system Bootstrap Italia / AGID). AUTORITA: Team prodotto NIS2 Agile — descrizione UI/navigazione (NON contenuto normativo). SCOPO: guida operativa per l'assistente AI ARIA, così da indirizzare l'utente nell'interfaccia dell'app. Questo documento descrive SOLO la struttura e la navigazione; non contiene affermazioni normative.

⚠️ AGGIORNATO 2026-06-19 — questo documento SOSTITUISCE la versione precedente (ingerita il 2026-06-12) che descriveva pagine con suffisso -bi.html: quell'approccio "doppio file" è stato ABBANDONATO. La V2 è ora applicata in-place sulle pagine esistenti. Non esistono file -bi.html: gli URL sono quelli normali (dashboard.html, risks.html, …). Re-ingerire questo file per rimpiazzare i chunk stale.

NIS2 Agile — Interfaccia (Bootstrap Italia / AGID): struttura e navigazione

Cos'è la "V2" Bootstrap Italia

La "V2" è l'unica interfaccia di riferimento di NIS2 Agile, costruita con il design system Bootstrap Italia (conforme AGID/WCAG 2.1 AA). NON è un set di pagine separate: il Bootstrap Italia è stato integrato direttamente nelle pagine esistenti. Ogni pagina applicativa carica il CSS di Bootstrap Italia (/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css) prima di css/style.css (così il design system esistente resta autorevole), più il bundle JS di Bootstrap Italia e public/js/common-bi.js, che ridefinisce il rendering della sidebar riusando gli stessi helper e lo stesso albero di navigazione: gli ID DOM, le voci di menu e i link restano identici, cambia solo la resa grafica (markup e stile Bootstrap Italia, accessibilità con <nav aria-label>, voce attiva con aria-current="page").

Non esistono pagine con suffisso -bi.html. Nel codice resta una mappa BI_PAGES in common-bi.js, ma è vestigiale: associa ogni pagina a sé stessa ('dashboard.html' → 'dashboard.html'), quindi i link puntano sempre ai file normali. Nessun link rotto.

Architettura: l'app è multi-pagina (non SPA). Ogni modulo è una pagina HTML a sé. La sidebar a sinistra è il punto di navigazione principale ed è presente in tutte le pagine applicative (quelle con il riquadro <aside class="sidebar" id="sidebar">, popolato da common-bi.js). Le pagine pubbliche (login, registrazione, onboarding, landing, recupero password) NON hanno la sidebar: caricano solo il CSS Bootstrap Italia per coerenza grafica.

Stato della conversione

La migrazione a Bootstrap Italia è completa su tutte le pagine applicative (quelle con sidebar) e sui documenti pubblici (es. integrazioniext.html, mktg-api-doc.html). Il funnel pubblico (login.html, register.html, onboarding.html) è anch'esso su Bootstrap Italia (solo CSS, niente sidebar). La vecchia pagina setup-org.html è stata rimossa (sostituita da onboarding.html).

---

Struttura della sidebar (menu di navigazione)

La sidebar è organizzata in sezioni con etichette. In alto c'è il brand "NIS2 Agile — Compliance Platform"; sotto, per gli utenti consulente, può comparire un selettore di organizzazione (org-switcher). In basso: toggle lingua IT / EN, box utente (avatar, nome, ruolo), pulsante Esci (logout) e versione dell'app.

Sezione — Principale

• Dashboard (dashboard.html) — pagina iniziale dopo il login: panoramica generale dello stato di conformità.
• Compliance Journey (workflow.html) — percorso guidato/flusso di lavoro per la conformità.
• Gap Analysis (assessment.html) — questionario di valutazione e analisi degli scostamenti.
• Gap Analysis ACN (acn-gap.html) — valutazione di secondo livello sulle misure/requisiti ACN.
• Modello SGSI (ISO 27001) (isms.html) — modulo Sistema di Gestione della Sicurezza delle Informazioni.

Sezione — Gestione

• Rischi (risks.html) — registro dei rischi e relativa gestione.
• Incidenti (incidents.html) — gestione degli incidenti.
• Policy (policies.html) — gestione delle policy/documenti (Policy e Procedure unificate).
• Misure e Requisiti (misure-requisiti.html) — misure/requisiti di conformità collegati alle policy.
• Supply Chain (supply-chain.html) — gestione fornitori e catena di fornitura (campagne questionari + portale fornitore).
• Segnalazioni (whistleblowing.html) — segnalazioni/whistleblowing.
• Normative (normative.html) — aggiornamenti normativi.
• AI Cross-Analysis (cross-analysis.html) — analisi incrociata assistita da AI.
• Knowledge Base (kb.html) — base di conoscenza documentale.

Sezione — Organizzazione (modello relazionale / ISO-readiness)

• Organigramma (organigramma.html), Competenze (competenze.html), Matrice RACI (raci.html), Stakeholder (stakeholders.html).
• Audit interni (internal-audits.html), Riesame Direzione (management-review.html), Controlli periodici (controlli-periodici.html), Calendario (calendario.html).

Sezione — Operativo

• Formazione (training.html) — corsi e formazione.
• Asset (assets.html) — inventario degli asset.
• Audit & Report (reports.html) — audit e reportistica.

Sezione — Sistema

• Guida all'uso (guida.html) — manuale/guida d'uso.
• Impostazioni (settings.html) — impostazioni organizzazione/profilo/membri.
• Architettura (architecture.html) — pagina informativa sull'architettura del sistema.
• Simulazione Demo (simulate.html) — ambiente dimostrativo.
• Integrazioni Esterne (integrazioniext.html) — integrazioni con sistemi esterni.

Nota: l'elenco esatto e l'ordine delle voci sono definiti da common.js/common-bi.js e possono dipendere dal ruolo dell'utente. Alcune pagine (es. Continuità di Servizio service-continuity.html) sono raggiungibili via link contestuale e non dal menu laterale.

---

Descrizione e scopo delle pagine/moduli principali

Pagina	URL	Scopo
Dashboard	dashboard.html	Panoramica iniziale post-login: stato complessivo della conformità e accesso rapido ai moduli. È la home dell'app.
Compliance Journey	workflow.html	Percorso guidato passo-passo verso la conformità.
Gap Analysis	assessment.html	Questionario di valutazione della conformità e analisi degli scostamenti (gap).
Gap Analysis ACN	acn-gap.html	Valutazione di secondo livello dedicata alle misure/requisiti ACN.
Modello SGSI / ISO 27001	isms.html	Sistema di Gestione della Sicurezza delle Informazioni (ISO 27001), SoA pre-popolata da NIS2.
Rischi	risks.html	Registro dei rischi, valutazione e trattamento.
Incidenti	incidents.html	Registrazione e gestione del ciclo di vita degli incidenti (notifiche Art.23).
Policy	policies.html	Gestione, redazione e approvazione di policy/procedure unificate.
Misure e Requisiti	misure-requisiti.html	Misure/requisiti di conformità, collegati bidirezionalmente alle policy.
Supply Chain	supply-chain.html	Gestione fornitori, campagne questionari, portale fornitore, panoramica rischio.
Segnalazioni	whistleblowing.html	Gestione delle segnalazioni/whistleblowing.
Normative	normative.html	Feed/elenco degli aggiornamenti normativi.
AI Cross-Analysis	cross-analysis.html	Analisi incrociata dei dati di conformità assistita da AI.
Knowledge Base	kb.html	Base di conoscenza documentale: caricamento e consultazione documenti.
Organigramma / Competenze / RACI / Stakeholder	organigramma.html, competenze.html, raci.html, stakeholders.html	Modello organizzativo: ruoli, competenze, responsabilità RACI, mappa stakeholder.
Audit interni / Riesame Direzione / Controlli periodici / Calendario	internal-audits.html, management-review.html, controlli-periodici.html, calendario.html	Moduli di gestione ISO-readiness (§9.1/9.2/9.3) e scadenziario unico.
Formazione	training.html	Corsi, assegnazioni e stato della formazione.
Asset	assets.html	Inventario asset e rilevanza NIS2.
Audit & Report	reports.html	Controlli di audit, evidenze, reportistica ed export.
Impostazioni	settings.html	Impostazioni organizzazione, profilo utente, gestione membri, sessioni.

---

Come navigare

1. Accesso: dopo il login (login.html) l'utente arriva alla Dashboard (dashboard.html), punto di partenza.
2. Menu laterale (sidebar): tutte le funzioni si raggiungono dalla sidebar a sinistra. La voce della pagina corrente è evidenziata (stato "active", aria-current="page").
3. Cambio lingua: in fondo alla sidebar, i pulsanti IT / EN cambiano la lingua dell'interfaccia.
4. Box utente e Logout: in fondo alla sidebar sono mostrati avatar, nome e ruolo; il pulsante con l'icona di uscita esegue il logout.
5. Selettore organizzazione (consulenti): per chi gestisce più organizzazioni, sopra il menu può comparire un selettore per cambiare l'organizzazione attiva.
6. Versione app: in fondo alla sidebar è indicata la versione dell'applicazione.
7. Mobile: su schermi piccoli la sidebar diventa un drawer apribile (toggle).
8. Aiuto contestuale: molte pagine mostrano un pulsante "?" che apre l'aiuto specifico della pagina.

Dove trovare le funzioni principali (mappa rapida per ARIA)

• "Vedere lo stato di conformità / panoramica" → Dashboard.
• "Fare la valutazione / questionario / gap" → Gap Analysis; parte ACN → Gap Analysis ACN.
• "Gestire i rischi" → Rischi.
• "Segnalare o gestire un incidente" → Incidenti.
• "Documenti, policy e procedure" → Policy; collegamento a misure/requisiti → Misure e Requisiti.
• "Fornitori / catena di fornitura / questionari fornitore" → Supply Chain.
• "Fare una segnalazione (whistleblowing)" → Segnalazioni.
• "Aggiornamenti normativi" → Normative.
• "Analisi AI incrociata" → AI Cross-Analysis.
• "Cercare/caricare documenti di conoscenza" → Knowledge Base.
• "Ruoli, competenze, responsabilità, stakeholder" → Organigramma / Competenze / RACI / Stakeholder.
• "Audit interni, riesame della direzione, controlli periodici, scadenze" → moduli omonimi + Calendario.
• "Corsi e formazione" → Formazione.
• "Inventario asset" → Asset.
• "Report, audit, evidenze, export" → Audit & Report.
• "Modello SGSI / ISO 27001" → Modello SGSI (ISO 27001).
• "Impostazioni, profilo, membri, sessioni" → Impostazioni.

---

Note tecniche (per coerenza, non normative)

• La sidebar è generata da public/js/common-bi.js, caricato dopo common.js, di cui ridefinisce loadSidebar().
• L'albero di navigazione (nomi voci, sezioni, link) è lo stesso della V1 (common.js): cambiando l'uno va aggiornato anche l'altro per parità.
• Il CSS Bootstrap Italia è caricato prima di style.css, che resta autorevole sui widget renderizzati via JS.
• Le pagine pubbliche del funnel non caricano common-bi.js (non hanno sidebar): caricano solo il CSS Bootstrap Italia.

---

Come ingerire questo documento nella KB (collection nis2_kb, scope SYSTEM)

L'ingest richiede accesso a Qdrant (nis2_kb) + Voyage, disponibile solo dall'host Hetzner / dal container nis2-app (NON dal devenv). Idempotenza obbligatoria: cancellare prima i chunk SYSTEM con lo stesso source (per rimuovere la versione stale del 2026-06-12), poi ri-upsert.

Opzione A — endpoint API (super_admin, scope SYSTEM)

POST /api/knowledgebase/ingest con JWT super_admin (lo scope SYSTEM è consentito solo ai super_admin). Body: {title, text, entity_type:"ui_doc", source:"Documentazione prodotto NIS2 Agile — UI V2 (Bootstrap Italia)", scope:"SYSTEM"} con text = contenuto di questo file.

Opzione B — dal container nis2-app

Usare EmbedService + VectorService (ensureCollection → cancella chunk SYSTEM con source corrispondente → upsertBatch) con scope=SYSTEM. Script di riferimento idempotente: scripts/ingest-v2-ui-doc.php (il container monta solo application/+public/, quindi copiare temporaneamente lo script + questo .md sotto application/, eseguire via docker exec nis2-app php, poi rimuovere i file temporanei).

Stato ingest

• 2026-06-12: ingerita la versione stale (-bi.html), 8 chunk SYSTEM — DA RIMPIAZZARE.
• 2026-06-19: documento corretto (questo file). Re-ingest host-side ancora da eseguire (devenv non raggiunge Qdrant/Voyage e non ha credenziali super_admin).