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,18 +4,12 @@ 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, {
     errorMap: () => ({ message: "You must check the box first" }),
   }),
-} );
+});
-
 
 const AssignEmployeeTable = ({
   employee,
@@ -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,27 +77,28 @@ 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>
       </td>
 
       <td className="text-end justify-content-end d-none d-sm-table-cell">
-      <div className="d-flex justify-content-end">
+        <div className="d-flex justify-content-end">
-        <select
+          <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 ${
-          {...register("jobRole")}
+              errors.jobRole ? "is-invalid" : ""
-          onChange={handleRoleSelect}
+            }`}
-        >
+            {...register("jobRole")}
-          {/* <option value="">Select a Job Role</option> */}
+            onChange={handleRoleSelect}
-          {jobRoles.map((role) => (
+          >
-            <option key={role.id} value={role.id}>
+            {/* <option value="">Select a Job Role</option> */}
-              {role.name}
+            {jobRoles.map((role) => (
-            </option>
+              <option key={role.id} value={role.id}>
-          ))}
+                {role.name}
-        </select>
+              </option>
-      
+            ))}
+          </select>
         </div>
         {errors.jobRole && (
           <div className="invalid-feedback">{errors.jobRole.message}</div>
@@ -110,7 +107,7 @@ const AssignEmployeeTable = ({
           <div className="invalid-feedback d-block">
             {errors.isChecked.message}
           </div>
-          )}
+        )}
       </td>
 
       <td className="text-start d-none d-sm-table-cell">
@@ -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";
@@ -20,28 +22,30 @@ const Teams = ({ project }) => {
   const [empJobRoles, setEmpJobRoles] = useState(null);
   const [employees, setEmployees] = useState([]);
   const [filteredEmployees, setFilteredEmployees] = useState([]);
-  const [ removingEmployeeId, setRemovingEmployeeId ] = useState( null );
+  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);
-          setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
+          console.log(response.data);
-          setEmployeeLoading(false)
+          setFilteredEmployees(response.data.filter((emp) => emp.isActive));
+          setEmployeeLoading(false);
         })
         .catch((error) => {
           console.error(error);
-          setError( "Failed to fetch data." );
+          setError("Failed to fetch data.");
-          setEmployeeLoading(false)
+          setEmployeeLoading(false);
         });
     } catch (err) {
       setError("Failed to fetch activities.");
@@ -53,8 +57,8 @@ const Teams = ({ project }) => {
       .then((response) => {
         showToast("Details updated successfully.", "success");
         fetchEmployees();
-        setRemovingEmployeeId( null );
+        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>
@@ -204,7 +208,7 @@ const Teams = ({ project }) => {
                 </thead>
                 <tbody className="table-border-bottom-0">
                   {filteredEmployees &&
-                    filteredEmployees.map( ( item ) => (
+                    filteredEmployees.map((item) => (
                       <tr key={item.id}>
                         <td>
                           <div className="d-flex justify-content-start align-items-center">
@@ -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>
@@ -232,20 +233,20 @@ const Teams = ({ project }) => {
                         </td>
                         <td>
                           {" "}
-                          {moment( item.allocationDate ).format(
+                          {moment(item.allocationDate).format(
                             "DD-MMM-YYYY"
                           )}{" "}
                         </td>
                         <td>
                           {item.reAllocationDate
-                            ? moment( item.reAllocationDate ).format(
+                            ? moment(item.reAllocationDate).format(
-                              "DD-MMM-YYYY"
+                                "DD-MMM-YYYY"
-                            )
+                              )
                             : "Present"}
                         </td>
                         <td>
                           <span className="badge bg-label-primary me-1">
-                            {getRole( item.jobRoleId )}
+                            {getRole(item.jobRoleId)}
                           </span>
                         </td>
                         <td>
@@ -255,26 +256,31 @@ const Teams = ({ project }) => {
                               type="button"
                               title="Remove from project"
                               className="btn p-0 dropdown-toggle hide-arrow"
-                              onClick={() => removeAllocation( item )}
+                              onClick={() => removeAllocation(item)}
                             >
                               {" "}
-                              {removingEmployeeId === item.id ? <div
+                              {removingEmployeeId === item.id ? (
-                                class="spinner-border spinner-border-sm text-primary"
+                                <div
-                                role="status"
+                                  class="spinner-border spinner-border-sm text-primary"
-                              >
+                                  role="status"
-                                <span class="visually-hidden">Loading...</span>
+                                >
-                              </div> : <i className="bx bx-trash me-1 text-danger"></i>}
+                                  <span class="visually-hidden">
-                              
+                                    Loading...
+                                  </span>
+                                </div>
+                              ) : (
+                                <i className="bx bx-trash me-1 text-danger"></i>
+                              )}
                             </button>
                           )}
                           {!item.isActive && <span>Not in project</span>}
                         </td>
                       </tr>
-                    ) )}
+                    ))}
                 </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>