From c93a1ffe8d82c4317e60e9985da5b52d7f9483e4 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Mon, 13 Apr 2026 19:27:22 +0330
Subject: [PATCH] refactor(Select, AssignToCompanyModalContent): enhance select
 placeholder and integrate company query

- Updated the Select component to disable the placeholder option for better user experience.
- Refactored AssignToCompanyModalContent to accept a companiesQuery prop, improving data handling.
- Adjusted the useCustomerListPresenter hook to include the company query, ensuring it is only enabled when the assign company modal is open.
- Enhanced the CustomersTable component to pass the company query to the modal content.
---
 src/components/FormElements/select.tsx         |  6 +++++-
 .../customers/AssignToCompanyModalContent.tsx  | 18 ++++++++++++++----
 src/components/Tables/customers/index.tsx      |  3 +++
 .../customers/useCustomerListPresenter.ts      |  5 +++++
 src/hooks/queries/useCompaniesQueries.ts       |  4 +++-
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/FormElements/select.tsx b/src/components/FormElements/select.tsx
index d57662a..5c965e0 100644
--- a/src/components/FormElements/select.tsx
+++ b/src/components/FormElements/select.tsx
@@ -115,7 +115,11 @@ export function Select<T extends FieldValues>({
             clearable && value && "pr-20",
           )}
         >
-          {placeholder && <option value="">{placeholder}</option>}
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
 
           {items.map((item) => (
             <option key={item.value} value={item.value}>
diff --git a/src/components/Tables/customers/AssignToCompanyModalContent.tsx b/src/components/Tables/customers/AssignToCompanyModalContent.tsx
index 6467ff2..d76c434 100644
--- a/src/components/Tables/customers/AssignToCompanyModalContent.tsx
+++ b/src/components/Tables/customers/AssignToCompanyModalContent.tsx
@@ -1,25 +1,34 @@
-import { ChangeEvent, Dispatch, FC, SetStateAction, useEffect, useState } from "react";
+import {
+  ChangeEvent,
+  Dispatch,
+  FC,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 
 import { Select } from "@/components/FormElements/select";
 import { Building } from "@/components/Layouts/sidebar/icons";
-import { useCompanyFullList } from "@/hooks/queries";
-import { TAssignCustomerToCompanyCredentials } from "@/lib/api";
+import { ApiResponse, TAssignCustomerToCompanyCredentials, TCompaniesResponse } from "@/lib/api";
 import { ILabelValue } from "@/types/shared";
+import { UseQueryResult } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 
 interface IProps {
+  companiesQuery: UseQueryResult<ApiResponse<TCompaniesResponse>, Error>;
   setCompanies: Dispatch<
     SetStateAction<TAssignCustomerToCompanyCredentials | undefined>
   >;
   defaultValues?: TAssignCustomerToCompanyCredentials;
 }
 const AssignToCompanyModalContent: FC<IProps> = ({
+  companiesQuery,
   setCompanies,
   defaultValues,
 }) => {
   const [options, setOptions] = useState<ILabelValue[]>([]);
 
-  const { data, status, isSuccess } = useCompanyFullList();
+  const { data, status, isSuccess } = companiesQuery;
   const { handleSubmit, watch, setValue } =
     useForm<TAssignCustomerToCompanyCredentials>({
       mode: "onChange",
@@ -54,6 +63,7 @@ const AssignToCompanyModalContent: FC<IProps> = ({
     <form className="mt-5" onSubmit={handleSubmit(assignCompany)}>
       <Select
         name="company_ids"
+        clearable
         label="Companies"
         items={options}
         prefixIcon={<Building />}
diff --git a/src/components/Tables/customers/index.tsx b/src/components/Tables/customers/index.tsx
index d4fdbfc..59b7504 100644
--- a/src/components/Tables/customers/index.tsx
+++ b/src/components/Tables/customers/index.tsx
@@ -51,6 +51,7 @@ const CustomersTable = () => {
     setFilterValue,
     isMutating,
     setParams,
+    assignCompanyCompaniesQuery,
   } = 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">
@@ -202,6 +203,7 @@ const CustomersTable = () => {
       </Modal>
       <div className="w-1/12">
         <Modal
+        classNames="w-full xl:w-1/2"
           onConfirm={() => {
             if (!selectedCompanies || !currentCustomer) {
               toast.error("Invalid credentials");
@@ -216,6 +218,7 @@ const CustomersTable = () => {
           onClose={() => setIsAssignCompanyModalOpen(false)}
         >
           <AssignToCompanyModalContent
+            companiesQuery={assignCompanyCompaniesQuery}
             setCompanies={setSelectedCompanies}
             defaultValues={selectedCompanies}
           />
diff --git a/src/components/Tables/customers/useCustomerListPresenter.ts b/src/components/Tables/customers/useCustomerListPresenter.ts
index 811ea41..9aec49d 100644
--- a/src/components/Tables/customers/useCustomerListPresenter.ts
+++ b/src/components/Tables/customers/useCustomerListPresenter.ts
@@ -2,6 +2,7 @@
 
 import {
   useAssignCompany,
+  useCompanyFullList,
   useCustomersQuery,
   useDeleteCustomerQuery,
 } from "@/hooks/queries";
@@ -41,6 +42,9 @@ const useCustomerListPresenter = () => {
   } = useForm();
 
   const { data, isPending } = useCustomersQuery(params);
+  const assignCompanyCompaniesQuery = useCompanyFullList({
+    enabled: isAssignCompanyModalOpen,
+  });
   const { mutate: deleteCustomer } = useDeleteCustomerQuery(() =>
     setIsModalOpen(false),
   );
@@ -104,6 +108,7 @@ const useCustomerListPresenter = () => {
     setFilterValue,
     isMutating,
     setParams,
+    assignCompanyCompaniesQuery,
   };
 };
 
diff --git a/src/hooks/queries/useCompaniesQueries.ts b/src/hooks/queries/useCompaniesQueries.ts
index 22cb5bd..1d6bc2c 100644
--- a/src/hooks/queries/useCompaniesQueries.ts
+++ b/src/hooks/queries/useCompaniesQueries.ts
@@ -83,10 +83,12 @@ export const useDeleteCompanyQuery = (successCallback?: () => void) => {
     },
   });
 };
-export const useCompanyFullList = () => {
+export const useCompanyFullList = (options?: { enabled?: boolean }) => {
+  const enabled = options?.enabled ?? true;
   return useQuery({
     queryKey: ["READ ALL Companies"],
     queryFn: companiesService.getCompanies,
+    enabled,
   });
 };
 export const useCompaniesInfiniteQuery = (params?: Record<string, any>) => {