Search input works for both name and job role filtering. Dropdown correctly shows checkboxes and supports multi-selection. Updated icon appears, and filtering updates the employee list as expected.

src/components/Project/AssignTask.jsx

@@ -51,6 +51,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   // State for search term
   const [searchTerm, setSearchTerm] = useState("");
 
+  // State for search term
+  const [searchTerm, setSearchTerm] = useState("");
+
   useEffect(() => {
     if (typeof bootstrap !== "undefined") {
       if (infoRef.current) {
@@ -86,6 +89,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   const { loading } = useMaster();
   const { data: jobRoleData } = useMaster();
 
+  // Changed to an array to hold multiple selected roles
+  const [selectedRoles, setSelectedRoles] = useState(["all"]);
   // Changed to an array to hold multiple selected roles
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
@@ -127,12 +132,46 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     dispatch(changeMaster("Job Role"));
     // Initial state should reflect "All Roles" selected
     setSelectedRoles(["all"]);
+    // Initial state should reflect "All Roles" selected
+    setSelectedRoles(["all"]);
   }, [dispatch]);
 
-  const handleRoleChange = (event) => {
+  // Modified handleRoleChange to handle multiple selections
-    setSelectedRole(event.target.value);
+  const handleRoleChange = (event, roleId) => {
+    // If 'all' is selected, clear other selections
+    if (roleId === "all") {
+      setSelectedRoles(["all"]);
+    } else {
+      setSelectedRoles((prevSelectedRoles) => {
+        // If "all" was previously selected, remove it
+        const newRoles = prevSelectedRoles.filter((role) => role !== "all");
+        if (newRoles.includes(roleId)) {
+          // If role is already selected, unselect it
+          return newRoles.filter((id) => id !== roleId);
+        } else {
+          // If role is not selected, add it
+          return [...newRoles, roleId];
+        }
+      });
+    }
   };
 
+  useEffect(() => {
+    // Update displayedSelection based on selectedRoles
+    if (selectedRoles.includes("all")) {
+      setDisplayedSelection("All Roles");
+    } else if (selectedRoles.length > 0) {
+      const selectedRoleNames = selectedRoles.map(roleId => {
+        const role = jobRoleData?.find(r => String(r.id) === roleId);
+        return role ? role.name : '';
+      }).filter(Boolean); // Filter out empty strings for roles not found
+      setDisplayedSelection(selectedRoleNames.join(', '));
+    } else {
+      setDisplayedSelection("Select Roles");
+    }
+  }, [selectedRoles, jobRoleData]);
+
+
   const handleSearchChange = (event) => {
     setSearchTerm(event.target.value);
   };
@@ -140,19 +179,33 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   // 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;
+      selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
-
     // 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();
 
+    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;
   });
 
+  // Determine unique job role IDs from the filtered employees (for dropdown options)
+  const uniqueJobRoleIdsInFilteredEmployees = new Set(
+    employees?.map(emp => emp.jobRoleId).filter(Boolean)
+  );
+
+  // Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
+  const jobRolesForDropdown = jobRoleData?.filter(role =>
+    uniqueJobRoleIdsInFilteredEmployees.has(role.id)
+  );
+
+  // Calculate the count of selected roles for display
+  const selectedRolesCount = selectedRoles.includes("all")
+    ? 0 // "All Roles" doesn't contribute to a specific count
+    : selectedRoles.length;
+
   const onSubmit = (data) => {
     const selectedEmployeeIds = data.selectedEmployees;
 
@@ -177,6 +230,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     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>
@@ -209,17 +263,81 @@ 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 me-2">Select Team</span>
+                      <span className="text-dark">Select Team</span>
-                      <div className="me-2">{displayedSelection}</div>
+                      <div className="dropdown position-relative d-inline-block">
-                      <a
+                        <a
-                        className="dropdown-toggle hide-arrow cursor-pointer"
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
-                        data-bs-toggle="dropdown"
+                            ? "text-secondary"
-                        aria-expanded="false"
+                            : "text-primary"
-                      >
+                            }`}
-                        <i className="bx bx-filter bx-lg text-primary"></i>
+                          data-bs-toggle="dropdown"
-                      </a>
+                          role="button"
+                          aria-expanded="false"
+                        >
+                          <i className="bx bx-slider-alt ms-2"></i>
+                        </a>
 
-                      <ul className="dropdown-menu p-2 text-capitalize">
+                        {/* Badge */}
+                        {selectedRolesCount > 0 && (
+                          <span
+                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
+                            style={{
+                              fontSize: "0.65rem",
+                              minWidth: "18px",
+                              height: "18px",
+                              padding: "0",
+                              lineHeight: "18px",
+                              textAlign: "center",
+                              zIndex: 10,
+                            }}
+                          >
+                            {selectedRolesCount}
+                          </span>
+                        )}
+
+                        {/* Dropdown Menu */}
+                        <ul
+                          className="dropdown-menu p-2 text-capitalize "
+                        >
+                          <li key="all">
+                            <div className="form-check dropdown-item py-0">
+                              <input
+                                className="form-check-input"
+                                type="checkbox"
+                                id="checkboxAllRoles"
+                                value="all"
+                                checked={selectedRoles.includes("all")}
+                                onChange={(e) => handleRoleChange(e, e.target.value)}
+                              />
+                              <label className="form-check-label ms-2" htmlFor="checkboxAllRoles">
+                                All Roles
+                              </label>
+                            </div>
+                          </li>
+
+                          {jobRolesForDropdown?.map((role) => (
+                            <li key={role.id}>
+                              <div className="form-check dropdown-item py-0">
+                                <input
+                                  className="form-check-input"
+                                  type="checkbox"
+                                  id={`checkboxRole-${role.id}`}
+                                  value={role.id}
+                                  checked={selectedRoles.includes(String(role.id))}
+                                  onChange={(e) => handleRoleChange(e, e.target.value)}
+                                />
+                                <label className="form-check-label ms-2" htmlFor={`checkboxRole-${role.id}`}>
+                                  {role.name}
+                                </label>
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                      <ul
+                        className="dropdown-menu p-2 text-capitalize"
+                        style={{ maxHeight: "300px", overflowY: "auto" }}
+                      >
                         <li key="all">
                           <div className="form-check dropdown-item py-0">
                             <input
@@ -239,7 +357,45 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               All Roles
                             </label>
                           </div>
+                          <div className="form-check dropdown-item py-0">
+                            <input
+                              className="form-check-input"
+                              type="checkbox"
+                              id="checkboxAllRoles"
+                              value="all"
+                              checked={selectedRoles.includes("all")}
+                              onChange={(e) =>
+                                handleRoleChange(e, e.target.value)
+                              }
+                            />
+                            <label
+                              className="form-check-label ms-2"
+                              htmlFor="checkboxAllRoles"
+                            >
+                              All Roles
+                            </label>
+                          </div>
                         </li>
+                        {jobRolesForDropdown?.map((role) => (
+                          <li key={role.id}>
+                            <div className="form-check dropdown-item py-0">
+                              <input
+                                className="form-check-input"
+                                type="checkbox"
+                                id={`checkboxRole-${role.id}`}
+                                value={role.id}
+                                checked={selectedRoles.includes(String(role.id))}
+                                onChange={(e) =>
+                                  handleRoleChange(e, e.target.value)
+                                }
+                              />
+                              <label
+                                className="form-check-label ms-2"
+                                htmlFor={`checkboxRole-${role.id}`}
+                              >
+                                {role.name}
+                              </label>
+                            </div>
                         {jobRolesForDropdown?.map((role) => (
                           <li key={role.id}>
                             <div className="form-check dropdown-item py-0">
@@ -263,19 +419,33 @@ 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
+                        className="form-control form-control-sm ms-auto mb-2 mt-2"
                         placeholder="Search employees or roles..."
                         value={searchTerm}
                         onChange={handleSearchChange}
-                        style={{ maxWidth: '200px' }} // Optional: Limit search input width
+                        style={{ maxWidth: '200px' }}
                       />
                     </div>
                   </div>
                 </div>
               </div>
+              <div
+                className="col-12 mt-2"
+                style={{ maxHeight: "280px", overflowY: "auto", overflowX: "hidden" }}
+              >
+                {selectedRoles?.length > 0 && (
+                  <div className="row">
+                    {employeeLoading ? (
+                      <div className="col-12">
+                        <p className="text-center">Loading employees...</p>
+                      </div>
+                    ) : filteredEmployees?.length > 0 ? (
+                      filteredEmployees.map((emp) => {
+                        const jobRole = jobRoleData?.find(
+                          (role) => role?.id === emp?.jobRoleId
+                        );
               <div
                 className="col-12 mt-2"
                 style={{ maxHeight: "280px", overflowY: "auto", overflowX: "hidden" }}
@@ -292,63 +462,62 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           (role) => role?.id === emp?.jobRoleId
                         );
 
-                          return (
+                        return (
-                            <div
+                          <div
-                              key={emp.id}
+                            key={emp.id}
-                              className="col-6 col-md-4 col-lg-3 mb-3"
+                            className="col-6 col-md-4 col-lg-3 mb-3"
-                            >
+                          >
-                              <div className="form-check d-flex align-items-start">
+                            <div className="form-check d-flex align-items-start">
-                                <Controller
+                              <Controller
-                                  name="selectedEmployees"
+                                name="selectedEmployees"
-                                  control={control}
+                                control={control}
-                                  render={({ field }) => (
+                                render={({ field }) => (
-                                    <input
+                                  <input
-                                      {...field}
+                                    {...field}
-                                      className="form-check-input me-1 mt-1"
+                                    className="form-check-input me-1 mt-1"
-                                      type="checkbox"
+                                    type="checkbox"
-                                      id={`employee-${emp?.id}`}
+                                    id={`employee-${emp?.id}`}
-                                      value={emp.id}
+                                    value={emp.id}
-                                      checked={field.value?.includes(emp.id)}
+                                    checked={field.value?.includes(emp.id)}
-                                      onChange={(e) => {
+                                    onChange={(e) => {
-                                        handleCheckboxChange(e, emp);
+                                      handleCheckboxChange(e, emp);
-                                      }}
+                                    }}
-                                    />
+                                  />
+                                )}
+                              />
+                              <div className="flex-grow-1">
+                                <p
+                                  className="mb-0"
+                                  style={{ fontSize: "13px" }}
+                                >
+                                  {emp.firstName} {emp.lastName}
+                                </p>
+                                <small
+                                  className="text-muted"
+                                  style={{ fontSize: "11px" }}
+                                >
+                                  {loading ? (
+                                    <span className="placeholder-glow">
+                                      <span className="placeholder col-6"></span>
+                                    </span>
+                                  ) : (
+                                    jobRole?.name || "Unknown Role"
                                   )}
-                                />
+                                </small>
-                                <div className="flex-grow-1">
-                                  <p
-                                    className="mb-0"
-                                    style={{ fontSize: "13px" }}
-                                  >
-                                    {emp.firstName} {emp.lastName}
-                                  </p>
-                                  <small
-                                    className="text-muted"
-                                    style={{ fontSize: "11px" }}
-                                  >
-                                    {loading ? (
-                                      <span className="placeholder-glow">
-                                        <span className="placeholder col-6"></span>
-                                      </span>
-                                    ) : (
-                                      jobRole?.name || "Unknown Role"
-                                    )}
-                                  </small>
-                                </div>
                               </div>
                             </div>
-                          );
+                          </div>
-                        })
+                        );
-                      ) : (
+                      })
-                        <div className="col-12">
+                    ) : (
-                          <p className="text-center">
+                      <div className="col-12">
-                            No employees found for the selected role or search term.
+                        <p className="text-center">
-                          </p>
+                          No employees found for the selected role(s).
-                        </div>
+                        </p>
-                      )}
+                      </div>
-                    </div>
+                    )}
-                  )}
+                  </div>
-                </div>
+                )}
               </div>
 
               <div
@@ -441,7 +610,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           className="bi bi-info-circle"
                           viewBox="0 0 16 16"
                         >
-                          <path d="M8 15A7 7 S1 8 1a7 7 0 0 1 0-14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                           <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
                         </svg>
                       </div>
@@ -477,11 +646,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           id="defaultFormControlInput"
                           aria-describedby="defaultFormControlHelp"
                         />
+                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
+                          <u>  {
+                            assignData?.workItem?.activityMaster
                         <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
                           <u>  {
                             assignData?.workItem?.activityMaster
                               ?.unitOfMeasurement
                           }</u>
+                          }</u>
                         </span>
                         <div
                           style={{
@@ -539,6 +712,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               <label
                 className="form-text fs-7 m-1 text-lg text-dark"
                 htmlFor="descriptionTextarea"
+                htmlFor="descriptionTextarea"
               >
                 Description
               </label>
@@ -550,6 +724,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                     {...field}
                     className="form-control"
                     id="descriptionTextarea"
+                    id="descriptionTextarea"
                     rows="2"
                   />
                 )}
@@ -584,5 +759,4 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     </div>
   );
 };
-
+export default AssignTask;
-export default AssignTask;