feat: add investment status to recent funds and dashboard components

src/app/dashboard/page.tsx

@@ -20,7 +20,7 @@ export default function Dashboard() {
     { id: number; project_name: string; business_id: { user_id: number }[]; dataroom_id: number }[]
   >([]);
   const [latestInvestment, setLatestInvestment] = useState<
-    { projectId: number; name: any; amount: number; date: Date; logo_url: string }[]
+    { projectId: number; name: any; amount: number; date: Date; logo_url: string; status: string }[]
   >([]);
   const [isSuccess, setIsSuccess] = useState(false);
   const [graphType, setGraphType] = useState("line");
@@ -58,9 +58,10 @@ export default function Dashboard() {
           amount: investment.amount,
           date: investment.date,
           logo_url: investment.logo_url,
+          status: investmentDetail?.data?.find((deal) => deal.project_id === investment.projectId)?.deal_status.value,
         }))
       );
-      // console.table(resolvedLatest);
+      // console.table(investmentDetail);
     };
     fetchLatestInvestment();
   }, [supabase, investmentDetail]);
@@ -230,7 +231,7 @@ export default function Dashboard() {
                       <CardTitle>Overview</CardTitle>
                     </CardHeader>
                     <CardContent className="pl-2">
-                      <Overview
+                      {/* <Overview
                         graphType={graphType}
                         data={overAllGraphData(
                           investmentDetail?.data
@@ -245,7 +246,7 @@ export default function Dashboard() {
                             })
                             .filter((deal) => deal !== undefined) as Deal[]
                         )}
-                      />
+                      /> */}
                       {/* tab to switch between line and bar graph */}
                       <Tabs defaultValue="line" className="space-y-4 ml-[50%] mt-2">
                         <TabsList>
@@ -262,7 +263,6 @@ export default function Dashboard() {
                   <Card className="col-span-3">
                     <CardHeader>
                       <CardTitle>Recent Funds</CardTitle>
-                      <CardDescription>You had {} investors invest this month.</CardDescription>
                     </CardHeader>
                     <CardContent>
                       <RecentFunds
@@ -274,6 +274,7 @@ export default function Dashboard() {
                                 amount: item.amount,
                                 avatar: item.logo_url,
                                 date: item.date,
+                                status: item.status,
                               };
                             }
                             return undefined;

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

@@ -30,7 +30,7 @@ async function getLatestInvestment(
 ) {
   const llist = [];
   const count = 8;
-
+  // select project name from the given id
   for (let i = deals.length - 1; i >= 0 && llist.length < count; --i) {
     let { data: project, error } = await supabase.from("project").select("project_name").eq("id", deals[i].project_id);
     if (error) {

src/components/recent-funds.tsx

@@ -6,11 +6,12 @@ export type RecentDealData = {
   investor_id: string;
   username: string;
   logo_url?: string;
+  status?: string;
   // email: string;
 };
 
 interface RecentFundsProps {
-  data?: { name?: string; amount?: number; avatar?: string; date?: Date; logo_url?: string }[];
+  data?: { name?: string; amount?: number; avatar?: string; date?: Date; logo_url?: string; status?: string }[];
 }
 
 export function RecentFunds(props: RecentFundsProps) {
@@ -25,6 +26,23 @@ export function RecentFunds(props: RecentFundsProps) {
           <div className="ml-4 space-y-1">
             <p className="text-sm font-medium leading-none">{deal.name}</p>
             <p className="text-xs text-muted-foreground">{deal?.date?.toLocaleDateString()}</p>
+            {deal.status && (
+              <div className="flex items-center space-x-1">
+                <span className="relative flex h-3 w-3">
+                  <span
+                    className={`animate-ping absolute inline-flex h-3 w-3 rounded-full  opacity-75 ${deal?.status === "In Progress" ? "bg-sky-400" : deal?.status === "Completed" ? "bg-green-400" : "bg-yellow-400"}`}
+                  ></span>
+                  <span
+                    className={`relative inline-flex rounded-full h-2 w-2 mt-[2px] ml-0.5 ${deal?.status === "In Progress" ? "bg-sky-500" : deal?.status === "Completed" ? "bg-green-500" : "bg-yellow-500"}`}
+                  ></span>
+                </span>
+                <p
+                  className={`text-xs m-0 ${deal?.status === "In Progress" ? "text-sky-500" : deal?.status === "Completed" ? "text-green-500" : "text-yellow-500"}`}
+                >
+                  {deal?.status}
+                </p>
+              </div>
+            )}
           </div>
           <div className="ml-auto font-medium">+${deal.amount}</div>
         </div>

src/lib/data/investmentQuery.ts

@@ -11,7 +11,19 @@ export const getInvestmentCountsByProjectsIds = (client: SupabaseClient, project
 };
 
 export const getInvestmentByProjectsIds = (client: SupabaseClient, projectIds: string[]) => {
-  return client.from("investment_deal").select("*").in("project_id", projectIds);
+  return client
+    .from("investment_deal")
+    .select(
+      `
+    id, 
+    deal_status:deal_status_id(value),
+    project_id,
+    deal_amount,
+    investor:users_id(email),
+    created_time
+    `
+    )
+    .in("project_id", projectIds);
 };
 
 export const getInvestmentByUserId = (client: SupabaseClient, userId: string) => {