u

src/api/order.js

@@ -75,4 +75,16 @@ export const order = {
     return http(`/api/order/${id}/file/${fileId}`, { method: 'DELETE' });
   },
   // #endregion
+
+  /**
+   * POST /api/order/:id/pdf
+   * Generates and attaches order confirmation PDF.
+   * @param {number|string} id Order ID
+   * → 201 { attachment: Attachment, fileUrl: string }
+   */
+  // #region POST /api/order/:id/pdf — createPdf
+  createPdf(id) {
+    return http(`/api/order/${id}/pdf`, { method: 'POST' });
+  },
+  // #endregion
 };

src/automats/manifestDraftAutomat.js

@@ -445,6 +445,14 @@ export function createManifestEditAutomat({ kind, name }) {
         externalNumber,
         lines,
         attachments,
+        shipments: doc.shipments || [],
+        payments: doc.payments || [],
+        shippings: doc.shippings || [],
+        orderTotal: doc.orderTotal ?? null,
+        paidTotal: doc.paidTotal ?? null,
+        paid: Boolean(doc.paid),
+        shipped: Boolean(doc.shipped),
+        delivered: Boolean(doc.delivered),
         baseline,
         isDirty: false,
         dirtyFields: { ...emptyFields },

src/components/manifest/ManifestForm.jsx

@@ -4,7 +4,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../BackendError';
 import { PanelTileGrid } from 'dashgui/panels';
-import { delivery as deliveryApi, quote as quoteApi } from '../../api';
+import { delivery as deliveryApi, quote as quoteApi, order as orderApi, shipment as shipmentApi, payment as paymentApi } from '../../api';
 import { requireArray, requireDefined, requireObject } from '../../utils/apiShape';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
@@ -13,6 +13,7 @@ import ManifestHeader from './ManifestHeader';
 import ManifestLines from './ManifestLines';
 import ManifestPdfDialog from './ManifestPdfDialog';
 import ArticleSearchDialog from './ArticleSearchDialog';
+import OrderDocumentsTiles from './OrderDocumentsTiles';
 import artikelAutomat, { getArticle } from '../../automats/artikelAutomat';
 import entityAutomat from '../../automats/entityAutomat';
 import supplierAutomat from '../../automats/supplierAutomat';
@@ -80,6 +81,14 @@ class ManifestForm extends PureComponent {
       externalNumber: initialDoc?.externalNumber || '',
       lines: initialDoc?.lines?.length > 0 ? initialDoc.lines : [emptyLine()],
       attachments: initialDoc?.attachments || [],
+      shipments: initialEdit?.shipments || [],
+      payments: initialEdit?.payments || [],
+      shippings: initialEdit?.shippings || [],
+      orderTotal: initialEdit?.orderTotal ?? null,
+      paidTotal: initialEdit?.paidTotal ?? null,
+      paid: Boolean(initialEdit?.paid),
+      shipped: Boolean(initialEdit?.shipped),
+      delivered: Boolean(initialEdit?.delivered),
       isDirty: Boolean(initialEdit?.isDirty),
       dirtyFields: initialEdit?.dirtyFields || null,
       dirtyLineKeys: initialEdit?.dirtyLineKeys || [],
@@ -188,6 +197,14 @@ class ManifestForm extends PureComponent {
             externalNumber: state.externalNumber || '',
             lines: state.lines?.length > 0 ? state.lines : [emptyLine()],
             attachments: state.attachments || [],
+            shipments: state.shipments || [],
+            payments: state.payments || [],
+            shippings: state.shippings || [],
+            orderTotal: state.orderTotal ?? null,
+            paidTotal: state.paidTotal ?? null,
+            paid: Boolean(state.paid),
+            shipped: Boolean(state.shipped),
+            delivered: Boolean(state.delivered),
             isDirty: Boolean(state.isDirty),
             dirtyFields: state.dirtyFields,
             dirtyLineKeys: state.dirtyLineKeys,
@@ -347,6 +364,27 @@ class ManifestForm extends PureComponent {
       const apiFiles = doc.files ?? [];
       const attachments = await restoreAttachmentsFromApi(apiFiles);
 
+      let shipments = doc.shipments;
+      let payments = doc.payments;
+      if (kind === 'order') {
+        if (!shipments) {
+          try {
+            const shRes = await shipmentApi.listByOrder(docId);
+            shipments = shRes?.shipments ?? [];
+          } catch {
+            shipments = [];
+          }
+        }
+        if (!payments) {
+          try {
+            const payRes = await paymentApi.listByOrder(docId);
+            payments = payRes?.payments ?? [];
+          } catch {
+            payments = [];
+          }
+        }
+      }
+
       const loadedDoc = {
         date: dateInputValue(doc.date),
         partyId: doc[cfg.partyField],
@@ -355,6 +393,14 @@ class ManifestForm extends PureComponent {
           doc.externalNumber != null ? String(doc.externalNumber) : '',
         lines,
         attachments,
+        shipments: shipments || [],
+        payments: payments || [],
+        shippings: doc.shippings || [],
+        orderTotal: doc.orderTotal ?? null,
+        paidTotal: doc.paidTotal ?? null,
+        paid: Boolean(doc.paid),
+        shipped: Boolean(doc.shipped),
+        delivered: Boolean(doc.delivered),
       };
 
       if (this.editAutomat) {
@@ -861,19 +907,21 @@ class ManifestForm extends PureComponent {
   async handleCreatePdf(e) {
     e?.preventDefault?.();
     e?.stopPropagation?.();
-    const { docId } = this.props;
+    const { docId, kind } = this.props;
     if (this.state.pdfCreating || this.state.saving) return;
     if (docId == null) return;
 
     this.setState({ pdfCreating: true });
     try {
-      const res = await quoteApi.createPdf(docId);
-      requireObject(res, 'POST /api/quote/:id/pdf');
+      const api = kind === 'order' ? orderApi : quoteApi;
+      const res = await api.createPdf(docId);
+      requireObject(res, `POST /api/${kind}/:id/pdf`);
 
-      const quoteRes = await quoteApi.get(docId);
-      if (quoteRes?.quote?.files && !this._cancelled) {
+      const getRes = await api.get(docId);
+      const doc = getRes?.[kind];
+      if (doc?.files && !this._cancelled) {
         const attachments = await restoreAttachmentsFromApi(
-          quoteRes.quote.files,
+          doc.files,
           this.state.attachments,
         );
         this.setState({ attachments });
@@ -882,7 +930,10 @@ class ManifestForm extends PureComponent {
         }
       }
 
-      enqueueSnackbar('Angebot-PDF erfolgreich erstellt.', { variant: 'success' });
+      enqueueSnackbar(
+        kind === 'order' ? 'Auftrag-PDF erfolgreich erstellt.' : 'Angebot-PDF erfolgreich erstellt.',
+        { variant: 'success' },
+      );
     } catch (err) {
       if (!this._cancelled) {
         notifyError(err);
@@ -1091,7 +1142,7 @@ class ManifestForm extends PureComponent {
             onRestore={this.props.mode === 'edit' && this.state.isDirty ? this.handleRestore : undefined}
             onPdfUpload={kind === 'delivery' ? this.handlePdfUpload : undefined}
             onPdfDelete={this.handleAttachmentDelete}
-            onPdfCreate={kind === 'quote' ? this.handleCreatePdf : undefined}
+            onPdfCreate={kind === 'quote' || kind === 'order' ? this.handleCreatePdf : undefined}
             onSave={this.handleSave}
             onPartyChange={this.handlePartyChange}
             onDateChange={this.handleDateChange}
@@ -1099,6 +1150,25 @@ class ManifestForm extends PureComponent {
             onExternalNumberChange={this.handleExternalNumberChange}
           />
           {status === 'ready' ? this.renderArticles() : null}
+          {status === 'ready' && kind === 'order' && this.props.mode === 'edit' ? (
+            <OrderDocumentsTiles
+              orderId={this.props.docId}
+              orderNumber={number}
+              externalNumber={externalNumber}
+              orderTotal={this.state.orderTotal}
+              paidTotal={this.state.paidTotal}
+              paid={this.state.paid}
+              shipped={this.state.shipped}
+              delivered={this.state.delivered}
+              shipments={this.state.shipments}
+              payments={this.state.payments}
+              attachments={this.state.attachments}
+              onPdfCreate={this.handleCreatePdf}
+              pdfCreating={this.state.pdfCreating}
+              onAttachmentDelete={this.handleAttachmentDelete}
+              navigate={this.props.navigate}
+            />
+          ) : null}
         </PanelTileGrid>
         <ManifestPdfDialog
           open={pdfDialogOpen}

src/components/manifest/ManifestHeader.jsx

@@ -523,7 +523,7 @@ class ManifestHeader extends PureComponent {
                   : 'Ins Lager buchen'}
               </Button>
             )}
-            {kind === 'quote' && onPdfCreate && docId != null && Boolean(number) && (
+            {(kind === 'quote' || kind === 'order') && onPdfCreate && docId != null && Boolean(number) && (
               <Button
                 type="button"
                 variant="outlined"

src/components/manifest/OrderDocumentsTiles.jsx

@@ -0,0 +1,277 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
+import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
+import AddIcon from '@mui/icons-material/Add';
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
+import { PanelTile } from 'dashgui/panels';
+import { formatDate } from './manifestConfig';
+import { formatPrice } from '../../utils/price';
+import {
+  GREEN_PANEL,
+  YELLOW_PANEL,
+  WHITE,
+} from '../../colors';
+
+/**
+ * Renders 1-wide associated document tiles for an order in edit mode:
+ * 1. Lieferscheine / Auslieferungen (Shipments)
+ * 2. Zahlungen (Payments)
+ */
+export class OrderDocumentsTiles extends PureComponent {
+  handleOpenShipment = () => {
+    if (this.props.navigate) {
+      this.props.navigate('/auftrag/ausliefern');
+    }
+  };
+
+  handleOpenPayments = () => {
+    if (this.props.navigate) {
+      this.props.navigate('/auftrag/zahlungen');
+    }
+  };
+
+  renderShipmentsTile() {
+    const { shipments = [], shipped, delivered, navigate } = this.props;
+
+    const statusLabel = delivered
+      ? 'Geliefert'
+      : shipped
+      ? 'Versendet'
+      : shipments.length > 0
+      ? 'Teilweise'
+      : 'Offen';
+
+    const statusColor = delivered || shipped ? 'success' : shipments.length > 0 ? 'warning' : 'default';
+
+    return (
+      <PanelTile wide={1} minHeight={220} color={GREEN_PANEL} title="Lieferscheine">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
+          <Stack direction="row" spacing={0.75} alignItems="center">
+            <LocalShippingOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
+            <Chip size="small" label={statusLabel} color={statusColor} sx={{ fontWeight: 600, height: 22 }} />
+          </Stack>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<AddIcon />}
+            onClick={() => navigate?.('/auftrag/ausliefern')}
+            sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
+          >
+            Liefern
+          </Button>
+        </Box>
+
+        {shipments.length > 0 ? (
+          <Stack spacing={1}>
+            {shipments.map((sh) => {
+              const carrier = sh.shippings?.[0]?.carrier;
+              const tracking = sh.shippings?.[0]?.trackingCode;
+              const posCount = sh.lineCount ?? sh.lines?.length ?? 0;
+
+              return (
+                <Card
+                  key={sh.id ?? sh.number}
+                  variant="outlined"
+                  onClick={this.handleOpenShipment}
+                  sx={{
+                    p: 1.25,
+                    bgcolor: WHITE,
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                    '&:hover': {
+                      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      borderColor: 'primary.main',
+                    },
+                  }}
+                >
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.25 }}>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.85rem' }}>
+                      {sh.number}
+                    </Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      {sh.date ? formatDate(sh.date) : '–'}
+                    </Typography>
+                  </Box>
+
+                  {sh.externalNumber ? (
+                    <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>
+                      Ref: {sh.externalNumber}
+                    </Typography>
+                  ) : null}
+
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5 }}>
+                    <Typography variant="caption" color="text.secondary">
+                      {posCount} Pos.
+                    </Typography>
+                    {carrier || tracking ? (
+                      <Chip
+                        size="small"
+                        color="primary"
+                        variant="outlined"
+                        label={carrier || 'Paket'}
+                        sx={{ height: 18, fontSize: '0.65rem' }}
+                      />
+                    ) : null}
+                  </Box>
+                </Card>
+              );
+            })}
+          </Stack>
+        ) : (
+          <Box
+            sx={{
+              p: 1.5,
+              textAlign: 'center',
+              bgcolor: 'rgba(255,255,255,0.6)',
+              borderRadius: 1,
+              border: '1px dashed',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+              Noch keine Lieferscheine erstellt.
+            </Typography>
+            <Button
+              size="small"
+              variant="contained"
+              startIcon={<LocalShippingOutlinedIcon />}
+              onClick={() => navigate?.('/auftrag/ausliefern')}
+              sx={{ textTransform: 'none', fontWeight: 600, fontSize: '0.75rem' }}
+            >
+              Lieferschein anlegen
+            </Button>
+          </Box>
+        )}
+      </PanelTile>
+    );
+  }
+
+  renderPaymentsTile() {
+    const { payments = [], paid, paidTotal, orderTotal } = this.props;
+
+    const tot = Number(orderTotal) || 0;
+    const pd = Number(paidTotal) || 0;
+    const openAmount = Math.max(0, tot - pd);
+
+    const statusLabel = paid ? 'Bezahlt' : pd > 0 ? 'Teilzahlung' : 'Offen';
+    const statusColor = paid ? 'success' : pd > 0 ? 'warning' : 'error';
+
+    return (
+      <PanelTile wide={1} minHeight={220} color={YELLOW_PANEL} title="Zahlungen">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
+          <Stack direction="row" spacing={0.75} 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>
+
+        {/* Financial KPI Card */}
+        <Box
+          sx={{
+            p: 1,
+            mb: 1.5,
+            bgcolor: WHITE,
+            borderRadius: 1,
+            border: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
+            <Typography variant="caption" color="text.secondary">
+              Summe:
+            </Typography>
+            <Typography variant="caption" sx={{ fontWeight: 700 }}>
+              {formatPrice(tot)}
+            </Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
+            <Typography variant="caption" color="text.secondary">
+              Bezahlt:
+            </Typography>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: 'success.main' }}>
+              {formatPrice(pd)}
+            </Typography>
+          </Box>
+          <Divider sx={{ my: 0.5 }} />
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Typography variant="caption" color="text.secondary">
+              Offen:
+            </Typography>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: openAmount > 0 ? 'error.main' : 'text.secondary' }}>
+              {formatPrice(openAmount)}
+            </Typography>
+          </Box>
+        </Box>
+
+        {payments.length > 0 ? (
+          <Stack spacing={1}>
+            {payments.map((pay) => (
+              <Card
+                key={pay.id}
+                variant="outlined"
+                sx={{
+                  p: 1,
+                  bgcolor: WHITE,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <Stack direction="row" spacing={0.75} alignItems="center">
+                  <CheckCircleOutlineOutlinedIcon sx={{ fontSize: 16, color: 'success.main' }} />
+                  <Typography variant="caption" sx={{ fontWeight: 600 }}>
+                    #{pay.id}
+                  </Typography>
+                </Stack>
+                <Typography variant="caption" sx={{ fontWeight: 700, color: 'success.dark' }}>
+                  +{formatPrice(pay.amount)}
+                </Typography>
+              </Card>
+            ))}
+          </Stack>
+        ) : (
+          <Box
+            sx={{
+              p: 1.5,
+              textAlign: 'center',
+              bgcolor: 'rgba(255,255,255,0.6)',
+              borderRadius: 1,
+              border: '1px dashed',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="caption" color="text.secondary">
+              Noch keine Zahlungen erfasst.
+            </Typography>
+          </Box>
+        )}
+      </PanelTile>
+    );
+  }
+
+  render() {
+    return (
+      <>
+        {this.renderShipmentsTile()}
+        {this.renderPaymentsTile()}
+      </>
+    );
+  }
+}
+
+export default OrderDocumentsTiles;

src/components/manifest/index.js

@@ -15,6 +15,7 @@ export { default as TextEditorPanel } from './TextEditorPanel';
 export { default as PdfViewerPanel } from './PdfViewerPanel';
 export { default as ArticleSearchDialog } from './ArticleSearchDialog';
 export { default as BookDeliveryDialog } from './BookDeliveryDialog';
+export { default as OrderDocumentsTiles } from './OrderDocumentsTiles';
 export { withManifestId } from './withManifestId';
 export {
   manifestConfig,