src/components/Activities/ReportTask.jsx

@@ -34,7 +34,6 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
         ...data,
         id: report?.id,
         reportedDate: new Date().toISOString(),
-        checkList:[]
       };
 
       let response = await TasksRepository.reportTsak(reportData);
@@ -117,17 +116,6 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
                 </label>
               </div>
             </div>
-            <div class="mb-1 row text-start">
-              <label for="html5-email-input" class="col-md-4 col-form-label">
-                Planned :
-              </label>
-              <div class="col-md-8 text-start text-wrap">
-                <label class=" col-form-label">
-                  {report?.plannedTask
-                  }
-                </label>
-              </div>
-            </div>
             <form onSubmit={handleSubmit(onSubmit)}>
               <div class="mb-1 row text-start">
                 <label for="html5-email-input" class="col-md-4 col-form-label">

src/components/Employee/EmployeeNav.jsx

@@ -4,7 +4,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
   return (
     <div className="col-md-12">
       <div className="nav-align-top">
-        <ul className="nav nav-tabs">
+        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
           <li className="nav-item">
             <a
               className={`nav-link py-1 px-2 small  ${activePill === "account" ? "active" : ""}`}

src/components/Employee/ManageEmployee.jsx

@@ -39,15 +39,21 @@ const ManageEmployee = () => {
     Email: z
       .string()
       .optional()
-      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
+      .refine(
+        (val) =>
+          !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
+        {
           message: "Invalid email format",
-      })
+        }
+      )
       .refine(
         (val) => {
           if (!val) return true;
           const [local, domain] = val.split("@");
           return (
-            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
+            val.length <= 320 &&
+            local?.length <= 64 &&
+            domain?.length <= 255
           );
         },
         {
@@ -86,10 +92,7 @@ const ManageEmployee = () => {
       .regex(mobileNumberRegex, { message: "Invalid phone number " }),
     EmergencyContactPerson: z
       .string()
-      .min(1, { message: "Emergency Contact Person is required" })
+      .min(1, { message: "Emergency Contact Person is required" }),
-      .regex(/^[A-Za-z\s]+$/, {
-        message: "Emergency Contact Person must contain only letters",
-      }),
     AadharNumber: z
       .string()
       .regex(/^\d{12}$/, "Aadhar card must be exactly 12 digits long")
@@ -441,9 +444,7 @@ const ManageEmployee = () => {
                     )}
                   </div>
                   <div className="col-sm-6">
-                    <div className="form-text text-start">
+                    <div className="form-text text-start">Permanent Address</div>
-                      Permanent Address
-                    </div>
 
                     <textarea
                       id="PermanentAddress"

src/components/Employee/ManageRole.jsx

@@ -1,28 +1,28 @@
-import React, { useEffect, useState } from "react";
+import React,{useEffect, useState} from 'react'
-import useMaster from "../../hooks/masterHook/useMaster";
+import useMaster from '../../hooks/masterHook/useMaster'
-import { useForm } from "react-hook-form";
+import { useForm } from 'react-hook-form';
-import { z } from "zod";
+import { z } from 'zod';
-import { zodResolver } from "@hookform/resolvers/zod";
+import { zodResolver } from '@hookform/resolvers/zod';
-import { RolesRepository } from "../../repositories/MastersRepository";
+import { RolesRepository } from '../../repositories/MastersRepository';
-import { useEmployeeRoles } from "../../hooks/useEmployees";
+import { useEmployeeRoles } from '../../hooks/useEmployees';
-import { useDispatch } from "react-redux";
+import {useDispatch} from 'react-redux';
-import { changeMaster } from "../../slices/localVariablesSlice";
+import {changeMaster} from '../../slices/localVariablesSlice';
-import showToast from "../../services/toastService";
+import showToast from '../../services/toastService';
+
 
 const formSchema = z.object({
-  selectedRole: z.record(z.boolean()).refine(
+  selectedRole: z.record(z.boolean()).refine((data) => {
-    (data) => {
+    return Object.values(data).some(value => value === true); 
-      return Object.values(data).some((value) => value === true);
+  }, {
-    },
-    {
     message: "At least one checkbox must be selected.",
-    }
+  }),
-  ),
 });
 
+
 const ManageRole = ({employeeId,onClosed}) => {
-  const disptach = useDispatch();
+ 
-  disptach(changeMaster("Application Role"));
+    const disptach = useDispatch()
+    disptach(changeMaster("Role"))
     const [isLoading, setIsLoading] = useState(false);
     const { employeeRoles,loading } = useEmployeeRoles(employeeId);
     const {data,loading:roleLoading} = useMaster();
@@ -30,9 +30,7 @@ const ManageRole = ({ employeeId, onClosed }) => {
     const buildDefaultRoles = () => {
       const defaults = {};
       data.forEach((role) => {
-      const isRoleEnabled = employeeRoles?.data?.some(
+        const isRoleEnabled = employeeRoles?.data?.some((empRole) => empRole.roleId === role.id);
-        (empRole) => empRole.roleId === role.id
-      );
         defaults[role.id] = isRoleEnabled;
       });
   
@@ -48,19 +46,16 @@ const ManageRole = ({ employeeId, onClosed }) => {
       }
     }, [employeeRoles, data]);
   
-  const {
+    const { register, handleSubmit, formState: { errors }, reset } = useForm({
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm({
       resolver: zodResolver(formSchema),
       defaultValues: {
         selectedRole: initialRoles, 
       },
     });
   
-  useEffect(() => {
+    
+  useEffect( () =>
+  {
       if (Object.keys(initialRoles).length > 0) {
         reset({
           selectedRole: initialRoles, 
@@ -69,7 +64,7 @@ const ManageRole = ({ employeeId, onClosed }) => {
     }, [initialRoles, reset]);
   
     const onSubmit = (formdata) => {
-    setIsLoading(true);
+        setIsLoading(true)
       const result = [];
       for (const [roleId, isEnabled] of Object.entries(formdata.selectedRole)) {
         if (isEnabled) {
@@ -80,29 +75,23 @@ const ManageRole = ({ employeeId, onClosed }) => {
           });
         }
       }
-    RolesRepository.createEmployeeRoles(result)
+      RolesRepository.createEmployeeRoles( result ).then( ( resp ) =>
-      .then((resp) => {
+      {   
-        showToast("Role assigned successfully", "success");
+        showToast( "Role assigned successfully", "success" )
-        setIsLoading(false);
+        setIsLoading(false)
-        onClosed();
+        onClosed()
-      })
+      }).catch((err)=>{
-      .catch((err) => {
+        console.log( err )
-        console.log(err);
+        setIsLoading(false)
-        setIsLoading(false);
 
-        showToast(err.message, "error");
+        showToast(err.message,"error")
-      });
+      })
-    setIsLoading(false);
+      setIsLoading(false)
   };
-  console.log(data)
   
   return (
-    <div
+
-      className={`modal fade `}
+    <div className={`modal fade `} id="managerole-modal" tabIndex="-1" aria-hidden="true" >
-      id="managerole-modal"
-      tabIndex="-1"
-      aria-hidden="true"
-    >
     <div className="modal-dialog  modal-simple modal-md d-flex align-items-center justify-content-center" >
     <div className="modal-content " >
       <div className="modal-body"  >
@@ -111,19 +100,20 @@ const ManageRole = ({ employeeId, onClosed }) => {
           className="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          
         ></button>    
        <form onSubmit={handleSubmit(onSubmit)} >
-              <div className="text-start my-0">
+                <div className='text-start my-0'>
-                <p className="lead">Select Roles</p>
+                <p className='lead'>Select Roles</p>
        </div>
       
-              <div
+
-                className="d-flex flex-wrap justify-content-between align-items-center pb-5 "
+              <div className='d-flex flex-wrap justify-content-between align-items-center pb-5 ' style={{maxHeight: "70vh", overflowY: "scroll"}} >
-                style={{ maxHeight: "70vh", overflowY: "scroll" }}
+                
-              >
                 {(loading || roleLoading)  && <p>Loading...</p>}
-                {data &&
+        {data && data.map((item) => (
-                  data.map((item) => (
+        
+            
             <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
               <div className="form-check ms-2 text-start">
                 <input
@@ -131,30 +121,28 @@ const ManageRole = ({ employeeId, onClosed }) => {
                   type="checkbox"
                   id={item.id}
                   {...register(`selectedRole.${item.id}`, { 
-                            value: initialRoles[item.id] || false,
+                    value: initialRoles[item.id] || false 
                   })}
+              
                 />
-                        <label
+                <label className="form-check-label text-bold" htmlFor={item.id}><small>{item.role || "--"}</small></label>
-                          className="form-check-label text-bold"
-                          htmlFor={item.id}
-                        >
-                          <small>{item.role || "--"}</small>
-                        </label>
               </div>
             </div>
+            
+          
         ))}
+
     </div>
-              {errors.selected && (
+        {errors.selected && <div className="text-center">{errors.selected.message}</div>}
-                <div className="text-center">{errors.selected.message}</div>
+         
-              )}
         
         <div className="col-12 text-center">
-                <button type="submit" className="btn btn-sm btn-primary me-3">
+        <button type="submit" className="btn btn-primary me-3">           
          { isLoading ? "Please Wait":"Submit"}       
         </button>
          <button
           type="reset"
-                  className="btn btn-sm btn-label-secondary"
+          className="btn btn-label-secondary"
           data-bs-dismiss="modal"
           aria-label="Close"
          >
@@ -166,7 +154,9 @@ const ManageRole = ({ employeeId, onClosed }) => {
     </div>
   </div>
   </div>
-  );
+  )
-};
+}
 
 export default ManageRole;
+
+

src/components/Layout/Header.jsx

@@ -6,8 +6,9 @@ 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()
@@ -87,9 +88,11 @@ const Header = () =>{
               data-bs-toggle="dropdown"
             >
               <div className="avatar avatar-online">
-                <Avatar
+                <img
-                  firstName={`${profile?.employeeInfo?.firstName}`}
+                  src="../assets/img/avatars/00.jpg"
-                  lastName={`${profile?.employeeInfo?.lastName}`}
+                  className="w-px-40 h-auto rounded-circle"
+                  alt="avatar-image"
+                  aria-label="Avatar Image"
                 />
               </div>
             </a>
@@ -103,9 +106,11 @@ const Header = () =>{
                   <div className="d-flex">
                     <div className="flex-shrink-0 me-3">
                       <div className="avatar avatar-online">
-                        <Avatar
+                        <img
-                          firstName={`${profile?.employeeInfo?.firstName}`}
+                          src="../assets/img/avatars/00.jpg"
-                          lastName={`${profile?.employeeInfo?.lastName}`}
+                          className="w-px-40 h-auto rounded-circle"
+                          alt="avatar-image"
+                          aria-label="Avatar Image"
                         />
                       </div>
                     </div>

src/components/common/Avatar.jsx

@@ -1,22 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React 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() === "") {
@@ -25,8 +9,7 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
     return `${firstName[0]}${lastName[0]}`.toUpperCase();
   }
 
-  // Function to map the hash value to a Bootstrap background class
+  function getRandomBootstrapBgClass() {
-  function getBgClassFromHash(hash) {
     const bgClasses = [
       "bg-primary",
       "bg-secondary",
@@ -38,27 +21,21 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
       "text-light",
     ];
 
-    // Use the hash value to pick a background color from the array
+    const randomIndex = Math.floor(Math.random() * bgClasses.length);
-    const index = Math.abs(hash % bgClasses.length);
+    return bgClasses[randomIndex];
-    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 ${bgClass}`}
+            className={`avatar-initial rounded-circle ${getRandomBootstrapBgClass()}`}
           >
             {generateAvatarText(firstName, lastName)}
           </span>
         </div>
       </div>
+    </>
   );
 };
 

src/pages/employee/EmployeeProfile.jsx

@@ -9,8 +9,7 @@ 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)
@@ -51,7 +50,7 @@ const EmployeeProfile = () => {
     }
   }, [employeeId]);
 
-  const navigate = useNavigate();
+
   const renderContent = () => {
     if (loading) return <div>Loading</div>;
     switch (activePill) {
@@ -111,69 +110,62 @@ 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">
-                      <Avatar
+                    <img
-                        firstName={`${currentEmployee?.firstName}`}
+                      src={`../../../public/img/avatars/${currentEmployee.gender}.jpg`}
-                        lastName={`${currentEmployee?.lastName}`}
+                      alt="user-avatar"
-                        size={"lg"}
+                      className="d-block rounded"
+                      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-column justify-content-start">
+                  <div className="w-100 d-flex flex-row flex-sm-column justify-content-sm-start justify-content-around">
-                      <div className="mt-3 w-100">
+                    <div className="text-wrap">
-                        <h6 className="mb-2 text-muted text-start">Employee Info</h6>
+                      <small className="card-text text-uppercase text-muted small">Contacts</small>
-                        <table className="table table-borderless mb-3">
+                      <ul className="list-unstyled my-3 py-1">
-                          <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>
+                        <li className="d-flex align-items-center mb-4">
-                              <td className="fw-medium text-start">Gender:</td>
+                          <i className="bx bx-phone"></i>
-                              <td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
+                          <span className="fw-medium mx-2">Contact Number:</span>
-                            </tr>
+                          <span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}>
-                            <tr>
+                            {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
-                              <td className="fw-medium text-start">Birth Date:</td>
+                          </span>
-                              <td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td>
+                        </li>
-                            </tr>
+                        <li className="d-flex align-items-center mb-4 text-start">
+                          <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>
                        
-                            <tr>
+                      </ul>
-                              <td className="fw-medium text-start">Joining Date:</td>
+                    </div>
-                              <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>