Refactor file upload path and add loading animation to ApplyProject component

package-lock.json

@@ -42,7 +42,7 @@
         "lucide-react": "^0.428.0",
         "next": "^14.2.15",
         "next-themes": "^0.3.0",
-        "react": "^18",
+        "react": "^18.3.1",
         "react-countup": "^6.5.3",
         "react-dom": "^18",
         "react-hook-form": "^7.53.0",
@@ -62,7 +62,7 @@
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/next": "^8.0.7",
         "@types/node": "^20",
-        "@types/react": "^18",
+        "@types/react": "^18.3.12",
         "@types/react-dom": "^18",
         "@types/react-fade-in": "^2.0.2",
         "@types/react-lottie": "^1.2.10",
@@ -2363,9 +2363,9 @@
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/react": {
-      "version": "18.3.10",
+      "version": "18.3.12",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
-      "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==",
+      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"

package.json

@@ -43,7 +43,7 @@
     "lucide-react": "^0.428.0",
     "next": "^14.2.15",
     "next-themes": "^0.3.0",
-    "react": "^18",
+    "react": "^18.3.1",
     "react-countup": "^6.5.3",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
@@ -63,7 +63,7 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/next": "^8.0.7",
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18",
     "@types/react-fade-in": "^2.0.2",
     "@types/react-lottie": "^1.2.10",

src/app/api/dealApi.ts

@@ -6,12 +6,13 @@ export type Deal = {
   created_time: Date;
   investor_id: string;
 };
+const supabase = createSupabaseClient();
 
 export async function getDealList() {
-  const supabase = createSupabaseClient();
   const { data: dealData, error } = await supabase
-    .from('business')
+    .from("business")
-    .select(`
+    .select(
+      `
       id,
       project (
         id,
@@ -21,13 +22,14 @@ export async function getDealList() {
           investor_id
         )
       )
-    `)
+    `
-    .eq('user_id', await getCurrentUserID())
+    )
+    .eq("user_id", await getCurrentUserID())
     .single();
 
   if (error || !dealData) {
     alert(JSON.stringify(error));
-      console.error('Error fetching deal list:', error);
+    console.error("Error fetching deal list:", error);
   } else {
     const dealList = dealData.project[0].investment_deal;
 
@@ -41,4 +43,4 @@ export async function getDealList() {
       new Date(b.created_time).getTime() - new Date(a.created_time).getTime();
     return dealList.sort(byCreatedTimeDesc);
   }
-};
+}

src/app/business/apply/page.tsx

@@ -89,11 +89,16 @@ export default function ApplyBusiness() {
       .from("business")
       .select("*")
       .eq("user_id", userID);
-    console.table(business);
+    let { data: businessApplication, error: applicationError } = await supabase
-    if (error) {
+      .from("business_application")
+      .select("*")
+      .eq("user_id", userID);
+    // console.table(business);
+    if (error || applicationError) {
       console.error(error);
+      console.error(applicationError);
     }
-    if (business) {
+    if ((business && business.length != 0) || (businessApplication && businessApplication.length != 0)) {
       return true;
     }
     return false;

src/app/dashboard/page.tsx

@@ -14,6 +14,57 @@ import { useState } from "react";
 
 import { useDealList } from "./hook";
 
+const data = [
+  {
+    name: "Jan",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Feb",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Mar",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Apr",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "May",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jun",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jul",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Aug",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Sep",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Oct",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Nov",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Dec",
+    value: Math.floor(Math.random() * 5000) + 1000,
+  },
+];
+
 export default function Dashboard() {
   const [graphType, setGraphType] = useState("line");
   const dealList = useDealList();
@@ -166,7 +217,7 @@ export default function Dashboard() {
                     <CardTitle>Overview</CardTitle>
                   </CardHeader>
                   <CardContent className="pl-2">
-                    <Overview graphType={graphType} />
+                    <Overview graphType={graphType} data={data} />
                     {/* tab to switch between line and bar graph */}
                     <Tabs
                       defaultValue="line"

src/app/portfolio/[uid]/page.tsx

@@ -0,0 +1,35 @@
+import { Overview } from "@/components/ui/overview";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { getInvestorDeal } from "@/lib/data/query";
+
+export default async function Portfolio({
+  params,
+}: {
+  params: { uid: string };
+}) {
+  const supabase = createSupabaseClient();
+  const { data: deals, error } = await getInvestorDeal(supabase, params.uid);
+  if (error) {
+    console.error(error);
+  }
+  const getMonthName = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString("default", { month: "long" });
+  };
+
+  const graphData = deals
+    ? deals.map((item) => ({
+      // convert month's index to string
+        name: getMonthName(item.created_time),
+        value: item.deal_amount as number,
+      }))
+    : [];
+
+  return (
+    <div>
+      {/* {JSON.stringify(deals)} */}
+      {JSON.stringify(graphData)}
+      <Overview graphType="line" data={graphData}></Overview>
+    </div>
+  );
+}

src/app/project/apply/page.tsx

@@ -17,7 +17,7 @@ const BUCKET_PITCH_APPLICATION_NAME = "project-application";
 export default function ApplyProject() {
   const [isSuccess, setIsSuccess] = useState(true);
   const onSubmit: SubmitHandler<projectSchema> = async (data) => {
-    alert("มาแน้ววว");
+    // alert("มาแน้ววว");
     await sendApplication(data);
     // console.table(data);
     // console.log(typeof data["projectPhotos"], data["projectPhotos"]);

src/components/ui/overview.tsx

@@ -2,66 +2,67 @@
 
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts";
 
-const data = [
+// const data = [
-  {
+//   {
-    name: "Jan",
+//     name: "Jan",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Feb",
+//     name: "Feb",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Mar",
+//     name: "Mar",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Apr",
+//     name: "Apr",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "May",
+//     name: "May",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Jun",
+//     name: "Jun",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Jul",
+//     name: "Jul",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Aug",
+//     name: "Aug",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Sep",
+//     name: "Sep",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Oct",
+//     name: "Oct",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Nov",
+//     name: "Nov",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-  {
+//   {
-    name: "Dec",
+//     name: "Dec",
-    total: Math.floor(Math.random() * 5000) + 1000,
+//     total: Math.floor(Math.random() * 5000) + 1000,
-  },
+//   },
-];
+// ];
 
 interface OverViewProps{
     graphType:string;
+    data: {name: string, value: number}[];
 }
 
 export function Overview(props: OverViewProps) {
     return (
       <ResponsiveContainer width="100%" height={350}>
-          {props.graphType === 'line' ? (
+        {props.graphType === "line" ? (
-            <LineChart data={data}>
+          <LineChart data={props.data}>
             <XAxis
               dataKey="name"
               stroke="#888888"
@@ -83,7 +84,7 @@ export function Overview(props: OverViewProps) {
             />
           </LineChart>
         ) : (
-            <BarChart data={data}>
+          <BarChart data={props.data}>
             <XAxis
               dataKey="name"
               stroke="#888888"
@@ -98,11 +99,7 @@ export function Overview(props: OverViewProps) {
               axisLine={false}
               tickFormatter={(value) => `$${value}`}
             />
-              <Bar
+            <Bar dataKey="total" fill="currentColor" className="fill-primary" />
-                dataKey="total"
-                fill="currentColor"
-                className="fill-primary"
-              />
           </BarChart>
         )}
       </ResponsiveContainer>

src/lib/data/query.ts

@@ -1,10 +1,10 @@
 import { SupabaseClient } from "@supabase/supabase-js";
 
 function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client.from("business").select("id, business_name, joined_date").ilike(
+  return client
-    "business_name",
+    .from("business")
-    `%${query}%`,
+    .select("id, business_name, joined_date")
-  );
+    .ilike("business_name", `%${query}%`);
 }
 
 function getProjects(client: SupabaseClient, businessIds: string[]) {
@@ -22,23 +22,36 @@ function getProjects(client: SupabaseClient, businessIds: string[]) {
                 total_investment,
                 target_investment
             )
-        `,
+        `
     )
     .in("business_id", businessIds);
 }
 
 function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client.from("item_tag").select("item_id, tag (value)").in(
+  return client
-    "item_id",
+    .from("item_tag")
-    projectIds,
+    .select("item_id, tag (value)")
-  );
+    .in("item_id", projectIds);
 }
 
 function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client.from("investment_deal").select("*", {
+  return client
+    .from("investment_deal")
+    .select("*", {
       count: "exact",
       head: true,
-  }).in("project_id", projectIds);
+    })
+    .in("project_id", projectIds);
 }
 
-export { getBusinesses, getInvestmentCounts, getProjects, getTags };
+function getInvestorDeal(client: SupabaseClient, userId: string) {
+  return client.from("investment_deal").select("*").in("investor_id", [userId]);
+}
+
+export {
+  getBusinesses,
+  getInvestmentCounts,
+  getProjects,
+  getTags,
+  getInvestorDeal,
+};