Disable unavailable packaging filters

src/screens/ActivePickListScreen.test.tsx

@@ -1,5 +1,5 @@
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { ActivePickListScreen } from './ActivePickListScreen';
@@ -327,6 +327,94 @@ describe('ActivePickListScreen product search', () => {
     expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']);
   });
 
+  it('disables packaging filters when only one packaging type is present', () => {
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: false,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+    ]);
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: /units/i })).toBeEnabled();
+  });
+
+  it('resets the filter when the selected packaging type is unavailable', async () => {
+    const user = userEvent.setup();
+
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: true,
+        status: 'pending',
+        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 { rerender } = render(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await user.click(screen.getByRole('radio', { name: /cartons/i }));
+    expect(screen.getByRole('radio', { name: /cartons/i })).toBeChecked();
+
+    pickItemsMock.mockReturnValue([
+      {
+        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,
+      },
+    ]);
+
+    rerender(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => expect(screen.getByRole('radio', { name: /cartons/i })).toBeDisabled());
+    expect(screen.getByRole('radio', { name: /units/i })).toBeChecked();
+  });
+
   it('hides picked items when show picked is unchecked', async () => {
     pickItemsMock.mockReturnValue([
       {

src/screens/ActivePickListScreen.tsx

@@ -98,6 +98,9 @@ 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 filteredProducts = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) return sortedProducts;
@@ -121,6 +124,14 @@ export const ActivePickListScreen = () => {
     }
   }, [allItemsPicked, showPicked]);
 
+  useEffect(() => {
+    if (itemFilter === 'cartons' && !hasCartonItems) {
+      setItemFilter(hasUnitItems ? 'units' : 'all');
+    } else if (itemFilter === 'units' && !hasUnitItems) {
+      setItemFilter(hasCartonItems ? 'cartons' : 'all');
+    }
+  }, [itemFilter, hasCartonItems, hasUnitItems]);
+
   const visibleItems = useMemo(() => {
     let filteredItems = showPicked
       ? sortedItems
@@ -311,8 +322,18 @@ export const ActivePickListScreen = () => {
                 sx={{ flexGrow: 1 }}
               >
                 <FormControlLabel value="all" control={<Radio />} label="All" />
-                <FormControlLabel value="cartons" control={<Radio />} label="Cartons" />
-                <FormControlLabel value="units" control={<Radio />} label="Units" />
+                <FormControlLabel
+                  value="cartons"
+                  control={<Radio />}
+                  label="Cartons"
+                  disabled={!hasCartonItems}
+                />
+                <FormControlLabel
+                  value="units"
+                  control={<Radio />}
+                  label="Units"
+                  disabled={!hasUnitItems}
+                />
               </RadioGroup>
               <Stack direction="row" spacing={1} alignItems="center" sx={{ ml: { xs: 0, sm: 2 } }}>
                 <FormControlLabel