Merge pull request 'table-filter' (#50) from table-filter into develop

Reviewed-on: https://repo.ravanertebat.com/TM/tm_panel/pulls/50
Reviewed-by: Sina Nakhostin <s.nakhostin@ravanertebat.com>

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/company-categories/CompanyCategoryListFilters.tsx

@@ -0,0 +1,79 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { Select } from "@/components/FormElements/select";
+import {
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+interface CompanyCategoryListFiltersProps {
+  filterRegister: UseFormRegister<FieldValues>;
+  setIsFilterModalOpen: (isOpen: boolean) => void;
+  isMutating: number;
+  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
+  search: (data: any) => void;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<any>;
+}
+
+const CompanyCategoryListFilters = ({
+  filterRegister,
+  setIsFilterModalOpen,
+  isMutating,
+  handleFilterSubmit,
+  search,
+  watch,
+  setValue,
+}: CompanyCategoryListFiltersProps) => {
+  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("published")}
+        items={[
+          { label: "Published", value: "true" },
+          { label: "Not Published", value: "false" },
+        ]}
+        label="published"
+        name="published"
+        placeholder="Published Status"
+        clearable
+        value={watch("published")}
+        onClear={() => setValue("published", undefined)}
+      />
+
+      <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 CompanyCategoryListFilters;

src/components/Tables/companies/company-categories/index.tsx

@@ -14,10 +14,12 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
-import Link from "next/link";
 import { Tooltip } from "react-tooltip";
 import { Skeleton } from "../../../ui/skeleton";
 import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
+import ListHeader from "@/components/ui/ListHeader";
+import CompanyCategoryListFilters from "./CompanyCategoryListFilters";
+import Modal from "@/components/ui/modal";
 
 const CompanyCategoriesTable = () => {
   const {
@@ -32,13 +34,22 @@ const CompanyCategoriesTable = () => {
     setCurrentCategory,
     isModalOpen,
     setIsModalOpen,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   } = useCompanyCategoriesPresenter();
 
   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 category</Link>
+        onFilter={() => setIsFilterModalOpen(true)}
-      </button>
+        createButtonText="Create Category"
+      />
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
@@ -123,6 +134,22 @@ const CompanyCategoriesTable = () => {
           </IsVisible>
         </TableBody>
       </Table>
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full xl:w-1/2"
+        showButtons={false}
+      >
+        <CompanyCategoryListFilters
+          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/company-categories/useCompanyCategoriesPresenter.ts

@@ -6,22 +6,56 @@ import {
   useToggleCompanyCategoryPublished,
 } from "@/hooks/queries";
 import { TCompanyCategory } from "@/lib/api";
-import { usePathname, useRouter } from "next/navigation";
+import { deleteEmptyKeys } from "@/utils/shared";
-import { useState } from "react";
+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 useCompanyCategoriesPresenter = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [currentCategory, setCurrentCategory] = useState<TCompanyCategory>();
-  const [params, setParams] = useState<Record<string, any>>({
+  const [params, setParams] = useState<Record<string, any>>({});
-    ...apiDefaultParams,
-  });
   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> = {
+      ...apiDefaultParams,
+    };
+    for (const [key, value] of searchParams.entries()) {
+      newParams[key] = value;
+    }
+    setParams(newParams);
+    filterFormReset(newParams);
+  }, [searchParams, filterFormReset]);
+
   const { data, isLoading, isError } = useCompanyCategoriesQuery(params);
   const { mutate: deleteCategory } = useDeleteCompanyCategoryQuery(() =>
     setIsModalOpen(false),
   );
-  const {mutate:togglePublished,isPending:isToggling} = useToggleCompanyCategoryPublished()
+  const { mutate: togglePublished, isPending: isToggling } =
+    useToggleCompanyCategoryPublished();
+
+  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 onConfirmDelete = () => {
     if (!currentCategory) return;
     deleteCategory(currentCategory?.id);
@@ -41,6 +75,14 @@ const useCompanyCategoriesPresenter = () => {
     isToggling,
     setCurrentCategory,
     onConfirmDelete,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   };
 };
 

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/components/Tables/customers/CustomerListFilters.tsx

@@ -0,0 +1,90 @@
+import { Select } from "@/components/FormElements/select";
+import { AdminRoles, CustomerStatus, CustomerType } from "@/constants/enums";
+import { getEnumAsArray } from "@/utils/shared";
+import {
+  FieldValues,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+interface CustomerListFiltersProps {
+  filterRegister: UseFormRegister<FieldValues>;
+  setIsFilterModalOpen: (isOpen: boolean) => void;
+  isMutating: number;
+  handleFilterSubmit: UseFormHandleSubmit<FieldValues>;
+  search: (data: any) => void;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<any>;
+}
+
+const CustomerListFilters = ({
+  filterRegister,
+  setIsFilterModalOpen,
+  isMutating,
+  handleFilterSubmit,
+  search,
+  watch,
+  setValue,
+}: CustomerListFiltersProps) => {
+  return (
+    <form
+      className="grid !min-w-full grid-cols-1 gap-4 xl:grid-cols-2"
+      onSubmit={handleFilterSubmit(search)}
+    >
+      <Select
+        {...filterRegister("status")}
+        items={getEnumAsArray(CustomerStatus)}
+        label="status"
+        name="status"
+        placeholder="Status"
+        clearable
+        value={watch("status")}
+        onClear={() => setValue("status", undefined)}
+      />
+      <Select
+        {...filterRegister("role")}
+        items={getEnumAsArray(AdminRoles)}
+        label="role"
+        name="role"
+        placeholder="Role"
+        clearable
+        value={watch("role")}
+        onClear={() => setValue("role", undefined)}
+      />
+      <Select
+        {...filterRegister("type")}
+        items={getEnumAsArray(CustomerType)}
+        label="type"
+        name="type"
+        placeholder="Type"
+        clearable
+        value={watch("type")}
+        onClear={() => setValue("type", 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 CustomerListFilters;

src/components/Tables/customers/index.tsx

@@ -1,6 +1,11 @@
 "use client";
 import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import { Building } from "@/components/Layouts/sidebar/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import ListHeader from "@/components/ui/ListHeader";
+import Modal from "@/components/ui/modal";
+import Status from "@/components/ui/Status";
 import {
   Table,
   TableBody,
@@ -9,18 +14,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { _TooltipDefaultParams } from "@/constants/tooltip";
-import Link from "next/link";
-import useCustomerListPresenter from "./useCustomerListPresenter";
-
-import { Building } from "@/components/Layouts/sidebar/icons";
-import Modal from "@/components/ui/modal";
-import Status from "@/components/ui/Status";
 import TableSkeleton from "@/components/ui/TableSkeleton";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
 import { toast } from "react-toastify";
 import { Tooltip } from "react-tooltip";
 import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
+import CustomerListFilters from "./CustomerListFilters";
+import useCustomerListPresenter from "./useCustomerListPresenter";
 
 const CustomersTable = () => {
   const {
@@ -39,12 +40,21 @@ const CustomersTable = () => {
     setCurrentCustomer,
     isAssignCompanyModalOpen,
     setIsAssignCompanyModalOpen,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   } = useCustomerListPresenter();
   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 Customer </Link>
+        onFilter={() => setIsFilterModalOpen(true)}
-      </button>
+        createButtonText="Create Customer"
+      />
       <Table>
         <TableHeader>
           <TableRow>
@@ -61,99 +71,121 @@ const CustomersTable = () => {
         </TableHeader>
         {isPending && <TableSkeleton column={columns.length} />}
         <TableBody>
-          {allCustomers.map((customer, index) => (
+          <EmptyListWrapper
-            <TableRow key={customer.id}>
+            list={allCustomers ?? []}
-              <TableCell colSpan={100}>{index + 1}</TableCell>
+            columns={columns}
-              <TableCell colSpan={100}>{customer.full_name}</TableCell>
+            emptyMessage="No Customers were found"
-              <TableCell colSpan={100}>{customer.email}</TableCell>
+          >
-              <TableCell colSpan={100}>
+            {allCustomers?.map((customer, index) => (
-                {unixToDate({ unix: customer.created_at, hasTime: true })}
+              <TableRow key={customer?.id ?? index}>
-              </TableCell>
+                <TableCell colSpan={100}>{index + 1}</TableCell>
+                <TableCell colSpan={100}>{customer?.full_name}</TableCell>
+                <TableCell colSpan={100}>{customer?.email}</TableCell>
+                <TableCell colSpan={100}>
+                  {unixToDate({ unix: customer?.created_at, hasTime: true })}
+                </TableCell>
 
-              <TableCell colSpan={100} className="uppercase">
+                <TableCell colSpan={100} className="uppercase">
-                {customer.type}
+                  {customer?.type}
-              </TableCell>
+                </TableCell>
-              <TableCell colSpan={100}>
+                <TableCell colSpan={100}>
-                <Status status={customer.status}>{customer.status}</Status>
+                  <Status status={customer?.status}>{customer?.status}</Status>
-              </TableCell>
+                </TableCell>
-              <TableCell colSpan={100}>
+                <TableCell colSpan={100}>
-                {customer.companies?.length ? (
+                  {customer?.companies?.length ? (
-                  customer.companies.map((c) => (
+                    customer?.companies.map((c) => (
-                    <span key={c.id}>{c.name}, </span>
+                      <span key={c.id}>{c.name}, </span>
-                  ))
+                    ))
-                ) : (
+                  ) : (
-                  <span>None</span>
+                    <span>None</span>
-                )}
+                  )}
-              </TableCell>
+                </TableCell>
-              <TableCell colSpan={100} className="uppercase">
+                <TableCell colSpan={100} className="uppercase">
-                {customer.role ?? "-"}
+                  {customer?.role ?? "-"}
-              </TableCell>
+                </TableCell>
-              <TableCell className="text-start xl:pr-7.5">
+                <TableCell className="text-start xl:pr-7.5">
-                <div className="flex items-center justify-start gap-x-3.5">
+                  <div className="flex items-center justify-start gap-x-3.5">
-                  <button
+                    <button
-                    data-tooltip-id="delete"
+                      data-tooltip-id="delete"
-                    data-tooltip-content="Delete"
+                      data-tooltip-content="Delete"
-                    data-tooltip-place="top"
+                      data-tooltip-place="top"
-                    className="hover:text-red-500"
+                      className="hover:text-red-500"
-                    onClick={() => {
+                      onClick={() => {
-                      setCurrentCustomer(customer);
+                        setCurrentCustomer(customer);
-                      setIsModalOpen(true);
+                        setIsModalOpen(true);
-                    }}
+                      }}
-                  >
+                    >
-                    <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
-                    <span className="sr-only">Delete Company </span>
+                      <span className="sr-only">Delete Company </span>
-                    <TrashIcon />
+                      <TrashIcon />
-                  </button>
+                    </button>
-                  <button
+                    <button
-                    data-tooltip-id="edit"
+                      data-tooltip-id="edit"
-                    data-tooltip-content="Edit"
+                      data-tooltip-content="Edit"
-                    data-tooltip-place="top"
+                      data-tooltip-place="top"
-                    className="hover:text-primary"
+                      className="hover:text-primary"
-                    onClick={() =>
+                      onClick={() =>
-                      router.push(`${pathName}/edit/${customer.id}`)
+                        router.push(`${pathName}/edit/${customer.id}`)
-                    }
+                      }
-                  >
+                    >
-                    <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
+                      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
-                    <span className="sr-only">Edit Company </span>
+                      <span className="sr-only">Edit Company </span>
-                    <PencilSquareIcon />
+                      <PencilSquareIcon />
-                  </button>
+                    </button>
-                  <button
+                    <button
-                    data-tooltip-id="assign-company"
+                      data-tooltip-id="assign-company"
-                    data-tooltip-content="Assign to company"
+                      data-tooltip-content="Assign to company"
-                    data-tooltip-place="top"
+                      data-tooltip-place="top"
-                    className="hover:text-green-dark"
+                      className="hover:text-green-dark"
-                    onClick={() => {
+                      onClick={() => {
-                      setCurrentCustomer(customer);
+                        setCurrentCustomer(customer);
-                      setIsAssignCompanyModalOpen(true);
+                        setIsAssignCompanyModalOpen(true);
-                      setSelectedCompanies({
+                        setSelectedCompanies({
-                        company_ids: [customer?.companies?.[0]?.id ?? ""],
+                          company_ids: [customer?.companies?.[0]?.id ?? ""],
-                      });
+                        });
-                    }}
+                      }}
-                  >
+                    >
-                    <Tooltip
+                      <Tooltip
-                      {..._TooltipDefaultParams({ id: "assign-company" })}
+                        {..._TooltipDefaultParams({ id: "assign-company" })}
-                    />
+                      />
-                    <span className="sr-only">Assign To Company </span>
+                      <span className="sr-only">Assign To Company </span>
-                    <Building />
+                      <Building />
-                  </button>
+                    </button>
-                  <button
+                    <button
-                    data-tooltip-id="feedback"
+                      data-tooltip-id="feedback"
-                    data-tooltip-content="Feedback"
+                      data-tooltip-content="Feedback"
-                    data-tooltip-place="top"
+                      data-tooltip-place="top"
-                    className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
+                      className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
-                    onClick={() => {
+                      onClick={() => {
-                      router.push(`${pathName}/feedback/${customer.id}`);
+                        router.push(`${pathName}/feedback/${customer.id}`);
-                    }}
+                      }}
-                  >
+                    >
-                    <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
+                      <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
-                    <ExclamationIcon />
+                      <ExclamationIcon />
-                  </button>
+                    </button>
-                </div>
+                  </div>
-              </TableCell>
+                </TableCell>
-            </TableRow>
+              </TableRow>
-          ))}
+            ))}
+          </EmptyListWrapper>
         </TableBody>
       </Table>
+      <Modal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        classNames="w-full xl:w-1/2"
+        showButtons={false}
+      >
+        <CustomerListFilters
+          setValue={setFilterValue}
+          filterRegister={filterRegister}
+          handleFilterSubmit={handleFilterSubmit}
+          isMutating={isMutating as number}
+          search={search}
+          setIsFilterModalOpen={setIsFilterModalOpen}
+          watch={watch}
+        />
+      </Modal>
       <div className="w-1/12">
         <Modal
           onConfirm={() => {

src/components/Tables/customers/useCustomerListPresenter.ts

@@ -6,12 +6,16 @@ import {
   useDeleteCustomerQuery,
 } from "@/hooks/queries";
 import { TAssignCustomerToCompanyCredentials, TCustomer } from "@/lib/api";
-import { usePathname, useRouter } from "next/navigation";
+import { deleteEmptyKeys } from "@/utils/shared";
-import { useState } from "react";
+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 useCustomerListPresenter = () => {
   const [isAssignCompanyModalOpen, setIsAssignCompanyModalOpen] =
     useState(false);
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [selectedCompanies, setSelectedCompanies] = useState<
     TAssignCustomerToCompanyCredentials | undefined
   >();
@@ -21,10 +25,30 @@ const useCustomerListPresenter = () => {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const pathName = usePathname();
-  const [params, setParams] = useState<Record<string, any>>({
+  const searchParams = useSearchParams();
-    sort: "created_at",
+  const [params, setParams] = useState<Record<string, any>>({});
-  });
   const router = useRouter();
+  const isMutating = useIsMutating();
+
+  const {
+    register: filterRegister,
+    handleSubmit: handleFilterSubmit,
+    reset: filterFormReset,
+    watch,
+    setValue: setFilterValue,
+  } = useForm();
+
+  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, isPending } = useCustomersInfiniteQuery(params);
   const { mutate: deleteCustomer } = useDeleteCustomerQuery(() =>
     setIsModalOpen(false),
@@ -35,6 +59,15 @@ const useCustomerListPresenter = () => {
       setIsAssignCompanyModalOpen(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 columns = [
     "row",
     "full name",
@@ -69,6 +102,14 @@ const useCustomerListPresenter = () => {
     router,
     isModalOpen,
     setIsModalOpen,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    filterRegister,
+    handleFilterSubmit,
+    search,
+    watch,
+    setFilterValue,
+    isMutating,
   };
 };
 

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,
   };
 };
 

src/components/ui/notification-details-card.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
 import { capitalize, unixToDate } from "@/utils/shared";
+import { sanitizeHtmlWithStyles } from "@/lib/utils";
 import { FC } from "react";
 import IsVisible from "./IsVisible";
 import Status from "./Status";
@@ -43,7 +44,12 @@ export const NotificationDetailsCard: FC<IProps> = ({ data }) => {
       <IsVisible condition={!!data.message}>
         <hr className="my-5" />
         <DetailItem title="Message">
-          <p className="text-base leading-relaxed">{data.message}</p>
+          <div 
+            className="text-base leading-relaxed"
+            dangerouslySetInnerHTML={{ 
+              __html: sanitizeHtmlWithStyles(data.message || '') 
+            }}
+          />
         </DetailItem>
       </IsVisible>
     </div>

src/constants/enums.ts

@@ -39,3 +39,25 @@ export enum AdminRoles {
   ADMIN = "admin",
   ANALYST = "analyst",
 }
+export enum CustomerStatus {
+  ACTIVE = "active",
+  INACTIVE = "inactive",
+  SUSPENDED = "suspended",
+}
+export enum CustomerType {
+  INDIVIDUAL = "individual",
+  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" },
+];

src/lib/utils.ts

@@ -1,6 +1,81 @@
-import { clsx, type ClassValue } from "clsx"
+import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge"
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export function sanitizeHtmlWithStyles(htmlString: string): string {
+  if (!htmlString) return "";
+
+  if (typeof window !== "undefined") {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+
+    const dangerousTags = [
+      "script",
+      "iframe",
+      "object",
+      "embed",
+      "form",
+      "input",
+      "button",
+    ];
+    const dangerousAttributes = [
+      "onclick",
+      "onload",
+      "onerror",
+      "onmouseover",
+      "onfocus",
+      "onblur",
+    ];
+
+    dangerousTags.forEach((tag) => {
+      const elements = tempDiv.getElementsByTagName(tag);
+      for (let i = elements.length - 1; i >= 0; i--) {
+        elements[i].remove();
+      }
+    });
+
+    const allElements = tempDiv.getElementsByTagName("*");
+    for (let i = 0; i < allElements.length; i++) {
+      const element = allElements[i];
+      dangerousAttributes.forEach((attr) => {
+        if (element.hasAttribute(attr)) {
+          element.removeAttribute(attr);
+        }
+      });
+
+      Array.from(element.attributes).forEach((attr) => {
+        if (attr.name.toLowerCase().startsWith("on")) {
+          element.removeAttribute(attr.name);
+        }
+      });
+    }
+
+    return tempDiv.innerHTML;
+  }
+
+  return htmlString
+    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+    .replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, "")
+    .replace(/<object[^>]*>[\s\S]*?<\/object>/gi, "")
+    .replace(/<embed[^>]*>/gi, "")
+    .replace(/on\w+="[^"]*"/gi, "")
+    .replace(/on\w+='[^']*'/gi, "");
+}
+
+export function stripHtmlTags(htmlString: string): string {
+  if (!htmlString) return "";
+
+  if (typeof window !== "undefined") {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+    return tempDiv.textContent || tempDiv.innerText || "";
+  }
+
+  return htmlString
+    .replace(/<[^>]*>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .trim();
 }