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,9 +175,32 @@ 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')}
+          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>
+
+      {tab === 'routes' && (
+        <>
+          <div className="flex justify-end gap-2 mb-4">
             <button
               onClick={async () => {
                 const result = await exportGameRoutes(id)
@@ -193,7 +217,6 @@ export function AdminGameDetail() {
               Add Route
             </button>
           </div>
-      </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">
@@ -284,11 +307,21 @@ export function AdminGameDetail() {
               isDeleting={deleteRoute.isPending}
             />
           )}
+        </>
+      )}
 
-      {/* Boss Battles Section */}
+      {tab === 'bosses' && (
-      <div className="mt-10">
+        <>
-        <div className="flex justify-between items-center mb-4">
+          <div className="flex justify-end gap-2 mb-4">
-          <h3 className="text-lg font-medium">Boss Battles ({bosses?.length ?? 0})</h3>
+            <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"
@@ -370,7 +403,8 @@ export function AdminGameDetail() {
               </div>
             </div>
           )}
-      </div>
+        </>
+      )}
 
       {/* Boss Battle Modals */}
       {showCreateBoss && (