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

@@ -1,4 +1,5 @@
 import { createVoucher, deleteVoucher } from "@/actions/admin-vouchers";
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -40,14 +41,48 @@ export default async function AdminVouchers() {
     vouchers = [];
   }
 
+  const active = vouchers.filter((v) => {
+    const expired = v.expiresAt ? v.expiresAt.getTime() <= now : false;
+    const usedUp = v.maxUses > 0 && v.useCount >= v.maxUses;
+    return !expired && !usedUp;
+  }).length;
+  const expiredCount = vouchers.filter(
+    (v) => v.expiresAt && v.expiresAt.getTime() <= now,
+  ).length;
+  const usedUpCount = vouchers.filter(
+    (v) => v.maxUses > 0 && v.useCount >= v.maxUses,
+  ).length;
+
   return (
     <main>
       <h1>Shop Vouchers</h1>
-      <p className="muted">
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
         Codes redeemable on the website shop for a balance top-up. Each user can
         use a given voucher once, up to its max uses.
       </p>
 
+      <div className="admin-stats">
+        <StatusCard label="Vouchers" value={vouchers.length} icon="🎟️" />
+        <StatusCard
+          label="Active"
+          value={active}
+          state={active > 0 ? "ok" : "neutral"}
+          icon="✅"
+        />
+        <StatusCard
+          label="Used up"
+          value={usedUpCount}
+          state={usedUpCount > 0 ? "warn" : "neutral"}
+          icon="📉"
+        />
+        <StatusCard
+          label="Expired"
+          value={expiredCount}
+          state={expiredCount > 0 ? "danger" : "neutral"}
+          icon="⏰"
+        />
+      </div>
+
       <form action={createVoucher} className="card" style={{ marginBottom: "1.5rem" }}>
         <h3 style={{ marginTop: 0 }}>New voucher</h3>
         <div className="grid cols-2" style={{ marginBottom: "0.75rem" }}>
@@ -71,53 +106,61 @@ export default async function AdminVouchers() {
         <button type="submit" className="btn btn-primary">Create voucher</button>
       </form>
 
-      <div className="card">
-        <table>
-          <thead>
-            <tr>
-              <th>Code</th>
-              <th>Amount</th>
-              <th>Uses</th>
-              <th>Expires</th>
-              <th>Created</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {vouchers.map((v) => {
-              const expired = v.expiresAt ? v.expiresAt.getTime() <= now : false;
-              const usedUp = v.maxUses > 0 && v.useCount >= v.maxUses;
-              return (
-                <tr key={v.id.toString()}>
-                  <td>
-                    <code>{v.code}</code>
-                    {expired ? (
-                      <span className="muted"> · expired</span>
-                    ) : usedUp ? (
-                      <span className="muted"> · used up</span>
-                    ) : null}
-                  </td>
-                  <td>{v.amount}</td>
-                  <td>
-                    {v.useCount} / {v.maxUses}
-                  </td>
-                  <td className="muted">{fmtDate(v.expiresAt)}</td>
-                  <td className="muted">{fmtDate(v.createdAt)}</td>
-                  <td>
-                    <form action={deleteVoucher}>
-                      <input type="hidden" name="id" value={v.id.toString()} />
-                      <button type="submit" className="btn btn-danger">
-                        Delete
-                      </button>
-                    </form>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-        {vouchers.length === 0 ? <p className="muted">No vouchers yet.</p> : null}
-      </div>
+      <section className="admin-section">
+        <h2>Vouchers ({vouchers.length})</h2>
+        <div className="card">
+          <table>
+            <thead>
+              <tr>
+                <th>Code</th>
+                <th>Amount</th>
+                <th>Uses</th>
+                <th>Status</th>
+                <th>Expires</th>
+                <th>Created</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {vouchers.map((v) => {
+                const expired = v.expiresAt ? v.expiresAt.getTime() <= now : false;
+                const usedUp = v.maxUses > 0 && v.useCount >= v.maxUses;
+                return (
+                  <tr key={v.id.toString()}>
+                    <td>
+                      <code>{v.code}</code>
+                    </td>
+                    <td>{v.amount}</td>
+                    <td>
+                      {v.useCount} / {v.maxUses}
+                    </td>
+                    <td>
+                      {expired ? (
+                        <span className="admin-badge danger">Expired</span>
+                      ) : usedUp ? (
+                        <span className="admin-badge">Used up</span>
+                      ) : (
+                        <span className="admin-badge ok">Active</span>
+                      )}
+                    </td>
+                    <td className="muted">{fmtDate(v.expiresAt)}</td>
+                    <td className="muted">{fmtDate(v.createdAt)}</td>
+                    <td>
+                      <form action={deleteVoucher}>
+                        <input type="hidden" name="id" value={v.id.toString()} />
+                        <button type="submit" className="btn btn-danger">
+                          Delete
+                        </button>
+                      </form>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          {vouchers.length === 0 ? <p className="muted">No vouchers yet.</p> : null}
+        </div>
+      </section>
     </main>
   );
 }