Spaces:
Running
Running
| <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> | |
| </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="kpi-grid fade-in" id="kpi-row"></div> | |
| <!-- Cost over time --> | |
| <div class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Cost over time</div> | |
| <div class="rule"></div> | |
| <!-- Range controls --> | |
| <div class="chart-controls"> | |
| <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;"> | |
| <select id="chart-range-select" class="sub-filter"> | |
| <option value="days:7">Last 7 days</option> | |
| <option value="days:14">Last 14 days</option> | |
| <option value="days:21">Last 21 days</option> | |
| <option value="days:28" selected>Last 28 days</option> | |
| <option value="months:1">Last 1 month</option> | |
| <option value="months:3">Last 3 months</option> | |
| <option value="months:6">Last 6 months</option> | |
| <option value="months:9">Last 9 months</option> | |
| <option value="months:12">Last 12 months</option> | |
| <option value="custom:0">Custom range…</option> | |
| </select> | |
| <div class="chart-custom" id="chart-custom" style="display:none;"> | |
| <input type="date" id="chart-from" class="sub-search" style="width:140px; padding:7px 10px;" /> | |
| <span style="color:var(--muted); font-size:13px;">to</span> | |
| <input type="date" id="chart-to" class="sub-search" style="width:140px; padding:7px 10px;" /> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SVG line chart --> | |
| <div class="chart-wrap" id="cost-chart"> | |
| <svg id="cost-svg" class="cost-svg" viewBox="0 0 800 240" preserveAspectRatio="none"></svg> | |
| <div class="chart-tooltip" id="chart-tooltip"></div> | |
| </div> | |
| <div class="rule"></div> | |
| <div class="kicker"><span class="dot"></span> Cost by provider</div> | |
| <div id="provider-breakdown"></div> | |
| </div> | |
| <!-- Users --> | |
| <div class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Users</div> | |
| <div class="rule"></div> | |
| <div class="sub-toolbar"> | |
| <div class="sub-search-wrap"> | |
| <input type="text" id="users-search" class="sub-search" placeholder="Search by email…" autocomplete="off" /> | |
| </div> | |
| </div> | |
| <div id="users-noresult" style="display:none; text-align:center; padding:40px 0; color:var(--muted);"> | |
| <i class="ri-search-2-line" style="font-size:32px;"></i> | |
| <p style="margin-top:10px;">No users match your search.</p> | |
| </div> | |
| <div id="users-list"> | |
| <table class="sub-table" id="users-table"> | |
| <thead> | |
| <tr> | |
| <th>Email</th> | |
| <th>Role</th> | |
| <th>Reviews</th> | |
| <th>Cost (USD)</th> | |
| <th>Active</th> | |
| <th>Quota (rev / cost)</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="users-body"></tbody> | |
| </table> | |
| <div class="sub-pagination" id="users-pagination"></div> | |
| </div> | |
| </div> | |
| <!-- Submissions --> | |
| <div class="card fade-in"> | |
| <div class="kicker"><span class="dot"></span> Submissions</div> | |
| <div class="rule"></div> | |
| <div class="sub-toolbar" id="subs-toolbar"> | |
| <div class="sub-search-wrap"> | |
| <input type="text" id="filter-q" class="sub-search" placeholder="Search email or title…" autocomplete="off" /> | |
| </div> | |
| <select id="filter-status" class="sub-filter"> | |
| <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> | |
| </div> | |
| <div id="subs-noresult" style="display:none; text-align:center; padding:40px 0; color:var(--muted);"> | |
| <i class="ri-search-2-line" style="font-size:32px;"></i> | |
| <p style="margin-top:10px;">No submissions match your search.</p> | |
| </div> | |
| <div id="subs-list"> | |
| <table class="sub-table" id="subs-table"> | |
| <thead> | |
| <tr> | |
| <th>Title / file</th> | |
| <th>Email</th> | |
| <th>Submitted</th> | |
| <th>Status</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="subs-body"></tbody> | |
| </table> | |
| <div class="sub-pagination" id="subs-pagination"></div> | |
| </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=3"></script> | |
| <script type="module" src="js/nav-auth.js?v=4"></script> | |
| <script type="module" src="js/admin.js"></script> | |
| </body> | |
| </html> | |