scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-10 03:28:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 84

feat(team_member_view.tsx): show team member spend + budget on team info

Browse source
This commit is contained in:
Krrish Dholakia 2025-06-20 18:28:06 -07:00
parent 8e398607b2
commit e986d12ad5
2 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/litellm-dashboard/src/components/team/team_info.tsx
View file

@ -38,6 +38,23 @@ import VectorStoreSelector from "../vector_store_management/VectorStoreSelector"
import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
import PremiumVectorStoreSelector from "../common_components/PremiumVectorStoreSelector";
export interface TeamMembership {
user_id: string;
team_id: string;
budget_id: string;
spend: number;
litellm_budget_table: {
budget_id: string;
soft_budget: number | null;
max_budget: number | null;
max_parallel_requests: number | null;
tpm_limit: number | null;
rpm_limit: number | null;
model_max_budget: Record<string, number> | null;
budget_duration: string | null;
};
}
export interface TeamData {
team_id: string;
team_info: {
@ -73,7 +90,7 @@ export interface TeamData {
} | null;
};
keys: any[];
team_memberships: any[];
team_memberships: TeamMembership[];
}
export interface TeamInfoProps {

23
ui/litellm-dashboard/src/components/team/team_member_view.tsx
View file

@ -34,6 +34,20 @@ const TeamMembersComponent: React.FC<TeamMembersComponentProps> = ({
setIsEditMemberModalVisible,
setIsAddMemberModalVisible,
}) => {
// Helper function to get spend for a user
const getUserSpend = (userId: string | null): number | null => {
if (!userId) return 0;
const membership = teamData.team_memberships.find(tm => tm.user_id === userId);
return membership?.spend || 0;
};
const getUserBudget = (userId: string | null): number | null => {
if (!userId) return null;
const membership = teamData.team_memberships.find(tm => tm.user_id === userId);
console.log(`membership=${membership}`);
return membership?.litellm_budget_table?.max_budget || null;
};
return (
<div className="space-y-4">
<Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
@ -43,6 +57,8 @@ const TeamMembersComponent: React.FC<TeamMembersComponentProps> = ({
<TableHeaderCell>User ID</TableHeaderCell>
<TableHeaderCell>User Email</TableHeaderCell>
<TableHeaderCell>Role</TableHeaderCell>
<TableHeaderCell>Spend (USD)</TableHeaderCell>
<TableHeaderCell>Team Member Budget (USD)</TableHeaderCell>
<TableHeaderCell></TableHeaderCell>
</TableRow>
</TableHead>
@ -59,6 +75,13 @@ const TeamMembersComponent: React.FC<TeamMembersComponentProps> = ({
<TableCell>
<Text className="font-mono">{member.role}</Text>
</TableCell>
<TableCell>
<Text className="font-mono">{getUserSpend(member.user_id) ? `$${getUserSpend(member.user_id)}` : 'No Limit'}</Text>
</TableCell>
<TableCell>
<Text className="font-mono">{getUserBudget(member.user_id) ? `$${getUserBudget(member.user_id)}` : 'No Limit'}</Text>
</TableCell>
<TableCell>
{canEditTeam && (
<>