src/pages/Directory/Directory.jsx

@@ -4,7 +4,7 @@ import IconButton from "../../components/common/IconButton";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageDirectory from "../../components/Directory/ManageDirectory";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
-import { useDirectory } from "../../hooks/useDirectory";
+import { useBuckets, useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -20,14 +20,16 @@ const Directory = () => {
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
   const [open_contact, setOpen_contact] = useState(null);
-  const [ContatList, setContactList] = useState([]);
+  const [ContactList, setContactList] = useState([]);
   const [contactCategories, setContactCategories] = useState([]);
   const [searchText, setSearchText] = useState("");
   const [listView, setListView] = useState(false);
+  const [selectedBucketIds, setSelectedBucketIds] = useState([]);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
+  const { buckets } = useBuckets();
   const submitContact = async (data) => {
     try {
       let response;
@@ -83,17 +85,38 @@ const Directory = () => {
       prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
     );
   };
+
+  const handleBucketChange = (id) => {
+    setSelectedBucketIds((prev) =>
+      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
+    );
+  };
+  const usedBucketIds = [
+    ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
+  ];
+
+  const filteredBuckets = buckets.filter((bucket) =>
+    usedBucketIds.includes(bucket.id)
+  );
+
   const filteredContacts = useMemo(() => {
-    return ContatList.filter((c) => {
+    return ContactList.filter((c) => {
       const matchesSearch =
         c.name.toLowerCase().includes(searchText.toLowerCase()) ||
         c.organization.toLowerCase().includes(searchText.toLowerCase());
+
       const matchesCategory =
         selectedCategoryIds.length === 0 ||
         selectedCategoryIds.includes(c.contactCategory?.id);
-      return matchesSearch && matchesCategory;
+
+      const matchesBucket =
+        selectedBucketIds.length === 0 ||
+        (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
+
+      return matchesSearch && matchesCategory && matchesBucket;
     }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContatList, searchText, selectedCategoryIds]);
+  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -129,10 +152,9 @@ const Directory = () => {
       {isOpenModal && (
         <GlobalModel
           isOpen={isOpenModal}
-          closeModal={() =>
+          closeModal={() => {
-          {
+            setSelectedContact(null);
-            setSelectedContact(null)
+            setIsOpenModal(false);
-             setIsOpenModal(false)
           }}
           size="lg"
         >
@@ -142,14 +164,19 @@ const Directory = () => {
       {isOpenModalNote && (
         <GlobalModel
           isOpen={isOpenModalNote}
-          closeModal={() =>
+          closeModal={() => {
-          {
+            setOpen_contact(null);
-            setOpen_contact(null)
+            setIsOpenModalNote(false);
-            setIsOpenModalNote(false)
           }}
           size="lg"
         >
-          {open_contact && <ProfileContactDirectory contact={open_contact} setOpen_contact={setOpen_contact} closeModal={ () => setIsOpenModalNote(false)} />}
+          {open_contact && (
+            <ProfileContactDirectory
+              contact={open_contact}
+              setOpen_contact={setOpen_contact}
+              closeModal={() => setIsOpenModalNote(false)}
+            />
+          )}
         </GlobalModel>
       )}
       <div className="card p-2">
@@ -200,22 +227,56 @@ const Directory = () => {
               >
                 <i className="bx bx-filter bx-lg  ms-1"></i>
               </a>
-              <ul className="dropdown-menu p-2 text-capitalize">
+              <ul
-                <p className="small-text">Apply Filter</p>
+                className="dropdown-menu p-2 text-capitalize"
-                {filteredCategories.map(({ id, name }) => (
+                style={{ Width: "100%" }}
-                  <li key={id}>
+              >
-                    <div className="form-check">
+                <p className="small-text text-muted m-0">Filter by</p>
-                      <input
+                <div className="d-flex gap-4 justify-content-between">
-                        className="form-check-input"
+                  {/* Bucket Filter */}
-                        type="checkbox"
+                  <div className="flex-fill ">
-                        id={`cat-${id}`}
+                    <p className="small-text mb-2 ">Buckets</p>
-                        checked={selectedCategoryIds.includes(id)}
+                    {filteredBuckets.map(({ id, name }) => (
-                        onChange={() => handleCategoryChange(id)}
+                      <div className="form-check mb-1" key={id}>
-                      />
+                        <input
-                      <label className="form-check-label">{name}</label>
+                          className="form-check-input  "
-                    </div>
+                          type="checkbox"
-                  </li>
+                          id={`bucket-${id}`}
-                ))}
+                          checked={selectedBucketIds.includes(id)}
+                          onChange={() => handleBucketChange(id)}
+                        />
+                        <label
+                          className="form-check-label text-nowrap"
+                          htmlFor={`bucket-${id}`}
+                        >
+                          {name}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Category Filter */}
+                  <div className="flex-fill">
+                    <p className="small-text mb-2">Categories</p>
+                    {filteredCategories.map(({ id, name }) => (
+                      <div className="form-check mb-1" key={id}>
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`cat-${id}`}
+                          checked={selectedCategoryIds.includes(id)}
+                          onChange={() => handleCategoryChange(id)}
+                        />
+                        <label
+                          className="form-check-label text-nowrap"
+                          htmlFor={`cat-${id}`}
+                        >
+                          {name}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
               </ul>
             </div>
           </div>
@@ -232,6 +293,7 @@ const Directory = () => {
           </div>
         </div>
         {!listView && loading && <p>Loading...</p>}
+        {!listView && !loading && currentItems.length == 0  && <p>Not Found Contact</p>}
         {listView ? (
           <div className="table-responsive text-nowrap py-2 ">
             <table className="table px-2">
@@ -282,9 +344,6 @@ const Directory = () => {
                   </th>
                   <th className="mx-2">Category</th>
                   <th
-                  //   className={`mx-2 ${
-                  //     HasManageProject ? "d-sm-table-cell" : "d-none"
-                  //   }`}
                   >
                     Action
                   </th>
@@ -297,12 +356,12 @@ const Directory = () => {
                   </tr>
                 )}
                 {!loading &&
-                  contacts.length == 0 &&
+                  currentItems.length === 0 && (
-                  ContatList.length === 0 && (
                     <tr>
-                      <td colSpan={10}>No Contact Found</td>
+                      <td colSpan={10}>Not Found Contact</td>
                     </tr>
                   )}
+                
                 {!loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory