diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx index 522e02d..4f3820a 100644 --- a/src/screens/ActivePickListScreen.tsx +++ b/src/screens/ActivePickListScreen.tsx @@ -2,7 +2,11 @@ import { Autocomplete, Button, Container, + FormControl, + FormControlLabel, InputAdornment, + Radio, + RadioGroup, Stack, TextField, Typography, @@ -27,6 +31,7 @@ export const ActivePickListScreen = () => { const navigate = useNavigate(); const [selectedProduct, setSelectedProduct] = useState(null); const [query, setQuery] = useState(''); + const [itemFilter, setItemFilter] = useState<'all' | 'cartons' | 'units'>('all'); const areaName = useMemo( () => areas.find((area) => area.id === pickList?.area_id)?.name ?? 'Area', @@ -50,6 +55,18 @@ export const ActivePickListScreen = () => { } }, [filteredProducts, selectedProduct]); + const visibleItems = useMemo(() => { + if (itemFilter === 'cartons') { + return items.filter((item) => item.is_carton); + } + + if (itemFilter === 'units') { + return items.filter((item) => !item.is_carton); + } + + return items; + }, [itemFilter, items]); + const handleIncrementQuantity = async (itemId: string) => { const existing = await db.pickItems.get(itemId); if (!existing) return; @@ -177,6 +194,22 @@ export const ActivePickListScreen = () => { Selecting a product immediately adds it to the pick list. + + + Filter list by packaging + + + setItemFilter(event.target.value as 'all' | 'cartons' | 'units') + } + > + } label="All" /> + } label="Cartons" /> + } label="Units" /> + + {pickList?.notes ? ( @@ -185,7 +218,7 @@ export const ActivePickListScreen = () => { ) : null} - {items.map((item) => ( + {visibleItems.map((item) => (