Merge pull request #108 from beatz174-bit/codex/implement-styling-and-popup-changes-for-pick-list

Refine pick list item layout with popup controls

src/components/PickItemRow.tsx

@@ -1,4 +1,4 @@
-import { Add, Delete, Inventory2, Remove } from '@mui/icons-material';
+import { Add, Close, Delete, Inventory2, Remove } from '@mui/icons-material';
 import {
   Button,
   Checkbox,
@@ -36,6 +36,7 @@ export const PickItemRow = ({
   onDelete,
 }: PickItemRowProps) => {
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [isControlsOpen, setIsControlsOpen] = useState(false);
   const packagingLabel = item.is_carton
     ? product?.bulk_name ?? 'Carton'
     : product?.unit_type ?? 'Unit';
@@ -55,7 +56,22 @@ export const PickItemRow = ({
       alignItems="center"
       justifyContent="space-between"
       spacing={1.5}
-      sx={{ p: 1, borderRadius: 1, bgcolor: 'background.paper', boxShadow: 1 }}
+      sx={{
+        p: 1,
+        borderRadius: 1,
+        bgcolor: 'background.paper',
+        boxShadow: 1,
+        cursor: 'pointer',
+      }}
+      onClick={() => setIsControlsOpen(true)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          setIsControlsOpen(true);
+        }
+      }}
     >
       <Stack direction="row" spacing={1} alignItems="center" flex={1} minWidth={0}>
         <Checkbox
@@ -63,18 +79,60 @@ 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.25} minWidth={0} flex={1}>
+        <Stack spacing={0.5} minWidth={0} flex={1}>
-          <Typography variant="subtitle1" noWrap>
+          <Typography
+            variant="subtitle1"
+            noWrap
+            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+          >
+            <Typography
+              component="span"
+              variant="subtitle1"
+              noWrap
+              sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
+            >
               {product?.name ?? 'Unknown product'}
             </Typography>
+            <Typography
+              component="span"
+              variant="subtitle1"
+              sx={{ fontWeight: 700, whiteSpace: 'nowrap' }}
+            >
+              {item.quantity} {packagingLabel}
+            </Typography>
+          </Typography>
           <Typography variant="caption" color="text.secondary" noWrap>
-            Qty: {item.quantity} {packagingLabel}
+            Tap to adjust quantity and packaging
           </Typography>
         </Stack>
       </Stack>
 
-      <Stack direction="row" spacing={1} alignItems="center">
+      <Dialog
+        open={isControlsOpen}
+        onClose={() => setIsControlsOpen(false)}
+        fullWidth
+        maxWidth="xs"
+        aria-labelledby="item-controls-title"
+      >
+        <DialogTitle
+          id="item-controls-title"
+          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+        >
+          <Typography variant="h6" noWrap sx={{ minWidth: 0, flex: 1 }}>
+            {product?.name ?? 'Unknown product'}
+          </Typography>
+          <IconButton aria-label="Close controls" onClick={() => setIsControlsOpen(false)}>
+            <Close />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent>
+          <Stack spacing={2} alignItems="stretch">
+            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+              Quantity: {item.quantity} {packagingLabel}
+            </Typography>
+            <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap">
               <IconButton
                 aria-label={`Switch to ${item.is_carton ? 'unit' : 'carton'} packaging`}
                 color={item.is_carton ? 'primary' : 'default'}
@@ -109,6 +167,9 @@ export const PickItemRow = ({
                 <Delete />
               </IconButton>
             </Stack>
+          </Stack>
+        </DialogContent>
+      </Dialog>
 
       <Dialog
         open={isConfirmOpen}