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>

.beans/nuzlocke-tracker-6kux--admin-panel-tabs-for-routesbosses-boss-export.md

@@ -0,0 +1,11 @@
+---
+# nuzlocke-tracker-6kux
+title: 'Admin Panel: Tabs for Routes/Bosses + Boss Export'
+status: completed
+type: feature
+priority: normal
+created_at: 2026-02-08T10:49:47Z
+updated_at: 2026-02-08T10:51:25Z
+---
+
+Add tabbed UI to AdminGameDetail (Routes/Bosses tabs) and boss battle export endpoint

backend/src/app/api/export.py

@@ -6,6 +6,8 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.orm import selectinload
 
 from app.core.database import get_session
+from app.models.boss_battle import BossBattle
+from app.models.boss_pokemon import BossPokemon
 from app.models.evolution import Evolution
 from app.models.game import Game
 from app.models.pokemon import Pokemon
@@ -46,10 +48,10 @@ async def export_game_routes(
     if not game:
         raise HTTPException(status_code=404, detail="Game not found")
 
-    # Load all routes for this game with encounters and pokemon
+    # Load all routes for this game's version group with encounters and pokemon
     result = await session.execute(
         select(Route)
-        .where(Route.game_id == game_id)
+        .where(Route.version_group_id == game.version_group_id)
         .options(
             selectinload(Route.route_encounters).selectinload(RouteEncounter.pokemon),
         )
@@ -65,6 +67,10 @@ async def export_game_routes(
             children_by_parent.setdefault(r.parent_route_id, []).append(r)
 
     def format_encounters(route: Route) -> list[dict]:
+        # Filter route_encounters to this specific game
+        game_encounters = [
+            enc for enc in route.route_encounters if enc.game_id == game_id
+        ]
         return [
             {
                 "pokeapi_id": enc.pokemon.pokeapi_id,
@@ -74,7 +80,7 @@ async def export_game_routes(
                 "min_level": enc.min_level,
                 "max_level": enc.max_level,
             }
-            for enc in sorted(route.route_encounters, key=lambda e: -e.encounter_rate)
+            for enc in sorted(game_encounters, key=lambda e: -e.encounter_rate)
         ]
 
     def format_route(route: Route) -> dict:
@@ -106,6 +112,53 @@ async def export_game_routes(
     }
 
 
+@router.get("/games/{game_id}/bosses")
+async def export_game_bosses(
+    game_id: int,
+    session: AsyncSession = Depends(get_session),
+):
+    """Export boss battles for a game in seed JSON format."""
+    game = await session.get(Game, game_id)
+    if not game:
+        raise HTTPException(status_code=404, detail="Game not found")
+
+    result = await session.execute(
+        select(BossBattle)
+        .where(BossBattle.version_group_id == game.version_group_id)
+        .options(
+            selectinload(BossBattle.pokemon).selectinload(BossPokemon.pokemon),
+        )
+        .order_by(BossBattle.order)
+    )
+    bosses = result.scalars().all()
+
+    return {
+        "filename": f"{game.slug}-bosses.json",
+        "data": [
+            {
+                "name": b.name,
+                "boss_type": b.boss_type,
+                "badge_name": b.badge_name,
+                "badge_image_url": b.badge_image_url,
+                "level_cap": b.level_cap,
+                "order": b.order,
+                "location": b.location,
+                "sprite_url": b.sprite_url,
+                "pokemon": [
+                    {
+                        "pokeapi_id": bp.pokemon.pokeapi_id,
+                        "pokemon_name": bp.pokemon.name,
+                        "level": bp.level,
+                        "order": bp.order,
+                    }
+                    for bp in sorted(b.pokemon, key=lambda p: p.order)
+                ],
+            }
+            for b in bosses
+        ],
+    }
+
+
 @router.get("/pokemon")
 async def export_pokemon(session: AsyncSession = Depends(get_session)):
     """Export all pokemon in seed JSON format."""

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">
+      <div className="flex border-b border-gray-200 dark:border-gray-700 mb-4">
-        <h3 className="text-lg font-medium">Routes ({routes.length})</h3>
+        <button
-        <div className="flex gap-2">
+          onClick={() => setTab('routes')}
-          <button
+          className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
-            onClick={async () => {
+            tab === 'routes'
-              const result = await exportGameRoutes(id)
+              ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
-              downloadJson(result.data, result.filename)
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
-            }}
+          }`}
-            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"
+        >
-          >
+          Routes ({routes.length})
-            Export
+        </button>
-          </button>
+        <button
-          <button
+          onClick={() => setTab('bosses')}
-            onClick={() => setShowCreate(true)}
+          className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
-            className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
+            tab === 'bosses'
-          >
+              ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
-            Add Route
+              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
-          </button>
+          }`}
-        </div>
+        >
+          Boss Battles ({bosses?.length ?? 0})
+        </button>
       </div>
 
-      {routes.length === 0 ? (
+      {tab === 'routes' && (
-        <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 className="flex justify-end gap-2 mb-4">
-        </div>
+            <button
-      ) : (
+              onClick={async () => {
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+                const result = await exportGameRoutes(id)
-          <div className="overflow-x-auto">
+                downloadJson(result.data, result.filename)
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              }}
-              <thead className="bg-gray-50 dark:bg-gray-800">
+              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"
-                <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" />
+              Export
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
+            </button>
-                    Order
+            <button
-                  </th>
+              onClick={() => setShowCreate(true)}
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
-                    Name
+            >
-                  </th>
+              Add Route
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
+            </button>
-                    Actions
+          </div>
-                  </th>
+
-                </tr>
+          {routes.length === 0 ? (
-              </thead>
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
-              <DndContext
+              No routes yet. Add one to get started.
-                sensors={sensors}
+            </div>
-                collisionDetection={closestCenter}
+          ) : (
-                onDragEnd={handleDragEnd}
+            <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-              >
+              <div className="overflow-x-auto">
-                <SortableContext
+                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                  items={routes.map((r) => r.id)}
+                  <thead className="bg-gray-50 dark:bg-gray-800">
-                  strategy={verticalListSortingStrategy}
+                    <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) => (
+                    {bosses.map((boss) => (
-                      <SortableRouteRow
+                      <tr key={boss.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
-                        key={route.id}
+                        <td className="px-4 py-3 text-sm whitespace-nowrap">{boss.order}</td>
-                        route={route}
+                        <td className="px-4 py-3 text-sm whitespace-nowrap font-medium">{boss.name}</td>
-                        onEdit={setEditing}
+                        <td className="px-4 py-3 text-sm whitespace-nowrap capitalize">
-                        onDelete={setDeleting}
+                          {boss.bossType.replace('_', ' ')}
-                        onClick={(r) => navigate(`/admin/games/${id}/routes/${r.id}`)}
+                        </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>
+                </table>
-              </DndContext>
+              </div>
-            </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>
             </div>
-          </div>
+          )}
-        )}
+        </>
-      </div>
+      )}
 
       {/* Boss Battle Modals */}
       {showCreateBoss && (