refactor: implement responsive mobile view and hide add biker button for bikers management page
This commit is contained in:
sazzadulalambd
@@ -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,7 +636,8 @@ export default function BikersPage() {
|
||||
</div>
|
||||
|
||||
{viewMode === 'table' ? (
|
||||
<div className="overflow-x-auto">
|
||||
<>
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
@@ -720,12 +721,12 @@ export default function BikersPage() {
|
||||
<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">
|
||||
<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" />
|
||||
</button>
|
||||
<button onClick={() => handleEditBiker(biker)} className="p-2 hover:bg-slate-100 rounded-lg" title="Edit">
|
||||
</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" />
|
||||
</button>
|
||||
</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>
|
||||
@@ -736,6 +737,78 @@ export default function BikersPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden p-4">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{sortedBikers.map(biker => (
|
||||
<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="font-semibold text-slate-700">{biker.name}</p>
|
||||
<p className="text-sm text-slate-400">{biker.phone}</p>
|
||||
</div>
|
||||
</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>
|
||||
{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>
|
||||
)}
|
||||
</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>
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{sortedBikers.map(biker => (
|
||||
|
||||
Reference in New Issue
Block a user