From 3d4a6f698f19c611136fe7973d6131933cdc8516 Mon Sep 17 00:00:00 2001
From: Andre Turner <andre_turner@tsco.org>
Date: Tue, 8 Oct 2024 16:31:01 -0500
Subject: [PATCH] Add cumulative progress column

---
 .../ProgressReportsCollapsedGrid.tsx          |  1 +
 .../ProgressReportsGrid.tsx                   | 47 +++++++++++++++++++
 .../progressReportsDataGridRow.graphql        |  3 ++
 3 files changed, 51 insertions(+)

diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsCollapsedGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsCollapsedGrid.tsx
index 7ab300471..19f5cbf2c 100644
--- a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsCollapsedGrid.tsx
+++ b/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'];
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
index e8c505398..808a4fa3b 100644
--- a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
+++ b/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>
+  );
+};
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql b/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql
index 72da09e6e..b786e9a06 100644
--- a/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql
+++ b/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql
@@ -39,6 +39,9 @@ fragment progressReportsDataGridRow on ProgressReport {
       value
     }
   }
+  cumulativeSummary {
+    ...ProgressSummary
+  }
   teamNews {
     items {
       id