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/useCustomerListPresenter.ts

@@ -6,12 +6,16 @@ import {
   useDeleteCustomerQuery,
 } from "@/hooks/queries";
 import { TAssignCustomerToCompanyCredentials, TCustomer } from "@/lib/api";
-import { usePathname, useRouter } from "next/navigation";
-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 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>>({
-    sort: "created_at",
-  });
+  const searchParams = useSearchParams();
+  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,
   };
 };