Upload folder using huggingface_hub

web_demo/app.py

@@ -14,10 +14,11 @@ import os
 import re
 import sys
 import uuid
+from collections import Counter, defaultdict
 from concurrent.futures import ThreadPoolExecutor
-from datetime import datetime
+from datetime import date, datetime, timedelta, timezone
 from pathlib import Path
-from typing import Any, Dict, Optional, Tuple
+from typing import Any, Dict, List, Optional, Tuple
 
 import cv2
 import numpy as np
@@ -31,7 +32,18 @@ from measure_finger import measure_finger, measure_multi_finger, apply_calibrati
 from src.logging_config import configure_logging
 from src.ring_size import recommend_ring_size, RING_MODELS, VALID_RING_MODELS, DEFAULT_RING_MODEL
 from src.ai_recommendation import ai_explain_recommendation
-from web_demo.supabase_client import upload_file, save_measurement, list_measurements, update_ground_truth, delete_measurement
+from web_demo.supabase_client import (
+    upload_file,
+    save_measurement,
+    list_measurements,
+    list_measurements_for_stats,
+    update_ground_truth,
+    delete_measurement,
+)
+from src.confidence_constants import (
+    CONFIDENCE_LEVEL_HIGH_THRESHOLD,
+    CONFIDENCE_LEVEL_MEDIUM_THRESHOLD,
+)
 
 configure_logging()
 
@@ -447,6 +459,225 @@ def api_admin_delete(measurement_id: str):
     return jsonify({"success": False, "error": "Delete failed"}), 400
 
 
+def _parse_iso_to_utc_date(iso_str: str) -> Optional[date]:
+    """Parse a Supabase `created_at` ISO string to a UTC `date`.
+
+    Supabase returns either '...+00:00' or trailing 'Z'. fromisoformat does
+    not accept 'Z' until 3.11, so normalize defensively.
+    """
+    if not iso_str:
+        return None
+    try:
+        s = iso_str.replace("Z", "+00:00")
+        dt = datetime.fromisoformat(s)
+        if dt.tzinfo is None:
+            dt = dt.replace(tzinfo=timezone.utc)
+        return dt.astimezone(timezone.utc).date()
+    except (ValueError, TypeError):
+        return None
+
+
+def _kol_key(name: Optional[str]) -> Optional[str]:
+    """Normalize kol_name for grouping (trim + lower). Empty → None so we
+    don't count anonymous sample runs as a distinct KOL."""
+    if not name:
+        return None
+    s = name.strip().lower()
+    return s or None
+
+
+def _compute_stats(rows: List[Dict[str, Any]], days: int = 30) -> Dict[str, Any]:
+    """Aggregate measurement rows into dashboard-ready buckets.
+
+    All time-bucketing is in UTC. `days` controls the per-day window; KOL,
+    failure, and distribution stats use the entire row set so totals reflect
+    everything in the table.
+    """
+    today = datetime.now(timezone.utc).date()
+    window_start = today - timedelta(days=days - 1)
+
+    per_day_photos: Counter = Counter()
+    per_day_kols: defaultdict = defaultdict(set)
+    per_day_fails: Counter = Counter()
+
+    kol_counts: Counter = Counter()
+    kol_last_seen: Dict[str, str] = {}
+    kol_display: Dict[str, str] = {}
+    fail_counter: Counter = Counter()
+    ring_model_counter: Counter = Counter()
+    mode_counter: Counter = Counter()
+    size_counter: Counter = Counter()
+
+    confidence_buckets = {"HIGH": 0, "MEDIUM": 0, "LOW": 0}
+    confidence_sum = 0.0
+    confidence_n = 0
+
+    success_count = 0
+    fail_count = 0
+    gt_filled_count = 0
+
+    last_7_count = 0
+    prev_7_count = 0
+    last_7_start = today - timedelta(days=6)
+    prev_7_start = today - timedelta(days=13)
+
+    first_at: Optional[str] = None
+    last_at: Optional[str] = None
+
+    for row in rows:
+        created_at = row.get("created_at") or ""
+        if created_at:
+            if last_at is None or created_at > last_at:
+                last_at = created_at
+            if first_at is None or created_at < first_at:
+                first_at = created_at
+
+        d = _parse_iso_to_utc_date(created_at)
+
+        kkey = _kol_key(row.get("kol_name"))
+        if kkey:
+            kol_counts[kkey] += 1
+            if kkey not in kol_display:
+                kol_display[kkey] = (row.get("kol_name") or "").strip()
+            if created_at and (kkey not in kol_last_seen or created_at > kol_last_seen[kkey]):
+                kol_last_seen[kkey] = created_at
+
+        fail_reason = row.get("fail_reason")
+        if fail_reason:
+            fail_count += 1
+            fail_counter[fail_reason] += 1
+        else:
+            success_count += 1
+
+        rm = row.get("ring_model")
+        if rm:
+            ring_model_counter[rm] += 1
+        m = row.get("mode")
+        if m:
+            mode_counter[m] += 1
+
+        size = row.get("overall_best_size")
+        if size not in (None, ""):
+            size_counter[str(size)] += 1
+
+        conf = row.get("confidence")
+        if isinstance(conf, (int, float)):
+            confidence_sum += float(conf)
+            confidence_n += 1
+            if conf > CONFIDENCE_LEVEL_HIGH_THRESHOLD:
+                confidence_buckets["HIGH"] += 1
+            elif conf >= CONFIDENCE_LEVEL_MEDIUM_THRESHOLD:
+                confidence_buckets["MEDIUM"] += 1
+            else:
+                confidence_buckets["LOW"] += 1
+
+        if any(row.get(k) not in (None, "") for k in ("gt_index_size", "gt_middle_size", "gt_ring_size")):
+            gt_filled_count += 1
+
+        if d is not None:
+            if window_start <= d <= today:
+                key = d.isoformat()
+                per_day_photos[key] += 1
+                if kkey:
+                    per_day_kols[key].add(kkey)
+                if fail_reason:
+                    per_day_fails[key] += 1
+            if last_7_start <= d <= today:
+                last_7_count += 1
+            elif prev_7_start <= d < last_7_start:
+                prev_7_count += 1
+
+    per_day_series = []
+    for i in range(days):
+        d = window_start + timedelta(days=i)
+        key = d.isoformat()
+        per_day_series.append({
+            "date": key,
+            "photos": per_day_photos.get(key, 0),
+            "unique_kols": len(per_day_kols.get(key, ())),
+            "fails": per_day_fails.get(key, 0),
+        })
+
+    top_kols = [
+        {
+            "kol_name": kol_display.get(k, k),
+            "count": c,
+            "last_at": kol_last_seen.get(k),
+        }
+        for k, c in kol_counts.most_common(10)
+    ]
+
+    fail_reasons = [
+        {"reason": r, "count": c}
+        for r, c in fail_counter.most_common()
+    ]
+
+    ring_models = [
+        {"model": m, "count": c}
+        for m, c in ring_model_counter.most_common()
+    ]
+
+    modes = [{"mode": m, "count": c} for m, c in mode_counter.most_common()]
+
+    def _size_sort_key(item):
+        s = item[0]
+        try:
+            return (0, float(s))
+        except (TypeError, ValueError):
+            return (1, s)
+
+    size_distribution = [
+        {"size": s, "count": c}
+        for s, c in sorted(size_counter.items(), key=_size_sort_key)
+    ]
+
+    total = len(rows)
+    success_rate = (success_count / total) if total else 0.0
+    avg_confidence = (confidence_sum / confidence_n) if confidence_n else 0.0
+    gt_rate = (gt_filled_count / total) if total else 0.0
+
+    return {
+        "totals": {
+            "total_measurements": total,
+            "unique_kols": len(kol_counts),
+            "success_count": success_count,
+            "fail_count": fail_count,
+            "success_rate": round(success_rate, 4),
+            "avg_confidence": round(avg_confidence, 4),
+            "gt_filled_count": gt_filled_count,
+            "gt_filled_rate": round(gt_rate, 4),
+            "last_7_days": last_7_count,
+            "prev_7_days": prev_7_count,
+            "first_measurement_at": first_at,
+            "last_measurement_at": last_at,
+        },
+        "window_days": days,
+        "per_day": per_day_series,
+        "top_kols": top_kols,
+        "fail_reasons": fail_reasons,
+        "ring_models": ring_models,
+        "modes": modes,
+        "size_distribution": size_distribution,
+        "confidence_buckets": [
+            {"bucket": "HIGH (>0.85)", "count": confidence_buckets["HIGH"]},
+            {"bucket": "MEDIUM (0.6–0.85)", "count": confidence_buckets["MEDIUM"]},
+            {"bucket": "LOW (<0.6)", "count": confidence_buckets["LOW"]},
+        ],
+    }
+
+
+@app.route("/api/admin/stats")
+def api_admin_stats():
+    if not _check_admin_token():
+        return jsonify({"error": "Unauthorized"}), 401
+    try:
+        days = max(7, min(int(request.args.get("days", 30)), 180))
+    except (TypeError, ValueError):
+        days = 30
+    rows = list_measurements_for_stats(limit=5000)
+    return jsonify(_compute_stats(rows, days=days))
+
+
 @app.route("/api/admin/export-csv")
 def api_admin_export_csv():
     if not _check_admin_token():

web_demo/supabase_client.py

@@ -120,6 +120,35 @@ def list_measurements(limit: int = 200, offset: int = 0) -> List[Dict[str, Any]]
         return []
 
 
+STATS_COLUMNS = (
+    "id,created_at,kol_name,mode,ring_model,confidence,fail_reason,"
+    "overall_best_size,ring_fit,gt_index_size,gt_middle_size,gt_ring_size"
+)
+
+
+def list_measurements_for_stats(limit: int = 5000) -> List[Dict[str, Any]]:
+    """Lightweight projection used by the admin stats endpoint.
+
+    Skips heavy columns (`result_json`, `per_finger`, photo URLs) so we can
+    pull thousands of rows for aggregation without paying the JSON-blob cost.
+    """
+    client = _get_client()
+    if client is None:
+        return []
+    try:
+        resp = (
+            client.table("measurements")
+            .select(STATS_COLUMNS)
+            .order("created_at", desc=True)
+            .limit(limit)
+            .execute()
+        )
+        return resp.data or []
+    except Exception as e:
+        logger.error("Failed to list measurements for stats: %s", e)
+        return []
+
+
 def delete_measurement(measurement_id: str) -> bool:
     """Delete a measurement record by ID."""
     client = _get_client()

web_demo/templates/admin.html

@@ -78,7 +78,75 @@
     .finger-cell .detail { color: var(--ink-soft); }
     .empty { text-align: center; padding: 48px; color: var(--ink-soft); }
     .scroll-wrap { overflow-x: auto; }
+    /* --- Tabs --- */
+    .tabs {
+      display: flex; gap: 0; margin-bottom: 16px;
+      border-bottom: 1px solid var(--border);
+    }
+    .tab {
+      padding: 8px 16px; cursor: pointer; font-size: 14px;
+      background: none; border: none; color: var(--ink-soft);
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+    }
+    .tab:hover { color: var(--ink); }
+    .tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
+    .pane { display: none; }
+    .pane.active { display: block; }
+    /* --- Dashboard --- */
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 12px; margin-bottom: 20px;
+    }
+    .stat-card {
+      background: #fff; border-radius: 8px; padding: 14px 16px;
+      box-shadow: 0 1px 4px var(--shadow);
+    }
+    .stat-card .label {
+      font-size: 11px; color: var(--ink-soft);
+      text-transform: uppercase; letter-spacing: 0.05em;
+      margin-bottom: 6px;
+    }
+    .stat-card .value {
+      font-size: 22px; font-weight: 600; color: var(--ink);
+    }
+    .stat-card .sub {
+      font-size: 12px; color: var(--ink-soft); margin-top: 4px;
+    }
+    .delta-up { color: #2f7a3d; }
+    .delta-down { color: var(--accent); }
+    .delta-flat { color: var(--ink-soft); }
+    .chart-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+      gap: 16px;
+    }
+    .chart-card {
+      background: #fff; border-radius: 8px; padding: 14px 16px;
+      box-shadow: 0 1px 4px var(--shadow);
+    }
+    .chart-card.wide { grid-column: 1 / -1; }
+    .chart-card h2 {
+      font-size: 13px; margin: 0 0 12px;
+      color: var(--ink-soft); font-weight: 600;
+      text-transform: uppercase; letter-spacing: 0.05em;
+    }
+    .chart-wrap { position: relative; height: 240px; }
+    .chart-wrap.tall { height: 280px; }
+    .top-kol-list {
+      list-style: none; padding: 0; margin: 0;
+      font-size: 13px;
+    }
+    .top-kol-list li {
+      display: flex; justify-content: space-between;
+      padding: 6px 0; border-bottom: 1px solid var(--border);
+    }
+    .top-kol-list li:last-child { border-bottom: none; }
+    .top-kol-list .name { font-weight: 500; }
+    .top-kol-list .count { color: var(--ink-soft); }
   </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 </head>
 <body>
 
@@ -95,36 +163,96 @@
 
   <!-- Admin content (hidden until authenticated) -->
   <div class="admin-content" id="adminContent">
-    <h1>KOL Measurement Records</h1>
-    <div class="toolbar">
-      <a href="/">Back to Demo</a>
-      <a id="exportCsvLink" href="#" download>Export CSV</a>
-      <button id="refreshBtn">Refresh</button>
-      <button id="prevPageBtn" disabled>&lsaquo; Prev</button>
-      <button id="nextPageBtn" disabled>Next &rsaquo;</button>
-      <span class="count" id="countLabel">Loading...</span>
+    <h1>Ring Sizer — Admin</h1>
+    <div class="tabs">
+      <button class="tab active" data-pane="dashboardPane">Dashboard</button>
+      <button class="tab" data-pane="recordsPane">Records</button>
     </div>
 
-    <div class="scroll-wrap">
-      <table>
-        <thead>
-          <tr>
-            <th>KOL</th>
-            <th>Date</th>
-            <th>Model</th>
-            <th>Photo</th>
-            <th>Index</th>
-            <th>Middle</th>
-            <th>Ring</th>
-            <th>Conf</th>
-            <th>Fail</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody id="tableBody">
-          <tr><td colspan="10" class="empty">Loading...</td></tr>
-        </tbody>
-      </table>
+    <!-- Dashboard pane -->
+    <div class="pane active" id="dashboardPane">
+      <div class="toolbar">
+        <a href="/">Back to Demo</a>
+        <button id="dashRefreshBtn">Refresh</button>
+        <label class="count" for="windowSelect">Window:</label>
+        <select id="windowSelect">
+          <option value="7">Last 7 days</option>
+          <option value="14">Last 14 days</option>
+          <option value="30" selected>Last 30 days</option>
+          <option value="60">Last 60 days</option>
+          <option value="90">Last 90 days</option>
+        </select>
+        <span class="count" id="dashStatusLabel">Loading...</span>
+      </div>
+
+      <div class="stat-grid" id="statGrid">
+        <!-- stat cards injected -->
+      </div>
+
+      <div class="chart-grid">
+        <div class="chart-card wide">
+          <h2>Uploads Per Day</h2>
+          <div class="chart-wrap tall"><canvas id="chartPerDay"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h2>Top KOLs</h2>
+          <ol class="top-kol-list" id="topKolList"></ol>
+        </div>
+        <div class="chart-card">
+          <h2>Failure Reasons</h2>
+          <div class="chart-wrap"><canvas id="chartFails"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h2>Confidence Levels</h2>
+          <div class="chart-wrap"><canvas id="chartConf"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h2>Ring Model Usage</h2>
+          <div class="chart-wrap"><canvas id="chartModels"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h2>Ring Size Distribution</h2>
+          <div class="chart-wrap"><canvas id="chartSizes"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h2>Mode (single vs multi)</h2>
+          <div class="chart-wrap"><canvas id="chartModes"></canvas></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Records pane -->
+    <div class="pane" id="recordsPane">
+      <div class="toolbar">
+        <a href="/">Back to Demo</a>
+        <a id="exportCsvLink" href="#" download>Export CSV</a>
+        <button id="refreshBtn">Refresh</button>
+        <button id="prevPageBtn" disabled>&lsaquo; Prev</button>
+        <button id="nextPageBtn" disabled>Next &rsaquo;</button>
+        <span class="count" id="countLabel">Loading...</span>
+      </div>
+
+      <div class="scroll-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>KOL</th>
+              <th>Date</th>
+              <th>Model</th>
+              <th>Photo</th>
+              <th>Index</th>
+              <th>Middle</th>
+              <th>Ring</th>
+              <th>Conf</th>
+              <th>Fail</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody id="tableBody">
+            <tr><td colspan="10" class="empty">Loading...</td></tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 
@@ -153,6 +281,7 @@
       loginGate.style.display = "none";
       adminContent.style.display = "block";
       document.getElementById("exportCsvLink").href = `/api/admin/export-csv?token=${encodeURIComponent(adminToken)}`;
+      loadStats();
       loadData();
       return true;
     };
@@ -270,6 +399,201 @@
     prevPageBtn.addEventListener("click", () => { currentPage--; renderPage(); });
     nextPageBtn.addEventListener("click", () => { currentPage++; renderPage(); });
     document.getElementById("refreshBtn").addEventListener("click", loadData);
+
+    // ------------------------------------------------------------------
+    // Tab switching
+    // ------------------------------------------------------------------
+    document.querySelectorAll(".tab").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        document.querySelectorAll(".tab").forEach((b) => b.classList.remove("active"));
+        document.querySelectorAll(".pane").forEach((p) => p.classList.remove("active"));
+        btn.classList.add("active");
+        document.getElementById(btn.dataset.pane).classList.add("active");
+      });
+    });
+
+    // ------------------------------------------------------------------
+    // Dashboard
+    // ------------------------------------------------------------------
+    const ACCENT = "#bf3a2b";
+    const PALETTE = ["#bf3a2b", "#d99c4f", "#7a8b3d", "#3d6b8b", "#8a4d8e", "#4b8a82", "#a05a3c", "#5a5a3c"];
+    const dashStatusLabel = document.getElementById("dashStatusLabel");
+    const statGrid = document.getElementById("statGrid");
+    const topKolList = document.getElementById("topKolList");
+    const windowSelect = document.getElementById("windowSelect");
+    const charts = {};
+
+    const fmtPct = (v) => v == null ? "-" : (v * 100).toFixed(1) + "%";
+    const fmtInt = (v) => v == null ? "-" : v.toLocaleString();
+    const fmtDay = (iso) => {
+      if (!iso) return "—";
+      // YYYY-MM-DD → MM-DD for compact axis labels
+      return iso.slice(5);
+    };
+    const deltaArrow = (curr, prev) => {
+      if (!prev && !curr) return { cls: "delta-flat", txt: "no change" };
+      if (!prev) return { cls: "delta-up", txt: `+${curr} vs prior 7d` };
+      const diff = curr - prev;
+      if (diff === 0) return { cls: "delta-flat", txt: "flat vs prior 7d" };
+      const pct = Math.round((diff / prev) * 100);
+      if (diff > 0) return { cls: "delta-up", txt: `+${diff} (${pct >= 0 ? "+" : ""}${pct}%) vs prior 7d` };
+      return { cls: "delta-down", txt: `${diff} (${pct}%) vs prior 7d` };
+    };
+
+    const renderStatCards = (s) => {
+      const t = s.totals;
+      const last7Delta = deltaArrow(t.last_7_days, t.prev_7_days);
+      const cards = [
+        { label: "Total measurements", value: fmtInt(t.total_measurements), sub: t.first_measurement_at ? `since ${t.first_measurement_at.slice(0, 10)}` : "" },
+        { label: "Unique KOLs", value: fmtInt(t.unique_kols), sub: "all-time, normalized" },
+        { label: "Last 7 days", value: fmtInt(t.last_7_days), sub: last7Delta.txt, subCls: last7Delta.cls },
+        { label: "Success rate", value: fmtPct(t.success_rate), sub: `${fmtInt(t.success_count)} ok · ${fmtInt(t.fail_count)} failed` },
+        { label: "Avg confidence", value: fmtPct(t.avg_confidence), sub: "successful runs only" },
+        { label: "Ground-truth coverage", value: fmtPct(t.gt_filled_rate), sub: `${fmtInt(t.gt_filled_count)} records labeled` },
+      ];
+      statGrid.innerHTML = cards.map((c) => `
+        <div class="stat-card">
+          <div class="label">${c.label}</div>
+          <div class="value">${c.value}</div>
+          <div class="sub ${c.subCls || ""}">${c.sub || ""}</div>
+        </div>
+      `).join("");
+    };
+
+    const renderTopKols = (kols) => {
+      if (!kols.length) {
+        topKolList.innerHTML = '<li><span class="name">—</span><span class="count">no KOLs yet</span></li>';
+        return;
+      }
+      topKolList.innerHTML = kols.map((k) => {
+        const last = k.last_at ? new Date(k.last_at).toISOString().slice(0, 10) : "";
+        return `<li><span class="name">${k.kol_name}</span><span class="count">${k.count} · ${last}</span></li>`;
+      }).join("");
+    };
+
+    const upsertChart = (key, ctx, config) => {
+      if (charts[key]) { charts[key].destroy(); }
+      charts[key] = new Chart(ctx, config);
+    };
+
+    const renderCharts = (s) => {
+      // Per-day uploads — line chart with photos, unique KOLs, fails
+      const labels = s.per_day.map((d) => fmtDay(d.date));
+      upsertChart("perDay", document.getElementById("chartPerDay"), {
+        type: "line",
+        data: {
+          labels,
+          datasets: [
+            { label: "Photos", data: s.per_day.map((d) => d.photos), borderColor: ACCENT, backgroundColor: ACCENT + "33", tension: 0.25, fill: true },
+            { label: "Unique KOLs", data: s.per_day.map((d) => d.unique_kols), borderColor: "#3d6b8b", backgroundColor: "transparent", tension: 0.25 },
+            { label: "Failures", data: s.per_day.map((d) => d.fails), borderColor: "#a05a3c", backgroundColor: "transparent", borderDash: [4, 4], tension: 0.25 },
+          ],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          interaction: { mode: "index", intersect: false },
+          scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
+          plugins: { legend: { position: "bottom" } },
+        },
+      });
+
+      // Failure reasons — doughnut. Always includes a Success slice for context.
+      const failLabels = ["Success", ...s.fail_reasons.map((f) => f.reason)];
+      const failData = [s.totals.success_count, ...s.fail_reasons.map((f) => f.count)];
+      const failColors = ["#7a8b3d", ...s.fail_reasons.map((_, i) => PALETTE[(i + 1) % PALETTE.length])];
+      upsertChart("fails", document.getElementById("chartFails"), {
+        type: "doughnut",
+        data: { labels: failLabels, datasets: [{ data: failData, backgroundColor: failColors }] },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { position: "right", labels: { boxWidth: 12, font: { size: 11 } } } },
+        },
+      });
+
+      // Confidence buckets — horizontal bar
+      upsertChart("conf", document.getElementById("chartConf"), {
+        type: "bar",
+        data: {
+          labels: s.confidence_buckets.map((b) => b.bucket),
+          datasets: [{
+            data: s.confidence_buckets.map((b) => b.count),
+            backgroundColor: ["#7a8b3d", "#d99c4f", "#bf3a2b"],
+          }],
+        },
+        options: {
+          indexAxis: "y", responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { x: { beginAtZero: true, ticks: { precision: 0 } } },
+        },
+      });
+
+      // Ring model usage
+      upsertChart("models", document.getElementById("chartModels"), {
+        type: "bar",
+        data: {
+          labels: s.ring_models.map((m) => m.model),
+          datasets: [{ data: s.ring_models.map((m) => m.count), backgroundColor: PALETTE }],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
+        },
+      });
+
+      // Ring size distribution
+      upsertChart("sizes", document.getElementById("chartSizes"), {
+        type: "bar",
+        data: {
+          labels: s.size_distribution.map((d) => d.size),
+          datasets: [{ data: s.size_distribution.map((d) => d.count), backgroundColor: ACCENT }],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
+        },
+      });
+
+      // Mode split
+      upsertChart("modes", document.getElementById("chartModes"), {
+        type: "doughnut",
+        data: {
+          labels: s.modes.map((m) => m.mode),
+          datasets: [{ data: s.modes.map((m) => m.count), backgroundColor: PALETTE }],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: { legend: { position: "right" } },
+        },
+      });
+    };
+
+    const loadStats = async () => {
+      dashStatusLabel.textContent = "Loading...";
+      const days = windowSelect.value;
+      try {
+        const resp = await fetch(`/api/admin/stats?token=${encodeURIComponent(adminToken)}&days=${days}`);
+        if (resp.status === 401) {
+          sessionStorage.removeItem("admin_token");
+          loginGate.style.display = "";
+          adminContent.style.display = "none";
+          loginError.textContent = "Session expired. Please log in again.";
+          return;
+        }
+        const stats = await resp.json();
+        renderStatCards(stats);
+        renderTopKols(stats.top_kols);
+        renderCharts(stats);
+        const updated = new Date().toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+        dashStatusLabel.textContent = `Updated ${updated}`;
+      } catch (e) {
+        dashStatusLabel.textContent = `Error: ${e.message}`;
+      }
+    };
+
+    document.getElementById("dashRefreshBtn").addEventListener("click", loadStats);
+    windowSelect.addEventListener("change", loadStats);
   </script>
 </body>
 </html>