feat: enhance Modal component to accept deal data and display in DataTable

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

@@ -243,7 +243,15 @@ export default async function Portfolio({ params }: { params: { uid: string } })
           </CardHeader>
           <CardContent className="mt-5 grid grid-flow-row-dense">
             <RecentFunds data={latestDeals} />
-            <div className="mt-5 flex justify-center">{deals && deals.length ? <Modal /> : undefined}</div>
+            <div className="mt-5 flex justify-center">
+              {deals && deals.length ? <Modal data={latestDeals.map((deal) => {
+                return {
+                  name: deal.name,
+                  amount: deal.amount,
+                  date: deal.date, 
+                };
+              })} /> : undefined}
+            </div>
           </CardContent>
         </Card>
       </div>

src/components/modal.tsx

@@ -1,16 +1,20 @@
 "use client";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Button } from "./ui/button";
 import { DataTable } from "./dataTable";
 
-export function Modal() {
+export type Payment = {
+  data?: {
+    name?: string;
+    amount?: number;
+    avatar?: string;
+    date?: Date;
+    logo_url?: string;
+    status?: string;
+    profile_url?: string;
+  }[];
+};
+export function Modal({ data }: { data: Payment[] }) {
   return (
     <div>
       <Dialog>
@@ -18,7 +22,7 @@ export function Modal() {
           <Button>View More</Button>
         </DialogTrigger>
         <DialogContent>
-          {/* <DataTable /> */}
+          <DataTable data={data} />
         </DialogContent>
       </Dialog>
     </div>