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/articles/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";
@@ -14,32 +15,58 @@ export default async function AdminArticles() {
     })
     .catch(() => []);
 
+  const latest = articles[0]?.createdAt
+    ? articles[0].createdAt.toISOString().slice(0, 10)
+    : "—";
+
   return (
     <main>
       <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
         <h1 style={{ flex: 1 }}>Articles</h1>
-        <Link href="/admin/articles/new">+ New article</Link>
+        <Link href="/admin/articles/new" className="btn btn-primary">
+          + New article
+        </Link>
       </div>
-      <table style={{ width: "100%", borderCollapse: "collapse" }}>
-        <thead>
-          <tr style={{ textAlign: "left", color: "var(--muted)" }}>
-            <th>Title</th>
-            <th>Slug</th>
-            <th>Created</th>
-          </tr>
-        </thead>
-        <tbody>
-          {articles.map((a) => (
-            <tr key={String(a.id)} style={{ borderTop: "1px solid var(--border)" }}>
-              <td>
-                <Link href={`/admin/articles/${a.id}`}>{a.title}</Link>
-              </td>
-              <td className="muted">{a.slug}</td>
-              <td className="muted">{a.createdAt ? a.createdAt.toISOString().slice(0, 10) : ""}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <p className="muted" style={{ marginTop: "-0.4rem" }}>
+        News articles (<code>website_articles</code>) shown on the public site. 50 most recent.
+      </p>
+
+      <div className="admin-stats">
+        <StatusCard label="Articles shown" value={articles.length} icon="📰" />
+        <StatusCard label="Latest" value={latest} hint="most recent post" icon="🕒" />
+      </div>
+
+      <section className="admin-section">
+        <h2>Recent articles</h2>
+        {articles.length === 0 ? (
+          <p className="muted">No articles yet.</p>
+        ) : (
+          <table>
+            <thead>
+              <tr>
+                <th>Title</th>
+                <th>Slug</th>
+                <th>Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {articles.map((a) => (
+                <tr key={String(a.id)}>
+                  <td>
+                    <Link href={`/admin/articles/${a.id}`}>{a.title}</Link>
+                  </td>
+                  <td className="muted">
+                    <code>{a.slug}</code>
+                  </td>
+                  <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                    {a.createdAt ? a.createdAt.toISOString().slice(0, 10) : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </section>
     </main>
   );
 }