From dc2aeaa3dddb45961ee882a3f8318e1fda151f4e Mon Sep 17 00:00:00 2001
From: beatz174-bit <beatz174@gmail.com>
Date: Sun, 23 Nov 2025 12:03:54 +1000
Subject: [PATCH] Add delete control for pick list items

---
 src/components/PickItemRow.tsx       | 9 +++++++--
 src/screens/ActivePickListScreen.tsx | 5 +++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx
index 5e3be08..6046528 100644
--- a/src/components/PickItemRow.tsx
+++ b/src/components/PickItemRow.tsx
@@ -1,4 +1,4 @@
-import { Add } from '@mui/icons-material';
+import { Add, Delete } from '@mui/icons-material';
 import { Button, Checkbox, Stack, Typography } from '@mui/material';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
@@ -9,6 +9,7 @@ interface PickItemRowProps {
   onIncrementUnit: () => void;
   onIncrementBulk: () => void;
   onToggleStatus: () => void;
+  onDelete: () => void;
 }
 
 export const PickItemRow = ({
@@ -17,6 +18,7 @@ export const PickItemRow = ({
   onIncrementUnit,
   onIncrementBulk,
   onToggleStatus,
+  onDelete,
 }: PickItemRowProps) => {
   const isPicked = item.status === 'picked';
 
@@ -42,13 +44,16 @@ export const PickItemRow = ({
           </Typography>
         </Stack>
       </Stack>
-      <Stack direction="row" spacing={1}>
+      <Stack direction="row" spacing={1} alignItems="center">
         <Button variant="outlined" size="small" startIcon={<Add />} onClick={onIncrementUnit}>
           Unit
         </Button>
         <Button variant="outlined" size="small" startIcon={<Add />} onClick={onIncrementBulk}>
           Bulk
         </Button>
+        <Button variant="text" color="error" size="small" startIcon={<Delete />} onClick={onDelete}>
+          Delete
+        </Button>
       </Stack>
     </Stack>
   );
diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx
index 9d44e18..5e30ec3 100644
--- a/src/screens/ActivePickListScreen.tsx
+++ b/src/screens/ActivePickListScreen.tsx
@@ -44,6 +44,10 @@ export const ActivePickListScreen = () => {
     await db.pickItems.update(itemId, { status: nextStatus, updated_at: Date.now() });
   };
 
+  const handleDeleteItem = async (itemId: string) => {
+    await db.pickItems.delete(itemId);
+  };
+
   const returnToLists = () => {
     navigate('/pick-lists');
   };
@@ -70,6 +74,7 @@ export const ActivePickListScreen = () => {
             onIncrementUnit={() => handleIncrementUnit(item.id)}
             onIncrementBulk={() => handleIncrementBulk(item.id)}
             onToggleStatus={() => handleToggleStatus(item.id)}
+            onDelete={() => handleDeleteItem(item.id)}
           />
         ))}
       </Stack>