pramod_Task#105 #52

Merged
admin merged 9 commits from pramod_Task#105 into Issues_April_4W 2025-04-25 11:02:04 +00:00
Showing only changes of commit de231145d4 - Show all commits

View File

@ -0,0 +1,184 @@
import React, {useState} from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import IconButton from "../../components/common/IconButton";
import GlobalModel from "../../components/common/GlobalModel";
import ManageDirectory from "../../components/Directory/ManageDirectory";
const Directory = () =>
{
const [ isOpenModal, setIsOpenModal ] = useState( false )
const closedModel = () => setIsOpenModal( false )
const contacts = [
{
"userId": 1,
"firstName": "Krish",
"lastName": "Lee",
"phoneNumber": "123456",
"emailAddress": "krish.lee@learningcontainer.com",
"type":"Clinet"
},
{
"userId": 2,
"firstName": "racks",
"lastName": "jacson",
"phoneNumber": "123456",
"emailAddress": "racks.jacson@learningcontainer.com",
"type":"Vendor"
},
{
"userId": 3,
"firstName": "denial",
"lastName": "roast",
"phoneNumber": "33333333",
"emailAddress": "denial.roast@learningcontainer.com",
"type":"vendor"
},
{
"userId": 4,
"firstName": "devid",
"lastName": "neo",
"phoneNumber": "222222222",
"emailAddress": "devid.neo@learningcontainer.com",
"type":"employee"
},
{
"userId": 5,
"firstName": "jone",
"lastName": "mac",
"phoneNumber": "111111111",
"emailAddress": "jone.mac@learningcontainer.com",
"type":"employee"
}
]
return (
<div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Directory", link: null },
]}
></Breadcrumb>
<GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
<ManageDirectory/>
</GlobalModel>
<div className="row">
<div className="row mx-0 px-0">
<div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search projects..."
/>
</div>
<div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
<button
type="button"
className={`btn btn-sm btn-primary `}
onClick={() => setIsOpenModal(true)}
>
<i className="bx bx-plus-circle me-2"></i>
New Contact
</button>
</div>
</div>
<div className="table-responsive text-nowrap py-2 ">
<table className="table px-2">
<thead>
<tr>
<th className="text-start" colSpan="2">
Name
</th>
<th className="px-2">
<div className="d-flex align-items-center gap-1">
<IconButton
size={12}
iconClass="bx bx-envelope"
color="primary"
onClick={() => alert("User icon clicked")}
/>
<span>Email</span>
</div>
</th>
<th className="mx-2"><div className="d-flex align-items-center m-0 p-0 gap-1">
<IconButton
size={12}
iconClass="bx bx-phone"
color="warning"
onClick={() => alert("User icon clicked")}
/>
<span>Phone</span>
</div>
</th>
<th className="mx-2">
<div className="d-flex align-items-center gap-1">
<IconButton
size={12}
iconClass="bx bxs-grid-alt"
color="info"
/>
<span>Organization</span>
</div>
</th>
<th className="mx-2">
<div className="dropdown">
<a
className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Type <i className="bx bx-filter bx-sm"></i>
</a>
{/* <ul className="dropdown-menu p-2 text-capitalize">
{[
{ id: 1, label: "Active" },
{ id: 2, label: "On Hold" },
{ id: 3, label: "Inactive" },
{ id: 4, label: "Completed" },
].map(({ id, label }) => (
<li key={id}>
<div className="form-check">
<input
className="form-check-input "
type="checkbox"
checked={selectedStatuses.includes(id)}
onChange={() => handleStatusChange(id)}
/>
<label className="form-check-label">
{label}
</label>
</div>
</li>
))}
</ul>
*/}
</div>
</th>
<th
// className={`mx-2 ${
// HasManageProject ? "d-sm-table-cell" : "d-none"
// }`}
>
Action
</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 overflow-auto ">
<tr>
<td colSpan="12" className="text-center py-4">
No projects found
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
};
export default Directory;