feat: remove Deals page component; integrate Modal in Portfolio for deal viewing

src/app/dashboard/deals/page.tsx

@@ -1,9 +0,0 @@
-import { DataTable } from "@/components/dataTable";
-
-export default function Deals() {
-  return (
-    <div>
-      <p>hello นาา</p>
-    </div>
-  );
-}

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

@@ -27,6 +27,7 @@ import Link from "next/link";
 import { DataTable } from "@/components/dataTable";
 import { Button } from "@/components/ui/button";
 import CustomTooltip from "@/components/customToolTip";
+import { Modal } from "@/components/modal";
 
 export default async function Portfolio({ params }: { params: { uid: string } }) {
   const supabase = createSupabaseClient();
@@ -75,7 +76,15 @@ export default async function Portfolio({ params }: { params: { uid: string } })
   const tags = deals ? await getInvestorProjectTag(supabase, deals) : [];
   const latestDeals = deals
     ? await Promise.all(
-        (await getLatestInvestment(supabase, deals)).map(async (deal) => ({
+        (
+          await getLatestInvestment(
+            supabase,
+            deals.map((deal) => ({
+              ...deal,
+              status: deal.deal_status,
+            }))
+          )
+        ).map(async (deal) => ({
           ...deal,
           logo_url: await deal.logo_url,
         }))
@@ -99,7 +108,6 @@ export default async function Portfolio({ params }: { params: { uid: string } })
           <CountUpComponent end={totalInvestment} duration={1} />
         </p>
       </div>
-
       <div className="flex flew-rows-3 gap-10 mt-5 w-full">
         <Tabs defaultValue="daily" className="space-y-4 w-full">
           <TabsList className="grid w-96 grid-cols-3">
@@ -235,9 +243,7 @@ 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">
+            <div className="mt-5 flex justify-center">{deals && deals.length ? <Modal /> : undefined}</div>
-              {deals && deals.length > 5 ? <Button>View More</Button> : undefined}
-            </div>
           </CardContent>
         </Card>
       </div>

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;}[]
+  deals: { project_id: number; deal_amount: number; created_time: Date; status: string}[]
 ) {
   const llist = [];
   const count = 5;
@@ -43,6 +43,7 @@ async function getLatestInvestment(
       amount: deals[i].deal_amount,
       date: new Date(deals[i].created_time),
       logo_url: url,
+      status: deals[i].status,
     });
   }
 

src/components/modal.tsx

@@ -0,0 +1,26 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "./ui/button";
+import { DataTable } from "./dataTable";
+
+export function Modal() {
+  return (
+    <div>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>View More</Button>
+        </DialogTrigger>
+        <DialogContent>
+          {/* <DataTable /> */}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/lib/data/investmentQuery.ts

@@ -56,7 +56,22 @@ export const getInvestmentByUserId = (client: SupabaseClient, userId: string) =>
 export function getInvestorDeal(client: SupabaseClient, userId: string) {
   return client
     .from("investment_deal")
-    .select("*")
+    .select(
+      `
+    id, 
+    ...deal_status_id(
+      deal_status:value
+      ),
+    project_id,
+    deal_amount,
+    created_time,
+    ...profiles (
+      investor_id:id,
+      username,
+      avatar_url
+    )
+    `
+    )
     .in("investor_id", [userId])
     .order("created_time", { ascending: true });
 }