feat: update investor profile with rental history tab, withdrawal request modal, and refined financial dashboard metrics

src/app/admin/investors/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
-import { investors as initialInvestors, bikes as initialBikes, transactions as initialTransactions } from '@/data/mockData';
+import { investors as initialInvestors, bikes as initialBikes, transactions as initialTransactions, rentalPayments as initialRentalPayments } from '@/data/mockData';
 import type { Investor } from '@/data/mockData';
 import toast from 'react-hot-toast';
 import {
@@ -11,7 +11,7 @@ import {
   User, FileText, CreditCard, DollarSign, Clock, ChevronDown, ExternalLink, Download, Upload,
   AlertTriangle, Shield, Star, CheckCircle, XCircle, Search, Filter, BookOpen, ArrowRight, Printer,
   UserCircle, Home, Briefcase, CreditCardIcon, Heart, PhoneCall, PhoneOutgoing, MessageSquare, Save,
-  ShieldCheck, Building2, Users, Check, AlertOctagon, Activity, Award, Camera
+  ShieldCheck, Building2, Users, Check, AlertOctagon, Activity, Award, Camera, History, Settings
 } from 'lucide-react';
 
 const statusColors: Record<string, string> = {
@@ -107,6 +107,27 @@ export default function InvestorDetailPage() {
   const [newDoc, setNewDoc] = useState({ type: 'nid', number: '', url: '' });
   const [editingMobileIndex, setEditingMobileIndex] = useState<number | null>(null);
   const investorTransactions = initialTransactions.filter(t => t.investorId === investorId);
+  const investorRentalPayments = initialRentalPayments.filter(p => p.investorId === investorId).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  const [rentalPage, setRentalPage] = useState(1);
+  const [rentalPageSize] = useState(10);
+  const [rentalSortBy, setRentalSortBy] = useState('date');
+  const [rentalSortOrder, setRentalSortOrder] = useState<'asc' | 'desc'>('desc');
+  const [showWithdrawalModal, setShowWithdrawalModal] = useState(false);
+  const [showAutoWithdrawModal, setShowAutoWithdrawModal] = useState(false);
+  const [withdrawSelection, setWithdrawSelection] = useState({
+    selectAll: true,
+    selectedPlans: [] as string[],
+    selectedBikes: [] as string[],
+    amount: 0,
+    paymentMethod: '',
+    accountId: ''
+  });
+  const [autoWithdrawSettings, setAutoWithdrawSettings] = useState({
+    enabled: false,
+    frequency: 'as_per_request' as 'as_per_request' | 'weekly' | 'monthly',
+    minAmount: 1000,
+    accountId: ''
+  });
   const [newInvestment, setNewInvestment] = useState({
     planName: '',
     planType: 'gold' as 'silver' | 'gold' | 'platinum' | 'diamond',
@@ -177,7 +198,7 @@ export default function InvestorDetailPage() {
       paymentMethod: newInvestment.paymentMethod
     };
 
-setInvestorJournals([journalEntry, ...investorJournals]);
+    setInvestorJournals([journalEntry, ...investorJournals]);
 
     setLastCreatedInvestment({
       id: invId,
@@ -279,22 +300,23 @@ setInvestorJournals([journalEntry, ...investorJournals]);
                   <p className="text-xs text-green-600 font-medium">Total Earnings</p>
                   <p className="text-sm font-bold text-green-700">৳{investor.totalEarnings.toLocaleString()}</p>
                 </div>
+                <div className="p-3 bg-slate-50 rounded-lg border border-slate-100">
+                  <p className="text-xs text-slate-600 font-medium">Total Withdrawn</p>
+                  <p className="text-sm font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
+                </div>
                 <div className="p-3 bg-blue-50 rounded-lg border border-blue-100">
-                  <p className="text-xs text-blue-600 font-medium">ROI</p>
+                  <p className="text-xs text-blue-600 font-medium">Current Balance</p>
-                  <p className="text-sm font-bold text-blue-700">{investor.roi}%</p>
+                  <p className="text-sm font-bold text-blue-700">৳{(investor.totalEarnings - investor.totalWithdrawn - investor.pendingEarnings).toLocaleString()}</p>
                 </div>
                 <div className="p-3 bg-amber-50 rounded-lg border border-amber-100">
                   <p className="text-xs text-amber-600 font-medium">Active Bikes</p>
                   <p className="text-sm font-bold text-amber-700">{investor.activeBikes}</p>
                 </div>
                 <div className="p-3 bg-red-50 rounded-lg border border-red-100">
-                  <p className="text-xs text-red-600 font-medium">Pending Earning</p>
+                  <p className="text-xs text-red-600 font-medium">Pending Request</p>
                   <p className="text-sm font-bold text-red-700">৳{investor.pendingEarnings.toLocaleString()}</p>
                 </div>
-                <div className="p-3 bg-slate-50 rounded-lg border border-slate-100">
+
-                  <p className="text-xs text-slate-600 font-medium">Withdrawn</p>
-                  <p className="text-sm font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
-                </div>
               </div>
             </div>
           </div>
@@ -325,7 +347,13 @@ setInvestorJournals([journalEntry, ...investorJournals]);
             onClick={() => setActiveTab('financial')}
             className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'financial' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
           >
-            <Banknote className="w-4 h-4 inline mr-1" /> Financial
+            <Banknote className="w-4 h-4 inline mr-1" /> Account Info
+          </button>
+          <button
+            onClick={() => setActiveTab('rentals')}
+            className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'rentals' ? 'border-b-2 border-investor text-investor' : 'text-slate-500'}`}
+          >
+            <History className="w-4 h-4 inline mr-1" /> Rental History
           </button>
           <button
             onClick={() => setActiveTab('transactions')}
@@ -339,6 +367,7 @@ setInvestorJournals([journalEntry, ...investorJournals]);
           >
             <FileText className="w-4 h-4 inline mr-1" /> Documents
           </button>
+
         </div>
 
         <div className="p-5">
@@ -963,11 +992,10 @@ setInvestorJournals([journalEntry, ...investorJournals]);
                         </div>
 
                         <div className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${planBadges[planType]} capitalize mb-3`}>
-                          <span className={`w-2 h-2 rounded-full ${
+                          <span className={`w-2 h-2 rounded-full ${planType === 'silver' ? 'bg-slate-500' :
-                            planType === 'silver' ? 'bg-slate-500' :
                             planType === 'gold' ? 'bg-amber-500' :
-                            planType === 'platinum' ? 'bg-purple-500' : 'bg-blue-500'
+                              planType === 'platinum' ? 'bg-purple-500' : 'bg-blue-500'
-                          }`} />
+                            }`} />
                           {planType} Plan • {investment?.planName || 'Investment'}
                         </div>
 
@@ -993,10 +1021,9 @@ setInvestorJournals([journalEntry, ...investorJournals]);
                           </div>
                           <div className="flex items-center justify-between">
                             <span className="text-xs text-slate-500">Battery</span>
-                            <span className={`text-xs font-medium ${
+                            <span className={`text-xs font-medium ${bike.batteryLevel > 50 ? 'text-green-600' :
-                              bike.batteryLevel > 50 ? 'text-green-600' :
                               bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'
-                            }`}>{bike.batteryLevel}%</span>
+                              }`}>{bike.batteryLevel}%</span>
                           </div>
                         </div>
                       </div>
@@ -1084,7 +1111,9 @@ setInvestorJournals([journalEntry, ...investorJournals]);
                             <Link href={`/admin/investors/${investor.id}/investments/${inv.id}`} className="flex-1 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg border border-slate-200 text-center">
                               View
                             </Link>
-                            <button className="flex-1 py-2 text-sm font-medium text-investor hover:bg-investor/10 rounded-lg border border-investor/30">Statement</button>
+                            <Link href={`/admin/investors/${investor.id}/investments/${inv.id}/statement`} className="flex-1 py-2 text-sm font-medium text-investor hover:bg-investor/10 rounded-lg border border-investor/30 text-center flex items-center justify-center gap-1">
+                                <Printer className="w-4 h-4" /> Statement
+                              </Link>
                           </div>
                         </div>
                       </div>
@@ -1312,7 +1341,7 @@ setInvestorJournals([journalEntry, ...investorJournals]);
               <div className="flex items-center justify-between mb-4">
                 <h3 className="font-semibold text-slate-800">All Transactions</h3>
                 <div className="flex gap-2">
-                  <button onClick={() => alert('Withdrawal request modal would open here')} className="py-2 px-3 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 flex items-center gap-1">
+                  <button onClick={() => setShowWithdrawalModal(true)} className="py-2 px-3 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 flex items-center gap-1">
                     <Banknote className="w-4 h-4" /> Request Withdrawal
                   </button>
                   <button className="py-2 px-3 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-1">
@@ -1354,117 +1383,115 @@ setInvestorJournals([journalEntry, ...investorJournals]);
               <div>
                 <h4 className="font-semibold text-slate-700 mb-3">Transaction History</h4>
                 <div className="space-y-2">
-                  {investorTransactions.map(tx => (
+                  {investorTransactions.map(tx => {
-                    <div key={tx.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
+                    const getAccountingInfo = (type: string, amount: number) => {
-                      <div className="flex items-center gap-3">
+                      if (type === 'investment') {
-                        <div className={`w-10 h-10 rounded-full flex items-center justify-center ${tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' ? 'bg-green-100' :
+                        return {
-                          tx.type === 'withdrawal' ? 'bg-red-100' :
+                          debitAccount: 'Bank - City Bank (1200)',
-                            tx.type === 'investment' ? 'bg-purple-100' :
+                          creditAccount: 'Investor Liabilities (2200)',
-                              tx.type === 'referral_bonus' ? 'bg-yellow-100' :
+                          amount: amount
-                                tx.type === 'adjustment' || tx.type === 'penalty' ? 'bg-orange-100' : 'bg-blue-100'
+                        };
-                          }`}>
+                      } else if (type === 'earning' || type === 'bike_earning' || type === 'investment_return') {
-                          <DollarSign className={`w-5 h-5 ${tx.type === 'earning' || tx.type === 'bike_earning' ? 'text-green-600' :
+                        return {
-                            tx.type === 'withdrawal' ? 'text-red-600' :
+                          debitAccount: 'Investor Liabilities (2200)',
-                              tx.type === 'investment' ? 'text-purple-600' :
+                          creditAccount: 'Rental Income (4200)',
-                                tx.type === 'referral_bonus' ? 'text-yellow-600' :
+                          amount: amount
-                                  tx.type === 'adjustment' || tx.type === 'penalty' ? 'text-orange-600' : 'text-blue-600'
+                        };
-                            }`} />
+                      } else if (type === 'withdrawal') {
+                        return {
+                          debitAccount: 'Investor Liabilities (2200)',
+                          creditAccount: 'Bank - City Bank (1200)',
+                          amount: amount
+                        };
+                      }
+                      return {
+                        debitAccount: 'N/A',
+                        creditAccount: 'N/A',
+                        amount: amount
+                      };
+                    };
+                    return (
+                      <div key={tx.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
+                        <div className="flex items-center gap-3">
+                          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' ? 'bg-green-100' :
+                            tx.type === 'withdrawal' ? 'bg-red-100' :
+                              tx.type === 'investment' ? 'bg-purple-100' :
+                                tx.type === 'referral_bonus' ? 'bg-yellow-100' :
+                                  tx.type === 'adjustment' || tx.type === 'penalty' ? 'bg-orange-100' : 'bg-blue-100'
+                            }`}>
+                            <DollarSign className={`w-5 h-5 ${tx.type === 'earning' || tx.type === 'bike_earning' ? 'text-green-600' :
+                              tx.type === 'withdrawal' ? 'text-red-600' :
+                                tx.type === 'investment' ? 'text-purple-600' :
+                                  tx.type === 'referral_bonus' ? 'text-yellow-600' :
+                                    tx.type === 'adjustment' || tx.type === 'penalty' ? 'text-orange-600' : 'text-blue-600'
+                              }`} />
+                          </div>
+                          <div>
+                            <p className="text-sm font-medium text-slate-700">{tx.description}</p>
+                            <div className="flex items-center gap-2">
+                              <p className="text-xs text-slate-400">{tx.createdAt}</p>
+                              {tx.referenceNumber && (
+                                <button
+                                  onClick={() => {
+                                    const accounting = getAccountingInfo(tx.type, tx.amount);
+                                    setSelectedInvoice({
+                                      reference: tx.referenceNumber,
+                                      date: tx.createdAt,
+                                      type: tx.type,
+                                      amount: tx.amount,
+                                      description: tx.description,
+                                      status: tx.status,
+                                      investorName: investor.name,
+                                      investorId: investor.id,
+                                      debitAccount: accounting.debitAccount,
+                                      creditAccount: accounting.creditAccount
+                                    });
+                                    setShowInvoiceModal(true);
+                                  }}
+                                  className="text-xs text-investor hover:underline flex items-center gap-1"
+                                >
+                                  • Ref: {tx.referenceNumber}
+                                  <BookOpen className="w-3 h-3" />
+                                </button>
+                              )}
+                            </div>
+                          </div>
                         </div>
-                        <div>
+                        <div className="flex items-center gap-3">
-                          <p className="text-sm font-medium text-slate-700">{tx.description}</p>
+                          <div className="text-right">
-                          <div className="flex items-center gap-2">
+                            <p className={`text-lg font-bold ${tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' || tx.type === 'referral_bonus' ? 'text-green-600' : 'text-red-600'}`}>
-                            <p className="text-xs text-slate-400">{tx.createdAt}</p>
+                              {tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' || tx.type === 'referral_bonus' ? '+' : '-'}৳{tx.amount.toLocaleString()}
-                            {tx.referenceNumber && (
+                            </p>
-                              <button
+                            <span className={`text-xs font-medium px-2 py-1 rounded-full ${tx.status === 'completed' ? 'bg-green-100 text-green-700' :
-                                onClick={() => {
+                              tx.status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600'
-                                  const getAccountingInfo = (type: string, amount: number) => {
+                              }`}>
-                                    if (type === 'investment') {
+                              {tx.status}
-                                      return {
+                            </span>
-                                        debitAccount: 'Bank - City Bank (1200)',
-                                        creditAccount: 'Investor Liabilities (2200)',
-                                        amount: amount
-                                      };
-                                    } else if (type === 'earning' || type === 'bike_earning' || type === 'investment_return') {
-                                      return {
-                                        debitAccount: 'Investor Liabilities (2200)',
-                                        creditAccount: 'Rental Income (4200)',
-                                        amount: amount
-                                      };
-                                    } else if (type === 'withdrawal') {
-                                      return {
-                                        debitAccount: 'Investor Liabilities (2200)',
-                                        creditAccount: 'Bank - City Bank (1200)',
-                                        amount: amount
-                                      };
-                                    }
-                                    return {
-                                      debitAccount: 'N/A',
-                                      creditAccount: 'N/A',
-                                      amount: amount
-                                    };
-                                  };
-                                  const accounting = getAccountingInfo(tx.type, tx.amount);
-                                  setSelectedInvoice({
-                                    reference: tx.referenceNumber,
-                                    date: tx.createdAt,
-                                    type: tx.type,
-                                    amount: tx.amount,
-                                    description: tx.description,
-                                    status: tx.status,
-                                    investorName: investor.name,
-                                    investorId: investor.id,
-                                    debitAccount: accounting.debitAccount,
-                                    creditAccount: accounting.creditAccount
-                                  });
-                                  setShowInvoiceModal(true);
-                                }}
-                                className="text-xs text-investor hover:underline flex items-center gap-1"
-                              >
-                                • Ref: {tx.referenceNumber}
-                                <BookOpen className="w-3 h-3" />
-                              </button>
-                            )}
                           </div>
                         </div>
                       </div>
-                      <div className="text-right">
+                    );
-                        <p className={`text-sm font-medium ${tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' || tx.type === 'referral_bonus' ? 'text-green-600' :
+                  })}
-                          tx.type === 'withdrawal' || tx.type === 'penalty' || tx.type === 'adjustment' ? 'text-red-600' : 'text-blue-600'
-                          }`}>
-                          {tx.type === 'earning' || tx.type === 'bike_earning' || tx.type === 'investment_return' || tx.type === 'referral_bonus' ? '+' : tx.type === 'withdrawal' || tx.type === 'penalty' || tx.type === 'adjustment' ? '-' : '+'}৳{tx.amount.toLocaleString()}
-                        </p>
-                        <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${tx.status === 'completed' ? 'bg-green-100 text-green-700' :
-                          tx.status === 'pending' ? 'bg-amber-100 text-amber-700' :
-                            tx.status === 'cancelled' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-700'
-                          }`}>
-                          {tx.status}
-                        </span>
-                      </div>
-                    </div>
-                  ))}
-                  {investorTransactions.length === 0 && (
-                    <div className="text-center py-8 text-slate-400">
-                      <DollarSign className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                      <p>No transactions yet</p>
-                    </div>
-                  )}
                 </div>
               </div>
             </div>
           )}
 
           {activeTab === 'documents' && (
-            <div>
+            <div className="space-y-6">
-              <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center justify-between">
-                <h3 className="font-semibold text-slate-800">KYC Documents</h3>
+                <div>
-                <button onClick={() => setShowDocModal(true)} className="py-2 px-3 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-1">
+                  <h3 className="font-semibold text-slate-800">KYC Documents</h3>
+                  <p className="text-sm text-slate-500">Manage investor verification documents</p>
+                </div>
+                <button onClick={() => setShowDocModal(true)} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-2">
                   <Plus className="w-4 h-4" /> Upload Document
                 </button>
               </div>
 
-              <div className="space-y-2 mb-6">
+              <div className="space-y-2">
                 {investor.kycDocuments?.map((doc, idx) => (
-                  <div key={idx} className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
+                  <div key={idx} className="flex items-center justify-between p-4 bg-white border border-slate-200 rounded-xl">
                     <div className="flex items-center gap-3">
                       <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${doc.type === 'nid' ? 'bg-blue-100' :
                         doc.type === 'passport' ? 'bg-purple-100' :
@@ -1492,7 +1519,7 @@ setInvestorJournals([journalEntry, ...investorJournals]);
                           <Clock className="w-3 h-3" /> Pending Review
                         </span>
                       )}
-                      <button onClick={() => alert('Edit document')} className="p-2 hover:bg-slate-200 rounded-lg">
+                      <button onClick={() => alert('Edit document')} className="p-2 hover:bg-slate-100 rounded-lg">
                         <Edit className="w-4 h-4 text-slate-400" />
                       </button>
                       <button onClick={() => { if (confirm('Delete this document?')) alert('Document deleted'); }} className="p-2 hover:bg-red-50 rounded-lg">
@@ -1501,6 +1528,7 @@ setInvestorJournals([journalEntry, ...investorJournals]);
                     </div>
                   </div>
                 ))}
+
                 {(!investor.kycDocuments || investor.kycDocuments.length === 0) && (
                   <div className="text-center py-12 text-slate-400 border-2 border-dashed border-slate-200 rounded-lg">
                     <FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
@@ -1521,9 +1549,618 @@ setInvestorJournals([journalEntry, ...investorJournals]);
               </div>
             </div>
           )}
+
+          {activeTab === 'rentals' && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="font-semibold text-slate-800">Daily Rental History</h3>
+                  <p className="text-sm text-slate-500">Track daily rental payments for investor's bikes</p>
+                </div>
+                <button className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-2">
+                  <Download className="w-4 h-4" /> Export
+                </button>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div className="bg-white rounded-xl border border-slate-200 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                      <DollarSign className="w-5 h-5 text-green-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-slate-500">Total Collected</p>
+                      <p className="text-xl font-bold text-green-600">৳{investorRentalPayments.filter(p => p.status === 'paid').reduce((sum, p) => sum + p.amount, 0).toLocaleString()}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-white rounded-xl border border-slate-200 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                      <Bike className="w-5 h-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-slate-500">Active Rentals</p>
+                      <p className="text-xl font-bold text-slate-800">{new Set(investorRentalPayments.filter(p => p.status === 'paid').map(p => p.bikeId)).size}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-white rounded-xl border border-slate-200 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
+                      <Clock className="w-5 h-5 text-amber-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-slate-500">Pending</p>
+                      <p className="text-xl font-bold text-amber-600">৳{investorRentalPayments.filter(p => p.status === 'pending').reduce((sum, p) => sum + p.amount, 0).toLocaleString()}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-white rounded-xl border border-slate-200 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
+                      <AlertTriangle className="w-5 h-5 text-red-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-slate-500">Failed</p>
+                      <p className="text-xl font-bold text-red-600">৳{investorRentalPayments.filter(p => p.status === 'failed').reduce((sum, p) => sum + p.amount, 0).toLocaleString()}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <h4 className="font-semibold text-slate-800">Daily Payment Records</h4>
+                    <span className="px-2 py-1 bg-slate-100 text-slate-600 text-xs rounded-full">{investorRentalPayments.length} records</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <select className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm">
+                      <option value="all">All Bikes</option>
+                      {assignedBikes.map((bike: any) => (
+                        <option key={bike.id} value={bike.id}>{bike.model}</option>
+                      ))}
+                    </select>
+                    <select className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm">
+                      <option value="all">All Plans</option>
+                      <option value="single">Single Rent</option>
+                      <option value="rent-to-own">Rent to Own</option>
+                      <option value="share_ev">Share EV</option>
+                    </select>
+                    <select className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm">
+                      <option value="all">All Status</option>
+                      <option value="paid">Paid</option>
+                      <option value="pending">Pending</option>
+                      <option value="failed">Failed</option>
+                    </select>
+                  </div>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="bg-slate-50">
+                      <tr>
+                        <th
+                          onClick={() => {
+                            if (rentalSortBy === 'date') {
+                              setRentalSortOrder(rentalSortOrder === 'asc' ? 'desc' : 'asc');
+                            } else {
+                              setRentalSortBy('date');
+                              setRentalSortOrder('desc');
+                            }
+                          }}
+                          className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase cursor-pointer hover:bg-slate-100"
+                        >
+                          <div className="flex items-center gap-1">
+                            Date
+                            {rentalSortBy === 'date' && (
+                              <span className="text-investor">{rentalSortOrder === 'asc' ? '↑' : '↓'}</span>
+                            )}
+                          </div>
+                        </th>
+                        <th
+                          onClick={() => {
+                            if (rentalSortBy === 'bike') {
+                              setRentalSortOrder(rentalSortOrder === 'asc' ? 'desc' : 'asc');
+                            } else {
+                              setRentalSortBy('bike');
+                              setRentalSortOrder('asc');
+                            }
+                          }}
+                          className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase cursor-pointer hover:bg-slate-100"
+                        >
+                          <div className="flex items-center gap-1">
+                            Bike
+                            {rentalSortBy === 'bike' && (
+                              <span className="text-investor">{rentalSortOrder === 'asc' ? '↑' : '↓'}</span>
+                            )}
+                          </div>
+                        </th>
+                        <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Biker</th>
+                        <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Plan</th>
+                        <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Duration</th>
+                        <th
+                          onClick={() => {
+                            if (rentalSortBy === 'amount') {
+                              setRentalSortOrder(rentalSortOrder === 'asc' ? 'desc' : 'asc');
+                            } else {
+                              setRentalSortBy('amount');
+                              setRentalSortOrder('desc');
+                            }
+                          }}
+                          className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase cursor-pointer hover:bg-slate-100"
+                        >
+                          <div className="flex items-center gap-1">
+                            Amount
+                            {rentalSortBy === 'amount' && (
+                              <span className="text-investor">{rentalSortOrder === 'asc' ? '↑' : '↓'}</span>
+                            )}
+                          </div>
+                        </th>
+                        <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Method</th>
+                        <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-100">
+                      {(() => {
+                        const sortedPayments = [...investorRentalPayments].sort((a, b) => {
+                          if (rentalSortBy === 'date') {
+                            return rentalSortOrder === 'asc'
+                              ? new Date(a.date).getTime() - new Date(b.date).getTime()
+                              : new Date(b.date).getTime() - new Date(a.date).getTime();
+                          } else if (rentalSortBy === 'bike') {
+                            return rentalSortOrder === 'asc'
+                              ? a.bikeModel.localeCompare(b.bikeModel)
+                              : b.bikeModel.localeCompare(a.bikeModel);
+                          } else if (rentalSortBy === 'amount') {
+                            return rentalSortOrder === 'asc'
+                              ? a.amount - b.amount
+                              : b.amount - a.amount;
+                          }
+                          return 0;
+                        });
+                        const totalPages = Math.ceil(sortedPayments.length / rentalPageSize);
+                        const paginatedPayments = sortedPayments.slice(
+                          (rentalPage - 1) * rentalPageSize,
+                          rentalPage * rentalPageSize
+                        );
+                        return paginatedPayments.map((payment: any) => {
+                          const planColors: Record<string, { label: string; bg: string; color: string }> = {
+                            single: { label: 'Single Rent', bg: 'bg-green-100', color: 'text-green-700' },
+                            'rent-to-own': { label: 'Rent to Own', bg: 'bg-blue-100', color: 'text-blue-700' },
+                            share_ev: { label: 'Share EV', bg: 'bg-purple-100', color: 'text-purple-700' },
+                          };
+                          const statusConfig: Record<string, { label: string; bg: string; color: string }> = {
+                            paid: { label: 'Paid', bg: 'bg-green-100', color: 'text-green-700' },
+                            pending: { label: 'Pending', bg: 'bg-amber-100', color: 'text-amber-700' },
+                            failed: { label: 'Failed', bg: 'bg-red-100', color: 'text-red-700' },
+                          };
+                          const plan = planColors[payment.planType] || planColors.single;
+                          const status = statusConfig[payment.status] || statusConfig.pending;
+                          return (
+                            <tr key={payment.id} className="hover:bg-slate-50">
+                              <td className="px-4 py-3">
+                                <div>
+                                  <p className="text-sm font-medium text-slate-800">{payment.date}</p>
+                                  <p className="text-xs text-slate-400">{payment.transactionId || payment.id}</p>
+                                </div>
+                              </td>
+                              <td className="px-4 py-3">
+                                <div className="flex items-center gap-2">
+                                  <Bike className="w-4 h-4 text-slate-400" />
+                                  <div>
+                                    <p className="text-sm font-medium text-slate-800">{payment.bikeModel}</p>
+                                    <p className="text-xs text-slate-400">{payment.plateNumber}</p>
+                                  </div>
+                                </div>
+                              </td>
+                              <td className="px-4 py-3">
+                                <div className="flex items-center gap-2">
+                                  <User className="w-4 h-4 text-slate-400" />
+                                  <span className="text-sm text-slate-700">{payment.bikerName}</span>
+                                </div>
+                              </td>
+                              <td className="px-4 py-3">
+                                <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.bg} ${plan.color}`}>
+                                  {plan.label}
+                                </span>
+                              </td>
+                              <td className="px-4 py-3">
+                                <span className="text-sm text-slate-600">{payment.duration}</span>
+                              </td>
+                              <td className="px-4 py-3">
+                                <p className="text-sm font-bold text-slate-800">৳{payment.amount.toLocaleString()}</p>
+                              </td>
+                              <td className="px-4 py-3">
+                                <span className="text-sm text-slate-600 capitalize">{payment.paymentMethod}</span>
+                              </td>
+                              <td className="px-4 py-3">
+                                <span className={`px-2 py-1 rounded-full text-xs font-medium ${status.bg} ${status.color}`}>
+                                  {status.label}
+                                </span>
+                              </td>
+                            </tr>
+                          );
+                        });
+                      })()}
+                    </tbody>
+                  </table>
+                  {investorRentalPayments.length === 0 && (
+                    <div className="text-center py-12 text-slate-400">
+                      <DollarSign className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                      <p>No rental payments found</p>
+                    </div>
+                  )}
+                </div>
+                {investorRentalPayments.length > rentalPageSize && (
+                  <div className="p-4 border-t border-slate-100 flex items-center justify-between">
+                    <p className="text-sm text-slate-500">
+                      Showing {((rentalPage - 1) * rentalPageSize) + 1} to {Math.min(rentalPage * rentalPageSize, investorRentalPayments.length)} of {investorRentalPayments.length}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => setRentalPage(p => Math.max(1, p - 1))}
+                        disabled={rentalPage === 1}
+                        className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50"
+                      >
+                        Previous
+                      </button>
+                      {Array.from({ length: Math.ceil(investorRentalPayments.length / rentalPageSize) }, (_, i) => i + 1).map(page => (
+                        <button
+                          key={page}
+                          onClick={() => setRentalPage(page)}
+                          className={`px-3 py-1.5 border rounded-lg text-sm ${rentalPage === page
+                            ? 'bg-investor text-white border-investor'
+                            : 'border-slate-200 hover:bg-slate-50'
+                            }`}
+                        >
+                          {page}
+                        </button>
+                      ))}
+                      <button
+                        onClick={() => setRentalPage(p => Math.min(Math.ceil(investorRentalPayments.length / rentalPageSize), p + 1))}
+                        disabled={rentalPage === Math.ceil(investorRentalPayments.length / rentalPageSize)}
+                        className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50"
+                      >
+                        Next
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
+      {showWithdrawalModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
+            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+              <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
+                <Banknote className="w-5 h-5 text-red-500" /> Request Withdrawal
+              </h2>
+              <button onClick={() => setShowWithdrawalModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+
+            <div className="p-5 overflow-y-auto flex-1 space-y-6">
+              <div className="grid grid-cols-3 gap-4">
+                <div className="bg-green-50 rounded-lg p-4 border border-green-100">
+                  <p className="text-xs text-green-600 font-medium">Available Balance</p>
+                  <p className="text-lg font-bold text-green-700">৳{(investor.totalEarnings - investor.totalWithdrawn - investor.pendingEarnings).toLocaleString()}</p>
+                </div>
+                <div className="bg-amber-50 rounded-lg p-4 border border-amber-100">
+                  <p className="text-xs text-amber-600 font-medium">Pending Request</p>
+                  <p className="text-lg font-bold text-amber-700">৳{investor.pendingEarnings.toLocaleString()}</p>
+                </div>
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-100">
+                  <p className="text-xs text-slate-600 font-medium">Total Withdrawn</p>
+                  <p className="text-lg font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-semibold text-slate-800 mb-3">Select Investment Plans & Bikes</h4>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 p-4 bg-slate-50 rounded-lg border border-slate-200">
+                    <input
+                      type="checkbox"
+                      id="selectAll"
+                      checked={withdrawSelection.selectAll}
+                      onChange={(e) => {
+                        setWithdrawSelection({
+                          ...withdrawSelection,
+                          selectAll: e.target.checked,
+                          selectedPlans: e.target.checked ? investor.investments?.map((inv: any) => inv.id) || [] : [],
+                          selectedBikes: e.target.checked ? assignedBikes.map(b => b.id) : []
+                        });
+                      }}
+                      className="w-4 h-4 text-investor rounded"
+                    />
+                    <label htmlFor="selectAll" className="flex-1">
+                      <span className="font-medium text-slate-800">Select All</span>
+                      <p className="text-xs text-slate-500">Include all investments and bikes</p>
+                    </label>
+                  </div>
+
+                  <div className="border border-slate-200 rounded-lg overflow-hidden">
+                    <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
+                      <p className="text-sm font-medium text-slate-700">Investment Plans</p>
+                    </div>
+                    <div className="divide-y divide-slate-100">
+                      {investor.investments?.map((inv: any) => {
+                        const planColors: Record<string, string> = {
+                          silver: 'bg-slate-100 text-slate-700',
+                          gold: 'bg-amber-100 text-amber-700',
+                          platinum: 'bg-purple-100 text-purple-700',
+                          diamond: 'bg-blue-100 text-blue-700',
+                        };
+                        const invBikes = assignedBikes.filter(b => b.investmentId === inv.id);
+                        const invEarnings = invBikes.reduce((sum: number, b: any) => sum + (b.totalEarnings || 0), 0);
+                        return (
+                          <div key={inv.id} className="p-4">
+                            <div className="flex items-center gap-3 mb-2">
+                              <input
+                                type="checkbox"
+                                id={`plan-${inv.id}`}
+                                checked={withdrawSelection.selectAll || withdrawSelection.selectedPlans.includes(inv.id)}
+                                disabled={withdrawSelection.selectAll}
+                                onChange={(e) => {
+                                  const newPlans = e.target.checked
+                                    ? [...withdrawSelection.selectedPlans, inv.id]
+                                    : withdrawSelection.selectedPlans.filter((p: string) => p !== inv.id);
+                                  const newBikes = e.target.checked
+                                    ? [...new Set([...withdrawSelection.selectedBikes, ...invBikes.map((b: any) => b.id)])]
+                                    : withdrawSelection.selectedBikes.filter((b: string) => !invBikes.find((ib: any) => ib.id === b));
+                                  setWithdrawSelection({ ...withdrawSelection, selectedPlans: newPlans, selectedBikes: newBikes });
+                                }}
+                                className="w-4 h-4 text-investor rounded"
+                              />
+                              <label htmlFor={`plan-${inv.id}`} className="flex-1 flex items-center justify-between">
+                                <div>
+                                  <span className="font-medium text-slate-800">{inv.planName}</span>
+                                  <span className={`ml-2 px-2 py-0.5 rounded text-xs capitalize ${planColors[inv.planType]}`}>{inv.planType}</span>
+                                </div>
+                                <span className="text-sm font-bold text-green-600">৳{invEarnings.toLocaleString()}</span>
+                              </label>
+                            </div>
+                            {!withdrawSelection.selectAll && invBikes.length > 0 && (
+                              <div className="ml-7 pl-4 border-l-2 border-slate-200 space-y-2">
+                                {invBikes.map((bike: any) => (
+                                  <div key={bike.id} className="flex items-center gap-2">
+                                    <input
+                                      type="checkbox"
+                                      id={`bike-${bike.id}`}
+                                      checked={withdrawSelection.selectedBikes.includes(bike.id)}
+                                      onChange={(e) => {
+                                        const newBikes = e.target.checked
+                                          ? [...withdrawSelection.selectedBikes, bike.id]
+                                          : withdrawSelection.selectedBikes.filter((b: string) => b !== bike.id);
+                                        setWithdrawSelection({ ...withdrawSelection, selectedBikes: newBikes });
+                                      }}
+                                      className="w-3 h-3 text-investor rounded"
+                                    />
+                                    <label htmlFor={`bike-${bike.id}`} className="flex-1 text-sm text-slate-600">
+                                      {bike.model} - {bike.plateNumber}
+                                    </label>
+                                    <span className="text-xs text-green-600 font-medium">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-semibold text-slate-800 mb-3">Withdrawal Amount</h4>
+                <div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-5">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm text-slate-600">Calculated Amount</span>
+                    <span className={`text-xs px-2 py-0.5 rounded-full ${withdrawSelection.selectAll ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
+                      {withdrawSelection.selectAll ? 'All Selected' : `${withdrawSelection.selectedBikes.length} bikes`}
+                    </span>
+                  </div>
+                  <p className="text-3xl font-bold text-green-700 mb-1">
+                    ৳{(withdrawSelection.selectAll
+                      ? assignedBikes.reduce((sum: number, b: any) => sum + (b.totalEarnings || 0), 0)
+                      : withdrawSelection.selectedBikes.reduce((sum: number, bikeId: string) => {
+                        const bike = assignedBikes.find((b: any) => b.id === bikeId);
+                        return sum + (bike?.totalEarnings || 0);
+                      }, 0)
+                    ).toLocaleString()}
+                  </p>
+                  <p className="text-xs text-slate-500">
+                    Based on {withdrawSelection.selectAll ? 'all' : withdrawSelection.selectedBikes.length} selected bike(s) earnings
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-semibold text-slate-800 mb-3">Payment Method</h4>
+                <div className="grid grid-cols-2 gap-3">
+                  {investor.bankAccounts?.map((account: any) => (
+                    <div
+                      key={account.id}
+                      onClick={() => setWithdrawSelection({ ...withdrawSelection, paymentMethod: 'bank', accountId: account.id })}
+                      className={`p-4 rounded-lg border cursor-pointer transition-all ${withdrawSelection.accountId === account.id ? 'border-investor bg-investor/5' : 'border-slate-200 hover:border-slate-300'}`}
+                    >
+                      <div className="flex items-center gap-2 mb-1">
+                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${account.isPrimary ? 'bg-green-100' : 'bg-slate-100'}`}>
+                          <Banknote className={`w-4 h-4 ${account.isPrimary ? 'text-green-600' : 'text-slate-500'}`} />
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium text-slate-800">{account.bankName}</p>
+                          {account.isPrimary && <span className="text-xs text-green-600">Primary</span>}
+                        </div>
+                      </div>
+                      <p className="text-xs text-slate-500">{account.accountNumber}</p>
+                    </div>
+                  ))}
+                </div>
+                {investor.mobileBanking && (
+                  <div
+                    onClick={() => setWithdrawSelection({ ...withdrawSelection, paymentMethod: 'mobile', accountId: 'mobile' })}
+                    className={`mt-3 p-4 rounded-lg border cursor-pointer transition-all ${withdrawSelection.paymentMethod === 'mobile' ? 'border-investor bg-investor/5' : 'border-slate-200 hover:border-slate-300'}`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className="w-8 h-8 rounded-lg bg-pink-100 flex items-center justify-center">
+                        <Phone className="w-4 h-4 text-pink-600" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-slate-800">{investor.mobileBanking}</p>
+                        <p className="text-xs text-slate-500">{investor.mobileBankingNumber}</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="p-5 border-t border-slate-100 flex justify-between items-center">
+              <button
+                onClick={() => { setShowWithdrawalModal(false); setShowAutoWithdrawModal(true); }}
+                className="px-4 py-2 text-sm text-slate-600 hover:text-investor flex items-center gap-1"
+              >
+                <Settings className="w-4 h-4" /> Configure Auto-Withdraw
+              </button>
+              <div className="flex gap-3">
+                <button onClick={() => setShowWithdrawalModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                  Cancel
+                </button>
+                <button
+                  disabled={!withdrawSelection.accountId || (withdrawSelection.selectedPlans.length === 0 && !withdrawSelection.selectAll)}
+                  className="px-6 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Submit Request
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showAutoWithdrawModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
+              <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
+                <Settings className="w-5 h-5 text-investor" /> Auto-Withdraw Settings
+              </h2>
+              <button onClick={() => setShowAutoWithdrawModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
+                <X className="w-5 h-5 text-slate-400" />
+              </button>
+            </div>
+
+            <div className="p-5 space-y-5">
+              <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
+                <div>
+                  <p className="font-medium text-slate-800">Enable Auto-Withdraw</p>
+                  <p className="text-xs text-slate-500">Automatically withdraw earnings</p>
+                </div>
+                <button
+                  onClick={() => setAutoWithdrawSettings({ ...autoWithdrawSettings, enabled: !autoWithdrawSettings.enabled })}
+                  className={`w-12 h-6 rounded-full transition-colors ${autoWithdrawSettings.enabled ? 'bg-investor' : 'bg-slate-300'}`}
+                >
+                  <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ${autoWithdrawSettings.enabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
+                </button>
+              </div>
+
+              {autoWithdrawSettings.enabled && (
+                <>
+                  <div>
+                    <label className="text-sm font-medium text-slate-700 mb-2 block">Withdrawal Frequency</label>
+                    <div className="grid grid-cols-3 gap-2">
+                      {[
+                        { value: 'as_per_request', label: 'As Requested' },
+                        { value: 'weekly', label: 'Weekly' },
+                        { value: 'monthly', label: 'Monthly' }
+                      ].map(opt => (
+                        <button
+                          key={opt.value}
+                          onClick={() => setAutoWithdrawSettings({ ...autoWithdrawSettings, frequency: opt.value as any })}
+                          className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${autoWithdrawSettings.frequency === opt.value ? 'bg-investor text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
+                        >
+                          {opt.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="text-sm font-medium text-slate-700 mb-2 block">Minimum Amount</label>
+                    <div className="relative">
+                      <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">৳</span>
+                      <input
+                        type="number"
+                        value={autoWithdrawSettings.minAmount}
+                        onChange={(e) => setAutoWithdrawSettings({ ...autoWithdrawSettings, minAmount: Number(e.target.value) })}
+                        className="w-full pl-8 pr-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-investor"
+                      />
+                    </div>
+                    <p className="text-xs text-slate-400 mt-1">Minimum balance required for auto-withdrawal</p>
+                  </div>
+
+                  <div>
+                    <label className="text-sm font-medium text-slate-700 mb-2 block">Destination Account</label>
+                    <div className="space-y-2">
+                      {investor.bankAccounts?.map((account: any) => (
+                        <div
+                          key={account.id}
+                          onClick={() => setAutoWithdrawSettings({ ...autoWithdrawSettings, accountId: account.id })}
+                          className={`p-3 rounded-lg border cursor-pointer flex items-center gap-3 ${autoWithdrawSettings.accountId === account.id ? 'border-investor bg-investor/5' : 'border-slate-200'}`}
+                        >
+                          <div className={`w-4 h-4 rounded-full border-2 ${autoWithdrawSettings.accountId === account.id ? 'border-investor bg-investor' : 'border-slate-300'}`}>
+                            {autoWithdrawSettings.accountId === account.id && <div className="w-full h-full rounded-full bg-white scale-50" />}
+                          </div>
+                          <div>
+                            <p className="text-sm font-medium">{account.bankName}</p>
+                            <p className="text-xs text-slate-500">{account.accountNumber}</p>
+                          </div>
+                          {account.isPrimary && <span className="ml-auto text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Primary</span>}
+                        </div>
+                      ))}
+                      {investor.mobileBanking && (
+                        <div
+                          onClick={() => setAutoWithdrawSettings({ ...autoWithdrawSettings, accountId: 'mobile' })}
+                          className={`p-3 rounded-lg border cursor-pointer flex items-center gap-3 ${autoWithdrawSettings.accountId === 'mobile' ? 'border-investor bg-investor/5' : 'border-slate-200'}`}
+                        >
+                          <div className={`w-4 h-4 rounded-full border-2 ${autoWithdrawSettings.accountId === 'mobile' ? 'border-investor bg-investor' : 'border-slate-300'}`}>
+                            {autoWithdrawSettings.accountId === 'mobile' && <div className="w-full h-full rounded-full bg-white scale-50" />}
+                          </div>
+                          <div>
+                            <p className="text-sm font-medium">{investor.mobileBanking}</p>
+                            <p className="text-xs text-slate-500">{investor.mobileBankingNumber}</p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+
+            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
+              <button onClick={() => setShowAutoWithdrawModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
+                Cancel
+              </button>
+              <button
+                onClick={() => { alert('Auto-withdraw settings saved!'); setShowAutoWithdrawModal(false); }}
+                className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark"
+              >
+                Save Settings
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showAssignBikeModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-xl shadow-xl w-full max-w-md">

src/data/mockData.ts

@@ -46,7 +46,9 @@ export interface BikeAssignment {
 export interface Rental {
   id: string;
   bikeId: string;
+  investorId: string;
   userId: string;
+  bikerName: string;
   type: 'single' | 'shared' | 'rent-to-own';
   status: 'active' | 'pending' | 'completed' | 'disputed';
   startDate: string;
@@ -56,6 +58,24 @@ export interface Rental {
   totalPaid: number;
 }
 
+export interface RentalPayment {
+  id: string;
+  rentalId: string;
+  bikeId: string;
+  investorId: string;
+  bikeModel: string;
+  plateNumber: string;
+  bikerId: string;
+  bikerName: string;
+  date: string;
+  amount: number;
+  duration: string;
+  planType: string;
+  status: 'paid' | 'pending' | 'failed';
+  paymentMethod: 'cash' | 'mobile' | 'bank';
+  transactionId?: string;
+}
+
 export interface Transaction {
   id: string;
   userId?: string;
@@ -174,7 +194,7 @@ export const users: User[] = [
 
 export const bikes: Bike[] = [
   {
-    id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'u1', investorId: 'inv1', investmentId: 'ip1', rentalType: 'single_rent', purchasePrice: 85000, purchaseDate: '2024-01-15', currentRent: 350, totalEarnings: 14250,
+    id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400', plateNumber: 'Dhaka Metro Cha-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'u1', investorId: 'inv1', investmentId: 'ip1', rentalType: 'single_rent', purchasePrice: 85000, purchaseDate: '2024-01-15', currentRent: 350, totalEarnings: 114250,
     assignmentHistory: [
       { id: 'ash1', bikeId: 'EV001', bikerId: 'u3', bikerName: 'Rahim Khan', assignedAt: '2024-01-20 10:30:00', assignedBy: 'admin1', unassignedAt: '2024-02-15 14:20:00', unassignedBy: 'admin1', reason: 'Bike transfer to another biker', status: 'completed', notes: 'Initial assignment' },
       { id: 'ash2', bikeId: 'EV001', bikerId: 'u1', bikerName: 'Karim Ahmed', assignedAt: '2024-02-15 15:00:00', assignedBy: 'admin1', status: 'active', notes: 'Reassigned after maintenance' }
@@ -232,9 +252,26 @@ export const bikes: Bike[] = [
 ];
 
 export const rentals: Rental[] = [
-  { id: 'r1', bikeId: 'b1', userId: 'u1', type: 'single', status: 'active', startDate: '2024-03-01', deposit: 5000, dailyRate: 350, totalPaid: 10500 },
+  { id: 'r1', bikeId: 'EV001', investorId: 'inv1', userId: 'u1', bikerName: 'Karim Ahmed', type: 'single', status: 'active', startDate: '2024-03-01', deposit: 5000, dailyRate: 350, totalPaid: 10500 },
-  { id: 'r2', bikeId: 'b3', userId: 'u2', type: 'rent-to-own', status: 'active', startDate: '2024-02-15', deposit: 8000, dailyRate: 450, totalPaid: 18000 },
+  { id: 'r2', bikeId: 'EV003', investorId: 'inv2', userId: 'u2', bikerName: 'Sofiq Rahman', type: 'rent-to-own', status: 'active', startDate: '2024-02-15', deposit: 8000, dailyRate: 450, totalPaid: 18000 },
-  { id: 'r3', bikeId: 'b2', userId: 'u1', type: 'single', status: 'completed', startDate: '2024-01-10', endDate: '2024-01-25', deposit: 5000, dailyRate: 350, totalPaid: 5250 },
+  { id: 'r3', bikeId: 'EV002', investorId: 'inv1', userId: 'u1', bikerName: 'Karim Ahmed', type: 'single', status: 'completed', startDate: '2024-01-10', endDate: '2024-01-25', deposit: 5000, dailyRate: 350, totalPaid: 5250 },
+];
+
+export const rentalPayments: RentalPayment[] = [
+  { id: 'rp1', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-25', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp2', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-24', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp3', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-23', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'cash' },
+  { id: 'rp4', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-22', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp5', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-21', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp6', rentalId: 'r2', bikeId: 'EV002', investorId: 'inv1', bikeModel: 'Yadea DT3', plateNumber: 'Dhaka Metro Cha-5678', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-25', amount: 300, duration: '1 day', planType: 'single', status: 'pending', paymentMethod: 'mobile' },
+  { id: 'rp7', rentalId: 'r2', bikeId: 'EV002', investorId: 'inv1', bikeModel: 'Yadea DT3', plateNumber: 'Dhaka Metro Cha-5678', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-24', amount: 300, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'cash' },
+  { id: 'rp8', rentalId: 'r2', bikeId: 'EV002', investorId: 'inv1', bikeModel: 'Yadea DT3', plateNumber: 'Dhaka Metro Cha-5678', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-23', amount: 300, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp9', rentalId: 'r3', bikeId: 'EV003', investorId: 'inv2', bikeModel: 'AIMA Lightning', plateNumber: 'Dhaka Metro Cha-9012', bikerId: 'u2', bikerName: 'Sofiq Rahman', date: '2024-03-25', amount: 450, duration: '1 day', planType: 'rent-to-own', status: 'paid', paymentMethod: 'bank' },
+  { id: 'rp10', rentalId: 'r3', bikeId: 'EV003', investorId: 'inv2', bikeModel: 'AIMA Lightning', plateNumber: 'Dhaka Metro Cha-9012', bikerId: 'u2', bikerName: 'Sofiq Rahman', date: '2024-03-24', amount: 450, duration: '1 day', planType: 'rent-to-own', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp11', rentalId: 'r3', bikeId: 'EV003', investorId: 'inv2', bikeModel: 'AIMA Lightning', plateNumber: 'Dhaka Metro Cha-9012', bikerId: 'u2', bikerName: 'Sofiq Rahman', date: '2024-03-23', amount: 450, duration: '1 day', planType: 'rent-to-own', status: 'paid', paymentMethod: 'bank' },
+  { id: 'rp12', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-20', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'cash' },
+  { id: 'rp13', rentalId: 'r1', bikeId: 'EV001', investorId: 'inv1', bikeModel: 'Etron ET50', plateNumber: 'Dhaka Metro Cha-1234', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-19', amount: 350, duration: '1 day', planType: 'single', status: 'paid', paymentMethod: 'mobile' },
+  { id: 'rp14', rentalId: 'r2', bikeId: 'EV002', investorId: 'inv1', bikeModel: 'Yadea DT3', plateNumber: 'Dhaka Metro Cha-5678', bikerId: 'u1', bikerName: 'Karim Ahmed', date: '2024-03-22', amount: 300, duration: '1 day', planType: 'single', status: 'failed', paymentMethod: 'mobile' },
 ];
 
 export const transactions: Transaction[] = [
@@ -326,7 +363,7 @@ export const investors: Investor[] = [
     emergencyContactRelation: 'Wife',
     emergencyContactPhone: '01712345679',
     totalInvested: 150000,
-    totalEarnings: 14250,
+    totalEarnings: 114250,
     activeBikes: 2,
     withdrawalPending: 3000,
     totalWithdrawn: 45000,