#98 - refactor: compare report — Actual-vs-actual mode with reference month picker (#96) - maximus/Simpl-Resultat

maximus commented

2026-04-15 18:25:01 +00:00

Owner

Summary

Collapse the three Compare tabs (MoM / YoY / Budget) into two modes: Actual vs actual + Actual vs budget. The actual-vs-actual view exposes an explicit reference-month dropdown in the header (defaults to the previous month, wraps around January) and a MoM ↔ YoY sub-toggle.
The chart is rewritten to a grouped side-by-side BarChart — two bars per category (reference period vs comparison period) — so both values are visible at a glance instead of only the delta.
The URL PeriodSelector stays in sync with the reference month picker: navigating via the dropdown or the period selector both update the underlying reference year/month.
Pure helpers previousMonth(), defaultReferencePeriod(), comparisonMeta() extracted from useCompare and covered by 9 new vitest cases (January wrap-around for both MoM and YoY, default reference period from an arbitrary "today", month/year arithmetic).
reportService.ts is unchanged — getCompareMonthOverMonth(year, month) and getCompareYearOverYear(year) already accepted the right parameters.

Test plan

npm run build — green (tsc + vite)
npm test — 71/71 vitest cases passing (9 new in useCompare.test.ts)
Manual QA in the desktop app:
- Reference month dropdown defaults to the previous month on first render
- Switching MoM ↔ YoY re-fetches and updates both chart and table labels
- Grouped bar chart shows two bars per category, sorted by current-period amount
- January selection shows December of previous year as the MoM comparison
- Budget mode still renders BudgetVsActualTable correctly
- PeriodSelector (e.g. "Last 12 months") still updates the reference month
- Dark mode rendering of the new chart/picker/toggle components
- FR and EN translations both render correctly

Closes #96

## Summary - Collapse the three Compare tabs (MoM / YoY / Budget) into two modes: `Actual vs actual` + `Actual vs budget`. The actual-vs-actual view exposes an explicit **reference-month dropdown** in the header (defaults to the previous month, wraps around January) and a **MoM ↔ YoY sub-toggle**. - The **chart is rewritten** to a grouped side-by-side `BarChart` — two bars per category (reference period vs comparison period) — so both values are visible at a glance instead of only the delta. - The URL `PeriodSelector` stays in sync with the reference month picker: navigating via the dropdown or the period selector both update the underlying reference year/month. - Pure helpers `previousMonth()`, `defaultReferencePeriod()`, `comparisonMeta()` extracted from `useCompare` and covered by 9 new vitest cases (January wrap-around for both MoM and YoY, default reference period from an arbitrary "today", month/year arithmetic). - `reportService.ts` is unchanged — `getCompareMonthOverMonth(year, month)` and `getCompareYearOverYear(year)` already accepted the right parameters. ## Test plan - [x] `npm run build` — green (tsc + vite) - [x] `npm test` — 71/71 vitest cases passing (9 new in `useCompare.test.ts`) - [ ] Manual QA in the desktop app: - [ ] Reference month dropdown defaults to the previous month on first render - [ ] Switching MoM ↔ YoY re-fetches and updates both chart and table labels - [ ] Grouped bar chart shows two bars per category, sorted by current-period amount - [ ] January selection shows December of previous year as the MoM comparison - [ ] Budget mode still renders `BudgetVsActualTable` correctly - [ ] `PeriodSelector` (e.g. "Last 12 months") still updates the reference month - [ ] Dark mode rendering of the new chart/picker/toggle components - [ ] FR and EN translations both render correctly Closes #96

maximus added 1 commit 2026-04-15 18:25:02 +00:00

refactor(reports/compare): unify MoM/YoY under one Actual-vs-actual mode with reference month picker (#96 )

PR Check / rust (push) Successful in 24m37s

Details

PR Check / frontend (push) Successful in 2m21s

Details

PR Check / rust (pull_request) Successful in 24m25s

Details

PR Check / frontend (pull_request) Successful in 2m26s

Details

4116db4090

Collapse the three Compare tabs (MoM / YoY / Budget) into two modes. The
new "Actual vs actual" mode exposes an explicit reference-month dropdown
in the header (defaults to the previous month, wraps around January) and
a MoM/YoY sub-toggle. The chart is rewritten to a grouped side-by-side
BarChart with two bars per category (reference period vs comparison
period) so both values are visible at a glance instead of just the
delta. The URL PeriodSelector stays in sync with the reference month.

- useCompare: state splits into { mode: "actual"|"budget", subMode:
  "mom"|"yoy", year, month }. Pure helpers previousMonth(),
  defaultReferencePeriod(), comparisonMeta() extracted for tests
- CompareModeTabs: 2 modes instead of 3
- New CompareSubModeToggle and CompareReferenceMonthPicker components
- ComparePeriodChart: grouped bars via two <Bar dataKey="..."/> on a
  vertical BarChart
- i18n: modeActual / subModeMoM / subModeYoY / referenceMonth (FR+EN),
  retire modeMoM / modeYoY
- 9 new vitest cases covering the pure helpers (January wrap-around for
  both MoM and YoY, default reference period, month/year arithmetic)

Closes #96

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

maximus referenced this pull request

2026-04-15 22:22:40 +00:00

feat: new Cartes dashboard report — KPI cards, sparklines, top movers (#97) #99

maximus merged commit 5fd2108d07 into main

2026-04-15 23:10:24 +00:00

refactor: compare report — Actual-vs-actual mode with reference month picker (#96) #98

Summary

Test plan