src/pages/employee/EmployeeProfile.jsx

@@ -20,6 +20,7 @@ import Avatar from "../../components/common/Avatar";
 import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
 import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+import GlobalModel from "../../components/common/GlobalModel";
 
 const EmployeeProfile = () => {
   const { profile } = useProfile();
@@ -39,11 +40,7 @@ const EmployeeProfile = () => {
     setActivePill(pillKey);
   };
 
-  const closeModal = () => {
+
-    setShowModal(false);
-    fetchEmployeeProfile(employeeId);
-  };
-  const handleShow = () => setShowModal(true);
 
   const fetchEmployeeProfile = async (employeeID) => {
     try {
@@ -104,24 +101,10 @@ const EmployeeProfile = () => {
   const { openChangePassword } = useChangePassword();
   return (
     <>
-      {" "}
       {showModal && (
-        <div
+        <GlobalModel size="lg" isOpen={showModal} closeModal={()=>setShowModal(false)}>
-          className={`modal fade ${showModal ? "show" : ""} `}
+              <ManageEmployee  employeeId={employeeId} onClosed={()=>setShowModal(false)} />
-          tabIndex="-1"
+        </GlobalModel>
-          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-fluid">
         <Breadcrumb
@@ -251,7 +234,7 @@ const EmployeeProfile = () => {
                         </div>
                         <button
                           className="btn btn-primary btn-block"
-                          onClick={() => handleShow()}
+                          onClick={()=>setShowModal(true)}
                         >
                           Edit Profile
                         </button>