feat: implement comprehensive admin CRUD interfaces for swap stations, users, merchants, and roles with sidebar navigation updates

src/app/admin/rentals/page.tsx

@@ -262,7 +262,15 @@ const generateInvoice = () => {
       cancelled: 'bg-slate-100 text-slate-700',
       locked: 'bg-red-100 text-red-700',
     };
-    return styles[status];
+    const labels: Record<string, string> = {
+      active: 'Active',
+      pending: 'Pending',
+      completed: 'Completed',
+      disputed: 'Disputed',
+      cancelled: 'Cancelled',
+      locked: 'Locked',
+    };
+    return { style: styles[status], label: labels[status] || status };
   };
 
   return (
@@ -383,9 +391,14 @@ const generateInvoice = () => {
                       <span className="text-sm font-semibold text-green-600">৳{rental.totalPaid.toLocaleString()}</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 ${getStatusBadge(rental.status)}`}>
-                        {rental.status}
-                      </span>
+                      {(() => {
+                        const { style, label } = getStatusBadge(rental.status);
+                        return (
+                          <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${style}`}>
+                            {label}
+                          </span>
+                        );
+                      })()}
                     </td>
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-1">