u
This commit is contained in:
seb
531
src/components/manifest/ShipmentDetailDialog.jsx
Normal file
531
src/components/manifest/ShipmentDetailDialog.jsx
Normal file
@@ -0,0 +1,531 @@
|
||||
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 DialogActions from '@mui/material/DialogActions';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Stack from '@mui/material/Stack';
|
||||
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 TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
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 ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import Inventory2Icon from '@mui/icons-material/Inventory2';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import AppDialog from '../AppDialog';
|
||||
import { shipment as shipmentApi, shipping as shippingApi } from '../../api';
|
||||
import { notifyError } from '../../utils/notify';
|
||||
import { formatDate } from './manifestConfig';
|
||||
import orderAutomat from '../../automats/orderAutomat';
|
||||
import shipmentAutomat from '../../automats/shipmentAutomat';
|
||||
import { SURFACE_RAISED, WHITE } from '../../colors';
|
||||
|
||||
const CARRIERS = ['DHL', 'UPS', 'DPD', 'GLS', 'Hermes', 'Spedition', 'Selbstabholung'];
|
||||
|
||||
// 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;
|
||||
if (!shipment?.id) return;
|
||||
|
||||
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 Promise.all([
|
||||
orderAutomat.actions.reload(),
|
||||
shipmentAutomat.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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal to view and manage an existing Lieferschein (Shipment) directly from the Order page.
|
||||
*/
|
||||
export default class ShipmentDetailDialog extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
shipment: props.shipment || null,
|
||||
loading: false,
|
||||
error: null,
|
||||
addPackageDialogOpen: false,
|
||||
busyAction: false,
|
||||
};
|
||||
this.handleRefresh = this.handleRefresh.bind(this);
|
||||
this.handleDeletePackage = this.handleDeletePackage.bind(this);
|
||||
this.handleMarkPackageShipped = this.handleMarkPackageShipped.bind(this);
|
||||
this.handleStateChange = this.handleStateChange.bind(this);
|
||||
this.handleNavigateFull = this.handleNavigateFull.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.open && this.props.shipment?.id) {
|
||||
void this.handleRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (!prevProps.open && this.props.open) {
|
||||
this.setState({ shipment: this.props.shipment, error: null });
|
||||
if (this.props.shipment?.id) {
|
||||
void this.handleRefresh();
|
||||
}
|
||||
} else if (prevProps.shipment?.id !== this.props.shipment?.id && this.props.shipment?.id) {
|
||||
this.setState({ shipment: this.props.shipment });
|
||||
void this.handleRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: calls shipmentApi.get from ./api/index.js
|
||||
// #region GET /api/shipment/:id — refresh details
|
||||
async handleRefresh() {
|
||||
const shipmentId = this.props.shipment?.id;
|
||||
if (!shipmentId) return;
|
||||
|
||||
this.setState({ loading: true, error: null });
|
||||
try {
|
||||
const res = await shipmentApi.get(shipmentId);
|
||||
const enriched = res?.shipment || res;
|
||||
this.setState({ shipment: enriched, loading: false });
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
this.setState({ error: err?.message || String(err), loading: false });
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
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 Promise.all([
|
||||
orderAutomat.actions.reload(),
|
||||
shipmentAutomat.actions.reload(),
|
||||
]);
|
||||
this.props.onChanged?.();
|
||||
await this.handleRefresh();
|
||||
} 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 Promise.all([
|
||||
orderAutomat.actions.reload(),
|
||||
shipmentAutomat.actions.reload(),
|
||||
]);
|
||||
this.props.onChanged?.();
|
||||
await this.handleRefresh();
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
} finally {
|
||||
this.setState({ busyAction: false });
|
||||
}
|
||||
}
|
||||
|
||||
async handleStateChange(newState) {
|
||||
const shipmentId = this.state.shipment?.id;
|
||||
if (!shipmentId) return;
|
||||
|
||||
this.setState({ busyAction: true });
|
||||
try {
|
||||
await shipmentApi.update(shipmentId, { state: newState });
|
||||
this.setState((prev) => ({
|
||||
shipment: { ...prev.shipment, state: newState },
|
||||
}));
|
||||
const label = newState === 'delivered' ? 'Geliefert' : newState === 'returned' ? 'Retoure' : 'Neu';
|
||||
enqueueSnackbar(`Lieferstatus geändert: ${label}`, { variant: 'success' });
|
||||
await Promise.all([
|
||||
orderAutomat.actions.reload(),
|
||||
shipmentAutomat.actions.reload(),
|
||||
]);
|
||||
this.props.onChanged?.();
|
||||
} catch (err) {
|
||||
notifyError(err);
|
||||
} finally {
|
||||
this.setState({ busyAction: false });
|
||||
}
|
||||
}
|
||||
|
||||
handleNavigateFull() {
|
||||
const { shipment, onClose, onNavigate } = this.props;
|
||||
onClose?.();
|
||||
if (onNavigate && shipment?.id) {
|
||||
onNavigate(`/auftrag/ausliefern?shipmentId=${shipment.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { open, onClose } = this.props;
|
||||
const { shipment, loading, error, addPackageDialogOpen, busyAction } = this.state;
|
||||
|
||||
if (!shipment) return null;
|
||||
|
||||
const shLines = Array.isArray(shipment.lines) ? shipment.lines : [];
|
||||
const shPackages = Array.isArray(shipment.shippings) ? shipment.shippings : [];
|
||||
const hasShippedPackages = shPackages.some((p) => p.state === 'shipped');
|
||||
|
||||
return (
|
||||
<AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
||||
<DialogTitle sx={{ m: 0, p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Stack direction="row" spacing={1.5} sx={{ alignItems: 'center' }}>
|
||||
<LocalShippingIcon color="primary" sx={{ fontSize: 28 }} />
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.2 }}>
|
||||
{shipment.number || 'Lieferschein'}
|
||||
</Typography>
|
||||
<Chip
|
||||
size="small"
|
||||
color={hasShippedPackages ? 'success' : 'default'}
|
||||
label={hasShippedPackages ? 'Im Versand' : 'Bereitstellung'}
|
||||
sx={{ fontWeight: 600, height: 20, fontSize: '0.7rem' }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{shipment.date ? `Datum: ${formatDate(shipment.date)}` : ''}
|
||||
{shipment.externalNumber ? ` • Ref: ${shipment.externalNumber}` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<TextField
|
||||
select
|
||||
size="small"
|
||||
label="Lieferstatus"
|
||||
value={shipment.state || 'new'}
|
||||
onChange={(e) => this.handleStateChange(e.target.value)}
|
||||
disabled={busyAction}
|
||||
sx={{ minWidth: 130 }}
|
||||
>
|
||||
<MenuItem value="new">Neu</MenuItem>
|
||||
<MenuItem value="delivered">Geliefert</MenuItem>
|
||||
<MenuItem value="returned">Retoure</MenuItem>
|
||||
</TextField>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
size="small"
|
||||
sx={{ color: (theme) => theme.palette.grey[500] }}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent dividers sx={{ p: 2.5, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
|
||||
{error && (
|
||||
<Alert severity="error" onClose={() => this.setState({ error: null })}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Shipped Article Positions */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1 }}>
|
||||
Gelieferte Artikel-Positionen ({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.75 }}>SKU</TableCell>
|
||||
<TableCell sx={{ fontWeight: 600, py: 0.75 }}>Bezeichnung</TableCell>
|
||||
<TableCell align="right" sx={{ fontWeight: 600, py: 0.75 }}>Menge</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{shLines.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} align="center" sx={{ py: 2, color: 'text.secondary' }}>
|
||||
{loading ? 'Lädt Positionen…' : 'Keine Positionen auf diesem Lieferschein.'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
shLines.map((line, idx) => (
|
||||
<TableRow key={line.id || idx}>
|
||||
<TableCell sx={{ py: 0.75, fontWeight: 500 }}>{line.sku}</TableCell>
|
||||
<TableCell sx={{ py: 0.75 }}>{line.name || '–'}</TableCell>
|
||||
<TableCell align="right" sx={{ py: 0.75, fontWeight: 700 }}>
|
||||
{line.amount}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
|
||||
{/* Shipping Packages / Tracking */}
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
|
||||
Pakete & Sendungsverfolgung ({shPackages.length})
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => this.setState({ addPackageDialogOpen: true })}
|
||||
disabled={busyAction}
|
||||
sx={{ textTransform: 'none', fontWeight: 600, height: 28, fontSize: '0.75rem' }}
|
||||
>
|
||||
Paket hinzufügen
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{shPackages.length === 0 ? (
|
||||
<Box sx={{ p: 2.5, textAlign: 'center', bgcolor: WHITE, borderRadius: 1.5, border: '1px dashed', borderColor: 'divider' }}>
|
||||
<Inventory2Icon sx={{ color: 'text.secondary', fontSize: 28, mb: 0.5 }} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Noch keine Pakete erfasst.
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Stack spacing={1}>
|
||||
{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',
|
||||
}}
|
||||
>
|
||||
<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 }}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
color="success"
|
||||
disabled={busyAction}
|
||||
onClick={() => this.handleMarkPackageShipped(pkg)}
|
||||
sx={{ textTransform: 'none', py: 0.25, px: 1, height: 26, fontSize: '0.75rem' }}
|
||||
>
|
||||
Als versendet buchen
|
||||
</Button>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="error"
|
||||
disabled={busyAction}
|
||||
onClick={() => this.handleDeletePackage(pkg)}
|
||||
>
|
||||
<DeleteOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ p: 2, justifyContent: 'space-between' }}>
|
||||
<Button variant="outlined" onClick={onClose}>
|
||||
Schließen
|
||||
</Button>
|
||||
|
||||
{this.props.onNavigate && (
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<OpenInNewIcon />}
|
||||
onClick={this.handleNavigateFull}
|
||||
sx={{ textTransform: 'none', fontWeight: 600 }}
|
||||
>
|
||||
In Auslieferungen öffnen
|
||||
</Button>
|
||||
)}
|
||||
</DialogActions>
|
||||
|
||||
{addPackageDialogOpen && (
|
||||
<AddPackageDialog
|
||||
open={addPackageDialogOpen}
|
||||
shipment={shipment}
|
||||
onClose={() => this.setState({ addPackageDialogOpen: false })}
|
||||
onSuccess={async () => {
|
||||
this.props.onChanged?.();
|
||||
await this.handleRefresh();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AppDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user