feat: add notifications page and update navigation to redirect notifications to a dedicated route
This commit is contained in:
sazzadulalambd
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user