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,17 @@ 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 [ 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 +86,38 @@ const Directory = () => {
       prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
     );
   };
-  const filteredContacts = useMemo(() => {
+
-    return ContatList.filter((c) => {
+  const handleBucketChange = (id) => {
-      const matchesSearch =
+  setSelectedBucketIds((prev) =>
-        c.name.toLowerCase().includes(searchText.toLowerCase()) ||
+    prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
-        c.organization.toLowerCase().includes(searchText.toLowerCase());
+  );
-      const matchesCategory =
+};
-        selectedCategoryIds.length === 0 ||
+const usedBucketIds = [
-        selectedCategoryIds.includes(c.contactCategory?.id);
+  ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
-      return matchesSearch && matchesCategory;
+];
-    }).sort((a, b) => a.name.localeCompare(b.name));
+
-  }, [ContatList, searchText, selectedCategoryIds]);
+const filteredBuckets = buckets.filter((bucket) =>
+  usedBucketIds.includes(bucket.id)
+);
+
+const filteredContacts = useMemo(() => {
+  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);
+
+    const matchesBucket =
+      selectedBucketIds.length === 0 ||
+      (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
+
+    return matchesSearch && matchesCategory && matchesBucket;
+  }).sort((a, b) => a.name.localeCompare(b.name));
+}, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -201,22 +225,48 @@ const Directory = () => {
                 <i className="bx bx-filter bx-lg  ms-1"></i>
               </a>
               <ul className="dropdown-menu p-2 text-capitalize">
-                <p className="small-text">Apply Filter</p>
+
-                {filteredCategories.map(({ id, name }) => (
+                
-                  <li key={id}>
+  <p className="small-text mb-1">Apply Bucket Filter</p>
-                    <div className="form-check">
+  {filteredBuckets.map(({ id, name }) => (
-                      <input
+    <li key={id}>
-                        className="form-check-input"
+      <div className="form-check">
-                        type="checkbox"
+        <input
-                        id={`cat-${id}`}
+          className="form-check-input"
-                        checked={selectedCategoryIds.includes(id)}
+          type="checkbox"
-                        onChange={() => handleCategoryChange(id)}
+          id={`bucket-${id}`}
-                      />
+          checked={selectedBucketIds.includes(id)}
-                      <label className="form-check-label">{name}</label>
+          onChange={() => handleBucketChange(id)}
-                    </div>
+        />
-                  </li>
+        <label className="form-check-label" htmlFor={`bucket-${id}`}>
-                ))}
+          {name}
-              </ul>
+        </label>
+      </div>
+    </li>
+  ) )}
+                  <hr className="my-2" />
+  <p className="small-text mb-1">Apply Category Filter</p>
+  {filteredCategories.map(({ id, name }) => (
+    <li key={id}>
+      <div className="form-check">
+        <input
+          className="form-check-input"
+          type="checkbox"
+          id={`cat-${id}`}
+          checked={selectedCategoryIds.includes(id)}
+          onChange={() => handleCategoryChange(id)}
+        />
+        <label className="form-check-label" htmlFor={`cat-${id}`}>
+          {name}
+        </label>
+      </div>
+    </li>
+  ))}
+
+
+
+</ul>
+
             </div>
           </div>