From 39a29983440426592b2515d3e07002155ce43f5f Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Wed, 4 Mar 2026 20:24:41 +0530
Subject: [PATCH] feat: Display pending connection request count on the agent
 dashboard profile card.

---
 src/app/(agent)/agent/dashboard/page.tsx | 11 +++++++++--
 src/components/profile/ProfileCard.tsx   | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx
index 2754f04..f3ebe6d 100644
--- a/src/app/(agent)/agent/dashboard/page.tsx
+++ b/src/app/(agent)/agent/dashboard/page.tsx
@@ -16,6 +16,7 @@ import {
   PhotoUploadModal,
 } from '@/components/profile';
 import { agentsService, AgentProfile, FieldValueResponse } from '@/services/agents.service';
+import { connectionRequestsService } from '@/services/connection-requests.service';
 import { uploadService } from '@/services/upload.service';
 import { mapFieldValuesToExperience, mapFieldValuesToProfileCard, mapFieldValuesToAvailability, mapFieldValuesToSpecializationFields, mapFieldValuesToContactInfo, ExperienceData, ProfileCardData, AvailabilityData, SpecializationFieldsData, ContactInfoData } from '@/utils/profileDataMapper';
 
@@ -99,6 +100,7 @@ export default function AgentDashboard() {
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
   const [isAvailable, setIsAvailable] = useState(true);
   const [isTogglingAvailability, setIsTogglingAvailability] = useState(false);
+  const [pendingRequestCount, setPendingRequestCount] = useState(0);
 
   const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg';
 
@@ -116,15 +118,19 @@ export default function AgentDashboard() {
         setLoading(true);
         setError(null);
 
-        // Fetch profile and field values in parallel
-        const [profile, fieldValuesResponse] = await Promise.all([
+        // Fetch profile, field values, and pending request count in parallel
+        const [profile, fieldValuesResponse, requestCounts] = await Promise.all([
           agentsService.getMyProfile(),
           agentsService.getFieldValues(),
+          connectionRequestsService.getRequestCounts().catch(() => null),
         ]);
 
         setAgentProfile(profile);
         setFieldValues(fieldValuesResponse.fieldValues);
         setIsAvailable(profile.isAvailable ?? true);
+        if (requestCounts) {
+          setPendingRequestCount(requestCounts.pending);
+        }
 
         // Map field values to experience data structure
         const mappedExperience = mapFieldValuesToExperience(fieldValuesResponse.fieldValues);
@@ -351,6 +357,7 @@ export default function AgentDashboard() {
             editHref="/agent/edit"
             messageHref="/agent/message"
             requestsHref="/agent/network"
+            pendingRequestCount={pendingRequestCount}
           />
 
           {/* Experience Section - Dynamic data from profile fields */}
diff --git a/src/components/profile/ProfileCard.tsx b/src/components/profile/ProfileCard.tsx
index 9173753..ecebae2 100644
--- a/src/components/profile/ProfileCard.tsx
+++ b/src/components/profile/ProfileCard.tsx
@@ -22,6 +22,7 @@ interface ProfileCardProps {
   editHref?: string;
   messageHref?: string;
   requestsHref?: string;
+  pendingRequestCount?: number;
   connectionStatus?: ConnectionStatus;
   onConnectClick?: () => void; // Callback when Connect button is clicked (for opening modal)
   onUnlinkClick?: () => void; // Callback when Unlink button is clicked
@@ -40,6 +41,7 @@ export function ProfileCard({
   editHref = '/agent/edit',
   messageHref,
   requestsHref,
+  pendingRequestCount = 0,
   connectionStatus,
   onConnectClick,
   onUnlinkClick,
@@ -168,11 +170,11 @@ export function ProfileCard({
             </button>
           )}
           {showEditButton && requestsHref ? (
-            // Agent's own profile - show Requests link
+            // Agent's own profile - show Requests link with badge
             <Link
               href={requestsHref}
               onClick={(e) => handleActionClick(e, requestsHref)}
-              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
+              className="relative flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
             >
               <Image
                 src="/assets/icons/requests-dark-icon.svg"
@@ -181,6 +183,11 @@ export function ProfileCard({
                 height={13}
               />
               Requests
+              {pendingRequestCount > 0 && (
+                <span className="absolute -top-2 -right-2 min-w-[20px] h-[20px] flex items-center justify-center px-1 bg-red-500 text-white text-[11px] font-bold rounded-full">
+                  {pendingRequestCount > 99 ? '99+' : pendingRequestCount}
+                </span>
+              )}
             </Link>
           ) : (
             // Public view - show Connect/Pending/Unlink button based on connection status