u

2026-10-12 12:42:25 +02:00
parent 59c3b901ae
commit d5d45e57d4
3 changed files with 470 additions and 118 deletions
--- a/src/components/manifest/OrderList.jsx
+++ b/src/components/manifest/OrderList.jsx
@@ -3,18 +3,26 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import IconButton from '@mui/material/IconButton';
 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 Switch from '@mui/material/Switch';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import { enqueueSnackbar } from 'notistack';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import FillSpace from 'dashgui/FillSpace';
 import { PanelTile, PanelTileGrid } from 'dashgui/panels';
 import BackendError from '../BackendError';
-import orderAutomat, { filterOrders } from '../../automats/orderAutomat';
+import orderAutomat, {
+  filterOrders,
+  isOrderPaid,
+  isOrderDelivered,
+  getNegativeSeekCutoff,
+  formatNegativeSeek,
+} from '../../automats/orderAutomat';
 import { order as orderApi } from '../../api';
 import { backendErrorFrom } from '../../utils/backendError';
 import { notifyError } from '../../utils/notify';
@@ -37,14 +45,6 @@ function orderGrossTotal(lines) {
  }, 0);
 }

-function isOrderPaid(order) {
-  return Boolean(order.paid ?? order.payed ?? order.isPaid ?? order.is_paid ?? order.paidAt);
-}
-
-function isOrderDelivered(order) {
-  return Boolean(order.delivered ?? order.isDelivered ?? order.is_delivered ?? order.deliveredAt);
-}
-
 const cfg = manifestConfig('order');

 const rowSx = {
@@ -123,35 +123,27 @@ class OrderRow extends PureComponent {
        </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>
+          <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 }}
+          />
        </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>
+          <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 }}
+          />
        </Box>

        <Chip
@@ -193,15 +185,30 @@ class OrderRow extends PureComponent {
  }
 }

-// MARK: <OrderSearchField(>)
+// MARK: <OrderSearchField/>
 class OrderSearchField extends PureComponent {
  constructor(props) {
    super(props);
-    this.state = { input: orderAutomat.state.filter ?? '' };
+    const s = orderAutomat.state;
+    this.state = {
+      input: s.filter ?? '',
+      onlyUnpaid: s.onlyUnpaid ?? false,
+      onlyUndelivered: s.onlyUndelivered ?? false,
+      seekMonths: s.seekMonths ?? 0,
+      seekYears: s.seekYears ?? 0,
+      negativeSeekMonths: s.negativeSeekMonths ?? 0,
+    };
  }

  componentDidMount() {
-    this.unsub = orderAutomat.subscribe(this, (state) => ({ input: state.filter }));
+    this.unsub = orderAutomat.subscribe(this, (state) => ({
+      input: state.filter ?? '',
+      onlyUnpaid: state.onlyUnpaid ?? false,
+      onlyUndelivered: state.onlyUndelivered ?? false,
+      seekMonths: state.seekMonths ?? 0,
+      seekYears: state.seekYears ?? 0,
+      negativeSeekMonths: state.negativeSeekMonths ?? 0,
+    }));
  }

  componentWillUnmount() {
@@ -210,6 +217,12 @@ class OrderSearchField extends PureComponent {

  render() {
    const { inputRef, onCreate } = this.props;
+    const { input, onlyUnpaid, onlyUndelivered, seekMonths, seekYears } = this.state;
+    const monthActive = seekMonths > 0;
+    const monthLabel = !monthActive ? '-1 Month' : `-${seekMonths} Month${seekMonths > 1 ? 's' : ''}`;
+    const yearActive = seekYears > 0;
+    const yearLabel = !yearActive ? '-1 Year' : `-${seekYears} Year${seekYears > 1 ? 's' : ''}`;
+
    return (
      <PanelTileGrid>
        <Box
@@ -217,22 +230,171 @@ class OrderSearchField extends PureComponent {
          sx={{
            gridColumn: { xs: '1 / -1', sm: 'span 2', md: 'span 2' },
            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
+            flexDirection: 'column',
+            gap: 1.25,
            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>
+          {/* Top row: search field & create button */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+            }}
+          >
+            <SingleLineTextEdit
+              sx={{ flex: 1 }}
+              size="small"
+              search
+              clear
+              value={input}
+              onChange={(next) => orderAutomat.actions.filter(next)}
+            />
+            <Button variant="contained" onClick={onCreate}>
+              {cfg.createButton}
+            </Button>
+          </Box>
+
+          {/* Filter Bar: "Nur ungezahlte", "Nur ungelieferte", Negativeseek (-1 Month, -1 Year, Reset) */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              flexWrap: 'wrap',
+              gap: 1.5,
+            }}
+          >
+            {/* Left: Unpaid & Undelivered toggles */}
+            <Box
+              sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 1.5,
+                px: 1.5,
+                py: 0.25,
+                borderRadius: 2,
+                bgcolor: 'background.paper',
+                boxShadow: 1,
+              }}
+            >
+              <FormControlLabel
+                control={
+                  <Switch
+                    size="small"
+                    color="warning"
+                    checked={onlyUnpaid}
+                    onChange={(e) => orderAutomat.actions.setOnlyUnpaid(e.target.checked)}
+                  />
+                }
+                label={
+                  <Typography variant="body2" sx={{ fontWeight: onlyUnpaid ? 600 : 400, userSelect: 'none' }}>
+                    Nur ungezahlte
+                  </Typography>
+                }
+                sx={{ m: 0 }}
+              />
+
+              <Divider orientation="vertical" flexItem sx={{ my: 0.5 }} />
+
+              <FormControlLabel
+                control={
+                  <Switch
+                    size="small"
+                    color="primary"
+                    checked={onlyUndelivered}
+                    onChange={(e) => orderAutomat.actions.setOnlyUndelivered(e.target.checked)}
+                  />
+                }
+                label={
+                  <Typography variant="body2" sx={{ fontWeight: onlyUndelivered ? 600 : 400, userSelect: 'none' }}>
+                    Nur ungelieferte
+                  </Typography>
+                }
+                sx={{ m: 0 }}
+              />
+            </Box>
+
+            {/* Right: Negativeseek controls (-1 Month, -1 Year, Reset) */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+              <Box
+                sx={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 0.75,
+                  px: 1.25,
+                  py: 0.25,
+                  borderRadius: 2,
+                  bgcolor: 'background.paper',
+                  boxShadow: 1,
+                }}
+              >
+                <Button
+                  size="small"
+                  variant={monthActive ? 'contained' : 'outlined'}
+                  color={monthActive ? 'primary' : 'inherit'}
+                  onClick={() => orderAutomat.actions.addSeekMonth()}
+                  sx={{
+                    minWidth: 88,
+                    px: 1.25,
+                    py: 0.25,
+                    height: 28,
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    textTransform: 'none',
+                    boxSizing: 'border-box',
+                    border: '1px solid',
+                    borderColor: monthActive ? 'primary.main' : 'divider',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {monthLabel}
+                </Button>
+
+                <Button
+                  size="small"
+                  variant={yearActive ? 'contained' : 'outlined'}
+                  color={yearActive ? 'primary' : 'inherit'}
+                  onClick={() => orderAutomat.actions.addSeekYear()}
+                  sx={{
+                    minWidth: 78,
+                    px: 1.25,
+                    py: 0.25,
+                    height: 28,
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    textTransform: 'none',
+                    boxSizing: 'border-box',
+                    border: '1px solid',
+                    borderColor: yearActive ? 'primary.main' : 'divider',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {yearLabel}
+                </Button>
+
+                <Button
+                  size="small"
+                  variant="text"
+                  color="inherit"
+                  disabled={!monthActive && !yearActive}
+                  onClick={() => orderAutomat.actions.resetNegativeSeek()}
+                  sx={{
+                    minWidth: 'auto',
+                    px: 1,
+                    py: 0.25,
+                    height: 28,
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    textTransform: 'none',
+                  }}
+                >
+                  Reset
+                </Button>
+              </Box>
+            </Box>
+          </Box>
        </Box>
      </PanelTileGrid>
    );
@@ -251,6 +413,11 @@ export class OrderList extends PureComponent {
      items: s.items ?? [],
      total: s.total ?? 0,
      filter: s.filter ?? '',
+      onlyUnpaid: s.onlyUnpaid ?? false,
+      onlyUndelivered: s.onlyUndelivered ?? false,
+      negativeSeekMonths: s.negativeSeekMonths ?? 0,
+      hasMore: s.hasMore ?? false,
+      loadingMore: s.loadingMore ?? false,
      partiesById: {},
      busyId: null,
    };
@@ -309,9 +476,17 @@ export class OrderList extends PureComponent {
      items: state.items ?? [],
      total: state.total ?? 0,
      filter: state.filter ?? '',
-      filteredItems: state.filter
-        ? filterOrders(state.items ?? [], state.filter, this.nameOf)
-        : (state.items ?? []),
+      onlyUnpaid: state.onlyUnpaid ?? false,
+      onlyUndelivered: state.onlyUndelivered ?? false,
+      negativeSeekMonths: state.negativeSeekMonths ?? 0,
+      hasMore: state.hasMore ?? false,
+      loadingMore: state.loadingMore ?? false,
+      filteredItems: filterOrders(state.items ?? [], {
+        filter: state.filter,
+        onlyUnpaid: state.onlyUnpaid,
+        onlyUndelivered: state.onlyUndelivered,
+        negativeSeekMonths: state.negativeSeekMonths,
+      }, this.nameOf),
      status: state.status,
      error: state.error ? backendErrorFrom(state.error) : null,
    }));
@@ -330,9 +505,12 @@ export class OrderList extends PureComponent {
        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,
+          filteredItems: filterOrders(prev.items, {
+            filter: prev.filter,
+            onlyUnpaid: prev.onlyUnpaid,
+            onlyUndelivered: prev.onlyUndelivered,
+            negativeSeekMonths: prev.negativeSeekMonths,
+          }, (o) => partyDisplayName('order', partiesById[o.entityId])),
        }));
      }
    } catch {
@@ -373,7 +551,21 @@ export class OrderList extends PureComponent {
  }

  render() {
-    const { status, error, items, total, filter, filteredItems, partiesById, busyId } = this.state;
+    const {
+      status,
+      error,
+      items,
+      total,
+      filter,
+      onlyUnpaid,
+      onlyUndelivered,
+      negativeSeekMonths,
+      hasMore,
+      loadingMore,
+      filteredItems,
+      partiesById,
+      busyId,
+    } = this.state;

    if (status === 'loading' || status === 'idle') {
      return (
@@ -394,58 +586,54 @@ export class OrderList extends PureComponent {
    rowContext.onToggleDelivered = this.handleToggleDelivered;

    const rows = filteredItems ?? [];
-    const displayTotal = filter ? rows.length : (total || items.length);
+    const isFiltered = Boolean(filter || onlyUnpaid || onlyUndelivered || negativeSeekMonths < 0);
+    const displayTotal = isFiltered ? 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}
-              />
-            )}
+            <FillSpace
+              aboveRef={[this.searchRef]}
+              reserveBottom={32}
+              minPageSize={8}
+              minHeight={0}
+              items={rows}
+              totalCount={displayTotal}
+              renderItem={OrderRow}
+              virtualScrollbar
+              header={
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 36,
+                    minHeight: 36,
+                    px: 2,
+                    gap: 1.5,
+                    borderBottom: '1px solid',
+                    borderColor: 'divider',
+                    color: 'text.secondary',
+                    typography: 'caption',
+                    fontWeight: 600,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.04em',
+                    userSelect: 'none',
+                  }}
+                >
+                  <Box sx={{ width: 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>
      </>