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

src/app/investor/dashboard/page.tsx

@@ -14,7 +14,7 @@ export default function InvestorDashboardPage() {
   return (
     <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6">
           <div>
             <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Welcome back, {investor.name.split(' ')[0]} 👋</h1>

src/app/investor/investments/[id]/page.tsx

@@ -52,7 +52,7 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
   return (
     <div className="min-h-screen lg:pt-6 pt-0 ">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6">
           <div className="flex items-center gap-4">
             <button onClick={() => router.back()} className="p-2 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200">

src/app/investor/notifications/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState } from 'react';
+import { Bell, X, ArrowRight, Package, DollarSign, Bike, AlertCircle, CheckCircle, Filter, Check } from 'lucide-react';
+import Link from 'next/link';
+
+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: '5',
+    type: 'rental',
+    title: 'Rental Ended',
+    message: 'Bike AB-1234 has been returned by rider MR-456',
+    time: '3 hours ago',
+    read: false,
+  },
+  {
+    id: '6',
+    type: 'earning',
+    title: 'Daily Earning Summary',
+    message: 'You earned ৳1,250 from 5 rentals today',
+    time: 'Yesterday',
+    read: true,
+  },
+  {
+    id: '7',
+    type: 'alert',
+    title: 'Low Battery Warning',
+    message: 'Bike EF-3456 battery is below 20%',
+    time: '5 hours ago',
+    read: true,
+  },
+  {
+    id: '8',
+    type: 'success',
+    title: 'Investment Renewed',
+    message: 'Your Gold Plan investment has been automatically renewed',
+    time: '3 days ago',
+    read: true,
+  },
+];
+
+const iconMap: Record<string, any> = {
+  rental: Bike,
+  earning: DollarSign,
+  success: CheckCircle,
+  alert: AlertCircle,
+  default: Package,
+};
+
+const typeColors: Record<string, string> = {
+  rental: 'bg-blue-100 text-blue-600',
+  earning: 'bg-green-100 text-green-600',
+  success: 'bg-emerald-100 text-emerald-600',
+  alert: 'bg-amber-100 text-amber-600',
+  default: 'bg-slate-100 text-slate-600',
+};
+
+export default function InvestorNotificationsPage() {
+  const [notifications, setNotifications] = useState(mockNotifications);
+  const [filter, setFilter] = useState<'all' | 'unread'>('all');
+
+  const filteredNotifications = filter === 'unread'
+    ? notifications.filter(n => !n.read)
+    : notifications;
+
+  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="min-h-screen lg:pt-6 pt-0">
+      <InvestorNotification isMobile />
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
+                <Bell className="w-5 h-5 lg:w-6 lg:h-6 text-investor" /> Notifications
+              </h1>
+              <p className="text-sm text-slate-500 mt-1">Stay updated with your investment activities</p>
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={markAllAsRead}
+                className="px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2 shadow-sm"
+              >
+                <Check className="w-4 h-4" /> Mark all as read
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+          <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setFilter('all')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${filter === 'all'
+                  ? 'bg-investor text-white'
+                  : 'text-slate-600 hover:bg-slate-100'
+                  }`}
+              >
+                All
+              </button>
+              <button
+                onClick={() => setFilter('unread')}
+                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${filter === 'unread'
+                  ? 'bg-investor text-white'
+                  : 'text-slate-600 hover:bg-slate-100'
+                  }`}
+              >
+                Unread
+                {unreadCount > 0 && (
+                  <span className="px-1.5 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full">
+                    {unreadCount}
+                  </span>
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div className="divide-y divide-slate-100">
+            {filteredNotifications.length === 0 ? (
+              <div className="p-8 text-center">
+                <Bell className="w-12 h-12 text-slate-300 mx-auto mb-3" />
+                <p className="text-slate-500">No notifications found</p>
+              </div>
+            ) : (
+              filteredNotifications.map((notif) => {
+                const Icon = iconMap[notif.type] || iconMap.default;
+                return (
+                  <div
+                    key={notif.id}
+                    onClick={() => markAsRead(notif.id)}
+                    className={`p-4 cursor-pointer transition-all hover:bg-slate-50 ${!notif.read ? 'bg-blue-50/50' : ''
+                      }`}
+                  >
+                    <div className="flex items-start gap-4">
+                      <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${typeColors[notif.type]}`}>
+                        <Icon className="w-5 h-5" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <p className={`text-sm font-semibold ${notif.read ? 'text-slate-600' : 'text-slate-800'}`}>
+                            {notif.title}
+                          </p>
+                          {!notif.read && (
+                            <div className="w-2 h-2 bg-investor rounded-full" />
+                          )}
+                        </div>
+                        <p className="text-sm text-slate-500 line-clamp-2">{notif.message}</p>
+                        <p className="text-xs text-slate-400 mt-1">{notif.time}</p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+import InvestorNotification from '@/components/InvestorNotification';

src/app/investor/plans/page.tsx

@@ -50,7 +50,7 @@ export default function MyInvestmentsPage() {
   return (
     <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         {/* Header */}
         <div className="mb-6">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

src/app/investor/profile/page.tsx

@@ -128,7 +128,7 @@ export default function InvestorProfilePage() {
     <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 sm:p-5 bg-slate-50 min-h-screen">
-        <div className="max-w-8xl mx-auto">
+        <div className="max-w-8xl mx-auto mb-12 lg:mb-0">
           {/* Profile Header */}
           <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-4 sm:mb-6">
             <div className="p-4 sm:p-5 flex flex-col sm:flex-row items-start gap-4 sm:gap-5">

src/app/investor/rental-history/page.tsx

@@ -67,7 +67,7 @@ export default function RentalHistoryPage() {
   return (
     <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 sm:p-6 max-w-8xl mx-auto">
+      <div className="pt-18 lg:pt-0 p-4 sm:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         {/* Header */}
         <div className="mb-6">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

src/app/investor/withdraw/page.tsx

@@ -108,9 +108,9 @@ export default function InvestorWithdrawPage() {
   };
 
   return (
-    <div className="min-h-screen lg:pt-6 pt-0">
+    <div className="min-h-screen lg:pt-6 pt-0 ">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto">
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         {/* Header */}
         <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>

src/components/InvestorNotification.tsx

@@ -1,55 +1,21 @@
 'use client';
 
-import { useState } from 'react';
+import Link from 'next/link';
-import { Bell, X, ArrowRight, Package, DollarSign, Bike, AlertCircle, CheckCircle } from 'lucide-react';
+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: '1',
+  { 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 },
-    type: 'rental',
+  { id: '3', type: 'success', title: 'Withdrawal Complete', message: 'Your withdrawal of ৳5,000 has been processed successfully', time: '1 day ago', read: true },
-    title: 'New Rental Started',
+  { id: '4', type: 'alert', title: 'Maintenance Alert', message: 'Bike XY-9012 requires maintenance attention', time: '2 days ago', read: true },
-    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,
+  rental: Bike, earning: DollarSign, success: CheckCircle, alert: AlertCircle, default: Package,
-  earning: DollarSign,
-  success: CheckCircle,
-  alert: AlertCircle,
-  default: Package,
 };
 
 export default function InvestorNotification({ isMobile = false }: { isMobile?: boolean }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const unreadCount = mockNotifications.filter(n => !n.read).length;
-  const [notifications] = useState(mockNotifications);
-  const unreadCount = notifications.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
+        <Link href="/investor/notifications" className="relative p-2 hover:bg-slate-100 rounded-lg transition-colors">
-          onClick={() => setIsOpen(true)}
-          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>
+        </Link>
-
-        {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>
-          </>
-        )}
       </div>
     );
   }
 
   return (
-    <div className="hidden lg:block w-80 shrink-0">
+    <div className="hidden lg:block">
-      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm sticky top-6">
+      <Link href="/investor/notifications" className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
-        <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+        <div className="flex items-center gap-3">
-          <h2 className="font-bold text-slate-800 flex items-center gap-2">
+          <Bell className="w-5 h-5 text-slate-600" />
-            <Bell className="w-5 h-5 text-slate-400" />
+          <span className="text-sm font-medium text-slate-700">Notifications</span>
-            Notifications
+        </div>
-          </h2>
         {unreadCount > 0 && (
-            <span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">
+          <span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">{unreadCount}</span>
-              {unreadCount} new
-            </span>
         )}
-        </div>
+      </Link>
-        <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>
     </div>
   );
 }

src/components/LayoutContent.tsx

@@ -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>
     </>

src/components/Sidebar.tsx

@@ -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;
-            
+            const isNotification = item.label === 'Notifications';
-            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>
-              );
-            }
             
             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">