feat: implement navigation to rental history page for individual assets and create associated detail view route

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

@@ -323,13 +323,17 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
                 <div className="space-y-4">
                   <p className="text-sm text-slate-500">{assignedBatteries.length} battery pack{assignedBatteries.length !== 1 ? 's' : ''} assigned to this investment</p>
                   {assignedBatteries.map((battery) => (
-                    <div key={battery.id} className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col md:flex-row items-start gap-4 hover:border-emerald-500/30 transition-colors">
-                      <div className="w-16 h-16 bg-emerald-50 rounded-xl flex items-center justify-center shrink-0 border border-emerald-100">
+                    <Link
+                      href={`/investor/investments/${investmentId}/rental-history/${battery.id}`}
+                      key={battery.id}
+                      className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col md:flex-row items-start gap-4 hover:border-emerald-500 hover:shadow-md transition-all block group cursor-pointer"
+                    >
+                      <div className="w-16 h-16 bg-emerald-50 rounded-xl flex items-center justify-center shrink-0 border border-emerald-100 group-hover:scale-105 transition-transform duration-300">
                         <Battery className="w-8 h-8 text-emerald-600 animate-pulse" />
                       </div>
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-1">
-                          <h5 className="font-semibold text-slate-800">{battery.model}</h5>
+                          <h5 className="font-semibold text-slate-800 group-hover:text-emerald-700 transition-colors">{battery.model}</h5>
                           <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${battery.status === 'In-Use' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}`}>{battery.status}</span>
                         </div>
                         <p className="text-sm text-slate-500">{battery.serialNumber} • {battery.brand}</p>
@@ -339,25 +343,32 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
                           <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {battery.location}</span>
                         </div>
                       </div>
-                      <div className="text-right shrink-0">
-                        <p className="text-xs text-slate-500 mb-1">Est. Monthly Return</p>
-                        <p className="text-lg font-bold text-slate-800">৳{(investment.monthlyReturn / assignedBatteries.length).toLocaleString()}</p>
-                        <p className="text-xs text-slate-400 mt-1">Total: ৳{battery.earnings.toLocaleString()}</p>
+                      <div className="flex items-center gap-3 self-center shrink-0">
+                        <div className="text-right">
+                          <p className="text-xs text-slate-500 mb-1">Est. Monthly Return</p>
+                          <p className="text-lg font-bold text-slate-800">৳{(investment.monthlyReturn / assignedBatteries.length).toLocaleString()}</p>
+                          <p className="text-xs text-slate-400 mt-1">Total: ৳{battery.earnings.toLocaleString()}</p>
+                        </div>
+                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-emerald-600 group-hover:translate-x-1 transition-all" />
                       </div>
-                    </div>
+                    </Link>
                   ))}
                 </div>
               ) : (
                 <div className="space-y-4">
                   <p className="text-sm text-slate-500">{assignedBikes.length} bike{assignedBikes.length !== 1 ? 's' : ''} assigned to this investment</p>
                   {assignedBikes.map((bike) => (
-                    <div key={bike.id} className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col md:flex-row items-start gap-4 hover:border-investor/30 transition-colors">
-                      <div className="w-24 h-20 bg-slate-100 rounded-lg overflow-hidden shrink-0">
-                        <img src={bike.image} alt={bike.model} className="w-full h-full object-cover" />
+                    <Link
+                      href={`/investor/investments/${investmentId}/rental-history/${bike.id}`}
+                      key={bike.id}
+                      className="p-4 bg-white rounded-xl border border-slate-200 flex flex-col md:flex-row items-start gap-4 hover:border-investor hover:shadow-md transition-all block group cursor-pointer"
+                    >
+                      <div className="w-24 h-20 bg-slate-100 rounded-lg overflow-hidden shrink-0 group-hover:scale-102 transition-transform duration-300">
+                        <img src={bike.image} alt={bike.model} className="w-full h-full object-cover animate-fade-in" />
                       </div>
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-1">
-                          <h5 className="font-semibold text-slate-800">{bike.model}</h5>
+                          <h5 className="font-semibold text-slate-800 group-hover:text-investor transition-colors">{bike.model}</h5>
                           <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${bike.status === 'rented' ? 'bg-green-100 text-green-700' : bike.status === 'available' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'}`}>{bike.status}</span>
                         </div>
                         <p className="text-sm text-slate-500">{bike.plateNumber} • {bike.brand}</p>
@@ -366,12 +377,15 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
                           <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> {bike.location}</span>
                         </div>
                       </div>
-                      <div className="text-right shrink-0">
-                        <p className="text-xs text-slate-500 mb-1">Est. Monthly Return</p>
-                        <p className="text-lg font-bold text-slate-800">৳{bike.currentRent}</p>
-                        <p className="text-xs text-slate-400 mt-1">Total: ৳{bike.totalEarnings.toLocaleString()}</p>
+                      <div className="flex items-center gap-3 self-center shrink-0">
+                        <div className="text-right">
+                          <p className="text-xs text-slate-500 mb-1">Est. Monthly Return</p>
+                          <p className="text-lg font-bold text-slate-800">৳{bike.currentRent}</p>
+                          <p className="text-xs text-slate-400 mt-1">Total: ৳{bike.totalEarnings.toLocaleString()}</p>
+                        </div>
+                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-investor group-hover:translate-x-1 transition-all" />
                       </div>
-                    </div>
+                    </Link>
                   ))}
                 </div>
               )

src/app/investor/investments/[id]/rental-history/[assetId]/page.tsx

@@ -0,0 +1,551 @@
+'use client';
+
+import { useState, use } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  ArrowLeft, Battery, Bike, Calendar, Clock, Download, MapPin, Search,
+  TrendingUp, User, XCircle, CheckCircle2, ChevronLeft, ChevronRight,
+  Shield, RefreshCw, DollarSign, Activity, AlertCircle, CalendarRange
+} from 'lucide-react';
+import { investors } from '@/data/mockData';
+import toast from 'react-hot-toast';
+import InvestorNotification from '@/components/InvestorNotification';
+
+interface RentalTransaction {
+  id: string;
+  date: string;
+  riderName: string;
+  duration: string;
+  amount: number;
+  status: 'paid' | 'pending' | 'failed';
+  payoutMethod: string;
+  swapCount?: number;
+}
+
+export default function AssetRentalHistoryPage({ params }: { params: Promise<{ id: string; assetId: string }> }) {
+  const resolvedParams = use(params);
+  const { id: investmentId, assetId } = resolvedParams;
+  const router = useRouter();
+
+  const investor = investors[0];
+  const investment = investor.investments?.find((inv: any) => inv.id === investmentId);
+
+  // Asset verification
+  const isBattery = assetId.startsWith('BAT-') || assetId.startsWith('bat-') || assetId.toLowerCase().includes('battery');
+
+  // Specific Asset Details
+  const bikeDetails = {
+    id: 'b1',
+    model: 'Etron ET50',
+    brand: 'Etron',
+    plateNumber: 'Dhaka Metro Cha-1234',
+    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop',
+    status: 'rented',
+    currentRent: 350,
+    totalEarnings: 114250,
+    batteryLevel: 78,
+    range: '60 km',
+    location: 'Gulshan 1 Hub',
+    purchasePrice: 85000,
+    utilization: '94%',
+    avgDailyHours: '8.4 hrs',
+  };
+
+  const batteryDetails: Record<string, any> = {
+    'BAT-001': {
+      id: 'BAT-001',
+      serialNumber: 'SN-2024-00001',
+      brand: 'EVE Energy',
+      model: 'Li-Ion 60V50Ah',
+      status: 'In-Use',
+      cycleCount: 156,
+      soc: '78% / 95%',
+      earnings: 4500,
+      location: 'Dhaka Central Hub',
+      purchasePrice: 45000,
+      utilization: '97%',
+      dailyRent: 150,
+    },
+    'BAT-002': {
+      id: 'BAT-002',
+      serialNumber: 'SN-2024-00002',
+      brand: 'EVE Energy',
+      model: 'Li-Ion 60V50Ah',
+      status: 'In-Use',
+      cycleCount: 142,
+      soc: '82% / 96%',
+      earnings: 4500,
+      location: 'Dhaka Central Hub',
+      purchasePrice: 45000,
+      utilization: '95%',
+      dailyRent: 150,
+    }
+  };
+
+  const currentBattery = batteryDetails[assetId] || batteryDetails['BAT-001'];
+  const assetDisplayName = isBattery ? currentBattery.model : bikeDetails.model;
+  const assetSubName = isBattery ? currentBattery.serialNumber : bikeDetails.plateNumber;
+
+  // Generate highly realistic rent transaction history
+  const [transactions] = useState<RentalTransaction[]>(() => {
+    const list: RentalTransaction[] = [];
+    const riders = ['Sajib Islam', 'Nayeem Chowdhury', 'Rakib Hasan', 'Kamal Hossain', 'Arifur Rahman'];
+    const methods = ['bKash', 'Nagad', 'Rocket', 'Bank Transfer'];
+    
+    const days = isBattery ? 30 : 20;
+    const baseDate = new Date();
+    
+    for (let i = 0; i < days; i++) {
+      const date = new Date();
+      date.setDate(baseDate.getDate() - i);
+      const dateString = date.toISOString().split('T')[0];
+      
+      const riderIndex = (i + 3) % riders.length;
+      const methodIndex = (i + 1) % methods.length;
+      
+      // status distribution
+      let status: 'paid' | 'pending' | 'failed' = 'paid';
+      if (i === 1) status = 'pending';
+      else if (i === 5) status = 'failed';
+      
+      const amount = isBattery ? currentBattery.dailyRent : bikeDetails.currentRent;
+
+      list.push({
+        id: `TX-${isBattery ? 'BAT' : 'BK'}-${10000 + i}`,
+        date: dateString,
+        riderName: riders[riderIndex],
+        duration: '1 Day',
+        amount: amount,
+        status: status,
+        payoutMethod: methods[methodIndex],
+        swapCount: isBattery ? 2 + (i % 3) : undefined
+      });
+    }
+    return list;
+  });
+
+  // Filter & Sorting State
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [sortBy, setSortBy] = useState<'date' | 'amount' | 'rider'>('date');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
+
+  // Handler functions
+  const handleSort = (field: 'date' | 'amount' | 'rider') => {
+    if (sortBy === field) {
+      setSortOrder(prev => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortBy(field);
+      setSortOrder('desc');
+    }
+    setPage(1);
+  };
+
+  // Filter Logic
+  const filteredTransactions = transactions.filter(tx => {
+    if (statusFilter !== 'all' && tx.status !== statusFilter) return false;
+    if (searchQuery && !tx.riderName.toLowerCase().includes(searchQuery.toLowerCase()) && !tx.id.toLowerCase().includes(searchQuery.toLowerCase())) return false;
+    if (dateFrom && new Date(tx.date) < new Date(dateFrom)) return false;
+    if (dateTo && new Date(tx.date) > new Date(dateTo)) return false;
+    return true;
+  });
+
+  // Sort Logic
+  const sortedTransactions = [...filteredTransactions].sort((a, b) => {
+    let comparison = 0;
+    if (sortBy === 'date') {
+      comparison = new Date(a.date).getTime() - new Date(b.date).getTime();
+    } else if (sortBy === 'amount') {
+      comparison = a.amount - b.amount;
+    } else if (sortBy === 'rider') {
+      comparison = a.riderName.localeCompare(b.riderName);
+    }
+    return sortOrder === 'desc' ? -comparison : comparison;
+  });
+
+  // Pagination
+  const totalPages = Math.ceil(sortedTransactions.length / pageSize);
+  const paginatedTransactions = sortedTransactions.slice((page - 1) * pageSize, page * pageSize);
+
+  const statusConfig: Record<string, { label: string; bg: string; color: string; icon: any }> = {
+    paid: { label: 'Paid', bg: 'bg-green-100', color: 'text-green-700', icon: CheckCircle2 },
+    pending: { label: 'Pending', bg: 'bg-amber-100', color: 'text-amber-700', icon: Clock },
+    failed: { label: 'Failed', bg: 'bg-red-100', color: 'text-red-700', icon: XCircle },
+  };
+
+  const totalCollected = filteredTransactions
+    .filter(t => t.status === 'paid')
+    .reduce((sum, t) => sum + t.amount, 0);
+
+  const pendingAmount = filteredTransactions
+    .filter(t => t.status === 'pending')
+    .reduce((sum, t) => sum + t.amount, 0);
+
+  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 mb-12 lg:mb-0">
+        
+        {/* Header - EXACT copy of other page's spacing & structure */}
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="flex items-center gap-3">
+              <button 
+                onClick={() => router.back()} 
+                className="p-2 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200 bg-white"
+              >
+                <ArrowLeft className="w-5 h-5 text-slate-600" />
+              </button>
+              <div>
+                <h1 className="text-xl sm:text-2xl font-bold text-slate-800 flex items-center gap-2">
+                  {isBattery ? <Battery className="w-5 h-5 sm:w-6 sm:h-6 text-investor" /> : <Bike className="w-5 h-5 sm:w-6 sm:h-6 text-investor" />}
+                  {assetDisplayName}
+                </h1>
+                <p className="text-sm text-slate-500 mt-1">
+                  ID: #{assetId.toUpperCase()} • {isBattery ? `Serial Number: ${currentBattery.serialNumber}` : `Plate: ${bikeDetails.plateNumber}`}
+                </p>
+              </div>
+            </div>
+            
+            <button 
+              onClick={() => toast.success('Exporting history...')} 
+              className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex justify-center lg:justify-start items-center gap-2 shadow-sm w-fit"
+            >
+              <Download className="w-4 h-4 text-slate-500" /> Export Ledger
+            </button>
+          </div>
+        </div>
+
+        {/* Info Grid & Stats Cards - MATCHES OTHER PAGES PRECISELY */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6">
+          <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 shrink-0">
+                <DollarSign className="w-5 h-5 text-green-600" />
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Total Collected</p>
+                <p className="text-lg font-bold text-green-600">৳{totalCollected.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 shrink-0">
+                <Activity className="w-5 h-5 text-blue-600" />
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Utilization Rate</p>
+                <p className="text-lg font-bold text-slate-800">{isBattery ? currentBattery.utilization : bikeDetails.utilization}</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 shrink-0">
+                <Clock className="w-5 h-5 text-amber-600" />
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Pending</p>
+                <p className="text-lg font-bold text-amber-600">৳{pendingAmount.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-purple-100 rounded-lg flex items-center justify-center shrink-0">
+                <Shield className="w-5 h-5 text-purple-600" />
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Hub Location</p>
+                <p className="text-sm font-bold text-slate-800 truncate max-w-[140px] sm:max-w-none">
+                  {isBattery ? currentBattery.location.split(' ')[0] : bikeDetails.location.split(' ')[0]}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Table Card - MATCHES OTHER PAGES PRECISELY */}
+        <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+          
+          {/* Filters - MATCHES OTHER PAGES PRECISELY */}
+          <div className="p-4 border-b border-slate-100">
+            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
+              
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="relative">
+                  <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                  <input
+                    type="text"
+                    placeholder="Search rider..."
+                    value={searchQuery}
+                    onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }}
+                    className="pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm w-48 sm:w-64 focus:outline-none"
+                  />
+                </div>
+                
+                <select
+                  value={statusFilter}
+                  onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
+                  className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white cursor-pointer"
+                >
+                  <option value="all">All Status</option>
+                  <option value="paid">Paid</option>
+                  <option value="pending">Pending</option>
+                  <option value="failed">Failed</option>
+                </select>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="flex items-center gap-1 text-xs text-slate-500 font-medium">
+                  <CalendarRange className="w-4 h-4" /> Date Range
+                </div>
+                <div className="flex items-center gap-1">
+                  <input
+                    type="date"
+                    value={dateFrom}
+                    onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
+                    className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                  />
+                  <span className="text-slate-400">to</span>
+                  <input
+                    type="date"
+                    value={dateTo}
+                    onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
+                    className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
+                  />
+                </div>
+                {(dateFrom || dateTo) && (
+                  <button
+                    onClick={() => { setDateFrom(''); setDateTo(''); setPage(1); }}
+                    className="px-2 py-1 text-xs text-red-500 hover:bg-red-50 rounded"
+                  >
+                    Clear
+                  </button>
+                )}
+                
+                <button 
+                  onClick={() => {
+                    setSearchQuery('');
+                    setStatusFilter('all');
+                    setDateFrom('');
+                    setDateTo('');
+                    setSortBy('date');
+                    setSortOrder('desc');
+                    setPage(1);
+                    toast.success('Filters cleared!');
+                  }}
+                  className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 bg-white"
+                  title="Reset filters"
+                >
+                  <RefreshCw className="w-4 h-4 text-slate-500" />
+                </button>
+              </div>
+
+            </div>
+          </div>
+
+          {/* Card View - Mobile/Tablet */}
+          <div className="lg:hidden divide-y divide-slate-100">
+            {paginatedTransactions.length > 0 ? (
+              paginatedTransactions.map((tx) => {
+                const status = statusConfig[tx.status] || statusConfig.pending;
+                const StatusIcon = status.icon;
+                return (
+                  <div key={tx.id} className="p-4 hover:bg-slate-50">
+                    <div className="flex items-start justify-between gap-3 mb-3">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <User className="w-4 h-4 text-slate-400 shrink-0" />
+                          <p className="text-sm font-semibold text-slate-800 truncate">{tx.riderName}</p>
+                        </div>
+                        <p className="text-xs text-slate-400 ml-6">Ref: {tx.id}</p>
+                        {isBattery && (
+                          <p className="text-xs text-slate-600 mt-1 ml-6 font-semibold">Swaps: {tx.swapCount}</p>
+                        )}
+                      </div>
+                      
+                      <div className="text-right shrink-0">
+                        <p className="text-base font-bold text-slate-800">৳{tx.amount.toLocaleString()}</p>
+                        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium mt-1 ${status.bg} ${status.color}`}>
+                          <StatusIcon className="w-3 h-3" /> {status.label}
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center justify-between ml-6 text-xs text-slate-400">
+                      <span>{tx.date}</span>
+                      <span className="capitalize">{tx.payoutMethod}</span>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="p-8 text-center text-slate-500">
+                <AlertCircle className="w-10 h-10 mx-auto mb-2 text-slate-300" />
+                <p>No rental payments found</p>
+              </div>
+            )}
+          </div>
+
+          {/* Table View - Desktop */}
+          <div className="hidden lg:block overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-slate-50">
+                <tr>
+                  <th 
+                    onClick={() => handleSort('date')}
+                    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 {sortBy === 'date' && <span className="text-investor">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
+                    </div>
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">
+                    Transaction ID
+                  </th>
+                  <th 
+                    onClick={() => handleSort('rider')}
+                    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">
+                      Rider (Biker) {sortBy === 'rider' && <span className="text-investor">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
+                    </div>
+                  </th>
+                  {isBattery && (
+                    <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">
+                      Swaps
+                    </th>
+                  )}
+                  <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">
+                    Duration
+                  </th>
+                  <th 
+                    onClick={() => handleSort('amount')}
+                    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 {sortBy === 'amount' && <span className="text-investor">{sortOrder === '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">
+                {paginatedTransactions.length > 0 ? (
+                  paginatedTransactions.map((tx) => {
+                    const status = statusConfig[tx.status] || statusConfig.pending;
+                    const StatusIcon = status.icon;
+                    return (
+                      <tr key={tx.id} className="hover:bg-slate-50">
+                        <td className="px-4 py-3">
+                          <div>
+                            <p className="text-sm font-medium text-slate-800">{tx.date}</p>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-500 font-mono">
+                          {tx.id}
+                        </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 font-medium">{tx.riderName}</span>
+                          </div>
+                        </td>
+                        {isBattery && (
+                          <td className="px-4 py-3 text-sm text-slate-600">
+                            {tx.swapCount} Swaps
+                          </td>
+                        )}
+                        <td className="px-4 py-3 text-sm text-slate-600">
+                          {tx.duration}
+                        </td>
+                        <td className="px-4 py-3">
+                          <p className="text-sm font-bold text-slate-800">৳{tx.amount.toLocaleString()}</p>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-600 capitalize">
+                          {tx.payoutMethod}
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${status.bg} ${status.color}`}>
+                            <StatusIcon className="w-3 h-3" />
+                            {status.label}
+                          </span>
+                        </td>
+                      </tr>
+                    );
+                  })
+                ) : (
+                  <tr>
+                    <td colSpan={isBattery ? 8 : 7} className="px-4 py-12 text-center text-slate-500">
+                      <AlertCircle className="w-12 h-12 mx-auto mb-2 text-slate-300" />
+                      <p>No rental payments found</p>
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination - MATCHES OTHER PAGES PRECISELY */}
+          {sortedTransactions.length > pageSize && (
+            <div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3">
+              <p className="text-xs sm:text-sm text-slate-500">
+                Showing {((page - 1) * pageSize) + 1} to {Math.min(page * pageSize, sortedTransactions.length)} of {sortedTransactions.length}
+              </p>
+              
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => setPage(p => Math.max(1, p - 1))}
+                  disabled={page === 1}
+                  className="p-2 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </button>
+                
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
+                  <button
+                    key={pageNum}
+                    onClick={() => setPage(pageNum)}
+                    className={`w-8 h-8 rounded-lg text-sm font-medium ${
+                      page === pageNum 
+                        ? 'bg-investor text-white' 
+                        : 'border border-slate-200 hover:bg-slate-50'
+                    }`}
+                  >
+                    {pageNum}
+                  </button>
+                ))}
+
+                <button
+                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                  disabled={page === totalPages}
+                  className="p-2 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          )}
+
+        </div>
+      </div>
+    </div>
+  );
+}