From 46f5097742fdeddfc72eb79fe7b72f1dc71203c7 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Mon, 9 Feb 2026 02:27:58 +0530
Subject: [PATCH] feat: implement dedicated notification pages for agent and
 user roles.

---
 src/app/(agent)/agent/notifications/page.tsx | 261 +++++++++++++++++++
 src/app/(user)/user/notifications/page.tsx   | 251 ++++++++++++++++++
 src/components/layout/CommonHeader.tsx       |   7 +-
 3 files changed, 518 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(agent)/agent/notifications/page.tsx
 create mode 100644 src/app/(user)/user/notifications/page.tsx

diff --git a/src/app/(agent)/agent/notifications/page.tsx b/src/app/(agent)/agent/notifications/page.tsx
new file mode 100644
index 0000000..30ec3ae
--- /dev/null
+++ b/src/app/(agent)/agent/notifications/page.tsx
@@ -0,0 +1,261 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+// Mock notification data - replace with actual API call when backend is ready
+interface Notification {
+  id: string;
+  type: 'connection' | 'message' | 'system' | 'update' | 'request';
+  title: string;
+  description: string;
+  timestamp: string;
+  read: boolean;
+  actionUrl?: string;
+  avatar?: string;
+}
+
+const mockNotifications: Notification[] = [
+  {
+    id: '1',
+    type: 'request',
+    title: 'New Connection Request',
+    description: 'Jane Doe wants to connect with you',
+    timestamp: '1 hour ago',
+    read: false,
+    actionUrl: '/agent/requests',
+  },
+  {
+    id: '2',
+    type: 'message',
+    title: 'New Message',
+    description: 'You have a new message from Mike Wilson',
+    timestamp: '3 hours ago',
+    read: false,
+    actionUrl: '/agent/message',
+  },
+  {
+    id: '3',
+    type: 'connection',
+    title: 'Connection Accepted',
+    description: 'Your connection with Sarah Johnson has been confirmed',
+    timestamp: '1 day ago',
+    read: true,
+    actionUrl: '/agent/connections',
+  },
+  {
+    id: '4',
+    type: 'system',
+    title: 'Profile Verification',
+    description: 'Your profile has been verified successfully',
+    timestamp: '2 days ago',
+    read: true,
+  },
+  {
+    id: '5',
+    type: 'update',
+    title: 'New Features Available',
+    description: 'Check out the latest updates to your dashboard',
+    timestamp: '5 days ago',
+    read: true,
+  },
+];
+
+function getNotificationIcon(type: Notification['type']) {
+  switch (type) {
+    case 'connection':
+      return '/assets/icons/user-placeholder-icon.svg';
+    case 'message':
+      return '/assets/icons/message-icon.svg';
+    case 'system':
+      return '/assets/icons/settings-icon.svg';
+    case 'update':
+      return '/assets/icons/notification-bell-icon.svg';
+    case 'request':
+      return '/assets/icons/clipboard-icon.svg';
+    default:
+      return '/assets/icons/notification-bell-icon.svg';
+  }
+}
+
+export default function AgentNotificationsPage() {
+  const [notifications, setNotifications] = useState<Notification[]>(mockNotifications);
+  const [filter, setFilter] = useState<'all' | 'unread'>('all');
+
+  const filteredNotifications = filter === 'all'
+    ? notifications
+    : notifications.filter(n => !n.read);
+
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  const markAsRead = (id: string) => {
+    setNotifications(prev =>
+      prev.map(n => n.id === id ? { ...n, read: true } : n)
+    );
+  };
+
+  const markAllAsRead = () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
+      {/* Header */}
+      <div className="border border-[#00293d]/10 rounded-[20px] bg-white p-6 mb-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-full bg-[#e58625]/10 flex items-center justify-center">
+              <Image
+                src="/assets/icons/notification-bell-icon.svg"
+                alt="Notifications"
+                width={24}
+                height={24}
+              />
+            </div>
+            <div>
+              <h1 className="font-fractul font-bold text-[24px] leading-[29px] text-[#00293D]">
+                Notifications
+              </h1>
+              <p className="font-serif text-[14px] text-[#00293D]/60">
+                {unreadCount > 0 ? `You have ${unreadCount} unread notification${unreadCount > 1 ? 's' : ''}` : 'All caught up!'}
+              </p>
+            </div>
+          </div>
+
+          {unreadCount > 0 && (
+            <button
+              onClick={markAllAsRead}
+              className="font-serif text-[14px] text-[#e58625] hover:text-[#d47720] transition-colors"
+            >
+              Mark all as read
+            </button>
+          )}
+        </div>
+
+        {/* Filter Tabs */}
+        <div className="flex gap-4 mt-6">
+          <button
+            onClick={() => setFilter('all')}
+            className={`px-4 py-2 rounded-[15px] font-serif text-[14px] transition-colors ${
+              filter === 'all'
+                ? 'bg-[#00293D] text-white'
+                : 'bg-[#00293D]/10 text-[#00293D] hover:bg-[#00293D]/20'
+            }`}
+          >
+            All ({notifications.length})
+          </button>
+          <button
+            onClick={() => setFilter('unread')}
+            className={`px-4 py-2 rounded-[15px] font-serif text-[14px] transition-colors ${
+              filter === 'unread'
+                ? 'bg-[#00293D] text-white'
+                : 'bg-[#00293D]/10 text-[#00293D] hover:bg-[#00293D]/20'
+            }`}
+          >
+            Unread ({unreadCount})
+          </button>
+        </div>
+      </div>
+
+      {/* Notifications List */}
+      <div className="border border-[#00293d]/10 rounded-[20px] bg-white overflow-hidden">
+        {filteredNotifications.length === 0 ? (
+          <div className="p-12 text-center">
+            <div className="w-16 h-16 rounded-full bg-[#00293D]/5 flex items-center justify-center mx-auto mb-4">
+              <Image
+                src="/assets/icons/notification-bell-icon.svg"
+                alt="No notifications"
+                width={32}
+                height={32}
+                className="opacity-30"
+              />
+            </div>
+            <p className="font-serif text-[16px] text-[#00293D]/50">
+              {filter === 'unread' ? 'No unread notifications' : 'No notifications yet'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-[#00293d]/10">
+            {filteredNotifications.map((notification) => (
+              <div
+                key={notification.id}
+                className={`p-4 hover:bg-[#00293D]/5 transition-colors ${
+                  !notification.read ? 'bg-[#e58625]/5' : ''
+                }`}
+              >
+                <div className="flex items-start gap-4">
+                  {/* Icon */}
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    !notification.read ? 'bg-[#e58625]/20' : 'bg-[#00293D]/10'
+                  }`}>
+                    <Image
+                      src={getNotificationIcon(notification.type)}
+                      alt={notification.type}
+                      width={20}
+                      height={20}
+                    />
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div>
+                        <p className={`font-fractul text-[14px] leading-[17px] ${
+                          !notification.read ? 'font-bold text-[#00293D]' : 'font-medium text-[#00293D]/80'
+                        }`}>
+                          {notification.title}
+                        </p>
+                        <p className="font-serif text-[14px] text-[#00293D]/60 mt-1">
+                          {notification.description}
+                        </p>
+                      </div>
+                      <span className="font-serif text-[12px] text-[#00293D]/50 flex-shrink-0">
+                        {notification.timestamp}
+                      </span>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center gap-4 mt-3">
+                      {notification.actionUrl && (
+                        <Link
+                          href={notification.actionUrl}
+                          className="font-serif text-[13px] text-[#e58625] hover:text-[#d47720] transition-colors"
+                        >
+                          View details
+                        </Link>
+                      )}
+                      {!notification.read && (
+                        <button
+                          onClick={() => markAsRead(notification.id)}
+                          className="font-serif text-[13px] text-[#00293D]/50 hover:text-[#00293D] transition-colors"
+                        >
+                          Mark as read
+                        </button>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Unread indicator */}
+                  {!notification.read && (
+                    <div className="w-2 h-2 rounded-full bg-[#e58625] flex-shrink-0 mt-2" />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Settings Link */}
+      <div className="mt-6 text-center">
+        <Link
+          href="/agent/settings/notifications"
+          className="font-serif text-[14px] text-[#00293D]/60 hover:text-[#00293D] transition-colors"
+        >
+          Manage notification settings
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(user)/user/notifications/page.tsx b/src/app/(user)/user/notifications/page.tsx
new file mode 100644
index 0000000..4e550b0
--- /dev/null
+++ b/src/app/(user)/user/notifications/page.tsx
@@ -0,0 +1,251 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+// Mock notification data - replace with actual API call when backend is ready
+interface Notification {
+  id: string;
+  type: 'connection' | 'message' | 'system' | 'update';
+  title: string;
+  description: string;
+  timestamp: string;
+  read: boolean;
+  actionUrl?: string;
+  avatar?: string;
+}
+
+const mockNotifications: Notification[] = [
+  {
+    id: '1',
+    type: 'connection',
+    title: 'New Connection Request',
+    description: 'John Smith wants to connect with you',
+    timestamp: '2 hours ago',
+    read: false,
+    actionUrl: '/user/connections',
+  },
+  {
+    id: '2',
+    type: 'message',
+    title: 'New Message',
+    description: 'You have a new message from Sarah Johnson',
+    timestamp: '5 hours ago',
+    read: false,
+    actionUrl: '/user/message',
+  },
+  {
+    id: '3',
+    type: 'system',
+    title: 'Profile Update Reminder',
+    description: 'Complete your profile to get better recommendations',
+    timestamp: '1 day ago',
+    read: true,
+    actionUrl: '/user/settings',
+  },
+  {
+    id: '4',
+    type: 'update',
+    title: 'New Features Available',
+    description: 'Check out the latest updates to our platform',
+    timestamp: '3 days ago',
+    read: true,
+  },
+];
+
+function getNotificationIcon(type: Notification['type']) {
+  switch (type) {
+    case 'connection':
+      return '/assets/icons/user-placeholder-icon.svg';
+    case 'message':
+      return '/assets/icons/message-icon.svg';
+    case 'system':
+      return '/assets/icons/settings-icon.svg';
+    case 'update':
+      return '/assets/icons/notification-bell-icon.svg';
+    default:
+      return '/assets/icons/notification-bell-icon.svg';
+  }
+}
+
+export default function UserNotificationsPage() {
+  const [notifications, setNotifications] = useState<Notification[]>(mockNotifications);
+  const [filter, setFilter] = useState<'all' | 'unread'>('all');
+
+  const filteredNotifications = filter === 'all'
+    ? notifications
+    : notifications.filter(n => !n.read);
+
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  const markAsRead = (id: string) => {
+    setNotifications(prev =>
+      prev.map(n => n.id === id ? { ...n, read: true } : n)
+    );
+  };
+
+  const markAllAsRead = () => {
+    setNotifications(prev => prev.map(n => ({ ...n, read: true })));
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
+      {/* Header */}
+      <div className="border border-[#00293d]/10 rounded-[20px] bg-white p-6 mb-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-full bg-[#e58625]/10 flex items-center justify-center">
+              <Image
+                src="/assets/icons/notification-bell-icon.svg"
+                alt="Notifications"
+                width={24}
+                height={24}
+              />
+            </div>
+            <div>
+              <h1 className="font-fractul font-bold text-[24px] leading-[29px] text-[#00293D]">
+                Notifications
+              </h1>
+              <p className="font-serif text-[14px] text-[#00293D]/60">
+                {unreadCount > 0 ? `You have ${unreadCount} unread notification${unreadCount > 1 ? 's' : ''}` : 'All caught up!'}
+              </p>
+            </div>
+          </div>
+
+          {unreadCount > 0 && (
+            <button
+              onClick={markAllAsRead}
+              className="font-serif text-[14px] text-[#e58625] hover:text-[#d47720] transition-colors"
+            >
+              Mark all as read
+            </button>
+          )}
+        </div>
+
+        {/* Filter Tabs */}
+        <div className="flex gap-4 mt-6">
+          <button
+            onClick={() => setFilter('all')}
+            className={`px-4 py-2 rounded-[15px] font-serif text-[14px] transition-colors ${
+              filter === 'all'
+                ? 'bg-[#00293D] text-white'
+                : 'bg-[#00293D]/10 text-[#00293D] hover:bg-[#00293D]/20'
+            }`}
+          >
+            All ({notifications.length})
+          </button>
+          <button
+            onClick={() => setFilter('unread')}
+            className={`px-4 py-2 rounded-[15px] font-serif text-[14px] transition-colors ${
+              filter === 'unread'
+                ? 'bg-[#00293D] text-white'
+                : 'bg-[#00293D]/10 text-[#00293D] hover:bg-[#00293D]/20'
+            }`}
+          >
+            Unread ({unreadCount})
+          </button>
+        </div>
+      </div>
+
+      {/* Notifications List */}
+      <div className="border border-[#00293d]/10 rounded-[20px] bg-white overflow-hidden">
+        {filteredNotifications.length === 0 ? (
+          <div className="p-12 text-center">
+            <div className="w-16 h-16 rounded-full bg-[#00293D]/5 flex items-center justify-center mx-auto mb-4">
+              <Image
+                src="/assets/icons/notification-bell-icon.svg"
+                alt="No notifications"
+                width={32}
+                height={32}
+                className="opacity-30"
+              />
+            </div>
+            <p className="font-serif text-[16px] text-[#00293D]/50">
+              {filter === 'unread' ? 'No unread notifications' : 'No notifications yet'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-[#00293d]/10">
+            {filteredNotifications.map((notification) => (
+              <div
+                key={notification.id}
+                className={`p-4 hover:bg-[#00293D]/5 transition-colors ${
+                  !notification.read ? 'bg-[#e58625]/5' : ''
+                }`}
+              >
+                <div className="flex items-start gap-4">
+                  {/* Icon */}
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    !notification.read ? 'bg-[#e58625]/20' : 'bg-[#00293D]/10'
+                  }`}>
+                    <Image
+                      src={getNotificationIcon(notification.type)}
+                      alt={notification.type}
+                      width={20}
+                      height={20}
+                    />
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div>
+                        <p className={`font-fractul text-[14px] leading-[17px] ${
+                          !notification.read ? 'font-bold text-[#00293D]' : 'font-medium text-[#00293D]/80'
+                        }`}>
+                          {notification.title}
+                        </p>
+                        <p className="font-serif text-[14px] text-[#00293D]/60 mt-1">
+                          {notification.description}
+                        </p>
+                      </div>
+                      <span className="font-serif text-[12px] text-[#00293D]/50 flex-shrink-0">
+                        {notification.timestamp}
+                      </span>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center gap-4 mt-3">
+                      {notification.actionUrl && (
+                        <Link
+                          href={notification.actionUrl}
+                          className="font-serif text-[13px] text-[#e58625] hover:text-[#d47720] transition-colors"
+                        >
+                          View details
+                        </Link>
+                      )}
+                      {!notification.read && (
+                        <button
+                          onClick={() => markAsRead(notification.id)}
+                          className="font-serif text-[13px] text-[#00293D]/50 hover:text-[#00293D] transition-colors"
+                        >
+                          Mark as read
+                        </button>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Unread indicator */}
+                  {!notification.read && (
+                    <div className="w-2 h-2 rounded-full bg-[#e58625] flex-shrink-0 mt-2" />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Settings Link */}
+      <div className="mt-6 text-center">
+        <Link
+          href="/user/settings/notifications"
+          className="font-serif text-[14px] text-[#00293D]/60 hover:text-[#00293D] transition-colors"
+        >
+          Manage notification settings
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/CommonHeader.tsx b/src/components/layout/CommonHeader.tsx
index 3362f79..ed50981 100644
--- a/src/components/layout/CommonHeader.tsx
+++ b/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"