Added a popup to allow editing of employee information directly in the Employee Profile.

src/components/Employee/ManageEmployee.jsx

@@ -10,7 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
 import { useEmployeeProfile } from "../../hooks/useEmployees";
-import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
+import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
@@ -166,6 +166,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     }
     EmployeeRepository.manageEmployee(data)
       .then((response) => {
+        cacheData("employeeProfileInfo", data);
         showToast(
           `Employee details ${
             data.id == null ? "created" : "updated"
@@ -176,6 +177,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
         clearCacheKey("allEmployeeList");
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
+        
 
         setLoading(false);
         reset();

src/pages/employee/EmployeeProfile.jsx

@@ -16,6 +16,7 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
+import ManageEmployee from "../../components/Employee/ManageEmployee";
 const EmployeeProfile = () => {
   const projectID = useSelector((store) => store.localVariables.projectId);
   const { employeeId } = useParams();
@@ -26,11 +27,18 @@ const EmployeeProfile = () => {
   const tab = SearchParams.get("for");
   const [activePill, setActivePill] = useState(tab);
   const [currentEmployee, setCurrentEmployee] = useState();
+    const [showModal, setShowModal] = useState(false);
 
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
 
+   const closeModal = () => {
+      setShowModal(false);
+      fetchEmployeeProfile(employeeId);
+    };
+    const handleShow = () => setShowModal(true);
+
   const fetchEmployeeProfile = async (employeeID) => {
     try {
       const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
@@ -89,6 +97,26 @@ const EmployeeProfile = () => {
   }
 
   return (
+    <>    {showModal && (<div
+        className={`modal fade ${showModal ? "show" : ""} `}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: showModal ? "block" : "none" }}
+        aria-hidden={!showModal}
+      >
+        <div className="modal-dialog modal-xl modal-dialog-centered ">
+          <div
+            className="modal-content overflow-y-auto overflow-x-hidden"
+            style={{ maxHeight: "90vh" }}
+          >
+            <ManageEmployee
+              employeeId={employeeId}
+              onClosed={closeModal}
+            />
+          </div>
+        </div>
+      </div>)}
+
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
         data={[
@@ -212,7 +240,7 @@ const EmployeeProfile = () => {
                       <button
                         className="btn btn-primary btn-block"
                         onClick={() =>
-                          navigate(`/employee/manage/${currentEmployee?.id}`)
+                          handleShow()
                         }
                       >
                         Edit Profile
@@ -238,6 +266,8 @@ const EmployeeProfile = () => {
         </div>
       </div>
     </div>
+    </>
+
   );
 };