feat(admin): comprehensive admin interface (users, tunnels, metrics, audit, reserved subdomains)

Adds an authenticated admin surface gated by auth.users.app_metadata.role==='admin'. - lib/auth/admin-guard.ts: requireAdmin() (pages) + requireAdminApi() (routes) - middleware.ts: defense-in-depth /admin and /api/admin guarding - API: users (list/detail/role/ban/delete), tunnels (list + active/quota/reset/reassign/regenerate-token/delete), metrics, audit log, reserved subdomains - Self-lockout prevention (no self demote/ban/delete) - Best-effort Redis kill-switch via dependency-free net-socket client (REDIS_URL) - admin_audit_log + reserved_subdomains migration (RLS on, service-role only) - Admin UI (overview, users, tunnels, reserved, audit) + conditional nav link
2026-05-31 10:58:23 +02:00
parent aad01f1fc5
commit fb4880a1d9
36 changed files with 2936 additions and 2 deletions
@@ -0,0 +1,158 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { formatDate } from '@/lib/format';
+
+type AuditEntry = {
+  id: number;
+  actor_id: string | null;
+  actor_email: string | null;
+  action: string;
+  target_type: string | null;
+  target_id: string | null;
+  details: Record<string, unknown>;
+  created_at: string;
+};
+
+const PER_PAGE = 50;
+
+export default function AdminAuditPage() {
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [action, setAction] = useState('');
+  const [targetType, setTargetType] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams({
+        page: String(page),
+        perPage: String(PER_PAGE),
+      });
+      if (action.trim()) params.set('action', action.trim());
+      if (targetType.trim()) params.set('target_type', targetType.trim());
+      const res = await fetch(`/api/admin/audit?${params.toString()}`);
+      if (!res.ok) {
+        const b = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(b.error ?? `Request failed (${res.status})`);
+      }
+      const data = (await res.json()) as {
+        entries: AuditEntry[];
+        total: number;
+      };
+      setEntries(data.entries);
+      setTotal(data.total);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, action, targetType]);
+
+  useEffect(() => {
+    const t = setTimeout(load, 250);
+    return () => clearTimeout(t);
+  }, [load]);
+
+  const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
+
+  return (
+    <div>
+      <h1>Audit log</h1>
+
+      <div className="row" style={{ marginBottom: '1rem', flexWrap: 'wrap' }}>
+        <input
+          type="text"
+          placeholder="Filter action (e.g. tunnel.delete)"
+          value={action}
+          onChange={(e) => {
+            setPage(1);
+            setAction(e.target.value);
+          }}
+          style={{ maxWidth: 240 }}
+        />
+        <input
+          type="text"
+          placeholder="Filter target_type (user/tunnel…)"
+          value={targetType}
+          onChange={(e) => {
+            setPage(1);
+            setTargetType(e.target.value);
+          }}
+          style={{ maxWidth: 240 }}
+        />
+        <button className="secondary btn-sm" type="button" onClick={load}>
+          Refresh
+        </button>
+      </div>
+
+      {error && <p className="error">{error}</p>}
+
+      {loading ? (
+        <p className="muted">Loading…</p>
+      ) : entries.length === 0 ? (
+        <p className="muted">No audit entries.</p>
+      ) : (
+        <div className="admin-table-wrap">
+          <table className="admin-table">
+            <thead>
+              <tr>
+                <th>When</th>
+                <th>Actor</th>
+                <th>Action</th>
+                <th>Target</th>
+                <th>Details</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map((e) => (
+                <tr key={e.id}>
+                  <td>{formatDate(e.created_at)}</td>
+                  <td style={{ wordBreak: 'break-all' }}>
+                    {e.actor_email ?? e.actor_id ?? '—'}
+                  </td>
+                  <td>{e.action}</td>
+                  <td style={{ wordBreak: 'break-all' }}>
+                    {e.target_type ? `${e.target_type}:` : ''}
+                    {e.target_id ?? ''}
+                  </td>
+                  <td>
+                    <code className="muted">
+                      {JSON.stringify(e.details ?? {})}
+                    </code>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="row" style={{ marginTop: '1rem' }}>
+        <button
+          className="secondary btn-sm"
+          type="button"
+          disabled={page <= 1}
+          onClick={() => setPage((p) => Math.max(1, p - 1))}
+        >
+          Prev
+        </button>
+        <span className="muted">
+          Page {page} of {totalPages} ({total} total)
+        </span>
+        <button
+          className="secondary btn-sm"
+          type="button"
+          disabled={page >= totalPages}
+          onClick={() => setPage((p) => p + 1)}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}