From a4f03c799f33a568af0599466ab5df3c3842a4f4 Mon Sep 17 00:00:00 2001
From: beatz174-bit <beatz174@gmail.com>
Date: Sun, 23 Nov 2025 13:02:02 +1000
Subject: [PATCH] Add confirmation dialog for deleting pick items

---
 src/components/PickItemRow.tsx | 53 ++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx
index 2c076cc..f1974bb 100644
--- a/src/components/PickItemRow.tsx
+++ b/src/components/PickItemRow.tsx
@@ -1,5 +1,17 @@
 import { Add, Delete } from '@mui/icons-material';
-import { Button, Checkbox, IconButton, Stack, Typography } from '@mui/material';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useState } from 'react';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
@@ -20,6 +32,7 @@ export const PickItemRow = ({
   onStatusChange,
   onDelete,
 }: PickItemRowProps) => {
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const packagingLabel = item.is_carton
     ? product?.bulk_name ?? 'Carton'
     : product?.unit_type ?? 'Unit';
@@ -28,6 +41,11 @@ export const PickItemRow = ({
     onStatusChange(checked ? 'picked' : 'pending');
   };
 
+  const handleConfirmDelete = () => {
+    onDelete();
+    setIsConfirmOpen(false);
+  };
+
   return (
     <Stack
       direction="row"
@@ -64,10 +82,41 @@ export const PickItemRow = ({
         <Button variant="contained" size="small" startIcon={<Add />} onClick={onIncrementQuantity}>
           Add 1
         </Button>
-        <IconButton color="error" onClick={onDelete} aria-label="Delete item">
+        <IconButton
+          color="error"
+          onClick={() => setIsConfirmOpen(true)}
+          aria-label={`Delete ${product?.name ?? 'item'}`}
+        >
           <Delete />
         </IconButton>
       </Stack>
+
+      <Dialog
+        open={isConfirmOpen}
+        onClose={() => setIsConfirmOpen(false)}
+        aria-labelledby="confirm-delete-title"
+        aria-describedby="confirm-delete-description"
+      >
+        <DialogTitle id="confirm-delete-title">Delete item</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="confirm-delete-description">
+            {`Are you sure you want to delete ${product?.name ?? 'this product'} from the pick list?`}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setIsConfirmOpen(false)} aria-label="Cancel delete" autoFocus>
+            Cancel
+          </Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handleConfirmDelete}
+            aria-label="Confirm delete"
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Stack>
   );
 };