src/components/Directory/NotesDirectory.jsx

@@ -4,7 +4,6 @@ import Avatar from "../common/Avatar";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { showText } from "pdf-lib";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import moment from "moment";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
@@ -19,15 +18,17 @@ const schema = z.object({
 const NotesDirectory = ({
   refetchProfile,
   isLoading,
-  contactProfile,
+  contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
   setProfileContact,
 }) => {
   const [IsActive, setIsActive] = useState(true);
-  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, true);
+  const { contactNotes, refetch } = useContactNotes(
+    contactProfile?.id,
+    IsActive
+  );
 
-  const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
-  const [addNote, setAddNote] = useState(true);
+  const [showEditor, setShowEditor] = useState(false);
   const {
     register,
     handleSubmit,
@@ -67,61 +68,72 @@ const NotesDirectory = ({
       ) {
         const updatedProfile = {
           ...cached_contactProfile.data,
-          notes: [...(cached_contactProfile.notes || []), createdNote],
+          notes: [...(cached_contactProfile.data.notes || []), createdNote],
         };
-        cacheData("Contact Profile", updatedProfile);
+        cacheData("Contact Profile", {
+          contactId: contactProfile?.id,
+          data: updatedProfile,
+        });
       }
 
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
-      setAddNote(true);
+      setShowEditor(false);
       setIsActive(true);
+      refetch(contactProfile?.id, true);
     } catch (error) {
       setIsSubmitting(false);
       const msg =
-        error.response.data.message ||
+        error.response?.data?.message ||
         error.message ||
-        "Error occured during API calling";
+        "Error occurred during API calling";
       showToast(msg, "error");
     }
   };
 
   const onCancel = () => {
-    setValue( "note", "" );
+    setValue("note", "");
+    setShowEditor(false);
+  };
 
-  };
   const handleSwitch = () => {
-    setIsActive(!IsActive);
+    setIsActive((prevIsActive) => {
-    if (IsActive) {
+      const newState = !prevIsActive;
-      refetch(contactProfile?.id, false);
+      refetch(contactProfile?.id, newState);
-    }
+      return newState;
+    });
   };
 
+  // Use the fullName from contactProfile, which now includes middle and last names if available
+  const contactName =
+    contactProfile?.fullName || contactProfile?.firstName || "Contact";
+  const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
+
+  const notesToDisplay = IsActive
+    ? contactProfile?.notes || []
+    : contactNotes || [];
+
   return (
-    <div className="text-start">
+    <div className="text-start mt-10">
       <div className="d-flex align-items-center justify-content-between">
-        <p className="fw-semibold m-0">Notes :</p>
+        <div className="row w-100 align-items-center">
+          <div className="col col-2">
+            <p className="fw-semibold m-0 ms-3">Notes :</p>
           </div>
-      <div className="d-flex align-items-center justify-content-between mb-5">
+          <div className="col d-flex justify-content-end gap-2 pe-0">
-  <div className="m-0 d-flex align-items-center">
+            {" "}
-    {contactNotes?.length > 0 ? (
+            <div className="d-flex align-items-center justify-content-between">
-      <label className="switch switch-primary">
+              <label
-        <input
+                className="switch switch-primary"
-          type="checkbox"
+                style={{
-          className="switch-input"
+                  visibility:
-          onChange={() => handleSwitch(!IsActive)}
+                    contactProfile?.notes?.length > 0 ||
-          value={IsActive}
+                    contactNotes?.length > 0
-        />
+                      ? "visible"
-        <span className="switch-toggle-slider">
+                      : "hidden",
-          <span className="switch-on"></span>
+                }}
-          <span className="switch-off"></span>
+              >
-        </span>
-        <span className="switch-label">Include Deleted Notes</span>
-      </label>
-    ) : (
-      <div style={{ visibility: "hidden" }}>
-        <label className="switch switch-primary">
                 <input type="checkbox" className="switch-input" />
                 <span className="switch-toggle-slider">
                   <span className="switch-on"></span>
@@ -129,40 +141,43 @@ const NotesDirectory = ({
                 </span>
                 <span className="switch-label">Include Deleted Notes</span>
               </label>
+
+              {!showEditor && (
+                <div className="d-flex justify-content-end">
+                  <button
+                    type="button"
+                    className="btn btn-sm d-flex align-items-center"
+                    onClick={() => setShowEditor(true)}
+                    style={{
+                      color: "#6c757d",
+                      backgroundColor: "transparent",
+                      boxShadow: "none",
+                      border: "none",
+                    }}
+                  >
+                    <i
+                      className="bx bx-plus-circle me-0 text-primary"
+                      style={{ fontSize: "1.5rem", color: "#6c757d" }}
+                    ></i>
+                    Add a Note
+                  </button>
                 </div>
               )}
             </div>
-
-  <div className="d-flex justify-content-end">
-    <span
-       className={`btn btn-sm ${addNote ? "btn-secondary" : "btn-primary"}`}
-      onClick={() => setAddNote(!addNote)}
-    >
-      {addNote ? "Hide Editor" : "Add a Note"}
-    </span>
           </div>
-</div>
+        </div>
+      </div>
 
-
+      {showEditor && (
-      {addNote && (
+        <div className="card m-2 mb-5 position-relative">
-        <div className="card m-2 mb-5">
-          <button
-            type="button"
-            class="btn  btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
-            aria-label="Close"
-            style={{ backgroundColor: "#eee", color: "white" }}
-            onClick={() => setAddNote(!addNote)}
-          ></button>
-          {/* <div className="d-flex justify-content-end px-2">
           <span
-              className={`btn btn-sm   ${
+            type="button"
-                addNote ? "btn-danger" : "btn-primary"
+            className="position-absolute top-0 end-0  mt-3 bg-secondary rounded-circle"
-              }`}
+            aria-label="Close"
-              onClick={() => setAddNote(!addNote)}
+            onClick={() => setShowEditor(false)}
           >
-              {addNote ? "Hide Editor" : "Add Note"}
+            <i className="bx bx-x fs-5  p-1 text-white"></i>
           </span>
-          </div> */}
           <form onSubmit={handleSubmit(onSubmit)}>
             <Editor
               value={noteValue}
@@ -171,7 +186,7 @@ const NotesDirectory = ({
               onCancel={onCancel}
               onSubmit={handleSubmit(onSubmit)}
             />
-            {errors.notes && (
+            {errors.note && (
               <p className="text-danger small mt-1">{errors.note.message}</p>
             )}
           </form>
@@ -185,8 +200,9 @@ const NotesDirectory = ({
             <p>Loading...</p>{" "}
           </div>
         )}
-        {!isLoading &&
+        {!isLoading && notesToDisplay.length > 0
-          [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
+          ? notesToDisplay
+              .slice()
               .reverse()
               .map((noteItem) => (
                 <NoteCardDirectory
@@ -198,21 +214,10 @@ const NotesDirectory = ({
                   setProfileContact={setProfileContact}
                   key={noteItem.id}
                 />
-            ))}
+              ))
-
+          : !isLoading &&
-        {IsActive && (
+            !showEditor && (
-          <div>
+              <div className="text-center mt-5">{noNotesMessage}</div>
-            {!isLoading && contactProfile?.notes.length == 0 && !addNote && (
-              <div className="text-center mt-5">No Notes Found</div>
-            )}
-          </div>
-        )}
-        {!IsActive && (
-          <div>
-            {!isLoading && contactNotes.length == 0 && !addNote && (
-              <div className="text-center  mt-5">No Notes Found</div>
-            )}
-          </div>
             )}
       </div>
     </div>

src/components/Directory/ProfileContactDirectory.jsx

@@ -8,9 +8,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const { contactProfile, loading, refetch } = useContactProfile(contact?.id);
   const [copiedIndex, setCopiedIndex] = useState(null);
 
-  const [profileContact, setProfileContact] = useState();
+  const [profileContactState, setProfileContactState] = useState(null);
   const [expanded, setExpanded] = useState(false);
-  const description = contactProfile?.description || "";
+
+  const description = profileContactState?.description || "";
   const limit = 500;
 
   const toggleReadMore = () => setExpanded(!expanded);
@@ -19,14 +20,51 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const displayText = expanded
     ? description
     : description.slice(0, limit) + (isLong ? "..." : "");
+
   useEffect(() => {
-    setProfileContact(contactProfile);
+    if (contactProfile) {
-  }, [contactProfile]);
+      const names = (contact?.name || "").trim().split(" ");
+      let firstName = "";
+      let middleName = "";
+      let lastName = "";
+      let fullName = contact?.name || "";
+
+      // Logic to determine first, middle, and last names
+      if (names.length === 1) {
+        firstName = names[0];
+      } else if (names.length === 2) {
+        firstName = names[0];
+        lastName = names[1];
+      } else if (names.length >= 3) {
+        firstName = names[0];
+        middleName = names[1]; // This was an error in the original prompt, corrected to names[1]
+        lastName = names[names.length - 1];
+        // Reconstruct full name to be precise with spacing
+        fullName = `${firstName} ${middleName ? middleName + ' ' : ''}${lastName}`;
+      } else {
+        // Fallback if no names or empty string
+        firstName = "Contact";
+        fullName = "Contact";
+      }
+
+
+      setProfileContactState({
+        ...contactProfile,
+        firstName: contactProfile.firstName || firstName,
+        // Adding middleName and lastName to the state for potential future use or more granular access
+        middleName: contactProfile.middleName || middleName,
+        lastName: contactProfile.lastName || lastName,
+        fullName: contactProfile.fullName || fullName, // Prioritize fetched fullName, fallback to derived
+      });
+    }
+  }, [contactProfile, contact?.name]);
+
   const handleCopy = (email, index) => {
     navigator.clipboard.writeText(email);
     setCopiedIndex(index);
-    setTimeout(() => setCopiedIndex(null), 2000); // Reset after 2 seconds
+    setTimeout(() => setCopiedIndex(null), 2000);
   };
+
   return (
     <div className="p-1">
       <div className="text-center m-0 p-0">
@@ -47,31 +85,34 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           <div className="d-flex flex-column text-start ms-1">
             <span className="m-0 fw-semibold">{contact?.name}</span>
             <small className="text-secondary small-text">
-              {/* {contactProfile?.tags?.map((tag) => tag.name).join(" | ")} */}
+              {profileContactState?.designation}
-              {contactProfile?.designation}
             </small>
           </div>
         </div>
-        <div className="row">
+        <div className="row ms-9">
           <div className="col-12 col-md-6 d-flex flex-column text-start">
-            {contactProfile?.contactEmails?.length > 0 && (
+            {profileContactState?.contactEmails?.length > 0 && (
-              <div className="d-flex mb-2">
+              <div className="d-flex mb-2 align-items-start">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div
-                  <p className="m-0">Email:</p>
+                  className="d-flex align-items-start"
+                  style={{ width: "100px", minWidth: "130px" }}
+                >
+                  <span className="d-flex">
+                    <i className="bx bx-envelope bx-xs me-2 mt-1"></i>
+                    <span>Email</span>
+                  </span>
+                  <span style={{ marginLeft: "45px" }}>:</span>
                 </div>
+
                 <div style={{ flex: 1 }}>
                   <ul className="list-unstyled mb-0">
-                    {contactProfile.contactEmails.map((email, idx) => (
+                    {profileContactState.contactEmails.map((email, idx) => (
                       <li className="d-flex align-items-center mb-1" key={idx}>
-                        <i className="bx bx-envelope bx-xs me-1 mt-1"></i>
+                        <span className="me-1 text-break overflow-wrap">
-                        <span className="me-1 flex-grow text-break overflow-wrap">
                           {email.emailAddress}
                         </span>
                         <i
-                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
+                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx ? "text-secondary" : "text-primary"
-                            copiedIndex === idx
-                              ? "text-secondary"
-                              : "text-primary"
                             }`}
                           title={copiedIndex === idx ? "Copied!" : "Copy Email"}
                           style={{ flexShrink: 0 }}
@@ -84,17 +125,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
 
-            {contactProfile?.contactPhones?.length > 0 && (
+            {profileContactState?.contactPhones?.length > 0 && (
-              <div className="d-flex mb-2">
+              <div className="d-flex mb-2 align-items-start">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div className="d-flex" style={{ minWidth: "130px" }}>
-                  <p className="m-0">Phone : </p>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-phone bx-xs me-2"></i>
+                    <span>Phone</span>
+                  </span>
+                  <span style={{ marginLeft: "40px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
-                    {contactProfile?.contactPhones.map((phone, idx) => (
+                    {profileContactState.contactPhones.map((phone, idx) => (
-                      <li className="list-inline-item me-3" key={idx}>
+                      <li className="list-inline-item me-1" key={idx}>
-                        <i className="bx bx-phone bx-xs me-1"></i>
                         {phone.phoneNumber}
+                        {idx < profileContactState.contactPhones.length - 1 && ","}
                       </li>
                     ))}
                   </ul>
@@ -102,74 +148,93 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
 
-            {contactProfile?.createdAt && (
+            {profileContactState?.createdAt && (
-              <div className="d-flex  mb-2">
+              <div className="d-flex mb-2 align-items-start">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div className="d-flex" style={{ minWidth: "130px" }}>
-                  <p className="m-0">Created : </p>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-calendar-week bx-xs me-2"></i>
+                    <span>Created</span>
+                  </span>
+                  <span style={{ marginLeft: "30px" }}>:</span>
                 </div>
+
                 <div className="d-flex align-items-center">
-                  <li className="list-inline-item">
+                  <span>
-                    <i className="bx bx-calendar-week bx-xs me-1"></i>
+                    {moment(profileContactState.createdAt).format("MMMM DD, YYYY")}
-                    {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
+                  </span>
-                  </li>
                 </div>
               </div>
             )}
-            {contactProfile?.address && (
+
-              <div className="d-flex mb-2">
+            {profileContactState?.address && (
-                <div style={{ width: "100px", minWidth: "100px" }}>
+              <div className="d-flex mb-2 align-items-start">
-                  <p className="m-0">Location:</p>
+                <div className="d-flex" style={{ minWidth: "130px" }}>
-                </div>
+                  <span className="d-flex align-items-start">
-                <div className="d-flex align-items-center">
+                    <i className="bx bx-map bx-xs me-2 mt-1"></i>
-                  <i className="bx bx-map bx-xs me-1 "></i>
+                    <span>Location</span>
-                  <span className="text-break small">
-                    {contactProfile.address}
                   </span>
+                  <span style={{ marginLeft: "26px" }}>:</span>
+                </div>
+                <div>
+                  <span className="text-break small">{profileContactState.address}</span>
                 </div>
               </div>
             )}
           </div>
 
           <div className="col-12 col-md-6 d-flex flex-column text-start">
-            {contactProfile?.organization && (
+            {profileContactState?.organization && (
-              <div className="d-flex mb-2">
+              <div className="d-flex mb-2 align-items-start">
-                <div style={{ width: "100px", minWidth: "100px" }}>
+                <div className="d-flex" style={{ minWidth: "130px" }}>
-                  <p className="m-0">Orgnization : </p>
+                  <span className="d-flex align-items-center">
-                </div>
-                <div className="d-flex align-items-center">
                     <i className="fa-solid fa-briefcase me-2"></i>
+                    <span>Organization</span>
+                  </span>
+                  <span className="ms-2">:</span>
+                </div>
 
+                <div className="d-flex align-items-center">
                   <span style={{ wordBreak: "break-word" }}>
-                    {contactProfile.organization}
+                    {profileContactState.organization}
                   </span>
                 </div>
               </div>
             )}
-            {contactProfile?.contactCategory && (
+
-              <div className="d-flex mb-2">
+            {profileContactState?.contactCategory && (
-                <div style={{ width: "100px", minWidth: "100px" }}>
+              <div className="d-flex mb-2 align-items-start">
-                  <p className="m-0">Category : </p>
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-user bx-xs me-2"></i>
+                    <span>Category</span>
+                  </span>
+                  <span style={{ marginLeft: "28px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
                     <li className="list-inline-item">
-                      <i className="bx bx-user bx-xs me-1"></i>
+                      {profileContactState.contactCategory.name}
-                      {contactProfile.contactCategory.name}
                     </li>
                   </ul>
                 </div>
               </div>
             )}
-             {contactProfile?.tags?.length > 0 && (
+
-              <div className="d-flex mb-2">
+            {profileContactState?.tags?.length > 0 && (
-                <div style={{ width: "100px", minWidth: "100px" }}>
+              <div className="d-flex mb-2 align-items-start">
-                  <p className="m-0">Tags : </p>
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="fa-solid fa-tag me-2"></i>
+                    <span>Tags</span>
+                  </span>
+                  <span style={{ marginLeft: "60px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
-                    {contactProfile.tags.map((tag, index) => (
+                    {profileContactState.tags.map((tag, index) => (
                       <li key={index} className="list-inline-item">
-                        <i className="fa-solid fa-tag  me-1"></i>
                         {tag.name}
                       </li>
                     ))}
@@ -178,16 +243,19 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
 
-            {contactProfile?.buckets?.length > 0 && (
+            {profileContactState?.buckets?.length > 0 && (
-              <div className="d-flex ">
+              <div className="d-flex mb-2 align-items-start">
-                {contactProfile?.contactEmails?.length > 0 && (
+                <div className="d-flex" style={{ minWidth: "130px" }}>
-                  <div className="d-flex mb-2 align-items-center">
+                  <span className="d-flex align-items-center">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
+                    <i className="bx bx-layer me-1"></i>
-                      <p className="m-0">Buckets : </p>
+                    <span>Buckets</span>
+                  </span>
+                  <span style={{ marginLeft: "35px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
-                        {contactProfile.buckets.map((bucket) => (
+                    {profileContactState.buckets.map((bucket) => (
                       <li className="list-inline-item me-2" key={bucket.id}>
                         <span className="badge bg-label-primary my-1">
                           {bucket.name}
@@ -199,50 +267,63 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
           </div>
-            )}
+
-          </div>
+          {profileContactState?.projects?.length > 0 && (
-        </div>
-        {contactProfile?.projects?.length > 0 && (
             <div className="d-flex mb-2 align-items-start">
-            <div style={{ minWidth: "100px" }}>
+              <div className="d-flex" style={{ minWidth: "130px" }}>
-              <p className="m-0 text-start">Projects :</p>
+                <span className="d-flex align-items-center">
+                  <i className="bx bx-building-house me-1"></i>
+                  <span>Projects</span>
+                </span>
+                <span style={{ marginLeft: "28px" }}>:</span>
               </div>
+
               <div className="text-start">
                 <ul className="list-inline mb-0">
-                {contactProfile.projects.map((project, index) => (
+                  {profileContactState.projects.map((project, index) => (
                     <li className="list-inline-item me-2" key={project.id}>
                       {project.name}
-                    {index < contactProfile.projects.length - 1 && ","}
+                      {index < profileContactState.projects.length - 1 && ","}
                     </li>
                   ))}
                 </ul>
               </div>
             </div>
           )}
-
-        <div className="d-flex mb-2 align-items-start">
-          <div style={{ minWidth: "100px" }}>
-            <p className="m-0 text-start">Description :</p>
         </div>
+
+        <div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
+          <div className="d-flex" style={{ minWidth: "130px" }}>
+            <span className="d-flex align-items-start">
+              <i className="bx bx-book me-1"></i>
+              <span>Description</span>
+            </span>
+            <span style={{ marginLeft: "10px" }}>:</span>
+          </div>
+
           <div className="text-start">
             {displayText}
             {isLong && (
+              <>
+                <br />
                 <span
                   onClick={toggleReadMore}
                   className="text-primary mx-1 cursor-pointer"
                 >
                   {expanded ? "Read less" : "Read more"}
                 </span>
+              </>
             )}
           </div>
         </div>
 
+
         <hr className="my-1" />
         <NotesDirectory
           refetchProfile={refetch}
           isLoading={loading}
-          contactProfile={profileContact}
+          contactProfile={profileContactState}
-          setProfileContact={setProfileContact}
+          setProfileContact={setProfileContactState}
         />
       </div>
     </div>