u

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

@@ -33,6 +33,9 @@ Reference guide for the backend LLM agent when emitting route navigation actions
 | **Order List (Bestellungen)**| `/auftrag/bestellung` | Static | `/auftrag/bestellung` |
 | **New Order** | `/auftrag/bestellung/neu` | Static draft form | `/auftrag/bestellung/neu` |
 | **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` |
+
 | **Customer List** | `/kunde` | Static | `/kunde` |
 | **New Customer** | `/kunde/neu` | Static form | `/kunde/neu` |
 | **Customer Detail** | `/kunde/:entityId` | Customer entity ID: `/kunde/${entityId}` | `/kunde/312` |
@@ -68,8 +71,11 @@ Reference guide for the backend LLM agent when emitting route navigation actions
 - Distinction:
   - Quotes (Angebote) live at `/auftrag` and `/auftrag/:quoteId`.
   - Orders (Bestellungen) live at `/auftrag/bestellung` and `/auftrag/bestellung/:orderId`.
+  - Shipments (Ausliefern) live at `/auftrag/ausliefern` (connected to shipment manifests and packages).
+  - Payments (Zahlungen) live at `/auftrag/zahlungen` (payment bookings and payment balances).
 - Both IDs (`quoteId`, `orderId`) are document IDs.
 
+
 ### Customers (`/kunde`)
 - `:entityId`: Numeric ID of the entity/customer record (e.g. `entity.id`).
 - Opens contact addresses, communications, and customer data tiles.

src/api/account.js

@@ -0,0 +1,24 @@
+import { http } from './http.js';
+
+/**
+ * Company payment accounts.
+ */
+export const account = {
+  // #region GET /api/account — list
+  list() {
+    return http('/api/account');
+  },
+  // #endregion
+
+  // #region POST /api/account — create
+  create(body) {
+    return http('/api/account', { method: 'POST', body });
+  },
+  // #endregion
+
+  // #region DELETE /api/account/:id — delete
+  delete(id) {
+    return http(`/api/account/${id}`, { method: 'DELETE' });
+  },
+  // #endregion
+};

src/api/index.js

@@ -26,3 +26,8 @@ export { vfs } from './vfs.js';
 export { warehouse } from './warehouse.js';
 export { stock } from './stock.js';
 export { globalHistory } from './globalHistory.js';
+export { shipment } from './shipment.js';
+export { shipping } from './shipping.js';
+export { payment } from './payment.js';
+export { account } from './account.js';
+

src/api/payment.js

@@ -0,0 +1,24 @@
+import { http } from './http.js';
+
+/**
+ * Payments linked to orders (manifests).
+ */
+export const payment = {
+  // #region GET /api/order/:id/payment — listByOrder
+  listByOrder(orderId) {
+    return http(`/api/order/${orderId}/payment`);
+  },
+  // #endregion
+
+  // #region POST /api/order/:id/payment — create
+  create(orderId, body) {
+    return http(`/api/order/${orderId}/payment`, { method: 'POST', body });
+  },
+  // #endregion
+
+  // #region DELETE /api/payment/:id — delete
+  delete(id) {
+    return http(`/api/payment/${id}`, { method: 'DELETE' });
+  },
+  // #endregion
+};

src/api/shipment.js

@@ -0,0 +1,31 @@
+import { http } from './http.js';
+
+/**
+ * Outbound shipments (manifest type = shipment).
+ * Manifest number format: <orderNumber><shipmentPrefix><index>, e.g. AU-1001-L-1.
+ */
+export const shipment = {
+  // #region GET /api/order/:id/shipment — listByOrder
+  listByOrder(orderId) {
+    return http(`/api/order/${orderId}/shipment`);
+  },
+  // #endregion
+
+  // #region POST /api/order/:id/shipment — create
+  create(orderId, body) {
+    return http(`/api/order/${orderId}/shipment`, { method: 'POST', body });
+  },
+  // #endregion
+
+  // #region GET /api/shipment/:id — get
+  get(id) {
+    return http(`/api/shipment/${id}`);
+  },
+  // #endregion
+
+  // #region DELETE /api/shipment/:id — delete
+  delete(id) {
+    return http(`/api/shipment/${id}`, { method: 'DELETE' });
+  },
+  // #endregion
+};

src/api/shipping.js

@@ -0,0 +1,30 @@
+import { http } from './http.js';
+
+/**
+ * Packages / logistics shipments attached to a shipment manifest.
+ */
+export const shipping = {
+  // #region GET /api/shipment/:id/shipping — listByShipment
+  listByShipment(shipmentId) {
+    return http(`/api/shipment/${shipmentId}/shipping`);
+  },
+  // #endregion
+
+  // #region POST /api/shipment/:id/shipping — create
+  create(shipmentId, body) {
+    return http(`/api/shipment/${shipmentId}/shipping`, { method: 'POST', body });
+  },
+  // #endregion
+
+  // #region PATCH /api/shipping/:id — update
+  update(id, body) {
+    return http(`/api/shipping/${id}`, { method: 'PATCH', body });
+  },
+  // #endregion
+
+  // #region DELETE /api/shipping/:id — delete
+  delete(id) {
+    return http(`/api/shipping/${id}`, { method: 'DELETE' });
+  },
+  // #endregion
+};

src/appRouter.jsx

@@ -21,6 +21,9 @@ import AuftragAngebotEditPage from './routes/auftrag/_quoteId';
 import AuftragBestellungPage from './routes/auftrag/bestellung';
 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 KundeListePage from './routes/kunde';
 import KundeNeuPage from './routes/kunde/neu';
 import KundeGruppenPage from './routes/kunde/gruppen';
@@ -83,7 +86,10 @@ const routes = [
           { path: 'bestellung', element: <AuftragBestellungPage /> },
           { path: 'bestellung/neu', element: <AuftragBestellungNeuPage /> },
           { path: 'bestellung/:orderId', element: <AuftragBestellungEditPage /> },
+          { path: 'ausliefern', element: <AuftragAusliefernPage /> },
+          { path: 'zahlungen', element: <AuftragZahlungenPage /> },
           { path: ':quoteId', element: <AuftragAngebotEditPage /> },
+
         ],
       },
       {

src/automats/accountAutomat.js

@@ -0,0 +1,21 @@
+/**
+ * @file accountAutomat.js
+ * @description Manages cached payment accounts (`GET /api/account`) for the selected company.
+ */
+
+import { createListAutomat } from './createListAutomat';
+import { account as accountApi } from '../api';
+
+export const accountAutomat = createListAutomat({
+  name: 'account',
+  fetch: async () => {
+    const res = await accountApi.list();
+    return Array.isArray(res?.accounts) ? res.accounts : [];
+  },
+  sort: (items) =>
+    [...items].sort((a, b) =>
+      String(a.name ?? '').localeCompare(String(b.name ?? ''), 'de')
+    ),
+});
+
+export default accountAutomat;

src/automats/index.js

@@ -81,8 +81,10 @@ export {
 export { default as entityAutomat } from './entityAutomat';
 export { default as customergroupAutomat } from './customergroupAutomat';
 export { default as numberAutomat } from './numberAutomat';
+export { default as accountAutomat } from './accountAutomat';
 export { createListAutomat, selectListItems, selectListStatus } from './createListAutomat';
 
+
 /** Per-SKU article detail views keyed by SKU. */
 export { articleHistoryAutomat, articleSupplierAutomat } from './articleDetailAutomat';
 

src/automats/orderAutomat.js

@@ -74,9 +74,10 @@ export function isOrderPaid(order) {
 }
 
 export function isOrderDelivered(order) {
-  return Boolean(order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
+  return Boolean(order.shipped ?? order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
 }
 
+
 export function getOrderDate(order) {
   const raw = order.date || order.createdAt;
   if (!raw) return null;

src/automats/sseAutomat.js

@@ -32,6 +32,8 @@ import warehouseAutomat from './warehouseAutomat';
 import attributeAutomat from './attributeAutomat';
 import propertyAutomat from './propertyAutomat';
 import supplierAutomat from './supplierAutomat';
+import orderAutomat from './orderAutomat';
+
 
 /**
  * @typedef {Object} SseState
@@ -236,6 +238,18 @@ function connect() {
     });
   });
 
+  addTrackedListener(es, 'order', () => {
+    void orderAutomat.actions.reload().catch((err) => {
+      console.error('[sse] order refresh failed', err);
+    });
+  });
+
+  addTrackedListener(es, 'shipment', () => {
+    void orderAutomat.actions.reload().catch((err) => {
+      console.error('[sse] shipment refresh failed', err);
+    });
+  });
+
   addTrackedListener(es, 'open', () => {
     sseAutomat.setState({ status: 'connected' });
   });

src/components/manifest/OrderPaymentList.jsx

@@ -0,0 +1,739 @@
+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 FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import ListItemButton from '@mui/material/ListItemButton';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import PaymentsIcon from '@mui/icons-material/Payments';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { enqueueSnackbar } from 'notistack';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import FillSpace from 'dashgui/FillSpace';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import BackendError from '../BackendError';
+import AppDialog from '../AppDialog';
+import orderAutomat, {
+  isOrderPaid,
+} from '../../automats/orderAutomat';
+import accountAutomat from '../../automats/accountAutomat';
+import { payment as paymentApi } from '../../api';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+import { formatPrice } from '../../utils/price';
+import withNavigate from '../withNavigate';
+import {
+  formatDate,
+  loadParties,
+  manifestConfig,
+  numberDisplay,
+  partyDisplayName,
+} from './manifestConfig';
+import {
+  YELLOW_PANEL,
+  SURFACE_BASE,
+  SURFACE_RAISED,
+  WHITE,
+} from '../../colors';
+
+const cfg = manifestConfig('order');
+
+const PAYMENT_TYPES = [
+  { value: 'transfer', label: 'Banküberweisung' },
+  { value: 'cash', label: 'Barzahlung' },
+  { value: 'card', label: 'EC- / Kreditkarte' },
+  { value: 'paypal', label: 'PayPal' },
+  { value: 'sepa', label: 'SEPA-Lastschrift' },
+  { value: 'invoice', label: 'Auf Rechnung' },
+  { value: 'other', label: 'Sonstige' },
+];
+
+function getOrderFinancials(order) {
+  const lines = Array.isArray(order?.lines) ? order.lines : [];
+  let total = Number(order?.orderTotal) || 0;
+  if (!total && lines.length > 0) {
+    total = lines.reduce((acc, line) => {
+      const net = (Number(line.amount) || 0) * (Number(line.net) || 0) * (1 - (Number(line.rebate) || 0) / 100);
+      return acc + net * (1 + (Number(line.taxrate) || 0) / 100);
+    }, 0);
+  }
+  total = Math.round(total * 100) / 100;
+
+  const payments = Array.isArray(order?.payments) ? order.payments : [];
+  let paid = Number(order?.paidTotal) || 0;
+  if (!paid && payments.length > 0) {
+    paid = payments.reduce((acc, p) => acc + (Number(p.amount) || 0), 0);
+  }
+  paid = Math.round(paid * 100) / 100;
+
+  const remaining = Math.max(0, Math.round((total - paid) * 100) / 100);
+  return {
+    total,
+    paid,
+    remaining,
+  };
+}
+
+const rowSx = {
+  alignItems: 'center',
+  height: 64,
+  minHeight: 64,
+  maxHeight: 64,
+  boxSizing: 'border-box',
+  py: 0,
+  gap: 1.5,
+};
+
+const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+
+const rowContext = {
+  partiesById: {},
+  onOpen: null,
+};
+
+// MARK: <OrderPaymentRow/>
+class OrderPaymentRow extends PureComponent {
+  partyName(partyId) {
+    if (partyId == null) return '–';
+    const party = rowContext.partiesById[partyId];
+    return partyDisplayName('order', party) || `Kunde #${partyId}`;
+  }
+
+  render() {
+    const { item: order } = this.props;
+
+    if (!order) {
+      return (
+        <ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
+          <Typography variant="body2">&nbsp;</Typography>
+        </ListItemButton>
+      );
+    }
+
+    const { onOpen } = rowContext;
+    const { total, paid, remaining } = getOrderFinancials(order);
+    const isPaid = isOrderPaid(order) || (total > 0 && Math.abs(paid - total) < 0.01);
+    const isPartial = paid > 0 && !isPaid;
+    const paymentsCount = Array.isArray(order.payments) ? order.payments.length : 0;
+
+    return (
+      <ListItemButton divider sx={rowSx} onClick={() => onOpen?.(order)}>
+        <Box sx={{ width: 130, flexShrink: 0, minWidth: 0 }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
+            {order.number}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+            {numberDisplay(order.externalNumber)}
+          </Typography>
+        </Box>
+
+        <Box sx={{ width: 100, flexShrink: 0, minWidth: 0 }}>
+          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+            {order.date ? formatDate(order.date) : '–'}
+          </Typography>
+        </Box>
+
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
+            {this.partyName(order.entityId)}
+          </Typography>
+        </Box>
+
+        {/* Amounts */}
+        <Box sx={{ width: 100, flexShrink: 0, textAlign: 'right' }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
+            {total > 0 ? formatPrice(total) : '—'}
+          </Typography>
+        </Box>
+
+        <Box sx={{ width: 100, flexShrink: 0, textAlign: 'right' }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: paid > 0 ? 'success.main' : 'text.disabled' }}>
+            {paid > 0 ? formatPrice(paid) : '0,00 €'}
+          </Typography>
+        </Box>
+
+        <Box sx={{ width: 100, flexShrink: 0, textAlign: 'right' }}>
+          <Typography variant="body2" sx={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: remaining > 0 ? 'error.main' : 'text.secondary' }}>
+            {remaining > 0 ? formatPrice(remaining) : '0,00 €'}
+          </Typography>
+        </Box>
+
+        {/* Status chip */}
+        <Box sx={{ width: 110, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+          {isPaid ? (
+            <Chip size="small" color="success" label="Bezahlt" sx={{ height: 22, fontWeight: 600, fontSize: '0.75rem' }} />
+          ) : isPartial ? (
+            <Chip size="small" color="warning" label="Teilbezahlt" sx={{ height: 22, fontWeight: 600, fontSize: '0.75rem' }} />
+          ) : (
+            <Chip size="small" color="error" variant="outlined" label="Offen" sx={{ height: 22, fontWeight: 600, fontSize: '0.75rem' }} />
+          )}
+        </Box>
+
+        {/* Payments count */}
+        <Box sx={{ width: 80, flexShrink: 0, textAlign: 'center' }}>
+          <Chip
+            size="small"
+            label={`${paymentsCount} ${paymentsCount === 1 ? 'Zahlung' : 'Zahlungen'}`}
+            sx={{
+              height: 22,
+              fontSize: '0.7rem',
+              fontWeight: 500,
+              bgcolor: paymentsCount > 0 ? 'action.selected' : 'action.hover',
+            }}
+          />
+        </Box>
+
+        <IconButton
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onOpen?.(order);
+          }}
+          sx={{ width: 36, height: 36, flexShrink: 0 }}
+        >
+          <ArrowForwardIosIcon sx={{ fontSize: 16 }} />
+        </IconButton>
+      </ListItemButton>
+    );
+  }
+}
+
+// MARK: <AddPaymentDialog/>
+class AddPaymentDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { order } = props;
+    const { remaining } = getOrderFinancials(order);
+    const accounts = accountAutomat.state.items || [];
+    const defaultAccount = accounts[0]?.id || 1;
+
+    this.state = {
+      accountId: defaultAccount,
+      type: 'transfer',
+      amount: remaining > 0 ? String(remaining) : '',
+      saving: false,
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  async handleSubmit() {
+    const { order, onClose, onSuccess } = this.props;
+    const { accountId, type, amount } = this.state;
+    const numAmount = Number(String(amount).replace(',', '.'));
+
+    if (!Number.isFinite(numAmount) || numAmount <= 0) {
+      enqueueSnackbar('Bitte einen gültigen Zahlungsbetrag größer 0 eingeben.', { variant: 'warning' });
+      return;
+    }
+
+    this.setState({ saving: true });
+    try {
+      await paymentApi.create(order.id, {
+        accountId: Number(accountId),
+        type,
+        amount: numAmount,
+      });
+      enqueueSnackbar('Zahlung erfolgreich verbucht!', { variant: 'success' });
+      await orderAutomat.actions.reload();
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      notifyError(err);
+      this.setState({ saving: false });
+    }
+  }
+
+  render() {
+    const { open, onClose, order } = this.props;
+    const { accountId, type, amount, saving } = this.state;
+    const accounts = accountAutomat.state.items || [];
+
+    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 }}>
+              Zahlung erfassen
+            </Typography>
+            <IconButton onClick={onClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Auftrag: <strong>{order?.number}</strong>
+          </Typography>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
+            <TextField
+              select
+              label="Konto / Kasse"
+              size="small"
+              value={accountId}
+              onChange={(e) => this.setState({ accountId: e.target.value })}
+            >
+              {accounts.length > 0 ? (
+                accounts.map((acc) => (
+                  <MenuItem key={acc.id} value={acc.id}>
+                    {acc.name} ({acc.type})
+                  </MenuItem>
+                ))
+              ) : (
+                <MenuItem value={1}>Standard-Bankkonto</MenuItem>
+              )}
+            </TextField>
+
+            <TextField
+              select
+              label="Zahlungsart"
+              size="small"
+              value={type}
+              onChange={(e) => this.setState({ type: e.target.value })}
+            >
+              {PAYMENT_TYPES.map((pt) => (
+                <MenuItem key={pt.value} value={pt.value}>
+                  {pt.label}
+                </MenuItem>
+              ))}
+            </TextField>
+
+            <TextField
+              label="Betrag (€)"
+              size="small"
+              type="number"
+              value={amount}
+              onChange={(e) => this.setState({ amount: e.target.value })}
+              inputProps={{ min: 0.01, step: 'any' }}
+            />
+          </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} startIcon={<PaymentsIcon />}>
+              {saving ? 'Wird verbucht…' : 'Zahlung buchen'}
+            </Button>
+          </Box>
+        </Box>
+      </AppDialog>
+    );
+  }
+}
+
+// MARK: <OrderPaymentDetailDialog/>
+class OrderPaymentDetailDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addPaymentOpen: false,
+      busyAction: false,
+    };
+    this.handleDeletePayment = this.handleDeletePayment.bind(this);
+  }
+
+  async handleDeletePayment(pay) {
+    if (!window.confirm(`Zahlung über ${formatPrice(pay.amount)} wirklich löschen?`)) return;
+    this.setState({ busyAction: true });
+    try {
+      await paymentApi.delete(pay.id);
+      enqueueSnackbar('Zahlung gelöscht.', { variant: 'success' });
+      await orderAutomat.actions.reload();
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busyAction: false });
+    }
+  }
+
+  render() {
+    const { open, onClose, orderId, partiesById } = this.props;
+    const { addPaymentOpen, busyAction } = this.state;
+
+    const order = orderAutomat.state.items?.find((o) => o.id === orderId);
+    if (!order) return null;
+
+    const party = partiesById[order.entityId];
+    const customerName = partyDisplayName('order', party) || `Kunde #${order.entityId}`;
+    const { total, paid, remaining } = getOrderFinancials(order);
+    const payments = Array.isArray(order.payments) ? order.payments : [];
+    const accounts = accountAutomat.state.items || [];
+    const accountsById = Object.fromEntries(accounts.map((a) => [a.id, a.name]));
+
+    return (
+      <AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+        <Box sx={{ p: 3 }}>
+          {/* Header */}
+          <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', pb: 2, borderBottom: '1px solid', borderColor: 'divider' }}>
+            <Box>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                <Typography variant="h5" sx={{ fontWeight: 700 }}>
+                  Zahlungen: {order.number}
+                </Typography>
+                {remaining === 0 ? (
+                  <Chip size="small" color="success" label="Vollständig bezahlt" sx={{ fontWeight: 600 }} />
+                ) : paid > 0 ? (
+                  <Chip size="small" color="warning" label={`Teilbezahlt (${formatPrice(paid)})`} sx={{ fontWeight: 600 }} />
+                ) : (
+                  <Chip size="small" color="error" variant="outlined" label="Unbezahlt" sx={{ fontWeight: 600 }} />
+                )}
+              </Box>
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                Kunde: <strong>{customerName}</strong> • Datum: {order.date ? formatDate(order.date) : '–'}
+              </Typography>
+            </Box>
+            <IconButton onClick={onClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+
+          {/* Quick Metrics Bar */}
+          <Box sx={{ display: 'flex', gap: 3, my: 2.5, p: 2, bgcolor: SURFACE_RAISED, borderRadius: 2 }}>
+            <Box>
+              <Typography variant="caption" color="text.secondary">Auftrags-Gesamtbetrag (Brutto)</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 700 }}>{formatPrice(total)}</Typography>
+            </Box>
+            <Divider orientation="vertical" flexItem />
+            <Box>
+              <Typography variant="caption" color="text.secondary">Bereits bezahlt</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 700, color: paid > 0 ? 'success.main' : 'text.primary' }}>
+                {formatPrice(paid)}
+              </Typography>
+            </Box>
+            <Divider orientation="vertical" flexItem />
+            <Box>
+              <Typography variant="caption" color="text.secondary">Offener Saldo</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 700, color: remaining > 0 ? 'error.main' : 'text.secondary' }}>
+                {formatPrice(remaining)}
+              </Typography>
+            </Box>
+            <Box sx={{ flex: 1 }} />
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => this.setState({ addPaymentOpen: true })}
+              disabled={busyAction}
+              sx={{ alignSelf: 'center', height: 40 }}
+            >
+              Zahlung buchen
+            </Button>
+          </Box>
+
+          {/* Payments list */}
+          <Typography variant="h6" sx={{ fontWeight: 600, mb: 1.5 }}>
+            Gebuchte Zahlungseingänge ({payments.length})
+          </Typography>
+
+          {payments.length === 0 ? (
+            <Box sx={{ p: 4, textAlign: 'center', bgcolor: SURFACE_BASE, borderRadius: 2, border: '1px dashed', borderColor: 'divider', mb: 3 }}>
+              <Typography variant="body1" color="text.secondary" sx={{ mb: 1.5 }}>
+                Bisher keine Zahlungen für diesen Auftrag erfasst.
+              </Typography>
+              <Button
+                variant="outlined"
+                startIcon={<AddIcon />}
+                onClick={() => this.setState({ addPaymentOpen: true })}
+              >
+                Erste Zahlung buchen
+              </Button>
+            </Box>
+          ) : (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 3 }}>
+              {payments.map((p) => {
+                const typeObj = PAYMENT_TYPES.find((pt) => pt.value === p.type);
+                const typeLabel = typeObj?.label || p.type;
+                const accountName = accountsById[p.accountId] || `Konto #${p.accountId}`;
+
+                return (
+                  <Box
+                    key={p.id}
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      p: 2,
+                      bgcolor: WHITE,
+                      borderRadius: 1.5,
+                      border: '1px solid',
+                      borderColor: 'divider',
+                      boxShadow: 1,
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                      <PaymentsIcon color="primary" />
+                      <Box>
+                        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                          {typeLabel}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {accountName}
+                        </Typography>
+                      </Box>
+                    </Box>
+
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                      <Typography variant="h6" sx={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: 'success.main' }}>
+                        +{formatPrice(p.amount)}
+                      </Typography>
+                      <IconButton
+                        size="small"
+                        color="error"
+                        disabled={busyAction}
+                        onClick={() => this.handleDeletePayment(p)}
+                        aria-label="Zahlung löschen"
+                      >
+                        <DeleteOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </Box>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', pt: 2, borderTop: '1px solid', borderColor: 'divider' }}>
+            <Button variant="outlined" onClick={onClose}>
+              Schließen
+            </Button>
+          </Box>
+        </Box>
+
+        {addPaymentOpen && (
+          <AddPaymentDialog
+            open={addPaymentOpen}
+            order={order}
+            onClose={() => this.setState({ addPaymentOpen: false })}
+          />
+        )}
+      </AppDialog>
+    );
+  }
+}
+
+// MARK: <OrderPaymentList/>
+export class OrderPaymentList 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 ?? [],
+      total: s.total ?? 0,
+      filter: '',
+      onlyUnpaid: true, // Default to unpaid
+      partiesById: {},
+      selectedOrderId: null,
+    };
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleOpenOrder = this.handleOpenOrder.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    this.unsub = orderAutomat.subscribe(this, (state) => ({
+      items: state.items ?? [],
+      total: state.total ?? 0,
+      status: state.status,
+      error: state.error ? backendErrorFrom(state.error) : null,
+    }));
+    if (orderAutomat.state.status === 'idle') {
+      void orderAutomat.actions.load().catch(() => {});
+    }
+    void accountAutomat.actions.ensureLoaded().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
+    }
+  }
+
+  handleRetry() {
+    void orderAutomat.actions.load().catch(() => {});
+  }
+
+  handleOpenOrder(order) {
+    this.setState({ selectedOrderId: order.id });
+  }
+
+  getFilteredOrders() {
+    const { items, filter, onlyUnpaid, partiesById } = this.state;
+    const q = filter.trim().toLowerCase();
+
+    return items.filter((order) => {
+      const { total, paid } = getOrderFinancials(order);
+      const isPaid = isOrderPaid(order) || (total > 0 && Math.abs(paid - total) < 0.01);
+      if (onlyUnpaid && isPaid) return false;
+
+      if (q) {
+        const party = partiesById[order.entityId];
+        const partyName = partyDisplayName('order', party);
+        const matches = [order.number, order.externalNumber, partyName]
+          .some((val) => String(val || '').toLowerCase().includes(q));
+        if (!matches) return false;
+      }
+      return true;
+    });
+  }
+
+  render() {
+    const { status, error, filter, onlyUnpaid, partiesById, selectedOrderId } = 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 filtered = this.getFilteredOrders();
+    rowContext.partiesById = partiesById;
+    rowContext.onOpen = this.handleOpenOrder;
+
+    return (
+      <>
+        <PanelTileGrid>
+          <Box
+            sx={{
+              gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1.25,
+              pb: 2,
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <SingleLineTextEdit
+                sx={{ flex: 1 }}
+                size="small"
+                search
+                clear
+                placeholder="Auftrag oder Kunde suchen…"
+                value={filter}
+                onChange={(next) => this.setState({ filter: next })}
+              />
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Box
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 1.5,
+                  px: 1.5,
+                  py: 0.25,
+                  borderRadius: 2,
+                  bgcolor: 'background.paper',
+                  boxShadow: 1,
+                }}
+              >
+                <FormControlLabel
+                  control={
+                    <Switch
+                      size="small"
+                      color="warning"
+                      checked={onlyUnpaid}
+                      onChange={(e) => this.setState({ onlyUnpaid: e.target.checked })}
+                    />
+                  }
+                  label={
+                    <Typography variant="body2" sx={{ fontWeight: onlyUnpaid ? 600 : 400, userSelect: 'none' }}>
+                      Nur unbezahlte Aufträge
+                    </Typography>
+                  }
+                  sx={{ m: 0 }}
+                />
+              </Box>
+
+              <Typography variant="caption" color="text.secondary">
+                {filtered.length} Auftrag / Aufträge zur Zahlungsüberwachung
+              </Typography>
+            </Box>
+          </Box>
+        </PanelTileGrid>
+
+        <PanelTileGrid>
+          <PanelTile wide={3} minHeight={0} color={YELLOW_PANEL} sx={{ pb: 0 }}>
+            <FillSpace
+              reserveBottom={32}
+              minPageSize={8}
+              minHeight={0}
+              items={filtered}
+              totalCount={filtered.length}
+              renderItem={OrderPaymentRow}
+              virtualScrollbar
+              header={
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 36,
+                    minHeight: 36,
+                    px: 2,
+                    gap: 1.5,
+                    borderBottom: '1px solid',
+                    borderColor: 'divider',
+                    color: 'text.secondary',
+                    typography: 'caption',
+                    fontWeight: 600,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.04em',
+                    userSelect: 'none',
+                  }}
+                >
+                  <Box sx={{ width: 130, flexShrink: 0 }}>Auftragsnr.</Box>
+                  <Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
+                  <Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
+                  <Box sx={{ width: 100, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box>
+                  <Box sx={{ width: 100, flexShrink: 0, textAlign: 'right' }}>Bezahlt</Box>
+                  <Box sx={{ width: 100, flexShrink: 0, textAlign: 'right' }}>Offen</Box>
+                  <Box sx={{ width: 110, flexShrink: 0, textAlign: 'center' }}>Status</Box>
+                  <Box sx={{ width: 80, flexShrink: 0, textAlign: 'center' }}>Zahlungen</Box>
+                  <Box sx={{ width: 36, flexShrink: 0 }} />
+                </Box>
+              }
+            />
+          </PanelTile>
+        </PanelTileGrid>
+
+        {selectedOrderId != null && (
+          <OrderPaymentDetailDialog
+            open={selectedOrderId != null}
+            orderId={selectedOrderId}
+            partiesById={partiesById}
+            onClose={() => this.setState({ selectedOrderId: null })}
+          />
+        )}
+      </>
+    );
+  }
+}
+
+export default withNavigate(OrderPaymentList);

src/components/manifest/index.js

@@ -1,6 +1,9 @@
 export { default as ManifestList } from './ManifestList';
 export { default as DeliveryList } from './DeliveryList';
 export { default as OrderList } from './OrderList';
+export { default as ShipmentList } from './ShipmentList';
+export { default as OrderPaymentList } from './OrderPaymentList';
+
 export { default as ManifestForm } from './ManifestForm';
 export { default as ManifestHeader } from './ManifestHeader';
 export { default as ManifestLines } from './ManifestLines';

src/nav.js

@@ -16,7 +16,9 @@ import AddBoxIcon from '@mui/icons-material/AddBox';
 import StorefrontIcon from '@mui/icons-material/Storefront';
 import RequestQuoteIcon from '@mui/icons-material/RequestQuote';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import PaymentsIcon from '@mui/icons-material/Payments';
 import LabelIcon from '@mui/icons-material/Label';
+
 import HistoryIcon from '@mui/icons-material/History';
 import PublicIcon from '@mui/icons-material/Public';
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -209,6 +211,20 @@ export const SUB_NAV = {
       icon: ShoppingCartIcon,
       help: 'Bestellungen prüfen, freigeben und kommissionieren',
     },
+    {
+      segment: 'ausliefern',
+      label: 'Ausliefern',
+      title: 'Ausliefern',
+      icon: LocalShippingIcon,
+      help: 'Auslieferungen und Lieferscheine (Shipments) verwalten und versenden',
+    },
+    {
+      segment: 'zahlungen',
+      label: 'Zahlungen',
+      title: 'Zahlungen',
+      icon: PaymentsIcon,
+      help: 'Zahlungseingänge erfassen und Auftragszahlungen überwachen',
+    },
   ],
   '/kunde': [
     {

src/routes/auftrag/ausliefern.jsx

@@ -0,0 +1,10 @@
+import { PureComponent } from 'react';
+import ShipmentList from '../../components/manifest/ShipmentList';
+
+class AuftragAusliefernPage extends PureComponent {
+  render() {
+    return <ShipmentList />;
+  }
+}
+
+export default AuftragAusliefernPage;

src/routes/auftrag/zahlungen.jsx

@@ -0,0 +1,10 @@
+import { PureComponent } from 'react';
+import OrderPaymentList from '../../components/manifest/OrderPaymentList';
+
+class AuftragZahlungenPage extends PureComponent {
+  render() {
+    return <OrderPaymentList />;
+  }
+}
+
+export default AuftragZahlungenPage;