BOD-26 Added totals calculation for job reconciliation.

client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx

@@ -0,0 +1,44 @@
+import { Col, Row } from "antd";
+import React, { useState } from "react";
+import JobReconciliationInvoicesTable from "../job-reconciliation-invoices-table/job-reconciliation-invoices-table.component";
+import JobReconciliationPartsTable from "../job-reconciliation-parts-table/job-reconciliation-parts-table.component";
+
+export default function JobReconciliationModalComponent({ job, invoices }) {
+  const jobLineState = useState([]);
+  const invoiceLineState = useState([]);
+
+  const invoiceLineData =
+    invoices
+      .map((i) =>
+        i.invoicelines.map((il) => {
+          return { ...il, is_credit_memo: i.is_credit_memo };
+        })
+      )
+      .flat() || [];
+
+  console.log(
+    "JobReconciliationModalComponent -> invoiceLineData",
+    invoiceLineData
+  );
+
+  const jobLineData = job.joblines.filter((j) => j.part_type !== null);
+
+  return (
+    <div>
+      <Row>
+        <Col span={12}>
+          <JobReconciliationPartsTable
+            jobLineData={jobLineData}
+            jobLineState={jobLineState}
+          />
+        </Col>
+        <Col span={12}>
+          <JobReconciliationInvoicesTable
+            invoiceLineData={invoiceLineData}
+            invoiceLineState={invoiceLineState}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+}

client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx

@@ -0,0 +1,54 @@
+import { Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectReconciliation } from "../../redux/modals/modals.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import JobReconciliationModalComponent from "./job-reconciliation-modal.component";
+
+const mapStateToProps = createStructuredSelector({
+  reconciliationModal: selectReconciliation,
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("reconciliation")),
+});
+
+function InvoiceEnterModalContainer({
+  reconciliationModal,
+  toggleModalVisible,
+  bodyshop,
+  currentUser,
+}) {
+  const { t } = useTranslation();
+  const { actions, context, visible } = reconciliationModal;
+  const { job, invoices } = context;
+
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
+  return (
+    <Modal
+      title={t("jobs.labels.reconciliationheader")}
+      width={"90%"}
+      visible={visible}
+      okText={t("general.actions.save")}
+      onOk={handleCancel}
+      onCancel={handleCancel}
+      destroyOnClose>
+      <JobReconciliationModalComponent job={job} invoices={invoices} />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(InvoiceEnterModalContainer);