u

src/api/index.js

@@ -244,11 +244,11 @@ export const article = {
   },
 
   /** POST /api/article → 201 { article } */
-  create({ parentId, name, track_stock }) {
+  create({ categoryId, name, track_stock }) {
     return http('/api/article', {
       method: 'POST',
       body: {
-        parentId: Number(parentId),
+        categoryId: Number(categoryId),
         name,
         ...(track_stock !== undefined ? { track_stock: Boolean(track_stock) } : {}),
       },
@@ -2234,4 +2234,3 @@ export default {
   globalHistory,
 };
 
-

src/automats/categoryAutomat.js

@@ -208,7 +208,7 @@ const actions = {
    * @param {{ parentId: number|string, name: string }} param0
    */
   async createArticle({ parentId, name }) {
-    const res = await articleApi.create({ parentId, name });
+    const res = await articleApi.create({ categoryId: parentId, name });
     const created = res.article;
     if (created) appendArticlesToCategoryViews({ categoryId: parentId, articles: [created] });
     return created;
@@ -223,7 +223,7 @@ const actions = {
     if (list.length === 0) throw new Error('Keine Namen übergeben.');
     const created = [];
     for (const name of list) {
-      const res = await articleApi.create({ parentId, name });
+      const res = await articleApi.create({ categoryId: parentId, name });
       if (res.article) created.push(res.article);
     }
     appendArticlesToCategoryViews({ categoryId: parentId, articles: created });

src/automats/sseAutomat.js

@@ -37,12 +37,16 @@ import supplierAutomat from './supplierAutomat';
  * @typedef {Object} SseState
  * @property {'disconnected'|'connecting'|'connected'|'error'} status Connection state.
  * @property {string|null} companyId Company the stream is bound to.
+ * @property {Array<{id: number, type: string, data: string, lastEventId: string, time: number}>} events Recent stream events.
  */
 
+const EVENT_HISTORY_LIMIT = 200;
+
 /** @type {SseState} */
 const initialState = {
   status: 'disconnected',
   companyId: null,
+  events: [],
 };
 
 /** Event name prefix for per-article signals. */
@@ -54,9 +58,11 @@ let eventSource = null;
 
 /**
  * Handlers for statically named events (`category`, `articles`, …).
- * @type {Map<string, Set<(event: MessageEvent) => void>>}
+ * @type {Map<string, Set<{handler: (event: MessageEvent) => void, detach: (() => void)|null}>>}
  */
 const handlers = new Map();
+let nextEventId = 0;
+const seenEvents = new WeakSet();
 
 /**
  * Handlers per watched SKU, so one `article-<sku>` listener is attached while
@@ -65,6 +71,31 @@ const handlers = new Map();
  */
 const articleWatchers = new Map();
 
+function recordEvent(event) {
+  if (seenEvents.has(event)) return;
+  seenEvents.add(event);
+
+  const entry = {
+    id: ++nextEventId,
+    type: event.type,
+    data: typeof event.data === 'string' ? event.data : '',
+    lastEventId: event.lastEventId ?? '',
+    time: Date.now(),
+  };
+  sseAutomat.setState((state) => ({
+    events: [...state.events.slice(-(EVENT_HISTORY_LIMIT - 1)), entry],
+  }));
+}
+
+function addTrackedListener(es, type, handler) {
+  const listener = (event) => {
+    recordEvent(event);
+    handler(event);
+  };
+  es.addEventListener(type, listener);
+  return () => es.removeEventListener(type, listener);
+}
+
 function disconnect() {
   if (!eventSource) return;
   eventSource.close();
@@ -80,8 +111,8 @@ function disconnect() {
  */
 function attachHandlers(es) {
   for (const [event, set] of handlers) {
-    for (const handler of set) {
+    for (const entry of set) {
-      es.addEventListener(event, handler);
+      entry.detach = addTrackedListener(es, event, entry.handler);
     }
   }
   for (const [sku] of articleWatchers) {
@@ -100,7 +131,8 @@ function attachHandlers(es) {
  * @returns {void}
  */
 function attachArticleListener(sku) {
-  eventSource?.addEventListener(`${ARTICLE_EVENT_PREFIX}${sku}`, (event) => {
+  if (!eventSource) return;
+  addTrackedListener(eventSource, `${ARTICLE_EVENT_PREFIX}${sku}`, (event) => {
     const set = articleWatchers.get(sku);
     if (!set || set.size === 0) return;
     const changed = String(event.type).slice(ARTICLE_EVENT_PREFIX.length);
@@ -121,7 +153,7 @@ function connect() {
   const es = new EventSource(url, { withCredentials: true });
 
   // Category tree changed: refresh the tree and every open category view.
-  es.addEventListener('category', () => {
+  addTrackedListener(es, 'category', () => {
     void categoryAutomat.actions.loadTree().catch((err) => {
       console.error('[sse] category tree refresh failed', err);
     });
@@ -129,44 +161,47 @@ function connect() {
   });
 
   // Article index changed: refresh the index and open category views.
-  es.addEventListener('articles', () => {
+  addTrackedListener(es, 'articles', () => {
     invalidateAllCategoryViews();
     void articleIndexAutomat.actions.reload().catch((err) => {
       console.error('[sse] article index refresh failed', err);
     });
   });
 
-  es.addEventListener('warehouse', () => {
+  addTrackedListener(es, 'warehouse', () => {
     void warehouseAutomat.actions.reload().catch((err) => {
       console.error('[sse] warehouse refresh failed', err);
     });
   });
 
-  es.addEventListener('attributename', () => {
+  addTrackedListener(es, 'attributename', () => {
     void attributeAutomat.actions.load().catch((err) => {
       console.error('[sse] attributename refresh failed', err);
     });
   });
 
-  es.addEventListener('propertyname', () => {
+  addTrackedListener(es, 'propertyname', () => {
     void propertyAutomat.actions.load().catch((err) => {
       console.error('[sse] propertyname refresh failed', err);
     });
   });
 
-  es.addEventListener('supplier', () => {
+  addTrackedListener(es, 'supplier', () => {
     void supplierAutomat.actions.reload().catch((err) => {
       console.error('[sse] supplier refresh failed', err);
     });
   });
 
-  es.addEventListener('open', () => {
+  addTrackedListener(es, 'open', () => {
     sseAutomat.setState({ status: 'connected' });
   });
 
+  addTrackedListener(es, 'message', () => {});
+
   // EventSource reconnects on its own; only surface the state.
   es.onerror = () => {
     console.error('[sse] event stream error');
+    recordEvent({ type: 'error', data: '', lastEventId: '' });
     sseAutomat.setState({ status: 'error' });
   };
 
@@ -186,6 +221,10 @@ const actions = {
     connect();
   },
 
+  clearEvents() {
+    sseAutomat.setState({ events: [] });
+  },
+
   /**
    * Registers a handler for a statically named backend event.
    *
@@ -202,11 +241,15 @@ const actions = {
       set = new Set();
       handlers.set(event, set);
     }
-    set.add(handler);
+    let entry = Array.from(set).find((candidate) => candidate.handler === handler);
-    eventSource?.addEventListener(event, handler);
+    if (!entry) {
+      entry = { handler, detach: null };
+      set.add(entry);
+      if (eventSource) entry.detach = addTrackedListener(eventSource, event, handler);
+    }
     return () => {
-      eventSource?.removeEventListener(event, handler);
+      entry.detach?.();
-      set.delete(handler);
+      set.delete(entry);
       if (set.size === 0) handlers.delete(event);
     };
   },

src/components/article/boxes/ArticleViewPrice.jsx

@@ -1,6 +1,5 @@
 import { Component, PureComponent } from 'react';
 import Box from '@mui/material/Box';
-import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { EditablePanelTile, PanelTile } from 'dashgui/panels';
@@ -45,12 +44,12 @@ const articlePriceTextSx = {
 };
 
 const articlePriceFieldSx = {
-  flexShrink: 0,
+  flexShrink: 1,
-  width: 'auto',
+  width: '100%',
-  mr: 11,
   '& .MuiOutlinedInput-root': {
     alignItems: 'baseline',
-    flexShrink: 0,
+    width: '100%',
+    flexShrink: 1,
   },
   '& .MuiInputBase-input': {
     fontSize: '3.5rem',
@@ -58,17 +57,6 @@ const articlePriceFieldSx = {
     height: 'auto',
     ...articlePriceTextSx,
   },
-  '& .MuiInputAdornment-root': {
-    marginRight: 0.75,
-    height: 'auto',
-    maxHeight: 'none',
-    alignItems: 'baseline',
-  },
-  '& .MuiInputAdornment-root .MuiTypography-root': {
-    fontSize: '2rem',
-    fontWeight: 700,
-    lineHeight: 1.1,
-  },
   '& .MuiOutlinedInput-notchedOutline': {
     borderWidth: '1px !important',
   },
@@ -96,6 +84,7 @@ const priceBodySx = {
   display: 'flex',
   flexDirection: 'column',
   gap: 0.75,
+  pt: 0,
 };
 
 function articleHasPackUnit(art) {
@@ -198,11 +187,6 @@ class PriceAmountField extends Component {
         slotProps={{
           input: {
             readOnly,
-            startAdornment: (
-              <InputAdornment position="start">
-                <Typography component="span">€</Typography>
-              </InputAdornment>
-            ),
           },
           htmlInput: {
             inputMode: 'decimal',
@@ -217,11 +201,10 @@ class PriceAmountField extends Component {
 
 class PriceDisplay extends Component {
   render() {
-    const { saved, taxRates, unitOptions, displaySymbol } = this.props;
+    const { saved, unitOptions, displaySymbol } = this.props;
     return (
       <Box sx={priceBodySx}>
         <PriceAmountField value={saved.gross} readOnly />
-        <PriceTaxRow rates={taxRates} selected={saved.taxRate} readOnly />
         <TierPricePills tiers={saved.tiers} />
         <PriceUnitRow
           hasUnit={saved.hasUnit}
@@ -245,11 +228,13 @@ class PriceOverlay extends Component {
       unitOptions,
       articleUnitSi,
       onOpenEditor,
+      onOpenTiers,
     } = this.props;
     if (!editing || draft == null) return null;
     return (
       <PriceUnitCorner
         hasUnit={draft.hasUnit}
+        onOpenTiers={onOpenTiers}
         onToggleHasUnit={(hasUnit) => {
           if (hasUnit) {
             const unitamount = draft.unitamount || '1';
@@ -304,61 +289,40 @@ class PriceEdit extends Component {
   };
 
   render() {
+    
     const {
-      draft,
+      draft, onChange, inputRef, unitOptions, displaySymbol,
-      onChange,
+      tiersDialogOpen, unitEditorOpen, onCloseTiers, onCloseUnitEditor,
-      inputRef,
-      taxRates,
-      unitOptions,
-      displaySymbol,
-      tiersDialogOpen,
-      unitEditorOpen,
-      onOpenTiers,
-      onCloseTiers,
-      onCloseUnitEditor,
     } = this.props;
+
     const draftGross = parsePriceInput(draft.gross);
     const draftAmount = parsePriceInput(draft.unitamount);
     return (
       <Box sx={priceBodySx}>
         <PriceAmountField
-          inputRef={inputRef}
+          inputRef={inputRef} value={draft.gross}
-          value={draft.gross}
           onChange={(gross) => onChange({ ...draft, gross })}
           error={draft.gross !== '' && draftGross == null}
         />
-        <PriceTaxRow
-          rates={taxRates}
-          selected={draft.taxRate}
-          onSelectTax={(taxRate) => onChange({ ...draft, taxRate })}
-          onOpenTiers={onOpenTiers}
-        />
         <TierPricePills tiers={draft.tiers} />
         <PriceUnitRow
-          hasUnit={draft.hasUnit}
+          hasUnit={draft.hasUnit} unitamount={draft.unitamount}
-          unitamount={draft.unitamount}
+          unitSi={draft.unitSi} units={unitOptions}
-          unitSi={draft.unitSi}
-          units={unitOptions}
           displaySymbol={displaySymbol}
           onChangeAmount={(unitamount) => onChange({ ...draft, unitamount })}
           onChangeSi={(unitSi) => onChange({ ...draft, unitSi })}
           amountError={
-            draft.hasUnit &&
+            draft.hasUnit &&  draft.unitamount !== '' &&
-            draft.unitamount !== '' &&
             (draftAmount == null || draftAmount <= 0)
           }
         />
         <ArticlePriceTiersDialog
-          open={tiersDialogOpen}
+          open={tiersDialogOpen} tiers={draft.tiers ?? []}
-          tiers={draft.tiers ?? []}
+          onClose={onCloseTiers} onApply={(tiers) => onChange({ ...draft, tiers })}
-          onClose={onCloseTiers}
-          onApply={(tiers) => onChange({ ...draft, tiers })}
         />
         <ArticleUnitEditorDialog
-          open={unitEditorOpen}
+          open={unitEditorOpen} onClose={onCloseUnitEditor}
-          onClose={onCloseUnitEditor}
+          onUnitUpserted={this.handleUnitUpserted} onUnitDeleted={this.handleUnitDeleted}
-          onUnitUpserted={this.handleUnitUpserted}
-          onUnitDeleted={this.handleUnitDeleted}
         />
       </Box>
     );
@@ -524,8 +488,8 @@ export default class ArticleViewPrice extends PureComponent {
         const max = Math.max(...prices);
         priceText =
           min === max
-            ? `€ ${formatPriceAmount(min)}`
+            ? formatPriceAmount(min)
-            : `€ ${formatPriceAmount(min)} bis € ${formatPriceAmount(max)}`;
+            : `${formatPriceAmount(min)} bis ${formatPriceAmount(max)}`;
       }
 
       return (
@@ -533,24 +497,19 @@ export default class ArticleViewPrice extends PureComponent {
           wide={1}
           minHeight={SECOND_ROW_MIN_HEIGHT}
           color={BLUE_PANEL}
+          title={
+            <Box component="span" sx={{ fontWeight: 700 }}>
+              €
+            </Box>
+          }
           contentAlignItems="flex-start"
         >
           <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
-            <Typography
+            <Box sx={{ width: '100%', mt: 0.5 }}>
-              variant="caption"
-              color="text.secondary"
-              sx={{
-                letterSpacing: 0.6,
-                fontWeight: 600,
-                display: 'block',
-              }}
-            >
-              Preis auf Variantenebene pflegen
-            </Typography>
-            <Box sx={{ my: 0.75 }}>
               <Typography
                 component="div"
                 sx={{
+                  width: '100%',
                   fontSize: '1.5rem',
                   fontWeight: 700,
                   lineHeight: 1.2,
@@ -578,6 +537,31 @@ export default class ArticleViewPrice extends PureComponent {
         wide={1}
         minHeight={SECOND_ROW_MIN_HEIGHT}
         color={BLUE_PANEL}
+        titleContent={({ editing, draft, onChange }) => (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+              gap: 1,
+            }}
+          >
+            <Box component="span" sx={{ fontWeight: 700 }}>
+              €
+            </Box>
+            <PriceTaxRow
+              rates={taxRates}
+              selected={editing ? draft?.taxRate : priceValue.taxRate}
+              onSelectTax={
+                editing
+                  ? (taxRate) => onChange({ ...draft, taxRate })
+                  : undefined
+              }
+              readOnly={!editing}
+            />
+          </Box>
+        )}
         contentAlignItems="flex-start"
         value={priceValue}
         onSave={this.handleSave}
@@ -592,12 +576,12 @@ export default class ArticleViewPrice extends PureComponent {
             unitOptions={unitOptions}
             articleUnitSi={articleData.unit?.si}
             onOpenEditor={this.openUnitEditor}
+            onOpenTiers={this.openTiersDialog}
           />
         )}
         display={
           <PriceDisplay
             saved={priceValue}
-            taxRates={taxRates}
             unitOptions={unitOptions}
             displaySymbol={displaySymbol}
           />
@@ -607,12 +591,10 @@ export default class ArticleViewPrice extends PureComponent {
             draft={draft}
             onChange={onChange}
             inputRef={inputRef}
-            taxRates={taxRates}
             unitOptions={unitOptions}
             displaySymbol={displaySymbol}
             tiersDialogOpen={tiersDialogOpen}
             unitEditorOpen={unitEditorOpen}
-            onOpenTiers={this.openTiersDialog}
             onCloseTiers={this.closeTiersDialog}
             onCloseUnitEditor={this.closeUnitEditor}
             onUnitUpserted={this.refreshUnits}

src/components/article/boxes/PriceTaxRow.jsx

@@ -1,8 +1,6 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
-import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import {
   TINT_CHIP,
   TINT_PILL_ACTIVE,
@@ -50,7 +48,7 @@ export class TaxRatePills extends Component {
 
 export class PriceTaxRow extends Component {
   render() {
-    const { rates, selected, onSelectTax, readOnly, onOpenTiers } = this.props;
+    const { rates, selected, onSelectTax, readOnly } = this.props;
     return (
       <Box
         sx={{
@@ -67,20 +65,6 @@ export class PriceTaxRow extends Component {
           onSelect={onSelectTax}
           readOnly={readOnly}
         />
-        <IconButton
-          type="button"
-          size="small"
-          aria-label="Staffelpreise"
-          disabled={readOnly}
-          onClick={readOnly ? undefined : onOpenTiers}
-          sx={{
-            p: 0.5,
-            visibility: readOnly ? 'hidden' : 'visible',
-            pointerEvents: readOnly ? 'none' : 'auto',
-          }}
-        >
-          <LayersOutlinedIcon sx={{ fontSize: 28 }} />
-        </IconButton>
       </Box>
     );
   }

src/components/article/boxes/PriceUnitRow.jsx

@@ -6,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined';
 import Switch from '@mui/material/Switch';
 import TextInput from '../../TextInput';
@@ -16,12 +17,12 @@ import {
 
 const priceUnitCornerSx = {
   position: 'absolute',
-  top: 72,
+  bottom: 8,
   right: 4,
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: 1.25,
+  gap: 0.25,
   zIndex: 2,
 };
 
@@ -119,9 +120,18 @@ export class PriceUnitRow extends Component {
 
 export class PriceUnitCorner extends Component {
   render() {
-    const { hasUnit, onToggleHasUnit, onOpenEditor } = this.props;
+    const { hasUnit, onToggleHasUnit, onOpenEditor, onOpenTiers } = this.props;
     return (
       <Box sx={priceUnitCornerSx}>
+        <IconButton
+          type="button"
+          size="small"
+          aria-label="Staffelpreise"
+          onClick={onOpenTiers}
+          sx={{ p: 0.5 }}
+        >
+          <LayersOutlinedIcon sx={{ fontSize: 28 }} />
+        </IconButton>
         <Switch
           size="small"
           checked={Boolean(hasUnit)}

src/devtools/SseMonitor.jsx

@@ -0,0 +1,270 @@
+import { PureComponent, createRef } from 'react';
+import { keyframes } from '@emotion/react';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Fab from '@mui/material/Fab';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import SensorsIcon from '@mui/icons-material/Sensors';
+import sseAutomat from '../automats/sseAutomat';
+
+const PANEL_WIDTH = 420;
+const PANEL_HEIGHT = 380;
+const pulseAnimationA = keyframes`
+  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+  35% { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+`;
+const pulseAnimationB = keyframes`
+  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+  35% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
+`;
+
+function formatEventData(data) {
+  if (!data) return '';
+  try {
+    return JSON.stringify(JSON.parse(data), null, 2);
+  } catch {
+    return data;
+  }
+}
+
+class SseMonitor extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: sseAutomat.state.status,
+      companyId: sseAutomat.state.companyId,
+      events: sseAutomat.state.events,
+      open: false,
+      position: null,
+      eventPulse: 0,
+    };
+    this.panelRef = createRef();
+    this.handleToggle = this.handleToggle.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
+    this.handlePointerMove = this.handlePointerMove.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  componentDidMount() {
+    this.unsubscribe = sseAutomat.subscribe(this, (state) => ({
+      status: state.status,
+      companyId: state.companyId,
+      events: state.events,
+    }));
+    window.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe?.();
+    window.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const previousEventId = prevState.events.at(-1)?.id;
+    const currentEventId = this.state.events.at(-1)?.id;
+    if (currentEventId != null && currentEventId !== previousEventId) {
+      this.setState((state) => ({ eventPulse: state.eventPulse + 1 }));
+    }
+  }
+
+  handleKeyDown(event) {
+    if (!event.altKey || !event.shiftKey || event.key?.toLowerCase() !== 's') return;
+    event.preventDefault();
+    this.handleToggle();
+  }
+
+  handleToggle() {
+    this.setState((state) => ({ open: !state.open }));
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+  }
+
+  handleClear() {
+    sseAutomat.actions.clearEvents();
+  }
+
+  handlePointerDown(event) {
+    if (event.target.closest('button')) return;
+    const rect = this.panelRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    this.drag = {
+      pointerId: event.pointerId,
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      left: rect.left,
+      top: rect.top,
+    };
+  }
+
+  handlePointerMove(event) {
+    if (!this.drag || event.pointerId !== this.drag.pointerId) return;
+    const maxLeft = Math.max(0, window.innerWidth - PANEL_WIDTH);
+    const maxTop = Math.max(0, window.innerHeight - 120);
+    this.setState({
+      position: {
+        left: Math.max(0, Math.min(maxLeft, this.drag.left + event.clientX - this.drag.pointerX)),
+        top: Math.max(0, Math.min(maxTop, this.drag.top + event.clientY - this.drag.pointerY)),
+      },
+    });
+  }
+
+  handlePointerUp(event) {
+    if (this.drag?.pointerId === event.pointerId) this.drag = null;
+  }
+
+  renderEvent(entry) {
+    const data = formatEventData(entry.data);
+    return (
+      <Box
+        key={entry.id}
+        sx={{ px: 1.25, py: 1, borderBottom: '1px solid', borderColor: 'divider' }}
+      >
+        <Stack direction="row" spacing={1} alignItems="baseline">
+          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>
+            {new Date(entry.time).toLocaleTimeString()}
+          </Typography>
+          <Typography variant="body2" sx={{ fontWeight: 700, overflowWrap: 'anywhere' }}>
+            {entry.type}
+          </Typography>
+          {entry.lastEventId ? (
+            <Typography variant="caption" color="text.secondary" sx={{ ml: 'auto !important' }}>
+              #{entry.lastEventId}
+            </Typography>
+          ) : null}
+        </Stack>
+        {data ? (
+          <Typography
+            component="pre"
+            variant="caption"
+            sx={{
+              m: 0,
+              mt: 0.5,
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'anywhere',
+              color: 'text.secondary',
+            }}
+          >
+            {data}
+          </Typography>
+        ) : null}
+      </Box>
+    );
+  }
+
+  render() {
+    const { open, position, status, companyId, events, eventPulse } = this.state;
+    const statusColor =
+      status === 'connected' ? 'success' : status === 'error' ? 'error' : status === 'connecting' ? 'warning' : 'default';
+
+    return (
+      <>
+        {!open ? (
+          <Fab
+            size="small"
+            color={statusColor}
+            aria-label={`SSE-Monitor umschalten (${status})`}
+            aria-pressed={open}
+            onClick={this.handleToggle}
+            sx={{
+              position: 'fixed',
+              left: { xs: 27, sm: 171 },
+              bottom: { xs: 132, sm: 142 },
+              zIndex: (theme) => theme.zIndex.tooltip,
+              animation: `${eventPulse % 2 === 0 ? pulseAnimationA : pulseAnimationB} 650ms ease-out`,
+            }}
+          >
+            <SensorsIcon fontSize="small" />
+          </Fab>
+        ) : (
+          <Paper
+            ref={this.panelRef}
+            component="aside"
+            aria-label="SSE-Monitor"
+            elevation={12}
+            sx={{
+              position: 'fixed',
+              ...(position ? { left: position.left, top: position.top } : { right: 16, bottom: 16 }),
+              width: `min(${PANEL_WIDTH}px, calc(100vw - 24px))`,
+              height: `min(${PANEL_HEIGHT}px, calc(100vh - 24px))`,
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+              zIndex: (theme) => theme.zIndex.tooltip,
+              border: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <Stack
+              direction="row"
+              alignItems="center"
+              spacing={1}
+              onPointerDown={this.handlePointerDown}
+              onPointerMove={this.handlePointerMove}
+              onPointerUp={this.handlePointerUp}
+              onPointerCancel={this.handlePointerUp}
+              sx={{
+                px: 1,
+                py: 0.75,
+                borderBottom: '1px solid',
+                borderColor: 'divider',
+                cursor: 'grab',
+                touchAction: 'none',
+                userSelect: 'none',
+                '&:active': { cursor: 'grabbing' },
+              }}
+            >
+              <DragIndicatorIcon fontSize="small" color="action" />
+              <SensorsIcon fontSize="small" color="primary" />
+              <Typography variant="subtitle2" sx={{ fontWeight: 700, flexGrow: 1 }}>
+                SSE-Monitor
+              </Typography>
+              <Chip size="small" color={statusColor} label={status} />
+              <Tooltip title="Ereignisse löschen">
+                <IconButton size="small" aria-label="Ereignisse löschen" onClick={this.handleClear}>
+                  <DeleteSweepIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Schließen">
+                <IconButton size="small" aria-label="Schließen" onClick={this.handleClose}>
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </Stack>
+            <Box sx={{ px: 1.25, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
+              <Typography variant="caption" color="text.secondary">
+                {companyId ? `Company ${companyId}` : 'Keine aktive Company'} · {events.length} Ereignisse
+              </Typography>
+            </Box>
+            <Box sx={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
+              {events.length > 0 ? (
+                [...events].reverse().map((entry) => this.renderEvent(entry))
+              ) : (
+                <Typography variant="body2" color="text.secondary" sx={{ p: 2 }}>
+                  Noch keine SSE-Ereignisse empfangen.
+                </Typography>
+              )}
+            </Box>
+          </Paper>
+        )}
+      </>
+    );
+  }
+}
+
+export default SseMonitor;

src/main.jsx

@@ -24,6 +24,9 @@ installCssVars();
 const AutomatInspector = import.meta.env.DEV
   ? lazy(() => import('./devtools/AutomatInspector'))
   : null;
+const SseMonitor = import.meta.env.DEV
+  ? lazy(() => import('./devtools/SseMonitor'))
+  : null;
 
 async function clearDevServiceWorker() {
   if (!import.meta.env.DEV || !('serviceWorker' in navigator)) return;
@@ -63,6 +66,11 @@ createRoot(document.getElementById('root')).render(
             </Suspense>
           ) : null}
         </Box>
+        {SseMonitor ? (
+          <Suspense fallback={null}>
+            <SseMonitor />
+          </Suspense>
+        ) : null}
         <PwaUpdateDialog />
       </AuthBootstrap>
     </SnackbarProvider>

src/routes/artikel.jsx

@@ -329,6 +329,10 @@ class ArtikelSearchPage extends Component {
     }).catch(() => {});
   };
 
+  handleClearInput = () => {
+    this.handleInputChange({ target: { value: '' } });
+  };
+
   fetchResults = () => {
     const { target, filter, offset } = queryFromParams(this.props.searchParams);
     const { pageSize } = this.state;
@@ -422,9 +426,8 @@ class ArtikelSearchPage extends Component {
           <TextField
             sx={{ maxWidth: 520, flexGrow: 1 }}
             autoFocus
-            type="search"
             autoComplete="off"
-            placeholder="Artikel suchen (EAN, Artikelnr., Name, Barcode)…"
+            placeholder="(EAN, SKU, Name)"
             value={input}
             onChange={this.handleInputChange}
             slotProps={{
@@ -439,13 +442,26 @@ class ArtikelSearchPage extends Component {
                     <SearchIcon color="action" />
                   </InputAdornment>
                 ),
+                endAdornment: input ? (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      onClick={this.handleClearInput}
+                      onMouseDown={(e) => e.preventDefault()}
+                      title="Suche löschen"
+                      aria-label="Suche löschen"
+                    >
+                      <ClearIcon fontSize="small" />
+                    </IconButton>
+                  </InputAdornment>
+                ) : null,
               },
             }}
           />
-          {facetEntries.length > 0 && (
           <Button
             variant={categoryFilterOpen ? 'contained' : 'outlined'}
             color="inherit"
+            disabled={facetEntries.length === 0}
             onClick={this.toggleCategoryFilter}
             startIcon={<FilterListIcon />}
             endIcon={categoryFilterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
@@ -453,7 +469,6 @@ class ArtikelSearchPage extends Component {
           >
             Kategorien
           </Button>
-          )}
           {categories.map((catId) => {
             const label = getCategoryBreadcrumbLabel(
               catId,

src/routes/lieferung/neu.jsx

@@ -390,7 +390,7 @@ class LieferungNeuPage extends PureComponent {
 
       // Create article in root category
       const articleRes = await articleApi.create({
-        parentId: rootCategoryId,
+        categoryId: rootCategoryId,
         name: categoryName,
       });
 

src/utils/importArtikel.js

@@ -6,7 +6,7 @@
  * Everything is created through the existing dashback API:
  *   - categories:  POST /api/category  ({ parentId, name })
  *   - brands:      PUT /api/brand       ({ name })  → { brand: { id } }
- *   - articles:    POST /api/article    ({ parentId, name })  → { article: { sku } }
+ *   - articles:    POST /api/article    ({ categoryId, name })  → { article: { sku } }
  *   - price:       PUT /api/article/:sku/prices    ({ prices: [{ price, tax }] })
  *   - brand:       PUT /api/article/:sku/brand     ({ brandId })
  *   - eans:        PUT /api/article/:sku/eans      ({ eans })
@@ -142,7 +142,7 @@ async function importRow(row, { ensureCategory, ensureBrand }) {
   const brandId = row.brand ? await ensureBrand(row.brand) : null;
 
   // Create the article under the leaf category.
-  const createRes = await article.create({ parentId: leafCategoryId, name });
+  const createRes = await article.create({ categoryId: leafCategoryId, name });
   requireObject(createRes, 'POST /api/article');
   const created = createRes.article;
   requireDefined(created, 'article');