feat: add animated count-up for total completed deal amounts on dashboard

src/app/dashboard/page.tsx

@@ -12,6 +12,7 @@ import { Loader } from "@/components/loading/loader";
 import { getInvestmentByProjectsIds } from "@/lib/data/investmentQuery";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { overAllGraphData, Deal, fourYearGraphData, dayOftheWeekData } from "../portfolio/[uid]/query";
+import CountUp from "react-countup";
 
 export default function Dashboard() {
   const supabase = createSupabaseClient();
@@ -34,6 +35,7 @@ export default function Dashboard() {
   const [isSuccess, setIsSuccess] = useState(false);
   const [graphType, setGraphType] = useState("line");
   const [currentProjectId, setCurrentProjectId] = useState<number>(projects[0]?.id);
+
   const investmentDetail = useQuery(
     getInvestmentByProjectsIds(
       supabase,
@@ -42,11 +44,11 @@ export default function Dashboard() {
       })
     )
   );
+  let graphData = [];
+  const filteredData = (investmentDetail?.data || []).filter((deal) => deal.project_id === currentProjectId);
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
   };
-  let graphData = [];
-  const filteredData = (investmentDetail?.data || []).filter((deal) => deal.project_id === currentProjectId);
 
   if (activeTab === "daily") {
     graphData = dayOftheWeekData(filteredData);
@@ -166,10 +168,15 @@ export default function Dashboard() {
                         </svg>
                       </CardHeader>
                       <CardContent>
-                        <div className="text-2xl font-bold">${}</div>
-                        {/* <p className="text-xs text-muted-foreground">
-                      +20.1% from last month
-                    </p> */}
+                        <div className="text-2xl font-bold">
+                          $
+                          <CountUp
+                            end={filteredData
+                              .filter((project) => project.deal_status === "Completed")
+                              .reduce((sum, current) => sum + current.deal_amount, 0)}
+                            duration={1}
+                          />
+                        </div>
                       </CardContent>
                     </Card>
                     <Card>

src/app/dashboard/query.ts

@@ -1 +0,0 @@
-

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

@@ -52,7 +52,6 @@ export default async function Portfolio({ params }: { params: { uid: string } })
     );
   }
   const username = localUser ? localUser.user.user_metadata.name : "Anonymous";
-  // console.log(username)
   const overAllData = deals ? overAllGraphData(deals) : [];
   const fourYearData = deals ? fourYearGraphData(deals) : [];
   const dayOfWeekData = deals ? dayOftheWeekData(deals) : [];
@@ -66,31 +65,13 @@ export default async function Portfolio({ params }: { params: { uid: string } })
       )
     : [];
   const totalInvestment = deals ? getTotalInvestment(deals) : 0;
-  // console.log(latestDeals);
-
   const tagCount = countTags(tags);
-  // console.log(investedBusinessIds);
   const businessType = deals
     ? await Promise.all(deals.map(async (item) => await getBusinessTypeName(supabase, item.project_id)))
     : [];
   const countedBusinessType = countValues(businessType.filter((item) => item !== null));
-  // console.log(countedBusinessType);
-
-  // console.log(tagCount);
   return (
     <div className="container max-w-screen-xl">
-      {/* {JSON.stringify(params.uid)} */}
-      {/* {JSON.stringify(tagCount)} */}
-      {/* {JSON.stringify(deals)} */}
-      {/* {JSON.stringify(dayOfWeekData)} */}
-      {/* {JSON.stringify(overAllGraphData)} */}
-      {/* {JSON.stringify(threeYearGraphData)} */}
-      {/* {JSON.stringify(uniqueProjectIds)} */}
-      {/* <div className="flex flex-row">
-        <h1>Total Invest :  </h1>
-        <div>{totalInvest}</div>
-      </div> */}
-      {/* <CountUpComponent end={100} duration={3} /> */}
       <div className="text-center py-4">
         <h1 className="text-2xl font-semibold">Welcome to your Portfolio, {username}!</h1>
         <p className="text-lg text-muted-foreground">