From 78b36699df0b58e353d1632f26e78b008ae630bc Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Wed, 12 Aug 2026 14:11:21 -0700
Subject: [PATCH] fix(ui): preserve duration select callback shape

---
 .../common_components/DurationSelect.test.tsx |  2 +-
 .../common_components/DurationSelect.tsx      | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx b/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx
index 2e3a12d9904..bce1093d211 100644
--- a/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx
@@ -42,7 +42,7 @@ describe("DurationSelect", () => {
     const dailyOption = dailyLabel.closest('[role="option"]') ?? dailyLabel;
     await user.click(dailyOption);
 
-    expect(onChange.mock.calls.map(([selected]) => selected)).toContain("24h");
+    expect(onChange).toHaveBeenCalledWith("24h", expect.any(Object));
   });
 
   it("should accept and pass value prop to Select", () => {
diff --git a/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx b/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx
index 0ac00606355..19306e490f2 100644
--- a/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DurationSelect.tsx
@@ -3,16 +3,23 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 interface DurationSelectProps {
   className?: string;
   value?: string;
-  onChange?: (value: string) => void;
+  onChange?: (value: string, option: { value: string; label: string }) => void;
 }
 
+const DURATION_OPTIONS = [
+  { value: "24h", label: "Daily" },
+  { value: "7d", label: "Weekly" },
+  { value: "30d", label: "Monthly" },
+];
+
 export default function DurationSelect({ className, value, onChange }: DurationSelectProps) {
   return (
     <Select
       value={value}
       onValueChange={(nextValue) => {
-        if (nextValue !== null) {
-          onChange?.(nextValue);
+        const selectedOption = DURATION_OPTIONS.find((option) => option.value === nextValue);
+        if (selectedOption) {
+          onChange?.(nextValue, selectedOption);
         }
       }}
     >
@@ -20,9 +27,11 @@ export default function DurationSelect({ className, value, onChange }: DurationS
         <SelectValue placeholder="Select duration" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value="24h">Daily</SelectItem>
-        <SelectItem value="7d">Weekly</SelectItem>
-        <SelectItem value="30d">Monthly</SelectItem>
+        {DURATION_OPTIONS.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
       </SelectContent>
     </Select>
   );