add auto suggestion field for orgnaization

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}

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>}