initially setup poject infra in PmsGrid

src/components/Project/pmsInfrastructure/BuildingTable.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import FloorTable from "./FloorTable";
+import { useSelectedProject } from "../../../slices/apiDataManager";
+import { useProjectInfra } from "../../../hooks/useProjects";
+import { PmsGrid } from "../../../services/pmsGrid";
+
+export default function BuildingTable() {
+    const project = useSelectedProject()
+    
+    const {projectInfra} = useProjectInfra(project,null)
+  const columns = [
+    { key: "buildingName", title: "Building", sortable: true,},
+    { key: "plannedWork", title: "Planned Work" },
+    { key: "completedWork", title: "Completed Work" },
+    { key: "percentage", title: "Completion %" },
+  ];
+
+  return (
+    <PmsGrid
+      columns={columns}
+      data={projectInfra}
+      rowKey="id"
+      features={{
+        expand: true,
+        pinning: true,
+        resizing: true,
+        selection: true,
+      }}
+      renderExpanded={(building) => (
+        <FloorTable floors={building.floors} />
+      )}
+    />
+  );
+}

src/components/Project/pmsInfrastructure/FloorTable.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import WorkAreaTable from "./WorkAreaTable";
+import { PmsGrid } from "../../../services/pmsGrid";
+
+export default function FloorTable({ floors }) {
+  const columns = [
+    { key: "floorName", title: "Floor", sortable: true,  },
+    { key: "plannedWork", title: "Planned Work" },
+    { key: "completedWork", title: "Completed Work" },
+    { key: "percentage", title: "Completion %" },
+  ];
+
+  return (
+    <PmsGrid
+      columns={columns}
+      data={floors}
+      rowKey="id"
+      features={{
+        expand: true,
+        pinning: true,
+        resizing: true,
+      }}
+      renderExpanded={(floor) => (
+        <WorkAreaTable workAreas={floor.workAreas} />
+      )}
+    />
+  );
+}

src/components/Project/pmsInfrastructure/WorkAreaTable.jsx

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from "react";
+import { PmsGrid } from "../../../services/pmsGrid";
+// import { GridService } from "./gridService";
+// import TaskTable from "./TaskTable";
+
+export default function WorkAreaTable({ workAreas }) {
+  const [taskData, setTaskData] = useState({}); // workAreaId → tasks
+
+  const columns = [
+    { key: "areaName", title: "Work Area", },
+    { key: "plannedWork", title: "Planned Work" },
+    { key: "completedWork", title: "Completed Work" },
+    { key: "percentage", title: "Completion %" },
+  ];
+
+//   const loadTasks = async (workAreaId) => {
+//     if (!taskData[workAreaId]) {
+//       const res = await GridService.getTasksByWorkArea(workAreaId);
+//       setTaskData((prev) => ({ ...prev, [workAreaId]: res }));
+//     }
+//   };
+
+  return (
+    <PmsGrid
+      columns={columns}
+      data={workAreas}
+      rowKey="id"
+      features={{
+        expand: true,
+        pinning: true,
+        resizing: true,
+      }}
+    //   renderExpanded={(area) => {
+    //     loadTasks(area.id);
+    //     return <TaskTable tasks={taskData[area.id]} />;
+    //   }}
+    />
+  );
+}

src/pages/project/ProjectDetails.jsx

@@ -24,6 +24,7 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";
 
 import "./ProjectDetails.css";
 import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
+import BuildingTable from "../../components/Project/pmsInfrastructure/BuildingTable";
 
 const ProjectDetails = () => {
   const projectId = useSelectedProject();
@@ -88,7 +89,7 @@ const ProjectDetails = () => {
       case "teams":
         return <Teams />;
       case "infra":
-        return <ProjectInfra data={projects_Details} onDataChange={refetch} />;
+        return <BuildingTable/>
       case "workplan":
         return <WorkPlan data={projects_Details} onDataChange={refetch} />;
       case "directory":

src/services/pmsGrid/BasicTable.jsx

@@ -738,7 +738,7 @@ export default function DemoBOQGrid() {
             reorder: true,
             columnVisibility: true,
             pageSizeSelector: true,
-            // groupByKey: "category",
+            // groupByKey: "status",
             aggregation: true,
             expand: true,
             maxHeight: "70vh",
@@ -753,11 +753,7 @@ export default function DemoBOQGrid() {
                 icon: "bx-trash text-danger",
                 onClick: (row) => console.log("Delete", row),
               },
-              {
-                label: "View",
-                icon: "bx-show text-info",
-                onClick: (row) => console.log("View ", row),
-              },
+           
             ],
           }}
           renderExpanded={(row) => (

src/services/pmsGrid/PmsGrid.jsx

@@ -170,6 +170,7 @@ export default function PmsGrid({
                 Export CSV
               </button>
             )}
+     
           </div>
         </div>
         <div className="col-4 ">
@@ -236,9 +237,7 @@ export default function PmsGrid({
                 </th>
               )}
               {features.expand && (
-                <th
-                  className="text-center ticky-action-column"
-                >
+                <th className="text-center ticky-action-column">
                   <input
                     type="checkbox"
                     className="form-check-input mx-3"
@@ -356,6 +355,7 @@ export default function PmsGrid({
                           (features.selection ? 1 : 0) +
                           (features.actions ? 1 : 0)
                         }
+                        className="text-start"
                       >
                         <strong>{g.key}</strong>
                         {features.aggregation &&
@@ -527,7 +527,6 @@ export default function PmsGrid({
       </React.Fragment>
     );
   }
-
 }
 
 // small helpers to compute sticky offsets