MAJOR CHANGE: Renamed invoices to bills BOD-410

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

@@ -0,0 +1,58 @@
+import { Statistic } from "antd";
+import Dinero from "dinero.js";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../alert/alert.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import "./job-bills-total.styles.scss";
+
+export default function JobBillsTotalComponent({ loading, bills, jobTotals }) {
+  const { t } = useTranslation();
+
+  if (loading) return <LoadingSkeleton />;
+  if (!!!jobTotals)
+    return (
+      <AlertComponent type="error" message={t("jobs.errors.nofinancial")} />
+    );
+
+  const totals = jobTotals;
+
+  let billTotals = Dinero({ amount: 0 });
+  bills.forEach((i) =>
+    i.billlines.forEach((il) => {
+      billTotals = billTotals.add(
+        Dinero({
+          amount: Math.round(
+            (il.actual_cost || 0) * (i.is_credit_memo ? -1 : 1) * 100
+          ),
+        }).multiply(il.quantity)
+      );
+    })
+  );
+
+  const discrepancy = Dinero(totals.parts.parts.total).subtract(billTotals);
+
+  return (
+    <div className="job-bills-totals-container">
+      <Statistic
+        title={t("jobs.labels.partstotal")}
+        value={Dinero(totals.parts.parts.total).toFormat()}
+      />
+      <Statistic
+        title={t("jobs.labels.subletstotal")}
+        value={Dinero(totals.parts.sublets.total).toFormat()}
+      />
+      <Statistic
+        title={t("bills.labels.retailtotal")}
+        value={billTotals.toFormat()}
+      />
+      <Statistic
+        title={t("bills.labels.discrepancy")}
+        valueStyle={{
+          color: discrepancy.getAmount === 0 ? "green" : "red",
+        }}
+        value={discrepancy.toFormat()}
+      />
+    </div>
+  );
+}

client/src/components/job-bills-total/job-bills-total.styles.scss

@@ -0,0 +1,7 @@
+.job-bills-totals-container {
+  margin: 0rem 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}