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

refactor: update EmployeeProfile component layout and add employee details table

Browse Source
This commit is contained in:
Vaibhav Surve 2025-04-16 15:55:06 +05:30 committed by Vikas Nale
parent 49e3e0735e
commit 37620c78a1
1 changed files with 66 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React,{useState,useEffect} from "react"; import React, { useState, useEffect } from "react";
import EmpProfile from "../../components/Employee/EmpProfile"; import EmpProfile from "../../components/Employee/EmpProfile";
import axios from "axios"; import axios from "axios";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
@ -9,6 +9,7 @@ import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../h
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";
import { useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar"; import Avatar from "../../components/common/Avatar";
const EmployeeProfile = () => { const EmployeeProfile = () => {
@ -50,7 +51,7 @@ const EmployeeProfile = () => {
} }
}, [employeeId]); }, [employeeId]);
const navigate = useNavigate();
const renderContent = () => { const renderContent = () => {
if (loading) return <div>Loading</div>; if (loading) return <div>Loading</div>;
switch (activePill) { switch (activePill) {
@ -107,56 +108,71 @@ const EmployeeProfile = () => {
<div className="row"> <div className="row">
<div className="col-12 mb-4"> <div className="col-12 mb-4">
<div className="card"> <div className="card">
<div className="card-body"> <div className="card-body">
<div className="d-flex flex-row flex-lg-column"> <div className="d-flex flex-row flex-lg-column">
<div className="d-flex flex-column justify-content-center align-items-center text-center"> <div className="d-flex flex-column justify-content-center align-items-center text-center">
<Avatar <Avatar
firstName={`${currentEmployee?.firstName}`} firstName={`${currentEmployee?.firstName}`}
lastName={`${currentEmployee?.lastName}`} lastName={`${currentEmployee?.lastName}`}
/> size={"lg"}
<div className="py-2"> />
<p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p> <div className="py-2">
</div> <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
<hr className="my-2" /> </div>
</div> </div>
<div className="w-100 d-flex flex-column justify-content-start">
<div className="mt-3 w-100">
<h6 className="mb-2 text-muted text-start">Employee Info</h6>
<table className="table table-borderless mb-3">
<tbody>
<tr>
<td className="fw-medium text-start">Email:</td>
<td className="text-start">{currentEmployee?.email || <em>NA</em>}</td>
</tr>
<tr>
<td className="fw-medium text-start">Phone Number:</td>
<td className="text-start">{currentEmployee?.phoneNumber || <em>NA</em>}</td>
</tr>
<tr>
<td className="fw-medium text-start">Emergency Contact Person:</td>
<td className="text-start">{currentEmployee?.emergencyContactPerson || <em>NA</em>}</td>
</tr>
<tr>
<td className="fw-medium text-start">Emergency Contact Number:</td>
<td className="text-start">{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}</td>
</tr>
<div className="w-100 d-flex flex-column justify-content-start"> <tr>
<div className="d-flex justify-content-between align-items-center mb-3"> <td className="fw-medium text-start">Gender:</td>
<small className="card-text text-uppercase text-muted small mb-0">Contacts</small> <td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
<a href="javascript:;" class="btn btn-icon item-edit"><i class="bx bx-edit bx-sm"></i></a> </tr>
</div> <tr>
<td className="fw-medium text-start">Birth Date:</td>
<td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td>
</tr>
<ul className="list-unstyled my-3 py-1">
<li className="d-flex align-items-center mb-4"> <tr>
<i className="bx bx-phone"></i> <td className="fw-medium text-start">Joining Date:</td>
<span className="fw-medium mx-2">Contact Number:</span> <td className="text-start">{currentEmployee?.joiningDate ? new Date(currentEmployee.joiningDate).toLocaleDateString() : <em>NA</em>}</td>
<span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}> </tr>
{currentEmployee?.emergencyPhoneNumber || <em>NA</em>} <tr>
</span> <td className="fw-medium text-start">Job Role:</td>
</li> <td className="text-start">{currentEmployee?.jobRole || <em>NA</em>}</td>
<li className="d-flex align-items-center mb-4 text-start"> </tr>
<i className="bx bx-envelope"></i> <tr>
<span className="fw-medium mx-2">Email:</span> <td className="fw-medium text-start">Address:</td>
<span className={`text-break text-wrap ${currentEmployee?.email ? "" : "text-muted"}`}> <td className="text-start">{currentEmployee?.currentAddress || <em>NA</em>}</td>
{currentEmployee?.email || <em className="muted">NA</em>} </tr>
</span> </tbody>
</li> </table>
<li className="d-flex align-items-center mb-4"> </div>
<i className="bx bx-user"></i> <button className="btn btn-primary btn-block" onClick={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
<span className="fw-medium mx-2">Contact Person:</span> Edit Profile
<span>{currentEmployee?.emergencyContactPerson}</span> </button>
</li> </div>
<li className="d-flex align-items-center mb-4"> </div>
<i className="bx bx-flag"></i> </div>
<span className="fw-medium mx-2">Address:</span>
<span className={`${currentEmployee?.currentAddress ? "" : "text-muted"}`}>
{currentEmployee?.currentAddress || <em>NA</em>}
</span>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div> </div>