Handle packaging filter when hiding picked items

src/screens/ActivePickListScreen.test.tsx

@@ -355,8 +355,54 @@ describe('ActivePickListScreen product search', () => {
       </MemoryRouter>,
     );
 
+    expect(screen.getByRole('radio', { name: /all/i })).toBeChecked();
     expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
+  });
+
+  it('evaluates packaging filters based on visible (unpicketed) items when hiding picked', async () => {
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: true,
+        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.getByRole('radio', { name: /cartons/i })).toBeEnabled();
     expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
+
+    await user.click(screen.getByLabelText(/show picked/i));
+
+    await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled());
+
+    expect(screen.getByRole('radio', { name: /all/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
   });
 
   it('resets the filter when the selected packaging type is unavailable', async () => {
@@ -418,7 +464,8 @@ describe('ActivePickListScreen product search', () => {
     );
 
     await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled());
-    expect(screen.getByRole('radio', { name: /units/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /all/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeDisabled();
   });
 
   it('hides picked items when show picked is unchecked', async () => {

src/screens/ActivePickListScreen.tsx

@@ -57,8 +57,13 @@ export const ActivePickListScreen = () => {
     [areas, pickList?.area_id],
   );
 
+  const visibleItemsByStatus = useMemo(
+    () => (showPicked ? items : items.filter((item) => item.status !== 'picked')),
+    [items, showPicked],
+  );
+
   const sortedItems = useMemo(() => {
-    return [...items].sort((a, b) => {
+    return [...visibleItemsByStatus].sort((a, b) => {
       const productA = productMap.get(a.product_id);
       const productB = productMap.get(b.product_id);
 
@@ -79,7 +84,7 @@ export const ActivePickListScreen = () => {
 
       return timeA - timeB;
     });
-  }, [items, productMap]);
+  }, [visibleItemsByStatus, productMap]);
 
   const sortedProducts = useMemo(() => {
     const uniqueProducts = new Map<string, Product>();
@@ -98,8 +103,16 @@ export const ActivePickListScreen = () => {
     );
   }, [products]);
 
-  const hasCartonItems = useMemo(() => items.some((item) => item.is_carton), [items]);
-  const hasUnitItems = useMemo(() => items.some((item) => !item.is_carton), [items]);
+  const hasCartonItems = useMemo(
+    () => visibleItemsByStatus.some((item) => item.is_carton),
+    [visibleItemsByStatus],
+  );
+  const hasUnitItems = useMemo(
+    () => visibleItemsByStatus.some((item) => !item.is_carton),
+    [visibleItemsByStatus],
+  );
+  const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
+  const singlePackagingType = packagingTypeCount === 1;
 
   const filteredProducts = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
@@ -125,12 +138,20 @@ export const ActivePickListScreen = () => {
   }, [allItemsPicked, showPicked]);
 
   useEffect(() => {
-    if (itemFilter === 'cartons' && !hasCartonItems) {
-      setItemFilter(hasUnitItems ? 'units' : 'all');
-    } else if (itemFilter === 'units' && !hasUnitItems) {
-      setItemFilter(hasCartonItems ? 'cartons' : 'all');
+    if (packagingTypeCount <= 1) {
+      if (itemFilter !== 'all') {
+        setItemFilter('all');
+      }
+
+      return;
     }
-  }, [itemFilter, hasCartonItems, hasUnitItems]);
+
+    if (itemFilter === 'cartons' && !hasCartonItems) {
+      setItemFilter('units');
+    } else if (itemFilter === 'units' && !hasUnitItems) {
+      setItemFilter('cartons');
+    }
+  }, [itemFilter, hasCartonItems, hasUnitItems, packagingTypeCount]);
 
   const visibleItems = useMemo(() => {
     let filteredItems = showPicked
@@ -326,13 +347,13 @@ export const ActivePickListScreen = () => {
                   value="cartons"
                   control={<Radio />}
                   label="Cartons"
-                  disabled={!hasCartonItems}
+                  disabled={singlePackagingType || !hasCartonItems}
                 />
                 <FormControlLabel
                   value="units"
                   control={<Radio />}
                   label="Units"
-                  disabled={!hasUnitItems}
+                  disabled={singlePackagingType || !hasUnitItems}
                 />
               </RadioGroup>
               <Stack direction="row" spacing={1} alignItems="center" sx={{ ml: { xs: 0, sm: 2 } }}>