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

@@ -3,6 +3,7 @@ import {
   deletePermission,
   updatePermission,
 } from "@/actions/admin-permissions";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -29,14 +30,21 @@ export default async function AdminPermissions() {
     permissions = [];
   }
 
+  const highestRank = permissions.reduce((max, p) => Math.max(max, p.minRank), 0);
+
   return (
     <main>
       <h1>Permissions</h1>
-      <p className="muted">
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
         CMS-owned permissions (<code>website_permissions</code>). Each entry maps
         a permission name to the minimum rank allowed to use it.
       </p>
 
+      <div className="admin-stats">
+        <StatusCard label="Permissions" value={permissions.length} icon="🔑" />
+        <StatusCard label="Highest min rank" value={highestRank} icon="🎖️" />
+      </div>
+
       <form action={createPermission} className="card" style={{ marginBottom: "1.5rem" }}>
         <h3 style={{ marginTop: 0 }}>Add / overwrite permission</h3>
         <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -60,71 +68,76 @@ export default async function AdminPermissions() {
         </div>
       </form>
 
-      {permissions.length === 0 ? (
-        <p className="muted">No permissions found.</p>
-      ) : (
-        <table style={{ width: "100%", borderCollapse: "collapse" }}>
-          <thead>
-            <tr style={{ textAlign: "left", color: "var(--muted)" }}>
-              <th>ID</th>
-              <th>Permission</th>
-              <th>Min rank</th>
-              <th>Description</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {permissions.map((p) => (
-              <tr key={String(p.id)} style={{ borderTop: "1px solid var(--border)" }}>
-                <td>{String(p.id)}</td>
-                <td>
-                  <form
-                    id={`perm-${String(p.id)}`}
-                    action={updatePermission}
-                    style={{ display: "contents" }}
-                  >
-                    <input type="hidden" name="id" value={String(p.id)} />
-                    <input name="permission" defaultValue={p.permission} required maxLength={255} />
-                  </form>
-                </td>
-                <td>
-                  <input
-                    form={`perm-${String(p.id)}`}
-                    name="minRank"
-                    type="number"
-                    min={0}
-                    defaultValue={p.minRank}
-                    style={{ width: 90 }}
-                  />
-                </td>
-                <td>
-                  <input
-                    form={`perm-${String(p.id)}`}
-                    name="description"
-                    defaultValue={p.description ?? ""}
-                    style={{ width: "100%" }}
-                  />
-                </td>
-                <td style={{ display: "flex", gap: "0.5rem" }}>
-                  <button
-                    type="submit"
-                    form={`perm-${String(p.id)}`}
-                    className="btn btn-primary"
-                  >
-                    Save
-                  </button>
-                  <form action={deletePermission}>
-                    <input type="hidden" name="id" value={String(p.id)} />
-                    <button type="submit" className="btn btn-danger">
-                      Delete
-                    </button>
-                  </form>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
+      <section className="admin-section">
+        <h2>Permissions ({permissions.length})</h2>
+        {permissions.length === 0 ? (
+          <p className="muted">No permissions found.</p>
+        ) : (
+          <div style={{ overflowX: "auto" }}>
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Permission</th>
+                  <th>Min rank</th>
+                  <th>Description</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {permissions.map((p) => (
+                  <tr key={String(p.id)}>
+                    <td className="muted">{String(p.id)}</td>
+                    <td>
+                      <form
+                        id={`perm-${String(p.id)}`}
+                        action={updatePermission}
+                        style={{ display: "contents" }}
+                      >
+                        <input type="hidden" name="id" value={String(p.id)} />
+                        <input name="permission" defaultValue={p.permission} required maxLength={255} />
+                      </form>
+                    </td>
+                    <td>
+                      <input
+                        form={`perm-${String(p.id)}`}
+                        name="minRank"
+                        type="number"
+                        min={0}
+                        defaultValue={p.minRank}
+                        style={{ width: 90 }}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        form={`perm-${String(p.id)}`}
+                        name="description"
+                        defaultValue={p.description ?? ""}
+                        style={{ width: "100%" }}
+                      />
+                    </td>
+                    <td style={{ display: "flex", gap: "0.5rem" }}>
+                      <button
+                        type="submit"
+                        form={`perm-${String(p.id)}`}
+                        className="btn btn-primary"
+                      >
+                        Save
+                      </button>
+                      <form action={deletePermission}>
+                        <input type="hidden" name="id" value={String(p.id)} />
+                        <button type="submit" className="btn btn-danger">
+                          Delete
+                        </button>
+                      </form>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
     </main>
   );
 }