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

import React from "react";

const DirectoryPageHeader = ({
  searchText,
  setSearchText,
  setIsActive,
  listView,
  setListView,
  filteredBuckets,
  tempSelectedBucketIds,
  handleTempBucketChange,
  filteredCategories,
  tempSelectedCategoryIds,
  handleTempCategoryChange,
  clearFilter,
  applyFilter,
  loading,
  IsActive,
    setIsOpenModal,
  setOpenBucketModal
}) => {
  return (
    <>
      <div className="row">
       
      </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
            type="search"
            className="form-control form-control-sm me-2"
            placeholder="Search Contact..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
          />
          <div className="d-flex gap-2 ">
            <button
              type="button"
              className={`btn btn-xs ${
                !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 bx-sm"></i>
            </button>
            <button
              type="button"
              className={`btn btn-xs ${
                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 bx-sm"></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"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className="fa-solid fa-filter ms-1 fs-5"></i>
              </a>

              <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                <div>
                  <p className="small-text fw-semibold text-muted m-0">
                    Filter by
                  </p>

                  {/* Bucket Filter */}
                  <div className="mt-1">
                    <p className="small-text mb-1 fw-semibold">Buckets</p>
                    <div className="d-flex flex-wrap">
                      {filteredBuckets.map(({ id, name }) => (
                        <div
                          className="form-check me-1 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 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={{ 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 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>
              </ul>
            </div>
          </div>
        </div>
        <div className="col-12 col-md-8 mb-2 px-1 text-md-end 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"
            onClick={() => setIsOpenModal(true)}
          >
            <i className="bx bx-plus-circle me-2"></i>
            New Contact
          </button>
        </div>
          </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>
    </>
  );
};

export default DirectoryPageHeader;