fix: usage datepicker

src/pages/usage/components/breakdown-tabs.tsx

@@ -28,6 +28,7 @@ const BreakdownTabs: React.FC<{
       forceRender: true,
       children: (
         <ModelsTable
+          key="models"
           models={filters.models || []}
           dateRange={dateRange}
           scope={scope}
@@ -40,6 +41,7 @@ const BreakdownTabs: React.FC<{
       forceRender: true,
       children: (
         <UsersTable
+          key="users"
           users={filters.users || []}
           dateRange={dateRange}
           scope={scope}
@@ -52,6 +54,7 @@ const BreakdownTabs: React.FC<{
       forceRender: true,
       children: (
         <ApiKeysTable
+          key="api_keys"
           apiKeys={filters.api_keys || []}
           dateRange={dateRange}
           scope={scope}

src/pages/usage/components/daily-usage.tsx

@@ -25,8 +25,6 @@ const ControlsWrapper = styled.div`
 const ControlLabel = styled.span`
   font-size: 14px;
   color: var(--ant-color-text-tertiary);
-  border-right: 1px solid var(--ant-color-split);
-  padding-right: 8px;
   margin-right: 8px;
 `;
 
@@ -154,8 +152,9 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
               prefix={<ControlLabel>Metric</ControlLabel>}
               options={metricOptions}
               value={metric}
+              popupMatchSelectWidth={false}
               onChange={onMetricChange}
-              style={{ width: 200 }}
+              style={{ width: 180 }}
             />
 
             <BaseSelect
@@ -163,19 +162,17 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
               prefix={<ControlLabel>Group by</ControlLabel>}
               options={groupByOptions}
               value={groupBy}
+              popupMatchSelectWidth={false}
               onChange={onGroupByChange}
-              style={{ width: 200 }}
             />
           </div>
           <Segmented
-            size="middle"
-            shape="round"
+            size="small"
             options={granularities}
             value={granularity}
             onChange={onGranularityChange}
           ></Segmented>
         </ControlsWrapper>
-        {/* <Divider style={{ margin: 0 }} /> */}
 
         {/* <SimpleCard dataList={summaryCards} height={80} /> */}
         <MixLineBar

src/pages/usage/components/filter-bar.tsx

@@ -62,37 +62,42 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
     handleSearch
   } = props;
   const intl = useIntl();
-  const { disabledRangeDaysDate, rangePresets, picker, handleOnPickerChange } =
-    useRangePickerPreset({
-      range: DefaultDateConfig.maxRange,
-      disabledDate: true,
-      presetRanges: [
-        {
-          label: intl.formatMessage({
-            id: 'dashboard.usage.datePicker.last7days'
-          }),
-          value: [dayjs().add(-6, 'd'), dayjs()]
-        },
-        {
-          label: intl.formatMessage({
-            id: 'dashboard.usage.datePicker.last30days'
-          }),
-          value: [dayjs().add(-29, 'd'), dayjs()]
-        },
-        {
-          label: intl.formatMessage({
-            id: 'dashboard.usage.datePicker.last60days'
-          }),
-          value: [dayjs().add(-59, 'd'), dayjs()]
-        },
-        {
-          label: intl.formatMessage({
-            id: 'dashboard.usage.datePicker.last90days'
-          }),
-          value: [dayjs().add(-89, 'd'), dayjs()]
-        }
-      ]
-    });
+  const {
+    disabledRangeDaysDate,
+    rangePresets,
+    picker,
+    normalizeRangeValue,
+    handleOnPickerChange
+  } = useRangePickerPreset({
+    range: DefaultDateConfig.maxRange,
+    disabledDate: true,
+    presetRanges: [
+      {
+        label: intl.formatMessage({
+          id: 'dashboard.usage.datePicker.last7days'
+        }),
+        value: [dayjs().add(-6, 'd'), dayjs()]
+      },
+      {
+        label: intl.formatMessage({
+          id: 'dashboard.usage.datePicker.last30days'
+        }),
+        value: [dayjs().add(-29, 'd'), dayjs()]
+      },
+      {
+        label: intl.formatMessage({
+          id: 'dashboard.usage.datePicker.last60days'
+        }),
+        value: [dayjs().add(-59, 'd'), dayjs()]
+      },
+      {
+        label: intl.formatMessage({
+          id: 'dashboard.usage.datePicker.last90days'
+        }),
+        value: [dayjs().add(-89, 'd'), dayjs()]
+      }
+    ]
+  });
   const [activeModels, setActiveModels] = React.useState<valueType[][]>([]);
   const [activeApiKeys, setActiveApiKeys] = React.useState<valueType[][]>([]);
 
@@ -222,6 +227,16 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
     );
   };
 
+  const userOptionRender = (option: any) => {
+    const { data } = option;
+    return (
+      <span className="flex-center gap-8">
+        <span>{data.label}</span>
+        {data.isCurrent && <span className="text-tertiary"> [Current]</span>}
+      </span>
+    );
+  };
+
   return (
     <div className={FilterBarCss.wrapper}>
       <div className={FilterBarCss.filters}>
@@ -231,12 +246,12 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
             dayjs().add(-DefaultDateConfig.defaultRange, 'd'),
             dayjs()
           ]}
+          format={'YYYY-MM-DD'}
           picker={picker}
           disabledDate={disabledRangeDaysDate}
           presets={rangePresets}
           allowClear={false}
           style={{ width: 240 }}
-          value={[dayjs(startDate), dayjs(endDate)]}
           onChange={onDateChange}
           renderExtraFooter={renderFooter}
         />
@@ -294,6 +309,7 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
                 wrapper: { flex: 1, maxWidth: 240, minWidth: 150 }
               }}
               value={selectedUsers}
+              optionLabelRender={userOptionRender}
               onChange={onUsersChange}
             />
             <div