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

feat(buchhaltung): replace transaction dialog with dedicated form page, enforce full field validation before booking

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-04-14 14:41:30 +02:00
parent 967cad5922
commit 7392bfc29f
3 changed files with 409 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/App.tsx
View File

@@ -45,6 +45,7 @@ import Buchhaltung from './pages/Buchhaltung';
import BuchhaltungKontoDetail from './pages/BuchhaltungKontoDetail';
import BuchhaltungKontoManage from './pages/BuchhaltungKontoManage';
import BuchhaltungBankkontoDetail from './pages/BuchhaltungBankkontoDetail';
import BuchhaltungTransaktionForm from './pages/BuchhaltungTransaktionForm';
import Haushaltsplan from './pages/Haushaltsplan';
import HaushaltsplanDetail from './pages/HaushaltsplanDetail';
import FahrzeugEinstellungen from './pages/FahrzeugEinstellungen';
@@ -411,6 +412,22 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="/buchhaltung/transaktionen/neu"
element={
<ProtectedRoute>
<BuchhaltungTransaktionForm />
</ProtectedRoute>
}
/>
<Route
path="/buchhaltung/transaktionen/:id/bearbeiten"
element={
<ProtectedRoute>
<BuchhaltungTransaktionForm />
</ProtectedRoute>
}
/>
<Route
path="/buchhaltung/konto/:id/verwalten"
element={

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

@@ -55,7 +55,6 @@ import {
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { buchhaltungApi } from '../services/buchhaltung';
import { bestellungApi } from '../services/bestellung';
import { configApi, type PdfSettings } from '../services/config';
import { addPdfHeader, addPdfFooter } from '../utils/pdfExport';
import ChatAwareFab from '../components/shared/ChatAwareFab';
@@ -68,7 +67,7 @@ import type {
KontoTreeNode,
KontoTyp,
Kategorie,
Transaktion, TransaktionFormData, TransaktionFilters,
Transaktion, TransaktionFilters,
TransaktionTyp,
AusgabenTyp,
@@ -495,147 +494,6 @@ function KontoDialog({
);
}
function TransaktionDialog({
open,
onClose,
haushaltsjahre,
selectedJahrId,
onSave,
existing,
}: {
open: boolean;
onClose: () => void;
haushaltsjahre: Haushaltsjahr[];
selectedJahrId: number | null;
onSave: (data: TransaktionFormData) => void;
existing?: Transaktion;
}) {
const today = new Date().toISOString().slice(0, 10);
const [form, setForm] = useState<TransaktionFormData>({
haushaltsjahr_id: selectedJahrId || 0,
typ: 'ausgabe',
betrag: 0,
datum: today,
konto_id: null,
bankkonto_id: null,
beschreibung: '',
empfaenger_auftraggeber: '',
verwendungszweck: '',
beleg_nr: '',
bestellung_id: null,
ausgaben_typ: null,
});
const { data: konten = [] } = useQuery({
queryKey: ['buchhaltung-konten', form.haushaltsjahr_id],
queryFn: () => buchhaltungApi.getKonten(form.haushaltsjahr_id),
enabled: form.haushaltsjahr_id > 0,
});
const { data: bankkonten = [] } = useQuery({ queryKey: ['bankkonten'], queryFn: buchhaltungApi.getBankkonten });
const { data: bestellungen = [] } = useQuery({
queryKey: ['bestellungen-all'],
queryFn: () => bestellungApi.getOrders(),
staleTime: 5 * 60 * 1000,
});
useEffect(() => {
if (open) {
if (existing) {
setForm({
haushaltsjahr_id: existing.haushaltsjahr_id,
typ: existing.typ as 'einnahme' | 'ausgabe',
betrag: Number(existing.betrag),
datum: existing.datum.slice(0, 10),
konto_id: existing.konto_id,
bankkonto_id: existing.bankkonto_id,
beschreibung: existing.beschreibung || '',
empfaenger_auftraggeber: existing.empfaenger_auftraggeber || '',
verwendungszweck: existing.verwendungszweck || '',
beleg_nr: existing.beleg_nr || '',
bestellung_id: existing.bestellung_id,
ausgaben_typ: existing.ausgaben_typ,
});
} else {
setForm(f => ({ ...f, haushaltsjahr_id: selectedJahrId || 0, datum: today }));
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>{existing ? 'Transaktion bearbeiten' : 'Neue Transaktion'}</DialogTitle>
<DialogContent>
<Stack spacing={2} sx={{ mt: 1 }}>
<FormControl fullWidth required>
<InputLabel>Haushaltsjahr</InputLabel>
<Select value={form.haushaltsjahr_id || ''} label="Haushaltsjahr" onChange={e => setForm(f => ({ ...f, haushaltsjahr_id: Number(e.target.value), konto_id: null }))}>
{haushaltsjahre.map(hj => <MenuItem key={hj.id} value={hj.id}>{hj.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
<FormControl fullWidth required>
<InputLabel>Typ</InputLabel>
<Select value={form.typ} label="Typ" onChange={e => setForm(f => ({ ...f, typ: e.target.value as 'einnahme' | 'ausgabe' }))}>
<MenuItem value="ausgabe">Ausgabe</MenuItem>
<MenuItem value="einnahme">Einnahme</MenuItem>
</Select>
</FormControl>
{form.typ === 'ausgabe' && (() => {
const selectedKonto = konten.find(k => k.id === form.konto_id);
const isEinfach = selectedKonto && (selectedKonto.budget_typ || 'detailliert') === 'einfach';
return !isEinfach ? (
<FormControl fullWidth>
<InputLabel>Ausgaben-Typ</InputLabel>
<Select
value={form.ausgaben_typ || ''}
onChange={e => setForm(f => ({ ...f, ausgaben_typ: (e.target.value as AusgabenTyp) || null }))}
label="Ausgaben-Typ"
>
<MenuItem value=""><em>Kein Typ</em></MenuItem>
<MenuItem value="gwg">GWG</MenuItem>
<MenuItem value="anlagen">Anlagen</MenuItem>
<MenuItem value="instandhaltung">Instandhaltung</MenuItem>
</Select>
</FormControl>
) : null;
})()}
<TextField label="Betrag (€)" type="number" value={form.betrag} onChange={e => setForm(f => ({ ...f, betrag: parseFloat(e.target.value) || 0 }))} inputProps={{ step: '0.01', min: '0' }} required />
<TextField label="Datum" type="date" value={form.datum} onChange={e => setForm(f => ({ ...f, datum: e.target.value }))} InputLabelProps={{ shrink: true }} required />
<FormControl fullWidth>
<InputLabel>Konto</InputLabel>
<Select value={form.konto_id ?? ''} label="Konto" onChange={e => setForm(f => ({ ...f, konto_id: e.target.value ? Number(e.target.value) : null }))}>
<MenuItem value=""><em>Kein Konto</em></MenuItem>
{konten.map(k => <MenuItem key={k.id} value={k.id}>{k.kontonummer} – {k.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Bankkonto</InputLabel>
<Select value={form.bankkonto_id ?? ''} label="Bankkonto" onChange={e => setForm(f => ({ ...f, bankkonto_id: e.target.value ? Number(e.target.value) : null }))}>
<MenuItem value=""><em>Kein Bankkonto</em></MenuItem>
{bankkonten.map(bk => <MenuItem key={bk.id} value={bk.id}>{bk.bezeichnung}{bk.iban ? ` (${bk.iban})` : ''}</MenuItem>)}
</Select>
</FormControl>
<TextField label="Beschreibung" value={form.beschreibung} onChange={e => setForm(f => ({ ...f, beschreibung: e.target.value }))} />
<TextField label="Empfänger/Auftraggeber" value={form.empfaenger_auftraggeber} onChange={e => setForm(f => ({ ...f, empfaenger_auftraggeber: e.target.value }))} />
<TextField label="Verwendungszweck" value={form.verwendungszweck} onChange={e => setForm(f => ({ ...f, verwendungszweck: e.target.value }))} />
<TextField label="Belegnummer" value={form.beleg_nr} onChange={e => setForm(f => ({ ...f, beleg_nr: e.target.value }))} />
<FormControl fullWidth>
<InputLabel>Bestellung verknüpfen</InputLabel>
<Select value={form.bestellung_id ?? ''} label="Bestellung verknüpfen" onChange={e => setForm(f => ({ ...f, bestellung_id: e.target.value ? Number(e.target.value) : null }))}>
<MenuItem value=""><em>Keine Bestellung</em></MenuItem>
{bestellungen.map(b => <MenuItem key={b.id} value={b.id}>{b.laufende_nummer ? `#${b.laufende_nummer} – ` : ''}{b.bezeichnung}</MenuItem>)}
</Select>
</FormControl>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Abbrechen</Button>
<Button variant="contained" onClick={() => onSave(form)} disabled={!form.haushaltsjahr_id || !form.betrag || !form.datum}>{existing ? 'Speichern' : 'Erstellen'}</Button>
</DialogActions>
</Dialog>
);
}
// ─── Tree helpers ─────────────────────────────────────────────────────────────
function buildTree(flat: KontoTreeNode[]): KontoTreeNode[] {
@@ -1136,11 +994,10 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
onJahrChange: (id: number) => void;
}) {
const qc = useQueryClient();
const navigate = useNavigate();
const { showSuccess, showError } = useNotification();
const { hasPermission } = usePermissionContext();
const [filters, setFilters] = useState<TransaktionFilters>({ haushaltsjahr_id: selectedJahrId || undefined });
const [createOpen, setCreateOpen] = useState(false);
const [editingTx, setEditingTx] = useState<Transaktion | null>(null);
const [filterAusgabenTyp, setFilterAusgabenTyp] = useState('');
const [txSubTab, setTxSubTab] = useState(0);
@@ -1166,18 +1023,6 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
queryFn: () => buchhaltungApi.getTransaktionen(filters),
});
const createMut = useMutation({
mutationFn: buchhaltungApi.createTransaktion,
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-transaktionen'] }); setCreateOpen(false); showSuccess('Transaktion erstellt'); },
onError: () => showError('Transaktion konnte nicht erstellt werden'),
});
const updateMut = useMutation({
mutationFn: ({ id, data }: { id: number; data: Partial<TransaktionFormData> }) => buchhaltungApi.updateTransaktion(id, data),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-transaktionen'] }); setEditingTx(null); showSuccess('Transaktion aktualisiert'); },
onError: () => showError('Aktualisierung fehlgeschlagen'),
});
const buchenMut = useMutation({
mutationFn: (id: number) => buchhaltungApi.buchenTransaktion(id),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['buchhaltung-transaktionen'] }); qc.invalidateQueries({ queryKey: ['buchhaltung-stats'] }); showSuccess('Transaktion gebucht'); },
@@ -1397,15 +1242,28 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
</TableCell>
<TableCell>
<Stack direction="row" spacing={0.5} flexWrap="wrap">
{t.status === 'entwurf' && hasPermission('buchhaltung:edit') && (
<Tooltip title={kontenFlat.length === 0 ? 'Keine Konten konfiguriert' : bankkonten.length === 0 ? 'Keine Bankkonten konfiguriert' : !t.konto_id ? 'Kein Konto ausgewählt' : ''}>
<span>
<Button size="small" variant="outlined" startIcon={<BookmarkAdd fontSize="small" />} disabled={kontenFlat.length === 0 || bankkonten.length === 0 || !t.konto_id} onClick={() => buchenMut.mutate(t.id)}>
Buchen
</Button>
</span>
</Tooltip>
)}
{t.status === 'entwurf' && hasPermission('buchhaltung:edit') && (() => {
const buchenDisabled =
kontenFlat.length === 0 || bankkonten.length === 0 ||
!t.konto_id || !t.bankkonto_id || !Number(t.betrag) || !t.datum || !t.beschreibung;
const buchenTooltip =
kontenFlat.length === 0 ? 'Keine Konten konfiguriert' :
bankkonten.length === 0 ? 'Keine Bankkonten konfiguriert' :
!t.konto_id ? 'Kein Konto ausgewählt' :
!t.bankkonto_id ? 'Kein Bankkonto ausgewählt' :
!Number(t.betrag) ? 'Kein Betrag angegeben' :
!t.datum ? 'Kein Datum angegeben' :
!t.beschreibung ? 'Keine Beschreibung angegeben' : '';
return (
<Tooltip title={buchenTooltip}>
<span>
<Button size="small" variant="outlined" startIcon={<BookmarkAdd fontSize="small" />} disabled={buchenDisabled} onClick={() => buchenMut.mutate(t.id)}>
Buchen
</Button>
</span>
</Tooltip>
);
})()}
{t.status === 'gebucht' && hasPermission('buchhaltung:edit') && (
<Button size="small" variant="outlined" color="warning" startIcon={<Cancel fontSize="small" />} onClick={() => stornoMut.mutate(t.id)}>
Stornieren
@@ -1413,7 +1271,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
)}
{t.status === 'entwurf' && hasPermission('buchhaltung:edit') && (
<Tooltip title="Bearbeiten">
<IconButton size="small" onClick={() => setEditingTx(t)}>
<IconButton size="small" onClick={() => navigate(`/buchhaltung/transaktionen/${t.id}/bearbeiten`)}>
<Edit fontSize="small" />
</IconButton>
</Tooltip>
@@ -1435,28 +1293,11 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
)}
{hasPermission('buchhaltung:create') && (
<ChatAwareFab color="primary" onClick={() => setCreateOpen(true)}>
<ChatAwareFab color="primary" onClick={() => navigate(`/buchhaltung/transaktionen/neu${filters.haushaltsjahr_id ? `?jahr=${filters.haushaltsjahr_id}` : ''}`)}>
<AddIcon />
</ChatAwareFab>
)}
<TransaktionDialog
open={createOpen}
onClose={() => setCreateOpen(false)}
haushaltsjahre={haushaltsjahre}
selectedJahrId={selectedJahrId}
onSave={data => createMut.mutate(data)}
/>
<TransaktionDialog
open={!!editingTx}
onClose={() => setEditingTx(null)}
haushaltsjahre={haushaltsjahre}
selectedJahrId={selectedJahrId}
existing={editingTx ?? undefined}
onSave={data => updateMut.mutate({ id: editingTx!.id, data })}
/>
<ErstattungDialog
open={erstattungOpen}
onClose={() => setErstattungOpen(false)}

366
frontend/src/pages/BuchhaltungTransaktionForm.tsx Normal file
View File

@@ -0,0 +1,366 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { useQuery, useMutation } from '@tanstack/react-query';
import {
Alert, Box, Button, Card, CardContent, CardHeader, Divider,
FormControl, Grid, InputLabel, MenuItem, Select, Skeleton,
Stack, TextField, Typography,
} from '@mui/material';
import { ArrowBack, Save } from '@mui/icons-material';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import { buchhaltungApi } from '../services/buchhaltung';
import { bestellungApi } from '../services/bestellung';
import { useNotification } from '../contexts/NotificationContext';
import type { AusgabenTyp, TransaktionFormData } from '../types/buchhaltung.types';
export default function BuchhaltungTransaktionForm() {
const { id } = useParams<{ id: string }>();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const { showSuccess, showError } = useNotification();
const isEdit = !!id;
const today = new Date().toISOString().slice(0, 10);
const [form, setForm] = useState<TransaktionFormData>({
haushaltsjahr_id: 0,
typ: 'ausgabe',
betrag: 0,
datum: today,
konto_id: null,
bankkonto_id: null,
beschreibung: '',
empfaenger_auftraggeber: '',
verwendungszweck: '',
beleg_nr: '',
bestellung_id: null,
ausgaben_typ: null,
});
const { data: haushaltsjahre = [], isLoading: loadingJahre } = useQuery({
queryKey: ['haushaltsjahre'],
queryFn: buchhaltungApi.getHaushaltsjahre,
});
const { data: existing, isLoading: loadingExisting } = useQuery({
queryKey: ['transaktion', Number(id)],
queryFn: () => buchhaltungApi.getTransaktion(Number(id)),
enabled: isEdit,
});
const { data: konten = [] } = useQuery({
queryKey: ['buchhaltung-konten', form.haushaltsjahr_id],
queryFn: () => buchhaltungApi.getKonten(form.haushaltsjahr_id),
enabled: form.haushaltsjahr_id > 0,
});
const { data: bankkonten = [] } = useQuery({
queryKey: ['bankkonten'],
queryFn: buchhaltungApi.getBankkonten,
});
const { data: bestellungen = [] } = useQuery({
queryKey: ['bestellungen-all'],
queryFn: () => bestellungApi.getOrders(),
staleTime: 5 * 60 * 1000,
});
// Default to active fiscal year on create
useEffect(() => {
if (!isEdit && haushaltsjahre.length > 0 && form.haushaltsjahr_id === 0) {
const jahrParam = searchParams.get('jahr');
const openYear = haushaltsjahre.find(hj => !hj.abgeschlossen) || haushaltsjahre[0];
setForm(f => ({ ...f, haushaltsjahr_id: jahrParam ? Number(jahrParam) : openYear.id }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [haushaltsjahre]);
// Pre-fill from existing transaction when editing
useEffect(() => {
if (existing) {
setForm({
haushaltsjahr_id: existing.haushaltsjahr_id,
typ: existing.typ as 'einnahme' | 'ausgabe',
betrag: Number(existing.betrag),
datum: existing.datum.slice(0, 10),
konto_id: existing.konto_id,
bankkonto_id: existing.bankkonto_id,
beschreibung: existing.beschreibung || '',
empfaenger_auftraggeber: existing.empfaenger_auftraggeber || '',
verwendungszweck: existing.verwendungszweck || '',
beleg_nr: existing.beleg_nr || '',
bestellung_id: existing.bestellung_id,
ausgaben_typ: existing.ausgaben_typ,
});
}
}, [existing]);
const createMut = useMutation({
mutationFn: buchhaltungApi.createTransaktion,
onSuccess: () => { showSuccess('Transaktion erstellt'); navigate('/buchhaltung'); },
onError: () => showError('Transaktion konnte nicht erstellt werden'),
});
const updateMut = useMutation({
mutationFn: (data: Partial<TransaktionFormData>) =>
buchhaltungApi.updateTransaktion(Number(id), data),
onSuccess: () => { showSuccess('Transaktion aktualisiert'); navigate('/buchhaltung'); },
onError: () => showError('Aktualisierung fehlgeschlagen'),
});
const selectedKonto = konten.find(k => k.id === form.konto_id);
const isEinfach = selectedKonto && (selectedKonto.budget_typ || 'detailliert') === 'einfach';
const isPending = createMut.isPending || updateMut.isPending;
const canSubmit =
!!form.haushaltsjahr_id &&
!!form.betrag &&
!!form.datum &&
!!form.konto_id &&
!!form.bankkonto_id &&
!!form.beschreibung;
const handleSubmit = () => {
if (isEdit) updateMut.mutate(form);
else createMut.mutate(form);
};
if (loadingJahre || (isEdit && loadingExisting)) {
return (
<DashboardLayout>
<Box sx={{ p: 3, maxWidth: 800, mx: 'auto' }}>
<Skeleton variant="rectangular" height={60} sx={{ mb: 2 }} />
<Skeleton variant="rectangular" height={200} sx={{ mb: 2 }} />
<Skeleton variant="rectangular" height={160} />
</Box>
</DashboardLayout>
);
}
return (
<DashboardLayout>
<Box sx={{ p: 3, maxWidth: 800, mx: 'auto' }}>
{/* Header */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
<Button startIcon={<ArrowBack />} onClick={() => navigate('/buchhaltung')}>
Zurück
</Button>
<Typography variant="h5" sx={{ ml: 1 }}>
{isEdit ? 'Transaktion bearbeiten' : 'Neue Transaktion'}
</Typography>
</Box>
<Stack spacing={3}>
{/* Section: General */}
<Card variant="outlined">
<CardHeader
title="Allgemein"
titleTypographyProps={{ variant: 'subtitle1', fontWeight: 600 }}
/>
<Divider />
<CardContent>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<FormControl fullWidth required>
<InputLabel>Haushaltsjahr</InputLabel>
<Select
value={form.haushaltsjahr_id || ''}
label="Haushaltsjahr"
onChange={e => setForm(f => ({ ...f, haushaltsjahr_id: Number(e.target.value), konto_id: null }))}
>
{haushaltsjahre.map(hj => (
<MenuItem key={hj.id} value={hj.id}>{hj.bezeichnung}</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth required>
<InputLabel>Typ</InputLabel>
<Select
value={form.typ}
label="Typ"
onChange={e => setForm(f => ({ ...f, typ: e.target.value as 'einnahme' | 'ausgabe', ausgaben_typ: null }))}
>
<MenuItem value="ausgabe">Ausgabe</MenuItem>
<MenuItem value="einnahme">Einnahme</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth required
label="Betrag (€)"
type="number"
value={form.betrag || ''}
onChange={e => setForm(f => ({ ...f, betrag: parseFloat(e.target.value) || 0 }))}
inputProps={{ step: '0.01', min: '0.01' }}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth required
label="Datum"
type="date"
value={form.datum}
onChange={e => setForm(f => ({ ...f, datum: e.target.value }))}
InputLabelProps={{ shrink: true }}
/>
</Grid>
{form.typ === 'ausgabe' && !isEinfach && (
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel>Ausgaben-Typ</InputLabel>
<Select
value={form.ausgaben_typ || ''}
label="Ausgaben-Typ"
onChange={e => setForm(f => ({ ...f, ausgaben_typ: (e.target.value as AusgabenTyp) || null }))}
>
<MenuItem value=""><em>Kein Typ</em></MenuItem>
<MenuItem value="gwg">GWG</MenuItem>
<MenuItem value="anlagen">Anlagen</MenuItem>
<MenuItem value="instandhaltung">Instandhaltung</MenuItem>
</Select>
</FormControl>
</Grid>
)}
</Grid>
</CardContent>
</Card>
{/* Section: Accounts */}
<Card variant="outlined">
<CardHeader
title="Konten"
titleTypographyProps={{ variant: 'subtitle1', fontWeight: 600 }}
/>
<Divider />
<CardContent>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<FormControl fullWidth required>
<InputLabel>Konto (Topf)</InputLabel>
<Select
value={form.konto_id ?? ''}
label="Konto (Topf)"
onChange={e => setForm(f => ({ ...f, konto_id: e.target.value ? Number(e.target.value) : null, ausgaben_typ: null }))}
>
<MenuItem value=""><em>Kein Konto</em></MenuItem>
{konten.map(k => (
<MenuItem key={k.id} value={k.id}>{k.kontonummer} – {k.bezeichnung}</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl fullWidth required>
<InputLabel>Bankkonto</InputLabel>
<Select
value={form.bankkonto_id ?? ''}
label="Bankkonto"
onChange={e => setForm(f => ({ ...f, bankkonto_id: e.target.value ? Number(e.target.value) : null }))}
>
<MenuItem value=""><em>Kein Bankkonto</em></MenuItem>
{bankkonten.map(bk => (
<MenuItem key={bk.id} value={bk.id}>{bk.bezeichnung}{bk.iban ? ` (${bk.iban})` : ''}</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>
</CardContent>
</Card>
{/* Section: Details */}
<Card variant="outlined">
<CardHeader
title="Details"
titleTypographyProps={{ variant: 'subtitle1', fontWeight: 600 }}
/>
<Divider />
<CardContent>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
fullWidth required
label="Beschreibung"
value={form.beschreibung}
onChange={e => setForm(f => ({ ...f, beschreibung: e.target.value }))}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
label="Empfänger / Auftraggeber"
value={form.empfaenger_auftraggeber}
onChange={e => setForm(f => ({ ...f, empfaenger_auftraggeber: e.target.value }))}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
label="Verwendungszweck"
value={form.verwendungszweck}
onChange={e => setForm(f => ({ ...f, verwendungszweck: e.target.value }))}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
label="Belegnummer"
value={form.beleg_nr}
onChange={e => setForm(f => ({ ...f, beleg_nr: e.target.value }))}
/>
</Grid>
</Grid>
</CardContent>
</Card>
{/* Section: Order link (optional) */}
<Card variant="outlined">
<CardHeader
title="Bestellung verknüpfen"
subheader="Optional"
titleTypographyProps={{ variant: 'subtitle1', fontWeight: 600 }}
/>
<Divider />
<CardContent>
<FormControl fullWidth>
<InputLabel>Bestellung</InputLabel>
<Select
value={form.bestellung_id ?? ''}
label="Bestellung"
onChange={e => setForm(f => ({ ...f, bestellung_id: e.target.value ? Number(e.target.value) : null }))}
>
<MenuItem value=""><em>Keine</em></MenuItem>
{bestellungen.map(b => (
<MenuItem key={b.id} value={b.id}>
{b.laufende_nummer ? `#${b.laufende_nummer} – ` : ''}{b.bezeichnung}
</MenuItem>
))}
</Select>
</FormControl>
</CardContent>
</Card>
{!canSubmit && (
<Alert severity="info">
Pflichtfelder: Haushaltsjahr, Typ, Betrag, Datum, Konto (Topf), Bankkonto und Beschreibung müssen ausgefüllt sein.
</Alert>
)}
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
<Button onClick={() => navigate('/buchhaltung')}>Abbrechen</Button>
<Button
variant="contained"
startIcon={<Save />}
disabled={isPending || !canSubmit}
onClick={handleSubmit}
>
{isEdit ? 'Speichern' : 'Erstellen'}
</Button>
</Box>
</Stack>
</Box>
</DashboardLayout>
);
}