Add show picked filter to pick list

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(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    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();
+  });
 });

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<Product | null>(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;
+    return filteredItems;
-  }, [itemFilter, items]);
+  }, [itemFilter, items, showPicked]);
 
   const handleIncrementQuantity = async (itemId: string) => {
     const existing = await db.pickItems.get(itemId);
@@ -194,6 +198,15 @@ export const ActivePickListScreen = () => {
           <Typography variant="caption" color="text.secondary">
             Selecting a product immediately adds it to the pick list.
           </Typography>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={showPicked}
+                onChange={(event) => setShowPicked(event.target.checked)}
+              />
+            }
+            label="Show picked"
+          />
           <FormControl>
             <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5 }}>
               Filter list by packaging