feat: add admin upcoming events list

app/admin/(protected)/page.tsx

@@ -1,14 +1,22 @@
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 import type { Metadata } from 'next';
+import { fetchAdminEvents } from '@/fetch/adminEvents';
+import { adminEventsQueryKey } from '@/hooks/useAdminEvents';
 import { requireAdminOrRedirect } from '@/lib/adminAuth';
+import { AdminEventsScene } from '@/scenes/AdminEventsScene/AdminEventsScene';
 
 export const metadata: Metadata = { title: 'Admin - HackRegina' };
 
 export default async function AdminPage() {
-  const session = await requireAdminOrRedirect();
+  await requireAdminOrRedirect();
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery({
+    queryKey: adminEventsQueryKey,
+    queryFn: () => fetchAdminEvents(),
+  });
   return (
-    <p className="text-gray-700 dark:text-gray-300">
-      Signed in as {session.user.name ?? 'unknown user'}. Event management is coming in the next
-      update.
-    </p>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <AdminEventsScene />
+    </HydrationBoundary>
   );
 }

hooks/useAdminEvents.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import type { IAdminEvent } from '@/fetch/adminEvents';
+import { generateQueryKey } from '@/utils/generateQueryKey';
+
+// Shared with the server prefetch in app/admin/(protected)/page.tsx so the
+// hydrated cache and the client query can never drift apart.
+export const adminEventsQueryKey = generateQueryKey({ key: 'admin-events' });
+
+export const useAdminEvents = () => {
+  const {
+    data: events = [],
+    isLoading,
+    isError,
+  } = useQuery<IAdminEvent[]>({
+    queryKey: adminEventsQueryKey,
+    queryFn: async () => {
+      const response = await fetch('/api/admin/events');
+      if (!response.ok) throw new Error(`Failed to load admin events (${response.status})`);
+      const { data } = await response.json();
+      return data;
+    },
+  });
+  return { events, isLoading, isError };
+};

scenes/AdminEventsScene/AdminEventsScene.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useAdminEvents } from '@/hooks/useAdminEvents';
+import { AdminEventCard } from './components';
+
+export const AdminEventsScene = () => {
+  const { events, isLoading, isError } = useAdminEvents();
+
+  return (
+    <section>
+      <h2 className="mb-6 text-xl font-semibold text-gray-900 dark:text-gray-50">
+        Upcoming events
+      </h2>
+      {isError && (
+        <p className="text-red-700 dark:text-red-300">
+          Failed to load events. Try refreshing, or sign in again.
+        </p>
+      )}
+      {isLoading && (
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {[...Array(6)].map((_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static list of skeleton placeholders
+            <div key={i} className="h-44 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800" />
+          ))}
+        </div>
+      )}
+      {!isLoading && !isError && events.length === 0 && (
+        <p className="text-gray-500 dark:text-gray-400">No upcoming events.</p>
+      )}
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {events.map((event) => (
+          <AdminEventCard key={event.id} event={event} />
+        ))}
+      </div>
+    </section>
+  );
+};

scenes/AdminEventsScene/components/AdminEventCard.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import Link from 'next/link';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import type { IAdminEvent } from '@/fetch/adminEvents';
+import { routes } from '@/lib/route';
+
+interface AdminEventCardProps {
+  event: IAdminEvent;
+}
+
+export const AdminEventCard = ({ event }: AdminEventCardProps) => {
+  const start = DateTime.fromMillis(event.start).setZone('America/Regina');
+  const soldPercent =
+    event.capacity && event.capacity > 0
+      ? Math.round(((event.sold ?? 0) / event.capacity) * 100)
+      : null;
+
+  return (
+    <Link href={routes.admin.event(event.id)} className="block">
+      <Card className="h-full transition-colors hover:border-primary-500 dark:hover:border-primary-400">
+        <CardHeader className="space-y-2">
+          <div className="flex items-start justify-between gap-2">
+            <CardTitle className="text-lg">{event.name}</CardTitle>
+            {event.status !== 'live' && <Badge>{event.status}</Badge>}
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {start.toLocaleString(DateTime.DATETIME_MED_WITH_WEEKDAY)}
+            {event.venueName ? ` · ${event.venueName}` : ''}
+          </p>
+        </CardHeader>
+        <CardContent>
+          {soldPercent !== null ? (
+            <div className="space-y-1">
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                {event.sold} / {event.capacity} registered
+              </p>
+              <Progress value={soldPercent} />
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500 dark:text-gray-400">No ticket classes yet</p>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+};

scenes/AdminEventsScene/components/index.ts

@@ -0,0 +1 @@
+export { AdminEventCard } from './AdminEventCard';

utils/generateQueryKey.ts

@@ -1,4 +1,4 @@
-type KeyType = 'members' | 'organizations' | 'website' | 'events';
+type KeyType = 'members' | 'organizations' | 'website' | 'events' | 'admin-events';
 
 export const generateQueryKey = ({
   key,