BudgetIncomeRow / BudgetAllocRow
Deux composants de ligne éditable pour le plan budgétaire. Chaque ligne combine un champ libellé, un champ montant, un indicateur de sauvegarde et un bouton de suppression.
Source : src/components/ui/budget-row.tsx
BudgetIncomeRow
Ligne pour une source de revenu (IncomeType).
<BudgetIncomeRow
budgetPlanId="plan-id"
id="income-id"
label="Salaire net"
type="SALARY"
expectedMonthly={3480}
onSaved={(id) => {}}
onDeleted={() => {}}
onUpdate={(label, amount) => {}}
/>
Props
| Prop | Type | Description |
|---|---|---|
budgetPlanId | string | ID du plan parent — requis pour persister |
id | string? | ID de la ligne (absent si nouvellement créée) |
label | string | Libellé initial |
type | IncomeType | SALARY | FREELANCE | REIMBURSEMENT | INVESTMENT | OTHER |
expectedMonthly | number | Montant mensuel attendu |
onSaved | (id: string) => void | Appelé après persistance — fournit l'ID réel |
onDeleted | () => void | Appelé après suppression |
onUpdate | (label, amount) => void | Appelé à chaque frappe (pour màj du total parent) |
BudgetAllocRow
Ligne pour une allocation (AllocationType), avec badge de type coloré.
<BudgetAllocRow
budgetPlanId="plan-id"
label="Loyer"
type="FIXED_EXPENSE"
targetAmount={950}
onSaved={(id) => {}}
onDeleted={() => {}}
onUpdate={(label, amount) => {}}
/>
Badges de type
| Type | Libellé | Couleur |
|---|---|---|
FIXED_EXPENSE | Fixe | Rouge |
VARIABLE_EXPENSE | Variable | Orange |
SAVINGS | Épargne | Vert |
INVESTMENT | Invest. | Vert |
Sauvegarde auto-déclenchée
La sauvegarde est déclenchée 800 ms après la dernière frappe (debounce). L'indicateur de statut affiche :
- Spinner pendant l'enregistrement
- Coche verte pendant 2 s après succès