Merge pull request 'feat: added endpoints: auth, pofile, account, keyring' (#5) from VORKOUT-4 into master

Reviewed-on: #5
Reviewed-by: Vladislav Syrochkin <vlad.dev@heado.ru>
Reviewed-by: cyrussmeat <dr.cyrill@gmail.com>

client/package.json

@@ -1,8 +1,9 @@
 {
   "name": "client",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.6.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -11,8 +12,13 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.0.11",
     "@types/react-dom": "^19.0.4",
+    "antd": "^5.24.7",
+    "i18next": "^25.0.1",
+    "i18next-browser-languagedetector": "^8.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.5.1",
+    "react-router-dom": "^7.5.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

client/public/icons/drawer/add_photo_alternate.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H10V2H2V16H16V8H18V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM3 14H15L11.25 9L8.25 13L6 10L3 14ZM14 6V4H12V2H14V0H16V2H18V4H16V6H14Z" fill="#606060"/>
+</svg>

client/public/icons/drawer/arrow_back.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.825 9L9.425 14.6L8 16L0 8L8 0L9.425 1.4L3.825 7H16V9H3.825Z" fill="#606060"/>
+</svg>

client/public/icons/drawer/delete.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z" fill="#FF0000"/>
+</svg>

client/public/icons/drawer/reg.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 16V13.2C0.5 12.65 0.641667 12.1333 0.925 11.65C1.20833 11.1667 1.6 10.8 2.1 10.55C2.95 10.1167 3.90833 9.75 4.975 9.45C6.04167 9.15 7.21667 9 8.5 9C9 9 9.4875 9.025 9.9625 9.075C10.4375 9.125 10.9 9.2 11.35 9.3L9.6 11.05C9.41667 11.0167 9.2375 11 9.0625 11H8.5C7.31667 11 6.25417 11.1417 5.3125 11.425C4.37083 11.7083 3.6 12.0167 3 12.35C2.85 12.4333 2.72917 12.55 2.6375 12.7C2.54583 12.85 2.5 13.0167 2.5 13.2V14H8.75L10.75 16H0.5ZM14.05 16.4L10.6 12.95L12 11.55L14.05 13.6L19.1 8.55L20.5 9.95L14.05 16.4ZM8.5 8C7.4 8 6.45833 7.60833 5.675 6.825C4.89167 6.04167 4.5 5.1 4.5 4C4.5 2.9 4.89167 1.95833 5.675 1.175C6.45833 0.391667 7.4 0 8.5 0C9.6 0 10.5417 0.391667 11.325 1.175C12.1083 1.95833 12.5 2.9 12.5 4C12.5 5.1 12.1083 6.04167 11.325 6.825C10.5417 7.60833 9.6 8 8.5 8ZM8.5 6C9.05 6 9.52083 5.80417 9.9125 5.4125C10.3042 5.02083 10.5 4.55 10.5 4C10.5 3.45 10.3042 2.97917 9.9125 2.5875C9.52083 2.19583 9.05 2 8.5 2C7.95 2 7.47917 2.19583 7.0875 2.5875C6.69583 2.97917 6.5 3.45 6.5 4C6.5 4.55 6.69583 5.02083 7.0875 5.4125C7.47917 5.80417 7.95 6 8.5 6Z" fill="#606060"/>
+</svg>

client/public/icons/drawer/save.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 4V16C18.5 16.55 18.3042 17.0208 17.9125 17.4125C17.5208 17.8042 17.05 18 16.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16V2C0.5 1.45 0.695833 0.979167 1.0875 0.5875C1.47917 0.195833 1.95 0 2.5 0H14.5L18.5 4ZM16.5 4.85L13.65 2H2.5V16H16.5V4.85ZM9.5 15C10.3333 15 11.0417 14.7083 11.625 14.125C12.2083 13.5417 12.5 12.8333 12.5 12C12.5 11.1667 12.2083 10.4583 11.625 9.875C11.0417 9.29167 10.3333 9 9.5 9C8.66667 9 7.95833 9.29167 7.375 9.875C6.79167 10.4583 6.5 11.1667 6.5 12C6.5 12.8333 6.79167 13.5417 7.375 14.125C7.95833 14.7083 8.66667 15 9.5 15ZM3.5 7H12.5V3H3.5V7Z" fill="#606060"/>
+</svg>

client/public/icons/header/add_2.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.125 18V10H0.125V8H8.125V0H10.125V8H18.125V10H10.125V18H8.125Z" fill="#606060"/>
+</svg>

client/public/icons/header/more.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" fill="#606060"/>
+</svg>

client/public/icons/sider/menu.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12V10H18V12H0ZM0 7V5H18V7H0ZM0 2V0H18V2H0Z" fill="#606060"/>
+</svg>

client/public/icons/sider/menu_open.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12V10H13V12H0ZM16.6 11L11.6 6L16.6 1L18 2.4L14.4 6L18 9.6L16.6 11ZM0 7V5H10V7H0ZM0 2V0H13V2H0Z" fill="#606060"/>
+</svg>

client/public/icons/sider/process-diagram.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4 19L12 17.6L13.575 16L12 14.425L13.4 13L15 14.6L16.575 13L18 14.425L16.4 16L18 17.6L16.575 19L15 17.425L13.4 19ZM3 17C3.28333 17 3.52083 16.9042 3.7125 16.7125C3.90417 16.5208 4 16.2833 4 16C4 15.7167 3.90417 15.4792 3.7125 15.2875C3.52083 15.0958 3.28333 15 3 15C2.71667 15 2.47917 15.0958 2.2875 15.2875C2.09583 15.4792 2 15.7167 2 16C2 16.2833 2.09583 16.5208 2.2875 16.7125C2.47917 16.9042 2.71667 17 3 17ZM3 19C2.16667 19 1.45833 18.7083 0.875 18.125C0.291667 17.5417 0 16.8333 0 16C0 15.1667 0.291667 14.4583 0.875 13.875C1.45833 13.2917 2.16667 13 3 13C3.61667 13 4.17917 13.1708 4.6875 13.5125C5.19583 13.8542 5.56667 14.3167 5.8 14.9C6.45 14.7167 6.97917 14.3583 7.3875 13.825C7.79583 13.2917 8 12.6833 8 12V8C8 6.61667 8.4875 5.4375 9.4625 4.4625C10.4375 3.4875 11.6167 3 13 3H14.15L12.575 1.425L14 0L18 4L14 8L12.575 6.6L14.15 5H13C12.1667 5 11.4583 5.29167 10.875 5.875C10.2917 6.45833 10 7.16667 10 8V12C10 13.2167 9.60833 14.2875 8.825 15.2125C8.04167 16.1375 7.05 16.7083 5.85 16.925C5.65 17.5417 5.2875 18.0417 4.7625 18.425C4.2375 18.8083 3.65 19 3 19ZM1.4 7L0 5.6L1.575 4L0 2.425L1.4 1L3 2.6L4.575 1L6 2.425L4.4 4L6 5.6L4.575 7L3 5.425L1.4 7Z" fill="#606060"/>
+</svg>

client/public/icons/sider/running-processes.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 16V14H9V9H7V11H0V5H7V7H9V2H13V0H20V6H13V4H11V12H13V10H20V16H13ZM15 14H18V12H15V14ZM2 9H5V7H2V9ZM15 4H18V2H15V4Z" fill="#606060"/>
+</svg>

client/public/icons/sider/settings.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18V12H10V14H18V16H10V18H8ZM0 16V14H6V16H0ZM4 12V10H0V8H4V6H6V12H4ZM8 10V8H18V10H8ZM12 6V0H14V2H18V4H14V6H12ZM0 4V2H10V4H0Z" fill="#606060"/>
+</svg>

client/public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>VORKOUT</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/src/App.tsx

@@ -1,7 +1,19 @@
 import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import MainLayout from './pages/MainLayout';
+import ProtectedRoute from './pages/ProtectedRoute';
 
 function App() {
-  return <div className="App"></div>;
+  return (
+    <div className="App">
+      <Routes>
+        <Route path="/login" element={<div>login</div>} />
+        <Route element={<ProtectedRoute />}>
+          <Route path="*" element={<MainLayout />}></Route>
+        </Route>
+      </Routes>
+    </div>
+  );
 }
 
 export default App;

client/src/components/ContentDrawer.tsx

@@ -0,0 +1,161 @@
+import { Drawer } from 'antd';
+import { useEffect, useState } from 'react';
+import { Avatar, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+interface ContentDrawerProps {
+  open: boolean;
+  closeDrawer: () => void;
+  children: React.ReactNode;
+  type: 'create' | 'edit';
+}
+
+export default function ContentDrawer({
+  open,
+  closeDrawer,
+  children,
+  type,
+}: ContentDrawerProps) {
+  const { t } = useTranslation();
+  const [width, setWidth] = useState<number | string>('30%');
+
+  const calculateWidths = () => {
+    const windowWidth = window.innerWidth;
+    const expanded = Math.max(windowWidth * 0.3, 300);
+    setWidth(expanded);
+  };
+
+  useEffect(() => {
+    calculateWidths();
+    window.addEventListener('resize', calculateWidths);
+    return () => window.removeEventListener('resize', calculateWidths);
+  }, []);
+
+  const editDrawerTitle = (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '24px',
+          width: '24px',
+          cursor: 'pointer',
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: '16px', width: '16px' }}
+        />
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
+        <Avatar
+          src="https://cdn-icons-png.flaticon.com/512/219/219986.png"
+          size={40}
+          style={{ flexShrink: 0 }}
+        />
+        <div>
+          <Typography.Text strong style={{ display: 'block' }}>
+            Александр Александров
+          </Typography.Text>
+          <Typography.Text type="secondary" style={{ fontSize: 14 }}>
+            alexandralex@vorkout.ru
+          </Typography.Text>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '24px',
+          width: '24px',
+        }}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: '18px', width: '16px' }}
+        />
+      </div>
+    </div>
+  );
+
+  const createDrawerTitle = (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+      }}
+    >
+      <div
+        onClick={closeDrawer}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '24px',
+          width: '24px',
+          cursor: 'pointer',
+        }}
+      >
+        <img
+          src="./icons/drawer/arrow_back.svg"
+          alt="close_drawer"
+          style={{ height: '16px', width: '16px' }}
+        />
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          flex: 1,
+          fontSize: '20px',
+        }}
+      >
+        {t('newAccount')}
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          height: '24px',
+          width: '24px',
+        }}
+        onClick={closeDrawer}
+      >
+        <img
+          src="./icons/drawer/delete.svg"
+          alt="delete"
+          style={{ height: '18px', width: '16px' }}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <Drawer
+      title={type === 'create' ? createDrawerTitle : editDrawerTitle}
+      placement="right"
+      open={open}
+      width={width}
+      destroyOnClose={true}
+      closable={false}
+    >
+      {children}
+    </Drawer>
+  );
+}

client/src/components/Header.tsx

@@ -0,0 +1,55 @@
+import { Avatar } from 'antd';
+import Title from 'antd/es/typography/Title';
+
+interface HeaderProps {
+  title: string;
+  additionalContent?: React.ReactNode;
+}
+
+export default function Header({ title, additionalContent }: HeaderProps) {
+  return (
+    <div
+      style={{
+        height: '72px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Title style={{ marginLeft: '16px' }} level={3}>
+        {title}
+      </Title>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '24px',
+          marginRight: '26px',
+        }}
+      >
+        {additionalContent}
+        <img
+          src="./icons/header/more.svg"
+          alt="more"
+          style={{ height: '16px', width: '16px' }}
+        />
+        <div
+          style={{
+            borderRadius: '50%',
+            border: '2px solid #8BC34A',
+            height: '32px',
+            width: '32px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Avatar
+            size={25.77}
+            src={`https://cdn-icons-png.flaticon.com/512/219/219986.png`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/SiderMenu.tsx

@@ -0,0 +1,118 @@
+import { Divider, Menu, Tooltip } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface SiderMenuProps {
+  collapsed: boolean;
+  selectedKey: string;
+  hangleMenuClick: (e: any) => void;
+}
+
+export default function SiderMenu({
+  collapsed,
+  selectedKey,
+  hangleMenuClick,
+}: SiderMenuProps) {
+  const { t } = useTranslation();
+  const collapseStyle = collapsed
+    ? { fontSize: '12px' }
+    : { fontSize: '12px', paddingLeft: '52px' };
+
+  const menuItems = [
+    {
+      key: 'toggle',
+      icon: (
+        <img
+          src={
+            !collapsed
+              ? './icons/sider/menu_open.svg'
+              : './icons/sider/menu.svg'
+          }
+          alt="toggle"
+        />
+      ),
+      label: 'VORKOUT',
+      style: { fontSize: '20px' },
+    },
+    {
+      key: '/process-diagram',
+      icon: (
+        <img src="./icons/sider/process-diagram.svg" alt="process diagram" />
+      ),
+      label: (
+        <Tooltip title={t('processDiagrams')}>{t('processDiagrams')}</Tooltip>
+      ),
+    },
+    {
+      key: '/running-processes',
+      icon: (
+        <img
+          src="./icons/sider/running-processes.svg"
+          alt="running processes"
+        />
+      ),
+      label: (
+        <Tooltip title={t('runningProcesses')}>{t('runningProcesses')}</Tooltip>
+      ),
+    },
+    !collapsed
+      ? {
+          key: 'divider',
+          label: <Divider />,
+          style: {
+            marginBottom: '-16px',
+            marginTop: '-4px',
+            cursor: 'default',
+            width: '100%',
+          },
+          disabled: true,
+        }
+      : null,
+    {
+      key: 'sub1',
+      icon: <img src="./icons/sider/settings.svg" alt="settings" />,
+      label: t('settings'),
+      className: 'no-expand-icon',
+      children: [
+        {
+          key: '/accounts',
+          label: !collapsed ? (
+            <Tooltip title={t('accounts')}>{t('accounts')}</Tooltip>
+          ) : (
+            t('accounts')
+          ),
+          style: collapseStyle,
+        },
+        {
+          key: '/events-list',
+          label: !collapsed ? (
+            <Tooltip title={t('eventsList')}>{t('eventsList')}</Tooltip>
+          ) : (
+            t('eventsList')
+          ),
+          style: collapseStyle,
+        },
+        {
+          key: '/configuration',
+          label: !collapsed ? (
+            <Tooltip title={t('configuration')}>{t('configuration')}</Tooltip>
+          ) : (
+            t('configuration')
+          ),
+          style: collapseStyle,
+        },
+      ],
+    },
+  ];
+
+  return (
+    <Menu
+      theme="light"
+      selectedKeys={[selectedKey]}
+      mode="inline"
+      onClick={hangleMenuClick}
+      defaultOpenKeys={['sub1']}
+      items={menuItems}
+    />
+  );
+}

client/src/components/UserCreate.tsx

@@ -0,0 +1,229 @@
+import {
+  Button,
+  Form,
+  Input,
+  Select,
+  Upload,
+  Image,
+  UploadFile,
+  GetProp,
+  UploadProps,
+} from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const { Option } = Select;
+
+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+const getBase64 = (file: FileType): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+
+export default function UserCreate() {
+  const { t } = useTranslation();
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+  const handlePreview = async (file: UploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj as FileType);
+    }
+
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+  };
+
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
+
+  const customUploadButton = (
+    <div>
+      <div
+        style={{
+          height: '102px',
+          width: '102px',
+          backgroundColor: '#E2E2E2',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: 8,
+          marginTop: 30,
+          cursor: 'pointer',
+        }}
+      >
+        <img
+          src="./icons/drawer/add_photo_alternate.svg"
+          alt="add_photo_alternate"
+          style={{ height: '18px', width: '18px' }}
+        />
+      </div>
+
+      <span style={{ fontSize: '14px', color: '#8c8c8c' }}>
+        {t('selectPhoto')}
+      </span>
+    </div>
+  );
+
+  const photoToUpload = (
+    <div style={{ height: '102px' }}>
+      <Upload
+        listType="picture-circle"
+        fileList={fileList}
+        onPreview={handlePreview}
+        onChange={handleChange}
+        beforeUpload={() => false}
+      >
+        {fileList.length > 0 ? null : customUploadButton}
+      </Upload>
+      {previewImage && (
+        <Image
+          wrapperStyle={{ display: 'none' }}
+          preview={{
+            visible: previewOpen,
+            onVisibleChange: (visible) => setPreviewOpen(visible),
+            afterOpenChange: (visible) => !visible && setPreviewImage(''),
+          }}
+          src={previewImage}
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '36px',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          {photoToUpload}
+        </div>
+      </div>
+      <Form
+        name="user-edit-form"
+        layout="vertical"
+        // onFinish={onFinish}
+        initialValues={{
+          name: '',
+          login: '',
+          password: '',
+          email: '',
+          tenant: '',
+          role: '',
+          status: '',
+        }}
+        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+      >
+        <Form.Item
+          label={t('name')}
+          name="name"
+          rules={[{ required: true, message: t('nameMessage') }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('login')}
+          name="login"
+          rules={[{ required: true, message: t('loginMessage') }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('password')}
+          name="password"
+          rules={[{ required: true, message: t('passwordMessage') }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label={t('email')}
+          name="email"
+          rules={[
+            { required: true, message: t('emailMessage') },
+            { type: 'email', message: t('emailErrorMessage') },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('tenant')}
+          name="tenant"
+          rules={[{ required: true, message: t('tenantMessage') }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('role')}
+          name="role"
+          rules={[{ required: true, message: t('roleMessage') }]}
+        >
+          <Select placeholder={t('roleMessage')}>
+            <Option value="Директор магазина">Директор магазина</Option>
+            <Option value="Менеджер">Менеджер</Option>
+            <Option value="Кассир">Кассир</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          label={t('status')}
+          name="status"
+          rules={[{ required: true, message: t('statusMessage') }]}
+        >
+          <Select placeholder={t('statusMessage')}>
+            <Option value="ACTIVE">Активен</Option>
+            <Option value="DISABLED">Неактивен</Option>
+            <Option value="BLOCKED">Заблокирован</Option>
+            <Option value="DELETED">Удален</Option>
+          </Select>
+        </Form.Item>
+
+        <div style={{ flexGrow: 1 }} />
+
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            block
+            style={{ color: '#000' }}
+          >
+            <img
+              src="/icons/drawer/reg.svg"
+              alt="save"
+              style={{ height: '18px', width: '18px' }}
+            />{' '}
+            {t('addAccount')}
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}

client/src/components/UserEdit.tsx

@@ -0,0 +1,113 @@
+import { Button, Form, Input, Select } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+const { Option } = Select;
+
+export default function UserEdit() {
+  const { t } = useTranslation();
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Form
+        name="user-edit-form"
+        layout="vertical"
+        // onFinish={onFinish}
+        initialValues={{
+          name: 'Александр Александров',
+          login: 'alexandralex@vorkout.ru',
+          password: 'jKUUl776GHd',
+          email: 'alexandralex@vorkout.ru',
+          tenant: 'text',
+          role: 'Директор магазина',
+          status: 'Активен',
+        }}
+        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+      >
+        <Form.Item
+          label={t('name')}
+          name="name"
+          rules={[{ required: true, message: t('nameMessage') }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('login')}
+          name="login"
+          rules={[{ required: true, message: t('loginMessage') }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('password')}
+          name="password"
+          rules={[{ required: true, message: t('passwordMessage') }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label={t('email')}
+          name="email"
+          rules={[
+            { required: true, message: t('emailMessage') },
+            { type: 'email', message: t('emailErrorMessage') },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('tenant')}
+          name="tenant"
+          rules={[{ required: true, message: t('tenantMessage') }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label={t('role')}
+          name="role"
+          rules={[{ required: true, message: t('roleMessage') }]}
+        >
+          <Select placeholder={t('roleMessage')}>
+            <Option value="Директор магазина">Директор магазина</Option>
+            <Option value="Менеджер">Менеджер</Option>
+            <Option value="Кассир">Кассир</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          label={t('status')}
+          name="status"
+          rules={[{ required: true, message: t('statusMessage') }]}
+        >
+          <Select placeholder={t('statusMessage')}>
+            <Option value="ACTIVE">Активен</Option>
+            <Option value="DISABLED">Неактивен</Option>
+            <Option value="BLOCKED">Заблокирован</Option>
+            <Option value="DELETED">Удален</Option>
+          </Select>
+        </Form.Item>
+
+        <div style={{ flexGrow: 1 }} />
+
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            block
+            style={{ color: '#000' }}
+          >
+            <img
+              src="/icons/drawer/save.svg"
+              alt="save"
+              style={{ height: '18px', width: '18px' }}
+            />{' '}
+            {t('save')}
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}

client/src/config/AppWrapper.tsx

@@ -0,0 +1,24 @@
+import './i18n';
+import { ConfigProvider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import { theme } from './customTheme';
+
+import en from 'antd/locale/en_US';
+import ru from 'antd/locale/ru_RU';
+
+const antdLocales = {
+  en: en,
+  ru: ru,
+};
+
+export default function AppWrapper({ children }: any) {
+  const { i18n } = useTranslation();
+  const currentLang = i18n.language.split('-')[0] as 'en' | 'ru';
+
+  return (
+    <ConfigProvider locale={antdLocales[currentLang]} theme={theme}>
+      {children}
+    </ConfigProvider>
+  );
+}

client/src/config/customTheme.ts

@@ -0,0 +1,15 @@
+export const theme = {
+  token: {
+    fontFamily: 'Roboto, sans-serif',
+    colorPrimary: '#C2DA3D',
+    Menu: {
+      itemColor: 'f2f2f2',
+      itemBg: '#f2f2f2',
+      subMenuItemBg: '#f2f2f2',
+      iconSize: '18px',
+    },
+    Layout: {
+      bodyBg: '#f2f2f2',
+    },
+  },
+};

client/src/config/i18n.ts

@@ -0,0 +1,74 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    supportedLngs: ['en', 'ru'],
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          accounts: 'Accounts',
+          processDiagrams: 'Process diagrams',
+          runningProcesses: 'Running processes',
+          settings: 'Settings',
+          eventsList: 'Events list',
+          configuration: 'Configuration',
+          selectPhoto: 'Select photo',
+          name: 'Name',
+          login: 'Login',
+          password: 'Password',
+          email: 'Email',
+          tenant: 'Tenant',
+          role: 'Role',
+          status: 'Status',
+          nameMessage: 'Enter name',
+          loginMessage: 'Enter login',
+          passwordMessage: 'Enter password',
+          emailMessage: 'Enter email',
+          emailErrorMessage: 'Incorrect email',
+          tenantMessage: 'Enter tenant',
+          roleMessage: 'Choose role',
+          statusMessage: 'Choose status',
+          addAccount: 'Add account',
+          save: 'Save changes',
+          newAccount: 'New account',
+        },
+      },
+      ru: {
+        translation: {
+          accounts: 'Учетные записи',
+          processDiagrams: 'Схемы процессов',
+          runningProcesses: 'Запущенные процессы',
+          settings: 'Настройки',
+          eventsList: 'Справочкин событий',
+          configuration: 'Конфигурация',
+          selectPhoto: 'Выбрать фото',
+          name: 'Имя',
+          login: 'Логин',
+          password: 'Пароль',
+          email: 'Имейл',
+          tenant: 'Привязка',
+          role: 'Роль',
+          status: 'Статус',
+          nameMessage: 'Введите имя',
+          loginMessage: 'Введите логин',
+          passwordMessage: 'Введите пароль',
+          emailMessage: 'Введите имейл',
+          emailErrorMessage: 'Некорректный имейл',
+          tenantMessage: 'Введите привязку',
+          roleMessage: 'Выберите роль',
+          statusMessage: 'Выберите статус',
+          addAccount: 'Добавить аккаунт',
+          save: 'Сохранить изменения',
+          newAccount: 'Новая учетная запись',
+        },
+      },
+    },
+  });
+
+export default i18n;

client/src/index.css

@@ -11,3 +11,34 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.ant-menu-inline .ant-menu-submenu-selected {
+  border: none;
+}
+
+.ant-menu-inline .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: #548d10;
+}
+
+.ant-menu-inline .ant-menu-item-selected {
+  background-color: transparent;
+  border: none;
+  color: #548d10;
+}
+
+.ant-menu-item-selected {
+  background-color: transparent !important;
+}
+
+.ant-menu-item-selected a,
+.ant-menu-item-selected {
+  color: #548d10 !important;
+}
+
+.sider {
+  background-color: #f2f2f2;
+}
+
+.no-expand-icon .ant-menu-submenu-arrow {
+  display: none !important;
+}

client/src/index.tsx

@@ -2,8 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import AppWrapper from './config/AppWrapper';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-root.render(<App />);
+
+root.render(
+  <AppWrapper>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </AppWrapper>
+);

client/src/pages/AccountsPage.tsx

@@ -0,0 +1,37 @@
+import Header from '../components/Header';
+import { useState } from 'react';
+import ContentDrawer from '../components/ContentDrawer';
+import UserCreate from '../components/UserCreate';
+import { useTranslation } from 'react-i18next';
+
+export default function AccountsPage() {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const showDrawer = () => setOpen(true);
+  const closeDrawer = () => setOpen(false);
+
+  return (
+    <>
+      <Header
+        title={t('accounts')}
+        additionalContent={
+          <img
+            src="./icons/header/add_2.svg"
+            alt="add"
+            style={{
+              height: '18px',
+              width: '18px',
+              cursor: 'pointer',
+            }}
+            onClick={showDrawer}
+          />
+        }
+      />
+
+      <ContentDrawer open={open} closeDrawer={closeDrawer} type="create">
+        <UserCreate />
+      </ContentDrawer>
+    </>
+  );
+}

client/src/pages/ConfigurationPage.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+import Header from '../components/Header';
+
+export default function ConfigurationPage() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Header title={t('configuration')} />
+    </>
+  );
+}

client/src/pages/EventsListPage.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+import Header from '../components/Header';
+
+export default function EventsListPage() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Header title={t('eventsList')} />
+    </>
+  );
+}

client/src/pages/MainLayout.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
+import { Layout } from 'antd';
+import Sider from 'antd/es/layout/Sider';
+import SiderMenu from '../components/SiderMenu';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import ProcessDiagramPage from './ProcessDiagramPage';
+import RunningProcessesPage from './RunningProcessesPage';
+import AccountsPage from './AccountsPage';
+import EventsListPage from './EventsListPage';
+import ConfigurationPage from './ConfigurationPage';
+
+export default function MainLayout() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [collapsed, setCollapsed] = useState(false);
+  const [selectedKey, setSelectedKey] = useState('1');
+
+  const [width, setWidth] = useState<number | string>('15%');
+  const [collapsedWidth, setCollapsedWidth] = useState(50);
+
+  const calculateWidths = () => {
+    const windowWidth = window.innerWidth;
+    const expanded = Math.min(Math.max(windowWidth * 0.15, 180), 240);
+    const collapsed = Math.max(windowWidth * 0.038, 50);
+    setWidth(expanded);
+    setCollapsedWidth(collapsed);
+  };
+
+  useEffect(() => {
+    calculateWidths();
+    window.addEventListener('resize', calculateWidths);
+    return () => window.removeEventListener('resize', calculateWidths);
+  }, []);
+
+  useEffect(() => {
+    if (location.pathname === '/') {
+      navigate('/process-diagram');
+    }
+    setSelectedKey(location.pathname);
+  }, [location.pathname]);
+
+  function hangleMenuClick(e: any) {
+    const key = e.key;
+    if (key === 'toggle') {
+      setCollapsed(!collapsed);
+      return;
+    }
+    if (key === 'divider') {
+      return;
+    }
+
+    setSelectedKey(key);
+    navigate(key);
+  }
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        className="sider"
+        collapsible
+        collapsed={collapsed}
+        onCollapse={(value) => setCollapsed(value)}
+        theme="light"
+        width={width}
+        collapsedWidth={collapsedWidth}
+        trigger={null}
+      >
+        <SiderMenu
+          collapsed={collapsed}
+          selectedKey={selectedKey}
+          hangleMenuClick={hangleMenuClick}
+        />
+      </Sider>
+      <Layout>
+        <Routes>
+          <Route path="/process-diagram" element={<ProcessDiagramPage />} />
+          <Route path="/running-processes" element={<RunningProcessesPage />} />
+          <Route path="/accounts" element={<AccountsPage />} />
+          <Route path="/events-list" element={<EventsListPage />} />
+          <Route path="/configuration" element={<ConfigurationPage />} />
+          <Route path="*" element={<div>404 Not Found</div>} />
+        </Routes>
+      </Layout>
+    </Layout>
+  );
+}

client/src/pages/ProcessDiagramPage.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+import Header from '../components/Header';
+
+export default function ProcessDiagramPage() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Header title={t('processDiagrams')} />
+    </>
+  );
+}

client/src/pages/ProtectedRoute.tsx

@@ -0,0 +1,8 @@
+// ProtectedRoute.js
+import { Outlet } from 'react-router-dom';
+import React from 'react';
+
+const ProtectedRoute = (): React.JSX.Element => {
+  return <Outlet />;
+};
+export default ProtectedRoute;

client/src/pages/RunningProcessesPage.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+import Header from '../components/Header';
+
+export default function RunningProcessesPage() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Header title={t('runningProcesses')} />
+    </>
+  );
+}