docs(06-01): complete template frontend page plan

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

.planning/phases/06-template-frontend-and-workflow-replacement/06-01-SUMMARY.md

@@ -0,0 +1,126 @@
+---
+phase: 06-template-frontend-and-workflow-replacement
+plan: 01
+subsystem: ui
+tags: [react, typescript, shadcn-ui, i18n, react-i18next]
+
+# Dependency graph
+requires:
+  - phase: 05-template-data-model-and-api
+    provides: Template REST API endpoints and TemplateItem/TemplateDetail models
+
+provides:
+  - Template management page at /template with add/remove/reorder for template items
+  - useTemplate hook with full CRUD operations
+  - Template API client functions (get, addItem, updateItem, deleteItem, reorder)
+  - generate function on budgets API object for POST /budgets/generate
+  - ItemTier type and TemplateItem/TemplateDetail interfaces in api.ts
+
+affects:
+  - 06-template-frontend-and-workflow-replacement (remaining plans)
+  - DashboardPage (may reference item_tier on BudgetItem)
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - useTemplate hook pattern (fetch template + categories, expose CRUD ops, refetch after mutations)
+    - Reorder via swap of sort_order values between adjacent items
+
+key-files:
+  created:
+    - frontend/src/hooks/useTemplate.ts
+    - frontend/src/pages/TemplatePage.tsx
+  modified:
+    - frontend/src/lib/api.ts
+    - frontend/src/components/AppLayout.tsx
+    - frontend/src/App.tsx
+    - frontend/src/i18n/en.json
+    - frontend/src/i18n/de.json
+
+key-decisions:
+  - "TemplatePage add form filters out already-added categories from the category select"
+  - "Tier select only shows fixed and variable (one_off excluded per spec)"
+  - "Amount input only rendered when tier is fixed"
+  - "Reorder swaps sort_order values between the two affected items, sends full item list to reorder endpoint"
+
+patterns-established:
+  - "Add form pattern: filtered category select + tier select + conditional amount input in a flex-wrap row"
+  - "Pastel gradient header: bg-gradient-to-r from-violet-50 to-indigo-50 (matches BudgetSetup)"
+
+requirements-completed: [TMPL-05]
+
+# Metrics
+duration: 2min
+completed: 2026-03-12
+---
+
+# Phase 6 Plan 1: Template Frontend Summary
+
+**React template management page with add/remove/reorder for fixed and variable budget template items, wired to Phase 5 REST API via useTemplate hook**
+
+## Performance
+
+- **Duration:** 2 min
+- **Started:** 2026-03-12T12:02:45Z
+- **Completed:** 2026-03-12T12:05:08Z
+- **Tasks:** 2
+- **Files modified:** 7
+
+## Accomplishments
+- Template API client functions and TypeScript interfaces added to api.ts (ItemTier, TemplateItem, TemplateDetail, template object, budgets.generate)
+- useTemplate hook encapsulating fetch + CRUD + reorder logic
+- TemplatePage with add form (category/tier/amount), sortable items table with tier badges, and empty state
+- Sidebar nav item for Template added between Categories and Settings
+- /template route registered in App.tsx
+- EN and DE i18n translations for all template UI text
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: API client extensions and useTemplate hook** - `0af9431` (feat)
+2. **Task 2: TemplatePage, routing, navigation, and i18n** - `924e01c` (feat)
+
+**Plan metadata:** (docs commit follows)
+
+## Files Created/Modified
+- `frontend/src/lib/api.ts` - Added ItemTier type, TemplateItem/TemplateDetail interfaces, template API object, budgets.generate, item_tier on BudgetItem
+- `frontend/src/hooks/useTemplate.ts` - useTemplate hook with addItem, removeItem, moveItem, updateItem, refetch
+- `frontend/src/pages/TemplatePage.tsx` - Template management page with add form, items table, empty state, loading skeleton
+- `frontend/src/components/AppLayout.tsx` - Added FileText icon and Template nav item
+- `frontend/src/App.tsx` - Added TemplatePage import and /template route
+- `frontend/src/i18n/en.json` - Added nav.template and template.* keys
+- `frontend/src/i18n/de.json` - Added nav.template and template.* keys (German)
+
+## Decisions Made
+- Categories already in the template are filtered from the add form's category select to prevent duplicates
+- Amount input is conditionally rendered only for tier=fixed, keeping the form clean for variable items
+- Reorder swaps sort_order values between adjacent items and sends the updated full list to PUT /template/items/reorder
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 1 - Bug] Removed unused TemplateItem import in useTemplate hook**
+- **Found during:** Task 2 verification (build step)
+- **Issue:** TypeScript strict mode flagged TemplateItem as declared but never read
+- **Fix:** Removed unused import from useTemplate.ts
+- **Files modified:** frontend/src/hooks/useTemplate.ts
+- **Verification:** bun run build succeeded
+- **Committed in:** 924e01c (Task 2 commit)
+
+---
+
+**Total deviations:** 1 auto-fixed (1 unused import removal)
+**Impact on plan:** Trivial fix required for clean build. No scope changes.
+
+## Issues Encountered
+None beyond the unused import caught by the build step.
+
+## User Setup Required
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Template management page fully functional, ready for plan 06-02
+- useTemplate hook and API client are stable contracts for additional workflow features