Add carton flag to pick item quantity handling

src/screens/ActivePickListScreen.tsx

@@ -19,7 +19,7 @@ export const ActivePickListScreen = () => {
     [areas, pickList?.area_id],
   );
 
-  const handleIncrementUnit = async (itemId: string) => {
+  const handleIncrementQuantity = async (itemId: string) => {
     const existing = await db.pickItems.get(itemId);
     if (!existing) return;
     await db.pickItems.update(itemId, {
@@ -28,11 +28,11 @@ export const ActivePickListScreen = () => {
     });
   };
 
-  const handleIncrementBulk = async (itemId: string) => {
+  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 + 1,
+      quantity_bulk: existing.quantity_bulk > 0 ? 0 : 1,
       updated_at: Date.now(),
     });
   };
@@ -68,8 +68,8 @@ export const ActivePickListScreen = () => {
             key={item.id}
             item={item}
             product={products.find((p) => p.id === item.product_id)}
-            onIncrementUnit={() => handleIncrementUnit(item.id)}
-            onIncrementBulk={() => handleIncrementBulk(item.id)}
+            onIncrementQuantity={() => handleIncrementQuantity(item.id)}
+            onToggleCarton={() => handleToggleCarton(item.id)}
             onSwipeLeft={() => handleSwipeLeft(item.id)}
             onSwipeRight={() => handleSwipeRight(item.id)}
           />

src/screens/AddItemScreen.tsx

@@ -1,17 +1,18 @@
 import {
   Autocomplete,
   Button,
+  Checkbox,
   Container,
+  FormControlLabel,
+  InputAdornment,
   Stack,
   TextField,
   Typography,
-  InputAdornment,
 } 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 { NumericStepper } from '../components/NumericStepper';
 import { usePickItems, useProducts } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 
@@ -22,8 +23,8 @@ export const AddItemScreen = () => {
   const products = useProducts();
   const [selectedProduct, setSelectedProduct] = useState<typeof products[number] | null>(null);
   const [query, setQuery] = useState('');
-  const [units, setUnits] = useState(1);
-  const [bulk, setBulk] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [isCarton, setIsCarton] = useState(false);
   const navigate = useNavigate();
 
   const existingProductIds = useMemo(
@@ -53,6 +54,16 @@ export const AddItemScreen = () => {
     }
   }, [filteredProducts, selectedProduct]);
 
+  useEffect(() => {
+    setQuantity(1);
+    setIsCarton(false);
+  }, [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;
 
@@ -61,8 +72,8 @@ export const AddItemScreen = () => {
       id: uuidv4(),
       pick_list_id: id,
       product_id: productId,
-      quantity_units: units,
-      quantity_bulk: bulk,
+      quantity_units: quantity,
+      quantity_bulk: isCarton ? 1 : 0,
       status: 'pending',
       created_at: Date.now(),
       updated_at: Date.now(),
@@ -113,8 +124,22 @@ export const AddItemScreen = () => {
             />
           )}
         />
-        <NumericStepper label="Units" value={units} onChange={setUnits} />
-        <NumericStepper label="Bulk" value={bulk} onChange={setBulk} />
+        <TextField
+          label="Quantity"
+          type="number"
+          inputProps={{ min: 1 }}
+          value={quantity}
+          onChange={(event) => {
+            const value = Number(event.target.value);
+            setQuantity(Number.isNaN(value) || value < 1 ? 1 : value);
+          }}
+          helperText={quantityHelperText}
+          fullWidth
+        />
+        <FormControlLabel
+          control={<Checkbox checked={isCarton} onChange={(event) => setIsCarton(event.target.checked)} />}
+          label={cartonLabel}
+        />
         <Button variant="contained" disabled={!selectedProduct} onClick={addItem}>
           Add to List
         </Button>