feature/IO-3499-React-19: Fix bill edit

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

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectDarkMode } from "../../redux/application/application.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
@@ -14,7 +15,8 @@ import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  isDarkMode: selectDarkMode
 });
 const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -22,6 +24,7 @@ const mapDispatchToProps = () => ({
 
 export function BillEnterModalLinesComponent({
   bodyshop,
+  isDarkMode,
   disabled,
   lineData,
   discount,
@@ -249,19 +252,26 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <CurrencyInput
-            min={0}
-            disabled={disabled}
-            controls={false}
-            addonAfter={
-              <Form.Item shouldUpdate noStyle>
-                {() => {
-                  const line = getFieldsValue(["billlines"]).billlines[index];
-                  if (!line) return null;
-                  let lineDiscount = 1 - line.actual_cost / line.actual_price;
-                  if (isNaN(lineDiscount)) lineDiscount = 0;
-                  return (
-                    <Tooltip title={`${(lineDiscount * 100).toFixed(2) || 0}%`}>
+          <Space.Compact style={{ width: "100%" }}>
+            <CurrencyInput min={0} disabled={disabled} controls={false} style={{ width: "100%" }} />
+            <Form.Item shouldUpdate noStyle>
+              {() => {
+                const line = getFieldsValue(["billlines"]).billlines[index];
+                if (!line) return null;
+                let lineDiscount = 1 - line.actual_cost / line.actual_price;
+                if (isNaN(lineDiscount)) lineDiscount = 0;
+                return (
+                  <Tooltip title={`${(lineDiscount * 100).toFixed(2) || 0}%`}>
+                    <div
+                      style={{
+                        padding: "4px 11px",
+                        display: "flex",
+                        alignItems: "center",
+                        background: isDarkMode ? "#141414" : "#fafafa",
+                        border: isDarkMode ? "1px solid #424242" : "1px solid #d9d9d9",
+                        borderLeft: 0
+                      }}
+                    >
                       <DollarCircleFilled
                         style={{
                           color:
@@ -272,12 +282,12 @@ export function BillEnterModalLinesComponent({
                               : "green"
                         }}
                       />
-                    </Tooltip>
-                  );
-                }}
-              </Form.Item>
-            }
-          />
+                    </div>
+                  </Tooltip>
+                );
+              }}
+            </Form.Item>
+          </Space.Compact>
         )
         // additional: (record, index) => (
         //   <Form.Item shouldUpdate>
@@ -627,7 +637,8 @@ const EditableCell = ({
   // DO NOT mutate rawProps; omit `key` immutably
   const propsFinal = rawProps
     ? (() => {
-        const { ...rest } = rawProps;
+        // eslint-disable-next-line no-unused-vars
+        const { key, ...rest } = rawProps;
         return rest;
       })()
     : undefined;