src/components/Directory/DirectorySchema.js

@@ -0,0 +1,57 @@
+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 }) => {
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
   return (
     <tr key={contact.id} >
       <td className="text-start" colSpan={2}>{`${contact.name}`}</td>
@@ -40,7 +40,6 @@ const ListViewDirectory = ({ contact }) => {
         </div>
       </td>
 
-      {/* Phones */}
       <td>
         <div className="d-flex flex-column align-items-start">
           {contact.contactPhones?.map((phone, index) => (
@@ -64,7 +63,11 @@ const ListViewDirectory = ({ contact }) => {
 
       {/* Actions */}
       <td className="align-middle text-center ">
-        <i className='bx bx-edit bx-sm text-primary cursor-pointer'></i>
+        <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
+        {
+          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,76 +7,48 @@ 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 from "../../hooks/masterHook/useMaster";
+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 { 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 [IsSubmitting,setSubmitting] = useState(false)
+  const { contactCategory, loading: contactCategoryLoading } =
+    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: "",
-      ProjectId:null,
+      projectIds: [],
-      ContactEmails: [],
+      contactEmails: [],
-      ContactPhones: [],
+      contactPhones: [],
       tags: [],
-      BucketIds: [],
+      bucketIds: [],
     },
   });
 
@@ -96,93 +68,98 @@ 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(() => {
+useEffect(() => {
-    if (emailFields.length === 0) appendEmail("");
+  if (emailFields.length === 0) {
-    if (phoneFields.length === 0) appendPhone("");
+    appendEmail({ label: "Work", emailAddress: "" }); 
-  }, [emailFields.length, phoneFields.length]);
+  }
+  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: "" });
     }
   };
 
-  useEffect(() => {
+  const watchBucketIds = watch("bucketIds");
-    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 ) =>
   {
-     setSubmitting(true)
+      const cleaned = {
-     submitContact( data, reset, setSubmitting )
+    ...data,
+    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="text-start d-flex align-items-center">
+        <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"> Create New Contact</h6>
         </div>
         <div className="row">
-          <div className="col-md-6">
+          <div className="col-md-6  text-start">
             <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">
+          <div className="col-md-6  text-start">
             <label className="form-label">Organization</label>
             <input
               className="form-control form-control-sm"
@@ -202,29 +179,29 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                 key={field.id}
                 className="row d-flex align-items-center mb-1"
               >
-                <div className="col-5">
+                <div className="col-5  text-start">
                   <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">
+                <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`)}
+                      {...register(`contactEmails.${index}.emailAddress`)}
                       placeholder="email@example.com"
                     />
                     {index === emailFields.length - 1 ? (
@@ -247,27 +224,26 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                       </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">
+                <div className="col-5  text-start">
                   <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>
@@ -279,13 +255,13 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                     </small>
                   )}
                 </div>
-                <div className="col-7">
+                <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`)}
+                      {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
                     />
                     {index === phoneFields.length - 1 ? (
@@ -308,27 +284,28 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                       </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">
+          <div className="col-md-6  text-start">
             <label className="form-label">Category</label>
             <select
-              defaultValue=""
               className="form-select form-select-sm"
-              {...register("ContactCategoryId")}
+              {...register("contactCategoryId")}
-              onClick={() => dispatch(changeMaster("Contact Category"))}
             >
-              {loading && !categoryData ? (
+              {contactCategoryLoading && !contactCategory ? (
                 <option disabled value="">
                   Loading...
                 </option>
@@ -337,7 +314,7 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                   <option disabled selected value="">
                     Select Category
                   </option>
-                  {categoryData?.map((cate) => (
+                  {contactCategory?.map((cate) => (
                     <option key={cate.id} value={cate.id}>
                       {cate.name}
                     </option>
@@ -345,26 +322,52 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                 </>
               )}
             </select>
-            {errors.ContactCategoryId && (
+            {errors.contactCategoryId && (
-              <small className="danger-text">{errors.ContactCategoryId.message}</small>
+              <small className="danger-text">
+                {errors.contactCategoryId.message}
+              </small>
             )}
           </div>
-          <div className="col-md-6">
+          <div className="col-12 col-md-6 text-start">
-            <TagInput name="tags" label="Tags" options={data} />
+            <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="row">
-          <div className="col-md-6 text-start">
-            <label className="form-label mb-2">Select Label</label>
 
-            <div
+        <div className="col-12 text-start">
-              className="row px-1"
+          <TagInput name="tags" label="Tags" options={contactTags} />
-              style={{ maxHeight: "100px", overflowY: "auto" }}
+            {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) => (
-                <div className="col-6 col-sm-6 " key={item.id}>
+                <li
-                  <div className="form-check mb-2">
+                  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"
@@ -379,47 +382,17 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
                       {item.name}
                     </label>
                   </div>
-                </div>
+                </li>
               ))}
-            </div>
+            </ul>
 
             {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">
+        <div className="col-12 text-start">
           <label className="form-label">Address</label>
           <textarea
             className="form-control form-control-sm"
@@ -428,7 +401,7 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
           />
         </div>
 
-        <div className="col-12">
+        <div className="col-12 text-start">
           <label className="form-label">Description</label>
           <textarea
             className="form-control form-control-sm"
@@ -444,7 +417,11 @@ const ManageDirectory = ({submitContact,onCLosed}) => {
           <button className="btn btn-sm btn-primary" type="submit">
             {IsSubmitting ? "Please Wait..." : "Submit"}
           </button>
-          <button className="btn btn-sm btn-secondary" type="button" onClick={onCLosed}>
+          <button
+            className="btn btn-sm btn-secondary"
+            type="button"
+            onClick={handleClosed}
+          >
             Cancel
           </button>
         </div>

src/components/Directory/UpdateContact.jsx

@@ -0,0 +1,455 @@
+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

@@ -0,0 +1,158 @@
+/* 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

@@ -0,0 +1,125 @@
+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,30 +1,28 @@
-import { useFormContext } from "react-hook-form";
+import { useFormContext, useWatch } 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...",
+  placeholder = "Start typing to add... like employee, manager",
   color = "#e9ecef",
   options = [],
 }) => {
   const [tags, setTags] = useState([]);
   const [input, setInput] = useState("");
   const [suggestions, setSuggestions] = useState([]);
-  const { setValue, trigger } = useFormContext();
+  const { setValue, trigger, control } = useFormContext();
-  const dispatch = useDispatch();
+  const watchedTags = useWatch({ control, name });
 
-  useEffect(() => {
+
-    setValue(
+useEffect(() => {
-      name,
+  if (
-      tags.map((tag) => ({
+    Array.isArray(watchedTags) &&
-        id: tag.id ?? null,
+    JSON.stringify(tags) !== JSON.stringify(watchedTags)
-        name: tag.name,
+  ) {
-      }))
+    setTags(watchedTags);
-    );
+  }
-  }, [ tags, name, setValue ] );
+}, [JSON.stringify(watchedTags)]);
 
   useEffect(() => {
     if (input.trim() === "") {
@@ -32,29 +30,34 @@ const TagInput = ({
     } 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 = {
-    const cleanedTag = {
+        id: tagObj.id ?? null,
-      id: tagObj.id ?? null,
+        name: tagObj.name,
-      name: tagObj.name,
+      };
-    };
+      const newTags = [...tags, cleanedTag];
-    const newTags = [...tags, cleanedTag];
+      setTags(newTags);
-    setTags(newTags);
+      setValue(name, newTags, { shouldValidate: true });
-    setValue(name, newTags, { shouldValidate: true }); // ✅ only id + name
+      await trigger(name);
-    await trigger(name);
+      setInput("");
-    setInput("");
+      setSuggestions([]);
-    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() !== "") {
@@ -69,7 +72,7 @@ const TagInput = ({
             name: input.trim(),
             description: input.trim(),
           };
-      addTag(newTag); // Call async function (not awaiting because it's UI input)
+      addTag(newTag);
     } else if (e.key === "Backspace" && input === "") {
       setTags((prev) => prev.slice(0, -1));
     }
@@ -79,13 +82,6 @@ const TagInput = ({
     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})`;
 
@@ -120,6 +116,7 @@ const TagInput = ({
               />
             </span>
           ))}
+
           <input
             type="text"
             value={input}
@@ -132,17 +129,17 @@ const TagInput = ({
               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) => (
@@ -150,7 +147,8 @@ const TagInput = ({
                 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>
@@ -161,5 +159,4 @@ const TagInput = ({
     </>
   );
 };
-
 export default TagInput;

src/hooks/masterHook/useMaster.js

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

src/index.css

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

src/pages/Directory/Directory.jsx

@@ -8,35 +8,50 @@ 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 closedModel = () => setIsOpenModal(false);
+  const [selectedContact, setSelectedContact] = useState(null);
   const [ContatList, setContactList] = useState([]);
 
   const { contacts, loading } = useDirectory();
-  const submitContact = async (data, setLoading, reset) => {
+  const submitContact = async (data) => {
-    try
+    try {
-    {
+      let response;
-      debugger
+      let updatedContacts;
-      const resp = await DirectoryRepository.CreateContact(data)
       const contacts_cache = getCachedData("contacts") || [];
-      const updated_contacts = [...contacts_cache, resp.data];
 
-      setContactList(updated_contacts);
+      if (selectedContact) {
-      showToast(resp.message || "Contact created successfully", "success");
+        
-      setLoading(false);
+        response = await DirectoryRepository.UpdateContact(data.id, data);
-      reset();
+        updatedContacts = contacts_cache.map((contact) =>
-      setIsOpenModal(false);
+          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 Occured during api calling !";
+        "Error occurred during API call!";
       showToast(msg, "error");
     }
   };
 
+  const closedModel = () => {
+    setIsOpenModal(false);
+    setSelectedContact(null);
+  };
   useEffect(() => {
     setContactList(contacts);
   }, [contacts]);
@@ -50,11 +65,23 @@ const Directory = () => {
       ></Breadcrumb>
 
       {isOpenModal && (
-        <GlobalModel isOpen={isOpenModal} closeModal={()=>setIsOpenModal(false)} size="lg">
+        <GlobalModel
-          <ManageDirectory
+          isOpen={isOpenModal}
-            submitContact={submitContact}
+          closeModal={() => setIsOpenModal(false)}
-            onCLosed={closedModel}
+          size="lg"
-          />
+        >
+          {selectedContact ? (
+            <UpdateContact
+              existingContact={selectedContact}
+              submitContact={submitContact}
+              onCLosed={closedModel}
+            />
+          ) : (
+            <ManageDirectory
+              submitContact={submitContact}
+              onCLosed={closedModel}
+            />
+          )}
         </GlobalModel>
       )}
 
@@ -93,7 +120,7 @@ const Directory = () => {
                     <span>Name</span>
                   </div>
                 </th>
-                <th  className="px-2 text-start">
+                <th className="px-2 text-start">
                   <div className="d-flex text-center align-items-center gap-1 justify-content-start">
                     <IconButton
                       size={12}
@@ -169,21 +196,22 @@ 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>
-             )}
+              )}
               {!loading &&
                 ContatList.map((contact) => (
                   <ListViewDirectory
                     contact={contact}
-                    submitContact={submitContact}
+                    setSelectedContact={setSelectedContact}
+                    setIsOpenModal={setIsOpenModal}
                   />
                 ))}
             </tbody>

src/repositories/DirectoryRepository.jsx

@@ -2,7 +2,8 @@ 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`)
 }