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

@@ -148,7 +148,7 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
-              workItem.activityMaster?.activityName
+                workItem.activityMaster?.activityName
               : "NA"}
           </span>
         </td>
@@ -157,8 +157,8 @@ const WorkItem = ({
         <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
-            workItem?.completedWork ??
-            "NA"
+              workItem?.completedWork ??
+              "NA"
             : "NA"}
           /{" "}
           {hasWorkItem
@@ -171,22 +171,28 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
-              workItem.workCategoryMaster?.name ||
-              "NA"
+                workItem.workCategoryMaster?.name ||
+                "NA"
               : "NA"}
           </span>
         </td>
 
+        {/* Planned - visible on medium and above */}
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem ? (
-            `${NewWorkItem?.workItem?.completedWork ??
-            workItem?.completedWork ??
-            "0"}/${NewWorkItem?.workItem?.plannedWork ??
-            workItem?.plannedWork ??
-            "0"}`
-          ) : (
-            "NA"
-          )}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.plannedWork ??
+              workItem?.plannedWork ??
+              "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 */}
@@ -199,7 +205,7 @@ const WorkItem = ({
                 width: getProgress(
                   NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                   NewWorkItem?.workItem?.completedWork ||
-                  workItem?.completedWork
+                    workItem?.completedWork
                 ),
                 height: "5px",
               }}