src/components/Project/AssignTask.jsx

@@ -49,6 +49,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) {
@@ -81,9 +84,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     recallEmployeeData,
   } = useEmployeesAllOrByProjectId(false, selectedProject, false);
   const dispatch = useDispatch();
-  const { data: jobRoleData, loading } = useMaster();
+  const { loading } = useMaster();
+  const { data: jobRoleData } = useMaster();
 
-  const [selectedRole, setSelectedRole] = useState("all");
+  // Changed to an array to hold multiple selected roles
+  const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
   const {
     handleSubmit,
@@ -121,21 +126,80 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
-
+    // Initial state should reflect "All Roles" selected
-    return () => setSelectedRole("all");
+    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];
+        }
+      });
+    }
   };
 
-  const filteredEmployees =
+  useEffect(() => {
-    selectedRole === "all"
+    // Update displayedSelection based on selectedRoles
-      ? employees
+    if (selectedRoles.includes("all")) {
-      : employees?.filter(
+      setDisplayedSelection("All Roles");
-          (emp) => String(emp.jobRoleId || "") === selectedRole
+    } 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);
+  };
+
+  // Filter employees first by role, then by search term AND job role name
+  const filteredEmployees = employees?.filter((emp) => {
+    const matchesRole =
+      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();
+    // 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;
 
@@ -192,50 +256,116 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                   <div className="form-text text-start">
                     <div className="d-flex align-items-center form-text fs-7">
                       <span className="text-dark">Select Team</span>
-                      <div className="me-2">{displayedSelection}</div>
+
+                      {/* Dropdown */}
+                      <div className="dropdown position-relative d-inline-block">
                         <a
-                        className="dropdown-toggle hide-arrow cursor-pointer"
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                              ? "text-secondary"
+                              : "text-primary"
+                            }`}
                           data-bs-toggle="dropdown"
+                          role="button"
                           aria-expanded="false"
                         >
-                        <i className="bx bx-filter bx-lg text-primary"></i>
+                          <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 with Scroll */}
+                        <ul
+                          className="dropdown-menu p-2 text-capitalize"
+                          style={{ maxHeight: "300px", overflowY: "auto" }}
+                        >
+                          {/* All Roles */}
                           <li key="all">
-                          <button
+                            <div className="form-check dropdown-item py-0">
-                            type="button"
+                              <input
-                            className="dropdown-item py-1"
+                                className="form-check-input"
-                            onClick={() =>
+                                type="checkbox"
-                              handleRoleChange({
+                                id="checkboxAllRoles"
-                                target: { value: "all" },
+                                value="all"
-                              })
+                                checked={selectedRoles.includes("all")}
+                                onChange={(e) =>
+                                  handleRoleChange(e, e.target.value)
                                 }
+                              />
+                              <label
+                                className="form-check-label ms-2"
+                                htmlFor="checkboxAllRoles"
                               >
                                 All Roles
-                          </button>
+                              </label>
+                            </div>
                           </li>
-                        {jobRoleData?.map((user) => (
+
-                          <li key={user.id}>
+                          {/* Dynamic Roles */}
-                            <button
+                          {jobRolesForDropdown?.map((role) => (
-                              type="button"
+                            <li key={role.id}>
-                              className="dropdown-item py-1"
+                              <div className="form-check dropdown-item py-0">
-                              value={user.id}
+                                <input
-                              onClick={handleRoleChange}
+                                  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}`}
                                 >
-                              {user.name}
+                                  {role.name}
-                            </button>
+                                </label>
+                              </div>
                             </li>
                           ))}
                         </ul>
                       </div>
+
+                      {/* Search Box */}
+                      <input
+                        type="text"
+                        className="form-control form-control-sm ms-auto mb-2 mt-2"
+                        placeholder="Search employees or roles..."
+                        value={searchTerm}
+                        onChange={handleSearchChange}
+                        style={{ maxWidth: "200px" }}
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
 
-              <div className="row">
+              {/* Employees list */}
-                <div className="col-12 h-sm-25 overflow-auto mt-2" style={{height:"300px"}}>
+              <div
-                  {selectedRole !== "" && (
+                className="col-12 mt-2"
+                style={{
+                  maxHeight: "280px",
+                  overflowY: "auto",
+                  overflowX: "hidden",
+                }}
+              >
+                {selectedRoles?.length > 0 && (
                   <div className="row">
                     {employeeLoading ? (
                       <div className="col-12">
@@ -304,7 +434,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                   </div>
                 )}
               </div>
-              </div>
 
               <div
                 className="col-12 h-25 overflow-auto"
@@ -356,40 +485,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
               <div className="col-md text-start mx-0 px-0">
                 <div className="form-check form-check-inline mt-3 px-1">
-                  <label
+                  <label className="form-text text-dark align-items-center d-flex">
-                    className="form-text text-dark align-items-center d-flex"
-                    htmlFor="inlineCheckbox1"
-                  >
                     Pending Task of Activity :
-                    <label
+                    <label className="form-check-label fs-7 ms-4">
-                      className="form-check-label fs-7 ms-4"
-                      htmlFor="inlineCheckbox1"
-                    >
                       <strong>
                         {assignData?.workItem?.plannedWork -
                           assignData?.workItem?.completedWork}
                       </strong>{" "}
-                      <u>
+                      <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
-                        {
-                          assignData?.workItem?.activityMaster
-                            ?.unitOfMeasurement
-                        }
-                      </u>
                     </label>
-                    <div style={{ display: "flex", alignItems: "center" }}>
-                      <div
-                        ref={infoRef}
-                        tabIndex="0"
-                        className="d-flex align-items-center avatar-group justify-content-center ms-2"
-                        data-bs-toggle="popover"
-                        data-bs-trigger="focus"
-                        data-bs-placement="right"
-                        data-bs-html="true"
-                        style={{ cursor: "pointer" }}
-                      >
-                        <i class='bx bx-info-circle bx-xs m-0 text-secondary'></i>
-                      </div>
-                    </div>
                   </label>
                 </div>
               </div>
@@ -397,10 +501,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               {/* Target for Today input and validation */}
               <div className="col-md text-start mx-0 px-0">
                 <div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
-                  <label
+                  <label className="text-dark d-flex align-items-center flex-wrap form-text">
-                    className="text-dark text-start d-flex align-items-center flex-wrap form-text"
-                    htmlFor="inlineCheckbox1"
-                  >
                     <span>Target for Today</span>&nbsp;
                     <span style={{ marginLeft: "46px" }}>:</span>
                   </label>
@@ -418,51 +519,17 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           type="text"
                           className="form-control form-control-sm"
                           {...field}
-                          id="defaultFormControlInput"
-                          aria-describedby="defaultFormControlHelp"
                         />
-                        <span style={{ paddingLeft: "6px" }}>
+                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
-                          {
+                          <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
-                            assignData?.workItem?.workItem?.activityMaster
-                              ?.unitOfMeasurement
-                          }
                         </span>
-                        <div
-                          className="flex align-items-center"
-                        >
-                          <div
-                            ref={infoRef1}
-                            tabIndex="0"
-                            className="d-flex align-items-center avatar-group justify-content-center ms-2 cursor-pointer"
-                            data-bs-toggle="popover"
-                            data-bs-trigger="focus"
-                            data-bs-placement="right"
-                            data-bs-html="true"
-                          >
-                              <i class='bx bx-info-circle bx-xs m-0 text-secondary'></i>
-                          </div>
-                        </div>
                       </div>
                     )}
                   />
                 </div>
 
                 {errors.plannedTask && (
-                  <div className="danger-text mt-1">
+                  <div className="danger-text mt-1">{errors.plannedTask.message}</div>
-                    {errors.plannedTask.message}
-                  </div>
-                )}
-
-                {isHelpVisible && (
-                  <div
-                    className="position-absolute bg-white border p-2 rounded shadow"
-                    style={{ zIndex: 10, marginLeft: "10px" }}
-                  >
-                    {/* Add your help content here */}
-                    <p className="mb-0">
-                      Enter the target value for today's task.
-                    </p>
-                  </div>
                 )}
               </div>
 
@@ -476,12 +543,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 name="description"
                 control={control}
                 render={({ field }) => (
-                  <textarea
+                  <textarea {...field} className="form-control" rows="2" />
-                    {...field}
-                    className="form-control"
-                    id="descriptionTextarea" // Changed id for better accessibility
-                    rows="2"
-                  />
                 )}
               />
               {errors.description && (