Merge branch 'main' into codex/fix-packaging-type-filter-functionality-0suz26

src/screens/ActivePickListScreen.tsx

@@ -25,6 +25,8 @@ import { PickItemRow } from '../components/PickItemRow';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
+const normalizeName = (name: string) => name.trim().toLowerCase();
+
 export const ActivePickListScreen = () => {
   const { id } = useParams();
   const pickList = usePickList(id);
@@ -87,8 +89,8 @@ export const ActivePickListScreen = () => {
       const productA = productMap.get(a.product_id);
       const productB = productMap.get(b.product_id);
 
-      const nameA = normalizeProductName(productA);
-      const nameB = normalizeProductName(productB);
+      const nameA = productA ? normalizeName(productA.name) : '';
+      const nameB = productB ? normalizeName(productB.name) : '';
 
       const nameComparison = nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
       if (nameComparison !== 0) {
@@ -127,9 +129,20 @@ export const ActivePickListScreen = () => {
       }
     });
 
-    return Array.from(dedupedByName.values()).sort((a, b) =>
-      a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }),
-    );
+    return Array.from(dedupedByName.values()).sort((a, b) => {
+      const normalizedNameA = normalizeName(a.name);
+      const normalizedNameB = normalizeName(b.name);
+
+      const nameComparison = normalizedNameA.localeCompare(normalizedNameB, undefined, {
+        sensitivity: 'base',
+      });
+
+      if (nameComparison !== 0) {
+        return nameComparison;
+      }
+
+      return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+    });
   }, [products]);
 
   const categoryFilteredProducts = useMemo(() => {
@@ -154,11 +167,9 @@ export const ActivePickListScreen = () => {
     () => itemsVisibleByStatus.some((item) => item.status !== 'picked'),
     [itemsVisibleByStatus],
   );
-
-  const packagingFiltersDisabled =
-    !showPicked || itemsVisibleByStatus.length === 0 || !visibleHasPicked || !visibleHasUnpicked;
-
-  const appliedItemFilter = packagingFiltersDisabled ? 'all' : itemFilter;
+  const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
+  const singlePackagingType = packagingTypeCount === 1;
+  const packagingFiltersDisabled = !showPicked || allItemsPicked || allItemsUnpicked;
 
   const productIdsInList = useMemo(
     () => new Set(itemState.map((item) => item.product_id)),
@@ -198,6 +209,22 @@ export const ActivePickListScreen = () => {
     }
   }, [itemFilter, packagingFiltersDisabled]);
 
+  useEffect(() => {
+    if (packagingTypeCount <= 1) {
+      if (itemFilter !== 'all') {
+        setItemFilter('all');
+      }
+
+      return;
+    }
+
+    if (itemFilter === 'cartons' && !hasCartonItems) {
+      setItemFilter('units');
+    } else if (itemFilter === 'units' && !hasUnitItems) {
+      setItemFilter('cartons');
+    }
+  }, [itemFilter, packagingFiltersDisabled]);
+
   const visibleItems = useMemo(() => {
     let filteredItems = showPicked
       ? sortedItems