---
estimated_steps: 28
estimated_files: 4
skills_used: []
---

# T02: Build AdminTechniquePages page with route and dropdown entry

Create the frontend page for admin technique page management. Table showing technique pages with source video counts, version counts, format badges, and creator. Expandable rows show source videos list (from existing `/techniques/{slug}` detail endpoint) and link to version history. Filters for multi-source only and creator. Cross-links to pipeline admin and public technique pages.

Follows patterns from `AdminPipeline.tsx` (table layout, expandable rows, badges, fetch pattern).

## Steps

1. Read `frontend/src/pages/AdminPipeline.tsx` (first ~100 lines) for fetch patterns, state management, table structure.
2. Read `frontend/src/api/public-client.ts` for the `request<T>` pattern and existing type exports.
3. Add TypeScript types and fetch function to `frontend/src/api/public-client.ts`: `AdminTechniquePageItem` interface (id, title, slug, creator_name, creator_slug, topic_category, body_sections_format, source_video_count, version_count, created_at, updated_at) and `fetchAdminTechniquePages(params)` function calling `GET /admin/pipeline/technique-pages`.
4. Create `frontend/src/pages/AdminTechniquePages.tsx`:
   - State: items array, loading, error, filters (multiSourceOnly boolean, creatorFilter string), expandedSlug
   - Fetch on mount and filter change using the new client function
   - Table columns: Title (link to public page), Creator (link to creator detail), Category, Format (v1/v2 badge), Sources (count), Versions (count), Updated
   - Click row to expand → fetch technique detail via existing `fetchTechnique(slug)` → show source videos list with filenames and added_at dates, link to each video in pipeline admin via `/admin/pipeline?video={id}`
   - Filter bar: "Multi-source only" toggle checkbox, creator text filter
   - Use existing CSS patterns from AdminPipeline (admin-page class, table styles)
5. Add route in `frontend/src/App.tsx`: `<Route path="/admin/techniques" element={<AdminTechniquePages />} />`
6. Add "Techniques" link in `frontend/src/components/AdminDropdown.tsx` menu items.
7. Build frontend to verify no TypeScript errors.

## Must-Haves

- [ ] Table renders with all columns (title, creator, category, format, sources, versions, updated)
- [ ] Row expand shows source videos with filenames and dates
- [ ] Multi-source filter toggle works
- [ ] Cross-link to pipeline admin works (via video ID query param)
- [ ] Cross-link to public technique page works
- [ ] Route `/admin/techniques` works
- [ ] Admin dropdown includes Techniques entry

## Verification

- `cd frontend && npm run build` exits 0 (no TypeScript errors)
- After deploying: navigate to `http://ub01:8096/admin/techniques` in browser, page renders with technique data
- Admin dropdown shows three items: Reports, Pipeline, Techniques

## Inputs

- ``frontend/src/api/public-client.ts` — existing request<T> pattern and types`
- ``frontend/src/pages/AdminPipeline.tsx` — reference for admin page patterns (table, expand, badges)`
- ``frontend/src/components/AdminDropdown.tsx` — dropdown menu to add entry to`
- ``frontend/src/App.tsx` — route definitions`
- ``backend/schemas.py` — AdminTechniquePageItem schema from T01`

## Expected Output

- ``frontend/src/pages/AdminTechniquePages.tsx` — new admin technique pages page`
- ``frontend/src/api/public-client.ts` — AdminTechniquePageItem type + fetchAdminTechniquePages function`
- ``frontend/src/App.tsx` — new /admin/techniques route`
- ``frontend/src/components/AdminDropdown.tsx` — Techniques menu entry added`

## Verification

cd frontend && npm run build 2>&1 | tail -5
