From 7bfd02350aebe2edabdadb875d6ba61421b7958b Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 8 May 2024 10:38:27 -0700
Subject: [PATCH] stash - users usage tab

---
 ui/litellm-dashboard/src/components/usage.tsx | 53 ++++++++++++++++++-
 .../src/components/view_users.tsx             | 11 ++--
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 07ca8ed14..1bd8838b6 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -3,13 +3,14 @@ import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, Tabl
 import React, { useState, useEffect } from "react";
 
 import ViewUserSpend from "./view_user_spend";
-import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab, Select, SelectItem } from "@tremor/react";
+import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab, Select, SelectItem, DateRangePicker, DateRangePickerValue } from "@tremor/react";
 import {
   userSpendLogsCall,
   keyInfoCall,
   adminSpendLogsCall,
   adminTopKeysCall,
   adminTopModelsCall,
+  adminTopEndUsersCall,
   teamSpendLogsCall,
   tagsSpendLogsCall,
   modelMetricsCall,
@@ -112,6 +113,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
   const [topTagsData, setTopTagsData] = useState<any[]>([]);
   const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
   const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
+  const [dateValue, setDateValue] = useState<DateRangePickerValue>({
+    from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), 
+    to: new Date(),
+  });
 
   const firstDay = new Date(
     currentDate.getFullYear(),
@@ -127,6 +132,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
   let startTime = formatDate(firstDay);
   let endTime = formatDate(lastDay);
 
+  // const updateEndUserUsage(startTime: string, endTime: string) {
+    
+  // }
+
   function formatDate(date: Date) {
     const year = date.getFullYear();
     let month = date.getMonth() + 1; // JS month index starts from 0
@@ -193,6 +202,12 @@ const UsagePage: React.FC<UsagePageProps> = ({
             const top_tags = await tagsSpendLogsCall(accessToken);
             setTopTagsData(top_tags.top_10_tags);
 
+            // get spend per end-user
+            let spend_user_call = await adminTopEndUsersCall(accessToken, null);
+            setTopUsers(spend_user_call);
+
+            console.log("spend/user result", spend_user_call);
+
           } else if (userRole == "App Owner") {
             await userSpendLogsCall(
               accessToken,
@@ -224,7 +239,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
                   spend: k["spend"],
                 }));
                 setTopKeys(filtered_keys);
-                setTopUsers(getTopUsers(response));
                 setKeySpendData(response);
               }
             });
@@ -342,7 +356,42 @@ const UsagePage: React.FC<UsagePageProps> = ({
             </Grid>
             </TabPanel>
             <TabPanel>
+            <DateRangePicker 
+                  enableSelect={true} 
+                  value={dateValue} 
+                  onValueChange={(value) => {
+                    setDateValue(value);
+                    updateModelMetrics(selectedModelGroup, 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>
                 
+              <Card className="mt-4">
+
+
+             
+              <Table className="max-h-[70vh] min-h-[500px]">
+                  <TableHead>
+                    <TableRow>
+                      <TableHeaderCell>End User</TableHeaderCell>
+                      <TableHeaderCell>Spend</TableHeaderCell>
+                      <TableHeaderCell>Total Events</TableHeaderCell>
+                    </TableRow>
+                  </TableHead>
+
+                  <TableBody>
+                    {topUsers?.map((user: any, index: number) => (
+                      <TableRow key={index}>
+                        <TableCell>{user.end_user}</TableCell>
+                        <TableCell>{user.total_spend?.toFixed(4)}</TableCell>
+                        <TableCell>{user.total_events}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+
+              </Card>
+
             </TabPanel>
             <TabPanel>
             <Grid numItems={2} className="gap-2 h-[75vh] w-full mb-4">
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index b3960965c..fd152f25f 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -158,12 +158,11 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
         <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[80vh] mb-4">
         <div className="mb-4 mt-1">
         <Text><b>Key Owners: </b> Users on LiteLLM that created API Keys. Automatically tracked by LiteLLM</Text>
-        <Text className="mt-1"><b>End Users: </b>End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls</Text>
+       
         </div>
           <TabGroup>
             <TabList variant="line" defaultValue="1">
               <Tab value="1">Key Owners</Tab>
-              <Tab value="2">End-Users</Tab>
             </TabList>
             <TabPanels>
               <TabPanel>
@@ -220,7 +219,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                 <div className="flex items-center">
                   <div className="flex-1"></div>
                   <div className="flex-1 flex justify-between items-center">
-                    <Text className="w-1/4 mr-2 text-right">Key</Text>
+                    {/* <Text className="w-1/4 mr-2 text-right">Key</Text>
                     <Select defaultValue="1" className="w-3/4">
                       {keys?.map((key: any, index: number) => {
                         if (
@@ -239,10 +238,10 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                           );
                         }
                       })}
-                    </Select>
+                    </Select> */}
                   </div>
                 </div>
-                <Table className="max-h-[70vh] min-h-[500px]">
+                {/* <Table className="max-h-[70vh] min-h-[500px]">
                   <TableHead>
                     <TableRow>
                       <TableHeaderCell>End User</TableHeaderCell>
@@ -260,7 +259,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                       </TableRow>
                     ))}
                   </TableBody>
-                </Table>
+                </Table> */}
               </TabPanel>
             </TabPanels>
           </TabGroup>