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

Handle menu navigation from shortcut so that smoot navigation happens and page does not reload

Browse Source
This commit is contained in:
Vikas Nale 2025-05-07 15:53:03 +05:30
parent 55aa6ec499
commit 50f48d27f2
3 changed files with 163 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
<div className="col-md-12">
<div className="nav-align-top ">
<ul className="nav nav-tabs">
<li className="nav-item">
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a
className={`nav-link py-1 px-2 small ${
activePill === "attendance" ? "active" : ""
@ -20,7 +19,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
<i className="bx bx-group bx-sm me-1_5"></i> Attendances
</a>
</li>
<li className="nav-item">
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a
className={`nav-link py-1 px-2 small ${
activePill === "account" ? "active" : ""
@ -34,8 +33,8 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
<i className="bx bx-user bx-sm me-1_5"></i> Documents
</a>
</li>
<li className="nav-item">
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a
className={`nav-link py-1 px-2 small ${
activePill === "activities" ? "active" : ""

74
src/components/Layout/Header.jsx
View File

@ -54,7 +54,7 @@ const Header = () => {
};
const handleProfilePage = () => {
navigate(`/employee/${profile?.employeeInfo?.id}?for=account`);
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
};
return (
<nav
@ -120,7 +120,7 @@ const Header = () => {
className="nav-link dropdown-toggle hide-arrow"
href="#;"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
data-bs-auto-close="true"
aria-expanded="false"
>
<i className="icon-base bx bx-grid-alt icon-md"></i>
@ -143,39 +143,53 @@ const Header = () => {
<div className="dropdown-shortcuts-list scrollable-container ps">
<div className="row row-bordered overflow-visible g-0">
<div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-home icon-26px text-heading"></i>
</span>
<a href="/dashboard" className="stretched-link">
<a
onClick={() => navigate(`/dashboard`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-home icon-26px text-heading"></i>
</span>
Dashboard
</a>
<small>User Dashboard</small>
</div>
<div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-building-house icon-26px text-heading"></i>
</span>
<a href="/projects" className="stretched-link">
<a
onClick={() => navigate(`/projects`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-building-house icon-26px text-heading"></i>
</span>
Projects
</a>
<small>Projects List</small>
</div>
</div>
<div className="row row-bordered overflow-visible g-0">
<div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
</span>
<a href="/employees" className="stretched-link">
<a
onClick={() => navigate(`/employees`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
</span>
Employees
</a>
<small>Manage Employees</small>
</div>
<div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-user-check icon-26px text-heading"></i>
</span>
<a href="/activities/attendance" className="stretched-link">
<a
onClick={() => navigate(`/activities/attendance`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-user-check icon-26px text-heading"></i>
</span>
Attendance
</a>
<small>Manage Attendance</small>
@ -183,21 +197,29 @@ const Header = () => {
</div>
<div className="row row-bordered overflow-visible g-0">
<div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
</span>
<a href="/activities/task" className="stretched-link">
<a
onClick={() => navigate(`/activities/task`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
</span>
Allocate Work
</a>
<small>Work Allocations</small>
</div>
<div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
</span>
<a href="/activities/records" className="stretched-link">
<a
onClick={() => navigate(`/activities/records`)}
className="text-heading text-truncate cursor-pointer"
>
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
</span>
Daily Work Log
</a>
<small>Daily Work Allocations</small>
</div>
</div>

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

@ -3,9 +3,13 @@ import EmpProfile from "../../components/Employee/EmpProfile";
import axios from "axios";
import Breadcrumb from "../../components/common/Breadcrumb";
import EmployeeNav from "../../components/Employee/EmployeeNav";
import { useSearchParams,useParams } from "react-router-dom";
import { useSearchParams, useParams } from "react-router-dom";
import { getCachedData } from "../../slices/apiDataManager";
import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees";
import {
useEmployeeProfile,
useEmployees,
useEmployeesByProject,
} from "../../hooks/useEmployees";
import { useSelector } from "react-redux";
import EmployeeRepository from "../../repositories/EmployeeRepository";
import { ComingSoonPage } from "../Misc/ComingSoonPage";
@ -13,41 +17,33 @@ import { useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
const EmployeeProfile = () => {
const projectID = useSelector((store)=>store.localVariables.projectId)
const {employeeId} = useParams();
const projectID = useSelector((store) => store.localVariables.projectId);
const { employeeId } = useParams();
// const {employee,loading} = useEmployeeProfile(employeeId)
const [loading,setLoading] = useState(true)
const [loading, setLoading] = useState(true);
const [SearchParams] = useSearchParams()
const tab = SearchParams.get( "for" )
const [SearchParams] = useSearchParams();
const tab = SearchParams.get("for");
const [activePill, setActivePill] = useState(tab);
const[currentEmployee,setCurrentEmployee] = useState()
const [currentEmployee, setCurrentEmployee] = useState();
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
};
const fetchEmployeeProfile = async( employeeID ) =>
{
try
{
const resp = await EmployeeRepository.getEmployeeProfile( employeeID )
setCurrentEmployee( resp.data )
setLoading(false)
} catch ( err )
{
setLoading(false)
const fetchEmployeeProfile = async (employeeID) => {
try {
const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
setCurrentEmployee(resp.data);
setLoading(false);
} catch (err) {
setLoading(false);
}
}
};
useEffect(() => {
if ( employeeId )
{
fetchEmployeeProfile(employeeId)
if (employeeId) {
fetchEmployeeProfile(employeeId);
}
}, [employeeId]);
@ -58,42 +54,40 @@ const EmployeeProfile = () => {
case "attendance": {
return (
<>
<AttendancesEmployeeRecords employee={employeeId } />
<AttendancesEmployeeRecords employee={employeeId} />
</>
);
}
case "dcoument": {
return (
<>
<ComingSoonPage/>
</>
<ComingSoonPage />
</>
);
break;
}
case "activities": {
return (
<>
<ComingSoonPage/>
</>
<ComingSoonPage />
</>
);
break;
}
default:
return <>
<ComingSoonPage/>
</>;
return (
<>
<ComingSoonPage />
</>
);
}
};
if (loading) {
return <div>Loading...</div>;
}
return (
<div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb
@ -123,75 +117,127 @@ const EmployeeProfile = () => {
</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>
<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>
<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>
<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>
<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>
<td className="fw-medium text-start">
Emergency Contact Number:
</td>
<td className="text-start">
{currentEmployee?.emergencyPhoneNumber || (
<em>NA</em>
)}
</td>
</tr>
<tr>
<td className="fw-medium text-start">Gender:</td>
<td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
<td className="text-start">
{currentEmployee?.gender || <em>NA</em>}
</td>
</tr>
<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>
<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>
<tr>
<td className="fw-medium text-start">Joining Date:</td>
<td className="text-start">{currentEmployee?.joiningDate ? new Date(currentEmployee.joiningDate).toLocaleDateString() : <em>NA</em>}</td>
<td className="fw-medium text-start">
Joining Date:
</td>
<td className="text-start">
{currentEmployee?.joiningDate ? (
new Date(
currentEmployee.joiningDate
).toLocaleDateString()
) : (
<em>NA</em>
)}
</td>
</tr>
<tr>
<td className="fw-medium text-start">Job Role:</td>
<td className="text-start">{currentEmployee?.jobRole || <em>NA</em>}</td>
<td className="fw-medium text-start">
Job Role:
</td>
<td className="text-start">
{currentEmployee?.jobRole || <em>NA</em>}
</td>
</tr>
<tr>
<td className="fw-medium text-start">Address:</td>
<td className="text-start">{currentEmployee?.currentAddress || <em>NA</em>}</td>
<td className="text-start">
{currentEmployee?.currentAddress || <em>NA</em>}
</td>
</tr>
</tbody>
</table>
</div>
<button className="btn btn-primary btn-block" onClick={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
<button
className="btn btn-primary btn-block"
onClick={() =>
navigate(`/employee/manage/${currentEmployee?.id}`)
}
>
Edit Profile
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
<div className="row">
<EmployeeNav onPillClick={handlePillClick} activePill={activePill} />
</div>
<div className="card">
<div className="row row-bordered g-0">
{renderContent()}
<div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
<div className="row">
<EmployeeNav
onPillClick={handlePillClick}
activePill={activePill}
/>
</div>
<div className="card">
<div className="row row-bordered g-0">{renderContent()}</div>
</div>
</div>
</div>
</div>
</div>
);
};