changed: pagin -> table pagin, datepicker -> datepicker.rangepicker

src/pages/HomePage/HomePage.tsx

 import React, { createRef, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { useSelector, useDispatch } from 'react-redux';
-import { Button, message, Pagination, Space, Spin, Table } from 'antd';
+import { Button, message, Space, Spin, Table } from 'antd';
 import { TableRef } from 'antd/es/table';
 
 import { useGetOrganizationsQuery } from '../../features/api/organizationApiSlice';
@@ -71,10 +71,20 @@ const HomePage: React.FC = () => {
     } else if (isSuccess) {
         table = <Table 
             dataSource={paginatedData(orgs)} 
-            columns={columns} pagination={false} 
+            columns={columns}
             rowKey="id"
             className='home_table'
             ref={tableRef}
+            pagination={{
+                position: ['bottomCenter'],
+                defaultCurrent: 1,
+                current: currentPage,
+                pageSize: ORG_NUMBER_PER_PAGE,
+                total: totalOrgNumber,
+                onChange: handlePaginationChange,
+                hideOnSinglePage: true,
+                showSizeChanger: false
+            }}
         />
     } else if (isError) {
         table = <div>{error.toString()}</div>
@@ -111,7 +121,6 @@ const HomePage: React.FC = () => {
                         disabled={syncBtnState}
                         loading={isSyncLoading}
                         icon={<span className='material-icons' style={{fontSize: 22, color: '#0E2B52'}}>sync</span>}
-                        type='primary'
                     >
                         Синхронизировать справочники
                     </Button>
@@ -119,7 +128,7 @@ const HomePage: React.FC = () => {
                 <div className="data">
                     {table}
                 </div>
-                <div className='pagination-container'>
+                {/* <div className='pagination-container'>
                     <Pagination 
                         current={currentPage} 
                         defaultCurrent={1} 
@@ -129,7 +138,7 @@ const HomePage: React.FC = () => {
                         hideOnSinglePage={true}
                         showSizeChanger={false}
                     />
-                </div>
+                </div> */}
             </section>
         </div>
     );

src/pages/ManageOrganization/ManageOrganization.css

@@ -7,13 +7,14 @@
 }
 
 .form {
-    margin: 10px 20px 80px 20px;
+    margin: 10px 20px 50px;
     padding-right: 20px;
     flex: 1;
     overflow-y: auto;
 }
 
 .form-footer {
+    border-top: 1px solid #3333337c;
     position: fixed;
     bottom: 0;
     left: 0;

src/pages/ManageOrganization/ManageOrganization.tsx

 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router';
+import { useSelector, useDispatch } from 'react-redux';
 import { Form, Input, Button, Select, message } from 'antd';
+
 import { useAddNewOrganizationMutation, useEditOrganizationMutation, useGetOrganizationQuery, useGetOrganizationsQuery } from '../../features/api/organizationApiSlice';
 import { setTotalOrgNumber, setCurrentPage } from '../../features/pagination/mainPagination';
-import { useSelector, useDispatch } from 'react-redux';
 import './ManageOrganization.css';
 
 interface OrganizationValues {
@@ -161,7 +162,11 @@ const ManageOrganization: React.FC = () => {
                 </Item>
                 <div className='form-footer'>
                     <Item className='form-footer-item'>
-                        <Button type="default" style={{ marginRight: '8px' }} onClick={() => navigate("/")}>
+                        <Button 
+                            type="default" 
+                            style={{ marginRight: '8px' }} 
+                            onClick={() => navigate("/")}
+                        >
                             Отмена
                         </Button>
                         <Button type="primary" htmlType="submit">

src/pages/RequestPage/Columns.tsx

 import React, { useState } from 'react';
-import { Button, Space, Tag, Modal, message } from 'antd';
+import { Button, Tag, Modal, message } from 'antd';
 import type { TableProps } from 'antd';
 import { getStatusText, getStatusColor, openXMLInNewPage, downloadXML } from './utils';
 import dayjs from 'dayjs';

src/pages/RequestPage/RequestPage.tsx

 import React, { useEffect, useState, createRef } from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
-import { DatePicker, Select, Button, Pagination, Spin, Table } from 'antd';
+import { DatePicker, Select, Button, Spin, Table } from 'antd';
 import { useDispatch, useSelector } from 'react-redux';
 import { columns, DataType } from './Columns';
 import { useGetRequestsQuery } from '../../features/api/requestApiSlice';
@@ -10,8 +10,8 @@ import { TableRef } from 'antd/es/table';
 import './RequestPage.css';
 dayjs.extend(isBetween);
 
-const dateFormat = 'YYYY-MM-DD';
-const defaultDates = {
+const DATE_FORMAT = 'YYYY-MM-DD';
+const DEFAULT_DATES = {
     startDate: '2024/01/01',
     endDate: '2024/12/31'
 }
@@ -23,16 +23,17 @@ const RequestPage: React.FC = () => {
     const currentPage = useSelector((state: any) => state.reqPagination.currentPage);
     const REQ_NUMBER_PER_PAGE = useSelector((state: any) => state.reqPagination.REQ_NUMBER_PER_PAGE);
 
-    const [startDate, setStartDate] = useState<Dayjs>(dayjs(defaultDates.startDate, dateFormat));
-    const [endDate, setEndDate] = useState<Dayjs>(dayjs(defaultDates.endDate, dateFormat));
     const [data, setData] = useState<DataType[]>([]);
+    const [dates, setDates] = useState<[Dayjs | null, Dayjs | null]>([
+        dayjs(DEFAULT_DATES.startDate, DATE_FORMAT),
+        dayjs(DEFAULT_DATES.endDate, DATE_FORMAT),
+    ]);
     const [method, setMethod] = useState('');
+    const [isTableLoading, setIsTableLoading] = useState(false);
 
     const handlePaginationChange = (page: number) => {
-        /*
-            scrollIntoView resets to the top of the table after changing the page with Pagination. But the bug was found - the div above the table scrolls to top of the page too, under the Header component. It happens because of overflow
-        */
-        // tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' }); 
+        //scrollIntoView resets to the top of the table after changing the page with Pagination. But the bug was found - the div above the table scrolls to top of the page too, under the Header component. It happens because of overflow
+        //tableRef.current?.nativeElement.scrollIntoView({ behavior: 'smooth' }); 
         dispatch(setCurrentPage(page));
     };
 
@@ -44,14 +45,13 @@ const RequestPage: React.FC = () => {
 
     const applyFilters = () => {
         let filtered = reqs.list;
-        /*
-            subtract method is added because of the unique dates (hh:mm:ss = 00:00:00). The code below is the easiest way to deal with it, but it might be not the ideal form
-        */
-        const adjustedStartDate = dayjs(startDate).subtract(1, 'day'); 
-        if (startDate && endDate) {
+        //subtract and add methods are added because of the unique dates (hh:mm:ss = 00:00:00). The code below is the easiest way to deal with it, but it might be not the ideal form
+        const adjustedStartDate = dates && dates[0] ? dayjs(dates[0]).subtract(1, 'day') : null;
+        const adjustedEndDate = dates && dates[1] ? dayjs(dates[1]).subtract(1, 'day') : null;
+        if (dates && dates[0] && dates[1]) {
             filtered = filtered.filter((req) => {
-                const sendDate = dayjs(req.sendDate, dateFormat);
-                return sendDate.isBetween(adjustedStartDate, endDate, 'day', '[]');
+                const sendDate = dayjs(req.sendDate, DATE_FORMAT);
+                return sendDate.isBetween(adjustedStartDate, adjustedEndDate, 'day', '[]');
             });
         }
         
@@ -64,14 +64,14 @@ const RequestPage: React.FC = () => {
         dispatch(setTotalReqNumber(filtered.length));
     }
 
-    const onSelectStartDate = (date: Dayjs) => {
-        setStartDate(date);
-    }
-
-    const onSelectEndDate = (date: Dayjs) => {
-        setEndDate(date);
-    }
-
+    const onRangeChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
+        if (dates) {
+            setDates(dates);
+        } else {
+            setDates([null, null]);
+        }
+    };
+    
     const onSelectMethod = (method: string) => {
         setMethod(method);
     }
@@ -88,12 +88,11 @@ const RequestPage: React.FC = () => {
     let min: number = Infinity;
     let max: number = -Infinity;
     
-    if (isLoading) {
-        table = <Spin />;
-    } else if (isSuccess) {
+    if (isSuccess) {
         reqs.list.forEach((req) => {
             const dateValue = new Date(req.sendDate).valueOf();
-            if (min > dateValue) {
+            console.log(dateValue);
+            if (min > dateValue && dateValue!=0) {
                 min = dateValue; 
             }
             if (max < dateValue) {
@@ -103,7 +102,16 @@ const RequestPage: React.FC = () => {
         table = <Table 
             dataSource={paginateData(data)} 
             columns={columns} 
-            pagination={false}
+            loading={isTableLoading}
+            pagination={{
+                position: ['bottomCenter'],
+                current: currentPage,
+                defaultCurrent: 1,
+                pageSize: REQ_NUMBER_PER_PAGE,
+                total: totalReqNumber,
+                onChange: handlePaginationChange,
+                hideOnSinglePage: true
+            }}
             rowKey="id"
             ref={tableRef}
         />;
@@ -112,11 +120,13 @@ const RequestPage: React.FC = () => {
     }
 
     useEffect(() => {
-        if (isSuccess) {
+        if (isLoading) {
+            setIsTableLoading(true);
+        } else if (isSuccess) {
+            setIsTableLoading(false);
             setData(reqs.list); 
             dispatch(setTotalReqNumber(reqs.list.length));
-            setStartDate(dayjs(min));
-            setEndDate(dayjs(max));
+            setDates([dayjs(min), dayjs(max)]);
         }
     }, [isSuccess, reqs, dispatch]);
 
@@ -125,18 +135,13 @@ const RequestPage: React.FC = () => {
             <div className="filter">
                 <div className="fields">
                     <div className="dates">
-                        <DatePicker 
-                            onChange={onSelectStartDate} 
-                            format={dateFormat} 
-                            defaultValue={startDate}
-                            value={startDate}
-                            style={{ marginRight: 14 }}
-                        />
-                        <DatePicker 
-                            onChange={onSelectEndDate} 
-                            format={dateFormat} 
-                            defaultValue={endDate}
-                            value={endDate}
+                        <DatePicker.RangePicker
+                            onChange={onRangeChange}
+                            defaultValue={[
+                                dayjs(DEFAULT_DATES.startDate, DATE_FORMAT),
+                                dayjs(DEFAULT_DATES.endDate, DATE_FORMAT),
+                            ]}
+                            value={dates}
                         />
                     </div>
                     <div className="category">
@@ -173,16 +178,6 @@ const RequestPage: React.FC = () => {
             <div className="data">
                 {table}
             </div>
-            <div className="pagination_container">
-                <Pagination
-                    current={currentPage}
-                    defaultCurrent={1}
-                    pageSize={REQ_NUMBER_PER_PAGE}
-                    total={totalReqNumber}
-                    onChange={handlePaginationChange}
-                    hideOnSinglePage={true}
-                />
-            </div>
         </div>
     );
 };