Admin protetto, dashboard KPI e aggiornamenti sito marketing.

Login admin con cambio password, metriche server (CPU/RAM/disco/banda), grafici e statistiche streaming; sezione piani ridimensionata.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/public/admin-dashboard.js

@@ -0,0 +1,121 @@
+(function () {
+  const metricsUrl = window.adminMetricsUrl;
+  if (!metricsUrl) return;
+
+  const cpuCanvas = document.getElementById("chart-cpu");
+  const memCanvas = document.getElementById("chart-mem");
+  if (!cpuCanvas || !memCanvas || typeof Chart === "undefined") return;
+
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 300 },
+    scales: {
+      x: {
+        ticks: { maxTicksLimit: 6, color: "#9a9aad", font: { size: 10 } },
+        grid: { color: "rgba(255,255,255,0.06)" }
+      },
+      y: {
+        min: 0,
+        max: 100,
+        ticks: { color: "#9a9aad", font: { size: 10 }, callback: (v) => v + "%" },
+        grid: { color: "rgba(255,255,255,0.06)" }
+      }
+    },
+    plugins: {
+      legend: { display: false }
+    }
+  };
+
+  function labelsFromHistory(history) {
+    return history.map((p) => {
+      const d = new Date(p.at);
+      return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    });
+  }
+
+  const initial = window.adminInitialHistory || [];
+  const cpuChart = new Chart(cpuCanvas, {
+    type: "line",
+    data: {
+      labels: labelsFromHistory(initial),
+      datasets: [{
+        data: initial.map((p) => p.cpu),
+        borderColor: "#e53935",
+        backgroundColor: "rgba(229, 57, 53, 0.12)",
+        fill: true,
+        tension: 0.35,
+        pointRadius: 0,
+        borderWidth: 2
+      }]
+    },
+    options: chartOptions
+  });
+
+  const memChart = new Chart(memCanvas, {
+    type: "line",
+    data: {
+      labels: labelsFromHistory(initial),
+      datasets: [{
+        data: initial.map((p) => p.mem),
+        borderColor: "#43a047",
+        backgroundColor: "rgba(67, 160, 71, 0.12)",
+        fill: true,
+        tension: 0.35,
+        pointRadius: 0,
+        borderWidth: 2
+      }]
+    },
+    options: chartOptions
+  });
+
+  function updateCharts(history) {
+    const labels = labelsFromHistory(history);
+    cpuChart.data.labels = labels;
+    cpuChart.data.datasets[0].data = history.map((p) => p.cpu);
+    cpuChart.update("none");
+    memChart.data.labels = labels;
+    memChart.data.datasets[0].data = history.map((p) => p.mem);
+    memChart.update("none");
+  }
+
+  function setText(id, value) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = value;
+  }
+
+  function formatBytes(bytes) {
+    if (bytes == null) return "—";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let size = bytes;
+    let i = 0;
+    while (size >= 1024 && i < units.length - 1) {
+      size /= 1024;
+      i += 1;
+    }
+    return (size >= 10 ? size.toFixed(0) : size.toFixed(1)) + " " + units[i];
+  }
+
+  async function poll() {
+    try {
+      const res = await fetch(metricsUrl, { headers: { Accept: "application/json" }, credentials: "same-origin" });
+      if (!res.ok) return;
+      const data = await res.json();
+      const host = data.host || {};
+      const stats = data.stats || {};
+
+      setText("kpi-active-sessions", stats.active_sessions);
+      setText("kpi-sessions-today", stats.sessions_today);
+      setText("kpi-sessions-month", stats.sessions_month);
+      setText("kpi-cpu", (host.cpu ?? 0) + "%");
+      setText("kpi-mem", (host.memory?.used_percent ?? 0) + "%");
+      if (host.network) setText("kpi-network", formatBytes(host.network.total_bytes));
+
+      if (host.history) updateCharts(host.history);
+    } catch (_e) {
+      /* ignore polling errors */
+    }
+  }
+
+  setInterval(poll, 8000);
+})();