src/components/Project/Infrastructure/WorkArea.jsx

@@ -184,7 +184,10 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                             Category
                           </th>
                           <th className="infra-activity-table-header d-none d-md-table-cell">
-                            Completed/Planned
+                            Planned
+                          </th>
+                          <th className="infra-activity-table-header d-none d-md-table-cell">
+                            Completed
                           </th>
                           <th className="infra-activity-table-header">
                             Progress

src/components/Project/Infrastructure/WorkItem.jsx

@@ -177,16 +177,22 @@ const WorkItem = ({
           </span>
         </td>
 
+        {/* Planned - visible on medium and above */}
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem ? (
+          {hasWorkItem
-            `${NewWorkItem?.workItem?.completedWork ??
+            ? NewWorkItem?.workItem?.plannedWork ??
-            workItem?.completedWork ??
-            "0"}/${NewWorkItem?.workItem?.plannedWork ??
               workItem?.plannedWork ??
-            "0"}`
-          ) : (
               "NA"
-          )}
+            : "NA"}
+        </td>
+
+        {/* Completed - visible on medium and above */}
+        <td className="text-center d-none d-md-table-cell">
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.completedWork ??
+              workItem?.completedWork ??
+              "NA"
+            : "NA"}
         </td>
 
         {/* Progress Bar - always visible */}