Simplify pick item quantity handling

src/screens/ActivePickListScreen.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { useAreas, usePickItems, usePickList, useProducts } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 import { PickItemRow } from '../components/PickItemRow';
+import { PickItem } from '../models/PickItem';
 
 export const ActivePickListScreen = () => {
   const { id } = useParams();
@@ -31,14 +32,17 @@ export const ActivePickListScreen = () => {
   const handleToggleCarton = async (itemId: string) => {
     const existing = await db.pickItems.get(itemId);
     if (!existing) return;
+
     await db.pickItems.update(itemId, {
-      quantity_bulk: existing.quantity_bulk > 0 ? 0 : 1,
+      is_carton: !existing.is_carton,
+      quantity: existing.quantity || 1,
       updated_at: Date.now(),
     });
   };
 
-  const handleSwipeLeft = async (itemId: string) => {
-    await db.pickItems.update(itemId, { status: 'picked', updated_at: Date.now() });
+  const handleStatusChange = async (itemId: string, status: PickItem['status']) => {
+    const nextStatus = status === 'picked' ? 'picked' : 'pending';
+    await db.pickItems.update(itemId, { status: nextStatus, updated_at: Date.now() });
   };
 
   const handleDeleteItem = async (itemId: string) => {
@@ -70,8 +74,8 @@ export const ActivePickListScreen = () => {
             product={products.find((p) => p.id === item.product_id)}
             onIncrementQuantity={() => handleIncrementQuantity(item.id)}
             onToggleCarton={() => handleToggleCarton(item.id)}
-            onSwipeLeft={() => handleSwipeLeft(item.id)}
-            onSwipeRight={() => handleSwipeRight(item.id)}
+            onStatusChange={(status) => handleStatusChange(item.id, status)}
+            onDelete={() => handleDeleteItem(item.id)}
           />
         ))}
       </Stack>

src/screens/AddItemScreen.tsx

@@ -1,20 +1,11 @@
-import {
-  Autocomplete,
-  Button,
-  Checkbox,
-  Container,
-  FormControlLabel,
-  InputAdornment,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
+import { Autocomplete, Button, Container, InputAdornment, Stack, TextField, Typography } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import { usePickItems, useProducts } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
+import { NumericStepper } from '../components/NumericStepper';
 
 export const AddItemScreen = () => {
   const { id } = useParams();
@@ -23,8 +14,8 @@ export const AddItemScreen = () => {
   const products = useProducts();
   const [selectedProduct, setSelectedProduct] = useState<typeof products[number] | null>(null);
   const [query, setQuery] = useState('');
-  const [quantity, setQuantity] = useState(1);
-  const [isCarton, setIsCarton] = useState(false);
+  const [units, setUnits] = useState(0);
+  const [cartons, setCartons] = useState(0);
   const navigate = useNavigate();
   const unitLabel = selectedProduct?.unit_type ?? 'Units';
   const cartonLabel = selectedProduct?.bulk_name ?? 'Cartons';
@@ -47,15 +38,10 @@ export const AddItemScreen = () => {
   }, [filteredProducts, selectedProduct]);
 
   useEffect(() => {
-    setQuantity(1);
-    setIsCarton(false);
+    setUnits(0);
+    setCartons(0);
   }, [selectedProduct]);
 
-  const quantityHelperText = selectedProduct?.unit_type
-    ? `Enter ${selectedProduct.unit_type} to pick`
-    : 'Enter the quantity to pick';
-  const cartonLabel = selectedProduct?.bulk_name ? `Carton (${selectedProduct.bulk_name})` : 'Carton';
-
   const addItem = async () => {
     const productId = selectedProduct?.id;
 
@@ -87,7 +73,7 @@ export const AddItemScreen = () => {
       });
     };
 
-    await Promise.all([addOrUpdateItem(false, units), addOrUpdateItem(true, bulk)]);
+    await Promise.all([addOrUpdateItem(false, units), addOrUpdateItem(true, cartons)]);
     navigate(`/pick-lists/${id}`);
   };
 
@@ -135,7 +121,7 @@ export const AddItemScreen = () => {
           )}
         />
         <NumericStepper label={unitLabel} value={units} onChange={setUnits} />
-        <NumericStepper label={cartonLabel} value={bulk} onChange={setBulk} />
+        <NumericStepper label={cartonLabel} value={cartons} onChange={setCartons} />
         <Button variant="contained" disabled={!selectedProduct} onClick={addItem}>
           Add to List
         </Button>