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

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { StatusCard } from "@/components/admin/dashboard";
 import { requireStaff } from "@/lib/admin/guard";
 import { prisma } from "@/lib/prisma";
 
@@ -15,6 +16,23 @@ const PER_PAGE = 25;
 
 type Txn = Awaited<ReturnType<typeof prisma.websitePaypalTransactions.findMany>>[number];
 
+const PAID_STATUS = new Set(["completed", "paid", "success", "approved"]);
+const FAILED_STATUS = new Set([
+  "failed",
+  "denied",
+  "refunded",
+  "cancelled",
+  "canceled",
+]);
+
+function statusState(status: string | null | undefined): "ok" | "danger" | undefined {
+  if (!status) return undefined;
+  const s = status.toLowerCase();
+  if (PAID_STATUS.has(s)) return "ok";
+  if (FAILED_STATUS.has(s)) return "danger";
+  return undefined;
+}
+
 function fromDate(d: Date | null | undefined): string {
   return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
 }
@@ -65,6 +83,9 @@ export default async function AdminTransactions({
 
   const pages = Math.max(1, Math.ceil(total / PER_PAGE));
 
+  const pagePaid = transactions.filter((t) => statusState(t.status) === "ok").length;
+  const pageFailed = transactions.filter((t) => statusState(t.status) === "danger").length;
+
   return (
     <main>
       <h1>Transactions</h1>
@@ -72,14 +93,31 @@ export default async function AdminTransactions({
         Read-only · PayPal / top-up transactions recorded by the CMS, newest first.
       </p>
 
-      <section className="card">
+      <div className="admin-stats">
+        <StatusCard label="Total transactions" value={total} icon="🧾" />
+        <StatusCard
+          label="Paid (this page)"
+          value={pagePaid}
+          state={pagePaid > 0 ? "ok" : "neutral"}
+          icon="💳"
+        />
+        <StatusCard
+          label="Failed (this page)"
+          value={pageFailed}
+          state={pageFailed > 0 ? "danger" : "neutral"}
+          icon="⚠️"
+        />
+      </div>
+
+      <section className="admin-section">
+        <h2>Transactions ({total})</h2>
         {transactions.length === 0 ? (
           <p className="muted">No transactions.</p>
         ) : (
           <div style={{ overflowX: "auto" }}>
-            <table style={{ width: "100%", borderCollapse: "collapse" }}>
+            <table>
               <thead>
-                <tr style={{ textAlign: "left", color: "var(--muted)" }}>
+                <tr>
                   <th>ID</th>
                   <th>Payer</th>
                   <th>Amount</th>
@@ -90,21 +128,34 @@ export default async function AdminTransactions({
                 </tr>
               </thead>
               <tbody>
-                {transactions.map((t) => (
-                  <tr key={String(t.id)} style={{ borderTop: "1px solid var(--border)" }}>
-                    <td>{String(t.id)}</td>
-                    <td>
-                      <Link href={`/admin/users/${t.userId}`}>
-                        {names.get(t.userId) ?? `#${t.userId}`}
-                      </Link>
-                    </td>
-                    <td>{formatAmount(t.amount, t.currency)}</td>
-                    <td>{t.description ?? "—"}</td>
-                    <td>{t.status ?? "—"}</td>
-                    <td className="muted">{t.transactionId}</td>
-                    <td className="muted">{fromDate(t.createdAt)}</td>
-                  </tr>
-                ))}
+                {transactions.map((t) => {
+                  const state = statusState(t.status);
+                  return (
+                    <tr key={String(t.id)}>
+                      <td className="muted">{String(t.id)}</td>
+                      <td>
+                        <Link href={`/admin/users/${t.userId}`}>
+                          {names.get(t.userId) ?? `#${t.userId}`}
+                        </Link>
+                      </td>
+                      <td>{formatAmount(t.amount, t.currency)}</td>
+                      <td>{t.description ?? "—"}</td>
+                      <td>
+                        {t.status ? (
+                          <span
+                            className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}
+                          >
+                            {t.status}
+                          </span>
+                        ) : (
+                          <span className="muted">—</span>
+                        )}
+                      </td>
+                      <td className="muted">{t.transactionId}</td>
+                      <td className="muted">{fromDate(t.createdAt)}</td>
+                    </tr>
+                  );
+                })}
               </tbody>
             </table>
           </div>