diff --git a/src/components/PickItemRow.tsx b/src/components/PickItemRow.tsx index 4089c5c..2c29468 100644 --- a/src/components/PickItemRow.tsx +++ b/src/components/PickItemRow.tsx @@ -7,8 +7,8 @@ import { useSwipe } from '../hooks/useSwipe'; interface PickItemRowProps { item: PickItem; product?: Product | null; - onIncrementUnit: () => void; - onIncrementBulk: () => void; + onIncrementQuantity: () => void; + onToggleCarton: () => void; onSwipeLeft: () => void; onSwipeRight: () => void; } @@ -22,14 +22,16 @@ const statusColor: Record = { export const PickItemRow = ({ item, product, - onIncrementUnit, - onIncrementBulk, + onIncrementQuantity, + onToggleCarton, onSwipeLeft, onSwipeRight, }: PickItemRowProps) => { - const longPressHandlers = useLongPress({ onLongPress: onIncrementBulk, onClick: onIncrementUnit }); + const longPressHandlers = useLongPress({ onLongPress: onToggleCarton, onClick: onIncrementQuantity }); const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight }); + const isCarton = item.quantity_bulk > 0; + return ( {product?.name ?? 'Unknown product'} - {item.quantity_units} units / {item.quantity_bulk} bulk + Qty: {item.quantity_units} - + + {isCarton ? : null} + + ); }; diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index 3a4b04d..020494e 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/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)} /> diff --git a/src/screens/AddItemScreen.tsx b/src/screens/AddItemScreen.tsx index 308aa40..3b1ac09 100644 --- a/src/screens/AddItemScreen.tsx +++ b/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(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 = () => { /> )} /> - - + { + const value = Number(event.target.value); + setQuantity(Number.isNaN(value) || value < 1 ? 1 : value); + }} + helperText={quantityHelperText} + fullWidth + /> + setIsCarton(event.target.checked)} />} + label={cartonLabel} + />