refactor: implement responsive mobile view and hide add biker button for bikers management page

src/app/admin/bikers/page.tsx

@@ -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>
+                          </Link>
-                        <button onClick={() => handleEditBiker(biker)} className="p-2 hover:bg-slate-100 rounded-lg" title="Edit">
+                          <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 => (

src/app/admin/rentals/page.tsx

@@ -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}`}>
+                      <span className="text-sm text-slate-600 capitalize">{rental.subscriptionType}</span>
-                        {penaltyBadge.label}
-                      </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) ? (
+                  {totalDue > 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">
+                    <div className="text-right">
-                      <AlertTriangle className="w-3 h-3" /> ৳{paymentBadge.pendingRent}
+                      <span className="text-sm font-medium text-amber-600">৳{totalDue.toLocaleString()}</span>
-                    </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">
+                    <div className="text-right">
-                      <CheckCircle className="w-3 h-3" /> Clear
+                      <span className="text-sm font-medium text-slate-700">৳{rent.toLocaleString()}</span>
-                    </span>
+                      <p className="text-xs text-slate-400 capitalize">{rental.subscriptionType}</p>
+                    </div>
                   )}
                 </div>