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

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

@@ -4,6 +4,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
+import { WarningOutlined } from "@ant-design/icons";
 
 export default function InvoiceEnterModalLinesComponent({
   lineData,
@@ -18,10 +19,10 @@ export default function InvoiceEnterModalLinesComponent({
     <Form.List name="invoicelines">
       {(fields, { add, remove }) => {
         return (
-          <div>
+          <div className="invoice-form-lines-wrapper">
             {fields.map((field, index) => (
               <Form.Item required={false} key={field.key}>
-                <div style={{ display: "flex" }}>
+                <div className="invoice-form-line">
                   <Form.Item
                     label={t("invoicelines.fields.jobline")}
                     key={`${index}joblinename`}
@@ -116,6 +117,23 @@ export default function InvoiceEnterModalLinesComponent({
                   >
                     <CurrencyInput />
                   </Form.Item>
+                  <Form.Item shouldUpdate>
+                    {() => {
+                      const line = getFieldsValue(["invoicelines"])
+                        .invoicelines[index];
+                      if (!!!line) return null;
+                      const lineDiscount = +(
+                        1 -
+                        Math.round(
+                          (line.actual_cost / line.actual_price) * 100
+                        ) /
+                          100
+                      ).toFixed(2);
+
+                      if (lineDiscount === discount) return null;
+                      return <WarningOutlined style={{ color: "red" }} />;
+                    }}
+                  </Form.Item>
                   <Form.Item
                     label={t("invoicelines.fields.cost_center")}
                     key={`${index}cost_center`}
@@ -136,7 +154,7 @@ export default function InvoiceEnterModalLinesComponent({
                   <Form.Item
                     label={t("invoicelines.fields.federal_tax_applicable")}
                     key={`${index}fedtax`}
-                    initialValue={"true"}
+                    initialValue={true}
                     valuePropName="checked"
                     name={[field.name, "applicable_taxes", "federal"]}
                   >
@@ -149,7 +167,7 @@ export default function InvoiceEnterModalLinesComponent({
                     name={[field.name, "applicable_taxes", "state"]}
                   >
                     <Switch />
-                  </Form.Item>{" "}
+                  </Form.Item>
                   <Form.Item
                     label={t("invoicelines.fields.local_tax_applicable")}
                     key={`${index}localtax`}