change get employee at assign task to employee

src/components/Project/AssignTask.jsx

@@ -1,24 +1,25 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster from "../../hooks/masterHook/useMaster";
+import useMaster, { useServices } from "../../hooks/masterHook/useMaster";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
+import { useSelectedProject } from "../../slices/apiDataManager";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
-import { useProjectDetails } from "../../hooks/useProjects";
+import {
+  useEmployeeForTaskAssign,
+  useProjectAssignedOrganizations,
+  useProjectDetails,
+} from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useCreateTask } from "../../hooks/useTasks";
 import Label from "../common/Label";
 
-const AssignTask = ({ assignData, onClose, setAssigned }) => {
+const TaskSchema = (maxPlanned) => {
-  const maxPlanned =
+  return z.object({
-    assignData?.workItem?.plannedWork - assignData?.workItem?.completedWork;
-
-  const schema = z.object({
     selectedEmployees: z
       .array(z.string())
       .min(1, { message: "At least one employee must be selected" }),
@@ -37,20 +38,26 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
         })
     ),
   });
+};
+
+const AssignTask = ({ assignData, onClose, setAssigned }) => {
+  const planned = assignData?.workItem?.plannedWork || 0;
+  const completed = assignData?.workItem?.completedWork || 0;
+  const maxPlanned = planned - completed;
 
   const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
   const helpPopupRefTarget = useRef(null);
   const [isHelpVisible, setIsHelpVisible] = useState(false);
+  const [selectedService, setSelectedService] = useState(null);
+  const [selectedOrganization, setSelectedOrganization] = useState(null);
+
   const { mutate: assignTask, isPending: isSubmitting } = useCreateTask({
-    onSuccessCallback: () => {
+    onSuccessCallback: closedModel,
-      closedModel();
-    },
   });
 
   const dropdownRef = useRef(null);
   const [open, setOpen] = useState(false);
 
-  // Close dropdown on outside click
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -63,48 +70,47 @@ 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) {
+      infoRef.current &&
         new bootstrap.Popover(infoRef.current, {
           trigger: "focus",
           placement: "right",
           html: true,
           content: `<div>Total Pending tasks of the Activity</div>`,
         });
-      }
 
-      if (infoRef1.current) {
+      infoRef1.current &&
         new bootstrap.Popover(infoRef1.current, {
           trigger: "focus",
           placement: "right",
           html: true,
           content: `<div>Target task for today</div>`,
         });
-      }
     } else {
       console.warn("Bootstrap is not available. Popovers might not function.");
     }
   }, []);
-  const selectedProject = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const {
-    employees,
-    loading: employeeLoading,
-    recallEmployeeData,
-  } = useEmployeesAllOrByProjectId(false, selectedProject, false);
-  const dispatch = useDispatch();
-  const { loading } = useMaster();
-  const { data: jobRoleData } = useMaster();
 
-  // Changed to an array to hold multiple selected roles
+  const selectedProject = useSelectedProject();
+  const { data: serviceList, isLoading: isServiceLoading } = useServices();
+  const { data: organizationList, isLoading: isOrgLoading } =
+    useProjectAssignedOrganizations(selectedProject);
+  const { data: employees, isLoading: isEmployeeLoading } =
+    useEmployeeForTaskAssign(
+      selectedProject,
+      selectedService,
+      selectedOrganization
+    );
+
+  const dispatch = useDispatch();
+  const { loading, data: jobRoleData } = useMaster();
+
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
+
   const {
     handleSubmit,
     control,
@@ -114,133 +120,98 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     reset,
     trigger,
   } = useForm({
-    defaultValues: {
+    defaultValues: { selectedEmployees: [], description: "", plannedTask: "" },
-      selectedEmployees: [],
+    resolver: zodResolver(TaskSchema(maxPlanned)),
-      description: "",
-      plannedTask: "",
-    },
-    resolver: zodResolver(schema),
   });
 
   const handleCheckboxChange = (event, user) => {
-    const isChecked = event.target.checked;
+    const updatedSelectedEmployees = event.target.checked
-    let updatedSelectedEmployees = watch("selectedEmployees") || [];
+      ? [...(watch("selectedEmployees") || []), user.id].filter(
+          (v, i, a) => a.indexOf(v) === i
+        )
+      : (watch("selectedEmployees") || []).filter((id) => id !== user.id);
 
-    if (isChecked) {
-      if (!updatedSelectedEmployees.includes(user.id)) {
-        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
-      }
-    } else {
-      updatedSelectedEmployees = updatedSelectedEmployees?.filter(
-        (id) => id !== user.id
-      );
-    }
     setValue("selectedEmployees", updatedSelectedEmployees);
     trigger("selectedEmployees");
   };
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
-    // Initial state should reflect "All Roles" selected
     setSelectedRoles(["all"]);
   }, [dispatch]);
 
-  // Modified handleRoleChange to handle multiple selections
   const handleRoleChange = (event, roleId) => {
-    // If 'all' is selected, clear other selections
+    setSelectedRoles((prev) => {
-    if (roleId === "all") {
+      if (roleId === "all") return ["all"];
-      setSelectedRoles(["all"]);
+      const newRoles = prev.filter((r) => r !== "all");
-    } else {
+      return newRoles.includes(roleId)
-      setSelectedRoles((prevSelectedRoles) => {
+        ? newRoles.filter((r) => r !== roleId)
-        // If "all" was previously selected, remove it
+        : [...newRoles, roleId];
-        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 => {
+      setDisplayedSelection(
-        const role = jobRoleData?.find(r => String(r.id) === roleId);
+        selectedRoles
-        return role ? role.name : '';
+          .map((id) => jobRoleData?.find((r) => String(r.id) === id)?.name)
-      }).filter(Boolean); // Filter out empty strings for roles not found
+          .filter(Boolean)
-      setDisplayedSelection(selectedRoleNames.join(', '));
+          .join(", ")
-    } else {
+      );
-      setDisplayedSelection("Select Roles");
+    } else setDisplayedSelection("Select Roles");
-    }
   }, [selectedRoles, jobRoleData]);
 
+  const handleSearchChange = (e) => setSearchTerm(e.target.value);
 
-  const handleSearchChange = (event) => {
+  const filteredEmployees = employees?.data?.filter((emp) => {
-    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));
+      selectedRoles.includes("all") ||
-    // Convert both first and last names and job role name to lowercase for case-insensitive matching
+      selectedRoles.includes(String(emp.jobRoleId));
-    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 fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
-    const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
+    const jobRoleName =
-    return matchesRole && matchesSearch;
+      jobRoleData
+        ?.find((role) => role.id === emp.jobRoleId)
+        ?.name?.toLowerCase() || "";
+    return (
+      matchesRole &&
+      (fullName.includes(searchLower) || jobRoleName.includes(searchLower))
+    );
   });
 
-  // Determine unique job role IDs from the filtered employees (for dropdown options)
+  const jobRolesForDropdown = jobRoleData?.filter((role) =>
-  const uniqueJobRoleIdsInFilteredEmployees = new Set(
+    new Set(employees?.data?.map((emp) => emp.jobRoleId).filter(Boolean)).has(
-    employees?.map(emp => emp.jobRoleId).filter(Boolean)
+      role.id
+    )
   );
 
-  // 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
+    ? 0
     : selectedRoles.length;
 
   const onSubmit = (data) => {
-    const selectedEmployeeIds = data.selectedEmployees;
-
-    const taskTeamWithDetails = selectedEmployeeIds
-      ?.map((empId) => empId)
-      ?.filter(Boolean);
-    const formattedData = {
-      taskTeam: taskTeamWithDetails,
-      plannedTask: data.plannedTask,
-      description: data.description,
-      assignmentDate: new Date().toISOString(),
-      workItemId: assignData?.workItem.id,
-    };
     assignTask({
-      payload: formattedData,
+      payload: {
+        taskTeam: data.selectedEmployees.filter(Boolean),
+        plannedTask: data.plannedTask,
+        description: data.description,
+        assignmentDate: new Date().toISOString(),
+        workItemId: assignData?.workItem.id,
+      },
       workAreaId: assignData?.workArea?.id,
     });
   };
 
-  const closedModel = () => {
+  function closedModel() {
     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>
+      <p className="align-items-center flex-wrap m-0">Assign Task</p>
       <div className="container my-3">
         <div className="mb-1">
           <p className="mb-0">
@@ -252,7 +223,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 assignData?.workArea?.areaName,
                 assignData?.workItem?.activityMaster?.activityName,
               ]
-                .filter(Boolean) // Filter out any undefined/null values
+                .filter(Boolean)
                 .map((item, index, array) => (
                   <span key={index} className="d-flex align-items-center">
                     {item}
@@ -268,20 +239,64 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
             <div className="form-label text-start">
               <div className="row mb-1">
                 <div className="col-12">
-                  <div className="form-text text-start">
+                  <div className="row text-start">
+                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
+                      <div>
+                        <select
+                          className="form-select form-select-sm"
+                          value={selectedOrganization || ""}
+                          onChange={(e) =>
+                            setSelectedOrganization(e.target.value)
+                          }
+                        >
+                          {isServiceLoading ? (
+                            <option>Loading...</option>
+                          ) : (
+                            <>
+                              <option value="">--Select Organization--</option>
+                              {organizationList?.map((org,index) => (
+                                <option key={`${org.id}-${index}`} value={org.id}>
+                                  {org.name}
+                                </option>
+                              ))}
+                            </>
+                          )}
+                        </select>
+                      </div>
+                      <div>
+                        <select
+                          className="form-select form-select-sm"
+                          value={selectedService || ""}
+                          onChange={(e) => setSelectedService(e.target.value)}
+                        >
+                          {isOrgLoading ? (
+                            <option>Loading...</option>
+                          ) : (
+                            <>
+                              <option value="">--Select Service--</option>
+                              {serviceList?.data?.map((service,index) => (
+                                <option key={`${service.id}-${index}`}  value={service.id}>
+                                  {service.name}
+                                </option>
+                              ))}
+                            </>
+                          )}
+                        </select>
+                      </div>
+                    </div>
                     <div
-                      className="d-flex align-items-center form-text fs-7"
+                      className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
                       ref={dropdownRef}
                     >
-                      <span className="text-dark">Select Team</span>
-
                       {/* Dropdown */}
                       <div className="dropdown position-relative d-inline-block">
                         <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${
+                            selectedRoles.includes("all") ||
+                            selectedRoles.length === 0
                               ? "text-secondary"
                               : "text-primary"
-                            }`}
+                          }`}
                           onClick={() => setOpen(!open)}
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
@@ -290,7 +305,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         {/* Badge */}
                         {selectedRolesCount > 0 && (
                           <span
-                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
+                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
                             style={{
                               fontSize: "0.65rem",
                               minWidth: "18px",
@@ -320,7 +335,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                   id="checkboxAllRoles"
                                   value="all"
                                   checked={selectedRoles.includes("all")}
-                                  onChange={(e) => handleRoleChange(e, e.target.value)}
+                                  onChange={(e) =>
+                                    handleRoleChange(e, e.target.value)
+                                  }
                                 />
                                 <label
                                   className="form-check-label ms-2"
@@ -340,8 +357,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                     type="checkbox"
                                     id={`checkboxRole-${role.id}`}
                                     value={role.id}
-                                    checked={selectedRoles.includes(String(role.id))}
+                                    checked={selectedRoles.includes(
-                                    onChange={(e) => handleRoleChange(e, e.target.value)}
+                                      String(role.id)
+                                    )}
+                                    onChange={(e) =>
+                                      handleRoleChange(e, e.target.value)
+                                    }
                                   />
                                   <label
                                     className="form-check-label ms-2"
@@ -357,14 +378,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       </div>
 
                       {/* Search Box */}
-                      <input
+                      <div>
-                        type="text"
+                        <input
-                        className="form-control form-control-sm ms-auto mb-2 mt-2"
+                          type="text"
-                        placeholder="Search employees or roles..."
+                          className="form-control form-control-sm ms-auto mb-2 mt-2"
-                        value={searchTerm}
+                          placeholder="Search employees or roles..."
-                        onChange={handleSearchChange}
+                          value={searchTerm}
-                        style={{ maxWidth: "200px" }}
+                          onChange={handleSearchChange}
-                      />
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -381,19 +403,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               >
                 {selectedRoles?.length > 0 && (
                   <div className="row">
-                    {employeeLoading ? (
+                    {isEmployeeLoading ? (
                       <div className="col-12">
                         <p className="text-center">Loading employees...</p>
                       </div>
                     ) : filteredEmployees?.length > 0 ? (
-                      filteredEmployees.map((emp) => {
+                      filteredEmployees.map((emp,index) => {
                         const jobRole = jobRoleData?.find(
                           (role) => role?.id === emp?.jobRoleId
                         );
 
                         return (
                           <div
-                            key={emp.id}
+                            key={`${emp.index}-${index}`}
                             className="col-6 col-md-4 col-lg-3 mb-3"
                           >
                             <div className="form-check d-flex align-items-start">
@@ -441,7 +463,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 filter.
                         </p>
                       </div>
                     )}
@@ -456,12 +478,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {watch("selectedEmployees")?.length > 0 && (
                   <div className="mt-1">
                     <div className="text-start px-2">
-                      {watch("selectedEmployees")?.map((empId) => {
+                      {watch("selectedEmployees")?.map((empId,ind) => {
-                        const emp = employees.find((emp) => emp.id === empId);
+                        const emp = employees?.data?.find(
+                          (emp) => emp.id === empId
+                        );
                         return (
                           emp && (
                             <span
-                              key={empId}
+                               key={`${empId}-${ind}`}
                               className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                             >
                               {emp.firstName} {emp.lastName}
@@ -506,7 +530,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         {assignData?.workItem?.plannedWork -
                           assignData?.workItem?.completedWork}
                       </strong>{" "}
-                      <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                      <u>
+                        {
+                          assignData?.workItem?.activityMaster
+                            ?.unitOfMeasurement
+                        }
+                      </u>
                     </label>
                   </label>
                 </div>
@@ -537,8 +566,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           className="form-control form-control-sm"
                           {...field}
                         />
-                        <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
+                        <span
-                          <u>{assignData?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                          style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}
+                        >
+                          <u>
+                            {
+                              assignData?.workItem?.activityMaster
+                                ?.unitOfMeasurement
+                            }
+                          </u>
                         </span>
                       </div>
                     )}
@@ -546,19 +582,17 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 </div>
 
                 {errors.plannedTask && (
-                  <div className="danger-text mt-1">{errors.plannedTask.message}</div>
+                  <div className="danger-text mt-1">
+                    {errors.plannedTask.message}
+                  </div>
                 )}
               </div>
-
+              <Label
-              {/* <label
                 className="form-text fs-7 m-1 text-lg text-dark"
-                htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
+                htmlFor="descriptionTextarea"
+                required
               >
                 Description
-              </label> */}
-              <Label className="form-text fs-7 m-1 text-lg text-dark"
-                htmlFor="descriptionTextarea" required>
-                Description
               </Label>
               <Controller
                 name="description"
@@ -592,7 +626,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {isSubmitting ? "Please Wait" : "Submit"}
               </button>
             </div>
-
           </form>
         </div>
       </div>

src/hooks/useProjects.js

@@ -308,6 +308,14 @@ export const useProjectAssignedServices = (projectId) => {
   });
 };
 
+
+export const useEmployeeForTaskAssign = (projectId,serviceId,organizationId)=>{
+   return useQuery({
+    queryKey:["EmployeeForTaskAssign",projectId,serviceId,organizationId],
+    queryFn:async()=> await ProjectRepository.getEmployeeForTaskAssign(projectId,serviceId,organizationId)
+   })
+}
+
 // -- -------------Mutation-------------------------------
 
 export const useCreateProject = ({ onSuccessCallback }) => {

src/repositories/ProjectRepository.jsx

@@ -82,6 +82,19 @@ const ProjectRepository = {
     api.get(`/api/Project/get/assigned/services/${projectId}`),
   getProjectAssignedOrganizations: (projectId) =>
     api.get(`/api/Project/get/assigned/organization/${projectId}`),
+
+  getEmployeeForTaskAssign: (projectId, serviceId, organizationId) => {
+    let url = `/api/Project/get/task/team/${projectId}`;
+
+    const params = [];
+    if (serviceId) params.push(`serviceId=${serviceId}`);
+    if (organizationId) params.push(`organizationId=${organizationId}`);
+
+    if (params.length > 0) {
+      url += `?${params.join("&")}`;
+    }
+    return api.get(url);
+  },
 };
 
 export const TasksRepository = {