src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,8 +1,23 @@
-import React, { useEffect } from "react";
+import React, { useEffect,useState } from "react";
 import WorkItem from "./WorkItem";
+import {useProjectDetails} from "../../../hooks/useProjects";
+import {getCachedData} from "../../../slices/apiDataManager";
+
+const WorkArea = ( {workArea, floor, forBuilding} ) =>{
+  const [workItems,setWorkItems] =useState([])
+
+  useEffect( () =>
+  { 
+    const project = getCachedData( "projectInfo" )   
+    if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
+
+  const building = project.buildings?.find((b) => b.id === forBuilding.id);
+  const floors = building?.floors?.find((f) => f.id === floor.id);
+  const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
+
+  setWorkItems(workAreas?.workItems || []);
+  }, [ workArea ,floor,floor] );
 
-const WorkArea = ({ workArea, floor, forBuilding }) => {
-  useEffect(() => {}, [workArea]);
   return (
     <React.Fragment key={workArea.id}>
       <tr>
@@ -25,7 +40,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
         </td>
       </tr>
 
-      {workArea?.workItems && workArea.workItems.length > 0 ? (
+      {(workItems && workItems.length > 0) && (
         <tr className="overflow-auto">
           <td colSpan={4}>
             <table className="table mx-1">
@@ -72,7 +87,8 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
             </table>
           </td>
         </tr>
-      ) : null}
+      )}
+    {!workItems && <p>No item</p>}
     </React.Fragment>
   );
 };

src/components/Project/Infrastructure/WorkItem.jsx

@@ -32,6 +32,11 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   };
 
   const hasWorkItem = NewWorkItem && NewWorkItem;
+  useEffect(() => {
+    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
+  
 
   return (
     <>
@@ -56,10 +61,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </td>
         {/* for mobile view */}
         <td className="text-center d-sm-none d-sm-table-cell">
-          {hasWorkItem
-            ? NewWorkItem?.workItem?.completedWork || workItem?.completedWork
-            : "NA"}
-          /{" "}
+          {NewWorkItem?.workItem?.completedWork}/{" "}
           {hasWorkItem
             ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
             : "NA"}
@@ -71,9 +73,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
             : "NA"}
         </td>
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem
-            ? NewWorkItem?.workItem?.completedWork || workItem?.completedWork
-            : "NA"}
+          {NewWorkItem?.workItem?.completedWork}
         </td>
         {/* ************************************************ */}
         <td className="text-center" style={{ width: "15%" }}>
@@ -89,12 +89,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 ),
                 height: "5px",
               }}
-              aria-valuenow={
-                hasWorkItem
-                  ? NewWorkItem?.workItem?.completedWork ||
-                    workItem?.completedWork
-                  : 0
-              }
+              aria-valuenow={NewWorkItem?.workItem?.completedWor}
               aria-valuemin="0"
               aria-valuemax={
                 hasWorkItem
@@ -126,14 +121,23 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               type="button"
               className="btn p-0 dropdown-toggle hide-arrow"
             >
-              <i className="bx bxs-edit me-2 text-primary"></i>
+              <i
+                className="bx bxs-edit me-2 text-primary"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                title="Edit Activity"
+                data-bs-original-title="Edit Activity"
+              ></i>
             </button>
             <button
               aria-label="Delete"
               type="button"
               className="btn p-0 dropdown-toggle hide-arrow"
             >
-              <i className="bx bx-trash me-1 text-danger"></i>
+              <i className="bx bx-trash me-1 text-danger"    data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                title="Delete Activity"
+                data-bs-original-title="Delete Activity"></i>
             </button>
           </div>
         </td>
@@ -149,7 +153,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
 
             <div className="dropdown-menu dropdown-menu-end m-0">
               {" "}
-              <a className="dropdown-item">
+              <a className="dropdown-item ">
                 {" "}
                 <i className="bx bxs-edit me-2 text-primary"></i>Edit
               </a>

src/components/Project/ProjectInfra.jsx

@@ -12,7 +12,7 @@ import ProjectModal from "./ProjectModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT_INFRA } from "../../utils/constants";
 import InfraTable from "./Infrastructure/InfraTable";
-import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import { useProjectDetails } from "../../hooks/useProjects";
 
 const ProjectInfra = ({
@@ -21,7 +21,7 @@ const ProjectInfra = ({
   eachSiteEngineer,
 }) => {
   const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const { projects_Details, loading } = useProjectDetails(data.id);
+  const { projects_Details,refetch, loading } = useProjectDetails(data.id);
   const [project, setProject] = useState(projects_Details);
   const [modalConfig, setModalConfig] = useState({ type: null, data: null });
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -110,7 +110,6 @@ const ProjectInfra = ({
   };
 
   const handleTaskModelFormSubmit = (updatedModel) => {
-    // debugger
     if (updatedModel.id == "") updatedModel.id = 0;
     const updatedProject = { ...project };
 
@@ -119,7 +118,6 @@ const ProjectInfra = ({
         onDataChange("task-change");
         showToast("Details updated successfully.", "success");
         // setClearFormTrigger( true );
-
         if (response?.data[0]) {
           const { workItemId, workItem } = response.data[0];
 
@@ -140,8 +138,8 @@ const ProjectInfra = ({
                                       existingItem.workItemId ===
                                       workItem.workItemId
                                   )
-                                    ? workArea.workItems // If the workItemId already exists, keep the current workItems
-                                    : [...workArea.workItems, workItem],
+                                  ? [...workArea.workItems] // Create a new array to trigger re-render
+                                  : [...workArea.workItems, workItem],
                                 }
                               : workArea
                           ),
@@ -151,15 +149,18 @@ const ProjectInfra = ({
                 }
               : building
           );
-
           updatedProject.buildings = updatedBuildings;
+          // workItem update, but having local state issue there for needed to calling api
+          clearCacheKey( "projectInfo" )
+          refetch()
 
-          setProject(updatedProject);
           cacheData("projectInfo", {
             projectId: updatedProject.id,
             data: updatedProject,
           });
-          console.log(project);
+     
+          setProject( updatedProject );
+          closeTaskModel()
         }
       })
       .catch((error) => {