feat: integrate Modal component for project details in Dashboard and Portfolio, enhance RecentFunds data mapping

src/app/dashboard/page.tsx

@@ -17,6 +17,7 @@ import CountUp from "react-countup";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { Modal } from "@/components/modal";
 
 export default function Dashboard() {
   const supabase = createSupabaseClient();
@@ -296,11 +297,20 @@ export default function Dashboard() {
                             };
                           })}
                         />
-                        <div className="flex justify-center">
-                          {filteredProject && filteredProject.length > 6 ? (
-                            <Button asChild>
-                              <Link href="/dashboard/deals/">View More</Link>
-                            </Button>
+                        <div className="flex justify-center mt-5">
+                          {filteredProject && filteredProject.length > 1 ? (
+                            <Modal
+                              data={filteredProject.map((item) => {
+                                return {
+                                  date: item.created_time,
+                                  name: item.username,
+                                  amount: item.deal_amount,
+                                  status: item.deal_status,
+                                  logoURL: Array.isArray(item.avatar_url) ? item.avatar_url[0] : item.avatar_url,
+                                  profileURL: `/profile/${item.investor_id}`,
+                                };
+                              })}
+                            />
                           ) : undefined}
                         </div>
                       </CardContent>

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

@@ -189,8 +189,8 @@ export default async function Portfolio({ params }: { params: { uid: string } })
           </TabsContent>
         </Tabs>
       </div>
-      <div className="flex flex-cols-3 w-full gap-5 mt-5">
-        <Card className="w-1/3">
+      <div className="flex flex-cols-3  w-full gap-5 mt-5">
+        <Card className="w-1/3 h-fit">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-md font-bold">Categories of Invested Projects</CardTitle>
             <TooltipProvider>
@@ -215,7 +215,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
             />
           </CardContent>
         </Card>
-        <Card className="w-1/3">
+        <Card className="w-1/3 h-fit">
           <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</CardTitle>
             <TooltipProvider>
@@ -245,7 +245,18 @@ export default async function Portfolio({ params }: { params: { uid: string } })
             <CardTitle className="text-md font-bold">Recent investment</CardTitle>
           </CardHeader>
           <CardContent className="mt-5 grid grid-flow-row-dense">
-            <RecentFunds data={latestDeals} />
+            <RecentFunds
+              data={latestDeals.map((item) => {
+                return {
+                  name: item.name,
+                  amount: item.amount,
+                  avatar: item.logo_url,
+                  date: new Date(item.date),
+                  status: item.status,
+                  profile_url: `/deals/${item.projectId}`,
+                };
+              })}
+            />
             <div className="mt-5 flex justify-center">
               {deals && deals.length > 5 ? (
                 <Modal
@@ -256,7 +267,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
                       amount: item.deal_amount,
                       status: item.deal_status,
                       logoURL: Array.isArray(item.avatar_url) ? item.avatar_url[0] : item.avatar_url,
-                      profileURL: `deals/${item.project_id}` as string,
+                      profileURL: `/deals/${item.project_id}`,
                     };
                   })}
                 />

src/components/dataTable.tsx

@@ -70,13 +70,18 @@ export const columns: ColumnDef<ModalProps>[] = [
     },
     cell: ({ row }) => (
       <div className="flex items-center gap-2">
-        <Link href={`/deals/${(row.getValue("profileURL") as string).split("/").pop()}`} className="flex items-center">
+        <Button
+          className="bg-transparent hover:bg-transparent text-current"
+          onClick={() => {
+            window.location.href = row.getValue("profileURL");
+          }}
+        >
           <Avatar className="h-9 w-9">
             <AvatarImage src={row.getValue("logoURL")} />
             <AvatarFallback>{(row.getValue("name") as string).slice(0, 2)}</AvatarFallback>
           </Avatar>
           <span className="ml-2">{row.getValue("name")}</span>
-        </Link>
+        </Button>
       </div>
     ),
   },

src/lib/data/investmentQuery.ts

@@ -20,6 +20,9 @@ export const getInvestmentByProjectsIds = (client: SupabaseClient, projectIds: s
       deal_status:value
       ),
     project_id,
+    ...project_id (
+     project_name
+    ),
     deal_amount,
     created_time,
     ...profiles (