refactor(Breadcrumbs, InputGroup, Layouts, Tables): enhance styling and structure for improved responsiveness

- Adjusted Breadcrumb component styles for better spacing and font size.
- Made placeholder in InputGroup optional and refined input styles for consistency.
- Updated MainLayout and Header components for improved padding and layout.
- Enhanced table components by importing necessary elements and optimizing rendering logic.
- Refactored CompanyCategoriesTable to utilize optimistic updates for better user experience.

src/hooks/queries/useCompaniesQueries.ts

@@ -2,6 +2,7 @@ import {
   API_ENDPOINTS,
   companiesService,
   companyCategoriesService,
+  type TCompanyCategoryApiResponse,
 } from "@/lib/api";
 import {
   useInfiniteQuery,
@@ -10,7 +11,7 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { toast } from "react-toastify";
 
 export const useCreateCompany = () => {
@@ -171,6 +172,30 @@ export const useDeleteCompanyCategoryQuery = (successCallback?: () => void) => {
 };
 export const useToggleCompanyCategoryPublished = () => {
   const queryClient = useQueryClient();
+  const updateOptimisticCategories = useCallback((categoryId: string) => {
+    queryClient.setQueriesData<TCompanyCategoryApiResponse>(
+      {
+        queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
+        exact: false,
+      },
+      (previousList) => {
+        if (!previousList?.data?.categories) {
+          return previousList;
+        }
+        return {
+          ...previousList,
+          data: {
+            ...previousList.data,
+            categories: previousList.data.categories.map((category) =>
+              category.id === categoryId
+                ? { ...category, published: !category.published }
+                : category,
+            ),
+          },
+        };
+      },
+    );
+  }, [queryClient]);
   const mutationKey = useMemo(
     () => [
       API_ENDPOINTS.COMPANIES.CATEGORIES.TOGGLE_PUBLISHED("published"),
@@ -181,8 +206,17 @@ export const useToggleCompanyCategoryPublished = () => {
   return useMutation({
     mutationKey,
     mutationFn: companyCategoriesService.togglePublished,
-    onSuccess: ({ data }: { data: { message: string } }) => {
-      toast.success(data.message);
+    onSuccess: (toggleResponse, categoryId: string) => {
+      const responseBody = toggleResponse as {
+        data?: { message?: string };
+        message?: string;
+      };
+      const toastMessage =
+        responseBody.data?.message ?? responseBody.message;
+      if (toastMessage) {
+        toast.success(toastMessage);
+      }
+      updateOptimisticCategories(categoryId);
       queryClient.invalidateQueries({
         queryKey: [API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL],
       });