Refactor Portfolio component layout for improved responsiveness; adjust card widths and container padding

src/app/dashboard/page.tsx

@@ -68,7 +68,8 @@ const data = [
 export default function Dashboard() {
   const [graphType, setGraphType] = useState("line");
   const dealList = useDealList();
-  const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0;
+  const totalDealAmount =
+    dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0;
 
   return (
     <>
@@ -98,7 +99,9 @@ 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">Business Dashboard</h2>
+            <h2 className="text-3xl font-bold tracking-tight">
+              Business Dashboard
+            </h2>
           </div>
           <Tabs defaultValue="overview" className="space-y-4">
             <TabsList>
@@ -248,8 +251,7 @@ export default function Dashboard() {
                     </CardDescription>
                   </CardHeader>
                   <CardContent>
-                    <RecentFunds>
+                    <RecentFunds></RecentFunds>
-                    </RecentFunds>
                   </CardContent>
                 </Card>
               </div>

src/app/portfolio/[uid]/hook.ts

@@ -30,6 +30,7 @@ function countValues(arr: { value: string }[][]): Record<string, number> {
   return counts;
 }
 
+
 async function getBusinessTypeName(
   supabase: SupabaseClient,
   projectId: number

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

@@ -13,6 +13,7 @@ import {
   checkForInvest,
 } from "./hook";
 import CountUpComponent from "@/components/countUp";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Tooltip,
   TooltipContent,
@@ -22,6 +23,7 @@ import {
 import { RecentFunds } from "@/components/recent-funds";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import QuestionMarkIcon from "@/components/icon/questionMark";
+import { NoDataAlert } from "@/components/alert/noData/alert";
 
 export default async function Portfolio({
   params,
@@ -31,6 +33,12 @@ export default async function Portfolio({
   const supabase = createSupabaseClient();
   //  if user hasn't invest in anything
   if (!(await checkForInvest(supabase, params.uid))) {
+
+    return (
+      <div>
+        <NoDataAlert />
+      </div>
+    );
   }
   const { data: deals, error: investorDealError } = await getInvestorDeal(
     supabase,
@@ -73,39 +81,106 @@ export default async function Portfolio({
       </div> */}
       {/* <CountUpComponent end={100} duration={3} /> */}
       <div className="flex flew-rows-3 gap-10 mt-5 w-full">
-        <Card className="w-1/3">
+        <Tabs defaultValue="daily" className="space-y-4 w-full">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <TabsList className="grid w-full grid-cols-3">
-            <CardTitle className="text-md font-bold">
+            <TabsTrigger value="daily">Daily</TabsTrigger>
-              Types of Businesses Invested In
+            <TabsTrigger value="monthly">Monthly</TabsTrigger>
-            </CardTitle>
+            <TabsTrigger value="yearly">Yearly</TabsTrigger>
-          </CardHeader>
+          </TabsList>
-          <CardContent className="mt-5">
+          <TabsContent value="monthly">
-            <Overview graphType="line" data={overAllData}></Overview>
+            <Card className="w-full">
-          </CardContent>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        </Card>
+                <CardTitle className="text-md font-bold">
-        <Card className="w-1/3">
+                  Monthly Investment Trend
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                </CardTitle>
-            <CardTitle className="text-md font-bold">
+                <TooltipProvider>
-              Types of Businesses Invested In
+                  <Tooltip>
-            </CardTitle>
+                    <TooltipTrigger>
-          </CardHeader>
+                      <QuestionMarkIcon />
-          <CardContent className="mt-5">
+                    </TooltipTrigger>
-            <Overview graphType="bar" data={fourYearData}></Overview>
+                    <TooltipContent>
-          </CardContent>
+                      <p>
-        </Card>
+                        Displays total investments each month over the past 12{" "}
-        <Card className="w-1/3">
+                        <br />
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        months, up to today.
-            <CardTitle className="text-md font-bold">
+                      </p>
-              Types of Businesses Invested In
+                    </TooltipContent>
-            </CardTitle>
+                  </Tooltip>
-          </CardHeader>
+                </TooltipProvider>
-          <CardContent className="mt-5">
+              </CardHeader>
-            <Overview graphType="bar" data={dayOfWeekData}></Overview>
+              <CardContent className="mt-5">
-          </CardContent>
+                <Overview
-        </Card>
+                  graphType="line"
+                  data={overAllData}
+                  graphHeight={500}
+                ></Overview>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="yearly">
+            <Card className="w-full">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-md font-bold">
+                  Yearly Investment Summary
+                </CardTitle>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <QuestionMarkIcon />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>
+                        Shows total investments for each of the last four years,{" "}
+                        <br />
+                        including the current year to date.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </CardHeader>
+              <CardContent className="mt-5">
+                <Overview
+                  graphType="bar"
+                  data={fourYearData}
+                  graphHeight={500}
+                ></Overview>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="daily">
+            <Card className="w-full">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-md font-bold">
+                  Daily Investment Breakdown
+                </CardTitle>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <QuestionMarkIcon />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>
+                        Illustrates total investments for each day over the past{" "}
+                        <br />
+                        year, up to today.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </CardHeader>
+              <CardContent className="mt-5">
+                <Overview
+                  graphType="bar"
+                  data={dayOfWeekData}
+                  graphHeight={500}
+                ></Overview>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
       </div>
-      <div className="flex flex-cols-3 w-96 gap-5 mt-5">
+      <div className="flex flex-cols-3 w-full gap-5 mt-5">
-        <Card>
+        <Card className="w-1/3">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-md font-bold">
               Categories of Invested Projects
@@ -136,7 +211,7 @@ export default async function Portfolio({
             />
           </CardContent>
         </Card>
-        <Card>
+        <Card className="w-1/3">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-md font-bold">
               Types of Businesses Invested In
@@ -164,7 +239,7 @@ export default async function Portfolio({
             />
           </CardContent>
         </Card>
-        <Card>
+        <Card className="w-1/3">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-md font-bold">
               Recent investment

src/components/alert/noData/alert.tsx

@@ -0,0 +1,20 @@
+"use client";
+import Lottie from "react-lottie";
+import * as alertData from "./alert.json";
+
+const alertOption = {
+  loop: true,
+  autoplay: true,
+  animationData: alertData,
+  rendererSettings: {
+    preserveAspectRatio: "xMidYMid slice",
+  },
+};
+
+export function NoDataAlert() {
+  return (
+    <div className="fixed inset-0 flex items-center justify-centerbg-black mt-10">
+      <Lottie options={alertOption} height={"80%"} width={"50%"} />
+    </div>
+  );
+}

src/components/recent-funds.tsx

@@ -38,7 +38,13 @@ const data = [
   },
 ];
 
-export function RecentFunds() {
+interface RecentFundsProps{
+  name?: string; 
+  email?: string;
+  amount?: number; 
+  avatar?: string;
+}
+export function RecentFunds(props: RecentFundsProps) {
   return (
     <div className="space-y-8">
       {data.map((person, index) => (

src/components/ui/overview.tsx

@@ -62,14 +62,15 @@ import {
 //   },
 // ];
 
-interface OverViewProps{
+interface OverViewProps {
-    graphType:string;
+  graphType: string;
-    data: {name: string, value: number}[];
+  data: { name: string; value: number }[];
+  graphHeight?: number | string;
 }
 
 export function Overview(props: OverViewProps) {
-    return (
+  return (
-      <ResponsiveContainer width="100%" height={350}>
+      <ResponsiveContainer width="100%" height={props.graphHeight || 350}>
         {props.graphType === "line" ? (
           <LineChart data={props.data}>
             <XAxis
@@ -133,5 +134,5 @@ export function Overview(props: OverViewProps) {
           </BarChart>
         )}
       </ResponsiveContainer>
-    );
+  );
 }