From 8e4cc5756c072ecf15fac5d8dbb51b65c82b20aa Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 28 Oct 2020 06:32:37 -0700
Subject: [PATCH] Updated format on reporting screen. RPS-26

---
 .../reporting-jobs-list.molecule.jsx          | 21 ++++++
 .../reporting-totals-stats.molecule.jsx       | 73 +++++++++++--------
 2 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx b/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx
index db64077..439c5f5 100644
--- a/src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx
+++ b/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>
   );
diff --git a/src/components/molecules/reporting-totals-stats/reporting-totals-stats.molecule.jsx b/src/components/molecules/reporting-totals-stats/reporting-totals-stats.molecule.jsx
index 98e09f2..066fe24 100644
--- a/src/components/molecules/reporting-totals-stats/reporting-totals-stats.molecule.jsx
+++ b/src/components/molecules/reporting-totals-stats/reporting-totals-stats.molecule.jsx
@@ -35,38 +35,47 @@ export function ReportingTotalsStatsMolecule({ reportingLoading, scoreCard }) {
         marginBottom: "1rem",
       }}
     >
-      <Statistic
-        title="RPS Total"
-        value={scoreCard.shopRpsTotalDollars.toFormat()}
-      />
-      <Statistic
-        title="RPS Expectation"
-        value={scoreCard.shopRpsExpectedDollars.toFormat()}
-      />
-      <Statistic
-        title="RPS Variance $"
-        valueStyle={{
-          color:
-            scoreCard.varianceDollars.getAmount() < 0 ? "tomato" : "seagreen",
-        }}
-        value={scoreCard.varianceDollars.toFormat()}
-      />
-      <Statistic
-        title="Current RPS %"
-        valueStyle={{
-          color:
-            (scoreCard.currentRpsPc || 0) <= (scoreCard.targetRpsPc || 0)
-              ? "tomato"
-              : "seagreen",
-        }}
-        value={((scoreCard.currentRpsPc || 0) * 100).toFixed(1)}
-        suffix="%"
-      />
-      <Statistic
-        title="Target RPS %"
-        value={((scoreCard.targetRpsPc || 0) * 100).toFixed(1)}
-        suffix="%"
-      />
+      <div style={{ display: "flex" }}>
+        <Statistic
+          title="Target RPS %"
+          style={{ margin: "0rem .5rem" }}
+          value={((scoreCard.targetRpsPc || 0) * 100).toFixed(1)}
+          suffix="%"
+        />
+        <Statistic
+          title="Current RPS %"
+          style={{ margin: "0rem .5rem" }}
+          valueStyle={{
+            color:
+              (scoreCard.currentRpsPc || 0) <= (scoreCard.targetRpsPc || 0)
+                ? "tomato"
+                : "seagreen",
+          }}
+          value={((scoreCard.currentRpsPc || 0) * 100).toFixed(1)}
+          suffix="%"
+        />
+      </div>
+      <div style={{ display: "flex" }}>
+        <Statistic
+          title="Target RPS $"
+          style={{ margin: "0rem .5rem" }}
+          value={scoreCard.shopRpsExpectedDollars.toFormat()}
+        />
+        <Statistic
+          title="Current RPS $"
+          style={{ margin: "0rem .5rem" }}
+          value={scoreCard.shopRpsTotalDollars.toFormat()}
+        />
+        <Statistic
+          title="RPS Variance $"
+          style={{ margin: "0rem .5rem" }}
+          valueStyle={{
+            color:
+              scoreCard.varianceDollars.getAmount() < 0 ? "tomato" : "seagreen",
+          }}
+          value={scoreCard.varianceDollars.toFormat()}
+        />
+      </div>
     </div>
   );
 }