Polish

SeedCompany · Oct 14, 2024 · e4c7256 · e4c7256
1 parent 3d4a6f6
commit e4c7256
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 40 deletions.
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx b/src/scenes/Dashboard/ProgressReportsWidget/ProgressReportsGrid.tsx
@@ -4,6 +4,7 @@ import {
   DataGridPro,
   DataGridProProps as DataGridProps,
   GridColDef,
+  GridRenderCellParams as RenderCellParams,
 } from '@mui/x-data-grid-pro';
 import { merge } from 'lodash';
 import { useMemo } from 'react';
@@ -24,7 +25,6 @@ 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,
@@ -103,7 +103,18 @@ export const ProgressReportsColumnMap = {
     minWidth: 200,
     sortable: false,
     filterable: false,
-    renderCell: ({ value }) => <CumulativeProgressColumn value={value} />,
+    renderCell: ({
+      value,
+    }: RenderCellParams<
+      ProgressReport,
+      ProgressReport['cumulativeSummary']
+    >) => (
+      <Box sx={{ my: 1, display: 'flex', gap: 2 }}>
+        <Metric label="Planned" value={value?.planned} />
+        <Metric label="Actual" value={value?.actual} />
+        <Metric label="Variance" value={value?.variance} />
+      </Box>
+    ),
   },
   teamNews: {
     headerName: 'Team News',
@@ -222,41 +233,11 @@ 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>
+const Metric = ({ label, value }: { label: string; value?: number }) => (
+  <Typography variant="body2">
+    <Box color={value ? undefined : 'text.disabled'}>
+      {value === undefined ? '—' : `${(value * 100).toFixed(1)}%`}
     </Box>
-  );
-};
+    <div>{label}</div>
+  </Typography>
+);
diff --git a/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql b/src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql
@@ -40,7 +40,9 @@ fragment progressReportsDataGridRow on ProgressReport {
     }
   }
   cumulativeSummary {
-    ...ProgressSummary
+    planned
+    actual
+    variance
   }
   teamNews {
     items {