From cee8f23fd92a8acf2a20ff3fc9f6b5a539516cbf Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Tue, 8 Apr 2025 11:16:29 +0530
Subject: [PATCH 1/2]  enhance modal handling by adding onClose prop to
 TaskModel and WorkAreaModel components

---
 .../Project/Infrastructure/TaskModel.jsx      |  14 +-
 .../Project/Infrastructure/WorkAreaModel.jsx  |   4 +-
 src/components/Project/ProjectInfra.jsx       | 306 +++++++++---------
 3 files changed, 159 insertions(+), 165 deletions(-)

diff --git a/src/components/Project/Infrastructure/TaskModel.jsx b/src/components/Project/Infrastructure/TaskModel.jsx
index c63e4fe5..2b40771a 100644
--- a/src/components/Project/Infrastructure/TaskModel.jsx
+++ b/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
-              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 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"
-                  aria-label="Close"
+                  onClick={onClose}
                 >
                   Cancel
                 </button>
diff --git a/src/components/Project/Infrastructure/WorkAreaModel.jsx b/src/components/Project/Infrastructure/WorkAreaModel.jsx
index 05a65612..7dae3403 100644
--- a/src/components/Project/Infrastructure/WorkAreaModel.jsx
+++ b/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>
diff --git a/src/components/Project/ProjectInfra.jsx b/src/components/Project/ProjectInfra.jsx
index f85e91db..21ad8f30 100644
--- a/src/components/Project/ProjectInfra.jsx
+++ b/src/components/Project/ProjectInfra.jsx
@@ -44,14 +44,14 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
   };
   const closeFloorModel = () => {
     setIsFloorModalOpen(false);
-    
+
   };
- 
+
   const openAssignModel=(assignData)=>{
-    
-      setCurrentBuilding(assignData)
-      setIsAssingRoleModal(true)
-     
+
+    setCurrentBuilding(assignData)
+    setIsAssingRoleModal(true)
+
   }
 
 
@@ -60,134 +60,134 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
   const openBuildingModel = (projectData) => {
     setIsBuildingModalOpen(true);
   };
- 
 
- 
+
+
   const submitData = async (infraObject) => {
- 
+
     try
     {
       console.log(infraObject)
       let response = await ProjectRepository.manageProjectInfra( infraObject );      
       const entity = response.data;
 
-     const updatedProject = { ...project };
-     // Handle the building data
-    if (entity.building) {
-      const { id, name, description } = entity.building;
-      const updatedBuildings = updatedProject.buildings.map((building) =>
-        building.id === id
-          ? { ...building, name, description }
-          : building
-      );
-  
-      // Add building if it doesn't exist
-      if (!updatedProject.buildings.some((building) => building.id === id)) {
-        updatedBuildings.push({
-          id: id,
-          name,
-          description,
-          floor: [],
-        });
-      }
-  
-      updatedProject.buildings = updatedBuildings;
-  
-      // Update the cache for buildings
+      const updatedProject = { ...project };
+      // Handle the building data
+      if (entity.building) {
+        const { id, name, description } = entity.building;
+        const updatedBuildings = updatedProject.buildings.map((building) =>
+          building.id === id
+            ? { ...building, name, description }
+            : building
+        );
+
+        // Add building if it doesn't exist
+        if (!updatedProject.buildings.some((building) => building.id === id)) {
+          updatedBuildings.push({
+            id: id,
+            name,
+            description,
+            floor: [],
+          });
+        }
+
+        updatedProject.buildings = updatedBuildings;
+
+        // Update the cache for buildings
       cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
-      setProject(updatedProject)
-    }
-    // Handle the floor data
+        setProject(updatedProject)
+      }
+      // Handle the floor data
     else if ( entity.floor )
     {
-      const { buildingId, id, floorName } = entity.floor;
-      const updatedBuildings = updatedProject.buildings.map((building) =>
-        building.id == buildingId
-          ? {
+        const { buildingId, id, floorName } = entity.floor;
+        const updatedBuildings = updatedProject.buildings.map((building) =>
+          building.id == buildingId
+            ? {
               ...building,
             floors: building.floors.map( ( floor ) =>
-               
+
                 floor.id === id
                   ? {
-                      ...floor,
-                      floorName, // Update the floor name only
-                      // Keep other properties as they are (including workArea)
-                    }
+                    ...floor,
+                    floorName, // Update the floor name only
+                    // Keep other properties as they are (including workArea)
+                  }
                   : floor
               )
-              // Add the new floor if it doesn't already exist
-              .concat(
-                !building.floors.some((floor) => floor.id === id)
-                  ? [{ id: id, floorName, workArea: null }] // New floor added with workArea set to null
-                  : []
-              ),
+                // Add the new floor if it doesn't already exist
+                .concat(
+                  !building.floors.some((floor) => floor.id === id)
+                    ? [{ id: id, floorName, workArea: null }] // New floor added with workArea set to null
+                    : []
+                ),
             }
-          : building
-      );
-    
-      updatedProject.buildings = updatedBuildings;
-    
-      // Cache the updated project
+            : building
+        );
+
+        updatedProject.buildings = updatedBuildings;
+
+        // Cache the updated project
       cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
-      setProject(updatedProject)
-    }
-    // Handle the work area data
+        setProject(updatedProject)
+      }
+      // Handle the work area data
     else if ( entity.workArea )
     {  
-      
 
-      let buildingId = infraObject[0].workArea.buildingId
 
-      const { floorId, areaName, id } = entity.workArea;
-         // Check if the workArea exists, otherwise create a new one
-          const updatedBuildings = updatedProject.buildings.map((building) =>
+        let buildingId = infraObject[0].workArea.buildingId
+
+        const { floorId, areaName, id } = entity.workArea;
+        // Check if the workArea exists, otherwise create a new one
+        const updatedBuildings = updatedProject.buildings.map((building) =>
           building.id == buildingId
-             ? {
-                 ...building,
-                 floors: building.floors.map((floor) =>
-                  floor.id == floorId
-                    ? {
-                      ...floor,
-                       workAreas: floor.workAreas.some((workArea) => workArea.id === id)
+            ? {
+              ...building,
+              floors: building.floors.map((floor) =>
+                floor.id == floorId
+                  ? {
+                    ...floor,
+                    workAreas: floor.workAreas.some((workArea) => workArea.id === id)
                       ? floor.workAreas.map((workArea) =>
                         workArea.id === id
-                        ? { ...workArea, areaName }
-                        : workArea
-                     )
-                    : [
-                      ...floor.workAreas,
-                      { id, areaName, workItems: null },
-                    ],
+                          ? { ...workArea, areaName }
+                          : workArea
+                      )
+                      : [
+                        ...floor.workAreas,
+                        { id, areaName, workItems: null },
+                      ],
                   }
-            : floor
-         ),
-       }
-     : building
-    );
+                  : floor
+              ),
+            }
+            : building
+        );
 
-    updatedProject.buildings = updatedBuildings;
+        updatedProject.buildings = updatedBuildings;
 
- // Update the cache for work areas
+        // Update the cache for work areas
       cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
-      setProject(updatedProject)
-    }
-    // Handle the task (workItem) data
+        setProject(updatedProject)
+      }
+      // Handle the task (workItem) data
 
-    else {
-      console.error("Unsupported data type for submitData", entity);
-    }
+      else {
+        console.error("Unsupported data type for submitData", entity);
+      }
     } catch ( Err )
     {
       showToast("Somthing wrong","error")
     }
-  
 
-   
-    
+
+
+
     handleClose()
   };
-  
-  
+
+
   const closeBuildingModel = () => {
     setIsBuildingModalOpen(false);
   };
@@ -256,37 +256,37 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
         showToast("Details updated successfully.", "success");
         // setClearFormTrigger( true ); 
 
-        
+
         if (response?.data[0]) {
           const { workItemId,workItem} = response.data[0];
           const updatedBuildings = updatedProject.buildings.map((building) =>
             building.id == updatedModel.buildingID
               ? {
-                  ...building,
-                  floors: building.floors.map((floor) =>
-                    floor.id == updatedModel.floorId
-                      ? {
-                          ...floor,
-                          workAreas: floor.workAreas.map((workArea) =>
-                            workArea.id === workItem?.workAreaId
-                              ? {
-                                  ...workArea,
-                                  workItems: workArea.workItems.some((existingItem) => existingItem.workItemId === workItem.workItemId)
-                                  ? workArea.workItems  // If the workItemId already exists, keep the current workItems
-                                  : [...workArea.workItems, workItem],
-                                }
-                              : workArea
-                          ),
-                        }
-                      : floor
-                  ),
-                }
+                ...building,
+                floors: building.floors.map((floor) =>
+                  floor.id == updatedModel.floorId
+                    ? {
+                      ...floor,
+                      workAreas: floor.workAreas.map((workArea) =>
+                        workArea.id === workItem?.workAreaId
+                          ? {
+                            ...workArea,
+                            workItems: workArea.workItems.some((existingItem) => existingItem.workItemId === workItem.workItemId)
+                              ? workArea.workItems  // If the workItemId already exists, keep the current workItems
+                              : [...workArea.workItems, workItem],
+                          }
+                          : workArea
+                      ),
+                    }
+                    : floor
+                ),
+              }
               : building
           );
-      
+
           updatedProject.buildings = updatedBuildings;
-      
-        
+
+
           cacheData( "projectInfo", {projectId: updatedProject.id, data: updatedProject} );
           setProject(updatedProject)
         }
@@ -320,18 +320,18 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
     modal.show()
   };
   const closeModal = () => {
-    setIsModalOpen(false); 
+    setIsModalOpen(false);
     setModalConfig(null)
-  
-    
+
+
     const modalElement = document.getElementById('building-model');
     if (modalElement) {
       modalElement.classList.remove('show'); // Remove modal visibility class
       modalElement.style.display = 'none'; // Hide the modal element
     }
-  
+
     document.body.classList.remove('modal-open'); // Remove modal-open class from body
-  
+
     // Remove the modal backdrop
     const backdropElement = document.querySelector('.modal-backdrop');
     if (backdropElement) {
@@ -339,7 +339,7 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
       backdropElement.style.display = 'none'; // Hide the backdrop element
     }
     document.body.style.overflow = 'auto';
-   
+
   };
 
   const handleShow = () => setShowModal(true);
@@ -347,21 +347,21 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
 
   return (
     <>
-        <div
+      <div
         className={`modal fade ${showModal ? 'show' : ''}`}
         tabIndex="-1"
         role="dialog"
         style={{ display: showModal ? 'block' : 'none' }}
         aria-hidden={!showModal}
       >
-          <BuildingModel
-            project={data}
-            onClose={handleClose}
-            onSubmit={handleBuildingModelFormSubmit}
-            clearTrigger={clearFormTrigger}
-            onClearComplete={() => setClearFormTrigger(false)}
-          ></BuildingModel>
-        </div>
+        <BuildingModel
+          project={data}
+          onClose={handleClose}
+          onSubmit={handleBuildingModelFormSubmit}
+          clearTrigger={clearFormTrigger}
+          onClearComplete={() => setClearFormTrigger(false)}
+        ></BuildingModel>
+      </div>
       {isFloorModalOpen && (
         <div
           className="modal fade show"
@@ -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,11 +417,11 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
             onSubmit={handleTaskModelFormSubmit}
             clearTrigger={clearFormTrigger}
             onClearComplete={() => setClearFormTrigger(false)}
-          ></TaskModel>
+          />
         </div>
       )}
 
-         
+
       {isModalOpen && (
         <ProjectModal modalConfig={modalConfig} closeModal={closeModal}  />
       )}
@@ -432,27 +436,25 @@ const ProjectInfra = ({ data, activityMaster, onDataChange,eachSiteEngineer }) =
                   <button
                     type="button"
                     className="link-button link-button-sm m-1 "
-               
+
                     onClick={handleShow}
                   >
                     <i className="bx bx-plus-circle me-2"></i>
                     Manage Building
                   </button>
                   <button
-  type="button"
-  className="link-button m-1"
-  onClick={() => openFloorModel()}
->
-  <i className="bx bx-plus-circle me-2"></i>
-  Manage Floors
-</button>
+                    type="button"
+                    className="link-button m-1"
+                    onClick={() => openFloorModel()}
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    Manage Floors
+                  </button>
 
 
                   <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>

From 085176c593c53c5b21c963c53285eaf01acdd4f3 Mon Sep 17 00:00:00 2001
From: Vaibhav Surve <vaibhav.surve@marcoaiot.com>
Date: Tue, 8 Apr 2025 11:50:41 +0530
Subject: [PATCH 2/2] update "Not Data Found" message to "No Data Found" with
 improved styling

---
 src/pages/employee/EmployeeList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 31a83c27..e76c3c63 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -325,7 +325,7 @@ const EmployeeList = () =>
                           <p>Loading...</p>
                         </td>
                       </tr>}
-                    {( !loading && employeeList?.length === 0 ) && <td colSpan={8}>Not Data Found </td>}
+                    {!loading && employeeList?.length === 0 && (<td colSpan={8} style={{ paddingTop: '20px', textAlign: 'center' }}>No Data Found</td> )}
                     {( !loading && employeeList && currentItems.length === 0 && employeeList.length !==0 ) && <td colSpan={8}><small className="muted">'{searchText}' employee not found</small> </td>}
               
                     {(currentItems && !loading) && currentItems.sort((a, b) => b.id - a.id).map((item) => (