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 { useBuckets, useDirectory } from "../../hooks/useDirectory";
+import { useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import { getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -20,16 +20,14 @@ const Directory = () => {
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
   const [open_contact, setOpen_contact] = useState(null);
-  const [ContactList, setContactList] = useState([]);
+  const [ContatList, 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;
@@ -85,38 +83,17 @@ 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 ContactList.filter((c) => {
+    return ContatList.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));
-  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
+  }, [ContatList, searchText, selectedCategoryIds]);
-
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -152,9 +129,10 @@ const Directory = () => {
       {isOpenModal && (
         <GlobalModel
           isOpen={isOpenModal}
-          closeModal={() => {
+          closeModal={() =>
-            setSelectedContact(null);
+          {
-            setIsOpenModal(false);
+            setSelectedContact(null)
+             setIsOpenModal(false)
           }}
           size="lg"
         >
@@ -164,19 +142,14 @@ const Directory = () => {
       {isOpenModalNote && (
         <GlobalModel
           isOpen={isOpenModalNote}
-          closeModal={() => {
+          closeModal={() =>
-            setOpen_contact(null);
+          {
-            setIsOpenModalNote(false);
+            setOpen_contact(null)
+            setIsOpenModalNote(false)
           }}
           size="lg"
         >
-          {open_contact && (
+          {open_contact && <ProfileContactDirectory contact={open_contact} setOpen_contact={setOpen_contact} closeModal={ () => setIsOpenModalNote(false)} />}
-            <ProfileContactDirectory
-              contact={open_contact}
-              setOpen_contact={setOpen_contact}
-              closeModal={() => setIsOpenModalNote(false)}
-            />
-          )}
         </GlobalModel>
       )}
       <div className="card p-2">
@@ -227,56 +200,22 @@ const Directory = () => {
               >
                 <i className="bx bx-filter bx-lg  ms-1"></i>
               </a>
-              <ul
+              <ul className="dropdown-menu p-2 text-capitalize">
-                className="dropdown-menu p-2 text-capitalize"
+                <p className="small-text">Apply Filter</p>
-                style={{ Width: "100%" }}
+                {filteredCategories.map(({ id, name }) => (
-              >
+                  <li key={id}>
-                <p className="small-text text-muted m-0">Filter by</p>
+                    <div className="form-check">
-                <div className="d-flex gap-4 justify-content-between">
+                      <input
-                  {/* Bucket Filter */}
+                        className="form-check-input"
-                  <div className="flex-fill ">
+                        type="checkbox"
-                    <p className="small-text mb-2 ">Buckets</p>
+                        id={`cat-${id}`}
-                    {filteredBuckets.map(({ id, name }) => (
+                        checked={selectedCategoryIds.includes(id)}
-                      <div className="form-check mb-1" key={id}>
+                        onChange={() => handleCategoryChange(id)}
-                        <input
+                      />
-                          className="form-check-input  "
+                      <label className="form-check-label">{name}</label>
-                          type="checkbox"
+                    </div>
-                          id={`bucket-${id}`}
+                  </li>
-                          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>
@@ -293,7 +232,6 @@ 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">
@@ -344,6 +282,9 @@ const Directory = () => {
                   </th>
                   <th className="mx-2">Category</th>
                   <th
+                  //   className={`mx-2 ${
+                  //     HasManageProject ? "d-sm-table-cell" : "d-none"
+                  //   }`}
                   >
                     Action
                   </th>
@@ -356,12 +297,12 @@ const Directory = () => {
                   </tr>
                 )}
                 {!loading &&
-                  currentItems.length === 0 && (
+                  contacts.length == 0 &&
+                  ContatList.length === 0 && (
                     <tr>
-                      <td colSpan={10}>Not Found Contact</td>
+                      <td colSpan={10}>No Contact Found</td>
                     </tr>
                   )}
-                
                 {!loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory