Add delete control for pick list items

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>
   );

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>