From 51c38576758803a2374d4e82ec448eaa5696623f Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Sun, 25 May 2025 00:24:56 +0530
Subject: [PATCH] splited Directory component into smaller components

---
 .../Directory/DirectoryListTableHeader.jsx    |  65 ++++++
 src/pages/Directory/DirectoryPageHeader.jsx   | 202 ++++++++++++++++++
 2 files changed, 267 insertions(+)
 create mode 100644 src/pages/Directory/DirectoryListTableHeader.jsx
 create mode 100644 src/pages/Directory/DirectoryPageHeader.jsx

diff --git a/src/pages/Directory/DirectoryListTableHeader.jsx b/src/pages/Directory/DirectoryListTableHeader.jsx
new file mode 100644
index 00000000..2f2b251c
--- /dev/null
+++ b/src/pages/Directory/DirectoryListTableHeader.jsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import IconButton from '../../components/common/IconButton';
+
+
+const DirectoryListTableHeader = ( {children, IsActive} ) =>
+{
+  return (
+    <div className="table-responsive text-nowrap py-2">
+      <table className="table px-2">
+        <thead>
+                  <tr>
+            <th colSpan={2}>
+              <div className="d-flex align-items-center gap-1">
+                <IconButton
+                  size={12}
+                  iconClass="bx bx-user"
+                  color="secondary"
+                  onClick={() => alert("User icon clicked")}
+                />
+                <span>Name</span>
+              </div>
+            </th>
+            <th className="px-2 text-start">
+              <div className="d-flex text-center align-items-center gap-1 justify-content-start">
+                <IconButton
+                  size={12}
+                  iconClass="bx bx-envelope"
+                  color="primary"
+                />
+                <span>Email</span>
+              </div>
+            </th>
+            <th className="mx-2">
+              <div className="d-flex align-items-center m-0 p-0 gap-1">
+                <IconButton
+                  size={12}
+                  iconClass="bx bx-phone"
+                  color="warning"
+                  onClick={() => alert("User icon clicked")}
+                />
+                <span>Phone</span>
+              </div>
+            </th>
+            <th className="mx-2">
+              <div className="d-flex align-items-center gap-1">
+                <IconButton
+                  size={12}
+                  iconClass="bx bxs-grid-alt"
+                  color="info"
+                />
+                <span>Organization</span>
+              </div>
+            </th>
+            <th className="mx-2">Category</th>
+            {IsActive && <th>Action</th>}
+          </tr>
+        </thead>
+        <tbody className="table-border-bottom-0 overflow-auto">
+          {children}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+export default DirectoryListTableHeader;
\ No newline at end of file
diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
new file mode 100644
index 00000000..c3ae03cd
--- /dev/null
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -0,0 +1,202 @@
+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;