feat: add a date filter for master and maps

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Heading, HStack, Divider, Flex } from '@chakra-ui/react';
+import { Box, Button, Heading, HStack, Flex } from '@chakra-ui/react';
 import React from 'react';
 import { useLocation, Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -30,7 +30,6 @@ const Header = () => {
               {t('orders')}
             </Button>
           )}
-          <Divider orientation='vertical' height='30px' />
           {URLs.armMaster.isOn && (
             <Button
               as={Link}

src/components/Map/Map.tsx

@@ -1,11 +1,13 @@
-import React, { useMemo } from 'react';
+import React, { useState } from 'react';
 import { Box, Flex, Heading, Spinner } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { YMaps, Map, Placemark } from '@pbe/react-yandex-maps';
 import { useLocation } from 'react-router-dom';
+import dayjs from 'dayjs';
 
 import { useGetOrdersQuery } from '../../__data__/service/api';
 import getCoordinates from '../../utils/getCoordinates';
+import DateNavigator from '../DateNavigator';
 
 const OrdersMap = () => {
   const { t } = useTranslation('~', {
@@ -14,14 +16,13 @@ const OrdersMap = () => {
 
   const location = useLocation();
   const params = new URLSearchParams(location.search);
-  const latFromUrl = parseFloat(params.get('lat') || 55.78);
-  const lonFromUrl = parseFloat(params.get('lon') || 49.12);
-  const currentDate = useMemo(
-    () =>
-      params.get('currentDate')
-        ? new Date(params.get('currentDate'))
-        : new Date(),
-    [],
+  const latFromUrl = parseFloat(params.get('lat') || '55.78');
+  const lonFromUrl = parseFloat(params.get('lon') || '49.12');
+
+  const [currentDate, setCurrentDate] = useState(
+    params.get('currentDate')
+      ? new Date(params.get('currentDate'))
+      : new Date(),
   );
 
   const {
@@ -44,6 +45,18 @@ const OrdersMap = () => {
         {t('title')}
       </Heading>
 
+      <DateNavigator
+        currentDate={currentDate}
+        onPreviousDate={() =>
+          setCurrentDate((prevDate) =>
+            dayjs(prevDate).subtract(1, 'day').toDate(),
+          )
+        }
+        onNextDate={() =>
+          setCurrentDate((prevDate) => dayjs(prevDate).add(1, 'day').toDate())
+        }
+      />
+
       {isLoading && (
         <Flex justifyContent='center' alignItems='center'>
           <Spinner size='lg' />

src/components/Masters/Masters.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Box,
   Heading,
@@ -15,11 +15,13 @@ import {
   Spinner,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterDrawer';
 import { useGetMastersQuery } from '../../__data__/service/api';
 import useShowToast from '../../hooks/useShowToast';
+import DateNavigator from '../DateNavigator';
 
 const TABLE_HEADERS = [
   'name' as const,
@@ -31,12 +33,18 @@ const TABLE_HEADERS = [
 const Masters = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const showToast = useShowToast();
+  const [currentDate, setCurrentDate] = useState(new Date());
 
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.arm.master',
   });
 
-  const { data: masters, error, isLoading, isSuccess } = useGetMastersQuery();
+  const {
+    data: masters,
+    error,
+    isLoading,
+    isSuccess,
+  } = useGetMastersQuery({ date: currentDate });
 
   useEffect(() => {
     if (error) {
@@ -46,12 +54,24 @@ const Masters = () => {
 
   return (
     <Box p='8'>
-      <Flex justifyContent='space-between' alignItems='center' mb='5'>
+      <Flex justifyContent='space-between' alignItems='baseline' mb='5'>
         <Heading size='lg'> {t('title')}</Heading>
+
         <Button colorScheme='green' onClick={onOpen}>
           + {t('add')}
         </Button>
       </Flex>
+      <DateNavigator
+        currentDate={currentDate}
+        onPreviousDate={() =>
+          setCurrentDate((prevDate) =>
+            dayjs(prevDate).subtract(1, 'day').toDate(),
+          )
+        }
+        onNextDate={() =>
+          setCurrentDate((prevDate) => dayjs(prevDate).add(1, 'day').toDate())
+        }
+      />
       <Table variant='simple' colorScheme='blackAlpha'>
         <Thead>
           <Tr>

src/components/Orders/Orders.tsx

@@ -53,7 +53,7 @@ const Orders = () => {
     isSuccess: isMastersSuccess,
     isError: isMastersError,
     error: mastersError,
-  } = useGetMastersQuery();
+  } = useGetMastersQuery({ date: currentDate });
 
   const isLoading = isOrdersLoading || isMastersLoading;
   const isSuccess = isOrdersSuccess && isMastersSuccess;