Cristiano Benassati
52fd45fac9
- i18n.js: sistema traduzioni IT/EN con ~150 chiavi, localStorage, data-i18n - help.js: help contestuale per 10 pagine con riferimenti NIS2 - architecture.html: descrizione architettura sistema completa - common.js: language toggle sidebar (IT/EN), link Architettura, icone - Integrato i18n + help in tutte le 14 pagine app + 3 admin Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
378 lines
17 KiB
HTML
378 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pannello Amministrazione - NIS2 Agile</title>
|
|
<link rel="stylesheet" href="/nis2/css/style.css">
|
|
<style>
|
|
.admin-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.admin-stat-card {
|
|
background: var(--card-bg);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--card-shadow);
|
|
padding: 20px;
|
|
transition: box-shadow var(--transition), transform var(--transition);
|
|
}
|
|
.admin-stat-card:hover {
|
|
box-shadow: var(--card-shadow-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
.admin-stat-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--gray-500);
|
|
margin-bottom: 8px;
|
|
}
|
|
.admin-stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
color: var(--gray-900);
|
|
line-height: 1;
|
|
}
|
|
.admin-stat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.admin-stat-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.admin-stat-icon.blue { background: var(--primary-bg); color: var(--primary); }
|
|
.admin-stat-icon.green { background: var(--secondary-bg); color: var(--secondary); }
|
|
.admin-stat-icon.orange { background: var(--warning-bg); color: #d97706; }
|
|
.admin-stat-icon.red { background: var(--danger-bg); color: var(--danger); }
|
|
.admin-stat-icon.purple { background: #f3e8ff; color: #7c3aed; }
|
|
.chart-container {
|
|
padding: 24px;
|
|
}
|
|
.bar-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 32px;
|
|
height: 200px;
|
|
padding: 0 20px;
|
|
border-bottom: 2px solid var(--gray-200);
|
|
}
|
|
.bar-chart-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
.bar-chart-bar {
|
|
width: 60px;
|
|
border-radius: 6px 6px 0 0;
|
|
transition: height 0.8s ease;
|
|
min-height: 4px;
|
|
position: relative;
|
|
}
|
|
.bar-chart-bar.free { background: var(--gray-400); }
|
|
.bar-chart-bar.professional { background: var(--primary); }
|
|
.bar-chart-bar.enterprise { background: #7c3aed; }
|
|
.bar-chart-value {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
color: var(--gray-700);
|
|
margin-bottom: 8px;
|
|
}
|
|
.bar-chart-label {
|
|
font-size: 0.75rem;
|
|
color: var(--gray-500);
|
|
margin-top: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.quick-link-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 20px 24px;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--border-radius-lg);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.quick-link-card:hover {
|
|
border-color: var(--primary);
|
|
background: var(--primary-bg);
|
|
color: var(--primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--card-shadow-hover);
|
|
}
|
|
.quick-link-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--border-radius);
|
|
background: var(--primary-bg);
|
|
color: var(--primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.quick-link-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.quick-link-info h4 {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
margin-bottom: 2px;
|
|
}
|
|
.quick-link-info p {
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-500);
|
|
}
|
|
.quick-link-card:hover .quick-link-info h4 {
|
|
color: var(--primary);
|
|
}
|
|
.quick-links-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.admin-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.admin-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.quick-links-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.bar-chart {
|
|
gap: 16px;
|
|
}
|
|
.bar-chart-bar {
|
|
width: 40px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<aside class="sidebar" id="sidebar"></aside>
|
|
|
|
<main class="main-content">
|
|
<header class="content-header">
|
|
<h2>Pannello Amministrazione</h2>
|
|
<div class="content-header-actions">
|
|
<span class="badge badge-danger">Super Admin</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-body">
|
|
<!-- Stats Row 1 -->
|
|
<div class="admin-stats-grid" id="stats-row-1">
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon blue">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Totale Organizzazioni</div>
|
|
<div class="admin-stat-value" id="stat-total-orgs">--</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon green">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Organizzazioni Attive</div>
|
|
<div class="admin-stat-value" id="stat-active-orgs">--</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon blue">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Totale Utenti</div>
|
|
<div class="admin-stat-value" id="stat-total-users">--</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon green">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Utenti Attivi</div>
|
|
<div class="admin-stat-value" id="stat-active-users">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Row 2 -->
|
|
<div class="admin-stats-grid" id="stats-row-2">
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon purple">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Assessment Completati</div>
|
|
<div class="admin-stat-value" id="stat-assessments">--</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon orange">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Incidenti Aperti</div>
|
|
<div class="admin-stat-value" id="stat-incidents">--</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon red">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Totale Rischi</div>
|
|
<div class="admin-stat-value" id="stat-risks">--</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-icon purple">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm7-10a1 1 0 01.967.744L14.146 7.2 17.5 8.512a1 1 0 010 1.836l-3.354 1.311-1.18 4.456a1 1 0 01-1.932 0L9.854 11.66 6.5 10.348a1 1 0 010-1.836l3.354-1.311 1.18-4.456A1 1 0 0112 2z"/></svg>
|
|
</div>
|
|
<div class="admin-stat-label">Interazioni AI</div>
|
|
<div class="admin-stat-value" id="stat-ai">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plans Distribution -->
|
|
<div class="card mb-24">
|
|
<div class="card-header">
|
|
<h3>Distribuzione Piani</h3>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="bar-chart" id="plans-chart">
|
|
<div class="spinner" style="margin:40px auto;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Gestione Piattaforma</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="quick-links-grid">
|
|
<a href="/nis2/admin/organizations.html" class="quick-link-card">
|
|
<div class="quick-link-icon">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
|
|
</div>
|
|
<div class="quick-link-info">
|
|
<h4>Gestisci Organizzazioni</h4>
|
|
<p>Visualizza e gestisci tutte le organizzazioni registrate sulla piattaforma.</p>
|
|
</div>
|
|
</a>
|
|
<a href="/nis2/admin/users.html" class="quick-link-card">
|
|
<div class="quick-link-icon">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/></svg>
|
|
</div>
|
|
<div class="quick-link-info">
|
|
<h4>Gestisci Utenti</h4>
|
|
<p>Visualizza e gestisci tutti gli utenti registrati sulla piattaforma.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/nis2/js/api.js"></script>
|
|
<script src="/nis2/js/common.js"></script>
|
|
<script src="/nis2/js/i18n.js"></script>
|
|
<script>
|
|
// ── Auth check ───────────────────────────────────────────
|
|
if (!checkAuth()) throw new Error('Not authenticated');
|
|
loadSidebar();
|
|
I18n.init();
|
|
|
|
// ── 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. Solo gli amministratori possono accedere a questa pagina.', 'error');
|
|
setTimeout(() => { window.location.href = '/nis2/dashboard.html'; }, 1500);
|
|
return;
|
|
}
|
|
loadAdminStats();
|
|
} catch (e) {
|
|
window.location.href = '/nis2/dashboard.html';
|
|
}
|
|
})();
|
|
|
|
// ── Load Stats ───────────────────────────────────────────
|
|
async function loadAdminStats() {
|
|
try {
|
|
const result = await api.request('GET', '/admin/stats');
|
|
if (result.success && result.data) {
|
|
const d = result.data;
|
|
|
|
document.getElementById('stat-total-orgs').textContent = d.total_organizations ?? 0;
|
|
document.getElementById('stat-active-orgs').textContent = d.active_organizations ?? 0;
|
|
document.getElementById('stat-total-users').textContent = d.total_users ?? 0;
|
|
document.getElementById('stat-active-users').textContent = d.active_users ?? 0;
|
|
document.getElementById('stat-assessments').textContent = d.completed_assessments ?? 0;
|
|
document.getElementById('stat-incidents').textContent = d.open_incidents ?? 0;
|
|
document.getElementById('stat-risks').textContent = d.total_risks ?? 0;
|
|
document.getElementById('stat-ai').textContent = d.ai_interactions ?? 0;
|
|
|
|
renderPlansChart(d.plans_distribution || []);
|
|
} else {
|
|
showNotification('Impossibile caricare le statistiche.', 'error');
|
|
}
|
|
} catch (e) {
|
|
console.error('Errore caricamento stats:', e);
|
|
showNotification('Errore di connessione.', 'error');
|
|
}
|
|
}
|
|
|
|
// ── Plans Chart ──────────────────────────────────────────
|
|
function renderPlansChart(distribution) {
|
|
const container = document.getElementById('plans-chart');
|
|
|
|
const planLabels = { free: 'Free', professional: 'Professional', enterprise: 'Enterprise' };
|
|
const plans = { free: 0, professional: 0, enterprise: 0 };
|
|
|
|
distribution.forEach(p => {
|
|
const key = (p.subscription_plan || 'free').toLowerCase();
|
|
if (plans.hasOwnProperty(key)) {
|
|
plans[key] = parseInt(p.count) || 0;
|
|
}
|
|
});
|
|
|
|
const maxVal = Math.max(1, ...Object.values(plans));
|
|
|
|
let html = '';
|
|
for (const [key, count] of Object.entries(plans)) {
|
|
const heightPct = (count / maxVal) * 100;
|
|
html += `
|
|
<div class="bar-chart-item">
|
|
<div class="bar-chart-value">${count}</div>
|
|
<div class="bar-chart-bar ${key}" style="height:${Math.max(heightPct, 3)}%;"></div>
|
|
<div class="bar-chart-label">${planLabels[key]}</div>
|
|
</div>`;
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|