From de251570a34658d7b9e938b0c1173ffd502e0a79 Mon Sep 17 00:00:00 2001
From: katieyungchung <katieyungchung@g.ucla.edu>
Date: Thu, 15 Jan 2026 22:30:17 -0800
Subject: [PATCH 1/6] connect donation form to backend

---
 app/(pages)/test-donations/page.tsx |  12 +-
 app/components/DonationForm.tsx     | 382 ++++++++++++++++++++++++++++
 app/types/Donation.ts               |   2 +-
 package-lock.json                   |  40 ++-
 package.json                        |   5 +-
 5 files changed, 434 insertions(+), 7 deletions(-)
 create mode 100644 app/components/DonationForm.tsx

diff --git a/app/(pages)/test-donations/page.tsx b/app/(pages)/test-donations/page.tsx
index e12d11e..88a1d06 100644
--- a/app/(pages)/test-donations/page.tsx
+++ b/app/(pages)/test-donations/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { createDonation, deleteDonation } from "@/app/api/donations/actions";
+import DonationForm from "@/app/components/DonationForm";
 
 export default function TestDonationsPage() {
 
@@ -40,10 +41,13 @@ export default function TestDonationsPage() {
   };
 
   return (
-    <div style={{ padding: 20 }}>
-      <h1>Test Donations</h1>
-      <button onClick={handleCreate}>Create Donation</button>
-      <button onClick={handleDelete} style={{ marginLeft: 10 }}>Delete Donation</button>
+    // <div style={{ padding: 20 }}>
+    //   <h1>Test Donations</h1>
+    //   <button onClick={handleCreate}>Create Donation</button>
+    //   <button onClick={handleDelete} style={{ marginLeft: 10 }}>Delete Donation</button>
+    // </div>
+    <div>
+      <DonationForm />
     </div>
   );
 }
diff --git a/app/components/DonationForm.tsx b/app/components/DonationForm.tsx
new file mode 100644
index 0000000..4fa3e1e
--- /dev/null
+++ b/app/components/DonationForm.tsx
@@ -0,0 +1,382 @@
+import { DonationInsert } from "../types/Donation";
+import { useState } from 'react';
+import { useForm, Controller } from "react-hook-form";
+import { NumericFormat, PatternFormat } from "react-number-format";
+import { createDonation } from "@/app/api/donations/actions";
+// import usePlacesAutocomplete from "use-places-autocomplete";
+
+type FormData = {
+  donor_type: "individual" | "business";
+
+  individual_name?: string;
+  business_name?: string;
+  business_contact_name?: string;
+
+  email: string;
+  phone: string;
+  address: string;
+  receiving_site: string;
+
+  receive_emails: boolean;
+  receive_mailings: boolean;
+  remain_anonymous: boolean;
+
+  estimated_value: number | null;
+  items_donated: string;
+};
+
+export default function DonationForm() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    clearErrors,
+    formState: { errors }
+  } = useForm<FormData>({
+    defaultValues: {
+      phone: "",
+      estimated_value: null,
+    }
+  });
+
+  const donorType = watch("donor_type");
+
+  // const onSubmit = async (data: FormData) => {
+  //   const donation: DonationInsert = {
+  //     receiver_user_id: "00000000-0000-0000-0000-000000000000", // TODO: real ID
+  //     store_id: null,
+
+  //     donor_is_individual: data.donor_type === "individual",
+
+  //     donor_individual_name:
+  //       data.donor_type === "individual"
+  //         ? data.individual_name ?? null
+  //         : null,
+
+  //     donor_business_name:
+  //       data.donor_type === "business"
+  //         ? data.business_name ?? null
+  //         : null,
+
+  //     donor_business_contact_name:
+  //       data.donor_type === "business"
+  //         ? data.business_contact_name ?? null
+  //         : null,
+
+  //     donor_email: data.email ?? null,
+  //     donor_phone: data.phone ?? null,
+  //     donor_street_address: data.address ?? null,
+
+  //     donor_receive_emails: data.receive_emails,
+  //     donor_receive_mailings: data.receive_mailings,
+  //     donor_remain_anonymous: data.remain_anonymous,
+
+  //     estimated_value: data.estimated_value,
+  //     items_donated: data.items_donated,
+  //   };
+
+
+  //   try {
+  //     const result = await createDonation(donation);
+  //     console.log("Donation created:", result);
+
+  //     // Reset form with default values including estimated_value
+  //     reset({
+  //       phone: "",
+  //       estimated_value: null,
+  //       donor_type: undefined,
+  //       receive_emails: false,
+  //       receive_mailings: false,
+  //       remain_anonymous: false,
+  //     });
+
+  //   } catch (error) {
+  //     console.error("Failed to create donation:", error);
+  //   }
+  // };
+
+  const onSubmit = async (data: FormData) => {
+    const donation: DonationInsert = {
+      receiver_user_id: "00000000-0000-0000-0000-000000000000", // TODO: real ID
+      store_id: null,
+
+      donor_is_individual: data.donor_type === "individual",
+
+      donor_individual_name:
+        data.donor_type === "individual"
+          ? data.individual_name ?? null
+          : null,
+
+      donor_business_name:
+        data.donor_type === "business"
+          ? data.business_name ?? null
+          : null,
+
+      donor_business_contact_name:
+        data.donor_type === "business"
+          ? data.business_contact_name ?? null
+          : null,
+
+      donor_email: data.email ?? null,
+      donor_phone: data.phone ?? null,
+      donor_street_address: data.address ?? null,
+
+      donor_receive_emails: data.receive_emails,
+      donor_receive_mailings: data.receive_mailings,
+      donor_remain_anonymous: data.remain_anonymous,
+
+      estimated_value: data.estimated_value,
+      items_donated: data.items_donated,
+    };
+
+    try {
+      const result = await createDonation(donation);
+      console.log("Donation created:", result);
+
+      // Reset form with default values including estimated_value
+     reset({
+  donor_type: undefined,
+  individual_name: "",
+  business_name: "",
+  business_contact_name: "",
+  email: "",
+  phone: "",
+  address: "",
+  receiving_site: "",
+  receive_emails: false,
+  receive_mailings: false,
+  remain_anonymous: false,
+  estimated_value: undefined,
+  items_donated: "",
+});
+    } catch (error) {
+      console.error("Failed to create donation:", error);
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px", border: "1px solid #ccc", borderRadius: "8px", fontFamily: "Arial, sans-serif" }}>
+      <h1 style={{ textAlign: "center", marginBottom: "20px" }}>Donation Form</h1>
+      <form onSubmit={handleSubmit(onSubmit)} style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
+
+        {/* Receiving Site */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Receiving site</label>
+          <select {...register("receiving_site")} defaultValue="" style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }}>
+            <option value="" disabled>Select a receiving site</option>
+            <option value="path-site-1">PATH site 1</option>
+            <option value="path-site-2">PATH site 2</option>
+            <option value="path-site-3">PATH site 3</option>
+          </select>
+        </div>
+
+        {/* Donor Type */}
+        <div style={{ display: "flex", gap: "20px", alignItems: "center" }}>
+          <label>
+            <input
+              type="radio"
+              value="individual"
+              {...register("donor_type", { required: true })}
+            /> Individual
+          </label>
+          <label>
+            <input
+              type="radio"
+              value="business"
+              {...register("donor_type", { required: true })}
+            /> Business
+          </label>
+        </div>
+
+        {/* Conditional Name Fields */}
+        {donorType === "individual" && (
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Individual Name</label>
+            <input {...register("individual_name", { required: true })} style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }} />
+          </div>
+        )}
+
+        {donorType === "business" && (
+          <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Business Name</label>
+              <input {...register("business_name", { required: true })} style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }} />
+            </div>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Business Contact Name</label>
+              <input {...register("business_contact_name", { required: true })} style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }} />
+            </div>
+          </div>
+        )}
+
+        {/* Email */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Donor Email</label>
+          <input
+            {...register("email", {
+              required: "Email is required",
+              pattern: {
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: "Please enter a valid email address",
+              },
+            })}
+            style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
+          {errors.email && <p style={{ color: "red", marginTop: "5px" }}>{errors.email.message}</p>}
+        </div>
+
+        {/* Phone */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Donor Phone Number (Optional)</label>
+          <Controller
+            name="phone"
+            control={control}
+            rules={{
+              validate: (value) => {
+                const digits = value?.replace(/\D/g, "");
+                return (
+                  !digits || digits.length === 10 || "Phone number must be 10 digits"
+                );
+              },
+            }}
+            render={({ field }) => (
+              <PatternFormat
+                {...field}
+                format="(###) ###-####"
+                mask="_"
+                placeholder="(415) 555-1234"
+                allowEmptyFormatting
+                onValueChange={(values) => {
+                  // store digits only: "4155551234"
+                  field.onChange(values.value);
+                }}
+                style={{
+                  padding: "8px",
+                  borderRadius: "4px",
+                  border: "1px solid #ccc",
+                }}
+              />
+            )}
+          />
+          {errors.phone && <p style={{ color: "red", marginTop: "5px" }}>{errors.phone.message}</p>}
+        </div>
+
+        {/* Street Address */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Donor Street Address</label>
+          <input
+            {...register("address", { required: "Street address is required" })}
+            style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
+          {errors.address && <p style={{ color: "red", marginTop: "5px" }}>{errors.address.message}</p>}
+        </div>
+
+        {/* Checkboxes */}
+        <div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
+          <label>
+            <input type="checkbox" {...register("receive_emails")} /> Donor receive emails?
+          </label>
+          <label>
+            <input type="checkbox" {...register("receive_mailings")} /> Donor receive mailings?
+          </label>
+          <label>
+            <input type="checkbox" {...register("remain_anonymous")} /> Donor remain anonymous?
+          </label>
+        </div>
+
+        {/* Estimated Value
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Estimated value (USD)</label>
+          <input
+            placeholder="$123.45"
+            {...register("estimated_value", {
+              required: "Estimated donation value required",
+              pattern: {
+                value: /^\d+(\.\d{1,2})?$/,
+                message: "Enter a valid amount (e.g., 123.45)",
+              },
+            })}
+            style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
+          {errors.estimated_value && <p style={{ color: "red", marginTop: "5px" }}>{errors.estimated_value.message}</p>}
+        </div> */}
+
+        {/* Estimated Value */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>
+            Estimated value (USD)
+          </label>
+
+          <Controller
+            name="estimated_value"
+            control={control}
+            rules={{
+  validate: (value) => value != null || "Estimated donation value required",
+}}
+            render={({ field }) => (
+              <NumericFormat
+                value={field.value ?? ""}
+                thousandSeparator=","
+                decimalScale={2}
+                fixedDecimalScale
+                prefix="$"
+                placeholder="$1,234.00"
+                onValueChange={(values) => {
+                  field.onChange(values.floatValue ?? null);
+                }}
+                style={{
+                  padding: "8px",
+                  borderRadius: "4px",
+                  border: "1px solid #ccc",
+                }}
+              />
+            )}
+          />
+
+
+          {errors.estimated_value && (
+            <p style={{ color: "red", marginTop: "5px" }}>
+              {errors.estimated_value.message}
+            </p>
+          )}
+        </div>
+
+        {/* Items Donated */}
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Items donated</label>
+          <input
+            type="text"
+            placeholder="Describe the items you are donating"
+            {...register("items_donated", {
+              required: "Please enter the items you are donating",
+              maxLength: {
+                value: 500,
+                message: "Items description cannot exceed 500 characters",
+              },
+            })}
+            style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }}
+          />
+          {errors.items_donated && <p style={{ color: "red", marginTop: "5px" }}>{errors.items_donated.message}</p>}
+        </div>
+
+        <button
+          type="submit"
+          style={{
+            marginTop: "20px",
+            padding: "10px",
+            borderRadius: "5px",
+            border: "none",
+            backgroundColor: "#007bff",
+            color: "#fff",
+            fontWeight: "bold",
+            cursor: "pointer"
+          }}
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/app/types/Donation.ts b/app/types/Donation.ts
index bd7e782..c97570e 100644
--- a/app/types/Donation.ts
+++ b/app/types/Donation.ts
@@ -18,7 +18,7 @@ export type Donation = {
     donor_receive_emails: boolean;
     donor_remain_anonymous: boolean;
 
-    estimated_value: number;
+    estimated_value: number | null;
     items_donated: string;
 };
 
diff --git a/package-lock.json b/package-lock.json
index 3cef715..8c57f2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,10 @@
         "@supabase/supabase-js": "^2.81.1",
         "next": "16.0.1",
         "react": "19.2.0",
-        "react-dom": "19.2.0"
+        "react-dom": "19.2.0",
+        "react-hook-form": "^7.68.0",
+        "react-number-format": "^5.4.4",
+        "use-places-autocomplete": "^4.0.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -5759,6 +5762,22 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.68.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.68.0.tgz",
+      "integrity": "sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5766,6 +5785,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/read-cmd-shim": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-6.0.0.tgz",
@@ -6805,6 +6834,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-places-autocomplete": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-4.0.1.tgz",
+      "integrity": "sha512-AybOR/qzXcdaMCGSFveycfL3kztwseAOdagbYoJD8c3amll+gEiPmUkSNhYNUEBqbR+JmJG6/oBTRgihNbE+1A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 8b899b9..5ff60cf 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,10 @@
     "@supabase/supabase-js": "^2.81.1",
     "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.68.0",
+    "react-number-format": "^5.4.4",
+    "use-places-autocomplete": "^4.0.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

From deef23ca114106cb276f6843b2eb7c5afd461e85 Mon Sep 17 00:00:00 2001
From: katieyungchung <katieyungchung@g.ucla.edu>
Date: Tue, 20 Jan 2026 22:04:45 -0800
Subject: [PATCH 2/6] update donation form

---
 .../add}/components/DonationForm.tsx          | 211 +++++++-----------
 app/(main)/manage/[storeId]/add/page.tsx      |  33 +++
 app/(pages)/example/page.tsx                  |  27 ---
 app/(pages)/test-donations/page.tsx           |  53 -----
 app/components/test/donations.tsx             |  49 ----
 5 files changed, 109 insertions(+), 264 deletions(-)
 rename app/{ => (main)/manage/[storeId]/add}/components/DonationForm.tsx (67%)
 create mode 100644 app/(main)/manage/[storeId]/add/page.tsx
 delete mode 100644 app/(pages)/example/page.tsx
 delete mode 100644 app/(pages)/test-donations/page.tsx
 delete mode 100644 app/components/test/donations.tsx

diff --git a/app/components/DonationForm.tsx b/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
similarity index 67%
rename from app/components/DonationForm.tsx
rename to app/(main)/manage/[storeId]/add/components/DonationForm.tsx
index 4fa3e1e..2314952 100644
--- a/app/components/DonationForm.tsx
+++ b/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
@@ -1,12 +1,12 @@
-import { DonationInsert } from "../types/Donation";
-import { useState } from 'react';
+"use client";
+
+import { DonationInsert } from "../../../../../types/Donation";
 import { useForm, Controller } from "react-hook-form";
-import { NumericFormat, PatternFormat } from "react-number-format";
+import { PatternFormat } from "react-number-format";
 import { createDonation } from "@/app/api/donations/actions";
-// import usePlacesAutocomplete from "use-places-autocomplete";
 
 type FormData = {
-  donor_type: "individual" | "business";
+  donor_type?: "individual" | "business";
 
   individual_name?: string;
   business_name?: string;
@@ -36,6 +36,7 @@ export default function DonationForm() {
     formState: { errors }
   } = useForm<FormData>({
     defaultValues: {
+      donor_type: undefined,
       phone: "",
       estimated_value: null,
     }
@@ -43,60 +44,6 @@ export default function DonationForm() {
 
   const donorType = watch("donor_type");
 
-  // const onSubmit = async (data: FormData) => {
-  //   const donation: DonationInsert = {
-  //     receiver_user_id: "00000000-0000-0000-0000-000000000000", // TODO: real ID
-  //     store_id: null,
-
-  //     donor_is_individual: data.donor_type === "individual",
-
-  //     donor_individual_name:
-  //       data.donor_type === "individual"
-  //         ? data.individual_name ?? null
-  //         : null,
-
-  //     donor_business_name:
-  //       data.donor_type === "business"
-  //         ? data.business_name ?? null
-  //         : null,
-
-  //     donor_business_contact_name:
-  //       data.donor_type === "business"
-  //         ? data.business_contact_name ?? null
-  //         : null,
-
-  //     donor_email: data.email ?? null,
-  //     donor_phone: data.phone ?? null,
-  //     donor_street_address: data.address ?? null,
-
-  //     donor_receive_emails: data.receive_emails,
-  //     donor_receive_mailings: data.receive_mailings,
-  //     donor_remain_anonymous: data.remain_anonymous,
-
-  //     estimated_value: data.estimated_value,
-  //     items_donated: data.items_donated,
-  //   };
-
-
-  //   try {
-  //     const result = await createDonation(donation);
-  //     console.log("Donation created:", result);
-
-  //     // Reset form with default values including estimated_value
-  //     reset({
-  //       phone: "",
-  //       estimated_value: null,
-  //       donor_type: undefined,
-  //       receive_emails: false,
-  //       receive_mailings: false,
-  //       remain_anonymous: false,
-  //     });
-
-  //   } catch (error) {
-  //     console.error("Failed to create donation:", error);
-  //   }
-  // };
-
   const onSubmit = async (data: FormData) => {
     const donation: DonationInsert = {
       receiver_user_id: "00000000-0000-0000-0000-000000000000", // TODO: real ID
@@ -130,27 +77,28 @@ export default function DonationForm() {
       estimated_value: data.estimated_value,
       items_donated: data.items_donated,
     };
-
     try {
       const result = await createDonation(donation);
       console.log("Donation created:", result);
 
-      // Reset form with default values including estimated_value
-     reset({
-  donor_type: undefined,
-  individual_name: "",
-  business_name: "",
-  business_contact_name: "",
-  email: "",
-  phone: "",
-  address: "",
-  receiving_site: "",
-  receive_emails: false,
-  receive_mailings: false,
-  remain_anonymous: false,
-  estimated_value: undefined,
-  items_donated: "",
-});
+      // Reset all fields to empty/default values
+      reset({
+        donor_type: undefined,
+        individual_name: "",
+        business_name: "",
+        business_contact_name: "",
+        email: "",
+        phone: "",
+        address: "",
+        receiving_site: "",
+        receive_emails: false,
+        receive_mailings: false,
+        remain_anonymous: false,
+        estimated_value: null,
+        items_donated: "",
+      });
+      clearErrors();
+
     } catch (error) {
       console.error("Failed to create donation:", error);
     }
@@ -158,7 +106,18 @@ export default function DonationForm() {
 
   return (
     <div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px", border: "1px solid #ccc", borderRadius: "8px", fontFamily: "Arial, sans-serif" }}>
-      <h1 style={{ textAlign: "center", marginBottom: "20px" }}>Donation Form</h1>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center", 
+          gap: "1rem", 
+          marginTop: "20px",
+          marginBottom: "20px",
+          justifyContent: "center",
+        }}
+      >
+        <h1 style={{ margin: 0 }}>Donation Form</h1>
+      </div>
       <form onSubmit={handleSubmit(onSubmit)} style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
 
         {/* Receiving Site */}
@@ -173,22 +132,32 @@ export default function DonationForm() {
         </div>
 
         {/* Donor Type */}
-        <div style={{ display: "flex", gap: "20px", alignItems: "center" }}>
-          <label>
-            <input
-              type="radio"
-              value="individual"
-              {...register("donor_type", { required: true })}
-            /> Individual
-          </label>
-          <label>
-            <input
-              type="radio"
-              value="business"
-              {...register("donor_type", { required: true })}
-            /> Business
-          </label>
-        </div>
+        <Controller
+          name="donor_type"
+          control={control}
+          rules={{ required: "Please select a donor type" }}
+          render={({ field }) => (
+            <>
+              <label>
+                <input
+                  type="radio"
+                  value="individual"
+                  checked={field.value === "individual"}
+                  onChange={() => field.onChange("individual")}
+                /> Individual
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  value="business"
+                  checked={field.value === "business"}
+                  onChange={() => field.onChange("business")}
+                /> Business
+              </label>
+              {errors.donor_type && <p style={{ color: "red" }}>{errors.donor_type.message}</p>}
+            </>
+          )}
+        />
 
         {/* Conditional Name Fields */}
         {donorType === "individual" && (
@@ -286,56 +255,29 @@ export default function DonationForm() {
           </label>
         </div>
 
-        {/* Estimated Value
+        {/* Estimated Value */}
         <div style={{ display: "flex", flexDirection: "column" }}>
-          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>Estimated value (USD)</label>
+          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>
+            Estimated value (USD)
+          </label>
+
           <input
-            placeholder="$123.45"
+            type="text"
+            placeholder="1,234.00"
             {...register("estimated_value", {
-              required: "Estimated donation value required",
+              required: "Estimated donation value is required",
               pattern: {
                 value: /^\d+(\.\d{1,2})?$/,
-                message: "Enter a valid amount (e.g., 123.45)",
+                message: "Please enter a valid dollar amount in the form 1234.56",
               },
             })}
-            style={{ padding: "8px", borderRadius: "4px", border: "1px solid #ccc" }}
-          />
-          {errors.estimated_value && <p style={{ color: "red", marginTop: "5px" }}>{errors.estimated_value.message}</p>}
-        </div> */}
-
-        {/* Estimated Value */}
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <label style={{ fontWeight: "bold", marginBottom: "5px" }}>
-            Estimated value (USD)
-          </label>
-
-          <Controller
-            name="estimated_value"
-            control={control}
-            rules={{
-  validate: (value) => value != null || "Estimated donation value required",
-}}
-            render={({ field }) => (
-              <NumericFormat
-                value={field.value ?? ""}
-                thousandSeparator=","
-                decimalScale={2}
-                fixedDecimalScale
-                prefix="$"
-                placeholder="$1,234.00"
-                onValueChange={(values) => {
-                  field.onChange(values.floatValue ?? null);
-                }}
-                style={{
-                  padding: "8px",
-                  borderRadius: "4px",
-                  border: "1px solid #ccc",
-                }}
-              />
-            )}
+            style={{
+              padding: "8px",
+              borderRadius: "4px",
+              border: "1px solid #ccc",
+            }}
           />
 
-
           {errors.estimated_value && (
             <p style={{ color: "red", marginTop: "5px" }}>
               {errors.estimated_value.message}
@@ -371,7 +313,6 @@ export default function DonationForm() {
             backgroundColor: "#007bff",
             color: "#fff",
             fontWeight: "bold",
-            cursor: "pointer"
           }}
         >
           Submit
diff --git a/app/(main)/manage/[storeId]/add/page.tsx b/app/(main)/manage/[storeId]/add/page.tsx
new file mode 100644
index 0000000..7318271
--- /dev/null
+++ b/app/(main)/manage/[storeId]/add/page.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import DonationForm from "./components/DonationForm";
+
+interface PageProps {
+  params: { id: string }; // Next.js dynamic route param
+}
+
+export default function AddStoreItemsPage({ params }: PageProps) {
+  const { id } = params;
+
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        padding: "2rem",
+      }}
+    >
+  
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+        }}
+      >
+
+        <div style={{ flex: 1 }}>
+          
+          <DonationForm />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(pages)/example/page.tsx b/app/(pages)/example/page.tsx
deleted file mode 100644
index 9cbe716..0000000
--- a/app/(pages)/example/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-
-import { createExampleEntry } from "@/app/api/example/actions";
-import { ExampleType } from "@/app/types/ExampleType";
-import TestDonationsPage from "../test-donations/page";
-
-export default function Example() {
-  const data: ExampleType = {
-    id: 5,
-    name: 'harry',
-  };
-
-  const handleExampleClick = async () => {
-    await createExampleEntry(data);
-  };
-
-  return (
-    <div>
-      Welcome to PATH! This is an example page.
-      <br />
-      <button onClick={handleExampleClick}>
-        Click to add data to the example table
-      </button>
-      <TestDonationsPage />
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/app/(pages)/test-donations/page.tsx b/app/(pages)/test-donations/page.tsx
deleted file mode 100644
index 88a1d06..0000000
--- a/app/(pages)/test-donations/page.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { createDonation, deleteDonation } from "@/app/api/donations/actions";
-import DonationForm from "@/app/components/DonationForm";
-
-export default function TestDonationsPage() {
-
-  const handleCreate = async () => {
-    try {
-      const donation = await createDonation({
-        receiver_user_id: "00000000-0000-0000-0000-000000000000",
-        store_id: null,
-        donor_is_individual: true,
-        donor_individual_name: "Test User",
-        donor_business_name: "Donor Business Name",
-        donor_business_contact_name: "Ms. Donor",
-        donor_email: "test@example.com",
-        donor_phone: "123-456-7890",
-        donor_street_address: "1234 Bruin Ave",
-        donor_receive_mailings: false,
-        donor_receive_emails: true,
-        donor_remain_anonymous: false,
-        estimated_value: 50,
-        items_donated: "Items donated!"
-      });
-
-      console.log("Created donation:", donation);
-    } catch (err) {
-      console.error("Create failed:", err);
-    }
-  };
-
-  const handleDelete = async () => {
-    const idToDelete = "b44b3b18-c499-4aec-9e73-aab1d3788d59"; // hard-coded ID for now
-    try {
-      const result = await deleteDonation(idToDelete);
-      console.log("Deleted donation:", result);
-    } catch (err) {
-      console.error("Delete failed:", err);
-    }
-  };
-
-  return (
-    // <div style={{ padding: 20 }}>
-    //   <h1>Test Donations</h1>
-    //   <button onClick={handleCreate}>Create Donation</button>
-    //   <button onClick={handleDelete} style={{ marginLeft: 10 }}>Delete Donation</button>
-    // </div>
-    <div>
-      <DonationForm />
-    </div>
-  );
-}
diff --git a/app/components/test/donations.tsx b/app/components/test/donations.tsx
deleted file mode 100644
index 3d78fc2..0000000
--- a/app/components/test/donations.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import { createDonation, deleteDonation } from "@/app/api/donations/actions";
-
-export default function TestDonationsPage() {
-
-  const handleCreate = async () => {
-    try {
-      const donation = await createDonation({
-        receiver_user_id: "00000000-0000-0000-0000-000000000000",
-        store_id: null,
-        donor_is_individual: true,
-        donor_individual_name: "Test User",
-        donor_business_name: "Donor Business Name",
-        donor_business_contact_name: "Ms. Donor",
-        donor_email: "test@example.com",
-        donor_phone: "123-456-7890",
-        donor_street_address: "1234 Bruin Ave",
-        donor_receive_mailings: false,
-        donor_receive_emails: true,
-        donor_remain_anonymous: false,
-        estimated_value: 50,
-        items_donated: "Items donated!"
-      });
-
-      console.log("Created donation:", donation);
-    } catch (err) {
-      console.error("Create failed:", err);
-    }
-  };
-
-  const handleDelete = async () => {
-    const idToDelete = "5001e28d-91b6-4df8-8976-4c88c4ad112f"; // hard-coded ID for now
-    try {
-      const result = await deleteDonation(idToDelete);
-      console.log("Deleted donation:", result);
-    } catch (err) {
-      console.error("Delete failed:", err);
-    }
-  };
-
-  return (
-    <div style={{ padding: 20 }}>
-      <h1>Test Donations</h1>
-      <button onClick={handleCreate}>Create Donation</button>
-      <button onClick={handleDelete} style={{ marginLeft: 10 }}>Delete Donation</button>
-    </div>
-  );
-}

From cbdf9857791981ab833fb13917bc712800b91c8b Mon Sep 17 00:00:00 2001
From: katieyungchung <katieyungchung@g.ucla.edu>
Date: Tue, 20 Jan 2026 22:07:03 -0800
Subject: [PATCH 3/6] remove use place autocomplete dependency

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5ff60cf..d74a7aa 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.68.0",
-    "react-number-format": "^5.4.4",
-    "use-places-autocomplete": "^4.0.1"
+    "react-number-format": "^5.4.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

From 4e9f9e3e2037d64ac7f5b80b062232490adb600b Mon Sep 17 00:00:00 2001
From: katieyungchung <katieyungchung@g.ucla.edu>
Date: Tue, 20 Jan 2026 22:13:39 -0800
Subject: [PATCH 4/6] remove params from page.tsx

---
 app/(main)/manage/[storeId]/add/page.tsx | 30 +++---------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/app/(main)/manage/[storeId]/add/page.tsx b/app/(main)/manage/[storeId]/add/page.tsx
index 7318271..ea7b119 100644
--- a/app/(main)/manage/[storeId]/add/page.tsx
+++ b/app/(main)/manage/[storeId]/add/page.tsx
@@ -1,33 +1,9 @@
-import React from "react";
 import DonationForm from "./components/DonationForm";
 
-interface PageProps {
-  params: { id: string }; // Next.js dynamic route param
-}
-
-export default function AddStoreItemsPage({ params }: PageProps) {
-  const { id } = params;
-
+export default function AddStoreItemsPage() {
   return (
-    <div
-      style={{
-        minHeight: "100vh",
-        padding: "2rem",
-      }}
-    >
-  
-      <div
-        style={{
-          display: "flex",
-          alignItems: "flex-start",
-        }}
-      >
-
-        <div style={{ flex: 1 }}>
-          
-          <DonationForm />
-        </div>
-      </div>
+    <div>
+      <DonationForm />
     </div>
   );
 }

From 3a1d7cb90d5d749191fd49ae0c947dfae9524eb8 Mon Sep 17 00:00:00 2001
From: katieyungchung <katieyungchung@g.ucla.edu>
Date: Thu, 22 Jan 2026 22:26:12 -0800
Subject: [PATCH 5/6] fix donation form and actions

---
 .../[storeId]/add/components/DonationForm.tsx |  2 +-
 app/api/donations/actions.ts                  | 39 +++++++++++++++++++
 app/types/Donation.ts                         | 25 ------------
 app/types/donation.ts                         | 25 ------------
 4 files changed, 40 insertions(+), 51 deletions(-)
 create mode 100644 app/api/donations/actions.ts
 delete mode 100644 app/types/Donation.ts
 delete mode 100644 app/types/donation.ts

diff --git a/app/(main)/manage/[storeId]/add/components/DonationForm.tsx b/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
index b0e5987..5a79cb2 100644
--- a/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
+++ b/app/(main)/manage/[storeId]/add/components/DonationForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { DonationInsert } from "../../../../../types/donation";
+import { DonationInsert } from "@/app/types/donation";
 import { useForm, Controller } from "react-hook-form";
 import { PatternFormat } from "react-number-format";
 import { createDonation } from "@/app/actions/donation";
diff --git a/app/api/donations/actions.ts b/app/api/donations/actions.ts
new file mode 100644
index 0000000..eafda36
--- /dev/null
+++ b/app/api/donations/actions.ts
@@ -0,0 +1,39 @@
+"use server";
+
+import { DonationInsert } from '@/app/types/donation';
+import { createClient } from '@/app/lib/supabase/server-client';
+
+export async function createDonation(data: DonationInsert) {
+    const supabase = await createClient();
+
+    const { data: inserted, error } = await supabase
+        .from("donations")
+        .insert(data)
+        .select() // after inserting, return full new row
+        .single(); // expect just one row, if more or less, throw an error
+
+        if (error) {
+            console.error("Error creating donation: ", error);
+            throw new Error(error.message);
+        }
+
+        return inserted; // return the row that was created
+}
+
+// deletes donation based on donation_id
+export async function deleteDonation(donation_id: string) {
+    const supabase = await createClient();
+
+    const { error } = await supabase
+        .from("donations")
+        .delete()
+        .eq("donation_id", donation_id);
+    
+    if (error) {
+        console.error("Error deleting donation:", error);
+        throw new Error(error.message);
+    }
+
+    return { success: true };
+}
+
diff --git a/app/types/Donation.ts b/app/types/Donation.ts
deleted file mode 100644
index c97570e..0000000
--- a/app/types/Donation.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type Donation = {
-    donation_id?: string; // optional, generated by database
-    receiver_user_id: string;
-    store_id?: string | null;
-
-    date_submitted?: Date | string; // generated by default
-    donor_is_individual: boolean;
-
-    donor_individual_name?: string | null; // optional
-    donor_business_name?: string | null; // optional
-    donor_business_contact_name?: string | null; // optional
-
-    donor_email?: string | null; // optional
-    donor_phone?: string | null; // optional
-
-    donor_street_address: string | null; // optional
-    donor_receive_mailings: boolean;
-    donor_receive_emails: boolean;
-    donor_remain_anonymous: boolean;
-
-    estimated_value: number | null;
-    items_donated: string;
-};
-
-export type DonationInsert = Omit<Donation, 'donation_id' | 'date_submitted'>
\ No newline at end of file
diff --git a/app/types/donation.ts b/app/types/donation.ts
deleted file mode 100644
index c97570e..0000000
--- a/app/types/donation.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type Donation = {
-    donation_id?: string; // optional, generated by database
-    receiver_user_id: string;
-    store_id?: string | null;
-
-    date_submitted?: Date | string; // generated by default
-    donor_is_individual: boolean;
-
-    donor_individual_name?: string | null; // optional
-    donor_business_name?: string | null; // optional
-    donor_business_contact_name?: string | null; // optional
-
-    donor_email?: string | null; // optional
-    donor_phone?: string | null; // optional
-
-    donor_street_address: string | null; // optional
-    donor_receive_mailings: boolean;
-    donor_receive_emails: boolean;
-    donor_remain_anonymous: boolean;
-
-    estimated_value: number | null;
-    items_donated: string;
-};
-
-export type DonationInsert = Omit<Donation, 'donation_id' | 'date_submitted'>
\ No newline at end of file

From 4ec73e4baffa88e4514adee39b5b940cd5760fa3 Mon Sep 17 00:00:00 2001
From: katieyungchung <katieyungchung@g.ucla.edu>
Date: Thu, 22 Jan 2026 22:36:14 -0800
Subject: [PATCH 6/6] add back donation.ts type

---
 app/types/donation.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 app/types/donation.ts

diff --git a/app/types/donation.ts b/app/types/donation.ts
new file mode 100644
index 0000000..33ecc5b
--- /dev/null
+++ b/app/types/donation.ts
@@ -0,0 +1,28 @@
+export type Donation = {
+  donation_id: string; // generated by database
+
+  date_submitted: Date | string; // generated by default
+  donor_is_individual: boolean;
+
+  donor_individual_name?: string | null; // optional
+  donor_business_name?: string | null; // optional
+  donor_business_contact_name?: string | null; // optional
+
+  donor_email: string;
+  donor_phone?: string | null; // optional
+
+  donor_street_address?: string | null; // optional
+  donor_receive_mailings: boolean;
+  donor_receive_emails: boolean;
+  donor_remain_anonymous: boolean;
+
+  estimated_value: number;
+  items_donated: string;
+
+  receiver_first_name: string;
+  receiver_last_name: string;
+  store_name?: string;
+  store_street_address?: string;
+};
+
+export type DonationInsert = Omit<Donation, 'donation_id' | 'date_submitted'>;
\ No newline at end of file