From e0ddbbc50dc18fa0694bb5ca33878753bdf8e2e4 Mon Sep 17 00:00:00 2001
From: Naytitorn Chaovirachot <naytitorn21@gmail.com>
Date: Fri, 1 Nov 2024 01:36:32 +0700
Subject: [PATCH 1/5] connect some detail number component to database

---
 src/app/(investment)/deals/[id]/page.tsx | 33 +++++++++++------
 src/app/api/dealApi.ts                   | 30 ++++++++++------
 src/app/dashboard/hook.ts                | 10 ++++--
 src/app/project/apply/page.tsx           |  2 +-
 src/lib/data/projectQuery.ts             | 45 +++++++++++++-----------
 5 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index 6f1181a..8eac7cb 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -13,12 +13,28 @@ import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import FollowShareButtons from "./followShareButton";
 
 import { getProjectData } from "@/lib/data/projectQuery";
+import { getDealList } from "@/app/api/dealApi";
 
 export default async function ProjectDealPage({ params }: { params: { id: number } }) {
   const supabase = createSupabaseClient();
 
   const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
 
+  if (!projectData) {
+    return <div>No data available</div>;
+  }
+
+  if (projectDataError) {
+    return <div>Error</div>;
+  }
+
+  // console.log(projectData);
+
+  const projectBusinessOwnerId = projectData.business.user_id;
+  // console.log(projectBusinessOwnerId);
+  const dealData = await getDealList(projectBusinessOwnerId);
+  // console.log(dealData);
+
   const carouselData = [
     { src: "/boiler1.jpg", alt: "Boiler 1" },
     { src: "/boiler1.jpg", alt: "Boiler 1" },
@@ -27,10 +43,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
     { src: "/boiler1.jpg", alt: "Boiler 1" },
   ];
 
-  if (projectDataError) {
-    return <div>Error</div>;
-  }
-
   return (
     <div className="container max-w-screen-xl my-5">
       <div className="flex flex-col gap-y-10">
@@ -82,8 +94,9 @@ export default async function ProjectDealPage({ params }: { params: { id: number
             <div id="stats" className="flex flex-col w-full mt-4 pl-12">
               <div className="pl-5">
                 <span>
+                  {/* #TODO use sum() instead of storing total in database */}
                   <h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
-                  <p className="text-sm md:text-lg"> 5% raised of \$5M max goal</p>
+                  <p className="text-sm md:text-lg">5% raised of $5M max goal</p>
                   <Progress
                     value={projectData?.total_investment / projectData?.target_investment}
                     className="w-[60%] h-3 mt-3"
@@ -91,15 +104,15 @@ export default async function ProjectDealPage({ params }: { params: { id: number
                 </span>
                 <span>
                   <h1 className="font-semibold text-4xl md:mt-8">
-                    <p className="text-xl md:text-4xl">{projectData?.total_investment}</p>
+                    <p className="text-xl md:text-4xl">{dealData ? dealData.length: 0}</p>
                   </h1>
-                  <p className="text-sm md:text-lg"> Investors</p>
+                  <p className="text-sm md:text-lg">Investors</p>
                 </span>
                 <Separator decorative className="mt-3 w-3/4 ml-5" />
                 <span>
                   <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5"></h1>
                   <p className="text-xl md:text-4xl">1 hours</p>
-                  <p> Left to invest</p>
+                  <p>Left to invest</p>
                 </span>
                 <Button className="mt-5 w-3/4 h-12">
                   <Link href={`/invest/${params.id}`}>Invest in {projectData?.project_name}</Link>
@@ -121,8 +134,8 @@ export default async function ProjectDealPage({ params }: { params: { id: number
               <Tabs.Content value="pitch">
                 <Card>
                   <CardHeader>
-                    <CardTitle></CardTitle>
-                    <CardDescription></CardDescription>
+                    <CardTitle>{projectData.project_name}</CardTitle>
+                    <CardDescription />
                   </CardHeader>
                   <CardContent>
                     <div className="prose prose-sm max-w-none ">
diff --git a/src/app/api/dealApi.ts b/src/app/api/dealApi.ts
index bdb5365..a9efe64 100644
--- a/src/app/api/dealApi.ts
+++ b/src/app/api/dealApi.ts
@@ -1,5 +1,4 @@
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
-import { getCurrentUserID } from "./userApi";
 
 export type Deal = {
   deal_amount: number;
@@ -7,9 +6,14 @@ export type Deal = {
   investor_id: string;
 };
 
-export async function getDealList() {
+export async function getDealList(userId: string | undefined) {
+  if (!userId) {
+    // console.error("No deal list of this user was found");
+    return; // Exit on error
+  }
+
   const supabase = createSupabaseClient();
-  // get id of investor who invests in the business
+  // get id of investors who invest in the business
   const { data: dealData, error: dealError } = await supabase
     .from("business")
     .select(
@@ -21,11 +25,11 @@ export async function getDealList() {
       )
     `
     )
-    .eq("user_id", await getCurrentUserID())
+    .eq("user_id", userId)
     .single();
 
   if (dealError) {
-    alert(JSON.stringify(dealError));
+    // alert(JSON.stringify(dealError));
     console.error("Error fetching deal list:", dealError);
     return; // Exit on error
   }
@@ -56,13 +60,19 @@ export async function getDealList() {
     return; // Exit on error
   }
 
+  console.log(sortedDealData)
   return sortedDealData;
 }
 
 // #TODO fix query to be non unique
-export async function getRecentDealData() {
+export async function getRecentDealData(userId: string | undefined) {
+  if (!userId) {
+    console.error("User not found");
+    return; // Exit on error
+  }
+  
   const supabase = createSupabaseClient();
-  const dealList = await getDealList();
+  const dealList = await getDealList(userId);
 
   if (!dealList) {
     // #TODO div error
@@ -100,6 +110,8 @@ export async function getRecentDealData() {
   const recentDealData = recentDealList.map((item, index) => {
     return { ...item, ...recentUserData[index] };
   });
+
+  
   return recentDealData;
 }
 
@@ -121,8 +133,6 @@ export function convertToGraphData(deals: Deal[]): Record<string, number> {
 
   // Create a sorted graph data object
   const sortedGraphData: Record<string, number> = {};
-  sortedKeys.forEach((key) => {
-    sortedGraphData[key] = graphData[key];
-  });
+  sortedKeys.forEach((key) => {sortedGraphData[key] = graphData[key]});
   return sortedGraphData;
 }
diff --git a/src/app/dashboard/hook.ts b/src/app/dashboard/hook.ts
index e2a7ccf..236c4bc 100644
--- a/src/app/dashboard/hook.ts
+++ b/src/app/dashboard/hook.ts
@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
 import { Deal, getDealList, convertToGraphData, getRecentDealData } from "../api/dealApi";
 import { RecentDealData } from "@/components/recent-funds";
+import { getCurrentUserID } from "../api/userApi";
 
 // custom hook for deal list
 export function useDealList() {
   const [dealList, setDealList] = useState<Deal[]>();
 
   const fetchDealList = async () => {
-    setDealList(await getDealList());
+    // set the state to the deal list of current business user
+    setDealList(await getDealList(await getCurrentUserID()));
   }
 
   useEffect(() => {
@@ -21,7 +23,8 @@ export function useGraphData() {
   const [graphData, setGraphData] = useState({});
 
   const fetchGraphData = async () => {
-    const dealList = await getDealList();
+    // fetch the state to the deal list of current business user
+    const dealList = await getDealList(await getCurrentUserID());
     if (dealList) {
       setGraphData(convertToGraphData(dealList));
     }
@@ -38,7 +41,8 @@ export function useRecentDealData() {
   const [recentDealData, setRecentDealData] = useState<RecentDealData[]>();
 
   const fetchRecentDealData = async () => {
-    setRecentDealData(await getRecentDealData());
+    // set the state to the deal list of current business user
+    setRecentDealData(await getRecentDealData(await getCurrentUserID()));
   }
 
   useEffect(() => {
diff --git a/src/app/project/apply/page.tsx b/src/app/project/apply/page.tsx
index b14b662..0509058 100644
--- a/src/app/project/apply/page.tsx
+++ b/src/app/project/apply/page.tsx
@@ -18,7 +18,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"]);
diff --git a/src/lib/data/projectQuery.ts b/src/lib/data/projectQuery.ts
index 568b5da..ecdf23e 100644
--- a/src/lib/data/projectQuery.ts
+++ b/src/lib/data/projectQuery.ts
@@ -6,28 +6,28 @@ async function getTopProjects(client: SupabaseClient, numberOfRecords: number =
       .from("project")
       .select(
         `
-            id,
-            project_name,
-            business_id,
-            published_time,
-            project_short_description,
-            card_image_url,
-            project_investment_detail (
-              min_investment,
-              total_investment,
-              target_investment,
-              investment_deadline
-            ),
-            project_tag (
-              tag (
-                id,
-                value
-              )
-            ),
-            business (
-              location
+          id,
+          project_name,
+          business_id,
+          published_time,
+          project_short_description,
+          card_image_url,
+          project_investment_detail (
+            min_investment,
+            total_investment,
+            target_investment,
+            investment_deadline
+          ),
+          project_tag (
+            tag (
+              id,
+              value
             )
-          `
+          ),
+          business (
+            location
+          )
+        `
       )
       .order("published_time", { ascending: false })
       .limit(numberOfRecords);
@@ -89,6 +89,9 @@ async function getProjectData(client: SupabaseClient, projectId: number) {
         ...tag!inner (
           tag_name:value
         )
+      ),
+      business (
+        user_id
       )
     `
     )

From c15e4519124c21dc9793d10939e0086fa3754152 Mon Sep 17 00:00:00 2001
From: Naytitorn Chaovirachot <naytitorn21@gmail.com>
Date: Fri, 1 Nov 2024 18:07:55 +0700
Subject: [PATCH 2/5] refactor totalDealAmount function and change undefined
 deal value to empty array

---
 src/app/(investment)/deals/[id]/page.tsx |  9 ++++++---
 src/app/api/dealApi.ts                   | 10 +++++-----
 src/app/dashboard/hook.ts                |  2 +-
 src/app/dashboard/page.tsx               |  4 ++--
 src/lib/data/projectQuery.ts             |  2 +-
 src/lib/utils.ts                         | 22 ++++++++++++++++++++++
 6 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index 8eac7cb..9001daa 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -28,9 +28,9 @@ export default async function ProjectDealPage({ params }: { params: { id: number
     return <div>Error</div>;
   }
 
-  // console.log(projectData);
+  console.log(projectData);
 
-  const projectBusinessOwnerId = projectData.business.user_id;
+  const projectBusinessOwnerId = projectData.user_id;
   // console.log(projectBusinessOwnerId);
   const dealData = await getDealList(projectBusinessOwnerId);
   // console.log(dealData);
@@ -96,7 +96,10 @@ export default async function ProjectDealPage({ params }: { params: { id: number
                 <span>
                   {/* #TODO use sum() instead of storing total in database */}
                   <h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
-                  <p className="text-sm md:text-lg">5% raised of $5M max goal</p>
+                  <p className="text-sm md:text-lg">
+                    {projectData?.total_investment / projectData?.target_investment}%
+                    raised of ${projectData?.target_investment} max goal
+                  </p>
                   <Progress
                     value={projectData?.total_investment / projectData?.target_investment}
                     className="w-[60%] h-3 mt-3"
diff --git a/src/app/api/dealApi.ts b/src/app/api/dealApi.ts
index a9efe64..28204b5 100644
--- a/src/app/api/dealApi.ts
+++ b/src/app/api/dealApi.ts
@@ -9,7 +9,7 @@ export type Deal = {
 export async function getDealList(userId: string | undefined) {
   if (!userId) {
     // console.error("No deal list of this user was found");
-    return; // Exit on error
+    return []; // Exit on error
   }
 
   const supabase = createSupabaseClient();
@@ -31,12 +31,12 @@ export async function getDealList(userId: string | undefined) {
   if (dealError) {
     // alert(JSON.stringify(dealError));
     console.error("Error fetching deal list:", dealError);
-    return; // Exit on error
+    return []; // Exit on error
   }
 
   if (!dealData || !dealData.project.length) {
     alert("No project available");
-    return; // Exit if there's no data
+    return []; // Exit if there's no data
   }
 
   const investorIdList = dealData.project[0].investment_deal.map((deal) => deal.investor_id);
@@ -57,10 +57,10 @@ export async function getDealList(userId: string | undefined) {
   if (sortedDealDataError) {
     alert(JSON.stringify(sortedDealDataError));
     console.error("Error sorting deal list:", sortedDealDataError);
-    return; // Exit on error
+    return []; // Exit on error
   }
 
-  console.log(sortedDealData)
+  // console.log(sortedDealData)
   return sortedDealData;
 }
 
diff --git a/src/app/dashboard/hook.ts b/src/app/dashboard/hook.ts
index 236c4bc..676d249 100644
--- a/src/app/dashboard/hook.ts
+++ b/src/app/dashboard/hook.ts
@@ -5,7 +5,7 @@ import { getCurrentUserID } from "../api/userApi";
 
 // custom hook for deal list
 export function useDealList() {
-  const [dealList, setDealList] = useState<Deal[]>();
+  const [dealList, setDealList] = useState<Deal[]>([]);
 
   const fetchDealList = async () => {
     // set the state to the deal list of current business user
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 072d95d..5216a19 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -13,6 +13,7 @@ import { RecentFunds } from "@/components/recent-funds";
 import { useState } from "react";
 
 import { useDealList, useGraphData, useRecentDealData } from "./hook";
+import { sumByKey } from "@/lib/utils";
 
 export default function Dashboard() {
   const [graphType, setGraphType] = useState("line");
@@ -20,7 +21,6 @@ export default function Dashboard() {
   const dealList = useDealList();
   // #TODO dependency injection refactor + define default value inside function (and not here)
   const recentDealData = useRecentDealData() || [];
-  const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0;
 
   return (
     <>
@@ -78,7 +78,7 @@ export default function Dashboard() {
                     </svg>
                   </CardHeader>
                   <CardContent>
-                    <div className="text-2xl font-bold">${totalDealAmount}</div>
+                    <div className="text-2xl font-bold">${sumByKey(dealList, "deal_amount")}</div>
                     {/* <p className="text-xs text-muted-foreground">
                       +20.1% from last month
                     </p> */}
diff --git a/src/lib/data/projectQuery.ts b/src/lib/data/projectQuery.ts
index ecdf23e..c1a7217 100644
--- a/src/lib/data/projectQuery.ts
+++ b/src/lib/data/projectQuery.ts
@@ -90,7 +90,7 @@ async function getProjectData(client: SupabaseClient, projectId: number) {
           tag_name:value
         )
       ),
-      business (
+      ...business (
         user_id
       )
     `
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d084cca..a6761ea 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,25 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function sum(list: any[]) {
+  if (!list || list.length === 0) {
+    return 0;
+  }
+
+  return list.reduce((total, num) => total + num, 0);
+}
+
+export function sumByKey(list: any[], key: string) {
+  // example usage
+  // const items = [
+  //   { amount: 10 },
+  //   { amount: 20 },
+  //   { amount: 30 },
+  //   { amount: 40 }
+  // ];
+  
+  // const totalAmount = sumByKey(items, 'amount');
+  // console.log(totalAmount); // Output: 100
+  return list.reduce((total, obj) => total + (obj[key] || 0), 0);
+}
\ No newline at end of file

From 71d1d3c1fcc38e27014a6d17e64b9dc5ac007cd9 Mon Sep 17 00:00:00 2001
From: Naytitorn Chaovirachot <naytitorn21@gmail.com>
Date: Fri, 1 Nov 2024 22:28:01 +0700
Subject: [PATCH 3/5] connect deal data of detail page to database

---
 src/app/(investment)/deals/[id]/page.tsx | 31 +++++++++++++++---------
 src/app/dashboard/page.tsx               |  7 ------
 src/lib/utils.ts                         |  5 ++++
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index 9001daa..a84ee65 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -14,6 +14,7 @@ import FollowShareButtons from "./followShareButton";
 
 import { getProjectData } from "@/lib/data/projectQuery";
 import { getDealList } from "@/app/api/dealApi";
+import { sumByKey, toPercentage } from "@/lib/utils";
 
 export default async function ProjectDealPage({ params }: { params: { id: number } }) {
   const supabase = createSupabaseClient();
@@ -28,13 +29,13 @@ export default async function ProjectDealPage({ params }: { params: { id: number
     return <div>Error</div>;
   }
 
-  console.log(projectData);
-
   const projectBusinessOwnerId = projectData.user_id;
-  // console.log(projectBusinessOwnerId);
-  const dealData = await getDealList(projectBusinessOwnerId);
-  // console.log(dealData);
-
+  const dealList = await getDealList(projectBusinessOwnerId);
+  const totalDealAmount = sumByKey(dealList, "deal_amount");
+  // timeDiff, if negative convert to zero
+  const timeDiff = Math.max((new Date(projectData.investment_deadline)).getTime() - new Date().getTime(), 0)
+  const hourLeft = Math.floor(timeDiff / (1000 * 60 * 60));
+  console.log(hourLeft)
   const carouselData = [
     { src: "/boiler1.jpg", alt: "Boiler 1" },
     { src: "/boiler1.jpg", alt: "Boiler 1" },
@@ -95,27 +96,33 @@ export default async function ProjectDealPage({ params }: { params: { id: number
               <div className="pl-5">
                 <span>
                   {/* #TODO use sum() instead of storing total in database */}
-                  <h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8">${totalDealAmount}</h1>
                   <p className="text-sm md:text-lg">
-                    {projectData?.total_investment / projectData?.target_investment}%
+                    {toPercentage(totalDealAmount, projectData?.target_investment)}%
                     raised of ${projectData?.target_investment} max goal
                   </p>
                   <Progress
-                    value={projectData?.total_investment / projectData?.target_investment}
+                    value={toPercentage(totalDealAmount, projectData?.target_investment)}
                     className="w-[60%] h-3 mt-3"
                   />
                 </span>
                 <span>
                   <h1 className="font-semibold text-4xl md:mt-8">
-                    <p className="text-xl md:text-4xl">{dealData ? dealData.length: 0}</p>
+                    <p className="text-xl md:text-4xl">{dealList.length}</p>
                   </h1>
                   <p className="text-sm md:text-lg">Investors</p>
                 </span>
                 <Separator decorative className="mt-3 w-3/4 ml-5" />
                 <span>
                   <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5"></h1>
-                  <p className="text-xl md:text-4xl">1 hours</p>
-                  <p>Left to invest</p>
+                    {projectData?.investment_deadline ? (
+                      <>
+                        <p className="text-xl md:text-4xl">{Math.floor(hourLeft)} hours</p>
+                        <p>Left to invest</p>
+                      </>
+                    ) : (
+                      <p className="text-xl md:text-4xl">No deadline</p>
+                  )}
                 </span>
                 <Button className="mt-5 w-3/4 h-12">
                   <Link href={`/invest/${params.id}`}>Invest in {projectData?.project_name}</Link>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 5216a19..68a471b 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -24,13 +24,6 @@ export default function Dashboard() {
 
   return (
     <>
-      {/* {dealList?.map((deal, index) => (
-        <div key={index} className="deal-item">
-          <p>Deal Amount: {deal.deal_amount}</p>
-          <p>Created Time: {new Date(deal.created_time).toUTCString()}</p>
-          <p>Investor ID: {deal.investor_id}</p>
-        </div>
-      ))} */}
       <div className="md:hidden">
         <Image
           src="/examples/dashboard-light.png"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index a6761ea..812d222 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -25,4 +25,9 @@ export function sumByKey(list: any[], key: string) {
   // const totalAmount = sumByKey(items, 'amount');
   // console.log(totalAmount); // Output: 100
   return list.reduce((total, obj) => total + (obj[key] || 0), 0);
+}
+
+export function toPercentage(part: number, total: number): number {
+  if (total === 0) return 0; // Prevent division by zero
+  return Number(((part * 100) / total).toFixed(2));
 }
\ No newline at end of file

From b25895e5ad8d4022ec1f8edb2c8a26c11fdd52e3 Mon Sep 17 00:00:00 2001
From: Naytitorn Chaovirachot <naytitorn21@gmail.com>
Date: Fri, 1 Nov 2024 23:12:15 +0700
Subject: [PATCH 4/5] connect image carousel to database

---
 src/app/(investment)/deals/[id]/page.tsx | 13 ++++++-------
 src/lib/data/projectQuery.ts             |  1 +
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index a84ee65..4342bd7 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -35,13 +35,13 @@ export default async function ProjectDealPage({ params }: { params: { id: number
   // timeDiff, if negative convert to zero
   const timeDiff = Math.max((new Date(projectData.investment_deadline)).getTime() - new Date().getTime(), 0)
   const hourLeft = Math.floor(timeDiff / (1000 * 60 * 60));
-  console.log(hourLeft)
+
   const carouselData = [
-    { src: "/boiler1.jpg", alt: "Boiler 1" },
-    { src: "/boiler1.jpg", alt: "Boiler 1" },
-    { src: "/boiler1.jpg", alt: "Boiler 1" },
-    { src: "/boiler1.jpg", alt: "Boiler 1" },
-    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
+    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
+    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
+    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
+    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
   ];
 
   return (
@@ -95,7 +95,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
             <div id="stats" className="flex flex-col w-full mt-4 pl-12">
               <div className="pl-5">
                 <span>
-                  {/* #TODO use sum() instead of storing total in database */}
                   <h1 className="font-semibold text-xl md:text-4xl mt-8">${totalDealAmount}</h1>
                   <p className="text-sm md:text-lg">
                     {toPercentage(totalDealAmount, projectData?.target_investment)}%
diff --git a/src/lib/data/projectQuery.ts b/src/lib/data/projectQuery.ts
index c1a7217..6e0ae76 100644
--- a/src/lib/data/projectQuery.ts
+++ b/src/lib/data/projectQuery.ts
@@ -79,6 +79,7 @@ async function getProjectData(client: SupabaseClient, projectId: number) {
       project_short_description,
       project_description,
       published_time,
+      card_image_url,
       ...project_investment_detail!inner (
         min_investment,
         total_investment,

From a5dea7700195ca749d633a746e645b536a089a7a Mon Sep 17 00:00:00 2001
From: Naytitorn Chaovirachot <naytitorn21@gmail.com>
Date: Fri, 1 Nov 2024 23:19:53 +0700
Subject: [PATCH 5/5] fix no default carousel image

---
 src/app/(investment)/deals/[id]/page.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index 4342bd7..0bb363d 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -36,13 +36,10 @@ export default async function ProjectDealPage({ params }: { params: { id: number
   const timeDiff = Math.max((new Date(projectData.investment_deadline)).getTime() - new Date().getTime(), 0)
   const hourLeft = Math.floor(timeDiff / (1000 * 60 * 60));
 
-  const carouselData = [
-    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
-    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
-    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
-    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
-    { src: projectData.card_image_url, alt: `${projectData.project_name} Image` },
-  ];
+  const carouselData = Array(5).fill({
+    src: projectData.card_image_url || "/boiler1.jpg",
+    alt: `${projectData.project_name} Image`,
+  });
 
   return (
     <div className="container max-w-screen-xl my-5">