shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add notifications page and update navigation to redirect notifications to a dedicated route

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-15 18:25:29 +06:00
parent ad6d5e26ad
commit e25bfa91a5
10 changed files with 238 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/InvestorNotification.tsx
View File

@@ -1,55 +1,21 @@
'use client';
import { useState } from 'react';
import { Bell, X, ArrowRight, Package, DollarSign, Bike, AlertCircle, CheckCircle } from 'lucide-react';
import Link from 'next/link';
import { Bell, Package, DollarSign, Bike, AlertCircle, CheckCircle } from 'lucide-react';
const mockNotifications = [
{
id: '1',
type: 'rental',
title: 'New Rental Started',
message: 'Your bike AB-1234 has been rented by rider MR-456',
time: '5 min ago',
read: false,
},
{
id: '2',
type: 'earning',
title: 'Earning Credited',
message: '৳450 has been added to your wallet from bike CD-5678',
time: '2 hours ago',
read: false,
},
{
id: '3',
type: 'success',
title: 'Withdrawal Complete',
message: 'Your withdrawal of ৳5,000 has been processed successfully',
time: '1 day ago',
read: true,
},
{
id: '4',
type: 'alert',
title: 'Maintenance Alert',
message: 'Bike XY-9012 requires maintenance attention',
time: '2 days ago',
read: true,
},
{ id: '1', type: 'rental', title: 'New Rental Started', message: 'Your bike AB-1234 has been rented by rider MR-456', time: '5 min ago', read: false },
{ id: '2', type: 'earning', title: 'Earning Credited', message: '৳450 has been added to your wallet from bike CD-5678', time: '2 hours ago', read: false },
{ id: '3', type: 'success', title: 'Withdrawal Complete', message: 'Your withdrawal of ৳5,000 has been processed successfully', time: '1 day ago', read: true },
{ id: '4', type: 'alert', title: 'Maintenance Alert', message: 'Bike XY-9012 requires maintenance attention', time: '2 days ago', read: true },
];
const iconMap: Record<string, any> = {
rental: Bike,
earning: DollarSign,
success: CheckCircle,
alert: AlertCircle,
default: Package,
rental: Bike, earning: DollarSign, success: CheckCircle, alert: AlertCircle, default: Package,
};
export default function InvestorNotification({ isMobile = false }: { isMobile?: boolean }) {
const [isOpen, setIsOpen] = useState(false);
const [notifications] = useState(mockNotifications);
const unreadCount = notifications.filter(n => !n.read).length;
const unreadCount = mockNotifications.filter(n => !n.read).length;
if (isMobile) {
return (
@@ -58,117 +24,29 @@ export default function InvestorNotification({ isMobile = false }: { isMobile?:
<h1 className="text-lg font-extrabold text-accent">JAIBEN</h1>
<span className="text-[10px] text-accent font-medium">Investor</span>
</div>
<button
onClick={() => setIsOpen(true)}
className="relative p-2 hover:bg-slate-100 rounded-lg transition-colors"
>
<Link href="/investor/notifications" className="relative p-2 hover:bg-slate-100 rounded-lg transition-colors">
<Bell className="w-5 h-5 text-slate-600" />
{unreadCount > 0 && (
<span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
{unreadCount}
</span>
)}
</button>
{isOpen && (
<>
<div
className="fixed inset-0 bg-black/40 z-40"
onClick={() => setIsOpen(false)}
/>
<div className="fixed top-14 left-0 right-0 bg-white border-b border-slate-200 shadow-lg z-50 max-h-[60vh] overflow-y-auto">
<div className="p-4">
<div className="flex items-center justify-between mb-4">
<h2 className="font-bold text-slate-800">Notifications</h2>
<button
onClick={() => setIsOpen(false)}
className="p-1 hover:bg-slate-100 rounded"
>
<X className="w-5 h-5 text-slate-500" />
</button>
</div>
<div className="space-y-3">
{notifications.map((notif) => {
const Icon = iconMap[notif.type] || iconMap.default;
return (
<div
key={notif.id}
className={`p-3 rounded-xl border ${notif.read ? 'border-slate-100 bg-white' : 'border-slate-200 bg-slate-50'}`}
>
<div className="flex items-start gap-3">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${notif.read ? 'bg-slate-100' : 'bg-accent/10'}`}>
<Icon className={`w-4 h-4 ${notif.read ? 'text-slate-400' : 'text-accent'}`} />
</div>
<div className="flex-1 min-w-0">
<p className={`text-sm font-semibold ${notif.read ? 'text-slate-600' : 'text-slate-800'}`}>
{notif.title}
</p>
<p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notif.message}</p>
<p className="text-[10px] text-slate-400 mt-1">{notif.time}</p>
</div>
{!notif.read && (
<div className="w-2 h-2 bg-accent rounded-full shrink-0 mt-2" />
)}
</div>
</div>
);
})}
</div>
</div>
</div>
</>
)}
</Link>
</div>
);
}
return (
<div className="hidden lg:block w-80 shrink-0">
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm sticky top-6">
<div className="p-4 border-b border-slate-100 flex items-center justify-between">
<h2 className="font-bold text-slate-800 flex items-center gap-2">
<Bell className="w-5 h-5 text-slate-400" />
Notifications
</h2>
{unreadCount > 0 && (
<span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">
{unreadCount} new
</span>
)}
<div className="hidden lg:block">
<Link href="/investor/notifications" className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
<div className="flex items-center gap-3">
<Bell className="w-5 h-5 text-slate-600" />
<span className="text-sm font-medium text-slate-700">Notifications</span>
</div>
<div className="p-3 space-y-2 max-h-[calc(100vh-200px)] overflow-y-auto">
{notifications.map((notif) => {
const Icon = iconMap[notif.type] || iconMap.default;
return (
<div
key={notif.id}
className={`p-3 rounded-xl border transition-all cursor-pointer hover:shadow-sm ${notif.read ? 'border-slate-100 hover:border-slate-200' : 'border-slate-200 bg-slate-50 hover:bg-slate-100'}`}
>
<div className="flex items-start gap-3">
<div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${notif.read ? 'bg-slate-100' : 'bg-accent/10'}`}>
<Icon className={`w-4 h-4 ${notif.read ? 'text-slate-400' : 'text-accent'}`} />
</div>
<div className="flex-1 min-w-0">
<p className={`text-sm font-semibold ${notif.read ? 'text-slate-600' : 'text-slate-800'}`}>
{notif.title}
</p>
<p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notif.message}</p>
<p className="text-[10px] text-slate-400 mt-1">{notif.time}</p>
</div>
{!notif.read && (
<div className="w-2 h-2 bg-accent rounded-full shrink-0 mt-2" />
)}
</div>
</div>
);
})}
</div>
<div className="p-3 border-t border-slate-100">
<button className="w-full text-sm font-semibold text-accent hover:text-accent-dark flex items-center justify-center gap-1 py-2 hover:bg-slate-50 rounded-lg transition-colors">
View All Notifications <ArrowRight className="w-4 h-4" />
</button>
</div>
</div>
{unreadCount > 0 && (
<span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">{unreadCount}</span>
)}
</Link>
</div>
);
}

2
src/components/LayoutContent.tsx
View File

@@ -13,7 +13,7 @@ export default function LayoutContent({ children }: LayoutContentProps) {
return (
<>
{showSidebar && <Sidebar />}
<main className={showSidebar ? "lg:ml-64 min-h-screen pb-20 lg:pb-0" : "min-h-screen pb-20 lg:pb-0"}>
<main className={showSidebar ? "lg:ml-64 min-h-screen pb-4 lg:pb-0" : "min-h-screen pb-4 lg:pb-0"}>
{children}
</main>
</>

36
src/components/Sidebar.tsx
View File

@@ -26,7 +26,6 @@ import {
Target, User, History, Bell
} from 'lucide-react';
import { getUserName, getUserRole, logout } from '@/lib/auth';
import InvestorNotification from './InvestorNotification';
const ROLE_LABELS: Record<string, string> = {
super_admin: 'Super Admin',
@@ -72,7 +71,7 @@ const investorNavItems: NavItem[] = [
{ label: 'My Investments', href: '/investor/plans', icon: Target },
{ label: 'Rental History', href: '/investor/rental-history', icon: History },
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
{ label: 'Notifications', href: '#', icon: Bell, isNotification: true },
{ label: 'Notifications', href: '/investor/notifications', icon: Bell },
{ label: 'My Profile', href: '/investor/profile', icon: User },
];
@@ -86,7 +85,6 @@ export default function Sidebar() {
const pathname = usePathname();
const [mobileOpen, setMobileOpen] = useState(false);
const [expandedMenu, setExpandedMenu] = useState<string | null>(null);
const [notificationOpen, setNotificationOpen] = useState(false);
const [userName, setUserName] = useState('User');
const [userRole, setUserRole] = useState('admin');
@@ -158,22 +156,7 @@ export default function Sidebar() {
const isChild = item.href !== '/' && pathname.startsWith(item.href + '/');
const isActive = isExact || isChild;
const Icon = item.icon;
if (item.isNotification) {
return (
<button
key={item.label}
onClick={() => { setMobileOpen(false); setNotificationOpen(true); }}
className="w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-all duration-200"
>
<div className="flex items-center gap-3">
<Icon className="w-5 h-5" />
<span>{item.label}</span>
</div>
<span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">2</span>
</button>
);
}
const isNotification = item.label === 'Notifications';
return (
<Link
@@ -190,23 +173,14 @@ export default function Sidebar() {
>
<Icon className={`w-5 h-5 ${isActive ? 'text-white' : ''}`} />
<span>{item.label}</span>
{isNotification && (
<span className="ml-auto px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">2</span>
)}
</Link>
);
})}
</nav>
{isInvestor && notificationOpen && (
<div className="p-3 border-t border-slate-100">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-semibold text-slate-700">Notifications</span>
<button onClick={() => setNotificationOpen(false)} className="p-1 hover:bg-slate-100 rounded">
<X className="w-4 h-4 text-slate-400" />
</button>
</div>
<InvestorNotification />
</div>
)}
<div className="absolute bottom-0 left-0 right-0 p-3 border-t border-slate-100 bg-white">
<Link href="/admin/users/USR-001" className="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 rounded-lg -mx-1">
<div className="w-8 h-8 rounded-full bg-accent-light flex items-center justify-center">