nis2-agile/public/dashboard.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Dashboard · NIS2 Agile</title>
    <!-- UI V3: Inter self-host + design system v3.css (NO Google Fonts / NO unpkg CDN). -->
    <link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
    <link rel="stylesheet" href="/css/v3.css?v=20260724a">
  <!-- PWA:start -->
  <link rel="manifest" href="/manifest.webmanifest">
  <meta name="theme-color" content="#0066CC">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="NIS2 Agile">
  <meta name="application-name" content="NIS2 Agile">
  <script src="/js/pwa.js?v=20260614" defer></script>
  <!-- PWA:end -->
</head>
<body>
    <!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js in questo host -->
    <div id="topnav"></div>

    <main class="wrap">
        <nav class="crumb" aria-label="breadcrumb">
            <i data-lucide="home" class="ic"></i><a href="dashboard.html">Home</a>
            <i data-lucide="chevron-right" class="ic"></i><span>Dashboard</span>
        </nav>
        <div class="page-head">
            <div>
                <h1 data-i18n="dashboard.title">Dashboard</h1>
                <p class="sub">Stato di conformità NIS2 del tuo perimetro</p>
            </div>
            <div class="date"><i data-lucide="calendar" class="ic"></i><span id="header-date"></span></div>
        </div>

        <div class="stack">
            <!-- Monitor Giornaliero (eventi reali: scadenze + attività) -->
            <section class="card card-pad">
                <div class="cal-head">
                    <h3>Monitor Giornaliero</h3>
                    <div class="cal-ctrl">
                        <button class="ctrl-btn" id="d-prev" title="Giorni precedenti" aria-label="Giorni precedenti"><i data-lucide="chevron-left" class="ic"></i></button>
                        <button class="ctrl-today" id="d-today"><i data-lucide="calendar-check" class="ic"></i>Oggi</button>
                        <button class="ctrl-btn" id="d-next" title="Giorni successivi" aria-label="Giorni successivi"><i data-lucide="chevron-right" class="ic"></i></button>
                    </div>
                </div>
                <div class="daystrip" id="daystrip"></div>
            </section>

            <!-- Monitor Settimanale -->
            <section class="card card-pad">
                <div class="cal-head">
                    <h3>Monitor Settimanale</h3>
                    <div class="cal-ctrl">
                        <button class="ctrl-btn" id="w-prev" title="Settimana precedente" aria-label="Settimana precedente"><i data-lucide="chevron-left" class="ic"></i></button>
                        <button class="ctrl-today" id="w-today"><i data-lucide="calendar-check" class="ic"></i>Questa settimana</button>
                        <button class="ctrl-btn" id="w-next" title="Settimana successiva" aria-label="Settimana successiva"><i data-lucide="chevron-right" class="ic"></i></button>
                    </div>
                </div>
                <div class="weekstrip" id="weekstrip"></div>
            </section>

            <!-- 3 stat card (dati reali) -->
            <div class="grid3">
                <a href="assessment.html" class="card card-pad stat blue" id="stat-gap">
                    <div class="ibox"><i data-lucide="git-compare" class="ic"></i></div>
                    <div style="flex:1;min-width:0"><div class="lbl">Gap analysis in corso</div><div class="val">…</div><div class="sub">caricamento…</div></div>
                </a>
                <a href="training.html" class="card card-pad stat green" id="stat-training">
                    <div class="ibox"><i data-lucide="graduation-cap" class="ic"></i></div>
                    <div style="flex:1;min-width:0"><div class="lbl">Formazione</div><div class="val">…</div><div class="sub">caricamento…</div></div>
                </a>
                <a href="risks.html" class="card card-pad stat amber" id="stat-risk">
                    <div class="ibox"><i data-lucide="shield-check" class="ic"></i></div>
                    <div style="flex:1;min-width:0"><div class="lbl">Rischi valutati</div><div class="val">…</div><div class="sub">caricamento…</div><div class="bar"><i style="width:0%"></i></div></div>
                </a>
            </div>

            <!-- Scadenze + Attività aperte -->
            <div class="split2">
                <section class="card card-pad">
                    <div class="sec-head"><h3>Scadenze · prossimi 10 giorni</h3><span class="hint" id="sca-hint"></span></div>
                    <div id="sca-list"><div class="v3-loading"><span class="v3-spin"></span>Caricamento…</div></div>
                </section>
                <section class="card card-pad">
                    <div class="sec-head"><h3>Attività aperte</h3>
                        <a class="btn-primary" href="stakeholder-activities.html"><i data-lucide="plus" class="ic"></i>Nuova attività</a></div>
                    <div class="act-scroll" id="act-scroll"><div class="v3-loading"><span class="v3-spin"></span>Caricamento…</div></div>
                </section>
            </div>

            <!-- Anagrafica + Documenti istituzionali -->
            <div class="split-anag">
                <section class="card card-pad">
                    <div class="sec-head"><h3>Anagrafica aziendale</h3>
                        <a class="btn-ghost" href="settings.html"><i data-lucide="pencil" class="ic"></i>Modifica</a></div>
                    <div id="anag-card"><div class="v3-loading"><span class="v3-spin"></span>Caricamento…</div></div>
                </section>
                <section class="card card-pad">
                    <div class="sec-head"><h3>Documenti istituzionali</h3></div>
                    <div id="doc-card"></div>
                </section>
            </div>
        </div>
    </main>

    <!-- Scripts V3: api.js (client REST, prima) → common.js (helper+FAB reali) →
         Lucide self-host → topnav-v3.js (chrome, ridefinisce loadSidebar) →
         i18n → help → dashboard.js -->
    <script src="/js/api.js?v=20260627u"></script>
    <script src="/js/common.js?v=20260627t"></script>
    <script src="/vendor/lucide/lucide.min.js"></script>
    <script src="/js/topnav-v3.js?v=20260627t"></script>
    <script src="/js/i18n.js?v=20260627p"></script>
    <script src="/js/help.js?v=20260627n"></script>
    <script src="/js/dashboard.js?v=20260724a"></script>
    <script>
        // ── Auth check ───────────────────────────────────────────
        if (!checkAuth()) throw new Error('Not authenticated');

        // ── Init chrome + i18n + help ────────────────────────────
        loadSidebar();                 // = loadTopnavV3() (definito in topnav-v3.js)
        if (typeof I18n !== 'undefined') I18n.init();
        if (typeof HelpSystem !== 'undefined') HelpSystem.init();

        // Data corrente nell'header
        var hd = document.getElementById('header-date');
        if (hd) hd.textContent = new Date().toLocaleDateString('it-IT', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

        // Icone Lucide (chrome + pagina)
        if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }

        // ── Dati reali ───────────────────────────────────────────
        if (typeof initDashboard === 'function') initDashboard();
    </script>
</body>
</html>