feat(companies): implement companies page with data table

This commit introduces a new "Companies" page to the dashboard, providing a comprehensive view of company data in a sortable and paginated table.

Key changes include:
- A new page at `/companies` to display the data table.
- A new API route `/api/companies` that serves mock company data.
- A `CompaniesTable` component built with `react-table` featuring sorting, pagination, and search functionality.
- Reusable `TablePagination` and `TableActions` components to support the table.
- The `moment` library has been added as a dependency to format dates within the table.
- A new `CrossIcon` has been added for UI controls.
- The `InputGroup` component is enhanced with an `autoComplete` prop.
- A link to the new "Companies" page has been added to the sidebar navigation.

src/components/forms/admins/CreateAdmin.tsx

@@ -59,6 +59,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
             <InputGroup
               label="Username"
               placeholder="Username"
+              autoComplete="off"
               type="text"
               {...register("username", {
                 required: {
@@ -90,6 +91,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
           <div>
             <InputGroup
               label="Email"
+              autoComplete="off"
               placeholder="Email"
               type="email"
               {...register("email", {
@@ -115,6 +117,7 @@ const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
             <InputGroup
               label="Password"
               placeholder="Password"
+              autoComplete="off"
               type="password"
               {...register("password", {
                 required: {

src/components/forms/customers/CreateCustomer.tsx

@@ -7,6 +7,7 @@ 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";
 
 interface IProps {
   editMode?: boolean;
@@ -170,6 +171,38 @@ const CreateCustomer = ({ defaultValues, editMode, id }: IProps) => {
           )}
         </div>
 
+        <div className="flex flex-col gap-2">
+          <Select
+            {...register("type", {
+              required: {
+                message: FormErrorMessages.required,
+                value: true,
+              },
+            })}
+            name="type"
+            label="Type"
+            placeholder="Select Type"
+            prefixIcon={<GlobeIcon />}
+            items={[
+              {
+                label: "Individual",
+                value: "individual",
+              },
+              {
+                label: "Company",
+                value: "company",
+              },
+              {
+                label: "Government",
+                value: "government",
+              },
+            ]}
+          />
+          {errors.mobile && (
+            <p className="mt-1 text-sm text-red-500">{errors.mobile.message}</p>
+          )}
+        </div>
+
         <div className="col-span-2 flex gap-6">
           <button
             type="submit"