src/components/Project/AssignTask.jsx

@@ -49,9 +49,6 @@ 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) {
@@ -84,11 +81,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     recallEmployeeData,
   } = useEmployeesAllOrByProjectId(false, selectedProject, false);
   const dispatch = useDispatch();
-  const { loading } = useMaster();
+  const { data: jobRoleData, loading } = useMaster();
-  const { data: jobRoleData } = useMaster();
 
-  // Changed to an array to hold multiple selected roles
+  const [selectedRole, setSelectedRole] = useState("all");
-  const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
   const {
     handleSubmit,
@@ -126,79 +121,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
-    // Initial state should reflect "All Roles" selected
+
-    setSelectedRoles(["all"]);
+    return () => setSelectedRole("all");
   }, [dispatch]);
 
-  // Modified handleRoleChange to handle multiple selections
+  const handleRoleChange = (event) => {
-  const handleRoleChange = (event, roleId) => {
+    setSelectedRole(event.target.value);
-    // 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(() => {
+  const filteredEmployees =
-    // Update displayedSelection based on selectedRoles
+    selectedRole === "all"
-    if (selectedRoles.includes("all")) {
+      ? employees
-      setDisplayedSelection("All Roles");
+      : employees?.filter(
-    } else if (selectedRoles.length > 0) {
+          (emp) => String(emp.jobRoleId || "") === selectedRole
-      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;
@@ -256,183 +192,118 @@ 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>
+                      <a
+                        className="dropdown-toggle hide-arrow cursor-pointer"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i className="bx bx-filter bx-lg text-primary"></i>
+                      </a>
 
-                      {/* Dropdown */}
+                      <ul className="dropdown-menu p-2 text-capitalize">
-                      <div className="dropdown position-relative d-inline-block">
+                        <li key="all">
-                        <a
+                          <button
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                            type="button"
-                              ? "text-secondary"
+                            className="dropdown-item py-1"
-                              : "text-primary"
+                            onClick={() =>
-                            }`}
+                              handleRoleChange({
-                          data-bs-toggle="dropdown"
+                                target: { value: "all" },
-                          role="button"
+                              })
-                          aria-expanded="false"
+                            }
-                        >
-                          <i className="bx bx-slider-alt ms-2"></i>
-                        </a>
-
-                        {/* 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}
+                            All Roles
-                          </span>
+                          </button>
-                        )}
+                        </li>
-
+                        {jobRoleData?.map((user) => (
-                        {/* Dropdown Menu with Scroll */}
+                          <li key={user.id}>
-                        <ul
+                            <button
-                          className="dropdown-menu p-2 text-capitalize"
+                              type="button"
-                          style={{ maxHeight: "300px", overflowY: "auto" }}
+                              className="dropdown-item py-1"
-                        >
+                              value={user.id}
-                          {/* All Roles */}
+                              onClick={handleRoleChange}
-                          <li key="all">
+                            >
-                            <div className="form-check dropdown-item py-0">
+                              {user.name}
-                              <input
+                            </button>
-                                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>
-
+                        ))}
-                          {/* Dynamic Roles */}
+                      </ul>
-                          {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>
-
-                      {/* 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>
 
-              {/* Employees list */}
+              <div className="row">
-              <div
+                <div className="col-12 h-sm-25 overflow-auto mt-2" style={{height:"300px"}}>
-                className="col-12 mt-2"
+                  {selectedRole !== "" && (
-                style={{
+                    <div className="row">
-                  maxHeight: "280px",
+                      {employeeLoading ? (
-                  overflowY: "auto",
+                        <div className="col-12">
-                  overflowX: "hidden",
+                          <p className="text-center">Loading employees...</p>
-                }}
+                        </div>
-              >
+                      ) : filteredEmployees?.length > 0 ? (
-                {selectedRoles?.length > 0 && (
+                        filteredEmployees.map((emp) => {
-                  <div className="row">
+                          const jobRole = jobRoleData?.find(
-                    {employeeLoading ? (
+                            (role) => role?.id === emp?.jobRoleId
-                      <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
-                        );
 
-                        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">
-                      <div className="col-12">
+                          <p className="text-center">
-                        <p className="text-center">
                             No employees found for the selected role.
-                        </p>
+                          </p>
-                      </div>
+                        </div>
-                    )}
+                      )}
-                  </div>
+                    </div>
-                )}
+                  )}
+                </div>
               </div>
 
               <div
@@ -485,15 +356,40 @@ 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 className="form-text text-dark align-items-center d-flex">
+                  <label
+                    className="form-text text-dark align-items-center d-flex"
+                    htmlFor="inlineCheckbox1"
+                  >
                     Pending Task of Activity :
-                    <label className="form-check-label fs-7 ms-4">
+                    <label
+                      className="form-check-label fs-7 ms-4"
+                      htmlFor="inlineCheckbox1"
+                    >
                       <strong>
                         {assignData?.workItem?.plannedWork -
                           assignData?.workItem?.completedWork}
                       </strong>{" "}
-                      <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                      <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>
@@ -501,7 +397,10 @@ 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 className="text-dark d-flex align-items-center flex-wrap form-text">
+                  <label
+                    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>
@@ -519,17 +418,51 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           type="text"
                           className="form-control form-control-sm"
                           {...field}
+                          id="defaultFormControlInput"
+                          aria-describedby="defaultFormControlHelp"
                         />
-                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
+                        <span style={{ paddingLeft: "6px" }}>
-                          <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">{errors.plannedTask.message}</div>
+                  <div className="danger-text mt-1">
+                    {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>
 
@@ -543,7 +476,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 name="description"
                 control={control}
                 render={({ field }) => (
-                  <textarea {...field} className="form-control" rows="2" />
+                  <textarea
+                    {...field}
+                    className="form-control"
+                    id="descriptionTextarea" // Changed id for better accessibility
+                    rows="2"
+                  />
                 )}
               />
               {errors.description && (