Show user budget on usage

ui/litellm-dashboard/src/app/(dashboard)/hooks/users/useCurrentUser.ts

@@ -0,0 +1,19 @@
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { UserInfo, userInfoCall } from "@/components/networking";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { createQueryKeys } from "../common/queryKeysFactory";
+
+const userKeys = createQueryKeys("users");
+
+export const useCurrentUser = (): UseQueryResult<UserInfo> => {
+  const { accessToken, userId, userRole } = useAuthorized();
+  return useQuery<UserInfo>({
+    queryKey: userKeys.detail(userId!),
+    queryFn: async () => {
+      const data = await userInfoCall(accessToken!, userId!, userRole!, false, null, null);
+      console.log(`userInfo: ${JSON.stringify(data)}`);
+      return data.user_info;
+    },
+    enabled: Boolean(accessToken && userId && userRole),
+  });
+};

ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx

@@ -52,6 +52,7 @@ import { valueFormatterSpend } from "../utils/value_formatters";
 import EntityUsage, { EntityList } from "./EntityUsage/EntityUsage";
 import TopKeyView from "./EntityUsage/TopKeyView";
 import { UsageOption, UsageViewSelect } from "./UsageViewSelect/UsageViewSelect";
+import { useCurrentUser } from "@/app/(dashboard)/hooks/users/useCurrentUser";
 
 interface UsagePageProps {
   teams: Team[];
@@ -82,6 +83,9 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
   const [allTags, setAllTags] = useState<EntityList[]>([]);
   const { data: customers = [] } = useCustomers();
   const { data: agentsResponse } = useAgents();
+  const { data: currentUser } = useCurrentUser();
+  console.log(`currentUser: ${JSON.stringify(currentUser)}`);
+  console.log(`currentUser max budget: ${currentUser?.max_budget}`);
   const [modelViewType, setModelViewType] = useState<"groups" | "individual">("groups");
   const [isCloudZeroModalOpen, setIsCloudZeroModalOpen] = useState(false);
   const [isGlobalExportModalOpen, setIsGlobalExportModalOpen] = useState(false);
@@ -477,7 +481,11 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                         )}
                       </Text>
 
-                      <ViewUserSpend userSpend={totalSpend} selectedTeam={null} userMaxBudget={null} />
+                      <ViewUserSpend
+                        userSpend={totalSpend}
+                        selectedTeam={null}
+                        userMaxBudget={currentUser?.max_budget || null}
+                      />
                     </Col>
 
                     <Col numColSpan={2}>

ui/litellm-dashboard/src/components/view_user_spend.tsx

@@ -17,7 +17,6 @@ interface ViewUserSpendProps {
 }
 const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userSpend, userMaxBudget, selectedTeam }) => {
   const { accessToken, userRole, userId: userID } = useAuthorized();
-  console.log(`userSpend: ${userSpend}`);
   let [spend, setSpend] = useState(userSpend !== null ? userSpend : 0.0);
   const [maxBudget, setMaxBudget] = useState(
     selectedTeam ? Number(formatNumberWithCommas(selectedTeam.max_budget, 4)) : null,
@@ -61,6 +60,8 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userSpend, userMaxBudget,
           setMaxBudget(selectedTeam.max_budget);
         }
       }
+    } else {
+      setMaxBudget(userMaxBudget);
     }
   }, [selectedTeam, userMaxBudget]);
   const [userModels, setUserModels] = useState([]);