addPage, editPage

src/App.tsx

 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import AuthPage from './pages/AuthPage';
 import HomePage from './pages/HomePage';
 import AddPage from './pages/AddPage';
-import './App.css'
+import './App.css';
 import RequestPage from './pages/RequestPage';
 import Header from './components/HomePage/Header';
+import EditPage from './pages/EditPage';
 
 const App: React.FC = () => {
   return (
@@ -16,7 +17,8 @@ const App: React.FC = () => {
           <Route path="/auth" element={<AuthPage />} />
           <Route path="/" element={<HomePage />} />
           <Route path="/add" element={<AddPage />} />
-          <Route path='requests' element={<RequestPage />} />
+          <Route path="/edit" element={<EditPage />} />
+          <Route path="/requests" element={<RequestPage />} />
         </Routes>
       </BrowserRouter>
     </>

src/pages/AddPage.tsx

 import React from 'react';
-import Header from '../components/HomePage/Header';
 import { Form, Input, Button } from 'antd';
 import "../../src/styles/Home/addPage.css";
+import { useNavigate } from 'react-router';
 
 const { Item } = Form;
 
 const AddPage: React.FC = () => {
+    const navigate = useNavigate();
+
     return (
         <div className='container'>
-            <Header />
             <Form
                 layout="vertical"
                 name="organization_form"
                 initialValues={{ remember: true }}
-                // onFinish={(values) => console.log(values)}
                 className='form'
             >
                 <Item
@@ -63,9 +63,12 @@ const AddPage: React.FC = () => {
                 >
                     <Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" />
                 </Item>
-                <hr />
+
+                <div className='form-footer'>
+                    <hr className='add-hr' />
                     <Item style={{ textAlign: 'right' }}>
-                    <Button type="default" style={{ marginRight: '8px' }}>
+                        <Button type="default" style={{ marginRight: '8px' }}
+                            onClick={() => navigate("/")}>
                             Отмена
                         </Button>
 
@@ -73,6 +76,7 @@ const AddPage: React.FC = () => {
                             Сохранить
                         </Button>
                     </Item>
+                </div>
             </Form>
         </div>
     );

src/pages/EditPage.tsx

+import { Form, Input, Button, Select } from 'antd';
+import "../../src/styles/Home/editPage.css";
+import { useNavigate } from 'react-router';
+
+const { Item } = Form;
+const { Option } = Select;
+
+const EditPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div className="container">
+            <Form
+                layout="vertical"
+                name="organization_form"
+                initialValues={{ remember: true }}
+                className='form'
+            >
+                <Item
+                    label="ID"
+                    name="id"
+                    rules={[{ required: true, message: 'Пожалуйста, введите ID!' }]}
+                >
+                    <Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="БИН организации"
+                    name="bin"
+                    rules={[{ required: true, message: 'Пожалуйста, введите БИН организации!' }]}
+                >
+                    <Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="Код организации"
+                    name="code"
+                    rules={[{ required: true, message: 'Пожалуйста, введите код организации!' }]}
+                >
+                    <Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="Наименование организации"
+                    name="name"
+                    rules={[{ required: true, message: 'Пожалуйста, введите наименование организации!' }]}
+                >
+                    <Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="Адрес системы/хост"
+                    name="address"
+                    rules={[{ required: true, message: 'Пожалуйста, введите адрес системы/хост!' }]}
+                >
+                    <Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="Логин"
+                    name="login"
+                    rules={[{ required: true, message: 'Пожалуйста, введите логин!' }]}
+                >
+                    <Input maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="Пароль"
+                    name="password"
+                    rules={[{ required: true, message: 'Пожалуйста, введите пароль!' }]}
+                >
+                    <Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" />
+                </Item>
+
+                <Item
+                    label="Статус"
+                    name="status"
+                    rules={[{ required: true, message: 'Пожалуйста, выберите статус!' }]}
+                >
+                    <Select placeholder="Выберите статус">
+                        <Option value="active">Активен</Option>
+                        <Option value="blocked">Заблокирован</Option>
+                        <Option value="deleted">Удален</Option>
+                    </Select>
+                </Item>
+
+                <div className='form-footer'>
+                    <Item style={{ textAlign: 'right' }}>
+                        <Button type="default" style={{ marginRight: '8px' }}
+                            onClick={() => navigate("/")}>
+                            Отмена
+                        </Button>
+
+                        <Button type="primary" htmlType="submit">
+                            Сохранить
+                        </Button>
+                    </Item>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+export default EditPage;

src/styles/Home/addPage.css

@@ -4,6 +4,29 @@
     margin-top: 10px;
 }
 
-hr{
-    margin-top: 120px;
+.container {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 60px);
+    padding: 10px 20px;
+}
+
+.form {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 80px;
+}
+
+.form-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: white;
+    padding: 10px 20px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.add-hr {
+    margin-top: 20px;
 }
\ No newline at end of file

src/styles/Home/editPage.css

+/* styles.css */
+.form{
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 80px);
+    padding: 10px 20px;
+    overflow: hidden;
+}
+
+.form {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 150px;
+    margin-left: 20px;
+}
+
+.form-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: white;
+    padding: 10px 20px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+}