Disable show picked toggle when all items picked

src/screens/ActivePickListScreen.test.tsx

@@ -180,4 +180,31 @@ describe('ActivePickListScreen product search', () => {
     await user.click(togglePicked);
     expect(screen.getByText('Cola')).toBeVisible();
   });
+
+  it('disables show picked toggle when all items are picked', 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,
+      },
+    ]);
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const togglePicked = screen.getByLabelText(/show picked/i);
+    expect(togglePicked).toBeDisabled();
+    expect(togglePicked).toBeChecked();
+  });
 });

src/screens/ActivePickListScreen.tsx

@@ -38,6 +38,11 @@ export const ActivePickListScreen = () => {
   const [itemFilter, setItemFilter] = useState<'all' | 'cartons' | 'units'>('all');
   const [showPicked, setShowPicked] = useState(true);
 
+  const allItemsPicked = useMemo(
+    () => items.length > 0 && items.every((item) => item.status === 'picked'),
+    [items],
+  );
+
   const areaName = useMemo(
     () => areas.find((area) => area.id === pickList?.area_id)?.name ?? 'Area',
     [areas, pickList?.area_id],
@@ -60,6 +65,12 @@ export const ActivePickListScreen = () => {
     }
   }, [filteredProducts, selectedProduct]);
 
+  useEffect(() => {
+    if (allItemsPicked && !showPicked) {
+      setShowPicked(true);
+    }
+  }, [allItemsPicked, showPicked]);
+
   const visibleItems = useMemo(() => {
     let filteredItems = showPicked ? items : items.filter((item) => item.status !== 'picked');
 
@@ -257,6 +268,7 @@ export const ActivePickListScreen = () => {
                     <Checkbox
                       checked={showPicked}
                       onChange={(event) => setShowPicked(event.target.checked)}
+                      disabled={allItemsPicked}
                     />
                   }
                   label="Show picked"