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

package.json

@@ -23,6 +23,7 @@
     "bcryptjs": "^3.0.2",
     "croner": "^10.0.1",
     "hash-wasm": "^4.12.0",
+    "lucide-react": "^1.23.0",
     "next": "^16.2.9",
     "next-auth": "5.0.0-beta.31",
     "next-intl": "^4.13.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       hash-wasm:
         specifier: ^4.12.0
         version: 4.12.0
+      lucide-react:
+        specifier: ^1.23.0
+        version: 1.23.0([email protected])
       next:
         specifier: ^16.2.9
         version: 16.2.9([email protected]([email protected]))([email protected])
@@ -2125,6 +2128,11 @@ packages:
     resolution: {integrity: sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA==}
     engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   [email protected]:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -4012,6 +4020,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]):
+    dependencies:
+      react: 19.2.7
+
   [email protected]:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

src/app/admin/layout.tsx

@@ -4,76 +4,82 @@ import { AdminNavLink } from "@/components/admin/admin-nav-link";
 import { requireStaff } from "@/lib/admin/guard";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
+import {
+  LayoutDashboard, Newspaper, Tags, Compass, HelpCircle, Megaphone, SquarePen, Image,
+  Users, Ban, Globe, Shield, ClipboardList, Group, Key,
+  Store, ShoppingCart, Receipt, Ticket, CreditCard, Gem, Award, Trophy, Calendar,
+  Radio, History,
+  Terminal, Monitor, Bell, FileText, Filter, Wrench, Settings, DoorOpen, Mail, Palette, Cog,
+  ChevronDown, LogOut,
+} from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
-// Sidebar layout grouped like the original AtomCMS Filament panel (Content,
+const NAV_GROUPS: { label: string; icon: ReactNode; items: { href: string; label: string; icon: ReactNode }[] }[] = [
-// Users & access, Economy, Radio, System) instead of one flat list.
-const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[] = [
   {
-    label: "Overview",
+    label: "Overview", icon: <LayoutDashboard size={14} />,
-    items: [{ href: "/admin", label: "Dashboard" }],
+    items: [{ href: "/admin", label: "Dashboard", icon: <LayoutDashboard size={16} /> }],
   },
   {
-    label: "Content",
+    label: "Content", icon: <Newspaper size={14} />,
     items: [
-      { href: "/admin/articles", label: "Articles" },
+      { href: "/admin/articles", label: "Articles", icon: <Newspaper size={16} /> },
-      { href: "/admin/tags", label: "Tags" },
+      { href: "/admin/tags", label: "Tags", icon: <Tags size={16} /> },
-      { href: "/admin/navigation", label: "Navigator" },
+      { href: "/admin/navigation", label: "Navigator", icon: <Compass size={16} /> },
-      { href: "/admin/help-questions", label: "Help center" },
+      { href: "/admin/help-questions", label: "Help center", icon: <HelpCircle size={16} /> },
-      { href: "/admin/ads", label: "Advertisements" },
+      { href: "/admin/ads", label: "Advertisements", icon: <Megaphone size={16} /> },
-      { href: "/admin/writeable-boxes", label: "Writeable boxes" },
+      { href: "/admin/writeable-boxes", label: "Writeable boxes", icon: <SquarePen size={16} /> },
-      { href: "/admin/photos", label: "Photos" },
+      { href: "/admin/photos", label: "Photos", icon: <Image size={16} /> },
     ],
   },
   {
-    label: "Users & access",
+    label: "Users & access", icon: <Shield size={14} />,
     items: [
-      { href: "/admin/users", label: "Users" },
+      { href: "/admin/users", label: "Users", icon: <Users size={16} /> },
-      { href: "/admin/bans", label: "Bans" },
+      { href: "/admin/bans", label: "Bans", icon: <Ban size={16} /> },
-      { href: "/admin/ip", label: "IP management" },
+      { href: "/admin/ip", label: "IP management", icon: <Globe size={16} /> },
-      { href: "/admin/vpn", label: "VPN" },
+      { href: "/admin/vpn", label: "VPN", icon: <Shield size={16} /> },
-      { href: "/admin/applications", label: "Applications" },
+      { href: "/admin/applications", label: "Applications", icon: <ClipboardList size={16} /> },
-      { href: "/admin/teams", label: "Teams" },
+      { href: "/admin/teams", label: "Teams", icon: <Group size={16} /> },
-      { href: "/admin/permissions", label: "Permissions" },
+      { href: "/admin/permissions", label: "Permissions", icon: <Key size={16} /> },
     ],
   },
   {
-    label: "Economy",
+    label: "Economy", icon: <ShoppingCart size={14} />,
     items: [
-      { href: "/admin/catalog", label: "Catalog" },
+      { href: "/admin/catalog", label: "Catalog", icon: <Store size={16} /> },
-      { href: "/admin/shop", label: "Shop" },
+      { href: "/admin/shop", label: "Shop", icon: <ShoppingCart size={16} /> },
-      { href: "/admin/transactions", label: "Transactions" },
+      { href: "/admin/transactions", label: "Transactions", icon: <Receipt size={16} /> },
-      { href: "/admin/vouchers", label: "Vouchers" },
+      { href: "/admin/vouchers", label: "Vouchers", icon: <Ticket size={16} /> },
-      { href: "/admin/subscriptions", label: "Subscriptions" },
+      { href: "/admin/subscriptions", label: "Subscriptions", icon: <CreditCard size={16} /> },
-      { href: "/admin/rare-values", label: "Rare values" },
+      { href: "/admin/rare-values", label: "Rare values", icon: <Gem size={16} /> },
-      { href: "/admin/badges", label: "Badges" },
+      { href: "/admin/badges", label: "Badges", icon: <Award size={16} /> },
-      { href: "/admin/achievements", label: "Achievements" },
+      { href: "/admin/achievements", label: "Achievements", icon: <Trophy size={16} /> },
-      { href: "/admin/calendar", label: "Calendar" },
+      { href: "/admin/calendar", label: "Calendar", icon: <Calendar size={16} /> },
     ],
   },
   {
-    label: "Radio",
+    label: "Radio", icon: <Radio size={14} />,
     items: [
-      { href: "/admin/radio", label: "Radio" },
+      { href: "/admin/radio", label: "Radio", icon: <Radio size={16} /> },
-      { href: "/admin/radio/history", label: "Radio history" },
+      { href: "/admin/radio/history", label: "Radio history", icon: <History size={16} /> },
     ],
   },
   {
-    label: "System",
+    label: "System", icon: <Settings size={14} />,
     items: [
-      { href: "/admin/commandocentrum", label: "Commandocentrum" },
+      { href: "/admin/commandocentrum", label: "Commandocentrum", icon: <Terminal size={16} /> },
-      { href: "/admin/emulator", label: "Emulator" },
+      { href: "/admin/emulator", label: "Emulator", icon: <Monitor size={16} /> },
-      { href: "/admin/alerts", label: "Alerts" },
+      { href: "/admin/alerts", label: "Alerts", icon: <Bell size={16} /> },
-      { href: "/admin/logs", label: "Logs" },
+      { href: "/admin/logs", label: "Logs", icon: <FileText size={16} /> },
-      { href: "/admin/wordfilter", label: "Word filter" },
+      { href: "/admin/wordfilter", label: "Word filter", icon: <Filter size={16} /> },
-      { href: "/admin/maintenance", label: "Maintenance" },
+      { href: "/admin/maintenance", label: "Maintenance", icon: <Wrench size={16} /> },
-      { href: "/admin/housekeeping", label: "Housekeeping" },
+      { href: "/admin/housekeeping", label: "Housekeeping", icon: <Settings size={16} /> },
-      { href: "/admin/rooms", label: "Rooms" },
+      { href: "/admin/rooms", label: "Rooms", icon: <DoorOpen size={16} /> },
-      { href: "/admin/email-templates", label: "Email templates" },
+      { href: "/admin/email-templates", label: "Email templates", icon: <Mail size={16} /> },
-      { href: "/admin/theme", label: "Theme" },
+      { href: "/admin/theme", label: "Theme", icon: <Palette size={16} /> },
-      { href: "/admin/media", label: "Media" },
+      { href: "/admin/media", label: "Media", icon: <Image size={16} /> },
-      { href: "/admin/settings", label: "Settings" },
+      { href: "/admin/settings", label: "Settings", icon: <Cog size={16} /> },
     ],
   },
 ];
@@ -81,7 +87,6 @@ const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[]
 export default async function AdminLayout({ children }: { children: ReactNode }) {
   const staff = await requireStaff();
 
-  // Force staff 2FA before the admin panel (AtomCMS ForceStaffTwoFactorMiddleware).
   if (await siteSettings.getBool("force_staff_2fa", false)) {
     const u = await prisma.user
       .findUnique({ where: { id: staff.id }, select: { twoFactorConfirmedAt: true } })
@@ -89,49 +94,81 @@ export default async function AdminLayout({ children }: { children: ReactNode })
     if (!u?.twoFactorConfirmedAt) redirect("/settings/2fa?error=staffrequired");
   }
 
-  const initial = staff.username.charAt(0).toUpperCase();
-
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[232px_minmax(0,1fr)] gap-5 items-start">
+    <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--color-background)]">
-      <aside className="sticky top-4 self-start bg-[#2d2d44] text-[#e7e9f3] rounded-xl p-3.5 shadow-card max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <Sidebar staff={staff} />
-        <div className="flex items-center gap-2.5 px-1.5 pb-3.5 border-b border-white/10 mb-2">
+      <div className="flex flex-col min-w-0 p-5 lg:p-6">
-          <span
+        <Topbar staff={staff} />
-            className="flex-none w-[38px] h-[38px] rounded-lg grid place-items-center font-extrabold text-[#1a1a2e] bg-[var(--color-primary)]"
+        <section className="admin-page flex-1">{children}</section>
-            aria-hidden
-          >
-            {initial}
-          </span>
-          <div className="min-w-0">
-            <div className="font-bold text-sm leading-tight text-white truncate">{staff.username}</div>
-            <span className="inline-block mt-0.5 text-[0.66rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2 py-0.5">
-              rank {staff.rank}
-            </span>
-          </div>
-        </div>
-
-        <nav className="flex flex-col gap-0.5">
-          {NAV_GROUPS.map((group) => (
-            <div key={group.label} className="mt-2">
-              <span className="block text-[0.64rem] font-bold uppercase tracking-widest text-[rgba(231,233,243,0.42)] px-2.5 pb-1">
-                {group.label}
-              </span>
-              {group.items.map((item) => (
-                <AdminNavLink key={item.href} href={item.href} label={item.label} />
-              ))}
-            </div>
-          ))}
-        </nav>
-      </aside>
-
-      <div className="min-w-0">
-        <header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-xl px-4 py-3 mb-4 shadow-card">
-          <h2 className="m-0 text-base font-extrabold">Housekeeping</h2>
-          <span className="muted text-[0.8rem]">
-            Signed in as <strong>{staff.username}</strong>
-          </span>
-        </header>
-        <section className="admin-page">{children}</section>
       </div>
     </div>
   );
 }
+
+function Sidebar({ staff }: { staff: { id: number; username: string; rank: number } }) {
+  const initial = staff.username.charAt(0).toUpperCase();
+
+  return (
+    <aside className="sticky top-0 self-start h-screen bg-gradient-to-b from-[#1e1b2e] to-[#151226] text-[#c8cbe0] shadow-xl flex flex-col">
+      <div className="flex items-center gap-3 px-4 py-5 border-b border-white/[0.06]">
+        <span className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[#1a1a2e] bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-hover)] shadow-lg shadow-[var(--color-primary)]/20" aria-hidden>
+          {initial}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="font-semibold text-sm text-white truncate">{staff.username}</div>
+          <span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[rgba(200,203,224,0.5)]">rank {staff.rank}</span>
+        </div>
+      </div>
+
+      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
+        {NAV_GROUPS.map((group) => (
+          <div key={group.label}>
+            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[rgba(200,203,224,0.3)]">
+              {group.icon}
+              <span>{group.label}</span>
+            </div>
+            <div className="space-y-0.5">
+              {group.items.map((item) => (
+                <AdminNavLink key={item.href} href={item.href} icon={item.icon}>
+                  {item.label}
+                </AdminNavLink>
+              ))}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      <div className="px-3 py-3 border-t border-white/[0.06]">
+        <a
+          href="/"
+          className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[#c8cbe0]/60 text-xs font-medium hover:text-white hover:bg-white/5 transition-all duration-150 no-underline"
+        >
+          <LogOut size={14} />
+          <span>Back to site</span>
+        </a>
+      </div>
+    </aside>
+  );
+}
+
+function Topbar({ staff }: { staff: { id: number; username: string; rank: number } }) {
+  return (
+    <header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl px-5 py-3 mb-5 shadow-card">
+      <div className="flex items-center gap-3">
+        <h2 className="m-0 text-base font-extrabold text-[var(--color-text)]">Housekeeping</h2>
+        <span className="hidden sm:inline-block w-px h-5 bg-[var(--border)]" />
+        <span className="hidden sm:inline text-xs text-[var(--color-text-muted)]">
+          Hotel management panel
+        </span>
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="text-xs text-[var(--color-text-muted)]">
+          <strong className="text-[var(--color-text)]">{staff.username}</strong>
+        </span>
+        <span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
+          rank {staff.rank}
+        </span>
+      </div>
+    </header>
+  );
+}

src/app/admin/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
+import { Users, Newspaper, Ban, Database, Activity, ArrowRight } from "lucide-react";
 
 export const dynamic = "force-dynamic";
 
@@ -23,11 +24,9 @@ export default async function AdminDashboard() {
       prisma.ban.count({ where: { banExpire: { gt: Math.floor(Date.now() / 1000) } } }),
     ]);
   } catch {
-    // DB unavailable — show zeroed stats instead of a 500.
   }
   const dbOk = users >= 0;
 
-  // Users-by-rank breakdown (small inline bar chart, no chart library).
   const rankGroups = await prisma.user
     .groupBy({ by: ["rank"], _count: { _all: true }, orderBy: { rank: "desc" } })
     .catch(() => [] as Array<{ rank: number; _count: { _all: number } }>);
@@ -50,110 +49,76 @@ export default async function AdminDashboard() {
 
   return (
     <main>
-      <h1>Dashboard</h1>
+      <div className="flex items-center gap-3 mb-6">
-
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
+          <Activity size={20} className="text-[var(--color-primary)]" />
-        <StatusCard
+        </div>
-          label="Players online"
+        <div>
-          value={online}
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Dashboard</h1>
-          hint={dbOk ? `${users} accounts` : "DB unavailable"}
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Hotel overview &amp; live status</p>
-          state={dbOk ? "neutral" : "danger"}
+        </div>
-          icon="👤"
-        />
-        <StatusCard label="Articles" value={dbOk ? articles : "—"} icon="📰" />
-        <StatusCard
-          label="Active bans"
-          value={dbOk ? bans : "—"}
-          state={bans > 0 ? "warn" : "neutral"}
-          icon="🔧"
-        />
-        <StatusCard
-          label="Database"
-          value={dbOk ? "Connected" : "Down"}
-          state={dbOk ? "ok" : "danger"}
-          icon="🗄️"
-        />
       </div>
 
-      <section className="mt-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-        <h2 className="m-0 text-lg">Users by rank</h2>
+        <StatusCard label="Players online" value={online} hint={dbOk ? `${users} total accounts` : "DB unavailable"} state={dbOk ? "neutral" : "danger"} icon={<Users size={18} />} />
-        {rankCounts.length === 0 ? (
+        <StatusCard label="Articles" value={dbOk ? articles : "—"} state="neutral" icon={<Newspaper size={18} />} />
-          <p className="muted mt-3">
+        <StatusCard label="Active bans" value={dbOk ? bans : "—"} state={bans > 0 ? "warn" : "neutral"} icon={<Ban size={18} />} />
-            {dbOk ? "No accounts to break down yet." : "DB unavailable."}
+        <StatusCard label="Database" value={dbOk ? "Connected" : "Down"} state={dbOk ? "ok" : "danger"} icon={<Database size={18} />} />
-          </p>
+      </div>
-        ) : (
-          <div className="grid gap-2 mt-3">
-            {rankCounts.map((r) => {
-              const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
-              return (
-                <div
-                  key={r.rank}
-                  className="grid items-center gap-2.5"
-                  style={{ gridTemplateColumns: "5.5rem 1fr 3rem" }}
-                >
-                  <span className="text-[var(--color-text-muted)] text-[0.82rem] whitespace-nowrap">
-                    Rank {r.rank}
-                  </span>
-                  <div
-                    className="h-3.5 rounded-[var(--radius-sm)] overflow-hidden"
-                    style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
-                    role="img"
-                    aria-label={`Rank ${r.rank}: ${r.count} accounts`}
-                  >
-                    <div
-                      className="h-full rounded-[var(--radius-sm)]"
-                      style={{
-                        width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
-                        background: "var(--color-primary, #eeb425)",
-                      }}
-                    />
-                  </div>
-                  <strong className="text-[0.85rem] text-right">{r.count}</strong>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </section>
 
-      <section className="mt-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="flex items-baseline gap-3">
+        <section className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card">
-          <h2 className="m-0 text-lg">Recent staff activity</h2>
+          <h2 className="m-0 text-sm font-bold text-[var(--color-text)] mb-4">Users by rank</h2>
-          <Link href="/admin/commandocentrum" className="muted text-[0.82rem]">
+          {rankCounts.length === 0 ? (
-            View all →
+            <p className="text-xs text-[var(--color-text-muted)]">{dbOk ? "No accounts to break down yet." : "DB unavailable."}</p>
-          </Link>
+          ) : (
-        </div>
+            <div className="space-y-2.5">
-        {activity.length === 0 ? (
+              {rankCounts.map((r) => {
-          <p className="muted mt-3">No staff activity logged yet.</p>
+                const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
-        ) : (
+                return (
-          <table className="mt-3">
+                  <div key={r.rank} className="grid items-center gap-3" style={{ gridTemplateColumns: "5rem 1fr 2.5rem" }}>
-            <thead>
+                    <span className="text-xs font-medium text-[var(--color-text-muted)]">Rank {r.rank}</span>
-              <tr>
+                    <div className="h-3 rounded-[var(--radius-sm)] overflow-hidden bg-[var(--color-primary)]/10" role="img" aria-label={`Rank ${r.rank}: ${r.count} accounts`}>
-                <th>When</th>
+                      <div className="h-full rounded-[var(--radius-sm)] bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-500" style={{ width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%` }} />
-                <th>Staff</th>
+                    </div>
-                <th>Action</th>
+                    <strong className="text-xs text-right text-[var(--color-text-muted)]">{r.count}</strong>
-                <th>Description</th>
+                  </div>
-              </tr>
+                );
-            </thead>
+              })}
-            <tbody>
+            </div>
-              {activity.map((a) => (
+          )}
-                <tr key={String(a.id)}>
+        </section>
-                  <td className="muted whitespace-nowrap">
+
-                    {fromDate(a.createdAt)}
+        <section className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card">
-                  </td>
+          <div className="flex items-center justify-between mb-4">
-                  <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
+            <h2 className="m-0 text-sm font-bold text-[var(--color-text)]">Recent staff activity</h2>
-                  <td>
+            <Link href="/admin/commandocentrum" className="text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] flex items-center gap-1 no-underline">
-                    <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
+              View all <ArrowRight size={12} />
-                      {a.action}
+            </Link>
-                    </span>
+          </div>
-                  </td>
+          {activity.length === 0 ? (
-                  <td>{a.description}</td>
+            <p className="text-xs text-[var(--color-text-muted)]">No staff activity logged yet.</p>
-                </tr>
+          ) : (
+            <div className="space-y-0">
+              {activity.map((a, i) => (
+                <div key={String(a.id)} className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--border)]" : ""}`}>
+                  <div className="w-7 h-7 rounded-full bg-[var(--color-primary)]/10 grid place-items-center flex-none">
+                    <Activity size={12} className="text-[var(--color-primary)]" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium text-[var(--color-text)] truncate">{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</div>
+                    <div className="text-xs text-[var(--color-text-muted)] truncate">{a.description}</div>
+                  </div>
+                  <div className="text-right flex-none">
+                    <span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
+                    <div className="text-[0.6rem] text-[var(--color-text-muted)] mt-0.5">{fromDate(a.createdAt)}</div>
+                  </div>
+                </div>
               ))}
-            </tbody>
+            </div>
-          </table>
+          )}
-        )}
+        </section>
-      </section>
+      </div>
     </main>
   );
 }

src/app/admin/users/page.tsx

@@ -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">
+                        <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>
-                          <input type="hidden" name="userId" value={u.id} />
+                        <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>
-                          <input type="hidden" name="username" value={u.username} />
+                        <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>
-                          <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>
                       </div>
                     </td>
                   </tr>

src/app/globals.css

@@ -436,7 +436,7 @@ tbody tr:hover {
 }
 
 /* ── Admin panel (Housekeeping) ─────────────────────────────────
-   Page content wrapper — table card styling and h1 formatting. */
+   Page content wrapper — card-style tables and consistent spacing. */
 .admin-page main > h1:first-child,
 .admin-page > h1:first-child {
   margin-top: 0;
@@ -447,33 +447,35 @@ tbody tr:hover {
   border-bottom: 2px solid var(--border);
   margin-bottom: 0.85rem;
 }
-/* Carded tables — give the bare admin tables a surface + frame. */
 .admin-page table {
   background: var(--color-surface);
-  box-shadow: var(--shadow-card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
+  box-shadow: var(--shadow-card);
 }
 .admin-page thead th {
-  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
+  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
   color: var(--color-text-muted);
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  padding: 0.7rem 0.9rem;
 }
-.admin-page th,
 .admin-page td {
-  padding: 0.6rem 0.8rem;
+  padding: 0.7rem 0.9rem;
+  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+  font-size: 0.88rem;
 }
 .admin-page tbody tr {
   transition: background 0.12s ease;
 }
 .admin-page tbody tr:hover {
-  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
+  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
-}
-.admin-page tbody td {
-  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
 }
+.admin-page thead tr:first-child th:first-child { border-radius: 16px 0 0 0; }
+.admin-page thead tr:first-child th:last-child { border-radius: 0 16px 0 0; }
 /* ── Public design system (faithful to the atom theme) ──────────
    content-card = surface card with a primary-tinted header (icon +
    title + subtitle) and a padded body — the signature atom block. */

src/components/admin/admin-nav-link.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 
 /**
@@ -8,7 +9,7 @@ import { usePathname } from "next/navigation";
  * exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
  * active on /admin/radio/history) so the current section stays lit.
  */
-export function AdminNavLink({ href, label }: { href: string; label: string }) {
+export function AdminNavLink({ href, icon, children }: { href: string; icon?: ReactNode; children: ReactNode }) {
   const pathname = usePathname() ?? "";
   const active =
     href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
@@ -16,11 +17,18 @@ export function AdminNavLink({ href, label }: { href: string; label: string }) {
   return (
     <Link
       href={href}
-      className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[#c8cbe0] text-sm font-semibold no-underline transition-[background,color] duration-150 hover:bg-white/7 hover:text-white hover:no-underline ${
+      className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
-        active ? "bg-[var(--color-primary)] text-[#1a1a2e] shadow-[0_2px_8px_rgba(238,180,37,0.35)]" : ""
+        active
+          ? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
+          : "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
       }`}
     >
-      {label}
+      {icon ? (
+        <span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
+          {icon}
+        </span>
+      ) : null}
+      <span>{children}</span>
     </Link>
   );
 }

src/components/admin/confirm-action.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export function ConfirmAction({
+  message,
+  action,
+  userId,
+  className,
+  style,
+  children,
+}: {
+  message: string;
+  action: string;
+  userId: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <form action="/api/admin/users/actions" method="post" style={{ display: "inline-block" }}>
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="action" value={action} />
+      <button
+        type="submit"
+        className={className}
+        style={style}
+        onClick={(e) => {
+          if (!confirm(message)) e.preventDefault();
+        }}
+      >
+        {children}
+      </button>
+    </form>
+  );
+}

src/components/admin/dashboard.tsx

@@ -25,26 +25,20 @@ export function StatusCard({
   value: ReactNode;
   hint?: string;
   state?: State;
-  icon?: string;
+  icon?: ReactNode;
 }) {
-  const borderColor =
-    state === "ok" ? "border-l-green-600" :
-    state === "warn" ? "border-l-[var(--color-primary)]" :
-    state === "danger" ? "border-l-red-500" :
-    "border-l-[var(--color-text-muted)]";
-
   return (
-    <div className={`bg-[var(--color-surface)] border border-[var(--border)] border-l-4 ${borderColor} rounded-xl p-3.5 shadow-card`}>
+    <div className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
-      <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center justify-between gap-3 mb-3">
-        <span className="text-[0.72rem] font-bold uppercase tracking-wider text-[var(--color-text-muted)]">{label}</span>
+        <span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">{label}</span>
         {icon ? (
-          <span className="text-lg leading-none" aria-hidden>
+          <span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
             {icon}
           </span>
         ) : null}
       </div>
-      <div className="text-[1.7rem] font-extrabold leading-tight mt-1.5">{value}</div>
+      <div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
-      {hint ? <div className="text-[0.78rem] text-[var(--color-text-muted)] mt-1">{hint}</div> : null}
+      {hint ? <div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div> : null}
     </div>
   );
 }