scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-08 22:21:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 78

fix: putting new cards in the same place as the current ones, fixing spacing

Browse source
This commit is contained in:
Ryan Crabbe 2026-03-09 14:06:53 -07:00
parent c3fd70a4b0
commit af7609d856
1 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
View file

@ -630,12 +630,6 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
{userSpendData.metadata?.total_failed_requests?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Total Tokens</Title>
<Text className="text-2xl font-bold mt-2">
{userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Average Cost per Request</Title>
<Text className="text-2xl font-bold mt-2">
@ -646,39 +640,47 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
)}
</Text>
</Card>
</Grid>
</Card>
</Col>
<Col numColSpan={2}>
<Card>
<Title>Token Breakdown</Title>
<Grid numItems={4} className="gap-4 mt-4">
<Card>
<Title>Input Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-blue-600">
{userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Output Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-cyan-600">
{userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Cache Read Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-green-600">
{userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
<Card>
<Title>Cache Write Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-purple-600">
{userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
<Title>Total Tokens</Title>
<Text className="text-2xl font-bold mt-2">
{userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
</Text>
</Card>
</Grid>
<div className="flex justify-center gap-4 mt-4">
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Input Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-blue-600">
{userSpendData.metadata?.total_prompt_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Output Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-cyan-600">
{userSpendData.metadata?.total_completion_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Read Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-green-600">
{userSpendData.metadata?.total_cache_read_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
<div className="flex-1 max-w-[20%]">
<Card>
<Title>Cache Write Tokens</Title>
<Text className="text-2xl font-bold mt-2 text-purple-600">
{userSpendData.metadata?.total_cache_creation_input_tokens?.toLocaleString() || 0}
</Text>
</Card>
</div>
</div>
</Card>
</Col>