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

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -39,58 +40,83 @@ export default async function AdminCatalog() {
   const captionById = new Map<number, string>();
   for (const p of pages) captionById.set(p.id, p.caption);
 
+  const visibleCount = pages.filter(
+    (p) => p.visible === "1" && p.enabled === "1",
+  ).length;
+  const hiddenCount = pages.length - visibleCount;
+  const rootCount = pages.filter((p) => p.parentId <= 0).length;
+
   return (
     <main>
       <h1>Catalog</h1>
-      <p className="muted">Browse catalog pages and the items they contain. Read-only.</p>
-
-      {pages.length === 0 ? (
-        <p className="muted">No catalog pages found.</p>
-      ) : (
-        <table style={{ width: "100%", borderCollapse: "collapse" }}>
-          <thead>
-            <tr style={{ textAlign: "left", color: "var(--muted)" }}>
-              <th>ID</th>
-              <th>Caption</th>
-              <th>Parent</th>
-              <th>Layout</th>
-              <th>Min rank</th>
-              <th>Order</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {pages.map((p) => {
-              const parentName =
-                p.parentId > 0 ? captionById.get(p.parentId) : null;
-              const hidden = p.visible !== "1" || p.enabled !== "1";
-              return (
-                <tr key={p.id} style={{ borderTop: "1px solid var(--border)" }}>
-                  <td>{p.id}</td>
-                  <td>
-                    <Link href={`/admin/catalog/${p.id}`}>{p.caption}</Link>
-                  </td>
-                  <td className="muted">
-                    {p.parentId <= 0
-                      ? "—"
-                      : parentName
-                        ? `${parentName} (#${p.parentId})`
-                        : `#${p.parentId}`}
-                  </td>
-                  <td className="muted">{p.pageLayout}</td>
-                  <td>{p.minRank}</td>
-                  <td>{p.orderNum}</td>
-                  <td className="muted">{hidden ? "Hidden" : "Visible"}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      )}
-
-      <p className="muted" style={{ marginTop: "1rem" }}>
-        {pages.length} page{pages.length === 1 ? "" : "s"}
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        Browse catalog pages and the items they contain. Read-only.
       </p>
+
+      <div className="admin-stats">
+        <StatusCard label="Pages" value={pages.length} icon="📚" />
+        <StatusCard label="Visible" value={visibleCount} state="ok" icon="👁️" />
+        <StatusCard
+          label="Hidden"
+          value={hiddenCount}
+          state={hiddenCount > 0 ? "warn" : "neutral"}
+          icon="🚫"
+        />
+        <StatusCard label="Root pages" value={rootCount} icon="🗂️" />
+      </div>
+
+      <section className="admin-section">
+        <h2>Pages ({pages.length})</h2>
+        {pages.length === 0 ? (
+          <p className="muted">No catalog pages found.</p>
+        ) : (
+          <div style={{ overflowX: "auto" }}>
+            <table>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Caption</th>
+                  <th>Parent</th>
+                  <th>Layout</th>
+                  <th>Min rank</th>
+                  <th>Order</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {pages.map((p) => {
+                  const parentName =
+                    p.parentId > 0 ? captionById.get(p.parentId) : null;
+                  const hidden = p.visible !== "1" || p.enabled !== "1";
+                  return (
+                    <tr key={p.id}>
+                      <td className="muted">{p.id}</td>
+                      <td>
+                        <Link href={`/admin/catalog/${p.id}`}>{p.caption}</Link>
+                      </td>
+                      <td className="muted">
+                        {p.parentId <= 0
+                          ? "—"
+                          : parentName
+                            ? `${parentName} (#${p.parentId})`
+                            : `#${p.parentId}`}
+                      </td>
+                      <td className="muted">{p.pageLayout}</td>
+                      <td>{p.minRank}</td>
+                      <td>{p.orderNum}</td>
+                      <td>
+                        <span className={`admin-badge ${hidden ? "danger" : "ok"}`}>
+                          {hidden ? "Hidden" : "Visible"}
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
     </main>
   );
 }