scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

added column "Your Role" with admin and member badges

Browse source
This commit is contained in:
Achintya Rajan 2025-10-09 16:26:11 -07:00
parent 87b0ff6ab0
commit dce17a8d16
4 changed files with 75 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/litellm-dashboard/src/app/(dashboard)/teams/TeamsView.tsx
View file

@ -307,6 +307,7 @@ const TeamsView: React.FC<TeamProps> = ({
currentOrg={currentOrg}
perTeamInfo={perTeamInfo}
userRole={userRole}
userId={userID}
setSelectedTeamId={setSelectedTeamId}
setEditTeam={setEditTeam}
onDeleteTeam={handleDelete}

5
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
View file

@ -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 &&

47
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge.tsx Normal file
View file

@ -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;

22
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx Normal file
View file

@ -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;