[dyad] Updated Customers page to fetch and save data from PocketBase - wrote 2 file(s)

src/components/customers/AddCustomerForm.tsx

@@ -15,8 +15,9 @@ import {
   FormMessage,
 } from "../ui/form"
 import { Input } from "../ui/input"
-import { showSuccess } from "../../utils/toast"
+import { showSuccess, showError } from "../../utils/toast"
 import { BillingCompanyCombobox } from "./BillingCompanyCombobox"
+import pb from "@/lib/pocketbase"
 
 const formSchema = z.object({
   companyName: z.string().min(2, { message: "Company name must be at least 2 characters." }),
@@ -25,7 +26,12 @@ const formSchema = z.object({
 
 const initialBillingCompanies = ["Isherwood", "CNL"];
 
-export function AddCustomerForm({ setOpen }: { setOpen: (open: boolean) => void }) {
+interface AddCustomerFormProps {
+  setOpen: (open: boolean) => void;
+  refreshData: () => void;
+}
+
+export function AddCustomerForm({ setOpen, refreshData }: AddCustomerFormProps) {
   const [billingCompanies, setBillingCompanies] = React.useState(initialBillingCompanies.map(c => ({ value: c.toLowerCase(), label: c })));
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -35,11 +41,21 @@ export function AddCustomerForm({ setOpen }: { setOpen: (open: boolean) => void
     },
   })
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    // In a real app, you'd send this to your API
-    console.log(values)
-    showSuccess("New customer added successfully!")
-    setOpen(false)
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    try {
+      // Save the customer to PocketBase
+      await pb.collection('customers').create({
+        comapny_name: values.companyName, // Note: PocketBase field name is 'comapny_name'
+        billing_company: values.billingCompany, // Note: PocketBase field name is 'billing_company'
+      });
+      showSuccess("New customer added successfully!");
+      form.reset(); // Reset form fields
+      setOpen(false); // Close the dialog on successful submission
+      refreshData(); // Trigger data refresh in Customers list
+    } catch (error) {
+      console.error("Error adding customer:", error);
+      showError("Failed to add customer. Please try again.");
+    }
   }
 
   const handleCompanyCreate = (newCompany: string) => {

src/pages/Customers.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState, useEffect, useCallback } from "react"
 import { columns, Customer } from "../components/customers/columns"
 import { DataTable } from "../components/customers/data-table"
 import { Button } from "@/components/ui/button"
@@ -12,33 +12,36 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog"
 import { AddCustomerForm } from "../components/customers/AddCustomerForm"
-
-// Sample data
-const data: Customer[] = [
-  {
-    id: "cust-1",
-    companyName: "Tech Solutions Ltd.",
-    billingCompany: "Isherwood",
-  },
-  {
-    id: "cust-2",
-    companyName: "Innovate Inc.",
-    billingCompany: "CNL",
-  },
-  {
-    id: "cust-3",
-    companyName: "Global Logistics",
-    billingCompany: "Isherwood",
-  },
-  {
-    id: "cust-4",
-    companyName: "Quantum Creations",
-    billingCompany: "Quantum Creations",
-  },
-];
+import pb from "@/lib/pocketbase"
 
 const Customers = () => {
-  const [open, setOpen] = useState(false);
+  const [addCustomerOpen, setAddCustomerOpen] = useState(false);
+  const [customers, setCustomers] = useState<Customer[]>([]);
+  const [refreshTrigger, setRefreshTrigger] = useState(0); // State to trigger data refresh
+
+  const fetchCustomers = useCallback(async () => {
+    try {
+      const records = await pb.collection('customers').getList(1, 50, {
+        sort: '-created',
+      });
+      const formattedData: Customer[] = records.items.map((item: any) => ({
+        id: item.id,
+        companyName: item.comapny_name, // Note: PocketBase field name is 'comapny_name'
+        billingCompany: item.billing_company, // Note: PocketBase field name is 'billing_company'
+      }));
+      setCustomers(formattedData);
+    } catch (error) {
+      console.error("Error fetching customers:", error);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCustomers();
+  }, [fetchCustomers, refreshTrigger]); // Re-fetch data when refreshTrigger changes
+
+  const handleRefreshData = () => {
+    setRefreshTrigger(prev => prev + 1); // Increment to trigger useEffect
+  };
 
   return (
     <div>
@@ -47,7 +50,7 @@ const Customers = () => {
             <h1 className="text-3xl font-bold">Customers</h1>
             <p className="text-gray-500">Manage your customers here.</p>
         </div>
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog open={addCustomerOpen} onOpenChange={setAddCustomerOpen}>
           <DialogTrigger asChild>
             <Button>
               <PlusCircle className="mr-2 h-4 w-4" />
@@ -61,11 +64,11 @@ const Customers = () => {
                 Fill in the details below to add a new customer.
               </DialogDescription>
             </DialogHeader>
-            <AddCustomerForm setOpen={setOpen} />
+            <AddCustomerForm setOpen={setAddCustomerOpen} refreshData={handleRefreshData} />
           </DialogContent>
         </Dialog>
       </div>
-      <DataTable columns={columns} data={data} />
+      <DataTable columns={columns} data={customers} />
     </div>
   )
 }