feat(submissions): Implement submissions page with paginated table

This commit introduces a new page for users to view their submissions in a structured and paginated table. This allows users to easily track their submission history and access key details.

The main changes include:
- A new page at `/submissions` to display the submissions list.
- A `SubmissionsTable` component to render submission data, including title, country, status, and a link to the submission URL.
- Integration of `react-paginate` to handle navigation through large sets of data.
- A new `useSubmissions` custom hook using TanStack Query for efficient, paginated data fetching from the API.
- Addition of the `currency-symbol-map` dependency to display prices with the correct currency symbol.

src/components/Tables/tenders/index.tsx

@@ -14,75 +14,99 @@ import {
 import { TendersSkeleton } from "./Skeleton";
 import { cn } from "@/lib/utils";
 import { getStatusColor } from "@/utils/shared";
+import { ExclamationIcon } from "@/assets/icons";
+import Pagination from "@/components/ui/pagination";
+import Page from "../../../app/forms/form-layout/page";
+import Link from "next/link";
 const TendersTable = () => {
-  const {
-    allTenders,
-    isPending,
-    ref,
-    isFetchingNextPage,
-    data,
-    fetchNextPage,
-    hasNextPage,
-  } = useTenderListPresenter();
+  const { allTenders, isPending, router, pathName, setParams } =
+    useTenderListPresenter();
 
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
-            <TableHead colSpan={100} className="text-start font-extrabold">
+            {/* <TableHead colSpan={100} className="text-start font-extrabold">
               Row
-            </TableHead>
+            </TableHead> */}
             <TableHead colSpan={100} className="text-start font-extrabold">
               Title
             </TableHead>
             <TableHead colSpan={100} className="text-start font-extrabold">
               Country Code
             </TableHead>
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Submission Url
+            </TableHead>
             <TableHead colSpan={100} className="text-start font-extrabold">
               Status
             </TableHead>
+
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Actions
+            </TableHead>
           </TableRow>
         </TableHeader>
 
         {isPending && <TendersSkeleton />}
         <TableBody>
-          {allTenders.map((item, index) =>
+          {allTenders?.data.tenders?.map((item, index) =>
             !item ? (
               <h6 key={index}>No tenders were found</h6>
             ) : (
               <TableRow
-                ref={index === allTenders.length - 1 ? ref : null}
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
               >
-                <TableCell className="text-start" colSpan={100}>
+                {/* <TableCell className="text-start" colSpan={100}>
                   {index + 1}
-                </TableCell>
+                </TableCell> */}
                 <TableCell className="text-start" colSpan={100}>
                   {item.title}
                 </TableCell>
                 <TableCell className="text-start" colSpan={100}>
                   {item.country_code}
                 </TableCell>
+
+                <TableCell className={cn(`text capitalize`)} colSpan={100}>
+                  {item.submission_url ? (
+                    <Link target="_blank" href={item.submission_url}>
+                      {item.submission_url}
+                    </Link>
+                  ) : (
+                    "-"
+                  )}
+                </TableCell>
                 <TableCell className={cn(`text capitalize`)} colSpan={100}>
                   <Status status={item.status}>{item.status}</Status>
                 </TableCell>
+                <TableCell className={cn(`text capitalize`)} colSpan={100}>
+                  <button
+                    className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
+                    onClick={() => {
+                      router.push(`${pathName}/${item.id}`);
+                    }}
+                  >
+                    <ExclamationIcon />
+                  </button>
+                </TableCell>
               </TableRow>
             ),
           )}
         </TableBody>
-        {isFetchingNextPage && <TendersSkeleton />}
       </Table>
-      {(data?.pages.length ?? 0) >= 5 && hasNextPage && (
-        <button
-          onClick={() => fetchNextPage()}
-          disabled={isFetchingNextPage}
-          className="mt-4 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-        >
-          {isFetchingNextPage ? "Loading..." : "Load More"}
-        </button>
-      )}
+      <Pagination
+        currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
+        totalPages={allTenders?.meta?.pages ?? 1}
+        onPageChange={(e) => {
+          setParams((currentParams) => ({
+            ...currentParams,
+            offset: e.selected * (allTenders?.meta?.limit ?? 10),
+            limit: allTenders?.meta?.limit ?? 10,
+          }));
+        }}
+      />
     </div>
   );
 };