Add run management screen to admin panel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/admin/AdminRuns.tsx

@@ -0,0 +1,93 @@
+import { useState, useMemo } from 'react'
+import { AdminTable, type Column } from '../../components/admin/AdminTable'
+import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
+import { useRuns, useDeleteRun } from '../../hooks/useRuns'
+import { useGames } from '../../hooks/useGames'
+import type { NuzlockeRun } from '../../types/game'
+
+export function AdminRuns() {
+  const { data: runs = [], isLoading: runsLoading } = useRuns()
+  const { data: games = [], isLoading: gamesLoading } = useGames()
+  const deleteRun = useDeleteRun()
+
+  const [deleting, setDeleting] = useState<NuzlockeRun | null>(null)
+
+  const gameMap = useMemo(
+    () => new Map(games.map((g) => [g.id, g.name])),
+    [games],
+  )
+
+  const columns: Column<NuzlockeRun>[] = [
+    { header: 'Run Name', accessor: (r) => r.name, sortKey: (r) => r.name },
+    {
+      header: 'Game',
+      accessor: (r) => gameMap.get(r.gameId) ?? `Game #${r.gameId}`,
+      sortKey: (r) => gameMap.get(r.gameId) ?? '',
+    },
+    {
+      header: 'Status',
+      accessor: (r) => (
+        <span
+          className={
+            r.status === 'active'
+              ? 'text-green-600 dark:text-green-400'
+              : r.status === 'completed'
+                ? 'text-blue-600 dark:text-blue-400'
+                : 'text-red-600 dark:text-red-400'
+          }
+        >
+          {r.status}
+        </span>
+      ),
+      sortKey: (r) => r.status,
+    },
+    {
+      header: 'Started',
+      accessor: (r) => new Date(r.startedAt).toLocaleDateString(),
+      sortKey: (r) => r.startedAt,
+    },
+    {
+      header: 'Actions',
+      accessor: (r) => (
+        <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
+          <button
+            onClick={() => setDeleting(r)}
+            className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
+          >
+            Delete
+          </button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold">Runs</h2>
+      </div>
+
+      <AdminTable
+        columns={columns}
+        data={runs}
+        isLoading={runsLoading || gamesLoading}
+        emptyMessage="No runs yet."
+        keyFn={(r) => r.id}
+      />
+
+      {deleting && (
+        <DeleteConfirmModal
+          title={`Delete "${deleting.name}"?`}
+          message="This will permanently delete the run and all its encounters."
+          onConfirm={() =>
+            deleteRun.mutate(deleting.id, {
+              onSuccess: () => setDeleting(null),
+            })
+          }
+          onCancel={() => setDeleting(null)}
+          isDeleting={deleteRun.isPending}
+        />
+      )}
+    </div>
+  )
+}

frontend/src/pages/admin/index.ts

@@ -3,3 +3,4 @@ export { AdminGameDetail } from './AdminGameDetail'
 export { AdminPokemon } from './AdminPokemon'
 export { AdminRouteDetail } from './AdminRouteDetail'
 export { AdminEvolutions } from './AdminEvolutions'
+export { AdminRuns } from './AdminRuns'