chore: implement ui for Date picker and Date range picker for mobile screen

Author: steveninhle

ui/dashboard/src/@locales/en/common.json

@@ -37,6 +37,7 @@
   "yes": "Yes",
   "no": "No",
   "if": "IF",
+  "is": "is",
   "clear": "Clear",
   "confirm": "Confirm",
   "close": "Close",

ui/dashboard/src/@locales/ja/common.json

@@ -38,6 +38,7 @@
   "yes": "はい",
   "no": "いいえ",
   "if": "IF",
+  "is": "は",
   "clear": "クリア",
   "confirm": "確認",
   "close": "閉じる",

ui/dashboard/src/app/index.tsx

@@ -145,7 +145,7 @@ export const Root = memo(() => {
   const authToken = getTokenStorage();
   const [pageKey, setPageKey] = useState<string>(uuid());
   const [showMenu, setShowMenu] = useState<boolean>(false);
-  const { fromMobileScreen } = useScreen();
+  const { isMobile } = useScreen();
   const { isInitialLoading, isLogin, consoleAccount, myOrganizations } =
     useAuth();
 
@@ -176,15 +176,16 @@ export const Root = memo(() => {
             </Button>
           )}
         </div>
-        {fromMobileScreen ? (
+        {!isMobile ? (
           <Navigation onClickNavLink={handleChangePageKey} />
         ) : (
           <Drawer
             side="left"
             open={showMenu}
             onClose={() => setShowMenu(false)}
+            className="!z-30"
           >
-            <Navigation onClickNavLink={handleChangePageKey} />
+            <Navigation onClickNavLink={handleChangePageKey} forceExpanded />
           </Drawer>
         )}
 

ui/dashboard/src/components/date-range-picker/customize-date-range-picker.css

@@ -160,5 +160,53 @@
 }
 
 .rdrCalendarWrapper {
-  @apply sm:!w-[645px]
+  @apply !w-full sm:!w-[645px];
+}
+
+@media (max-width: 599px) {
+  .rdrDateRangePickerWrapper {
+    display: flex;
+    width: 100% !important;
+  }
+
+  .rdrCalendarWrapper {
+    font-size: 11px;
+  }
+
+  .range__months {
+    @apply p-3;
+  }
+
+  .range__weekDay {
+    @apply !h-5 !text-[10px];
+  }
+
+  .range__days--day {
+    @apply !min-h-[34px];
+  }
+
+  .range__days--number {
+    @apply !size-[34px] !text-[11px];
+  }
+
+  .rdrStartEdge,
+  .rdrEndEdge {
+    @apply !size-[34px];
+  }
+
+  .range__days--dayPreview {
+    @apply !h-[34px];
+  }
+
+  .rdrDateDisplayWrapper {
+    @apply !mx-3 !mt-8;
+  }
+
+  .rdrDateInput input {
+    @apply !h-9 !text-xs !p-2 !pr-8;
+  }
+
+  .rdrDateInput:last-child {
+    @apply !ml-2;
+  }
 }

ui/dashboard/src/components/date-range-picker/customize-navigator.tsx

@@ -10,6 +10,7 @@ import { StaticRangeOption } from '.';
 interface Props {
   currFocusedDate: Date;
   staticRanges: StaticRangeOption[];
+  selectedLabel?: string;
   handleStaticRangeClick: (range: StaticRangeOption) => void;
   changeShownDate: (
     value: Date | number | string,
@@ -30,6 +31,7 @@ const CustomizeNavigator = memo(
   ({
     currFocusedDate,
     staticRanges,
+    selectedLabel,
     handleStaticRangeClick,
     changeShownDate
   }: Props) => {
@@ -48,20 +50,19 @@ const CustomizeNavigator = memo(
 
     return (
       <div className={cn('w-full relative z-[1000] p-5 pb-0')}>
-        <div className="md:hidden w-full max-w-[350px] sm:max-w-[570px] mb-3">
-          <div className="w-[350px] sm:w-[570px] overflow-x-scroll flex items-center gap-x-3 ">
-            {staticRanges.map(staticRange => (
-              <div
-                key={staticRange.label}
-                onClick={() =>
-                  handleStaticRangeClick(staticRange as StaticRangeOption)
-                }
-                className="w-[120px] bg-gray-100 py-2 px-3 rounded-full text-nowrap typo-para-medium text-gray-700"
-              >
-                {staticRange.label}
-              </div>
-            ))}
-          </div>
+        <div className="md:hidden w-full mb-3">
+          <Dropdown
+            options={staticRanges.map(r => ({
+              label: r.label,
+              value: r.label
+            }))}
+            value={selectedLabel ?? ''}
+            onChange={value => {
+              const found = staticRanges.find(r => r.label === value);
+              if (found) handleStaticRangeClick(found);
+            }}
+            isExpand
+          />
         </div>
         <div className="flex items-center justify-between w-full border-b border-gray-200 pb-5">
           <Button

ui/dashboard/src/components/date-range-picker/index.tsx

@@ -6,12 +6,14 @@ import en from 'date-fns/locale/en-US';
 import ja from 'date-fns/locale/ja';
 import dayjs from 'dayjs';
 import { useToggleOpen } from 'hooks';
+import { useScreen } from 'hooks/use-screen';
 import { getLanguage, useTranslation } from 'i18n';
 import { formatLongDateTime } from 'utils/date-time';
 import { cn } from 'utils/style';
 import { IconCalendar } from '@icons';
 import { truncNumber } from 'pages/audit-logs/utils';
 import Button from 'components/button';
+import Drawer from 'components/drawer';
 import Icon from 'components/icon';
 import DialogModal from 'components/modal/dialog';
 import ActionBar from './action-bar';
@@ -131,6 +133,7 @@ export const ReactDateRangePicker = memo<ReactDateRangePickerProps>(
   }) => {
     const { t } = useTranslation(['common']);
     const isLanguageJapanese = getLanguage() === 'ja';
+    const { isMobile } = useScreen();
 
     const [isOpenRangePicker, onOpenRangePicker, onCloseRangePicker] =
       useToggleOpen(false);
@@ -259,6 +262,85 @@ export const ReactDateRangePicker = memo<ReactDateRangePickerProps>(
     useEffect(() => {
       getTriggerLabel?.(triggerLabel ?? '');
     }, [triggerLabel]);
+
+    const pickerContent = (
+      <>
+        <ReactDateRangePickerComp
+          {...props}
+          onChange={item => {
+            setRange(item.selection);
+            onRangeChange?.(item.selection);
+          }}
+          showPreview={showPreview}
+          moveRangeOnFirstSelection={moveRangeOnFirstSelection}
+          months={months}
+          ranges={[range]}
+          direction={direction}
+          rangeColors={rangeColors}
+          staticRanges={staticRanges}
+          showDateDisplay={showDateDisplay}
+          dateDisplayFormat="yyyy/MM/dd"
+          inputRanges={[]}
+          renderStaticRangeLabel={staticRange => (
+            <div
+              onClick={() =>
+                setStaticRangeSelected(staticRange as StaticRangeOption)
+              }
+              className={cn('hidden md:flex items-center md:size-full pl-3', {
+                'range-selected': staticRange.isSelected(range)
+              })}
+            >
+              {staticRange.label}
+            </div>
+          )}
+          dayContentRenderer={date => (
+            <span
+              onClick={() => setStaticRangeSelected(undefined)}
+              style={{ width: '100%', height: '100%' }}
+              className={cn('flex-center size-full', {
+                'range__days--all-time':
+                  staticRangeSelected?.type === 'all-time'
+              })}
+            >
+              {date.getDate()}
+            </span>
+          )}
+          navigatorRenderer={(currFocusedDate, changeShownDate) => (
+            <CustomizeNavigator
+              staticRanges={staticRanges as StaticRangeOption[]}
+              handleStaticRangeClick={handleStaticRangeClick}
+              selectedLabel={staticRangeSelected?.label}
+              currFocusedDate={currFocusedDate}
+              changeShownDate={changeShownDate}
+            />
+          )}
+          locale={isLanguageJapanese ? ja : en}
+          classNames={{
+            ...defaultClassNames,
+            ...props?.classNames
+          }}
+        />
+        {renderActionBar ? (
+          renderActionBar({
+            onApply: handleApply,
+            onCancel: () => {
+              handleSetRange();
+              onCloseRangePicker();
+              onClose?.();
+            }
+          })
+        ) : (
+          <ActionBar
+            onCancel={() => {
+              handleSetRange();
+              onCloseRangePicker();
+            }}
+            onApply={handleApply}
+          />
+        )}
+      </>
+    );
+
     return (
       <div className="w-fit max-w-[180px] sm:max-w-full">
         <Button
@@ -278,97 +360,34 @@ export const ReactDateRangePicker = memo<ReactDateRangePickerProps>(
             {triggerLabel}
           </p>
         </Button>
-        <DialogModal
-          title="Date Range Picker"
-          isShowHeader={false}
-          isOpen={isOpenRangePicker || !!isShowRange}
-          onClose={() => {
-            handleSetRange();
-            onCloseRangePicker();
-            onClose?.();
-          }}
-          className="!w-fit lg:w-[820px] p-4 sm:p-0 rounded-lg overflow-y-auto"
-        >
-          <ReactDateRangePickerComp
-            {...props}
-            onChange={item => {
-              setRange(item.selection);
-              onRangeChange?.(item.selection);
+        {isMobile ? (
+          <Drawer
+            open={isOpenRangePicker || !!isShowRange}
+            onClose={() => {
+              handleSetRange();
+              onCloseRangePicker();
+              onClose?.();
             }}
-            showPreview={showPreview}
-            moveRangeOnFirstSelection={moveRangeOnFirstSelection}
-            months={months}
-            ranges={[range]}
-            direction={direction}
-            rangeColors={rangeColors}
-            staticRanges={staticRanges}
-            showDateDisplay={showDateDisplay}
-            dateDisplayFormat="yyyy/MM/dd"
-            inputRanges={[]}
-            renderStaticRangeLabel={staticRange => (
-              <div
-                onClick={() =>
-                  setStaticRangeSelected(staticRange as StaticRangeOption)
-                }
-                className={cn(
-                  'hidden md:flex items-center size-0 md:size-full pl-3',
-                  {
-                    'range-selected': staticRange.isSelected(range)
-                  }
-                )}
-              >
-                {staticRange.label}
-              </div>
-            )}
-            dayContentRenderer={date => (
-              <span
-                onClick={() => setStaticRangeSelected(undefined)}
-                style={{
-                  width: '100%',
-                  height: '100%'
-                }}
-                className={cn('flex-center size-full', {
-                  'range__days--all-time':
-                    staticRangeSelected?.type === 'all-time'
-                })}
-              >
-                {date.getDate()}
-              </span>
-            )}
-            navigatorRenderer={(currFocusedDate, changeShownDate) => (
-              <CustomizeNavigator
-                staticRanges={staticRanges as StaticRangeOption[]}
-                handleStaticRangeClick={handleStaticRangeClick}
-                currFocusedDate={currFocusedDate}
-                changeShownDate={changeShownDate}
-              />
-            )}
-            locale={isLanguageJapanese ? ja : en}
-            classNames={{
-              ...defaultClassNames,
-              ...props?.classNames
+            side="bottom"
+            className="z-10"
+          >
+            {pickerContent}
+          </Drawer>
+        ) : (
+          <DialogModal
+            title="Date Range Picker"
+            isShowHeader={false}
+            isOpen={isOpenRangePicker || !!isShowRange}
+            onClose={() => {
+              handleSetRange();
+              onCloseRangePicker();
+              onClose?.();
             }}
-          />
-
-          {renderActionBar ? (
-            renderActionBar({
-              onApply: handleApply,
-              onCancel: () => {
-                handleSetRange();
-                onCloseRangePicker();
-                onClose?.();
-              }
-            })
-          ) : (
-            <ActionBar
-              onCancel={() => {
-                handleSetRange();
-                onCloseRangePicker();
-              }}
-              onApply={handleApply}
-            />
-          )}
-        </DialogModal>
+            className="!w-fit lg:w-[820px] p-4 sm:p-0 rounded-lg overflow-y-auto"
+          >
+            {pickerContent}
+          </DialogModal>
+        )}
       </div>
     );
   }