UI changes in Directory filter and Refator the code of directory.

src/components/Directory/ContactsFilterPanel.jsx

@@ -0,0 +1,94 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState, useCallback, useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useLocation } from "react-router-dom";
+import moment from "moment";
+
+//  replace these with your actual schema + defaults
+// import { contactsFilterSchema, defaultContactsFilterValues } from "./ContactsSchema";
+import { contactsFilterSchema,defaultContactsFilterValues } from "./contactsFilterSchema";
+import SelectMultiple from "../../components/common/SelectMultiple";
+
+const ContactsFilterPanel = ({ onApply, buckets = [], categories = [] }) => {
+  const [resetKey, setResetKey] = useState(0);
+
+  const methods = useForm({
+    resolver: zodResolver(contactsFilterSchema),
+    defaultValues: defaultContactsFilterValues,
+  });
+
+  const { handleSubmit, reset } = methods;
+
+  const handleClosePanel = useCallback(() => {
+    document.querySelector(".offcanvas.show .btn-close")?.click();
+  }, []);
+
+  const onSubmit = useCallback(
+    (formData) => {
+      onApply({
+        ...formData,
+        // Remove startDate/endDate handling since date picker is gone
+      });
+      handleClosePanel();
+    },
+    [onApply, handleClosePanel]
+  );
+
+  // ✅ Auto-close when navigating
+  const location = useLocation();
+  useEffect(() => {
+    handleClosePanel();
+  }, [location, handleClosePanel]);
+
+  const onClear = useCallback(() => {
+    reset(defaultContactsFilterValues);
+    setResetKey((prev) => prev + 1);
+    onApply(defaultContactsFilterValues);
+  }, [onApply, reset]);
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="text-start mb-1">
+          {/* Buckets */}
+          <div className="text-start mb-2">
+            <SelectMultiple
+              name="bucketIds"
+              label="Buckets"
+              options={buckets}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+
+          {/* Categories */}
+          <div className="text-start mb-2">
+            <SelectMultiple
+              name="categoryIds"
+              label="Categories"
+              options={categories}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="d-flex justify-content-end py-3 gap-2">
+          <button
+            type="button"
+            className="btn btn-secondary btn-xs"
+            onClick={onClear}
+          >
+            Clear
+          </button>
+          <button type="submit" className="btn btn-primary btn-xs">
+            Apply
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default ContactsFilterPanel;

src/components/Directory/NotesFilterPanel.jsx

@@ -0,0 +1,71 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState, useCallback } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { defaultNotesFilterValues,notesFilterSchema } from "./notesFilterSchema";
+import SelectMultiple from "../../components/common/SelectMultiple";
+
+const NotesFilterPanel = ({ onApply, creators = [], organizations = [] }) => {
+  const [resetKey, setResetKey] = useState(0);
+
+  const methods = useForm({
+    resolver: zodResolver(notesFilterSchema),
+    defaultValues: defaultNotesFilterValues,
+  });
+
+  const { handleSubmit, reset } = methods;
+
+  const onSubmit = useCallback(
+    (formData) => {
+      onApply(formData);
+      document.querySelector(".offcanvas.show .btn-close")?.click();
+    },
+    [onApply]
+  );
+
+  const onClear = useCallback(() => {
+    reset(defaultNotesFilterValues);
+    setResetKey((prev) => prev + 1);
+    onApply(defaultNotesFilterValues);
+  }, [onApply, reset]);
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="text-start mb-2">
+          <SelectMultiple
+            name="creators"
+            label="Created By"
+            options={creators.map((c) => ({ id: c, name: c }))}
+            labelKey="name"
+            valueKey="id"
+          />
+        </div>
+
+        <div className="text-start mb-2">
+          <SelectMultiple
+            name="organizations"
+            label="Organizations"
+            options={organizations.map((o) => ({ id: o, name: o }))}
+            labelKey="name"
+            valueKey="id"
+          />
+        </div>
+
+        <div className="d-flex justify-content-end py-3 gap-2">
+          <button
+            type="button"
+            className="btn btn-secondary btn-xs"
+            onClick={onClear}
+          >
+            Clear
+          </button>
+          <button type="submit" className="btn btn-primary btn-xs">
+            Apply
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default NotesFilterPanel;

src/components/Directory/contactsFilterSchema.js

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const contactsFilterSchema = z.object({
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+  bucketIds: z.array(z.number()).optional(),
+  categoryIds: z.array(z.number()).optional(),
+});
+
+export const defaultContactsFilterValues = {
+  startDate: "",
+  endDate: "",
+  bucketIds: [],
+  categoryIds: [],
+};

src/components/Directory/notesFilterSchema.js

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const notesFilterSchema = z.object({
+  creators: z.array(z.string()).optional(),
+  organizations: z.array(z.string()).optional(),
+});
+
+export const defaultNotesFilterValues = {
+  creators: [],
+  organizations: [],
+};

src/pages/Directory/Directory.jsx

@@ -134,9 +134,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
     setSelectedContact(null);
     setOpen_contact(null);
   };
-  const [selectedCategoryIds, setSelectedCategoryIds] = useState(
+  // const [selectedCategoryIds, setSelectedCategoryIds] = useState(
-    contactCategory.map((category) => category.id)
+  //   contactCategory.map((category) => category.id)
-  );
+  // );
+
+  const [selectedCategoryIds, setSelectedCategoryIds] = useState([]);
+  const filtered = tempSelectedBucketIds.length + tempSelectedCategoryIds.length;
+
+
 
   useEffect(() => {
     setContactList(contacts);
@@ -200,13 +205,21 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
     setSelectedCategoryIds(tempSelectedCategoryIds);
   };
 
+  // const clearFilter = () => {
+  //   setTempSelectedBucketIds([]);
+  //   setTempSelectedCategoryIds([]);
+  //   setSelectedBucketIds([]);
+  //   setSelectedCategoryIds([]);
+  // };
   const clearFilter = () => {
     setTempSelectedBucketIds([]);
     setTempSelectedCategoryIds([]);
     setSelectedBucketIds([]);
     setSelectedCategoryIds([]);
+    setFilterAppliedNotes([]); // reset notes filter
   };
 
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -351,8 +364,11 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             loading={loading}
             IsActive={IsActive}
             setOpenBucketModal={setOpenBucketModal}
-            contactsToExport={contacts}
+            // contactsToExport={contacts}
-            notesToExport={notes}
+            // notesToExport={notes}
+            filtered={filtered}
+            contactsToExport={filteredContacts}
+            notesToExport={filterAppliedNotes.length > 0 ? filterAppliedNotes : notes}
             selectedNoteNames={selectedNoteNames}
             setSelectedNoteNames={setSelectedNoteNames}
             notesForFilter={notes}
@@ -395,7 +411,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         )}
 
         {viewType === "card" && (
-          <div className="row mt-10">
+          <div className="row mt-5">
             {!loading &&
               currentItems.map((contact) => (
                 <div
@@ -427,7 +443,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
-        {viewType === "notes" && (
+        {/* {viewType === "notes" && (
           <div className="mt-0">
             <NotesCardViewDirectory
               notes={notes}
@@ -437,8 +453,21 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
               filterAppliedNotes={filterAppliedNotes}
             />
           </div>
+        )} */}
+
+        {viewType === "notes" && (
+          <div className="mt-0">
+            <NotesCardViewDirectory
+              notes={filterAppliedNotes.length > 0 ? filterAppliedNotes : notes}
+              setNotesForFilter={setNotes}
+              searchText={searchText}
+              setIsOpenModalNote={setIsOpenModalNote}
+              filterAppliedNotes={filterAppliedNotes}
+            />
+          </div>
         )}
 
+
         {/* Pagination */}
         {!loading &&
           viewType !== "notes" &&
@@ -489,4 +518,4 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   );
 };
 
-export default Directory;
+export default Directory;

src/pages/Directory/DirectoryPageHeader.jsx

@@ -1,591 +1,288 @@
-import React, { useEffect, useState } from "react";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";
+import { useFab } from "../../Context/FabContext";
+import NotesFilterPanel from "../../components/Directory/NotesFilterPanel";
+import ContactsFilterPanel from "../../components/Directory/ContactsFilterPanel";
 
 const DirectoryPageHeader = ({
-    searchText,
+  searchText,
-    setSearchText,
+  setSearchText,
-    setIsActive,
+  setIsActive,
-    viewType,
+  viewType,
-    setViewType,
+  setViewType,
-    filteredBuckets,
+  filteredBuckets,
-    tempSelectedBucketIds,
+  tempSelectedBucketIds,
-    handleTempBucketChange,
+  filteredCategories,
-    filteredCategories,
+  tempSelectedCategoryIds,
-    tempSelectedCategoryIds,
+  loading,
-    handleTempCategoryChange,
+  IsActive,
-    clearFilter,
+  contactsToExport,
-    applyFilter,
+  notesToExport,
-    loading,
+  notesForFilter,
-    IsActive,
+  setFilterAppliedNotes,
-    contactsToExport,
+  setAppliedContactFilters,
-    notesToExport,
-    selectedNoteNames,
-    setSelectedNoteNames,
-    notesForFilter,
-    setFilterAppliedNotes
 }) => {
-    const [filtered, setFiltered] = useState(0);
+  const [filteredCount, setFilteredCount] = useState(0);
-    const [filteredNotes, setFilteredNotes] = useState([]);
+  const { setOffcanvasContent, setShowTrigger } = useFab();
-    const [noteCreators, setNoteCreators] = useState([]);
-    const [allCreators, setAllCreators] = useState([]);
-    const [allOrganizations, setAllOrganizations] = useState([]);
-    const [filteredOrganizations, setFilteredOrganizations] = useState([]);
-    const [selectedCreators, setSelectedCreators] = useState([]);
-    const [selectedOrgs, setSelectedOrgs] = useState([]);
 
-    useEffect(() => {
+  // 🟢 Count filters for badge
-        setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
+  useEffect(() => {
-    }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
+    setFilteredCount(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
+  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
 
-    // New state to track active filters for notes
+  // ----------------- EXPORT HANDLER -----------------
-    const [notesFilterCount, setNotesFilterCount] = useState(0);
+  const handleExport = (type) => {
+    let dataToExport = [];
 
-    useEffect(() => {
+    if (viewType === "notes") {
-        // Calculate the number of active filters for notes
+      if (!notesToExport || notesToExport.length === 0) return;
-        setNotesFilterCount(selectedCreators.length + selectedOrgs.length);
-    }, [selectedCreators, selectedOrgs]);
 
-    useEffect(() => {
+      const decodeHtmlEntities = (html) => {
-        if (viewType === "notes") {
+        const textarea = document.createElement("textarea");
-            if (notesToExport && notesToExport.length > 0) {
+        textarea.innerHTML = html;
-                const uniqueNames = [...new Set(notesToExport.map(note => {
+        return textarea.value;
-                    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
+      const cleanNoteText = (html) => {
-    useEffect(() => {
+        if (!html) return "";
-        if (viewType !== "notes" && selectedNoteNames.length > 0) {
+        const stripped = html.replace(/<[^>]+>/g, "");
-            setSelectedNoteNames([]);
+        const decoded = decodeHtmlEntities(stripped);
-        }
+        return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
-    }, [viewType]);
+      };
 
-    useEffect(() => {
+      const cleanName = (name) => {
-        const creatorsSet = new Set();
+        if (!name) return "";
-        const orgsSet = new Set();
+        return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
+      };
 
-        notesForFilter.forEach((note) => {
+      dataToExport = notesToExport.map((note) => ({
-            const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
+        Name: cleanName(`${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`),
-            if (creator) creatorsSet.add(creator);
+        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) return;
 
-            const org = note.organizationName;
+      dataToExport = contactsToExport.map((contact) => ({
-            if (org) orgsSet.add(org);
+        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(", ") || "",
+      }));
+    }
 
-        setAllCreators([...creatorsSet].sort());
+    const today = new Date();
-        setAllOrganizations([...orgsSet].sort());
+    const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(
-        setFilteredOrganizations([...orgsSet].sort());
+      2,
-    }, [notesForFilter])
+      "0"
+    )}${String(today.getDate()).padStart(2, "0")}`;
 
+    const filename =
+      viewType === "notes"
+        ? `Directory_Notes_${formattedDate}`
+        : `Directory_Contacts_${formattedDate}`;
 
-    const handleToggleNoteName = (name) => {
+    switch (type) {
-        setSelectedNoteNames(prevSelectedNames => {
+      case "csv":
-            if (prevSelectedNames.includes(name)) {
+        exportToCSV(dataToExport, filename);
-                return prevSelectedNames.filter(n => n !== name);
+        break;
-            } else {
+      case "excel":
-                return [...prevSelectedNames, name];
+        exportToExcel(dataToExport, filename);
-            }
+        break;
-        });
+      case "pdf":
-    };
+        exportToPDF(dataToExport, filename);
+        break;
+      case "print":
+        printTable(dataToExport, filename);
+        break;
+      default:
+        break;
+    }
+  };
 
-    const updateFilteredOrganizations = () => {
+  // ----------------- FILTER PANELS -----------------
-        if (selectedCreators.length === 0) {
+  const handleApplyContactsFilter = useCallback(
-            setFilteredOrganizations(allOrganizations);
+    (values) => {
-            return;
+      setAppliedContactFilters(values);
-        }
+    },
+    [setAppliedContactFilters]
+  );
 
-        const filteredOrgsSet = new Set();
+  const handleApplyNotesFilter = useCallback(
-        notesForFilter.forEach((note) => {
+    (values) => {
-            const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
+      setFilterAppliedNotes(values);
-            if (selectedCreators.includes(creator)) {
+    },
-                if (note.organizationName) {
+    [setFilterAppliedNotes]
-                    filteredOrgsSet.add(note.organizationName);
+  );
-                }
-            }
-        });
-
-        setFilteredOrganizations([...filteredOrgsSet].sort());
-    };
-
-    const handleToggleCreator = (name) => {
-        const updated = selectedCreators.includes(name)
-            ? selectedCreators.filter((n) => n !== name)
-            : [...selectedCreators, name];
-
-        setSelectedCreators(updated);
-    };
-
-    const handleToggleOrg = (name) => {
-        const updated = selectedOrgs.includes(name)
-            ? selectedOrgs.filter((n) => n !== name)
-            : [...selectedOrgs, name];
-
-        setSelectedOrgs(updated);
-    };
-
-    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}`;
-
-        switch (type) {
-            case "csv":
-                exportToCSV(dataToExport, filename);
-                break;
-            case "excel":
-                exportToExcel(dataToExport, filename);
-                break;
-            case "pdf":
-                exportToPDF(dataToExport, filename);
-                break;
-            case "print":
-                printTable(dataToExport, filename);
-                break;
-            default:
-                break;
-        }
-    };
-
-    const applyCombinedFilter = () => {
-        const lowerSearch = searchText?.toLowerCase() || "";
-
-        const filtered = notesForFilter.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);
-        setFilterAppliedNotes(filtered);
-    };
 
+  // dynamically switch offcanvas filter panel
+  const filterPanelElement = useMemo(() => {
+    if (viewType === "notes") {
+      return <NotesFilterPanel onApply={handleApplyNotesFilter} notes={notesForFilter} />;
+    }
     return (
-        <>
+      <ContactsFilterPanel
-            <div className="row mx-0 px-0 align-items-center mt-0">
+        onApply={handleApplyContactsFilter}
-                <div className="col-12 col-md-6 mb-0 px-1 d-flex align-items-center gap-4">
+        buckets={[]}
-                    <ul className="nav nav-tabs mb-0" role="tablist">
+        categories={[]}
-                        <li className="nav-item" role="presentation">
+      />
-                            <button
-                                className={`nav-link ${viewType === "notes" ? "active" : ""} fs-6`}
-                                onClick={() => setViewType("notes")}
-                                type="button"
-                            >
-                                <i className="bx bx-note me-1"></i> Notes
-                            </button>
-                        </li>
-                        <li className="nav-item" role="presentation">
-                            <button
-                                // Corrected: Apply 'active' if viewType is either 'card' or 'list'
-                                className={`nav-link ${viewType === "card" || viewType === "list" ? "active" : ""} fs-6`}
-                                onClick={() => setViewType("card")} // You might want to default to 'card' when switching to contacts
-                                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-2">
-                <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-2">
-
-                    <input
-                        type="search"
-                        className="form-control me-0"
-                        placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
-                        value={searchText}
-                        onChange={(e) => setSearchText(e.target.value)}
-                        style={{ width: "200px", height: "30px" }}
-                    />
-
-                    {/* Filter by funnel icon for Notes view */}
-                    {viewType === "notes" && (
-                        <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 className={`bx bx-slider-alt ${notesFilterCount > 0 ? "text-primary" : "text-muted"}`}></i>
-                                {notesFilterCount > 0 && (
-                                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
-                                        {notesFilterCount}
-                                    </span>
-                                )}
-                            </a>
-
-                            <div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
-                                {/* Scrollable Filter Content */}
-                                <div
-                                    className="p-3"
-                                    style={{
-                                        maxHeight: "300px",
-                                        overflowY: "auto",
-                                        overflowX: "hidden",
-                                        whiteSpace: "normal"
-                                    }}
-                                >
-                                    {allCreators.length === 0 && filteredOrganizations.length === 0 ? (
-                                        <div className="text-center text-muted py-5">
-                                            No filter found
-                                        </div>
-                                    ) : (
-                                        <div className="d-flex gap-3">
-                                            {/* Created By */}
-                                            <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
-                                                <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
-                                                    <p className="text-muted mb-2 pt-2">Created By</p>
-                                                </div>
-                                                {allCreators.map((name, idx) => (
-                                                    <div className="form-check mb-1" key={`creator-${idx}`}>
-                                                        <input
-                                                            className="form-check-input form-check-input-sm"
-                                                            type="checkbox"
-                                                            id={`creator-${idx}`}
-                                                            checked={selectedCreators.includes(name)}
-                                                            onChange={() => handleToggleCreator(name)}
-                                                            style={{ width: "1rem", height: "1rem" }}
-                                                        />
-                                                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
-                                                            {name}
-                                                        </label>
-                                                    </div>
-                                                ))}
-                                            </div>
-
-                                            {/* Organization */}
-                                            <div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden" }}>
-                                                <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
-                                                    <p className="text-muted mb-2 pt-2">Organization</p>
-                                                </div>
-                                                {filteredOrganizations.map((org, idx) => (
-                                                    <div className="form-check mb-1" key={`org-${idx}`}>
-                                                        <input
-                                                            className="form-check-input form-check-input-sm"
-                                                            type="checkbox"
-                                                            id={`org-${idx}`}
-                                                            checked={selectedOrgs.includes(org)}
-                                                            onChange={() => handleToggleOrg(org)}
-                                                            style={{ width: "1rem", height: "1rem" }}
-                                                        />
-                                                        <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
-                                                            {org}
-                                                        </label>
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-
-
-                                {/* Sticky Footer Buttons */}
-                                <div
-                                    className="d-flex justify-content-end gap-2 p-2 "
-                                    style={{
-                                        background: "#fff",
-                                        position: "sticky",
-                                        bottom: 0
-                                    }}
-                                >
-                                    <button
-                                        className="btn btn-xs btn-secondary"
-                                        onClick={() => {
-                                            setSelectedCreators([]);
-                                            setSelectedOrgs([]);
-                                            setFilteredOrganizations(allOrganizations);
-                                            setFilterAppliedNotes(notesForFilter);
-                                        }}
-                                    >
-                                        Clear
-                                    </button>
-                                    <button
-                                        className="btn btn-xs 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-sm p-1 ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
-                                onClick={() => setViewType("card")}
-                            >
-                                <i className="bx bx-grid-alt"></i>
-                            </button>
-                            <button
-                                type="button"
-                                className={`btn  btn-sm p-1 ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
-                                onClick={() => setViewType("list")}
-                            >
-                                <i className="bx bx-list-ul"></i>
-
-                            </button>
-                        </div>
-                    )}
-
-                    {/* Filter by funnel icon for Contacts view (retains numerical badge) */}
-                    {viewType !== "notes" && (
-                        <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 className={`bx bx-slider-alt ${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: "700px" }}>
-                                <p className="text-muted m-0 h6">Filter by</p>
-
-                                {filteredBuckets.length === 0 && filteredCategories.length === 0 ? (
-                                    <div className="text-center text-muted py-5">
-                                        No filter found
-                                    </div>
-                                ) : (
-                                    <div className="d-flex flex-nowrap">
-                                        <div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
-                                            <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: "calc(50% - 15px)" }}
-                                                        key={id}
-                                                    >
-                                                        <input
-                                                            className="form-check-input form-check-input-sm"
-                                                            type="checkbox"
-                                                            id={`bucket-${id}`}
-                                                            checked={tempSelectedBucketIds.includes(id)}
-                                                            onChange={() => handleTempBucketChange(id)}
-                                                            style={{ width: "1rem", height: "1rem" }}
-                                                        />
-                                                        <label
-                                                            className="form-check-label text-nowrap text-small"
-                                                            htmlFor={`bucket-${id}`}
-                                                        >
-                                                            {name}
-                                                        </label>
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </div>
-
-                                        <div className="mt-1" style={{ flexBasis: "50%" }}>
-                                            <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: "calc(50% - 15px)" }}
-                                                        key={id}
-                                                    >
-                                                        <input
-                                                            className="form-check-input form-check-input-sm"
-                                                            type="checkbox"
-                                                            id={`cat-${id}`}
-                                                            checked={tempSelectedCategoryIds.includes(id)}
-                                                            onChange={() => handleTempCategoryChange(id)}
-                                                            style={{ width: "1rem", height: "1rem" }}
-                                                        />
-                                                        <label
-                                                            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">
-                                    <button
-                                        className="btn btn-xs btn-secondary"
-                                        onClick={(e) => {
-                                            clearFilter();
-                                        }}
-                                    >
-                                        Clear
-                                    </button>
-                                    <button
-                                        className="btn btn-xs btn-primary"
-                                        onClick={(e) => {
-                                            applyFilter();
-                                        }}
-                                    >
-                                        Apply Filter
-                                    </button>
-                                </div>
-                            </ul>
-
-                        </div>
-                    )}
-                </div>
-
-                <div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
-                    {(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>
-                    )}
-
-                    <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("csv"); }}>
-                                    <i className="bx bx-file me-1"></i> CSV
-                                </a>
-                            </li>
-                            <li>
-                                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("excel"); }}>
-                                    <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>
-            </div>
-        </>
     );
+  }, [viewType, notesForFilter, handleApplyContactsFilter, handleApplyNotesFilter]);
+
+  useEffect(() => {
+    setShowTrigger(true);
+    setOffcanvasContent(
+      viewType === "notes" ? "Notes Filters" : "Contacts Filters",
+      filterPanelElement
+    );
+    return () => {
+      setShowTrigger(false);
+      setOffcanvasContent("", null);
+    };
+  }, [viewType, filterPanelElement]);
+
+  // ----------------- UI -----------------
+  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">
+            <li className="nav-item">
+              <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">
+              <button
+                className={`nav-link ${viewType !== "notes" ? "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" />
+
+      {/* Search + Filter Trigger + View Toggle */}
+      <div className="row mx-0 px-0 align-items-center mt-2">
+        <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-2">
+          <input
+            type="search"
+            className="form-control"
+            placeholder={viewType === "notes" ? "Search Notes..." : "Search Contacts..."}
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            style={{ width: "200px", height: "30px" }}
+          />
+
+          {/* View toggles */}
+          {viewType !== "notes" && (
+            <div className="d-flex gap-2">
+              <button
+                type="button"
+                className={`btn btn-sm p-1 ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
+                onClick={() => setViewType("card")}
+              >
+                <i className="bx bx-grid-alt"></i>
+              </button>
+              <button
+                type="button"
+                className={`btn btn-sm p-1 ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
+                onClick={() => setViewType("list")}
+              >
+                <i className="bx bx-list-ul"></i>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Export + Toggle inactive */}
+        <div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
+          {(viewType === "card" || viewType === "list") && (
+            <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>
+          )}
+
+          <div className="btn-group">
+            <button
+              className="btn btn-sm btn-label-secondary dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+            >
+              <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("csv");
+                  }}
+                >
+                  <i className="bx bx-file me-1"></i> CSV
+                </a>
+              </li>
+              <li>
+                <a
+                  className="dropdown-item"
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleExport("excel");
+                  }}
+                >
+                  <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>
+      </div>
+    </>
+  );
 };
 
 export default DirectoryPageHeader;