BOD-63 Added CSS styling to prevent overflow. Added totals calculation to invoice screen. Updated packages.

client/src/components/invoice-form/invoice-form.component.jsx

@@ -1,12 +1,13 @@
-import { DatePicker, Form, Input, Switch } from "antd";
-import React, { useState } from "react";
+import { DatePicker, Form, Input, Statistic, Switch } from "antd";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import InvoiceFormLines from "./invoice-form.lines.component";
-import Dinero from "dinero.js";
+import { CalculateInvoiceTotal } from "./invoice-form.totals.utility";
+import "./invoice-form.styles.scss";
 
 export default function InvoiceFormComponent({
   form,
@@ -25,9 +26,22 @@ export default function InvoiceFormComponent({
     setDiscount(opt.discount);
   };
 
+  //TODO: Test this further. Required to set discount when viewing an invoice.
+  useEffect(() => {
+    if (form.getFieldValue("vendorid") && vendorAutoCompleteOptions) {
+      const vendorId = form.getFieldValue("vendorid");
+      const matchingVendors = vendorAutoCompleteOptions.filter(
+        (v) => v.id === vendorId
+      );
+      if (matchingVendors.length === 1) {
+        setDiscount(matchingVendors[0].discount);
+      }
+    }
+  }, [form, setDiscount, vendorAutoCompleteOptions]);
+
   return (
-    <div>
-      <div style={{ display: "flex" }}>
+    <div className="invoice-form-wrapper">
+      <div className="invoice-form-invoice-details">
         <Form.Item
           name="jobid"
           label={t("invoices.fields.ro_number")}
@@ -64,7 +78,7 @@ export default function InvoiceFormComponent({
           />
         </Form.Item>
       </div>
-      <div style={{ display: "flex" }}>
+      <div className="invoice-form-invoice-details">
         <Form.Item
           label={t("invoices.fields.invoice_number")}
           name="invoice_number"
@@ -158,21 +172,62 @@ export default function InvoiceFormComponent({
 
       <Form.Item shouldUpdate>
         {() => {
-          return (
-            <div>
-              {JSON.stringify(form.getFieldsValue(["invoicelines", "total"]))}
-            </div>
+          const totals = CalculateInvoiceTotal(
+            form.getFieldsValue([
+              "invoicelines",
+              "total",
+              "federal_tax_rate",
+              "state_tax_rate",
+              "local_tax_rate",
+            ])
           );
+          if (!!totals)
+            return (
+              <div className="invoice-form-totals">
+                <Statistic
+                  title={t("invoices.labels.subtotal")}
+                  value={totals.subtotal.toFormat()}
+                  precision={2}
+                />
+                <Statistic
+                  title={t("invoices.labels.federal_tax")}
+                  value={totals.federalTax.toFormat()}
+                  precision={2}
+                />
+                <Statistic
+                  title={t("invoices.labels.state_tax")}
+                  value={totals.stateTax.toFormat()}
+                  precision={2}
+                />
+                <Statistic
+                  title={t("invoices.labels.local_tax")}
+                  value={totals.localTax.toFormat()}
+                  precision={2}
+                />
+                <Statistic
+                  title={t("invoices.labels.entered_total")}
+                  value={totals.enteredTotal.toFormat()}
+                  precision={2}
+                />
+                <Statistic
+                  title={t("invoices.labels.invoice_total")}
+                  value={totals.invoiceTotal.toFormat()}
+                  precision={2}
+                />
+                <Statistic
+                  title={t("invoices.labels.discrepancy")}
+                  valueStyle={{
+                    color:
+                      totals.discrepancy.getAmount() === 0 ? "green" : "red",
+                  }}
+                  value={totals.discrepancy.toFormat()}
+                  precision={2}
+                />
+              </div>
+            );
+          return null;
         }}
       </Form.Item>
-
-      <button
-        onClick={() => {
-          console.log(form.getFieldsValue());
-        }}
-      >
-        Get Field Values
-      </button>
     </div>
   );
 }