From 78d1924c2c383506549c10fb71b0570b339dc75e Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Tue, 12 May 2026 20:39:10 +0600
Subject: [PATCH] refactor: implement responsive mobile view and hide add biker
 button for bikers management page

---
 src/app/admin/bikers/page.tsx | 259 ++++++++++++++++++++++------------
 1 file changed, 166 insertions(+), 93 deletions(-)

diff --git a/src/app/admin/bikers/page.tsx b/src/app/admin/bikers/page.tsx
index b78970a..068bda8 100644
--- a/src/app/admin/bikers/page.tsx
+++ b/src/app/admin/bikers/page.tsx
@@ -428,7 +428,7 @@ export default function BikersPage() {
       biker.gpsDeviceId?.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesStatus = statusFilter === 'all' || biker.status === statusFilter;
     const matchesKyc = kycFilter === 'all' || biker.kycStatus === kycFilter;
-    const matchesRent = (statusFilter === 'rent_pending') 
+    const matchesRent = (statusFilter === 'rent_pending')
       ? (biker.pendingRent && biker.pendingRent > 0)
       : true;
     return matchesSearch && matchesStatus && matchesKyc && matchesRent;
@@ -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">
@@ -619,7 +619,7 @@ export default function BikersPage() {
               <option value="pending">Pending</option>
               <option value="rejected">Rejected</option>
             </select>
-            <button 
+            <button
               onClick={() => setViewMode(viewMode === 'table' ? 'cards' : 'table')}
               className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2"
             >
@@ -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 => (