4.1 Couleurs
- Primary :
#1565C0(bleu) - Light :
#E3F2FD - Mid :
#64B5F6
4.2 Contenu du tiroir expande
Dashboard Flexible Drawer :
- Liste des enveloppes variables avec progression
- Chaque enveloppe : nom, emoji, montant alloue, montant depense, barre de progression
- La barre se vide au fur et a mesure des depenses (paradigme inverse : on voit ce qui reste)
- Couleurs de la barre selon le % restant :
-
= 60% restant → vert (teal)
- 30-59% restant → ambre
- 10-29% restant → orange
- < 10% restant → rouge
-
- Reserve (pocket systeme) : affichee separement, non depensable directement
- Montant EUR/jour restant affiche pour chaque enveloppe
- Report de la periode precedente affiche si > 0
- CTA « J’ai depense » → ouvre le picker d’enveloppe puis le formulaire de depense
Sous-titre du tiroir : « Utilise X EUR sur Y EUR »
Badge : « Reste X EUR »
4.3 Detail enveloppe (route /detail/flexible/:id)
Ecran FlexibleDetailScreen :
- Header anime avec illustration d’enveloppe (change de couleur selon le remplissage)
- Montant alloue, montant depense, reste disponible
- EUR par jour restant (budget / jours restants dans la periode)
- Report de la periode precedente (si applicable)
- Liste des transactions de l’enveloppe avec date et montant
- Categorie auto-detectee sur chaque transaction (voir §9)
- Actions : modifier l’enveloppe, ajouter une depense
Formulaire de depense (V3ExpenseFormSheet) :
- Champs : montant (clavier numerique, autofocus), enveloppe (selecteur)
- Date : aujourd’hui par defaut
- Categorie : suggestion automatique, modifiable
- Validation : montant > 0, enveloppe selectionnee
- Bouton « C’est note ! » avec montant formate
- Haptic feedback mediumImpact
4.4 Reserve (pocket systeme)
- Pocket automatique
isSystemPocket = true, type VARIABLE_EXPENSE - Nom : « Reserve »
- Absorbe le budget non alloue du tiroir Flexible
- Sert de coussin de securite pour les imprevus
- Non listee dans le picker de depense rapide
- Montant ajuste automatiquement lors de la repartition