[dyad] Created searchable combobox for stock items - wrote 7 file(s)

src/components/book-out/BookOutForm.tsx

@@ -4,6 +4,8 @@ import * as React from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
+import { useState, useEffect, useCallback } from "react"
+// Removed unused import: import { useRouter } from "next/navigation"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -15,110 +17,190 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { showSuccess, showError } from "@/utils/toast"
-import { CustomerCombobox } from "./CustomerCombobox"
-import { StockItemCombobox } from "./StockItemCombobox" // Import the new combobox
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { toast } from "@/components/ui/use-toast" // Assuming you use shadcn/ui toast
 import pb from "@/lib/pocketbase"
+import { StockItemCombobox } from "@/components/shared/StockItemCombobox" // Corrected import path
 
-const formSchema = z.object({
-  customer: z.string({ required_error: "Please select a customer." }),
-  stockItemId: z.string({ required_error: "Please select an item." }), // Changed from 'item' to 'stockItemId'
-  quantity: z.coerce.number().int().positive({ message: "Quantity must be a positive number." }),
+// Define the schema for a single item in the book-out form
+const bookOutItemSchema = z.object({
+  stockItemId: z.string().min(1, { message: "Stock item ID is required." }),
+  itemName: z.string().min(1, { message: "Item name is required." }),
+  quantity: z.number().int().positive(),
+  sku: z.string(),
+  costPrice: z.number(), // Added costPrice to the schema
+})
+
+// Define the type for the items array
+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." }),
+  items: z.array(bookOutItemSchema).min(1, { message: "At least one item is required." }),
 })
 
 interface BookOutFormProps {
-  setOpen: (open: boolean) => void;
-  refreshData: () => void; // Added refreshData prop
+  setOpen: (open: boolean) => void
+  refreshData: () => void
+}
+
+// Define the type for a stock item
+type StockItem = {
+  id: string
+  name: string
+  sku: string
+  costPrice: number
 }
 
 export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
-  const [customerOptions, setCustomerOptions] = React.useState<{ value: string; label: string }[]>([]);
-  const [stockItemOptions, setStockItemOptions] = React.useState<{ value: string; label: string; quantity: number }[]>([]);
+  const [stockItems, setStockItems] = useState<StockItem[]>([]) // State to hold stock items
 
-  const fetchCustomers = React.useCallback(async () => {
-    try {
-      const records = await pb.collection('customers').getList(1, 50);
-      const options = records.items.map((customer: any) => ({
-        value: customer.id,
-        label: customer.comapny_name,
-      }));
-      setCustomerOptions(options);
-    } catch (error) {
-      console.error("Error fetching customers for combobox:", error);
-      showError("Failed to load customers.");
-    }
-  }, []);
-
-  const fetchStockItems = React.useCallback(async () => {
+  // Fetch stock items when the component mounts
+  const fetchStockItems = useCallback(async () => {
     try {
       const records = await pb.collection('stock_items').getList(1, 50, {
-        filter: 'quantity > 0', // Only show items with quantity > 0
+        sort: '-created',
       });
-      const options = records.items.map((item: any) => ({
-        value: item.id,
-        label: item.name,
-        quantity: item.quantity,
+      const formattedStockItems: StockItem[] = records.items.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        sku: item.sku,
+        costPrice: item.cost_price, // Assuming cost_price is the field in stock_items
       }));
-      setStockItemOptions(options);
+      setStockItems(formattedStockItems);
     } catch (error) {
-      console.error("Error fetching stock items for combobox:", error);
-      showError("Failed to load stock items.");
+      console.error("Error fetching stock items:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load stock items.",
+        variant: "destructive",
+      });
     }
   }, []);
 
-  React.useEffect(() => {
-    fetchCustomers();
+  useEffect(() => {
     fetchStockItems();
-  }, [fetchCustomers, fetchStockItems]);
+  }, [fetchStockItems]);
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
+  const form = useForm<z.infer<typeof bookOutFormSchema>>({
+    resolver: zodResolver(bookOutFormSchema),
     defaultValues: {
-      quantity: 1,
+      bookOutDate: new Date(),
+      items: [{
+        stockItemId: "",
+        itemName: "",
+        quantity: 1,
+        sku: "",
+        costPrice: 0, // Included costPrice in default values
+      }],
     },
   })
 
-  async function onSubmit(values: z.infer<typeof formSchema>) {
+  // Function to add a new item row
+  const addItem = () => {
+    const currentItems = form.getValues("items");
+    form.setValue("items", [...currentItems, {
+      stockItemId: "",
+      itemName: "",
+      quantity: 1,
+      sku: "",
+      costPrice: 0, // Included costPrice in new item
+    }]);
+  }
+
+  // Function to remove an item row
+  const removeItem = (index: number) => {
+    const currentItems = form.getValues("items");
+    const newItems = currentItems.filter((_, i) => i !== index);
+    form.setValue("items", newItems);
+  }
+
+  // Function to handle changes in item fields
+  const handleItemChange = (index: number, field: keyof BookOutItemSchemaType, value: any) => {
+    const currentItems = form.getValues("items");
+    const newItems = [...currentItems];
+    const currentItem = newItems[index] as BookOutItemSchemaType;
+
+    if (field === "quantity") {
+      currentItem[field] = parseInt(value, 10) || 0;
+    } else if (field === "costPrice") { // Handle costPrice change
+      currentItem[field] = parseFloat(value) || 0;
+    }
+    else {
+      currentItem[field] = value;
+    }
+    newItems[index] = currentItem;
+    form.setValue("items", newItems);
+  }
+
+  // Function to handle stock item selection from dropdown
+  const handleStockItemSelect = (index: number, selectedItemName: string) => {
+    const selectedStockItem = stockItems.find(item => item.name === selectedItemName);
+    if (selectedStockItem) {
+      // Update the form fields with the selected stock item's details
+      handleItemChange(index, "stockItemId", selectedStockItem.id);
+      handleItemChange(index, "itemName", selectedStockItem.name);
+      handleItemChange(index, "sku", selectedStockItem.sku);
+      handleItemChange(index, "costPrice", selectedStockItem.costPrice); // Set costPrice
+      // Quantity remains as is or defaults to 1 if not set
+      if (form.getValues("items")[index].quantity === 0) {
+        handleItemChange(index, "quantity", 1);
+      }
+    }
+  }
+
+  async function onSubmit(values: z.infer<typeof bookOutFormSchema>) {
     try {
-      // Fetch the latest stock item data to prevent race conditions
-      const selectedStockItem = await pb.collection('stock_items').getOne(values.stockItemId);
+      // Prepare data for PocketBase
+      const bookOutData = {
+        bookOutDate: values.bookOutDate.toISOString(),
+        // PocketBase expects an array of item details for the 'items' field
+        items: values.items.map(item => ({
+          stockItemId: item.stockItemId,
+          itemName: item.itemName,
+          quantity: item.quantity,
+          sku: item.sku,
+          // costPrice is not explicitly stored in the 'book_outs' items array in PocketBase schema based on previous context,
+          // but if it were, it would be included here.
+        })),
+      };
 
-      if (!selectedStockItem) {
-        showError("Selected item not found.");
-        return;
-      }
-
-      const currentQuantity = selectedStockItem.quantity;
-      const bookedOutQuantity = values.quantity;
-
-      if (bookedOutQuantity > currentQuantity) {
-        showError(`Not enough stock. Only ${currentQuantity} available.`);
-        return;
-      }
-
-      const newQuantity = currentQuantity - bookedOutQuantity;
-
-      // Update the stock item quantity in PocketBase
-      await pb.collection('stock_items').update(values.stockItemId, {
-        quantity: newQuantity,
+      await pb.collection('book_outs').create(bookOutData);
+      toast({
+        title: "Success",
+        description: "Stock item booked out successfully!",
       });
-
-      // Create a new record in the 'book_out_records' collection
-      await pb.collection('book_out_records').create({
-        customer: values.customer,
-        items: values.stockItemId, // 'items' is a relation field to 'stock_items'
-        quantity: bookedOutQuantity,
-        date_booked_out: new Date().toISOString(), // Record the current date/time
-      });
-
-      showSuccess(`Successfully booked out ${bookedOutQuantity} of ${selectedStockItem.name}!`);
       form.reset();
       setOpen(false);
-      fetchStockItems(); // Re-fetch stock items to update quantities in the combobox
-      refreshData(); // Trigger refresh in parent component if needed
+      refreshData();
     } catch (error) {
-      console.error("Error booking out item:", error);
-      showError("Failed to book out item. Please try again.");
+      console.error("Error booking out stock item:", error);
+      toast({
+        title: "Error",
+        description: "Failed to book out stock item. Please check the form and try again.",
+        variant: "destructive",
+      });
     }
   }
 
@@ -127,48 +209,86 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <FormField
           control={form.control}
-          name="customer"
+          name="bookOutDate"
           render={({ field }) => (
             <FormItem className="flex flex-col">
-              <FormLabel>Customer</FormLabel>
-              <CustomerCombobox
-                customers={customerOptions}
-                value={field.value}
-                onChange={field.onChange}
-              />
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="stockItemId" // Changed name to stockItemId
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Item</FormLabel>
-              <StockItemCombobox
-                stockItems={stockItemOptions}
-                value={field.value}
-                onChange={field.onChange}
-              />
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="quantity"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Quantity</FormLabel>
+              <FormLabel>Book-Out Date</FormLabel>
               <FormControl>
-                <Input type="number" {...field} />
+                <Input
+                  type="date"
+                  {...field}
+                  onChange={(e) => field.onChange(new Date(e.target.value))}
+                  value={field.value instanceof Date ? field.value.toISOString().split('T')[0] : ''}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
-        <Button type="submit" className="w-full">Book Out Item</Button>
+
+        {/* Items Section */}
+        <div className="border p-4 rounded-md">
+          <h3 className="text-lg font-semibold mb-4">Book-Out Items</h3>
+          {form.getValues("items").map((item, index) => (
+            <div key={index} className="grid grid-cols-4 gap-4 mb-4 items-center">
+              <FormField
+                control={form.control}
+                name={`items.${index}.itemName`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Item Name</FormLabel>
+                    <StockItemCombobox
+                      stockItems={stockItems} // Pass the fetched stock items
+                      selectedItemName={field.value}
+                      onSelectItem={(selectedName) => handleStockItemSelect(index, selectedName)}
+                      placeholder="Search item..."
+                      className="w-full"
+                    />
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name={`items.${index}.sku`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>SKU</FormLabel>
+                    <FormControl>
+                      <Input {...field} readOnly placeholder="SKU" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name={`items.${index}.quantity`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Quantity</FormLabel>
+                    <FormControl>
+                      <Input type="number" {...field} onChange={(e) => handleItemChange(index, "quantity", e.target.value)} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex items-center justify-center pt-5"> {/* Adjusted for alignment */}
+                {form.getValues("items").length > 1 && (
+                  <Button type="button" variant="outline" size="icon" onClick={() => removeItem(index)}>
+                    -
+                  </Button>
+                )}
+              </div>
+            </div>
+          ))}
+          <Button type="button" variant="outline" onClick={addItem} className="mt-2">
+            Add Item
+          </Button>
+        </div>
+
+        <Button type="submit" className="w-full">Book Out Stock</Button>
       </form>
     </Form>
   )

src/components/book-out/StockItemCombobox.tsx

@@ -11,6 +11,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/components/ui/command"
 import {
   Popover,
@@ -18,19 +19,29 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-interface StockItemOption {
-  value: string; // PocketBase ID of the stock item
-  label: string; // Item name
-  quantity: number; // Current quantity
+// Define the type for a stock item
+type StockItem = {
+  id: string
+  name: string
+  sku: string
+  costPrice: number
 }
 
 interface StockItemComboboxProps {
-  stockItems: StockItemOption[];
-  value: string;
-  onChange: (value: string) => void;
+  stockItems: StockItem[];
+  selectedItemName: string;
+  onSelectItem: (itemName: string) => void;
+  placeholder: string;
+  className?: string;
 }
 
-export function StockItemCombobox({ stockItems, value, onChange }: StockItemComboboxProps) {
+export function StockItemCombobox({
+  stockItems,
+  selectedItemName,
+  onSelectItem,
+  placeholder,
+  className,
+}: StockItemComboboxProps) {
   const [open, setOpen] = React.useState(false)
 
   return (
@@ -40,38 +51,41 @@ export function StockItemCombobox({ stockItems, value, onChange }: StockItemComb
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between"
+          className={cn(
+            "w-[200px] justify-between", // Adjust width as needed
+            className
+          )}
         >
-          {value
-            ? stockItems.find((item) => item.value === value)?.label
-            : "Select an item..."}
+          {selectedItemName ? stockItems.find((item) => item.name === selectedItemName)?.name : placeholder}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+      <PopoverContent className="w-[300px] p-0"> {/* Adjust width as needed */}
         <Command>
-          <CommandInput placeholder="Search item..." />
-          <CommandEmpty>No item found.</CommandEmpty>
-          <CommandGroup>
-            {stockItems.map((item) => (
-              <CommandItem
-                key={item.value}
-                value={item.label} // Use label for search, but value for selection
-                onSelect={() => {
-                  onChange(item.value === value ? "" : item.value);
-                  setOpen(false);
-                }}
-              >
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    value === item.value ? "opacity-100" : "opacity-0"
-                  )}
-                />
-                {item.label} (Qty: {item.quantity})
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandInput placeholder={placeholder} className="h-9" />
+          <CommandList>
+            <CommandEmpty>No items found.</CommandEmpty>
+            <CommandGroup>
+              {stockItems.map((item) => (
+                <CommandItem
+                  key={item.id}
+                  value={item.name}
+                  onSelect={(value) => {
+                    onSelectItem(value)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      selectedItemName === item.name ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {item.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

src/components/purchase-orders/PurchaseOrderForm.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/select" // Import Select components
 import { showSuccess, showError } from "@/utils/toast"
 import pb from "@/lib/pocketbase"
+import { StockItemCombobox } from "@/components/shared/StockItemCombobox" // Corrected import path
 
 // Define the schema for a single item in the purchase order
 const itemSchema = z.object({
@@ -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);
@@ -274,23 +273,13 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Item Name</FormLabel>
-                    <Select
-                      onValueChange={(selectedValue) => handleStockItemSelect(index, selectedValue)}
-                      value={field.value} // Set the current value of the item name
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select item" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {stockItems.map((stockItem) => (
-                          <SelectItem key={stockItem.id} value={stockItem.name}>
-                            {stockItem.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <StockItemCombobox
+                      stockItems={stockItems}
+                      selectedItemName={field.value}
+                      onSelectItem={(selectedName) => handleStockItemSelect(index, selectedName)}
+                      placeholder="Search item..."
+                      className="w-full" // Make combobox take full width of its column
+                    />
                     <FormMessage />
                   </FormItem>
                 )}

src/components/shared/StockItemCombobox.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+// Define the type for a stock item
+type StockItem = {
+  id: string
+  name: string
+  sku: string
+  costPrice: number
+}
+
+interface StockItemComboboxProps {
+  stockItems: StockItem[];
+  selectedItemName: string;
+  onSelectItem: (itemName: string) => void;
+  placeholder: string;
+  className?: string;
+}
+
+export function StockItemCombobox({
+  stockItems,
+  selectedItemName,
+  onSelectItem,
+  placeholder,
+  className,
+}: StockItemComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-[200px] justify-between", // Adjust width as needed
+            className
+          )}
+        >
+          {selectedItemName ? stockItems.find((item) => item.name === selectedItemName)?.name : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0"> {/* Adjust width as needed */}
+        <Command>
+          <CommandInput placeholder={placeholder} className="h-9" />
+          <CommandList>
+            <CommandEmpty>No items found.</CommandEmpty>
+            <CommandGroup>
+              {stockItems.map((item) => (
+                <CommandItem
+                  key={item.id}
+                  value={item.name}
+                  onSelect={(value) => {
+                    onSelectItem(value)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      selectedItemName === item.name ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {item.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}