u

.agents/skills/frontend-routes/SKILL.md

@@ -35,6 +35,7 @@ Reference guide for the backend LLM agent when emitting route navigation actions
 | **Order Detail** | `/auftrag/bestellung/:orderId` | Order document ID: `/auftrag/bestellung/${orderId}` | `/auftrag/bestellung/2005` |
 | **Shipments (Ausliefern)** | `/auftrag/ausliefern` | Static (shipment manifests & parcels) | `/auftrag/ausliefern` |
 | **Payments (Zahlungen)** | `/auftrag/zahlungen` | Static (order payments ledger) | `/auftrag/zahlungen` |
+| **Carriers (Versandarten)** | `/auftrag/versandarten` | Static (Versanddienstleister & Versandarten) | `/auftrag/versandarten` |
 
 | **Customer List** | `/kunde` | Static | `/kunde` |
 | **New Customer** | `/kunde/neu` | Static form | `/kunde/neu` |

src/api/carrier.js

@@ -1,7 +1,7 @@
 import { http } from './http.js';
 
 /**
- * Company-scoped carriers / Lieferarten.
+ * Company-scoped carriers / Versandarten.
  * Shape: Carrier = { id, name, sort, hasPackages, isReverse }
  */
 export const carrier = {

src/appRouter.jsx

@@ -23,7 +23,7 @@ import AuftragBestellungNeuPage from './routes/auftrag/bestellung/neu';
 import AuftragBestellungEditPage from './routes/auftrag/bestellung/_orderId';
 import AuftragAusliefernPage from './routes/auftrag/ausliefern';
 import AuftragZahlungenPage from './routes/auftrag/zahlungen';
-import AuftragLieferartenPage from './routes/auftrag/lieferarten';
+import AuftragVersandartenPage from './routes/auftrag/versandarten';
 
 import KundeListePage from './routes/kunde';
 import KundeNeuPage from './routes/kunde/neu';
@@ -107,7 +107,8 @@ const routes = [
           { path: 'bestellung/:orderId', element: <AuftragBestellungEditPage /> },
           { path: 'ausliefern', element: <AuftragAusliefernPage /> },
           { path: 'zahlungen', element: <AuftragZahlungenPage /> },
-          { path: 'lieferarten', element: <AuftragLieferartenPage /> },
+          { path: 'versandarten', element: <AuftragVersandartenPage /> },
+          { path: 'lieferarten', element: <Navigate to="/auftrag/versandarten" replace /> },
           { path: ':quoteId', element: <AuftragAngebotEditPage /> },
 
         ],

src/automats/carrierAutomat.js

@@ -1,6 +1,6 @@
 /**
  * @file carrierAutomat.js
- * @description Manages cached shipping carriers / Lieferarten (`GET /api/carrier`) for the active company.
+ * @description Manages cached shipping carriers / Versandarten (`GET /api/carrier`) for the active company.
  *
  * Upstream Triggers:
  * - `authAutomat`: Subscribes to auth state changes (`syncWithAuth`) — triggers

src/components/carrier/CarrierItem.jsx

@@ -56,7 +56,7 @@ class CarrierItem extends PureComponent {
   async updateCarrier(item, patch) {
     try {
       await carrierAutomat.actions.update(item.id, patch);
-      enqueueSnackbar('Lieferart gespeichert.', { variant: 'success' });
+      enqueueSnackbar('Versandart gespeichert.', { variant: 'success' });
     } catch (err) {
       this.setState({ draft: item.name ?? '' });
       notifyError(err);
@@ -93,11 +93,11 @@ class CarrierItem extends PureComponent {
   handleDelete = () => {
     const item = this.props.carrier ?? this.props.item;
     if (!item) return;
-    if (!window.confirm(`Lieferart „${item.name}“ wirklich löschen?`)) return;
+    if (!window.confirm(`Versandart „${item.name}“ wirklich löschen?`)) return;
     void (async () => {
       try {
         await carrierAutomat.actions.remove(item.id);
-        enqueueSnackbar('Lieferart gelöscht.', { variant: 'success' });
+        enqueueSnackbar('Versandart gelöscht.', { variant: 'success' });
       } catch (err) {
         notifyError(err);
       }

src/components/manifest/ShipmentDetailDialog.jsx

@@ -118,14 +118,14 @@ class AddPackageDialog extends PureComponent {
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
             <TextField
               select
-              label="Lieferart (Carrier)"
+              label="Versandart (Carrier)"
               size="small"
               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)'
+                  ? 'Keine Versandarten eingerichtet (unter Auftrag → Versandarten anlegen)'
                   : undefined
               }
             >

src/nav.js

@@ -229,11 +229,11 @@ export const SUB_NAV = {
       help: 'Zahlungseingänge erfassen und Auftragszahlungen überwachen',
     },
     {
-      segment: 'lieferarten',
+      segment: 'versandarten',
-      label: 'Lieferarten',
+      label: 'Versandarten',
-      title: 'Lieferarten',
+      title: 'Versandarten',
       icon: LocalShippingOutlinedIcon,
-      help: 'Versanddienstleister und Lieferarten (Carriers) verwalten',
+      help: 'Versanddienstleister und Versandarten (Carriers) verwalten',
     },
   ],
   '/kunde': [

src/routes/auftrag/versandarten.jsx

@@ -0,0 +1,270 @@
+import { PureComponent, createRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import Sortable from 'sortablejs';
+import { enqueueSnackbar } from 'notistack';
+import BackendError from '../../components/BackendError';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import withNavigate from '../../components/withNavigate';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+import carrierAutomat from '../../automats/carrierAutomat';
+import { CarrierItem } from '../../components/carrier';
+import { GREEN_PANEL } from '../../colors';
+
+class VersandartenSearchField extends PureComponent {
+  constructor(props) {
+    super(props);
+    const initial = carrierAutomat.state.filter || '';
+    this.state = {
+      input: initial,
+      submitting: false,
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    this.unsub = carrierAutomat.subscribe(this, (state) => ({
+      input: state.filter,
+    }));
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
+
+  onInputChange(input) {
+    this.setState({ input });
+    carrierAutomat.actions.filter(input);
+  }
+
+  async handleSubmit() {
+    const name = this.state.input.trim();
+    if (!name || this.state.submitting) return;
+
+    this.setState({ submitting: true });
+    try {
+      const row = await carrierAutomat.actions.create({
+        name,
+        hasPackages: true,
+        isReverse: false,
+      });
+      enqueueSnackbar(`Versandart „${row.name || name}“ angelegt.`, { variant: 'success' });
+      this.setState({ input: '', submitting: false });
+      carrierAutomat.actions.filter('');
+    } catch (err) {
+      this.setState({ submitting: false });
+      notifyError(err);
+    }
+  }
+
+  render() {
+    const { inputRef } = this.props;
+    const { input, submitting } = this.state;
+    const canSubmit = Boolean(input.trim()) && !submitting;
+
+    return (
+      <PanelTileGrid>
+        <Box
+          ref={inputRef}
+          sx={{
+            gridColumn: {
+              xs: '1 / -1',
+              sm: 'span 2',
+              md: 'span 2',
+            },
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            pb: 2,
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <SingleLineTextEdit
+              sx={{ flex: 1 }}
+              size="small"
+              search
+              clear
+              placeholder="Versandart suchen oder neu anlegen..."
+              value={input}
+              disabled={submitting}
+              onChange={(next) => this.onInputChange(next)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  void this.handleSubmit();
+                }
+              }}
+            />
+            <Button
+              variant="contained"
+              disabled={!canSubmit}
+              onClick={() => void this.handleSubmit()}
+            >
+              Hinzufügen
+            </Button>
+          </Box>
+        </Box>
+      </PanelTileGrid>
+    );
+  }
+}
+
+class AuftragVersandartenPage extends PureComponent {
+  constructor(props) {
+    super(props);
+    const initialCarriers =
+      carrierAutomat.state.filteredCarriers ?? carrierAutomat.state.carriers ?? [];
+    this.state = {
+      status: carrierAutomat.state.status === 'ready' ? 'ready' : 'loading',
+      error: carrierAutomat.state.error ? backendErrorFrom(carrierAutomat.state.error) : null,
+      carriers: initialCarriers,
+      filter: carrierAutomat.state.filter ?? '',
+    };
+    this.searchRef = createRef();
+    this.listRef = createRef();
+    this._sortable = null;
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this._initSortable = this._initSortable.bind(this);
+    this._destroySortable = this._destroySortable.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+
+    this.unsub = carrierAutomat.subscribe(this, (state) => ({
+      carriers: state.filteredCarriers ?? state.carriers,
+      filter: state.filter ?? '',
+      status: state.status,
+      error: state.error ? backendErrorFrom(state.error) : null,
+    }));
+
+    if (carrierAutomat.state.status !== 'ready') {
+      void carrierAutomat.actions.load().catch((err) => notifyError(err));
+    } else {
+      this._initSortable();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      prevState.status !== this.state.status ||
+      prevState.carriers !== this.state.carriers ||
+      prevState.filter !== this.state.filter
+    ) {
+      if (this.state.status === 'ready') {
+        this._initSortable();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+    this._destroySortable();
+  }
+
+  _initSortable() {
+    this._destroySortable();
+    const el = this.listRef.current;
+    if (!el) return;
+
+    const isFiltered = Boolean(this.state.filter?.trim());
+
+    this._sortable = Sortable.create(el, {
+      handle: '.drag-handle',
+      animation: 150,
+      ghostClass: 'sortable-ghost',
+      chosenClass: 'sortable-chosen',
+      disabled: isFiltered,
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+        if (oldIndex === newIndex) return;
+
+        this.setState(
+          (prev) => {
+            const next = [...prev.carriers];
+            const [moved] = next.splice(oldIndex, 1);
+            next.splice(newIndex, 0, moved);
+            return { carriers: next };
+          },
+          () => {
+            const ids = this.state.carriers.map((c) => c.id);
+            void this._persistOrder(ids);
+          }
+        );
+      },
+    });
+  }
+
+  _destroySortable() {
+    this._sortable?.destroy();
+    this._sortable = null;
+  }
+
+  async _persistOrder(carrierIds) {
+    try {
+      await carrierAutomat.actions.reorder(carrierIds);
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      void carrierAutomat.actions.reload();
+    }
+  }
+
+  handleRetry() {
+    void carrierAutomat.actions.load().catch((err) => notifyError(err));
+  }
+
+  render() {
+    const { status, error, carriers, filter } = 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 trimmedFilter = filter?.trim() ?? '';
+
+    return (
+      <>
+        <VersandartenSearchField inputRef={this.searchRef} />
+        <PanelTileGrid>
+          <PanelTile wide={2} minHeight={0} color={GREEN_PANEL}>
+            <List dense disablePadding ref={this.listRef} sx={{ width: '100%' }}>
+              {carriers.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                  {trimmedFilter
+                    ? `Keine Treffer für „${trimmedFilter}“.`
+                    : 'Noch keine Versandarten angelegt.'}
+                </Typography>
+              ) : (
+                carriers.map((c) => (
+                  <CarrierItem
+                    key={c.id}
+                    carrier={c}
+                  />
+                ))
+              )}
+            </List>
+          </PanelTile>
+        </PanelTileGrid>
+      </>
+    );
+  }
+}
+
+export { CarrierItem, VersandartenSearchField };
+export default withNavigate(AuftragVersandartenPage);