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

client/src/components/bill-enter-ai-scan/bill-enter-ai-scan.component.jsx

@@ -0,0 +1,203 @@
+import { Button, Tag, Modal, Typography } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { FaWandMagicSparkles } from "react-icons/fa6";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext";
+import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+
+const mapStateToProps = createStructuredSelector({
+  billEnterModal: selectBillEnterModal,
+  bodyshop: selectBodyshop
+});
+
+function BillEnterAiScan({
+  billEnterModal,
+  bodyshop,
+  pollingIntervalRef,
+  setPollingIntervalRef,
+  form,
+  fileInputRef,
+  scanLoading,
+  setScanLoading,
+  setIsAiScan
+}) {
+  const notification = useNotification();
+  const { t } = useTranslation();
+  const [showBetaModal, setShowBetaModal] = useState(false);
+  const BETA_ACCEPTANCE_KEY = "ai_scan_beta_acceptance";
+  const handleBetaAcceptance = () => {
+    localStorage.setItem(BETA_ACCEPTANCE_KEY, "true");
+    setShowBetaModal(false);
+    fileInputRef.current?.click();
+  };
+
+  const checkBetaAcceptance = () => {
+    const hasAccepted = localStorage.getItem(BETA_ACCEPTANCE_KEY);
+    if (hasAccepted) {
+      fileInputRef.current?.click();
+    } else {
+      setShowBetaModal(true);
+    }
+  };
+
+  // Polling function for multipage PDF status
+  const pollJobStatus = async (textractJobId) => {
+    try {
+      const { data } = await axios.get(`/ai/bill-ocr/status/${textractJobId}`);
+
+      if (data.status === "COMPLETED") {
+        // Stop polling
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+          setPollingIntervalRef(null);
+        }
+        setScanLoading(false);
+
+        // Update form with the extracted data
+        if (data?.data?.billForm) {
+          form.setFieldsValue(data.data.billForm);
+          await form.validateFields(["billlines"], { recursive: true });
+          notification.success({
+            title: t("bills.labels.ai.scancomplete")
+          });
+        }
+      } else if (data.status === "FAILED") {
+        // Stop polling on failure
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+          setPollingIntervalRef(null);
+        }
+        setScanLoading(false);
+
+        notification.error({
+          title: t("bills.labels.ai.scanfailed"),
+          description: data.error || ""
+        });
+      }
+      // If status is IN_PROGRESS, continue polling
+    } catch (error) {
+      // Stop polling on error
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        setPollingIntervalRef(null);
+      }
+      setScanLoading(false);
+
+      notification.error({
+        title: t("bills.labels.ai.scanfailed"),
+        description: error.response?.data?.message || error.message || "Failed to check scan status"
+      });
+    }
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*,application/pdf"
+        style={{ display: "none" }}
+        onChange={async (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            setScanLoading(true);
+            setIsAiScan(true);
+            const formdata = new FormData();
+            formdata.append("billScan", file);
+            formdata.append("jobid", billEnterModal.context.job?.id);
+            formdata.append("bodyshopid", bodyshop.id);
+            formdata.append("partsorderid", billEnterModal.context.parts_order?.id);
+
+            try {
+              const { data, status } = await axios.post("/ai/bill-ocr", formdata);
+
+              // Add the scanned file to the upload field
+              const currentUploads = form.getFieldValue("upload") || [];
+              form.setFieldValue("upload", [
+                ...currentUploads,
+                {
+                  uid: `ai-scan-${Date.now()}`,
+                  name: file.name,
+                  originFileObj: file,
+                  status: "done"
+                }
+              ]);
+              if (status === 202) {
+                // Multipage PDF - start polling
+                notification.info({
+                  title: t("bills.labels.ai.scanstarted"),
+                  description: t("bills.labels.ai.multipage")
+                });
+
+                //Workaround needed to bypass react-compiler error about manipulating refs in child components. Refactor may be needed in the future to clean this up.
+                setPollingIntervalRef(
+                  setInterval(() => {
+                    pollJobStatus(data.textractJobId);
+                  }, 3000)
+                );
+
+                // Initial poll
+                pollJobStatus(data.textractJobId);
+              } else if (status === 200) {
+                // Single page - immediate response
+                setScanLoading(false);
+
+                form.setFieldsValue(data.data.billForm);
+                await form.validateFields(["billlines"], { recursive: true });
+
+                notification.success({
+                  title: t("bills.labels.ai.scancomplete")
+                });
+              }
+            } catch (error) {
+              setScanLoading(false);
+              notification.error({
+                title: t("bills.labels.ai.scanfailed"),
+                description: error.response?.data?.message || error.message || t("bills.labels.ai.generic_failure")
+              });
+            }
+          }
+          // Reset the input so the same file can be selected again
+          e.target.value = "";
+        }}
+      />
+
+      <Button onClick={checkBetaAcceptance} icon={<FaWandMagicSparkles />} loading={scanLoading} disabled={scanLoading}>
+        {scanLoading ? t("bills.labels.ai.processing") : t("bills.labels.ai.scan")}
+        <Tag color="red">{t("general.labels.beta")}</Tag>
+      </Button>
+
+      <Modal
+        title={t("bills.labels.ai.disclaimer_title")}
+        open={showBetaModal}
+        onOk={handleBetaAcceptance}
+        onCancel={() => setShowBetaModal(false)}
+        okText={t("bills.labels.ai.accept_and_continue")}
+        cancelText={t("general.actions.cancel")}
+      >
+        {
+          //This is explicitly not translated.
+        }
+        <Typography.Text>
+          This AI scanning feature is currently in <strong>beta</strong>. While it can accelerate data entry, you{" "}
+          <strong>must carefully review all extracted results</strong> for accuracy.
+        </Typography.Text>
+        <Typography.Text>The AI may make mistakes or miss information. Always verify:</Typography.Text>
+        <ul>
+          <li>All line items and quantities</li>
+          <li>Prices and totals</li>
+          <li>Part numbers and descriptions</li>
+          <li>Any other critical invoice details</li>
+        </ul>
+        <Typography.Text>
+          By continuing, you acknowledge that you will review and verify all AI-generated data before posting.
+        </Typography.Text>
+      </Modal>
+    </>
+  );
+}
+export default connect(mapStateToProps, null)(BillEnterAiScan);

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

@@ -2,10 +2,11 @@ import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
 import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
@@ -21,12 +22,12 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import confirmDialog from "../../utils/asyncConfirm";
 import useLocalStorage from "../../utils/useLocalStorage";
+import BillEnterAiScan from "../bill-enter-ai-scan/bill-enter-ai-scan.component.jsx";
 import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
-import { handleUpload } from "../documents-upload/documents-upload.utility";
 import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import { handleUpload } from "../documents-upload/documents-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -50,18 +51,22 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const [updatePartsOrderLines] = useMutation(MUTATION_MARK_RETURN_RECEIVED);
   const [updateInventoryLines] = useMutation(UPDATE_INVENTORY_LINES);
   const [loading, setLoading] = useState(false);
+  const [scanLoading, setScanLoading] = useState(false);
+  const [isAiScan, setIsAiScan] = useState(false);
   const client = useApolloClient();
   const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
   const notification = useNotification();
+  const fileInputRef = useRef(null);
+  const pollingIntervalRef = useRef(null);
 
   const {
-    treatments: { Enhanced_Payroll, Imgproxy }
+    treatments: { Enhanced_Payroll, Imgproxy, Bill_OCR_AI }
   } = useTreatmentsWithConfig({
     attributes: {},
-    names: ["Enhanced_Payroll", "Imgproxy"],
+    names: ["Enhanced_Payroll", "Imgproxy", "Bill_OCR_AI"],
     splitKey: bodyshop.imexshopid
   });
-
+  
   const formValues = useMemo(() => {
     return {
       ...billEnterModal.context.bill,
@@ -113,6 +118,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
                     create_ppc,
                     // eslint-disable-next-line no-unused-vars
                     original_actual_price,
+                    // eslint-disable-next-line no-unused-vars
+                    confidence,
                     ...restI
                   } = i;
 
@@ -378,6 +385,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         vendorid: values.vendorid,
         billlines: []
       });
+      setIsAiScan(false);
       // form.resetFields();
     } else {
       toggleModalVisible();
@@ -388,10 +396,22 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const handleCancel = () => {
     const r = window.confirm(t("general.labels.cancel"));
     if (r === true) {
+      // Clean up polling on cancel
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+      setScanLoading(false);
+      setIsAiScan(false);
       toggleModalVisible();
     }
   };
 
+  //Workaround needed to bypass react-compiler error about manipulating refs in child components. Refactor may be needed in the future to clean this up.
+  const setPollingIntervalRef = (func) => {
+    pollingIntervalRef.current = func;
+  };
+
   useEffect(() => {
     if (enterAgain) form.submit();
   }, [enterAgain, form]);
@@ -401,12 +421,44 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       form.setFieldsValue(formValues);
     } else {
       form.resetFields();
+      // Clean up polling on modal close
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+      setScanLoading(false);
+      setIsAiScan(false);
     }
   }, [billEnterModal.open, form, formValues]);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <Modal
-      title={t("bills.labels.new")}
+      title={
+        <Space size="large">
+          {t("bills.labels.new")}
+          {Bill_OCR_AI.treatment === "on" && (
+            <BillEnterAiScan
+              fileInputRef={fileInputRef}
+              form={form}
+              pollingIntervalRef={pollingIntervalRef}
+              setPollingIntervalRef={setPollingIntervalRef}
+              scanLoading={scanLoading}
+              setScanLoading={setScanLoading}
+              setIsAiScan={setIsAiScan}
+            />
+          )}
+        </Space>
+      }
       width={"98%"}
       open={billEnterModal.open}
       okText={t("general.actions.save")}
@@ -452,7 +504,11 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         }}
       >
         <RbacWrapper action="bills:enter">
-          <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
+          <BillFormContainer
+            form={form}
+            isAiScan={isAiScan}
+            disableInvNumber={billEnterModal.context.disableInvNumber}
+          />
         </RbacWrapper>
       </Form>
     </Modal>

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 }}>

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" && (

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

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;

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -187,6 +187,7 @@ export function PartsOrderListTableDrawerComponent({
               actions: { refetch: refetch },
               context: {
                 job: job,
+                parts_order: { id: record.id },
                 bill: {
                   vendorid: record.vendor.id,
                   is_credit_memo: record.return,

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -162,6 +162,7 @@ export function PartsOrderListTableComponent({
               actions: { refetch: refetch },
               context: {
                 job: job,
+                parts_order: { id: record.id },
                 bill: {
                   vendorid: record.vendor.id,
                   is_credit_memo: record.return,

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -8,11 +8,19 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => {
   const [option, setOption] = useState(value);
 
+  // Sync internal state when value prop changes (e.g., from form.setFieldsValue)
   useEffect(() => {
-    if (value !== option && onChange) {
-      onChange(option);
+    if (value !== option) {
+      setOption(value);
     }
-  }, [value, option, onChange]);
+  }, [value, option]);
+
+  const handleChange = (newValue) => {
+    setOption(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
 
   const favorites =
     preferredMake && options
@@ -103,7 +111,7 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
         );
       }}
       popupMatchSelectWidth={false}
-      onChange={setOption}
+      onChange={handleChange}
       onSelect={onSelect}
       disabled={disabled || false}
       optionLabelProp="name"