Simplify pick item quantity handling

src/components/PickItemRow.tsx

@@ -1,5 +1,5 @@
 import { Add, Delete } from '@mui/icons-material';
-import { Button, Checkbox, Stack, Typography } from '@mui/material';
+import { Button, Checkbox, IconButton, Stack, Typography } from '@mui/material';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
@@ -8,8 +8,8 @@ interface PickItemRowProps {
   product?: Product | null;
   onIncrementQuantity: () => void;
   onToggleCarton: () => void;
-  onSwipeLeft: () => void;
-  onSwipeRight: () => void;
+  onStatusChange: (status: PickItem['status']) => void;
+  onDelete: () => void;
 }
 
 export const PickItemRow = ({
@@ -17,31 +17,56 @@ export const PickItemRow = ({
   product,
   onIncrementQuantity,
   onToggleCarton,
-  onSwipeLeft,
-  onSwipeRight,
+  onStatusChange,
+  onDelete,
 }: PickItemRowProps) => {
-  const longPressHandlers = useLongPress({ onLongPress: onToggleCarton, onClick: onIncrementQuantity });
-  const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight });
+  const packagingLabel = item.is_carton
+    ? product?.bulk_name ?? 'Carton'
+    : product?.unit_type ?? 'Unit';
 
-  const isCarton = item.quantity_bulk > 0;
+  const toggleStatus = (checked: boolean) => {
+    onStatusChange(checked ? 'picked' : 'pending');
+  };
 
   return (
     <Stack
       direction="row"
       alignItems="center"
       justifyContent="space-between"
-      spacing={1}
+      spacing={1.5}
       sx={{ p: 1, borderRadius: 1, bgcolor: 'background.paper', boxShadow: 1 }}
     >
-      <div>
-        <Typography variant="subtitle1">{product?.name ?? 'Unknown product'}</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Qty: {item.quantity_units}
-        </Typography>
-      </div>
+      <Stack direction="row" spacing={1} alignItems="center" flex={1} minWidth={0}>
+        <Checkbox
+          edge="start"
+          checked={item.status === 'picked'}
+          onChange={(event) => toggleStatus(event.target.checked)}
+          inputProps={{ 'aria-label': 'Toggle picked status' }}
+        />
+        <Stack spacing={0.25} minWidth={0} flex={1}>
+          <Typography variant="subtitle1" noWrap>
+            {product?.name ?? 'Unknown product'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary" noWrap>
+            Qty: {item.quantity} {packagingLabel}
+          </Typography>
+        </Stack>
+      </Stack>
+
       <Stack direction="row" spacing={1} alignItems="center">
-        {isCarton ? <Chip label="Carton" color="primary" size="small" /> : null}
-        <Chip label={item.status} color={statusColor[item.status]} size="small" />
+        <Button
+          variant={item.is_carton ? 'contained' : 'outlined'}
+          size="small"
+          onClick={onToggleCarton}
+        >
+          {item.is_carton ? 'Carton' : 'Unit'}
+        </Button>
+        <Button variant="contained" size="small" startIcon={<Add />} onClick={onIncrementQuantity}>
+          Add 1
+        </Button>
+        <IconButton color="error" onClick={onDelete} aria-label="Delete item">
+          <Delete />
+        </IconButton>
       </Stack>
     </Stack>
   );