From 00c4080b21117f7402fe6fa97d3a79eaa27d2e08 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Tue, 12 Nov 2024 22:24:35 +0700
Subject: [PATCH] feat: update Portfolio and DataTable components to enhance
 deal data handling and improve rendering

---
 src/app/portfolio/[uid]/page.tsx | 21 ++++++-----
 src/app/portfolio/[uid]/query.ts |  2 +-
 src/components/dataTable.tsx     | 60 ++++++++++++++++++++++++++------
 src/components/modal.tsx         |  2 +-
 src/lib/data/investmentQuery.ts  |  3 ++
 5 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index 163f77c..44fafdd 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -57,6 +57,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
   if (investorDealError) {
     console.error(investorDealError);
   }
+
   const { data: localUser, error: localUserError } = await supabase.auth.getUser();
   if (localUserError) {
     console.error("Error while fetching user" + error);
@@ -82,6 +83,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
             deals.map((deal) => ({
               ...deal,
               status: deal.deal_status,
+              project_id: deal.project_id,
             }))
           )
         ).map(async (deal) => ({
@@ -96,6 +98,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
     ? await Promise.all(deals.map(async (item) => await getBusinessTypeName(supabase, item.project_id)))
     : [];
   const countedBusinessType = countValues(businessType.filter((item) => item !== null));
+  console.table(deals);
   return (
     <div className="container max-w-screen-xl">
       <div className="text-center py-4">
@@ -244,17 +247,17 @@ export default async function Portfolio({ params }: { params: { uid: string } })
           <CardContent className="mt-5 grid grid-flow-row-dense">
             <RecentFunds data={latestDeals} />
             <div className="mt-5 flex justify-center">
-              {/* {latestDeals.length} */}
-              {deals && deals.length ? (
+              {deals?.length}
+              {deals && deals.length > 5 ? (
                 <Modal
-                  data={latestDeals.map((item) => {
+                  data={deals.map((item) => {
                     return {
-                      date: item.date,
-                      name: item.name,
-                      amount: item.amount,
-                      status: item.status,
-                      logoURL: item.logo_url,
-                      profileURL: `deals/${item.projectId}`
+                      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: `deals/${item.project_id}` as string,
                     };
                   })}
                 />
diff --git a/src/app/portfolio/[uid]/query.ts b/src/app/portfolio/[uid]/query.ts
index 1ea68ff..311a865 100644
--- a/src/app/portfolio/[uid]/query.ts
+++ b/src/app/portfolio/[uid]/query.ts
@@ -26,7 +26,7 @@ function getTotalInvestment(deals: { deal_amount: number }[]) {
 }
 async function getLatestInvestment(
   supabase: SupabaseClient,
-  deals: { project_id: number; deal_amount: number; created_time: Date; status: string}[]
+  deals: { project_id: number; deal_amount: number; created_time: Date; status: string }[]
 ) {
   const llist = [];
   const count = 5;
diff --git a/src/components/dataTable.tsx b/src/components/dataTable.tsx
index d4d80f3..2ddeeb6 100644
--- a/src/components/dataTable.tsx
+++ b/src/components/dataTable.tsx
@@ -25,6 +25,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import Link from "next/link";
 
 export type ModalProps = {
   date: Date;
@@ -66,7 +68,25 @@ export const columns: ColumnDef<ModalProps>[] = [
         </Button>
       );
     },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("name")}</div>,
+    cell: ({ row }) => (
+      <div className="flex items-center gap-2">
+        <Link href={`/deals/${(row.getValue("profileURL") as string).split("/").pop()}`} className="flex items-center">
+          <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>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "date",
+    header: () => <div className="text-left">Date</div>,
+    cell: ({ row }) => {
+      const formatted = new Date(row.getValue("date")).toUTCString();
+      return <div className=" font-medium">{formatted}</div>;
+    },
   },
   {
     accessorKey: "status",
@@ -101,16 +121,19 @@ export const columns: ColumnDef<ModalProps>[] = [
                 ? "text-green-500"
                 : "text-yellow-500"
           }`}
-        >
-        </p>
+        ></p>
 
-        <div className={`capitalize ${
-                        row.getValue("status") === "In Progress"
-                          ? "text-sky-500"
-                          : row.getValue("status") === "Completed"
-                            ? "text-green-500"
-                            : "text-yellow-500"
-                      }`}>{row.getValue("status")}</div>
+        <div
+          className={`capitalize ${
+            row.getValue("status") === "In Progress"
+              ? "text-sky-500"
+              : row.getValue("status") === "Completed"
+                ? "text-green-500"
+                : "text-yellow-500"
+          }`}
+        >
+          {row.getValue("status")}
+        </div>
       </div>
     ),
   },
@@ -129,6 +152,18 @@ export const columns: ColumnDef<ModalProps>[] = [
       return <div className="text-right font-medium">{formatted}</div>;
     },
   },
+  {
+    accessorKey: "logoURL",
+    id: "logoURL",
+    header: () => null,
+    cell: () => null,
+  },
+  {
+    accessorKey: "profileURL",
+    id: "profileURL",
+    header: () => null,
+    cell: () => null,
+  },
 ];
 
 export function DataTable({ data }: { data: ModalProps[] }) {
@@ -151,7 +186,10 @@ export function DataTable({ data }: { data: ModalProps[] }) {
     state: {
       sorting,
       columnFilters,
-      columnVisibility,
+      columnVisibility: {
+        profileURL: false,
+        logoURL: false,
+      },
       rowSelection,
     },
   });
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index aa58f19..b6c06c0 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -20,7 +20,7 @@ export function Modal({ data }: { data: ModalProps[] }) {
         <DialogTrigger asChild>
           <Button>View More</Button>
         </DialogTrigger>
-        <DialogContent>
+        <DialogContent className="max-w-screen-lg ">
           <DataTable data={data} />
         </DialogContent>
       </Dialog>
diff --git a/src/lib/data/investmentQuery.ts b/src/lib/data/investmentQuery.ts
index 49f7b13..7c11aa0 100644
--- a/src/lib/data/investmentQuery.ts
+++ b/src/lib/data/investmentQuery.ts
@@ -63,6 +63,9 @@ export function getInvestorDeal(client: SupabaseClient, userId: string) {
       deal_status:value
       ),
     project_id,
+    ...project_id (
+     project_name
+    ),
     deal_amount,
     created_time,
     ...profiles (