137 lines
3.6 KiB
JavaScript
137 lines
3.6 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useSearchParams, useParams, useNavigate } from "react-router-dom";
|
|
import { useDispatch, 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";
|
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
|
|
const EmployeeProfile = () => {
|
|
const { profile } = useProfile();
|
|
|
|
const projectID = useSelector((store) => store.localVariables.projectId);
|
|
|
|
const { employeeId } = useParams();
|
|
const dispatch = useDispatch();
|
|
|
|
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);
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(setProjectId(null));
|
|
}, [projectID]);
|
|
|
|
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;
|