src/components/Project/AssignRole.jsx

@@ -34,11 +34,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   const [selectedRole, setSelectedRole] = useState("all");
   const [selectedEmployees, setSelectedEmployees] = useState([]);
 
-
+  const {
-const { handleSubmit, control, setValue, watch, formState: { errors },reset } = useForm({
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm({
     defaultValues: {
       selectedEmployees: [],
-    description:""
+      description: "",
     },
     resolver: (data) => {
       const validation = schema.safeParse(data);
@@ -78,62 +84,51 @@ const { handleSubmit, control, setValue, watch, formState: { errors },reset } =
     });
   };
 
-
   const onSubmit = async (data) => {
     const formattedData = {
       taskTeam: data.selectedEmployees,
       plannedTask: parseInt(plannedTask, 10),
       description: data.description,
       assignmentDate: new Date().toISOString(),
-    workItemId:assignData?.workItem?.workItem.id
+      workItemId: assignData?.workItem?.workItem.id,
     };
-  try
+    try {
-  {
       let response = await TasksRepository.assignTask(formattedData);
-    showToast( "Task Successfully Assigend", "success" )
+      showToast( "Task Successfully Assigend", "success" );
-    reset()
+      setSelectedEmployees([])
-    onClose()
+      reset();
-  } catch ( error )
+    closeModal()
-  {
-    showToast("something wrong","error")
 
+    } catch (error) {
+      showToast("something wrong", "error");
     }
-
   };
   useEffect(() => {
-  dispatch(changeMaster("Job Role"))
+    dispatch(changeMaster("Job Role"));
-  return ()=> setSelectedRole("all")
+    return () => setSelectedRole("all");
-},[dispatch])
+  }, [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>
               ))}
-          </div>
+          </p>
 
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="row mb-1">
@@ -166,6 +161,9 @@ useEffect(()=>{
             <div className="divider text-start">
               <div className="divider-text">Employee</div>
             </div>
+
+            <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">
@@ -178,7 +176,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 +198,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,6 +231,8 @@ 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">
@@ -233,7 +242,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 +265,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 +286,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 +311,7 @@ useEffect(()=>{
                   {...field}
                   className="form-control"
                   id="exampleFormControlTextarea1"
-                  rows="3"
+                  rows="2"
                 />
               )}
             />

src/components/Project/Infrastructure/WorkItem.jsx

@@ -161,6 +161,12 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 {" "}
                 <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

@@ -53,9 +53,9 @@ const GlobalModel = ({
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass}`} role={role}>
+      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role}>
         <div className="modal-content">
-          <div className="modal-header">
+          <div className="modal-header p-0">
             {/* 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">
+          <div className="modal-body  p-sm-4 p-0">
             {children}  {/* Render children here, which can be the ReportTask component */}
           </div>
         </div>