admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

modified ui of header directory

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Directory/ListViewContact.jsx
View File

@ -102,10 +102,10 @@ const ListViewContact = ({ data, Pagination }) => {
className="card-datatable table-responsive" className="card-datatable table-responsive"
id="horizontal-example" 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"> <table className="table dataTable text-nowrap">
<thead> <thead>
<tr className="shadow-sm "> <tr style={{ borderBottom: "2px solid var(--bs-table-border-color)"}}>
{contactList?.map((col) => ( {contactList?.map((col) => (
<th key={col.key} className={col.align}> <th key={col.key} className={col.align}>
{col.label} {col.label}
@ -116,7 +116,7 @@ const ListViewContact = ({ data, Pagination }) => {
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody >
{Array.isArray(data) && data.length > 0 ? ( {Array.isArray(data) && data.length > 0 ? (
data.map((row, i) => ( data.map((row, i) => (
<tr <tr

68
src/pages/Directory/DirectoryPage.jsx
View File

@ -113,7 +113,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
}; };
const { mutate: DeleteBucket, isPending: Deleting } = useDeleteBucket(() => { const { mutate: DeleteBucket, isPending: Deleting } = useDeleteBucket(() => {
setDeleteBucket({isOpen:false,bucketId:null}); setDeleteBucket({ isOpen: false, bucketId: null });
}); });
const handleDelete = (bucketId) => { const handleDelete = (bucketId) => {
DeleteBucket(bucketId); DeleteBucket(bucketId);
@ -133,7 +133,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
></Breadcrumb> ></Breadcrumb>
)} )}
<div className="card"> <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"> <ul className="nav nav-tabs">
<li className="nav-item cursor-pointer"> <li className="nav-item cursor-pointer">
<a <a
@ -142,7 +143,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
} fs-6`} } fs-6`}
onClick={(e) => handleTabClick("notes", e)} 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> <span className="d-none d-md-inline">Notes</span>
</a> </a>
</li> </li>
@ -158,33 +159,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</a> </a>
</li> </li>
</ul> </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>
<div className="mb-1 px-2"> <div className="mb-1 px-2">
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
<div> <div className="d-flex align-items-center gap-3">
{activeTab === "notes" && ( {activeTab === "notes" && (
<input <input
type="search" type="search"
@ -196,7 +175,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
)} )}
{activeTab === "contacts" && ( {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"> <div className="d-flex gap-2 align-items-center">
<input <input
type="search" type="search"
@ -206,8 +185,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
onChange={(e) => setsearchContact(e.target.value)} onChange={(e) => setsearchContact(e.target.value)}
/> />
<button <button
className={`btn btn-xs ${ className={`btn btn-sm p-1 ${
!gridView ? "btn-primary" : "btn-outline-secondary" !gridView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setGridView(false)} onClick={() => setGridView(false)}
> >
@ -215,15 +194,16 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</button> </button>
<button <button
className={`btn btn-xs ${ className={`btn btn-sm p-1 ${
gridView ? "btn-primary" : "btn-outline-secondary" gridView ? " btn-primary" : " btn-outline-primary"
}`} }`}
onClick={() => setGridView(true)} onClick={() => setGridView(true)}
> >
<i className="bx bx-grid-alt"></i> <i className="bx bx-grid-alt"></i>
</button> </button>
</div> </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 <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@ -236,14 +216,36 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
className="form-check-label ms-2" className="form-check-label ms-2"
htmlFor="inactiveEmployeesCheckbox" htmlFor="inactiveEmployeesCheckbox"
> >
{showActive ? "Active" : "Inactive"} {showActive ? "Active" : "Inactive"} Contacts
</label> </label>
</div> </div>
</div> </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>
</div> </div>
<div> <div>