modified filter functionality- added apply call function button

src/pages/Directory/Directory.jsx

@@ -25,9 +25,12 @@ const Directory = () => {
   const [contactCategories, setContactCategories] = useState([]);
   const [searchText, setSearchText] = useState("");
   const [listView, setListView] = useState(false);
-  const [ selectedBucketIds, setSelectedBucketIds ] = useState( [] );
+  const [selectedBucketIds, setSelectedBucketIds] = useState([]);
-  const [deleteContact,setDeleteContact] = useState(null)
+  const [deleteContact, setDeleteContact] = useState(null);
-  const[IsDeleting,setIsDeletng] = useState(false)
+  const [IsDeleting, setIsDeletng] = useState(false);
+
+  const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
+  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -64,59 +67,64 @@ const Directory = () => {
     }
   };
 
-  const handleDeleteContact = async() =>
+  const handleDeleteContact = async () => {
-  {
+    try {
-    try
+      setIsDeletng(true);
-    {  setIsDeletng(true)
+      const contacts_cache = getCachedData("contacts") || [];
-      const contacts_cache = getCachedData( "contacts" ) || [];
 
-      const response = await DirectoryRepository.DeleteContact( deleteContact );
+      const response = await DirectoryRepository.DeleteContact(deleteContact);
-      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact); 
+      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
-      setContactList( updatedContacts ); 
+      setContactList(updatedContacts);
-      cacheData("Contacts",updatedContacts)
+      cacheData("Contacts", updatedContacts);
       showToast("Contact deleted successfully", "success");
-      setDeleteContact( null )
+      setDeleteContact(null);
-      
+
-     setIsDeletng(false)
+      setIsDeletng(false);
-    } catch ( error )
+    } catch (error) {
-    {
+      const msg =
-      const msg  = error.response.data.message || error.message || "Error occured during API calling"
+        error.response.data.message ||
-      showToast( msg, "error" )
+        error.message ||
-      setIsDeletng(false)
+        "Error occured during API calling";
-  }
+      showToast(msg, "error");
-    
+      setIsDeletng(false);
-  }
+    }
+  };
 
   const closedModel = () => {
     setIsOpenModal(false);
     setSelectedContact(null);
     setOpen_contact(null);
   };
-  useEffect(() => {
-    setContactList(contacts);
-  }, [contacts]);
-
   const [selectedCategoryIds, setSelectedCategoryIds] = useState(
     contactCategory.map((category) => category.id)
   );
 
+  useEffect(() => {
+    setContactList(contacts);
+
+    // Set temp filter list only (UI checkboxes, not actual filtering yet)
+    setTempSelectedCategoryIds([]);
+    setTempSelectedBucketIds([]);
+  }, [contacts]);
+
   const usedCategoryIds = [
     ...new Set(contacts.map((c) => c.contactCategory?.id)),
   ];
   const filteredCategories = contactCategory.filter((category) =>
     usedCategoryIds.includes(category.id)
   );
-  const handleCategoryChange = (id) => {
+  const handleTempBucketChange = (id) => {
-    setSelectedCategoryIds((prev) =>
+    setTempSelectedBucketIds((prev) =>
+      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
+    );
+  };
+
+  const handleTempCategoryChange = (id) => {
+    setTempSelectedCategoryIds((prev) =>
       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 || [])),
   ];
@@ -143,6 +151,18 @@ const Directory = () => {
     }).sort((a, b) => a.name.localeCompare(b.name));
   }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
 
+  const applyFilter = () => {
+    setSelectedBucketIds(tempSelectedBucketIds);
+    setSelectedCategoryIds(tempSelectedCategoryIds);
+  };
+
+  const clearFilter = () => {
+    setTempSelectedBucketIds([]);
+    setTempSelectedCategoryIds([]);
+    setSelectedBucketIds([]);
+    setSelectedCategoryIds([]);
+  };
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -171,7 +191,7 @@ const Directory = () => {
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
-          { label: "Directory (Comming Soon)", link: null },
+          { label: "Directory", link: null },
         ]}
       ></Breadcrumb>
 
@@ -206,7 +226,6 @@ const Directory = () => {
         </GlobalModel>
       )}
       {deleteContact && (
-
         <div
           className={`modal fade  ${deleteContact ? "show" : ""}`}
           tabIndex="-1"
@@ -217,16 +236,16 @@ const Directory = () => {
           }}
           aria-hidden="false"
         >
-        <ConfirmModal
+          <ConfirmModal
-          type={"delete"}
+            type={"delete"}
             header={"Delete Contact"}
             message={"Are you sure you want delete?"}
             onSubmit={handleDeleteContact}
             onClose={() => setDeleteContact(null)}
             loading={IsDeleting}
           />
-          </div>
+        </div>
-    )}
+      )}
 
       <div className="card p-2">
         <div className="row mx-0 px-0 align-items-center">
@@ -268,69 +287,108 @@ const Directory = () => {
                 <i className="bx bx-list-ul bx-sm"></i>
               </button>
             </div>
-            <div className="dropdown">
+            <div className="dropdown" style={{ width: "fit-content" }}>
-              <a
+              <div className="dropdown" style={{ width: "fit-content" }}>
-                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
+                <a
-                data-bs-toggle="dropdown"
+                  className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
-                aria-expanded="false"
+                  data-bs-toggle="dropdown"
-              >
+                  aria-expanded="false"
-                <i className="fa-solid fa-filter ms-1"></i>
+                >
-              </a>
+                  <i className="fa-solid fa-filter ms-1 fs-5"></i>
-              <ul
+                </a>
-                className="dropdown-menu p-2 text-capitalize"
-                style={{ Width: "100%" }}
-              >
-                <p className="small-text text-muted m-0">Filter by</p>
-                <div className="d-flex gap-4 justify-content-between">
-                  {/* Bucket Filter */}
-                  <div className="flex-fill ">
-                    <p className="small-text mb-2 ">Buckets</p>
-                    {filteredBuckets.map(({ id, name }) => (
-                      <div className="form-check mb-1" key={id}>
-                        <input
-                          className="form-check-input  "
-                          type="checkbox"
-                          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 */}
+                <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
-                  <div className="flex-fill">
+                  <div>
-                    <p className="small-text mb-2">Categories</p>
+                    <p className="small-text text-muted m-0">Filter by</p>
-                    {filteredCategories.map(({ id, name }) => (
+
-                      <div className="form-check mb-1" key={id}>
+                    {/* Bucket Filter */}
-                        <input
+                    <div className="mt-1">
-                          className="form-check-input"
+                      <p className="small-text mb-1 fw-semibold">Buckets</p>
-                          type="checkbox"
+                      <div className="d-flex flex-wrap">
-                          id={`cat-${id}`}
+                        {filteredBuckets.map(({ id, name }) => (
-                          checked={selectedCategoryIds.includes(id)}
+                          <div
-                          onChange={() => handleCategoryChange(id)}
+                            className="form-check me-1 mb-1"
-                        />
+                            style={{ width: "33.33%" }}
-                        <label
+                            key={id}
-                          className="form-check-label text-nowrap"
+                          >
-                          htmlFor={`cat-${id}`}
+                            <input
-                        >
+                              className="form-check-input"
-                          {name}
+                              type="checkbox"
-                        </label>
+                              id={`bucket-${id}`}
+                              checked={tempSelectedBucketIds.includes(id)}
+                              onChange={() => handleTempBucketChange(id)}
+                            />
+                            <label
+                              className="form-check-label text-nowrap small-text"
+                              htmlFor={`bucket-${id}`}
+                            >
+                              {name}
+                            </label>
+                          </div>
+                        ))}
                       </div>
-                    ))}
+                    </div>
+                    <hr className="m-0" />
+                    {/* Category Filter */}
+                    <div className="mt-1">
+                      <p className="small-text mb-1 fw-semibold">Categories</p>
+                      <div className="d-flex flex-wrap">
+                        {filteredCategories.map(({ id, name }) => (
+                          <div
+                            className="form-check me-1 mb-1"
+                            style={{ width: "33.33%" }}
+                            key={id}
+                          >
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id={`cat-${id}`}
+                              checked={tempSelectedCategoryIds.includes(id)}
+                              onChange={() => handleTempCategoryChange(id)}
+                            />
+                            <label
+                              className="form-check-label text-nowrap small-text"
+                              htmlFor={`cat-${id}`}
+                            >
+                              {name}
+                            </label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+
+                    <div className="d-flex justify-content-end gap-2 mt-1">
+                      <button
+                        className="btn btn-xs btn-secondary"
+                        onClick={clearFilter}
+                      >
+                        Clear
+                      </button>
+                      <button
+                        className="btn btn-xs btn-primary"
+                        onClick={applyFilter}
+                      >
+                        Apply Filter
+                      </button>
+                    </div>
                   </div>
-                </div>
+                </ul>
-              </ul>
+              </div>
             </div>
           </div>
-
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
+            <label class="switch switch-primary">
+              <input type="checkbox" class="switch-input" />
+              <span class="switch-toggle-slider">
+                <span class="switch-on">
+                  {/* <i class="icon-base bx bx-check"></i> */}
+                </span>
+                <span class="switch-off">
+                  {/* <i class="icon-base bx bx-x"></i> */}
+                </span>
+              </span>
+              <span class="switch-label">Show Inactive Contacts</span>
+            </label>
             <button
               type="button"
               className="btn btn-xs btn-primary"
@@ -342,7 +400,9 @@ const Directory = () => {
           </div>
         </div>
         {!listView && loading && <p>Loading...</p>}
-        {!listView && !loading && currentItems.length == 0  && <p>Not Found Contact</p>}
+        {!listView && !loading && currentItems.length == 0 && (
+          <p>No Matching Contact Found</p>
+        )}
         {listView ? (
           <div className="table-responsive text-nowrap py-2 ">
             <table className="table px-2">
@@ -392,10 +452,7 @@ const Directory = () => {
                     </div>
                   </th>
                   <th className="mx-2">Category</th>
-                  <th
+                  <th>Action</th>
-                  >
-                    Action
-                  </th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0 overflow-auto ">
@@ -404,13 +461,12 @@ const Directory = () => {
                     <td colSpan={10}>Loading...</td>
                   </tr>
                 )}
-                {!loading &&
+                {!loading && currentItems.length === 0 && (
-                  currentItems.length === 0 && (
+                  <tr>
-                    <tr>
+                    <td colSpan={10}>No Matching Contact Found</td>
-                      <td colSpan={10}>Not Found Contact</td>
+                  </tr>
-                    </tr>
+                )}
-                  )}
+
-                
                 {!loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory
@@ -418,9 +474,9 @@ const Directory = () => {
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
-                       setOpen_contact={setOpen_contact}
+                      setOpen_contact={setOpen_contact}
-                  setIsOpenModalNote={setIsOpenModalNote}
+                      setIsOpenModalNote={setIsOpenModalNote}
-                  IsDeleted={setDeleteContact}
+                      IsDeleted={setDeleteContact}
                     />
                   ))}
               </tbody>
@@ -446,7 +502,7 @@ const Directory = () => {
           </div>
         )}
 
-        {!loading && (
+        {!loading && currentItems < ITEMS_PER_PAGE && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li