Adding Card in Profile related to Reporting Manger.

src/components/Employee/EmpDashboard.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import EmpOverview from "./EmpOverview";
 import { useProjectsAllocationByEmployee } from "../../hooks/useProjects";
+import EmpReportingManager from "./EmpReportingManager";
 
 const EmpDashboard = ({ profile }) => {
   const {
@@ -16,6 +17,7 @@ const EmpDashboard = ({ profile }) => {
           {" "}
           <EmpOverview profile={profile}></EmpOverview>
         </div>
+        
         <div className="col col-sm-6 pt-5">
           <div className="card ">
             <div className="card-body">
@@ -80,6 +82,10 @@ const EmpDashboard = ({ profile }) => {
             </div>
           </div>
         </div>
+        <div className="col-12 col-sm-6 pt-5">
+          {" "}
+          <EmpReportingManager employeeId={profile?.id}></EmpReportingManager>
+        </div>
       </div>
     </>
   );

src/components/Employee/EmpReportingManager.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { useOrganizationHierarchy } from "../../hooks/useEmployees";
+import GlobalModel from "../common/GlobalModel";
+import ManageReporting from "./ManageReporting";
+
+const EmpReportingManager = ({ employeeId }) => {
+    const { data, isLoading } = useOrganizationHierarchy(employeeId);
+    const [showManageReportingModal, setShowManageReportingModal] = useState(false);
+
+    if (isLoading) return <span>Loading...</span>;
+
+    const primary = data?.find((item) => item.isPrimary);
+    const secondary = data?.filter((item) => !item.isPrimary);
+
+    // Create comma-separated string for secondary managers
+    const secondaryNames = secondary
+        ?.map((item) => `${item.reportTo?.firstName || ""} ${item.reportTo?.lastName || ""}`.trim())
+        .join(", ");
+
+    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>
+
+                        {/* Primary Reporting Manager */}
+                        <div className="d-flex align-items-start mb-3">
+                            <span className="d-flex">
+                                <i className="bx bx-user bx-xs me-2 mt-1"></i>
+                                <span>Primary Reporting Manager</span>
+                            </span>
+                            <span style={{ marginLeft: "10px" }}>:</span>
+                            <span className="ms-5">
+                                {primary?.reportTo?.firstName || <em>NA</em>}{" "}
+                                {primary?.reportTo?.lastName || ""}
+                            </span>
+                        </div>
+
+                        {/* Secondary Reporting Manager (comma-separated) */}
+                        {secondary?.length > 0 && (
+                            <div className="d-flex align-items-start mb-3" style={{ textAlign: "left" }}>
+                                <span className="d-flex">
+                                    <i className="bx bx-user bx-xs me-2 mt-1"></i>
+                                    <span>Secondary Reporting Manager</span>
+                                </span>
+                                <span style={{ marginLeft: "57px" }}>:</span>
+                                <span className="ms-5" >
+                                    {secondaryNames || <em>NA</em>}
+                                </span>
+                            </div>
+                        )}
+
+                        {/* Open Modal Button */}
+                        <div className="mt-3 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>
+
+            {/* ManageReporting Modal */}
+            {showManageReportingModal && (
+                <GlobalModel
+                    isOpen={showManageReportingModal}
+                    closeModal={() => setShowManageReportingModal(false)}
+                >
+                    <ManageReporting
+                        employeeId={employeeId}
+                        onClosed={() => setShowManageReportingModal(false)}
+                    />
+                </GlobalModel>
+            )}
+        </div>
+    );
+};
+
+export default EmpReportingManager;