fix: usage: datepicker item disabled issue

src/components/delete-modal/index.tsx

@@ -35,6 +35,8 @@ const useStyles = createStyles(({ css }) => ({
     white-space: pre-line;
     span {
       color: var(--ant-color-text);
+      display: flex;
+      margin-top: 8px;
     }
   `
 }));

src/pages/dashboard/components/usage-inner/export-data.tsx

@@ -29,7 +29,8 @@ const ExportData: React.FC<{
   } = useUsageData<{
     items: TableRow[];
   }>({
-    url: DASHBOARD_USAGE_API
+    url: DASHBOARD_USAGE_API,
+    disabledDate: false
   });
 
   const exportTableColumns: TableColumnType[] = [

src/pages/dashboard/components/usage-inner/index.tsx

@@ -24,6 +24,7 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const { usageData, handleOnCancel, handleExport, FilterBar, init, open } =
     useUsageData<DashboardUsageData>({
       url: DASHBOARD_STATS_API,
+      disabledDate: true,
       defaultData: {
         api_request_history: [],
         completion_token_history: [],

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -80,7 +80,7 @@ const legendData = [
 ];
 
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
-  const { requestData, tokenData, xAxisData, onExport } = props;
+  const { requestData, tokenData, xAxisData } = props;
 
   const totalData = useMemo(() => {
     const data: Record<string, number> = {

src/pages/dashboard/components/usage-inner/use-usage-data.tsx

@@ -42,10 +42,10 @@ interface RequestTokenData {
   xAxisData: string[];
 }
 
-interface TopUserData {
+const DefaultDateConfig = {
-  userData: { name: string; value: number }[];
+  maxRange: 60,
-  topUserList: string[];
+  defaultRange: 30
-}
+};
 
 const getLast30Days = () => {
   const dates: string[] = [];
@@ -94,14 +94,16 @@ const generateData = (dateRage: string[], valueMap: Map<string, number>) => {
 export default function useUseageData<T>(config: {
   url: string;
   defaultData?: T;
+  disabledDate?: boolean;
 }) {
-  const { url, defaultData } = config || {};
+  const { url, defaultData, disabledDate = false } = config || {};
   const intl = useIntl();
   const { TagRender } = useSelectRender({
     maxTagWidth: 100
   });
   const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({
-    range: 60
+    range: DefaultDateConfig.maxRange,
+    disabledDate: disabledDate
   });
   const [open, setOpen] = useState(false);
   const [result, setResult] = useState<{
@@ -109,7 +111,9 @@ export default function useUseageData<T>(config: {
     end_date?: string;
     data: T;
   }>({
-    start_date: dayjs().subtract(30, 'days').format('YYYY-MM-DD'),
+    start_date: dayjs()
+      .subtract(DefaultDateConfig.defaultRange, 'days')
+      .format('YYYY-MM-DD'),
     end_date: dayjs().format('YYYY-MM-DD'),
     data: defaultData as T
   });
@@ -120,7 +124,9 @@ export default function useUseageData<T>(config: {
     model_ids: number[];
     user_ids: number[];
   }>({
-    start_date: dayjs().subtract(30, 'days').format('YYYY-MM-DD'),
+    start_date: dayjs()
+      .subtract(DefaultDateConfig.defaultRange, 'days')
+      .format('YYYY-MM-DD'),
     end_date: dayjs().format('YYYY-MM-DD'),
     model_ids: [],
     user_ids: []
@@ -318,11 +324,15 @@ export default function useUseageData<T>(config: {
   };
 
   const FilterBar = () => {
+    const filterOptions = (inputValue: any, option: any) => {
+      return option.label?.toLowerCase().includes(inputValue.toLowerCase());
+    };
     return (
       <FilterWrapper>
         <div className="selection">
           <DatePicker.RangePicker
-            defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
+            maxDate={dayjs()}
+            defaultValue={[dayjs().add(-29, 'd'), dayjs()]}
             disabledDate={disabledRangeDaysDate}
             presets={rangePresets}
             allowClear={false}
@@ -332,9 +342,11 @@ export default function useUseageData<T>(config: {
           ></DatePicker.RangePicker>
           <Select
             allowClear
+            showSearch
             mode="multiple"
             options={userList}
             maxTagCount={1}
+            filterOption={filterOptions}
             tagRender={TagRender}
             placeholder={intl.formatMessage({
               id: 'dashboard.usage.selectuser'
@@ -345,10 +357,12 @@ export default function useUseageData<T>(config: {
           ></Select>
           <Select
             allowClear
+            showSearch
             mode="multiple"
             options={modelList}
             maxTagCount={1}
             tagRender={TagRender}
+            filterOption={filterOptions}
             placeholder={intl.formatMessage({
               id: 'dashboard.usage.selectmodel'
             })}

src/pages/dashboard/hooks/use-rangepicker-preset.ts

@@ -4,6 +4,7 @@ import dayjs, { type Dayjs } from 'dayjs';
 
 interface RangePickerPreset {
   range: number;
+  disabledDate?: boolean;
 }
 
 export default function useRangePickerPreset(options?: RangePickerPreset): {
@@ -14,7 +15,7 @@ export default function useRangePickerPreset(options?: RangePickerPreset): {
   }[];
   range: number;
 } {
-  const { range = 60 } = options || {};
+  const { range = 60, disabledDate } = options || {};
   const intl = useIntl();
 
   const getYearMonth = (date: Dayjs) => date.year() * 12 + date.month();
@@ -23,9 +24,8 @@ export default function useRangePickerPreset(options?: RangePickerPreset): {
     current,
     { from, type }
   ) => {
-    // before 2025 is not allowed
+    if (!disabledDate) {
-    if (current.year() < 2025) {
+      return false;
-      return true;
     }
 
     if (from) {
@@ -45,10 +45,9 @@ export default function useRangePickerPreset(options?: RangePickerPreset): {
           );
 
         default:
-          return Math.abs(current.diff(from, 'days')) > range;
+          return current.isBefore(minDate) || current.isAfter(maxDate);
       }
     }
-
     return false;
   };
 
@@ -58,19 +57,19 @@ export default function useRangePickerPreset(options?: RangePickerPreset): {
   }[] = [
     {
       label: intl.formatMessage({ id: 'dashboard.usage.datePicker.last7days' }),
-      value: [dayjs().add(-7, 'd'), dayjs()]
+      value: [dayjs().add(-6, 'd'), dayjs()]
     },
     {
       label: intl.formatMessage({
         id: 'dashboard.usage.datePicker.last30days'
       }),
-      value: [dayjs().add(-30, 'd'), dayjs()]
+      value: [dayjs().add(-29, 'd'), dayjs()]
     },
     {
       label: intl.formatMessage({
         id: 'dashboard.usage.datePicker.last60days'
       }),
-      value: [dayjs().add(-60, 'd'), dayjs()]
+      value: [dayjs().add(-59, 'd'), dayjs()]
     }
   ];