src/pages/Directory/Directory.jsx

@@ -23,14 +23,13 @@ const Directory = () => {
   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 { buckets } = useBuckets();
   const submitContact = async (data) => {
     try {
       let response;
@@ -88,35 +87,35 @@ const Directory = () => {
   };
 
   const handleBucketChange = (id) => {
-  setSelectedBucketIds((prev) =>
+    setSelectedBucketIds((prev) =>
-    prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
+      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 usedBucketIds = [
-  ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
-];
 
-const filteredBuckets = buckets.filter((bucket) =>
+  const filteredContacts = useMemo(() => {
-  usedBucketIds.includes(bucket.id)
+    return ContactList.filter((c) => {
-);
+      const matchesSearch =
+        c.name.toLowerCase().includes(searchText.toLowerCase()) ||
+        c.organization.toLowerCase().includes(searchText.toLowerCase());
 
-const filteredContacts = useMemo(() => {
+      const matchesCategory =
-  return ContactList.filter((c) => {
+        selectedCategoryIds.length === 0 ||
-    const matchesSearch =
+        selectedCategoryIds.includes(c.contactCategory?.id);
-      c.name.toLowerCase().includes(searchText.toLowerCase()) ||
-      c.organization.toLowerCase().includes(searchText.toLowerCase());
 
-    const matchesCategory =
+      const matchesBucket =
-      selectedCategoryIds.length === 0 ||
+        selectedBucketIds.length === 0 ||
-      selectedCategoryIds.includes(c.contactCategory?.id);
+        (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
 
-    const matchesBucket =
+      return matchesSearch && matchesCategory && matchesBucket;
-      selectedBucketIds.length === 0 ||
+    }).sort((a, b) => a.name.localeCompare(b.name));
-      (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
+  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
-
-    return matchesSearch && matchesCategory && matchesBucket;
-  }).sort((a, b) => a.name.localeCompare(b.name));
-}, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
 
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
@@ -153,10 +152,9 @@ const filteredContacts = useMemo(() => {
       {isOpenModal && (
         <GlobalModel
           isOpen={isOpenModal}
-          closeModal={() =>
+          closeModal={() => {
-          {
+            setSelectedContact(null);
-            setSelectedContact(null)
+            setIsOpenModal(false);
-             setIsOpenModal(false)
           }}
           size="lg"
         >
@@ -166,14 +164,19 @@ const filteredContacts = useMemo(() => {
       {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">
@@ -224,49 +227,57 @@ const filteredContacts = useMemo(() => {
               >
                 <i className="bx bx-filter bx-lg  ms-1"></i>
               </a>
-              <ul className="dropdown-menu p-2 text-capitalize">
+              <ul
-
+                className="dropdown-menu p-2 text-capitalize"
-                
+                style={{ Width: "100%" }}
-  <p className="small-text mb-1">Apply Bucket Filter</p>
+              >
-  {filteredBuckets.map(({ id, name }) => (
+                <p className="small-text text-muted m-0">Filter by</p>
-    <li key={id}>
+                <div className="d-flex gap-4 justify-content-between">
-      <div className="form-check">
+                  {/* Bucket Filter */}
-        <input
+                  <div className="flex-fill ">
-          className="form-check-input"
+                    <p className="small-text mb-2 ">Buckets</p>
-          type="checkbox"
+                    {filteredBuckets.map(({ id, name }) => (
-          id={`bucket-${id}`}
+                      <div className="form-check mb-1" key={id}>
-          checked={selectedBucketIds.includes(id)}
+                        <input
-          onChange={() => handleBucketChange(id)}
+                          className="form-check-input  "
-        />
+                          type="checkbox"
-        <label className="form-check-label" htmlFor={`bucket-${id}`}>
+                          id={`bucket-${id}`}
-          {name}
+                          checked={selectedBucketIds.includes(id)}
-        </label>
+                          onChange={() => handleBucketChange(id)}
-      </div>
+                        />
-    </li>
+                        <label
-  ) )}
+                          className="form-check-label text-nowrap"
-                  <hr className="my-2" />
+                          htmlFor={`bucket-${id}`}
-  <p className="small-text mb-1">Apply Category Filter</p>
+                        >
-  {filteredCategories.map(({ id, name }) => (
+                          {name}
-    <li key={id}>
+                        </label>
-      <div className="form-check">
+                      </div>
-        <input
+                    ))}
-          className="form-check-input"
+                  </div>
-          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>
 
+                  {/* 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>
 
@@ -282,6 +293,7 @@ const filteredContacts = useMemo(() => {
           </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">
@@ -332,9 +344,6 @@ const filteredContacts = useMemo(() => {
                   </th>
                   <th className="mx-2">Category</th>
                   <th
-                  //   className={`mx-2 ${
-                  //     HasManageProject ? "d-sm-table-cell" : "d-none"
-                  //   }`}
                   >
                     Action
                   </th>
@@ -347,12 +356,12 @@ const filteredContacts = useMemo(() => {
                   </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