DevEnv nis2-agileandClaude Opus 4.8
36513fa722
- manifest.webmanifest + service worker (offline shell, /api network-only, asset stale-while-revalidate) - set icone (192/512 + maskable + apple-touch + favicon), generate zero-deps (pure Node+zlib) - tag PWA + viewport viewport-fit=cover (zoom mantenuto, WCAG 1.4.4) in 77 pagine HTML - AGID/WCAG 2.1 AA: touch target >=44px, orientamento/zoom liberi, safe-area standalone - generatori riproducibili: scripts/gen-pwa-icons.mjs + scripts/inject-pwa-head.mjs - bump version 1.14.1 -> 1.15.0 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
329 lines
14 KiB
HTML
329 lines
14 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>Gestione Organizzazioni (BI) - 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 (tabella org/paginazione/badge) -> parita' funzionale assoluta. BI veste la chrome.
|
|
Path relativi ../ perche' la pagina vive sotto public/admin/. -->
|
|
<link rel="stylesheet" href="../vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
|
|
<link rel="stylesheet" href="../css/style.css?v=20260613b">
|
|
<style>
|
|
.entity-type-badge {
|
|
display: inline-flex;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.entity-type-badge.essential { background: var(--danger-bg); color: var(--danger); }
|
|
.entity-type-badge.important { background: var(--warning-bg); color: #a16207; }
|
|
.entity-type-badge.not_applicable { background: var(--gray-100); color: var(--gray-600); }
|
|
.plan-badge {
|
|
display: inline-flex;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.plan-badge.free { background: var(--gray-100); color: var(--gray-600); }
|
|
.plan-badge.professional { background: var(--primary-bg); color: var(--primary); }
|
|
.plan-badge.enterprise { background: #f3e8ff; color: #7c3aed; }
|
|
.status-dot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8125rem;
|
|
}
|
|
.status-dot::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.status-dot.active::before { background: var(--secondary); }
|
|
.status-dot.inactive::before { background: var(--gray-400); }
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--gray-100);
|
|
background: var(--gray-50);
|
|
}
|
|
.pagination-info {
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-500);
|
|
}
|
|
.pagination-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.score-inline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
}
|
|
.score-inline .score-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.admin-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-500);
|
|
margin-bottom: 20px;
|
|
}
|
|
.admin-breadcrumb a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
.admin-breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.admin-breadcrumb .icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--gray-400);
|
|
fill: currentColor;
|
|
}
|
|
</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">
|
|
<h1 class="h2">Gestione Organizzazioni</h1>
|
|
<div class="content-header-actions">
|
|
<span class="badge badge-danger">Super Admin</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-body">
|
|
<!-- Breadcrumb -->
|
|
<nav class="admin-breadcrumb" aria-label="Percorso di navigazione">
|
|
<a href="../admin/index.html">Amministrazione</a>
|
|
<svg class="icon icon-sm" aria-hidden="true"><use href="../vendor/bootstrap-italia/dist/svg/sprites.svg#it-chevron-right"></use></svg>
|
|
<span aria-current="page">Organizzazioni</span>
|
|
</nav>
|
|
|
|
<!-- Table -->
|
|
<div class="card">
|
|
<div class="card-body" style="padding:0;">
|
|
<div id="orgs-container">
|
|
<div class="spinner" style="margin:60px auto;" role="status" aria-label="Caricamento in corso"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="../js/api.js?v=20260613"></script>
|
|
<script src="../js/common.js?v=20260613d"></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=20260613"></script>
|
|
<script src="../js/i18n.js?v=20260613"></script>
|
|
<script>
|
|
// ── Auth check ───────────────────────────────────────────
|
|
if (!checkAuth()) throw new Error('Not authenticated');
|
|
loadSidebar();
|
|
I18n.init();
|
|
|
|
let currentPage = 1;
|
|
|
|
// ── Admin check ──────────────────────────────────────────
|
|
(async function checkAdmin() {
|
|
try {
|
|
const me = await api.getMe();
|
|
if (!me.success || !me.data || me.data.role !== 'super_admin') {
|
|
showNotification('Accesso non autorizzato.', 'error');
|
|
setTimeout(() => { window.location.href = '/dashboard.html'; }, 1500);
|
|
return;
|
|
}
|
|
loadOrganizations(1);
|
|
} catch (e) {
|
|
window.location.href = '/dashboard.html';
|
|
}
|
|
})();
|
|
|
|
// ── Mappature ────────────────────────────────────────────
|
|
const sectorLabels = {
|
|
energy: 'Energia', transport: 'Trasporti', banking: 'Banche',
|
|
health: 'Sanita\'', water: 'Acqua', digital_infra: 'Infrastrutture Digitali',
|
|
public_admin: 'Pubblica Amministrazione', manufacturing: 'Manifatturiero',
|
|
postal: 'Servizi Postali', chemical: 'Chimico', food: 'Alimentare',
|
|
waste: 'Rifiuti', ict_services: 'Servizi ICT',
|
|
digital_providers: 'Provider Digitali', space: 'Spazio',
|
|
research: 'Ricerca', other: 'Altro'
|
|
};
|
|
|
|
const entityTypeLabels = {
|
|
essential: 'Essenziale',
|
|
important: 'Importante',
|
|
not_applicable: 'N/A'
|
|
};
|
|
|
|
const planLabels = { free: 'Free', professional: 'Professional', enterprise: 'Enterprise' };
|
|
|
|
// ── Caricamento ──────────────────────────────────────────
|
|
async function loadOrganizations(page) {
|
|
const container = document.getElementById('orgs-container');
|
|
container.innerHTML = '<div class="spinner" style="margin:60px auto;" role="status" aria-label="Caricamento in corso"></div>';
|
|
currentPage = page;
|
|
|
|
try {
|
|
const result = await api.request('GET', '/admin/organizations?page=' + page);
|
|
if (result.success) {
|
|
renderOrganizations(result.data || [], result.pagination || {});
|
|
} else {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h4>Errore nel caricamento</h4>
|
|
<p>${escapeHtml(result.message || 'Errore sconosciuto')}</p>
|
|
</div>`;
|
|
}
|
|
} catch (e) {
|
|
container.innerHTML = '<div class="empty-state"><h4>Errore di connessione</h4></div>';
|
|
}
|
|
}
|
|
|
|
function renderOrganizations(orgs, pagination) {
|
|
const container = document.getElementById('orgs-container');
|
|
|
|
if (!orgs || orgs.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<svg class="icon" aria-hidden="true" style="width:48px;height:48px;fill:var(--gray-300);"><use href="../vendor/bootstrap-italia/dist/svg/sprites.svg#it-pa"></use></svg>
|
|
<h4>Nessuna organizzazione trovata</h4>
|
|
<p>Le organizzazioni registrate appariranno qui.</p>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Nome</th>
|
|
<th scope="col">Settore</th>
|
|
<th scope="col">Tipo Entita'</th>
|
|
<th scope="col">Membri</th>
|
|
<th scope="col">Ultimo Score</th>
|
|
<th scope="col">Piano</th>
|
|
<th scope="col">Stato</th>
|
|
<th scope="col">Data Creazione</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>`;
|
|
|
|
orgs.forEach(org => {
|
|
const entityType = org.entity_type || 'not_applicable';
|
|
const sector = sectorLabels[org.sector] || org.sector || '-';
|
|
const entityLabel = entityTypeLabels[entityType] || entityType;
|
|
const plan = (org.subscription_plan || 'free').toLowerCase();
|
|
const planLabel = planLabels[plan] || plan;
|
|
const isActive = org.is_active == 1 || org.is_active === true;
|
|
const score = org.last_score;
|
|
let scoreHtml = '<span class="text-muted">-</span>';
|
|
|
|
if (score !== null && score !== undefined) {
|
|
const scoreColor = getScoreColor(score);
|
|
scoreHtml = `
|
|
<span class="score-inline">
|
|
<span class="score-dot" style="background:${scoreColor}"></span>
|
|
${Math.round(score)}%
|
|
</span>`;
|
|
}
|
|
|
|
html += `
|
|
<tr>
|
|
<td><strong>${escapeHtml(org.name || '-')}</strong></td>
|
|
<td>${escapeHtml(sector)}</td>
|
|
<td><span class="entity-type-badge ${entityType}">${escapeHtml(entityLabel)}</span></td>
|
|
<td>${org.member_count ?? '-'}</td>
|
|
<td>${scoreHtml}</td>
|
|
<td><span class="plan-badge ${plan}">${escapeHtml(planLabel)}</span></td>
|
|
<td><span class="status-dot ${isActive ? 'active' : 'inactive'}">${isActive ? 'Attiva' : 'Inattiva'}</span></td>
|
|
<td>${formatDate(org.created_at)}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
|
|
// Paginazione
|
|
const total = pagination.total || orgs.length;
|
|
const perPage = pagination.per_page || 20;
|
|
const page = pagination.page || currentPage;
|
|
const totalPages = Math.ceil(total / perPage);
|
|
const start = ((page - 1) * perPage) + 1;
|
|
const end = Math.min(page * perPage, total);
|
|
|
|
if (totalPages > 1) {
|
|
html += `
|
|
<div class="pagination">
|
|
<div class="pagination-info">
|
|
Visualizzati ${start}-${end} di ${total} organizzazioni
|
|
</div>
|
|
<div class="pagination-controls">
|
|
<button class="btn btn-secondary btn-sm" onclick="loadOrganizations(${page - 1})" ${page <= 1 ? 'disabled' : ''}>
|
|
« Precedente
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm" onclick="loadOrganizations(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>
|
|
Successivo »
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
} else if (total > 0) {
|
|
html += `
|
|
<div class="pagination">
|
|
<div class="pagination-info">
|
|
Totale: ${total} organizzazion${total === 1 ? 'e' : 'i'}
|
|
</div>
|
|
<div></div>
|
|
</div>`;
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|