u

src/components/carrier/CarrierItem.jsx

@@ -0,0 +1,213 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import carrierAutomat from '../../automats/carrierAutomat';
+import { notifyError } from '../../utils/notify';
+
+class CarrierItem extends PureComponent {
+  constructor(props) {
+    super(props);
+    const item = props.carrier ?? props.item;
+    this.state = {
+      draft: item?.name ?? '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevItem = prevProps.carrier ?? prevProps.item;
+    const item = this.props.carrier ?? this.props.item;
+    if (prevItem?.name !== item?.name) {
+      this.setState({ draft: item?.name ?? '' });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== item?.name) {
+        this.setState({ draft: item?.name ?? '' });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    const item = this.props.carrier ?? this.props.item;
+    this.props.onChange?.(next, item);
+  };
+
+  handleBlur = () => {
+    const item = this.props.carrier ?? this.props.item;
+    if (!item) return;
+    const draft = this.state.draft.trim();
+    if (!draft) {
+      this.setState({ draft: item.name ?? '' });
+      return;
+    }
+    if (draft !== item.name) {
+      void this.updateCarrier(item, { name: draft });
+    }
+  };
+
+  async updateCarrier(item, patch) {
+    try {
+      await carrierAutomat.actions.update(item.id, patch);
+      enqueueSnackbar('Lieferart gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: item.name ?? '' });
+      notifyError(err);
+    }
+  }
+
+  handleToggleHasPackages = (e) => {
+    const item = this.props.carrier ?? this.props.item;
+    if (!item) return;
+    const nextVal = e.target.checked;
+    void this.updateCarrier(item, { hasPackages: nextVal });
+  };
+
+  handleToggleIsReverse = (e) => {
+    const item = this.props.carrier ?? this.props.item;
+    if (!item) return;
+    const nextVal = e.target.checked;
+    void this.updateCarrier(item, { isReverse: nextVal });
+  };
+
+  handleKeyDown = (event) => {
+    const item = this.props.carrier ?? this.props.item;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: item?.name ?? '' });
+      event.target.blur();
+    }
+  };
+
+  handleDelete = () => {
+    const item = this.props.carrier ?? this.props.item;
+    if (!item) return;
+    if (!window.confirm(`Lieferart „${item.name}“ wirklich löschen?`)) return;
+    void (async () => {
+      try {
+        await carrierAutomat.actions.remove(item.id);
+        enqueueSnackbar('Lieferart gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+      }
+    })();
+  };
+
+  render() {
+    const { disabled, sx } = this.props;
+    const item = this.props.carrier ?? this.props.item;
+    const { draft } = this.state;
+    const name = item?.name ?? '';
+    const hasPackages = Boolean(item?.hasPackages);
+    const isReverse = Boolean(item?.isReverse);
+
+    return (
+      <ListItem
+        disableGutters
+        data-id={item?.id}
+        sx={{
+          gap: 1,
+          py: 0.75,
+          alignItems: 'center',
+          width: '100%',
+          minWidth: 0,
+          flexWrap: { xs: 'wrap', sm: 'nowrap' },
+          ...sx,
+        }}
+      >
+        <Box
+          className="drag-handle"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 40,
+            height: 40,
+            flexShrink: 0,
+            color: 'text.disabled',
+            cursor: disabled ? 'default' : 'grab',
+            userSelect: 'none',
+            touchAction: 'none',
+            '&:hover': disabled ? undefined : { color: 'text.secondary' },
+            transition: 'color 0.15s',
+          }}
+        >
+          <DragIndicatorIcon sx={{ fontSize: 24, pointerEvents: 'none' }} />
+        </Box>
+
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled || !item}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1, minWidth: 140 }}
+        />
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexShrink: 0 }}>
+          <Tooltip title="Paketverfolgung / Tracking für Sendungen aktivieren">
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  checked={hasPackages}
+                  disabled={disabled || !item}
+                  onChange={this.handleToggleHasPackages}
+                />
+              }
+              label={
+                <Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
+                  Pakete
+                </Typography>
+              }
+              sx={{ m: 0, gap: 0.5 }}
+            />
+          </Tooltip>
+
+          <Tooltip title="Für Retouren / Rücksendungen verwenden">
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  checked={isReverse}
+                  disabled={disabled || !item}
+                  onChange={this.handleToggleIsReverse}
+                />
+              }
+              label={
+                <Typography variant="caption" sx={{ userSelect: 'none', fontWeight: 500 }}>
+                  Retoure
+                </Typography>
+              }
+              sx={{ m: 0, gap: 0.5 }}
+            />
+          </Tooltip>
+        </Box>
+
+        <IconButton
+          aria-label={`„${name}“ löschen`}
+          disabled={disabled || !item}
+          onClick={this.handleDelete}
+          sx={{ width: 40, height: 40, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+        </IconButton>
+      </ListItem>
+    );
+  }
+}
+
+export default CarrierItem;

src/components/carrier/index.js

@@ -0,0 +1 @@
+export { default as CarrierItem } from './CarrierItem';

src/components/manifest/ShipmentDetailDialog.jsx

@@ -31,16 +31,17 @@ import { notifyError } from '../../utils/notify';
 import { formatDate } from './manifestConfig';
 import orderAutomat from '../../automats/orderAutomat';
 import shipmentAutomat from '../../automats/shipmentAutomat';
+import carrierAutomat from '../../automats/carrierAutomat';
 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);
+    const carriers = carrierAutomat.state.carriers || [];
     this.state = {
-      carrier: 'DHL',
+      carriers,
+      carrierId: carriers[0]?.id ?? '',
       trackingCode: '',
       type: 'parcel',
       state: 'draft',
@@ -49,15 +50,34 @@ class AddPackageDialog extends PureComponent {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  componentDidMount() {
+    this.unsub = carrierAutomat.subscribe(this, (state) => {
+      const carriers = state.carriers || [];
+      const currentId = this.state.carrierId;
+      const valid = carriers.some((c) => c.id === currentId);
+      return {
+        carriers,
+        carrierId: valid ? currentId : (carriers[0]?.id ?? ''),
+      };
+    });
+    if (carrierAutomat.state.status !== 'ready') {
+      void carrierAutomat.actions.load().catch(() => {});
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
+
   async handleSubmit() {
     const { shipment, onClose, onSuccess } = this.props;
-    const { carrier, trackingCode, type, state } = this.state;
-    if (!shipment?.id) return;
+    const { carrierId, trackingCode, type, state } = this.state;
+    if (!shipment?.id || !carrierId) return;
 
     this.setState({ saving: true });
     try {
       await shippingApi.create(shipment.id, {
-        carrier: carrier.trim() || undefined,
+        carrierId: Number(carrierId),
         trackingCode: trackingCode.trim() || undefined,
         type,
         state,
@@ -77,7 +97,8 @@ class AddPackageDialog extends PureComponent {
 
   render() {
     const { open, onClose, shipment } = this.props;
-    const { carrier, trackingCode, type, state, saving } = this.state;
+    const { carriers, carrierId, trackingCode, type, state, saving } = this.state;
+    const canSubmit = Boolean(carrierId) && !saving;
 
     return (
       <AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
@@ -97,13 +118,21 @@ class AddPackageDialog extends PureComponent {
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
             <TextField
               select
-              label="Versanddienstleister (Carrier)"
+              label="Lieferart (Carrier)"
               size="small"
-              value={carrier}
-              onChange={(e) => this.setState({ carrier: e.target.value })}
+              value={carrierId}
+              onChange={(e) => this.setState({ carrierId: e.target.value })}
+              error={carriers.length === 0}
+              helperText={
+                carriers.length === 0
+                  ? 'Keine Lieferarten eingerichtet (unter Auftrag → Lieferarten anlegen)'
+                  : undefined
+              }
             >
-              {CARRIERS.map((c) => (
-                <MenuItem key={c} value={c}>{c}</MenuItem>
+              {carriers.map((c) => (
+                <MenuItem key={c.id} value={c.id}>
+                  {c.name}
+                </MenuItem>
               ))}
             </TextField>
 
@@ -145,7 +174,7 @@ class AddPackageDialog extends PureComponent {
             <Button variant="outlined" onClick={onClose} disabled={saving}>
               Abbrechen
             </Button>
-            <Button variant="contained" onClick={this.handleSubmit} disabled={saving}>
+            <Button variant="contained" onClick={this.handleSubmit} disabled={!canSubmit}>
               {saving ? 'Wird gespeichert…' : 'Paket anlegen'}
             </Button>
           </Box>