src/components/Project/AssignRole.jsx

@@ -34,18 +34,24 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   const [selectedRole, setSelectedRole] = useState("all");
   const [selectedEmployees, setSelectedEmployees] = useState([]);
 
-
+  const {
-const { handleSubmit, control, setValue, watch, formState: { errors },reset } = useForm({
+    handleSubmit,
-  defaultValues: {
+    control,
-    selectedEmployees: [],
+    setValue,
-    description:""
+    watch,
-  },
+    formState: { errors },
-  resolver: (data) => {
+    reset,
-    const validation = schema.safeParse(data);
+  } = useForm({
-    if (validation.success) return { values: data, errors: {} };
+    defaultValues: {
-    return { values: {}, errors: validation.error.formErrors.fieldErrors };
+      selectedEmployees: [],
-  },
+      description: "",
-});
+    },
+    resolver: (data) => {
+      const validation = schema.safeParse(data);
+      if (validation.success) return { values: data, errors: {} };
+      return { values: {}, errors: validation.error.formErrors.fieldErrors };
+    },
+  });
 
   const handleRoleChange = (event) => {
     setSelectedRole(event.plannedTask.value);
@@ -78,62 +84,49 @@ const { handleSubmit, control, setValue, watch, formState: { errors },reset } =
     });
   };
 
-
+  const onSubmit = async (data) => {
-const onSubmit = async(data) => {
+    const formattedData = {
-  const formattedData = {
+      taskTeam: data.selectedEmployees,
-    taskTeam: data.selectedEmployees, 
+      plannedTask: parseInt(plannedTask, 10),
-    plannedTask: parseInt( plannedTask, 10 ),
+      description: data.description,
-    description: data.description,
+      assignmentDate: new Date().toISOString(),
-    assignmentDate: new Date().toISOString(),
+      workItemId: assignData?.workItem?.workItem.id,
-    workItemId:assignData?.workItem?.workItem.id
+    };
+    try {
+      let response = await TasksRepository.assignTask(formattedData);
+      showToast("Task Successfully Assigend", "success");
+      reset();
+      onClose();
+    } catch (error) {
+      showToast("something wrong", "error");
+    }
   };
-  try
+  useEffect(() => {
-  {
+    dispatch(changeMaster("Job Role"));
-    let response = await TasksRepository.assignTask( formattedData );
+    return () => setSelectedRole("all");
-    showToast( "Task Successfully Assigend", "success" )
+  }, [dispatch]);
-    reset()
-    onClose()
-  } catch ( error )
-  {
-    showToast("something wrong","error")
-    
-  }
-
-};
-useEffect(()=>{
-  dispatch(changeMaster("Job Role"))
-  return ()=> setSelectedRole("all")
-},[dispatch])
-
 
   return (
     <>
       <div className="container my-1">
-        <div className="mb-2">
+        <div className="mb-">
-          <div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap">
+          <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
             {[
               assignData?.building?.name,
               assignData?.floor?.floorName,
               assignData?.workArea?.areaName,
               assignData?.workItem?.workItem?.activityMaster?.activityName,
-            ].map((item, index, array) => (
+            ]
-              <div
+              .filter(Boolean)
-                key={index}
+              .map((item, index, array) => (
-                className="col d-flex justify-content-center align-items-center"
+                <span key={index} className="d-flex align-items-center">
-              >
+                  {item}
-                <div className="bs-stepper-header p-1 text-center">
-                  <span className="fs-5">{item}</span>
-
-                  {/* Arrow between items */}
                   {index < array.length - 1 && (
-                    <div className="line">
+                    <i className="bx bx-chevron-right mx-2"></i>
-                      <i className="icon-base bx bx-chevron-right scaleX-n1-rtl"></i>
-                    </div>
                   )}
-                </div>
+                </span>
-              </div>
+              ))}
-            ))}
+          </p>
-          </div>
 
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="row mb-1">
@@ -166,7 +159,10 @@ useEffect(()=>{
             <div className="divider text-start">
               <div className="divider-text">Employee</div>
             </div>
-            {selectedRole !== "" && (
+
+            <div className="row">
+              <div className="col-12 col-md-8 h-sm-25 overflow-auto">
+              {selectedRole !== "" && (
               <div className="row mb-2">
                 <div className="col-sm-12">
                   <div className="row">
@@ -178,7 +174,7 @@ useEffect(()=>{
                       return (
                         <div
                           key={emp.id}
-                          className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1"
+                            className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
                         >
                           <div className="form-check text-start p-0">
                             <div className="li-wrapper d-flex justify-content-start align-items-start">
@@ -200,10 +196,19 @@ useEffect(()=>{
                                 )}
                               />
                               <div className="list-content">
-                                <h6 className="mb-0">
+                                <p
+                                  className=" mb-0"
+                                  style={{
+                                    fontSize: "12px",
+                                    fontWeight: "bolder",
+                                  }}
+                                >
                                   {emp.firstName} {emp.lastName}
-                                </h6>
+                                </p>
-                                <small className="text-muted">
+                                <small
+                                  className="lead"
+                                  style={{ fontSize: "10px" }}
+                                >
                                   {loading && (
                                     <p
                                       className="skeleton para"
@@ -224,7 +229,9 @@ useEffect(()=>{
                 </div>
               </div>
             )}
-
+              </div>
+              <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">
@@ -233,7 +240,7 @@ useEffect(()=>{
                     return (
                       <span
                         key={empId}
-                        className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2"
+                        className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
                       >
                         {emp.firstName} {emp.lastName}
                         <p
@@ -256,6 +263,10 @@ useEffect(()=>{
                 </div>
               </div>
             )}
+              </div>
+            </div>
+         
+
 
             <div className="col-md text-start mx-0 px-0">
               <div className="form-check form-check-inline mt-4 px-1">
@@ -273,7 +284,7 @@ useEffect(()=>{
                 </label>
                 <input
                   type="text"
-                  className="form-control form-control-sm "
+                  className="form-control form-control-xs"
                   value={plannedTask}
                   onChange={(e) => setPlannedTask(e.target.value)}
                   id="defaultFormControlInput"
@@ -298,7 +309,7 @@ useEffect(()=>{
                   {...field}
                   className="form-control"
                   id="exampleFormControlTextarea1"
-                  rows="3"
+                  rows="2"
                 />
               )}
             />