Merge branch 'main' into codex/sort-product-list-alphabetically-z5figo

src/screens/ActivePickListScreen.test.tsx

@@ -49,7 +49,41 @@ const defaultProducts: Product[] = [
 
 vi.mock('../hooks/dataHooks', () => ({
   usePickItems: () => pickItemsMock(),
-  useProducts: () => productsMock(),
+  useProducts: () => [
+    {
+      id: 'prod-1',
+      name: 'Cola',
+      category: 'Drinks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '111',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
+    {
+      id: 'prod-2',
+      name: 'Chips',
+      category: 'Snacks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '222',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
+    {
+      id: 'prod-3',
+      name: 'Apple Juice',
+      category: 'Drinks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '333',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
+  ],
   usePickList: () => ({ id: 'list-1', area_id: 'area-1', created_at: 0 }),
   useAreas: () => [{ id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }],
 }));
@@ -234,6 +268,65 @@ describe('ActivePickListScreen product search', () => {
     expect(addMock).not.toHaveBeenCalled();
   });
 
+  it('sorts pick list items by product name and packaging', () => {
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 2,
+        is_carton: false,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+      {
+        id: 'item-2',
+        pick_list_id: 'list-1',
+        product_id: 'prod-3',
+        quantity: 1,
+        is_carton: true,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+      {
+        id: 'item-3',
+        pick_list_id: 'list-1',
+        product_id: 'prod-2',
+        quantity: 1,
+        is_carton: false,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+      {
+        id: 'item-4',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: true,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+    ]);
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const itemLabels = screen
+      .getAllByText(/Apple Juice|Chips|Cola/)
+      .map((element) => element.textContent);
+
+    expect(itemLabels).toEqual(['Apple Juice', 'Chips', 'Cola', 'Cola']);
+  });
+
   it('hides picked items when show picked is unchecked', async () => {
     pickItemsMock.mockReturnValue([
       {

src/screens/ActivePickListScreen.tsx

@@ -89,7 +89,9 @@ export const ActivePickListScreen = () => {
   }, [allItemsPicked, showPicked]);
 
   const visibleItems = useMemo(() => {
-    let filteredItems = showPicked ? items : items.filter((item) => item.status !== 'picked');
+    let filteredItems = showPicked
+      ? sortedItems
+      : sortedItems.filter((item) => item.status !== 'picked');
 
     if (itemFilter === 'cartons') {
       return filteredItems.filter((item) => item.is_carton);
@@ -308,7 +310,7 @@ export const ActivePickListScreen = () => {
           <PickItemRow
             key={item.id}
             item={item}
-            product={products.find((p) => p.id === item.product_id)}
+            product={productMap.get(item.product_id)}
             onIncrementQuantity={() => handleIncrementQuantity(item.id)}
             onDecrementQuantity={() => handleDecrementQuantity(item.id)}
             onToggleCarton={() => handleToggleCarton(item.id)}

src/screens/PickListsScreen.test.tsx

@@ -0,0 +1,54 @@
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { PickListsScreen } from './PickListsScreen';
+
+const areasMock = [
+  { id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 },
+  { id: 'area-2', name: 'back room', created_at: 0, updated_at: 0 },
+  { id: 'area-3', name: 'Cafe', created_at: 0, updated_at: 0 },
+];
+
+const pickListsMock = [
+  { id: 'list-2', area_id: 'area-2', created_at: 3 },
+  { id: 'list-3', area_id: 'area-3', created_at: 4 },
+  { id: 'list-1', area_id: 'area-1', created_at: 5 },
+];
+
+vi.mock('../hooks/dataHooks', () => ({
+  usePickLists: () => pickListsMock,
+  useAreas: () => areasMock,
+}));
+
+vi.mock('../context/DBProvider', () => ({
+  useDatabase: () => ({
+    pickItems: {
+      where: () => ({
+        equals: () => ({ delete: vi.fn() }),
+      }),
+    },
+    pickLists: {
+      update: vi.fn(),
+      delete: vi.fn(),
+      where: () => ({
+        equals: () => ({ delete: vi.fn() }),
+      }),
+    },
+  }),
+}));
+
+describe('PickListsScreen sorting', () => {
+  it('sorts pick lists alphabetically by area name', () => {
+    render(
+      <MemoryRouter>
+        <PickListsScreen />
+      </MemoryRouter>,
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+
+    expect(within(listItems[0]).getByText('back room')).toBeVisible();
+    expect(within(listItems[1]).getByText('Cafe')).toBeVisible();
+    expect(within(listItems[2]).getByText('Front Counter')).toBeVisible();
+  });
+});

src/screens/PickListsScreen.tsx

@@ -31,11 +31,24 @@ export const PickListsScreen = () => {
   const [areaId, setAreaId] = useState('');
   const [notes, setNotes] = useState('');
 
-  const sortedLists = useMemo(() => {
+  const areaNameById = useMemo(() => {
-    return [...lists].sort((a, b) => a.created_at - b.created_at);
+    const map = new Map<string, string>();
-  }, [lists]);
+    areas.forEach((area) => map.set(area.id, area.name));
+    return map;
+  }, [areas]);
 
-  const getAreaName = (areaId: string) => areas.find((a) => a.id === areaId)?.name ?? 'Unknown area';
+  const sortedLists = useMemo(() => {
+    const locale = new Intl.Collator(undefined, { sensitivity: 'base' });
+    return [...lists].sort((a, b) => {
+      const nameA = areaNameById.get(a.area_id) ?? 'Unknown area';
+      const nameB = areaNameById.get(b.area_id) ?? 'Unknown area';
+      const nameComparison = locale.compare(nameA, nameB);
+      if (nameComparison !== 0) return nameComparison;
+      return a.created_at - b.created_at;
+    });
+  }, [areaNameById, lists]);
+
+  const getAreaName = (areaId: string) => areaNameById.get(areaId) ?? 'Unknown area';
 
   const openEdit = (list: PickList) => {
     setEditingList(list);