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

@@ -4,6 +4,7 @@ import {
   deleteBlacklist,
   deleteWhitelist,
 } from "@/actions/admin-ip";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -16,7 +17,7 @@ type IpRow = {
 };
 
 function formatDate(d: Date | null): string {
-  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
+  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
 }
 
 export default async function AdminIp() {
@@ -44,10 +45,28 @@ export default async function AdminIp() {
   return (
     <main>
       <h1>IP Management</h1>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        Allow or block IP addresses (and ASNs) at the website edge.
+      </p>
+
+      <div className="admin-stats">
+        <StatusCard
+          label="Whitelisted"
+          value={whitelist.length}
+          state={whitelist.length > 0 ? "ok" : "neutral"}
+          icon="✅"
+        />
+        <StatusCard
+          label="Blacklisted"
+          value={blacklist.length}
+          state={blacklist.length > 0 ? "danger" : "neutral"}
+          icon="🚫"
+        />
+      </div>
 
       <div className="grid cols-2">
-        {/* ── Whitelist ─────────────────────────────── */}
-        <section>
+        {/* ── Whitelist ──────────────────── */}
+        <section className="admin-section">
           <h2>Whitelist</h2>
 
           <form action={addWhitelist} className="card" style={{ marginBottom: "1rem" }}>
@@ -65,38 +84,43 @@ export default async function AdminIp() {
             </div>
           </form>
 
-          <table>
-            <thead>
-              <tr>
-                <th>IP</th>
-                <th>ASN</th>
-                <th>Added</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {whitelist.map((w) => (
-                <tr key={String(w.id)}>
-                  <td>{w.ipAddress}</td>
-                  <td className="muted">{w.asn ?? "—"}</td>
-                  <td className="muted">{formatDate(w.createdAt)}</td>
-                  <td>
-                    <form action={deleteWhitelist}>
-                      <input type="hidden" name="id" value={String(w.id)} />
-                      <button type="submit" className="btn btn-danger">
-                        Remove
-                      </button>
-                    </form>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          {whitelist.length === 0 ? <p className="muted">No whitelisted IPs.</p> : null}
+          {whitelist.length === 0 ? (
+            <p className="muted">No whitelisted IPs.</p>
+          ) : (
+            <div style={{ overflowX: "auto" }}>
+              <table>
+                <thead>
+                  <tr>
+                    <th>IP</th>
+                    <th>ASN</th>
+                    <th>Added</th>
+                    <th />
+                  </tr>
+                </thead>
+                <tbody>
+                  {whitelist.map((w) => (
+                    <tr key={String(w.id)}>
+                      <td>{w.ipAddress}</td>
+                      <td className="muted">{w.asn ?? "—"}</td>
+                      <td className="muted">{formatDate(w.createdAt)}</td>
+                      <td>
+                        <form action={deleteWhitelist}>
+                          <input type="hidden" name="id" value={String(w.id)} />
+                          <button type="submit" className="btn btn-danger">
+                            Remove
+                          </button>
+                        </form>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
         </section>
 
-        {/* ── Blacklist ─────────────────────────────── */}
-        <section>
+        {/* ── Blacklist ──────────────────── */}
+        <section className="admin-section">
           <h2>Blacklist</h2>
 
           <form action={addBlacklist} className="card" style={{ marginBottom: "1rem" }}>
@@ -114,34 +138,39 @@ export default async function AdminIp() {
             </div>
           </form>
 
-          <table>
-            <thead>
-              <tr>
-                <th>IP</th>
-                <th>ASN</th>
-                <th>Added</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {blacklist.map((b) => (
-                <tr key={String(b.id)}>
-                  <td>{b.ipAddress}</td>
-                  <td className="muted">{b.asn ?? "—"}</td>
-                  <td className="muted">{formatDate(b.createdAt)}</td>
-                  <td>
-                    <form action={deleteBlacklist}>
-                      <input type="hidden" name="id" value={String(b.id)} />
-                      <button type="submit" className="btn btn-danger">
-                        Remove
-                      </button>
-                    </form>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          {blacklist.length === 0 ? <p className="muted">No blacklisted IPs.</p> : null}
+          {blacklist.length === 0 ? (
+            <p className="muted">No blacklisted IPs.</p>
+          ) : (
+            <div style={{ overflowX: "auto" }}>
+              <table>
+                <thead>
+                  <tr>
+                    <th>IP</th>
+                    <th>ASN</th>
+                    <th>Added</th>
+                    <th />
+                  </tr>
+                </thead>
+                <tbody>
+                  {blacklist.map((b) => (
+                    <tr key={String(b.id)}>
+                      <td>{b.ipAddress}</td>
+                      <td className="muted">{b.asn ?? "—"}</td>
+                      <td className="muted">{formatDate(b.createdAt)}</td>
+                      <td>
+                        <form action={deleteBlacklist}>
+                          <input type="hidden" name="id" value={String(b.id)} />
+                          <button type="submit" className="btn btn-danger">
+                            Remove
+                          </button>
+                        </form>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
         </section>
       </div>
     </main>