refactor external orders
This commit is contained in:
Matthias Hochmeister
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Tab,
|
||||
@@ -12,29 +12,24 @@ import {
|
||||
TableRow,
|
||||
Paper,
|
||||
Chip,
|
||||
IconButton,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
MenuItem,
|
||||
Select,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Tooltip,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
Popover,
|
||||
Badge,
|
||||
LinearProgress,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Add as AddIcon, FilterList as FilterListIcon } 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 { useNotification } from '../contexts/NotificationContext';
|
||||
import { usePermissionContext } from '../contexts/PermissionContext';
|
||||
import { bestellungApi } from '../services/bestellung';
|
||||
import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../types/bestellung.types';
|
||||
import type { BestellungStatus, LieferantFormData, Lieferant } from '../types/bestellung.types';
|
||||
import type { BestellungStatus, Bestellung } from '../types/bestellung.types';
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
@@ -54,13 +49,26 @@ function TabPanel({ children, value, index }: TabPanelProps) {
|
||||
|
||||
const TAB_COUNT = 2;
|
||||
|
||||
// ── Status options for filter ──
|
||||
// ── Status options ──
|
||||
|
||||
const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'erstellt', 'bestellt', 'teillieferung', 'vollstaendig', 'abgeschlossen'];
|
||||
const DEFAULT_EXCLUDED_STATUSES: BestellungStatus[] = ['abgeschlossen'];
|
||||
|
||||
// ── Empty form data ──
|
||||
// ── Kennung formatter ──
|
||||
|
||||
const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
|
||||
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
|
||||
@@ -69,8 +77,6 @@ const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email:
|
||||
export default function Bestellungen() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const queryClient = useQueryClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const { hasPermission } = usePermissionContext();
|
||||
|
||||
// Tab from URL
|
||||
@@ -83,19 +89,19 @@ export default function Bestellungen() {
|
||||
if (t >= 0 && t < TAB_COUNT) setTab(t);
|
||||
}, [searchParams]);
|
||||
|
||||
// ── State ──
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
// ── Filter state ──
|
||||
const [filterAnchor, setFilterAnchor] = useState<HTMLElement | null>(null);
|
||||
|
||||
const [vendorDialogOpen, setVendorDialogOpen] = useState(false);
|
||||
const [vendorForm, setVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });
|
||||
const [editingVendor, setEditingVendor] = useState<Lieferant | null>(null);
|
||||
|
||||
const [deleteVendorTarget, setDeleteVendorTarget] = useState<Lieferant | null>(null);
|
||||
const [selectedVendors, setSelectedVendors] = useState<Set<string> | null>(null); // null = all
|
||||
const [selectedOrderers, setSelectedOrderers] = useState<Set<string> | null>(null);
|
||||
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', statusFilter],
|
||||
queryFn: () => bestellungApi.getOrders(statusFilter ? { status: statusFilter } : undefined),
|
||||
queryKey: ['bestellungen'],
|
||||
queryFn: () => bestellungApi.getOrders(),
|
||||
});
|
||||
|
||||
const { data: vendors = [], isLoading: vendorsLoading } = useQuery({
|
||||
@@ -103,58 +109,105 @@ export default function Bestellungen() {
|
||||
queryFn: bestellungApi.getVendors,
|
||||
});
|
||||
|
||||
// ── Mutations ──
|
||||
const createVendor = useMutation({
|
||||
mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||||
showSuccess('Lieferant erstellt');
|
||||
closeVendorDialog();
|
||||
},
|
||||
onError: () => showError('Fehler beim Erstellen des Lieferanten'),
|
||||
});
|
||||
// ── 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]);
|
||||
|
||||
const updateVendor = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: LieferantFormData }) => bestellungApi.updateVendor(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||||
showSuccess('Lieferant aktualisiert');
|
||||
closeVendorDialog();
|
||||
},
|
||||
onError: () => showError('Fehler beim Aktualisieren des Lieferanten'),
|
||||
});
|
||||
const uniqueOrderers = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
orders.forEach((o) => {
|
||||
if (o.besteller_name) map.set(o.besteller_id ?? o.besteller_name, o.besteller_name);
|
||||
});
|
||||
return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [orders]);
|
||||
|
||||
const deleteVendor = useMutation({
|
||||
mutationFn: (id: number) => bestellungApi.deleteVendor(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
|
||||
showSuccess('Lieferant gelöscht');
|
||||
setDeleteVendorTarget(null);
|
||||
},
|
||||
onError: () => showError('Fehler beim Löschen des Lieferanten'),
|
||||
});
|
||||
// ── 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;
|
||||
}
|
||||
// Orderer filter (null = all selected)
|
||||
if (selectedOrderers !== null) {
|
||||
const key = o.besteller_id ?? o.besteller_name ?? '';
|
||||
if (!selectedOrderers.has(key)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [orders, selectedStatuses, selectedVendors, selectedOrderers]);
|
||||
|
||||
// ── Dialog helpers ──
|
||||
// ── Active filter count ──
|
||||
const activeFilterCount = useMemo(() => {
|
||||
let count = 0;
|
||||
if (selectedStatuses.size !== ALL_STATUSES.length - DEFAULT_EXCLUDED_STATUSES.length) count++;
|
||||
if (selectedVendors !== null) count++;
|
||||
if (selectedOrderers !== null) count++;
|
||||
return count;
|
||||
}, [selectedStatuses, selectedVendors, selectedOrderers]);
|
||||
|
||||
function openEditVendor(v: Lieferant) {
|
||||
setEditingVendor(v);
|
||||
setVendorForm({ name: v.name, kontakt_name: v.kontakt_name || '', email: v.email || '', telefon: v.telefon || '', adresse: v.adresse || '', website: v.website || '', notizen: v.notizen || '' });
|
||||
setVendorDialogOpen(true);
|
||||
// ── Filter handlers ──
|
||||
function resetFilters() {
|
||||
setSelectedVendors(null);
|
||||
setSelectedOrderers(null);
|
||||
setSelectedStatuses(new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s))));
|
||||
}
|
||||
|
||||
function closeVendorDialog() {
|
||||
setVendorDialogOpen(false);
|
||||
setEditingVendor(null);
|
||||
setVendorForm({ ...emptyVendorForm });
|
||||
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 handleVendorSave() {
|
||||
if (!vendorForm.name.trim()) return;
|
||||
if (editingVendor) {
|
||||
updateVendor.mutate({ id: editingVendor.id, data: vendorForm });
|
||||
} else {
|
||||
createVendor.mutate(vendorForm);
|
||||
}
|
||||
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 toggleOrderer(key: string) {
|
||||
setSelectedOrderers((prev) => {
|
||||
if (prev === null) {
|
||||
const allKeys = new Set(uniqueOrderers.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 (next.size === uniqueOrderers.length) return null;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function isVendorSelected(key: string) {
|
||||
return selectedVendors === null || selectedVendors.has(key);
|
||||
}
|
||||
|
||||
function isOrdererSelected(key: string) {
|
||||
return selectedOrderers === null || selectedOrderers.has(key);
|
||||
}
|
||||
|
||||
// ── Render ──
|
||||
@@ -173,62 +226,153 @@ export default function Bestellungen() {
|
||||
{/* ── Tab 0: Orders ── */}
|
||||
<TabPanel value={tab} index={0}>
|
||||
<Box sx={{ mb: 2, display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<FormControl size="small" sx={{ minWidth: 200 }}>
|
||||
<InputLabel>Status Filter</InputLabel>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
label="Status Filter"
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
<Badge badgeContent={activeFilterCount} color="primary">
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<FilterListIcon />}
|
||||
onClick={(e) => setFilterAnchor(e.currentTarget)}
|
||||
>
|
||||
<MenuItem value="">Alle</MenuItem>
|
||||
{ALL_STATUSES.map((s) => (
|
||||
<MenuItem key={s} value={s}>{BESTELLUNG_STATUS_LABELS[s]}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
Filter
|
||||
</Button>
|
||||
</Badge>
|
||||
{activeFilterCount > 0 && (
|
||||
<Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
|
||||
)}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{filteredOrders.length} von {orders.length} Bestellungen
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Filter Popover */}
|
||||
<Popover
|
||||
open={!!filterAnchor}
|
||||
anchorEl={filterAnchor}
|
||||
onClose={() => setFilterAnchor(null)}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
|
||||
slotProps={{ paper: { sx: { p: 2, maxWidth: 480, maxHeight: '70vh', overflow: 'auto' } } }}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
{uniqueVendors.length > 0 && <Divider />}
|
||||
|
||||
{/* Orderer */}
|
||||
{uniqueOrderers.length > 0 && (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 0.5 }}>Besteller</Typography>
|
||||
<FormGroup>
|
||||
{uniqueOrderers.map(([key, label]) => (
|
||||
<FormControlLabel
|
||||
key={key}
|
||||
control={<Checkbox size="small" checked={isOrdererSelected(key)} onChange={() => toggleOrderer(key)} />}
|
||||
label={label}
|
||||
/>
|
||||
))}
|
||||
</FormGroup>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
<Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
|
||||
</Box>
|
||||
</Popover>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Kennung</TableCell>
|
||||
<TableCell>Bezeichnung</TableCell>
|
||||
<TableCell>Lieferant</TableCell>
|
||||
<TableCell>Besteller</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell align="right">Positionen</TableCell>
|
||||
<TableCell align="right">Gesamtpreis</TableCell>
|
||||
<TableCell align="right">Gesamtpreis (brutto)</TableCell>
|
||||
<TableCell>Lieferung</TableCell>
|
||||
<TableCell>Erstellt am</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{ordersLoading ? (
|
||||
<TableRow><TableCell colSpan={7} align="center">Laden...</TableCell></TableRow>
|
||||
) : orders.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={7} align="center">Keine Bestellungen vorhanden</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={9} align="center">Laden...</TableCell></TableRow>
|
||||
) : filteredOrders.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={9} align="center">Keine Bestellungen vorhanden</TableCell></TableRow>
|
||||
) : (
|
||||
orders.map((o) => (
|
||||
<TableRow
|
||||
key={o.id}
|
||||
hover
|
||||
sx={{ cursor: 'pointer' }}
|
||||
onClick={() => navigate(`/bestellungen/${o.id}`)}
|
||||
>
|
||||
<TableCell>{o.bezeichnung}</TableCell>
|
||||
<TableCell>{o.lieferant_name || '–'}</TableCell>
|
||||
<TableCell>{o.besteller_name || '–'}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={BESTELLUNG_STATUS_LABELS[o.status]}
|
||||
color={BESTELLUNG_STATUS_COLORS[o.status]}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="right">{o.items_count ?? 0}</TableCell>
|
||||
<TableCell align="right">{formatCurrency(o.total_cost)}</TableCell>
|
||||
<TableCell>{formatDate(o.erstellt_am)}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
filteredOrders.map((o) => {
|
||||
const brutto = calcBrutto(o);
|
||||
const totalOrdered = o.total_ordered ?? 0;
|
||||
const totalReceived = o.total_received ?? 0;
|
||||
const deliveryPct = totalOrdered > 0 ? (totalReceived / totalOrdered) * 100 : 0;
|
||||
return (
|
||||
<TableRow
|
||||
key={o.id}
|
||||
hover
|
||||
sx={{ cursor: 'pointer' }}
|
||||
onClick={() => navigate(`/bestellungen/${o.id}`)}
|
||||
>
|
||||
<TableCell sx={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||||
{formatKennung(o)}
|
||||
</TableCell>
|
||||
<TableCell>{o.bezeichnung}</TableCell>
|
||||
<TableCell>{o.lieferant_name || '–'}</TableCell>
|
||||
<TableCell>{o.besteller_name || '–'}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={BESTELLUNG_STATUS_LABELS[o.status]}
|
||||
color={BESTELLUNG_STATUS_COLORS[o.status]}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="right">{o.items_count ?? 0}</TableCell>
|
||||
<TableCell align="right">{formatCurrency(brutto)}</TableCell>
|
||||
<TableCell sx={{ minWidth: 100 }}>
|
||||
{totalOrdered > 0 ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={deliveryPct}
|
||||
sx={{ flexGrow: 1, height: 6, borderRadius: 3 }}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ whiteSpace: 'nowrap' }}>
|
||||
{totalReceived}/{totalOrdered}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : '–'}
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(o.erstellt_am)}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
@@ -252,34 +396,30 @@ export default function Bestellungen() {
|
||||
<TableCell>E-Mail</TableCell>
|
||||
<TableCell>Telefon</TableCell>
|
||||
<TableCell>Website</TableCell>
|
||||
<TableCell align="right">Aktionen</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{vendorsLoading ? (
|
||||
<TableRow><TableCell colSpan={6} align="center">Laden...</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={5} align="center">Laden...</TableCell></TableRow>
|
||||
) : vendors.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} align="center">Keine Lieferanten vorhanden</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={5} align="center">Keine Lieferanten vorhanden</TableCell></TableRow>
|
||||
) : (
|
||||
vendors.map((v) => (
|
||||
<TableRow key={v.id}>
|
||||
<TableRow
|
||||
key={v.id}
|
||||
hover
|
||||
sx={{ cursor: 'pointer' }}
|
||||
onClick={() => navigate(`/bestellungen/lieferanten/${v.id}`)}
|
||||
>
|
||||
<TableCell>{v.name}</TableCell>
|
||||
<TableCell>{v.kontakt_name || '–'}</TableCell>
|
||||
<TableCell>{v.email ? <a href={`mailto:${v.email}`}>{v.email}</a> : '–'}</TableCell>
|
||||
<TableCell>{v.email ? <a href={`mailto:${v.email}`} onClick={(e) => e.stopPropagation()}>{v.email}</a> : '–'}</TableCell>
|
||||
<TableCell>{v.telefon || '–'}</TableCell>
|
||||
<TableCell>
|
||||
{v.website ? (
|
||||
<a href={v.website} target="_blank" rel="noopener noreferrer">{v.website}</a>
|
||||
<a href={v.website} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>{v.website}</a>
|
||||
) : '–'}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip title="Bearbeiten">
|
||||
<IconButton size="small" onClick={() => openEditVendor(v)}><EditIcon fontSize="small" /></IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Löschen">
|
||||
<IconButton size="small" color="error" onClick={() => setDeleteVendorTarget(v)}><DeleteIcon fontSize="small" /></IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
@@ -288,79 +428,11 @@ export default function Bestellungen() {
|
||||
</TableContainer>
|
||||
|
||||
{hasPermission('bestellungen:manage_vendors') && (
|
||||
<ChatAwareFab onClick={() => setVendorDialogOpen(true)} aria-label="Lieferant hinzufügen">
|
||||
<ChatAwareFab onClick={() => navigate('/bestellungen/lieferanten/neu')} aria-label="Lieferant hinzufügen">
|
||||
<AddIcon />
|
||||
</ChatAwareFab>
|
||||
)}
|
||||
</TabPanel>
|
||||
|
||||
{/* ── Create/Edit Vendor Dialog ── */}
|
||||
<Dialog open={vendorDialogOpen} onClose={closeVendorDialog} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{editingVendor ? 'Lieferant bearbeiten' : 'Neuer Lieferant'}</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
required
|
||||
value={vendorForm.name}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, name: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Kontakt-Name"
|
||||
value={vendorForm.kontakt_name || ''}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, kontakt_name: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="E-Mail"
|
||||
type="email"
|
||||
value={vendorForm.email || ''}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, email: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Telefon"
|
||||
value={vendorForm.telefon || ''}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, telefon: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Adresse"
|
||||
value={vendorForm.adresse || ''}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, adresse: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Website"
|
||||
value={vendorForm.website || ''}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, website: e.target.value }))}
|
||||
/>
|
||||
<TextField
|
||||
label="Notizen"
|
||||
multiline
|
||||
rows={3}
|
||||
value={vendorForm.notizen || ''}
|
||||
onChange={(e) => setVendorForm((f) => ({ ...f, notizen: e.target.value }))}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={closeVendorDialog}>Abbrechen</Button>
|
||||
<Button variant="contained" onClick={handleVendorSave} disabled={!vendorForm.name.trim() || createVendor.isPending || updateVendor.isPending}>
|
||||
{editingVendor ? 'Speichern' : 'Erstellen'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* ── Delete Vendor Confirm ── */}
|
||||
<Dialog open={!!deleteVendorTarget} onClose={() => setDeleteVendorTarget(null)}>
|
||||
<DialogTitle>Lieferant löschen</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography>
|
||||
Soll der Lieferant <strong>{deleteVendorTarget?.name}</strong> wirklich gelöscht werden?
|
||||
</Typography>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDeleteVendorTarget(null)}>Abbrechen</Button>
|
||||
<Button color="error" variant="contained" onClick={() => deleteVendorTarget && deleteVendor.mutate(deleteVendorTarget.id)} disabled={deleteVendor.isPending}>
|
||||
Löschen
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user