fix: Populate the directionsUrl with a Google Maps link on the contact page.

src/components/settings/SettingsSidebar.tsx

@@ -1,13 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useSession } from 'next-auth/react';
-import { agentsService } from '@/services/agents.service';
-import { usersService } from '@/services/users.service';
-import { uploadService } from '@/services/upload.service';
+import { useHeaderData } from '@/components/providers/header-provider';
 
 interface NavItem {
   label: string;
@@ -23,74 +20,11 @@ export function SettingsSidebar({
   basePath = '/agent/settings',
 }: SettingsSidebarProps) {
   const pathname = usePathname();
-  const { data: session } = useSession();
+  const { profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded } = useHeaderData();
+  const [localAvatarLoaded, setLocalAvatarLoaded] = useState(false);
 
-  const [avatarLoaded, setAvatarLoaded] = useState(false);
-
-  const [profileData, setProfileData] = useState({
-    name: session?.user?.name || 'User',
-    title: 'Real Estate Agent',
-    avatarUrl: session?.user?.image || null,
-  });
-
-  const fetchProfile = useCallback(async () => {
-    try {
-      const role = (session?.user as any)?.role;
-      let avatarUrl: string | null = null;
-      let name = session?.user?.name || 'User';
-      let title = 'User';
-
-      if (role === 'AGENT') {
-        const profile = await agentsService.getMyProfile();
-        name = `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || name;
-        title = profile.agentType?.name || 'Real Estate Agent';
-
-        if (profile.avatar) {
-          try {
-            avatarUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
-          } catch {
-            avatarUrl = profile.avatar;
-          }
-        }
-      } else if (role === 'USER') {
-        const profile = await usersService.getMyProfile();
-        name = `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || name;
-        title = 'Member';
-
-        if (profile.avatar) {
-          try {
-            avatarUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
-          } catch {
-            avatarUrl = profile.avatar;
-          }
-        }
-      }
-
-      setProfileData({ name, title, avatarUrl });
-      setAvatarLoaded(false);
-    } catch (err) {
-      console.error('Failed to fetch profile for sidebar:', err);
-    }
-  }, [session]);
-
-  useEffect(() => {
-    if (session) {
-      fetchProfile();
-    }
-  }, [session, fetchProfile]);
-
-  useEffect(() => {
-    const handleProfileUpdate = () => {
-      if (session) {
-        fetchProfile();
-      }
-    };
-
-    window.addEventListener('profile-updated', handleProfileUpdate);
-    return () => {
-      window.removeEventListener('profile-updated', handleProfileUpdate);
-    };
-  }, [session, fetchProfile]);
+  // Use header context's avatarLoaded or local state
+  const isAvatarLoaded = avatarLoaded || localAvatarLoaded;
 
   const isAgent = basePath === '/agent/settings';
 
@@ -137,25 +71,25 @@ export function SettingsSidebar({
       <div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
         <div className="flex items-center gap-4">
           <div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0 bg-gray-100 relative">
-            {(!profileData.avatarUrl || !avatarLoaded) && (
+            {(!profileImage || !isAvatarLoaded) && (
               <div className="absolute inset-0 rounded-full shimmer-loading" />
             )}
-            {profileData.avatarUrl && (
+            {profileImage && (
               <img
-                ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
-                src={profileData.avatarUrl}
-                alt={profileData.name}
-                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
-                onLoad={() => setAvatarLoaded(true)}
+                ref={(el) => { if (el?.complete && el.naturalWidth > 0) { setAvatarLoaded(true); setLocalAvatarLoaded(true); } }}
+                src={profileImage}
+                alt={profileName || 'User'}
+                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? 'opacity-100' : 'opacity-0'}`}
+                onLoad={() => { setAvatarLoaded(true); setLocalAvatarLoaded(true); }}
               />
             )}
           </div>
           <div>
             <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
-              {profileData.name}
+              {profileName || 'User'}
             </h3>
             <p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
-              {profileData.title}
+              {profileTitle || (isAgent ? 'Real Estate Agent' : 'Member')}
             </p>
           </div>
         </div>