added filter action while apply filter

src/pages/Directory/DirectoryPageHeader.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 const DirectoryPageHeader = ({
   searchText,
@@ -16,14 +16,19 @@ const DirectoryPageHeader = ({
   applyFilter,
   loading,
   IsActive,
-    setIsOpenModal,
+  setIsOpenModal,
-  setOpenBucketModal
+  setOpenBucketModal,
 }) => {
+  const [filtered, setFiltered] = useState();
+
+  useEffect(() => {
+    setFiltered(
+      tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
+    );
+  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
   return (
     <>
-      <div className="row">
+      <div className="row"></div>
-       
-      </div>
       <div className="row mx-0 px-0 align-items-center">
         <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
           <input
@@ -66,22 +71,31 @@ const DirectoryPageHeader = ({
           <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"
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
               >
-                <i className="fa-solid fa-filter ms-1 fs-5"></i>
+                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
+
+                {filtered > 0 && (
+                  <span
+                    className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
+                    style={{ fontSize: "0.4rem"}}
+                  >
+                    {filtered}
+                  </span>
+                )}
               </a>
 
               <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                 <div>
-                  <p className="small-text fw-semibold text-muted m-0">
+                  <p className="text-small text-muted m-0">
                     Filter by
                   </p>
 
                   {/* Bucket Filter */}
                   <div className="mt-1">
-                    <p className="small-text mb-1 fw-semibold">Buckets</p>
+                    <p className="text-small mb-1 ">Buckets</p>
                     <div className="d-flex flex-wrap">
                       {filteredBuckets.map(({ id, name }) => (
                         <div
@@ -97,7 +111,7 @@ const DirectoryPageHeader = ({
                             onChange={() => handleTempBucketChange(id)}
                           />
                           <label
-                            className="form-check-label text-nowrap small-text "
+                            className="form-check-label text-nowrap text-small "
                             htmlFor={`bucket-${id}`}
                           >
                             {name}
@@ -109,7 +123,7 @@ const DirectoryPageHeader = ({
                   <hr className="m-0" />
                   {/* Category Filter */}
                   <div className="mt-1">
-                    <p className="small-text mb-1 fw-semibold">Categories</p>
+                    <p className="text-small mb-1 ">Categories</p>
                     <div className="d-flex flex-wrap">
                       {filteredCategories.map(({ id, name }) => (
                         <div
@@ -125,7 +139,7 @@ const DirectoryPageHeader = ({
                             onChange={() => handleTempCategoryChange(id)}
                           />
                           <label
-                            className="form-check-label text-nowrap small-text"
+                            className="form-check-label text-nowrap text-small"
                             htmlFor={`cat-${id}`}
                           >
                             {name}
@@ -154,49 +168,69 @@ const DirectoryPageHeader = ({
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
+        <div className="col-12 col-md-8 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
-          <label className="switch switch-primary">
-            <input
-              type="checkbox"
-              className="switch-input"
-              onChange={() => setIsActive(!IsActive)}
-              value={IsActive}
-              disabled={loading}
-            />
-            <span className="switch-toggle-slider">
-              <span className="switch-on">
-                {/* <i class="icon-base bx bx-check"></i> */}
-              </span>
-              <span className="switch-off">
-                {/* <i class="icon-base bx bx-x"></i> */}
-              </span>
-            </span>
-            <span className="switch-label small-text">
-              Show Inactive Contacts
-            </span>
-          </label>
           <button
             type="button"
-            className="btn btn-xs btn-primary"
+            className="btn btn-sm btn-primary"
             onClick={() => setIsOpenModal(true)}
           >
             <i className="bx bx-plus-circle me-2"></i>
             New Contact
           </button>
-        </div>
+
+          <div className={`dropdown `}>
+            <button
+              type="button"
+              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i
+                className="bx bx-dots-vertical-rounded bx-md text-muted "
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip-dark"
+                title="More Action"
+              ></i>
+            </button>
+            <ul className="dropdown-menu dropdown-menu-end w-auto">
+              <li>
+                <a className="dropdown-item px-2 ">
+                  <label className="switch switch-primary align-self-start mb-2">
+                    <input
+                      type="checkbox"
+                      className="switch-input"
+                      onChange={() => setIsActive(!IsActive)}
+                      value={IsActive}
+                      disabled={loading}
+                    />
+                    <span className="switch-toggle-slider">
+                      <span className="switch-on"></span>
+                      <span className="switch-off"></span>
+                    </span>
+                    <span className=" list-inline-item ">
+                      Show Inactive Contacts
+                    </span>
+                  </label>
+                </a>
+              </li>
+              <li>
+                <a
+                  className="dropdown-item cursor-pointer px-2 "
+                  onClick={() => setOpenBucketModal(true)}
+                >
+                  <i className="fa-solid fa-bucket fs-5 me-4"></i>
+                  <span className="align-left">Manage Buckets</span>
+                </a>
+              </li>
+            </ul>
           </div>
-           <div className="col-12 d-flex justify-content-end">
-           <button
-            type="button"
-                  className="btn btn-xs btn-primary"
-                  onClick={()=>setOpenBucketModal(true)}
-          >
-            <i className="bx bx-plus-circle me-2"></i>
-            Manage Buckets
-          </button>
         </div>
+      </div>
     </>
   );
 };
 
 export default DirectoryPageHeader;
+