From 3d77bd59bab83682152f8c0e77f655ab964ba0f0 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:08:36 +0700
Subject: [PATCH 1/5] feat: add notification badge with animated ping effect to
 navigation bar

---
 src/components/navigationBar/AuthenticatedComponents.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 41ed528..cb5d89f 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -32,6 +32,9 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
       <Link href={"/notification"}>
         <div className="relative inline-block">
           <Bell className="h-6 w-6 " />
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+            {displayValue}
+          </span>
           <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
             {displayValue}
           </span>

From 2f4d9316826c80e3f2dc4f15a8a0ddf6b3f29407 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:08:55 +0700
Subject: [PATCH 2/5] fix: remove duplicate display value in notification badge
 component

---
 src/components/navigationBar/AuthenticatedComponents.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index cb5d89f..227435d 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -36,7 +36,6 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
             {displayValue}
           </span>
           <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
-            {displayValue}
           </span>
         </div>
       </Link>

From d6a11581a1c774ec89d4b688aa2a5cece2047047 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:23:22 +0700
Subject: [PATCH 3/5] feat: add ChartPie icon for business dashboard in
 navigation bar

---
 .../navigationBar/AuthenticatedComponents.tsx         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 227435d..63e4345 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Bell, Heart, Wallet } from "lucide-react";
+import { Bell, Heart, Wallet, ChartPie } from "lucide-react";
 import { LogoutButton } from "@/components/auth/logoutButton";
 import { useUserRole } from "@/hooks/useUserRole";
 
@@ -35,14 +35,19 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
           <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
             {displayValue}
           </span>
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
-          </span>
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping"></span>
         </div>
       </Link>
       <Heart />
       <Link href={"/portfolio/" + uid}>
         <Wallet className="cursor-pointer" />
       </Link>
+      {/*chart pie icon for bussiness's dashboard */}
+      {data?.role === "business" && (
+        <Link href="/dashboard">
+          <ChartPie />
+        </Link>
+      )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" size="icon" className="overflow-hidden rounded-full">

From 72d2c8bbfec1d8ac5ae3bff2fef0d1499b92ed0c Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:49:36 +0700
Subject: [PATCH 4/5] feat: add CustomTooltip component and integrate it into
 navigation bar links

---
 src/components/customToolTip.tsx              | 22 +++++++++++
 .../navigationBar/AuthenticatedComponents.tsx | 37 +++++++++++--------
 2 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 src/components/customToolTip.tsx

diff --git a/src/components/customToolTip.tsx b/src/components/customToolTip.tsx
new file mode 100644
index 0000000..a2cb991
--- /dev/null
+++ b/src/components/customToolTip.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip";
+
+interface CustomTooltipProps {
+  message: string;
+  children: React.ReactNode;
+}
+
+const CustomTooltip: React.FC<CustomTooltipProps> = ({ message, children }) => {
+  return (
+    <TooltipProvider delayDuration={0.5}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent>
+          <p>{message}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default CustomTooltip;
diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 63e4345..b983426 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -13,6 +13,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Bell, Heart, Wallet, ChartPie } from "lucide-react";
 import { LogoutButton } from "@/components/auth/logoutButton";
 import { useUserRole } from "@/hooks/useUserRole";
+import CustomTooltip from "../customToolTip";
 
 interface AuthenticatedComponentsProps {
   uid: string;
@@ -29,24 +30,30 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
 
   return (
     <div className={`flex gap-3 pl-2 items-center ${businessClass}`}>
-      <Link href={"/notification"}>
-        <div className="relative inline-block">
-          <Bell className="h-6 w-6 " />
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
-            {displayValue}
-          </span>
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping"></span>
-        </div>
-      </Link>
+      <CustomTooltip message="Notification">
+        <Link href={"/notification"}>
+          <div className="relative inline-block">
+            <Bell className="h-6 w-6 " />
+            <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+              {displayValue}
+            </span>
+            <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping"></span>
+          </div>
+        </Link>
+      </CustomTooltip>
       <Heart />
-      <Link href={"/portfolio/" + uid}>
-        <Wallet className="cursor-pointer" />
-      </Link>
+      <CustomTooltip message="Portfolio">
+        <Link href={"/portfolio/" + uid}>
+          <Wallet className="cursor-pointer" />
+        </Link>
+      </CustomTooltip>
       {/*chart pie icon for bussiness's dashboard */}
       {data?.role === "business" && (
-        <Link href="/dashboard">
-          <ChartPie />
-        </Link>
+        <CustomTooltip message="Dashboard">
+          <Link href="/dashboard">
+            <ChartPie />
+          </Link>
+        </CustomTooltip>
       )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>

From 36eb461f19071314bbe438befb4dd4c1bf4da5b5 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 11 Nov 2024 11:53:35 +0700
Subject: [PATCH 5/5] fix: reduce the number of latest investments fetched from
 8 to 5

---
 src/app/portfolio/[uid]/query.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/portfolio/[uid]/query.ts b/src/app/portfolio/[uid]/query.ts
index aac9153..3333de8 100644
--- a/src/app/portfolio/[uid]/query.ts
+++ b/src/app/portfolio/[uid]/query.ts
@@ -29,7 +29,7 @@ async function getLatestInvestment(
   deals: { project_id: number; deal_amount: number; created_time: Date;}[]
 ) {
   const llist = [];
-  const count = 8;
+  const count = 5;
   // 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);