src/components/Project/AssignTask.jsx

@@ -48,6 +48,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   const infoRef = useRef(null);
   const infoRef1 = useRef(null);
 
+  // State for search term
+  const [searchTerm, setSearchTerm] = useState("");
+
   useEffect(() => {
     if (typeof bootstrap !== "undefined") {
       if (infoRef.current) {
@@ -129,12 +132,25 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     setSelectedRole(event.target.value);
   };
 
-  const filteredEmployees =
-    selectedRole === "all"
-      ? employees
-      : employees?.filter(
-          (emp) => String(emp.jobRoleId || "") === selectedRole
-        );
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  // Filter employees first by role, then by search term AND job role name
+  const filteredEmployees = employees?.filter((emp) => {
+    const matchesRole =
+      selectedRole === "all" || String(emp.jobRoleId || "") === selectedRole;
+
+    // Convert both first and last names and job role name to lowercase for case-insensitive matching
+    const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
+    const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
+    const searchLower = searchTerm.toLowerCase();
+
+    // Check if the full name OR job role name includes the search term
+    const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
+
+    return matchesRole && matchesSearch;
+  });
 
   const onSubmit = (data) => {
     const selectedEmployeeIds = data.selectedEmployees;
@@ -159,6 +175,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     reset();
     onClose();
   };
+
   return (
     <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
       <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
@@ -191,7 +208,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 <div className="col-12">
                   <div className="form-text text-start">
                     <div className="d-flex align-items-center form-text fs-7">
-                      <span className="text-dark">Select Team</span>
+                      <span className="text-dark me-2">Select Team</span>
                       <div className="me-2">{displayedSelection}</div>
                       <a
                         className="dropdown-toggle hide-arrow cursor-pointer"
@@ -228,6 +245,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           </li>
                         ))}
                       </ul>
+                      {/* Search Field for Employees - Moved inline and pushed to the right */}
+                      <input
+                        type="text"
+                        className="form-control form-control-sm ms-auto mb-2 mt-2" // Changed ms-3 to ms-auto
+                        placeholder="Search employees or roles..."
+                        value={searchTerm}
+                        onChange={handleSearchChange}
+                        style={{ maxWidth: '200px' }} // Optional: Limit search input width
+                      />
                     </div>
                   </div>
                 </div>
@@ -297,7 +323,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       ) : (
                         <div className="col-12">
                           <p className="text-center">
-                            No employees found for the selected role.
+                            No employees found for the selected role or search term.
                           </p>
                         </div>
                       )}
@@ -432,11 +458,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           id="defaultFormControlInput"
                           aria-describedby="defaultFormControlHelp"
                         />
-                        <span style={{ paddingLeft: "6px" }}>
-                          {
-                            assignData?.workItem?.workItem?.activityMaster
+                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
+                          <u>  {
+                            assignData?.workItem?.activityMaster
                               ?.unitOfMeasurement
-                          }
+                          }</u>
                         </span>
                         <div
                           style={{
@@ -542,4 +568,4 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   );
 };
 
-export default AssignTask;
+export default AssignTask;