feat: add format date(#40)

src/components/MasterItem/MasterItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
-
 import MasterActionsMenu from '../MasterActionsMenu';
+import { getTimeSlot } from '../../lib/date-helpers';
 
 const MasterItem = ({ name, schedule, phone }) => {
   return (
@@ -9,9 +9,9 @@ const MasterItem = ({ name, schedule, phone }) => {
       <Td>{name}</Td>
       <Td>
         <Stack direction='row'>
-          {schedule.map((time, index) => (
+          {schedule.map(({ startWashTime, endWashTime }, index) => (
             <Badge colorScheme={'green'} key={index}>
-              {time}
+              {getTimeSlot(startWashTime, endWashTime)}
             </Badge>
           ))}
         </Stack>

src/components/OrderItem/OrderItem.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import { getTimeSlot } from '../../lib/date-helpers';
 
 const statuses = [
   'pending' as const,
@@ -15,7 +17,8 @@ type GetArrItemType<ArrType> =
 
 export type OrderProps = {
   carNumber?: string;
-  washTime?: string;
+  startWashTime?: string;
+  endWashTime?: string;
   orderDate?: string;
   status?: GetArrItemType<typeof statuses>;
   phone?: string;
@@ -24,7 +27,8 @@ export type OrderProps = {
 
 const OrderItem = ({
   carNumber,
-  washTime,
+  startWashTime,
+  endWashTime,
   orderDate,
   status,
   phone,
@@ -39,8 +43,8 @@ const OrderItem = ({
   return (
     <Tr>
       <Td>{carNumber}</Td>
-      <Td>{washTime}</Td>
-      <Td>{orderDate}</Td>
+      <Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
+      <Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
       <Td>
         <Select
           value={statusSelect}

src/lib/date-helpers.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import i18next from 'i18next';
+
+export const getTimeSlot = (start: string, end: string) => {
+  const startDay = dayjs(start).format('HH:mm');
+  const endDay = dayjs(end).format('HH:mm');
+
+  return i18next.t('~:dry-wash.washTime.timeSlot', {
+    start: startDay,
+    end: endDay,
+  });
+};