[FEAT] ui - view total proxy spend / budget

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

@@ -162,3 +162,32 @@ export const keySpendLogsCall = async (accessToken: String, token: String) => {
     throw error;
   }
 };
+
+
+
+export const spendUsersCall = async (accessToken: String, userID: String) => {
+  try {
+    const url = proxyBaseUrl ? `${proxyBaseUrl}/spend/users` : `/spend/users`;
+    console.log("in spendUsersCall:", url);
+    const response = await fetch(`${url}/?user_id=${userID}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+    if (!response.ok) {
+      const errorData = await response.text();
+      message.error(errorData);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error("Failed to get spend for user", error);
+    throw error;
+  }
+};
+

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

@@ -120,7 +120,7 @@ const UserDashboard = () => {
       <Navbar userID={userID} userRole={userRole} userEmail={userEmail} />
       <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
         <Col numColSpan={1}>
-          <ViewUserSpend userID={userID} userSpendData={userSpendData} />
+          <ViewUserSpend userID={userID} userSpendData={userSpendData} userRole={userRole} accessToken={accessToken}/>
           <ViewKeyTable
             userID={userID}
             accessToken={accessToken}

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { keyDeleteCall } from "./networking";
 import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
 import { DonutChart } from "@tremor/react";
@@ -17,6 +17,7 @@ import {
   Title,
   Icon,
 } from "@tremor/react";
+import { spendUsersCall }  from "./networking";
 
 
 // Define the props type
@@ -28,13 +29,33 @@ interface UserSpendData {
 interface ViewUserSpendProps {
     userID: string | null;
     userSpendData: UserSpendData | null; // Use the UserSpendData interface here
+    userRole: string | null;
+    accessToken: string;
 }
-const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData }) => {
+const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData, userRole, accessToken }) => {
     console.log("User SpendData:", userSpendData);
-    const spend = userSpendData?.spend;
-    const maxBudget = userSpendData?.max_budget || null;
+    const [spend, setSpend] = useState(userSpendData?.spend);
+    const [maxBudget, setMaxBudget] = useState(userSpendData?.max_budget || null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (userRole === "Admin") {
+                try {
+                    const data = await spendUsersCall(accessToken, "litellm-proxy-budget");
+                    console.log("Result from callSpendUsers:", data);
+                    const total_budget = data[0]
+                    setSpend(total_budget?.spend);
+                    setMaxBudget(total_budget?.max_budget || null);
+                } catch (error) {
+                    console.error("Failed to get spend for user", error);
+                }
+            }
+        };
+
+        fetchData();
+    }, [userRole, accessToken, userID]);
+
     const displayMaxBudget = maxBudget !== null ? `$${maxBudget} limit` : "No limit";
-    const displayText = `$${spend} / ${displayMaxBudget}`;
 
     return (
         <>