0.12.0

Reviewed-on: #96

bro.config.js

@@ -16,6 +16,7 @@ module.exports = {
     'dry-wash.order.view': '/order/:orderId',
     'dry-wash.arm.master': 'master',
     'dry-wash.arm.order': 'order',
+    'dry-wash.arm.map': 'map',
     'dry-wash.arm': '/arm/*',
   },
   features: {

locales/en.json

@@ -125,5 +125,8 @@
   "dry-wash.errorBoundary.title": "Something went wrong",
   "dry-wash.errorBoundary.description": "We are already working on fixing the issue",
   "dry-wash.errorBoundary.button.reload": "Reload Page",
-  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}",
+  "dry-wash.arm.map.title": "Map of orders",
+  "dry-wash.arm.map.carNumber": "Car Number",
+  "dry-wash.arm.map.status": "Status"
 }

locales/ru.json

@@ -131,5 +131,8 @@
   "dry-wash.errorBoundary.title": "Что-то пошло не так",
   "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
   "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
-  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}",
+  "dry-wash.arm.map.title": " Карта заказов",
+  "dry-wash.arm.map.carNumber": " Номер автомобиля",
+  "dry-wash.arm.map.status": "Статус"
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "dry-wash",
-  "version": "0.9.2",
+  "version": "0.12.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dry-wash",
-      "version": "0.9.2",
+      "version": "0.12.0",
       "license": "ISC",
       "dependencies": {
         "@babel/core": "^7.26.7",
@@ -3610,7 +3610,6 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@pbe/react-yandex-maps/-/react-yandex-maps-1.2.5.tgz",
       "integrity": "sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==",
-      "license": "MIT",
       "dependencies": {
         "@types/yandex-maps": "2.1.29"
       },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-wash",
-  "version": "0.9.2",
+  "version": "0.12.0",
   "description": "<a id=\"readme-top\"></a>",
   "main": "./src/index.tsx",
   "scripts": {

src/__data__/service/api.ts

@@ -21,8 +21,16 @@ export const api = createApi({
   }),
   tagTypes: ['Masters', 'Orders'],
   endpoints: (builder) => ({
-    getMasters: builder.query<Master[], void>({
-      query: () => ({ url: '/arm/masters' }),
+    getMasters: builder.query<Master[], { date: Date }>({
+      query: ({ date }) => {
+        const startDate = dayjs(date).startOf('day').toISOString();
+        const endDate = dayjs(date).endOf('day').toISOString();
+        return {
+          url: '/arm/masters/list',
+          method: 'POST',
+          body: { startDate, endDate },
+        };
+      },
       transformResponse: extractBodyFromResponse<Master[]>,
       providesTags: ['Masters'],
     }),
@@ -32,7 +40,7 @@ export const api = createApi({
         method: 'PATCH',
         body: { status, notes, master },
       }),
-      invalidatesTags: ['Orders'],
+      invalidatesTags: ['Orders', 'Masters'],
     }),
     getOrders: builder.query<OrderArm[], { date: Date }>({
       query: ({ date }) => {
@@ -54,14 +62,14 @@ export const api = createApi({
         method: 'POST',
         body: master,
       }),
-      invalidatesTags: ['Masters'],
+      invalidatesTags: ['Masters', 'Orders'],
     }),
     deleteMaster: builder.mutation<void, { id: string }>({
       query: ({ id }) => ({
         url: `/arm/masters/${id}`,
         method: 'DELETE',
       }),
-      invalidatesTags: ['Masters'],
+      invalidatesTags: ['Masters', 'Orders'],
     }),
     updateMaster: builder.mutation<void, UpdateMasterPayload>({
       query: ({ id, name, phone }) => ({
@@ -69,7 +77,7 @@ export const api = createApi({
         method: 'PATCH',
         body: { name, phone },
       }),
-      invalidatesTags: ['Masters'],
+      invalidatesTags: ['Masters', 'Orders'],
     }),
   }),
 });

src/__data__/urls.ts

@@ -33,6 +33,18 @@ export const URLs = {
     url: getNavigationValue('dry-wash.arm.order'),
     isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
   },
+  armMap: {
+    url: getNavigationValue('dry-wash.arm.map'),
+    isOn: Boolean(getNavigationValue('dry-wash.arm.map')),
+    getUrl({ lat, lon, currentDate }) {
+      return (
+        getFullUrls('/arm') +
+        '/' +
+        getNavigationValue('dry-wash.arm.map') +
+        `?lat=${lat}&lon=${lon}&currentDate=${currentDate}`
+      );
+    },
+  },
   armBase: {
     url: getFullUrls(getNavigationValue('dry-wash.arm')),
     isOn: Boolean(getNavigationValue('dry-wash.arm')),

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}
@@ -42,6 +41,17 @@ const Header = () => {
               {t('master')}
             </Button>
           )}
+
+          {URLs.armMap.isOn && (
+            <Button
+              as={Link}
+              to={URLs.armMap.url}
+              colorScheme={isActive(URLs.armMap.url) ? 'green' : 'blue'}
+              variant={isActive(URLs.armMap.url) ? 'outline' : 'ghost'}
+            >
+              Карта заказов
+            </Button>
+          )}
         </HStack>
       </Flex>
     </Box>

src/components/LayoutArm/LayoutArm.tsx

@@ -6,6 +6,7 @@ import Orders from '../Orders';
 import Masters from '../Masters';
 import { URLs } from '../../__data__/urls';
 import Header from '../Header';
+import OrdersMap from '../Map';
 
 const LayoutArm = () => {
   let defaultRedirect = null;
@@ -28,6 +29,9 @@ const LayoutArm = () => {
           {URLs.armMaster.isOn && (
             <Route path={URLs.armMaster.url} element={<Masters />} />
           )}
+          {URLs.armMap.isOn && (
+            <Route path={URLs.armMap.url} element={<OrdersMap />} />
+          )}
         </Routes>
       </Box>
     </Flex>

src/components/Map/Map.tsx

@@ -0,0 +1,95 @@
+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('~', {
+    keyPrefix: 'dry-wash.arm.map',
+  });
+
+  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, setCurrentDate] = useState(
+    params.get('currentDate')
+      ? new Date(params.get('currentDate'))
+      : new Date(),
+  );
+
+  const {
+    data: ordersData,
+    isLoading,
+    isSuccess,
+  } = useGetOrdersQuery({ date: currentDate });
+
+  // Получаем координаты из location
+  const orders = ordersData
+    ?.map((order) => {
+      const coords = getCoordinates(order.location);
+      return coords ? { ...order, ...coords } : null;
+    })
+    .filter(Boolean);
+
+  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())
+        }
+      />
+
+      {isLoading && (
+        <Flex justifyContent='center' alignItems='center'>
+          <Spinner size='lg' />
+        </Flex>
+      )}
+
+      {isSuccess && (
+        <YMaps>
+          <Map
+            defaultState={{ center: [latFromUrl, lonFromUrl], zoom: 12 }}
+            width='100%'
+            height='70vh'
+            modules={['geoObject.addon.balloon']}
+          >
+            {orders.map(({ id, lat, lon, carNumber, status }) => (
+              <Placemark
+                key={id}
+                geometry={[lat, lon]}
+                options={{
+                  preset: 'islands#blueAutoIcon',
+                  iconColor: 'blue',
+                  balloonPanelMaxMapArea: 0,
+                }}
+                properties={{
+                  balloonContent: `<strong>${t('carNumber')}</strong> ${carNumber}<br/><strong>${t('status')}</strong> ${status}`,
+                }}
+              />
+            ))}
+          </Map>
+        </YMaps>
+      )}
+    </Box>
+  );
+};
+
+export default OrdersMap;

src/components/Map/index.ts

@@ -0,0 +1 @@
+export { default } from './Map';

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/OrderItem/OrderItem.tsx

@@ -1,13 +1,15 @@
 import React, { ChangeEvent, useState } from 'react';
-import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import { Td, Tr, Link, Select, Button } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import { ViewIcon } from '@chakra-ui/icons';
+import { Link as LinkRouter } from 'react-router-dom';
 
 import { getTimeSlot } from '../../lib';
 import { useUpdateOrdersMutation } from '../../__data__/service/api';
 import { OrderArm, Status, statuses } from '../../models/api';
-import PopoverTemplate from '../PopoverTemplate';
+import getCoordinates from '../../utils/getCoordinates';
+import { URLs } from '../../__data__/urls';
 
 const statusColors: Record<Status, string> = {
   pending: 'yellow.100',
@@ -27,6 +29,7 @@ const OrderItem = ({
   master,
   allMasters,
   id,
+  currentDate,
 }: OrderArm) => {
   const [updateOrders] = useUpdateOrdersMutation();
   const { t } = useTranslation('~', {
@@ -61,6 +64,8 @@ const OrderItem = ({
     (master) => master.id === masterSelectId,
   );
 
+  const { lat = 55.78, lon = 49.12 } = getCoordinates(location);
+
   return (
     <Tr>
       <Td>{carNumber}</Td>
@@ -99,7 +104,12 @@ const OrderItem = ({
         <Link href='tel:'>{phone}</Link>
       </Td>
       <Td>
-        <PopoverTemplate trigger={<ViewIcon />} description={location} />
+        <Button
+          as={LinkRouter}
+          to={URLs.armMap.getUrl({ lat, lon, currentDate })}
+        >
+          <ViewIcon />
+        </Button>
       </Td>
     </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;
@@ -112,6 +112,7 @@ const Orders = () => {
                 key={index}
                 {...order}
                 status={order.status as OrderArm['status']}
+                currentDate={currentDate}
               />
             ))}
         </Tbody>

src/components/order-form/form/date-time/helper.ts

@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
+export const getMinDatetime = (dateTimeString: string, minDateTimeString: string) => {
+  const time = dayjs(dateTimeString);
+
+  const minDate = dayjs(minDateTimeString).format('YYYY-MM-DD');
+  const minTime = dayjs(minDateTimeString);
+
+  const newTime = (time && time.isAfter(minTime)) ? time : minTime;
+
+  return [minDate, newTime.format('HH:mm')].join('T');
+};
+
+export const getMaxDatetime = (dateTimeString: string, maxDateTimeString: string) => {
+  const time = dayjs(dateTimeString);
+
+  const maxDate = dayjs(maxDateTimeString).format('YYYY-MM-DD');
+  const maxTime = dayjs(maxDateTimeString);
+
+  const newTime = (time && time.isBefore(maxTime)) ? time : maxTime;
+
+  return [maxDate, newTime.format('HH:mm')].join('T');
+};

src/components/order-form/form/date-time/index.ts

@@ -1 +1,2 @@
-export { type DateTimeInputProps, DateTimeInput } from './date-time';
+export { type DateTimeInputProps, DateTimeInput } from './date-time';
+export { getMinDatetime, getMaxDatetime } from './helper';

src/components/order-form/form/order-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
@@ -10,7 +10,7 @@ import { OrderFormProps, OrderFormValues } from './types';
 import { PhoneInput } from './phone';
 import { SubmitButton } from './submit';
 import { defaultValues, useGetValidationRules } from './helper';
-import { DateTimeInput } from './date-time';
+import { DateTimeInput, getMinDatetime, getMaxDatetime } from './date-time';
 import {
   LocationInput,
   MapComponent,
@@ -40,6 +40,19 @@ export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
     'carLocation',
   ]);
 
+  useEffect(() => {
+    if (!availableDatetimeBegin) {
+      return;
+    }
+    setValue('availableDatetimeEnd', getMinDatetime(availableDatetimeEnd, availableDatetimeBegin));
+  }, [availableDatetimeBegin]);
+  useEffect(() => {
+    if (!availableDatetimeEnd) {
+      return;
+    }
+    setValue('availableDatetimeBegin', getMaxDatetime(availableDatetimeBegin, availableDatetimeEnd));
+  }, [availableDatetimeEnd]);
+
   return (
     <Box p={4} marginInline='auto' {...props}>
       <VStack

src/components/order-view/details/car/car-details.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FC } from 'react';
+import { Flex, Image } from '@chakra-ui/react';
+
+import { Order } from '../../../../models';
+import {
+  carBodySelectOptions,
+  carColorSelectOptions,
+} from '../../../order-form';
+
+import { LicensePlate } from './license-plate';
+
+type Props = Pick<Order.View, 'carNumber' | 'carBody' | 'carColor'>;
+
+export const CarDetails: FC<Props> = ({ carNumber, carBody, carColor }) => {
+  const image = carBodySelectOptions.find(({ value }) => value === carBody).img;
+  const color =
+    carColorSelectOptions.find(({ value }) => value === carColor)?.code ??
+    'black';
+
+  return (
+    <Flex direction='column' alignItems='center' p={2}>
+      <div style={{ backgroundColor: color, width: 'fit-content' }}>
+        <Image src={image} style={{ mixBlendMode: 'lighten' }} />
+      </div>
+      <LicensePlate carNumber={carNumber} />
+    </Flex>
+  );
+};

src/components/order-view/details/car/index.ts

@@ -0,0 +1 @@
+export { CarDetails } from './car-details';

src/components/order-view/details/car/license-plate/index.ts

@@ -0,0 +1 @@
+export { LicensePlate } from './license-plate';

src/components/order-view/details/car/license-plate/license-plate.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { Flex, HStack, Text } from '@chakra-ui/react';
+
+import { Order } from '../../../../../models';
+
+export const LicensePlate: FC<Pick<Order.View, 'carNumber'>> = ({
+  carNumber,
+}) => {
+  const firstLetter = carNumber.substring(0, 1);
+  const digits = carNumber.substring(1, 4);
+  const lastLetters = carNumber.substring(4, 6);
+  const region = carNumber.substring(6);
+
+  return (
+    <Flex
+      align='center'
+      bg='black'
+      borderRadius='md'
+      width='fit-content'
+      boxShadow='md'
+      fontFamily='mono'
+      fontWeight='bold'
+      fontSize='24px'
+      textTransform='uppercase'
+      color='black'
+      alignItems='stretch'
+    >
+      <HStack
+        bg='white'
+        border='2px solid black'
+        borderRadius='md'
+        px={2}
+        gap={0}
+        alignItems='baseline'
+      >
+        <Text>{firstLetter}</Text>
+        <Text fontSize='28px' lineHeight={0}>{digits}</Text>
+        <Text>{lastLetters}</Text>
+      </HStack>
+      <Flex
+        bg='white'
+        border='2px solid black'
+        borderInlineStart='none'
+        borderRadius='md'
+        px={2}
+        alignItems='center'
+      >
+        {region}
+      </Flex>
+    </Flex>
+  );
+};

src/components/order-view/details/order-details.tsx

@@ -7,6 +7,7 @@ import {
   UnorderedList,
   ListItem,
   Text,
+  Flex,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
@@ -17,12 +18,10 @@ import 'dayjs/locale/en';
 
 import { Order } from '../../../models/landing';
 import { formatDatetime } from '../../../lib';
-import {
-  carBodySelectOptions,
-  carColorSelectOptions,
-} from '../../order-form';
+import { carBodySelectOptions, carColorSelectOptions } from '../../order-form';
 
 import { OrderStatus } from './status';
+import { CarDetails } from './car';
 
 type OrderDetailsProps = Pick<
   Order.View,
@@ -60,7 +59,9 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
   const { t: tCarColor } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-create.car-color-select.colors',
   });
-  const carColorTKey = carColorSelectOptions.find(({ value }) => value === carColor)?.labelTKey;
+  const carColorTKey = carColorSelectOptions.find(
+    ({ value }) => value === carColor,
+  )?.labelTKey;
 
   return (
     <>
@@ -76,44 +77,43 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
         <Text>{dayjs(created).format('LLL')}</Text>
         <OrderStatus value={status} />
       </HStack>
-      <UnorderedList styleType='none'>
-        {[
-          {
-            label: t('owner'),
-            value: phone,
-          },
-          {
-            label: t('car'),
-            value: [
-              carNumber,
-              tCarBody(
-                `${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
-              ),
-              carColorTKey ? tCarColor(carColorTKey) : carColor,
-            ]
-              .filter((v) => v)
-              .join(', '),
-          },
-          {
-            label: t('location'),
-            value: location,
-          },
-          {
-            label: t('datetime-range'),
-            value: [
-              formatDatetime(startWashTime),
-              formatDatetime(endWashTime),
-            ].join(' - '),
-          },
-        ].map(({ label, value }, i) => (
-          <ListItem key={i}>
-            {label}:{' '}
-            <Text as='span' color='primary.500' fontWeight='bold'>
-              {value}
-            </Text>
-          </ListItem>
-        ))}
-      </UnorderedList>
+      <Flex direction={{ base: 'column', md: 'row-reverse' }} gap={4}>
+        <CarDetails
+          carNumber={carNumber}
+          carBody={carBody}
+          carColor={carColor}
+        />
+        <UnorderedList styleType='none'>
+          {[
+            {
+              label: t('car'),
+              value: `${tCarBody(carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey)} (${carColorTKey ? tCarColor(carColorTKey) : carColor})`,
+            },
+            {
+              label: t('owner'),
+              value: phone,
+            },
+            {
+              label: t('location'),
+              value: location,
+            },
+            {
+              label: t('datetime-range'),
+              value: [
+                formatDatetime(startWashTime),
+                formatDatetime(endWashTime),
+              ].join(' - '),
+            },
+          ].map(({ label, value }, i) => (
+            <ListItem key={i}>
+              <Text as='span' color='primary.400'>
+                {label}:
+              </Text>{' '}
+              <Text as='span'>{value}</Text>
+            </ListItem>
+          ))}
+        </UnorderedList>
+      </Flex>
       <Alert status='info' alignItems='flex-start'>
         <AlertIcon />
         {t('alert')}

src/models/api/order.ts

@@ -56,4 +56,5 @@ export type OrderArm = {
   notes: '';
   allMasters: Master[];
   id: string;
+  currentDate: Date;
 };

src/pages/__tests__/__snapshots__/masters.test.tsx.snap

@@ -25,10 +25,6 @@ exports[`Master Page should display master list and show details when master but
           >
             Заказы
           </a>
-          <hr
-            aria-orientation="vertical"
-            class="chakra-divider css-zw0v9u"
-          />
           <a
             class="chakra-button css-g11sl9"
             data-testid="master-button"
@@ -36,6 +32,12 @@ exports[`Master Page should display master list and show details when master but
           >
             Мастера
           </a>
+          <a
+            class="chakra-button css-19byqlw"
+            href="/map"
+          >
+            Карта заказов
+          </a>
         </div>
       </div>
     </header>
@@ -46,7 +48,7 @@ exports[`Master Page should display master list and show details when master but
         class="css-1glkkdp"
       >
         <div
-          class="css-sd3fvu"
+          class="css-1dvg3xs"
         >
           <h2
             class="chakra-heading css-1jb3vzl"
@@ -62,6 +64,45 @@ exports[`Master Page should display master list and show details when master but
             Добавить
           </button>
         </div>
+        <div
+          class="css-1u3smh"
+        >
+          <button
+            class="chakra-button css-ez23ye"
+            type="button"
+          >
+            <svg
+              class="chakra-icon css-onkibi"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+          <p
+            class="chakra-text css-52ukzg"
+          >
+            17.03.2025
+          </p>
+          <button
+            class="chakra-button css-ez23ye"
+            type="button"
+          >
+            <svg
+              class="chakra-icon css-onkibi"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
         <table
           class="chakra-table css-5605sr"
         >
@@ -216,11 +257,11 @@ exports[`Master Page should display master list and show details when master but
                 class="css-zgoslk"
               >
                 <button
-                  aria-controls="menu-list-:r2:"
+                  aria-controls="menu-list-:r3:"
                   aria-expanded="false"
                   aria-haspopup="menu"
                   class="chakra-button chakra-menu__menu-button css-13sr8jm"
-                  id="menu-button-:r2:"
+                  id="menu-button-:r3:"
                   type="button"
                 >
                   <svg
@@ -251,7 +292,7 @@ exports[`Master Page should display master list and show details when master but
                   <div
                     aria-orientation="vertical"
                     class="chakra-menu__menu-list css-s5t7bz"
-                    id="menu-list-:r2:"
+                    id="menu-list-:r3:"
                     role="menu"
                     style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
                     tabindex="-1"
@@ -260,7 +301,7 @@ exports[`Master Page should display master list and show details when master but
                       aria-disabled="false"
                       class="chakra-menu__menuitem css-y7jzs3"
                       data-index="0"
-                      id="menu-list-:r2:-menuitem-:r3:"
+                      id="menu-list-:r3:-menuitem-:r4:"
                       role="menuitem"
                       tabindex="-1"
                       type="button"
@@ -391,11 +432,11 @@ exports[`Master Page should display master list and show details when master but
                 class="css-zgoslk"
               >
                 <button
-                  aria-controls="menu-list-:r5:"
+                  aria-controls="menu-list-:r6:"
                   aria-expanded="false"
                   aria-haspopup="menu"
                   class="chakra-button chakra-menu__menu-button css-13sr8jm"
-                  id="menu-button-:r5:"
+                  id="menu-button-:r6:"
                   type="button"
                 >
                   <svg
@@ -426,7 +467,7 @@ exports[`Master Page should display master list and show details when master but
                   <div
                     aria-orientation="vertical"
                     class="chakra-menu__menu-list css-s5t7bz"
-                    id="menu-list-:r5:"
+                    id="menu-list-:r6:"
                     role="menu"
                     style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
                     tabindex="-1"
@@ -435,7 +476,7 @@ exports[`Master Page should display master list and show details when master but
                       aria-disabled="false"
                       class="chakra-menu__menuitem css-y7jzs3"
                       data-index="0"
-                      id="menu-list-:r5:-menuitem-:r6:"
+                      id="menu-list-:r6:-menuitem-:r7:"
                       role="menuitem"
                       tabindex="-1"
                       type="button"
@@ -571,11 +612,11 @@ exports[`Master Page should display master list and show details when master but
                 class="css-zgoslk"
               >
                 <button
-                  aria-controls="menu-list-:r8:"
+                  aria-controls="menu-list-:r9:"
                   aria-expanded="false"
                   aria-haspopup="menu"
                   class="chakra-button chakra-menu__menu-button css-13sr8jm"
-                  id="menu-button-:r8:"
+                  id="menu-button-:r9:"
                   type="button"
                 >
                   <svg
@@ -606,7 +647,7 @@ exports[`Master Page should display master list and show details when master but
                   <div
                     aria-orientation="vertical"
                     class="chakra-menu__menu-list css-s5t7bz"
-                    id="menu-list-:r8:"
+                    id="menu-list-:r9:"
                     role="menu"
                     style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
                     tabindex="-1"
@@ -615,7 +656,7 @@ exports[`Master Page should display master list and show details when master but
                       aria-disabled="false"
                       class="chakra-menu__menuitem css-y7jzs3"
                       data-index="0"
-                      id="menu-list-:r8:-menuitem-:r9:"
+                      id="menu-list-:r9:-menuitem-:ra:"
                       role="menuitem"
                       tabindex="-1"
                       type="button"

src/pages/__tests__/__snapshots__/ordersList.test.tsx.snap

@@ -25,10 +25,6 @@ exports[`Страница заказов должна корректно ото
           >
             Заказы
           </a>
-          <hr
-            aria-orientation="vertical"
-            class="chakra-divider css-zw0v9u"
-          />
           <a
             class="chakra-button css-g11sl9"
             data-testid="master-button"
@@ -36,6 +32,12 @@ exports[`Страница заказов должна корректно ото
           >
             Мастера
           </a>
+          <a
+            class="chakra-button css-g11sl9"
+            href="/auth/login"
+          >
+            Карта заказов
+          </a>
         </div>
       </div>
     </header>
@@ -71,7 +73,7 @@ exports[`Страница заказов должна корректно ото
           <p
             class="chakra-text css-52ukzg"
           >
-            12.03.2025
+            17.03.2025
           </p>
           <button
             class="chakra-button css-ez23ye"
@@ -264,13 +266,9 @@ exports[`Страница заказов должна корректно ото
               <td
                 class="css-zgoslk"
               >
-                <button
-                  aria-controls="popover-content-:r1:"
-                  aria-expanded="false"
-                  aria-haspopup="dialog"
+                <a
                   class="chakra-button css-ez23ye"
-                  id="popover-trigger-:r1:"
-                  type="button"
+                  href="/auth/login/arm//auth/login?lat=55.78&lon=49.12&currentDate=Mon Mar 17 2025 20:55:45 GMT+0300 (Moscow Standard Time)"
                 >
                   <svg
                     class="chakra-icon css-onkibi"
@@ -290,54 +288,7 @@ exports[`Страница заказов должна корректно ото
                       />
                     </g>
                   </svg>
-                </button>
-                <div
-                  class="chakra-popover__popper css-iy22zq"
-                  style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
-                >
-                  <section
-                    aria-describedby="popover-body-:r1:"
-                    class="chakra-popover__content css-sjj62m"
-                    id="popover-content-:r1:"
-                    role="dialog"
-                    style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.95) translateZ(0);"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="chakra-popover__arrow-positioner css-0"
-                      data-popper-arrow=""
-                      style="position: absolute;"
-                    >
-                      <div
-                        class="chakra-popover__arrow css-0"
-                        data-popper-arrow-inner=""
-                      />
-                    </div>
-                    <button
-                      aria-label="Close"
-                      class="chakra-popover__close-btn css-1o8qips"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="chakra-icon css-onkibi"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                    <div
-                      class="chakra-popover__body css-45vz3u"
-                      id="popover-body-:r1:"
-                    >
-                      Казань, ул. Баумана, 1
-                    </div>
-                  </section>
-                </div>
+                </a>
               </td>
             </tr>
             <tr
@@ -471,13 +422,9 @@ exports[`Страница заказов должна корректно ото
               <td
                 class="css-zgoslk"
               >
-                <button
-                  aria-controls="popover-content-:r3:"
-                  aria-expanded="false"
-                  aria-haspopup="dialog"
+                <a
                   class="chakra-button css-ez23ye"
-                  id="popover-trigger-:r3:"
-                  type="button"
+                  href="/auth/login/arm//auth/login?lat=55.78&lon=49.12&currentDate=Mon Mar 17 2025 20:55:45 GMT+0300 (Moscow Standard Time)"
                 >
                   <svg
                     class="chakra-icon css-onkibi"
@@ -497,54 +444,7 @@ exports[`Страница заказов должна корректно ото
                       />
                     </g>
                   </svg>
-                </button>
-                <div
-                  class="chakra-popover__popper css-iy22zq"
-                  style="visibility: hidden; position: absolute; min-width: max-content; inset: 0 auto auto 0;"
-                >
-                  <section
-                    aria-describedby="popover-body-:r3:"
-                    class="chakra-popover__content css-sjj62m"
-                    id="popover-content-:r3:"
-                    role="dialog"
-                    style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.95) translateZ(0);"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="chakra-popover__arrow-positioner css-0"
-                      data-popper-arrow=""
-                      style="position: absolute;"
-                    >
-                      <div
-                        class="chakra-popover__arrow css-0"
-                        data-popper-arrow-inner=""
-                      />
-                    </div>
-                    <button
-                      aria-label="Close"
-                      class="chakra-popover__close-btn css-1o8qips"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="chakra-icon css-onkibi"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </button>
-                    <div
-                      class="chakra-popover__body css-45vz3u"
-                      id="popover-body-:r3:"
-                    >
-                      Казань, ул. Баумана, 43
-                    </div>
-                  </section>
-                </div>
+                </a>
               </td>
             </tr>
           </tbody>

src/pages/__tests__/masters.test.tsx

@@ -20,7 +20,7 @@ import { store } from '../../__data__/store';
 import Page from '../arm';
 
 const server = setupServer(
-  http.get('/api/arm/masters', () => {
+  http.post('/api/arm/masters/list', () => {
     return HttpResponse.json({
       success: true,
       body: [

src/pages/__tests__/ordersEmpty.test.tsx

@@ -25,7 +25,7 @@ const server = setupServer(
       body: [],
     });
   }),
-  http.get('/api/arm/masters', () => {
+  http.post('/api/arm/masters/list', () => {
     return HttpResponse.json({
       success: true,
       body: [],

src/pages/__tests__/ordersError.test.tsx

@@ -24,7 +24,7 @@ const server = setupServer(
   http.post('/api/arm/orders', () => {
     return HttpResponse.json({}, { status: 500 });
   }),
-  http.get('/api/arm/masters', () => {
+  http.post('/api/arm/masters/list', () => {
     return HttpResponse.json({
       success: true,
       body: [

src/pages/__tests__/ordersList.test.tsx

@@ -55,7 +55,7 @@ const server = setupServer(
       ],
     });
   }),
-  http.get('/api/arm/masters', () => {
+  http.post('/api/arm/masters/list', () => {
     return HttpResponse.json({
       success: true,
       body: [

src/pages/order-view/index.tsx

@@ -74,7 +74,7 @@ const Page: FC = () => {
                   <VStack
                     p={4}
                     alignItems='flex-start'
-                    gap={4}
+                    gap={6}
                     data-testid='order-details'
                   >
                     <OrderDetails

src/utils/getCoordinates.ts

@@ -0,0 +1,13 @@
+const getCoordinates = (location: string) => {
+  if (!location) return {};
+
+  const [lat, lon] = location
+    .split(',')
+    .map((coord) => parseFloat(coord.trim()));
+
+  if (isNaN(lat) || isNaN(lon)) return {};
+
+  return { lat, lon };
+};
+
+export default getCoordinates;

stubs/api/index.js

@@ -8,12 +8,12 @@ const commonError = { success: false, message: 'Что-то пошло не та
 
 const sleep =
   (duration = 1000) =>
-    (req, res, next) =>
-      setTimeout(next, duration);
+  (req, res, next) =>
+    setTimeout(next, duration);
 
 router.use(sleep());
 
-router.get('/arm/masters', (req, res) => {
+router.post('/arm/masters/list', (req, res) => {
   res
     .status(/error/.test(STUBS.masters) ? 500 : 200)
     .send(
@@ -108,9 +108,7 @@ router.post('/order/:orderId/upload-car-img', (req, res) => {
       .send(require(`../json/landing-order-car-image-upload/${stubName}.json`));
   } catch (e) {
     console.error(e);
-    res
-      .status(500)
-      .send(commonError);
+    res.status(500).send(commonError);
   }
 });
 

stubs/json/arm-orders/success.json

@@ -21,7 +21,7 @@
       "orderDate": "2024-11-24T07:40:46.366Z",
       "status": "progress",
       "phone": "79001234567",
-      "location": "55.779905316526424,49.12446113769528 Республика Татарстан (Татарстан), Казань, озеро Нижний Кабан",
+      "location": "55.75060416346278,48.746329576898944 Республика Татарстан (Татарстан), Верхнеуслонский район, Иннополис",
       "master": [],
       "notes": ""
     }