[#5] Rapport Comparables : MoM / YoY / Reel vs budget

maximus commented

2026-04-13 15:04:07 +00:00

Owner

Objectif

Implémenter le rapport comparables avec navigation tabulaire entre 3 modes : Mois vs mois précédent, Année vs année précédente, Réel vs budget.

Spec : spec-refonte-rapports.md
Dépend de #70 (parallélisable avec #71, #72, #73)

Tâches

Services (SQL strictement paramétré)

Implémenter reportService.getCompareMonthOverMonth(year, month) — retourne CategoryDelta[] (catégorie, précédent, courant, deltaAbs, deltaPct)
Implémenter reportService.getCompareYearOverYear(year) — même forme sur 12 mois vs 12 mois
getBudgetVsActualData de budgetService.ts est réutilisé tel quel (pas de nouveau service pour le mode budget)
Aucune interpolation de chaîne dans les requêtes SQL — tout en paramètres

Hook

Compléter src/hooks/useCompare.ts avec reducer + fetch + loading/error
State : { mode: 'mom' | 'yoy' | 'budget', year, month, rows, loading, error }

Composants (plat dans `src/components/reports/`)

CompareModeTabs.tsx — tab bar secondaire (MoM / YoY / Budget)
ComparePeriodTable.tsx — tableau catégories × 2 colonnes + écart $ / %
ComparePeriodChart.tsx — diverging bar chart horizontal centré sur 0, patterns SVG via chartPatterns.tsx
CompareBudgetView.tsx — wrapper autour de BudgetVsActualTable.tsx existant avec toggle mensuel/annuel (YTD)

Page

Remplacer le placeholder de src/pages/ReportsComparePage.tsx par la vue finale
Compose CompareModeTabs + la vue correspondante au mode sélectionné
ViewModeToggle partagé, storage key reports-viewmode-compare
Période partagée via useReportsPeriod

i18n

Clés reports.compare.* en FR/EN (modeMoM, modeYoY, modeBudget, delta, current, previous, monthly, ytd, etc.)

Vérifications

/reports/compare affiche MoM par défaut
Bascule entre les 3 modes conserve la période et les filtres
Year-over-year sans données année précédente : empty-state reports.empty.noData
Toggle chart/table fonctionne sur MoM et YoY ; le mode budget garde sa présentation existante
npm run build vert

Critères d'acceptation

Les 3 modes (MoM / YoY / Budget) sont accessibles et retournent des données correctes
SQL strictement paramétré (grep pour ${ ou concat dans les nouveaux services : aucune occurrence)
Diverging bar chart respecte les couleurs de catégorie et les patterns SVG
Période partagée avec les autres sous-rapports via query string

## Objectif Implémenter le rapport **comparables** avec navigation tabulaire entre 3 modes : **Mois vs mois précédent**, **Année vs année précédente**, **Réel vs budget**. Spec : `spec-refonte-rapports.md` Dépend de #70 (parallélisable avec #71, #72, #73) ## Tâches ### Services (SQL strictement paramétré) - [ ] Implémenter `reportService.getCompareMonthOverMonth(year, month)` — retourne `CategoryDelta[]` (catégorie, précédent, courant, deltaAbs, deltaPct) - [ ] Implémenter `reportService.getCompareYearOverYear(year)` — même forme sur 12 mois vs 12 mois - [ ] `getBudgetVsActualData` de `budgetService.ts` est réutilisé tel quel (pas de nouveau service pour le mode budget) - [ ] **Aucune** interpolation de chaîne dans les requêtes SQL — tout en paramètres ### Hook - [ ] Compléter `src/hooks/useCompare.ts` avec reducer + fetch + loading/error - [ ] State : `{ mode: 'mom' | 'yoy' | 'budget', year, month, rows, loading, error }` ### Composants (plat dans `src/components/reports/`) - [ ] `CompareModeTabs.tsx` — tab bar secondaire (MoM / YoY / Budget) - [ ] `ComparePeriodTable.tsx` — tableau catégories × 2 colonnes + écart $ / % - [ ] `ComparePeriodChart.tsx` — diverging bar chart horizontal centré sur 0, patterns SVG via `chartPatterns.tsx` - [ ] `CompareBudgetView.tsx` — wrapper autour de `BudgetVsActualTable.tsx` existant avec toggle mensuel/annuel (YTD) ### Page - [ ] Remplacer le placeholder de `src/pages/ReportsComparePage.tsx` par la vue finale - [ ] Compose `CompareModeTabs` + la vue correspondante au mode sélectionné - [ ] `ViewModeToggle` partagé, storage key `reports-viewmode-compare` - [ ] Période partagée via `useReportsPeriod` ### i18n - [ ] Clés `reports.compare.*` en FR/EN (modeMoM, modeYoY, modeBudget, delta, current, previous, monthly, ytd, etc.) ### Vérifications - [ ] `/reports/compare` affiche MoM par défaut - [ ] Bascule entre les 3 modes conserve la période et les filtres - [ ] Year-over-year sans données année précédente : empty-state `reports.empty.noData` - [ ] Toggle chart/table fonctionne sur MoM et YoY ; le mode budget garde sa présentation existante - [ ] `npm run build` vert ## Critères d'acceptation - Les 3 modes (MoM / YoY / Budget) sont accessibles et retournent des données correctes - SQL strictement paramétré (grep pour `${` ou concat dans les nouveaux services : aucune occurrence) - Diverging bar chart respecte les couleurs de catégorie et les patterns SVG - Période partagée avec les autres sous-rapports via query string