From 129c909f65e28eb773c69c29d4cd49b5e32c3453 Mon Sep 17 00:00:00 2001
From: jesus <jesus@berri.ai>
Date: Sun, 27 Sep 2026 08:06:59 +0000
Subject: [PATCH] fix(ui): sync date picker preset with the current usage range

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../_components/components/UsagePageView.tsx  |  6 ++-
 .../shared/advanced_date_picker.test.tsx      | 48 +++++++++++++++++++
 .../shared/advanced_date_picker.tsx           |  7 ++-
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
index 2388225f047..fd900edbfa7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
@@ -493,7 +493,11 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
               isOrgAdmin={isOrgAdmin}
             />
             <div className="flex items-center gap-2">
-              <AdvancedDatePicker value={dateValue} onValueChange={handleDateChange} />
+              <AdvancedDatePicker
+                value={dateValue}
+                onValueChange={handleDateChange}
+                presetShortLabel={urlParams.range}
+              />
               <Button variant="outline" onClick={() => void copyToClipboard(window.location.href, "Link copied")}>
                 <Link2 />
                 Copy Share Link
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
index 55d6b3b07f6..104eed54b2f 100644
--- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
@@ -195,6 +195,54 @@ describe("AdvancedDatePicker", () => {
     });
   });
 
+  it("resets the preset label when the parent switches to a custom range", async () => {
+    const { container, rerender } = render(
+      <AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />,
+    );
+
+    openDropdown(container);
+    fireEvent.click(screen.getByText("Today"));
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(mockOnValueChange).toHaveBeenNthCalledWith(1, expect.anything(), "today");
+    await waitFor(() => {
+      expect(mockOnValueChange).toHaveBeenNthCalledWith(2, expect.anything(), "today");
+    });
+
+    mockOnValueChange.mockClear();
+    const customValue = {
+      from: new Date("2025-02-01T00:00:00.000Z"),
+      to: new Date("2025-02-10T23:59:59.999Z"),
+    };
+    rerender(<AdvancedDatePicker value={customValue} onValueChange={mockOnValueChange} presetShortLabel={null} />);
+
+    openDropdown(container);
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(mockOnValueChange).toHaveBeenNthCalledWith(1, expect.anything(), null);
+    await waitFor(() => {
+      expect(mockOnValueChange).toHaveBeenNthCalledWith(2, expect.anything(), null);
+    });
+  });
+
+  it("preserves the parent preset label when applying an unchanged range", async () => {
+    const value = {
+      from: moment().subtract(30, "days").startOf("day").toDate(),
+      to: moment().endOf("day").toDate(),
+    };
+    const { container } = render(
+      <AdvancedDatePicker value={value} onValueChange={mockOnValueChange} presetShortLabel="30d" />,
+    );
+
+    openDropdown(container);
+    fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(mockOnValueChange).toHaveBeenNthCalledWith(1, expect.anything(), "30d");
+    await waitFor(() => {
+      expect(mockOnValueChange).toHaveBeenNthCalledWith(2, expect.anything(), "30d");
+    });
+  });
+
   it("should select relative time option", () => {
     const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
 
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 1c942355b83..513db07409c 100644
--- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
@@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 interface AdvancedDatePickerProps {
   value: DateRangePickerValue;
   onValueChange: (value: DateRangePickerValue, presetShortLabel: string | null) => void;
+  presetShortLabel?: string | null;
   label?: string;
   className?: string;
   showTimeRange?: boolean;
@@ -78,6 +79,7 @@ export function matchRelativeTimeOption(value: DateRangePickerValue): RelativeTi
 const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
   value,
   onValueChange,
+  presetShortLabel = null,
   label = "Select Time Range",
   className,
   showTimeRange = true,
@@ -136,7 +138,8 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
       setEndDate(moment(value.to).format("YYYY-MM-DD"));
     }
     setTempValue(value);
-  }, [value]);
+    setPickedPreset(presetShortLabel ?? null);
+  }, [value, presetShortLabel]);
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -270,7 +273,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
     // Reset selected option
     const matchingOption = getMatchingOption(value);
     setSelectedOption(matchingOption);
-    setPickedPreset(null);
+    setPickedPreset(presetShortLabel ?? null);
 
     setIsOpen(false);
   };