feat(inquiries): Add filtering functionality to inquiries list table

- Create new InquiriesListFilters component with search and status filter fields
- Integrate filter modal into inquiries table with form handling
- Add INQUIRY_STATUS enum with pending, reviewed, approved, and rejected statuses
- Implement URL-based query parameter management for filter persistence
- Add form state management using react-hook-form with watch and setValue utilities
- Connect filter search to useGetInquiries hook to fetch filtered results
- Support clearing individual filter fields and closing filter modal

src/components/Tables/inquiries/InquiriesListFilters.tsx

@@ -0,0 +1,82 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import { INQUIRY_STATUS } from "@/constants/enums";
+import {
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+interface InquiriesListFiltersProps {
+  filterRegister: UseFormRegister<FieldValues>;
+  setIsFilterModalOpen: (isOpen: boolean) => void;
+  isMutating: number;
+  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
+  search: (data: any) => void;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<any>;
+}
+
+const statusOptions = Object.values(INQUIRY_STATUS).map((status) => ({
+  label: status.charAt(0).toUpperCase() + status.slice(1),
+  value: status,
+}));
+
+const InquiriesListFilters = ({
+  filterRegister,
+  setIsFilterModalOpen,
+  isMutating,
+  handleFilterSubmit,
+  search,
+  setValue,
+  watch,
+}: InquiriesListFiltersProps) => {
+  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("status")}
+        name="status"
+        label="status"
+        placeholder="Select Status"
+        items={statusOptions}
+        clearable
+        value={watch("status")}
+        onClear={() => setValue("status", "")}
+      />
+
+      <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 InquiriesListFilters;

src/components/Tables/inquiries/index.tsx

@@ -17,6 +17,8 @@ import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { formatPhoneNumber, unixToDate } from "@/utils/shared";
 import { Tooltip } from "react-tooltip";
 import useInquiriesListPresenter from "./useInquiriesListPresenter";
+import InquiriesListFilters from "./InquiriesListFilters";
+import Modal from "@/components/ui/modal";
 
 const InquiriesTable = () => {
   const {
@@ -30,6 +32,12 @@ const InquiriesTable = () => {
     setCurrentInquiry,
     setIsDeleteModalOpen,
     deleteInquiry,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   } = useInquiriesListPresenter();
   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">
@@ -94,6 +102,22 @@ const InquiriesTable = () => {
           </EmptyListWrapper>
         </TableBody>
       </Table>
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full xl:w-1/2"
+        showButtons={false}
+      >
+        <InquiriesListFilters
+          setValue={setFilterValue}
+          filterRegister={filterRegister}
+          handleFilterSubmit={handleFilterSubmit}
+          isMutating={isMutating as number}
+          search={search}
+          setIsFilterModalOpen={setIsFilterModalOpen}
+          watch={watch}
+        />
+      </Modal>
       {isDeleteModalOpen && (
         <ConfirmationModal
           isOpen={isDeleteModalOpen}

src/components/Tables/inquiries/useInquiriesListPresenter.ts

@@ -4,12 +4,17 @@ import {
   useGetInquiries,
 } from "@/hooks/queries/useInquiryQueries";
 import { TInquiries } from "@/lib/api";
-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 useInquiriesListPresenter = () => {
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [currentInquiry, setCurrentInquiry] = useState<TInquiries | null>(null);
+  const [params, setParams] = useState<Record<string, any>>({});
   const columns = [
     "row",
     "company name",
@@ -19,12 +24,44 @@ const useInquiriesListPresenter = () => {
     "created at",
     "actions",
   ];
-  const { data, isPending } = useGetInquiries();
+  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> = {};
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
+
+  const { data, isPending } = useGetInquiries(params);
   const { mutate } = useDeleteInquiry(() => setIsDeleteModalOpen(false));
+
+  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 deleteInquiry = () => {
     if (!currentInquiry?.id) return;
     mutate(currentInquiry.id);
   };
+
   return {
     columns,
     inquiries: data?.data.inquiries,
@@ -36,6 +73,12 @@ const useInquiriesListPresenter = () => {
     currentInquiry,
     setCurrentInquiry,
     deleteInquiry,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   };
 };
 

src/constants/enums.ts

@@ -61,3 +61,9 @@ export const Currencies = [
   { label: "INR", value: "INR" },
   { label: "BRL", value: "BRL" },
 ];
+export enum INQUIRY_STATUS {
+  PENDING = "pending",
+  REVIEWED = "reviewed",
+  APPROVED = "approved",
+  REJECTED = "rejected",
+}