From 35f957747b92105e1833cfc1bed08deb8bb8730f Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 29 Feb 2024 17:09:41 -0800
Subject: [PATCH 1/2] (feat) show usage per key

---
 .../src/components/view_key_spend_report.tsx  |  2 +-
 .../src/components/view_key_table.tsx         | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
index e90401e5bf7..46045b549db 100644
--- a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
@@ -164,7 +164,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
 
   return (
     <div>
-      <Button className="mx-auto" onClick={showModal}>
+      <Button size = "xs" onClick={showModal}>
         View Spend Report
       </Button>
       <Modal
diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index 92fd1306732..7f36511e9ba 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -86,6 +86,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
             <TableHeaderCell>Secret Key</TableHeaderCell>
             <TableHeaderCell>Spend (USD)</TableHeaderCell>
             <TableHeaderCell>Key Budget (USD)</TableHeaderCell>
+            <TableHeaderCell>Spend Report</TableHeaderCell>
             <TableHeaderCell>Team ID</TableHeaderCell>
             <TableHeaderCell>Metadata</TableHeaderCell>
             <TableHeaderCell>Models</TableHeaderCell>
@@ -122,6 +123,15 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                     <Text>Unlimited Budget</Text>
                   )}
                 </TableCell>
+                <TableCell>
+                  <ViewKeySpendReport
+                    token={item.token}
+                    accessToken={accessToken}
+                    keySpend={item.spend}
+                    keyBudget={item.max_budget}
+                    keyName={item.key_name}
+                  />
+                </TableCell>
                 <TableCell>
                   <Text>{item.team_id}</Text>
                 </TableCell>
@@ -152,15 +162,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                     size="sm"
                   />
                 </TableCell>
-                <TableCell>
-                  <ViewKeySpendReport
-                    token={item.token}
-                    accessToken={accessToken}
-                    keySpend={item.spend}
-                    keyBudget={item.max_budget}
-                    keyName={item.key_name}
-                  />
-                </TableCell>
               </TableRow>
             );
           })}

From a6394cd11e637f1b70b00161bea26fbc4e65c10b Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 29 Feb 2024 17:33:07 -0800
Subject: [PATCH 2/2] (feat) view spend per key

---
 ui/litellm-dashboard/src/components/view_key_spend_report.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
index 46045b549db..f9c7bbfac5e 100644
--- a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
@@ -183,7 +183,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
             <BarChart
               className="mt-6"
               data={data}
-              colors={["green"]}
+              colors={["blue"]}
               index="day"
               categories={["spend"]}
               yAxisWidth={48}
@@ -193,7 +193,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
         <Title className="mt-6">Top 5 Users Spend (USD)</Title>
         <Card className="mb-6">
           {userData && (
-            <BarList className="mt-6" data={userData} color="teal" />
+            <BarList className="mt-6" data={userData} color="blue" />
           )}
         </Card>
       </Modal>