add required validation for plannedTask using Zod schema

src/components/Project/AssignRole.jsx

@@ -17,6 +17,16 @@ const schema = z.object({
     .array(z.number())
     .min(1, { message: "At least one employee must be selected" }),
   description: z.string().min(1, { message: "description required" }),
+  plannedTask: z.preprocess(
+    (val) => parseInt(val, 10),
+    z
+      .number({
+        required_error: "Planned task is required",
+        invalid_type_error: "Planned task must be a number",
+      })
+      .int()
+      .positive({ message: "Planned task must be a positive number" })
+  ),
 });
 
 const AssignRoleModel = ({ assignData, onClose }) => {
@@ -45,6 +55,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     defaultValues: {
       selectedEmployees: [],
       description: "",
+      plannedTask: "",
     },
     resolver: (data) => {
       const validation = schema.safeParse(data);
@@ -53,20 +64,16 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     },
   });
 
-  const handleRoleChange = ( event ) =>
+  const handleRoleChange = (event) => {
-  {
+    reset();
-    reset()
+    setSelectedEmployees([]);
-    setSelectedEmployees( [] )
     setSelectedRole(event.target.value);
   };
 
   const filteredEmployees =
     selectedRole === "all"
       ? employees
-      : employees.filter((emp) =>
+      : employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
-        String(emp.jobRoleId || "") === selectedRole
-    );
-    
 
   const handleEmployeeSelection = (employeeId, field) => {
     setSelectedEmployees((prevSelected) => {
@@ -92,15 +99,16 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   const onSubmit = async (data) => {
     const formattedData = {
       taskTeam: data.selectedEmployees,
-      plannedTask: parseInt(plannedTask, 10),
+      plannedTask: data.plannedTask,
       description: data.description,
       assignmentDate: new Date().toISOString(),
       workItemId: assignData?.workItem?.workItem.id,
     };
     try {
       let response = await TasksRepository.assignTask(formattedData);
-      showToast( "Task Successfully Assigend", "success" );
+      showToast("Task Successfully Assigend", "success");
-      setSelectedEmployees([])
+      setSelectedEmployees([]);
+      
       reset();
       onClose();
     } catch (error) {
@@ -176,7 +184,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                 <div className="divider text-start">
                   <div className="divider-text">Employee</div>
                 </div>
-            {( filteredEmployees?.length === 0 && employees ) && <div>No employees found</div>}
+                {filteredEmployees?.length === 0 && employees && (
+                  <div>No employees found</div>
+                )}
 
                 <div className="row">
                   <div className="col-12 col-md-8 h-sm-25 overflow-auto">
@@ -206,9 +216,14 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                             type="checkbox"
                                             id={`employee-${emp?.id}`}
                                             value={emp.id}
-                                    checked={field.value.includes(emp.id)} 
+                                            checked={field.value.includes(
+                                              emp.id
+                                            )}
                                             onChange={() => {
-                                      handleEmployeeSelection(emp.id, field);
+                                              handleEmployeeSelection(
+                                                emp.id,
+                                                field
+                                              );
                                             }}
                                           />
                                         )}
@@ -235,7 +250,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                           )}
                                           {data &&
                                             !loading &&
-                                    (jobRole ? jobRole.name : "Unknown Role")}
+                                            (jobRole
+                                              ? jobRole.name
+                                              : "Unknown Role")}
                                         </small>
                                       </div>
                                     </div>
@@ -248,13 +265,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                       </div>
                     )}
                   </div>
-              <div className="col-12 col-md-4 h-25 overflow-auto" style={{maxHeight:"200px"}}>
+                  <div
-                
+                    className="col-12 col-md-4 h-25 overflow-auto"
+                    style={{ maxHeight: "200px" }}
+                  >
                     {selectedEmployees.length > 0 && (
                       <div className="mt-1">
                         <div className="text-start px-2">
                           {selectedEmployees.map((empId) => {
-                    const emp = employees.find((emp) => emp.id === empId);
+                            const emp = employees.find(
+                              (emp) => emp.id === empId
+                            );
                             return (
                               <span
                                 key={empId}
@@ -269,7 +290,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                     removeEmployee(empId);
                                     setValue(
                                       "selectedEmployees",
-                              selectedEmployees.filter((id) => id !== empId)
+                                      selectedEmployees.filter(
+                                        (id) => id !== empId
+                                      )
                                     );
                                   }}
                                 >
@@ -284,14 +307,15 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                   </div>
                 </div>
 
-
-
                 <div className="col-md text-start mx-0 px-0">
                   <div className="form-check form-check-inline mt-4 px-1">
                     <label className="form-text fs-6" for="inlineCheckbox1">
                       Pending Work
                     </label>
-                <label className="form-check-label ms-2" for="inlineCheckbox1">
+                    <label
+                      className="form-check-label ms-2"
+                      for="inlineCheckbox1"
+                    >
                       {assignData?.workItem?.workItem?.plannedWork -
                         assignData?.workItem?.workItem?.completedWork}
                     </label>
@@ -300,16 +324,25 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                     <label for="defaultFormControlInput" className="form-label">
                       Target
                     </label>
+                    <Controller
+                      name="plannedTask"
+                      control={control}
+                      render={({ field }) => (
                         <input
                           type="text"
                           className="form-control form-control-xs"
-                  value={plannedTask}
+                          {...field}
-                  onChange={(e) => setPlannedTask(e.target.value)}
                           id="defaultFormControlInput"
                           aria-describedby="defaultFormControlHelp"
                         />
+                      )}
+                    />
                   </div>
+                  {errors.plannedTask && (
+                    <div className="danger-text mt-1">{errors.plannedTask}</div>
+                  )}
                 </div>
+
                 {errors.selectedEmployees && (
                   <div className="danger-text mt-1">
                     <p>{errors.selectedEmployees[0]}</p>