DevEnv nis2-agileandClaude Opus 4.8
cf224480cc
Evita la "sessione scaduta" e i deploy che restano invisibili all'utente. - api.js: refresh PROATTIVO dell'access token ~2 min prima della scadenza (scheduleTokenRefresh su exp del JWT, riprogrammato ad ogni setTokens) + ensureFreshToken() per rinnovo immediato al ritorno sulla scheda. Con refresh a 7gg l'utente resta loggato senza mai vedere il login. - common.js: watch versione (poll version.json ogni 5 min + su visibilitychange) → banner "È disponibile una nuova versione — Aggiorna" (reload) quando cambia; nudge service worker (registration.update); su visibilitychange chiama anche api.ensureFreshToken(). Nessun hard-refresh manuale. - Cache-buster api/common ?v=20260729b. version 1.25.12. Solo frontend. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
216 lines
15 KiB
HTML
216 lines
15 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>Competenze · 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, tabella, gap card, modali. Token V3. */
|
|
.cmp-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); }
|
|
.cmp-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 160px; min-width:140px; 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-table { width:100%; border-collapse:collapse; font-size:13.5px; }
|
|
.cmp-table th, .cmp-table td { text-align:left; padding:10px 11px; border-bottom:1px solid var(--line); vertical-align:top; }
|
|
.cmp-table th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
|
|
.cmp-badge { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; }
|
|
.cmp-badge.global { background:#EFE7FB; color:#5b21b6; }
|
|
.cmp-badge.area { background:#EEF2F7; color:#5b6b80; }
|
|
.cmp-badge.lvl { background:#E7F0FB; color:#1F5FA8; }
|
|
.cmp-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
|
|
.cmp-toolbar select, .cmp-inline select, .cmp-inline input { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink); }
|
|
.cmp-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; }
|
|
.cmp-inline .fld { display:flex; flex-direction:column; gap:3px; }
|
|
.cmp-inline .fld label { font-size:11px; font-weight:700; color:var(--muted); }
|
|
.cmp-actions-cell { display:flex; gap:6px; flex-wrap:wrap; }
|
|
/* Gap cards */
|
|
.gap-role { border:1px solid var(--line); border-radius:11px; margin-bottom:14px; overflow:hidden; }
|
|
.gap-role-head { background:#FAFCFE; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
|
|
.gap-role-title { font-weight:700; }
|
|
.gap-role-sub { font-size:12px; color:var(--muted); }
|
|
.gap-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:11px 14px; border-top:1px solid var(--line); }
|
|
.gap-row .skill { flex:1 1 220px; font-weight:600; font-size:13.5px; }
|
|
.gap-meter { font-size:12.5px; color:var(--muted); }
|
|
.gap-pill { display:inline-block; font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:20px; }
|
|
.gap-pill.ok { background:#E6F4EC; color:#1E7A4E; }
|
|
.gap-pill.bad { background:#FBE9E9; color:#B23636; }
|
|
.gap-row .ctas { display:flex; gap:6px; flex-wrap:wrap; }
|
|
.cmp-empty { text-align:center; padding:34px 16px; color:var(--muted); }
|
|
/* Modale */
|
|
.cm-overlay { display:none; position:fixed; inset:0; background:rgba(15,38,60,.5); z-index:1050; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px; }
|
|
.cm-overlay.open { display:flex; }
|
|
.cm-dialog { background:#fff; border-radius:14px; width:100%; max-width:560px; box-shadow:0 20px 50px rgba(11,40,80,.25); }
|
|
.cm-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
|
|
.cm-head h3 { margin:0; font-size:17px; font-weight:800; }
|
|
.cm-body { padding:18px 20px; }
|
|
.cm-foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
|
|
.cm-field { margin-bottom:14px; }
|
|
.cm-field label { display:block; font-weight:600; font-size:12.5px; margin-bottom:5px; }
|
|
.cm-field input[type=text], .cm-field select, .cm-field textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink); }
|
|
.cm-field textarea { min-height:64px; resize:vertical; }
|
|
.cm-err { color:var(--c-red); font-size:12.5px; min-height:18px; }
|
|
.cm-close { background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#9aa8ba; }
|
|
.cm-maplist { margin-top:10px; }
|
|
.cm-maprow { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
|
|
.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="comp.title">Competenze</span>
|
|
</nav>
|
|
<div class="page-head">
|
|
<div>
|
|
<h1 data-i18n="comp.title">Competenze</h1>
|
|
<p class="sub">Skill matrix, requisiti per ruolo e copertura dei gap</p>
|
|
</div>
|
|
<span class="savehint" id="cmp-hint" role="status" aria-live="polite"></span>
|
|
</div>
|
|
|
|
<div class="stack">
|
|
<section class="card card-pad">
|
|
<div class="cmp-intro">
|
|
<strong>Competenze, requisiti e gap.</strong>
|
|
Definisci le competenze necessarie, assegnale ai ruoli dell'organigramma, registra quelle possedute dalle persone e individua i divari (gap) da colmare con formazione o azioni correttive.
|
|
</div>
|
|
<div class="cmp-note">
|
|
Ancoraggio: <strong>PR.AT-01</strong> (formazione/consapevolezza per tutti), <strong>PR.AT-02</strong> (solo soggetti essenziali), <strong>GV.RR-04</strong> (cybersicurezza nelle pratiche HR). Gli obblighi di gestione del rischio fanno capo all'<strong>art. 24 D.Lgs. 138/2024</strong>. Strumento di supporto, non un parere legale.
|
|
</div>
|
|
|
|
<div class="cmp-tabs" id="cmp-tabs">
|
|
<div class="cmp-tab active" data-tab="catalog" onclick="cmpTab('catalog')">Catalogo competenze</div>
|
|
<div class="cmp-tab" data-tab="roles" onclick="cmpTab('roles')">Requisiti per ruolo</div>
|
|
<div class="cmp-tab" data-tab="users" onclick="cmpTab('users')">Competenze persone</div>
|
|
<div class="cmp-tab" data-tab="gap" onclick="cmpTab('gap')">Gap & azioni</div>
|
|
</div>
|
|
|
|
<!-- TAB 1 — Catalogo competenze -->
|
|
<div class="cmp-panel active" id="panel-catalog">
|
|
<div class="cmp-toolbar">
|
|
<button class="btn-primary" onclick="cmpOpenSkill()"><i data-lucide="plus" class="ic"></i>Nuova competenza</button>
|
|
<span class="gap-role-sub" id="cmp-catalog-count"></span>
|
|
</div>
|
|
<div id="cmp-catalog"></div>
|
|
</div>
|
|
|
|
<!-- TAB 2 — Requisiti per ruolo -->
|
|
<div class="cmp-panel" id="panel-roles">
|
|
<div class="cmp-toolbar">
|
|
<label for="cmp-role-sel" style="font-weight:600;font-size:13px;">Ruolo:</label>
|
|
<select id="cmp-role-sel" onchange="cmpLoadRoleSkills()"></select>
|
|
</div>
|
|
<div class="cmp-inline" id="cmp-role-add" style="display:none;">
|
|
<div class="fld"><label>Competenza</label><select id="cmp-rs-skill"></select></div>
|
|
<div class="fld"><label>Livello richiesto</label><select id="cmp-rs-level"></select></div>
|
|
<button class="btn-primary" onclick="cmpAddRoleSkill()">Aggiungi requisito</button>
|
|
</div>
|
|
<div id="cmp-role-skills"></div>
|
|
</div>
|
|
|
|
<!-- TAB 3 — Competenze persone -->
|
|
<div class="cmp-panel" id="panel-users">
|
|
<div class="cmp-toolbar">
|
|
<label for="cmp-user-sel" style="font-weight:600;font-size:13px;">Persona:</label>
|
|
<select id="cmp-user-sel" onchange="cmpLoadUserSkills()"></select>
|
|
</div>
|
|
<div class="cmp-inline" id="cmp-user-add" style="display:none;">
|
|
<div class="fld"><label>Competenza</label><select id="cmp-us-skill"></select></div>
|
|
<div class="fld"><label>Livello posseduto</label><select id="cmp-us-level"></select></div>
|
|
<div class="fld"><label>Corso (opz.)</label><select id="cmp-us-course"></select></div>
|
|
<div class="fld"><label>Evidenza (opz.)</label><input type="text" id="cmp-us-evidence" maxlength="500" placeholder="es. attestato, data"></div>
|
|
<button class="btn-primary" onclick="cmpAddUserSkill()">Registra</button>
|
|
</div>
|
|
<div id="cmp-user-skills"></div>
|
|
</div>
|
|
|
|
<!-- TAB 4 — Gap & azioni -->
|
|
<div class="cmp-panel" id="panel-gap">
|
|
<div class="cmp-toolbar">
|
|
<button class="btn-ghost" onclick="cmpLoadGap()"><i data-lucide="refresh-cw" class="ic"></i>Ricalcola gap</button>
|
|
<span class="gap-role-sub" id="cmp-gap-summary"></span>
|
|
</div>
|
|
<div id="cmp-gap"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modale competenza (crea/modifica) -->
|
|
<div class="cm-overlay" id="cmp-skill-modal" role="dialog" aria-modal="true" aria-labelledby="cmp-skill-title">
|
|
<div class="cm-dialog">
|
|
<div class="cm-head"><h3 id="cmp-skill-title">Nuova competenza</h3><button class="cm-close" type="button" onclick="cmpClose('cmp-skill-modal')" aria-label="Chiudi">×</button></div>
|
|
<div class="cm-body">
|
|
<input type="hidden" id="cmp-skill-id">
|
|
<div class="cm-field"><label for="cmp-skill-name">Nome *</label><input type="text" id="cmp-skill-name" maxlength="150" placeholder="es. Gestione incidenti di sicurezza"></div>
|
|
<div class="cm-field"><label for="cmp-skill-area">Area</label><input type="text" id="cmp-skill-area" maxlength="100" placeholder="es. Tecnica, Governance, Legale, Awareness"></div>
|
|
<div class="cm-field"><label for="cmp-skill-desc">Descrizione</label><textarea id="cmp-skill-desc" maxlength="2000"></textarea></div>
|
|
<div class="cm-err" id="cmp-skill-err" role="alert"></div>
|
|
</div>
|
|
<div class="cm-foot"><button class="btn-ghost" type="button" onclick="cmpClose('cmp-skill-modal')">Annulla</button><button class="btn-primary" type="button" id="cmp-skill-save" onclick="cmpSaveSkill()">Salva</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modale mappatura corsi -->
|
|
<div class="cm-overlay" id="cmp-courses-modal" role="dialog" aria-modal="true" aria-labelledby="cmp-courses-title">
|
|
<div class="cm-dialog">
|
|
<div class="cm-head"><h3 id="cmp-courses-title">Corsi che erogano la competenza</h3><button class="cm-close" type="button" onclick="cmpClose('cmp-courses-modal')" aria-label="Chiudi">×</button></div>
|
|
<div class="cm-body">
|
|
<input type="hidden" id="cmp-courses-skill-id">
|
|
<div class="cm-field" style="display:flex;gap:8px;align-items:flex-end;">
|
|
<div style="flex:1;"><label for="cmp-courses-sel">Aggiungi corso</label><select id="cmp-courses-sel"></select></div>
|
|
<button class="btn-primary" type="button" onclick="cmpMapCourse()">Aggiungi</button>
|
|
</div>
|
|
<div class="cm-maplist" id="cmp-courses-list"></div>
|
|
<div class="cm-err" id="cmp-courses-err" role="alert"></div>
|
|
</div>
|
|
<div class="cm-foot"><button class="btn-ghost" type="button" onclick="cmpClose('cmp-courses-modal')">Chiudi</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts V3. competenze.js si auto-inizializza su DOMContentLoaded (checkAuth/loadSidebar/I18n/Help). -->
|
|
<script src="/js/api.js?v=20260729b"></script>
|
|
<script src="/js/common.js?v=20260729b"></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/competenze.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>
|