370 lines
14 KiB
TypeScript
370 lines
14 KiB
TypeScript
import { useState, useEffect, useRef } 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]);
|
||
|
||
const hasPrefilled = useRef(false);
|
||
|
||
// Pre-fill from existing transaction when editing — only once
|
||
useEffect(() => {
|
||
if (existing && !hasPrefilled.current) {
|
||
hasPrefilled.current = true;
|
||
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>
|
||
);
|
||
}
|