feat: usage filter & export & dashbord (#3538)

* feat: usage filter & export & dashbord

* adjust ui

* fix tmb scroll

* fix code & selecte all

* merge

packages/web/components/common/DateRangePicker/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { Box, Card, Flex, useTheme, useOutsideClick, Button } from '@chakra-ui/react';
 import { addDays, format } from 'date-fns';
 import { type DateRange, DayPicker } from 'react-day-picker';
@@ -14,12 +14,14 @@ const DateRangePicker = ({
   defaultDate = {
     from: addDays(new Date(), -30),
     to: new Date()
-  }
+  },
+  dateRange
 }: {
   onChange?: (date: DateRange) => void;
   onSuccess?: (date: DateRange) => void;
   position?: 'bottom' | 'top';
   defaultDate?: DateRange;
+  dateRange?: DateRange;
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -27,6 +29,12 @@ const DateRangePicker = ({
   const [range, setRange] = useState<DateRange | undefined>(defaultDate);
   const [showSelected, setShowSelected] = useState(false);
 
+  useEffect(() => {
+    if (dateRange) {
+      setRange(dateRange);
+    }
+  }, [dateRange]);
+
   const formatSelected = useMemo(() => {
     if (range?.from && range.to) {
       return `${format(range.from, 'y-MM-dd')} ~ ${format(range.to, 'y-MM-dd')}`;
@@ -49,7 +57,7 @@ const DateRangePicker = ({
         py={1}
         borderRadius={'sm'}
         cursor={'pointer'}
-        bg={'myGray.100'}
+        bg={'myGray.50'}
         fontSize={'sm'}
         onClick={() => setShowSelected(true)}
       >