From 3993dcfc4e588945281dcdb4c5d74324191fb00a Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Sat, 26 Jul 2025 11:23:12 +0530
Subject: [PATCH] Add GUI improvements in directory notes

---
 src/components/Directory/NotesDirectory.jsx | 155 ++++++++++----------
 1 file changed, 78 insertions(+), 77 deletions(-)

diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index f310bfcc..2ba497d5 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -22,7 +22,10 @@ const NotesDirectory = ({
   setProfileContact,
 }) => {
   const [IsActive, setIsActive] = useState(true);
-  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
+  const { contactNotes, refetch } = useContactNotes(
+    contactProfile?.id,
+    IsActive
+  );
 
   const [IsSubmitting, setIsSubmitting] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
@@ -67,7 +70,10 @@ const NotesDirectory = ({
           ...cached_contactProfile.data,
           notes: [...(cached_contactProfile.data.notes || []), createdNote],
         };
-        cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
+        cacheData("Contact Profile", {
+          contactId: contactProfile?.id,
+          data: updatedProfile,
+        });
       }
 
       setValue("note", "");
@@ -100,36 +106,34 @@ const NotesDirectory = ({
   };
 
   // Use the fullName from contactProfile, which now includes middle and last names if available
-  const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
+  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 || []);
+  const notesToDisplay = IsActive
+    ? contactProfile?.notes || []
+    : contactNotes || [];
 
   return (
     <div className="text-start mt-10">
       <div className="d-flex align-items-center justify-content-between">
-        <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="m-0 d-flex align-items-center">
-          {(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
-            <label className="switch switch-primary">
-              <input
-                type="checkbox"
-                className="switch-input"
-                onChange={handleSwitch}
-                checked={!IsActive}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">Include Deleted Notes</span>
-            </label>
-          )}
-          {!(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
-            <div style={{ visibility: "hidden" }}>
-              <label className="switch switch-primary">
+        <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="col d-flex justify-content-end gap-2 pe-0">
+            {" "}
+            <div className="d-flex align-items-center justify-content-between">
+              <label
+                className="switch switch-primary"
+                style={{
+                  visibility:
+                    contactProfile?.notes?.length > 0 ||
+                    contactNotes?.length > 0
+                      ? "visible"
+                      : "hidden",
+                }}
+              >
                 <input type="checkbox" className="switch-input" />
                 <span className="switch-toggle-slider">
                   <span className="switch-on"></span>
@@ -137,43 +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>
-
-        {!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"
-                style={{ fontSize: "1.5rem", color: "#6c757d" }}
-              ></i>
-              Add a Note
-            </button>
           </div>
-        )}
-
+        </div>
       </div>
 
       {showEditor && (
         <div className="card m-2 mb-5 position-relative">
-          <button
+          <span
             type="button"
-            className="btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
+            className="position-absolute top-0 end-0  mt-3 bg-secondary rounded-circle"
             aria-label="Close"
-            style={{ backgroundColor: "#eee", color: "white" }}
             onClick={() => setShowEditor(false)}
-          ></button>
+          >
+            <i className="bx bx-x fs-5  p-1 text-white"></i>
+          </span>
           <form onSubmit={handleSubmit(onSubmit)}>
             <Editor
               value={noteValue}
@@ -196,31 +200,28 @@ const NotesDirectory = ({
             <p>Loading...</p>{" "}
           </div>
         )}
-        {!isLoading && notesToDisplay.length > 0 ? (
-          notesToDisplay
-            .slice()
-            .reverse()
-            .map((noteItem) => (
-              <NoteCardDirectory
-                refetchProfile={refetchProfile}
-                refetchNotes={refetch}
-                refetchContact={refetch}
-                noteItem={noteItem}
-                contactId={contactProfile?.id}
-                setProfileContact={setProfileContact}
-                key={noteItem.id}
-              />
-            ))
-        ) : (
-          !isLoading && !showEditor && (
-            <div className="text-center mt-5">
-              {noNotesMessage}
-            </div>
-          )
-        )}
+        {!isLoading && notesToDisplay.length > 0
+          ? notesToDisplay
+              .slice()
+              .reverse()
+              .map((noteItem) => (
+                <NoteCardDirectory
+                  refetchProfile={refetchProfile}
+                  refetchNotes={refetch}
+                  refetchContact={refetch}
+                  noteItem={noteItem}
+                  contactId={contactProfile?.id}
+                  setProfileContact={setProfileContact}
+                  key={noteItem.id}
+                />
+              ))
+          : !isLoading &&
+            !showEditor && (
+              <div className="text-center mt-5">{noNotesMessage}</div>
+            )}
       </div>
     </div>
   );
 };
 
-export default NotesDirectory;
\ No newline at end of file
+export default NotesDirectory;