Spaces:
Paused
Paused
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>PaperMate — Admin Dashboard</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" | |
| /> | |
| <link rel="stylesheet" href="css/style.css?v=2" /> | |
| </head> | |
| <body> | |
| <div class="bg-ambient" aria-hidden="true"> | |
| <div class="bg-grid"></div> | |
| </div> | |
| <div class="page-wrap"> | |
| <header> | |
| <div class="container"> | |
| <a href="home.html" class="logo"> | |
| Paper<span class="logo-accent">Mate</span> | |
| </a> | |
| <nav> | |
| <a href="home.html">Home</a> | |
| <a href="#" id="signout-link">Sign out</a> | |
| <button class="theme-btn" id="theme-toggle" aria-label="Toggle theme"> | |
| <i class="ri-moon-line icon-moon"></i> | |
| <i class="ri-sun-line icon-sun"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="container"> | |
| <!-- Loading / access states --> | |
| <div id="state-loading" class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Loading</div> | |
| <p style="color: var(--muted)">Checking access…</p> | |
| </div> | |
| <div id="state-denied" class="card fade-in" style="display: none"> | |
| <div class="kicker"><span class="dot"></span> Access denied</div> | |
| <div class="rule"></div> | |
| <p style="color: var(--muted)"> | |
| Your account does not have admin access. | |
| </p> | |
| <div style="display: flex; gap: 8px; margin-top: 12px"> | |
| <a class="btn btn-outline" href="home.html"><i class="ri-home-3-line"></i> Home</a> | |
| <button class="btn btn-outline" id="denied-signout"><i class="ri-logout-box-r-line"></i> Sign out</button> | |
| </div> | |
| </div> | |
| <!-- Dashboard (shown only to admins) --> | |
| <div id="dashboard" style="display: none"> | |
| <div class="hero fade-in" style="margin-bottom: 28px"> | |
| <div class="hero-badge"><span class="dot"></span> Admin Panel</div> | |
| <h1>Dashboard</h1> | |
| <p>Who is using PaperMate, how much, and at what cost.</p> | |
| </div> | |
| <!-- Cost alert banner --> | |
| <div class="alert alert-error" id="alert-banner" style="margin-bottom: 20px"></div> | |
| <!-- Overview KPIs --> | |
| <div class="overall-score fade-in" style="margin-bottom: 24px"> | |
| <div class="os-label"><span class="os-label-text">System Overview</span></div> | |
| <div class="arr-scores-row" id="kpi-row"></div> | |
| </div> | |
| <!-- Cost over time --> | |
| <div class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Cost over time (last days)</div> | |
| <div class="rule"></div> | |
| <div id="cost-chart" class="admin-chart"></div> | |
| <div class="rule"></div> | |
| <div class="kicker"><span class="dot"></span> Cost by provider</div> | |
| <div id="provider-breakdown" class="admin-provider-grid"></div> | |
| </div> | |
| <!-- Users --> | |
| <div class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Users</div> | |
| <div class="rule"></div> | |
| <div class="admin-table-wrap"> | |
| <table class="admin-table" id="users-table"> | |
| <thead> | |
| <tr> | |
| <th>Email</th> | |
| <th>Role</th> | |
| <th>Reviews</th> | |
| <th>Tokens</th> | |
| <th>Cost (USD)</th> | |
| <th>Active</th> | |
| <th>Quota (rev/cost)</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="users-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Submissions --> | |
| <div class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Submissions</div> | |
| <div class="rule"></div> | |
| <div class="admin-filters"> | |
| <input type="text" id="filter-q" placeholder="Search email / title…" /> | |
| <select id="filter-status"> | |
| <option value="">All statuses</option> | |
| <option value="pending">pending</option> | |
| <option value="processing">processing</option> | |
| <option value="completed">completed</option> | |
| <option value="failed">failed</option> | |
| </select> | |
| <button class="btn btn-outline" id="filter-apply"><i class="ri-search-line"></i> Search</button> | |
| </div> | |
| <div class="admin-table-wrap"> | |
| <table class="admin-table" id="subs-table"> | |
| <thead> | |
| <tr> | |
| <th>Created</th> | |
| <th>Email</th> | |
| <th>Title / file</th> | |
| <th>Status</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="subs-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Submission detail --> | |
| <div class="card fade-in" id="detail-card" style="display: none"> | |
| <div class="kicker"><span class="dot"></span> Submission detail</div> | |
| <div class="rule"></div> | |
| <div id="detail-body"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <div class="container">PaperMate · Admin</div> | |
| </footer> | |
| </div> | |
| <script src="js/theme.js?v=2"></script> | |
| <script type="module" src="js/admin.js"></script> | |
| </body> | |
| </html> | |