From 56fc3d0de2b8832104f89a01d420165142d34419 Mon Sep 17 00:00:00 2001
From: andrei <andrei@duvakin.ru>
Date: Mon, 10 Mar 2025 18:08:51 +0500
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=B1=D0=B8=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D1=8B=20=D0=B2=D1=8B=D0=B4=D0=B0=D1=87=D0=B8=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D0=B7=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-app/src/pages/IssuesPage.jsx | 43 ++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/web-app/src/pages/IssuesPage.jsx b/web-app/src/pages/IssuesPage.jsx
index 29059b0..d051c32 100644
--- a/web-app/src/pages/IssuesPage.jsx
+++ b/web-app/src/pages/IssuesPage.jsx
@@ -10,7 +10,7 @@ import {
     Button,
     FloatButton,
     Typography,
-    Timeline, Grid
+    Timeline, Grid, Pagination
 } from "antd";
 import getAllLensIssues from "../api/lens_issues/GetAllLensIssues.jsx";
 import {useEffect, useState} from "react";
@@ -39,6 +39,9 @@ const IssuesPage = () => {
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
 
+    const [timelinePage, setTimelinePage] = useState(1);
+    const [timeLinePageSize, setTimeLinePageSize] = useState(10);
+
     const [startFilterDate, setStartFilterDate] = useState(null);
     const [endFilterDate, setEndFilterDate] = useState(null);
 
@@ -241,12 +244,38 @@ const IssuesPage = () => {
         ),
     }));
 
-    const TimeLineView = () => (
-        <Timeline
-            items={timeLineItems}
-            mode={screens.xs ? "left" : "right"}
-        />
-    );
+    const TimeLineView = () => {
+        const paginatedItems = timeLineItems.slice(
+            (timelinePage - 1) * timeLinePageSize,
+            timelinePage * timeLinePageSize
+        );
+
+        return (
+            <>
+                <Timeline
+                    items={paginatedItems}
+                    mode={screens.xs ? "left" : "right"}
+                />
+                <Row
+                    style={{textAlign: "center", marginTop: 20}}
+                    align={"middle"}
+                    justify={"end"}
+                >
+                    <Pagination
+                        current={timelinePage}
+                        pageSize={timeLinePageSize}
+                        total={timeLineItems.length}
+                        onChange={(page, newPageSize) => {
+                            setTimelinePage(page);
+                            setTimeLinePageSize(newPageSize);
+                        }}
+                        showSizeChanger={true}
+                        pageSizeOptions={["5", "10", "20", "50"]}
+                    />
+                </Row>
+            </>
+        );
+    };
 
     return (
         <div style={{padding: 20}}>