src/components/Directory/NoteCardDirectory.jsx

@@ -4,109 +4,43 @@ import moment from "moment";
 import Avatar from "../common/Avatar";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import showToast from "../../services/toastService";
-import { cacheData, getCachedData } from "../../slices/apiDataManager";
-import "../common/TextEditor/Editor.css";
+import {getCachedData} from "../../slices/apiDataManager";
+import "../common/TextEditor/Editor.css"
 
-const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
+const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
   const [editing, setEditing] = useState(false);
-  const [editorValue, setEditorValue] = useState(noteItem.note);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const handleUpdateNote = async () => {
-    try {
-      setIsLoading(true);
-      const payload = {
-        id: noteItem.id,
-        note: editorValue,
-        contactId: contactId,
-      };
+  const [ editorValue, setEditorValue ] = useState( noteItem.note );
+  const [isLoading,setIsLoading] = useState(false)
+  const handleUpdateNote= async () => {
+    try
+    {
+      console.log(editorValue)
+      setIsLoading(true)
+   const payload ={id:noteItem.id,note:editorValue,contactId:contactId}
+      
+      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
+    setProfileContact((prev) => ({
+      ...prev,
+      notes: prev.notes.map((note) =>
+        note.id === noteItem.id ? response?.data : note
+      ),
 
-      const response = await DirectoryRepository.UpdateNote(
-        noteItem.id,
-        payload
-      );
-      setProfileContact((prev) => ({
-        ...prev,
-        notes: prev.notes.map((note) =>
-          note.id === noteItem.id ? response?.data : note
-        ),
-      }));
-
-      const cached_contactProfile = getCachedData("Contact Profile");
-
-      if (
-        cached_contactProfile &&
-        cached_contactProfile.contactId === contactId
-      ) {
-        const updatedProfile = {
-          ...cached_contactProfile,
-          data: {
-            ...cached_contactProfile?.data,
-            notes: cached_contactProfile?.data?.notes.map((note) =>
-              note.id === noteItem.id ? response?.data : note
-            ),
-          },
-        };
-        cacheData("Contact Profile", updatedProfile);
-      }
-      setEditing(false);
-      setIsLoading(false);
-      showToast("Note Updated successfully", "success");
-    } catch (error) {
-      setIsLoading(false);
-      const msg =
-        error.reponse.data.message ||
-        error.message ||
-        "Error occured during API calling.";
-      showToast("Failed to update note", "error");
+    }));
+      setEditing( false );
+      setIsLoading(false)
+      showToast("Note Updated successfully", "success")
+    } catch ( error )
+    {
+      setIsLoading(false)
+      const msg = error.reponse.data.message || error.message || "Error occured during API calling."
+           showToast("Failed to update note", "error");
     }
   };
 
-  const handleDeleteNote = async () => {
-    try {
-      setIsDeleting(true);
-      const resp = await DirectoryRepository.DeleteNote(noteItem.id);
-      setProfileContact((prev) => ({
-        ...prev,
-        notes: prev.notes.filter((note) => note.id !== noteItem.id),
-      }));
 
-      const cachedContactProfile = getCachedData("Contact Profile");
-
-      if (
-        cachedContactProfile &&
-        cachedContactProfile.contactId === contactId
-      ) {
-        const updatedCache = {
-          ...cachedContactProfile,
-          data: {
-            ...cachedContactProfile?.data,
-            notes: (cachedContactProfile?.data?.notes || []).filter(
-              (note) => note.id !== noteItem.id
-            ),
-          },
-        };
-
-        cacheData("Contact Profile", updatedCache);
-      }
-      setIsDeleting(false);
-      showToast("Note Deleted Successfully", "success");
-    } catch (error) {
-      setIsDeleting(false);
-      const msg =
-        error.response?.data?.message ||
-        error.message ||
-        "Error occured during API calling";
-      showToast(msg, "error");
-    }
-  };
 
   return (
-    <div
-      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
-      style={{ width: "100%", minWidth: "300px", borderRadius: "0px" }}
-      key={noteItem.id}
-    >
+    <div className="card p-1 shadow-sm border-1 mb-2" style={{ width: "fit-content", minWidth: "300px", borderRadius:"0px" }} key={noteItem.id} >
       <div className="d-flex justify-content-between align-items-center mb-1">
         <div className="d-flex align-items-center">
           <Avatar
@@ -124,25 +58,38 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
             </span>
           </div>
         </div>
-        <div>
+
+        <div className="dropdown">
           <i
-            className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
-            onClick={() => setEditing(true)}
+            className="bx bx-dots-vertical bx-xs cursor-pointer"
+            role="button"
+            id={`dropdownMenuIcon-${noteItem.id}`}
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
           ></i>
-          {!isDeleting && (
-            <i
-              className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
-              onClick={handleDeleteNote}
-            ></i>
-          )}
-          {isDeleting && (
-            <div
-              class="spinner-border spinner-border-sm text-secondary"
-              role="status"
-            >
-              <span class="visually-hidden">Loading...</span>
-            </div>
-          )}
+
+          <ul
+            className="dropdown-menu dropdown-menu-end p-1"
+            aria-labelledby={`dropdownMenuIcon-${noteItem.id}`}
+            style={{ minWidth: "120px", fontSize: "0.85rem" }}
+          >
+            <li>
+              <button
+                className="dropdown-item py-1 px-2 small text-primary"
+                onClick={() => setEditing(true)}
+              >
+                <i className="bx bxs-edit bx-sm me-1"></i> Edit
+              </button>
+            </li>
+            <li>
+              <button
+                className="dropdown-item py-1 px-2 text-danger small"
+                onClick={()=>{}}
+              >
+                <i className="bx bx-trash bx-sm me-1"></i> Delete
+              </button>
+            </li>
+          </ul>
         </div>
       </div>
 
@@ -155,21 +102,14 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
             onChange={setEditorValue}
             theme="snow"
             className="compact-editor"
+       
           />
           <div className="d-flex justify-content-end gap-2">
-            <span
-              className="text-secondary cursor-pointer"
-              aria-disabled={isLoading}
-              onClick={() => setEditing(false)}
-            >
+            <span className="text-secondary cursor-pointer" aria-disabled={isLoading}  onClick={() => setEditing(false)}>
               Cancel
             </span>
-            <span
-              className="text-primary cursor-pointer"
-              aria-disabled={isLoading}
-              onClick={handleUpdateNote}
-            >
-              {isLoading ? "Please Wait..." : "Submit"}
+            <span className="text-primary cursor-pointer" aria-disabled={isLoading}  onClick={handleUpdateNote}>
+             {isLoading ? "Please Wait...":"Submit"}
             </span>
           </div>
         </>

src/components/Directory/NotesDirectory.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import Editor from "../common/TextEditor/Editor";
 import Avatar from "../common/Avatar";
 import { useForm } from "react-hook-form";
@@ -7,7 +7,7 @@ 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";
+import {getCachedData} from "../../slices/apiDataManager";
 import NoteCardDirectory from "./NoteCardDirectory";
 import showToast from "../../services/toastService";
 
@@ -15,10 +15,10 @@ const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
-  const [NotesData, setNotesData] = useState();
-  const [IsSubmitting, setIsSubmitting] = useState(false);
-  const [addNote, setAddNote] = useState(false);
+const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
+{
+  const [ NotesData, setNotesData ] = useState()
+  const[IsSubmitting,setIsSubmitting] = useState(false)
   const {
     register,
     handleSubmit,
@@ -40,35 +40,27 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
 
   const onSubmit = async (data) => {
     const newNote = { ...data, contactId: contactProfile?.id };
-    try {
-      setIsSubmitting(true);
-      const response = await DirectoryRepository.CreateNote(newNote);
+    try
+    {
+      setIsSubmitting(true)
+        const response = await DirectoryRepository.CreateNote( newNote );
 
-      const createdNote = response.data;
+         const createdNote = response.data; 
 
       setProfileContact((prev) => ({
         ...prev,
         notes: [...(prev.notes || []), createdNote],
       }));
 
-      const cached_contactProfile = getCachedData("Contact Profile");
-      if (
-        cached_contactProfile &&
-        cached_contactProfile.contactId === contactProfile?.id
-      ) {
-        const updatedProfile = {
-          ...cached_contactProfile.data,
-          notes: [...(cached_contactProfile.notes || []), createdNote],
-        };
-        cacheData("Contact Profile", updatedProfile);
-      }
-
       setValue("note", "");
-      setIsSubmitting(false);
-      showToast("Note added successfully!", "success");
-      setAddNote(false);
-    } catch (error) {
-      setIsSubmitting(false);
+        const result = response.data
+        const cache_notes = getCachedData( "Contact Note" )
+      
+  setIsSubmitting(false)
+            showToast("Note added successfully!", "success")
+    } catch ( error )
+    {
+      setIsSubmitting(false)
       const msg =
         error.response.data.message ||
         error.message ||
@@ -83,63 +75,26 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
 
   return (
     <div className="text-start">
-      <div
-        className={`${
-          contactProfile?.notes?.length > 0
-            ? "d-flex justify-content-between"
-            : "d-flex justify-content-end"
-        }`}
-      >
-        {contactProfile?.notes.length > 0 && (
-          <p className="fw-semibold m-0">Notes :</p>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Editor
+          value={noteValue}
+          loading={IsSubmitting}
+          onChange={handleEditorChange}
+          onCancel={onCancel}
+          onSubmit={handleSubmit(onSubmit)}
+        />
+        {errors.notes && (
+          <p className="text-danger small mt-1">{errors.note.message}</p>
         )}
-        <a
-          className="small-text m-0 cursor-pointer"
-          onClick={() => setAddNote(!addNote)}
-        >
-          <u>
-            {addNote ? "" : "Add Note"}
-            <i
-              className={`bx  ${addNote ? "bx-x" : "bx-pencil"} bx-xs`}
-            ></i>{" "}
-          </u>{" "}
-        </a>
-      </div>
-      {addNote && (
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Editor
-            value={noteValue}
-            loading={IsSubmitting}
-            onChange={handleEditorChange}
-            onCancel={onCancel}
-            onSubmit={handleSubmit(onSubmit)}
-          />
-          {errors.notes && (
-            <p className="text-danger small mt-1">{errors.note.message}</p>
-          )}
-        </form>
-      )}
+      </form>
       <div
         className=" justify-content-start overflow-auto px-1"
-        style={{ maxHeight: "300px" }}
+        style={{ maxHeight: "300px", minHeight: "100px" }}
       >
-        {isLoading && (
-          <div className="text-center">
-            {" "}
-            <p>Loading...</p>{" "}
-          </div>
-        )}
-        {!isLoading &&
-          [...(contactProfile?.notes || [])]
-            .reverse()
-            .map((noteItem) => (
-              <NoteCardDirectory
-                noteItem={noteItem}
-                contactId={contactProfile?.id}
-                setProfileContact={setProfileContact}
-                key={noteItem.id}
-              />
-            ))}
+        {isLoading && <div className="text-center"> <p>Loading...</p> </div>}
+        {!isLoading && contactProfile?.notes?.map((noteItem) => (
+          <NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id}  />
+        ))}
       </div>
     </div>
   );

src/components/Directory/ProfileContactDirectory.jsx

@@ -5,7 +5,7 @@ import moment from "moment";
 import NotesDirectory from "./NotesDirectory";
 
 const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
-  const { conatProfile, loading } = useContactProfile(contact?.id);
+  const { conatProfile ,loading} = useContactProfile(contact?.id);
   const [activeTab, setActiveTab] = useState("profile");
   const [profileContact, setProfileContact] = useState();
 
@@ -14,7 +14,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   }, [conatProfile]);
   return (
     <div className="p-1">
-      <div className="text-center m-0 p-0">
+      <div className="text-center m-0 p-0">     
         <p className="fw-semibold fs-6 m-0">Contact Profile</p>
       </div>
       <div>
@@ -36,65 +36,106 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             </span>
           </div>
         </div>
-        <div className="d-flex flex-column text-start">
-          {conatProfile?.contactEmails?.length > 0 && (
-            <div className="d-flex mb-2">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Email</p>
-              </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  {conatProfile.contactEmails.map((email, idx) => (
-                    <li className="list-inline-item me-3" key={idx}>
-                      <i className="bx bx-envelope bx-xs me-1"></i>
-                      {email.emailAddress}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          )}
-          {conatProfile?.contactPhones?.length > 0 && (
-            <div className="d-flex mb-2">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Phone</p>
-              </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  {conatProfile.contactPhones.map((phone, idx) => (
-                    <li className="list-inline-item me-3" key={idx}>
-                      <i className="bx bx-phone bx-xs me-1"></i>
-                      {phone.phoneNumber}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          )}
 
-          {conatProfile?.createdAt && (
-            <div className="d-flex mb-2">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Created</p>
-              </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  <li className="list-inline-item">
-                    <i className="bx bx-calendar-week bx-xs me-1"></i>
-                    {moment(conatProfile.createdAt).format("MMMM, DD YYYY")}
-                  </li>
-                </ul>
+        <hr className="my-1" />
+
+        {/* Tabs */}
+
+        {loading && <div className="text-center"> <p>Loading...</p> </div>}
+        {!loading && (
+          <ul className="nav nav-tabs mb-1 p0">
+          <li className="nav-item">
+            <button
+              className={`nav-link p-1 me-2 ${
+                activeTab === "profile" ? "active" : ""
+              }`}
+              onClick={() => setActiveTab("profile")}
+            >
+              Profile
+            </button>
+          </li>
+          <li className="nav-item ">
+            <button
+              className={`nav-link text-start p-1 ${
+                activeTab === "notes" ? "active" : ""
+              }`}
+              onClick={() => setActiveTab("notes")}
+            >
+            Notes<i className="bx  bx-pencil bx-xs"></i>
+            </button>
+          </li>
+          
+        </ul>
+        )}
+
+        {/* Tab Content */}
+        <div>
+          {activeTab === "notes" && (
+            <NotesDirectory
+              isLoading={loading}
+              contactProfile={profileContact}
+              setProfileContact={setProfileContact}
+            />
+          )}
+          {activeTab === "profile" && (
+            <div>
+              <div className="d-flex flex-column text-start">
+                {conatProfile?.contactEmails?.length > 0 && (
+                  <div className="d-flex mb-2">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Email</p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        {conatProfile.contactEmails.map((email, idx) => (
+                          <li className="list-inline-item me-3" key={idx}>
+                            <i className="bx bx-envelope bx-xs me-1"></i>
+                            {email.emailAddress}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+                {conatProfile?.contactPhones?.length > 0 && (
+                  <div className="d-flex mb-2">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Phone</p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        {conatProfile.contactPhones.map((phone, idx) => (
+                          <li className="list-inline-item me-3" key={idx}>
+                            <i className="bx bx-phone bx-xs me-1"></i>
+                            {phone.phoneNumber}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+
+                {conatProfile?.createdAt && (
+                  <div className="d-flex mb-2">
+                    <div style={{ width: "100px", minWidth: "100px" }}>
+                      <p className="m-0">Created</p>
+                    </div>
+                    <div>
+                      <ul className="list-inline mb-0">
+                        <li className="list-inline-item">
+                          <i className="bx bx-calendar-week bx-xs me-1"></i>
+                          {moment(conatProfile.createdAt).format(
+                            "MMMM, DD YYYY"
+                          )}
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           )}
         </div>
-
-        <hr className="my-1" />
-        <NotesDirectory
-          isLoading={loading}
-          contactProfile={profileContact}
-          setProfileContact={setProfileContact}
-        />
       </div>
     </div>
   );

src/components/common/TextEditor/Editor.css

@@ -1,6 +1,6 @@
 .editor-wrapper {
   max-width: 800px;
-  margin: 1px auto;
+  margin: 20px auto;
   background: #fff;
   
   overflow: hidden;
@@ -69,64 +69,40 @@
     cursor: pointer;
     display: inline-block;
     float: left;
-   font-size: 15px;
+    height: 24px;
     padding: 2px 2px;
     width: 28px;
 }
-.ql-toolbar.ql-snow{
-  padding: 4px;
-}
-
- 
 
 @media (max-width: 768px) {
 .ql-toolbar.ql-snow .ql-formats {
     margin-right: 1px;
-    align-items: center;
 }
 }
 
 
+/* for small editor */
 
-.ql-snow.ql-toolbar button,
-.ql-snow .ql-toolbar button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  height: 18px;
-  padding: 2px 2px;
-  width: 22px;
-  font-size: 14px;
-  /* REMOVE THIS to fix side-alignment */
-  /* float: left; */
-  vertical-align: middle;
+/* Editor height and text */
+.compact-editor .ql-editor {
+  min-height: 80px;       /* Reduce editor height */
+  font-size: 0.85rem;      /* Smaller font */
+  padding: 6px 10px;
 }
 
-.ql-snow .ql-picker-label {
-  font-size: 10px;          /* Smaller text */
-  padding: 0 6px;           /* Horizontal padding */
-  height: 20px;             /* Height of the label */
-  line-height: 20px;        /* Match height to vertically center single-line text */
-  background-color: #eee;
-  border-radius: 0px;
-  cursor: pointer;
-  color: #333;
-  text-align: center;
-  width: 100%;
-
-  display: flex;            /* Enable flexbox */
-  align-items: center;      /* Vertical centering */
-  justify-content: center;  /* Horizontal centering */
+/* Toolbar size */
+.compact-editor .ql-toolbar {
+  padding: 5px 8px;
+  font-size: 0.85rem;
 }
 
-
-/* Remove custom upward-opening styles */
-.ql-toolbar .ql-picker.ql-header .ql-picker-options {
-  top: 100%;        /* Position it below the label */
-  bottom: auto;     /* Cancel the upward positioning */
-  margin-top: 5px;  /* Optional spacing */
+/* Optional: smaller buttons & spacing */
+.compact-editor .ql-toolbar button {
+  height: 24px;
+  width: 24px;
+  padding: 2px;
+}
+
+.compact-editor .ql-toolbar .ql-formats {
+  margin-right: 6px;
 }
-.ql-editor {
-      padding: 4px 15px;
-}

src/components/common/TextEditor/Editor.jsx

@@ -34,7 +34,16 @@ const Editor = ({
 
   return (
     <div className="editor-wrapper">
-       <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
+      <ReactQuill
+        value={value}
+        onChange={onChange}
+        modules={modules}
+        formats={formats}
+        theme="snow"
+        placeholder={placeholder}
+      />
+
+      <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
         <div className="d-flex justify-content-between align-items-center w-100">
           {/* Left: Quill Format Buttons */}
           <span className="d-flex">
@@ -61,19 +70,8 @@ const Editor = ({
             </span>
           </span>
 
-     
-        </div>
-      </div>
-      <ReactQuill
-        value={value}
-        onChange={onChange}
-        modules={modules}
-        formats={formats}
-        theme="snow"
-        placeholder={placeholder}
-      />
-       {/* Right: Submit + Cancel Buttons */}
-          <div className="d-flex justify-content-end  gap-2 p-1">
+          {/* Right: Submit + Cancel Buttons */}
+          <div className="d-flex gap-2">
             <span className="btn btn-xs btn-secondary" aria-disabled={loading} onClick={onCancel}>
               Cancel
             </span>
@@ -86,7 +84,8 @@ const Editor = ({
             {loading ? "Please Wait..." : "Submit"}
             </span>
           </div>
-     
+        </div>
+      </div>
     </div>
   );
 };

src/repositories/DirectoryRepository.jsx

@@ -11,6 +11,5 @@ export const DirectoryRepository = {
     
     CreateNote: ( data ) => api.post( '/api/directory/note', data ),
     GetNote: ( id ) => api.get( `/api/directory/note/${ id }` ),
-    UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ),
-    DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`)
+    UpdateNote:(id,data)=>api.put(`/api/directory/note/${id }`,data )
 }