Merge pull request 'Enhanced the Directory module by adding Notes and Contacts tabs, with view-specific controls, export options, and search functionality for Notes.' (#215) from Kartik_Task#513 into Issues_Jun_3W

Reviewed-on: #215

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -0,0 +1,256 @@
+import React, { useState } from "react";
+import ReactQuill from "react-quill";
+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 ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
+import "../common/TextEditor/Editor.css";
+import ProfileContactDirectory from "./ProfileContactDirectory";
+import GlobalModel from "../common/GlobalModel";
+
+const NoteCardDirectoryEditable = ({
+  noteItem,
+  contactId,
+  onNoteUpdate,
+  onNoteDelete,
+}) => {
+  const [editing, setEditing] = useState(false);
+  const [editorValue, setEditorValue] = useState(noteItem.note);
+  const [isLoading, setIsLoading] = useState(false);
+  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 handleUpdateNote = async () => {
+    try {
+      setIsLoading(true);
+      const payload = {
+        id: noteItem.id,
+        note: editorValue,
+        contactId,
+      };
+      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
+
+      const cachedContactProfile = getCachedData("Contact Profile");
+      if (cachedContactProfile?.contactId === contactId) {
+        const updatedCache = {
+          ...cachedContactProfile,
+          data: {
+            ...cachedContactProfile.data,
+            notes: cachedContactProfile.data.notes.map((note) =>
+              note.id === noteItem.id ? response.data : note
+            ),
+          },
+        };
+        cacheData("Contact Profile", updatedCache);
+      }
+
+      onNoteUpdate?.(response.data);
+      setEditing(false);
+      showToast("Note updated successfully", "success");
+    } catch (error) {
+      showToast("Failed to update note", "error");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const suspendEmployee = async () => {
+    try {
+      setIsDeleting(true);
+      await DirectoryRepository.DeleteNote(noteItem.id, false);
+      onNoteDelete?.(noteItem.id);
+      setIsDeleteModalOpen(false);
+      showToast("Note deleted successfully", "success");
+    } catch (error) {
+      showToast("Failed to delete note", "error");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const contactProfile = (contactId) => {
+    DirectoryRepository.GetContactProfile(contactId).then((res) => {
+        setOpen_contact(res?.data);
+        setIsOpenModalNote(true);
+      });
+  };
+
+  const handleRestore = async () => {
+    try {
+      setIsRestoring(true);
+      await DirectoryRepository.DeleteNote(noteItem.id, true);
+      onNoteDelete?.(noteItem.id);
+      showToast("Note restored successfully", "success");
+    } catch (error) {
+      showToast("Failed to restore note", "error");
+    } finally {
+      setIsRestoring(false);
+    }
+  };
+
+  return (
+    <>
+
+      {isOpenModalNote && (
+        <GlobalModel
+          isOpen={isOpenModalNote}
+          closeModal={() => {
+            setOpen_contact(null);
+            setIsOpenModalNote(false);
+          }}
+          size="xl"
+        >
+          {open_contact && (
+            <ProfileContactDirectory
+              contact={open_contact}
+              setOpen_contact={setOpen_contact}
+              closeModal={() => setIsOpenModalNote(false)}
+            />
+          )}
+        </GlobalModel>
+      )}
+      <div
+        className="card p-1 shadow-sm border-1 mb-4 p-4 rounded"
+        style={{
+          width: "100%",
+          background: noteItem.isActive ? "#fff" : "#f8f6f6",
+        }}
+        key={noteItem.id}
+      >
+        {/* Header */}
+        <div className="d-flex justify-content-between align-items-center mb-1">
+          <div className="d-flex align-items-center">
+
+            <Avatar
+              size="xs"
+              firstName={noteItem?.createdBy?.firstName}
+              lastName={noteItem?.createdBy?.lastName}
+              className="m-0"
+            />
+            <div>
+              <div className="d-flex ms-0 align-middle cursor-pointer" onClick={() =>contactProfile(noteItem.contactId)}>
+                <span>
+                  <span className="fw-bold ">  {noteItem?.contactName}  </span> <span className="text-muted font-weight-normal">
+                    ( {noteItem?.organizationName})
+                  </span>
+                </span>
+
+              </div>
+              <div className="d-flex ms-0 align-middle">
+
+
+              </div>
+              <div className="d-flex ms-0 mt-2">
+                <span className="text-muted">
+                  by <span className="fw-bold "> {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName} </span>
+                  &nbsp; <span className="text-muted">
+                    on {moment
+                      .utc(noteItem?.createdAt)
+                      .add(5, "hours")
+                      .add(30, "minutes")
+                      .format("MMMM DD, YYYY [at] hh:mm A")}
+                  </span>
+                </span>
+
+              </div>
+            </div>
+          </div>
+
+          {/* Action Icons */}
+          <div>
+            {noteItem.isActive ? (
+              <>
+                <i
+                  className="bx bxs-edit bx-sm me-2 text-primary cursor-pointer"
+                  onClick={() => setEditing(true)}
+                  title="Edit"
+                ></i>
+                {!isDeleting ? (
+                  <i
+                    className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
+                    onClick={() => setIsDeleteModalOpen(true)}
+                    title="Delete"
+                  ></i>
+                ) : (
+                  <div className="spinner-border spinner-border-sm text-danger" />
+                )}
+              </>
+            ) : isRestoring ? (
+              <i className="bx bx-loader-alt bx-spin text-primary"></i>
+            ) : (
+              <i
+                className="bx bx-recycle me-2 text-success cursor-pointer"
+                onClick={handleRestore}
+                title="Restore"
+              ></i>
+            )}
+          </div>
+        </div>
+
+        <hr className="mt-0 mb-2" />
+
+        {/* Editor or Content */}
+        {editing ? (
+          <>
+            <ReactQuill
+              value={editorValue}
+              onChange={setEditorValue}
+              theme="snow"
+              className="compact-editor"
+            />
+            <div className="d-flex justify-content-end gap-3 mt-2">
+              <span
+                className="text-secondary cursor-pointer"
+                onClick={() => setEditing(false)}
+              >
+                Cancel
+              </span>
+              <span
+                className="text-primary cursor-pointer"
+                onClick={handleUpdateNote}
+              >
+                {isLoading ? "Saving..." : "Submit"}
+              </span>
+            </div>
+          </>
+        ) : (
+          <div
+            className="px-10 pb-2 text-start"
+            dangerouslySetInnerHTML={{ __html: noteItem.note }}
+          />
+        )}
+      </div>
+
+      {/* Delete Confirm Modal */}
+      {isDeleteModalOpen && (
+        <div
+          className={`modal fade ${isDeleteModalOpen ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: isDeleteModalOpen ? "block" : "none",
+            backgroundColor: "rgba(0,0,0,0.5)",
+          }}
+          aria-hidden="false"
+        >
+          <ConfirmModal
+            type={"delete"}
+            header={"Delete Note"}
+            message={"Are you sure you want to delete this note?"}
+            onSubmit={suspendEmployee}
+            onClose={() => setIsDeleteModalOpen(false)}
+            loading={isDeleting}
+            paramData={noteItem}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default NoteCardDirectoryEditable;

src/components/Directory/NotesCardViewDirectory.jsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+import NoteCardDirectoryEditable from "./NoteCardDirectoryEditable";
+
+const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAppliedNotes }) => {
+  const [allNotes, setAllNotes] = useState([]);
+  const [filteredNotes, setFilteredNotes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [selectedCreators, setSelectedCreators] = useState([]);
+  const [selectedOrgs, setSelectedOrgs] = useState([]);
+  const pageSize = 20;
+
+  useEffect(() => {
+    fetchNotes();
+  }, []);
+
+  const fetchNotes = async () => {
+    setLoading(true);
+    try {
+      const response = await DirectoryRepository.GetNotes(1000, 1);
+      const fetchedNotes = response.data?.data || [];
+      setAllNotes(fetchedNotes);
+      setNotesForFilter(fetchedNotes)
+
+      const creatorsSet = new Set();
+      const orgsSet = new Set();
+
+      fetchedNotes.forEach((note) => {
+        const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
+        if (creator) creatorsSet.add(creator);
+
+        const org = note.organizationName;
+        if (org) orgsSet.add(org);
+      });
+
+    } catch (error) {
+      console.error("Failed to fetch notes:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+
+  const applyCombinedFilter = () => {
+    const lowerSearch = searchText?.toLowerCase() || "";
+
+    const filtered = allNotes.filter((noteItem) => {
+      const creator = `${noteItem.createdBy?.firstName || ""} ${noteItem.createdBy?.lastName || ""}`.trim();
+      const org = noteItem.organizationName;
+
+      const matchesCreator = selectedCreators.length === 0 || selectedCreators.includes(creator);
+      const matchesOrg = selectedOrgs.length === 0 || selectedOrgs.includes(org);
+
+      const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
+
+      const stringValues = [];
+      const extractStrings = (obj) => {
+        for (const key in obj) {
+          const value = obj[key];
+          if (typeof value === "string") {
+            stringValues.push(value.toLowerCase());
+          } else if (typeof value === "object" && value !== null) {
+            extractStrings(value);
+          }
+        }
+      };
+      extractStrings(noteItem);
+      stringValues.push(plainNote, creator.toLowerCase());
+
+      const matchesSearch = stringValues.some((val) => val.includes(lowerSearch));
+
+      return matchesCreator && matchesOrg && matchesSearch;
+    });
+
+    setFilteredNotes(filtered);
+    setCurrentPage(1);
+    setTotalPages(Math.ceil(filtered.length / pageSize));
+  };
+
+  useEffect(() => {
+    applyCombinedFilter();
+  }, [searchText, allNotes]);
+
+  useEffect(() => {
+    setFilteredNotes(filterAppliedNotes);
+  }, [filterAppliedNotes])
+
+  const currentItems = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredNotes.slice(startIndex, startIndex + pageSize);
+  }, [filteredNotes, currentPage]);
+
+  const handlePageClick = (page) => {
+    if (page !== currentPage) {
+      setCurrentPage(page);
+    }
+  };
+
+  if (loading) return <p className="mt-10 text-center">Loading notes...</p>;
+
+  if (!filteredNotes.length) return <p className="mt-10 text-center">No matching notes found</p>;
+
+
+  return (
+    <div className="w-100 h-100 ">
+      {/* Filter Dropdown */}
+      <div className="dropdown mb-3 ms-2">    
+      </div>
+
+      {/* Notes List */}
+      <div className="d-flex flex-column text-start" style={{ gap: "0rem", minHeight: "100%" }}>
+        {currentItems.map((noteItem) => (
+          <NoteCardDirectoryEditable
+            key={noteItem.id}
+            noteItem={noteItem}
+            contactId={noteItem.contactId}
+            onNoteUpdate={(updatedNote) => {
+              setAllNotes((prevNotes) =>
+                prevNotes.map((n) => (n.id === updatedNote.id ? updatedNote : n))
+              );
+            }}
+            onNoteDelete={() => fetchNotes()}
+          />
+        ))}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="d-flex justify-content-end mt-3 me-3">
+          <div className="d-flex align-items-center gap-2">
+            <button
+              className="btn btn-sm rounded-circle border"
+              onClick={() => handlePageClick(Math.max(1, currentPage - 1))}
+              disabled={currentPage === 1}
+              title="Previous"
+            >
+              «
+            </button>
+
+            {[...Array(totalPages)].map((_, i) => {
+              const page = i + 1;
+              return (
+                <button
+                  key={page}
+                  className={`btn btn-sm rounded-circle border ${page === currentPage ? "btn-primary text-white" : "btn-outline-primary"
+                    }`}
+                  style={{ width: "32px", height: "32px", padding: 0 }}
+                  onClick={() => handlePageClick(page)}
+                >
+                  {page}
+                </button>
+              );
+            })}
+
+            <button
+              className="btn btn-sm rounded-circle border"
+              onClick={() => handlePageClick(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage === totalPages}
+              title="Next"
+            >
+              »
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NotesCardViewDirectory;

src/pages/Directory/Directory.jsx

@@ -20,6 +20,7 @@ import DirectoryPageHeader from "./DirectoryPageHeader";
 import ManageBucket from "../../components/Directory/ManageBucket";
 import { useFab } from "../../Context/FabContext";
 import { DireProvider, useDir } from "../../Context/DireContext";
+import NotesCardViewDirectory from "../../components/Directory/NotesCardViewDirectory";
 
 const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [projectPrefernce, setPerfence] = useState(null);
@@ -31,11 +32,17 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [ContactList, setContactList] = useState([]);
   const [contactCategories, setContactCategories] = useState([]);
   const [searchText, setSearchText] = useState("");
-  const [listView, setListView] = useState(false);
+  const [viewType, setViewType] = useState("notes");
   const [selectedBucketIds, setSelectedBucketIds] = useState([]);
   const [deleteContact, setDeleteContact] = useState(null);
   const [IsDeleting, setDeleting] = useState(false);
   const [openBucketModal, setOpenBucketModal] = useState(false);
+  const [notes, setNotes] = useState([]);
+    const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
+  // const [selectedOrgs, setSelectedOrgs] = useState([]);
+
+  // ✅ Changed to an array for multiple selections
+  const [selectedNoteNames, setSelectedNoteNames] = useState([]);
 
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
@@ -71,8 +78,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         setIsOpenModal(false);
       }
 
-      // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
-      // setContactList(updatedContacts);
       refetch(IsActive, prefernceContacts);
       refetchBucket();
     } catch (error) {
@@ -249,6 +254,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
 
     return () => setActions([]);
   }, [IsPage, buckets]);
+
   useEffect(() => {
     setPerfence(prefernceContacts);
   }, [prefernceContacts]);
@@ -326,14 +332,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </GlobalModel>
       )}
 
-      <div className="card p-0 mb-2 ">
+      <div className="card p-0 mb-0">
         <div className="card-body p-1 pb-0">
           <DirectoryPageHeader
             searchText={searchText}
             setSearchText={setSearchText}
             setIsActive={setIsActive}
-            listView={listView}
+            viewType={viewType}
-            setListView={setListView}
+            setViewType={setViewType}
             filteredBuckets={filteredBuckets}
             tempSelectedBucketIds={tempSelectedBucketIds}
             handleTempBucketChange={handleTempBucketChange}
@@ -346,56 +352,33 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             IsActive={IsActive}
             setOpenBucketModal={setOpenBucketModal}
             contactsToExport={contacts}
+            notesToExport={notes}
+            selectedNoteNames={selectedNoteNames}       
+            setSelectedNoteNames={setSelectedNoteNames}
+            notesForFilter={notes}
+            setFilterAppliedNotes={setFilterAppliedNotes}
           />
         </div>
       </div>
-      <div className="card-minHeight">
+      <div className="card-minHeight mt-0">
-        {/* Messages when listView is false */}
+        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
-        {!listView && (
+          <div className="d-flex flex-column justify-content-center align-items-center text-center">
-          <div className="d-flex flex-column justify-content-center align-items-center text-center ">
+            {!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
-            {loading && <p className="mt-10">Loading...</p>}
-            {!loading && contacts?.length === 0 && (
               <p className="mt-10">No contact found</p>
             )}
-            {!loading && contacts?.length > 0 && currentItems.length === 0 && (
+            {!loading &&
-              <p className="mt-10">No matching contact found</p>
+              (viewType === "card" || viewType === "list") &&
-            )}
+              contacts?.length > 0 &&
+              currentItems.length === 0 && (
+                <p className="mt-10">No matching contact found</p>
+              )}
           </div>
         )}
 
-        {/* Table view (listView === true) */}
+        {viewType === "list" && (
-
-        {listView ? (
           <div className="card cursor-pointer mt-5">
             <div className="card-body p-2 pb-1">
               <DirectoryListTableHeader>
-                {loading && (
-                  <tr>
-                    <td colSpan={10}>
-                      {" "}
-                      <p className="mt-10">Loading...</p>{" "}
-                    </td>
-                  </tr>
-                )}
-
-                {!loading && contacts?.length === 0 && (
-                  <tr>
-                    <td colSpan={10}>
-                      <p className="mt-10">No contact found</p>
-                    </td>
-                  </tr>
-                )}
-
-                {!loading &&
-                  currentItems.length === 0 &&
-                  contacts?.length > 0 && (
-                    <tr>
-                      <td colSpan={10}>
-                        <p className="mt-10">No matching contact found</p>
-                      </td>
-                    </tr>
-                  )}
-
                 {!loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory
@@ -413,8 +396,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
               </DirectoryListTableHeader>
             </div>
           </div>
-        ) : (
+        )}
-          <div className="row mt-5">
+
+        {viewType === "card" && (
+          <div className="row mt-4">
             {!loading &&
               currentItems.map((contact) => (
                 <div
@@ -436,15 +421,26 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
+        {viewType === "notes" && (
+          <div className="mt-0">
+            <NotesCardViewDirectory
+              notes={notes}
+              setNotesForFilter={setNotes}
+              searchText={searchText}
+              setIsOpenModalNote={setIsOpenModalNote}
+             filterAppliedNotes={filterAppliedNotes}
+            />
+          </div>
+        )}
+
         {/* Pagination */}
         {!loading &&
+          viewType !== "notes" &&
           contacts?.length > 0 &&
           currentItems.length > ITEMS_PER_PAGE && (
             <nav aria-label="Page navigation">
               <ul className="pagination pagination-sm justify-content-end py-1">
-                <li
+                <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
-                  className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
-                >
                   <button
                     className="page-link btn-xs"
                     onClick={() => paginate(currentPage - 1)}
@@ -456,9 +452,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                    className={`page-item ${
+                    className={`page-item ${currentPage === index + 1 ? "active" : ""
-                      currentPage === index + 1 ? "active" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link"
@@ -469,11 +464,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </li>
                 ))}
 
-                <li
+                <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
-                  className={`page-item ${
-                    currentPage === totalPages ? "disabled" : ""
-                  }`}
-                >
                   <button
                     className="page-link"
                     onClick={() => paginate(currentPage + 1)}

src/pages/Directory/DirectoryPageHeader.jsx

@@ -1,13 +1,12 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
 
 const DirectoryPageHeader = ({
   searchText,
   setSearchText,
   setIsActive,
-  listView,
+  viewType,
-  setListView,
+  setViewType,
   filteredBuckets,
   tempSelectedBucketIds,
   handleTempBucketChange,
@@ -18,142 +17,410 @@ const DirectoryPageHeader = ({
   applyFilter,
   loading,
   IsActive,
-  setOpenBucketModal,
+  contactsToExport,
-  contactsToExport, // This prop receives the paginated data (currentItems)
+  notesToExport,
+  selectedNoteNames,
+  setSelectedNoteNames,
+  notesForFilter,
+  setFilterAppliedNotes
 }) => {
   const [filtered, setFiltered] = useState(0);
+  const [filteredNotes, setFilteredNotes] = useState([]);
+  const [noteCreators, setNoteCreators] = useState([]);
+  const [allCreators, setAllCreators] = useState([]);
+  const [allOrganizations, setAllOrganizations] = useState([]);
+  const [filteredOrganizations, setFilteredOrganizations] = useState([]);
+  const [selectedCreators, setSelectedCreators] = useState([]);
+  const [selectedOrgs, setSelectedOrgs] = useState([]);
 
-  const handleExport = (type) => {
+  useEffect(() => {
-    // Check if there's data to export
+    setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
-    if (!contactsToExport || contactsToExport.length === 0) {
+  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
-      console.warn("No data to export. The current view is empty.");
+
-      // Optionally, you might want to show a user-friendly toast message here
+
-      // showToast("No data to export on the current page.", "info");
+  useEffect(() => {
+    if (viewType === "notes") {
+      if (notesToExport && notesToExport.length > 0) {
+        const uniqueNames = [...new Set(notesToExport.map(note => {
+          const firstName = note.createdBy?.firstName || "";
+          const lastName = note.createdBy?.lastName || "";
+          return `${firstName} ${lastName}`.trim();
+        }).filter(name => name !== ""))];
+        setNoteCreators(uniqueNames.sort());
+      } else {
+        setNoteCreators([]);
+      }
+    } else {
+      setNoteCreators([]);
+    }
+  }, [notesToExport, viewType]);
+
+  // Separate effect to clear selection only when switching away from notes
+  useEffect(() => {
+    if (viewType !== "notes" && selectedNoteNames.length > 0) {
+      setSelectedNoteNames([]);
+    }
+  }, [viewType]);
+
+  useEffect(() => {
+    const creatorsSet = new Set();
+    const orgsSet = new Set();
+
+    notesForFilter.forEach((note) => {
+      const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
+      if (creator) creatorsSet.add(creator);
+
+      const org = note.organizationName;
+      if (org) orgsSet.add(org);
+    });
+
+    setAllCreators([...creatorsSet].sort());
+    setAllOrganizations([...orgsSet].sort());
+    setFilteredOrganizations([...orgsSet].sort());
+  }, [notesForFilter])
+
+
+  const handleToggleNoteName = (name) => {
+    setSelectedNoteNames(prevSelectedNames => {
+      if (prevSelectedNames.includes(name)) {
+        return prevSelectedNames.filter(n => n !== name);
+      } else {
+        return [...prevSelectedNames, name];
+      }
+    });
+  };
+
+  const updateFilteredOrganizations = () => {
+    if (selectedCreators.length === 0) {
+      setFilteredOrganizations(allOrganizations);
       return;
     }
 
-    // --- Core Change: Map contactsToExport to a simplified format ---
+    const filteredOrgsSet = new Set();
-    // const simplifiedContacts = contactsToExport.map(contact => ({
+    notesForFilter.forEach((note) => {
-    //   Name: contact.name || '',
+      const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
-    //   Organization: contact.organization || '', // Added Organization
+      if (selectedCreators.includes(creator)) {
-    //   Email: contact.contactEmails && contact.contactEmails.length > 0 ? contact.contactEmails[0].emailAddress : '',
+        if (note.organizationName) {
-    //   Phone: contact.contactPhones && contact.contactPhones.length > 0 ? contact.contactPhones[0].phoneNumber : '', // Changed 'Contact' to 'Phone' for clarity
+          filteredOrgsSet.add(note.organizationName);
-    //   Category: contact.contactCategory ? contact.contactCategory.name : '', // Changed 'Role' to 'Category'
+        }
-    // }));
+      }
+    });
 
-    const simplifiedContacts = contactsToExport.map(contact => ({
+    setFilteredOrganizations([...filteredOrgsSet].sort());
-      Name: contact.name || '',
+  };
-      Organization: contact.organization || '',
+
-      Email: contact.contactEmails && contact.contactEmails.length > 0
+  const handleToggleCreator = (name) => {
-        ? contact.contactEmails.map(email => email.emailAddress).join(', ')
+    const updated = selectedCreators.includes(name)
-        : '',
+      ? selectedCreators.filter((n) => n !== name)
-      Phone: contact.contactPhones && contact.contactPhones.length > 0
+      : [...selectedCreators, name];
-        ? contact.contactPhones.map(phone => phone.phoneNumber).join(', ')
+
-        : '',
+    setSelectedCreators(updated);
-      Category: contact.contactCategory ? contact.contactCategory.name : '',
+  };
-    }));
+
+  const handleToggleOrg = (name) => {
+    const updated = selectedOrgs.includes(name)
+      ? selectedOrgs.filter((n) => n !== name)
+      : [...selectedOrgs, name];
+
+    setSelectedOrgs(updated);
+  };
+
+  useEffect(() => {
+    updateFilteredOrganizations();
+  }, [selectedCreators]);
+
+  const handleExport = (type) => {
+    let dataToExport = [];
+
+    if (viewType === "notes") {
+      if (!notesToExport || notesToExport.length === 0) {
+        console.warn("No notes to export.");
+        return;
+      }
+
+      const decodeHtmlEntities = (html) => {
+        const textarea = document.createElement("textarea");
+        textarea.innerHTML = html;
+        return textarea.value;
+      };
+
+      const cleanNoteText = (html) => {
+        if (!html) return "";
+        const stripped = html.replace(/<[^>]+>/g, "");
+        const decoded = decodeHtmlEntities(stripped);
+        return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
+      };
+
+      const cleanName = (name) => {
+        if (!name) return "";
+        return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
+      };
+
+      dataToExport = notesToExport.map(note => ({
+        "Name": cleanName(`${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`),
+        "Notes": cleanNoteText(note.note),
+        "Created At": note.createdAt
+          ? new Date(note.createdAt).toLocaleString("en-IN")
+          : "",
+        "Updated At": note.updatedAt
+          ? new Date(note.updatedAt).toLocaleString("en-IN")
+          : "",
+        "Updated By": cleanName(
+          `${note.updatedBy?.firstName || ""} ${note.updatedBy?.lastName || ""}`
+        ),
+      }));
+
+    } else {
+      if (!contactsToExport || contactsToExport.length === 0) {
+        console.warn("No contacts to export.");
+        return;
+      }
+
+      dataToExport = contactsToExport.map(contact => ({
+        Name: contact.name || '',
+        Organization: contact.organization || '',
+        Email: contact.contactEmails?.map(email => email.emailAddress).join(', ') || '',
+        Phone: contact.contactPhones?.map(phone => phone.phoneNumber).join(', ') || '',
+        Category: contact.contactCategory?.name || '',
+        Tags: contact.tags?.map(tag => tag.name).join(', ') || '',
+      }));
+    }
+
+    const today = new Date();
+    const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;
+
+    const filename =
+      viewType === "notes"
+        ? `Directory_Notes_${formattedDate}`
+        : `Directory_Contacts_${formattedDate}`;
 
-    console.log("Kaerik", simplifiedContacts)
     switch (type) {
       case "csv":
-        exportToCSV(simplifiedContacts, "directory_contacts");
+        exportToCSV(dataToExport, filename);
         break;
       case "excel":
-        exportToExcel(simplifiedContacts, "directory_contacts");
+        exportToExcel(dataToExport, filename);
         break;
       case "pdf":
-        exportToPDF(simplifiedContacts, "directory_contacts");
+        exportToPDF(dataToExport, filename);
         break;
       case "print":
-        printTable(simplifiedContacts, "directory_contacts");
+        printTable(dataToExport, filename);
         break;
       default:
         break;
     }
   };
 
-  useEffect(() => {
+  const applyCombinedFilter = () => {
-    setFiltered(
+    const lowerSearch = searchText?.toLowerCase() || "";
-      tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
+
-    );
+    const filtered = notesForFilter.filter((noteItem) => {
-  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
+      const creator = `${noteItem.createdBy?.firstName || ""} ${noteItem.createdBy?.lastName || ""}`.trim();
+      const org = noteItem.organizationName;
+
+      const matchesCreator = selectedCreators.length === 0 || selectedCreators.includes(creator);
+      const matchesOrg = selectedOrgs.length === 0 || selectedOrgs.includes(org);
+
+      const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
+
+      const stringValues = [];
+      const extractStrings = (obj) => {
+        for (const key in obj) {
+          const value = obj[key];
+          if (typeof value === "string") {
+            stringValues.push(value.toLowerCase());
+          } else if (typeof value === "object" && value !== null) {
+            extractStrings(value);
+          }
+        }
+      };
+      extractStrings(noteItem);
+      stringValues.push(plainNote, creator.toLowerCase());
+
+      const matchesSearch = stringValues.some((val) => val.includes(lowerSearch));
+
+      return matchesCreator && matchesOrg && matchesSearch;
+    });
+
+    setFilteredNotes(filtered);
+    setFilterAppliedNotes(filtered);
+  };
 
   return (
     <>
-      <div className="row mx-0 px-0 align-items-center mt-2">
+      <div className="row mx-0 px-0 align-items-center mt-0">
-        <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
+        <div className="col-12 col-md-6 mb-0 px-1 d-flex align-items-center gap-4">
+          <ul className="nav nav-tabs mb-0" role="tablist">
+            <li className="nav-item" role="presentation">
+              <button
+                className={`nav-link ${viewType === "notes" ? "active" : ""}`}
+                onClick={() => setViewType("notes")}
+                type="button"
+              >
+                <i className="bx bx-note me-1"></i> Notes
+              </button>
+            </li>
+            <li className="nav-item" role="presentation">
+              <button
+                className={`nav-link ${viewType === "card" ? "active" : ""}`}
+                onClick={() => setViewType("card")}
+                type="button"
+              >
+                <i className="bx bx-user me-1"></i> Contacts
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />
+
+      <div className="row mx-0 px-0 align-items-center mt-0">
+        <div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
+
           <input
             type="search"
-            className="form-control form-control-sm me-2"
+            className="form-control me-0"
-            placeholder="Search Contact..."
+            placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
             style={{ width: "200px" }}
           />
-          <div className="d-flex gap-2 ">
+
-            <button
+          {/* Filter by funnel icon for Notes view */}
-              type="button"
+          {viewType === "notes" && (
-              className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
+            <div className="dropdown" style={{ width: "fit-content", minWidth: "400px" }}> {/* Added minWidth here */}
-                }`}
-              onClick={() => setListView(false)}
-              data-bs-toggle="tooltip"
-              data-bs-offset="0,8"
-              data-bs-placement="top"
-              data-bs-custom-class="tooltip"
-              title="Card View"
-            >
-              <i className="bx bx-grid-alt"></i>
-            </button>
-            <button
-              type="button"
-              className={`btn btn-xs ${listView ? "btn-primary" : "btn-outline-primary"
-                }`}
-              onClick={() => setListView(true)}
-              data-bs-toggle="tooltip"
-              data-bs-offset="0,8"
-              data-bs-placement="top"
-              data-bs-custom-class="tooltip"
-              title="List View"
-            >
-              <i className="bx bx-list-ul "></i>
-            </button>
-          </div>
-          <div className="dropdown" style={{ width: "fit-content" }}>
-            <div className="dropdown" style={{ width: "fit-content" }}>
               <a
                 className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
-                <i
+                <i className={`fa-solid fa-filter ms-1 fs-5 ${selectedCreators.length > 0 || selectedOrgs.length > 0 ? "text-primary" : "text-muted"}`}></i>
-                  className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
+                {/* Removed the numerical badge for notes filter */}
-                    }`}
+              </a>
-                ></i>
 
-                {filtered > 0 && (
+              <div
-                  <span
+                className="dropdown-menu p-3"
-                    className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
+                style={{
-                    style={{ fontSize: "0.4rem" }}
+                  minWidth: "600px",
+                  maxHeight: "400px",
+                  overflowY: "auto",
+                  overflowX: "hidden",
+                  whiteSpace: "normal"
+                }}
+              >
+                <div className="d-flex">
+                  {/* Created By */}
+                  <div className="pe-3" style={{ flex: 1 }}>
+                    <p className="text-muted mb-1">Created By</p>
+                    {allCreators.map((name, idx) => (
+                      <div className="form-check mb-1" key={`creator-${idx}`}>
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`creator-${idx}`}
+                          checked={selectedCreators.includes(name)}
+                          onChange={() => handleToggleCreator(name)}
+                        />
+                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
+                          {name}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Divider */}
+                  {/* <div style={{ width: "1px", backgroundColor: "#dee2e6", margin: "0 12px" }}></div> */}
+
+                  {/* Organization */}
+                  <div className="ps-3" style={{ flex: 1 }}>
+                    <p className="text-muted mb-1">Organization</p>
+                    {filteredOrganizations.map((org, idx) => (
+                      <div className="form-check mb-1" key={`org-${idx}`}>
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`org-${idx}`}
+                          checked={selectedOrgs.includes(org)}
+                          onChange={() => handleToggleOrg(org)}
+                        />
+                        <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
+                          {org}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Buttons */}
+                <div className="d-flex justify-content-between mt-3">
+                  <button
+                    className="btn btn-sm btn-outline-danger"
+                    onClick={() => {
+                      setSelectedCreators([]);
+                      setSelectedOrgs([]);
+                      setFilteredOrganizations(allOrganizations);
+                      setFilterAppliedNotes(notesForFilter);
+                    }}
                   >
+                    Clear
+                  </button>
+                  <button className="btn btn-sm btn-primary" onClick={applyCombinedFilter}>
+                    Apply Filter
+                  </button>
+                </div>
+              </div>
+
+            </div>
+          )}
+
+
+          {(viewType === "card" || viewType === "list") && (
+            <div className="d-flex gap-2">
+
+              <button
+                type="button"
+                className={`btn btn-xs ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
+                onClick={() => setViewType("card")}
+              >
+                <i className="bx bx-grid-alt"></i>
+              </button>
+              <button
+                type="button"
+                className={`btn btn-xs ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
+                onClick={() => setViewType("list")}
+              >
+                <i className="bx bx-list-ul me-1"></i>
+
+              </button>
+            </div>
+          )}
+
+          {/* Filter by funnel icon for Contacts view (retains numerical badge) */}
+          {viewType !== "notes" && (
+            <div className="dropdown-center" style={{ width: "fit-content" }}>
+              <a
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
+                {filtered > 0 && (
+                  <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
                     {filtered}
                   </span>
                 )}
               </a>
 
-              <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
+              <ul className="dropdown-menu p-3" style={{ width: "700px" }}>
-                <div>
+                <p className="text-muted m-0 h6">Filter by</p>
-                  <p className="text-muted m-0 h6 ">Filter by</p>
 
-                  {/* Bucket Filter */}
+                <div className="d-flex flex-nowrap">
-                  <div className="mt-1">
+                  <div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
-                    <p className="text-small mb-1 ">Buckets</p>
+                    <p className="text-small mb-1">Buckets</p>
                     <div className="d-flex flex-wrap">
                       {filteredBuckets.map(({ id, name }) => (
-                        <div
+                        <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
-                          className="form-check me-3 mb-1"
-                          style={{ minWidth: "33.33%" }}
-                          key={id}
-                        >
                           <input
                             className="form-check-input"
                             type="checkbox"
@@ -161,27 +428,18 @@ const DirectoryPageHeader = ({
                             checked={tempSelectedBucketIds.includes(id)}
                             onChange={() => handleTempBucketChange(id)}
                           />
-                          <label
+                          <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
-                            className="form-check-label text-nowrap text-small "
-                            htmlFor={`bucket-${id}`}
-                          >
                             {name}
                           </label>
                         </div>
                       ))}
                     </div>
                   </div>
-                  <hr className="m-0" />
+                  <div className="mt-1" style={{ flexBasis: "50%" }}>
-                  {/* Category Filter */}
+                    <p className="text-small mb-1">Categories</p>
-                  <div className="mt-1">
-                    <p className="text-small mb-1 ">Categories</p>
                     <div className="d-flex flex-wrap">
                       {filteredCategories.map(({ id, name }) => (
-                        <div
+                        <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
-                          className="form-check me-3 mb-1"
-                          style={{ minWidth: "33.33%" }}
-                          key={id}
-                        >
                           <input
                             className="form-check-input"
                             type="checkbox"
@@ -189,72 +447,53 @@ const DirectoryPageHeader = ({
                             checked={tempSelectedCategoryIds.includes(id)}
                             onChange={() => handleTempCategoryChange(id)}
                           />
-                          <label
+                          <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
-                            className="form-check-label text-nowrap text-small"
-                            htmlFor={`cat-${id}`}
-                          >
                             {name}
                           </label>
                         </div>
                       ))}
                     </div>
                   </div>
+                </div>
 
-                  <div className="d-flex justify-content-end gap-2 mt-1">
+                <div className="d-flex justify-content-end gap-2 mt-1">
-                    <button
+                  <button className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
-                      className="btn btn-xs btn-secondary"
+                  <button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
-                      onClick={clearFilter}
-                    >
-                      Clear
-                    </button>
-                    <button
-                      className="btn btn-xs btn-primary"
-                      onClick={applyFilter}
-                    >
-                      Apply Filter
-                    </button>
-                  </div>
                 </div>
               </ul>
             </div>
-          </div>
+          )}
-        </div>
+
-        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-0">
+        </div>
-          <label className="switch switch-primary mb-0">
+
-            <input
+        <div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
-              type="checkbox"
+          {(viewType === "list" || viewType === "card") && (
-              className="switch-input me-3"
+            <label className="switch switch-primary mb-0">
-              onChange={() => setIsActive(!IsActive)}
+              <input
-              checked={!IsActive}
+                type="checkbox"
-              disabled={loading}
+                className="switch-input me-3"
-            />
+                onChange={() => setIsActive(!IsActive)}
-            <span className="switch-toggle-slider">
+                checked={!IsActive}
-              <span className="switch-on"></span>
+                disabled={loading}
-              <span className="switch-off"></span>
+              />
-            </span>
+              <span className="switch-toggle-slider">
-            <span className="ms-12 ">
+                <span className="switch-on"></span>
-              Show Inactive Contacts
+                <span className="switch-off"></span>
-            </span>
+              </span>
-          </label>
+              <span className="ms-12">Show Inactive Contacts</span>
+            </label>
+          )}
 
-          {/* Export Dropdown */}
           <div className="btn-group">
             <button
+              className="btn btn-sm btn-label-secondary dropdown-toggle"
               type="button"
-              className="btn btn-sm btn-icon rounded-pill dropdown-toggle hide-arrow"
               data-bs-toggle="dropdown"
               aria-expanded="false"
-              aria-label="Export options"
-              style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
             >
-              <i className="bx bx-dots-vertical-rounded bx-sm"></i>
+              <i className="bx bx-export me-2 bx-sm"></i>Export
             </button>
             <ul className="dropdown-menu">
-              <li>
-                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("print"); }}>
-                  <i className="bx bx-printer me-1"></i> Print
-                </a>
-              </li>
               <li>
                 <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
                   <i className="bx bx-file me-1"></i> CSV
@@ -265,13 +504,16 @@ const DirectoryPageHeader = ({
                   <i className="bx bxs-file-export me-1"></i> Excel
                 </a>
               </li>
-              <li>
+              {viewType !== "notes" && (
-                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
+                <li>
-                  <i className="bx bxs-file-pdf me-1"></i> PDF
+                  <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
-                </a>
+                    <i className="bx bxs-file-pdf me-1"></i> PDF
-              </li>
+                  </a>
+                </li>
+              )}
             </ul>
           </div>
+
         </div>
       </div>
     </>

src/repositories/DirectoryRepository.jsx

@@ -32,4 +32,7 @@ export const DirectoryRepository = {
   UpdateNote: (id, data) => api.put(`/api/directory/note/${id}`, data),
   DeleteNote: (id, isActive) =>
     api.delete(`/api/directory/note/${id}?active=${isActive}`),
+
+  GetNotes: (pageSize, pageNumber) =>
+    api.get(`/api/directory/notes?pageSize=${pageSize}&pageNumber=${pageNumber}`),
 };