From 06a0daedfe36b889fb27b093f21ac04715151068 Mon Sep 17 00:00:00 2001
From: Yared Yemane <yaredyemane1@gmail.com>
Date: Tue, 14 Apr 2026 06:27:30 -0700
Subject: [PATCH] refine role management cards with richer metadata

Improve role card visual hierarchy and add clearer metadata (role type, id, created date, description preview) so the list feels less sparse and more informative.

Made-with: Cursor
---
 src/pages/role-management/RolesListPage.tsx | 42 ++++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/pages/role-management/RolesListPage.tsx b/src/pages/role-management/RolesListPage.tsx
index be965c2..2d2107b 100644
--- a/src/pages/role-management/RolesListPage.tsx
+++ b/src/pages/role-management/RolesListPage.tsx
@@ -302,7 +302,7 @@ export function RolesListPage() {
               {roles.map((role) => (
                 <Card
                   key={role.id}
-                  className="overflow-hidden shadow-sm transition-shadow hover:shadow-md"
+                  className="overflow-hidden border border-grayScale-100 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
                 >
                   <div
                     className={cn(
@@ -312,7 +312,7 @@ export function RolesListPage() {
                         : "bg-gradient-to-r from-brand-500 to-brand-600",
                     )}
                   />
-                  <CardContent className="p-5">
+                  <CardContent className="space-y-4 p-5">
                     <div className="flex items-start justify-between gap-3">
                       <div className="flex items-center gap-2.5">
                         <div
@@ -330,23 +330,37 @@ export function RolesListPage() {
                           )}
                         </div>
                         <div>
-                          <h3 className="text-sm font-semibold text-grayScale-700">{role.name}</h3>
-                          <p className="mt-0.5 text-xs text-grayScale-400 line-clamp-1">
-                            {role.description}
+                          <h3 className="text-sm font-semibold uppercase tracking-wide text-grayScale-700">
+                            {role.name}
+                          </h3>
+                          <p className="mt-0.5 text-xs text-grayScale-500 line-clamp-2">
+                            {role.description?.trim() || "No description provided for this role."}
                           </p>
                         </div>
                       </div>
-                      {role.is_system && (
-                        <Badge variant="warning" className="shrink-0 text-[10px]">
-                          System
-                        </Badge>
-                      )}
+                      <Badge
+                        variant={role.is_system ? "warning" : "outline"}
+                        className="shrink-0 text-[10px]"
+                      >
+                        {role.is_system ? "System" : "Custom"}
+                      </Badge>
                     </div>
 
-                    <div className="mt-4 flex items-center justify-between">
-                      <span className="text-[11px] text-grayScale-400">
-                        Created {new Date(role.created_at).toLocaleDateString()}
-                      </span>
+                    <div className="grid grid-cols-2 gap-2 rounded-xl border border-grayScale-100 bg-grayScale-50/70 p-2.5 text-[11px]">
+                      <div>
+                        <p className="text-grayScale-400">Role ID</p>
+                        <p className="font-semibold text-grayScale-700">#{role.id}</p>
+                      </div>
+                      <div>
+                        <p className="text-grayScale-400">Created</p>
+                        <p className="font-semibold text-grayScale-700">
+                          {new Date(role.created_at).toLocaleDateString()}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <span className="text-[11px] text-grayScale-400">Open details to view permissions</span>
                       <Button
                         variant="outline"
                         size="sm"