ft(invitationPagination): Improve invitation table pagination

package.json

@@ -48,6 +48,7 @@
     "@mui/styled-engine": "^5.13.2",
     "@mui/x-data-grid": "^5.17.26",
     "@react-pdf-viewer/core": "^3.12.0",
+    "@tanstack/react-table": "^8.20.5",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "^20.4.2",

src/components/InvitationDataPagination.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  ArrowCircleLeftIcon,
+  ArrowCircleRightIcon,
+} from '@heroicons/react/outline';
+import { Table } from "@tanstack/react-table";
+
+interface PaginationProps {
+  tableLib: Table<any>;
+  totalPages: number;
+  pageSize: number;
+  pageIndex: number;
+  sizes: number[];
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  tableLib,
+  totalPages,
+  pageSize,
+  pageIndex,
+  sizes,
+}) => (
+  <div className="font-serif">
+    <table className="w-full mt-2">
+      <tfoot className="w-full py-2">
+        <tr className="w-full py-2">
+          <td colSpan={sizes.length}>
+            <div className="flex flex-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto">
+
+              {/* Previous / Next Page Buttons */}
+              <div className="flex mb-4 sm:-ml-7 -ml-7 lg:mb-0 mr-auto">
+                <button
+                  type="button"
+                  aria-label="left-arrow"
+                  className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
+                  onClick={() => tableLib.previousPage()}
+                  disabled={pageIndex === 0}
+                >
+                  <ArrowCircleLeftIcon className="w-5" fontSize="sm" />
+                </button>
+
+                <button
+                  type="button"
+                  aria-label="right-arrow"
+                  className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
+                  onClick={() => tableLib.nextPage()}
+                  disabled={pageIndex === totalPages - 1}
+                >
+                  <ArrowCircleRightIcon className="w-5" fontSize="sm" />
+                </button>
+              </div>
+
+              {/* Page Information */}
+              <div className="flex flex-row relative md:ml-80 lg:flex-row justify-center items-baseline w-full lg:w-1/3 w-1/2 text-xs lg:text-md mx-2 -mr-5">
+                <span className="flex justify-center sm:w-[50%] w-[70%] lg:mb-0">
+                  Page{' '}
+                  <strong>
+                    {pageIndex + 1} of {` ${totalPages}`}
+                  </strong>{' '}
+                </span>
+              </div>
+
+              {/* Page Size Selector */}
+              <div className="flex items-center sm:mx-2 mx-0 mb-2 lg:mb-0 ">
+                <select
+                  className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
+                  value={pageSize}
+                  onChange={(e) => tableLib.setPageSize(Number(e.target.value))}
+                  style={{
+                    height: '30px',
+                    border: 'solid 0.1rem #9e85f5',
+                  }}
+                >
+                  {sizes.map((size) => (
+                    <option key={size} value={size}>
+                      Show {size}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+);