From 3ec04c24a3a96dc555fe6d267f264f9a27f686e2 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Fri, 12 Sep 2025 16:10:10 +0200
Subject: [PATCH] [dyad] Added search functionality to item dropdown - wrote 1
 file(s)

---
 .../purchase-orders/PurchaseOrderForm.tsx     | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/purchase-orders/PurchaseOrderForm.tsx b/src/components/purchase-orders/PurchaseOrderForm.tsx
index b42a57a..7588ad0 100644
--- a/src/components/purchase-orders/PurchaseOrderForm.tsx
+++ b/src/components/purchase-orders/PurchaseOrderForm.tsx
@@ -67,6 +67,7 @@ type StockItem = {
 export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormProps) {
   const [suppliers, setSuppliers] = useState<Supplier[]>([]) // State to hold suppliers
   const [stockItems, setStockItems] = useState<StockItem[]>([]) // State to hold stock items
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
 
   // Fetch suppliers when the component mounts
   const fetchSuppliers = useCallback(async () => {
@@ -191,8 +192,6 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
         supplier: selectedSupplier.id, // This will be the relation to the suppliers collection
         orderDate: values.orderDate.toISOString(),
         status: "Pending Approval",
-        // Ensure the structure matches what your PocketBase 'purchase_orders' collection expects for 'items'
-        // Based on your schema, it seems 'embedded_items' is used for storing item details directly.
         embedded_items: values.items.map(item => ({
           stockItemId: item.stockItemId,
           itemName: item.itemName,
@@ -200,7 +199,7 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
           sku: item.sku,
           costPrice: item.costPrice,
         })),
-        quantities: values.items.map(item => item.quantity), // Keep quantities array as well if needed elsewhere
+        quantities: values.items.map(item => item.quantity),
       };
 
       await pb.collection('purchase_orders').create(purchaseOrderData);
@@ -214,6 +213,12 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
     }
   }
 
+  // Filter stock items based on search term
+  const filteredStockItems = stockItems.filter(item =>
+    item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    item.sku.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -276,7 +281,7 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
                     <FormLabel>Item Name</FormLabel>
                     <Select
                       onValueChange={(selectedValue) => handleStockItemSelect(index, selectedValue)}
-                      value={field.value} // Set the current value of the item name
+                      value={field.value}
                     >
                       <FormControl>
                         <SelectTrigger>
@@ -284,11 +289,24 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        {stockItems.map((stockItem) => (
-                          <SelectItem key={stockItem.id} value={stockItem.name}>
-                            {stockItem.name}
-                          </SelectItem>
-                        ))}
+                        {/* Search Input */}
+                        <div className="p-2">
+                          <Input
+                            placeholder="Search items..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="h-8"
+                          />
+                        </div>
+                        {filteredStockItems.length > 0 ? (
+                          filteredStockItems.map((stockItem) => (
+                            <SelectItem key={stockItem.id} value={stockItem.name}>
+                              {stockItem.name}
+                            </SelectItem>
+                          ))
+                        ) : (
+                          <SelectItem value="" disabled>No items found</SelectItem>
+                        )}
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -302,7 +320,6 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
                   <FormItem>
                     <FormLabel>SKU</FormLabel>
                     <FormControl>
-                      {/* Display SKU, but it's managed by handleStockItemSelect */}
                       <Input {...field} readOnly placeholder="SKU" />
                     </FormControl>
                     <FormMessage />