feat: add form for drawer and refactor styles

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>
     </>
   );
 }