marco.pms.web/src/pages/Directory/DirectoryPageHeader.jsx

import React, { useEffect, useState } from "react";

const DirectoryPageHeader = ({
  searchText,
  setSearchText,
  setIsActive,
  listView,
  setListView,
  filteredBuckets,
  tempSelectedBucketIds,
  handleTempBucketChange,
  filteredCategories,
  tempSelectedCategoryIds,
  handleTempCategoryChange,
  clearFilter,
  applyFilter,
  loading,
  IsActive,
  setOpenBucketModal,
}) => {
  const [filtered, setFiltered] = useState();

  useEffect(() => {
    setFiltered(
      tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
    );
  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
  return (
    <>
      {/* <div className="row">vikas</div> */}
      <div className="row mx-0 px-0 align-items-center mt-2">
        <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
          <input
            type="search"
            className="form-control"
            placeholder="Search Contact..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            style={{ width: "200px" }}
          />
          <div className="d-flex gap-2">
            <button
              type="button"
              className={`btn  btn-sm p-1 ${
                !listView ? "btn-primary" : "btn-outline-primary"
              }`}
              onClick={() => setListView(false)}
              data-bs-toggle="tooltip"
              data-bs-offset="0,8"
              data-bs-placement="top"
              data-bs-custom-class="tooltip"
              title="Card View"
            >
              <i className="bx bx-grid-alt"></i>
            </button>
            <button
              type="button"
              className={`btn  btn-sm p-1 ${
                listView ? "btn-primary" : "btn-outline-primary"
              }`}
              onClick={() => setListView(true)}
              data-bs-toggle="tooltip"
              data-bs-offset="0,8"
              data-bs-placement="top"
              data-bs-custom-class="tooltip"
              title="List View"
            >
              <i className="bx bx-list-ul "></i>
            </button>
          </div>
          <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 position-relative"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <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="text-muted m-0 h6 ">Filter by</p>

                  {/* Bucket Filter */}
                  <div className="mt-1">
                    <p className="text-small mb-1 ">Buckets</p>
                    <div className="d-flex flex-wrap">
                      {filteredBuckets.map(({ id, name }) => (
                        <div
                          className="form-check me-3 mb-1"
                          style={{ minWidth: "33.33%" }}
                          key={id}
                        >
                          <input
                            className="form-check-input"
                            type="checkbox"
                            id={`bucket-${id}`}
                            checked={tempSelectedBucketIds.includes(id)}
                            onChange={() => handleTempBucketChange(id)}
                          />
                          <label
                            className="form-check-label text-nowrap text-small "
                            htmlFor={`bucket-${id}`}
                          >
                            {name}
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>
                  <hr className="m-0" />
                  {/* Category Filter */}
                  <div className="mt-1">
                    <p className="text-small mb-1 ">Categories</p>
                    <div className="d-flex flex-wrap">
                      {filteredCategories.map(({ id, name }) => (
                        <div
                          className="form-check me-3 mb-1"
                          style={{ minWidth: "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 text-small"
                            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>
              </ul>
            </div>
          </div>
        </div>
        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
          <label className="switch switch-primary align-self-start mb-2">
            <input
              type="checkbox"
              className="switch-input me-3"
              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 ms-12 ">
              Show Inactive Contacts
            </span>
          </label>
        </div>
      </div>
    </>
  );
};

export default DirectoryPageHeader;