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

Adding Change Password button on Employee Profile Page. #198

Merged
vikas.nale merged 3 commits from Kartik_Task#491 into main 2025-06-10 14:40:22 +00:00
Conversation 0 Commits 3 Files Changed 2 +181 -163
2 changed files with 181 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/authentication/ChangePassword.jsx
View File

@ -212,15 +212,16 @@ const ChangePasswordPage = ({ onClose }) => {
<p className="p-0 m-0">Password must be:</p> <p className="p-0 m-0">Password must be:</p>
<p className="p-0 m-0">- at least 8 characters long</p> <p className="p-0 m-0">- at least 8 characters long</p>
<p className="p-0 m-0"> <p className="p-0 m-0">
- must contain at least one uppercase letter - must contain one uppercase, one lowercase letter, at least one
number, at least one special character
</p> </p>
<p className="p-0 m-0"> {/* <p className="p-0 m-0">
- must contain at least one lowercase letter - must contain at least one lowercase letter
</p> </p>
<p className="p-0 m-0">- must contain at least one number</p> <p className="p-0 m-0">- must contain at least one number</p>
<p className="p-0 m-0"> <p className="p-0 m-0">
- must contain at least one special character - must contain at least one special character
</p> </p> */}
</div> </div>
</form> </form>
</div> </div>

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

@ -10,6 +10,8 @@ import {
useEmployees, useEmployees,
useEmployeesByProject, useEmployeesByProject,
} from "../../hooks/useEmployees"; } from "../../hooks/useEmployees";
import { useProfile } from "../../hooks/useProfile";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import EmployeeRepository from "../../repositories/EmployeeRepository"; import EmployeeRepository from "../../repositories/EmployeeRepository";
import { ComingSoonPage } from "../Misc/ComingSoonPage"; import { ComingSoonPage } from "../Misc/ComingSoonPage";
@ -17,7 +19,11 @@ import { useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar"; import Avatar from "../../components/common/Avatar";
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords"; import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
import ManageEmployee from "../../components/Employee/ManageEmployee"; import ManageEmployee from "../../components/Employee/ManageEmployee";
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
const EmployeeProfile = () => { const EmployeeProfile = () => {
const { profile } = useProfile();
const projectID = useSelector((store) => store.localVariables.projectId); const projectID = useSelector((store) => store.localVariables.projectId);
const { employeeId } = useParams(); const { employeeId } = useParams();
// const {employee,loading} = useEmployeeProfile(employeeId) // const {employee,loading} = useEmployeeProfile(employeeId)
@ -27,17 +33,17 @@ const EmployeeProfile = () => {
const tab = SearchParams.get("for"); const tab = SearchParams.get("for");
const [activePill, setActivePill] = useState(tab); const [activePill, setActivePill] = useState(tab);
const [currentEmployee, setCurrentEmployee] = useState(); const [currentEmployee, setCurrentEmployee] = useState();
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const handlePillClick = (pillKey) => { const handlePillClick = (pillKey) => {
setActivePill(pillKey); setActivePill(pillKey);
}; };
const closeModal = () => { const closeModal = () => {
setShowModal(false); setShowModal(false);
fetchEmployeeProfile(employeeId); fetchEmployeeProfile(employeeId);
}; };
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const fetchEmployeeProfile = async (employeeID) => { const fetchEmployeeProfile = async (employeeID) => {
try { try {
@ -95,179 +101,190 @@ const EmployeeProfile = () => {
if (loading) { if (loading) {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
const { openChangePassword } = useChangePassword();
return ( return (
<> {showModal && (<div <>
className={`modal fade ${showModal ? "show" : ""} `} {" "}
tabIndex="-1" {showModal && (
role="dialog" <div
style={{ display: showModal ? "block" : "none" }} className={`modal fade ${showModal ? "show" : ""} `}
aria-hidden={!showModal} tabIndex="-1"
> role="dialog"
<div className="modal-dialog modal-xl modal-dialog-centered "> style={{ display: showModal ? "block" : "none" }}
<div aria-hidden={!showModal}
className="modal-content overflow-y-auto overflow-x-hidden" >
style={{ maxHeight: "90vh" }} <div className="modal-dialog modal-xl modal-dialog-centered ">
> <div
<ManageEmployee className="modal-content overflow-y-auto overflow-x-hidden"
employeeId={employeeId} style={{ maxHeight: "90vh" }}
onClosed={closeModal} >
/> <ManageEmployee employeeId={employeeId} onClosed={closeModal} />
</div>
</div> </div>
</div> </div>
</div>)} )}
<div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Employees", link: "/employees" },
{ label: "Profile", link: null },
]}
></Breadcrumb>
<div className="container-xxl flex-grow-1 container-p-y"> <div className="row">
<Breadcrumb <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
data={[ <div className="row">
{ label: "Home", link: "/dashboard" }, <div className="col-12 mb-4">
{ label: "Employees", link: "/employees" }, <div className="card">
{ label: "Profile", link: null }, <div className="card-body">
]} <div className="d-flex flex-row flex-lg-column">
></Breadcrumb> <div className="d-flex flex-column justify-content-center align-items-center text-center">
<Avatar
<div className="row"> firstName={`${currentEmployee?.firstName}`}
<div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1"> lastName={`${currentEmployee?.lastName}`}
<div className="row"> size={"lg"}
<div className="col-12 mb-4"> />
<div className="card"> <div className="py-2">
<div className="card-body"> <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
<div className="d-flex flex-row flex-lg-column"> </div>
<div className="d-flex flex-column justify-content-center align-items-center text-center">
<Avatar
firstName={`${currentEmployee?.firstName}`}
lastName={`${currentEmployee?.lastName}`}
size={"lg"}
/>
<div className="py-2">
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
</div> </div>
</div> <div className="w-100 d-flex flex-column justify-content-start">
<div className="w-100 d-flex flex-column justify-content-start"> <div className="mt-3 w-100">
<div className="mt-3 w-100"> <h6 className="mb-2 text-muted text-start">
<h6 className="mb-2 text-muted text-start"> Employee Info
Employee Info </h6>
</h6> <table className="table table-borderless mb-3">
<table className="table table-borderless mb-3"> <tbody>
<tbody> <tr>
<tr> <td className="fw-medium text-start">Email:</td>
<td className="fw-medium text-start">Email:</td> <td className="text-start">
<td className="text-start"> {currentEmployee?.email || <em>NA</em>}
{currentEmployee?.email || <em>NA</em>} </td>
</td> </tr>
</tr> <tr>
<tr> <td className="fw-medium text-start">
<td className="fw-medium text-start"> Phone Number:
Phone Number: </td>
</td> <td className="text-start">
<td className="text-start"> {currentEmployee?.phoneNumber || <em>NA</em>}
{currentEmployee?.phoneNumber || <em>NA</em>} </td>
</td> </tr>
</tr> <tr>
<tr> <td className="fw-medium text-start">
<td className="fw-medium text-start"> Emergency Contact Person:
Emergency Contact Person: </td>
</td> <td className="text-start">
<td className="text-start"> {currentEmployee?.emergencyContactPerson || (
{currentEmployee?.emergencyContactPerson || ( <em>NA</em>
<em>NA</em> )}
)} </td>
</td> </tr>
</tr> <tr>
<tr> <td className="fw-medium text-start">
<td className="fw-medium text-start"> Emergency Contact Number:
Emergency Contact Number: </td>
</td> <td className="text-start">
<td className="text-start"> {currentEmployee?.emergencyPhoneNumber || (
{currentEmployee?.emergencyPhoneNumber || ( <em>NA</em>
<em>NA</em> )}
)} </td>
</td> </tr>
</tr>
<tr> <tr>
<td className="fw-medium text-start">Gender:</td> <td className="fw-medium text-start">
<td className="text-start"> Gender:
{currentEmployee?.gender || <em>NA</em>} </td>
</td> <td className="text-start">
</tr> {currentEmployee?.gender || <em>NA</em>}
<tr> </td>
<td className="fw-medium text-start"> </tr>
Birth Date: <tr>
</td> <td className="fw-medium text-start">
<td className="text-start"> Birth Date:
{currentEmployee?.birthDate ? ( </td>
new Date( <td className="text-start">
currentEmployee.birthDate {currentEmployee?.birthDate ? (
).toLocaleDateString() new Date(
) : ( currentEmployee.birthDate
<em>NA</em> ).toLocaleDateString()
)} ) : (
</td> <em>NA</em>
</tr> )}
</td>
</tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start">
Joining Date: Joining Date:
</td> </td>
<td className="text-start"> <td className="text-start">
{currentEmployee?.joiningDate ? ( {currentEmployee?.joiningDate ? (
new Date( new Date(
currentEmployee.joiningDate currentEmployee.joiningDate
).toLocaleDateString() ).toLocaleDateString()
) : ( ) : (
<em>NA</em> <em>NA</em>
)} )}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start">
Job Role: Job Role:
</td> </td>
<td className="text-start"> <td className="text-start">
{currentEmployee?.jobRole || <em>NA</em>} {currentEmployee?.jobRole || <em>NA</em>}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Address:</td> <td className="fw-medium text-start">
<td className="text-start"> Address:
{currentEmployee?.currentAddress || <em>NA</em>} </td>
</td> <td className="text-start">
</tr> {currentEmployee?.currentAddress || (
</tbody> <em>NA</em>
</table> )}
</td>
</tr>
</tbody>
</table>
</div>
<button
className="btn btn-primary btn-block"
onClick={() => handleShow()}
>
Edit Profile
</button>
{currentEmployee?.id == profile?.employeeInfo?.id && (
<button
className="btn btn-outline-primary btn-block mt-2"
onClick={() => openChangePassword()}
>
Change Password
</button>
)}
</div> </div>
<button
className="btn btn-primary btn-block"
onClick={() =>
handleShow()
}
>
Edit Profile
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4"> <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
<div className="row"> <div className="row">
<EmployeeNav <EmployeeNav
onPillClick={handlePillClick} onPillClick={handlePillClick}
activePill={activePill} activePill={activePill}
/> />
</div> </div>
<div className="card"> <div className="card">
<div className="row row-bordered g-0">{renderContent()}</div> <div className="row row-bordered g-0">{renderContent()}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</> </>
); );
}; };