From b5ae31b1dd903ea4fc61b40b15d501046d04b6e0 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Fri, 12 Sep 2025 16:15:22 +0200
Subject: [PATCH] [dyad] Re-added customer dropdown to Book Out form - wrote 3
 file(s)

---
 src/components/book-out/BookOutForm.tsx | 49 ++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/book-out/BookOutForm.tsx b/src/components/book-out/BookOutForm.tsx
index e0b1765..a064d44 100644
--- a/src/components/book-out/BookOutForm.tsx
+++ b/src/components/book-out/BookOutForm.tsx
@@ -19,6 +19,7 @@ import { Input } from "@/components/ui/input"
 import { showSuccess, showError } from "@/utils/toast"
 import pb from "@/lib/pocketbase"
 import { StockItemCombobox } from "@/components/book-out/StockItemCombobox" // Assuming this path is correct
+import { CustomerCombobox } from "@/components/book-out/CustomerCombobox" // Import CustomerCombobox
 
 // Define the schema for a single item in the book out form
 const bookOutItemSchema = z.object({
@@ -34,6 +35,7 @@ type BookOutItemSchemaType = z.infer<typeof bookOutItemSchema>;
 // Define the schema for the book out form
 const bookOutFormSchema = z.object({
   bookOutDate: z.date({ required_error: "Book out date is required." }),
+  customer: z.string().min(1, { message: "Customer is required." }), // Added customer field
   items: z.array(bookOutItemSchema).min(1, { message: "At least one item is required." }),
 })
 
@@ -50,8 +52,15 @@ type StockItem = {
   costPrice: number // Although not used in BookOut, keeping for consistency if needed later
 }
 
+// Define the type for a customer
+type Customer = {
+  id: string
+  name: string
+}
+
 export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
   const [stockItems, setStockItems] = useState<StockItem[]>([]) // State to hold stock items
+  const [customers, setCustomers] = useState<Customer[]>([]) // State to hold customers
 
   // Fetch stock items when the component mounts
   const fetchStockItems = useCallback(async () => {
@@ -73,14 +82,33 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
     }
   }, []);
 
+  // Fetch customers when the component mounts
+  const fetchCustomers = useCallback(async () => {
+    try {
+      const records = await pb.collection('customers').getList(1, 50, {
+        sort: '-created',
+      });
+      const formattedCustomers: Customer[] = records.items.map((item: any) => ({
+        id: item.id,
+        name: item.company_name, // Assuming 'company_name' is the field for customer name
+      }));
+      setCustomers(formattedCustomers);
+    } catch (error) {
+      console.error("Error fetching customers:", error);
+      showError("Failed to load customers.");
+    }
+  }, []);
+
   useEffect(() => {
     fetchStockItems();
-  }, [fetchStockItems]);
+    fetchCustomers();
+  }, [fetchStockItems, fetchCustomers]);
 
   const form = useForm<z.infer<typeof bookOutFormSchema>>({
     resolver: zodResolver(bookOutFormSchema),
     defaultValues: {
       bookOutDate: new Date(),
+      customer: "",
       items: [{
         stockItemId: "",
         itemName: "",
@@ -143,7 +171,7 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
       // Prepare data for PocketBase
       const bookOutData = {
         bookOutDate: values.bookOutDate.toISOString(),
-        // PocketBase expects an array of item objects for the 'items' field
+        customer: values.customer, // Use the selected customer ID
         items: values.items.map(item => ({
           stockItemId: item.stockItemId,
           itemName: item.itemName,
@@ -185,6 +213,23 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
           )}
         />
 
+        {/* Customer Selection */}
+        <FormField
+          control={form.control}
+          name="customer"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Customer</FormLabel>
+              <CustomerCombobox
+                customers={customers.map(c => ({ value: c.id, label: c.name }))} // Map to {value, label} format
+                value={field.value} // Use 'value' prop to match CustomerComboboxProps
+                onChange={field.onChange} // Use 'onChange' prop to match CustomerComboboxProps
+              />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         {/* Items Section */}
         <div className="border p-4 rounded-md">
           <h3 className="text-lg font-semibold mb-4">Items to Book Out</h3>