Merge branch 'main' into codex/add-confirmation-prompt-for-pick-list-deletion

src/components/PickItemRow.tsx

@@ -19,6 +19,7 @@ interface PickItemRowProps {
   item: PickItem;
   product?: Product | null;
   onIncrementQuantity: () => void;
+  onDecrementQuantity: () => void;
   onToggleCarton: () => void;
   onStatusChange: (status: PickItem['status']) => void;
   onDelete: () => void;
@@ -28,6 +29,7 @@ export const PickItemRow = ({
   item,
   product,
   onIncrementQuantity,
+  onDecrementQuantity,
   onToggleCarton,
   onStatusChange,
   onDelete,
@@ -72,21 +74,28 @@ export const PickItemRow = ({
       </Stack>
 
       <Stack direction="row" spacing={1} alignItems="center">
-        <Button
-          variant={item.is_carton ? 'contained' : 'outlined'}
-          size="small"
+        <IconButton
+          aria-label={`Toggle packaging type (currently ${item.is_carton ? 'carton' : 'unit'})`}
+          color={item.is_carton ? 'primary' : 'default'}
           onClick={onToggleCarton}
         >
-          {item.is_carton ? 'Carton' : 'Unit'}
-        </Button>
-        <Button variant="contained" size="small" startIcon={<Add />} onClick={onIncrementQuantity}>
-          Add 1
-        </Button>
+          <SwapHoriz />
+        </IconButton>
         <IconButton
-          color="error"
-          onClick={() => setIsConfirmOpen(true)}
-          aria-label={`Delete ${product?.name ?? 'item'}`}
+          aria-label="Decrease quantity"
+          color="primary"
+          onClick={onDecrementQuantity}
         >
+          <Remove />
+        </IconButton>
+        <IconButton
+          aria-label="Increase quantity"
+          color="primary"
+          onClick={onIncrementQuantity}
+        >
+          <Add />
+        </IconButton>
+        <IconButton color="error" onClick={onDelete} aria-label="Delete item">
           <Delete />
         </IconButton>
       </Stack>