Updated format on reporting screen. RPS-26

src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx

@@ -9,6 +9,7 @@ import { setSelectedJobId } from "../../../redux/application/application.actions
 import {
   selectReportData,
   selectReportLoading,
+  selectScorecard,
 } from "../../../redux/reporting/reporting.selectors";
 
 const { ipcRenderer } = window;
@@ -16,12 +17,14 @@ const { ipcRenderer } = window;
 const mapStateToProps = createStructuredSelector({
   reportingLoading: selectReportLoading,
   reportData: selectReportData,
+  scoreCard: selectScorecard,
 });
 const mapDispatchToProps = (dispatch) => ({
   setSelectedJobId: (id) => dispatch(setSelectedJobId(id)),
 });
 
 export function ReportingJobsListMolecule({
+  scoreCard,
   reportingLoading,
   reportData,
   setSelectedJobId,
@@ -147,6 +150,24 @@ export function ReportingJobsListMolecule({
         scroll={{
           x: true,
         }}
+        summary={() => (
+          <Table.Summary.Row>
+            <Table.Summary.Cell index={0}></Table.Summary.Cell>
+            <Table.Summary.Cell index={1}></Table.Summary.Cell>
+            <Table.Summary.Cell index={2}></Table.Summary.Cell>
+            <Table.Summary.Cell index={3}></Table.Summary.Cell>
+            <Table.Summary.Cell index={4}></Table.Summary.Cell>
+            <Table.Summary.Cell index={5}>
+              {scoreCard && scoreCard.allJobsSumDbPrice.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell index={6}>
+              {" "}
+              {scoreCard && scoreCard.allJobsSumActPrice.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell index={7}></Table.Summary.Cell>
+            <Table.Summary.Cell index={8}></Table.Summary.Cell>
+          </Table.Summary.Row>
+        )}
       />
     </div>
   );

src/components/molecules/reporting-totals-stats/reporting-totals-stats.molecule.jsx

@@ -35,38 +35,47 @@ export function ReportingTotalsStatsMolecule({ reportingLoading, scoreCard }) {
         marginBottom: "1rem",
       }}
     >
-      <Statistic
+      <div style={{ display: "flex" }}>
-        title="RPS Total"
+        <Statistic
-        value={scoreCard.shopRpsTotalDollars.toFormat()}
+          title="Target RPS %"
-      />
+          style={{ margin: "0rem .5rem" }}
-      <Statistic
+          value={((scoreCard.targetRpsPc || 0) * 100).toFixed(1)}
-        title="RPS Expectation"
+          suffix="%"
-        value={scoreCard.shopRpsExpectedDollars.toFormat()}
+        />
-      />
+        <Statistic
-      <Statistic
+          title="Current RPS %"
-        title="RPS Variance $"
+          style={{ margin: "0rem .5rem" }}
-        valueStyle={{
+          valueStyle={{
-          color:
+            color:
-            scoreCard.varianceDollars.getAmount() < 0 ? "tomato" : "seagreen",
+              (scoreCard.currentRpsPc || 0) <= (scoreCard.targetRpsPc || 0)
-        }}
+                ? "tomato"
-        value={scoreCard.varianceDollars.toFormat()}
+                : "seagreen",
-      />
+          }}
-      <Statistic
+          value={((scoreCard.currentRpsPc || 0) * 100).toFixed(1)}
-        title="Current RPS %"
+          suffix="%"
-        valueStyle={{
+        />
-          color:
+      </div>
-            (scoreCard.currentRpsPc || 0) <= (scoreCard.targetRpsPc || 0)
+      <div style={{ display: "flex" }}>
-              ? "tomato"
+        <Statistic
-              : "seagreen",
+          title="Target RPS $"
-        }}
+          style={{ margin: "0rem .5rem" }}
-        value={((scoreCard.currentRpsPc || 0) * 100).toFixed(1)}
+          value={scoreCard.shopRpsExpectedDollars.toFormat()}
-        suffix="%"
+        />
-      />
+        <Statistic
-      <Statistic
+          title="Current RPS $"
-        title="Target RPS %"
+          style={{ margin: "0rem .5rem" }}
-        value={((scoreCard.targetRpsPc || 0) * 100).toFixed(1)}
+          value={scoreCard.shopRpsTotalDollars.toFormat()}
-        suffix="%"
+        />
-      />
+        <Statistic
+          title="RPS Variance $"
+          style={{ margin: "0rem .5rem" }}
+          valueStyle={{
+            color:
+              scoreCard.varianceDollars.getAmount() < 0 ? "tomato" : "seagreen",
+          }}
+          value={scoreCard.varianceDollars.toFormat()}
+        />
+      </div>
     </div>
   );
 }