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 mx-5 pb-2">
+          <div className="dataTables_wrapper no-footer ">
             <table className="table dataTable text-nowrap">
               <thead>
-                <tr  style={{    borderBottom: "2px solid var(--bs-table-border-color)"}}>
+                <tr className="shadow-sm ">
                   {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

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,8 +133,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
             ></Breadcrumb>
           )}
           <div className="card">
-           <div className="d-flex-row px-2">
+            <div className="d-flex justify-content-between align-items-center mb-1 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
@@ -143,7 +142,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                     } fs-6`}
                     onClick={(e) => handleTabClick("notes", e)}
                   >
-                    <i className="bx bx-notepad bx-sm me-1_5"></i>
+                    <i className="bx bx-note bx-sm me-1_5"></i>
                     <span className="d-none d-md-inline">Notes</span>
                   </a>
                 </li>
@@ -159,69 +158,6 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </a>
                 </li>
               </ul>
-            </div>
-
-            <div className="mb-1 px-2">
-              <div className="d-flex align-items-center justify-content-between">
-                <div className="d-flex align-items-center gap-3">
-                  {activeTab === "notes" && (
-                    <input
-                      type="search"
-                      className="form-control form-control-sm"
-                      placeholder="Search notes..."
-                      value={searchNote}
-                      onChange={(e) => setSearchNote(e.target.value)}
-                    />
-                  )}
-
-                  {activeTab === "contacts" && (
-                    <div className="d-flex align-items-center gap-3">
-                      <div className="d-flex gap-2 align-items-center">
-                        <input
-                          type="search"
-                          className="form-control form-control-sm"
-                          placeholder="Search contacts..."
-                          value={searchContact}
-                          onChange={(e) => setsearchContact(e.target.value)}
-                        />
-                        <button
-                          className={`btn btn-sm p-1 ${
-                            !gridView ? "btn-primary" : "btn-outline-primary"
-                          }`}
-                          onClick={() => setGridView(false)}
-                        >
-                          <i className="bx bx-list-ul"></i>
-                        </button>
-
-                        <button
-                          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">
-                        <input
-                          type="checkbox"
-                          className="form-check-input"
-                          role="switch"
-                          id="inactiveEmployeesCheckbox"
-                          checked={showActive}
-                          onChange={(e) => setShowActive(e.target.checked)}
-                        />
-                        <label
-                          className="form-check-label ms-2"
-                          htmlFor="inactiveEmployeesCheckbox"
-                        >
-                          {showActive ? "Active" : "Inactive"} Contacts
-                        </label>
-                      </div>
-                    </div>
-                  )}
-                </div>
 
               <div className="btn-group">
                 <button
@@ -234,6 +170,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 </button>
                 <ul className="dropdown-menu">
                   <li>
+                    {/* <a className="dropdown-item" href="#"> */}
                     <a
                       className="dropdown-item cursor-pointer"
                       onClick={() => handleExport("csv")}
@@ -244,6 +181,67 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 </ul>
               </div>
             </div>
+
+            <div className="mb-1 px-2">
+              <div className="d-flex align-items-center justify-content-between">
+                <div>
+                  {activeTab === "notes" && (
+                    <input
+                      type="search"
+                      className="form-control form-control-sm"
+                      placeholder="Search notes..."
+                      value={searchNote}
+                      onChange={(e) => setSearchNote(e.target.value)}
+                    />
+                  )}
+
+                  {activeTab === "contacts" && (
+                    <div className="d-flex align-items-center">
+                      <div className="d-flex gap-2 align-items-center">
+                        <input
+                          type="search"
+                          className="form-control form-control-sm"
+                          placeholder="Search contacts..."
+                          value={searchContact}
+                          onChange={(e) => setsearchContact(e.target.value)}
+                        />
+                        <button
+                          className={`btn btn-xs ${
+                            !gridView ? "btn-primary" : "btn-outline-secondary"
+                          }`}
+                          onClick={() => setGridView(false)}
+                        >
+                          <i className="bx bx-list-ul"></i>
+                        </button>
+
+                        <button
+                          className={`btn btn-xs ${
+                            gridView ? "btn-primary" : "btn-outline-secondary"
+                          }`}
+                          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">
+                        <input
+                          type="checkbox"
+                          className="form-check-input"
+                          role="switch"
+                          id="inactiveEmployeesCheckbox"
+                          checked={showActive}
+                          onChange={(e) => setShowActive(e.target.checked)}
+                        />
+                        <label
+                          className="form-check-label ms-2"
+                          htmlFor="inactiveEmployeesCheckbox"
+                        >
+                          {showActive ? "Active" : "Inactive"}
+                        </label>
+                      </div>
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
           </div>