AdminGit2026/nis2-agile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] UI V3 — flotta: chrome top-nav + design system su 32 pagine app

Browse Source 
Migrazione UI dal V2 (Bootstrap Italia, sidebar) al V3 (top-nav mega-menu
navy/oro, Inter+Lucide self-host) fedele ai mockup docs/mockup Ui/.
- 32 pagine app convertite (incl. admin/*): head Inter+v3.css, chrome
  topnav-v3, contenuti in card V3, dati REALI preservati (id/data-* intatti),
  i18n/help/FAB reali invariati, nessun CDN esterno.
- v3.css: aggiunti widget condivisi (modal/toast/form/btn-variant/spinner/
  progress/tag/badge) + utility (.btn base, .text-muted, .sr-only) + alias
  variabili V2->token V3, così modali/form/toast di common.js funzionano
  ovunque senza style.css.
- maintenance.html: finestra estesa a ~12:15.
- docs/UI_V3_FLEET_BRIEF.md: ricetta operativa della flotta.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
2026-06-27 15:57:35 +02:00
co-authored by Claude Opus 4.8
parent b0fc190704
commit a4150b5389
37 changed files with 4655 additions and 4922 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/supply-chain.html
+97 -39
View File
@@ -3,13 +3,70 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Supply Chain - NIS2 Agile</title>
<!-- Bootstrap Italia v2.18.1 self-hostato (regola: MAI CDN). Caricato PRIMA di style.css
cosi' style.css (design system esistente) resta autorevole per i widget renderizzati
via JS (tabelle/modali/form) -> parita' funzionale assoluta. BI veste la chrome. -->
<link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
<link rel="stylesheet" href="/css/style.css?v=20260618">
<title>Supply Chain · NIS2 Agile</title>
<!-- UI V3: Inter self-host + design system v3.css (NO Google Fonts / NO unpkg CDN / NO Bootstrap Italia). -->
<link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
<link rel="stylesheet" href="/css/v3.css?v=20260627">
<style>
/* ── Mappa variabili legacy (style.css rimosso) → token V3. Mantiene
intatte le regole CSS della pagina che usavano --gray-*, --danger, ecc. ─ */
:root {
--card-bg:#fff; --border-radius:12px; --transition-fast:.15s;
--primary:#1F5FA8; --secondary:#1E8A5A; --danger:#C62828; --warning:#D98324;
--gray-50:#F7FAFD; --gray-100:#EEF2F7; --gray-200:#E3E9F0; --gray-300:#CBD5E1;
--gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155;
--gray-800:#1E293B; --gray-900:#15263C;
--info-bg:#E7F0FB; --warning-bg:#FBF1E2; --danger-bg:#FBE9E9;
}
/* ── Widget styles V3 (componenti emessi via JS: tabelle/modali/form/badge).
Solo regole essenziali NON coperte da v3.css, agganciate ai token V3.
.btn-primary/.btn-ghost restano definiti da v3.css. ───────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:8px 13px; font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; text-decoration:none; }
.btn:hover { background:#F5F8FC; border-color:#c7d4e4; }
.btn-secondary { background:#fff; color:var(--ink); border-color:var(--line); }
.btn-secondary:hover { background:#F5F8FC; border-color:#c7d4e4; }
.btn-danger { background:var(--c-red); color:#fff; border-color:var(--c-red); }
.btn-danger:hover { background:#A82020; }
.btn-sm { padding:5px 10px; font-size:11.5px; }
.btn .icon { width:14px; height:14px; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:6px; background:#EEF2F7; color:#5b6b80; white-space:nowrap; }
.badge-success { background:#E6F4EC; color:#1E7A4E; }
.badge-info { background:#E7F0FB; color:#1F5FA8; }
.badge-warning { background:#FBF1E2; color:#9A6418; }
.badge-danger { background:#FBE9E9; color:#B23636; }
.badge-neutral { background:#EEF2F7; color:#5b6b80; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-weight:600; font-size:.86rem; margin-bottom:5px; color:var(--ink); }
.required { color:var(--c-red); }
.form-input, .form-select, .form-textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:.9rem; background:#fff; color:var(--ink); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:#9FBEDD; }
.form-textarea { min-height:60px; resize:vertical; }
.empty-state { text-align:center; padding:40px 20px; color:var(--muted); }
.empty-state h4 { margin:8px 0 4px; color:var(--ink); font-size:1rem; }
.empty-state p { margin:0; font-size:.86rem; }
.table-container { width:100%; overflow-x:auto; }
.table-container table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table-container th, .table-container td { text-align:left; padding:11px 14px; border-top:1px solid var(--line); vertical-align:middle; }
.table-container thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-top:0; }
.table-container tbody tr:hover { background:#FAFCFE; }
.card-header { padding:16px 20px 0; }
.card-header h3 { margin:0 0 14px; font-size:15px; font-weight:700; }
.card-body { padding:20px; }
.mb-24 { margin-bottom:24px; }
/* Modali (markup di showModal in common.js) */
.modal-overlay { position:fixed; inset:0; background:rgba(15,38,60,.5); display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px; z-index:1050; opacity:0; transition:opacity .2s; }
.modal-overlay.active { opacity:1; }
.modal { background:#fff; border-radius:var(--radius); width:100%; max-width:560px; box-shadow:0 20px 50px rgba(11,40,80,.25); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-header h3 { margin:0; font-size:1.05rem; font-weight:700; }
.modal-close { background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--muted); }
.modal-body { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
/* Spinner inverso (su pulsante import) */
.progress-spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.content-header-actions { display:flex; gap:8px; flex-wrap:wrap; }
/* ── Supply Chain Page Styles ─────────────────────────── */
.filters-bar {
display: flex;
@@ -380,21 +437,28 @@
<!-- PWA:end -->
</head>
<body>
<div class="app-layout">
<aside class="sidebar" id="sidebar"></aside>
<!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js -->
<div id="topnav"></div>
<main class="main-content">
<header class="content-header">
<h1 class="h2" data-i18n="supply_chain.title">Sicurezza Supply Chain</h1>
<div class="content-header-actions">
<button class="btn btn-secondary" onclick="openCategoriesModal()"><svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-bookmark"></use></svg> <span data-i18n="sp.categories_btn">Categorie</span></button>
<button class="btn btn-secondary" onclick="openTemplatesModal()"><svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-files"></use></svg> <span data-i18n="sp.templates_btn">Template</span></button>
<button class="btn btn-secondary" onclick="openImportModal()"><svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-upload"></use></svg> <span data-i18n="sp.import_btn">Importa</span></button>
<button class="btn btn-primary" onclick="openCreateModal()"><span data-i18n="sp.new_supplier">+ Nuovo Fornitore</span></button>
</div>
</header>
<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 data-i18n="supply_chain.title">Sicurezza Supply Chain</span>
</nav>
<div class="page-head">
<div>
<h1 data-i18n="supply_chain.title">Sicurezza Supply Chain</h1>
<p class="sub">Valutazione e monitoraggio del rischio della catena di fornitura (art. 24 D.Lgs. 138/2024)</p>
</div>
<div class="content-header-actions">
<button class="btn-ghost" onclick="openCategoriesModal()"><i data-lucide="bookmark" class="ic"></i><span data-i18n="sp.categories_btn">Categorie</span></button>
<button class="btn-ghost" onclick="openTemplatesModal()"><i data-lucide="files" class="ic"></i><span data-i18n="sp.templates_btn">Template</span></button>
<button class="btn-ghost" onclick="openImportModal()"><i data-lucide="upload" class="ic"></i><span data-i18n="sp.import_btn">Importa</span></button>
<button class="btn-primary" onclick="openCreateModal()"><i data-lucide="plus" class="ic"></i><span data-i18n="sp.new_supplier">Nuovo Fornitore</span></button>
</div>
</div>
<div class="content-body" id="page-content">
<div class="stack" id="page-content">
<!-- Risk Overview -->
<div class="risk-overview" id="risk-overview">
<div class="risk-card">
@@ -474,29 +538,23 @@
<!-- Detail View (hidden by default) -->
<div id="supplier-detail-view" style="display:none;"></div>
</div>
</main>
</div>
</main>
<!-- Scripts V3: api.js → common.js (helper+FAB reali) → Lucide self-host →
topnav-v3.js (chrome, ridefinisce loadSidebar) → i18n → help → init pagina -->
<script src="/js/api.js?v=20260625d"></script>
<script src="/js/common.js?v=20260624g"></script>
<!-- Bootstrap Italia bundle (componenti) + override sidebar BI (common-bi.js).
common-bi.js va DOPO common.js: ridefinisce solo loadSidebar() con markup BI,
riusando tutti gli helper di common.js (zero backend). -->
<script src="/vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
<script>
if (window.bootstrap && bootstrap.loadFonts) {
bootstrap.loadFonts('/vendor/bootstrap-italia/dist/fonts');
}
</script>
<script src="/js/common-bi.js?v=20260625d"></script>
<script src="/js/i18n.js?v=20260621sp"></script>
<script src="/js/common.js?v=20260627v3"></script>
<script src="/vendor/lucide/lucide.min.js"></script>
<script src="/js/topnav-v3.js?v=20260627"></script>
<script src="/js/i18n.js?v=20260631"></script>
<script src="/js/help.js?v=20260625d"></script>
<script>
// ── Auth & Init ─────────────────────────────────────────
if (!checkAuth()) throw new Error('Not authenticated');
loadSidebar();
I18n.init();
HelpSystem.init();
loadSidebar(); // = loadTopnavV3()
if (typeof I18n !== 'undefined') I18n.init();
if (typeof HelpSystem !== 'undefined') HelpSystem.init();
if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
// ── Labels ──────────────────────────────────────────────
const CRITICALITY_LABELS = {
@@ -1224,7 +1282,7 @@
ov.innerHTML = `
<div style="background:#fff;border-radius:10px;max-width:640px;width:100%;max-height:90vh;overflow:auto;">
<div style="display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e2e8f0;">
<h3 style="margin:0;"><svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-upload"></use></svg> ${I18n.t('sp.import_title')}</h3>
<h3 style="margin:0;">${I18n.t('sp.import_title')}</h3>
<button onclick="document.getElementById('importModalDyn').remove()" style="background:none;border:none;font-size:22px;cursor:pointer;line-height:1;">&times;</button>
</div>
<div style="padding:20px;">
@@ -1241,7 +1299,7 @@
</div>
<div style="display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #e2e8f0;">
<button class="btn btn-secondary" onclick="document.getElementById('importModalDyn').remove()">${I18n.t('sp.cancel')}</button>
<button class="btn btn-primary" id="importRunBtn" onclick="runSupplierImport()"><svg class="icon icon-sm icon-white" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-upload"></use></svg> ${I18n.t('sp.import_run')}</button>
<button class="btn btn-primary" id="importRunBtn" onclick="runSupplierImport()">${I18n.t('sp.import_run')}</button>
</div>
</div>`;
document.body.appendChild(ov);
@@ -1319,7 +1377,7 @@
} catch (e) {
resEl.innerHTML = `<span style="color:#dc2626;">Errore: ${(e && e.message) || e}</span>`;
} finally {
btn.disabled = false; btn.innerHTML = '<svg class="icon icon-sm icon-white" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-upload"></use></svg> Importa';
btn.disabled = false; btn.innerHTML = 'Importa';
}
}