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

@@ -1,3 +1,4 @@
+import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -39,36 +40,64 @@ export default async function AdminSubscriptions() {
     active = [];
   }
 
+  // "Expiring soon" = within the next 7 days.
+  const soonCutoff = now + 7 * 24 * 60 * 60;
+  const expiringSoon = active.filter((s) => s.expiresAt <= soonCutoff).length;
+  const types = new Set(active.map((s) => s.subscriptionType ?? "—")).size;
+
   return (
     <main>
       <h1>Subscriptions</h1>
-      <p className="muted" style={{ marginTop: "-0.25rem", marginBottom: "1rem" }}>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
         Active Habbo Club / VIP subscriptions (expiry &gt; now). Read-only.
       </p>
 
-      <div className="card">
-        <table>
-          <thead>
-            <tr>
-              <th>Sub ID</th>
-              <th>User ID</th>
-              <th>Type</th>
-              <th>Expires</th>
-            </tr>
-          </thead>
-          <tbody>
-            {active.map((s) => (
-              <tr key={s.id}>
-                <td>{s.id}</td>
-                <td>{s.userId ?? "—"}</td>
-                <td>{s.subscriptionType ?? "—"}</td>
-                <td className="muted">{fmt(s.expiresAt)}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        {active.length === 0 ? <p className="muted">No active subscriptions.</p> : null}
+      <div className="admin-stats">
+        <StatusCard label="Active subs" value={active.length} icon="⭐" />
+        <StatusCard label="Types" value={types} icon="🏷️" />
+        <StatusCard
+          label="Expiring ≤ 7d"
+          value={expiringSoon}
+          state={expiringSoon > 0 ? "warn" : "ok"}
+          icon="⏳"
+        />
       </div>
+
+      <section className="admin-section">
+        <h2>Active subscriptions ({active.length})</h2>
+        <div className="card">
+          <table>
+            <thead>
+              <tr>
+                <th>Sub ID</th>
+                <th>User ID</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Expires</th>
+              </tr>
+            </thead>
+            <tbody>
+              {active.map((s) => {
+                const soon = s.expiresAt <= soonCutoff;
+                return (
+                  <tr key={s.id}>
+                    <td className="muted">{s.id}</td>
+                    <td>{s.userId ?? "—"}</td>
+                    <td>{s.subscriptionType ?? "—"}</td>
+                    <td>
+                      <span className={`admin-badge ${soon ? "" : "ok"}`}>
+                        {soon ? "Expiring" : "Active"}
+                      </span>
+                    </td>
+                    <td className="muted">{fmt(s.expiresAt)}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          {active.length === 0 ? <p className="muted">No active subscriptions.</p> : null}
+        </div>
+      </section>
     </main>
   );
 }