125 lines
3.4 KiB
JavaScript
125 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useSearchParams, useParams, useNavigate } from "react-router-dom";
|
|
import { useSelector } from "react-redux";
|
|
|
|
import {
|
|
useEmployee,
|
|
useEmployeeProfile,
|
|
useEmployees,
|
|
useEmployeesByProject,
|
|
} from "../../hooks/useEmployees";
|
|
import { useProfile } from "../../hooks/useProfile";
|
|
import { getCachedData } from "../../slices/apiDataManager";
|
|
|
|
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
|
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
|
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import EmployeeNav from "../../components/Employee/EmployeeNav";
|
|
import EmpProfile from "../../components/Employee/EmpProfile";
|
|
import EmpAttendance from "../../components/Employee/EmpAttendance";
|
|
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
|
import EmpBanner from "../../components/Employee/EmpBanner";
|
|
import EmpDashboard from "../../components/Employee/EmpDashboard";
|
|
import EmpDocuments from "../../components/Employee/EmpDocuments";
|
|
import EmpActivities from "../../components/Employee/EmpActivities";
|
|
|
|
const EmployeeProfile = () => {
|
|
const { profile } = useProfile();
|
|
|
|
const projectID = useSelector((store) => store.localVariables.projectId);
|
|
const { employeeId } = useParams();
|
|
|
|
const [SearchParams] = useSearchParams();
|
|
const tab = SearchParams.get("for");
|
|
const [activePill, setActivePill] = useState(tab || "profile");
|
|
const [showModal, setShowModal] = useState(false);
|
|
const {data:currentEmployee,isLoading,isError,error} = useEmployee(employeeId)
|
|
const handlePillClick = (pillKey) => {
|
|
setActivePill(pillKey);
|
|
};
|
|
|
|
|
|
const navigate = useNavigate();
|
|
const renderContent = () => {
|
|
if (isLoading) return <div>Loading</div>;
|
|
switch (activePill) {
|
|
case "profile": {
|
|
return (
|
|
<>
|
|
<EmpDashboard profile={currentEmployee} />
|
|
</>
|
|
);
|
|
}
|
|
case "attendance": {
|
|
return (
|
|
<>
|
|
<EmpAttendance employee={employeeId} />
|
|
</>
|
|
);
|
|
}
|
|
case "documents": {
|
|
return (
|
|
<>
|
|
<EmpDocuments />
|
|
</>
|
|
);
|
|
break;
|
|
}
|
|
case "activities": {
|
|
return (
|
|
<>
|
|
<EmpActivities employee={currentEmployee} />
|
|
</>
|
|
);
|
|
break;
|
|
}
|
|
|
|
default:
|
|
return (
|
|
<>
|
|
<ComingSoonPage />
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
if(isError) return <div >{error.message}</div>
|
|
return (
|
|
<>
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Employees", link: "/employees" },
|
|
{ label: "Profile", link: null },
|
|
]}
|
|
></Breadcrumb>
|
|
<div className="row">
|
|
<div className="col-12 ">
|
|
<EmpBanner
|
|
profile={currentEmployee}
|
|
loggedInUser={profile}
|
|
></EmpBanner>
|
|
</div>
|
|
</div>{" "}
|
|
<div className="row">
|
|
<div className="col-12 ">
|
|
<EmployeeNav
|
|
onPillClick={handlePillClick}
|
|
activePill={activePill}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className=" ">{renderContent()}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EmployeeProfile; |