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

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

@ -5,8 +5,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
<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">
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<li className="nav-item">
<a <a
className={`nav-link py-1 px-2 small ${ className={`nav-link py-1 px-2 small ${
activePill === "attendance" ? "active" : "" activePill === "attendance" ? "active" : ""
@ -20,7 +19,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
<i className="bx bx-group bx-sm me-1_5"></i> Attendances <i className="bx bx-group bx-sm me-1_5"></i> Attendances
</a> </a>
</li> </li>
<li className="nav-item"> <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a <a
className={`nav-link py-1 px-2 small ${ className={`nav-link py-1 px-2 small ${
activePill === "account" ? "active" : "" activePill === "account" ? "active" : ""
@ -35,7 +34,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
</a> </a>
</li> </li>
<li className="nav-item"> <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a <a
className={`nav-link py-1 px-2 small ${ className={`nav-link py-1 px-2 small ${
activePill === "activities" ? "active" : "" activePill === "activities" ? "active" : ""

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

@ -54,7 +54,7 @@ const Header = () => {
}; };
const handleProfilePage = () => { const handleProfilePage = () => {
navigate(`/employee/${profile?.employeeInfo?.id}?for=account`); navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
}; };
return ( return (
<nav <nav
@ -120,7 +120,7 @@ const Header = () => {
className="nav-link dropdown-toggle hide-arrow" className="nav-link dropdown-toggle hide-arrow"
href="#;" href="#;"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
data-bs-auto-close="outside" data-bs-auto-close="true"
aria-expanded="false" aria-expanded="false"
> >
<i className="icon-base bx bx-grid-alt icon-md"></i> <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="dropdown-shortcuts-list scrollable-container ps">
<div className="row row-bordered overflow-visible g-0"> <div className="row row-bordered overflow-visible g-0">
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <a
<i className="icon-base bx bx-home icon-26px text-heading"></i> onClick={() => navigate(`/dashboard`)}
</span> className="text-heading text-truncate cursor-pointer"
<a href="/dashboard" className="stretched-link"> >
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-home icon-26px text-heading"></i>
</span>
Dashboard Dashboard
</a> </a>
<small>User Dashboard</small> <small>User Dashboard</small>
</div> </div>
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <a
<i className="icon-base bx bx-building-house icon-26px text-heading"></i> onClick={() => navigate(`/projects`)}
</span> className="text-heading text-truncate cursor-pointer"
<a href="/projects" className="stretched-link"> >
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-building-house icon-26px text-heading"></i>
</span>
Projects Projects
</a> </a>
<small>Projects List</small> <small>Projects List</small>
</div> </div>
</div> </div>
<div className="row row-bordered overflow-visible g-0"> <div className="row row-bordered overflow-visible g-0">
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <a
<i className="icon-base bx bxs-user-account icon-26px text-heading"></i> onClick={() => navigate(`/employees`)}
</span> className="text-heading text-truncate cursor-pointer"
<a href="/employees" className="stretched-link"> >
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
</span>
Employees Employees
</a> </a>
<small>Manage Employees</small> <small>Manage Employees</small>
</div> </div>
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <a
<i className="icon-base bx bx-user-check icon-26px text-heading"></i> onClick={() => navigate(`/activities/attendance`)}
</span> className="text-heading text-truncate cursor-pointer"
<a href="/activities/attendance" className="stretched-link"> >
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bx-user-check icon-26px text-heading"></i>
</span>
Attendance Attendance
</a> </a>
<small>Manage Attendance</small> <small>Manage Attendance</small>
@ -183,21 +197,29 @@ const Header = () => {
</div> </div>
<div className="row row-bordered overflow-visible g-0"> <div className="row row-bordered overflow-visible g-0">
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <a
<i className="icon-base bx bxs-wrench icon-26px text-heading"></i> onClick={() => navigate(`/activities/task`)}
</span> className="text-heading text-truncate cursor-pointer"
<a href="/activities/task" className="stretched-link"> >
<span className="dropdown-shortcuts-icon rounded-circle mb-3">
<i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
</span>
Allocate Work Allocate Work
</a> </a>
<small>Work Allocations</small> <small>Work Allocations</small>
</div> </div>
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
<span className="dropdown-shortcuts-icon rounded-circle mb-3"> <a
<i className="icon-base bx bx-list-ul icon-26px text-heading"></i> onClick={() => navigate(`/activities/records`)}
</span> className="text-heading text-truncate cursor-pointer"
<a href="/activities/records" className="stretched-link"> >
<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 Daily Work Log
</a> </a>
<small>Daily Work Allocations</small> <small>Daily Work Allocations</small>
</div> </div>
</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 axios from "axios";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import EmployeeNav from "../../components/Employee/EmployeeNav"; 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 { getCachedData } from "../../slices/apiDataManager";
import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees"; import {
useEmployeeProfile,
useEmployees,
useEmployeesByProject,
} from "../../hooks/useEmployees";
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";
@ -13,41 +17,33 @@ 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";
const EmployeeProfile = () => { const EmployeeProfile = () => {
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)
const [loading,setLoading] = useState(true) const [loading, setLoading] = useState(true);
const [SearchParams] = useSearchParams() const [SearchParams] = useSearchParams();
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 handlePillClick = (pillKey) => { const handlePillClick = (pillKey) => {
setActivePill(pillKey); setActivePill(pillKey);
}; };
const fetchEmployeeProfile = async( employeeID ) => const fetchEmployeeProfile = async (employeeID) => {
{ try {
try const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
{ setCurrentEmployee(resp.data);
const resp = await EmployeeRepository.getEmployeeProfile( employeeID ) setLoading(false);
setCurrentEmployee( resp.data ) } catch (err) {
setLoading(false) setLoading(false);
} catch ( err )
{
setLoading(false)
} }
} };
useEffect(() => { useEffect(() => {
if ( employeeId ) if (employeeId) {
{ fetchEmployeeProfile(employeeId);
fetchEmployeeProfile(employeeId)
} }
}, [employeeId]); }, [employeeId]);
@ -58,42 +54,40 @@ const EmployeeProfile = () => {
case "attendance": { case "attendance": {
return ( return (
<> <>
<AttendancesEmployeeRecords employee={employeeId } /> <AttendancesEmployeeRecords employee={employeeId} />
</> </>
); );
} }
case "dcoument": { case "dcoument": {
return ( return (
<> <>
<ComingSoonPage/> <ComingSoonPage />
</> </>
); );
break; break;
} }
case "activities": { case "activities": {
return ( return (
<> <>
<ComingSoonPage/> <ComingSoonPage />
</> </>
); );
break; break;
} }
default: default:
return <> return (
<ComingSoonPage/> <>
</>; <ComingSoonPage />
</>
);
} }
}; };
if (loading) { if (loading) {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
return ( return (
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<Breadcrumb <Breadcrumb
@ -123,75 +117,127 @@ const EmployeeProfile = () => {
</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">Employee Info</h6> <h6 className="mb-2 text-muted text-start">
Employee Info
</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">{currentEmployee?.email || <em>NA</em>}</td> <td className="text-start">
{currentEmployee?.email || <em>NA</em>}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Phone Number:</td> <td className="fw-medium text-start">
<td className="text-start">{currentEmployee?.phoneNumber || <em>NA</em>}</td> Phone Number:
</td>
<td className="text-start">
{currentEmployee?.phoneNumber || <em>NA</em>}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Emergency Contact Person:</td> <td className="fw-medium text-start">
<td className="text-start">{currentEmployee?.emergencyContactPerson || <em>NA</em>}</td> Emergency Contact Person:
</td>
<td className="text-start">
{currentEmployee?.emergencyContactPerson || (
<em>NA</em>
)}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Emergency Contact Number:</td> <td className="fw-medium text-start">
<td className="text-start">{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}</td> Emergency Contact Number:
</td>
<td className="text-start">
{currentEmployee?.emergencyPhoneNumber || (
<em>NA</em>
)}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Gender:</td> <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>
<tr> <tr>
<td className="fw-medium text-start">Birth Date:</td> <td className="fw-medium text-start">
<td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td> Birth Date:
</td>
<td className="text-start">
{currentEmployee?.birthDate ? (
new Date(
currentEmployee.birthDate
).toLocaleDateString()
) : (
<em>NA</em>
)}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Joining Date:</td> <td className="fw-medium text-start">
<td className="text-start">{currentEmployee?.joiningDate ? new Date(currentEmployee.joiningDate).toLocaleDateString() : <em>NA</em>}</td> Joining Date:
</td>
<td className="text-start">
{currentEmployee?.joiningDate ? (
new Date(
currentEmployee.joiningDate
).toLocaleDateString()
) : (
<em>NA</em>
)}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Job Role:</td> <td className="fw-medium text-start">
<td className="text-start">{currentEmployee?.jobRole || <em>NA</em>}</td> Job Role:
</td>
<td className="text-start">
{currentEmployee?.jobRole || <em>NA</em>}
</td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start">Address:</td> <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> </tr>
</tbody> </tbody>
</table> </table>
</div> </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 Edit Profile
</button> </button>
</div> </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 onPillClick={handlePillClick} activePill={activePill} /> <EmployeeNav
</div> onPillClick={handlePillClick}
<div className="card"> activePill={activePill}
<div className="row row-bordered g-0"> />
{renderContent()} </div>
<div className="card">
<div className="row row-bordered g-0">{renderContent()}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };