feat(form): add loading state and replace custom switch component

This commit introduces a loading state for form submissions and replaces the custom switch component with a third-party library for improved user experience and maintainability.

- Adds `react-switch` as a dependency to replace the custom-built switch component, providing a more robust and feature-rich solution.
- Implements a loading indicator on form submission buttons and in the confirmation modal by utilizing the `useIsMutating` hook from TanStack Query. This provides clear visual feedback to the user during asynchronous operations.
- Creates a reusable `FormFooter` component to encapsulate the submit and cancel buttons, centralizing the form submission logic and loading state.
- Refactors the company create/edit forms to use the new `FormFooter` and `react-switch` components.
- Moves the `BreadcrumbItem` type to a shared types file for better code organization.

src/app/companies/categories/create/page.tsx

@@ -0,0 +1,21 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CreateCompanyCategoryForm from "@/components/forms/companies/company-categories/CreateCompanyCategory";
+import { BreadcrumbItem } from "@/types/shared";
+
+interface IProps {}
+
+const CreateCompanyCategoryPage = ({}: IProps) => {
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { href: "/", name: "Dashboard" },
+    { href: "/companies/categories", name: "Company Categories" },
+    { href: "/companies/categories/create", name: "Create Company Category" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CreateCompanyCategoryForm />
+    </>
+  );
+};
+
+export default CreateCompanyCategoryPage;

src/app/companies/categories/edit/[id]/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+import Loading from "@/app/loading";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CreateCompanyCategoryForm from "@/components/forms/companies/company-categories/CreateCompanyCategory";
+import { useCompanyCategoriesDetails } from "@/hooks/queries";
+import { BreadcrumbItem } from "@/types/shared";
+import { use } from "react";
+
+const EditCompanyCategory = ({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) => {
+  const { id } = use(params);
+  const { isLoading, data } = useCompanyCategoriesDetails(id);
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { name: "Dashboard", href: "/" },
+    { name: "Company Categories", href: "/companies/categories" },
+    { name: "Edit Company Category", href: `/companies/categories/edit/${id}` },
+  ];
+  if (isLoading) return <Loading />;
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CreateCompanyCategoryForm defaultValues={data?.data} editMode id={id} />
+    </>
+  );
+};
+
+export default EditCompanyCategory;

src/app/companies/categories/page.tsx

@@ -0,0 +1,17 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import CompanyCategoriesTable from "@/components/Tables/companies/company-categories";
+
+const CompanyCategoryList = () => {
+  const breadcrumbItems = [
+    { name: "Dashboard", href: "/" },
+    { name: "Company Categories", href: "/companies/categories" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <CompanyCategoriesTable />
+    </>
+  );
+};
+
+export default CompanyCategoryList;