From a480c3b111403e39202e065d9ee66374877570ae Mon Sep 17 00:00:00 2001
From: Umesh Desai <umesh@marcoaiot.com>
Date: Tue, 10 Jun 2025 12:39:34 +0530
Subject: [PATCH] Adding Change Password button on Employee Profile Page.

---
 src/pages/employee/EmployeeProfile.jsx | 325 +++++++++++++------------
 1 file changed, 167 insertions(+), 158 deletions(-)

diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index 4de20675..a4ad6aba 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -17,6 +17,8 @@ import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
+import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+
 const EmployeeProfile = () => {
   const projectID = useSelector((store) => store.localVariables.projectId);
   const { employeeId } = useParams();
@@ -27,17 +29,17 @@ const EmployeeProfile = () => {
   const tab = SearchParams.get("for");
   const [activePill, setActivePill] = useState(tab);
   const [currentEmployee, setCurrentEmployee] = useState();
-    const [showModal, setShowModal] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
 
-   const closeModal = () => {
-      setShowModal(false);
-      fetchEmployeeProfile(employeeId);
-    };
-    const handleShow = () => setShowModal(true);
+  const closeModal = () => {
+    setShowModal(false);
+    fetchEmployeeProfile(employeeId);
+  };
+  const handleShow = () => setShowModal(true);
 
   const fetchEmployeeProfile = async (employeeID) => {
     try {
@@ -95,177 +97,184 @@ const EmployeeProfile = () => {
   if (loading) {
     return <div>Loading...</div>;
   }
-
+const { openChangePassword } = useChangePassword();
   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>
+      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>)}
 
-    <div className="container-xxl flex-grow-1 container-p-y">
-      <Breadcrumb
-        data={[
-          { label: "Home", link: "/dashboard" },
-          { label: "Employees", link: "/employees" },
-          { label: "Profile", link: null },
-        ]}
-      ></Breadcrumb>
+      <div className="container-xxl flex-grow-1 container-p-y">
+        <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Employees", link: "/employees" },
+            { label: "Profile", link: null },
+          ]}
+        ></Breadcrumb>
 
-      <div className="row">
-        <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
-          <div className="row">
-            <div className="col-12 mb-4">
-              <div className="card">
-                <div className="card-body">
-                  <div className="d-flex flex-row flex-lg-column">
-                    <div className="d-flex flex-column justify-content-center align-items-center text-center">
-                      <Avatar
-                        firstName={`${currentEmployee?.firstName}`}
-                        lastName={`${currentEmployee?.lastName}`}
-                        size={"lg"}
-                      />
-                      <div className="py-2">
-                        <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
+        <div className="row">
+          <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
+            <div className="row">
+              <div className="col-12 mb-4">
+                <div className="card">
+                  <div className="card-body">
+                    <div className="d-flex flex-row flex-lg-column">
+                      <div className="d-flex flex-column justify-content-center align-items-center text-center">
+                        <Avatar
+                          firstName={`${currentEmployee?.firstName}`}
+                          lastName={`${currentEmployee?.lastName}`}
+                          size={"lg"}
+                        />
+                        <div className="py-2">
+                          <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
+                        </div>
                       </div>
-                    </div>
-                    <div className="w-100 d-flex flex-column justify-content-start">
-                      <div className="mt-3 w-100">
-                        <h6 className="mb-2 text-muted text-start">
-                          Employee Info
-                        </h6>
-                        <table className="table table-borderless mb-3">
-                          <tbody>
-                            <tr>
-                              <td className="fw-medium text-start">Email:</td>
-                              <td className="text-start">
-                                {currentEmployee?.email || <em>NA</em>}
-                              </td>
-                            </tr>
-                            <tr>
-                              <td className="fw-medium text-start">
-                                Phone Number:
-                              </td>
-                              <td className="text-start">
-                                {currentEmployee?.phoneNumber || <em>NA</em>}
-                              </td>
-                            </tr>
-                            <tr>
-                              <td className="fw-medium text-start">
-                                Emergency Contact Person:
-                              </td>
-                              <td className="text-start">
-                                {currentEmployee?.emergencyContactPerson || (
-                                  <em>NA</em>
-                                )}
-                              </td>
-                            </tr>
-                            <tr>
-                              <td className="fw-medium text-start">
-                                Emergency Contact Number:
-                              </td>
-                              <td className="text-start">
-                                {currentEmployee?.emergencyPhoneNumber || (
-                                  <em>NA</em>
-                                )}
-                              </td>
-                            </tr>
+                      <div className="w-100 d-flex flex-column justify-content-start">
+                        <div className="mt-3 w-100">
+                          <h6 className="mb-2 text-muted text-start">
+                            Employee Info
+                          </h6>
+                          <table className="table table-borderless mb-3">
+                            <tbody>
+                              <tr>
+                                <td className="fw-medium text-start">Email:</td>
+                                <td className="text-start">
+                                  {currentEmployee?.email || <em>NA</em>}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td className="fw-medium text-start">
+                                  Phone Number:
+                                </td>
+                                <td className="text-start">
+                                  {currentEmployee?.phoneNumber || <em>NA</em>}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td className="fw-medium text-start">
+                                  Emergency Contact Person:
+                                </td>
+                                <td className="text-start">
+                                  {currentEmployee?.emergencyContactPerson || (
+                                    <em>NA</em>
+                                  )}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td className="fw-medium text-start">
+                                  Emergency Contact Number:
+                                </td>
+                                <td className="text-start">
+                                  {currentEmployee?.emergencyPhoneNumber || (
+                                    <em>NA</em>
+                                  )}
+                                </td>
+                              </tr>
+
+                              <tr>
+                                <td className="fw-medium text-start">Gender:</td>
+                                <td className="text-start">
+                                  {currentEmployee?.gender || <em>NA</em>}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td className="fw-medium text-start">
+                                  Birth Date:
+                                </td>
+                                <td className="text-start">
+                                  {currentEmployee?.birthDate ? (
+                                    new Date(
+                                      currentEmployee.birthDate
+                                    ).toLocaleDateString()
+                                  ) : (
+                                    <em>NA</em>
+                                  )}
+                                </td>
+                              </tr>
+
+                              <tr>
+                                <td className="fw-medium text-start">
+                                  Joining Date:
+                                </td>
+                                <td className="text-start">
+                                  {currentEmployee?.joiningDate ? (
+                                    new Date(
+                                      currentEmployee.joiningDate
+                                    ).toLocaleDateString()
+                                  ) : (
+                                    <em>NA</em>
+                                  )}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td className="fw-medium text-start">
+                                  Job Role:
+                                </td>
+                                <td className="text-start">
+                                  {currentEmployee?.jobRole || <em>NA</em>}
+                                </td>
+                              </tr>
+                              <tr>
+                                <td className="fw-medium text-start">Address:</td>
+                                <td className="text-start">
+                                  {currentEmployee?.currentAddress || <em>NA</em>}
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <button
+                          className="btn btn-primary btn-block"
+                          onClick={() => handleShow()}
+                        >
+                          Edit Profile
+                        </button>
+
+                        <button
+                          className="btn btn-outline-primary btn-block mt-2"
+                          onClick={() => openChangePassword()}
+                        >
+                          Change Password
+                        </button>
 
-                            <tr>
-                              <td className="fw-medium text-start">Gender:</td>
-                              <td className="text-start">
-                                {currentEmployee?.gender || <em>NA</em>}
-                              </td>
-                            </tr>
-                            <tr>
-                              <td className="fw-medium text-start">
-                                Birth Date:
-                              </td>
-                              <td className="text-start">
-                                {currentEmployee?.birthDate ? (
-                                  new Date(
-                                    currentEmployee.birthDate
-                                  ).toLocaleDateString()
-                                ) : (
-                                  <em>NA</em>
-                                )}
-                              </td>
-                            </tr>
 
-                            <tr>
-                              <td className="fw-medium text-start">
-                                Joining Date:
-                              </td>
-                              <td className="text-start">
-                                {currentEmployee?.joiningDate ? (
-                                  new Date(
-                                    currentEmployee.joiningDate
-                                  ).toLocaleDateString()
-                                ) : (
-                                  <em>NA</em>
-                                )}
-                              </td>
-                            </tr>
-                            <tr>
-                              <td className="fw-medium text-start">
-                                Job Role:
-                              </td>
-                              <td className="text-start">
-                                {currentEmployee?.jobRole || <em>NA</em>}
-                              </td>
-                            </tr>
-                            <tr>
-                              <td className="fw-medium text-start">Address:</td>
-                              <td className="text-start">
-                                {currentEmployee?.currentAddress || <em>NA</em>}
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
                       </div>
-                      <button
-                        className="btn btn-primary btn-block"
-                        onClick={() =>
-                          handleShow()
-                        }
-                      >
-                        Edit Profile
-                      </button>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
-          <div className="row">
-            <EmployeeNav
-              onPillClick={handlePillClick}
-              activePill={activePill}
-            />
-          </div>
-          <div className="card">
-            <div className="row row-bordered g-0">{renderContent()}</div>
+          <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
+            <div className="row">
+              <EmployeeNav
+                onPillClick={handlePillClick}
+                activePill={activePill}
+              />
+            </div>
+            <div className="card">
+              <div className="row row-bordered g-0">{renderContent()}</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
     </>
 
   );