SimpleFinanceDash/.planning/phases/01-design-foundation-and-primitives/01-01-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
01-design-foundation-and-primitives	01	execute	1		src/components/ui/chart.tsx src/components/ui/collapsible.tsx src/index.css src/i18n/en.json src/i18n/de.json	true	UI-DESIGN-01 UI-DASH-01	truths artifacts key_links shadcn chart primitive is installed and ChartContainer is importable from @/components/ui/chart shadcn collapsible primitive is installed and Collapsible is importable from @/components/ui/collapsible chart.tsx contains initialDimension={{ width: 320, height: 200 }} on ResponsiveContainer index.css @theme inline block contains semantic status tokens --color-over-budget and --color-on-budget index.css @theme inline block contains chart fill variants for all 6 category types Both en.json and de.json have matching new dashboard keys at parity path provides contains src/components/ui/chart.tsx ChartContainer, ChartTooltip, ChartTooltipContent wrappers initialDimension path provides src/components/ui/collapsible.tsx Collapsible, CollapsibleTrigger, CollapsibleContent path provides contains src/index.css Extended OKLCH tokens with semantic status colors and chart fills --color-over-budget path provides contains src/i18n/en.json English dashboard translation keys carryover path provides contains src/i18n/de.json German dashboard translation keys carryover from to via pattern src/index.css Tailwind utility classes @theme inline CSS variables --color-(over-budget|on-budget|income-fill)

Install shadcn UI primitives (chart, collapsible), apply the Recharts v3 compatibility patch, extend the OKLCH color token system with richer chroma and semantic status tokens, and add new i18n keys for the dashboard redesign.

Purpose: Establish the lowest-level design system building blocks that Plan 02 components and all subsequent phases depend on. Without tokens and primitives, no component can reference semantic colors or chart wrappers.

Output: Patched chart.tsx, collapsible.tsx, extended index.css tokens, and parity-checked i18n keys in both languages.

<execution_context> @/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md @/home/jlmak/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/01-design-foundation-and-primitives/01-RESEARCH.md

@src/index.css @src/i18n/en.json @src/i18n/de.json @components.json

Task 1: Install shadcn primitives and patch chart.tsx src/components/ui/chart.tsx, src/components/ui/collapsible.tsx 1. Run `npx shadcn@latest add chart` to generate `src/components/ui/chart.tsx`. This installs the ChartContainer, ChartTooltip, and ChartTooltipContent wrappers around Recharts.

2. Open the generated src/components/ui/chart.tsx and find the ResponsiveContainer element inside the ChartContainer component. Add the initialDimension prop to fix the Recharts v3 compatibility issue (shadcn-ui/ui#9892):

   BEFORE:

   <RechartsPrimitive.ResponsiveContainer>
   

   AFTER:

   <RechartsPrimitive.ResponsiveContainer
     initialDimension={{ width: 320, height: 200 }}
   >
   

   NOTE: If the generated file ALREADY contains initialDimension (meaning PR #8486 has merged), skip the manual patch.

3. Run npx shadcn@latest add collapsible to generate src/components/ui/collapsible.tsx. No post-install patch needed.

4. Verify both files are importable by confirming npm run build passes.

IMPORTANT: Do NOT install any npm packages manually. The shadcn CLI generates component files from the existing radix-ui and recharts packages already in package.json. npm run build chart.tsx exists with initialDimension patch applied, collapsible.tsx exists, both are importable, build passes with zero errors.

Task 2: Extend color tokens and add i18n keys src/index.css, src/i18n/en.json, src/i18n/de.json **Part A: Extend color tokens in index.css**

Open src/index.css and modify the @theme inline block. Keep ALL existing tokens unchanged. Add the following new tokens AFTER the existing --color-chart-5 line and BEFORE --radius:

1. Semantic status tokens (for budget comparison display):

   /* Semantic Status Tokens */
   --color-over-budget:   oklch(0.55 0.20 25);
   --color-on-budget:     oklch(0.50 0.17 155);
   --color-budget-bar-bg: oklch(0.92 0.01 260);
   

2. Chart fill variants (lighter versions of category colors for non-text chart fills at 3:1 minimum contrast):

   /* Chart Fill Variants */
   --color-income-fill:           oklch(0.68 0.19 155);
   --color-bill-fill:             oklch(0.65 0.19 25);
   --color-variable-expense-fill: oklch(0.70 0.18 50);
   --color-debt-fill:             oklch(0.60 0.20 355);
   --color-saving-fill:           oklch(0.68 0.18 220);
   --color-investment-fill:       oklch(0.65 0.18 285);
   

3. Update the existing 6 category color tokens to darker values for WCAG 4.5:1 text contrast against white (--color-card = oklch(1 0 0)):

   --color-income:           oklch(0.55 0.17 155);
   --color-bill:             oklch(0.55 0.17 25);
   --color-variable-expense: oklch(0.58 0.16 50);
   --color-debt:             oklch(0.52 0.18 355);
   --color-saving:           oklch(0.55 0.16 220);
   --color-investment:       oklch(0.55 0.16 285);
   

Do NOT modify any other existing tokens (background, foreground, primary, secondary, muted, accent, destructive, border, input, ring, sidebar-*). Do NOT modify the chart-1 through chart-5 tokens (they are used by shadcn chart config and will be updated separately in Phase 2 if needed).

Part B: Add i18n keys to en.json

Add the following keys to the "dashboard" section in src/i18n/en.json. Merge with existing keys (do not overwrite existing ones like "title", "totalIncome", "totalExpenses", "availableBalance", "expenseBreakdown", "noBudget"):

"dashboard": {
  "title": "Dashboard",
  "totalIncome": "Total Income",
  "totalExpenses": "Total Expenses",
  "netBalance": "Net Balance",
  "availableBalance": "Available Balance",
  "expenseBreakdown": "Expense Breakdown",
  "noBudget": "No budget for this month. Create one to get started.",
  "carryover": "Carryover",
  "vsBudget": "vs budget",
  "overBudget": "over budget",
  "underBudget": "under budget",
  "onTrack": "On track",
  "loading": "Loading dashboard..."
}

New keys being added: "carryover", "vsBudget", "overBudget", "underBudget", "onTrack", "loading".

Part C: Add matching German i18n keys to de.json

Add the same new keys to the "dashboard" section in src/i18n/de.json:

"dashboard": {
  "title": "Dashboard",
  "totalIncome": "Gesamteinkommen",
  "totalExpenses": "Gesamtausgaben",
  "netBalance": "Nettobilanz",
  "availableBalance": "Verfügbares Guthaben",
  "expenseBreakdown": "Ausgabenübersicht",
  "noBudget": "Kein Budget für diesen Monat. Erstelle eines, um loszulegen.",
  "carryover": "Übertrag",
  "vsBudget": "vs Budget",
  "overBudget": "über Budget",
  "underBudget": "unter Budget",
  "onTrack": "Im Plan",
  "loading": "Dashboard wird geladen..."
}

IMPORTANT: Both language files MUST be updated in the same commit. Verify key count parity: en.json and de.json should have the same number of total keys after changes. npm run build && npm run lint index.css contains --color-over-budget, --color-on-budget, --color-budget-bar-bg, 6 chart fill variants, and darkened category text colors. en.json and de.json both contain the 6 new dashboard keys (carryover, vsBudget, overBudget, underBudget, onTrack, loading) at parity.

1. `npm run build` passes (TypeScript type-check + Vite bundling) 2. `npm run lint` passes (ESLint) 3. `src/components/ui/chart.tsx` contains `initialDimension` 4. `src/components/ui/collapsible.tsx` exists and exports Collapsible components 5. `src/index.css` contains `--color-over-budget`, `--color-on-budget`, `--color-budget-bar-bg`, and 6 `*-fill` variants 6. Both en.json and de.json contain "carryover", "vsBudget", "overBudget", "underBudget", "onTrack", "loading" under dashboard section

<success_criteria>

• Build passes with zero errors
• All shadcn primitives installed (chart.tsx with patch, collapsible.tsx)
• Color token system extended with semantic status tokens and two-tier category colors
• i18n keys at parity between en.json and de.json </success_criteria>

After completion, create `.planning/phases/01-design-foundation-and-primitives/01-01-SUMMARY.md`