feat(company-categories): Add filtering functionality to category list table

- Create CompanyCategoryListFilters component with search and published status filters
- Integrate ListHeader component to replace inline create button
- Add filter modal with form handling and submission logic
- Implement useForm hook for filter form state management
- Add search parameter synchronization with URL query params
- Support clearing individual filter fields and resetting filters
- Add loading state indicator during filter search operations
- Maintain consistency with existing filtering patterns used in companies and tenders tables

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

@@ -0,0 +1,79 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import {
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+interface CompanyCategoryListFiltersProps {
+  filterRegister: UseFormRegister<FieldValues>;
+  setIsFilterModalOpen: (isOpen: boolean) => void;
+  isMutating: number;
+  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
+  search: (data: any) => void;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<any>;
+}
+
+const CompanyCategoryListFilters = ({
+  filterRegister,
+  setIsFilterModalOpen,
+  isMutating,
+  handleFilterSubmit,
+  search,
+  watch,
+  setValue,
+}: CompanyCategoryListFiltersProps) => {
+  return (
+    <form
+      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
+      onSubmit={handleFilterSubmit(search)}
+    >
+      <InputGroup
+        {...filterRegister("q")}
+        name="q"
+        label="search"
+        placeholder="Search"
+        type="search"
+      />
+      <Select
+        {...filterRegister("published")}
+        items={[
+          { label: "Published", value: "true" },
+          { label: "Not Published", value: "false" },
+        ]}
+        label="published"
+        name="published"
+        placeholder="Published Status"
+        clearable
+        value={watch("published")}
+        onClear={() => setValue("published", undefined)}
+      />
+
+      <div className="flex gap-4">
+        <button
+          type="submit"
+          className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+        >
+          {isMutating ? (
+            <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
+          ) : (
+            <span>Search</span>
+          )}
+        </button>
+        <button
+          type="button"
+          className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium capitalize text-white hover:bg-opacity-90"
+          onClick={() => setIsFilterModalOpen(false)}
+        >
+          Close
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default CompanyCategoryListFilters;

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

@@ -14,10 +14,12 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
-import Link from "next/link";
 import { Tooltip } from "react-tooltip";
 import { Skeleton } from "../../../ui/skeleton";
 import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
+import ListHeader from "@/components/ui/ListHeader";
+import CompanyCategoryListFilters from "./CompanyCategoryListFilters";
+import Modal from "@/components/ui/modal";
 
 const CompanyCategoriesTable = () => {
   const {
@@ -32,13 +34,22 @@ const CompanyCategoriesTable = () => {
     setCurrentCategory,
     isModalOpen,
     setIsModalOpen,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   } = 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>
+      <ListHeader
+        onFilter={() => setIsFilterModalOpen(true)}
+        createButtonText="Create Category"
+      />
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
@@ -123,6 +134,22 @@ const CompanyCategoriesTable = () => {
           </IsVisible>
         </TableBody>
       </Table>
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full xl:w-1/2"
+        showButtons={false}
+      >
+        <CompanyCategoryListFilters
+          setValue={setFilterValue}
+          filterRegister={filterRegister}
+          handleFilterSubmit={handleFilterSubmit}
+          isMutating={isMutating as number}
+          search={search}
+          setIsFilterModalOpen={setIsFilterModalOpen}
+          watch={watch}
+        />
+      </Modal>
       {isModalOpen && (
         <ConfirmationModal
           isOpen={isModalOpen}

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

@@ -6,22 +6,56 @@ import {
   useToggleCompanyCategoryPublished,
 } from "@/hooks/queries";
 import { TCompanyCategory } from "@/lib/api";
-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
+import { deleteEmptyKeys } from "@/utils/shared";
+import { useIsMutating } from "@tanstack/react-query";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 
 const useCompanyCategoriesPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [currentCategory, setCurrentCategory] = useState<TCompanyCategory>();
-  const [params, setParams] = useState<Record<string, any>>({
-    ...apiDefaultParams,
-  });
+  const [params, setParams] = useState<Record<string, any>>({});
   const router = useRouter();
   const pathName = usePathname();
+  const searchParams = useSearchParams();
+  const isMutating = useIsMutating();
+
+  const {
+    register: filterRegister,
+    handleSubmit: handleFilterSubmit,
+    reset: filterFormReset,
+    watch,
+    setValue: setFilterValue,
+  } = useForm();
+
+  useEffect(() => {
+    const newParams: Record<string, any> = {
+      ...apiDefaultParams,
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
+
   const { data, isLoading, isError } = useCompanyCategoriesQuery(params);
   const { mutate: deleteCategory } = useDeleteCompanyCategoryQuery(() =>
     setIsModalOpen(false),
   );
-  const {mutate:togglePublished,isPending:isToggling} = useToggleCompanyCategoryPublished()
+  const { mutate: togglePublished, isPending: isToggling } =
+    useToggleCompanyCategoryPublished();
+
+  const search = (data: any) => {
+    const newParams = { ...params, ...data };
+    const cleanedParams = deleteEmptyKeys(newParams);
+    const queryString = new URLSearchParams(cleanedParams).toString();
+    router.push(`${pathName}?${queryString}`);
+    setIsFilterModalOpen(false);
+  };
+
   const onConfirmDelete = () => {
     if (!currentCategory) return;
     deleteCategory(currentCategory?.id);
@@ -41,6 +75,14 @@ const useCompanyCategoriesPresenter = () => {
     isToggling,
     setCurrentCategory,
     onConfirmDelete,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   };
 };