modified: src/screens/ActivePickListScreen.tsx

src/components/PickItemRow.tsx

@@ -68,7 +68,6 @@ export const PickItemRow = ({
 
   const handleRowClick = () => {
     if (!isNarrowScreen || isControlsOpen) return;
-
     setIsControlsOpen(true);
   };
 
@@ -84,7 +83,6 @@ export const PickItemRow = ({
 
   const handleRowKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (!isNarrowScreen) return;
-
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       setIsControlsOpen(true);
@@ -134,19 +132,18 @@ export const PickItemRow = ({
               component="span"
               variant="subtitle1"
               noWrap
-              sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: 600 }}
+              sx={{
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                fontWeight: 600,
+                whiteSpace: 'nowrap',
+              }}
             >
-              {product?.name ?? 'Unknown product'}
+              {`${item.quantity} x ${product?.name ?? 'Unknown product'}`}
-            </Typography>
-            <Typography
-              component="span"
-              variant="subtitle1"
-              noWrap
-              sx={{ fontWeight: 600, whiteSpace: 'nowrap' }}
-            >
-              Qty: {item.quantity} {packagingLabel}
             </Typography>
           </Stack>
+
           {isNarrowScreen && (
             <Typography variant="caption" color="text.secondary" noWrap>
               Tap to adjust quantity and packaging
@@ -154,6 +151,7 @@ export const PickItemRow = ({
           )}
         </Stack>
       </Stack>
+
       {isNarrowScreen ? (
         <IconButton aria-label="Open item controls" onClick={openControls}>
           <MoreHoriz />
@@ -175,6 +173,7 @@ export const PickItemRow = ({
           >
             <Inventory2 />
           </IconButton>
+
           <IconButton
             aria-label="Decrease quantity"
             color="primary"
@@ -185,6 +184,7 @@ export const PickItemRow = ({
           >
             <Remove />
           </IconButton>
+
           <IconButton
             aria-label="Increase quantity"
             color="primary"
@@ -195,6 +195,7 @@ export const PickItemRow = ({
           >
             <Add />
           </IconButton>
+
           <IconButton
             color="error"
             onClick={(event) => {
@@ -220,21 +221,32 @@ export const PickItemRow = ({
             id="item-controls-title"
             sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
           >
-            <Typography variant="h6" noWrap sx={{ minWidth: 0, flex: 1 }}>
+            <Typography
-              {product?.name ?? 'Unknown product'}
+              component="span"
-            </Typography>
+              variant="subtitle1"
-            <IconButton
+              noWrap
-              aria-label="Close controls"
+              sx={{
-              onClick={handleCloseControls}
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                fontWeight: 600,
+                whiteSpace: 'nowrap',
+              }}
             >
+              {`${item.quantity} x ${product?.name ?? 'Unknown product'}`}
+            </Typography>
+
+            <IconButton aria-label="Close controls" onClick={handleCloseControls}>
               <Close />
             </IconButton>
           </DialogTitle>
+
           <DialogContent>
             <Stack spacing={2} alignItems="stretch">
               <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                 Quantity: {item.quantity} {packagingLabel}
               </Typography>
+
               <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap">
                 <IconButton
                   aria-label={`Switch to ${item.is_carton ? 'unit' : 'carton'} packaging`}
@@ -251,6 +263,7 @@ export const PickItemRow = ({
                 >
                   <Inventory2 />
                 </IconButton>
+
                 <IconButton
                   aria-label="Decrease quantity"
                   color="primary"
@@ -261,6 +274,7 @@ export const PickItemRow = ({
                 >
                   <Remove />
                 </IconButton>
+
                 <IconButton
                   aria-label="Increase quantity"
                   color="primary"
@@ -271,6 +285,7 @@ export const PickItemRow = ({
                 >
                   <Add />
                 </IconButton>
+
                 <IconButton
                   color="error"
                   onClick={(event) => {

src/screens/ActivePickListScreen.tsx

@@ -15,6 +15,7 @@ import {
   RadioGroup,
   Radio,
 } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
 import { Link as RouterLink, useParams, useNavigate } from 'react-router-dom';
 import { useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -49,6 +50,10 @@ export const ActivePickListScreen = () => {
   const [isBatchUpdating, setIsBatchUpdating] = useState(false);
   const [packagingFilter, setPackagingFilter] = useState<'all' | 'units' | 'cartons'>('all');
 
+  // NEW: search within the list and category filter for the visible list
+  const [listSearch, setListSearch] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<'all' | string>('all');
+
   // Keep local item state in sync with DB-driven `items`
   useEffect(() => {
     setItemState((current: PickItem[]) => {
@@ -179,9 +184,7 @@ export const ActivePickListScreen = () => {
 
   const filteredProducts = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
-    const availableProducts = categoryFilteredProducts.filter(
+    const availableProducts = categoryFilteredProducts.filter((product: Product) => !productIdsInList.has(product.id));
-      (product: Product) => !productIdsInList.has(product.id),
-    );
 
     if (!normalizedQuery) return availableProducts;
 
@@ -330,6 +333,62 @@ export const ActivePickListScreen = () => {
     return arr;
   }, [itemsAfterShowPicked, productMap, packagingFilter]);
 
+  // --- NEW: build category options from pickList.categories (fallback to all categories) ---
+  const categoryOptions = useMemo(() => {
+    // helper maps
+    const idToName = new Map(categoriesList.map((c) => [c.id, c.name]));
+    const nameToId = new Map(categoriesList.map((c) => [c.name.trim().toLowerCase(), c.id]));
+
+    if (!pickList?.categories || pickList.categories.length === 0) {
+      // fallback: show all categories
+      return categoriesList
+        .map((c) => ({ id: c.id, name: c.name }))
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+    }
+
+    // Build from pickList.categories while resolving legacy names -> ids
+    const seen = new Map<string, string>();
+    pickList.categories.forEach((entry: string) => {
+      if (!entry) return;
+
+      if (idToName.has(entry)) {
+        seen.set(entry, idToName.get(entry)!);
+      } else {
+        const resolved = nameToId.get(entry.trim().toLowerCase());
+        if (resolved) {
+          seen.set(resolved, idToName.get(resolved)!);
+        }
+      }
+    });
+
+    // Convert to array and sort by name
+    return Array.from(seen.entries())
+      .map(([id, name]) => ({ id, name }))
+      .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+  }, [pickList?.categories, categoriesList]);
+
+  // --- NEW: apply categoryFilter and listSearch to visibleItems ---
+  const visibleItemsFiltered = useMemo(() => {
+    const q = listSearch.trim().toLowerCase();
+    let arr = visibleItems;
+
+    if (categoryFilter !== 'all') {
+      arr = arr.filter((item) => {
+        const product = productMap.get(item.product_id);
+        return (product?.category ?? '') === categoryFilter;
+      });
+    }
+
+    if (!q) return arr;
+
+    return arr.filter((item) => {
+      const product = productMap.get(item.product_id);
+      const catName = categoriesById.get(product?.category ?? '') ?? product?.category ?? '';
+      const searchableText = `${product?.name ?? ''} ${catName} ${product?.barcode ?? ''}`.toLowerCase();
+      return searchableText.includes(q);
+    });
+  }, [visibleItems, productMap, listSearch, categoryFilter, categoriesById]);
+
   return (
     <Container sx={{ py: 4 }}>
       <Stack spacing={2} mb={2}>
@@ -416,6 +475,49 @@ export const ActivePickListScreen = () => {
               </Button>
             </Stack>
           </Stack>
+
+          {/* NEW: Search List (left) and Category dropdown (right) on the same row */}
+          <Stack
+            direction="row"
+            alignItems="center"
+            justifyContent="space-between"
+            flexWrap="wrap"
+            rowGap={1}
+            sx={{ mt: 1 }}
+          >
+            <TextField
+              size="small"
+              placeholder="Search list"
+              variant="outlined"
+              value={listSearch}
+              onChange={(e) => setListSearch(e.target.value)}
+              sx={{ flexGrow: 1, minWidth: 160 }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+
+            <TextField
+              select
+              size="small"
+              SelectProps={{ native: true }}
+              label="Filter by category"
+              value={categoryFilter}
+              onChange={(e) => setCategoryFilter((e.target.value as any) ?? 'all')}
+              sx={{ width: { xs: '100%', sm: 240 }, ml: { xs: 0, sm: 2 }, mt: { xs: 1, sm: 0 } }}
+            >
+              <option value="all">All categories</option>
+              {categoryOptions.map((opt) => (
+                <option key={opt.id} value={opt.id}>
+                  {opt.name}
+                </option>
+              ))}
+            </TextField>
+          </Stack>
         </Stack>
       </Stack>
       {pickList?.notes ? (
@@ -424,18 +526,31 @@ export const ActivePickListScreen = () => {
         </Typography>
       ) : null}
       <Stack spacing={1}>
-        {visibleItems.map((item) => (
+        {/* NEW: empty-filter message */}
-          <PickItemRow
+        {visibleItemsFiltered.length === 0 ? (
-            key={item.id}
+          visibleItems.length === 0 ? (
-            item={item}
+            <Typography variant="body2" color="text.secondary">
-            product={productMap.get(item.product_id)}
+              No items in this pick list
-            onIncrementQuantity={() => handleIncrementQuantity(item.id)}
+            </Typography>
-            onDecrementQuantity={() => handleDecrementQuantity(item.id)}
+          ) : (
-            onToggleCarton={() => handleToggleCarton(item.id)}
+            <Typography variant="body2" color="text.secondary">
-            onStatusChange={(status) => handleStatusChange(item.id, status)}
+              No items match the filter
-            onDelete={() => handleDeleteItem(item.id)}
+            </Typography>
-          />
+          )
-        ))}
+        ) : (
+          visibleItemsFiltered.map((item) => (
+            <PickItemRow
+              key={item.id}
+              item={item}
+              product={productMap.get(item.product_id)}
+              onIncrementQuantity={() => handleIncrementQuantity(item.id)}
+              onDecrementQuantity={() => handleDecrementQuantity(item.id)}
+              onToggleCarton={() => handleToggleCarton(item.id)}
+              onStatusChange={(status) => handleStatusChange(item.id, status)}
+              onDelete={() => handleDeleteItem(item.id)}
+            />
+          ))
+        )}
       </Stack>
       <Button fullWidth sx={{ mt: 3 }} variant="outlined" onClick={returnToLists}>
         Save and Return