diff --git a/src/screens/ActivePickListScreen.test.tsx b/src/screens/ActivePickListScreen.test.tsx
index 20a8ee9..e19ada7 100644
--- a/src/screens/ActivePickListScreen.test.tsx
+++ b/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(
+
+
+ } />
+
+ ,
+ );
+
+ 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(
+
+
+ } />
+
+ ,
+ );
+
+ 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(
+
+
+ } />
+
+ ,
+ );
+
+ 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([
{
diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx
index 3269c41..048bbe2 100644
--- a/src/screens/ActivePickListScreen.tsx
+++ b/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 }}
>
} label="All" />
- } label="Cartons" />
- } label="Units" />
+ }
+ label="Cartons"
+ disabled={!hasCartonItems}
+ />
+ }
+ label="Units"
+ disabled={!hasUnitItems}
+ />