In directory Creating a tab view and add notes view.

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -0,0 +1,165 @@
+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 "../common/TextEditor/Editor.css";
+
+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 handleUpdateNote = async () => {
+    try {
+      setIsLoading(true);
+      const payload = {
+        id: noteItem.id,
+        note: editorValue,
+        contactId,
+      };
+      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
+
+      // Optional cache update
+      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);
+      }
+      
+      // Notify parent
+      onNoteUpdate?.(response.data);
+      setEditing(false);
+      showToast("Note updated successfully", "success");
+    } catch (error) {
+      showToast("Failed to update note", "error");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteOrRestore = async (shouldRestore) => {
+    try {
+      shouldRestore ? setIsRestoring(true) : setIsDeleting(true);
+      await DirectoryRepository.DeleteNote(noteItem.id, shouldRestore);
+      onNoteDelete?.(noteItem.id);
+      showToast(`Note ${shouldRestore ? "restored" : "deleted"} successfully`, "success");
+    } catch (error) {
+      showToast("Failed to process note", "error");
+    } finally {
+      setIsDeleting(false);
+      setIsRestoring(false);
+    }
+  };
+
+  return (
+    <div
+      className="card p-1 shadow-sm border-1 mb-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 className="d-flex flex-column ms-2">
+            <span className="fw-semibold small">
+              {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName}
+            </span>
+            <span className="text-muted" style={{ fontSize: "10px" }}>
+              {moment
+                .utc(noteItem?.createdAt)
+                .add(5, "hours")
+                .add(30, "minutes")
+                .format("MMMM DD, YYYY [at] hh:mm A")}
+            </span>
+          </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={() => handleDeleteOrRestore(false)}
+                  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={() => handleDeleteOrRestore(true)}
+              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-1 pb-2 text-start" dangerouslySetInnerHTML={{ __html: noteItem.note }} />
+      )}
+    </div>
+  );
+};
+
+export default NoteCardDirectoryEditable;

src/components/Directory/NotesCardViewDirectory.jsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+import NoteCardDirectoryEditable from "./NoteCardDirectoryEditable";
+
+const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
+  const [allNotes, setAllNotes] = useState([]);
+  const [filteredNotes, setFilteredNotes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const pageSize = 20;
+
+  const fetchNotes = async () => {
+    setLoading(true);
+    try {
+      const response = await DirectoryRepository.GetNotes(1000, 1); // fetch all for search
+      const fetchedNotes = response.data?.data || [];
+      setAllNotes(fetchedNotes);
+    } catch (error) {
+      console.error("Failed to fetch notes:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotes();
+  }, []);
+
+  // Search + update pagination + exportable data
+  useEffect(() => {
+    const lowerSearch = searchText?.toLowerCase() || "";
+    const filtered = allNotes.filter((noteItem) => {
+      const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();
+      const fullName = `${noteItem?.contact?.firstName || ""} ${noteItem?.contact?.lastName || ""}`.toLowerCase();
+      const createdDate = new Date(noteItem?.createdAt).toLocaleDateString("en-IN").toLowerCase();
+
+      return (
+        plainNote.includes(lowerSearch) ||
+        fullName.includes(lowerSearch) ||
+        createdDate.includes(lowerSearch)
+      );
+    });
+
+    setFilteredNotes(filtered);
+    setNotes(filtered); // for export
+    setCurrentPage(1);
+    setTotalPages(Math.ceil(filtered.length / pageSize));
+  }, [searchText, allNotes]);
+
+  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"
+      style={{
+        padding: "1rem",
+        overflowX: "auto",
+        overflowY: "hidden",
+        background: "#f8f9fa",
+      }}
+    >
+      <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(); // refresh after delete
+            }}
+          />
+        ))}
+      </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,12 @@ 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 [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
@@ -332,8 +334,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             searchText={searchText}
             setSearchText={setSearchText}
             setIsActive={setIsActive}
-            listView={listView}
+            viewType={viewType}
-            setListView={setListView}
+            setViewType={setViewType}
             filteredBuckets={filteredBuckets}
             tempSelectedBucketIds={tempSelectedBucketIds}
             handleTempBucketChange={handleTempBucketChange}
@@ -346,56 +348,39 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             IsActive={IsActive}
             setOpenBucketModal={setOpenBucketModal}
             contactsToExport={contacts}
+            notesToExport={notes}
           />
         </div>
       </div>
       <div className="card-minHeight">
-        {/* Messages when listView is false */}
+        {/* Common empty/loading messages */}
-        {!listView && (
+        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
-          <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 && <p className="mt-10">Loading...</p>}
+            {/* {loading && <p className="mt-10">Loading...</p>} */}
-            {!loading && contacts?.length === 0 && (
+
+            {/* Notes View */}
+            {/* {!loading && viewType === "notes" && notes?.length > 0 && (
+              <p className="mt-10">No matching note found</p>
+            )} */}
+
+            {/* Contact (card/list) View */}
+            {!loading && (viewType === "card" || viewType === "list") && 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) */}
+        {/* List View */}
-
+        {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,7 +398,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
               </DirectoryListTableHeader>
             </div>
           </div>
-        ) : (
+        )}
+
+        {/* Card View */}
+        {viewType === "card" && (
           <div className="row mt-5">
             {!loading &&
               currentItems.map((contact) => (
@@ -436,15 +424,25 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
+        {/* Notes View */}
+        {viewType === "notes" && (
+          <div className="mt-0">
+            <NotesCardViewDirectory
+              notes={notes}
+              setNotes={setNotes}
+              searchText={searchText}
+            />
+          </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 +454,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 +466,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)}
@@ -485,8 +478,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             </nav>
           )}
       </div>
+
     </div>
   );
 };
 
-export default Directory;
+export default Directory;

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,54 +17,88 @@ const DirectoryPageHeader = ({
   applyFilter,
   loading,
   IsActive,
-  setOpenBucketModal,
+  contactsToExport,
-  contactsToExport, // This prop receives the paginated data (currentItems)
+  notesToExport, // ✅ Add this prop
 }) => {
   const [filtered, setFiltered] = useState(0);
 
   const handleExport = (type) => {
-    // Check if there's data to export
+    let dataToExport = [];
-    if (!contactsToExport || contactsToExport.length === 0) {
+
-      console.warn("No data to export. The current view is empty.");
+    if (viewType === "notes") {
-      // Optionally, you might want to show a user-friendly toast message here
+      if (!notesToExport || notesToExport.length === 0) {
-      // showToast("No data to export on the current page.", "info");
+        console.warn("No notes to export.");
-      return;
+        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, ""); // remove HTML tags
+        const decoded = decodeHtmlEntities(stripped);
+        return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // fix non-breaking space
+      };
+
+      const cleanName = (name) => {
+        if (!name) return "";
+        return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // sanitize name
+      };
+
+      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(', ') || '',
+      }));
     }
 
-    // --- Core Change: Map contactsToExport to a simplified format ---
+    const today = new Date();
-    // const simplifiedContacts = contactsToExport.map(contact => ({
+    const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;
-    //   Name: contact.name || '',
-    //   Organization: contact.organization || '', // Added Organization
-    //   Email: contact.contactEmails && contact.contactEmails.length > 0 ? contact.contactEmails[0].emailAddress : '',
-    //   Phone: contact.contactPhones && contact.contactPhones.length > 0 ? contact.contactPhones[0].phoneNumber : '', // Changed 'Contact' to 'Phone' for clarity
-    //   Category: contact.contactCategory ? contact.contactCategory.name : '', // Changed 'Role' to 'Category'
-    // }));
 
-    const simplifiedContacts = contactsToExport.map(contact => ({
+    const filename =
-      Name: contact.name || '',
+      viewType === "notes"
-      Organization: contact.organization || '',
+        ? `Directory_Notes_${formattedDate}`
-      Email: contact.contactEmails && contact.contactEmails.length > 0
+        : `Directory_Contacts_${formattedDate}`;
-        ? contact.contactEmails.map(email => email.emailAddress).join(', ')
-        : '',
-      Phone: contact.contactPhones && contact.contactPhones.length > 0
-        ? contact.contactPhones.map(phone => phone.phoneNumber).join(', ')
-        : '',
-      Category: contact.contactCategory ? contact.contactCategory.name : '',
-    }));
 
-    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;
@@ -73,15 +106,43 @@ const DirectoryPageHeader = ({
   };
 
   useEffect(() => {
-    setFiltered(
+    setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
-      tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
-    );
   }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
 
   return (
     <>
-      <div className="row mx-0 px-0 align-items-center mt-2">
+      {/* Top Tabs */}
-        <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
+      <div className="row mx-0 px-0 align-items-center mt-0">
+        <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" }} />
+
+      {/* Controls: Search, Filter, View, Toggle, Export */}
+      <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">
+
+          {/* Search */}
           <input
             type="search"
             className="form-control form-control-sm me-2"
@@ -90,171 +151,126 @@ const DirectoryPageHeader = ({
             onChange={(e) => setSearchText(e.target.value)}
             style={{ width: "200px" }}
           />
-          <div className="d-flex gap-2 ">
+
-            <button
+          {/* View Toggle Buttons - only for list/card */}
-              type="button"
+          {(viewType === "card" || viewType === "list") && (
-              className={`btn btn-xs ${!listView ? "btn-primary" : "btn-outline-primary"
+            <div className="d-flex gap-2">
-                }`}
+
-              onClick={() => setListView(false)}
+              <button
-              data-bs-toggle="tooltip"
+                type="button"
-              data-bs-offset="0,8"
+                className={`btn btn-xs ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
-              data-bs-placement="top"
+                onClick={() => setViewType("card")}
-              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="bx bx-grid-alt"></i>
-                  className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"
+              </button>
-                    }`}
+              <button
-                ></i>
+                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>
 
-                {filtered > 0 && (
+              </button>
-                  <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" }}>
-                <div>
-                  <p className="text-muted m-0 h6 ">Filter by</p>
-
-                  {/* Bucket Filter */}
-                  <div className="mt-1">
-                    <p className="text-small mb-1 ">Buckets</p>
-                    <div className="d-flex flex-wrap">
-                      {filteredBuckets.map(({ id, name }) => (
-                        <div
-                          className="form-check me-3 mb-1"
-                          style={{ minWidth: "33.33%" }}
-                          key={id}
-                        >
-                          <input
-                            className="form-check-input"
-                            type="checkbox"
-                            id={`bucket-${id}`}
-                            checked={tempSelectedBucketIds.includes(id)}
-                            onChange={() => handleTempBucketChange(id)}
-                          />
-                          <label
-                            className="form-check-label text-nowrap text-small "
-                            htmlFor={`bucket-${id}`}
-                          >
-                            {name}
-                          </label>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                  <hr className="m-0" />
-                  {/* Category Filter */}
-                  <div className="mt-1">
-                    <p className="text-small mb-1 ">Categories</p>
-                    <div className="d-flex flex-wrap">
-                      {filteredCategories.map(({ id, name }) => (
-                        <div
-                          className="form-check me-3 mb-1"
-                          style={{ minWidth: "33.33%" }}
-                          key={id}
-                        >
-                          <input
-                            className="form-check-input"
-                            type="checkbox"
-                            id={`cat-${id}`}
-                            checked={tempSelectedCategoryIds.includes(id)}
-                            onChange={() => handleTempCategoryChange(id)}
-                          />
-                          <label
-                            className="form-check-label text-nowrap text-small"
-                            htmlFor={`cat-${id}`}
-                          >
-                            {name}
-                          </label>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-
-                  <div className="d-flex justify-content-end gap-2 mt-1">
-                    <button
-                      className="btn btn-xs btn-secondary"
-                      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">
-          <label className="switch switch-primary mb-0">
-            <input
-              type="checkbox"
-              className="switch-input me-3"
-              onChange={() => setIsActive(!IsActive)}
-              checked={!IsActive}
-              disabled={loading}
-            />
-            <span className="switch-toggle-slider">
-              <span className="switch-on"></span>
-              <span className="switch-off"></span>
-            </span>
-            <span className="ms-12 ">
-              Show Inactive Contacts
-            </span>
-          </label>
 
-          {/* Export Dropdown */}
+          {/* Filter */}
-          <div className="btn-group">
+          <div className="dropdown" style={{ width: "fit-content" }}>
-            <button
+            <a
-              type="button"
+              className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
-              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={`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" }}>
+              <p className="text-muted m-0 h6">Filter by</p>
+
+              {/* Buckets */}
+              <div className="mt-1">
+                <p className="text-small mb-1">Buckets</p>
+                <div className="d-flex flex-wrap">
+                  {filteredBuckets.map(({ id, name }) => (
+                    <div className="form-check me-3 mb-1" style={{ minWidth: "33.33%" }} key={id}>
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id={`bucket-${id}`}
+                        checked={tempSelectedBucketIds.includes(id)}
+                        onChange={() => handleTempBucketChange(id)}
+                      />
+                      <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
+                        {name}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {/* Categories */}
+              <div className="mt-1">
+                <p className="text-small mb-1">Categories</p>
+                <div className="d-flex flex-wrap">
+                  {filteredCategories.map(({ id, name }) => (
+                    <div className="form-check me-3 mb-1" style={{ minWidth: "33.33%" }} key={id}>
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id={`cat-${id}`}
+                        checked={tempSelectedCategoryIds.includes(id)}
+                        onChange={() => handleTempCategoryChange(id)}
+                      />
+                      <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
+                        {name}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="d-flex justify-content-end gap-2 mt-1">
+                <button className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
+                <button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
+              </div>
+            </ul>
+          </div>
+        </div>
+
+        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-2">
+          {/* Show Inactive Toggle - only for list/card */}
+          {(viewType === "list" || viewType === "card") && (
+            <label className="switch switch-primary mb-0">
+              <input
+                type="checkbox"
+                className="switch-input me-3"
+                onChange={() => setIsActive(!IsActive)}
+                checked={!IsActive}
+                disabled={loading}
+              />
+              <span className="switch-toggle-slider">
+                <span className="switch-on"></span>
+                <span className="switch-off"></span>
+              </span>
+              <span className="ms-12">Show Inactive Contacts</span>
+            </label>
+          )}
+
+          {/* Export */}
+          <div className="btn-group">
+            <button
+              className="btn btn-sm btn-label-secondary dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <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,11 +281,13 @@ const DirectoryPageHeader = ({
                   <i className="bx bxs-file-export me-1"></i> Excel
                 </a>
               </li>
+              {viewType !== "notes" && (
               <li>
                 <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
                   <i className="bx bxs-file-pdf me-1"></i> PDF
                 </a>
               </li>
+               )}
             </ul>
           </div>
         </div>
@@ -278,4 +296,7 @@ const DirectoryPageHeader = ({
   );
 };
 
-export default DirectoryPageHeader;
+export default DirectoryPageHeader;
+
+
+

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}`),
 };