Skip to content

Commit ee08350

Browse files
scooterthedevscooterthedev
committed
added Admin stats page, fixed the UI,
eat: add admin stats endpoint and UI for platform statistics and some audit log stuff
1 parent 9d724dd commit ee08350

11 files changed

Lines changed: 1717 additions & 334 deletions

File tree

‎client/src/App.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { AdminPage } from "./components/AdminPage.jsx";
1212
import { AdminReviewPage } from "./components/AdminReviewPage.jsx";
1313
import { AdminShopPage } from "./components/AdminShopPage.jsx";
1414
import { AdminShopOrdersPage } from "./components/AdminShopOrdersPage.jsx";
15+
import { AdminStatsPage } from "./components/AdminStatsPage.jsx";
1516
import { AdminUsersPage } from "./components/AdminUsersPage.jsx";
1617
import { UserAreaPage } from "./components/UserAreaPage.jsx";
1718

@@ -116,6 +117,9 @@ export default function App() {
116117
case "/admin":
117118
page = <AdminPage />;
118119
break;
120+
case "/admin/stats":
121+
page = <AdminStatsPage />;
122+
break;
119123
case "/admin/users":
120124
page = <AdminUsersPage />;
121125
break;

‎client/src/components/AdminPage.css‎

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,46 @@
33
inset: 0;
44
z-index: 0;
55
overflow-y: auto;
6-
}
7-
8-
.admin-page::before {
9-
content: "";
10-
position: fixed;
11-
inset: 0;
12-
background: linear-gradient(145deg, #0b1226 0%, #171f3e 48%, #2a1452 100%);
13-
z-index: -1;
6+
background: #73a5ca;
147
}
158

169
.admin-content {
1710
position: relative;
1811
max-width: 900px;
1912
margin: 0 auto;
20-
padding: 100px 2rem 4rem;
21-
font-family: Georgia, "Times New Roman", serif;
22-
color: #f0e6d2;
13+
padding: 80px 2rem 5rem;
14+
color: #e8f4ff;
2315
}
2416

2517
.admin-content h1 {
26-
font-size: 2.4rem;
27-
color: #8af4ff;
28-
text-shadow: 1px 2px 4px rgb(0 0 0 / 60%);
18+
font-size: clamp(2rem, 5vw, 3rem);
19+
color: #f5f5f5;
20+
text-shadow: 0 3px 0 #1b2a5a;
2921
margin: 0 0 2rem;
3022
text-align: center;
31-
font-style: italic;
3223
}
3324

3425
.admin-back-link {
3526
display: inline-flex;
3627
align-items: center;
3728
gap: 0.4rem;
38-
padding: 0.55rem 0.9rem;
39-
border: 2px solid #4ba2ff;
29+
padding: 0.5rem 1rem;
30+
border: 2px solid #4bb3ff;
4031
border-radius: 999px;
41-
background: rgb(9 18 42 / 82%);
42-
color: #98e8ff;
43-
font-family: Georgia, serif;
32+
background: rgba(27, 58, 122, 0.75);
33+
color: #e8f4ff;
4434
font-weight: 700;
4535
text-decoration: none;
36+
transition: background 0.15s, border-color 0.15s;
4637
}
4738

4839
.admin-back-link:hover {
49-
border-color: #a765ff;
50-
background: rgb(21 34 70 / 95%);
40+
background: rgba(27, 58, 122, 0.95);
41+
border-color: #f7cf57;
42+
color: #f7cf57;
5143
}
5244

45+
/* Navigation links grid */
5346
.admin-links {
5447
display: flex;
5548
flex-direction: column;
@@ -61,47 +54,46 @@
6154
display: flex;
6255
align-items: center;
6356
gap: 1rem;
64-
padding: 1.2rem 1.5rem;
65-
background: rgb(9 18 42 / 82%);
66-
border: 2px solid #4ba2ff;
67-
border-radius: 12px;
57+
padding: 1.1rem 1.4rem;
58+
background: rgba(27, 58, 122, 0.72);
59+
border: 3px solid #4bb3ff;
60+
border-radius: 14px;
6861
text-decoration: none;
69-
font-family: Georgia, serif;
70-
font-size: 1.3rem;
62+
font-size: 1.15rem;
7163
font-weight: 700;
72-
color: #98e8ff;
73-
transition: all 0.2s;
64+
color: #f5f5f5;
65+
transition: background 0.15s, border-color 0.15s, transform 0.15s;
7466
}
7567

7668
.admin-link:hover {
77-
background: rgb(21 34 70 / 95%);
78-
border-color: #a765ff;
69+
background: rgba(27, 58, 122, 0.95);
70+
border-color: #f7cf57;
7971
transform: translateX(4px);
8072
}
8173

8274
.admin-link-icon {
83-
font-size: 1.6rem;
75+
font-size: 1.5rem;
8476
}
8577

8678
.admin-link-desc {
8779
display: block;
88-
font-size: 0.85rem;
80+
font-size: 0.84rem;
8981
font-weight: 400;
90-
color: #c8d4ff;
91-
margin-top: 0.2rem;
82+
color: rgba(232, 244, 255, 0.7);
83+
margin-top: 0.15rem;
9284
}
9385

9486
.admin-super {
9587
margin-top: 0.75rem;
9688
display: flex;
9789
align-items: center;
9890
gap: 0.8rem;
99-
color: #f0e6d2;
91+
color: #e8f4ff;
10092
}
10193

10294
.admin-super-icon {
10395
font-size: 1.2rem;
104-
color: #a765ff;
96+
color: #f7cf57;
10597
}
10698

10799
.admin-super-copy {
@@ -110,49 +102,48 @@
110102
}
111103

112104
.admin-super-copy span {
113-
opacity: 0.85;
105+
opacity: 0.75;
114106
}
115107

116108
.admin-silly {
117109
margin-top: 3rem;
118110
text-align: center;
119-
opacity: 0.6;
111+
opacity: 0.55;
120112
}
121113

122114
.admin-silly pre {
123115
font-size: 0.8rem;
124116
line-height: 1;
125-
color: #c4b89a;
117+
color: #e8f4ff;
126118
}
127119

128120
.admin-silly .admin-emojis {
129-
font-size: 1.2rem;
121+
font-size: 1.1rem;
130122
margin: 0.5rem 0;
131123
}
132124

133125
.admin-silly .admin-tagline {
134-
font-family: Georgia, serif;
135-
font-size: 1.5rem;
136-
color: #79a6ff;
126+
font-size: 1.4rem;
127+
color: #f7cf57;
137128
font-style: italic;
138129
}
139130

140131
.admin-airtable {
141132
margin-top: 2.2rem;
142133
padding: 1.2rem;
143-
border: 2px solid #4ba2ff;
144-
border-radius: 12px;
145-
background: rgb(10 18 43 / 78%);
134+
border: 3px solid #4bb3ff;
135+
border-radius: 14px;
136+
background: rgba(27, 58, 122, 0.72);
146137
}
147138

148139
.admin-airtable h2 {
149140
margin: 0 0 0.5rem;
150-
color: #8af4ff;
141+
color: #f7cf57;
151142
}
152143

153144
.admin-airtable-subtitle {
154145
margin: 0 0 1rem;
155-
color: #c8d4ff;
146+
color: rgba(232, 244, 255, 0.75);
156147
}
157148

158149
.admin-airtable-sync-row {
@@ -162,9 +153,9 @@
162153
gap: 1rem;
163154
padding: 0.8rem;
164155
margin-bottom: 1rem;
165-
border: 1px solid #4ba2ff;
156+
border: 1px solid rgba(75, 179, 255, 0.35);
166157
border-radius: 10px;
167-
background: rgb(11 28 62 / 70%);
158+
background: rgba(12, 28, 72, 0.55);
168159
}
169160

170161
.admin-airtable-sync-row div {
@@ -173,21 +164,31 @@
173164
}
174165

175166
.admin-airtable-sync-row button {
176-
border: 1px solid #7f5cff;
177-
background: linear-gradient(135deg, #43c6ff, #8d4dff);
178-
color: #fff;
179-
border-radius: 999px;
167+
border: 3px dashed rgba(109, 104, 98, 0.85);
168+
background: linear-gradient(140deg, #ffe9bd 0%, #d8d2c8 100%);
169+
color: #50483f;
170+
border-radius: 8px;
180171
padding: 0.45rem 0.95rem;
172+
font-weight: 700;
181173
cursor: pointer;
174+
box-shadow: 0 4px 0 rgba(85, 81, 76, 0.4);
175+
transition: transform 0.1s, box-shadow 0.1s;
176+
}
177+
178+
.admin-airtable-sync-row button:hover {
179+
transform: translateY(-2px);
180+
box-shadow: 0 6px 0 rgba(85, 81, 76, 0.35);
182181
}
183182

184183
.admin-airtable-sync-row button:disabled {
185-
opacity: 0.7;
184+
opacity: 0.6;
186185
cursor: not-allowed;
186+
transform: none;
187+
box-shadow: 0 4px 0 rgba(85, 81, 76, 0.4);
187188
}
188189

189190
.admin-airtable-error {
190-
color: #ffb5b5;
191+
color: #ff8fab;
191192
}
192193

193194
.admin-airtable-success {
@@ -198,7 +199,7 @@
198199
margin-top: 1rem;
199200
padding: 0.8rem;
200201
border-radius: 10px;
201-
background: rgb(20 32 67 / 62%);
202+
background: rgba(12, 28, 72, 0.5);
202203
}
203204

204205
.admin-airtable-details p {
@@ -215,8 +216,9 @@
215216
margin: 0;
216217
padding: 0.75rem;
217218
overflow-x: auto;
218-
border: 1px solid #4ba2ff;
219+
border: 1px solid rgba(75, 179, 255, 0.35);
219220
border-radius: 8px;
220-
background: rgb(6 10 26 / 95%);
221-
color: #e9f4ff;
221+
background: rgba(8, 15, 42, 0.85);
222+
color: #e8f4ff;
223+
font-size: 0.82rem;
222224
}

0 commit comments

Comments
 (0)