Adding Navigate functionality in ManageReporting.

src/components/Employee/ManageReporting.jsx

@@ -5,6 +5,8 @@ import Label from "../common/Label";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
 import { useManageEmployeeHierarchy, useOrganizationHierarchy } from "../../hooks/useEmployees";
 import { ManageReportingSchema, defaultManageReporting } from "./EmployeeSchema";
+import Avatar from "../common/Avatar";
+import { useNavigate } from "react-router-dom";
 
 const ManageReporting = ({ onClosed, employee, employeeId }) => {
   const {
@@ -17,6 +19,7 @@ const ManageReporting = ({ onClosed, employee, employeeId }) => {
     resolver: zodResolver(ManageReportingSchema),
     defaultValues: defaultManageReporting,
   });
+  const navigate = useNavigate();
 
   const { data, isLoading } = useOrganizationHierarchy(employeeId);
 
@@ -25,7 +28,6 @@ const ManageReporting = ({ onClosed, employee, employeeId }) => {
     employeeId,
     onClosed
   );
-
   const primaryValue = watch("primaryNotifyTo");
   const secondaryValue = watch("secondaryNotifyTo");
 
@@ -88,16 +90,48 @@ const ManageReporting = ({ onClosed, employee, employeeId }) => {
     manageHierarchy(payload);
   };
 
+  const handleClick = () => {
+    handleClose();
+    navigate(`/employee/${employee.id}`);
+  };
+
+
   return (
     <div>
       <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
-        <h5 className="m-0 py-1 mb-3">
-          Update Reporting Manager (
-          {`${employee.firstName || ""} ${employee.middleName || ""} ${employee.lastName || ""}`.trim()}
-          )
-        </h5>
+        <h5 className="m-0 py-1 mb-4">Reporting Manager</h5>
 
-        {/* Primary */}
+        {/* Employee Info */}
+        <div className="d-flex align-items-center justify-content-start mb-4 ps-0">
+          <div className="me-1 mb-1">
+            <Avatar size="sm" firstName={employee.firstName} lastName={employee.lastName} />
+          </div>
+
+          {/* Employee Name + Role */}
+          <div className="d-flex flex-column">
+            <div className="d-flex align-items-center gap-2">
+              <span className="fw-semibold text-dark fs-6 me-1">
+                {`${employee.firstName || ""} ${employee.middleName || ""} ${employee.lastName || ""}`.trim() || "Employee Name NA"}
+              </span>
+
+              {/* External Link Icon (Navigate to Employee Profile) */}
+              <i
+                className="bx bx-link-external text-primary"
+                style={{ fontSize: "1rem", cursor: "pointer" }}
+                title="View Profile"
+                onClick={handleClick}
+              ></i>
+            </div>
+
+            <div className="text-start">
+              {employee.jobRole && (
+                <small className="text-muted">{employee.jobRole}</small>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Primary Reporting Manager */}
         <div className="mb-4 text-start">
           <Label className="form-label" required>
             Primary Reporting Manager
@@ -105,7 +139,7 @@ const ManageReporting = ({ onClosed, employee, employeeId }) => {
           <PmsEmployeeInputTag
             control={control}
             name="primaryNotifyTo"
-            placeholder={primaryValue?.length > 0 ? "" : "Select primary report-to"}
+            placeholder={primaryValue?.length > 0 ? "" : "Search and select primary manager"}
             forAll={true}
             disabled={primaryValue?.length > 0}
           />
@@ -116,21 +150,18 @@ const ManageReporting = ({ onClosed, employee, employeeId }) => {
           )}
         </div>
 
-
-        {/* Secondary */}
+        {/* Secondary Reporting Manager */}
         <div className="mb-4 text-start">
-          <Label className="form-label">
-            Secondary Reporting Manager
-          </Label>
+          <Label className="form-label">Secondary Reporting Manager</Label>
           <PmsEmployeeInputTag
             control={control}
             name="secondaryNotifyTo"
-            placeholder="Select secondary report-to(s)"
+            placeholder="Search and add secondary managers"
             forAll={true}
           />
         </div>
 
-
+        {/* Buttons */}
         <div className="d-flex justify-content-end gap-3 mt-3 mb-3">
           <button
             type="button"