From 08d37e1b0e3563d22ce4e11949734e7c9f3bbcc4 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 8 May 2024 17:34:30 -0700
Subject: [PATCH] ui - filter usage by day

---
 ui/litellm-dashboard/src/components/usage.tsx | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 1bd8838b6..9efb346a4 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -132,9 +132,21 @@ const UsagePage: React.FC<UsagePageProps> = ({
   let startTime = formatDate(firstDay);
   let endTime = formatDate(lastDay);
 
-  // const updateEndUserUsage(startTime: string, endTime: string) {
-    
-  // }
+  const updateEndUserData = async (startTime:  Date | undefined, endTime:  Date | undefined) => {
+    if (!startTime || !endTime || !accessToken) {
+      return;
+    }
+
+    let newTopUserData = await adminTopEndUsersCall(
+      accessToken,
+      null,
+      startTime.toISOString(),
+      endTime.toISOString()
+    )
+    console.log("End user data updated successfully", newTopUserData);
+    setTopUsers(newTopUserData);
+  
+  }
 
   function formatDate(date: Date) {
     const year = date.getFullYear();
@@ -361,7 +373,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
                   value={dateValue} 
                   onValueChange={(value) => {
                     setDateValue(value);
-                    updateModelMetrics(selectedModelGroup, value.from, value.to); // Call updateModelMetrics with the new date range
+                    updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range
                   }}
                 />
                  <Text className="mt-4">End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls</Text>
@@ -384,7 +396,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
                       <TableRow key={index}>
                         <TableCell>{user.end_user}</TableCell>
                         <TableCell>{user.total_spend?.toFixed(4)}</TableCell>
-                        <TableCell>{user.total_events}</TableCell>
+                        <TableCell>{user.total_count}</TableCell>
                       </TableRow>
                     ))}
                   </TableBody>