Safe jobRoleId filter in AssignRoleModel and ensure onClose works in form submit

src/components/Project/AssignRole.jsx

@@ -53,16 +53,21 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     },
   });
 
-  const handleRoleChange = (event) => {
-    setSelectedRole(event.plannedTask.value);
+  const handleRoleChange = ( event ) =>
+  {
+    reset()
+    setSelectedEmployees( [] )
+    setSelectedRole(event.target.value);
   };
 
   const filteredEmployees =
     selectedRole === "all"
       ? employees
-      : employees.filter((emp) => emp.JobRoleId.toString() === selectedRole);
+      : employees.filter((emp) =>
+        String(emp.jobRoleId || "") === selectedRole
+    );
+    
 
-  // not need currently for this fun
   const handleEmployeeSelection = (employeeId, field) => {
     setSelectedEmployees((prevSelected) => {
       let updatedSelection;
@@ -97,8 +102,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
       showToast( "Task Successfully Assigend", "success" );
       setSelectedEmployees([])
       reset();
-    closeModal()
-
+      onClose(); 
     } catch (error) {
       showToast("something wrong", "error");
     }
@@ -109,7 +113,18 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   }, [dispatch]);
 
   return (
-    <>
+      <div
+      className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
+      role="document"
+    >
+      <div className="modal-content">
+        <div className="modal-body p-sm-4 p-0">
+          <button
+            type="button"
+            className="btn-close"
+            onClick={onClose}
+            aria-label="Close"
+          ></button>
       <div className="container my-1">
         <div className="mb-">
           <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
@@ -161,16 +176,17 @@ 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>}
+           
             <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">
-                    {filteredEmployees.map((emp) => {
+                      <div className="row">
+                    {filteredEmployees?.map((emp) => {
                       const jobRole = jobRoleData?.find(
-                        (role) => role.id === emp.jobRoleId
+                        (role) => role?.id === emp?.jobRoleId
                       );
 
                       return (
@@ -188,9 +204,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                     {...field}
                                     className="form-check-input mx-2"
                                     type="checkbox"
-                                    id={`employee-${emp.id}`}
+                                    id={`employee-${emp?.id}`}
                                     value={emp.id}
-                                    checked={field.value.includes(emp.id)} // Ensure the checkbox reflects the current form state
+                                    checked={field.value.includes(emp.id)} 
                                     onChange={() => {
                                       handleEmployeeSelection(emp.id, field);
                                     }}
@@ -326,15 +342,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                 className="btn btn-sm btn-label-secondary"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-                onClick={closeModal}
+                onClick={onClose}
               >
                 Cancel
               </button>
             </div>
           </form>
         </div>
-      </div>
-    </>
+            </div>
+          </div>
+        </div>
+        </div>
   );
 };
 export default AssignRoleModel;