src/components/Project/AssignRole.jsx

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

src/components/Project/Infrastructure/WorkItem.jsx

@@ -159,14 +159,8 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               </a>
               <a className="dropdown-item">
                 {" "}
-                <i className="bx bx-trash me-1 text-danger" ></i>Delete
+                <i className="bx bx-trash me-1 text-danger"></i>Delete
               </a>
-              {!projectId && ( <a className="dropdown-item"  data-bs-toggle="modal"
-                data-bs-target="#project-modal"
-                onClick={openModal}>
-                {" "}
-                <i className="bx bx-task me-1 text-info" ></i>Assign
-              </a> )}
             </div>
           </div>
         </td>

src/components/common/GlobalModel.jsx

@@ -45,7 +45,7 @@ const GlobalModel = ({
 
   return (
     <div
-      className={`modal fade ${ modalType }`} 
+      className={`modal fade ${modalType}`} 
       id="customModal"
       tabIndex="-1"
       aria-labelledby="exampleModalLabel"
@@ -53,9 +53,9 @@ const GlobalModel = ({
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role}>
+      <div className={`modal-dialog ${dialogClass} ${modalSizeClass}`} role={role}>
         <div className="modal-content">
-          <div className="modal-header p-0">
+          <div className="modal-header">
             {/* Close button inside the modal header */}
             <button
               type="button"
@@ -65,7 +65,7 @@ const GlobalModel = ({
               onClick={closeModal}  // Trigger the React closeModal function
             ></button>
           </div>
-          <div className="modal-body  p-sm-4 p-0">
+          <div className="modal-body">
             {children}  {/* Render children here, which can be the ReportTask component */}
           </div>
         </div>