127 lines
5.0 KiB
Markdown
127 lines
5.0 KiB
Markdown
---
|
|
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
|