feat: implement dedicated notification pages for agent and user roles.
This commit is contained in:
pradeepkumar
261
src/app/(agent)/agent/notifications/page.tsx
Normal file
261
src/app/(agent)/agent/notifications/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
251
src/app/(user)/user/notifications/page.tsx
Normal file
251
src/app/(user)/user/notifications/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@
|
|||||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
import { useSession, signOut } from 'next-auth/react';
|
import { useSession, signOut } from 'next-auth/react';
|
||||||
import { agentsService } from '@/services/agents.service';
|
import { agentsService } from '@/services/agents.service';
|
||||||
import { usersService } from '@/services/users.service';
|
import { usersService } from '@/services/users.service';
|
||||||
@@ -16,6 +17,7 @@ const navLinks = [
|
|||||||
|
|
||||||
export function CommonHeader() {
|
export function CommonHeader() {
|
||||||
const { data: session } = useSession();
|
const { data: session } = useSession();
|
||||||
|
const router = useRouter();
|
||||||
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
||||||
const profileMenuRef = useRef<HTMLDivElement>(null);
|
const profileMenuRef = useRef<HTMLDivElement>(null);
|
||||||
const [profileImage, setProfileImage] = useState<string | null>(null);
|
const [profileImage, setProfileImage] = useState<string | null>(null);
|
||||||
@@ -134,7 +136,10 @@ export function CommonHeader() {
|
|||||||
{session ? (
|
{session ? (
|
||||||
<>
|
<>
|
||||||
{/* Notification Bell */}
|
{/* 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
|
<Image
|
||||||
src="/assets/notification-icon.svg"
|
src="/assets/notification-icon.svg"
|
||||||
alt="Notifications"
|
alt="Notifications"
|
||||||
|
|||||||
Reference in New Issue
Block a user