redesign

admin dashboard

apps/admin/src/components/users/UserGrid.tsx

@@ -69,6 +69,7 @@ export function UserGrid({
         filter: "agTextColumnFilter",
         sortable: true,
         cellRenderer: (params: any) => {
+          if (!params.value) return null;
           const roleColors = {
             admin: "bg-purple-100 text-purple-800",
             trainer: "bg-blue-100 text-blue-800",
@@ -77,7 +78,14 @@ export function UserGrid({
           const colorClass =
             roleColors[params.value as keyof typeof roleColors] ||
             "bg-gray-100 text-gray-800";
-          return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
+
+          const label = params.value.charAt(0).toUpperCase() + params.value.slice(1);
+
+          return (
+            <span className={`px-2 py-1 rounded-full text-xs font-medium ${colorClass}`}>
+              {label}
+            </span>
+          );
         },
         minWidth: 120,
       },
@@ -87,6 +95,7 @@ export function UserGrid({
         filter: "agTextColumnFilter",
         sortable: true,
         minWidth: 130,
+        valueFormatter: (params: any) => params.value || "N/A",
       },
       {
         headerName: "Membership",
@@ -94,17 +103,24 @@ export function UserGrid({
         filter: "agTextColumnFilter",
         sortable: true,
         cellRenderer: (params: any) => {
-          if (!params.value || params.value === "N/A") return "N/A";
+          if (!params.value || params.value === "N/A") return <span className="text-gray-400">N/A</span>;
 
           const membershipColors = {
-            vip: "bg-yellow-100 text-yellow-800",
-            premium: "bg-blue-100 text-blue-800",
-            basic: "bg-gray-100 text-gray-800",
+            vip: "bg-yellow-100 text-yellow-800 border-yellow-200",
+            premium: "bg-blue-100 text-blue-800 border-blue-200",
+            basic: "bg-slate-100 text-slate-800 border-slate-200",
           };
           const colorClass =
             membershipColors[params.value as keyof typeof membershipColors] ||
             "bg-gray-100 text-gray-800";
-          return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
+
+          const label = params.value.charAt(0).toUpperCase() + params.value.slice(1);
+
+          return (
+            <span className={`px-2 py-1 rounded-full text-xs font-medium border ${colorClass}`}>
+              {label}
+            </span>
+          );
         },
         minWidth: 120,
       },
@@ -114,17 +130,25 @@ export function UserGrid({
         filter: "agTextColumnFilter",
         sortable: true,
         cellRenderer: (params: any) => {
-          if (!params.value || params.value === "N/A") return "N/A";
+          if (!params.value || params.value === "N/A") return <span className="text-gray-400">N/A</span>;
 
           const statusColors = {
             active: "bg-green-100 text-green-800",
             inactive: "bg-red-100 text-red-800",
-            suspended: "bg-yellow-100 text-yellow-800",
+            suspended: "bg-orange-100 text-orange-800",
+            expired: "bg-gray-100 text-gray-800",
           };
           const colorClass =
             statusColors[params.value as keyof typeof statusColors] ||
             "bg-gray-100 text-gray-800";
-          return `<span class="px-2 py-1 rounded text-xs font-medium ${colorClass}">${params.value}</span>`;
+
+          const label = params.value.charAt(0).toUpperCase() + params.value.slice(1);
+
+          return (
+            <span className={`px-2 py-1 rounded-full text-xs font-medium ${colorClass}`}>
+              {label}
+            </span>
+          );
         },
         minWidth: 120,
       },