link graph overview to database:

src/app/api/dealApi.ts

@@ -25,20 +25,45 @@ export async function getDealList() {
     .eq('user_id', await getCurrentUserID())
     .single();
 
-    if (error || !dealData) {
+  // Handle errors and no data cases
+  if (error) {
     alert(JSON.stringify(error));
     console.error('Error fetching deal list:', error);
-    } else {
+    return; // Exit on error
+  }
+
+  if (!dealData || !dealData.project.length) {
+    alert("No project available");
+    return; // Exit if there's no data
+  }
+
   const dealList = dealData.project[0].investment_deal;
 
+  // Check for empty dealList
   if (!dealList.length) {
-        alert("No data available");
+    alert("No deal list available");
-        return; // Exit early if there's no data
+    return; // Exit 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);
-    }
 };
+
+// #TODO move to util
+export function convertToGraphData(deals: Deal[]): Record<string, number> {
+  let graphData = deals.reduce((acc, deal) => {
+    const monthYear = new Date(deal.created_time).toISOString().slice(0, 7); // E.g., '2024-10'
+    acc[monthYear] = (acc[monthYear] || 0) + deal.deal_amount; // Sum the deal_amount
+    return acc;
+  }, {} as Record<string, number>); // Change type to Record<string, number>
+
+  // Sort keys in ascending order
+  const sortedKeys = Object.keys(graphData).sort((a, b) => (a > b ? 1 : -1));
+
+  // Create a sorted graph data object
+  const sortedGraphData: Record<string, number> = {};
+  sortedKeys.forEach((key) => {sortedGraphData[key] = graphData[key]});
+  return sortedGraphData;
+}

src/app/dashboard/hook.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Deal, getDealList } from "../api/dealApi";
+import { Deal, getDealList, convertToGraphData } from "../api/dealApi";
 
 // custom hook for deal list
 export function useDealList() {
@@ -15,3 +15,20 @@ export function useDealList() {
 
   return dealList;
 }
+
+export function useGraphData() {
+  const [graphData, setGraphData] = useState<Record<string, number>>({});
+
+  const fetchGraphData = async () => {
+    const dealList = await getDealList();
+    if (dealList) {
+      setGraphData(convertToGraphData(dealList));
+    }
+  }
+
+  useEffect(() => {
+    fetchGraphData();
+  }, []);
+
+  return graphData;
+}

src/app/dashboard/page.tsx

@@ -12,10 +12,11 @@ import { Overview } from "@/components/ui/overview";
 import { RecentFunds } from "@/components/recent-funds";
 import { useState } from "react";
 
-import { useDealList } from "./hook";
+import { useDealList, useGraphData } from "./hook";
 
 export default function Dashboard() {
   const [graphType, setGraphType] = useState("line");
+  const graphData = useGraphData();
   const dealList = useDealList();
   const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0;
 
@@ -166,7 +167,7 @@ export default function Dashboard() {
                     <CardTitle>Overview</CardTitle>
                   </CardHeader>
                   <CardContent className="pl-2">
-                    <Overview graphType={graphType} />
+                    <Overview graphType={graphType} graphData={graphData} />
                     {/* tab to switch between line and bar graph */}
                     <Tabs
                       defaultValue="line"

src/components/ui/overview.tsx

@@ -2,66 +2,22 @@
 
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts";
 
-const data = [
-  {
-    name: "Jan",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Feb",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Mar",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Apr",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "May",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jun",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jul",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Aug",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Sep",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Oct",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Nov",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Dec",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-];
-
 interface OverViewProps {
   graphType: string;
+  graphData: Record<string, number>; // Object with month-year as keys and sum as value
 }
 
 export function Overview(props: OverViewProps) {
+    // Transform the grouped data into the format for the chart
+    const chartData = Object.entries(props.graphData).map(([monthYear, totalArray]) => ({
+      name: monthYear,
+      total: totalArray, // Get the total amount for the month
+    }));
+
     return (
         <ResponsiveContainer width="100%" height={350}>
           {props.graphType === 'line' ? (
-            <LineChart data={data}>
+            <LineChart data={chartData}>
               <XAxis
                 dataKey="name"
                 stroke="#888888"
@@ -83,7 +39,7 @@ export function Overview(props: OverViewProps) {
               />
             </LineChart>
           ) : (
-            <BarChart data={data}>
+            <BarChart data={chartData}>
               <XAxis
                 dataKey="name"
                 stroke="#888888"