u

.agents/skills/backend/SKILL.md

@@ -7,7 +7,7 @@ description: >-
 
 # Dash API Routes Overview (All)
 
-Overview of all 207 API endpoints across all modules.
+Overview of all 209 API endpoints across all modules.
 
 ### Notation
 
@@ -17,46 +17,46 @@ Params: path values first, then `query:` and `body:` (`body?` = optional body).
 ### Reusable types
 
 - `T1` = `{ article: 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: T35[], suppliers: T12[] }`
+- `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[] }`
 - `T3` = `{ delivery: T4 }`
-- `T4` = `{ id: int, number: str, type: str, supplierId: int|null, date: str, lines: T20[], files: T9[], externalNumber?: str|null, createdAt?: str, ledger?: T40 }`
+- `T4` = `{ id: int, number: str, type: str, supplierId: int|null, date: str, lines: T21[], files: T9[], externalNumber?: str|null, createdAt?: str, ledger?: T41 }`
 - `T5` = `{ labeltemplate: T6 }`
-- `T6` = `{ id: int, name: str, width: num, height: num, dpi: int, type: str, content: T16, thumb?: str|null }`
+- `T6` = `{ id: int, name: str, width: num, height: num, dpi: int, type: str, content: T17, thumb?: str|null }`
 - `T7` = `{ order: T11 }`
 - `T8` = `{ quote: T11 }`
 - `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 }`
 - `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[] }`
-- `T11` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T20[], createdAt?: str }`
+- `T11` = `{ id: int, number: str, type: str, entityId: int|null, date: str, lines: T21[], createdAt?: str }`
 - `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 }`
 - `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 }`
 - `T14` = `{ ledger: T15[] }`
 - `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 }`
-- `T16` = `{ objects: T21[] }`
+- `T16` = `{ id: int, name: str, sort: int, exclusive: bool, values: T32[], articleCount?: int }`
 - `T17` = `{ objects: T22[] }`
-- `T18` = `{ printer: T23 }`
-- `T19` = `{ entity: T27 }`
-- `T20` = `{ id: int, sku: str|null, name: str|null, pu: num, amount: num, net: num, rebate: num, taxrate: num, comment: str|null }`
-- `T21` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
+- `T18` = `{ objects: T23[] }`
+- `T19` = `{ printer: T24 }`
+- `T20` = `{ entity: T27 }`
+- `T21` = `{ id: int, sku: str|null, name: str|null, pu: num, amount: num, net: num, rebate: num, taxrate: num, comment: str|null }`
 - `T22` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
-- `T23` = `{ id: int, company_id: int, address: str, type: str, sort: int, model?: str|null, serial?: str|null, desc?: str|null }`
-- `T24` = `{ id: int, name: str, sort: int, exclusive: bool, values: T38[] }`
+- `T23` = `{ id: str, type: str, x: num, y: num, w?: num, h?: num, text?: str, font?: str, fontSize?: num, barcodeFormat?: str }`
+- `T24` = `{ id: int, company_id: int, address: str, type: str, sort: int, model?: str|null, serial?: str|null, desc?: str|null }`
 - `T25` = `{ amount: num, net: num, taxrate: num, sku?: str|null, name?: str|null, pu?: num, rebate?: num, comment?: str|null }`
 - `T26` = `{ sort: int, fullHash: str, fullW: int, fullH: int, fullSize: int, thumbW: int, thumbH: int, thumbHash: str }`
 - `T27` = `{ id: int, customergroupId: int, firstName: str|null, name: str, number: str|null, createdAt: str, updatedAt: str }`
 - `T28` = `{ name: str, id?: int|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }`
 - `T29` = `{ id: int, companyuser_id: int, provider: str, model: str, created_at: str, updated_at: str, state: str }`
-- `T30` = `{ article: T33 }`
+- `T30` = `{ article: T35 }`
 - `T31` = `{ si: str, basesi: str, basesifactor: num, symbol?: str|null, name?: str|null }`
-- `T32` = `{ id: int, iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
-- `T33` = `{ id: int, categoryId: int, name: str, sku: str, track_stock: bool }`
-- `T34` = `{ id: int, email: str, selectedCompanyId: int|null, picture?: str }`
-- `T35` = `{ minmultiplier: num, net: num, taxRate: num, customergroupId: int }`
-- `T36` = `{ fullHash: str, thumbW: int, thumbH: int, thumbHash: str }`
-- `T37` = `{ id: int, entityId: int, contactType: str, contact: str }`
-- `T38` = `{ id: int, attributeId: int, value: str, sort: int }`
-- `T39` = `{ id: int, name: str, createdAt: str, updatedAt: str }`
-- `T40` = `{ totalPositions: int, completelyOnLedgerPositions: int }`
-- `T41` = `{ id: int, name: str, sort: int, exclusive: bool }`
+- `T32` = `{ id: int, attributeId: int, value: str, sort: int, articleCount?: int }`
+- `T33` = `{ id: int, name: str, sort: int, exclusive: bool, articleCount?: int }`
+- `T34` = `{ id: int, iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
+- `T35` = `{ id: int, categoryId: int, name: str, sku: str, track_stock: bool }`
+- `T36` = `{ id: int, email: str, selectedCompanyId: int|null, picture?: str }`
+- `T37` = `{ minmultiplier: num, net: num, taxRate: num, customergroupId: int }`
+- `T38` = `{ fullHash: str, thumbW: int, thumbH: int, thumbHash: str }`
+- `T39` = `{ id: int, entityId: int, contactType: str, contact: str }`
+- `T40` = `{ id: int, name: str, createdAt: str, updatedAt: str }`
+- `T41` = `{ totalPositions: int, completelyOnLedgerPositions: int }`
 - `T42` = `{ warehouse: T44 }`
 - `T43` = `{ net: num, taxId: int, taxRate?: num|null }`
 - `T44` = `{ id: int, name: str, sort: int }`
@@ -64,6 +64,9 @@ Params: path values first, then `query:` and `body:` (`body?` = optional body).
 
 ### Routes
 
+
+### Section: /account
+
 #### List accounts — `GET /account`
 _none_
 - Returns: `200 { accounts: { id: int, companyId: int, type: str, name: str }[] }`
@@ -73,6 +76,9 @@ _none_
 #### Delete account — `DELETE /account/{id}`
 - Params: `id: int`
 - Returns: `204 void`
+
+### Section: /article
+
 #### Create article in category — `POST /article`
 - Params: `body: { categoryId: int, name: str, desc?: str, seo?: str, track_stock?: bool }`
 - Returns: `201 T30`
@@ -114,7 +120,7 @@ _none_
 - Returns: `201 T30`
 #### 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: T33, children: { id: int, sku: str, name: str, parentsort: int, attributeValueId: int, attributeValue: str }[] }`
+- Returns: `200 { article: T35, 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 }`
@@ -178,21 +184,24 @@ _none_
 #### Set article weight by SKU — `PUT /article/{sku}/weight`
 - Params: `sku: str, body: { weight: num }`
 - Returns: `200 T1`
+
+### Section: /attributename
+
 #### List attribute names — `GET /attributename`
 _none_
-- Returns: `200 { attributenames: T24[] }`
+- Returns: `200 { attributenames: T16[] }`
 #### Create attribute name — `POST /attributename`
 - Params: `body: { name: str, sort?: int, exclusive?: bool }`
-- Returns: `201 { attributename: T24 }`
+- Returns: `201 { attributename: T16 }`
 #### 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: T38[] }`
+- Returns: `200 { values: T32[] }`
 #### Create value for an attribute — `POST /attributename/{attributeId}/value`
 - Params: `attributeId: int, body: { value: str, sort?: int }`
-- Returns: `201 { attributevalue: T38 }`
+- Returns: `201 { attributevalue: T32 }`
 #### Reorder values of an attribute — `PUT /attributename/{attributeId}/value/order`
 - Params: `attributeId: int, body: { attributevalueIds: int[] }`
 - Returns: `200 { ok: bool }`
@@ -201,31 +210,46 @@ _none_
 - Returns: `200 { ok: bool }`
 #### Update attribute name — `PATCH /attributename/{id}`
 - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }`
-- Returns: `200 { attributename: T24 }`
+- Returns: `200 { attributename: T16 }`
+
+### Section: /attributevalue
+
 #### Delete attribute value — `DELETE /attributevalue/{id}`
 - Params: `id: int`
 - Returns: `200 { ok: bool }`
 #### Update attribute value — `PATCH /attributevalue/{id}`
 - Params: `id: int, body: { value?: str, sort?: int }`
-- Returns: `200 { attributevalue: T38 }`
+- Returns: `200 { attributevalue: T32 }`
+#### 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[] } }`
+#### 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[] } }`
+
+### Section: /auth
+
 #### Login with Google ID token — `POST /auth/login`
 - Params: `body: { idToken: str }`
-- Returns: `200 { message: str, user: T34 }`
+- Returns: `200 { message: str, user: T36 }`
 #### Logout — `POST /auth/logout`
 _none_
 - Returns: `200 { message: str }`
 #### Current user — `GET /auth/me`
 _none_
-- Returns: `200 { user: T34, googleClientId: str }`
+- Returns: `200 { user: T36, googleClientId: str }`
 #### Set selected company — `PUT /auth/selected-company`
 - Params: `body: { companyId: int }`
-- Returns: `200 { user: T34 }`
+- Returns: `200 { user: T36 }`
+
+### Section: /brand
+
 #### List brands — `GET /brand`
 - Params: `query: offset?: int, limit?: int, includeSmallThumbs?: bool`
-- Returns: `200 { brands: { id: int, name: str, 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 }`
+- 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: T36[], gsprpinfo?: str|null } }`
+- Returns: `201 { brand: { id: int, name: str, pics: T38[], gsprpinfo?: str|null } }`
 #### Delete brand — `DELETE /brand/{id}`
 - Params: `id: int`
 - Returns: `204 void`
@@ -234,10 +258,13 @@ _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: T36[] } }`
+- Returns: `200 { brand: { id: int, thumbW: int|null, thumbH: int|null, thumbHash: str|null, pics: T38[] } }`
 #### 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: T36[] } }`
+- Returns: `201 { brand: { id: int, fullHash: str, thumbW: int, thumbH: int, thumbHash: str, pics: T38[] } }`
+
+### Section: /category
+
 #### Create category — `POST /category`
 - Params: `body: { parentId: int, name: str }`
 - Returns: `201 { category: { id: int, parentId: int|null, sort: int, name: str } }`
@@ -280,12 +307,15 @@ _none_
 #### Delete category property — `DELETE /category/{id}/property/{propertyId}`
 - Params: `id: int, propertyId: int`
 - Returns: `200 { ok: bool }`
+
+### Section: /company
+
 #### List companies — `GET /company`
 _none_
-- Returns: `200 { companies: T32[] }`
+- Returns: `200 { companies: T34[] }`
 #### Create company — `POST /company`
 - Params: `body: { iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
-- Returns: `201 { company: T32, user: T34 }`
+- Returns: `201 { company: T34, user: T36 }`
 #### Get company history — `GET /company/history`
 - Params: `query: limit?: int`
 - Returns: `200 { history: { id: int, date: str, text: str, companyuserId?: int|null }[], truncated: bool }`
@@ -309,7 +339,10 @@ _none_
 - Returns: `204 void`
 #### Update company — `PUT /company/{id}`
 - Params: `id: int, body: { iso639: str, name: str, taxrate: num, reducedtaxrate: num }`
-- Returns: `200 { company: T32 }`
+- Returns: `200 { company: T34 }`
+
+### Section: /customergroup
+
 #### List customer groups — `GET /customergroup`
 _none_
 - Returns: `200 { customergroups: { id: int, name: str, sort: int, editable: bool }[] }`
@@ -325,9 +358,12 @@ _none_
 #### Update customer group — `PATCH /customergroup/{id}`
 - Params: `id: int, body: { name: str }`
 - Returns: `200 { customergroup: T44 }`
+
+### 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?: T40 }[] }`
+- Returns: `200 { deliveries: { id: int, number: str, type: str, supplierId: int|null, date: str, externalNumber?: str|null, createdAt?: str, ledger?: T41 }[] }`
 #### 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 } }[] }`
 - Returns: `201 T3`
@@ -355,12 +391,15 @@ _none_
 #### Get delivery attachment file content — `GET /delivery/{id}/file/{fileId}`
 - Params: `id: int, fileId: int, query: download?: bool`
 - Returns: `200 str`
+
+### Section: /entity
+
 #### List entities — `GET /entity`
 - Params: `query: customergroupId?: int, role?: str`
 - Returns: `200 { entities: T27[] }`
 #### Create entity — `POST /entity`
 - Params: `body: { customergroupId: int, name: str, firstName?: str|null, number?: str }`
-- Returns: `201 T19`
+- Returns: `201 T20`
 #### Peek next customer number — `GET /entity/next-number`
 _none_
 - Returns: `200 { number: str }`
@@ -378,25 +417,28 @@ _none_
 - Returns: `200 { address: T13 }`
 #### List entity contacts — `GET /entity/{entityId}/contact`
 - Params: `entityId: int`
-- Returns: `200 { contacts: T37[] }`
+- Returns: `200 { contacts: T39[] }`
 #### Create entity contact — `POST /entity/{entityId}/contact`
 - Params: `entityId: int, body: { contactType: str, contact: str }`
-- Returns: `201 { contact: T37 }`
+- Returns: `201 { contact: T39 }`
 #### 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: T37 }`
+- Returns: `200 { contact: T39 }`
 #### Delete entity — `DELETE /entity/{id}`
 - Params: `id: int`
 - Returns: `204 void`
 #### Get entity — `GET /entity/{id}`
 - Params: `id: int`
-- Returns: `200 T19`
+- Returns: `200 T20`
 #### Update entity — `PATCH /entity/{id}`
 - Params: `id: int, body: { name?: str, firstName?: str|null, number?: str|null }`
-- Returns: `200 T19`
+- Returns: `200 T20`
+
+### Section: /events
+
 #### Subscribe to update signals (SSE) — `GET /events`
 _none_
 - Returns: `200 SSE`
@@ -416,17 +458,26 @@ _none_
   - `modelconversation`: `{}`
   - `modelconversation-<id>`: `{}`
   - `brand`: `{ sender, brandId }`
+
+### Section: /health
+
 #### Database health check — `GET /health`
 _none_
 - Returns: `200 { ok: bool }`
+
+### Section: /image
+
 #### Full image by hash — `GET /image/{fullHash}`
 - Params: `fullHash: str`
 - Returns: `200 avif`
+
+### Section: /labeltemplate
+
 #### List label templates — `GET /labeltemplate`
 _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: T17 }`
+- Params: `body: { name: str, width: num, height: num, dpi: int, type: str, content: T18 }`
 - Returns: `201 T5`
 #### Delete label template — `DELETE /labeltemplate/{id}`
 - Params: `id: int`
@@ -435,11 +486,14 @@ _none_
 - Params: `id: int`
 - Returns: `200 T5`
 #### Update label template (partial) — `PATCH /labeltemplate/{id}`
-- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T17 }`
+- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T18 }`
 - Returns: `200 T5`
 #### Update label template — `PUT /labeltemplate/{id}`
-- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T17 }`
+- Params: `id: int, body: { name?: str, width?: num, height?: num, dpi?: int, type?: str, content?: T18 }`
 - Returns: `200 T5`
+
+### 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`
@@ -452,6 +506,9 @@ _none_
 #### Query ledger by article SKU — `GET /ledger/sku/{sku}`
 - Params: `sku: str, query: transaction_type?: str`
 - Returns: `200 T14`
+
+### Section: /modelconversation
+
 #### List conversations — `GET /modelconversation`
 _none_
 - Returns: `200 { conversations: T29[] }`
@@ -473,12 +530,18 @@ _none_
 #### Stream conversation events (SSE) — `GET /modelconversation/{id}/stream`
 - Params: `id: int`
 - Returns: `200 SSE`
+
+### Section: /number
+
 #### List number sequences — `GET /number`
 _none_
 - Returns: `200 { numbers: { id: int, type: str, prefix: str, padding: int, next: int }[] }`
 #### Update number sequence — `PATCH /number/{id}`
 - Params: `id: int, body: { prefix?: str, padding?: int, next?: int }`
 - Returns: `200 { number: { id: int, type: str, prefix: str, padding: int, next: int } }`
+
+### Section: /order
+
 #### List orders — `GET /order`
 - Params: `query: offset?: int, limit?: int`
 - Returns: `200 { orders: T11[], total: int, offset: int, limit: int }`
@@ -506,12 +569,21 @@ _none_
 #### Create shipping for an order — `POST /order/{id}/shipping`
 - Params: `id: int, body: { type: str, state: str }`
 - Returns: `201 { shipping: { id: int, manifestId: int, number: str, type: str, state: str } }`
+
+### Section: /package
+
 #### Delete package — `DELETE /package/{id}`
 - Params: `id: int`
 - Returns: `204 void`
+
+### Section: /payment
+
 #### Delete payment — `DELETE /payment/{id}`
 - Params: `id: int`
 - Returns: `204 void`
+
+### Section: /posterminal
+
 #### List POS terminals — `GET /posterminal`
 _none_
 - Returns: `200 { posterminals: T10[] }`
@@ -536,12 +608,15 @@ _none_
 #### Enable category on terminal — `PUT /posterminal/{id}/category/{categoryId}`
 - Params: `id: int, categoryId: int`
 - Returns: `200 T45`
+
+### Section: /printer
+
 #### List printers — `GET /printer`
 _none_
-- Returns: `200 { printers: T23[] }`
+- Returns: `200 { printers: T24[] }`
 #### Create printer — `POST /printer`
 - Params: `body: { address: str, type: str, model?: str|null, serial?: str|null, sort?: int, desc?: str|null }`
-- Returns: `201 T18`
+- Returns: `201 T19`
 #### Reorder printers — `PUT /printer/order`
 - Params: `body: { printerIds: int[] }`
 - Returns: `200 { printerIds: int[] }`
@@ -550,19 +625,22 @@ _none_
 - Returns: `204 void`
 #### Get printer by ID — `GET /printer/{id}`
 - Params: `id: int`
-- Returns: `200 T18`
+- Returns: `200 T19`
 #### 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 T18`
+- Returns: `200 T19`
 #### 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 T18`
+- Returns: `200 T19`
+
+### Section: /propertyname
+
 #### List property names — `GET /propertyname`
 _none_
-- Returns: `200 { propertynames: T41[] }`
+- Returns: `200 { propertynames: T33[] }`
 #### Create property name — `POST /propertyname`
 - Params: `body: { name: str, sort?: int, exclusive?: bool }`
-- Returns: `201 { propertyname: T41 }`
+- Returns: `201 { propertyname: T33 }`
 #### Reorder property names — `PUT /propertyname/order`
 - Params: `body: { propertynameIds: int[] }`
 - Returns: `200 { ok: bool }`
@@ -571,7 +649,10 @@ _none_
 - Returns: `200 { ok: bool }`
 #### Update property name — `PATCH /propertyname/{id}`
 - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }`
-- Returns: `200 { propertyname: T41 }`
+- Returns: `200 { propertyname: T33 }`
+
+### Section: /public
+
 #### Receipt crash dump — `POST /public/telemetry/crash`
 - Params: `body: { content: any }`
 - Returns: `200 { ok: bool, filename: str }`
@@ -584,6 +665,9 @@ _none_
 #### List public categories — `GET /public/{companyId}/categories`
 - Params: `companyId: int`
 - Returns: `200 { categories: { id: int, parentId: int|null, sort: int, name: str, slug: str, fullHash: str|null, thumbW: int|null, thumbH: int|null, thumbHash: str|null }[] }`
+
+### Section: /quote
+
 #### List quotes — `GET /quote`
 _none_
 - Returns: `200 { quotes: { id: int, number: str, type: str, entityId: int|null, date: str, createdAt?: str }[] }`
@@ -599,6 +683,9 @@ _none_
 #### Update quote — `PATCH /quote/{id}`
 - Params: `id: int, body: { number?: str, date?: str, entityId?: int|null, lines?: T25[] }`
 - Returns: `200 T8`
+
+### Section: /serper
+
 #### Crawl image from URL, crop white/transparency borders, and return AVIF — `POST /serper/image`
 - Params: `body: { url: str }`
 - Returns: `200 avif`
@@ -611,6 +698,9 @@ _none_
   - `thumb`: `{ "id": 0, "dataUrl": "data:image/webp;base64,…" }`
   - `done`: `{ "total": 100 }`
   - `error`: `{ "error": "…" }`
+
+### Section: /shipping
+
 #### Delete shipping — `DELETE /shipping/{id}`
 - Params: `id: int`
 - Returns: `204 void`
@@ -620,33 +710,48 @@ _none_
 #### Create package for a shipping — `POST /shipping/{id}/package`
 - Params: `id: int, body: { entityaddressId: int, type: str, state: str, details?: str }`
 - Returns: `201 { package: { id: int, shippingId: int, entityaddressId: int, number: str, type: str, state: str, details?: str|null } }`
+
+### Section: /smallthumb
+
 #### Small thumb image by hash — `GET /smallthumb/{fullHash}`
 - Params: `fullHash: str`
 - Returns: `200 avif`
+
+### Section: /stock
+
 #### 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[] }`
+
+### Section: /supplier
+
 #### List suppliers — `GET /supplier`
 _none_
-- Returns: `200 { suppliers: T39[] }`
+- Returns: `200 { suppliers: T40[] }`
 #### Create supplier — `POST /supplier`
 - Params: `body: { name: str }`
-- Returns: `201 { supplier: T39 }`
+- Returns: `201 { supplier: T40 }`
 #### 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: T39 }`
+- Returns: `200 { supplier: T40 }`
 #### 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 }[] }`
 #### 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 }[] }`
+
+### Section: /thumb
+
 #### Thumb image by hash — `GET /thumb/{fullHash}`
 - Params: `fullHash: str`
 - Returns: `200 avif`
+
+### Section: /unit
+
 #### Delete unit — `DELETE /unit`
 - Params: `query: si: str`
 - Returns: `204 void`
@@ -656,6 +761,9 @@ _none_
 #### Upsert unit — `PUT /unit`
 - Params: `body: { si: str, basesi: str, basesifactor: num, symbol: str, name: str }`
 - Returns: `200 { unit: T31 }`
+
+### Section: /v1
+
 #### JTL-POS category synchronization — `GET /v1/category`
 - Params: `query: lastChangedCategory?: str, limit?: int`
 - Returns: `200 {}[]`
@@ -671,6 +779,9 @@ _none_
 #### JTL-POS product catalog synchronization — `GET /v1/product`
 - Params: `query: lastChangedProduct?: str, limit?: int`
 - Returns: `200 {}[]`
+
+### Section: /vfs
+
 #### List virtual filesystem files — `GET /vfs`
 _none_
 - Returns: `200 { files: { name: str, size: int, mime: str, updated_at: str, created_at: str, isText: bool, isImage: bool, isPdf: bool }[] }`
@@ -691,10 +802,13 @@ _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: any|null, stdout: str, consoleLines: int, durationMs: int, truncated?: bool, truncationNote?: str }`
+- 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 }`
 #### 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 } }`
+
+### Section: /warehouse
+
 #### List warehouses — `GET /warehouse`
 _none_
 - Returns: `200 { warehouses: T44[] }`

.agents/skills/coding-style/SKILL.md

@@ -8,4 +8,13 @@ class componets disconnected from state, in automat.
 
 Reference:
 Component: src/routes/artikel/marken.jsx
-it's Automat: src/automats/brandAutomat.js
+it's Automat: src/automats/brandAutomat.js
+
+
+
+use vs code region markers in code files
+use:
+// MARK: calls startApi from ./api/index.js
+atop important functions
+
+don't use tooltips

src/automats/entityAutomat.js

@@ -1,42 +1,212 @@
 /**
  * @file entityAutomat.js
  * @description Manages cached customer and contact entities (`GET /api/entity`)
- * for the active company. Built via `createListAutomat`.
+ * for the active company. Follows the brand/warehouse/customergroup automat pattern
+ * with filtering, deduplicated loads, silent reloads, and CRUD actions.
  *
  * Upstream Triggers:
- * - `authAutomat`: Via `createListAutomat` — triggers `load()` on `'authed'` with
- *   a `selectedCompanyId`, and `reset()` on `'anon'`.
- * - UI / Routes: Manual calls to `load()` or `reload()`.
+ * - `authAutomat`: Triggers `actions.load()` on `'authed'` with a `selectedCompanyId`,
+ *   and `actions.reset()` on `'anon'`.
+ * - UI / Routes: Mutating actions (`create`, `update`, `remove`, `filter`).
  */
 
+import { Automat } from 'react-automat';
 import { entity as entityApi } from '../api';
-import { createListAutomat } from './createListAutomat';
+import { requireArray, requireDefined, requireObject } from '../utils/apiShape';
+import authAutomat from './authAutomat';
+import customergroupAutomat from './customergroupAutomat';
 
 /**
  * @typedef {Object} Entity
  * @property {string|number} id Entity id.
  * @property {string|number} customergroupId Owning customer group id.
- * @property {string|null} firstName First name.
+ * @property {string} [number] Customer number.
+ * @property {string|null} [firstName] First name.
  * @property {string} name Last / company name.
+ * @property {string} [createdAt] Created timestamp.
+ * @property {string} [updatedAt] Updated timestamp.
  */
 
+/**
+ * @typedef {Object} EntityState
+ * @property {Array<Entity>} items Loaded records.
+ * @property {Array<Entity>} filteredItems Records matching active search filter.
+ * @property {string} filter Active search/filter string.
+ * @property {'idle'|'loading'|'ready'|'failed'} status Load lifecycle state.
+ * @property {Error|string|null} error Last load error.
+ */
+
+/** @type {EntityState} */
+const initialState = {
+  items: [],
+  filteredItems: [],
+  filter: '',
+  status: 'idle',
+  error: null,
+};
+
+const applyFilter = (entities, filter) => {
+  const query = String(filter ?? '').trim().toLowerCase();
+  if (!query) return entities;
+  const groups = customergroupAutomat?.state?.items ?? [];
+  const groupsById = Object.fromEntries(groups.map((g) => [g.id, g]));
+
+  return entities.filter((e) => {
+    const name = String(e.name ?? '').toLowerCase();
+    const firstName = String(e.firstName ?? '').toLowerCase();
+    const number = String(e.number ?? '').toLowerCase();
+    const full1 = `${firstName} ${name}`.trim();
+    const full2 = `${name} ${firstName}`.trim();
+    const group = String(groupsById[e.customergroupId]?.name ?? '').toLowerCase();
+    return (
+      name.includes(query) ||
+      firstName.includes(query) ||
+      number.includes(query) ||
+      full1.includes(query) ||
+      full2.includes(query) ||
+      group.includes(query)
+    );
+  });
+};
+
+const sortEntities = (items) =>
+  [...items].sort((a, b) => {
+    const byName = String(a.name ?? '').localeCompare(String(b.name ?? ''), 'de');
+    if (byName !== 0) return byName;
+    return String(a.firstName ?? '').localeCompare(String(b.firstName ?? ''), 'de');
+  });
+
+let entityAutomat;
+
+const updateStateWithEntities = (entities, extra = {}) => {
+  const list = sortEntities(Array.isArray(entities) ? entities : []);
+  const filteredItems = applyFilter(list, entityAutomat.state.filter);
+  entityAutomat.setState({ items: list, filteredItems, ...extra });
+  return list;
+};
+
+async function fetchEntities() {
+  const data = await entityApi.list();
+  requireObject(data, 'GET /api/entity');
+  return requireArray(data.entities, 'entities');
+}
+
+let inflightLoad = null;
+
+function loadEntities() {
+  if (inflightLoad) return inflightLoad;
+  inflightLoad = (async () => {
+    entityAutomat.setState({ status: 'loading', error: null });
+    try {
+      const entities = await fetchEntities();
+      updateStateWithEntities(entities, { status: 'ready', error: null });
+      return entities;
+    } catch (error) {
+      entityAutomat.setState({ status: 'failed', error });
+      throw error;
+    } finally {
+      inflightLoad = null;
+    }
+  })();
+  return inflightLoad;
+}
+
+const actions = {
+  /** Sets the active search filter query and updates filteredItems. */
+  filter(query) {
+    const filter = String(query ?? '');
+    entityAutomat.setState({
+      filter,
+      filteredItems: applyFilter(entityAutomat.state.items, filter),
+    });
+  },
+
+  /** Loads the list, deduplicating concurrent callers. */
+  load() {
+    return loadEntities();
+  },
+
+  /** Silently refreshes the entities without flashing loading state. */
+  async reload() {
+    try {
+      const entities = await fetchEntities();
+      updateStateWithEntities(entities, { status: 'ready', error: null });
+      return entities;
+    } catch (error) {
+      entityAutomat.setState({ error });
+      throw error;
+    }
+  },
+
+  /** Replaces the cached list without an API call. */
+  replace(items) {
+    return updateStateWithEntities(items, { status: 'ready', error: null });
+  },
+
+  /** Returns cached items if ready, otherwise loads. */
+  ensureLoaded() {
+    if (entityAutomat.state.status === 'ready') {
+      return Promise.resolve(entityAutomat.state.items);
+    }
+    return actions.load();
+  },
+
+  /** Resets state to initial idle values. */
+  reset() {
+    inflightLoad = null;
+    entityAutomat.setState(initialState);
+  },
+
+  /** Creates a customer entity and refreshes the cache. */
+  async create(body) {
+    const data = await entityApi.create(body);
+    requireObject(data, 'POST /api/entity');
+    requireObject(data.entity, 'entity');
+    requireDefined(data.entity.id, 'entity.id');
+    await entityAutomat.actions.reload();
+    return data.entity;
+  },
+
+  /** Updates an entity name/fields and refreshes the cache. */
+  async update(id, body) {
+    const data = await entityApi.update(id, body);
+    requireObject(data, 'PATCH /api/entity/:id');
+    requireObject(data.entity, 'entity');
+    requireDefined(data.entity.id, 'entity.id');
+    await entityAutomat.actions.reload();
+    return data.entity;
+  },
+
+  rename(id, body) {
+    return actions.update(id, body);
+  },
+
+  /** Deletes an entity and refreshes the cache. */
+  async remove(id) {
+    await entityApi.delete(id);
+    await entityAutomat.actions.reload();
+  },
+};
+
 /**
  * Company customers and contacts (`GET /api/entity`).
  *
- * @type {import('react-automat').Automat<import('./createListAutomat').ListAutomatState>}
+ * @type {Automat<EntityState>}
  */
-export const entityAutomat = createListAutomat({
+entityAutomat = new Automat(initialState, actions, {
   name: 'entity',
-  fetch: async () => {
-    const data = await entityApi.list();
-    return data.entities ?? [];
-  },
-  sort: (items) =>
-    [...items].sort((a, b) => {
-      const byName = String(a.name).localeCompare(String(b.name), 'de');
-      if (byName !== 0) return byName;
-      return String(a.firstName ?? '').localeCompare(String(b.firstName ?? ''), 'de');
-    }),
+});
+
+export { entityAutomat };
+
+// Load on session/company establishment, reset on logout.
+authAutomat.subscribe((auth) => {
+  const companyId = auth.user?.selectedCompanyId;
+  if (auth.status === 'authed' && companyId) {
+    void actions.load().catch(() => {});
+  } else if (auth.status === 'anon') {
+    actions.reset();
+  }
 });
 
 export default entityAutomat;

src/automats/orderAutomat.js

@@ -3,9 +3,8 @@
  * @description Manages cached and paginated company sales orders (`GET /api/order`).
  *
  * Upstream Triggers:
- * - `authAutomat`: Triggers `actions.load()` on `'authed'` with a `selectedCompanyId`,
- *   and `actions.reset()` on `'anon'`.
- * - UI / Routes: Calls to `load({ offset, limit })`, `setPage(page)`, or `reload()`.
+ * - `authAutomat`: Triggers `actions.reset()` on `'anon'` or when `selectedCompanyId` changes.
+ * - UI / Routes: On-demand calls to `ensureLoaded()`, `load()`, or `reload()`.
  */
 
 import { Automat } from 'react-automat';
@@ -49,67 +48,154 @@ import authAutomat from './authAutomat';
 
 const initialState = {
   items: [],
+  filter: '',
   total: 0,
   offset: 0,
   limit: 20,
+  hasMore: false,
+  loadingMore: false,
   status: 'idle',
   error: null,
 };
 
 let automat;
 let inflightLoad = null;
+let inflightMore = null;
+const FETCH_PAGE_SIZE = 100;
+
+// MARK: fetches a single page from GET /api/order
+async function fetchOrdersPage(offset = 0, limit = FETCH_PAGE_SIZE) {
+  const res = await orderApi.list({ offset, limit });
+  const orders = Array.isArray(res?.orders) ? res.orders : [];
+  const total = Number(res?.total ?? orders.length);
+  return { orders, total };
+}
+
+/**
+ * Client-side filter over number, external reference and (resolved) customer name.
+ * @param {Order[]} items
+ * @param {string} filter
+ * @param {(order: Order) => string} [nameOf] Customer name resolver.
+ */
+export function filterOrders(items, filter, nameOf) {
+  const query = String(filter ?? '').trim().toLowerCase();
+  if (!query) return items;
+  return items.filter((o) =>
+    [o.number, o.externalNumber, nameOf?.(o)]
+      .some((v) => String(v ?? '').toLowerCase().includes(query)));
+}
 
 const actions = {
+  /** Sets the active search filter. */
+  filter(query) {
+    automat.setState({ filter: String(query ?? '') });
+  },
+
   /**
-   * Loads paginated orders, deduplicating concurrent callers.
+   * 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 } = automat.state;
+    if (filter) {
+      return filterOrders(items, filter, nameOf);
+    }
+    return items;
+  },
+
+  /**
+   * Loads the initial 100 orders, deduplicating concurrent callers.
    *
-   * @param {{ offset?: number, limit?: number }} [params]
    * @returns {Promise<Order[]>}
    */
-  load({ offset, limit } = {}) {
-    const currentOffset = offset ?? automat.state.offset ?? 0;
-    const currentLimit = limit ?? automat.state.limit ?? 20;
-
+  load() {
     if (inflightLoad) return inflightLoad;
-    inflightLoad = (async () => {
-      automat.setState({ status: 'loading', error: null });
-      try {
-        const res = await orderApi.list({ offset: currentOffset, limit: currentLimit });
-        const orders = res?.orders ?? [];
+    automat.setState({ status: 'loading', error: null });
+    inflightLoad = fetchOrdersPage(0, FETCH_PAGE_SIZE)
+      .then(({ orders, total }) => {
         automat.setState({
           items: orders,
-          total: Number(res?.total ?? orders.length),
-          offset: Number(res?.offset ?? currentOffset),
-          limit: Number(res?.limit ?? currentLimit),
+          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) {
+      })
+      .catch((error) => {
         automat.setState({ status: 'failed', error });
         throw error;
-      } finally {
-        inflightLoad = null;
-      }
-    })();
+      })
+      .finally(() => { inflightLoad = null; });
     return inflightLoad;
   },
 
   /**
-   * Silently re-fetches the current page of orders without flashing loading state.
+   * 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() {
-    const { offset, limit } = automat.state;
     try {
-      const res = await orderApi.list({ offset, limit });
-      const orders = res?.orders ?? [];
+      const currentCount = Math.max(FETCH_PAGE_SIZE, automat.state.items.length);
+      const { orders, total } = await fetchOrdersPage(0, currentCount);
       automat.setState({
         items: orders,
-        total: Number(res?.total ?? orders.length),
-        offset: Number(res?.offset ?? offset),
-        limit: Number(res?.limit ?? limit),
+        total,
+        hasMore: orders.length < total,
+        loadingMore: false,
         status: 'ready',
         error: null,
       });
@@ -120,38 +206,6 @@ const actions = {
     }
   },
 
-  /**
-   * Navigates to a 1-based page using formula: offset = (page - 1) * limit
-   *
-   * @param {number} page 1-based page number.
-   * @returns {Promise<Order[]>}
-   */
-  setPage(page) {
-    const limit = automat.state.limit || 20;
-    const offset = Math.max(0, (page - 1) * limit);
-    return actions.load({ offset, limit });
-  },
-
-  /**
-   * Sets pagination offset directly.
-   *
-   * @param {number} offset 0-based offset.
-   * @returns {Promise<Order[]>}
-   */
-  setOffset(offset) {
-    return actions.load({ offset, limit: automat.state.limit });
-  },
-
-  /**
-   * Sets page limit (records to return) and resets offset to 0.
-   *
-   * @param {number} limit Records per page (1..100).
-   * @returns {Promise<Order[]>}
-   */
-  setLimit(limit) {
-    return actions.load({ offset: 0, limit });
-  },
-
   /**
    * Ensures orders are loaded once the selected company is known.
    *
@@ -174,17 +228,35 @@ const actions = {
     automat.setState({
       items,
       total: items.length,
+      hasMore: false,
+      loadingMore: false,
       status: 'ready',
       error: null,
     });
     return items;
   },
 
+  /**
+   * 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) =>
+      o.id === id ? { ...o, ...patch } : o,
+    );
+    automat.setState({ items });
+    return items;
+  },
+
   /**
    * Resets to idle state (called on logout).
    */
   reset() {
     inflightLoad = null;
+    inflightMore = null;
     automat.setState(initialState);
   },
 };
@@ -192,13 +264,20 @@ const actions = {
 export const orderAutomat = new Automat(initialState, actions, { name: 'order' });
 automat = orderAutomat;
 
-// Load on session/company establishment, reset on logout.
+// Reset on logout or company change (lazy-loaded on demand by views via ensureLoaded).
+let lastCompanyId = null;
 authAutomat.subscribe((auth) => {
-  const companyId = auth.user?.selectedCompanyId;
-  if (auth.status === 'authed' && companyId) {
-    void actions.load().catch(() => {});
-  } else if (auth.status === 'anon') {
+  const companyId = auth.user?.selectedCompanyId ?? null;
+  if (auth.status === 'anon') {
     actions.reset();
+    lastCompanyId = null;
+    return;
+  }
+  if (lastCompanyId !== null && companyId !== lastCompanyId) {
+    actions.reset();
+  }
+  if (auth.status === 'authed' && companyId != null) {
+    lastCompanyId = companyId;
   }
 });
 
@@ -212,6 +291,16 @@ 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;
+}
+
 /**
  * Calculates client pagination metadata.
  * Current Page: Math.floor(offset / limit) + 1

src/components/PageMinimap.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
+import Portal from '@mui/material/Portal';
 import MapRoundedIcon from '@mui/icons-material/MapRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
@@ -202,18 +203,19 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
   // Collapsed: a single centered pill to reopen the overview.
   if (!open) {
     return (
-      <Box
-        sx={{
-          position: 'fixed',
-          left: '50%',
-          bottom: 16,
-          transform: 'translateX(-50%)',
-          zIndex: 1300,
-          opacity: visible ? 1 : 0,
-          transition: 'opacity 300ms ease',
-          pointerEvents: visible ? 'auto' : 'none',
-        }}
-      >
+      <Portal>
+        <Box
+          sx={{
+            position: 'fixed',
+            left: '50%',
+            bottom: 16,
+            transform: 'translateX(-50%)',
+            zIndex: 1300,
+            opacity: visible ? 1 : 0,
+            transition: 'opacity 300ms ease',
+            pointerEvents: visible ? 'auto' : 'none',
+          }}
+        >
           <IconButton
             type="button"
             size="small"
@@ -230,12 +232,14 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
           >
             <MapRoundedIcon fontSize="small" />
           </IconButton>
-      </Box>
+        </Box>
+      </Portal>
     );
   }
 
   return (
-    <Box
+    <Portal>
+      <Box
       sx={{
         position: 'fixed',
         left: '50%',
@@ -366,5 +370,6 @@ export default function PageMinimap({ sourceSelector = 'main' }) {
         </Box>
       </Box>
     </Box>
-  );
+  </Portal>
+);
 }

src/components/article/ArticleTileTab.jsx

@@ -7,7 +7,7 @@ import CategoryIcon from '@mui/icons-material/Category';
 import HistoryIcon from '@mui/icons-material/History';
 import LabelIcon from '@mui/icons-material/Label';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
-import ManageSearchIcon from '@mui/icons-material/ManageSearch';
+import DescriptionIcon from '@mui/icons-material/Description';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import SettingsIcon from '@mui/icons-material/Settings';
 import {
@@ -27,7 +27,7 @@ import { PANEL_TILE_BORDER_RADIUS, responsiveColumnSpan } from 'dashgui/panels/p
 import ArticleAttributesTab from './tabs/ArticleAttributesTab';
 import ArticleHistoryTab from './tabs/ArticleHistoryTab';
 import ArticleLabelTab from './tabs/ArticleLabelTab';
-import ArticleSeoTab from './tabs/ArticleSeoTab';
+import ArticleDescTab from './tabs/ArticleDescTab';
 import ArticleSettingsTab from './tabs/ArticleSettingsTab';
 import ArticleSupplierTab from './tabs/ArticleSupplierTab';
 import HelpBadge from '../HelpBadge';
@@ -58,11 +58,11 @@ const ALWAYS_TABS = [
     help: 'Zugeordnete Lieferanten, Einkaufspreise und Lieferanten-Artikelnummern',
   },
   {
-    id: ARTICLE_TAB.seo,
-    label: 'SEO & Beschreibung',
+    id: ARTICLE_TAB.desc,
+    label: 'Beschreibung',
     color: PETROL_PANEL,
-    Icon: ManageSearchIcon,
-    help: 'Shop-Texte, Beschreibungen und Suchmaschinen-Metadaten',
+    Icon: DescriptionIcon,
+    help: 'Shop-Texte, Beschreibungen und Produktdetails',
   },
   {
     id: ARTICLE_TAB.label,
@@ -184,8 +184,8 @@ class ArticleTileTab extends PureComponent {
         return <ArticleHistoryTab sku={articleData.sku} />;
       case ARTICLE_TAB.supplier:
         return <ArticleSupplierTab article={articleData} />;
-      case ARTICLE_TAB.seo:
-        return <ArticleSeoTab article={articleData} />;
+      case ARTICLE_TAB.desc:
+        return <ArticleDescTab article={articleData} />;
       case ARTICLE_TAB.label:
         return <ArticleLabelTab article={articleData} />;
       case ARTICLE_TAB.attributes:

src/components/article/articleRoute.js

@@ -3,14 +3,15 @@ import { matchPath } from 'react-router-dom';
 export const ARTICLE_TAB = {
   history: 'history',
   supplier: 'supplier',
-  seo: 'seo',
+  desc: 'desc',
+  seo: 'desc',
   label: 'label',
   attributes: 'attributes',
   settings: 'settings',
 };
 
 /** Factory fallback when nothing is stored in localStorage. */
-export const DEFAULT_ARTICLE_TAB = ARTICLE_TAB.seo;
+export const DEFAULT_ARTICLE_TAB = ARTICLE_TAB.desc;
 
 const PREFERRED_ARTICLE_TAB_KEY = 'dashfront:article-default-tab';
 
@@ -19,7 +20,7 @@ const ALL_ARTICLE_TAB_IDS = new Set(Object.values(ARTICLE_TAB));
 const BASE_ARTICLE_TAB_IDS = [
   ARTICLE_TAB.history,
   ARTICLE_TAB.supplier,
-  ARTICLE_TAB.seo,
+  ARTICLE_TAB.desc,
   ARTICLE_TAB.label,
   ARTICLE_TAB.attributes,
 ];
@@ -45,6 +46,7 @@ export function isArticleTabId(tab) {
 export function readPreferredArticleTab() {
   try {
     const raw = localStorage.getItem(PREFERRED_ARTICLE_TAB_KEY);
+    if (raw === 'seo') return ARTICLE_TAB.desc;
     if (raw && isArticleTabId(raw)) return raw;
   } catch {
     // ignore quota / private mode
@@ -71,6 +73,7 @@ export function preferredArticleTab(article) {
 
 export function resolveArticleTab(tabParam, article) {
   const ids = articleTabIds(article);
+  if (tabParam === 'seo') return ARTICLE_TAB.desc;
   if (tabParam && ids.includes(tabParam)) return tabParam;
   return preferredArticleTab(article);
 }
@@ -92,9 +95,10 @@ export function artikelDetailPath(articleOrSku, tab) {
       : articleSku(articleOrSku);
   if (!sku) return null;
 
+  const normalizedTab = tab === 'seo' ? ARTICLE_TAB.desc : tab;
   let segment;
-  if (isArticleTabId(tab)) {
-    segment = tab;
+  if (isArticleTabId(normalizedTab)) {
+    segment = normalizedTab;
   } else if (articleOrSku && typeof articleOrSku === 'object') {
     segment = preferredArticleTab(articleOrSku);
   } else {

src/components/article/tabs/ArticleDescTab.jsx

@@ -0,0 +1,68 @@
+import { Component } from 'react';
+import Box from '@mui/material/Box';
+import PageMinimap from '../../PageMinimap';
+
+function PanelHtmlValue({ html }) {
+  if (html == null || html === '') return null;
+  return (
+    <Box sx={{ mb: 1.5 }}>
+      <Box
+        sx={(theme) => ({
+          p: 1.5,
+          borderRadius: 1.5,
+          bgcolor:
+            theme.palette.mode === 'dark'
+              ? 'rgba(255, 255, 255, 0.08)'
+              : 'rgba(255, 255, 255, 0.85)',
+          border: '1px solid',
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? 'rgba(255, 255, 255, 0.12)'
+              : 'rgba(255, 255, 255, 0.95)',
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? 'none'
+              : '0 1px 3px rgba(0, 0, 0, 0.04)',
+          fontSize: '0.875rem',
+          lineHeight: 1.55,
+          color: 'text.primary',
+          wordBreak: 'break-word',
+          '& h1, & h2, & h3, & h4, & h5, & h6': {
+            fontSize: '1rem',
+            fontWeight: 600,
+            mt: 1.25,
+            mb: 0.5,
+            '&:first-child': { mt: 0 },
+          },
+          '& p': {
+            my: 0.5,
+            '&:first-child': { mt: 0 },
+            '&:last-child': { mb: 0 },
+          },
+          '& ul, & ol': {
+            pl: 2.5,
+            my: 0.5,
+          },
+          '& a': {
+            color: 'primary.main',
+            textDecoration: 'underline',
+          },
+        })}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </Box>
+  );
+}
+
+export default class ArticleDescTab extends Component {
+  render() {
+    const { article: articleData } = this.props;
+    const desc = articleData.desc ?? articleData.description;
+    return (
+      <>
+        <PanelHtmlValue html={desc} />
+        <PageMinimap />
+      </>
+    );
+  }
+}

src/components/article/tabs/ArticleSeoTab.jsx

@@ -1,68 +1,2 @@
-import { Component } from 'react';
-import Box from '@mui/material/Box';
-import PageMinimap from '../../PageMinimap';
+export { default } from './ArticleDescTab';
 
-function PanelHtmlValue({ html }) {
-  if (html == null || html === '') return null;
-  return (
-    <Box sx={{ mb: 1.5 }}>
-      <Box
-        sx={(theme) => ({
-          p: 1.5,
-          borderRadius: 1.5,
-          bgcolor:
-            theme.palette.mode === 'dark'
-              ? 'rgba(255, 255, 255, 0.08)'
-              : 'rgba(255, 255, 255, 0.85)',
-          border: '1px solid',
-          borderColor:
-            theme.palette.mode === 'dark'
-              ? 'rgba(255, 255, 255, 0.12)'
-              : 'rgba(255, 255, 255, 0.95)',
-          boxShadow:
-            theme.palette.mode === 'dark'
-              ? 'none'
-              : '0 1px 3px rgba(0, 0, 0, 0.04)',
-          fontSize: '0.875rem',
-          lineHeight: 1.55,
-          color: 'text.primary',
-          wordBreak: 'break-word',
-          '& h1, & h2, & h3, & h4, & h5, & h6': {
-            fontSize: '1rem',
-            fontWeight: 600,
-            mt: 1.25,
-            mb: 0.5,
-            '&:first-child': { mt: 0 },
-          },
-          '& p': {
-            my: 0.5,
-            '&:first-child': { mt: 0 },
-            '&:last-child': { mb: 0 },
-          },
-          '& ul, & ol': {
-            pl: 2.5,
-            my: 0.5,
-          },
-          '& a': {
-            color: 'primary.main',
-            textDecoration: 'underline',
-          },
-        })}
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    </Box>
-  );
-}
-
-export default class ArticleSeoTab extends Component {
-  render() {
-    const { article: articleData } = this.props;
-    const desc = articleData.desc ?? articleData.description;
-    return (
-      <>
-        <PanelHtmlValue html={desc} />
-        <PageMinimap />
-      </>
-    );
-  }
-}

src/components/kunde/Kunde.jsx

@@ -0,0 +1,223 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { enqueueSnackbar } from 'notistack';
+import { router } from '../../appRouter';
+import entityAutomat from '../../automats/entityAutomat';
+import { notifyError } from '../../utils/notify';
+
+function getCustomerDisplayName(item) {
+  if (!item) return '';
+  return [item.firstName, item.name].filter(Boolean).join(' ') || item.name || '';
+}
+
+class Kunde extends PureComponent {
+  constructor(props) {
+    super(props);
+    const item = props.customer ?? props.item;
+    this.state = {
+      draft: getCustomerDisplayName(item),
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevItem = prevProps.customer ?? prevProps.item;
+    const item = this.props.customer ?? this.props.item;
+    const prevName = getCustomerDisplayName(prevItem);
+    const nextName = getCustomerDisplayName(item);
+
+    if (prevName !== nextName) {
+      this.setState({ draft: nextName });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== nextName) {
+        this.setState({ draft: nextName });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    const item = this.props.customer ?? this.props.item;
+    this.props.onChange?.(next, item);
+  };
+
+  handleBlur = () => {
+    const item = this.props.customer ?? this.props.item;
+    if (!item) return;
+
+    const draft = this.state.draft.trim();
+    const currentDisplay = getCustomerDisplayName(item);
+    if (!draft) {
+      this.setState({ draft: currentDisplay });
+      return;
+    }
+    if (draft !== currentDisplay) {
+      void this.renameCustomer(item, draft);
+    }
+  };
+
+  async renameCustomer(item, rawText) {
+    const trimmed = rawText.trim();
+    if (!trimmed) return;
+    let name = trimmed;
+    let firstName = null;
+
+    if (trimmed.includes(',')) {
+      const parts = trimmed.split(',').map((p) => p.trim());
+      name = parts[0];
+      firstName = parts.slice(1).join(' ') || null;
+    } else if (trimmed.includes(' ') && !/gmbh|ag|kg|ug|inc|ltd|co\./i.test(trimmed)) {
+      const parts = trimmed.split(' ');
+      firstName = parts[0];
+      name = parts.slice(1).join(' ');
+    }
+
+    try {
+      await entityAutomat.actions.update(item.id, { name, firstName });
+      enqueueSnackbar('Kunde gespeichert.', { variant: 'success' });
+    } catch (err) {
+      this.setState({ draft: getCustomerDisplayName(item) });
+      notifyError(err);
+    }
+  }
+
+  handleKeyDown = (event) => {
+    const item = this.props.customer ?? this.props.item;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: getCustomerDisplayName(item) });
+      event.target.blur();
+    }
+  };
+
+  handleDelete = () => {
+    const item = this.props.customer ?? this.props.item;
+    if (!item) return;
+    const displayName = getCustomerDisplayName(item) || String(item.number ?? item.id);
+
+    if (!window.confirm(`Kunde „${displayName}“ wirklich löschen?`)) return;
+    void (async () => {
+      try {
+        await entityAutomat.actions.remove(item.id);
+        enqueueSnackbar('Kunde gelöscht.', { variant: 'success' });
+      } catch (err) {
+        notifyError(err);
+      }
+    })();
+  };
+
+  render() {
+    const { disabled, sx, groupName, onEdit } = this.props;
+    const item = this.props.customer ?? this.props.item;
+    const { draft } = this.state;
+    const displayName = getCustomerDisplayName(item) || String(item?.number ?? '');
+
+    const handleOpenEdit = () => {
+      if (!item) return;
+      if (onEdit) onEdit(item);
+      else void router.navigate(`/kunde/${item.id}`);
+    };
+
+    return (
+      <ListItem
+        disableGutters
+        data-id={item?.id}
+        sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
+      >
+        <Tooltip title="Kunde öffnen">
+          <IconButton
+            aria-label={`„${displayName}“ öffnen`}
+            disabled={disabled || !item}
+            onClick={handleOpenEdit}
+            sx={{ width: 40, height: 40, flexShrink: 0 }}
+          >
+            <PersonOutlinedIcon sx={{ fontSize: 24 }} />
+          </IconButton>
+        </Tooltip>
+
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled || !item}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1, minWidth: 0 }}
+        />
+
+        {item?.number ? (
+          <Chip
+            size="small"
+            label={item.number}
+            sx={{
+              height: 24,
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              fontVariantNumeric: 'tabular-nums',
+              bgcolor: 'action.hover',
+              color: 'text.primary',
+              flexShrink: 0,
+              '& .MuiChip-label': {
+                px: 0.75,
+                textAlign: 'center',
+              },
+            }}
+          />
+        ) : null}
+
+        {groupName ? (
+          <Chip
+            size="small"
+            label={groupName}
+            sx={{
+              height: 24,
+              fontSize: '0.75rem',
+              bgcolor: 'action.hover',
+              color: 'text.secondary',
+              flexShrink: 0,
+              display: { xs: 'none', sm: 'inline-flex' },
+              '& .MuiChip-label': {
+                px: 0.75,
+              },
+            }}
+          />
+        ) : null}
+
+        <Tooltip title="Details bearbeiten">
+          <IconButton
+            aria-label={`„${displayName}“ bearbeiten`}
+            disabled={disabled || !item}
+            onClick={handleOpenEdit}
+            sx={{ width: 40, height: 40, flexShrink: 0 }}
+          >
+            <EditOutlinedIcon sx={{ fontSize: 22 }} />
+          </IconButton>
+        </Tooltip>
+
+        <IconButton
+          aria-label={`„${displayName}“ löschen`}
+          disabled={disabled || !item}
+          onClick={this.handleDelete}
+          sx={{ width: 40, height: 40, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+        </IconButton>
+      </ListItem>
+    );
+  }
+}
+
+export { getCustomerDisplayName };
+export default Kunde;

src/components/kunde/index.js

@@ -1,2 +1,3 @@
+export { default as Kunde } from './Kunde';
 export { default as KundeGruppe } from './KundeGruppe';
 export { default as withEntityRoute } from './withEntityRoute';

src/components/manifest/OrderList.jsx

@@ -1,33 +1,25 @@
-import { Fragment, PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
-import Stack from '@mui/material/Stack';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableFooter from '@mui/material/TableFooter';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
+import ListItemButton from '@mui/material/ListItemButton';
 import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import Tooltip from '@mui/material/Tooltip';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-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 BackendError from '../BackendError';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
-import orderAutomat from '../../automats/orderAutomat';
+import BackendError from '../BackendError';
+import orderAutomat, { filterOrders } from '../../automats/orderAutomat';
 import { order as orderApi } from '../../api';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
 import { formatPrice } from '../../utils/price';
 import withNavigate from '../withNavigate';
-import ResultsPagination from '../article/ResultsPagination';
 import {
   formatDate,
   loadParties,
@@ -36,532 +28,429 @@ import {
   partyDisplayName,
 } from './manifestConfig';
 
-function tintDivider(color, amount = 0.15) {
-  if (typeof color !== 'string') return 'divider';
-  const m = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-  if (!m) return 'divider';
-
-  let hex = m[1];
-  if (hex.length === 3) {
-    hex = hex
-      .split('')
-      .map((c) => c + c)
-      .join('');
-  }
-  const num = parseInt(hex, 16);
-  const channels = [16, 8, 0].map((shift) => {
-    const c = (num >> shift) & 0xff;
-    return Math.max(0, Math.round(c * (1 - amount)));
-  });
-  const toHex = (v) => v.toString(16).padStart(2, '0');
-  return `#${channels.map(toHex).join('')}`;
-}
-
-function calculateOrderTotal(lines) {
-  if (!Array.isArray(lines) || lines.length === 0) return 0;
+// MARK: pure helpers
+function orderGrossTotal(lines) {
+  if (!Array.isArray(lines)) return 0;
   return lines.reduce((acc, line) => {
-    const amount = Number(line.amount) || 0;
-    const net = Number(line.net) || 0;
-    const rebate = Number(line.rebate) || 0;
-    const lineTotal = amount * net * (1 - rebate / 100);
-    return acc + lineTotal;
+    const net = (Number(line.amount) || 0) * (Number(line.net) || 0) * (1 - (Number(line.rebate) || 0) / 100);
+    return acc + net * (1 + (Number(line.taxrate) || 0) / 100);
   }, 0);
 }
 
-function calculateOrderGrossTotal(lines) {
-  if (!Array.isArray(lines) || lines.length === 0) return 0;
-  return lines.reduce((acc, line) => {
-    const amount = Number(line.amount) || 0;
-    const net = Number(line.net) || 0;
-    const rebate = Number(line.rebate) || 0;
-    const taxrate = Number(line.taxrate) || 0;
-    const lineNet = amount * net * (1 - rebate / 100);
-    const lineGross = lineNet * (1 + taxrate / 100);
-    return acc + lineGross;
-  }, 0);
+function isOrderPaid(order) {
+  return Boolean(order.paid ?? order.payed ?? order.isPaid ?? order.is_paid ?? order.paidAt);
 }
 
-export class OrderList extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.cfg = manifestConfig('order');
-    const orderState = orderAutomat.state;
-    this.state = {
-      status: orderState.status === 'ready' ? 'ready' : 'loading',
-      error: orderState.error,
-      orders: orderState.items ?? [],
-      total: orderState.total ?? 0,
-      offset: orderState.offset ?? 0,
-      limit: orderState.limit ?? 20,
-      partiesById: {},
-      busyId: null,
-      expandedIds: new Set(),
-    };
-    this._cancelled = false;
-    this.handleRetry = this.handleRetry.bind(this);
-    this.handleCreate = this.handleCreate.bind(this);
-    this.handleEdit = this.handleEdit.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-    this.handlePageChange = this.handlePageChange.bind(this);
-    this.toggleExpand = this.toggleExpand.bind(this);
-  }
+function isOrderDelivered(order) {
+  return Boolean(order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
+}
 
-  componentDidMount() {
-    this._cancelled = false;
-    this.unsubOrder = orderAutomat.subscribe(this, (state) => ({
-      orders: state.items ?? [],
-      total: state.total ?? 0,
-      offset: state.offset ?? 0,
-      limit: state.limit ?? 20,
-      status: state.status,
-      error: state.error,
-    }));
+const cfg = manifestConfig('order');
 
-    void this.loadPartiesAndOrders();
-  }
+const rowSx = {
+  alignItems: 'center',
+  height: 64,
+  minHeight: 64,
+  maxHeight: 64,
+  boxSizing: 'border-box',
+  py: 0,
+  gap: 1.5,
+};
 
-  componentWillUnmount() {
-    this._cancelled = true;
-    this.unsubOrder?.();
-  }
+const ellipsisSx = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
 
-  async loadPartiesAndOrders() {
-    try {
-      const parties = await loadParties('order');
-      if (this._cancelled) return;
-      this.setState({
-        partiesById: this.cfg.partiesByIdFromList(parties),
-      });
-    } catch {
-      // Non-fatal, party names can fall back to IDs
-    }
-
-    try {
-      await orderAutomat.actions.ensureLoaded();
-    } catch (err) {
-      if (this._cancelled) return;
-      this.setState({ status: 'failed', error: backendErrorFrom(err) });
-    }
-  }
-
-  async handleRetry() {
-    this.setState({ status: 'loading', error: null });
-    try {
-      await orderAutomat.actions.reload();
-    } catch (err) {
-      if (this._cancelled) return;
-      this.setState({ status: 'failed', error: backendErrorFrom(err) });
-    }
-  }
-
-  go(to) {
-    const { navigate } = this.props;
-    if (typeof navigate === 'function') {
-      navigate(to);
-      return;
-    }
-    window.location.assign(to);
-  }
-
-  handleCreate() {
-    this.go(this.cfg.createPath);
-  }
-
-  handleEdit(order) {
-    this.go(this.cfg.editPath(order.id));
-  }
-
-  async handleDelete(order) {
-    if (this.state.busyId != null) return;
-    if (!window.confirm(this.cfg.confirmDelete(order.number))) return;
-
-    this.setState({ busyId: order.id });
-    try {
-      await orderApi.delete(order.id);
-      await orderAutomat.actions.reload();
-      if (this._cancelled) return;
-      this.setState({ busyId: null });
-      enqueueSnackbar(this.cfg.deletedMsg, { variant: 'success' });
-    } catch (err) {
-      if (this._cancelled) return;
-      notifyError(err);
-      this.setState({ busyId: null });
-    }
-  }
-
-  handlePageChange(page) {
-    // Formula: Next Offset: (page - 1) * limit
-    void orderAutomat.actions.setPage(page);
-  }
-
-  toggleExpand(orderId) {
-    this.setState((prev) => {
-      const next = new Set(prev.expandedIds);
-      if (next.has(orderId)) {
-        next.delete(orderId);
-      } else {
-        next.add(orderId);
-      }
-      return { expandedIds: next };
-    });
-  }
+/**
+ * Ambient context for `OrderRow`: FillSpace renders rows as bare elements
+ * (`<Row item index />`), so the list publishes callbacks and the party map
+ * here on every render.
+ */
+const rowContext = {
+  partiesById: {},
+  busyId: null,
+  onOpen: null,
+  onDelete: null,
+  onTogglePaid: null,
+  onToggleDelivered: null,
+};
 
+// MARK: <OrderRow/> 
+class OrderRow extends PureComponent {
   partyName(partyId) {
     if (partyId == null) return '–';
-    const party = this.state.partiesById[partyId];
+    const party = rowContext.partiesById[partyId];
     return partyDisplayName('order', party) || `Kunde #${partyId}`;
   }
 
-  renderLoading() {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
+  render() {
+    const { item: order } = this.props;
 
-  renderLineItems(order, borderColor) {
-    const lines = order.lines ?? [];
-    if (lines.length === 0) {
+    // Data-free probe (FillSpace measures the row height with `item` undefined).
+    if (!order) {
       return (
-        <Box sx={{ py: 1.5, px: 2, bgcolor: 'action.hover', borderRadius: 1 }}>
-          <Typography variant="body2" color="text.secondary">
-            Keine Positionen vorhanden.
-          </Typography>
-        </Box>
+        <ListItemButton disabled divider sx={{ ...rowSx, opacity: 0, pointerEvents: 'none' }}>
+          <Typography variant="body2">&nbsp;</Typography>
+        </ListItemButton>
       );
     }
 
-    const netTotal = calculateOrderTotal(lines);
-    const grossTotal = calculateOrderGrossTotal(lines);
+    const { busyId, onOpen, onDelete, onTogglePaid, onToggleDelivered } = rowContext;
+    const lines = order.lines ?? [];
+    const gross = orderGrossTotal(lines);
+    const paid = isOrderPaid(order);
+    const delivered = isOrderDelivered(order);
 
     return (
-      <Box
-        sx={{
-          py: 1,
-          px: 1.5,
-          bgcolor: 'rgba(255, 255, 255, 0.45)',
-          borderRadius: 1,
-          border: '1px solid',
-          borderColor,
-        }}
-      >
-        <Table size="small" aria-label={`Positionen für Bestellung ${order.number}`}>
-          <TableHead>
-            <TableRow>
-              <TableCell align="center" sx={{ fontWeight: 600, fontSize: '0.75rem', width: 44 }}>
-                Pos
-              </TableCell>
-              <TableCell sx={{ fontWeight: 600, fontSize: '0.75rem' }}>SKU</TableCell>
-              <TableCell sx={{ fontWeight: 600, fontSize: '0.75rem' }}>Artikel</TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                Menge
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                Netto
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                Brutto
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                Rabatt
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                MwSt.
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                Gesamt netto
-              </TableCell>
-              <TableCell align="right" sx={{ fontWeight: 600, fontSize: '0.75rem' }}>
-                Gesamt brutto
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {lines.map((line, idx) => {
-              const amount = Number(line.amount) || 0;
-              const net = Number(line.net) || 0;
-              const taxrate = Number(line.taxrate) || 0;
-              const gross = net * (1 + taxrate / 100);
-              const rebate = Number(line.rebate) || 0;
-              const lineNet = amount * net * (1 - rebate / 100);
-              const lineGross = lineNet * (1 + taxrate / 100);
-              const puText = Number(line.pu) > 1 ? ` (VPE ${line.pu})` : '';
+      <ListItemButton divider sx={rowSx} onClick={() => onOpen?.(order)}>
+        <Box sx={{ width: 120, flexShrink: 0, minWidth: 0 }}>
+          <Typography variant="body1" sx={{ fontWeight: 600, ...ellipsisSx }}>
+            {order.number}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+            {numberDisplay(order.externalNumber)}
+          </Typography>
+        </Box>
 
-              return (
-                <TableRow key={line.id ?? `line-${idx}`}>
-                  <TableCell align="center" sx={{ fontSize: '0.75rem', color: 'text.secondary', fontWeight: 600 }}>
-                    {idx + 1}
-                  </TableCell>
-                  <TableCell sx={{ fontFamily: 'monospace', fontSize: '0.75rem' }}>
-                    {line.sku || '–'}
-                  </TableCell>
-                  <TableCell sx={{ fontSize: '0.75rem' }}>
-                    <Typography variant="body2" sx={{ fontSize: '0.75rem', fontWeight: 500 }}>
-                      {line.name || '–'}
-                    </Typography>
-                    {line.comment ? (
-                      <Typography variant="caption" color="text.secondary">
-                        {line.comment}
-                      </Typography>
-                    ) : null}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem' }}>
-                    {amount}
-                    {puText}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem' }}>
-                    {formatPrice(net)}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem' }}>
-                    {formatPrice(gross)}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem' }}>
-                    {rebate > 0 ? `${rebate}%` : '–'}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem' }}>
-                    {line.taxrate != null ? `${line.taxrate}%` : '–'}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem', fontWeight: 600 }}>
-                    {formatPrice(lineNet)}
-                  </TableCell>
-                  <TableCell align="right" sx={{ fontSize: '0.75rem', fontWeight: 600, color: 'primary.dark' }}>
-                    {formatPrice(lineGross)}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-          <TableFooter>
-            <TableRow sx={{ '& > td': { borderTop: '2px solid', borderColor, fontWeight: 700 } }}>
-              <TableCell colSpan={8} align="right" sx={{ fontSize: '0.75rem', fontWeight: 700 }}>
-                Gesamtsumme:
-              </TableCell>
-              <TableCell align="right" sx={{ fontSize: '0.75rem', fontWeight: 700 }}>
-                {formatPrice(netTotal)}
-              </TableCell>
-              <TableCell align="right" sx={{ fontSize: '0.75rem', fontWeight: 700, color: 'primary.dark' }}>
-                {formatPrice(grossTotal)}
-              </TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </Box>
+        <Box sx={{ width: 100, flexShrink: 0, minWidth: 0 }}>
+          <Typography variant="body2" color="text.secondary" sx={ellipsisSx}>
+            {order.date ? formatDate(order.date) : '–'}
+          </Typography>
+        </Box>
+
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="body1" sx={{ fontWeight: 500, ...ellipsisSx }}>
+            {this.partyName(order.entityId)}
+          </Typography>
+        </Box>
+
+        <Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+          <Tooltip title={paid ? 'Bezahlt' : 'Offen (nicht bezahlt)'}>
+            <span>
+              <Checkbox
+                size="small"
+                checked={paid}
+                color="success"
+                onClick={(e) => e.stopPropagation()}
+                onChange={(e) => onTogglePaid?.(order, e.target.checked)}
+                inputProps={{ 'aria-label': `Auftrag ${order.number} bezahlt` }}
+                sx={{ p: 0.5 }}
+              />
+            </span>
+          </Tooltip>
+        </Box>
+
+        <Box sx={{ width: 72, flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+          <Tooltip title={delivered ? 'Geliefert' : 'Ausstehend (nicht geliefert)'}>
+            <span>
+              <Checkbox
+                size="small"
+                checked={delivered}
+                color="primary"
+                onClick={(e) => e.stopPropagation()}
+                onChange={(e) => onToggleDelivered?.(order, e.target.checked)}
+                inputProps={{ 'aria-label': `Auftrag ${order.number} geliefert` }}
+                sx={{ p: 0.5 }}
+              />
+            </span>
+          </Tooltip>
+        </Box>
+
+        <Chip
+          size="small"
+          label={`${lines.length} Pos.`}
+          sx={{
+            width: 64,
+            flexShrink: 0,
+            height: 24,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: lines.length > 0 ? 'text.primary' : 'text.disabled',
+          }}
+        />
+
+        <Typography
+          variant="body2"
+          sx={{ width: 96, flexShrink: 0, textAlign: 'right', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}
+        >
+          {gross > 0 ? formatPrice(gross) : '—'}
+        </Typography>
+
+        <IconButton
+          aria-label={`„${order.number}“ löschen`}
+          disabled={busyId != null}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete?.(order);
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          sx={{ width: 40, height: 40, flexShrink: 0 }}
+        >
+          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
+        </IconButton>
+      </ListItemButton>
     );
   }
+}
+
+// MARK: <OrderSearchField(>)
+class OrderSearchField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { input: orderAutomat.state.filter ?? '' };
+  }
+
+  componentDidMount() {
+    this.unsub = orderAutomat.subscribe(this, (state) => ({ input: state.filter }));
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
 
   render() {
-    const { status, error, orders, total, offset, limit, busyId, expandedIds } = this.state;
-    const cfg = this.cfg;
-
-    if (status === 'loading') return this.renderLoading();
-    if (status === 'failed') {
-      return (
-        <BackendError
-          error={error}
-          onRetry={this.handleRetry}
-        />
-      );
-    }
-
-    const borderColor = tintDivider(cfg.listColor);
-
-    // Client Pagination Formula:
-    // Current Page: Math.floor(offset / limit) + 1
-    // Total Pages: Math.ceil(total / limit)
-    const currentPage = Math.floor(offset / limit) + 1;
-    const pageCount = Math.max(1, Math.ceil(total / limit));
-    const showPagination = total > limit;
-
+    const { inputRef, onCreate } = this.props;
     return (
       <PanelTileGrid>
-        <PanelTile wide={3} minHeight={240} color={cfg.listColor}>
-          <Stack spacing={2}>
-            {/* Create Header Button */}
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-              <Button
-                type="button"
-                variant="contained"
-                size="small"
-                onClick={this.handleCreate}
-              >
-                {cfg.createButton}
-              </Button>
-            </Box>
-
-            {/* Empty State */}
-            {orders.length === 0 ? (
-              <Typography variant="body2" color="text.secondary">
-                {cfg.emptyList}
-              </Typography>
-            ) : (
-              <TableContainer>
-                <Table
-                  size="small"
-                  sx={{
-                    '& .MuiTableCell-root': {
-                      borderColor,
-                    },
-                  }}
-                >
-                  <TableHead>
-                    <TableRow>
-                      <TableCell padding="checkbox" sx={{ width: 44 }} />
-                      <TableCell sx={{ width: 130, fontWeight: 600 }}>Nummer</TableCell>
-                      <TableCell sx={{ width: 130, fontWeight: 600 }}>Referenz</TableCell>
-                      <TableCell sx={{ width: 130, fontWeight: 600 }}>{cfg.dateLabel}</TableCell>
-                      <TableCell sx={{ minWidth: 160, fontWeight: 600 }}>{cfg.partyLabel}</TableCell>
-                      <TableCell sx={{ minWidth: 180, fontWeight: 600 }}>Positionen</TableCell>
-                      <TableCell padding="checkbox" align="right" sx={{ width: 84 }} />
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {orders.map((order) => {
-                      const isExpanded = expandedIds.has(order.id);
-                      const lines = order.lines ?? [];
-                      const netTotal = calculateOrderTotal(lines);
-                      const grossTotal = calculateOrderGrossTotal(lines);
-                      const hasLines = lines.length > 0;
-
-                      return (
-                        <Fragment key={order.id}>
-                          <TableRow
-                            hover
-                            sx={{ cursor: 'pointer' }}
-                            onClick={() => this.handleEdit(order)}
-                          >
-                            {/* Expand / Collapse toggle */}
-                            <TableCell
-                              padding="checkbox"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                if (hasLines) this.toggleExpand(order.id);
-                              }}
-                            >
-                              {hasLines ? (
-                                <IconButton size="small" aria-label="Positionen ein-/ausblenden">
-                                  {isExpanded ? (
-                                    <KeyboardArrowUpIcon fontSize="small" />
-                                  ) : (
-                                    <KeyboardArrowDownIcon fontSize="small" />
-                                  )}
-                                </IconButton>
-                              ) : null}
-                            </TableCell>
-
-                            {/* Number */}
-                            <TableCell sx={{ fontWeight: 600 }}>{order.number}</TableCell>
-
-                            {/* Reference / External Number */}
-                            <TableCell>{numberDisplay(order.externalNumber)}</TableCell>
-
-                            {/* Date */}
-                            <TableCell>{formatDate(order.date)}</TableCell>
-
-                            {/* Customer */}
-                            <TableCell>{this.partyName(order.entityId)}</TableCell>
-
-                            {/* Lines summary */}
-                            <TableCell>
-                              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                                <Chip
-                                  size="small"
-                                  label={`${lines.length} Pos.`}
-                                  variant="outlined"
-                                  sx={{
-                                    bgcolor: 'background.paper',
-                                    fontWeight: 500,
-                                    fontSize: '0.75rem',
-                                    height: 22,
-                                  }}
-                                />
-                                {grossTotal > 0 ? (
-                                  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-                                    <Typography variant="body2" sx={{ fontWeight: 700, fontSize: '0.8rem', lineHeight: 1.2 }}>
-                                      {formatPrice(grossTotal)} brutto
-                                    </Typography>
-                                    <Typography variant="caption" sx={{ color: 'text.secondary', fontSize: '0.7rem' }}>
-                                      {formatPrice(netTotal)} netto
-                                    </Typography>
-                                  </Box>
-                                ) : netTotal > 0 ? (
-                                  <Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.8rem' }}>
-                                    {formatPrice(netTotal)}
-                                  </Typography>
-                                ) : null}
-                              </Box>
-                            </TableCell>
-
-                            {/* Row Action buttons */}
-                            <TableCell
-                              padding="checkbox"
-                              align="right"
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
-                                <IconButton
-                                  size="small"
-                                  aria-label={`„${order.number}“ bearbeiten`}
-                                  onClick={() => this.handleEdit(order)}
-                                >
-                                  <EditOutlinedIcon fontSize="small" />
-                                </IconButton>
-                                <IconButton
-                                  size="small"
-                                  aria-label={`„${order.number}“ löschen`}
-                                  disabled={busyId != null}
-                                  onClick={() => this.handleDelete(order)}
-                                >
-                                  <DeleteOutlinedIcon fontSize="small" />
-                                </IconButton>
-                              </Box>
-                            </TableCell>
-                          </TableRow>
-
-                          {/* Collapsible Line Details Row */}
-                          {hasLines && (
-                            <TableRow>
-                              <TableCell
-                                colSpan={7}
-                                sx={{
-                                  p: 0,
-                                  borderBottom: isExpanded ? undefined : 'none',
-                                }}
-                              >
-                                <Collapse in={isExpanded} timeout="auto" unmountOnExit>
-                                  <Box sx={{ py: 1.5, px: 2 }}>
-                                    {this.renderLineItems(order, borderColor)}
-                                  </Box>
-                                </Collapse>
-                              </TableCell>
-                            </TableRow>
-                          )}
-                        </Fragment>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-
-            {/* Pagination Controls */}
-            {showPagination ? (
-              <Box sx={{ pt: 1 }}>
-                <ResultsPagination
-                  offset={offset}
-                  totalCount={total}
-                  pageSize={limit}
-                  pageCount={pageCount}
-                  currentPage={currentPage}
-                  onPageChange={(e, page) => this.handlePageChange(page)}
-                />
-              </Box>
-            ) : null}
-          </Stack>
-        </PanelTile>
+        <Box
+          ref={inputRef}
+          sx={{
+            gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            pb: 2,
+          }}
+        >
+          <SingleLineTextEdit
+            sx={{ flex: 1 }}
+            size="small"
+            search
+            clear
+            value={this.state.input}
+            onChange={(next) => orderAutomat.actions.filter(next)}
+          />
+          <Button variant="contained" onClick={onCreate}>
+            {cfg.createButton}
+          </Button>
+        </Box>
       </PanelTileGrid>
     );
   }
 }
 
+// MARK: <OrderList/>
+export class OrderList 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,
+      filteredItems: orderAutomat.actions.getOrLoad(),
+      items: s.items ?? [],
+      total: s.total ?? 0,
+      filter: s.filter ?? '',
+      partiesById: {},
+      busyId: null,
+    };
+    this.searchRef = createRef();
+    this._cancelled = false;
+    this.handleRetry = this.handleRetry.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleTogglePaid = this.handleTogglePaid.bind(this);
+    this.handleToggleDelivered = this.handleToggleDelivered.bind(this);
+    this.handlePageChange = this.handlePageChange.bind(this);
+    this.nameOf = this.nameOf.bind(this);
+  }
+
+  async handleTogglePaid(order, checked) {
+    if (this.state.busyId != null) return;
+    const patch = { paid: checked, payed: checked, isPaid: checked };
+    orderAutomat.actions.patchOrder(order.id, patch);
+    try {
+      await orderApi.update(order.id, { paid: checked });
+      enqueueSnackbar(checked ? 'Auftrag als bezahlt markiert' : 'Auftrag als unbezahlt markiert', {
+        variant: 'info',
+      });
+    } catch (err) {
+      console.warn('[OrderList] update paid on backend failed:', err);
+    }
+  }
+
+  async handleToggleDelivered(order, checked) {
+    if (this.state.busyId != null) return;
+    const patch = { delivered: checked, isDelivered: checked };
+    orderAutomat.actions.patchOrder(order.id, patch);
+    try {
+      await orderApi.update(order.id, { delivered: checked });
+      enqueueSnackbar(checked ? 'Auftrag als geliefert markiert' : 'Auftrag als ungeliefert markiert', {
+        variant: 'info',
+      });
+    } catch (err) {
+      console.warn('[OrderList] update delivered on backend failed:', err);
+    }
+  }
+
+  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 ?? '',
+      filteredItems: state.filter
+        ? filterOrders(state.items ?? [], state.filter, this.nameOf)
+        : (state.items ?? []),
+      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: prev.filter
+            ? filterOrders(prev.items, prev.filter, (o) => partyDisplayName('order', partiesById[o.entityId]))
+            : prev.filteredItems,
+        }));
+      }
+    } 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 { status, error, items, total, filter, 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;
+    rowContext.onOpen = this.handleOpen;
+    rowContext.onDelete = this.handleDelete;
+    rowContext.onTogglePaid = this.handleTogglePaid;
+    rowContext.onToggleDelivered = this.handleToggleDelivered;
+
+    const rows = filteredItems ?? [];
+    const displayTotal = filter ? rows.length : (total || items.length);
+
+    return (
+      <>
+        <OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
+        <PanelTileGrid>
+          <PanelTile wide={2} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
+            {items.length === 0 ? (
+              <Typography variant="body2" color="text.secondary" sx={{ pb: 2 }}>
+                {cfg.emptyList}
+              </Typography>
+            ) : (
+              <FillSpace
+                aboveRef={[this.searchRef]}
+                reserveBottom={32}
+                minPageSize={8}
+                minHeight={0}
+                items={rows}
+                totalCount={displayTotal}
+                renderItem={OrderRow}
+                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: 120, flexShrink: 0 }}>Nr. / Ref.</Box>
+                    <Box sx={{ width: 100, flexShrink: 0 }}>Datum</Box>
+                    <Box sx={{ flex: 1, minWidth: 0 }}>Kunde</Box>
+                    <Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Bezahlt</Box>
+                    <Box sx={{ width: 72, flexShrink: 0, textAlign: 'center' }}>Geliefert</Box>
+                    <Box sx={{ width: 64, flexShrink: 0, textAlign: 'center' }}>Pos.</Box>
+                    <Box sx={{ width: 96, flexShrink: 0, textAlign: 'right' }}>Gesamt</Box>
+                    <Box sx={{ width: 40, flexShrink: 0 }} />
+                  </Box>
+                }
+                onPageChange={this.handlePageChange}
+              />
+            )}
+          </PanelTile>
+        </PanelTileGrid>
+      </>
+    );
+  }
+}
+
 export default withNavigate(OrderList);

src/components/merkmale/ArtikelMerkmalAuswahl.jsx

@@ -121,11 +121,13 @@ class ArtikelMerkmalAuswahl extends PureComponent {
   };
 
   render() {
-    const { attribute, isSelected, onSelect, disabled, sx } = this.props;
+    const { attribute: propAttribute, isSelected, onSelect, disabled, sx } = this.props;
+    const attribute = propAttribute ?? this.props.item;
     const { draft, busy } = this.state;
     const name = attribute?.name ?? '';
     const exclusive = attribute ? Boolean(attribute.exclusive) : true;
     const isDisabled = disabled || busy;
+    const articleCount = attribute?.articleCount ?? 0;
 
     return (
       <ListItem
@@ -211,6 +213,29 @@ class ArtikelMerkmalAuswahl extends PureComponent {
           }}
         />
 
+        <Chip
+          size="small"
+          label={articleCount}
+          onClick={(e) => e.stopPropagation()}
+          sx={{
+            height: 24,
+            width: 52,
+            minWidth: 52,
+            maxWidth: 52,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+            flexShrink: 0,
+            '& .MuiChip-label': {
+              px: 0.5,
+              textAlign: 'center',
+              width: '100%',
+            },
+          }}
+        />
+
         <IconButton
           aria-label={`„${name}“ löschen`}
           disabled={isDisabled || !attribute}

src/components/merkmale/ArtikelMerkmalText.jsx

@@ -124,6 +124,7 @@ class ArtikelMerkmalText extends PureComponent {
     const name = item?.name ?? '';
     const exclusive = item ? Boolean(item.exclusive) : true;
     const isDisabled = disabled || busy;
+    const articleCount = item?.articleCount ?? 0;
 
     return (
       <ListItem
@@ -196,6 +197,28 @@ class ArtikelMerkmalText extends PureComponent {
           }}
         />
 
+        <Chip
+          size="small"
+          label={articleCount}
+          sx={{
+            height: 24,
+            width: 52,
+            minWidth: 52,
+            maxWidth: 52,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+            flexShrink: 0,
+            '& .MuiChip-label': {
+              px: 0.5,
+              textAlign: 'center',
+              width: '100%',
+            },
+          }}
+        />
+
         <IconButton
           aria-label={`„${name}“ löschen`}
           disabled={isDisabled || !item}

src/components/merkmale/ArtikelMerkmalWert.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
@@ -102,6 +103,7 @@ class ArtikelMerkmalWert extends PureComponent {
     const { draft, busy } = this.state;
     const valText = item?.value ?? '';
     const isDisabled = disabled || busy;
+    const articleCount = item?.articleCount ?? 0;
 
     return (
       <ListItem
@@ -147,6 +149,28 @@ class ArtikelMerkmalWert extends PureComponent {
           sx={{ flex: 1, minWidth: 0 }}
         />
 
+        <Chip
+          size="small"
+          label={articleCount}
+          sx={{
+            height: 24,
+            width: 52,
+            minWidth: 52,
+            maxWidth: 52,
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            bgcolor: 'action.hover',
+            color: articleCount > 0 ? 'text.primary' : 'text.disabled',
+            flexShrink: 0,
+            '& .MuiChip-label': {
+              px: 0.5,
+              textAlign: 'center',
+              width: '100%',
+            },
+          }}
+        />
+
         <IconButton
           aria-label={`„${valText}“ löschen`}
           disabled={isDisabled || !item}

src/routes/artikel.jsx

@@ -645,7 +645,6 @@ class ArtikelSearchPage extends Component {
                         onMouseDown={(e) => e.preventDefault()}
                         onClick={() => {
                           const next = selected ? [] : [id];
-                          this.setState({ categoryFilterOpen: false });
                           this.updateParams(input, buildFilter(next), 0);
                         }}
                         sx={{ pl: 2 + depth * 1.5 }}
@@ -681,7 +680,7 @@ class ArtikelSearchPage extends Component {
                 reserveBottom={32}
                 minPageSize={8}
                 minHeight={0}
-                sx={{ overflow: 'auto' }}
+                virtualScrollbar
               />
             </PanelTile>
           </Box>

src/routes/artikel/marken.jsx

@@ -110,6 +110,7 @@ class ArtikelMarkenPage extends PureComponent {
       status: brandAutomat.state.status,
       error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
       brands: brandAutomat.state.filteredBrands ?? brandAutomat.state.brands,
+      totalCount: brandAutomat.state.brands?.length ?? 0,
     };
     this.searchRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
@@ -120,6 +121,7 @@ class ArtikelMarkenPage extends PureComponent {
 
     this.unsub = brandAutomat.subscribe(this, (state) => ({
       brands: state.filteredBrands,
+      totalCount: state.brands?.length ?? 0,
       status: state.status,
       error: state.error ? backendErrorFrom({ message: state.error }) : null,
     }));
@@ -159,6 +161,7 @@ class ArtikelMarkenPage extends PureComponent {
               minPageSize={8}
               minHeight={0}
               items={brands}
+              totalCount={this.state.totalCount}
               renderItem={ArtikelMarke}
             />
           </PanelTile>

src/routes/artikel/merkmale.jsx

@@ -12,6 +12,7 @@ import Sortable from 'sortablejs';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../../components/BackendError';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import withNavigate from '../../components/withNavigate';
 import { backendErrorFrom } from '../../utils/backendError';
@@ -45,14 +46,17 @@ class ArtikelMerkmalePage extends PureComponent {
       attributes: initialAttributes,
       attrFilter: '',
       attrSubmitting: false,
+      attrPage: 1,
       selectedAttributeId: initialSelectedAttrId,
 
       valFilter: '',
       valSubmitting: false,
+      valPage: 1,
 
       properties: initialProperties,
       propFilter: '',
       propSubmitting: false,
+      propPage: 1,
     };
 
     this._cancelled = false;
@@ -112,6 +116,7 @@ class ArtikelMerkmalePage extends PureComponent {
     if (
       (prevState.properties !== this.state.properties ||
         prevState.propFilter !== this.state.propFilter ||
+        prevState.propPage !== this.state.propPage ||
         prevState.propStatus !== this.state.propStatus) &&
       this.propListRef.current
     ) {
@@ -123,6 +128,7 @@ class ArtikelMerkmalePage extends PureComponent {
     if (
       (prevState.attributes !== this.state.attributes ||
         prevState.attrFilter !== this.state.attrFilter ||
+        prevState.attrPage !== this.state.attrPage ||
         prevState.attrStatus !== this.state.attrStatus) &&
       this.attrListRef.current
     ) {
@@ -135,6 +141,7 @@ class ArtikelMerkmalePage extends PureComponent {
       (prevState.selectedAttributeId !== this.state.selectedAttributeId ||
         prevState.attributes !== this.state.attributes ||
         prevState.valFilter !== this.state.valFilter ||
+        prevState.valPage !== this.state.valPage ||
         prevState.attrStatus !== this.state.attrStatus) &&
       this.valListRef.current
     ) {
@@ -170,11 +177,16 @@ class ArtikelMerkmalePage extends PureComponent {
         const { oldIndex, newIndex } = evt;
         if (oldIndex === newIndex) return;
 
+        const offset = ((this.state.propPage || 1) - 1) * 8;
+        const realOld = offset + oldIndex;
+        const realNew = offset + newIndex;
+        if (realOld === realNew) return;
+
         this.setState(
           (prev) => {
             const next = [...prev.properties];
-            const [moved] = next.splice(oldIndex, 1);
-            next.splice(newIndex, 0, moved);
+            const [moved] = next.splice(realOld, 1);
+            next.splice(realNew, 0, moved);
             return { properties: next };
           },
           () => {
@@ -203,11 +215,16 @@ class ArtikelMerkmalePage extends PureComponent {
         const { oldIndex, newIndex } = evt;
         if (oldIndex === newIndex) return;
 
+        const offset = ((this.state.attrPage || 1) - 1) * 8;
+        const realOld = offset + oldIndex;
+        const realNew = offset + newIndex;
+        if (realOld === realNew) return;
+
         this.setState(
           (prev) => {
             const next = [...prev.attributes];
-            const [moved] = next.splice(oldIndex, 1);
-            next.splice(newIndex, 0, moved);
+            const [moved] = next.splice(realOld, 1);
+            next.splice(realNew, 0, moved);
             return { attributes: next };
           },
           () => {
@@ -236,6 +253,11 @@ class ArtikelMerkmalePage extends PureComponent {
         const { oldIndex, newIndex } = evt;
         if (oldIndex === newIndex) return;
 
+        const offset = ((this.state.valPage || 1) - 1) * 8;
+        const realOld = offset + oldIndex;
+        const realNew = offset + newIndex;
+        if (realOld === realNew) return;
+
         const currentAttr = this.state.attributes.find(
           (a) => a.id === this.state.selectedAttributeId
         );
@@ -243,8 +265,8 @@ class ArtikelMerkmalePage extends PureComponent {
 
         const values = currentAttr.values || [];
         const next = [...values];
-        const [moved] = next.splice(oldIndex, 1);
-        next.splice(newIndex, 0, moved);
+        const [moved] = next.splice(realOld, 1);
+        next.splice(realNew, 0, moved);
 
         const updatedAttributes = this.state.attributes.map((a) =>
           a.id === currentAttr.id ? { ...a, values: next } : a
@@ -319,7 +341,7 @@ class ArtikelMerkmalePage extends PureComponent {
   }
 
   handleSelectAttribute(attrId) {
-    this.setState({ selectedAttributeId: attrId, valFilter: '' });
+    this.setState({ selectedAttributeId: attrId, valFilter: '', valPage: 1 });
   }
 
   async handleCreateAttribute() {
@@ -468,24 +490,30 @@ class ArtikelMerkmalePage extends PureComponent {
               </Button>
             </Box>
 
-            <List dense disablePadding ref={this.attrListRef} sx={{ width: '100%' }}>
-              {filteredAttributes.length === 0 ? (
-                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                  {attrFilterTrimmed
-                    ? `Keine Treffer für „${attrFilterTrimmed}“.`
-                    : 'Noch keine Auswahl-Merkmale angelegt.'}
-                </Typography>
-              ) : (
-                filteredAttributes.map((a) => (
+            {filteredAttributes.length === 0 ? (
+              <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                {attrFilterTrimmed
+                  ? `Keine Treffer für „${attrFilterTrimmed}“.`
+                  : 'Noch keine Auswahl-Merkmale angelegt.'}
+              </Typography>
+            ) : (
+              <FillSpace
+                items={filteredAttributes}
+                totalCount={attributes.length}
+                minPageSize={8}
+                maxPageSize={8}
+                listRef={this.attrListRef}
+                onPageChange={(page) => this.setState({ attrPage: page })}
+                renderItem={(a) => (
                   <ArtikelMerkmalAuswahl
                     key={a.id}
                     attribute={a}
                     isSelected={selectedAttr?.id === a.id}
                     onSelect={() => this.handleSelectAttribute(a.id)}
                   />
-                ))
-              )}
-            </List>
+                )}
+              />
+            )}
           </Stack>
         </PanelTile>
 
@@ -531,22 +559,28 @@ class ArtikelMerkmalePage extends PureComponent {
                   </Button>
                 </Box>
 
-                <List dense disablePadding ref={this.valListRef} sx={{ width: '100%' }}>
-                  {filteredValues.length === 0 ? (
-                    <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                      {valFilterTrimmed
-                        ? `Keine Treffer für „${valFilterTrimmed}“.`
-                        : 'Noch keine Werte angelegt.'}
-                    </Typography>
-                  ) : (
-                    filteredValues.map((v) => (
+                {filteredValues.length === 0 ? (
+                  <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                    {valFilterTrimmed
+                      ? `Keine Treffer für „${valFilterTrimmed}“.`
+                      : 'Noch keine Werte angelegt.'}
+                  </Typography>
+                ) : (
+                  <FillSpace
+                    items={filteredValues}
+                    totalCount={selectedValues.length}
+                    minPageSize={8}
+                    maxPageSize={8}
+                    listRef={this.valListRef}
+                    onPageChange={(page) => this.setState({ valPage: page })}
+                    renderItem={(v) => (
                       <ArtikelMerkmalWert
                         key={v.id}
                         value={v}
                       />
-                    ))
-                  )}
-                </List>
+                    )}
+                  />
+                )}
               </>
             )}
           </Stack>
@@ -588,22 +622,28 @@ class ArtikelMerkmalePage extends PureComponent {
               </Button>
             </Box>
 
-            <List dense disablePadding ref={this.propListRef} sx={{ width: '100%' }}>
-              {filteredProperties.length === 0 ? (
-                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
-                  {propFilterTrimmed
-                    ? `Keine Treffer für „${propFilterTrimmed}“.`
-                    : 'Noch keine Text-Merkmale angelegt.'}
-                </Typography>
-              ) : (
-                filteredProperties.map((p) => (
+            {filteredProperties.length === 0 ? (
+              <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                {propFilterTrimmed
+                  ? `Keine Treffer für „${propFilterTrimmed}“.`
+                  : 'Noch keine Text-Merkmale angelegt.'}
+              </Typography>
+            ) : (
+              <FillSpace
+                items={filteredProperties}
+                totalCount={properties.length}
+                minPageSize={8}
+                maxPageSize={8}
+                listRef={this.propListRef}
+                onPageChange={(page) => this.setState({ propPage: page })}
+                renderItem={(p) => (
                   <ArtikelMerkmalText
                     key={p.id}
                     property={p}
                   />
-                ))
-              )}
-            </List>
+                )}
+              />
+            )}
           </Stack>
         </PanelTile>
       </PanelTileGrid>

src/routes/auftrag/bestellung.jsx

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { OrderList } from '../../components/manifest';
+import OrderList from '../../components/manifest/OrderList';
 
 class AuftragBestellungPage extends PureComponent {
   render() {

src/routes/kunde.jsx

@@ -1,156 +1,289 @@
-import { PureComponent } from 'react';
+import { PureComponent, createRef } from 'react';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from '../components/BackendError';
-import { RecordList } from 'dashgui/lists';
-import { entity as entityApi } from '../api';
-import entityAutomat from '../automats/entityAutomat';
-import customergroupAutomat from '../automats/customergroupAutomat';
-import { router } from '../appRouter';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import withNavigate from '../components/withNavigate';
 import { backendErrorFrom } from '../utils/backendError';
 import { notifyError } from '../utils/notify';
-import {
-  BLUE_PANEL,
-} from '../colors';
+import entityAutomat from '../automats/entityAutomat';
+import customergroupAutomat from '../automats/customergroupAutomat';
+import { Kunde } from '../components/kunde';
+import { BLUE_PANEL } from '../colors';
 
-function sortEntities(entities) {
-  return [...entities].sort((a, b) => {
-    const byName = String(a.name).localeCompare(String(b.name), 'de');
-    if (byName !== 0) return byName;
-    return String(a.firstName ?? '').localeCompare(String(b.firstName ?? ''), 'de');
-  });
+function getInitialParams(props) {
+  const searchParams =
+    typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+  const prefill =
+    props.location?.state?.name ??
+    props.location?.state?.newName ??
+    searchParams?.get('name') ??
+    searchParams?.get('newName') ??
+    '';
+  const returnTo =
+    props.location?.state?.returnTo ??
+    searchParams?.get('returnTo') ??
+    null;
+  return { prefill: prefill.trim(), returnTo };
 }
 
-function formatDate(value) {
-  if (!value) return '';
-  return new Intl.DateTimeFormat('de-DE', { dateStyle: 'medium' }).format(new Date(value));
+class KundeSearchField extends PureComponent {
+  constructor(props) {
+    super(props);
+    const initial = entityAutomat.state.filter || props.prefill || '';
+    this.state = {
+      input: initial,
+      submitting: false,
+    };
+    if (props.prefill && !entityAutomat.state.filter) {
+      entityAutomat.actions.filter(props.prefill);
+    }
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    this.unsub = entityAutomat.subscribe(this, (state) => ({
+      input: state.filter,
+    }));
+  }
+
+  componentWillUnmount() {
+    this.unsub?.();
+  }
+
+  onInputChange(input) {
+    this.setState({ input });
+    entityAutomat.actions.filter(input);
+  }
+
+  async handleSubmit() {
+    const raw = this.state.input.trim();
+    if (!raw || this.state.submitting) return;
+
+    this.setState({ submitting: true });
+    try {
+      await customergroupAutomat.actions.ensureLoaded();
+      const groups = customergroupAutomat.state.items ?? [];
+      const defaultGroup = groups.find((g) => g.editable !== false) ?? groups[0];
+      if (!defaultGroup) {
+        throw new Error('Keine Kundengruppe vorhanden.');
+      }
+
+      let name = raw;
+      let firstName = null;
+
+      if (raw.includes(',')) {
+        const parts = raw.split(',').map((p) => p.trim());
+        name = parts[0];
+        firstName = parts.slice(1).join(' ') || null;
+      } else if (raw.includes(' ') && !/gmbh|ag|kg|ug|inc|ltd|co\./i.test(raw)) {
+        const parts = raw.split(' ');
+        firstName = parts[0];
+        name = parts.slice(1).join(' ');
+      }
+
+      const body = {
+        customergroupId: defaultGroup.id,
+        name,
+      };
+      if (firstName) body.firstName = firstName;
+
+      const row = await entityAutomat.actions.create(body);
+      const displayName = [row.firstName, row.name].filter(Boolean).join(' ') || row.name || raw;
+      enqueueSnackbar(`Kunde „${displayName}“ angelegt.`, { variant: 'success' });
+      this.setState({ input: '', submitting: false });
+      entityAutomat.actions.filter('');
+      if (this.props.returnTo && this.props.navigate) {
+        this.props.navigate(this.props.returnTo);
+      }
+    } catch (err) {
+      this.setState({ submitting: false });
+      notifyError(err);
+    }
+  }
+
+  render() {
+    const { inputRef, returnTo, navigate } = this.props;
+    const { input, submitting } = this.state;
+    const canSubmit = Boolean(input.trim()) && !submitting;
+
+    return (
+      <PanelTileGrid>
+        <Box
+          ref={inputRef}
+          sx={{
+            gridColumn: {
+              xs: '1 / -1',
+              sm: 'span 2',
+              md: 'span 2',
+            },
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            pb: 2,
+          }}
+        >
+          {returnTo ? (
+            <Alert
+              severity="info"
+              sx={{ py: 0.5, alignItems: 'center' }}
+              action={
+                <Button
+                  color="inherit"
+                  size="small"
+                  onClick={() => navigate?.(returnTo)}
+                >
+                  Zurück
+                </Button>
+              }
+            >
+              {input
+                ? `Kundenname „${input}“ übernommen.`
+                : 'Neuen Kunden anlegen.'}
+            </Alert>
+          ) : null}
+
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <SingleLineTextEdit
+              sx={{ flex: 1 }}
+              size="small"
+              search
+              clear
+              placeholder="Kunde suchen oder anlegen…"
+              value={input}
+              disabled={submitting}
+              onChange={(next) => this.onInputChange(next)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  void this.handleSubmit();
+                }
+              }}
+            />
+            <Button
+              variant="contained"
+              disabled={!canSubmit}
+              onClick={() => void this.handleSubmit()}
+            >
+              Hinzufügen
+            </Button>
+          </Box>
+        </Box>
+      </PanelTileGrid>
+    );
+  }
 }
 
 class KundeListePage extends PureComponent {
   constructor(props) {
     super(props);
+    const initialEntities =
+      entityAutomat.state.filteredItems ?? entityAutomat.state.items ?? [];
     this.state = {
-      status: 'loading',
-      error: null,
-      entities: [],
-      groupsById: {},
-      busyId: null,
+      status: entityAutomat.state.status === 'ready' ? 'ready' : 'loading',
+      error: entityAutomat.state.error ? backendErrorFrom(entityAutomat.state.error) : null,
+      entities: initialEntities,
+      groups: customergroupAutomat.state.items ?? [],
+      filter: entityAutomat.state.filter ?? '',
     };
-    this._cancelled = false;
+    this.searchRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
-    this.handleCreate = this.handleCreate.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
   }
 
   componentDidMount() {
-    this._cancelled = false;
-    void this.load();
+    this.unsub = entityAutomat.subscribe(this, (state) => ({
+      entities: state.filteredItems ?? state.items,
+      filter: state.filter ?? '',
+      status: state.status,
+      error: state.error ? backendErrorFrom(state.error) : null,
+    }));
+
+    this.unsubGroups = customergroupAutomat.subscribe(this, (state) => ({
+      groups: state.items,
+    }));
+
+    if (entityAutomat.state.status !== 'ready') {
+      void entityAutomat.actions.load().catch((err) => notifyError(err));
+    }
+    if (customergroupAutomat.state.status !== 'ready') {
+      void customergroupAutomat.actions.load().catch(() => {});
+    }
   }
 
   componentWillUnmount() {
-    this._cancelled = true;
-  }
-
-  async load() {
-    this.setState({ status: 'loading', error: null });
-    try {
-      const [entities, groups] = await Promise.all([
-        entityAutomat.actions.ensureLoaded(),
-        customergroupAutomat.actions.ensureLoaded(),
-      ]);
-      if (this._cancelled) return;
-      const groupsById = Object.fromEntries(groups.map((row) => [row.id, row]));
-      this.setState({
-        status: 'ready',
-        entities: sortEntities(entities),
-        groupsById,
-      });
-    } catch (err) {
-      if (this._cancelled) return;
-      this.setState({ status: 'failed', error: backendErrorFrom(err) });
-    }
+    this.unsub?.();
+    this.unsubGroups?.();
   }
 
   handleRetry() {
-    void this.load();
-  }
-
-  handleCreate() {
-    void router.navigate('/kunde/neu');
+    void entityAutomat.actions.load().catch((err) => notifyError(err));
   }
 
   handleEdit(entity) {
-    void router.navigate(`/kunde/${entity.id}`);
-  }
-
-  groupName(customergroupId) {
-    return this.state.groupsById[customergroupId]?.name;
-  }
-
-  async handleDelete(entity) {
-    if (this.state.busyId != null) return;
-    const label = [entity.firstName, entity.name].filter(Boolean).join(' ');
-    if (!window.confirm(`Kunde „${label}“ wirklich löschen?`)) return;
-
-    this.setState({ busyId: entity.id });
-    try {
-      await entityApi.delete(entity.id);
-      const list = await entityAutomat.actions.reload();
-      if (this._cancelled) return;
-      this.setState({
-        entities: sortEntities(list),
-        busyId: null,
-      });
-      enqueueSnackbar('Kunde gelöscht.', { variant: 'success' });
-    } catch (err) {
-      if (this._cancelled) return;
-      notifyError(err);
-      this.setState({ busyId: null });
-    }
+    if (!entity?.id) return;
+    this.props.navigate?.(`/kunde/${entity.id}`);
   }
 
   render() {
-    const { status, error, entities, busyId } = this.state;
+    const { status, error, entities, groups, filter } = this.state;
+    const { prefill, returnTo } = getInitialParams(this.props);
+
+    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 columns = [
-      { key: 'number', label: 'Kundennummer' },
-      { key: 'name', label: 'Name' },
-      { key: 'firstName', label: 'Vorname' },
-      {
-        key: 'customergroupId',
-        label: 'Gruppe',
-        render: (row) => this.groupName(row.customergroupId),
-      },
-      {
-        key: 'createdAt',
-        label: 'Erstellt am',
-        render: (row) => formatDate(row.createdAt),
-      },
-    ];
-
-    const label = (row) =>
-      [row.firstName, row.name].filter(Boolean).join(' ') || String(row.number);
+    const trimmedFilter = filter?.trim() ?? '';
+    const groupsById = Object.fromEntries(groups.map((g) => [g.id, g]));
 
     return (
-      <RecordList
-        status={status}
-        error={<BackendError error={error} onRetry={this.handleRetry} />}
-        rows={entities}
-        columns={columns}
-        createLabel="Neuer Kunde"
-        onCreate={this.handleCreate}
-        onEdit={this.handleEdit}
-        onDelete={this.handleDelete}
-        deleteDisabled={busyId != null}
-        emptyMessage="Noch keine Kunden."
-        color={BLUE_PANEL}
-        getEditLabel={(row) => `„${label(row)}“ bearbeiten`}
-        getDeleteLabel={(row) => `„${label(row)}“ löschen`}
-      />
+      <>
+        <KundeSearchField
+          inputRef={this.searchRef}
+          prefill={prefill}
+          returnTo={returnTo}
+          navigate={this.props.navigate}
+        />
+        <PanelTileGrid>
+          <PanelTile wide={2} minHeight={0} color={BLUE_PANEL}>
+            <List dense disablePadding sx={{ width: '100%' }}>
+              {entities.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+                  {trimmedFilter
+                    ? `Keine Treffer für „${trimmedFilter}“.`
+                    : 'Noch keine Kunden angelegt.'}
+                </Typography>
+              ) : (
+                entities.map((entity) => (
+                  <Kunde
+                    key={entity.id}
+                    customer={entity}
+                    groupName={groupsById[entity.customergroupId]?.name}
+                    onEdit={this.handleEdit}
+                  />
+                ))
+              )}
+            </List>
+          </PanelTile>
+        </PanelTileGrid>
+      </>
     );
   }
 }
 
-export default KundeListePage;
+export { Kunde, KundeSearchField };
+export default withNavigate(KundeListePage);

src/routes/kunde/neu.jsx

@@ -17,16 +17,40 @@ import { notifyError } from '../../utils/notify';
 import {
   BLUE_PANEL,
 } from '../../colors';
+import withNavigate from '../../components/withNavigate';
+
+function getInitialPrefill(props) {
+  const searchParams =
+    typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+  const raw =
+    props.location?.state?.name ??
+    props.location?.state?.newName ??
+    searchParams?.get('name') ??
+    searchParams?.get('newName') ??
+    '';
+  const trimmed = raw.trim();
+  if (!trimmed) return { name: '', firstName: '' };
+  if (trimmed.includes(',')) {
+    const parts = trimmed.split(',').map((p) => p.trim());
+    return { name: parts[0] || '', firstName: parts.slice(1).join(' ') || '' };
+  }
+  if (trimmed.includes(' ') && !/gmbh|ag|kg|ug|inc|ltd|co\./i.test(trimmed)) {
+    const parts = trimmed.split(' ');
+    return { firstName: parts[0] || '', name: parts.slice(1).join(' ') || '' };
+  }
+  return { name: trimmed, firstName: '' };
+}
 
 class KundeNeuPage extends PureComponent {
   constructor(props) {
     super(props);
     const groups = customergroupAutomat.state.items ?? [];
+    const prefill = getInitialPrefill(props);
     this.state = {
       customergroupId: groups.length > 0 ? groups[0].id : null,
       number: '',
-      name: '',
-      firstName: '',
+      name: prefill.name,
+      firstName: prefill.firstName,
       saving: false,
     };
     this.handleGroupChange = this.handleGroupChange.bind(this);
@@ -157,4 +181,4 @@ class KundeNeuPage extends PureComponent {
   }
 }
 
-export default KundeNeuPage;
+export default withNavigate(KundeNeuPage);

test/capture.mjs

@@ -190,7 +190,7 @@ async function main() {
   await new Promise((resolve, reject) => {
     const build = spawn('npx', ['vite', 'build'], {
       cwd: FRONT_ROOT,
-      env: { ...process.env },
+      env: { ...process.env, NODE_ENV: 'production' },
       stdio: ['ignore', 'pipe', 'pipe'],
     });
     build.stdout.on('data', () => process.stdout.write('[build] '));
@@ -208,7 +208,7 @@ async function main() {
   const server = startProc(
     'npx',
     ['vite', 'preview', '--port', String(VITE_PORT), '--strictPort'],
-    { RIG_API_TARGET: `http://localhost:${DUMMY_PORT}` },
+    { RIG_API_TARGET: `http://localhost:${DUMMY_PORT}`, NODE_ENV: 'production' },
     'preview',
   );
   await waitForPort(VITE_PORT);
@@ -248,6 +248,7 @@ async function main() {
             height: viewport.height,
             settleMs: SETTLE_MS,
             dialog: route.dialog,
+            icons: route.icons,
           });
           const kb = (buf.length / 1024).toFixed(0);
 

test/cdp.mjs

@@ -161,7 +161,7 @@ async function httpJson(url, options = {}) {
  * Opens a new page target on the browser, navigates, waits for the app root
  * to contain content + network to quiet down, captures a PNG.
  */
-export async function capturePage(debugPort, url, file, { width, height, settleMs = 6000, dialog }) {
+export async function capturePage(debugPort, url, file, { width, height, settleMs = 6000, dialog, icons }) {
   // Chrome ≥136 requires PUT for /json/new.
   const target = await httpJson(`http://127.0.0.1:${debugPort}/json/new?${encodeURIComponent(url)}`, {
     method: 'PUT',
@@ -257,6 +257,64 @@ export async function capturePage(debugPort, url, file, { width, height, settleM
       }
     }
 
+    // Icon sheet: replace the page by a white sheet with every distinct icon
+    // (inline SVG) found on it, drawn in black.
+    if (icons) {
+      await session.send('Runtime.evaluate', {
+        expression: `(() => {
+          const seen = new Map();
+          for (const svg of document.querySelectorAll('svg')) {
+            const r = svg.getBoundingClientRect();
+            if (r.width > 64 || r.height > 64) continue; // skip illustrations / spinners
+            if (svg.closest('[role="progressbar"]')) continue;
+            const key = svg.getAttribute('data-testid') || svg.innerHTML;
+            if (!svg.innerHTML || seen.has(key)) continue;
+            seen.set(key, svg);
+          }
+          const style = document.createElement('style');
+          style.textContent = \`
+            #icon-sheet{position:absolute;inset:0;background:#fff;color:#000;padding:32px;
+              display:grid;grid-template-columns:repeat(7,144px);gap:36px 32px;align-content:flex-start}
+            #icon-sheet .cell{width:144px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
+            #icon-sheet svg{width:144px;height:144px;color:#000;fill:#000}
+            #icon-sheet svg *{fill:#000;color:#000}
+            #icon-sheet svg [stroke]:not([stroke=none]){stroke:#000}
+            #icon-sheet .label{font:16px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:600;color:#000}
+          \`;
+          document.head.appendChild(style);
+          document.getElementById('root').style.display = 'none';
+          const sheet = document.createElement('div');
+          sheet.id = 'icon-sheet';
+          const LABELS = [
+            'Brand', 'Stack', 'Attributes', 'Info', 'History', 'Edit', 'Customer',
+            'Save', 'Label', 'Order', 'Settings', 'Article', 'Chat', 'Delivery',
+            'Tree', 'Warehouse', 'Options', 'List', 'Details', 'Default', 'Tiles List',
+          ];
+          const sorted = [...seen.entries()].sort((a, b) => String(a[0]).localeCompare(String(b[0])));
+          let index = 0;
+          for (const [key, svg] of sorted) {
+            const cell = document.createElement('div');
+            cell.className = 'cell';
+            const clone = svg.cloneNode(true);
+            clone.removeAttribute('class');
+            clone.removeAttribute('style');
+            clone.removeAttribute('width');
+            clone.removeAttribute('height');
+            cell.appendChild(clone);
+            const label = document.createElement('span');
+            label.className = 'label';
+            label.textContent = LABELS[index] || svg.getAttribute('data-testid') || '';
+            index++;
+            cell.appendChild(label);
+            sheet.appendChild(cell);
+          }
+          document.body.style.background = '#fff';
+          document.body.appendChild(sheet);
+        })()`,
+      });
+      await wait(300);
+    }
+
     // Determinism: hide carets and scrollbars.
     await session.send('Runtime.evaluate', {
       expression: `(() => { const s = document.createElement('style');

test/routes.mjs

@@ -20,6 +20,8 @@ export const ROUTES = [
   { name: 'vorlagen', path: '/artikel/vorlagen' },
   { name: 'merkmale', path: '/artikel/merkmale' },
   { name: 'artikel-detail', path: '/artikel/ART-000001' },
+  // Same page, but the shot is a white sheet with every icon on it in black.
+  { name: 'artikel-detail-icons', path: '/artikel/ART-000001', icons: true },
   { name: 'lieferung', path: '/lieferung' },
   { name: 'lieferung-neu', path: '/lieferung/neu' },
   { name: 'lieferanten', path: '/lieferung/lieferanten' },