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.

package-lock.json

@@ -30,6 +30,7 @@
         "react-hook-form": "^7.62.0",
         "react-intersection-observer": "^9.16.0",
         "react-paginate": "^8.3.0",
+        "react-switch": "^7.1.0",
         "react-toastify": "^11.0.5",
         "tailwind-merge": "^2.6.0",
         "zod": "^4.1.5"
@@ -5364,6 +5365,19 @@
         "react": "^16 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-switch": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/react-switch/-/react-switch-7.1.0.tgz",
+      "integrity": "sha512-4xVeyImZE8QOTDw2FmhWz0iqo2psoRiS7XzdjaZBCIP8Dzo3rT0esHUjLee5WsAPSFXWWl1eVA5arp9n2C6yQA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "11.0.5",
       "resolved": "https://registry.npmmirror.com/react-toastify/-/react-toastify-11.0.5.tgz",

package.json

@@ -31,6 +31,7 @@
     "react-hook-form": "^7.62.0",
     "react-intersection-observer": "^9.16.0",
     "react-paginate": "^8.3.0",
+    "react-switch": "^7.1.0",
     "react-toastify": "^11.0.5",
     "tailwind-merge": "^2.6.0",
     "zod": "^4.1.5"

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;

src/components/Breadcrumbs/Breadcrumb.tsx

@@ -1,10 +1,6 @@
+import { BreadcrumbItem } from "@/types/shared";
 import Link from "next/link";
 
-interface BreadcrumbItem {
-  name: string;
-  href: string;
-}
-
 interface BreadcrumbProps {
   items: BreadcrumbItem[];
 }

src/components/FormElements/switch.tsx

@@ -1,12 +1,15 @@
 import { CheckIcon, XIcon } from "@/assets/icons";
 import { cn } from "@/lib/utils";
-import { useId } from "react";
+import { ChangeEvent, ToggleEvent, useId } from "react";
 
 type PropsType = {
   withIcon?: boolean;
   background?: "dark" | "light";
   backgroundSize?: "sm" | "default";
   name?: string;
+  checked?: boolean;
+  onToggle: (e: ToggleEvent<HTMLInputElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 
 export function Switch({
@@ -14,6 +17,9 @@ export function Switch({
   withIcon,
   backgroundSize,
   name,
+  checked = false,
+  onToggle,
+  onChange,
 }: PropsType) {
   const id = useId();
 
@@ -23,7 +29,15 @@ export function Switch({
       className="flex max-w-fit cursor-pointer select-none items-center"
     >
       <div className="relative">
-        <input type="checkbox" name={name} id={id} className="peer sr-only" />
+        <input
+          type="checkbox"
+          name={name}
+          onToggle={onToggle}
+          onChange={onChange}
+          id={id}
+          className="peer sr-only"
+          checked={checked}
+        />
         <div
           className={cn("h-8 w-14 rounded-full bg-gray-3 dark:bg-[#5A616B]", {
             "h-5": backgroundSize === "sm",

src/components/Layouts/sidebar/data/index.ts

@@ -1,6 +1,5 @@
-import { title } from "process";
-import * as Icons from "../icons";
 import { z } from "zod";
+import * as Icons from "../icons";
 const navSubItemSchema: z.ZodType<any> = z.lazy(() =>
   z.object({
     title: z.string(),
@@ -36,10 +35,16 @@ export const NAV_DATA: NavData = [
         items: [],
       },
       {
-        title: "Companies",
+        title: "Manage Companies",
-        url: "/companies",
         icon: Icons.Building,
-        items: [],
+        items: [
+          { Icons: Icons.Building, url: "/companies", title: "Companies" },
+          {
+            Icons: Icons.Building,
+            url: "/companies/categories",
+            title: "Company Categories",
+          },
+        ],
       },
       {
         title: "Customers",

src/components/Tables/companies/company-categories/index.tsx

@@ -0,0 +1,135 @@
+"use client";
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import { Switch } from "@/components/FormElements/switch";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import IsVisible from "@/components/ui/IsVisible";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { unixToDate } from "@/utils/shared";
+import Link from "next/link";
+import { Skeleton } from "../../../ui/skeleton";
+import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
+
+const CompanyCategoriesTable = () => {
+  const {
+    categories,
+    isLoading,
+    pathName,
+    router,
+    currentCategory,
+    isToggling,
+    togglePublished,
+    onConfirmDelete,
+    setCurrentCategory,
+    isModalOpen,
+    setIsModalOpen,
+  } = useCompanyCategoriesPresenter();
+
+  return (
+    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
+      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+        <Link href={`${pathName}/create`}>Create category</Link>
+      </button>
+      <Table>
+        <TableHeader>
+          <TableRow className="border-none uppercase [&>th]:text-start">
+            <TableHead colSpan={100}>Row</TableHead>
+            <TableHead colSpan={100}>Title</TableHead>
+            <TableHead colSpan={100}>Description</TableHead>
+            <TableHead colSpan={100}>Created at</TableHead>
+            <TableHead colSpan={100}>Published</TableHead>
+            <TableHead colSpan={100}>Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        {isLoading && <TableSkeleton column={5} />}
+        <TableBody>
+          <IsVisible condition={!categories}>
+            <TableRow>
+              <TableCell colSpan={400} className="text-center">
+                <h6>No category found</h6>
+              </TableCell>
+            </TableRow>
+          </IsVisible>
+          <IsVisible condition={!!categories}>
+            {categories?.map((category, index) => {
+              return (
+                <TableRow key={category.id}>
+                  <TableCell colSpan={100}>{index + 1}</TableCell>
+                  <TableCell colSpan={100}>{category.name}</TableCell>
+                  <TableCell colSpan={100}>{category.description}</TableCell>
+                  <TableCell colSpan={100}>
+                    {unixToDate(category.created_at)}
+                  </TableCell>
+                  <TableCell colSpan={100}>
+                    <IsVisible condition={isToggling}>
+                      <Skeleton></Skeleton>
+                    </IsVisible>
+                    <IsVisible condition={!isToggling}>
+                      <Switch
+                        withIcon
+                        onChange={(e) => {
+                          togglePublished(category.id);
+                        }}
+                        checked={category.published}
+                        onToggle={(e) => {
+                          console.log(e);
+                        }}
+                      />
+                    </IsVisible>
+                  </TableCell>
+                  <TableCell className="text-start xl:pr-7.5">
+                    <div className="flex items-center justify-start gap-x-3.5">
+                      <button
+                        className="hover:text-red-500"
+                        onClick={() => {
+                          setCurrentCategory(category);
+                          setIsModalOpen(true);
+                        }}
+                      >
+                        <span className="sr-only">Delete Admin </span>
+                        <TrashIcon />
+                      </button>
+                      <button
+                        className="hover:text-primary"
+                        onClick={() =>
+                          router.push(`${pathName}/edit/${category.id}`)
+                        }
+                      >
+                        <span className="sr-only">Edit Category</span>
+                        <PencilSquareIcon />
+                      </button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </IsVisible>
+        </TableBody>
+      </Table>
+      {isModalOpen && (
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          title={`Deleting ${currentCategory?.name}`}
+          message={`Are you sure?`}
+          variant={"default"}
+          size={"md"}
+          confirmText={"Delete"}
+          cancelText={"Cancel"}
+          onConfirm={() => {
+            onConfirmDelete();
+          }}
+          onCancel={() => setIsModalOpen(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CompanyCategoriesTable;

src/components/Tables/companies/company-categories/useCompanyCategoriesPresenter.ts

@@ -0,0 +1,47 @@
+"use client";
+import { apiDefaultParams } from "@/constants/Api_Params";
+import {
+  useCompanyCategoriesQuery,
+  useDeleteCompanyCategoryQuery,
+  useToggleCompanyCategoryPublished,
+} from "@/hooks/queries";
+import { TCompanyCategory } from "@/lib/api";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+
+const useCompanyCategoriesPresenter = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentCategory, setCurrentCategory] = useState<TCompanyCategory>();
+  const [params, setParams] = useState<Record<string, any>>({
+    ...apiDefaultParams,
+  });
+  const router = useRouter();
+  const pathName = usePathname();
+  const { data, isLoading, isError } = useCompanyCategoriesQuery(params);
+  const { mutate: deleteCategory } = useDeleteCompanyCategoryQuery(() =>
+    setIsModalOpen(false),
+  );
+  const {mutate:togglePublished,isPending:isToggling} = useToggleCompanyCategoryPublished()
+  const onConfirmDelete = () => {
+    if (!currentCategory) return;
+    deleteCategory(currentCategory?.id);
+  };
+  return {
+    categories: data?.data.categories,
+    isModalOpen,
+    setIsModalOpen,
+    isLoading,
+    isError,
+    pathName,
+    router,
+    params,
+    setParams,
+    currentCategory,
+    togglePublished,
+    isToggling,
+    setCurrentCategory,
+    onConfirmDelete,
+  };
+};
+
+export default useCompanyCategoriesPresenter;

src/components/Tables/tenders/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import useTenderListPresenter from "./useTenderListPresenter";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -10,13 +9,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import useTenderListPresenter from "./useTenderListPresenter";
 
-import { TendersSkeleton } from "./Skeleton";
-import { cn } from "@/lib/utils";
-import { getStatusColor } from "@/utils/shared";
 import { ExclamationIcon } from "@/assets/icons";
 import Pagination from "@/components/ui/pagination";
-import Page from "../../../app/forms/form-layout/page";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
 const TendersTable = () => {
   const { allTenders, isPending, router, pathName, setParams } =
@@ -27,9 +25,9 @@ const TendersTable = () => {
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
-            {/* <TableHead colSpan={100} className="text-start font-extrabold">
+            <TableHead colSpan={100} className="text-start font-extrabold">
               Row
-            </TableHead> */}
+            </TableHead>
             <TableHead colSpan={100} className="text-start font-extrabold">
               Title
             </TableHead>
@@ -49,7 +47,7 @@ const TendersTable = () => {
           </TableRow>
         </TableHeader>
 
-        {isPending && <TendersSkeleton />}
+        {isPending && <TableSkeleton column={6} />}
         <TableBody>
           {allTenders?.data.tenders?.map((item, index) =>
             !item ? (
@@ -59,9 +57,9 @@ const TendersTable = () => {
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
               >
-                {/* <TableCell className="text-start" colSpan={100}>
+                <TableCell className="text-start" colSpan={100}>
                   {index + 1}
-                </TableCell> */}
+                </TableCell>
                 <TableCell className="text-start" colSpan={100}>
                   {item.title}
                 </TableCell>

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -1,11 +1,11 @@
 "use client";
 import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
+import { apiDefaultParams } from "@/constants/Api_Params";
 import { useTendersQuery } from "@/hooks/queries";
 import useDebounce from "@/hooks/useDebounce";
 import { TCustomer } from "@/lib/api";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
-import { useInView } from "react-intersection-observer";
 import { z } from "zod";
 const useTenderListPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -15,15 +15,13 @@ const useTenderListPresenter = () => {
     Partial<ConfirmationModalProps>
   >({});
   const [params, setParams] = useState<Record<string, any>>({
-    sort: "created_at",
+    ...apiDefaultParams,
   });
   const router = useRouter();
   const debouncedSearch = useDebounce(search, 1000);
   const pathName = usePathname();
   const { data, error, isPending } = useTendersQuery(params);
 
-  const { ref, inView } = useInView({ threshold: 0.5 });
-
   useEffect(() => {
     const result = z.string().safeParse(debouncedSearch);
     if (result.success) {
@@ -36,14 +34,8 @@ const useTenderListPresenter = () => {
   const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
   };
-  // const onConfirmDelete = () => {
-  //   if (currentTender) {
-  //     deleteTender(currentTender.id);
-  //   }
-  // };
 
   return {
-    ref,
     currentTender,
     setCurrentTender,
     search,

src/components/forms/companies/CreateCompany.tsx

@@ -1,15 +1,14 @@
 "use client";
+import { GlobeIcon, MoneyIcon } from "@/assets/icons";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
+import { Select } from "@/components/FormElements/select";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import FormFooter from "@/components/ui/FormFooter";
+import { PHONE_REGEX } from "@/constants/regex";
+import { FormErrorMessages } from "@/constants/Texts";
 import { ICreateCompanyCredentials } from "@/lib/api/types/Company";
 import useCreateCompanyPresenter from "./useCreateCompanyPresenter";
-import { ShowcaseSection } from "@/components/Layouts/showcase-section";
-import { title } from "process";
-import InputGroup from "@/components/FormElements/InputGroup";
-import { FormErrorMessages } from "@/constants/Texts";
-import { Select } from "@/components/FormElements/select";
-import { CurrencyIcon, GlobeIcon, MoneyIcon } from "@/assets/icons";
-import MultiSelect from "@/components/FormElements/MultiSelect";
-import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
-import { PHONE_REGEX } from "@/constants/regex";
 
 interface IProps {
   editMode?: boolean;
@@ -18,17 +17,8 @@ interface IProps {
 }
 
 const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
-  const {
+  const { errors, handleSubmit, onSubmit, register } =
-    errors,
+    useCreateCompanyPresenter({
-    handleCancel,
-    handleSubmit,
-    isCreating,
-    isMutating,
-    isUpdating,
-    onSubmit,
-    router,
-    register,
-  } = useCreateCompanyPresenter({
       editMode,
       defaultValues,
       id,
@@ -507,12 +497,17 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
         </ShowcaseSection>
       </div>
 
-      <div className="col-span-2 flex gap-6">
+      <FormFooter />
+      {/* <div className="col-span-2 flex gap-6">
         <button
           type="submit"
-          className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
+          className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
         >
-          Submit
+          {isMutating ? (
+            <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+          ) : (
+            "Submit"
+          )}
         </button>
         <button
           type="button"
@@ -521,7 +516,7 @@ const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
         >
           Opt out
         </button>
-      </div>
+      </div> */}
     </form>
   );
 };

src/components/forms/companies/company-categories/CreateCompanyCategory.tsx

@@ -0,0 +1,78 @@
+"use client";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import FormFooter from "@/components/ui/FormFooter";
+import { FormErrorMessages } from "@/constants/Texts";
+import { TCreateCompanyCategoryCredentials } from "@/lib/api";
+import useCreateCompanyCategoryPresenter from "./useCreateCompanyCategoryPresenter";
+
+interface IProps {
+  editMode?: boolean;
+  defaultValues?: TCreateCompanyCategoryCredentials;
+  id?: string;
+}
+
+const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
+  const { errors, handleSubmit, onSubmit, register } =
+    useCreateCompanyCategoryPresenter({ defaultValues, editMode, id });
+  return (
+    <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
+      <ShowcaseSection
+        title="Create Company Category"
+        className="grid grid-cols-2 gap-5"
+      >
+        <div className="flex flex-col gap-2">
+          <InputGroup
+            label="Name"
+            {...register("name", {
+              required: {
+                value: true,
+                message: FormErrorMessages.required,
+              },
+              minLength: {
+                value: 2,
+                message: FormErrorMessages.minLength(2),
+              },
+              maxLength: {
+                value: 100,
+                message: FormErrorMessages.maxLength(100),
+              },
+            })}
+            type="text"
+            name="name"
+            placeholder="Enter Category Name"
+          />
+          {errors.name && (
+            <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
+          )}
+        </div>
+        <div className="flex flex-col gap-2">
+          <TextAreaGroup
+            label="Description"
+            {...register("description", {
+              minLength: {
+                value: 10,
+                message: FormErrorMessages.minLength(10),
+              },
+              maxLength: {
+                value: 1000,
+                message: FormErrorMessages.maxLength(1000),
+              },
+            })}
+            name="description"
+            placeholder="Enter Description"
+          />
+          {errors.description && (
+            <p className="mt-1 text-sm text-red-500">
+              {errors.description.message}
+            </p>
+          )}
+        </div>
+        <FormFooter />
+      </ShowcaseSection>
+    </form>
+  );
+};
+
+export default CreateCompanyCategoryForm;

src/components/forms/companies/company-categories/useCreateCompanyCategoryPresenter.ts

@@ -0,0 +1,48 @@
+"use client";
+import {
+  useCreateCompanyCategory,
+  useUpdateCompanyCategories,
+} from "@/hooks/queries";
+import { TCreateCompanyCategoryCredentials } from "@/lib/api";
+import { useRouter } from "next/navigation";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+interface IProps {
+  editMode?: boolean;
+  defaultValues?: TCreateCompanyCategoryCredentials;
+  id?: string;
+}
+
+const useCreateCompanyCategoryPresenter = ({
+  defaultValues,
+  editMode,
+  id,
+}: IProps) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TCreateCompanyCategoryCredentials>({
+    mode: "onChange",
+    defaultValues,
+  });
+  const router = useRouter();
+  const { mutate } = useCreateCompanyCategory();
+  const { mutate: editCategory } = useUpdateCompanyCategories(id as string);
+  const onSubmit: SubmitHandler<TCreateCompanyCategoryCredentials> = (data) => {
+    if (editMode) {
+      editCategory({ id: id as string, credentials: data });
+    } else {
+      mutate(data);
+    }
+  };
+  return {
+    register,
+    onSubmit,
+    handleSubmit,
+    errors,
+    router,
+  };
+};
+
+export default useCreateCompanyCategoryPresenter;

src/components/ui/ConfirmationModal.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useIsMutating } from "@tanstack/react-query";
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { z } from "zod";
@@ -23,6 +24,7 @@ export type ConfirmationModalProps = z.infer<
 >;
 
 const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
+  const isMutating = useIsMutating();
   const validatedProps = ConfirmationModalPropsSchema.parse(props);
   const {
     isOpen,
@@ -107,7 +109,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
         <div
           className={`relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full ${currentSize} dark:bg-dark-2`}
         >
-          <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 dark:bg-dark-2">
+          <div className="bg-white px-4 pb-4 pt-5 dark:bg-dark-2 sm:p-6 sm:pb-4">
             <div className="sm:flex sm:items-start">
               <div
                 className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${currentVariant.iconBg} sm:mx-0 sm:h-10 sm:w-10`}
@@ -131,17 +133,22 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = (props) => {
             </div>
           </div>
 
-          <div className="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 dark:bg-dark-2 dark:border-t dark:border-stroke-dark">
+          <div className="bg-gray px-4 py-3 dark:border-t dark:border-stroke-dark dark:bg-dark-2 sm:flex sm:flex-row-reverse sm:px-6">
             <button
               type="button"
               className={`inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto ${currentVariant.confirmBtn} dark:ring-offset-dark-2`}
+              disabled={isMutating > 0}
               onClick={onConfirm}
             >
-              {confirmText}
+              {isMutating ? (
+                <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+              ) : (
+                confirmText
+              )}
             </button>
             <button
               type="button"
-              className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-dark shadow-sm ring-1 ring-inset ring-stroke hover:bg-gray focus:outline-none focus:ring-2 focus:ring-dark-5 focus:ring-offset-2 sm:mt-0 sm:w-auto dark:bg-dark-3 dark:text-white dark:ring-stroke-dark dark:hover:bg-dark-4 dark:focus:ring-offset-dark-2"
+              className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-dark shadow-sm ring-1 ring-inset ring-stroke hover:bg-gray focus:outline-none focus:ring-2 focus:ring-dark-5 focus:ring-offset-2 dark:bg-dark-3 dark:text-white dark:ring-stroke-dark dark:hover:bg-dark-4 dark:focus:ring-offset-dark-2 sm:mt-0 sm:w-auto"
               onClick={onCancel}
             >
               {cancelText}

src/components/ui/FormFooter.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { useIsMutating } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+interface IProps {}
+
+const FormFooter = ({}: IProps) => {
+  const isMutating = useIsMutating();
+  const router = useRouter();
+  return (
+    <div className="col-span-2 flex gap-6">
+      <button
+        type="submit"
+        className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
+      >
+        {isMutating ? (
+          <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+        ) : (
+          "Submit"
+        )}
+      </button>
+      <button
+        type="button"
+        onClick={router.back}
+        className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
+      >
+        Opt out
+      </button>
+    </div>
+  );
+};
+
+export default FormFooter;

src/components/ui/Status.tsx

@@ -30,7 +30,9 @@ const Status = ({ status, children }: IProps) => {
 
   return (
     <span
-      className={cn("rounded-2xl px-3 py-1.5 text-sm font-medium capitalize", {
+      className={cn(
+        "flex items-center justify-center rounded-2xl px-3 py-1.5 text-center text-sm font-medium capitalize",
+        {
           "bg-green text-white": greens.includes(status),
           "bg-orange-light text-white": oranges.includes(status),
           "bg-error text-white": reds.includes(status),
@@ -41,7 +43,8 @@ const Status = ({ status, children }: IProps) => {
           "bg-blue-light-5 text-blue-dark": status === "info",
           "bg-error-light-6 text-error-dark": status === "urgent",
           "bg-primary text-white": status === "featured",
-      })}
+        },
+      )}
     >
       {children}
     </span>

src/components/ui/TableSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from "./skeleton";
+import { TableBody, TableCell, TableRow } from "./table";
+
+interface IProps {
+  length?: number;
+  column: number;
+}
+
+const TableSkeleton = ({ column, length = 20 }: IProps) => {
+  return (
+    <TableBody>
+      {Array.from({ length }).map((_, i) => (
+        <TableRow key={i}>
+          {Array.from({ length: column }).map((_, j) => (
+            <TableCell key={j} colSpan={100}>
+              <Skeleton className="h-8" />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </TableBody>
+  );
+};
+
+export default TableSkeleton;

src/constants/Api_Params.ts

@@ -0,0 +1,5 @@
+export const apiDefaultParams = {
+  sort: "created_at",
+  offset: 0,
+  limit: 20,
+};

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");
+    },
+  });
+};

src/lib/api/endpoints.ts

@@ -19,6 +19,14 @@ export const API_ENDPOINTS = {
     UPDATE: (id: string) => `companies/${id}`,
     DELETE: (id: string) => `companies/${id}`,
     DETAILS: (id: string) => `companies/${id}`,
+    CATEGORIES: {
+      READ_ALL: "company-categories",
+      CREATE: "company-categories",
+      UPDATE: (id: string) => `company-categories/${id}`,
+      DELETE: (id: string) => `company-categories/${id}`,
+      DETAILS: (id: string) => `company-categories/${id}`,
+      TOGGLE_PUBLISHED:(id:string) => `company-categories/${id}/publish`,
+    },
   },
   TENDERS: {
     READ_ALL: "tenders",

src/lib/api/services/companies-service.ts

@@ -4,6 +4,8 @@ import {
   ApiResponse,
   CompaniesListResponseSchema,
   TCompaniesResponse,
+  TCompanyCategoryApiResponse,
+  TCreateCompanyCategoryCredentials,
 } from "../types";
 
 import { ICreateCompanyCredentials } from "../types";
@@ -58,3 +60,85 @@ export const companiesService = {
     }
   },
 };
+export const companyCategoriesService = {
+  getCategories: async (
+    params?: Record<string, any>,
+  ): Promise<TCompanyCategoryApiResponse> => {
+    try {
+      const response = await api.get(
+        API_ENDPOINTS.COMPANIES.CATEGORIES.READ_ALL,
+        {
+          params,
+        },
+      );
+
+      return response.data;
+    } catch (error) {
+      console.error("ERROR Caught in company categories service: ", error);
+      throw error;
+    }
+  },
+
+  getSingleCategory: async (id: string) => {
+    try {
+      return (await api.get(API_ENDPOINTS.COMPANIES.CATEGORIES.DETAILS(id)))
+        .data;
+    } catch (error) {
+      console.error(
+        "ERROR caught in Company categories service, Get single category",
+        error,
+      );
+      throw error;
+    }
+  },
+  createCategory: async (credentials: TCreateCompanyCategoryCredentials) => {
+    try {
+      const response = await api.post(
+        API_ENDPOINTS.COMPANIES.CATEGORIES.CREATE,
+        credentials,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("ERROR Caught in company categories service: ", error);
+      throw error;
+    }
+  },
+  deleteCategory: async (id: string) => {
+    try {
+      return (await api.delete(API_ENDPOINTS.COMPANIES.CATEGORIES.DELETE(id)))
+        .data;
+    } catch (error) {
+      console.error(
+        "ERROR caught in Company Categories Services Delete:",
+        error,
+      );
+      throw error;
+    }
+  },
+  togglePublished: async (id: string) => {
+    try {
+      return (
+        await api.patch(API_ENDPOINTS.COMPANIES.CATEGORIES.TOGGLE_PUBLISHED(id))
+      ).data;
+    } catch (error) {
+      console.error(
+        "ERROR caught in Company Categories Services Toggle Published:",
+        error,
+      );
+      throw error;
+    }
+  },
+   updateCategories: async ({
+    id,
+    credentials,
+  }: {
+    id: string;
+    credentials: TCreateCompanyCategoryCredentials;
+  }) => {
+    const response = await api.put(
+      API_ENDPOINTS.COMPANIES.CATEGORIES.UPDATE(id),
+      credentials,
+    );
+    return response.data;
+  },
+};

src/lib/api/types/CompanyCategories.ts

@@ -0,0 +1,29 @@
+import { z } from "zod";
+import { createApiResponseSchema } from "./Factory";
+export const companyCategorySchema = z.object({
+  created_at: z.number(),
+  description: z.string(),
+  id: z.string(),
+  name: z.string(),
+  published: z.boolean(),
+  published_at: z.number(),
+  thumbnail: z.string(),
+  updated_at: z.number(),
+});
+export const createCompanyCategoryCredentials = z.object({
+  name: z.string(),
+  description: z.string(),
+  thumbnail: z.string().optional(),
+});
+export const companyCategoriesResponseSchema = createApiResponseSchema(
+  z.object({
+    categories: z.array(companyCategorySchema),
+  }),
+);
+export type TCompanyCategory = z.infer<typeof companyCategorySchema>;
+export type TCompanyCategoryApiResponse = z.infer<
+  typeof companyCategoriesResponseSchema
+>;
+export type TCreateCompanyCategoryCredentials = z.infer<
+  typeof createCompanyCategoryCredentials
+>;

src/lib/api/types/index.ts

@@ -1,7 +1,8 @@
-export * from "./shared";
+export * from "./CompanyCategories";
-export * from "./User";
-export * from "./Posts";
-export * from "./Factory";
-export * from "./TCompany";
 export * from "./Customers";
+export * from "./Factory";
+export * from "./Posts";
 export * from "./Profile";
+export * from "./shared";
+export * from "./TCompany";
+export * from "./User";

src/types/shared.ts

@@ -2,3 +2,7 @@ export interface ILabelValue<T = string> {
   label: string;
   value: T;
 }
+export interface BreadcrumbItem {
+  name: string;
+  href: string;
+}