IncomeBudgetSection / AllocBudgetSection

Deux panneaux composites qui orchestrent les listes de lignes budgétaires (BudgetIncomeRow / BudgetAllocRow) avec affichage du total et ajout de ligne.

Source : src/components/ui/budget-section.tsx

IncomeBudgetSection

Panneau des sources de revenus avec total en temps réel.

<IncomeBudgetSection
  budgetPlanId="plan-id"
  items={incomeSources}
  onChange={setIncomeSources}
/>

Props

Prop	Type	Description
budgetPlanId	string?	ID du plan — requis pour persister
items	IncomeItem[]	{ id, label, type: IncomeType, expectedMonthly }[]
onChange	Dispatch<SetStateAction<IncomeItem[]>>	Setter React — compatible avec fonctions updater

AllocBudgetSection

Panneau des allocations configurable par type.

<AllocBudgetSection
  budgetPlanId="plan-id"
  title="Charges fixes"
  items={fixedExpenses}
  defaultType="FIXED_EXPENSE"
  addLabel="Ajouter une charge"
  onChange={setFixedExpenses}
/>

Props

Prop	Type	Description
budgetPlanId	string?	ID du plan
title	string	Titre du panneau
items	AllocItem[]	{ id, label, type: AllocationType, targetAmount }[]
defaultType	AllocationType	Type assigné aux nouvelles lignes
addLabel	string	Libellé du bouton d'ajout
onChange	Dispatch<SetStateAction<AllocItem[]>>	Setter React

Gestion des nouvelles lignes

Une nouvelle ligne est créée avec un ID temporaire new-<timestamp>. Après persistance, onSaved remplace l'ID temporaire par l'ID réel de la base — sans re-render visible de la liste.

Voir aussi

• BudgetIncomeRow / BudgetAllocRow
• BudgetSankey
• Action upsertIncomeSource