From e986d12ad5b07c676f4cac5e16745939d7473dee Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Fri, 20 Jun 2025 18:28:06 -0700
Subject: [PATCH] feat(team_member_view.tsx): show team member spend + budget
 on team info

---
 .../src/components/team/team_info.tsx         | 19 ++++++++++++++-
 .../src/components/team/team_member_view.tsx  | 23 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx
index 4be82817826..788ab81aeb7 100644
--- a/ui/litellm-dashboard/src/components/team/team_info.tsx
+++ b/ui/litellm-dashboard/src/components/team/team_info.tsx
@@ -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 {
diff --git a/ui/litellm-dashboard/src/components/team/team_member_view.tsx b/ui/litellm-dashboard/src/components/team/team_member_view.tsx
index cd6818cb284..d9f63095339 100644
--- a/ui/litellm-dashboard/src/components/team/team_member_view.tsx
+++ b/ui/litellm-dashboard/src/components/team/team_member_view.tsx
@@ -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 && (
                     <>