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 ( );