modified ui of header directory
This commit is contained in:
parent
7ef10e3e5b
commit
7d94c17c71
@ -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
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user