Refactor package dependencies and update ApplyProject component

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@hookform/resolvers": "^3.9.0",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-avatar": "^1.1.0",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -940,6 +941,33 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.2.tgz",
+      "integrity": "sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==",
+      "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-dialog": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "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-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",

src/app/project/apply/page.tsx

@@ -16,6 +16,7 @@ const BUCKET_PHOTOS_NAME = "project-additional-photos";
 export default function ApplyProject() {
   const onSubmit: SubmitHandler<projectSchema> = async (data) => {
     alert("มาแน้ววว");
+    
     console.table(data);
     console.log(typeof data["projectPhotos"], data["projectPhotos"]);
   };
@@ -26,20 +27,16 @@ export default function ApplyProject() {
     const pitchType = typeof recvData["projectPitchDeck"];
 
     const { data, error } = await supabase
-      .from("business_application")
+      .from("project_application")
       .insert([
         {
           user_id: user?.id,
-          business_name: recvData["projectName"],
-          business_type_id: recvData["industry"],
-          location: recvData["country"],
-          is_for_sale: recvData["isForSale"],
-          is_generating_revenue: recvData["isGenerating"],
-          is_in_us: recvData["isInUS"],
           pitch_deck_url:
             pitchType === "string" ? recvData["businessPitchDeck"] : "",
-          money_raised_to_date: recvData["totalRaised"],
+          target_investment: recvData["targetInvest"],
-          community_size: recvData["communitySize"],
+          deadline: recvData["deadline"],
+          project_name: recvData["projectName"],
+          
         },
       ])
       .select();

src/components/ProjectForm.tsx

@@ -55,7 +55,9 @@ const ProjectForm = ({
   const [projectPitchFile, setProjectPitchFile] = useState("");
   const [tag, setTag] = useState<{ id: number; value: string }[]>([]);
   const [open, setOpen] = useState(false);
-  const [selectedTag, setSelectedTag] = useState<string[]>([]);
+  const [selectedTag, setSelectedTag] = useState<
+    { id: number; value: string }[]
+  >([]);
 
   const handleFileChange = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -165,7 +167,7 @@ const ProjectForm = ({
                     fieldName="projectType"
                     choices={projectType}
                     handleFunction={(selectedValues: any) => {
-                      field.onChange(selectedValues.name);
+                      field.onChange(selectedValues.id);
                     }}
                     description={
                       <>Please specify the primary purpose of the funds</>
@@ -492,7 +494,7 @@ const ProjectForm = ({
                             className="w-96 justify-between overflow-hidden text-ellipsis whitespace-nowrap"
                           >
                             {selectedTag.length > 0
-                              ? selectedTag.join(", ")
+                              ? selectedTag.map((t) => t.value).join(", ")
                               : "Select tags..."}
                             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                           </Button>
@@ -505,19 +507,19 @@ const ProjectForm = ({
                               <CommandGroup>
                                 {tag.map((tag) => (
                                   <CommandItem
-                                    key={tag.value}
+                                    key={tag.id}
                                     value={tag.value}
-                                    onSelect={(currentValue) => {
+                                    onSelect={() => {
                                       setSelectedTag((prev) => {
-                                        const updatedTags = prev.includes(
+                                        const exists = prev.find(
-                                          currentValue
+                                          (t) => t.id === tag.id
-                                        )
+                                        );
-                                          ? prev.filter(
+                                        const updatedTags = exists
-                                              (item) => item !== currentValue
+                                          ? prev.filter((t) => t.id !== tag.id)
-                                            )
+                                          : [...prev, tag];
-                                          : [...prev, currentValue];
+                                        field.onChange(
-                                        field.onChange(updatedTags);
+                                          updatedTags.map((t) => t.id)
-
+                                        );
                                         return updatedTags;
                                       });
                                       setOpen(false);
@@ -526,7 +528,7 @@ const ProjectForm = ({
                                     <Check
                                       className={cn(
                                         "h-4",
-                                        selectedTag.includes(tag.value)
+                                        selectedTag.some((t) => t.id === tag.id)
                                           ? "opacity-100"
                                           : "opacity-0"
                                       )}
@@ -552,23 +554,21 @@ const ProjectForm = ({
                 <div className="flex flex-wrap space-x-3">
                   {selectedTag.map((tag) => (
                     <div
-                      key={tag}
+                      key={tag.id}
                       className="flex items-center space-x-1 p-1 rounded mt-2 outline outline-offset-2 outline-1"
                     >
-                      <span>{tag}</span>
+                      <span>{tag.value}</span>
                       <button
-                        onClick={() =>
+                        onClick={() => {
                           setSelectedTag((prev) => {
                             const updatedTags = prev.filter(
-                              (item) => item !== tag
+                              (t) => t.id !== tag.id
                             );
-                            field.onChange(updatedTags);
+                            field.onChange(updatedTags.map((t) => t.id));
-
                             return updatedTags;
-                          })
+                          });
-                        }
+                        }}
                       >
-                        {/* delete button */}
                         <X className="h-4 w-4" />
                       </button>
                     </div>

src/components/projectCard.tsx

@@ -25,7 +25,7 @@ export function ProjectCard(props: ProjectCardProps) {
   return (
     <div
       className={cn(
-        "flex flex-col group border-[1px] border-border relative hover:shadow-md rounded-xl h-[450px]",
+        "flex flex-col group border-[1px] border-border relative hover:shadow-md rounded-xl h-[450px] ",
         props.className
       )}>
       <div className="flex flex-col h-full">
@@ -58,7 +58,7 @@ export function ProjectCard(props: ProjectCardProps) {
 
           {/* Info 1 */}
           <div>
-            <div className="transition-transform duration-500 transform opacity-100 group-hover:opacity-0 p-4">
+            <div className="transition-transform duration-500 transform opacity-100 group-hover:opacity-0 p-4 ">
               <div className="flex items-center text-muted-foreground">
                 <span className="flex items-center gap-1">
                   <CalendarDaysIcon width={20} />
@@ -79,7 +79,7 @@ export function ProjectCard(props: ProjectCardProps) {
           </div>
 
           {/* Info 2 */}
-          <div className="hidden group-hover:flex group-hover:absolute group-hover:bottom-4 p-4">
+          <div className="hidden group-hover:flex group-hover:absolute group-hover:bottom-4 p-4 ">
             {/* Info 2 (Visible on hover) */}
             <div className="transition-transform duration-500 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
               <hr className="-ml-4 mb-2" />

src/types/schemas/application.schema.ts

@@ -21,7 +21,7 @@ const projectFormSchema = z.object({
   projectName: z.string().min(5, {
     message: "Project name must be at least 5 characters.",
   }),
-  projectType: z.string({
+  projectType: z.number({
     required_error: "Please select one of the option",
   }),
   shortDescription: z
@@ -91,7 +91,7 @@ const projectFormSchema = z.object({
       message: "Deadline must be in the future.",
     }),
   tag: z
-    .array(z.string())
+    .array(z.number())
     .min(1, "Please provide at least one tag.")
     .max(5, "You can provide up to 5 tags."),
 });