diff --git a/src/components/Directory/NoteCardDirectoryEditable.jsx b/src/components/Directory/NoteCardDirectoryEditable.jsx index e6991c2e..7759e62a 100644 --- a/src/components/Directory/NoteCardDirectoryEditable.jsx +++ b/src/components/Directory/NoteCardDirectoryEditable.jsx @@ -115,7 +115,7 @@ const NoteCardDirectoryEditable = ({ )}
contactProfile(noteItem.contactId)}> {noteItem?.contactName} - ( {noteItem?.organizationName}) + ({noteItem?.organizationName}) @@ -220,7 +220,7 @@ const NoteCardDirectoryEditable = ({ ) : (
)} diff --git a/src/components/Directory/NotesCardViewDirectory.jsx b/src/components/Directory/NotesCardViewDirectory.jsx index d29354d7..0dbbe5bd 100644 --- a/src/components/Directory/NotesCardViewDirectory.jsx +++ b/src/components/Directory/NotesCardViewDirectory.jsx @@ -133,11 +133,11 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp style={{ marginBottom: '70px' }}> {/* Previous Button */} @@ -148,10 +148,8 @@ const NotesCardViewDirectory = ({ notes, setNotesForFilter, searchText, filterAp return ( diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx index 5ddb37c8..61908853 100644 --- a/src/components/Directory/NotesDirectory.jsx +++ b/src/components/Directory/NotesDirectory.jsx @@ -135,7 +135,7 @@ const NotesDirectory = ({
setAddNote(!addNote)} > {addNote ? "Hide Editor" : "Add a Note"} diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx index 7cb4b0f1..e3c34b30 100644 --- a/src/components/Employee/ManageEmployee.jsx +++ b/src/components/Employee/ManageEmployee.jsx @@ -172,8 +172,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => { .then((response) => { cacheData("employeeProfileInfo", data); showToast( - `Employee details ${ - data.id == null ? "created" : "updated" + `Employee details ${data.id == null ? "created" : "updated" } successfully.`, "success" ); @@ -207,24 +206,24 @@ const ManageEmployee = ({ employeeId, onClosed }) => { reset( currentEmployee ? { - id: currentEmployee.id || null, - firstName: currentEmployee.firstName || "", - middleName: currentEmployee.middleName || "", - lastName: currentEmployee.lastName || "", - email: currentEmployee.email || "", - currentAddress: currentEmployee.currentAddress || "", - birthDate: formatDate(currentEmployee.birthDate) || "", - joiningDate: formatDate(currentEmployee.joiningDate) || "", - emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "", - emergencyContactPerson: - currentEmployee.emergencyContactPerson || "", - aadharNumber: currentEmployee.aadharNumber || "", - gender: currentEmployee.gender || "", - panNumber: currentEmployee.panNumber || "", - permanentAddress: currentEmployee.permanentAddress || "", - phoneNumber: currentEmployee.phoneNumber || "", - jobRoleId: currentEmployee.jobRoleId?.toString() || "", - } + id: currentEmployee.id || null, + firstName: currentEmployee.firstName || "", + middleName: currentEmployee.middleName || "", + lastName: currentEmployee.lastName || "", + email: currentEmployee.email || "", + currentAddress: currentEmployee.currentAddress || "", + birthDate: formatDate(currentEmployee.birthDate) || "", + joiningDate: formatDate(currentEmployee.joiningDate) || "", + emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "", + emergencyContactPerson: + currentEmployee.emergencyContactPerson || "", + aadharNumber: currentEmployee.aadharNumber || "", + gender: currentEmployee.gender || "", + panNumber: currentEmployee.panNumber || "", + permanentAddress: currentEmployee.permanentAddress || "", + phoneNumber: currentEmployee.phoneNumber || "", + jobRoleId: currentEmployee.jobRoleId?.toString() || "", + } : {} // Empty object resets the form ); setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0); @@ -233,410 +232,417 @@ const ManageEmployee = ({ employeeId, onClosed }) => { return ( <> - - {/*
+ + {/*
{!currentEmployee && empLoading && employeeId && (

Loading Employee Data...

)} */} -
+ + {/* Cross button */} +

{employee ? "Update Employee" : "Create Employee"}

-
-
- {" "} -
First Name
- - {errors.firstName && ( -
- {errors.firstName.message} -
- )} -
{" "} -
-
Middle Name
+
+
+ {" "} +
First Name
+ + {errors.firstName && ( +
+ {errors.firstName.message} +
+ )} +
{" "} +
+
Middle Name
- - {errors.middleName && ( -
- {errors.middleName.message} -
- )} -
-
-
Last Name
- - {errors.lastName && ( -
- {errors.lastName.message} -
- )} -
-
-
-
-
Email
- - {errors.email && ( -
- {errors.email.message} -
- )} -
-
-
Phone Number
- - {errors.phoneNumber && ( -
- {errors.phoneNumber.message} -
- )} -
-
-
-
-
-
Gender
+ + {errors.middleName && ( +
+ {errors.middleName.message} +
+ )} +
+
+
Last Name
+ + {errors.lastName && ( +
+ {errors.lastName.message} +
+ )} +
+
+
+
+
Email
+ + {errors.email && ( +
+ {errors.email.message} +
+ )} +
+
+
Phone Number
+ + {errors.phoneNumber && ( +
+ {errors.phoneNumber.message} +
+ )} +
+
+
+
+
+
Gender
-
- -
- {errors.gender && ( -
- {errors.gender.message} -
- )} -
-
-
Birth Date
+
+ +
+ {errors.gender && ( +
+ {errors.gender.message} +
+ )} +
+
+
Birth Date
-
- -
- {errors.birthDate && ( -
- {errors.birthDate.message} -
- )} -
-
-
Joining Date
+
+ +
+ {errors.birthDate && ( +
+ {errors.birthDate.message} +
+ )} +
+
+
Joining Date
-
- -
- {errors.joiningDate && ( -
- {errors.joiningDate.message} -
- )} -
-
-
-
-
Current Address
+
+ +
+ {errors.joiningDate && ( +
+ {errors.joiningDate.message} +
+ )} +
+
+
+
+
Current Address
- -
- - {" "} - {500 - currentAddressLength} characters left - -
- {errors.currentAddress && ( -
- {errors.currentAddress.message} -
- )} -
-
-
- Permanent Address -
+ +
+ + {" "} + {500 - currentAddressLength} characters left + +
+ {errors.currentAddress && ( +
+ {errors.currentAddress.message} +
+ )} +
+
+
+ Permanent Address +
- -
- - {500 - permanentAddressLength} characters left - -
- {errors.permanentAddress && ( -
- {errors.permanentAddress.message} -
- )} -
-
-
- {" "} -
-
Other Information
-
-
-
-
-
Role
-
- -
- {errors.jobRoleId && ( -
- {errors.jobRoleId.message} -
- )} -
-
-
- Emergency Contact Person -
- - {errors.emergencyContactPerson && ( -
- {errors.emergencyContactPerson.message} -
- )} -
-
-
- Emergency Phone Number -
- - {errors.emergencyPhoneNumber && ( -
- {errors.emergencyPhoneNumber.message} -
- )} -
-
-
-
-
AADHAR Number
+ +
+ + {500 - permanentAddressLength} characters left + +
+ {errors.permanentAddress && ( +
+ {errors.permanentAddress.message} +
+ )} +
+
+
+ {" "} +
+
Other Information
+
+
+
+
+
Role
+
+ +
+ {errors.jobRoleId && ( +
+ {errors.jobRoleId.message} +
+ )} +
+
+
+ Emergency Contact Person +
+ + {errors.emergencyContactPerson && ( +
+ {errors.emergencyContactPerson.message} +
+ )} +
+
+
+ Emergency Phone Number +
+ + {errors.emergencyPhoneNumber && ( +
+ {errors.emergencyPhoneNumber.message} +
+ )} +
+
+
+
+
AADHAR Number
- - {errors.aadharNumber && ( -
- {errors.aadharNumber.message} -
- )} -
-
-
PAN Number
+ + {errors.aadharNumber && ( +
+ {errors.aadharNumber.message} +
+ )} +
+
+
PAN Number
- - {errors.panNumber && ( -
- {errors.panNumber.message} -
- )} -
-
+ + {errors.panNumber && ( +
+ {errors.panNumber.message} +
+ )} +
+
- {employeeId && ( -
-
- -
-
- )} + {employeeId && ( +
+
+ +
+
+ )} -
-
- +
+
+ + + +
+
+ - -
-
- - ); }; diff --git a/src/pages/Activities/TaskPlannng.jsx b/src/pages/Activities/TaskPlannng.jsx index d4fcd2a1..d532696e 100644 --- a/src/pages/Activities/TaskPlannng.jsx +++ b/src/pages/Activities/TaskPlannng.jsx @@ -112,7 +112,7 @@ const TaskPlannng = () => { {project_listLoader &&

Loading..

} diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx index 48e28f28..6a3ae418 100644 --- a/src/pages/Directory/DirectoryPageHeader.jsx +++ b/src/pages/Directory/DirectoryPageHeader.jsx @@ -2,538 +2,558 @@ import React, { useEffect, useState } from "react"; import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils"; const DirectoryPageHeader = ({ - searchText, - setSearchText, - setIsActive, - viewType, - setViewType, - filteredBuckets, - tempSelectedBucketIds, - handleTempBucketChange, - filteredCategories, - tempSelectedCategoryIds, - handleTempCategoryChange, - clearFilter, - applyFilter, - loading, - IsActive, - contactsToExport, - notesToExport, - selectedNoteNames, - setSelectedNoteNames, - notesForFilter, - setFilterAppliedNotes + searchText, + setSearchText, + setIsActive, + viewType, + setViewType, + filteredBuckets, + tempSelectedBucketIds, + handleTempBucketChange, + filteredCategories, + tempSelectedCategoryIds, + handleTempCategoryChange, + clearFilter, + applyFilter, + loading, + IsActive, + contactsToExport, + notesToExport, + selectedNoteNames, + setSelectedNoteNames, + notesForFilter, + setFilterAppliedNotes }) => { - const [filtered, setFiltered] = useState(0); - const [filteredNotes, setFilteredNotes] = useState([]); - const [noteCreators, setNoteCreators] = useState([]); - const [allCreators, setAllCreators] = useState([]); - const [allOrganizations, setAllOrganizations] = useState([]); - const [filteredOrganizations, setFilteredOrganizations] = useState([]); - const [selectedCreators, setSelectedCreators] = useState([]); - const [selectedOrgs, setSelectedOrgs] = useState([]); + const [filtered, setFiltered] = useState(0); + const [filteredNotes, setFilteredNotes] = useState([]); + const [noteCreators, setNoteCreators] = useState([]); + const [allCreators, setAllCreators] = useState([]); + const [allOrganizations, setAllOrganizations] = useState([]); + const [filteredOrganizations, setFilteredOrganizations] = useState([]); + const [selectedCreators, setSelectedCreators] = useState([]); + const [selectedOrgs, setSelectedOrgs] = useState([]); - useEffect(() => { - setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length); - }, [tempSelectedBucketIds, tempSelectedCategoryIds]); + useEffect(() => { + setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length); + }, [tempSelectedBucketIds, tempSelectedCategoryIds]); + // New state to track active filters for notes + const [notesFilterCount, setNotesFilterCount] = useState(0); - useEffect(() => { - if (viewType === "notes") { - if (notesToExport && notesToExport.length > 0) { - const uniqueNames = [...new Set(notesToExport.map(note => { - const firstName = note.createdBy?.firstName || ""; - const lastName = note.createdBy?.lastName || ""; - return `${firstName} ${lastName}`.trim(); - }).filter(name => name !== ""))]; - setNoteCreators(uniqueNames.sort()); - } else { - setNoteCreators([]); - } - } else { - setNoteCreators([]); - } - }, [notesToExport, viewType]); + useEffect(() => { + // Calculate the number of active filters for notes + setNotesFilterCount(selectedCreators.length + selectedOrgs.length); + }, [selectedCreators, selectedOrgs]); - // Separate effect to clear selection only when switching away from notes - useEffect(() => { - if (viewType !== "notes" && selectedNoteNames.length > 0) { - setSelectedNoteNames([]); - } - }, [viewType]); - - useEffect(() => { - const creatorsSet = new Set(); - const orgsSet = new Set(); - - notesForFilter.forEach((note) => { - const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim(); - if (creator) creatorsSet.add(creator); - - const org = note.organizationName; - if (org) orgsSet.add(org); - }); - - setAllCreators([...creatorsSet].sort()); - setAllOrganizations([...orgsSet].sort()); - setFilteredOrganizations([...orgsSet].sort()); - }, [notesForFilter]) - - - const handleToggleNoteName = (name) => { - setSelectedNoteNames(prevSelectedNames => { - if (prevSelectedNames.includes(name)) { - return prevSelectedNames.filter(n => n !== name); - } else { - return [...prevSelectedNames, name]; - } - }); - }; - - const updateFilteredOrganizations = () => { - if (selectedCreators.length === 0) { - setFilteredOrganizations(allOrganizations); - return; - } - - const filteredOrgsSet = new Set(); - notesForFilter.forEach((note) => { - const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim(); - if (selectedCreators.includes(creator)) { - if (note.organizationName) { - filteredOrgsSet.add(note.organizationName); + useEffect(() => { + if (viewType === "notes") { + if (notesToExport && notesToExport.length > 0) { + const uniqueNames = [...new Set(notesToExport.map(note => { + const firstName = note.createdBy?.firstName || ""; + const lastName = note.createdBy?.lastName || ""; + return `${firstName} ${lastName}`.trim(); + }).filter(name => name !== ""))]; + setNoteCreators(uniqueNames.sort()); + } else { + setNoteCreators([]); + } + } else { + setNoteCreators([]); } - } - }); + }, [notesToExport, viewType]); - 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); - }; - - useEffect(() => { - updateFilteredOrganizations(); - }, [selectedCreators]); - - const handleExport = (type) => { - let dataToExport = []; - - if (viewType === "notes") { - if (!notesToExport || notesToExport.length === 0) { - console.warn("No notes to export."); - return; - } - - const decodeHtmlEntities = (html) => { - const textarea = document.createElement("textarea"); - textarea.innerHTML = html; - return textarea.value; - }; - - const cleanNoteText = (html) => { - if (!html) return ""; - const stripped = html.replace(/<[^>]+>/g, ""); - const decoded = decodeHtmlEntities(stripped); - return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); - }; - - const cleanName = (name) => { - if (!name) return ""; - return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim(); - }; - - dataToExport = notesToExport.map(note => ({ - "Name": cleanName(`${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`), - "Notes": cleanNoteText(note.note), - "Created At": note.createdAt - ? new Date(note.createdAt).toLocaleString("en-IN") - : "", - "Updated At": note.updatedAt - ? new Date(note.updatedAt).toLocaleString("en-IN") - : "", - "Updated By": cleanName( - `${note.updatedBy?.firstName || ""} ${note.updatedBy?.lastName || ""}` - ), - })); - - } else { - if (!contactsToExport || contactsToExport.length === 0) { - console.warn("No contacts to export."); - return; - } - - dataToExport = contactsToExport.map(contact => ({ - Name: contact.name || '', - Organization: contact.organization || '', - Email: contact.contactEmails?.map(email => email.emailAddress).join(', ') || '', - Phone: contact.contactPhones?.map(phone => phone.phoneNumber).join(', ') || '', - Category: contact.contactCategory?.name || '', - Tags: contact.tags?.map(tag => tag.name).join(', ') || '', - })); - } - - const today = new Date(); - const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`; - - const filename = - viewType === "notes" - ? `Directory_Notes_${formattedDate}` - : `Directory_Contacts_${formattedDate}`; - - 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); - } + // Separate effect to clear selection only when switching away from notes + useEffect(() => { + if (viewType !== "notes" && selectedNoteNames.length > 0) { + setSelectedNoteNames([]); } - }; - extractStrings(noteItem); - stringValues.push(plainNote, creator.toLowerCase()); + }, [viewType]); - const matchesSearch = stringValues.some((val) => val.includes(lowerSearch)); + useEffect(() => { + const creatorsSet = new Set(); + const orgsSet = new Set(); - return matchesCreator && matchesOrg && matchesSearch; - }); + notesForFilter.forEach((note) => { + const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim(); + if (creator) creatorsSet.add(creator); - setFilteredNotes(filtered); - setFilterAppliedNotes(filtered); - }; + const org = note.organizationName; + if (org) orgsSet.add(org); + }); - return ( - <> -
-
-
    -
  • - -
    • -
  • - -
    • -
-
-
-
+ setAllCreators([...creatorsSet].sort()); + setAllOrganizations([...orgsSet].sort()); + setFilteredOrganizations([...orgsSet].sort()); + }, [notesForFilter]) -
-
- setSearchText(e.target.value)} - style={{ width: "200px",height: "30px" }} - /> + const handleToggleNoteName = (name) => { + setSelectedNoteNames(prevSelectedNames => { + if (prevSelectedNames.includes(name)) { + return prevSelectedNames.filter(n => n !== name); + } else { + return [...prevSelectedNames, name]; + } + }); + }; - {/* Filter by funnel icon for Notes view */} - {viewType === "notes" && ( -
- + const updateFilteredOrganizations = () => { + if (selectedCreators.length === 0) { + setFilteredOrganizations(allOrganizations); + return; + } -
-
- {/* Created By */} -
-

Created By

- {allCreators.map((name, idx) => ( -
- handleToggleCreator(name)} - /> - -
- ))} -
+ const filteredOrgsSet = new Set(); + notesForFilter.forEach((note) => { + const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim(); + if (selectedCreators.includes(creator)) { + if (note.organizationName) { + filteredOrgsSet.add(note.organizationName); + } + } + }); - {/* Organization */} -
-

Organization

- {filteredOrganizations.map((org, idx) => ( -
- handleToggleOrg(org)} - /> - -
- ))} -
+ 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); + }; + + return ( + <> +
+
+
    +
  • + +
    • +
  • + +
    • +
- - {/* Buttons */} -
- - -
-
-
- )} +
+
+
- {(viewType === "card" || viewType === "list") && ( -
+ setSearchText(e.target.value)} + style={{ width: "200px", height: "30px" }} + /> - - -
- )} +
+ {/* Scrollable Filter Content */} +
+
+ {/* Created By */} +
+
+

Created By

+
+ {allCreators.map((name, idx) => ( +
+ handleToggleCreator(name)} + /> + +
+ ))} +
- {/* Filter by funnel icon for Contacts view (retains numerical badge) */} - {viewType !== "notes" && ( -
- + {/* Organization */} +
+
+

Organization

+
+ {filteredOrganizations.map((org, idx) => ( +
+ handleToggleOrg(org)} + /> + +
+ ))} +
+
-
    -

    Filter by

    +
-
-
-

Buckets

-
- {filteredBuckets.map(({ id, name }) => ( -
- handleTempBucketChange(id)} - /> - + {/* Sticky Footer Buttons */} +
+ + +
+
- ))} -
-
-
-

Categories

-
- {filteredCategories.map(({ id, name }) => ( -
- handleTempCategoryChange(id)} - /> - + )} + + + {(viewType === "card" || viewType === "list") && ( +
+ + +
- ))} + )} + + {/* Filter by funnel icon for Contacts view (retains numerical badge) */} + {viewType !== "notes" && ( +
+ + +
    +

    Filter by

    + +
    +
    +

    Buckets

    +
    + {filteredBuckets.map(({ id, name }) => ( +
    + handleTempBucketChange(id)} + /> + +
    + ))} +
    +
    +
    +

    Categories

    +
    + {filteredCategories.map(({ id, name }) => ( +
    + handleTempCategoryChange(id)} + /> + +
    + ))} +
    +
    +
    + +
    + + +
    +
+
+ )} +
+ +
+ {(viewType === "list" || viewType === "card") && ( + + )} + + -
-
-
- -
-
- )} -
- -
- {(viewType === "list" || viewType === "card") && ( - - )} - - - -
-
- - ); + + ); }; export default DirectoryPageHeader; \ No newline at end of file