feat(console): add date picker in dashboard (#1085)

packages/console/src/pages/Dashboard/components/Block.tsx

@@ -29,7 +29,7 @@ const Block = ({ varient = 'default', count, delta, title }: Props) => {
         <div className={styles.number}>{formatNumberWithComma(count)}</div>
         {delta !== undefined && (
           <div className={classNames(styles.delta, delta < 0 && styles.down)}>
-            <span>(${deltaLable})</span>
+            <span>({deltaLable})</span>
             {delta > 0 && <ArrowUp />}
             {delta < 0 && <ArrowDown />}
           </div>

packages/console/src/pages/Dashboard/index.module.scss

@@ -28,6 +28,17 @@
   margin-bottom: _.unit(4);
 }
 
+.activeCard {
+  position: relative;
+
+  .datePicker {
+    position: absolute;
+    right: _.unit(6);
+    top: _.unit(6);
+    width: 160px;
+  }
+}
+
 .curve {
   margin: _.unit(10) 0 _.unit(6);
   width: 100%;

packages/console/src/pages/Dashboard/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import dayjs from 'dayjs';
+import React, { ChangeEventHandler, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Area,
@@ -12,6 +13,7 @@ import {
 import useSWR from 'swr';
 
 import Card from '@/components/Card';
+import TextInput from '@/components/TextInput';
 
 import Block from './components/Block';
 import Skeleton from './components/Skeleton';
@@ -19,13 +21,20 @@ import * as styles from './index.module.scss';
 import { ActiveUsersResponse, NewUsersResponse, TotalUsersResponse } from './types';
 
 const Dashboard = () => {
+  const [date, setDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
   const { data: totalData } = useSWR<TotalUsersResponse>('/api/dashboard/users/total');
   const { data: newData } = useSWR<NewUsersResponse>('/api/dashboard/users/new');
-  const { data: activeData } = useSWR<ActiveUsersResponse>('/api/dashboard/users/active');
+  const { data: activeData } = useSWR<ActiveUsersResponse>(
+    `/api/dashboard/users/active?date=${date}`
+  );
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const isLoading = !totalData || !newData || !activeData;
 
+  const handleDateChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    setDate(event.target.value);
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -48,13 +57,16 @@ const Dashboard = () => {
               delta={newData.last7Days.delta}
             />
           </div>
-          <Card>
+          <Card className={styles.activeCard}>
             <Block
               title="dashboard.daily_active_users"
               count={activeData.dau.count}
               delta={activeData.dau.delta}
               varient="plain"
             />
+            <div className={styles.datePicker}>
+              <TextInput type="date" value={date} onChange={handleDateChange} />
+            </div>
             <div className={styles.curve}>
               <ResponsiveContainer>
                 <AreaChart