u

2026-08-03 05:11:50 +02:00
parent 5b5c77f870
commit 4db4948090
14 changed files with 1410 additions and 1178 deletions
--- a/src/components/article/boxes/PriceTaxRow.jsx
+++ b/src/components/article/boxes/PriceTaxRow.jsx
@@ -0,0 +1,81 @@
+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';
+
+const taxPillSx = {
+  height: 28,
+  fontSize: 13,
+  fontWeight: 600,
+  '& .MuiChip-label': { px: 1 },
+};
+
+export function TaxRatePills({ rates, selected, onSelect, readOnly }) {
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 28 }}>
+      {rates.map((rate) => {
+        const active = Number(selected) === Number(rate);
+        return (
+          <Chip
+            key={rate}
+            size="small"
+            label={`${rate} %`}
+            onClick={readOnly || !onSelect ? undefined : () => onSelect(rate)}
+            sx={{
+              ...taxPillSx,
+              visibility: active || !readOnly ? 'visible' : 'hidden',
+              bgcolor: active ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
+              ...(readOnly
+                ? {}
+                : {
+                    cursor: 'pointer',
+                    '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
+                  }),
+            }}
+          />
+        );
+      })}
+    </Box>
+  );
+}
+
+export function PriceTaxRow({
+  rates,
+  selected,
+  onSelectTax,
+  readOnly,
+  onOpenTiers,
+}) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        flexWrap: 'wrap',
+        minHeight: 36,
+      }}
+    >
+      <TaxRatePills
+        rates={rates}
+        selected={selected}
+        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>
+  );
+}