From 0a90283fec19734c2139c0e073153e7a809f6368 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Fri, 7 Nov 2025 10:00:37 -0800
Subject: [PATCH] Change usage page to have a parent date picker (#16264)

---
 .../EntityUsageExport/UsageExportHeader.tsx   |  24 +-
 .../src/components/entity_usage.test.tsx      | 215 ++++++
 .../src/components/entity_usage.tsx           |   7 +-
 .../src/components/new_usage.test.tsx         | 253 +++++++
 .../src/components/new_usage.tsx              | 693 +++++++++---------
 .../shared/advanced_date_picker.test.tsx      | 183 +++++
 .../shared/advanced_date_picker.tsx           |  31 +-
 .../components/user_agent_activity.test.tsx   | 195 +++++
 .../src/components/user_agent_activity.tsx    |  28 +-
 9 files changed, 1233 insertions(+), 396 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/entity_usage.test.tsx
 create mode 100644 ui/litellm-dashboard/src/components/new_usage.test.tsx
 create mode 100644 ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
 create mode 100644 ui/litellm-dashboard/src/components/user_agent_activity.test.tsx

diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx b/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx
index 0a33fdb53d..1f61ea260e 100644
--- a/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx
+++ b/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx
@@ -1,14 +1,12 @@
 import React, { useState } from "react";
 import { Button, Text } from "@tremor/react";
 import { Select } from "antd";
-import AdvancedDatePicker from "../shared/advanced_date_picker";
 import EntityUsageExportModal from "./EntityUsageExportModal";
 import type { DateRangePickerValue } from "@tremor/react";
 import type { EntitySpendData } from "./types";
 
 interface UsageExportHeaderProps {
   dateValue: DateRangePickerValue;
-  onDateChange: (value: DateRangePickerValue) => void;
   entityType: "tag" | "team";
   spendData: EntitySpendData;
   // Optional filter props
@@ -24,7 +22,6 @@ interface UsageExportHeaderProps {
 
 const UsageExportHeader: React.FC<UsageExportHeaderProps> = ({
   dateValue,
-  onDateChange,
   entityType,
   spendData,
   showFilters = false,
@@ -38,23 +35,23 @@ const UsageExportHeader: React.FC<UsageExportHeaderProps> = ({
 }) => {
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
 
+  // Determine grid layout based on what's visible
+  const getGridCols = () => {
+    const hasFilters = showFilters && filterOptions.length > 0;
+
+    if (hasFilters) return "grid-cols-[1fr_auto]";
+    return "grid-cols-[auto]";
+  };
+
   return (
     <>
       <div className="mb-4">
         {/**
-         * Use CSS grid with items-end so all cells (date picker, filter, button)
+         * Use CSS grid with items-end so all cells (filter, button)
          * align to the same baseline regardless of label heights. This removes
          * vertical drift when the right column has a label above the input.
          */}
-        <div
-          className={`grid ${
-            showFilters && filterOptions.length > 0 ? "grid-cols-[1fr_1fr_auto]" : "grid-cols-[1fr_auto]"
-          } items-end gap-4`}
-        >
-          <div>
-            <AdvancedDatePicker value={dateValue} onValueChange={onDateChange} />
-          </div>
-
+        <div className={`grid ${getGridCols()} items-end gap-4`}>
           {showFilters && filterOptions.length > 0 && (
             <div>
               {filterLabel && <Text className="mb-2">{filterLabel}</Text>}
@@ -104,4 +101,3 @@ const UsageExportHeader: React.FC<UsageExportHeaderProps> = ({
 };
 
 export default UsageExportHeader;
-
diff --git a/ui/litellm-dashboard/src/components/entity_usage.test.tsx b/ui/litellm-dashboard/src/components/entity_usage.test.tsx
new file mode 100644
index 0000000000..f80b2fad5e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/entity_usage.test.tsx
@@ -0,0 +1,215 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
+import EntityUsage from "./entity_usage";
+import * as networking from "./networking";
+
+// Polyfill ResizeObserver for test environment
+beforeAll(() => {
+  if (typeof window !== "undefined" && !window.ResizeObserver) {
+    window.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as any;
+  }
+});
+
+// Mock the networking module
+vi.mock("./networking", () => ({
+  tagDailyActivityCall: vi.fn(),
+  teamDailyActivityCall: vi.fn(),
+}));
+
+// Mock the child components to simplify testing
+vi.mock("./activity_metrics", () => ({
+  ActivityMetrics: () => <div>Activity Metrics</div>,
+  processActivityData: () => ({ data: [], metadata: {} }),
+}));
+
+vi.mock("./top_key_view", () => ({
+  default: () => <div>Top Keys</div>,
+}));
+
+vi.mock("./top_model_view", () => ({
+  default: () => <div>Top Models</div>,
+}));
+
+vi.mock("./EntityUsageExport", () => ({
+  UsageExportHeader: () => <div>Usage Export Header</div>,
+}));
+
+describe("EntityUsage", () => {
+  const mockTagDailyActivityCall = vi.mocked(networking.tagDailyActivityCall);
+  const mockTeamDailyActivityCall = vi.mocked(networking.teamDailyActivityCall);
+
+  const mockSpendData = {
+    results: [
+      {
+        date: "2025-01-01",
+        metrics: {
+          spend: 100.5,
+          api_requests: 1000,
+          successful_requests: 950,
+          failed_requests: 50,
+          total_tokens: 50000,
+          prompt_tokens: 30000,
+          completion_tokens: 20000,
+          cache_read_input_tokens: 0,
+          cache_creation_input_tokens: 0,
+        },
+        breakdown: {
+          entities: {
+            "tag-1": {
+              metrics: {
+                spend: 60.3,
+                api_requests: 600,
+                successful_requests: 570,
+                failed_requests: 30,
+                total_tokens: 30000,
+                prompt_tokens: 18000,
+                completion_tokens: 12000,
+                cache_read_input_tokens: 0,
+                cache_creation_input_tokens: 0,
+              },
+              metadata: {
+                team_alias: "Tag 1",
+              },
+              api_key_breakdown: {},
+            },
+          },
+          models: {},
+          api_keys: {},
+          providers: {
+            openai: {
+              metrics: {
+                spend: 100.5,
+                api_requests: 1000,
+                successful_requests: 950,
+                failed_requests: 50,
+                total_tokens: 50000,
+                prompt_tokens: 30000,
+                completion_tokens: 20000,
+                cache_read_input_tokens: 0,
+                cache_creation_input_tokens: 0,
+              },
+            },
+          },
+        },
+      },
+    ],
+    metadata: {
+      total_spend: 100.5,
+      total_api_requests: 1000,
+      total_successful_requests: 950,
+      total_failed_requests: 50,
+      total_tokens: 50000,
+    },
+  };
+
+  const defaultProps = {
+    accessToken: "test-token",
+    entityType: "tag" as const,
+    entityId: "test-tag",
+    userID: "user-123",
+    userRole: "Admin",
+    entityList: [
+      { label: "Tag 1", value: "tag-1" },
+      { label: "Tag 2", value: "tag-2" },
+    ],
+    premiumUser: true,
+    dateValue: {
+      from: new Date("2025-01-01"),
+      to: new Date("2025-01-31"),
+    },
+  };
+
+  beforeEach(() => {
+    mockTagDailyActivityCall.mockClear();
+    mockTeamDailyActivityCall.mockClear();
+    mockTagDailyActivityCall.mockResolvedValue(mockSpendData);
+    mockTeamDailyActivityCall.mockResolvedValue(mockSpendData);
+  });
+
+  it("should render with tag entity type and display spend metrics", async () => {
+    render(<EntityUsage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockTagDailyActivityCall).toHaveBeenCalled();
+    });
+
+    // Check that spend metrics are displayed
+    expect(screen.getByText("Tag Spend Overview")).toBeInTheDocument();
+    expect(screen.getByText("Total Spend")).toBeInTheDocument();
+
+    // Use getAllByText since $100.50 appears in multiple places
+    const spendElements = screen.getAllByText("$100.50");
+    expect(spendElements.length).toBeGreaterThan(0);
+
+    expect(screen.getByText("1,000")).toBeInTheDocument(); // Total Requests
+  });
+
+  it("should render with team entity type and call team API", async () => {
+    render(<EntityUsage {...defaultProps} entityType="team" />);
+
+    await waitFor(() => {
+      expect(mockTeamDailyActivityCall).toHaveBeenCalled();
+    });
+
+    // Check that it shows team-specific label
+    expect(screen.getByText("Team Spend Overview")).toBeInTheDocument();
+
+    // Use getAllByText since $100.50 appears in multiple places
+    const spendElements = screen.getAllByText("$100.50");
+    expect(spendElements.length).toBeGreaterThan(0);
+  });
+
+  it("should switch between tabs", async () => {
+    render(<EntityUsage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockTagDailyActivityCall).toHaveBeenCalled();
+    });
+
+    // Check default tab (Cost) is shown
+    expect(screen.getByText("Tag Spend Overview")).toBeInTheDocument();
+
+    // Click Model Activity tab
+    const modelActivityTab = screen.getByText("Model Activity");
+    fireEvent.click(modelActivityTab);
+
+    // Should show activity metrics
+    expect(screen.getAllByText("Activity Metrics")[0]).toBeInTheDocument();
+
+    // Click Key Activity tab
+    const keyActivityTab = screen.getByText("Key Activity");
+    fireEvent.click(keyActivityTab);
+
+    // Should show activity metrics again
+    expect(screen.getAllByText("Activity Metrics")[1]).toBeInTheDocument();
+  });
+
+  it("should handle empty data gracefully", async () => {
+    const emptyData = {
+      results: [],
+      metadata: {
+        total_spend: 0,
+        total_api_requests: 0,
+        total_successful_requests: 0,
+        total_failed_requests: 0,
+        total_tokens: 0,
+      },
+    };
+
+    mockTagDailyActivityCall.mockResolvedValue(emptyData);
+
+    render(<EntityUsage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockTagDailyActivityCall).toHaveBeenCalled();
+    });
+
+    // Check that zero values are displayed (component formats it as $0.00)
+    expect(screen.getByText("$0.00")).toBeInTheDocument();
+    expect(screen.getByText("Total Spend")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/entity_usage.tsx b/ui/litellm-dashboard/src/components/entity_usage.tsx
index 2a4229d692..fc1d03a372 100644
--- a/ui/litellm-dashboard/src/components/entity_usage.tsx
+++ b/ui/litellm-dashboard/src/components/entity_usage.tsx
@@ -74,6 +74,7 @@ interface EntityUsageProps {
   userRole: string | null;
   entityList: EntityList[] | null;
   premiumUser: boolean;
+  dateValue: DateRangePickerValue;
 }
 
 const EntityUsage: React.FC<EntityUsageProps> = ({
@@ -84,6 +85,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
   userRole,
   entityList,
   premiumUser,
+  dateValue,
 }) => {
   const [spendData, setSpendData] = useState<EntitySpendData>({
     results: [],
@@ -99,10 +101,6 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
   const modelMetrics = processActivityData(spendData, "models");
   const keyMetrics = processActivityData(spendData, "api_keys");
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [dateValue, setDateValue] = useState<DateRangePickerValue>({
-    from: new Date(Date.now() - 28 * 24 * 60 * 60 * 1000),
-    to: new Date(),
-  });
 
   const fetchSpendData = async () => {
     if (!accessToken || !dateValue.from || !dateValue.to) return;
@@ -331,7 +329,6 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
     <div style={{ width: "100%" }} className="relative">
       <UsageExportHeader
         dateValue={dateValue}
-        onDateChange={setDateValue}
         entityType={entityType}
         spendData={spendData}
         showFilters={entityList !== null && entityList.length > 0}
diff --git a/ui/litellm-dashboard/src/components/new_usage.test.tsx b/ui/litellm-dashboard/src/components/new_usage.test.tsx
new file mode 100644
index 0000000000..6c426401c5
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/new_usage.test.tsx
@@ -0,0 +1,253 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
+import NewUsagePage from "./new_usage";
+import * as networking from "./networking";
+
+// Polyfill ResizeObserver for test environment
+beforeAll(() => {
+  if (typeof window !== "undefined" && !window.ResizeObserver) {
+    window.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as any;
+  }
+});
+
+// Mock the networking module
+vi.mock("./networking", () => ({
+  userDailyActivityCall: vi.fn(),
+  userDailyActivityAggregatedCall: vi.fn(),
+  tagListCall: vi.fn(),
+}));
+
+// Mock child components to simplify testing
+vi.mock("./activity_metrics", () => ({
+  ActivityMetrics: () => <div>Activity Metrics</div>,
+  processActivityData: () => ({ data: [], metadata: {} }),
+}));
+
+vi.mock("./view_user_spend", () => ({
+  default: () => <div>View User Spend</div>,
+}));
+
+vi.mock("./top_key_view", () => ({
+  default: () => <div>Top Keys</div>,
+}));
+
+vi.mock("./entity_usage", () => ({
+  default: () => <div>Entity Usage</div>,
+  EntityList: [],
+}));
+
+vi.mock("./user_agent_activity", () => ({
+  default: () => <div>User Agent Activity</div>,
+}));
+
+vi.mock("./cloudzero_export_modal", () => ({
+  default: () => <div>CloudZero Export Modal</div>,
+}));
+
+vi.mock("./EntityUsageExport", () => ({
+  default: () => <div>Entity Usage Export Modal</div>,
+}));
+
+describe("NewUsage", () => {
+  const mockUserDailyActivityAggregatedCall = vi.mocked(networking.userDailyActivityAggregatedCall);
+  const mockTagListCall = vi.mocked(networking.tagListCall);
+
+  const mockSpendData = {
+    results: [
+      {
+        date: "2025-01-01",
+        metrics: {
+          spend: 125.75,
+          api_requests: 1500,
+          successful_requests: 1450,
+          failed_requests: 50,
+          total_tokens: 75000,
+          prompt_tokens: 45000,
+          completion_tokens: 30000,
+          cache_read_input_tokens: 0,
+          cache_creation_input_tokens: 0,
+        },
+        breakdown: {
+          models: {
+            "gpt-4": {
+              metrics: {
+                spend: 75.5,
+                api_requests: 800,
+                successful_requests: 780,
+                failed_requests: 20,
+                total_tokens: 40000,
+                prompt_tokens: 24000,
+                completion_tokens: 16000,
+                cache_read_input_tokens: 0,
+                cache_creation_input_tokens: 0,
+              },
+              metadata: {},
+              api_key_breakdown: {},
+            },
+          },
+          model_groups: {
+            "gpt-4": {
+              metrics: {
+                spend: 75.5,
+                api_requests: 800,
+                successful_requests: 780,
+                failed_requests: 20,
+                total_tokens: 40000,
+                prompt_tokens: 24000,
+                completion_tokens: 16000,
+                cache_read_input_tokens: 0,
+                cache_creation_input_tokens: 0,
+              },
+              metadata: {},
+              api_key_breakdown: {},
+            },
+          },
+          api_keys: {
+            "sk-test123": {
+              metrics: {
+                spend: 125.75,
+                api_requests: 1500,
+                successful_requests: 1450,
+                failed_requests: 50,
+                total_tokens: 75000,
+                prompt_tokens: 45000,
+                completion_tokens: 30000,
+                cache_read_input_tokens: 0,
+                cache_creation_input_tokens: 0,
+              },
+              metadata: {
+                key_alias: "Test Key",
+                tags: ["production"],
+              },
+            },
+          },
+          providers: {
+            openai: {
+              metrics: {
+                spend: 125.75,
+                api_requests: 1500,
+                successful_requests: 1450,
+                failed_requests: 50,
+                total_tokens: 75000,
+                prompt_tokens: 45000,
+                completion_tokens: 30000,
+                cache_read_input_tokens: 0,
+                cache_creation_input_tokens: 0,
+              },
+            },
+          },
+          mcp_servers: {},
+        },
+      },
+    ],
+    metadata: {
+      total_spend: 125.75,
+      total_api_requests: 1500,
+      total_successful_requests: 1450,
+      total_failed_requests: 50,
+      total_tokens: 75000,
+    },
+  };
+
+  const defaultProps = {
+    accessToken: "test-token",
+    userRole: "Admin",
+    userID: "user-123",
+    teams: [
+      {
+        team_id: "team-1",
+        team_alias: "Test Team",
+        models: [],
+        max_budget: null,
+        spend: 0,
+        tpm_limit: null,
+        rpm_limit: null,
+        blocked: false,
+        metadata: {},
+        budget_duration: null,
+        organization_id: "org-123",
+        created_at: "2025-01-01T00:00:00Z",
+        keys: [],
+        members_with_roles: [],
+      },
+    ],
+    premiumUser: true,
+  };
+
+  beforeEach(() => {
+    mockUserDailyActivityAggregatedCall.mockClear();
+    mockTagListCall.mockClear();
+    mockUserDailyActivityAggregatedCall.mockResolvedValue(mockSpendData);
+    mockTagListCall.mockResolvedValue({});
+  });
+
+  it("should render and fetch usage data on mount", async () => {
+    render(<NewUsagePage {...defaultProps} />);
+
+    // Wait for data to be fetched
+    await waitFor(() => {
+      expect(mockUserDailyActivityAggregatedCall).toHaveBeenCalled();
+    });
+
+    // Check that key metrics are displayed
+    expect(screen.getByText("Total Requests")).toBeInTheDocument();
+    expect(screen.getByText("1,500")).toBeInTheDocument();
+    expect(screen.getByText("Successful Requests")).toBeInTheDocument();
+    // Use getAllByText since this value appears in multiple places (metrics card + table)
+    const successfulRequestElements = screen.getAllByText("1,450");
+    expect(successfulRequestElements.length).toBeGreaterThan(0);
+  });
+
+  it("should display usage metrics and charts", async () => {
+    render(<NewUsagePage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockUserDailyActivityAggregatedCall).toHaveBeenCalled();
+    });
+
+    // Check for usage metrics cards
+    expect(screen.getByText("Total Requests")).toBeInTheDocument();
+    expect(screen.getByText("Successful Requests")).toBeInTheDocument();
+    expect(screen.getByText("Failed Requests")).toBeInTheDocument();
+    expect(screen.getByText("Total Tokens")).toBeInTheDocument();
+
+    // Check for chart titles
+    expect(screen.getByText("Daily Spend")).toBeInTheDocument();
+    expect(screen.getByText("Top API Keys")).toBeInTheDocument();
+  });
+
+  it("should switch between tabs correctly", async () => {
+    render(<NewUsagePage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockUserDailyActivityAggregatedCall).toHaveBeenCalled();
+    });
+
+    // Default tab should show Global Usage (for admin)
+    expect(screen.getByText("Daily Spend")).toBeInTheDocument();
+
+    // Switch to Team Usage tab
+    const teamUsageTab = screen.getByText("Team Usage");
+    fireEvent.click(teamUsageTab);
+
+    // Should render EntityUsage component
+    await waitFor(() => {
+      const entityUsageElements = screen.getAllByText("Entity Usage");
+      expect(entityUsageElements.length).toBeGreaterThan(0);
+    });
+
+    // Switch to Tag Usage tab (admin only)
+    const tagUsageTab = screen.getByText("Tag Usage");
+    fireEvent.click(tagUsageTab);
+
+    // Should still render EntityUsage component for tags
+    await waitFor(() => {
+      const entityUsageElements = screen.getAllByText("Entity Usage");
+      expect(entityUsageElements.length).toBeGreaterThan(0);
+    });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/new_usage.tsx b/ui/litellm-dashboard/src/components/new_usage.tsx
index 2e85bc2b15..95d721ce9b 100644
--- a/ui/litellm-dashboard/src/components/new_usage.tsx
+++ b/ui/litellm-dashboard/src/components/new_usage.tsx
@@ -408,354 +408,373 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({ accessToken, userRole, user
         </div>
       )} */}
 
-      <TabGroup>
-        <TabList variant="solid" className="mt-1">
-          {all_admin_roles.includes(userRole || "") ? <Tab>Global Usage</Tab> : <Tab>Your Usage</Tab>}
-          <Tab>Team Usage</Tab>
-          {all_admin_roles.includes(userRole || "") ? <Tab>Tag Usage</Tab> : <></>}
-          {all_admin_roles.includes(userRole || "") ? <Tab>User Agent Activity</Tab> : <></>}
-        </TabList>
-        <TabPanels>
-          {/* Your Usage Panel */}
-          <TabPanel>
-            <Grid numItems={2} className="gap-10 w-full mb-4">
-              <Col>
-                <AdvancedDatePicker value={dateValue} onValueChange={handleDateChange} />
-              </Col>
-            </Grid>
-            <TabGroup>
-              <div className="flex justify-between items-center">
-                <TabList variant="solid" className="mt-1">
-                  <Tab>Cost</Tab>
-                  <Tab>Model Activity</Tab>
-                  <Tab>Key Activity</Tab>
-                  <Tab>MCP Server Activity</Tab>
-                </TabList>
-                <Button
-                  onClick={() => setIsGlobalExportModalOpen(true)}
-                  icon={() => (
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                      />
-                    </svg>
-                  )}
-                >
-                  Export Data
-                </Button>
-              </div>
-              <TabPanels>
-                {/* Cost Panel */}
-                <TabPanel>
-                  <Grid numItems={2} className="gap-2 w-full">
-                    {/* Total Spend Card */}
-                    <Col numColSpan={2}>
-                      <Text className="text-tremor-default text-tremor-content dark:text-dark-tremor-content mb-2 mt-2 text-lg">
-                        Project Spend{" "}
-                        {new Date().toLocaleString("default", {
-                          month: "long",
-                        })}{" "}
-                        1 - {new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate()}
-                      </Text>
-
-                      <ViewUserSpend
-                        userID={userID}
-                        userRole={userRole}
-                        accessToken={accessToken}
-                        userSpend={totalSpend}
-                        selectedTeam={null}
-                        userMaxBudget={null}
-                      />
-                    </Col>
-
-                    <Col numColSpan={2}>
-                      <Card>
-                        <Title>Usage Metrics</Title>
-                        <Grid numItems={5} className="gap-4 mt-4">
-                          <Card>
-                            <Title>Total Requests</Title>
-                            <Text className="text-2xl font-bold mt-2">
-                              {userSpendData.metadata?.total_api_requests?.toLocaleString() || 0}
-                            </Text>
-                          </Card>
-                          <Card>
-                            <Title>Successful Requests</Title>
-                            <Text className="text-2xl font-bold mt-2 text-green-600">
-                              {userSpendData.metadata?.total_successful_requests?.toLocaleString() || 0}
-                            </Text>
-                          </Card>
-                          <Card>
-                            <Title>Failed Requests</Title>
-                            <Text className="text-2xl font-bold mt-2 text-red-600">
-                              {userSpendData.metadata?.total_failed_requests?.toLocaleString() || 0}
-                            </Text>
-                          </Card>
-                          <Card>
-                            <Title>Total Tokens</Title>
-                            <Text className="text-2xl font-bold mt-2">
-                              {userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
-                            </Text>
-                          </Card>
-                          <Card>
-                            <Title>Average Cost per Request</Title>
-                            <Text className="text-2xl font-bold mt-2">
-                              $
-                              {formatNumberWithCommas(
-                                (totalSpend || 0) / (userSpendData.metadata?.total_api_requests || 1),
-                                4,
-                              )}
-                            </Text>
-                          </Card>
-                        </Grid>
-                      </Card>
-                    </Col>
-
-                    {/* Daily Spend Chart */}
-                    <Col numColSpan={2}>
-                      <Card>
-                        <Title>Daily Spend</Title>
-                        {loading ? (
-                          <ChartLoader isDateChanging={isDateChanging} />
-                        ) : (
-                          <BarChart
-                            data={[...userSpendData.results].sort(
-                              (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+      {/* Global Date Picker and Tabs - Single Row */}
+      <div className="flex items-end justify-between gap-6 mb-6">
+        <div className="flex-1">
+          <TabGroup>
+            <div className="flex items-end justify-start gap-6 mb-6">
+              <TabList variant="solid">
+                {all_admin_roles.includes(userRole || "") ? <Tab>Global Usage</Tab> : <Tab>Your Usage</Tab>}
+                <Tab>Team Usage</Tab>
+                {all_admin_roles.includes(userRole || "") ? <Tab>Tag Usage</Tab> : <></>}
+                {all_admin_roles.includes(userRole || "") ? <Tab>User Agent Activity</Tab> : <></>}
+              </TabList>
+              <AdvancedDatePicker value={dateValue} onValueChange={handleDateChange} />
+            </div>
+            <TabPanels>
+              {/* Your Usage Panel */}
+              <TabPanel>
+                <TabGroup>
+                  <div className="flex justify-between items-center">
+                    <TabList variant="solid" className="mt-1">
+                      <Tab>Cost</Tab>
+                      <Tab>Model Activity</Tab>
+                      <Tab>Key Activity</Tab>
+                      <Tab>MCP Server Activity</Tab>
+                    </TabList>
+                    <Button
+                      onClick={() => setIsGlobalExportModalOpen(true)}
+                      icon={() => (
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                          />
+                        </svg>
+                      )}
+                    >
+                      Export Data
+                    </Button>
+                  </div>
+                  <TabPanels>
+                    {/* Cost Panel */}
+                    <TabPanel>
+                      <Grid numItems={2} className="gap-2 w-full">
+                        {/* Total Spend Card */}
+                        <Col numColSpan={2}>
+                          <Text className="text-tremor-default text-tremor-content dark:text-dark-tremor-content mb-2 mt-2 text-lg">
+                            Project Spend{" "}
+                            {dateValue.from && dateValue.to && (
+                              <>
+                                {dateValue.from.toLocaleDateString("en-US", {
+                                  month: "short",
+                                  day: "numeric",
+                                  year:
+                                    dateValue.from.getFullYear() !== dateValue.to.getFullYear() ? "numeric" : undefined,
+                                })}
+                                {" - "}
+                                {dateValue.to.toLocaleDateString("en-US", {
+                                  month: "short",
+                                  day: "numeric",
+                                  year: "numeric",
+                                })}
+                              </>
                             )}
-                            index="date"
-                            categories={["metrics.spend"]}
-                            colors={["cyan"]}
-                            valueFormatter={valueFormatterSpend}
-                            yAxisWidth={100}
-                            showLegend={false}
-                            customTooltip={({ payload, active }) => {
-                              if (!active || !payload?.[0]) return null;
-                              const data = payload[0].payload;
-                              return (
-                                <div className="bg-white p-4 shadow-lg rounded-lg border">
-                                  <p className="font-bold">{data.date}</p>
-                                  <p className="text-cyan-500">
-                                    Spend: ${formatNumberWithCommas(data.metrics.spend, 2)}
-                                  </p>
-                                  <p className="text-gray-600">Requests: {data.metrics.api_requests}</p>
-                                  <p className="text-gray-600">Successful: {data.metrics.successful_requests}</p>
-                                  <p className="text-gray-600">Failed: {data.metrics.failed_requests}</p>
-                                  <p className="text-gray-600">Tokens: {data.metrics.total_tokens}</p>
-                                </div>
-                              );
-                            }}
-                          />
-                        )}
-                      </Card>
-                    </Col>
-                    {/* Top API Keys */}
-                    <Col numColSpan={1}>
-                      <Card className="h-full">
-                        <Title>Top API Keys</Title>
-                        <TopKeyView
-                          topKeys={getTopKeys()}
-                          accessToken={accessToken}
-                          userID={userID}
-                          userRole={userRole}
-                          teams={null}
-                          premiumUser={premiumUser}
-                        />
-                      </Card>
-                    </Col>
+                          </Text>
 
-                    {/* Top Models */}
-                    <Col numColSpan={1}>
-                      <Card className="h-full">
-                        <div className="flex justify-between items-center mb-4">
-                          <Title>{modelViewType === "groups" ? "Top Public Model Names" : "Top Litellm Models"}</Title>
-                          <div className="flex bg-gray-100 rounded-lg p-1">
-                            <button
-                              className={`px-3 py-1 text-sm rounded-md transition-colors ${
-                                modelViewType === "groups"
-                                  ? "bg-white shadow-sm text-gray-900"
-                                  : "text-gray-600 hover:text-gray-900"
-                              }`}
-                              onClick={() => setModelViewType("groups")}
-                            >
-                              Public Model Name
-                            </button>
-                            <button
-                              className={`px-3 py-1 text-sm rounded-md transition-colors ${
-                                modelViewType === "individual"
-                                  ? "bg-white shadow-sm text-gray-900"
-                                  : "text-gray-600 hover:text-gray-900"
-                              }`}
-                              onClick={() => setModelViewType("individual")}
-                            >
-                              Litellm Model Name
-                            </button>
-                          </div>
-                        </div>
-                        {loading ? (
-                          <ChartLoader isDateChanging={isDateChanging} />
-                        ) : (
-                          <BarChart
-                            className="mt-4 h-40"
-                            data={modelViewType === "groups" ? getTopModelGroups() : getTopModels()}
-                            index="key"
-                            categories={["spend"]}
-                            colors={["cyan"]}
-                            valueFormatter={valueFormatterSpend}
-                            layout="vertical"
-                            yAxisWidth={200}
-                            showLegend={false}
-                            customTooltip={({ payload, active }) => {
-                              if (!active || !payload?.[0]) return null;
-                              const data = payload[0].payload;
-                              return (
-                                <div className="bg-white p-4 shadow-lg rounded-lg border">
-                                  <p className="font-bold">{data.key}</p>
-                                  <p className="text-cyan-500">Spend: ${formatNumberWithCommas(data.spend, 2)}</p>
-                                  <p className="text-gray-600">Total Requests: {data.requests.toLocaleString()}</p>
-                                  <p className="text-green-600">
-                                    Successful: {data.successful_requests.toLocaleString()}
-                                  </p>
-                                  <p className="text-red-600">Failed: {data.failed_requests.toLocaleString()}</p>
-                                  <p className="text-gray-600">Tokens: {data.tokens.toLocaleString()}</p>
-                                </div>
-                              );
-                            }}
+                          <ViewUserSpend
+                            userID={userID}
+                            userRole={userRole}
+                            accessToken={accessToken}
+                            userSpend={totalSpend}
+                            selectedTeam={null}
+                            userMaxBudget={null}
                           />
-                        )}
-                      </Card>
-                    </Col>
+                        </Col>
 
-                    {/* Spend by Provider */}
-                    <Col numColSpan={2}>
-                      <Card className="h-full">
-                        <div className="flex justify-between items-center mb-4">
-                          <Title>Spend by Provider</Title>
-                        </div>
-                        {loading ? (
-                          <ChartLoader isDateChanging={isDateChanging} />
-                        ) : (
-                          <Grid numItems={2}>
-                            <Col numColSpan={1}>
-                              <DonutChart
-                                className="mt-4 h-40"
-                                data={getProviderSpend()}
-                                index="provider"
-                                category="spend"
-                                valueFormatter={(value) => `$${formatNumberWithCommas(value, 2)}`}
+                        <Col numColSpan={2}>
+                          <Card>
+                            <Title>Usage Metrics</Title>
+                            <Grid numItems={5} className="gap-4 mt-4">
+                              <Card>
+                                <Title>Total Requests</Title>
+                                <Text className="text-2xl font-bold mt-2">
+                                  {userSpendData.metadata?.total_api_requests?.toLocaleString() || 0}
+                                </Text>
+                              </Card>
+                              <Card>
+                                <Title>Successful Requests</Title>
+                                <Text className="text-2xl font-bold mt-2 text-green-600">
+                                  {userSpendData.metadata?.total_successful_requests?.toLocaleString() || 0}
+                                </Text>
+                              </Card>
+                              <Card>
+                                <Title>Failed Requests</Title>
+                                <Text className="text-2xl font-bold mt-2 text-red-600">
+                                  {userSpendData.metadata?.total_failed_requests?.toLocaleString() || 0}
+                                </Text>
+                              </Card>
+                              <Card>
+                                <Title>Total Tokens</Title>
+                                <Text className="text-2xl font-bold mt-2">
+                                  {userSpendData.metadata?.total_tokens?.toLocaleString() || 0}
+                                </Text>
+                              </Card>
+                              <Card>
+                                <Title>Average Cost per Request</Title>
+                                <Text className="text-2xl font-bold mt-2">
+                                  $
+                                  {formatNumberWithCommas(
+                                    (totalSpend || 0) / (userSpendData.metadata?.total_api_requests || 1),
+                                    4,
+                                  )}
+                                </Text>
+                              </Card>
+                            </Grid>
+                          </Card>
+                        </Col>
+
+                        {/* Daily Spend Chart */}
+                        <Col numColSpan={2}>
+                          <Card>
+                            <Title>Daily Spend</Title>
+                            {loading ? (
+                              <ChartLoader isDateChanging={isDateChanging} />
+                            ) : (
+                              <BarChart
+                                data={[...userSpendData.results].sort(
+                                  (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+                                )}
+                                index="date"
+                                categories={["metrics.spend"]}
                                 colors={["cyan"]}
+                                valueFormatter={valueFormatterSpend}
+                                yAxisWidth={100}
+                                showLegend={false}
+                                customTooltip={({ payload, active }) => {
+                                  if (!active || !payload?.[0]) return null;
+                                  const data = payload[0].payload;
+                                  return (
+                                    <div className="bg-white p-4 shadow-lg rounded-lg border">
+                                      <p className="font-bold">{data.date}</p>
+                                      <p className="text-cyan-500">
+                                        Spend: ${formatNumberWithCommas(data.metrics.spend, 2)}
+                                      </p>
+                                      <p className="text-gray-600">Requests: {data.metrics.api_requests}</p>
+                                      <p className="text-gray-600">Successful: {data.metrics.successful_requests}</p>
+                                      <p className="text-gray-600">Failed: {data.metrics.failed_requests}</p>
+                                      <p className="text-gray-600">Tokens: {data.metrics.total_tokens}</p>
+                                    </div>
+                                  );
+                                }}
                               />
-                            </Col>
-                            <Col numColSpan={1}>
-                              <Table>
-                                <TableHead>
-                                  <TableRow>
-                                    <TableHeaderCell>Provider</TableHeaderCell>
-                                    <TableHeaderCell>Spend</TableHeaderCell>
-                                    <TableHeaderCell className="text-green-600">Successful</TableHeaderCell>
-                                    <TableHeaderCell className="text-red-600">Failed</TableHeaderCell>
-                                    <TableHeaderCell>Tokens</TableHeaderCell>
-                                  </TableRow>
-                                </TableHead>
-                                <TableBody>
-                                  {getProviderSpend()
-                                    .filter((provider) => provider.spend > 0)
-                                    .map((provider) => (
-                                      <TableRow key={provider.provider}>
-                                        <TableCell>
-                                          <div className="flex items-center space-x-2">
-                                            {provider.provider && (
-                                              <img
-                                                src={getProviderLogoAndName(provider.provider).logo}
-                                                alt={`${provider.provider} logo`}
-                                                className="w-4 h-4"
-                                                onError={(e) => {
-                                                  const target = e.target as HTMLImageElement;
-                                                  const parent = target.parentElement;
-                                                  if (parent) {
-                                                    const fallbackDiv = document.createElement("div");
-                                                    fallbackDiv.className =
-                                                      "w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs";
-                                                    fallbackDiv.textContent = provider.provider?.charAt(0) || "-";
-                                                    parent.replaceChild(fallbackDiv, target);
-                                                  }
-                                                }}
-                                              />
-                                            )}
-                                            <span>{provider.provider}</span>
-                                          </div>
-                                        </TableCell>
-                                        <TableCell>${formatNumberWithCommas(provider.spend, 2)}</TableCell>
-                                        <TableCell className="text-green-600">
-                                          {provider.successful_requests.toLocaleString()}
-                                        </TableCell>
-                                        <TableCell className="text-red-600">
-                                          {provider.failed_requests.toLocaleString()}
-                                        </TableCell>
-                                        <TableCell>{provider.tokens.toLocaleString()}</TableCell>
+                            )}
+                          </Card>
+                        </Col>
+                        {/* Top API Keys */}
+                        <Col numColSpan={1}>
+                          <Card className="h-full">
+                            <Title>Top API Keys</Title>
+                            <TopKeyView
+                              topKeys={getTopKeys()}
+                              accessToken={accessToken}
+                              userID={userID}
+                              userRole={userRole}
+                              teams={null}
+                              premiumUser={premiumUser}
+                            />
+                          </Card>
+                        </Col>
+
+                        {/* Top Models */}
+                        <Col numColSpan={1}>
+                          <Card className="h-full">
+                            <div className="flex justify-between items-center mb-4">
+                              <Title>
+                                {modelViewType === "groups" ? "Top Public Model Names" : "Top Litellm Models"}
+                              </Title>
+                              <div className="flex bg-gray-100 rounded-lg p-1">
+                                <button
+                                  className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                                    modelViewType === "groups"
+                                      ? "bg-white shadow-sm text-gray-900"
+                                      : "text-gray-600 hover:text-gray-900"
+                                  }`}
+                                  onClick={() => setModelViewType("groups")}
+                                >
+                                  Public Model Name
+                                </button>
+                                <button
+                                  className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                                    modelViewType === "individual"
+                                      ? "bg-white shadow-sm text-gray-900"
+                                      : "text-gray-600 hover:text-gray-900"
+                                  }`}
+                                  onClick={() => setModelViewType("individual")}
+                                >
+                                  Litellm Model Name
+                                </button>
+                              </div>
+                            </div>
+                            {loading ? (
+                              <ChartLoader isDateChanging={isDateChanging} />
+                            ) : (
+                              <BarChart
+                                className="mt-4 h-40"
+                                data={modelViewType === "groups" ? getTopModelGroups() : getTopModels()}
+                                index="key"
+                                categories={["spend"]}
+                                colors={["cyan"]}
+                                valueFormatter={valueFormatterSpend}
+                                layout="vertical"
+                                yAxisWidth={200}
+                                showLegend={false}
+                                customTooltip={({ payload, active }) => {
+                                  if (!active || !payload?.[0]) return null;
+                                  const data = payload[0].payload;
+                                  return (
+                                    <div className="bg-white p-4 shadow-lg rounded-lg border">
+                                      <p className="font-bold">{data.key}</p>
+                                      <p className="text-cyan-500">Spend: ${formatNumberWithCommas(data.spend, 2)}</p>
+                                      <p className="text-gray-600">Total Requests: {data.requests.toLocaleString()}</p>
+                                      <p className="text-green-600">
+                                        Successful: {data.successful_requests.toLocaleString()}
+                                      </p>
+                                      <p className="text-red-600">Failed: {data.failed_requests.toLocaleString()}</p>
+                                      <p className="text-gray-600">Tokens: {data.tokens.toLocaleString()}</p>
+                                    </div>
+                                  );
+                                }}
+                              />
+                            )}
+                          </Card>
+                        </Col>
+
+                        {/* Spend by Provider */}
+                        <Col numColSpan={2}>
+                          <Card className="h-full">
+                            <div className="flex justify-between items-center mb-4">
+                              <Title>Spend by Provider</Title>
+                            </div>
+                            {loading ? (
+                              <ChartLoader isDateChanging={isDateChanging} />
+                            ) : (
+                              <Grid numItems={2}>
+                                <Col numColSpan={1}>
+                                  <DonutChart
+                                    className="mt-4 h-40"
+                                    data={getProviderSpend()}
+                                    index="provider"
+                                    category="spend"
+                                    valueFormatter={(value) => `$${formatNumberWithCommas(value, 2)}`}
+                                    colors={["cyan"]}
+                                  />
+                                </Col>
+                                <Col numColSpan={1}>
+                                  <Table>
+                                    <TableHead>
+                                      <TableRow>
+                                        <TableHeaderCell>Provider</TableHeaderCell>
+                                        <TableHeaderCell>Spend</TableHeaderCell>
+                                        <TableHeaderCell className="text-green-600">Successful</TableHeaderCell>
+                                        <TableHeaderCell className="text-red-600">Failed</TableHeaderCell>
+                                        <TableHeaderCell>Tokens</TableHeaderCell>
                                       </TableRow>
-                                    ))}
-                                </TableBody>
-                              </Table>
-                            </Col>
-                          </Grid>
-                        )}
-                      </Card>
-                    </Col>
+                                    </TableHead>
+                                    <TableBody>
+                                      {getProviderSpend()
+                                        .filter((provider) => provider.spend > 0)
+                                        .map((provider) => (
+                                          <TableRow key={provider.provider}>
+                                            <TableCell>
+                                              <div className="flex items-center space-x-2">
+                                                {provider.provider && (
+                                                  <img
+                                                    src={getProviderLogoAndName(provider.provider).logo}
+                                                    alt={`${provider.provider} logo`}
+                                                    className="w-4 h-4"
+                                                    onError={(e) => {
+                                                      const target = e.target as HTMLImageElement;
+                                                      const parent = target.parentElement;
+                                                      if (parent) {
+                                                        const fallbackDiv = document.createElement("div");
+                                                        fallbackDiv.className =
+                                                          "w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs";
+                                                        fallbackDiv.textContent = provider.provider?.charAt(0) || "-";
+                                                        parent.replaceChild(fallbackDiv, target);
+                                                      }
+                                                    }}
+                                                  />
+                                                )}
+                                                <span>{provider.provider}</span>
+                                              </div>
+                                            </TableCell>
+                                            <TableCell>${formatNumberWithCommas(provider.spend, 2)}</TableCell>
+                                            <TableCell className="text-green-600">
+                                              {provider.successful_requests.toLocaleString()}
+                                            </TableCell>
+                                            <TableCell className="text-red-600">
+                                              {provider.failed_requests.toLocaleString()}
+                                            </TableCell>
+                                            <TableCell>{provider.tokens.toLocaleString()}</TableCell>
+                                          </TableRow>
+                                        ))}
+                                    </TableBody>
+                                  </Table>
+                                </Col>
+                              </Grid>
+                            )}
+                          </Card>
+                        </Col>
 
-                    {/* Usage Metrics */}
-                  </Grid>
-                </TabPanel>
+                        {/* Usage Metrics */}
+                      </Grid>
+                    </TabPanel>
 
-                {/* Activity Panel */}
-                <TabPanel>
-                  <ActivityMetrics modelMetrics={modelMetrics} />
-                </TabPanel>
-                <TabPanel>
-                  <ActivityMetrics modelMetrics={keyMetrics} />
-                </TabPanel>
-                <TabPanel>
-                  <ActivityMetrics modelMetrics={mcpServerMetrics} />
-                </TabPanel>
-              </TabPanels>
-            </TabGroup>
-          </TabPanel>
+                    {/* Activity Panel */}
+                    <TabPanel>
+                      <ActivityMetrics modelMetrics={modelMetrics} />
+                    </TabPanel>
+                    <TabPanel>
+                      <ActivityMetrics modelMetrics={keyMetrics} />
+                    </TabPanel>
+                    <TabPanel>
+                      <ActivityMetrics modelMetrics={mcpServerMetrics} />
+                    </TabPanel>
+                  </TabPanels>
+                </TabGroup>
+              </TabPanel>
 
-          {/* Team Usage Panel */}
-          <TabPanel>
-            <EntityUsage
-              accessToken={accessToken}
-              entityType="team"
-              userID={userID}
-              userRole={userRole}
-              entityList={
-                teams?.map((team) => ({
-                  label: team.team_alias,
-                  value: team.team_id,
-                })) || null
-              }
-              premiumUser={premiumUser}
-            />
-          </TabPanel>
+              {/* Team Usage Panel */}
+              <TabPanel>
+                <EntityUsage
+                  accessToken={accessToken}
+                  entityType="team"
+                  userID={userID}
+                  userRole={userRole}
+                  entityList={
+                    teams?.map((team) => ({
+                      label: team.team_alias,
+                      value: team.team_id,
+                    })) || null
+                  }
+                  premiumUser={premiumUser}
+                  dateValue={dateValue}
+                />
+              </TabPanel>
 
-          {/* Tag Usage Panel */}
-          <TabPanel>
-            <EntityUsage
-              accessToken={accessToken}
-              entityType="tag"
-              userID={userID}
-              userRole={userRole}
-              entityList={allTags}
-              premiumUser={premiumUser}
-            />
-          </TabPanel>
-          {/* User Agent Activity Panel */}
-          <TabPanel>
-            <UserAgentActivity accessToken={accessToken} userRole={userRole} />
-          </TabPanel>
-        </TabPanels>
-      </TabGroup>
+              {/* Tag Usage Panel */}
+              <TabPanel>
+                <EntityUsage
+                  accessToken={accessToken}
+                  entityType="tag"
+                  userID={userID}
+                  userRole={userRole}
+                  entityList={allTags}
+                  premiumUser={premiumUser}
+                  dateValue={dateValue}
+                />
+              </TabPanel>
+              {/* User Agent Activity Panel */}
+              <TabPanel>
+                <UserAgentActivity accessToken={accessToken} userRole={userRole} dateValue={dateValue} />
+              </TabPanel>
+            </TabPanels>
+          </TabGroup>
+        </div>
+      </div>
 
       {/* CloudZero Export Modal */}
       <CloudZeroExportModal
diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
new file mode 100644
index 0000000000..90d75df75e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
@@ -0,0 +1,183 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
+import AdvancedDatePicker from "./advanced_date_picker";
+
+// Polyfill requestIdleCallback for test environment
+beforeAll(() => {
+  if (typeof window !== "undefined" && !window.requestIdleCallback) {
+    window.requestIdleCallback = (callback: any) => {
+      const start = Date.now();
+      return setTimeout(() => {
+        callback({
+          didTimeout: false,
+          timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
+        });
+      }, 1) as any;
+    };
+  }
+});
+
+describe("AdvancedDatePicker", () => {
+  const mockOnValueChange = vi.fn();
+  const defaultValue = {
+    from: new Date("2025-01-01T12:00:00.000Z"),
+    to: new Date("2025-01-31T12:00:00.000Z"),
+  };
+
+  beforeEach(() => {
+    mockOnValueChange.mockClear();
+  });
+
+  const openDropdown = (container: HTMLElement) => {
+    // Find the clickable div that contains the clock icon
+    const trigger = container.querySelector('[role="img"][aria-label="clock-circle"]')?.closest("div.cursor-pointer");
+    if (trigger) {
+      fireEvent.click(trigger);
+    }
+  };
+
+  it("should render with default label", () => {
+    render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+    expect(screen.getByText("Select Time Range")).toBeInTheDocument();
+  });
+
+  it("should render with custom label", () => {
+    render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} label="Custom Label" />);
+    expect(screen.getByText("Custom Label")).toBeInTheDocument();
+  });
+
+  it("should display formatted date range", () => {
+    render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+    // The component displays date range in the format "D MMM, HH:mm - D MMM, HH:mm"
+    // Just check that the clock icon is present
+    expect(screen.getByLabelText("clock-circle")).toBeInTheDocument();
+  });
+
+  it("should open dropdown when clicked", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    // Check for relative time options
+    expect(screen.getByText("Today")).toBeInTheDocument();
+    expect(screen.getByText("Last 7 days")).toBeInTheDocument();
+    expect(screen.getByText("Last 30 days")).toBeInTheDocument();
+  });
+
+  it("should display relative time options", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    expect(screen.getByText("Today")).toBeInTheDocument();
+    expect(screen.getByText("Last 7 days")).toBeInTheDocument();
+    expect(screen.getByText("Last 30 days")).toBeInTheDocument();
+    expect(screen.getByText("Month to date")).toBeInTheDocument();
+    expect(screen.getByText("Year to date")).toBeInTheDocument();
+  });
+
+  it("should show date inputs in dropdown", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const startDateInput = screen.getByDisplayValue("2025-01-01");
+    const endDateInput = screen.getByDisplayValue("2025-01-31");
+
+    expect(startDateInput).toBeInTheDocument();
+    expect(endDateInput).toBeInTheDocument();
+  });
+
+  it("should update date inputs when changed", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const startDateInput = screen.getByDisplayValue("2025-01-01") as HTMLInputElement;
+    fireEvent.change(startDateInput, { target: { value: "2025-02-01" } });
+
+    expect(startDateInput.value).toBe("2025-02-01");
+  });
+
+  it("should show Apply and Cancel buttons", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    expect(screen.getByText("Apply")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+  });
+
+  it("should close dropdown when Cancel is clicked", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const cancelButton = screen.getByText("Cancel");
+    fireEvent.click(cancelButton);
+
+    // Dropdown should be closed, so relative time options shouldn't be visible
+    expect(screen.queryByText("Today")).not.toBeInTheDocument();
+  });
+
+  it("should call onValueChange when Apply is clicked", async () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const applyButton = screen.getByText("Apply");
+    fireEvent.click(applyButton);
+
+    await waitFor(() => {
+      expect(mockOnValueChange).toHaveBeenCalled();
+    });
+  });
+
+  it("should select relative time option", () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const todayOption = screen.getByText("Today");
+    fireEvent.click(todayOption);
+
+    // The option should be highlighted (bg-blue-50)
+    expect(todayOption.closest("div")).toHaveClass("bg-blue-50");
+  });
+
+  it("should show validation error for invalid date range", async () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const startDateInput = screen.getByDisplayValue("2025-01-01");
+    const endDateInput = screen.getByDisplayValue("2025-01-31");
+
+    // Set end date before start date
+    fireEvent.change(startDateInput, { target: { value: "2025-12-01" } });
+    fireEvent.change(endDateInput, { target: { value: "2025-01-01" } });
+
+    await waitFor(() => {
+      expect(screen.getByText("End date cannot be before start date")).toBeInTheDocument();
+    });
+  });
+
+  it("should disable Apply button when validation fails", async () => {
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+
+    openDropdown(container);
+
+    const startDateInput = screen.getByDisplayValue("2025-01-01");
+    const endDateInput = screen.getByDisplayValue("2025-01-31");
+
+    // Set end date before start date
+    fireEvent.change(startDateInput, { target: { value: "2025-12-01" } });
+    fireEvent.change(endDateInput, { target: { value: "2025-01-01" } });
+
+    await waitFor(() => {
+      // Find the button element (the Apply button's actual button element)
+      const applyButton = screen.getByText("Apply").closest("button");
+      expect(applyButton).toBeDisabled();
+    });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
index aeb867b859..d9e70ef333 100644
--- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
@@ -273,9 +273,8 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
   };
 
   return (
-    <div>
-      {label && <Text className="mb-2">{label}</Text>}
-
+    <div className="flex items-center gap-3">
+      {label && <Text className="text-sm font-medium text-gray-700 whitespace-nowrap">{label}</Text>}
       <div className="relative" ref={dropdownRef}>
         {/* Main input display */}
         <div
@@ -305,7 +304,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
               {/* Left side - Relative time options */}
               <div className="w-1/2 border-r border-gray-200">
                 <div className="p-3 border-b border-gray-200">
-                  <span className="text-sm font-semibold text-gray-900">Relative time (today, 7d, 30d, MTD, YTD)</span>
+                  <span className="text-sm font-semibold text-gray-900">Relative time</span>
                 </div>
                 <div className="h-[350px] overflow-y-auto">
                   {relativeTimeOptions.map((option) => {
@@ -322,7 +321,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
                           {option.label}
                         </span>
                         <span
-                          className={`text-xs px-2 py-1 rounded ${
+                          className={`text-xs px-2 py-1 rounded capitalize ${
                             isSelected ? "text-blue-700 bg-blue-100" : "text-gray-500 bg-gray-100"
                           }`}
                         >
@@ -391,11 +390,17 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
                     </div>
                   )}
 
-                  {/* Current selection preview */}
+                  {/* Current selection time range */}
                   {tempValue.from && tempValue.to && validation.isValid && (
-                    <div className="bg-blue-50 p-3 rounded-md">
-                      <div className="text-xs text-blue-700 font-medium">Preview:</div>
-                      <div className="text-sm text-blue-800">{formatDisplayRange(tempValue.from, tempValue.to)}</div>
+                    <div className="bg-blue-50 p-3 rounded-md space-y-1">
+                      <div className="text-xs text-blue-800">
+                        <span className="font-medium">From:</span>{" "}
+                        {moment(tempValue.from).format("MMM D, YYYY [at] HH:mm:ss")}
+                      </div>
+                      <div className="text-xs text-blue-800">
+                        <span className="font-medium">To:</span>{" "}
+                        {moment(tempValue.to).format("MMM D, YYYY [at] HH:mm:ss")}
+                      </div>
                     </div>
                   )}
                 </div>
@@ -415,14 +420,6 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
           </div>
         )}
       </div>
-
-      {/* Time range display below */}
-      {showTimeRange && value.from && value.to && (
-        <Text className="mt-2 text-xs text-gray-500">
-          {moment(value.from).format("MMM D, YYYY [at] HH:mm:ss")} -{" "}
-          {moment(value.to).format("MMM D, YYYY [at] HH:mm:ss")}
-        </Text>
-      )}
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx b/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx
new file mode 100644
index 0000000000..7b67720e9e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/user_agent_activity.test.tsx
@@ -0,0 +1,195 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
+import UserAgentActivity from "./user_agent_activity";
+import * as networking from "./networking";
+
+// Polyfill ResizeObserver for test environment
+beforeAll(() => {
+  if (typeof window !== "undefined" && !window.ResizeObserver) {
+    window.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as any;
+  }
+});
+
+// Mock the networking module
+vi.mock("./networking", () => ({
+  userAgentSummaryCall: vi.fn(),
+  tagDauCall: vi.fn(),
+  tagWauCall: vi.fn(),
+  tagMauCall: vi.fn(),
+  tagDistinctCall: vi.fn(),
+}));
+
+// Mock PerUserUsage component
+vi.mock("./per_user_usage", () => ({
+  default: () => <div>Per User Usage</div>,
+}));
+
+describe("UserAgentActivity", () => {
+  const mockUserAgentSummaryCall = vi.mocked(networking.userAgentSummaryCall);
+  const mockTagDauCall = vi.mocked(networking.tagDauCall);
+  const mockTagWauCall = vi.mocked(networking.tagWauCall);
+  const mockTagMauCall = vi.mocked(networking.tagMauCall);
+  const mockTagDistinctCall = vi.mocked(networking.tagDistinctCall);
+
+  const mockDistinctTagsData = {
+    results: [{ tag: "User-Agent: Chrome/1.0" }, { tag: "User-Agent: Firefox/2.0" }, { tag: "User-Agent: Safari/3.0" }],
+  };
+
+  const mockSummaryData = {
+    results: [
+      {
+        tag: "User-Agent: Chrome/1.0",
+        unique_users: 100,
+        total_requests: 1000,
+        successful_requests: 950,
+        failed_requests: 50,
+        total_tokens: 50000,
+        total_spend: 25.5,
+      },
+      {
+        tag: "User-Agent: Firefox/2.0",
+        unique_users: 80,
+        total_requests: 800,
+        successful_requests: 760,
+        failed_requests: 40,
+        total_tokens: 40000,
+        total_spend: 20.3,
+      },
+    ],
+  };
+
+  const mockDauData = {
+    results: [
+      {
+        tag: "User-Agent: Chrome/1.0",
+        active_users: 50,
+        date: "2025-01-01",
+      },
+      {
+        tag: "User-Agent: Firefox/2.0",
+        active_users: 30,
+        date: "2025-01-01",
+      },
+    ],
+  };
+
+  const mockWauData = {
+    results: [
+      {
+        tag: "User-Agent: Chrome/1.0",
+        active_users: 200,
+        date: "Week 1 (Jan 1)",
+      },
+    ],
+  };
+
+  const mockMauData = {
+    results: [
+      {
+        tag: "User-Agent: Chrome/1.0",
+        active_users: 500,
+        date: "Month 1 (Jan)",
+      },
+    ],
+  };
+
+  const defaultProps = {
+    accessToken: "test-token",
+    userRole: "Admin",
+    dateValue: {
+      from: new Date("2025-01-01"),
+      to: new Date("2025-01-31"),
+    },
+  };
+
+  beforeEach(() => {
+    mockUserAgentSummaryCall.mockClear();
+    mockTagDauCall.mockClear();
+    mockTagWauCall.mockClear();
+    mockTagMauCall.mockClear();
+    mockTagDistinctCall.mockClear();
+
+    mockTagDistinctCall.mockResolvedValue(mockDistinctTagsData);
+    mockUserAgentSummaryCall.mockResolvedValue(mockSummaryData);
+    mockTagDauCall.mockResolvedValue(mockDauData);
+    mockTagWauCall.mockResolvedValue(mockWauData);
+    mockTagMauCall.mockResolvedValue(mockMauData);
+  });
+
+  it("should render summary cards with user agent data", async () => {
+    render(<UserAgentActivity {...defaultProps} />);
+
+    // Wait for data to load
+    await waitFor(() => {
+      expect(mockUserAgentSummaryCall).toHaveBeenCalled();
+      expect(mockTagDistinctCall).toHaveBeenCalled();
+    });
+
+    // Check that summary section is displayed
+    expect(screen.getByText("Summary by User Agent")).toBeInTheDocument();
+    expect(screen.getByText("Performance metrics for different user agents")).toBeInTheDocument();
+
+    // Check that user agent cards are displayed
+    await waitFor(() => {
+      expect(screen.getByText("Chrome/1.0")).toBeInTheDocument();
+      expect(screen.getByText("Firefox/2.0")).toBeInTheDocument();
+    });
+
+    // Check that metrics are displayed
+    expect(screen.getAllByText("Success Requests").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Total Tokens").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Total Cost").length).toBeGreaterThan(0);
+  });
+
+  it("should switch between DAU, WAU, and MAU tabs", async () => {
+    render(<UserAgentActivity {...defaultProps} />);
+
+    // Wait for data to load
+    await waitFor(() => {
+      expect(mockTagDauCall).toHaveBeenCalled();
+      expect(mockTagWauCall).toHaveBeenCalled();
+      expect(mockTagMauCall).toHaveBeenCalled();
+    });
+
+    // Check default DAU tab content
+    expect(screen.getByText("Daily Active Users - Last 7 Days")).toBeInTheDocument();
+
+    // Find all WAU tab buttons (there might be multiple)
+    const wauTabs = screen.getAllByText("WAU");
+    fireEvent.click(wauTabs[0]);
+
+    // Check WAU tab content
+    await waitFor(() => {
+      expect(screen.getByText("Weekly Active Users - Last 7 Weeks")).toBeInTheDocument();
+    });
+
+    // Find all MAU tab buttons
+    const mauTabs = screen.getAllByText("MAU");
+    fireEvent.click(mauTabs[0]);
+
+    // Check MAU tab content
+    await waitFor(() => {
+      expect(screen.getByText("Monthly Active Users - Last 7 Months")).toBeInTheDocument();
+    });
+  });
+
+  it("should display filter dropdown and allow tag selection", async () => {
+    render(<UserAgentActivity {...defaultProps} />);
+
+    // Wait for tags to load
+    await waitFor(() => {
+      expect(mockTagDistinctCall).toHaveBeenCalled();
+    });
+
+    // Check that filter label is present
+    expect(screen.getByText("Filter by User Agents")).toBeInTheDocument();
+
+    // The Ant Design Select component should be in the document with placeholder
+    const selectElement = screen.getByText("All User Agents");
+    expect(selectElement).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/user_agent_activity.tsx b/ui/litellm-dashboard/src/components/user_agent_activity.tsx
index 492c7fbcd8..8b5f303670 100644
--- a/ui/litellm-dashboard/src/components/user_agent_activity.tsx
+++ b/ui/litellm-dashboard/src/components/user_agent_activity.tsx
@@ -15,7 +15,6 @@ import {
 } from "@tremor/react";
 import { Select, Tooltip } from "antd";
 import { userAgentSummaryCall, tagDauCall, tagWauCall, tagMauCall, tagDistinctCall } from "./networking";
-import AdvancedDatePicker from "./shared/advanced_date_picker";
 import PerUserUsage from "./per_user_usage";
 import { DateRangePickerValue } from "@tremor/react";
 import { ChartLoader } from "./shared/chart_loader";
@@ -58,9 +57,11 @@ interface DistinctTagsResponse {
 interface UserAgentActivityProps {
   accessToken: string | null;
   userRole: string | null;
+  dateValue: DateRangePickerValue;
+  onDateChange?: (value: DateRangePickerValue) => void; // Optional - not used anymore
 }
 
-const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, userRole }) => {
+const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, userRole, dateValue, onDateChange }) => {
   // Maximum number of categories to show in charts to prevent color palette overflow
   const MAX_CATEGORIES = 10;
 
@@ -70,11 +71,6 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
   const [mauData, setMauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
   const [summaryData, setSummaryData] = useState<TagSummaryResponse>({ results: [] });
 
-  const [dateValue, setDateValue] = useState<DateRangePickerValue>({
-    from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
-    to: new Date(),
-  });
-
   const [userAgentFilter, setUserAgentFilter] = useState<string>("");
 
   // Tag filtering state
@@ -88,8 +84,6 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
   const [mauLoading, setMauLoading] = useState(false);
   const [summaryLoading, setSummaryLoading] = useState(false);
 
-  const [isDateChanging, setIsDateChanging] = useState(false);
-
   // Use today's date as the end date for all API calls
   const today = new Date();
 
@@ -180,20 +174,9 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
       console.error("Failed to fetch user agent summary data:", error);
     } finally {
       setSummaryLoading(false);
-      setIsDateChanging(false);
     }
   };
 
-  // Super responsive date change handler
-  const handleDateChange = (newValue: DateRangePickerValue) => {
-    // Instant visual feedback
-    setIsDateChanging(true);
-    setSummaryLoading(true);
-
-    // Update date immediately for UI responsiveness
-    setDateValue(newValue);
-  };
-
   // Effect to fetch available tags on mount
   useEffect(() => {
     fetchAvailableTags();
@@ -425,12 +408,11 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
             </div>
           </div>
 
-          {/* Date Range Picker within Summary */}
-          <AdvancedDatePicker value={dateValue} onValueChange={handleDateChange} />
+          {/* Date Range Picker is controlled by parent component */}
 
           {/* Top 4 User Agents Cards */}
           {summaryLoading ? (
-            <ChartLoader isDateChanging={isDateChanging} />
+            <ChartLoader isDateChanging={false} />
           ) : (
             <Grid numItems={4} className="gap-4">
               {(summaryData.results || []).slice(0, 4).map((tag, index) => {