chore: date ranger picker presets

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

@@ -3,9 +3,11 @@ import ScrollerModal from '@/components/scroller-modal';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl } from '@umijs/max';
 import { DatePicker, Select, Space, Table } from 'antd';
+import dayjs from 'dayjs';
 import React from 'react';
 import { queryDashboardUsageData } from '../../apis';
 import { exportTableColumns } from '../../config';
+import useRangePickerPreset from '../../hooks/use-rangepicker-preset';
 
 const ExportData: React.FC<{
   open: boolean;
@@ -28,6 +30,9 @@ const ExportData: React.FC<{
   });
   const { open, onCancel } = props || {};
   const intl = useIntl();
+  const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({
+    range: 60
+  });
 
   const handleSubmit = () => {};
 
@@ -66,7 +71,16 @@ const ExportData: React.FC<{
       }
     >
       <Space>
-        <DatePicker.RangePicker style={{ width: 240 }}></DatePicker.RangePicker>
+        <DatePicker.RangePicker
+          style={{ width: 240 }}
+          defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
+          disabledDate={disabledRangeDaysDate}
+          presets={rangePresets}
+          allowClear={false}
+          onChange={(dates) => {
+            handleSearch();
+          }}
+        ></DatePicker.RangePicker>
         <Select
           mode="multiple"
           maxTagCount={1}

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

@@ -1,8 +1,10 @@
 import { useIntl } from '@umijs/max';
 import { Col, DatePicker, Row, Select } from 'antd';
+import dayjs from 'dayjs';
 import { FC, memo, useContext, useState } from 'react';
 import styled from 'styled-components';
 import { DashboardContext } from '../../config/dashboard-context';
+import useRangePickerPreset from '../../hooks/use-rangepicker-preset';
 import ExportData from './export-data';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
@@ -22,6 +24,7 @@ const FilterWrapper = styled.div`
 
 const TitleWrapper = styled.div`
   margin: 26px 0px;
+  margin-bottom: 38px;
   font-weight: 700;
 `;
 
@@ -34,6 +37,16 @@ const dataList = [
 const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
 
+  const [query, setQuery] = useState({
+    startDate: dayjs().subtract(30, 'days').format('YYYY-MM-DD'),
+    endDate: dayjs().format('YYYY-MM-DD'),
+    user: [],
+    model: []
+  });
+
+  const { disabledRangeDaysDate, rangePresets } = useRangePickerPreset({
+    range: 60
+  });
   const { model_usage } = useContext(DashboardContext);
   const [open, setOpen] = useState(false);
 
@@ -72,6 +85,10 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
             <FilterWrapper>
               <div className="selection">
                 <DatePicker.RangePicker
+                  defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
+                  disabledDate={disabledRangeDaysDate}
+                  presets={rangePresets}
+                  allowClear={false}
                   style={{ width: 240 }}
                 ></DatePicker.RangePicker>
                 <Select

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

@@ -68,7 +68,7 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   return (
     <CardWrapper style={{ width: '100%', position: 'relative' }}>
       <DownloadButton
-        type="text"
+        type="link"
         icon={<ExportOutlined />}
         size="small"
         onClick={onExport}

src/pages/dashboard/config/index.ts

@@ -75,7 +75,7 @@ export const baseColorMap = {
   baseL2: 'rgba(13,171,219,0.8)',
   baseL1: 'rgba(0,34,255,0.8)',
   base: 'rgba(0,85,255,0.8)',
-  baseR1: 'rgba(0,255,233,0.8)',
+  baseR1: 'rgba(0,187,204, 0.6)',
   baseR2: 'rgba(48,0,255,0.8)',
   baseR3: 'rgba(85,167,255,0.8)'
 };

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

@@ -0,0 +1,67 @@
+import { DatePickerProps } from 'antd';
+import dayjs, { type Dayjs } from 'dayjs';
+
+interface RangePickerPreset {
+  range: number;
+}
+
+export default function useRangePickerPreset(options?: RangePickerPreset): {
+  disabledRangeDaysDate: DatePickerProps['disabledDate'];
+  rangePresets: {
+    label: React.ReactNode;
+    value: [Dayjs, Dayjs] | (() => [Dayjs, Dayjs]);
+  }[];
+  range: number;
+} {
+  const { range = 60 } = options || {};
+
+  const getYearMonth = (date: Dayjs) => date.year() * 12 + date.month();
+
+  const disabledRangeDaysDate: DatePickerProps['disabledDate'] = (
+    current,
+    { from, type }
+  ) => {
+    // before 2025 is not allowed
+    if (current.year() < 2025) {
+      return true;
+    }
+
+    if (from) {
+      const minDate = from.add(1 - range, 'days');
+      const maxDate = from.add(range - 1, 'days');
+
+      switch (type) {
+        case 'year':
+          return (
+            current.year() < minDate.year() || current.year() > maxDate.year()
+          );
+
+        case 'month':
+          return (
+            getYearMonth(current) < getYearMonth(minDate) ||
+            getYearMonth(current) > getYearMonth(maxDate)
+          );
+
+        default:
+          return Math.abs(current.diff(from, 'days')) >= range;
+      }
+    }
+
+    return false;
+  };
+
+  const rangePresets: {
+    label: React.ReactNode;
+    value: [Dayjs, Dayjs] | (() => [Dayjs, Dayjs]);
+  }[] = [
+    { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
+    { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
+    { label: 'Last 60 Days', value: [dayjs().add(-60, 'd'), dayjs()] }
+  ];
+
+  return {
+    disabledRangeDaysDate,
+    rangePresets,
+    range
+  };
+}