modified ui of header directory

This commit is contained in:
pramod mahajan 2025-09-16 17:57:06 +05:30
parent 7ef10e3e5b
commit 7d94c17c71
2 changed files with 38 additions and 36 deletions

View File

@ -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

View File

@ -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>