From 93da843e836f23fb293a738c3f6fd720087d155f Mon Sep 17 00:00:00 2001
From: Daniele Scasciafratte <mte90net@gmail.com>
Date: Mon, 17 Feb 2025 15:26:57 +0100
Subject: [PATCH] fix(ui): set label for ViewUserSpend

---
 ui/litellm-dashboard/src/components/usage.tsx           | 1 +
 ui/litellm-dashboard/src/components/user_dashboard.tsx  | 1 -
 ui/litellm-dashboard/src/components/view_user_spend.tsx | 5 +++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 053f69c256..20bb27df2d 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -636,6 +636,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
                   userSpend={totalMonthlySpend}
                   selectedTeam={null}
                   userMaxBudget={null}
+                  label="Monthly Usage"
                 />
               </Col>
               <Col numColSpan={2}>
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index 8b9f5e328f..c0e55afe42 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -13,7 +13,6 @@ import { fetchTeams } from "./common_components/fetch_teams";
 import { Grid, Col, Card, Text, Title } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
-import ViewUserSpend from "./view_user_spend";
 import ViewUserTeam from "./view_user_team";
 import DashboardTeam from "./dashboard_default_team";
 import Onboarding from "../app/onboarding/page";
diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx
index b734239f20..570f6fe965 100644
--- a/ui/litellm-dashboard/src/components/view_user_spend.tsx
+++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx
@@ -42,8 +42,9 @@ interface ViewUserSpendProps {
     userSpend: number | null;  
     userMaxBudget: number | null;  
     selectedTeam: any | null;
+    label: string | null;
 }
-const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessToken, userSpend, userMaxBudget, selectedTeam }) => {
+const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessToken, userSpend, userMaxBudget, selectedTeam, label }) => {
     console.log(`userSpend: ${userSpend}`)
     let [spend, setSpend] = useState(userSpend !== null ? userSpend : 0.0);
     const [maxBudget, setMaxBudget] = useState(selectedTeam ? selectedTeam.max_budget : null);
@@ -147,7 +148,7 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessT
        <div className="flex justify-between gap-x-6">
         <div>
           <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
-            Total Spend
+          {label}
           </p>
           <p className="text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">
             ${roundedSpend}