From 77e308200017ef709f0d2ebd69d8910596598a25 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 28 May 2025 17:22:00 +0530
Subject: [PATCH] add auto suggestion field for orgnaization

---
 src/components/Directory/UpdateContact.jsx      | 17 +++++++++++------
 .../Directory/DirectoryListTableHeader.jsx      |  8 ++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx
index 6c9e75a9..3878dc47 100644
--- a/src/components/Directory/UpdateContact.jsx
+++ b/src/components/Directory/UpdateContact.jsx
@@ -14,10 +14,11 @@ import useMaster, {
 } from "../../hooks/masterHook/useMaster";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import { useBuckets } from "../../hooks/useDirectory";
+import { useBuckets, useOrganization } from "../../hooks/useDirectory";
 import { useProjects } from "../../hooks/useProjects";
 import SelectMultiple from "../common/SelectMultiple";
 import { ContactSchema } from "./DirectorySchema";
+import InputSuggestions from "../common/InputSuggestion";
 
 const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
   const selectedMaster = useSelector(
@@ -34,6 +35,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
   const [ IsSubmitting, setSubmitting ] = useState( false );
   const [isInitialized, setIsInitialized] = useState(false);
   const dispatch = useDispatch();
+  const {organizationList} = useOrganization()
 
   const methods = useForm({
     resolver: zodResolver(ContactSchema),
@@ -137,7 +139,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
     setSubmitting(false);
     
   };
-
+ const orgValue = watch("organization")
   const handleClosed = () => {
     onCLosed();
   };
@@ -193,12 +195,15 @@ await submitContact({ ...cleaned, id: existingContact.id });
             )}
           </div>
 
+         
           <div className="col-md-6  text-start">
             <label className="form-label">Organization</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("organization")}
-            />
+            <InputSuggestions
+          organizationList={organizationList}
+          value={getValues("organization") || ""}
+          onChange={(val) => setValue("organization", val)}
+          error={errors.organization?.message}
+        />
             {errors.organization && (
               <small className="danger-text">
                 {errors.organization.message}
diff --git a/src/pages/Directory/DirectoryListTableHeader.jsx b/src/pages/Directory/DirectoryListTableHeader.jsx
index a8bc719d..fd372b3d 100644
--- a/src/pages/Directory/DirectoryListTableHeader.jsx
+++ b/src/pages/Directory/DirectoryListTableHeader.jsx
@@ -24,11 +24,11 @@ const DirectoryListTableHeader = ( {children, IsActive} ) =>
                 <span>Phone</span>
               </div>
             </th>
-            <th className="mx-2">
-              <div className="d-flex align-items-center gap-1">
+            <th colSpan={2} className="mx-2 ps-20">
+             
               
-                <span>Organization</span>
-              </div>
+                Organization
+            
             </th>
             <th className="mx-2">Category</th>
             {IsActive && <th>Action</th>}