88 lines
3.9 KiB
JavaScript
88 lines
3.9 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useOrganizationHierarchy } from "../../hooks/useEmployees";
|
|
import GlobalModel from "../common/GlobalModel";
|
|
import ManageReporting from "./ManageReporting";
|
|
import Avatar from "../common/Avatar";
|
|
import { SpinnerLoader } from "../common/Loader";
|
|
|
|
const EmpReportingManager = ({ employeeId, employee }) => {
|
|
const { data, isLoading } = useOrganizationHierarchy(employeeId);
|
|
const [showManageReportingModal, setShowManageReportingModal] = useState(false);
|
|
|
|
if (isLoading)
|
|
return (
|
|
<div className="d-flex justify-content-center py-5">
|
|
<SpinnerLoader />
|
|
</div>
|
|
);
|
|
|
|
// Safe access to primary and secondary managers
|
|
const primaryManager = data?.find((d) => d.isPrimary)?.reportTo;
|
|
const secondaryManagers = data?.filter((d) => !d.isPrimary).map((d) => d.reportTo) || [];
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-12 mb-4">
|
|
<div className="card">
|
|
<div className="card-body">
|
|
<small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
|
|
Reporting Manager
|
|
</small>
|
|
|
|
<div className="text-start">
|
|
{/* Primary Manager */}
|
|
<div className="row mb-2 align-items-start">
|
|
<div className="col-auto text-end pe-3"><i className="bx bx-user-circle me-1"></i>Primary Manager<span style={{ marginLeft: "50px" }}>:</span></div>
|
|
<div className="col text-wrap">
|
|
{primaryManager
|
|
? `${primaryManager.firstName || ""} ${primaryManager.lastName || ""}`
|
|
: "NA"}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Secondary Managers */}
|
|
{secondaryManagers?.length > 0 && (
|
|
<div className="row mb-3 align-items-start">
|
|
<div className="col-auto text-end pe-3"><i className="bx bx-group me-1"></i>Secondary Managers<span style={{ marginLeft: "25px" }}>:</span></div>
|
|
<div className="col text-wrap">
|
|
{secondaryManagers
|
|
.map((m) => `${m.firstName || ""} ${m.lastName || ""}`)
|
|
.join(", ")}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Manage Reporting Button */}
|
|
<div className="mt-5 text-end" >
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
onClick={() => setShowManageReportingModal(true)}
|
|
>
|
|
<i className="bx bx-network-chart me-1"></i> Manage Reporting
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manage Reporting Modal */}
|
|
{showManageReportingModal && (
|
|
<GlobalModel
|
|
isOpen={showManageReportingModal}
|
|
closeModal={() => setShowManageReportingModal(false)}
|
|
>
|
|
<ManageReporting
|
|
employee={employee}
|
|
employeeId={employeeId}
|
|
onClosed={() => setShowManageReportingModal(false)}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmpReportingManager;
|
|
|