Refactor date range selection in dashboards to use UsageDatePicker component, simplifying date handling logic and improving consistency across components.

ui/litellm-dashboard/src/components/cache_dashboard.tsx

@@ -22,6 +22,7 @@ import {
   Icon,
   Text,
 } from "@tremor/react";
+import UsageDatePicker from "./shared/usage_date_picker";
 
 import {
   Button as Button2,
@@ -161,20 +162,10 @@ const CacheDashboard: React.FC<CachePageProps> = ({
       return;
     }
 
-    // Create new Date objects to avoid mutating the original dates
-    const adjustedStartTime = new Date(startTime);
-    const adjustedEndTime = new Date(endTime);
-
-    // the endTime put it to the last hour of the selected date
-    adjustedEndTime.setHours(23, 59, 59, 999);
-
-    // startTime put it to the first hour of the selected date
-    adjustedStartTime.setHours(0, 0, 0, 0);
-
     let new_cache_data = await adminGlobalCacheActivity(
       accessToken,
-      formatDateWithoutTZ(adjustedStartTime),
-      formatDateWithoutTZ(adjustedEndTime)
+      formatDateWithoutTZ(startTime),
+      formatDateWithoutTZ(endTime)
     )
 
     setData(new_cache_data);
@@ -353,14 +344,12 @@ const runCachingHealthCheck = async () => {
           </MultiSelect>
         </Col>
         <Col>
-          <DateRangePicker
-          enableSelect={true} 
+          <UsageDatePicker
             value={dateValue}
             onValueChange={(value) => {
                 setDateValue(value);
                 updateCachingData(value.from, value.to);
               }}
-            selectPlaceholder="Select date range"
           />
         </Col>
       </Grid>

ui/litellm-dashboard/src/components/entity_usage.tsx

@@ -6,6 +6,7 @@ import {
   DonutChart,
   TabPanel, TabGroup, TabList, Tab, TabPanels
 } from "@tremor/react";
+import UsageDatePicker from "./shared/usage_date_picker";
 import { Select } from 'antd';
 import { ActivityMetrics, processActivityData } from './activity_metrics';
 import { DailyData, KeyMetricWithMetadata, EntityMetricWithMetadata } from './usage/types';
@@ -287,9 +288,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
     <div style={{ width: "100%" }}>
       <Grid numItems={2} className="gap-2 w-full mb-4">
           <Col>
-            <Text>Select Time Range</Text>
-            <DateRangePicker
-              enableSelect={true}
+            <UsageDatePicker
               value={dateValue}
               onValueChange={setDateValue}
             />

ui/litellm-dashboard/src/components/model_dashboard.tsx

@@ -43,6 +43,7 @@ import {
   MultiSelectItem,
   DateRangePickerValue,
 } from "@tremor/react";
+import UsageDatePicker from "./shared/usage_date_picker";
 import {
   modelInfoCall,
   userGetRequesedtModelsCall,
@@ -306,27 +307,14 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
       selected_customer = null;
     }
 
-    // Create new Date objects to avoid mutating the original dates
-    const adjustedStartTime = new Date(startTime);
-    const adjustedEndTime = new Date(endTime);
-
-    // make startTime and endTime to last hour of the day
-    adjustedStartTime.setHours(0);
-    adjustedStartTime.setMinutes(0);
-    adjustedStartTime.setSeconds(0);
-
-    adjustedEndTime.setHours(23);
-    adjustedEndTime.setMinutes(59);
-    adjustedEndTime.setSeconds(59);
-
     try {
       const modelMetricsResponse = await modelMetricsCall(
         accessToken,
         userID,
         userRole,
         modelGroup,
-        adjustedStartTime.toISOString(),
-        adjustedEndTime.toISOString(),
+        startTime.toISOString(),
+        endTime.toISOString(),
         selected_token,
         selected_customer
       );
@@ -1391,9 +1379,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
             <TabPanel>
               <Grid numItems={4} className="mt-2 mb-2">
                 <Col>
-                  <Text>Select Time Range</Text>
-                  <DateRangePicker
-                    enableSelect={true}
+                  <UsageDatePicker
                     value={dateValue}
                     className="mr-2"
                     onValueChange={(value) => {
@@ -1402,7 +1388,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                         selectedModelGroup,
                         value.from,
                         value.to
-                      ); // Call updateModelMetrics with the new date range
+                      );
                     }}
                   />
                 </Col>

ui/litellm-dashboard/src/components/new_usage.tsx

@@ -15,6 +15,7 @@ import {
   TableHeaderCell, TableBody, TableCell,
   Subtitle, DateRangePicker, DateRangePickerValue
 } from "@tremor/react";
+import UsageDatePicker from "./shared/usage_date_picker";
 import { AreaChart } from "@tremor/react";
 
 import { userDailyActivityCall, tagListCall } from "./networking";
@@ -273,9 +274,7 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({
           <TabPanel>
             <Grid numItems={2} className="gap-2 w-full mb-4">
               <Col>
-                <Text>Select Time Range</Text>
-                <DateRangePicker
-                  enableSelect={true}
+                <UsageDatePicker
                   value={dateValue}
                   onValueChange={(value) => {
                     setDateValue(value);

ui/litellm-dashboard/src/components/usage.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 
 import ViewUserSpend from "./view_user_spend";
 import { ProxySettings } from "./user_dashboard";
+import UsageDatePicker from "./shared/usage_date_picker";
 import { 
   Grid, Col, Text, 
   LineChart, TabPanel, TabPanels, 
@@ -213,23 +214,13 @@ const UsagePage: React.FC<UsagePageProps> = ({
       return;
     }
 
-    // Create new Date objects to avoid mutating the original dates
-    const adjustedStartTime = new Date(startTime);
-    const adjustedEndTime = new Date(endTime);
-
-    // the endTime put it to the last hour of the selected date
-    adjustedEndTime.setHours(23, 59, 59, 999);
-
-    // startTime put it to the first hour of the selected date
-    adjustedStartTime.setHours(0, 0, 0, 0);
-
     console.log("uiSelectedKey", uiSelectedKey);
 
     let newTopUserData = await adminTopEndUsersCall(
       accessToken,
       uiSelectedKey,
-      adjustedStartTime.toISOString(),
-      adjustedEndTime.toISOString()
+      startTime.toISOString(),
+      endTime.toISOString()
     )
     console.log("End user data updated successfully", newTopUserData);
     setTopUsers(newTopUserData);
@@ -249,20 +240,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
       return;  // Don't run expensive DB queries - return out when SpendLogs has more than 1M rows
     }
 
-    // Create new Date objects to avoid mutating the original dates
-    const adjustedStartTime = new Date(startTime);
-    const adjustedEndTime = new Date(endTime);
-
-    // the endTime put it to the last hour of the selected date
-    adjustedEndTime.setHours(23, 59, 59, 999);
-
-    // startTime put it to the first hour of the selected date
-    adjustedStartTime.setHours(0, 0, 0, 0);
-
     let top_tags = await tagsSpendLogsCall(
       accessToken, 
-      adjustedStartTime.toISOString(), 
-      adjustedEndTime.toISOString(),
+      startTime.toISOString(), 
+      endTime.toISOString(),
       selectedTags.length === 0 ? undefined : selectedTags
     );
     setTopTagsData(top_tags.spend_per_tag);
@@ -843,14 +824,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
             <p className="mb-2 text-gray-500 italic text-[12px]">Customers of your LLM API calls. Tracked when a `user` param is passed in your LLM calls <a className="text-blue-500" href="https://docs.litellm.ai/docs/proxy/users" target="_blank">docs here</a></p>
               <Grid numItems={2}>
                 <Col>
-                <Text>Select Time Range</Text>
-       
-              <DateRangePicker 
-                  enableSelect={true} 
-                  value={dateValue} 
+                <UsageDatePicker
+                  value={dateValue}
                   onValueChange={(value) => {
                     setDateValue(value);
-                    updateEndUserData(value.from, value.to, null); // Call updateModelMetrics with the new date range
+                    updateEndUserData(value.from, value.to, null);
                   }}
                 />
                          </Col>
@@ -924,13 +902,12 @@ const UsagePage: React.FC<UsagePageProps> = ({
             <TabPanel>
               <Grid numItems={2}>
               <Col numColSpan={1}>
-            <DateRangePicker 
+            <UsageDatePicker
                   className="mb-4"
-                  enableSelect={true} 
-                  value={dateValue} 
+                  value={dateValue}
                   onValueChange={(value) => {
                     setDateValue(value);
-                    updateTagSpendData(value.from, value.to); // Call updateModelMetrics with the new date range
+                    updateTagSpendData(value.from, value.to);
                   }}
               />