connect total funds raised to database

src/app/dashboard/page.tsx

@@ -14,9 +14,16 @@ import { useEffect, useState } from "react";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 
 export default function Dashboard() {
+  type Deal = {
+    deal_amount: number;
+    created_time: Date;
+    investor_id: string;
+  };
+
   let supabase = createSupabaseClient();
   const [graphType, setGraphType] = useState("line");
-  const [totalFundsRaised, setTotalFundsRaised] = useState();
+  const [dealList, setDealList] = useState<Deal[]>();
+  const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0;
 
   // get current user id
   // #TODO extract function to lib/util
@@ -31,9 +38,8 @@ export default function Dashboard() {
     return user.id;
   }
 
-  const fetchTotalFundsRaised = async () => {
+  const getDealList = async () => {
     const userId = await getUserID();
-
     const { data: dealData, error } = await supabase
     .from('business')
     .select(`
@@ -54,17 +60,36 @@ export default function Dashboard() {
       alert(JSON.stringify(error));
       console.error('Error fetching deal amount:', error);
     } else {
-      alert(JSON.stringify(dealData));
-      // setTotalFundsRaised(deal); #TODO
+      const dealList = dealData.project[0].investment_deal;
+
+      if (!dealList.length) {
+        alert("No data available");
+        return; // Exit early if there's no data
+      }
+
+      // Sort the dealList by created_time in descending order
+      const byCreatedTimeDesc = (a: Deal, b: Deal) =>
+        new Date(b.created_time).getTime() - new Date(a.created_time).getTime();
+      return dealList.sort(byCreatedTimeDesc);
     }
   }
 
+  const fetchDealList = async () => {
+    setDealList(await getDealList());
+  }
+
   useEffect(() => {
-    fetchTotalFundsRaised();
+    fetchDealList();
   }, []);
   return (
     <>
-    {totalFundsRaised}
+      {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"
@@ -84,7 +109,7 @@ export default function Dashboard() {
       <div className="hidden flex-col md:flex">
         <div className="flex-1 space-y-4 p-8 pt-6">
           <div className="flex items-center justify-between space-y-2">
-            <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
+            <h2 className="text-3xl font-bold tracking-tight">Business Dashboard</h2>
           </div>
           <Tabs defaultValue="overview" className="space-y-4">
             <TabsList>
@@ -112,10 +137,10 @@ export default function Dashboard() {
                     </svg>
                   </CardHeader>
                   <CardContent>
-                    <div className="text-2xl font-bold">$45,231.89</div>
-                    <p className="text-xs text-muted-foreground">
+                    <div className="text-2xl font-bold">${totalDealAmount}</div>
+                    {/* <p className="text-xs text-muted-foreground">
                       +20.1% from last month
-                    </p>
+                    </p> */}
                   </CardContent>
                 </Card>
                 <Card>
@@ -139,9 +164,9 @@ export default function Dashboard() {
                   </CardHeader>
                   <CardContent>
                     <div className="text-2xl font-bold">+2350</div>
-                    <p className="text-xs text-muted-foreground">
+                    {/* <p className="text-xs text-muted-foreground">
                       +180.1% from last month
-                    </p>
+                    </p> */}
                   </CardContent>
                 </Card>
                 <Card>
@@ -166,9 +191,9 @@ export default function Dashboard() {
                   </CardHeader>
                   <CardContent>
                     <div className="text-2xl font-bold">+12,234</div>
-                    <p className="text-xs text-muted-foreground">
+                    {/* <p className="text-xs text-muted-foreground">
                       +19% from last month
-                    </p>
+                    </p> */}
                   </CardContent>
                 </Card>
                 {/* <Card>
@@ -230,11 +255,12 @@ export default function Dashboard() {
                   <CardHeader>
                     <CardTitle>Recent Funds</CardTitle>
                     <CardDescription>
-                      You made 265 sales this month.
+                      You made {dealList?.length || 0} sales this month.
                     </CardDescription>
                   </CardHeader>
                   <CardContent>
-                    <RecentFunds />
+                    <RecentFunds>
+                    </RecentFunds>
                   </CardContent>
                 </Card>
               </div>