feat(portal): add SSR operations and exclusive groups

apps/web/src/app/admin/(console)/events/page.tsx

@@ -1,34 +1,92 @@
 import { events } from "@minecraft-account-manager/database";
-import { desc } from "drizzle-orm";
+import { desc, inArray } from "drizzle-orm";
+import Link from "next/link";
 import { db } from "@/lib/database";
+import { eventCategory, eventCategoryValues, normalizeEventCategory, normalizeSelectedEventTypes } from "@/lib/event-filters";
 import { eventIpSummary } from "@/lib/event-ip-summary";
 
-export default async function EventsPage() {
-  const recentEvents = await db.select().from(events).orderBy(desc(events.time)).limit(100);
+export const dynamic = "force-dynamic";
+
+function values(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
+
+export default async function EventsPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const query = await searchParams;
+  const typeRows = await db.select({ type: events.type }).from(events).groupBy(events.type).orderBy(events.type);
+  const availableTypes = typeRows.map((row) => row.type);
+  const category = normalizeEventCategory(values(query.category)[0]);
+  const selectedTypes = normalizeSelectedEventTypes(query.type, availableTypes);
+  const categoryTypes = category === "all"
+    ? availableTypes
+    : availableTypes.filter((type) => eventCategory(type) === category);
+  const filteredTypes = selectedTypes.length
+    ? selectedTypes.filter((type) => categoryTypes.includes(type))
+    : categoryTypes;
+  const recentEvents = filteredTypes.length
+    ? await db.select().from(events).where(inArray(events.type, filteredTypes)).orderBy(desc(events.time)).limit(100)
+    : [];
 
   return (
     <main className="mx-auto max-w-6xl px-6 py-14">
       <p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">CloudEvents ledger</p>
-      <h1 className="mt-4 font-display text-5xl font-black uppercase">Recent events</h1>
-      <div className="mt-10 overflow-x-auto border border-line bg-panel shadow-[8px_8px_0_var(--color-shadow)]">
+      <h1 className="mt-4 font-display text-5xl font-black uppercase">Event explorer</h1>
+      <p className="mt-4 max-w-2xl text-sm leading-6 text-muted">Filter the immutable audit ledger, then open an event to inspect its complete CloudEvents envelope and data.</p>
+
+      <form className="mt-8 border border-line bg-panel p-6" method="get">
+        <div className="grid gap-6 md:grid-cols-[0.45fr_1.55fr]">
+          <label className="font-mono text-xs font-bold uppercase tracking-wider" htmlFor="event-category">
+            View
+            <select className="mt-3 block w-full border border-line bg-canvas px-3 py-3 font-sans text-sm font-normal normal-case" defaultValue={category} id="event-category" name="category">
+              {eventCategoryValues.map((value) => <option key={value} value={value}>{value === "all" ? "All activity" : value}</option>)}
+            </select>
+          </label>
+          <fieldset>
+            <legend className="font-mono text-xs font-bold uppercase tracking-wider">Event types</legend>
+            <details className="mt-3 border border-line bg-canvas p-4" open={selectedTypes.length > 0}>
+              <summary className="cursor-pointer font-mono text-[10px] font-bold uppercase underline underline-offset-4">{selectedTypes.length ? `${selectedTypes.length} selected` : "All types in this view"}</summary>
+              <div className="mt-4 grid max-h-64 gap-3 overflow-y-auto sm:grid-cols-2">
+                {availableTypes.map((type) => (
+                  <label className="flex items-start gap-2 font-mono text-[10px] leading-4" key={type}>
+                    <input className="mt-0.5 size-4 accent-[var(--accent)]" defaultChecked={selectedTypes.includes(type)} name="type" type="checkbox" value={type} />
+                    <span className="break-all">{type}</span>
+                  </label>
+                ))}
+              </div>
+            </details>
+          </fieldset>
+        </div>
+        <div className="mt-5 flex flex-wrap gap-4">
+          <button className="border border-ink bg-ink px-5 py-3 font-mono text-[10px] font-bold uppercase tracking-wider text-canvas" type="submit">Apply filters</button>
+          <Link className="self-center font-mono text-[10px] font-bold uppercase underline underline-offset-4" href="/admin/events">Clear filters</Link>
+        </div>
+      </form>
+
+      <p className="mt-8 font-mono text-[10px] uppercase tracking-widest text-muted" role="status">Showing {recentEvents.length} most recent matching events</p>
+      <div className="mt-3 overflow-x-auto border border-line bg-panel shadow-[8px_8px_0_var(--color-shadow)]">
         <table className="w-full min-w-[760px] border-collapse text-left">
+          <caption className="sr-only">Filtered account manager events</caption>
           <thead className="border-b border-line font-mono text-[10px] uppercase tracking-widest text-muted">
-            <tr><th className="p-4">Time</th><th className="p-4">Type</th><th className="p-4">Subject</th><th className="p-4">IP</th><th className="p-4">Network</th></tr>
+            <tr><th className="p-4" scope="col">Time</th><th className="p-4" scope="col">Type</th><th className="p-4" scope="col">Subject</th><th className="p-4" scope="col">IP</th><th className="p-4" scope="col">Network</th></tr>
           </thead>
           <tbody className="divide-y divide-line text-xs">
             {recentEvents.map((event) => {
               const ip = eventIpSummary(event.data);
               return (
-                <tr key={event.id}>
-                  <td className="whitespace-nowrap p-4 font-mono text-muted">{event.time.toISOString()}</td>
-                  <td className="p-4 font-mono font-bold">{event.type}</td>
+                <tr className="hover:bg-canvas/60" key={event.id}>
+                  <td className="whitespace-nowrap p-4 font-mono text-muted"><time dateTime={event.time.toISOString()}>{event.time.toISOString()}</time></td>
+                  <th className="p-4 text-left font-mono font-bold" scope="row"><Link className="underline decoration-line underline-offset-4 hover:decoration-accent" href={`/admin/events/${event.id}`}>{event.type}</Link></th>
                   <td className="p-4 font-mono text-muted">{event.subject ?? "—"}</td>
                   <td className="p-4 font-mono text-muted">{event.ipAddress ?? "—"}</td>
                   <td className="p-4"><div className="font-mono text-[10px] font-bold uppercase">{ip.classification ?? "—"}</div><div className="mt-1 text-xs text-muted">{ip.location ?? "Location unavailable"}</div></td>
                 </tr>
               );
             })}
-            {!recentEvents.length && <tr><td className="p-8 text-muted" colSpan={5}>No events have been recorded.</td></tr>}
+            {!recentEvents.length && <tr><td className="p-8 text-muted" colSpan={5}>No events match these filters.</td></tr>}
           </tbody>
         </table>
       </div>