From 33c4f0faaee282f54f6be5d66a8851177d6c89ae Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 17:22:40 -0800
Subject: [PATCH] (ui) show key spend reports

---
 ui/litellm-dashboard/src/components/view_key_table.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index e7e2cc967..8522a6bb1 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -6,6 +6,7 @@ import {
   Badge,
   Card,
   Table,
+  Button,
   TableBody,
   TableCell,
   TableHead,
@@ -15,6 +16,7 @@ import {
   Title,
   Icon,
 } from "@tremor/react";
+import ViewKeySpendReport from "./view_key_spend_report";
 
 // Define the props type
 interface ViewKeyTableProps {
@@ -110,9 +112,13 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                   <Icon
                     onClick={() => handleDelete(item.token)}
                     icon={TrashIcon}
-                    size="xs"
+                    size="sm"
                   />
                 </TableCell>
+                <TableCell>
+                  <ViewKeySpendReport token={item.token} accessToken={accessToken} keySpend={item.spend} keyBudget={item.max_budget} keyName={item.key_name} />
+                
+                </TableCell>
               </TableRow>
             );
           })}