enhance modal handling by adding onClose prop to TaskModel and WorkAreaModel components

src/components/Project/Infrastructure/TaskModel.jsx

@@ -26,7 +26,7 @@ const TaskModel = ({
   activities,
   onSubmit,
   clearTrigger,
-  onClearComplete,
+  onClearComplete,onClose
 }) => {
   const [formData, setFormData] = useState(defaultModel);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
@@ -124,12 +124,7 @@ const TaskModel = ({
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button
+          <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
-              type="button"
-              className="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Task</h5>
             </div>
@@ -290,10 +285,9 @@ const TaskModel = ({
                   {formData.id !== "0" && formData.id !== "" ? "Edit Task" : "Add Task"}
                 </button>
                 <button
-                  type="reset"
+                  type="button"
                   className="btn btn-label-secondary"
-                  data-bs-dismiss="modal"
+                  onClick={onClose}
-                  aria-label="Close"
                 >
                   Cancel
                 </button>

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -19,7 +19,7 @@ const defaultModel = {
   floorId: "0",
 };
 
-const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete }) => {
+const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete, onClose }) => {
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [ selectedFloor, setSelectedFloor ] = useState( null );
   const [selectdWorkArea,setWorkArea] = useState()
@@ -111,7 +111,7 @@ const WorkAreaModel = ({ project, onSubmit, clearTrigger, onClearComplete }) =>
       <div className="modal-content">
         <div className="modal-body">
           <div className="row">
-            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" className="btn-close" aria-label="Close" onClick={onClose}/>
             <div className="text-center mb-1">
               <h5 className="mb-1">Manage Work Area</h5>
             </div>

src/components/Project/ProjectInfra.jsx

@@ -383,10 +383,12 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
 
       {isWorkAreaModelOpen && (
         <div
-          className={`modal fade `}
+          className="modal fade show"
           id="work-area-model"
           tabIndex="-1"
-          aria-hidden="true"
+          role="dialog"
+          style={{ display: 'block' }}
+          aria-hidden="false"
         >
           <WorkAreaModel
             project={data}
@@ -395,16 +397,18 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
             onSubmit={handleWorkAreaModelFormSubmit}
             clearTrigger={clearFormTrigger}
             onClearComplete={() => setClearFormTrigger(false)}
-          ></WorkAreaModel>
+          />
         </div>
       )}
 
       {isTaskModelOpen && (
         <div
-          className={`modal fade `}
+          className="modal fade show"
           id="task-model"
           tabIndex="-1"
-          aria-hidden="true"
+          role="dialog"
+          style={{ display: 'block' }}
+          aria-hidden="false"
         >
           <TaskModel
             project={data}
@@ -413,7 +417,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
             onSubmit={handleTaskModelFormSubmit}
             clearTrigger={clearFormTrigger}
             onClearComplete={() => setClearFormTrigger(false)}
-          ></TaskModel>
+          />
         </div>
       )}
 
@@ -450,9 +454,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
 
                   <button
                     type="button"
-                    data-bs-toggle="modal"
                     className="link-button m-1"
-                    data-bs-target="#work-area-model"
                     onClick={() => openWorkAreaModel()}
                   >
                     <i className="bx bx-plus-circle me-2"></i>
@@ -460,9 +462,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
                   </button>
                   <button
                     type="button"
-                    data-bs-toggle="modal"
                     className="link-button m-1"
-                    data-bs-target="#task-model"
                     onClick={() => openTaskModel()}
                   >
                     <i className="bx bx-plus-circle me-2"></i>