Add Lieferungen section with supplier CRUD and delivery create/list.

Wire /lieferung sub-nav (list, neu, lieferanten) to supplier and delivery APIs.

src/api/ApiClient.js

@@ -71,6 +71,30 @@ export class ApiClient {
       delete: (id) => this.#empty('DELETE', `/api/brand/${enc(id)}`),
     };
 
+    this.supplier = {
+      /** GET /api/supplier → { suppliers: Supplier[] } */
+      list: () => this.#json('GET', '/api/supplier'),
+      /** POST /api/supplier → 201 { supplier } */
+      create: (body) => this.#json('POST', '/api/supplier', { body }),
+      /** PATCH /api/supplier/{id} → { supplier } */
+      update: (id, body) => this.#json('PATCH', `/api/supplier/${enc(id)}`, { body }),
+      /** DELETE /api/supplier/{id} → 204 */
+      delete: (id) => this.#empty('DELETE', `/api/supplier/${enc(id)}`),
+    };
+
+    this.delivery = {
+      /** GET /api/delivery → { deliveries: DeliverySummary[] } */
+      list: () => this.#json('GET', '/api/delivery'),
+      /** GET /api/delivery/{id} → { delivery: Delivery } */
+      get: (id) => this.#json('GET', `/api/delivery/${enc(id)}`),
+      /** POST /api/delivery → 201 { delivery: Delivery } */
+      create: (body) => this.#json('POST', '/api/delivery', { body }),
+      /** PATCH /api/delivery/{id} → { delivery: Delivery } */
+      update: (id, body) => this.#json('PATCH', `/api/delivery/${enc(id)}`, { body }),
+      /** DELETE /api/delivery/{id} → 204 */
+      delete: (id) => this.#empty('DELETE', `/api/delivery/${enc(id)}`),
+    };
+
     this.category = {
       /** GET /api/category/tree */
       tree: () => this.#json('GET', '/api/category/tree'),

src/api/StorageManager.js

@@ -291,6 +291,8 @@ export class StorageManager extends ApiClient {
     const companyCache = createCache('GET /company', () => this.#loadCompanies());
     const categoryTreeCache = createCache('GET /category/tree', () => this.#loadCategoryTree());
     const posterminalCache = createCache('GET /posterminal', () => this.#loadPosterminals());
+    const supplierCache = createCache('GET /supplier', () => this.#loadSuppliers());
+    const deliveryCache = createCache('GET /delivery', () => this.#loadDeliveries());
 
     Object.defineProperties(this, {
       authMePromise: { get: () => authMeCache.promise },
@@ -324,6 +326,16 @@ export class StorageManager extends ApiClient {
       posterminalPromise: { get: () => posterminalCache.promise },
       updatePosterminal: { value: posterminalCache.update },
 
+      supplierPromise: { get: () => supplierCache.promise },
+      updateSupplier: { value: supplierCache.update },
+      /** Settled GET /supplier list, or undefined. */
+      suppliers: { get: () => supplierCache.value },
+
+      deliveryPromise: { get: () => deliveryCache.promise },
+      updateDelivery: { value: deliveryCache.update },
+      /** Settled GET /delivery list, or undefined. */
+      deliveries: { get: () => deliveryCache.value },
+
       /** Close and reopen GET /api/events (required after selected-company change). */
       reconnectEvents: { value: () => this.#reconnectEvents() },
     });
@@ -444,6 +456,18 @@ export class StorageManager extends ApiClient {
     return requireArray(data.posterminals, 'posterminals');
   }
 
+  async #loadSuppliers() {
+    const data = await this.supplier.list();
+    requireObject(data, 'GET /api/supplier');
+    return requireArray(data.suppliers, 'suppliers');
+  }
+
+  async #loadDeliveries() {
+    const data = await this.delivery.list();
+    requireObject(data, 'GET /api/delivery');
+    return requireArray(data.deliveries, 'deliveries');
+  }
+
   async doSearch({ target, filter, offset, maxCount, onUpdate }) {
     const articles = await this.articleIndexPromise;
     const query = target.trim().toLowerCase();

src/api/index.js

@@ -521,6 +521,84 @@ export const brand = {
   },
 };
 
+/**
+ * Company-scoped suppliers / Lieferanten (selectedCompanyId from session).
+ * Shape: Supplier = { id, name, createdAt, updatedAt }
+ */
+export const supplier = {
+  /** GET /api/supplier → { suppliers: Supplier[] } */
+  list() {
+    return http('/api/supplier');
+  },
+
+  /**
+   * POST /api/supplier
+   * Body: { name } — empty name ⇒ 400 Name required.
+   * → 201 { supplier: Supplier }
+   */
+  create(body) {
+    return http('/api/supplier', { method: 'POST', body });
+  },
+
+  /**
+   * PATCH /api/supplier/:id
+   * Body: { name } — empty name ⇒ 400 Name required.
+   * → 200 { supplier: Supplier }
+   */
+  update(id, body) {
+    return http(`/api/supplier/${id}`, { method: 'PATCH', body });
+  },
+
+  /** DELETE /api/supplier/:id → 204 */
+  delete(id) {
+    return http(`/api/supplier/${id}`, { method: 'DELETE' });
+  },
+};
+
+/**
+ * Company-scoped goods receipts (manifest type = delivery).
+ * DeliverySummary = { id, number, type: 'delivery', supplierId, date }
+ * DeliveryLine = { id, articleId, sku, amount, net, transactedAmount, rebate, tax, comment }
+ * Delivery = DeliverySummary & { lines: DeliveryLine[] }
+ * DeliveryLineInput = { sku, amount, net, tax, rebate?, transactedAmount?, comment? }
+ */
+export const delivery = {
+  /** GET /api/delivery → { deliveries: DeliverySummary[] } */
+  list() {
+    return http('/api/delivery');
+  },
+
+  /** GET /api/delivery/:id → { delivery: Delivery } */
+  get(id) {
+    return http(`/api/delivery/${id}`);
+  },
+
+  /**
+   * POST /api/delivery
+   * Body: { number, date, supplierId?, lines: DeliveryLineInput[] }
+   * Line requires sku, amount, net, tax. rebate→0, transactedAmount→amount.
+   * → 201 { delivery: Delivery }
+   */
+  create(body) {
+    return http('/api/delivery', { method: 'POST', body });
+  },
+
+  /**
+   * PATCH /api/delivery/:id
+   * Body: partial { number?, date?, supplierId?, lines? }.
+   * If lines present, replaces all lines; if omitted, lines unchanged.
+   * → 200 { delivery: Delivery }
+   */
+  update(id, body) {
+    return http(`/api/delivery/${id}`, { method: 'PATCH', body });
+  },
+
+  /** DELETE /api/delivery/:id → 204 */
+  delete(id) {
+    return http(`/api/delivery/${id}`, { method: 'DELETE' });
+  },
+};
+
 export const company = {
   /** GET /api/company → { companies: [...] } */
   list() {
@@ -697,6 +775,8 @@ export default {
   category,
   company,
   posterminal,
+  supplier,
+  delivery,
   thumb,
   unit,
 };

src/appRouter.jsx

@@ -8,7 +8,9 @@ const ArtikelKategorienPage = lazy(() => import('./pages/artikel/kategorien'));
 const RedirectArtikelKategorien = lazy(() => import('./pages/artikel/RedirectArtikelKategorien'));
 const ArtikelLagerPage = lazy(() => import('./pages/artikel/lager'));
 const ArtikelSkuPage = lazy(() => import('./pages/artikel/sku'));
-const LieferungPage = lazy(() => import('./pages/lieferung/index'));
+const LieferungListePage = lazy(() => import('./pages/lieferung/index'));
+const LieferungNeuPage = lazy(() => import('./pages/lieferung/neu'));
+const LieferungLieferantenPage = lazy(() => import('./pages/lieferung/lieferanten'));
 const AuftragAktivePage = lazy(() => import('./pages/auftrag/index'));
 const AuftragArchivPage = lazy(() => import('./pages/auftrag/archiv'));
 const KundeListePage = lazy(() => import('./pages/kunde/index'));
@@ -22,7 +24,15 @@ export const router = createBrowserRouter([
     element: <AppShell />,
     children: [
       { index: true, element: <Navigate to="/artikel" replace /> },
-      { path: 'lieferung', element: <LieferungPage /> },
+      {
+        path: 'lieferung',
+        element: <SectionLayout sectionPath="/lieferung" />,
+        children: [
+          { index: true, element: <LieferungListePage /> },
+          { path: 'neu', element: <LieferungNeuPage /> },
+          { path: 'lieferanten', element: <LieferungLieferantenPage /> },
+        ],
+      },
       { path: 'infos', element: <InfosPage /> },
       {
         path: 'kategorien/*',

src/nav.js

@@ -10,6 +10,8 @@ import ListAltIcon from '@mui/icons-material/ListAlt';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import GroupsIcon from '@mui/icons-material/Groups';
 import ContactPageIcon from '@mui/icons-material/ContactPage';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import StorefrontIcon from '@mui/icons-material/Storefront';
 import { isKategorienPath } from './pages/artikel/categoryRoute';
 
 export const NAV_ITEMS = [
@@ -26,6 +28,11 @@ export const SUB_NAV = {
     { segment: 'kategorien', label: 'Kategorien', icon: CategoryIcon },
     { segment: 'lager', label: 'Lager', icon: WarehouseIcon },
   ],
+  '/lieferung': [
+    { segment: '', label: 'Lieferungen', icon: ListAltIcon },
+    { segment: 'neu', label: 'Neue Lieferung', icon: AddBoxIcon },
+    { segment: 'lieferanten', label: 'Lieferanten', icon: StorefrontIcon },
+  ],
   '/auftrag': [
     { segment: '', label: 'Aktive Aufträge', icon: ListAltIcon },
     { segment: 'archiv', label: 'Archiv', icon: ArchiveIcon },

src/pages/lieferung/index.jsx

@@ -1,10 +1,192 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
-import PageLayout from '../../components/PageLayout';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import { enqueueSnackbar } from 'notistack';
+import BackendError from '../../components/BackendError';
+import { PanelTile, PanelTileGrid } from '../../components/panels';
+import { StorageManagerContext } from '../../api/storageManagerContext';
+import { router } from '../../appRouter';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
 
-export default function LieferungPage() {
+function sortDeliveries(deliveries) {
-  return (
+  return [...deliveries].sort((a, b) =>
-    <PageLayout title="Lieferung">
+    String(b.date).localeCompare(String(a.date)),
-      <Typography color="text.secondary">Lieferung — Inhalt folgt.</Typography>
-    </PageLayout>
   );
 }
+
+function formatDate(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleDateString('de-DE');
+}
+
+class LieferungListePage extends PureComponent {
+  static contextType = StorageManagerContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: 'loading',
+      error: null,
+      deliveries: [],
+      suppliersById: {},
+      busyId: null,
+    };
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    void this.load();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+  }
+
+  async load() {
+    this.setState({ status: 'loading', error: null });
+    try {
+      const [deliveries, suppliers] = await Promise.all([
+        this.context.deliveries ?? this.context.deliveryPromise,
+        this.context.suppliers ?? this.context.supplierPromise,
+      ]);
+      if (this._cancelled) return;
+      const suppliersById = Object.fromEntries(
+        suppliers.map((row) => [row.id, row]),
+      );
+      this.setState({
+        status: 'ready',
+        deliveries: sortDeliveries(deliveries),
+        suppliersById,
+      });
+    } catch (err) {
+      if (this._cancelled) return;
+      this.setState({ status: 'failed', error: backendErrorFrom(err) });
+    }
+  }
+
+  handleRetry() {
+    void this.load();
+  }
+
+  handleCreate() {
+    void router.navigate('/lieferung/neu');
+  }
+
+  async handleDelete(delivery) {
+    if (this.state.busyId != null) return;
+    if (
+      !window.confirm(
+        `Lieferung „${delivery.number}“ wirklich löschen?`,
+      )
+    ) {
+      return;
+    }
+
+    this.setState({ busyId: delivery.id });
+    try {
+      await this.context.delivery.delete(delivery.id);
+      const list = await this.context.updateDelivery();
+      if (this._cancelled) return;
+      this.setState({
+        deliveries: sortDeliveries(list),
+        busyId: null,
+      });
+      enqueueSnackbar('Lieferung gelöscht.', { variant: 'success' });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState({ busyId: null });
+    }
+  }
+
+  supplierName(supplierId) {
+    if (supplierId == null) return null;
+    return this.state.suppliersById[supplierId]?.name;
+  }
+
+  render() {
+    const { status, error, deliveries, busyId } = this.state;
+
+    if (status === 'loading') {
+      return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (status === 'failed') {
+      return <BackendError error={error} onRetry={this.handleRetry} />;
+    }
+
+    return (
+      <PanelTileGrid>
+        <PanelTile wide={3} minHeight={240} color="#fed7aa">
+          <Stack spacing={2}>
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <Button variant="contained" size="small" onClick={this.handleCreate}>
+                Neue Lieferung
+              </Button>
+            </Box>
+
+            {deliveries.length === 0 ? (
+              <Typography variant="body2" color="text.secondary">
+                Noch keine Lieferungen.
+              </Typography>
+            ) : (
+              <TableContainer>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Nummer</TableCell>
+                      <TableCell>Datum</TableCell>
+                      <TableCell>Lieferant</TableCell>
+                      <TableCell padding="checkbox" />
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {deliveries.map((row) => (
+                      <TableRow key={row.id} hover>
+                        <TableCell>{row.number}</TableCell>
+                        <TableCell>{formatDate(row.date)}</TableCell>
+                        <TableCell>{this.supplierName(row.supplierId)}</TableCell>
+                        <TableCell padding="checkbox">
+                          <IconButton
+                            size="small"
+                            aria-label={`„${row.number}“ löschen`}
+                            disabled={busyId != null}
+                            onClick={() => void this.handleDelete(row)}
+                          >
+                            <DeleteOutlinedIcon fontSize="small" />
+                          </IconButton>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </Stack>
+        </PanelTile>
+      </PanelTileGrid>
+    );
+  }
+}
+
+export default LieferungListePage;

src/pages/lieferung/lieferanten.jsx

@@ -0,0 +1,272 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import StorefrontIcon from '@mui/icons-material/Storefront';
+import { enqueueSnackbar } from 'notistack';
+import BackendError from '../../components/BackendError';
+import SingleLineTextEdit from '../../components/SingleLineTextEdit';
+import { PanelTile, PanelTileGrid } from '../../components/panels';
+import { StorageManagerContext } from '../../api/storageManagerContext';
+import { requireDefined, requireObject } from '../../utils/apiShape';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+
+function sortSuppliers(suppliers) {
+  return [...suppliers].sort((a, b) =>
+    String(a.name).localeCompare(String(b.name), 'de'),
+  );
+}
+
+function draftsFrom(suppliers) {
+  return Object.fromEntries(suppliers.map((row) => [row.id, row.name]));
+}
+
+class LieferungLieferantenPage extends PureComponent {
+  static contextType = StorageManagerContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: 'loading',
+      error: null,
+      suppliers: [],
+      drafts: {},
+      newName: '',
+      busyKey: null,
+    };
+    this._cancelled = false;
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleRetry = this.handleRetry.bind(this);
+    this.loadSuppliers = this.loadSuppliers.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    void this.loadSuppliers();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+  }
+
+  applySuppliers(suppliers) {
+    const sorted = sortSuppliers(suppliers);
+    this.setState({
+      status: 'ready',
+      error: null,
+      suppliers: sorted,
+      drafts: draftsFrom(sorted),
+    });
+  }
+
+  async loadSuppliers() {
+    this.setState({ status: 'loading', error: null });
+    try {
+      const list = this.context.suppliers ?? (await this.context.supplierPromise);
+      if (this._cancelled) return;
+      this.applySuppliers(list);
+    } catch (err) {
+      if (this._cancelled) return;
+      this.setState({ status: 'failed', error: backendErrorFrom(err) });
+    }
+  }
+
+  handleRetry() {
+    void this.loadSuppliers();
+  }
+
+  async refreshFromServer() {
+    const list = await this.context.updateSupplier();
+    if (this._cancelled) return;
+    this.applySuppliers(list);
+  }
+
+  async handleCreate() {
+    const name = this.state.newName.trim();
+    if (!name || this.state.busyKey != null) return;
+
+    this.setState({ busyKey: 'new' });
+    try {
+      const data = await this.context.supplier.create({ name });
+      requireObject(data, 'POST /api/supplier');
+      requireObject(data.supplier, 'supplier');
+      requireDefined(data.supplier.id, 'supplier.id');
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ newName: '', busyKey: null });
+      enqueueSnackbar('Lieferant angelegt.', { variant: 'success' });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState({ busyKey: null });
+    }
+  }
+
+  async handleRename(supplier) {
+    const draft = String(this.state.drafts[supplier.id] ?? '').trim();
+    if (!draft) {
+      this.setState((prev) => ({
+        drafts: { ...prev.drafts, [supplier.id]: supplier.name },
+      }));
+      return;
+    }
+    if (draft === supplier.name || this.state.busyKey != null) return;
+
+    this.setState({ busyKey: supplier.id });
+    try {
+      const data = await this.context.supplier.update(supplier.id, { name: draft });
+      requireObject(data, 'PATCH /api/supplier/:id');
+      requireObject(data.supplier, 'supplier');
+      requireDefined(data.supplier.id, 'supplier.id');
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ busyKey: null });
+      enqueueSnackbar('Lieferant gespeichert.', { variant: 'success' });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState((prev) => ({
+        busyKey: null,
+        drafts: { ...prev.drafts, [supplier.id]: supplier.name },
+      }));
+    }
+  }
+
+  async handleDelete(supplier) {
+    if (this.state.busyKey != null) return;
+    if (!window.confirm(`Lieferant „${supplier.name}“ wirklich löschen?`)) {
+      return;
+    }
+
+    this.setState({ busyKey: supplier.id });
+    try {
+      await this.context.supplier.delete(supplier.id);
+      await this.refreshFromServer();
+      if (this._cancelled) return;
+      this.setState({ busyKey: null });
+      enqueueSnackbar('Lieferant gelöscht.', { variant: 'success' });
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState({ busyKey: null });
+    }
+  }
+
+  render() {
+    const { status, error, suppliers, drafts, newName, busyKey } = this.state;
+    const busy = busyKey != null;
+
+    if (status === 'loading') {
+      return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (status === 'failed') {
+      return (
+        <BackendError error={error} onRetry={this.handleRetry} />
+      );
+    }
+
+    return (
+      <PanelTileGrid>
+        <PanelTile wide={2} minHeight={280} color="#bbf7d0">
+          <Stack spacing={2}>
+            <Typography variant="body2" color="text.secondary">
+              Lieferanten der ausgewählten Firma.
+            </Typography>
+
+            <List dense disablePadding>
+              {suppliers.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                  Noch keine Lieferanten.
+                </Typography>
+              ) : (
+                suppliers.map((supplier) => (
+                  <ListItem
+                    key={supplier.id}
+                    disableGutters
+                    sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
+                  >
+                    <StorefrontIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
+                    <SingleLineTextEdit
+                      size="small"
+                      label=""
+                      value={drafts[supplier.id] ?? ''}
+                      disabled={busy}
+                      onChange={(next) =>
+                        this.setState((prev) => ({
+                          drafts: { ...prev.drafts, [supplier.id]: next },
+                        }))
+                      }
+                      onBlur={() => void this.handleRename(supplier)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                          event.preventDefault();
+                          event.target.blur();
+                        }
+                        if (event.key === 'Escape') {
+                          event.preventDefault();
+                          this.setState((prev) => ({
+                            drafts: { ...prev.drafts, [supplier.id]: supplier.name },
+                          }));
+                          event.target.blur();
+                        }
+                      }}
+                      sx={{ flex: 1 }}
+                    />
+                    <IconButton
+                      edge="end"
+                      size="small"
+                      aria-label={`„${supplier.name}“ löschen`}
+                      disabled={busy}
+                      onClick={() => void this.handleDelete(supplier)}
+                    >
+                      <DeleteOutlinedIcon fontSize="small" />
+                    </IconButton>
+                  </ListItem>
+                ))
+              )}
+            </List>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <SingleLineTextEdit
+                size="small"
+                label="Neuer Lieferant"
+                value={newName}
+                disabled={busy}
+                onChange={(next) => this.setState({ newName: next })}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    void this.handleCreate();
+                  }
+                }}
+                sx={{ flex: 1 }}
+              />
+              <Button
+                variant="contained"
+                size="small"
+                disabled={busy || !newName.trim()}
+                onClick={() => void this.handleCreate()}
+              >
+                {busyKey === 'new' ? '…' : 'Hinzufügen'}
+              </Button>
+            </Box>
+          </Stack>
+        </PanelTile>
+      </PanelTileGrid>
+    );
+  }
+}
+
+export default LieferungLieferantenPage;

src/pages/lieferung/neu.jsx

@@ -0,0 +1,407 @@
+import { PureComponent } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import IconButton from '@mui/material/IconButton';
+import { enqueueSnackbar } from 'notistack';
+import BackendError from '../../components/BackendError';
+import SingleLineTextEdit from '../../components/SingleLineTextEdit';
+import { PanelTile, PanelTileGrid } from '../../components/panels';
+import { StorageManagerContext } from '../../api/storageManagerContext';
+import { router } from '../../appRouter';
+import { requireDefined, requireObject } from '../../utils/apiShape';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+
+function sortSuppliers(suppliers) {
+  return [...suppliers].sort((a, b) =>
+    String(a.name).localeCompare(String(b.name), 'de'),
+  );
+}
+
+function emptyLine() {
+  return {
+    key: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    amount: '',
+    sku: '',
+    tax: '',
+    rebate: '',
+    net: '',
+  };
+}
+
+function parseNum(value) {
+  if (value == null || value === '') return null;
+  const n = Number(String(value).trim().replace(',', '.'));
+  return Number.isFinite(n) ? n : null;
+}
+
+/** Build POST /api/delivery body from form state. Throws Error on client validation. */
+function buildCreateBody({ shippingNumber, estimatedDeliveryDate, supplierId, lines }) {
+  const number = shippingNumber.trim();
+  const date = estimatedDeliveryDate;
+  if (!number) throw new Error('Sendungsnummer fehlt.');
+  if (!date) throw new Error('Lieferdatum fehlt.');
+
+  const outLines = [];
+  for (const line of lines) {
+    const sku = String(line.sku ?? '').trim();
+    const amount = parseNum(line.amount);
+    const net = parseNum(line.net);
+    const tax = parseNum(line.tax);
+    const rebate = parseNum(line.rebate);
+    const blank =
+      !sku && amount == null && net == null && tax == null && rebate == null;
+    if (blank) continue;
+    if (!sku || amount == null || net == null || tax == null) {
+      throw new Error('Jede Zeile braucht SKU, Amount, Net und Tax.');
+    }
+    const row = { sku, amount, net, tax };
+    if (rebate != null) row.rebate = rebate;
+    outLines.push(row);
+  }
+  if (outLines.length === 0) {
+    throw new Error('Mindestens eine Artikelzeile nötig.');
+  }
+
+  const body = { number, date, lines: outLines };
+  if (supplierId != null) body.supplierId = supplierId;
+  return body;
+}
+
+const COLUMNS = [
+  { id: 'amount', label: 'Amount', width: 88, align: 'right', type: 'number' },
+  { id: 'sku', label: 'SKU', width: 140, align: 'left', type: 'text' },
+  { id: 'tax', label: 'Tax', width: 80, align: 'right', type: 'number' },
+  { id: 'rebate', label: 'Rebate', width: 88, align: 'right', type: 'number' },
+  { id: 'net', label: 'Net', width: 104, align: 'right', type: 'number' },
+];
+
+class LieferungNeuPage extends PureComponent {
+  static contextType = StorageManagerContext;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      suppliersStatus: 'loading',
+      suppliersError: null,
+      suppliers: [],
+      estimatedDeliveryDate: '',
+      supplierId: null,
+      shippingNumber: '',
+      lines: [emptyLine()],
+      saving: false,
+    };
+    this._cancelled = false;
+    this.handleRetrySuppliers = this.handleRetrySuppliers.bind(this);
+    this.handleAddLine = this.handleAddLine.bind(this);
+    this.handleSupplierChange = this.handleSupplierChange.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    void this.loadSuppliers();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+  }
+
+  async loadSuppliers() {
+    this.setState({ suppliersStatus: 'loading', suppliersError: null });
+    try {
+      const list = this.context.suppliers ?? (await this.context.supplierPromise);
+      if (this._cancelled) return;
+      this.setState({
+        suppliersStatus: 'ready',
+        suppliers: sortSuppliers(list),
+      });
+    } catch (err) {
+      if (this._cancelled) return;
+      this.setState({
+        suppliersStatus: 'failed',
+        suppliersError: backendErrorFrom(err),
+      });
+      notifyError(err);
+    }
+  }
+
+  handleRetrySuppliers() {
+    void this.loadSuppliers();
+  }
+
+  handleSupplierChange(_event, option) {
+    this.setState({
+      supplierId: option?.id ?? null,
+      lines: option ? this.state.lines : [emptyLine()],
+    });
+  }
+
+  handleLineChange(key, field, value) {
+    this.setState((prev) => ({
+      lines: prev.lines.map((line) =>
+        line.key === key ? { ...line, [field]: value } : line,
+      ),
+    }));
+  }
+
+  handleAddLine() {
+    this.setState((prev) => ({ lines: [...prev.lines, emptyLine()] }));
+  }
+
+  handleRemoveLine(key) {
+    this.setState((prev) => {
+      const next = prev.lines.filter((line) => line.key !== key);
+      return { lines: next.length > 0 ? next : [emptyLine()] };
+    });
+  }
+
+  async handleSave() {
+    if (this.state.saving) return;
+    let body;
+    try {
+      body = buildCreateBody(this.state);
+    } catch (err) {
+      notifyError(err);
+      return;
+    }
+
+    this.setState({ saving: true });
+    try {
+      const data = await this.context.delivery.create(body);
+      requireObject(data, 'POST /api/delivery');
+      requireObject(data.delivery, 'delivery');
+      requireDefined(data.delivery.id, 'delivery.id');
+      await this.context.updateDelivery();
+      if (this._cancelled) return;
+      enqueueSnackbar('Lieferung angelegt.', { variant: 'success' });
+      void router.navigate('/lieferung');
+    } catch (err) {
+      if (this._cancelled) return;
+      notifyError(err);
+      this.setState({ saving: false });
+    }
+  }
+
+  renderHeader() {
+    const {
+      suppliersStatus,
+      suppliers,
+      estimatedDeliveryDate,
+      supplierId,
+      shippingNumber,
+      saving,
+    } = this.state;
+    const selected =
+      suppliers.find((row) => row.id === supplierId) ?? null;
+
+    return (
+      <PanelTile wide={3} minHeight={160} color="#fed7aa" title="Kopfdaten">
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <TextField
+            size="small"
+            type="date"
+            label="Lieferdatum"
+            value={estimatedDeliveryDate}
+            disabled={saving}
+            onChange={(e) =>
+              this.setState({ estimatedDeliveryDate: e.target.value })
+            }
+            autoComplete="off"
+            slotProps={{
+              inputLabel: { shrink: true },
+              htmlInput: { spellCheck: false },
+            }}
+            sx={{ minWidth: 220 }}
+          />
+          <Autocomplete
+            size="small"
+            options={suppliers}
+            value={selected}
+            loading={suppliersStatus === 'loading'}
+            disabled={saving}
+            getOptionLabel={(option) => String(option.name ?? '')}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            onChange={this.handleSupplierChange}
+            sx={{ flex: 1, minWidth: 220 }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label="Lieferant"
+                autoComplete="off"
+                inputProps={{
+                  ...params.inputProps,
+                  spellCheck: false,
+                  autoComplete: 'off',
+                }}
+              />
+            )}
+          />
+          <SingleLineTextEdit
+            size="small"
+            label="Nummer"
+            value={shippingNumber}
+            disabled={saving}
+            onChange={(next) => this.setState({ shippingNumber: next })}
+            sx={{ minWidth: 180, flex: 1 }}
+          />
+        </Stack>
+      </PanelTile>
+    );
+  }
+
+  renderLineField(line, column) {
+    const { id, align, type } = column;
+    const { saving } = this.state;
+    return (
+      <TextField
+        size="small"
+        fullWidth
+        type={type}
+        value={line[id]}
+        disabled={saving}
+        autoComplete="off"
+        onChange={(e) => this.handleLineChange(line.key, id, e.target.value)}
+        slotProps={{
+          htmlInput: {
+            inputMode: type === 'number' ? 'decimal' : 'text',
+            style: { textAlign: align },
+            spellCheck: false,
+            autoComplete: 'off',
+            step: type === 'number' ? 'any' : undefined,
+          },
+        }}
+        sx={{
+          '& input[type=number]': {
+            MozAppearance: 'textfield',
+          },
+          '& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button':
+            {
+              WebkitAppearance: 'none',
+              margin: 0,
+            },
+        }}
+      />
+    );
+  }
+
+  renderArticles() {
+    const { supplierId, lines, saving } = this.state;
+    if (supplierId == null) {
+      return (
+        <PanelTile wide={3} minHeight={160} color="#e2e8f0">
+          <Typography color="text.secondary">
+            Lieferant wählen, um Artikel zu erfassen.
+          </Typography>
+        </PanelTile>
+      );
+    }
+
+    return (
+      <PanelTile wide={3} minHeight={280} color="#bbf7d0" title="Artikel">
+        <Stack spacing={1.5}>
+          <TableContainer>
+            <Table size="small" stickyHeader>
+              <TableHead>
+                <TableRow>
+                  {COLUMNS.map((col) => (
+                    <TableCell
+                      key={col.id}
+                      align={col.align}
+                      sx={{
+                        width: col.width,
+                        whiteSpace: 'nowrap',
+                        bgcolor: '#bbf7d0',
+                      }}
+                    >
+                      {col.label}
+                    </TableCell>
+                  ))}
+                  <TableCell padding="checkbox" sx={{ bgcolor: '#bbf7d0' }} />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {lines.map((line) => (
+                  <TableRow key={line.key}>
+                    {COLUMNS.map((col) => (
+                      <TableCell
+                        key={col.id}
+                        align={col.align}
+                        sx={{ py: 0.75, verticalAlign: 'middle' }}
+                      >
+                        {this.renderLineField(line, col)}
+                      </TableCell>
+                    ))}
+                    <TableCell padding="checkbox" sx={{ py: 0.75 }}>
+                      <IconButton
+                        size="small"
+                        aria-label="Zeile entfernen"
+                        disabled={saving}
+                        onClick={() => this.handleRemoveLine(line.key)}
+                      >
+                        <DeleteOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+            <Button
+              size="small"
+              startIcon={<AddIcon />}
+              disabled={saving}
+              onClick={this.handleAddLine}
+            >
+              Zeile hinzufügen
+            </Button>
+            <Box sx={{ flex: 1 }} />
+            <Button
+              variant="contained"
+              size="small"
+              disabled={saving}
+              onClick={() => void this.handleSave()}
+            >
+              {saving ? 'Speichern…' : 'Speichern'}
+            </Button>
+          </Box>
+        </Stack>
+      </PanelTile>
+    );
+  }
+
+  render() {
+    const { suppliersStatus, suppliersError } = this.state;
+
+    if (suppliersStatus === 'failed') {
+      return (
+        <BackendError
+          error={suppliersError}
+          onRetry={this.handleRetrySuppliers}
+        />
+      );
+    }
+
+    return (
+      <PanelTileGrid>
+        {this.renderHeader()}
+        {this.renderArticles()}
+      </PanelTileGrid>
+    );
+  }
+}
+
+export default LieferungNeuPage;