60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
import { VIEW_DOCUMENT } from "../../utils/constants";
|
|
import { useProfile } from "../../hooks/useProfile";
|
|
import { useParams } from "react-router-dom";
|
|
const EmployeeNav = ({ onPillClick, activePill }) => {
|
|
const { employeeId } = useParams();
|
|
const [isAbleToViewDocuments, setIsAbleToViewDocuments] = useState(false);
|
|
|
|
const canViewDocuments = useHasUserPermission(VIEW_DOCUMENT);
|
|
const { profile } = useProfile();
|
|
|
|
useEffect(() => {
|
|
if (profile?.employeeInfo?.id) {
|
|
setIsAbleToViewDocuments(profile.employeeInfo.id === employeeId);
|
|
}
|
|
}, [profile?.employeeInfo?.id, employeeId]);
|
|
|
|
const tabs = [
|
|
{ key: "profile", icon: "bx bx-user", label: "Profile" },
|
|
{ key: "attendance", icon: "bx bx-group", label: "Attendances" },
|
|
(isAbleToViewDocuments || canViewDocuments) && {
|
|
key: "documents",
|
|
icon: "bx bx-file",
|
|
label: "Documents",
|
|
},
|
|
// { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
|
|
].filter(Boolean);
|
|
return (
|
|
<div className="col-md-12">
|
|
<div className="nav-align-top">
|
|
<ul className="nav nav-tabs overflow-auto" id="horizontal-example">
|
|
{tabs.map(({ key, icon, label }) => (
|
|
<li
|
|
key={key}
|
|
className="nav-item"
|
|
style={{ padding: "10px 10px 0 10px" }}
|
|
>
|
|
<a
|
|
href="#"
|
|
className={`nav-link py-1 px-2 small ${
|
|
activePill === key ? "active" : ""
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
onPillClick(key);
|
|
}}
|
|
>
|
|
<i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmployeeNav;
|