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] (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 e90401e5b..46045b549 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 92fd13067..7f36511e9 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>
             );
           })}