diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx
index 69cd8be..ebe414d 100644
--- a/src/screens/ActivePickListScreen.test.tsx
+++ b/src/screens/ActivePickListScreen.test.tsx
@@ -133,4 +133,51 @@ describe('ActivePickListScreen product search', () => {
expect(updateMock).toHaveBeenCalledWith('item-1', expect.objectContaining({ quantity: 3 }));
expect(addMock).not.toHaveBeenCalled();
});
+
+ it('hides picked items when show picked is unchecked', async () => {
+ pickItemsMock.mockReturnValue([
+ {
+ id: 'item-1',
+ pick_list_id: 'list-1',
+ product_id: 'prod-1',
+ quantity: 1,
+ is_carton: false,
+ status: 'picked',
+ created_at: 0,
+ updated_at: 0,
+ },
+ {
+ id: 'item-2',
+ pick_list_id: 'list-1',
+ product_id: 'prod-2',
+ quantity: 1,
+ is_carton: false,
+ status: 'pending',
+ created_at: 0,
+ updated_at: 0,
+ },
+ ]);
+
+ const user = userEvent.setup();
+
+ render(
+
+
+ } />
+
+ ,
+ );
+
+ expect(screen.getByText('Cola')).toBeVisible();
+ expect(screen.getByText('Chips')).toBeVisible();
+
+ const togglePicked = screen.getByLabelText(/show picked/i);
+ await user.click(togglePicked);
+
+ expect(screen.queryByText('Cola')).not.toBeInTheDocument();
+ expect(screen.getByText('Chips')).toBeVisible();
+
+ await user.click(togglePicked);
+ expect(screen.getByText('Cola')).toBeVisible();
+ });
});
diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx
index 4f3820a..5ab6eb5 100644
--- a/src/screens/ActivePickListScreen.tsx
+++ b/src/screens/ActivePickListScreen.tsx
@@ -1,6 +1,7 @@
import {
Autocomplete,
Button,
+ Checkbox,
Container,
FormControl,
FormControlLabel,
@@ -32,6 +33,7 @@ export const ActivePickListScreen = () => {
const [selectedProduct, setSelectedProduct] = useState(null);
const [query, setQuery] = useState('');
const [itemFilter, setItemFilter] = useState<'all' | 'cartons' | 'units'>('all');
+ const [showPicked, setShowPicked] = useState(true);
const areaName = useMemo(
() => areas.find((area) => area.id === pickList?.area_id)?.name ?? 'Area',
@@ -56,16 +58,18 @@ export const ActivePickListScreen = () => {
}, [filteredProducts, selectedProduct]);
const visibleItems = useMemo(() => {
+ let filteredItems = showPicked ? items : items.filter((item) => item.status !== 'picked');
+
if (itemFilter === 'cartons') {
- return items.filter((item) => item.is_carton);
+ return filteredItems.filter((item) => item.is_carton);
}
if (itemFilter === 'units') {
- return items.filter((item) => !item.is_carton);
+ return filteredItems.filter((item) => !item.is_carton);
}
- return items;
- }, [itemFilter, items]);
+ return filteredItems;
+ }, [itemFilter, items, showPicked]);
const handleIncrementQuantity = async (itemId: string) => {
const existing = await db.pickItems.get(itemId);
@@ -194,6 +198,15 @@ export const ActivePickListScreen = () => {
Selecting a product immediately adds it to the pick list.
+ setShowPicked(event.target.checked)}
+ />
+ }
+ label="Show picked"
+ />
Filter list by packaging