added filter and sorted employee list - Team

src/components/Project/Team/Teams.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import MapUsers from "../MapUsers";
 import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
 
@@ -28,16 +28,15 @@ const Teams = () => {
   const dispatch = useDispatch();
   const [AssigTeam, setAssignTeam] = useState(false);
   const [employees, setEmployees] = useState([]);
-  const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [selectedEmployee, setSelectedEmployee] = useState(null);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
   const [selectedService, setSelectedService] = useState(null);
-  const [activeEmployee,setActiveEmployee] = useState(false)
+  const [activeEmployee, setActiveEmployee] = useState(false);
 
   const { data: assignedServices, isLoading: servicesLoading } =
     useProjectAssignedServices(selectedProject);
-    const {data:empJobRoles,loading} = useMaster()
+  const { data: empJobRoles, loading } = useMaster();
   const handleToggleActive = (e) => setActiveEmployee(e.target.checked);
 
   const handleServiceChange = (e) => {
@@ -52,7 +51,12 @@ const Teams = () => {
     projectEmployees,
     loading: employeeLodaing,
     refetch,
-  } = useEmployeesByProjectAllocated(selectedProject, selectedService,null,activeEmployee);
+  } = useEmployeesByProjectAllocated(
+    selectedProject,
+    selectedService,
+    null,
+    activeEmployee
+  );
   const {
     mutate: submitAllocations,
     isPending,
@@ -90,19 +94,36 @@ const Teams = () => {
     const role = empJobRoles.find((b) => b.id == jobRoleId);
     return role ? role.name : "Unassigned";
   };
-  // const employeeHandler = useCallback(
-  //   (msg) => {
-  //     if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
-  //       refetch();
-  //     }
-  //   },
-  //   [filteredEmployees, refetch]
-  // );
 
-  // useEffect(() => {
+  const filteredEmployees = useMemo(() => {
-  //   eventBus.on("employee", employeeHandler);
+    if (!projectEmployees || !searchTerm?.trim()) return projectEmployees;
-  //   return () => eventBus.off("employee", employeeHandler);
+
-  // }, [employeeHandler]);
+    const lower = searchTerm.toLowerCase();
+
+    return projectEmployees?.filter((emp) => {
+      const fullName = `${emp.firstName ?? ""} ${
+        emp.lastName ?? ""
+      }`.toLowerCase();
+
+      const joberole = getJobRole(emp?.jobRoleId)?.toLowerCase();
+
+      return fullName?.includes(lower) || joberole?.includes(lower);
+    });
+  }, [projectEmployees, searchTerm]);
+  const handleSearch = (e) => setSearchTerm(e.target.value);
+  const employeeHandler = useCallback(
+    (msg) => {
+      if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
+        refetch();
+      }
+    },
+    [filteredEmployees, refetch]
+  );
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
 
   return (
     <>
@@ -128,25 +149,30 @@ const Teams = () => {
 
       <div className="card card-action mb-6">
         <div className="card-body">
-          <div className="row d-flex justify-content-between mb-4">
+          <div className="row align-items-center justify-content-between mb-4 g-3">
-            <div className="col-md-6 col-12 d-flex align-emps-center">
+            <div className="col-md-6 col-12 algin-items-center">
-              {/* <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
+              <div className="d-flex flex-wrap align-items-center gap-3">
-                {!servicesLoading &&
+                <div>
-                  assignedServices?.length > 0 &&
+                  {!servicesLoading && (
-                  (assignedServices.length > 1 ? (
+                    <>
-                    <label>
+                      {(!assignedServices || assignedServices.length === 0) && (
+                        <span className="badge bg-label-secondary">
+                          Not Service Assigned
+                        </span>
+                      )}
+
+                      {assignedServices?.length === 1 && (
+                        <span className="badge bg-label-secondary">
+                          {assignedServices[0].name}
+                        </span>
+                      )}
+
+                      {assignedServices?.length > 1 && (
                         <select
-                        name="DataTables_Table_0_length"
-                        aria-controls="DataTables_Table_0"
                           className="form-select form-select-sm"
                           aria-label="Select Service"
                           value={selectedService}
                           onChange={handleServiceChange}
-                        style={{
-                          fontSize: "0.875rem",
-                          height: "35px",
-                          width: "190px",
-                        }}
                         >
                           <option value="">All Services</option>
                           {assignedServices.map((service) => (
@@ -155,52 +181,53 @@ const Teams = () => {
                             </option>
                           ))}
                         </select>
-                    </label>
+                      )}
-                  ) : (
+                    </>
-                    <h5>{assignedServices[0].name}</h5>
+                  )}
-                  ))}
-              </div> */}
                 </div>
-            <div className="col-md-6 col-12 d-flex justify-content-end align-emps-center">
+
-              <div className="form-check form-switch me-2 mt-2">
+                <div className="form-check form-switch d-flex align-items-center text-nowrap">
                   <input
                     type="checkbox"
                     className="form-check-input"
+                    id="activeEmployeeSwitch"
                     checked={activeEmployee}
                     onChange={handleToggleActive}
-                  id="activeEmployeeSwitch"
                   />
                   <label
-                  className="form-check-label ms-0 "
+                    className="form-check-label ms-2"
                     htmlFor="activeEmployeeSwitch"
                   >
                     {activeEmployee ? "Active Employees" : "Inactive Employees"}
                   </label>
                 </div>
-              <div className="dataTables_filter d-inline-flex align-emps-center ms-2">
+              </div>
+            </div>
+
+            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
               <input
                 type="search"
-                  className="form-control form-control-sm me-4"
+                className="form-control form-control-sm"
                 placeholder="Search by Name or Role"
                 aria-controls="DataTables_Table_0"
-                  // value={searchTerm}
+                style={{ maxWidth: "200px" }}
-                  // onChange={handleSearch}
+                value={searchTerm}
+                onChange={handleSearch}
               />
-              </div>
+
               {HasAssignUserPermission && (
                 <button
                   type="button"
-                  className={`link-button btn-primary btn-sm `}
+                  className="btn btn-primary btn-sm text-nowrap"
-                  // data-bs-toggle="modal"
-                  // data-bs-target="#user-model"
                   onClick={() => setAssignTeam(true)}
                 >
-                  <i className="bx bx-plus-circle me-2"></i>
+                  <i className="bx bx-plus-circle me-1"></i>
                   Assign Employee
                 </button>
               )}
             </div>
           </div>
+
           <div className="table-responsive text-nowrap">
             {employeeLodaing && <p>Loading..</p>}
             {projectEmployees && projectEmployees.length > 0 && (
@@ -213,14 +240,18 @@ const Teams = () => {
                     <th>Services</th>
                     <th>Organization</th>
                     <th>Assigned Date</th>
-                    <th>Release Date</th>
+                    {activeEmployee && <th>Release Date</th>}
                     <th>Project Role</th>
                     <th>Actions</th>
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {projectEmployees &&
+                  {filteredEmployees &&
-                    projectEmployees.map((emp) => (
+                    filteredEmployees
+                      .sort((a, b) =>
+                        (a.firstName || "").localeCompare(b.firstName || "")
+                      )
+                      .map((emp) => (
                         <tr key={emp.id}>
                           <td>
                             <div className="d-flex justify-content-start align-items-center">
@@ -252,11 +283,15 @@ const Teams = () => {
                           <td>
                             {moment(emp.allocationDate).format("DD-MMM-YYYY")}
                           </td>
+                          {activeEmployee && (
                             <td>
                               {emp.reAllocationDate
-                            ? moment(emp.reAllocationDate).format("DD-MMM-YYYY")
+                                ? moment(emp.reAllocationDate).format(
+                                    "DD-MMM-YYYY"
+                                  )
                                 : "Present"}
                             </td>
+                          )}
                           <td>
                             <span className="badge bg-label-primary me-1">
                               {getJobRole(emp.jobRoleId)}