From dce17a8d16fd8220011142c6caf834a682a64f61 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Thu, 9 Oct 2025 16:26:11 -0700
Subject: [PATCH] added column "Your Role" with admin and member badges

---
 .../src/app/(dashboard)/teams/TeamsView.tsx   |  1 +
 .../components/TeamsTable/TeamsTable.tsx      |  5 ++
 .../TeamsTable/YourRoleCell/TeamRoleBadge.tsx | 47 +++++++++++++++++++
 .../TeamsTable/YourRoleCell/YourRoleCell.tsx  | 22 +++++++++
 4 files changed, 75 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/TeamsView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/TeamsView.tsx
index 57c538c0644..fa0ec060946 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/TeamsView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/TeamsView.tsx
@@ -307,6 +307,7 @@ const TeamsView: React.FC<TeamProps> = ({
                         currentOrg={currentOrg}
                         perTeamInfo={perTeamInfo}
                         userRole={userRole}
+                        userId={userID}
                         setSelectedTeamId={setSelectedTeamId}
                         setEditTeam={setEditTeam}
                         onDeleteTeam={handleDelete}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
index 3ffdbc40629..4e8b3286c81 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
@@ -18,12 +18,14 @@ import React, { useState } from "react";
 import { type KeyResponse, Team } from "@/components/key_team_helpers/key_list";
 import { Member, Organization } from "@/components/networking";
 import ModelsCell from "@/app/(dashboard)/teams/components/TeamsTable/ModelsCell";
+import YourRoleCell from "@/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell";
 
 type TeamsTableProps = {
   teams: Team[] | null;
   currentOrg: Organization | null;
   perTeamInfo: Record<string, PerTeamInfo>;
   userRole: string | null;
+  userId: string | null;
   setSelectedTeamId: (teamId: string) => void;
   setEditTeam: (editTeam: boolean) => void;
   onDeleteTeam: (teamId: string) => void;
@@ -44,6 +46,7 @@ const TeamsTable = ({
   setSelectedTeamId,
   perTeamInfo,
   userRole,
+  userId,
   setEditTeam,
   onDeleteTeam,
 }: TeamsTableProps) => {
@@ -58,6 +61,7 @@ const TeamsTable = ({
           <TableHeaderCell>Budget (USD)</TableHeaderCell>
           <TableHeaderCell>Models</TableHeaderCell>
           <TableHeaderCell>Organization</TableHeaderCell>
+          <TableHeaderCell>Your Role</TableHeaderCell>
           <TableHeaderCell>Info</TableHeaderCell>
         </TableRow>
       </TableHead>
@@ -127,6 +131,7 @@ const TeamsTable = ({
                   </TableCell>
                   <ModelsCell team={team} />
                   <TableCell>{team.organization_id}</TableCell>
+                  <YourRoleCell team={team} userId={userId} />
                   <TableCell>
                     <Text>
                       {perTeamInfo &&
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge.tsx
new file mode 100644
index 00000000000..394b5d85348
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge.tsx
@@ -0,0 +1,47 @@
+import { ShieldIcon, UserIcon } from "lucide-react";
+
+const MEMBER_BADGE_BG = "#F3F4F6"; // gray-100
+const MEMBER_BADGE_TEXT = "#4B5563"; // gray-600
+const MEMBER_BADGE_BORDER = "#E5E7EB"; // gray-200
+
+const ADMIN_BADGE_BG = "#EEF2FF"; // indigo-50
+const ADMIN_BADGE_TEXT = "#3730A3"; // indigo-800
+const ADMIN_BADGE_BORDER = "#C7D2FE"; // indigo-200
+
+const TeamRoleBadge = (role: string | null) => {
+  const base = "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium border";
+
+  switch (role) {
+    case "admin":
+      return (
+        <span
+          className={base}
+          style={{
+            backgroundColor: ADMIN_BADGE_BG,
+            color: ADMIN_BADGE_TEXT,
+            borderColor: ADMIN_BADGE_BORDER,
+          }}
+        >
+          <ShieldIcon className="h-3 w-3 mr-1" />
+          Admin
+        </span>
+      );
+    case "user":
+    default:
+      return (
+        <span
+          className={base}
+          style={{
+            backgroundColor: MEMBER_BADGE_BG,
+            color: MEMBER_BADGE_TEXT,
+            borderColor: MEMBER_BADGE_BORDER,
+          }}
+        >
+          <UserIcon className="h-3 w-3 mr-1" />
+          Member
+        </span>
+      );
+  }
+};
+
+export default TeamRoleBadge;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx
new file mode 100644
index 00000000000..66592943fd5
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx
@@ -0,0 +1,22 @@
+import { TableCell } from "@tremor/react";
+import { Team } from "@/components/key_team_helpers/key_list";
+import TeamRoleBadge from "@/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge";
+
+interface YourRoleCellProps {
+  team: Team;
+  userId: string | null;
+}
+
+const getUserRole = (team: Team, userId: string | null): string | null => {
+  if (!userId) return null;
+  const member = team.members_with_roles?.find((m) => m.user_id === userId);
+  return member?.role ?? null;
+};
+
+const YourRoleCell = ({ team, userId }: YourRoleCellProps) => {
+  const roleBadge = TeamRoleBadge(getUserRole(team, userId));
+
+  return <TableCell>{roleBadge}</TableCell>;
+};
+
+export default YourRoleCell;