Auditing WIP

src/components/organisms/audit-results/audit-results.organism.jsx

@@ -1,4 +1,4 @@
-import { Card, Col, Row, Table } from "antd";
+import { Card, Col, Divider, Space, Table, Tooltip } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -6,6 +6,7 @@ import { setSelectedJobTargetPc } from "../../../redux/application/application.a
 import { selectAuditData } from "../../../redux/reporting/reporting.selectors";
 import { DateFormat } from "../../../util/constants";
 import dayjs from "../../../util/day";
+import Dinero from "dinero.js";
 
 const mapStateToProps = createStructuredSelector({
   selectAuditData: selectAuditData
@@ -16,22 +17,22 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function AuditResultsOrganism({ selectAuditData }) {
-  console.log("🚀 ~ AuditResultsOrganism ~ selectAuditData:", selectAuditData);
   const missingColumns = [
-    { key: "clm_no", title: "Claim No.", dataIndex: "clm_no" },
+    { key: "clm_no", width: "20%", title: "Claim No.", dataIndex: "clm_no" },
     {
       key: "close_date",
+      width: "20%",
       title: "[RPS] R4P",
       dataIndex: "close_date",
       render: (text, record) => dayjs(record.close_date).format(DateFormat)
     },
-    { key: "v_model_yr", title: "Model Year", dataIndex: "v_model_yr" },
-    { key: "v_make_desc", title: "Make", dataIndex: "v_make_desc" },
-    { key: "v_model", title: "Model", dataIndex: "v_model" }
+    { key: "v_model_yr", width: "20%", title: "Model Year", dataIndex: "v_model_yr" },
+    { key: "v_make_desc", width: "20%", title: "Make", dataIndex: "v_make_desc" },
+    { key: "v_model", width: "20%", title: "Model", dataIndex: "v_model" }
   ];
 
   const mismatchColumns = [
-    { key: "clm_no", title: "Claim No.", dataIndex: ["rps", "clm_no"] },
+    { key: "clm_no", width: "12%", title: "Claim No.", dataIndex: ["rps", "clm_no"] },
     {
       key: "close_date",
       title: "[RPS] R4P",
@@ -40,53 +41,66 @@ export function AuditResultsOrganism({ selectAuditData }) {
     },
     {
       key: "close_date_audit",
+      width: "12%",
       title: "[Audit] R4P",
       dataIndex: "close_date_audit",
       render: (text, record) => dayjs(record.audit.close_date).format(DateFormat)
     },
-    { key: "v_model_yr", title: "Model Year", dataIndex: ["audit", "v_model_yr"] },
-    { key: "v_make_desc", title: "Make", dataIndex: ["audit", "v_make_desc"] },
-    { key: "v_model", title: "Model", dataIndex: ["audit", "v_model"] },
+    { key: "v_model_yr", width: "12%", title: "Model Year", dataIndex: ["audit", "v_model_yr"] },
+    { key: "v_make_desc", width: "12%", title: "Make", dataIndex: ["audit", "v_make_desc"] },
+    { key: "v_model", width: "12%", title: "Model", dataIndex: ["audit", "v_model"] },
     {
       key: "expected_rps",
-      title: "[RPS] Expected",
+      width: "12%",
+      title: "Expected RPS",
       dataIndex: ["audit", "expectedRpsDollars"],
-      render: (text, record) => record.rps.expectedRpsDollars.toFormat()
+      render: (text, record) => (
+        <Space split={<Divider type="vertical" />}>
+          <Tooltip title="RPS Expected Savings">{record.rps.expectedRpsDollars.toFormat()}</Tooltip>
+          <Tooltip title="Audit Expected Savings">
+            {Dinero({ amount: Math.round(record.audit.expected_rps_dollars * 100) }).toFormat()}
+          </Tooltip>
+        </Space>
+      )
     },
-    { key: "expected_audit", title: "[AUDIT] Expected", dataIndex: ["audit", "expected_rps_dollars"] },
     {
       key: "actual_rps",
-      title: "[RPS] Actual",
+      width: "12%",
+      title: " Actual RPS",
       dataIndex: ["audit", "jobRpsDollars"],
-      render: (text, record) => record.rps.jobRpsDollars.toFormat()
-    },
-    { key: "actual_audit", title: "[Audit] Actual", dataIndex: ["audit", "actual_rps_dollars"] }
+      render: (text, record) => (
+        <Space split={<Divider type="vertical" />}>
+          <Tooltip title="RPS Actual Savings">{record.rps.jobRpsDollars.toFormat()}</Tooltip>
+          <Tooltip title="Audit Actual Savings">
+            {Dinero({ amount: Math.round(record.audit.actual_rps_dollars * 100) }).toFormat()}
+          </Tooltip>
+        </Space>
+      )
+    }
   ];
   return (
-    <div>
-      <Row gutter={[16, 16]}>
-        <Col span={24}>
-          <Card title="Jobs not found in RPS">
-            <Table columns={missingColumns} dataSource={selectAuditData?.missingFromRps} rowKey="clm_no" />
-          </Card>
-        </Col>
-        <Col span={24}>
-          <Card title="Jobs not found in Audit">
-            <Table columns={missingColumns} dataSource={selectAuditData?.missingFromAudit} rowKey="clm_no" />
-          </Card>
-        </Col>
-        <Col span={24}>
-          <Card title="Jobs with a mismatched expectation">
-            <Table columns={mismatchColumns} dataSource={selectAuditData?.expectedMismatch} rowKey="clm_no" />
-          </Card>
-        </Col>
-        <Col span={24}>
-          <Card title="Jobs with a mismatch actual">
-            <Table columns={mismatchColumns} dataSource={selectAuditData?.actualMismatch} rowKey="clm_no" />
-          </Card>
-        </Col>
-      </Row>
-    </div>
+    <>
+      <Col span={24}>
+        <Card title="Jobs not found in RPS">
+          <Table columns={missingColumns} dataSource={selectAuditData?.missingFromRps} rowKey="clm_no" />
+        </Card>
+      </Col>
+      <Col span={24}>
+        <Card title="Jobs not found in Audit">
+          <Table columns={missingColumns} dataSource={selectAuditData?.missingFromAudit} rowKey="clm_no" />
+        </Card>
+      </Col>
+      <Col span={24}>
+        <Card title="Mismatch - Expected Savings">
+          <Table columns={mismatchColumns} dataSource={selectAuditData?.expectedMismatch} rowKey="clm_no" />
+        </Card>
+      </Col>
+      <Col span={24}>
+        <Card title="Mismatch - Actual Savings">
+          <Table columns={mismatchColumns} dataSource={selectAuditData?.actualMismatch} rowKey="clm_no" />
+        </Card>
+      </Col>
+    </>
   );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(AuditResultsOrganism);

src/components/pages/audit/audit.page.jsx

@@ -1,4 +1,4 @@
-import { Button, DatePicker, Form } from "antd";
+import { Alert, Button, Card, Col, DatePicker, Form, Input, Row } from "antd";
 import React from "react";
 import ipcTypes from "../../../ipc.types";
 import { connect } from "react-redux";
@@ -7,78 +7,91 @@ import { queryReportingData } from "../../../redux/reporting/reporting.actions";
 import dayjs from "../../../util/day";
 import AuditResultsOrganism from "../../organisms/audit-results/audit-results.organism";
 import "./audit.page.styles.scss";
+import { selectAuditError } from "../../../redux/reporting/reporting.selectors";
 
 const { ipcRenderer } = window;
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
+  auditError: selectAuditError
 });
 const mapDispatchToProps = (dispatch) => ({
   queryReportingData: (dates) => dispatch(queryReportingData(dates))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(AuditPage);
 
-export function AuditPage({ queryReportingData }) {
-  const handleBrowseForFile = async ({ dateRange }) => {
-    console.log("🚀 ~ handleBrowseForFile ~ dateRange:", dateRange);
+export function AuditPage({ auditError, queryReportingData }) {
+  const handleBrowseForFile = async ({ sheetName, dateRange }) => {
     queryReportingData({
       startDate: dateRange[0] || dayjs("2024-03-01"),
       endDate: dateRange[1] || dayjs("2024-03-31")
     });
-    ipcRenderer.send(ipcTypes.audit.toMain.browseForFile);
+    ipcRenderer.send(ipcTypes.audit.toMain.browseForFile, { sheetName });
   };
 
   return (
     <div className="audit-container">
-      <Form onFinish={handleBrowseForFile}>
-        <Form.Item
-          label="Ready for Payment Date Between"
-          name="dateRange"
-          rules={[
-            { type: "array", required: true },
-            {
-              validator(rule, value) {
-                if (!value || !value.length === 2) {
-                  return Promise.resolve();
-                }
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Card>
+            <Form onFinish={handleBrowseForFile}>
+              <Form.Item
+                label="Ready for Payment Date Between"
+                name="dateRange"
+                rules={[
+                  { type: "array", required: true },
+                  {
+                    validator(rule, value) {
+                      if (!value || !value.length === 2) {
+                        return Promise.resolve();
+                      }
 
-                if (dayjs(value[1]).diff(dayjs(value[0]), "month", true) > 1) {
-                  return Promise.reject("Time period exceeds 1 month. Please select a shorter date range.");
-                } else {
-                  return Promise.resolve();
-                }
-              }
-            }
-          ]}
-        >
-          <DatePicker.RangePicker
-            format="MM/DD/YYYY"
-            ranges={{
-              Today: [dayjs(), dayjs()],
-              "Last Month": [
-                dayjs().startOf("month").subtract(1, "month"),
-                dayjs().startOf("month").subtract(1, "month").endOf("month")
-              ],
-
-              "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
-              "Last Quarter": [
-                dayjs().startOf("quarter").subtract(1, "quarter"),
-                dayjs().startOf("quarter").subtract(1, "day")
-              ],
-              "This Quarter": [
-                dayjs().startOf("quarter"),
-                dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day")
-              ],
-              "Last 3 Months": [
-                dayjs().startOf("month").subtract(3, "month"),
-                dayjs().startOf("month").subtract(1, "month").endOf("month")
-              ]
-            }}
-          />
-        </Form.Item>
-        <Button htmlType="submit">Select Audit XLS</Button>
-      </Form>
-      <AuditResultsOrganism />
+                      // if (dayjs(value[1]).diff(dayjs(value[0]), "month", true) > 1) {
+                      //   return Promise.reject("Time period exceeds 1 month. Please select a shorter date range.");
+                      // } else {
+                      return Promise.resolve();
+                      // }
+                    }
+                  }
+                ]}
+              >
+                <DatePicker.RangePicker
+                  format="MM/DD/YYYY"
+                  ranges={{
+                    "2 Months ago": [
+                      dayjs().startOf("month").subtract(2, "month"),
+                      dayjs().startOf("month").subtract(2, "month").endOf("month")
+                    ],
+                    "Last Month": [
+                      dayjs().startOf("month").subtract(1, "month"),
+                      dayjs().startOf("month").subtract(1, "month").endOf("month")
+                    ],
+                    "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
+                    "Last Quarter": [
+                      dayjs().startOf("quarter").subtract(1, "quarter"),
+                      dayjs().startOf("quarter").subtract(1, "day")
+                    ],
+                    "Last 3 Months": [
+                      dayjs().startOf("month").subtract(3, "month"),
+                      dayjs().startOf("month").subtract(1, "month").endOf("month")
+                    ]
+                  }}
+                />
+              </Form.Item>
+              <Form.Item label="Sheet Name" tooltip="" name="sheetName" initialValue="Shop RPS Claim Detail">
+                <Input />
+              </Form.Item>
+              <Button htmlType="submit">Select Audit XLS</Button>
+            </Form>
+          </Card>
+        </Col>
+        {auditError && (
+          <Col span={24}>
+            <Alert type="error" banner message={auditError} />
+          </Col>
+        )}
+        <AuditResultsOrganism />
+      </Row>
     </div>
   );
 }

src/components/pages/audit/audit.page.styles.scss

@@ -2,7 +2,7 @@
   height: 100%;
   overflow-y: auto;
   background-color: rgb(244, 244, 244);
-  & > .reporting-cards > * {
+  & > * {
     margin: 0.7rem;
   }
 }