src/components/Project/Teams.jsx

@@ -14,11 +14,13 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { ASSIGN_TO_PROJECT } from "../../utils/constants";
 import ConfirmModal from "../common/ConfirmModal";
 import eventBus from "../../services/eventBus";
-import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../hooks/useProjects";
+import {
+  useEmployeesByProjectAllocated,
+  useManageProjectAllocation,
+} from "../../hooks/useProjects";
 import { useSelectedproject } from "../../slices/apiDataManager";
 
-const Teams = () =>
+const Teams = () => {
-{
   // const {projectId} = useParams()
   // const projectId = useSelector((store)=>store.localVariables.projectId)
   const projectId = useSelectedproject();
@@ -32,14 +34,19 @@ const Teams = () =>
   const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
   const [assignedLoading, setAssignedLoading] = useState(false);
-  const [ activeEmployee, setActiveEmployee ] = useState( true )
+  const [activeEmployee, setActiveEmployee] = useState(true);
-  const [deleteEmployee,setDeleteEmplyee] = useState(null)
+  const [deleteEmployee, setDeleteEmplyee] = useState(null);
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
 
   const navigate = useNavigate();
 
   const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
-  const [ IsDeleteModal, setIsDeleteModal ] = useState( false )
+  const [IsDeleteModal, setIsDeleteModal] = useState(false);
-  const {projectEmployees, loading:employeeLodaing,  refetch} = useEmployeesByProjectAllocated( projectId )
+  const {
+    projectEmployees,
+    loading: employeeLodaing,
+    refetch,
+  } = useEmployeesByProjectAllocated(projectId);
   const {
     mutate: submitAllocations,
     isPending,
@@ -57,8 +64,6 @@ const {
     },
   });
 
-
- 
   const removeAllocation = (item) => {
     setRemovingEmployeeId(item.id);
 
@@ -90,11 +95,12 @@ const {
     setActiveEmployee(true);
     setFilteredEmployees(employees.filter((emp) => emp.isActive));
 
-  const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
+    const dropdown = document.querySelector(
+      'select[name="DataTables_Table_0_length"]'
+    );
     if (dropdown) dropdown.value = "true";
   };
 
-
   const getRole = (jobRoleId) => {
     if (loading) return "Loading...";
     if (!Array.isArray(empJobRoles)) return "Unassigned";
@@ -127,12 +133,12 @@ const {
     dispatch(changeMaster("Job Role"));
   }, [dispatch]);
 
-
   useEffect(() => {
-    if ( projectEmployees )
+    if (projectEmployees) {
-    {
       setEmployees(projectEmployees);
-       setFilteredEmployees( projectEmployees?.filter( ( emp ) => emp.isActive ) );
+      //setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive));
+      const filtered = projectEmployees.filter((emp) => emp.isActive);
+      setFilteredEmployees(filtered);
     }
   }, [projectEmployees, employeeLodaing]);
 
@@ -142,24 +148,57 @@ const {
     }
   }, [data]);
 
+  const filterAndSearchEmployees = useCallback(() => {
+    const statusFiltered = employees.filter((emp) =>
+      activeEmployee ? emp.isActive : !emp.isActive
+    );
+
+    if (searchTerm === "") {
+      setFilteredEmployees(statusFiltered);
+      return;
+    }
+
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
+    const searchedAndFiltered = statusFiltered.filter((item) => {
+      const fullName =
+        `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
+      const roleName = getRole(item.jobRoleId).toLowerCase();
+
+      return (
+        fullName.includes(lowercasedSearchTerm) ||
+        roleName.includes(lowercasedSearchTerm)
+      );
+    });
+
+    setFilteredEmployees(searchedAndFiltered);
+  }, [employees, activeEmployee, searchTerm, getRole]);
+
+  useEffect(() => {
+    filterAndSearchEmployees();
+  }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
+
   const handleFilterEmployee = (e) => {
     const filterValue = e.target.value;
-    if ( filterValue === "true" )
+    // if (filterValue === "true") {
-    {
+    //   setActiveEmployee(true);
-      setActiveEmployee(true)
+    //   setFilteredEmployees(employees.filter((emp) => emp.isActive));
-      setFilteredEmployees(employees.filter((emp) => emp.isActive));
+    // } else {
-    } else {
+    //   setFilteredEmployees(employees.filter((emp) => !emp.isActive));
-      setFilteredEmployees( employees.filter( ( emp ) => !emp.isActive ) );
+    //   setActiveEmployee(false);
-      setActiveEmployee(false)
+    // }
-    }
+    setActiveEmployee(filterValue === "true");
+    setSearchTerm("");
   };
 
-  const deleteModalOpen = (item) =>
+  const handleSearch = (e) => {
-  {
+    setSearchTerm(e.target.value);
-    setDeleteEmplyee(item)
+  };
-    setIsDeleteModal(true)
+
-  }
+  const deleteModalOpen = (item) => {
-  const closeDeleteModal = ()=> setIsDeleteModal(false)
+    setDeleteEmplyee(item);
+    setIsDeleteModal(true);
+  };
+  const closeDeleteModal = () => setIsDeleteModal(false);
 
   const handler = useCallback(
     (msg) => {
@@ -180,13 +219,14 @@ const {
       if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
         refetch();
       }
-    },[filteredEmployees, refetch]
+    },
+    [filteredEmployees, refetch]
   );
 
   useEffect(() => {
     eventBus.on("employee", employeeHandler);
-    return () => eventBus.off("employee",employeeHandler)
+    return () => eventBus.off("employee", employeeHandler);
-  },[employeeHandler])
+  }, [employeeHandler]);
 
   return (
     <>
@@ -208,7 +248,6 @@ const {
         ></MapUsers>
       </div>
 
-
       {IsDeleteModal && (
         <div
           className={`modal fade  ${IsDeleteModal ? "show" : ""}`}
@@ -220,7 +259,6 @@ const {
           }}
           aria-hidden="false"
         >
- 
           <ConfirmModal
             type={"delete"}
             header={"Removed Employee"}
@@ -235,8 +273,20 @@ const {
 
       <div className="card card-action mb-6">
         <div className="card-body">
-          <div className="row">
+          <div className="row d-flex justify-content-between mb-4">
-            <div className="col-12 d-flex justify-content-between mb-1">
+            <div className="col-md-6 col-12 d-flex align-items-center">
+              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Search by Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+              </div>
+            </div>
+            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
               <div
                 className="dataTables_length text-start py-2 px-2"
                 id="DataTables_Table_0_length"
@@ -258,7 +308,7 @@ const {
               </div>
               <button
                 type="button"
-                className={`link-button btn-sm m-1 ${
+                className={`link-button btn-primary btn-sm ${
                   HasAssignUserPermission ? "" : "d-none"
                 }`}
                 data-bs-toggle="modal"
@@ -271,11 +321,15 @@ const {
           </div>
           <div className="table-responsive text-nowrap">
             {employeeLodaing && <p>Loading..</p>}
-            {!employeeLodaing && employees && employees.length > 0 && (
+            {!employeeLodaing &&
+              filteredEmployees &&
+              filteredEmployees.length > 0 && (
                 <table className="table ">
                   <thead>
                     <tr>
-                    <th>Name</th>
+                      <th>
+                        <div className="text-start ms-5">Name</div>
+                      </th>
                       <th>Assigned Date</th>
                       {!activeEmployee && <th>Release Date</th>}
                       <th>Project Role</th>
@@ -295,7 +349,9 @@ const {
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
-                                  navigate(`/employee/${item.employeeId}?for=attendance`)
+                                    navigate(
+                                      `/employee/${item.employeeId}?for=attendance`
+                                    )
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
@@ -313,13 +369,15 @@ const {
                               "DD-MMM-YYYY"
                             )}{" "}
                           </td>
-                        {!activeEmployee && <td>
+                          {!activeEmployee && (
+                            <td>
                               {item.reAllocationDate
                                 ? moment(item.reAllocationDate).format(
                                     "DD-MMM-YYYY"
                                   )
                                 : "Present"}
-                        </td>}
+                            </td>
+                          )}
                           <td>
                             <span className="badge bg-label-primary me-1">
                               {getRole(item.jobRoleId)}