[US-14.3 / OBT-248] Role tag on user cards: Member/Manager/Admin

src/components/pages/UsersPage/UserCard.tsx

@@ -1,6 +1,13 @@
 import { useNavigate } from "react-router"
-import { Calendar, Shield, ChevronRight } from "lucide-react"
-import type { UserListResponse, UserRoleResponse, AppResponse } from "@/types"
+import {
+  Calendar,
+  Shield,
+  ChevronRight,
+  UserCog,
+  User as UserIcon,
+  type LucideIcon,
+} from "lucide-react"
+import type { UserListResponse, UserRoleResponse, AppResponse, UserRole } from "@/types"
 import { cn } from "@/utils/cn"
 import { Badge } from "@/components/ui/badge"
 import { card } from "@/styles"
@@ -13,6 +20,15 @@ interface UserCardProps {
   apps: AppResponse[]
 }
 
+const roleBadge: Record<
+  UserRole,
+  { variant: "admin" | "manager" | "member"; icon: LucideIcon; label: string }
+> = {
+  platform_admin: { variant: "admin", icon: Shield, label: "Admin" },
+  manager: { variant: "manager", icon: UserCog, label: "Manager" },
+  member: { variant: "member", icon: UserIcon, label: "Member" },
+}
+
 function getUniqueApps(roles: UserRoleResponse[], apps: AppResponse[]) {
   const appKeys = [...new Set(roles.map((r) => r.app_key))]
   return appKeys.map((key) => {
@@ -24,6 +40,8 @@ function getUniqueApps(roles: UserRoleResponse[], apps: AppResponse[]) {
 export function UserCard({ user, roles, apps }: UserCardProps) {
   const navigate = useNavigate()
   const userApps = getUniqueApps(roles, apps)
+  const role = user.role ?? (user.is_platform_admin ? "platform_admin" : "member")
+  const { variant, icon: RoleIcon, label } = roleBadge[role]
 
   return (
     <div
@@ -54,12 +72,10 @@ export function UserCard({ user, roles, apps }: UserCardProps) {
             <Badge variant={user.is_active ? "active" : "inactive"}>
               {user.is_active ? "Active" : "Inactive"}
             </Badge>
-            {user.is_platform_admin && (
-              <Badge variant="admin">
-                <Shield className="h-3 w-3 mr-1" />
-                Admin
-              </Badge>
-            )}
+            <Badge variant={variant}>
+              <RoleIcon className="h-3 w-3 mr-1" />
+              {label}
+            </Badge>
           </div>
         </div>
       </div>

src/components/ui/badge.tsx

@@ -13,6 +13,8 @@ const badgeVariants = cva(
         active: "bg-verde-claro/20 text-verde-claro",
         inactive: "bg-areia/30 text-verde",
         admin: "bg-telha/15 text-telha border border-telha/30",
+        manager: "bg-azul/25 text-verde border border-azul/60",
+        member: "bg-areia/30 text-verde border border-areia",
       },
     },
     defaultVariants: {

src/types/index.ts

@@ -9,6 +9,7 @@ export type {
 } from "./auth"
 
 export type {
+  UserRole,
   UserListResponse,
   UserUpdate,
   UserRoleResponse,

src/types/user.ts

@@ -1,10 +1,13 @@
+export type UserRole = "member" | "manager" | "platform_admin";
+
 export interface UserListResponse {
   id: string
   email: string
   display_name: string | null
   avatar_url: string | null
   is_active: boolean
   is_platform_admin: boolean
+  role?: UserRole;
   created_at: string
 }