Build a live status dashboard for Commandocentrum + admin home

The Commandocentrum (AtomCMS's verification/diagnostics hub) was just RCON
buttons + an error table. Rebuilt it as a real status dashboard, and gave
the admin home the same treatment, with reusable StatusCard / DiagnosticRow
/ InfoItem components and a scoped CSS layer:

Commandocentrum now shows:
- Live status tiles: players online, emulator (RCON ping), database,
  emulator error count — colour-accented by state.
- Server info: Node version, platform, app/host uptime, heap/RSS, load,
  CPUs (from node:os / process).
- System diagnostics: DB, emulator RCON, RCON config, APP_KEY (2FA),
  SMTP, maintenance mode — each with an ok/warn/error dot + pill.
- Existing RCON controls + hotel alert, a recent staff-activity feed
  (staff_activities, now a real table), and the emulator error log.

Admin home: four status tiles (online/articles/active bans/database) +
recent staff activity, replacing the three plain count cards.

Verified in a real authed admin session (prod, amx_test): both pages
render the tiles/diagnostics with live data (Node v22, real memory/uptime,
APP_KEY/SMTP correctly flagged WARN). tsc 0, vitest 49/49, next build 0.

src/app/admin/page.tsx

@@ -1,40 +1,105 @@
+import Link from "next/link";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
+function fromDate(d: Date | null | undefined): string {
+  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
+}
+
 export default async function AdminDashboard() {
-  let users = 0;
+  let users = -1;
   let online = 0;
   let articles = 0;
+  let bans = 0;
   try {
-    [users, online, articles] = await Promise.all([
+    [users, online, articles, bans] = await Promise.all([
       prisma.user.count(),
       prisma.user.count({ where: { online: "1" } }),
       prisma.websiteArticles.count(),
+      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;
 
-  const stats = [
-    { label: "Users", value: users },
-    { label: "Online now", value: online },
-    { label: "Articles", value: articles },
-  ];
+  const activity = await prisma.staffActivities
+    .findMany({ orderBy: { createdAt: "desc" }, take: 8 })
+    .catch(() => [] as Awaited<ReturnType<typeof prisma.staffActivities.findMany>>);
+  const staffIds = Array.from(new Set(activity.map((a) => Number(a.userId)))).filter((n) => n > 0);
+  let nameById = new Map<number, string>();
+  if (staffIds.length) {
+    const u = await prisma.user
+      .findMany({ where: { id: { in: staffIds } }, select: { id: true, username: true } })
+      .catch(() => []);
+    nameById = new Map(u.map((x) => [x.id, x.username]));
+  }
 
   return (
     <main>
       <h1>Dashboard</h1>
-      <div className="grid cols-2">
-        {stats.map((s) => (
-          <div key={s.label} className="card">
-            <h2 style={{ margin: 0 }}>{s.value}</h2>
-            <p className="muted" style={{ margin: 0 }}>
-              {s.label}
-            </p>
-          </div>
-        ))}
+
+      <div className="admin-stats">
+        <StatusCard
+          label="Players online"
+          value={online}
+          hint={dbOk ? `${users} accounts` : "DB unavailable"}
+          state={dbOk ? "neutral" : "danger"}
+          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="admin-section">
+        <div style={{ display: "flex", alignItems: "baseline", gap: "0.75rem" }}>
+          <h2 style={{ margin: 0 }}>Recent staff activity</h2>
+          <Link href="/admin/commandocentrum" className="muted" style={{ fontSize: "0.82rem" }}>
+            View all →
+          </Link>
+        </div>
+        {activity.length === 0 ? (
+          <p className="muted">No staff activity logged yet.</p>
+        ) : (
+          <table style={{ marginTop: "0.7rem" }}>
+            <thead>
+              <tr>
+                <th>When</th>
+                <th>Staff</th>
+                <th>Action</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {activity.map((a) => (
+                <tr key={String(a.id)}>
+                  <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                    {fromDate(a.createdAt)}
+                  </td>
+                  <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
+                  <td>
+                    <span className="admin-badge">{a.action}</span>
+                  </td>
+                  <td>{a.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </section>
     </main>
   );
 }