admin

admin.css

@@ -0,0 +1,150 @@
+/* ============================================================
+   SpeakFlow AI – admin.css
+   Professional Dark Admin Dashboard
+   ============================================================ */
+:root{
+  --blue:#2563EB;--blue-light:#3B82F6;--blue-dark:#1D4ED8;
+  --teal:#14B8A6;--purple:#7C3AED;--green:#10B981;--orange:#F59E0B;--red:#EF4444;
+  --bg:#0B1120;--sidebar-bg:#0F172A;--surface:rgba(30,41,59,0.85);
+  --surface-2:#1E293B;--surface-3:#263148;
+  --border:rgba(148,163,184,0.15);--border-solid:#334155;
+  --text:#F1F5F9;--text-muted:#94A3B8;--text-light:#64748B;
+  --radius:14px;--radius-lg:20px;
+  --shadow:0 4px 20px rgba(0,0,0,.35);--shadow-lg:0 20px 60px rgba(0,0,0,.5);
+  --font-display:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;
+  --tr:.25s ease;
+  --sidebar-w:260px;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+html{scroll-behavior:smooth;}
+body{font-family:var(--font-body);background:var(--bg);color:var(--text);display:flex;min-height:100vh;overflow-x:hidden;}
+a{color:inherit;text-decoration:none;}
+button{cursor:pointer;font-family:var(--font-body);border:none;background:none;}
+.logo-ai{background:linear-gradient(135deg,#3B82F6,#14B8A6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
+
+/* ── Sidebar ─────────────────────────────────────────────── */
+.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform var(--tr);}
+.sidebar-logo{display:flex;align-items:center;gap:12px;padding:24px 20px;border-bottom:1px solid var(--border);}
+.sidebar-logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;flex-shrink:0;}
+.sidebar-logo-text{font-family:var(--font-display);font-size:1.1rem;font-weight:700;display:block;}
+.sidebar-logo-sub{font-size:.72rem;color:var(--text-muted);margin-top:2px;}
+.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;}
+.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;font-size:.9rem;font-weight:500;color:var(--text-muted);transition:all var(--tr);}
+.nav-item i{width:18px;text-align:center;font-size:1rem;}
+.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text);}
+.nav-item.active{background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(20,184,166,.15));color:var(--blue-light);border-left:3px solid var(--blue);}
+.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);}
+.admin-profile{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
+.admin-avatar{width:38px;height:38px;background:linear-gradient(135deg,var(--purple),var(--blue));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#fff;flex-shrink:0;}
+.admin-profile strong{font-size:.88rem;display:block;}
+.admin-profile p{font-size:.73rem;color:var(--text-muted);}
+.btn-logout-sidebar{width:100%;padding:10px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2);border-radius:10px;color:#F87171;font-size:.88rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--tr);}
+.btn-logout-sidebar:hover{background:rgba(239,68,68,.2);}
+
+/* ── Main ────────────────────────────────────────────────── */
+.admin-main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
+
+/* ── Topbar ──────────────────────────────────────────────── */
+.topbar{display:flex;align-items:center;gap:16px;padding:0 28px;height:64px;background:var(--sidebar-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
+.sidebar-toggle{display:none;background:rgba(255,255,255,.07);border-radius:8px;width:38px;height:38px;align-items:center;justify-content:center;font-size:1rem;color:var(--text-muted);}
+.topbar-title{font-family:var(--font-display);font-size:1rem;font-weight:600;flex:1;}
+.topbar-right{display:flex;align-items:center;gap:14px;}
+.topbar-badge{background:rgba(124,58,237,.2);color:#A78BFA;padding:5px 12px;border-radius:50px;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:6px;}
+.topbar-time{font-size:.82rem;color:var(--text-muted);}
+
+/* ── Tab Sections ────────────────────────────────────────── */
+.tab-section{display:none;padding:28px;animation:fadeIn .3s ease;}
+.tab-section.active{display:block;}
+@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
+.section-heading{margin-bottom:24px;}
+.section-heading h2{font-family:var(--font-display);font-size:1.35rem;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:4px;}
+.section-heading p{color:var(--text-muted);font-size:.88rem;}
+
+/* ── Stats Cards ─────────────────────────────────────────── */
+.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
+.stat-card{background:var(--surface-2);border:1px solid var(--border-solid);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;transition:transform var(--tr),box-shadow var(--tr);}
+.stat-card::before{content:'';position:absolute;inset:0;opacity:.07;border-radius:var(--radius);}
+.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
+.card-blue .stat-icon{background:rgba(37,99,235,.2);color:var(--blue-light);}
+.card-blue::before{background:var(--blue);}
+.card-teal .stat-icon{background:rgba(20,184,166,.2);color:var(--teal);}
+.card-teal::before{background:var(--teal);}
+.card-green .stat-icon{background:rgba(16,185,129,.2);color:var(--green);}
+.card-green::before{background:var(--green);}
+.card-orange .stat-icon{background:rgba(245,158,11,.2);color:var(--orange);}
+.card-orange::before{background:var(--orange);}
+.stat-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
+.stat-number{font-family:var(--font-display);font-size:1.8rem;font-weight:700;line-height:1;}
+.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:4px;}
+
+/* ── Charts ──────────────────────────────────────────────── */
+.quick-charts{display:grid;grid-template-columns:1fr 2fr;gap:16px;}
+.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
+.chart-card{background:var(--surface-2);border:1px solid var(--border-solid);border-radius:var(--radius);padding:20px;}
+.chart-wide{grid-column:span 1;}
+.chart-full{grid-column:1/-1;}
+.chart-title{font-family:var(--font-display);font-size:.95rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text);}
+.chart-title i{color:var(--blue-light);}
+.chart-wrap{position:relative;height:220px;display:flex;align-items:center;justify-content:center;}
+.chart-tall{height:280px;}
+
+/* ── Table ───────────────────────────────────────────────── */
+.table-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
+.search-box{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border-solid);border-radius:10px;padding:10px 14px;flex:1;min-width:200px;}
+.search-box i{color:var(--text-muted);}
+.search-box input{background:none;border:none;outline:none;color:var(--text);font-size:.9rem;font-family:var(--font-body);width:100%;}
+.search-box input::placeholder{color:var(--text-light);}
+.count-badge{background:rgba(37,99,235,.15);color:var(--blue-light);padding:6px 14px;border-radius:50px;font-size:.8rem;font-weight:600;white-space:nowrap;}
+.btn-export{background:linear-gradient(135deg,var(--green),#059669);color:#fff;padding:10px 18px;border-radius:10px;font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:7px;transition:all var(--tr);}
+.btn-export:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(16,185,129,.3);}
+.table-wrap{background:var(--surface-2);border:1px solid var(--border-solid);border-radius:var(--radius);overflow:auto;}
+.admin-table{width:100%;border-collapse:collapse;}
+.admin-table th{padding:13px 16px;text-align:left;font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-solid);background:rgba(255,255,255,.02);white-space:nowrap;}
+.admin-table td{padding:13px 16px;font-size:.88rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;}
+.admin-table tbody tr:last-child td{border-bottom:none;}
+.admin-table tbody tr:hover td{background:rgba(255,255,255,.03);}
+.table-empty{text-align:center;padding:48px;color:var(--text-muted);}
+.table-empty i{font-size:2rem;margin-bottom:12px;opacity:.4;}
+.table-empty p{font-size:.9rem;}
+
+/* ── Badges ──────────────────────────────────────────────── */
+.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:50px;font-size:.75rem;font-weight:700;}
+.badge-green{background:rgba(16,185,129,.15);color:var(--green);}
+.badge-orange{background:rgba(245,158,11,.15);color:var(--orange);}
+.badge-blue{background:rgba(37,99,235,.15);color:var(--blue-light);}
+
+/* ── Action Buttons ─────────────────��────────────────────── */
+.btn-tbl{padding:5px 10px;border-radius:7px;font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:all var(--tr);}
+.btn-view{background:rgba(37,99,235,.15);color:var(--blue-light);}
+.btn-view:hover{background:rgba(37,99,235,.3);}
+.btn-delete{background:rgba(239,68,68,.12);color:#F87171;}
+.btn-delete:hover{background:rgba(239,68,68,.25);}
+
+/* ── System Stats ────────────────────────────────────────── */
+.sys-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
+.sys-stat-item{background:var(--surface-3);border-radius:12px;padding:16px;text-align:center;}
+.sys-stat-val{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:4px;}
+.sys-stat-lbl{font-size:.75rem;color:var(--text-muted);}
+
+/* ── Modal ───────────────────────────────────────────────── */
+.modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;}
+.modal-box{background:var(--surface-2);border:1px solid var(--border-solid);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:460px;box-shadow:var(--shadow-lg);}
+.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
+.modal-header h3{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:9px;}
+.modal-close{background:rgba(255,255,255,.07);border:none;color:var(--text-muted);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
+.modal-close:hover{background:rgba(255,255,255,.14);}
+.user-detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-solid);font-size:.9rem;}
+.user-detail-row:last-child{border-bottom:none;}
+.user-detail-row span:first-child{color:var(--text-muted);}
+
+/* ── Responsive ──────────────────────────────────────────── */
+@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr);}
+.quick-charts,.charts-grid{grid-template-columns:1fr;}.chart-wide,.chart-full{grid-column:1;}
+.sys-stats-grid{grid-template-columns:repeat(2,1fr);}}
+@media(max-width:768px){
+  .sidebar{transform:translateX(-100%);}.sidebar.open{transform:translateX(0);}
+  .admin-main{margin-left:0;}.sidebar-toggle{display:flex;}
+  .tab-section{padding:16px;}.stats-grid{grid-template-columns:1fr 1fr;}
+  .topbar{padding:0 16px;}
+}
+@media(max-width:480px){.stats-grid{grid-template-columns:1fr;}.sys-stats-grid{grid-template-columns:1fr 1fr;}}

admin.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Admin Dashboard – SpeakFlow AI</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
+  <link rel="stylesheet" href="admin.css" />
+</head>
+<body>
+
+  <!-- ── Sidebar ──────────────────────────────────────────── -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-logo">
+      <div class="sidebar-logo-icon"><i class="fas fa-wave-square"></i></div>
+      <div>
+        <span class="sidebar-logo-text">SpeakFlow <span class="logo-ai">AI</span></span>
+        <p class="sidebar-logo-sub">Admin Panel</p>
+      </div>
+    </div>
+
+    <nav class="sidebar-nav">
+      <a href="#" class="nav-item active" data-tab="dashboard">
+        <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
+      </a>
+      <a href="#" class="nav-item" data-tab="users">
+        <i class="fas fa-users"></i> <span>User Management</span>
+      </a>
+      <a href="#" class="nav-item" data-tab="analyses">
+        <i class="fas fa-history"></i> <span>Analysis History</span>
+      </a>
+      <a href="#" class="nav-item" data-tab="charts">
+        <i class="fas fa-chart-line"></i> <span>Analytics Charts</span>
+      </a>
+    </nav>
+
+    <div class="sidebar-footer">
+      <div class="admin-profile">
+        <div class="admin-avatar"><i class="fas fa-shield-alt"></i></div>
+        <div>
+          <strong>Administrator</strong>
+          <p>admin@speakflow.ai</p>
+        </div>
+      </div>
+      <button class="btn-logout-sidebar" id="adminLogout">
+        <i class="fas fa-sign-out-alt"></i> Logout
+      </button>
+    </div>
+  </aside>
+
+  <!-- ── Main Content ─────────────────────────────────────── -->
+  <main class="admin-main">
+
+    <!-- Top Bar -->
+    <div class="topbar">
+      <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
+      <div class="topbar-title" id="topbarTitle">Dashboard Overview</div>
+      <div class="topbar-right">
+        <div class="topbar-badge"><i class="fas fa-shield-alt"></i> Admin</div>
+        <div class="topbar-time" id="topbarTime"></div>
+      </div>
+    </div>
+
+    <!-- ═══ DASHBOARD TAB ════════════════════════════════════ -->
+    <section class="tab-section active" id="tab-dashboard">
+      <div class="section-heading">
+        <h2><i class="fas fa-tachometer-alt"></i> Dashboard Overview</h2>
+        <p>Real-time platform statistics and system health.</p>
+      </div>
+
+      <!-- Stats Cards -->
+      <div class="stats-grid" id="statsGrid">
+        <div class="stat-card card-blue">
+          <div class="stat-icon"><i class="fas fa-users"></i></div>
+          <div class="stat-body">
+            <div class="stat-number" id="sc-users">0</div>
+            <div class="stat-label">Total Users</div>
+          </div>
+          <div class="stat-trend" id="st-users"></div>
+        </div>
+        <div class="stat-card card-teal">
+          <div class="stat-icon"><i class="fas fa-brain"></i></div>
+          <div class="stat-body">
+            <div class="stat-number" id="sc-analyses">0</div>
+            <div class="stat-label">Total Analyses</div>
+          </div>
+        </div>
+        <div class="stat-card card-green">
+          <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
+          <div class="stat-body">
+            <div class="stat-number" id="sc-normal">0</div>
+            <div class="stat-label">Normal Detections</div>
+          </div>
+        </div>
+        <div class="stat-card card-orange">
+          <div class="stat-icon"><i class="fas fa-exclamation-triangle"></i></div>
+          <div class="stat-body">
+            <div class="stat-number" id="sc-stutter">0</div>
+            <div class="stat-label">Stutter Detections</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Quick Charts Row -->
+      <div class="quick-charts">
+        <div class="chart-card">
+          <h3 class="chart-title"><i class="fas fa-chart-pie"></i> Detection Ratio</h3>
+          <div class="chart-wrap"><canvas id="dashPieChart"></canvas></div>
+        </div>
+        <div class="chart-card chart-wide">
+          <h3 class="chart-title"><i class="fas fa-chart-bar"></i> Recent Activity (Last 7 Days)</h3>
+          <div class="chart-wrap"><canvas id="dashBarChart"></canvas></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ═══ USERS TAB ════════════════════════════════════════ -->
+    <section class="tab-section" id="tab-users">
+      <div class="section-heading">
+        <h2><i class="fas fa-users"></i> User Management</h2>
+        <p>View, search, and manage registered users.</p>
+      </div>
+      <div class="table-toolbar">
+        <div class="search-box">
+          <i class="fas fa-search"></i>
+          <input type="text" id="userSearch" placeholder="Search by name or email..." />
+        </div>
+        <span id="userCount" class="count-badge">0 users</span>
+      </div>
+      <div class="table-wrap">
+        <table class="admin-table" id="usersTable">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Registered</th>
+              <th>Analyses</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody id="usersBody"></tbody>
+        </table>
+        <div class="table-empty" id="usersEmpty" style="display:none;">
+          <i class="fas fa-user-slash"></i><p>No users found.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- ═══ ANALYSES TAB ═════════════════════════════════════ -->
+    <section class="tab-section" id="tab-analyses">
+      <div class="section-heading">
+        <h2><i class="fas fa-history"></i> Analysis History</h2>
+        <p>All speech analyses performed across all users.</p>
+      </div>
+      <div class="table-toolbar">
+        <div class="search-box">
+          <i class="fas fa-search"></i>
+          <input type="text" id="analysisSearch" placeholder="Search by user, file, or result..." />
+        </div>
+        <button class="btn-export" id="exportCsvBtn"><i class="fas fa-file-csv"></i> Export CSV</button>
+      </div>
+      <div class="table-wrap">
+        <table class="admin-table" id="analysesTable">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>User</th>
+              <th>File Name</th>
+              <th>Date</th>
+              <th>Result</th>
+              <th>Confidence</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody id="analysesBody"></tbody>
+        </table>
+        <div class="table-empty" id="analysesEmpty" style="display:none;">
+          <i class="fas fa-history"></i><p>No analyses found.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- ═══ CHARTS TAB ════════════════════════════════════════ -->
+    <section class="tab-section" id="tab-charts">
+      <div class="section-heading">
+        <h2><i class="fas fa-chart-line"></i> Analytics Charts</h2>
+        <p>Visual insights into platform usage and detection trends.</p>
+      </div>
+      <div class="charts-grid">
+        <div class="chart-card chart-full">
+          <h3 class="chart-title"><i class="fas fa-chart-line"></i> User Growth Over Time</h3>
+          <div class="chart-wrap chart-tall"><canvas id="userGrowthChart"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h3 class="chart-title"><i class="fas fa-chart-pie"></i> Normal vs Stutter</h3>
+          <div class="chart-wrap"><canvas id="detectionPieChart"></canvas></div>
+        </div>
+        <div class="chart-card">
+          <h3 class="chart-title"><i class="fas fa-chart-bar"></i> Analysis Activity</h3>
+          <div class="chart-wrap"><canvas id="activityChart"></canvas></div>
+        </div>
+        <div class="chart-card chart-full">
+          <h3 class="chart-title"><i class="fas fa-server"></i> System Statistics</h3>
+          <div class="sys-stats-grid" id="sysStatsGrid"></div>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- User View Modal -->
+  <div id="userViewModal" class="modal-overlay" style="display:none;">
+    <div class="modal-box glass-card">
+      <div class="modal-header">
+        <h3><i class="fas fa-user"></i> User Details</h3>
+        <button class="modal-close" id="userViewClose"><i class="fas fa-times"></i></button>
+      </div>
+      <div id="userViewBody"></div>
+    </div>
+  </div>
+
+  <script src="admin.js"></script>
+</body>
+</html>

admin.js

@@ -0,0 +1,437 @@
+/* ============================================================
+   SpeakFlow AI – admin.js
+   Full Admin Dashboard Logic
+   ============================================================ */
+'use strict';
+
+/* ── Auth Guard ─────────────────────────────────────────────── */
+const session = JSON.parse(localStorage.getItem('sf_session') || 'null');
+if (!session || !session.loggedIn || !session.isAdmin) {
+  window.location.href = 'login.html';
+}
+
+/* ── Seed demo data if empty ───────────────────────────────── */
+(function seedDemoData() {
+  const users = JSON.parse(localStorage.getItem('sf_users') || '[]');
+  if (users.length === 0) {
+    const demoUsers = [
+      { id: 'usr_001', name: 'Alice Johnson',  email: 'alice@example.com',  password: 'pass123', createdAt: daysAgo(30) },
+      { id: 'usr_002', name: 'Bob Martinez',   email: 'bob@example.com',    password: 'pass123', createdAt: daysAgo(25) },
+      { id: 'usr_003', name: 'Carol Williams', email: 'carol@example.com',  password: 'pass123', createdAt: daysAgo(18) },
+      { id: 'usr_004', name: 'David Chen',     email: 'david@example.com',  password: 'pass123', createdAt: daysAgo(10) },
+      { id: 'usr_005', name: 'Eva Brown',      email: 'eva@example.com',    password: 'pass123', createdAt: daysAgo(4)  },
+    ];
+    localStorage.setItem('sf_users', JSON.stringify(demoUsers));
+  }
+
+  const history = JSON.parse(localStorage.getItem('sf_analysis_history') || '[]');
+  if (history.length === 0) {
+    const files  = ['speech_sample.wav','recording_01.mp3','audio_test.wav','voice_clip.mp3','session_audio.wav'];
+    const results= ['Normal','Stutter Detected','Normal','Normal','Stutter Detected'];
+    const confs  = [92, 87, 95, 78, 83];
+    const stored = JSON.parse(localStorage.getItem('sf_users') || '[]');
+    const demo   = stored.length ? stored : [{ id:'usr_001', name:'Alice Johnson', email:'alice@example.com' }];
+    const entries = [];
+    for (let i = 0; i < 12; i++) {
+      const u = demo[i % demo.length];
+      entries.push({
+        id: 'ana_' + Date.now() + i,
+        userId:     u.id,
+        userName:   u.name,
+        userEmail:  u.email,
+        fileName:   files[i % files.length],
+        date:       daysAgo(Math.floor(Math.random() * 28)),
+        result:     results[i % results.length],
+        confidence: confs[i % confs.length] + Math.floor(Math.random() * 5),
+      });
+    }
+    localStorage.setItem('sf_analysis_history', JSON.stringify(entries));
+  }
+})();
+
+function daysAgo(n) {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString();
+}
+
+/* ── DOM helpers ─────────────────────────────────────────── */
+const $ = id => document.getElementById(id);
+const users    = () => JSON.parse(localStorage.getItem('sf_users') || '[]');
+const analyses = () => JSON.parse(localStorage.getItem('sf_analysis_history') || '[]');
+
+/* ── Clock ───────────────────────────────────────────────── */
+function updateClock() {
+  const now = new Date();
+  $('topbarTime').textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+setInterval(updateClock, 1000);
+updateClock();
+
+/* ── Sidebar Toggle ──────────────────────────────────────── */
+$('sidebarToggle').addEventListener('click', () => {
+  document.getElementById('sidebar').classList.toggle('open');
+});
+
+/* ── Logout ──────────────────────────────────────────────── */
+$('adminLogout').addEventListener('click', () => {
+  localStorage.removeItem('sf_session');
+  window.location.href = 'login.html';
+});
+
+/* ── Tab Navigation ──────────────────────────────────────── */
+const tabTitles = {
+  dashboard: 'Dashboard Overview',
+  users:     'User Management',
+  analyses:  'Analysis History',
+  charts:    'Analytics Charts',
+};
+
+document.querySelectorAll('.nav-item').forEach(item => {
+  item.addEventListener('click', e => {
+    e.preventDefault();
+    const tab = item.dataset.tab;
+    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+    document.querySelectorAll('.tab-section').forEach(s => s.classList.remove('active'));
+    item.classList.add('active');
+    $('tab-' + tab).classList.add('active');
+    $('topbarTitle').textContent = tabTitles[tab];
+    if (tab === 'charts') renderChartsTab();
+    if (tab === 'users')  renderUsersTable(users());
+    if (tab === 'analyses') renderAnalysesTable(analyses());
+  });
+});
+
+/* ═══════════════════════════════════════════════════════════
+   DASHBOARD
+═══════════════════════════════════════════════════════════ */
+function renderDashboard() {
+  const u = users();
+  const a = analyses();
+  const normal  = a.filter(x => x.result === 'Normal').length;
+  const stutter = a.filter(x => x.result !== 'Normal').length;
+
+  animateCount('sc-users',    u.length);
+  animateCount('sc-analyses', a.length);
+  animateCount('sc-normal',   normal);
+  animateCount('sc-stutter',  stutter);
+
+  renderDashPie(normal, stutter);
+  renderDashBar(a);
+}
+
+function animateCount(id, target) {
+  const el = $(id);
+  let current = 0;
+  const step = Math.max(1, Math.ceil(target / 40));
+  const timer = setInterval(() => {
+    current = Math.min(current + step, target);
+    el.textContent = current;
+    if (current >= target) clearInterval(timer);
+  }, 30);
+}
+
+/* Dash Pie */
+let dashPieInst = null;
+function renderDashPie(normal, stutter) {
+  const ctx = $('dashPieChart').getContext('2d');
+  if (dashPieInst) dashPieInst.destroy();
+  dashPieInst = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: ['Normal', 'Stutter'],
+      datasets: [{ data: [normal || 1, stutter || 0], backgroundColor: ['#10B981','#F59E0B'], borderWidth: 0, hoverOffset: 8 }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { position: 'bottom', labels: { color: '#94A3B8', font: { size: 12 }, padding: 16 } } }
+    }
+  });
+}
+
+/* Dash Bar – last 7 days */
+let dashBarInst = null;
+function renderDashBar(a) {
+  const days = [];
+  const counts = [];
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date();
+    d.setDate(d.getDate() - i);
+    const label = d.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
+    days.push(label);
+    const ds = d.toDateString();
+    counts.push(a.filter(x => new Date(x.date).toDateString() === ds).length);
+  }
+  const ctx = $('dashBarChart').getContext('2d');
+  if (dashBarInst) dashBarInst.destroy();
+  dashBarInst = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: days,
+      datasets: [{ label: 'Analyses', data: counts, backgroundColor: 'rgba(59,130,246,0.7)', borderRadius: 8, borderSkipped: false }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        x: { ticks: { color: '#64748B', font: { size: 11 } }, grid: { color: 'rgba(255,255,255,.04)' } },
+        y: { ticks: { color: '#64748B', stepSize: 1 }, grid: { color: 'rgba(255,255,255,.04)' }, beginAtZero: true }
+      }
+    }
+  });
+}
+
+/* ═══════════════════════════════════════════════════════════
+   USERS TABLE
+═══════════════════════════════════════════════════════════ */
+function renderUsersTable(list) {
+  const body  = $('usersBody');
+  const empty = $('usersEmpty');
+  const a     = analyses();
+  body.innerHTML = '';
+  $('userCount').textContent = list.length + ' user' + (list.length !== 1 ? 's' : '');
+
+  if (!list.length) { empty.style.display = 'block'; return; }
+  empty.style.display = 'none';
+
+  list.forEach((u, i) => {
+    const userAna = a.filter(x => x.userEmail === u.email).length;
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td><span style="color:var(--text-muted)">${i + 1}</span></td>
+      <td><strong>${esc(u.name)}</strong></td>
+      <td style="color:var(--text-muted)">${esc(u.email)}</td>
+      <td style="color:var(--text-muted)">${new Date(u.createdAt).toLocaleDateString()}</td>
+      <td><span class="badge badge-blue">${userAna}</span></td>
+      <td style="display:flex;gap:6px;flex-wrap:wrap;">
+        <button class="btn-tbl btn-view" data-id="${u.id}"><i class="fas fa-eye"></i> View</button>
+        <button class="btn-tbl btn-delete" data-id="${u.id}"><i class="fas fa-trash"></i> Delete</button>
+      </td>`;
+    body.appendChild(tr);
+  });
+
+  body.querySelectorAll('.btn-view').forEach(btn => btn.addEventListener('click', () => openUserView(btn.dataset.id)));
+  body.querySelectorAll('.btn-delete').forEach(btn => btn.addEventListener('click', () => deleteUser(btn.dataset.id)));
+}
+
+$('userSearch').addEventListener('input', function () {
+  const q = this.value.toLowerCase();
+  renderUsersTable(users().filter(u => u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)));
+});
+
+function deleteUser(id) {
+  if (!confirm('Delete this user? This cannot be undone.')) return;
+  let u = users().filter(x => x.id !== id);
+  localStorage.setItem('sf_users', JSON.stringify(u));
+  // Also remove their analyses
+  let a = analyses().filter(x => {
+    const del = JSON.parse(localStorage.getItem('sf_users') || '[]');
+    return x.userId !== id;
+  });
+  localStorage.setItem('sf_analysis_history', JSON.stringify(analyses().filter(x => x.userId !== id)));
+  renderUsersTable(u);
+  renderDashboard();
+}
+
+function openUserView(id) {
+  const u  = users().find(x => x.id === id);
+  if (!u) return;
+  const a  = analyses().filter(x => x.userEmail === u.email);
+  const nb = $('userViewBody');
+  nb.innerHTML = `
+    <div class="user-detail-row"><span><i class="fas fa-user" style="width:18px;text-align:center;"></i> Full Name</span><strong>${esc(u.name)}</strong></div>
+    <div class="user-detail-row"><span><i class="fas fa-envelope" style="width:18px;text-align:center;"></i> Email</span><strong>${esc(u.email)}</strong></div>
+    <div class="user-detail-row"><span><i class="fas fa-calendar" style="width:18px;text-align:center;"></i> Registered</span><strong>${new Date(u.createdAt).toLocaleString()}</strong></div>
+    <div class="user-detail-row"><span><i class="fas fa-chart-bar" style="width:18px;text-align:center;"></i> Total Analyses</span><strong>${a.length}</strong></div>
+    <div class="user-detail-row"><span><i class="fas fa-check-circle" style="width:18px;text-align:center;"></i> Normal Results</span><strong style="color:var(--green)">${a.filter(x=>x.result==='Normal').length}</strong></div>
+    <div class="user-detail-row"><span><i class="fas fa-exclamation-triangle" style="width:18px;text-align:center;"></i> Stutter Results</span><strong style="color:var(--orange)">${a.filter(x=>x.result!=='Normal').length}</strong></div>
+  `;
+  $('userViewModal').style.display = 'flex';
+}
+
+$('userViewClose').addEventListener('click', () => { $('userViewModal').style.display = 'none'; });
+$('userViewModal').addEventListener('click', function(e) { if (e.target === this) this.style.display = 'none'; });
+
+/* ═══════════════════════════════════════════════════════════
+   ANALYSES TABLE
+═══════════════════════════════════════════════════════════ */
+function renderAnalysesTable(list) {
+  const body  = $('analysesBody');
+  const empty = $('analysesEmpty');
+  body.innerHTML = '';
+  if (!list.length) { empty.style.display = 'block'; return; }
+  empty.style.display = 'none';
+
+  list.forEach((a, i) => {
+    const isNormal = a.result === 'Normal';
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td><span style="color:var(--text-muted)">${i + 1}</span></td>
+      <td><strong>${esc(a.userName || 'Unknown')}</strong></td>
+      <td style="color:var(--text-muted);font-size:.83rem">${esc(a.fileName || 'N/A')}</td>
+      <td style="color:var(--text-muted)">${new Date(a.date).toLocaleDateString()}</td>
+      <td><span class="badge ${isNormal ? 'badge-green' : 'badge-orange'}"><i class="fas fa-${isNormal ? 'check-circle' : 'exclamation-triangle'}"></i> ${esc(a.result)}</span></td>
+      <td><strong>${a.confidence || '--'}%</strong></td>
+      <td><button class="btn-tbl btn-delete" data-id="${a.id}"><i class="fas fa-trash"></i> Delete</button></td>`;
+    body.appendChild(tr);
+  });
+
+  body.querySelectorAll('.btn-delete').forEach(btn => btn.addEventListener('click', () => deleteAnalysis(btn.dataset.id)));
+}
+
+$('analysisSearch').addEventListener('input', function () {
+  const q = this.value.toLowerCase();
+  renderAnalysesTable(analyses().filter(a =>
+    (a.userName || '').toLowerCase().includes(q) ||
+    (a.fileName || '').toLowerCase().includes(q) ||
+    (a.result   || '').toLowerCase().includes(q)
+  ));
+});
+
+function deleteAnalysis(id) {
+  if (!confirm('Delete this analysis record?')) return;
+  const updated = analyses().filter(x => x.id !== id);
+  localStorage.setItem('sf_analysis_history', JSON.stringify(updated));
+  renderAnalysesTable(updated);
+  renderDashboard();
+}
+
+/* ── Export CSV ──────────────────────────────────────────── */
+$('exportCsvBtn').addEventListener('click', () => {
+  const a = analyses();
+  if (!a.length) { alert('No analysis data to export.'); return; }
+  const header = ['#','User Name','User Email','File Name','Date','Result','Confidence'];
+  const rows   = a.map((x, i) => [
+    i + 1, `"${x.userName || ''}"`, `"${x.userEmail || ''}"`,
+    `"${x.fileName || ''}"`, new Date(x.date).toLocaleString(),
+    x.result, x.confidence + '%'
+  ]);
+  const csv = [header.join(','), ...rows.map(r => r.join(','))].join('\n');
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const url  = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url; link.download = 'speakflow_analyses.csv';
+  link.click(); URL.revokeObjectURL(url);
+});
+
+/* ═══════════════════════════════════════════════════════════
+   CHARTS TAB
+═══════════════════════════════════════════════════════════ */
+let chartsRendered = false;
+let growthInst = null, pieInst = null, activityInst = null;
+
+function renderChartsTab() {
+  if (chartsRendered) { chartsRendered = false; } // always re-render fresh
+  const a = analyses();
+  const u = users();
+
+  // 1. User Growth Line Chart
+  const growthCtx = $('userGrowthChart').getContext('2d');
+  if (growthInst) growthInst.destroy();
+
+  const months = getLast6Months();
+  const growthData = months.map(m => u.filter(x => {
+    const d = new Date(x.createdAt);
+    return d.getFullYear() === m.year && d.getMonth() === m.month;
+  }).length);
+
+  growthInst = new Chart(growthCtx, {
+    type: 'line',
+    data: {
+      labels: months.map(m => m.label),
+      datasets: [{
+        label: 'New Users', data: growthData,
+        borderColor: '#3B82F6', backgroundColor: 'rgba(59,130,246,0.12)',
+        fill: true, tension: 0.4, pointBackgroundColor: '#3B82F6', pointRadius: 5
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { labels: { color: '#94A3B8' } } },
+      scales: {
+        x: { ticks: { color: '#64748B' }, grid: { color: 'rgba(255,255,255,.04)' } },
+        y: { ticks: { color: '#64748B', stepSize: 1 }, grid: { color: 'rgba(255,255,255,.04)' }, beginAtZero: true }
+      }
+    }
+  });
+
+  // 2. Detection Pie
+  const normal  = a.filter(x => x.result === 'Normal').length;
+  const stutter = a.filter(x => x.result !== 'Normal').length;
+  const pieCtx = $('detectionPieChart').getContext('2d');
+  if (pieInst) pieInst.destroy();
+  pieInst = new Chart(pieCtx, {
+    type: 'pie',
+    data: {
+      labels: ['Normal', 'Stutter Detected'],
+      datasets: [{ data: [normal || 1, stutter || 0], backgroundColor: ['#10B981','#F59E0B'], borderWidth: 0, hoverOffset: 10 }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { position: 'bottom', labels: { color: '#94A3B8', padding: 16 } } }
+    }
+  });
+
+  // 3. Activity Bar – last 7 days
+  const days = [];
+  const dayCounts = [];
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date(); d.setDate(d.getDate() - i);
+    days.push(d.toLocaleDateString([], { weekday: 'short' }));
+    dayCounts.push(a.filter(x => new Date(x.date).toDateString() === d.toDateString()).length);
+  }
+  const actCtx = $('activityChart').getContext('2d');
+  if (activityInst) activityInst.destroy();
+  activityInst = new Chart(actCtx, {
+    type: 'bar',
+    data: {
+      labels: days,
+      datasets: [
+        { label: 'Analyses', data: dayCounts, backgroundColor: 'rgba(20,184,166,0.75)', borderRadius: 8, borderSkipped: false }
+      ]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { labels: { color: '#94A3B8' } } },
+      scales: {
+        x: { ticks: { color: '#64748B' }, grid: { color: 'rgba(255,255,255,.04)' } },
+        y: { ticks: { color: '#64748B', stepSize: 1 }, grid: { color: 'rgba(255,255,255,.04)' }, beginAtZero: true }
+      }
+    }
+  });
+
+  // 4. System Stats
+  const avg = a.length ? Math.round(a.reduce((s, x) => s + (x.confidence || 0), 0) / a.length) : 0;
+  const sysGrid = $('sysStatsGrid');
+  sysGrid.innerHTML = `
+    <div class="sys-stat-item"><div class="sys-stat-val" style="color:var(--blue-light)">${u.length}</div><div class="sys-stat-lbl">Registered Users</div></div>
+    <div class="sys-stat-item"><div class="sys-stat-val" style="color:var(--teal)">${a.length}</div><div class="sys-stat-lbl">Total Analyses</div></div>
+    <div class="sys-stat-item"><div class="sys-stat-val" style="color:var(--green)">${avg}%</div><div class="sys-stat-lbl">Avg Confidence</div></div>
+    <div class="sys-stat-item"><div class="sys-stat-val" style="color:var(--orange)">${stutter}</div><div class="sys-stat-lbl">Stutter Detections</div></div>
+  `;
+
+  chartsRendered = true;
+}
+
+function getLast6Months() {
+  const result = [];
+  for (let i = 5; i >= 0; i--) {
+    const d = new Date();
+    d.setMonth(d.getMonth() - i);
+    result.push({
+      year: d.getFullYear(), month: d.getMonth(),
+      label: d.toLocaleDateString([], { month: 'short', year: '2-digit' })
+    });
+  }
+  return result;
+}
+
+/* ── Escape HTML ─────────────────────────────────────────── */
+function esc(s) {
+  return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+/* ── Init ────────────────────────────────────────────────── */
+renderDashboard();
+renderUsersTable(users());
+renderAnalysesTable(analyses());