= ({
-
+
= ({ userID, userSpendData }) => {
+const ViewUserSpend: React.FC = ({ 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 (
<>