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/CompanyListFilters.tsx

@@ -0,0 +1,98 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import { Currencies } from "@/constants/enums";
+import {
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+interface CompanyListFiltersProps {
+  filterRegister: UseFormRegister<FieldValues>;
+  setIsFilterModalOpen: (isOpen: boolean) => void;
+  isMutating: number;
+  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
+  search: (data: any) => void;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<any>;
+}
+
+const CompanyListFilters = ({
+  filterRegister,
+  setIsFilterModalOpen,
+  isMutating,
+  handleFilterSubmit,
+  search,
+  watch,
+  setValue,
+}: CompanyListFiltersProps) => {
+  return (
+    <form
+      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
+      onSubmit={handleFilterSubmit(search)}
+    >
+      <InputGroup
+        {...filterRegister("name")}
+        name="name"
+        label="name"
+        placeholder="Name"
+        type="text"
+      />
+      <InputGroup
+        {...filterRegister("email")}
+        name="email"
+        label="email"
+        placeholder="Email"
+        type="email"
+      />
+      <InputGroup
+        {...filterRegister("phone")}
+        name="phone"
+        label="phone"
+        placeholder="Phone"
+        type="tel"
+      />
+      <Select
+        {...filterRegister("currency")}
+        items={Currencies}
+        label="currency"
+        name="currency"
+        placeholder="Currency"
+        clearable
+        value={watch("currency")}
+        onClear={() => setValue("currency", undefined)}
+      />
+      <InputGroup
+        {...filterRegister("employee_count")}
+        name="employee_count"
+        label="employee count"
+        placeholder="Employee Count"
+        type="number"
+      />
+
+      <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 CompanyListFilters;

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">
+      <ListHeader
-        <Link href={`${pathName}/create`}>Create Company</Link>
+        onFilter={() => setIsFilterModalOpen(true)}
-      </button>
+        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}

src/components/Tables/companies/useCompanyListPresenter.ts

@@ -4,26 +4,37 @@ import {
   useCompaniesInfiniteQuery,
   useDeleteCompanyQuery,
 } from "@/hooks/queries";
-import useDebounce from "@/hooks/useDebounce";
 import { TCompany } from "@/lib/api";
-import { usePathname, useRouter } from "next/navigation";
+import { deleteEmptyKeys } from "@/utils/shared";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useIsMutating } from "@tanstack/react-query";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
 import { useInView } from "react-intersection-observer";
-import { z } from "zod";
 
 export const useCompanyListPresenter = () => {
   const deleteModal = useRef<HTMLDialogElement | null>(null);
   const { inView } = useInView({ threshold: 0.5 });
   const [currentCompany, setCurrentCompany] = useState<TCompany | null>(null);
-  const [search, setSearch] = useState("");
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [modalConfig, setModalConfig] = useState<
     Partial<ConfirmationModalProps>
   >({});
-  const [params, setParams] = useState<Record<string, any>>({
+  const [params, setParams] = useState<Record<string, any>>({});
-    sort: "created_at",
-  });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  const isMutating = useIsMutating();
+
+  const {
+    register: filterRegister,
+    handleSubmit: handleFilterSubmit,
+    reset: filterFormReset,
+    watch,
+    setValue: setFilterValue,
+  } = useForm();
+
   const columns = [
     "row",
     "name",
@@ -31,14 +42,23 @@ export const useCompanyListPresenter = () => {
     "phone",
     "country",
     "state",
-
     "language",
     "currency",
     "employee count",
     "actions",
   ];
-  const pathName = usePathname();
+
-  const debouncedSearch = useDebounce(search, 1000);
+  useEffect(() => {
+    const newParams: Record<string, any> = {
+      sort: "created_at",
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
+
   const {
     data,
     error,
@@ -48,24 +68,23 @@ export const useCompanyListPresenter = () => {
     hasNextPage,
     isFetchingNextPage,
   } = useCompaniesInfiniteQuery(params);
+
   useEffect(() => {
     if (inView && hasNextPage && data && data.pages.length < 5) {
       fetchNextPage();
     }
   }, [inView, hasNextPage, data, fetchNextPage]);
+
   const { mutate: deleteCompany } = useDeleteCompanyQuery(() =>
     setIsModalOpen(false),
   );
-  useEffect(() => {
+
-    const result = z.string().safeParse(debouncedSearch);
+  const search = (data: any) => {
-    if (result.success) {
+    const newParams = { ...params, ...data };
-      setParams((prevParams) => ({
+    const cleanedParams = deleteEmptyKeys(newParams);
-        ...prevParams,
+    const queryString = new URLSearchParams(cleanedParams).toString();
-      }));
+    router.push(`${pathName}?${queryString}`);
-    }
+    setIsFilterModalOpen(false);
-  }, [debouncedSearch]);
-  const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value);
   };
   const onConfirmDelete = () => {
     if (currentCompany) {
@@ -75,7 +94,6 @@ export const useCompanyListPresenter = () => {
   const allCompanies = data?.pages.flatMap((page) => page.data.companies) ?? [];
   return {
     allCompanies,
-    handleFilterChange,
     onConfirmDelete,
     deleteCompany,
     isFetchingNextPage,
@@ -95,6 +113,13 @@ export const useCompanyListPresenter = () => {
     router,
     isPending,
     isError,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
     search,
+    watch,
+    setFilterValue,
+    isMutating,
   };
 };

src/constants/enums.ts

@@ -49,3 +49,15 @@ export enum CustomerType {
   COMPANY = "company",
   GOVERNMENT = "government",
 }
+export const Currencies = [
+  { label: "USD", value: "USD" },
+  { label: "EUR", value: "EUR" },
+  { label: "GBP", value: "GBP" },
+  { label: "JPY", value: "JPY" },
+  { label: "CAD", value: "CAD" },
+  { label: "AUD", value: "AUD" },
+  { label: "CHF", value: "CHF" },
+  { label: "CNY", value: "CNY" },
+  { label: "INR", value: "INR" },
+  { label: "BRL", value: "BRL" },
+];