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);
-      setContactList( updatedContacts ); 
+      setContactList(updatedContacts);
-      cacheData("Contacts",updatedContacts)
+      cacheData("Contacts", updatedContacts);
       showToast("Contact deleted successfully", "success");
-      setDeleteContact( null )
+      setDeleteContact(null);
-      
-     setIsDeletng(false)
-    } catch ( error )
-    {
-      const msg  = error.response.data.message || error.message || "Error occured during API calling"
-      showToast( msg, "error" )
-      setIsDeletng(false)
-  }
 
+      setIsDeletng(false);
+    } catch (error) {
+      const msg =
+        error.response.data.message ||
+        error.message ||
+        "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"
@@ -268,34 +287,39 @@ const Directory = () => {
                 <i className="bx bx-list-ul bx-sm"></i>
               </button>
             </div>
-            <div className="dropdown">
+            <div className="dropdown" style={{ width: "fit-content" }}>
+              <div className="dropdown" style={{ width: "fit-content" }}>
                 <a
                   className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
                   data-bs-toggle="dropdown"
                   aria-expanded="false"
                 >
-                <i className="fa-solid fa-filter ms-1"></i>
+                  <i className="fa-solid fa-filter ms-1 fs-5"></i>
                 </a>
-              <ul
+
-                className="dropdown-menu p-2 text-capitalize"
+                <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
-                style={{ Width: "100%" }}
+                  <div>
-              >
                     <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 ">
+                    <div className="mt-1">
-                    <p className="small-text mb-2 ">Buckets</p>
+                      <p className="small-text mb-1 fw-semibold">Buckets</p>
+                      <div className="d-flex flex-wrap">
                         {filteredBuckets.map(({ id, name }) => (
-                      <div className="form-check mb-1" key={id}>
+                          <div
+                            className="form-check me-1 mb-1"
+                            style={{ width: "33.33%" }}
+                            key={id}
+                          >
                             <input
-                          className="form-check-input  "
+                              className="form-check-input"
                               type="checkbox"
                               id={`bucket-${id}`}
-                          checked={selectedBucketIds.includes(id)}
+                              checked={tempSelectedBucketIds.includes(id)}
-                          onChange={() => handleBucketChange(id)}
+                              onChange={() => handleTempBucketChange(id)}
                             />
                             <label
-                          className="form-check-label text-nowrap"
+                              className="form-check-label text-nowrap small-text"
                               htmlFor={`bucket-${id}`}
                             >
                               {name}
@@ -303,21 +327,27 @@ const Directory = () => {
                           </div>
                         ))}
                       </div>
-
+                    </div>
+                    <hr className="m-0" />
                     {/* Category Filter */}
-                  <div className="flex-fill">
+                    <div className="mt-1">
-                    <p className="small-text mb-2">Categories</p>
+                      <p className="small-text mb-1 fw-semibold">Categories</p>
+                      <div className="d-flex flex-wrap">
                         {filteredCategories.map(({ id, name }) => (
-                      <div className="form-check mb-1" key={id}>
+                          <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={selectedCategoryIds.includes(id)}
+                              checked={tempSelectedCategoryIds.includes(id)}
-                          onChange={() => handleCategoryChange(id)}
+                              onChange={() => handleTempCategoryChange(id)}
                             />
                             <label
-                          className="form-check-label text-nowrap"
+                              className="form-check-label text-nowrap small-text"
                               htmlFor={`cat-${id}`}
                             >
                               {name}
@@ -326,11 +356,39 @@ const Directory = () => {
                         ))}
                       </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>
                 </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,10 +461,9 @@ const Directory = () => {
                     <td colSpan={10}>Loading...</td>
                   </tr>
                 )}
-                {!loading &&
+                {!loading && currentItems.length === 0 && (
-                  currentItems.length === 0 && (
                   <tr>
-                      <td colSpan={10}>Not Found Contact</td>
+                    <td colSpan={10}>No Matching Contact Found</td>
                   </tr>
                 )}
 
@@ -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