Compare commits

..

2 Commits

2 changed files with 205 additions and 122 deletions

View File

@@ -531,12 +531,12 @@ export default function BikersPage() {
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Bikers Management</h1>
<p className="text-sm text-slate-500 mt-1">Manage registered biker accounts with full details</p>
</div>
<button
{/* <button
onClick={handleAddBiker}
className="py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors flex items-center gap-2"
>
<Plus className="w-4 h-4" /> Add New Biker
</button>
</button> */}
</div>
<div className="grid grid-cols-2 lg:grid-cols-6 gap-4 mb-6">
@@ -636,106 +636,179 @@ export default function BikersPage() {
</div>
{viewMode === 'table' ? (
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-slate-50">
<tr>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Biker</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">License & GPS</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Location</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rides & Distance</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Financial</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">KYC</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rent Status</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-50">
<>
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead className="bg-slate-50">
<tr>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Biker</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">License & GPS</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Location</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rides & Distance</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Financial</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">KYC</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rent Status</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-50">
{sortedBikers.map(biker => (
<tr key={biker.id} className="hover:bg-slate-50 transition-colors">
<td className="px-4 py-3">
<Link href={`/admin/bikers/${biker.id}`} className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
<span className="text-sm font-bold text-blue-600">{biker.name.charAt(0)}</span>
</div>
<div>
<p className="text-sm font-medium text-slate-700">{biker.name}</p>
<p className="text-xs text-slate-400">{biker.phone}</p>
</div>
</Link>
</td>
<td className="px-4 py-3">
<p className="text-xs text-slate-600 flex items-center gap-1">
<Car className="w-3 h-3" /> {biker.drivingLicense.number || 'No License'}
</p>
<p className="text-xs text-slate-400 flex items-center gap-1">
<Navigation className="w-3 h-3" /> GPS: {biker.gpsDeviceId || 'No GPS'}
</p>
<p className="text-xs text-slate-400">Class: {biker.drivingLicense.class || 'N/A'}</p>
</td>
<td className="px-4 py-3">
<p className="text-sm text-slate-600 text-xs">{biker.location}</p>
</td>
<td className="px-4 py-3">
<p className="text-sm font-medium text-slate-700">{biker.totalRides} rides</p>
<p className="text-xs text-slate-400">{biker.totalDistance.toLocaleString()} km</p>
</td>
<td className="px-4 py-3">
<p className="text-sm font-semibold text-green-600">{biker.totalSpent.toLocaleString()}</p>
<p className="text-xs text-slate-400">Wallet: {biker.walletBalance}</p>
</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${membershipColors[biker.membershipType]}`}>
{biker.membershipType}
</span>
</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[biker.kycStatus]}`}>
{biker.kycStatus === 'verified' && <CheckCircle className="w-3 h-3" />}
{biker.kycStatus === 'pending' && <Clock className="w-3 h-3" />}
{biker.kycStatus === 'rejected' && <XCircle className="w-3 h-3" />}
{biker.kycStatus}
</span>
</td>
<td className="px-4 py-3">
{(biker.pendingRent && biker.pendingRent > 0) ? (
<div>
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
<AlertTriangle className="w-3 h-3" /> Pending
</span>
<p className="text-xs text-amber-600 mt-1">{biker.pendingRent} ({biker.pendingRentDays}d)</p>
</div>
) : (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
<CheckCircle className="w-3 h-3" /> Clear
</span>
)}
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-1">
<a href={`tel:${biker.phone}`} className="p-2 hover:bg-green-50 rounded-lg" title="Call">
<PhoneCall className="w-4 h-4 text-green-600" />
</a>
<a href={`sms:${biker.phone}`} className="p-2 hover:bg-blue-50 rounded-lg" title="Message">
<MessageCircle className="w-4 h-4 text-blue-500" />
</a>
<Link href={`/admin/bikers/${biker.id}`} className="p-2 hover:bg-slate-100 rounded-lg" title="View Details">
<Eye className="w-4 h-4 text-blue-500" />
</Link>
<Link href={`/admin/bikers/${biker.id}`} className="p-2 hover:bg-slate-100 rounded-lg" title="Edit">
<Edit className="w-4 h-4 text-slate-400" />
</Link>
<button onClick={() => handleDeleteBiker(biker.id)} className="p-2 hover:bg-red-50 rounded-lg" title="Delete">
<Trash2 className="w-4 h-4 text-red-400" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="md:hidden p-4">
<div className="grid grid-cols-1 gap-4">
{sortedBikers.map(biker => (
<tr key={biker.id} className="hover:bg-slate-50 transition-colors">
<td className="px-4 py-3">
<Link href={`/admin/bikers/${biker.id}`} className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
<span className="text-sm font-bold text-blue-600">{biker.name.charAt(0)}</span>
<Link key={biker.id} href={`/admin/bikers/${biker.id}`} className="block bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
<span className="text-lg font-bold text-blue-600">{biker.name.charAt(0)}</span>
</div>
<div>
<p className="text-sm font-medium text-slate-700">{biker.name}</p>
<p className="text-xs text-slate-400">{biker.phone}</p>
<p className="font-semibold text-slate-700">{biker.name}</p>
<p className="text-sm text-slate-400">{biker.phone}</p>
</div>
</Link>
</td>
<td className="px-4 py-3">
<p className="text-xs text-slate-600 flex items-center gap-1">
<Car className="w-3 h-3" /> {biker.drivingLicense.number || 'No License'}
</p>
<p className="text-xs text-slate-400 flex items-center gap-1">
<Navigation className="w-3 h-3" /> GPS: {biker.gpsDeviceId || 'No GPS'}
</p>
<p className="text-xs text-slate-400">Class: {biker.drivingLicense.class || 'N/A'}</p>
</td>
<td className="px-4 py-3">
<p className="text-sm text-slate-600 text-xs">{biker.location}</p>
</td>
<td className="px-4 py-3">
<p className="text-sm font-medium text-slate-700">{biker.totalRides} rides</p>
<p className="text-xs text-slate-400">{biker.totalDistance.toLocaleString()} km</p>
</td>
<td className="px-4 py-3">
<p className="text-sm font-semibold text-green-600">{biker.totalSpent.toLocaleString()}</p>
<p className="text-xs text-slate-400">Wallet: {biker.walletBalance}</p>
</td>
<td className="px-4 py-3">
</div>
</div>
<div className="flex flex-wrap gap-2 mb-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[biker.status]}`}>
{statusLabels[biker.status] || biker.status}
</span>
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[biker.kycStatus]}`}>
{biker.kycStatus}
</span>
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${membershipColors[biker.membershipType]}`}>
{biker.membershipType}
</span>
</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[biker.kycStatus]}`}>
{biker.kycStatus === 'verified' && <CheckCircle className="w-3 h-3" />}
{biker.kycStatus === 'pending' && <Clock className="w-3 h-3" />}
{biker.kycStatus === 'rejected' && <XCircle className="w-3 h-3" />}
{biker.kycStatus}
</span>
</td>
<td className="px-4 py-3">
{(biker.pendingRent && biker.pendingRent > 0) ? (
<div>
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
<AlertTriangle className="w-3 h-3" /> Pending
</span>
<p className="text-xs text-amber-600 mt-1">{biker.pendingRent} ({biker.pendingRentDays}d)</p>
</div>
) : (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
<CheckCircle className="w-3 h-3" /> Clear
{biker.rating > 0 && (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
{biker.rating}
</span>
)}
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-1">
<a href={`tel:${biker.phone}`} className="p-2 hover:bg-green-50 rounded-lg" title="Call">
<PhoneCall className="w-4 h-4 text-green-600" />
</a>
<a href={`sms:${biker.phone}`} className="p-2 hover:bg-blue-50 rounded-lg" title="Message">
<MessageCircle className="w-4 h-4 text-blue-500" />
</a>
<button onClick={() => handleViewDetails(biker)} className="p-2 hover:bg-slate-100 rounded-lg" title="View Details">
<Eye className="w-4 h-4 text-blue-500" />
</button>
<button onClick={() => handleEditBiker(biker)} className="p-2 hover:bg-slate-100 rounded-lg" title="Edit">
<Edit className="w-4 h-4 text-slate-400" />
</button>
<button onClick={() => handleDeleteBiker(biker.id)} className="p-2 hover:bg-red-50 rounded-lg" title="Delete">
<Trash2 className="w-4 h-4 text-red-400" />
</button>
</div>
<div className="grid grid-cols-2 gap-2 text-xs mb-3">
<div className="bg-slate-50 rounded-lg p-2">
<p className="text-slate-400">Total Rides</p>
<p className="font-medium text-slate-700">{biker.totalRides}</p>
</div>
</td>
</tr>
<div className="bg-slate-50 rounded-lg p-2">
<p className="text-slate-400">Distance</p>
<p className="font-medium text-slate-700">{biker.totalDistance.toLocaleString()} km</p>
</div>
<div className="bg-slate-50 rounded-lg p-2">
<p className="text-slate-400">Active Rentals</p>
<p className="font-medium text-slate-700">-</p>
</div>
<div className="bg-slate-50 rounded-lg p-2">
<p className="text-slate-400">Completed</p>
<p className="font-medium text-slate-700">{biker.totalRides}</p>
</div>
</div>
<div className="grid grid-cols-2 gap-2 text-xs mb-3">
<div className="bg-slate-50 rounded-lg p-2">
<p className="text-slate-400">License</p>
<p className="font-medium text-slate-700 truncate">{biker.drivingLicense.number || 'N/A'}</p>
</div>
<div className="bg-slate-50 rounded-lg p-2">
<p className="text-slate-400">Location</p>
<p className="font-medium text-slate-700 truncate">{biker.location}</p>
</div>
</div>
<div className="flex items-center justify-between pt-3 border-t border-slate-100">
<div>
<p className="text-sm font-semibold text-green-600">{biker.walletBalance.toLocaleString()}</p>
<p className="text-xs text-slate-400">Wallet</p>
</div>
<span className="text-xs text-blue-600 font-medium">View Details </span>
</div>
</Link>
))}
</tbody>
</table>
</div>
</div>
</div>
</>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{sortedBikers.map(biker => (

View File

@@ -584,9 +584,9 @@ export default function RentalsPage() {
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Bike</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Subscription</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Hub</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Deposit</th>
{/* <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Subscription</th> */}
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rent Payment</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
@@ -627,9 +627,6 @@ export default function RentalsPage() {
{typeBadge.label}
</span>
</td>
<td className="px-4 py-3">
<span className="text-sm text-slate-600 capitalize">{rental.subscriptionType}</span>
</td>
<td className="px-4 py-3">
<span className="text-sm text-slate-600">{rental.hubName}</span>
</td>
@@ -641,25 +638,32 @@ export default function RentalsPage() {
</span>
</div>
</td>
<td className="px-4 py-3">
{(paymentBadge.pendingRent && paymentBadge.pendingRent > 0) ? (
<div>
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
<AlertTriangle className="w-3 h-3" /> Pending
</span>
<p className="text-xs text-amber-600 mt-1">{paymentBadge.pendingRent} ({paymentBadge.pendingRentDays}d)</p>
</div>
) : (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
<CheckCircle className="w-3 h-3" /> Clear
</span>
)}
</td>
{/* <td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${penaltyBadge.style}`}>
{penaltyBadge.label}
</span>
<span className="text-sm text-slate-600 capitalize">{rental.subscriptionType}</span>
</td> */}
<td className="px-4 py-3">
{(() => {
const rent = rental[rental.subscriptionType === 'daily' ? 'dailyRate' : rental.subscriptionType === 'weekly' ? 'weeklyRate' : 'monthlyRate'];
const due = rental.pendingRent || 0;
const penalty = rental.penaltyAmount || 0;
const totalDue = due + penalty;
if (totalDue > 0) {
return (
<div>
<span className="text-sm font-medium text-amber-600">{totalDue.toLocaleString()}</span>
<p className="text-xs text-slate-400">{rental.subscriptionType} {rent}/{(rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'wk' : 'mo')}</p>
{penalty > 0 && <span className="text-xs text-red-500">+{penalty} penalty</span>}
</div>
);
}
return (
<div>
<span className="text-sm font-medium text-slate-700">{rent.toLocaleString()}</span>
<p className="text-xs text-slate-400 capitalize">{rental.subscriptionType}</p>
</div>
);
})()}
</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusBadge.style}`}>
{statusBadge.label}
@@ -698,8 +702,11 @@ export default function RentalsPage() {
<div className="md:hidden p-3 space-y-3">
{filteredRentals.map(rental => {
const statusBadge = getStatusBadge(rental.status);
const paymentBadge = getPaymentStatusBadge(rental.paymentStatus, rental.pendingRent, rental.pendingRentDays);
const typeBadge = getTypeBadge(rental.type);
const rent = rental[rental.subscriptionType === 'daily' ? 'dailyRate' : rental.subscriptionType === 'weekly' ? 'weeklyRate' : 'monthlyRate'];
const due = rental.pendingRent || 0;
const penalty = rental.penaltyAmount || 0;
const totalDue = due + penalty;
return (
<div key={rental.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
<div className="flex items-center justify-between">
@@ -744,14 +751,17 @@ export default function RentalsPage() {
{rental.depositPaid ? 'Paid' : 'Unpaid'}
</span>
</div>
{(paymentBadge.pendingRent && paymentBadge.pendingRent > 0) ? (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
<AlertTriangle className="w-3 h-3" /> {paymentBadge.pendingRent}
</span>
{totalDue > 0 ? (
<div className="text-right">
<span className="text-sm font-medium text-amber-600">{totalDue.toLocaleString()}</span>
<p className="text-xs text-slate-400">{rental.subscriptionType} {rent}/{(rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'wk' : 'mo')}</p>
{penalty > 0 && <span className="text-xs text-red-500">+{penalty}</span>}
</div>
) : (
<span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700">
<CheckCircle className="w-3 h-3" /> Clear
</span>
<div className="text-right">
<span className="text-sm font-medium text-slate-700">{rent.toLocaleString()}</span>
<p className="text-xs text-slate-400 capitalize">{rental.subscriptionType}</p>
</div>
)}
</div>