From 25a9f37b197cd49436cc2f66cad04340e448fac8 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 16 Oct 2024 22:18:22 +0700
Subject: [PATCH 01/11] Refactor dualSelector and multipleSelector components

---
 pnpm-lock.yaml                      | 970 ++++++++++++++++++++++++++--
 src/app/business/apply/page.tsx     | 934 ++++++++++----------------
 src/components/BusinessForm.tsx     | 260 +++++---
 src/components/dualSelector.tsx     |   4 +-
 src/components/multipleSelector.tsx |  12 +-
 src/components/ui/form.tsx          | 178 +++++
 6 files changed, 1618 insertions(+), 740 deletions(-)
 create mode 100644 src/components/ui/form.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3edc232..9e7705f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@hookform/resolvers':
+    specifier: ^3.9.0
+    version: 3.9.0(react-hook-form@7.53.0)
   '@radix-ui/react-avatar':
     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)
@@ -47,6 +50,12 @@ dependencies:
   '@radix-ui/react-tooltip':
     specifier: ^1.1.2
     version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1)
+  '@stripe/react-stripe-js':
+    specifier: ^2.8.1
+    version: 2.8.1(@stripe/stripe-js@4.8.0)(react-dom@18.3.1)(react@18.3.1)
+  '@stripe/stripe-js':
+    specifier: ^4.7.0
+    version: 4.8.0
   '@supabase-cache-helpers/postgrest-react-query':
     specifier: ^1.10.1
     version: 1.10.1(@supabase/postgrest-js@1.15.8)(@supabase/supabase-js@2.45.2)(@tanstack/react-query@5.59.0)(react@18.3.1)
@@ -81,8 +90,8 @@ dependencies:
     specifier: ^0.428.0
     version: 0.428.0(react@18.3.1)
   next:
-    specifier: 14.2.5
-    version: 14.2.5(@playwright/test@1.47.2)(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^14.2.15
+    version: 14.2.15(@playwright/test@1.47.2)(react-dom@18.3.1)(react@18.3.1)
   next-themes:
     specifier: ^0.3.0
     version: 0.3.0(react-dom@18.3.1)(react@18.3.1)
@@ -107,12 +116,18 @@ dependencies:
   recharts:
     specifier: ^2.12.7
     version: 2.12.7(react-dom@18.3.1)(react@18.3.1)
+  stripe:
+    specifier: ^17.1.0
+    version: 17.2.0
   tailwind-merge:
     specifier: ^2.5.2
     version: 2.5.2
   tailwindcss-animate:
     specifier: ^1.0.7
     version: 1.0.7(tailwindcss@3.4.10)
+  zod:
+    specifier: ^3.23.8
+    version: 3.23.8
 
 devDependencies:
   '@playwright/test':
@@ -121,6 +136,12 @@ devDependencies:
   '@tailwindcss/typography':
     specifier: ^0.5.15
     version: 0.5.15(tailwindcss@3.4.10)
+  '@trivago/prettier-plugin-sort-imports':
+    specifier: ^4.3.0
+    version: 4.3.0(prettier@3.3.3)
+  '@types/next':
+    specifier: ^8.0.7
+    version: 8.0.7(react-dom@18.3.1)(react@18.3.1)
   '@types/node':
     specifier: ^20
     version: 20.16.2
@@ -139,6 +160,9 @@ devDependencies:
   postcss:
     specifier: ^8
     version: 8.4.41
+  prettier:
+    specifier: ^3.3.3
+    version: 3.3.3
   supabase:
     specifier: ^1.200.3
     version: 1.204.3
@@ -155,6 +179,120 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  /@ampproject/toolbox-core@1.1.1:
+    resolution: {integrity: sha512-jcuVJUnGDRUEJgMYO6QVdf1dBy/oLZX3NjN2hYG48biFcPCvXevuv4xYFZMJsnsHSvXKg8y0qB8rANNyhTUN/A==}
+    dependencies:
+      node-fetch: 2.6.0
+    dev: true
+
+  /@ampproject/toolbox-optimizer@1.0.1:
+    resolution: {integrity: sha512-zz1cJsQWBvfg2h1ce2/bbgNdSkTjIY7PaF7QhWMzYVcfvdxGSAykA+Ajt+F13H6adNAtIn09s96z/+6pn7XiXQ==}
+    peerDependencies:
+      jimp: '*'
+      lru-cache: '*'
+    peerDependenciesMeta:
+      jimp:
+        optional: true
+      lru-cache:
+        optional: true
+    dependencies:
+      '@ampproject/toolbox-core': 1.1.1
+      '@ampproject/toolbox-runtime-version': 1.1.1
+      css: 2.2.4
+      parse5: 5.1.0
+      parse5-htmlparser2-tree-adapter: 5.1.0
+    dev: true
+
+  /@ampproject/toolbox-runtime-version@1.1.1:
+    resolution: {integrity: sha512-ibmw5p+0Sz+wingbX/Dyboe8a0+XDkMfFGSM7KFE0h2z3Op9MADup8ZPLeHT54Z7cYKmB6ob60FVHtQQDhEXNw==}
+    dependencies:
+      '@ampproject/toolbox-core': 1.1.1
+    dev: true
+
+  /@babel/code-frame@7.25.7:
+    resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.25.7
+      picocolors: 1.0.1
+    dev: true
+
+  /@babel/generator@7.17.7:
+    resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+      jsesc: 2.5.2
+      source-map: 0.5.7
+    dev: true
+
+  /@babel/generator@7.25.7:
+    resolution: {integrity: sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.25.8
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.0.2
+    dev: true
+
+  /@babel/helper-environment-visitor@7.24.7:
+    resolution: {integrity: sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.25.8
+    dev: true
+
+  /@babel/helper-function-name@7.24.7:
+    resolution: {integrity: sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.25.7
+      '@babel/types': 7.25.8
+    dev: true
+
+  /@babel/helper-hoist-variables@7.24.7:
+    resolution: {integrity: sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.25.8
+    dev: true
+
+  /@babel/helper-split-export-declaration@7.24.7:
+    resolution: {integrity: sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.25.8
+    dev: true
+
+  /@babel/helper-string-parser@7.25.7:
+    resolution: {integrity: sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-identifier@7.25.7:
+    resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/highlight@7.25.7:
+    resolution: {integrity: sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.0.1
+    dev: true
+
+  /@babel/parser@7.25.8:
+    resolution: {integrity: sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.25.8
+    dev: true
+
   /@babel/runtime-corejs3@7.25.7:
     resolution: {integrity: sha512-gMmIEhg35sXk9Te5qbGp3W9YKrvLt3HV658/d3odWrHSqT0JeG5OzsJWFHRLiOohRyjRsJc/x03DhJm3i8VJxg==}
     engines: {node: '>=6.9.0'}
@@ -170,6 +308,50 @@ packages:
       regenerator-runtime: 0.14.1
     dev: false
 
+  /@babel/template@7.25.7:
+    resolution: {integrity: sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.25.7
+      '@babel/parser': 7.25.8
+      '@babel/types': 7.25.8
+    dev: true
+
+  /@babel/traverse@7.23.2:
+    resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.25.7
+      '@babel/generator': 7.25.7
+      '@babel/helper-environment-visitor': 7.24.7
+      '@babel/helper-function-name': 7.24.7
+      '@babel/helper-hoist-variables': 7.24.7
+      '@babel/helper-split-export-declaration': 7.24.7
+      '@babel/parser': 7.25.8
+      '@babel/types': 7.25.8
+      debug: 4.3.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types@7.17.0:
+    resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.7
+      to-fast-properties: 2.0.0
+    dev: true
+
+  /@babel/types@7.25.8:
+    resolution: {integrity: sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.7
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -235,6 +417,14 @@ packages:
     resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
     dev: false
 
+  /@hookform/resolvers@3.9.0(react-hook-form@7.53.0):
+    resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.53.0(react@18.3.1)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -300,8 +490,8 @@ packages:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  /@next/env@14.2.5:
-    resolution: {integrity: sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==}
+  /@next/env@14.2.15:
+    resolution: {integrity: sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==}
     dev: false
 
   /@next/eslint-plugin-next@14.2.5:
@@ -310,8 +500,8 @@ packages:
       glob: 10.3.10
     dev: true
 
-  /@next/swc-darwin-arm64@14.2.5:
-    resolution: {integrity: sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==}
+  /@next/swc-darwin-arm64@14.2.15:
+    resolution: {integrity: sha512-Rvh7KU9hOUBnZ9TJ28n2Oa7dD9cvDBKua9IKx7cfQQ0GoYUwg9ig31O2oMwH3wm+pE3IkAQ67ZobPfEgurPZIA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -319,8 +509,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@14.2.5:
-    resolution: {integrity: sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==}
+  /@next/swc-darwin-x64@14.2.15:
+    resolution: {integrity: sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -328,8 +518,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@14.2.5:
-    resolution: {integrity: sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==}
+  /@next/swc-linux-arm64-gnu@14.2.15:
+    resolution: {integrity: sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -337,8 +527,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@14.2.5:
-    resolution: {integrity: sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==}
+  /@next/swc-linux-arm64-musl@14.2.15:
+    resolution: {integrity: sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -346,8 +536,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@14.2.5:
-    resolution: {integrity: sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==}
+  /@next/swc-linux-x64-gnu@14.2.15:
+    resolution: {integrity: sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -355,8 +545,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@14.2.5:
-    resolution: {integrity: sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==}
+  /@next/swc-linux-x64-musl@14.2.15:
+    resolution: {integrity: sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -364,8 +554,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@14.2.5:
-    resolution: {integrity: sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==}
+  /@next/swc-win32-arm64-msvc@14.2.15:
+    resolution: {integrity: sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -373,8 +563,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc@14.2.5:
-    resolution: {integrity: sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==}
+  /@next/swc-win32-ia32-msvc@14.2.15:
+    resolution: {integrity: sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -382,8 +572,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@14.2.5:
-    resolution: {integrity: sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==}
+  /@next/swc-win32-x64-msvc@14.2.15:
+    resolution: {integrity: sha512-SzqGbsLsP9OwKNUG9nekShTwhj6JSB9ZLMWQ8g1gG6hdE5gQLncbnbymrwy2yVmH9nikSLYRYxYMFu78Ggp7/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1340,6 +1530,24 @@ packages:
     resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
     dev: true
 
+  /@stripe/react-stripe-js@2.8.1(@stripe/stripe-js@4.8.0)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-C410jVKOATinXLalWotab6E6jlWAlbqUDWL9q1km0p5UHrvnihjjYzA8imYXc4xc4Euf9GeKDQc4n35HKZvgwg==}
+    peerDependencies:
+      '@stripe/stripe-js': ^1.44.1 || ^2.0.0 || ^3.0.0 || ^4.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@stripe/stripe-js': 4.8.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@stripe/stripe-js@4.8.0:
+    resolution: {integrity: sha512-+4Cb0bVHlV4BJXxkJ3cCLSLuWxm3pXKtgcRacox146EuugjCzRRII5T5gUMgL4HpzrBLVwVxjKaZqntNWAXawQ==}
+    engines: {node: '>=12.16'}
+    dev: false
+
   /@supabase-cache-helpers/postgrest-core@0.8.1(@supabase/postgrest-js@1.15.8)(@supabase/supabase-js@2.45.2):
     resolution: {integrity: sha512-WlmpQBBui54jQPQ9CwE7rdDcdPcMQLRl37aRJ+AEpEm47HMn0lJ/0cTuC8BT0aBMHK8BgOSx0dZ1QjgND1sB6g==}
     peerDependencies:
@@ -1489,6 +1697,26 @@ packages:
       react: 18.3.1
     dev: false
 
+  /@trivago/prettier-plugin-sort-imports@4.3.0(prettier@3.3.3):
+    resolution: {integrity: sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x - 3.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+    dependencies:
+      '@babel/generator': 7.17.7
+      '@babel/parser': 7.25.8
+      '@babel/traverse': 7.23.2
+      '@babel/types': 7.17.0
+      javascript-natural-sort: 0.7.1
+      lodash: 4.17.21
+      prettier: 3.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@types/d3-array@3.2.1:
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
     dev: false
@@ -1567,6 +1795,41 @@ packages:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: false
 
+  /@types/next-server@9.0.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-8PDYdAX0aDCiGJEL22UwvwT26b5+XFCtsuFprqIr9ISCRD/At2ndO4sylGq+pnuOEI40FEALzNg4aD2t+wi5Tg==}
+    deprecated: This is a stub types definition. next-server provides its own type definitions, so you do not need this installed.
+    dependencies:
+      next-server: 9.0.5(react-dom@18.3.1)(react@18.3.1)
+    transitivePeerDependencies:
+      - jimp
+      - lru-cache
+      - react
+      - react-dom
+      - supports-color
+    dev: true
+
+  /@types/next@8.0.7(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-I/Gcj1YfOFmpBBX5XgBP1t1wKcFS0TGk8ytW99ujjvCp8U31QuKqM3fvvGb7+Hf1CJt3BAAgzGT0aCigqO5opQ==}
+    dependencies:
+      '@types/next-server': 9.0.0(react-dom@18.3.1)(react@18.3.1)
+      '@types/node': 20.16.2
+      '@types/node-fetch': 2.6.11
+      '@types/react': 18.3.4
+    transitivePeerDependencies:
+      - jimp
+      - lru-cache
+      - react
+      - react-dom
+      - supports-color
+    dev: true
+
+  /@types/node-fetch@2.6.11:
+    resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==}
+    dependencies:
+      '@types/node': 20.16.2
+      form-data: 4.0.1
+    dev: true
+
   /@types/node@20.16.2:
     resolution: {integrity: sha512-91s/n4qUPV/wg8eE9KHYW1kouTfDk2FPGjXbBMfRWP/2vg1rCXNQL1OCabwGs0XSdukuK+MwCDXE30QpSeMUhQ==}
     dependencies:
@@ -1671,6 +1934,14 @@ packages:
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  /accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+    dev: true
+
   /acorn-jsx@5.3.2(acorn@8.12.1):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1711,6 +1982,13 @@ packages:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
 
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: true
+
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1849,6 +2127,16 @@ packages:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
     dev: true
 
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: true
+
+  /atob@2.1.2:
+    resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
+    engines: {node: '>= 4.5.0'}
+    hasBin: true
+    dev: true
+
   /available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -1867,6 +2155,26 @@ packages:
       deep-equal: 2.2.3
     dev: true
 
+  /babel-plugin-syntax-jsx@6.18.0:
+    resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
+    dev: true
+
+  /babel-runtime@6.26.0:
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.11.1
+    dev: true
+
+  /babel-types@6.26.0:
+    resolution: {integrity: sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==}
+    dependencies:
+      babel-runtime: 6.26.0
+      esutils: 2.0.3
+      lodash: 4.17.21
+      to-fast-properties: 1.0.3
+    dev: true
+
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: false
@@ -1874,6 +2182,10 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+    dev: true
+
   /bin-links@5.0.0:
     resolution: {integrity: sha512-sdleLVfCjBtgO5cNjA2HVRvWBJAHs4zwenaCPMNJAJU0yNxpzj80IpjOIimkpkr+mhlA+how5poQtt53PygbHA==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -1914,6 +2226,16 @@ packages:
       streamsearch: 1.1.0
     dev: false
 
+  /bytes@3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /bytes@3.1.0:
+    resolution: {integrity: sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /call-bind@1.0.7:
     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
     engines: {node: '>= 0.4'}
@@ -1923,7 +2245,6 @@ packages:
       function-bind: 1.1.2
       get-intrinsic: 1.2.4
       set-function-length: 1.2.2
-    dev: true
 
   /callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
@@ -1942,6 +2263,15 @@ packages:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
     dev: false
 
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: true
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -2010,15 +2340,32 @@ packages:
     engines: {node: ^18.17.0 || >=20.5.0}
     dev: true
 
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: true
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
 
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: true
+
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: true
+
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: false
@@ -2027,10 +2374,48 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  /compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.53.0
+    dev: true
+
+  /compression@1.7.4:
+    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /content-type@1.0.4:
+    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /convert-source-map@1.6.0:
+    resolution: {integrity: sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
+  /cookie@0.4.0:
+    resolution: {integrity: sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
@@ -2041,6 +2426,12 @@ packages:
     requiresBuild: true
     dev: false
 
+  /core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+    requiresBuild: true
+    dev: true
+
   /countup.js@2.8.0:
     resolution: {integrity: sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==}
     dev: false
@@ -2053,6 +2444,15 @@ packages:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  /css@2.2.4:
+    resolution: {integrity: sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==}
+    dependencies:
+      inherits: 2.0.4
+      source-map: 0.6.1
+      source-map-resolve: 0.5.3
+      urix: 0.1.0
+    dev: true
+
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2172,6 +2572,17 @@ packages:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
     dev: false
 
+  /debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+    dev: true
+
   /debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -2204,6 +2615,11 @@ packages:
       character-entities: 2.0.2
     dev: false
 
+  /decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+    dev: true
+
   /deep-equal@2.2.3:
     resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==}
     engines: {node: '>= 0.4'}
@@ -2239,7 +2655,6 @@ packages:
       es-define-property: 1.0.0
       es-errors: 1.3.0
       gopd: 1.0.1
-    dev: true
 
   /define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
@@ -2250,11 +2665,25 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /depd@1.1.2:
+    resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
     dev: false
 
+  /destroy@1.0.4:
+    resolution: {integrity: sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg==}
+    dev: true
+
   /detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
     dev: false
@@ -2307,6 +2736,10 @@ packages:
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  /ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+    dev: true
+
   /embla-carousel-react@8.2.0(react@18.3.1):
     resolution: {integrity: sha512-dWqbmaEBQjeAcy/EKrcAX37beVr0ubXuHPuLZkx27z58V1FIvRbbMb4/c3cLZx0PAv/ofngX2QFrwUB+62SPnw==}
     peerDependencies:
@@ -2335,6 +2768,16 @@ packages:
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  /emojis-list@2.1.0:
+    resolution: {integrity: sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /enhanced-resolve@5.17.1:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
@@ -2400,12 +2843,10 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       get-intrinsic: 1.2.4
-    dev: true
 
   /es-errors@1.3.0:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /es-get-iterator@1.1.3:
     resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
@@ -2472,6 +2913,15 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: true
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -2766,6 +3216,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
     dev: false
@@ -2827,6 +3282,13 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
+  /find-up@4.0.0:
+    resolution: {integrity: sha512-zoH7ZWPkRdgwYCDVoQTzqjG8JSPANhtvLhh4KVUHyKnaUJJrNeFmWIkTcNuJmR3GLMEmGYEf2S2bjgx26JTF+Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+    dev: true
+
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -2867,6 +3329,15 @@ packages:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  /form-data@4.0.1:
+    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: true
+
   /formdata-polyfill@4.0.10:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
@@ -2874,6 +3345,11 @@ packages:
       fetch-blob: 3.2.0
     dev: true
 
+  /fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -2918,7 +3394,6 @@ packages:
       has-proto: 1.0.3
       has-symbols: 1.0.3
       hasown: 2.0.2
-    dev: true
 
   /get-nonce@1.0.1:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
@@ -2987,6 +3462,11 @@ packages:
       path-is-absolute: 1.0.1
     dev: true
 
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -3026,7 +3506,6 @@ packages:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
       get-intrinsic: 1.2.4
-    dev: true
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -3039,6 +3518,11 @@ packages:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
 
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: true
+
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -3048,17 +3532,14 @@ packages:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
     dependencies:
       es-define-property: 1.0.0
-    dev: true
 
   /has-proto@1.0.3:
     resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /has-symbols@1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /has-tostringtag@1.0.2:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
@@ -3105,6 +3586,28 @@ packages:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
     dev: false
 
+  /http-errors@1.7.2:
+    resolution: {integrity: sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.1
+      statuses: 1.5.0
+      toidentifier: 1.0.0
+    dev: true
+
+  /http-errors@1.7.3:
+    resolution: {integrity: sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.4
+      setprototypeof: 1.1.1
+      statuses: 1.5.0
+      toidentifier: 1.0.0
+    dev: true
+
   /https-proxy-agent@7.0.5:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
@@ -3115,6 +3618,13 @@ packages:
       - supports-color
     dev: true
 
+  /iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+
   /ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -3141,6 +3651,10 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+    dev: true
+
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
@@ -3418,6 +3932,10 @@ packages:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  /javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: true
+
   /jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
@@ -3432,6 +3950,18 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true
@@ -3497,6 +4027,22 @@ packages:
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  /loader-utils@1.2.3:
+    resolution: {integrity: sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 2.1.0
+      json5: 1.0.2
+    dev: true
+
+  /locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+    dev: true
+
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -3518,7 +4064,6 @@ packages:
 
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: false
 
   /longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
@@ -3838,6 +4383,29 @@ packages:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-db@1.53.0:
+    resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: true
+
+  /mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -3879,6 +4447,14 @@ packages:
     hasBin: true
     dev: true
 
+  /ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+    dev: true
+
+  /ms@2.1.1:
+    resolution: {integrity: sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==}
+    dev: true
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -3902,6 +4478,40 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /next-server@9.0.5(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-99+2QXbB0WDw0Oec1LQRVMAsnqcPR7UdJgcMMGrxql/o9w/E4i0lQu7ucEU7ageVnyVqzfjfoNJNhyODyRyOJA==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      react: ^16.6.0
+      react-dom: ^16.6.0
+    dependencies:
+      '@ampproject/toolbox-optimizer': 1.0.1
+      compression: 1.7.4
+      content-type: 1.0.4
+      cookie: 0.4.0
+      etag: 1.8.1
+      find-up: 4.0.0
+      fresh: 0.5.2
+      path-to-regexp: 2.1.0
+      prop-types: 15.7.2
+      raw-body: 2.4.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 16.8.6
+      send: 0.17.1
+      styled-jsx: 3.2.1(react@18.3.1)
+      url: 0.11.0
+    transitivePeerDependencies:
+      - jimp
+      - lru-cache
+      - supports-color
+    dev: true
+
   /next-themes@0.3.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
     peerDependencies:
@@ -3912,8 +4522,8 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /next@14.2.5(@playwright/test@1.47.2)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==}
+  /next@14.2.15(@playwright/test@1.47.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==}
     engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
@@ -3930,7 +4540,7 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 14.2.5
+      '@next/env': 14.2.15
       '@playwright/test': 1.47.2
       '@swc/helpers': 0.5.5
       busboy: 1.6.0
@@ -3941,15 +4551,15 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
       styled-jsx: 5.1.1(react@18.3.1)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.5
-      '@next/swc-darwin-x64': 14.2.5
-      '@next/swc-linux-arm64-gnu': 14.2.5
-      '@next/swc-linux-arm64-musl': 14.2.5
-      '@next/swc-linux-x64-gnu': 14.2.5
-      '@next/swc-linux-x64-musl': 14.2.5
-      '@next/swc-win32-arm64-msvc': 14.2.5
-      '@next/swc-win32-ia32-msvc': 14.2.5
-      '@next/swc-win32-x64-msvc': 14.2.5
+      '@next/swc-darwin-arm64': 14.2.15
+      '@next/swc-darwin-x64': 14.2.15
+      '@next/swc-linux-arm64-gnu': 14.2.15
+      '@next/swc-linux-arm64-musl': 14.2.15
+      '@next/swc-linux-x64-gnu': 14.2.15
+      '@next/swc-linux-x64-musl': 14.2.15
+      '@next/swc-win32-arm64-msvc': 14.2.15
+      '@next/swc-win32-ia32-msvc': 14.2.15
+      '@next/swc-win32-x64-msvc': 14.2.15
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -3960,6 +4570,11 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
+  /node-fetch@2.6.0:
+    resolution: {integrity: sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==}
+    engines: {node: 4.x || >=6.0.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}
@@ -3989,7 +4604,6 @@ packages:
   /object-inspect@1.13.2:
     resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /object-is@1.1.6:
     resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
@@ -4051,6 +4665,18 @@ packages:
       es-object-atoms: 1.0.0
     dev: true
 
+  /on-finished@2.3.0:
+    resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      ee-first: 1.1.1
+    dev: true
+
+  /on-headers@1.0.2:
+    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -4069,6 +4695,13 @@ packages:
       word-wrap: 1.2.5
     dev: true
 
+  /p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+    dev: true
+
   /p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -4076,6 +4709,13 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
+  /p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: true
+
   /p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -4083,6 +4723,11 @@ packages:
       p-limit: 3.1.0
     dev: true
 
+  /p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
@@ -4106,6 +4751,16 @@ packages:
       is-hexadecimal: 2.0.1
     dev: false
 
+  /parse5-htmlparser2-tree-adapter@5.1.0:
+    resolution: {integrity: sha512-OrI4DNmghGcwDB3XN8FKKN7g5vBmau91uqj+VYuwuj/r6GhFBMBNymsM+Z9z+Z1p4HHgI0UuQirQRgh3W5d88g==}
+    dependencies:
+      parse5: 5.1.0
+    dev: true
+
+  /parse5@5.1.0:
+    resolution: {integrity: sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==}
+    dev: true
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4130,6 +4785,10 @@ packages:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  /path-to-regexp@2.1.0:
+    resolution: {integrity: sha512-dZY7QPCPp5r9cnNuQ955mOv4ZFVDXY/yvqeV7Y1W2PJA3PEFcuow9xKFfJxbBj1pIjOAP+M2B4/7xubmykLrXw==}
+    dev: true
+
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -4254,11 +4913,25 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+    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.7.2:
+    resolution: {integrity: sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: true
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -4270,14 +4943,46 @@ packages:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
     dev: false
 
+  /punycode@1.3.2:
+    resolution: {integrity: sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==}
+    dev: true
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
     dev: true
 
+  /qs@6.13.0:
+    resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.6
+    dev: false
+
+  /querystring@0.2.0:
+    resolution: {integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==}
+    engines: {node: '>=0.4.x'}
+    deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
+    dev: true
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  /range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /raw-body@2.4.0:
+    resolution: {integrity: sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      bytes: 3.1.0
+      http-errors: 1.7.2
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+    dev: true
+
   /react-countup@6.5.3(react@18.3.1):
     resolution: {integrity: sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==}
     peerDependencies:
@@ -4295,7 +5000,6 @@ packages:
       loose-envify: 1.4.0
       react: 18.3.1
       scheduler: 0.23.2
-    dev: false
 
   /react-hook-form@7.53.0(react@18.3.1):
     resolution: {integrity: sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==}
@@ -4323,6 +5027,10 @@ packages:
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-is@16.8.6:
+    resolution: {integrity: sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==}
+    dev: true
+
   /react-markdown@9.0.1(@types/react@18.3.4)(react@18.3.1):
     resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==}
     peerDependencies:
@@ -4448,7 +5156,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
-    dev: false
 
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
@@ -4504,6 +5211,10 @@ packages:
       which-builtin-type: 1.1.4
     dev: true
 
+  /regenerator-runtime@0.11.1:
+    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
+    dev: true
+
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
     dev: false
@@ -4548,6 +5259,11 @@ packages:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
     dev: true
 
+  /resolve-url@0.2.1:
+    resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
+    deprecated: https://github.com/lydell/resolve-url#deprecated
+    dev: true
+
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -4599,6 +5315,10 @@ packages:
       isarray: 2.0.5
     dev: true
 
+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: true
+
   /safe-regex-test@1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
@@ -4608,11 +5328,14 @@ packages:
       is-regex: 1.1.4
     dev: true
 
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: true
+
   /scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
     dependencies:
       loose-envify: 1.4.0
-    dev: false
 
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
@@ -4625,6 +5348,27 @@ packages:
     hasBin: true
     dev: true
 
+  /send@0.17.1:
+    resolution: {integrity: sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      debug: 2.6.9
+      depd: 1.1.2
+      destroy: 1.0.4
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 1.7.3
+      mime: 1.6.0
+      ms: 2.1.1
+      on-finished: 2.3.0
+      range-parser: 1.2.1
+      statuses: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -4635,7 +5379,6 @@ packages:
       get-intrinsic: 1.2.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.2
-    dev: true
 
   /set-function-name@2.0.2:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
@@ -4647,6 +5390,10 @@ packages:
       has-property-descriptors: 1.0.2
     dev: true
 
+  /setprototypeof@1.1.1:
+    resolution: {integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==}
+    dev: true
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -4665,7 +5412,6 @@ packages:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       object-inspect: 1.13.2
-    dev: true
 
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
@@ -4680,10 +5426,46 @@ packages:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
+  /source-map-resolve@0.5.3:
+    resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.2
+      resolve-url: 0.2.1
+      source-map-url: 0.4.1
+      urix: 0.1.0
+    dev: true
+
+  /source-map-url@0.4.1:
+    resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
+    deprecated: See https://github.com/lydell/source-map-url#deprecated
+    dev: true
+
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.7.3:
+    resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
 
+  /statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /stop-iteration-iterator@1.0.0:
     resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
     engines: {node: '>= 0.4'}
@@ -4696,6 +5478,10 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: false
 
+  /string-hash@1.1.3:
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
+    dev: true
+
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -4800,12 +5586,36 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /stripe@17.2.0:
+    resolution: {integrity: sha512-KuDplY9WrNKi07+uEFeguis/Mh+HC+hfEMy8P5snhQzCXUv01o+4KcIJ9auFxpv4Odp2R2krs9rZ9PhQl8+Sdw==}
+    engines: {node: '>=12.*'}
+    dependencies:
+      '@types/node': 20.16.2
+      qs: 6.13.0
+    dev: false
+
   /style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
     dependencies:
       inline-style-parser: 0.2.4
     dev: false
 
+  /styled-jsx@3.2.1(react@18.3.1):
+    resolution: {integrity: sha512-gM/WOrWYRpWReivzQqetEGohUc/TJSvUoZ5T/UJxJZIsVIPlRQLnp7R8Oue4q49sI08EBRQjQl2oBL3sfdrw2g==}
+    peerDependencies:
+      react: 15.x.x || 16.x.x
+    dependencies:
+      babel-plugin-syntax-jsx: 6.18.0
+      babel-types: 6.26.0
+      convert-source-map: 1.6.0
+      loader-utils: 1.2.3
+      react: 18.3.1
+      source-map: 0.7.3
+      string-hash: 1.1.3
+      stylis: 3.5.4
+      stylis-rule-sheet: 0.0.10(stylis@3.5.4)
+    dev: true
+
   /styled-jsx@5.1.1(react@18.3.1):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -4823,6 +5633,18 @@ packages:
       react: 18.3.1
     dev: false
 
+  /stylis-rule-sheet@0.0.10(stylis@3.5.4):
+    resolution: {integrity: sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==}
+    peerDependencies:
+      stylis: ^3.5.0
+    dependencies:
+      stylis: 3.5.4
+    dev: true
+
+  /stylis@3.5.4:
+    resolution: {integrity: sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==}
+    dev: true
+
   /sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4850,6 +5672,13 @@ packages:
       - supports-color
     dev: true
 
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: true
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4939,12 +5768,27 @@ packages:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
     dev: false
 
+  /to-fast-properties@1.0.3:
+    resolution: {integrity: sha512-lxrWP8ejsq+7E3nNjwYmUBMAgjMTZoTI+sdBOpvNyijeDLa29LUn9QaoXAHv4+Z578hbmHHJKZknzxVtvo77og==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
 
+  /toidentifier@1.0.0:
+    resolution: {integrity: sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==}
+    engines: {node: '>=0.6'}
+    dev: true
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: false
@@ -5101,12 +5945,29 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: false
 
+  /unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
       punycode: 2.3.1
     dev: true
 
+  /urix@0.1.0:
+    resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
+    deprecated: Please see https://github.com/lydell/urix#deprecated
+    dev: true
+
+  /url@0.11.0:
+    resolution: {integrity: sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==}
+    dependencies:
+      punycode: 1.3.2
+      querystring: 0.2.0
+    dev: true
+
   /use-callback-ref@1.3.2(@types/react@18.3.4)(react@18.3.1):
     resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
     engines: {node: '>=10'}
@@ -5141,6 +6002,11 @@ packages:
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  /vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
   /vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
     dependencies:
@@ -5313,6 +6179,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+    dev: false
+
   /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 5f116a4..44ed393 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -17,13 +17,14 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
+import BusinessForm from "@/components/BusinessForm";
 
 export default function Apply() {
   const [industry, setIndustry] = useState<string[]>([]);
-  const [isInUS, setIsInUS] = useState("");
-  const [isForSale, setIsForSale] = useState("");
-  const [isGenerating, setIsGenerating] = useState("");
-  const [businessPitch, setBusinessPitch] = useState("text");
+  // const [isInUS, setIsInUS] = useState("");
+  // const [isForSale, setIsForSale] = useState("");
+  // const [isGenerating, setIsGenerating] = useState("");
+  // const [businessPitch, setBusinessPitch] = useState("text");
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
@@ -134,58 +135,58 @@ export default function Apply() {
         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.",
-    }),
-    industry: z.string({
-      required_error: "Please select one of the option",
-    }),
-    isInUS: z
-      .string({
-        required_error: "Please select either 'Yes' or 'No'.",
-      })
-      .transform((val: string) => val.toLowerCase())
-      .refine((val: string) => val === "yes" || val === "no", {
-        message: "Please select either 'Yes' or 'No'.",
-      }),
-    isForSale: z
-      .string({
-        required_error: "Please select either 'Yes' or 'No'.",
-      })
-      .transform((val: string) => val.toLowerCase())
-      .refine((val: string) => val === "yes" || val === "no", {
-        message: "Please select either 'Yes' or 'No'.",
-      }),
-    isGenerating: z
-      .string({
-        required_error: "Please select either 'Yes' or 'No'.",
-      })
-      .transform((val: string) => val.toLowerCase())
-      .refine((val: string) => 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: createPitchDeckSchema(businessPitch),
-  });
+  // const businessFormSchema = z.object({
+  //   companyName: z.string().min(5, {
+  //     message: "Company name must be at least 5 characters.",
+  //   }),
+  //   industry: z.string({
+  //     required_error: "Please select one of the option",
+  //   }),
+  //   isInUS: z
+  //     .string({
+  //       required_error: "Please select either 'Yes' or 'No'.",
+  //     })
+  //     .transform((val: string) => val.toLowerCase())
+  //     .refine((val: string) => val === "yes" || val === "no", {
+  //       message: "Please select either 'Yes' or 'No'.",
+  //     }),
+  //   isForSale: z
+  //     .string({
+  //       required_error: "Please select either 'Yes' or 'No'.",
+  //     })
+  //     .transform((val: string) => val.toLowerCase())
+  //     .refine((val: string) => val === "yes" || val === "no", {
+  //       message: "Please select either 'Yes' or 'No'.",
+  //     }),
+  //   isGenerating: z
+  //     .string({
+  //       required_error: "Please select either 'Yes' or 'No'.",
+  //     })
+  //     .transform((val: string) => val.toLowerCase())
+  //     .refine((val: string) => 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: createPitchDeckSchema(businessPitch),
+  // });
   let supabase = createSupabaseClient();
-  const {
-    register,
-    handleSubmit,
-    setValue: setValueBusiness,
-    formState: { errors: errorsBusiness },
-  } = useForm({
-    resolver: zodResolver(businessFormSchema),
-  });
+  // const {
+  //   register,
+  //   handleSubmit,
+  //   setValue: setValueBusiness,
+  //   formState: { errors: errorsBusiness },
+  // } = useForm({
+  //   resolver: zodResolver(businessFormSchema),
+  // });
   const {
     register: registerSecondForm,
     handleSubmit: handleSecondSubmit,
@@ -205,12 +206,12 @@ export default function Apply() {
     "100K+",
   ];
 
-  useEffect(() => {
-    register("industry");
-    register("isInUS");
-    register("isForSale");
-    register("isGenerating");
-  }, [register]);
+  // useEffect(() => {
+  //   register("industry");
+  //   register("isInUS");
+  //   register("isForSale");
+  //   register("isGenerating");
+  // }, [register]);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
@@ -264,26 +265,26 @@ export default function Apply() {
     );
     return transformedData;
   };
-  const handleBusinessPitchChange = (type: string) => {
-    setBusinessPitch(type);
-    // clear out old data
-    setValueBusiness("pitchDeck", "");
-  };
+  // const handleBusinessPitchChange = (type: string) => {
+  //   setBusinessPitch(type);
+  //   // clear out old data
+  //   setValueBusiness("pitchDeck", "");
+  // };
 
-  const handleBusinessFieldChange = (fieldName: string, value: any) => {
-    switch (fieldName) {
-      case "isInUS":
-        setIsInUS(value);
-        break;
-      case "isForSale":
-        setIsForSale(value);
-        break;
-      case "isGenerating":
-        setIsGenerating(value);
-        break;
-    }
-    setValueBusiness(fieldName, value);
-  };
+  // const handleBusinessFieldChange = (fieldName: string, value: any) => {
+  //   switch (fieldName) {
+  //     case "isInUS":
+  //       setIsInUS(value);
+  //       break;
+  //     case "isForSale":
+  //       setIsForSale(value);
+  //       break;
+  //     case "isGenerating":
+  //       setIsGenerating(value);
+  //       break;
+  //   }
+  //   setValueBusiness(fieldName, value);
+  // };
   const handleProjectFieldChange = (fieldName: string, value: any) => {
     switch (fieldName) {
     }
@@ -306,8 +307,8 @@ export default function Apply() {
   };
 
   const onSubmitSingleForm = (data: any) => {
-    const pitchDeckSchema = createPitchDeckSchema(businessPitch);
-    pitchDeckSchema.parse(data.businessPitchDeck);
+    // const pitchDeckSchema = createPitchDeckSchema(businessPitch);
+    // pitchDeckSchema.parse(data.businessPitchDeck);
     console.log("Valid form input:", data);
     alert(JSON.stringify(data));
   };
@@ -371,181 +372,120 @@ export default function Apply() {
         </div>
       </div>
       {/* form */}
-      <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">
-            <span className="text-red-500 font-bold">**</span>All requested
-            information in this section is required.
-          </p>
+      {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
+      <BusinessForm onSubmit={onSubmitSingleForm} industry={industry} />
 
-          {/* company name */}
-          <div className="ml-96 mt-5 space-y-10">
+      <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>
+      {/* </div>
+        </div> */}
+
+      {/* 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>
+            {/* project's name */}
             <div className="mt-10 space-y-5">
-              <Label htmlFor="companyName" className="font-bold text-lg">
-                Company name
+              <Label htmlFor="projectName" className="font-bold text-lg">
+                Project name
               </Label>
               <div className="flex space-x-5">
                 <Input
                   type="text"
-                  id="companyName"
+                  id="projectName"
                   className="w-96"
-                  {...register("companyName")}
+                  {...registerSecondForm("projectName")}
                 />
-                <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>
-              {errorsBusiness.companyName && (
-                <p className="text-red-500 text-sm">
-                  {errorsBusiness.companyName && (
-                    <p className="text-red-500 text-sm">
-                      {errorsBusiness.companyName.message as string}
-                    </p>
-                  )}
-                </p>
-              )}
             </div>
-            {/* industry */}
-
-            <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"
-            />
-            {errorsBusiness.industry && (
+            {errorsProject.projectName && (
               <p className="text-red-500 text-sm">
-                {errorsBusiness.industry.message as string}
+                {errorsProject.projectName.message as string}
               </p>
             )}
-            {/* How much money has your company raised to date? */}
-            <div className="space-y-5">
-              <Label htmlFor="totalRaised" className="font-bold text-lg">
-                How much money has your company <br /> raised to date?
+            {/* 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">
-                <Input
-                  type="number"
-                  id="totalRaised"
+                <Textarea
+                  id="shortDescription"
                   className="w-96"
-                  placeholder="$   1,000,000"
-                  {...register("totalRaised", {
-                    valueAsNumber: true,
-                  })}
+                  {...registerSecondForm("shortDescription")}
                 />
                 <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.
+                  Could you provide a brief description of your project <br />{" "}
+                  in one or two sentences?
                 </span>
               </div>
-              {errorsBusiness.totalRaised && (
-                <p className="text-red-500 text-sm">
-                  {errorsBusiness.totalRaised.message as string}
-                </p>
-              )}
             </div>
-            {/* Is your company incorporated in the United States? */}
-            <DualOptionSelector
-              label={
-                <>
-                  Is your company incorporated in the <br />
-                  United States?
-                </>
-              }
-              name="isInUS"
-              choice1="Yes"
-              choice2="No"
-              handleFunction={handleBusinessFieldChange}
-              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.
-                </>
-              }
-              value={isInUS}
-            />
-            {errorsBusiness.isInUS && (
+            {errorsProject.shortDescription && (
               <p className="text-red-500 text-sm">
-                {errorsBusiness.isInUS.message as string}
-              </p>
-            )}
-
-            {/* Is your product available (for sale) in market? */}
-            <DualOptionSelector
-              label={
-                <>
-                  Is your product available (for sale) <br />
-                  in market?
-                </>
-              }
-              name="isForSale"
-              choice1="Yes"
-              choice2="No"
-              handleFunction={handleBusinessFieldChange}
-              description={
-                <>
-                  Only check this box if customers can access, use, or buy your{" "}
-                  <br />
-                  product today.
-                </>
-              }
-              value={isForSale}
-            />
-            {errorsBusiness.isForSale && (
-              <p className="text-red-500 text-sm">
-                {errorsBusiness.isForSale.message as string}
-              </p>
-            )}
-
-            {/* Is your company generating revenue?*/}
-            <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. <br />
-                  Please elaborate on revenue and other traction below.
-                </>
-              }
-              value={isGenerating}
-            />
-            {errorsBusiness.isGenerating && (
-              <p className="text-red-500 text-sm">
-                {errorsBusiness.isGenerating.message as string}
+                {errorsProject.shortDescription.message as string}
               </p>
             )}
             {/* Pitch deck */}
-            <div className="space-y-5">
-              <Label htmlFor="pitchDeck" className="font-bold text-lg">
+            <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={businessPitch === "text" ? "default" : "outline"}
-                  onClick={() => handleBusinessPitchChange("text")}
+                  variant={projectPitch === "text" ? "default" : "outline"}
+                  onClick={() => setProjectPitch("text")}
                   className="w-32 h-12 text-base"
                 >
                   Paste URL
                 </Button>
                 <Button
                   type="button"
-                  variant={businessPitch === "file" ? "default" : "outline"}
-                  onClick={() => handleBusinessPitchChange("file")}
+                  variant={projectPitch === "file" ? "default" : "outline"}
+                  onClick={() => setProjectPitch("file")}
                   className="w-32 h-12 text-base"
                 >
                   Upload a file
@@ -553,48 +493,43 @@ export default function Apply() {
               </div>
               <div className="flex space-x-5">
                 <Input
-                  type={businessPitch === "file" ? "file" : "text"}
-                  id="pitchDeck"
+                  type={projectPitch}
+                  id="projectPitchDeck"
                   className="w-96"
                   placeholder={
-                    businessPitch === "file"
+                    projectPitch === "file"
                       ? "Upload your Markdown file"
                       : "https:// "
                   }
-                  accept={businessPitch === "file" ? ".md" : undefined}
-                  // if text use normal register
-                  {...(businessPitch === "text"
-                    ? register("businessPitchDeck", { required: true })
+                  accept={projectPitch === "file" ? ".md" : undefined}
+                  {...(projectPitch === "text"
+                    ? registerSecondForm("projectPitchDeck", {
+                        required: true,
+                      })
                     : {
                         onChange: (e) => {
                           const file = e.target.files?.[0];
-                          setValueBusiness("businessPitchDeck", file);
-                          setBusinessPitchFile(file?.name || "");
+                          setValueProject("projectPitchDeck", file);
+                          setProjectPitchFile(file?.name || "");
                         },
                       })}
                 />
                 <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>
+                  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>
-              {/* box to show file name */}
-              {businessPitchFile && (
+              {projectPitchFile && (
                 <div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
-                  <span>1. {businessPitchFile}</span>
+                  <span>1. {projectPitchFile}</span>
                   <Button
                     className="ml-4"
                     onClick={() => {
-                      setValueBusiness("businessPitchDeck", null);
-                      setBusinessPitchFile("");
+                      setValueProject("projectPitchDeck", "");
+                      setProjectPitchFile("");
                     }}
                   >
                     Remove
@@ -602,378 +537,175 @@ export default function Apply() {
                 </div>
               )}
             </div>
-            {errorsBusiness.businessPitchDeck && (
+            {errorsProject.projectPitchDeck && (
               <p className="text-red-500 text-sm">
-                {errorsBusiness.businessPitchDeck.message as string}
+                {errorsProject.projectPitchDeck.message as string}
               </p>
             )}
-            <MultipleOptionSelector
-              header={
-                <>
-                  What's the rough size of your <br /> community?
-                </>
-              }
-              fieldName="communitySize"
-              choices={communitySize}
-              handleFunction={handleBusinessFieldChange}
-              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.
-                </>
-              }
-              placeholder="Select"
-              selectLabel="Select"
-            />
-            {errorsBusiness.communitySize && (
-              <p className="text-red-500 text-sm">
-                {errorsBusiness.communitySize.message as string}
-              </p>
-            )}
-
-            <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>
+            {/* 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/*"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    registerSecondForm("projectLogo").onChange({
+                      target: { name: "projectLogo", value: file },
+                    });
+                  }}
+                />
+                <span className="text-[12px] text-neutral-500 self-center">
+                  Please upload the logo picture that best represents your
+                  project.
+                </span>
+              </div>
             </div>
-          </div>
-        </div>
-
-        {/* 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.
+            {errorsProject.projectLogo && (
+              <p className="text-red-500 text-sm">
+                {errorsProject.projectLogo.message as string}
               </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"
-                    {...registerSecondForm("projectName")}
-                  />
-                </div>
+            )}
+            <div className="mt-10 space-y-5">
+              <Label
+                htmlFor="projectPhotos"
+                className="font-bold text-lg mt-10"
+              >
+                Project photos
+              </Label>
+              <div className="flex space-x-5">
+                <Input
+                  type="file"
+                  id="projectPhotos"
+                  multiple
+                  accept="image/*"
+                  className="w-96"
+                  {...registerSecondForm("projectPhotos", {
+                    required: true,
+                    onChange: handleFileChange,
+                  })}
+                />
+                <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>
-              {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"
+              <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"
                   >
-                    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}
-                    {...(projectPitch === "text"
-                      ? registerSecondForm("projectPitchDeck", {
-                          required: true,
-                        })
-                      : {
-                          onChange: (e) => {
-                            const file = e.target.files?.[0];
-                            setValueProject("projectPitchDeck", file);
-                            setProjectPitchFile(file?.name || "");
-                          },
-                        })}
-                  />
-                  <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>
+                    <span>{image.name}</span>
                     <Button
+                      variant="outline"
+                      onClick={() => handleRemoveImage(index)}
                       className="ml-4"
-                      onClick={() => {
-                        setValueProject("projectPitchDeck", "");
-                        setProjectPitchFile("");
-                      }}
+                      type="reset"
                     >
                       Remove
                     </Button>
                   </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/*"
-                    onChange={(e) => {
-                      const file = e.target.files?.[0];
-                      registerSecondForm("projectLogo").onChange({
-                        target: { name: "projectLogo", value: file },
-                      });
-                    }}
-                  />
-                  <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>
-              )}
-              <div className="mt-10 space-y-5">
-                <Label
-                  htmlFor="projectPhotos"
-                  className="font-bold text-lg mt-10"
-                >
-                  Project photos
-                </Label>
-                <div className="flex space-x-5">
-                  <Input
-                    type="file"
-                    id="projectPhotos"
-                    multiple
-                    accept="image/*"
-                    className="w-96"
-                    {...registerSecondForm("projectPhotos", {
-                      required: true,
-                      onChange: handleFileChange,
-                    })}
-                  />
-                  <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"
-                        type="reset"
-                      >
-                        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>
+            {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>
-        )}
-        {/* Submit */}
-        <center>
-          <Button
-            className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-            type="submit"
-          >
-            Submit application
-          </Button>
-        </center>
-      </form>
+        </div>
+      )}
+      {/* Submit */}
+      <center>
+        <Button
+          className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+          type="submit"
+        >
+          Submit application
+        </Button>
+      </center>
+      {/* </form> */}
     </div>
   );
 }
diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index b61c3ad..4ef9410 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -1,64 +1,97 @@
 import { 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 { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import {
+  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";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
-const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> }) => {
-  const communitySize = ["N/A", "0-5K", "5-10K", "10-20K", "20-50K", "50-100K", "100K+"];
-
-  const form = useForm<z.infer<typeof businessFormSchema>>({
+interface BusinessFormProps {
+  industry: string[];
+}
+const handleSubmit = (values: z.infer<typeof businessFormSchema>) => {
+  console.table(values);
+};
+const BusinessForm = ({
+  onSubmit,
+  industry,
+}: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
+  const communitySize = [
+    "N/A",
+    "0-5K",
+    "5-10K",
+    "10-20K",
+    "20-50K",
+    "50-100K",
+    "100K+",
+  ];
+  const form = useForm<businessSchema>({
     resolver: zodResolver(businessFormSchema),
     defaultValues: {},
   });
-
-  const handleBusinessFieldChange = (fieldName: string, value: any) => {
-    switch (fieldName) {
-      case "isInUS":
-        setIsInUS(value);
-        break;
-      case "isForSale":
-        setIsForSale(value);
-        break;
-      case "isGenerating":
-        setIsGenerating(value);
-        break;
-    }
-    setValueBusiness(fieldName, value);
-  };
+  const [isInUS, setIsInUS] = useState("");
+  const [isForSale, setIsForSale] = useState("");
+  const [isGenerating, setIsGenerating] = useState("");
+  const [businessPitch, setBusinessPitch] = useState("text");
+  const [businessPitchFile, setBusinessPitchFile] = useState("");
+  // const handleBusinessFieldChange = (fieldName: string, value: any) => {
+  //   switch (fieldName) {
+  //     case "isInUS":
+  //       setIsInUS(value);
+  //       break;
+  //     case "isForSale":
+  //       setIsForSale(value);
+  //       break;
+  //     case "isGenerating":
+  //       setIsGenerating(value);
+  //       break;
+  //   }
+  //   setValueBusiness(fieldName, value);
+  // };
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
         <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 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 */}
           <FormField
             control={form.control}
             name="companyName"
-            render={({ field }) => (
+            render={({ field }: { field: any }) => (
               <FormItem>
                 <FormLabel>Company name</FormLabel>
                 <FormControl>
                   <Input placeholder="Your company name" {...field} />
                 </FormControl>
                 <FormDescription>
-                  This should be the name your company uses on your website and in the market.
+                  This should be the name your company uses on your website and
+                  in the market.
                 </FormDescription>
                 <FormMessage />
               </FormItem>
@@ -69,7 +102,7 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
           <FormField
             control={form.control}
             name="industry"
-            render={({ field }) => (
+            render={({ field }: { field: any }) => (
               <FormItem>
                 <FormLabel>Industry</FormLabel>
                 <FormControl>
@@ -77,11 +110,16 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
                     header={<>Industry</>}
                     fieldName="industry"
                     choices={industry}
-                    handleFunction={handleBusinessFieldChange}
-                    description={<>Choose the industry that best aligns with your business.</>}
+                    handleFunction={(selectedValues: string) => {
+                      field.onChange(selectedValues);
+                    }}
+                    description={
+                      <>
+                        Choose the industry that best aligns with your business.
+                      </>
+                    }
                     placeholder="Select an industry"
                     selectLabel="Industry"
-                    {...field}
                   />
                 </FormControl>
                 <FormMessage />
@@ -95,12 +133,19 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
             name="totalRaised"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>How much money has your company raised to date?</FormLabel>
+                <FormLabel>
+                  How much money has your company raised to date?
+                </FormLabel>
                 <FormControl>
-                  <Input type="number" placeholder="$ 1,000,000" {...field} />
+                  <Input
+                    type="number"
+                    placeholder="$ 1,000,000"
+                    onChange={(e) => field.onChange(Number(e.target.value))}
+                  />
                 </FormControl>
                 <FormDescription>
-                  The sum total of past financing, including angel or venture capital, loans, grants, or token sales.
+                  The sum total of past financing, including angel or venture
+                  capital, loans, grants, or token sales.
                 </FormDescription>
                 <FormMessage />
               </FormItem>
@@ -113,19 +158,28 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
             name="isInUS"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Is your company incorporated in the United States?</FormLabel>
+                <FormLabel>
+                  Is your company incorporated in the United States?
+                </FormLabel>
                 <FormControl>
                   <DualOptionSelector
-                    label={<>Is your company incorporated in the United States?</>}
                     name="isInUS"
+                    label={
+                      <>Is your company incorporated in the United States?</>
+                    }
                     choice1="Yes"
                     choice2="No"
-                    handleFunction={handleBusinessFieldChange}
+                    handleFunction={(selectedValues: string) => {
+                      setIsInUS;
+                      field.onChange(selectedValues);
+                    }}
                     description={
-                      <>Only companies that are incorporated or formed in the US are eligible to raise via Reg CF.</>
+                      <>
+                        Only companies that are incorporated or formed in the US
+                        are eligible to raise via Reg CF.
+                      </>
                     }
-                    value={isInUS}
-                    {...field}
+                    value={field.value}
                   />
                 </FormControl>
                 <FormMessage />
@@ -139,17 +193,26 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
             name="isForSale"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Is your product available (for sale) in market?</FormLabel>
+                <FormLabel>
+                  Is your product available (for sale) in market?
+                </FormLabel>
                 <FormControl>
                   <DualOptionSelector
-                    label={<>Is your product available (for sale) in market?</>}
                     name="isForSale"
+                    value={field.value}
+                    label={<>Is your product available (for sale) in market?</>}
                     choice1="Yes"
                     choice2="No"
-                    handleFunction={handleBusinessFieldChange}
-                    description={<>Only check this box if customers can access, use, or buy your product today.</>}
-                    value={isForSale}
-                    {...field}
+                    handleFunction={(selectedValues: string) => {
+                      setIsForSale;
+                      field.onChange(selectedValues);
+                    }}
+                    description={
+                      <>
+                        Only check this box if customers can access, use, or buy
+                        your product today.
+                      </>
+                    }
                   />
                 </FormControl>
                 <FormMessage />
@@ -166,16 +229,21 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
                 <FormLabel>Is your company generating revenue?</FormLabel>
                 <FormControl>
                   <DualOptionSelector
-                    label={<>Is your company generating revenue?</>}
                     name="isGenerating"
+                    label={<>Is your company generating revenue?</>}
                     choice1="Yes"
                     choice2="No"
-                    handleFunction={handleBusinessFieldChange}
+                    value={field.value}
+                    handleFunction={(selectedValues: string) => {
+                      setIsGenerating;
+                      field.onChange(selectedValues);
+                    }}
                     description={
-                      <>Only check this box if your company is making money. Please elaborate on revenue below.</>
+                      <>
+                        Only check this box if your company is making money.
+                        Please elaborate on revenue below.
+                      </>
                     }
-                    value={isGenerating}
-                    {...field}
                   />
                 </FormControl>
                 <FormMessage />
@@ -196,36 +264,55 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
                       type="button"
                       variant={businessPitch === "text" ? "default" : "outline"}
                       onClick={() => setBusinessPitch("text")}
-                      className="w-32 h-12 text-base">
+                      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">
+                      className="w-32 h-12 text-base"
+                    >
                       Upload a file
                     </Button>
+                    <Input
+                      type={businessPitch === "file" ? "file" : "text"}
+                      placeholder={
+                        businessPitch === "file"
+                          ? "Upload your Markdown file"
+                          : "https:// "
+                      }
+                      accept={businessPitch === "file" ? ".md" : undefined}
+                      // onChange={(e) => {
+                      //   if (businessPitch === "file") {
+                      //     setValueBusiness(
+                      //       "businessPitchDeck",
+                      //       e.target.files?.[0] || ""
+                      //     );
+                      //   } else {
+                      //     field.onChange(e);
+                      //   }
+                      // }}
+                      value={
+                        businessPitch === "file" ? "" : (field.value as string)
+                      }
+                    />
+                    {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>
+                    )}
                   </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>
                 <FormMessage />
               </FormItem>
@@ -244,13 +331,17 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
                     header={<>What's the rough size of your community?</>}
                     fieldName="communitySize"
                     choices={communitySize}
-                    handleFunction={handleBusinessFieldChange}
+                    handleFunction={(selectedValues: string) => {
+                      field.onChange(selectedValues);
+                    }}
                     description={
-                      <>Include your email list, social media following (e.g., Instagram, Discord, Twitter).</>
+                      <>
+                        Include your email list, social media following (e.g.,
+                        Instagram, Discord, Twitter).
+                      </>
                     }
                     placeholder="Select"
                     selectLabel="Select"
-                    {...field}
                   />
                 </FormControl>
                 <FormMessage />
@@ -259,25 +350,30 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
           />
 
           {/* Apply for First Fundraising Project */}
-          <FormField
+          {/* <FormField
             control={form.control}
             name="applyProject"
             render={({ field }) => (
               <FormItem>
                 <FormControl>
                   <div className="flex space-x-5">
-                    <Switch onCheckedChange={() => setApplyProject(!applyProject)} {...field} />
+                    <Switch
+                      onCheckedChange={() => setApplyProject(!applyProject)}
+                      {...field}
+                    />
                     <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?
+                            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, which is crucial for unlocking
-                            fundraising tools.
+                            Toggling this option allows you to begin your first
+                            project, which is crucial for unlocking fundraising
+                            tools.
                           </p>
                         </TooltipContent>
                       </Tooltip>
@@ -287,10 +383,10 @@ const BusinessForm = ({ onSubmit }: { onSubmit: SubmitHandler<businessSchema> })
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
 
           {/* Submit Button */}
-          <Button type="submit" onClick={handleSubmit(onSubmit)} className="w-52 ml-[45%] my-10">
+          <Button type="submit" className="w-52 ml-[45%] my-10">
             Continue
           </Button>
         </div>
diff --git a/src/components/dualSelector.tsx b/src/components/dualSelector.tsx
index e55b066..2711c68 100644
--- a/src/components/dualSelector.tsx
+++ b/src/components/dualSelector.tsx
@@ -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}
diff --git a/src/components/multipleSelector.tsx b/src/components/multipleSelector.tsx
index 74b4796..f3911a3 100644
--- a/src/components/multipleSelector.tsx
+++ b/src/components/multipleSelector.tsx
@@ -10,17 +10,17 @@ import {
 } from "@/components/ui/select";
 import { ReactElement } from "react";
 
-interface MultipleOptionSelector {
+interface MultipleOptionSelectorProps {
   header: ReactElement;
   fieldName: string;
   choices: string[];
-  handleFunction: Function;
+  handleFunction: Function | null;
   description: ReactElement;
   placeholder: string;
   selectLabel: string;
 }
 
-export function MultipleOptionSelector(props: MultipleOptionSelector) {
+export function MultipleOptionSelector(props: MultipleOptionSelectorProps) {
   return (
     <div className="mt-10 space-y-5">
       <Label htmlFor={props.fieldName} className="font-bold text-lg mt-10">
@@ -29,8 +29,10 @@ export function MultipleOptionSelector(props: MultipleOptionSelector) {
       <div className="flex space-x-5">
         <Select
           onValueChange={(value) => {
-            props.handleFunction(props.fieldName, value);
-            // console.log(value, props.fieldName);
+            if (props.handleFunction) {
+              props.handleFunction(props.fieldName, value);
+              // console.log(value, props.fieldName);
+            }
           }}
         >
           <SelectTrigger className="w-96">
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..ce264ae
--- /dev/null
+++ b/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,
+}

From 3a9f3faa485ed867bb8738f8f005a8ed93557735 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 16 Oct 2024 22:52:06 +0700
Subject: [PATCH 02/11] Refactor form submission logic in Apply page and
 BusinessForm component

---
 src/app/business/apply/page.tsx | 27 ++++++++++++------
 src/components/BusinessForm.tsx | 49 ++++++---------------------------
 2 files changed, 27 insertions(+), 49 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 44ed393..98ba82b 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -6,7 +6,7 @@ import { Switch } from "@/components/ui/switch";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
-import { useForm } from "react-hook-form";
+import { useForm, SubmitHandler } from "react-hook-form";
 import {
   Tooltip,
   TooltipContent,
@@ -18,13 +18,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
 import BusinessForm from "@/components/BusinessForm";
+import { businessFormSchema } from "@/types/schemas/application.schema";
 
+type businessSchema = z.infer<typeof businessFormSchema>;
 export default function Apply() {
+  const form1 = useForm();
   const [industry, setIndustry] = useState<string[]>([]);
-  // const [isInUS, setIsInUS] = useState("");
-  // const [isForSale, setIsForSale] = useState("");
-  // const [isGenerating, setIsGenerating] = useState("");
-  // const [businessPitch, setBusinessPitch] = useState("text");
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
@@ -33,6 +32,18 @@ export default function Apply() {
   const [projectPitchFile, setProjectPitchFile] = useState("");
   const MAX_FILE_SIZE = 5000000;
   const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
+
+  const handleSubmit: SubmitHandler<any> = (data) => {
+    console.log("Submitted Data:", data);
+    // add api logic
+  };
+
+  const onSubmit: SubmitHandler<businessSchema> = async (data) => {
+    // Your submit logic here
+    console.log(data);
+    // e.g. submit the data to an API
+  };
+
   const createPitchDeckSchema = (inputType: string) => {
     if (inputType === "text") {
       return z
@@ -45,8 +56,7 @@ export default function Apply() {
       return z
         .custom<File>(
           (val: any) => {
-            // confirm val is a File object
-            return val instanceof File; // Ensure it is a File instance
+            return val instanceof File;
           },
           {
             message: "Input must be a file.",
@@ -373,7 +383,7 @@ export default function Apply() {
       </div>
       {/* form */}
       {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
-      <BusinessForm onSubmit={onSubmitSingleForm} industry={industry} />
+      <BusinessForm industry={industry} onSubmit={onSubmit} />
 
       <div className="flex space-x-5">
         <Switch onCheckedChange={() => setApplyProject(!applyProject)}></Switch>
@@ -705,7 +715,6 @@ export default function Apply() {
           Submit application
         </Button>
       </center>
-      {/* </form> */}
     </div>
   );
 }
diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index 4ef9410..0610cf0 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -28,10 +28,9 @@ type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
   industry: string[];
+  handleSubmit: SubmitHandler<businessSchema>;
+  onSubmit: () => void;
 }
-const handleSubmit = (values: z.infer<typeof businessFormSchema>) => {
-  console.table(values);
-};
 const BusinessForm = ({
   onSubmit,
   industry,
@@ -49,29 +48,12 @@ const BusinessForm = ({
     resolver: zodResolver(businessFormSchema),
     defaultValues: {},
   });
-  const [isInUS, setIsInUS] = useState("");
-  const [isForSale, setIsForSale] = useState("");
-  const [isGenerating, setIsGenerating] = useState("");
   const [businessPitch, setBusinessPitch] = useState("text");
   const [businessPitchFile, setBusinessPitchFile] = useState("");
-  // const handleBusinessFieldChange = (fieldName: string, value: any) => {
-  //   switch (fieldName) {
-  //     case "isInUS":
-  //       setIsInUS(value);
-  //       break;
-  //     case "isForSale":
-  //       setIsForSale(value);
-  //       break;
-  //     case "isGenerating":
-  //       setIsGenerating(value);
-  //       break;
-  //   }
-  //   setValueBusiness(fieldName, value);
-  // };
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <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">
@@ -170,7 +152,7 @@ const BusinessForm = ({
                     choice1="Yes"
                     choice2="No"
                     handleFunction={(selectedValues: string) => {
-                      setIsInUS;
+                      // setIsInUS;
                       field.onChange(selectedValues);
                     }}
                     description={
@@ -204,7 +186,7 @@ const BusinessForm = ({
                     choice1="Yes"
                     choice2="No"
                     handleFunction={(selectedValues: string) => {
-                      setIsForSale;
+                      // setIsForSale;
                       field.onChange(selectedValues);
                     }}
                     description={
@@ -235,7 +217,7 @@ const BusinessForm = ({
                     choice2="No"
                     value={field.value}
                     handleFunction={(selectedValues: string) => {
-                      setIsGenerating;
+                      // setIsGenerating;
                       field.onChange(selectedValues);
                     }}
                     description={
@@ -284,16 +266,9 @@ const BusinessForm = ({
                           : "https:// "
                       }
                       accept={businessPitch === "file" ? ".md" : undefined}
-                      // onChange={(e) => {
-                      //   if (businessPitch === "file") {
-                      //     setValueBusiness(
-                      //       "businessPitchDeck",
-                      //       e.target.files?.[0] || ""
-                      //     );
-                      //   } else {
-                      //     field.onChange(e);
-                      //   }
-                      // }}
+                      onChange={(e) => {
+                        field.onChange(e);
+                      }}
                       value={
                         businessPitch === "file" ? "" : (field.value as string)
                       }
@@ -304,7 +279,6 @@ const BusinessForm = ({
                         <Button
                           className="ml-4"
                           onClick={() => {
-                            // setValueBusiness("businessPitchDeck", null);
                             setBusinessPitchFile("");
                           }}
                         >
@@ -384,11 +358,6 @@ const BusinessForm = ({
               </FormItem>
             )}
           /> */}
-
-          {/* Submit Button */}
-          <Button type="submit" className="w-52 ml-[45%] my-10">
-            Continue
-          </Button>
         </div>
       </form>
     </Form>

From dca9af5e3ba213b76e859f618e0970a7882cd1e7 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 17 Oct 2024 09:39:07 +0700
Subject: [PATCH 03/11] Refactor form submission logic in BusinessForm
 component

---
 src/components/BusinessForm.tsx         |  16 +-
 src/types/schemas/application.schema.ts | 255 +++++++++++++-----------
 2 files changed, 147 insertions(+), 124 deletions(-)

diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index 0610cf0..f4686fb 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -28,8 +28,7 @@ type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
   industry: string[];
-  handleSubmit: SubmitHandler<businessSchema>;
-  onSubmit: () => void;
+  onSubmit: SubmitHandler<businessSchema>;
 }
 const BusinessForm = ({
   onSubmit,
@@ -53,7 +52,12 @@ const BusinessForm = ({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form
+        onSubmit={form.handleSubmit(
+          onSubmit as unknown as SubmitHandler<businessSchema>
+        )}
+        className="space-y-8"
+      >
         <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">
@@ -358,6 +362,12 @@ const BusinessForm = ({
               </FormItem>
             )}
           /> */}
+          <Button
+            className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+            type="submit"
+          >
+            Submit application
+          </Button>
         </div>
       </form>
     </Form>
diff --git a/src/types/schemas/application.schema.ts b/src/types/schemas/application.schema.ts
index 72985a3..2b4529a 100644
--- a/src/types/schemas/application.schema.ts
+++ b/src/types/schemas/application.schema.ts
@@ -3,140 +3,153 @@ 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.",
-    },
-).refine((file) => file.size < MAX_FILE_SIZE, {
+      message: "Input must be a file.",
+    }
+  )
+  .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, {
-        message: "Project name must be at least 5 characters.",
+  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(10, {
+      message: "Short description must be at least 10 characters.",
     }),
-    projectType: z.string({
-        required_error: "Please select one of the option",
+  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.",
     }),
-    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, {
-        message: "Company name must be at least 5 characters.",
-    }),
-    industry: z.string({
-        required_error: "Please select one of the option",
-    }),
-    isInUS: z.string({
-        required_error: "Please select either 'Yes' or 'No'.",
+  companyName: z.string().min(5, {
+    message: "Company name must be at least 5 characters.",
+  }),
+  industry: z.string({
+    required_error: "Please select one of the option",
+  }),
+  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.",
-        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",
+    .transform((val) => val.toLowerCase())
+    .refine((val) => val === "yes" || val === "no", {
+      message: "Please select either 'Yes' or 'No'.",
     }),
-    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).",
-        }),
-    ]),
+  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([
+    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).",
+      }),
+  ]),
 });
 
 export { businessFormSchema, projectFormSchema };

From 327bf34267090d5903fa4172dc1a8753bc5a0ce0 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 17 Oct 2024 10:10:09 +0700
Subject: [PATCH 04/11] Refactor dualSelector component to add top margin in
 DualOptionSelector

---
 src/app/business/apply/page.tsx |   4 +-
 src/components/BusinessForm.tsx | 624 ++++++++++++++++----------------
 src/components/dualSelector.tsx |   2 +-
 3 files changed, 317 insertions(+), 313 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 98ba82b..5bcb3a2 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -707,14 +707,14 @@ export default function Apply() {
         </div>
       )}
       {/* Submit */}
-      <center>
+      {/* <center>
         <Button
           className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
           type="submit"
         >
           Submit application
         </Button>
-      </center>
+      </center> */}
     </div>
   );
 }
diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index f4686fb..ab4c22c 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -1,15 +1,8 @@
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
-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 {
   Form,
   FormControl,
@@ -23,6 +16,7 @@ import { Input } from "@/components/ui/input";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Label } from "@radix-ui/react-label";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
@@ -53,9 +47,7 @@ const BusinessForm = ({
   return (
     <Form {...form}>
       <form
-        onSubmit={form.handleSubmit(
-          onSubmit as unknown as SubmitHandler<businessSchema>
-        )}
+        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 lg:ml-[10%]">
@@ -64,310 +56,322 @@ const BusinessForm = ({
             <span className="text-red-500 font-bold">**</span>All requested
             information in this section is required.
           </p>
-
-          {/* Company Name */}
-          <FormField
-            control={form.control}
-            name="companyName"
-            render={({ field }: { field: any }) => (
-              <FormItem>
-                <FormLabel>Company name</FormLabel>
-                <FormControl>
-                  <Input placeholder="Your company name" {...field} />
-                </FormControl>
-                <FormDescription>
-                  This should be the name your company uses on your website and
-                  in the market.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Industry */}
-          <FormField
-            control={form.control}
-            name="industry"
-            render={({ field }: { field: any }) => (
-              <FormItem>
-                <FormLabel>Industry</FormLabel>
-                <FormControl>
-                  <MultipleOptionSelector
-                    header={<>Industry</>}
-                    fieldName="industry"
-                    choices={industry}
-                    handleFunction={(selectedValues: string) => {
-                      field.onChange(selectedValues);
-                    }}
-                    description={
-                      <>
-                        Choose the industry that best aligns with your business.
-                      </>
-                    }
-                    placeholder="Select an industry"
-                    selectLabel="Industry"
-                  />
-                </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"
-                    onChange={(e) => field.onChange(Number(e.target.value))}
-                  />
-                </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
-                    name="isInUS"
-                    label={
-                      <>Is your company incorporated in the United States?</>
-                    }
-                    choice1="Yes"
-                    choice2="No"
-                    handleFunction={(selectedValues: string) => {
-                      // setIsInUS;
-                      field.onChange(selectedValues);
-                    }}
-                    description={
-                      <>
-                        Only companies that are incorporated or formed in the US
-                        are eligible to raise via Reg CF.
-                      </>
-                    }
-                    value={field.value}
-                  />
-                </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
-                    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.
-                      </>
-                    }
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Generating Revenue */}
-          <FormField
-            control={form.control}
-            name="isGenerating"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Is your company generating revenue?</FormLabel>
-                <FormControl>
-                  <DualOptionSelector
-                    name="isGenerating"
-                    label={<>Is your company generating revenue?</>}
-                    choice1="Yes"
-                    choice2="No"
-                    value={field.value}
-                    handleFunction={(selectedValues: string) => {
-                      // setIsGenerating;
-                      field.onChange(selectedValues);
-                    }}
-                    description={
-                      <>
-                        Only check this box if your company is making money.
-                        Please elaborate on revenue below.
-                      </>
-                    }
-                  />
-                </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>
-                    <Input
-                      type={businessPitch === "file" ? "file" : "text"}
-                      placeholder={
-                        businessPitch === "file"
-                          ? "Upload your Markdown file"
-                          : "https:// "
-                      }
-                      accept={businessPitch === "file" ? ".md" : undefined}
-                      onChange={(e) => {
-                        field.onChange(e);
-                      }}
-                      value={
-                        businessPitch === "file" ? "" : (field.value as string)
-                      }
-                    />
-                    {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 className="ml-96 mt-5 space-y-10">
+            {/* Company Name */}
+            <FormField
+              control={form.control}
+              name="companyName"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormLabel className="font-bold text-lg">
+                    Company name
+                  </FormLabel>
+                  <FormControl>
+                    <div className="mt-10 space-y-5">
+                      <div className="flex space-x-5">
+                        <Input
+                          type="text"
+                          id="companyName"
+                          className="w-96"
+                          {...field}
+                        />
+                        <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>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-          {/* Community Size */}
-          <FormField
-            control={form.control}
-            name="communitySize"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>What's the rough size of your community?</FormLabel>
-                <FormControl>
-                  <MultipleOptionSelector
-                    header={<>What's the rough size of your community?</>}
-                    fieldName="communitySize"
-                    choices={communitySize}
-                    handleFunction={(selectedValues: string) => {
-                      field.onChange(selectedValues);
-                    }}
-                    description={
-                      <>
-                        Include your email list, social media following (e.g.,
-                        Instagram, Discord, Twitter).
-                      </>
-                    }
-                    placeholder="Select"
-                    selectLabel="Select"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Apply for First Fundraising Project */}
-          {/* <FormField
-            control={form.control}
-            name="applyProject"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <div className="flex space-x-5">
-                    <Switch
-                      onCheckedChange={() => setApplyProject(!applyProject)}
-                      {...field}
+            {/* Industry */}
+            <FormField
+              control={form.control}
+              name="industry"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>Industry</>}
+                      fieldName="industry"
+                      choices={industry}
+                      handleFunction={(selectedValues: string) => {
+                        field.onChange(selectedValues);
+                      }}
+                      description={
+                        <>
+                          Choose the industry that best aligns with your
+                          business.
+                        </>
+                      }
+                      placeholder="Select an industry"
+                      selectLabel="Industry"
                     />
-                    <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, which is crucial for unlocking fundraising
-                            tools.
-                          </p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Raised Money */}
+            <FormField
+              control={form.control}
+              name="totalRaised"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="mt-10 space-y-5">
+                    <Label htmlFor="totalRaised" className="font-bold text-lg">
+                      How much money has your company <br /> raised to date?
+                    </Label>
+                    <FormControl>
+                      <div className="flex space-x-5">
+                        <Input
+                          type="number"
+                          id="totalRaised"
+                          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">
+                          The sum total of past financing, including angel or
+                          venture <br />
+                          capital, loans, grants, or token sales.
+                        </span>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
                   </div>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          /> */}
-          <Button
-            className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-            type="submit"
-          >
-            Submit application
-          </Button>
+                </FormItem>
+              )}
+            />
+
+            {/* Incorporated in US */}
+            <FormField
+              control={form.control}
+              name="isInUS"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <DualOptionSelector
+                      name="isInUS"
+                      label={
+                        <>Is your company incorporated in the United States?</>
+                      }
+                      choice1="Yes"
+                      choice2="No"
+                      handleFunction={(selectedValues: string) => {
+                        // setIsInUS;
+                        field.onChange(selectedValues);
+                      }}
+                      description={
+                        <>
+                          Only companies that are incorporated or formed in the
+                          US are eligible to raise via Reg CF.
+                        </>
+                      }
+                      value={field.value}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Product for Sale */}
+            <FormField
+              control={form.control}
+              name="isForSale"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <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.
+                        </>
+                      }
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Generating Revenue */}
+            <FormField
+              control={form.control}
+              name="isGenerating"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <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.
+                        </>
+                      }
+                    />
+                  </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) => {
+                              field.onChange(e);
+                            }}
+                            className="w-96 mt-5"
+                            value={
+                              businessPitch === "file"
+                                ? ""
+                                : (field.value as string)
+                            }
+                          />
+                          <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: string) => {
+                        field.onChange(selectedValues);
+                      }}
+                      description={
+                        <>
+                          Include your email list, social media following (e.g.,
+                          Instagram, Discord, Twitter).
+                        </>
+                      }
+                      placeholder="Select"
+                      selectLabel="Select"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
+              type="submit"
+            >
+              Submit application
+            </Button>
+          </div>
         </div>
       </form>
     </Form>
diff --git a/src/components/dualSelector.tsx b/src/components/dualSelector.tsx
index 2711c68..9943ab9 100644
--- a/src/components/dualSelector.tsx
+++ b/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>

From 47baae84fb8502cc25341a81fe4ba7a93c714669 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 17 Oct 2024 13:07:12 +0700
Subject: [PATCH 05/11] Refactor package.json and package-lock.json to add
 @types/react-select-country-list dependency

---
 package-lock.json                       |  7 ++
 package.json                            |  1 +
 src/app/business/apply/page.tsx         | 49 +++----------
 src/components/BusinessForm.tsx         | 97 +++++++++++++++++++++----
 src/types/schemas/application.schema.ts |  3 +
 5 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c4a0dbe..315b9b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,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 +2321,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",
diff --git a/package.json b/package.json
index 971486d..cbb2384 100644
--- a/package.json
+++ b/package.json
@@ -60,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",
diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 5bcb3a2..4134aca 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -2,46 +2,31 @@
 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 { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { useForm, SubmitHandler } from "react-hook-form";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DualOptionSelector } from "@/components/dualSelector";
-import { MultipleOptionSelector } from "@/components/multipleSelector";
 import BusinessForm from "@/components/BusinessForm";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 export default function Apply() {
-  const form1 = useForm();
   const [industry, setIndustry] = useState<string[]>([]);
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
-  const [businessPitchFile, setBusinessPitchFile] = useState("");
   const [projectPitchFile, setProjectPitchFile] = useState("");
   const MAX_FILE_SIZE = 5000000;
   const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
 
-  const handleSubmit: SubmitHandler<any> = (data) => {
-    console.log("Submitted Data:", data);
-    // add api logic
-  };
 
   const onSubmit: SubmitHandler<businessSchema> = async (data) => {
-    // Your submit logic here
-    console.log(data);
-    // e.g. submit the data to an API
+    const transformedData = transformChoice(data);
+    console.log(transformedData);
+    
   };
 
   const createPitchDeckSchema = (inputType: string) => {
@@ -383,28 +368,14 @@ export default function Apply() {
       </div>
       {/* form */}
       {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
-      <BusinessForm industry={industry} onSubmit={onSubmit} />
+      <BusinessForm
+        industry={industry}
+        onSubmit={onSubmit}
+        applyProject={applyProject}
+        setApplyProject={setApplyProject}
+      />
+
 
-      <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>
       {/* </div>
         </div> */}
 
diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index ab4c22c..3880b9d 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { DualOptionSelector } from "@/components/dualSelector";
@@ -16,15 +16,21 @@ import { Input } from "@/components/ui/input";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Label } from "@radix-ui/react-label";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip"; 
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
   industry: string[];
+  applyProject: boolean;
+  setApplyProject: Function;
   onSubmit: SubmitHandler<businessSchema>;
 }
 const BusinessForm = ({
+  applyProject,
+  setApplyProject,
   onSubmit,
   industry,
 }: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
@@ -43,14 +49,22 @@ const BusinessForm = ({
   });
   const [businessPitch, setBusinessPitch] = useState("text");
   const [businessPitchFile, setBusinessPitchFile] = useState("");
-
+  const [countries, setCountries] = useState([]);
+  useEffect(() => {
+    fetch("https://restcountries.com/v3.1/all")
+      .then((response) => response.json())
+      .then((data) => {
+        const countryList = data.map((country: { name: { common: any; }; }) => country.name.common);
+        setCountries(countryList.sort());
+      });
+  }, []);
   return (
     <Form {...form}>
       <form
         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 lg:ml-[10%]">
+        <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
@@ -87,6 +101,31 @@ const BusinessForm = ({
                 </FormItem>
               )}
             />
+            {/* Country */}
+            <FormField
+              control={form.control}
+              name="country"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>Country</>}
+                      fieldName="country"
+                      choices={countries}
+                      handleFunction={(selectedValues: string) => {
+                        field.onChange(selectedValues);
+                      }}
+                      description={
+                        <>Select the country where your business is based.</>
+                      }
+                      placeholder="Select a country"
+                      selectLabel="Country"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
             {/* Industry */}
             <FormField
@@ -293,15 +332,17 @@ const BusinessForm = ({
                               businessPitch === "file" ? ".md" : undefined
                             }
                             onChange={(e) => {
-                              field.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"
-                            value={
-                              businessPitch === "file"
-                                ? ""
-                                : (field.value as string)
-                            }
                           />
+
                           <span className="text-[12px] text-neutral-500 self-center">
                             Your pitch deck and other application info will be
                             used for <br />
@@ -365,12 +406,36 @@ const BusinessForm = ({
                 </FormItem>
               )}
             />
-            <Button
-              className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-              type="submit"
-            >
-              Submit application
-            </Button>
+            <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>
diff --git a/src/types/schemas/application.schema.ts b/src/types/schemas/application.schema.ts
index 2b4529a..ccb2c4b 100644
--- a/src/types/schemas/application.schema.ts
+++ b/src/types/schemas/application.schema.ts
@@ -150,6 +150,9 @@ const businessFormSchema = z.object({
         message: "File must be a markdown file (.md).",
       }),
   ]),
+  country: z.string({
+    required_error: "Please select one of the option",
+  }),
 });
 
 export { businessFormSchema, projectFormSchema };

From 7c2b42e116f2c1fb6c7cc15fb8033c8325344c35 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 17 Oct 2024 15:11:30 +0700
Subject: [PATCH 06/11] Refactor form submission logic in Apply page and
 BusinessForm component

---
 src/app/business/apply/page.tsx         | 42 +++++++++++++---
 src/components/BusinessForm.tsx         | 66 ++++++++++++++++---------
 src/components/multipleSelector.tsx     | 21 +++++---
 src/types/schemas/application.schema.ts |  2 +-
 4 files changed, 93 insertions(+), 38 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index 4134aca..a1a1064 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -13,7 +13,7 @@ import { businessFormSchema } from "@/types/schemas/application.schema";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 export default function Apply() {
-  const [industry, setIndustry] = useState<string[]>([]);
+  const [industry, setIndustry] = useState<{id: number, name: string }[]>([]);
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
@@ -22,11 +22,35 @@ export default function Apply() {
   const MAX_FILE_SIZE = 5000000;
   const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
 
-
   const onSubmit: SubmitHandler<businessSchema> = async (data) => {
-    const transformedData = transformChoice(data);
+    const transformedData = await transformChoice(data);
     console.log(transformedData);
-    
+    await sendRegistration(transformedData);
+  };
+  const sendRegistration = async (recvData: any) => {
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+    // console.log(user?.id);
+
+    const { data, error } = await supabase
+      .from("business_application")
+      .insert([
+        {
+          user_id: user?.id,
+          business_name: recvData["companyName"],
+          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: recvData["businessPitchDeck"],
+          money_raised_to_date: recvData["totalRaised"],
+          community_size: recvData["communitySize"],
+        },
+      ])
+      .select();
+      console.table(data);
   };
 
   const createPitchDeckSchema = (inputType: string) => {
@@ -289,14 +313,19 @@ export default function Apply() {
   const fetchIndustry = async () => {
     let { data: BusinessType, error } = await supabase
       .from("business_type")
-      .select("value");
+      .select("id, value");
 
     if (error) {
       console.error(error);
     } else {
       if (BusinessType) {
         // console.table();
-        setIndustry(BusinessType.map((item) => item.value));
+        setIndustry(
+          BusinessType.map((item) => ({
+            id: item.id,
+            name: item.value,
+          }))
+        );
       }
     }
   };
@@ -375,7 +404,6 @@ export default function Apply() {
         setApplyProject={setApplyProject}
       />
 
-
       {/* </div>
         </div> */}
 
diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index 3880b9d..d66c790 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -18,12 +18,17 @@ 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 {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
-  industry: string[];
+  industry: {id: number, name:string}[];
   applyProject: boolean;
   setApplyProject: Function;
   onSubmit: SubmitHandler<businessSchema>;
@@ -35,13 +40,13 @@ const BusinessForm = ({
   industry,
 }: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
   const communitySize = [
-    "N/A",
-    "0-5K",
-    "5-10K",
-    "10-20K",
-    "20-50K",
-    "50-100K",
-    "100K+",
+    { 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),
@@ -49,14 +54,29 @@ const BusinessForm = ({
   });
   const [businessPitch, setBusinessPitch] = useState("text");
   const [businessPitchFile, setBusinessPitchFile] = useState("");
-  const [countries, setCountries] = useState([]);
+  const [countries, setCountries] = useState<{ id: number; name: string }[]>([]);
   useEffect(() => {
-    fetch("https://restcountries.com/v3.1/all")
-      .then((response) => response.json())
-      .then((data) => {
-        const countryList = data.map((country: { name: { common: any; }; }) => country.name.common);
-        setCountries(countryList.sort());
-      });
+    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);
+      }
+    };
+
+    fetchCountries();
   }, []);
   return (
     <Form {...form}>
@@ -112,8 +132,9 @@ const BusinessForm = ({
                       header={<>Country</>}
                       fieldName="country"
                       choices={countries}
-                      handleFunction={(selectedValues: string) => {
-                        field.onChange(selectedValues);
+                      handleFunction={(selectedValues: any) => {
+                        // console.log("Country selected: " + selectedValues.name);
+                        field.onChange(selectedValues.name);
                       }}
                       description={
                         <>Select the country where your business is based.</>
@@ -138,8 +159,9 @@ const BusinessForm = ({
                       header={<>Industry</>}
                       fieldName="industry"
                       choices={industry}
-                      handleFunction={(selectedValues: string) => {
-                        field.onChange(selectedValues);
+                      handleFunction={(selectedValues: any) => {
+                        // console.log("Type of selected value:", selectedValues.id);
+                        field.onChange(selectedValues.id);
                       }}
                       description={
                         <>
@@ -389,8 +411,8 @@ const BusinessForm = ({
                       header={<>What's the rough size of your community?</>}
                       fieldName="communitySize"
                       choices={communitySize}
-                      handleFunction={(selectedValues: string) => {
-                        field.onChange(selectedValues);
+                      handleFunction={(selectedValues: any) => {
+                        field.onChange(selectedValues.name);
                       }}
                       description={
                         <>
diff --git a/src/components/multipleSelector.tsx b/src/components/multipleSelector.tsx
index f3911a3..6ad439e 100644
--- a/src/components/multipleSelector.tsx
+++ b/src/components/multipleSelector.tsx
@@ -8,12 +8,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
 
 interface MultipleOptionSelectorProps {
   header: ReactElement;
   fieldName: string;
-  choices: string[];
+  choices: { id: number; name: string }[];
   handleFunction: Function | null;
   description: ReactElement;
   placeholder: string;
@@ -21,6 +21,7 @@ interface MultipleOptionSelectorProps {
 }
 
 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,10 +29,14 @@ export function MultipleOptionSelector(props: MultipleOptionSelectorProps) {
       </Label>
       <div className="flex space-x-5">
         <Select
-          onValueChange={(value) => {
-            if (props.handleFunction) {
-              props.handleFunction(props.fieldName, value);
-              // console.log(value, props.fieldName);
+          value={value}
+          onValueChange={(id) => {
+            setValue(id);
+            const selectedChoice = props.choices.find(
+              (choice) => choice.id.toString() === id
+            ); 
+            if (selectedChoice && props.handleFunction) {
+              props.handleFunction(selectedChoice);
             }
           }}
         >
@@ -42,8 +47,8 @@ export function MultipleOptionSelector(props: MultipleOptionSelectorProps) {
             <SelectGroup>
               <SelectLabel>{props.selectLabel}</SelectLabel>
               {props.choices.map((i) => (
-                <SelectItem key={i} value={i}>
-                  {i}
+                <SelectItem key={i.id} value={i.id.toString()}>
+                  {i.name}
                 </SelectItem>
               ))}
             </SelectGroup>
diff --git a/src/types/schemas/application.schema.ts b/src/types/schemas/application.schema.ts
index ccb2c4b..c0fce0a 100644
--- a/src/types/schemas/application.schema.ts
+++ b/src/types/schemas/application.schema.ts
@@ -95,7 +95,7 @@ const businessFormSchema = z.object({
   companyName: z.string().min(5, {
     message: "Company name must be at least 5 characters.",
   }),
-  industry: z.string({
+  industry: z.number({
     required_error: "Please select one of the option",
   }),
   isInUS: z

From e44774f1cdb038cf4be80326c7ab62d0dfd572da Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 17 Oct 2024 15:21:14 +0700
Subject: [PATCH 07/11] Refactor DualOptionSelector layout in BusinessForm
 component

---
 src/components/BusinessForm.tsx | 115 +++++++++++++++++---------------
 1 file changed, 61 insertions(+), 54 deletions(-)

diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index d66c790..989ad75 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -222,25 +222,28 @@ const BusinessForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <DualOptionSelector
-                      name="isInUS"
-                      label={
-                        <>Is your company incorporated in the United States?</>
-                      }
-                      choice1="Yes"
-                      choice2="No"
-                      handleFunction={(selectedValues: string) => {
-                        // setIsInUS;
-                        field.onChange(selectedValues);
-                      }}
-                      description={
-                        <>
-                          Only companies that are incorporated or formed in the
-                          US are eligible to raise via Reg CF.
-                        </>
-                      }
-                      value={field.value}
-                    />
+                    <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>
@@ -254,25 +257,27 @@ const BusinessForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <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 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>
@@ -286,22 +291,24 @@ const BusinessForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <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 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>

From 581c8c90239f25e0b2a6ce9843ffbc0d923b9913 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 19 Oct 2024 16:36:52 +0700
Subject: [PATCH 08/11] Refactor package.json and package-lock.json to add
 sweetalert2 dependency

---
 package-lock.json               |  11 +
 package.json                    |   1 +
 src/app/business/apply/page.tsx |  41 ++-
 src/app/project/apply/page.tsx  | 311 +++++++++++++++++++++
 src/components/ProjectForm.tsx  | 463 ++++++++++++++++++++++++++++++++
 5 files changed, 804 insertions(+), 23 deletions(-)
 create mode 100644 src/app/project/apply/page.tsx
 create mode 100644 src/components/ProjectForm.tsx

diff --git a/package-lock.json b/package-lock.json
index 315b9b8..eb29a8d 100644
--- a/package-lock.json
+++ b/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"
@@ -8072,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",
diff --git a/package.json b/package.json
index cbb2384..2bed454 100644
--- a/package.json
+++ b/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"
diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index a1a1064..fe94bda 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -1,19 +1,20 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
-import { Textarea } from "@/components/ui/textarea";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import BusinessForm from "@/components/BusinessForm";
 import { businessFormSchema } from "@/types/schemas/application.schema";
+import Swal from "sweetalert2";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
-export default function Apply() {
-  const [industry, setIndustry] = useState<{id: number, name: string }[]>([]);
+export default function ApplyBusiness() {
+  const [industry, setIndustry] = useState<{ id: number; name: string }[]>([]);
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
@@ -50,7 +51,14 @@ export default function Apply() {
         },
       ])
       .select();
-      console.table(data);
+    console.table(data);
+    Swal.fire({
+      icon: error == null ? "success" : "error",
+      title: error == null ? "success" : "Error: " + error.code,
+      text:
+        error == null ? "your application has been submitted" : error.message,
+      confirmButtonColor: error == null ? "green" : "red",
+    });
   };
 
   const createPitchDeckSchema = (inputType: string) => {
@@ -403,12 +411,8 @@ export default function Apply() {
         applyProject={applyProject}
         setApplyProject={setApplyProject}
       />
-
-      {/* </div>
-        </div> */}
-
-      {/* apply first project */}
-      {applyProject && (
+      <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">
           {/* header */}
           <div className="ml-[15%]">
@@ -704,16 +708,7 @@ export default function Apply() {
             )}
           </div>
         </div>
-      )}
-      {/* Submit */}
-      {/* <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>
   );
 }
diff --git a/src/app/project/apply/page.tsx b/src/app/project/apply/page.tsx
new file mode 100644
index 0000000..ae72c89
--- /dev/null
+++ b/src/app/project/apply/page.tsx
@@ -0,0 +1,311 @@
+"use client";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+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("");
+  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">
+        {/* 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"
+                {...registerSecondForm("projectName")}
+              />
+            </div>
+          </div>
+          {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}
+                {...(projectPitch === "text"
+                  ? registerSecondForm("projectPitchDeck", {
+                      required: true,
+                    })
+                  : {
+                      onChange: (e) => {
+                        const file = e.target.files?.[0];
+                        setValueProject("projectPitchDeck", file);
+                        setProjectPitchFile(file?.name || "");
+                      },
+                    })}
+              />
+              <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={() => {
+                    setValueProject("projectPitchDeck", "");
+                    setProjectPitchFile("");
+                  }}
+                >
+                  Remove
+                </Button>
+              </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/*"
+                onChange={(e) => {
+                  const file = e.target.files?.[0];
+                  registerSecondForm("projectLogo").onChange({
+                    target: { name: "projectLogo", value: file },
+                  });
+                }}
+              />
+              <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>
+          )}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="projectPhotos" className="font-bold text-lg mt-10">
+              Project photos
+            </Label>
+            <div className="flex space-x-5">
+              <Input
+                type="file"
+                id="projectPhotos"
+                multiple
+                accept="image/*"
+                className="w-96"
+                {...registerSecondForm("projectPhotos", {
+                  required: true,
+                  onChange: handleFileChange,
+                })}
+              />
+              <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"
+                    type="reset"
+                  >
+                    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>
+    </div>
+  );
+}
diff --git a/src/components/ProjectForm.tsx b/src/components/ProjectForm.tsx
new file mode 100644
index 0000000..51d0da3
--- /dev/null
+++ b/src/components/ProjectForm.tsx
@@ -0,0 +1,463 @@
+import { useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { DualOptionSelector } from "@/components/dualSelector";
+import { MultipleOptionSelector } from "@/components/multipleSelector";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  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 { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+
+type projectSchema = z.infer<typeof projectFormSchema>;
+
+interface ProjectFormProps {
+  onSubmit: SubmitHandler<projectSchema>;
+}
+const BusinessForm = ({
+  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 [applyProject, setApplyProject] = useState(false);
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
+  const [projectPitchFile, setProjectPitchFile] = useState("");
+
+  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"
+      >
+        <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>
+          <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="industry"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>Industry</>}
+                      fieldName="industry"
+                      choices={industry}
+                      handleFunction={(selectedValues: any) => {
+                        // console.log("Type of selected value:", selectedValues.id);
+                        field.onChange(selectedValues.id);
+                      }}
+                      description={
+                        <>
+                          Choose the industry that best aligns with your
+                          business.
+                        </>
+                      }
+                      placeholder="Select an industry"
+                      selectLabel="Industry"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Raised Money */}
+            <FormField
+              control={form.control}
+              name="totalRaised"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="mt-10 space-y-5">
+                    <Label htmlFor="totalRaised" className="font-bold text-lg">
+                      How much money has your company <br /> raised to date?
+                    </Label>
+                    <FormControl>
+                      <div className="flex space-x-5">
+                        <Input
+                          type="number"
+                          id="totalRaised"
+                          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">
+                          The sum total of past financing, including angel or
+                          venture <br />
+                          capital, loans, grants, or token sales.
+                        </span>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            {/* Incorporated in US */}
+            <FormField
+              control={form.control}
+              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>
+  );
+};
+
+export default BusinessForm;

From d6c967f0b44681c979aafee71fa7a1ea9a0fc9ea Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 19 Oct 2024 16:57:06 +0700
Subject: [PATCH 09/11] Refactor ProjectForm

---
 src/components/ProjectForm.tsx | 306 ++++++++++++++-------------------
 1 file changed, 131 insertions(+), 175 deletions(-)

diff --git a/src/components/ProjectForm.tsx b/src/components/ProjectForm.tsx
index 51d0da3..8b09cbe 100644
--- a/src/components/ProjectForm.tsx
+++ b/src/components/ProjectForm.tsx
@@ -6,7 +6,6 @@ import { MultipleOptionSelector } from "@/components/multipleSelector";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -25,13 +24,14 @@ import {
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { Textarea } from "./ui/textarea";
 
 type projectSchema = z.infer<typeof projectFormSchema>;
 
 interface ProjectFormProps {
   onSubmit: SubmitHandler<projectSchema>;
 }
-const BusinessForm = ({
+const ProjectForm = ({
   onSubmit,
 }: ProjectFormProps & { onSubmit: SubmitHandler<projectSchema> }) => {
   const form = useForm<projectSchema>({
@@ -47,6 +47,26 @@ const BusinessForm = ({
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
   const [projectPitchFile, setProjectPitchFile] = useState("");
 
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    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);
+        return updatedImages;
+      });
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setSelectedImages((prevImages) => {
+      const updatedImages = prevImages.filter((_, i) => i !== index);
+      console.log("After removal - Updated Images:", updatedImages);
+      return updatedImages;
+    });
+  };
+
   const fetchProjectType = async () => {
     let { data: ProjectType, error } = await supabase
       .from("project_type")
@@ -139,163 +159,25 @@ const BusinessForm = ({
             {/* short description */}
             <FormField
               control={form.control}
-              name="industry"
+              name="shortDescription"
               render={({ field }: { field: any }) => (
                 <FormItem>
                   <FormControl>
-                    <MultipleOptionSelector
-                      header={<>Industry</>}
-                      fieldName="industry"
-                      choices={industry}
-                      handleFunction={(selectedValues: any) => {
-                        // console.log("Type of selected value:", selectedValues.id);
-                        field.onChange(selectedValues.id);
-                      }}
-                      description={
-                        <>
-                          Choose the industry that best aligns with your
-                          business.
-                        </>
-                      }
-                      placeholder="Select an industry"
-                      selectLabel="Industry"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {/* Raised Money */}
-            <FormField
-              control={form.control}
-              name="totalRaised"
-              render={({ field }) => (
-                <FormItem>
-                  <div className="mt-10 space-y-5">
-                    <Label htmlFor="totalRaised" className="font-bold text-lg">
-                      How much money has your company <br /> raised to date?
-                    </Label>
-                    <FormControl>
+                    <div className="mt-10 space-y-5">
+                      <FormLabel className="font-bold text-lg">
+                        Short description
+                      </FormLabel>
                       <div className="flex space-x-5">
-                        <Input
-                          type="number"
-                          id="totalRaised"
+                        <Textarea
+                          id="shortDescription"
                           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">
-                          The sum total of past financing, including angel or
-                          venture <br />
-                          capital, loans, grants, or token sales.
+                          Could you provide a brief description of your project{" "}
+                          <br /> in one or two sentences?
                         </span>
                       </div>
-                    </FormControl>
-                    <FormMessage />
-                  </div>
-                </FormItem>
-              )}
-            />
-
-            {/* Incorporated in US */}
-            <FormField
-              control={form.control}
-              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 />
@@ -306,7 +188,7 @@ const BusinessForm = ({
             {/* Pitch Deck */}
             <FormField
               control={form.control}
-              name="businessPitchDeck"
+              name="projectPitchDeck"
               render={({ field }) => (
                 <FormItem>
                   <div className="space-y-5 mt-10">
@@ -319,9 +201,9 @@ const BusinessForm = ({
                           <Button
                             type="button"
                             variant={
-                              businessPitch === "text" ? "default" : "outline"
+                              projectPitch === "text" ? "default" : "outline"
                             }
-                            onClick={() => setBusinessPitch("text")}
+                            onClick={() => setProjectPitch("text")}
                             className="w-32 h-12 text-base"
                           >
                             Paste URL
@@ -329,9 +211,9 @@ const BusinessForm = ({
                           <Button
                             type="button"
                             variant={
-                              businessPitch === "file" ? "default" : "outline"
+                              projectPitch === "file" ? "default" : "outline"
                             }
-                            onClick={() => setBusinessPitch("file")}
+                            onClick={() => setProjectPitch("file")}
                             className="w-32 h-12 text-base"
                           >
                             Upload a file
@@ -339,18 +221,16 @@ const BusinessForm = ({
                         </div>
                         <div className="flex space-x-5">
                           <Input
-                            type={businessPitch === "file" ? "file" : "text"}
+                            type={projectPitch === "file" ? "file" : "text"}
                             placeholder={
-                              businessPitch === "file"
+                              projectPitch === "file"
                                 ? "Upload your Markdown file"
                                 : "https:// "
                             }
-                            accept={
-                              businessPitch === "file" ? ".md" : undefined
-                            }
+                            accept={projectPitch === "file" ? ".md" : undefined}
                             onChange={(e) => {
                               const value = e.target;
-                              if (businessPitch === "file") {
+                              if (projectPitch === "file") {
                                 const file = value.files?.[0];
                                 field.onChange(file || "");
                               } else {
@@ -361,26 +241,20 @@ const BusinessForm = ({
                           />
 
                           <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>
+                            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>
-                        {businessPitchFile && (
+                        {projectPitchFile && (
                           <div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
-                            <span>1. {businessPitchFile}</span>
+                            <span>1. {projectPitchFile}</span>
                             <Button
                               className="ml-4"
                               onClick={() => {
-                                setBusinessPitchFile("");
+                                setProjectPitchFile("");
                               }}
                             >
                               Remove
@@ -395,6 +269,88 @@ const BusinessForm = ({
               )}
             />
 
+            {/* 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={handleFileChange}
+                        />
+                        <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)}
+                              className="ml-4"
+                              type="reset"
+                            >
+                              Remove
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             {/* Community Size */}
             <FormField
               control={form.control}
@@ -460,4 +416,4 @@ const BusinessForm = ({
   );
 };
 
-export default BusinessForm;
+export default ProjectForm;

From 0e25a210feb5f2f9b1f819bab44bfd636b45708d Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 19 Oct 2024 17:32:56 +0700
Subject: [PATCH 10/11] Refactor projectFormSchema in application.schema.ts

---
 src/app/project/apply/page.tsx          | 306 +----------
 src/components/ProjectForm.tsx          | 641 +++++++++++++-----------
 src/types/schemas/application.schema.ts |   9 +-
 3 files changed, 359 insertions(+), 597 deletions(-)

diff --git a/src/app/project/apply/page.tsx b/src/app/project/apply/page.tsx
index ae72c89..b4574dc 100644
--- a/src/app/project/apply/page.tsx
+++ b/src/app/project/apply/page.tsx
@@ -1,310 +1,26 @@
 "use client";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+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">
-        {/* 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"
-                {...registerSecondForm("projectName")}
-              />
-            </div>
-          </div>
-          {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}
-                {...(projectPitch === "text"
-                  ? registerSecondForm("projectPitchDeck", {
-                      required: true,
-                    })
-                  : {
-                      onChange: (e) => {
-                        const file = e.target.files?.[0];
-                        setValueProject("projectPitchDeck", file);
-                        setProjectPitchFile(file?.name || "");
-                      },
-                    })}
-              />
-              <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={() => {
-                    setValueProject("projectPitchDeck", "");
-                    setProjectPitchFile("");
-                  }}
-                >
-                  Remove
-                </Button>
-              </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/*"
-                onChange={(e) => {
-                  const file = e.target.files?.[0];
-                  registerSecondForm("projectLogo").onChange({
-                    target: { name: "projectLogo", value: file },
-                  });
-                }}
-              />
-              <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>
-          )}
-          <div className="mt-10 space-y-5">
-            <Label htmlFor="projectPhotos" className="font-bold text-lg mt-10">
-              Project photos
-            </Label>
-            <div className="flex space-x-5">
-              <Input
-                type="file"
-                id="projectPhotos"
-                multiple
-                accept="image/*"
-                className="w-96"
-                {...registerSecondForm("projectPhotos", {
-                  required: true,
-                  onChange: handleFileChange,
-                })}
-              />
-              <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"
-                    type="reset"
-                  >
-                    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>
+        <ProjectForm onSubmit={onSubmit} />
       </div>
     </div>
   );
diff --git a/src/components/ProjectForm.tsx b/src/components/ProjectForm.tsx
index 8b09cbe..3cf2888 100644
--- a/src/components/ProjectForm.tsx
+++ b/src/components/ProjectForm.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { SubmitHandler, useForm, ControllerRenderProps } from "react-hook-form";
 import { Button } from "@/components/ui/button";
-import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
 import {
   Form,
@@ -16,17 +15,11 @@ import { projectFormSchema } 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";
 import { Textarea } from "./ui/textarea";
 
 type projectSchema = z.infer<typeof projectFormSchema>;
+type FieldType = ControllerRenderProps<any, "projectPhotos">;
 
 interface ProjectFormProps {
   onSubmit: SubmitHandler<projectSchema>;
@@ -43,26 +36,31 @@ const ProjectForm = ({
     { id: number; name: string }[]
   >([]);
   const [projectPitch, setProjectPitch] = useState("text");
-  const [applyProject, setApplyProject] = useState(false);
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
   const [projectPitchFile, setProjectPitchFile] = useState("");
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  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) => {
+  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;
     });
   };
@@ -86,7 +84,7 @@ const ProjectForm = ({
     }
   };
   useEffect(() => {
-    fetchProjectType;
+    fetchProjectType();
   }, []);
   return (
     <Form {...form}>
@@ -94,200 +92,232 @@ const ProjectForm = ({
         onSubmit={form.handleSubmit(onSubmit as SubmitHandler<projectSchema>)}
         className="space-y-8"
       >
-        <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>
-          <div className="ml-96 mt-5 space-y-10">
-            {/* project name */}
-            <FormField
-              control={form.control}
-              name="projectName"
-              render={({ field }: { field: any }) => (
-                <FormItem>
+        <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">
-                      Project name
+                      Short description
                     </FormLabel>
-                    <FormControl>
+                    <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="text"
-                          id="projectName"
-                          className="w-96"
-                          {...field}
+                          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"
                         />
-                      </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?
+                          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 />
-                </FormItem>
-              )}
-            />
+                </div>
+              </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 />
+          {/* 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>
-                </FormItem>
-              )}
-            />
+                </FormControl>
+                <FormMessage />
+              </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>
+          {/* 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="projectLogo"
-                        className="w-96"
+                        id="projectPhotos"
+                        multiple
                         accept="image/*"
-                        onChange={(e) => {
-                          const file = e.target.files?.[0];
-                          field.onChange(file || "");
+                        className="w-96"
+                        onChange={(event) => {
+                          handleFileChange(event, field);
                         }}
                       />
                       <span className="text-[12px] text-neutral-500 self-center">
@@ -295,121 +325,136 @@ const ProjectForm = ({
                         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={handleFileChange}
-                        />
-                        <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"
+                    <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"
                           >
-                            <span>{image.name}</span>
-                            <Button
-                              variant="outline"
-                              onClick={() => handleRemoveImage(index)}
-                              className="ml-4"
-                              type="reset"
-                            >
-                              Remove
-                            </Button>
-                          </div>
-                        ))}
-                      </div>
+                            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>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {/* Community Size */}
-            <FormField
-              control={form.control}
-              name="communitySize"
-              render={({ field }) => (
-                <FormItem>
+                </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>
-                    <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"
-                    />
+                    <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>
-                  <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>
+                <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>
diff --git a/src/types/schemas/application.schema.ts b/src/types/schemas/application.schema.ts
index c0fce0a..1111349 100644
--- a/src/types/schemas/application.schema.ts
+++ b/src/types/schemas/application.schema.ts
@@ -53,10 +53,10 @@ const projectFormSchema = z.object({
   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 (
+          value.length > 0 &&
+          Array.from(value).every((item) => item instanceof File)
+        );
       }
       return false;
     },
@@ -65,6 +65,7 @@ const projectFormSchema = z.object({
         "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.",

From bc6439822cf096aaea8cf4886cf3f055e733ace1 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Sat, 19 Oct 2024 17:48:10 +0700
Subject: [PATCH 11/11] Refactor BusinessForm component to fetch industry data
 from Supabase and countries data from a REST API

---
 src/app/business/apply/page.tsx | 624 +-------------------------------
 src/components/BusinessForm.tsx |  68 ++--
 2 files changed, 56 insertions(+), 636 deletions(-)

diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx
index fe94bda..bfdbd60 100644
--- a/src/app/business/apply/page.tsx
+++ b/src/app/business/apply/page.tsx
@@ -1,27 +1,15 @@
 "use client";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
-import { useEffect, useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
+import { useState } from "react";
+import { SubmitHandler } from "react-hook-form";
 import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
 import BusinessForm from "@/components/BusinessForm";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 import Swal from "sweetalert2";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 export default function ApplyBusiness() {
-  const [industry, setIndustry] = useState<{ id: number; name: string }[]>([]);
-  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 MAX_FILE_SIZE = 5000000;
-  const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
 
   const onSubmit: SubmitHandler<businessSchema> = async (data) => {
     const transformedData = await transformChoice(data);
@@ -56,220 +44,18 @@ export default function ApplyBusiness() {
       icon: error == null ? "success" : "error",
       title: error == null ? "success" : "Error: " + error.code,
       text:
-        error == null ? "your application has been submitted" : error.message,
+        error == null ? "Your application has been submitted" : error.message,
       confirmButtonColor: error == null ? "green" : "red",
+    }).then((result) => {
+      if (result.isConfirmed && applyProject) {
+        window.location.href = "/project/apply";
+      } else {
+        window.location.href = "/";
+      }
     });
   };
 
-  const createPitchDeckSchema = (inputType: string) => {
-    if (inputType === "text") {
-      return z
-        .string()
-        .url("Pitch deck must be a valid URL.")
-        .refine((url: string) => url.endsWith(".md"), {
-          message: "Pitch deck URL must link to a markdown file (.md).",
-        });
-    } else if (inputType === "file") {
-      return z
-        .custom<File>(
-          (val: any) => {
-            return val instanceof File;
-          },
-          {
-            message: "Input must be a file.",
-          }
-        )
-        .refine((file: File) => file.size < MAX_FILE_SIZE, {
-          message: "File can't be bigger than 5MB.",
-        })
-        .refine((file: File) => file.name.endsWith(".md"), {
-          message: "File must be a markdown file (.md).",
-        });
-    } else {
-      return z.any(); // avoid undefined
-    }
-  };
-  const imageSchema = z
-    .custom<File>(
-      (val: any) =>
-        val && typeof val === "object" && "size" in val && "type" in val,
-      {
-        message: "Input must be a file.",
-      }
-    )
-    .refine((file: File) => file.size < MAX_FILE_SIZE, {
-      message: "File can't be bigger than 5MB.",
-    })
-    .refine((file: 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, {
-      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.",
-      }),
-    projectPitchDeck: createPitchDeckSchema(projectPitch),
-    projectLogo: imageSchema,
-
-    projectPhotos: z.custom(
-      (value: string | Iterable<any> | ArrayLike<any>) => {
-        console.log("Tozod", 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 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: string) => !isNaN(Date.parse(value)), {
-        message: "Invalid date-time format.",
-      })
-      .transform((value: string | number | Date) => new Date(value))
-      .refine((date: 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.",
-  //   }),
-  //   industry: z.string({
-  //     required_error: "Please select one of the option",
-  //   }),
-  //   isInUS: z
-  //     .string({
-  //       required_error: "Please select either 'Yes' or 'No'.",
-  //     })
-  //     .transform((val: string) => val.toLowerCase())
-  //     .refine((val: string) => val === "yes" || val === "no", {
-  //       message: "Please select either 'Yes' or 'No'.",
-  //     }),
-  //   isForSale: z
-  //     .string({
-  //       required_error: "Please select either 'Yes' or 'No'.",
-  //     })
-  //     .transform((val: string) => val.toLowerCase())
-  //     .refine((val: string) => val === "yes" || val === "no", {
-  //       message: "Please select either 'Yes' or 'No'.",
-  //     }),
-  //   isGenerating: z
-  //     .string({
-  //       required_error: "Please select either 'Yes' or 'No'.",
-  //     })
-  //     .transform((val: string) => val.toLowerCase())
-  //     .refine((val: string) => 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: createPitchDeckSchema(businessPitch),
-  // });
   let supabase = createSupabaseClient();
-  // const {
-  //   register,
-  //   handleSubmit,
-  //   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",
-    "0-5K",
-    "5-10K",
-    "10-20K",
-    "20-50K",
-    "50-100K",
-    "100K+",
-  ];
-
-  // useEffect(() => {
-  //   register("industry");
-  //   register("isInUS");
-  //   register("isForSale");
-  //   register("isGenerating");
-  // }, [register]);
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    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);
-        // ensure we're setting an array of File objects
-        setValueProject("projectPhotos", updatedImages);
-        return updatedImages;
-      });
-    }
-  };
-
-  const handleRemoveImage = (index: number) => {
-    setSelectedImages((prevImages) => {
-      const updatedImages = prevImages.filter((_, i) => i !== index);
-      console.log("After removal - Updated Images:", updatedImages);
-      // ensure we're setting an array of File objects
-      setValueProject("projectPhotos", updatedImages);
-      return updatedImages;
-    });
-  };
-
-  const ensureArrayValue = (value: any): File[] => {
-    if (Array.isArray(value)) return value;
-    if (value instanceof File) return [value];
-    return [];
-  };
-
   const transformChoice = (data: any) => {
     // convert any yes and no to true or false
     const transformedData = Object.entries(data).reduce(
@@ -292,100 +78,7 @@ export default function ApplyBusiness() {
     );
     return transformedData;
   };
-  // const handleBusinessPitchChange = (type: string) => {
-  //   setBusinessPitch(type);
-  //   // clear out old data
-  //   setValueBusiness("pitchDeck", "");
-  // };
 
-  // const handleBusinessFieldChange = (fieldName: string, value: any) => {
-  //   switch (fieldName) {
-  //     case "isInUS":
-  //       setIsInUS(value);
-  //       break;
-  //     case "isForSale":
-  //       setIsForSale(value);
-  //       break;
-  //     case "isGenerating":
-  //       setIsGenerating(value);
-  //       break;
-  //   }
-  //   setValueBusiness(fieldName, value);
-  // };
-  const handleProjectFieldChange = (fieldName: string, value: any) => {
-    switch (fieldName) {
-    }
-    setValueProject(fieldName, value);
-  };
-
-  const fetchIndustry = async () => {
-    let { data: BusinessType, error } = await supabase
-      .from("business_type")
-      .select("id, value");
-
-    if (error) {
-      console.error(error);
-    } else {
-      if (BusinessType) {
-        // console.table();
-        setIndustry(
-          BusinessType.map((item) => ({
-            id: item.id,
-            name: item.value,
-          }))
-        );
-      }
-    }
-  };
-
-  const onSubmitSingleForm = (data: any) => {
-    // const pitchDeckSchema = createPitchDeckSchema(businessPitch);
-    // pitchDeckSchema.parse(data.businessPitchDeck);
-    console.log("Valid form input:", data);
-    alert(JSON.stringify(data));
-  };
-
-  const onSubmitBothForms = (firstFormData: any, secondFormData: any) => {
-    const formattedSecondFormData = {
-      ...secondFormData,
-      projectPhotos: ensureArrayValue(secondFormData.projectPhotos),
-    };
-    alert(JSON.stringify(firstFormData));
-    alert(JSON.stringify(formattedSecondFormData));
-    console.log("Both forms submitted:", {
-      firstFormData,
-      formattedSecondFormData,
-    });
-  };
-
-  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("project_type")
-      .select("value");
-
-    if (error) {
-      console.error(error);
-    } else {
-      if (ProjectType) {
-        console.table(ProjectType);
-        setProjectType(ProjectType.map((item) => item.value));
-      }
-    }
-  };
-  useEffect(() => {
-    fetchIndustry();
-    fetchProjectType();
-  }, []);
   return (
     <div>
       <div className="grid grid-flow-row auto-rows-max w-full h-52 md:h-92 bg-gray-100 dark:bg-gray-800 p-5">
@@ -406,309 +99,10 @@ export default function ApplyBusiness() {
       {/* form */}
       {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
       <BusinessForm
-        industry={industry}
         onSubmit={onSubmit}
         applyProject={applyProject}
         setApplyProject={setApplyProject}
       />
-      <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">
-          {/* 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"
-                  {...registerSecondForm("projectName")}
-                />
-              </div>
-            </div>
-            {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}
-                  {...(projectPitch === "text"
-                    ? registerSecondForm("projectPitchDeck", {
-                        required: true,
-                      })
-                    : {
-                        onChange: (e) => {
-                          const file = e.target.files?.[0];
-                          setValueProject("projectPitchDeck", file);
-                          setProjectPitchFile(file?.name || "");
-                        },
-                      })}
-                />
-                <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={() => {
-                      setValueProject("projectPitchDeck", "");
-                      setProjectPitchFile("");
-                    }}
-                  >
-                    Remove
-                  </Button>
-                </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/*"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    registerSecondForm("projectLogo").onChange({
-                      target: { name: "projectLogo", value: file },
-                    });
-                  }}
-                />
-                <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>
-            )}
-            <div className="mt-10 space-y-5">
-              <Label
-                htmlFor="projectPhotos"
-                className="font-bold text-lg mt-10"
-              >
-                Project photos
-              </Label>
-              <div className="flex space-x-5">
-                <Input
-                  type="file"
-                  id="projectPhotos"
-                  multiple
-                  accept="image/*"
-                  className="w-96"
-                  {...registerSecondForm("projectPhotos", {
-                    required: true,
-                    onChange: handleFileChange,
-                  })}
-                />
-                <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"
-                      type="reset"
-                    >
-                      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>
-      </div>
     </div>
   );
 }
diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx
index 989ad75..ced01a8 100644
--- a/src/components/BusinessForm.tsx
+++ b/src/components/BusinessForm.tsx
@@ -24,11 +24,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@radix-ui/react-tooltip";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
-  industry: {id: number, name:string}[];
   applyProject: boolean;
   setApplyProject: Function;
   onSubmit: SubmitHandler<businessSchema>;
@@ -37,7 +37,6 @@ const BusinessForm = ({
   applyProject,
   setApplyProject,
   onSubmit,
-  industry,
 }: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
   const communitySize = [
     { id: 1, name: "N/A" },
@@ -52,31 +51,58 @@ const BusinessForm = ({
     resolver: zodResolver(businessFormSchema),
     defaultValues: {},
   });
+  let supabase = createSupabaseClient();
   const [businessPitch, setBusinessPitch] = useState("text");
   const [businessPitchFile, setBusinessPitchFile] = useState("");
-  const [countries, setCountries] = useState<{ id: number; name: string }[]>([]);
-  useEffect(() => {
-    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,
-          })
+  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");
+
+    if (error) {
+      console.error(error);
+    } else {
+      if (BusinessType) {
+        // console.table();
+        setIndustry(
+          BusinessType.map((item) => ({
+            id: item.id,
+            name: item.value,
+          }))
         );
-
-        setCountries(countryList.sort((a: { name: string; }, b: { name: any; }) => a.name.localeCompare(b.name)));
-      } catch (error) {
-        console.error("Error fetching countries:", error);
       }
-    };
+    }
+  };
+  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}>