IO-1672 Updated bill line discount display.

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -245,7 +245,7 @@ function BillEnterModalContainer({
   return (
     <Modal
       title={t("bills.labels.new")}
-      width={"90%"}
+      width={"98%"}
       visible={billEnterModal.visible}
       okText={t("general.actions.save")}
       keyboard="false"

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

@@ -1,4 +1,4 @@
-import { DeleteFilled, WarningOutlined } from "@ant-design/icons";
+import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import {
   Button,
   Form,
@@ -8,6 +8,7 @@ import {
   Space,
   Switch,
   Table,
+  Tooltip,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -201,23 +202,56 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <CurrencyInput min={0} disabled={disabled} />
+          <CurrencyInput
-        ),
+            min={0}
-        additional: (record, index) => (
+            disabled={disabled}
-          <Form.Item shouldUpdate>
+            controls={false}
-            {() => {
+            addonAfter={
-              const line = getFieldsValue(["billlines"]).billlines[index];
+              <Form.Item shouldUpdate noStyle>
-              if (!!!line) return null;
+                {() => {
-              const lineDiscount = (
+                  const line = getFieldsValue(["billlines"]).billlines[index];
-                1 -
+                  if (!!!line) return null;
-                Math.round((line.actual_cost / line.actual_price) * 100) / 100
+                  const lineDiscount = 1 - line.actual_cost / line.actual_price;
-              ).toPrecision(2);
 
-              if (lineDiscount - discount === 0) return <div />;
+                  return (
-              return <WarningOutlined style={{ color: "red" }} />;
+                    <Tooltip title={`${(lineDiscount * 100).toFixed(2) || 0}%`}>
-            }}
+                      <DollarCircleFilled
-          </Form.Item>
+                        style={{
+                          color:
+                            Math.abs(lineDiscount - discount) > 0.005
+                              ? "red"
+                              : "green",
+                        }}
+                      />
+                    </Tooltip>
+                  );
+                }}
+              </Form.Item>
+            }
+          />
         ),
+        // additional: (record, index) => (
+        //   <Form.Item shouldUpdate>
+        //     {() => {
+        //       const line = getFieldsValue(["billlines"]).billlines[index];
+        //       if (!!!line) return null;
+        //       const lineDiscount = (
+        //         1 -
+        //         Math.round((line.actual_cost / line.actual_price) * 100) / 100
+        //       ).toPrecision(2);
+
+        //       return (
+        //         <Tooltip title={`${(lineDiscount * 100).toFixed(0) || 0}%`}>
+        //           <DollarCircleFilled
+        //             style={{
+        //               color: lineDiscount - discount !== 0 ? "red" : "green",
+        //             }}
+        //           />
+        //         </Tooltip>
+        //       );
+        //     }}
+        //   </Form.Item>
+        // ),
       },
       {
         title: t("billlines.fields.cost_center"),