Merge branch 'main' into codex/refactor-header-section-of-pickitemrow

src/components/PickItemRow.tsx

@@ -1,4 +1,4 @@
-import { Add, Close, Delete, Inventory2, Remove } from '@mui/icons-material';
+import { Add, Close, Delete, Inventory2, MoreHoriz, Remove } from '@mui/icons-material';
 import {
   Button,
   Checkbox,
@@ -16,7 +16,7 @@ import { alpha, useTheme } from '@mui/material/styles';
 import type React from 'react';
 import { useState } from 'react';
 import { PickItem } from '../models/PickItem';
-import { Product } from '../models/Product';
+import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE, Product } from '../models/Product';
 
 interface PickItemRowProps {
   item: PickItem;
@@ -42,8 +42,8 @@ export const PickItemRow = ({
   const [isControlsOpen, setIsControlsOpen] = useState(false);
   const isNarrowScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const packagingLabel = item.is_carton
-    ? product?.bulk_name ?? 'Carton'
-    : product?.unit_type ?? 'Unit';
+    ? product?.bulk_name ?? DEFAULT_BULK_NAME
+    : product?.unit_type ?? DEFAULT_UNIT_TYPE;
 
   const toggleStatus = (checked: boolean) => {
     onStatusChange(checked ? 'picked' : 'pending');
@@ -80,7 +80,7 @@ export const PickItemRow = ({
       justifyContent="space-between"
       spacing={1.5}
       sx={{
-        p: 1,
+        p: 1.5,
         borderRadius: 1,
         bgcolor: 'background.paper',
         boxShadow: 1,
@@ -97,7 +97,6 @@ export const PickItemRow = ({
           checked={item.status === 'picked'}
           onChange={(event) => toggleStatus(event.target.checked)}
           inputProps={{ 'aria-label': 'Toggle picked status' }}
-          onClick={(event) => event.stopPropagation()}
         />
         <Stack spacing={0.5} minWidth={0} flex={1}>
           <Stack
@@ -131,6 +130,40 @@ export const PickItemRow = ({
           )}
         </Stack>
       </Stack>
+      {isDesktop ? (
+        <Stack direction="row" spacing={0.5} alignItems="center" flexWrap="wrap" justifyContent="flex-end">
+          <IconButton
+            aria-label={`Switch to ${item.is_carton ? 'unit' : 'carton'} packaging`}
+            color={item.is_carton ? 'primary' : 'default'}
+            onClick={onToggleCarton}
+            sx={{
+              boxShadow: item.is_carton
+                ? (theme) => `0 0 0 8px ${alpha(theme.palette.primary.main, 0.15)}`
+                : 'none',
+            }}
+          >
+            <Inventory2 />
+          </IconButton>
+          <IconButton 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={() => setIsConfirmOpen(true)}
+            aria-label="Delete item"
+            sx={{ ml: { xs: 0, sm: 1 } }}
+          >
+            <Delete />
+          </IconButton>
+        </Stack>
+      ) : (
+        <IconButton aria-label="Open item controls" onClick={openControls}>
+          <MoreHoriz />
+        </IconButton>
+      )}
 
       {!isNarrowScreen && (
         <Stack direction="row" spacing={1} alignItems="center">