added pagination

src/pages/HomePage/HomePage.tsx

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { MaterialSymbol } from 'react-material-symbols';
 import { Button, Pagination, Space, Spin, Table, Tag, Modal } from 'antd';
@@ -110,16 +110,25 @@ const ActionColumn: React.FC<{ data: any }> = ({ data }) => {
 }
 
 const HomePage: React.FC = () => {
+    const [totalOrgNumber, setTotalOrgNumber] = useState(0);
+    const [currentPage, setCurrentPage] = useState(1);
+    const ORG_NUMBER_PER_PAGE = 15;
     const navigate = useNavigate();
 
     const handleAddClick = () => {
         navigate("/add");
     };
 
-    const handlePaginationChange = (page: number | string | null) => {
-        console.log("Current page:", page);
+    const handlePaginationChange = (page: React.SetStateAction<number>) => {
+        setCurrentPage(page);
     };
 
+    const paginatedData = (dataSource: DataType[]) => {
+        const startIndex = (currentPage - 1) * ORG_NUMBER_PER_PAGE;
+        const endIndex = Math.min(startIndex + ORG_NUMBER_PER_PAGE, totalOrgNumber);
+        return dataSource.slice(startIndex, endIndex);
+    }
+
     const {
         data: orgs = [],
         isLoading,
@@ -134,11 +143,17 @@ const HomePage: React.FC = () => {
         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={paginatedData(dataSource)} columns={columns} pagination={false} />
     } else if (isError) {
         table = <div>{error.toString()}</div>
     }
 
+    useEffect(() => {
+        if (isSuccess) {
+            setTotalOrgNumber(orgs.length);
+        }
+    }, [isSuccess, orgs]);
+
     return (
         <div className="container">
             <section className='section'>
@@ -151,7 +166,7 @@ const HomePage: React.FC = () => {
                     {table}
                 </div>
                 <div className='pagination-container'>
-                    <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
+                    <Pagination current={currentPage} defaultCurrent={1} pageSize={ORG_NUMBER_PER_PAGE} total={totalOrgNumber} onChange={handlePaginationChange} />
                 </div>
             </section>
         </div>