feat(multi-select): enhance multi-select component with search and load more functionality

- Added onSearch and onLoadMore props to the MultiSelect component for improved user interaction.
- Refactored state management to handle selected items and search queries more effectively.
- Updated the CreateNotificationForm to integrate the new multi-select features for recipient selection.
- Implemented infinite scrolling logic in the useCompaniesInfiniteQuery, useCustomersInfiniteQuery, and useAdminListInfiniteQuery hooks to support dynamic data loading.
- Enhanced the useCreateNotificationFormPresenter to manage recipient search and loading states.

src/hooks/queries/useCompaniesQueries.ts

@@ -103,7 +103,11 @@ export const useCompaniesQuery = (params?: Record<string, any>) => {
   });
 };
 
-export const useCompaniesInfiniteQuery = (params?: Record<string, any>) => {
+export const useCompaniesInfiniteQuery = (
+  params?: Record<string, any>,
+  options?: { enabled?: boolean },
+) => {
+  const enabled = options?.enabled ?? true;
   const queryKey = useMemo(
     () => [API_ENDPOINTS.COMPANIES.READ_ALL, params],
     [params],
@@ -116,6 +120,7 @@ export const useCompaniesInfiniteQuery = (params?: Record<string, any>) => {
       companiesService.getCompanies({ ...params, offset: pageParam }),
 
     initialPageParam: 0,
+    enabled,
 
     getNextPageParam: (lastPage: any) => {
       const { offset, limit, total } = lastPage.meta;

src/hooks/queries/useCustomerQueries.ts

@@ -12,7 +12,11 @@ import { toast } from "react-toastify";
 import { API_ENDPOINTS } from "@/lib/api";
 import { customersService } from "@/lib/api/services/customers-service";
 
-export const useCustomersInfiniteQuery = (params?: Record<string, any>) => {
+export const useCustomersInfiniteQuery = (
+  params?: Record<string, any>,
+  options?: { enabled?: boolean },
+) => {
+  const enabled = options?.enabled ?? true;
   const queryKey = useMemo(
     () => [API_ENDPOINTS.CUSTOMERS.READ_ALL, params],
     [params],
@@ -25,6 +29,7 @@ export const useCustomersInfiniteQuery = (params?: Record<string, any>) => {
       customersService.getCustomers({ ...params, offset: pageParam }),
 
     initialPageParam: 0,
+    enabled,
 
     getNextPageParam: (lastPage) => {
       if (!lastPage.meta) return;

src/hooks/queries/useUsersQueries.ts

@@ -100,7 +100,11 @@ export const useAdminDetails = (id: string) => {
   });
 };
 
-export const useAdminListInfiniteQuery = (params?: Record<string, any>) => {
+export const useAdminListInfiniteQuery = (
+  params?: Record<string, any>,
+  options?: { enabled?: boolean },
+) => {
+  const enabled = options?.enabled ?? true;
   const queryKey = useMemo(() => [API_ENDPOINTS.USER.ADMINS, params], [params]);
 
   return useInfiniteQuery({
@@ -110,6 +114,7 @@ export const useAdminListInfiniteQuery = (params?: Record<string, any>) => {
       userService.adminsList({ ...params, offset: pageParam }),
 
     initialPageParam: 0,
+    enabled,
 
     getNextPageParam: (lastPage) => {
       if (!lastPage.meta) {