added delete modal

src/App.tsx

@@ -27,7 +27,7 @@ const App: React.FC = () => {
         <Route element={<AuthLayout />} >
           <Route path="/" element={<HomePage />} />
           <Route path="/add" element={<AddPage />} />
-          <Route path="/edit" element={<EditPage />} />
+          <Route path="/edit/:id" element={<EditPage />} />
           <Route path="/requests" element={<RequestPage />} />
         </Route>
       </Routes>

src/pages/HomePage/HomePage.tsx

-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { MaterialSymbol } from 'react-material-symbols';
-import { Button, Space, Spin, Table, Tag } from 'antd';  //Pagination
+import { Button, Pagination, Space, Spin, Table, Tag, Modal } from 'antd';
 import type { TableProps } from 'antd';
 import './Homepage.css';
 import { useGetOrganizationsQuery } from '../../features/api/apiSlice';
@@ -29,40 +29,85 @@ const columns: TableProps<DataType>['columns'] = [
     {
         title: "Код организации",
         dataIndex: "organization_code",
-        key: "organization_code"
+        key: "code"
     },
     {
         title: "Наименование организации",
         dataIndex: "organization_name",
-        key: "organization_name"
+        key: "name"
+    },
+    {
+        title: "Адрес системы/хост",
+        dataIndex: "host",
+        key: "host"
     },
     {
         title: "Статус",
         dataIndex: "status",
         key: "status",
         render: (_, record) => {
-            const color = record.status === 'deleted' ? 'red' : record.status === 'blocked' ? 'orange' : 'green';
+            let color = record.status == '0' ? 'red' : record.status == '1' ? 'processing' : 'green';
             return (
-                <Tag color={color} style={{ fontSize: '14px' }}>
-                    {record.status === 'deleted' ? 'Удален' : record.status === 'blocked' ? 'Заблокирован' : 'Активен'}
-                </Tag>
-            );
+                <p>
+                    <Tag color={color} style={{ fontSize: '14px' }}>
+                        {record.status == '0' ? 'удален' : record.status == '1' ? 'заблокирован' : 'активен'}
+                    </Tag>
+                </p>
+            )
         }
     },
     {
         title: "Действия",
         width: 60,
-        render: (value) => {
+        render: (_, record) => {
             return (
-                <Space>
-                    <Button onClick={() => console.log(value)} icon={<MaterialSymbol icon='visibility' size={22} />} />
-                    <Button onClick={() => console.log(value)} icon={<MaterialSymbol icon='delete' size={22} />} />
-                </Space>
+                <ActionColumn data={record} />
             )
         }
     }
+]
+
+const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
 
-];
+    const showDeleteModal = () => {
+        setOpen(true);
+    };
+    
+    const handleDeleteModalOk = () => {
+        setOpen(false);
+    };
+
+    const handleDeleteModalCancel = () => {
+        setOpen(false);
+    };
+
+    const handleEditClick = () => {
+        navigate(`/edit/${data.id}`);
+    }
+
+    return (
+        <Space>
+            <Button onClick={() => handleEditClick()} icon={<MaterialSymbol icon='visibility' size={22} />} />
+            <Button onClick={showDeleteModal} icon={<MaterialSymbol icon='delete' size={22} />} />
+            <Modal
+                open={open}
+                title={`Вы уверены в том, что хотите удалить ${data.organization_name}?`}
+                footer={() => {
+                    return <div style={{textAlign: 'start', marginTop: '1rem'}}>
+                        <Button key="submit" type="primary" danger onClick={handleDeleteModalOk} style={{marginRight: '.5rem'}}>
+                            Удалить
+                        </Button>
+                        <Button key="back" onClick={handleDeleteModalCancel}>
+                            Назад
+                        </Button>
+                    </div>;
+                }}
+            />  
+        </Space>
+    )
+}
 
 const HomePage: React.FC = () => {
     const navigate = useNavigate();
@@ -71,6 +116,10 @@ const HomePage: React.FC = () => {
         navigate("/add");
     };
 
+    const handlePaginationChange = (page: number | string | null) => {
+        console.log("Current page:", page);
+    };
+
     const {
         data: orgs = [],
         isLoading,
@@ -82,12 +131,12 @@ const HomePage: React.FC = () => {
     let table;
 
     if (isLoading) {
-        table = <Spin />;
+        table = <Spin />
     } else if (isSuccess) {
         const dataSource = orgs.map((org) => ({ ...org, key: org.id }));
-        table = <Table dataSource={dataSource} columns={columns} pagination={false} />;
+        table = <Table dataSource={dataSource} columns={columns} pagination={false} />
     } else if (isError) {
-        table = <div>{error.toString()}</div>;
+        table = <div>{error.toString()}</div>
     }
 
     return (
@@ -101,12 +150,12 @@ const HomePage: React.FC = () => {
                 <div className="data">
                     {table}
                 </div>
-                {/* <div className='pagination-container'>
-                    <Pagination current={1} defaultCurrent={1} pageSize={10} total={orgs.length} />
-                </div> */}
+                <div className='pagination-container'>
+                    <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
+                </div>
             </section>
         </div>
     );
-};
+}
 
-export default HomePage;
+export default HomePage;
\ No newline at end of file