-
Periodische Kosten in Monats-Saldo einrechnen Jährliche, halbjährliche und vierteljährliche Beträge werden auf einen Monatswert heruntergerechnet.
-
=0} negative={totals.balance<0} featured/>
+function Dashboard({data,totals,onToggle}){
+ const FILTER_KEY='fixfin.dashboard.account-filter.v1';
+ const [filter,setFilter]=useState(()=>{
+ try {
+ const stored=JSON.parse(localStorage.getItem(FILTER_KEY)||'null');
+ if(stored?.mode==='some'&&Array.isArray(stored.ids)) return {mode:'some',ids:stored.ids};
+ } catch {}
+ return {mode:'all',ids:[]};
+ });
+ const accountIds=useMemo(()=>data.accounts.map(a=>a.id),[data.accounts]);
+ const validSelected=useMemo(()=>filter.mode==='all'?accountIds:filter.ids.filter(id=>accountIds.includes(id)),[filter,accountIds]);
+ const selectedSet=useMemo(()=>new Set(validSelected),[validSelected]);
+ const visibleAccounts=useMemo(()=>totals.accounts.filter(s=>selectedSet.has(s.account.id)),[totals.accounts,selectedSet]);
+ const selectedBalance=visibleAccounts.reduce((sum,s)=>sum+s.balance,0);
+ const allSelected=filter.mode==='all'||validSelected.length===accountIds.length;
+
+ useEffect(()=>{
+ if(filter.mode==='some'&&accountIds.length>0&&validSelected.length===0) setFilter({mode:'all',ids:[]});
+ },[accountIds.length,filter.mode,validSelected.length]);
+ useEffect(()=>{
+ try { localStorage.setItem(FILTER_KEY,JSON.stringify(allSelected?{mode:'all',ids:[]}:{mode:'some',ids:validSelected})); } catch {}
+ },[allSelected,validSelected]);
+
+ function toggleAccount(id){
+ // Wenn aktuell alle Konten aktiv sind, bedeutet ein Tap auf ein Konto:
+ // sofort nur dieses Konto anzeigen. So braucht die Einzelauswahl nur einen Tap.
+ if(allSelected){
+ setFilter({mode:'some',ids:[id]});
+ return;
+ }
+ const base=[...validSelected];
+ const next=base.includes(id)?base.filter(x=>x!==id):[...base,id];
+ if(next.length===0) return;
+ if(next.length===accountIds.length) setFilter({mode:'all',ids:[]});
+ else setFilter({mode:'some',ids:next});
+ }
+
+ const filterLabel=allSelected?'Alle Konten':`${validSelected.length} von ${accountIds.length} Konten`;
+ return
+
+ Kontenfilter {filterLabel}
⌄
+ setFilter({mode:'all',ids:[]})}>Alle
+ {data.accounts.map(a=>toggleAccount(a.id)}>{a.name} )}
+
+
+
+
Salden {allSelected?'Alle Konten im monatlichen Fix-Saldo.':'Nur die ausgewählten Konten.'}
{allSelected?'Gesamtsaldo':'Saldo Auswahl'} =0?'good-text':'bad-text'}>{selectedBalance>=0?'+':''}{formatMoney(selectedBalance)}
{visibleAccounts.map(s=>
{s.account.name} monatlicher Fix-Saldo =0?'good-text':'bad-text'}`}>{s.balance>=0?'+':''}{formatMoney(s.balance)} ⌄
Eingänge +{formatMoney(s.income)}
Ausgänge −{formatMoney(s.expense)}
Transfers rein +{formatMoney(s.transferIn)}
Transfers raus −{formatMoney(s.transferOut)}
)}
+
{!totals.includePeriodic&&totals.periodicExpenseReserve>0&&
Periodische Ausgaben von rechnerisch {formatMoney(totals.periodicExpenseReserve)} / Monat sind derzeit nicht im Saldo enthalten.
}
-
Saldo je Konto Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.
{totals.accounts.map(s=>
{s.account.name} monatlicher Fix-Saldo =0?'good-text':'bad-text'}`}>{s.balance>=0?'+':''}{formatMoney(s.balance)} ⌄
Eingänge +{formatMoney(s.income)}
Ausgänge −{formatMoney(s.expense)}
Transfers rein +{formatMoney(s.transferIn)}
Transfers raus −{formatMoney(s.transferOut)}
)}
-
GESAMT Monatlich nach Fixkosten übrig Interne Transfers verändern den Gesamtsaldo nicht.
=0?'good-text':'bad-text'}`}>{formatMoney(totals.balance)}
+
Periodische Kosten in Monats-Saldo einrechnen Jährliche, halbjährliche und vierteljährliche Beträge werden auf einen Monatswert heruntergerechnet.
;
}
-function Metric({label,value,positive,negative,featured}){return
{label} {formatMoney(value)}
}
-function CountMetric({label,value}){return
{label} {Number(value||0).toLocaleString('de-DE')}
}
-function Accounts({data,onEdit,onDelete,onAdd}){return
Konten Konten dienen nur zur Zuordnung. Es gibt keine Kontostände.
+ Konto Konto {data.accounts.map(a=>{a.name} onEdit(a)}>Bearbeiten onDelete(a.id)}>Löschen
}
-function Entries({type,items,accounts,categories,onEdit,onDelete}){const accountName=id=>accounts.find(a=>a.id===id)?.name||'Unbekannt';const categoryName=id=>categories.find(c=>c.id===id)?.name||'Ohne Kategorie';const isIncome=type==='incomes';return
{isIncome?'Fixe Eingänge':'Fixe Ausgänge'} Betrag gilt pro gewähltem Intervall. Periodische Werte werden zusätzlich als Monatsanteil gezeigt.
Bezeichnung Kategorie Konto Intervall Monat Betrag Ø / Monat {items.map(x=>{x.name} {categoryName(x.categoryId)} {accountName(x.accountId)} {intervals[x.interval||'monthly'].label} {x.interval==='monthly'?'Jeden Monat':x.dueMonth?months[Number(x.dueMonth)-1]:'–'} {isIncome?'+':'−'}{formatMoney(x.amount)} {formatMoney(monthlyEquivalent(x))} onEdit(x)}>Bearbeiten onDelete(type,x.id)}>Löschen
}
-function Transfers({data,onEdit,onDelete}){const accountName=id=>data.accounts.find(a=>a.id===id)?.name||'Unbekannt';const categoryName=id=>data.categories.find(c=>c.id===id)?.name||'Ohne Kategorie';return
Fixe Transfers Verschiebungen zwischen eigenen Konten. Global saldoneutral.
Bezeichnung Kategorie Von Nach Intervall Monat Betrag Ø / Monat {data.transfers.map(x=>{x.name} {categoryName(x.categoryId)} {accountName(x.fromAccountId)} {accountName(x.toAccountId)} {intervals[x.interval||'monthly'].label} {x.interval==='monthly'?'Jeden Monat':x.dueMonth?months[Number(x.dueMonth)-1]:'–'} {formatMoney(x.amount)} {formatMoney(monthlyEquivalent(x))} onEdit(x)}>Bearbeiten onDelete('transfers',x.id)}>Löschen
}
-function CategoryDistribution({title,subtitle,stats,tone}){
+function PlanningPage({data,totals}){
+ const reserves=useMemo(()=>reserveOverview(data),[data]);
+ const totalRequired=totals.accounts.reduce((s,x)=>s+x.requiredOutflow,0);
+ const totalFundingNeed=totals.accounts.reduce((s,x)=>s+x.fundingNeed,0);
+ return
+
+
+ 0} positive={totalFundingNeed===0}/>
+
+
+
+
Benötigt pro Konto Liquiditätsbedarf je Konto: echte Ausgaben plus Transfers raus, gedeckt durch echte Eingänge plus Transfers rein.
{totals.accounts.map(s=>
{s.account.name} 0?'bad-text':'good-text'}>{s.fundingNeed>0?`${formatMoney(s.fundingNeed)} fehlen`:`${formatMoney(s.surplus)} übrig`}
Abflussbedarf {formatMoney(s.requiredOutflow)}
Geplante Zuflüsse {formatMoney(s.coveredInflow)}
Zusätzliche Zuführung 0?'bad-text':'good-text'}>{formatMoney(s.fundingNeed)}
)}
+
Rücklagenübersicht Periodische Ausgaben auf einen gleichmäßigen Monatsbetrag heruntergerechnet.
{formatMoney(reserves.annual)} / Jahr {formatMoney(reserves.monthly)} / Monat
{reserves.items.map(x=>
{x.name} {accountName(data,x.accountId)} · {categoryName(data,x.categoryId)} · {intervals[x.interval].label}
{formatMoney(x.annualNeed)} / Jahr {formatMoney(x.monthlyReserve)} / Monat
)}
+
;
+}
+
+function Metric({label,value,positive,negative,featured}){return
{label} {formatMoney(value)}
}
+function TextMetric({label,value,hint}){return
{label} {value} {hint&&{hint} }
}
+function CountMetric({label,value}){return
{label} {Number(value||0).toLocaleString('de-DE')}
}
+
+function Accounts({data,onEdit,onDelete,onAdd}){return
Konten Konten dienen nur zur Zuordnung. Es gibt keine Kontostände.
+ Konto Konto {data.accounts.map(a=>{a.name} onEdit(a)}>Bearbeiten onDelete(a.id)}>Löschen
}
+
+function MovementsPage({data,onEdit,onDuplicate,onDelete,onAdd}){
+ const [section,setSection]=useState('incomes');
+ const tabs=[['incomes','Eingänge',data.incomes.length],['expenses','Ausgänge',data.expenses.length],['transfers','Transfers',data.transfers.length]];
+ return
+
{tabs.map(([id,label,count])=>setSection(id)}>{label} {count} )}
onAdd(section)}>+ {section==='incomes'?'Eingang':section==='expenses'?'Ausgang':'Transfer'}
+ {section==='incomes'&&
onEdit('incomes',x)} onDuplicate={x=>onDuplicate('incomes',x)} onDelete={onDelete}/>}
+ {section==='expenses'&&onEdit('expenses',x)} onDuplicate={x=>onDuplicate('expenses',x)} onDelete={onDelete}/>}
+ {section==='transfers'&&onEdit('transfers',x)} onDuplicate={x=>onDuplicate('transfers',x)} onDelete={onDelete}/>}
+ ;
+}
+function Entries({type,items,accounts,categories,onEdit,onDuplicate,onDelete}){
+ const accountNameLocal=id=>accounts.find(a=>a.id===id)?.name||'Unbekannt';
+ const categoryNameLocal=id=>categories.find(c=>c.id===id)?.name||'Ohne Kategorie';
+ const isIncome=type==='incomes';
+ const dueText=x=>x.interval==='monthly'?'Jeden Monat':x.dueMonth?months[Number(x.dueMonth)-1]:'Nicht festgelegt';
+ return
{isIncome?'Fixe Eingänge':'Fixe Ausgänge'} Betrag gilt pro gewähltem Intervall. Periodische Werte werden zusätzlich als Monatsanteil gezeigt.
Bezeichnung Kategorie Konto Intervall Monat Betrag Ø / Monat {items.map(x=>{x.name} {categoryNameLocal(x.categoryId)} {accountNameLocal(x.accountId)} {intervals[x.interval||'monthly'].label} {dueText(x)} {isIncome?'+':'−'}{formatMoney(x.amount)} {formatMoney(monthlyEquivalent(x))} onDuplicate(x)}>Duplizieren onEdit(x)}>Bearbeiten onDelete(type,x.id)}>Löschen
{items.map(x=>
+ {x.name} {categoryNameLocal(x.categoryId)}
{isIncome?'+':'−'}{formatMoney(x.amount)}
+
Konto {accountNameLocal(x.accountId)}
+
Intervall {intervals[x.interval||'monthly'].label}
+
Fälligkeit {dueText(x)}
+
Ø / Monat {formatMoney(monthlyEquivalent(x))}
+
onDuplicate(x)}>Duplizieren onEdit(x)}>Bearbeiten onDelete(type,x.id)}>Löschen
+ )}
;
+}
+
+function Transfers({data,onEdit,onDuplicate,onDelete}){
+ const accountNameLocal=id=>data.accounts.find(a=>a.id===id)?.name||'Unbekannt';
+ const categoryNameLocal=id=>data.categories.find(c=>c.id===id)?.name||'Ohne Kategorie';
+ const dueText=x=>x.interval==='monthly'?'Jeden Monat':x.dueMonth?months[Number(x.dueMonth)-1]:'Nicht festgelegt';
+ return
Fixe Transfers Verschiebungen zwischen eigenen Konten. Global saldoneutral.
Bezeichnung Kategorie Von Nach Intervall Monat Betrag Ø / Monat {data.transfers.map(x=>{x.name} {categoryNameLocal(x.categoryId)} {accountNameLocal(x.fromAccountId)} {accountNameLocal(x.toAccountId)} {intervals[x.interval||'monthly'].label} {dueText(x)} {formatMoney(x.amount)} {formatMoney(monthlyEquivalent(x))} onDuplicate(x)}>Duplizieren onEdit(x)}>Bearbeiten onDelete('transfers',x.id)}>Löschen
{data.transfers.map(x=>
+ {x.name} {categoryNameLocal(x.categoryId)}
{formatMoney(x.amount)} Von {accountNameLocal(x.fromAccountId)}
→ Nach {accountNameLocal(x.toAccountId)}
+
Intervall {intervals[x.interval||'monthly'].label}
+
Fälligkeit {dueText(x)}
+
Ø / Monat {formatMoney(monthlyEquivalent(x))}
+
onDuplicate(x)}>Duplizieren onEdit(x)}>Bearbeiten onDelete('transfers',x.id)}>Löschen
+ )}
;
+}
+
+function CategoryDistribution({title,subtitle,stats,tone,data}){
+ function itemMeta(item){
+ if(item._statType==='transfer-in') return `Transfer rein · ${accountName(data,item.fromAccountId)} → ${accountName(data,item.toAccountId)}`;
+ if(item._statType==='transfer-out') return `Transfer raus · ${accountName(data,item.fromAccountId)} → ${accountName(data,item.toAccountId)}`;
+ if(item._statType==='transfer') return `Transfer · ${accountName(data,item.fromAccountId)} → ${accountName(data,item.toAccountId)}`;
+ return `${item._statType==='income'?'Eingang':'Ausgang'} · ${accountName(data,item.accountId)}`;
+ }
return
{formatMoney(stats.total)} / Monat {stats.rows.map((row,index)=>
{index+1} {row.name} {row.count} {row.count===1?'Position':'Positionen'}
{formatMoney(row.amount)} {row.percent.toFixed(1).replace('.',',')} %
)}
{stats.rows.map((row,index)=>
{index+1} {row.name} {row.count} {row.count===1?'Position':'Positionen'}
{formatMoney(row.amount)} {row.percent.toFixed(1).replace('.',',')} %
{row.items.sort((a,b)=>b.statAmount-a.statAmount).map((item,i)=>
{item.name} {itemMeta(item)} · {intervals[item.interval||'monthly'].label}
{formatMoney(item.statAmount)} / Monat )}
)}
;
}
function StatisticsPage({data,onAddCategory,onEditCategory,onDeleteCategory}){
const [accountId,setAccountId]=useState('all');
const stats=useMemo(()=>categoryStats(data,accountId),[data,accountId]);
+ const totals=useMemo(()=>calc(data),[data]);
+ const kpis=useMemo(()=>dashboardKpis(data,totals),[data,totals]);
const selectedName=data.accounts.find(a=>a.id===accountId)?.name||'Alle Konten';
const usage=id=>data.incomes.filter(x=>x.categoryId===id).length+data.expenses.filter(x=>x.categoryId===id).length+data.transfers.filter(x=>x.categoryId===id).length;
const relevantEntries=[...data.incomes.filter(x=>accountId==='all'||x.accountId===accountId),...data.expenses.filter(x=>accountId==='all'||x.accountId===accountId),...data.transfers.filter(x=>accountId==='all'||x.fromAccountId===accountId||x.toAccountId===accountId)];
const uncategorized=relevantEntries.filter(x=>!x.categoryId).length;
return
+
Gesamtkennzahlen Die übergeordneten Kennzahlen liegen hier statt auf der Übersicht.
+ =0} negative={totals.balance<0} featured/>
+
+
+
+
Statistik für {selectedName}
Konto auswählen setAccountId(e.target.value)}>Alle Konten {data.accounts.map(a=>{a.name} )}
-
-
- {!stats.transfersMerged&&
}
+
+
+ {!stats.transfersMerged&&
}
Kategorien verwalten Kategorien gelten für Eingänge, Ausgänge und Transfers gemeinsam.
+ Kategorie {data.categories.map(c=>
{c.name} {usage(c.id)} {usage(c.id)===1?'zugeordneter Eintrag':'zugeordnete Einträge'}
onEditCategory(c)}>Bearbeiten onDeleteCategory(c.id)}>Löschen
)}
;
}
@@ -264,83 +412,142 @@ function YearPage({data}){
const forecast=useMemo(()=>annualForecast(data,accountId),[data,accountId]);
const selectedAccount=data.accounts.find(a=>a.id===accountId);
const selectedName=selectedAccount?.name||'Alle Konten';
- const kindLabel=x=>x.kind==='income'?'Eingang':x.kind==='expense'?'Ausgang':x.direction==='in'?'Transfer rein':x.direction==='out'?'Transfer raus':'Transfer';
+ const labels=forecast.isAll
+ ? { income:'Einnahmen', expense:'Ausgaben', balance:'Überschuss', yearIncome:'Einnahmen / Jahr', yearExpense:'Ausgaben / Jahr', yearBalance:'Überschuss / Jahr' }
+ : { income:'Zuflüsse', expense:'Abflüsse', balance:'Nettofluss', yearIncome:'Zuflüsse / Jahr', yearExpense:'Abflüsse / Jahr', yearBalance:'Nettofluss / Jahr' };
+ const kindLabel=x=>x.kind==='income'?(forecast.isAll?'Eingang':'Echter Eingang'):x.kind==='expense'?(forecast.isAll?'Ausgang':'Echte Ausgabe'):x.direction==='in'?'Transfer rein':x.direction==='out'?'Transfer raus':'Transfer';
const kindSign=x=>x.kind==='income'||x.direction==='in'?'+':x.kind==='expense'||x.direction==='out'?'−':'';
const kindTone=x=>x.kind==='income'||x.direction==='in'?'good-text':x.kind==='expense'||x.direction==='out'?'bad-text':'';
const chipLabel=x=>`${x.name} · ${intervals[x.interval||'monthly'].label} · ${kindLabel(x)} · ${formatMoney(x.amount)}`;
+ const maxExpense=Math.max(1,...forecast.rows.map(r=>r.displayExpense));
+ const maxRow=forecast.rows.reduce((a,b)=>b.displayExpense>a.displayExpense?b:a,forecast.rows[0]);
+ const yearBalance=forecast.yearIncome-forecast.yearExpense;
+ const detailRow=(x,i)=>
{kindLabel(x)} {x.name}
{kindSign(x)}{formatMoney(x.amount)} ;
+
return
-
- Jahresansicht für {selectedName}
- Konto auswählen setAccountId(e.target.value)}>Alle Konten {data.accounts.map(a=>{a.name} )} Jahresansicht für {selectedName}
Konto auswählen setAccountId(e.target.value)}>Alle Konten {data.accounts.map(a=>{a.name} )}
+ =0} negative={yearBalance<0}/>
+
- =forecast.yearExpense} negative={forecast.yearIncome Jahresprognose {forecast.isAll?'Gesamt über alle Konten. Transfers bleiben saldoneutral.':`Prognose für ${selectedName}. Transfers werden als Zu- oder Abfluss dieses Kontos berücksichtigt.`}
{forecast.rows.map(r=>
-
- {r.name} {r.items.length===0?'Keine Fälligkeiten':`${r.items.length} ${r.items.length===1?'Position':'Positionen'}`}
-
-
{forecast.isAll?'Eingänge':'Zuflüsse'} +{formatMoney(r.displayIncome)}
-
{forecast.isAll?'Ausgänge':'Abflüsse'} −{formatMoney(r.displayExpense)}
-
Saldo =0?'good-text':'bad-text'}>{r.balance>=0?'+':''}{formatMoney(r.balance)}
+
+
{forecast.isAll?'Belastungsprofil':'Abflussprofil'} {forecast.isAll?'Echte Ausgaben pro Monat. Interne Transfers bleiben außen vor.':`Was ${selectedName} pro Monat tatsächlich verlässt: echte Ausgaben plus Transfers raus.`}
{forecast.rows.map(r=>
{r.name.slice(0,3)}
{formatMoney(r.displayExpense)} )}
+
+
Jahresprognose {forecast.isAll?'Wirtschaftliche Sicht über alle Konten: nur echte Einnahmen und Ausgaben. Transfers verschieben Geld nur innerhalb des Zahlungspools.':`Liquiditätssicht für ${selectedName}: Transfers rein zählen als Zufluss, Transfers raus als Abfluss. Im Detail bleiben sie klar von echten Einnahmen und Ausgaben getrennt.`}
{forecast.rows.map(r=>{
+ const inflows=r.items.filter(x=>x.kind==='income'||x.direction==='in');
+ const outflows=r.items.filter(x=>x.kind==='expense'||x.direction==='out');
+ return
{r.name} {r.items.length===0?'Keine Fälligkeiten':`${r.items.length} ${r.items.length===1?'Position':'Positionen'}`}
{labels.income} +{formatMoney(r.displayIncome)}
{labels.expense} −{formatMoney(r.displayExpense)}
{labels.balance} =0?'good-text':'bad-text'}>{r.balance>=0?'+':''}{formatMoney(r.balance)}
⌄
+ {r.items.length===0?
In diesem Monat sind keine einzelnen Fixpositionen fällig.
:forecast.isAll?<>{r.items.map(detailRow)}{(r.transferIn>0||r.transferOut>0)&&
Interne Transfers in diesem Monat: {formatMoney(r.transferOut)}. Sie bleiben vollständig außerhalb von Einnahmen, Ausgaben und Überschuss.
}:<>
+
+
Echte Eingänge +{formatMoney(r.income)}
+
Transfers rein +{formatMoney(r.transferIn)}
+
Echte Ausgaben −{formatMoney(r.expense)}
+
Transfers raus −{formatMoney(r.transferOut)}
+
+ {inflows.length>0&&
Zuflüsse +{formatMoney(r.displayIncome)}
{inflows.map(detailRow)}
}
+ {outflows.length>0&&
Abflüsse −{formatMoney(r.displayExpense)}
{outflows.map(detailRow)}
}
+
Kontosicht: Transfers werden im Nettofluss berücksichtigt, bleiben aber als Transfers gekennzeichnet. So siehst du den echten Liquiditätsbedarf des Kontos, ohne sie mit Konsumausgaben zu verwechseln.
+ }
⌄
-
-
- {r.items.length===0?
In diesem Monat sind keine einzelnen Fixpositionen fällig.
:r.items.map((x,i)=>
-
{kindLabel(x)} {x.name}
-
{kindSign(x)}{formatMoney(x.amount)}
-
)}
- {forecast.isAll&&(r.transferIn>0||r.transferOut>0)&&
Transfers in diesem Monat: {formatMoney(r.transferOut)}. Sie verändern den Gesamtsaldo nicht.
}
-
)}
Periodische Positionen ohne Monat Diese Werte sind keinem konkreten Monat der Jahresprognose zugeordnet.
{forecast.unassigned.map((x,i)=>{chipLabel(x)} )}
JSON sichern Alle Daten liegen in einer einzigen JSON-Datei. Vor jedem Speichern wird serverseitig eine .bak-Datei angelegt.
Aktueller Datenstand {data.accounts.length} Konten · {data.categories.length} Kategorien · {data.incomes.length} Eingänge · {data.expenses.length} Ausgänge · {data.transfers.length} Transfers
{JSON.stringify(data,null,2)}
+
Szenario {scenarios.length?setSelectedId(e.target.value)}>{scenarios.map(s=>{s.name} )} :Noch keines angelegt }
+ Szenario {scenario&&<>Umbenennen Löschen }
+ {!scenario?
:<>
+
=0} negative={baseTotals.balance<0}/>=0} negative={projected.balance<0} featured/>=0} negative={projected.balance-baseTotals.balance<0}/>
+
Was-wäre-wenn-Anpassungen Der Basisplan bleibt unverändert. Hier simulierst du zusätzliche Eingänge, Ausgänge oder Transfers.
setAdjustmentDialog({})}>+ Anpassung {scenario.adjustments.map(a=>
{a.type==='income'?'Eingang':a.type==='expense'?'Ausgang':'Transfer'} {a.name} {a.type==='transfer'?`${accountName(data,a.fromAccountId)} → ${accountName(data,a.toAccountId)}`:accountName(data,a.accountId)}
{a.type==='income'?'+':a.type==='expense'?'−':''}{formatMoney(a.amount)} / Monat setAdjustmentDialog({item:a})}>Bearbeiten deleteAdjustment(a.id)}>Löschen
)}
+
Auswirkung je Konto Vergleich des monatlichen Saldos zwischen Basisplan und Szenario.
{projected.accounts.map(p=>{const b=baseTotals.accounts.find(x=>x.account.id===p.account.id);const diff=p.balance-(b?.balance||0);return
{p.account.name} Aktuell {formatMoney(b?.balance||0)}
Szenario {formatMoney(p.balance)}
Änderung =0?'good-text':'bad-text'}>{diff>=0?'+':''}{formatMoney(diff)}
})}
+ }
+ {adjustmentDialog&&scenario&&
setAdjustmentDialog(null)} onSave={saveAdjustment}/>}
+ e.target===e.currentTarget&&onClose()}>
+
Daten sichern Alle Daten liegen in einer JSON-Datei. Vor jedem Speichern wird serverseitig automatisch eine .bak-Datei angelegt.
+
Aktueller Datenstand Kurzübersicht über den Inhalt deiner FixFin-Datei.
{summary.map(([label,value])=>
{label} {Number(value).toLocaleString('de-DE')}
)}
JSON-Rohdaten Nur zur Kontrolle und Fehlersuche.
{json} JSON-Rohdaten anzeigen Nur bei Bedarf öffnen {json}
+
{text}
}
function EditorDialog({dialog,data,onClose,onSave}){
- const type=dialog.type,item=dialog.item;
+ const type=dialog.type,item=dialog.item; const editing=Boolean(item?.id);
const [name,setName]=useState(item?.name||''),[amount,setAmount]=useState(item?.amount??''),[accountId,setAccountId]=useState(item?.accountId||data.accounts[0]?.id||''),[fromAccountId,setFromAccountId]=useState(item?.fromAccountId||data.accounts[0]?.id||''),[toAccountId,setToAccountId]=useState(item?.toAccountId||data.accounts[1]?.id||data.accounts[0]?.id||''),[interval,setInterval]=useState(item?.interval||'monthly'),[dueMonth,setDueMonth]=useState(item?.dueMonth?String(item.dueMonth):''),[categoryId,setCategoryId]=useState(item?.categoryId||''),[newCategoryName,setNewCategoryName]=useState(''),[localError,setLocalError]=useState('');
const labels={accounts:'Konto',categories:'Kategorie',incomes:'Eingang',expenses:'Ausgang',transfers:'Transfer'};
async function submit(e){
- e.preventDefault();setLocalError('');
- const numeric=parseAmount(amount);
+ e.preventDefault();setLocalError(''); const numeric=parseAmount(amount);
if(!name.trim())return setLocalError('Bitte eine Bezeichnung eingeben.');
if(type!=='accounts'&&type!=='categories'&&(numeric<0||!Number.isFinite(numeric)))return setLocalError('Bitte einen gültigen Betrag eingeben.');
if(!['accounts','categories'].includes(type)&&data.accounts.length===0)return setLocalError('Bitte zuerst ein Konto anlegen.');
if(type==='transfers'&&fromAccountId===toAccountId)return setLocalError('Quell- und Zielkonto müssen verschieden sein.');
- let next=structuredClone(data);const id=item?.id||uid();let value;
+ let next=structuredClone(data); const id=editing?item.id:uid(); let value;
if(type==='accounts') value={id,name:name.trim()};
- else if(type==='categories') {
- const duplicate=next.categories.some(c=>c.id!==item?.id&&c.name.trim().toLocaleLowerCase('de-DE')===name.trim().toLocaleLowerCase('de-DE'));
- if(duplicate)return setLocalError('Diese Kategorie existiert bereits.');
- value={id,name:name.trim()};
- } else {
+ else if(type==='categories') { const duplicate=next.categories.some(c=>c.id!==item?.id&&c.name.trim().toLocaleLowerCase('de-DE')===name.trim().toLocaleLowerCase('de-DE')); if(duplicate)return setLocalError('Diese Kategorie existiert bereits.'); value={id,name:name.trim()}; }
+ else {
const common={id,name:name.trim(),amount:numeric,interval,dueMonth:interval==='monthly'?null:(dueMonth?Number(dueMonth):null)};
- if(type==='incomes'||type==='expenses'||type==='transfers') {
- let selectedCategoryId=categoryId||null;
- if(categoryId==='__new__'){
- const categoryName=newCategoryName.trim();
- if(!categoryName)return setLocalError('Bitte einen Namen für die neue Kategorie eingeben.');
- const existing=next.categories.find(c=>c.name.trim().toLocaleLowerCase('de-DE')===categoryName.toLocaleLowerCase('de-DE'));
- if(existing) selectedCategoryId=existing.id;
- else { selectedCategoryId=uid(); next.categories.push({id:selectedCategoryId,name:categoryName}); }
- }
- if(type==='transfers') value={...common,fromAccountId,toAccountId,categoryId:selectedCategoryId};
- else value={...common,accountId,categoryId:selectedCategoryId};
- }
+ let selectedCategoryId=categoryId||null;
+ if(categoryId==='__new__'){const categoryNameValue=newCategoryName.trim();if(!categoryNameValue)return setLocalError('Bitte einen Namen für die neue Kategorie eingeben.');const existing=next.categories.find(c=>c.name.trim().toLocaleLowerCase('de-DE')===categoryNameValue.toLocaleLowerCase('de-DE'));if(existing) selectedCategoryId=existing.id;else { selectedCategoryId=uid(); next.categories.push({id:selectedCategoryId,name:categoryNameValue}); }}
+ if(type==='transfers') value={...common,fromAccountId,toAccountId,categoryId:selectedCategoryId}; else value={...common,accountId,categoryId:selectedCategoryId};
}
- next[type]=item?next[type].map(x=>x.id===item.id?value:x):[...next[type],value];
+ next[type]=editing?next[type].map(x=>x.id===item.id?value:x):[...next[type],value];
try{await onSave(next);}catch(e){setLocalError(e.message);}
}
const simpleType=type==='accounts'||type==='categories';
- return e.target===e.currentTarget&&onClose()}>