[FEAT] UI V3 — flotta: chrome top-nav + design system su 32 pagine app
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:
co-authored by
Claude Opus 4.8
parent
b0fc190704
commit
a4150b5389
+194
-415
@@ -3,344 +3,127 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Audit e Report - 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>Audit e Report · NIS2 Agile</title>
|
||||
<!-- UI V3: Inter self-host + design system v3.css (self-host only, nessun CDN esterno). -->
|
||||
<link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
|
||||
<link rel="stylesheet" href="/css/v3.css?v=20260627">
|
||||
<style>
|
||||
/* ── Compat V3: token + widget emessi dal JS (ex style.css, niente CDN) ───── */
|
||||
:root{
|
||||
--primary:#1F5FA8;--primary-bg:#EAF1FA;
|
||||
--secondary:#16794A;--secondary-bg:#E6F4EC;
|
||||
--warning:#B45309;--danger:#B42318;--info:#1F5FA8;--info-bg:#EAF1FA;
|
||||
--gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-200:#E3E9F0;--gray-300:#CBD5E1;
|
||||
--gray-400:#94A3B8;--gray-500:#64748B;--gray-600:#475569;--gray-700:#334155;--gray-800:#1E293B;
|
||||
--card-bg:#fff;--border-radius:10px;--border-radius-sm:7px;
|
||||
--card-shadow:0 1px 2px rgba(16,40,80,.06),0 1px 3px rgba(16,40,80,.05);
|
||||
--transition-fast:.12s ease;--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
|
||||
}
|
||||
/* Bottoni emessi dal JS (modali) — coerenti con v3.css */
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;line-height:1.2;text-decoration:none}
|
||||
.btn:disabled{opacity:.55;cursor:not-allowed}
|
||||
.btn-primary{background:var(--c-blue,#1F5FA8);color:#fff}.btn-primary:hover:not(:disabled){background:#1A5494}
|
||||
.btn-secondary{background:#fff;color:var(--ink,#1E293B);border-color:var(--line,#E3E9F0)}.btn-secondary:hover:not(:disabled){background:#F5F8FC;border-color:#c7d4e4}
|
||||
|
||||
/* ── Tab Navigation ─────────────────────────────────────── */
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid var(--gray-200);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.tab-nav { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:24px; flex-wrap:wrap; }
|
||||
.tab-nav button {
|
||||
padding: 12px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
color: var(--gray-500);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
padding:12px 22px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
|
||||
color:var(--gray-500); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:all var(--transition-fast);
|
||||
}
|
||||
.tab-nav button:hover {
|
||||
color: var(--gray-700);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
.tab-nav button.active {
|
||||
color: var(--primary);
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; }
|
||||
.tab-nav button:hover { color:var(--gray-700); background:var(--gray-50); }
|
||||
.tab-nav button.active { color:var(--primary); border-bottom-color:var(--primary); }
|
||||
.tab-nav button:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; border-radius:4px 4px 0 0; }
|
||||
.tab-panel { display:none; }
|
||||
.tab-panel.active { display:block; }
|
||||
|
||||
/* ── Data Table ─────────────────────────────────────────── */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
.data-table thead {
|
||||
background: var(--gray-50);
|
||||
}
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
}
|
||||
.data-table td {
|
||||
padding: 12px 16px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-700);
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
}
|
||||
.data-table tr:last-child td { border-bottom: none; }
|
||||
.data-table tbody tr:hover td { background: var(--gray-50); }
|
||||
.data-table { width:100%; border-collapse:collapse; background:var(--card-bg); border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--card-shadow); }
|
||||
.data-table thead { background:var(--gray-50); }
|
||||
.data-table th { text-align:left; padding:11px 16px; font-size:.72rem; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--gray-200); }
|
||||
.data-table td { padding:11px 16px; font-size:.875rem; color:var(--gray-700); border-bottom:1px solid var(--gray-100); }
|
||||
.data-table tr:last-child td { border-bottom:none; }
|
||||
.data-table tbody tr:hover td { background:var(--gray-50); }
|
||||
.data-table tbody tr.clickable-row { cursor:pointer; }
|
||||
|
||||
/* ── Status Badges ──────────────────────────────────────── */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-badge.not_started { background: var(--gray-100); color: var(--gray-600); }
|
||||
.status-badge.in_progress { background: var(--info-bg); color: var(--info); }
|
||||
.status-badge.implemented { background: var(--secondary-bg); color: var(--secondary); }
|
||||
.status-badge.verified { background: var(--primary-bg); color: var(--primary); }
|
||||
.status-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:600; }
|
||||
.status-badge.not_started { background:var(--gray-100); color:var(--gray-600); }
|
||||
.status-badge.in_progress { background:var(--info-bg); color:var(--info); }
|
||||
.status-badge.implemented { background:var(--secondary-bg); color:var(--secondary); }
|
||||
.status-badge.verified { background:var(--primary-bg); color:var(--primary); }
|
||||
|
||||
/* ── Progress Bar ───────────────────────────────────────── */
|
||||
.progress-bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.progress-bar {
|
||||
flex-grow: 1;
|
||||
height: 6px;
|
||||
background: var(--gray-200);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
min-width: 80px;
|
||||
}
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.progress-pct {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
.progress-bar-container { display:flex; align-items:center; gap:8px; }
|
||||
.progress-bar { flex-grow:1; height:6px; background:var(--gray-200); border-radius:3px; overflow:hidden; min-width:80px; }
|
||||
.progress-bar-fill { height:100%; border-radius:3px; transition:width .3s ease; }
|
||||
.progress-pct { font-size:.8rem; font-weight:700; min-width:36px; text-align:right; color:var(--gray-600); }
|
||||
|
||||
/* ── stat-box (monitoraggio) ────────────────────────────── */
|
||||
.stat-box { padding:10px 14px; background:var(--gray-50); border-radius:8px; }
|
||||
.stat-box .stat-value { font-size:1.4rem; font-weight:800; }
|
||||
.stat-box .stat-label { font-size:.72rem; color:var(--gray-500); }
|
||||
|
||||
/* ── Report Section ─────────────────────────────────────── */
|
||||
.report-container {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--card-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
.report-header {
|
||||
background: var(--gray-800);
|
||||
color: white;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
.report-header h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.report-header p {
|
||||
color: var(--gray-300);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.report-body {
|
||||
padding: 24px 32px;
|
||||
}
|
||||
.report-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.report-section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid var(--primary-bg);
|
||||
}
|
||||
.report-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.report-summary-item {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
.report-summary-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--gray-800);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.report-summary-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--gray-500);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.report-compliance-bar {
|
||||
height: 20px;
|
||||
background: var(--gray-200);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.report-compliance-fill {
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
transition: width 0.5s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.report-container { background:var(--card-bg); border:1px solid var(--gray-200); border-radius:var(--border-radius); overflow:hidden; }
|
||||
.report-header { background:var(--navy-nav,#142B4D); color:#fff; padding:30px; text-align:center; }
|
||||
.report-header h3 { font-size:1.3rem; margin:0 0 4px; }
|
||||
.report-header p { color:#cbd5e1; font-size:.85rem; margin:0; }
|
||||
.report-body { padding:24px 30px; }
|
||||
.report-section { margin-bottom:24px; }
|
||||
.report-section-title { font-size:1rem; font-weight:700; color:var(--gray-800); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--primary-bg); }
|
||||
.report-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
|
||||
.report-summary-item { text-align:center; padding:16px; background:var(--gray-50); border-radius:var(--border-radius); }
|
||||
.report-summary-value { font-size:1.8rem; font-weight:800; color:var(--gray-800); line-height:1.2; }
|
||||
.report-summary-label { font-size:.8rem; color:var(--gray-500); margin-top:4px; }
|
||||
.report-compliance-bar { height:20px; background:var(--gray-200); border-radius:10px; overflow:hidden; margin:12px 0; }
|
||||
.report-compliance-fill { height:100%; border-radius:10px; transition:width .5s ease; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; font-weight:700; }
|
||||
|
||||
/* ── ISO Mapping ────────────────────────────────────────── */
|
||||
.iso-mapping-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--gray-100);
|
||||
}
|
||||
.iso-mapping-row:last-child { border-bottom: none; }
|
||||
.iso-nis2-badge {
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary);
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.iso-arrow {
|
||||
color: var(--gray-300);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.iso-arrow svg { width: 20px; height: 20px; }
|
||||
.iso-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.iso-control-badge {
|
||||
background: var(--secondary-bg);
|
||||
color: var(--secondary);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.iso-title {
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray-500);
|
||||
min-width: 200px;
|
||||
}
|
||||
.iso-mapping-row { display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--gray-100); }
|
||||
.iso-mapping-row:last-child { border-bottom:none; }
|
||||
.iso-nis2-badge { background:var(--primary-bg); color:var(--primary); padding:6px 14px; border-radius:20px; font-size:.82rem; font-weight:700; white-space:nowrap; min-width:90px; text-align:center; }
|
||||
.iso-arrow { color:var(--gray-300); flex-shrink:0; }
|
||||
.iso-arrow svg { width:20px; height:20px; }
|
||||
.iso-controls { display:flex; flex-wrap:wrap; gap:6px; flex-grow:1; }
|
||||
.iso-control-badge { background:var(--secondary-bg); color:var(--secondary); padding:4px 10px; border-radius:20px; font-size:.78rem; font-weight:600; }
|
||||
.iso-title { font-size:.85rem; color:var(--gray-500); min-width:200px; }
|
||||
|
||||
/* ── Pagination ─────────────────────────────────────────── */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding: 12px;
|
||||
}
|
||||
.pagination button {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--gray-200);
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius-sm);
|
||||
color: var(--gray-600);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: var(--primary-bg);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
.pagination button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.pagination .page-info {
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
.pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:20px; padding:12px; }
|
||||
.pagination button { padding:8px 16px; border:1px solid var(--gray-200); background:var(--card-bg); border-radius:var(--border-radius-sm); color:var(--gray-600); cursor:pointer; font:inherit; font-size:.85rem; transition:all var(--transition-fast); }
|
||||
.pagination button:hover:not(:disabled) { background:var(--primary-bg); border-color:var(--primary); color:var(--primary); }
|
||||
.pagination button:disabled { opacity:.4; cursor:not-allowed; }
|
||||
.pagination .page-info { font-size:.85rem; color:var(--gray-500); }
|
||||
|
||||
/* ── Audit Log Action ───────────────────────────────────── */
|
||||
.log-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.log-entity {
|
||||
background: var(--gray-100);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 0.8rem;
|
||||
color: var(--gray-600);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.log-details {
|
||||
max-width: 300px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.8rem;
|
||||
color: var(--gray-400);
|
||||
cursor: help;
|
||||
}
|
||||
/* ── Audit Log ──────────────────────────────────────────── */
|
||||
.log-action { display:inline-flex; align-items:center; gap:4px; font-size:.82rem; }
|
||||
.log-entity { background:var(--gray-100); padding:2px 8px; border-radius:var(--border-radius-sm); font-size:.8rem; color:var(--gray-600); font-family:var(--font-mono); }
|
||||
.log-details { display:inline-block; max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.8rem; color:var(--gray-400); cursor:help; vertical-align:bottom; }
|
||||
|
||||
/* ── Controls Row Clickable ─────────────────────────────── */
|
||||
.data-table tbody tr.clickable-row { cursor: pointer; }
|
||||
|
||||
/* ── Loading/Empty ──────────────────────────────────────── */
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 48px 20px;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
.loading-state .spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--gray-200);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.empty-state-box {
|
||||
text-align: center;
|
||||
padding: 48px 20px;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
.empty-state-box svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.empty-state-box h4 {
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
/* ── Loading / Empty ────────────────────────────────────── */
|
||||
.loading-state { text-align:center; padding:48px 20px; color:var(--gray-400); }
|
||||
.loading-state .spinner { width:32px; height:32px; border:3px solid var(--gray-200); border-top-color:var(--primary); border-radius:50%; animation:rpt-spin .8s linear infinite; margin:0 auto 12px; }
|
||||
@keyframes rpt-spin { to { transform:rotate(360deg); } }
|
||||
.empty-state-box { text-align:center; padding:48px 20px; color:var(--gray-400); }
|
||||
.empty-state-box svg { width:48px; height:48px; margin-bottom:12px; opacity:.5; }
|
||||
.empty-state-box h4 { color:var(--gray-600); margin:0 0 4px; }
|
||||
.empty-state-box p { margin:0; }
|
||||
|
||||
/* ── Print ──────────────────────────────────────────────── */
|
||||
@media print {
|
||||
.sidebar, .content-header, .tab-nav, .btn { display: none !important; }
|
||||
.main-content { margin: 0 !important; padding: 0 !important; }
|
||||
.report-container { box-shadow: none; border: 1px solid #ddd; }
|
||||
body { background: white; }
|
||||
#topnav, .crumb, .page-head .btn-primary, .tab-nav, .btn { display:none !important; }
|
||||
.wrap { max-width:100% !important; padding:0 !important; }
|
||||
.report-container { box-shadow:none; border:1px solid #ddd; }
|
||||
body { background:#fff; }
|
||||
}
|
||||
|
||||
/* ── Responsive ─────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.tab-nav button { padding: 10px 12px; font-size: 0.8rem; }
|
||||
.iso-mapping-row { flex-direction: column; align-items: flex-start; }
|
||||
.iso-title { min-width: auto; }
|
||||
.report-summary-grid { grid-template-columns: 1fr 1fr; }
|
||||
@media (max-width:768px) {
|
||||
.tab-nav button { padding:10px 12px; font-size:.8rem; }
|
||||
.iso-mapping-row { flex-direction:column; align-items:flex-start; }
|
||||
.iso-title { min-width:auto; }
|
||||
.report-summary-grid { grid-template-columns:1fr 1fr; }
|
||||
}
|
||||
</style>
|
||||
<!-- PWA:start -->
|
||||
@@ -358,111 +141,110 @@
|
||||
<!-- PWA:end -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout">
|
||||
<aside class="sidebar" id="sidebar"></aside>
|
||||
<!-- Chrome V3 (appbar + mega-menu) iniettata da topnav-v3.js in questo host -->
|
||||
<div id="topnav"></div>
|
||||
|
||||
<main class="main-content">
|
||||
<header class="content-header">
|
||||
<h1 class="h2" data-i18n="audit.title">Audit & Report</h1>
|
||||
<div class="content-header-actions">
|
||||
<button class="btn btn-primary" onclick="generateReport()">Genera Report</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>Audit e Report</span>
|
||||
</nav>
|
||||
<div class="page-head">
|
||||
<div>
|
||||
<h1 data-i18n="audit.title">Audit & Report</h1>
|
||||
<p class="sub">Report di compliance, controlli, audit log e mapping ISO 27001</p>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="generateReport()"><i data-lucide="file-text" class="ic"></i>Genera Report</button>
|
||||
</div>
|
||||
|
||||
<div class="content-body">
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-nav">
|
||||
<button class="active" onclick="switchTab('report', this)">Report Compliance</button>
|
||||
<button onclick="switchTab('controls', this)">Controlli</button>
|
||||
<button onclick="switchTab('audit', this)">Audit Log</button>
|
||||
<button onclick="switchTab('iso', this)">ISO 27001</button>
|
||||
<button onclick="switchTab('monitoring', this)" data-i18n="audit.monitoring_tab">Monitoraggio Continuo</button>
|
||||
<button onclick="switchTab('acn', this)">Requisiti ACN</button>
|
||||
</div>
|
||||
<section class="card card-pad">
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-nav">
|
||||
<button class="active" onclick="switchTab('report', this)">Report Compliance</button>
|
||||
<button onclick="switchTab('controls', this)">Controlli</button>
|
||||
<button onclick="switchTab('audit', this)">Audit Log</button>
|
||||
<button onclick="switchTab('iso', this)">ISO 27001</button>
|
||||
<button onclick="switchTab('monitoring', this)" data-i18n="audit.monitoring_tab">Monitoraggio Continuo</button>
|
||||
<button onclick="switchTab('acn', this)">Requisiti ACN</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Report Compliance -->
|
||||
<div class="tab-panel active" id="tab-report">
|
||||
<div id="report-container">
|
||||
<div class="empty-state-box">
|
||||
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/></svg>
|
||||
<h4>Nessun report generato</h4>
|
||||
<p>Clicca "Genera Report" per creare un report di compliance aggiornato.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Controlli -->
|
||||
<div class="tab-panel" id="tab-controls">
|
||||
<div id="controls-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento controlli...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Audit Log -->
|
||||
<div class="tab-panel" id="tab-audit">
|
||||
<div id="audit-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento log...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: ISO 27001 -->
|
||||
<div class="tab-panel" id="tab-iso">
|
||||
<div id="iso-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento mapping...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Continuous Control Monitoring -->
|
||||
<div class="tab-panel" id="tab-monitoring">
|
||||
<div id="monitoring-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento monitoraggio...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-acn">
|
||||
<div id="acn-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento requisiti ACN...</p>
|
||||
</div>
|
||||
<!-- Tab: Report Compliance -->
|
||||
<div class="tab-panel active" id="tab-report">
|
||||
<div id="report-container">
|
||||
<div class="empty-state-box">
|
||||
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/></svg>
|
||||
<h4>Nessun report generato</h4>
|
||||
<p>Clicca "Genera Report" per creare un report di compliance aggiornato.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Controlli -->
|
||||
<div class="tab-panel" id="tab-controls">
|
||||
<div id="controls-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento controlli...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Audit Log -->
|
||||
<div class="tab-panel" id="tab-audit">
|
||||
<div id="audit-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento log...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: ISO 27001 -->
|
||||
<div class="tab-panel" id="tab-iso">
|
||||
<div id="iso-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento mapping...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Continuous Control Monitoring -->
|
||||
<div class="tab-panel" id="tab-monitoring">
|
||||
<div id="monitoring-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento monitoraggio...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel" id="tab-acn">
|
||||
<div id="acn-container">
|
||||
<div class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Caricamento requisiti ACN...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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/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() (definito in topnav-v3.js)
|
||||
if (typeof I18n !== 'undefined') I18n.init();
|
||||
if (typeof HelpSystem !== 'undefined') HelpSystem.init();
|
||||
if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} }
|
||||
|
||||
// ── Labels ──────────────────────────────────────────────
|
||||
const controlStatusLabels = {
|
||||
@@ -1017,14 +799,11 @@
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Mapping NIS2 - ISO 27001:2022</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p style="font-size:0.85rem; color:var(--gray-500); margin-bottom:20px;">
|
||||
Corrispondenza tra gli articoli della Direttiva NIS2 e i controlli dello standard ISO/IEC 27001:2022.
|
||||
</p>`;
|
||||
<div>
|
||||
<h3 style="margin:0 0 4px;font-size:1.05rem;">Mapping NIS2 - ISO 27001:2022</h3>
|
||||
<p style="font-size:0.85rem; color:var(--gray-500); margin-bottom:20px;">
|
||||
Corrispondenza tra gli articoli della Direttiva NIS2 e i controlli dello standard ISO/IEC 27001:2022.
|
||||
</p>`;
|
||||
|
||||
mapping.forEach(m => {
|
||||
const isoControls = (m.iso27001 || '').split(',').map(c => c.trim()).filter(c => c);
|
||||
@@ -1041,7 +820,7 @@
|
||||
</div>`;
|
||||
});
|
||||
|
||||
html += '</div></div>';
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user