nuzlocke-tracker/.beans/nuzlocke-tracker-fxi7--pokemon-detail-card-with-encounters-and-evolution.md

---
# nuzlocke-tracker-fxi7
title: Pokemon detail card with encounters and evolution chain
status: completed
type: feature
priority: high
created_at: 2026-02-08T12:33:05Z
updated_at: 2026-02-08T12:53:13Z
parent: nuzlocke-tracker-iu5b
---

When viewing/editing a Pokemon in the admin panel, show contextual information about where it can be encountered and its evolution chain.

## Desired behavior
- The pokemon edit card (from click-to-edit) shows:
  1. Editable fields (name, types, dex number, sprite, etc.)
  2. **Encounter locations**: A list of routes/games where this pokemon appears as a route encounter. Grouped by game, showing route name + encounter method + levels.
  3. **Evolution chain**: Visual display of the pokemon's evolution family — predecessors and successors with triggers (level, item, trade, etc.)
- Encounter locations link to the route detail page in admin for quick navigation
- Evolution chain entries are clickable to open the EvolutionFormModal for direct editing

## Implementation

### Tabbed modal (edit mode)
In edit mode, the PokemonFormModal uses three tabs instead of a single scrolling view:
- **Details** — the form fields (PokeAPI ID, name, types, etc.) with Save/Delete/Cancel footer
- **Evolutions** — clickable evolution chain rows that open a stacked EvolutionFormModal for direct editing
- **Encounters** — encounter locations grouped by game, with route names linking to admin route detail pages

In create mode, no tabs are shown (just the form fields).

### Backend endpoints
- `GET /pokemon/{id}/encounter-locations` — returns encounters grouped by game with route/game names eagerly loaded
- `GET /pokemon/{id}/evolution-chain` — BFS to find full evolution family, returns all edges with from/to Pokemon

### Frontend
- New types: `PokemonEncounterLocationItem`, `PokemonEncounterLocation`
- New API functions: `fetchPokemonEncounterLocations`, `fetchPokemonEvolutionChain`
- New hooks: `usePokemonEncounterLocations`, `usePokemonEvolutionChain`
- Extracted `formatEvolutionMethod` to shared `utils/formatEvolution.ts`

## Notes
- This helps the admin quickly verify data completeness — 'is this pokemon assigned to the right routes?' and 'are its evolutions set up correctly?'