Add tabbed UI for routes/bosses and boss export endpoint

Refactors AdminGameDetail to use tabs instead of stacked sections,
adds GET /export/games/{game_id}/bosses endpoint, and adds Export
button to the Boss Battles tab.

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

frontend/src/api/admin.ts

@@ -94,6 +94,9 @@ export const exportGames = () =>
 export const exportGameRoutes = (gameId: number) =>
   api.get<{ filename: string; data: unknown }>(`/export/games/${gameId}/routes`)
 
+export const exportGameBosses = (gameId: number) =>
+  api.get<{ filename: string; data: unknown }>(`/export/games/${gameId}/bosses`)
+
 export const exportPokemon = () =>
   api.get<Record<string, unknown>[]>('/export/pokemon')
 

frontend/src/pages/admin/AdminGameDetail.tsx

@@ -32,7 +32,7 @@ import {
   useDeleteBossBattle,
   useSetBossTeam,
 } from '../../hooks/useAdmin'
-import { exportGameRoutes } from '../../api/admin'
+import { exportGameRoutes, exportGameBosses } from '../../api/admin'
 import { downloadJson } from '../../utils/download'
 import type { Route as GameRoute, CreateRouteInput, UpdateRouteInput, BossBattle } from '../../types'
 import type { CreateBossBattleInput, UpdateBossBattleInput } from '../../types/admin'
@@ -118,6 +118,7 @@ export function AdminGameDetail() {
   const updateBoss = useUpdateBossBattle(id)
   const deleteBoss = useDeleteBossBattle(id)
 
+  const [tab, setTab] = useState<'routes' | 'bosses'>('routes')
   const [showCreate, setShowCreate] = useState(false)
   const [editing, setEditing] = useState<GameRoute | null>(null)
   const [deleting, setDeleting] = useState<GameRoute | null>(null)
@@ -174,203 +175,236 @@ export function AdminGameDetail() {
         </p>
       </div>
 
-      <div className="flex justify-between items-center mb-4">
-        <h3 className="text-lg font-medium">Routes ({routes.length})</h3>
-        <div className="flex gap-2">
-          <button
-            onClick={async () => {
-              const result = await exportGameRoutes(id)
-              downloadJson(result.data, result.filename)
-            }}
-            className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
-          >
-            Export
-          </button>
-          <button
-            onClick={() => setShowCreate(true)}
-            className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
-          >
-            Add Route
-          </button>
-        </div>
+      <div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
+        <button
+          onClick={() => setTab('routes')}
+          className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
+            tab === 'routes'
+              ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+          }`}
+        >
+          Routes ({routes.length})
+        </button>
+        <button
+          onClick={() => setTab('bosses')}
+          className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
+            tab === 'bosses'
+              ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+          }`}
+        >
+          Boss Battles ({bosses?.length ?? 0})
+        </button>
       </div>
 
-      {routes.length === 0 ? (
-        <div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
-          No routes yet. Add one to get started.
-        </div>
-      ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-800">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-12" />
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
-                    Order
-                  </th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Name
-                  </th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                <SortableContext
-                  items={routes.map((r) => r.id)}
-                  strategy={verticalListSortingStrategy}
-                >
+      {tab === 'routes' && (
+        <>
+          <div className="flex justify-end gap-2 mb-4">
+            <button
+              onClick={async () => {
+                const result = await exportGameRoutes(id)
+                downloadJson(result.data, result.filename)
+              }}
+              className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
+            >
+              Export
+            </button>
+            <button
+              onClick={() => setShowCreate(true)}
+              className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Add Route
+            </button>
+          </div>
+
+          {routes.length === 0 ? (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
+              No routes yet. Add one to get started.
+            </div>
+          ) : (
+            <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                  <thead className="bg-gray-50 dark:bg-gray-800">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-12" />
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
+                        Order
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                        Name
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                  >
+                    <SortableContext
+                      items={routes.map((r) => r.id)}
+                      strategy={verticalListSortingStrategy}
+                    >
+                      <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+                        {routes.map((route) => (
+                          <SortableRouteRow
+                            key={route.id}
+                            route={route}
+                            onEdit={setEditing}
+                            onDelete={setDeleting}
+                            onClick={(r) => navigate(`/admin/games/${id}/routes/${r.id}`)}
+                          />
+                        ))}
+                      </tbody>
+                    </SortableContext>
+                  </DndContext>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {showCreate && (
+            <RouteFormModal
+              nextOrder={routes.length > 0 ? Math.max(...routes.map((r) => r.order)) + 1 : 1}
+              onSubmit={(data) =>
+                createRoute.mutate(data as CreateRouteInput, {
+                  onSuccess: () => setShowCreate(false),
+                })
+              }
+              onClose={() => setShowCreate(false)}
+              isSubmitting={createRoute.isPending}
+            />
+          )}
+
+          {editing && (
+            <RouteFormModal
+              route={editing}
+              onSubmit={(data) =>
+                updateRoute.mutate(
+                  { routeId: editing.id, data: data as UpdateRouteInput },
+                  { onSuccess: () => setEditing(null) },
+                )
+              }
+              onClose={() => setEditing(null)}
+              isSubmitting={updateRoute.isPending}
+            />
+          )}
+
+          {deleting && (
+            <DeleteConfirmModal
+              title={`Delete ${deleting.name}?`}
+              message="This will permanently delete the route. Routes with existing encounters cannot be deleted."
+              onConfirm={() =>
+                deleteRoute.mutate(deleting.id, {
+                  onSuccess: () => setDeleting(null),
+                })
+              }
+              onCancel={() => setDeleting(null)}
+              isDeleting={deleteRoute.isPending}
+            />
+          )}
+        </>
+      )}
+
+      {tab === 'bosses' && (
+        <>
+          <div className="flex justify-end gap-2 mb-4">
+            <button
+              onClick={async () => {
+                const result = await exportGameBosses(id)
+                downloadJson(result.data, result.filename)
+              }}
+              className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
+            >
+              Export
+            </button>
+            <button
+              onClick={() => setShowCreateBoss(true)}
+              className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Add Boss Battle
+            </button>
+          </div>
+
+          {!bosses || bosses.length === 0 ? (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
+              No boss battles yet. Add one to get started.
+            </div>
+          ) : (
+            <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                  <thead className="bg-gray-50 dark:bg-gray-800">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
+                        Order
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                        Name
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                        Type
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                        Location
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-20">
+                        Lv Cap
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
+                        Team
+                      </th>
+                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-40">
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
                   <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
-                    {routes.map((route) => (
-                      <SortableRouteRow
-                        key={route.id}
-                        route={route}
-                        onEdit={setEditing}
-                        onDelete={setDeleting}
-                        onClick={(r) => navigate(`/admin/games/${id}/routes/${r.id}`)}
-                      />
+                    {bosses.map((boss) => (
+                      <tr key={boss.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.order}</td>
+                        <td className="px-4 py-3 text-sm whitespace-nowrap font-medium">{boss.name}</td>
+                        <td className="px-4 py-3 text-sm whitespace-nowrap capitalize">
+                          {boss.bossType.replace('_', ' ')}
+                        </td>
+                        <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.location}</td>
+                        <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.levelCap}</td>
+                        <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.pokemon.length}</td>
+                        <td className="px-4 py-3 text-sm whitespace-nowrap">
+                          <div className="flex gap-2">
+                            <button
+                              onClick={() => setEditingTeam(boss)}
+                              className="text-green-600 hover:text-green-800 dark:text-green-400 text-sm"
+                            >
+                              Team
+                            </button>
+                            <button
+                              onClick={() => setEditingBoss(boss)}
+                              className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
+                            >
+                              Edit
+                            </button>
+                            <button
+                              onClick={() => setDeletingBoss(boss)}
+                              className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
+                            >
+                              Delete
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
                     ))}
                   </tbody>
-                </SortableContext>
-              </DndContext>
-            </table>
-          </div>
-        </div>
-      )}
-
-      {showCreate && (
-        <RouteFormModal
-          nextOrder={routes.length > 0 ? Math.max(...routes.map((r) => r.order)) + 1 : 1}
-          onSubmit={(data) =>
-            createRoute.mutate(data as CreateRouteInput, {
-              onSuccess: () => setShowCreate(false),
-            })
-          }
-          onClose={() => setShowCreate(false)}
-          isSubmitting={createRoute.isPending}
-        />
-      )}
-
-      {editing && (
-        <RouteFormModal
-          route={editing}
-          onSubmit={(data) =>
-            updateRoute.mutate(
-              { routeId: editing.id, data: data as UpdateRouteInput },
-              { onSuccess: () => setEditing(null) },
-            )
-          }
-          onClose={() => setEditing(null)}
-          isSubmitting={updateRoute.isPending}
-        />
-      )}
-
-      {deleting && (
-        <DeleteConfirmModal
-          title={`Delete ${deleting.name}?`}
-          message="This will permanently delete the route. Routes with existing encounters cannot be deleted."
-          onConfirm={() =>
-            deleteRoute.mutate(deleting.id, {
-              onSuccess: () => setDeleting(null),
-            })
-          }
-          onCancel={() => setDeleting(null)}
-          isDeleting={deleteRoute.isPending}
-        />
-      )}
-
-      {/* Boss Battles Section */}
-      <div className="mt-10">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-lg font-medium">Boss Battles ({bosses?.length ?? 0})</h3>
-          <button
-            onClick={() => setShowCreateBoss(true)}
-            className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
-          >
-            Add Boss Battle
-          </button>
-        </div>
-
-        {!bosses || bosses.length === 0 ? (
-          <div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
-            No boss battles yet. Add one to get started.
-          </div>
-        ) : (
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                <thead className="bg-gray-50 dark:bg-gray-800">
-                  <tr>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
-                      Order
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                      Name
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                      Type
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                      Location
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-20">
-                      Lv Cap
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
-                      Team
-                    </th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-40">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
-                  {bosses.map((boss) => (
-                    <tr key={boss.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
-                      <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.order}</td>
-                      <td className="px-4 py-3 text-sm whitespace-nowrap font-medium">{boss.name}</td>
-                      <td className="px-4 py-3 text-sm whitespace-nowrap capitalize">
-                        {boss.bossType.replace('_', ' ')}
-                      </td>
-                      <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.location}</td>
-                      <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.levelCap}</td>
-                      <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.pokemon.length}</td>
-                      <td className="px-4 py-3 text-sm whitespace-nowrap">
-                        <div className="flex gap-2">
-                          <button
-                            onClick={() => setEditingTeam(boss)}
-                            className="text-green-600 hover:text-green-800 dark:text-green-400 text-sm"
-                          >
-                            Team
-                          </button>
-                          <button
-                            onClick={() => setEditingBoss(boss)}
-                            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
-                          >
-                            Edit
-                          </button>
-                          <button
-                            onClick={() => setDeletingBoss(boss)}
-                            className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
-                          >
-                            Delete
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                </table>
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </>
+      )}
 
       {/* Boss Battle Modals */}
       {showCreateBoss && (