feat: Implement notification API service, integrate unread count in header, and replace mock data on notification pages.

src/components/layout/CommonHeader.tsx

@@ -8,6 +8,7 @@ import { useSession, signOut } from 'next-auth/react';
 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';
 
 const navLinks = [
   { label: 'Education', href: '/education' },
@@ -22,6 +23,7 @@ export function CommonHeader() {
   const profileMenuRef = useRef<HTMLDivElement>(null);
   const [profileImage, setProfileImage] = useState<string | null>(null);
   const [profileName, setProfileName] = useState<string | null>(null);
+  const [notificationCount, setNotificationCount] = useState(0);
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -80,6 +82,31 @@ export function CommonHeader() {
     }
   }, [session, fetchProfileData]);
 
+  // Fetch notification unread count
+  const fetchUnreadCount = useCallback(async () => {
+    try {
+      const count = await notificationsApiService.getUnreadCount();
+      setNotificationCount(count);
+    } catch {
+      // Silently fail - user may not be authenticated yet
+    }
+  }, []);
+
+  useEffect(() => {
+    if (session) {
+      fetchUnreadCount();
+      // Poll every 30 seconds for new notifications
+      const interval = setInterval(fetchUnreadCount, 30000);
+      // Also refresh when a foreground notification arrives
+      const handleNotification = () => fetchUnreadCount();
+      window.addEventListener('notification-received', handleNotification);
+      return () => {
+        clearInterval(interval);
+        window.removeEventListener('notification-received', handleNotification);
+      };
+    }
+  }, [session, fetchUnreadCount]);
+
   // Listen for profile update events to refresh the header
   useEffect(() => {
     const handleProfileUpdate = () => {
@@ -146,8 +173,14 @@ export function CommonHeader() {
                   width={20}
                   height={22}
                 />
-                {/* Notification Dot */}
-                <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
+                {/* Notification Badge */}
+                {notificationCount > 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">
+                      {notificationCount > 99 ? '99+' : notificationCount}
+                    </span>
+                  </span>
+                )}
               </button>
 
               {/* Profile Section with Greeting - Entire area clickable */}