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 = ({ 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 = ({ 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 }} /> End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls @@ -384,7 +396,7 @@ const UsagePage: React.FC = ({ {user.end_user} {user.total_spend?.toFixed(4)} - {user.total_events} + {user.total_count} ))}