feat: redesign admin panel with Lucide icons and modern styling

- Add lucide-react for SVG icons throughout the admin
- Redesign sidebar with gradient background, icons per nav item, and sticky layout
- Redesign topbar with cleaner user info display
- Redesign dashboard with icon-backed stat cards, gradient progress bars, activity feed
- Update AdminNavLink with icon support and new active state styling
- Improve table styling in admin-page CSS (rounded corners, hover, spacing)
- Clean up unused admin CSS
This commit is contained in:
remco committed 2026-07-02 15:33:23 +02:00
1 parent bd299be55d
commit cf287dbc8b
9 files changed
+278 -261

No files matched your search

+4 -42
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { ConfirmAction } from "@/components/admin/confirm-action";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -97,48 +98,9 @@ export default async function AdminUsers({
<td>
<div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", justifyContent: "flex-start" }}>
<Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Edit</Link>
<form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
<input type="hidden" name="userId" value={u.id} />
<input type="hidden" name="username" value={u.username} />
<button
type="submit"
name="action"
value="set_rank"
className="btn btn-outline"
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
onClick={(e) => {
if (!confirm(`Set rank for ${u.username}?`)) e.preventDefault();
}}
>Set Rank</button>
</form>
<form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
<input type="hidden" name="userId" value={u.id} />
<input type="hidden" name="username" value={u.username} />
<button
type="submit"
name="action"
value="disconnect"
className="btn btn-danger"
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
onClick={(e) => {
if (!confirm(`Disconnect ${u.username}?`)) e.preventDefault();
}}
>Disconnect</button>
</form>
<form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
<input type="hidden" name="userId" value={u.id} />
<input type="hidden" name="username" value={u.username} />
<button
type="submit"
name="action"
value="alert"
className="btn btn-primary"
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
onClick={(e) => {
if (!confirm(`Send alert to ${u.username}?`)) e.preventDefault();
}}
>Alert</button>
</form>
<ConfirmAction message={`Set rank for ${u.username}?`} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Set Rank</ConfirmAction>
<ConfirmAction message={`Disconnect ${u.username}?`} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Disconnect</ConfirmAction>
<ConfirmAction message={`Send alert to ${u.username}?`} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Alert</ConfirmAction>
</div>
</td>
</tr>