src/components/Directory/DirectorySchema.js

@@ -64,3 +64,17 @@ export const bucketScheam = z.object( {
   name: z.string().min( 1, {message: "Name is required"} ),
   description:z.string().min(1,{message:"Description is required"})
 })
+
+export const defaultContactValue = {
+      name: "",
+      organization: "",
+      contactCategoryId: null,
+      address: "",
+      description: "",
+      designation: "",
+      projectIds: [],
+      contactEmails: [],
+      contactPhones: [],
+      tags: [],
+      bucketIds: [],
+    }

src/components/Directory/ManageBucket.jsx

@@ -7,7 +7,7 @@ import showToast from "../../services/toastService";
 import Directory from "../../pages/Directory/Directory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
-import { useBuckets } from "../../hooks/useDirectory";
+import { useBuckets, useCreateBucket,  useUpdateBucket } from "../../hooks/useDirectory";
 import EmployeeList from "./EmployeeList";
 import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
 import { useSortableData } from "../../hooks/useSortableData";
@@ -37,6 +37,11 @@ const ManageBucket = () => {
     key: (e) => `${e.name}`,
     direction: "asc",
   });
+
+  const { mutate: handleCreatedBucket, isPending: creatingBucket } =
+    useCreateBucket();
+
+  const {mutate:UpdateBucket,isPending:updatingBucket} = useUpdateBucket()
   const getSortIcon = () => {
     if (!sortConfig) return null;
     return sortConfig.direction === "asc" ? (
@@ -74,7 +79,7 @@ const ManageBucket = () => {
       };
 
       if (selected_bucket) {
-        const payload = { ...data, id: selected_bucket.id };
+        const BucketPayload = { ...data, id: selected_bucket.id };
 
         response = await DirectoryRepository.UpdateBuckets(
           selected_bucket.id,
@@ -128,14 +133,19 @@ const ManageBucket = () => {
 
         setBucketList(updatedData);
         showToast("Bucket Updated Successfully", "success");
+
+
+
+        UpdateBucket({bucketId:selected_bucket.id,BucketPayload:BucketPayload})
       } else {
-        response = await DirectoryRepository.CreateBuckets(data);
+        // response = await DirectoryRepository.CreateBuckets(data);
 
-        const updatedBuckets = [...cache_buckets, response?.data];
+        // const updatedBuckets = [...cache_buckets, response?.data];
-        cacheData("buckets", updatedBuckets);
+        // cacheData("buckets", updatedBuckets);
-        setBucketList(updatedBuckets);
+        // setBucketList(updatedBuckets);
-
+        // showToast("Bucket Created Successfully", "success");
-        showToast("Bucket Created Successfully", "success");
+        const BucketPayload = data;
+        handleCreatedBucket(BucketPayload);
       }
 
       handleBack();
@@ -237,7 +247,8 @@ const ManageBucket = () => {
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
               <i
-                className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
+                className={`bx bx-refresh cursor-pointer fs-4 ${
+                  loading ? "spin" : ""
                 }`}
                 title="Refresh"
                 onClick={() => refetch()}
@@ -247,7 +258,8 @@ const ManageBucket = () => {
 
           <button
             type="button"
-            className={`btn btn-sm btn-primary ms-auto ${action_bucket ? "d-none" : ""
+            className={`btn btn-sm btn-primary ms-auto ${
+              action_bucket ? "d-none" : ""
             }`}
             onClick={() => {
               setAction_bucket(true);
@@ -285,7 +297,9 @@ const ManageBucket = () => {
                 </div>
               )}
 
-              {!loading && buckets.length > 0 && sortedBucktesList.length === 0 && (
+              {!loading &&
+                buckets.length > 0 &&
+                sortedBucktesList.length === 0 && (
                   <div className="col-12">
                     <div
                       className="d-flex justify-content-center align-items-center py-5 w-100"

src/components/Directory/ManageContact.jsx

@@ -0,0 +1,471 @@
+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,
+  useCreateContact,
+  useDesignation,
+  useOrganization,
+} from "../../hooks/useDirectory";
+import { useProjects } from "../../hooks/useProjects";
+import SelectMultiple from "../common/SelectMultiple";
+import { ContactSchema, defaultContactValue } from "./DirectorySchema";
+import InputSuggestions from "../common/InputSuggestion";
+import Label from "../common/Label";
+
+const ManageContact = ({ 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 { contactCategory, loading: contactCategoryLoading } =
+    useContactCategory();
+  const { organizationList, loading: orgLoading } = useOrganization();
+  const { designationList, loading: designloading } = useDesignation();
+  const { contactTags, loading: Tagloading } = useContactTags();
+  const [IsSubmitting, setSubmitting] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [filteredDesignationList, setFilteredDesignationList] = useState([]);
+  const dispatch = useDispatch();
+
+  const methods = useForm({
+    resolver: zodResolver(ContactSchema),
+    defaultValues: defaultContactValue,
+  });
+
+  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" });
+
+  useEffect(() => {
+    if (emailFields.length === 0) {
+      appendEmail({ label: "Work", emailAddress: "" });
+    }
+    if (phoneFields.length === 0) {
+      appendPhone({ label: "Office", phoneNumber: "" });
+    }
+  }, [emailFields.length, phoneFields.length]);
+
+  const handleAddEmail = async () => {
+    const emails = getValues("contactEmails");
+    const 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");
+
+  // handle logic when input of desgination is changed
+  const handleDesignationChange = (e) => {
+    const val = e.target.value;
+
+    const matches = designationList.filter((org) =>
+      org.toLowerCase().includes(val.toLowerCase())
+    );
+    setFilteredDesignationList(matches);
+    setShowSuggestions(true);
+    setTimeout(() => setShowSuggestions(false), 5000);
+  };
+
+  const handleSelectDesignation = (val) => {
+    setShowSuggestions(false);
+    setValue("designation", val);
+  };
+
+  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 {mutate:CreateContact,isPending} = useCreateContact(()=> handleClosed())
+  const onSubmit = (data) => {
+    const contactPayload = {
+      ...data,
+      contactEmails: (data.contactEmails || []).filter(
+        (e) => e.emailAddress?.trim() !== ""
+      ),
+      contactPhones: (data.contactPhones || []).filter(
+        (p) => p.phoneNumber?.trim() !== ""
+      ),
+    };
+     CreateContact(contactPayload)
+
+  };
+  const orgValue = watch("organization");
+
+  const handleClosed = () => {
+    onCLosed();
+  };
+  return (
+    <FormProvider {...methods}>
+      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
+        <div className="d-flex justify-content-center align-items-center">
+          <h6 className="m-0 fw-18"> Create New Contact</h6>
+        </div>
+        <div className="row">
+          <div className="col-md-6  text-start">
+            <Label htmlFor={"name"} required>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 htmlFor={"Organization"} required>Organization</Label>
+            <InputSuggestions
+              organizationList={organizationList}
+              value={getValues("organization") || ""}
+              onChange={(val) => setValue("organization", val)}
+              error={errors.organization?.message}
+            />
+          </div>
+        </div>
+        <div className="row mt-1">
+          <div className="col-md-6  text-start">
+            <Label htmlFor={"Designation"} required>Designation</Label>
+            <input
+              className="form-control form-control-sm"
+              {...register("designation")}
+              onChange={handleDesignationChange}
+            />
+            {showSuggestions && filteredDesignationList.length > 0 && (
+              <ul
+                className="list-group shadow-sm position-absolute bg-white border w-50 zindex-tooltip"
+                style={{
+                  maxHeight: "180px",
+                  overflowY: "auto",
+                  marginTop: "2px",
+                  zIndex: 1000,
+                  borderRadius: "0px",
+                }}
+              >
+                {filteredDesignationList.map((designation) => (
+                  <li
+                    key={designation}
+                    className="list-group-item list-group-item-action border-none "
+                    style={{
+                      cursor: "pointer",
+                      padding: "5px 12px",
+                      fontSize: "14px",
+                      transition: "background-color 0.2s",
+                    }}
+                    onMouseDown={() => handleSelectDesignation(designation)}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = "#f8f9fa")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = "transparent")
+                    }
+                  >
+                    {designation}
+                  </li>
+                ))}
+              </ul>
+            )}
+            {errors.designation && (
+              <small className="danger-text">
+                {errors.designation.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 ? (
+                      <i
+                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={handleAddEmail}
+                      />
+                    ) : (
+                      <i
+                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={() => removeEmail(index)}
+                      />
+                    )}
+                  </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 ? (
+                      <i
+                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
+                        onClick={handleAddPhone}
+                      />
+                    ) : (
+                      <i
+                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
+                        onClick={() => removePhone(index)}
+                      />
+                    )}
+                  </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 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} isRequired={true} />
+          {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 Bucket</label>
+
+            <ul className="d-flex flex-wrap px-1 list-unstyled  mb-0">
+              {bucketsLoaging && <p>Loading...</p>}
+              {buckets?.map((item) => (
+                <li
+                  key={item.id}
+                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                >
+                  <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="danger-text mt-0">
+                {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-end gap-3 py-2">
+          <button className="btn btn-sm btn-primary" type="submit">
+            {isPending ? "Please Wait..." : "Submit"}
+          </button>
+          <button
+            className="btn btn-sm btn-secondary"
+            type="button"
+            onClick={handleClosed}
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default ManageContact;

src/components/Directory/ManageDirectory.jsx

@@ -132,7 +132,6 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     setValue("designation", val);
   };
 
-
   const toggleBucketId = (id) => {
     const updated = watchBucketIds?.includes(id)
       ? watchBucketIds.filter((val) => val !== id)
@@ -277,23 +276,11 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                       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-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={handleAddEmail}
                       />
                     ) : (
-                      // <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-minus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={() => removeEmail(index)}
@@ -341,23 +328,11 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                       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-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={handleAddPhone}
                       />
                     ) : (
-                      // <button
-                      //   type="button"
-                      //   className="btn btn-xs btn-danger ms-1"
-                      //   onClick={() => removePhone(index)}
-                      //   style={{ width: "24px", height: "24px" }}
-                      // >
                       <i
                         className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
                         onClick={() => removePhone(index)}

src/components/common/TagInput.jsx

@@ -1,11 +1,13 @@
 import { useFormContext, useWatch } from "react-hook-form";
 import React, { useEffect, useState } from "react";
+import Label from "./Label";
 
 const TagInput = ({
   label = "Tags",
   name = "tags",
   placeholder = "Start typing to add... like employee, manager",
   color = "#e9ecef",
+  isRequired = false,
   options = [],
 }) => {
   const [tags, setTags] = useState([]);
@@ -14,7 +16,6 @@ const TagInput = ({
   const { setValue, trigger, control } = useFormContext();
   const watchedTags = useWatch({ control, name });
 
-
   useEffect(() => {
     if (
       Array.isArray(watchedTags) &&
@@ -80,7 +81,10 @@ useEffect(() => {
   const handleInputKey = (e) => {
     const key = e.key?.toLowerCase();
 
-  if ((key === "enter" || key === " " || e.code === "Space") && input.trim() !== "") {
+    if (
+      (key === "enter" || key === " " || e.code === "Space") &&
+      input.trim() !== ""
+    ) {
       e.preventDefault();
       const existing = options.find(
         (opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
@@ -93,12 +97,14 @@ useEffect(() => {
             description: input.trim(),
           };
       addTag(newTag);
-  } else if ((key === "backspace" || e.code === "Backspace") && input === "") {
+    } else if (
+      (key === "backspace" || e.code === "Backspace") &&
+      input === ""
+    ) {
       setTags((prev) => prev.slice(0, -1));
     }
   };
 
-
   const handleSuggestionClick = (suggestion) => {
     addTag(suggestion);
   };
@@ -108,9 +114,9 @@ useEffect(() => {
 
   return (
     <>
-      <label htmlFor={name} className="form-label">
+      <Label htmlFor={name} required={isRequired}>
         {label}
-      </label>
+      </Label>
 
       <div
         className="form-control form-control-sm p-1"
@@ -161,7 +167,9 @@ useEffect(() => {
               zIndex: 1000,
               maxHeight: "150px",
               overflowY: "auto",
-              boxShadow:"0px 4px 10px rgba(0, 0, 0, 0.2)",borderRadius:"3px",border:"1px solid #ddd"
+              boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
+              borderRadius: "3px",
+              border: "1px solid #ddd",
             }}
           >
             {suggestions.map((sugg, i) => (
@@ -170,7 +178,6 @@ useEffect(() => {
                 className="dropdown-item p-1 hoverBox"
                 onClick={() => handleSuggestionClick(sugg)}
                 style={{ cursor: "pointer", fontSize: "0.875rem" }}
-                
               >
                 {sugg.name}
               </li>

src/hooks/useDirectory.js

@@ -239,6 +239,49 @@ export const useDirectoryNotes = (
       ),
   });
 };
+const cleanFilter = (filter) => {
+  const cleaned = { ...filter };
+  ["bucketIds",  "categories"].forEach((key) => {
+    if (Array.isArray(cleaned[key]) && cleaned[key].length === 0) {
+      delete cleaned[key];
+    }
+  });
+  return cleaned;
+};
+
+export const useContactList = (
+  isActive,
+  projectId,
+  pageSize,
+  pageNumber,
+  filter,
+  searchString
+) => {
+  return useQuery({
+    queryKey: [
+      "contacts",
+      isActive,
+      projectId,
+      pageSize,
+      pageNumber,
+      JSON.stringify(filter),
+      searchString,
+    ],
+    queryFn: async () => {
+      const cleanedFilter = cleanFilter(filter);
+      const resp = await DirectoryRepository.GetContacts(
+        isActive,
+        projectId,
+        pageSize,
+        pageNumber,
+        cleanedFilter,
+        searchString
+      );
+      return resp.data; // returning only the data
+    },
+  });
+};
+
 
 // ---------------------------Mutation------------------------------------------------------------------
 
@@ -322,3 +365,42 @@ export const useDeleteBucket = (onSuccessCallBack) => {
   });
 };
 
+export const useCreateContact = ()=>{
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn:async(contactPayload) => await DirectoryRepository.CreateContact(contactPayload),
+    onSuccess: (_, variables) => {
+      // queryClient.invalidateQueries({queryKey: ["bucketList"]})
+      showToast("Contact created Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    }
+
+  })
+}
+
+
+export const useUpdateContact =()=>{
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn:async({conatctId,contactPayload})=> await DirectoryRepository.UpdateContact(conatctId,contactPayload),
+    onSuccess: (_, variables) => {
+      // queryClient.invalidateQueries({queryKey: ["bucketList"]})
+      showToast("Contact updated Successfully", "success");
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.response.data.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    }
+  })
+}

src/pages/Directory/ContactsPage.jsx

@@ -1,23 +1,24 @@
-import React, { useEffect } from 'react'
+import React, { useEffect } from "react";
-import { useFab } from '../../Context/FabContext';
+import { useFab } from "../../Context/FabContext";
+import { useContactList } from "../../hooks/useDirectory";
 
 const ContactsPage = () => {
-    const {setOffcanvasContent,setShowTrigger} = useFab()
+
+  const {data,isError,isLoading,error} = useContactList()
+  const { setOffcanvasContent, setShowTrigger } = useFab();
   useEffect(() => {
     setShowTrigger(true);
-        setOffcanvasContent(
+    setOffcanvasContent("Contacts Filters", <div>hlleo</div>);
-          "Contacts Filters",
-        <div>hlleo</div>
-        );
 
     return () => {
       setShowTrigger(false);
       setOffcanvasContent("", null);
     };
   }, []);
-  return (
-    <div>ContactsPage</div>
-  )
-}
 
-export default ContactsPage
+  if(isError) return <div>{error.message}</div>
+  if(isLoading) return <div>Loading...</div>
+  return <div className="container"></div>;
+};
+
+export default ContactsPage;

src/pages/Directory/Directory.jsx

@@ -41,7 +41,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
   // const [selectedOrgs, setSelectedOrgs] = useState([]);
 
-  // ✅ Changed to an array for multiple selections
   const [selectedNoteNames, setSelectedNoteNames] = useState([]);
 
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);

src/pages/Directory/DirectoryPage.jsx

@@ -12,6 +12,7 @@ import { useBucketList, useBuckets } from "../../hooks/useDirectory";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageBucket from "../../components/Directory/ManageBucket";
 import ManageBucket1 from "../../components/Directory/ManageBucket1";
+import ManageContact from "../../components/Directory/ManageContact";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -33,6 +34,7 @@ export default function DirectoryPage({ IsPage = true }) {
   const [activeTab, setActiveTab] = useState("notes");
   const { setActions } = useFab();
   const [isOpenBucket, setOpenBucket] = useState(false);
+  const [isManageContact,setManageContact] = useState(false)
 
   const { data, isLoading, isError, error } = useBucketList();
 
@@ -57,7 +59,7 @@ export default function DirectoryPage({ IsPage = true }) {
         label: "New Contact",
         icon: "bx bx-plus-circle",
         color: "warning",
-        // onClick: ()=>setOpenBucket(true),
+        onClick: ()=>setManageContact(true),
       });
     }
 
@@ -181,6 +183,12 @@ export default function DirectoryPage({ IsPage = true }) {
               <ManageBucket1 closeModal={() => setOpenBucket(false)} />
             </GlobalModel>
           )}
+
+          {isManageContact && (
+          <GlobalModel size="lg" isOpen={isManageContact} closeModal={()=>setManageContact(false)}>
+            <ManageContact closeModal={()=>setManageContact(false)}/>
+          </GlobalModel>
+          )}
         </div>
       </DirectoryContext.Provider>
     </>

src/repositories/DirectoryRepository.jsx

@@ -13,6 +13,18 @@ export const DirectoryRepository = {
 
     return api.get(`/api/Directory?${params.toString()}`);
   },
+
+  GetContact: (isActive, projectId, pageSize, pageNumber, filter, searchString) => {
+  const payloadJsonString = JSON.stringify(filter);
+  return api.get(
+    `/api/directory/notes?active=${isActive}` +
+    (projectId ? `&projectId=${projectId}` : "") +
+    `&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${encodeURIComponent(payloadJsonString)}&searchString=${encodeURIComponent(searchString)}`
+  );
+},
+
+
+  GetContactFilter:()=>api.get("directory/contact/filter"),
   CreateContact: (data) => api.post("/api/directory", data),
   UpdateContact: (id, data) => api.put(`/api/directory/${id}`, data),
   DeleteContact: (id, isActive) =>