Merge pull request #39 from beatz174-bit/codex/add-confirmation-prompt-for-pick-list-deletion

Add confirmation dialog for pick item deletion

src/components/PickItemRow.tsx

@@ -1,5 +1,17 @@
-import { Add, Delete, Remove, SwapHoriz } from '@mui/icons-material';
-import { Checkbox, IconButton, Stack, Typography } from '@mui/material';
+import { Add, Delete } from '@mui/icons-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';
 
@@ -22,6 +34,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';
@@ -30,6 +43,11 @@ export const PickItemRow = ({
     onStatusChange(checked ? 'picked' : 'pending');
   };
 
+  const handleConfirmDelete = () => {
+    onDelete();
+    setIsConfirmOpen(false);
+  };
+
   return (
     <Stack
       direction="row"
@@ -81,6 +99,33 @@ export const PickItemRow = ({
           <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>
   );
 };