928 lines
37 KiB
JavaScript
928 lines
37 KiB
JavaScript
import { PureComponent } from 'react';
|
||
import Box from '@mui/material/Box';
|
||
import Button from '@mui/material/Button';
|
||
import Chip from '@mui/material/Chip';
|
||
import CircularProgress from '@mui/material/CircularProgress';
|
||
import Divider from '@mui/material/Divider';
|
||
import IconButton from '@mui/material/IconButton';
|
||
import ListItemButton from '@mui/material/ListItemButton';
|
||
import TextField from '@mui/material/TextField';
|
||
import Typography from '@mui/material/Typography';
|
||
import Table from '@mui/material/Table';
|
||
import TableBody from '@mui/material/TableBody';
|
||
import TableCell from '@mui/material/TableCell';
|
||
import TableContainer from '@mui/material/TableContainer';
|
||
import TableHead from '@mui/material/TableHead';
|
||
import TableRow from '@mui/material/TableRow';
|
||
import MenuItem from '@mui/material/MenuItem';
|
||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
|
||
import AddIcon from '@mui/icons-material/Add';
|
||
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
|
||
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
|
||
import CloseIcon from '@mui/icons-material/Close';
|
||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||
import Inventory2Icon from '@mui/icons-material/Inventory2';
|
||
import { enqueueSnackbar } from 'notistack';
|
||
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
|
||
import { PanelTile, PanelTileGrid } from 'dashgui/panels';
|
||
import BackendError from '../BackendError';
|
||
import AppDialog from '../AppDialog';
|
||
import orderAutomat from '../../automats/orderAutomat';
|
||
import { shipment as shipmentApi, shipping as shippingApi } from '../../api';
|
||
import { backendErrorFrom } from '../../utils/backendError';
|
||
import { notifyError } from '../../utils/notify';
|
||
import withNavigate from '../withNavigate';
|
||
import {
|
||
formatDate,
|
||
loadParties,
|
||
manifestConfig,
|
||
numberDisplay,
|
||
partyDisplayName,
|
||
} from './manifestConfig';
|
||
import {
|
||
GREEN_PANEL,
|
||
SURFACE_BASE,
|
||
SURFACE_RAISED,
|
||
WHITE,
|
||
} from '../../colors';
|
||
|
||
const cfg = manifestConfig('order');
|
||
|
||
const CARRIERS = ['DHL', 'UPS', 'DPD', 'GLS', 'Hermes', 'Spedition', 'Selbstabholung'];
|
||
|
||
const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
|
||
|
||
// MARK: <AddPackageDialog/>
|
||
class AddPackageDialog extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
carrier: 'DHL',
|
||
trackingCode: '',
|
||
type: 'parcel',
|
||
state: 'draft',
|
||
saving: false,
|
||
};
|
||
this.handleSubmit = this.handleSubmit.bind(this);
|
||
}
|
||
|
||
async handleSubmit() {
|
||
const { shipment, onClose, onSuccess } = this.props;
|
||
const { carrier, trackingCode, type, state } = this.state;
|
||
|
||
this.setState({ saving: true });
|
||
try {
|
||
await shippingApi.create(shipment.id, {
|
||
carrier: carrier.trim() || undefined,
|
||
trackingCode: trackingCode.trim() || undefined,
|
||
type,
|
||
state,
|
||
});
|
||
enqueueSnackbar('Paket angelegt.', { variant: 'success' });
|
||
await orderAutomat.actions.reload();
|
||
onSuccess?.();
|
||
onClose();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
this.setState({ saving: false });
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { open, onClose, shipment } = this.props;
|
||
const { carrier, trackingCode, type, state, saving } = this.state;
|
||
|
||
return (
|
||
<AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
|
||
<Box sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 2 }}>
|
||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||
Paket zu Lieferschein hinzufügen
|
||
</Typography>
|
||
<IconButton onClick={onClose} size="small">
|
||
<CloseIcon />
|
||
</IconButton>
|
||
</Box>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||
Lieferschein: <strong>{shipment?.number}</strong>
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
|
||
<TextField
|
||
select
|
||
label="Versanddienstleister (Carrier)"
|
||
size="small"
|
||
value={carrier}
|
||
onChange={(e) => this.setState({ carrier: e.target.value })}
|
||
>
|
||
{CARRIERS.map((c) => (
|
||
<MenuItem key={c} value={c}>{c}</MenuItem>
|
||
))}
|
||
</TextField>
|
||
|
||
<TextField
|
||
label="Tracking-Code / Sendungsnummer"
|
||
size="small"
|
||
value={trackingCode}
|
||
onChange={(e) => this.setState({ trackingCode: e.target.value })}
|
||
placeholder="z.B. 00340434234234234"
|
||
/>
|
||
|
||
<TextField
|
||
select
|
||
label="Paketart"
|
||
size="small"
|
||
value={type}
|
||
onChange={(e) => this.setState({ type: e.target.value })}
|
||
>
|
||
<MenuItem value="parcel">Paket (Parcel)</MenuItem>
|
||
<MenuItem value="pallet">Palette (Pallet)</MenuItem>
|
||
<MenuItem value="letter">Brief / Dokument</MenuItem>
|
||
</TextField>
|
||
|
||
<TextField
|
||
select
|
||
label="Status"
|
||
size="small"
|
||
value={state}
|
||
onChange={(e) => this.setState({ state: e.target.value })}
|
||
helperText={state === 'shipped' ? 'Bucht bei Auswahl direkt das Lager ab.' : undefined}
|
||
>
|
||
<MenuItem value="draft">Entwurf (draft)</MenuItem>
|
||
<MenuItem value="packed">Gepackt (packed)</MenuItem>
|
||
<MenuItem value="shipped">Versendet (shipped — Lagerabbuchung)</MenuItem>
|
||
</TextField>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
|
||
<Button variant="outlined" onClick={onClose} disabled={saving}>
|
||
Abbrechen
|
||
</Button>
|
||
<Button variant="contained" onClick={this.handleSubmit} disabled={saving}>
|
||
{saving ? 'Wird gespeichert…' : 'Paket anlegen'}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</AppDialog>
|
||
);
|
||
}
|
||
}
|
||
|
||
// MARK: <NewShipmentModal/>
|
||
class NewShipmentModal extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
const orders = props.orders.filter((o) => {
|
||
const ordQty = Number(o.orderedQuantity) || 0;
|
||
const shpQty = Number(o.shippedQuantity) || 0;
|
||
return ordQty === 0 || shpQty < ordQty;
|
||
});
|
||
|
||
const selectedOrder = orders[0] || null;
|
||
const initialAmounts = {};
|
||
if (selectedOrder) {
|
||
this.populateAmounts(selectedOrder, initialAmounts);
|
||
}
|
||
|
||
this.state = {
|
||
orderId: selectedOrder?.id || '',
|
||
date: new Date().toISOString().slice(0, 10),
|
||
externalNumber: '',
|
||
lineAmounts: initialAmounts,
|
||
saving: false,
|
||
};
|
||
|
||
this.handleOrderChange = this.handleOrderChange.bind(this);
|
||
this.handleAmountChange = this.handleAmountChange.bind(this);
|
||
this.handleSubmit = this.handleSubmit.bind(this);
|
||
}
|
||
|
||
populateAmounts(order, targetMap) {
|
||
const shippedBySku = {};
|
||
for (const sh of order.shipments || []) {
|
||
for (const sl of sh.lines || []) {
|
||
if (sl.sku) shippedBySku[sl.sku] = (shippedBySku[sl.sku] || 0) + (Number(sl.amount) || 0);
|
||
}
|
||
}
|
||
for (const l of order.lines || []) {
|
||
if (!l.sku) continue;
|
||
const orderedAmt = Number(l.amount) || 0;
|
||
const shippedAmt = shippedBySku[l.sku] || 0;
|
||
const rem = Math.max(0, orderedAmt - shippedAmt);
|
||
targetMap[l.sku] = rem > 0 ? String(rem) : '0';
|
||
}
|
||
}
|
||
|
||
handleOrderChange(newOrderId) {
|
||
const order = this.props.orders.find((o) => o.id === newOrderId);
|
||
const newAmounts = {};
|
||
if (order) {
|
||
this.populateAmounts(order, newAmounts);
|
||
}
|
||
this.setState({ orderId: newOrderId, lineAmounts: newAmounts });
|
||
}
|
||
|
||
handleAmountChange(sku, val) {
|
||
this.setState((prev) => ({
|
||
lineAmounts: { ...prev.lineAmounts, [sku]: val },
|
||
}));
|
||
}
|
||
|
||
async handleSubmit() {
|
||
const { orders, onClose, onSuccess } = this.props;
|
||
const { orderId, date, externalNumber, lineAmounts } = this.state;
|
||
const order = orders.find((o) => o.id === Number(orderId));
|
||
if (!order) return;
|
||
|
||
const linesToShip = [];
|
||
for (const [sku, amtStr] of Object.entries(lineAmounts)) {
|
||
const amt = Number(amtStr);
|
||
if (amt > 0) {
|
||
const orderLine = order.lines?.find((l) => l.sku === sku);
|
||
linesToShip.push({
|
||
sku,
|
||
amount: amt,
|
||
name: orderLine?.name ?? '',
|
||
pu: orderLine?.pu ?? 1,
|
||
net: orderLine?.net ?? 0,
|
||
rebate: orderLine?.rebate ?? 0,
|
||
taxrate: orderLine?.taxrate ?? 0,
|
||
});
|
||
}
|
||
}
|
||
|
||
if (linesToShip.length === 0) {
|
||
enqueueSnackbar('Mindestens ein Artikel muss eine Liefermenge > 0 haben.', { variant: 'warning' });
|
||
return;
|
||
}
|
||
|
||
this.setState({ saving: true });
|
||
try {
|
||
const res = await shipmentApi.create(order.id, {
|
||
date,
|
||
externalNumber: externalNumber.trim() || undefined,
|
||
lines: linesToShip,
|
||
});
|
||
enqueueSnackbar(`Lieferschein ${res.shipment?.number || ''} erfolgreich angelegt!`, { variant: 'success' });
|
||
await orderAutomat.actions.reload();
|
||
onSuccess?.(res.shipment?.id);
|
||
onClose();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
this.setState({ saving: false });
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { open, onClose, orders, partiesById } = this.props;
|
||
const { orderId, date, externalNumber, lineAmounts, saving } = this.state;
|
||
|
||
const openOrders = orders.filter((o) => {
|
||
const ordQty = Number(o.orderedQuantity) || 0;
|
||
const shpQty = Number(o.shippedQuantity) || 0;
|
||
return ordQty === 0 || shpQty < ordQty;
|
||
});
|
||
|
||
const currentOrder = orders.find((o) => o.id === Number(orderId));
|
||
const lines = Array.isArray(currentOrder?.lines) ? currentOrder.lines : [];
|
||
|
||
const shippedBySku = {};
|
||
for (const sh of currentOrder?.shipments || []) {
|
||
for (const sl of sh.lines || []) {
|
||
if (sl.sku) shippedBySku[sl.sku] = (shippedBySku[sl.sku] || 0) + (Number(sl.amount) || 0);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
||
<Box sx={{ p: 2.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 2 }}>
|
||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||
Neuen Lieferschein erstellen (Shipment Manifest)
|
||
</Typography>
|
||
<IconButton onClick={onClose} size="small">
|
||
<CloseIcon />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
|
||
<TextField
|
||
select
|
||
label="Auftrag auswählen"
|
||
size="small"
|
||
value={orderId}
|
||
onChange={(e) => this.handleOrderChange(e.target.value)}
|
||
fullWidth
|
||
>
|
||
{openOrders.map((o) => {
|
||
const party = partiesById[o.entityId];
|
||
const partyName = partyDisplayName('order', party) || `Kunde #${o.entityId}`;
|
||
return (
|
||
<MenuItem key={o.id} value={o.id}>
|
||
{o.number} — {partyName} ({o.shippedQuantity || 0}/{o.orderedQuantity || 0} geliefert)
|
||
</MenuItem>
|
||
);
|
||
})}
|
||
</TextField>
|
||
|
||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||
<TextField
|
||
label="Lieferdatum"
|
||
type="date"
|
||
size="small"
|
||
value={date}
|
||
onChange={(e) => this.setState({ date: e.target.value })}
|
||
InputLabelProps={{ shrink: true }}
|
||
sx={{ width: 180 }}
|
||
/>
|
||
<TextField
|
||
label="Externe Referenz / Lieferschein-Nr."
|
||
size="small"
|
||
placeholder="z.B. LS-2026-99"
|
||
value={externalNumber}
|
||
onChange={(e) => this.setState({ externalNumber: e.target.value })}
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
|
||
{currentOrder && (
|
||
<>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
|
||
Zu liefernde Positionen (Maximal restante Bestellmenge)
|
||
</Typography>
|
||
|
||
<TableContainer sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, mb: 3 }}>
|
||
<Table size="small">
|
||
<TableHead sx={{ bgcolor: 'action.hover' }}>
|
||
<TableRow>
|
||
<TableCell sx={{ fontWeight: 600 }}>SKU</TableCell>
|
||
<TableCell sx={{ fontWeight: 600 }}>Artikel</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600 }}>Bestellt</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600 }}>Geliefert</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600 }}>Offen</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600, width: 120 }}>Liefermenge</TableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{lines.map((line) => {
|
||
const orderedAmt = Number(line.amount) || 0;
|
||
const shippedAmt = shippedBySku[line.sku] || 0;
|
||
const remaining = Math.max(0, orderedAmt - shippedAmt);
|
||
const currentVal = lineAmounts[line.sku] ?? '0';
|
||
|
||
return (
|
||
<TableRow key={line.id || line.sku}>
|
||
<TableCell sx={{ fontWeight: 500 }}>{line.sku}</TableCell>
|
||
<TableCell>{line.name}</TableCell>
|
||
<TableCell align="right">{orderedAmt}</TableCell>
|
||
<TableCell align="right">{shippedAmt}</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600, color: remaining > 0 ? 'primary.main' : 'text.disabled' }}>
|
||
{remaining}
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
<TextField
|
||
size="small"
|
||
type="number"
|
||
value={currentVal}
|
||
onChange={(e) => this.handleAmountChange(line.sku, e.target.value)}
|
||
disabled={remaining <= 0}
|
||
inputProps={{ min: 0, max: remaining, step: 'any', style: { textAlign: 'right' } }}
|
||
sx={{ width: 100 }}
|
||
/>
|
||
</TableCell>
|
||
</TableRow>
|
||
);
|
||
})}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</>
|
||
)}
|
||
|
||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
|
||
<Button variant="outlined" onClick={onClose} disabled={saving}>
|
||
Abbrechen
|
||
</Button>
|
||
<Button variant="contained" onClick={this.handleSubmit} disabled={saving || !currentOrder} startIcon={<LocalShippingIcon />}>
|
||
{saving ? 'Wird erstellt…' : 'Lieferschein anlegen'}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</AppDialog>
|
||
);
|
||
}
|
||
}
|
||
|
||
// MARK: <ShipmentList/>
|
||
export class ShipmentList extends PureComponent {
|
||
constructor(props) {
|
||
super(props);
|
||
const s = orderAutomat.state;
|
||
this.state = {
|
||
status: s.status === 'ready' ? 'ready' : 'loading',
|
||
error: s.error ? backendErrorFrom(s.error) : null,
|
||
items: s.items ?? [],
|
||
filter: '',
|
||
partiesById: {},
|
||
selectedShipmentId: null,
|
||
addPackageDialogOpen: false,
|
||
newShipmentModalOpen: false,
|
||
busyAction: false,
|
||
};
|
||
this._cancelled = false;
|
||
this.handleRetry = this.handleRetry.bind(this);
|
||
this.handleSelectShipment = this.handleSelectShipment.bind(this);
|
||
this.handleDeleteShipment = this.handleDeleteShipment.bind(this);
|
||
this.handleDeletePackage = this.handleDeletePackage.bind(this);
|
||
this.handleMarkPackageShipped = this.handleMarkPackageShipped.bind(this);
|
||
}
|
||
|
||
componentDidMount() {
|
||
this._cancelled = false;
|
||
this.unsub = orderAutomat.subscribe(this, (state) => {
|
||
const items = state.items ?? [];
|
||
this.setState((prev) => {
|
||
// If current selectedShipmentId is no longer found, pick first
|
||
const allShipments = this.extractAllShipments(items);
|
||
let selectedShipmentId = prev.selectedShipmentId;
|
||
if (!selectedShipmentId && allShipments.length > 0) {
|
||
selectedShipmentId = allShipments[0].id;
|
||
} else if (selectedShipmentId && !allShipments.some((s) => s.id === selectedShipmentId)) {
|
||
selectedShipmentId = allShipments[0]?.id || null;
|
||
}
|
||
return {
|
||
items,
|
||
status: state.status,
|
||
error: state.error ? backendErrorFrom(state.error) : null,
|
||
selectedShipmentId,
|
||
};
|
||
});
|
||
});
|
||
|
||
if (orderAutomat.state.status === 'idle') {
|
||
void orderAutomat.actions.load().catch(() => {});
|
||
}
|
||
void this.loadPartiesData();
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this._cancelled = true;
|
||
this.unsub?.();
|
||
}
|
||
|
||
async loadPartiesData() {
|
||
try {
|
||
const parties = await loadParties('order');
|
||
if (!this._cancelled) {
|
||
this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
|
||
}
|
||
} catch {
|
||
// Non-fatal
|
||
}
|
||
}
|
||
|
||
extractAllShipments(orders = this.state.items) {
|
||
const list = [];
|
||
for (const order of orders) {
|
||
if (!order || !Array.isArray(order.shipments)) continue;
|
||
for (const sh of order.shipments) {
|
||
list.push({
|
||
...sh,
|
||
parentOrderId: order.id,
|
||
parentOrderNumber: order.number,
|
||
parentOrderDate: order.date,
|
||
entityId: order.entityId,
|
||
parentOrder: order,
|
||
});
|
||
}
|
||
}
|
||
// Sort descending by date / id
|
||
return list.sort((a, b) => {
|
||
const cmp = String(b.date || '').localeCompare(String(a.date || ''));
|
||
if (cmp !== 0) return cmp;
|
||
return Number(b.id || 0) - Number(a.id || 0);
|
||
});
|
||
}
|
||
|
||
handleRetry() {
|
||
void orderAutomat.actions.load().catch(() => {});
|
||
}
|
||
|
||
handleSelectShipment(shipment) {
|
||
this.setState({ selectedShipmentId: shipment.id });
|
||
}
|
||
|
||
async handleDeleteShipment(sh) {
|
||
if (!window.confirm(`Lieferschein „${sh.number}“ wirklich löschen?`)) return;
|
||
this.setState({ busyAction: true });
|
||
try {
|
||
await shipmentApi.delete(sh.id);
|
||
enqueueSnackbar(`Lieferschein ${sh.number} gelöscht.`, { variant: 'success' });
|
||
await orderAutomat.actions.reload();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
} finally {
|
||
this.setState({ busyAction: false });
|
||
}
|
||
}
|
||
|
||
async handleDeletePackage(pkg) {
|
||
if (!window.confirm(`Paket „#${pkg.number || pkg.id}“ wirklich löschen?`)) return;
|
||
this.setState({ busyAction: true });
|
||
try {
|
||
await shippingApi.delete(pkg.id);
|
||
enqueueSnackbar('Paket gelöscht.', { variant: 'success' });
|
||
await orderAutomat.actions.reload();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
} finally {
|
||
this.setState({ busyAction: false });
|
||
}
|
||
}
|
||
|
||
async handleMarkPackageShipped(pkg) {
|
||
this.setState({ busyAction: true });
|
||
try {
|
||
await shippingApi.update(pkg.id, { state: 'shipped' });
|
||
enqueueSnackbar('Paket als versendet markiert (Lagerbestand abgebucht).', { variant: 'success' });
|
||
await orderAutomat.actions.reload();
|
||
} catch (err) {
|
||
notifyError(err);
|
||
} finally {
|
||
this.setState({ busyAction: false });
|
||
}
|
||
}
|
||
|
||
getFilteredShipments() {
|
||
const all = this.extractAllShipments();
|
||
const q = this.state.filter.trim().toLowerCase();
|
||
if (!q) return all;
|
||
|
||
const { partiesById } = this.state;
|
||
return all.filter((sh) => {
|
||
const party = partiesById[sh.entityId];
|
||
const partyName = partyDisplayName('order', party);
|
||
const trackingCodes = (sh.shippings || []).map((p) => p.trackingCode).filter(Boolean);
|
||
const carriers = (sh.shippings || []).map((p) => p.carrier).filter(Boolean);
|
||
|
||
return [sh.number, sh.parentOrderNumber, sh.externalNumber, partyName, ...trackingCodes, ...carriers]
|
||
.some((val) => String(val || '').toLowerCase().includes(q));
|
||
});
|
||
}
|
||
|
||
render() {
|
||
const { status, error, filter, partiesById, selectedShipmentId, addPackageDialogOpen, newShipmentModalOpen, busyAction, items } = this.state;
|
||
|
||
if (status === 'loading' || status === 'idle') {
|
||
return (
|
||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
|
||
<CircularProgress />
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
if (status === 'failed') {
|
||
return <BackendError error={error} onRetry={this.handleRetry} />;
|
||
}
|
||
|
||
const filteredShipments = this.getFilteredShipments();
|
||
const selectedShipment = filteredShipments.find((s) => s.id === selectedShipmentId)
|
||
|| this.extractAllShipments().find((s) => s.id === selectedShipmentId)
|
||
|| filteredShipments[0]
|
||
|| null;
|
||
|
||
const shPackages = Array.isArray(selectedShipment?.shippings) ? selectedShipment.shippings : [];
|
||
const shLines = Array.isArray(selectedShipment?.lines) ? selectedShipment.lines : [];
|
||
const hasShippedPackages = shPackages.some((p) => p.state === 'shipped');
|
||
|
||
return (
|
||
<>
|
||
{/* Top Filter and Action Bar */}
|
||
<PanelTileGrid>
|
||
<Box
|
||
sx={{
|
||
gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 1.5,
|
||
pb: 2,
|
||
}}
|
||
>
|
||
<SingleLineTextEdit
|
||
sx={{ flex: 1 }}
|
||
size="small"
|
||
search
|
||
clear
|
||
placeholder="Lieferschein, Auftrag, Tracking-Code oder Carrier suchen…"
|
||
value={filter}
|
||
onChange={(next) => this.setState({ filter: next })}
|
||
/>
|
||
<Button
|
||
variant="contained"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => this.setState({ newShipmentModalOpen: true })}
|
||
>
|
||
Neuer Lieferschein
|
||
</Button>
|
||
</Box>
|
||
</PanelTileGrid>
|
||
|
||
{/* Master-Detail Split Grid */}
|
||
<PanelTileGrid>
|
||
{/* Left: Shipment Manifests List */}
|
||
<PanelTile wide={1.4} minHeight={480} color={GREEN_PANEL} sx={{ p: 0, display: 'flex', flexDirection: 'column' }}>
|
||
<Box sx={{ p: 1.5, borderBottom: '1px solid', borderColor: 'divider', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
|
||
Lieferscheine (Shipments)
|
||
</Typography>
|
||
<Chip size="small" label={`${filteredShipments.length} Einträge`} sx={{ fontWeight: 600, height: 20 }} />
|
||
</Box>
|
||
|
||
<Box sx={{ flex: 1, overflowY: 'auto', maxHeight: 600 }}>
|
||
{filteredShipments.length === 0 ? (
|
||
<Box sx={{ p: 4, textAlign: 'center' }}>
|
||
<Typography variant="body2" color="text.secondary">
|
||
Keine Lieferscheine gefunden.
|
||
</Typography>
|
||
</Box>
|
||
) : (
|
||
filteredShipments.map((sh) => {
|
||
const isSelected = selectedShipment?.id === sh.id;
|
||
const party = partiesById[sh.entityId];
|
||
const partyName = partyDisplayName('order', party) || `Kunde #${sh.entityId}`;
|
||
const pkgCount = Array.isArray(sh.shippings) ? sh.shippings.length : 0;
|
||
const lineCount = Array.isArray(sh.lines) ? sh.lines.length : 0;
|
||
const allShipped = pkgCount > 0 && sh.shippings.every((p) => p.state === 'shipped');
|
||
|
||
return (
|
||
<ListItemButton
|
||
key={sh.id}
|
||
divider
|
||
selected={isSelected}
|
||
onClick={() => this.handleSelectShipment(sh)}
|
||
sx={{
|
||
py: 1.25,
|
||
px: 1.75,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'stretch',
|
||
gap: 0.5,
|
||
bgcolor: isSelected ? 'action.selected' : 'inherit',
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Typography variant="body1" sx={{ fontWeight: 700, ...ellipsisSx }}>
|
||
{sh.number}
|
||
</Typography>
|
||
<Typography variant="caption" color="text.secondary">
|
||
{sh.date ? formatDate(sh.date) : '–'}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Typography variant="body2" color="text.secondary" sx={{ ...ellipsisSx, maxWidth: '65%' }}>
|
||
Auftrag: <strong>{sh.parentOrderNumber}</strong> • {partyName}
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', gap: 0.75 }}>
|
||
<Chip size="small" label={`${lineCount} Pos.`} sx={{ height: 18, fontSize: '0.65rem' }} />
|
||
<Chip
|
||
size="small"
|
||
color={allShipped ? 'success' : pkgCount > 0 ? 'primary' : 'default'}
|
||
label={`${pkgCount} Paket${pkgCount === 1 ? '' : 'e'}`}
|
||
sx={{ height: 18, fontSize: '0.65rem', fontWeight: 600 }}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
</ListItemButton>
|
||
);
|
||
})
|
||
)}
|
||
</Box>
|
||
</PanelTile>
|
||
|
||
{/* Right: Selected Shipment Detail & Shipping Packages */}
|
||
<PanelTile wide={1.6} minHeight={480} color={SURFACE_BASE} sx={{ p: 2.5 }}>
|
||
{selectedShipment ? (
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 2.5 }}>
|
||
{/* Header */}
|
||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', pb: 1.5, borderBottom: '1px solid', borderColor: 'divider' }}>
|
||
<Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||
<LocalShippingIcon color="primary" sx={{ fontSize: 28 }} />
|
||
<Typography variant="h6" sx={{ fontWeight: 700 }}>
|
||
{selectedShipment.number}
|
||
</Typography>
|
||
<Chip
|
||
size="small"
|
||
color={hasShippedPackages ? 'success' : 'default'}
|
||
label={hasShippedPackages ? 'Im Versand' : 'Bereitstellung'}
|
||
sx={{ fontWeight: 600 }}
|
||
/>
|
||
</Box>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
|
||
Zugehöriger Auftrag: <strong>{selectedShipment.parentOrderNumber}</strong> • Datum: {selectedShipment.date ? formatDate(selectedShipment.date) : '–'}
|
||
{selectedShipment.externalNumber ? ` • Ref: ${selectedShipment.externalNumber}` : ''}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Button
|
||
size="small"
|
||
variant="contained"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => this.setState({ addPackageDialogOpen: true })}
|
||
disabled={busyAction}
|
||
>
|
||
Paket hinzufügen
|
||
</Button>
|
||
{!hasShippedPackages && (
|
||
<IconButton
|
||
size="small"
|
||
color="error"
|
||
disabled={busyAction}
|
||
onClick={() => this.handleDeleteShipment(selectedShipment)}
|
||
aria-label={`Lieferschein ${selectedShipment.number} löschen`}
|
||
>
|
||
<DeleteOutlinedIcon fontSize="small" />
|
||
</IconButton>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* Shipped Article Positions */}
|
||
<Box>
|
||
<Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', display: 'block', mb: 1 }}>
|
||
Positionen dieses Lieferscheins ({shLines.length})
|
||
</Typography>
|
||
<TableContainer sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1.5, bgcolor: WHITE }}>
|
||
<Table size="small">
|
||
<TableHead sx={{ bgcolor: SURFACE_RAISED }}>
|
||
<TableRow>
|
||
<TableCell sx={{ fontWeight: 600, py: 0.5 }}>SKU</TableCell>
|
||
<TableCell sx={{ fontWeight: 600, py: 0.5 }}>Bezeichnung</TableCell>
|
||
<TableCell align="right" sx={{ fontWeight: 600, py: 0.5 }}>Menge</TableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{shLines.map((line, idx) => (
|
||
<TableRow key={line.id || idx}>
|
||
<TableCell sx={{ py: 0.5, fontWeight: 500 }}>{line.sku}</TableCell>
|
||
<TableCell sx={{ py: 0.5 }}>{line.name}</TableCell>
|
||
<TableCell align="right" sx={{ py: 0.5, fontWeight: 700 }}>{line.amount}</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Box>
|
||
|
||
{/* Shipping Packages from 'shipping' Table */}
|
||
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
|
||
<Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary' }}>
|
||
Pakete aus der Versandtabelle (shipping) ({shPackages.length})
|
||
</Typography>
|
||
</Box>
|
||
|
||
{shPackages.length === 0 ? (
|
||
<Box sx={{ p: 3, textAlign: 'center', bgcolor: WHITE, borderRadius: 1.5, border: '1px dashed', borderColor: 'divider' }}>
|
||
<Inventory2Icon sx={{ color: 'text.secondary', fontSize: 32, mb: 1 }} />
|
||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
|
||
Keine Pakete (Shippings) erfasst.
|
||
</Typography>
|
||
<Button
|
||
size="small"
|
||
variant="outlined"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => this.setState({ addPackageDialogOpen: true })}
|
||
>
|
||
Paket anlegen
|
||
</Button>
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25 }}>
|
||
{shPackages.map((pkg) => {
|
||
const isShipped = pkg.state === 'shipped';
|
||
return (
|
||
<Box
|
||
key={pkg.id}
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
p: 1.5,
|
||
bgcolor: WHITE,
|
||
borderRadius: 1.5,
|
||
border: '1px solid',
|
||
borderColor: 'divider',
|
||
boxShadow: 1,
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||
<Chip size="small" label={`#${pkg.number || pkg.id}`} sx={{ fontWeight: 700 }} />
|
||
<Box>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
|
||
{pkg.carrier || 'DHL'} ({pkg.type === 'pallet' ? 'Palette' : 'Paket'})
|
||
</Typography>
|
||
{pkg.trackingCode ? (
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.25 }}>
|
||
<Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'primary.main' }}>
|
||
{pkg.trackingCode}
|
||
</Typography>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => {
|
||
navigator.clipboard.writeText(pkg.trackingCode);
|
||
enqueueSnackbar('Tracking-Code kopiert!', { variant: 'info' });
|
||
}}
|
||
sx={{ p: 0.25 }}
|
||
>
|
||
<ContentCopyIcon sx={{ fontSize: 13 }} />
|
||
</IconButton>
|
||
</Box>
|
||
) : (
|
||
<Typography variant="caption" color="text.secondary">
|
||
Ohne Tracking
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
{isShipped ? (
|
||
<Chip
|
||
size="small"
|
||
color="success"
|
||
icon={<CheckCircleOutlineOutlinedIcon />}
|
||
label="Versendet (Lager abgebucht)"
|
||
sx={{ fontWeight: 600 }}
|
||
/>
|
||
) : (
|
||
<>
|
||
<Chip size="small" variant="outlined" label={pkg.state} />
|
||
<Button
|
||
size="small"
|
||
variant="contained"
|
||
color="success"
|
||
disabled={busyAction}
|
||
onClick={() => this.handleMarkPackageShipped(pkg)}
|
||
sx={{ textTransform: 'none', py: 0.25, px: 1, height: 26 }}
|
||
>
|
||
Als versendet buchen
|
||
</Button>
|
||
<IconButton
|
||
size="small"
|
||
color="error"
|
||
disabled={busyAction}
|
||
onClick={() => this.handleDeletePackage(pkg)}
|
||
>
|
||
<DeleteOutlinedIcon fontSize="small" />
|
||
</IconButton>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
})}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 240 }}>
|
||
<Typography variant="body1" color="text.secondary">
|
||
Wählen Sie einen Lieferschein aus der linken Liste aus.
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
</PanelTile>
|
||
</PanelTileGrid>
|
||
|
||
{addPackageDialogOpen && selectedShipment && (
|
||
<AddPackageDialog
|
||
open={addPackageDialogOpen}
|
||
shipment={selectedShipment}
|
||
onClose={() => this.setState({ addPackageDialogOpen: false })}
|
||
/>
|
||
)}
|
||
|
||
{newShipmentModalOpen && (
|
||
<NewShipmentModal
|
||
open={newShipmentModalOpen}
|
||
orders={items}
|
||
partiesById={partiesById}
|
||
onClose={() => this.setState({ newShipmentModalOpen: false })}
|
||
onSuccess={(newId) => {
|
||
if (newId) this.setState({ selectedShipmentId: newId });
|
||
}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default withNavigate(ShipmentList);
|