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/hooks/queries/useCompaniesQueries.ts

@@ -1,4 +1,8 @@
-import { API_ENDPOINTS, companiesService } from "@/lib/api";
+import {
+  API_ENDPOINTS,
+  companiesService,
+  companyCategoriesService,
+} from "@/lib/api";
 import {
   useInfiniteQuery,
   useMutation,
@@ -105,3 +109,107 @@ export const useCompaniesInfiniteQuery = (params?: Record<string, any>) => {
     },
   });
 };
+export const useCompanyCategoriesQuery = (params?: Record<string, any>) => {
+  const queryKey = useMemo(
+    () => [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL, params],
+    [params],
+  );
+  return useQuery({
+    queryKey,
+    queryFn: () => companyCategoriesService.getCategories({ ...params }),
+  });
+};
+export const useCreateCompanyCategory = (successCallback?: () => void) => {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.COMPANIES.CATEGORIES, "create"],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: companyCategoriesService.createCategory,
+    onSuccess: (response: { data: { message: string } }) => {
+      toast.success(response.data.message);
+      if (successCallback) {
+        successCallback();
+      }
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
+      });
+      router.push("/companies/categories");
+    },
+  });
+};
+export const useDeleteCompanyCategoryQuery = (successCallback?: () => void) => {
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [
+      API_ENDPOINTS.COMPANIES.CATEGORIES.DELETE,
+      "delete-company-category",
+    ],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: companyCategoriesService.deleteCategory,
+    onSuccess: (response: { data: { message: string } }) => {
+      toast.success(response.data.message);
+      if (successCallback) {
+        successCallback();
+      }
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
+      });
+    },
+  });
+};
+export const useToggleCompanyCategoryPublished = () => {
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [
+      API_ENDPOINTS.COMPANIES.CATEGORIES.TOGGLE_PUBLISHED("published"),
+      "published",
+    ],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: companyCategoriesService.togglePublished,
+    onSuccess: ({ data }: { data: { message: string } }) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
+      });
+    },
+  });
+};
+export const useCompanyCategoriesDetails = (id: string) => {
+  const queryKey = useMemo(
+    () => [API_ENDPOINTS.COMPANIES.CATEGORIES.DETAILS(id), "details"],
+    [id],
+  );
+  return useQuery({
+    queryKey,
+    queryFn: () => companyCategoriesService.getSingleCategory(id),
+  });
+};
+export const useUpdateCompanyCategories = (id: string) => {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.COMPANIES.CATEGORIES.UPDATE(id), "update"],
+    [id],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: companyCategoriesService.updateCategories,
+    onSuccess: ({ data }: { data: { message: string } }) => {
+      toast.success(data.message);
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
+      });
+      router.push("/companies/categories");
+    },
+  });
+};