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/app/customers/edit/[id]/page.tsx

@@ -4,7 +4,7 @@ import { use } from "react";
 import {
   useCustomersInfiniteQuery,
   useGetCustomersDetails,
-} from "../../../../hooks/queries/useCustomerQueries";
+} from "@/hooks/queries/useCustomerQueries";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateCustomer from "@/components/forms/customers/CreateCustomer";
 import Loading from "@/app/loading";

src/app/tenders/[details]/page.tsx

@@ -0,0 +1,118 @@
+"use client";
+import Loading from "@/app/loading";
+import { LocationIcon } from "@/assets/icons";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Status from "@/components/ui/Status";
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useTenderDetailQuery } from "@/hooks/queries";
+import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
+import { msToDate, unixToDate } from "@/utils/shared";
+import getSymbolFromCurrency from "currency-symbol-map";
+import { use } from "react";
+import { TableCell } from "../../../components/ui/table";
+import Link from "next/link";
+
+interface IProps {
+  params: Promise<{
+    details: string;
+  }>;
+}
+
+const TenderDetails = ({ params }: IProps) => {
+  const { details } = use(params);
+  const { data, isLoading, isError } = useTenderDetailQuery(details);
+  const breadcrumbItems = [
+    { name: "Dashboard", href: "/" },
+    { name: "Tenders", href: "/tenders" },
+    { name: "Tender details", href: `/tenders/${details}` },
+  ];
+  const { data: flagData } = useGetFlagQuery(data?.data.country_code ?? "EU");
+  if (isLoading) return <Loading />;
+  if (isError) return <div>Error</div>;
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <ShowcaseSection className="!p-6.5">
+        <div className="flex justify-between border-b pb-4">
+          <p>{data?.data.title}</p>
+          <Status status={data?.data.status ?? "Unknown"}>
+            {data?.data.status}
+          </Status>
+        </div>
+        <div className="mt-4 flex justify-between border-b pb-4">
+          <ShowcaseSection title="Tender ID">
+            {data?.data.tender_id}
+          </ShowcaseSection>
+          <ShowcaseSection title="Buyer Organization">
+            {data?.data.buyer_organization.name}
+          </ShowcaseSection>
+          <ShowcaseSection title="Notice Publication Id">
+            {data?.data.notice_publication_id}
+          </ShowcaseSection>
+          <ShowcaseSection title="Procedure Code">
+            {data?.data.procedure_code}
+          </ShowcaseSection>
+          <ShowcaseSection title="Procurement Type Code">
+            {data?.data.procurement_type_code}
+          </ShowcaseSection>
+        </div>
+        <div className="mt-4 flex justify-between border-b pb-4">
+          <ShowcaseSection title="Application Deadline">
+            <span>{msToDate(data?.data.application_deadline ?? 0)}</span>
+          </ShowcaseSection>
+          <ShowcaseSection title="Submission Url">
+            <Link href={data?.data.submission_url ?? ""} target="_blank">
+              {data?.data.submission_url}
+            </Link>
+          </ShowcaseSection>
+          <ShowcaseSection title="Publication Deadline">
+            <span>{msToDate(data?.data.publication_date ?? 0)}</span>
+          </ShowcaseSection>
+          <ShowcaseSection title="Submission Deadline">
+            <span>{msToDate(data?.data.submission_deadline ?? 0)}</span>
+          </ShowcaseSection>
+          <ShowcaseSection title="Tender Deadline">
+            <span>{msToDate(data?.data.tender_deadline ?? 0)}</span>
+          </ShowcaseSection>
+        </div>
+        <div className="mt-4 flex justify-between border-b pb-4">
+          <div>
+            <h2 className="mb-6 text-lg font-semibold">Country</h2>
+            <div className="flex items-center gap-1">
+              <LocationIcon />
+              <p className="text-sm uppercase">{data?.data.country_code}</p>
+              <div
+                dangerouslySetInnerHTML={{ __html: flagData }}
+                className="flex w-7 items-center justify-center overflow-hidden rounded-md border p-0"
+              />
+            </div>
+          </div>
+          {data?.data.currency && (
+            <div>
+              <h2 className="mb-6 text-lg font-semibold">Currency</h2>
+              <div className="flex items-center gap-1">
+                <p className="text-sm uppercase">{data?.data.currency}</p>
+                <p>{getSymbolFromCurrency(data?.data.currency ?? "USD")}</p>
+              </div>
+            </div>
+          )}
+
+          <div></div>
+        </div>
+        <div className="mt-4">
+          <h2 className="mb-6 text-lg font-semibold">Description</h2>
+          <p>{data?.data.description}</p>
+        </div>
+      </ShowcaseSection>
+    </>
+  );
+};
+
+export default TenderDetails;