feat: add InvestorNotification component and integrate it across investor dashboard pages

src/app/investor/dashboard/page.tsx

@@ -2,20 +2,23 @@ import { investors, bikes, transactions } from '@/data/mockData';
 import { Wallet, TrendingUp, Bike, Target, DollarSign, FileText, Phone, BarChart3, Clock, ArrowRight, ShieldCheck, Zap, AlertCircle } from 'lucide-react';
 import Link from 'next/link';
 import TransactionList from '@/components/TransactionList';
+import InvestorNotification from '@/components/InvestorNotification';
 
 export default function InvestorDashboardPage() {
-  const investor = investors[0]; // mock logged-in investor
+  const investor = investors[0];
   const investorBikes = bikes.filter(b => b.investorId === investor?.id);
   const recentTransactions = transactions.filter(t => t.investorId === investor.id).slice(0, 5);
 
   const availableBalance = investor.totalEarnings - investor.totalWithdrawn - investor.withdrawalPending;
 
   return (
-    <div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
+    <div className="min-h-screen ">
+      <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="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>
-          <p className="text-sm text-slate-500">Here's what's happening with your investments today.</p>
+            <p className="text-sm text-slate-500">Here&apos;s what&apos;s happening with your investments today.</p>
           </div>
           <div className="flex items-center gap-2">
             {investor.kycStatus === 'verified' ? (
@@ -181,5 +184,6 @@ export default function InvestorDashboardPage() {
           </div>
         </div>
       </div>
+    </div>
   );
 }

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

@@ -11,6 +11,7 @@ import {
 } from 'lucide-react';
 import { investors, bikes, transactions } from '@/data/mockData';
 import toast from 'react-hot-toast';
+import InvestorNotification from '@/components/InvestorNotification';
 
 export default function InvestorInvestmentDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const resolvedParams = use(params);
@@ -49,7 +50,9 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
   const investmentTransactions = transactions.filter((t: any) => t.investorId === investor.id && t.type === 'investment_return');
 
   return (
-    <div className="p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
+    <div className="min-h-screen ">
+      <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="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">
@@ -343,5 +346,6 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
           </div>
         </div>
       </div>
+    </div>
   );
 }

src/app/investor/plans/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { Target, Plus, Zap, ChevronRight, ArrowRight, Edit, Trash2, Eye, TrendingUp, X, CreditCard } from 'lucide-react';
 import { investors } from '@/data/mockData';
 import toast from 'react-hot-toast';
+import InvestorNotification from '@/components/InvestorNotification';
 
 export default function MyInvestmentsPage() {
   const investor = investors[0];
@@ -47,7 +48,9 @@ export default function MyInvestmentsPage() {
   };
 
   return (
-    <div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
+    <div className="min-h-screen ">
+      <InvestorNotification isMobile />
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
         {/* Header */}
         <div className="mb-6">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
@@ -430,5 +433,6 @@ export default function MyInvestmentsPage() {
           </div>
         )}
       </div>
+    </div>
   );
 }

src/app/investor/profile/page.tsx

@@ -11,6 +11,7 @@ import {
 } from 'lucide-react';
 import { investors } from '@/data/mockData';
 import toast from 'react-hot-toast';
+import InvestorNotification from '@/components/InvestorNotification';
 
 function SectionCard({ title, icon: Icon, children, headerBg = 'bg-slate-50', headerBorder = 'border-slate-100', editKey, editingSection, setEditingSection, onEdit, editForm, setEditForm }: {
   title: string; icon: any; children: React.ReactNode; headerBg?: string; headerBorder?: string; editKey?: string; editingSection?: string | null; setEditingSection?: (s: string | null) => void; onEdit?: () => void; editForm?: any; setEditForm?: any
@@ -124,7 +125,9 @@ export default function InvestorProfilePage() {
   ];
 
   return (
-    <div className="p-4 sm:p-5 bg-slate-50 min-h-screen">
+    <div className="min-h-screen">
+      <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">
           {/* Profile Header */}
           <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-4 sm:mb-6">
@@ -1191,5 +1194,6 @@ export default function InvestorProfilePage() {
           </div>
         )}
       </div>
+    </div>
   );
 }

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

@@ -6,6 +6,7 @@ import {
   ChevronLeft, ChevronRight, CheckCircle, XCircle, AlertCircle, Calendar
 } from 'lucide-react';
 import { investors, bikes, rentalPayments } from '@/data/mockData';
+import InvestorNotification from '@/components/InvestorNotification';
 
 export default function RentalHistoryPage() {
   const investor = investors.find(i => i.id === 'inv1') || investors[0];
@@ -64,7 +65,9 @@ export default function RentalHistoryPage() {
   };
 
   return (
-    <div className="p-4 sm:p-6 max-w-8xl mx-auto">
+    <div className="min-h-screen">
+      <InvestorNotification isMobile />
+      <div className="pt-18 lg:pt-0 p-4 sm:p-6 max-w-8xl mx-auto">
         {/* Header */}
         <div className="mb-6">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
@@ -371,5 +374,6 @@ export default function RentalHistoryPage() {
           )}
         </div>
       </div>
+    </div>
   );
 }

src/app/investor/withdraw/page.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { CreditCard, Wallet, History, CheckCircle, Clock, Building2, Smartphone, AlertCircle, Settings, X, Bike, ChevronDown, Search, Filter, ChevronLeft, ChevronRight } from 'lucide-react';
 import { investors, transactions, bikes } from '@/data/mockData';
 import toast from 'react-hot-toast';
+import InvestorNotification from '@/components/InvestorNotification';
 
 export default function InvestorWithdrawPage() {
   const investor = investors.find(i => i.id === 'inv1') || investors[0];
@@ -107,7 +108,9 @@ export default function InvestorWithdrawPage() {
   };
 
   return (
-    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
+    <div className="min-h-screen">
+      <InvestorNotification isMobile />
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto">
         {/* Header */}
         <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
@@ -582,5 +585,6 @@ export default function InvestorWithdrawPage() {
           )
         }
       </div>
+    </div >
   );
 }

src/components/InvestorNotification.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useState } from 'react';
+import { Bell, X, ArrowRight, 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,
+  },
+];
+
+const iconMap: Record<string, any> = {
+  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;
+
+  if (isMobile) {
+    return (
+      <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40">
+        <div className="flex items-center gap-2">
+          <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"
+        >
+          <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>
+          </>
+        )}
+      </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>
+        <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/Sidebar.tsx

@@ -23,9 +23,10 @@ import {
   LogOut,
   Calculator,
   Wrench,
-  Target, User, History
+  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',
@@ -69,6 +70,7 @@ const investorNavItems = [
   { 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: 'My Profile', href: '/investor/profile', icon: User },
 ];
 
@@ -173,6 +175,12 @@ export default function Sidebar() {
           })}
         </nav>
 
+        {isInvestor && (
+          <div className="hidden lg:block p-3 border-t border-slate-100">
+            <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">