From 3a94e213496e16e5469caaaa9e41a48544354593 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 9 Oct 2024 15:32:38 +0700
Subject: [PATCH 01/19] Refactor component and page structure for
 responsiveness, add project type selection to application page

---
 src/app/business/apply/page.tsx | 83 +++++++++++++++++++++++++++++++--
 1 file changed, 80 insertions(+), 3 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 7e4d166..1878fdd 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -21,6 +21,7 @@ export default function Apply() {
   const [isForSale, setIsForSale] = useState("");
   const [isGenerating, setIsGenarting] = useState("");
   const [pitch, setPitch] = useState("");
+  const [projectType, setProjectType] = useState<string[]>([]);
   const communitySize = [
     "N/A",
     "0-5K",
@@ -40,13 +41,28 @@ export default function Apply() {
       console.error(error);
     } else {
       if (BusinessType) {
-        console.table();
+        // console.table();
         setIndustry(BusinessType.map((item) => item.value));
       }
     }
   };
+  const fetchProjectType = async () => {
+    let { data: ProjectType, error } = await supabase
+      .from("ProjectType")
+      .select("value");
+
+    if (error) {
+      console.error(error);
+    } else {
+      if (ProjectType) {
+        console.table(ProjectType);
+        setProjectType(ProjectType.map((item) => item.value));
+      }
+    }
+  };
   useEffect(() => {
     fetchIndustry();
+    fetchProjectType();
   }, []);
   return (
     <div>
@@ -65,7 +81,7 @@ export default function Apply() {
           </p>
         </div>
       </div>
-      <div className="grid grid-flow-row auto-rows-max w-full ml-48">
+      <div className="grid grid-flow-row auto-rows-max w-3/4 ml-48">
         <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
         <p className="ml-96 mt-5 text-neutral-500">
           All requested information in this section is required.
@@ -289,9 +305,70 @@ export default function Apply() {
           </div>
         </div>
       </div>
+
+      {/* apply first project */}
+      <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
+        {/* header */}
+        <div className="ml-96">
+          <h1 className="text-3xl font-bold mt-10">
+            Begin Your First Fundraising Project
+          </h1>
+          <p className="mt-3 text-sm text-neutral-500">
+            Starting a fundraising project is mandatory for all businesses. This
+            step is crucial <br />
+            to begin your journey and unlock the necessary tools for raising
+            funds.
+          </p>
+
+          {/* project's name */}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="projectName" className="font-bold text-lg">
+              Project name
+            </Label>
+            <div className="flex space-x-5">
+              <Input type="text" id="projectName" className="w-96" />
+            </div>
+          </div>
+
+          {/* project type */}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="industry" className="font-bold text-lg mt-10">
+              Project type
+            </Label>
+            <div className="flex space-x-5">
+              <Select>
+                <SelectTrigger className="w-96">
+                  <SelectValue placeholder="Select a Project type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Project type</SelectLabel>
+                    {projectType.map((i) => (
+                      <SelectItem value={i}>{i}</SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <span className="text-[12px] text-neutral-500 self-center">
+                Please specify the primary purpose of the funds
+              </span>
+            </div>
+          </div>
+
+          {/* short description */}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Short description
+            </Label>
+            <div className="flex space-x-5">
+              <Input type="text" id="companyName" className="w-96" />
+            </div>
+          </div>
+        </div>
+      </div>
       {/* Submit */}
       <center>
-        <Button className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5">
+        <Button className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5">
           Submit application
         </Button>
       </center>

From c93b05ab45b18239cc0c1ef436b1424bbc3b0345 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 9 Oct 2024 15:41:35 +0700
Subject: [PATCH 02/19] Refactor component and page structure for
 responsiveness, add textarea component for project description and pitch deck

---
 src/app/business/apply/page.tsx | 58 +++++++++++++++++++++++++++++----
 src/components/ui/textarea.tsx  | 24 ++++++++++++++
 2 files changed, 75 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 1878fdd..5ac5ad8 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/select";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
+import { Textarea } from "@/components/ui/textarea";
 
 export default function Apply() {
   let supabase = createSupabaseClient();
@@ -20,8 +21,9 @@ export default function Apply() {
   const [isInUS, setIsInUS] = useState("");
   const [isForSale, setIsForSale] = useState("");
   const [isGenerating, setIsGenarting] = useState("");
-  const [pitch, setPitch] = useState("");
+  const [businessPitch, setBusinessPitch] = useState("");
   const [projectType, setProjectType] = useState<string[]>([]);
+  const [projectPitch, setProjectPitch] = useState("");
   const communitySize = [
     "N/A",
     "0-5K",
@@ -245,15 +247,15 @@ export default function Apply() {
             </Label>
             <div className="flex space-x-2 w-96">
               <Button
-                variant={pitch === "text" ? "default" : "outline"}
-                onClick={() => setPitch("text")}
+                variant={businessPitch === "text" ? "default" : "outline"}
+                onClick={() => setBusinessPitch("text")}
                 className="w-32 h-12 text-base"
               >
                 Paste URL
               </Button>
               <Button
-                variant={pitch === "file" ? "default" : "outline"}
-                onClick={() => setPitch("file")}
+                variant={businessPitch === "file" ? "default" : "outline"}
+                onClick={() => setBusinessPitch("file")}
                 className="w-32 h-12 text-base"
               >
                 Upload a file
@@ -261,7 +263,7 @@ export default function Apply() {
             </div>
             <div className="flex space-x-5">
               <Input
-                type={pitch}
+                type={businessPitch}
                 id="companyName"
                 className="w-96"
                 placeholder="https:// "
@@ -361,7 +363,49 @@ export default function Apply() {
               Short description
             </Label>
             <div className="flex space-x-5">
-              <Input type="text" id="companyName" className="w-96" />
+              <Textarea id="shortDescription" className="w-96" />
+              <span className="text-[12px] text-neutral-500 self-center">
+                Could you provide a brief description of your project <br /> in
+                one or two sentences?
+              </span>
+            </div>
+          </div>
+
+          {/* Pitch deck */}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Pitch deck
+            </Label>
+            <div className="flex space-x-2 w-96">
+              <Button
+                variant={projectPitch === "text" ? "default" : "outline"}
+                onClick={() => setProjectPitch("text")}
+                className="w-32 h-12 text-base"
+              >
+                Paste URL
+              </Button>
+              <Button
+                variant={projectPitch === "file" ? "default" : "outline"}
+                onClick={() => setProjectPitch("file")}
+                className="w-32 h-12 text-base"
+              >
+                Upload a file
+              </Button>
+            </div>
+            <div className="flex space-x-5">
+              <Input
+                type={projectPitch}
+                id="companyName"
+                className="w-96"
+                placeholder="https:// "
+              />
+              <span className="text-[12px] text-neutral-500 self-center">
+                Please upload a file or paste a link to your pitch, which should{" "}
+                <br />
+                cover key aspects of your project: what it will do, what
+                investors <br /> can expect to gain, and any highlights that
+                make it stand out.
+              </span>
             </div>
           </div>
         </div>
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

From dfefe603cfbd47e20838f76437e181b37268437e Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 9 Oct 2024 16:19:13 +0700
Subject: [PATCH 03/19] Update package.json and package-lock.json

---
 package-lock.json               |  17 +
 package.json                    |   1 +
 src/app/business/apply/page.tsx | 672 +++++++++++++++++---------------
 3 files changed, 369 insertions(+), 321 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 00c256c..9c88ef2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "react": "^18",
         "react-countup": "^6.5.3",
         "react-dom": "^18",
+        "react-hook-form": "^7.53.0",
         "react-hot-toast": "^2.4.1",
         "react-markdown": "^9.0.1",
         "recharts": "^2.12.7",
@@ -6465,6 +6466,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "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-hot-toast": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
diff --git a/package.json b/package.json
index b372e61..fdfd953 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "react": "^18",
     "react-countup": "^6.5.3",
     "react-dom": "^18",
+    "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",
diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 5ac5ad8..3d58f3a 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -14,10 +14,13 @@ import {
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
+import { useForm } from "react-hook-form";
 
 export default function Apply() {
   let supabase = createSupabaseClient();
+  const { register, handleSubmit, setValue } = useForm();
   const [industry, setIndustry] = useState<string[]>([]);
+  const [selectedIndustry, setSelectedIndustry] = useState("");
   const [isInUS, setIsInUS] = useState("");
   const [isForSale, setIsForSale] = useState("");
   const [isGenerating, setIsGenarting] = useState("");
@@ -34,6 +37,13 @@ export default function Apply() {
     "100K+",
   ];
 
+  const onSubmit = (data: any) => {
+    alert(JSON.stringify(data));
+  };
+  const handleSelectChange = (value: string) => {
+    setSelectedIndustry(value);
+    setValue("industry", value);
+  };
   const fetchIndustry = async () => {
     let { data: BusinessType, error } = await supabase
       .from("BusinessType")
@@ -83,339 +93,359 @@ export default function Apply() {
           </p>
         </div>
       </div>
-      <div className="grid grid-flow-row auto-rows-max w-3/4 ml-48">
-        <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
-        <p className="ml-96 mt-5 text-neutral-500">
-          All requested information in this section is required.
-        </p>
-        {/* form */}
-
-        {/* company name */}
-        <div className="ml-96 mt-5 space-y-10">
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Company name
-            </Label>
-            <div className="flex space-x-5">
-              <Input type="text" id="companyName" className="w-96" />
-              <span className="text-[12px] text-neutral-500 self-center">
-                This should be the name your company uses on your <br />
-                website and in the market.
-              </span>
-            </div>
-          </div>
-          {/* industry */}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="industry" className="font-bold text-lg mt-10">
-              Industry
-            </Label>
-            <div className="flex space-x-5">
-              <Select>
-                <SelectTrigger className="w-96">
-                  <SelectValue placeholder="Select an industry" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Industry</SelectLabel>
-                    {industry.map((i) => (
-                      <SelectItem value={i}>{i}</SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <span className="text-[12px] text-neutral-500 self-center">
-                Choose the industry that best aligns with your business.
-              </span>
-            </div>
-          </div>
-          {/* How much money has your company raised to date? */}
-          <div className="space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              How much money has your company <br /> raised to date?
-            </Label>
-            <div className="flex space-x-5">
-              <Input
-                type="text"
-                id="companyName"
-                className="w-96"
-                placeholder="$   1,000,000"
-              />
-              <span className="text-[12px] text-neutral-500 self-center">
-                The sum total of past financing, including angel or venture{" "}
-                <br />
-                capital, loans, grants, or token sales.
-              </span>
-            </div>
-          </div>
-          {/* Is your company incorporated in the United States? */}
-          <div className="space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Is your company incorporated in the <br />
-              United States?
-            </Label>
-            <div className="flex space-x-5">
-              <div className="flex space-x-2 w-96">
-                <Button
-                  variant={isInUS === "Yes" ? "default" : "outline"}
-                  onClick={() => setIsInUS("Yes")}
-                  className="w-20 h-12 text-base"
-                >
-                  Yes
-                </Button>
-                <Button
-                  variant={isInUS === "No" ? "default" : "outline"}
-                  onClick={() => setIsInUS("No")}
-                  className="w-20 h-12 text-base"
-                >
-                  No
-                </Button>
-              </div>
-              <span className="text-[12px] text-neutral-500 self-center">
-                Only companies that are incorporated or formed in the US are{" "}
-                <br />
-                eligible to raise via Reg CF. If your company is incorporated{" "}
-                <br />
-                outside the US, we still encourage you to apply.
-              </span>
-            </div>
-          </div>
-
-          {/* Is your product available (for sale) in market? */}
-          <div className="space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Is your product available (for sale) <br />
-              in market?
-            </Label>
-            <div className="flex space-x-5">
-              <div className="flex space-x-2 w-96">
-                <Button
-                  variant={isForSale === "Yes" ? "default" : "outline"}
-                  onClick={() => setIsForSale("Yes")}
-                  className="w-20 h-12 text-base"
-                >
-                  Yes
-                </Button>
-                <Button
-                  variant={isForSale === "No" ? "default" : "outline"}
-                  onClick={() => setIsForSale("No")}
-                  className="w-20 h-12 text-base"
-                >
-                  No
-                </Button>
-              </div>
-              <span className="text-[12px] text-neutral-500 self-center">
-                Only check this box if customers can access, use, or buy your{" "}
-                <br />
-                product today.
-              </span>
-            </div>
-          </div>
-
-          {/* Is your company generating revenue?*/}
-          <div className="space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Is your company generating revenue?
-            </Label>
-            <div className="flex space-x-5">
-              <div className="flex space-x-2 w-96">
-                <Button
-                  variant={isGenerating === "Yes" ? "default" : "outline"}
-                  onClick={() => setIsGenarting("Yes")}
-                  className="w-20 h-12 text-base"
-                >
-                  Yes
-                </Button>
-                <Button
-                  variant={isGenerating === "No" ? "default" : "outline"}
-                  onClick={() => setIsGenarting("No")}
-                  className="w-20 h-12 text-base"
-                >
-                  No
-                </Button>
-              </div>
-              <span className="text-[12px] text-neutral-500 self-center">
-                Only check this box if your company is making money. <br />
-                Please elaborate on revenue and other traction below.
-              </span>
-            </div>
-          </div>
-
-          {/* Pitch deck */}
-          <div className="space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Pitch deck
-            </Label>
-            <div className="flex space-x-2 w-96">
-              <Button
-                variant={businessPitch === "text" ? "default" : "outline"}
-                onClick={() => setBusinessPitch("text")}
-                className="w-32 h-12 text-base"
-              >
-                Paste URL
-              </Button>
-              <Button
-                variant={businessPitch === "file" ? "default" : "outline"}
-                onClick={() => setBusinessPitch("file")}
-                className="w-32 h-12 text-base"
-              >
-                Upload a file
-              </Button>
-            </div>
-            <div className="flex space-x-5">
-              <Input
-                type={businessPitch}
-                id="companyName"
-                className="w-96"
-                placeholder="https:// "
-              />
-              <span className="text-[12px] text-neutral-500 self-center">
-                Your pitch deck and other application info will be used for{" "}
-                <br />
-                internal purposes only. <br />
-                Please make sure this document is publicly accessible. This can{" "}
-                <br />
-                be a DocSend, Box, Dropbox, Google Drive or other link.
-              </span>
-            </div>
-          </div>
-
-          {/* What's the rough size of your community? */}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="industry" className="font-bold text-lg mt-10">
-              What's the rough size of your <br /> community?
-            </Label>
-            <div className="flex space-x-5">
-              <Select>
-                <SelectTrigger className="w-96">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Select</SelectLabel>
-                    {communitySize.map((i) => (
-                      <SelectItem value={i}>{i}</SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <span className="text-[12px] text-neutral-500 self-center">
-                Include your email list, social media following (i.e. Instagram,{" "}
-                <br /> Discord, Facebook, Twitter, TikTok). We’d like to
-                understand the <br /> rough size of your current audience.
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* apply first project */}
-      <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
-        {/* header */}
-        <div className="ml-96">
-          <h1 className="text-3xl font-bold mt-10">
-            Begin Your First Fundraising Project
-          </h1>
-          <p className="mt-3 text-sm text-neutral-500">
-            Starting a fundraising project is mandatory for all businesses. This
-            step is crucial <br />
-            to begin your journey and unlock the necessary tools for raising
-            funds.
+      {/* form */}
+      <form action="" onSubmit={handleSubmit(onSubmit)}>
+        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-48">
+          <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
+          <p className="ml-96 mt-5 text-neutral-500">
+            All requested information in this section is required.
           </p>
 
-          {/* project's name */}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="projectName" className="font-bold text-lg">
-              Project name
-            </Label>
-            <div className="flex space-x-5">
-              <Input type="text" id="projectName" className="w-96" />
+          {/* company name */}
+          <div className="ml-96 mt-5 space-y-10">
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Company name
+              </Label>
+              <div className="flex space-x-5">
+                <Input
+                  type="text"
+                  id="companyName"
+                  className="w-96"
+                  {...register("companyName")}
+                />
+                <span className="text-[12px] text-neutral-500 self-center">
+                  This should be the name your company uses on your <br />
+                  website and in the market.
+                </span>
+              </div>
+            </div>
+            {/* industry */}
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="industry" className="font-bold text-lg mt-10">
+                Industry
+              </Label>
+              <div className="flex space-x-5">
+                <Select onValueChange={(value) => handleSelectChange(value)}>
+                  <SelectTrigger className="w-96">
+                    <SelectValue placeholder="Select an industry" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Industry</SelectLabel>
+                      {industry.map((i) => (
+                        <SelectItem key={i} value={i}>
+                          {i}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <input
+                  type="hidden"
+                  {...register("industry")}
+                  value={selectedIndustry}
+                />
+                {/* {selectedIndustry} */}
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Choose the industry that best aligns with your business.
+                </span>
+              </div>
+            </div>
+            {/* How much money has your company raised to date? */}
+            <div className="space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                How much money has your company <br /> raised to date?
+              </Label>
+              <div className="flex space-x-5">
+                <Input
+                  type="text"
+                  id="companyName"
+                  className="w-96"
+                  placeholder="$   1,000,000"
+                  {...register}
+                />
+                <span className="text-[12px] text-neutral-500 self-center">
+                  The sum total of past financing, including angel or venture{" "}
+                  <br />
+                  capital, loans, grants, or token sales.
+                </span>
+              </div>
+            </div>
+            {/* Is your company incorporated in the United States? */}
+            <div className="space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Is your company incorporated in the <br />
+                United States?
+              </Label>
+              <div className="flex space-x-5">
+                <div className="flex space-x-2 w-96">
+                  <Button
+                    variant={isInUS === "Yes" ? "default" : "outline"}
+                    onClick={() => setIsInUS("Yes")}
+                    className="w-20 h-12 text-base"
+                  >
+                    Yes
+                  </Button>
+                  <Button
+                    variant={isInUS === "No" ? "default" : "outline"}
+                    onClick={() => setIsInUS("No")}
+                    className="w-20 h-12 text-base"
+                  >
+                    No
+                  </Button>
+                </div>
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Only companies that are incorporated or formed in the US are{" "}
+                  <br />
+                  eligible to raise via Reg CF. If your company is incorporated{" "}
+                  <br />
+                  outside the US, we still encourage you to apply.
+                </span>
+              </div>
             </div>
-          </div>
 
-          {/* project type */}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="industry" className="font-bold text-lg mt-10">
-              Project type
-            </Label>
-            <div className="flex space-x-5">
-              <Select>
-                <SelectTrigger className="w-96">
-                  <SelectValue placeholder="Select a Project type" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Project type</SelectLabel>
-                    {projectType.map((i) => (
-                      <SelectItem value={i}>{i}</SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <span className="text-[12px] text-neutral-500 self-center">
-                Please specify the primary purpose of the funds
-              </span>
+            {/* Is your product available (for sale) in market? */}
+            <div className="space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Is your product available (for sale) <br />
+                in market?
+              </Label>
+              <div className="flex space-x-5">
+                <div className="flex space-x-2 w-96">
+                  <Button
+                    variant={isForSale === "Yes" ? "default" : "outline"}
+                    onClick={() => setIsForSale("Yes")}
+                    className="w-20 h-12 text-base"
+                  >
+                    Yes
+                  </Button>
+                  <Button
+                    variant={isForSale === "No" ? "default" : "outline"}
+                    onClick={() => setIsForSale("No")}
+                    className="w-20 h-12 text-base"
+                  >
+                    No
+                  </Button>
+                </div>
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Only check this box if customers can access, use, or buy your{" "}
+                  <br />
+                  product today.
+                </span>
+              </div>
             </div>
-          </div>
 
-          {/* short description */}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Short description
-            </Label>
-            <div className="flex space-x-5">
-              <Textarea id="shortDescription" className="w-96" />
-              <span className="text-[12px] text-neutral-500 self-center">
-                Could you provide a brief description of your project <br /> in
-                one or two sentences?
-              </span>
+            {/* Is your company generating revenue?*/}
+            <div className="space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Is your company generating revenue?
+              </Label>
+              <div className="flex space-x-5">
+                <div className="flex space-x-2 w-96">
+                  <Button
+                    variant={isGenerating === "Yes" ? "default" : "outline"}
+                    onClick={() => setIsGenarting("Yes")}
+                    className="w-20 h-12 text-base"
+                  >
+                    Yes
+                  </Button>
+                  <Button
+                    variant={isGenerating === "No" ? "default" : "outline"}
+                    onClick={() => setIsGenarting("No")}
+                    className="w-20 h-12 text-base"
+                  >
+                    No
+                  </Button>
+                </div>
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Only check this box if your company is making money. <br />
+                  Please elaborate on revenue and other traction below.
+                </span>
+              </div>
             </div>
-          </div>
 
-          {/* Pitch deck */}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="companyName" className="font-bold text-lg">
-              Pitch deck
-            </Label>
-            <div className="flex space-x-2 w-96">
-              <Button
-                variant={projectPitch === "text" ? "default" : "outline"}
-                onClick={() => setProjectPitch("text")}
-                className="w-32 h-12 text-base"
-              >
-                Paste URL
-              </Button>
-              <Button
-                variant={projectPitch === "file" ? "default" : "outline"}
-                onClick={() => setProjectPitch("file")}
-                className="w-32 h-12 text-base"
-              >
-                Upload a file
-              </Button>
+            {/* Pitch deck */}
+            <div className="space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Pitch deck
+              </Label>
+              <div className="flex space-x-2 w-96">
+                <Button
+                  variant={businessPitch === "text" ? "default" : "outline"}
+                  onClick={() => setBusinessPitch("text")}
+                  className="w-32 h-12 text-base"
+                >
+                  Paste URL
+                </Button>
+                <Button
+                  variant={businessPitch === "file" ? "default" : "outline"}
+                  onClick={() => setBusinessPitch("file")}
+                  className="w-32 h-12 text-base"
+                >
+                  Upload a file
+                </Button>
+              </div>
+              <div className="flex space-x-5">
+                <Input
+                  type={businessPitch}
+                  id="companyName"
+                  className="w-96"
+                  placeholder="https:// "
+                />
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Your pitch deck and other application info will be used for{" "}
+                  <br />
+                  internal purposes only. <br />
+                  Please make sure this document is publicly accessible. This
+                  can <br />
+                  be a DocSend, Box, Dropbox, Google Drive or other link.
+                </span>
+              </div>
             </div>
-            <div className="flex space-x-5">
-              <Input
-                type={projectPitch}
-                id="companyName"
-                className="w-96"
-                placeholder="https:// "
-              />
-              <span className="text-[12px] text-neutral-500 self-center">
-                Please upload a file or paste a link to your pitch, which should{" "}
-                <br />
-                cover key aspects of your project: what it will do, what
-                investors <br /> can expect to gain, and any highlights that
-                make it stand out.
-              </span>
+
+            {/* What's the rough size of your community? */}
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="industry" className="font-bold text-lg mt-10">
+                What's the rough size of your <br /> community?
+              </Label>
+              <div className="flex space-x-5">
+                <Select>
+                  <SelectTrigger className="w-96">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Select</SelectLabel>
+                      {communitySize.map((i) => (
+                        <SelectItem value={i}>{i}</SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Include your email list, social media following (i.e.
+                  Instagram, <br /> Discord, Facebook, Twitter, TikTok). We’d
+                  like to understand the <br /> rough size of your current
+                  audience.
+                </span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      {/* Submit */}
-      <center>
-        <Button className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5">
-          Submit application
-        </Button>
-      </center>
+
+        {/* apply first project */}
+        <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
+          {/* header */}
+          <div className="ml-96">
+            <h1 className="text-3xl font-bold mt-10">
+              Begin Your First Fundraising Project
+            </h1>
+            <p className="mt-3 text-sm text-neutral-500">
+              Starting a fundraising project is mandatory for all businesses.
+              This step is crucial <br />
+              to begin your journey and unlock the necessary tools for raising
+              funds.
+            </p>
+
+            {/* project's name */}
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="projectName" className="font-bold text-lg">
+                Project name
+              </Label>
+              <div className="flex space-x-5">
+                <Input type="text" id="projectName" className="w-96" />
+              </div>
+            </div>
+
+            {/* project type */}
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="industry" className="font-bold text-lg mt-10">
+                Project type
+              </Label>
+              <div className="flex space-x-5">
+                <Select>
+                  <SelectTrigger className="w-96">
+                    <SelectValue placeholder="Select a Project type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Project type</SelectLabel>
+                      {projectType.map((i) => (
+                        <SelectItem value={i}>{i}</SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Please specify the primary purpose of the funds
+                </span>
+              </div>
+            </div>
+
+            {/* short description */}
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Short description
+              </Label>
+              <div className="flex space-x-5">
+                <Textarea id="shortDescription" className="w-96" />
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Could you provide a brief description of your project <br />{" "}
+                  in one or two sentences?
+                </span>
+              </div>
+            </div>
+
+            {/* Pitch deck */}
+            <div className="mt-10 space-y-5">
+              <Label htmlFor="companyName" className="font-bold text-lg">
+                Pitch deck
+              </Label>
+              <div className="flex space-x-2 w-96">
+                <Button
+                  variant={projectPitch === "text" ? "default" : "outline"}
+                  onClick={() => setProjectPitch("text")}
+                  className="w-32 h-12 text-base"
+                >
+                  Paste URL
+                </Button>
+                <Button
+                  variant={projectPitch === "file" ? "default" : "outline"}
+                  onClick={() => setProjectPitch("file")}
+                  className="w-32 h-12 text-base"
+                >
+                  Upload a file
+                </Button>
+              </div>
+              <div className="flex space-x-5">
+                <Input
+                  type={projectPitch}
+                  id="companyName"
+                  className="w-96"
+                  placeholder="https:// "
+                />
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Please upload a file or paste a link to your pitch, which
+                  should <br />
+                  cover key aspects of your project: what it will do, what
+                  investors <br /> can expect to gain, and any highlights that
+                  make it stand out.
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Submit */}
+        <center>
+          <Button className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5">
+            Submit application
+          </Button>
+        </center>
+      </form>
     </div>
   );
 }
+function setValue(arg0: string, value: string) {
+  throw new Error("Function not implemented.");
+}

From cd3a4f042af1e77a6f1d1dc768c3267e55b1f5b8 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 12:18:23 +0700
Subject: [PATCH 04/19] Refactor Apply page component for responsiveness,
 update form field IDs and labels

---
 src/app/business/apply/page.tsx | 40 ++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 3d58f3a..2814313 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -154,13 +154,13 @@ export default function Apply() {
             </div>
             {/* How much money has your company raised to date? */}
             <div className="space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="totalRaised" className="font-bold text-lg">
                 How much money has your company <br /> raised to date?
               </Label>
               <div className="flex space-x-5">
                 <Input
                   type="text"
-                  id="companyName"
+                  id="totalRaised"
                   className="w-96"
                   placeholder="$   1,000,000"
                   {...register}
@@ -174,13 +174,14 @@ export default function Apply() {
             </div>
             {/* Is your company incorporated in the United States? */}
             <div className="space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="isInUS" className="font-bold text-lg">
                 Is your company incorporated in the <br />
                 United States?
               </Label>
               <div className="flex space-x-5">
                 <div className="flex space-x-2 w-96">
                   <Button
+                    type="button"
                     variant={isInUS === "Yes" ? "default" : "outline"}
                     onClick={() => setIsInUS("Yes")}
                     className="w-20 h-12 text-base"
@@ -188,6 +189,7 @@ export default function Apply() {
                     Yes
                   </Button>
                   <Button
+                    type="button"
                     variant={isInUS === "No" ? "default" : "outline"}
                     onClick={() => setIsInUS("No")}
                     className="w-20 h-12 text-base"
@@ -207,13 +209,14 @@ export default function Apply() {
 
             {/* Is your product available (for sale) in market? */}
             <div className="space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="isForSale" className="font-bold text-lg">
                 Is your product available (for sale) <br />
                 in market?
               </Label>
               <div className="flex space-x-5">
                 <div className="flex space-x-2 w-96">
                   <Button
+                    type="button"
                     variant={isForSale === "Yes" ? "default" : "outline"}
                     onClick={() => setIsForSale("Yes")}
                     className="w-20 h-12 text-base"
@@ -221,6 +224,7 @@ export default function Apply() {
                     Yes
                   </Button>
                   <Button
+                    type="button"
                     variant={isForSale === "No" ? "default" : "outline"}
                     onClick={() => setIsForSale("No")}
                     className="w-20 h-12 text-base"
@@ -238,12 +242,13 @@ export default function Apply() {
 
             {/* Is your company generating revenue?*/}
             <div className="space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="isGenerating" className="font-bold text-lg">
                 Is your company generating revenue?
               </Label>
               <div className="flex space-x-5">
                 <div className="flex space-x-2 w-96">
                   <Button
+                    type="button"
                     variant={isGenerating === "Yes" ? "default" : "outline"}
                     onClick={() => setIsGenarting("Yes")}
                     className="w-20 h-12 text-base"
@@ -251,6 +256,7 @@ export default function Apply() {
                     Yes
                   </Button>
                   <Button
+                    type="button"
                     variant={isGenerating === "No" ? "default" : "outline"}
                     onClick={() => setIsGenarting("No")}
                     className="w-20 h-12 text-base"
@@ -267,11 +273,12 @@ export default function Apply() {
 
             {/* Pitch deck */}
             <div className="space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="pitchDeck" className="font-bold text-lg">
                 Pitch deck
               </Label>
               <div className="flex space-x-2 w-96">
                 <Button
+                  type="button"
                   variant={businessPitch === "text" ? "default" : "outline"}
                   onClick={() => setBusinessPitch("text")}
                   className="w-32 h-12 text-base"
@@ -279,6 +286,7 @@ export default function Apply() {
                   Paste URL
                 </Button>
                 <Button
+                  type="button"
                   variant={businessPitch === "file" ? "default" : "outline"}
                   onClick={() => setBusinessPitch("file")}
                   className="w-32 h-12 text-base"
@@ -306,7 +314,7 @@ export default function Apply() {
 
             {/* What's the rough size of your community? */}
             <div className="mt-10 space-y-5">
-              <Label htmlFor="industry" className="font-bold text-lg mt-10">
+              <Label htmlFor="companySize" className="font-bold text-lg mt-10">
                 What's the rough size of your <br /> community?
               </Label>
               <div className="flex space-x-5">
@@ -360,7 +368,7 @@ export default function Apply() {
 
             {/* project type */}
             <div className="mt-10 space-y-5">
-              <Label htmlFor="industry" className="font-bold text-lg mt-10">
+              <Label htmlFor="projectType" className="font-bold text-lg mt-10">
                 Project type
               </Label>
               <div className="flex space-x-5">
@@ -385,7 +393,7 @@ export default function Apply() {
 
             {/* short description */}
             <div className="mt-10 space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="shortDescription" className="font-bold text-lg">
                 Short description
               </Label>
               <div className="flex space-x-5">
@@ -399,11 +407,12 @@ export default function Apply() {
 
             {/* Pitch deck */}
             <div className="mt-10 space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
+              <Label htmlFor="projectPitchDeck" className="font-bold text-lg">
                 Pitch deck
               </Label>
               <div className="flex space-x-2 w-96">
                 <Button
+                  type="button"
                   variant={projectPitch === "text" ? "default" : "outline"}
                   onClick={() => setProjectPitch("text")}
                   className="w-32 h-12 text-base"
@@ -411,6 +420,7 @@ export default function Apply() {
                   Paste URL
                 </Button>
                 <Button
+                  type="button"
                   variant={projectPitch === "file" ? "default" : "outline"}
                   onClick={() => setProjectPitch("file")}
                   className="w-32 h-12 text-base"
@@ -421,7 +431,7 @@ export default function Apply() {
               <div className="flex space-x-5">
                 <Input
                   type={projectPitch}
-                  id="companyName"
+                  id="projectPitchDeck"
                   className="w-96"
                   placeholder="https:// "
                 />
@@ -438,7 +448,10 @@ export default function Apply() {
         </div>
         {/* Submit */}
         <center>
-          <Button className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5">
+          <Button
+            className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+            type="button"
+          >
             Submit application
           </Button>
         </center>
@@ -446,6 +459,3 @@ export default function Apply() {
     </div>
   );
 }
-function setValue(arg0: string, value: string) {
-  throw new Error("Function not implemented.");
-}

From 093277b64c1ac2b9f39ddfcfe103b24053e48ab1 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 12:56:56 +0700
Subject: [PATCH 05/19] Refactor package.json to add @radix-ui/react-switch
 dependency

---
 package.json                    |   1 +
 pnpm-lock.yaml                  | 833 +++++++++++++++++++++++++++++++-
 src/app/business/apply/page.tsx | 244 ++++++----
 src/components/ui/switch.tsx    |  29 ++
 4 files changed, 1008 insertions(+), 99 deletions(-)
 create mode 100644 src/components/ui/switch.tsx

diff --git a/package.json b/package.json
index fdfd953..66113c1 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@supabase-cache-helpers/postgrest-react-query": "^1.10.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f4baff..3edc232 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   '@radix-ui/react-slot':
     specifier: ^1.1.0
     version: 1.1.0(@types/react@18.3.4)(react@18.3.1)
+  '@radix-ui/react-switch':
+    specifier: ^1.1.1
+    version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
   '@radix-ui/react-tabs':
     specifier: ^1.1.0
     version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
@@ -65,6 +68,9 @@ dependencies:
   clsx:
     specifier: ^2.1.1
     version: 2.1.1
+  date-fns:
+    specifier: ^4.1.0
+    version: 4.1.0
   dotenv:
     specifier: ^16.4.5
     version: 16.4.5
@@ -89,9 +95,15 @@ dependencies:
   react-dom:
     specifier: ^18
     version: 18.3.1(react@18.3.1)
+  react-hook-form:
+    specifier: ^7.53.0
+    version: 7.53.0(react@18.3.1)
   react-hot-toast:
     specifier: ^2.4.1
     version: 2.4.1(csstype@3.1.3)(react-dom@18.3.1)(react@18.3.1)
+  react-markdown:
+    specifier: ^9.0.1
+    version: 9.0.1(@types/react@18.3.4)(react@18.3.1)
   recharts:
     specifier: ^2.12.7
     version: 2.12.7(react-dom@18.3.1)(react@18.3.1)
@@ -106,6 +118,9 @@ devDependencies:
   '@playwright/test':
     specifier: ^1.47.2
     version: 1.47.2
+  '@tailwindcss/typography':
+    specifier: ^0.5.15
+    version: 0.5.15(tailwindcss@3.4.10)
   '@types/node':
     specifier: ^20
     version: 20.16.2
@@ -124,6 +139,9 @@ devDependencies:
   postcss:
     specifier: ^8
     version: 8.4.41
+  supabase:
+    specifier: ^1.200.3
+    version: 1.204.3
   tailwindcss:
     specifier: ^3.4.1
     version: 3.4.10
@@ -250,6 +268,13 @@ packages:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi@7.0.0
 
+  /@isaacs/fs-minipass@4.0.1:
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      minipass: 7.1.2
+    dev: true
+
   /@jridgewell/gen-mapping@0.3.5:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
@@ -1100,6 +1125,32 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@radix-ui/react-switch@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.4)(react@18.3.1)
+      '@types/react': 18.3.4
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@radix-ui/react-tabs@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==}
     peerDependencies:
@@ -1398,6 +1449,18 @@ packages:
       tslib: 2.7.0
     dev: false
 
+  /@tailwindcss/typography@0.5.15(tailwindcss@3.4.10):
+    resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.10
+    dev: true
+
   /@tanstack/query-core@5.59.0:
     resolution: {integrity: sha512-WGD8uIhX6/deH/tkZqPNcRyAhDUqs729bWKoByYHSogcshXfFbppOdTER5+qY7mFvu8KEFJwT0nxr8RfPTVh0Q==}
     dev: false
@@ -1468,10 +1531,42 @@ packages:
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
     dev: false
 
+  /@types/debug@4.1.12:
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+    dependencies:
+      '@types/ms': 0.7.34
+    dev: false
+
+  /@types/estree-jsx@1.0.5:
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+    dependencies:
+      '@types/estree': 1.0.6
+    dev: false
+
+  /@types/estree@1.0.6:
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+    dev: false
+
+  /@types/hast@3.0.4:
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
   /@types/json5@0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/mdast@4.0.4:
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /@types/ms@0.7.34:
+    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
+    dev: false
+
   /@types/node@20.16.2:
     resolution: {integrity: sha512-91s/n4qUPV/wg8eE9KHYW1kouTfDk2FPGjXbBMfRWP/2vg1rCXNQL1OCabwGs0XSdukuK+MwCDXE30QpSeMUhQ==}
     dependencies:
@@ -1495,6 +1590,14 @@ packages:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
 
+  /@types/unist@2.0.11:
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+    dev: false
+
+  /@types/unist@3.0.3:
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+    dev: false
+
   /@types/ws@8.5.12:
     resolution: {integrity: sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==}
     dependencies:
@@ -1567,7 +1670,6 @@ packages:
 
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-    dev: true
 
   /acorn-jsx@5.3.2(acorn@8.12.1):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -1583,6 +1685,15 @@ packages:
     hasBin: true
     dev: true
 
+  /agent-base@7.1.1:
+    resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
     dependencies:
@@ -1756,9 +1867,24 @@ packages:
       deep-equal: 2.2.3
     dev: true
 
+  /bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+    dev: false
+
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /bin-links@5.0.0:
+    resolution: {integrity: sha512-sdleLVfCjBtgO5cNjA2HVRvWBJAHs4zwenaCPMNJAJU0yNxpzj80IpjOIimkpkr+mhlA+how5poQtt53PygbHA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dependencies:
+      cmd-shim: 7.0.0
+      npm-normalize-package-bin: 4.0.0
+      proc-log: 5.0.0
+      read-cmd-shim: 5.0.0
+      write-file-atomic: 6.0.0
+    dev: true
+
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1812,6 +1938,10 @@ packages:
     resolution: {integrity: sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==}
     dev: false
 
+  /ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+    dev: false
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1820,6 +1950,22 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+    dev: false
+
+  /character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+    dev: false
+
+  /character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+    dev: false
+
+  /character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+    dev: false
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1834,6 +1980,11 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+    dev: true
+
   /class-variance-authority@0.7.0:
     resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
     dependencies:
@@ -1854,6 +2005,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /cmd-shim@7.0.0:
+    resolution: {integrity: sha512-rtpaCbr164TPPh+zFdkWpCyZuKkjpAzODfaZCf/SVJZzJN+4bHQb/LP3Jzq5/+84um3XXY8r548XiWKSborwVw==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dev: true
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1863,6 +2019,10 @@ packages:
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  /comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+    dev: false
+
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -1976,6 +2136,11 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+    dev: true
+
   /data-view-buffer@1.0.1:
     resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
     engines: {node: '>= 0.4'}
@@ -2003,6 +2168,10 @@ packages:
       is-data-view: 1.0.1
     dev: true
 
+  /date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+    dev: false
+
   /debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -2024,12 +2193,17 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
     dev: false
 
+  /decode-named-character-reference@1.0.2:
+    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
+    dependencies:
+      character-entities: 2.0.2
+    dev: false
+
   /deep-equal@2.2.3:
     resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==}
     engines: {node: '>= 0.4'}
@@ -2076,10 +2250,21 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
     dev: false
 
+  /devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+    dependencies:
+      dequal: 2.0.3
+    dev: false
+
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -2572,6 +2757,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+    dev: false
+
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -2581,6 +2770,10 @@ packages:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
     dev: false
 
+  /extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -2613,6 +2806,14 @@ packages:
     dependencies:
       reusify: 1.0.4
 
+  /fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+    dev: true
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2666,6 +2867,13 @@ packages:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  /formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+    dependencies:
+      fetch-blob: 3.2.0
+    dev: true
+
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -2865,6 +3073,48 @@ packages:
     dependencies:
       function-bind: 1.1.2
 
+  /hast-util-to-jsx-runtime@2.3.0:
+    resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
+    dependencies:
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 1.0.8
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+    dependencies:
+      '@types/hast': 3.0.4
+    dev: false
+
+  /html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+    dev: false
+
+  /https-proxy-agent@7.0.5:
+    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
+    engines: {node: '>= 14'}
+    dependencies:
+      agent-base: 7.1.1
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -2895,6 +3145,10 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+    dev: false
+
   /internal-slot@1.0.7:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
@@ -2915,6 +3169,17 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
+  /is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+    dev: false
+
+  /is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+    dev: false
+
   /is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -2989,6 +3254,10 @@ packages:
       has-tostringtag: 1.0.2
     dev: true
 
+  /is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+    dev: false
+
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -3016,6 +3285,10 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+    dev: false
+
   /is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3042,6 +3315,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -3226,6 +3504,14 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: true
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: true
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -3234,6 +3520,10 @@ packages:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
 
+  /longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+    dev: false
+
   /loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -3251,6 +3541,110 @@ packages:
       react: 18.3.1
     dev: false
 
+  /mdast-util-from-markdown@2.0.1:
+    resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-decode-string: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.1
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-jsx@3.1.3:
+    resolution: {integrity: sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.1
+      mdast-util-to-markdown: 2.1.0
+      parse-entities: 4.0.1
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.1
+      mdast-util-to-markdown: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+    dev: false
+
+  /mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.0
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    dev: false
+
+  /mdast-util-to-markdown@2.1.0:
+    resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-decode-string: 2.0.0
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+    dev: false
+
+  /mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+    dependencies:
+      '@types/mdast': 4.0.4
+    dev: false
+
   /merge-anything@5.1.7:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
     engines: {node: '>=12.13'}
@@ -3262,6 +3656,181 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  /micromark-core-commonmark@2.0.1:
+    resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.0
+      micromark-factory-label: 2.0.0
+      micromark-factory-space: 2.0.0
+      micromark-factory-title: 2.0.0
+      micromark-factory-whitespace: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-classify-character: 2.0.0
+      micromark-util-html-tag-name: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-subtokenize: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-factory-destination@2.0.0:
+    resolution: {integrity: sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==}
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-factory-label@2.0.0:
+    resolution: {integrity: sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-factory-space@2.0.0:
+    resolution: {integrity: sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==}
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-factory-title@2.0.0:
+    resolution: {integrity: sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==}
+    dependencies:
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-factory-whitespace@2.0.0:
+    resolution: {integrity: sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==}
+    dependencies:
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-util-character@2.1.0:
+    resolution: {integrity: sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-util-chunked@2.0.0:
+    resolution: {integrity: sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+    dev: false
+
+  /micromark-util-classify-character@2.0.0:
+    resolution: {integrity: sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==}
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-util-combine-extensions@2.0.0:
+    resolution: {integrity: sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==}
+    dependencies:
+      micromark-util-chunked: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-util-decode-numeric-character-reference@2.0.1:
+    resolution: {integrity: sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+    dev: false
+
+  /micromark-util-decode-string@2.0.0:
+    resolution: {integrity: sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==}
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      micromark-util-character: 2.1.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-symbol: 2.0.0
+    dev: false
+
+  /micromark-util-encode@2.0.0:
+    resolution: {integrity: sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==}
+    dev: false
+
+  /micromark-util-html-tag-name@2.0.0:
+    resolution: {integrity: sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==}
+    dev: false
+
+  /micromark-util-normalize-identifier@2.0.0:
+    resolution: {integrity: sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==}
+    dependencies:
+      micromark-util-symbol: 2.0.0
+    dev: false
+
+  /micromark-util-resolve-all@2.0.0:
+    resolution: {integrity: sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==}
+    dependencies:
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-util-sanitize-uri@2.0.0:
+    resolution: {integrity: sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==}
+    dependencies:
+      micromark-util-character: 2.1.0
+      micromark-util-encode: 2.0.0
+      micromark-util-symbol: 2.0.0
+    dev: false
+
+  /micromark-util-subtokenize@2.0.1:
+    resolution: {integrity: sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    dev: false
+
+  /micromark-util-symbol@2.0.0:
+    resolution: {integrity: sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==}
+    dev: false
+
+  /micromark-util-types@2.0.0:
+    resolution: {integrity: sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==}
+    dev: false
+
+  /micromark@4.0.0:
+    resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.3.6
+      decode-named-character-reference: 1.0.2
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.1
+      micromark-factory-space: 2.0.0
+      micromark-util-character: 2.1.0
+      micromark-util-chunked: 2.0.0
+      micromark-util-combine-extensions: 2.0.0
+      micromark-util-decode-numeric-character-reference: 2.0.1
+      micromark-util-encode: 2.0.0
+      micromark-util-normalize-identifier: 2.0.0
+      micromark-util-resolve-all: 2.0.0
+      micromark-util-sanitize-uri: 2.0.0
+      micromark-util-subtokenize: 2.0.1
+      micromark-util-symbol: 2.0.0
+      micromark-util-types: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -3296,9 +3865,22 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  /minizlib@3.0.1:
+    resolution: {integrity: sha512-umcy022ILvb5/3Djuu8LWeqUa8D68JaBzlttKeMWen48SjabqS3iY5w/vzeMzMUNhLDifyhbOwKDSznB1vvrwg==}
+    engines: {node: '>= 18'}
+    dependencies:
+      minipass: 7.1.2
+      rimraf: 5.0.10
+    dev: true
+
+  /mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -3373,10 +3955,29 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    dev: true
+
+  /node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+    dev: true
+
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  /npm-normalize-package-bin@4.0.0:
+    resolution: {integrity: sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dev: true
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -3492,6 +4093,19 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-entities@4.0.1:
+    resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities: 2.0.2
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.0.2
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+    dev: false
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3600,6 +4214,14 @@ packages:
       postcss: 8.4.41
       postcss-selector-parser: 6.1.2
 
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -3632,6 +4254,11 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /proc-log@5.0.0:
+    resolution: {integrity: sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dev: true
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -3639,6 +4266,10 @@ packages:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  /property-information@6.5.0:
+    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
+    dev: false
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -3666,6 +4297,15 @@ packages:
       scheduler: 0.23.2
     dev: false
 
+  /react-hook-form@7.53.0(react@18.3.1):
+    resolution: {integrity: sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
     engines: {node: '>=10'}
@@ -3683,6 +4323,28 @@ packages:
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-markdown@9.0.1(@types/react@18.3.4)(react@18.3.1):
+    resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==}
+    peerDependencies:
+      '@types/react': '>=18'
+      react: '>=18'
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/react': 18.3.4
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.0
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.0
+      react: 18.3.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /react-remove-scroll-bar@2.3.6(@types/react@18.3.4)(react@18.3.1):
     resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
     engines: {node: '>=10'}
@@ -3793,6 +4455,11 @@ packages:
     dependencies:
       pify: 2.3.0
 
+  /read-cmd-shim@5.0.0:
+    resolution: {integrity: sha512-SEbJV7tohp3DAAILbEMPXavBjAnMN0tVnh4+9G8ihV4Pq3HYF9h8QNez9zkJ1ILkv9G2BjdzwctznGZXgu/HGw==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dev: true
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -3851,6 +4518,27 @@ packages:
       set-function-name: 2.0.2
     dev: true
 
+  /remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.1
+      micromark-util-types: 2.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -3889,6 +4577,13 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /rimraf@5.0.10:
+    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
+    hasBin: true
+    dependencies:
+      glob: 10.4.5
+    dev: true
+
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
@@ -3985,6 +4680,10 @@ packages:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
+  /space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+    dev: false
+
   /stop-iteration-iterator@1.0.0:
     resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
     engines: {node: '>= 0.4'}
@@ -4072,6 +4771,13 @@ packages:
       es-object-atoms: 1.0.0
     dev: true
 
+  /stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+    dev: false
+
   /strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -4094,6 +4800,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+    dependencies:
+      inline-style-parser: 0.2.4
+    dev: false
+
   /styled-jsx@5.1.1(react@18.3.1):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -4124,6 +4836,20 @@ packages:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  /supabase@1.204.3:
+    resolution: {integrity: sha512-uO09eyAw7TZAX/7wPeieQBWrl4QAJ0WLF+HTkFy35GWBmQULP5nkJR93LcuhSyooYiqwEUKlChEF/PGAEmTCKw==}
+    engines: {npm: '>=8'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      bin-links: 5.0.0
+      https-proxy-agent: 7.0.5
+      node-fetch: 3.3.2
+      tar: 7.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4182,6 +4908,18 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.0.1
+      mkdirp: 3.0.1
+      yallist: 5.0.0
+    dev: true
+
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -4211,6 +4949,14 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: false
 
+  /trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+    dev: false
+
+  /trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+    dev: false
+
   /ts-api-utils@1.3.0(typescript@5.5.4):
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -4310,6 +5056,51 @@ packages:
   /undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
+  /unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+    dev: false
+
+  /unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+    dev: false
+
+  /unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: false
+
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -4350,6 +5141,20 @@ packages:
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  /vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+    dev: false
+
+  /vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+    dev: false
+
   /victory-vendor@36.9.2:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
     dependencies:
@@ -4369,6 +5174,11 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
+  /web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: false
@@ -4461,6 +5271,14 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /write-file-atomic@6.0.0:
+    resolution: {integrity: sha512-GmqrO8WJ1NuzJ2DrziEI2o57jKAVIQNf8a18W3nCYU3H7PNWqCCVTeH6/NQE93CIllIgQS98rrmVkYgTX9fFJQ==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+    dev: true
+
   /ws@8.18.0:
     resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
@@ -4480,6 +5298,11 @@ packages:
       '@babel/runtime-corejs3': 7.25.7
     dev: false
 
+  /yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+    dev: true
+
   /yaml@2.5.0:
     resolution: {integrity: sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==}
     engines: {node: '>= 14'}
@@ -4489,3 +5312,7 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+    dev: false
diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 2814313..000b7da 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -2,6 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import {
   Select,
   SelectContent,
@@ -15,6 +16,12 @@ import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { useForm } from "react-hook-form";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export default function Apply() {
   let supabase = createSupabaseClient();
@@ -27,6 +34,7 @@ export default function Apply() {
   const [businessPitch, setBusinessPitch] = useState("");
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("");
+  const [applyProject, setApplyProject] = useState(false);
   const communitySize = [
     "N/A",
     "0-5K",
@@ -339,118 +347,162 @@ export default function Apply() {
                 </span>
               </div>
             </div>
+            <div className="flex space-x-5">
+              <Switch onCheckedChange={() => setApplyProject(!applyProject)}>
+                Apply your first project!
+              </Switch>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
+                      Would you like to apply for your first fundraising project
+                      as well?
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-[11px]">
+                      Toggling this option allows you to begin your first
+                      project, <br /> which is crucial for unlocking the tools
+                      necessary to raise funds.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
           </div>
         </div>
 
         {/* apply first project */}
-        <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
-          {/* header */}
-          <div className="ml-96">
-            <h1 className="text-3xl font-bold mt-10">
-              Begin Your First Fundraising Project
-            </h1>
-            <p className="mt-3 text-sm text-neutral-500">
-              Starting a fundraising project is mandatory for all businesses.
-              This step is crucial <br />
-              to begin your journey and unlock the necessary tools for raising
-              funds.
-            </p>
+        {applyProject && (
+          <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
+            {/* header */}
+            <div className="ml-96">
+              <h1 className="text-3xl font-bold mt-10">
+                Begin Your First Fundraising Project
+              </h1>
+              <p className="mt-3 text-sm text-neutral-500">
+                Starting a fundraising project is mandatory for all businesses.
+                This step is crucial <br />
+                to begin your journey and unlock the necessary tools for raising
+                funds.
+              </p>
 
-            {/* project's name */}
-            <div className="mt-10 space-y-5">
-              <Label htmlFor="projectName" className="font-bold text-lg">
-                Project name
-              </Label>
-              <div className="flex space-x-5">
-                <Input type="text" id="projectName" className="w-96" />
+              {/* project's name */}
+              <div className="mt-10 space-y-5">
+                <Label htmlFor="projectName" className="font-bold text-lg">
+                  Project name
+                </Label>
+                <div className="flex space-x-5">
+                  <Input type="text" id="projectName" className="w-96" />
+                </div>
               </div>
-            </div>
 
-            {/* project type */}
-            <div className="mt-10 space-y-5">
-              <Label htmlFor="projectType" className="font-bold text-lg mt-10">
-                Project type
-              </Label>
-              <div className="flex space-x-5">
-                <Select>
-                  <SelectTrigger className="w-96">
-                    <SelectValue placeholder="Select a Project type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Project type</SelectLabel>
-                      {projectType.map((i) => (
-                        <SelectItem value={i}>{i}</SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <span className="text-[12px] text-neutral-500 self-center">
-                  Please specify the primary purpose of the funds
-                </span>
-              </div>
-            </div>
-
-            {/* short description */}
-            <div className="mt-10 space-y-5">
-              <Label htmlFor="shortDescription" className="font-bold text-lg">
-                Short description
-              </Label>
-              <div className="flex space-x-5">
-                <Textarea id="shortDescription" className="w-96" />
-                <span className="text-[12px] text-neutral-500 self-center">
-                  Could you provide a brief description of your project <br />{" "}
-                  in one or two sentences?
-                </span>
-              </div>
-            </div>
-
-            {/* Pitch deck */}
-            <div className="mt-10 space-y-5">
-              <Label htmlFor="projectPitchDeck" className="font-bold text-lg">
-                Pitch deck
-              </Label>
-              <div className="flex space-x-2 w-96">
-                <Button
-                  type="button"
-                  variant={projectPitch === "text" ? "default" : "outline"}
-                  onClick={() => setProjectPitch("text")}
-                  className="w-32 h-12 text-base"
+              {/* project type */}
+              <div className="mt-10 space-y-5">
+                <Label
+                  htmlFor="projectType"
+                  className="font-bold text-lg mt-10"
                 >
-                  Paste URL
-                </Button>
-                <Button
-                  type="button"
-                  variant={projectPitch === "file" ? "default" : "outline"}
-                  onClick={() => setProjectPitch("file")}
-                  className="w-32 h-12 text-base"
-                >
-                  Upload a file
-                </Button>
+                  Project type
+                </Label>
+                <div className="flex space-x-5">
+                  <Select>
+                    <SelectTrigger className="w-96">
+                      <SelectValue placeholder="Select a Project type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectLabel>Project type</SelectLabel>
+                        {projectType.map((i) => (
+                          <SelectItem value={i}>{i}</SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Please specify the primary purpose of the funds
+                  </span>
+                </div>
               </div>
-              <div className="flex space-x-5">
-                <Input
-                  type={projectPitch}
-                  id="projectPitchDeck"
-                  className="w-96"
-                  placeholder="https:// "
-                />
-                <span className="text-[12px] text-neutral-500 self-center">
-                  Please upload a file or paste a link to your pitch, which
-                  should <br />
-                  cover key aspects of your project: what it will do, what
-                  investors <br /> can expect to gain, and any highlights that
-                  make it stand out.
-                </span>
+
+              {/* short description */}
+              <div className="mt-10 space-y-5">
+                <Label htmlFor="shortDescription" className="font-bold text-lg">
+                  Short description
+                </Label>
+                <div className="flex space-x-5">
+                  <Textarea id="shortDescription" className="w-96" />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Could you provide a brief description of your project <br />{" "}
+                    in one or two sentences?
+                  </span>
+                </div>
+              </div>
+
+              {/* Pitch deck */}
+              <div className="mt-10 space-y-5">
+                <Label htmlFor="projectPitchDeck" className="font-bold text-lg">
+                  Pitch deck
+                </Label>
+                <div className="flex space-x-2 w-96">
+                  <Button
+                    type="button"
+                    variant={projectPitch === "text" ? "default" : "outline"}
+                    onClick={() => setProjectPitch("text")}
+                    className="w-32 h-12 text-base"
+                  >
+                    Paste URL
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={projectPitch === "file" ? "default" : "outline"}
+                    onClick={() => setProjectPitch("file")}
+                    className="w-32 h-12 text-base"
+                  >
+                    Upload a file
+                  </Button>
+                </div>
+                <div className="flex space-x-5">
+                  <Input
+                    type={projectPitch}
+                    id="projectPitchDeck"
+                    className="w-96"
+                    placeholder="https:// "
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Please upload a file or paste a link to your pitch, which
+                    should <br />
+                    cover key aspects of your project: what it will do, what
+                    investors <br /> can expect to gain, and any highlights that
+                    make it stand out.
+                  </span>
+                </div>
+              </div>
+
+              {/* project logo */}
+              <div className="mt-10 space-y-5">
+                <Label
+                  htmlFor="projectLogo"
+                  className="font-bold text-lg mt-10"
+                >
+                  Project logo
+                </Label>
+                <div className="flex space-x-5">
+                  <Input type="file" id="projectPitchDeck" className="w-96" />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Please upload the logo picture that best represents your
+                    project.
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        )}
         {/* Submit */}
         <center>
           <Button
             className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-            type="button"
+            type="submit"
           >
             Submit application
           </Button>
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..bc69cf2
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

From 1fa33883f0692515f996909ec3ec8a7ea20914e8 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 13:49:16 +0700
Subject: [PATCH 06/19] Refactor Apply page component for responsiveness, add
 textarea component for project description and pitch deck, and implement
 project picture upload functionality

---
 src/app/business/apply/page.tsx | 56 +++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 000b7da..5003b90 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -35,6 +35,8 @@ export default function Apply() {
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("");
   const [applyProject, setApplyProject] = useState(false);
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
+
   const communitySize = [
     "N/A",
     "0-5K",
@@ -45,6 +47,17 @@ export default function Apply() {
     "100K+",
   ];
 
+  const handleRemoveImage = (index: number) => {
+    const updatedImages = selectedImages.filter((_, i) => i !== index);
+    setSelectedImages(updatedImages);
+  };
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const filesArray = Array.from(event.target.files);
+      setSelectedImages((prevImages) => [...prevImages, ...filesArray]);
+    }
+  };
+
   const onSubmit = (data: any) => {
     alert(JSON.stringify(data));
   };
@@ -495,6 +508,49 @@ export default function Apply() {
                   </span>
                 </div>
               </div>
+
+              {/* Project pictures */}
+              <div className="mt-10 space-y-5">
+                <Label
+                  htmlFor="projectPicture"
+                  className="font-bold text-lg mt-10"
+                >
+                  Project pictures
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="file"
+                    id="projectPicture"
+                    multiple
+                    onChange={handleFileChange}
+                    accept="image/*"
+                    className="w-96"
+                    value={selectedImages.length === 0 ? "" : undefined}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Feel free to upload any additional images that provide{" "}
+                    <br />
+                    further insight into your project.
+                  </span>
+                </div>
+                <div className="mt-5 space-y-2 w-96">
+                  {selectedImages.map((image, index) => (
+                    <div
+                      key={index}
+                      className="flex justify-between items-center border p-2 rounded"
+                    >
+                      <span>{image.name}</span>
+                      <Button
+                        variant="outline"
+                        onClick={() => handleRemoveImage(index)}
+                        className="ml-4"
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         )}

From 551dcfe4707f70c7c029934f8262e4b37f6986dc Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 13:58:01 +0700
Subject: [PATCH 07/19] Refactor Apply page component for responsiveness, add
 textarea component for project description and pitch deck, and implement
 project picture upload functionality

---
 src/app/business/apply/page.tsx | 65 ++++++++++++++++++++++++++++++++-
 1 file changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 5003b90..752b3b9 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -501,7 +501,12 @@ export default function Apply() {
                   Project logo
                 </Label>
                 <div className="flex space-x-5">
-                  <Input type="file" id="projectPitchDeck" className="w-96" />
+                  <Input
+                    type="file"
+                    id="projectPitchDeck"
+                    className="w-96"
+                    accept="image/*"
+                  />
                   <span className="text-[12px] text-neutral-500 self-center">
                     Please upload the logo picture that best represents your
                     project.
@@ -551,6 +556,64 @@ export default function Apply() {
                   ))}
                 </div>
               </div>
+
+              {/* Minimum Investment */}
+              <div className="space-y-5 mt-10">
+                <Label htmlFor="minInvest" className="font-bold text-lg">
+                  Minimum investment
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="text"
+                    id="minInvest"
+                    className="w-96"
+                    placeholder="$   500"
+                    {...register}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    This helps set clear expectations for investors
+                  </span>
+                </div>
+              </div>
+              {/* Target Investment */}
+              <div className="space-y-5 mt-10">
+                <Label htmlFor="targetInvest" className="font-bold text-lg">
+                  Target investment
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="text"
+                    id="targetInvest"
+                    className="w-96"
+                    placeholder="$   1,000,000"
+                    {...register}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    We encourage you to set a specific target investment <br />{" "}
+                    amount that reflects your funding goals.
+                  </span>
+                </div>
+              </div>
+
+              {/* Deadline */}
+              <div className="space-y-5 mt-10">
+                <Label htmlFor="deadline" className="font-bold text-lg">
+                  Deadline
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="datetime-local"
+                    id="deadline"
+                    className="w-96"
+                    {...register}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    What is the deadline for your fundraising project? Setting{" "}
+                    <br /> a clear timeline can help motivate potential
+                    investors.
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         )}

From 9e82721b54b07660ec3ae9003cc29c3e61984487 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 14:30:41 +0700
Subject: [PATCH 08/19] Refactor Apply page component for responsiveness, fix
 typo in setIsGenerating state variable, and update form field change handling

---
 src/app/business/apply/page.tsx | 44 +++++++++++++++++++++++----------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 752b3b9..742acf9 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -30,7 +30,7 @@ export default function Apply() {
   const [selectedIndustry, setSelectedIndustry] = useState("");
   const [isInUS, setIsInUS] = useState("");
   const [isForSale, setIsForSale] = useState("");
-  const [isGenerating, setIsGenarting] = useState("");
+  const [isGenerating, setIsGenerating] = useState("");
   const [businessPitch, setBusinessPitch] = useState("");
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("");
@@ -59,11 +59,24 @@ export default function Apply() {
   };
 
   const onSubmit = (data: any) => {
-    alert(JSON.stringify(data));
+    console.table(data);
   };
-  const handleSelectChange = (value: string) => {
-    setSelectedIndustry(value);
-    setValue("industry", value);
+  const handleFieldChange = (fieldName: string, value: string) => {
+    switch (fieldName) {
+      case "industry":
+        setSelectedIndustry(value);
+        break;
+      case "isInUS":
+        setIsInUS(value);
+        break;
+      case "isForSale":
+        setIsForSale(value);
+        break;
+      case "isGenerating":
+        setIsGenerating(value);
+        break;
+    }
+    setValue(fieldName, value);
   };
   const fetchIndustry = async () => {
     let { data: BusinessType, error } = await supabase
@@ -147,7 +160,11 @@ export default function Apply() {
                 Industry
               </Label>
               <div className="flex space-x-5">
-                <Select onValueChange={(value) => handleSelectChange(value)}>
+                <Select
+                  onValueChange={(value) =>
+                    handleFieldChange("industry", value)
+                  }
+                >
                   <SelectTrigger className="w-96">
                     <SelectValue placeholder="Select an industry" />
                   </SelectTrigger>
@@ -184,7 +201,7 @@ export default function Apply() {
                   id="totalRaised"
                   className="w-96"
                   placeholder="$   1,000,000"
-                  {...register}
+                  {...register("totalRaised")}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
                   The sum total of past financing, including angel or venture{" "}
@@ -204,7 +221,7 @@ export default function Apply() {
                   <Button
                     type="button"
                     variant={isInUS === "Yes" ? "default" : "outline"}
-                    onClick={() => setIsInUS("Yes")}
+                    onClick={() => handleFieldChange("isInUS", "Yes")}
                     className="w-20 h-12 text-base"
                   >
                     Yes
@@ -212,11 +229,12 @@ export default function Apply() {
                   <Button
                     type="button"
                     variant={isInUS === "No" ? "default" : "outline"}
-                    onClick={() => setIsInUS("No")}
+                    onClick={() => handleFieldChange("isInUS", "No")}
                     className="w-20 h-12 text-base"
                   >
                     No
                   </Button>
+                  <input type="hidden" value={isInUS} {...register("isInUS")} />
                 </div>
                 <span className="text-[12px] text-neutral-500 self-center">
                   Only companies that are incorporated or formed in the US are{" "}
@@ -239,7 +257,7 @@ export default function Apply() {
                   <Button
                     type="button"
                     variant={isForSale === "Yes" ? "default" : "outline"}
-                    onClick={() => setIsForSale("Yes")}
+                    onClick={() => handleFieldChange("isForSale", "Yes")}
                     className="w-20 h-12 text-base"
                   >
                     Yes
@@ -247,7 +265,7 @@ export default function Apply() {
                   <Button
                     type="button"
                     variant={isForSale === "No" ? "default" : "outline"}
-                    onClick={() => setIsForSale("No")}
+                    onClick={() => handleFieldChange("isForSale", "No")}
                     className="w-20 h-12 text-base"
                   >
                     No
@@ -271,7 +289,7 @@ export default function Apply() {
                   <Button
                     type="button"
                     variant={isGenerating === "Yes" ? "default" : "outline"}
-                    onClick={() => setIsGenarting("Yes")}
+                    onClick={() => handleFieldChange("isGenerating", "Yes")}
                     className="w-20 h-12 text-base"
                   >
                     Yes
@@ -279,7 +297,7 @@ export default function Apply() {
                   <Button
                     type="button"
                     variant={isGenerating === "No" ? "default" : "outline"}
-                    onClick={() => setIsGenarting("No")}
+                    onClick={() => handleFieldChange("isGenerating", "No")}
                     className="w-20 h-12 text-base"
                   >
                     No

From e53821a0c72467a507dde3f8f7e8b45c8c4ad816 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 14:49:07 +0700
Subject: [PATCH 09/19] Refactor package.json to add @hookform/resolvers and
 zod dependencies

---
 package-lock.json               | 52 ++++++++++++++++++++++++++++++++-
 package.json                    |  4 ++-
 src/app/business/apply/page.tsx | 28 +++++++++++++++++-
 3 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9c88ef2..fb90d3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "b2d-ventures",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^3.9.0",
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -19,6 +20,7 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@supabase-cache-helpers/postgrest-react-query": "^1.10.1",
@@ -43,7 +45,8 @@
         "react-markdown": "^9.0.1",
         "recharts": "^2.12.7",
         "tailwind-merge": "^2.5.2",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@playwright/test": "^1.47.2",
@@ -183,6 +186,15 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
+      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1242,6 +1254,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.1.tgz",
+      "integrity": "sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz",
@@ -8125,6 +8166,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 66113c1..bfa2480 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -45,7 +46,8 @@
     "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.2",
diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 742acf9..309900c 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -22,10 +22,27 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 export default function Apply() {
+  const formSchema = z.object({
+    companyName: z.string().min(5, {
+      message: "Company name must be at least 5 characters.",
+    }),
+    totalRaised: z.number().int({
+      message: "Total raised must be an integer.",
+    }),
+  });
   let supabase = createSupabaseClient();
-  const { register, handleSubmit, setValue } = useForm();
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(formSchema),
+  });
   const [industry, setIndustry] = useState<string[]>([]);
   const [selectedIndustry, setSelectedIndustry] = useState("");
   const [isInUS, setIsInUS] = useState("");
@@ -153,6 +170,15 @@ export default function Apply() {
                   website and in the market.
                 </span>
               </div>
+              {errors.companyName && (
+                <p className="text-red-500 text-sm">
+                  {errors.companyName && (
+                    <p className="text-red-500 text-sm">
+                      {errors.companyName.message as string}
+                    </p>
+                  )}
+                </p>
+              )}
             </div>
             {/* industry */}
             <div className="mt-10 space-y-5">

From 55b8d8759b884c6e5ab4575d7b4ce9cfb31cf869 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 10 Oct 2024 17:06:19 +0700
Subject: [PATCH 10/19] Refactor Apply page component to use Selector component
 for handling yes/no choices

---
 src/app/business/apply/page.tsx | 131 ++++++++++++--------------------
 src/components/selector.tsx     |  46 +++++++++++
 2 files changed, 93 insertions(+), 84 deletions(-)
 create mode 100644 src/components/selector.tsx

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 309900c..a6bf7a3 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Selector } from "@/components/selector";
 
 export default function Apply() {
   const formSchema = z.object({
@@ -237,104 +238,66 @@ export default function Apply() {
               </div>
             </div>
             {/* Is your company incorporated in the United States? */}
-            <div className="space-y-5">
-              <Label htmlFor="isInUS" className="font-bold text-lg">
-                Is your company incorporated in the <br />
-                United States?
-              </Label>
-              <div className="flex space-x-5">
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={isInUS === "Yes" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isInUS", "Yes")}
-                    className="w-20 h-12 text-base"
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={isInUS === "No" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isInUS", "No")}
-                    className="w-20 h-12 text-base"
-                  >
-                    No
-                  </Button>
-                  <input type="hidden" value={isInUS} {...register("isInUS")} />
-                </div>
-                <span className="text-[12px] text-neutral-500 self-center">
+            <Selector
+              label={
+                <>
+                  Is your company incorporated in the <br />
+                  United States?
+                </>
+              }
+              name="isInUS"
+              choice1="Yes"
+              choice2="No"
+              handleFunction={handleFieldChange}
+              description={
+                <>
                   Only companies that are incorporated or formed in the US are{" "}
                   <br />
                   eligible to raise via Reg CF. If your company is incorporated{" "}
                   <br />
                   outside the US, we still encourage you to apply.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              value={isInUS}
+            />
 
             {/* Is your product available (for sale) in market? */}
-            <div className="space-y-5">
-              <Label htmlFor="isForSale" className="font-bold text-lg">
-                Is your product available (for sale) <br />
-                in market?
-              </Label>
-              <div className="flex space-x-5">
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={isForSale === "Yes" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isForSale", "Yes")}
-                    className="w-20 h-12 text-base"
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={isForSale === "No" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isForSale", "No")}
-                    className="w-20 h-12 text-base"
-                  >
-                    No
-                  </Button>
-                </div>
-                <span className="text-[12px] text-neutral-500 self-center">
+            <Selector
+              label={
+                <>
+                  Is your product available (for sale) <br />
+                  in market?
+                </>
+              }
+              name="isForSale"
+              choice1="Yes"
+              choice2="No"
+              handleFunction={handleFieldChange}
+              description={
+                <>
                   Only check this box if customers can access, use, or buy your{" "}
                   <br />
                   product today.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              value={isForSale}
+            />
 
             {/* Is your company generating revenue?*/}
-            <div className="space-y-5">
-              <Label htmlFor="isGenerating" className="font-bold text-lg">
-                Is your company generating revenue?
-              </Label>
-              <div className="flex space-x-5">
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={isGenerating === "Yes" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isGenerating", "Yes")}
-                    className="w-20 h-12 text-base"
-                  >
-                    Yes
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={isGenerating === "No" ? "default" : "outline"}
-                    onClick={() => handleFieldChange("isGenerating", "No")}
-                    className="w-20 h-12 text-base"
-                  >
-                    No
-                  </Button>
-                </div>
-                <span className="text-[12px] text-neutral-500 self-center">
+            <Selector
+              label={<>Is your company generating revenue?</>}
+              name="isGenerating"
+              choice1="Yes"
+              choice2="No"
+              handleFunction={handleFieldChange}
+              description={
+                <>
                   Only check this box if your company is making money. <br />
                   Please elaborate on revenue and other traction below.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              value={isGenerating}
+            />
 
             {/* Pitch deck */}
             <div className="space-y-5">
diff --git a/src/components/selector.tsx b/src/components/selector.tsx
new file mode 100644
index 0000000..d0e0206
--- /dev/null
+++ b/src/components/selector.tsx
@@ -0,0 +1,46 @@
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { ReactElement } from "react";
+
+interface SelectorInterface {
+  label: ReactElement;
+  name: string;
+  choice1: string;
+  choice2: string;
+  handleFunction: Function;
+  value: string;
+  description: ReactElement;
+}
+
+export function Selector(props: SelectorInterface) {
+  return (
+    <div className="space-y-5">
+      <Label htmlFor={props.name} className="font-bold text-lg">
+        {props.label}
+      </Label>
+      <div className="flex space-x-5">
+        <div className="flex space-x-2 w-96">
+          <Button
+            type="button"
+            variant={props.value === props.choice1 ? "default" : "outline"}
+            onClick={() => props.handleFunction(props.name, props.choice1)}
+            className="w-20 h-12 text-base"
+          >
+            {props.choice1}
+          </Button>
+          <Button
+            type="button"
+            variant={props.value === props.choice2 ? "default" : "outline"}
+            onClick={() => props.handleFunction(props.name, props.choice2)}
+            className="w-20 h-12 text-base"
+          >
+            {props.choice2}
+          </Button>
+        </div>
+        <span className="text-[12px] text-neutral-500 self-center">
+          {props.description}
+        </span>
+      </div>
+    </div>
+  );
+}

From a3573c5c9a9f95d657780fe2ba8c2a56ff76de41 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Fri, 11 Oct 2024 11:43:06 +0700
Subject: [PATCH 11/19] Refactor Apply page component to use DualOptionSelector
 component for handling yes/no choices

---
 src/app/business/apply/page.tsx               | 113 +++++++++---------
 .../{selector.tsx => dualSelector.tsx}        |   2 +-
 src/components/multipleSelector.tsx           |  56 +++++++++
 3 files changed, 116 insertions(+), 55 deletions(-)
 rename src/components/{selector.tsx => dualSelector.tsx} (95%)
 create mode 100644 src/components/multipleSelector.tsx

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index a6bf7a3..d2df985 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -24,16 +24,23 @@ import {
 } from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Selector } from "@/components/selector";
+import { DualOptionSelector } from "@/components/dualSelector";
+import { MultipleOptionSelector } from "@/components/multipleSelector";
 
 export default function Apply() {
   const formSchema = z.object({
     companyName: z.string().min(5, {
       message: "Company name must be at least 5 characters.",
     }),
-    totalRaised: z.number().int({
-      message: "Total raised must be an integer.",
-    }),
+    industry: z.string(),
+    isInUS: z.string(),
+    totalRaised: z
+      .number({
+        required_error: "Total raised must be a number.",
+        invalid_type_error: "Total raised must be a valid number.",
+      })
+      .positive()
+      .max(9999999999, "Total raised must be a realistic amount."),
   });
   let supabase = createSupabaseClient();
   const {
@@ -45,7 +52,6 @@ export default function Apply() {
     resolver: zodResolver(formSchema),
   });
   const [industry, setIndustry] = useState<string[]>([]);
-  const [selectedIndustry, setSelectedIndustry] = useState("");
   const [isInUS, setIsInUS] = useState("");
   const [isForSale, setIsForSale] = useState("");
   const [isGenerating, setIsGenerating] = useState("");
@@ -65,6 +71,13 @@ export default function Apply() {
     "100K+",
   ];
 
+  useEffect(() => {
+    register("industry");
+    register("isInUS");
+    register("isForSale");
+    register("isGenerating");
+  }, [register]);
+
   const handleRemoveImage = (index: number) => {
     const updatedImages = selectedImages.filter((_, i) => i !== index);
     setSelectedImages(updatedImages);
@@ -79,11 +92,8 @@ export default function Apply() {
   const onSubmit = (data: any) => {
     console.table(data);
   };
-  const handleFieldChange = (fieldName: string, value: string) => {
+  const handleFieldChange = (fieldName: string, value: any) => {
     switch (fieldName) {
-      case "industry":
-        setSelectedIndustry(value);
-        break;
       case "isInUS":
         setIsInUS(value);
         break;
@@ -147,7 +157,7 @@ export default function Apply() {
       </div>
       {/* form */}
       <form action="" onSubmit={handleSubmit(onSubmit)}>
-        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-48">
+        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
             All requested information in this section is required.
@@ -182,41 +192,24 @@ export default function Apply() {
               )}
             </div>
             {/* industry */}
-            <div className="mt-10 space-y-5">
-              <Label htmlFor="industry" className="font-bold text-lg mt-10">
-                Industry
-              </Label>
-              <div className="flex space-x-5">
-                <Select
-                  onValueChange={(value) =>
-                    handleFieldChange("industry", value)
-                  }
-                >
-                  <SelectTrigger className="w-96">
-                    <SelectValue placeholder="Select an industry" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Industry</SelectLabel>
-                      {industry.map((i) => (
-                        <SelectItem key={i} value={i}>
-                          {i}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <input
-                  type="hidden"
-                  {...register("industry")}
-                  value={selectedIndustry}
-                />
-                {/* {selectedIndustry} */}
-                <span className="text-[12px] text-neutral-500 self-center">
-                  Choose the industry that best aligns with your business.
-                </span>
-              </div>
-            </div>
+
+            <MultipleOptionSelector
+              header={<>Industry</>}
+              fieldName="industry"
+              choices={industry}
+              handleFunction={handleFieldChange}
+              description={
+                <>Choose the industry that best aligns with your business.</>
+              }
+              placeholder="Select an industry"
+              selectLabel="Industry"
+            />
+            {/* <input
+              type="hidden"
+              {...register("industry")}
+              value={selectedIndustry}
+            /> */}
+            {/* {selectedIndustry} */}
             {/* How much money has your company raised to date? */}
             <div className="space-y-5">
               <Label htmlFor="totalRaised" className="font-bold text-lg">
@@ -224,11 +217,13 @@ export default function Apply() {
               </Label>
               <div className="flex space-x-5">
                 <Input
-                  type="text"
+                  type="number"
                   id="totalRaised"
                   className="w-96"
                   placeholder="$   1,000,000"
-                  {...register("totalRaised")}
+                  {...register("totalRaised", {
+                    valueAsNumber: true,
+                  })}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
                   The sum total of past financing, including angel or venture{" "}
@@ -236,9 +231,18 @@ export default function Apply() {
                   capital, loans, grants, or token sales.
                 </span>
               </div>
+              {errors.totalRaised && (
+                <p className="text-red-500 text-sm">
+                  {errors.totalRaised && (
+                    <p className="text-red-500 text-sm">
+                      {errors.totalRaised.message as string}
+                    </p>
+                  )}
+                </p>
+              )}
             </div>
             {/* Is your company incorporated in the United States? */}
-            <Selector
+            <DualOptionSelector
               label={
                 <>
                   Is your company incorporated in the <br />
@@ -262,7 +266,7 @@ export default function Apply() {
             />
 
             {/* Is your product available (for sale) in market? */}
-            <Selector
+            <DualOptionSelector
               label={
                 <>
                   Is your product available (for sale) <br />
@@ -284,7 +288,7 @@ export default function Apply() {
             />
 
             {/* Is your company generating revenue?*/}
-            <Selector
+            <DualOptionSelector
               label={<>Is your company generating revenue?</>}
               name="isGenerating"
               choice1="Yes"
@@ -367,10 +371,11 @@ export default function Apply() {
                 </span>
               </div>
             </div>
+
             <div className="flex space-x-5">
-              <Switch onCheckedChange={() => setApplyProject(!applyProject)}>
-                Apply your first project!
-              </Switch>
+              <Switch
+                onCheckedChange={() => setApplyProject(!applyProject)}
+              ></Switch>
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -396,7 +401,7 @@ export default function Apply() {
         {applyProject && (
           <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
             {/* header */}
-            <div className="ml-96">
+            <div className="ml-[15%]">
               <h1 className="text-3xl font-bold mt-10">
                 Begin Your First Fundraising Project
               </h1>
diff --git a/src/components/selector.tsx b/src/components/dualSelector.tsx
similarity index 95%
rename from src/components/selector.tsx
rename to src/components/dualSelector.tsx
index d0e0206..e55b066 100644
--- a/src/components/selector.tsx
+++ b/src/components/dualSelector.tsx
@@ -12,7 +12,7 @@ interface SelectorInterface {
   description: ReactElement;
 }
 
-export function Selector(props: SelectorInterface) {
+export function DualOptionSelector(props: SelectorInterface) {
   return (
     <div className="space-y-5">
       <Label htmlFor={props.name} className="font-bold text-lg">
diff --git a/src/components/multipleSelector.tsx b/src/components/multipleSelector.tsx
new file mode 100644
index 0000000..74b4796
--- /dev/null
+++ b/src/components/multipleSelector.tsx
@@ -0,0 +1,56 @@
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ReactElement } from "react";
+
+interface MultipleOptionSelector {
+  header: ReactElement;
+  fieldName: string;
+  choices: string[];
+  handleFunction: Function;
+  description: ReactElement;
+  placeholder: string;
+  selectLabel: string;
+}
+
+export function MultipleOptionSelector(props: MultipleOptionSelector) {
+  return (
+    <div className="mt-10 space-y-5">
+      <Label htmlFor={props.fieldName} className="font-bold text-lg mt-10">
+        {props.header}
+      </Label>
+      <div className="flex space-x-5">
+        <Select
+          onValueChange={(value) => {
+            props.handleFunction(props.fieldName, value);
+            // console.log(value, props.fieldName);
+          }}
+        >
+          <SelectTrigger className="w-96">
+            <SelectValue placeholder={props.placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>{props.selectLabel}</SelectLabel>
+              {props.choices.map((i) => (
+                <SelectItem key={i} value={i}>
+                  {i}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <span className="text-[12px] text-neutral-500 self-center">
+          {props.description}
+        </span>
+      </div>
+    </div>
+  );
+}

From 5fea32393829520315d820f66e5be198ccd4a07f Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Fri, 11 Oct 2024 13:56:29 +0700
Subject: [PATCH 12/19] Refactor Apply page component to handle yes/no choices
 with DualOptionSelector and Selector components, and update form field change
 handling

---
 src/app/business/apply/page.tsx | 66 +++++++++++++++++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index d2df985..9d2c243 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -33,7 +33,30 @@ export default function Apply() {
       message: "Company name must be at least 5 characters.",
     }),
     industry: z.string(),
-    isInUS: z.string(),
+    isInUS: z
+      .string({
+        required_error: "Please select either 'Yes' or 'No'.",
+      })
+      .transform((val) => val.toLowerCase())
+      .refine((val) => val === "yes" || val === "no", {
+        message: "Please select either 'Yes' or 'No'.",
+      }),
+    isForSale: z
+      .string({
+        required_error: "Please select either 'Yes' or 'No'.",
+      })
+      .transform((val) => val.toLowerCase())
+      .refine((val) => val === "yes" || val === "no", {
+        message: "Please select either 'Yes' or 'No'.",
+      }),
+    isGenerating: z
+      .string({
+        required_error: "Please select either 'Yes' or 'No'.",
+      })
+      .transform((val) => val.toLowerCase())
+      .refine((val) => val === "yes" || val === "no", {
+        message: "Please select either 'Yes' or 'No'.",
+      }),
     totalRaised: z
       .number({
         required_error: "Total raised must be a number.",
@@ -90,7 +113,28 @@ export default function Apply() {
   };
 
   const onSubmit = (data: any) => {
-    console.table(data);
+    // console.table(data);
+    // convert any yes and no to true or false
+    const transformedData = Object.entries(data).reduce(
+      (acc: Record<any, any>, [key, value]) => {
+        if (typeof value === "string") {
+          const lowerValue = value.toLowerCase();
+          if (lowerValue === "yes") {
+            acc[key] = true;
+          } else if (lowerValue === "no") {
+            acc[key] = false;
+          } else {
+            acc[key] = value; // keep other string values unchanged
+          }
+        } else {
+          acc[key] = value; // keep other types unchanged
+        }
+        return acc;
+      },
+      {}
+    );
+
+    alert(JSON.stringify(transformedData));
   };
   const handleFieldChange = (fieldName: string, value: any) => {
     switch (fieldName) {
@@ -264,6 +308,15 @@ export default function Apply() {
               }
               value={isInUS}
             />
+            {errors.isInUS && (
+              <p className="text-red-500 text-sm">
+                {errors.isInUS && (
+                  <p className="text-red-500 text-sm">
+                    {errors.isInUS.message as string}
+                  </p>
+                )}
+              </p>
+            )}
 
             {/* Is your product available (for sale) in market? */}
             <DualOptionSelector
@@ -328,10 +381,15 @@ export default function Apply() {
               </div>
               <div className="flex space-x-5">
                 <Input
-                  type={businessPitch}
+                  type={businessPitch === "file" ? "file" : "text"}
                   id="companyName"
                   className="w-96"
-                  placeholder="https:// "
+                  placeholder={
+                    businessPitch === "file"
+                      ? "Upload your Markdown file"
+                      : "https:// "
+                  }
+                  accept={businessPitch === "file" ? ".md" : undefined} // accept only markdown file
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
                   Your pitch deck and other application info will be used for{" "}

From e9ce0714b3033f42ac395cd3249168734c487237 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Fri, 11 Oct 2024 14:37:57 +0700
Subject: [PATCH 13/19] Refactor Apply page component to handle yes/no choices
 with DualOptionSelector and Selector components, and update form field change
 handling

---
 src/app/business/apply/page.tsx | 118 ++++++++++++++++++++++++--------
 1 file changed, 91 insertions(+), 27 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 9d2c243..fe87374 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -28,11 +28,24 @@ import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
 
 export default function Apply() {
+  const pitchDeckSchema = z
+    .union([
+      z.string().url("Pitch deck must be a valid URL."),
+      z.instanceof(File).refine((file) => file.size > 0, {
+        message: "A file must be selected.",
+      }),
+    ])
+    .refine((value) => typeof value === "string" || value instanceof File, {
+      message: "Pitch deck must be either a file or a URL.",
+    });
+
   const formSchema = z.object({
     companyName: z.string().min(5, {
       message: "Company name must be at least 5 characters.",
     }),
-    industry: z.string(),
+    industry: z.string({
+      required_error: "Please select one of the option",
+    }),
     isInUS: z
       .string({
         required_error: "Please select either 'Yes' or 'No'.",
@@ -64,6 +77,10 @@ export default function Apply() {
       })
       .positive()
       .max(9999999999, "Total raised must be a realistic amount."),
+    communitySize: z.string({
+      required_error: "Please select one of the option",
+    }),
+    pitchDeck: pitchDeckSchema,
   });
   let supabase = createSupabaseClient();
   const {
@@ -133,9 +150,19 @@ export default function Apply() {
       },
       {}
     );
-
+    if (data.pitchDeck instanceof File) {
+      console.log("File Uploaded:", data.pitchDeck.name);
+    } else {
+      console.log("URL Provided:", data.pitchDeck);
+    }
     alert(JSON.stringify(transformedData));
   };
+  const handleBusinessPitchChange = (type: string) => {
+    setBusinessPitch(type);
+    // clear out old data
+    setValue("pitchDeck", "");
+  };
+
   const handleFieldChange = (fieldName: string, value: any) => {
     switch (fieldName) {
       case "isInUS":
@@ -204,7 +231,8 @@ export default function Apply() {
         <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
-            All requested information in this section is required.
+            <span className="text-red-500 font-bold">**</span>All requested
+            information in this section is required.
           </p>
 
           {/* company name */}
@@ -248,6 +276,11 @@ export default function Apply() {
               placeholder="Select an industry"
               selectLabel="Industry"
             />
+            {errors.industry && (
+              <p className="text-red-500 text-sm">
+                {errors.industry.message as string}
+              </p>
+            )}
             {/* <input
               type="hidden"
               {...register("industry")}
@@ -277,11 +310,7 @@ export default function Apply() {
               </div>
               {errors.totalRaised && (
                 <p className="text-red-500 text-sm">
-                  {errors.totalRaised && (
-                    <p className="text-red-500 text-sm">
-                      {errors.totalRaised.message as string}
-                    </p>
-                  )}
+                  {errors.totalRaised.message as string}
                 </p>
               )}
             </div>
@@ -310,11 +339,7 @@ export default function Apply() {
             />
             {errors.isInUS && (
               <p className="text-red-500 text-sm">
-                {errors.isInUS && (
-                  <p className="text-red-500 text-sm">
-                    {errors.isInUS.message as string}
-                  </p>
-                )}
+                {errors.isInUS.message as string}
               </p>
             )}
 
@@ -339,6 +364,11 @@ export default function Apply() {
               }
               value={isForSale}
             />
+            {errors.isForSale && (
+              <p className="text-red-500 text-sm">
+                {errors.isForSale.message as string}
+              </p>
+            )}
 
             {/* Is your company generating revenue?*/}
             <DualOptionSelector
@@ -355,7 +385,11 @@ export default function Apply() {
               }
               value={isGenerating}
             />
-
+            {errors.isGenerating && (
+              <p className="text-red-500 text-sm">
+                {errors.isGenerating.message as string}
+              </p>
+            )}
             {/* Pitch deck */}
             <div className="space-y-5">
               <Label htmlFor="pitchDeck" className="font-bold text-lg">
@@ -365,7 +399,7 @@ export default function Apply() {
                 <Button
                   type="button"
                   variant={businessPitch === "text" ? "default" : "outline"}
-                  onClick={() => setBusinessPitch("text")}
+                  onClick={() => handleBusinessPitchChange("text")}
                   className="w-32 h-12 text-base"
                 >
                   Paste URL
@@ -373,24 +407,27 @@ export default function Apply() {
                 <Button
                   type="button"
                   variant={businessPitch === "file" ? "default" : "outline"}
-                  onClick={() => setBusinessPitch("file")}
+                  onClick={() => handleBusinessPitchChange("file")}
                   className="w-32 h-12 text-base"
                 >
                   Upload a file
                 </Button>
               </div>
               <div className="flex space-x-5">
+                {businessPitch}
                 <Input
                   type={businessPitch === "file" ? "file" : "text"}
-                  id="companyName"
+                  id="pitchDeck"
                   className="w-96"
                   placeholder={
                     businessPitch === "file"
                       ? "Upload your Markdown file"
                       : "https:// "
                   }
-                  accept={businessPitch === "file" ? ".md" : undefined} // accept only markdown file
+                  accept={businessPitch === "file" ? ".md" : undefined}
+                  {...register("pitchDeck", { required: true })}
                 />
+
                 <span className="text-[12px] text-neutral-500 self-center">
                   Your pitch deck and other application info will be used for{" "}
                   <br />
@@ -401,12 +438,17 @@ export default function Apply() {
                 </span>
               </div>
             </div>
-
+            {errors.pitchDeck && (
+              <p className="text-red-500 text-sm">
+                {errors.pitchDeck.message as string}
+              </p>
+            )}
             {/* What's the rough size of your community? */}
-            <div className="mt-10 space-y-5">
-              <Label htmlFor="companySize" className="font-bold text-lg mt-10">
-                What's the rough size of your <br /> community?
-              </Label>
+            {/* <div className="mt-10 space-y-5">
+              <Label
+                htmlFor="companySize"
+                className="font-bold text-lg mt-10"
+              ></Label>
               <div className="flex space-x-5">
                 <Select>
                   <SelectTrigger className="w-96">
@@ -421,14 +463,36 @@ export default function Apply() {
                     </SelectGroup>
                   </SelectContent>
                 </Select>
-                <span className="text-[12px] text-neutral-500 self-center">
+                <span className="text-[12px] text-neutral-500 self-center"></span>
+              </div>
+            </div> */}
+
+            <MultipleOptionSelector
+              header={
+                <>
+                  What's the rough size of your <br /> community?
+                </>
+              }
+              fieldName="communitySize"
+              choices={communitySize}
+              handleFunction={handleFieldChange}
+              description={
+                <>
+                  {" "}
                   Include your email list, social media following (i.e.
                   Instagram, <br /> Discord, Facebook, Twitter, TikTok). We’d
                   like to understand the <br /> rough size of your current
                   audience.
-                </span>
-              </div>
-            </div>
+                </>
+              }
+              placeholder="Select"
+              selectLabel="Select"
+            />
+            {errors.communitySize && (
+              <p className="text-red-500 text-sm">
+                {errors.communitySize.message as string}
+              </p>
+            )}
 
             <div className="flex space-x-5">
               <Switch

From 6a69edf57e398ce9e80fdf75d852ebd02543c53d Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 12 Oct 2024 18:56:08 +0700
Subject: [PATCH 14/19] Refactor Apply page component to simplify
 pitchDeckSchema validation

---
 src/app/business/apply/page.tsx | 46 ++++-----------------------------
 1 file changed, 5 insertions(+), 41 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index fe87374..750d81d 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -28,16 +28,10 @@ import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
 
 export default function Apply() {
-  const pitchDeckSchema = z
-    .union([
-      z.string().url("Pitch deck must be a valid URL."),
-      z.instanceof(File).refine((file) => file.size > 0, {
-        message: "A file must be selected.",
-      }),
-    ])
-    .refine((value) => typeof value === "string" || value instanceof File, {
-      message: "Pitch deck must be either a file or a URL.",
-    });
+  const pitchDeckSchema = z.union([
+    z.string().url("Pitch deck must be a valid URL."),
+    z.object({}),
+  ]);
 
   const formSchema = z.object({
     companyName: z.string().min(5, {
@@ -155,6 +149,7 @@ export default function Apply() {
     } else {
       console.log("URL Provided:", data.pitchDeck);
     }
+    console.table(transformedData);
     alert(JSON.stringify(transformedData));
   };
   const handleBusinessPitchChange = (type: string) => {
@@ -281,12 +276,6 @@ export default function Apply() {
                 {errors.industry.message as string}
               </p>
             )}
-            {/* <input
-              type="hidden"
-              {...register("industry")}
-              value={selectedIndustry}
-            /> */}
-            {/* {selectedIndustry} */}
             {/* How much money has your company raised to date? */}
             <div className="space-y-5">
               <Label htmlFor="totalRaised" className="font-bold text-lg">
@@ -414,7 +403,6 @@ export default function Apply() {
                 </Button>
               </div>
               <div className="flex space-x-5">
-                {businessPitch}
                 <Input
                   type={businessPitch === "file" ? "file" : "text"}
                   id="pitchDeck"
@@ -443,30 +431,6 @@ export default function Apply() {
                 {errors.pitchDeck.message as string}
               </p>
             )}
-            {/* What's the rough size of your community? */}
-            {/* <div className="mt-10 space-y-5">
-              <Label
-                htmlFor="companySize"
-                className="font-bold text-lg mt-10"
-              ></Label>
-              <div className="flex space-x-5">
-                <Select>
-                  <SelectTrigger className="w-96">
-                    <SelectValue placeholder="Select" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Select</SelectLabel>
-                      {communitySize.map((i) => (
-                        <SelectItem value={i}>{i}</SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <span className="text-[12px] text-neutral-500 self-center"></span>
-              </div>
-            </div> */}
-
             <MultipleOptionSelector
               header={
                 <>

From 847af65dbcc8665d22848c5ae36e631b2c22e69d Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 12 Oct 2024 18:57:57 +0700
Subject: [PATCH 15/19] Refactor Apply page component to adjust left margin for
 company information section

---
 src/app/business/apply/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 750d81d..17d4145 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -223,7 +223,7 @@ export default function Apply() {
       </div>
       {/* form */}
       <form action="" onSubmit={handleSubmit(onSubmit)}>
-        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2">
+        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
             <span className="text-red-500 font-bold">**</span>All requested

From 3370b0f61cababdccbc2495ab56f2799f40f7b25 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 13 Oct 2024 16:34:30 +0700
Subject: [PATCH 16/19] Refactor Apply page component to adjust left margin for
 company information section

---
 src/app/business/apply/page.tsx | 500 ++++++++++++++++----------------
 1 file changed, 253 insertions(+), 247 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 17d4145..206916d 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -32,8 +32,8 @@ export default function Apply() {
     z.string().url("Pitch deck must be a valid URL."),
     z.object({}),
   ]);
-
-  const formSchema = z.object({
+  const projectFormSchema = z.object({});
+  const businessFormSchema = z.object({
     companyName: z.string().min(5, {
       message: "Company name must be at least 5 characters.",
     }),
@@ -78,12 +78,21 @@ export default function Apply() {
   });
   let supabase = createSupabaseClient();
   const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
+    register: registerBusiness,
+    handleSubmit: handleSubmitBusiness,
+    setValue: setValueBusiness,
+    formState: { errors: errorsBusiness },
   } = useForm({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(businessFormSchema),
+  });
+
+  const {
+    register: registerProject,
+    handleSubmit: handleSubmitProject,
+    setValue: setValueProject,
+    formState: { errors: errorsProject },
+  } = useForm({
+    resolver: zodResolver(projectFormSchema),
   });
   const [industry, setIndustry] = useState<string[]>([]);
   const [isInUS, setIsInUS] = useState("");
@@ -106,11 +115,11 @@ export default function Apply() {
   ];
 
   useEffect(() => {
-    register("industry");
-    register("isInUS");
-    register("isForSale");
-    register("isGenerating");
-  }, [register]);
+    registerBusiness("industry");
+    registerBusiness("isInUS");
+    registerBusiness("isForSale");
+    registerBusiness("isGenerating");
+  }, [registerBusiness]);
 
   const handleRemoveImage = (index: number) => {
     const updatedImages = selectedImages.filter((_, i) => i !== index);
@@ -155,7 +164,7 @@ export default function Apply() {
   const handleBusinessPitchChange = (type: string) => {
     setBusinessPitch(type);
     // clear out old data
-    setValue("pitchDeck", "");
+    setValueBusiness("pitchDeck", "");
   };
 
   const handleFieldChange = (fieldName: string, value: any) => {
@@ -170,7 +179,7 @@ export default function Apply() {
         setIsGenerating(value);
         break;
     }
-    setValue(fieldName, value);
+    setValueBusiness(fieldName, value);
   };
   const fetchIndustry = async () => {
     let { data: BusinessType, error } = await supabase
@@ -222,7 +231,7 @@ export default function Apply() {
         </div>
       </div>
       {/* form */}
-      <form action="" onSubmit={handleSubmit(onSubmit)}>
+      <form action="" onSubmit={handleSubmitBusiness(onSubmit)}>
         <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
@@ -241,18 +250,18 @@ export default function Apply() {
                   type="text"
                   id="companyName"
                   className="w-96"
-                  {...register("companyName")}
+                  {...registerBusiness("companyName")}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
                   This should be the name your company uses on your <br />
                   website and in the market.
                 </span>
               </div>
-              {errors.companyName && (
+              {errorsBusiness.companyName && (
                 <p className="text-red-500 text-sm">
-                  {errors.companyName && (
+                  {errorsBusiness.companyName && (
                     <p className="text-red-500 text-sm">
-                      {errors.companyName.message as string}
+                      {errorsBusiness.companyName.message as string}
                     </p>
                   )}
                 </p>
@@ -271,9 +280,9 @@ export default function Apply() {
               placeholder="Select an industry"
               selectLabel="Industry"
             />
-            {errors.industry && (
+            {errorsBusiness.industry && (
               <p className="text-red-500 text-sm">
-                {errors.industry.message as string}
+                {errorsBusiness.industry.message as string}
               </p>
             )}
             {/* How much money has your company raised to date? */}
@@ -287,7 +296,7 @@ export default function Apply() {
                   id="totalRaised"
                   className="w-96"
                   placeholder="$   1,000,000"
-                  {...register("totalRaised", {
+                  {...registerBusiness("totalRaised", {
                     valueAsNumber: true,
                   })}
                 />
@@ -297,9 +306,9 @@ export default function Apply() {
                   capital, loans, grants, or token sales.
                 </span>
               </div>
-              {errors.totalRaised && (
+              {errorsBusiness.totalRaised && (
                 <p className="text-red-500 text-sm">
-                  {errors.totalRaised.message as string}
+                  {errorsBusiness.totalRaised.message as string}
                 </p>
               )}
             </div>
@@ -326,9 +335,9 @@ export default function Apply() {
               }
               value={isInUS}
             />
-            {errors.isInUS && (
+            {errorsBusiness.isInUS && (
               <p className="text-red-500 text-sm">
-                {errors.isInUS.message as string}
+                {errorsBusiness.isInUS.message as string}
               </p>
             )}
 
@@ -353,9 +362,9 @@ export default function Apply() {
               }
               value={isForSale}
             />
-            {errors.isForSale && (
+            {errorsBusiness.isForSale && (
               <p className="text-red-500 text-sm">
-                {errors.isForSale.message as string}
+                {errorsBusiness.isForSale.message as string}
               </p>
             )}
 
@@ -374,9 +383,9 @@ export default function Apply() {
               }
               value={isGenerating}
             />
-            {errors.isGenerating && (
+            {errorsBusiness.isGenerating && (
               <p className="text-red-500 text-sm">
-                {errors.isGenerating.message as string}
+                {errorsBusiness.isGenerating.message as string}
               </p>
             )}
             {/* Pitch deck */}
@@ -413,7 +422,7 @@ export default function Apply() {
                       : "https:// "
                   }
                   accept={businessPitch === "file" ? ".md" : undefined}
-                  {...register("pitchDeck", { required: true })}
+                  {...registerBusiness("pitchDeck", { required: true })}
                 />
 
                 <span className="text-[12px] text-neutral-500 self-center">
@@ -423,12 +432,16 @@ export default function Apply() {
                   Please make sure this document is publicly accessible. This
                   can <br />
                   be a DocSend, Box, Dropbox, Google Drive or other link.
+                  <br />
+                  <p className="text-red-500">
+                    ** support only markdown(.md) format
+                  </p>
                 </span>
               </div>
             </div>
-            {errors.pitchDeck && (
+            {errorsBusiness.pitchDeck && (
               <p className="text-red-500 text-sm">
-                {errors.pitchDeck.message as string}
+                {errorsBusiness.pitchDeck.message as string}
               </p>
             )}
             <MultipleOptionSelector
@@ -452,9 +465,9 @@ export default function Apply() {
               placeholder="Select"
               selectLabel="Select"
             />
-            {errors.communitySize && (
+            {errorsBusiness.communitySize && (
               <p className="text-red-500 text-sm">
-                {errors.communitySize.message as string}
+                {errorsBusiness.communitySize.message as string}
               </p>
             )}
 
@@ -486,233 +499,226 @@ export default function Apply() {
         {/* apply first project */}
         {applyProject && (
           <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
-            {/* header */}
-            <div className="ml-[15%]">
-              <h1 className="text-3xl font-bold mt-10">
-                Begin Your First Fundraising Project
-              </h1>
-              <p className="mt-3 text-sm text-neutral-500">
-                Starting a fundraising project is mandatory for all businesses.
-                This step is crucial <br />
-                to begin your journey and unlock the necessary tools for raising
-                funds.
-              </p>
+            <form action="" onSubmit={handleSubmitProject(onSubmit)}>
+              {/* header */}
+              <div className="ml-[15%]">
+                <h1 className="text-3xl font-bold mt-10">
+                  Begin Your First Fundraising Project
+                </h1>
+                <p className="mt-3 text-sm text-neutral-500">
+                  Starting a fundraising project is mandatory for all
+                  businesses. This step is crucial <br />
+                  to begin your journey and unlock the necessary tools for
+                  raising funds.
+                </p>
 
-              {/* project's name */}
-              <div className="mt-10 space-y-5">
-                <Label htmlFor="projectName" className="font-bold text-lg">
-                  Project name
-                </Label>
-                <div className="flex space-x-5">
-                  <Input type="text" id="projectName" className="w-96" />
+                {/* project's name */}
+                <div className="mt-10 space-y-5">
+                  <Label htmlFor="projectName" className="font-bold text-lg">
+                    Project name
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Input type="text" id="projectName" className="w-96" />
+                  </div>
                 </div>
-              </div>
 
-              {/* project type */}
-              <div className="mt-10 space-y-5">
-                <Label
-                  htmlFor="projectType"
-                  className="font-bold text-lg mt-10"
-                >
-                  Project type
-                </Label>
-                <div className="flex space-x-5">
-                  <Select>
-                    <SelectTrigger className="w-96">
-                      <SelectValue placeholder="Select a Project type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectLabel>Project type</SelectLabel>
-                        {projectType.map((i) => (
-                          <SelectItem value={i}>{i}</SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    Please specify the primary purpose of the funds
-                  </span>
-                </div>
-              </div>
+                {/* project type */}
+                <MultipleOptionSelector
+                  header={<>Project type</>}
+                  fieldName="projectType"
+                  choices={projectType}
+                  handleFunction={handleFieldChange}
+                  description={
+                    <>Please specify the primary purpose of the funds</>
+                  }
+                  placeholder="Select a Project type"
+                  selectLabel="Project type"
+                />
 
-              {/* short description */}
-              <div className="mt-10 space-y-5">
-                <Label htmlFor="shortDescription" className="font-bold text-lg">
-                  Short description
-                </Label>
-                <div className="flex space-x-5">
-                  <Textarea id="shortDescription" className="w-96" />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    Could you provide a brief description of your project <br />{" "}
-                    in one or two sentences?
-                  </span>
-                </div>
-              </div>
-
-              {/* Pitch deck */}
-              <div className="mt-10 space-y-5">
-                <Label htmlFor="projectPitchDeck" className="font-bold text-lg">
-                  Pitch deck
-                </Label>
-                <div className="flex space-x-2 w-96">
-                  <Button
-                    type="button"
-                    variant={projectPitch === "text" ? "default" : "outline"}
-                    onClick={() => setProjectPitch("text")}
-                    className="w-32 h-12 text-base"
+                {/* short description */}
+                <div className="mt-10 space-y-5">
+                  <Label
+                    htmlFor="shortDescription"
+                    className="font-bold text-lg"
                   >
-                    Paste URL
-                  </Button>
-                  <Button
-                    type="button"
-                    variant={projectPitch === "file" ? "default" : "outline"}
-                    onClick={() => setProjectPitch("file")}
-                    className="w-32 h-12 text-base"
+                    Short description
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Textarea id="shortDescription" className="w-96" />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      Could you provide a brief description of your project{" "}
+                      <br /> in one or two sentences?
+                    </span>
+                  </div>
+                </div>
+
+                {/* Pitch deck */}
+                <div className="mt-10 space-y-5">
+                  <Label
+                    htmlFor="projectPitchDeck"
+                    className="font-bold text-lg"
                   >
-                    Upload a file
-                  </Button>
-                </div>
-                <div className="flex space-x-5">
-                  <Input
-                    type={projectPitch}
-                    id="projectPitchDeck"
-                    className="w-96"
-                    placeholder="https:// "
-                  />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    Please upload a file or paste a link to your pitch, which
-                    should <br />
-                    cover key aspects of your project: what it will do, what
-                    investors <br /> can expect to gain, and any highlights that
-                    make it stand out.
-                  </span>
-                </div>
-              </div>
-
-              {/* project logo */}
-              <div className="mt-10 space-y-5">
-                <Label
-                  htmlFor="projectLogo"
-                  className="font-bold text-lg mt-10"
-                >
-                  Project logo
-                </Label>
-                <div className="flex space-x-5">
-                  <Input
-                    type="file"
-                    id="projectPitchDeck"
-                    className="w-96"
-                    accept="image/*"
-                  />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    Please upload the logo picture that best represents your
-                    project.
-                  </span>
-                </div>
-              </div>
-
-              {/* Project pictures */}
-              <div className="mt-10 space-y-5">
-                <Label
-                  htmlFor="projectPicture"
-                  className="font-bold text-lg mt-10"
-                >
-                  Project pictures
-                </Label>
-                <div className="flex space-x-5">
-                  <Input
-                    type="file"
-                    id="projectPicture"
-                    multiple
-                    onChange={handleFileChange}
-                    accept="image/*"
-                    className="w-96"
-                    value={selectedImages.length === 0 ? "" : undefined}
-                  />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    Feel free to upload any additional images that provide{" "}
-                    <br />
-                    further insight into your project.
-                  </span>
-                </div>
-                <div className="mt-5 space-y-2 w-96">
-                  {selectedImages.map((image, index) => (
-                    <div
-                      key={index}
-                      className="flex justify-between items-center border p-2 rounded"
+                    Pitch deck
+                  </Label>
+                  <div className="flex space-x-2 w-96">
+                    <Button
+                      type="button"
+                      variant={projectPitch === "text" ? "default" : "outline"}
+                      onClick={() => setProjectPitch("text")}
+                      className="w-32 h-12 text-base"
                     >
-                      <span>{image.name}</span>
-                      <Button
-                        variant="outline"
-                        onClick={() => handleRemoveImage(index)}
-                        className="ml-4"
+                      Paste URL
+                    </Button>
+                    <Button
+                      type="button"
+                      variant={projectPitch === "file" ? "default" : "outline"}
+                      onClick={() => setProjectPitch("file")}
+                      className="w-32 h-12 text-base"
+                    >
+                      Upload a file
+                    </Button>
+                  </div>
+                  <div className="flex space-x-5">
+                    <Input
+                      type={projectPitch}
+                      id="projectPitchDeck"
+                      className="w-96"
+                      placeholder="https:// "
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      Please upload a file or paste a link to your pitch, which
+                      should <br />
+                      cover key aspects of your project: what it will do, what
+                      investors <br /> can expect to gain, and any highlights
+                      that make it stand out.
+                    </span>
+                  </div>
+                </div>
+
+                {/* project logo */}
+                <div className="mt-10 space-y-5">
+                  <Label
+                    htmlFor="projectLogo"
+                    className="font-bold text-lg mt-10"
+                  >
+                    Project logo
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Input
+                      type="file"
+                      id="projectPitchDeck"
+                      className="w-96"
+                      accept="image/*"
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      Please upload the logo picture that best represents your
+                      project.
+                    </span>
+                  </div>
+                </div>
+
+                {/* Project pictures */}
+                <div className="mt-10 space-y-5">
+                  <Label
+                    htmlFor="projectPicture"
+                    className="font-bold text-lg mt-10"
+                  >
+                    Project pictures
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Input
+                      type="file"
+                      id="projectPicture"
+                      multiple
+                      onChange={handleFileChange}
+                      accept="image/*"
+                      className="w-96"
+                      value={selectedImages.length === 0 ? "" : undefined}
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      Feel free to upload any additional images that provide{" "}
+                      <br />
+                      further insight into your project.
+                    </span>
+                  </div>
+                  <div className="mt-5 space-y-2 w-96">
+                    {selectedImages.map((image, index) => (
+                      <div
+                        key={index}
+                        className="flex justify-between items-center border p-2 rounded"
                       >
-                        Remove
-                      </Button>
-                    </div>
-                  ))}
+                        <span>{image.name}</span>
+                        <Button
+                          variant="outline"
+                          onClick={() => handleRemoveImage(index)}
+                          className="ml-4"
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
                 </div>
-              </div>
 
-              {/* Minimum Investment */}
-              <div className="space-y-5 mt-10">
-                <Label htmlFor="minInvest" className="font-bold text-lg">
-                  Minimum investment
-                </Label>
-                <div className="flex space-x-5">
-                  <Input
-                    type="text"
-                    id="minInvest"
-                    className="w-96"
-                    placeholder="$   500"
-                    {...register}
-                  />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    This helps set clear expectations for investors
-                  </span>
+                {/* Minimum Investment */}
+                <div className="space-y-5 mt-10">
+                  <Label htmlFor="minInvest" className="font-bold text-lg">
+                    Minimum investment
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Input
+                      type="text"
+                      id="minInvest"
+                      className="w-96"
+                      placeholder="$   500"
+                      {...registerProject}
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      This helps set clear expectations for investors
+                    </span>
+                  </div>
                 </div>
-              </div>
-              {/* Target Investment */}
-              <div className="space-y-5 mt-10">
-                <Label htmlFor="targetInvest" className="font-bold text-lg">
-                  Target investment
-                </Label>
-                <div className="flex space-x-5">
-                  <Input
-                    type="text"
-                    id="targetInvest"
-                    className="w-96"
-                    placeholder="$   1,000,000"
-                    {...register}
-                  />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    We encourage you to set a specific target investment <br />{" "}
-                    amount that reflects your funding goals.
-                  </span>
+                {/* Target Investment */}
+                <div className="space-y-5 mt-10">
+                  <Label htmlFor="targetInvest" className="font-bold text-lg">
+                    Target investment
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Input
+                      type="text"
+                      id="targetInvest"
+                      className="w-96"
+                      placeholder="$   1,000,000"
+                      {...registerProject}
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      We encourage you to set a specific target investment{" "}
+                      <br /> amount that reflects your funding goals.
+                    </span>
+                  </div>
                 </div>
-              </div>
 
-              {/* Deadline */}
-              <div className="space-y-5 mt-10">
-                <Label htmlFor="deadline" className="font-bold text-lg">
-                  Deadline
-                </Label>
-                <div className="flex space-x-5">
-                  <Input
-                    type="datetime-local"
-                    id="deadline"
-                    className="w-96"
-                    {...register}
-                  />
-                  <span className="text-[12px] text-neutral-500 self-center">
-                    What is the deadline for your fundraising project? Setting{" "}
-                    <br /> a clear timeline can help motivate potential
-                    investors.
-                  </span>
+                {/* Deadline */}
+                <div className="space-y-5 mt-10">
+                  <Label htmlFor="deadline" className="font-bold text-lg">
+                    Deadline
+                  </Label>
+                  <div className="flex space-x-5">
+                    <Input
+                      type="datetime-local"
+                      id="deadline"
+                      className="w-96"
+                      {...registerProject}
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      What is the deadline for your fundraising project? Setting{" "}
+                      <br /> a clear timeline can help motivate potential
+                      investors.
+                    </span>
+                  </div>
                 </div>
               </div>
-            </div>
+            </form>
           </div>
         )}
         {/* Submit */}

From f5c946f167f81749316d33dd54f4455950450142 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 13 Oct 2024 16:47:46 +0700
Subject: [PATCH 17/19] Refactor Apply page component to adjust left margin for
 company information section and simplify pitchDeckSchema validation

---
 src/app/business/apply/page.tsx | 91 +++++++++++++++++++++++++++------
 1 file changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 206916d..d366983 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -3,15 +3,6 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
@@ -28,11 +19,76 @@ import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
 
 export default function Apply() {
+  const MAX_FILE_SIZE = 5000000;
+  const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
   const pitchDeckSchema = z.union([
     z.string().url("Pitch deck must be a valid URL."),
     z.object({}),
   ]);
-  const projectFormSchema = z.object({});
+  const projectFormSchema = z.object({
+    projectName: z.string().min(5, {
+      message: "Project name must be at least 5 characters.",
+    }),
+    projectType: z.string({
+      required_error: "Please select one of the option",
+    }),
+    shortDescription: z
+      .string({
+        required_error: "Please provide a brief description for your project",
+      })
+      .min(40, {
+        message: "Short description must be at least 40 characters.",
+      }),
+    projectPitchDeck: pitchDeckSchema,
+    projectLogo: z
+      .any()
+      .refine((file) => file?.size <= MAX_FILE_SIZE, `Max image size is 5MB.`)
+      .refine(
+        (file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),
+        "Only .jpg, .jpeg, and .png formats are supported."
+      ),
+    projectPhotos: z
+      .array(
+        z.object({
+          file: z
+            .any()
+            .refine(
+              (file) => file?.size <= MAX_FILE_SIZE,
+              `Max image size is 5MB.`
+            )
+            .refine(
+              (file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),
+              "Only .jpg, .jpeg, and .png formats are supported."
+            ),
+        })
+      )
+      .min(1, "You must upload at least one photo.")
+      .max(10, "You can upload a maximum of 10 photos."),
+    minInvest: z
+      .number({
+        required_error: "Minimum invesment must be a number.",
+        invalid_type_error: "Minimum invesment must be a valid number.",
+      })
+      .positive()
+      .max(9999999999, "Minimum invesment must be a realistic amount."),
+    targetInvest: z
+      .number({
+        required_error: "Target invesment must be a number.",
+        invalid_type_error: "Target invesment must be a valid number.",
+      })
+      .positive()
+      .max(9999999999, "Target invesment must be a realistic amount."),
+    deadline: z
+      .string()
+      .min(1, "Deadline is required.")
+      .refine((value) => !isNaN(Date.parse(value)), {
+        message: "Invalid date-time format.",
+      })
+      .transform((value) => new Date(value))
+      .refine((date) => date > new Date(), {
+        message: "Deadline must be in the future.",
+      }),
+  });
   const businessFormSchema = z.object({
     companyName: z.string().min(5, {
       message: "Company name must be at least 5 characters.",
@@ -74,7 +130,7 @@ export default function Apply() {
     communitySize: z.string({
       required_error: "Please select one of the option",
     }),
-    pitchDeck: pitchDeckSchema,
+    businessPitchDeck: pitchDeckSchema,
   });
   let supabase = createSupabaseClient();
   const {
@@ -422,7 +478,7 @@ export default function Apply() {
                       : "https:// "
                   }
                   accept={businessPitch === "file" ? ".md" : undefined}
-                  {...registerBusiness("pitchDeck", { required: true })}
+                  {...registerBusiness("businessPitchDeck", { required: true })}
                 />
 
                 <span className="text-[12px] text-neutral-500 self-center">
@@ -518,7 +574,12 @@ export default function Apply() {
                     Project name
                   </Label>
                   <div className="flex space-x-5">
-                    <Input type="text" id="projectName" className="w-96" />
+                    <Input
+                      type="text"
+                      id="projectName"
+                      className="w-96"
+                      {...registerProject("projectName")}
+                    />
                   </div>
                 </div>
 
@@ -667,7 +728,7 @@ export default function Apply() {
                   </Label>
                   <div className="flex space-x-5">
                     <Input
-                      type="text"
+                      type="number"
                       id="minInvest"
                       className="w-96"
                       placeholder="$   500"
@@ -685,7 +746,7 @@ export default function Apply() {
                   </Label>
                   <div className="flex space-x-5">
                     <Input
-                      type="text"
+                      type="number"
                       id="targetInvest"
                       className="w-96"
                       placeholder="$   1,000,000"

From 7c042c6b3c4d375cf8841cc5d47deb0f1b5c4a81 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 13 Oct 2024 21:46:52 +0700
Subject: [PATCH 18/19] Refactor Apply page component to adjust left margin for
 company information section and simplify pitchDeckSchema validation

---
 src/app/business/apply/page.tsx | 607 ++++++++++++++++++--------------
 1 file changed, 344 insertions(+), 263 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index d366983..f423147 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -36,8 +36,8 @@ export default function Apply() {
       .string({
         required_error: "Please provide a brief description for your project",
       })
-      .min(40, {
-        message: "Short description must be at least 40 characters.",
+      .min(10, {
+        message: "Short description must be at least 10 characters.",
       }),
     projectPitchDeck: pitchDeckSchema,
     projectLogo: z
@@ -133,23 +133,7 @@ export default function Apply() {
     businessPitchDeck: pitchDeckSchema,
   });
   let supabase = createSupabaseClient();
-  const {
-    register: registerBusiness,
-    handleSubmit: handleSubmitBusiness,
-    setValue: setValueBusiness,
-    formState: { errors: errorsBusiness },
-  } = useForm({
-    resolver: zodResolver(businessFormSchema),
-  });
 
-  const {
-    register: registerProject,
-    handleSubmit: handleSubmitProject,
-    setValue: setValueProject,
-    formState: { errors: errorsProject },
-  } = useForm({
-    resolver: zodResolver(projectFormSchema),
-  });
   const [industry, setIndustry] = useState<string[]>([]);
   const [isInUS, setIsInUS] = useState("");
   const [isForSale, setIsForSale] = useState("");
@@ -159,6 +143,23 @@ export default function Apply() {
   const [projectPitch, setProjectPitch] = useState("");
   const [applyProject, setApplyProject] = useState(false);
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    setValue: setValueBusiness,
+    formState: { errors: errorsBusiness },
+  } = useForm({
+    resolver: zodResolver(businessFormSchema),
+  });
+  const {
+    register: registerSecondForm,
+    handleSubmit: handleSecondSubmit,
+    formState: { errors: errorsProject },
+    setValue: setValueProject,
+  } = useForm({
+    resolver: zodResolver(projectFormSchema),
+  });
 
   const communitySize = [
     "N/A",
@@ -171,11 +172,11 @@ export default function Apply() {
   ];
 
   useEffect(() => {
-    registerBusiness("industry");
-    registerBusiness("isInUS");
-    registerBusiness("isForSale");
-    registerBusiness("isGenerating");
-  }, [registerBusiness]);
+    register("industry");
+    register("isInUS");
+    register("isForSale");
+    register("isGenerating");
+  }, [register]);
 
   const handleRemoveImage = (index: number) => {
     const updatedImages = selectedImages.filter((_, i) => i !== index);
@@ -185,10 +186,11 @@ export default function Apply() {
     if (event.target.files) {
       const filesArray = Array.from(event.target.files);
       setSelectedImages((prevImages) => [...prevImages, ...filesArray]);
+      setValueProject("projectPhotos", filesArray);
     }
   };
 
-  const onSubmit = (data: any) => {
+  const transformChoice = (data: any) => {
     // console.table(data);
     // convert any yes and no to true or false
     const transformedData = Object.entries(data).reduce(
@@ -209,13 +211,7 @@ export default function Apply() {
       },
       {}
     );
-    if (data.pitchDeck instanceof File) {
-      console.log("File Uploaded:", data.pitchDeck.name);
-    } else {
-      console.log("URL Provided:", data.pitchDeck);
-    }
-    console.table(transformedData);
-    alert(JSON.stringify(transformedData));
+    return transformedData;
   };
   const handleBusinessPitchChange = (type: string) => {
     setBusinessPitch(type);
@@ -223,7 +219,7 @@ export default function Apply() {
     setValueBusiness("pitchDeck", "");
   };
 
-  const handleFieldChange = (fieldName: string, value: any) => {
+  const handleBusinessFieldChange = (fieldName: string, value: any) => {
     switch (fieldName) {
       case "isInUS":
         setIsInUS(value);
@@ -237,6 +233,12 @@ export default function Apply() {
     }
     setValueBusiness(fieldName, value);
   };
+  const handleProjectFieldChange = (fieldName: string, value: any) => {
+    switch (fieldName) {
+    }
+    setValueProject(fieldName, value);
+  };
+
   const fetchIndustry = async () => {
     let { data: BusinessType, error } = await supabase
       .from("BusinessType")
@@ -251,6 +253,27 @@ export default function Apply() {
       }
     }
   };
+
+  const onSubmitSingleForm = (data: any) => {
+    alert(JSON.stringify(data));
+  };
+
+  const onSubmitBothForms = (firstFormData: any, secondFormData: any) => {
+    alert(JSON.stringify(firstFormData));
+    alert(JSON.stringify(secondFormData));
+    console.log("Both forms submitted:", { firstFormData, secondFormData });
+  };
+
+  const handleSubmitForms = (firstFormData: any) => {
+    const transformedData = transformChoice(firstFormData);
+    if (applyProject) {
+      handleSecondSubmit((secondFormData: any) => {
+        onSubmitBothForms(transformedData, secondFormData);
+      })();
+    } else {
+      onSubmitSingleForm(transformedData);
+    }
+  };
   const fetchProjectType = async () => {
     let { data: ProjectType, error } = await supabase
       .from("ProjectType")
@@ -287,7 +310,7 @@ export default function Apply() {
         </div>
       </div>
       {/* form */}
-      <form action="" onSubmit={handleSubmitBusiness(onSubmit)}>
+      <form action="" onSubmit={handleSubmit(handleSubmitForms)}>
         <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
@@ -306,7 +329,7 @@ export default function Apply() {
                   type="text"
                   id="companyName"
                   className="w-96"
-                  {...registerBusiness("companyName")}
+                  {...register("companyName")}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
                   This should be the name your company uses on your <br />
@@ -329,7 +352,7 @@ export default function Apply() {
               header={<>Industry</>}
               fieldName="industry"
               choices={industry}
-              handleFunction={handleFieldChange}
+              handleFunction={handleBusinessFieldChange}
               description={
                 <>Choose the industry that best aligns with your business.</>
               }
@@ -352,7 +375,7 @@ export default function Apply() {
                   id="totalRaised"
                   className="w-96"
                   placeholder="$   1,000,000"
-                  {...registerBusiness("totalRaised", {
+                  {...register("totalRaised", {
                     valueAsNumber: true,
                   })}
                 />
@@ -379,7 +402,7 @@ export default function Apply() {
               name="isInUS"
               choice1="Yes"
               choice2="No"
-              handleFunction={handleFieldChange}
+              handleFunction={handleBusinessFieldChange}
               description={
                 <>
                   Only companies that are incorporated or formed in the US are{" "}
@@ -408,7 +431,7 @@ export default function Apply() {
               name="isForSale"
               choice1="Yes"
               choice2="No"
-              handleFunction={handleFieldChange}
+              handleFunction={handleBusinessFieldChange}
               description={
                 <>
                   Only check this box if customers can access, use, or buy your{" "}
@@ -430,7 +453,7 @@ export default function Apply() {
               name="isGenerating"
               choice1="Yes"
               choice2="No"
-              handleFunction={handleFieldChange}
+              handleFunction={handleBusinessFieldChange}
               description={
                 <>
                   Only check this box if your company is making money. <br />
@@ -478,7 +501,7 @@ export default function Apply() {
                       : "https:// "
                   }
                   accept={businessPitch === "file" ? ".md" : undefined}
-                  {...registerBusiness("businessPitchDeck", { required: true })}
+                  {...register("businessPitchDeck", { required: true })}
                 />
 
                 <span className="text-[12px] text-neutral-500 self-center">
@@ -508,7 +531,7 @@ export default function Apply() {
               }
               fieldName="communitySize"
               choices={communitySize}
-              handleFunction={handleFieldChange}
+              handleFunction={handleBusinessFieldChange}
               description={
                 <>
                   {" "}
@@ -555,231 +578,289 @@ export default function Apply() {
         {/* apply first project */}
         {applyProject && (
           <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
-            <form action="" onSubmit={handleSubmitProject(onSubmit)}>
-              {/* header */}
-              <div className="ml-[15%]">
-                <h1 className="text-3xl font-bold mt-10">
-                  Begin Your First Fundraising Project
-                </h1>
-                <p className="mt-3 text-sm text-neutral-500">
-                  Starting a fundraising project is mandatory for all
-                  businesses. This step is crucial <br />
-                  to begin your journey and unlock the necessary tools for
-                  raising funds.
-                </p>
+            {/* header */}
+            <div className="ml-[15%]">
+              <h1 className="text-3xl font-bold mt-10">
+                Begin Your First Fundraising Project
+              </h1>
+              <p className="mt-3 text-sm text-neutral-500">
+                Starting a fundraising project is mandatory for all businesses.
+                This step is crucial <br />
+                to begin your journey and unlock the necessary tools for raising
+                funds.
+              </p>
 
-                {/* project's name */}
-                <div className="mt-10 space-y-5">
-                  <Label htmlFor="projectName" className="font-bold text-lg">
-                    Project name
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Input
-                      type="text"
-                      id="projectName"
-                      className="w-96"
-                      {...registerProject("projectName")}
-                    />
-                  </div>
-                </div>
-
-                {/* project type */}
-                <MultipleOptionSelector
-                  header={<>Project type</>}
-                  fieldName="projectType"
-                  choices={projectType}
-                  handleFunction={handleFieldChange}
-                  description={
-                    <>Please specify the primary purpose of the funds</>
-                  }
-                  placeholder="Select a Project type"
-                  selectLabel="Project type"
-                />
-
-                {/* short description */}
-                <div className="mt-10 space-y-5">
-                  <Label
-                    htmlFor="shortDescription"
-                    className="font-bold text-lg"
-                  >
-                    Short description
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Textarea id="shortDescription" className="w-96" />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      Could you provide a brief description of your project{" "}
-                      <br /> in one or two sentences?
-                    </span>
-                  </div>
-                </div>
-
-                {/* Pitch deck */}
-                <div className="mt-10 space-y-5">
-                  <Label
-                    htmlFor="projectPitchDeck"
-                    className="font-bold text-lg"
-                  >
-                    Pitch deck
-                  </Label>
-                  <div className="flex space-x-2 w-96">
-                    <Button
-                      type="button"
-                      variant={projectPitch === "text" ? "default" : "outline"}
-                      onClick={() => setProjectPitch("text")}
-                      className="w-32 h-12 text-base"
-                    >
-                      Paste URL
-                    </Button>
-                    <Button
-                      type="button"
-                      variant={projectPitch === "file" ? "default" : "outline"}
-                      onClick={() => setProjectPitch("file")}
-                      className="w-32 h-12 text-base"
-                    >
-                      Upload a file
-                    </Button>
-                  </div>
-                  <div className="flex space-x-5">
-                    <Input
-                      type={projectPitch}
-                      id="projectPitchDeck"
-                      className="w-96"
-                      placeholder="https:// "
-                    />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      Please upload a file or paste a link to your pitch, which
-                      should <br />
-                      cover key aspects of your project: what it will do, what
-                      investors <br /> can expect to gain, and any highlights
-                      that make it stand out.
-                    </span>
-                  </div>
-                </div>
-
-                {/* project logo */}
-                <div className="mt-10 space-y-5">
-                  <Label
-                    htmlFor="projectLogo"
-                    className="font-bold text-lg mt-10"
-                  >
-                    Project logo
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Input
-                      type="file"
-                      id="projectPitchDeck"
-                      className="w-96"
-                      accept="image/*"
-                    />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      Please upload the logo picture that best represents your
-                      project.
-                    </span>
-                  </div>
-                </div>
-
-                {/* Project pictures */}
-                <div className="mt-10 space-y-5">
-                  <Label
-                    htmlFor="projectPicture"
-                    className="font-bold text-lg mt-10"
-                  >
-                    Project pictures
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Input
-                      type="file"
-                      id="projectPicture"
-                      multiple
-                      onChange={handleFileChange}
-                      accept="image/*"
-                      className="w-96"
-                      value={selectedImages.length === 0 ? "" : undefined}
-                    />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      Feel free to upload any additional images that provide{" "}
-                      <br />
-                      further insight into your project.
-                    </span>
-                  </div>
-                  <div className="mt-5 space-y-2 w-96">
-                    {selectedImages.map((image, index) => (
-                      <div
-                        key={index}
-                        className="flex justify-between items-center border p-2 rounded"
-                      >
-                        <span>{image.name}</span>
-                        <Button
-                          variant="outline"
-                          onClick={() => handleRemoveImage(index)}
-                          className="ml-4"
-                        >
-                          Remove
-                        </Button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Minimum Investment */}
-                <div className="space-y-5 mt-10">
-                  <Label htmlFor="minInvest" className="font-bold text-lg">
-                    Minimum investment
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Input
-                      type="number"
-                      id="minInvest"
-                      className="w-96"
-                      placeholder="$   500"
-                      {...registerProject}
-                    />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      This helps set clear expectations for investors
-                    </span>
-                  </div>
-                </div>
-                {/* Target Investment */}
-                <div className="space-y-5 mt-10">
-                  <Label htmlFor="targetInvest" className="font-bold text-lg">
-                    Target investment
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Input
-                      type="number"
-                      id="targetInvest"
-                      className="w-96"
-                      placeholder="$   1,000,000"
-                      {...registerProject}
-                    />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      We encourage you to set a specific target investment{" "}
-                      <br /> amount that reflects your funding goals.
-                    </span>
-                  </div>
-                </div>
-
-                {/* Deadline */}
-                <div className="space-y-5 mt-10">
-                  <Label htmlFor="deadline" className="font-bold text-lg">
-                    Deadline
-                  </Label>
-                  <div className="flex space-x-5">
-                    <Input
-                      type="datetime-local"
-                      id="deadline"
-                      className="w-96"
-                      {...registerProject}
-                    />
-                    <span className="text-[12px] text-neutral-500 self-center">
-                      What is the deadline for your fundraising project? Setting{" "}
-                      <br /> a clear timeline can help motivate potential
-                      investors.
-                    </span>
-                  </div>
+              {/* project's name */}
+              <div className="mt-10 space-y-5">
+                <Label htmlFor="projectName" className="font-bold text-lg">
+                  Project name
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="text"
+                    id="projectName"
+                    className="w-96"
+                    {...registerSecondForm("projectName")}
+                  />
                 </div>
               </div>
-            </form>
+              {errorsProject.projectName && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.projectName.message as string}
+                </p>
+              )}
+
+              {/* project type */}
+              <MultipleOptionSelector
+                header={<>Project type</>}
+                fieldName="projectType"
+                choices={projectType}
+                handleFunction={handleProjectFieldChange}
+                description={
+                  <>Please specify the primary purpose of the funds</>
+                }
+                placeholder="Select a Project type"
+                selectLabel="Project type"
+              />
+              {errorsProject.projectType && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.projectType.message as string}
+                </p>
+              )}
+
+              {/* short description */}
+              <div className="mt-10 space-y-5">
+                <Label htmlFor="shortDescription" className="font-bold text-lg">
+                  Short description
+                </Label>
+                <div className="flex space-x-5">
+                  <Textarea
+                    id="shortDescription"
+                    className="w-96"
+                    {...registerSecondForm("shortDescription")}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Could you provide a brief description of your project <br />{" "}
+                    in one or two sentences?
+                  </span>
+                </div>
+              </div>
+              {errorsProject.shortDescription && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.shortDescription.message as string}
+                </p>
+              )}
+
+              {/* Pitch deck */}
+              <div className="mt-10 space-y-5">
+                <Label htmlFor="projectPitchDeck" className="font-bold text-lg">
+                  Pitch deck
+                </Label>
+                <div className="flex space-x-2 w-96">
+                  <Button
+                    type="button"
+                    variant={projectPitch === "text" ? "default" : "outline"}
+                    onClick={() => setProjectPitch("text")}
+                    className="w-32 h-12 text-base"
+                  >
+                    Paste URL
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={projectPitch === "file" ? "default" : "outline"}
+                    onClick={() => setProjectPitch("file")}
+                    className="w-32 h-12 text-base"
+                  >
+                    Upload a file
+                  </Button>
+                </div>
+                <div className="flex space-x-5">
+                  <Input
+                    type={projectPitch}
+                    id="projectPitchDeck"
+                    className="w-96"
+                    placeholder={
+                      projectPitch === "file"
+                        ? "Upload your Markdown file"
+                        : "https:// "
+                    }
+                    accept={projectPitch === "file" ? ".md" : undefined}
+                    {...registerSecondForm("projectPitchDeck", {
+                      required: true,
+                    })}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Please upload a file or paste a link to your pitch, which
+                    should <br />
+                    cover key aspects of your project: what it will do, what
+                    investors <br /> can expect to gain, and any highlights that
+                    make it stand out.
+                  </span>
+                </div>
+              </div>
+              {errorsProject.projectPitchDeck && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.projectPitchDeck.message as string}
+                </p>
+              )}
+
+              {/* project logo */}
+              <div className="mt-10 space-y-5">
+                <Label
+                  htmlFor="projectLogo"
+                  className="font-bold text-lg mt-10"
+                >
+                  Project logo
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="file"
+                    id="projectLogo"
+                    className="w-96"
+                    accept="image/*"
+                    {...registerSecondForm("projectLogo", { required: true })}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Please upload the logo picture that best represents your
+                    project.
+                  </span>
+                </div>
+              </div>
+              {errorsProject.projectLogo && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.projectLogo.message as string}
+                </p>
+              )}
+
+              {/* Project pictures */}
+              <div className="mt-10 space-y-5">
+                <Label
+                  htmlFor="projectPicture"
+                  className="font-bold text-lg mt-10"
+                >
+                  Project pictures
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="file"
+                    id="projectPicture"
+                    multiple
+                    accept="image/*"
+                    className="w-96"
+                    value={selectedImages.length === 0 ? "" : undefined}
+                    {...registerSecondForm("projectPhotos", {
+                      required: true,
+                      onChange: (e) => handleFileChange(e),
+                    })}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Feel free to upload any additional images that provide{" "}
+                    <br />
+                    further insight into your project.
+                  </span>
+                </div>
+                <div className="mt-5 space-y-2 w-96">
+                  {selectedImages.map((image, index) => (
+                    <div
+                      key={index}
+                      className="flex justify-between items-center border p-2 rounded"
+                    >
+                      <span>{image.name}</span>
+                      <Button
+                        variant="outline"
+                        onClick={() => handleRemoveImage(index)}
+                        className="ml-4"
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {errorsProject.projectPhotos && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.projectPhotos.message as string}
+                </p>
+              )}
+
+              {/* Minimum Investment */}
+              <div className="space-y-5 mt-10">
+                <Label htmlFor="minInvest" className="font-bold text-lg">
+                  Minimum investment
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="number"
+                    id="minInvest"
+                    className="w-96"
+                    placeholder="$   500"
+                    {...registerSecondForm("minInvest", {
+                      valueAsNumber: true,
+                    })}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    This helps set clear expectations for investors
+                  </span>
+                </div>
+              </div>
+              {errorsProject.minInvest && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.minInvest.message as string}
+                </p>
+              )}
+
+              {/* Target Investment */}
+              <div className="space-y-5 mt-10">
+                <Label htmlFor="targetInvest" className="font-bold text-lg">
+                  Target investment
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="number"
+                    id="targetInvest"
+                    className="w-96"
+                    placeholder="$   1,000,000"
+                    {...registerSecondForm("targetInvest", {
+                      valueAsNumber: true,
+                    })}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    We encourage you to set a specific target investment <br />{" "}
+                    amount that reflects your funding goals.
+                  </span>
+                </div>
+              </div>
+              {errorsProject.targetInvest && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.targetInvest.message as string}
+                </p>
+              )}
+
+              {/* Deadline */}
+              <div className="space-y-5 mt-10">
+                <Label htmlFor="deadline" className="font-bold text-lg">
+                  Deadline
+                </Label>
+                <div className="flex space-x-5">
+                  <Input
+                    type="datetime-local"
+                    id="deadline"
+                    className="w-96"
+                    {...registerSecondForm("deadline")}
+                  />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    What is the deadline for your fundraising project? Setting{" "}
+                    <br /> a clear timeline can help motivate potential
+                    investors.
+                  </span>
+                </div>
+              </div>
+              {errorsProject.deadline && (
+                <p className="text-red-500 text-sm">
+                  {errorsProject.deadline.message as string}
+                </p>
+              )}
+            </div>
           </div>
         )}
         {/* Submit */}

From 9675a1c4913f400532fe57fc008a480d6addc9fe Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sun, 13 Oct 2024 21:57:12 +0700
Subject: [PATCH 19/19] Refactor Apply page component to adjust left margin for
 company information section and simplify pitchDeckSchema validation

---
 src/app/business/apply/page.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index f423147..3faf2f2 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -41,12 +41,14 @@ export default function Apply() {
       }),
     projectPitchDeck: pitchDeckSchema,
     projectLogo: z
-      .any()
-      .refine((file) => file?.size <= MAX_FILE_SIZE, `Max image size is 5MB.`)
-      .refine(
-        (file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),
-        "Only .jpg, .jpeg, and .png formats are supported."
-      ),
+      .instanceof(File)
+      .refine((file) => ACCEPTED_IMAGE_TYPES.includes(file.type), {
+        message: "Only .jpg, .jpeg, and .png formats are supported.",
+      })
+      .refine((file) => file.size <= MAX_FILE_SIZE, {
+        message: "Max image size is 5MB.",
+      }),
+
     projectPhotos: z
       .array(
         z.object({