feat: add form for drawer and refactor styles

client/src/components/Header.tsx

@@ -3,9 +3,10 @@ import Title from 'antd/es/typography/Title';
 
 interface HeaderProps {
   title: string;
+  additionalContent?: React.ReactNode;
 }
 
-export default function Header({ title }: HeaderProps) {
+export default function Header({ title, additionalContent }: HeaderProps) {
   return (
     <div
       style={{
@@ -26,8 +27,9 @@ export default function Header({ title }: HeaderProps) {
           marginRight: '26px',
         }}
       >
+        {additionalContent}
         <img
-          src="./icons/sider/more.svg"
+          src="./icons/header/more.svg"
           alt="more"
           style={{ height: '16px', width: '16px' }}
         />

client/src/config/customTheme.ts

@@ -1,7 +1,7 @@
 export const theme = {
   token: {
     fontFamily: 'Roboto, sans-serif',
-    colorPrimary: '#548d10',
+    colorPrimary: '#C2DA3D',
     Menu: {
       itemColor: 'f2f2f2',
       itemBg: '#f2f2f2',

client/src/index.css

@@ -26,6 +26,15 @@ code {
   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;
 }

client/src/pages/AccountsPage.tsx

@@ -1,9 +1,143 @@
+import { Button, Form, Input, Select } from 'antd';
 import Header from '../components/Header';
+import { useState } from 'react';
+import ContentDrawer from '../components/ContentDrawer';
+
+const { Option } = Select;
 
 export default function AccountsPage() {
+  const [open, setOpen] = useState(false);
+
+  const showDrawer = () => setOpen(true);
+  const closeDrawer = () => setOpen(false);
+
+  const userEdit = (
+    <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="Имя"
+          name="name"
+          rules={[{ required: true, message: 'Введите имя' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Логин"
+          name="login"
+          rules={[{ required: true, message: 'Введите логин' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Пароль (последний ввод)"
+          name="password"
+          rules={[{ required: true, message: 'Введите пароль' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label="E-mail"
+          name="email"
+          rules={[
+            { required: true, message: 'Введите имейл' },
+            { type: 'email', message: 'Некорректный имейл' },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Привязка"
+          name="tenant"
+          rules={[{ required: true, message: 'Введите привязку' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Роль"
+          name="role"
+          rules={[{ required: true, message: 'Выберите роль' }]}
+        >
+          <Select placeholder="Выберите роль">
+            <Option value="Директор магазина">Директор магазина</Option>
+            <Option value="Менеджер">Менеджер</Option>
+            <Option value="Кассир">Кассир</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          label="Статус"
+          name="status"
+          rules={[{ required: true, message: 'Выберите статус' }]}
+        >
+          <Select placeholder="Выберите статус">
+            <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' }}
+            />{' '}
+            Сохранить изменения
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+
   return (
     <>
-      <Header title="Учетные записи" />
+      <Header
+        title="Учетные записи"
+        additionalContent={
+          <img
+            src="./icons/header/add_2.svg"
+            alt="add"
+            style={{
+              height: '18px',
+              width: '18px',
+              cursor: 'pointer',
+            }}
+            onClick={showDrawer}
+          />
+        }
+      />
+
+      <ContentDrawer open={open} closeDrawer={closeDrawer}>
+        {userEdit}
+      </ContentDrawer>
     </>
   );
 }