Clicking on Contact Name in Notes Should Redirect to That Contact’s Detail Page in Directory (Web)

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -9,6 +9,7 @@ import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
 import "../common/TextEditor/Editor.css";
 import GlobalModel from "../common/GlobalModel";
 import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
+import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
 
 const NoteCardDirectoryEditable = ({
   noteItem,
@@ -22,14 +23,14 @@ const NoteCardDirectoryEditable = ({
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [open_contact, setOpen_contact] = useState(null);
-  const [isOpenModalNote, setIsOpenModalNote] = useState(false);
 
   const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
     setEditing(false)
   );
   const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
     useActiveInActiveNote(() => setIsDeleteModalOpen(false));
+  const { setContactOpen } = useDirectoryContext();
+
 
   const handleUpdateNote = async () => {
     const payload = {
@@ -45,12 +46,6 @@ const NoteCardDirectoryEditable = ({
     ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
   };
 
-  const contactProfile = (contactId) => {
-    DirectoryRepository.GetContactProfile(contactId).then((res) => {
-      setOpen_contact(res?.data);
-      setIsOpenModalNote(true);
-    });
-  };
 
   const handleRestore = async () => {
     try {
@@ -88,7 +83,9 @@ const NoteCardDirectoryEditable = ({
             <div>
               <div
                 className="d-flex ms-3 align-middle cursor-pointer"
-                onClick={() => contactProfile(noteItem.contactId)}
+                onClick={() =>
+                  setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
+                }
               >
                 <span>
                   <span className="fw-bold "> {noteItem?.contactName} </span>{" "}
@@ -97,6 +94,7 @@ const NoteCardDirectoryEditable = ({
                   </span>
                 </span>
               </div>
+
               <div className="d-flex ms-0 align-middle"></div>
               <div className="d-flex ms-3 mt-2">
                 <span className="text-muted">