src/components/Dashboard/Dashboard.jsx

@@ -200,7 +200,6 @@ const Dashboard = () => {
 
                 <div className="btn-group">
                   <button
-                    type="button"
                     className="btn btn-outline-primary btn-sm dropdown-toggle"
                     type="button"
                     data-bs-toggle="dropdown"

src/components/Employee/EmployeeNav.jsx

@@ -7,19 +7,19 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         <ul className="nav nav-pills flex-column flex-sm-row mb-6">
           <li className="nav-item">
             <a
-              className={`nav-link ${activePill === "account" ? "active" : ""}`}
+              className={`nav-link py-1 px-2 small  ${activePill === "account" ? "active" : ""}`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload
                 onPillClick("account");
               }}
             >
-              <i className="bx bx-user bx-sm me-1_5"></i> Account
+              <i className="bx bx-user bx-sm me-1_5"></i> Documents
             </a>
           </li>
           <li className="nav-item">
             <a
-              className={`nav-link ${activePill === "attendance" ? "active" : ""}`}
+              className={`nav-link py-1 px-2 small ${activePill === "attendance" ? "active" : ""}`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload
@@ -31,7 +31,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
           </li>
           <li className="nav-item">
             <a
-              className={`nav-link ${activePill === "activities" ? "active" : ""}`}
+              className={`nav-link py-1 px-2 small ${activePill === "activities" ? "active" : ""}`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload

src/components/Layout/Header.jsx

@@ -6,9 +6,8 @@ import {changeMaster} from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import {useProfile} from "../../hooks/useProfile";
 import {useNavigate} from "react-router-dom";
-
+import Avatar from "../../components/common/Avatar";
-const Header = () =>
+const Header = () =>{
-{
   const {profile} = useProfile()
   const dispatch = useDispatch( changeMaster( "Job Role" ) )
   const {data, loading} = useMaster()
@@ -88,11 +87,9 @@ const Header = () =>
               data-bs-toggle="dropdown"
             >
               <div className="avatar avatar-online">
-                <img
+                <Avatar
-                  src="../assets/img/avatars/00.jpg"
+                  firstName={`${profile?.employeeInfo?.firstName}`}
-                  className="w-px-40 h-auto rounded-circle"
+                  lastName={`${profile?.employeeInfo?.lastName}`}
-                  alt="avatar-image"
-                  aria-label="Avatar Image"
                 />
               </div>
             </a>
@@ -106,11 +103,9 @@ const Header = () =>
                   <div className="d-flex">
                     <div className="flex-shrink-0 me-3">
                       <div className="avatar avatar-online">
-                        <img
+                        <Avatar
-                          src="../assets/img/avatars/00.jpg"
+                          firstName={`${profile?.employeeInfo?.firstName}`}
-                          className="w-px-40 h-auto rounded-circle"
+                          lastName={`${profile?.employeeInfo?.lastName}`}
-                          alt="avatar-image"
-                          aria-label="Avatar Image"
                         />
                       </div>
                     </div>

src/components/common/Avatar.jsx

@@ -1,6 +1,22 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+
+// A simple hash function to generate a deterministic value from the name
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+  }
+  return hash;
+}
 
 const Avatar = ({ firstName, lastName, size='sm' }) => {
+  // Combine firstName and lastName to create a unique string for hashing
+  const fullName = `${firstName} ${lastName}`;
+
+  const [bgClass, setBgClass] = useState("");
+
+  // Function to generate the avatar text
   function generateAvatarText(firstName, lastName) {
     if (!firstName) return "";
     if (!lastName || lastName.trim() === "") {
@@ -9,7 +25,8 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
     return `${firstName[0]}${lastName[0]}`.toUpperCase();
   }
 
-  function getRandomBootstrapBgClass() {
+  // Function to map the hash value to a Bootstrap background class
+  function getBgClassFromHash(hash) {
     const bgClasses = [
       "bg-primary",
       "bg-secondary",
@@ -21,21 +38,27 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
       "text-light",
     ];
 
-    const randomIndex = Math.floor(Math.random() * bgClasses.length);
+    // Use the hash value to pick a background color from the array
-    return bgClasses[randomIndex];
+    const index = Math.abs(hash % bgClasses.length);
+    return bgClasses[index];
   }
+
+  useEffect(() => {
+    // Generate the hash from the full name and map it to a background class
+    const hash = hashString(fullName);
+    setBgClass(getBgClassFromHash(hash));
+  }, [fullName]); // Re-run if the fullName changes
+
   return (
-    <>
     <div className="avatar-wrapper p-1">
       <div className={`avatar avatar-${size} me-2`}>
         <span
-            className={`avatar-initial rounded-circle ${getRandomBootstrapBgClass()}`}
+          className={`avatar-initial rounded-circle ${bgClass}`}
         >
           {generateAvatarText(firstName, lastName)}
         </span>
       </div>
     </div>
-    </>
   );
 };
 

src/pages/employee/EmployeeProfile.jsx

@@ -9,7 +9,8 @@ import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../h
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
-
+import { useNavigate } from "react-router-dom";
+import Avatar from "../../components/common/Avatar";
 const EmployeeProfile = () => {
  
   const projectID = useSelector((store)=>store.localVariables.projectId)
@@ -50,7 +51,7 @@ const EmployeeProfile = () => {
     }
   }, [employeeId]);
 
-
+  const navigate = useNavigate();
   const renderContent = () => {
     if (loading) return <div>Loading</div>;
     switch (activePill) {
@@ -110,62 +111,69 @@ const EmployeeProfile = () => {
                 <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">
-                    <img
+                      <Avatar
-                      src={`../../../public/img/avatars/${currentEmployee.gender}.jpg`}
+                        firstName={`${currentEmployee?.firstName}`}
-                      alt="user-avatar"
+                        lastName={`${currentEmployee?.lastName}`}
-                      className="d-block rounded"
+                        size={"lg"}
-                      height="100"
-                      width="100"
-                      aria-label="Account image"
-                      id="uploadedAvatar"
                       />
                       <div className="py-2">
                         <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
                       </div>
-                    <hr className="my-2" />
                     </div>
-                  <div className="w-100 d-flex flex-row flex-sm-column justify-content-sm-start justify-content-around">
+                    <div className="w-100 d-flex flex-column justify-content-start">
-                    <div className="text-wrap">
+                      <div className="mt-3 w-100">
-                      <small className="card-text text-uppercase text-muted small">Contacts</small>
+                        <h6 className="mb-2 text-muted text-start">Employee Info</h6>
-                      <ul className="list-unstyled my-3 py-1">
+                        <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>
 
-                        <li className="d-flex align-items-center mb-4">
+                            <tr>
-                          <i className="bx bx-phone"></i>
+                              <td className="fw-medium text-start">Gender:</td>
-                          <span className="fw-medium mx-2">Contact Number:</span>
+                              <td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
-                          <span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}>
+                            </tr>
-                            {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
+                            <tr>
-                          </span>
+                              <td className="fw-medium text-start">Birth Date:</td>
-                        </li>
+                              <td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td>
-                        <li className="d-flex align-items-center mb-4 text-start">
+                            </tr>
-                          <i className="bx bx-envelope"></i>
-                          <span className="fw-medium mx-2">Email:</span>
-                          <span className={`text-break text-wrap ${currentEmployee?.email ? "" : "text-muted"}`}>
-                            {currentEmployee?.email || <em className="muted">NA</em>}
-                          </span>
-                          </li>
-                          <li className="d-flex align-items-center mb-4">
-                          <i className="bx bx-user"></i>
-                          <span className="fw-medium mx-2">Contact Person:</span>
-                          <span className="">
-                            {currentEmployee?.emergencyContactPerson}
-                          </span>
-                        </li>
-                        <li className="d-flex align-items-center  text-wrap ">
-                        <i className="bx bx-flag"></i>
-                         <span className="fw-medium mx-2">Address:</span>
 
-                        </li>
-                        <li className="d-flex align-items-start test-start mb-2">
-                          <span className={`${currentEmployee?.permanentAddress ? "" : "ms-4"}`}>
-                          {currentEmployee?.permanentAddress}
-                          </span>
-                        </li>
 
-                      </ul>
+                            <tr>
-                    </div>
+                              <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={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
+                        Edit Profile
+                      </button>
                     </div>
                   </div>
                 </div>
+
               </div>
             </div>
           </div>