DevEnv nis2-agileandClaude Opus 4.8
92d101b6f4
UI data-driven sulle tabelle di config cfg_nis2_* (mig.046): - FrameworkController::catalog (GET /api/framework/catalog): 43 misure / 116 requisiti, procedura+rischio di default per requisito, flag importanti/essenziali, classe org. - public/misure-requisiti.html (Bootstrap Italia/AGID): vista per misura / per area politica, selettore soggetto (auto/importante/essenziale/tutti), righe che si 'spengono' per classe, ricerca, sola lettura (codifica non modificabile). Voce sidebar in sezione Compliance. - api.js frameworkCatalog(); routing index.php; i18n nav.framework IT/EN. - help.js: guida 'misure-requisiti' (struttura, importanti/essenziali, riferimenti art.23/24 D.Lgs.). - KB AI: doc SYSTEM ingestato (uuid 7871c1ea). - Cache-buster ?v=20260621 (35 pagine), version 1.18.0, SW cache nis2-shell-v1.18.0. - docs/simon/: file sorgente autoritativi (provenienza seed, codifica Simon non variata). Smoke prod: /framework/catalog 200 (43/116, 6 misure solo-essenziali, GV.OC-04->Proc.01/Risk.01), pagina 200, USR2 applicato. Additivo, nessuna modifica a dati esistenti. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
143 lines
9.9 KiB
HTML
143 lines
9.9 KiB
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>Matrice RACI - NIS2 Agile</title>
|
|
<link rel="stylesheet" href="/vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
|
|
<link rel="stylesheet" href="/css/style.css?v=20260617">
|
|
<style>
|
|
.raci-intro { background:#eff6ff; border-left:4px solid var(--primary,#2563eb); padding:14px 18px; border-radius:8px; margin-bottom:16px; font-size:.92rem; line-height:1.6; }
|
|
.raci-note { font-size:.82rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 12px; margin:0 0 18px; }
|
|
.cmp-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
|
|
.cmp-tab { flex:1 1 200px; min-width:160px; padding:10px 12px; border:1.5px solid var(--gray-200,#e5e7eb); border-radius:10px; background:#fff; cursor:pointer; font-size:.85rem; font-weight:600; text-align:center; }
|
|
.cmp-tab.active { border-color:var(--primary,#2563eb); background:#eff6ff; color:var(--primary,#2563eb); }
|
|
.cmp-panel { display:none; }
|
|
.cmp-panel.active { display:block; }
|
|
.cmp-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
|
|
.cmp-toolbar select { padding:8px 10px; border:1px solid var(--gray-200,#e5e7eb); border-radius:8px; font-size:.88rem; }
|
|
.cmp-empty { text-align:center; padding:34px 16px; color:var(--gray-500,#6b7280); }
|
|
.gap-role-sub { font-size:.82rem; color:var(--gray-500,#6b7280); }
|
|
/* Matrice RACI */
|
|
.raci-matrix-wrap { overflow-x:auto; border:1px solid var(--gray-200,#e5e7eb); border-radius:10px; }
|
|
.raci-matrix { border-collapse:collapse; font-size:.84rem; min-width:100%; }
|
|
.raci-matrix th, .raci-matrix td { padding:8px 10px; border-bottom:1px solid var(--gray-100,#f3f4f6); border-right:1px solid var(--gray-100,#f3f4f6); text-align:center; vertical-align:middle; }
|
|
.raci-matrix thead th { background:var(--gray-50,#f9fafb); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500,#6b7280); position:sticky; top:0; }
|
|
.raci-matrix thead th.raci-grp { text-align:left; }
|
|
.raci-matrix th.raci-rolehead { text-align:left; font-weight:700; color:var(--gray-700,#374151); background:#fff; position:sticky; left:0; z-index:2; min-width:180px; }
|
|
.raci-matrix thead th.raci-corner { position:sticky; left:0; z-index:3; background:var(--gray-50,#f9fafb); text-align:left; }
|
|
.raci-objhead { font-weight:600; min-width:130px; }
|
|
.raci-objhead .raci-objtype { display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-400,#9ca3af); }
|
|
.raci-cell-sel { width:100%; padding:5px 6px; border:1px solid var(--gray-200,#e5e7eb); border-radius:6px; font-size:.82rem; background:#fff; cursor:pointer; }
|
|
.raci-cell-sel.has-r { background:#dcfce7; border-color:#86efac; color:#166534; font-weight:700; }
|
|
.raci-cell-sel.has-a { background:#fee2e2; border-color:#fca5a5; color:#991b1b; font-weight:700; }
|
|
.raci-cell-sel.has-c { background:#fef9c3; border-color:#fde047; color:#854d0e; font-weight:700; }
|
|
.raci-cell-sel.has-i { background:#e0f2fe; border-color:#7dd3fc; color:#075985; font-weight:700; }
|
|
.raci-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; margin:12px 2px 0; color:var(--gray-600,#4b5563); }
|
|
.raci-legend span b { display:inline-block; width:18px; text-align:center; border-radius:4px; margin-right:4px; }
|
|
.raci-legend .l-r b { background:#dcfce7; color:#166534; }
|
|
.raci-legend .l-a b { background:#fee2e2; color:#991b1b; }
|
|
.raci-legend .l-c b { background:#fef9c3; color:#854d0e; }
|
|
.raci-legend .l-i b { background:#e0f2fe; color:#075985; }
|
|
/* Link m2m */
|
|
.raci-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; background:#f9fafb; border:1px solid var(--gray-100,#f3f4f6); border-radius:10px; padding:12px; margin-bottom:14px; }
|
|
.raci-inline .fld { display:flex; flex-direction:column; gap:3px; }
|
|
.raci-inline .fld label { font-size:.72rem; font-weight:600; color:var(--gray-500,#6b7280); }
|
|
.raci-inline select { padding:8px 10px; border:1px solid var(--gray-200,#e5e7eb); border-radius:8px; font-size:.88rem; min-width:200px; }
|
|
.raci-linklist { width:100%; border-collapse:collapse; font-size:.88rem; }
|
|
.raci-linklist th, .raci-linklist td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--gray-100,#f3f4f6); }
|
|
.raci-linklist th { font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500,#6b7280); }
|
|
.raci-linklist .btn { padding:4px 9px; font-size:.76rem; }
|
|
.raci-arrow { color:var(--gray-400,#9ca3af); padding:0 6px; }
|
|
</style>
|
|
<!-- 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>
|
|
<div class="app-layout">
|
|
<aside class="sidebar" id="sidebar"></aside>
|
|
<main class="main-content">
|
|
<header class="content-header">
|
|
<h2 data-i18n="raci.title">Matrice RACI</h2>
|
|
<div class="content-header-actions">
|
|
<span class="savehint" id="raci-hint" role="status" aria-live="polite"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-body">
|
|
<div class="raci-intro">
|
|
<strong>Matrice RACI & collegamenti.</strong>
|
|
Collega i ruoli dell'organigramma agli oggetti del sistema (inventario, procedure, rischi, fornitori) assegnando le responsabilità <strong>R</strong>esponsible / <strong>A</strong>ccountable / <strong>C</strong>onsulted / <strong>I</strong>nformed. Gestisci inoltre i collegamenti molti-a-molti fra procedure, inventario, rischi e misure.
|
|
</div>
|
|
<div class="raci-note">
|
|
Ancoraggio: <strong>GV.RR-02</strong> (ruoli, responsabilità e poteri stabiliti e comunicati), <strong>ID.AM</strong> (inventario), <strong>GV.PO</strong> (procedure), <strong>art. 24 D.Lgs. 138/2024</strong> e <strong>ID.RA</strong> (rischi). Strumento di supporto, non un parere legale.
|
|
</div>
|
|
|
|
<div class="cmp-tabs" id="raci-tabs">
|
|
<div class="cmp-tab active" data-tab="matrix" onclick="raciTab('matrix')">Matrice RACI</div>
|
|
<div class="cmp-tab" data-tab="links" onclick="raciTab('links')">Collegamenti (link m2m)</div>
|
|
</div>
|
|
|
|
<!-- TAB 1 — Matrice RACI -->
|
|
<div class="cmp-panel active" id="panel-matrix">
|
|
<div class="cmp-toolbar">
|
|
<span class="gap-role-sub" id="raci-matrix-summary"></span>
|
|
</div>
|
|
<div id="raci-matrix"></div>
|
|
<div class="raci-legend">
|
|
<span class="l-r"><b>R</b> Responsible (esegue)</span>
|
|
<span class="l-a"><b>A</b> Accountable (risponde del risultato)</span>
|
|
<span class="l-c"><b>C</b> Consulted (consultato)</span>
|
|
<span class="l-i"><b>I</b> Informed (informato)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB 2 — Collegamenti (link m2m) -->
|
|
<div class="cmp-panel" id="panel-links">
|
|
<div class="raci-inline">
|
|
<div class="fld">
|
|
<label for="raci-linktype">Tipo di collegamento</label>
|
|
<select id="raci-linktype" onchange="raciLinkTypeChanged()">
|
|
<option value="procedure_inventory">Procedura ↔ Inventario</option>
|
|
<option value="procedure_risk">Procedura ↔ Rischio</option>
|
|
<option value="inventory_risk">Inventario ↔ Rischio</option>
|
|
<option value="risk_measure">Rischio ↔ Misura</option>
|
|
</select>
|
|
</div>
|
|
<div class="fld">
|
|
<label id="raci-alabel" for="raci-aside">Lato A</label>
|
|
<select id="raci-aside" onchange="raciLoadLinks()"></select>
|
|
</div>
|
|
<div class="fld">
|
|
<label id="raci-blabel" for="raci-bside">Lato B</label>
|
|
<select id="raci-bside"></select>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" onclick="raciAddLink()">Aggiungi collegamento</button>
|
|
</div>
|
|
<div id="raci-links"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/js/api.js?v=20260621"></script>
|
|
<script src="/js/common.js?v=20260621"></script>
|
|
<script src="/vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
|
|
<script src="/js/common-bi.js?v=20260618"></script>
|
|
<script src="/js/i18n.js?v=20260621"></script>
|
|
<script src="/js/help.js?v=20260621"></script>
|
|
<script src="/js/raci.js?v=20260619"></script>
|
|
</body>
|
|
</html>
|