Adding filteration according to names.

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -5,6 +5,7 @@ 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";
 
 const NoteCardDirectoryEditable = ({
@@ -18,6 +19,7 @@ const NoteCardDirectoryEditable = ({
   const [isLoading, setIsLoading] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   const handleUpdateNote = async () => {
     try {
@@ -29,7 +31,6 @@ const NoteCardDirectoryEditable = ({
       };
       const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
 
-      // Optional cache update
       const cachedContactProfile = getCachedData("Contact Profile");
       if (cachedContactProfile?.contactId === contactId) {
         const updatedCache = {
@@ -43,8 +44,7 @@ const NoteCardDirectoryEditable = ({
         };
         cacheData("Contact Profile", updatedCache);
       }
-      
+
-      // Notify parent
       onNoteUpdate?.(response.data);
       setEditing(false);
       showToast("Note updated successfully", "success");
@@ -55,111 +55,156 @@ const NoteCardDirectoryEditable = ({
     }
   };
 
-  const handleDeleteOrRestore = async (shouldRestore) => {
+  const suspendEmployee = async () => {
     try {
-      shouldRestore ? setIsRestoring(true) : setIsDeleting(true);
+      setIsDeleting(true);
-      await DirectoryRepository.DeleteNote(noteItem.id, shouldRestore);
+      await DirectoryRepository.DeleteNote(noteItem.id, false);
       onNoteDelete?.(noteItem.id);
-      showToast(`Note ${shouldRestore ? "restored" : "deleted"} successfully`, "success");
+      setIsDeleteModalOpen(false);
+      showToast("Note deleted successfully", "success");
     } catch (error) {
-      showToast("Failed to process note", "error");
+      showToast("Failed to delete note", "error");
     } finally {
       setIsDeleting(false);
+    }
+  };
+
+  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 (
-    <div
+    <>
-      className="card p-1 shadow-sm border-1 mb-4 rounded"
+      <div
-      style={{
+        className="card p-1 shadow-sm border-1 mb-4 rounded"
-        width: "100%",
+        style={{
-        background: noteItem.isActive ? "#fff" : "#f8f6f6",
+          width: "100%",
-      }}
+          background: noteItem.isActive ? "#fff" : "#f8f6f6",
-      key={noteItem.id}
+        }}
-    >
+        key={noteItem.id}
-      {/* Header */}
+      >
-      <div className="d-flex justify-content-between align-items-center mb-1">
+        {/* Header */}
-        <div className="d-flex align-items-center">
+        <div className="d-flex justify-content-between align-items-center mb-1">
-          <Avatar
+          <div className="d-flex align-items-center">
-            size="xs"
+            <Avatar
-            firstName={noteItem?.createdBy?.firstName}
+              size="xs"
-            lastName={noteItem?.createdBy?.lastName}
+              firstName={noteItem?.createdBy?.firstName}
-            className="m-0"
+              lastName={noteItem?.createdBy?.lastName}
-          />
+              className="m-0"
-          <div className="d-flex flex-column ms-2">
+            />
-            <span className="fw-semibold small">
+            <div className="d-flex flex-column ms-0">
-              {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName}
+              <span className="fw-semibold small">
-            </span>
+                {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName}
-            <span className="text-muted" style={{ fontSize: "10px" }}>
+              </span>
-              {moment
+              <span className="text-muted" style={{ fontSize: "10px" }}>
-                .utc(noteItem?.createdAt)
+                {moment
-                .add(5, "hours")
+                  .utc(noteItem?.createdAt)
-                .add(30, "minutes")
+                  .add(5, "hours")
-                .format("MMMM DD, YYYY [at] hh:mm A")}
+                  .add(30, "minutes")
-            </span>
+                  .format("MMMM DD, YYYY [at] hh:mm A")}
+              </span>
+            </div>
           </div>
-        </div>
+
-        {/* Action Icons */}
+          {/* Action Icons */}
-        <div>
+          <div>
-          {noteItem.isActive ? (
+            {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"
+                  className="bx bxs-edit bx-sm me-2 text-primary cursor-pointer"
-                  onClick={() => handleDeleteOrRestore(false)}
+                  onClick={() => setEditing(true)}
-                  title="Delete"
+                  title="Edit"
                 ></i>
-              ) : (
+                {!isDeleting ? (
-                <div className="spinner-border spinner-border-sm text-danger" />
+                  <i
-              )}
+                    className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
-            </>
+                    onClick={() => setIsDeleteModalOpen(true)}
-          ) : isRestoring ? (
+                    title="Delete"
-            <i className="bx bx-loader-alt bx-spin text-primary"></i>
+                  ></i>
-          ) : (
+                ) : (
-            <i
+                  <div className="spinner-border spinner-border-sm text-danger" />
-              className="bx bx-recycle me-2 text-success cursor-pointer"
+                )}
-              onClick={() => handleDeleteOrRestore(true)}
+              </>
-              title="Restore"
+            ) : isRestoring ? (
-            ></i>
+              <i className="bx bx-loader-alt bx-spin text-primary"></i>
-          )}
+            ) : (
-        </div>
+              <i
-      </div>
+                className="bx bx-recycle me-2 text-success cursor-pointer"
-      <hr className="mt-0 mb-2" />
+                onClick={handleRestore}
-      {/* Editor or Content */}
+                title="Restore"
-      {editing ? (
+              ></i>
-        <>
+            )}
-          <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>
-      ) : (
+
-        <div className="px-1 pb-2 text-start" dangerouslySetInnerHTML={{ __html: noteItem.note }} />
+        <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>
       )}
-    </div>
+    </>
   );
 };
 
-export default NoteCardDirectoryEditable;
+export default NoteCardDirectoryEditable;

src/components/Directory/NotesCardViewDirectory.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo } from "react";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import NoteCardDirectoryEditable from "./NoteCardDirectoryEditable";
 
-const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
+const NotesCardViewDirectory = ({ notes, setNotes, searchText, selectedNoteNames }) => { // ✅ Changed to array
   const [allNotes, setAllNotes] = useState([]);
   const [filteredNotes, setFilteredNotes] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -13,7 +13,7 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
   const fetchNotes = async () => {
     setLoading(true);
     try {
-      const response = await DirectoryRepository.GetNotes(1000, 1); // fetch all for search
+      const response = await DirectoryRepository.GetNotes(1000, 1);
       const fetchedNotes = response.data?.data || [];
       setAllNotes(fetchedNotes);
     } catch (error) {
@@ -27,26 +27,33 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
     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 fullName = `${noteItem?.createdBy?.firstName || ""} ${noteItem?.createdBy?.lastName || ""}`.trim(); // Get full name
+      const lowerFullName = fullName.toLowerCase(); // Convert to lowercase for comparison
       const createdDate = new Date(noteItem?.createdAt).toLocaleDateString("en-IN").toLowerCase();
 
-      return (
+      const matchesSearch =
         plainNote.includes(lowerSearch) ||
-        fullName.includes(lowerSearch) ||
+        lowerFullName.includes(lowerSearch) ||
-        createdDate.includes(lowerSearch)
+        createdDate.includes(lowerSearch);
-      );
+
+      // ✅ Filter logic for multiple selected names
+      const matchesNameFilter =
+        selectedNoteNames.length === 0 || // If no names are selected, all notes pass this filter
+        selectedNoteNames.includes(fullName); // Check if the note's creator is in the selected names array
+
+      return matchesSearch && matchesNameFilter;
     });
 
     setFilteredNotes(filtered);
-    setNotes(filtered); // for export
+    setNotes(filtered);
     setCurrentPage(1);
     setTotalPages(Math.ceil(filtered.length / pageSize));
-  }, [searchText, allNotes]);
+  }, [searchText, allNotes, selectedNoteNames]); // ✅ Add selectedNoteNames to dependencies
 
   const currentItems = useMemo(() => {
     const startIndex = (currentPage - 1) * pageSize;
@@ -70,14 +77,8 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
   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%" }}>
+      <div className="d-flex flex-column text-start mt-4" style={{ gap: "0rem", minHeight: "100%" }}>
         {currentItems.map((noteItem) => (
           <NoteCardDirectoryEditable
             key={noteItem.id}
@@ -89,13 +90,12 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
               );
             }}
             onNoteDelete={() => {
-              fetchNotes(); // refresh after delete
+              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">
@@ -137,4 +137,4 @@ const NotesCardViewDirectory = ({ notes, setNotes, searchText }) => {
   );
 };
 
-export default NotesCardViewDirectory;
+export default NotesCardViewDirectory;

src/pages/Directory/Directory.jsx

@@ -39,6 +39,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [openBucketModal, setOpenBucketModal] = useState(false);
   const [notes, setNotes] = useState([]);
 
+  // ✅ Changed to an array for multiple selections
+  const [selectedNoteNames, setSelectedNoteNames] = useState([]);
+
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
   const { setActions } = useFab();
@@ -73,8 +76,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         setIsOpenModal(false);
       }
 
-      // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
-      // setContactList(updatedContacts);
       refetch(IsActive, prefernceContacts);
       refetchBucket();
     } catch (error) {
@@ -251,6 +252,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
 
     return () => setActions([]);
   }, [IsPage, buckets]);
+
   useEffect(() => {
     setPerfence(prefernceContacts);
   }, [prefernceContacts]);
@@ -328,7 +330,7 @@ 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}
@@ -349,21 +351,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             setOpenBucketModal={setOpenBucketModal}
             contactsToExport={contacts}
             notesToExport={notes}
+            selectedNoteNames={selectedNoteNames}       
+            setSelectedNoteNames={setSelectedNoteNames}
           />
         </div>
       </div>
-      <div className="card-minHeight">
+      <div className="card-minHeight mt-0">
-        {/* Common empty/loading messages */}
         {(viewType === "card" || viewType === "list" || viewType === "notes") && (
           <div className="d-flex flex-column justify-content-center align-items-center text-center">
-            {/* {loading && <p className="mt-10">Loading...</p>} */}
-
-            {/* 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>
             )}
@@ -376,7 +371,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
-        {/* List View */}
         {viewType === "list" && (
           <div className="card cursor-pointer mt-5">
             <div className="card-body p-2 pb-1">
@@ -400,9 +394,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
-        {/* Card View */}
         {viewType === "card" && (
-          <div className="row mt-5">
+          <div className="row mt-4">
             {!loading &&
               currentItems.map((contact) => (
                 <div
@@ -424,13 +417,13 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
-        {/* Notes View */}
         {viewType === "notes" && (
           <div className="mt-0">
             <NotesCardViewDirectory
               notes={notes}
               setNotes={setNotes}
               searchText={searchText}
+              selectedNoteNames={selectedNoteNames}
             />
           </div>
         )}
@@ -478,7 +471,6 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             </nav>
           )}
       </div>
-
     </div>
   );
 };

src/pages/Directory/DirectoryPageHeader.jsx

@@ -18,10 +18,43 @@ const DirectoryPageHeader = ({
   loading,
   IsActive,
   contactsToExport,
-  notesToExport, // ✅ Add this prop
+  notesToExport,
+  selectedNoteNames, // ✅ Changed to array
+  setSelectedNoteNames, // ✅ Changed to array
 }) => {
   const [filtered, setFiltered] = useState(0);
 
+  const [noteCreators, setNoteCreators] = useState([]);
+
+  useEffect(() => {
+    setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
+  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
+
+  useEffect(() => {
+    if (viewType === "notes" && 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()); // Sort names for consistent display
+    } else {
+      setNoteCreators([]);
+      setSelectedNoteNames([]); // Reset to empty array for multiple selection
+    }
+  }, [notesToExport, viewType, setSelectedNoteNames]); // Add setSelectedNoteNames to dependencies
+
+  // ✅ New handler for multiple name selections
+  const handleToggleNoteName = (name) => {
+    setSelectedNoteNames(prevSelectedNames => {
+      if (prevSelectedNames.includes(name)) {
+        return prevSelectedNames.filter(n => n !== name);
+      } else {
+        return [...prevSelectedNames, name];
+      }
+    });
+  };
+
   const handleExport = (type) => {
     let dataToExport = [];
 
@@ -39,14 +72,14 @@ const DirectoryPageHeader = ({
 
       const cleanNoteText = (html) => {
         if (!html) return "";
-        const stripped = html.replace(/<[^>]+>/g, ""); // remove HTML tags
+        const stripped = html.replace(/<[^>]+>/g, "");
         const decoded = decodeHtmlEntities(stripped);
-        return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // fix non-breaking space
+        return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
       };
 
       const cleanName = (name) => {
         if (!name) return "";
-        return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); // sanitize name
+        return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
       };
 
       dataToExport = notesToExport.map(note => ({
@@ -105,13 +138,8 @@ const DirectoryPageHeader = ({
     }
   };
 
-  useEffect(() => {
-    setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
-  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
-
   return (
     <>
-      {/* Top Tabs */}
       <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">
@@ -138,21 +166,68 @@ const DirectoryPageHeader = ({
       </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">
+        <div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
 
-          {/* Search */}
           <input
             type="search"
-            className="form-control 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" }}
           />
 
-          {/* View Toggle Buttons - only for list/card */}
+          {/* Name Filter Dropdown - now with checkboxes */}
+          {viewType === "notes" && noteCreators.length > 0 && (
+            <div className="dropdown" style={{ width: "fit-content" }}>
+              <button
+                className="btn btn-sm btn-outline-secondary dropdown-toggle" // Added btn-sm for small size
+                type="button"
+                id="notesNameFilterDropdown"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                {selectedNoteNames.length > 0
+                  ? `Names (${selectedNoteNames.length})`
+                  : "Filter by Name"}
+              </button>
+              <ul className="dropdown-menu p-2" aria-labelledby="notesNameFilterDropdown">
+                {/* Option to clear all selections */}
+                <li>
+                  <a
+                    className={`dropdown-item ${selectedNoteNames.length === 0 ? "active" : ""}`}
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setSelectedNoteNames([]); // Clear all
+                    }}
+                  >
+                    All Names
+                  </a>
+                </li>
+                <li><hr className="dropdown-divider" /></li>
+                {noteCreators.map((name, index) => (
+                  <li key={index}>
+                    <div className="form-check dropdown-item p-0">
+                      <input
+                        className="form-check-input ms-2"
+                        type="checkbox"
+                        id={`name-filter-${index}`}
+                        checked={selectedNoteNames.includes(name)}
+                        onChange={() => handleToggleNoteName(name)}
+                      />
+                      <label className="form-check-label ms-1" htmlFor={`name-filter-${index}`}>
+                        {name}
+                      </label>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+
           {(viewType === "card" || viewType === "list") && (
             <div className="d-flex gap-2">
 
@@ -174,75 +249,76 @@ const DirectoryPageHeader = ({
             </div>
           )}
 
-          {/* Filter */}
+          {viewType !== "notes" && (
-          <div className="dropdown" style={{ width: "fit-content" }}>
+            <div className="dropdown-center" style={{ width: "fit-content" }}>
-            <a
+              <a
-              className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
-              data-bs-toggle="dropdown"
+                data-bs-toggle="dropdown"
-              aria-expanded="false"
+                aria-expanded="false"
-            >
+              >
-              <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
+                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
-              {filtered > 0 && (
+                {filtered > 0 && (
-                <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
+                  <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
-                  {filtered}
+                    {filtered}
-                </span>
+                  </span>
-              )}
+                )}
-            </a>
+              </a>
 
-            <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
+              <ul className="dropdown-menu p-3" style={{ width: "700px" }}>
-              <p className="text-muted m-0 h6">Filter by</p>
+                <p className="text-muted m-0 h6">Filter by</p>
 
-              {/* Buckets */}
+                <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">
+                    <div className="d-flex flex-wrap">
-                  {filteredBuckets.map(({ id, name }) => (
+                      {filteredBuckets.map(({ id, name }) => (
-                    <div className="form-check me-3 mb-1" style={{ minWidth: "33.33%" }} key={id}>
+                        <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
-                      <input
+                          <input
-                        className="form-check-input"
+                            className="form-check-input"
-                        type="checkbox"
+                            type="checkbox"
-                        id={`bucket-${id}`}
+                            id={`bucket-${id}`}
-                        checked={tempSelectedBucketIds.includes(id)}
+                            checked={tempSelectedBucketIds.includes(id)}
-                        onChange={() => handleTempBucketChange(id)}
+                            onChange={() => handleTempBucketChange(id)}
-                      />
+                          />
-                      <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
+                          <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
-                        {name}
+                            {name}
-                      </label>
+                          </label>
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  </div>
-                </div>
+                  <div className="mt-1" style={{ flexBasis: "50%" }}>
-              </div>
+                    <p className="text-small mb-1">Categories</p>
-              {/* Categories */}
+                    <div className="d-flex flex-wrap">
-              <div className="mt-1">
+                      {filteredCategories.map(({ id, name }) => (
-                <p className="text-small mb-1">Categories</p>
+                        <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
-                <div className="d-flex flex-wrap">
+                          <input
-                  {filteredCategories.map(({ id, name }) => (
+                            className="form-check-input"
-                    <div className="form-check me-3 mb-1" style={{ minWidth: "33.33%" }} key={id}>
+                            type="checkbox"
-                      <input
+                            id={`cat-${id}`}
-                        className="form-check-input"
+                            checked={tempSelectedCategoryIds.includes(id)}
-                        type="checkbox"
+                            onChange={() => handleTempCategoryChange(id)}
-                        id={`cat-${id}`}
+                          />
-                        checked={tempSelectedCategoryIds.includes(id)}
+                          <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
-                        onChange={() => handleTempCategoryChange(id)}
+                            {name}
-                      />
+                          </label>
-                      <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
+                        </div>
-                        {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 className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
+                  <button className="btn btn-xs btn-secondary" onClick={clearFilter}>Clear</button>
-                <button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
+                  <button className="btn btn-xs btn-primary" onClick={applyFilter}>Apply Filter</button>
-              </div>
+                </div>
-            </ul>
+              </ul>
-          </div>
+            </div>
+          )}
+
         </div>
 
-        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end align-items-center gap-2">
+        <div className="col-12 col-md-6 mb-2 px-5 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
@@ -260,7 +336,6 @@ const DirectoryPageHeader = ({
             </label>
           )}
 
-          {/* Export */}
           <div className="btn-group">
             <button
               className="btn btn-sm btn-label-secondary dropdown-toggle"
@@ -282,21 +357,19 @@ const DirectoryPageHeader = ({
                 </a>
               </li>
               {viewType !== "notes" && (
-              <li>
+                <li>
-                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
+                  <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
-                  <i className="bx bxs-file-pdf me-1"></i> PDF
+                    <i className="bx bxs-file-pdf me-1"></i> PDF
-                </a>
+                  </a>
-              </li>
+                </li>
-               )}
+              )}
             </ul>
           </div>
+
         </div>
       </div>
     </>
   );
 };
 
-export default DirectoryPageHeader;
+export default DirectoryPageHeader;
-
-
-