From 6ab774194b4026a3dfc4dcc1b10185ad551db858 Mon Sep 17 00:00:00 2001
From: Mutesasira Moses <mozzymutesa@gmail.com>
Date: Thu, 23 Nov 2023 12:09:50 +0300
Subject: [PATCH 1/3] fix results and validation table pagination

---
 .../components/patient/SearchPatientForm.js   | 47 +++++++++++++++----
 .../components/resultPage/SearchResultForm.js | 25 ++++++++--
 .../src/components/validation/Validation.js   | 18 ++++---
 3 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/patient/SearchPatientForm.js b/frontend/src/components/patient/SearchPatientForm.js
index db7a8048d1..ff4134bea5 100644
--- a/frontend/src/components/patient/SearchPatientForm.js
+++ b/frontend/src/components/patient/SearchPatientForm.js
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { FormattedMessage, injectIntl ,useIntl} from "react-intl";
+import { FormattedMessage, injectIntl, useIntl } from "react-intl";
 import "../Style.css";
 import { getFromOpenElisServer } from "../utils/Utils";
 import {
@@ -132,7 +132,10 @@ function SearchPatientForm(props) {
                 {({ field }) => (
                   <TextInput
                     name={field.name}
-                    labelText={intl.formatMessage({id: "patient.id", defaultMessage:"Patient Id",})}
+                    labelText={intl.formatMessage({
+                      id: "patient.id",
+                      defaultMessage: "Patient Id",
+                    })}
                     id={field.name}
                     className="inputText"
                   />
@@ -142,7 +145,10 @@ function SearchPatientForm(props) {
                 {({ field, setFieldValue }) => (
                   <CustomLabNumberInput
                     name={field.name}
-                    labelText={intl.formatMessage({id: "patient.prev.lab.no", defaultMessage: "Previous Lab Number", })}
+                    labelText={intl.formatMessage({
+                      id: "patient.prev.lab.no",
+                      defaultMessage: "Previous Lab Number",
+                    })}
                     id={field.name}
                     className="inputText"
                     onChange={(e, rawValue) => {
@@ -157,7 +163,10 @@ function SearchPatientForm(props) {
                 {({ field }) => (
                   <TextInput
                     name={field.name}
-                    labelText={intl.formatMessage({id: "patient.last.name", defaultMessage: "Last Name", })}
+                    labelText={intl.formatMessage({
+                      id: "patient.last.name",
+                      defaultMessage: "Last Name",
+                    })}
                     id={field.name}
                     className="inputText"
                   />
@@ -167,7 +176,10 @@ function SearchPatientForm(props) {
                 {({ field }) => (
                   <TextInput
                     name={field.name}
-                    labelText={intl.formatMessage({id:"patient.first.name", defaultMessage: "First Name",})}
+                    labelText={intl.formatMessage({
+                      id: "patient.first.name",
+                      defaultMessage: "First Name",
+                    })}
                     id={field.name}
                     className="inputText"
                   />
@@ -188,7 +200,10 @@ function SearchPatientForm(props) {
                     <DatePickerInput
                       id="date-picker-default-id"
                       placeholder="dd/mm/yyyy"
-                      labelText={intl.formatMessage({id:"patient.dob", defaultMessage: "Date of Birth", })}
+                      labelText={intl.formatMessage({
+                        id: "patient.dob",
+                        defaultMessage: "Date of Birth",
+                      })}
                       type="text"
                       name={field.name}
                     />
@@ -200,18 +215,27 @@ function SearchPatientForm(props) {
                   <RadioButtonGroup
                     className="inputText"
                     defaultSelected=""
-                    legendText={intl.formatMessage({id:"patient.gender", defaultMessage: "Gender",})}
+                    legendText={intl.formatMessage({
+                      id: "patient.gender",
+                      defaultMessage: "Gender",
+                    })}
                     name={field.name}
                     id="search_patient_gender"
                   >
                     <RadioButton
                       id="search-radio-1"
-                      labelText={intl.formatMessage({ id: "patient.male", defaultMessage: "Male", })} 
+                      labelText={intl.formatMessage({
+                        id: "patient.male",
+                        defaultMessage: "Male",
+                      })}
                       value="M"
                     />
                     <RadioButton
                       id="search-radio-2"
-                      labelText={intl.formatMessage({ id: "patient.female", defaultMessage:"Female", })} 
+                      labelText={intl.formatMessage({
+                        id: "patient.female",
+                        defaultMessage: "Female",
+                      })}
                       value="F"
                     />
                   </RadioButtonGroup>
@@ -221,7 +245,10 @@ function SearchPatientForm(props) {
             <div className="formInlineDiv">
               <div className="searchActionButtons">
                 <Button kind="tertiary">
-                <FormattedMessage id="label.button.externalsearch" defaultMessage="External Search"/>
+                  <FormattedMessage
+                    id="label.button.externalsearch"
+                    defaultMessage="External Search"
+                  />
                 </Button>
                 <Button type="submit">
                   <FormattedMessage id="label.button.search" />
diff --git a/frontend/src/components/resultPage/SearchResultForm.js b/frontend/src/components/resultPage/SearchResultForm.js
index dde1b3438d..5efe710320 100644
--- a/frontend/src/components/resultPage/SearchResultForm.js
+++ b/frontend/src/components/resultPage/SearchResultForm.js
@@ -444,7 +444,7 @@ export function SearchResults(props) {
   const { configurationProperties } = useContext(ConfigurationContext);
 
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(100);
+  const [pageSize, setPageSize] = useState(20);
   const [acceptAsIs, setAcceptAsIs] = useState([]);
   const [referalOrganizations, setReferalOrganizations] = useState([]);
   const [methods, setMethods] = useState([]);
@@ -921,6 +921,7 @@ export function SearchResults(props) {
     jp.value(form, shadowRejected, checked);
     var isModified = "testResult[" + rowId + "].isModified";
     jp.value(form, isModified, "true");
+
     var allrejectedItems = { ...rejectedItems };
     allrejectedItems[rowId] = checked;
     setRejectedItems(allrejectedItems);
@@ -1032,6 +1033,13 @@ export function SearchResults(props) {
     }
   };
 
+  // const paginationOptions = {
+  //   rowsPerPageText: 'Rows per page:',
+  //   rangeSeparatorText: 'of',
+  //   selectAllRowsItem: true,
+  //   selectAllRowsItemText: 'All',
+  // };
+
   return (
     <>
       {notificationVisible === true ? <AlertDialog /> : ""}
@@ -1045,8 +1053,8 @@ export function SearchResults(props) {
                 <img
                   src={config.serverBaseUrl + "/images/nonconforming.gif"}
                   alt="nonconforming"
-                  width="25" // Set your desired width
-                  height="20" // Set your desired height
+                  width="25" 
+                  height="20" 
                 />
               </picture>
               <b>
@@ -1075,17 +1083,24 @@ export function SearchResults(props) {
               //onBlur={handleBlur}
             >
               <DataTable
-                data={props.results.testResult}
+                data={props.results.testResult.slice(
+                  (page - 1) * pageSize,
+                  page * pageSize,
+                )}
                 columns={columns}
                 isSortable
                 expandableRows
                 expandableRowsComponent={renderReferral}
+                // pagination
+                // paginationPerPage={10} // Number of rows per page
+                // paginationRowsPerPageOptions={[10, 20, 30, 40, 50 ,100]} // Options for rows per page dropdown
+                // paginationComponentOptions={paginationOptions}
               ></DataTable>
               <Pagination
                 onChange={handlePageChange}
                 page={page}
                 pageSize={pageSize}
-                pageSizes={[100, 50, 10]}
+                pageSizes={[10, 20, 50, 100]}
                 totalItems={props.results.testResult?.length}
               ></Pagination>
 
diff --git a/frontend/src/components/validation/Validation.js b/frontend/src/components/validation/Validation.js
index 47a7cb2fb3..39c6a10b01 100644
--- a/frontend/src/components/validation/Validation.js
+++ b/frontend/src/components/validation/Validation.js
@@ -30,10 +30,7 @@ const Validation = (props) => {
     useContext(NotificationContext);
   const { configurationProperties } = useContext(ConfigurationContext);
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(100);
-  const [referalOrganizations, setReferalOrganizations] = useState([]);
-  const [methods, setMethods] = useState([]);
-  const [referralReasons, setReferralReasons] = useState([]);
+  const [pageSize, setPageSize] = useState(20);
 
   const componentMounted = useRef(false);
 
@@ -387,10 +384,17 @@ const Validation = (props) => {
         onSubmit
         onChange
       >
-        {({ values, errors, touched, handleChange, handleSubmit }) => (
+        {({ values, errors, touched, handleChange }) => (
           <Form onChange={handleChange}>
             <DataTable
-              data={props.results ? props.results.resultList : []}
+              data={
+                props.results
+                  ? props.results.resultList.slice(
+                      (page - 1) * pageSize,
+                      page * pageSize,
+                    )
+                  : []
+              }
               columns={columns}
               isSortable
             ></DataTable>
@@ -398,7 +402,7 @@ const Validation = (props) => {
               onChange={handlePageChange}
               page={page}
               pageSize={pageSize}
-              pageSizes={[100, 50, 10]}
+              pageSizes={[10, 20, 50, 100]}
               totalItems={
                 props.results
                   ? props.results.resultList

From 6277a2ee722e14a8e5b97c5e1cc657d2d6b2687e Mon Sep 17 00:00:00 2001
From: Mutesasira Moses <mozzymutesa@gmail.com>
Date: Thu, 23 Nov 2023 12:45:23 +0300
Subject: [PATCH 2/3] add pagination to program dashboards

---
 .../components/cytology/CytologyDashBoard.js  | 24 +++++++++++++++++-
 .../ImmunohistochemistryDashboard.js          | 23 ++++++++++++++++-
 .../pathology/PathologyDashboard.js           | 25 ++++++++++++++++++-
 .../components/resultPage/SearchResultForm.js | 11 --------
 4 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/cytology/CytologyDashBoard.js b/frontend/src/components/cytology/CytologyDashBoard.js
index e6b6c1c3bd..fea1c27393 100644
--- a/frontend/src/components/cytology/CytologyDashBoard.js
+++ b/frontend/src/components/cytology/CytologyDashBoard.js
@@ -18,6 +18,7 @@ import {
   TableCell,
   Tile,
   Loading,
+  Pagination,
 } from "@carbon/react";
 import UserSessionDetailsContext from "../../UserSessionDetailsContext";
 import { Search } from "@carbon/react";
@@ -49,6 +50,8 @@ function CytologyDashboard() {
     complete: 0,
   });
   const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   const setStatusList = (statusList) => {
     if (componentMounted.current) {
@@ -72,6 +75,15 @@ function CytologyDashboard() {
       refreshItems,
     );
   };
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
+
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
 
   const renderCell = (cell, row) => {
     var status = row.cells.find((e) => e.info.header === "status").value;
@@ -298,7 +310,10 @@ function CytologyDashboard() {
 
           <Column lg={16} md={8} sm={4}>
             <DataTable
-              rows={pathologyEntries}
+              rows={pathologyEntries.slice(
+                (page - 1) * pageSize,
+                page * pageSize,
+              )}
               headers={[
                 {
                   key: "requestDate",
@@ -364,6 +379,13 @@ function CytologyDashboard() {
                 </TableContainer>
               )}
             </DataTable>
+            <Pagination
+              onChange={handlePageChange}
+              page={page}
+              pageSize={pageSize}
+              pageSizes={[10, 20, 30]}
+              totalItems={pathologyEntries.length}
+            ></Pagination>
           </Column>
         </Grid>
       </div>
diff --git a/frontend/src/components/immunohistochemistry/ImmunohistochemistryDashboard.js b/frontend/src/components/immunohistochemistry/ImmunohistochemistryDashboard.js
index e9fd6f1e08..1895882c97 100644
--- a/frontend/src/components/immunohistochemistry/ImmunohistochemistryDashboard.js
+++ b/frontend/src/components/immunohistochemistry/ImmunohistochemistryDashboard.js
@@ -18,6 +18,7 @@ import {
   TableBody,
   TableCell,
   Section,
+  Pagination,
 } from "@carbon/react";
 import { Search } from "@carbon/react";
 import {
@@ -50,6 +51,8 @@ function ImmunohistochemistryDashboard() {
   });
   const { userSessionDetails } = useContext(UserSessionDetailsContext);
   const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   function formatDateToDDMMYYYY(date) {
     var day = date.getDate();
@@ -79,7 +82,15 @@ function ImmunohistochemistryDashboard() {
       formatDateToDDMMYYYY(currentDate)
     );
   };
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
 
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
   const tileList = [
     { title: "Cases in Progress", count: counts.inProgress },
     {
@@ -313,7 +324,10 @@ function ImmunohistochemistryDashboard() {
 
           <Column lg={16} md={8} sm={4}>
             <DataTable
-              rows={immunohistochemistryEntries}
+              rows={immunohistochemistryEntries.slice(
+                (page - 1) * pageSize,
+                page * pageSize,
+              )}
               headers={[
                 {
                   key: "requestDate",
@@ -379,6 +393,13 @@ function ImmunohistochemistryDashboard() {
                 </TableContainer>
               )}
             </DataTable>
+            <Pagination
+              onChange={handlePageChange}
+              page={page}
+              pageSize={pageSize}
+              pageSizes={[10, 20, 30]}
+              totalItems={immunohistochemistryEntries.length}
+            ></Pagination>
           </Column>
         </Grid>
       </div>
diff --git a/frontend/src/components/pathology/PathologyDashboard.js b/frontend/src/components/pathology/PathologyDashboard.js
index a3773ac532..4d05c28c97 100644
--- a/frontend/src/components/pathology/PathologyDashboard.js
+++ b/frontend/src/components/pathology/PathologyDashboard.js
@@ -18,6 +18,7 @@ import {
   TableCell,
   Tile,
   Loading,
+  Pagination,
 } from "@carbon/react";
 import UserSessionDetailsContext from "../../UserSessionDetailsContext";
 import { Search } from "@carbon/react";
@@ -38,6 +39,8 @@ function PathologyDashboard() {
   const { userSessionDetails } = useContext(UserSessionDetailsContext);
   const [statuses, setStatuses] = useState([]);
   const [pathologyEntries, setPathologyEntries] = useState([]);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [filters, setFilters] = useState({
     searchTerm: "",
     myCases: false,
@@ -74,6 +77,16 @@ function PathologyDashboard() {
     );
   };
 
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
+
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
+
   const renderCell = (cell, row) => {
     var status = row.cells.find((e) => e.info.header === "status").value;
     var pathologySampleId = row.id;
@@ -303,7 +316,10 @@ function PathologyDashboard() {
 
           <Column lg={16} md={8} sm={4}>
             <DataTable
-              rows={pathologyEntries}
+              rows={pathologyEntries.slice(
+                (page - 1) * pageSize,
+                page * pageSize,
+              )}
               headers={[
                 {
                   key: "requestDate",
@@ -369,6 +385,13 @@ function PathologyDashboard() {
                 </TableContainer>
               )}
             </DataTable>
+            <Pagination
+              onChange={handlePageChange}
+              page={page}
+              pageSize={pageSize}
+              pageSizes={[10, 20, 30]}
+              totalItems={pathologyEntries.length}
+            ></Pagination>
           </Column>
         </Grid>
       </div>
diff --git a/frontend/src/components/resultPage/SearchResultForm.js b/frontend/src/components/resultPage/SearchResultForm.js
index 5efe710320..cb800a2370 100644
--- a/frontend/src/components/resultPage/SearchResultForm.js
+++ b/frontend/src/components/resultPage/SearchResultForm.js
@@ -1033,13 +1033,6 @@ export function SearchResults(props) {
     }
   };
 
-  // const paginationOptions = {
-  //   rowsPerPageText: 'Rows per page:',
-  //   rangeSeparatorText: 'of',
-  //   selectAllRowsItem: true,
-  //   selectAllRowsItemText: 'All',
-  // };
-
   return (
     <>
       {notificationVisible === true ? <AlertDialog /> : ""}
@@ -1091,10 +1084,6 @@ export function SearchResults(props) {
                 isSortable
                 expandableRows
                 expandableRowsComponent={renderReferral}
-                // pagination
-                // paginationPerPage={10} // Number of rows per page
-                // paginationRowsPerPageOptions={[10, 20, 30, 40, 50 ,100]} // Options for rows per page dropdown
-                // paginationComponentOptions={paginationOptions}
               ></DataTable>
               <Pagination
                 onChange={handlePageChange}

From a82cd3a110edbedaee1d2b7d9fdfe2ce698bf48b Mon Sep 17 00:00:00 2001
From: Mutesasira Moses <mozzymutesa@gmail.com>
Date: Thu, 23 Nov 2023 13:24:30 +0300
Subject: [PATCH 3/3] add pagination for the workplan page

---
 frontend/src/components/workplan/Workplan.js | 179 +++++++++++--------
 1 file changed, 101 insertions(+), 78 deletions(-)

diff --git a/frontend/src/components/workplan/Workplan.js b/frontend/src/components/workplan/Workplan.js
index c11626ee30..4c7a6ccc6f 100644
--- a/frontend/src/components/workplan/Workplan.js
+++ b/frontend/src/components/workplan/Workplan.js
@@ -11,6 +11,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Pagination,
 } from "@carbon/react";
 import React, { useState, useContext } from "react";
 import "../Style.css";
@@ -32,6 +33,8 @@ export default function Workplan(props) {
   const [configurationName, setConfigurationName] = useState("");
   const [selectedValue, setSelectedValue] = useState("");
   const [selectedLabel, setSelectedLabel] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   const type = props.type;
   let title = "";
@@ -64,6 +67,15 @@ export default function Workplan(props) {
   const handleSelectedLabel = (val) => {
     setSelectedLabel(val);
   };
+  const handlePageChange = (pageInfo) => {
+    if (page != pageInfo.page) {
+      setPage(pageInfo.page);
+    }
+
+    if (pageSize != pageInfo.pageSize) {
+      setPageSize(pageInfo.pageSize);
+    }
+  };
 
   const printWorkplan = () => {
     let form = {
@@ -216,91 +228,102 @@ export default function Workplan(props) {
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {testsList.map((row, index) => {
-                        if (!(row.accessionNumber === currentAccessionNumber)) {
-                          showAccessionNumber = true;
-                          currentAccessionNumber = row.accessionNumber;
-                          rowColorIndex++;
-                        } else {
-                          showAccessionNumber = false;
-                        }
-                        return (
-                          <TableRow
-                            key={index}
-                            id={"row_" + index}
-                            className={
-                              rowColorIndex % 2 === 0 ? "evenRow" : "oddRow"
-                            }
-                          >
-                            {!row.servingAsTestGroupIdentifier && (
-                              <TableCell>
-                                <input
-                                  type="checkbox"
-                                  value={row.notIncludedInWorkplan}
-                                  id={"includedCheck_" + index}
-                                  className="includedCheck"
-                                  onClick={(e) =>
-                                    disableEnableTest(e.target, index)
-                                  }
-                                />
-                              </TableCell>
-                            )}
-                            {type === "test" && (
-                              <TableCell>
-                                {row.nonconforming && (
-                                  <img
-                                    src={`images/nonconforming.gif`}
-                                    alt="nonconforming"
+                      {testsList
+                        .slice((page - 1) * pageSize, page * pageSize)
+                        .map((row, index) => {
+                          if (
+                            !(row.accessionNumber === currentAccessionNumber)
+                          ) {
+                            showAccessionNumber = true;
+                            currentAccessionNumber = row.accessionNumber;
+                            rowColorIndex++;
+                          } else {
+                            showAccessionNumber = false;
+                          }
+                          return (
+                            <TableRow
+                              key={index}
+                              id={"row_" + index}
+                              className={
+                                rowColorIndex % 2 === 0 ? "evenRow" : "oddRow"
+                              }
+                            >
+                              {!row.servingAsTestGroupIdentifier && (
+                                <TableCell>
+                                  <input
+                                    type="checkbox"
+                                    value={row.notIncludedInWorkplan}
+                                    id={"includedCheck_" + index}
+                                    className="includedCheck"
+                                    onClick={(e) =>
+                                      disableEnableTest(e.target, index)
+                                    }
                                   />
-                                )}
-                              </TableCell>
-                            )}
-                            <TableCell>
-                              {showAccessionNumber && (
-                                <Link
-                                  style={{ color: "blue" }}
-                                  href={
-                                    "/result?type=order&doRange=false&accessionNumber=" +
-                                    row.accessionNumber
-                                  }
-                                >
-                                  <u>
-                                    {convertAlphaNumLabNumForDisplay(
-                                      row.accessionNumber,
-                                    )}
-                                  </u>
-                                </Link>
+                                </TableCell>
+                              )}
+                              {type === "test" && (
+                                <TableCell>
+                                  {row.nonconforming && (
+                                    <img
+                                      src={`images/nonconforming.gif`}
+                                      alt="nonconforming"
+                                    />
+                                  )}
+                                </TableCell>
                               )}
-                            </TableCell>
-                            {subjectOnWorkplan.toLowerCase() === "true" && (
-                              <TableCell>
-                                {showAccessionNumber && row.patientInfo}
-                              </TableCell>
-                            )}
-                            {nextVisitOnWorkplan.toLowerCase() === "true" && (
-                              <TableCell>
-                                {showAccessionNumber && row.nextVisitDate}
-                              </TableCell>
-                            )}
-                            {type !== "test" && (
                               <TableCell>
-                                {row.nonconforming && (
-                                  <img
-                                    src={`images/nonconforming.gif`}
-                                    alt="nonconforming"
-                                  />
+                                {showAccessionNumber && (
+                                  <Link
+                                    style={{ color: "blue" }}
+                                    href={
+                                      "/result?type=order&doRange=false&accessionNumber=" +
+                                      row.accessionNumber
+                                    }
+                                  >
+                                    <u>
+                                      {convertAlphaNumLabNumForDisplay(
+                                        row.accessionNumber,
+                                      )}
+                                    </u>
+                                  </Link>
                                 )}
                               </TableCell>
-                            )}
-                            {type !== "test" && (
-                              <TableCell>{row.testName}</TableCell>
-                            )}
-                            <TableCell>{row.receivedDate}</TableCell>
-                          </TableRow>
-                        );
-                      })}
+                              {subjectOnWorkplan.toLowerCase() === "true" && (
+                                <TableCell>
+                                  {showAccessionNumber && row.patientInfo}
+                                </TableCell>
+                              )}
+                              {nextVisitOnWorkplan.toLowerCase() === "true" && (
+                                <TableCell>
+                                  {showAccessionNumber && row.nextVisitDate}
+                                </TableCell>
+                              )}
+                              {type !== "test" && (
+                                <TableCell>
+                                  {row.nonconforming && (
+                                    <img
+                                      src={`images/nonconforming.gif`}
+                                      alt="nonconforming"
+                                    />
+                                  )}
+                                </TableCell>
+                              )}
+                              {type !== "test" && (
+                                <TableCell>{row.testName}</TableCell>
+                              )}
+                              <TableCell>{row.receivedDate}</TableCell>
+                            </TableRow>
+                          );
+                        })}
                     </TableBody>
                   </Table>
+                  <Pagination
+                    onChange={handlePageChange}
+                    page={page}
+                    pageSize={pageSize}
+                    pageSizes={[10, 20, 30]}
+                    totalItems={testsList.length}
+                  ></Pagination>
                 </>
               </Column>
               <hr />