403 lines
16 KiB
TypeScript
403 lines
16 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react';
|
||
import {
|
||
Accordion,
|
||
AccordionSummary,
|
||
AccordionDetails,
|
||
Box,
|
||
IconButton,
|
||
Tab,
|
||
Tabs,
|
||
Tooltip,
|
||
Typography,
|
||
Chip,
|
||
Button,
|
||
Checkbox,
|
||
FormControlLabel,
|
||
FormGroup,
|
||
LinearProgress,
|
||
Divider,
|
||
} from '@mui/material';
|
||
import { Add as AddIcon, ExpandMore as ExpandMoreIcon, FilterList as FilterListIcon, PictureAsPdf as PdfIcon } from '@mui/icons-material';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||
import ChatAwareFab from '../components/shared/ChatAwareFab';
|
||
import { KatalogTab } from '../components/shared/KatalogTab';
|
||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||
import { bestellungApi } from '../services/bestellung';
|
||
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, Bestellung } from '../types/bestellung.types';
|
||
import { StatusChip, DataTable, SummaryCards } from '../components/templates';
|
||
import type { SummaryStat } from '../components/templates';
|
||
|
||
// ── Helpers ──
|
||
|
||
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' }) : '–';
|
||
|
||
// ── Tab Panel ──
|
||
|
||
interface TabPanelProps { children: React.ReactNode; index: number; value: number }
|
||
function TabPanel({ children, value, index }: TabPanelProps) {
|
||
if (value !== index) return null;
|
||
return <Box sx={{ pt: 3 }}>{children}</Box>;
|
||
}
|
||
|
||
const TAB_COUNT = 3;
|
||
|
||
// ── Status options ──
|
||
|
||
const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'wartet_auf_genehmigung', 'bereit_zur_bestellung', 'bestellt', 'teillieferung', 'lieferung_pruefen', 'abgeschlossen'];
|
||
const DEFAULT_EXCLUDED_STATUSES: BestellungStatus[] = ['abgeschlossen'];
|
||
|
||
// ── Kennung formatter ──
|
||
|
||
function formatKennung(o: Bestellung): string {
|
||
if (o.laufende_nummer == null) return '–';
|
||
const year = new Date(o.erstellt_am).getFullYear();
|
||
return `${year}/${o.laufende_nummer}`;
|
||
}
|
||
|
||
// ── Brutto calculator ──
|
||
|
||
function calcBrutto(o: Bestellung): number | undefined {
|
||
if (o.total_cost == null) return undefined;
|
||
const rate = (parseFloat(String(o.steuersatz)) || 20) / 100;
|
||
return o.total_cost * (1 + rate);
|
||
}
|
||
|
||
// ══════════════════════════════════════════════════════════════════════════════
|
||
// Component
|
||
// ══════════════════════════════════════════════════════════════════════════════
|
||
|
||
export default function Bestellungen() {
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const { hasPermission } = usePermissionContext();
|
||
const canManageVendors = hasPermission('bestellungen:manage_vendors');
|
||
const canExport = hasPermission('bestellungen:export');
|
||
|
||
// Tab from URL
|
||
const [tab, setTab] = useState(() => {
|
||
const t = Number(searchParams.get('tab'));
|
||
return t >= 0 && t < TAB_COUNT ? t : 0;
|
||
});
|
||
useEffect(() => {
|
||
const t = Number(searchParams.get('tab'));
|
||
if (t >= 0 && t < TAB_COUNT) setTab(t);
|
||
}, [searchParams]);
|
||
|
||
// ── Filter state ──
|
||
const [selectedVendors, setSelectedVendors] = useState<Set<string> | null>(null); // null = all
|
||
const [selectedStatuses, setSelectedStatuses] = useState<Set<BestellungStatus>>(
|
||
() => new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s)))
|
||
);
|
||
|
||
// ── Queries ──
|
||
const { data: orders = [], isLoading: ordersLoading } = useQuery({
|
||
queryKey: ['bestellungen'],
|
||
queryFn: () => bestellungApi.getOrders(),
|
||
});
|
||
|
||
const { data: vendors = [], isLoading: vendorsLoading } = useQuery({
|
||
queryKey: ['lieferanten'],
|
||
queryFn: bestellungApi.getVendors,
|
||
});
|
||
|
||
// ── Derive unique filter values from data ──
|
||
const uniqueVendors = useMemo(() => {
|
||
const map = new Map<string, string>();
|
||
orders.forEach((o) => {
|
||
if (o.lieferant_name) map.set(String(o.lieferant_id ?? o.lieferant_name), o.lieferant_name);
|
||
});
|
||
return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||
}, [orders]);
|
||
|
||
// ── Filtered orders ──
|
||
const filteredOrders = useMemo(() => {
|
||
return orders.filter((o) => {
|
||
// Status filter
|
||
if (!selectedStatuses.has(o.status)) return false;
|
||
// Vendor filter (null = all selected)
|
||
if (selectedVendors !== null) {
|
||
const key = String(o.lieferant_id ?? o.lieferant_name ?? '');
|
||
if (!selectedVendors.has(key)) return false;
|
||
}
|
||
return true;
|
||
});
|
||
}, [orders, selectedStatuses, selectedVendors]);
|
||
|
||
// ── Active filter count ──
|
||
const activeFilterCount = useMemo(() => {
|
||
let count = 0;
|
||
if (selectedStatuses.size !== ALL_STATUSES.length - DEFAULT_EXCLUDED_STATUSES.length) count++;
|
||
if (selectedVendors !== null) count++;
|
||
return count;
|
||
}, [selectedStatuses, selectedVendors]);
|
||
|
||
// ── Filter handlers ──
|
||
function resetFilters() {
|
||
setSelectedVendors(null);
|
||
setSelectedStatuses(new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s))));
|
||
}
|
||
|
||
function toggleStatus(s: BestellungStatus) {
|
||
setSelectedStatuses((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(s)) next.delete(s);
|
||
else next.add(s);
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function toggleVendor(key: string) {
|
||
setSelectedVendors((prev) => {
|
||
if (prev === null) {
|
||
// was "all selected" → deselect this one
|
||
const allKeys = new Set(uniqueVendors.map(([k]) => k));
|
||
allKeys.delete(key);
|
||
return allKeys;
|
||
}
|
||
const next = new Set(prev);
|
||
if (next.has(key)) next.delete(key);
|
||
else next.add(key);
|
||
// if all are selected again, go back to null
|
||
if (next.size === uniqueVendors.length) return null;
|
||
return next;
|
||
});
|
||
}
|
||
|
||
function isVendorSelected(key: string) {
|
||
return selectedVendors === null || selectedVendors.has(key);
|
||
}
|
||
|
||
// ── PDF Export ──
|
||
async function generateBestellungenPdf() {
|
||
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: '' }; }
|
||
|
||
let startY = await addPdfHeader(doc, settings, 210);
|
||
|
||
// Document title below header
|
||
doc.setFontSize(14);
|
||
doc.setFont('helvetica', 'bold');
|
||
doc.text('Bestellungen — Übersicht', 10, startY);
|
||
startY += 10;
|
||
|
||
const rows = filteredOrders.map((o) => {
|
||
const brutto = calcBrutto(o);
|
||
return [
|
||
formatKennung(o),
|
||
o.lieferant_name || '–',
|
||
BESTELLUNG_STATUS_LABELS[o.status],
|
||
String(o.items_count ?? 0),
|
||
formatCurrency(brutto),
|
||
formatDate(o.bestellt_am || o.erstellt_am),
|
||
];
|
||
});
|
||
|
||
autoTable(doc, {
|
||
head: [['Kennung', 'Lieferant', 'Status', 'Pos.', 'Betrag (brutto)', 'Datum']],
|
||
body: rows,
|
||
startY,
|
||
headStyles: { fillColor: [66, 66, 66], textColor: 255, fontStyle: 'bold' },
|
||
alternateRowStyles: { fillColor: [245, 245, 245] },
|
||
margin: { left: 10, right: 10 },
|
||
styles: { fontSize: 9, cellPadding: 2 },
|
||
columnStyles: {
|
||
0: { cellWidth: 22 },
|
||
1: { cellWidth: 40 },
|
||
2: { cellWidth: 30 },
|
||
3: { cellWidth: 15, halign: 'right' },
|
||
4: { cellWidth: 35, halign: 'right' },
|
||
5: { cellWidth: 25 },
|
||
},
|
||
didDrawPage: addPdfFooter(doc, settings),
|
||
});
|
||
|
||
const today = new Date().toISOString().slice(0, 10);
|
||
doc.save(`bestellungen_uebersicht_${today}.pdf`);
|
||
}
|
||
|
||
// ── Render ──
|
||
|
||
return (
|
||
<DashboardLayout>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||
<Typography variant="h4" sx={{ flexGrow: 1 }}>Bestellungen</Typography>
|
||
{canExport && (
|
||
<Tooltip title="PDF Export">
|
||
<IconButton onClick={generateBestellungenPdf} color="primary">
|
||
<PdfIcon />
|
||
</IconButton>
|
||
</Tooltip>
|
||
)}
|
||
</Box>
|
||
|
||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||
<Tabs value={tab} onChange={(_e, v) => { setTab(v); navigate(`/bestellungen?tab=${v}`, { replace: true }); }} variant="scrollable" scrollButtons="auto">
|
||
<Tab label="Bestellungen" />
|
||
{canManageVendors && <Tab label="Lieferanten" />}
|
||
<Tab label="Katalog" />
|
||
</Tabs>
|
||
</Box>
|
||
|
||
{/* ── Tab 0: Orders ── */}
|
||
<TabPanel value={tab} index={0}>
|
||
{/* ── Summary Cards ── */}
|
||
<Box sx={{ mb: 3 }}>
|
||
<SummaryCards
|
||
stats={[
|
||
{ label: 'Wartet auf Genehmigung', value: orders.filter(o => o.status === 'wartet_auf_genehmigung').length, color: 'warning.main' },
|
||
{ label: 'Bereit zur Bestellung', value: orders.filter(o => o.status === 'bereit_zur_bestellung').length, color: 'info.main' },
|
||
{ label: 'Bestellt', value: orders.filter(o => o.status === 'bestellt').length, color: 'primary.main' },
|
||
{ label: 'Lieferung prüfen', value: orders.filter(o => o.status === 'lieferung_pruefen').length, color: 'secondary.main' },
|
||
] as SummaryStat[]}
|
||
isLoading={ordersLoading}
|
||
/>
|
||
</Box>
|
||
|
||
{/* ── Filter ── */}
|
||
<Accordion defaultExpanded={false} disableGutters sx={{ mb: 2, '&:before': { display: 'none' }, border: 1, borderColor: 'divider', borderRadius: 1 }}>
|
||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<FilterListIcon fontSize="small" />
|
||
<Typography variant="body2">Filter</Typography>
|
||
{activeFilterCount > 0 && (
|
||
<Chip label={activeFilterCount} size="small" color="primary" sx={{ height: 18, fontSize: '0.7rem' }} />
|
||
)}
|
||
</Box>
|
||
</AccordionSummary>
|
||
<AccordionDetails>
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
{/* Status */}
|
||
<Box>
|
||
<Typography variant="subtitle2" sx={{ mb: 0.5 }}>Status</Typography>
|
||
<FormGroup row>
|
||
{ALL_STATUSES.map((s) => (
|
||
<FormControlLabel
|
||
key={s}
|
||
control={<Checkbox size="small" checked={selectedStatuses.has(s)} onChange={() => toggleStatus(s)} />}
|
||
label={BESTELLUNG_STATUS_LABELS[s]}
|
||
/>
|
||
))}
|
||
</FormGroup>
|
||
</Box>
|
||
<Divider />
|
||
{/* Vendor */}
|
||
{uniqueVendors.length > 0 && (
|
||
<Box>
|
||
<Typography variant="subtitle2" sx={{ mb: 0.5 }}>Lieferant</Typography>
|
||
<FormGroup>
|
||
{uniqueVendors.map(([key, label]) => (
|
||
<FormControlLabel
|
||
key={key}
|
||
control={<Checkbox size="small" checked={isVendorSelected(key)} onChange={() => toggleVendor(key)} />}
|
||
label={label}
|
||
/>
|
||
))}
|
||
</FormGroup>
|
||
</Box>
|
||
)}
|
||
<Divider />
|
||
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
|
||
</Box>
|
||
</Box>
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
|
||
{/* Active filter info */}
|
||
<Box sx={{ mb: 2, display: 'flex', gap: 2, alignItems: 'center' }}>
|
||
{activeFilterCount > 0 && (
|
||
<Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
|
||
)}
|
||
<Typography variant="body2" color="text.secondary">
|
||
{filteredOrders.length} von {orders.length} Bestellungen
|
||
</Typography>
|
||
</Box>
|
||
|
||
<DataTable<Bestellung>
|
||
columns={[
|
||
{ key: 'laufende_nummer', label: 'Kennung', width: 90, render: (o) => (
|
||
<Typography sx={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.85rem' }}>{formatKennung(o)}</Typography>
|
||
)},
|
||
{ key: 'bezeichnung', label: 'Bezeichnung' },
|
||
{ key: 'lieferant_name', label: 'Lieferant', render: (o) => o.lieferant_name || '–' },
|
||
{ key: 'besteller_name', label: 'Besteller', render: (o) => o.besteller_name || '–' },
|
||
{ key: 'status', label: 'Status', render: (o) => (
|
||
<StatusChip status={o.status} labelMap={BESTELLUNG_STATUS_LABELS} colorMap={BESTELLUNG_STATUS_COLORS} />
|
||
)},
|
||
{ key: 'items_count', label: 'Positionen', align: 'right', render: (o) => o.items_count ?? 0 },
|
||
{ key: 'total_cost', label: 'Gesamtpreis (brutto)', align: 'right', render: (o) => formatCurrency(calcBrutto(o)) },
|
||
{ key: 'total_received', label: 'Lieferung', render: (o) => {
|
||
const totalOrdered = o.total_ordered ?? 0;
|
||
const totalReceived = o.total_received ?? 0;
|
||
const deliveryPct = totalOrdered > 0 ? (totalReceived / totalOrdered) * 100 : 0;
|
||
return totalOrdered > 0 ? (
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 100 }}>
|
||
<LinearProgress variant="determinate" value={Math.min(deliveryPct, 100)} color={deliveryPct >= 100 ? 'success' : 'primary'} sx={{ flexGrow: 1, height: 6, borderRadius: 3 }} />
|
||
<Typography variant="caption" sx={{ whiteSpace: 'nowrap' }}>{totalReceived}/{totalOrdered}</Typography>
|
||
</Box>
|
||
) : '–';
|
||
}},
|
||
{ key: 'erstellt_am', label: 'Erstellt am', render: (o) => formatDate(o.erstellt_am) },
|
||
]}
|
||
data={filteredOrders}
|
||
rowKey={(o) => o.id}
|
||
onRowClick={(o) => navigate(`/bestellungen/${o.id}`)}
|
||
isLoading={ordersLoading}
|
||
emptyMessage="Keine Bestellungen vorhanden"
|
||
searchEnabled={false}
|
||
/>
|
||
|
||
{hasPermission('bestellungen:create') && (
|
||
<ChatAwareFab onClick={() => navigate('/bestellungen/neu')} aria-label="Neue Bestellung">
|
||
<AddIcon />
|
||
</ChatAwareFab>
|
||
)}
|
||
</TabPanel>
|
||
|
||
{/* ── Tab 1: Vendors ── */}
|
||
{canManageVendors && (
|
||
<TabPanel value={tab} index={1}>
|
||
<DataTable
|
||
columns={[
|
||
{ key: 'name', label: 'Name' },
|
||
{ key: 'kontakt_name', label: 'Kontakt', render: (v) => v.kontakt_name || '–' },
|
||
{ key: 'email', label: 'E-Mail', render: (v) => v.email ? <a href={`mailto:${v.email}`} onClick={(e) => e.stopPropagation()}>{v.email}</a> : '–' },
|
||
{ key: 'telefon', label: 'Telefon', render: (v) => v.telefon || '–' },
|
||
{ key: 'website', label: 'Website', render: (v) => v.website ? (
|
||
<a href={v.website.startsWith('http') ? v.website : `https://${v.website}`} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>{v.website}</a>
|
||
) : '–' },
|
||
]}
|
||
data={vendors}
|
||
rowKey={(v) => v.id}
|
||
onRowClick={(v) => navigate(`/bestellungen/lieferanten/${v.id}`)}
|
||
isLoading={vendorsLoading}
|
||
emptyMessage="Keine Lieferanten vorhanden"
|
||
/>
|
||
|
||
<ChatAwareFab onClick={() => navigate('/bestellungen/lieferanten/neu')} aria-label="Lieferant hinzufügen">
|
||
<AddIcon />
|
||
</ChatAwareFab>
|
||
</TabPanel>
|
||
)}
|
||
|
||
{/* ── Tab 2: Katalog ── */}
|
||
<TabPanel value={tab} index={canManageVendors ? 2 : 1}>
|
||
<KatalogTab />
|
||
</TabPanel>
|
||
</DashboardLayout>
|
||
);
|
||
}
|