maximus/Simpl-Resultat
1
0
Fork 0
Code Issues 5 Pull requests 1 Projects Releases 18 Packages Wiki Activity Actions 2

refactor: rapports comparables — dropdown mois, toggle MoM/YoY, barres groupees #96

New issue
Closed
opened 2026-04-15 14:36:57 +00:00 by maximus · 0 comments
maximus commented 2026-04-15 14:36:57 +00:00
Owner
Copy link

Contexte

Le rapport Compare (/reports/compare, livré en #73 / commit ff350d7, ADR 0007) expose actuellement trois onglets : MoM, YoY, Réel vs budget. Les onglets MoM/YoY ne sont pas probants : même graphique de répartition par catégorie, information peu actionnable.

Cette issue couvre uniquement la refonte de la page Compare. La nouvelle page "Cartes" (vue dashboard riche, KPI + sparklines + top movers) est suivie dans une issue séparée et peut être développée en parallèle (seuls reportService.ts et les fichiers i18n se chevauchent).

Travail à faire

  • Réduire les onglets Compare à 2 modes : Réel vs réel + Réel vs budget (budget inchangé)
  • Onglet Réel vs réel :
    • Dropdown mois en en-tête (option principale, intégration visuelle cohérente avec BudgetVsActualTable)
    • Conserver le PeriodSelector partagé (useReportsPeriod) en complément
    • Défaut = mois précédent (relatif à la date courante)
    • Toggle MoM ↔ YoY (exclusif, un seul delta affiché à la fois)
    • Graphique : barres groupées côte-à-côte (Option A) — pour chaque catégorie, 2 barres : mois de référence vs période comparée
    • Table delta signée : catégorie, période de référence, période comparée, Δ$, Δ%

Fichiers concernés

  • src/pages/ReportsComparePage.tsx — retirer la logique 3-tabs, câbler le dropdown mois + toggle MoM/YoY
  • src/components/reports/CompareModeTabs.tsx — passer à 2 modes
  • src/components/reports/ComparePeriodChart.tsx — réécriture pour barres groupées (BarChart groupé, Recharts)
  • src/components/reports/ComparePeriodTable.tsx — adapter en-têtes pour refléter le toggle MoM/YoY
  • src/hooks/useCompare.ts — refactor du reducer : toggle MoM/YoY + mois de référence explicite
  • src/services/reportService.ts (lignes 391-450) — getCompareMonthOverMonth / getCompareYearOverYear conservés, potentiellement fusionnés derrière getCompareByReference(referenceMonth, mode)
  • src/i18n/locales/{fr,en}.json — clés reports.compare.toggleMoM, reports.compare.toggleYoY, retrait des anciennes modeMoM / modeYoY
  • CHANGELOG.md + CHANGELOG.fr.md — entrée ## [Unreleased]
  • docs/adr/0007-reports-hub-refactor.md — note de suivi si structure hub modifiée

Critères d'acceptation

  • Page Compare expose 2 onglets (Réel vs réel + Réel vs budget)
  • Dropdown mois en header, défaut = mois précédent
  • Toggle MoM ↔ YoY fonctionnel, la table + le graphique se mettent à jour sans rechargement
  • Graphique = barres groupées côte-à-côte (2 barres par catégorie)
  • PeriodSelector partagé reste accessible
  • Tests vitest couvrent : toggle MoM/YoY, wrap-around janvier, delta avec previousAmount = 0
  • i18n FR + EN complète
  • CHANGELOG mis à jour

Complexité estimée

Medium — backend SQL existe déjà, le travail est principalement UI + hook + réécriture du chart.

Parallélisation

Compatible avec la nouvelle page Cartes : seuls reportService.ts et i18n/locales/*.json se chevauchent, conflits mineurs.

## Contexte Le rapport `Compare` (`/reports/compare`, livré en #73 / commit `ff350d7`, ADR 0007) expose actuellement **trois onglets** : MoM, YoY, Réel vs budget. Les onglets MoM/YoY ne sont pas probants : même graphique de répartition par catégorie, information peu actionnable. Cette issue couvre **uniquement la refonte de la page Compare**. La nouvelle page "Cartes" (vue dashboard riche, KPI + sparklines + top movers) est suivie dans une issue séparée et peut être développée en parallèle (seuls `reportService.ts` et les fichiers i18n se chevauchent). ## Travail à faire - [ ] Réduire les onglets Compare à **2 modes** : `Réel vs réel` + `Réel vs budget` (budget inchangé) - [ ] Onglet `Réel vs réel` : - [ ] **Dropdown mois** en en-tête (option principale, intégration visuelle cohérente avec `BudgetVsActualTable`) - [ ] Conserver le `PeriodSelector` partagé (`useReportsPeriod`) en complément - [ ] Défaut = **mois précédent** (relatif à la date courante) - [ ] **Toggle MoM ↔ YoY** (exclusif, un seul delta affiché à la fois) - [ ] **Graphique : barres groupées côte-à-côte** (Option A) — pour chaque catégorie, 2 barres : mois de référence vs période comparée - [ ] Table delta signée : catégorie, période de référence, période comparée, Δ$, Δ% ## Fichiers concernés - `src/pages/ReportsComparePage.tsx` — retirer la logique 3-tabs, câbler le dropdown mois + toggle MoM/YoY - `src/components/reports/CompareModeTabs.tsx` — passer à 2 modes - `src/components/reports/ComparePeriodChart.tsx` — réécriture pour barres groupées (`BarChart` groupé, Recharts) - `src/components/reports/ComparePeriodTable.tsx` — adapter en-têtes pour refléter le toggle MoM/YoY - `src/hooks/useCompare.ts` — refactor du reducer : toggle MoM/YoY + mois de référence explicite - `src/services/reportService.ts` (lignes 391-450) — `getCompareMonthOverMonth` / `getCompareYearOverYear` conservés, potentiellement fusionnés derrière `getCompareByReference(referenceMonth, mode)` - `src/i18n/locales/{fr,en}.json` — clés `reports.compare.toggleMoM`, `reports.compare.toggleYoY`, retrait des anciennes `modeMoM` / `modeYoY` - `CHANGELOG.md` + `CHANGELOG.fr.md` — entrée `## [Unreleased]` - `docs/adr/0007-reports-hub-refactor.md` — note de suivi si structure hub modifiée ## Critères d'acceptation - [ ] Page Compare expose 2 onglets (`Réel vs réel` + `Réel vs budget`) - [ ] Dropdown mois en header, défaut = mois précédent - [ ] Toggle MoM ↔ YoY fonctionnel, la table + le graphique se mettent à jour sans rechargement - [ ] Graphique = barres groupées côte-à-côte (2 barres par catégorie) - [ ] `PeriodSelector` partagé reste accessible - [ ] Tests vitest couvrent : toggle MoM/YoY, wrap-around janvier, delta avec `previousAmount = 0` - [ ] i18n FR + EN complète - [ ] CHANGELOG mis à jour ## Complexité estimée **Medium** — backend SQL existe déjà, le travail est principalement UI + hook + réécriture du chart. ## Parallélisation Compatible avec la nouvelle page Cartes : seuls `reportService.ts` et `i18n/locales/*.json` se chevauchent, conflits mineurs.
maximus changed title from les rapports comparables ne montrent pas la bonne chose to refactor: rapports comparables — dropdown mois, toggle MoM/YoY, barres groupées 2026-04-15 17:57:02 +00:00
maximus changed title from refactor: rapports comparables — dropdown mois, toggle MoM/YoY, barres groupées to refactor: rapports comparables — dropdown mois, toggle MoM/YoY, barres groupees 2026-04-15 17:57:10 +00:00
maximus added the
source:human
status:ready
type:refactor
 labels 2026-04-15 17:57:18 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
issue-67-feedback-widget
issue-97-cartes-page
issue-96-compare-refactor
issue-51-compte-maximus-oauth
issue-46-license-commands-entitlements
issue-48-gate-auto-updates
issue-47-license-ui-card
fix/simpl-resultat-54-argon2id-pin
fix/simpl-resultat-59-bump-vite
issue-43-update-picomatch
fix/simpl-resultat-41-category-time-report-filter
fix/simpl-resultat-31-dashboard-month-dropdown
fix/simpl-resultat-29-budget-visual-adjustments
fix/simpl-resultat-23-dashboard-category-ordering
fix/simpl-resultat-16-prev-year-budget
fix/simpl-resultat-19-tooltip-transparency
fix/simpl-resultat-17-remove-piechart-title
fix/simpl-resultat-16-budget-previous-year
v0.8.1
v0.8.0
v0.7.4
v0.7.3
v0.7.2
v0.7.1
v0.7.0
v0.6.7
v0.6.6
v0.6.5
v0.6.4
v0.6.3
v0.6.2
v0.6.1
v0.6.0
v0.5.2
v0.5.0
v0.4.2
v0.4.0
v0.3.11
v0.3.10
v0.3.9
v0.3.8
v0.3.7
v0.3.6
v0.3.5
v0.3.4
v0.3.3
v0.3.2
v0.3.1
v0.3.0
v0.2.12
v0.2.11
v0.2.10
v0.2.9
v0.2.8
v0.2.7
v0.2.6
v0.2.5
v0.2.4
v0.2.3
v0.2.2
v0.2.1
v0.2.0
v0.1.2
v0.1.1
v0.1.0
Labels
Clear labels   
source:analyste

Créée par le Super-Analyste

  
source:defenseur

Créée par l Escouade Défenseur

  
source:human

Créée par un humain

  
source:medic

Créée par le Medic (auto-détection)

  
status:approved

PR approuvée, prête à merger

  
status:blocked

Bloquée (question, dépendance, clarification)

  
status:in-progress

Un agent (Medic/Dev) travaille dessus

  
status:needs-fix

Reviewer demande des corrections

  
status:ready

Analysée et documentée, prête à prendre

  
status:review

PR créée, en attente du Reviewer

  
status:triage

Nouvelle issue, pas encore analysée

  
type:bug

Correction de bug → Medic

  
type:feature

Nouvelle fonctionnalité → Dev

  
type:infra

Config, CI/CD, déploiement → Dev

  
type:refactor

Refactoring / amélioration technique → Dev

  
type:schema

Modèle de données / migrations → Dev

  
type:security

Issue de sécurité → Medic ou Dev

No labels
source:analyste
source:defenseur
source:human
source:medic
status:approved
status:blocked
status:in-progress
status:needs-fix
status:ready
status:review
status:triage
type:bug
type:feature
type:infra
type:refactor
type:schema
type:security
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: maximus/Simpl-Resultat#96
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?