Résumé
TFSA124 500 $
Actifs enregistrés
Patrimoine netCAD
847 230 CAD
+12 340 CAD
Actifs
912 500 CAD
Dettes
65 270 CAD
Ratio
93%
Valeur au 2026-06-04
Composants
Catalogue de composants — composants signature AURORA, thémés par tokens, a11y WCAG AA.
Aperçu thème
PatrimoineKPI
label, value, delta, trend, assets, liabilities, currency, asOfKPI dominant : valeur nette, delta, actifs/dettes. Surface pilote de la thématisation AURORA.
AuroraCard
title, label, glow, footer, childrenCard elevated générique : glow optionnel (cyan / magenta / none), slot header + content + footer.
Insights IA
ClaudeVotre taux d'épargne a progressé de 18% ce trimestre. Envisagez d'augmenter votre contribution RRSP.
Budget
Dépensé2 340 $
Budget3 000 $
LivePulse
label, value, trend, delta, colorIndicateur métrique live : point plasma + valeur + trend. Glow pulsé disponible.
847 230 $
▲+12 340 $
3 recommandations
2 340 $ / 3 000 $
—78%
+8.4%
▲+2.1% vs mois dernier
22.40 $
▼-0.85 $
Abonnements +34%
▼
AssetBalanceCard
label, totalAssets, totalLiabilities, currency, delta, trend, asOfCarte bilan actif/passif avec micro-interaction hover/focus : glow plasma + barre segmentée reveal.
Survolez ou tabulez sur chaque carte pour voir la micro-interaction (barre plasma + glow).
ProgressArc
variant, value, color, label, strokeWidth, size, showValue, animationDurationArc de progression animé à l'entrée viewport (IntersectionObserver) — 2 variantes : linéaire (barre) + radiale (jauge FIRE). Tokens-only, prefers-reduced-motion, logique portable Skia.
Variante linéaire
Barre de progression animée — cas d'usage : CELI / REER / CELIAPP / budget / épargne par paie. Animation déclenchée à l'entrée dans le viewport via IntersectionObserver.
CELI utilisé62 %
44 500 $ / 71 500 $REER utilisé48 %
82 000 $ / 170 000 $CELIAPP90 %
31 500 $ / 35 000 $Budget — juin78 %
2 340 $ / 3 000 $Épargne par paie55 %
11 000 $ / 20 000 $Dette — carte15 %
450 $ / 3 000 $Variante radiale
Arc demi-cercle animé — cas d'usage : jauge FIRE, objectifs patrimoine, taux d'épargne.
Indice FIRE
25× dépenses : 42 %
Autonomie patrimoine
Taux de couverture
Objectif REER
Horizon retraite
Taux d'épargne
22 % revenus nets
Variations strokeWidth + size (radiale)
prefers-reduced-motion activé → rendu direct à la valeur finale, zéro animation. Activer dans les préférences OS / navigateur pour tester.
ProgressBar
value, status, label, showStatus, height, animationDurationBarre de progression linéaire props-driven. Statut ok / near / over / neutral via tokens --color-envelope-*. A11y role=progressbar, prefers-reduced-motion.
status="ok" — 62 %
62 %OK
status="near" — 88 %
88 %Proche limite
status="over" — 112 %
112 %Dépassé
status="neutral" — 45 % (sans label de statut)
StatusBadge
variant, label, liveBadge d'état pill — couleur + TEXTE (jamais couleur seule, WCAG 1.4.1). Variants ok / warning / error / success. Tokens tranche A (--color-surface-* + --color-border-* + --color-envelope-*).
CouvertProche limiteDépasséObjectif atteint
Avec valeur78 %89 %112 %100 %
ContexteCELI actifREER — 3 mois restantsSur-cotisationFHSA — plafond atteint
SectionCard
title, surface, badge, elevated, footer, childrenCarte de section avec titre + badge + slot contenu + footer optionnel. Trois surfaces : default / raised / kpi. Tokens Aurora sémantiques, a11y section+aria-labelledby.
CELI
TFSA42 500 $
68 %OK
Budget alimentation
Juin 202688 %Proche limite
Dépensé880 $
Enveloppe1 000 $
Patrimoine net
847 230 $
+12 340 $ ce mois
Header
brand, brandName, links, actions, tone, stickyAppBar présentationnel cross-app : lockup marque (mark VegaHarp + wordmark), navigation optionnelle, slot actions droite, sticky optionnel. Tokens-only, a11y landmark <header>, 4 thèmes.
Minimal — marque seule, tone="dark"
Avec navigation — tone="dark"
Avec navigation + actions — tone="dark"
brandName="AETHOS" + navigation — tone="light" (wrapper data-theme="light")
sticky=true — prop déclarée (comportement actif dans un layout complet, pas visible ici dans la galerie)
Lyra — markId="lyra" + brandName="LYRA" — mark VegaHarp transparente (fond design system)
Aethos — markId="aethos" + brandName="AETHOS" — mark Orbit Arc transparente (fond app Aethos)
CategoryFilter
onSelectionChange: (categories: string[]) => voidFiltre catégorie de transactions — 4 variantes : Chips, Select, Combobox, Grille. Sélectionner ci-dessous.
Variante :
Recherche textuelle + jetons
Toutes les catégories…
Toutes les catégories
Props attendues : onSelectionChange?: (categories: string[]) => void
TransactionList
groups: DayGroup[], masked?: booleanListe de transactions — 3 variantes de rendu : Timeline rail, Cartes journalières, Stream dense. Toggle privacy intégré.
Trois concepts de rendu — groupement par jour, ligne transaction, virement unifié, toggle privacy. Sélecteur intégré ci-dessous.
Concept
Timeline avec rail d'accent
Rail coloré continu par catégorie — lecture chronologique comme une frise, montant aligné à droite, virements en node bicolore. Dense mais orienté dans l'espace.
- Jeudi 4 juin 20263 tx
- SalaireCompte chèques+3 400,00 $
- ÉpicerieCompte chèques−85,42 $
- AbonnementsCarte Visa−22,99 $
- Mercredi 3 juin 20262 tx
- VirementCompte chèques → Compte CELI500,00 $
- TransportCarte Visa−72,00 $
- Lundi 1 juin 20263 tx
- LogementCompte chèques−1 450,00 $
- RestaurantCarte Visa−68,75 $
- SantéCompte chèques+320,00 $
- Vendredi 30 mai 20262 tx
- AbonnementsCarte Visa−27,99 $
- VirementCompte chèques → Compte REER1 000,00 $
Props attendues : groups: DayGroup[], masked?: boolean
PaySavingsCard
report, maskedPort fidèle de PaySavingsBreakdown (P0 #1 ADR-036 lot E) : épargne par paie, projections, ventilation par groupe, droits de cotisation (RoomFills) avec barres de progression. Props-driven, aucun fetch. Tokens Lyra sémantiques (theme-aware sur les 4 thèmes), masked=true pour la confidentialité.
masked
Instance 1 — rapport complet · 2 groupes · 3 RoomFills (CELI ok, REER near, CELIAPP over)
Instance 2 — masked=true forcé (invariant privacy, indépendant du toggle)