feat(companies): Add filtering functionality to company list table

- Create CompanyListFilters component with form fields for name, email, phone, currency, and employee count
- Integrate filter modal into CompaniesTable component with open/close state management
- Update useCompanyListPresenter hook to handle filter form state and search parameters
- Replace inline create button with ListHeader component for consistent UI patterns
- Add support for URL-based query parameters to persist filter state
- Implement form reset and filter clearing functionality
- Add isMutating state tracking for loading indicators during filter searches
- Update constants/enums to support currency filtering optionsfor

src/components/Tables/companies/index.tsx

@@ -17,9 +17,11 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { formatPhoneNumber } from "@/utils/shared";
-import Link from "next/link";
 import { Tooltip } from "react-tooltip";
 import { useCompanyListPresenter } from "./useCompanyListPresenter";
+import ListHeader from "@/components/ui/ListHeader";
+import Modal from "@/components/ui/modal";
+import CompanyListFilters from "./CompanyListFilters";
 
 const CompaniesTable = () => {
   const {
@@ -33,12 +35,21 @@ const CompaniesTable = () => {
     setCurrentCompany,
     onConfirmDelete,
     modalConfig,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   } = useCompanyListPresenter();
   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 Company</Link>
-      </button>
+      <ListHeader
+        onFilter={() => setIsFilterModalOpen(true)}
+        createButtonText="Create Company"
+      />
       <Table>
         <TableHeader>
           <TableRow>
@@ -149,6 +160,22 @@ const CompaniesTable = () => {
           )}
         </TableBody>
       </Table>
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full xl:w-1/2"
+        showButtons={false}
+      >
+        <CompanyListFilters
+          setValue={setFilterValue}
+          filterRegister={filterRegister}
+          handleFilterSubmit={handleFilterSubmit}
+          isMutating={isMutating as number}
+          search={search}
+          setIsFilterModalOpen={setIsFilterModalOpen}
+          watch={watch}
+        />
+      </Modal>
       {isModalOpen && (
         <ConfirmationModal
           isOpen={isModalOpen}