feature: secret overview page pagination/optimizations

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -1,3 +1,4 @@
+import {} from "@fortawesome/fontawesome-svg-core";
 import {
   faCaretDown,
   faCheck,
@@ -40,6 +41,8 @@ export const Pagination = ({
   const upperLimit = Math.ceil(count / perPage);
   const nextPageNumber = Math.min(upperLimit, page + 1);
   const canGoNext = page + 1 <= upperLimit;
+  const canGoFirst = page > 1;
+  const canGoLast = page < upperLimit;
 
   return (
     <div
@@ -73,6 +76,16 @@ export const Pagination = ({
         </DropdownMenu>
       </div>
       <div className="flex items-center space-x-4">
+        <IconButton
+          variant="plain"
+          ariaLabel="pagination-first"
+          className="relative"
+          onClick={() => onChangePage(1)}
+          isDisabled={!canGoFirst}
+        >
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronLeft} />
+          <FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
+        </IconButton>
         <IconButton
           variant="plain"
           ariaLabel="pagination-prev"
@@ -89,6 +102,16 @@ export const Pagination = ({
         >
           <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
         </IconButton>
+        <IconButton
+          variant="plain"
+          ariaLabel="pagination-last"
+          className="relative"
+          onClick={() => onChangePage(upperLimit)}
+          isDisabled={!canGoLast}
+        >
+          <FontAwesomeIcon className="absolute left-2.5 top-1 text-xs" icon={faChevronRight} />
+          <FontAwesomeIcon className="text-xs" icon={faChevronRight} />
+        </IconButton>
       </div>
     </div>
   );