aded validation for tags and rename label to bucket

src/components/Directory/ManageDirectory.jsx

@@ -17,16 +17,14 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { useBuckets, useOrganization } from "../../hooks/useDirectory";
 import { useProjects } from "../../hooks/useProjects";
 import SelectMultiple from "../common/SelectMultiple";
-import {ContactSchema} from "./DirectorySchema";
+import { ContactSchema } from "./DirectorySchema";
 import InputSuggestions from "../common/InputSuggestion";
 
-
-
 const ManageDirectory = ({ submitContact, onCLosed }) => {
   const selectedMaster = useSelector(
     (store) => store.localVariables.selectedMaster
   );
-  const [ categoryData, setCategoryData ] = useState( [] );
+  const [categoryData, setCategoryData] = useState([]);
 
   const [TagsData, setTagsData] = useState([]);
   const { data, loading } = useMaster();
@@ -34,7 +32,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   const { projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
-  const {organizationList,loading:orgLoading} = useOrganization()
+  const { organizationList, loading: orgLoading } = useOrganization();
   const { contactTags, loading: Tagloading } = useContactTags();
   const [IsSubmitting, setSubmitting] = useState(false);
   const dispatch = useDispatch();
@@ -79,15 +77,14 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     remove: removePhone,
   } = useFieldArray({ control, name: "contactPhones" });
 
-useEffect(() => {
+  useEffect(() => {
     if (emailFields.length === 0) {
       appendEmail({ label: "Work", emailAddress: "" });
     }
     if (phoneFields.length === 0) {
       appendPhone({ label: "Office", phoneNumber: "" });
     }
-}, [emailFields.length, phoneFields.length]);
+  }, [emailFields.length, phoneFields.length]);
-
 
   const handleAddEmail = async () => {
     const emails = getValues("contactEmails");
@@ -124,8 +121,7 @@ useEffect(() => {
     setValue("bucketIds", updated, { shouldValidate: true });
   };
 
-  const onSubmit = ( data ) =>
+  const onSubmit = (data) => {
-  {
     const cleaned = {
       ...data,
       contactEmails: (data.contactEmails || []).filter(
@@ -139,7 +135,7 @@ useEffect(() => {
     setSubmitting(true);
     submitContact(cleaned, reset, setSubmitting);
   };
-  const orgValue = watch("organization")
+  const orgValue = watch("organization");
 
   const handleClosed = () => {
     onCLosed();
@@ -170,11 +166,6 @@ useEffect(() => {
               onChange={(val) => setValue("organization", val)}
               error={errors.organization?.message}
             />
-            {errors.organization && (
-              <small className="danger-text">
-                {errors.organization.message}
-              </small>
-            )}
           </div>
         </div>
         <div className="row mt-1">
@@ -216,7 +207,10 @@ useEffect(() => {
                       //   onClick={handleAddEmail}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddEmail} />
+                      <i
+                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={handleAddEmail}
+                      />
                     ) : (
                       // <button
                       //   type="button"
@@ -224,8 +218,10 @@ useEffect(() => {
                       //   onClick={() => removeEmail(index)}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"  onClick={() => removeEmail(index)} />
+                      <i
-               
+                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={() => removeEmail(index)}
+                      />
                     )}
                   </div>
                   {errors.contactEmails?.[index]?.emailAddress && (
@@ -275,8 +271,10 @@ useEffect(() => {
                       //   onClick={handleAddPhone}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary" onClick={handleAddPhone} />
+                      <i
-                  
+                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={handleAddPhone}
+                      />
                     ) : (
                       // <button
                       //   type="button"
@@ -284,8 +282,10 @@ useEffect(() => {
                       //   onClick={() => removePhone(index)}
                       //   style={{ width: "24px", height: "24px" }}
                       // >
-                        <i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager" onClick={() => removePhone(index)} />
+                      <i
-                
+                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
+                        onClick={() => removePhone(index)}
+                      />
                     )}
                   </div>
                   {errors.contactPhones?.[index]?.phoneNumber && (
@@ -342,9 +342,7 @@ useEffect(() => {
               IsLoading={projectLoading}
             />
             {errors.projectIds && (
-              <small className="danger-text">
+              <small className="danger-text">{errors.projectIds.message}</small>
-                {errors.projectIds.message}
-              </small>
             )}
           </div>
         </div>
@@ -352,18 +350,14 @@ useEffect(() => {
         <div className="col-12 text-start">
           <TagInput name="tags" label="Tags" options={contactTags} />
           {errors.tags && (
-              <small className="danger-text">
+            <small className="danger-text">{errors.tags.message}</small>
-                {errors.tags.message}
-              </small>
           )}
         </div>
         <div className="row">
           <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Label</label>
+            <label className="form-label ">Select Bucket</label>
 
-            <ul
+            <ul className="d-flex flex-wrap px-1 list-unstyled  mb-0">
-              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
-            >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
                 <li
@@ -387,11 +381,12 @@ useEffect(() => {
                   </div>
                 </li>
               ))}
-            </ul>
+              {errors.bucketIds && (
-
+                <small className="danger-text mt-0">
-            {errors.BucketIds && (
+                  {errors.bucketIds.message}
-              <small className="text-danger">{errors.BucketIds.message}</small>
+                </small>
               )}
+            </ul>
           </div>
         </div>