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

optimized EmpDashBoard , EmployeeNav and EmployeeProfile

Browse Source
This commit is contained in:
pramod mahajan 2025-08-12 16:22:34 +05:30
parent 80ede060cb
commit 8117e60bff
3 changed files with 64 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Employee/EmpDashboard.jsx
View File

@ -19,51 +19,55 @@ const EmpDashboard = ({ profile }) => {
</div> </div>
<div className="col col-sm-6 pt-5"> <div className="col col-sm-6 pt-5">
<div className="card "> <div className="card ">
<div className="card-body"> <div className="card-body">
<small className="card-text text-uppercase text-body-secondary small"> <small className="card-text text-uppercase text-body-secondary small">
My Projects My Projects
</small>{" "} </small>{" "}
<ul className="list-unstyled my-3 py-1"> <ul className="list-unstyled text-start my-3 py-1">
{selectedProjectLoding && <span>Loading</span>} {selectedProjectLoding && <span>Loading</span>}
{projectList.map((project) => ( {projectList.map((project) => (
<li <li
className="d-flex mb-6 align-items-center" className="d-flex mb-4 align-items-start flex-wrap"
key={project.id} key={project.id}
> >
<div className="avatar flex-shrink-0 me-4"> {/* Project Info */}
<span className="avatar-initial rounded bg-label-primary"> <div className="flex-grow-1">
<i className="icon-base bx bx-buildings icon-lg "></i> <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
</span> <div className="d-flex">
</div> <div className="avatar flex-shrink-0 me-3">
<div className="row w-100 align-items-center"> <span className="avatar-initial rounded bg-label-primary">
<div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> <i className="icon-base bx bx-buildings icon-lg"></i>
<div className="me-2"> </span>
<div className="d-flex align-items-center"> </div>
<h6 className="mb-0 me-2"> <div className="d-block">
<h6 className="mb-0 d-block">
{project.projectShortName} {project.projectShortName}
</h6> </h6>
<small className="text-muted">
{project.projectName}
</small>
<div className="label-secondary">
Assigned:{" "}
{project.assignedDate ? (
new Date(
project.assignedDate
).toLocaleDateString()
) : (
<em>NA</em>
)}
</div>
</div> </div>
<small>{project.projectName}</small>
</div> </div>
<div className="user-progress"> <div>
<div className="badge bg-label-secondary "> <span className="badge bg-label-secondary">
{project.designation} {project.designation}
</div> </span>
</div> </div>
</div> </div>
<div className="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-content-xxl-end mt-1">
<div className="label-secondary"> {/* Dates */}
Assigned:{" "} <div className="mt-2 d-flex flex-column flex-sm-row gap-3">
{project.assignedDate ? ( {project.removedDate && (
new Date(project.assignedDate).toLocaleDateString()
) : (
<em>NA</em>
)}
</div>
</div>
{project.removedDate && (
<div className="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-content-xxl-end mt-1">
<div className="label-secondary"> <div className="label-secondary">
Unassigned:{" "} Unassigned:{" "}
{project.removedDate ? ( {project.removedDate ? (
@ -72,8 +76,8 @@ const EmpDashboard = ({ profile }) => {
<em>NA</em> <em>NA</em>
)} )}
</div> </div>
</div> )}
)} </div>
</div> </div>
</li> </li>
))} ))}

87
src/components/Employee/EmployeeNav.jsx
View File

@ -1,67 +1,36 @@
import React from "react"; import React from "react";
const EmployeeNav = ({ onPillClick, activePill }) => { const EmployeeNav = ({ onPillClick, activePill }) => {
const tabs = [
{ key: "profile", icon: "bx bx-user", label: "Profile" },
{ key: "attendance", icon: "bx bx-group", label: "Attendances" },
{ key: "documents", icon: "bx bx-user", label: "Documents" },
{ key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
];
return ( return (
<div className="col-md-12"> <div className="col-md-12">
<div className="nav-align-top "> <div className="nav-align-top">
<ul className="nav nav-tabs"> <ul className="nav nav-tabs overflow-auto" id="horizontal-example">
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}> {tabs.map(({ key, icon, label }) => (
<a <li
className={`nav-link py-1 px-2 small ${ key={key}
activePill === "profile" ? "active" : "" className="nav-item"
}`} style={{ padding: "10px 10px 0 10px" }}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("profile");
}}
> >
<i className="icon-base bx bx-user icon-sm me-1_5"></i> Profile <a
</a> href="#"
</li> className={`nav-link py-1 px-2 small ${
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}> activePill === key ? "active" : ""
<a }`}
className={`nav-link py-1 px-2 small ${ onClick={(e) => {
activePill === "attendance" ? "active" : "" e.preventDefault();
}`} onPillClick(key);
href="#" }}
onClick={(e) => { >
e.preventDefault(); // Prevent page reload <i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
onPillClick("attendance"); </a>
}} </li>
> ))}
<i className="bx bx-group bx-sm me-1_5"></i> Attendances
</a>
</li>
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a
className={`nav-link py-1 px-2 small ${
activePill === "documents" ? "active" : ""
}`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("documents");
}}
>
<i className="bx bx-user bx-sm me-1_5"></i> Documents
</a>
</li>
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a
className={`nav-link py-1 px-2 small ${
activePill === "activities" ? "active" : ""
}`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("activities");
}}
>
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>

6
src/pages/employee/EmployeeProfile.jsx
View File

@ -131,11 +131,7 @@ const EmployeeProfile = () => {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-12"> <div className=" ">{renderContent()}</div>
<div>
<div className="row row-bordered g-0">{renderContent()}</div>
</div>
</div>
</div> </div>
</div> </div>
</> </>