Add cumulative progress column

src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsCollapsedGrid.tsx

@@ -49,6 +49,7 @@ const initialState = {
       'varianceExplanation.reasons': false,
       'engagement.project.isMember': false,
       'engagement.project.pinned': false,
+      cumulativeSummary: false,
     },
   },
 } satisfies DataGridProps['initialState'];

src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx

@@ -24,6 +24,7 @@ import {
   useDataGridSource,
 } from '~/components/Grid';
 import { Link } from '~/components/Routing';
+import { ProgressSummaryFragment } from '../../ProgressReports/Detail/ProgressReportDetail.graphql';
 import { ExpansionCell } from './ExpansionCell';
 import {
   ProgressReportsDataGridRowFragment as ProgressReport,
@@ -97,6 +98,13 @@ export const ProgressReportsColumnMap = {
     filterable: false,
     valueGetter: (_, row) => row.varianceExplanation.scheduleStatus,
   },
+  cumulativeSummary: {
+    headerName: 'Cumulative Progress',
+    minWidth: 200,
+    sortable: false,
+    filterable: false,
+    renderCell: ({ value }) => <CumulativeProgressColumn value={value} />,
+  },
   teamNews: {
     headerName: 'Team News',
     width: 400,
@@ -213,3 +221,42 @@ export const ProgressReportsGrid = ({
     />
   );
 };
+
+const CumulativeProgressColumn = ({
+  value,
+}: {
+  value: ProgressSummaryFragment | null;
+}) => {
+  const progressData = {
+    Planned: value?.planned,
+    Actual: value?.actual,
+    Variance: value?.variance,
+  };
+
+  return (
+    <Box
+      sx={{
+        my: 1,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'left',
+        gap: 2,
+      }}
+    >
+      {Object.entries(progressData).map(([label, data]) =>
+        cumulativeProgressData(label, data)
+      )}
+    </Box>
+  );
+};
+
+const cumulativeProgressData = (label: string, data: number | undefined) => {
+  const displayValue = data === undefined ? '—' : `${(data * 100).toFixed(1)}%`;
+
+  return (
+    <Box sx={{ textAlign: 'left' }}>
+      <Typography variant="body2">{displayValue}</Typography>
+      <Typography variant="body2">{label}</Typography>
+    </Box>
+  );
+};

src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql

@@ -39,6 +39,9 @@ fragment progressReportsDataGridRow on ProgressReport {
       value
     }
   }
+  cumulativeSummary {
+    ...ProgressSummary
+  }
   teamNews {
     items {
       id