feat: add unread message count badge to CommonHeader for user role

public/assets/icons/message-orange-icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6 0H1.4C0.63 0 0.00699999 0.585 0.00699999 1.3L0 13L2.8 10.4H12.6C13.37 10.4 14 9.815 14 9.1V1.3C14 0.585 13.37 0 12.6 0ZM11.2 7.8H2.8V6.5H11.2V7.8ZM11.2 5.85H2.8V4.55H11.2V5.85ZM11.2 3.9H2.8V2.6H11.2V3.9Z" fill="#E58625"/>
+</svg>

src/components/layout/CommonHeader.tsx

@@ -14,7 +14,7 @@ const navLinks = [
 
 export function CommonHeader() {
   const { data: session, status } = useSession();
-  const { profileImage, profileName, avatarLoaded, setAvatarLoaded, notificationCount } = useHeaderData();
+  const { profileImage, profileName, avatarLoaded, setAvatarLoaded, notificationCount, messageCount } = useHeaderData();
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const [showGuestMenu, setShowGuestMenu] = useState(false);
   const [showMobileMenu, setShowMobileMenu] = useState(false);
@@ -90,6 +90,28 @@ export function CommonHeader() {
             <div className="w-[35px] h-[35px] rounded-full shimmer-loading" />
           ) : session ? (
             <>
+              {/* Message Icon - User role only */}
+              {userRole === 'USER' && (
+                <Link
+                  href="/user/message"
+                  className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer"
+                >
+                  <Image
+                    src="/assets/icons/message-orange-icon.svg"
+                    alt="Messages"
+                    width={20}
+                    height={18}
+                  />
+                  {messageCount > 0 && (
+                    <span className="absolute -top-1.5 -right-2 min-w-[18px] h-[18px] bg-red-500 rounded-full flex items-center justify-center px-1">
+                      <span className="text-white text-[10px] font-bold leading-none">
+                        {messageCount > 99 ? '99+' : messageCount}
+                      </span>
+                    </span>
+                  )}
+                </Link>
+              )}
+
               {/* Notification Bell */}
               <Link
                 href={userRole === 'AGENT' ? '/agent/notifications' : '/user/notifications'}

src/components/providers/header-provider.tsx

@@ -6,6 +6,7 @@ import { agentsService } from '@/services/agents.service';
 import { usersService } from '@/services/users.service';
 import { uploadService } from '@/services/upload.service';
 import { notificationsApiService } from '@/services/notifications-api.service';
+import { messagesService } from '@/services/messages.service';
 import { socketService } from '@/services';
 
 interface HeaderData {
@@ -15,6 +16,7 @@ interface HeaderData {
   avatarLoaded: boolean;
   setAvatarLoaded: (loaded: boolean) => void;
   notificationCount: number;
+  messageCount: number;
 }
 
 const HeaderContext = createContext<HeaderData>({
@@ -24,6 +26,7 @@ const HeaderContext = createContext<HeaderData>({
   avatarLoaded: false,
   setAvatarLoaded: () => {},
   notificationCount: 0,
+  messageCount: 0,
 });
 
 export function useHeaderData() {
@@ -37,6 +40,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
   const [profileTitle, setProfileTitle] = useState<string | null>(null);
   const [avatarLoaded, setAvatarLoaded] = useState(false);
   const [notificationCount, setNotificationCount] = useState(0);
+  const [messageCount, setMessageCount] = useState(0);
   const lastAvatarKeyRef = useRef<string | null>(null);
   const hasFetchedRef = useRef(false);
 
@@ -116,18 +120,30 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
       }
     };
 
+    const fetchMessageCount = async () => {
+      try {
+        const count = await messagesService.getUnreadCount();
+        setMessageCount(count);
+      } catch {
+        // Silently fail
+      }
+    };
+
     fetchCount();
+    fetchMessageCount();
     const interval = setInterval(fetchCount, 30000);
+    const messageInterval = setInterval(fetchMessageCount, 30000);
     const handleNotification = () => fetchCount();
     window.addEventListener('notification-received', handleNotification);
 
     // Listen to socket events for immediate notification count refresh
     const unsubConnectionReq = socketService.onConnectionRequest(() => fetchCount());
     const unsubConnectionRes = socketService.onConnectionResponse(() => fetchCount());
-    const unsubNewMessage = socketService.onNewMessage(() => fetchCount());
+    const unsubNewMessage = socketService.onNewMessage(() => { fetchCount(); fetchMessageCount(); });
 
     return () => {
       clearInterval(interval);
+      clearInterval(messageInterval);
       window.removeEventListener('notification-received', handleNotification);
       unsubConnectionReq();
       unsubConnectionRes();
@@ -136,7 +152,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
   }, [status]);
 
   return (
-    <HeaderContext.Provider value={{ profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded, notificationCount }}>
+    <HeaderContext.Provider value={{ profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded, notificationCount, messageCount }}>
       {children}
     </HeaderContext.Provider>
   );