WIP Audit Changes

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

@@ -0,0 +1,92 @@
+import { Card, Col, Row, Table } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setSelectedJobTargetPc } from "../../../redux/application/application.actions";
+import { selectAuditData } from "../../../redux/reporting/reporting.selectors";
+import { DateFormat } from "../../../util/constants";
+import dayjs from "../../../util/day";
+
+const mapStateToProps = createStructuredSelector({
+  selectAuditData: selectAuditData
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  setSelectedJobTargetPc: (job) => dispatch(setSelectedJobTargetPc(job))
+});
+
+export function AuditResultsOrganism({ selectAuditData }) {
+  console.log("🚀 ~ AuditResultsOrganism ~ selectAuditData:", selectAuditData);
+  const missingColumns = [
+    { key: "clm_no", title: "Claim No.", dataIndex: "clm_no" },
+    {
+      key: "close_date",
+      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" }
+  ];
+
+  const mismatchColumns = [
+    { key: "clm_no", title: "Claim No.", dataIndex: ["rps", "clm_no"] },
+    {
+      key: "close_date",
+      title: "[RPS] R4P",
+      dataIndex: "close_date",
+      render: (text, record) => dayjs(record.rps.close_date).format(DateFormat)
+    },
+    {
+      key: "close_date_audit",
+      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: "expected_rps",
+      title: "[RPS] Expected",
+      dataIndex: ["audit", "expectedRpsDollars"],
+      render: (text, record) => record.rps.expectedRpsDollars.toFormat()
+    },
+    { key: "expected_audit", title: "[AUDIT] Expected", dataIndex: ["audit", "expected_rps_dollars"] },
+    {
+      key: "actual_rps",
+      title: "[RPS] Actual",
+      dataIndex: ["audit", "jobRpsDollars"],
+      render: (text, record) => record.rps.jobRpsDollars.toFormat()
+    },
+    { key: "actual_audit", title: "[Audit] Actual", dataIndex: ["audit", "actual_rps_dollars"] }
+  ];
+  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>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(AuditResultsOrganism);

src/components/organisms/sider-menu/sider-menu.organism.jsx

@@ -1,17 +1,17 @@
 import {
-  PieChartOutlined,
-  SettingFilled,
-  CloseOutlined,
+  AuditOutlined,
   BarChartOutlined,
+  CloseOutlined,
   FileAddFilled,
-  LogoutOutlined
+  LogoutOutlined,
+  PieChartOutlined,
+  SettingFilled
 } from "@ant-design/icons";
 import { Menu } from "antd";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import ipcTypes from "../../../ipc.types";
 import SiderSignOut from "../../molecules/sider-sign-out/sider-sign-out.molecule";
-import { useLocation } from "react-router-dom";
 const { ipcRenderer } = window;
 
 export default function SiderMenuOrganism() {
@@ -40,7 +40,7 @@ export default function SiderMenuOrganism() {
         },
         {
           key: "/audit",
-          icon: <BarChartOutlined />,
+          icon: <AuditOutlined />,
           label: <Link to="/audit">Audit</Link>
         },
         {

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

@@ -1,12 +1,12 @@
-import { Button } from "antd";
+import { Button, DatePicker, Form } from "antd";
 import React from "react";
 import ipcTypes from "../../../ipc.types";
-import ReportingDatesMolecule from "../../molecules/reporting-dates/reporting-dates.molecule";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 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";
 
 const { ipcRenderer } = window;
 
@@ -19,14 +19,66 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(AuditPage);
 
 export function AuditPage({ queryReportingData }) {
-  const handleBrowseForFile = async () => {
-    queryReportingData({ startDate: dayjs("2024-03-01"), endDate: dayjs("2024-03-31") });
+  const handleBrowseForFile = async ({ dateRange }) => {
+    console.log("🚀 ~ handleBrowseForFile ~ dateRange:", dateRange);
+    queryReportingData({
+      startDate: dateRange[0] || dayjs("2024-03-01"),
+      endDate: dateRange[1] || dayjs("2024-03-31")
+    });
     ipcRenderer.send(ipcTypes.audit.toMain.browseForFile);
   };
+
   return (
-    <div style={{ height: "100%" }}>
-      <ReportingDatesMolecule />
-      <Button onClick={handleBrowseForFile}>Add Path</Button>;
+    <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();
+                }
+
+                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 />
     </div>
   );
 }

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

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