13 KiB
13 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 06-template-frontend-and-workflow-replacement | 02 | execute | 2 |
|
|
false |
|
|
Purpose: TMPL-03 requires auto-generating budgets from templates when navigating to a new month. TMPL-06 requires removing the old copy-from-previous flow entirely. Together these replace the legacy workflow with the new template system.
Output: Simplified budget creation flow using month picker + template generation, item tier visibility in trackers.
<execution_context> @/home/jean-luc-makiola/.claude/get-shit-done/workflows/execute-plan.md @/home/jean-luc-makiola/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/05-template-data-model-and-api/05-02-SUMMARY.md @.planning/phases/06-template-frontend-and-workflow-replacement/06-01-PLAN.mdFrom frontend/src/lib/api.ts (after Plan 01):
export type ItemTier = 'fixed' | 'variable' | 'one_off'
export interface BudgetItem {
// ... existing fields ...
item_tier: ItemTier
}
export const budgets = {
// ... existing methods ...
generate: (data: { month: string, currency: string }) =>
request<BudgetDetail>('/budgets/generate', { method: 'POST', body: JSON.stringify(data) }),
copyFrom: (id: string, srcId: string) => // TO BE REMOVED
request<BudgetDetail>(`/budgets/${id}/copy-from/${srcId}`, { method: 'POST' }),
}
From frontend/src/components/BudgetSetup.tsx (current):
interface Props {
existingBudgets: Budget[]
onCreated: () => void
onCancel: () => void
}
// Currently: manual form with name, dates, currency, carryover, copy-from-previous select
From backend API (Phase 5):
- POST /api/budgets/generate with { month: "2026-04", currency: "EUR" }
- Returns 201 with BudgetDetail (budget auto-named from locale month)
- Returns 409 with { error: "...", budget_id: "..." } if budget exists for that month
- If user has no template: creates empty budget with zero items
2. **Update `frontend/src/lib/api.ts`**:
- Remove the `copyFrom` method from the `budgets` object (TMPL-06: no more copy-from-previous)
3. **Update `frontend/src/pages/DashboardPage.tsx`**:
- No structural changes needed. The BudgetSetup component is already rendered when `showCreate` is true.
- The `handleBudgetCreated` callback already calls `fetchList()` which will pick up the newly generated budget.
4. **Update `frontend/src/components/BudgetSetup.test.tsx`**:
- Update test to reflect new month-picker UI instead of old manual form
- Remove any references to copyFrom mock
- Test that month input and currency input render
- Test that Generate button is present (not "Create")
5. **Update `frontend/src/pages/DashboardPage.test.tsx`**:
- Remove `copyFrom` from any budgets API mock objects
6. **Update i18n files** -- add to both en.json and de.json:
- EN: `"budget.generate": "Generate from Template"`, `"budget.month": "Month"`, `"budget.generating": "Generating..."`
- DE: `"budget.generate": "Aus Vorlage erstellen"`, `"budget.month": "Monat"`, `"budget.generating": "Wird erstellt..."`
- Remove `"budget.copyFrom"` key from both files (TMPL-06)
- Remove `"budget.setup"` key from both files (replaced by generate)
cd /home/jean-luc-makiola/Development/projects/SimpleFinanceDash/frontend && npx tsc --noEmit 2>&1 | head -30 && bun run build 2>&1 | tail -5
BudgetSetup shows month picker + currency + Generate button. No copy-from-previous UI anywhere. copyFrom removed from api.ts. Tests updated. Budget generation calls POST /api/budgets/generate.
Task 2: Display item_tier badge in tracker table rows
frontend/src/components/BillsTracker.tsx, frontend/src/components/VariableExpenses.tsx, frontend/src/components/DebtTracker.tsx
1. In each tracker component (`BillsTracker.tsx`, `VariableExpenses.tsx`, `DebtTracker.tsx`):
- Import `Badge` from `@/components/ui/badge`
- Import `useTranslation` (already imported in BillsTracker, verify for others)
- In each item table row, add a Badge after the category name cell showing the item tier:
- In the TableCell that shows `item.category_name`, append a Badge component:
```tsx
{item.category_name}
{t(`template.${item.item_tier === 'one_off' ? 'oneOff' : item.item_tier}`)}
```
- Badge shows translated tier name: "Fixed", "Variable", or "One-off" (using i18n keys added in Plan 01: `template.fixed`, `template.variable`, `template.oneOff`)
- The badge is purely informational -- no click behavior
- Use `variant="outline"` for a subtle, non-distracting appearance that works with the pastel theme
Note: The `item_tier` field is already on the `BudgetItem` interface (added in Plan 01). The backend already returns it. This task just makes it visible.
cd /home/jean-luc-makiola/Development/projects/SimpleFinanceDash/frontend && npx tsc --noEmit 2>&1 | head -30 && bun run build 2>&1 | tail -5
Each budget item row in BillsTracker, VariableExpenses, and DebtTracker displays a small outline badge showing its tier (Fixed/Variable/One-off), translated via i18n
Task 3: Verify template-based workflow replacement
none
Human verifies the complete template-based budget generation workflow end-to-end, including template page from Plan 01 and workflow replacement from this plan.
Human visual and functional verification
User confirms: month picker generates budgets from template, copy-from-previous is gone, item tier badges display correctly
Template-based budget generation workflow replacing manual creation and copy-from-previous. Item tier badges visible in all tracker tables.
1. Start the app: `cd frontend && bun run dev` (and ensure backend is running with `cd backend && go run ./cmd/server`)
2. Navigate to the Template page via sidebar -- verify it loads (from Plan 01)
3. Add a few template items (fixed with amounts, variable without)
4. Go to Dashboard, click "Create Budget"
5. Verify: month picker + currency input shown (NOT the old form with name/dates/carryover/copy-from)
6. Select a future month, click "Generate from Template"
7. Verify: budget is created and selected, items from template appear with correct amounts
8. Verify: each item row shows a small tier badge (Fixed/Variable/One-off)
9. Try generating the same month again -- should handle gracefully (409 case)
10. Confirm: "Copy from previous" dropdown is nowhere to be seen
Type "approved" or describe issues
- TypeScript compiles: `cd frontend && npx tsc --noEmit`
- Build succeeds: `cd frontend && bun run build`
- Tests pass: `cd frontend && bun vitest --run`
- No references to `copyFrom` remain in component code (only test mocks removed)
- `budgets.generate` function exists in api.ts
- BudgetSetup renders month input, not date range / name / carryover fields
<success_criteria>
- Creating a budget uses month picker + template generation (not manual form)
- Copy-from-previous UI and API function are completely removed
- 409 conflict (budget already exists) is handled gracefully
- Item tier badges display on all tracker table rows
- All text is i18n-translated
- Existing tests updated to reflect new UI </success_criteria>