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

feat: nouvelle page Rapports/Cartes — dashboard KPI + sparklines + top movers #97

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

Contexte

Suite à l'analyse d'#96, la refonte du rapport Compare ne suffit pas à couvrir le besoin de vision financière comparable globale. Cette issue introduit une nouvelle page /reports/cartes dans le hub Rapports — un tableau de bord riche axé KPI + visualisations comparables, inspiré des dashboards financiers modernes (YNAB, Monarch).

Peut être développée en parallèle d'#96 : seuls reportService.ts et les fichiers i18n se chevauchent, conflits mineurs.

Objectif

Donner à l'utilisateur une vue d'ensemble de son mois de référence avec toutes les comparaisons pertinentes (MoM + YoY simultanées), en un seul écran.

Contenu de la page

1. Sélecteur de mois

  • Dropdown en en-tête, défaut = mois précédent
  • Partagé avec Compare via useReportsPeriod (query string ?to=YYYY-MM-DD)

2. KPI cards (4 cartes)

Chaque carte affiche :

  • Valeur du mois de référence
  • Δ MoM (vs mois précédent) et Δ YoY (vs même mois l'an passé), affichés simultanément
  • Sparkline 13 derniers mois avec la case de référence en surbrillance

Cartes :

  • Revenus (somme amount > 0)
  • Dépenses (somme |amount| sur amount < 0)
  • Solde net (revenus - dépenses)
  • Taux d'épargne (solde / revenus, en %)

3. Bar chart dual 12 mois

  • Revenus (vert) vs Dépenses (rouge) superposés, 12 derniers mois
  • Ligne de solde net en overlay

4. Top mouvements du mois (2 colonnes)

  • Top 5 catégories qui ont le plus augmenté (Δ MoM descendant)
  • Top 5 catégories qui ont le plus diminué
  • Chaque ligne cliquable → /reports/category?cat=X

5. Carte "vs Budget"

  • Score d'adhérence au budget du mois (N/M catégories dans la cible)
  • Top 3 pires écarts avec barres de progression
  • Lien vers l'onglet budget de Compare

6. Carte "Saisonnalité"

  • Ce mois vs moyenne du même mois sur N-1, N-2 (années précédentes disponibles)
  • Permet de détecter si un pic est saisonnier ou anormal

Fichiers à créer

  • src/pages/ReportsCartesPage.tsx
  • src/components/reports/cards/KpiCard.tsx
  • src/components/reports/cards/KpiSparkline.tsx
  • src/components/reports/cards/IncomeExpenseOverlayChart.tsx
  • src/components/reports/cards/TopMoversList.tsx
  • src/components/reports/cards/BudgetAdherenceCard.tsx
  • src/components/reports/cards/SeasonalityCard.tsx
  • src/hooks/useCartes.ts

Fichiers à modifier

  • src/services/reportService.ts — ajouter getCartesSnapshot(referenceMonth) qui retourne en un seul appel : KPI actuels, MoM, YoY, sparkline 13 mois, top movers, budget adherence, saisonnalité
  • src/App.tsx — route /reports/cartes
  • src/pages/ReportsPage.tsx — nouvelle card hub pour Cartes
  • src/i18n/locales/{fr,en}.json — clés reports.cartes.*
  • CHANGELOG.md + CHANGELOG.fr.md — entrée ## [Unreleased]
  • docs/architecture.md — ajout page Cartes + hook/service
  • docs/adr/0007-reports-hub-refactor.md — mise à jour ou nouveau ADR 0008 si la structure hub diverge significativement

Critères d'acceptation

  • Page /reports/cartes accessible depuis le hub Rapports
  • Sélecteur de mois en header, défaut = mois précédent, partagé avec Compare
  • 4 KPI cards (revenus, dépenses, solde, épargne) avec MoM + YoY simultanés
  • Sparkline 13 mois dans chaque KPI card
  • Bar chart 12 mois revenus vs dépenses + ligne solde net
  • Top 5 augmentations + top 5 baisses MoM, cliquables vers /reports/category
  • Carte budget adherence avec 3 pires écarts
  • Carte saisonnalité (si ≥ 1 année de données disponibles)
  • Un seul appel getCartesSnapshot() remonte toutes les données de la page
  • Tests vitest sur getCartesSnapshot : wrap-around janvier, données < 13 mois, taux d'épargne divisé par zéro, saisonnalité sans historique
  • i18n FR + EN complète
  • Performance : < 200ms pour fetch complet sur profil de 50k transactions
  • CHANGELOG + ADR/architecture mis à jour

Complexité estimée

Complex — 7+ nouveaux composants, 1 hook, 1 service agrégé avec snapshot temporel multi-périodes, plusieurs nouvelles visualisations.

Dépendances

Aucune dépendance bloquante avec #96. Peut démarrer immédiatement en parallèle.

## Contexte Suite à l'analyse d'#96, la refonte du rapport Compare ne suffit pas à couvrir le besoin de **vision financière comparable globale**. Cette issue introduit une **nouvelle page `/reports/cartes`** dans le hub Rapports — un tableau de bord riche axé KPI + visualisations comparables, inspiré des dashboards financiers modernes (YNAB, Monarch). Peut être développée **en parallèle d'#96** : seuls `reportService.ts` et les fichiers i18n se chevauchent, conflits mineurs. ## Objectif Donner à l'utilisateur une vue d'ensemble de son mois de référence avec toutes les comparaisons pertinentes (MoM + YoY simultanées), en un seul écran. ## Contenu de la page ### 1. Sélecteur de mois - Dropdown en en-tête, défaut = mois précédent - Partagé avec Compare via `useReportsPeriod` (query string `?to=YYYY-MM-DD`) ### 2. KPI cards (4 cartes) Chaque carte affiche : - Valeur du mois de référence - Δ MoM (vs mois précédent) **et** Δ YoY (vs même mois l'an passé), affichés simultanément - Sparkline 13 derniers mois avec la case de référence en surbrillance Cartes : - [ ] **Revenus** (somme `amount > 0`) - [ ] **Dépenses** (somme `|amount| sur amount < 0`) - [ ] **Solde net** (revenus - dépenses) - [ ] **Taux d'épargne** (solde / revenus, en %) ### 3. Bar chart dual 12 mois - [ ] Revenus (vert) vs Dépenses (rouge) superposés, 12 derniers mois - [ ] Ligne de solde net en overlay ### 4. Top mouvements du mois (2 colonnes) - [ ] Top 5 catégories qui ont **le plus augmenté** (Δ MoM descendant) - [ ] Top 5 catégories qui ont **le plus diminué** - [ ] Chaque ligne cliquable → `/reports/category?cat=X` ### 5. Carte "vs Budget" - [ ] Score d'adhérence au budget du mois (`N/M catégories dans la cible`) - [ ] Top 3 pires écarts avec barres de progression - [ ] Lien vers l'onglet budget de Compare ### 6. Carte "Saisonnalité" - [ ] Ce mois vs moyenne du même mois sur N-1, N-2 (années précédentes disponibles) - [ ] Permet de détecter si un pic est saisonnier ou anormal ## Fichiers à créer - `src/pages/ReportsCartesPage.tsx` - `src/components/reports/cards/KpiCard.tsx` - `src/components/reports/cards/KpiSparkline.tsx` - `src/components/reports/cards/IncomeExpenseOverlayChart.tsx` - `src/components/reports/cards/TopMoversList.tsx` - `src/components/reports/cards/BudgetAdherenceCard.tsx` - `src/components/reports/cards/SeasonalityCard.tsx` - `src/hooks/useCartes.ts` ## Fichiers à modifier - `src/services/reportService.ts` — ajouter `getCartesSnapshot(referenceMonth)` qui retourne en un seul appel : KPI actuels, MoM, YoY, sparkline 13 mois, top movers, budget adherence, saisonnalité - `src/App.tsx` — route `/reports/cartes` - `src/pages/ReportsPage.tsx` — nouvelle card hub pour Cartes - `src/i18n/locales/{fr,en}.json` — clés `reports.cartes.*` - `CHANGELOG.md` + `CHANGELOG.fr.md` — entrée `## [Unreleased]` - `docs/architecture.md` — ajout page Cartes + hook/service - `docs/adr/0007-reports-hub-refactor.md` — mise à jour ou nouveau ADR 0008 si la structure hub diverge significativement ## Critères d'acceptation - [ ] Page `/reports/cartes` accessible depuis le hub Rapports - [ ] Sélecteur de mois en header, défaut = mois précédent, partagé avec Compare - [ ] 4 KPI cards (revenus, dépenses, solde, épargne) avec MoM + YoY simultanés - [ ] Sparkline 13 mois dans chaque KPI card - [ ] Bar chart 12 mois revenus vs dépenses + ligne solde net - [ ] Top 5 augmentations + top 5 baisses MoM, cliquables vers `/reports/category` - [ ] Carte budget adherence avec 3 pires écarts - [ ] Carte saisonnalité (si ≥ 1 année de données disponibles) - [ ] Un seul appel `getCartesSnapshot()` remonte toutes les données de la page - [ ] Tests vitest sur `getCartesSnapshot` : wrap-around janvier, données < 13 mois, taux d'épargne divisé par zéro, saisonnalité sans historique - [ ] i18n FR + EN complète - [ ] Performance : < 200ms pour fetch complet sur profil de 50k transactions - [ ] CHANGELOG + ADR/architecture mis à jour ## Complexité estimée **Complex** — 7+ nouveaux composants, 1 hook, 1 service agrégé avec snapshot temporel multi-périodes, plusieurs nouvelles visualisations. ## Dépendances Aucune dépendance bloquante avec #96. Peut démarrer immédiatement en parallèle.
maximus added the
status:ready
type:feature
source:human
 labels 2026-04-15 17:57:32 +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#97
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?