added one more field plannedTask inside Task Report

src/components/Activities/ReportTask.jsx

@@ -34,6 +34,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
         ...data,
         id: report?.id,
         reportedDate: new Date().toISOString(),
+        checkList:[]
       };
 
       let response = await TasksRepository.reportTsak(reportData);
@@ -116,6 +117,17 @@ 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

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

src/components/Employee/ManageEmployee.jsx

@@ -39,21 +39,15 @@ 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
           );
         },
         {
@@ -92,7 +86,10 @@ 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")
@@ -444,7 +441,9 @@ const ManageEmployee = () => {
                     )}
                   </div>
                   <div className="col-sm-6">
-                    <div className="form-text text-start">Permanent Address</div>
+                    <div className="form-text text-start">
+                      Permanent Address
+                    </div>
 
                     <textarea
                       id="PermanentAddress"

src/components/Employee/ManageRole.jsx

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

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";
-
-const Header = () =>
-{
+import Avatar from "../../components/common/Avatar";
+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
-                  src="../assets/img/avatars/00.jpg"
-                  className="w-px-40 h-auto rounded-circle"
-                  alt="avatar-image"
-                  aria-label="Avatar Image"
+                <Avatar
+                  firstName={`${profile?.employeeInfo?.firstName}`}
+                  lastName={`${profile?.employeeInfo?.lastName}`}
                 />
               </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
-                          src="../assets/img/avatars/00.jpg"
-                          className="w-px-40 h-auto rounded-circle"
-                          alt="avatar-image"
-                          aria-label="Avatar Image"
+                        <Avatar
+                          firstName={`${profile?.employeeInfo?.firstName}`}
+                          lastName={`${profile?.employeeInfo?.lastName}`}
                         />
                       </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);
-    return bgClasses[randomIndex];
+    // Use the hash value to pick a background color from the array
+    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

@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import EmpProfile from "../../components/Employee/EmpProfile";
 import axios from "axios";
 import Breadcrumb from "../../components/common/Breadcrumb";
@@ -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
-                      src={`../../../public/img/avatars/${currentEmployee.gender}.jpg`}
-                      alt="user-avatar"
-                      className="d-block rounded"
-                      height="100"
-                      width="100"
-                      aria-label="Account image"
-                      id="uploadedAvatar"
+                      <Avatar
+                        firstName={`${currentEmployee?.firstName}`}
+                        lastName={`${currentEmployee?.lastName}`}
+                        size={"lg"}
                       />
                       <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="text-wrap">
-                      <small className="card-text text-uppercase text-muted small">Contacts</small>
-                      <ul className="list-unstyled my-3 py-1">
+                    <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>
 
-                        <li className="d-flex align-items-center mb-4">
-                          <i className="bx bx-phone"></i>
-                          <span className="fw-medium mx-2">Contact Number:</span>
-                          <span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}>
-                            {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
-                          </span>
-                        </li>
-                        <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>
+                            <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>
 
-                        </li>
-                        <li className="d-flex align-items-start test-start mb-2">
-                          <span className={`${currentEmployee?.permanentAddress ? "" : "ms-4"}`}>
-                          {currentEmployee?.permanentAddress}
-                          </span>
-                        </li>
 
-                      </ul>
-                    </div>
+                            <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={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
+                        Edit Profile
+                      </button>
                     </div>
                   </div>
                 </div>
+
               </div>
             </div>
           </div>