feat: implement dedicated notification pages for agent and user roles.

src/components/layout/CommonHeader.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { agentsService } from '@/services/agents.service';
 import { usersService } from '@/services/users.service';
@@ -16,6 +17,7 @@ const navLinks = [
 
 export function CommonHeader() {
   const { data: session } = useSession();
+  const router = useRouter();
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const profileMenuRef = useRef<HTMLDivElement>(null);
   const [profileImage, setProfileImage] = useState<string | null>(null);
@@ -134,7 +136,10 @@ export function CommonHeader() {
           {session ? (
             <>
               {/* Notification Bell */}
-              <button className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity">
+              <button
+                onClick={() => router.push(userRole === 'AGENT' ? '/agent/notifications' : '/user/notifications')}
+                className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer"
+              >
                 <Image
                   src="/assets/notification-icon.svg"
                   alt="Notifications"