DevEnv nis2-agileandClaude Opus 4.8
a8516efafc
- Punto 1: la tabella 'Rischi dai requisiti del framework di sicurezza' e ora un riquadro a scorrimento verticale (max-height 60vh, header sticky) invece di allungare la pagina. - Punto 2: elenca SOLO i requisiti applicabili alla classe del soggetto (importante -> Allegato 1, essenziale -> Allegato 2, Det. ACN 164179/2025); le righe non pertinenti non sono piu mostrate (prima solo attenuate). - help.js allineato + cache-buster help.js?v=20260729b su 35 pagine; version.json 1.25.10. - Punto 3 (rimozione sezione all-hazard) NON applicato: contraddice la decisione documentata nel #500 (copertura multirischio art.24 D.Lgs.138/2024) -> escalato. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
165 lines
11 KiB
HTML
165 lines
11 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>
|
|
<!-- UI V3: Inter self-host + design system v3.css. No external CDN, no Bootstrap Italia. -->
|
|
<link rel="stylesheet" href="/vendor/inter/inter.css?v=20260627">
|
|
<link rel="stylesheet" href="/css/v3.css?v=20260627">
|
|
<style>
|
|
/* V3+ page-specific (componenti non coperti da v3.css): tab interni, matrice RACI, link m2m. Token V3. */
|
|
.raci-intro { background:#EFF4FB; border-left:4px solid var(--c-blue); padding:14px 18px; border-radius:10px; margin-bottom:14px; font-size:13.5px; line-height:1.6; color:var(--ink); }
|
|
.raci-note { font-size:12.5px; color:#9A6418; background:#FBF1E2; border:1px solid #f3d9a8; border-radius:10px; 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:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font:inherit; font-size:13px; font-weight:600; text-align:center; color:var(--ink); }
|
|
.cmp-tab.active { border-color:var(--c-blue); background:#EFF4FB; color:var(--c-blue); }
|
|
.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(--line); border-radius:8px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink); }
|
|
.cmp-empty { text-align:center; padding:34px 16px; color:var(--muted); }
|
|
.gap-role-sub { font-size:12px; color:var(--muted); }
|
|
/* Matrice RACI */
|
|
.raci-matrix-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:11px; }
|
|
.raci-matrix { border-collapse:collapse; font-size:13px; min-width:100%; }
|
|
.raci-matrix th, .raci-matrix td { padding:9px 11px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:center; vertical-align:middle; }
|
|
.raci-matrix thead th { background:#FAFCFE; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; 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(--ink); 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:#FAFCFE; text-align:left; }
|
|
.raci-objhead { font-weight:600; min-width:130px; }
|
|
.raci-objhead .raci-objtype { display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9aa8ba; }
|
|
.raci-cell-sel { width:100%; padding:6px 7px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px; background:#fff; color:var(--ink); cursor:pointer; }
|
|
.raci-cell-sel.has-r { background:#E6F4EC; border-color:#86efac; color:#166534; font-weight:700; }
|
|
.raci-cell-sel.has-a { background:#FBE9E9; 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:12px; margin:14px 2px 0; color:var(--muted); }
|
|
.raci-legend span b { display:inline-block; width:18px; text-align:center; border-radius:4px; margin-right:4px; }
|
|
.raci-legend .l-r b { background:#E6F4EC; color:#166534; }
|
|
.raci-legend .l-a b { background:#FBE9E9; 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:#FAFCFE; border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:14px; }
|
|
.raci-inline .fld { display:flex; flex-direction:column; gap:3px; }
|
|
.raci-inline .fld label { font-size:11px; font-weight:700; color:var(--muted); }
|
|
.raci-inline select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink); min-width:200px; }
|
|
.raci-linklist { width:100%; border-collapse:collapse; font-size:13.5px; }
|
|
.raci-linklist th, .raci-linklist td { text-align:left; padding:10px 11px; border-bottom:1px solid var(--line); }
|
|
.raci-linklist th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
|
|
.raci-arrow { color:#9aa8ba; padding:0 6px; }
|
|
.savehint { font-size:12px; color:var(--muted); }
|
|
</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 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>Struttura interna</span>
|
|
<i data-lucide="chevron-right" class="ic"></i><span data-i18n="raci.title">Matrice RACI</span>
|
|
</nav>
|
|
<div class="page-head">
|
|
<div>
|
|
<h1 data-i18n="raci.title">Matrice RACI</h1>
|
|
<p class="sub">Responsabilità R/A/C/I dei ruoli e collegamenti tra oggetti</p>
|
|
</div>
|
|
<span class="savehint" id="raci-hint" role="status" aria-live="polite"></span>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<section class="card card-pad">
|
|
<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-primary" onclick="raciAddLink()">Aggiungi collegamento</button>
|
|
</div>
|
|
<div id="raci-links"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts V3. raci.js si auto-inizializza su DOMContentLoaded (checkAuth/loadSidebar/I18n/Help). -->
|
|
<script src="/js/api.js?v=20260729"></script>
|
|
<script src="/js/common.js?v=20260627t"></script>
|
|
<script src="/vendor/lucide/lucide.min.js"></script>
|
|
<script src="/js/topnav-v3.js?v=20260729"></script>
|
|
<script src="/js/i18n.js?v=20260729"></script>
|
|
<script src="/js/help.js?v=20260729b"></script>
|
|
<script src="/js/raci.js?v=20260627"></script>
|
|
<script>
|
|
function v3Icons() { if (window.lucide && lucide.createIcons) { try { lucide.createIcons(); } catch (e) {} } }
|
|
v3Icons();
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
v3Icons();
|
|
var root = document.querySelector('main.wrap');
|
|
if (root && window.MutationObserver) {
|
|
var mo = new MutationObserver(function () { v3Icons(); });
|
|
mo.observe(root, { childList: true, subtree: true });
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|