| <!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> |
|
|
| |
| <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 class="admin-main"> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
