build(ui): user_dashboard.tsx

fix default team spend calc

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

@@ -1,6 +1,10 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import { userInfoCall, modelAvailableCall, getTotalSpendCall } from "./networking";
+import {
+  userInfoCall,
+  modelAvailableCall,
+  getTotalSpendCall,
+} from "./networking";
 import { Grid, Col, Card, Text, Title } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
@@ -19,7 +23,6 @@ type UserSpendData = {
   max_budget?: number | null;
 };
 
-
 interface UserDashboardProps {
   userID: string | null;
   userRole: string | null;
@@ -35,8 +38,8 @@ interface UserDashboardProps {
 type TeamInterface = {
   models: any[];
   team_id: null;
-  team_alias: String
-}
+  team_alias: String;
+};
 
 const UserDashboard: React.FC<UserDashboardProps> = ({
   userID,
@@ -63,10 +66,10 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
   const [teamSpend, setTeamSpend] = useState<number | null>(null);
   const [userModels, setUserModels] = useState<string[]>([]);
   const defaultTeam: TeamInterface = {
-    "models": [],
-    "team_alias": "Default Team",
-    "team_id": null
-  }
+    models: [],
+    team_alias: "Default Team",
+    team_id: null,
+  };
   const [selectedTeam, setSelectedTeam] = useState<any | null>(
     teams ? teams[0] : defaultTeam
   );
@@ -137,7 +140,14 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
       } else {
         const fetchData = async () => {
           try {
-            const response = await userInfoCall(accessToken, userID, userRole, false, null, null);
+            const response = await userInfoCall(
+              accessToken,
+              userID,
+              userRole,
+              false,
+              null,
+              null
+            );
             console.log(
               `received teams in user dashboard: ${Object.keys(
                 response
@@ -152,12 +162,12 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             }
             setKeys(response["keys"]); // Assuming this is the correct path to your data
             setTeams(response["teams"]);
-            const teamsArray = [...response['teams']];
+            const teamsArray = [...response["teams"]];
             if (teamsArray.length > 0) {
-                console.log(`response['teams']: ${teamsArray}`);
-                setSelectedTeam(teamsArray[0]);
+              console.log(`response['teams']: ${teamsArray}`);
+              setSelectedTeam(teamsArray[0]);
             } else {
-                setSelectedTeam(defaultTeam);
+              setSelectedTeam(defaultTeam);
             }
             sessionStorage.setItem(
               "userData" + userID,
@@ -194,22 +204,30 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
         fetchData();
       }
     }
-    
   }, [userID, token, accessToken, keys, userRole]);
 
   useEffect(() => {
     // This code will run every time selectedTeam changes
-    if (keys !== null && selectedTeam !== null && selectedTeam !== undefined) {
+    if (
+      keys !== null &&
+      selectedTeam !== null &&
+      selectedTeam !== undefined &&
+      selectedTeam.team_id !== null
+    ) {
       let sum = 0;
       for (const key of keys) {
-        if (selectedTeam.hasOwnProperty('team_id') && key.team_id !== null && key.team_id === selectedTeam.team_id) {
+        if (
+          selectedTeam.hasOwnProperty("team_id") &&
+          key.team_id !== null &&
+          key.team_id === selectedTeam.team_id
+        ) {
           sum += key.spend;
         }
       }
       setTeamSpend(sum);
     } else if (keys !== null) {
       // sum the keys which don't have team-id set (default team)
-      let sum = 0 
+      let sum = 0;
       for (const key of keys) {
         sum += key.spend;
       }
@@ -245,9 +263,8 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
   }
 
   console.log("inside user dashboard, selected team", selectedTeam);
-  console.log(`teamSpend: ${teamSpend}`)
   return (
-      <div className="w-full mx-4">
+    <div className="w-full mx-4">
       <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
         <Col numColSpan={1}>
           <ViewUserTeam
@@ -261,8 +278,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             userRole={userRole}
             accessToken={accessToken}
             userSpend={teamSpend}
-            selectedTeam = {selectedTeam ? selectedTeam : null}
-
+            selectedTeam={selectedTeam ? selectedTeam : null}
           />
 
           <ViewKeyTable
@@ -283,11 +299,15 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             data={keys}
             setData={setKeys}
           />
-          <DashboardTeam teams={teams} setSelectedTeam={setSelectedTeam} userRole={userRole}/>
+          <DashboardTeam
+            teams={teams}
+            setSelectedTeam={setSelectedTeam}
+            userRole={userRole}
+          />
         </Col>
       </Grid>
     </div>
   );
 };
 
-export default UserDashboard;
+export default UserDashboard;