feat(customers): Add filtering functionality to customer list table

- Create new CustomerListFilters component with status, role, and type filter options
- Integrate filter modal into customer list table with open/close functionality
- Add filter form handling with react-hook-form for managing filter state
- Implement search functionality triggered by filter form submission
- Add EmptyListWrapper component to display message when no customers found
- Replace inline create button with reusable ListHeader component
- Add clearable select fields for better filter UX
- Update customer table to safely handle optional customer properties
- Add new CustomerStatus and CustomerType enums to support filtering options
- Improve table organization with proper imports and component structure

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/constants/enums.ts

@@ -39,3 +39,13 @@ 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",
+}