forked from phoenix/litellm-mirror
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import { keyDeleteCall } from "./networking";
|
|
import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
|
|
import { DonutChart } from "@tremor/react";
|
|
import {
|
|
Badge,
|
|
Card,
|
|
Table,
|
|
Metric,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeaderCell,
|
|
TableRow,
|
|
Text,
|
|
Title,
|
|
Icon,
|
|
} from "@tremor/react";
|
|
import { spendUsersCall } from "./networking";
|
|
|
|
|
|
// Define the props type
|
|
interface UserSpendData {
|
|
spend: number; // Adjust the type accordingly based on your data
|
|
max_budget?: number | null; // Optional property with a default of null
|
|
// Add other properties if needed
|
|
}
|
|
interface ViewUserSpendProps {
|
|
userID: string | null;
|
|
userSpendData: UserSpendData | null; // Use the UserSpendData interface here
|
|
userRole: string | null;
|
|
accessToken: string;
|
|
}
|
|
const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userSpendData, userRole, accessToken }) => {
|
|
console.log("User SpendData:", userSpendData);
|
|
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";
|
|
|
|
return (
|
|
<>
|
|
<Card className="mx-auto mb-4">
|
|
<Metric>
|
|
${spend}
|
|
</Metric>
|
|
<Title>
|
|
/ {displayMaxBudget}
|
|
</Title>
|
|
</Card>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ViewUserSpend;
|
|
|