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/forms/customers/CreateCustomer.tsx

@@ -2,12 +2,12 @@
 
 import { CreateCustomerCredentials } from "@/lib/api";
 import useCreateCustomerPresenter from "./useCreateCustomerPresenter";
-import { ShowcaseSection } from "../../Layouts/showcase-section";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { FormErrorMessages } from "@/constants/Texts";
 import { Select } from "@/components/FormElements/select";
 import MultiSelect from "@/components/FormElements/MultiSelect";
-import { GlobeIcon } from "@/assets/icons";
+import { GlobeIcon, UserIcon } from "@/assets/icons";
 
 interface IProps {
   editMode?: boolean;
@@ -35,8 +35,8 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
                 message: FormErrorMessages.maxLength(30),
               },
               pattern: {
-                value: /^[a-zA-Z0-9]+$/,
-                message: FormErrorMessages.alphaNumeric,
+                value: /^[a-zA-Z0-9](?:[a-zA-Z0-9._]*[a-zA-Z0-9])?$/,
+                message: FormErrorMessages.invalidPattern,
               },
             })}
             name="username"
@@ -61,7 +61,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
                   }))
                 : []
             }
-            placeholder="Choose your interests..."
+            placeholder="Select companies to assign"
             {...register("company_ids", {
               required: "Please select at least one interest",
             })}
@@ -87,6 +87,26 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
             <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
           )}
         </div>
+        <div className="flex flex-col">
+          <Select
+            label="Role"
+            {...register("role", {
+              required: { message: FormErrorMessages.required, value: true },
+            })}
+            name="role"
+            items={[
+              {
+                label: "Admin",
+                value: "admin",
+              },
+              {
+                label: "Analyst",
+                value: "analyst",
+              },
+            ]}
+            placeholder="Select Role"
+          />
+        </div>
         <div className="flex flex-col gap-2">
           <InputGroup
             {...register("password", {
@@ -97,6 +117,7 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
                 message: FormErrorMessages.maxLength(128),
               },
             })}
+            disabled={editMode}
             name="password"
             label="Password"
             type="password"