diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/users/useCurrentUser.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/users/useCurrentUser.ts new file mode 100644 index 0000000000..f4028ada0d --- /dev/null +++ b/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 => { + const { accessToken, userId, userRole } = useAuthorized(); + return useQuery({ + 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), + }); +}; diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx index a710781411..a9c86c064e 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx +++ b/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 = ({ teams, organizations }) => { const [allTags, setAllTags] = useState([]); 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 = ({ teams, organizations }) => { )} - + diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx index 51e87f8bc0..c05850361a 100644 --- a/ui/litellm-dashboard/src/components/view_user_spend.tsx +++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx @@ -17,7 +17,6 @@ interface ViewUserSpendProps { } const ViewUserSpend: React.FC = ({ 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 = ({ userSpend, userMaxBudget, setMaxBudget(selectedTeam.max_budget); } } + } else { + setMaxBudget(userMaxBudget); } }, [selectedTeam, userMaxBudget]); const [userModels, setUserModels] = useState([]);