feat(tenders): Add filtering functionality to tender list table

- Create new TenderListFilters component with title, status, and country code filter fields
- Add filter modal to TendersTable component with open/close state management
- Implement useForm hook in useTenderListPresenter for filter form handling
- Add ListHeader component with filter button to tender table
- Replace debounced search with URL search params-based filtering
- Integrate filter form submission with tender query parameters
- Add isMutating state tracking for loading indicator during filter operations
- Remove deprecated useDebounce hook and search state from presenter
- Improve filter UX with modal dialog and clear button functionality

src/components/Tables/tenders/TenderListFilters.tsx

@@ -0,0 +1,89 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import { Countries } from "@/constants/countries";
+import { TenderStatus } from "@/constants/enums";
+import { getEnumAsArray } from "@/utils/shared";
+import {
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+interface TenderListFiltersProps {
+  filterRegister: UseFormRegister<FieldValues>;
+  setIsFilterModalOpen: (isOpen: boolean) => void;
+  isMutating: number;
+  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
+  search: (data: any) => void;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<any>;
+}
+
+const TenderListFilters = ({
+  filterRegister,
+  setIsFilterModalOpen,
+  isMutating,
+  handleFilterSubmit,
+  search,
+  watch,
+  setValue,
+}: TenderListFiltersProps) => {
+  return (
+    <form
+      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
+      onSubmit={handleFilterSubmit(search)}
+    >
+      <InputGroup
+        {...filterRegister("title")}
+        name="title"
+        label="title"
+        placeholder="Title"
+        type="text"
+      />
+      <Select
+        {...filterRegister("status")}
+        items={getEnumAsArray(TenderStatus)}
+        label="status"
+        name="status"
+        placeholder="Status"
+        clearable
+        value={watch("status")}
+        onClear={() => setValue("status", undefined)}
+      />
+      <Select
+        {...filterRegister("country_code")}
+        items={Countries}
+        label="country code"
+        name="country_code"
+        placeholder="Country Code"
+        clearable
+        value={watch("country_code")}
+        onClear={() => setValue("country_code", undefined)}
+      />
+
+      <div className="flex gap-4 col-span-2">
+        <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 TenderListFilters;

src/components/Tables/tenders/index.tsx

@@ -13,17 +13,38 @@ import { Tooltip } from "react-tooltip";
 import useTenderListPresenter from "./useTenderListPresenter";
 
 import { ExclamationIcon, EyeIcon } from "@/assets/icons";
+import ListHeader from "@/components/ui/ListHeader";
+import Modal from "@/components/ui/modal";
 import Pagination from "@/components/ui/pagination";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import TenderListFilters from "./TenderListFilters";
 const TendersTable = () => {
-  const { allTenders, isPending, router, pathName, setParams, columns } =
+  const {
-    useTenderListPresenter();
+    allTenders,
+    isPending,
+    router,
+    pathName,
+    setParams,
+    columns,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
+  } = useTenderListPresenter();
 
   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">
+      <ListHeader
+        onFilter={() => setIsFilterModalOpen(true)}
+        createButtonText="Create Tender"
+      />
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
@@ -104,6 +125,22 @@ const TendersTable = () => {
           )}
         </TableBody>
       </Table>
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full xl:w-1/2"
+        showButtons={false}
+      >
+        <TenderListFilters
+          setValue={setFilterValue}
+          filterRegister={filterRegister}
+          handleFilterSubmit={handleFilterSubmit}
+          isMutating={isMutating as number}
+          search={search}
+          setIsFilterModalOpen={setIsFilterModalOpen}
+          watch={watch}
+        />
+      </Modal>
       <Pagination
         currentPage={allTenders?.meta?.page ? allTenders?.meta?.page - 1 : 0}
         totalPages={allTenders?.meta?.pages ?? 1}

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -2,37 +2,54 @@
 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 { deleteEmptyKeys } from "@/utils/shared";
+import { useIsMutating } from "@tanstack/react-query";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
-import { z } from "zod";
+import { useForm } from "react-hook-form";
 const useTenderListPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [currentTender, setCurrentTender] = useState<TCustomer | null>(null);
-  const [search, setSearch] = useState("");
   const [modalConfig, setModalConfig] = useState<
     Partial<ConfirmationModalProps>
   >({});
-  const [params, setParams] = useState<Record<string, any>>({
+  const [params, setParams] = useState<Record<string, any>>({});
-    ...apiDefaultParams,
-  });
   const router = useRouter();
-  const debouncedSearch = useDebounce(search, 1000);
   const pathName = usePathname();
-  const { data, error, isPending } = useTendersQuery(params);
+  const searchParams = useSearchParams();
+  const isMutating = useIsMutating();
+
+  const {
+    register: filterRegister,
+    handleSubmit: handleFilterSubmit,
+    reset: filterFormReset,
+    watch,
+    setValue: setFilterValue,
+  } = useForm();
 
   useEffect(() => {
-    const result = z.string().safeParse(debouncedSearch);
+    const newParams: Record<string, any> = {
-    if (result.success) {
+      ...apiDefaultParams,
-      setParams((prevParams) => ({
+      offset: 0,
-        ...prevParams,
+      limit: 10,
-      }));
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
     }
-  }, [debouncedSearch]);
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
 
-  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const { data, error, isPending } = useTendersQuery(params);
-    setSearch(e.target.value);
+
+  const search = (data: any) => {
+    const newParams = { ...params, ...data, offset: 0 };
+    const cleanedParams = deleteEmptyKeys(newParams);
+    const queryString = new URLSearchParams(cleanedParams).toString();
+    router.push(`${pathName}?${queryString}`);
+    setIsFilterModalOpen(false);
   };
   const columns = [
     "row",
@@ -46,8 +63,6 @@ const useTenderListPresenter = () => {
     currentTender,
     columns,
     setCurrentTender,
-    search,
-    handleFilterChange,
     router,
     allTenders: data,
     error,
@@ -59,6 +74,14 @@ const useTenderListPresenter = () => {
     setIsModalOpen,
     modalConfig,
     setModalConfig,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   };
 };