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/bans/page.tsx

@@ -1,8 +1,13 @@
 import { createBan, liftBan } from "@/actions/admin-bans";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
+function fromUnix(ts: number): string {
+  return new Date(ts * 1000).toISOString().slice(0, 16).replace("T", " ");
+}
+
 export default async function AdminBans() {
   const now = Math.floor(Date.now() / 1000);
   let bans: Awaited<ReturnType<typeof prisma.ban.findMany>> = [];
@@ -16,9 +21,32 @@ export default async function AdminBans() {
     bans = [];
   }
 
+  // banExpire of 0 means permanent in the emulator schema.
+  const permanent = bans.filter((b) => b.banExpire === 0).length;
+  const accountBans = bans.filter((b) => b.type === "account").length;
+
   return (
     <main>
       <h1>Bans</h1>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        Active bans only (expiry in the future) · newest first.
+      </p>
+
+      <div className="admin-stats">
+        <StatusCard
+          label="Active bans"
+          value={bans.length}
+          state={bans.length > 0 ? "warn" : "ok"}
+          icon="🔨"
+        />
+        <StatusCard
+          label="Permanent"
+          value={permanent}
+          state={permanent > 0 ? "danger" : "neutral"}
+          icon="⛔"
+        />
+        <StatusCard label="Account bans" value={accountBans} icon="👤" />
+      </div>
 
       <form action={createBan} className="card" style={{ marginBottom: "1.5rem" }}>
         <h3 style={{ marginTop: 0 }}>New ban</h3>
@@ -32,38 +60,60 @@ export default async function AdminBans() {
           </select>
           <input name="hours" type="number" min={0} placeholder="Hours (0 = perm)" />
           <input name="reason" placeholder="Reason" style={{ flex: 1, minWidth: 160 }} />
-          <button type="submit">Ban</button>
+          <button type="submit" className="btn btn-danger">
+            Ban
+          </button>
         </div>
       </form>
 
-      <table style={{ width: "100%", borderCollapse: "collapse" }}>
-        <thead>
-          <tr style={{ textAlign: "left", color: "var(--muted)" }}>
-            <th>User ID</th>
-            <th>Type</th>
-            <th>Reason</th>
-            <th>Expires</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {bans.map((b) => (
-            <tr key={b.id} style={{ borderTop: "1px solid var(--border)" }}>
-              <td>{b.userId}</td>
-              <td>{b.type}</td>
-              <td>{b.banReason}</td>
-              <td className="muted">{new Date(b.banExpire * 1000).toISOString().slice(0, 16).replace("T", " ")}</td>
-              <td>
-                <form action={liftBan}>
-                  <input type="hidden" name="id" value={b.id} />
-                  <button type="submit">Lift</button>
-                </form>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {bans.length === 0 ? <p className="muted">No active bans.</p> : null}
+      <section className="admin-section">
+        <h2>Active bans ({bans.length})</h2>
+        {bans.length === 0 ? (
+          <p className="muted">No active bans.</p>
+        ) : (
+          <div style={{ overflowX: "auto" }}>
+            <table>
+              <thead>
+                <tr>
+                  <th>User ID</th>
+                  <th>Type</th>
+                  <th>Reason</th>
+                  <th>Expires</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {bans.map((b) => (
+                  <tr key={b.id}>
+                    <td>{b.userId}</td>
+                    <td>
+                      <span className="admin-badge">{b.type}</span>
+                    </td>
+                    <td>{b.banReason || "—"}</td>
+                    <td>
+                      {b.banExpire === 0 ? (
+                        <span className="admin-badge danger">permanent</span>
+                      ) : (
+                        <span className="muted" style={{ whiteSpace: "nowrap" }}>
+                          {fromUnix(b.banExpire)}
+                        </span>
+                      )}
+                    </td>
+                    <td>
+                      <form action={liftBan}>
+                        <input type="hidden" name="id" value={b.id} />
+                        <button type="submit" className="btn btn-outline">
+                          Lift
+                        </button>
+                      </form>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
     </main>
   );
 }