u

.agents/skills/backend/SKILL.md

@@ -7,7 +7,7 @@ description: >-
 
 # Dash API Routes Overview (All)
 
-Overview of all 191 API endpoints across all modules.
+Overview of all 192 API endpoints across all modules.
 
 ### Notation
 
@@ -239,7 +239,7 @@ _none_
 _none_
 - Returns: `200 { languageId: int, tree: { id: int, sort: int, posterminalIds: int[], parentId?: int|null, name?: str|null, slug?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null }[], articles: { id: int, sku: str, name: str, slug: str, track_stock: bool, optionsCount: int, articleListCount: int, childCount: int, net?: num|null, taxRate?: num|null, parentArticleId?: int|null, parentSku?: str|null, fullHash?: str|null, thumbW?: int|null, thumbH?: int|null, thumbHash?: str|null, brand?: T28|null }[] }`
 #### Delete category — `DELETE /category/{id}`
-- Params: `id: int`
+- Params: `id: int, query: recursive?: bool`
 - Returns: `204 void`
 #### Update category (rename or move) — `PATCH /category/{id}`
 - Params: `id: int, body: { name?: str, parentId?: int }`
@@ -517,6 +517,9 @@ _none_
 #### Update property name — `PATCH /propertyname/{id}`
 - Params: `id: int, body: { name?: str, sort?: int, exclusive?: bool }`
 - Returns: `200 { propertyname: T41 }`
+#### Receipt crash dump — `POST /public/telemetry/crash`
+- Params: `body: { content: any }`
+- Returns: `200 { ok: bool, filename: str }`
 #### List public articles — `GET /public/{companyId}/articles`
 - Params: `companyId: int, query: categoryId?: int, search?: str, limit?: int, offset?: int`
 - Returns: `200 { articles: { id: int, sku: str, name: str, slug: str, net: num|null, taxRate: num|null, gross: num|null, trackStock: bool, brand: { id: int|null, name: str }, fullHash: str|null, thumbW: int|null, thumbH: int|null, thumbHash: str|null }[] }`

src/api/index.js

@@ -285,8 +285,9 @@ export const article = {
    * DELETE /api/article/:sku → 204
    * Errors: 400 Article has children, 401, 403, 404 Article not found
    */
-  delete(sku) {
+  delete(sku, { cascade = false } = {}) {
-    return http(`/api/article/${encodeURIComponent(sku)}`, {
+    const qs = cascade ? '?cascade=true' : '';
+    return http(`/api/article/${encodeURIComponent(sku)}${qs}`, {
       method: 'DELETE',
     });
   },
@@ -744,9 +745,13 @@ export const category = {
     });
   },
 
-  /** DELETE /api/category/:id → 204 */
+  /**
-  delete(categoryId) {
+   * DELETE /api/category/:id → 204
-    return http(`/api/category/${categoryId}`, { method: 'DELETE' });
+   * Query: ?recursive=true (cascades deletion of subcategories and articles)
+   */
+  delete(categoryId, { recursive = false } = {}) {
+    const qs = recursive ? '?recursive=true' : '';
+    return http(`/api/category/${categoryId}${qs}`, { method: 'DELETE' });
   },
 
   /**

src/automats/categoryAutomat.js

@@ -44,6 +44,8 @@ import {
   parseCategoryTreeResponse,
   normalizeCategoryNode,
   cleanCategorySlugPath,
+  getCategoryChildren,
+  getCategoryDescendantIds,
 } from '../utils/categoryUtils';
 
 /**
@@ -307,6 +309,35 @@ const actions = {
     return categoryId;
   },
 
+  /**
+   * Delete a category and all its descendants recursively.
+   * Calls DELETE /api/category/:id?recursive=true.
+   *
+   * @param {number|string} categoryId
+   */
+  async deleteCategoryRecursive(categoryId) {
+    const { categories, rootCategoryId } = categoryAutomat.state;
+
+    if (rootCategoryId != null && String(categoryId) === String(rootCategoryId)) {
+      throw new Error('Root-Kategorie kann nicht gelöscht werden');
+    }
+
+    const removedIds = getCategoryDescendantIds(categories, categoryId);
+
+    await categoryApi.delete(categoryId, { recursive: true });
+
+    if (categories) {
+      const next = { ...categories };
+      for (const id of removedIds) {
+        delete next[String(id)];
+      }
+      categoryAutomat.setState({ categories: next });
+      refreshCategoryViewChildren(next);
+    }
+
+    return categoryId;
+  },
+
   /**
    * Toggle the POS flag on a category.
    * @param {{ categoryId: number|string, pos: boolean }} param0

src/components/CompanySetupDialog.jsx

@@ -22,7 +22,7 @@ import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import TextField from '@mui/material/TextField';
+import TextInput from './TextInput';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
@@ -331,7 +331,7 @@ class CompanySetupDialog extends Component {
                     <Typography variant="subtitle2">Neues Unternehmen anlegen</Typography>
                   ) : null}
 
-                  <TextField
+                  <TextInput
                     fullWidth
                     required
                     size="small"
@@ -339,7 +339,6 @@ class CompanySetupDialog extends Component {
                     value={name}
                     disabled={busy}
                     onChange={(e) => this.setState({ name: e.target.value })}
-                    autoComplete="organization"
                     autoFocus={!hasCompanies}
                   />
 
@@ -361,7 +360,7 @@ class CompanySetupDialog extends Component {
                   </FormControl>
 
                   <Stack direction="row" spacing={2}>
-                    <TextField
+                    <TextInput
                       fullWidth
                       required
                       size="small"
@@ -378,7 +377,7 @@ class CompanySetupDialog extends Component {
                         htmlInput: { min: 0, max: 100, step: 0.01, required: true },
                       }}
                     />
-                    <TextField
+                    <TextInput
                       fullWidth
                       required
                       size="small"
@@ -460,7 +459,7 @@ class CompanySetupDialog extends Component {
                                   </Box>
                                 </TableCell>
                                 <TableCell>
-                                  <TextField
+                                  <TextInput
                                     size="small"
                                     value={cfg.prefix}
                                     disabled={busy}
@@ -470,7 +469,7 @@ class CompanySetupDialog extends Component {
                                   />
                                 </TableCell>
                                 <TableCell>
-                                  <TextField
+                                  <TextInput
                                     size="small"
                                     type="number"
                                     value={cfg.padding}
@@ -480,7 +479,7 @@ class CompanySetupDialog extends Component {
                                   />
                                 </TableCell>
                                 <TableCell>
-                                  <TextField
+                                  <TextInput
                                     size="small"
                                     type="number"
                                     value={cfg.next}

src/components/brand/ArtikelMarke.jsx

@@ -0,0 +1,124 @@
+import { PureComponent } from 'react';
+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 CopyrightIcon from '@mui/icons-material/Copyright';
+import ImageSearchIcon from '@mui/icons-material/ImageSearch';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import BrandThumb from './BrandThumb';
+
+class ArtikelMarke extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      draft: props.brand?.name ?? '',
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.brand?.name !== this.props.brand?.name) {
+      this.setState({ draft: this.props.brand?.name ?? '' });
+    } else if (prevProps.disabled && !this.props.disabled) {
+      if (this.state.draft !== this.props.brand?.name) {
+        this.setState({ draft: this.props.brand?.name ?? '' });
+      }
+    }
+  }
+
+  handleChange = (next) => {
+    this.setState({ draft: next });
+    this.props.onChange?.(next, this.props.brand);
+  };
+
+  handleBlur = () => {
+    const { onRename, brand } = this.props;
+    const draft = this.state.draft.trim();
+    if (!draft) {
+      this.setState({ draft: brand?.name ?? '' });
+      return;
+    }
+    if (draft !== brand?.name) {
+      onRename?.(brand, draft);
+    }
+  };
+
+  handleKeyDown = (event) => {
+    const { brand } = this.props;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.setState({ draft: brand?.name ?? '' });
+      event.target.blur();
+    }
+  };
+
+  handleSearchLogo = () => {
+    const { onSearchLogo, brand } = this.props;
+    onSearchLogo?.(brand);
+  };
+
+  handleDelete = () => {
+    const { onDelete, brand } = this.props;
+    onDelete?.(brand);
+  };
+
+  render() {
+    const { brand, disabled, sx } = this.props;
+    const { draft } = this.state;
+    const name = brand?.name ?? '';
+
+    return (
+      <ListItem
+        disableGutters
+        sx={{ gap: 1, py: 0.75, alignItems: 'center', ...sx }}
+      >
+        <BrandThumb
+          brand={brand}
+          size={22}
+          fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
+        />
+        <SingleLineTextEdit
+          size="small"
+          label=""
+          value={draft}
+          disabled={disabled}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          sx={{ flex: 1 }}
+        />
+        <Tooltip title="Logo suchen">
+          <span>
+            <IconButton
+              size="small"
+              aria-label={`Logo für „${name}" suchen`}
+              disabled={disabled}
+              onClick={this.handleSearchLogo}
+            >
+              <ImageSearchIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title="Löschen">
+          <span>
+            <IconButton
+              edge="end"
+              size="small"
+              aria-label={`„${name}" löschen`}
+              disabled={disabled}
+              onClick={this.handleDelete}
+            >
+              <DeleteOutlinedIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </ListItem>
+    );
+  }
+}
+
+export default ArtikelMarke;

src/components/brand/ArtikelMarkenTable.jsx

@@ -0,0 +1,44 @@
+import { PureComponent } from 'react';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import ArtikelMarke from './ArtikelMarke';
+
+class ArtikelMarkenTable extends PureComponent {
+  render() {
+    const {
+      brands = [],
+      busyKey,
+      disabled,
+      onRename,
+      onSearchLogo,
+      onDelete,
+      emptyMessage = 'Noch keine Marken angelegt.',
+      sx,
+    } = this.props;
+
+    const isBusy = disabled || busyKey != null;
+
+    return (
+      <List dense disablePadding sx={sx}>
+        {brands.length === 0 ? (
+          <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+            {emptyMessage}
+          </Typography>
+        ) : (
+          brands.map((b) => (
+            <ArtikelMarke
+              key={b.id}
+              brand={b}
+              disabled={isBusy}
+              onRename={onRename}
+              onSearchLogo={onSearchLogo}
+              onDelete={onDelete}
+            />
+          ))
+        )}
+      </List>
+    );
+  }
+}
+
+export default ArtikelMarkenTable;

src/components/brand/index.js

@@ -1,3 +1,5 @@
 export { default as BrandThumb, extractBrandThumbInfo } from './BrandThumb';
 export { default as BrandLabel } from './BrandLabel';
 export { default as BrandImageSearchDialog } from './BrandImageSearchDialog';
+export { default as ArtikelMarke } from './ArtikelMarke';
+export { default as ArtikelMarkenTable } from './ArtikelMarkenTable';

src/components/category/CategoryTree.jsx

@@ -515,7 +515,11 @@ export default class CategoryTree extends PureComponent {
     if (!deleteNode) return;
     this.setState({ isSubmitting: true });
     try {
-      await categoryAutomat.actions.deleteCategory(deleteNode.id);
+      if (getCategoryChildren(this.state.categories, deleteNode.id).length > 0) {
+        await categoryAutomat.actions.deleteCategoryRecursive(deleteNode.id);
+      } else {
+        await categoryAutomat.actions.deleteCategory(deleteNode.id);
+      }
       enqueueSnackbar(`Kategorie „${deleteNode.name}“ gelöscht.`, { variant: 'success' });
       if (this.props.selectedId != null && String(this.props.selectedId) === String(deleteNode.id)) {
         this.props.onSelect?.(deleteNode.parentId ?? rootCategoryId);

src/components/settings/CompanySettingsPanel.jsx

@@ -7,7 +7,7 @@ import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import InputAdornment from '@mui/material/InputAdornment';
 import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import TextInput from '../TextInput';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { enqueueSnackbar } from 'notistack';
@@ -178,7 +178,7 @@ export default class CompanySettingsPanel extends Component {
           </FormControl>
 
           <Stack direction="row" spacing={2}>
-            <TextField
+            <TextInput
               fullWidth
               required
               size="small"
@@ -195,7 +195,7 @@ export default class CompanySettingsPanel extends Component {
                 htmlInput: { min: 0, max: 100, step: 0.01, required: true },
               }}
             />
-            <TextField
+            <TextInput
               fullWidth
               required
               size="small"

src/components/settings/ImportExportSettingsPanel.jsx

@@ -23,6 +23,7 @@ import { company } from '../../api';
 import categoryAutomat from '../../automats/categoryAutomat';
 import articleIndexAutomat from '../../automats/articleIndexAutomat';
 import brandAutomat from '../../automats/brandAutomat';
+import { orderAutomat } from '../../automats/orderAutomat';
 
 function formatBytes(bytes) {
   if (bytes == null || isNaN(bytes) || bytes === 0) return '0 B';
@@ -47,6 +48,7 @@ const PHASE_LABELS = {
   articles: 'Artikel werden abgeglichen…',
   variants: 'Varianten werden verknüpft…',
   images: 'Bilder werden optimiert…',
+  orders: 'Aufträge werden importiert…',
 };
 
 const EXPORT_OPTIONS = [
@@ -299,6 +301,9 @@ export default class ImportExportSettingsPanel extends Component {
             void categoryAutomat.actions.loadTree();
             void articleIndexAutomat.actions.reload?.();
             void brandAutomat.actions.load?.();
+            if (stats?.ordersImported) {
+              void orderAutomat.actions.reload?.();
+            }
           },
           onError: (message) => {
             this.setState({
@@ -628,6 +633,27 @@ export default class ImportExportSettingsPanel extends Component {
                       </Typography>
                     </Box>
                   )}
+                  {importStats.ordersImported != null && (
+                    <Box
+                      sx={{
+                        p: 1.5,
+                        bgcolor: 'background.paper',
+                        borderRadius: 1.5,
+                        border: '1px solid',
+                        borderColor: 'divider',
+                      }}
+                    >
+                      <Typography variant="caption" color="text.secondary">
+                        Aufträge
+                      </Typography>
+                      <Typography variant="h6" fontWeight={700}>
+                        {importStats.ordersImported}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary" display="block">
+                        {importStats.ordersSkipped ? `+${importStats.ordersSkipped} übersprungen` : 'importiert'}
+                      </Typography>
+                    </Box>
+                  )}
                 </Box>
               </Box>
             )}

src/components/settings/NumberSettingsPanel.jsx

@@ -10,7 +10,7 @@ import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import TextField from '@mui/material/TextField';
+import TextInput from '../TextInput';
 import Typography from '@mui/material/Typography';
 import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import { enqueueSnackbar } from 'notistack';
@@ -212,16 +212,15 @@ export default class NumberSettingsPanel extends Component {
                     <Typography variant="body2">{row.type}</Typography>
                   </TableCell>
                   <TableCell>
-                    <TextField
+                    <TextInput
                       size="small"
                       value={draft.prefix}
                       disabled={draft.busy}
                       onChange={(e) => this.handleChange(row.id, 'prefix', e.target.value)}
-                      autoComplete="off"
                     />
                   </TableCell>
                   <TableCell>
-                    <TextField
+                    <TextInput
                       size="small"
                       type="number"
                       value={draft.padding}
@@ -231,7 +230,7 @@ export default class NumberSettingsPanel extends Component {
                     />
                   </TableCell>
                   <TableCell>
-                    <TextField
+                    <TextInput
                       size="small"
                       type="number"
                       value={draft.next}

src/components/tiles/ArticleTile.jsx

@@ -22,7 +22,7 @@ import {
   SCRIM_LABEL,
   SCRIM_TILE,
   TEXT_GLOW_DARK,
-  VEIL_MUTED,
+  VEIL_SUBTLE,
   WHITE,
 } from '../../colors';
 
@@ -447,21 +447,19 @@ export class ArticleTile extends Tile {
               px: 1,
               py: '2px',
               my: 0.25,
-              bgcolor: VEIL_MUTED,
+              bgcolor: VEIL_SUBTLE,
-              backdropFilter: 'blur(4px)',
+              backdropFilter: 'blur(2px)',
-              WebkitBackdropFilter: 'blur(4px)',
+              WebkitBackdropFilter: 'blur(2px)',
             }}
           >
             <Typography
               variant="body2"
               fontWeight={650}
               sx={{
-                color: INK_STRONG,
                 lineHeight: 1.2,
                 height: '2.4em',
                 px: '4px',
                 mx: '-4px',
-                textShadow: '0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7)',
                 display: '-webkit-box',
                 WebkitLineClamp: 2,
                 WebkitBoxOrient: 'vertical',

src/components/tiles/CategoryTile.jsx

@@ -9,6 +9,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import DeleteForeverOutlinedIcon from '@mui/icons-material/DeleteForeverOutlined';
 import { getThumbHashDataUrl, isImageLoaded, markImageLoaded } from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
@@ -28,6 +29,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
   const isTerminalMode = settingsTab >= 0 && settingsTab < terminalCount;
   const isPhotoMode = settingsTab === -2;
   const isDeleteMode = settingsTab === -3;
+  const isRecursiveDeleteMode = settingsTab === -4;
 
   const handleSx = {
     position: 'absolute',
@@ -69,7 +71,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
           ...handleSx,
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          color: isDeleteMode
+          color: isDeleteMode || isRecursiveDeleteMode
             ? 'error.main'
             : isTerminalMode || isPhotoMode
               ? 'primary.main'
@@ -82,6 +84,8 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
           <PhotoCameraIcon sx={{ fontSize: 28 }} />
         ) : isDeleteMode ? (
           <DeleteOutlinedIcon sx={{ fontSize: 28 }} />
+        ) : isRecursiveDeleteMode ? (
+          <DeleteForeverOutlinedIcon sx={{ fontSize: 28 }} />
         ) : (
           <SettingsIcon sx={{ fontSize: 28 }} />
         )}
@@ -109,7 +113,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
  * Middle row (1/3): gray band — TextField or terminal toggle.
  */
 function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, fullHash }) {
-  const isActionTab = settingsTab === -2 || settingsTab === -3;
+  const isActionTab = settingsTab === -2 || settingsTab === -3 || settingsTab === -4;
   const fillSx = {
     width: '100%',
     height: '100%',
@@ -121,7 +125,7 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
     ...(isActionTab
       ? {
         '&:hover': {
-          bgcolor: settingsTab === -3 ? RED_TINT : 'grey.400',
+          bgcolor: (settingsTab === -3 || settingsTab === -4) ? RED_TINT : 'grey.400',
         },
       }
       : {}),
@@ -188,6 +192,24 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
     );
   }
 
+  // Show recursive category deletion UI when on recursive delete tab
+  if (settingsTab === -4) {
+    return (
+      <Box sx={fillSx}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <DeleteForeverOutlinedIcon sx={{ fontSize: 20, color: 'error.main' }} />
+          <Typography
+            variant="caption"
+            noWrap
+            sx={{ maxWidth: 120, color: 'error.main', fontWeight: 600 }}
+          >
+            Rekursiv löschen
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+
   return (
     <Box sx={fillSx}>
       {nameInput}
@@ -277,7 +299,7 @@ class CategoryBackdrop extends PureComponent {
  *               lower half = gray band with chevrons + delete
  */
 export class CategoryTile extends Component {
-  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, 0..n-1 = terminal index
+  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, -4 = delete recursive, 0..n-1 = terminal index
 
   handleClick = () => {
     this.props.onClick?.();
@@ -303,6 +325,8 @@ export class CategoryTile extends Component {
         nextTab = -2;
       } else if (prev.settingsTab === -2) {
         nextTab = -3;
+      } else if (prev.settingsTab === -3) {
+        nextTab = -4;
       } else {
         nextTab = -1;
       }
@@ -312,7 +336,7 @@ export class CategoryTile extends Component {
 
   handleMiddleBandClick = () => {
     const { settingsTab } = this.state;
-    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete } = this.props;
+    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete, onDeleteRecursive } = this.props;
     if (settingsTab === -2) {
       if (fullHash) {
         onPhotoDelete?.();
@@ -321,6 +345,8 @@ export class CategoryTile extends Component {
       }
     } else if (settingsTab === -3) {
       onDelete?.();
+    } else if (settingsTab === -4) {
+      onDeleteRecursive?.();
     }
   };
 
@@ -373,6 +399,7 @@ export class CategoryTile extends Component {
       onPlacementClick,
       onOpen,
       onDelete,
+      onDeleteRecursive,
       ...rest
     } = this.props;
     const { settingsTab } = this.state;
@@ -399,7 +426,10 @@ export class CategoryTile extends Component {
             bottom: '33.33%',
             left: 0,
             right: 0,
-            cursor: settingsTab === -2 || settingsTab === -3 ? 'pointer' : 'default',
+            cursor:
+              settingsTab === -2 || settingsTab === -3 || settingsTab === -4
+                ? 'pointer'
+                : 'default',
           }}
         >
           <MiddleBand

src/routes/artikel/kategorien.jsx

@@ -352,6 +352,17 @@ class ArtikelKategorienPage extends PureComponent {
     }
   };
 
+  handleDeleteCategoryRecursive = async (cat) => {
+    const name = cat.name || `Kategorie #${cat.id}`;
+    if (!window.confirm(`Kategorie „${name}“ und alle Unterkategorien wirklich rekursiv löschen?`)) return;
+    try {
+      await categoryAutomat.actions.deleteCategoryRecursive(cat.id);
+      enqueueSnackbar(`Kategorie „${name}“ und alle Unterkategorien gelöscht.`, { variant: 'success' });
+    } catch (err) {
+      notifyError(err);
+    }
+  };
+
   render() {
     const {
       companyId,
@@ -495,6 +506,7 @@ class ArtikelKategorienPage extends PureComponent {
                       .catch(notifyError);
                   },
                   onDelete: () => this.handleDeleteCategory(item),
+                  onDeleteRecursive: () => this.handleDeleteCategoryRecursive(item),
                   nameInput: (
                     <TextField
                       value={draftName}

src/routes/artikel/marken.jsx

@@ -2,14 +2,6 @@ import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import IconButton from '@mui/material/IconButton';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import CopyrightIcon from '@mui/icons-material/Copyright';
-import ImageSearchIcon from '@mui/icons-material/ImageSearch';
 import BackendError from '../../components/BackendError';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
@@ -18,24 +10,22 @@ import { notifyError } from '../../utils/notify';
 import { setLastArticleSku } from '../../automats';
 import brandAutomat from '../../automats/brandAutomat';
 import { enqueueSnackbar } from 'notistack';
-import { BrandThumb, BrandImageSearchDialog } from '../../components/brand';
+import {
+  BrandImageSearchDialog,
+  ArtikelMarke,
+  ArtikelMarkenTable,
+} from '../../components/brand';
 import {
   PURPLE_PANEL,
 } from '../../colors';
 
-function draftsFrom(brands) {
-  return Object.fromEntries(brands.map((b) => [b.id, b.name]));
-}
-
 class ArtikelMarkenPage extends PureComponent {
   constructor(props) {
     super(props);
-    const initialBrands = brandAutomat.state.brands || [];
     this.state = {
       status: brandAutomat.state.status === 'succeeded' ? 'ready' : 'loading',
       error: brandAutomat.state.error ? backendErrorFrom({ message: brandAutomat.state.error }) : null,
-      brands: initialBrands,
+      brands: brandAutomat.state.brands || [],
-      drafts: draftsFrom(initialBrands),
       newName: '',
       busyKey: null,
       searchBrand: null,
@@ -44,6 +34,9 @@ class ArtikelMarkenPage extends PureComponent {
     this.handleCreate = this.handleCreate.bind(this);
     this.handleRetry = this.handleRetry.bind(this);
     this.loadBrands = this.loadBrands.bind(this);
+    this.handleRename = this.handleRename.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleSearchLogo = this.handleSearchLogo.bind(this);
   }
 
   componentDidMount() {
@@ -70,20 +63,10 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   applyBrands(brands) {
-    this.setState((prev) => {
+    this.setState({
-      const currentDrafts = prev.drafts || {};
+      status: 'ready',
-      const nextDrafts = { ...draftsFrom(brands) };
+      error: null,
-      for (const b of brands) {
+      brands,
-        if (prev.busyKey !== b.id && currentDrafts[b.id] !== undefined) {
-          nextDrafts[b.id] = currentDrafts[b.id];
-        }
-      }
-      return {
-        status: 'ready',
-        error: null,
-        brands,
-        drafts: nextDrafts,
-      };
     });
   }
 
@@ -105,6 +88,10 @@ class ArtikelMarkenPage extends PureComponent {
     void this.loadBrands();
   }
 
+  handleSearchLogo(brand) {
+    this.setState({ searchBrand: brand });
+  }
+
   async handleCreate() {
     const name = this.state.newName.trim();
     if (!name || this.state.busyKey != null) return;
@@ -122,29 +109,20 @@ class ArtikelMarkenPage extends PureComponent {
     }
   }
 
-  async handleRename(brand) {
+  async handleRename(brand, draft) {
-    const draft = String(this.state.drafts[brand.id] ?? '').trim();
+    const nextName = String(draft ?? '').trim();
-    if (!draft) {
+    if (!nextName || nextName === brand.name || this.state.busyKey != null) return;
-      this.setState((prev) => ({
-        drafts: { ...prev.drafts, [brand.id]: brand.name },
-      }));
-      return;
-    }
-    if (draft === brand.name || this.state.busyKey != null) return;
 
     this.setState({ busyKey: brand.id });
     try {
-      await brandAutomat.actions.upsert({ name: draft });
+      await brandAutomat.actions.upsert({ name: nextName });
       if (this._cancelled) return;
       this.setState({ busyKey: null });
       enqueueSnackbar('Marke gespeichert.', { variant: 'success' });
     } catch (err) {
       if (this._cancelled) return;
       notifyError(err);
-      this.setState((prev) => ({
+      this.setState({ busyKey: null });
-        busyKey: null,
-        drafts: { ...prev.drafts, [brand.id]: brand.name },
-      }));
     }
   }
 
@@ -166,7 +144,7 @@ class ArtikelMarkenPage extends PureComponent {
   }
 
   render() {
-    const { status, error, brands, drafts, newName, busyKey } = this.state;
+    const { status, error, brands, newName, busyKey } = this.state;
     const busy = busyKey != null;
 
     if (status === 'loading') {
@@ -184,78 +162,13 @@ class ArtikelMarkenPage extends PureComponent {
     return (
       <PanelTileGrid>
         <PanelTile wide={2} minHeight={280} color={PURPLE_PANEL}>
-          <List dense disablePadding>
+          <ArtikelMarkenTable
-            {brands.length === 0 ? (
+            brands={brands}
-              <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
+            busyKey={busyKey}
-                Noch keine Marken angelegt.
+            onRename={this.handleRename}
-              </Typography>
+            onSearchLogo={this.handleSearchLogo}
-            ) : (
+            onDelete={this.handleDelete}
-              brands.map((b) => (
+          />
-                <ListItem
-                  key={b.id}
-                  disableGutters
-                  sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
-                >
-                  <BrandThumb
-                    brand={b}
-                    size={22}
-                    fallback={<CopyrightIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />}
-                  />
-                  <SingleLineTextEdit
-                    size="small"
-                    label=""
-                    value={drafts[b.id] ?? ''}
-                    disabled={busy}
-                    onChange={(next) =>
-                      this.setState((prev) => ({
-                        drafts: { ...prev.drafts, [b.id]: next },
-                      }))
-                    }
-                    onBlur={() => void this.handleRename(b)}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
-                        event.preventDefault();
-                        event.target.blur();
-                      }
-                      if (event.key === 'Escape') {
-                        event.preventDefault();
-                        this.setState((prev) => ({
-                          drafts: { ...prev.drafts, [b.id]: b.name },
-                        }));
-                        event.target.blur();
-                      }
-                    }}
-                    sx={{ flex: 1 }}
-                  />
-                  <Tooltip title="Logo suchen">
-                    <span>
-                      <IconButton
-                        size="small"
-                        aria-label={`Logo für „${b.name}" suchen`}
-                        disabled={busy}
-                        onClick={() => this.setState({ searchBrand: b })}
-                      >
-                        <ImageSearchIcon fontSize="small" />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                  <Tooltip title="Löschen">
-                    <span>
-                      <IconButton
-                        edge="end"
-                        size="small"
-                        aria-label={`„${b.name}" löschen`}
-                        disabled={busy}
-                        onClick={() => void this.handleDelete(b)}
-                      >
-                        <DeleteOutlinedIcon fontSize="small" />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                </ListItem>
-              ))
-            )}
-          </List>
 
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2 }}>
             <SingleLineTextEdit
@@ -293,4 +206,5 @@ class ArtikelMarkenPage extends PureComponent {
   }
 }
 
+export { ArtikelMarke, ArtikelMarkenTable };
 export default ArtikelMarkenPage;