1848 lines
82 KiB
TypeScript
1848 lines
82 KiB
TypeScript
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
||
import {
|
||
Alert,
|
||
Box,
|
||
Typography,
|
||
Paper,
|
||
Button,
|
||
Chip,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableContainer,
|
||
TableHead,
|
||
TableRow,
|
||
TableSortLabel,
|
||
TextField,
|
||
IconButton,
|
||
Grid,
|
||
Card,
|
||
CardContent,
|
||
LinearProgress,
|
||
Checkbox,
|
||
Menu,
|
||
MenuItem,
|
||
Accordion,
|
||
AccordionSummary,
|
||
AccordionDetails,
|
||
Autocomplete,
|
||
Tooltip,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
} from '@mui/material';
|
||
import {
|
||
Add as AddIcon,
|
||
Delete as DeleteIcon,
|
||
Edit as EditIcon,
|
||
AttachFile,
|
||
Alarm,
|
||
History,
|
||
Upload as UploadIcon,
|
||
ArrowDropDown,
|
||
ExpandMore as ExpandMoreIcon,
|
||
Save as SaveIcon,
|
||
PictureAsPdf as PdfIcon,
|
||
} from '@mui/icons-material';
|
||
import { useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
|
||
import { useParams, useNavigate } from 'react-router-dom';
|
||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||
import GermanDateField from '../components/shared/GermanDateField';
|
||
import { useNotification } from '../contexts/NotificationContext';
|
||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||
import { bestellungApi } from '../services/bestellung';
|
||
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
|
||
import { configApi } from '../services/config';
|
||
import { addPdfHeader, addPdfFooter } from '../utils/pdfExport';
|
||
import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../types/bestellung.types';
|
||
import type { BestellungStatus, BestellpositionFormData, ErinnerungFormData } from '../types/bestellung.types';
|
||
import type { AusruestungArtikel, AusruestungEigenschaft, AusruestungKategorie } from '../types/ausruestungsanfrage.types';
|
||
import { ConfirmDialog, StatusChip, PageHeader } from '../components/templates';
|
||
|
||
// ── Helpers ──
|
||
|
||
const DIENSTGRAD_KURZ: Record<string, string> = {
|
||
'Feuerwehranwärter': 'FA', 'Jugendfeuerwehrmann': 'JFM', 'Probefeuerwehrmann': 'PFM',
|
||
'Feuerwehrmann': 'FM', 'Feuerwehrfrau': 'FF',
|
||
'Oberfeuerwehrmann': 'OFM', 'Oberfeuerwehrfrau': 'OFF',
|
||
'Hauptfeuerwehrmann': 'HFM', 'Hauptfeuerwehrfrau': 'HFF',
|
||
'Löschmeister': 'LM', 'Oberlöschmeister': 'OLM', 'Hauptlöschmeister': 'HLM',
|
||
'Brandmeister': 'BM', 'Oberbrandmeister': 'OBM', 'Hauptbrandmeister': 'HBM',
|
||
'Brandinspektor': 'BI', 'Oberbrandinspektor': 'OBI', 'Brandoberinspektor': 'BOI',
|
||
'Brandamtmann': 'BAM',
|
||
'Verwaltungsmeister': 'VM', 'Oberverwaltungsmeister': 'OVM',
|
||
'Hauptverwaltungsmeister': 'HVM', 'Verwalter': 'V',
|
||
'Ehren-Feuerwehrmann': 'E-FM', 'Ehren-Feuerwehrfrau': 'E-FF',
|
||
'Ehren-Oberfeuerwehrmann': 'E-OFM', 'Ehren-Oberfeuerwehrfrau': 'E-OFF',
|
||
'Ehren-Hauptfeuerwehrmann': 'E-HFM', 'Ehren-Hauptfeuerwehrfrau': 'E-HFF',
|
||
'Ehren-Löschmeister': 'E-LM', 'Ehren-Oberlöschmeister': 'E-OLM', 'Ehren-Hauptlöschmeister': 'E-HLM',
|
||
'Ehren-Brandmeister': 'E-BM', 'Ehren-Oberbrandmeister': 'E-OBM', 'Ehren-Hauptbrandmeister': 'E-HBM',
|
||
'Ehren-Brandinspektor': 'E-BI', 'Ehren-Oberbrandinspektor': 'E-OBI', 'Ehren-Brandoberinspektor': 'E-BOI',
|
||
'Ehren-Brandamtmann': 'E-BAM',
|
||
'Ehren-Verwaltungsmeister': 'E-VM', 'Ehren-Oberverwaltungsmeister': 'E-OVM',
|
||
'Ehren-Hauptverwaltungsmeister': 'E-HVM', 'Ehren-Verwalter': 'E-V',
|
||
};
|
||
|
||
const kurzDienstgrad = (d?: string) => (d ? (DIENSTGRAD_KURZ[d] ?? d) : undefined);
|
||
|
||
const formatCurrency = (value?: number) =>
|
||
value != null ? new Intl.NumberFormat('de-AT', { style: 'currency', currency: 'EUR' }).format(value) : '–';
|
||
|
||
const formatDate = (iso?: string) =>
|
||
iso ? new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }) : '–';
|
||
|
||
const formatDateTime = (iso?: string) =>
|
||
iso ? new Date(iso).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '–';
|
||
|
||
const formatFileSize = (bytes?: number) => {
|
||
if (!bytes) return '–';
|
||
if (bytes < 1024) return `${bytes} B`;
|
||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||
};
|
||
|
||
// Valid status transitions (must match backend VALID_STATUS_TRANSITIONS)
|
||
const STATUS_TRANSITIONS: Record<BestellungStatus, BestellungStatus[]> = {
|
||
entwurf: ['wartet_auf_genehmigung'],
|
||
wartet_auf_genehmigung: ['bereit_zur_bestellung', 'entwurf'],
|
||
bereit_zur_bestellung: ['bestellt'],
|
||
bestellt: ['teillieferung', 'lieferung_pruefen'],
|
||
teillieferung: ['lieferung_pruefen'],
|
||
lieferung_pruefen: ['abgeschlossen'],
|
||
abgeschlossen: [],
|
||
};
|
||
|
||
// Empty line item form
|
||
const emptyItem: BestellpositionFormData = { bezeichnung: '', artikelnummer: '', menge: 1, einheit: 'Stk', einzelpreis: undefined };
|
||
|
||
// ══════════════════════════════════════════════════════════════════════════════
|
||
// KatalogAddDialog — browse catalog and add items to order
|
||
// ══════════════════════════════════════════════════════════════════════════════
|
||
|
||
interface KatalogAddDialogProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onAddItem: (data: BestellpositionFormData) => void;
|
||
isPending: boolean;
|
||
}
|
||
|
||
function KatalogAddDialog({ open, onClose, onAddItem, isPending }: KatalogAddDialogProps) {
|
||
const [search, setSearch] = useState('');
|
||
const [filterKategorie, setFilterKategorie] = useState<number | ''>('');
|
||
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||
const [itemConfig, setItemConfig] = useState({ menge: 1, einheit: 'Stk', einzelpreis: '', artikelnummer: '' });
|
||
const [eigenschaftValues, setEigenschaftValues] = useState<Record<number, string>>({});
|
||
const [sortField, setSortField] = useState<'bezeichnung' | 'kategorie'>('bezeichnung');
|
||
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
|
||
|
||
// Reset state when dialog closes
|
||
useEffect(() => {
|
||
if (!open) {
|
||
setSearch('');
|
||
setFilterKategorie('');
|
||
setExpandedId(null);
|
||
setEigenschaftValues({});
|
||
setSortField('bezeichnung');
|
||
setSortDir('asc');
|
||
}
|
||
}, [open]);
|
||
|
||
const { data: kategorien = [] } = useQuery({
|
||
queryKey: ['ausruestungsanfrage', 'kategorien'],
|
||
queryFn: () => ausruestungsanfrageApi.getKategorien(),
|
||
enabled: open,
|
||
});
|
||
|
||
const { data: items = [], isFetching } = useQuery({
|
||
queryKey: ['ausruestungsanfrage', 'items', filterKategorie, search],
|
||
queryFn: () => ausruestungsanfrageApi.getItems({
|
||
...(filterKategorie ? { kategorie_id: filterKategorie as number } : {}),
|
||
...(search.trim() ? { search: search.trim() } : {}),
|
||
aktiv: true,
|
||
}),
|
||
placeholderData: keepPreviousData,
|
||
enabled: open,
|
||
});
|
||
|
||
const { data: eigenschaften = [] } = useQuery({
|
||
queryKey: ['ausruestungsanfrage', 'eigenschaften', expandedId],
|
||
queryFn: () => ausruestungsanfrageApi.getArtikelEigenschaften(expandedId!),
|
||
enabled: open && !!expandedId,
|
||
});
|
||
|
||
const kategorieOptions = useMemo(() => {
|
||
const map = new Map(kategorien.map((k: AusruestungKategorie) => [k.id, k]));
|
||
return kategorien.map((k: AusruestungKategorie) => {
|
||
if (k.parent_id) {
|
||
const parent = map.get(k.parent_id);
|
||
return { id: k.id, name: parent ? `${parent.name} > ${k.name}` : k.name };
|
||
}
|
||
return { id: k.id, name: k.name };
|
||
});
|
||
}, [kategorien]);
|
||
|
||
const sortedItems = useMemo(() => {
|
||
const sorted = [...items];
|
||
sorted.sort((a, b) => {
|
||
let aVal: string, bVal: string;
|
||
if (sortField === 'bezeichnung') {
|
||
aVal = a.bezeichnung.toLowerCase();
|
||
bVal = b.bezeichnung.toLowerCase();
|
||
} else {
|
||
aVal = (kategorieOptions.find(k => k.id === a.kategorie_id)?.name || a.kategorie_name || '').toLowerCase();
|
||
bVal = (kategorieOptions.find(k => k.id === b.kategorie_id)?.name || b.kategorie_name || '').toLowerCase();
|
||
}
|
||
if (aVal < bVal) return sortDir === 'asc' ? -1 : 1;
|
||
if (aVal > bVal) return sortDir === 'asc' ? 1 : -1;
|
||
return 0;
|
||
});
|
||
return sorted;
|
||
}, [items, sortField, sortDir, kategorieOptions]);
|
||
|
||
const handleToggleExpand = (item: AusruestungArtikel) => {
|
||
if (expandedId === item.id) {
|
||
setExpandedId(null);
|
||
setEigenschaftValues({});
|
||
} else {
|
||
setExpandedId(item.id);
|
||
setEigenschaftValues({});
|
||
setItemConfig({
|
||
menge: 1,
|
||
einheit: 'Stk',
|
||
einzelpreis: item.geschaetzter_preis != null ? String(item.geschaetzter_preis) : '',
|
||
artikelnummer: '',
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleSort = (field: 'bezeichnung' | 'kategorie') => {
|
||
if (sortField === field) {
|
||
setSortDir(prev => prev === 'asc' ? 'desc' : 'asc');
|
||
} else {
|
||
setSortField(field);
|
||
setSortDir('asc');
|
||
}
|
||
};
|
||
|
||
const handleAdd = (item: AusruestungArtikel) => {
|
||
const charSpecs = Object.entries(eigenschaftValues)
|
||
.filter(([, v]) => v.trim())
|
||
.map(([eid, v]) => {
|
||
const e = eigenschaften.find(e => e.id === Number(eid));
|
||
return e ? `${e.name}: ${v}` : v;
|
||
});
|
||
onAddItem({
|
||
bezeichnung: item.bezeichnung,
|
||
artikel_id: item.id,
|
||
artikelnummer: itemConfig.artikelnummer || undefined,
|
||
menge: Number(itemConfig.menge) || 1,
|
||
einheit: itemConfig.einheit || 'Stk',
|
||
einzelpreis: itemConfig.einzelpreis ? Number(itemConfig.einzelpreis) : undefined,
|
||
spezifikationen: charSpecs.length > 0 ? charSpecs : undefined,
|
||
});
|
||
setExpandedId(null);
|
||
setEigenschaftValues({});
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth
|
||
PaperProps={{ sx: { height: '80vh' } }}>
|
||
<DialogTitle>Artikel aus Katalog hinzufügen</DialogTitle>
|
||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 0, p: 0 }}>
|
||
{/* Filters */}
|
||
<Box sx={{ display: 'flex', gap: 2, p: 2, pb: 1.5, flexWrap: 'wrap', alignItems: 'center', borderBottom: 1, borderColor: 'divider' }}>
|
||
<TextField
|
||
size="small"
|
||
label="Suche"
|
||
value={search}
|
||
onChange={e => setSearch(e.target.value)}
|
||
placeholder="Artikel suchen..."
|
||
sx={{ minWidth: 200 }}
|
||
/>
|
||
<TextField
|
||
select
|
||
size="small"
|
||
label="Kategorie"
|
||
value={filterKategorie}
|
||
onChange={e => setFilterKategorie(e.target.value as number | '')}
|
||
sx={{ minWidth: 180 }}
|
||
>
|
||
<MenuItem value="">Alle Kategorien</MenuItem>
|
||
{kategorieOptions.map(k => (
|
||
<MenuItem key={k.id} value={k.id}>{k.name}</MenuItem>
|
||
))}
|
||
</TextField>
|
||
{isFetching && <Typography variant="caption" color="text.secondary">Lade...</Typography>}
|
||
</Box>
|
||
|
||
{/* Table */}
|
||
<Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
|
||
{items.length === 0 && !isFetching ? (
|
||
<Box sx={{ p: 3 }}>
|
||
<Typography color="text.secondary">Keine Artikel gefunden.</Typography>
|
||
</Box>
|
||
) : (
|
||
<Table size="small" stickyHeader>
|
||
<TableHead>
|
||
<TableRow>
|
||
<TableCell>
|
||
<TableSortLabel
|
||
active={sortField === 'bezeichnung'}
|
||
direction={sortField === 'bezeichnung' ? sortDir : 'asc'}
|
||
onClick={() => handleSort('bezeichnung')}
|
||
>
|
||
Bezeichnung
|
||
</TableSortLabel>
|
||
</TableCell>
|
||
<TableCell>
|
||
<TableSortLabel
|
||
active={sortField === 'kategorie'}
|
||
direction={sortField === 'kategorie' ? sortDir : 'asc'}
|
||
onClick={() => handleSort('kategorie')}
|
||
>
|
||
Kategorie
|
||
</TableSortLabel>
|
||
</TableCell>
|
||
<TableCell>Beschreibung</TableCell>
|
||
<TableCell align="right">Richtpreis</TableCell>
|
||
<TableCell />
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{sortedItems.map(item => (
|
||
<React.Fragment key={item.id}>
|
||
<TableRow
|
||
hover
|
||
selected={expandedId === item.id}
|
||
sx={{ cursor: 'pointer' }}
|
||
onClick={() => handleToggleExpand(item)}
|
||
>
|
||
<TableCell>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
{item.bezeichnung}
|
||
{(item.eigenschaften_count ?? 0) > 0 && (
|
||
<Chip label={`${item.eigenschaften_count} Eig.`} size="small" variant="outlined" />
|
||
)}
|
||
</Box>
|
||
</TableCell>
|
||
<TableCell>
|
||
{kategorieOptions.find(k => k.id === item.kategorie_id)?.name || item.kategorie_name || '–'}
|
||
</TableCell>
|
||
<TableCell sx={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||
{item.beschreibung || '–'}
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
{item.geschaetzter_preis != null
|
||
? new Intl.NumberFormat('de-AT', { style: 'currency', currency: 'EUR' }).format(item.geschaetzter_preis)
|
||
: '–'}
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
<Button size="small" variant={expandedId === item.id ? 'contained' : 'outlined'}
|
||
onClick={e => { e.stopPropagation(); handleToggleExpand(item); }}>
|
||
{expandedId === item.id ? 'Abbrechen' : 'Auswählen'}
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
|
||
{/* Expanded configuration row */}
|
||
{expandedId === item.id && (
|
||
<TableRow>
|
||
<TableCell colSpan={5} sx={{ p: 0 }}>
|
||
<Box sx={{ p: 2, bgcolor: 'action.hover', borderLeft: 4, borderColor: 'primary.main' }}>
|
||
<Typography variant="subtitle2" sx={{ mb: 1.5 }}>
|
||
{item.bezeichnung} — Konfigurieren
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap', alignItems: 'flex-start' }}>
|
||
<TextField
|
||
size="small"
|
||
label="Menge"
|
||
type="number"
|
||
value={itemConfig.menge}
|
||
onChange={e => setItemConfig(c => ({ ...c, menge: Math.max(1, Number(e.target.value)) }))}
|
||
inputProps={{ min: 1 }}
|
||
sx={{ width: 90 }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="Einheit"
|
||
value={itemConfig.einheit}
|
||
onChange={e => setItemConfig(c => ({ ...c, einheit: e.target.value }))}
|
||
sx={{ width: 90 }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="Einzelpreis"
|
||
type="number"
|
||
value={itemConfig.einzelpreis}
|
||
onChange={e => setItemConfig(c => ({ ...c, einzelpreis: e.target.value }))}
|
||
placeholder="EUR"
|
||
sx={{ width: 120 }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="Artikelnr. (optional)"
|
||
value={itemConfig.artikelnummer}
|
||
onChange={e => setItemConfig(c => ({ ...c, artikelnummer: e.target.value }))}
|
||
sx={{ width: 160 }}
|
||
/>
|
||
</Box>
|
||
|
||
{/* Eigenschaften */}
|
||
{eigenschaften.length > 0 && (
|
||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1.5 }}>
|
||
{eigenschaften.map(e =>
|
||
e.typ === 'options' && e.optionen?.length ? (
|
||
<TextField
|
||
key={e.id}
|
||
select
|
||
size="small"
|
||
label={e.name}
|
||
required={e.pflicht}
|
||
value={eigenschaftValues[e.id] || ''}
|
||
onChange={ev => setEigenschaftValues(prev => ({ ...prev, [e.id]: ev.target.value }))}
|
||
sx={{ minWidth: 140 }}
|
||
>
|
||
<MenuItem value="">—</MenuItem>
|
||
{e.optionen.map(opt => (
|
||
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
||
))}
|
||
</TextField>
|
||
) : (
|
||
<TextField
|
||
key={e.id}
|
||
size="small"
|
||
label={e.name}
|
||
required={e.pflicht}
|
||
value={eigenschaftValues[e.id] || ''}
|
||
onChange={ev => setEigenschaftValues(prev => ({ ...prev, [e.id]: ev.target.value }))}
|
||
sx={{ minWidth: 160 }}
|
||
/>
|
||
)
|
||
)}
|
||
</Box>
|
||
)}
|
||
|
||
<Box sx={{ mt: 1.5 }}>
|
||
<Button
|
||
variant="contained"
|
||
size="small"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => handleAdd(item)}
|
||
disabled={isPending}
|
||
>
|
||
Zur Bestellung hinzufügen
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</React.Fragment>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
)}
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button onClick={onClose}>Schließen</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
// ══════════════════════════════════════════════════════════════════════════════
|
||
// Component
|
||
// ══════════════════════════════════════════════════════════════════════════════
|
||
|
||
export default function BestellungDetail() {
|
||
const { id } = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
const queryClient = useQueryClient();
|
||
const { showSuccess, showError } = useNotification();
|
||
const { hasPermission } = usePermissionContext();
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const orderId = Number(id);
|
||
|
||
// ── State ──
|
||
const [newItem, setNewItem] = useState<BestellpositionFormData>({ ...emptyItem });
|
||
const [statusConfirmTarget, setStatusConfirmTarget] = useState<BestellungStatus | null>(null);
|
||
const [statusForce, setStatusForce] = useState(false);
|
||
const [overrideMenuAnchor, setOverrideMenuAnchor] = useState<null | HTMLElement>(null);
|
||
const [deleteItemTarget, setDeleteItemTarget] = useState<number | null>(null);
|
||
const [deleteFileTarget, setDeleteFileTarget] = useState<number | null>(null);
|
||
|
||
const [editMode, setEditMode] = useState(false);
|
||
|
||
const [editOrderData, setEditOrderData] = useState<{
|
||
bezeichnung: string;
|
||
lieferant_id?: number;
|
||
besteller_id?: string;
|
||
mitglied_id?: string;
|
||
notizen: string;
|
||
steuersatz: number;
|
||
}>({ bezeichnung: '', notizen: '', steuersatz: 20 });
|
||
|
||
const [editItemsData, setEditItemsData] = useState<Record<number, {
|
||
bezeichnung: string;
|
||
artikelnummer: string;
|
||
menge: number;
|
||
einheit: string;
|
||
einzelpreis?: number;
|
||
spezifikationen: string[];
|
||
}>>({});
|
||
|
||
const [isSavingAll, setIsSavingAll] = useState(false);
|
||
|
||
const [reminderForm, setReminderForm] = useState<ErinnerungFormData>({ faellig_am: '', nachricht: '' });
|
||
const [reminderFormOpen, setReminderFormOpen] = useState(false);
|
||
const [deleteReminderTarget, setDeleteReminderTarget] = useState<number | null>(null);
|
||
|
||
// ── Catalog picker state ──
|
||
const [selectedKatalogItem, setSelectedKatalogItem] = useState<AusruestungArtikel | null>(null);
|
||
const [katalogEigenschaften, setKatalogEigenschaften] = useState<AusruestungEigenschaft[]>([]);
|
||
const [eigenschaftValues, setEigenschaftValues] = useState<Record<number, string>>({});
|
||
const [katalogDialogOpen, setKatalogDialogOpen] = useState(false);
|
||
|
||
// ── Query ──
|
||
const { data, isLoading, isError, error, refetch } = useQuery({
|
||
queryKey: ['bestellung', orderId],
|
||
queryFn: () => bestellungApi.getOrder(orderId),
|
||
enabled: !!orderId,
|
||
});
|
||
|
||
const bestellung = data?.bestellung;
|
||
const positionen = data?.positionen ?? [];
|
||
const dateien = data?.dateien ?? [];
|
||
const erinnerungen = data?.erinnerungen ?? [];
|
||
const historie = data?.historie ?? [];
|
||
|
||
const { data: vendors = [] } = useQuery({
|
||
queryKey: ['lieferanten'],
|
||
queryFn: bestellungApi.getVendors,
|
||
enabled: editMode,
|
||
});
|
||
|
||
const { data: orderUsers = [] } = useQuery({
|
||
queryKey: ['bestellungen', 'order-users'],
|
||
queryFn: bestellungApi.getOrderUsers,
|
||
enabled: editMode,
|
||
});
|
||
|
||
const { data: katalogItems = [] } = useQuery({
|
||
queryKey: ['katalogItems'],
|
||
queryFn: () => bestellungApi.getKatalogItems(),
|
||
enabled: editMode,
|
||
staleTime: 5 * 60 * 1000,
|
||
});
|
||
|
||
const canCreate = hasPermission('bestellungen:create');
|
||
const canDelete = hasPermission('bestellungen:delete');
|
||
const canManageReminders = hasPermission('bestellungen:manage_reminders');
|
||
const canManageOrders = hasPermission('bestellungen:manage_orders');
|
||
const canApprove = hasPermission('bestellungen:approve');
|
||
const canExport = hasPermission('bestellungen:export');
|
||
const validTransitions = bestellung ? STATUS_TRANSITIONS[bestellung.status] : [];
|
||
const allCostsEntered = positionen.length === 0 || positionen.every(p => p.einzelpreis != null && Number(p.einzelpreis) > 0);
|
||
const allItemsReceived = positionen.length === 0 || positionen.every(p => Number(p.erhalten_menge) >= Number(p.menge));
|
||
|
||
// All statuses except current, for force override
|
||
const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'wartet_auf_genehmigung', 'bereit_zur_bestellung', 'bestellt', 'teillieferung', 'lieferung_pruefen', 'abgeschlossen'];
|
||
const overrideStatuses = bestellung ? ALL_STATUSES.filter((s) => s !== bestellung.status) : [];
|
||
|
||
// ── Mutations ──
|
||
|
||
const updateStatus = useMutation({
|
||
mutationFn: ({ status, force }: { status: string; force?: boolean }) => bestellungApi.updateStatus(orderId, status, force),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
showSuccess('Status aktualisiert');
|
||
setStatusConfirmTarget(null);
|
||
setStatusForce(false);
|
||
},
|
||
onError: () => showError('Fehler beim Aktualisieren des Status'),
|
||
});
|
||
|
||
const addItem = useMutation({
|
||
mutationFn: (data: BestellpositionFormData) => bestellungApi.addLineItem(orderId, data),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
setNewItem({ ...emptyItem });
|
||
setSelectedKatalogItem(null);
|
||
setKatalogEigenschaften([]);
|
||
setEigenschaftValues({});
|
||
showSuccess('Position hinzugefügt');
|
||
},
|
||
onError: () => showError('Fehler beim Hinzufügen der Position'),
|
||
});
|
||
|
||
const deleteItem = useMutation({
|
||
mutationFn: (itemId: number) => bestellungApi.deleteLineItem(itemId),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
setDeleteItemTarget(null);
|
||
showSuccess('Position gelöscht');
|
||
},
|
||
onError: () => showError('Fehler beim Löschen der Position'),
|
||
});
|
||
|
||
const updateReceived = useMutation({
|
||
mutationFn: ({ itemId, menge }: { itemId: number; menge: number }) =>
|
||
bestellungApi.updateReceivedQty(itemId, menge),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
},
|
||
onError: () => showError('Fehler beim Aktualisieren'),
|
||
});
|
||
|
||
const uploadFile = useMutation({
|
||
mutationFn: (file: File) => bestellungApi.uploadFile(orderId, file),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
showSuccess('Datei hochgeladen');
|
||
},
|
||
onError: () => showError('Fehler beim Hochladen der Datei'),
|
||
});
|
||
|
||
const deleteFile = useMutation({
|
||
mutationFn: (fileId: number) => bestellungApi.deleteFile(fileId),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
setDeleteFileTarget(null);
|
||
showSuccess('Datei gelöscht');
|
||
},
|
||
onError: () => showError('Fehler beim Löschen der Datei'),
|
||
});
|
||
|
||
const addReminder = useMutation({
|
||
mutationFn: (data: ErinnerungFormData) => bestellungApi.addReminder(orderId, data),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
setReminderForm({ faellig_am: '', nachricht: '' });
|
||
setReminderFormOpen(false);
|
||
showSuccess('Erinnerung erstellt');
|
||
},
|
||
onError: () => showError('Fehler beim Erstellen der Erinnerung'),
|
||
});
|
||
|
||
const markReminderDone = useMutation({
|
||
mutationFn: (reminderId: number) => bestellungApi.markReminderDone(reminderId),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
},
|
||
onError: () => showError('Fehler beim Aktualisieren'),
|
||
});
|
||
|
||
const deleteReminder = useMutation({
|
||
mutationFn: (reminderId: number) => bestellungApi.deleteReminder(reminderId),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
setDeleteReminderTarget(null);
|
||
showSuccess('Erinnerung gelöscht');
|
||
},
|
||
onError: () => showError('Fehler beim Löschen'),
|
||
});
|
||
|
||
// ── Handlers ──
|
||
|
||
function enterEditMode() {
|
||
if (!bestellung) return;
|
||
setEditOrderData({
|
||
bezeichnung: bestellung.bezeichnung,
|
||
lieferant_id: bestellung.lieferant_id,
|
||
besteller_id: bestellung.besteller_id || '',
|
||
mitglied_id: bestellung.mitglied_id || '',
|
||
notizen: bestellung.notizen || '',
|
||
steuersatz: parseFloat(String(bestellung.steuersatz ?? 20)),
|
||
});
|
||
setEditItemsData(
|
||
Object.fromEntries(positionen.map(p => [p.id, {
|
||
bezeichnung: p.bezeichnung,
|
||
artikelnummer: p.artikelnummer || '',
|
||
menge: parseFloat(String(p.menge)) || 1,
|
||
einheit: p.einheit,
|
||
einzelpreis: p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined,
|
||
spezifikationen: p.spezifikationen || [],
|
||
}]))
|
||
);
|
||
setEditMode(true);
|
||
}
|
||
|
||
function cancelEditMode() {
|
||
setEditMode(false);
|
||
setEditItemsData({});
|
||
}
|
||
|
||
async function handleSaveAll() {
|
||
if (!bestellung) return;
|
||
setIsSavingAll(true);
|
||
try {
|
||
await bestellungApi.updateOrder(orderId, {
|
||
bezeichnung: editOrderData.bezeichnung,
|
||
lieferant_id: editOrderData.lieferant_id,
|
||
besteller_id: editOrderData.besteller_id || undefined,
|
||
mitglied_id: editOrderData.mitglied_id || undefined,
|
||
notizen: editOrderData.notizen,
|
||
steuersatz: editOrderData.steuersatz,
|
||
});
|
||
for (const item of positionen) {
|
||
const itemEdit = editItemsData[item.id];
|
||
if (itemEdit) {
|
||
await bestellungApi.updateLineItem(item.id, {
|
||
...itemEdit,
|
||
spezifikationen: itemEdit.spezifikationen,
|
||
});
|
||
}
|
||
}
|
||
await queryClient.invalidateQueries({ queryKey: ['bestellung', orderId] });
|
||
queryClient.invalidateQueries({ queryKey: ['bestellungen'] });
|
||
showSuccess('Änderungen gespeichert');
|
||
setEditMode(false);
|
||
setEditItemsData({});
|
||
} catch {
|
||
showError('Fehler beim Speichern');
|
||
} finally {
|
||
setIsSavingAll(false);
|
||
}
|
||
}
|
||
|
||
function handleAddItem() {
|
||
if (!newItem.bezeichnung.trim()) return;
|
||
// Merge characteristic values into spezifikationen
|
||
const charSpecs = Object.entries(eigenschaftValues)
|
||
.filter(([, v]) => v.trim())
|
||
.map(([eid, v]) => {
|
||
const eig = katalogEigenschaften.find(e => e.id === Number(eid));
|
||
return eig ? `${eig.name}: ${v}` : v;
|
||
});
|
||
const mergedSpecs = [...(newItem.spezifikationen || []), ...charSpecs];
|
||
addItem.mutate({
|
||
...newItem,
|
||
spezifikationen: mergedSpecs.length > 0 ? mergedSpecs : undefined,
|
||
});
|
||
setSelectedKatalogItem(null);
|
||
setKatalogEigenschaften([]);
|
||
setEigenschaftValues({});
|
||
}
|
||
|
||
function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0];
|
||
if (file) uploadFile.mutate(file);
|
||
e.target.value = '';
|
||
}
|
||
|
||
// Compute totals (NUMERIC columns come as strings from PostgreSQL — parse to float)
|
||
const steuersatz = editMode ? editOrderData.steuersatz : parseFloat(String(bestellung?.steuersatz ?? 20));
|
||
const totalCost = editMode
|
||
? positionen.reduce((sum, p) => {
|
||
const d = editItemsData[p.id];
|
||
const einzelpreis = d?.einzelpreis != null ? d.einzelpreis : (parseFloat(String(p.einzelpreis)) || 0);
|
||
const menge = d?.menge != null ? d.menge : (parseFloat(String(p.menge)) || 0);
|
||
return sum + einzelpreis * menge;
|
||
}, 0)
|
||
: positionen.reduce((sum, p) => sum + (parseFloat(String(p.einzelpreis)) || 0) * (parseFloat(String(p.menge)) || 0), 0);
|
||
const taxAmount = totalCost * (steuersatz / 100);
|
||
const totalBrutto = totalCost + taxAmount;
|
||
const totalReceived = positionen.length > 0
|
||
? positionen.reduce((sum, p) => sum + (parseFloat(String(p.erhalten_menge)) || 0), 0)
|
||
: 0;
|
||
const totalOrdered = positionen.reduce((sum, p) => sum + (parseFloat(String(p.menge)) || 0), 0);
|
||
const receivedPercent = totalOrdered > 0 ? Math.round((totalReceived / totalOrdered) * 100) : 0;
|
||
|
||
// ── Loading / Error ──
|
||
|
||
// ── PDF Export ──
|
||
async function generateBestellungDetailPdf() {
|
||
if (!bestellung) return;
|
||
try {
|
||
const { jsPDF } = await import('jspdf');
|
||
const autoTable = (await import('jspdf-autotable')).default;
|
||
const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
|
||
|
||
let settings;
|
||
try { settings = await configApi.getPdfSettings(); } catch { settings = { pdf_header: '', pdf_footer: '', pdf_logo: '', pdf_org_name: '' }; }
|
||
|
||
const kennung = bestellung.laufende_nummer
|
||
? `${new Date(bestellung.erstellt_am).getFullYear()}/${bestellung.laufende_nummer}`
|
||
: String(bestellung.id);
|
||
const title = `Bestellung #${kennung}`;
|
||
|
||
let curY = await addPdfHeader(doc, settings, 210);
|
||
|
||
// ── Document title ──
|
||
doc.setFontSize(14);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text(title, 10, curY);
|
||
curY += 10;
|
||
|
||
// ── Helper: two-column label/value row ──
|
||
const row = (label: string, value: string, col2X = 70) => {
|
||
doc.setFontSize(9);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text(label + ':', 10, curY);
|
||
doc.setFont('helvetica', 'normal');
|
||
doc.text(value, col2X, curY);
|
||
curY += 5;
|
||
};
|
||
|
||
// ── Vendor block ──
|
||
if (bestellung.lieferant_name) {
|
||
doc.setFontSize(10);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text('Lieferant', 10, curY);
|
||
curY += 5;
|
||
row('Name', bestellung.lieferant_name);
|
||
if (bestellung.lieferant_kontakt_name) row('Ansprechpartner', bestellung.lieferant_kontakt_name);
|
||
if (bestellung.lieferant_adresse) row('Adresse', bestellung.lieferant_adresse);
|
||
if (bestellung.lieferant_email) row('E-Mail', bestellung.lieferant_email);
|
||
if (bestellung.lieferant_telefon) row('Telefon', bestellung.lieferant_telefon);
|
||
curY += 3;
|
||
}
|
||
|
||
// ── Kontaktperson (Besteller) block ──
|
||
if (bestellung.besteller_name) {
|
||
doc.setFontSize(10);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text('Kontaktperson', 10, curY);
|
||
curY += 5;
|
||
const nameWithRank = bestellung.besteller_dienstgrad
|
||
? `${kurzDienstgrad(bestellung.besteller_dienstgrad)} ${bestellung.besteller_name}`
|
||
: bestellung.besteller_name;
|
||
row('Name', nameWithRank);
|
||
if (bestellung.besteller_email) row('E-Mail', bestellung.besteller_email);
|
||
if (bestellung.besteller_telefon) row('Telefon', bestellung.besteller_telefon);
|
||
curY += 3;
|
||
}
|
||
|
||
// ── Für Mitglied block ──
|
||
if (bestellung.mitglied_name) {
|
||
doc.setFontSize(10);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text('Für Mitglied', 10, curY);
|
||
curY += 5;
|
||
const mitgliedNameWithRank = bestellung.mitglied_dienstgrad
|
||
? `${kurzDienstgrad(bestellung.mitglied_dienstgrad)} ${bestellung.mitglied_name}`
|
||
: bestellung.mitglied_name;
|
||
row('Name', mitgliedNameWithRank);
|
||
curY += 3;
|
||
}
|
||
|
||
// ── Order info block ──
|
||
doc.setFontSize(10);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text('Bestellinformationen', 10, curY);
|
||
curY += 5;
|
||
row('Bezeichnung', bestellung.bezeichnung);
|
||
row('Erstellt am', formatDate(bestellung.erstellt_am));
|
||
curY += 5;
|
||
|
||
// ── Place and date ──
|
||
doc.setFontSize(10);
|
||
doc.setFont('helvetica', 'normal');
|
||
const pageWidth = doc.internal.pageSize.width;
|
||
const dateStr = bestellung.bestellt_am
|
||
? new Date(bestellung.bestellt_am).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
||
: new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||
doc.text(`St. Valentin, am ${dateStr}`, pageWidth - 10, curY, { align: 'right' });
|
||
curY += 8;
|
||
|
||
// ── Line items table ──
|
||
const steuersatz = (parseFloat(String(bestellung.steuersatz)) || 20) / 100;
|
||
const hasPrices = positionen.some((p) => p.einzelpreis != null && p.einzelpreis > 0);
|
||
|
||
const totalNetto = positionen.reduce((sum, p) => {
|
||
const ep = p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : 0;
|
||
const m = parseFloat(String(p.menge)) || 0;
|
||
return sum + ep * m;
|
||
}, 0);
|
||
const totalBrutto = totalNetto * (1 + steuersatz);
|
||
|
||
if (hasPrices) {
|
||
const rows: (string | number)[][] = [];
|
||
for (const p of positionen) {
|
||
const ep = p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined;
|
||
const menge = parseFloat(String(p.menge)) || 0;
|
||
const gesamt = ep != null ? ep * menge : undefined;
|
||
rows.push([
|
||
p.bezeichnung,
|
||
p.artikelnummer || '',
|
||
`${menge} ${p.einheit}`,
|
||
ep != null ? formatCurrency(ep) : '–',
|
||
gesamt != null ? formatCurrency(gesamt) : '–',
|
||
]);
|
||
for (const spec of p.spezifikationen || []) {
|
||
rows.push([` • ${spec}`, '', '', '', '']);
|
||
}
|
||
}
|
||
|
||
autoTable(doc, {
|
||
head: [['Bezeichnung', 'Art.-Nr.', 'Menge', 'Einzelpreis', 'Gesamt']],
|
||
body: rows,
|
||
startY: curY,
|
||
theme: 'plain',
|
||
headStyles: { fillColor: [66, 66, 66], textColor: 255, fontStyle: 'bold' },
|
||
margin: { left: 10, right: 10 },
|
||
styles: { fontSize: 9, cellPadding: 2 },
|
||
columnStyles: {
|
||
2: { halign: 'right' },
|
||
3: { halign: 'right' },
|
||
4: { halign: 'right' },
|
||
},
|
||
didParseCell: (data: any) => {
|
||
if (data.section === 'body') {
|
||
const cell0 = String(data.row.raw[0] ?? '');
|
||
if (cell0.startsWith(' •')) {
|
||
data.cell.styles.fontSize = 8;
|
||
data.cell.styles.textColor = [100, 100, 100];
|
||
data.cell.styles.fillColor = [255, 255, 255];
|
||
}
|
||
}
|
||
},
|
||
didDrawCell: (data: any) => {
|
||
if (data.section === 'body' && data.column.index === 0) {
|
||
const cell0 = String(data.row.raw?.[0] ?? '');
|
||
if (!cell0.startsWith(' •') && data.row.index > 0) {
|
||
data.doc.setDrawColor(200, 200, 200);
|
||
data.doc.setLineWidth(0.2);
|
||
data.doc.line(
|
||
data.settings.margin.left,
|
||
data.cell.y,
|
||
data.doc.internal.pageSize.width - data.settings.margin.right,
|
||
data.cell.y,
|
||
);
|
||
}
|
||
// Line at bottom of last row
|
||
if (data.row.index === rows.length - 1) {
|
||
data.doc.setDrawColor(200, 200, 200);
|
||
data.doc.setLineWidth(0.2);
|
||
data.doc.line(
|
||
data.settings.margin.left,
|
||
data.cell.y + data.cell.height,
|
||
data.doc.internal.pageSize.width - data.settings.margin.right,
|
||
data.cell.y + data.cell.height,
|
||
);
|
||
}
|
||
}
|
||
},
|
||
foot: [
|
||
['', '', '', 'Netto:', formatCurrency(totalNetto)],
|
||
['', '', '', `Brutto (${bestellung.steuersatz ?? 20}% USt.):`, formatCurrency(totalBrutto)],
|
||
],
|
||
footStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], fontStyle: 'bold' },
|
||
didDrawPage: addPdfFooter(doc, settings),
|
||
});
|
||
} else {
|
||
const rows: string[][] = [];
|
||
for (const p of positionen) {
|
||
const menge = parseFloat(String(p.menge)) || 0;
|
||
rows.push([p.bezeichnung, p.artikelnummer || '', `${menge} ${p.einheit}`]);
|
||
for (const spec of p.spezifikationen || []) {
|
||
rows.push([` • ${spec}`, '', '']);
|
||
}
|
||
}
|
||
|
||
autoTable(doc, {
|
||
head: [['Bezeichnung', 'Art.-Nr.', 'Menge']],
|
||
body: rows,
|
||
startY: curY,
|
||
theme: 'plain',
|
||
headStyles: { fillColor: [66, 66, 66], textColor: 255, fontStyle: 'bold' },
|
||
margin: { left: 10, right: 10 },
|
||
styles: { fontSize: 9, cellPadding: 2 },
|
||
columnStyles: {
|
||
2: { halign: 'right' },
|
||
},
|
||
didParseCell: (data: any) => {
|
||
if (data.section === 'body') {
|
||
const cell0 = String(data.row.raw[0] ?? '');
|
||
if (cell0.startsWith(' •')) {
|
||
data.cell.styles.fontSize = 8;
|
||
data.cell.styles.textColor = [100, 100, 100];
|
||
data.cell.styles.fillColor = [255, 255, 255];
|
||
}
|
||
}
|
||
},
|
||
didDrawCell: (data: any) => {
|
||
if (data.section === 'body' && data.column.index === 0) {
|
||
const cell0 = String(data.row.raw?.[0] ?? '');
|
||
if (!cell0.startsWith(' •') && data.row.index > 0) {
|
||
data.doc.setDrawColor(200, 200, 200);
|
||
data.doc.setLineWidth(0.2);
|
||
data.doc.line(
|
||
data.settings.margin.left,
|
||
data.cell.y,
|
||
data.doc.internal.pageSize.width - data.settings.margin.right,
|
||
data.cell.y,
|
||
);
|
||
}
|
||
// Line at bottom of last row
|
||
if (data.row.index === rows.length - 1) {
|
||
data.doc.setDrawColor(200, 200, 200);
|
||
data.doc.setLineWidth(0.2);
|
||
data.doc.line(
|
||
data.settings.margin.left,
|
||
data.cell.y + data.cell.height,
|
||
data.doc.internal.pageSize.width - data.settings.margin.right,
|
||
data.cell.y + data.cell.height,
|
||
);
|
||
}
|
||
}
|
||
},
|
||
didDrawPage: addPdfFooter(doc, settings),
|
||
});
|
||
}
|
||
|
||
// ── Signature section ──
|
||
const signY = (doc as any).lastAutoTable?.finalY ?? curY;
|
||
const sigStartY = signY + 15;
|
||
|
||
// Ensure there's enough space; add a page if needed
|
||
if (sigStartY + 25 > doc.internal.pageSize.height - 20) {
|
||
doc.addPage();
|
||
curY = 20;
|
||
} else {
|
||
curY = sigStartY;
|
||
}
|
||
|
||
doc.setFontSize(9);
|
||
doc.setFont('helvetica', 'normal');
|
||
doc.setTextColor(0, 0, 0);
|
||
|
||
// Signature line (right)
|
||
doc.line(120, curY, 200, curY);
|
||
|
||
curY += 4;
|
||
const sigName = bestellung.besteller_dienstgrad
|
||
? `${kurzDienstgrad(bestellung.besteller_dienstgrad)} ${bestellung.besteller_name || ''}`
|
||
: (bestellung.besteller_name || '');
|
||
doc.text(sigName, 120, curY);
|
||
|
||
doc.save(`bestellung_${kennung.replace('/', '-')}.pdf`);
|
||
} catch (err) {
|
||
console.error('PDF generation failed:', err);
|
||
showError('PDF konnte nicht erstellt werden');
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<DashboardLayout>
|
||
<Box sx={{ p: 4, textAlign: 'center' }}><Typography>Laden...</Typography></Box>
|
||
</DashboardLayout>
|
||
);
|
||
}
|
||
|
||
if (isError || !bestellung) {
|
||
const is404 = (error as any)?.response?.status === 404 || !bestellung;
|
||
return (
|
||
<DashboardLayout>
|
||
<Box sx={{ p: 4, textAlign: 'center' }}>
|
||
<Typography color="error">
|
||
{is404 ? 'Bestellung nicht gefunden.' : 'Fehler beim Laden der Bestellung.'}
|
||
</Typography>
|
||
{!is404 && (
|
||
<Button sx={{ mt: 2 }} variant="outlined" onClick={() => refetch()}>Erneut versuchen</Button>
|
||
)}
|
||
<Button sx={{ mt: 2, ml: !is404 ? 1 : 0 }} onClick={() => navigate('/bestellungen')}>Zurück</Button>
|
||
</Box>
|
||
</DashboardLayout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<DashboardLayout>
|
||
{/* ── Header ── */}
|
||
<PageHeader
|
||
title={bestellung.bezeichnung}
|
||
backTo="/bestellungen"
|
||
actions={
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
{canExport && !editMode && (
|
||
<Tooltip title={bestellung.status === 'entwurf' || bestellung.status === 'wartet_auf_genehmigung' ? 'Export erst nach Genehmigung verfügbar' : 'PDF Export'}>
|
||
<span>
|
||
<Button
|
||
variant="outlined"
|
||
size="small"
|
||
startIcon={<PdfIcon />}
|
||
onClick={generateBestellungDetailPdf}
|
||
disabled={bestellung.status === 'entwurf' || bestellung.status === 'wartet_auf_genehmigung'}
|
||
>
|
||
Export
|
||
</Button>
|
||
</span>
|
||
</Tooltip>
|
||
)}
|
||
{canCreate && !editMode && (
|
||
<Button startIcon={<EditIcon />} onClick={enterEditMode}>Bearbeiten</Button>
|
||
)}
|
||
{editMode && (
|
||
<>
|
||
<Button variant="contained" startIcon={<SaveIcon />} onClick={handleSaveAll} disabled={isSavingAll}>
|
||
Speichern
|
||
</Button>
|
||
<Button onClick={cancelEditMode} disabled={isSavingAll}>Abbrechen</Button>
|
||
</>
|
||
)}
|
||
<StatusChip
|
||
status={bestellung.status}
|
||
labelMap={BESTELLUNG_STATUS_LABELS}
|
||
colorMap={BESTELLUNG_STATUS_COLORS}
|
||
size="medium"
|
||
/>
|
||
</Box>
|
||
}
|
||
/>
|
||
|
||
{/* ── Info Cards ── */}
|
||
{editMode ? (
|
||
<Paper sx={{ p: 2, mb: 3 }}>
|
||
<Grid container spacing={2}>
|
||
<Grid item xs={12} sm={6}>
|
||
<TextField label="Bezeichnung" required fullWidth size="small"
|
||
value={editOrderData.bezeichnung}
|
||
onChange={(e) => setEditOrderData(d => ({ ...d, bezeichnung: e.target.value }))} />
|
||
</Grid>
|
||
<Grid item xs={12} sm={6}>
|
||
<Autocomplete
|
||
options={vendors}
|
||
getOptionLabel={(o) => o.name}
|
||
value={vendors.find(v => v.id === editOrderData.lieferant_id) ?? null}
|
||
onChange={(_, v) => setEditOrderData(d => ({ ...d, lieferant_id: v?.id }))}
|
||
renderInput={(params) => <TextField {...params} label="Lieferant" size="small" />}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6}>
|
||
<Autocomplete
|
||
options={orderUsers}
|
||
getOptionLabel={(o) => o.name}
|
||
value={orderUsers.find(u => u.id === editOrderData.besteller_id) ?? null}
|
||
onChange={(_, v) => setEditOrderData(d => ({ ...d, besteller_id: v?.id || '' }))}
|
||
renderInput={(params) => <TextField {...params} label="Besteller" size="small" />}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6}>
|
||
<Autocomplete
|
||
options={orderUsers}
|
||
getOptionLabel={(o) => o.name}
|
||
value={orderUsers.find(u => u.id === editOrderData.mitglied_id) ?? null}
|
||
onChange={(_, v) => setEditOrderData(d => ({ ...d, mitglied_id: v?.id || '' }))}
|
||
renderInput={(params) => <TextField {...params} label="Für Mitglied" size="small" />}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={12}>
|
||
<TextField label="Notizen" fullWidth multiline rows={3} size="small"
|
||
value={editOrderData.notizen}
|
||
onChange={(e) => setEditOrderData(d => ({ ...d, notizen: e.target.value }))} />
|
||
</Grid>
|
||
</Grid>
|
||
</Paper>
|
||
) : (
|
||
<Grid container spacing={2} sx={{ mb: 3 }}>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Lieferant</Typography>
|
||
<Typography>{bestellung.lieferant_name || '–'}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Besteller</Typography>
|
||
<Typography>{bestellung.besteller_name || '–'}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
{bestellung.mitglied_name && (
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Für Mitglied</Typography>
|
||
<Typography>
|
||
{bestellung.mitglied_dienstgrad
|
||
? `${kurzDienstgrad(bestellung.mitglied_dienstgrad)} ${bestellung.mitglied_name}`
|
||
: bestellung.mitglied_name}
|
||
</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
)}
|
||
<Grid item xs={12} sm={6} md={4}>
|
||
<Card variant="outlined"><CardContent>
|
||
<Typography variant="caption" color="text.secondary">Erstellt am</Typography>
|
||
<Typography>{formatDate(bestellung.erstellt_am)}</Typography>
|
||
</CardContent></Card>
|
||
</Grid>
|
||
</Grid>
|
||
)}
|
||
|
||
{/* ── Status Action ── */}
|
||
{(canManageOrders || canCreate || canApprove) && (
|
||
<Box sx={{ mb: 3 }}>
|
||
{(['bestellt', 'teillieferung', 'lieferung_pruefen'] as BestellungStatus[]).includes(bestellung.status) && !allCostsEntered && (
|
||
<Alert severity="warning" sx={{ mb: 2 }}>Nicht alle Positionen haben Kosten. Bitte Einzelpreise eintragen, bevor die Bestellung abgeschlossen wird.</Alert>
|
||
)}
|
||
{(['bestellt', 'teillieferung', 'lieferung_pruefen'] as BestellungStatus[]).includes(bestellung.status) && !allItemsReceived && (
|
||
<Alert severity="warning" sx={{ mb: 2 }}>Nicht alle Positionen wurden vollständig empfangen. Bitte Eingangsmenge prüfen, bevor die Bestellung abgeschlossen wird.</Alert>
|
||
)}
|
||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
|
||
{validTransitions
|
||
.filter((s) => {
|
||
// Approve/reject transitions from wartet_auf_genehmigung require canApprove
|
||
if (bestellung.status === 'wartet_auf_genehmigung') {
|
||
return canApprove;
|
||
}
|
||
// Transition to bereit_zur_bestellung from other states also requires canApprove
|
||
if (s === 'bereit_zur_bestellung') return canApprove;
|
||
// All other transitions require canCreate or canManageOrders
|
||
return canCreate || canManageOrders;
|
||
})
|
||
.map((s) => {
|
||
const isReject = bestellung.status === 'wartet_auf_genehmigung' && s === 'entwurf';
|
||
const label = isReject ? 'Ablehnen' : BESTELLUNG_STATUS_LABELS[s];
|
||
const color = isReject ? 'error' : 'primary';
|
||
const isAbgeschlossen = s === 'abgeschlossen';
|
||
return (
|
||
<Button
|
||
key={s}
|
||
variant="contained"
|
||
color={color as 'error' | 'primary'}
|
||
disabled={isAbgeschlossen && (!allCostsEntered || !allItemsReceived)}
|
||
onClick={() => { setStatusForce(false); setStatusConfirmTarget(s); }}
|
||
>
|
||
{label}
|
||
</Button>
|
||
);
|
||
})}
|
||
|
||
{/* Manual override menu */}
|
||
{overrideStatuses.length > 0 && canManageOrders && (
|
||
<>
|
||
<Button
|
||
variant="outlined"
|
||
size="small"
|
||
endIcon={<ArrowDropDown />}
|
||
onClick={(e) => setOverrideMenuAnchor(e.currentTarget)}
|
||
>
|
||
Status manuell setzen
|
||
</Button>
|
||
<Menu
|
||
anchorEl={overrideMenuAnchor}
|
||
open={Boolean(overrideMenuAnchor)}
|
||
onClose={() => setOverrideMenuAnchor(null)}
|
||
>
|
||
{overrideStatuses.map((s) => (
|
||
<MenuItem
|
||
key={s}
|
||
onClick={() => {
|
||
setOverrideMenuAnchor(null);
|
||
setStatusForce(true);
|
||
setStatusConfirmTarget(s);
|
||
}}
|
||
>
|
||
{BESTELLUNG_STATUS_LABELS[s]}
|
||
</MenuItem>
|
||
))}
|
||
</Menu>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
|
||
{/* ── Delivery Progress ── */}
|
||
{positionen.length > 0 && (
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
|
||
Lieferfortschritt: {totalReceived} / {totalOrdered} ({receivedPercent}%)
|
||
</Typography>
|
||
<LinearProgress
|
||
variant="determinate"
|
||
value={receivedPercent}
|
||
color={receivedPercent >= 100 ? 'success' : 'primary'}
|
||
sx={{ height: 8, borderRadius: 4 }}
|
||
/>
|
||
</Box>
|
||
)}
|
||
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
{/* Positionen */}
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
<Paper sx={{ p: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||
<Typography variant="h6" sx={{ flexGrow: 1 }}>Positionen</Typography>
|
||
{editMode && canCreate && (
|
||
<Button
|
||
size="small"
|
||
variant="outlined"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => setKatalogDialogOpen(true)}
|
||
sx={{ ml: 1 }}
|
||
>
|
||
Aus Katalog
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
<TableContainer>
|
||
<Table size="small">
|
||
<TableHead>
|
||
<TableRow>
|
||
<TableCell>Bezeichnung</TableCell>
|
||
<TableCell>Artikelnr.</TableCell>
|
||
<TableCell align="right">Menge</TableCell>
|
||
<TableCell>Einheit</TableCell>
|
||
<TableCell align="right">Einzelpreis</TableCell>
|
||
<TableCell align="right">Gesamt</TableCell>
|
||
<TableCell align="right">Erhalten</TableCell>
|
||
{(editMode && (canCreate || canDelete)) && <TableCell align="right">Aktionen</TableCell>}
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{positionen.map((p) =>
|
||
editMode ? (
|
||
<React.Fragment key={p.id}>
|
||
<TableRow key={`${p.id}-row`}>
|
||
<TableCell>
|
||
<TextField size="small" value={editItemsData[p.id]?.bezeichnung ?? p.bezeichnung}
|
||
onChange={(e) => setEditItemsData(d => ({ ...d, [p.id]: { ...(d[p.id] || { bezeichnung: p.bezeichnung, artikelnummer: p.artikelnummer || '', menge: parseFloat(String(p.menge)) || 1, einheit: p.einheit, einzelpreis: p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined, spezifikationen: p.spezifikationen || [] }), bezeichnung: e.target.value } }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" value={editItemsData[p.id]?.artikelnummer ?? p.artikelnummer ?? ''}
|
||
onChange={(e) => setEditItemsData(d => ({ ...d, [p.id]: { ...(d[p.id] || { bezeichnung: p.bezeichnung, artikelnummer: p.artikelnummer || '', menge: parseFloat(String(p.menge)) || 1, einheit: p.einheit, einzelpreis: p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined, spezifikationen: p.spezifikationen || [] }), artikelnummer: e.target.value } }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" type="number" sx={{ width: 80 }}
|
||
value={editItemsData[p.id]?.menge ?? p.menge}
|
||
onChange={(e) => setEditItemsData(d => ({ ...d, [p.id]: { ...(d[p.id] || { bezeichnung: p.bezeichnung, artikelnummer: p.artikelnummer || '', menge: parseFloat(String(p.menge)) || 1, einheit: p.einheit, einzelpreis: p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined, spezifikationen: p.spezifikationen || [] }), menge: Number(e.target.value) } }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" sx={{ width: 80 }}
|
||
value={editItemsData[p.id]?.einheit ?? p.einheit}
|
||
onChange={(e) => setEditItemsData(d => ({ ...d, [p.id]: { ...(d[p.id] || { bezeichnung: p.bezeichnung, artikelnummer: p.artikelnummer || '', menge: parseFloat(String(p.menge)) || 1, einheit: p.einheit, einzelpreis: p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined, spezifikationen: p.spezifikationen || [] }), einheit: e.target.value } }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" type="number" sx={{ width: 100 }}
|
||
value={editItemsData[p.id]?.einzelpreis ?? p.einzelpreis ?? ''}
|
||
onChange={(e) => setEditItemsData(d => ({ ...d, [p.id]: { ...(d[p.id] || { bezeichnung: p.bezeichnung, artikelnummer: p.artikelnummer || '', menge: parseFloat(String(p.menge)) || 1, einheit: p.einheit, einzelpreis: p.einzelpreis != null ? parseFloat(String(p.einzelpreis)) : undefined, spezifikationen: p.spezifikationen || [] }), einzelpreis: e.target.value ? Number(e.target.value) : undefined } }))} />
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
{formatCurrency((editItemsData[p.id]?.einzelpreis ?? parseFloat(String(p.einzelpreis ?? 0))) * (editItemsData[p.id]?.menge ?? parseFloat(String(p.menge))))}
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
{canManageOrders ? (
|
||
<TextField size="small" type="number" sx={{ width: 70 }} value={p.erhalten_menge}
|
||
inputProps={{ min: 0, max: p.menge }}
|
||
disabled={!['bestellt', 'teillieferung', 'lieferung_pruefen'].includes(bestellung.status)}
|
||
onChange={(e) => updateReceived.mutate({ itemId: p.id, menge: Number(e.target.value) })} />
|
||
) : p.erhalten_menge}
|
||
</TableCell>
|
||
{(canCreate || canDelete) && (
|
||
<TableCell align="right">
|
||
{canDelete && (
|
||
<IconButton size="small" color="error" onClick={() => setDeleteItemTarget(p.id)}>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
)}
|
||
</TableCell>
|
||
)}
|
||
</TableRow>
|
||
{/* Specifications editor row */}
|
||
<TableRow key={`${p.id}-specs`}>
|
||
<TableCell colSpan={8} sx={{ pt: 0, pb: 1, pl: 4 }}>
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
||
{(editItemsData[p.id]?.spezifikationen || []).map((spec, specIdx) => (
|
||
<Box key={specIdx} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<TextField
|
||
size="small"
|
||
value={spec}
|
||
placeholder="Spezifikation"
|
||
sx={{ flexGrow: 1 }}
|
||
onChange={(e) => setEditItemsData(d => {
|
||
const cur = d[p.id]?.spezifikationen ? [...d[p.id].spezifikationen] : [];
|
||
cur[specIdx] = e.target.value;
|
||
return { ...d, [p.id]: { ...d[p.id], spezifikationen: cur } };
|
||
})}
|
||
/>
|
||
<IconButton size="small" color="error" onClick={() => setEditItemsData(d => {
|
||
const cur = d[p.id]?.spezifikationen ? [...d[p.id].spezifikationen] : [];
|
||
cur.splice(specIdx, 1);
|
||
return { ...d, [p.id]: { ...d[p.id], spezifikationen: cur } };
|
||
})}>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
</Box>
|
||
))}
|
||
<Button
|
||
size="small"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => setEditItemsData(d => {
|
||
const cur = d[p.id]?.spezifikationen ? [...d[p.id].spezifikationen] : [];
|
||
return { ...d, [p.id]: { ...d[p.id], spezifikationen: [...cur, ''] } };
|
||
})}
|
||
sx={{ alignSelf: 'flex-start' }}
|
||
>
|
||
Spezifikation hinzufügen
|
||
</Button>
|
||
</Box>
|
||
</TableCell>
|
||
</TableRow>
|
||
</React.Fragment>
|
||
) : (
|
||
<React.Fragment key={p.id}>
|
||
<TableRow>
|
||
<TableCell>{p.bezeichnung}</TableCell>
|
||
<TableCell>{p.artikelnummer || '–'}</TableCell>
|
||
<TableCell align="right">{p.menge}</TableCell>
|
||
<TableCell>{p.einheit}</TableCell>
|
||
<TableCell align="right">{formatCurrency(p.einzelpreis)}</TableCell>
|
||
<TableCell align="right">{formatCurrency((p.einzelpreis ?? 0) * p.menge)}</TableCell>
|
||
<TableCell align="right">
|
||
{canManageOrders ? (
|
||
<TextField
|
||
size="small"
|
||
type="number"
|
||
sx={{ width: 70 }}
|
||
value={p.erhalten_menge}
|
||
inputProps={{ min: 0, max: p.menge }}
|
||
disabled={!['bestellt', 'teillieferung', 'lieferung_pruefen'].includes(bestellung.status)}
|
||
onChange={(e) => updateReceived.mutate({ itemId: p.id, menge: Number(e.target.value) })}
|
||
/>
|
||
) : (
|
||
p.erhalten_menge
|
||
)}
|
||
</TableCell>
|
||
</TableRow>
|
||
{p.spezifikationen && p.spezifikationen.length > 0 && (
|
||
<TableRow>
|
||
<TableCell colSpan={7} sx={{ pt: 0, pb: 1, pl: 4, borderTop: 'none' }}>
|
||
{p.spezifikationen.map((spec, i) => (
|
||
<Typography key={i} variant="caption" color="text.secondary" display="block">• {spec}</Typography>
|
||
))}
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</React.Fragment>
|
||
),
|
||
)}
|
||
|
||
{/* ── Add Item Row ── */}
|
||
{editMode && canCreate && (
|
||
<>
|
||
<TableRow>
|
||
<TableCell>
|
||
<Autocomplete<AusruestungArtikel, false, false, true>
|
||
freeSolo
|
||
size="small"
|
||
options={katalogItems}
|
||
getOptionLabel={(o) => typeof o === 'string' ? o : o.bezeichnung}
|
||
value={selectedKatalogItem || newItem.bezeichnung || ''}
|
||
onChange={async (_, v) => {
|
||
if (typeof v === 'string') {
|
||
setNewItem((f) => ({ ...f, bezeichnung: v, artikel_id: undefined }));
|
||
setSelectedKatalogItem(null);
|
||
setKatalogEigenschaften([]);
|
||
setEigenschaftValues({});
|
||
} else if (v) {
|
||
setNewItem((f) => ({ ...f, bezeichnung: v.bezeichnung, artikel_id: v.id }));
|
||
setSelectedKatalogItem(v);
|
||
// Load eigenschaften
|
||
try {
|
||
const eigs = await ausruestungsanfrageApi.getArtikelEigenschaften(v.id);
|
||
setKatalogEigenschaften(eigs || []);
|
||
} catch { setKatalogEigenschaften([]); }
|
||
setEigenschaftValues({});
|
||
}
|
||
}}
|
||
onInputChange={(_, val, reason) => {
|
||
if (reason === 'input') {
|
||
setNewItem((f) => ({ ...f, bezeichnung: val, artikel_id: undefined }));
|
||
setSelectedKatalogItem(null);
|
||
setKatalogEigenschaften([]);
|
||
setEigenschaftValues({});
|
||
}
|
||
}}
|
||
renderInput={(params) => <TextField {...params} size="small" placeholder="Bezeichnung" />}
|
||
renderOption={(props, option) => (
|
||
<li {...props} key={option.id}>
|
||
<Box>
|
||
<Typography variant="body2">{option.bezeichnung}</Typography>
|
||
{option.kategorie_name && <Typography variant="caption" color="text.secondary">{option.kategorie_name}</Typography>}
|
||
</Box>
|
||
</li>
|
||
)}
|
||
isOptionEqualToValue={(o, v) => o.id === (typeof v === 'object' ? v.id : undefined)}
|
||
sx={{ minWidth: 200 }}
|
||
/>
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" placeholder="Artikelnr." value={newItem.artikelnummer || ''} onChange={(e) => setNewItem((f) => ({ ...f, artikelnummer: e.target.value }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" type="number" sx={{ width: 80 }} value={newItem.menge} onChange={(e) => setNewItem((f) => ({ ...f, menge: Number(e.target.value) }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" sx={{ width: 80 }} value={newItem.einheit || 'Stk'} onChange={(e) => setNewItem((f) => ({ ...f, einheit: e.target.value }))} />
|
||
</TableCell>
|
||
<TableCell>
|
||
<TextField size="small" type="number" sx={{ width: 100 }} placeholder="Preis" value={newItem.einzelpreis ?? ''} onChange={(e) => setNewItem((f) => ({ ...f, einzelpreis: e.target.value ? Number(e.target.value) : undefined }))} />
|
||
</TableCell>
|
||
<TableCell align="right">{formatCurrency((newItem.einzelpreis ?? 0) * newItem.menge)}</TableCell>
|
||
<TableCell />
|
||
<TableCell align="right">
|
||
<IconButton size="small" color="primary" onClick={handleAddItem} disabled={!newItem.bezeichnung.trim() || addItem.isPending}>
|
||
<AddIcon fontSize="small" />
|
||
</IconButton>
|
||
</TableCell>
|
||
</TableRow>
|
||
{/* Characteristic fields when catalog item selected */}
|
||
{katalogEigenschaften.length > 0 && (
|
||
<TableRow>
|
||
<TableCell colSpan={8} sx={{ pt: 0, pb: 1, borderBottom: 'none' }}>
|
||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, ml: 1, pl: 1.5, borderLeft: '2px solid', borderColor: 'divider' }}>
|
||
{katalogEigenschaften.map((e) =>
|
||
e.typ === 'options' && e.optionen?.length ? (
|
||
<TextField
|
||
key={e.id}
|
||
select
|
||
size="small"
|
||
label={e.name}
|
||
required={e.pflicht}
|
||
value={eigenschaftValues[e.id] || ''}
|
||
onChange={(ev) => setEigenschaftValues((prev) => ({ ...prev, [e.id]: ev.target.value }))}
|
||
sx={{ minWidth: 140 }}
|
||
>
|
||
<MenuItem value="">—</MenuItem>
|
||
{e.optionen.map((opt) => <MenuItem key={opt} value={opt}>{opt}</MenuItem>)}
|
||
</TextField>
|
||
) : (
|
||
<TextField
|
||
key={e.id}
|
||
size="small"
|
||
label={e.name}
|
||
required={e.pflicht}
|
||
value={eigenschaftValues[e.id] || ''}
|
||
onChange={(ev) => setEigenschaftValues((prev) => ({ ...prev, [e.id]: ev.target.value }))}
|
||
sx={{ minWidth: 160 }}
|
||
/>
|
||
)
|
||
)}
|
||
{selectedKatalogItem?.bevorzugter_lieferant_name && !bestellung?.lieferant_id && (
|
||
<Chip
|
||
size="small"
|
||
label={`Bevorzugter Lieferant: ${selectedKatalogItem.bevorzugter_lieferant_name}`}
|
||
color="info"
|
||
variant="outlined"
|
||
sx={{ alignSelf: 'center' }}
|
||
/>
|
||
)}
|
||
</Box>
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* ── Totals Rows (Netto / MwSt / Brutto) ── */}
|
||
{positionen.length > 0 && (
|
||
<>
|
||
<TableRow>
|
||
<TableCell colSpan={5} align="right">Netto</TableCell>
|
||
<TableCell align="right">{formatCurrency(totalCost)}</TableCell>
|
||
<TableCell colSpan={(editMode && (canCreate || canDelete)) ? 2 : 1} />
|
||
</TableRow>
|
||
<TableRow>
|
||
<TableCell colSpan={5} align="right">
|
||
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
|
||
MwSt.
|
||
{editMode && canCreate ? (
|
||
<TextField
|
||
size="small"
|
||
type="number"
|
||
sx={{ width: 70 }}
|
||
value={editOrderData.steuersatz}
|
||
inputProps={{ min: 0, max: 100, step: 0.5 }}
|
||
onChange={(e) => {
|
||
const val = parseFloat(e.target.value);
|
||
if (!isNaN(val) && val >= 0 && val <= 100) {
|
||
setEditOrderData(d => ({ ...d, steuersatz: val }));
|
||
}
|
||
}}
|
||
/>
|
||
) : (
|
||
<span>{steuersatz}</span>
|
||
)}
|
||
%
|
||
</Box>
|
||
</TableCell>
|
||
<TableCell align="right">{formatCurrency(taxAmount)}</TableCell>
|
||
<TableCell colSpan={(editMode && (canCreate || canDelete)) ? 2 : 1} />
|
||
</TableRow>
|
||
<TableRow>
|
||
<TableCell colSpan={5} align="right"><strong>Brutto</strong></TableCell>
|
||
<TableCell align="right"><strong>{formatCurrency(totalBrutto)}</strong></TableCell>
|
||
<TableCell colSpan={(editMode && (canCreate || canDelete)) ? 2 : 1} />
|
||
</TableRow>
|
||
</>
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Paper>
|
||
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
{/* Dateien */}
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
<Paper sx={{ p: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||
<AttachFile sx={{ mr: 1 }} />
|
||
<Typography variant="h6" sx={{ flexGrow: 1 }}>Dateien</Typography>
|
||
{canCreate && (
|
||
<>
|
||
<input ref={fileInputRef} type="file" hidden onChange={handleFileSelect} />
|
||
<Button size="small" startIcon={<UploadIcon />} onClick={() => fileInputRef.current?.click()} disabled={uploadFile.isPending}>
|
||
Hochladen
|
||
</Button>
|
||
</>
|
||
)}
|
||
</Box>
|
||
{dateien.length === 0 ? (
|
||
<Typography variant="body2" color="text.secondary">Keine Dateien vorhanden</Typography>
|
||
) : (
|
||
<Grid container spacing={2}>
|
||
{dateien.map((d) => (
|
||
<Grid item xs={12} sm={6} md={4} key={d.id}>
|
||
<Card variant="outlined">
|
||
{d.thumbnail_pfad && (
|
||
<Box
|
||
component="img"
|
||
src={`/api/bestellungen/files/${d.id}/thumbnail`}
|
||
alt={d.dateiname}
|
||
sx={{ width: '100%', height: 120, objectFit: 'cover' }}
|
||
/>
|
||
)}
|
||
<CardContent sx={{ py: 1, '&:last-child': { pb: 1 } }}>
|
||
<Typography variant="body2" noWrap>{d.dateiname}</Typography>
|
||
<Typography variant="caption" color="text.secondary">
|
||
{formatFileSize(d.dateigroesse)} · {formatDate(d.hochgeladen_am)}
|
||
</Typography>
|
||
{canDelete && (
|
||
<Box sx={{ mt: 0.5 }}>
|
||
<IconButton size="small" color="error" onClick={() => setDeleteFileTarget(d.id)}>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
</Box>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
)}
|
||
</Paper>
|
||
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
{/* Erinnerungen */}
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
<Paper sx={{ p: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||
<Alarm sx={{ mr: 1 }} />
|
||
<Typography variant="h6" sx={{ flexGrow: 1 }}>Erinnerungen</Typography>
|
||
{canManageReminders && (
|
||
<Button size="small" startIcon={<AddIcon />} onClick={() => setReminderFormOpen(true)}>
|
||
Neue Erinnerung
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
{erinnerungen.length === 0 && !reminderFormOpen ? (
|
||
<Typography variant="body2" color="text.secondary">Keine Erinnerungen</Typography>
|
||
) : (
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||
{erinnerungen.map((r) => (
|
||
<Box key={r.id} sx={{ display: 'flex', alignItems: 'center', gap: 1, opacity: r.erledigt ? 0.5 : 1 }}>
|
||
<Checkbox
|
||
checked={r.erledigt}
|
||
disabled={r.erledigt || !canManageReminders}
|
||
onChange={() => markReminderDone.mutate(r.id)}
|
||
size="small"
|
||
/>
|
||
<Box sx={{ flexGrow: 1 }}>
|
||
<Typography variant="body2" sx={{ textDecoration: r.erledigt ? 'line-through' : 'none' }}>
|
||
{r.nachricht || 'Erinnerung'}
|
||
</Typography>
|
||
<Typography variant="caption" color="text.secondary">
|
||
Fällig: {formatDate(r.faellig_am)}
|
||
</Typography>
|
||
</Box>
|
||
{canManageReminders && (
|
||
<IconButton size="small" color="error" onClick={() => setDeleteReminderTarget(r.id)}>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
)}
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
)}
|
||
|
||
{/* Inline Add Reminder Form */}
|
||
{reminderFormOpen && (
|
||
<Box sx={{ display: 'flex', gap: 1, mt: 2, alignItems: 'flex-end' }}>
|
||
<GermanDateField
|
||
size="small"
|
||
label="Fällig am"
|
||
value={reminderForm.faellig_am}
|
||
onChange={(iso) => setReminderForm((f) => ({ ...f, faellig_am: iso }))}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
label="Nachricht"
|
||
sx={{ flexGrow: 1 }}
|
||
value={reminderForm.nachricht || ''}
|
||
onChange={(e) => setReminderForm((f) => ({ ...f, nachricht: e.target.value }))}
|
||
/>
|
||
<Button
|
||
size="small"
|
||
variant="contained"
|
||
disabled={!reminderForm.faellig_am || addReminder.isPending}
|
||
onClick={() => addReminder.mutate(reminderForm)}
|
||
>
|
||
Speichern
|
||
</Button>
|
||
<Button size="small" onClick={() => { setReminderFormOpen(false); setReminderForm({ faellig_am: '', nachricht: '' }); }}>
|
||
Abbrechen
|
||
</Button>
|
||
</Box>
|
||
)}
|
||
</Paper>
|
||
|
||
{/* ── Notizen ── */}
|
||
{!editMode && bestellung.notizen && (
|
||
<Paper sx={{ p: 2, mb: 3 }}>
|
||
<Typography variant="h6" sx={{ mb: 1 }}>Notizen</Typography>
|
||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{bestellung.notizen}</Typography>
|
||
</Paper>
|
||
)}
|
||
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
{/* Historie */}
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
<Accordion defaultExpanded={false} sx={{ mb: 3 }}>
|
||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<History />
|
||
<Typography variant="h6">Historie ({historie.length} Einträge)</Typography>
|
||
</Box>
|
||
</AccordionSummary>
|
||
<AccordionDetails>
|
||
{historie.length === 0 ? (
|
||
<Typography variant="body2" color="text.secondary">Keine Einträge</Typography>
|
||
) : (
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||
{historie.map((h) => (
|
||
<Box key={h.id} sx={{ display: 'flex', gap: 1 }}>
|
||
<Box sx={{ width: 6, minHeight: '100%', borderRadius: 3, bgcolor: 'divider', flexShrink: 0 }} />
|
||
<Box>
|
||
<Typography variant="body2">{h.aktion}</Typography>
|
||
<Typography variant="caption" color="text.secondary">
|
||
{h.erstellt_von_name || 'System'} · {formatDateTime(h.erstellt_am)}
|
||
</Typography>
|
||
{h.details && (
|
||
<Typography variant="caption" display="block" color="text.secondary">
|
||
{Object.entries(h.details).map(([k, v]) => `${k}: ${v}`).join(', ')}
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
)}
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
{/* Dialogs */}
|
||
{/* ══════════════════════════════════════════════════════════════════════ */}
|
||
|
||
{/* Status Confirmation */}
|
||
<ConfirmDialog
|
||
open={statusConfirmTarget != null}
|
||
onClose={() => { setStatusConfirmTarget(null); setStatusForce(false); }}
|
||
onConfirm={() => statusConfirmTarget && updateStatus.mutate({ status: statusConfirmTarget, force: statusForce || undefined })}
|
||
title={`Status ändern${statusForce ? ' (manuell)' : ''}`}
|
||
message={
|
||
<>
|
||
<Typography>
|
||
Status von <strong>{BESTELLUNG_STATUS_LABELS[bestellung.status]}</strong> auf{' '}
|
||
<strong>{statusConfirmTarget ? BESTELLUNG_STATUS_LABELS[statusConfirmTarget] : ''}</strong> ändern?
|
||
</Typography>
|
||
{statusForce && (
|
||
<Typography variant="body2" color="warning.main" sx={{ mt: 1 }}>
|
||
Dies ist ein manueller Statusübergang außerhalb des normalen Ablaufs.
|
||
</Typography>
|
||
)}
|
||
{statusConfirmTarget && ['lieferung_pruefen', 'abgeschlossen'].includes(statusConfirmTarget) && !allCostsEntered && (
|
||
<Alert severity="warning" sx={{ mt: 2 }}>
|
||
Nicht alle Positionen haben einen Einzelpreis. Bitte prüfen Sie die Kosten, bevor Sie den Status ändern.
|
||
</Alert>
|
||
)}
|
||
</>
|
||
}
|
||
confirmLabel="Bestätigen"
|
||
isLoading={updateStatus.isPending}
|
||
/>
|
||
|
||
{/* Delete Item Confirmation */}
|
||
<ConfirmDialog
|
||
open={deleteItemTarget != null}
|
||
onClose={() => setDeleteItemTarget(null)}
|
||
onConfirm={() => deleteItemTarget != null && deleteItem.mutate(deleteItemTarget)}
|
||
title="Position löschen"
|
||
message="Soll diese Position wirklich gelöscht werden?"
|
||
confirmLabel="Löschen"
|
||
confirmColor="error"
|
||
isLoading={deleteItem.isPending}
|
||
/>
|
||
|
||
{/* Delete File Confirmation */}
|
||
<ConfirmDialog
|
||
open={deleteFileTarget != null}
|
||
onClose={() => setDeleteFileTarget(null)}
|
||
onConfirm={() => deleteFileTarget != null && deleteFile.mutate(deleteFileTarget)}
|
||
title="Datei löschen"
|
||
message="Soll diese Datei wirklich gelöscht werden?"
|
||
confirmLabel="Löschen"
|
||
confirmColor="error"
|
||
isLoading={deleteFile.isPending}
|
||
/>
|
||
|
||
{/* Delete Reminder Confirmation */}
|
||
<ConfirmDialog
|
||
open={deleteReminderTarget != null}
|
||
onClose={() => setDeleteReminderTarget(null)}
|
||
onConfirm={() => deleteReminderTarget != null && deleteReminder.mutate(deleteReminderTarget)}
|
||
title="Erinnerung löschen"
|
||
message="Soll diese Erinnerung wirklich gelöscht werden?"
|
||
confirmLabel="Löschen"
|
||
confirmColor="error"
|
||
isLoading={deleteReminder.isPending}
|
||
/>
|
||
|
||
{/* Katalog Add Dialog */}
|
||
<KatalogAddDialog
|
||
open={katalogDialogOpen}
|
||
onClose={() => setKatalogDialogOpen(false)}
|
||
onAddItem={(data) => {
|
||
addItem.mutate(data);
|
||
setKatalogDialogOpen(false);
|
||
}}
|
||
isPending={addItem.isPending}
|
||
/>
|
||
</DashboardLayout>
|
||
);
|
||
}
|