src/components/Directory/ListViewDirectory.jsx

@@ -26,10 +26,10 @@ const getPhoneIcon = (type) => {
 const ListViewDirectory = ({ contact }) => {
   return (
     <tr key={contact.id} >
-      <td className="text-start">{`${contact.name}`}</td>
+      <td className="text-start" colSpan={2}>{`${contact.name}`}</td>
 
       {/* Emails */}
-      <td colSpan="2">
+      <td >
         <div className="d-flex flex-column align-items-start px-1">
           {contact.contactEmails?.map((email, index) => (
             <span key={email.id}>
@@ -52,15 +52,13 @@ const ListViewDirectory = ({ contact }) => {
         </div>
       </td>
 
-      {/* Organization */}
+
       <td className="text-start">{contact.organization}</td>
 
-      {/* Tags */}
+  
       <td>
         <div className="d-flex flex-column align-items-start">
-          {contact.tags?.map((tag, index) => (
+          <span class="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
-            <span key={index} className="badge bg-light text-dark mb-1">{tag}</span>
-          ))}
         </div>
       </td>
 

src/components/Directory/ManageDirectory.jsx

@@ -1,40 +1,82 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
-import { useForm, useFieldArray, FormProvider } from "react-hook-form";
+import {
+  useForm,
+  useFieldArray,
+  FormProvider,
+  useFormContext,
+} 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 { useDispatch, useSelector } from "react-redux";
+import { changeMaster } from "../../slices/localVariablesSlice";
+import { useBuckets } from "../../hooks/useDirectory";
+import {useProjects} from "../../hooks/useProjects";
 
-export const directorySchema = z.object({
+export const ContactSchema = z.object({
-  firstName: z.string().min(1, "First Name is required"),
+  Name: z.string().min(1, "Name is required"),
-  lastName: z.string().min(1, "Last Name is required"),
   organization: z.string().min(1, "Organization name is required"),
-  type: z.string().min(1, "Type is required"),
+  ContactCategoryId: z.string().optional(),
   address: z.string().optional(),
-  description: z.string().min(1, { message: "Description is required" }),
+  description: z.string().min( 1, {message: "Description is required"} ),
-  email: z
+  ProjectId :z.string().optional(),
-    .array(z.string().email("Invalid email"))
+ ContactEmails: z
-    .nonempty("At least one email required"),
+    .array(
-  phone: z
+      z.object({
-    .array(z.string().regex(/^\d{10}$/, "Phone must be 10 digits"))
+        label: z.string(),
-    .nonempty("At least one phone number is required"),
+        emailAddress: z.string().email("Invalid email"),
-  tags: z.array(z.string()).optional(),
+      })
+    )
+    .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 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 [IsSubmitting,setSubmitting] = useState(false)
+  const dispatch = useDispatch();
 
-
-const ManageDirectory = () => {
   const methods = useForm({
-    resolver: zodResolver(directorySchema),
+    resolver: zodResolver(ContactSchema),
     defaultValues: {
-      firstName: "",
+      Name: "",
-      lastName: "",
       organization: "",
-      type: "",
+      ContactCategoryId: null,
       address: "",
       description: "",
-      email: [""],
+      ProjectId:null,
-      phone: [""],
+      ContactEmails: [],
+      ContactPhones: [],
       tags: [],
+      BucketIds: [],
     },
   });
 
@@ -44,6 +86,9 @@ const ManageDirectory = () => {
     control,
     getValues,
     trigger,
+    setValue,
+    watch,
+    reset,
     formState: { errors },
   } = methods;
 
@@ -51,69 +96,135 @@ const ManageDirectory = () => {
     fields: emailFields,
     append: appendEmail,
     remove: removeEmail,
-  } = useFieldArray({ control, name: "email" });
+  } = useFieldArray({ control, name: "ContactEmails" });
 
   const {
     fields: phoneFields,
     append: appendPhone,
     remove: removePhone,
-  } = useFieldArray({ control, name: "phone" });
+  } = useFieldArray({ control, name: "ContactPhones" });
 
   useEffect(() => {
     if (emailFields.length === 0) appendEmail("");
     if (phoneFields.length === 0) appendPhone("");
   }, [emailFields.length, phoneFields.length]);
 
-  const onSubmit = (data) => {
+ 
-    // console.log("Submitted:\n" + JSON.stringify(data, null, 2));
-  };
 
   const handleAddEmail = async () => {
-    const emails = getValues("email");
+    const emails = getValues("ContactEmails");
     const lastIndex = emails.length - 1;
-    const valid = await trigger(`email.${lastIndex}`);
+    const valid = await trigger(`ContactEmails.${lastIndex}.emailAddress`);
-    if (valid) appendEmail(""); 
+    if (valid) {
+      appendEmail({ label: "Work", emailAddress: "" });
+    }
   };
 
   const handleAddPhone = async () => {
-    const phones = getValues("phone");
+    const phones = getValues("ContactPhones");
     const lastIndex = phones.length - 1;
-    const valid = await trigger(`phone.${lastIndex}`);
+    const valid = await trigger(`ContactPhones.${lastIndex}.phoneNumber`);
-    if (valid) appendPhone(""); 
+    if (valid) {
+      appendPhone({ label: "Office", phoneNumber: "" });
+    }
   };
 
+  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 });
+  };
+  const handleCheckboxChange = (id) => {
+    const updated = watchBucketIds.includes(id)
+      ? watchBucketIds.filter((i) => i !== id)
+      : [...watchBucketIds, id];
+
+    setValue("BucketIds", updated, { shouldValidate: true });
+  };
+
+
+
+  
+  const onSubmit = ( data ) =>
+  {
+     setSubmitting(true)
+     submitContact( data, reset, setSubmitting )
+
+  };
   return (
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
+        <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">
-            <label className="form-label">First Name</label>
+            <label className="form-label">Name</label>
-            <input className="form-control form-control-sm" {...register("firstName")} />
+            <input
-            {errors.firstName && <small className="danger-text">{errors.firstName.message}</small>}
+              className="form-control form-control-sm"
+              {...register("Name")}
+            />
+            {errors.Name && (
+              <small className="danger-text">{errors.Name.message}</small>
+            )}
           </div>
 
           <div className="col-md-6">
-            <label className="form-label">Last Name</label>
-            <input className="form-control form-control-sm" {...register("lastName")} />
-            {errors.lastName && <small className="danger-text">{errors.lastName.message}</small>}
-          </div>
-        </div>
-
-        <div className="col-12">
             <label className="form-label">Organization</label>
-          <input className="form-control form-control-sm" {...register("organization")} />
+            <input
-          {errors.organization && <small className="danger-text">{errors.organization.message}</small>}
+              className="form-control form-control-sm"
+              {...register("organization")}
+            />
+            {errors.organization && (
+              <small className="danger-text">
+                {errors.organization.message}
+              </small>
+            )}
           </div>
-
+        </div>
-        <div className="row">
+        <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">
+                  <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">
                   <label className="form-label">Email</label>
-            {emailFields.map((field, index) => (<>
+                  <div className="d-flex align-items-center">
-              <div key={field.id} className="d-flex align-items-center mb-1">
                     <input
                       type="email"
                       className="form-control form-control-sm"
-                  {...register(`email.${index}`)}
+                      {...register(`ContactEmails.${index}.emailAddress`)}
                       placeholder="email@example.com"
                     />
                     {index === emailFields.length - 1 ? (
@@ -121,38 +232,60 @@ const ManageDirectory = () => {
                         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"
+                        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.email?.[index] && (
+                  {errors.ContactEmails?.[index]?.emailAddress && (
-        <small className="danger-text ms-2">
+                    <small className="danger-text">
-          {errors.email[index]?.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">
+                  <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">
                   <label className="form-label">Phone</label>
-            {phoneFields.map((field, index) => (<>
+                  <div className="d-flex align-items-center">
-              <div key={field.id} className="d-flex align-items-center mb-1">
                     <input
                       type="text"
                       className="form-control form-control-sm"
-                  {...register(`phone.${index}`)}
+                      {...register(`ContactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
                     />
                     {index === phoneFields.length - 1 ? (
@@ -160,6 +293,7 @@ const ManageDirectory = () => {
                         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>
@@ -167,44 +301,152 @@ const ManageDirectory = () => {
                       <button
                         type="button"
                         className="btn btn-xs btn-danger ms-1"
-                    onClick={() => removePhone(index)} // Remove the phone field
+                        onClick={() => removePhone(index)}
+                        style={{ width: "24px", height: "24px" }}
                       >
                         <i className="bx bx-x bx-xs" />
                       </button>
                     )}
                   </div>
-              {errors.phone?.[ index ] && <small className="danger-text ms-2">{errors.phone[ index ]?.message}</small>}
+                  {errors.ContactPhones?.[index]?.phoneNumber && (
-              </>
+                    <small className="danger-text">
+                      {errors.ContactPhones[index].phoneNumber.message}
+                    </small>
+                  )}
+                </div>
+              </div>
             ))}
-         
           </div>
         </div>
 
         <div className="row my-1">
           <div className="col-md-6">
-            <label className="form-label">Type</label>
+            <label className="form-label">Category</label>
-            <input className="form-control form-control-sm" {...register("type")} />
+            <select
-            {errors.type && <small className="danger-text">{errors.type.message}</small>}
+              defaultValue=""
+              className="form-select form-select-sm"
+              {...register("ContactCategoryId")}
+              onClick={() => dispatch(changeMaster("Contact Category"))}
+            >
+              {loading && !categoryData ? (
+                <option disabled value="">
+                  Loading...
+                </option>
+              ) : (
+                <>
+                  <option disabled selected value="">
+                    Select Category
+                  </option>
+                  {categoryData?.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-md-6">
-            <TagInput name="tags" label="Tags" />
+            <TagInput name="tags" label="Tags" options={data} />
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-6 text-start">
+            <label className="form-label mb-2">Select Label</label>
+
+            <div
+              className="row px-1"
+              style={{ maxHeight: "100px", overflowY: "auto" }}
+            >
+              {bucketsLoaging && <p>Loading...</p>}
+              {buckets?.map((item) => (
+                <div className="col-6 col-sm-6 " key={item.id}>
+                  <div className="form-check mb-2">
+                    <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>
+                </div>
+              ))}
+            </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">
           <label className="form-label">Address</label>
-          <textarea className="form-control form-control-sm" rows="2" {...register("address")} />
+          <textarea
+            className="form-control form-control-sm"
+            rows="2"
+            {...register("address")}
+          />
         </div>
 
         <div className="col-12">
           <label className="form-label">Description</label>
-          <textarea className="form-control form-control-sm" rows="2" {...register("description")} />
+          <textarea
-          {errors.description && <small className="danger-text">{errors.description.message}</small>}
+            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-evenly py-2">
+        <div className="d-flex justify-content-center gap-1 py-2">
-          <button className="btn btn-sm btn-primary" type="submit">Submit</button>
+          <button className="btn btn-sm btn-primary" type="submit">
-          <button className="btn btn-sm btn-secondary" type="button">Cancel</button>
+            {IsSubmitting ? "Please Wait..." : "Submit"}
+          </button>
+          <button className="btn btn-sm btn-secondary" type="button" onClick={onCLosed}>
+            Cancel
+          </button>
         </div>
       </form>
     </FormProvider>

src/components/common/GlobalModel.jsx

@@ -12,20 +12,20 @@ const GlobalModel = ({
 }) => {
   const modalRef = useRef(null);  // Reference to the modal element
 
-  useEffect(() => {
+useEffect(() => {
   const modalElement = modalRef.current;
-    const modalInstance = new window.bootstrap.Modal(modalElement);
+  const modalInstance = new window.bootstrap.Modal(modalElement, {
+    backdrop: false  // Disable backdrop
+  });
 
-    // Show modal if isOpen is true
   if (isOpen) {
     modalInstance.show();
   } else {
     modalInstance.hide();
   }
 
-    // Handle modal hide event to invoke the closeModal function
   const handleHideModal = () => {
-      closeModal();  // Close the modal via React state
+    closeModal();
   };
 
   modalElement.addEventListener('hidden.bs.modal', handleHideModal);
@@ -33,7 +33,8 @@ const GlobalModel = ({
   return () => {
     modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
   };
-  }, [isOpen, closeModal]);
+}, [isOpen, closeModal]);
+
 
   // Dynamically set the modal size classes (modal-sm, modal-lg, modal-xl)
   const modalSizeClass = size ? `modal-${size}` : '';  // Default is empty if no size is specified

src/components/common/TagInput.jsx

@@ -1,32 +1,89 @@
-import React, { useState, useEffect } from "react";
 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 = "Enter ... ",
+  placeholder = "Start typing to add...",
   color = "#e9ecef",
+  options = [],
 }) => {
   const [tags, setTags] = useState([]);
   const [input, setInput] = useState("");
-  const { setValue } = useFormContext();
+  const [suggestions, setSuggestions] = useState([]);
+  const { setValue, trigger } = useFormContext();
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    setValue(name, tags); // sync to form when tags change
+    setValue(
-  }, [tags, name, setValue]);
+      name,
+      tags.map((tag) => ({
+        id: tag.id ?? null,
+        name: tag.name,
+      }))
+    );
+  }, [ tags, name, setValue ] );
 
-  const addTag = (e) => {
+  useEffect(() => {
-    e.preventDefault();
+    if (input.trim() === "") {
-    const trimmed = input.trim();
+      setSuggestions([]);
-    if (trimmed !== "" && !tags.includes(trimmed)) {
+    } else {
-      setTags([...tags, trimmed]);
+      const filtered = options?.filter(
+        (opt) =>
+          opt?.name?.toLowerCase()?.includes(input?.toLowerCase()) &&
+          !tags?.some((tag) => tag?.name === opt?.name)
+      );
+      setSuggestions(filtered);
+    }
+  }, [input, options, tags]);
+
+  const addTag = async ( tagObj ) =>
+  {
+  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 }); // ✅ only id + name
+    await trigger(name);
     setInput("");
+    setSuggestions([]);
+  }
+};
+
+
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter" && input.trim() !== "") {
+      e.preventDefault();
+      const existing = options.find(
+        (opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
+      );
+      const newTag = existing
+        ? existing
+        : {
+            id: null,
+            name: input.trim(),
+            description: input.trim(),
+          };
+      addTag(newTag); // Call async function (not awaiting because it's UI input)
+    } else if (e.key === "Backspace" && input === "") {
+      setTags((prev) => prev.slice(0, -1));
     }
   };
 
-  const removeTag = (removeIndex) => {
+  const handleSuggestionClick = (suggestion) => {
-    const updated = tags.filter((_, i) => i !== removeIndex);
+    addTag(suggestion);
-    setTags(updated);
+  };
+
+  const removeTag = (indexToRemove) => {
+    const newTags = tags.filter((_, i) => i !== indexToRemove);
+    setTags(newTags);
+    setValue(name, newTags, { shouldValidate: true });
+    trigger(name);
   };
 
   const backgroundColor = color || "#f8f9fa";
@@ -34,33 +91,73 @@ const TagInput = ({
 
   return (
     <>
-      <label htmlFor={name} className="form-label">{label}</label>
+      <label htmlFor={name} className="form-label">
-      <div className="form-control form-control-sm d-flex justify-content-start flex-wrap gap-1" style={{ minHeight: "12px" }}>
+        {label}
-        {tags.map((tag, i) => (
+      </label>
+
+      <div
+        className="form-control form-control-sm p-1"
+        style={{ minHeight: "38px", position: "relative" }}
+      >
+        <div className="d-flex flex-wrap align-items-center gap-1">
+          {tags.map((tag, index) => (
             <span
-            key={i}
+              key={index}
               className="d-flex align-items-center"
               style={{
                 color: iconColor,
                 backgroundColor,
-              padding: "2px 3px",
+                padding: "2px 6px",
-              borderRadius: "2px"
+                borderRadius: "2px",
+                fontSize: "0.85rem",
               }}
             >
-            {tag}
+              {tag.name}
-            <i className="bx bx-x bx-xs ms-1" onClick={() => removeTag(i)}></i>
+              <i
+                className="bx bx-x bx-xs ms-1"
+                onClick={() => removeTag(index)}
+                style={{ cursor: "pointer" }}
+              />
             </span>
           ))}
           <input
             type="text"
-          className="border-0 flex-grow-1"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-          onKeyDown={(e) => (e.key === "Enter" ? addTag(e) : null)}
+            onKeyDown={handleInputKeyDown}
             placeholder={placeholder}
-          style={{ outline: "none", minWidth: "120px" }}
+            style={{
+              border: "none",
+              outline: "none",
+              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"
+            style={{
+              zIndex: 1000,
+              maxHeight: "150px",
+              overflowY: "auto",
+            }}
+          >
+            {suggestions.map((sugg, i) => (
+              <li
+                key={i}
+                className="dropdown-item p-1 hoverBox"
+                onClick={() => handleSuggestionClick(sugg)}
+                style={{ cursor: "pointer", fontSize: "0.875rem" }}
+              >
+                {sugg.name}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
     </>
   );
 };

src/hooks/useDirectory.js

@@ -1,4 +1,4 @@
-import {useState} from "react"
+import {useEffect, useState} from "react"
 import {DirectoryRepository} from "../repositories/DirectoryRepository";
 import {cacheData, getCachedData} from "../slices/apiDataManager";
 
@@ -20,12 +20,16 @@ export const useDirectory = () =>
         {
             const response = await DirectoryRepository.GetContacts();
                setContacts( response.data )
-               cacheData("contacts",response.data)
+               cacheData( "contacts", response.data )
+               setLoading(false)
         } catch ( error )
         {
                setError( error );
                setLoading(false)
         }  
+        } else
+        {
+            setContacts(cache_contacts)
         }
        
     }
@@ -36,3 +40,38 @@ export const useDirectory = () =>
     }, [] )
     return {contacts,loading,error}
 }
+
+export const useBuckets = () =>
+{
+    const [ buckets, setbuckets ] = useState();
+    const [ loading, setLoading ] = useState();
+    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 );
+                cacheData( "bucktes", resp.data )
+                            setLoading(false)
+        } catch ( error )
+            { 
+                const msg = error.response.data.message || error.message || "Something wrong";
+            setError(msg)
+        }
+        } else
+        {
+            setbuckets(cache_buckets)
+        }
+    }
+
+    useEffect( () =>
+    {
+        fetch()
+    }, [] )
+    return {buckets,loading,Error}
+}

src/pages/Directory/Directory.jsx

@@ -1,18 +1,45 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import IconButton from "../../components/common/IconButton";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageDirectory from "../../components/Directory/ManageDirectory";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
-import {useDirectory} from "../../hooks/useDirectory";
+import { useDirectory } from "../../hooks/useDirectory";
-
+import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+import { getCachedData } from "../../slices/apiDataManager";
+import showToast from "../../services/toastService";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const closedModel = () => setIsOpenModal( false );
+  const closedModel = () => setIsOpenModal(false);
+  const [ContatList, setContactList] = useState([]);
 
-  const {contacts} = useDirectory();
+  const { contacts, loading } = useDirectory();
-  console.log(contacts)
+  const submitContact = async (data, setLoading, reset) => {
+    try
+    {
+      debugger
+      const resp = await DirectoryRepository.CreateContact(data)
+      const contacts_cache = getCachedData("contacts") || [];
+      const updated_contacts = [...contacts_cache, resp.data];
+
+      setContactList(updated_contacts);
+      showToast(resp.message || "Contact created successfully", "success");
+      setLoading(false);
+      reset();
+      setIsOpenModal(false);
+    } catch (error) {
+      const msg =
+        error.response.data.message ||
+        error.message ||
+        "Error Occured during api calling !";
+      showToast(msg, "error");
+    }
+  };
+
+  useEffect(() => {
+    setContactList(contacts);
+  }, [contacts]);
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -22,9 +49,14 @@ const Directory = () => {
         ]}
       ></Breadcrumb>
 
-      <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
+      {isOpenModal && (
-        <ManageDirectory />
+        <GlobalModel isOpen={isOpenModal} closeModal={()=>setIsOpenModal(false)} size="lg">
+          <ManageDirectory
+            submitContact={submitContact}
+            onCLosed={closedModel}
+          />
         </GlobalModel>
+      )}
 
       <div className="card p-2">
         <div className="row mx-0 px-0">
@@ -48,9 +80,9 @@ const Directory = () => {
         </div>
         <div className="table-responsive text-nowrap py-2 ">
           <table className="table px-2">
-            <thead >
+            <thead>
               <tr>
-                <th>
+                <th colSpan={2}>
                   <div className="d-flex align-items-center gap-1">
                     <IconButton
                       size={12}
@@ -61,8 +93,8 @@ const Directory = () => {
                     <span>Name</span>
                   </div>
                 </th>
-                <th colSpan="2" className="px-2 text-center">
+                <th  className="px-2 text-start">
-                  <div className="d-flex text-center align-items-center gap-1 justify-content-center">
+                  <div className="d-flex text-center align-items-center gap-1 justify-content-start">
                     <IconButton
                       size={12}
                       iconClass="bx bx-envelope"
@@ -137,8 +169,22 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              {contacts.map((contact) => (
+              {(loading && ContatList.length === 0) && (
-                <ListViewDirectory contact={contact} />
+                <tr>
+                  <td colSpan={10}>Loading...</td>
+                </tr>
+              )}
+              {(!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}
+                  />
                 ))}
             </tbody>
           </table>

src/repositories/DirectoryRepository.jsx

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