feat(balance): clarifier le flow d onboarding accounts vs snapshot #178

New issue

Closed

opened 2026-05-01 01:28:35 +00:00 by maximus · 0 comments

maximus commented

2026-05-01 01:28:35 +00:00

Owner

Description

Le user rapporte: confusion entre creer un compte et saisir un snapshot a l'onboarding. Le bouton "+ Nouveau snapshot" est visible meme avec 0 comptes, et mene a /balance/snapshot qui affiche un fallback "Aucun compte".

Solution: carte d'onboarding 2 etapes sur /balance quand accounts.length === 0 ou snapshots.length === 0.

Approche

Sur /balance (src/pages/BalancePage.tsx):

Si accounts.length === 0 -> remplacer BalanceOverviewCard par un nouveau BalanceOnboardingCard avec 2 etapes:
- Etape 1 "Creer un compte" (CTA primaire vers /balance/accounts) - actif si accounts.length === 0, sinon checkmark
- Etape 2 "Saisir un snapshot" (CTA primaire vers /balance/snapshot) - actif si accounts.length >= 1 AND snapshots.length === 0, sinon grisee
Si accounts.length >= 1 AND snapshots.length === 0 -> afficher BalanceOnboardingCard avec etape 1 cochee et etape 2 active
Si accounts.length >= 1 AND snapshots.length >= 1 -> rendu actuel BalanceOverviewCard

Cacher (ou desactiver avec tooltip explicatif) le bouton "+ Nouveau snapshot" de l'en-tete tant que accounts.length === 0.

Sur /balance/snapshot (empty state existant lignes 183-193): garder le fallback actuel mais ameliorer la copie pour expliquer la distinction (compte = ou je tiens mon argent ; snapshot = combien il y avait a une date).

Fichiers concernes

src/pages/BalancePage.tsx - guard accounts/snapshots + carte onboarding (alentour ligne 108-130)
src/components/balance/BalanceOnboardingCard.tsx - nouveau composant 2 etapes
src/components/balance/BalanceOnboardingCard.test.tsx - tests des 3 etats
src/components/balance/BalanceOverviewCard.tsx - inchange, juste plus rendu en empty
src/pages/SnapshotEditPage.tsx:185 - copie amelioree de balance.snapshot.page.noAccounts
src/i18n/locales/fr.json + en.json - cles balance.onboarding.* (step1/step2/done labels)
CHANGELOG.md + CHANGELOG.fr.md - section Changed
docs/architecture.md - mention du composant si necessaire

Depends on

#176 (eviter conflit sur i18n/CHANGELOG en sequentiel; #178 modifie aussi i18n)

Criteres d'acceptation

Premiere visite /balance (0 comptes, 0 snapshots) -> BalanceOnboardingCard rendue avec etape 1 active, etape 2 grisee
Apres creation de comptes (>= 1) -> etape 1 marquee done (checkmark), etape 2 devient active
Apres premier snapshot -> BalanceOnboardingCard remplacee par BalanceOverviewCard
Bouton "+ Nouveau snapshot" cache (ou disabled+tooltip) tant que 0 comptes
Test regression: BalanceOverviewCard.test.tsx (s'il existe) toujours vert; nouveau test couvre les 3 etats de BalanceOnboardingCard
Tous les textes UI passent par i18n (FR + EN)
npm test + npm run build verts
Entree CHANGELOG sous [Unreleased] -> Changed (FR + EN)

Decisions prises ce soir

Layout: 2 etapes verticales avec icones (lucide-react Wallet et FileText, libre choix exact si change)
Une seule carte, pas de wizard multi-page
Tests de regression OBLIGATOIRES sur les 3 etats du composant

Spec source

spec-plan-bilan-anomalies-174.md

## Description Le user rapporte: confusion entre creer un compte et saisir un snapshot a l'onboarding. Le bouton "+ Nouveau snapshot" est visible meme avec 0 comptes, et mene a `/balance/snapshot` qui affiche un fallback "Aucun compte". Solution: carte d'onboarding 2 etapes sur `/balance` quand `accounts.length === 0` ou `snapshots.length === 0`. ## Approche Sur `/balance` (`src/pages/BalancePage.tsx`): - Si `accounts.length === 0` -> remplacer `BalanceOverviewCard` par un nouveau `BalanceOnboardingCard` avec 2 etapes: - Etape 1 "Creer un compte" (CTA primaire vers `/balance/accounts`) - actif si `accounts.length === 0`, sinon checkmark - Etape 2 "Saisir un snapshot" (CTA primaire vers `/balance/snapshot`) - actif si `accounts.length >= 1 AND snapshots.length === 0`, sinon grisee - Si `accounts.length >= 1 AND snapshots.length === 0` -> afficher `BalanceOnboardingCard` avec etape 1 cochee et etape 2 active - Si `accounts.length >= 1 AND snapshots.length >= 1` -> rendu actuel `BalanceOverviewCard` Cacher (ou desactiver avec tooltip explicatif) le bouton "+ Nouveau snapshot" de l'en-tete tant que `accounts.length === 0`. Sur `/balance/snapshot` (empty state existant lignes 183-193): garder le fallback actuel mais ameliorer la copie pour expliquer la distinction (compte = ou je tiens mon argent ; snapshot = combien il y avait a une date). ## Fichiers concernes - `src/pages/BalancePage.tsx` - guard accounts/snapshots + carte onboarding (alentour ligne 108-130) - `src/components/balance/BalanceOnboardingCard.tsx` - nouveau composant 2 etapes - `src/components/balance/BalanceOnboardingCard.test.tsx` - tests des 3 etats - `src/components/balance/BalanceOverviewCard.tsx` - inchange, juste plus rendu en empty - `src/pages/SnapshotEditPage.tsx:185` - copie amelioree de `balance.snapshot.page.noAccounts` - `src/i18n/locales/fr.json` + `en.json` - cles `balance.onboarding.*` (step1/step2/done labels) - `CHANGELOG.md` + `CHANGELOG.fr.md` - section Changed - `docs/architecture.md` - mention du composant si necessaire ## Depends on - #176 (eviter conflit sur i18n/CHANGELOG en sequentiel; #178 modifie aussi i18n) ## Criteres d'acceptation - [ ] Premiere visite /balance (0 comptes, 0 snapshots) -> `BalanceOnboardingCard` rendue avec etape 1 active, etape 2 grisee - [ ] Apres creation de comptes (>= 1) -> etape 1 marquee done (checkmark), etape 2 devient active - [ ] Apres premier snapshot -> `BalanceOnboardingCard` remplacee par `BalanceOverviewCard` - [ ] Bouton "+ Nouveau snapshot" cache (ou disabled+tooltip) tant que 0 comptes - [ ] Test regression: `BalanceOverviewCard.test.tsx` (s'il existe) toujours vert; nouveau test couvre les 3 etats de `BalanceOnboardingCard` - [ ] Tous les textes UI passent par i18n (FR + EN) - [ ] `npm test` + `npm run build` verts - [ ] Entree CHANGELOG sous `[Unreleased]` -> `Changed` (FR + EN) ## Decisions prises ce soir - Layout: 2 etapes verticales avec icones (lucide-react `Wallet` et `FileText`, libre choix exact si change) - Une seule carte, pas de wizard multi-page - Tests de regression OBLIGATOIRES sur les 3 etats du composant ## Spec source spec-plan-bilan-anomalies-174.md