From 489ef3df0d3034c7fa0e4a3f1c9dbb8ebf8809e1 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 22 Sep 2020 10:10:43 -0700
Subject: [PATCH] Replaced appropriate number fields with calculator field.
 BOD-398

---
 .../contract-form/contract-form.component.jsx | 10 +--
 .../courtesy-car-form.component.jsx           |  4 +-
 ...form-input-number-calculator.component.jsx | 39 ++++++------
 .../job-scoreboard-add-button.component.jsx   |  7 ++-
 .../jobs-create-jobs-info.component.jsx       | 61 ++++++++++---------
 .../jobs-detail-general.component.jsx         |  7 ++-
 .../scoreboard-entry-edit.component.jsx       | 12 ++--
 .../shop-info/shop-info.component.jsx         | 13 ++--
 .../tech-job-clock-out-button.component.jsx   | 56 ++++++++---------
 .../time-ticket-modal.component.jsx           |  7 ++-
 .../vendors-form/vendors-form.component.jsx   |  9 +--
 11 files changed, 116 insertions(+), 109 deletions(-)

diff --git a/client/src/components/contract-form/contract-form.component.jsx b/client/src/components/contract-form/contract-form.component.jsx
index cf5ad03f5..bfc4c55b5 100644
--- a/client/src/components/contract-form/contract-form.component.jsx
+++ b/client/src/components/contract-form/contract-form.component.jsx
@@ -6,6 +6,8 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
+
 export default function ContractFormComponent({ form, create = false }) {
   const { t } = useTranslation();
   return (
@@ -298,16 +300,16 @@ export default function ContractFormComponent({ form, create = false }) {
           <InputNumber precision={2} />
         </Form.Item>
         <Form.Item label={t("contracts.fields.federaltax")} name="federaltax">
-          <InputNumber precision={2} />
+          <InputNumberCalculator precision={2} />
         </Form.Item>
         <Form.Item label={t("contracts.fields.statetax")} name="statetax">
-          <InputNumber precision={2} />
+          <InputNumberCalculator precision={2} />
         </Form.Item>
         <Form.Item label={t("contracts.fields.localtax")} name="localtax">
-          <InputNumber precision={2} />
+          <InputNumberCalculator precision={2} />
         </Form.Item>
         <Form.Item label={t("contracts.fields.coverage")} name="coverage">
-          <InputNumber precision={2} />
+          <InputNumberCalculator precision={2} />
         </Form.Item>
       </LayoutFormRow>
     </div>
diff --git a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
index 4c8438bbb..9028503c8 100644
--- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
+++ b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
@@ -7,6 +7,8 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
+
 export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
   const { t } = useTranslation();
   return (
@@ -172,7 +174,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             },
           ]}
         >
-          <InputNumber />
+          <InputNumberCalculator />
         </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.nextservicedate")}
diff --git a/client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx b/client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
index b3f8c35e7..b09f6e69a 100644
--- a/client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
+++ b/client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
@@ -1,31 +1,19 @@
-import { Input, Popover } from "antd";
-import React, { useEffect, useState, forwardRef } from "react";
+import { InputNumber, Popover } from "antd";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 
 const FormInputNUmberCalculator = (
-  { value: formValue, onChange: formOnChange },
-  ref
+  { value: formValue, onChange: formOnChange, ...restProps },
+  refProp
 ) => {
   const [value, setValue] = useState(formValue);
   const [total, setTotal] = useState(0);
   const [history, setHistory] = useState([]);
 
-  const handleChange = (e) => {
-    const key = e.target.value;
-    switch (key) {
-      case "/":
-      case "*":
-      case "+":
-      case "-":
-        return;
-      default:
-        setValue(key);
-        return;
-    }
-  };
+  const ref = useRef(null);
 
   const handleKeyDown = (e) => {
+    console.log("e :>> ", e.currentTarget.value);
     const { key } = e;
-
     let action;
     switch (key) {
       case "/":
@@ -38,11 +26,13 @@ const FormInputNUmberCalculator = (
         action = "=";
         break;
       default:
+        setValue(e.currentTarget.value);
         return;
     }
-
     const val = parseFloat(value);
     setValue(null);
+    ref.current.blur();
+    ref.current.focus();
     if (!isNaN(val)) {
       setHistory([...history, val, action]);
     }
@@ -82,7 +72,12 @@ const FormInputNUmberCalculator = (
         }
       }, 0);
       setTotal(subTotal);
-      if (history[history.length - 1] === "=") setValue(subTotal);
+      if (history[history.length - 1] === "=") {
+        setValue(subTotal);
+        ref.current.blur();
+        ref.current.focus();
+        setHistory([]);
+      }
     }
   }, [history]);
 
@@ -101,13 +96,13 @@ const FormInputNUmberCalculator = (
   return (
     <div>
       <Popover content={popContent} visible={history.length > 0}>
-        <Input
+        <InputNumber
           ref={ref}
           value={value}
           defaultValue={value}
-          onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={(e) => setHistory([])}
+          {...restProps}
         />
       </Popover>
     </div>
diff --git a/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx b/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
index c01cba278..781f716e0 100644
--- a/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
+++ b/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
@@ -1,11 +1,12 @@
 import { useMutation } from "@apollo/react-hooks";
-import { Button, Card, Form, InputNumber, notification, Popover } from "antd";
+import { Button, Card, Form, notification, Popover } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 
 export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
   const { t } = useTranslation();
@@ -68,7 +69,7 @@ export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
               },
             ]}
           >
-            <InputNumber precision={1} />
+            <InputNumberCalculator precision={1} />
           </Form.Item>
           <Form.Item
             label={t("scoreboard.fields.painthrs")}
@@ -80,7 +81,7 @@ export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
               },
             ]}
           >
-            <InputNumber precision={1} />
+            <InputNumberCalculator precision={1} />
           </Form.Item>
 
           <Button type="primary" htmlType="submit">
diff --git a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
index bc0b8f68f..27b12132c 100644
--- a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
+++ b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
@@ -1,10 +1,11 @@
-import { Collapse, Form, Input, InputNumber, Select, Switch } from "antd";
+import { Collapse, Form, Input, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -203,7 +204,7 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
         >
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
               <Input />
@@ -212,38 +213,38 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               label={t("jobs.fields.depreciation_taxes")}
               name="depreciation_taxes"
             >
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             TODO This is equivalent of GST payable.
             <Form.Item
               label={t("jobs.fields.federal_tax_payable")}
               name="federal_tax_payable"
             >
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item
               label={t("jobs.fields.other_amount_payable")}
               name="other_amount_payable"
             >
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item
               label={t("jobs.fields.towing_payable")}
               name="towing_payable"
             >
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item
               label={t("jobs.fields.storage_payable")}
               name="storage_payable"
             >
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item
               label={t("jobs.fields.adjustment_bottom_line")}
               name="adjustment_bottom_line"
             >
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             Totals Table
             <Form.Item
@@ -253,70 +254,70 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               <Input />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lad")} name="rate_lad">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lae")} name="rate_lae">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lar")} name="rate_lar">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_las")} name="rate_las">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_laf")} name="rate_laf">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lam")} name="rate_lam">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lag")} name="rate_lag">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_lau")} name="rate_lau">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_la1")} name="rate_la1">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_la2")} name="rate_la2">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_la3")} name="rate_la3">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_la4")} name="rate_la4">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_mapa")} name="rate_mapa">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_mash")} name="rate_mash">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_mahw")} name="rate_mahw">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_ma2s")} name="rate_ma2s">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_ma3s")} name="rate_ma3s">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_mabl")} name="rate_mabl">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_macs")} name="rate_macs">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
             <Form.Item label={t("jobs.fields.rate_laa")} name="rate_laa">
-              <InputNumber />
+              <InputNumberCalculator />
             </Form.Item>
           </LayoutFormRow>
         </Collapse.Panel>
diff --git a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
index 6357bfa12..9e9432f6f 100644
--- a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
+++ b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
@@ -1,10 +1,11 @@
-import { Col, Form, Input, InputNumber, Row, Select, Switch } from "antd";
+import { Col, Form, Input, Row, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
@@ -109,10 +110,10 @@ export function JobsDetailGeneral({ bodyshop, job, form }) {
               <FormDatePicker />
             </Form.Item>
             <Form.Item label={t("jobs.fields.kmin")} name="kmin">
-              <InputNumber precision={1} min={0} />
+              <InputNumberCalculator precision={1} min={0} />
             </Form.Item>
             <Form.Item label={t("jobs.fields.kmout")} name="kmout">
-              <InputNumber precision={1} min={0} />
+              <InputNumberCalculator precision={1} min={0} />
             </Form.Item>
             <Form.Item label={t("jobs.fields.ponumber")} name="po_number">
               <Input />
diff --git a/client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx b/client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx
index cc9822b74..7fff296dd 100644
--- a/client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx
+++ b/client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx
@@ -1,9 +1,11 @@
-import { Button, Card, Dropdown, Form, InputNumber, notification } from "antd";
+import { Button, Card, Dropdown, Form, notification } from "antd";
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
 import { UPDATE_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
+
 export default function ScoreboardEntryEdit({ entry }) {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -62,7 +64,7 @@ export default function ScoreboardEntryEdit({ entry }) {
             },
           ]}
         >
-          <InputNumber precision={1} />
+          <InputNumberCalculator precision={1} />
         </Form.Item>
         <Form.Item
           label={t("scoreboard.fields.painthrs")}
@@ -74,7 +76,7 @@ export default function ScoreboardEntryEdit({ entry }) {
             },
           ]}
         >
-          <InputNumber precision={1} />
+          <InputNumberCalculator precision={1} />
         </Form.Item>
 
         <Button type="primary" loading={loading} htmlType="submit">
diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index d2a0c8471..548ad5d9a 100644
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -11,17 +11,18 @@ import {
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
+import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
+import ShopInfoLaborRates from "./shop-info.laborrates.component";
 import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
 import ShopInfoRbacComponent from "./shop-info.rbac.component";
 import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
-import ShopInfoLaborRates from "./shop-info.laborrates.component";
-import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
 
 export default function ShopInfoComponent({ form, saveLoading }) {
   const { t } = useTranslation();
@@ -195,7 +196,7 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                 },
               ]}
             >
-              <InputNumber min={0} precision={0} />
+              <InputNumberCalculator min={0} precision={0} />
             </Form.Item>
 
             <Form.Item
@@ -208,7 +209,7 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                 },
               ]}
             >
-              <InputNumber min={0} precision={0} />
+              <InputNumberCalculator min={0} precision={0} />
             </Form.Item>
 
             <Form.Item
@@ -233,7 +234,7 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                 },
               ]}
             >
-              <InputNumber min={1} precision={1} />
+              <InputNumberCalculator min={1} precision={1} />
             </Form.Item>
             <Form.Item
               name={["md_referral_sources"]}
@@ -541,7 +542,7 @@ export default function ShopInfoComponent({ form, saveLoading }) {
               },
             ]}
           >
-            <InputNumber min={0.1} precision={1} />
+            <InputNumberCalculator min={0.1} precision={1} />
           </Form.Item>
         </Collapse.Panel>
         <Collapse.Panel
diff --git a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
index d6ed5e1b8..e55c598f6 100644
--- a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
+++ b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
@@ -1,23 +1,16 @@
 import { useMutation } from "@apollo/react-hooks";
-import {
-  Button,
-  Card,
-  Form,
-  InputNumber,
-  notification,
-  Popover,
-  Select,
-} from "antd";
+import { Button, Card, Form, notification, Popover, Select } from "antd";
+import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
-import axios from "axios";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
+import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -72,7 +65,7 @@ export function TechClockOffButton({
       <div>
         <Form
           form={form}
-          layout='vertical'
+          layout="vertical"
           onFinish={handleFinish}
           initialValues={{
             cost_center: isShiftTicket
@@ -80,46 +73,50 @@ export function TechClockOffButton({
               : technician
               ? technician.cost_center
               : null,
-          }}>
+          }}
+        >
           {!isShiftTicket ? (
             <div>
               <Form.Item
                 label={t("timetickets.fields.actualhrs")}
-                name='actualhrs'
+                name="actualhrs"
                 rules={[
                   {
                     required: true,
                     message: t("general.validation.required"),
                   },
-                ]}>
-                <InputNumber precision={1} />
+                ]}
+              >
+                <InputNumberCalculator precision={1} />
               </Form.Item>
               <Form.Item
                 label={t("timetickets.fields.productivehrs")}
-                name='productivehrs'
+                name="productivehrs"
                 rules={[
                   {
                     required: true,
                     message: t("general.validation.required"),
                   },
-                ]}>
-                <InputNumber precision={1} />
+                ]}
+              >
+                <InputNumberCalculator precision={1} />
               </Form.Item>
             </div>
           ) : null}
 
           <Form.Item
-            name='cost_center'
+            name="cost_center"
             label={t("timetickets.fields.cost_center")}
             rules={[
               {
                 required: true,
                 message: t("general.validation.required"),
               },
-            ]}>
+            ]}
+          >
             <Select disabled={isShiftTicket}>
               {isShiftTicket ? (
-                <Select.Option value='timetickets.labels.shift'>
+                <Select.Option value="timetickets.labels.shift">
                   {t("timetickets.labels.shift")}
                 </Select.Option>
               ) : (
@@ -131,17 +128,20 @@ export function TechClockOffButton({
               )}
             </Select>
           </Form.Item>
-          <Button type='primary' htmlType='submit' loading={loading}>
+          <Button type="primary" htmlType="submit" loading={loading}>
             {t("general.actions.save")}
           </Button>
-          <TechJobClockoutDelete completedCallback={completedCallback} timeTicketId={timeTicketId} />
+          <TechJobClockoutDelete
+            completedCallback={completedCallback}
+            timeTicketId={timeTicketId}
+          />
         </Form>
       </div>
     </Card>
   );
 
   return (
-    <Popover content={overlay} trigger='click'>
+    <Popover content={overlay} trigger="click">
       <Button loading={loading} {...otherBtnProps}>
         {t("timetickets.actions.clockout")}
       </Button>
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
index 2d698a33d..96e228405 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -1,8 +1,9 @@
-import { Form, Input, InputNumber, Select } from "antd";
+import { Form, Input, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 
@@ -77,7 +78,7 @@ export default function TimeTicketModalComponent({
             },
           ]}
         >
-          <InputNumber min={0} precision={1} />
+          <InputNumberCalculator min={0} precision={1} />
         </Form.Item>
         <Form.Item
           label={t("timetickets.fields.actualhrs")}
@@ -89,7 +90,7 @@ export default function TimeTicketModalComponent({
             },
           ]}
         >
-          <InputNumber min={0} precision={1} />
+          <InputNumberCalculator min={0} precision={1} />
         </Form.Item>
         <Form.Item
           name="cost_center"
diff --git a/client/src/components/vendors-form/vendors-form.component.jsx b/client/src/components/vendors-form/vendors-form.component.jsx
index c720b2c9f..a72da4f13 100644
--- a/client/src/components/vendors-form/vendors-form.component.jsx
+++ b/client/src/components/vendors-form/vendors-form.component.jsx
@@ -1,8 +1,9 @@
-import { Button, Form, Input, InputNumber,  Select } from "antd";
+import { DeleteFilled } from "@ant-design/icons";
+import { Button, Form, Input, InputNumber, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import { DeleteFilled } from "@ant-design/icons";
 
 export default function VendorsFormComponent({
   form,
@@ -87,7 +88,7 @@ export default function VendorsFormComponent({
         label={t("vendors.fields.prompt_discount")}
         name="prompt_discount"
       >
-        <InputNumber />
+        <InputNumberCalculator />
       </Form.Item>
       <Form.Item label={t("vendors.fields.name")} name="name">
         <Input />
@@ -111,7 +112,7 @@ export default function VendorsFormComponent({
         <Input />
       </Form.Item>
       <Form.Item label={t("vendors.fields.discount")} name="discount">
-        <InputNumber />
+        <InputNumberCalculator />
       </Form.Item>
       <Form.Item label={t("vendors.fields.country")} name="country">
         <Input />