Spaces:
Paused
Paused
File size: 6,012 Bytes
73aafbd 1bca78f 73aafbd 2a93377 73aafbd 2a93377 73aafbd 2a93377 73aafbd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <!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>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>
|