feat: add format date(#40)

locales/ru.json

@@ -49,5 +49,6 @@
   "dry-wash.notFound.button.back": "Вернуться на главную",
   "dry-wash.errorBoundary.title":"Что-то пошло не так",
   "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
-  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
 }

package-lock.json

@@ -17,6 +17,7 @@
                 "@fontsource/open-sans": "^5.1.0",
                 "@lottiefiles/react-lottie-player": "^3.5.4",
                 "@types/react": "^18.3.12",
+                "dayjs": "^1.11.13",
                 "express": "^4.21.1",
                 "framer-motion": "^6.2.8",
                 "i18next": "^23.16.4",
@@ -5304,6 +5305,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/dayjs": {
+            "version": "1.11.13",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+            "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+        },
         "node_modules/debug": {
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",

package.json

@@ -25,6 +25,7 @@
         "@fontsource/open-sans": "^5.1.0",
         "@lottiefiles/react-lottie-player": "^3.5.4",
         "@types/react": "^18.3.12",
+        "dayjs": "^1.11.13",
         "express": "^4.21.1",
         "framer-motion": "^6.2.8",
         "i18next": "^23.16.4",

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>{getTimeSlot(startWashTime, endWashTime)}</Td>
-      <Td>{orderDate}</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,
+  });
+};

stubs/json/arm-masters/success.json

@@ -4,13 +4,31 @@
     {
       "id": "masters1",
       "name": "Иван Иванов",
-      "schedule": ["15:00 - 16:30", "17:00 - 18:00"],
+      "schedule": [ {
+        "id": "order1",
+        "startWashTime": "2024-11-24T10:30:00.000Z",
+        "endWashTime": "2024-11-24T16:30:00.000Z"
+      },
+        {
+          "id": "order2",
+          "startWashTime": "2024-11-24T11:30:00.000Z",
+          "endWashTime": "2024-11-24T17:30:00.000Z"
+        }],
       "phone": "+7 900 123 45 67"
     },
     {
       "id": "masters12",
       "name": "Иван Иванов",
-      "schedule": ["15:00 - 16:30", "17:00 - 18:00"],
+      "schedule": [ {
+        "id": "order1",
+        "startWashTime": "2024-11-24T10:30:00.000Z",
+        "endWashTime": "2024-11-24T16:30:00.000Z"
+      },
+        {
+          "id": "order2",
+          "startWashTime": "2024-11-24T11:30:00.000Z",
+          "endWashTime": "2024-11-24T17:30:00.000Z"
+        }],
       "phone": "+7 900 123 45 67"
     }
   ]

stubs/json/arm-orders/success.json

@@ -4,29 +4,22 @@
     {
       "id": "order1",
       "carNumber": "A123BC",
-      "washTime": "10:30",
+      "startWashTime": "2024-11-24T10:30:00.000Z",
-      "orderDate": "2024-10-31",
+      "endWashTime": "2024-11-24T16:30:00.000Z",
+      "orderDate": "2024-11-24T08:41:46.366Z",
       "status": "progress",
       "phone": "79001234563",
       "location": "Казань, ул. Баумана, 1"
     },
     {
       "id": "order2",
-      "carNumber": "A123BC",
+      "carNumber": "A245BC",
-      "washTime": "10:30",
+      "startWashTime": "2024-11-24T11:30:00.000Z",
-      "orderDate": "2024-10-31",
+      "endWashTime": "2024-11-24T17:30:00.000Z",
+      "orderDate": "2024-11-24T07:40:46.366Z",
       "status": "progress",
-      "phone": "79001234568",
+      "phone": "79001234567",
-      "location": "Казань, ул. Баумана, 1"
+      "location": "Казань, ул. Баумана, 43"
-    },
-    {
-      "id": "order3",
-      "carNumber": "A123BC",
-      "washTime": "10:30",
-      "orderDate": "2024-10-31",
-      "status": "progress",
-      "phone": "79001234569",
-      "location": "Казань, ул. Баумана, 1"
     }
   ]
 }