Display middle name for employee on Teams and Employees page

src/components/Charts/HorizontalBarChart.jsx

@@ -124,7 +124,7 @@ const HorizontalBarChart = ({
     <div className="w-full">
       <ReactApexChart
         options={chartOptions}
-        series={[{ data: adjustedSeriesData, name: "Complete Status" }]}
+        series={[{ data: adjustedSeriesData, name: "Complete Work" }]}
         type="bar"
         height={chartHeight}
       />

src/components/Project/AssignEmployeeTable.jsx

@@ -4,11 +4,6 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-
-
-
-
-
 export const roleSchema = z.object({
   jobRole: z.string().min(1, "Job Role is required"),
   isChecked: z.literal(true, {
@@ -16,7 +11,6 @@ export const roleSchema = z.object({
   }),
 });
 
-
 const AssignEmployeeTable = ({
   employee,
   jobRoles,
@@ -24,7 +18,9 @@ const AssignEmployeeTable = ({
   onRoleChange,
   onCheckboxChange,
 }) => {
-  const [currentJobRole, setCurrentJobRole] = useState(employee.jobRoleId?.toString() || "");
+  const [currentJobRole, setCurrentJobRole] = useState(
+    employee.jobRoleId?.toString() || ""
+  );
   const {
     register,
     handleSubmit,
@@ -81,7 +77,7 @@ const AssignEmployeeTable = ({
           <Avatar firstName={employee.firstName} lastName={employee.lastName} />
           <div className="d-flex flex-column">
             <span className="text-heading text-truncate cursor-pointer fw-normal">
-              {employee.firstName} {employee.lastName}
+              {employee.firstName} {employee.middleName} {employee.lastName}
             </span>
           </div>
         </div>
@@ -90,7 +86,9 @@ const AssignEmployeeTable = ({
       <td className="text-end justify-content-end d-none d-sm-table-cell">
         <div className="d-flex justify-content-end">
           <select
-          className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${errors.jobRole ? "is-invalid" : ""}`}
+            className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
+              errors.jobRole ? "is-invalid" : ""
+            }`}
             {...register("jobRole")}
             onChange={handleRoleSelect}
           >
@@ -101,7 +99,6 @@ const AssignEmployeeTable = ({
               </option>
             ))}
           </select>
-      
         </div>
         {errors.jobRole && (
           <div className="invalid-feedback">{errors.jobRole.message}</div>
@@ -127,4 +124,3 @@ const AssignEmployeeTable = ({
 };
 
 export default AssignEmployeeTable;
-

src/components/Project/Teams.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import MapUsers from "./MapUsers";
+import { Link, NavLink, useNavigate } from "react-router-dom";
+
 import showToast from "../../services/toastService";
 import Avatar from "../common/Avatar";
 import moment from "moment";
@@ -21,27 +23,29 @@ const Teams = ({ project }) => {
   const [employees, setEmployees] = useState([]);
   const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
-  const [ assignedLoading, setAssignedLoading ] = useState( false )
+  const [assignedLoading, setAssignedLoading] = useState(false);
-  const [employeeLodaing,setEmployeeLoading] = useState(false)
+  const [employeeLodaing, setEmployeeLoading] = useState(false);
+
+  const navigate = useNavigate();
 
   const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
 
   const fetchEmployees = async () => {
-    try
+    try {
-    {
+      setEmployeeLoading(true);
-      setEmployeeLoading(true)
 
       // if (!empRoles) {
       ProjectRepository.getProjectAllocation(project.id)
         .then((response) => {
           setEmployees(response.data);
+          console.log(response.data);
           setFilteredEmployees(response.data.filter((emp) => emp.isActive));
-          setEmployeeLoading(false)
+          setEmployeeLoading(false);
         })
         .catch((error) => {
           console.error(error);
           setError("Failed to fetch data.");
-          setEmployeeLoading(false)
+          setEmployeeLoading(false);
         });
     } catch (err) {
       setError("Failed to fetch activities.");
@@ -54,7 +58,7 @@ const Teams = ({ project }) => {
         showToast("Details updated successfully.", "success");
         fetchEmployees();
         setRemovingEmployeeId(null);
-        setAssignedLoading(false)
+        setAssignedLoading(false);
       })
       .catch((error) => {
         showToast(error.message, "error");
@@ -190,7 +194,7 @@ const Teams = ({ project }) => {
             </div>
           </div>
           <div className="table-responsive text-nowrap">
-            {employeeLodaing && (<p>Loading..</p>)}
+            {employeeLodaing && <p>Loading..</p>}
             {!employeeLodaing && employees && employees.length > 0 && (
               <table className="table ">
                 <thead>
@@ -214,17 +218,14 @@ const Teams = ({ project }) => {
                             ></Avatar>
                             <div className="d-flex flex-column">
                               <a
-                                href="#"
+                                onClick={() =>
-                                onClick={( e ) =>
+                                  navigate(`/employee/${item.id}?for=account`)
-                                {
+                                }
-                                  e.preventDefault(); // Prevent default link behavior
+                                className="text-heading text-truncate cursor-pointer"
-                                  window.location.href =
-                                    "/employee/" + item.employee.id;
-                                }}
-                                className="text-heading text-truncate"
                               >
-                                <span className="fw-medium">
+                                <span className="fw-normal">
-                                  {item.firstName} {item.lastName}
+                                  {item.firstName} {item.middleName}{" "}
+                                  {item.lastName}
                                 </span>
                               </a>
                             </div>
@@ -258,13 +259,18 @@ const Teams = ({ project }) => {
                               onClick={() => removeAllocation(item)}
                             >
                               {" "}
-                              {removingEmployeeId === item.id ? <div
+                              {removingEmployeeId === item.id ? (
+                                <div
                                   class="spinner-border spinner-border-sm text-primary"
                                   role="status"
                                 >
-                                <span class="visually-hidden">Loading...</span>
+                                  <span class="visually-hidden">
-                              </div> : <i className="bx bx-trash me-1 text-danger"></i>}
+                                    Loading...
-                              
+                                  </span>
+                                </div>
+                              ) : (
+                                <i className="bx bx-trash me-1 text-danger"></i>
+                              )}
                             </button>
                           )}
                           {!item.isActive && <span>Not in project</span>}
@@ -274,7 +280,7 @@ const Teams = ({ project }) => {
                 </tbody>
               </table>
             )}
-            {(!employeeLodaing && employees.length == 0 ) && (
+            {!employeeLodaing && employees.length == 0 && (
               <span>No employees assigned to the project</span>
             )}
           </div>

src/hooks/useSearch.js

@@ -11,7 +11,8 @@ const useSearch = (data, query) => {
     return data.filter(
       (item) =>
         item.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        item.lastName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.middleName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        item.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
         item.phoneNumber.toLowerCase().includes(searchQuery.toLowerCase())
     );
   };

src/pages/employee/EmployeeList.jsx

@@ -428,7 +428,8 @@ const EmployeeList = () => {
                                   className="text-heading text-truncate cursor-pointer"
                                 >
                                   <span className="fw-normal">
-                                    {item.firstName} {item.lastName}
+                                    {item.firstName} {item.middleName}
+                                    {item.lastName}
                                   </span>
                                 </a>
                               </div>