src/components/Directory/DirectorySchema.js

@@ -1,57 +0,0 @@
-import { z } from "zod";
-export const ContactSchema = z
-  .object({
-    name: z.string().min(1, "Name is required"),
-    organization: z.string().min(1, "Organization name is required"),
-    contactCategoryId: z.string().nullable().optional(),
-    address: z.string().optional(),
-    description: z.string().min(1, { message: "Description is required" }),
-    projectIds: z.array(z.string()).min(1, "Project is required"),
-    contactEmails: z
-      .array(
-        z.object({
-          label: z.string(),
-           emailAddress: z.string().email("Invalid email").or(z.literal("")),
-        })
-      )
-      .optional()
-      .default([]),
-
-    contactPhones: z
-      .array(
-        z.object({
-          label: z.string(),
-          phoneNumber: z
-            .string()
-            .min(6, "Invalid Number")
-            .max(10, "Invalid Number")
-            .regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
-        })
-      )
-      .optional()
-      .default([]),
-
-    tags: z
-      .array(
-        z.object({
-          id: z.string().nullable(),
-          name: z.string(),
-        })
-      )
-      .min(1, { message: "At least one tag is required" }),
-    bucketIds: z.array(z.string()).optional(),
-  })
-
-   .refine((data) => {
-  const hasValidEmail = (data.contactEmails || []).some(
-    (e) => e.emailAddress?.trim() !== ""
-  );
-  const hasValidPhone = (data.contactPhones || []).some(
-    (p) => p.phoneNumber?.trim() !== ""
-  );
-
-  return hasValidEmail || hasValidPhone;
-}, {
-  message: "At least one contact (email or phone) is required",
-  path: ["contactPhone"], 
-});

src/components/Directory/ListViewDirectory.jsx

@@ -23,7 +23,7 @@ const getPhoneIcon = (type) => {
   }
 };
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
+const ListViewDirectory = ({ contact }) => {
   return (
     <tr key={contact.id} >
       <td className="text-start" colSpan={2}>{`${contact.name}`}</td>
@@ -40,6 +40,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
         </div>
       </td>
 
+      {/* Phones */}
       <td>
         <div className="d-flex flex-column align-items-start">
           {contact.contactPhones?.map((phone, index) => (
@@ -63,11 +64,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
 
       {/* Actions */}
       <td className="align-middle text-center ">
-        <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
+        <i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
-        {
-          setSelectedContact( contact )
-          setIsOpenModal(true)
-        }}></i>
          <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
       </td>
     </tr>

src/components/Directory/ManageDirectory.jsx

@@ -7,48 +7,76 @@ import {
 } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import TagInput from "../common/TagInput";
+import { z } from "zod";
 import IconButton from "../common/IconButton";
-import useMaster, {
+import useMaster from "../../hooks/masterHook/useMaster";
-  useContactCategory,
-  useContactTags,
-} from "../../hooks/masterHook/useMaster";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import { useBuckets } from "../../hooks/useDirectory";
-import { useProjects } from "../../hooks/useProjects";
+import {useProjects} from "../../hooks/useProjects";
-import SelectMultiple from "../common/SelectMultiple";
-import {ContactSchema} from "./DirectorySchema";
 
+export const ContactSchema = z.object({
+  Name: z.string().min(1, "Name is required"),
+  organization: z.string().min(1, "Organization name is required"),
+  ContactCategoryId: z.string().optional(),
+  address: z.string().optional(),
+  description: z.string().min( 1, {message: "Description is required"} ),
+  ProjectId :z.string().optional(),
+ ContactEmails: z
+    .array(
+      z.object({
+        label: z.string(),
+        emailAddress: z.string().email("Invalid email"),
+      })
+    )
+    .optional()
+    .default([]),
+  ContactPhones: z
+    .array(
+      z.object({
+        label: z.string(),
+        phoneNumber: z.string().regex(/^\d{10}$/, "Phone must be 10 digits"),
+      })
+    )
+    .optional()
+    .default([]),
 
+  tags: z
+    .array(
+      z.object({
+        id: z.string().nullable(),
+        name: z.string(),
+      })
+    )
+    .optional(),
+  BucketIds: z.array(z.string()).optional(),
+});
 
-const ManageDirectory = ({ submitContact, onCLosed }) => {
+const ManageDirectory = ({submitContact,onCLosed}) => {
   const selectedMaster = useSelector(
     (store) => store.localVariables.selectedMaster
   );
   const [categoryData, setCategoryData] = useState([]);
   const [TagsData, setTagsData] = useState([]);
   const { data, loading } = useMaster();
-  const { buckets, loading: bucketsLoaging } = useBuckets();
+  const {buckets, loading: bucketsLoaging} = useBuckets();
-  const { projects, loading: projectLoading } = useProjects();
+  const {projects, loading: projectLoading} = useProjects();
-  const { contactCategory, loading: contactCategoryLoading } =
+  const [IsSubmitting,setSubmitting] = useState(false)
-    useContactCategory();
-  const { contactTags, loading: Tagloading } = useContactTags();
-  const [IsSubmitting, setSubmitting] = useState(false);
   const dispatch = useDispatch();
 
   const methods = useForm({
     resolver: zodResolver(ContactSchema),
     defaultValues: {
-      name: "",
+      Name: "",
       organization: "",
-      contactCategoryId: null,
+      ContactCategoryId: null,
       address: "",
       description: "",
-      projectIds: [],
+      ProjectId:null,
-      contactEmails: [],
+      ContactEmails: [],
-      contactPhones: [],
+      ContactPhones: [],
       tags: [],
-      bucketIds: [],
+      BucketIds: [],
     },
   });
 
@@ -68,98 +96,93 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     fields: emailFields,
     append: appendEmail,
     remove: removeEmail,
-  } = useFieldArray({ control, name: "contactEmails" });
+  } = useFieldArray({ control, name: "ContactEmails" });
 
   const {
     fields: phoneFields,
     append: appendPhone,
     remove: removePhone,
-  } = useFieldArray({ control, name: "contactPhones" });
+  } = useFieldArray({ control, name: "ContactPhones" });
+
+  useEffect(() => {
+    if (emailFields.length === 0) appendEmail("");
+    if (phoneFields.length === 0) appendPhone("");
+  }, [emailFields.length, phoneFields.length]);
 
-useEffect(() => {
-  if (emailFields.length === 0) {
-    appendEmail({ label: "Work", emailAddress: "" }); 
-  }
-  if (phoneFields.length === 0) {
-    appendPhone({ label: "Office", phoneNumber: "" });
-  }
-}, [emailFields.length, phoneFields.length]);
  
 
   const handleAddEmail = async () => {
-    const emails = getValues("contactEmails");
+    const emails = getValues("ContactEmails");
     const lastIndex = emails.length - 1;
-    const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
+    const valid = await trigger(`ContactEmails.${lastIndex}.emailAddress`);
     if (valid) {
       appendEmail({ label: "Work", emailAddress: "" });
     }
   };
 
   const handleAddPhone = async () => {
-    const phones = getValues("contactPhones");
+    const phones = getValues("ContactPhones");
     const lastIndex = phones.length - 1;
-    const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
+    const valid = await trigger(`ContactPhones.${lastIndex}.phoneNumber`);
     if (valid) {
       appendPhone({ label: "Office", phoneNumber: "" });
     }
   };
 
-  const watchBucketIds = watch("bucketIds");
+  useEffect(() => {
+    if (selectedMaster === "Contact Category") {
+      setCategoryData(data);
+    } else {
+      setTagsData(data);
+    }
+  }, [selectedMaster, data]);
+
+  const watchBucketIds = watch("BucketIds");
 
   const toggleBucketId = (id) => {
     const updated = watchBucketIds?.includes(id)
       ? watchBucketIds.filter((val) => val !== id)
       : [...watchBucketIds, id];
 
-    setValue("bucketIds", updated, { shouldValidate: true });
+    setValue("BucketIds", updated, { shouldValidate: true });
   };
   const handleCheckboxChange = (id) => {
     const updated = watchBucketIds.includes(id)
       ? watchBucketIds.filter((i) => i !== id)
       : [...watchBucketIds, id];
 
-    setValue("bucketIds", updated, { shouldValidate: true });
+    setValue("BucketIds", updated, { shouldValidate: true });
   };
 
+
+
+  
   const onSubmit = ( data ) =>
   {
-      const cleaned = {
+     setSubmitting(true)
-    ...data,
+     submitContact( data, reset, setSubmitting )
-    contactEmails: (data.contactEmails || []).filter(
-      (e) => e.emailAddress?.trim() !== ""
-    ),
-    contactPhones: (data.contactPhones || []).filter(
-      (p) => p.phoneNumber?.trim() !== ""
-    ),
-  };
 
-    setSubmitting(true);
-    submitContact(cleaned, reset, setSubmitting);
-  };
-
-  const handleClosed = () => {
-    onCLosed();
   };
   return (
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
-        <div className="d-flex justify-content-center align-items-center">
+        <div className="text-start d-flex align-items-center">
           <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
           <h6 className="m-0 fw-18"> Create New Contact</h6>
         </div>
         <div className="row">
-          <div className="col-md-6  text-start">
+          <div className="col-md-6">
             <label className="form-label">Name</label>
             <input
               className="form-control form-control-sm"
-              {...register("name")}
+              {...register("Name")}
             />
-            {errors.name && (
+            {errors.Name && (
-              <small className="danger-text">{errors.name.message}</small>
+              <small className="danger-text">{errors.Name.message}</small>
             )}
           </div>
 
-          <div className="col-md-6  text-start">
+          <div className="col-md-6">
             <label className="form-label">Organization</label>
             <input
               className="form-control form-control-sm"
@@ -179,29 +202,29 @@ useEffect(() => {
                 key={field.id}
                 className="row d-flex align-items-center mb-1"
               >
-                <div className="col-5  text-start">
+                <div className="col-5">
                   <label className="form-label">Label</label>
                   <select
                     className="form-select form-select-sm"
-                    {...register(`contactEmails.${index}.label`)}
+                    {...register(`ContactEmails.${index}.label`)}
                   >
                     <option value="Work">Work</option>
                     <option value="Personal">Personal</option>
                     <option value="Other">Other</option>
                   </select>
-                  {errors.contactEmails?.[index]?.label && (
+                  {errors.ContactEmails?.[index]?.label && (
                     <small className="danger-text">
-                      {errors.contactEmails[index].label.message}
+                      {errors.ContactEmails[index].label.message}
                     </small>
                   )}
                 </div>
-                <div className="col-7  text-start">
+                <div className="col-7">
                   <label className="form-label">Email</label>
                   <div className="d-flex align-items-center">
                     <input
                       type="email"
                       className="form-control form-control-sm"
-                      {...register(`contactEmails.${index}.emailAddress`)}
+                      {...register(`ContactEmails.${index}.emailAddress`)}
                       placeholder="email@example.com"
                     />
                     {index === emailFields.length - 1 ? (
@@ -224,26 +247,27 @@ useEffect(() => {
                       </button>
                     )}
                   </div>
-                  {errors.contactEmails?.[index]?.emailAddress && (
+                  {errors.ContactEmails?.[index]?.emailAddress && (
                     <small className="danger-text">
-                      {errors.contactEmails[index].emailAddress.message}
+                      {errors.ContactEmails[index].emailAddress.message}
                     </small>
                   )}
                 </div>
               </div>
             ))}
           </div>
+
           <div className="col-md-6">
             {phoneFields.map((field, index) => (
               <div
                 key={field.id}
                 className="row d-flex align-items-center mb-2"
               >
-                <div className="col-5  text-start">
+                <div className="col-5">
                   <label className="form-label">Label</label>
                   <select
                     className="form-select form-select-sm"
-                    {...register(`contactPhones.${index}.label`)}
+                    {...register(`ContactPhones.${index}.label`)}
                   >
                     <option value="Office">Office</option>
                     <option value="Personal">Personal</option>
@@ -255,13 +279,13 @@ useEffect(() => {
                     </small>
                   )}
                 </div>
-                <div className="col-7  text-start">
+                <div className="col-7">
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
                       type="text"
                       className="form-control form-control-sm"
-                      {...register(`contactPhones.${index}.phoneNumber`)}
+                      {...register(`ContactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
                     />
                     {index === phoneFields.length - 1 ? (
@@ -284,28 +308,27 @@ useEffect(() => {
                       </button>
                     )}
                   </div>
-                  {errors.contactPhones?.[index]?.phoneNumber && (
+                  {errors.ContactPhones?.[index]?.phoneNumber && (
                     <small className="danger-text">
-                      {errors.contactPhones[index].phoneNumber.message}
+                      {errors.ContactPhones[index].phoneNumber.message}
                     </small>
                   )}
                 </div>
               </div>
             ))}
           </div>
-            {errors.contactPhone?.message && (
-        <div className="danger-text">{errors.contactPhone.message}</div>
-      )}
         </div>
 
         <div className="row my-1">
-          <div className="col-md-6  text-start">
+          <div className="col-md-6">
             <label className="form-label">Category</label>
             <select
+              defaultValue=""
               className="form-select form-select-sm"
-              {...register("contactCategoryId")}
+              {...register("ContactCategoryId")}
+              onClick={() => dispatch(changeMaster("Contact Category"))}
             >
-              {contactCategoryLoading && !contactCategory ? (
+              {loading && !categoryData ? (
                 <option disabled value="">
                   Loading...
                 </option>
@@ -314,7 +337,7 @@ useEffect(() => {
                   <option disabled selected value="">
                     Select Category
                   </option>
-                  {contactCategory?.map((cate) => (
+                  {categoryData?.map((cate) => (
                     <option key={cate.id} value={cate.id}>
                       {cate.name}
                     </option>
@@ -322,52 +345,26 @@ useEffect(() => {
                 </>
               )}
             </select>
-            {errors.contactCategoryId && (
+            {errors.ContactCategoryId && (
-              <small className="danger-text">
+              <small className="danger-text">{errors.ContactCategoryId.message}</small>
-                {errors.contactCategoryId.message}
-              </small>
             )}
           </div>
-          <div className="col-12 col-md-6 text-start">
+          <div className="col-md-6">
-            <SelectMultiple
+            <TagInput name="tags" label="Tags" options={data} />
-              name="projectIds"
-              label="Select Projects"
-              options={projects}
-              labelKey="name"
-              valueKey="id"
-              IsLoading={projectLoading}
-            />
-               {errors.projectIds && (
-              <small className="danger-text">
-                {errors.projectIds.message}
-              </small>
-            )}
           </div>
         </div>
-
-        <div className="col-12 text-start">
-          <TagInput name="tags" label="Tags" options={contactTags} />
-            {errors.tags && (
-              <small className="danger-text">
-                {errors.tags.message}
-              </small>
-            )}
-        </div>
         <div className="row">
-          <div className="col-md-12 mt-1 text-start">
+          <div className="col-md-6 text-start">
-            <label className="form-label ">Select Label</label>
+            <label className="form-label mb-2">Select Label</label>
 
-            <ul
+            <div
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
+              className="row px-1"
-              style={{ maxHeight: "80px" }}
+              style={{ maxHeight: "100px", overflowY: "auto" }}
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
-                <li
+                <div className="col-6 col-sm-6 " key={item.id}>
-                  key={item.id}
+                  <div className="form-check mb-2">
-                  className="list-inline-item flex-shrink-0 me-6 mb-2"
-                >
-                  <div className="form-check ">
                     <input
                       type="checkbox"
                       className="form-check-input"
@@ -382,17 +379,47 @@ useEffect(() => {
                       {item.name}
                     </label>
                   </div>
-                </li>
+                </div>
               ))}
-            </ul>
+            </div>
 
             {errors.BucketIds && (
               <small className="text-danger">{errors.BucketIds.message}</small>
             )}
           </div>
+
+          <div className="col-12 col-md-6">
+              <label className="form-label">Category</label>
+            <select
+              defaultValue=""
+              className="form-select form-select-sm"
+              {...register("ProjectId")}
+      
+            >
+              {loading && !categoryData ? (
+                <option disabled value="">
+                  Loading...
+                </option>
+              ) : (
+                <>
+                  <option disabled selected value="">
+                    Select Project
+                  </option>
+                  {projects?.map((project) => (
+                    <option key={project.id} value={project.id}>
+                      {project.name}
+                    </option>
+                  ))}
+                </>
+              )}
+            </select>
+            {errors.category && (
+              <small className="danger-text">{errors.category.message}</small>
+            )}
+          </div>
         </div>
 
-        <div className="col-12 text-start">
+        <div className="col-12">
           <label className="form-label">Address</label>
           <textarea
             className="form-control form-control-sm"
@@ -401,7 +428,7 @@ useEffect(() => {
           />
         </div>
 
-        <div className="col-12 text-start">
+        <div className="col-12">
           <label className="form-label">Description</label>
           <textarea
             className="form-control form-control-sm"
@@ -417,11 +444,7 @@ useEffect(() => {
           <button className="btn btn-sm btn-primary" type="submit">
             {IsSubmitting ? "Please Wait..." : "Submit"}
           </button>
-          <button
+          <button className="btn btn-sm btn-secondary" type="button" onClick={onCLosed}>
-            className="btn btn-sm btn-secondary"
-            type="button"
-            onClick={handleClosed}
-          >
             Cancel
           </button>
         </div>

src/components/Directory/UpdateContact.jsx

@@ -1,455 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  useForm,
-  useFieldArray,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import TagInput from "../common/TagInput";
-import IconButton from "../common/IconButton";
-import useMaster, {
-  useContactCategory,
-  useContactTags,
-} from "../../hooks/masterHook/useMaster";
-import { useDispatch, useSelector } from "react-redux";
-import { changeMaster } from "../../slices/localVariablesSlice";
-import { useBuckets } from "../../hooks/useDirectory";
-import { useProjects } from "../../hooks/useProjects";
-import SelectMultiple from "../common/SelectMultiple";
-import { ContactSchema } from "./DirectorySchema";
-
-const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
-  const selectedMaster = useSelector(
-    (store) => store.localVariables.selectedMaster
-  );
-  const [categoryData, setCategoryData] = useState([]);
-  const [TagsData, setTagsData] = useState([]);
-  const { data, loading } = useMaster();
-  const { buckets, loading: bucketsLoaging } = useBuckets();
-  const { projects, loading: projectLoading } = useProjects();
-  const { contactCategory, loading: contactCategoryLoading } =
-    useContactCategory();
-  const { contactTags, loading: Tagloading } = useContactTags();
-  const [ IsSubmitting, setSubmitting ] = useState( false );
-  const [isInitialized, setIsInitialized] = useState(false);
-  const dispatch = useDispatch();
-
-  const methods = useForm({
-    resolver: zodResolver(ContactSchema),
-    defaultValues: {
-      name: "",
-      organization: "",
-      contactCategoryId: null,
-      address: "",
-      description: "",
-      projectIds: [],
-      contactEmails: [],
-      contactPhones: [],
-      tags: [],
-      bucketIds: [],
-    },
-  });
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    getValues,
-    trigger,
-    setValue,
-    watch,
-    reset,
-    formState: { errors },
-  } = methods;
-
-  const {
-    fields: emailFields,
-    append: appendEmail,
-    remove: removeEmail,
-  } = useFieldArray({ control, name: "contactEmails" });
-
-  const {
-    fields: phoneFields,
-    append: appendPhone,
-    remove: removePhone,
-  } = useFieldArray({ control, name: "contactPhones" });
-
-  const handleAddEmail = async () => {
-    const emails = getValues("contactEmails");
-    const lastIndex = emails.length - 1;
-    const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
-    if (valid) {
-      appendEmail({ label: "Work", emailAddress: "" });
-    }
-  };
-
-  const handleAddPhone = async () => {
-    const phones = getValues("contactPhones");
-    const lastIndex = phones.length - 1;
-    const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
-    if (valid) {
-      appendPhone({ label: "Office", phoneNumber: "" });
-    }
-  };
-
-  const watchBucketIds = watch("bucketIds");
-
-  const toggleBucketId = (id) => {
-    const updated = watchBucketIds?.includes(id)
-      ? watchBucketIds.filter((val) => val !== id)
-      : [...watchBucketIds, id];
-
-    setValue("bucketIds", updated, { shouldValidate: true });
-  };
-  const handleCheckboxChange = (id) => {
-    const updated = watchBucketIds.includes(id)
-      ? watchBucketIds.filter((i) => i !== id)
-      : [...watchBucketIds, id];
-
-    setValue("bucketIds", updated, { shouldValidate: true });
-  };
-
-  const onSubmit = async (data) => {
-    debugger;
-    const cleaned = {
-      ...data,
-      contactEmails: (data.contactEmails || []).filter(
-        (e) => e.emailAddress?.trim() !== ""
-      ),
-      contactPhones: (data.contactPhones || []).filter(
-        (p) => p.phoneNumber?.trim() !== ""
-      ),
-    };
-
-    setSubmitting(true);
-    await submitContact({ ...cleaned, id: existingContact.id });
-    setSubmitting(false);
-    
-  };
-
-  const handleClosed = () => {
-    onCLosed();
-  };
-  useEffect(() => {
-    const isValidContact =
-      existingContact &&
-      typeof existingContact === "object" &&
-      !Array.isArray(existingContact);
-
-    if (!isInitialized &&isValidContact && TagsData) {
-      reset({
-        name: existingContact.name || "",
-        organization: existingContact.organization || "",
-        contactEmails: existingContact.contactEmails || [],
-        contactPhones: existingContact.contactPhones || [],
-        contactCategoryId: existingContact.contactCategory?.id || null,
-        address: existingContact.address || "",
-        description: existingContact.description || "",
-        projectIds: existingContact.projectIds || null,
-        tags: existingContact.tags || [],
-        bucketIds: existingContact.bucketIds || [],
-      } );
-      
-      if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
-      appendPhone({ label: "Office", phoneNumber: "" });
-    }
-
-    if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
-      appendEmail({ label: "Work", emailAddress: "" });
-      }
-      setIsInitialized(true)
-    }
-    
-    return()=> reset()
-  }, [ existingContact, buckets, projects ] );
-  
-
-  return (
-    <FormProvider {...methods}>
-      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
-        <div className="d-flex justify-content-center align-items-center">
-          <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
-          <h6 className="m-0 fw-18"> Update Contact</h6>
-        </div>
-        <div className="row">
-          <div className="col-md-6  text-start">
-            <label className="form-label">Name</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("name")}
-            />
-            {errors.name && (
-              <small className="danger-text">{errors.name.message}</small>
-            )}
-          </div>
-
-          <div className="col-md-6  text-start">
-            <label className="form-label">Organization</label>
-            <input
-              className="form-control form-control-sm"
-              {...register("organization")}
-            />
-            {errors.organization && (
-              <small className="danger-text">
-                {errors.organization.message}
-              </small>
-            )}
-          </div>
-        </div>
-        <div className="row mt-1">
-          <div className="col-md-6">
-            {emailFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-1"
-              >
-                <div className="col-5  text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactEmails.${index}.label`)}
-                  >
-                    <option value="Work">Work</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Other">Other</option>
-                  </select>
-                  {errors.contactEmails?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.contactEmails[index].label.message}
-                    </small>
-                  )}
-                </div>
-                <div className="col-7  text-start">
-                  <label className="form-label">Email</label>
-                  <div className="d-flex align-items-center">
-                    <input
-                      type="email"
-                      className="form-control form-control-sm"
-                      {...register(`contactEmails.${index}.emailAddress`)}
-                      placeholder="email@example.com"
-                    />
-                    {index === emailFields.length - 1 ? (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-primary ms-1"
-                        onClick={handleAddEmail}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-plus bx-xs" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-danger ms-1 p-0"
-                        onClick={() => removeEmail(index)}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-x bx-xs" />
-                      </button>
-                    )}
-                  </div>
-                  {errors.contactEmails?.[index]?.emailAddress && (
-                    <small className="danger-text">
-                      {errors.contactEmails[index].emailAddress.message}
-                    </small>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="col-md-6">
-            {phoneFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-2"
-              >
-                <div className="col-5  text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactPhones.${index}.label`)}
-                  >
-                    <option value="Office">Office</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Business">Business</option>
-                  </select>
-                  {errors.phone?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.ContactPhones[index].label.message}
-                    </small>
-                  )}
-                </div>
-                <div className="col-7  text-start">
-                  <label className="form-label">Phone</label>
-                  <div className="d-flex align-items-center">
-                    <input
-                      type="text"
-                      className="form-control form-control-sm"
-                      {...register(`contactPhones.${index}.phoneNumber`)}
-                      placeholder="9876543210"
-                    />
-                    {index === phoneFields.length - 1 ? (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-primary ms-1"
-                        onClick={handleAddPhone}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-plus bx-xs" />
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        className="btn btn-xs btn-danger ms-1"
-                        onClick={() => removePhone(index)}
-                        style={{ width: "24px", height: "24px" }}
-                      >
-                        <i className="bx bx-x bx-xs" />
-                      </button>
-                    )}
-                  </div>
-                  {errors.contactPhones?.[index]?.phoneNumber && (
-                    <small className="danger-text">
-                      {errors.contactPhones[index].phoneNumber.message}
-                    </small>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-          {errors.contactPhone?.message && (
-            <div className="danger-text">{errors.contactPhone.message}</div>
-          )}
-        </div>
-
-        <div className="row my-1">
-          <div className="col-md-6  text-start">
-            <label className="form-label">Category</label>
-            <select
-              className="form-select form-select-sm"
-              {...register("contactCategoryId")}
-            >
-              {contactCategoryLoading && !contactCategory ? (
-                <option disabled value="">
-                  Loading...
-                </option>
-              ) : (
-                <>
-                  <option disabled selected value="">
-                    Select Category
-                  </option>
-                  {contactCategory?.map((cate) => (
-                    <option key={cate.id} value={cate.id}>
-                      {cate.name}
-                    </option>
-                  ))}
-                </>
-              )}
-            </select>
-            {errors.contactCategoryId && (
-              <small className="danger-text">
-                {errors.contactCategoryId.message}
-              </small>
-            )}
-          </div>
-          <div className="col-12 col-md-6 text-start">
-            <SelectMultiple
-              name="projectIds"
-              label="Select Projects"
-              options={projects}
-              labelKey="name"
-              valueKey="id"
-              IsLoading={projectLoading}
-            />
-            {errors.projectIds && (
-              <small className="danger-text">{errors.projectIds.message}</small>
-            )}
-          </div>
-        </div>
-
-        <div className="col-12 text-start">
-          <TagInput name="tags" label="Tags" options={contactTags} />
-          {errors.tags && (
-            <small className="danger-text">{errors.tags.message}</small>
-          )}
-        </div>
-        <div className="row">
-          <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Label</label>
-
-            <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
-            >
-              {bucketsLoaging && <p>Loading...</p>}
-              {buckets?.map((item) => (
-                <li
-                  key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-2"
-                >
-                  <div className="form-check ">
-                    <input
-                      type="checkbox"
-                      className="form-check-input"
-                      id={`item-${item.id}`}
-                      checked={watchBucketIds.includes(item.id)}
-                      onChange={() => handleCheckboxChange(item.id)}
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
-                      {item.name}
-                    </label>
-                  </div>
-                </li>
-              ))}
-            </ul>
-
-            {errors.BucketIds && (
-              <small className="text-danger">{errors.BucketIds.message}</small>
-            )}
-          </div>
-        </div>
-
-        <div className="col-12 text-start">
-          <label className="form-label">Address</label>
-          <textarea
-            className="form-control form-control-sm"
-            rows="2"
-            {...register("address")}
-          />
-        </div>
-
-        <div className="col-12 text-start">
-          <label className="form-label">Description</label>
-          <textarea
-            className="form-control form-control-sm"
-            rows="2"
-            {...register("description")}
-          />
-          {errors.description && (
-            <small className="danger-text">{errors.description.message}</small>
-          )}
-        </div>
-
-        <div className="d-flex justify-content-center gap-1 py-2">
-          <button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
-            {IsSubmitting ? "Please Wait..." : "Update"}
-          </button>
-          <button
-            className="btn btn-sm btn-secondary"
-            type="button"
-            onClick={handleClosed}
-            disabled={IsSubmitting}
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-    </FormProvider>
-  );
-};
-
-export default UpdateContact;

src/components/common/MultiSelectDropdown.css

@@ -1,158 +0,0 @@
-/* Container for the multi-select dropdown */
-.multi-select-dropdown-container {
-  position: relative;
-}
-
-
-
-/* Header of the dropdown */
-.multi-select-dropdown-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.multi-select-dropdown-header .placeholder-style {
-  color: #6c757d;
-  font-size: 14px;
-}
-
-.multi-select-dropdown-header .placeholder-style-selected {
-  /* color: #0d6efd; */
-
-  font-size: 12px;
-}
-
-/* Arrow icon */
-.multi-select-dropdown-arrow {
-  width: 14px;
-  height: 14px;
-  margin-left: 10px;
-}
-
-/* Dropdown options */
-.multi-select-dropdown-options {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  background-color: white;
-  max-height: 250px;
-  overflow-y: auto;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  margin-top: 5px;
-}
-
-/* Search input */
-.multi-select-dropdown-search {
-  padding: 4px;
-  border-bottom: 1px solid #f1f3f5;
-}
-
-.multi-select-dropdown-search-input {
-  width: 100%;
-  padding: 4px;
-  border: none;
-  outline: none;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-/* Select All checkbox */
-.multi-select-dropdown-select-all {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-}
-
-.multi-select-dropdown-select-all .custom-checkbox {
-  margin-right: 8px;
-}
-
-.multi-select-dropdown-select-all-label {
-  font-size: 14px;
-  color: #333;
-}
-
-/* Options in dropdown */
-.multi-select-dropdown-option {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.multi-select-dropdown-option:hover {
-  background-color: #f1f3f5;
-}
-
-.multi-select-dropdown-option.selected {
-  background-color: #dbe7ff;
-  color: #0d6efd;
-}
-
-.multi-select-dropdown-option input[type="checkbox"] {
-  margin-right: 10px;
-}
-
-/* Custom checkbox */
-.custom-checkbox {
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  background-color: white;
-  cursor: pointer;
-  position: relative;
-  margin-right: 10px;
-}
-
-.custom-checkbox:checked {
-  background-color: #0d6efd;
-  border-color: #0d6efd;
-}
-
-.custom-checkbox:checked::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
-.multi-select-dropdown-Not-found{
- text-align: center;
- padding: 1px 3px;
-}
-.multi-select-dropdown-Not-found:hover {
-  background: #e2dfdf;
- 
-
-}
-
-/* Responsive styles */
-@media (max-width: 767px) {
-  .multi-select-dropdown-container {
-    width: 100%;
-  }
-
-  .multi-select-dropdown-header {
-    font-size: 12px;
-  }
-
-  .multi-select-dropdown-options {
-    width: 100%;
-    max-height: 200px;
-  }
-}

src/components/common/SelectMultiple.jsx

@@ -1,125 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
-import './MultiSelectDropdown.css';
-
-const SelectMultiple = ({
-  name,
-  options = [],
-  label = 'Select options',
-  labelKey = 'name',
-  valueKey = 'id',
-  placeholder = 'Please select...',
-  IsLoading = false
-}) => {
-  const { setValue, watch } = useFormContext();
-  const selectedValues = watch(name) || [];
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchText, setSearchText] = useState('');
-  const dropdownRef = useRef(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const handleCheckboxChange = (value) => {
-    const updated = selectedValues.includes(value)
-      ? selectedValues.filter((v) => v !== value)
-      : [...selectedValues, value];
-
-    setValue(name, updated, { shouldValidate: true });
-  };
-
-  const filteredOptions = options.filter((item) =>
-    item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
-  );
-
-  return (
-    <div ref={dropdownRef} className="multi-select-dropdown-container">
-      <label className="form-label mb-1">{label}</label>
-
-   <div
-  className="multi-select-dropdown-header"
-  onClick={() => setIsOpen((prev) => !prev)}
->
-  <span
-    className={
-      selectedValues.length > 0
-        ? 'placeholder-style-selected'
-        : 'placeholder-style'
-    }
-  >
-    <div className="selected-badges-container">
-      {selectedValues.length > 0 ? (
-        selectedValues.map((val) => {
-          const found = options.find((opt) => opt[valueKey] === val);
-          return (
-            <span key={val} className="badge badge-selected-item mx-1">
-              {found ? found[labelKey] : ''}
-            </span>
-          );
-        })
-      ) : (
-        <span className="placeholder-text">{placeholder}</span>
-      )}
-    </div>
-  </span>
-  <i className="bx bx-chevron-down"></i>
-</div>
-
-
-      {isOpen && (
-        <div className="multi-select-dropdown-options">
-          <div className="multi-select-dropdown-search">
-            <input
-              type="text"
-              placeholder="Search..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              className="multi-select-dropdown-search-input"
-            />
-          </div>
-
-          {filteredOptions.map((item) => {
-            const labelVal = item[labelKey];
-            const valueVal = item[valueKey];
-            const isChecked = selectedValues.includes(valueVal);
-
-            return (
-              <div
-                key={valueVal}
-                className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`}
-              >
-                <input
-                  type="checkbox"
-                  className="custom-checkbox form-check-input"
-                  checked={isChecked}
-                  onChange={() => handleCheckboxChange(valueVal)}
-                />
-                <label className="text-secondary">{labelVal}</label>
-              </div>
-            );
-          } )}
-          {!IsLoading && filteredOptions.length === 0 && (
-            <div className='multi-select-dropdown-Not-found'>
-              <label className="text-muted">Not Found {`'${searchText}'`}</label>
-            </div>
-          )}
-          {IsLoading && filteredOptions.length === 0 && (
-             <div className='multi-select-dropdown-Not-found'>
-              <label className="text-muted">Loading...</label>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SelectMultiple;

src/components/common/TagInput.jsx

@@ -1,28 +1,30 @@
-import { useFormContext, useWatch } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { changeMaster } from "../../slices/localVariablesSlice";
 
 const TagInput = ({
   label = "Tags",
   name = "tags",
-  placeholder = "Start typing to add... like employee, manager",
+  placeholder = "Start typing to add...",
   color = "#e9ecef",
   options = [],
 }) => {
   const [tags, setTags] = useState([]);
   const [input, setInput] = useState("");
   const [suggestions, setSuggestions] = useState([]);
-  const { setValue, trigger, control } = useFormContext();
+  const { setValue, trigger } = useFormContext();
-  const watchedTags = useWatch({ control, name });
+  const dispatch = useDispatch();
 
-
+  useEffect(() => {
-useEffect(() => {
+    setValue(
-  if (
+      name,
-    Array.isArray(watchedTags) &&
+      tags.map((tag) => ({
-    JSON.stringify(tags) !== JSON.stringify(watchedTags)
+        id: tag.id ?? null,
-  ) {
+        name: tag.name,
-    setTags(watchedTags);
+      }))
-  }
+    );
-}, [JSON.stringify(watchedTags)]);
+  }, [ tags, name, setValue ] );
 
   useEffect(() => {
     if (input.trim() === "") {
@@ -30,34 +32,29 @@ useEffect(() => {
     } else {
       const filtered = options?.filter(
         (opt) =>
-          opt?.name?.toLowerCase()?.includes(input.toLowerCase()) &&
+          opt?.name?.toLowerCase()?.includes(input?.toLowerCase()) &&
-          !tags?.some((tag) => tag.name === opt.name)
+          !tags?.some((tag) => tag?.name === opt?.name)
       );
       setSuggestions(filtered);
     }
   }, [input, options, tags]);
 
-  const addTag = async (tagObj) => {
+  const addTag = async ( tagObj ) =>
-    if (!tags.some((tag) => tag.name === tagObj.name)) {
+  {
+  if (!tags.some((tag) => tag.id === tagObj.id)) {
     const cleanedTag = {
       id: tagObj.id ?? null,
       name: tagObj.name,
     };
     const newTags = [...tags, cleanedTag];
     setTags(newTags);
-      setValue(name, newTags, { shouldValidate: true });
+    setValue(name, newTags, { shouldValidate: true }); // ✅ only id + name
     await trigger(name);
     setInput("");
     setSuggestions([]);
   }
-  };
+};
 
-  const removeTag = (indexToRemove) => {
-    const newTags = tags.filter((_, i) => i !== indexToRemove);
-    setTags(newTags);
-    setValue(name, newTags, { shouldValidate: true });
-    trigger(name);
-  };
 
   const handleInputKeyDown = (e) => {
     if (e.key === "Enter" && input.trim() !== "") {
@@ -72,7 +69,7 @@ useEffect(() => {
             name: input.trim(),
             description: input.trim(),
           };
-      addTag(newTag);
+      addTag(newTag); // Call async function (not awaiting because it's UI input)
     } else if (e.key === "Backspace" && input === "") {
       setTags((prev) => prev.slice(0, -1));
     }
@@ -82,6 +79,13 @@ useEffect(() => {
     addTag(suggestion);
   };
 
+  const removeTag = (indexToRemove) => {
+    const newTags = tags.filter((_, i) => i !== indexToRemove);
+    setTags(newTags);
+    setValue(name, newTags, { shouldValidate: true });
+    trigger(name);
+  };
+
   const backgroundColor = color || "#f8f9fa";
   const iconColor = `var(--bs-${color})`;
 
@@ -116,7 +120,6 @@ useEffect(() => {
               />
             </span>
           ))}
-
           <input
             type="text"
             value={input}
@@ -129,17 +132,17 @@ useEffect(() => {
               flex: 1,
               minWidth: "120px",
             }}
+            onFocus={() => dispatch(changeMaster("Contact Tag"))}
           />
         </div>
 
         {suggestions.length > 0 && (
           <ul
-            className="list-group position-absolute mt-1 bg-white w-50 shadow-sm "
+            className="list-group position-absolute mt-1 bg-white w-50 shadow-sm"
             style={{
               zIndex: 1000,
               maxHeight: "150px",
               overflowY: "auto",
-              boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.2)",borderRadius:"3px",border:"1px solid #ddd"
             }}
           >
             {suggestions.map((sugg, i) => (
@@ -147,8 +150,7 @@ useEffect(() => {
                 key={i}
                 className="dropdown-item p-1 hoverBox"
                 onClick={() => handleSuggestionClick(sugg)}
-                style={{cursor: "pointer", fontSize: "0.875rem"}}
+                style={{ cursor: "pointer", fontSize: "0.875rem" }}
-                
               >
                 {sugg.name}
               </li>
@@ -159,4 +161,5 @@ useEffect(() => {
     </>
   );
 };
+
 export default TagInput;

src/hooks/masterHook/useMaster.js

@@ -157,67 +157,4 @@ export const useActivitiesMaster = () =>
       }, [] )
       
       return {categories,categoryLoading,categoryError}
-}
-    
-export const useContactCategory = () =>
-{
-  const [ contactCategory, setContactCategory ] = useState( [] )
-  const [ loading, setLoading ] = useState( false )
-  const [ Error, setError ] = useState()
-  
-  const fetchConatctCategory = async() =>
-  {
-    const cache_Category = getCachedData( "Contact Category" );
-    if ( !cache_Category )
-    {
-      try
-      {
-        let resp = await MasterRespository.getContactCategory();
-        setContactCategory( resp.data );
-        cacheData("Contact Category",resp.data)
-      } catch ( error )
-      {
-        setError(error)
     }
-    } else
-    {
-      setContactCategory(cache_Category)
-    }
-  }
-
-  useEffect( () =>
-  {
-    fetchConatctCategory()
-  }, [] )
-  return { contactCategory,loading,Error}
-}
-export const useContactTags = () => {
-  const [contactTags, setContactTags] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchContactTag = async () => {
-      const cache_Tags = getCachedData("Contact Tag");
-
-      if (!cache_Tags) {
-        setLoading(true);
-        try {
-          const resp = await MasterRespository.getContactTag();
-          setContactTags(resp.data);
-          cacheData("Contact Tag", resp.data);
-        } catch (err) {
-          setError(err);
-        } finally {
-          setLoading(false);
-        }
-      } else {
-        setContactTags(cache_Tags);
-      }
-    };
-
-    fetchContactTag();
-  }, []);
-
-  return { contactTags, loading, error };
-};

src/hooks/useDirectory.js

@@ -1,63 +1,77 @@
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react"
-import { DirectoryRepository } from "../repositories/DirectoryRepository";
+import {DirectoryRepository} from "../repositories/DirectoryRepository";
-import { cacheData, getCachedData } from "../slices/apiDataManager";
+import {cacheData, getCachedData} from "../slices/apiDataManager";
 
-export const useDirectory = () => {
+export const useDirectory = () =>
-  const [contacts, setContacts] = useState([]);
+{
-  const [loading, setLoading] = useState(false);
+    const [ contacts, setContacts ] = useState( [] )
-  const [error, setError] = useState();
+    const [ loading, setLoading ] = useState( false )
+    const [ error, setError ] = useState();
 
-  const fetch = async () => {
+
-    const cache_contacts = getCachedData("contacts");
+
-    if (!cache_contacts) {
+    const fetch = async() =>
-      setLoading(true);
+    {
-      try {
+        const cache_contacts = getCachedData( "contacts" );
+        if ( !cache_contacts )
+        {
+            setLoading(true)
+           try
+        {
             const response = await DirectoryRepository.GetContacts();
-        setContacts(response.data);
+               setContacts( response.data )
-        cacheData("contacts", response.data);
+               cacheData( "contacts", response.data )
-        setLoading(false);
+               setLoading(false)
-      } catch (error) {
+        } catch ( error )
-        setError(error);
+        {
-        setLoading(false);
+               setError( error );
+               setLoading(false)
         }  
-    } else {
+        } else
-      setContacts(cache_contacts);
+        {
+            setContacts(cache_contacts)
         }
-  };
        
-  useState(() => {
+    }
-    fetch();
-  }, []);
-  return { contacts, loading, error };
-};
 
-export const useBuckets = () => {
+    useState( () =>
-  const [buckets, setBuckets] = useState([]);
+    {
-  const [loading, setLoading] = useState(false);
+        fetch()
-  const [error, setError] = useState("");
+    }, [] )
+    return {contacts,loading,error}
+}
 
-  const fetchBuckets = async () => {
+export const useBuckets = () =>
-    const cacheBuckets = getCachedData("buckets");
+{
-    if (!cacheBuckets) {
+    const [ buckets, setbuckets ] = useState();
-        setLoading( true );
+    const [ loading, setLoading ] = useState();
-      try {
+    const [ Error, setError ] = useState( '' )
+    
+    const fetch = async() =>
+    {    const cache_buckets = getCachedData("buckets")
+        if ( !cache_buckets )
+        {
+            setLoading(true)
+            try
+        {
                 const resp = await DirectoryRepository.GetBucktes();
-        setBuckets(resp.data);
+                setbuckets( resp.data );
-          cacheData( "buckets", resp.data );
+                cacheData( "bucktes", resp.data )
-            setLoading(false);
+                            setLoading(false)
-      } catch (error) {
+        } catch ( error )
-        const msg =
+            { 
-          error?.response?.data?.message || error?.message || "Something went wrong";
+                const msg = error.response.data.message || error.message || "Something wrong";
-        setError(msg);
+            setError(msg)
+        }
+        } else
+        {
+            setbuckets(cache_buckets)
         }
-    } else {
-      setBuckets(cacheBuckets);
     }
-  };
 
-  useEffect(() => {
+    useEffect( () =>
-    fetchBuckets();
+    {
-  }, []);
+        fetch()
-
+    }, [] )
-  return { buckets, loading, error };
+    return {buckets,loading,Error}
-};
+}

src/index.css

@@ -165,6 +165,3 @@ padding: 1px !important;
 .accordion-button:not(.collapsed) .toggle-icon {
   content: "\f146"; /* minus-circle */
 }
-.hoverBox:hover{
-  background-color: #f1f3f5;
-}

src/pages/Directory/Directory.jsx

@@ -8,50 +8,35 @@ import { useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
-import UpdateContact from "../../components/Directory/UpdateContact";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const [selectedContact, setSelectedContact] = useState(null);
+  const closedModel = () => setIsOpenModal(false);
   const [ContatList, setContactList] = useState([]);
 
   const { contacts, loading } = useDirectory();
-  const submitContact = async (data) => {
+  const submitContact = async (data, setLoading, reset) => {
-    try {
+    try
-      let response;
+    {
-      let updatedContacts;
+      debugger
+      const resp = await DirectoryRepository.CreateContact(data)
       const contacts_cache = getCachedData("contacts") || [];
+      const updated_contacts = [...contacts_cache, resp.data];
 
-      if (selectedContact) {
+      setContactList(updated_contacts);
-        
+      showToast(resp.message || "Contact created successfully", "success");
-        response = await DirectoryRepository.UpdateContact(data.id, data);
+      setLoading(false);
-        updatedContacts = contacts_cache.map((contact) =>
+      reset();
-          contact.id === data.id ? response.data : contact
-        );
-        showToast("Contact updated successfully", "success");
-        setIsOpenModal( false );
-        setSelectedContact(null);
-      } else {
-        response = await DirectoryRepository.CreateContact(data);
-        updatedContacts = [...contacts_cache, response.data];
-        showToast("Contact created successfully", "success");
       setIsOpenModal(false);
-      }
-
-      setContactList(updatedContacts);
     } catch (error) {
       const msg =
-        error.response?.data?.message ||
+        error.response.data.message ||
         error.message ||
-        "Error occurred during API call!";
+        "Error Occured during api calling !";
       showToast(msg, "error");
     }
   };
 
-  const closedModel = () => {
-    setIsOpenModal(false);
-    setSelectedContact(null);
-  };
   useEffect(() => {
     setContactList(contacts);
   }, [contacts]);
@@ -65,23 +50,11 @@ const Directory = () => {
       ></Breadcrumb>
 
       {isOpenModal && (
-        <GlobalModel
+        <GlobalModel isOpen={isOpenModal} closeModal={()=>setIsOpenModal(false)} size="lg">
-          isOpen={isOpenModal}
-          closeModal={() => setIsOpenModal(false)}
-          size="lg"
-        >
-          {selectedContact ? (
-            <UpdateContact
-              existingContact={selectedContact}
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
-          ) : (
           <ManageDirectory
             submitContact={submitContact}
             onCLosed={closedModel}
           />
-          )}
         </GlobalModel>
       )}
 
@@ -196,12 +169,12 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              {loading && ContatList.length === 0 && (
+              {(loading && ContatList.length === 0) && (
                 <tr>
                   <td colSpan={10}>Loading...</td>
                 </tr>
               )}
-              {!loading && contacts.length == 0 && ContatList.length === 0 && (
+              {(!loading && contacts.length == 0 && ContatList.length === 0) && (
                 <tr>
                   <td colSpan={10}>No Contact Found</td>
                 </tr>
@@ -210,8 +183,7 @@ const Directory = () => {
                 ContatList.map((contact) => (
                   <ListViewDirectory
                     contact={contact}
-                    setSelectedContact={setSelectedContact}
+                    submitContact={submitContact}
-                    setIsOpenModal={setIsOpenModal}
                   />
                 ))}
             </tbody>

src/repositories/DirectoryRepository.jsx

@@ -2,8 +2,7 @@ import {api} from "../utils/axiosClient";
 
 export const DirectoryRepository = {
     GetContacts: () => api.get( '/api/directory' ),
-    CreateContact: ( data ) => api.post( '/api/directory', data ),
+    CreateContact:(data)=>api.post('/api/directory',data),
-    UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
     
     GetBucktes:()=>api.get(`/api/Directory/buckets`)
 }