From 7d94c17c71ae897f5bba83dfac1009e95336e748 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 16 Sep 2025 17:57:06 +0530
Subject: [PATCH] modified ui  of header directory

---
 src/components/Directory/ListViewContact.jsx |  6 +-
 src/pages/Directory/DirectoryPage.jsx        | 68 ++++++++++----------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/components/Directory/ListViewContact.jsx b/src/components/Directory/ListViewContact.jsx
index 9f9b26d1..ef484c31 100644
--- a/src/components/Directory/ListViewContact.jsx
+++ b/src/components/Directory/ListViewContact.jsx
@@ -102,10 +102,10 @@ const ListViewContact = ({ data, Pagination }) => {
           className="card-datatable table-responsive"
           id="horizontal-example"
         >
-          <div className="dataTables_wrapper no-footer ">
+          <div className="dataTables_wrapper no-footer mx-5 pb-2">
             <table className="table dataTable text-nowrap">
               <thead>
-                <tr className="shadow-sm ">
+                <tr  style={{    borderBottom: "2px solid var(--bs-table-border-color)"}}>
                   {contactList?.map((col) => (
                     <th key={col.key} className={col.align}>
                       {col.label}
@@ -116,7 +116,7 @@ const ListViewContact = ({ data, Pagination }) => {
                   </th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody >
                 {Array.isArray(data) && data.length > 0 ? (
                   data.map((row, i) => (
                     <tr
diff --git a/src/pages/Directory/DirectoryPage.jsx b/src/pages/Directory/DirectoryPage.jsx
index 38dd2f9b..29b60f15 100644
--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@@ -113,7 +113,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   };
 
   const { mutate: DeleteBucket, isPending: Deleting } = useDeleteBucket(() => {
-    setDeleteBucket({isOpen:false,bucketId:null});
+    setDeleteBucket({ isOpen: false, bucketId: null });
   });
   const handleDelete = (bucketId) => {
     DeleteBucket(bucketId);
@@ -133,7 +133,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
             ></Breadcrumb>
           )}
           <div className="card">
-            <div className="d-flex justify-content-between align-items-center mb-1 px-2">
+           <div className="d-flex-row px-2">
+             <div className="d-flex justify-content-between align-items-center mb-1">
               <ul className="nav nav-tabs">
                 <li className="nav-item cursor-pointer">
                   <a
@@ -142,7 +143,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                     } fs-6`}
                     onClick={(e) => handleTabClick("notes", e)}
                   >
-                    <i className="bx bx-note bx-sm me-1_5"></i>
+                    <i className="bx bx-notepad bx-sm me-1_5"></i>
                     <span className="d-none d-md-inline">Notes</span>
                   </a>
                 </li>
@@ -158,33 +159,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </a>
                 </li>
               </ul>
-
-              <div className="btn-group">
-                <button
-                  className="btn btn-sm btn-label-secondary dropdown-toggle"
-                  type="button"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  <i className="bx bx-export me-2 bx-sm"></i>Export
-                </button>
-                <ul className="dropdown-menu">
-                  <li>
-                    {/* <a className="dropdown-item" href="#"> */}
-                    <a
-                      className="dropdown-item cursor-pointer"
-                      onClick={() => handleExport("csv")}
-                    >
-                      <i className="bx bx-file me-1"></i> CSV
-                    </a>
-                  </li>
-                </ul>
-              </div>
             </div>
 
             <div className="mb-1 px-2">
               <div className="d-flex align-items-center justify-content-between">
-                <div>
+                <div className="d-flex align-items-center gap-3">
                   {activeTab === "notes" && (
                     <input
                       type="search"
@@ -196,7 +175,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   )}
 
                   {activeTab === "contacts" && (
-                    <div className="d-flex align-items-center">
+                    <div className="d-flex align-items-center gap-3">
                       <div className="d-flex gap-2 align-items-center">
                         <input
                           type="search"
@@ -206,8 +185,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           onChange={(e) => setsearchContact(e.target.value)}
                         />
                         <button
-                          className={`btn btn-xs ${
-                            !gridView ? "btn-primary" : "btn-outline-secondary"
+                          className={`btn btn-sm p-1 ${
+                            !gridView ? "btn-primary" : "btn-outline-primary"
                           }`}
                           onClick={() => setGridView(false)}
                         >
@@ -215,15 +194,16 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         </button>
 
                         <button
-                          className={`btn btn-xs ${
-                            gridView ? "btn-primary" : "btn-outline-secondary"
+                          className={`btn btn-sm p-1 ${
+                            gridView ? " btn-primary" : " btn-outline-primary"
                           }`}
                           onClick={() => setGridView(true)}
                         >
                           <i className="bx bx-grid-alt"></i>
                         </button>
                       </div>
-                      <div className="form-check form-switch d-flex align-items-center ms-4">
+
+                      <div className="form-check form-switch d-flex align-items-center">
                         <input
                           type="checkbox"
                           className="form-check-input"
@@ -236,14 +216,36 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                           className="form-check-label ms-2"
                           htmlFor="inactiveEmployeesCheckbox"
                         >
-                          {showActive ? "Active" : "Inactive"}
+                          {showActive ? "Active" : "Inactive"} Contacts
                         </label>
                       </div>
                     </div>
                   )}
                 </div>
+
+                <div className="btn-group">
+                  <button
+                    className="btn btn-sm btn-label-secondary dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                  >
+                    <i className="bx bx-export me-2 bx-sm"></i>Export
+                  </button>
+                  <ul className="dropdown-menu">
+                    <li>
+                      <a
+                        className="dropdown-item cursor-pointer"
+                        onClick={() => handleExport("csv")}
+                      >
+                        <i className="bx bx-file me-1"></i> CSV
+                      </a>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
+           </div>
           </div>
 
           <div>