From 3d890ff396a6bcbb64625bc674e7cc9179499f29 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 18 Mar 2024 18:28:30 -0700
Subject: [PATCH] (ui) show spend when budget not set

---
 .../src/components/networking.tsx             | 34 +++++++++++++++++++
 .../src/components/user_dashboard.tsx         | 10 ++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index a10fa42c0..2559619fa 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -206,6 +206,40 @@ export const userInfoCall = async (
   }
 };
 
+export const getTotalSpendCall = async (
+  accessToken: String,
+) => {
+  /**
+   * Get all models on proxy
+   */
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/global/spend` : `/global/spend`;
+
+    //message.info("Requesting model data");
+    const response = await fetch(url, {
+      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();
+    //message.info("Received model data");
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
 export const modelInfoCall = async (
   accessToken: String,
   userID: String,
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index 61e0fe235..d164a35a1 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import { userInfoCall, modelAvailableCall } from "./networking";
+import { userInfoCall, modelAvailableCall, getTotalSpendCall } from "./networking";
 import { Grid, Col, Card, Text } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
@@ -129,7 +129,13 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
                 response
               )}; team values: ${Object.entries(response.teams)}`
             );
-            setUserSpendData(response["user_info"]);
+            if (userRole == "Admin") {
+              const globalSpend = await getTotalSpendCall(accessToken);
+              setUserSpendData(globalSpend);
+              console.log("globalSpend:", globalSpend);
+            } else {
+              setUserSpendData(response["user_info"]);
+            }
             setKeys(response["keys"]); // Assuming this is the correct path to your data
             setTeams(response["teams"]);
             setSelectedTeam(response["teams"] ? response["teams"][0] : null);