feat: add a component for changing days (#48)

src/components/Orders/Orders.tsx

@@ -13,10 +13,12 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 
 import OrderItem from '../OrderItem';
 import { OrderProps } from '../OrderItem/OrderItem';
 import { armService } from '../../api/arm';
+import DateNavigator from '../DateNavigator';
 
 const TABLE_HEADERS = [
   'carNumber' as const,
@@ -39,13 +41,14 @@ const Orders = () => {
   const [orders, setOrders] = useState<OrderProps[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [currentDate, setCurrentDate] = useState(new Date());
 
   useEffect(() => {
     const loadOrders = async () => {
       setLoading(true);
 
       try {
-        const data = await fetchOrders();
+        const data = await fetchOrders({ date: currentDate });
         setOrders(data.body);
       } catch (err) {
         setError(err.message);
@@ -62,13 +65,26 @@ const Orders = () => {
     };
 
     loadOrders();
-  }, [toast, t]);
+  }, [toast, t, currentDate]);
 
   return (
     <Box p='8'>
       <Heading size='lg' mb='5'>
         {t('title')}
       </Heading>
+
+      <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>