matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(buchhaltung): add categories, recurring tx scheduling, sub-pot budget validation, and UX polish

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-30 12:56:33 +02:00
parent 86cb175aeb
commit 13aa4be599
9 changed files with 674 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
frontend/src/pages/Buchhaltung.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import {
Alert,
Badge,
Box,
Button,
@@ -62,6 +63,7 @@ import type {
Bankkonto, BankkontoFormData,
Konto, KontoFormData,
KontoTreeNode,
Kategorie,
Transaktion, TransaktionFormData, TransaktionFilters,
TransaktionStatus,
AusgabenTyp,
@@ -184,20 +186,35 @@ function KontoDialog({
haushaltsjahrId,
existing,
konten,
kategorien = [],
onSave,
externalError,
}: {
open: boolean;
onClose: () => void;
haushaltsjahrId: number;
existing?: Konto;
konten: Konto[];
kategorien?: Kategorie[];
onSave: (data: KontoFormData) => void;
externalError?: string | null;
}) {
const empty: KontoFormData = { haushaltsjahr_id: haushaltsjahrId, kontonummer: 0, bezeichnung: '', budget_gwg: 0, budget_anlagen: 0, budget_instandhaltung: 0, parent_id: null, notizen: '' };
const empty: KontoFormData = { haushaltsjahr_id: haushaltsjahrId, kontonummer: 0, bezeichnung: '', budget_gwg: 0, budget_anlagen: 0, budget_instandhaltung: 0, parent_id: null, kategorie_id: null, notizen: '' };
const [form, setForm] = useState<KontoFormData>(empty);
const [saveError, setSaveError] = useState<string | null>(null);
const selectedParent = konten.find(k => k.id === form.parent_id);
// Compute sibling budget usage for parent reference
const siblingBudgets = selectedParent ? (() => {
const siblings = konten.filter(k => k.parent_id === selectedParent.id && k.id !== existing?.id);
return {
gwg: siblings.reduce((s, k) => s + Number(k.budget_gwg || 0), 0),
anlagen: siblings.reduce((s, k) => s + Number(k.budget_anlagen || 0), 0),
instandhaltung: siblings.reduce((s, k) => s + Number(k.budget_instandhaltung || 0), 0),
};
})() : null;
// suffix = form.kontonummer - parent.kontonummer (arithmetic)
const suffixValue = selectedParent ? form.kontonummer - selectedParent.kontonummer : form.kontonummer;
@@ -217,7 +234,7 @@ function KontoDialog({
useEffect(() => {
if (existing) {
setForm({ haushaltsjahr_id: haushaltsjahrId, kontonummer: existing.kontonummer, bezeichnung: existing.bezeichnung, budget_gwg: existing.budget_gwg, budget_anlagen: existing.budget_anlagen, budget_instandhaltung: existing.budget_instandhaltung, parent_id: existing.parent_id, notizen: existing.notizen || '' });
setForm({ haushaltsjahr_id: haushaltsjahrId, kontonummer: existing.kontonummer, bezeichnung: existing.bezeichnung, budget_gwg: existing.budget_gwg, budget_anlagen: existing.budget_anlagen, budget_instandhaltung: existing.budget_instandhaltung, parent_id: existing.parent_id, kategorie_id: existing.kategorie_id ?? null, notizen: existing.notizen || '' });
} else {
setForm({ ...empty, haushaltsjahr_id: haushaltsjahrId });
}
@@ -258,10 +275,42 @@ function KontoDialog({
}
</Select>
</FormControl>
{kategorien.length > 0 && (
<FormControl fullWidth margin="dense">
<InputLabel>Kategorie</InputLabel>
<Select
value={form.kategorie_id ?? ''}
onChange={e => setForm(f => ({ ...f, kategorie_id: e.target.value ? Number(e.target.value) : null }))}
label="Kategorie"
>
<MenuItem value=""><em>Keine Kategorie</em></MenuItem>
{kategorien.map(kat => (
<MenuItem key={kat.id} value={kat.id}>{kat.bezeichnung}</MenuItem>
))}
</Select>
</FormControl>
)}
<TextField label="GWG Budget (€)" type="number" value={form.budget_gwg} onChange={e => setForm(f => ({ ...f, budget_gwg: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} />
{selectedParent && siblingBudgets && (
<Typography variant="caption" color="text.secondary" sx={{ mt: -1 }}>
Eltern-Budget: {fmtEur(selectedParent.budget_gwg)}, vergeben: {fmtEur(siblingBudgets.gwg)}, verfügbar: {fmtEur(selectedParent.budget_gwg - siblingBudgets.gwg)}
</Typography>
)}
<TextField label="Anlagen Budget (€)" type="number" value={form.budget_anlagen} onChange={e => setForm(f => ({ ...f, budget_anlagen: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} />
{selectedParent && siblingBudgets && (
<Typography variant="caption" color="text.secondary" sx={{ mt: -1 }}>
Eltern-Budget: {fmtEur(selectedParent.budget_anlagen)}, vergeben: {fmtEur(siblingBudgets.anlagen)}, verfügbar: {fmtEur(selectedParent.budget_anlagen - siblingBudgets.anlagen)}
</Typography>
)}
<TextField label="Instandhaltung Budget (€)" type="number" value={form.budget_instandhaltung} onChange={e => setForm(f => ({ ...f, budget_instandhaltung: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} />
{selectedParent && siblingBudgets && (
<Typography variant="caption" color="text.secondary" sx={{ mt: -1 }}>
Eltern-Budget: {fmtEur(selectedParent.budget_instandhaltung)}, vergeben: {fmtEur(siblingBudgets.instandhaltung)}, verfügbar: {fmtEur(selectedParent.budget_instandhaltung - siblingBudgets.instandhaltung)}
</Typography>
)}
<TextField label="Notizen" value={form.notizen} onChange={e => setForm(f => ({ ...f, notizen: e.target.value }))} multiline rows={2} />
{saveError && <Alert severity="error" onClose={() => setSaveError(null)}>{saveError}</Alert>}
{!saveError && externalError && <Alert severity="error">{externalError}</Alert>}
</Stack>
</DialogContent>
<DialogActions>
@@ -493,18 +542,23 @@ function UebersichtTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
queryFn: () => buchhaltungApi.getKontenTree(selectedJahrId!),
enabled: selectedJahrId != null,
});
const { data: kategorien = [] } = useQuery({
queryKey: ['buchhaltung-kategorien', selectedJahrId],
queryFn: () => buchhaltungApi.getKategorien(selectedJahrId!),
enabled: selectedJahrId != null,
});
const tree = buildTree(treeData);
const sumBudgetGwg = treeData.reduce((s, k) => s + Number(k.budget_gwg), 0);
const sumBudgetAnlagen = treeData.reduce((s, k) => s + Number(k.budget_anlagen), 0);
const sumBudgetInst = treeData.reduce((s, k) => s + Number(k.budget_instandhaltung), 0);
const sumBudgetGwg = treeData.reduce((s, k) => s + Number(k.budget_gwg || 0), 0);
const sumBudgetAnlagen = treeData.reduce((s, k) => s + Number(k.budget_anlagen || 0), 0);
const sumBudgetInst = treeData.reduce((s, k) => s + Number(k.budget_instandhaltung || 0), 0);
const sumBudgetGesamt = sumBudgetGwg + sumBudgetAnlagen + sumBudgetInst;
const sumSpentGwg = treeData.reduce((s, k) => s + Number(k.spent_gwg), 0);
const sumSpentAnlagen = treeData.reduce((s, k) => s + Number(k.spent_anlagen), 0);
const sumSpentInst = treeData.reduce((s, k) => s + Number(k.spent_instandhaltung), 0);
const sumSpentGwg = treeData.reduce((s, k) => s + Number(k.spent_gwg || 0), 0);
const sumSpentAnlagen = treeData.reduce((s, k) => s + Number(k.spent_anlagen || 0), 0);
const sumSpentInst = treeData.reduce((s, k) => s + Number(k.spent_instandhaltung || 0), 0);
const sumSpentGesamt = sumSpentGwg + sumSpentAnlagen + sumSpentInst;
const sumEinnahmen = treeData.reduce((s, k) => s + Number(k.einnahmen_betrag), 0);
const sumEinnahmen = treeData.reduce((s, k) => s + Number(k.einnahmen_betrag || 0), 0);
const totalEinnahmen = sumEinnahmen;
const totalAusgaben = sumSpentGesamt;
@@ -567,9 +621,54 @@ function UebersichtTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
{tree.length === 0 && (
<TableRow><TableCell colSpan={11} align="center"><Typography color="text.secondary">Keine Konten</Typography></TableCell></TableRow>
)}
{tree.map(k => (
<KontoRow key={k.id} konto={k} onNavigate={(id) => navigate(`/buchhaltung/konto/${id}`)} />
))}
{(() => {
const grouped = new Map<number | null, KontoTreeNode[]>();
tree.forEach(k => {
const key = k.kategorie_id ?? null;
if (!grouped.has(key)) grouped.set(key, []);
grouped.get(key)!.push(k);
});
const categoryOrder = kategorien.map(kat => kat.id);
const sortedKeys = [...grouped.keys()].sort((a, b) => {
if (a === null) return 1;
if (b === null) return -1;
return categoryOrder.indexOf(a) - categoryOrder.indexOf(b);
});
const hasMultipleGroups = sortedKeys.length > 1 || (sortedKeys.length === 1 && sortedKeys[0] !== null);
return sortedKeys.flatMap(key => {
const items = grouped.get(key)!;
const rows: React.ReactNode[] = [];
if (hasMultipleGroups) {
const katName = key !== null ? kategorien.find(k => k.id === key)?.bezeichnung : 'Ohne Kategorie';
const catBudgetGwg = items.reduce((s, k) => s + Number(k.budget_gwg || 0), 0);
const catBudgetAnl = items.reduce((s, k) => s + Number(k.budget_anlagen || 0), 0);
const catBudgetInst = items.reduce((s, k) => s + Number(k.budget_instandhaltung || 0), 0);
const catSpentGwg = items.reduce((s, k) => s + Number(k.spent_gwg || 0), 0);
const catSpentAnl = items.reduce((s, k) => s + Number(k.spent_anlagen || 0), 0);
const catSpentInst = items.reduce((s, k) => s + Number(k.spent_instandhaltung || 0), 0);
const catEinnahmen = items.reduce((s, k) => s + Number(k.einnahmen_betrag || 0), 0);
rows.push(
<TableRow key={`cat-${key}`} sx={{ bgcolor: 'grey.100', '& td': { fontWeight: 600, fontSize: '0.8rem' } }}>
<TableCell>{katName}</TableCell>
<TableCell align="right">{fmtEur(catBudgetGwg)}</TableCell>
<TableCell align="right">{fmtEur(catBudgetAnl)}</TableCell>
<TableCell align="right">{fmtEur(catBudgetInst)}</TableCell>
<TableCell align="right">{fmtEur(catBudgetGwg + catBudgetAnl + catBudgetInst)}</TableCell>
<TableCell align="right">{fmtEur(catSpentGwg)}</TableCell>
<TableCell align="right">{fmtEur(catSpentAnl)}</TableCell>
<TableCell align="right">{fmtEur(catSpentInst)}</TableCell>
<TableCell align="right">{fmtEur(catSpentGwg + catSpentAnl + catSpentInst)}</TableCell>
<TableCell align="right">{fmtEur(catEinnahmen)}</TableCell>
<TableCell />
</TableRow>
);
}
items.forEach(k => rows.push(
<KontoRow key={k.id} konto={k} onNavigate={(id) => navigate(`/buchhaltung/konto/${id}`)} />
));
return rows;
});
})()}
{tree.length > 0 && (
<TableRow sx={{ bgcolor: 'action.hover', '& td': { fontWeight: 700 } }}>
<TableCell>Gesamt</TableCell>
@@ -702,7 +801,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
{/* Filters */}
<Paper variant="outlined" sx={{ p: 1.5, mb: 2 }}>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
<FormControl sx={{ minWidth: 200 }}>
<FormControl size="small" sx={{ minWidth: 200 }}>
<InputLabel>Haushaltsjahr</InputLabel>
<Select size="small" value={filters.haushaltsjahr_id ?? ''} label="Haushaltsjahr"
onChange={e => { const v = Number(e.target.value); setFilters(f => ({ ...f, haushaltsjahr_id: v || undefined })); onJahrChange(v); }}>
@@ -710,7 +809,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
{haushaltsjahre.map(hj => <MenuItem key={hj.id} value={hj.id}>{hj.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
<FormControl sx={{ minWidth: 140 }}>
<FormControl size="small" sx={{ minWidth: 140 }}>
<InputLabel>Status</InputLabel>
<Select size="small" value={filters.status ?? ''} label="Status"
onChange={e => setFilters(f => ({ ...f, status: (e.target.value as TransaktionStatus) || undefined }))}>
@@ -718,7 +817,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
{(Object.entries(TRANSAKTION_STATUS_LABELS) as [TransaktionStatus, string][]).map(([v, l]) => <MenuItem key={v} value={v}>{l}</MenuItem>)}
</Select>
</FormControl>
<FormControl sx={{ minWidth: 130 }}>
<FormControl size="small" sx={{ minWidth: 130 }}>
<InputLabel>Typ</InputLabel>
<Select size="small" value={filters.typ ?? ''} label="Typ"
onChange={e => setFilters(f => ({ ...f, typ: (e.target.value as 'einnahme' | 'ausgabe') || undefined }))}>
@@ -903,6 +1002,7 @@ function WiederkehrendDialog({
empfaenger_auftraggeber: '',
intervall: 'monatlich',
naechste_ausfuehrung: today,
ausfuehrungstag: 'erster',
aktiv: true,
};
const [form, setForm] = useState<WiederkehrendFormData>(empty);
@@ -919,6 +1019,8 @@ function WiederkehrendDialog({
empfaenger_auftraggeber: existing.empfaenger_auftraggeber || '',
intervall: existing.intervall,
naechste_ausfuehrung: existing.naechste_ausfuehrung.slice(0, 10),
ausfuehrungstag: existing.ausfuehrungstag || 'erster',
ausfuehrungs_monat: existing.ausfuehrungs_monat ?? undefined,
aktiv: existing.aktiv,
});
} else {
@@ -947,6 +1049,25 @@ function WiederkehrendDialog({
{(Object.entries(INTERVALL_LABELS) as [WiederkehrendIntervall, string][]).map(([v, l]) => <MenuItem key={v} value={v}>{l}</MenuItem>)}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Ausführungstag</InputLabel>
<Select value={form.ausfuehrungstag ?? 'erster'} label="Ausführungstag" onChange={e => setForm(f => ({ ...f, ausfuehrungstag: e.target.value as 'erster' | 'mitte' | 'letzter' }))}>
<MenuItem value="erster">Erster des Monats</MenuItem>
<MenuItem value="mitte">Mitte des Monats (15.)</MenuItem>
<MenuItem value="letzter">Letzter des Monats</MenuItem>
</Select>
</FormControl>
{form.intervall === 'jaehrlich' && (
<FormControl fullWidth>
<InputLabel>Ausführungsmonat</InputLabel>
<Select value={form.ausfuehrungs_monat ?? ''} label="Ausführungsmonat" onChange={e => setForm(f => ({ ...f, ausfuehrungs_monat: e.target.value ? Number(e.target.value) : undefined }))}>
<MenuItem value=""><em>Nicht festgelegt</em></MenuItem>
{['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'].map((m, i) => (
<MenuItem key={i + 1} value={i + 1}>{m}</MenuItem>
))}
</Select>
</FormControl>
)}
<TextField label="Nächste Ausführung" type="date" value={form.naechste_ausfuehrung} onChange={e => setForm(f => ({ ...f, naechste_ausfuehrung: e.target.value }))} InputLabelProps={{ shrink: true }} required />
<FormControl fullWidth>
<InputLabel>Konto</InputLabel>
@@ -989,6 +1110,7 @@ function KontenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
const { hasPermission } = usePermissionContext();
const [subTab, setSubTab] = useState(0);
const [kontoDialog, setKontoDialog] = useState<{ open: boolean; existing?: Konto }>({ open: false });
const [kontoSaveError, setKontoSaveError] = useState<string | null>(null);
const [bankDialog, setBankDialog] = useState<{ open: boolean; existing?: Bankkonto }>({ open: false });
const [jahrDialog, setJahrDialog] = useState<{ open: boolean; existing?: Haushaltsjahr }>({ open: false });
const [wiederkehrendDialog, setWiederkehrendDialog] = useState<{ open: boolean; existing?: WiederkehrendBuchung }>({ open: false });
@@ -1007,18 +1129,43 @@ function KontenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
const konten = kontenFlat;
const { data: bankkonten = [] } = useQuery({ queryKey: ['bankkonten'], queryFn: buchhaltungApi.getBankkonten });
const { data: wiederkehrend = [] } = useQuery({ queryKey: ['buchhaltung-wiederkehrend'], queryFn: buchhaltungApi.getWiederkehrend });
const { data: kategorien = [] } = useQuery({
queryKey: ['buchhaltung-kategorien', selectedJahrId],
queryFn: () => buchhaltungApi.getKategorien(selectedJahrId!),
enabled: selectedJahrId != null,
});
const [newKategorie, setNewKategorie] = useState('');
const [addingKategorie, setAddingKategorie] = useState(false);
const createKategorieMut = useMutation({
mutationFn: buchhaltungApi.createKategorie,
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-kategorien'] }); setNewKategorie(''); setAddingKategorie(false); showSuccess('Kategorie erstellt'); },
onError: () => showError('Kategorie konnte nicht erstellt werden'),
});
const deleteKategorieMut = useMutation({
mutationFn: buchhaltungApi.deleteKategorie,
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-kategorien'] }); qc.invalidateQueries({ queryKey: ['kontenTree'] }); showSuccess('Kategorie gelöscht'); },
onError: () => showError('Kategorie konnte nicht gelöscht werden'),
});
const canManage = hasPermission('buchhaltung:manage_accounts');
const createKontoMut = useMutation({
mutationFn: buchhaltungApi.createKonto,
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] }); qc.invalidateQueries({ queryKey: ['kontenTree'] }); setKontoDialog({ open: false }); showSuccess('Konto erstellt'); },
onError: (err: any) => showError(err?.message || err?.response?.data?.message || 'Konto konnte nicht erstellt werden'),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] }); qc.invalidateQueries({ queryKey: ['kontenTree'] }); setKontoDialog({ open: false }); setKontoSaveError(null); showSuccess('Konto erstellt'); },
onError: (err: any) => {
const msg = err?.response?.data?.message || err?.message || 'Konto konnte nicht erstellt werden';
if (err?.response?.status === 400) { setKontoSaveError(msg); } else { showError(msg); }
},
});
const updateKontoMut = useMutation({
mutationFn: ({ id, data }: { id: number; data: Partial<KontoFormData> }) => buchhaltungApi.updateKonto(id, data),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] }); qc.invalidateQueries({ queryKey: ['kontenTree'] }); setKontoDialog({ open: false }); showSuccess('Konto aktualisiert'); },
onError: () => showError('Konto konnte nicht aktualisiert werden'),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] }); qc.invalidateQueries({ queryKey: ['kontenTree'] }); setKontoDialog({ open: false }); setKontoSaveError(null); showSuccess('Konto aktualisiert'); },
onError: (err: any) => {
const msg = err?.response?.data?.message || err?.message || 'Konto konnte nicht aktualisiert werden';
if (err?.response?.status === 400) { setKontoSaveError(msg); } else { showError(msg); }
},
});
const createBankMut = useMutation({
mutationFn: buchhaltungApi.createBankkonto,
@@ -1070,12 +1217,14 @@ function KontenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
return (
<Box>
<Tabs value={subTab} onChange={(_, v) => setSubTab(v)} sx={{ mb: 2 }}>
<Tab label="Konten" />
<Tab label="Bankkonten" />
<Tab label="Haushaltsjahre" />
<Tab label="Wiederkehrend" />
</Tabs>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs value={subTab} onChange={(_, v) => setSubTab(v)}>
<Tab label="Konten" />
<Tab label="Bankkonten" />
<Tab label="Haushaltsjahre" />
<Tab label="Wiederkehrend" />
</Tabs>
</Box>
{/* Sub-Tab 0: Konten */}
{subTab === 0 && (
@@ -1089,36 +1238,92 @@ function KontenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
</FormControl>
{canManage && <Button variant="contained" startIcon={<AddIcon />} disabled={!selectedJahrId} onClick={() => setKontoDialog({ open: true })}>Konto anlegen</Button>}
</Box>
<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Konto</TableCell>
<TableCell align="right">GWG</TableCell>
<TableCell align="right">Anlagen</TableCell>
<TableCell align="right">Instandh.</TableCell>
<TableCell align="right">Gesamt</TableCell>
<TableCell sx={{ width: 40 }} />
</TableRow>
</TableHead>
<TableBody>
{kontenTree.length === 0 && <TableRow><TableCell colSpan={6} align="center"><Typography color="text.secondary">Keine Konten</Typography></TableCell></TableRow>}
{kontenTree.map(k => (
<KontoManageRow
key={k.id}
konto={k}
onNavigate={(id) => navigate('/buchhaltung/konto/' + id + '/verwalten')}
/>
))}
</TableBody>
</Table>
</TableContainer>
{selectedJahrId && canManage && (
<Box sx={{ mb: 2, display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
{kategorien.map(kat => (
<Chip key={kat.id} label={kat.bezeichnung} onDelete={() => deleteKategorieMut.mutate(kat.id)} size="small" />
))}
{addingKategorie ? (
<TextField
size="small"
placeholder="Name..."
value={newKategorie}
onChange={e => setNewKategorie(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter' && newKategorie.trim() && selectedJahrId) {
createKategorieMut.mutate({ haushaltsjahr_id: selectedJahrId, bezeichnung: newKategorie.trim() });
} else if (e.key === 'Escape') {
setAddingKategorie(false); setNewKategorie('');
}
}}
onBlur={() => { setAddingKategorie(false); setNewKategorie(''); }}
autoFocus
sx={{ width: 160 }}
/>
) : (
<Chip label="+ Kategorie" variant="outlined" size="small" onClick={() => setAddingKategorie(true)} />
)}
</Box>
)}
{(() => {
const grouped = new Map<number | null, KontoTreeNode[]>();
kontenTree.forEach(k => {
const key = k.kategorie_id ?? null;
if (!grouped.has(key)) grouped.set(key, []);
grouped.get(key)!.push(k);
});
const categoryOrder = kategorien.map(kat => kat.id);
const sortedKeys = [...grouped.keys()].sort((a, b) => {
if (a === null) return 1;
if (b === null) return -1;
return categoryOrder.indexOf(a) - categoryOrder.indexOf(b);
});
return sortedKeys.map(key => {
const katName = key !== null ? kategorien.find(k => k.id === key)?.bezeichnung : 'Ohne Kategorie';
const items = grouped.get(key)!;
return (
<Box key={key ?? 'none'} sx={{ mb: 2 }}>
{(sortedKeys.length > 1 || key !== null) && (
<Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5 }}>{katName}</Typography>
)}
<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Konto</TableCell>
<TableCell align="right">GWG</TableCell>
<TableCell align="right">Anlagen</TableCell>
<TableCell align="right">Instandh.</TableCell>
<TableCell align="right">Gesamt</TableCell>
<TableCell sx={{ width: 40 }} />
</TableRow>
</TableHead>
<TableBody>
{items.map(k => (
<KontoManageRow
key={k.id}
konto={k}
onNavigate={(id) => navigate('/buchhaltung/konto/' + id + '/verwalten')}
/>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
});
})()}
{kontenTree.length === 0 && selectedJahrId && (
<Paper><Box sx={{ p: 2, textAlign: 'center' }}><Typography color="text.secondary">Keine Konten</Typography></Box></Paper>
)}
{selectedJahrId && <KontoDialog
open={kontoDialog.open}
onClose={() => setKontoDialog({ open: false })}
onClose={() => { setKontoDialog({ open: false }); setKontoSaveError(null); }}
haushaltsjahrId={selectedJahrId}
existing={kontoDialog.existing}
konten={konten}
kategorien={kategorien}
externalError={kontoSaveError}
onSave={data => kontoDialog.existing
? updateKontoMut.mutate({ id: kontoDialog.existing.id, data })
: createKontoMut.mutate(data)

18
frontend/src/pages/BuchhaltungKontoDetail.tsx
View File

@@ -11,6 +11,8 @@ import { buchhaltungApi } from '../services/buchhaltung';
import { AUSGABEN_TYP_LABELS } from '../types/buchhaltung.types';
import type { AusgabenTyp } from '../types/buchhaltung.types';
const fmtEur = (n: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(n);
function BudgetCard({ label, budget, spent }: { label: string; budget: number; spent: number }) {
const utilization = budget > 0 ? Math.min((spent / budget) * 100, 100) : 0;
const over = spent > budget && budget > 0;
@@ -18,10 +20,10 @@ function BudgetCard({ label, budget, spent }: { label: string; budget: number; s
<Card>
<CardContent>
<Typography variant="subtitle2" color="text.secondary">{label}</Typography>
<Typography variant="h6">{Number(spent).toFixed(2).replace('.', ',')} €</Typography>
<Typography variant="h6">{fmtEur(Number(spent))}</Typography>
{budget > 0 && (
<>
<Typography variant="body2" color="text.secondary">Budget: {Number(budget).toFixed(2).replace('.', ',')} €</Typography>
<Typography variant="body2" color="text.secondary">Budget: {fmtEur(Number(budget))}</Typography>
<LinearProgress
variant="determinate"
value={utilization}
@@ -86,7 +88,7 @@ export default function BuchhaltungKontoDetail() {
<Card>
<CardContent>
<Typography variant="subtitle2" color="text.secondary">Einnahmen</Typography>
<Typography variant="h6" color="success.main">{totalEinnahmen.toFixed(2).replace('.', ',')} €</Typography>
<Typography variant="h6" color="success.main">{fmtEur(totalEinnahmen)}</Typography>
</CardContent>
</Card>
</Grid>
@@ -115,11 +117,11 @@ export default function BuchhaltungKontoDetail() {
onClick={() => navigate(`/buchhaltung/konto/${child.id}`)}
>
<TableCell>{child.kontonummer} — {child.bezeichnung}</TableCell>
<TableCell align="right">{Number(child.budget_gwg).toFixed(2)} €</TableCell>
<TableCell align="right">{Number(child.budget_anlagen).toFixed(2)} €</TableCell>
<TableCell align="right">{Number(child.budget_instandhaltung).toFixed(2)} €</TableCell>
<TableCell align="right">{fmtEur(Number(child.budget_gwg))}</TableCell>
<TableCell align="right">{fmtEur(Number(child.budget_anlagen))}</TableCell>
<TableCell align="right">{fmtEur(Number(child.budget_instandhaltung))}</TableCell>
<TableCell align="right">
{(Number(child.budget_gwg) + Number(child.budget_anlagen) + Number(child.budget_instandhaltung)).toFixed(2)} €
{fmtEur(Number(child.budget_gwg) + Number(child.budget_anlagen) + Number(child.budget_instandhaltung))}
</TableCell>
</TableRow>
))}
@@ -158,7 +160,7 @@ export default function BuchhaltungKontoDetail() {
<TableCell>{t.ausgaben_typ ? AUSGABEN_TYP_LABELS[t.ausgaben_typ as AusgabenTyp] : '—'}</TableCell>
<TableCell align="right"
sx={{ color: t.typ === 'einnahme' ? 'success.main' : 'error.main' }}>
{t.typ === 'einnahme' ? '+' : '-'}{Number(t.betrag).toFixed(2).replace('.', ',')} €
{t.typ === 'einnahme' ? '+' : '-'}{fmtEur(Number(t.betrag))}
</TableCell>
<TableCell>{t.status}</TableCell>
</TableRow>

246
frontend/src/pages/BuchhaltungKontoManage.tsx
View File

@@ -3,15 +3,49 @@ import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
Box, Button, TextField, Typography, Paper, Stack, MenuItem, Select,
FormControl, InputLabel, CircularProgress, Alert, Dialog, DialogTitle,
DialogContent, DialogActions, Skeleton,
FormControl, InputLabel, Alert, Dialog, DialogTitle,
DialogContent, DialogActions, Skeleton, Divider, LinearProgress, Grid,
} from '@mui/material';
import { ArrowBack, Delete, Save } from '@mui/icons-material';
import { ArrowBack, Delete, Edit, Save, Cancel } from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { buchhaltungApi } from '../services/buchhaltung';
import { useNotification } from '../contexts/NotificationContext';
import type { KontoFormData } from '../types/buchhaltung.types';
const fmtEur = (n: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(n);
function FieldRow({ label, value }: { label: string; value: React.ReactNode }) {
return (
<Grid container spacing={2} sx={{ py: 0.75 }}>
<Grid item xs={5}><Typography variant="body2" color="text.secondary">{label}</Typography></Grid>
<Grid item xs={7}><Typography variant="body2">{value}</Typography></Grid>
</Grid>
);
}
function BudgetBar({ label, budget, spent }: { label: string; budget: number; spent: number }) {
const utilization = budget > 0 ? Math.min((spent / budget) * 100, 100) : 0;
const over = spent > budget && budget > 0;
return (
<Box sx={{ mb: 1.5 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
<Typography variant="body2" color="text.secondary">{label}</Typography>
<Typography variant="body2">
{fmtEur(spent)} / {fmtEur(budget)}
</Typography>
</Box>
{budget > 0 && (
<LinearProgress
variant="determinate"
value={utilization}
color={over ? 'error' : utilization > 80 ? 'warning' : 'primary'}
sx={{ height: 6, borderRadius: 3 }}
/>
)}
</Box>
);
}
export default function BuchhaltungKontoManage() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
@@ -19,8 +53,10 @@ export default function BuchhaltungKontoManage() {
const { showSuccess, showError } = useNotification();
const kontoId = Number(id);
const [isEditing, setIsEditing] = useState(false);
const [form, setForm] = useState<Partial<KontoFormData>>({});
const [deleteOpen, setDeleteOpen] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null);
const { data, isLoading, isError } = useQuery({
queryKey: ['kontoDetail', kontoId],
@@ -28,13 +64,18 @@ export default function BuchhaltungKontoManage() {
enabled: !!kontoId,
});
// Load sibling konten for parent selector (exclude self)
const { data: alleKonten = [] } = useQuery({
queryKey: ['buchhaltung-konten', data?.konto.haushaltsjahr_id],
queryFn: () => buchhaltungApi.getKonten(data!.konto.haushaltsjahr_id),
enabled: !!data?.konto.haushaltsjahr_id,
});
const { data: kategorien = [] } = useQuery({
queryKey: ['buchhaltung-kategorien', data?.konto.haushaltsjahr_id],
queryFn: () => buchhaltungApi.getKategorien(data!.konto.haushaltsjahr_id),
enabled: !!data?.konto.haushaltsjahr_id,
});
useEffect(() => {
if (data?.konto) {
const k = data.konto;
@@ -46,6 +87,7 @@ export default function BuchhaltungKontoManage() {
budget_anlagen: k.budget_anlagen,
budget_instandhaltung: k.budget_instandhaltung,
parent_id: k.parent_id ?? undefined,
kategorie_id: k.kategorie_id ?? undefined,
notizen: k.notizen ?? '',
});
}
@@ -58,8 +100,13 @@ export default function BuchhaltungKontoManage() {
qc.invalidateQueries({ queryKey: ['kontenTree'] });
qc.invalidateQueries({ queryKey: ['buchhaltung-konten'] });
showSuccess('Konto gespeichert');
setIsEditing(false);
setSaveError(null);
},
onError: (err: any) => {
const msg = err?.response?.data?.message || err?.message || 'Speichern fehlgeschlagen';
if (err?.response?.status === 400) { setSaveError(msg); } else { showError(msg); }
},
onError: () => showError('Speichern fehlgeschlagen'),
});
const deleteMut = useMutation({
@@ -77,13 +124,47 @@ export default function BuchhaltungKontoManage() {
if (isError || !data) return <DashboardLayout><Box sx={{ p: 3 }}><Alert severity="error">Konto nicht gefunden.</Alert></Box></DashboardLayout>;
const konto = data.konto;
const { transaktionen } = data;
const otherKonten = alleKonten.filter(k => k.id !== kontoId);
const parentKonto = alleKonten.find(k => k.id === konto.parent_id);
const kategorie = kategorien.find(k => k.id === konto.kategorie_id);
const spentGwg = transaktionen.filter(t => t.typ === 'ausgabe' && t.status === 'gebucht' && t.ausgaben_typ === 'gwg').reduce((s, t) => s + Number(t.betrag), 0);
const spentAnlagen = transaktionen.filter(t => t.typ === 'ausgabe' && t.status === 'gebucht' && t.ausgaben_typ === 'anlagen').reduce((s, t) => s + Number(t.betrag), 0);
const spentInst = transaktionen.filter(t => t.typ === 'ausgabe' && t.status === 'gebucht' && t.ausgaben_typ === 'instandhaltung').reduce((s, t) => s + Number(t.betrag), 0);
// Sibling budget usage for parent reference
const siblingBudgets = parentKonto ? (() => {
const siblings = alleKonten.filter(k => k.parent_id === parentKonto.id && k.id !== kontoId);
return {
gwg: siblings.reduce((s, k) => s + Number(k.budget_gwg || 0), 0),
anlagen: siblings.reduce((s, k) => s + Number(k.budget_anlagen || 0), 0),
instandhaltung: siblings.reduce((s, k) => s + Number(k.budget_instandhaltung || 0), 0),
};
})() : null;
const handleSave = () => {
if (!form.bezeichnung) return;
updateMut.mutate(form);
};
const handleCancel = () => {
const k = konto;
setForm({
haushaltsjahr_id: k.haushaltsjahr_id,
kontonummer: k.kontonummer,
bezeichnung: k.bezeichnung,
budget_gwg: k.budget_gwg,
budget_anlagen: k.budget_anlagen,
budget_instandhaltung: k.budget_instandhaltung,
parent_id: k.parent_id ?? undefined,
kategorie_id: k.kategorie_id ?? undefined,
notizen: k.notizen ?? '',
});
setIsEditing(false);
setSaveError(null);
};
return (
<DashboardLayout>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
@@ -93,88 +174,83 @@ export default function BuchhaltungKontoManage() {
<Typography variant="h5" sx={{ flexGrow: 1, ml: 1 }}>
{konto.kontonummer} — {konto.bezeichnung}
</Typography>
<Button
variant="outlined"
color="error"
startIcon={<Delete />}
onClick={() => setDeleteOpen(true)}
>
Löschen
</Button>
<Button
variant="contained"
startIcon={<Save />}
onClick={handleSave}
disabled={updateMut.isPending || !form.bezeichnung}
>
Speichern
</Button>
{isEditing ? (
<>
<Button variant="outlined" startIcon={<Cancel />} onClick={handleCancel}>Abbrechen</Button>
<Button variant="contained" startIcon={<Save />} onClick={handleSave} disabled={updateMut.isPending || !form.bezeichnung}>Speichern</Button>
</>
) : (
<>
<Button variant="outlined" color="error" size="small" startIcon={<Delete />} onClick={() => setDeleteOpen(true)}>Löschen</Button>
<Button variant="outlined" size="small" startIcon={<Edit />} onClick={() => setIsEditing(true)}>Bearbeiten</Button>
</>
)}
</Box>
<Paper sx={{ p: 3, maxWidth: 600 }}>
<Stack spacing={2.5}>
<TextField
label="Kontonummer"
type="number"
value={form.kontonummer ?? ''}
onChange={e => setForm(f => ({ ...f, kontonummer: Number(e.target.value) }))}
required
fullWidth
/>
<TextField
label="Bezeichnung"
value={form.bezeichnung ?? ''}
onChange={e => setForm(f => ({ ...f, bezeichnung: e.target.value }))}
required
fullWidth
/>
<FormControl fullWidth>
<InputLabel>Übergeordnetes Konto</InputLabel>
<Select
value={form.parent_id ?? ''}
label="Übergeordnetes Konto"
onChange={e => setForm(f => ({ ...f, parent_id: e.target.value ? Number(e.target.value) : undefined }))}
>
<MenuItem value=""><em>Kein übergeordnetes Konto</em></MenuItem>
{otherKonten.map(k => (
<MenuItem key={k.id} value={k.id}>{k.kontonummer} – {k.bezeichnung}</MenuItem>
))}
</Select>
</FormControl>
<TextField
label="Budget GWG (€)"
type="number"
value={form.budget_gwg ?? 0}
onChange={e => setForm(f => ({ ...f, budget_gwg: parseFloat(e.target.value) || 0 }))}
inputProps={{ step: '0.01', min: '0' }}
fullWidth
/>
<TextField
label="Budget Anlagen (€)"
type="number"
value={form.budget_anlagen ?? 0}
onChange={e => setForm(f => ({ ...f, budget_anlagen: parseFloat(e.target.value) || 0 }))}
inputProps={{ step: '0.01', min: '0' }}
fullWidth
/>
<TextField
label="Budget Instandhaltung (€)"
type="number"
value={form.budget_instandhaltung ?? 0}
onChange={e => setForm(f => ({ ...f, budget_instandhaltung: parseFloat(e.target.value) || 0 }))}
inputProps={{ step: '0.01', min: '0' }}
fullWidth
/>
<TextField
label="Notizen"
value={form.notizen ?? ''}
onChange={e => setForm(f => ({ ...f, notizen: e.target.value }))}
multiline
rows={3}
fullWidth
/>
</Stack>
</Paper>
<Stack spacing={3} sx={{ maxWidth: 640 }}>
{/* Section: Allgemein */}
<Paper sx={{ p: 2.5 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>Allgemein</Typography>
<Divider sx={{ mb: 1.5 }} />
{isEditing ? (
<Stack spacing={2}>
<TextField label="Kontonummer" type="number" value={form.kontonummer ?? ''} onChange={e => setForm(f => ({ ...f, kontonummer: Number(e.target.value) }))} required fullWidth size="small" />
<TextField label="Bezeichnung" value={form.bezeichnung ?? ''} onChange={e => setForm(f => ({ ...f, bezeichnung: e.target.value }))} required fullWidth size="small" />
<FormControl fullWidth size="small">
<InputLabel>Übergeordnetes Konto</InputLabel>
<Select value={form.parent_id ?? ''} label="Übergeordnetes Konto" onChange={e => setForm(f => ({ ...f, parent_id: e.target.value ? Number(e.target.value) : undefined }))}>
<MenuItem value=""><em>Kein übergeordnetes Konto</em></MenuItem>
{otherKonten.map(k => <MenuItem key={k.id} value={k.id}>{k.kontonummer} – {k.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
{kategorien.length > 0 && (
<FormControl fullWidth size="small">
<InputLabel>Kategorie</InputLabel>
<Select value={form.kategorie_id ?? ''} label="Kategorie" onChange={e => setForm(f => ({ ...f, kategorie_id: e.target.value ? Number(e.target.value) : undefined }))}>
<MenuItem value=""><em>Keine Kategorie</em></MenuItem>
{kategorien.map(k => <MenuItem key={k.id} value={k.id}>{k.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
)}
<TextField label="Notizen" value={form.notizen ?? ''} onChange={e => setForm(f => ({ ...f, notizen: e.target.value }))} multiline rows={3} fullWidth size="small" />
</Stack>
) : (
<>
<FieldRow label="Kontonummer" value={konto.kontonummer} />
<FieldRow label="Bezeichnung" value={konto.bezeichnung} />
<FieldRow label="Übergeordnetes Konto" value={parentKonto ? `${parentKonto.kontonummer} – ${parentKonto.bezeichnung}` : '—'} />
<FieldRow label="Kategorie" value={kategorie?.bezeichnung || '—'} />
<FieldRow label="Notizen" value={konto.notizen || '—'} />
</>
)}
</Paper>
{/* Section: Budget */}
<Paper sx={{ p: 2.5 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>Budget</Typography>
<Divider sx={{ mb: 1.5 }} />
{isEditing ? (
<Stack spacing={2}>
<TextField label="Budget GWG (€)" type="number" value={form.budget_gwg ?? 0} onChange={e => setForm(f => ({ ...f, budget_gwg: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small"
helperText={parentKonto && siblingBudgets ? `Eltern: ${fmtEur(parentKonto.budget_gwg)}, vergeben: ${fmtEur(siblingBudgets.gwg)}, verfügbar: ${fmtEur(parentKonto.budget_gwg - siblingBudgets.gwg)}` : undefined} />
<TextField label="Budget Anlagen (€)" type="number" value={form.budget_anlagen ?? 0} onChange={e => setForm(f => ({ ...f, budget_anlagen: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small"
helperText={parentKonto && siblingBudgets ? `Eltern: ${fmtEur(parentKonto.budget_anlagen)}, vergeben: ${fmtEur(siblingBudgets.anlagen)}, verfügbar: ${fmtEur(parentKonto.budget_anlagen - siblingBudgets.anlagen)}` : undefined} />
<TextField label="Budget Instandhaltung (€)" type="number" value={form.budget_instandhaltung ?? 0} onChange={e => setForm(f => ({ ...f, budget_instandhaltung: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} fullWidth size="small"
helperText={parentKonto && siblingBudgets ? `Eltern: ${fmtEur(parentKonto.budget_instandhaltung)}, vergeben: ${fmtEur(siblingBudgets.instandhaltung)}, verfügbar: ${fmtEur(parentKonto.budget_instandhaltung - siblingBudgets.instandhaltung)}` : undefined} />
{saveError && <Alert severity="error" onClose={() => setSaveError(null)}>{saveError}</Alert>}
</Stack>
) : (
<>
<BudgetBar label="GWG" budget={konto.budget_gwg} spent={spentGwg} />
<BudgetBar label="Anlagen" budget={konto.budget_anlagen} spent={spentAnlagen} />
<BudgetBar label="Instandhaltung" budget={konto.budget_instandhaltung} spent={spentInst} />
<Divider sx={{ my: 1 }} />
<FieldRow label="Budget Gesamt" value={fmtEur(konto.budget_gwg + konto.budget_anlagen + konto.budget_instandhaltung)} />
<FieldRow label="Ausgaben Gesamt" value={fmtEur(spentGwg + spentAnlagen + spentInst)} />
</>
)}
</Paper>
</Stack>
<Dialog open={deleteOpen} onClose={() => setDeleteOpen(false)}>
<DialogTitle>Konto löschen</DialogTitle>