From c3fd70a4b01b0664b67ce3f087ce82c78ef18ed9 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <rcrabbe@berkeley.edu>
Date: Mon, 9 Mar 2026 13:48:32 -0700
Subject: [PATCH] feat: usage page components to view the input/output tokens
 and cache read/write tokens

---
 .../UsagePage/components/UsagePageView.tsx    | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
index 8b0d5ffac05..60d10bde082 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
@@ -404,6 +404,10 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
           aggregatedMetadata.total_successful_requests += pageData.metadata.total_successful_requests || 0;
           aggregatedMetadata.total_failed_requests += pageData.metadata.total_failed_requests || 0;
           aggregatedMetadata.total_tokens += pageData.metadata.total_tokens || 0;
+          aggregatedMetadata.total_prompt_tokens += pageData.metadata.total_prompt_tokens || 0;
+          aggregatedMetadata.total_completion_tokens += pageData.metadata.total_completion_tokens || 0;
+          aggregatedMetadata.total_cache_read_input_tokens += pageData.metadata.total_cache_read_input_tokens || 0;
+          aggregatedMetadata.total_cache_creation_input_tokens += pageData.metadata.total_cache_creation_input_tokens || 0;
         }
       }
 
@@ -646,6 +650,38 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                       </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}
+                            </Text>
+                          </Card>
+                        </Grid>
+                      </Card>
+                    </Col>
+
                     {/* Daily Spend Chart */}
                     <Col numColSpan={2}>
                       <Card>