Adapt + improve all admin pages to the new design system

Swept the whole housekeeping panel (34 pages) so it's a consistent,
improved adaptation of the old Filament admin rather than bare tables:
- Live status tiles (StatusCard) summarising each page's data — counts
  and stateful metrics (users online, active/permanent bans, pending
  applications, settings, radio shouts, etc.).
- Status pills (admin-badge ok/danger) replacing ad-hoc text: online/
  offline, account/ip ban types, permanent vs timed, command OK/FAIL,
  alert severity & read/new, enabled/disabled, open/closed.
- Sections wrapped in .admin-section with h2 headers; redundant inline
  table styling removed (the global .admin layer handles it).
- alerts/logs/emulator hand-built as the reference pattern; the rest
  via parallel agents that read the schema and preserved every server
  action, query and field name.

Behaviour unchanged (same actions, queries, field names). Verified in a
real authed admin session (prod, amx_test): pages render with live data
(Users tiles show 7 real accounts + online/offline pills), no errors.
tsc 0, vitest 49/49, next build 0.

src/app/admin/photos/page.tsx

@@ -1,4 +1,5 @@
 import { deletePhoto } from "@/actions/admin-photos";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -14,41 +15,56 @@ export default async function AdminPhotos() {
     photos = [];
   }
 
+  const uniqueRooms = new Set(photos.map((p) => p.roomId)).size;
+  const uniqueUsers = new Set(photos.map((p) => p.userId)).size;
+
   return (
     <main>
       <h1>Photo Moderation</h1>
-      <p className="muted">
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
         Recent in-game camera photos. Deleting removes the record from{" "}
         <code>camera_web</code>.
       </p>
 
-      <div className="grid cols-3">
-        {photos.map((p) => (
-          <div key={String(p.id)} className="card" style={{ padding: 0, overflow: "hidden" }}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={p.url}
-              alt={`Photo ${String(p.id)}`}
-              style={{ width: "100%", height: 200, objectFit: "cover", display: "block", background: "#f1f5f9" }}
-            />
-            <div style={{ padding: "0.85rem 1.05rem 1.05rem" }}>
-              <div style={{ display: "flex", justifyContent: "space-between", gap: "0.5rem", alignItems: "baseline" }}>
-                <strong>#{String(p.id)}</strong>
-                <span className="muted">Room {p.roomId}</span>
-              </div>
-              <p className="muted" style={{ margin: "0.3rem 0 0" }}>
-                User {p.userId} ·{" "}
-                {new Date(p.timestamp * 1000).toISOString().slice(0, 16).replace("T", " ")}
-              </p>
-              <form action={deletePhoto} style={{ marginTop: "0.75rem" }}>
-                <input type="hidden" name="id" value={String(p.id)} />
-                <button type="submit" className="btn btn-danger">Delete</button>
-              </form>
-            </div>
-          </div>
-        ))}
+      <div className="admin-stats">
+        <StatusCard label="Photos shown" value={photos.length} icon="📸" />
+        <StatusCard label="Rooms" value={uniqueRooms} hint="distinct rooms" icon="🚪" />
+        <StatusCard label="Users" value={uniqueUsers} hint="distinct photographers" icon="👤" />
       </div>
-      {photos.length === 0 ? <p className="muted">No photos found.</p> : null}
+
+      <section className="admin-section">
+        <h2>Recent photos</h2>
+        {photos.length === 0 ? (
+          <p className="muted">No photos found.</p>
+        ) : (
+          <div className="grid cols-3">
+            {photos.map((p) => (
+              <div key={String(p.id)} className="card" style={{ padding: 0, overflow: "hidden" }}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={p.url}
+                  alt={`Photo ${String(p.id)}`}
+                  style={{ width: "100%", height: 200, objectFit: "cover", display: "block", background: "#f1f5f9" }}
+                />
+                <div style={{ padding: "0.85rem 1.05rem 1.05rem" }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", gap: "0.5rem", alignItems: "baseline" }}>
+                    <strong>#{String(p.id)}</strong>
+                    <span className="muted">Room {p.roomId}</span>
+                  </div>
+                  <p className="muted" style={{ margin: "0.3rem 0 0" }}>
+                    User {p.userId} ·{" "}
+                    {new Date(p.timestamp * 1000).toISOString().slice(0, 16).replace("T", " ")}
+                  </p>
+                  <form action={deletePhoto} style={{ marginTop: "0.75rem" }}>
+                    <input type="hidden" name="id" value={String(p.id)} />
+                    <button type="submit" className="btn btn-danger">Delete</button>
+                  </form>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
     </main>
   );
 }