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

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { prisma } from '@/lib/prisma';
+import { StatusCard } from '@/components/admin/dashboard';
 
 export const dynamic = 'force-dynamic';
 
@@ -64,6 +65,13 @@ export default async function AdminRadioHistoryPage() {
     history = [];
   }
 
+  const liveCount = history.filter((h) => !h.endedAt).length;
+  const peakListeners = history.reduce(
+    (max, h) => (h.listenersCount > max ? h.listenersCount : max),
+    0,
+  );
+  const uniqueDjs = new Set(history.map((h) => String(h.userId))).size;
+
   return (
     <main>
       <nav className="muted" style={{ marginBottom: '0.5rem' }}>
@@ -75,7 +83,7 @@ export default async function AdminRadioHistoryPage() {
       </nav>
 
       <h1>Radio Play History</h1>
-      <p className="muted">
+      <p className="muted" style={{ marginTop: '-0.4rem' }}>
         Past DJ shows and airtime (<code>radio_history</code>), most recent first.
         Read-only log of who was on air, when, and how many listeners tuned in.
       </p>
@@ -86,40 +94,63 @@ export default async function AdminRadioHistoryPage() {
             Could not load radio history (database unavailable).
           </p>
         </div>
+      ) : (
+        <div className="admin-stats">
+          <StatusCard label="Shows logged" value={history.length} icon="🎙️" />
+          <StatusCard
+            label="On air now"
+            value={liveCount}
+            state={liveCount > 0 ? 'ok' : 'neutral'}
+            icon="🔴"
+          />
+          <StatusCard label="Unique DJs" value={uniqueDjs} icon="🧑‍🎤" />
+          <StatusCard label="Peak listeners" value={peakListeners} icon="👥" />
+        </div>
+      )}
+
+      {!dbError && history.length === 0 ? (
+        <p className="muted">No radio history recorded yet.</p>
       ) : null}
 
-      {history.length === 0 ? (
-        <p className="muted">No radio history recorded.</p>
-      ) : (
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>DJ</th>
-              <th>Show</th>
-              <th>Started</th>
-              <th>Ended</th>
-              <th>Airtime</th>
-              <th>Listeners</th>
-              <th>Notes</th>
-            </tr>
-          </thead>
-          <tbody>
-            {history.map((h) => (
-              <tr key={String(h.id)}>
-                <td>{String(h.id)}</td>
-                <td>{names.get(String(h.userId)) ?? `#${String(h.userId)}`}</td>
-                <td>{h.showName ?? '—'}</td>
-                <td className="muted">{formatDate(h.startedAt)}</td>
-                <td className="muted">{formatDate(h.endedAt)}</td>
-                <td className="muted">{formatDuration(h.startedAt, h.endedAt)}</td>
-                <td>{h.listenersCount}</td>
-                <td className="muted">{h.notes ?? '—'}</td>
+      {history.length > 0 ? (
+        <section className="admin-section">
+          <h2>Show log ({history.length})</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>DJ</th>
+                <th>Show</th>
+                <th>Started</th>
+                <th>Ended</th>
+                <th>Airtime</th>
+                <th>Listeners</th>
+                <th>Notes</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
+            </thead>
+            <tbody>
+              {history.map((h) => (
+                <tr key={String(h.id)}>
+                  <td>{String(h.id)}</td>
+                  <td>{names.get(String(h.userId)) ?? `#${String(h.userId)}`}</td>
+                  <td>{h.showName ?? '—'}</td>
+                  <td className="muted">{formatDate(h.startedAt)}</td>
+                  <td>
+                    {h.endedAt ? (
+                      <span className="muted">{formatDate(h.endedAt)}</span>
+                    ) : (
+                      <span className="admin-badge ok">on air</span>
+                    )}
+                  </td>
+                  <td className="muted">{formatDuration(h.startedAt, h.endedAt)}</td>
+                  <td>{h.listenersCount}</td>
+                  <td className="muted">{h.notes ?? '—'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      ) : null}
     </main>
   );
 }