fix: delete pl and space

src/components/LayoutArm/LayoutArm.tsx

@@ -0,0 +1,17 @@
+import { Box, Flex } from '@chakra-ui/react';
+import Sidebar from '../Sidebar';
+import Orders from '../Orders';
+import Masters from '../Masters';
+import React from 'react';
+
+const LayoutArm = ({ currentPage, onSelectPage }) => (
+  <Flex h='100vh'>
+    <Sidebar onSelectPage={onSelectPage} />
+    <Box flex='1' bg='gray.50'>
+      {currentPage === 'orders' && <Orders />}
+      {currentPage === 'masters' && <Masters />}
+    </Box>
+  </Flex>
+);
+
+export default LayoutArm;

src/components/LayoutArm/index.ts

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

src/components/MasterActionsMenu/MasterActionsMenu.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from '@chakra-ui/react';
+import { EditIcon } from '@chakra-ui/icons';
+
+const MasterActionsMenu = () => {
+  return (
+    <Menu>
+      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
+      <MenuList>
+        <MenuItem>Посмотреть профиль</MenuItem>
+        <MenuItem>Изменить расписание</MenuItem>
+        <MenuItem>Удалить мастера</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default MasterActionsMenu;

src/components/MasterActionsMenu/index.ts

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

src/components/MasterItem/MasterItem.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
+import MasterActionsMenu from '../MasterActionsMenu';
+
+const MasterItem = ({ name, schedule, phone }) => {
+  return (
+    <Tr>
+      <Td>{name}</Td>
+      <Td>
+        <Stack direction='row'>
+          {schedule.map((time, index) => (
+            <Badge colorScheme={'green'} key={index}>
+              {time}
+            </Badge>
+          ))}
+        </Stack>
+      </Td>
+      <Td>
+        <Link href='tel:'>{phone}</Link>
+      </Td>
+      <Td>
+        <MasterActionsMenu />
+      </Td>
+    </Tr>
+  );
+};
+
+export default MasterItem;

src/components/MasterItem/index.ts

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

src/components/MasterModal/MasterDrawer.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react';
+
+const MasterDrawer = ({ isOpen, onClose }) => {
+  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
+
+  const handleSave = () => {
+    console.log(`Сохранение мастера: ${newMaster}`);
+    onClose();
+  };
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>Добавить нового мастера</DrawerHeader>
+        <DrawerBody>
+          <FormControl mb='4'>
+            <FormLabel>ФИО</FormLabel>
+            <Input
+              value={newMaster.name}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, name: e.target.value })
+              }
+              placeholder='Введите ФИО'
+            />
+          </FormControl>
+          <FormControl>
+            <FormLabel>Номер телефона</FormLabel>
+            <Input
+              value={newMaster.phone}
+              onChange={(e) =>
+                setNewMaster({ ...newMaster, phone: e.target.value })
+              }
+              placeholder='Введите номер телефона'
+            />
+          </FormControl>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button colorScheme='teal' mr={3} onClick={handleSave}>
+            Сохранить
+          </Button>
+          <Button variant='ghost' onClick={onClose}>
+            Отменить
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default MasterDrawer;

src/components/MasterModal/index.ts

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

src/components/Masters/Masters.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  Box,
+  Heading,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Button,
+  useDisclosure,
+  Flex,
+} from '@chakra-ui/react';
+import { mastersData } from '../../mocks ';
+import MasterItem from '../MasterItem';
+import MasterDrawer from '../MasterModal';
+
+const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
+
+const Masters = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <Box p='8'>
+      <Flex justifyContent='space-between' alignItems='center' mb='5'>
+        <Heading size='lg'>Мастера</Heading>
+        <Button colorScheme='green' onClick={onOpen}>
+          + Добавить
+        </Button>
+      </Flex>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name) => (
+              <Th>{name}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {mastersData.map((master, index) => (
+            <MasterItem key={index} {...master} />
+          ))}
+        </Tbody>
+      </Table>
+      <MasterDrawer isOpen={isOpen} onClose={onClose} />
+    </Box>
+  );
+};
+
+export default Masters;

src/components/Masters/index.ts

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

src/components/OrderItem/OrderItem.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Td, Tr, Link, Select } from '@chakra-ui/react';
+
+const OrderItem = ({
+  carNumber,
+  washTime,
+  orderDate,
+  status,
+  phone,
+  location,
+}) => {
+  const [statusSelect, setStatus] = useState(status);
+
+  return (
+    <Tr>
+      <Td>{carNumber}</Td>
+      <Td>{washTime}</Td>
+      <Td>{orderDate}</Td>
+      <Td>
+        <Select
+          value={statusSelect}
+          onChange={(e) => setStatus(e.target.value)}
+          placeholder='Выберите статус'
+        >
+          <option value='в ожидании'>в ожидании</option>
+          <option value='В процессе'>в процессе</option>
+          <option value='в работе'>в работе</option>
+          <option value='отменил'>отменил</option>
+          <option value='Завершено'>Завершено</option>
+        </Select>
+      </Td>
+      <Td>
+        <Link href='tel:'>{phone}</Link>
+      </Td>
+      <Td>{location}</Td>
+    </Tr>
+  );
+};
+
+export default OrderItem;

src/components/OrderItem/index.ts

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

src/components/Orders/Orders.tsx

@@ -0,0 +1,38 @@
+import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+import { ordersData } from '../../mocks ';
+import OrderItem from '../OrderItem';
+
+const Orders = () => {
+  const TABLE_HEADERS = [
+    'Номер машины',
+    'Время мойки',
+    'Дата заказа',
+    'Статус',
+    'Телефон',
+    'Расположение',
+  ];
+  return (
+    <Box p='8'>
+      <Heading size='lg' mb='5'>
+        Заказы
+      </Heading>
+      <Table variant='simple' colorScheme='blackAlpha'>
+        <Thead>
+          <Tr>
+            {TABLE_HEADERS.map((name, key) => (
+              <Th key={key}>{name}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {ordersData.map((order, index) => (
+            <OrderItem key={index} {...order} />
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default Orders;

src/components/Orders/index.ts

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

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,42 @@
+import { Box, Button, Heading, VStack } from '@chakra-ui/react';
+import React from 'react';
+import { Divider } from '@chakra-ui/react';
+
+const Sidebar = ({ onSelectPage }) => (
+  <Box
+    borderRight='1px solid black'
+    bg='gray.50'
+    color='white'
+    w='250px'
+    p='5'
+    pt='8'
+  >
+    <Heading color='green' size='lg' mb='5'>
+      Сухой мастер
+    </Heading>
+
+    <VStack align='start' spacing='4'>
+      <Divider />
+      <Button
+        onClick={() => onSelectPage('orders')}
+        w='100%'
+        colorScheme='green'
+        variant='ghost'
+      >
+        Заказы
+      </Button>
+      <Divider />
+      <Button
+        onClick={() => onSelectPage('masters')}
+        w='100%'
+        colorScheme='green'
+        variant='ghost'
+      >
+        Мастера
+      </Button>
+      <Divider />
+    </VStack>
+  </Box>
+);
+
+export default Sidebar;

src/components/Sidebar/index.ts

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