Merge branch 'front-end' into back-end

package-lock.json

@@ -47,6 +47,7 @@
         "react-markdown": "^9.0.1",
         "recharts": "^2.12.7",
         "stripe": "^17.1.0",
+        "sweetalert2": "^11.14.3",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.23.8"
@@ -59,6 +60,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-select-country-list": "^2.2.3",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
         "postcss": "^8",
@@ -2320,6 +2322,12 @@
         "@types/webpack": "^4"
       }
     },
+    "node_modules/@types/react-select-country-list": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-select-country-list/-/react-select-country-list-2.2.3.tgz",
+      "integrity": "sha512-nffcYOwuun+5B0EWqubK+amHpPdK9Xj20xkLYNqYrzmESd8FnpLwHsS79ClLAWA9y+icVA8gWPkbwBp1gpjSwA==",
+      "dev": true
+    },
     "node_modules/@types/source-list-map": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",
@@ -8065,6 +8073,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.3.tgz",
+      "integrity": "sha512-6NuBHWJCv2gtw4y8PUXLB41hty+V6U2mKZMAvydL1IRPcORR0yuyq3cjFD/+ByrCk3muEFggbZX/x6HwmbVfbA==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",

package.json

@@ -48,6 +48,7 @@
     "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",
     "stripe": "^17.1.0",
+    "sweetalert2": "^11.14.3",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
@@ -60,6 +61,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-select-country-list": "^2.2.3",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",

src/app/project/apply/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { useState } from "react";
+import ProjectForm from "@/components/ProjectForm";
+import { projectFormSchema } from "@/types/schemas/application.schema";
+import { z } from "zod";
+import { SubmitHandler } from "react-hook-form";
+
+type projectSchema = z.infer<typeof projectFormSchema>;
+export default function ApplyProject() {
+  const [projectType, setProjectType] = useState<string[]>([]);
+  const [projectPitch, setProjectPitch] = useState("text");
+  const [applyProject, setApplyProject] = useState(false);
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
+  const [projectPitchFile, setProjectPitchFile] = useState("");
+
+  const onSubmit: SubmitHandler<projectSchema> = async (data) => {
+    alert("มาแน้ววว");
+    console.table(data);
+  };
+  return (
+    <div>
+      <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
+        <ProjectForm onSubmit={onSubmit} />
+      </div>
+    </div>
+  );
+}

src/components/BusinessForm.tsx

@@ -1,298 +1,497 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
-import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import {
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { format } from "path";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
-const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> }) => {
+interface BusinessFormProps {
-  const communitySize = ["N/A", "0-5K", "5-10K", "10-20K", "20-50K", "50-100K", "100K+"];
+  applyProject: boolean;
-
+  setApplyProject: Function;
-  const form = useForm<z.infer<typeof businessFormSchema>>({
+  onSubmit: SubmitHandler<businessSchema>;
+}
+const BusinessForm = ({
+  applyProject,
+  setApplyProject,
+  onSubmit,
+}: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
+  const communitySize = [
+    { id: 1, name: "N/A" },
+    { id: 2, name: "0-5K" },
+    { id: 3, name: "5-10K" },
+    { id: 4, name: "10-20K" },
+    { id: 5, name: "20-50K" },
+    { id: 6, name: "50-100K" },
+    { id: 7, name: "100K+" },
+  ];
+  const form = useForm<businessSchema>({
     resolver: zodResolver(businessFormSchema),
     defaultValues: {},
   });
+  let supabase = createSupabaseClient();
+  const [businessPitch, setBusinessPitch] = useState("text");
+  const [businessPitchFile, setBusinessPitchFile] = useState("");
+  const [countries, setCountries] = useState<{ id: number; name: string }[]>(
+    []
+  );
+  const [industry, setIndustry] = useState<{ id: number; name: string }[]>([]);
+  const fetchIndustry = async () => {
+    let { data: BusinessType, error } = await supabase
+      .from("business_type")
+      .select("id, value");
 
-  const handleBusinessFieldChange = (fieldName: string, value: any) => {
+    if (error) {
-    switch (fieldName) {
+      console.error(error);
-      case "isInUS":
+    } else {
-        setIsInUS(value);
+      if (BusinessType) {
-        break;
+        // console.table();
-      case "isForSale":
+        setIndustry(
-        setIsForSale(value);
+          BusinessType.map((item) => ({
-        break;
+            id: item.id,
-      case "isGenerating":
+            name: item.value,
-        setIsGenerating(value);
+          }))
-        break;
+        );
+      }
     }
-    setValueBusiness(fieldName, value);
   };
+  const fetchCountries = async () => {
+    try {
+      const response = await fetch("https://restcountries.com/v3.1/all");
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const data = await response.json();
+      const countryList = data.map(
+        (country: { name: { common: string } }, index: number) => ({
+          id: index + 1,
+          name: country.name.common,
+        })
+      );
 
+      setCountries(
+        countryList.sort((a: { name: string }, b: { name: any }) =>
+          a.name.localeCompare(b.name)
+        )
+      );
+    } catch (error) {
+      console.error("Error fetching countries:", error);
+    }
+  };
+  useEffect(() => {
+    fetchCountries();
+    fetchIndustry();
+  }, []);
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form
-        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
+        onSubmit={form.handleSubmit(onSubmit as SubmitHandler<businessSchema>)}
+        className="space-y-8"
+      >
+        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 md:ml-[0%] ">
           <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 information in this section is required.
+            <span className="text-red-500 font-bold">**</span>All requested
+            information in this section is required.
           </p>
-
+          <div className="ml-96 mt-5 space-y-10">
-          {/* Company Name */}
+            {/* Company Name */}
-          <FormField
+            <FormField
-            control={form.control}
+              control={form.control}
-            name="companyName"
+              name="companyName"
-            render={({ field }) => (
+              render={({ field }: { field: any }) => (
-              <FormItem>
+                <FormItem>
-                <FormLabel>Company name</FormLabel>
+                  <FormLabel className="font-bold text-lg">
-                <FormControl>
+                    Company name
-                  <Input placeholder="Your company name" {...field} />
+                  </FormLabel>
-                </FormControl>
+                  <FormControl>
-                <FormDescription>
+                    <div className="mt-10 space-y-5">
-                  This should be the name your company uses on your website and in the market.
+                      <div className="flex space-x-5">
-                </FormDescription>
+                        <Input
-                <FormMessage />
+                          type="text"
-              </FormItem>
+                          id="companyName"
-            )}
+                          className="w-96"
-          />
+                          {...field}
-
+                        />
-          {/* Industry */}
+                        <span className="text-[12px] text-neutral-500 self-center">
-          <FormField
+                          This should be the name your company uses on your{" "}
-            control={form.control}
+                          <br />
-            name="industry"
+                          website and in the market.
-            render={({ field }) => (
+                        </span>
-              <FormItem>
+                      </div>
-                <FormLabel>Industry</FormLabel>
-                <FormControl>
-                  <MultipleOptionSelector
-                    header={<>Industry</>}
-                    fieldName="industry"
-                    choices={industry}
-                    handleFunction={handleBusinessFieldChange}
-                    description={<>Choose the industry that best aligns with your business.</>}
-                    placeholder="Select an industry"
-                    selectLabel="Industry"
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Raised Money */}
-          <FormField
-            control={form.control}
-            name="totalRaised"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>How much money has your company raised to date?</FormLabel>
-                <FormControl>
-                  <Input type="number" placeholder="$ 1,000,000" {...field} />
-                </FormControl>
-                <FormDescription>
-                  The sum total of past financing, including angel or venture capital, loans, grants, or token sales.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Incorporated in US */}
-          <FormField
-            control={form.control}
-            name="isInUS"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Is your company incorporated in the United States?</FormLabel>
-                <FormControl>
-                  <DualOptionSelector
-                    label={<>Is your company incorporated in the United States?</>}
-                    name="isInUS"
-                    choice1="Yes"
-                    choice2="No"
-                    handleFunction={handleBusinessFieldChange}
-                    description={
-                      <>Only companies that are incorporated or formed in the US are eligible to raise via Reg CF.</>
-                    }
-                    value={isInUS}
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Product for Sale */}
-          <FormField
-            control={form.control}
-            name="isForSale"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Is your product available (for sale) in market?</FormLabel>
-                <FormControl>
-                  <DualOptionSelector
-                    label={<>Is your product available (for sale) in market?</>}
-                    name="isForSale"
-                    choice1="Yes"
-                    choice2="No"
-                    handleFunction={handleBusinessFieldChange}
-                    description={<>Only check this box if customers can access, use, or buy your product today.</>}
-                    value={isForSale}
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Generating Revenue */}
-          <FormField
-            control={form.control}
-            name="isGenerating"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Is your company generating revenue?</FormLabel>
-                <FormControl>
-                  <DualOptionSelector
-                    label={<>Is your company generating revenue?</>}
-                    name="isGenerating"
-                    choice1="Yes"
-                    choice2="No"
-                    handleFunction={handleBusinessFieldChange}
-                    description={
-                      <>Only check this box if your company is making money. Please elaborate on revenue below.</>
-                    }
-                    value={isGenerating}
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Pitch Deck */}
-          <FormField
-            control={form.control}
-            name="businessPitchDeck"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Pitch deck</FormLabel>
-                <FormControl>
-                  <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">
-                      Paste URL
-                    </Button>
-                    <Button
-                      type="button"
-                      variant={businessPitch === "file" ? "default" : "outline"}
-                      onClick={() => setBusinessPitch("file")}
-                      className="w-32 h-12 text-base">
-                      Upload a file
-                    </Button>
-                  </div>
-                  <Input
-                    type={businessPitch === "file" ? "file" : "text"}
-                    placeholder={businessPitch === "file" ? "Upload your Markdown file" : "https:// "}
-                    accept={businessPitch === "file" ? ".md" : undefined}
-                    {...field}
-                  />
-                  {businessPitchFile && (
-                    <div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
-                      <span>1. {businessPitchFile}</span>
-                      <Button
-                        className="ml-4"
-                        onClick={() => {
-                          setValueBusiness("businessPitchDeck", null);
-                          setBusinessPitchFile("");
-                        }}>
-                        Remove
-                      </Button>
                     </div>
-                  )}
+                  </FormControl>
-                </FormControl>
+                  <FormMessage />
-                <FormMessage />
+                </FormItem>
-              </FormItem>
+              )}
-            )}
+            />
-          />
+            {/* Country */}
+            <FormField
+              control={form.control}
+              name="country"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>Country</>}
+                      fieldName="country"
+                      choices={countries}
+                      handleFunction={(selectedValues: any) => {
+                        // console.log("Country selected: " + selectedValues.name);
+                        field.onChange(selectedValues.name);
+                      }}
+                      description={
+                        <>Select the country where your business is based.</>
+                      }
+                      placeholder="Select a country"
+                      selectLabel="Country"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          {/* Community Size */}
+            {/* Industry */}
-          <FormField
+            <FormField
-            control={form.control}
+              control={form.control}
-            name="communitySize"
+              name="industry"
-            render={({ field }) => (
+              render={({ field }: { field: any }) => (
-              <FormItem>
+                <FormItem>
-                <FormLabel>What's the rough size of your community?</FormLabel>
+                  <FormControl>
-                <FormControl>
+                    <MultipleOptionSelector
-                  <MultipleOptionSelector
+                      header={<>Industry</>}
-                    header={<>What's the rough size of your community?</>}
+                      fieldName="industry"
-                    fieldName="communitySize"
+                      choices={industry}
-                    choices={communitySize}
+                      handleFunction={(selectedValues: any) => {
-                    handleFunction={handleBusinessFieldChange}
+                        // console.log("Type of selected value:", selectedValues.id);
-                    description={
+                        field.onChange(selectedValues.id);
-                      <>Include your email list, social media following (e.g., Instagram, Discord, Twitter).</>
+                      }}
-                    }
+                      description={
-                    placeholder="Select"
+                        <>
-                    selectLabel="Select"
+                          Choose the industry that best aligns with your
-                    {...field}
+                          business.
-                  />
+                        </>
-                </FormControl>
+                      }
-                <FormMessage />
+                      placeholder="Select an industry"
-              </FormItem>
+                      selectLabel="Industry"
-            )}
+                    />
-          />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          {/* Apply for First Fundraising Project */}
+            {/* Raised Money */}
-          <FormField
+            <FormField
-            control={form.control}
+              control={form.control}
-            name="applyProject"
+              name="totalRaised"
-            render={({ field }) => (
+              render={({ field }) => (
-              <FormItem>
+                <FormItem>
-                <FormControl>
+                  <div className="mt-10 space-y-5">
-                  <div className="flex space-x-5">
+                    <Label htmlFor="totalRaised" className="font-bold text-lg">
-                    <Switch onCheckedChange={() => setApplyProject(!applyProject)} {...field} />
+                      How much money has your company <br /> raised to date?
-                    <TooltipProvider>
+                    </Label>
-                      <Tooltip>
+                    <FormControl>
-                        <TooltipTrigger asChild>
+                      <div className="flex space-x-5">
-                          <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
+                        <Input
-                            Would you like to apply for your first fundraising project as well?
+                          type="number"
-                          </span>
+                          id="totalRaised"
-                        </TooltipTrigger>
+                          className="w-96"
-                        <TooltipContent>
+                          placeholder="$   1,000,000"
-                          <p className="text-[11px]">
+                          {...field}
-                            Toggling this option allows you to begin your first project, which is crucial for unlocking
+                          onChange={(e) => {
-                            fundraising tools.
+                            const value = e.target.value;
-                          </p>
+                            field.onChange(value ? parseFloat(value) : null);
-                        </TooltipContent>
+                          }}
-                      </Tooltip>
+                          value={field.value}
-                    </TooltipProvider>
+                        />
+                        <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>
+                    </FormControl>
+                    <FormMessage />
                   </div>
-                </FormControl>
+                </FormItem>
-                <FormMessage />
+              )}
-              </FormItem>
+            />
-            )}
-          />
 
-          {/* Submit Button */}
+            {/* Incorporated in US */}
-          <Button type="submit" onClick={handleSubmit(onSubmit)} className="w-52 ml-[45%] my-10">
+            <FormField
-            Continue
+              control={form.control}
-          </Button>
+              name="isInUS"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <DualOptionSelector
+                        name="isInUS"
+                        label={
+                          <>
+                            Is your company incorporated in the United States?
+                          </>
+                        }
+                        choice1="Yes"
+                        choice2="No"
+                        handleFunction={(selectedValues: string) => {
+                          // setIsInUS;
+                          field.onChange(selectedValues);
+                        }}
+                        description={<></>}
+                        value={field.value}
+                      />
+                      <span className="text-[12px] text-neutral-500 self-center">
+                        Only companies that are incorporated or formed in the US
+                        are eligible to raise via Reg CF.
+                      </span>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Product for Sale */}
+            <FormField
+              control={form.control}
+              name="isForSale"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <DualOptionSelector
+                        name="isForSale"
+                        value={field.value}
+                        label={
+                          <>Is your product available (for sale) in market?</>
+                        }
+                        choice1="Yes"
+                        choice2="No"
+                        handleFunction={(selectedValues: string) => {
+                          // setIsForSale;
+                          field.onChange(selectedValues);
+                        }}
+                        description={
+                          <>
+                            Only check this box if customers can access, use, or
+                            buy your product today.
+                          </>
+                        }
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Generating Revenue */}
+            <FormField
+              control={form.control}
+              name="isGenerating"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <DualOptionSelector
+                        name="isGenerating"
+                        label={<>Is your company generating revenue?</>}
+                        choice1="Yes"
+                        choice2="No"
+                        value={field.value}
+                        handleFunction={(selectedValues: string) => {
+                          field.onChange(selectedValues);
+                        }}
+                        description={
+                          <>
+                            Only check this box if your company is making money.
+                            Please elaborate on revenue below.
+                          </>
+                        }
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Pitch Deck */}
+            <FormField
+              control={form.control}
+              name="businessPitchDeck"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="space-y-5 mt-10">
+                    <Label htmlFor="pitchDeck" className="font-bold text-lg">
+                      Pitch deck
+                    </Label>
+                    <FormControl>
+                      <div>
+                        <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"
+                          >
+                            Paste URL
+                          </Button>
+                          <Button
+                            type="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 === "file" ? "file" : "text"}
+                            placeholder={
+                              businessPitch === "file"
+                                ? "Upload your Markdown file"
+                                : "https:// "
+                            }
+                            accept={
+                              businessPitch === "file" ? ".md" : undefined
+                            }
+                            onChange={(e) => {
+                              const value = e.target;
+                              if (businessPitch === "file") {
+                                const file = value.files?.[0];
+                                field.onChange(file || "");
+                              } else {
+                                field.onChange(value.value);
+                              }
+                            }}
+                            className="w-96 mt-5"
+                          />
+
+                          <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.
+                            <br />
+                            <p className="text-red-500">
+                              ** support only markdown(.md) format
+                            </p>
+                          </span>
+                        </div>
+                        {businessPitchFile && (
+                          <div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
+                            <span>1. {businessPitchFile}</span>
+                            <Button
+                              className="ml-4"
+                              onClick={() => {
+                                setBusinessPitchFile("");
+                              }}
+                            >
+                              Remove
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            {/* Community Size */}
+            <FormField
+              control={form.control}
+              name="communitySize"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>What's the rough size of your community?</>}
+                      fieldName="communitySize"
+                      choices={communitySize}
+                      handleFunction={(selectedValues: any) => {
+                        field.onChange(selectedValues.name);
+                      }}
+                      description={
+                        <>
+                          Include your email list, social media following (e.g.,
+                          Instagram, Discord, Twitter).
+                        </>
+                      }
+                      placeholder="Select"
+                      selectLabel="Select"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex space-x-5">
+              <Switch
+                onCheckedChange={() => setApplyProject(!applyProject)}
+              ></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>
+            <center>
+              <Button
+                className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+                type="submit"
+              >
+                Submit application
+              </Button>
+            </center>
+          </div>
         </div>
       </form>
     </Form>

src/components/ProjectForm.tsx

@@ -0,0 +1,464 @@
+import { useEffect, useState } from "react";
+import { SubmitHandler, useForm, ControllerRenderProps } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { MultipleOptionSelector } from "@/components/multipleSelector";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { projectFormSchema } from "@/types/schemas/application.schema";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Label } from "@/components/ui/label";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { Textarea } from "./ui/textarea";
+
+type projectSchema = z.infer<typeof projectFormSchema>;
+type FieldType = ControllerRenderProps<any, "projectPhotos">;
+
+interface ProjectFormProps {
+  onSubmit: SubmitHandler<projectSchema>;
+}
+const ProjectForm = ({
+  onSubmit,
+}: ProjectFormProps & { onSubmit: SubmitHandler<projectSchema> }) => {
+  const form = useForm<projectSchema>({
+    resolver: zodResolver(projectFormSchema),
+    defaultValues: {},
+  });
+  let supabase = createSupabaseClient();
+  const [projectType, setProjectType] = useState<
+    { id: number; name: string }[]
+  >([]);
+  const [projectPitch, setProjectPitch] = useState("text");
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
+  const [projectPitchFile, setProjectPitchFile] = useState("");
+
+  const handleFileChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    field: FieldType
+  ) => {
+    if (event.target.files) {
+      const filesArray = Array.from(event.target.files);
+      console.log("first file", filesArray);
+      setSelectedImages((prevImages) => {
+        const updatedImages = [...prevImages, ...filesArray];
+        console.log("Updated Images Array:", updatedImages);
+        field.onChange(updatedImages);
+        return updatedImages;
+      });
+    }
+  };
+
+  const handleRemoveImage = (index: number, field: FieldType) => {
+    setSelectedImages((prevImages) => {
+      const updatedImages = prevImages.filter((_, i) => i !== index);
+      console.log("After removal - Updated Images:", updatedImages);
+      field.onChange(updatedImages);
+
+      return updatedImages;
+    });
+  };
+
+  const fetchProjectType = async () => {
+    let { data: ProjectType, error } = await supabase
+      .from("project_type")
+      .select("id, value");
+
+    if (error) {
+      console.error(error);
+    } else {
+      if (ProjectType) {
+        setProjectType(
+          ProjectType.map((item) => ({
+            id: item.id,
+            name: item.value,
+          }))
+        );
+      }
+    }
+  };
+  useEffect(() => {
+    fetchProjectType();
+  }, []);
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit as SubmitHandler<projectSchema>)}
+        className="space-y-8"
+      >
+        <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>
+        <div className="ml-96 mt-5 space-y-10">
+          {/* project name */}
+          <FormField
+            control={form.control}
+            name="projectName"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <div className="mt-10 space-y-5">
+                  <FormLabel className="font-bold text-lg">
+                    Project name
+                  </FormLabel>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <Input
+                        type="text"
+                        id="projectName"
+                        className="w-96"
+                        {...field}
+                      />
+                    </div>
+                  </FormControl>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* project type */}
+          <FormField
+            control={form.control}
+            name="projectType"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <FormControl>
+                  <MultipleOptionSelector
+                    header={<>Project type</>}
+                    fieldName="projectType"
+                    choices={projectType}
+                    handleFunction={(selectedValues: any) => {
+                      field.onChange(selectedValues.name);
+                    }}
+                    description={
+                      <>Please specify the primary purpose of the funds</>
+                    }
+                    placeholder="Select a Project type"
+                    selectLabel="Project type"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* short description */}
+          <FormField
+            control={form.control}
+            name="shortDescription"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <FormControl>
+                  <div className="mt-10 space-y-5">
+                    <FormLabel className="font-bold text-lg">
+                      Short description
+                    </FormLabel>
+                    <div className="flex space-x-5">
+                      <Textarea
+                        id="shortDescription"
+                        className="w-96"
+                        {...field}
+                      />
+                      <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>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Pitch Deck */}
+          <FormField
+            control={form.control}
+            name="projectPitchDeck"
+            render={({ field }) => (
+              <FormItem>
+                <div className="space-y-5 mt-10">
+                  <Label htmlFor="pitchDeck" className="font-bold text-lg">
+                    Pitch deck
+                  </Label>
+                  <FormControl>
+                    <div>
+                      <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 === "file" ? "file" : "text"}
+                          placeholder={
+                            projectPitch === "file"
+                              ? "Upload your Markdown file"
+                              : "https:// "
+                          }
+                          accept={projectPitch === "file" ? ".md" : undefined}
+                          onChange={(e) => {
+                            const value = e.target;
+                            if (projectPitch === "file") {
+                              const file = value.files?.[0];
+                              field.onChange(file || "");
+                            } else {
+                              field.onChange(value.value);
+                            }
+                          }}
+                          className="w-96 mt-5"
+                        />
+
+                        <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>
+                      {projectPitchFile && (
+                        <div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
+                          <span>1. {projectPitchFile}</span>
+                          <Button
+                            className="ml-4"
+                            onClick={() => {
+                              setProjectPitchFile("");
+                            }}
+                          >
+                            Remove
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </div>
+              </FormItem>
+            )}
+          />
+
+          {/* project logo */}
+          <FormField
+            control={form.control}
+            name="projectLogo"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <FormControl>
+                  <div className="mt-10 space-y-5">
+                    <FormLabel className="font-bold text-lg mt-10">
+                      Project logo
+                    </FormLabel>
+                    <Input
+                      type="file"
+                      id="projectLogo"
+                      className="w-96"
+                      accept="image/*"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        field.onChange(file || "");
+                      }}
+                    />
+                    <span className="text-[12px] text-neutral-500 self-center">
+                      Please upload the logo picture that best represents your
+                      project.
+                    </span>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* project photos */}
+          <FormField
+            control={form.control}
+            name="projectPhotos"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <FormControl>
+                  <div className="mt-10 space-y-5">
+                    <FormLabel className="font-bold text-lg mt-10">
+                      Project photos
+                    </FormLabel>
+                    <div className="flex space-x-5">
+                      <Input
+                        type="file"
+                        id="projectPhotos"
+                        multiple
+                        accept="image/*"
+                        className="w-96"
+                        onChange={(event) => {
+                          handleFileChange(event, field);
+                        }}
+                      />
+                      <span className="text-[12px] text-neutral-500 self-center">
+                        Please upload the logo picture that best represents 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, field)}
+                            className="ml-4"
+                            type="reset"
+                          >
+                            Remove
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Minimum investment */}
+          <FormField
+            control={form.control}
+            name="minInvest"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <div className="mt-10 space-y-5">
+                  <FormLabel className="font-bold text-lg">
+                    Minimum investment
+                  </FormLabel>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <Input
+                        type="number"
+                        id="minInvest"
+                        placeholder="$   500"
+                        className="w-96"
+                        {...field}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          field.onChange(value ? parseFloat(value) : null);
+                        }}
+                        value={field.value}
+                      />
+                      <span className="text-[12px] text-neutral-500 self-center">
+                        This helps set clear expectations for investors
+                      </span>
+                    </div>
+                  </FormControl>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* Target investment */}
+          <FormField
+            control={form.control}
+            name="targetInvest"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <div className="mt-10 space-y-5">
+                  <FormLabel className="font-bold text-lg">
+                    Target investment
+                  </FormLabel>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <Input
+                        type="number"
+                        id="targetInvest"
+                        className="w-96"
+                        placeholder="$   1,000,000"
+                        {...field}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          field.onChange(value ? parseFloat(value) : null);
+                        }}
+                        value={field.value}
+                      />
+                      <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>
+                  </FormControl>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* Deadline */}
+          <FormField
+            control={form.control}
+            name="deadline"
+            render={({ field }: { field: any }) => (
+              <FormItem>
+                <div className="mt-10 space-y-5">
+                  <FormLabel className="font-bold text-lg">Deadline</FormLabel>
+                  <FormControl>
+                    <div className="flex space-x-5">
+                      <Input
+                        type="datetime-local"
+                        id="deadline"
+                        className="w-96"
+                        {...field}
+                      />
+                      <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>
+                  </FormControl>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <center>
+            <Button
+              className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+              type="submit"
+            >
+              Submit application
+            </Button>
+          </center>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default ProjectForm;

src/components/dualSelector.tsx

@@ -14,7 +14,7 @@ interface SelectorInterface {
 
 export function DualOptionSelector(props: SelectorInterface) {
   return (
-    <div className="space-y-5">
+    <div className="space-y-5 mt-10">
       <Label htmlFor={props.name} className="font-bold text-lg">
         {props.label}
       </Label>
@@ -23,7 +23,7 @@ export function DualOptionSelector(props: SelectorInterface) {
           <Button
             type="button"
             variant={props.value === props.choice1 ? "default" : "outline"}
-            onClick={() => props.handleFunction(props.name, props.choice1)}
+            onClick={() => props.handleFunction(props.choice1)}
             className="w-20 h-12 text-base"
           >
             {props.choice1}
@@ -31,7 +31,7 @@ export function DualOptionSelector(props: SelectorInterface) {
           <Button
             type="button"
             variant={props.value === props.choice2 ? "default" : "outline"}
-            onClick={() => props.handleFunction(props.name, props.choice2)}
+            onClick={() => props.handleFunction(props.choice2)}
             className="w-20 h-12 text-base"
           >
             {props.choice2}

src/components/multipleSelector.tsx

@@ -8,19 +8,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
 
-interface MultipleOptionSelector {
+interface MultipleOptionSelectorProps {
   header: ReactElement;
   fieldName: string;
-  choices: string[];
+  choices: { id: number; name: string }[];
-  handleFunction: Function;
+  handleFunction: Function | null;
   description: ReactElement;
   placeholder: string;
   selectLabel: string;
 }
 
-export function MultipleOptionSelector(props: MultipleOptionSelector) {
+export function MultipleOptionSelector(props: MultipleOptionSelectorProps) {
+  const [value, setValue] = useState("");
   return (
     <div className="mt-10 space-y-5">
       <Label htmlFor={props.fieldName} className="font-bold text-lg mt-10">
@@ -28,9 +29,15 @@ export function MultipleOptionSelector(props: MultipleOptionSelector) {
       </Label>
       <div className="flex space-x-5">
         <Select
-          onValueChange={(value) => {
+          value={value}
-            props.handleFunction(props.fieldName, value);
+          onValueChange={(id) => {
-            // console.log(value, props.fieldName);
+            setValue(id);
+            const selectedChoice = props.choices.find(
+              (choice) => choice.id.toString() === id
+            ); 
+            if (selectedChoice && props.handleFunction) {
+              props.handleFunction(selectedChoice);
+            }
           }}
         >
           <SelectTrigger className="w-96">
@@ -40,8 +47,8 @@ export function MultipleOptionSelector(props: MultipleOptionSelector) {
             <SelectGroup>
               <SelectLabel>{props.selectLabel}</SelectLabel>
               {props.choices.map((i) => (
-                <SelectItem key={i} value={i}>
+                <SelectItem key={i.id} value={i.id.toString()}>
-                  {i}
+                  {i.name}
                 </SelectItem>
               ))}
             </SelectGroup>

src/components/ui/form.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/types/schemas/application.schema.ts

@@ -3,140 +3,157 @@ import { z } from "zod";
 const MAX_FILE_SIZE = 500000;
 const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
 
-const imageSchema = z.custom<File>(
+const imageSchema = z
+  .custom<File>(
     (val) => val && typeof val === "object" && "size" in val && "type" in val,
     {
-        message: "Input must be a file.",
+      message: "Input must be a file.",
-    },
+    }
-).refine((file) => file.size < MAX_FILE_SIZE, {
+  )
+  .refine((file) => file.size < MAX_FILE_SIZE, {
     message: "File can't be bigger than 5MB.",
-}).refine((file) => ACCEPTED_IMAGE_TYPES.includes(file.type), {
+  })
+  .refine((file) => ACCEPTED_IMAGE_TYPES.includes(file.type), {
     message: "File format must be either jpg, jpeg, or png.",
-});
+  });
 
 const projectFormSchema = z.object({
-    projectName: z.string().min(5, {
+  projectName: z.string().min(5, {
-        message: "Project name must be at least 5 characters.",
+    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(10, {
+      message: "Short description must be at least 10 characters.",
     }),
-    projectType: z.string({
+  projectPitchDeck: z.union([
-        required_error: "Please select one of the option",
+    z
+      .string()
+      .url("Pitch deck must be a valid URL.")
+      .refine((url) => url.endsWith(".md"), {
+        message: "Pitch deck URL must link to a markdown file (.md).",
+      }),
+    z
+      .custom<File>((val) => val instanceof File, {
+        message: "Input must be a file.",
+      })
+      .refine((file) => file.size < MAX_FILE_SIZE, {
+        message: "File can't be bigger than 5MB.",
+      })
+      .refine((file) => file.name.endsWith(".md"), {
+        message: "File must be a markdown file (.md).",
+      }),
+  ]),
+  projectLogo: imageSchema,
+  projectPhotos: z.custom(
+    (value) => {
+      if (value instanceof FileList || Array.isArray(value)) {
+        return (
+          value.length > 0 &&
+          Array.from(value).every((item) => item instanceof File)
+        );
+      }
+      return false;
+    },
+    {
+      message:
+        "Must be a FileList or an array of File objects with at least one file.",
+    }
+  ),
+
+  minInvest: z
+    .number({
+      required_error: "Minimum investment must be a number.",
+      invalid_type_error: "Minimum investment must be a valid number.",
+    })
+    .positive()
+    .max(9999999999, "Minimum investment must be a realistic amount."),
+  targetInvest: z
+    .number({
+      required_error: "Target investment must be a number.",
+      invalid_type_error: "Target investment must be a valid number.",
+    })
+    .positive()
+    .max(9999999999, "Target investment 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.",
     }),
-    shortDescription: z.string({
-        required_error: "Please provide a brief description for your project",
-    }).min(10, {
-        message: "Short description must be at least 10 characters.",
-    }),
-    projectPitchDeck: z.union([
-        z.string().url("Pitch deck must be a valid URL.").refine(
-            (url) => url.endsWith(".md"),
-            {
-                message: "Pitch deck URL must link to a markdown file (.md).",
-            },
-        ),
-        z.custom<File>(
-            (val) => val instanceof File,
-            {
-                message: "Input must be a file.",
-            },
-        ).refine((file) => file.size < MAX_FILE_SIZE, {
-            message: "File can't be bigger than 5MB.",
-        }).refine((file) => file.name.endsWith(".md"), {
-            message: "File must be a markdown file (.md).",
-        }),
-    ]),
-    projectLogo: imageSchema,
-    projectPhotos: z.custom(
-        (value) => {
-            if (value instanceof FileList || Array.isArray(value)) {
-                if (value.length === 1) {
-                    return false;
-                }
-                return Array.from(value).every((item) => item instanceof File);
-            }
-            return false;
-        },
-        {
-            message:
-                "Must be a FileList or an array of File objects with at least one file.",
-        },
-    ),
-    minInvest: z.number({
-        required_error: "Minimum investment must be a number.",
-        invalid_type_error: "Minimum investment must be a valid number.",
-    }).positive().max(
-        9999999999,
-        "Minimum investment must be a realistic amount.",
-    ),
-    targetInvest: z.number({
-        required_error: "Target investment must be a number.",
-        invalid_type_error: "Target investment must be a valid number.",
-    }).positive().max(
-        9999999999,
-        "Target investment 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, {
+  companyName: z.string().min(5, {
-        message: "Company name must be at least 5 characters.",
+    message: "Company name must be at least 5 characters.",
-    }),
+  }),
-    industry: z.string({
+  industry: z.number({
-        required_error: "Please select one of the option",
+    required_error: "Please select one of the option",
-    }),
+  }),
-    isInUS: z.string({
+  isInUS: z
-        required_error: "Please select either 'Yes' or 'No'.",
+    .string({
+      required_error: "Please select either 'Yes' or 'No'.",
     })
-        .transform((val) => val.toLowerCase())
+    .transform((val) => val.toLowerCase())
-        .refine((val) => val === "yes" || val === "no", {
+    .refine((val) => val === "yes" || val === "no", {
-            message: "Please select either 'Yes' or '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.",
-        invalid_type_error: "Total raised must be a valid number.",
-    }).positive().max(9999999999, "Total raised must be a realistic amount."),
-    communitySize: z.string({
-        required_error: "Please select one of the option",
     }),
-    businessPitchDeck: z.union([
+  isForSale: z
-        z.string().url("Pitch deck must be a valid URL.").refine(
+    .string({
-            (url) => url.endsWith(".md"),
+      required_error: "Please select either 'Yes' or 'No'.",
-            {
+    })
-                message: "Pitch deck URL must link to a markdown file (.md).",
+    .transform((val) => val.toLowerCase())
-            },
+    .refine((val) => val === "yes" || val === "no", {
-        ),
+      message: "Please select either 'Yes' or 'No'.",
-        z.custom<File>(
+    }),
-            (val) => val instanceof File,
+  isGenerating: z
-            {
+    .string({
-                message: "Input must be a file.",
+      required_error: "Please select either 'Yes' or 'No'.",
-            },
+    })
-        ).refine((file) => file.size < MAX_FILE_SIZE, {
+    .transform((val) => val.toLowerCase())
-            message: "File can't be bigger than 5MB.",
+    .refine((val) => val === "yes" || val === "no", {
-        }).refine((file) => file.name.endsWith(".md"), {
+      message: "Please select either 'Yes' or 'No'.",
-            message: "File must be a markdown file (.md).",
+    }),
-        }),
+  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."),
+  communitySize: z.string({
+    required_error: "Please select one of the option",
+  }),
+  businessPitchDeck: z.union([
+    z
+      .string()
+      .url("Pitch deck must be a valid URL.")
+      .refine((url) => url.endsWith(".md"), {
+        message: "Pitch deck URL must link to a markdown file (.md).",
+      }),
+    z
+      .custom<File>((val) => val instanceof File, {
+        message: "Input must be a file.",
+      })
+      .refine((file) => file.size < MAX_FILE_SIZE, {
+        message: "File can't be bigger than 5MB.",
+      })
+      .refine((file) => file.name.endsWith(".md"), {
+        message: "File must be a markdown file (.md).",
+      }),
+  ]),
+  country: z.string({
+    required_error: "Please select one of the option",
+  }),
 });
 
 export { businessFormSchema, projectFormSchema };