Merge branch 'feature/IO-3515-ocr-bill-posting' into release/2026-02-27

2026-02-23 11:28:45 -08:00
parent e075361e23 03ad66b2a2
commit fd7970df2c
29 changed files with 3337 additions and 1619 deletions
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -8,12 +8,15 @@ import { MdOpenInNew } from "react-icons/md";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
@@ -21,8 +24,6 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
-import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -43,11 +44,14 @@ export function BillFormComponent({
  loadOutstandingReturns,
  loadInventory,
  preferredMake,
-  disableInHouse
+  disableInHouse,
+  isAiScan
 }) {
  const { t } = useTranslation();
  const client = useApolloClient();
  const [discount, setDiscount] = useState(0);
+  const notification = useNotification();
+  const jobIdFormWatch = Form.useWatch("jobid", form);

  const {
    treatments: { Extended_Bill_Posting, ClosingPeriod }
@@ -123,6 +127,23 @@ export function BillFormComponent({
    bodyshop.inhousevendorid
  ]);

+  useEffect(() => {
+    // When the jobid is set by AI scan, we need to reload the lines. This prevents having to hoist the apollo query.
+    if (jobIdFormWatch !== null) {
+      if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
+        loadLines({ variables: { id: form.getFieldValue("jobid") } });
+        if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
+          loadOutstandingReturns({
+            variables: {
+              jobId: form.getFieldValue("jobid"),
+              vendorId: form.getFieldValue("vendorid")
+            }
+          });
+        }
+      }
+    }
+  }, [jobIdFormWatch, form]);
+
  return (
    <div>
      <FormFieldsChanged form={form} />
@@ -373,7 +394,15 @@ export function BillFormComponent({
            ]);
            let totals;
            if (!!values.total && !!values.billlines && values.billlines.length > 0) {
-              totals = CalculateBillTotal(values);
+              try {
+                totals = CalculateBillTotal(values);
+              } catch (error) {
+                notification.error({
+                  title: t("bills.errors.calculating_totals"),
+                  message: error.message || t("bills.errors.calculating_totals_generic"),
+                  key: "bill_totals_calculation_error"
+                });
+              }
            }

            if (totals) {
@@ -451,6 +480,7 @@ export function BillFormComponent({
          responsibilityCenters={responsibilityCenters}
          disabled={disabled}
          billEdit={billEdit}
+          isAiScan={isAiScan}
        />
      )}
      <Divider titlePlacement="left" style={{ display: billEdit ? "none" : null }}>
--- a/client/src/components/bill-form/bill-form.container.jsx
+++ b/client/src/components/bill-form/bill-form.container.jsx
@@ -15,7 +15,7 @@ const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse }) {
+export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse,isAiScan }) {
  const {
    treatments: { Simple_Inventory }
  } = useTreatmentsWithConfig({
@@ -50,6 +50,7 @@ export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableI
        loadOutstandingReturns={loadOutstandingReturns}
        loadInventory={loadInventory}
        preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}
+        isAiScan={isAiScan}
      />
      {!billEdit && <BillCmdReturnsTableComponent form={form} returnLoading={returnLoading} returnData={returnData} />}
      {Simple_Inventory.treatment === "on" && (
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -5,14 +5,15 @@ import { useRef } from "react";
 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 { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
+import ConfidenceDisplay from "./bill-form.lines.confidence.component.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -29,7 +30,8 @@ export function BillEnterModalLinesComponent({
  discount,
  form,
  responsibilityCenters,
-  billEdit
+  billEdit,
+  isAiScan
 }) {
  const { t } = useTranslation();
  const { setFieldsValue, getFieldsValue, getFieldValue } = form;
@@ -139,6 +141,29 @@ export function BillEnterModalLinesComponent({

  const columns = (remove) => {
    return [
+      ...(isAiScan
+        ? [
+            {
+              title: t("billlines.fields.confidence"),
+              dataIndex: "confidence",
+              editable: true,
+              width: "5rem",
+              formItemProps: (field) => ({
+                key: `${field.index}confidence`,
+                name: [field.name, "confidence"],
+                label: t("billlines.fields.confidence")
+              }),
+              formInput: (record) => {
+                const rowValue = getFieldValue(["billlines", record.name]);
+                return (
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    <ConfidenceDisplay rowValue={rowValue} />
+                  </div>
+                );
+              }
+            }
+          ]
+        : []),
      {
        title: t("billlines.fields.jobline"),
        dataIndex: "joblineid",
@@ -212,6 +237,7 @@ export function BillEnterModalLinesComponent({
        }),
        formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
      },
+
      {
        title: t("billlines.fields.quantity"),
        dataIndex: "quantity",
@@ -250,7 +276,16 @@ export function BillEnterModalLinesComponent({
          key: `${field.name}actual_price`,
          name: [field.name, "actual_price"],
          label: t("billlines.fields.actual_price"),
-          rules: [{ required: true }]
+          rules: [
+            { required: true },
+            {
+              validator: (_, value) => {
+                return Math.abs(parseFloat(value)) < 0.01 ? Promise.reject() : Promise.resolve();
+              },
+              warningOnly: true
+            }
+          ],
+          hasFeedback: true
        }),
        formInput: (record, index) => (
          <CurrencyInput
--- a/client/src/components/bill-form/bill-form.lines.confidence.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.confidence.component.jsx
@@ -0,0 +1,87 @@
+import { Progress, Space, Tag, Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+const parseConfidence = (confidenceStr) => {
+  if (!confidenceStr || typeof confidenceStr !== "string") return null;
+
+  const match = confidenceStr.match(/T([\d.]+)\s*-\s*O([\d.]+)\s*-\s*J([\d.]+)/);
+  if (!match) return null;
+
+  return {
+    total: parseFloat(match[1]),
+    ocr: parseFloat(match[2]),
+    jobMatch: parseFloat(match[3])
+  };
+};
+
+const getConfidenceColor = (value) => {
+  if (value >= 80) return "green";
+  if (value >= 60) return "orange";
+  if (value >= 40) return "gold";
+  return "red";
+};
+
+const ConfidenceDisplay = ({ rowValue: { confidence, actual_price, actual_cost } }) => {
+  const { t } = useTranslation();
+  const parsed = parseConfidence(confidence);
+  const parsed_actual_price = parseFloat(actual_price);
+  const parsed_actual_cost = parseFloat(actual_cost);
+  if (!parsed) {
+    return <span style={{ color: "#959595", fontSize: "0.85em" }}>N/A</span>;
+  }
+
+  const { total, ocr, jobMatch } = parsed;
+  const color = getConfidenceColor(total);
+
+  return (
+    <Tooltip
+      title={
+        <div style={{ padding: "4px 0" }}>
+          <div style={{ marginBottom: 8, fontWeight: 600 }}>{t("bills.labels.ai.confidence.breakdown")}</div>
+          <div style={{ marginBottom: 4 }}>
+            <strong>{t("bills.labels.ai.confidence.overall")}:</strong> {total.toFixed(1)}%
+            <Progress
+              percent={total}
+              size="small"
+              strokeColor={getConfidenceColor(total)}
+              showInfo={false}
+              style={{ marginTop: 2 }}
+            />
+          </div>
+          <div style={{ marginBottom: 4 }}>
+            <strong>{t("bills.labels.ai.confidence.ocr")}:</strong> {ocr.toFixed(1)}%
+            <Progress
+              percent={ocr}
+              size="small"
+              strokeColor={getConfidenceColor(ocr)}
+              showInfo={false}
+              style={{ marginTop: 2 }}
+            />
+          </div>
+          <div>
+            <strong>{t("bills.labels.ai.confidence.match")}:</strong> {jobMatch.toFixed(1)}%
+            <Progress
+              percent={jobMatch}
+              size="small"
+              strokeColor={getConfidenceColor(jobMatch)}
+              showInfo={false}
+              style={{ marginTop: 2 }}
+            />
+          </div>
+        </div>
+      }
+    >
+      <Space size="small">
+        {!parsed_actual_cost || !parsed_actual_price || parsed_actual_cost === 0 || parsed_actual_price === 0 ? (
+          <Tag color="red" style={{ margin: 0, cursor: "help", userSelect: "none" }}>
+            {t("bills.labels.ai.confidence.missing_data")}
+          </Tag>
+        ) : null}
+        <Tag color={color} style={{ margin: 0, cursor: "help", userSelect: "none" }}>
+          {total.toFixed(0)}%
+        </Tag>
+      </Space>
+    </Tooltip>
+  );
+};
+
+export default ConfidenceDisplay;