makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-03-12 13:06:18 +01:00
parent 924e01c983
commit 14075850c3
4 changed files with 139 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.planning/REQUIREMENTS.md
View File

@@ -58,7 +58,7 @@ Requirements for this milestone. Each maps to roadmap phases.
- [x] **TMPL-02**: User can define a monthly budget template containing fixed items (with amounts) and variable items (category only)
- [ ] **TMPL-03**: Navigating to a month with no budget auto-generates one from the user's template (fixed items with amounts, variable items with blank amounts)
- [x] **TMPL-04**: One-off items are not carried forward to new months
- [ ] **TMPL-05**: User can manage their template on a dedicated page — add, remove, reorder fixed and variable items
- [x] **TMPL-05**: User can manage their template on a dedicated page — add, remove, reorder fixed and variable items
- [ ] **TMPL-06**: The "copy from previous month" feature is replaced by template-based generation
### Quick-Add Library
@@ -143,7 +143,7 @@ Which phases cover which requirements. Updated during roadmap creation.
| TMPL-02 | Phase 5 (v1.1) | Complete |
| TMPL-04 | Phase 5 (v1.1) | Complete |
| TMPL-03 | Phase 6 (v1.1) | Pending |
| TMPL-05 | Phase 6 (v1.1) | Pending |
| TMPL-05 | Phase 6 (v1.1) | Complete |
| TMPL-06 | Phase 6 (v1.1) | Pending |
| QADD-01 | Phase 7 (v1.1) | Pending |
| QADD-02 | Phase 7 (v1.1) | Pending |

4
.planning/ROADMAP.md
View File

@@ -106,7 +106,7 @@ Plans:
2. The template management page lets the user add, remove, and reorder fixed and variable items without leaving the page
3. When adding a budget item (fixed or variable), the user can tag it inline as fixed, variable, or one-off
4. The "copy from previous month" button is no longer visible anywhere in the app
**Plans:** 2 plans
**Plans:** 1/2 plans executed
Plans:
- [ ] 06-01-PLAN.md — Template API client, useTemplate hook, TemplatePage with add/remove/reorder, routing and i18n
@@ -153,6 +153,6 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8
| 3. Interaction Quality and Completeness | v1.0 | 4/4 | Complete | 2026-03-12 |
| 4. Chart Polish and Bug Fixes | v1.0 | 2/2 | Complete | 2026-03-12 |
| 5. Template Data Model and API | v1.1 | 2/2 | Complete | 2026-03-12 |
| 6. Template Frontend and Workflow Replacement | v1.1 | 0/2 | Not started | - |
| 6. Template Frontend and Workflow Replacement | 1/2 | In Progress| | - |
| 7. Quick-Add Library | v1.1 | 0/2 | Not started | - |
| 8. Layout and Density Rethink | v1.1 | 0/2 | Not started | - |

15
.planning/STATE.md
View File

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
milestone: v1.1
milestone_name: Usability and Templates
status: planning
stopped_at: Completed 05-template-data-model-and-api-02-PLAN.md
last_updated: "2026-03-12T11:15:26.353Z"
stopped_at: Completed 06-template-frontend-and-workflow-replacement-01-PLAN.md
last_updated: "2026-03-12T12:06:05.515Z"
last_activity: 2026-03-12 — v1.1 roadmap created, Phases 5-8 defined
progress:
total_phases: 8
completed_phases: 5
total_plans: 12
completed_plans: 12
total_plans: 14
completed_plans: 13
percent: 0
---
@@ -52,6 +52,7 @@ Progress: [░░░░░░░░░░] 0%
*Updated after each plan completion*
| Phase 05-template-data-model-and-api P01 | 3 | 2 tasks | 4 files |
| Phase 05-template-data-model-and-api P02 | 1min | 2 tasks | 2 files |
| Phase 06-template-frontend-and-workflow-replacement P01 | 2min | 2 tasks | 7 files |
## Accumulated Context
@@ -70,6 +71,8 @@ Recent decisions affecting current work:
- [Phase 05-template-data-model-and-api]: GenerateBudgetFromTemplate returns BudgetExistsError struct for structured 409 response
- [Phase 05-template-data-model-and-api]: PUT /items/reorder registered before PUT /items/{itemId} for correct chi static-before-param routing
- [Phase 05-template-data-model-and-api]: GenerateBudget returns 409 JSON with budget_id field using BudgetExistsError.ExistingBudgetID
- [Phase 06-template-frontend-and-workflow-replacement]: TemplatePage add form filters out already-added categories and renders amount input only for fixed tier
- [Phase 06-template-frontend-and-workflow-replacement]: Reorder swaps sort_order values between adjacent items and sends full updated list to PUT /template/items/reorder
### Pending Todos
@@ -82,6 +85,6 @@ None yet.
## Session Continuity
Last session: 2026-03-12T11:11:30.004Z
Stopped at: Completed 05-template-data-model-and-api-02-PLAN.md
Last session: 2026-03-12T12:06:05.513Z
Stopped at: Completed 06-template-frontend-and-workflow-replacement-01-PLAN.md
Resume file: None

126
.planning/phases/06-template-frontend-and-workflow-replacement/06-01-SUMMARY.md Normal file
View File

@@ -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