From fd42bddee66d93bdab85145685b15e63daacb230 Mon Sep 17 00:00:00 2001
From: ryan <ryan@berri.ai>
Date: Thu, 3 Sep 2026 23:52:12 +0000
Subject: [PATCH] fix(ui): reset per-user usage page in the same render as the
 tag filter change

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../src/components/per_user_usage.test.tsx             |  4 ++++
 ui/litellm-dashboard/src/components/per_user_usage.tsx | 10 ++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx
index f92039e55b8..3ce85580ca8 100644
--- a/ui/litellm-dashboard/src/components/per_user_usage.test.tsx
+++ b/ui/litellm-dashboard/src/components/per_user_usage.test.tsx
@@ -176,12 +176,16 @@ describe("PerUserUsage", () => {
       await screen.findByText("user-1");
       await user.click(screen.getByTestId("pagination-next"));
       await screen.findByText("user-51");
+      const callsBeforeTagChange = mockPerUserAnalyticsCall.mock.calls.length;
 
       rerender(<PerUserUsage {...defaultProps} selectedTags={["curl/8.0"]} />);
 
       await waitFor(() => {
         expect(lastCall()).toEqual(["test-token", 1, 50, ["curl/8.0"]]);
       });
+      expect(mockPerUserAnalyticsCall.mock.calls.slice(callsBeforeTagChange)).toEqual([
+        ["test-token", 1, 50, ["curl/8.0"]],
+      ]);
       expect(await screen.findByText("user-1")).toBeInTheDocument();
       expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-50 of 120");
     });
diff --git a/ui/litellm-dashboard/src/components/per_user_usage.tsx b/ui/litellm-dashboard/src/components/per_user_usage.tsx
index 6e5cbb26014..215a2032d4f 100644
--- a/ui/litellm-dashboard/src/components/per_user_usage.tsx
+++ b/ui/litellm-dashboard/src/components/per_user_usage.tsx
@@ -42,10 +42,12 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({ accessToken, selectedTags,
   });
 
   const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 50 });
+  const [pagedTags, setPagedTags] = useState(selectedTags);
 
-  useEffect(() => {
+  if (pagedTags !== selectedTags) {
+    setPagedTags(selectedTags);
     setPagination((prev) => (prev.pageIndex === 0 ? prev : { ...prev, pageIndex: 0 }));
-  }, [selectedTags]);
+  }
 
   useEffect(() => {
     if (!accessToken) return;
@@ -55,7 +57,7 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({ accessToken, selectedTags,
       accessToken,
       pagination.pageIndex + 1,
       pagination.pageSize,
-      selectedTags.length > 0 ? selectedTags : undefined,
+      pagedTags.length > 0 ? pagedTags : undefined,
     )
       .then((response) => {
         if (!stale) setPerUserData(response);
@@ -65,7 +67,7 @@ const PerUserUsage: React.FC<PerUserUsageProps> = ({ accessToken, selectedTags,
     return () => {
       stale = true;
     };
-  }, [accessToken, selectedTags, pagination]);
+  }, [accessToken, pagedTags, pagination]);
 
   const handlePaginationChange = useCallback<OnChangeFn<PaginationState>>((updaterOrValue) => {
     setPagination((prev) => {