u

src/components/manifest/ManifestForm.jsx

@@ -20,6 +20,7 @@ import entityAutomat from '../../automats/entityAutomat';
 import customergroupAutomat from '../../automats/customergroupAutomat';
 import supplierAutomat from '../../automats/supplierAutomat';
 import orderAutomat from '../../automats/orderAutomat';
+import retoureAutomat from '../../automats/retoureAutomat';
 import companyAutomat, { selectCompanyTaxrate } from '../../automats/companyAutomat';
 import warehouseAutomat from '../../automats/warehouseAutomat';
 import sseAutomat from '../../automats/sseAutomat';
@@ -46,6 +47,22 @@ import {
   getManifestEditAutomat,
 } from '../../automats/manifestDraftAutomat';
 
+export function computeDocGrossTotal(lines) {
+  if (!Array.isArray(lines)) return 0;
+  return lines.reduce((acc, line) => {
+    const amount = Number(line.amount ?? line.count) || 0;
+    if (line.gross != null && line.gross !== '') {
+      const g = Number(line.gross) || 0;
+      return acc + amount * g;
+    }
+    const net = Number(line.net ?? line.netprice ?? line.netPrice) || 0;
+    const tax = Number(line.tax ?? line.taxrate ?? line.taxRate) || 0;
+    const rebate = Number(line.rebate) || 0;
+    const lineNet = amount * net * (1 - rebate / 100);
+    return acc + lineNet * (1 + tax / 100);
+  }, 0);
+}
+
 class ManifestForm extends PureComponent {
   constructor(props) {
     super(props);
@@ -481,7 +498,7 @@ class ManifestForm extends PureComponent {
 
       let shipments = doc.shipments;
       let payments = doc.payments;
-      if (kind === 'order') {
+      if (kind === 'order' || kind === 'retoure') {
         if (!shipments) {
           try {
             const shRes = await shipmentApi.listByOrder(docId);
@@ -512,6 +529,10 @@ class ManifestForm extends PureComponent {
         }
       }
 
+      const linesGross = computeDocGrossTotal(lines);
+      const computedOrderTotal = doc.orderTotal ?? doc.grossTotal ?? doc.gross_total ?? (linesGross !== 0 ? linesGross : null);
+      const computedPaidTotal = doc.paidTotal ?? doc.paid_total ?? (Array.isArray(payments) && payments.length > 0 ? payments.reduce((acc, p) => acc + (Number(p.amount) || 0), 0) : null);
+
       const loadedDoc = {
         date: dateInputValue(doc.date),
         createdAt: doc.createdAt ?? doc.created_at ?? null,
@@ -524,11 +545,11 @@ class ManifestForm extends PureComponent {
         shipments: shipments || [],
         payments: payments || [],
         shippings: doc.shippings || [],
-        orderTotal: doc.orderTotal ?? null,
-        paidTotal: doc.paidTotal ?? null,
-        paid: Boolean(doc.paid),
-        shipped: Boolean(doc.shipped),
-        isShipped: Boolean(doc.isShipped ?? doc.shipped),
+        orderTotal: computedOrderTotal,
+        paidTotal: computedPaidTotal,
+        paid: Boolean(doc.paid ?? doc.isPaid ?? doc.is_paid),
+        shipped: Boolean(doc.shipped ?? doc.isShipped ?? doc.is_shipped),
+        isShipped: Boolean(doc.isShipped ?? doc.shipped ?? doc.is_shipped),
         delivered: Boolean(doc.delivered),
       };
 
@@ -1211,7 +1232,11 @@ class ManifestForm extends PureComponent {
 
   async handleShipmentCreated() {
     await this.loadEdit();
-    void orderAutomat.actions.reload();
+    if (this.props.kind === 'retoure') {
+      void retoureAutomat.actions.reload();
+    } else {
+      void orderAutomat.actions.reload();
+    }
   }
 
   async handleAttachmentDelete(attachment) {
@@ -1315,12 +1340,21 @@ class ManifestForm extends PureComponent {
         attachments: this.state.attachments,
       };
 
+      const linesGross = computeDocGrossTotal(savedDoc.lines);
+      const savedDocWithTotals = {
+        ...savedDoc,
+        orderTotal: doc.orderTotal ?? doc.grossTotal ?? doc.gross_total ?? this.state.orderTotal ?? (linesGross !== 0 ? linesGross : null),
+        paidTotal: doc.paidTotal ?? doc.paid_total ?? this.state.paidTotal ?? null,
+        shipments: this.state.shipments,
+        payments: this.state.payments,
+      };
+
       if (this.editAutomat && String(this.editAutomat.state.id) === String(docId)) {
-        this.editAutomat.actions.commitSaved(savedDoc);
+        this.editAutomat.actions.commitSaved(savedDocWithTotals);
       }
 
       this.setState({
-        ...savedDoc,
+        ...savedDocWithTotals,
         isDirty: false,
         dirtyFields: null,
         dirtyLineKeys: [],
@@ -1430,8 +1464,8 @@ class ManifestForm extends PureComponent {
             onPdfDelete={this.handleAttachmentDelete}
             onPdfCreate={kind === 'quote' || kind === 'order' ? this.handleCreatePdf : undefined}
             onCreateOrder={kind === 'quote' && this.props.mode === 'edit' ? this.handleCreateOrder : undefined}
-            onOpenCreateShipment={kind === 'order' && this.props.mode === 'edit' ? this.handleOpenCreateShipment : undefined}
-            deliverDisabled={kind === 'order' && this.isFullyDelivered()}
+            onOpenCreateShipment={(kind === 'order' || kind === 'retoure') && this.props.mode === 'edit' ? this.handleOpenCreateShipment : undefined}
+            deliverDisabled={(kind === 'order' || kind === 'retoure') && this.isFullyDelivered()}
             onSave={this.handleSave}
             onPartyChange={this.handlePartyChange}
             onDateChange={this.handleDateChange}
@@ -1439,13 +1473,24 @@ class ManifestForm extends PureComponent {
             onExternalNumberChange={this.handleExternalNumberChange}
           />
           {status === 'ready' ? this.renderArticles() : null}
-          {status === 'ready' && kind === 'order' && this.props.mode === 'edit' ? (
+          {status === 'ready' && (kind === 'order' || kind === 'retoure') && this.props.mode === 'edit' ? (
             <OrderDocumentsTiles
+              kind={kind}
               orderId={this.props.docId}
               orderNumber={number}
               externalNumber={externalNumber}
-              orderTotal={this.state.orderTotal}
-              paidTotal={this.state.paidTotal}
+              orderTotal={
+                this.state.orderTotal != null && Number(this.state.orderTotal) !== 0
+                  ? this.state.orderTotal
+                  : computeDocGrossTotal(this.state.lines)
+              }
+              paidTotal={
+                this.state.paidTotal != null
+                  ? this.state.paidTotal
+                  : (Array.isArray(this.state.payments) && this.state.payments.length > 0
+                      ? this.state.payments.reduce((acc, p) => acc + (Number(p.amount) || 0), 0)
+                      : 0)
+              }
               paid={this.state.paid}
               shipped={this.state.shipped}
               delivered={this.state.delivered}
@@ -1482,6 +1527,7 @@ class ManifestForm extends PureComponent {
         <OrderShipmentDialog
           open={this.state.shipmentDialogOpen}
           onClose={this.handleCloseShipmentDialog}
+          kind={kind}
           orderId={this.props.docId}
           orderNumber={number}
           externalNumber={externalNumber}

src/components/manifest/ManifestLines.jsx

@@ -259,7 +259,7 @@ class ManifestLines extends PureComponent {
                 </Button>
               );
             })()}
-            {(totalNet > 0 || totalGross > 0) && (
+            {(totalNet !== 0 || totalGross !== 0) && (
               <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 2, pr: 0.5 }}>
                 <Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 600, fontSize: '0.8rem' }}>
                   Netto:{' '}

src/components/manifest/OrderDocumentsTiles.jsx

@@ -11,10 +11,19 @@ import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined
 import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
 import AddIcon from '@mui/icons-material/Add';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { enqueueSnackbar } from 'notistack';
 import { PanelTile } from 'dashgui/panels';
-import { formatDate, formatDateTime } from './manifestConfig';
+import AppDialog from '../AppDialog';
+import { payment as paymentApi } from '../../api';
+import { notifyError } from '../../utils/notify';
+import { formatDate, formatDateTime, todayInputValue } from './manifestConfig';
 import { formatPrice } from '../../utils/price';
-import { typeLabel, typeIcon } from './OrderPaymentList';
+import { typeLabel, typeIcon, PAYMENT_TYPES } from './OrderPaymentList';
 import ShipmentDetailDialog from './ShipmentDetailDialog';
 import {
   GREEN_PANEL,
@@ -23,19 +32,81 @@ import {
 } from '../../colors';
 
 /**
- * Renders 1-wide associated document tiles for an order in edit mode:
+ * Renders 1-wide associated document tiles for an order or retoure in edit mode:
  * 1. Lieferscheine / Auslieferungen (Shipments)
- * 2. Zahlungen (Payments)
+ * 2. Zahlungen / Erstattungen (Payments)
  */
 export class OrderDocumentsTiles extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       selectedShipment: null,
+      paymentDialogOpen: false,
+      paymentAmount: '',
+      paymentType: 'cash',
+      paymentDate: todayInputValue(),
+      paymentSaving: false,
     };
     this.handleOpenShipment = this.handleOpenShipment.bind(this);
     this.handleCloseShipment = this.handleCloseShipment.bind(this);
     this.handleOpenPayments = this.handleOpenPayments.bind(this);
+    this.handleOpenPaymentDialog = this.handleOpenPaymentDialog.bind(this);
+    this.handleClosePaymentDialog = this.handleClosePaymentDialog.bind(this);
+    this.handleSubmitPayment = this.handleSubmitPayment.bind(this);
+  }
+
+  handleOpenPaymentDialog() {
+    const { orderTotal, paidTotal, kind } = this.props;
+    const tot = Number(orderTotal) || 0;
+    const pd = Number(paidTotal) || 0;
+    const absTot = Math.abs(tot);
+    const absPd = Math.abs(pd);
+    const isPaid = Boolean(this.props.paid || (absTot > 0 && absPd >= absTot - 0.005));
+    const remaining = isPaid ? 0 : Math.max(0, absTot - absPd);
+    const defaultAmount = remaining > 0
+      ? (kind === 'retoure' || tot < 0 ? -remaining : remaining)
+      : '';
+    this.setState({
+      paymentDialogOpen: true,
+      paymentAmount: defaultAmount !== '' ? String(Math.round(defaultAmount * 100) / 100) : '',
+      paymentType: 'cash',
+      paymentDate: todayInputValue(),
+    });
+  }
+
+  handleClosePaymentDialog() {
+    this.setState({ paymentDialogOpen: false, paymentSaving: false });
+  }
+
+  async handleSubmitPayment(e) {
+    e?.preventDefault?.();
+    const { orderId, onShipmentChanged } = this.props;
+    const { paymentAmount, paymentType, paymentDate, paymentSaving } = this.state;
+    if (paymentSaving || !orderId) return;
+
+    const amt = Number(String(paymentAmount).replace(',', '.'));
+    if (Number.isNaN(amt) || amt === 0) {
+      enqueueSnackbar('Bitte einen gültigen Betrag ungleich 0 eingeben.', { variant: 'warning' });
+      return;
+    }
+
+    this.setState({ paymentSaving: true });
+    try {
+      await paymentApi.create({
+        manifestId: orderId,
+        amount: amt,
+        type: paymentType,
+        date: paymentDate || undefined,
+      });
+      enqueueSnackbar(amt < 0 ? 'Erstattung erfolgreich gebucht!' : 'Zahlung erfolgreich erfasst!', {
+        variant: 'success',
+      });
+      this.handleClosePaymentDialog();
+      onShipmentChanged?.();
+    } catch (err) {
+      notifyError(err);
+      this.setState({ paymentSaving: false });
+    }
   }
 
   handleOpenShipment(sh) {
@@ -163,31 +234,53 @@ export class OrderDocumentsTiles extends PureComponent {
   }
 
   renderPaymentsTile() {
-    const { payments = [], paid, paidTotal, orderTotal } = this.props;
+    const { payments = [], paid, paidTotal, orderTotal, kind } = this.props;
+    const isRetoure = kind === 'retoure';
 
     const tot = Number(orderTotal) || 0;
     const pd = Number(paidTotal) || 0;
-    const openAmount = Math.max(0, tot - pd);
+    const absTot = Math.abs(tot);
+    const absPd = Math.abs(pd);
+    const isPaid = Boolean(paid || (absTot > 0 && absPd >= absTot - 0.005));
 
-    const isPaid = Boolean(paid || tot <= 0 || (tot > 0 && pd >= tot));
-    const statusLabel = isPaid ? 'Bezahlt' : pd > 0 ? 'Teilzahlung' : 'Offen';
-    const statusColor = isPaid ? 'success' : pd > 0 ? 'warning' : 'error';
+    let openAmount = 0;
+    if (!isPaid) {
+      const remaining = Math.max(0, absTot - absPd);
+      openAmount = tot < 0 ? -remaining : remaining;
+    }
+
+    const statusLabel = isPaid
+      ? (isRetoure ? 'Erstattet' : 'Bezahlt')
+      : Math.abs(pd) > 0
+      ? 'Teilzahlung'
+      : 'Offen';
+    const statusColor = isPaid ? 'success' : Math.abs(pd) > 0 ? 'warning' : 'error';
 
     return (
-      <PanelTile wide={1} minHeight={220} color={YELLOW_PANEL} title="Zahlungen">
+      <PanelTile wide={1} minHeight={220} color={YELLOW_PANEL} title={isRetoure ? 'Erstattungen / Zahlungen' : 'Zahlungen'}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
           <Stack direction="row" spacing={0.75} sx={{ alignItems: 'center' }}>
             <PaymentsOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
             <Chip size="small" label={statusLabel} color={statusColor} sx={{ fontWeight: 600, height: 22 }} />
           </Stack>
-          <Button
-            size="small"
-            variant="outlined"
-            onClick={this.handleOpenPayments}
-            sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
-          >
-            Zahlungen
-          </Button>
+          <Box sx={{ display: 'flex', gap: 0.5 }}>
+            <Button
+              size="small"
+              variant="contained"
+              onClick={this.handleOpenPaymentDialog}
+              sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
+            >
+              {isRetoure ? '+ Erstattung' : '+ Zahlung'}
+            </Button>
+            <Button
+              size="small"
+              variant="outlined"
+              onClick={this.handleOpenPayments}
+              sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
+            >
+              Journal
+            </Button>
+          </Box>
         </Box>
 
         {/* Financial KPI Card */}
@@ -203,7 +296,7 @@ export class OrderDocumentsTiles extends PureComponent {
         >
           <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
             <Typography variant="caption" color="text.secondary">
-              Summe:
+              {isRetoure ? 'Gutschrift / Summe:' : 'Summe:'}
             </Typography>
             <Typography variant="caption" sx={{ fontWeight: 700 }}>
               {formatPrice(tot)}
@@ -211,7 +304,7 @@ export class OrderDocumentsTiles extends PureComponent {
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
             <Typography variant="caption" color="text.secondary">
-              Bezahlt:
+              {isRetoure ? 'Erstattet:' : 'Bezahlt:'}
             </Typography>
             <Typography variant="caption" sx={{ fontWeight: 700, color: 'success.main' }}>
               {formatPrice(pd)}
@@ -222,7 +315,7 @@ export class OrderDocumentsTiles extends PureComponent {
             <Typography variant="caption" color="text.secondary">
               Offen:
             </Typography>
-            <Typography variant="caption" sx={{ fontWeight: 700, color: openAmount > 0 ? 'error.main' : 'text.secondary' }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: openAmount !== 0 ? 'error.main' : 'text.secondary' }}>
               {formatPrice(openAmount)}
             </Typography>
           </Box>
@@ -233,6 +326,8 @@ export class OrderDocumentsTiles extends PureComponent {
             {payments.map((pay) => {
               const pType = pay.type || pay.paymentType || pay.payment_type;
               const payDate = pay.date || pay.createdAt || pay.created_at || pay.timestamp;
+              const pAmt = Number(pay.amount) || 0;
+              const isRefund = pAmt < 0;
               return (
                 <Card
                   key={pay.id}
@@ -261,9 +356,15 @@ export class OrderDocumentsTiles extends PureComponent {
 
                     <Typography
                       variant="subtitle2"
-                      sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums', flexShrink: 0, ml: 1 }}
+                      sx={{
+                        fontWeight: 700,
+                        color: isRefund ? 'error.main' : 'success.dark',
+                        fontVariantNumeric: 'tabular-nums',
+                        flexShrink: 0,
+                        ml: 1,
+                      }}
                     >
-                      +{formatPrice(pay.amount)}
+                      {isRefund ? formatPrice(pAmt) : `+${formatPrice(pAmt)}`}
                     </Typography>
                   </Box>
 
@@ -289,6 +390,9 @@ export class OrderDocumentsTiles extends PureComponent {
   }
 
   render() {
+    const { kind } = this.props;
+    const isRetoure = kind === 'retoure';
+
     return (
       <>
         {this.renderShipmentsTile()}
@@ -300,6 +404,56 @@ export class OrderDocumentsTiles extends PureComponent {
           onNavigate={this.props.navigate}
           onChanged={this.props.onShipmentChanged}
         />
+        <AppDialog
+          open={this.state.paymentDialogOpen}
+          onClose={this.handleClosePaymentDialog}
+          title={isRetoure ? 'Erstattung buchen' : 'Zahlung erfassen'}
+        >
+          <Box component="form" onSubmit={this.handleSubmitPayment} sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <TextField
+              label="Betrag (€)"
+              type="text"
+              autoFocus
+              value={this.state.paymentAmount}
+              onChange={(e) => this.setState({ paymentAmount: e.target.value })}
+              helperText={isRetoure ? 'Negative Beträge für Gutschrift/Erstattung (z.B. -50.00)' : 'Zahlungsbetrag'}
+              fullWidth
+              required
+            />
+            <TextField
+              select
+              label="Zahlungsart"
+              value={this.state.paymentType}
+              onChange={(e) => this.setState({ paymentType: e.target.value })}
+              fullWidth
+            >
+              {PAYMENT_TYPES.map((t) => (
+                <MenuItem key={t.value} value={t.value}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {typeIcon(t.value, { fontSize: 18 })}
+                    <span>{t.label}</span>
+                  </Box>
+                </MenuItem>
+              ))}
+            </TextField>
+            <TextField
+              label="Datum"
+              type="date"
+              value={this.state.paymentDate}
+              onChange={(e) => this.setState({ paymentDate: e.target.value })}
+              slotProps={{ inputLabel: { shrink: true } }}
+              fullWidth
+            />
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
+              <Button onClick={this.handleClosePaymentDialog} disabled={this.state.paymentSaving}>
+                Abbrechen
+              </Button>
+              <Button type="submit" variant="contained" disabled={this.state.paymentSaving}>
+                {this.state.paymentSaving ? 'Bucht…' : 'Buchen'}
+              </Button>
+            </Box>
+          </Box>
+        </AppDialog>
       </>
     );
   }

src/components/manifest/OrderShipmentDialog.jsx

@@ -23,7 +23,7 @@ import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import { enqueueSnackbar } from 'notistack';
 import AppDialog from '../AppDialog';
-import { order as orderApi } from '../../api';
+import { order as orderApi, retoure as retoureApi } from '../../api';
 import { notifyError } from '../../utils/notify';
 import { formatStock } from '../article/searchFormat';
 import artikelAutomat, { getArticle } from '../../automats/artikelAutomat';
@@ -364,7 +364,9 @@ export default class OrderShipmentDialog extends PureComponent {
         lines: linesToShip,
       };
 
-      const res = await orderApi.createShipment(orderId, payload);
+      const res = this.props.kind === 'retoure'
+        ? await retoureApi.createShipment(orderId, payload)
+        : await orderApi.createShipment(orderId, payload);
       const shipment = res?.shipment;
       const shNum = shipment?.number || '';
 
@@ -380,7 +382,7 @@ export default class OrderShipmentDialog extends PureComponent {
       this.setState({ saving: false, error: err?.message || String(err) });
     }
   }
-  //   // MARK: calls orderApi.createShipment to ship all remaining lines
+  //   // MARK: calls orderApi/retoureApi.createShipment to ship all remaining lines
   // #region POST /api/order/:id/shipment — ship all remaining
   async handleShipAll() {
     const { orderId, onClose, onSuccess } = this.props;
@@ -394,7 +396,9 @@ export default class OrderShipmentDialog extends PureComponent {
         externalNumber: externalNumber.trim() || undefined,
       };
 
-      const res = await orderApi.createShipment(orderId, payload);
+      const res = this.props.kind === 'retoure'
+        ? await retoureApi.createShipment(orderId, payload)
+        : await orderApi.createShipment(orderId, payload);
       const shipment = res?.shipment;
       const shNum = shipment?.number || '';
 

src/components/manifest/RetoureList.jsx

@@ -0,0 +1,852 @@
+import { PureComponent, createRef } 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 Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import Switch from '@mui/material/Switch';
+import Skeleton from '@mui/material/Skeleton';
+import Tooltip from '@mui/material/Tooltip';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
+import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
+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 retoureAutomat, {
+  CHUNK_SIZE,
+  isRetourePaid,
+  isRetoureShipped,
+} from '../../automats/retoureAutomat';
+import numberAutomat from '../../automats/numberAutomat';
+import { retoure as retoureApi } from '../../api';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+import { formatPrice } from '../../utils/price';
+import { getMaxDocumentNumber } from '../../utils/documentNumber';
+import PartyFilterPanel, { PartyFilterButton, PartyFilterChip } from './PartyFilterPanel';
+import withNavigate from '../withNavigate';
+import {
+  formatDate,
+  loadParties,
+  manifestConfig,
+  numberDisplay,
+  partyDisplayName,
+} from './manifestConfig';
+
+// MARK: pure helpers
+function retoureGrossTotal(lines) {
+  if (!Array.isArray(lines)) return 0;
+  return 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);
+}
+
+const cfg = manifestConfig('retoure');
+
+// Dummy retoure generator using the active sequence scheme with max digits for layout testing
+export function createDummyTestRetoure() {
+  const maxNumber = getMaxDocumentNumber('retoure');
+  return {
+    id: 999999,
+    number: maxNumber,
+    externalNumber: 'REF-999999',
+    date: '2030-10-30T12:00:00Z',
+    customerName: 'Kunde',
+    positions: 999,
+    grossTotal: -30000.90,
+  };
+}
+
+const rowGridSx = {
+  display: 'grid',
+  gridTemplateColumns: 'max-content max-content 1fr max-content max-content max-content max-content auto',
+  gridTemplateRows: '0px 1fr',
+  rowGap: 0,
+  columnGap: 1.5,
+  alignItems: 'center',
+  width: '100%',
+  boxSizing: 'border-box',
+};
+
+const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+
+const measuringCellSx = {
+  visibility: 'hidden',
+  height: 0,
+  boxSizing: 'border-box',
+  pointerEvents: 'none',
+  textTransform: 'none',
+  letterSpacing: 'normal',
+};
+
+const headerCellSx = {
+  color: 'text.secondary',
+  typography: 'caption',
+  fontWeight: 600,
+  textTransform: 'uppercase',
+  letterSpacing: '0.04em',
+  userSelect: 'none',
+};
+
+function renderInvisibleDummyRow(dummy) {
+  const d = dummy || createDummyTestRetoure();
+  return (
+    <>
+      <Box aria-hidden sx={{ gridColumn: 1, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
+        <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>{d.number}</Typography>
+        <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>{d.externalNumber || 'Nr. / Ref.'}</Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 2, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
+        <Typography variant="body2">{d.date ? formatDate(d.date) : '–'}</Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 3, gridRow: 1, whiteSpace: 'nowrap', ...measuringCellSx }}>
+        <Typography variant="body1">{d.customerName}</Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 4, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
+        <Checkbox size="small" sx={{ p: 0.5 }} />
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 5, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
+        <Checkbox size="small" sx={{ p: 0.5 }} />
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 6, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
+        <Chip size="small" label={d.positions} sx={{ height: 24, '& .MuiChip-label': { px: 0.5 } }} />
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 7, gridRow: 1, whiteSpace: 'nowrap', display: 'flex', justifyContent: 'flex-end', ...measuringCellSx }}>
+        <Typography variant="body2" sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
+          {formatPrice(d.grossTotal)}
+        </Typography>
+      </Box>
+      <Box aria-hidden sx={{ gridColumn: 8, gridRow: 1, display: 'flex', justifyContent: 'center', ...measuringCellSx }}>
+        <IconButton sx={{ width: 40, height: 40 }} />
+      </Box>
+    </>
+  );
+}
+
+/**
+ * Ambient context for `RetoureRow`: FillSpace renders rows as bare elements
+ * (`<Row item index />`), so the list publishes callbacks and the party map
+ * here on every render.
+ */
+const rowContext = {
+  partiesById: {},
+  busyId: null,
+  onOpen: null,
+  onDelete: null,
+  onTogglePaid: null,
+  onToggleShipped: null,
+  headerItem: null,
+};
+
+// MARK: <RetoureRow/>
+class RetoureRow extends PureComponent {
+  partyName(partyId, fallbackName) {
+    if (partyId == null) return fallbackName || '–';
+    const party = rowContext.partiesById[partyId];
+    return partyDisplayName('retoure', party) || fallbackName || `Kunde #${partyId}`;
+  }
+
+  render() {
+    const { item: retoure, disabled } = this.props;
+    const dummy = this.props.headerItem || rowContext.headerItem;
+
+    // Data-free probe (FillSpace measures the row height with `item` undefined).
+    if (!retoure) {
+      if (disabled) {
+        return (
+          <ListItemButton disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0, opacity: 0, pointerEvents: 'none' }}>
+            <Typography variant="body2">&nbsp;</Typography>
+          </ListItemButton>
+        );
+      }
+      return (
+        <ListItemButton disabled divider sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }}>
+          {renderInvisibleDummyRow(dummy)}
+          <Box sx={{ gridColumn: 1, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box>
+          <Box sx={{ gridColumn: 2, gridRow: 2 }}><Skeleton variant="text" width="90%" height={20} /></Box>
+          <Box sx={{ gridColumn: 3, gridRow: 2 }}><Skeleton variant="text" width="60%" height={20} /></Box>
+          <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="circular" width={20} height={20} /></Box>
+          <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="circular" width={20} height={20} /></Box>
+          <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center' }}><Skeleton variant="rounded" width={28} height={20} /></Box>
+          <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}><Skeleton variant="text" width="80%" height={20} /></Box>
+          <Box sx={{ gridColumn: 8, gridRow: 2 }} />
+        </ListItemButton>
+      );
+    }
+
+    const { busyId, onOpen, onDelete, onTogglePaid, onToggleShipped } = rowContext;
+    const lines = retoure.lines ?? [];
+    const positions = retoure.positions ?? lines.length;
+    const gross = retoure.gross_total ?? retoure.grossTotal ?? (lines.length > 0 ? retoureGrossTotal(lines) : 0);
+    const paid = isRetourePaid(retoure);
+    const shipped = isRetoureShipped(retoure);
+    const num = retoure.number ?? retoure.retoure_number ?? `RET-${retoure.id}`;
+    const dt = retoure.date ?? retoure.retoure_date;
+    const entityId = retoure.entityId ?? retoure.entity_id;
+    const customer = this.partyName(entityId, retoure.customerName ?? retoure.customer_name);
+
+    return (
+      <ListItemButton
+        divider
+        sx={{ ...rowGridSx, height: 64, minHeight: 64, maxHeight: 64, px: 2, py: 0 }}
+        onClick={disabled ? undefined : () => onOpen?.(retoure)}
+        disabled={disabled}
+      >
+        {renderInvisibleDummyRow(dummy)}
+
+        <Box sx={{ gridColumn: 1, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace', ...ellipsisSx }}>
+            {num}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace', ...ellipsisSx }}>
+            {numberDisplay(retoure.externalNumber)}
+          </Typography>
+        </Box>
+
+        <Box sx={{ gridColumn: 2, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+            {dt ? formatDate(dt) : '–'}
+          </Typography>
+        </Box>
+
+        <Box sx={{ gridColumn: 3, gridRow: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
+            {customer}
+          </Typography>
+        </Box>
+
+        <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <Checkbox
+            size="small"
+            checked={paid}
+            color="success"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => onTogglePaid?.(retoure, e.target.checked)}
+            slotProps={{ input: { 'aria-label': `Retoure ${num} bezahlt` } }}
+            sx={{ p: 0.5 }}
+          />
+        </Box>
+
+        <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <Checkbox
+            size="small"
+            checked={shipped}
+            color="primary"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => onToggleShipped?.(retoure, e.target.checked)}
+            slotProps={{ input: { 'aria-label': `Retoure ${num} geliefert` } }}
+            sx={{ p: 0.5 }}
+          />
+        </Box>
+
+        <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <Chip
+            size="small"
+            label={positions}
+            title={`${positions} Positionen`}
+            sx={{
+              height: 24,
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              fontVariantNumeric: 'tabular-nums',
+              bgcolor: 'action.hover',
+              color: positions > 0 ? 'text.primary' : 'text.disabled',
+              '& .MuiChip-label': { px: 0.5 },
+            }}
+          />
+        </Box>
+
+        <Box sx={{ gridColumn: 7, gridRow: 2, display: 'flex', justifyContent: 'flex-end' }}>
+          <Typography
+            variant="body2"
+            sx={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums', textAlign: 'right', whiteSpace: 'nowrap' }}
+          >
+            {gross !== 0 ? formatPrice(gross) : '—'}
+          </Typography>
+        </Box>
+
+        <Box sx={{ gridColumn: 8, gridRow: 2, display: 'flex', justifyContent: 'center' }}>
+          <IconButton
+            aria-label={`„${num}“ löschen`}
+            disabled={busyId != null || disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete?.(retoure);
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            sx={{ width: 40, height: 40 }}
+          >
+            <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+          </IconButton>
+        </Box>
+      </ListItemButton>
+    );
+  }
+}
+
+// MARK: <RetoureSearchField/>
+class RetoureSearchField extends PureComponent {
+  constructor(props) {
+    super(props);
+    const s = retoureAutomat.state;
+    const stats = retoureAutomat.getChunkStats?.();
+    this.state = {
+      input: s.filter ?? '',
+      onlyUnpaid: s.onlyUnpaid ?? false,
+      onlyUndelivered: s.onlyUndelivered ?? false,
+      seekMonths: s.seekMonths ?? 0,
+      seekYears: s.seekYears ?? 0,
+      negativeSeekMonths: s.negativeSeekMonths ?? 0,
+      lruChunksCount: stats?.lruChunksCount || 0,
+      maxLruChunks: stats?.maxLruChunks || 50,
+      filterCachesCount: stats?.filterCaches?.length || 1,
+    };
+  }
+
+  componentDidMount() {
+    this.unsub = retoureAutomat.subscribe(this, (state) => ({
+      input: state.filter ?? '',
+      onlyUnpaid: state.onlyUnpaid ?? false,
+      onlyUndelivered: state.onlyUndelivered ?? false,
+      seekMonths: state.seekMonths ?? 0,
+      seekYears: state.seekYears ?? 0,
+      negativeSeekMonths: state.negativeSeekMonths ?? 0,
+    }));
+    if (import.meta.env.DEV) {
+      this.unsubStats = retoureAutomat.subscribeChunkStats?.((stats) => {
+        this.setState({
+          lruChunksCount: stats.lruChunksCount,
+          maxLruChunks: stats.maxLruChunks,
+          filterCachesCount: stats.filterCaches?.length || 1,
+        });
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+    this.unsubStats?.();
+  }
+
+  render() {
+    const {
+      inputRef,
+      onCreate,
+      customerFilterOpen,
+      onToggleCustomerFilter,
+      selectedCustomer,
+      onClearCustomerFilter,
+    } = this.props;
+    const { input, onlyUnpaid, onlyUndelivered, seekMonths, seekYears } = this.state;
+    const monthActive = seekMonths > 0;
+    const monthLabel = !monthActive ? '-1 Month' : `-${seekMonths} Month${seekMonths > 1 ? 's' : ''}`;
+    const yearActive = seekYears > 0;
+    const yearLabel = !yearActive ? '-1 Year' : `-${seekYears} Year${seekYears > 1 ? 's' : ''}`;
+
+    return (
+      <PanelTileGrid>
+        <Box
+          ref={inputRef}
+          sx={{
+            gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.25,
+            pb: 2,
+          }}
+        >
+          {/* Top row: search field, customer filter button, active chip & create button */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              flexWrap: 'wrap',
+            }}
+          >
+            <SingleLineTextEdit
+              sx={{ flex: 1, minWidth: { xs: '100%', sm: 220 } }}
+              size="small"
+              search
+              clear
+              value={input}
+              onChange={(next) => retoureAutomat.actions.filter(next)}
+            />
+            <PartyFilterButton
+              title="Kunden"
+              open={customerFilterOpen}
+              onClick={onToggleCustomerFilter}
+            />
+            {selectedCustomer && (
+              <PartyFilterChip
+                label={partyDisplayName('retoure', selectedCustomer)}
+                onDelete={onClearCustomerFilter}
+              />
+            )}
+            <Button variant="contained" onClick={onCreate}>
+              {cfg.createButton}
+            </Button>
+          </Box>
+
+          {/* Filter Bar: "Nur ungezahlte", "Nur ungelieferte", Negativeseek (-1 Month, -1 Year, Reset) */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexWrap: 'wrap',
+              gap: 1.5,
+            }}
+          >
+            {/* Left: Unpaid & Undelivered toggles */}
+            <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) => retoureAutomat.actions.setOnlyUnpaid(e.target.checked)}
+                  />
+                }
+                label={
+                  <Typography variant="body2" sx={{ fontWeight: onlyUnpaid ? 600 : 400, userSelect: 'none' }}>
+                    Nur unerstattete
+                  </Typography>
+                }
+                sx={{ m: 0 }}
+              />
+
+              <Divider orientation="vertical" flexItem sx={{ my: 0.5 }} />
+
+              <FormControlLabel
+                control={
+                  <Switch
+                    size="small"
+                    color="primary"
+                    checked={onlyUndelivered}
+                    onChange={(e) => retoureAutomat.actions.setOnlyUndelivered(e.target.checked)}
+                  />
+                }
+                label={
+                  <Typography variant="body2" sx={{ fontWeight: onlyUndelivered ? 600 : 400, userSelect: 'none' }}>
+                    Nur offene
+                  </Typography>
+                }
+                sx={{ m: 0 }}
+              />
+            </Box>
+
+            {/* Right: Negativeseek controls (-1 Month, -1 Year, Reset) */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+              <Box
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 0.75,
+                  px: 1.25,
+                  py: 0.25,
+                  borderRadius: 2,
+                  bgcolor: 'background.paper',
+                  boxShadow: 1,
+                }}
+              >
+                <Button
+                  size="small"
+                  variant={monthActive ? 'contained' : 'outlined'}
+                  color={monthActive ? 'primary' : 'inherit'}
+                  onClick={() => retoureAutomat.actions.addSeekMonth()}
+                  sx={{
+                    minWidth: 88,
+                    px: 1.25,
+                    py: 0.25,
+                    height: 28,
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    textTransform: 'none',
+                    boxSizing: 'border-box',
+                    border: '1px solid',
+                    borderColor: monthActive ? 'primary.main' : 'divider',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {monthLabel}
+                </Button>
+
+                <Button
+                  size="small"
+                  variant={yearActive ? 'contained' : 'outlined'}
+                  color={yearActive ? 'primary' : 'inherit'}
+                  onClick={() => retoureAutomat.actions.addSeekYear()}
+                  sx={{
+                    minWidth: 78,
+                    px: 1.25,
+                    py: 0.25,
+                    height: 28,
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    textTransform: 'none',
+                    boxSizing: 'border-box',
+                    border: '1px solid',
+                    borderColor: yearActive ? 'primary.main' : 'divider',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {yearLabel}
+                </Button>
+
+                <Button
+                  size="small"
+                  variant="text"
+                  color="inherit"
+                  disabled={!monthActive && !yearActive}
+                  onClick={() => retoureAutomat.actions.resetNegativeSeek()}
+                  sx={{
+                    minWidth: 'auto',
+                    px: 1,
+                    py: 0.25,
+                    height: 28,
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    textTransform: 'none',
+                  }}
+                >
+                  Reset
+                </Button>
+              </Box>
+
+              {import.meta.env.DEV && (
+                <Tooltip title={`Chunk-Cache-Monitor öffnen (Alt+Shift+C) — ${this.state.lruChunksCount || 0}/${this.state.maxLruChunks || 50} Chunks im RAM über ${this.state.filterCachesCount || 1} Filter`}>
+                  <Chip
+                    size="small"
+                    icon={<ViewModuleIcon sx={{ fontSize: 16 }} />}
+                    label={this.state.lruChunksCount > 0 ? `Chunk-Cache (${this.state.lruChunksCount}/${this.state.maxLruChunks || 50})` : 'Chunk-Cache'}
+                    onClick={() => window.dispatchEvent(new CustomEvent('dash:toggle-chunk-monitor'))}
+                    sx={{
+                      cursor: 'pointer',
+                      height: 28,
+                      fontWeight: 600,
+                      fontSize: '0.75rem',
+                      bgcolor: 'background.paper',
+                      boxShadow: 1,
+                      '&:hover': { bgcolor: 'action.hover' },
+                    }}
+                  />
+                </Tooltip>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      </PanelTileGrid>
+    );
+  }
+}
+
+// MARK: <RetoureList/>
+export class RetoureList extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.headerItem = createDummyTestRetoure();
+    // getItems() returns current items or null and triggers loading of the first chunk
+    this.state = {
+      items: retoureAutomat.getItems(),
+      unfilteredTotal: retoureAutomat.state.unfilteredTotal ?? 0,
+      filterKey: retoureAutomat.getFilterKey?.() ?? '',
+      entityId: retoureAutomat.state.entityId ?? null,
+      customerFilterOpen: false,
+      partiesById: {},
+      partiesList: [],
+      busyId: null,
+    };
+    this.searchRef = createRef();
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleTogglePaid = this.handleTogglePaid.bind(this);
+    this.handleToggleShipped = this.handleToggleShipped.bind(this);
+    this.handlePageChange = this.handlePageChange.bind(this);
+    this.handleToggleCustomerFilter = this.handleToggleCustomerFilter.bind(this);
+    this.handleSelectCustomer = this.handleSelectCustomer.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    this.unsub = retoureAutomat.subscribe(this, (state) => ({
+      items: state.items,
+      unfilteredTotal: state.unfilteredTotal ?? 0,
+      filterKey: retoureAutomat.getFilterKey(state),
+      entityId: state.entityId ?? null,
+    }));
+    this.unsubNumber = numberAutomat.subscribe(this, () => {
+      this.headerItem = createDummyTestRetoure();
+      this.forceUpdate();
+    });
+    void this.loadParties();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+    this.unsubNumber?.();
+  }
+
+  handleToggleCustomerFilter() {
+    this.setState((prev) => ({ customerFilterOpen: !prev.customerFilterOpen }));
+  }
+
+  handleSelectCustomer(entityId) {
+    retoureAutomat.actions.setEntityId(entityId);
+  }
+
+  async loadParties() {
+    try {
+      const parties = await loadParties('retoure');
+      if (!this._cancelled) {
+        this.setState({
+          partiesById: cfg.partiesByIdFromList(parties),
+          partiesList: parties || [],
+        });
+      }
+    } catch {
+      // Non-fatal: names fall back to ids.
+    }
+  }
+
+  handlePageChange(page, meta) {
+    const pageSize = meta?.pageSize ?? 10;
+    const startIndex = (page - 1) * pageSize;
+    const items = this.state.items;
+    const maxIndex = items ? items.length - 1 : startIndex;
+    const endIndex = Math.min(maxIndex, startIndex + pageSize - 1);
+
+    const startChunk = Math.floor(startIndex / CHUNK_SIZE);
+    const endChunk = Math.floor(endIndex / CHUNK_SIZE);
+
+    retoureAutomat.requireChunk(startChunk, endChunk);
+  }
+
+  handleRetry() {
+    void retoureAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
+  }
+
+  handleCreate() {
+    this.props.navigate(cfg.createPath);
+  }
+
+  handleOpen(retoure) {
+    this.props.navigate(cfg.editPath(retoure.id));
+  }
+
+  async handleDelete(retoure) {
+    if (this.state.busyId != null) return;
+    const num = retoure.number ?? retoure.retoure_number ?? `RET-${retoure.id}`;
+    if (!window.confirm(cfg.confirmDelete(num))) return;
+    this.setState({ busyId: retoure.id });
+    try {
+      await retoureApi.delete(retoure.id);
+      await retoureAutomat.actions.reload();
+      enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      if (!this._cancelled) this.setState({ busyId: null });
+    }
+  }
+
+  async handleTogglePaid(retoure, checked) {
+    if (this.state.busyId != null) return;
+    const id = retoure.id ?? retoure.manifest_id;
+    const patch = { isPaid: checked, is_paid: checked, paid: checked };
+    retoureAutomat.actions.patchRetoure(id, patch);
+    try {
+      await retoureApi.update(id, { isPaid: checked });
+      enqueueSnackbar(checked ? 'Retoure als erstattet/bezahlt markiert' : 'Retoure als offen markiert', {
+        variant: 'info',
+      });
+    } catch (err) {
+      console.warn('[RetoureList] update paid on backend failed:', err);
+    }
+  }
+
+  async handleToggleShipped(retoure, checked) {
+    if (this.state.busyId != null) return;
+    const id = retoure.id ?? retoure.manifest_id;
+    const patch = { isShipped: checked, is_shipped: checked, delivered: checked };
+    retoureAutomat.actions.patchRetoure(id, patch);
+    try {
+      await retoureApi.update(id, { isShipped: checked });
+      enqueueSnackbar(checked ? 'Retoure als geliefert/eingegangen markiert' : 'Retoure als offen markiert', {
+        variant: 'info',
+      });
+    } catch (err) {
+      console.warn('[RetoureList] update shipped on backend failed:', err);
+    }
+  }
+
+  render() {
+    const {
+      items,
+      unfilteredTotal,
+      filterKey,
+      partiesById,
+      partiesList,
+      entityId,
+      customerFilterOpen,
+      busyId,
+    } = this.state;
+
+    rowContext.partiesById = partiesById;
+    rowContext.busyId = busyId;
+    rowContext.onOpen = this.handleOpen;
+    rowContext.onDelete = this.handleDelete;
+    rowContext.onTogglePaid = this.handleTogglePaid;
+    rowContext.onToggleShipped = this.handleToggleShipped;
+    rowContext.headerItem = this.headerItem;
+
+    const customerCounts = {};
+    if (Array.isArray(items)) {
+      for (const ret of items) {
+        const eId = ret?.entityId ?? ret?.entity_id;
+        if (eId) {
+          customerCounts[eId] = (customerCounts[eId] || 0) + 1;
+        }
+      }
+    }
+    const selectedCustomer = entityId ? (partiesById[entityId] || { id: entityId, name: `Kunde #${entityId}` }) : null;
+
+    const searchField = (
+      <RetoureSearchField
+        inputRef={this.searchRef}
+        onCreate={this.handleCreate}
+        customerFilterOpen={customerFilterOpen}
+        onToggleCustomerFilter={this.handleToggleCustomerFilter}
+        selectedCustomer={selectedCustomer}
+        onClearCustomerFilter={() => this.handleSelectCustomer(null)}
+      />
+    );
+
+    if (items === null && retoureAutomat.state.status === 'failed') {
+      return (
+        <>
+          {searchField}
+          <PanelTileGrid>
+            <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ p: 2 }}>
+              <BackendError error={backendErrorFrom(retoureAutomat.state.error)} onRetry={this.handleRetry} />
+            </PanelTile>
+          </PanelTileGrid>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {searchField}
+        <Box sx={{ display: 'flex', gap: 2.5, alignItems: 'stretch' }}>
+          {customerFilterOpen && (
+            <PartyFilterPanel
+              title="Kunden"
+              parties={partiesList}
+              selectedId={entityId}
+              onSelect={this.handleSelectCustomer}
+              onClose={this.handleToggleCustomerFilter}
+              counts={customerCounts}
+              searchPlaceholder="Kunde suchen…"
+            />
+          )}
+          <Box sx={{ flexGrow: 1, minWidth: 0 }}>
+            <PanelTileGrid>
+              <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0, position: 'relative' }}>
+                <FillSpace
+                  aboveRef={[this.searchRef]}
+                  reserveBottom={32}
+                  minPageSize={8}
+                  minHeight={0}
+                  resetKey={filterKey}
+                  items={items || []}
+                  totalCount={items ? items.length : 0}
+                  unfilteredTotal={unfilteredTotal}
+                  headerItem={this.headerItem}
+                  renderItem={RetoureRow}
+                  virtualScrollbar
+                  header={
+                    <Box
+                      sx={{
+                        ...rowGridSx,
+                        height: 36,
+                        minHeight: 36,
+                        px: 2,
+                        borderBottom: '1px solid',
+                        borderColor: 'divider',
+                      }}
+                    >
+                      {renderInvisibleDummyRow(this.headerItem)}
+                      <Box sx={{ gridColumn: 1, gridRow: 2, ...headerCellSx }}>Nr. / Ref.</Box>
+                      <Box sx={{ gridColumn: 2, gridRow: 2, ...headerCellSx }}>Datum</Box>
+                      <Box sx={{ gridColumn: 3, gridRow: 2, ...headerCellSx }}>Kunde</Box>
+                      <Box sx={{ gridColumn: 4, gridRow: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', ...headerCellSx }}>
+                        <Tooltip title="Bezahlt">
+                          <PaymentsOutlinedIcon sx={{ fontSize: 18 }} />
+                        </Tooltip>
+                      </Box>
+                      <Box sx={{ gridColumn: 5, gridRow: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', ...headerCellSx }}>
+                        <Tooltip title="Geliefert">
+                          <LocalShippingOutlinedIcon sx={{ fontSize: 18 }} />
+                        </Tooltip>
+                      </Box>
+                      <Box sx={{ gridColumn: 6, gridRow: 2, display: 'flex', justifyContent: 'center', textAlign: 'center', ...headerCellSx }}>Pos.</Box>
+                      <Box sx={{ gridColumn: 7, gridRow: 2, textAlign: 'right', ...headerCellSx }}>Gesamt</Box>
+                      <Box sx={{ gridColumn: 8, gridRow: 2, ...headerCellSx }} />
+                    </Box>
+                  }
+                  onPageChange={this.handlePageChange}
+                />
+                {items === null && (
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      top: 52,
+                      left: 0,
+                      right: 0,
+                      bottom: 32,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    <CircularProgress size={32} />
+                  </Box>
+                )}
+              </PanelTile>
+            </PanelTileGrid>
+          </Box>
+        </Box>
+      </>
+    );
+  }
+}
+
+export default withNavigate(RetoureList);

src/components/manifest/index.js

@@ -2,6 +2,7 @@ export { default as ManifestList } from './ManifestList';
 export { default as DeliveryList } from './DeliveryList';
 export { default as OrderList } from './OrderList';
 export { default as QuoteList } from './QuoteList';
+export { default as RetoureList } from './RetoureList';
 export { default as ShipmentList } from './ShipmentList';
 export { default as OrderPaymentList } from './OrderPaymentList';
 

src/components/manifest/manifestConfig.js

@@ -2,6 +2,7 @@ import {
   delivery as deliveryApi,
   quote as quoteApi,
   order as orderApi,
+  retoure as retoureApi,
 } from '../../api';
 import supplierAutomat from '../../automats/supplierAutomat';
 import entityAutomat from '../../automats/entityAutomat';
@@ -9,6 +10,7 @@ import customergroupAutomat from '../../automats/customergroupAutomat';
 import deliveryAutomat from '../../automats/deliveryAutomat';
 import quoteAutomat from '../../automats/quoteAutomat';
 import orderAutomat from '../../automats/orderAutomat';
+import retoureAutomat from '../../automats/retoureAutomat';
 import { getArticle } from '../../automats/artikelAutomat';
 import { selectCompanyTaxrate } from '../../automats/companyAutomat';
 import { netFromGross } from '../../utils/price';
@@ -18,6 +20,7 @@ import {
   ORANGE_PANEL,
   PURPLE_PANEL,
   YELLOW_PANEL,
+  RED_PANEL,
 } from '../../colors';
 
 /** Groups that are not sales customers (filter client-side). */
@@ -632,6 +635,7 @@ export function apiFor(cfgOrKind) {
   if (kind === 'delivery') return deliveryApi;
   if (kind === 'quote') return quoteApi;
   if (kind === 'order') return orderApi;
+  if (kind === 'retoure') return retoureApi;
   throw new Error(`Unknown manifest kind: ${kind}`);
 }
 
@@ -776,6 +780,40 @@ export function manifestConfig(cfgOrKind) {
       columns: ORDER_LINE_COLUMNS,
     };
   }
+  if (kind === 'retoure') {
+    return {
+      kind: 'retoure',
+      api: 'retoure',
+      listField: 'retoures',
+      docField: 'retoure',
+      partyField: 'entityId',
+      listPath: '/auftrag/retoure',
+      createPath: '/auftrag/retoure/neu',
+      editPath: (id) => `/auftrag/retoure/${id}`,
+      dateLabel: 'Retourendatum',
+      partyLabel: 'Kunde',
+      emptyList: 'Noch keine Retouren.',
+      createButton: 'Neue Retoure',
+      createdMsg: 'Retoure angelegt.',
+      savedMsg: 'Retoure gespeichert.',
+      deletedMsg: 'Retoure gelöscht.',
+      confirmDelete: (number) => `Retoure „${number}“ wirklich löschen?`,
+      invalidId: 'Ungültige Retouren-ID.',
+      partyGateMessage: null,
+      getPathLabel: 'GET /api/retoure/:id',
+      postPathLabel: 'POST /api/retoure',
+      patchPathLabel: 'PUT /api/retoure/:id',
+      listColor: RED_PANEL,
+      headerColor: RED_PANEL,
+      linesColor: GREEN_PANEL,
+      requirePartyBeforeLines: false,
+      listAutomat: retoureAutomat,
+      partiesByIdFromList: (parties) =>
+        Object.fromEntries(parties.map((row) => [row.id, row])),
+      externalNumber: true,
+      columns: ORDER_LINE_COLUMNS,
+    };
+  }
   throw new Error(`Unknown manifest kind: ${kind}`);
 }