Merge branch 'main' into codex/fix-packaging-type-filter-functionality-2fmtlc

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);
@@ -84,8 +86,8 @@ export const ActivePickListScreen = () => {
       const productA = productMap.get(a.product_id);
       const productB = productMap.get(b.product_id);
 
-      const nameA = productA?.name.trim().toLowerCase() ?? '';
-      const nameB = productB?.name.trim().toLowerCase() ?? '';
+      const nameA = productA ? normalizeName(productA.name) : '';
+      const nameB = productB ? normalizeName(productB.name) : '';
 
       const nameComparison = nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
       if (nameComparison !== 0) {
@@ -124,9 +126,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(() => {
@@ -143,6 +156,16 @@ export const ActivePickListScreen = () => {
     );
   }, [pickList?.categories, sortedProducts]);
 
+  const hasCartonItems = useMemo(
+    () => itemsVisibleByStatus.some((item) => item.is_carton),
+    [itemsVisibleByStatus],
+  );
+  const hasUnitItems = useMemo(
+    () => itemsVisibleByStatus.some((item) => !item.is_carton),
+    [itemsVisibleByStatus],
+  );
+  const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
+  const singlePackagingType = packagingTypeCount === 1;
   const packagingFiltersDisabled = !showPicked || allItemsPicked || allItemsUnpicked;
 
   const productIdsInList = useMemo(
@@ -183,6 +206,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