Added invoice totals + high level reconciliation on PLI jobs tab. BOD-26

client/src/components/job-invoices-total/job-invoices-total.component.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import { Statistic, Descriptions } from "antd";
+import { useTranslation } from "react-i18next";
+import Dinero from "dinero.js";
+
+export default function JobInvoiceTotals({ loading, invoices, jobTotals }) {
+  const { t } = useTranslation();
+  if (loading) return <LoadingSkeleton />;
+  const totals = JSON.parse(jobTotals);
+
+  let invoiceTotals = Dinero({ amount: 0 });
+  invoices.forEach((i) =>
+    i.invoicelines.forEach((il) => {
+      invoiceTotals = invoiceTotals.add(
+        Dinero({
+          amount:
+            ((il.actual_price || 0) * i.is_credit_memo ? -1 : 1 || 0) * 100,
+        })
+      );
+    })
+  );
+
+  const discrepancy = Dinero(totals.parts.parts.total).subtract(invoiceTotals);
+
+  return (
+    <div>
+      <Descriptions
+        bordered
+        size='small'
+        column={1}
+        title={t("jobs.labels.partssubletstotal")}>
+        <Descriptions.Item label={t("jobs.labels.partstotal")}>
+          <Statistic
+            value={Dinero(totals.parts.parts.total).toFormat()}
+            suffix={`(${Dinero(
+              totals.parts.parts.subtotal
+            ).toFormat()} ± ${Dinero(
+              totals.parts.parts.adjustments
+            ).toFormat()})`}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label={t("jobs.labels.subletstotal")}>
+          <Statistic
+            value={Dinero(totals.parts.sublets.total).toFormat()}
+            suffix={`(${Dinero(
+              totals.parts.sublets.subtotal
+            ).toFormat()} ± ${Dinero(
+              totals.parts.sublets.adjustments
+            ).toFormat()})`}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label={t("invoices.labels.retailtotal")}>
+          <Statistic value={invoiceTotals.toFormat()} />
+        </Descriptions.Item>
+        <Descriptions.Item label={t("invoices.labels.discrepancy")}>
+          <Statistic
+            valueStyle={{
+              color: discrepancy.getAmount === 0 ? "green" : "red",
+            }}
+            value={discrepancy.toFormat()}
+          />
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+}