fix(reports/cartes): period buttons have no effect on KPIs #101

New issue

Closed

opened 2026-04-19 00:27:01 +00:00 by maximus · 0 comments

maximus commented

2026-04-19 00:27:01 +00:00

Owner

Contexte

Suite à la refonte des rapports (milestone spec-refonte-rapports), le rapport Cartes (/reports/cartes) expose un PeriodSelector ET un CompareReferenceMonthPicker. Les boutons du PeriodSelector (Ce mois / Ce trimestre / Cette année / YTD / etc.) ne rafraîchissent pas les KPIs.

Cause probable

ReportsCartesPage.tsx appelle PeriodSelector qui met à jour from/to/period via useReportsPeriod (query string).
Le hook useCartes ignore from/to et ne fetch que sur state.year / state.month.
Un useEffect([to]) synchronise year/month depuis to, mais getCartesSnapshot(year, month) n'utilise QUE le mois de référence — jamais la plage from/to sélectionnée.

Résultat : soit le PeriodSelector est fonctionnellement inutile sur cette page, soit l'UX est trompeuse (deux sélecteurs, un seul qui a un effet).

Proposition

Décider de l'intention :

A. Retirer PeriodSelector de /reports/cartes — le rapport Cartes est par design un snapshot "mois X vs X-1 vs X-12" ; un sélecteur de plage n'a pas de sens.

B. Ou bien faire en sorte que changer la période recentre automatiquement le mois de référence sur la fin de la période (déjà partiellement le cas via le useEffect([to])) et surtout s'assurer que chaque bouton produit un changement visible des KPIs.

Option A recommandée.

Bulle d'aide "Taux d'épargne"

Ajouter également dans cette issue une petite bulle d'aide (?) à côté du titre du KPI "Taux d'épargne" (KpiCard pour reports.cartes.savingsRate) qui explique la formule au survol.

Formule actuelle (dans src/services/reportService.ts, getCartesSnapshot) :

taux d'épargne = (revenus − dépenses) / revenus × 100

Calculée sur le mois de référence uniquement. Si revenus = 0, la valeur affichée est actuellement 0 % — à remplacer par —.

Tâches liées :

Composant KpiCard : accepter un prop optionnel tooltip?: string rendu via une icône ? (réutiliser lucide-react HelpCircle).
Traductions reports.cartes.savingsRateTooltip en FR/EN avec le texte de la formule.
Case income = 0 → afficher — au lieu de 0 %.

Note : l'issue #102 reste ouverte pour la documentation utilisateur plus large (guide-utilisateur.md, décision "mensuel vs YTD").

Fichiers concernés

src/pages/ReportsCartesPage.tsx
src/hooks/useCartes.ts
src/components/reports/cards/KpiCard.tsx
src/i18n/locales/{fr,en}.json

Critères d'acceptation

Les boutons de période visibles sur /reports/cartes produisent un effet visible et cohérent, OU le PeriodSelector est retiré de cette page.
La décision (A ou B) est documentée en commentaire dans ReportsCartesPage.tsx.
Le KpiCard "Taux d'épargne" affiche une bulle (?) avec la formule au survol (FR/EN).
Quand revenus = 0 sur le mois de référence, le KPI affiche — au lieu de 0 %.
CHANGELOG.md / CHANGELOG.fr.md mis à jour sous ## [Unreleased].

## Contexte Suite à la refonte des rapports (milestone `spec-refonte-rapports`), le rapport `Cartes` (`/reports/cartes`) expose un `PeriodSelector` ET un `CompareReferenceMonthPicker`. Les boutons du `PeriodSelector` (Ce mois / Ce trimestre / Cette année / YTD / etc.) ne rafraîchissent pas les KPIs. ## Cause probable - `ReportsCartesPage.tsx` appelle `PeriodSelector` qui met à jour `from`/`to`/`period` via `useReportsPeriod` (query string). - Le hook `useCartes` ignore `from`/`to` et ne fetch que sur `state.year` / `state.month`. - Un `useEffect([to])` synchronise `year`/`month` depuis `to`, mais `getCartesSnapshot(year, month)` n'utilise QUE le mois de référence — jamais la plage `from`/`to` sélectionnée. Résultat : soit le `PeriodSelector` est fonctionnellement inutile sur cette page, soit l'UX est trompeuse (deux sélecteurs, un seul qui a un effet). ## Proposition Décider de l'intention : **A.** Retirer `PeriodSelector` de `/reports/cartes` — le rapport Cartes est par design un snapshot "mois X vs X-1 vs X-12" ; un sélecteur de plage n'a pas de sens. **B.** Ou bien faire en sorte que changer la période recentre automatiquement le mois de référence sur la fin de la période (déjà partiellement le cas via le `useEffect([to])`) et surtout s'assurer que chaque bouton produit un changement visible des KPIs. Option A recommandée. ## Bulle d'aide "Taux d'épargne" Ajouter également dans cette issue une petite bulle d'aide **(?)** à côté du titre du KPI "Taux d'épargne" (`KpiCard` pour `reports.cartes.savingsRate`) qui explique la formule au survol. **Formule actuelle** (dans `src/services/reportService.ts`, `getCartesSnapshot`) : ``` taux d'épargne = (revenus − dépenses) / revenus × 100 ``` Calculée sur le mois de référence uniquement. Si `revenus = 0`, la valeur affichée est actuellement `0 %` — à remplacer par `—`. Tâches liées : - Composant `KpiCard` : accepter un prop optionnel `tooltip?: string` rendu via une icône `?` (réutiliser `lucide-react` `HelpCircle`). - Traductions `reports.cartes.savingsRateTooltip` en FR/EN avec le texte de la formule. - Case `income = 0` → afficher `—` au lieu de `0 %`. > Note : l'issue #102 reste ouverte pour la documentation utilisateur plus large (guide-utilisateur.md, décision "mensuel vs YTD"). ## Fichiers concernés - `src/pages/ReportsCartesPage.tsx` - `src/hooks/useCartes.ts` - `src/components/reports/cards/KpiCard.tsx` - `src/i18n/locales/{fr,en}.json` ## Critères d'acceptation - [ ] Les boutons de période visibles sur `/reports/cartes` produisent un effet visible et cohérent, OU le `PeriodSelector` est retiré de cette page. - [ ] La décision (A ou B) est documentée en commentaire dans `ReportsCartesPage.tsx`. - [ ] Le `KpiCard` "Taux d'épargne" affiche une bulle **(?)** avec la formule au survol (FR/EN). - [ ] Quand `revenus = 0` sur le mois de référence, le KPI affiche `—` au lieu de `0 %`. - [ ] `CHANGELOG.md` / `CHANGELOG.fr.md` mis à jour sous `## [Unreleased]`.