u

.agents/skills/backend/SKILL.md

@@ -7,7 +7,7 @@ description: >-
 
 # Dash API Routes Overview (All)
 
-Overview of all 209 API endpoints across all modules.
+Overview of all 229 API endpoints across all modules.
 
 ### Notation
 
@@ -16,55 +16,69 @@ Params: path values first, then `query:` and `body:` (`body?` = optional body).
 
 ### Reusable types
 
-- `T1` = `{ article: T2 }`
+- `T1` = `{ order: T2 }`
-- `T2` = `{ id: int, sku: str, name: str, slug: str, desc: str|null, seo: str|null, track_stock: bool, unitamount: num|null, weight: num|null, unit: T31, brand: T28|null, categoryIds: int[], photos: T26[], eans: str[], prices: T37[], suppliers: T12[] }`
+- `T2` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T25[], createdAt?: str, shipping?: T33|null, shippings?: T33[], payment?: T39|null, payments?: T39[], paid?: bool, shipped?: bool, delivered?: bool, orderTotal?: num, paidTotal?: num, orderedQuantity?: num, shippedQuantity?: num, shipments?: T7[] }`
-- `T3` = `{ delivery: T4 }`
+- `T3` = `{ article: T4 }`
-- `T4` = `{ id: int, number: str, type: str, supplierId: int|null, date: str, lines: T21[], files: T9[], externalNumber?: str|null, createdAt?: str, ledger?: T41 }`
+- `T4` = `{ id: int, sku: str, name: str, slug: str, desc: str|null, seo: str|null, track_stock: bool, unitamount: num|null, weight: num|null, unit: T36, brand: T34|null, categoryIds: int[], photos: T31[], eans: str[], prices: T42[], suppliers: T14[] }`
-- `T5` = `{ labeltemplate: T6 }`
+- `T5` = `{ delivery: T6 }`
-- `T6` = `{ id: int, name: str, width: num, height: num, dpi: int, type: str, content: T17, thumb?: str|null }`
+- `T6` = `{ id: int, number: str, type: str, supplierId: int|null, date: str, lines: T25[], files: T11[], externalNumber?: str|null, createdAt?: str, ledger?: T46 }`
-- `T7` = `{ order: T11 }`
+- `T7` = `{ id: int, number: str, type: str, date: str, lines: T25[], shippings: T33[], entityId?: int|null, externalNumber?: str|null, createdAt?: str|null, lineCount?: int, packageCount?: int }`
-- `T8` = `{ quote: T11 }`
+- `T8` = `{ labeltemplate: T9 }`
-- `T9` = `{ id: int, manifestId: int, fileId: int, sort: int, hash: str, mimetype: str, name: str, size: int, created?: str, modified?: str, thumbavif?: str|null, thumbx?: int|null, thumby?: int|null, meta?: { [k]: str }|null }`
+- `T9` = `{ id: int, name: str, width: num, height: num, dpi: int, type: str, content: T21, thumb?: str|null }`
-- `T10` = `{ id: int, name: str, pairingpin?: str|null, token?: str|null, pairedAt?: str|null, clientserial?: str|null, rootCategoryId?: int|null, syncRootArticles?: bool, lastseenAt?: str|null, updatedAt?: str|null, categoryIds?: int[] }`
+- `T10` = `{ quote: T13 }`
-- `T11` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T21[], createdAt?: str }`
+- `T11` = `{ id: int, manifestId: int, fileId: int, sort: int, hash: str, mimetype: str, name: str, size: int, created?: str, modified?: str, thumbavif?: str|null, thumbx?: int|null, thumby?: int|null, meta?: { [k]: str }|null }`
-- `T12` = `{ id: int, articleId: int, entityId: int, pu: num, sort: int, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T43|null }`
+- `T12` = `{ id: int, name: str, pairingpin?: str|null, token?: str|null, pairedAt?: str|null, clientserial?: str|null, rootCategoryId?: int|null, syncRootArticles?: bool, lastseenAt?: str|null, updatedAt?: str|null, categoryIds?: int[] }`
-- `T13` = `{ id: int, entityId: int, addressType: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }`
+- `T13` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T25[], createdAt?: str }`
-- `T14` = `{ ledger: T15[] }`
+- `T14` = `{ id: int, articleId: int, entityId: int, pu: num, sort: int, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T48|null }`
-- `T15` = `{ id: int, manifestarticle_id: int, transaction_type: str, amount: num, transaction_text: str, hash_version: int, prev_hash?: str, sku?: str|null, created_at?: str }`
+- `T15` = `{ id: int, entityId: int, addressType: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }`
-- `T16` = `{ id: int, name: str, sort: int, exclusive: bool, values: T32[], articleCount?: int }`
+- `T16` = `{ ledger: T17[] }`
-- `T17` = `{ objects: T22[] }`
+- `T17` = `{ id: int, manifestarticle_id: int, transaction_type: str, amount: num, transaction_text: str, hash_version: int, prev_hash?: str, sku?: str|null, created_at?: str }`
-- `T18` = `{ objects: T23[] }`
+- `T18` = `{ id: int, name: str, sort: int, exclusive: bool, values: T37[], articleCount?: int }`
-- `T19` = `{ printer: T24 }`
+- `T19` = `{ id: int, companyuser_id: int, provider: str, model: str, created_at: str, updated_at: str, state: str, started_by?: integer,null, first_message?: string,null }`
-- `T20` = `{ entity: T27 }`
+- `T20` = `{ id: int, name: str, rootCategoryId: int|null, languageId: int|null, iso639: str|null, taxrate: num, reducedtaxrate: num, taxfreerate: num }`
-- `T21` = `{ id: int, sku: str|null, name: str|null, pu: num, amount: num, net: num, rebate: num, taxrate: num, comment: str|null }`
+- `T21` = `{ objects: T26[] }`
-- `T22` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
+- `T22` = `{ objects: T27[] }`
-- `T23` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
+- `T23` = `{ printer: T29 }`
-- `T24` = `{ id: int, company_id: int, address: str, type: str, sort: int, model?: str|null, serial?: str|null, desc?: str|null }`
+- `T24` = `{ entity: T32 }`
-- `T25` = `{ amount: num, net: num, taxrate: num, sku?: str|null, name?: str|null, pu?: num, rebate?: num, comment?: str|null }`
+- `T25` = `{ id: int, sku: str|null, name: str|null, pu: num, amount: num, net: num, rebate: num, taxrate: num, comment: str|null }`
-- `T26` = `{ sort: int, fullHash: str, fullW: int, fullH: int, fullSize: int, thumbW: int, thumbH: int, thumbHash: str }`
+- `T26` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
-- `T27` = `{ id: int, customergroupId: int, firstName: str|null, name: str, number: str|null, createdAt: str, updatedAt: str }`
+- `T27` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
-- `T28` = `{ name: str, id?: int|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }`
+- `T28` = `{ shipping: T33 }`
-- `T29` = `{ id: int, companyuser_id: int, provider: str, model: str, created_at: str, updated_at: str, state: str }`
+- `T29` = `{ id: int, company_id: int, address: str, type: str, sort: int, model?: str|null, serial?: str|null, desc?: str|null }`
-- `T30` = `{ article: T35 }`
+- `T30` = `{ amount: num, net: num, taxrate: num, sku?: str|null, name?: str|null, pu?: num, rebate?: num, comment?: str|null }`
-- `T31` = `{ si: str, basesi: str, basesifactor: num, symbol?: str|null, name?: str|null }`
+- `T31` = `{ sort: int, fullHash: str, fullW: int, fullH: int, fullSize: int, thumbW: int, thumbH: int, thumbHash: str }`
-- `T32` = `{ id: int, attributeId: int, value: str, sort: int, articleCount?: int }`
+- `T32` = `{ id: int, customergroupId: int, firstName: str|null, name: str, number: str|null, createdAt: str, updatedAt: str }`
-- `T33` = `{ id: int, name: str, sort: int, exclusive: bool, articleCount?: int }`
+- `T33` = `{ id: int, manifestId: int, number: str, type: str, state: str, trackingCode?: str|null, carrier?: str|null }`
-- `T34` = `{ id: int, iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
+- `T34` = `{ name: str, id?: int|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }`
-- `T35` = `{ id: int, categoryId: int, name: str, sku: str, track_stock: bool }`
+- `T35` = `{ article: T40 }`
-- `T36` = `{ id: int, email: str, selectedCompanyId: int|null, picture?: str }`
+- `T36` = `{ si: str, basesi: str, basesifactor: num, symbol?: str|null, name?: str|null }`
-- `T37` = `{ minmultiplier: num, net: num, taxRate: num, customergroupId: int }`
+- `T37` = `{ id: int, attributeId: int, value: str, sort: int, articleCount?: int }`
-- `T38` = `{ fullHash: str, thumbW: int, thumbH: int, thumbHash: str }`
+- `T38` = `{ id: int, name: str, sort: int, exclusive: bool, articleCount?: int }`
-- `T39` = `{ id: int, entityId: int, contactType: str, contact: str }`
+- `T39` = `{ id: int, accountId: int, manifestId: int, type: str, amount: num }`
-- `T40` = `{ id: int, name: str, createdAt: str, updatedAt: str }`
+- `T40` = `{ id: int, categoryId: int, name: str, sku: str, track_stock: bool }`
-- `T41` = `{ totalPositions: int, completelyOnLedgerPositions: int }`
+- `T41` = `{ id: int, email: str, selectedCompanyId: int|null, picture?: str }`
-- `T42` = `{ warehouse: T44 }`
+- `T42` = `{ minmultiplier: num, net: num, taxRate: num, customergroupId: int }`
-- `T43` = `{ net: num, taxId: int, taxRate?: num|null }`
+- `T43` = `{ fullHash: str, thumbW: int, thumbH: int, thumbHash: str }`
-- `T44` = `{ id: int, name: str, sort: int }`
+- `T44` = `{ id: int, entityId: int, contactType: str, contact: str }`
-- `T45` = `{ id: int, categoryIds: int[] }`
+- `T45` = `{ id: int, name: str, createdAt: str, updatedAt: str }`
+- `T46` = `{ totalPositions: int, completelyOnLedgerPositions: int }`
+- `T47` = `{ warehouse: T49 }`
+- `T48` = `{ net: num, taxId: int, taxRate?: num|null }`
+- `T49` = `{ id: int, name: str, sort: int }`
+- `T50` = `{ id: int, categoryIds: int[] }`
 
 ### Routes
 
 
+### Section: /.well-known
+
+#### OAuth 2.0 Authorization Server Metadata (RFC 8414) — `GET /.well-known/oauth-authorization-server`
+_none_
+- Returns: `200`
+#### OAuth 2.0 Protected Resource Metadata (RFC 9728) — `GET /.well-known/oauth-protected-resource`
+_none_
+- Returns: `200`
+
 ### Section: /account
 
 #### List accounts — `GET /account`
@@ -81,7 +95,7 @@ _none_
 
 #### Create article in category — `POST /article`
 - Params: `body: { categoryId: int, name: str, desc?: str, seo?: str, track_stock?: bool }`
-- Returns: `201 T30`
+- Returns: `201 T35`
 #### Export articles as ZIP — `GET /article/export.zip`
 - Params: `query: categoryId?: int`
 - Returns: `200 zip`
@@ -90,10 +104,10 @@ _none_
 - Returns: `204 void`
 #### Get article by SKU — `GET /article/{sku}`
 - Params: `sku: str`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### Update article by SKU — `PATCH /article/{sku}`
 - Params: `sku: str, body: { name?: str, desc?: str, seo?: str, unitamount?: num, unitSi?: str, track_stock?: bool }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### Get Stückliste (bundle items) for an article — `GET /article/{sku}/articlelist`
 - Params: `sku: str`
 - Returns: `200 { items: { id: int, articleId: int, sku: str, name: str, count: int, sort: int }[] }`
@@ -108,25 +122,25 @@ _none_
 - Returns: `200 { attributevalues: { id: int, attributeId: int, attributeName: str, attributeValueId: int, value: str, sort: int, articleId?: int, exclusive?: bool }[] }`
 #### Set or clear article brand by SKU (null to clear) — `PUT /article/{sku}/brand`
 - Params: `sku: str, body: { brandId: int|null }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### Replace article categories by SKU — `PUT /article/{sku}/categories`
 - Params: `sku: str, body: { categoryIds: int[] }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### List child articles of a parent article — `GET /article/{sku}/children`
 - Params: `sku: str`
 - Returns: `200 { children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }`
 #### Create and attach a new child article to a parent article — `POST /article/{sku}/children`
 - Params: `sku: str, body: { attributeValueId?: int, value?: str, name?: str }`
-- Returns: `201 T30`
+- Returns: `201 T35`
 #### Attach an existing article as a child to a parent article — `PUT /article/{sku}/children`
 - Params: `sku: str, body: { sku: str, attributeValueId?: int, value?: str, reparent?: bool }`
-- Returns: `200 { article: T35, children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }`
+- Returns: `200 { article: T40, children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }`
 #### Remove a child article from a parent article — `DELETE /article/{sku}/children/{childSku}`
 - Params: `sku: str, childSku: str, query: deleteArticle?: bool`
 - Returns: `200 { success: bool, deleted: bool }`
 #### Replace article EANs by SKU — `PUT /article/{sku}/eans`
 - Params: `sku: str, body: { eans: str[] }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### Get article history by SKU — `GET /article/{sku}/history`
 - Params: `sku: str, query: limit?: int`
 - Returns: `200 { history: { id: int, date: str, text: str }[], truncated: bool }`
@@ -147,10 +161,10 @@ _none_
 - Returns: `200 { options: { id: int, articleId: int, sku: str, name: str, count: int, sort: int, mandated: bool }[] }`
 #### Toggle parent mode for an article — `POST /article/{sku}/parent`
 - Params: `sku: str, body: { isParent: bool, attributeNameId?: int }`
-- Returns: `200 T30`
+- Returns: `200 T35`
 #### Replace POS prices by SKU (net > gross; price=net, tax=taxRate %) — `PUT /article/{sku}/prices`
 - Params: `sku: str, body: { prices: { net?: num, gross?: num, price?: num, taxRate?: num, tax?: num, minmultiplier?: num }[] }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### Print article label — `POST /article/{sku}/print`
 - Params: `sku: str, body: { templateId: int, printerId: int, quantity: int }`
 - Returns: `200 { success: bool }`
@@ -165,10 +179,10 @@ _none_
 - Returns: `200 { ok: bool }`
 #### List article suppliers — `GET /article/{sku}/supplier`
 - Params: `sku: str`
-- Returns: `200 { suppliers: T12[] }`
+- Returns: `200 { suppliers: T14[] }`
 #### Assign supplier to article — `POST /article/{sku}/supplier`
 - Params: `sku: str, body: { entityId: int, sku?: str|null, pu?: num, stock?: num|null, sort?: int|null, netPrice?: num|null, taxId?: int|null, taxRate?: num|null }`
-- Returns: `201 { supplier: T12 }`
+- Returns: `201 { supplier: T14 }`
 #### Reorder article suppliers — `PUT /article/{sku}/supplier/order`
 - Params: `sku: str, body: { ids: int[] }`
 - Returns: `200 { ids: int[] }`
@@ -177,31 +191,31 @@ _none_
 - Returns: `204 void`
 #### Update article supplier assignment — `PATCH /article/{sku}/supplier/{id}`
 - Params: `sku: str, id: int, body: { sku?: str|null, pu?: num, stock?: num|null, sort?: int, netPrice?: num|null, taxId?: int|null, taxRate?: num|null }`
-- Returns: `200 { supplier: T12 }`
+- Returns: `200 { supplier: T14 }`
 #### Set article track_stock flag by SKU — `PUT /article/{sku}/track_stock`
 - Params: `sku: str, body: { track_stock: bool }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 #### Set article weight by SKU — `PUT /article/{sku}/weight`
 - Params: `sku: str, body: { weight: num }`
-- Returns: `200 T1`
+- Returns: `200 T3`
 
 ### Section: /attributename
 
 #### List attribute names — `GET /attributename`
 _none_
-- Returns: `200 { attributenames: T16[] }`
+- Returns: `200 { attributenames: T18[] }`
 #### Create attribute name — `POST /attributename`
 - Params: `body: { name: str, sort?: int, exclusive?: bool }`
-- Returns: `201 { attributename: T16 }`
+- Returns: `201 { attributename: T18 }`
 #### Reorder attribute names — `PUT /attributename/order`
 - Params: `body: { attributenameIds: int[] }`
 - Returns: `200 { ok: bool }`
 #### List values for an attribute — `GET /attributename/{attributeId}/value`
 - Params: `attributeId: int`
-- Returns: `200 { values: T32[] }`
+- Returns: `200 { values: T37[] }`
 #### Create value for an attribute — `POST /attributename/{attributeId}/value`
 - Params: `attributeId: int, body: { value: str, sort?: int }`
-- Returns: `201 { attributevalue: T32 }`
+- Returns: `201 { attributevalue: T37 }`
 #### Reorder values of an attribute — `PUT /attributename/{attributeId}/value/order`
 - Params: `attributeId: int, body: { attributevalueIds: int[] }`
 - Returns: `200 { ok: bool }`
@@ -210,7 +224,7 @@ _none_
 - Returns: `200 { ok: bool }`
 #### Update attribute name — `PATCH /attributename/{id}`
 - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }`
-- Returns: `200 { attributename: T16 }`
+- Returns: `200 { attributename: T18 }`
 
 ### Section: /attributevalue
 
@@ -219,28 +233,28 @@ _none_
 - Returns: `200 { ok: bool }`
 #### Update attribute value — `PATCH /attributevalue/{id}`
 - Params: `id: int, body: { value?: str, sort?: int }`
-- Returns: `200 { attributevalue: T32 }`
+- Returns: `200 { attributevalue: T37 }`
 #### Delete attribute value image — `DELETE /attributevalue/{id}/image`
 - Params: `id: int`
-- Returns: `200 { attributevalue: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T38[] } }`
+- Returns: `200 { attributevalue: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T43[] } }`
 #### Add or replace attribute value image — `POST /attributevalue/{id}/image`
 - Params: `id: int, image/avif`
-- Returns: `201 { attributevalue: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T38[] } }`
+- Returns: `201 { attributevalue: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T43[] } }`
 
 ### Section: /auth
 
 #### Login with Google ID token — `POST /auth/login`
 - Params: `body: { idToken: str }`
-- Returns: `200 { message: str, user: T36 }`
+- Returns: `200 { message: str, user: T41 }`
 #### Logout — `POST /auth/logout`
 _none_
 - Returns: `200 { message: str }`
 #### Current user — `GET /auth/me`
 _none_
-- Returns: `200 { user: T36, googleClientId: str }`
+- Returns: `200 { user: T41, googleClientId: str }`
 #### Set selected company — `PUT /auth/selected-company`
 - Params: `body: { companyId: int }`
-- Returns: `200 { user: T36 }`
+- Returns: `200 { user: T41 }`
 
 ### Section: /brand
 
@@ -249,7 +263,7 @@ _none_
 - Returns: `200 { brands: { id: int, name: str, articleCount: int, pics: { fullHash: str, thumbW: int, thumbH: int, thumbHash: str, smallThumbW?: int|null, smallThumbH?: int|null, smallThumbBinary?: str|null }[], gsprpinfo?: str|null }[], total: int, offset: int, limit: int }`
 #### Create brand — `POST /brand`
 - Params: `body: { name: str, gsprpinfo?: str }`
-- Returns: `201 { brand: { id: int, name: str, pics: T38[], gsprpinfo?: str|null } }`
+- Returns: `201 { brand: { id: int, name: str, pics: T43[], gsprpinfo?: str|null } }`
 #### Delete brand — `DELETE /brand/{id}`
 - Params: `id: int`
 - Returns: `204 void`
@@ -258,10 +272,10 @@ _none_
 - Returns: `200 { brand: { id: int, name: str, touchedArticleCount: int, gsprpinfo?: str|null } }`
 #### Delete brand image — `DELETE /brand/{id}/image`
 - Params: `id: int`
-- Returns: `200 { brand: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T38[] } }`
+- Returns: `200 { brand: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T43[] } }`
 #### Add or replace brand image — `POST /brand/{id}/image`
 - Params: `id: int, image/avif`
-- Returns: `201 { brand: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T38[] } }`
+- Returns: `201 { brand: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T43[] } }`
 
 ### Section: /category
 
@@ -276,7 +290,7 @@ _none_
 - Returns: `200 { categoryIds: int[] }`
 #### Category tree — `GET /category/tree`
 _none_
-- Returns: `200 { languageId: int, tree: { id: int, sort: int, posterminalIds: int[], parentId?: int|null, name?: str|null, slug?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }[], articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T28|null }[] }`
+- Returns: `200 { languageId: int, tree: { id: int, sort: int, posterminalIds: int[], parentId?: int|null, name?: str|null, slug?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, articleCount?: int }[], articleCount: int }`
 #### Delete category — `DELETE /category/{id}`
 - Params: `id: int, query: recursive?: bool`
 - Returns: `204 void`
@@ -285,7 +299,7 @@ _none_
 - Returns: `200 { category: { id: int, name: str, slug: str, parentId: int, sort: int } }`
 #### Articles in category — `GET /category/{id}/articles`
 - Params: `id: int`
-- Returns: `200 { articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T28|null }[] }`
+- Returns: `200 { articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T34|null }[] }`
 #### List category attribute values — `GET /category/{id}/attributevalue`
 - Params: `id: int`
 - Returns: `200 { attributevalues: { id: int, attributeId: int, attributeName: str, attributeValueId: int, value: str, sort: int, categoryId?: int, exclusive?: bool }[] }`
@@ -312,10 +326,10 @@ _none_
 
 #### List companies — `GET /company`
 _none_
-- Returns: `200 { companies: T34[] }`
+- Returns: `200 { companies: T20[] }`
 #### Create company — `POST /company`
 - Params: `body: { iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
-- Returns: `201 { company: T34, user: T36 }`
+- Returns: `201 { company: T20, user: T41 }`
 #### Get company history — `GET /company/history`
 - Params: `query: limit?: int`
 - Returns: `200 { history: { id: int, date: str, text: str, companyuserId?: int|null }[], truncated: bool }`
@@ -339,7 +353,7 @@ _none_
 - Returns: `204 void`
 #### Update company — `PUT /company/{id}`
 - Params: `id: int, body: { iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
-- Returns: `200 { company: T34 }`
+- Returns: `200 { company: T20 }`
 
 ### Section: /customergroup
 
@@ -348,7 +362,7 @@ _none_
 - Returns: `200 { customergroups: { id: int, name: str, sort: int, editable: bool }[] }`
 #### Create customer group — `POST /customergroup`
 - Params: `body: { name: str }`
-- Returns: `201 { customergroup: T44 }`
+- Returns: `201 { customergroup: T49 }`
 #### Reorder customer groups — `PUT /customergroup/order`
 - Params: `body: { customergroupIds: int[] }`
 - Returns: `200 { customergroupIds: int[] }`
@@ -357,16 +371,16 @@ _none_
 - Returns: `204 void`
 #### Update customer group — `PATCH /customergroup/{id}`
 - Params: `id: int, body: { name: str }`
-- Returns: `200 { customergroup: T44 }`
+- Returns: `200 { customergroup: T49 }`
 
 ### Section: /delivery
 
 #### List deliveries — `GET /delivery`
 _none_
-- Returns: `200 { deliveries: { id: int, number: str, type: str, supplierId: int|null, date: str, externalNumber?: str|null, createdAt?: str, ledger?: T41 }[] }`
+- Returns: `200 { deliveries: { id: int, number: str, type: str, supplierId: int|null, date: str, externalNumber?: str|null, createdAt?: str, ledger?: T46 }[] }`
 #### Create delivery — `POST /delivery`
-- Params: `body: { externalNumber: str, date: str, lines: T25[], supplierId?: int|null, files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }`
+- Params: `body: { externalNumber: str, date: str, lines: T30[], supplierId?: int|null, files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }`
-- Returns: `201 T3`
+- Returns: `201 T5`
 #### Parse document (SSE) — `POST /delivery/parse`
 - Params: `form: { file: str }`
 - Returns: `200 SSE`
@@ -384,10 +398,10 @@ _none_
 - Returns: `204 void`
 #### Get delivery — `GET /delivery/{id}`
 - Params: `id: int`
-- Returns: `200 T3`
+- Returns: `200 T5`
 #### Update delivery — `PATCH /delivery/{id}`
-- Params: `id: int, body: { externalNumber?: str|null, date?: str, supplierId?: int|null, lines?: T25[], files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }`
+- Params: `id: int, body: { externalNumber?: str|null, date?: str, supplierId?: int|null, lines?: T30[], files?: { mimetype: str, name: str, content: str, sort?: int, size?: int, hash?: str, created?: str, modified?: str, meta?: { [k]: str } }[] }`
-- Returns: `200 T3`
+- Returns: `200 T5`
 #### Get delivery attachment file content — `GET /delivery/{id}/file/{fileId}`
 - Params: `id: int, fileId: int, query: download?: bool`
 - Returns: `200 str`
@@ -396,46 +410,46 @@ _none_
 
 #### List entities — `GET /entity`
 - Params: `query: customergroupId?: int, role?: str`
-- Returns: `200 { entities: T27[] }`
+- Returns: `200 { entities: T32[] }`
 #### Create entity — `POST /entity`
 - Params: `body: { customergroupId: int, name: str, firstName?: str|null, number?: str }`
-- Returns: `201 T20`
+- Returns: `201 T24`
 #### Peek next customer number — `GET /entity/next-number`
 _none_
 - Returns: `200 { number: str }`
 #### List entity addresses — `GET /entity/{entityId}/address`
 - Params: `entityId: int`
-- Returns: `200 { addresses: T13[] }`
+- Returns: `200 { addresses: T15[] }`
 #### Create entity address — `POST /entity/{entityId}/address`
 - Params: `entityId: int, body: { addressType: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }`
-- Returns: `201 { address: T13 }`
+- Returns: `201 { address: T15 }`
 #### Delete entity address — `DELETE /entity/{entityId}/address/{id}`
 - Params: `entityId: int, id: int`
 - Returns: `204 void`
 #### Update entity address — `PATCH /entity/{entityId}/address/{id}`
 - Params: `entityId: int, id: int, body: { addressType?: str, firstName?: str|null, name?: str|null, street?: str|null, streetNumber?: str|null, zip?: str|null, city?: str|null, county?: str|null }`
-- Returns: `200 { address: T13 }`
+- Returns: `200 { address: T15 }`
 #### List entity contacts — `GET /entity/{entityId}/contact`
 - Params: `entityId: int`
-- Returns: `200 { contacts: T39[] }`
+- Returns: `200 { contacts: T44[] }`
 #### Create entity contact — `POST /entity/{entityId}/contact`
 - Params: `entityId: int, body: { contactType: str, contact: str }`
-- Returns: `201 { contact: T39 }`
+- Returns: `201 { contact: T44 }`
 #### Delete entity contact — `DELETE /entity/{entityId}/contact/{id}`
 - Params: `entityId: int, id: int`
 - Returns: `204 void`
 #### Update entity contact — `PATCH /entity/{entityId}/contact/{id}`
 - Params: `entityId: int, id: int, body: { contactType?: str, contact?: str }`
-- Returns: `200 { contact: T39 }`
+- Returns: `200 { contact: T44 }`
 #### Delete entity — `DELETE /entity/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Get entity — `GET /entity/{id}`
 - Params: `id: int`
-- Returns: `200 T20`
+- Returns: `200 T24`
 #### Update entity — `PATCH /entity/{id}`
 - Params: `id: int, body: { name?: str, firstName?: str|null, number?: str|null }`
-- Returns: `200 T20`
+- Returns: `200 T24`
 
 ### Section: /events
 
@@ -477,50 +491,74 @@ _none_
 _none_
 - Returns: `200 { labeltemplates: { id: int, name: str, width: num, height: num, dpi: int, type: str, thumb?: str|null }[] }`
 #### Create label template — `POST /labeltemplate`
-- Params: `body: { name: str, width: num, height: num, dpi: int, type: str, content: T18 }`
+- Params: `body: { name: str, width: num, height: num, dpi: int, type: str, content: T22 }`
-- Returns: `201 T5`
+- Returns: `201 T8`
 #### Delete label template — `DELETE /labeltemplate/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Get label template by ID — `GET /labeltemplate/{id}`
 - Params: `id: int`
-- Returns: `200 T5`
+- Returns: `200 T8`
 #### Update label template (partial) — `PATCH /labeltemplate/{id}`
-- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T18 }`
+- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T22 }`
-- Returns: `200 T5`
+- Returns: `200 T8`
 #### Update label template — `PUT /labeltemplate/{id}`
-- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T18 }`
+- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T22 }`
-- Returns: `200 T5`
+- Returns: `200 T8`
 
 ### Section: /ledger
 
 #### Query ledger by manifest article ID or SKU — `GET /ledger`
 - Params: `query: manifestarticle_id?: int, sku?: str, transaction_type?: str`
-- Returns: `200 T14`
+- Returns: `200 T16`
 #### Add ledger entry — `POST /ledger`
 - Params: `body: { manifestarticle_id: int, transaction_type: str, amount: num, transaction_text: str }`
-- Returns: `201 { ledger: T15 }`
+- Returns: `201 { ledger: T17 }`
 #### Query ledger by manifest article ID — `GET /ledger/manifestarticle/{manifestarticleId}`
 - Params: `manifestarticleId: int, query: transaction_type?: str`
-- Returns: `200 T14`
+- Returns: `200 T16`
 #### Query ledger by article SKU — `GET /ledger/sku/{sku}`
 - Params: `sku: str, query: transaction_type?: str`
-- Returns: `200 T14`
+- Returns: `200 T16`
+
+### Section: /mcp
+
+#### Model Context Protocol (MCP) Streamable HTTP endpoint — `POST /mcp`
+_none_
+- Returns: `200`
+#### List active MCP client authorizations — `GET /mcp/authorizations`
+_none_
+- Returns: `200`
+#### Revoke MCP client authorizations — `DELETE /mcp/authorizations/{clientId}`
+- Params: `clientId: str`
+- Returns: `200`
+#### Get MCP authorization prompt details — `GET /mcp/authorize`
+- Params: `query: client_id: str, redirect_uri: str, response_type?: str, code_challenge?: str, code_challenge_method?: str, state?: str, scope?: str`
+- Returns: `200`
+#### Grant or deny MCP client authorization — `POST /mcp/authorize`
+- Params: `body: { client_id: str, redirect_uri: str, action: str, code_challenge?: str, code_challenge_method?: str, state?: str, scope?: str }`
+- Returns: `200`
+#### List registered MCP clients — `GET /mcp/clients`
+_none_
+- Returns: `200`
+#### Delete registered MCP client — `DELETE /mcp/clients/{clientId}`
+- Params: `clientId: str`
+- Returns: `200`
 
 ### Section: /modelconversation
 
 #### List conversations — `GET /modelconversation`
 _none_
-- Returns: `200 { conversations: T29[] }`
+- Returns: `200 { conversations: T19[] }`
 #### Create conversation — `POST /modelconversation`
 - Params: `body: { provider: str, model: str }`
-- Returns: `201 { conversation: T29 }`
+- Returns: `201 { conversation: T19 }`
 #### Delete conversation — `DELETE /modelconversation/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Get conversation — `GET /modelconversation/{id}`
 - Params: `id: int`
-- Returns: `200 { conversation: T29 }`
+- Returns: `200 { conversation: T19 }`
 #### List conversation messages — `GET /modelconversation/{id}/message`
 - Params: `id: int`
 - Returns: `200 { messages: { id: int, conversation_id: int, created_at: str, role: str, message: str }[] }`
@@ -540,35 +578,56 @@ _none_
 - Params: `id: int, body: { prefix?: str, padding?: int, next?: int }`
 - Returns: `200 { number: { id: int, type: str, prefix: str, padding: int, next: int } }`
 
+### Section: /oauth
+
+#### OAuth 2.1 Authorization Endpoint (RFC 6749 & RFC 7636) — `GET /oauth/authorize`
+- Params: `query: client_id?: str, redirect_uri?: str, response_type?: str, code_challenge?: str, code_challenge_method?: str, state?: str`
+_no response body_
+#### OAuth 2.0 Token Introspection (RFC 7662) — `POST /oauth/introspect`
+_none_
+- Returns: `200`
+#### Dynamic Client Registration (RFC 7591) — `POST /oauth/register`
+- Params: `body: { redirect_uris: str[], client_name?: str }`
+- Returns: `201`
+#### OAuth 2.1 Token Endpoint (RFC 6749 & RFC 7636) — `POST /oauth/token`
+- Params: `application/x-www-form-urlencoded`
+- Returns: `200`
+
 ### Section: /order
 
 #### List orders — `GET /order`
-- Params: `query: offset?: int, limit?: int`
+- Params: `query: offset?: int, limit?: int, search?: str, onlyUnpaid?: bool, onlyUndelivered?: bool, seekMonths?: int`
-- Returns: `200 { orders: T11[], total: int, offset: int, limit: int }`
+- Returns: `200 { orders: T2[], total: int, offset: int, limit: int }`
 #### Create order — `POST /order`
-- Params: `body: { number: str, date: str, lines: T25[], entityId?: int|null }`
+- Params: `body: { number: str, date: str, lines: T30[], entityId?: int|null }`
-- Returns: `201 T7`
+- Returns: `201 T1`
 #### Delete order — `DELETE /order/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Get order — `GET /order/{id}`
 - Params: `id: int`
-- Returns: `200 T7`
+- Returns: `200 T1`
 #### Update order — `PATCH /order/{id}`
-- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T25[] }`
+- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T30[] }`
-- Returns: `200 T7`
+- Returns: `200 T1`
 #### List payments of an order — `GET /order/{id}/payment`
 - Params: `id: int`
-- Returns: `200 { payments: { id: int, accountId: int, manifestId: int, type: str, amount: num }[] }`
+- Returns: `200 { payments: T39[] }`
 #### Add payment to an order — `POST /order/{id}/payment`
 - Params: `id: int, body: { accountId: int, type: str, amount: num }`
-- Returns: `201 { payment: { id: int, accountId: int, manifestId: int, type: str, amount: num } }`
+- Returns: `201 { payment: T39 }`
+#### List shipments of an order — `GET /order/{id}/shipment`
+- Params: `id: int`
+- Returns: `200 { shipments: T7[] }`
+#### Create shipment for an order — `POST /order/{id}/shipment`
+- Params: `id: int, body: { lines: { sku: str, amount: num, name?: str, pu?: num, net?: num, rebate?: num, taxrate?: num, comment?: str }[], date?: str, externalNumber?: str }`
+- Returns: `201 { shipment: T7 }`
 #### List shippings of an order — `GET /order/{id}/shipping`
 - Params: `id: int`
-- Returns: `200 { shippings: { id: int, manifestId: int, number: str, type: str, state: str }[] }`
+- Returns: `200 { shippings: T33[] }`
 #### Create shipping for an order — `POST /order/{id}/shipping`
-- Params: `id: int, body: { type: str, state: str }`
+- Params: `id: int, body: { type: str, state: str, warehouseId?: int }`
-- Returns: `201 { shipping: { id: int, manifestId: int, number: str, type: str, state: str } }`
+- Returns: `201 T28`
 
 ### Section: /package
 
@@ -586,37 +645,37 @@ _none_
 
 #### List POS terminals — `GET /posterminal`
 _none_
-- Returns: `200 { posterminals: T10[] }`
+- Returns: `200 { posterminals: T12[] }`
 #### Create POS terminal — `PUT /posterminal`
 - Params: `body: { name: str, rootCategoryId?: int|null, syncRootArticles?: bool }`
-- Returns: `200 { posterminal: T10 }`
+- Returns: `200 { posterminal: T12 }`
 #### Delete POS terminal — `DELETE /posterminal/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Update POS terminal — `PATCH /posterminal/{id}`
 - Params: `id: int, body: { name?: str, rootCategoryId?: int|null, syncRootArticles?: bool, pairingpin?: str|null }`
-- Returns: `200 { posterminal: T10 }`
+- Returns: `200 { posterminal: T12 }`
 #### Disable all categories on terminal — `DELETE /posterminal/{id}/all`
 - Params: `id: int`
-- Returns: `200 T45`
+- Returns: `200 T50`
 #### Enable all categories on terminal — `PUT /posterminal/{id}/all`
 - Params: `id: int`
-- Returns: `200 T45`
+- Returns: `200 T50`
 #### Disable category on terminal — `DELETE /posterminal/{id}/category/{categoryId}`
 - Params: `id: int, categoryId: int`
-- Returns: `200 T45`
+- Returns: `200 T50`
 #### Enable category on terminal — `PUT /posterminal/{id}/category/{categoryId}`
 - Params: `id: int, categoryId: int`
-- Returns: `200 T45`
+- Returns: `200 T50`
 
 ### Section: /printer
 
 #### List printers — `GET /printer`
 _none_
-- Returns: `200 { printers: T24[] }`
+- Returns: `200 { printers: T29[] }`
 #### Create printer — `POST /printer`
 - Params: `body: { address: str, type: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }`
-- Returns: `201 T19`
+- Returns: `201 T23`
 #### Reorder printers — `PUT /printer/order`
 - Params: `body: { printerIds: int[] }`
 - Returns: `200 { printerIds: int[] }`
@@ -625,22 +684,22 @@ _none_
 - Returns: `204 void`
 #### Get printer by ID — `GET /printer/{id}`
 - Params: `id: int`
-- Returns: `200 T19`
+- Returns: `200 T23`
 #### Update printer (partial) — `PATCH /printer/{id}`
 - Params: `id: int, body: { address?: str, type?: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }`
-- Returns: `200 T19`
+- Returns: `200 T23`
 #### Update printer — `PUT /printer/{id}`
 - Params: `id: int, body: { address?: str, type?: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }`
-- Returns: `200 T19`
+- Returns: `200 T23`
 
 ### Section: /propertyname
 
 #### List property names — `GET /propertyname`
 _none_
-- Returns: `200 { propertynames: T33[] }`
+- Returns: `200 { propertynames: T38[] }`
 #### Create property name — `POST /propertyname`
 - Params: `body: { name: str, sort?: int, exclusive?: bool }`
-- Returns: `201 { propertyname: T33 }`
+- Returns: `201 { propertyname: T38 }`
 #### Reorder property names — `PUT /propertyname/order`
 - Params: `body: { propertynameIds: int[] }`
 - Returns: `200 { ok: bool }`
@@ -649,7 +708,7 @@ _none_
 - Returns: `200 { ok: bool }`
 #### Update property name — `PATCH /propertyname/{id}`
 - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }`
-- Returns: `200 { propertyname: T33 }`
+- Returns: `200 { propertyname: T38 }`
 
 ### Section: /public
 
@@ -672,17 +731,17 @@ _none_
 _none_
 - Returns: `200 { quotes: { id: int, number: str, type: str, entityId: int|null, date: str, createdAt?: str }[] }`
 #### Create quote — `POST /quote`
-- Params: `body: { number: str, date: str, lines: T25[], entityId?: int|null }`
+- Params: `body: { number: str, date: str, lines: T30[], entityId?: int|null }`
-- Returns: `201 T8`
+- Returns: `201 T10`
 #### Delete quote — `DELETE /quote/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Get quote — `GET /quote/{id}`
 - Params: `id: int`
-- Returns: `200 T8`
+- Returns: `200 T10`
 #### Update quote — `PATCH /quote/{id}`
-- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T25[] }`
+- Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T30[] }`
-- Returns: `200 T8`
+- Returns: `200 T10`
 
 ### Section: /serper
 
@@ -699,11 +758,29 @@ _none_
   - `done`: `{ "total": 100 }`
   - `error`: `{ "error": "…" }`
 
+### Section: /shipment
+
+#### Delete shipment — `DELETE /shipment/{id}`
+- Params: `id: int`
+- Returns: `204 void`
+#### Get shipment by ID — `GET /shipment/{id}`
+- Params: `id: int`
+- Returns: `200 { shipment: T7 }`
+#### List packages of a shipment — `GET /shipment/{id}/shipping`
+- Params: `id: int`
+- Returns: `200 { shippings: T33[] }`
+#### Create package for a shipment — `POST /shipment/{id}/shipping`
+- Params: `id: int, body: { type: str, state: str, trackingCode?: str, carrier?: str, warehouseId?: int }`
+- Returns: `201 T28`
+
 ### Section: /shipping
 
 #### Delete shipping — `DELETE /shipping/{id}`
 - Params: `id: int`
 - Returns: `204 void`
+#### Update shipping — `PATCH /shipping/{id}`
+- Params: `id: int, body: { type?: str, state?: str, trackingCode?: str, carrier?: str, warehouseId?: int }`
+- Returns: `200 T28`
 #### List packages of a shipping — `GET /shipping/{id}/package`
 - Params: `id: int`
 - Returns: `200 { packages: { id: int, shippingId: int, entityaddressId: int, number: str, type: str, state: str, details?: str|null }[] }`
@@ -721,28 +798,28 @@ _none_
 
 #### Adjust stock manually — `POST /stock/adjust`
 - Params: `body: { sku?: str, warehouseId?: int, amount?: num, text?: str|null, lines?: { sku: str, amount: num, warehouseId?: int, text?: str }[] }`
-- Returns: `201 { manifest: { id: int, number: str, type: str, date: str, createdAt: str }, lines: { manifestarticle_id: int, sku: str, name: str, warehouse_id: int, amount: num, text: str }[], ledger: T15[] }`
+- Returns: `201 { manifest: { id: int, number: str, type: str, date: str, createdAt: str }, lines: { manifestarticle_id: int, sku: str, name: str, warehouse_id: int, amount: num, text: str }[], ledger: T17[] }`
 
 ### Section: /supplier
 
 #### List suppliers — `GET /supplier`
 _none_
-- Returns: `200 { suppliers: T40[] }`
+- Returns: `200 { suppliers: T45[] }`
 #### Create supplier — `POST /supplier`
 - Params: `body: { name: str }`
-- Returns: `201 { supplier: T40 }`
+- Returns: `201 { supplier: T45 }`
 #### Delete supplier — `DELETE /supplier/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Update supplier — `PATCH /supplier/{id}`
 - Params: `id: int, body: { name: str }`
-- Returns: `200 { supplier: T40 }`
+- Returns: `200 { supplier: T45 }`
 #### List supplier articles by SKUs — `GET /supplier/{id}/articles`
 - Params: `id: int, query: skus?: string`
-- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T43|null }[] }`
+- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T48|null }[] }`
 #### Query supplier articles by SKUs (bulk) — `POST /supplier/{id}/articles`
 - Params: `id: int, body?: { skus?: str[] }`
-- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T43|null }[] }`
+- Returns: `200 { articles: { id: int, articleId: int, entityId: int, pu: num, sort: int, article: { id: int, sku: str, name?: str|null, slug?: str|null, photos?: { sort: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str }[], eans?: str[] }, supplierName?: str|null, sku?: str|null, stock?: num|null, priceId?: int|null, price?: T48|null }[] }`
 
 ### Section: /thumb
 
@@ -757,10 +834,10 @@ _none_
 - Returns: `204 void`
 #### List units — `GET /unit`
 _none_
-- Returns: `200 { units: T31[] }`
+- Returns: `200 { units: T36[] }`
 #### Upsert unit — `PUT /unit`
 - Params: `body: { si: str, basesi: str, basesifactor: num, symbol: str, name: str }`
-- Returns: `200 { unit: T31 }`
+- Returns: `200 { unit: T36 }`
 
 ### Section: /v1
 
@@ -802,7 +879,7 @@ _none_
 - Returns: `200 str`
 #### Execute a virtual filesystem applet — `POST /vfs/{*path}`
 - Params: `path: str, body?: { input?: {}, timeout?: int, max_output?: int }`
-- Returns: `200 { ok: bool, result: str, columns: { name: str, type: str }[], rows: int, stdout: str, consoleLines: int, durationMs: int, warnings?: str[], truncated?: bool, truncationNote?: str }`
+- Returns: `200 { ok: bool, result: str, columns: { name: str, type: str }[], rows: int, stdout: str, consoleLines: int, durationMs: int, description?: str, warnings?: str[], truncated?: bool, truncationNote?: str }`
 #### Create or overwrite a virtual filesystem file — `PUT /vfs/{*path}`
 - Params: `path: str, body: { content: str, mime?: str }`
 - Returns: `200 { success: bool, file: { name: str, size: int, mime: str, updated_at: str } }`
@@ -811,10 +888,10 @@ _none_
 
 #### List warehouses — `GET /warehouse`
 _none_
-- Returns: `200 { warehouses: T44[] }`
+- Returns: `200 { warehouses: T49[] }`
 #### Create warehouse — `POST /warehouse`
 - Params: `body: { name: str, sort?: int }`
-- Returns: `201 T42`
+- Returns: `201 T47`
 #### Reorder warehouses — `PUT /warehouse/order`
 - Params: `body: { warehouseIds: int[] }`
 - Returns: `200 { warehouseIds: int[] }`
@@ -823,10 +900,10 @@ _none_
 - Returns: `204 void`
 #### Get warehouse by ID — `GET /warehouse/{id}`
 - Params: `id: int`
-- Returns: `200 T42`
+- Returns: `200 T47`
 #### Update warehouse (partial) — `PATCH /warehouse/{id}`
 - Params: `id: int, body: { name?: str, sort?: int }`
-- Returns: `200 T42`
+- Returns: `200 T47`
 #### Update warehouse — `PUT /warehouse/{id}`
 - Params: `id: int, body: { name?: str, sort?: int }`
-- Returns: `200 T42`
+- Returns: `200 T47`

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

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

src/App.jsx

@@ -57,10 +57,16 @@ class App extends PureComponent {
     }
 
     if (status !== 'authed') {
+      if (typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize') {
+        const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
+        window.history.replaceState(null, '', `/login?returnTo=${returnTo}`);
+      }
       return <LoginPage />;
     }
 
-    if (user?.selectedCompanyId == null) {
+    const isOAuthAuthorize = typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize';
+
+    if (user?.selectedCompanyId == null && !isOAuthAuthorize) {
       return <CompanySetupDialog />;
     }
 

src/api/account.js

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

src/api/category.js

@@ -1,7 +1,7 @@
 import { http, httpBinary, httpGetBinary } from './http.js';
 
 export const category = {
-  /** GET /api/category/tree → { languageId, tree, articles } (company from session) */
+  /** GET /api/category/tree → { languageId, tree, articleCount } (company from session) */
   // #region GET /api/category/tree — getTree
   getTree() {
     return http('/api/category/tree');

src/api/index.js

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

src/api/mcp.js

@@ -0,0 +1,40 @@
+import { http } from './http.js';
+
+export const mcp = {
+  // #region GET /api/mcp/authorize — getAuthorize
+  // MARK: calls GET /api/mcp/authorize
+  async getAuthorize(searchParams) {
+    const query = typeof searchParams === 'string'
+      ? (searchParams.startsWith('?') ? searchParams.slice(1) : searchParams)
+      : new URLSearchParams(searchParams).toString();
+    const url = query ? `/api/mcp/authorize?${query}` : '/api/mcp/authorize';
+    return await http(url);
+  },
+  // #endregion
+
+  // #region POST /api/mcp/authorize — postAuthorize
+  // MARK: calls POST /api/mcp/authorize
+  async postAuthorize(payload) {
+    return await http('/api/mcp/authorize', {
+      method: 'POST',
+      body: payload,
+    });
+  },
+  // #endregion
+
+  // #region GET /api/mcp/authorizations — listAuthorizations
+  // MARK: calls GET /api/mcp/authorizations
+  async listAuthorizations() {
+    return await http('/api/mcp/authorizations');
+  },
+  // #endregion
+
+  // #region DELETE /api/mcp/authorizations/:clientId — revokeAuthorization
+  // MARK: calls DELETE /api/mcp/authorizations/:clientId
+  async revokeAuthorization(clientId) {
+    return await http(`/api/mcp/authorizations/${encodeURIComponent(clientId)}`, {
+      method: 'DELETE',
+    });
+  },
+  // #endregion
+};

src/api/order.js

@@ -7,15 +7,21 @@ import { http } from './http.js';
  */
 export const order = {
   /**
-   * GET /api/order?offset=0&limit=20
+   * GET /api/order?offset=0&limit=50&search=...&onlyUnpaid=true&onlyUndelivered=true&seekMonths=-1
-   * @param {{ offset?: number, limit?: number }} [params]
+   * @param {{ offset?: number, limit?: number, search?: string, onlyUnpaid?: boolean, onlyUndelivered?: boolean, seekMonths?: number }} [params]
    * → { orders: Order[], total: number, offset: number, limit: number }
    */
   // #region GET /api/order — list
-  list({ offset = 0, limit = 20 } = {}) {
+  list({ offset = 0, limit = 50, search, onlyUnpaid, onlyUndelivered, seekMonths } = {}) {
     const params = new URLSearchParams();
-    if (offset != null) params.set('offset', String(offset));
+    if (offset != null) params.set('offset', String(Math.max(0, Math.floor(Number(offset) || 0))));
-    if (limit != null) params.set('limit', String(limit));
+    if (limit != null) params.set('limit', String(Math.max(1, Math.floor(Number(limit) || 50))));
+    if (search && String(search).trim()) params.set('search', String(search).trim());
+    if (onlyUnpaid === true || onlyUnpaid === 'true') params.set('onlyUnpaid', 'true');
+    if (onlyUndelivered === true || onlyUndelivered === 'true') params.set('onlyUndelivered', 'true');
+    if (seekMonths != null && Number(seekMonths) < 0) {
+      params.set('seekMonths', String(Math.floor(Number(seekMonths))));
+    }
     const qs = params.toString();
     return http(`/api/order${qs ? `?${qs}` : ''}`);
   },

src/api/payment.js

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

src/api/shipment.js

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

src/api/shipping.js

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

src/appRouter.jsx

@@ -21,16 +21,34 @@ import AuftragAngebotEditPage from './routes/auftrag/_quoteId';
 import AuftragBestellungPage from './routes/auftrag/bestellung';
 import AuftragBestellungNeuPage from './routes/auftrag/bestellung/neu';
 import AuftragBestellungEditPage from './routes/auftrag/bestellung/_orderId';
+import AuftragAusliefernPage from './routes/auftrag/ausliefern';
+import AuftragZahlungenPage from './routes/auftrag/zahlungen';
+
 import KundeListePage from './routes/kunde';
 import KundeNeuPage from './routes/kunde/neu';
 import KundeGruppenPage from './routes/kunde/gruppen';
 import KundeEditPage from './routes/kunde/_entityId';
 import StatisticsPage from './routes/infos/StatisticsPage';
+import OAuthAuthorizePage from './routes/oauth/OAuthAuthorizePage';
 
 const ArticleHistoryPage = lazy(() => import('./routes/infos/ArticleHistoryPage'));
 const GlobalHistoryPage = lazy(() => import('./routes/infos/GlobalHistoryPage'));
 
+function LoginRedirect() {
+  const params = new URLSearchParams(window.location.search);
+  const returnTo = params.get('returnTo');
+  return <Navigate to={returnTo || '/artikel'} replace />;
+}
+
 const routes = [
+  {
+    path: '/oauth/authorize',
+    element: <OAuthAuthorizePage />,
+  },
+  {
+    path: '/login',
+    element: <LoginRedirect />,
+  },
   {
     path: '/',
     element: <AppShell />,
@@ -83,7 +101,10 @@ const routes = [
           { path: 'bestellung', element: <AuftragBestellungPage /> },
           { path: 'bestellung/neu', element: <AuftragBestellungNeuPage /> },
           { path: 'bestellung/:orderId', element: <AuftragBestellungEditPage /> },
+          { path: 'ausliefern', element: <AuftragAusliefernPage /> },
+          { path: 'zahlungen', element: <AuftragZahlungenPage /> },
           { path: ':quoteId', element: <AuftragAngebotEditPage /> },
+
         ],
       },
       {

src/automats/accountAutomat.js

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

src/automats/categoryAutomat.js

@@ -54,6 +54,7 @@ import {
  * @property {string|null} languageId
  * @property {Record<string,object>|null} categories  id → node map
  * @property {number|string|null} rootCategoryId
+ * @property {number} articleCount Total parent articles in tree
  * @property {boolean} renameMode
  * @property {'idle'|'loading'|'succeeded'|'failed'} treeStatus
  * @property {string|null} error
@@ -66,6 +67,7 @@ const initialState = {
   languageId: null,
   categories: null,
   rootCategoryId: null,
+  articleCount: 0,
   renameMode: false,
   treeStatus: 'idle',
   error: null,
@@ -87,6 +89,8 @@ export function getCategoryState() {
   return { categories: state.categories, rootCategoryId: state.rootCategoryId };
 }
 
+export const selectCategoryTreeArticleCount = () => categoryAutomat.state.articleCount;
+
 /**
  * Resolves once the category tree has loaded.
  *
@@ -123,6 +127,7 @@ const actions = {
           languageId: parsed.languageId,
           categories: parsed.categories,
           rootCategoryId: parsed.rootCategoryId,
+          articleCount: parsed.articleCount,
           error: null,
           viewsLoading: true,
         });

src/automats/companyAutomat.js

@@ -106,8 +106,10 @@ export const selectCompanyId = () => companyAutomat.state.current?.id ?? null;
 export const selectCompanyStatus = () => companyAutomat.state.status;
 export const selectCompanyName = () => companyAutomat.state.current?.name;
 export const selectCompanyIso639 = () => companyAutomat.state.current?.iso639;
+export const selectCompanyLanguageId = () => companyAutomat.state.current?.languageId ?? null;
 export const selectCompanyTaxrate = () => companyAutomat.state.current?.taxrate ?? null;
 export const selectCompanyReducedTaxrate = () => companyAutomat.state.current?.reducedtaxrate ?? null;
+export const selectCompanyTaxfreerate = () => companyAutomat.state.current?.taxfreerate ?? null;
 export const selectCompanyRootCategoryId = () => companyAutomat.state.current?.rootCategoryId ?? null;
 
 export default companyAutomat;

src/automats/index.js

@@ -81,8 +81,10 @@ export {
 export { default as entityAutomat } from './entityAutomat';
 export { default as customergroupAutomat } from './customergroupAutomat';
 export { default as numberAutomat } from './numberAutomat';
+export { default as accountAutomat } from './accountAutomat';
 export { createListAutomat, selectListItems, selectListStatus } from './createListAutomat';
 
+
 /** Per-SKU article detail views keyed by SKU. */
 export { articleHistoryAutomat, articleSupplierAutomat } from './articleDetailAutomat';
 
@@ -104,8 +106,10 @@ export {
   selectCompanyStatus,
   selectCompanyName,
   selectCompanyIso639,
+  selectCompanyLanguageId,
   selectCompanyTaxrate,
   selectCompanyReducedTaxrate,
+  selectCompanyTaxfreerate,
   selectCompanyRootCategoryId,
 } from './companyAutomat';
 
@@ -133,6 +137,7 @@ export {
   normalizeCategoryMap,
   getCategoryState,
   whenCategoryTreeReady,
+  selectCategoryTreeArticleCount,
 } from './categoryAutomat';
 
 /**

src/automats/orderAutomat.js

@@ -1,10 +1,10 @@
 /**
  * @file orderAutomat.js
- * @description Manages cached and paginated company sales orders (`GET /api/order`).
+ * @description Manages cached and chunk-paginated company sales orders (`GET /api/order`).
  *
  * Upstream Triggers:
  * - `authAutomat`: Triggers `actions.reset()` on `'anon'` or when `selectedCompanyId` changes.
- * - UI / Routes: On-demand calls to `ensureLoaded()`, `load()`, or `reload()`.
+ * - UI / Routes: Calls `getItems()`, `requireChunk(chunkIndex)`, `loadChunk(chunkIndex)`, or `reload()`.
  */
 
 import { Automat } from 'react-automat';
@@ -38,46 +38,100 @@ import authAutomat from './authAutomat';
 
 /**
  * @typedef {Object} OrderAutomatState
- * @property {Order[]} items Loaded orders for the current page.
+ * @property {Order[]|null} items Pre-filled array of orders/nulls, initially null.
  * @property {number} total Total unpaged count for pagination calculation.
- * @property {number} offset Current 0-based offset.
- * @property {number} limit Current page limit.
  * @property {'idle'|'loading'|'ready'|'failed'} status Load lifecycle state.
  * @property {Error|string|null} error Last load error.
  */
 
+export const CHUNK_SIZE = 50;
+const PREFETCH_CHUNKS = 1;
+const CHUNK_DEBOUNCE_MS = 130;
+
 const initialState = {
-  items: [],
+  items: null,
+  total: 0,
   filter: '',
   onlyUnpaid: false,
   onlyUndelivered: false,
   seekMonths: 0,
   seekYears: 0,
   negativeSeekMonths: 0,
-  total: 0,
-  offset: 0,
-  limit: 20,
-  hasMore: false,
-  loadingMore: false,
   status: 'idle',
   error: null,
 };
 
 let automat;
-let inflightLoad = null;
+let queryEpoch = 0;
-let inflightMore = null;
+let filterDebounceTimer = null;
-const FETCH_PAGE_SIZE = 100;
+let chunkDebounceTimer = null;
+let currentEventTick = 0;
+let lastRequireChunkTick = -1;
+const pendingTargetChunks = new Set();
+let pendingChunkPromise = null;
+let pendingChunkResolve = null;
+let pendingChunkReject = null;
+const loadedChunks = new Set();
+const inflightChunks = new Map();
+
+// Clears pending debounced chunk requests
+function clearChunkDebounce() {
+  if (chunkDebounceTimer) {
+    clearTimeout(chunkDebounceTimer);
+    chunkDebounceTimer = null;
+  }
+  pendingTargetChunks.clear();
+  pendingChunkPromise = null;
+  pendingChunkResolve = null;
+  pendingChunkReject = null;
+}
+
+// Executes chunk loading for the standstill target and prefetches lookahead chunks
+function _executeRequiredChunks(chunks, targetEpoch, prefetch = true) {
+  if (targetEpoch !== queryEpoch) {
+    return Promise.resolve(automat.state.items);
+  }
+
+  const chunkList = Array.from(chunks).sort((a, b) => a - b);
+  if (chunkList.length === 0) {
+    return Promise.resolve(automat.state.items);
+  }
+
+  const promises = [];
+  for (const c of chunkList) {
+    promises.push(actions.loadChunk(c, targetEpoch));
+  }
+
+  // Once active chunks finish loading, prefetch the next lookahead chunk in the background
+  return Promise.all(promises).then(() => {
+    if (targetEpoch !== queryEpoch) return automat.state.items;
+    if (prefetch) {
+      const maxChunk = chunkList[chunkList.length - 1];
+      const total = automat.state.total || 0;
+      for (let c = maxChunk + 1; c <= maxChunk + PREFETCH_CHUNKS; c++) {
+        if (total > 0 && c * CHUNK_SIZE >= total) {
+          break;
+        }
+        void actions.loadChunk(c, targetEpoch);
+      }
+    }
+    return automat.state.items;
+  });
+}
 
 // MARK: pure order helpers
 export function isOrderPaid(order) {
+  if (!order) return false;
   return Boolean(order.paid ?? order.payed ?? order.isPaid ?? order.is_paid ?? order.paidAt);
 }
 
 export function isOrderDelivered(order) {
-  return Boolean(order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
+  if (!order) return false;
+  return Boolean(order.shipped ?? order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
 }
 
 export function getOrderDate(order) {
+  if (!order) return null;
   const raw = order.date || order.createdAt;
   if (!raw) return null;
   const d = new Date(raw);
@@ -86,7 +140,6 @@ export function getOrderDate(order) {
 
 /**
  * Calculates cutoff date for negative seek.
- * Negative seek filters orders older than or equal to (today + months).
  * @param {number} months Negative integer (e.g. -1 for 1 month ago, -12 for 1 year ago)
  * @returns {Date|null}
  */
@@ -100,7 +153,6 @@ export function getNegativeSeekCutoff(months) {
 
 /**
  * Formats negative seek duration in human readable German.
- * e.g. -1 -> "-1 Monat", -2 -> "-2 Monate", -12 -> "-1 Jahr", -13 -> "-1 Jahr 1 Monat"
  * @param {number} months
  * @returns {string}
  */
@@ -119,84 +171,254 @@ export function formatNegativeSeek(months) {
   return `-${parts.join(' ')}`;
 }
 
-// MARK: fetches a single page from GET /api/order
+// Builds server query parameters from current automat filter state
-async function fetchOrdersPage(offset = 0, limit = FETCH_PAGE_SIZE) {
+function buildQueryParams(offset = 0, limit = CHUNK_SIZE) {
-  const res = await orderApi.list({ offset, limit });
+  const { filter, onlyUnpaid, onlyUndelivered, negativeSeekMonths } = automat.state;
+  const params = { offset, limit };
+  const trimmed = String(filter ?? '').trim();
+  if (trimmed) params.search = trimmed;
+  if (onlyUnpaid) params.onlyUnpaid = true;
+  if (onlyUndelivered) params.onlyUndelivered = true;
+  if (negativeSeekMonths != null && Number(negativeSeekMonths) < 0) {
+    params.seekMonths = Number(negativeSeekMonths);
+  }
+  return params;
+}
+
+// MARK: fetches a single chunk from GET /api/order with server-side filters
+async function fetchOrdersPage(offset = 0, limit = CHUNK_SIZE) {
+  const params = buildQueryParams(offset, limit);
+  const res = await orderApi.list(params);
   const orders = Array.isArray(res?.orders) ? res.orders : [];
   const total = Number(res?.total ?? orders.length);
   return { orders, total };
 }
 
-/**
+function onFilterChange(immediate = false) {
- * Client-side filter over number, external reference, customer name, paid/delivered flags, and negative seek.
+  if (filterDebounceTimer) {
- * @param {Order[]} items
+    clearTimeout(filterDebounceTimer);
- * @param {string|object} filterOrOpts String filter query or options object { filter, onlyUnpaid, onlyUndelivered, negativeSeekMonths }
+    filterDebounceTimer = null;
- * @param {(order: Order) => string} [nameOf] Customer name resolver.
+  }
- */
+  if (immediate) {
-export function filterOrders(items, filterOrOpts, nameOf) {
+    applyFilterReload();
-  if (!Array.isArray(items)) return [];
+  } else {
-  const opts = typeof filterOrOpts === 'string'
+    filterDebounceTimer = setTimeout(() => {
-    ? { filter: filterOrOpts }
+      filterDebounceTimer = null;
-    : (filterOrOpts ?? {});
+      applyFilterReload();
+    }, 200);
+  }
+}
 
-  const query = String(opts.filter ?? '').trim().toLowerCase();
+function applyFilterReload() {
-  const onlyUnpaid = Boolean(opts.onlyUnpaid);
+  queryEpoch++;
-  const onlyUndelivered = Boolean(opts.onlyUndelivered);
+  clearChunkDebounce();
-  const seekMonths = Number(opts.negativeSeekMonths ?? 0);
+  loadedChunks.clear();
-  const cutoff = getNegativeSeekCutoff(seekMonths);
+  inflightChunks.clear();
-
+  void actions.loadChunk(0, queryEpoch);
-  return items.filter((o) => {
-    if (onlyUnpaid && isOrderPaid(o)) return false;
-    if (onlyUndelivered && isOrderDelivered(o)) return false;
-    if (cutoff) {
-      const orderDate = getOrderDate(o);
-      // Older than cutoff point: order date <= cutoff
-      if (!orderDate || orderDate.getTime() > cutoff.getTime()) {
-        return false;
-      }
-    }
-    if (query) {
-      const matches = [o.number, o.externalNumber, nameOf?.(o)]
-        .some((v) => String(v ?? '').toLowerCase().includes(query));
-      if (!matches) return false;
-    }
-    return true;
-  });
 }
 
 const actions = {
-  /** Sets the active search filter. */
+  // MARK: returns current items and triggers chunk 0 if not loaded (no prefetch on entry)
+  getItems() {
+    if (automat.state.items === null) {
+      void actions.requireChunk(0, 0, { prefetch: false, immediate: true });
+      return null;
+    }
+    return automat.state.items;
+  },
+
+  // MARK: ensures chunkIndex and lookahead chunks are loaded/loading (debounced)
+  requireChunk(chunkIndex, endOrOptions = chunkIndex, maybeOptions = {}) {
+    let start;
+    let end;
+    let options = {};
+
+    if (Array.isArray(chunkIndex)) {
+      start = chunkIndex[0] ?? 0;
+      end = chunkIndex[chunkIndex.length - 1] ?? start;
+      if (typeof endOrOptions === 'object' && endOrOptions !== null) {
+        options = endOrOptions;
+      }
+    } else {
+      start = Number(chunkIndex) || 0;
+      if (typeof endOrOptions === 'object' && endOrOptions !== null) {
+        end = start;
+        options = endOrOptions;
+      } else {
+        end = Number(endOrOptions ?? start) || start;
+        if (typeof maybeOptions === 'object' && maybeOptions !== null) {
+          options = maybeOptions;
+        }
+      }
+    }
+
+    start = Math.max(0, Math.floor(start));
+    end = Math.max(start, Math.floor(end));
+    const prefetch = options.prefetch !== false;
+
+    // If initial items are null or immediate requested, bypass debounce and load immediately
+    if (options.immediate || automat.state.items === null) {
+      clearChunkDebounce();
+      const chunks = new Set();
+      for (let c = start; c <= end; c++) chunks.add(c);
+      return _executeRequiredChunks(chunks, queryEpoch, prefetch);
+    }
+
+    // New event tick (drag mousemove / pagination click) replaces previous target position
+    if (lastRequireChunkTick !== currentEventTick) {
+      pendingTargetChunks.clear();
+      lastRequireChunkTick = currentEventTick;
+      if (typeof queueMicrotask === 'function') {
+        queueMicrotask(() => {
+          currentEventTick++;
+        });
+      } else {
+        Promise.resolve().then(() => {
+          currentEventTick++;
+        });
+      }
+    }
+
+    for (let c = start; c <= end; c++) {
+      pendingTargetChunks.add(c);
+    }
+
+    if (chunkDebounceTimer) {
+      clearTimeout(chunkDebounceTimer);
+      chunkDebounceTimer = null;
+    }
+
+    if (!pendingChunkPromise) {
+      pendingChunkPromise = new Promise((resolve, reject) => {
+        pendingChunkResolve = resolve;
+        pendingChunkReject = reject;
+      });
+    }
+
+    const captureEpoch = queryEpoch;
+    chunkDebounceTimer = setTimeout(() => {
+      chunkDebounceTimer = null;
+      const chunksToLoad = new Set(pendingTargetChunks);
+      pendingTargetChunks.clear();
+
+      const resolve = pendingChunkResolve;
+      const reject = pendingChunkReject;
+      pendingChunkPromise = null;
+      pendingChunkResolve = null;
+      pendingChunkReject = null;
+
+      _executeRequiredChunks(chunksToLoad, captureEpoch, true)
+        .then((res) => resolve?.(res))
+        .catch((err) => reject?.(err));
+    }, CHUNK_DEBOUNCE_MS);
+
+    return pendingChunkPromise;
+  },
+
+  // MARK: fetches a single chunk and populates prefilled array
+  loadChunk(chunkIndex, targetEpoch = queryEpoch) {
+    const index = Math.max(0, Number(chunkIndex) || 0);
+    if (targetEpoch !== queryEpoch) {
+      return Promise.resolve(automat.state.items);
+    }
+    if (loadedChunks.has(index)) {
+      return Promise.resolve(automat.state.items);
+    }
+    if (inflightChunks.has(index)) {
+      return inflightChunks.get(index);
+    }
+
+    const offset = index * CHUNK_SIZE;
+    const limit = CHUNK_SIZE;
+    if (index === 0 && automat.state.items === null) {
+      automat.setState({ status: 'loading', error: null });
+    }
+
+    const promise = fetchOrdersPage(offset, limit)
+      .then(({ orders, total }) => {
+        // Discard if active filter query changed while request was in flight
+        if (targetEpoch !== queryEpoch) {
+          return automat.state.items;
+        }
+
+        let items = automat.state.items;
+        const currentTotal = total > 0 ? total : 0;
+
+        if (items === null || items.length !== currentTotal) {
+          // Pre-fill items array with empty (null) items based on server filtered total
+          items = new Array(currentTotal).fill(null);
+        } else {
+          items = [...items];
+        }
+
+        // Fill in real received items for this chunk
+        for (let i = 0; i < orders.length; i++) {
+          const idx = offset + i;
+          if (idx < items.length) {
+            items[idx] = orders[i];
+          }
+        }
+
+        loadedChunks.add(index);
+
+        automat.setState({
+          items,
+          total: currentTotal,
+          status: 'ready',
+          error: null,
+        });
+
+        return items;
+      })
+      .catch((err) => {
+        if (targetEpoch === queryEpoch) {
+          console.error(`[orderAutomat] loadChunk(${index}) error:`, err);
+          if (index === 0 && automat.state.items === null) {
+            automat.setState({ status: 'failed', error: err });
+          }
+        }
+        throw err;
+      })
+      .finally(() => {
+        inflightChunks.delete(index);
+      });
+
+    inflightChunks.set(index, promise);
+    return promise;
+  },
+
+  // MARK: server-side filter actions
   filter(query) {
     automat.setState({ filter: String(query ?? '') });
+    onFilterChange(false);
   },
 
-  /** Sets whether to filter for only unpaid orders. */
   setOnlyUnpaid(onlyUnpaid) {
     automat.setState({ onlyUnpaid: Boolean(onlyUnpaid) });
+    onFilterChange(true);
   },
 
-  /** Sets whether to filter for only undelivered orders. */
   setOnlyUndelivered(onlyUndelivered) {
     automat.setState({ onlyUndelivered: Boolean(onlyUndelivered) });
+    onFilterChange(true);
   },
 
-  /** Increments seek by 1 month. */
   addSeekMonth() {
     const seekMonths = (automat.state.seekMonths ?? 0) + 1;
     const seekYears = automat.state.seekYears ?? 0;
     const totalMonths = -(seekMonths + seekYears * 12);
     automat.setState({ seekMonths, negativeSeekMonths: totalMonths });
+    onFilterChange(true);
   },
 
-  /** Increments seek by 1 year. */
   addSeekYear() {
     const seekMonths = automat.state.seekMonths ?? 0;
     const seekYears = (automat.state.seekYears ?? 0) + 1;
     const totalMonths = -(seekMonths + seekYears * 12);
     automat.setState({ seekYears, negativeSeekMonths: totalMonths });
+    onFilterChange(true);
   },
 
-  /** Cumulative negative seek: adds months (e.g. -1 or -12) to current negativeSeekMonths. */
   addNegativeSeek(months) {
     if (months === -12) {
       actions.addSeekYear();
@@ -206,15 +428,15 @@ const actions = {
       const current = Math.min(0, Number(automat.state.negativeSeekMonths ?? 0));
       const next = current + months;
       automat.setState({ negativeSeekMonths: Math.min(0, next) });
+      onFilterChange(true);
     }
   },
 
-  /** Resets negative seek back to 0 (all dates). */
   resetNegativeSeek() {
     automat.setState({ seekMonths: 0, seekYears: 0, negativeSeekMonths: 0 });
+    onFilterChange(true);
   },
 
-  /** Resets all filters. */
   resetFilters() {
     automat.setState({
       filter: '',
@@ -224,171 +446,74 @@ const actions = {
       seekYears: 0,
       negativeSeekMonths: 0,
     });
+    onFilterChange(true);
   },
 
-  /**
+  // MARK: initial load
-   * Synchronously returns current items and triggers loading if idle.
-   * On remounts, directly returns cached items from the automat.
-   *
-   * @param {(order: Order) => string} [nameOf] Optional customer name resolver.
-   * @returns {Order[]}
-   */
-  getOrLoad(nameOf) {
-    if (automat.state.status === 'idle') {
-      void actions.load().catch(() => {});
-    }
-    const { items, filter, onlyUnpaid, onlyUndelivered, negativeSeekMonths } = automat.state;
-    return filterOrders(items, { filter, onlyUnpaid, onlyUndelivered, negativeSeekMonths }, nameOf);
-  },
-
-  /**
-   * Loads the initial 100 orders, deduplicating concurrent callers.
-   *
-   * @returns {Promise<Order[]>}
-   */
   load() {
-    if (inflightLoad) return inflightLoad;
+    return actions.loadChunk(0, queryEpoch);
-    automat.setState({ status: 'loading', error: null });
-    inflightLoad = fetchOrdersPage(0, FETCH_PAGE_SIZE)
-      .then(({ orders, total }) => {
-        automat.setState({
-          items: orders,
-          total,
-          offset: 0,
-          limit: FETCH_PAGE_SIZE,
-          hasMore: orders.length < total && orders.length >= FETCH_PAGE_SIZE,
-          loadingMore: false,
-          status: 'ready',
-          error: null,
-        });
-        return orders;
-      })
-      .catch((error) => {
-        automat.setState({ status: 'failed', error });
-        throw error;
-      })
-      .finally(() => { inflightLoad = null; });
-    return inflightLoad;
   },
 
-  /**
+  // MARK: ensure loaded
-   * Loads the next batch of 100 orders when pagination approaches the end.
-   *
-   * @returns {Promise<Order[]>}
-   */
-  loadMore(minNeeded) {
-    const { items, total, status, loadingMore } = automat.state;
-    if (status !== 'ready' || loadingMore) return Promise.resolve(items);
-    if (total > 0 && items.length >= total) return Promise.resolve(items);
-    if (inflightMore) return inflightMore;
-
-    automat.setState({ loadingMore: true });
-    const offset = items.length;
-    const fetchLimit =
-      minNeeded && minNeeded > offset
-        ? Math.max(FETCH_PAGE_SIZE, minNeeded - offset)
-        : FETCH_PAGE_SIZE;
-    inflightMore = fetchOrdersPage(offset, fetchLimit)
-      .then(({ orders: nextBatch, total: newTotal }) => {
-        const existingIds = new Set(automat.state.items.map((o) => o.id));
-        const uniqueNext = nextBatch.filter((o) => !existingIds.has(o.id));
-        const merged = [...automat.state.items, ...uniqueNext];
-        const finalTotal = Math.max(newTotal, merged.length);
-        automat.setState({
-          items: merged,
-          total: finalTotal,
-          hasMore: nextBatch.length > 0 && merged.length < finalTotal,
-          loadingMore: false,
-        });
-        return merged;
-      })
-      .catch((err) => {
-        console.error('[orderAutomat] loadMore error:', err);
-        automat.setState({ loadingMore: false });
-        return automat.state.items;
-      })
-      .finally(() => {
-        inflightMore = null;
-      });
-
-    return inflightMore;
-  },
-
-  /**
-   * Silently re-fetches loaded orders without flashing loading state.
-   *
-   * @returns {Promise<Order[]>}
-   */
-  async reload() {
-    try {
-      const currentCount = Math.max(FETCH_PAGE_SIZE, automat.state.items.length);
-      const { orders, total } = await fetchOrdersPage(0, currentCount);
-      automat.setState({
-        items: orders,
-        total,
-        hasMore: orders.length < total,
-        loadingMore: false,
-        status: 'ready',
-        error: null,
-      });
-      return orders;
-    } catch (error) {
-      automat.setState({ error });
-      throw error;
-    }
-  },
-
-  /**
-   * Ensures orders are loaded once the selected company is known.
-   *
-   * @returns {Promise<Order[]>}
-   */
   ensureLoaded() {
-    if (automat.state.status === 'ready') {
+    if (automat.state.items !== null) {
       return Promise.resolve(automat.state.items);
     }
-    return actions.load();
+    return actions.loadChunk(0, queryEpoch);
   },
 
-  /**
+  // MARK: reload with current active server filters
-   * Replaces cached orders without network round-trip.
+  async reload() {
-   *
+    queryEpoch++;
-   * @param {Order[]} items
+    clearChunkDebounce();
-   * @returns {Order[]}
+    loadedChunks.clear();
-   */
+    inflightChunks.clear();
+    await actions.loadChunk(0, queryEpoch);
+    return automat.state.items;
+  },
+
+  // MARK: replace items directly
   replace(items) {
+    clearChunkDebounce();
+    loadedChunks.clear();
+    inflightChunks.clear();
+    const count = Array.isArray(items) ? items.length : 0;
     automat.setState({
       items,
-      total: items.length,
+      total: count,
-      hasMore: false,
-      loadingMore: false,
       status: 'ready',
       error: null,
     });
     return items;
   },
 
-  /**
+  // MARK: patches an order locally in the automat items cache
-   * Patches an order locally in the automat items cache.
-   *
-   * @param {number|string} id Order ID.
-   * @param {Partial<Order>} patch Partial properties to update.
-   * @returns {Order[]}
-   */
   patchOrder(id, patch) {
-    const items = automat.state.items.map((o) =>
+    if (!Array.isArray(automat.state.items)) return automat.state.items;
-      o.id === id ? { ...o, ...patch } : o,
+    let changed = false;
-    );
+    const items = automat.state.items.map((o) => {
-    automat.setState({ items });
+      if (o && o.id === id) {
+        changed = true;
+        return { ...o, ...patch };
+      }
+      return o;
+    });
+    if (changed) {
+      automat.setState({ items });
+    }
     return items;
   },
 
-  /**
+  // MARK: resets state
-   * Resets to idle state (called on logout).
-   */
   reset() {
-    inflightLoad = null;
+    queryEpoch++;
-    inflightMore = null;
+    if (filterDebounceTimer) {
+      clearTimeout(filterDebounceTimer);
+      filterDebounceTimer = null;
+    }
+    clearChunkDebounce();
+    loadedChunks.clear();
+    inflightChunks.clear();
     automat.setState(initialState);
   },
 };
@@ -396,7 +521,20 @@ const actions = {
 export const orderAutomat = new Automat(initialState, actions, { name: 'order' });
 automat = orderAutomat;
 
-// Reset on logout or company change (lazy-loaded on demand by views via ensureLoaded).
+// MARK: exported methods for direct invocation
+export function getItems() {
+  return actions.getItems();
+}
+
+export function requireChunk(chunkIndex, endOrOptions, maybeOptions) {
+  return actions.requireChunk(chunkIndex, endOrOptions, maybeOptions);
+}
+
+orderAutomat.getItems = getItems;
+orderAutomat.requireChunk = requireChunk;
+orderAutomat.CHUNK_SIZE = CHUNK_SIZE;
+
+// Reset on logout or company change
 let lastCompanyId = null;
 authAutomat.subscribe((auth) => {
   const companyId = auth.user?.selectedCompanyId ?? null;
@@ -423,16 +561,6 @@ export function selectOrderTotal(state = automat.state) {
   return state.total;
 }
 
-/** Selects whether more orders can be fetched from backend */
-export function selectHasMoreOrders(state = automat.state) {
-  return state.hasMore;
-}
-
-/** Selects whether an incremental fetch is currently in flight */
-export function selectIsLoadingMoreOrders(state = automat.state) {
-  return state.loadingMore;
-}
-
 /** Selects unpaid filter */
 export function selectOnlyUnpaid(state = automat.state) {
   return state.onlyUnpaid;
@@ -460,22 +588,15 @@ export function selectSeekYears(state = automat.state) {
 
 /**
  * Calculates client pagination metadata.
- * Current Page: Math.floor(offset / limit) + 1
- * Total Pages: Math.ceil(total / limit)
- * Next Offset: (page - 1) * limit
  */
 export function selectOrderPagination(state = automat.state) {
   const total = state.total ?? 0;
-  const offset = state.offset ?? 0;
-  const limit = state.limit || 20;
-  const currentPage = Math.floor(offset / limit) + 1;
-  const pageCount = Math.max(1, Math.ceil(total / limit));
   return {
     total,
-    offset,
+    offset: 0,
-    limit,
+    limit: CHUNK_SIZE,
-    currentPage,
+    currentPage: 1,
-    pageCount,
+    pageCount: Math.max(1, Math.ceil(total / CHUNK_SIZE)),
   };
 }
 

src/automats/sseAutomat.js

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

src/components/LoginPage.jsx

@@ -52,6 +52,11 @@ class LoginPage extends PureComponent {
       this.setState({ busy: true });
       await authAutomat.actions.loginWithGoogle(idToken);
       await bootstrapAuthMe();
+      const params = new URLSearchParams(window.location.search);
+      const returnTo = params.get('returnTo');
+      if (returnTo) {
+        window.location.replace(returnTo);
+      }
     } catch (err) {
       if (err instanceof GoogleSignInCancelledError) return;
       logError('[login] Google sign-in failed', {

src/components/PicturesDialog.jsx

@@ -0,0 +1,831 @@
+// #region imports
+import { PureComponent, createRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { enqueueSnackbar } from 'notistack';
+import AppDialog from './AppDialog';
+import { thumb, article as articleApi } from '../api';
+import artikelAutomat from '../automats/artikelAutomat';
+import brandAutomat from '../automats/brandAutomat';
+import categoryAutomat from '../automats/categoryAutomat';
+import chatAutomat from '../automats/chatAutomat';
+import { requireArray, requireObject } from '../utils/apiShape';
+import {
+  articleWithPhotoOrder,
+  articleWithUploadedPhoto,
+  articleWithoutPhoto,
+  formatPhotoDimensions,
+  formatPhotoSizeKb,
+  sortedPhotos,
+} from '../utils/articleDetail';
+import { notifyError } from '../utils/notify';
+import { readClipboardImage } from '../utils/pasteImage';
+import { prepareArticlePhoto } from '../utils/prepareArticlePhoto';
+import ThumbHashImage from './article/ThumbHashImage';
+import ArticlePhoto from './article/ArticlePhoto';
+import BrandImageSearchDialog from './brand/BrandImageSearchDialog';
+import ArticleImageSearchDialog from './article/ArticleImageSearchDialog';
+import {
+  CHECKERBOARD,
+  SCRIM_BUTTON,
+  SCRIM_LABEL,
+  SCRIM_SOFT,
+  SCRIM_STRONG,
+  SHADOW_THUMB_RING,
+  VEIL_MUTED,
+  WHITE,
+} from '../colors';
+// #endregion
+
+// #region constants & styles
+/** Max edge (px) of the single-image preview inside the dialog. */
+const MAX_PREVIEW = 240;
+
+const overlayChipSx = {
+  height: 22,
+  bgcolor: SCRIM_LABEL,
+  color: WHITE,
+  '& .MuiChip-label': { px: 0.75, fontSize: 11 },
+};
+
+const overlayIconSx = {
+  color: WHITE,
+  bgcolor: SCRIM_BUTTON,
+  '&:hover': { bgcolor: SCRIM_STRONG },
+  '&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT },
+};
+// #endregion
+
+// #region helper functions
+function isSingleMode(props) {
+  if (typeof props.single === 'boolean') {
+    return props.single;
+  }
+  if (props.maxPictures === 1 || props.maxPhotos === 1) {
+    return true;
+  }
+  if (props.brand || props.category || props.attributeValue) {
+    return true;
+  }
+  if (props.article) {
+    return false;
+  }
+  return false;
+}
+
+function resolvePictures(props, single) {
+  if (Array.isArray(props.pictures)) {
+    return single ? props.pictures.slice(0, 1) : props.pictures;
+  }
+  if (Array.isArray(props.pics)) {
+    return single ? props.pics.slice(0, 1) : props.pics;
+  }
+
+  // Brands: only logo[0] with sort=0 fillable
+  if (props.brand) {
+    const rawPics = Array.isArray(props.brand.pics) ? props.brand.pics : [];
+    const firstPic = rawPics[0] || (props.brand.fullHash ? {
+      fullHash: props.brand.fullHash,
+      thumbHash: props.brand.thumbHash,
+      thumbW: props.brand.thumbW,
+      thumbH: props.brand.thumbH,
+      sort: 0,
+    } : null);
+    return firstPic ? [firstPic] : [];
+  }
+
+  // Articles: multiple photos allowed
+  if (props.article) {
+    const list = sortedPhotos(props.article);
+    return single ? list.slice(0, 1) : list;
+  }
+
+  // Categories: single photo
+  if (props.category) {
+    if (Array.isArray(props.category.pics) && props.category.pics.length > 0) {
+      return [props.category.pics[0]];
+    }
+    if (props.category.fullHash) {
+      return [{
+        fullHash: props.category.fullHash,
+        thumbHash: props.category.thumbHash,
+        thumbW: props.category.thumbW,
+        thumbH: props.category.thumbH,
+        sort: 0,
+      }];
+    }
+    return [];
+  }
+
+  // Attribute values: single photo
+  if (props.attributeValue) {
+    if (Array.isArray(props.attributeValue.pics) && props.attributeValue.pics.length > 0) {
+      return [props.attributeValue.pics[0]];
+    }
+    if (props.attributeValue.fullHash) {
+      return [{
+        fullHash: props.attributeValue.fullHash,
+        thumbHash: props.attributeValue.thumbHash,
+        thumbW: props.attributeValue.thumbW,
+        thumbH: props.attributeValue.thumbH,
+        sort: 0,
+      }];
+    }
+    return [];
+  }
+
+  if (props.pic) {
+    return [props.pic];
+  }
+
+  return [];
+}
+
+function resolveTitle(props, single) {
+  if (props.title) {
+    return typeof props.title === 'function' ? props.title(props) : props.title;
+  }
+  if (props.brand) {
+    const name = props.brand.name ? ` ${props.brand.name}` : '';
+    return `Logo:${name}`;
+  }
+  if (props.category) {
+    const name = props.category.name ? ` ${props.category.name}` : '';
+    return `Kategoriebild:${name}`;
+  }
+  if (props.attributeValue) {
+    const name = props.attributeValue.value || props.attributeValue.name
+      ? ` ${props.attributeValue.value || props.attributeValue.name}`
+      : '';
+    return `Bild:${name}`;
+  }
+  if (props.article) {
+    const name = props.article.name || props.article.sku
+      ? ` ${props.article.name || props.article.sku}`
+      : '';
+    return `Bilder:${name}`;
+  }
+  return single ? 'Bild' : 'Bilder';
+}
+// #endregion
+
+/**
+ * Unified class component for entity pictures and logos.
+ * Supports:
+ * - Single picture mode (Brand logo with sort=0, Category, AttributeValue)
+ * - Multi picture mode (Article photos with reorder & chat edit)
+ * - Actions: Löschen, Neues Suchen, Bild einfügen (clipboard), Bild hochladen (file), Schließen.
+ */
+// #region PicturesDialog
+export default class PicturesDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.fileInputRef = createRef();
+    this.state = {
+      busy: false,
+      searchOpen: false,
+    };
+  }
+
+  // #region dialog close
+  handleClose = () => {
+    if (this.state.busy) return;
+    this.props.onClose?.();
+  };
+  // #endregion
+
+  // #region upload & paste operations
+  // MARK: prepares image and calls upload handler or automat action
+  uploadRawImage = async (rawBlob) => {
+    const { onUpload, brand, article, category, onArticleUpdated } = this.props;
+    this.setState({ busy: true });
+    try {
+      const file = await prepareArticlePhoto(rawBlob);
+
+      if (onUpload) {
+        await onUpload(file);
+      } else if (brand?.id) {
+        await brandAutomat.actions.addImage(brand.id, file);
+        enqueueSnackbar(`Markenlogo für „${brand.name || ''}“ gespeichert.`, { variant: 'success' });
+      } else if (article?.sku) {
+        const uploadStarted = performance.now();
+        const res = await articleApi.uploadImage(article.sku, file);
+        console.log('[article-photo] upload', {
+          uploadMs: Math.round(performance.now() - uploadStarted),
+          bytes: file.size,
+          sku: article.sku,
+        });
+        requireObject(res, 'POST /api/article/:sku/image');
+        requireObject(res.image, 'image');
+        const updated = articleWithUploadedPhoto(article, res.image);
+        artikelAutomat.actions.setArticle(updated);
+        onArticleUpdated?.(updated);
+        enqueueSnackbar('Artikelbild gespeichert.', { variant: 'success' });
+      } else if (category?.id) {
+        await categoryAutomat.actions.uploadCategoryImage({
+          categoryId: category.id,
+          file,
+        });
+        enqueueSnackbar('Kategoriebild gespeichert.', { variant: 'success' });
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  // MARK: reads clipboard image and uploads
+  handlePasteClick = async () => {
+    if (this.state.busy || this.props.disabled) return;
+    try {
+      const image = await readClipboardImage();
+      if (image) {
+        await this.uploadRawImage(image);
+      } else {
+        enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' });
+      }
+    } catch (err) {
+      console.warn('Clipboard read error:', err);
+      enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' });
+    }
+  };
+
+  handleUploadClick = () => {
+    if (this.state.busy || this.props.disabled) return;
+    this.fileInputRef.current?.click();
+  };
+
+  handleFileChange = (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+    void this.uploadRawImage(file);
+  };
+  // #endregion
+
+  // #region deletion operations
+  // MARK: deletes single image (brand, category, attributeValue)
+  handleDeleteSingle = async () => {
+    const { busy } = this.state;
+    const { disabled, brand, category, attributeValue, onDelete } = this.props;
+    if (busy || disabled) return;
+
+    const single = isSingleMode(this.props);
+    const pics = resolvePictures(this.props, single);
+    const pic = pics[0];
+    if (!pic) return;
+
+    const targetName = brand?.name || category?.name || attributeValue?.name || 'dieses Bild';
+    const label = brand ? `Logo von „${targetName}"` : `Bild von „${targetName}"`;
+    if (!window.confirm(`${label} wirklich löschen?`)) return;
+
+    this.setState({ busy: true });
+    try {
+      if (onDelete) {
+        await onDelete(pic, 0);
+      } else if (brand?.id) {
+        await brandAutomat.actions.deleteImage(brand.id);
+        enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' });
+      } else if (category?.id) {
+        await categoryAutomat.actions.deleteCategoryImage(category.id);
+        enqueueSnackbar('Kategoriebild gelöscht.', { variant: 'success' });
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  // MARK: deletes multi image (article photos)
+  handleDeleteMulti = async (fullHash) => {
+    const { busy } = this.state;
+    const { disabled, article, onDelete, onArticleUpdated } = this.props;
+    if (busy || disabled) return;
+
+    this.setState({ busy: true });
+    try {
+      if (onDelete) {
+        await onDelete(fullHash);
+      } else if (article?.sku) {
+        await articleApi.deleteImage(article.sku, fullHash);
+        const updated = articleWithoutPhoto(article, fullHash);
+        artikelAutomat.actions.setArticle(updated);
+        onArticleUpdated?.(updated);
+        enqueueSnackbar('Artikelbild gelöscht.', { variant: 'success' });
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+  // #endregion
+
+  // #region reordering & chat edit (multi mode)
+  // MARK: calls orderImages via articleApi
+  handleMoveMulti = async (fullHash, delta) => {
+    const { busy } = this.state;
+    const { disabled, article, onReorder, onArticleUpdated } = this.props;
+    if (busy || disabled) return;
+
+    const photos = sortedPhotos(article);
+    const index = photos.findIndex((row) => row.fullHash === fullHash);
+    const target = index + delta;
+    if (index < 0 || target < 0 || target >= photos.length) return;
+
+    const next = [...photos];
+    const [row] = next.splice(index, 1);
+    next.splice(target, 0, row);
+    const fullHashes = next.map((item) => item.fullHash);
+
+    this.setState({ busy: true });
+    try {
+      if (onReorder) {
+        await onReorder(fullHashes);
+      } else if (article?.sku) {
+        const res = await articleApi.orderImages(article.sku, fullHashes);
+        requireObject(res, 'PUT /api/article/:sku/images/order');
+        requireArray(res.fullHashes, 'fullHashes');
+        const updated = articleWithPhotoOrder(article, res.fullHashes);
+        artikelAutomat.actions.setArticle(updated);
+        onArticleUpdated?.(updated);
+      }
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busy: false });
+    }
+  };
+
+  handleEditInChat = (photo, index) => {
+    const { article, onEditInChat } = this.props;
+    if (onEditInChat) {
+      onEditInChat(photo, index);
+      return;
+    }
+    const sku = article?.sku ?? '';
+    const imageNr = index + 1;
+    const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `;
+    chatAutomat.actions.openWithPrompt(prompt);
+  };
+  // #endregion
+
+  // #region search dialog handlers
+  handleSearchOpen = () => {
+    if (this.state.busy || this.props.disabled) return;
+    if (this.props.onSearchNew) {
+      this.props.onSearchNew();
+      return;
+    }
+    this.setState({ searchOpen: true });
+  };
+
+  handleSearchClose = () => {
+    this.setState({ searchOpen: false });
+  };
+  // #endregion
+
+  // #region render helpers
+  renderSinglePreview(pic, title) {
+    const { brand, emptyText } = this.props;
+    const hasPic = Boolean(pic?.fullHash || pic?.thumbHash);
+    const { fullHash, thumbHash, thumbW, thumbH, fullW, fullH, fullSize } = pic ?? {};
+
+    const tw = Number(thumbW || fullW);
+    const th = Number(thumbH || fullH);
+    let w = MAX_PREVIEW;
+    let h = MAX_PREVIEW;
+    if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) {
+      const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th));
+      w = Math.max(1, Math.round(tw * scale));
+      h = Math.max(1, Math.round(th * scale));
+    }
+
+    const hasDimensions = (fullW != null && fullH != null) || (thumbW != null && thumbH != null);
+    const hasSize = fullSize != null;
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          py: 1,
+        }}
+      >
+        <Box
+          sx={{
+            position: 'relative',
+            width: w,
+            height: h,
+            borderRadius: 1.5,
+            overflow: 'hidden',
+            bgcolor: WHITE,
+            backgroundImage: CHECKERBOARD,
+            backgroundSize: '16px 16px',
+            backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+            boxShadow: SHADOW_THUMB_RING,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {thumbHash ? <ThumbHashImage thumbHash={thumbHash} /> : null}
+          {fullHash ? (
+            <Box
+              component="img"
+              src={thumb.url(fullHash)}
+              alt={title}
+              draggable={false}
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+                display: 'block',
+              }}
+            />
+          ) : (
+            <Box
+              sx={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                p: 2,
+                textAlign: 'center',
+              }}
+            >
+              <Typography variant="caption" color="text.secondary">
+                {emptyText || (brand ? 'Kein Logo hinterlegt.' : 'Kein Bild hinterlegt.')}
+              </Typography>
+            </Box>
+          )}
+
+          {/* Dimension and size overlay chip */}
+          {hasPic && (hasDimensions || hasSize) ? (
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 6,
+                left: 6,
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 0.5,
+                pointerEvents: 'none',
+              }}
+            >
+              {hasDimensions ? (
+                <Chip
+                  size="small"
+                  label={formatPhotoDimensions(fullW ?? thumbW, fullH ?? thumbH)}
+                  sx={overlayChipSx}
+                />
+              ) : null}
+              {hasSize ? (
+                <Chip
+                  size="small"
+                  label={formatPhotoSizeKb(fullSize)}
+                  sx={overlayChipSx}
+                />
+              ) : null}
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+    );
+  }
+
+  renderMultiPhotoTile(photo, index, total) {
+    const { busy } = this.state;
+    const { disabled } = this.props;
+    const hasDimensions = photo.fullW != null && photo.fullH != null;
+    const hasSize = photo.fullSize != null;
+
+    return (
+      <Box
+        key={photo.fullHash || index}
+        sx={{ position: 'relative', width: 200, height: 200, flexShrink: 0 }}
+      >
+        <ArticlePhoto photo={photo} size={200} sx={{ position: 'absolute', inset: 0 }} />
+        <Box
+          sx={{
+            position: 'absolute',
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            p: 0.75,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.5,
+              pointerEvents: 'none',
+            }}
+          >
+            {hasDimensions ? (
+              <Chip
+                size="small"
+                label={formatPhotoDimensions(photo.fullW, photo.fullH)}
+                sx={overlayChipSx}
+              />
+            ) : null}
+            {hasSize ? (
+              <Chip
+                size="small"
+                label={formatPhotoSizeKb(photo.fullSize)}
+                sx={overlayChipSx}
+              />
+            ) : null}
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              pointerEvents: 'auto',
+            }}
+          >
+            <IconButton
+              type="button"
+              size="small"
+              aria-label="Bearbeiten"
+              disabled={busy || disabled}
+              onClick={() => this.handleEditInChat(photo, index)}
+              sx={overlayIconSx}
+            >
+              <EditOutlinedIcon fontSize="small" />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 0.25 }}>
+              <IconButton
+                type="button"
+                size="small"
+                aria-label="Nach vorne"
+                disabled={busy || disabled || index === 0}
+                onClick={() => void this.handleMoveMulti(photo.fullHash, -1)}
+                sx={overlayIconSx}
+              >
+                <KeyboardArrowUpIcon fontSize="small" />
+              </IconButton>
+              <IconButton
+                type="button"
+                size="small"
+                aria-label="Nach hinten"
+                disabled={busy || disabled || index >= total - 1}
+                onClick={() => void this.handleMoveMulti(photo.fullHash, 1)}
+                sx={overlayIconSx}
+              >
+                <KeyboardArrowDownIcon fontSize="small" />
+              </IconButton>
+              <IconButton
+                type="button"
+                size="small"
+                aria-label="Löschen"
+                disabled={busy || disabled}
+                onClick={() => void this.handleDeleteMulti(photo.fullHash)}
+                sx={overlayIconSx}
+              >
+                <DeleteOutlineOutlinedIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+  // #endregion
+
+  // #region main render
+  render() {
+    const { open, disabled, brand, article, searchDialog: CustomSearchDialog } = this.props;
+    const { busy, searchOpen } = this.state;
+    const single = isSingleMode(this.props);
+    const pics = resolvePictures(this.props, single);
+    const title = resolveTitle(this.props, single);
+    const hasPic = Boolean(pics[0]?.fullHash || pics[0]?.thumbHash);
+
+    return (
+      <>
+        <AppDialog
+          open={open}
+          onClose={busy ? undefined : this.handleClose}
+          maxWidth={single ? false : 'md'}
+          fullWidth={!single}
+          aria-labelledby="entity-pictures-dialog-title"
+          slotProps={{
+            paper: {
+              sx: single
+                ? { width: 360, maxWidth: '90vw' }
+                : { maxWidth: '95vw' },
+            },
+          }}
+        >
+          <DialogTitle
+            id="entity-pictures-dialog-title"
+            sx={{ px: 2.5, pt: 2, pb: 0.5 }}
+          >
+            {title}
+          </DialogTitle>
+
+          <DialogContent dividers={!single} sx={{ px: 2.5, py: single ? 1 : 1.5 }}>
+            {single ? (
+              this.renderSinglePreview(pics[0], title)
+            ) : pics.length === 0 ? (
+              <Box sx={{ color: 'text.secondary', py: 2 }}>Keine Bilder.</Box>
+            ) : (
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: 1.5,
+                }}
+              >
+                {pics.map((photo, index) =>
+                  this.renderMultiPhotoTile(photo, index, pics.length),
+                )}
+              </Box>
+            )}
+          </DialogContent>
+
+          {single ? (
+            <DialogActions
+              sx={{
+                px: 2,
+                pb: 1.5,
+                pt: 0.5,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+              }}
+            >
+              {/* Row 1: Insert from clipboard / Upload from file */}
+              <Box sx={{ display: 'flex', gap: 1, width: '100%' }}>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<ContentPasteIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handlePasteClick}
+                  sx={{ flex: 1, whiteSpace: 'nowrap' }}
+                >
+                  Bild einfügen
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<UploadFileIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleUploadClick}
+                  sx={{ flex: 1, whiteSpace: 'nowrap' }}
+                >
+                  Bild hochladen
+                </Button>
+              </Box>
+
+              {/* Row 2: Delete, Search new, Close */}
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  gap: 0.5,
+                }}
+              >
+                <Button
+                  size="small"
+                  color="error"
+                  startIcon={<DeleteOutlinedIcon />}
+                  disabled={busy || disabled || !hasPic}
+                  onClick={this.handleDeleteSingle}
+                >
+                  Löschen
+                </Button>
+                <Button
+                  size="small"
+                  startIcon={<ImageSearchIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleSearchOpen}
+                >
+                  Neues Suchen
+                </Button>
+                <Button
+                  size="small"
+                  color="inherit"
+                  startIcon={<CloseIcon />}
+                  disabled={busy}
+                  onClick={this.handleClose}
+                >
+                  Schließen
+                </Button>
+              </Box>
+            </DialogActions>
+          ) : (
+            <DialogActions
+              sx={{
+                px: 3,
+                py: 2,
+                justifyContent: 'space-between',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}
+            >
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<ContentPasteIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handlePasteClick}
+                >
+                  Bild einfügen
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<UploadFileIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleUploadClick}
+                >
+                  Bild hochladen
+                </Button>
+                <Button
+                  size="small"
+                  variant="contained"
+                  startIcon={<ImageSearchIcon />}
+                  disabled={busy || disabled}
+                  onClick={this.handleSearchOpen}
+                >
+                  Bild suchen
+                </Button>
+              </Box>
+              <Button
+                size="small"
+                color="inherit"
+                disabled={busy}
+                onClick={this.handleClose}
+              >
+                Schließen
+              </Button>
+            </DialogActions>
+          )}
+        </AppDialog>
+
+        {/* Hidden file input for file uploads */}
+        <input
+          ref={this.fileInputRef}
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={this.handleFileChange}
+        />
+
+        {/* Optional embedded image search dialogs */}
+        {searchOpen && CustomSearchDialog ? (
+          <CustomSearchDialog
+            open={searchOpen}
+            onClose={this.handleSearchClose}
+          />
+        ) : searchOpen && brand ? (
+          <BrandImageSearchDialog
+            open={searchOpen}
+            brand={brand}
+            onClose={this.handleSearchClose}
+          />
+        ) : searchOpen && article ? (
+          <ArticleImageSearchDialog
+            open={searchOpen}
+            article={article}
+            onClose={this.handleSearchClose}
+            onArticleUpdated={this.props.onArticleUpdated}
+          />
+        ) : null}
+      </>
+    );
+  }
+  // #endregion
+}
+// #endregion

src/components/article/ArticlePhotosDialog.jsx

@@ -1,374 +1,17 @@
-import { Component, createRef } from 'react';
+import { PureComponent } from 'react';
-import Box from '@mui/material/Box';
+import PicturesDialog from '../PicturesDialog';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import AppDialog from '../AppDialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
-import ImageSearchIcon from '@mui/icons-material/ImageSearch';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { enqueueSnackbar } from 'notistack';
-import { article as articleApi } from '../../api';
-import artikelAutomat from '../../automats/artikelAutomat';
-import chatAutomat from '../../automats/chatAutomat';
-import { requireArray, requireObject } from '../../utils/apiShape';
-import {
-  articleWithPhotoOrder,
-  articleWithUploadedPhoto,
-  articleWithoutPhoto,
-  formatPhotoDimensions,
-  formatPhotoSizeKb,
-  sortedPhotos,
-} from '../../utils/articleDetail';
-import { notifyError } from '../../utils/notify';
-import { readClipboardImage } from '../../utils/pasteImage';
-import {
-  SCRIM_BUTTON,
-  SCRIM_LABEL,
-  SCRIM_SOFT,
-  SCRIM_STRONG,
-  VEIL_MUTED,
-  WHITE,
-} from '../../colors';
-import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
-import ArticlePhoto from './ArticlePhoto';
-import ArticleImageSearchDialog from './ArticleImageSearchDialog';
-
-const overlayChipSx = {
-  height: 22,
-  bgcolor: SCRIM_LABEL,
-  color: WHITE,
-  '& .MuiChip-label': { px: 0.75, fontSize: 11 },
-};
-
-const overlayIconSx = {
-  color: WHITE,
-  bgcolor: SCRIM_BUTTON,
-  '&:hover': { bgcolor: SCRIM_STRONG },
-  '&.Mui-disabled': { color: VEIL_MUTED, bgcolor: SCRIM_SOFT },
-};
-
-class ArticlePhotosDialog extends Component {
-  constructor(props) {
-    super(props);
-    this.fileInputRef = createRef();
-    this.state = { busy: false, searchOpen: false };
-    this.handleClose = this.handleClose.bind(this);
-    this.handlePasteClick = this.handlePasteClick.bind(this);
-    this.handleUploadClick = this.handleUploadClick.bind(this);
-    this.handleSearchOpen = this.handleSearchOpen.bind(this);
-    this.handleSearchClose = this.handleSearchClose.bind(this);
-    this.handleFileChange = this.handleFileChange.bind(this);
-    this.uploadRawImage = this.uploadRawImage.bind(this);
-    this.handleEditInChat = this.handleEditInChat.bind(this);
-  }
-
-  handleClose() {
-    if (this.state.busy) return;
-    this.props.onClose();
-  }
-
-  handleEditInChat(photo, index) {
-    const { article: articleData } = this.props;
-    const sku = articleData?.sku ?? '';
-    const imageNr = index + 1;
-    const prompt = `Artikelbild Nr ${imageNr} von Artikel SKU ${sku} folgende Änderung: `;
-    chatAutomat.actions.openWithPrompt(prompt);
-  }
-
-  async uploadRawImage(rawBlob) {
-    const { article: articleData, onArticleUpdated } = this.props;
-    this.setState({ busy: true });
-    try {
-      const file = await prepareArticlePhoto(rawBlob);
-      const uploadStarted = performance.now();
-      const res = await articleApi.uploadImage(articleData.sku, file);
-      console.log('[article-photo] upload', {
-        uploadMs: Math.round(performance.now() - uploadStarted),
-        bytes: file.size,
-        sku: articleData.sku,
-      });
-      requireObject(res, 'POST /api/article/:sku/image');
-      requireObject(res.image, 'image');
-      const updated = articleWithUploadedPhoto(articleData, res.image);
-      artikelAutomat.actions.setArticle(updated);
-      onArticleUpdated?.(updated);
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  }
-
-  async handlePasteClick() {
-    if (this.state.busy) return;
-    try {
-      const image = await readClipboardImage();
-      if (image) {
-        await this.uploadRawImage(image);
-      } else {
-        enqueueSnackbar('Kein Bild in der Zwischenablage gefunden.', { variant: 'info' });
-      }
-    } catch (err) {
-      console.warn('Clipboard read error:', err);
-      enqueueSnackbar('Zugriff auf Zwischenablage nicht möglich.', { variant: 'warning' });
-    }
-  }
-
-  handleUploadClick() {
-    if (this.state.busy) return;
-    this.fileInputRef.current?.click();
-  }
-
-  handleSearchOpen() {
-    if (this.state.busy) return;
-    this.setState({ searchOpen: true });
-  }
-
-  handleSearchClose() {
-    this.setState({ searchOpen: false });
-  }
-
-  handleFileChange(event) {
-    const file = event.target.files?.[0];
-    event.target.value = '';
-    if (!file) return;
-    void this.uploadRawImage(file);
-  }
-
-  async deletePhoto(fullHash) {
-    const { article: articleData, onArticleUpdated } = this.props;
-    this.setState({ busy: true });
-    try {
-      await articleApi.deleteImage(articleData.sku, fullHash);
-      const updated = articleWithoutPhoto(articleData, fullHash);
-      artikelAutomat.actions.setArticle(updated);
-      onArticleUpdated?.(updated);
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  }
-
-  async movePhoto(fullHash, delta) {
-    const { article: articleData, onArticleUpdated } = this.props;
-    const photos = sortedPhotos(articleData);
-    const index = photos.findIndex((row) => row.fullHash === fullHash);
-    const target = index + delta;
-    if (index < 0 || target < 0 || target >= photos.length) return;
-
-    const next = [...photos];
-    const [row] = next.splice(index, 1);
-    next.splice(target, 0, row);
-    const fullHashes = next.map((item) => item.fullHash);
-
-    this.setState({ busy: true });
-    try {
-      const res = await articleApi.orderImages(articleData.sku, fullHashes);
-      requireObject(res, 'PUT /api/article/:sku/images/order');
-      requireArray(res.fullHashes, 'fullHashes');
-      const updated = articleWithPhotoOrder(articleData, res.fullHashes);
-      artikelAutomat.actions.setArticle(updated);
-      onArticleUpdated?.(updated);
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  }
-
-  renderPhotoTile(photo, index, total) {
-    const { busy } = this.state;
-    const hasDimensions = photo.fullW != null && photo.fullH != null;
-    const hasSize = photo.fullSize != null;
-
-    return (
-      <Box
-        key={photo.fullHash}
-        sx={{ position: 'relative', width: 200, height: 200, flexShrink: 0 }}
-      >
-        <ArticlePhoto photo={photo} size={200} sx={{ position: 'absolute', inset: 0 }} />
-        <Box
-          sx={{
-            position: 'absolute',
-            inset: 0,
-            zIndex: 1,
-            pointerEvents: 'none',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            p: 0.75,
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 0.5,
-              pointerEvents: 'none',
-            }}
-          >
-            {hasDimensions ? (
-              <Chip
-                size="small"
-                label={formatPhotoDimensions(photo.fullW, photo.fullH)}
-                sx={overlayChipSx}
-              />
-            ) : null}
-            {hasSize ? (
-              <Chip
-                size="small"
-                label={formatPhotoSizeKb(photo.fullSize)}
-                sx={overlayChipSx}
-              />
-            ) : null}
-          </Box>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              pointerEvents: 'auto',
-            }}
-          >
-            <IconButton
-              type="button"
-              size="small"
-              aria-label="Bearbeiten"
-              disabled={busy}
-              onClick={() => this.handleEditInChat(photo, index)}
-              sx={overlayIconSx}
-            >
-              <EditOutlinedIcon fontSize="small" />
-            </IconButton>
-            <Box
-              sx={{
-                display: 'flex',
-                gap: 0.25,
-              }}
-            >
-              <IconButton
-                type="button"
-                size="small"
-                aria-label="Nach vorne"
-                disabled={busy || index === 0}
-                onClick={() => void this.movePhoto(photo.fullHash, -1)}
-                sx={overlayIconSx}
-              >
-                <KeyboardArrowUpIcon fontSize="small" />
-              </IconButton>
-              <IconButton
-                type="button"
-                size="small"
-                aria-label="Nach hinten"
-                disabled={busy || index >= total - 1}
-                onClick={() => void this.movePhoto(photo.fullHash, 1)}
-                sx={overlayIconSx}
-              >
-                <KeyboardArrowDownIcon fontSize="small" />
-              </IconButton>
-              <IconButton
-                type="button"
-                size="small"
-                aria-label="Löschen"
-                disabled={busy}
-                onClick={() => void this.deletePhoto(photo.fullHash)}
-                sx={overlayIconSx}
-              >
-                <DeleteOutlineOutlinedIcon fontSize="small" />
-              </IconButton>
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-    );
-  }
 
+/**
+ * Article photos dialog wrapping the unified PicturesDialog.
+ * Allows multiple photos with reordering, edit in chat, clipboard paste, upload, search, and delete.
+ *
+ * Props: open, article, onClose, onArticleUpdated
+ */
+// #region component
+export default class ArticlePhotosDialog extends PureComponent {
   render() {
-    const { open, article: articleData } = this.props;
+    return <PicturesDialog {...this.props} single={false} entityType="article" />;
-    const { busy } = this.state;
-    const photos = sortedPhotos(articleData);
-
-    return (
-      <>
-        <AppDialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
-          <DialogTitle>Bilder</DialogTitle>
-          <DialogContent dividers>
-            {photos.length === 0 ? (
-              <Box sx={{ color: 'text.secondary', py: 2 }}>Keine Bilder.</Box>
-            ) : (
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: 1.5,
-                }}
-              >
-                {photos.map((photo, index) =>
-                  this.renderPhotoTile(photo, index, photos.length),
-                )}
-              </Box>
-            )}
-          </DialogContent>
-          <DialogActions sx={{ px: 3, py: 2, justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
-              <Button
-                type="button"
-                variant="outlined"
-                startIcon={<ContentPasteIcon />}
-                onClick={this.handlePasteClick}
-                disabled={busy}
-              >
-                Bild einfügen
-              </Button>
-              <Button
-                type="button"
-                variant="outlined"
-                startIcon={<UploadFileIcon />}
-                onClick={this.handleUploadClick}
-                disabled={busy}
-              >
-                Bild hochladen
-              </Button>
-              <Button
-                type="button"
-                variant="contained"
-                startIcon={<ImageSearchIcon />}
-                onClick={this.handleSearchOpen}
-                disabled={busy}
-              >
-                Bild suchen
-              </Button>
-            </Box>
-            <Button type="button" onClick={this.handleClose} disabled={busy} color="inherit">
-              Schließen
-            </Button>
-          </DialogActions>
-        </AppDialog>
-        <input
-          ref={this.fileInputRef}
-          type="file"
-          accept="image/*"
-          hidden
-          onChange={this.handleFileChange}
-        />
-        <ArticleImageSearchDialog
-          open={this.state.searchOpen}
-          article={articleData}
-          onClose={this.handleSearchClose}
-          onArticleUpdated={this.props.onArticleUpdated}
-        />
-      </>
-    );
   }
 }
+// #endregion
 
-export default ArticlePhotosDialog;

src/components/brand/ArtikelMarke.jsx

@@ -85,8 +85,8 @@ class ArtikelMarke extends PureComponent {
     this.setState({ logoOpen: false });
   };
 
-  handleThumbClick = () => {
+  handleOpenLogo = () => {
-    if (this.props.disabled || !this.hasLogo()) return;
+    if (this.props.disabled) return;
     this.setState({ previewOpen: true });
   };
 
@@ -124,7 +124,7 @@ class ArtikelMarke extends PureComponent {
           {hasLogo ? (
             <Box
               component="span"
-              onClick={this.handleThumbClick}
+              onClick={this.handleOpenLogo}
               sx={{
                 display: 'inline-flex',
                 flexShrink: 0,
@@ -137,9 +137,9 @@ class ArtikelMarke extends PureComponent {
             </Box>
           ) : (
             <IconButton
-              aria-label={`Logo für „${name}" suchen`}
+              aria-label={`Logo für „${name}" bearbeiten`}
               disabled={disabled}
-              onClick={this.handleSearchLogo}
+              onClick={this.handleOpenLogo}
               sx={{ width: 40, height: 40, flexShrink: 0 }}
             >
               <ImageSearchIcon sx={{ fontSize: 24 }} />

src/components/brand/BrandLogoPreviewDialog.jsx

@@ -1,176 +1,17 @@
 import { PureComponent } from 'react';
-import Box from '@mui/material/Box';
+import PicturesDialog from '../PicturesDialog';
-import Button from '@mui/material/Button';
-import AppDialog from '../AppDialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import ImageSearchIcon from '@mui/icons-material/ImageSearch';
-import { enqueueSnackbar } from 'notistack';
-import { thumb } from '../../api';
-import brandAutomat from '../../automats/brandAutomat';
-import { notifyError } from '../../utils/notify';
-import ThumbHashImage from '../article/ThumbHashImage';
-import {
-  CHECKERBOARD,
-  SHADOW_THUMB_RING,
-  WHITE,
-} from '../../colors';
-
-/** Max edge (px) of the presized logo preview inside the dialog. */
-const MAX_PREVIEW = 240;
 
 /**
- * Small fixed-size brand logo preview.
+ * Brand logo dialog wrapping the unified PicturesDialog.
- * Shows the stored thumb presized with thumbW/thumbH and offers
+ * Offers Löschen, Neues Suchen, Schließen, Bild einfügen (clipboard), Bild hochladen.
- * Löschen / Neues Suchen / Schließen.
  *
  * Props: open, brand, onClose, onSearchNew, disabled?
  */
+// #region component
 export default class BrandLogoPreviewDialog extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = { busy: false };
-  }
-
-  handleDelete = async () => {
-    const { brand } = this.props;
-    if (!brand?.id || this.state.busy) return;
-    if (!window.confirm(`Logo von „${brand.name ?? ''}" wirklich löschen?`)) return;
-    this.setState({ busy: true });
-    try {
-      await brandAutomat.actions.deleteImage(brand.id);
-      enqueueSnackbar('Markenlogo gelöscht.', { variant: 'success' });
-      this.props.onClose?.();
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      this.setState({ busy: false });
-    }
-  };
-
   render() {
-    const { open, brand, disabled, onClose, onSearchNew } = this.props;
+    return <PicturesDialog {...this.props} single entityType="brand" />;
-    const { busy } = this.state;
-    const pic = brand?.pics?.[0];
-    const { fullHash, thumbHash, thumbW, thumbH } = pic ?? {};
-    const name = brand?.name ?? '';
-
-    // Presize the preview with thumbW/thumbH, capped to MAX_PREVIEW.
-    const tw = Number(thumbW);
-    const th = Number(thumbH);
-    let w = MAX_PREVIEW;
-    let h = MAX_PREVIEW;
-    if (Number.isFinite(tw) && Number.isFinite(th) && tw > 0 && th > 0) {
-      const scale = Math.min(1, MAX_PREVIEW / Math.max(tw, th));
-      w = Math.max(1, Math.round(tw * scale));
-      h = Math.max(1, Math.round(th * scale));
-    }
-
-    return (
-      <AppDialog
-        open={open}
-        onClose={busy ? undefined : onClose}
-        maxWidth={false}
-        fullWidth={false}
-        aria-labelledby="brand-logo-preview-title"
-        slotProps={{
-          paper: { sx: { width: 360, maxWidth: '90vw' } },
-        }}
-      >
-        <DialogTitle id="brand-logo-preview-title" sx={{ px: 2.5, pt: 2, pb: 0.5 }}>
-          Logo: {name}
-        </DialogTitle>
-
-        <DialogContent sx={{ px: 2.5, py: 1 }}>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              py: 1,
-            }}
-          >
-            <Box
-              sx={{
-                position: 'relative',
-                width: w,
-                height: h,
-                borderRadius: 1.5,
-                overflow: 'hidden',
-                bgcolor: WHITE,
-                backgroundImage: CHECKERBOARD,
-                backgroundSize: '16px 16px',
-                backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
-                boxShadow: SHADOW_THUMB_RING,
-              }}
-            >
-              {thumbHash ? <ThumbHashImage thumbHash={thumbHash} /> : null}
-              {fullHash ? (
-                <Box
-                  component="img"
-                  src={thumb.url(fullHash)}
-                  alt={`Logo von „${name}"`}
-                  draggable={false}
-                  sx={{
-                    position: 'absolute',
-                    inset: 0,
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'contain',
-                    display: 'block',
-                  }}
-                />
-              ) : (
-                <Box
-                  sx={{
-                    position: 'absolute',
-                    inset: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Typography variant="caption" color="text.secondary">
-                    Kein Logo hinterlegt.
-                  </Typography>
-                </Box>
-              )}
-            </Box>
-          </Box>
-        </DialogContent>
-
-        <DialogActions sx={{ px: 2, pb: 1.5, gap: 0.5 }}>
-          <Button
-            size="small"
-            color="error"
-            startIcon={<DeleteOutlinedIcon />}
-            disabled={busy || disabled}
-            onClick={this.handleDelete}
-          >
-            Löschen
-          </Button>
-          <Button
-            size="small"
-            startIcon={<ImageSearchIcon />}
-            disabled={busy || disabled}
-            onClick={onSearchNew}
-          >
-            Neues Suchen
-          </Button>
-          <Button
-            size="small"
-            startIcon={<CloseIcon />}
-            disabled={busy}
-            onClick={onClose}
-          >
-            Schließen
-          </Button>
-        </DialogActions>
-      </AppDialog>
-    );
   }
 }
+// #endregion
+

src/components/chat/ChatDrawer.jsx

@@ -46,6 +46,44 @@ import {
 } from '../../colors';
 
 const DEFAULT_DRAWER_WIDTH = 460;
+
+/** Sort by updated_at desc; subagents (started_by set) directly below their parent. */
+function sortConversations(list) {
+  const ts = (c) => new Date(c.updated_at || c.created_at || 0).getTime() || 0;
+  const byUpdated = (a, b) => ts(b) - ts(a);
+  const ids = new Set(list.map((c) => c.id));
+  const children = new Map();
+  const roots = [];
+  for (const c of list) {
+    if (c.started_by != null && ids.has(c.started_by)) {
+      if (!children.has(c.started_by)) children.set(c.started_by, []);
+      children.get(c.started_by).push(c);
+    } else {
+      roots.push(c);
+    }
+  }
+  const out = [];
+  const walk = (c, depth) => {
+    out.push({ conv: c, depth });
+    (children.get(c.id) || []).sort(byUpdated).forEach((k) => walk(k, depth + 1));
+  };
+  roots.sort(byUpdated).forEach((c) => walk(c, 0));
+  return out;
+}
+
+function formatUpdated(value) {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString('de-DE', {
+    day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+function conversationTitle(c) {
+  const msg = (c.first_message || '').replace(/\s+/g, ' ').trim();
+  return msg || '…';
+}
 const MIN_DRAWER_WIDTH = 320;
 
 export default class ChatDrawer extends PureComponent {
@@ -1085,24 +1123,32 @@ export default class ChatDrawer extends PureComponent {
                   if (!conv) return '';
                   return (
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, overflow: 'hidden' }}>
-                      <Typography variant="body2" fontWeight={600} noWrap>
+                      <Typography variant="body2" fontWeight={600} noWrap sx={{ flexGrow: 1, minWidth: 0 }}>
-                        #{conv.id}
+                        {conversationTitle(conv)}
                       </Typography>
-                      <Typography variant="caption" color="text.secondary" noWrap>
+                      <Typography variant="caption" color="text.secondary" noWrap sx={{ flexShrink: 0 }}>
-                        {conv.model || 'Standard'}
+                        {formatUpdated(conv.updated_at)}
                       </Typography>
                     </Box>
                   );
                 }}
               >
-                {conversations.map((c) => (
+                {sortConversations(conversations).map(({ conv: c, depth }) => (
-                  <MenuItem key={c.id} value={c.id}>
+                  <MenuItem key={c.id} value={c.id} sx={{ pl: 2 + depth * 2.5 }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%', overflow: 'hidden' }}>
-                      <Typography variant="body2" fontWeight={600} noWrap>
+                      {depth > 0 && (
-                        #{c.id}
+                        <Typography variant="caption" color="text.secondary">↳</Typography>
+                      )}
+                      <Typography
+                        variant="body2"
+                        fontWeight={depth > 0 ? 400 : 600}
+                        noWrap
+                        sx={{ flexGrow: 1, minWidth: 0 }}
+                      >
+                        {conversationTitle(c)}
                       </Typography>
-                      <Typography variant="caption" color="text.secondary" noWrap sx={{ flexGrow: 1 }}>
+                      <Typography variant="caption" color="text.secondary" noWrap sx={{ flexShrink: 0 }}>
-                        {c.model || 'Standard'}
+                        {formatUpdated(c.updated_at)}
                       </Typography>
                     </Box>
                   </MenuItem>
@@ -1162,47 +1208,11 @@ export default class ChatDrawer extends PureComponent {
     } = this.state;
 
     if (loadingConversations && conversations.length === 0) {
-      return (
+      return (<></>)
-        <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', p: 3, gap: 2 }}>
-          <CircularProgress size={32} />
-          <Typography variant="body2" color="text.secondary">
-            Lade Konversationen…
-          </Typography>
-        </Box>
-      );
     }
 
     if (conversations.length === 0 && !draftConversation) {
-      return (
+      return (<></>)
-        <Box
-          sx={{
-            flexGrow: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            p: 4,
-            textAlign: 'center',
-            gap: 2,
-          }}
-        >
-          <AutoAwesomeRoundedIcon sx={{ fontSize: 44, color: 'primary.main', opacity: 0.85 }} />
-          <Typography variant="h6" fontWeight={700}>
-            Willkommen im Chat
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 280 }}>
-            Starte eine Unterhaltung mit dem KI-Modell, um Fragen zu stellen oder Daten abzufragen.
-          </Typography>
-          <Button
-            variant="contained"
-            startIcon={<AddRoundedIcon />}
-            onClick={this.handleNewChat}
-            sx={{ borderRadius: 2, mt: 1 }}
-          >
-            Neuen Chat starten
-          </Button>
-        </Box>
-      );
     }
 
     const pendingAsk = this.getPendingAskUser();

src/components/manifest/OrderList.jsx

@@ -10,6 +10,7 @@ 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 DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import { enqueueSnackbar } from 'notistack';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
@@ -17,11 +18,9 @@ import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import BackendError from '../BackendError';
 import orderAutomat, {
-  filterOrders,
+  CHUNK_SIZE,
   isOrderPaid,
   isOrderDelivered,
-  getNegativeSeekCutoff,
-  formatNegativeSeek,
 } from '../../automats/orderAutomat';
 import { order as orderApi } from '../../api';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -82,13 +81,42 @@ class OrderRow extends PureComponent {
   }
 
   render() {
-    const { item: order } = this.props;
+    const { item: order, disabled } = this.props;
 
     // Data-free probe (FillSpace measures the row height with `item` undefined).
     if (!order) {
+      if (disabled) {
+        return (
+          <ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
+            <Typography variant="body2">&nbsp;</Typography>
+          </ListItemButton>
+        );
+      }
       return (
-        <ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
+        <ListItemButton disabled divider sx={rowSx}>
-          <Typography variant="body2">&nbsp;</Typography>
+          <Box sx={{ width: 120, flexShrink: 0 }}>
+            <Skeleton variant="text" width={80} height={20} />
+            <Skeleton variant="text" width={50} height={16} />
+          </Box>
+          <Box sx={{ width: 100, flexShrink: 0 }}>
+            <Skeleton variant="text" width={70} height={20} />
+          </Box>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Skeleton variant="text" width="60%" height={20} />
+          </Box>
+          <Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+            <Skeleton variant="circular" width={20} height={20} />
+          </Box>
+          <Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+            <Skeleton variant="circular" width={20} height={20} />
+          </Box>
+          <Box sx={{ width: 40, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+            <Skeleton variant="rounded" width={28} height={20} />
+          </Box>
+          <Box sx={{ width: 96, flexShrink: 0, display: 'flex', justifyContent: 'flex-end' }}>
+            <Skeleton variant="text" width={60} height={20} />
+          </Box>
+          <Box sx={{ width: 40, flexShrink: 0 }} />
         </ListItemButton>
       );
     }
@@ -407,19 +435,9 @@ class OrderSearchField extends PureComponent {
 export class OrderList extends PureComponent {
   constructor(props) {
     super(props);
-    const s = orderAutomat.state;
+    // getItems() returns current items or null and triggers loading of the first chunk
     this.state = {
-      status: s.status === 'ready' ? 'ready' : 'loading',
+      items: orderAutomat.getItems(),
-      error: s.error ? backendErrorFrom(s.error) : null,
-      filteredItems: orderAutomat.actions.getOrLoad(),
-      items: s.items ?? [],
-      total: s.total ?? 0,
-      filter: s.filter ?? '',
-      onlyUnpaid: s.onlyUnpaid ?? false,
-      onlyUndelivered: s.onlyUndelivered ?? false,
-      negativeSeekMonths: s.negativeSeekMonths ?? 0,
-      hasMore: s.hasMore ?? false,
-      loadingMore: s.loadingMore ?? false,
       partiesById: {},
       busyId: null,
     };
@@ -432,7 +450,71 @@ export class OrderList extends PureComponent {
     this.handleTogglePaid = this.handleTogglePaid.bind(this);
     this.handleToggleDelivered = this.handleToggleDelivered.bind(this);
     this.handlePageChange = this.handlePageChange.bind(this);
-    this.nameOf = this.nameOf.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    // Subscribe to items only
+    this.unsub = orderAutomat.subscribe(this, (state) => ({
+      items: state.items,
+    }));
+    void this.loadParties();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+  }
+
+  async loadParties() {
+    try {
+      const parties = await loadParties('order');
+      if (!this._cancelled) {
+        this.setState({ partiesById: cfg.partiesByIdFromList(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);
+
+    orderAutomat.requireChunk(startChunk, endChunk);
+  }
+
+  handleRetry() {
+    void orderAutomat.actions.requireChunk(0, 0, { immediate: true }).catch(() => {});
+  }
+
+  handleCreate() {
+    this.props.navigate(cfg.createPath);
+  }
+
+  handleOpen(order) {
+    this.props.navigate(cfg.editPath(order.id));
+  }
+
+  async handleDelete(order) {
+    if (this.state.busyId != null) return;
+    if (!window.confirm(cfg.confirmDelete(order.number))) return;
+    this.setState({ busyId: order.id });
+    try {
+      await orderApi.delete(order.id);
+      await orderAutomat.actions.reload();
+      enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      if (!this._cancelled) this.setState({ busyId: null });
+    }
   }
 
   async handleTogglePaid(order, checked) {
@@ -463,122 +545,8 @@ export class OrderList extends PureComponent {
     }
   }
 
-  handlePageChange(page, meta) {
-    const pageSize = meta?.pageSize ?? 10;
-    const loadedPages = Math.ceil(this.state.items.length / pageSize);
-    // Load next batch when the pagination comes close to the end of loaded items (within 2 pages) or beyond.
-    if (loadedPages - page <= 2 || page > loadedPages) {
-      void orderAutomat.actions.loadMore(page * pageSize);
-    }
-  }
-
-  componentDidMount() {
-    this._cancelled = false;
-    this.unsub = orderAutomat.subscribe(this, (state) => ({
-      items: state.items ?? [],
-      total: state.total ?? 0,
-      filter: state.filter ?? '',
-      onlyUnpaid: state.onlyUnpaid ?? false,
-      onlyUndelivered: state.onlyUndelivered ?? false,
-      negativeSeekMonths: state.negativeSeekMonths ?? 0,
-      hasMore: state.hasMore ?? false,
-      loadingMore: state.loadingMore ?? false,
-      filteredItems: filterOrders(state.items ?? [], {
-        filter: state.filter,
-        onlyUnpaid: state.onlyUnpaid,
-        onlyUndelivered: state.onlyUndelivered,
-        negativeSeekMonths: state.negativeSeekMonths,
-      }, this.nameOf),
-      status: state.status,
-      error: state.error ? backendErrorFrom(state.error) : null,
-    }));
-    void this.loadAll();
-  }
-
-  componentWillUnmount() {
-    this._cancelled = true;
-    this.unsub?.();
-  }
-
-  async loadAll() {
-    try {
-      const parties = await loadParties('order');
-      if (!this._cancelled) {
-        const partiesById = cfg.partiesByIdFromList(parties);
-        this.setState((prev) => ({
-          partiesById,
-          filteredItems: filterOrders(prev.items, {
-            filter: prev.filter,
-            onlyUnpaid: prev.onlyUnpaid,
-            onlyUndelivered: prev.onlyUndelivered,
-            negativeSeekMonths: prev.negativeSeekMonths,
-          }, (o) => partyDisplayName('order', partiesById[o.entityId])),
-        }));
-      }
-    } catch {
-      // Non-fatal: names fall back to ids.
-    }
-  }
-
-  nameOf(order) {
-    const party = this.state.partiesById[order.entityId];
-    return partyDisplayName('order', party);
-  }
-
-  handleRetry() {
-    void orderAutomat.actions.load().catch(() => { });
-  }
-
-  handleCreate() {
-    this.props.navigate(cfg.createPath);
-  }
-
-  handleOpen(order) {
-    this.props.navigate(cfg.editPath(order.id));
-  }
-
-  async handleDelete(order) {
-    if (this.state.busyId != null) return;
-    if (!window.confirm(cfg.confirmDelete(order.number))) return;
-    this.setState({ busyId: order.id });
-    try {
-      await orderApi.delete(order.id);
-      await orderAutomat.actions.reload();
-      enqueueSnackbar(cfg.deletedMsg, { variant: 'success' });
-    } catch (err) {
-      notifyError(err);
-    } finally {
-      if (!this._cancelled) this.setState({ busyId: null });
-    }
-  }
-
   render() {
-    const {
+    const { items, partiesById, busyId } = this.state;
-      status,
-      error,
-      items,
-      total,
-      filter,
-      onlyUnpaid,
-      onlyUndelivered,
-      negativeSeekMonths,
-      hasMore,
-      loadingMore,
-      filteredItems,
-      partiesById,
-      busyId,
-    } = this.state;
-
-    if (status === 'loading' || status === 'idle') {
-      return (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <CircularProgress />
-        </Box>
-      );
-    }
-    if (status === 'failed') {
-      return <BackendError error={error} onRetry={this.handleRetry} />;
-    }
 
     rowContext.partiesById = partiesById;
     rowContext.busyId = busyId;
@@ -587,22 +555,31 @@ export class OrderList extends PureComponent {
     rowContext.onTogglePaid = this.handleTogglePaid;
     rowContext.onToggleDelivered = this.handleToggleDelivered;
 
-    const rows = filteredItems ?? [];
+    if (items === null && orderAutomat.state.status === 'failed') {
-    const isFiltered = Boolean(filter || onlyUnpaid || onlyUndelivered || negativeSeekMonths < 0);
+      return (
-    const displayTotal = isFiltered ? rows.length : (total || items.length);
+        <>
+          <OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
+          <PanelTileGrid>
+            <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ p: 2 }}>
+              <BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />
+            </PanelTile>
+          </PanelTileGrid>
+        </>
+      );
+    }
 
     return (
       <>
         <OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
         <PanelTileGrid>
-          <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
+          <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0, position: 'relative' }}>
             <FillSpace
               aboveRef={[this.searchRef]}
               reserveBottom={32}
               minPageSize={8}
               minHeight={0}
-              items={rows}
+              items={items || []}
-              totalCount={displayTotal}
+              totalCount={items ? items.length : 0}
               renderItem={OrderRow}
               virtualScrollbar
               header={
@@ -636,6 +613,24 @@ export class OrderList extends PureComponent {
               }
               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',
+                  zIndex: 2,
+                }}
+              >
+                <CircularProgress size={32} />
+              </Box>
+            )}
           </PanelTile>
         </PanelTileGrid>
       </>

src/components/manifest/OrderPaymentList.jsx

@@ -0,0 +1,611 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import ListItemButton from '@mui/material/ListItemButton';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import PaymentsIcon from '@mui/icons-material/Payments';
+import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
+import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { enqueueSnackbar } from 'notistack';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import FillSpace from 'dashgui/FillSpace';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import BackendError from '../BackendError';
+import AppDialog from '../AppDialog';
+import orderAutomat from '../../automats/orderAutomat';
+import accountAutomat from '../../automats/accountAutomat';
+import { payment as paymentApi } from '../../api';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+import { formatPrice } from '../../utils/price';
+import withNavigate from '../withNavigate';
+import {
+  formatDate,
+  loadParties,
+  manifestConfig,
+  partyDisplayName,
+} from './manifestConfig';
+import {
+  YELLOW_PANEL,
+  SURFACE_RAISED,
+  WHITE,
+} from '../../colors';
+
+const cfg = manifestConfig('order');
+
+const PAYMENT_TYPES = [
+  { value: 'transfer', label: 'Banküberweisung', icon: AccountBalanceIcon },
+  { value: 'cash', label: 'Barzahlung', icon: PointOfSaleIcon },
+  { value: 'card', label: 'EC- / Kreditkarte', icon: CreditCardIcon },
+  { value: 'paypal', label: 'PayPal', icon: PaymentsIcon },
+  { value: 'sepa', label: 'SEPA-Lastschrift', icon: AccountBalanceIcon },
+  { value: 'invoice', label: 'Auf Rechnung', icon: PaymentsIcon },
+  { value: 'other', label: 'Sonstige', icon: PaymentsIcon },
+];
+
+function typeLabel(val) {
+  const match = PAYMENT_TYPES.find((t) => t.value === val);
+  return match?.label || val || 'Zahlung';
+}
+
+function typeIcon(val) {
+  const match = PAYMENT_TYPES.find((t) => t.value === val);
+  const IconComp = match?.icon || PaymentsIcon;
+  return <IconComp sx={{ fontSize: 18 }} />;
+}
+
+const rowSx = {
+  alignItems: 'center',
+  height: 56,
+  minHeight: 56,
+  maxHeight: 56,
+  boxSizing: 'border-box',
+  py: 0,
+  gap: 1.5,
+};
+
+const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+
+const paymentRowContext = {
+  partiesById: {},
+  accountsById: {},
+  busyId: null,
+  onDelete: null,
+  onNavigateOrder: null,
+};
+
+// MARK: <PaymentTableRow/>
+class PaymentTableRow extends PureComponent {
+  render() {
+    const { item: payment } = this.props;
+
+    if (!payment) {
+      return (
+        <ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
+          <Typography variant="body2">&nbsp;</Typography>
+        </ListItemButton>
+      );
+    }
+
+    const { partiesById, accountsById, busyId, onDelete, onNavigateOrder } = paymentRowContext;
+    const party = partiesById[payment.entityId];
+    const customerName = partyDisplayName('order', party) || (payment.entityId ? `Kunde #${payment.entityId}` : '–');
+    const accountName = accountsById[payment.accountId] || `Konto #${payment.accountId}`;
+    const isBusy = busyId === payment.id;
+
+    return (
+      <ListItemButton divider sx={rowSx} onClick={() => onNavigateOrder?.(payment.orderId)}>
+        {/* Payment ID from payment table */}
+        <Box sx={{ width: 80, flexShrink: 0 }}>
+          <Chip size="small" label={`#${payment.id}`} sx={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }} />
+        </Box>
+
+        {/* Amount */}
+        <Box sx={{ width: 130, flexShrink: 0, textAlign: 'right' }}>
+          <Typography variant="body1" sx={{ fontWeight: 700, color: 'success.main', fontVariantNumeric: 'tabular-nums' }}>
+            +{formatPrice(payment.amount)}
+          </Typography>
+        </Box>
+
+        {/* Payment Type */}
+        <Box sx={{ width: 160, flexShrink: 0, display: 'flex', alignItems: 'center', gap: 1 }}>
+          {typeIcon(payment.type)}
+          <Typography variant="body2" sx={{ fontWeight: 600, ...ellipsisSx }}>
+            {typeLabel(payment.type)}
+          </Typography>
+        </Box>
+
+        {/* Account from account table */}
+        <Box sx={{ width: 150, flexShrink: 0 }}>
+          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+            {accountName}
+          </Typography>
+        </Box>
+
+        {/* Linked Manifest (Auftrag) */}
+        <Box sx={{ width: 120, flexShrink: 0 }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main', ...ellipsisSx }}>
+            {payment.orderNumber}
+          </Typography>
+        </Box>
+
+        {/* Customer Name */}
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="body2" sx={{ fontWeight: 500, ...ellipsisSx }}>
+            {customerName}
+          </Typography>
+        </Box>
+
+        {/* Action: Delete payment */}
+        <IconButton
+          size="small"
+          color="error"
+          disabled={isBusy}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete?.(payment);
+          }}
+          aria-label={`Zahlung #${payment.id} löschen`}
+          sx={{ width: 36, height: 36, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon fontSize="small" />
+        </IconButton>
+      </ListItemButton>
+    );
+  }
+}
+
+// MARK: <RecordPaymentDialog/>
+class RecordPaymentDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    const orders = props.orders || [];
+    // Prefer unpaid orders
+    const unpaidOrders = orders.filter((o) => {
+      const tot = Number(o.orderTotal) || 0;
+      const pd = Number(o.paidTotal) || 0;
+      return tot === 0 || pd < tot;
+    });
+
+    const selectedOrder = unpaidOrders[0] || orders[0] || null;
+    const remaining = selectedOrder ? Math.max(0, Math.round(((Number(selectedOrder.orderTotal) || 0) - (Number(selectedOrder.paidTotal) || 0)) * 100) / 100) : 0;
+    const accounts = accountAutomat.state.items || [];
+    const defaultAccountId = accounts[0]?.id || 1;
+
+    this.state = {
+      orderId: selectedOrder?.id || '',
+      accountId: defaultAccountId,
+      type: 'transfer',
+      amount: remaining > 0 ? String(remaining) : '',
+      saving: false,
+    };
+
+    this.handleOrderChange = this.handleOrderChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleOrderChange(newOrderId) {
+    const order = this.props.orders.find((o) => o.id === Number(newOrderId));
+    const remaining = order ? Math.max(0, Math.round(((Number(order.orderTotal) || 0) - (Number(order.paidTotal) || 0)) * 100) / 100) : 0;
+    this.setState({
+      orderId: newOrderId,
+      amount: remaining > 0 ? String(remaining) : '',
+    });
+  }
+
+  async handleSubmit() {
+    const { onClose, onSuccess } = this.props;
+    const { orderId, accountId, type, amount } = this.state;
+    const numAmount = Number(String(amount).replace(',', '.'));
+
+    if (!orderId) {
+      enqueueSnackbar('Bitte einen Auftrag auswählen.', { variant: 'warning' });
+      return;
+    }
+
+    if (!Number.isFinite(numAmount) || numAmount <= 0) {
+      enqueueSnackbar('Bitte einen gültigen Betrag größer 0 eingeben.', { variant: 'warning' });
+      return;
+    }
+
+    this.setState({ saving: true });
+    try {
+      await paymentApi.create(orderId, {
+        accountId: Number(accountId),
+        type,
+        amount: numAmount,
+      });
+      enqueueSnackbar('Zahlungseingang erfolgreich verbucht!', { variant: 'success' });
+      await orderAutomat.actions.reload();
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      notifyError(err);
+      this.setState({ saving: false });
+    }
+  }
+
+  render() {
+    const { open, onClose, orders, partiesById } = this.props;
+    const { orderId, accountId, type, amount, saving } = this.state;
+    const accounts = accountAutomat.state.items || [];
+
+    return (
+      <AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+        <Box sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <PaymentsIcon color="primary" />
+              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                Zahlungseingang erfassen
+              </Typography>
+            </Box>
+            <IconButton onClick={onClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
+            <TextField
+              select
+              label="Auftrag (Manifest)"
+              size="small"
+              value={orderId}
+              onChange={(e) => this.handleOrderChange(e.target.value)}
+              fullWidth
+            >
+              {orders.map((o) => {
+                const party = partiesById[o.entityId];
+                const partyName = partyDisplayName('order', party) || `Kunde #${o.entityId}`;
+                const tot = Number(o.orderTotal) || 0;
+                const pd = Number(o.paidTotal) || 0;
+                const rem = Math.max(0, tot - pd);
+                return (
+                  <MenuItem key={o.id} value={o.id}>
+                    {o.number} — {partyName} (Offen: {formatPrice(rem)})
+                  </MenuItem>
+                );
+              })}
+            </TextField>
+
+            <TextField
+              select
+              label="Konto / Kasse (account)"
+              size="small"
+              value={accountId}
+              onChange={(e) => this.setState({ accountId: e.target.value })}
+            >
+              {accounts.length > 0 ? (
+                accounts.map((acc) => (
+                  <MenuItem key={acc.id} value={acc.id}>
+                    {acc.name} ({acc.type})
+                  </MenuItem>
+                ))
+              ) : (
+                <MenuItem value={1}>Standardkonto</MenuItem>
+              )}
+            </TextField>
+
+            <TextField
+              select
+              label="Zahlungsart (type)"
+              size="small"
+              value={type}
+              onChange={(e) => this.setState({ type: e.target.value })}
+            >
+              {PAYMENT_TYPES.map((pt) => (
+                <MenuItem key={pt.value} value={pt.value}>
+                  {pt.label}
+                </MenuItem>
+              ))}
+            </TextField>
+
+            <TextField
+              label="Zahlungsbetrag (€)"
+              size="small"
+              type="number"
+              value={amount}
+              onChange={(e) => this.setState({ amount: e.target.value })}
+              inputProps={{ min: 0.01, step: 'any' }}
+            />
+          </Box>
+
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
+            <Button variant="outlined" onClick={onClose} disabled={saving}>
+              Abbrechen
+            </Button>
+            <Button variant="contained" onClick={this.handleSubmit} disabled={saving} startIcon={<PaymentsIcon />}>
+              {saving ? 'Wird verbucht…' : 'Zahlung buchen'}
+            </Button>
+          </Box>
+        </Box>
+      </AppDialog>
+    );
+  }
+}
+
+// MARK: <OrderPaymentList/>
+export class OrderPaymentList extends PureComponent {
+  constructor(props) {
+    super(props);
+    const s = orderAutomat.state;
+    this.state = {
+      status: s.status === 'ready' ? 'ready' : 'loading',
+      error: s.error ? backendErrorFrom(s.error) : null,
+      items: s.items ?? [],
+      filter: '',
+      partiesById: {},
+      accountsById: {},
+      busyId: null,
+      recordDialogOpen: false,
+    };
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleDeletePayment = this.handleDeletePayment.bind(this);
+    this.handleNavigateOrder = this.handleNavigateOrder.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    this.unsub = orderAutomat.subscribe(this, (state) => ({
+      items: state.items ?? [],
+      status: state.status,
+      error: state.error ? backendErrorFrom(state.error) : null,
+    }));
+    this.unsubAccount = accountAutomat.subscribe(this, (state) => ({
+      accountsById: Object.fromEntries((state.items || []).map((a) => [a.id, a.name])),
+    }));
+
+    if (orderAutomat.state.status === 'idle') {
+      void orderAutomat.actions.load().catch(() => {});
+    }
+    void accountAutomat.actions.ensureLoaded().catch(() => {});
+    void this.loadPartiesData();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+    this.unsubAccount?.();
+  }
+
+  async loadPartiesData() {
+    try {
+      const parties = await loadParties('order');
+      if (!this._cancelled) {
+        this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
+      }
+    } catch {
+      // Non-fatal
+    }
+  }
+
+  handleRetry() {
+    void orderAutomat.actions.load().catch(() => {});
+  }
+
+  extractAllPayments(orders = this.state.items) {
+    const list = [];
+    for (const order of orders) {
+      if (!order || !Array.isArray(order.payments)) continue;
+      for (const pay of order.payments) {
+        list.push({
+          ...pay,
+          orderId: order.id,
+          orderNumber: order.number,
+          orderDate: order.date,
+          entityId: order.entityId,
+          orderTotal: order.orderTotal,
+          paidTotal: order.paidTotal,
+        });
+      }
+    }
+    // Sort descending by payment id
+    return list.sort((a, b) => Number(b.id || 0) - Number(a.id || 0));
+  }
+
+  async handleDeletePayment(payment) {
+    if (!window.confirm(`Zahlung #${payment.id} über ${formatPrice(payment.amount)} wirklich löschen?`)) return;
+    this.setState({ busyId: payment.id });
+    try {
+      await paymentApi.delete(payment.id);
+      enqueueSnackbar(`Zahlung #${payment.id} gelöscht.`, { variant: 'success' });
+      await orderAutomat.actions.reload();
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      if (!this._cancelled) {
+        this.setState({ busyId: null });
+      }
+    }
+  }
+
+  handleNavigateOrder(orderId) {
+    if (orderId) {
+      this.props.navigate(`/auftrag/bestellung/${orderId}`);
+    }
+  }
+
+  getFilteredPayments() {
+    const all = this.extractAllPayments();
+    const q = this.state.filter.trim().toLowerCase();
+    if (!q) return all;
+
+    const { partiesById, accountsById } = this.state;
+    return all.filter((pay) => {
+      const party = partiesById[pay.entityId];
+      const customerName = partyDisplayName('order', party);
+      const accountName = accountsById[pay.accountId];
+      const typeStr = typeLabel(pay.type);
+
+      return [
+        String(pay.id),
+        pay.orderNumber,
+        customerName,
+        accountName,
+        typeStr,
+        pay.type,
+      ].some((val) => String(val || '').toLowerCase().includes(q));
+    });
+  }
+
+  render() {
+    const { status, error, filter, partiesById, accountsById, busyId, recordDialogOpen, items } = this.state;
+
+    if (status === 'loading' || status === 'idle') {
+      return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (status === 'failed') {
+      return <BackendError error={error} onRetry={this.handleRetry} />;
+    }
+
+    const filtered = this.getFilteredPayments();
+    const allPayments = this.extractAllPayments();
+    const totalAmount = allPayments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+
+    paymentRowContext.partiesById = partiesById;
+    paymentRowContext.accountsById = accountsById;
+    paymentRowContext.busyId = busyId;
+    paymentRowContext.onDelete = this.handleDeletePayment;
+    paymentRowContext.onNavigateOrder = this.handleNavigateOrder;
+
+    return (
+      <>
+        {/* Metrics Banner */}
+        <PanelTileGrid>
+          <Box
+            sx={{
+              gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              pb: 2,
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 3,
+                p: 2,
+                bgcolor: SURFACE_RAISED,
+                borderRadius: 2,
+                flexWrap: 'wrap',
+              }}
+            >
+              <Box>
+                <Typography variant="caption" color="text.secondary">
+                  Gesamtsumme aller Zahlungen
+                </Typography>
+                <Typography variant="h5" sx={{ fontWeight: 700, color: 'success.main', fontVariantNumeric: 'tabular-nums' }}>
+                  {formatPrice(totalAmount)}
+                </Typography>
+              </Box>
+              <Divider orientation="vertical" flexItem />
+              <Box>
+                <Typography variant="caption" color="text.secondary">
+                  Anzahl Zahlungseinträge (Tabelle payment)
+                </Typography>
+                <Typography variant="h5" sx={{ fontWeight: 700 }}>
+                  {allPayments.length}
+                </Typography>
+              </Box>
+              <Box sx={{ flex: 1 }} />
+              <Button
+                variant="contained"
+                startIcon={<AddIcon />}
+                onClick={() => this.setState({ recordDialogOpen: true })}
+                sx={{ height: 40 }}
+              >
+                Zahlungseingang erfassen
+              </Button>
+            </Box>
+
+            {/* Search Bar */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <SingleLineTextEdit
+                sx={{ flex: 1 }}
+                size="small"
+                search
+                clear
+                placeholder="Zahlungs-ID, Auftrag, Kunde, Konto oder Zahlungsart suchen…"
+                value={filter}
+                onChange={(next) => this.setState({ filter: next })}
+              />
+            </Box>
+          </Box>
+        </PanelTileGrid>
+
+        {/* Payments Table (connected directly to payment records) */}
+        <PanelTileGrid>
+          <PanelTile wide={3} minHeight={0} color={YELLOW_PANEL} sx={{ pb: 0 }}>
+            <FillSpace
+              reserveBottom={32}
+              minPageSize={8}
+              minHeight={0}
+              items={filtered}
+              totalCount={filtered.length}
+              renderItem={PaymentTableRow}
+              virtualScrollbar
+              header={
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 36,
+                    minHeight: 36,
+                    px: 2,
+                    gap: 1.5,
+                    borderBottom: '1px solid',
+                    borderColor: 'divider',
+                    color: 'text.secondary',
+                    typography: 'caption',
+                    fontWeight: 600,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.04em',
+                    userSelect: 'none',
+                  }}
+                >
+                  <Box sx={{ width: 80, flexShrink: 0 }}>ID</Box>
+                  <Box sx={{ width: 130, flexShrink: 0, textAlign: 'right' }}>Betrag</Box>
+                  <Box sx={{ width: 160, flexShrink: 0 }}>Zahlungsart</Box>
+                  <Box sx={{ width: 150, flexShrink: 0 }}>Konto</Box>
+                  <Box sx={{ width: 120, flexShrink: 0 }}>Auftrag</Box>
+                  <Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
+                  <Box sx={{ width: 36, flexShrink: 0 }} />
+                </Box>
+              }
+            />
+          </PanelTile>
+        </PanelTileGrid>
+
+        {recordDialogOpen && (
+          <RecordPaymentDialog
+            open={recordDialogOpen}
+            orders={items}
+            partiesById={partiesById}
+            onClose={() => this.setState({ recordDialogOpen: false })}
+          />
+        )}
+      </>
+    );
+  }
+}
+
+export default withNavigate(OrderPaymentList);

src/components/manifest/ShipmentList.jsx

@@ -0,0 +1,927 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import ListItemButton from '@mui/material/ListItemButton';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+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 MenuItem from '@mui/material/MenuItem';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import LocalShippingIcon from '@mui/icons-material/LocalShipping';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import Inventory2Icon from '@mui/icons-material/Inventory2';
+import { enqueueSnackbar } from 'notistack';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import BackendError from '../BackendError';
+import AppDialog from '../AppDialog';
+import orderAutomat from '../../automats/orderAutomat';
+import { shipment as shipmentApi, shipping as shippingApi } from '../../api';
+import { backendErrorFrom } from '../../utils/backendError';
+import { notifyError } from '../../utils/notify';
+import withNavigate from '../withNavigate';
+import {
+  formatDate,
+  loadParties,
+  manifestConfig,
+  numberDisplay,
+  partyDisplayName,
+} from './manifestConfig';
+import {
+  GREEN_PANEL,
+  SURFACE_BASE,
+  SURFACE_RAISED,
+  WHITE,
+} from '../../colors';
+
+const cfg = manifestConfig('order');
+
+const CARRIERS = ['DHL', 'UPS', 'DPD', 'GLS', 'Hermes', 'Spedition', 'Selbstabholung'];
+
+const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+
+// MARK: <AddPackageDialog/>
+class AddPackageDialog extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      carrier: 'DHL',
+      trackingCode: '',
+      type: 'parcel',
+      state: 'draft',
+      saving: false,
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  async handleSubmit() {
+    const { shipment, onClose, onSuccess } = this.props;
+    const { carrier, trackingCode, type, state } = this.state;
+
+    this.setState({ saving: true });
+    try {
+      await shippingApi.create(shipment.id, {
+        carrier: carrier.trim() || undefined,
+        trackingCode: trackingCode.trim() || undefined,
+        type,
+        state,
+      });
+      enqueueSnackbar('Paket angelegt.', { variant: 'success' });
+      await orderAutomat.actions.reload();
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      notifyError(err);
+      this.setState({ saving: false });
+    }
+  }
+
+  render() {
+    const { open, onClose, shipment } = this.props;
+    const { carrier, trackingCode, type, state, saving } = this.state;
+
+    return (
+      <AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+        <Box sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 2 }}>
+            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              Paket zu Lieferschein hinzufügen
+            </Typography>
+            <IconButton onClick={onClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Lieferschein: <strong>{shipment?.number}</strong>
+          </Typography>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
+            <TextField
+              select
+              label="Versanddienstleister (Carrier)"
+              size="small"
+              value={carrier}
+              onChange={(e) => this.setState({ carrier: e.target.value })}
+            >
+              {CARRIERS.map((c) => (
+                <MenuItem key={c} value={c}>{c}</MenuItem>
+              ))}
+            </TextField>
+
+            <TextField
+              label="Tracking-Code / Sendungsnummer"
+              size="small"
+              value={trackingCode}
+              onChange={(e) => this.setState({ trackingCode: e.target.value })}
+              placeholder="z.B. 00340434234234234"
+            />
+
+            <TextField
+              select
+              label="Paketart"
+              size="small"
+              value={type}
+              onChange={(e) => this.setState({ type: e.target.value })}
+            >
+              <MenuItem value="parcel">Paket (Parcel)</MenuItem>
+              <MenuItem value="pallet">Palette (Pallet)</MenuItem>
+              <MenuItem value="letter">Brief / Dokument</MenuItem>
+            </TextField>
+
+            <TextField
+              select
+              label="Status"
+              size="small"
+              value={state}
+              onChange={(e) => this.setState({ state: e.target.value })}
+              helperText={state === 'shipped' ? 'Bucht bei Auswahl direkt das Lager ab.' : undefined}
+            >
+              <MenuItem value="draft">Entwurf (draft)</MenuItem>
+              <MenuItem value="packed">Gepackt (packed)</MenuItem>
+              <MenuItem value="shipped">Versendet (shipped — Lagerabbuchung)</MenuItem>
+            </TextField>
+          </Box>
+
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
+            <Button variant="outlined" onClick={onClose} disabled={saving}>
+              Abbrechen
+            </Button>
+            <Button variant="contained" onClick={this.handleSubmit} disabled={saving}>
+              {saving ? 'Wird gespeichert…' : 'Paket anlegen'}
+            </Button>
+          </Box>
+        </Box>
+      </AppDialog>
+    );
+  }
+}
+
+// MARK: <NewShipmentModal/>
+class NewShipmentModal extends PureComponent {
+  constructor(props) {
+    super(props);
+    const orders = props.orders.filter((o) => {
+      const ordQty = Number(o.orderedQuantity) || 0;
+      const shpQty = Number(o.shippedQuantity) || 0;
+      return ordQty === 0 || shpQty < ordQty;
+    });
+
+    const selectedOrder = orders[0] || null;
+    const initialAmounts = {};
+    if (selectedOrder) {
+      this.populateAmounts(selectedOrder, initialAmounts);
+    }
+
+    this.state = {
+      orderId: selectedOrder?.id || '',
+      date: new Date().toISOString().slice(0, 10),
+      externalNumber: '',
+      lineAmounts: initialAmounts,
+      saving: false,
+    };
+
+    this.handleOrderChange = this.handleOrderChange.bind(this);
+    this.handleAmountChange = this.handleAmountChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  populateAmounts(order, targetMap) {
+    const shippedBySku = {};
+    for (const sh of order.shipments || []) {
+      for (const sl of sh.lines || []) {
+        if (sl.sku) shippedBySku[sl.sku] = (shippedBySku[sl.sku] || 0) + (Number(sl.amount) || 0);
+      }
+    }
+    for (const l of order.lines || []) {
+      if (!l.sku) continue;
+      const orderedAmt = Number(l.amount) || 0;
+      const shippedAmt = shippedBySku[l.sku] || 0;
+      const rem = Math.max(0, orderedAmt - shippedAmt);
+      targetMap[l.sku] = rem > 0 ? String(rem) : '0';
+    }
+  }
+
+  handleOrderChange(newOrderId) {
+    const order = this.props.orders.find((o) => o.id === newOrderId);
+    const newAmounts = {};
+    if (order) {
+      this.populateAmounts(order, newAmounts);
+    }
+    this.setState({ orderId: newOrderId, lineAmounts: newAmounts });
+  }
+
+  handleAmountChange(sku, val) {
+    this.setState((prev) => ({
+      lineAmounts: { ...prev.lineAmounts, [sku]: val },
+    }));
+  }
+
+  async handleSubmit() {
+    const { orders, onClose, onSuccess } = this.props;
+    const { orderId, date, externalNumber, lineAmounts } = this.state;
+    const order = orders.find((o) => o.id === Number(orderId));
+    if (!order) return;
+
+    const linesToShip = [];
+    for (const [sku, amtStr] of Object.entries(lineAmounts)) {
+      const amt = Number(amtStr);
+      if (amt > 0) {
+        const orderLine = order.lines?.find((l) => l.sku === sku);
+        linesToShip.push({
+          sku,
+          amount: amt,
+          name: orderLine?.name ?? '',
+          pu: orderLine?.pu ?? 1,
+          net: orderLine?.net ?? 0,
+          rebate: orderLine?.rebate ?? 0,
+          taxrate: orderLine?.taxrate ?? 0,
+        });
+      }
+    }
+
+    if (linesToShip.length === 0) {
+      enqueueSnackbar('Mindestens ein Artikel muss eine Liefermenge > 0 haben.', { variant: 'warning' });
+      return;
+    }
+
+    this.setState({ saving: true });
+    try {
+      const res = await shipmentApi.create(order.id, {
+        date,
+        externalNumber: externalNumber.trim() || undefined,
+        lines: linesToShip,
+      });
+      enqueueSnackbar(`Lieferschein ${res.shipment?.number || ''} erfolgreich angelegt!`, { variant: 'success' });
+      await orderAutomat.actions.reload();
+      onSuccess?.(res.shipment?.id);
+      onClose();
+    } catch (err) {
+      notifyError(err);
+      this.setState({ saving: false });
+    }
+  }
+
+  render() {
+    const { open, onClose, orders, partiesById } = this.props;
+    const { orderId, date, externalNumber, lineAmounts, saving } = this.state;
+
+    const openOrders = orders.filter((o) => {
+      const ordQty = Number(o.orderedQuantity) || 0;
+      const shpQty = Number(o.shippedQuantity) || 0;
+      return ordQty === 0 || shpQty < ordQty;
+    });
+
+    const currentOrder = orders.find((o) => o.id === Number(orderId));
+    const lines = Array.isArray(currentOrder?.lines) ? currentOrder.lines : [];
+
+    const shippedBySku = {};
+    for (const sh of currentOrder?.shipments || []) {
+      for (const sl of sh.lines || []) {
+        if (sl.sku) shippedBySku[sl.sku] = (shippedBySku[sl.sku] || 0) + (Number(sl.amount) || 0);
+      }
+    }
+
+    return (
+      <AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+        <Box sx={{ p: 2.5 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 2 }}>
+            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              Neuen Lieferschein erstellen (Shipment Manifest)
+            </Typography>
+            <IconButton onClick={onClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
+            <TextField
+              select
+              label="Auftrag auswählen"
+              size="small"
+              value={orderId}
+              onChange={(e) => this.handleOrderChange(e.target.value)}
+              fullWidth
+            >
+              {openOrders.map((o) => {
+                const party = partiesById[o.entityId];
+                const partyName = partyDisplayName('order', party) || `Kunde #${o.entityId}`;
+                return (
+                  <MenuItem key={o.id} value={o.id}>
+                    {o.number} — {partyName} ({o.shippedQuantity || 0}/{o.orderedQuantity || 0} geliefert)
+                  </MenuItem>
+                );
+              })}
+            </TextField>
+
+            <Box sx={{ display: 'flex', gap: 2 }}>
+              <TextField
+                label="Lieferdatum"
+                type="date"
+                size="small"
+                value={date}
+                onChange={(e) => this.setState({ date: e.target.value })}
+                InputLabelProps={{ shrink: true }}
+                sx={{ width: 180 }}
+              />
+              <TextField
+                label="Externe Referenz / Lieferschein-Nr."
+                size="small"
+                placeholder="z.B. LS-2026-99"
+                value={externalNumber}
+                onChange={(e) => this.setState({ externalNumber: e.target.value })}
+                sx={{ flex: 1 }}
+              />
+            </Box>
+          </Box>
+
+          {currentOrder && (
+            <>
+              <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                Zu liefernde Positionen (Maximal restante Bestellmenge)
+              </Typography>
+
+              <TableContainer sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, mb: 3 }}>
+                <Table size="small">
+                  <TableHead sx={{ bgcolor: 'action.hover' }}>
+                    <TableRow>
+                      <TableCell sx={{ fontWeight: 600 }}>SKU</TableCell>
+                      <TableCell sx={{ fontWeight: 600 }}>Artikel</TableCell>
+                      <TableCell align="right" sx={{ fontWeight: 600 }}>Bestellt</TableCell>
+                      <TableCell align="right" sx={{ fontWeight: 600 }}>Geliefert</TableCell>
+                      <TableCell align="right" sx={{ fontWeight: 600 }}>Offen</TableCell>
+                      <TableCell align="right" sx={{ fontWeight: 600, width: 120 }}>Liefermenge</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {lines.map((line) => {
+                      const orderedAmt = Number(line.amount) || 0;
+                      const shippedAmt = shippedBySku[line.sku] || 0;
+                      const remaining = Math.max(0, orderedAmt - shippedAmt);
+                      const currentVal = lineAmounts[line.sku] ?? '0';
+
+                      return (
+                        <TableRow key={line.id || line.sku}>
+                          <TableCell sx={{ fontWeight: 500 }}>{line.sku}</TableCell>
+                          <TableCell>{line.name}</TableCell>
+                          <TableCell align="right">{orderedAmt}</TableCell>
+                          <TableCell align="right">{shippedAmt}</TableCell>
+                          <TableCell align="right" sx={{ fontWeight: 600, color: remaining > 0 ? 'primary.main' : 'text.disabled' }}>
+                            {remaining}
+                          </TableCell>
+                          <TableCell align="right">
+                            <TextField
+                              size="small"
+                              type="number"
+                              value={currentVal}
+                              onChange={(e) => this.handleAmountChange(line.sku, e.target.value)}
+                              disabled={remaining <= 0}
+                              inputProps={{ min: 0, max: remaining, step: 'any', style: { textAlign: 'right' } }}
+                              sx={{ width: 100 }}
+                            />
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </>
+          )}
+
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5 }}>
+            <Button variant="outlined" onClick={onClose} disabled={saving}>
+              Abbrechen
+            </Button>
+            <Button variant="contained" onClick={this.handleSubmit} disabled={saving || !currentOrder} startIcon={<LocalShippingIcon />}>
+              {saving ? 'Wird erstellt…' : 'Lieferschein anlegen'}
+            </Button>
+          </Box>
+        </Box>
+      </AppDialog>
+    );
+  }
+}
+
+// MARK: <ShipmentList/>
+export class ShipmentList extends PureComponent {
+  constructor(props) {
+    super(props);
+    const s = orderAutomat.state;
+    this.state = {
+      status: s.status === 'ready' ? 'ready' : 'loading',
+      error: s.error ? backendErrorFrom(s.error) : null,
+      items: s.items ?? [],
+      filter: '',
+      partiesById: {},
+      selectedShipmentId: null,
+      addPackageDialogOpen: false,
+      newShipmentModalOpen: false,
+      busyAction: false,
+    };
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleSelectShipment = this.handleSelectShipment.bind(this);
+    this.handleDeleteShipment = this.handleDeleteShipment.bind(this);
+    this.handleDeletePackage = this.handleDeletePackage.bind(this);
+    this.handleMarkPackageShipped = this.handleMarkPackageShipped.bind(this);
+  }
+
+  componentDidMount() {
+    this._cancelled = false;
+    this.unsub = orderAutomat.subscribe(this, (state) => {
+      const items = state.items ?? [];
+      this.setState((prev) => {
+        // If current selectedShipmentId is no longer found, pick first
+        const allShipments = this.extractAllShipments(items);
+        let selectedShipmentId = prev.selectedShipmentId;
+        if (!selectedShipmentId && allShipments.length > 0) {
+          selectedShipmentId = allShipments[0].id;
+        } else if (selectedShipmentId && !allShipments.some((s) => s.id === selectedShipmentId)) {
+          selectedShipmentId = allShipments[0]?.id || null;
+        }
+        return {
+          items,
+          status: state.status,
+          error: state.error ? backendErrorFrom(state.error) : null,
+          selectedShipmentId,
+        };
+      });
+    });
+
+    if (orderAutomat.state.status === 'idle') {
+      void orderAutomat.actions.load().catch(() => {});
+    }
+    void this.loadPartiesData();
+  }
+
+  componentWillUnmount() {
+    this._cancelled = true;
+    this.unsub?.();
+  }
+
+  async loadPartiesData() {
+    try {
+      const parties = await loadParties('order');
+      if (!this._cancelled) {
+        this.setState({ partiesById: cfg.partiesByIdFromList(parties) });
+      }
+    } catch {
+      // Non-fatal
+    }
+  }
+
+  extractAllShipments(orders = this.state.items) {
+    const list = [];
+    for (const order of orders) {
+      if (!order || !Array.isArray(order.shipments)) continue;
+      for (const sh of order.shipments) {
+        list.push({
+          ...sh,
+          parentOrderId: order.id,
+          parentOrderNumber: order.number,
+          parentOrderDate: order.date,
+          entityId: order.entityId,
+          parentOrder: order,
+        });
+      }
+    }
+    // Sort descending by date / id
+    return list.sort((a, b) => {
+      const cmp = String(b.date || '').localeCompare(String(a.date || ''));
+      if (cmp !== 0) return cmp;
+      return Number(b.id || 0) - Number(a.id || 0);
+    });
+  }
+
+  handleRetry() {
+    void orderAutomat.actions.load().catch(() => {});
+  }
+
+  handleSelectShipment(shipment) {
+    this.setState({ selectedShipmentId: shipment.id });
+  }
+
+  async handleDeleteShipment(sh) {
+    if (!window.confirm(`Lieferschein „${sh.number}“ wirklich löschen?`)) return;
+    this.setState({ busyAction: true });
+    try {
+      await shipmentApi.delete(sh.id);
+      enqueueSnackbar(`Lieferschein ${sh.number} gelöscht.`, { variant: 'success' });
+      await orderAutomat.actions.reload();
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busyAction: false });
+    }
+  }
+
+  async handleDeletePackage(pkg) {
+    if (!window.confirm(`Paket „#${pkg.number || pkg.id}“ wirklich löschen?`)) return;
+    this.setState({ busyAction: true });
+    try {
+      await shippingApi.delete(pkg.id);
+      enqueueSnackbar('Paket gelöscht.', { variant: 'success' });
+      await orderAutomat.actions.reload();
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busyAction: false });
+    }
+  }
+
+  async handleMarkPackageShipped(pkg) {
+    this.setState({ busyAction: true });
+    try {
+      await shippingApi.update(pkg.id, { state: 'shipped' });
+      enqueueSnackbar('Paket als versendet markiert (Lagerbestand abgebucht).', { variant: 'success' });
+      await orderAutomat.actions.reload();
+    } catch (err) {
+      notifyError(err);
+    } finally {
+      this.setState({ busyAction: false });
+    }
+  }
+
+  getFilteredShipments() {
+    const all = this.extractAllShipments();
+    const q = this.state.filter.trim().toLowerCase();
+    if (!q) return all;
+
+    const { partiesById } = this.state;
+    return all.filter((sh) => {
+      const party = partiesById[sh.entityId];
+      const partyName = partyDisplayName('order', party);
+      const trackingCodes = (sh.shippings || []).map((p) => p.trackingCode).filter(Boolean);
+      const carriers = (sh.shippings || []).map((p) => p.carrier).filter(Boolean);
+
+      return [sh.number, sh.parentOrderNumber, sh.externalNumber, partyName, ...trackingCodes, ...carriers]
+        .some((val) => String(val || '').toLowerCase().includes(q));
+    });
+  }
+
+  render() {
+    const { status, error, filter, partiesById, selectedShipmentId, addPackageDialogOpen, newShipmentModalOpen, busyAction, items } = this.state;
+
+    if (status === 'loading' || status === 'idle') {
+      return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (status === 'failed') {
+      return <BackendError error={error} onRetry={this.handleRetry} />;
+    }
+
+    const filteredShipments = this.getFilteredShipments();
+    const selectedShipment = filteredShipments.find((s) => s.id === selectedShipmentId)
+      || this.extractAllShipments().find((s) => s.id === selectedShipmentId)
+      || filteredShipments[0]
+      || null;
+
+    const shPackages = Array.isArray(selectedShipment?.shippings) ? selectedShipment.shippings : [];
+    const shLines = Array.isArray(selectedShipment?.lines) ? selectedShipment.lines : [];
+    const hasShippedPackages = shPackages.some((p) => p.state === 'shipped');
+
+    return (
+      <>
+        {/* Top Filter and Action Bar */}
+        <PanelTileGrid>
+          <Box
+            sx={{
+              gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1.5,
+              pb: 2,
+            }}
+          >
+            <SingleLineTextEdit
+              sx={{ flex: 1 }}
+              size="small"
+              search
+              clear
+              placeholder="Lieferschein, Auftrag, Tracking-Code oder Carrier suchen…"
+              value={filter}
+              onChange={(next) => this.setState({ filter: next })}
+            />
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => this.setState({ newShipmentModalOpen: true })}
+            >
+              Neuer Lieferschein
+            </Button>
+          </Box>
+        </PanelTileGrid>
+
+        {/* Master-Detail Split Grid */}
+        <PanelTileGrid>
+          {/* Left: Shipment Manifests List */}
+          <PanelTile wide={1.4} minHeight={480} color={GREEN_PANEL} sx={{ p: 0, display: 'flex', flexDirection: 'column' }}>
+            <Box sx={{ p: 1.5, borderBottom: '1px solid', borderColor: 'divider', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Typography variant="subtitle2" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                Lieferscheine (Shipments)
+              </Typography>
+              <Chip size="small" label={`${filteredShipments.length} Einträge`} sx={{ fontWeight: 600, height: 20 }} />
+            </Box>
+
+            <Box sx={{ flex: 1, overflowY: 'auto', maxHeight: 600 }}>
+              {filteredShipments.length === 0 ? (
+                <Box sx={{ p: 4, textAlign: 'center' }}>
+                  <Typography variant="body2" color="text.secondary">
+                    Keine Lieferscheine gefunden.
+                  </Typography>
+                </Box>
+              ) : (
+                filteredShipments.map((sh) => {
+                  const isSelected = selectedShipment?.id === sh.id;
+                  const party = partiesById[sh.entityId];
+                  const partyName = partyDisplayName('order', party) || `Kunde #${sh.entityId}`;
+                  const pkgCount = Array.isArray(sh.shippings) ? sh.shippings.length : 0;
+                  const lineCount = Array.isArray(sh.lines) ? sh.lines.length : 0;
+                  const allShipped = pkgCount > 0 && sh.shippings.every((p) => p.state === 'shipped');
+
+                  return (
+                    <ListItemButton
+                      key={sh.id}
+                      divider
+                      selected={isSelected}
+                      onClick={() => this.handleSelectShipment(sh)}
+                      sx={{
+                        py: 1.25,
+                        px: 1.75,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                        gap: 0.5,
+                        bgcolor: isSelected ? 'action.selected' : 'inherit',
+                      }}
+                    >
+                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Typography variant="body1" sx={{ fontWeight: 700, ...ellipsisSx }}>
+                          {sh.number}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {sh.date ? formatDate(sh.date) : '–'}
+                        </Typography>
+                      </Box>
+
+                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Typography variant="body2" color="text.secondary" sx={{ ...ellipsisSx, maxWidth: '65%' }}>
+                          Auftrag: <strong>{sh.parentOrderNumber}</strong> • {partyName}
+                        </Typography>
+                        <Box sx={{ display: 'flex', gap: 0.75 }}>
+                          <Chip size="small" label={`${lineCount} Pos.`} sx={{ height: 18, fontSize: '0.65rem' }} />
+                          <Chip
+                            size="small"
+                            color={allShipped ? 'success' : pkgCount > 0 ? 'primary' : 'default'}
+                            label={`${pkgCount} Paket${pkgCount === 1 ? '' : 'e'}`}
+                            sx={{ height: 18, fontSize: '0.65rem', fontWeight: 600 }}
+                          />
+                        </Box>
+                      </Box>
+                    </ListItemButton>
+                  );
+                })
+              )}
+            </Box>
+          </PanelTile>
+
+          {/* Right: Selected Shipment Detail & Shipping Packages */}
+          <PanelTile wide={1.6} minHeight={480} color={SURFACE_BASE} sx={{ p: 2.5 }}>
+            {selectedShipment ? (
+              <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 2.5 }}>
+                {/* Header */}
+                <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', pb: 1.5, borderBottom: '1px solid', borderColor: 'divider' }}>
+                  <Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                      <LocalShippingIcon color="primary" sx={{ fontSize: 28 }} />
+                      <Typography variant="h6" sx={{ fontWeight: 700 }}>
+                        {selectedShipment.number}
+                      </Typography>
+                      <Chip
+                        size="small"
+                        color={hasShippedPackages ? 'success' : 'default'}
+                        label={hasShippedPackages ? 'Im Versand' : 'Bereitstellung'}
+                        sx={{ fontWeight: 600 }}
+                      />
+                    </Box>
+                    <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                      Zugehöriger Auftrag: <strong>{selectedShipment.parentOrderNumber}</strong> • Datum: {selectedShipment.date ? formatDate(selectedShipment.date) : '–'}
+                      {selectedShipment.externalNumber ? ` • Ref: ${selectedShipment.externalNumber}` : ''}
+                    </Typography>
+                  </Box>
+
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Button
+                      size="small"
+                      variant="contained"
+                      startIcon={<AddIcon />}
+                      onClick={() => this.setState({ addPackageDialogOpen: true })}
+                      disabled={busyAction}
+                    >
+                      Paket hinzufügen
+                    </Button>
+                    {!hasShippedPackages && (
+                      <IconButton
+                        size="small"
+                        color="error"
+                        disabled={busyAction}
+                        onClick={() => this.handleDeleteShipment(selectedShipment)}
+                        aria-label={`Lieferschein ${selectedShipment.number} löschen`}
+                      >
+                        <DeleteOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    )}
+                  </Box>
+                </Box>
+
+                {/* Shipped Article Positions */}
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', display: 'block', mb: 1 }}>
+                    Positionen dieses Lieferscheins ({shLines.length})
+                  </Typography>
+                  <TableContainer sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1.5, bgcolor: WHITE }}>
+                    <Table size="small">
+                      <TableHead sx={{ bgcolor: SURFACE_RAISED }}>
+                        <TableRow>
+                          <TableCell sx={{ fontWeight: 600, py: 0.5 }}>SKU</TableCell>
+                          <TableCell sx={{ fontWeight: 600, py: 0.5 }}>Bezeichnung</TableCell>
+                          <TableCell align="right" sx={{ fontWeight: 600, py: 0.5 }}>Menge</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {shLines.map((line, idx) => (
+                          <TableRow key={line.id || idx}>
+                            <TableCell sx={{ py: 0.5, fontWeight: 500 }}>{line.sku}</TableCell>
+                            <TableCell sx={{ py: 0.5 }}>{line.name}</TableCell>
+                            <TableCell align="right" sx={{ py: 0.5, fontWeight: 700 }}>{line.amount}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+                </Box>
+
+                {/* Shipping Packages from 'shipping' Table */}
+                <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+                    <Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary' }}>
+                      Pakete aus der Versandtabelle (shipping) ({shPackages.length})
+                    </Typography>
+                  </Box>
+
+                  {shPackages.length === 0 ? (
+                    <Box sx={{ p: 3, textAlign: 'center', bgcolor: WHITE, borderRadius: 1.5, border: '1px dashed', borderColor: 'divider' }}>
+                      <Inventory2Icon sx={{ color: 'text.secondary', fontSize: 32, mb: 1 }} />
+                      <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
+                        Keine Pakete (Shippings) erfasst.
+                      </Typography>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        startIcon={<AddIcon />}
+                        onClick={() => this.setState({ addPackageDialogOpen: true })}
+                      >
+                        Paket anlegen
+                      </Button>
+                    </Box>
+                  ) : (
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25 }}>
+                      {shPackages.map((pkg) => {
+                        const isShipped = pkg.state === 'shipped';
+                        return (
+                          <Box
+                            key={pkg.id}
+                            sx={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
+                              p: 1.5,
+                              bgcolor: WHITE,
+                              borderRadius: 1.5,
+                              border: '1px solid',
+                              borderColor: 'divider',
+                              boxShadow: 1,
+                            }}
+                          >
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                              <Chip size="small" label={`#${pkg.number || pkg.id}`} sx={{ fontWeight: 700 }} />
+                              <Box>
+                                <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+                                  {pkg.carrier || 'DHL'} ({pkg.type === 'pallet' ? 'Palette' : 'Paket'})
+                                </Typography>
+                                {pkg.trackingCode ? (
+                                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.25 }}>
+                                    <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'primary.main' }}>
+                                      {pkg.trackingCode}
+                                    </Typography>
+                                    <IconButton
+                                      size="small"
+                                      onClick={() => {
+                                        navigator.clipboard.writeText(pkg.trackingCode);
+                                        enqueueSnackbar('Tracking-Code kopiert!', { variant: 'info' });
+                                      }}
+                                      sx={{ p: 0.25 }}
+                                    >
+                                      <ContentCopyIcon sx={{ fontSize: 13 }} />
+                                    </IconButton>
+                                  </Box>
+                                ) : (
+                                  <Typography variant="caption" color="text.secondary">
+                                    Ohne Tracking
+                                  </Typography>
+                                )}
+                              </Box>
+                            </Box>
+
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                              {isShipped ? (
+                                <Chip
+                                  size="small"
+                                  color="success"
+                                  icon={<CheckCircleOutlineOutlinedIcon />}
+                                  label="Versendet (Lager abgebucht)"
+                                  sx={{ fontWeight: 600 }}
+                                />
+                              ) : (
+                                <>
+                                  <Chip size="small" variant="outlined" label={pkg.state} />
+                                  <Button
+                                    size="small"
+                                    variant="contained"
+                                    color="success"
+                                    disabled={busyAction}
+                                    onClick={() => this.handleMarkPackageShipped(pkg)}
+                                    sx={{ textTransform: 'none', py: 0.25, px: 1, height: 26 }}
+                                  >
+                                    Als versendet buchen
+                                  </Button>
+                                  <IconButton
+                                    size="small"
+                                    color="error"
+                                    disabled={busyAction}
+                                    onClick={() => this.handleDeletePackage(pkg)}
+                                  >
+                                    <DeleteOutlinedIcon fontSize="small" />
+                                  </IconButton>
+                                </>
+                              )}
+                            </Box>
+                          </Box>
+                        );
+                      })}
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+            ) : (
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 240 }}>
+                <Typography variant="body1" color="text.secondary">
+                  Wählen Sie einen Lieferschein aus der linken Liste aus.
+                </Typography>
+              </Box>
+            )}
+          </PanelTile>
+        </PanelTileGrid>
+
+        {addPackageDialogOpen && selectedShipment && (
+          <AddPackageDialog
+            open={addPackageDialogOpen}
+            shipment={selectedShipment}
+            onClose={() => this.setState({ addPackageDialogOpen: false })}
+          />
+        )}
+
+        {newShipmentModalOpen && (
+          <NewShipmentModal
+            open={newShipmentModalOpen}
+            orders={items}
+            partiesById={partiesById}
+            onClose={() => this.setState({ newShipmentModalOpen: false })}
+            onSuccess={(newId) => {
+              if (newId) this.setState({ selectedShipmentId: newId });
+            }}
+          />
+        )}
+      </>
+    );
+  }
+}
+
+export default withNavigate(ShipmentList);

src/components/manifest/index.js

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

src/components/settings/McpAuthorizationsPanel.jsx

@@ -0,0 +1,312 @@
+import { Component } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SecurityIcon from '@mui/icons-material/Security';
+import ComputerIcon from '@mui/icons-material/Computer';
+import KeyIcon from '@mui/icons-material/Key';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined';
+import { enqueueSnackbar } from 'notistack';
+import { mcp } from '../../api';
+import { notifyError } from '../../utils/notify';
+import { SURFACE_BASE, SURFACE_RAISED, BORDER, DARK_2 } from '../../colors';
+
+export default class McpAuthorizationsPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: 'loading',
+      authorizations: [],
+      error: null,
+      confirmTarget: null,
+      revoking: false,
+    };
+
+    this.loadAuthorizations = this.loadAuthorizations.bind(this);
+    this.handleRevokeClick = this.handleRevokeClick.bind(this);
+    this.handleConfirmRevoke = this.handleConfirmRevoke.bind(this);
+    this.handleCloseConfirm = this.handleCloseConfirm.bind(this);
+  }
+
+  componentDidMount() {
+    void this.loadAuthorizations();
+  }
+
+  // #region loadAuthorizations
+  // MARK: calls GET /api/mcp/authorizations from ./api
+  async loadAuthorizations() {
+    this.setState({ status: 'loading', error: null });
+    try {
+      const res = await mcp.listAuthorizations();
+      this.setState({
+        authorizations: res?.authorizations || [],
+        status: 'ready',
+      });
+    } catch (err) {
+      this.setState({
+        status: 'error',
+        error: err?.message || 'Fehler beim Laden der MCP-Autorisierungen',
+      });
+      notifyError(err);
+    }
+  }
+  // #endregion
+
+  handleRevokeClick(client) {
+    this.setState({ confirmTarget: client });
+  }
+
+  handleCloseConfirm() {
+    if (this.state.revoking) return;
+    this.setState({ confirmTarget: null });
+  }
+
+  // #region handleConfirmRevoke
+  // MARK: calls DELETE /api/mcp/authorizations/:clientId from ./api
+  async handleConfirmRevoke() {
+    const { confirmTarget } = this.state;
+    if (!confirmTarget) return;
+
+    this.setState({ revoking: true });
+    try {
+      await mcp.revokeAuthorization(confirmTarget.clientId);
+      enqueueSnackbar(`Autorisierung für "${confirmTarget.clientName}" erfolgreich widerrufen.`, {
+        variant: 'success',
+      });
+      this.setState({ confirmTarget: null, revoking: false });
+      await this.loadAuthorizations();
+    } catch (err) {
+      this.setState({ revoking: false });
+      notifyError(err);
+    }
+  }
+  // #endregion
+
+  render() {
+    const { status, authorizations, error, confirmTarget, revoking } = this.state;
+
+    return (
+      <Box sx={{ maxWidth: 860 }}>
+        {/* Header */}
+        <Stack direction="row" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 2.5 }}>
+          <Box>
+            <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 0.5 }}>
+              <SecurityIcon sx={{ color: 'primary.main', fontSize: 24 }} />
+              <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                MCP-Autorisierungen & Sicherheit
+              </Typography>
+            </Stack>
+            <Typography variant="body2" sx={{ color: DARK_2 }}>
+              Verwalten Sie externe MCP-Clients (z. B. Visual Studio Code, Cursor), die Zugriff auf Dashback Tools haben.
+            </Typography>
+          </Box>
+          <IconButton
+            size="small"
+            onClick={this.loadAuthorizations}
+            disabled={status === 'loading'}
+            aria-label="Aktualisieren"
+          >
+            <RefreshIcon fontSize="small" />
+          </IconButton>
+        </Stack>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }} action={
+            <Button color="inherit" size="small" onClick={this.loadAuthorizations}>
+              Wiederholen
+            </Button>
+          }>
+            {error}
+          </Alert>
+        )}
+
+        {status === 'loading' && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+            <CircularProgress size={36} />
+          </Box>
+        )}
+
+        {status === 'ready' && authorizations.length === 0 && (
+          <Card
+            variant="outlined"
+            sx={{
+              p: 4,
+              textAlign: 'center',
+              bgcolor: SURFACE_BASE,
+              borderColor: BORDER,
+              borderRadius: 2,
+            }}
+          >
+            <ComputerIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 1, opacity: 0.6 }} />
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
+              Keine aktiven MCP-Clients
+            </Typography>
+            <Typography variant="body2" sx={{ color: 'text.secondary', maxWidth: 440, mx: 'auto' }}>
+              Derzeit sind keine externen Anwendungen autorisiert. Wenn Sie einen MCP-Client wie VS Code mit Dash verbinden, wird er hier aufgeführt.
+            </Typography>
+          </Card>
+        )}
+
+        {status === 'ready' && authorizations.length > 0 && (
+          <Stack spacing={2}>
+            {authorizations.map((auth) => {
+              const authorizedDate = auth.authorizedAt
+                ? new Date(auth.authorizedAt).toLocaleString('de-DE', {
+                  day: '2-digit',
+                  month: '2-digit',
+                  year: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })
+                : '–';
+
+              return (
+                <Card
+                  key={auth.clientId || auth.clientDbId}
+                  variant="outlined"
+                  sx={{
+                    borderRadius: 2,
+                    borderColor: BORDER,
+                    bgcolor: 'background.paper',
+                    transition: 'box-shadow 0.2s ease',
+                    '&:hover': {
+                      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
+                    },
+                  }}
+                >
+                  <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
+                    <Stack
+                      direction={{ xs: 'column', sm: 'row' }}
+                      alignItems={{ xs: 'flex-start', sm: 'center' }}
+                      justifyContent="space-between"
+                      spacing={2}
+                    >
+                      <Stack direction="row" spacing={2} alignItems="center">
+                        <Box
+                          sx={{
+                            width: 44,
+                            height: 44,
+                            borderRadius: '10px',
+                            bgcolor: SURFACE_RAISED,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: 'primary.main',
+                            flexShrink: 0,
+                          }}
+                        >
+                          <ComputerIcon />
+                        </Box>
+
+                        <Box>
+                          <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
+                            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                              {auth.clientName || 'Unbenannter Client'}
+                            </Typography>
+                            {auth.scope && (
+                              <Chip
+                                size="small"
+                                label={auth.scope}
+                                variant="outlined"
+                                sx={{
+                                  height: 20,
+                                  fontSize: '0.72rem',
+                                  borderColor: 'primary.light',
+                                  color: 'primary.main',
+                                }}
+                              />
+                            )}
+                          </Stack>
+                          <Typography
+                            variant="caption"
+                            sx={{
+                              color: 'text.secondary',
+                              fontFamily: 'monospace',
+                              display: 'block',
+                              mt: 0.25,
+                            }}
+                          >
+                            Client ID: {auth.clientId}
+                          </Typography>
+                          <Stack direction="row" spacing={2} sx={{ mt: 0.75 }}>
+                            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                              Autorisiert: <strong>{authorizedDate}</strong>
+                            </Typography>
+                            {auth.tokenCount != null && (
+                              <Stack direction="row" spacing={0.5} alignItems="center">
+                                <KeyIcon sx={{ fontSize: 13, color: 'text.secondary' }} />
+                                <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                                  Aktive Tokens: <strong>{auth.tokenCount}</strong>
+                                </Typography>
+                              </Stack>
+                            )}
+                          </Stack>
+                        </Box>
+                      </Stack>
+
+                      <Button
+                        variant="outlined"
+                        color="error"
+                        size="small"
+                        startIcon={<DeleteOutlineIcon />}
+                        onClick={() => this.handleRevokeClick(auth)}
+                        sx={{ flexShrink: 0, textTransform: 'none' }}
+                      >
+                        Widerrufen
+                      </Button>
+                    </Stack>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </Stack>
+        )}
+
+        {/* Confirmation Dialog */}
+        <Dialog
+          open={Boolean(confirmTarget)}
+          onClose={this.handleCloseConfirm}
+          maxWidth="xs"
+          fullWidth
+        >
+          <DialogTitle sx={{ fontWeight: 600 }}>
+            Autorisierung widerrufen?
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Möchten Sie den Zugriff für <strong>{confirmTarget?.clientName}</strong> wirklich widerrufen?
+              Alle bestehenden Sitzungen und Tokens für diesen MCP-Client werden sofort ungültig.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions sx={{ px: 3, pb: 2 }}>
+            <Button onClick={this.handleCloseConfirm} disabled={revoking}>
+              Abbrechen
+            </Button>
+            <Button
+              onClick={this.handleConfirmRevoke}
+              color="error"
+              variant="contained"
+              disabled={revoking}
+              startIcon={revoking ? <CircularProgress size={16} color="inherit" /> : <DeleteOutlineIcon />}
+            >
+              {revoking ? 'Widerrufe...' : 'Ja, widerrufen'}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Box>
+    );
+  }
+}

src/components/settings/SettingsDialog.jsx

@@ -19,6 +19,8 @@ import PrinterSettingsPanel from './PrinterSettingsPanel';
 import SettingsKeysPanel from './SettingsKeysPanel';
 import ImportExportSettingsPanel from './ImportExportSettingsPanel';
 import PosTerminalSettingsPanel from './PosTerminalSettingsPanel';
+import McpAuthorizationsPanel from './McpAuthorizationsPanel';
+import SecurityIcon from '@mui/icons-material/Security';
 import { SURFACE_BASE } from '../../colors';
 
 const TAB_KEYS = {
@@ -28,6 +30,7 @@ const TAB_KEYS = {
   printers: 'printers',
   importExport: 'importExport',
   posterminal: 'posterminal',
+  security: 'security',
 };
 
 const TABS = [
@@ -37,6 +40,7 @@ const TABS = [
   { id: TAB_KEYS.printers, label: 'Drucker', icon: <PrintOutlinedIcon />, Panel: PrinterSettingsPanel },
   { id: TAB_KEYS.importExport, label: 'Import/Export', icon: <ImportExportIcon />, Panel: ImportExportSettingsPanel },
   { id: TAB_KEYS.posterminal, label: 'POS Terminal', icon: <PointOfSaleIcon />, Panel: PosTerminalSettingsPanel },
+  { id: TAB_KEYS.security, label: 'Sicherheit & MCP', icon: <SecurityIcon />, Panel: McpAuthorizationsPanel },
 ];
 
 export default class SettingsDialog extends Component {

src/index.css

@@ -45,8 +45,13 @@ html {
 }
 
 /* While the assistant chat drawer is open on the right edge of the screen,
-   the reserved scrollbar-gutter strip must read as white to seamlessly
+   lock page scrolling so the background scrollbar is hidden and does not
-   continue the drawer surface. */
+   show behind or beside the drawer. */
+html.df-chat-open,
+html.df-chat-open body {
+  overflow: hidden !important;
+}
+
 html.df-chat-open,
 html.df-chat-open body,
 html.df-chat-open #root {

src/nav.js

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

src/routes/auftrag/ausliefern.jsx

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

src/routes/auftrag/zahlungen.jsx

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

src/routes/oauth/OAuthAuthorizePage.jsx

@@ -0,0 +1,437 @@
+import { Component } from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Alert from '@mui/material/Alert';
+import Divider from '@mui/material/Divider';
+import Avatar from '@mui/material/Avatar';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import ComputerIcon from '@mui/icons-material/Computer';
+import SecurityIcon from '@mui/icons-material/Security';
+import SyncAltIcon from '@mui/icons-material/SyncAlt';
+import ConstructionIcon from '@mui/icons-material/Construction';
+import { mcp } from '../../api';
+import authAutomat from '../../automats/authAutomat';
+import { notifyError } from '../../utils/notify';
+import quixposLogo from '../../assets/quixpos-logo.png';
+import {
+  MAIN_BACKGROUND,
+  SURFACE_BASE,
+  SURFACE_RAISED,
+  BORDER,
+  BORDER_STRONG,
+  DARK_2,
+  DARK_4,
+} from '../../colors';
+
+export default class OAuthAuthorizePage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      authStatus: authAutomat.state.status,
+      loading: true,
+      submitting: null, // 'allow' | 'deny' | null
+      consent: null,
+      error: null,
+    };
+
+    this.fetchConsent = this.fetchConsent.bind(this);
+    this.handleAllow = this.handleAllow.bind(this);
+    this.handleDeny = this.handleDeny.bind(this);
+    this.redirectToLogin = this.redirectToLogin.bind(this);
+  }
+
+  componentDidMount() {
+    document.title = 'Zugriffsanfrage autorisieren * Dash MCP';
+
+    this.unsubAuth = authAutomat.subscribe(this, (state) => {
+      const prevStatus = this.state.authStatus;
+      const nextStatus = state.status;
+      if (prevStatus !== nextStatus) {
+        this.setState({ authStatus: nextStatus });
+        if (nextStatus === 'authed') {
+          void this.fetchConsent();
+        } else if (nextStatus === 'anon') {
+          this.redirectToLogin();
+        }
+      }
+    });
+
+    if (this.state.authStatus === 'authed') {
+      void this.fetchConsent();
+    } else if (this.state.authStatus === 'anon') {
+      this.redirectToLogin();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsubAuth?.();
+  }
+
+  redirectToLogin() {
+    const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
+    window.location.replace(`/login?returnTo=${returnTo}`);
+  }
+
+  // #region fetchConsent
+  // MARK: calls GET /api/mcp/authorize from ./api
+  async fetchConsent() {
+    this.setState({ loading: true, error: null });
+    try {
+      const search = window.location.search;
+      const data = await mcp.getAuthorize(search);
+      this.setState({ consent: data, loading: false });
+    } catch (err) {
+      this.setState({
+        loading: false,
+        error: err?.message || 'Fehler beim Laden der Autorisierungsdetails',
+      });
+      notifyError(err);
+    }
+  }
+  // #endregion
+
+  // #region handleAllow
+  // MARK: calls POST /api/mcp/authorize (action: allow)
+  async handleAllow() {
+    const { consent, submitting } = this.state;
+    if (!consent || submitting) return;
+
+    const params = consent.params || {};
+    this.setState({ submitting: 'allow', error: null });
+
+    try {
+      const payload = {
+        client_id: params.clientId || consent.client?.clientId,
+        redirect_uri: params.redirectUri,
+        code_challenge: params.codeChallenge,
+        code_challenge_method: params.codeChallengeMethod,
+        state: params.state,
+        scope: params.scope || consent.client?.scope || 'mcp:tools',
+        action: 'allow',
+      };
+
+      const res = await mcp.postAuthorize(payload);
+      const redirectUrl = res?.redirectUrl || res?.data?.redirectUrl;
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      } else {
+        throw new Error('Keine Weiterleitungs-URL vom Server erhalten.');
+      }
+    } catch (err) {
+      this.setState({ submitting: null });
+      notifyError(err);
+    }
+  }
+  // #endregion
+
+  // #region handleDeny
+  // MARK: calls POST /api/mcp/authorize (action: deny)
+  async handleDeny() {
+    const { consent, submitting } = this.state;
+    if (!consent || submitting) return;
+
+    const params = consent.params || {};
+    this.setState({ submitting: 'deny', error: null });
+
+    try {
+      const payload = {
+        client_id: params.clientId || consent.client?.clientId,
+        redirect_uri: params.redirectUri,
+        state: params.state,
+        action: 'deny',
+      };
+
+      const res = await mcp.postAuthorize(payload);
+      const redirectUrl = res?.redirectUrl || res?.data?.redirectUrl;
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      } else {
+        throw new Error('Keine Weiterleitungs-URL vom Server erhalten.');
+      }
+    } catch (err) {
+      this.setState({ submitting: null });
+      notifyError(err);
+    }
+  }
+  // #endregion
+
+  render() {
+    const { authStatus, loading, submitting, consent, error } = this.state;
+
+    if (authStatus === 'loading' || (authStatus === 'authed' && loading)) {
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '100vh',
+            bgcolor: MAIN_BACKGROUND,
+            gap: 2,
+          }}
+        >
+          <CircularProgress size={44} />
+          <Typography variant="body2" sx={{ color: DARK_2 }}>
+            Autorisierungsanfrage wird geladen...
+          </Typography>
+        </Box>
+      );
+    }
+
+    const client = consent?.client || {};
+    const user = consent?.user || authAutomat.state.user || {};
+    const params = consent?.params || {};
+    const clientName = client.clientName || 'MCP-Anwendung';
+    const scope = params.scope || client.scope || 'mcp:tools';
+
+    return (
+      <Box
+        sx={{
+          minHeight: '100vh',
+          bgcolor: MAIN_BACKGROUND,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: 2,
+        }}
+      >
+        <Card
+          sx={{
+            maxWidth: 520,
+            width: '100%',
+            borderRadius: 3,
+            boxShadow: '0 12px 36px rgba(0, 0, 0, 0.12)',
+            overflow: 'hidden',
+            bgcolor: 'background.paper',
+          }}
+        >
+          {/* Top Brand Header */}
+          <Box
+            sx={{
+              py: 2.5,
+              px: 3,
+              bgcolor: SURFACE_BASE,
+              borderBottom: '1px solid',
+              borderColor: BORDER,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Stack direction="row" alignItems="center" spacing={1.5}>
+              <Box
+                component="img"
+                src={quixposLogo}
+                alt="QuixPOS"
+                sx={{ height: 28, objectFit: 'contain' }}
+              />
+              <Typography variant="subtitle2" sx={{ fontWeight: 700, letterSpacing: '0.04em' }}>
+                DASH MCP
+              </Typography>
+            </Stack>
+
+            <Chip
+              icon={<SecurityIcon sx={{ '&&': { fontSize: 16 } }} />}
+              label="OAuth 2.1"
+              size="small"
+              variant="outlined"
+              sx={{
+                fontSize: '0.75rem',
+                borderColor: BORDER_STRONG,
+                color: 'text.secondary',
+              }}
+            />
+          </Box>
+
+          <CardContent sx={{ p: 3.5 }}>
+            {error ? (
+              <Stack spacing={2.5}>
+                <Alert severity="error">
+                  {error}
+                </Alert>
+                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                  Die Autorisierungsanfrage ist ungültig oder abgelaufen. Bitte starten Sie die Anmeldung in Ihrem MCP-Client erneut.
+                </Typography>
+                <Button
+                  variant="outlined"
+                  onClick={() => window.location.reload()}
+                  sx={{ alignSelf: 'flex-start' }}
+                >
+                  Erneut versuchen
+                </Button>
+              </Stack>
+            ) : (
+              <Stack spacing={3}>
+                {/* Visual handshake illustration */}
+                <Stack direction="row" alignItems="center" justifyContent="center" spacing={2.5} sx={{ py: 1 }}>
+                  <Box
+                    sx={{
+                      width: 56,
+                      height: 56,
+                      borderRadius: '14px',
+                      bgcolor: SURFACE_RAISED,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: 'primary.main',
+                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+                    }}
+                  >
+                    <ComputerIcon sx={{ fontSize: 30 }} />
+                  </Box>
+
+                  <SyncAltIcon sx={{ color: DARK_2, fontSize: 24 }} />
+
+                  <Box
+                    sx={{
+                      width: 56,
+                      height: 56,
+                      borderRadius: '14px',
+                      bgcolor: 'primary.main',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: '#ffffff',
+                      boxShadow: '0 4px 12px rgba(15, 118, 110, 0.3)',
+                    }}
+                  >
+                    <ConstructionIcon sx={{ fontSize: 28 }} />
+                  </Box>
+                </Stack>
+
+                {/* Main Heading */}
+                <Box sx={{ textAlign: 'center' }}>
+                  <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5, color: DARK_4 }}>
+                    {clientName} autorisieren?
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: DARK_2 }}>
+                    Diese Anwendung möchte Zugriff auf Ihre QuixPOS / Dashback Tools erhalten.
+                  </Typography>
+                </Box>
+
+                <Divider />
+
+                {/* Account row */}
+                <Box
+                  sx={{
+                    p: 1.75,
+                    borderRadius: 2,
+                    bgcolor: SURFACE_BASE,
+                    border: '1px solid',
+                    borderColor: BORDER,
+                  }}
+                >
+                  <Stack direction="row" alignItems="center" spacing={1.5}>
+                    <Avatar
+                      sx={{
+                        width: 34,
+                        height: 34,
+                        bgcolor: 'primary.main',
+                        fontSize: '0.875rem',
+                        fontWeight: 600,
+                      }}
+                    >
+                      {(user.email || 'U')[0].toUpperCase()}
+                    </Avatar>
+                    <Box sx={{ minWidth: 0, flex: 1 }}>
+                      <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', lineHeight: 1.2 }}>
+                        Autorisieren als Benutzer
+                      </Typography>
+                      <Typography variant="body2" sx={{ fontWeight: 600, noWrap: true }}>
+                        {user.email || 'Unbekanntes Konto'}
+                      </Typography>
+                    </Box>
+                  </Stack>
+                </Box>
+
+                {/* Scope & Permissions row */}
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: '0.05em', display: 'block', mb: 1 }}>
+                    Angefordertes Zugriffsrecht
+                  </Typography>
+                  <Box
+                    sx={{
+                      p: 2,
+                      borderRadius: 2,
+                      bgcolor: SURFACE_BASE,
+                      border: '1px solid',
+                      borderColor: BORDER,
+                    }}
+                  >
+                    <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
+                      <Chip
+                        label={scope}
+                        size="small"
+                        sx={{
+                          fontWeight: 600,
+                          fontFamily: 'monospace',
+                          bgcolor: 'primary.light',
+                          color: 'primary.dark',
+                        }}
+                      />
+                      <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                        Dashback Tools API
+                      </Typography>
+                    </Stack>
+                    <Typography variant="body2" sx={{ color: DARK_2, fontSize: '0.85rem' }}>
+                      Ermöglicht dem MCP-Client das Ausführen von Werkzeugen und Abfragen (Artikel, Lager, Kunden, Aufträge) in Ihrem Namen.
+                    </Typography>
+                  </Box>
+                </Box>
+
+                <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center', display: 'block' }}>
+                  Sie können diese Autorisierung jederzeit in den Einstellungen unter <strong>Sicherheit & MCP</strong> widerrufen.
+                </Typography>
+
+                {/* Action buttons */}
+                <Stack direction="row" spacing={2} sx={{ pt: 1 }}>
+                  <Button
+                    variant="outlined"
+                    color="inherit"
+                    fullWidth
+                    size="large"
+                    disabled={submitting != null}
+                    startIcon={<CloseIcon />}
+                    onClick={this.handleDeny}
+                    sx={{
+                      borderRadius: 2,
+                      textTransform: 'none',
+                      borderColor: BORDER_STRONG,
+                    }}
+                  >
+                    {submitting === 'deny' ? 'Wird abgelehnt...' : 'Ablehnen'}
+                  </Button>
+
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    fullWidth
+                    size="large"
+                    disabled={submitting != null}
+                    startIcon={submitting === 'allow' ? <CircularProgress size={18} color="inherit" /> : <CheckIcon />}
+                    onClick={this.handleAllow}
+                    sx={{
+                      borderRadius: 2,
+                      textTransform: 'none',
+                      fontWeight: 600,
+                    }}
+                  >
+                    {submitting === 'allow' ? 'Autorisiere...' : 'Zulassen'}
+                  </Button>
+                </Stack>
+              </Stack>
+            )}
+          </CardContent>
+        </Card>
+      </Box>
+    );
+  }
+}

src/utils/categoryUtils.js

@@ -36,6 +36,7 @@ export function parseCategoryTreeResponse(data, companyRootCategoryId) {
     rootCategoryId,
     categories,
     languageId: data.languageId,
+    articleCount: typeof data.articleCount === 'number' ? data.articleCount : 0,
   };
 }
 

src/utils/companyForm.js

@@ -17,6 +17,7 @@ export function normalizeCompany(raw, overrides = {}) {
     id: raw.id,
     name: overrides.name !== undefined ? overrides.name : raw.name,
     iso639: overrides.iso639 !== undefined ? overrides.iso639 : raw.iso639,
+    languageId: overrides.languageId !== undefined ? overrides.languageId : raw.languageId,
     taxrate: overrides.taxrate !== undefined ? overrides.taxrate : raw.taxrate,
     reducedtaxrate: overrides.reducedtaxrate !== undefined ? overrides.reducedtaxrate : raw.reducedtaxrate,
     taxfreerate: overrides.taxfreerate !== undefined ? overrides.taxfreerate : raw.taxfreerate,