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/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 } =
-    useTenderListPresenter();
+  const {
+    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}