Merge branch 'master-AIO' into feature/IO-3515-ocr-bill-posting

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -169,14 +169,20 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
             refetch={refetch}
           />
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
-          <Input value={state.search} onChange={handleSearch} placeholder={t("general.labels.search")} allowClear />
+          <Input
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+            enterButton
+          />
         </Space>
       }
     >
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit, showSizeChanger: false }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -182,14 +182,20 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
             refetch={refetch}
           />
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
-          <Input value={state.search} onChange={handleSearch} placeholder={t("general.labels.search")} allowClear />
+          <Input
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+            enterButton
+          />
         </Space>
       }
     >
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit, showSizeChanger: false }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -204,6 +204,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
             onChange={handleSearch}
             placeholder={t("general.labels.search")}
             allowClear
+            enterButton
           />
         </Space>
       }
@@ -211,7 +212,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit, showSizeChanger: false }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/bill-cm-returns-table/bill-cm-returns-table.component.jsx

@@ -52,6 +52,9 @@ export default function BillCmdReturnsTableComponent({ form, returnLoading, retu
                       {fields.map((field, index) => (
                         <tr key={field.key}>
                           <td>
+                            <Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
                             <Form.Item
                               //   label={t("joblines.fields.line_desc")}
                               key={`${index}line_desc`}

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -77,13 +77,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   return (
     <RbacWrapper action="bills:delete" noauth={<></>}>
       <Popconfirm disabled={bill.exported} onConfirm={handleDelete} title={t("bills.labels.deleteconfirm")}>
-        <Button
-          disabled={bill.exported}
-          // onClick={handleDelete}
-          loading={loading}
-        >
-          <DeleteFilled />
-        </Button>
+        <Button icon={<DeleteFilled />} disabled={bill.exported} loading={loading} />
       </Popconfirm>
     </RbacWrapper>
   );

client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx

@@ -48,7 +48,7 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
               //  db_price: i.actual_price,
               act_price: i.actual_price,
               cost: i.actual_cost,
-              quantity: i.quantity,
+              part_qty: i.quantity,
               joblineid: i.joblineid,
               oem_partno: i.jobline && i.jobline.oem_partno,
               part_type: i.jobline && i.jobline.part_type
@@ -104,6 +104,10 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
                     {fields.map((field, index) => (
                       <tr key={field.key}>
                         <td>
+                          {/* Hidden field to preserve the id */}
+                          <Form.Item name={[field.name, "id"]} hidden>
+                            <input type="hidden" />
+                          </Form.Item>
                           <Form.Item
                             //   label={t("joblines.fields.selected")}
                             key={`${index}selected`}

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

@@ -32,6 +32,7 @@ export function BillFormItemsExtendedFormItem({
   if (!value)
     return (
       <Button
+        icon={<PlusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -53,9 +54,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
-        <PlusCircleFilled />
-      </Button>
+      />
     );
 
   return (
@@ -196,6 +195,7 @@ export function BillFormItemsExtendedFormItem({
       </Form.Item>
 
       <Button
+        icon={<MinusCircleFilled />}
         onClick={() => {
           const values = form.getFieldsValue("billlineskeys");
 
@@ -207,9 +207,7 @@ export function BillFormItemsExtendedFormItem({
             }
           });
         }}
-      >
-        <MinusCircleFilled />
-      </Button>
+      />
     </Space>
   );
 }

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

@@ -373,9 +373,11 @@ export function BillFormComponent({
               "local_tax_rate"
             ]);
             let totals;
-            if (!!values.total && !!values.billlines && values.billlines.length > 0)
+            if (!!values.total && !!values.billlines && values.billlines.length > 0) {
               totals = CalculateBillTotal(values);
-            if (totals)
+            }
+
+            if (totals) {
               return (
                 // TODO: Align is not correct
                 // eslint-disable-next-line react/no-unknown-property
@@ -414,7 +416,7 @@ export function BillFormComponent({
                     <Statistic
                       title={t("bills.labels.discrepancy")}
                       styles={{
-                        value: {
+                        content: {
                           color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
                         }
                       }}
@@ -427,6 +429,7 @@ export function BillFormComponent({
                   ) : null}
                 </div>
               );
+            }
             return null;
           }}
         </Form.Item>

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

@@ -1,6 +1,7 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
+import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -32,14 +33,14 @@ export function BillEnterModalLinesComponent({
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
+  const firstFieldRefs = useRef({});
 
-  // Keep input row heights consistent with the rest of the table controls.
   const CONTROL_HEIGHT = 32;
 
   const normalizeDiscount = (d) => {
     const n = Number(d);
     if (!Number.isFinite(n) || n <= 0) return 0;
-    return n > 1 ? n / 100 : n; // supports 15 or 0.15
+    return n > 1 ? n / 100 : n;
   };
 
   const round2 = (v) => Math.round((v + Number.EPSILON) * 100) / 100;
@@ -79,7 +80,6 @@ export function BillEnterModalLinesComponent({
     return NaN;
   };
 
-  // safe per-field setter (supports AntD 6+ setFieldValue, falls back to setFieldsValue)
   const setLineField = (index, field, value) => {
     if (typeof form.setFieldValue === "function") {
       form.setFieldValue(["billlines", index, field], value);
@@ -92,6 +92,7 @@ export function BillEnterModalLinesComponent({
     });
   };
 
+  // Only fill actual_cost when the user forward-tabs out of Retail (actual_price)
   const autofillActualCost = (index) => {
     Promise.resolve().then(() => {
       const retailRaw = form.getFieldValue(["billlines", index, "actual_price"]);
@@ -115,7 +116,6 @@ export function BillEnterModalLinesComponent({
   };
 
   const getIndicatorShellStyles = (statusColor) => {
-    // bring back the “colored shell” feel around the $ indicator while keeping row height stable
     if (isDarkMode) {
       if (statusColor === "green")
         return { borderColor: "rgba(82, 196, 26, 0.75)", background: "rgba(82, 196, 26, 0.10)" };
@@ -145,7 +145,7 @@ export function BillEnterModalLinesComponent({
         editable: true,
         minWidth: "10rem",
         formItemProps: (field) => ({
-          key: `${field.index}joblinename`,
+          key: `${field.name}joblinename`,
           name: [field.name, "joblineid"],
           label: t("billlines.fields.jobline"),
           rules: [{ required: true }]
@@ -157,6 +157,9 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
+            ref={(el) => {
+              firstFieldRefs.current[index] = el;
+            }}
             disabled={disabled}
             options={lineData}
             style={{
@@ -167,10 +170,9 @@ export function BillEnterModalLinesComponent({
             }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
-              const d = normalizeDiscount(discount);
-              const retail = Number(opt.cost);
-              const computedActual = Number.isFinite(retail) ? round2(retail * (1 - d)) : null;
-
+              // IMPORTANT:
+              // Do NOT autofill actual_cost here. It should only fill when the user forward-tabs
+              // from Retail (actual_price) -> Actual Cost (actual_cost).
               setFieldsValue({
                 billlines: (getFieldValue("billlines") || []).map((item, idx) => {
                   if (idx !== index) return item;
@@ -181,7 +183,7 @@ export function BillEnterModalLinesComponent({
                     quantity: opt.part_qty || 1,
                     actual_price: opt.cost,
                     original_actual_price: opt.cost,
-                    actual_cost: isBlank(item.actual_cost) ? computedActual : item.actual_cost,
+                    // actual_cost intentionally untouched here
                     cost_center: opt.part_type
                       ? bodyshopHasDmsKey(bodyshop)
                         ? opt.part_type !== "PAE"
@@ -203,12 +205,12 @@ export function BillEnterModalLinesComponent({
         editable: true,
         minWidth: "10rem",
         formItemProps: (field) => ({
-          key: `${field.index}line_desc`,
+          key: `${field.name}line_desc`,
           name: [field.name, "line_desc"],
           label: t("billlines.fields.line_desc"),
           rules: [{ required: true }]
         }),
-        formInput: () => <Input.TextArea disabled={disabled} autoSize />
+        formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
       },
       {
         title: t("billlines.fields.confidence"),
@@ -228,17 +230,19 @@ export function BillEnterModalLinesComponent({
         editable: true,
         width: "4rem",
         formItemProps: (field) => ({
-          key: `${field.index}quantity`,
+          key: `${field.name}quantity`,
           name: [field.name, "quantity"],
           label: t("billlines.fields.quantity"),
           rules: [
             { required: true },
             ({ getFieldValue: gf }) => ({
-              validator(rule, value) {
-                if (value && gf("billlines")[field.fieldKey]?.inventories?.length > value) {
+              validator(_, value) {
+                const invLen = gf(["billlines", field.name, "inventories"])?.length ?? 0;
+
+                if (value && invLen > value) {
                   return Promise.reject(
                     t("bills.validation.inventoryquantity", {
-                      number: gf("billlines")[field.fieldKey]?.inventories?.length
+                      number: invLen
                     })
                   );
                 }
@@ -247,7 +251,7 @@ export function BillEnterModalLinesComponent({
             })
           ]
         }),
-        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} />
+        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} tabIndex={0} />
       },
       {
         title: t("billlines.fields.actual_price"),
@@ -255,7 +259,7 @@ export function BillEnterModalLinesComponent({
         width: "8rem",
         editable: true,
         formItemProps: (field) => ({
-          key: `${field.index}actual_price`,
+          key: `${field.name}actual_price`,
           name: [field.name, "actual_price"],
           label: t("billlines.fields.actual_price"),
           rules: [{ required: true }]
@@ -264,9 +268,10 @@ export function BillEnterModalLinesComponent({
           <CurrencyInput
             min={0}
             disabled={disabled}
-            onBlur={() => autofillActualCost(index)}
+            tabIndex={0}
+            // NOTE: Autofill should only happen on forward Tab out of Retail
             onKeyDown={(e) => {
-              if (e.key === "Tab") autofillActualCost(index);
+              if (e.key === "Tab" && !e.shiftKey) autofillActualCost(index);
             }}
           />
         ),
@@ -307,7 +312,7 @@ export function BillEnterModalLinesComponent({
         width: "10rem",
         skipFormItem: true,
         formItemProps: (field) => ({
-          key: `${field.index}actual_cost`,
+          key: `${field.name}actual_cost`,
           name: [field.name, "actual_cost"],
           label: t("billlines.fields.actual_cost"),
           rules: [{ required: true }]
@@ -341,6 +346,7 @@ export function BillEnterModalLinesComponent({
                     min={0}
                     disabled={disabled}
                     controls={false}
+                    tabIndex={0}
                     style={{ width: "100%", height: CONTROL_HEIGHT }}
                     onFocus={() => autofillActualCost(index)}
                   />
@@ -398,14 +404,14 @@ export function BillEnterModalLinesComponent({
         dataIndex: "cost_center",
         editable: true,
         formItemProps: (field) => ({
-          key: `${field.index}cost_center`,
+          key: `${field.name}cost_center`,
           name: [field.name, "cost_center"],
           label: t("billlines.fields.cost_center"),
           valuePropName: "value",
           rules: [{ required: true }]
         }),
         formInput: () => (
-          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
+          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled} tabIndex={0}>
             {bodyshopHasDmsKey(bodyshop)
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
@@ -421,11 +427,11 @@ export function BillEnterModalLinesComponent({
               editable: true,
               label: t("billlines.fields.location"),
               formItemProps: (field) => ({
-                key: `${field.index}location`,
+                key: `${field.name}location`,
                 name: [field.name, "location"]
               }),
               formInput: () => (
-                <Select disabled={disabled}>
+                <Select disabled={disabled} tabIndex={0}>
                   {bodyshop.md_parts_locations.map((loc, idx) => (
                     <Select.Option key={idx} value={loc}>
                       {loc}
@@ -442,10 +448,10 @@ export function BillEnterModalLinesComponent({
         width: "40px",
         formItemProps: (field) => ({
           valuePropName: "checked",
-          key: `${field.index}deductedfromlbr`,
+          key: `${field.name}deductedfromlbr`,
           name: [field.name, "deductedfromlbr"]
         }),
-        formInput: () => <Switch disabled={disabled} />,
+        formInput: () => <Switch disabled={disabled} tabIndex={0} />,
         additional: (record, index) => (
           <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
@@ -528,11 +534,15 @@ export function BillEnterModalLinesComponent({
             editable: true,
             width: "40px",
             formItemProps: (field) => ({
-              key: `${field.index}fedtax`,
+              key: `${field.name}fedtax`,
               valuePropName: "checked",
-              name: [field.name, "applicable_taxes", "federal"]
+              name: [field.name, "applicable_taxes", "federal"],
+              initialValue: InstanceRenderManager({
+                imex: true,
+                rome: false
+              })
             }),
-            formInput: () => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} tabIndex={0} />
           }
         ]
       }),
@@ -543,11 +553,11 @@ export function BillEnterModalLinesComponent({
         editable: true,
         width: "40px",
         formItemProps: (field) => ({
-          key: `${field.index}statetax`,
+          key: `${field.name}statetax`,
           valuePropName: "checked",
           name: [field.name, "applicable_taxes", "state"]
         }),
-        formInput: () => <Switch disabled={disabled} />
+        formInput: () => <Switch disabled={disabled} tabIndex={0} />
       },
 
       ...InstanceRenderManager({
@@ -559,11 +569,11 @@ export function BillEnterModalLinesComponent({
             editable: true,
             width: "40px",
             formItemProps: (field) => ({
-              key: `${field.index}localtax`,
+              key: `${field.name}localtax`,
               valuePropName: "checked",
               name: [field.name, "applicable_taxes", "local"]
             }),
-            formInput: () => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} tabIndex={0} />
           }
         ]
       }),
@@ -573,24 +583,29 @@ export function BillEnterModalLinesComponent({
         dataIndex: "actions",
         render: (text, record) => (
           <Form.Item shouldUpdate noStyle>
-            {() => (
-              <Space wrap>
-                <Button
-                  disabled={disabled || getFieldValue("billlines")[record.fieldKey]?.inventories?.length > 0}
-                  onClick={() => remove(record.name)}
-                >
-                  <DeleteFilled />
-                </Button>
+            {() => {
+              const currentLine = getFieldValue(["billlines", record.name]);
+              const invLen = currentLine?.inventories?.length ?? 0;
 
-                {Simple_Inventory.treatment === "on" && (
-                  <BilllineAddInventory
-                    disabled={!billEdit || form.isFieldsTouched() || form.getFieldValue("is_credit_memo")}
-                    billline={getFieldValue("billlines")[record.fieldKey]}
-                    jobid={getFieldValue("jobid")}
+              return (
+                <Space wrap>
+                  <Button
+                    icon={<DeleteFilled />}
+                    disabled={disabled || invLen > 0}
+                    onClick={() => remove(record.name)}
+                    tabIndex={0}
                   />
-                )}
-              </Space>
-            )}
+
+                  {Simple_Inventory.treatment === "on" && (
+                    <BilllineAddInventory
+                      disabled={!billEdit || form.isFieldsTouched() || form.getFieldValue("is_credit_memo")}
+                      billline={currentLine}
+                      jobid={getFieldValue("jobid")}
+                    />
+                  )}
+                </Space>
+              );
+            }}
           </Form.Item>
         )
       }
@@ -638,8 +653,9 @@ export function BillEnterModalLinesComponent({
               size="small"
               bordered
               dataSource={fields}
+              rowKey="key"
               columns={mergedColumns(remove)}
-              scroll={hasRows ? { x: "max-content" } : undefined} // <-- no scrollbar when empty
+              scroll={hasRows ? { x: "max-content" } : undefined}
               pagination={false}
               rowClassName="editable-row"
             />
@@ -649,12 +665,19 @@ export function BillEnterModalLinesComponent({
                 <Button
                   disabled={disabled}
                   onClick={() => {
+                    const newIndex = fields.length;
                     add(
                       InstanceRenderManager({
                         imex: { applicable_taxes: { federal: true } },
                         rome: { applicable_taxes: { federal: false } }
                       })
                     );
+                    setTimeout(() => {
+                      const firstField = firstFieldRefs.current[newIndex];
+                      if (firstField?.focus) {
+                        firstField.focus();
+                      }
+                    }, 100);
                   }}
                   style={{ width: "100%" }}
                 >
@@ -694,11 +717,7 @@ const EditableCell = ({
   const control = skipFormItem ? (
     (formInput && formInput(record, record.name, propsFinal)) || children
   ) : (
-    <Form.Item
-      labelCol={{ span: 0 }}
-      {...propsFinal}
-      style={{ marginBottom: 0 }} // <-- important: remove default Form.Item margin
-    >
+    <Form.Item labelCol={{ span: 0 }} {...propsFinal} style={{ marginBottom: 0 }}>
       {(formInput && formInput(record, record.name, propsFinal)) || children}
     </Form.Item>
   );
@@ -715,10 +734,7 @@ const EditableCell = ({
   const { style: tdStyle, ...tdRest } = restProps;
 
   const td = (
-    <td
-      {...tdRest}
-      style={{ ...tdStyle, verticalAlign: "middle" }} // optional but helps consistency
-    >
+    <td {...tdRest} style={{ ...tdStyle, verticalAlign: "middle" }}>
       {cellInner}
     </td>
   );

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -17,119 +17,137 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(BilllineAddInventory);
 
 export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled, jobid }) {
   const [loading, setLoading] = useState(false);
-  const { billid } = queryString.parse(useLocation().search);
+  const qs = queryString.parse(useLocation().search);
+  const billid = qs?.billid != null ? String(qs.billid) : null;
+
   const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
   const notification = useNotification();
 
+  const inventoryCount = billline?.inventories?.length ?? 0;
+  const quantity = billline?.quantity ?? 0;
+
   const addToInventory = async () => {
-    setLoading(true);
+    if (loading) return;
 
-    //Check to  make sure there are no existing items already in the inventory.
-
-    const cm = {
-      vendorid: bodyshop.inhousevendorid,
-      invoice_number: "ih",
-      jobid: jobid,
-      isinhouse: true,
-      is_credit_memo: true,
-      date: dayjs().format("YYYY-MM-DD"),
-      federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
-      state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
-      local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
-      total: 0,
-      billlines: [
-        {
-          actual_price: billline.actual_price,
-          actual_cost: billline.actual_cost,
-          quantity: billline.quantity,
-          line_desc: billline.line_desc,
-          cost_center: billline.cost_center,
-          deductedfromlbr: billline.deductedfromlbr,
-          applicable_taxes: {
-            local: billline.applicable_taxes.local,
-            state: billline.applicable_taxes.state,
-            federal: billline.applicable_taxes.federal
-          }
-        }
-      ]
-    };
-
-    cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
-
-    const insertResult = await insertInventoryLine({
-      variables: {
-        joblineId: billline.joblineid === "noline" ? billline.id : billline.joblineid, //This will return null as there will be no jobline that has the id of the bill line.
-        //Unfortunately, we can't send null as the GQL syntax validation fails.
-        joblineStatus: bodyshop.md_order_statuses.default_returned,
-        inv: {
-          shopid: bodyshop.id,
-          billlineid: billline.id,
-          actual_price: billline.actual_price,
-          actual_cost: billline.actual_cost,
-          quantity: billline.quantity,
-          line_desc: billline.line_desc
-        },
-        cm: { ...cm, billlines: { data: cm.billlines } }, //Fix structure for apollo insert.
-        pol: {
-          returnfrombill: billid,
-          vendorid: bodyshop.inhousevendorid,
-          deliver_by: dayjs().format("YYYY-MM-DD"),
-          parts_order_lines: {
-            data: [
-              {
-                line_desc: billline.line_desc,
-
-                act_price: billline.actual_price,
-                cost: billline.actual_cost,
-                quantity: billline.quantity,
-                job_line_id: billline.joblineid === "noline" ? null : billline.joblineid,
-                part_type: billline.jobline && billline.jobline.part_type,
-                cm_received: true
-              }
-            ]
-          },
-          order_date: "2022-06-01",
-          orderedby: currentUser.email,
-          jobid: jobid,
-          user_email: currentUser.email,
-          return: true,
-          status: "Ordered"
-        }
-      },
-      refetchQueries: ["QUERY_BILL_BY_PK"]
-    });
-
-    if (!insertResult.errors) {
-      notification.success({
-        title: t("inventory.successes.inserted")
-      });
-    } else {
+    // Defensive: row identity can transiently desync during remove/add reindexing.
+    if (!billline) {
       notification.error({
-        title: t("inventory.errors.inserting", {
-          error: JSON.stringify(insertResult.errors)
-        })
+        title: t("inventory.errors.inserting", { error: "Bill line is missing (please try again)." })
       });
+      return;
     }
 
-    setLoading(false);
+    setLoading(true);
+
+    try {
+      const taxes = billline?.applicable_taxes ?? {};
+      const cm = {
+        vendorid: bodyshop.inhousevendorid,
+        invoice_number: "ih",
+        jobid: jobid,
+        isinhouse: true,
+        is_credit_memo: true,
+        date: dayjs().format("YYYY-MM-DD"),
+        federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
+        state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
+        local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
+        total: 0,
+        billlines: [
+          {
+            actual_price: billline.actual_price,
+            actual_cost: billline.actual_cost,
+            quantity: billline.quantity,
+            line_desc: billline.line_desc,
+            cost_center: billline.cost_center,
+            deductedfromlbr: billline.deductedfromlbr,
+            applicable_taxes: {
+              local: taxes.local,
+              state: taxes.state,
+              federal: taxes.federal
+            }
+          }
+        ]
+      };
+
+      cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
+
+      const insertResult = await insertInventoryLine({
+        variables: {
+          joblineId: billline.joblineid === "noline" ? billline.id : billline.joblineid,
+          joblineStatus: bodyshop.md_order_statuses.default_returned,
+          inv: {
+            shopid: bodyshop.id,
+            billlineid: billline.id,
+            actual_price: billline.actual_price,
+            actual_cost: billline.actual_cost,
+            quantity: billline.quantity,
+            line_desc: billline.line_desc
+          },
+          cm: { ...cm, billlines: { data: cm.billlines } },
+          pol: {
+            returnfrombill: billid,
+            vendorid: bodyshop.inhousevendorid,
+            deliver_by: dayjs().format("YYYY-MM-DD"),
+            parts_order_lines: {
+              data: [
+                {
+                  line_desc: billline.line_desc,
+                  act_price: billline.actual_price,
+                  cost: billline.actual_cost,
+                  quantity: billline.quantity,
+                  job_line_id: billline.joblineid === "noline" ? null : billline.joblineid,
+                  part_type: billline.jobline && billline.jobline.part_type,
+                  cm_received: true
+                }
+              ]
+            },
+            order_date: "2022-06-01",
+            orderedby: currentUser.email,
+            jobid: jobid,
+            user_email: currentUser.email,
+            return: true,
+            status: "Ordered"
+          }
+        },
+        refetchQueries: ["QUERY_BILL_BY_PK"]
+      });
+
+      if (!insertResult?.errors?.length) {
+        notification.success({
+          title: t("inventory.successes.inserted")
+        });
+      } else {
+        notification.error({
+          title: t("inventory.errors.inserting", {
+            error: JSON.stringify(insertResult.errors)
+          })
+        });
+      }
+    } catch (err) {
+      notification.error({
+        title: t("inventory.errors.inserting", {
+          error: err?.message || String(err)
+        })
+      });
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <Tooltip title={t("inventory.actions.addtoinventory")}>
       <Button
+        icon={<FileAddFilled />}
         loading={loading}
-        disabled={disabled || billline?.inventories?.length >= billline.quantity}
+        disabled={disabled || inventoryCount >= quantity}
         onClick={addToInventory}
       >
-        <FileAddFilled />
-        {billline?.inventories?.length > 0 && <div>({billline?.inventories?.length} in inv)</div>}
+        {inventoryCount > 0 && <div>({inventoryCount} in inv)</div>}
       </Button>
     </Tooltip>
   );

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -84,15 +84,14 @@ export function BillsListTableComponent({
             }
           });
         }}
-      >
-        <FaTasks />
-      </Button>
+        icon={<FaTasks />}
+      />
+
       <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
         data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
         disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
       />
-
       {record.isinhouse && (
         <PrintWrapperComponent
           templateObject={{
@@ -190,9 +189,7 @@ export function BillsListTableComponent({
       title={t("bills.labels.bills")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           {job && job.converted ? (
             <>
               <Button
@@ -235,6 +232,7 @@ export function BillsListTableComponent({
               e.preventDefault();
               setSearchText(e.target.value);
             }}
+            enterButton
           />
         </Space>
       }

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -41,9 +41,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
 
   return (
     <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
-      <Button disabled={disabled} onClick={() => setVisibility(true)}>
-        <CalculatorFilled />
-      </Button>
+      <Button disabled={disabled} onClick={() => setVisibility(true)} icon={<CalculatorFilled />} />
     </Popover>
   );
 }

client/src/components/card-payment-modal/card-payment-modal.component.jsx

@@ -57,7 +57,6 @@ const CardPaymentModalComponent = ({
     QUERY_RO_AND_OWNER_BY_JOB_PKS,
     {
       fetchPolicy: "network-only",
-      notifyOnNetworkStatusChange: true
     }
   );
 

client/src/components/chat-affix/chat-affix.container.jsx

@@ -12,11 +12,16 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
   const client = useApolloClient();
   const { socket } = useSocket();
 
-  // 1) FCM subscription (independent of socket handler registration)
-  useEffect(() => {
-    if (!bodyshop?.messagingservicesid) return;
+  const messagingServicesId = bodyshop?.messagingservicesid;
+  const bodyshopId = bodyshop?.id;
+  const imexshopid = bodyshop?.imexshopid;
 
-    async function subscribeToTopicForFCMNotification() {
+  const messagingEnabled = Boolean(messagingServicesId);
+
+  useEffect(() => {
+    if (!messagingEnabled) return;
+
+    (async () => {
       try {
         await requestForToken();
         await axios.post("/notifications/subscribe", {
@@ -24,23 +29,19 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
             vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
           }),
           type: "messaging",
-          imexshopid: bodyshop.imexshopid
+          imexshopid
         });
       } catch (error) {
         console.log("Error attempting to subscribe to messaging topic: ", error);
       }
-    }
+    })();
+  }, [messagingEnabled, imexshopid]);
 
-    subscribeToTopicForFCMNotification();
-  }, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
-
-  // 2) Register socket handlers as soon as socket is connected (regardless of chatVisible)
   useEffect(() => {
     if (!socket) return;
-    if (!bodyshop?.messagingservicesid) return;
-    if (!bodyshop?.id) return;
+    if (!messagingEnabled) return;
+    if (!bodyshopId) return;
 
-    // If socket isn't connected yet, ensure no stale handlers remain.
     if (!socket.connected) {
       unregisterMessagingHandlers({ socket });
       return;
@@ -56,16 +57,14 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
       bodyshop
     });
 
-    return () => {
-      unregisterMessagingHandlers({ socket });
-    };
-  }, [socket, socket?.connected, bodyshop?.id, bodyshop?.messagingservicesid, client, currentUser?.email]);
+    return () => unregisterMessagingHandlers({ socket });
+  }, [socket, messagingEnabled, bodyshopId, client, currentUser?.email, bodyshop]);
 
-  if (!bodyshop?.messagingservicesid) return <></>;
+  if (!messagingEnabled) return null;
 
   return (
     <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
+      {messagingEnabled ? <ChatPopupComponent /> : null}
     </div>
   );
 }

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -128,7 +128,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         onClick={() => setSelectedConversation(item.id)}
         className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
       >
-        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
+        <Card style={getCardStyle()} variant="outlined" size="small" extra={cardExtra} title={cardTitle}>
           <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
           <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
         </Card>

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,22 +1,23 @@
+import { Button } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { openChatByPhone } from "../../redux/messaging/messaging.actions";
-import PhoneNumberFormatter from "../../utils/PhoneFormatter";
-
 import { createStructuredSelector } from "reselect";
+import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  searchingForConversation: searchingForConversation
+  searchingForConversation
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
+  openChatByPhone: (payload) => dispatch(openChatByPhone(payload))
 });
 
 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
@@ -24,31 +25,59 @@ export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type
   const { socket } = useSocket();
   const notification = useNotification();
 
-  if (!phone) return <></>;
+  if (!phone) return null;
 
-  if (!bodyshop.messagingservicesid) {
-    return <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
-  }
+  const messagingEnabled = Boolean(bodyshop?.messagingservicesid);
 
+  const parsed = useMemo(() => {
+    if (!messagingEnabled) return null;
+    try {
+      return parsePhoneNumber(phone, "CA") || null;
+    } catch {
+      return null;
+    }
+  }, [messagingEnabled, phone]);
+
+  const isValid = Boolean(parsed?.isValid?.() && parsed.isValid());
+  const clickable = messagingEnabled && !searchingForConversation && isValid;
+
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!messagingEnabled) return;
+      if (searchingForConversation) return;
+
+      if (!isValid) {
+        notification.error({ title: t("messaging.error.invalidphone") });
+        return;
+      }
+
+      openChatByPhone({
+        phone_num: parsed.formatInternational(),
+        jobid,
+        socket
+      });
+    },
+    [messagingEnabled, searchingForConversation, isValid, parsed, jobid, socket, openChatByPhone, notification, t]
+  );
+
+  const content = <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
+
+  // If not clickable, render plain formatted text (no link styling)
+  if (!clickable) return content;
+
+  // Clickable: render as a link-styled button (best for a “command”)
   return (
-    <a
-      href="# "
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (searchingForConversation) return; // Prevent finding the same thing twice.
-
-        const p = parsePhoneNumber(phone, "CA");
-        if (p && p.isValid()) {
-          openChatByPhone({ phone_num: p.formatInternational(), jobid, socket });
-        } else {
-          notification.error({ title: t("messaging.error.invalidphone") });
-        }
-      }}
+    <Button
+      type="link"
+      onClick={onClick}
+      className="chat-open-button-link"
+      aria-label={t("messaging.actions.openchat") || "Open chat"}
     >
-      <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>
-    </a>
+      {content}
+    </Button>
   );
 }
 

client/src/components/chat-popup/chat-popup.component.jsx

@@ -47,7 +47,6 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const [getConversations, { loading, data, refetch, called }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    notifyOnNetworkStatusChange: true,
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
@@ -108,9 +107,12 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     hasLoadedConversationsOnceRef.current = true;
 
     getConversations({ variables: { offset: 0 } }).catch((err) => {
-      console.error(`Error fetching conversations: ${err?.message || ""}`, err);
+      // Ignore abort errors (they're expected when component unmounts)
+      if (err?.name !== "AbortError") {
+        console.error(`Error fetching conversations: ${err?.message || ""}`, err);
+      }
     });
-  }, [getConversations]);
+  }, []);
 
   const handleManualRefresh = async () => {
     try {

client/src/components/contract-cars/contract-cars.component.jsx

@@ -99,6 +99,7 @@ export default function ContractsCarsComponent({ loading, data, selectedCarId, h
           placeholder={t("general.labels.search")}
           value={state.search}
           onChange={(e) => setState({ ...state, search: e.target.value })}
+          enterButton
         />
       }
     >

client/src/components/contract-form/contract-form.component.jsx

@@ -1,5 +1,5 @@
 import { WarningFilled } from "@ant-design/icons";
-import { Form, Input, InputNumber, Space } from "antd";
+import { Card, Form, Input, InputNumber, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
@@ -19,9 +19,9 @@ import ContractFormJobPrefill from "./contract-form-job-prefill.component";
 export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
   const { t } = useTranslation();
   return (
-    <>
+    <Card>
       {!create && <FormFieldsChanged form={form} />}
-      <LayoutFormRow>
+      <LayoutFormRow noDivider={true}>
         {!create && (
           <Form.Item
             label={t("contracts.fields.status")}
@@ -310,6 +310,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </>
+    </Card>
   );
 }

client/src/components/contract-jobs/contract-jobs.component.jsx

@@ -123,6 +123,7 @@ export default function ContractsJobsComponent({ loading, data, selectedJob, han
           placeholder={t("general.labels.search")}
           value={state.search}
           onChange={(e) => setState({ ...state, search: e.target.value })}
+          enterButton
         />
       }
     >

client/src/components/contracts-list/contracts-list.component.jsx

@@ -156,15 +156,15 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
             </>
           )}
           <Button onClick={() => setContractFinderContext()}>{t("contracts.actions.find")}</Button>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Input.Search
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {
               const updatedSearch = { ...search, search: value };
               history({ search: queryString.stringify(updatedSearch) });
             }}
+            enterButton
           />
         </Space>
       }

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -1,6 +1,6 @@
 import { WarningFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client/react";
-import { Button, Form, Input, InputNumber, Space } from "antd";
+import { Button, Card, Form, Input, InputNumber, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";
@@ -19,7 +19,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
   const client = useApolloClient();
 
   return (
-    <div>
+    <Card>
       <PageHeader
         title={t("menus.header.courtesycars")}
         extra={
@@ -314,6 +314,6 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
           <CurrencyInput />
         </Form.Item>
       </LayoutFormRow>
-    </div>
+    </Card>
   );
 }

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -255,9 +255,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       title={t("menus.header.courtesycars")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Dropdown trigger="click" menu={menu}>
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -85,13 +85,7 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
   };
 
   return (
-    <Card
-      extra={
-        <Button onClick={() => refetch()}>
-          <SyncOutlined />
-        </Button>
-      }
-    >
+    <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
       <Table
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}

client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx

@@ -96,6 +96,7 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
               e.preventDefault();
               setSearchText(e.target.value);
             }}
+            enterButton
           />
         </Space>
       }

client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx

@@ -36,7 +36,7 @@ export function DashboardTotalProductionHours({ bodyshop, data, ...cardProps })
         <Statistic
           title={t("dashboard.labels.prodhrs")}
           value={hours.total.toFixed(1)}
-          styles={{ value: { color: aboveTargetHours ? "green" : "red" } }}
+          styles={{ content: { color: aboveTargetHours ? "green" : "red" } }}
         />
       </Space>
     </Card>

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -196,9 +196,7 @@ export function DashboardGridComponent({ currentUser }) {
       <PageHeader
         extra={
           <Space>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
             <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } from "antd";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -111,9 +111,8 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
           onClick={() => {
             socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
           }}
-        >
-          <SyncOutlined />
-        </Button>
+          icon={<SyncOutlined />}
+        />
       }
     >
       <Table

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -110,11 +110,7 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
   return (
     <Card
       title={title}
-      extra={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />

client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -329,11 +329,7 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
   return (
     <Card
       title={title}
-      extra={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
-          <SyncOutlined />
-        </Button>
-      }
+      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -49,12 +49,15 @@ export function DmsCdkVehicles({ form, job }) {
         open={open}
         onCancel={() => setOpen(false)}
         onOk={() => {
-          form.setFieldsValue({
-            dms_make: selectedModel.makecode,
-            dms_model: selectedModel.modelcode
-          });
-          setOpen(false);
+          if (selectedModel) {
+            form.setFieldsValue({
+              dms_make: selectedModel.makecode,
+              dms_model: selectedModel.modelcode
+            });
+            setOpen(false);
+          }
         }}
+        okButtonProps={{ disabled: !selectedModel }}
       >
         {error && <AlertComponent title={error.message} type="error" />}
         <Table
@@ -62,6 +65,7 @@ export function DmsCdkVehicles({ form, job }) {
             <Input.Search
               onSearch={(val) => callSearch({ variables: { search: val } })}
               placeholder={t("general.labels.search")}
+              enterButton
             />
           )}
           columns={columns}

client/src/components/dms-customer-selector/dms-customer-selector.component.jsx

@@ -23,13 +23,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsCustomerSelector)
  * @constructor
  */
 export function DmsCustomerSelector(props) {
-  const { bodyshop, jobid, socket, rrOptions = {} } = props;
+  const { bodyshop, jobid, job, socket, rrOptions = {} } = props;
 
   // Centralized "mode" (provider + transport)
   const mode = props.mode;
 
   // Stable base props for children
-  const base = useMemo(() => ({ bodyshop, jobid, socket }), [bodyshop, jobid, socket]);
+  const base = useMemo(() => ({ bodyshop, jobid, job, socket }), [bodyshop, jobid, job, socket]);
 
   switch (mode) {
     case DMS_MAP.reynolds: {

client/src/components/dms-customer-selector/fortellis-customer-selector.jsx

@@ -53,13 +53,13 @@ export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
       render: (_t, r) => <Checkbox disabled checked={r.vinOwner} />
     },
     {
-      title: t("jobs.fields.dms.name1"),
+      title: t("jobs.fields.dms.first_name"),
       dataIndex: ["customerName", "firstName"],
       key: "firstName",
       sorter: (a, b) => alphaSort(a.customerName?.firstName, b.customerName?.firstName)
     },
     {
-      title: t("jobs.fields.dms.name1"),
+      title: t("jobs.fields.dms.last_name"),
       dataIndex: ["customerName", "lastName"],
       key: "lastName",
       sorter: (a, b) => alphaSort(a.customerName?.lastName, b.customerName?.lastName)

client/src/components/dms-customer-selector/rr-customer-selector.jsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Checkbox, Col, message, Space, Table } from "antd";
+import { Alert, Button, Checkbox, message, Modal, Space, Table } from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -47,6 +47,7 @@ const rrAddressToString = (addr) => {
 export default function RRCustomerSelector({
   jobid,
   socket,
+  job,
   rrOpenRoLimit = false,
   onRrOpenRoFinished,
   rrValidationPending = false,
@@ -59,15 +60,26 @@ export default function RRCustomerSelector({
   const [refreshing, setRefreshing] = useState(false);
 
   // Show dialog automatically when validation is pending
+  // BUT: skip this for early RO flow (job already has dms_id)
   useEffect(() => {
-    if (rrValidationPending) setOpen(true);
-  }, [rrValidationPending]);
+    if (rrValidationPending && !job?.dms_id) {
+      setOpen(true);
+    }
+  }, [rrValidationPending, job?.dms_id]);
 
   // Listen for RR customer selection list
   useEffect(() => {
     if (!socket) return;
     const handleRrSelectCustomer = (list) => {
       const normalized = normalizeRrList(list);
+      
+      // If list is empty, it means early RO exists and customer selection should be skipped
+      // Don't open the modal in this case
+      if (normalized.length === 0) {
+        setRefreshing(false);
+        return;
+      }
+      
       setOpen(true);
       setCustomerList(normalized);
       const firstOwner = normalized.find((r) => r.vinOwner)?.custNo;
@@ -127,6 +139,10 @@ export default function RRCustomerSelector({
     });
   };
 
+  const handleClose = () => {
+    setOpen(false);
+  };
+
   const refreshRrSearch = () => {
     setRefreshing(true);
     const to = setTimeout(() => setRefreshing(false), 12000);
@@ -141,8 +157,6 @@ export default function RRCustomerSelector({
     socket.emit("rr-export-job", { jobId: jobid });
   };
 
-  if (!open) return null;
-
   const columns = [
     { title: t("jobs.fields.dms.id"), dataIndex: "custNo", key: "custNo" },
     {
@@ -169,8 +183,45 @@ export default function RRCustomerSelector({
     return !rrOwnerSet.has(String(record.custNo));
   };
 
+  // For early RO flow: show validation banner even when modal is closed
+  if (!open) {
+    if (rrValidationPending && job?.dms_id) {
+      return (
+        <div style={{ marginBottom: 16 }}>
+          <Alert
+            type="info"
+            showIcon
+            title="Complete Validation in Reynolds"
+            description={
+              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                <div>
+                  We created the Repair Order. Please validate the totals and taxes in the DMS system. When done,
+                  click <strong>Finished</strong> to finalize and mark this export as complete.
+                </div>
+                <div>
+                  <Space>
+                    <Button type="primary" onClick={onValidationFinished}>
+                      Finished
+                    </Button>
+                  </Space>
+                </div>
+              </div>
+            }
+          />
+        </div>
+      );
+    }
+    return null;
+  }
+
   return (
-    <Col span={24}>
+    <Modal
+      open={open}
+      onCancel={handleClose}
+      footer={null}
+      width={800}
+      title={t("dms.selectCustomer")}
+    >
       <Table
         title={() => (
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
@@ -196,8 +247,8 @@ export default function RRCustomerSelector({
               />
             )}
 
-            {/* Validation step banner */}
-            {rrValidationPending && (
+            {/* Validation step banner - only show for NON-early RO flow (legacy) */}
+            {rrValidationPending && !job?.dms_id && (
               <Alert
                 type="info"
                 showIcon
@@ -262,6 +313,6 @@ export default function RRCustomerSelector({
           getCheckboxProps: (record) => ({ disabled: rrDisableRow(record) })
         }}
       />
-    </Col>
+    </Modal>
   );
 }

client/src/components/dms-log-events/dms-log-events.component.jsx

@@ -69,7 +69,7 @@ export function DmsLogEvents({
         return {
           key: idx,
           color: logLevelColor(level),
-          children: (
+          content: (
             <Space orientation="vertical" size={4} style={{ display: "flex" }}>
               {/* Row 1: summary + inline "Details" toggle */}
               <Space wrap align="start">
@@ -113,7 +113,7 @@ export function DmsLogEvents({
     [logs, openSet, colorizeJson, isDarkMode, showDetails]
   );
 
-  return <Timeline pending reverse items={items} />;
+  return <Timeline reverse items={items} />;
 }
 
 /**

client/src/components/dms-post-form/cdklike-dms-post-form.jsx

@@ -272,7 +272,7 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                         name={[field.name, "name"]}
                         rules={[{ required: true }]}
                       >
-                        <Select style={{ minWidth: "15rem" }} onSelect={(value) => handlePayerSelect(value, index)}>
+                        <Select style={{ width: "100%" }} onSelect={(value) => handlePayerSelect(value, index)}>
                           {bodyshop.cdk_configuration?.payers?.map((payer) => (
                             <Select.Option key={payer.name}>{payer.name}</Select.Option>
                           ))}
@@ -404,7 +404,7 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                 <Typography.Title>=</Typography.Title>
                 <Statistic
                   title={t("jobs.labels.dms.notallocated")}
-                  styles={{ value: { color: discrep.getAmount() === 0 ? "green" : "red" } }}
+                  styles={{ content: { color: discrep.getAmount() === 0 ? "green" : "red" } }}
                   value={discrep.toFormat()}
                 />
                 <Button disabled={disablePost} htmlType="submit">

client/src/components/dms-post-form/rr-dms-post-form.jsx

@@ -208,8 +208,18 @@ export default function RRPostForm({
     });
   };
 
+  // Check if early RO was created (job has all early RO fields)
+  const hasEarlyRO = !!(job?.dms_id && job?.dms_customer_id && job?.dms_advisor_id);
+
   return (
     <Card title={t("jobs.labels.dms.postingform")}>
+      {hasEarlyRO && (
+        <Typography.Paragraph type="success" strong style={{ marginBottom: 16 }}>
+          ✅ {t("jobs.labels.dms.earlyro.created")} {job.dms_id}
+          <br />
+          <Typography.Text type="secondary">{t("jobs.labels.dms.earlyro.willupdate")}</Typography.Text>
+        </Typography.Paragraph>
+      )}
       <Form
         form={form}
         layout="vertical"
@@ -218,96 +228,96 @@ export default function RRPostForm({
         initialValues={initialValues}
       >
         <Row gutter={[16, 12]} align="bottom">
-          {/* Advisor + inline Refresh */}
-          <Col xs={24} sm={24} md={12} lg={8}>
-            <Form.Item label={t("jobs.fields.dms.advisor")} required>
-              <Space.Compact block>
-                <Form.Item
-                  name="advisorNo"
-                  noStyle
-                  rules={[{ required: true, message: t("general.validation.required") }]}
-                >
-                  <Select
-                    style={{ flex: 1 }}
-                    loading={advLoading}
-                    allowClear
-                    placeholder={t("general.actions.select", "Select...")}
-                    popupMatchSelectWidth
-                    options={advisors
-                      .map((a) => {
-                        const value = getAdvisorNumber(a);
-                        if (value == null) return null;
-                        return { value: String(value), label: getAdvisorLabel(a) || String(value) };
-                      })
-                      .filter(Boolean)}
-                    notFoundContent={advLoading ? t("general.labels.loading") : t("general.labels.none")}
-                  />
-                </Form.Item>
-                <Tooltip title={t("general.actions.refresh")}>
-                  <Button
-                    aria-label={t("general.actions.refresh")}
-                    icon={<ReloadOutlined />}
-                    onClick={() => fetchRrAdvisors(true)}
-                    loading={advLoading}
-                  />
-                </Tooltip>
-              </Space.Compact>
-            </Form.Item>
-          </Col>
-
-          {/* RR OpCode (prefix / base / suffix) */}
-          <Col xs={24} sm={12} md={12} lg={8}>
-            <Form.Item
-              required
-              label={
-                <Space size="small" align="center">
-                  {t("jobs.fields.dms.rr_opcode", "RR OpCode")}
-                  {isCustomOpCode && (
+          {/* Advisor + inline Refresh - Only show if no early RO */}
+          {!hasEarlyRO && (
+            <Col xs={24} sm={24} md={12} lg={8}>
+              <Form.Item label={t("jobs.fields.dms.advisor")} required>
+                <Space.Compact block>
+                  <Form.Item
+                    name="advisorNo"
+                    noStyle
+                    rules={[{ required: true, message: t("general.validation.required") }]}
+                  >
+                    <Select
+                      style={{ flex: 1 }}
+                      loading={advLoading}
+                      allowClear
+                      placeholder={t("general.actions.select", "Select...")}
+                      popupMatchSelectWidth
+                      options={advisors
+                        .map((a) => {
+                          const value = getAdvisorNumber(a);
+                          if (value == null) return null;
+                          return { value: String(value), label: getAdvisorLabel(a) || String(value) };
+                        })
+                        .filter(Boolean)}
+                      notFoundContent={advLoading ? t("general.labels.loading") : t("general.labels.none")}
+                    />
+                  </Form.Item>
+                  <Tooltip title={t("general.actions.refresh")}>
                     <Button
-                      type="link"
-                      size="small"
-                      icon={<RollbackOutlined />}
-                      onClick={handleResetOpCode}
-                      style={{ padding: 0 }}
-                    >
-                      {t("jobs.fields.dms.rr_opcode_reset", "Reset")}
-                    </Button>
-                  )}
-                </Space>
-              }
-            >
-              <Space.Compact block>
-                <Form.Item name="opPrefix" noStyle>
-                  <Input
-                    allowClear
-                    maxLength={4}
-                    style={{ width: "30%" }}
-                    placeholder={t("jobs.fields.dms.rr_opcode_prefix", "Prefix")}
-                  />
-                </Form.Item>
-                <Form.Item
-                  name="opBase"
-                  noStyle
-                  rules={[{ required: true, message: t("general.validation.required") }]}
-                >
-                  <Input
-                    allowClear
-                    maxLength={10}
-                    style={{ width: "40%" }}
-                    placeholder={t("jobs.fields.dms.rr_opcode_base", "Base")}
-                  />
-                </Form.Item>
-                <Form.Item name="opSuffix" noStyle>
-                  <Input
-                    allowClear
-                    maxLength={4}
-                    style={{ width: "30%" }}
-                    placeholder={t("jobs.fields.dms.rr_opcode_suffix", "Suffix")}
-                  />
-                </Form.Item>
-              </Space.Compact>
-            </Form.Item>
-          </Col>
+                      aria-label={t("general.actions.refresh")}
+                      icon={<ReloadOutlined />}
+                      onClick={() => fetchRrAdvisors(true)}
+                      loading={advLoading}
+                    />
+                  </Tooltip>
+                </Space.Compact>
+              </Form.Item>
+            </Col>
+          )}
+
+          {/* RR OpCode (prefix / base / suffix) - Only show if no early RO */}
+          {!hasEarlyRO && (
+            <Col xs={24} sm={12} md={12} lg={8}>
+              <Form.Item
+                required
+                label={
+                  <Space size="small" align="center">
+                    {t("jobs.fields.dms.rr_opcode", "RR OpCode")}
+                    {isCustomOpCode && (
+                      <Button
+                        type="link"
+                        size="small"
+                        icon={<RollbackOutlined />}
+                        onClick={handleResetOpCode}
+                        style={{ padding: 0 }}
+                      >
+                        {t("jobs.fields.dms.rr_opcode_reset", "Reset")}
+                      </Button>
+                    )}
+                  </Space>
+                }
+              >
+                <Space.Compact block>
+                  <Form.Item name="opPrefix" noStyle>
+                    <Input
+                      allowClear
+                      maxLength={4}
+                      style={{ width: "30%" }}
+                      placeholder={t("jobs.fields.dms.rr_opcode_prefix", "Prefix")}
+                    />
+                  </Form.Item>
+                  <Form.Item name="opBase" noStyle rules={[{ required: true }]}>
+                    <Input
+                      allowClear
+                      maxLength={10}
+                      style={{ width: "40%" }}
+                      placeholder={t("jobs.fields.dms.rr_opcode_base", "Base")}
+                    />
+                  </Form.Item>
+                  <Form.Item name="opSuffix" noStyle>
+                    <Input
+                      allowClear
+                      maxLength={4}
+                      style={{ width: "30%" }}
+                      placeholder={t("jobs.fields.dms.rr_opcode_suffix", "Suffix")}
+                    />
+                  </Form.Item>
+                </Space.Compact>
+              </Form.Item>
+            </Col>
+          )}
 
           <Col xs={12} sm={8} md={6} lg={4}>
             <Form.Item name="kmin" label={t("jobs.fields.kmin")} initialValue={job?.kmin} rules={[{ required: true }]}>
@@ -355,13 +365,14 @@ export default function RRPostForm({
         {/* Validation  */}
         <Form.Item shouldUpdate>
           {() => {
-            const advisorOk = !!form.getFieldValue("advisorNo");
+            // When early RO exists, advisor is already set, so we don't need to validate it
+            const advisorOk = hasEarlyRO ? true : !!form.getFieldValue("advisorNo");
             return (
               <Space size="large" wrap align="center">
                 <Statistic title={t("jobs.labels.subtotal")} value={totals.totalSale.toFormat()} />
                 <Typography.Title>=</Typography.Title>
-                <Button disabled={!advisorOk} htmlType="submit">
-                  {t("jobs.actions.dms.post")}
+                <Button disabled={!advisorOk} htmlType="submit" type={hasEarlyRO ? "default" : "primary"}>
+                  {hasEarlyRO ? t("jobs.actions.dms.update_ro") : t("jobs.actions.dms.post")}
                 </Button>
               </Space>
             );

client/src/components/dms-post-form/rr-early-ro-form.jsx

@@ -0,0 +1,367 @@
+import { ReloadOutlined } from "@ant-design/icons";
+import { Alert, Button, Form, Input, InputNumber, Modal, Radio, Select, Space, Table, Typography } from "antd";
+import { useEffect, useMemo, useState } from "react";
+
+// Simple customer selector table
+function CustomerSelectorTable({ customers, onSelect, isSubmitting }) {
+  const [selectedCustNo, setSelectedCustNo] = useState(null);
+
+  const columns = [
+    {
+      title: "Select",
+      key: "select",
+      width: 80,
+      render: (_, record) => (
+        <Radio checked={selectedCustNo === record.custNo} onChange={() => setSelectedCustNo(record.custNo)} />
+      )
+    },
+    { title: "Customer ID", dataIndex: "custNo", key: "custNo" },
+    { title: "Name", dataIndex: "name", key: "name" },
+    {
+      title: "VIN Owner",
+      key: "vinOwner",
+      render: (_, record) => (record.vinOwner || record.isVehicleOwner ? "Yes" : "No")
+    }
+  ];
+
+  return (
+    <div>
+      <Table columns={columns} dataSource={customers} rowKey="custNo" pagination={false} size="small" />
+      <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
+        <Button
+          type="primary"
+          onClick={() => onSelect(selectedCustNo, false)}
+          disabled={!selectedCustNo || isSubmitting}
+          loading={isSubmitting}
+        >
+          Use Selected Customer
+        </Button>
+        <Button onClick={() => onSelect(null, true)} disabled={isSubmitting} loading={isSubmitting}>
+          Create New Customer
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * RR Early RO Creation Form
+ * Used from convert button or admin page to create minimal RO before full export
+ * @param bodyshop
+ * @param socket
+ * @param job
+ * @param onSuccess - callback when RO is created successfully
+ * @param onCancel - callback to close modal
+ * @param showCancelButton - whether to show cancel button
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function RREarlyROForm({ bodyshop, socket, job, onSuccess, onCancel, showCancelButton = true }) {
+  const [form] = Form.useForm();
+
+  // Advisors
+  const [advisors, setAdvisors] = useState([]);
+  const [advLoading, setAdvLoading] = useState(false);
+
+  // Customer selection
+  const [customerCandidates, setCustomerCandidates] = useState([]);
+  const [showCustomerSelector, setShowCustomerSelector] = useState(false);
+
+  // Loading and success states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [earlyRoCreated, setEarlyRoCreated] = useState(!!job?.dms_id);
+  const [createdRoNumber, setCreatedRoNumber] = useState(job?.dms_id || null);
+
+  // Derive default OpCode parts from bodyshop config (matching dms.container.jsx logic)
+  const initialValues = useMemo(() => {
+    const cfg = bodyshop?.rr_configuration || {};
+    const defaults =
+      cfg.opCodeDefault ||
+      cfg.op_code_default ||
+      cfg.op_codes?.default ||
+      cfg.defaults?.opCode ||
+      cfg.defaults ||
+      cfg.default ||
+      {};
+
+    const prefix = defaults.prefix ?? defaults.opCodePrefix ?? "";
+    const base = defaults.base ?? defaults.opCodeBase ?? "";
+    const suffix = defaults.suffix ?? defaults.opCodeSuffix ?? "";
+
+    return {
+      kmin: job?.kmin || 0,
+      opPrefix: prefix,
+      opBase: base,
+      opSuffix: suffix
+    };
+  }, [bodyshop, job]);
+
+  const getAdvisorNumber = (a) => a?.advisorId;
+  const getAdvisorLabel = (a) => `${a?.firstName || ""} ${a?.lastName || ""}`.trim();
+
+  const fetchRrAdvisors = (refresh = false) => {
+    if (!socket) return;
+    setAdvLoading(true);
+
+    const onResult = (payload) => {
+      try {
+        const list = payload?.result ?? payload ?? [];
+        setAdvisors(Array.isArray(list) ? list : []);
+      } finally {
+        setAdvLoading(false);
+        socket.off("rr-get-advisors:result", onResult);
+      }
+    };
+
+    socket.once("rr-get-advisors:result", onResult);
+    socket.emit("rr-get-advisors", { departmentType: "B", refresh }, (ack) => {
+      if (ack?.ok) {
+        const list = ack.result ?? [];
+        setAdvisors(Array.isArray(list) ? list : []);
+      } else if (ack) {
+        console.error("Error fetching RR Advisors:", ack.error);
+      }
+      setAdvLoading(false);
+      socket.off("rr-get-advisors:result", onResult);
+    });
+  };
+
+  useEffect(() => {
+    fetchRrAdvisors(false);
+  }, [bodyshop?.id, socket]);
+
+  const handleStartEarlyRO = async (values) => {
+    if (!socket) {
+      console.error("Socket not available");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    const txEnvelope = {
+      advisorNo: values.advisorNo,
+      story: values.story || "",
+      kmin: values.kmin || job?.kmin || 0,
+      opPrefix: values.opPrefix || "",
+      opBase: values.opBase || "",
+      opSuffix: values.opSuffix || ""
+    };
+
+    // Emit the early RO creation request
+    socket.emit("rr-create-early-ro", {
+      jobId: job.id,
+      txEnvelope
+    });
+
+    // Wait for customer selection
+    const customerListener = (candidates) => {
+      console.log("Received rr-select-customer event with candidates:", candidates);
+      setCustomerCandidates(candidates || []);
+      setShowCustomerSelector(true);
+      setIsSubmitting(false);
+      socket.off("rr-select-customer", customerListener);
+    };
+
+    socket.once("rr-select-customer", customerListener);
+
+    // Handle failures
+    const failureListener = (payload) => {
+      if (payload?.jobId === job.id) {
+        console.error("Early RO creation failed:", payload.error);
+        alert(`Failed to create early RO: ${payload.error}`);
+        setIsSubmitting(false);
+        setShowCustomerSelector(false);
+        socket.off("export-failed", failureListener);
+        socket.off("rr-select-customer", customerListener);
+      }
+    };
+
+    socket.once("export-failed", failureListener);
+  };
+
+  const handleCustomerSelected = (custNo, createNew = false) => {
+    if (!socket) return;
+
+    console.log("handleCustomerSelected called:", { custNo, createNew, custNoType: typeof custNo });
+
+    setIsSubmitting(true);
+    setShowCustomerSelector(false);
+
+    const payload = {
+      jobId: job.id,
+      custNo: createNew ? null : custNo,
+      create: createNew
+    };
+
+    console.log("Emitting rr-early-customer-selected:", payload);
+
+    // Emit customer selection
+    socket.emit("rr-early-customer-selected", payload, (ack) => {
+      console.log("Received ack from rr-early-customer-selected:", ack);
+      setIsSubmitting(false);
+
+      if (ack?.ok) {
+        const roNumber = ack.dmsRoNo || ack.outsdRoNo;
+        setEarlyRoCreated(true);
+        setCreatedRoNumber(roNumber);
+        onSuccess?.({ roNumber, ...ack });
+      } else {
+        alert(`Failed to create early RO: ${ack?.error || "Unknown error"}`);
+      }
+    });
+
+    // Also listen for socket events
+    const successListener = (payload) => {
+      if (payload?.jobId === job.id) {
+        const roNumber = payload.dmsRoNo || payload.outsdRoNo;
+        console.log("Early RO created:", roNumber);
+        socket.off("rr-early-ro-created", successListener);
+        socket.off("export-failed", failureListener);
+      }
+    };
+
+    const failureListener = (payload) => {
+      if (payload?.jobId === job.id) {
+        console.error("Early RO creation failed:", payload.error);
+        setIsSubmitting(false);
+        setEarlyRoCreated(false);
+        socket.off("rr-early-ro-created", successListener);
+        socket.off("export-failed", failureListener);
+      }
+    };
+
+    socket.once("rr-early-ro-created", successListener);
+    socket.once("export-failed", failureListener);
+  };
+
+  // If early RO already created, show success message
+  if (earlyRoCreated) {
+    return (
+      <Alert
+        title="Early Reynolds RO Created"
+        description={`RO Number: ${createdRoNumber || "N/A"} - You can now convert the job.`}
+        type="success"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+    );
+  }
+
+  // If showing customer selector, render modal
+  if (showCustomerSelector) {
+    return (
+      <>
+        <Typography.Title level={5}>Create Early Reynolds RO</Typography.Title>
+        <Typography.Paragraph type="secondary">Waiting for customer selection...</Typography.Paragraph>
+
+        <Modal
+          title="Select Customer for Early RO"
+          open={true}
+          width={800}
+          footer={null}
+          onCancel={() => {
+            setShowCustomerSelector(false);
+            setIsSubmitting(false);
+          }}
+        >
+          <CustomerSelectorTable
+            customers={customerCandidates}
+            onSelect={handleCustomerSelected}
+            isSubmitting={isSubmitting}
+          />
+        </Modal>
+      </>
+    );
+  }
+
+  // Handle manual submit (since we can't nest forms)
+  const handleManualSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      handleStartEarlyRO(values);
+    } catch (error) {
+      console.error("Validation failed:", error);
+    }
+  };
+
+  // Show the form
+  return (
+    <div style={{ marginTop: 16 }}>
+      <Typography.Title level={5}>Create Early Reynolds RO</Typography.Title>
+      <Typography.Paragraph type="secondary" style={{ fontSize: "12px" }}>
+        Complete this section to create a minimal RO in Reynolds before converting the job.
+      </Typography.Paragraph>
+
+      <Form form={form} layout="vertical" component={false} initialValues={initialValues}>
+        <Form.Item name="advisorNo" label="Advisor" rules={[{ required: true, message: "Please select an advisor" }]}>
+          <Select
+            showSearch={{
+              optionFilterProp: "children",
+              filterOption: (input, option) => (option?.children?.toLowerCase() ?? "").includes(input.toLowerCase())
+            }}
+            loading={advLoading}
+            placeholder="Select advisor..."
+            popupRender={(menu) => (
+              <>
+                {menu}
+                <Button
+                  type="link"
+                  icon={<ReloadOutlined />}
+                  onClick={() => fetchRrAdvisors(true)}
+                  style={{ width: "100%", textAlign: "left" }}
+                >
+                  Refresh Advisors
+                </Button>
+              </>
+            )}
+          >
+            {advisors.map((adv) => (
+              <Select.Option key={getAdvisorNumber(adv)} value={getAdvisorNumber(adv)}>
+                {getAdvisorLabel(adv)}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          name="kmin"
+          label="Mileage In"
+          rules={[
+            { required: true, message: "Please enter initial mileage" },
+            { type: "number", min: 1, message: "Mileage must be greater than 0" }
+          ]}
+        >
+          <InputNumber min={1} style={{ width: "100%" }} />
+        </Form.Item>
+
+        {/* RR OpCode (prefix / base / suffix) */}
+        <Form.Item required label="RR OpCode">
+          <Space.Compact block>
+            <Form.Item name="opPrefix" noStyle>
+              <Input allowClear maxLength={4} style={{ width: "30%" }} placeholder="Prefix" />
+            </Form.Item>
+            <Form.Item name="opBase" noStyle rules={[{ required: true, message: "Base Required" }]}>
+              <Input allowClear maxLength={10} style={{ width: "40%" }} placeholder="Base" />
+            </Form.Item>
+            <Form.Item name="opSuffix" noStyle>
+              <Input allowClear maxLength={4} style={{ width: "30%" }} placeholder="Suffix" />
+            </Form.Item>
+          </Space.Compact>
+        </Form.Item>
+
+        <Form.Item name="story" label="Comments / Story (Optional)">
+          <Input.TextArea rows={2} maxLength={240} showCount placeholder="Enter comments or story..." />
+        </Form.Item>
+
+        <div style={{ marginTop: 16 }}>
+          <Space>
+            <Button type="primary" onClick={handleManualSubmit} loading={isSubmitting} disabled={advLoading}>
+              Create Early RO
+            </Button>
+            {showCancelButton && <Button onClick={onCancel}>Cancel</Button>}
+          </Space>
+        </div>
+      </Form>
+    </div>
+  );
+}

client/src/components/dms-post-form/rr-early-ro-modal.jsx

@@ -0,0 +1,33 @@
+import { Modal } from "antd";
+import RREarlyROForm from "./rr-early-ro-form";
+
+/**
+ * Modal wrapper for RR Early RO Creation Form
+ * @param open - boolean to control modal visibility
+ * @param onClose - callback when modal is closed
+ * @param onSuccess - callback when RO is created successfully
+ * @param bodyshop - bodyshop object
+ * @param socket - socket.io connection
+ * @param job - job object
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function RREarlyROModal({ open, onClose, onSuccess, bodyshop, socket, job }) {
+  const handleSuccess = (result) => {
+    onSuccess?.(result);
+    onClose?.();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={700}
+      destroyOnHidden
+      title="Create Reynolds Repair Order"
+    >
+      <RREarlyROForm bodyshop={bodyshop} socket={socket} job={job} onSuccess={handleSuccess} onCancel={onClose} />
+    </Modal>
+  );
+}

client/src/components/global-search/global-search.component.jsx

@@ -14,8 +14,11 @@ export default function GlobalSearch() {
   const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
   const navigate = useNavigate();
 
-  const executeSearch = (v) => {
-    if (v && v.variables.search && v.variables.search !== "" && v.variables.search.length >= 3) callSearch(v);
+  const executeSearch = (variables) => {
+    if (variables?.search !== "" && variables?.search?.length >= 3)
+      callSearch({
+        variables
+      });
   };
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
@@ -157,7 +160,9 @@ export default function GlobalSearch() {
   return (
     <AutoComplete
       options={options}
-      onSearch={handleSearch}
+      showSearch={{
+        onSearch: handleSearch
+      }}
       defaultActiveFirstOption
       onKeyDown={(e) => {
         if (e.key !== "Enter") return;

client/src/components/inventory-line-delete/inventory-line-delete.component.jsx

@@ -53,9 +53,7 @@ export default function InventoryLineDelete({ inventoryline, disabled, refetch }
         onConfirm={handleDelete}
         title={t("inventory.labels.deleteconfirm")}
       >
-        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={disabled || inventoryline.consumedbybillid} loading={loading} icon={<DeleteFilled />} />
       </Popconfirm>
     </RbacWrapper>
   );

client/src/components/inventory-list/inventory-list.component.jsx

@@ -110,9 +110,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
+
           <InventoryLineDelete inventoryline={record} refetch={refetch} />
         </Space>
       )
@@ -155,9 +155,9 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
                 context: {}
               });
             }}
-          >
-            <FileAddFilled />
-          </Button>
+            icon={<FileAddFilled />}
+          />
+
           <Button
             onClick={() => {
               const updatedSearch = { ...search };
@@ -172,9 +172,8 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
             {search.showall ? t("inventory.labels.showavailable") : t("inventory.labels.showall")}
           </Button>
 
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -97,7 +97,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
   return (
     <>
       <Button onClick={showModal}>{t("printcenter.jobs.3rdpartypayer")}</Button>
-      <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+      <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel} getContainer={() => document.body}>
         <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
           <Form.Item label={t("bills.fields.vendor")} name="vendorid">
             <VendorSearchSelect options={VendorAutoCompleteData?.vendors} onSelect={handleVendorSelect} />

client/src/components/job-at-change/schedule-event.note.component.jsx

@@ -61,9 +61,7 @@ export function ScheduleEventNote({ event }) {
         ) : (
           <Input.TextArea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: "8vw" }} />
         )}
-        <Button onClick={toggleEdit} loading={loading}>
-          {editing ? <SaveFilled /> : <EditFilled />}
-        </Button>
+        <Button onClick={toggleEdit} loading={loading} icon={editing ? <SaveFilled /> : <EditFilled />} />
       </Space>
     </DataLabel>
   );

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -159,9 +159,8 @@ export function JobAuditTrail({ bodyshop, jobId }) {
               onClick={() => {
                 refetch();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
           }
         >
           <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />

client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx

@@ -61,9 +61,12 @@ export default function JobIntakeTemplateList({ templates }) {
         renderItem={(template) => (
           <List.Item
             actions={[
-              <Button key="checkListTemplateButton" loading={loading} onClick={() => renderTemplate(template)}>
-                <PrinterFilled />
-              </Button>
+              <Button
+                key="checkListTemplateButton"
+                loading={loading}
+                onClick={() => renderTemplate(template)}
+                icon={<PrinterFilled />}
+              />
             ]}
           >
             <List.Item.Meta

client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx

@@ -76,6 +76,7 @@ export default function JobCostingPartsTable({ data, summaryData }) {
                   e.preventDefault();
                   setSearchText(e.target.value);
                 }}
+                enterButton
               />
             </Space>
           );

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -50,7 +50,8 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines, tec
       config: {
         status: bodyshop.md_ro_statuses.default_open,
         bodyshopid: bodyshop.id,
-        useremail: currentUser.email
+        useremail: currentUser.email,
+        timezone: bodyshop.timezone
       },
       currentUser
     });

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -395,9 +395,8 @@ export function JobLinesComponent({
                         context: { ...record, jobid: job.id }
                       });
                     }}
-                  >
-                    <EditFilled />
-                  </Button>
+                    icon={<EditFilled />}
+                  />
                 )}
                 <Button
                   title={t("tasks.buttons.create")}
@@ -409,9 +408,9 @@ export function JobLinesComponent({
                       }
                     });
                   }}
-                >
-                  <FaTasks />
-                </Button>
+                  icon={<FaTasks />}
+                />
+
                 {(record.manual_line || jobIsPrivate) && !technician && (
                   <Button
                     disabled={jobRO}
@@ -431,9 +430,8 @@ export function JobLinesComponent({
                       await axios.post("/job/totalsssu", { id: job.id });
                       if (refetch) refetch();
                     }}
-                  >
-                    <DeleteFilled />
-                  </Button>
+                    icon={<DeleteFilled />}
+                  />
                 )}
               </Space>
             )
@@ -542,9 +540,7 @@ export function JobLinesComponent({
         title={t("jobs.labels.estimatelines")}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
 
             {/* Bulk Update Location */}
             <Button
@@ -609,8 +605,8 @@ export function JobLinesComponent({
 
                   setSelectedLines([]);
                 }}
+                icon={<HomeOutlined />}
               >
-                <HomeOutlined />
                 {t("parts.actions.orderinhouse")}
                 {selectedLines.length > 0 && ` (${selectedLines.length})`}
               </Button>
@@ -641,6 +637,7 @@ export function JobLinesComponent({
 
             {!isPartsEntry && (
               <Button
+                icon={<FilterFilled />}
                 id="job-lines-filter-parts-only-button"
                 onClick={() => {
                   setState((state) => ({
@@ -652,7 +649,7 @@ export function JobLinesComponent({
                   }));
                 }}
               >
-                <FilterFilled /> {t("jobs.actions.filterpartsonly")}
+                {t("jobs.actions.filterpartsonly")}
               </Button>
             )}
 
@@ -685,6 +682,7 @@ export function JobLinesComponent({
                 e.preventDefault();
                 setSearchText(e.target.value);
               }}
+              enterButton
             />
           </Space>
         }

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -187,9 +187,8 @@ export function JobLineConvertToLabor({
               loading={loading}
               onClick={handleClick}
               {...otherBtnProps}
-            >
-              <ClockCircleOutlined />
-            </Button>
+              icon={<ClockCircleOutlined />}
+            />
           </Tooltip>
         </Popover>
       )}

client/src/components/job-parts-queue-count/job-parts-queue-count.component.jsx

@@ -1,29 +1,65 @@
 import { useMemo } from "react";
-import { Tag, Tooltip } from "antd";
+import { Tooltip } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
+
+const colorMap = {
+  gray: { bg: "#fafafa", border: "#d9d9d9", text: "#000000" },
+  gold: { bg: "#fffbe6", border: "#ffe58f", text: "#d48806" },
+  red: { bg: "#fff1f0", border: "#ffccc7", text: "#cf1322" },
+  blue: { bg: "#e6f7ff", border: "#91d5ff", text: "#0958d9" },
+  green: { bg: "#f6ffed", border: "#b7eb8f", text: "#389e0d" },
+  orange: { bg: "#fff7e6", border: "#ffd591", text: "#d46b08" }
+};
+
+function CompactTag({ color = "gray", children, tooltip = "" }) {
+  const colors = colorMap[color] || colorMap.gray;
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 2px",
+        fontSize: "12px",
+        lineHeight: "20px",
+        backgroundColor: colors.bg,
+        border: `1px solid ${colors.border}`,
+        borderRadius: "2px",
+        color: colors.text,
+        minWidth: "24px",
+        textAlign: "center"
+      }}
+    >
+      <Tooltip title={tooltip}>{children}</Tooltip>
+    </span>
+  );
+}
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobPartsQueueCount);
 
 export function JobPartsQueueCount({ bodyshop, parts }) {
-  const { t } = useTranslation();
   const partsStatus = useMemo(() => {
     if (!parts) return null;
+
     const statusKeys = ["default_bo", "default_ordered", "default_received", "default_returned"];
+
     return parts.reduce(
       (acc, val) => {
         if (val.part_type === "PAS" || val.part_type === "PASL") return acc;
-        acc.total = acc.total + val.count;
-        acc[val.status] = acc[val.status] + val.count;
+
+        acc.total += val.count;
+
+        // NOTE: if val.status is null, object key becomes "null"
+        acc[val.status] = (acc[val.status] ?? 0) + val.count;
+
         return acc;
       },
       {
@@ -34,45 +70,38 @@ export function JobPartsQueueCount({ bodyshop, parts }) {
     );
   }, [bodyshop, parts]);
 
-  if (!parts) return null;
+  if (!parts || !partsStatus) return null;
+
   return (
     <div
       style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(40px, 1fr))",
-        gap: "8px",
-        width: "100%",
-        justifyItems: "start"
+        display: "inline-flex", // ✅ shrink-wraps, fixes the “extra box” to the right
+        gap: 2,
+        alignItems: "center",
+        whiteSpace: "nowrap"
       }}
     >
-      <Tooltip title="Total">
-        <Tag style={{ minWidth: "40px", textAlign: "center" }}>{partsStatus.total}</Tag>
-      </Tooltip>
-      <Tooltip title={t("dashboard.errors.status_normal")}>
-        <Tag color="gold" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus["null"]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_bo}>
-        <Tag color="red" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_bo]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
-        <Tag color="blue" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_ordered]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_received}>
-        <Tag color="green" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_received]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_returned}>
-        <Tag color="orange" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_returned]}
-        </Tag>
-      </Tooltip>
+      <CompactTag tooltip="Total" color="gray">
+        {partsStatus.total}
+      </CompactTag>
+
+      <CompactTag tooltip="No Status" color="gold">
+        {partsStatus["null"]}
+      </CompactTag>
+
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_bo} color="red">
+        {partsStatus[bodyshop.md_order_statuses.default_bo]}
+      </CompactTag>
+
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_ordered} color="blue">
+        {partsStatus[bodyshop.md_order_statuses.default_ordered]}
+      </CompactTag>
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_received} color="green">
+        {partsStatus[bodyshop.md_order_statuses.default_received]}
+      </CompactTag>
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_returned} color="orange">
+        {partsStatus[bodyshop.md_order_statuses.default_returned]}
+      </CompactTag>
     </div>
   );
 }

client/src/components/job-parts-received/job-parts-received.component.jsx

@@ -18,10 +18,17 @@ const mapStateToProps = createStructuredSelector({
  * @param parts
  * @param displayMode
  * @param popoverPlacement
+ * @param countsOnly
  * @returns {JSX.Element}
  * @constructor
  */
-export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popoverPlacement = "top" }) {
+export function JobPartsReceived({
+  bodyshop,
+  parts,
+  displayMode = "full",
+  popoverPlacement = "top",
+  countsOnly = false
+}) {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -61,6 +68,8 @@ export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popove
     [canOpen]
   );
 
+  if (countsOnly) return <JobPartsQueueCount parts={parts} />;
+
   const displayText =
     displayMode === "compact" ? summary.percentLabel : `${summary.percentLabel} (${summary.received}/${summary.total})`;
 
@@ -74,7 +83,7 @@ export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popove
       trigger={["click"]}
       placement={popoverPlacement}
       content={
-        <div onClick={stop} style={{ minWidth: 260 }}>
+        <div onClick={stop}>
           <JobPartsQueueCount parts={parts} />
         </div>
       }
@@ -99,7 +108,8 @@ JobPartsReceived.propTypes = {
   bodyshop: PropTypes.object,
   parts: PropTypes.array,
   displayMode: PropTypes.oneOf(["full", "compact"]),
-  popoverPlacement: PropTypes.string
+  popoverPlacement: PropTypes.string,
+  countsOnly: PropTypes.bool
 };
 
 export default connect(mapStateToProps)(JobPartsReceived);

client/src/components/job-payments/job-payments.component.jsx

@@ -107,9 +107,8 @@ export function JobPayments({ job, bodyshop, setPaymentContext, setCardPaymentCo
                 context: record
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
           <PrintWrapperComponent
             templateObject={{
               name: TemplateList("payment").payment_receipt.key,

client/src/components/job-sync-button/job-sync-button.component.jsx

@@ -11,8 +11,7 @@ export default function JobSyncButton({ job }) {
   };
   if (job?.available_jobs && job?.available_jobs?.length > 0)
     return (
-      <Button onClick={handleClick}>
-        <SyncOutlined />
+      <Button onClick={handleClick} icon={<SyncOutlined />}>
         {t("jobs.actions.sync")}
       </Button>
     );

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -53,10 +53,8 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus">
-      <Button shape="round">
+      <Button icon={<DownCircleFilled />} iconPlacement="end" shape="round">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -94,11 +94,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     {
       title: t("general.labels.actions"),
       key: "actions",
-      render: (text, record) => (
-        <Button onClick={() => handleImport(record.filepath)}>
-          <DownloadOutlined />
-        </Button>
-      )
+      render: (text, record) => <Button icon={<DownloadOutlined />} onClick={() => handleImport(record.filepath)} />
     }
   ];
 
@@ -126,21 +122,21 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
       extra={
         <Space wrap>
           <Button
+            icon={<SyncOutlined />}
             loading={loading}
             disabled={!partnerVersion}
             onClick={() => {
               scanEstimates();
             }}
             id="scan-estimates-button"
-          >
-            <SyncOutlined />
-          </Button>
+          />
 
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
               setSearchText(e.currentTarget.value);
             }}
+            enterButton
           />
         </Space>
       }

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -135,17 +135,16 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
                   refetch();
                 });
               }}
-            >
-              <DeleteFilled />
-            </Button>
+              icon={<DeleteFilled />}
+            />
             {!isClosed && (
               <>
-                <Button onClick={() => addJobAsNew(record)} disabled={record.issupplement}>
-                  <PlusCircleFilled />
-                </Button>
-                <Button onClick={() => addJobAsSupp(record)}>
-                  <DownloadOutlined />
-                </Button>
+                <Button
+                  onClick={() => addJobAsNew(record)}
+                  disabled={record.issupplement}
+                  icon={<PlusCircleFilled />}
+                />
+                <Button onClick={() => addJobAsSupp(record)} icon={<DownloadOutlined />} />
               </>
             )}
             {isClosed && <Alert type="error" title={t("jobs.labels.alreadyclosed")}></Alert>}
@@ -175,9 +174,8 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
             onClick={() => {
               refetch();
             }}
-          >
-            <SyncOutlined />
-          </Button>
+            icon={<SyncOutlined />}
+          />
           <Button
             onClick={() => {
               deleteAllAvailableJobs()
@@ -198,13 +196,16 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
           >
             {t("general.actions.deleteall")}
           </Button>
-
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {
               setSearchText(e.currentTarget.value);
             }}
+            enterButton
           />
+          <Link to="/manage/jobs/new">
+            <Button>{t("jobs.actions.manualnew")}</Button>
+          </Link>
         </Space>
       }
     >

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -96,10 +96,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail, isPar
 
   return (
     <Dropdown menu={statusMenu} trigger={["click"]} key="changestatus" disabled={jobRO || !job.converted}>
-      <Button shape="round">
+      <Button shape="round" icon={<DownCircleFilled />} iconPlacement="end">
         <span>{job.status}</span>
-
-        <DownCircleFilled />
       </Button>
     </Dropdown>
   );

client/src/components/jobs-close-lines/jobs-close-lines.component.jsx

@@ -43,6 +43,10 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                 {fields.map((field, index) => (
                   <tr key={field.key}>
                     <td>
+                      {/* Hidden field to preserve jobline ID without injecting a div under <tr> */}
+                      <Form.Item noStyle name={[field.name, "id"]}>
+                        <input type="hidden" />
+                      </Form.Item>
                       <Form.Item
                         //   label={t("joblines.fields.line_desc")}
                         key={`${index}line_desc`}

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -1,18 +1,22 @@
 import { useMutation } from "@apollo/client/react";
-import { Button, Form, Input, Popover, Select, Space, Switch } from "antd";
+import { Button, Divider, Form, Input, Modal, Select, Space, Switch } from "antd";
 import axios from "axios";
 import { some } from "lodash";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { CONVERT_JOB_TO_RO } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { DMS_MAP, getDmsMode } from "../../utils/dmsUtils";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import RREarlyROForm from "../dms-post-form/rr-early-ro-form";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -33,11 +37,27 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTrail, parentFormIsFieldsTouched }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [earlyRoCreated, setEarlyRoCreated] = useState(!!job?.dms_id); // Track early RO creation state
+  const [earlyRoCreatedThisSession, setEarlyRoCreatedThisSession] = useState(false); // Track if created in THIS modal session
   const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const notification = useNotification();
   const allFormValues = Form.useWatch([], form);
+  const { socket } = useSocket(); // Extract socket from context
+
+  // Get Fortellis treatment for proper DMS mode detection
+  const {
+    treatments: { Fortellis }
+  } = useTreatmentsWithConfig({
+    attributes: {},
+    names: ["Fortellis"],
+    splitKey: bodyshop?.imexshopid
+  });
+
+  // Check if bodyshop has Reynolds integration using the proper getDmsMode function
+  const dmsMode = getDmsMode(bodyshop, Fortellis.treatment);
+  const isReynoldsMode = dmsMode === DMS_MAP.reynolds;
 
   const handleConvert = async ({ employee_csr, category, ...values }) => {
     if (parentFormIsFieldsTouched()) {
@@ -82,177 +102,227 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
 
   const submitDisabled = useCallback(() => some(allFormValues, (v) => v === undefined), [allFormValues]);
 
-  const popMenu = (
-    <div>
-      <Form
-        layout="vertical"
-        form={form}
-        onFinish={handleConvert}
-        initialValues={{
-          driveable: true,
-          towin: job.towin,
-          ca_gst_registrant: job.ca_gst_registrant,
-          employee_csr: job.employee_csr,
-          category: job.category,
-          referral_source: job.referral_source,
-          referral_source_extra: job.referral_source_extra ?? ""
+  const handleEarlyROSuccess = (result) => {
+    setEarlyRoCreated(true); // Mark early RO as created
+    setEarlyRoCreatedThisSession(true); // Mark as created in this session
+    notification.success({
+      title: t("jobs.successes.early_ro_created"),
+      description: `RO Number: ${result.roNumber || "N/A"}`
+    });
+    // Delay refetch to keep success message visible for 2 seconds
+    setTimeout(() => {
+      refetch?.();
+    }, 2000);
+  };
+
+  const handleModalClose = () => {
+    setOpen(false);
+  };
+
+  if (job.converted) return <></>;
+
+  return (
+    <>
+      <Button
+        key="convert"
+        type="primary"
+        danger
+        disabled={job.converted || jobRO}
+        loading={loading}
+        onClick={() => {
+          setEarlyRoCreated(!!job?.dms_id); // Initialize state based on current job
+          setEarlyRoCreatedThisSession(false); // Reset session state when opening modal
+          setOpen(true);
         }}
       >
-        <Form.Item
-          name={["ins_co_nm"]}
-          label={t("jobs.fields.ins_co_nm")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
+        {t("jobs.actions.convert")}
+      </Button>
+
+      {/* Convert Job Modal */}
+      <Modal
+        open={open}
+        onCancel={handleModalClose}
+        closable={!(earlyRoCreatedThisSession && !job.converted)} // Only restrict if created in THIS session
+        maskClosable={!(earlyRoCreatedThisSession && !job.converted)} // Only restrict if created in THIS session
+        title={t("jobs.actions.convert")}
+        footer={null}
+        width={700}
+        destroyOnHidden
+      >
+        {/* Standard Convert Form */}
+        <Form
+          layout="vertical"
+          form={form}
+          onFinish={handleConvert}
+          initialValues={{
+            driveable: true,
+            towin: job.towin,
+            ca_gst_registrant: job.ca_gst_registrant,
+            employee_csr: job.employee_csr,
+            category: job.category,
+            referral_source: job.referral_source,
+            referral_source_extra: job.referral_source_extra ?? ""
+          }}
         >
-          <Select showSearch>
-            {bodyshop.md_ins_cos.map((s, i) => (
-              <Select.Option key={i} value={s.name}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        {bodyshop.enforce_class && (
+          {/* Show Reynolds Early RO section at the top if applicable */}
+          {isReynoldsMode && !job.dms_id && !earlyRoCreated && (
+            <>
+              <RREarlyROForm
+                bodyshop={bodyshop}
+                socket={socket}
+                job={job}
+                onSuccess={handleEarlyROSuccess}
+                showCancelButton={false}
+              />
+              <Divider />
+            </>
+          )}
+
           <Form.Item
-            name={"class"}
-            label={t("jobs.fields.class")}
+            name={["ins_co_nm"]}
+            label={t("jobs.fields.ins_co_nm")}
             rules={[
               {
-                required: bodyshop.enforce_class
+                required: true
                 //message: t("general.validation.required"),
               }
             ]}
           >
-            <Select>
-              {bodyshop.md_classes.map((s) => (
-                <Select.Option key={s} value={s}>
-                  {s}
+            <Select showSearch>
+              {bodyshop.md_ins_cos.map((s, i) => (
+                <Select.Option key={i} value={s.name}>
+                  {s.name}
                 </Select.Option>
               ))}
             </Select>
           </Form.Item>
-        )}
-        {bodyshop.enforce_referral && (
-          <>
+          {bodyshop.enforce_class && (
             <Form.Item
-              name={"referral_source"}
-              label={t("jobs.fields.referralsource")}
+              name={"class"}
+              label={t("jobs.fields.class")}
               rules={[
                 {
-                  required: bodyshop.enforce_referral
+                  required: bodyshop.enforce_class
                   //message: t("general.validation.required"),
                 }
               ]}
             >
               <Select>
-                {bodyshop.md_referral_sources.map((s) => (
+                {bodyshop.md_classes.map((s) => (
                   <Select.Option key={s} value={s}>
                     {s}
                   </Select.Option>
                 ))}
               </Select>
             </Form.Item>
-            <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
-              <Input />
-            </Form.Item>
-          </>
-        )}
-        {bodyshop.enforce_conversion_csr && (
-          <Form.Item
-            name={"employee_csr"}
-            label={t(
-              InstanceRenderManager({
-                imex: "jobs.fields.employee_csr",
-                rome: "jobs.fields.employee_csr_writer"
-              })
-            )}
-            rules={[
-              {
-                required: bodyshop.enforce_conversion_csr
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <Select
-              showSearch={{
-                optionFilterProp: "children",
-                filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }}
-              style={{ width: 200 }}
+          )}
+          {bodyshop.enforce_referral && (
+            <>
+              <Form.Item
+                name={"referral_source"}
+                label={t("jobs.fields.referralsource")}
+                rules={[
+                  {
+                    required: bodyshop.enforce_referral
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+              >
+                <Select>
+                  {bodyshop.md_referral_sources.map((s) => (
+                    <Select.Option key={s} value={s}>
+                      {s}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </Form.Item>
+              <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
+                <Input />
+              </Form.Item>
+            </>
+          )}
+          {bodyshop.enforce_conversion_csr && (
+            <Form.Item
+              name={"employee_csr"}
+              label={t(
+                InstanceRenderManager({
+                  imex: "jobs.fields.employee_csr",
+                  rome: "jobs.fields.employee_csr_writer"
+                })
+              )}
+              rules={[
+                {
+                  required: bodyshop.enforce_conversion_csr
+                  //message: t("general.validation.required"),
+                }
+              ]}
             >
-              {bodyshop.employees
-                .filter((emp) => emp.active)
-                .map((emp) => (
-                  <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                    {`${emp.first_name} ${emp.last_name}`}
+              <Select
+                showSearch={{
+                  optionFilterProp: "children",
+                  filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }}
+                style={{ width: 200 }}
+              >
+                {bodyshop.employees
+                  .filter((emp) => emp.active)
+                  .map((emp) => (
+                    <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
+                      {`${emp.first_name} ${emp.last_name}`}
+                    </Select.Option>
+                  ))}
+              </Select>
+            </Form.Item>
+          )}
+          {bodyshop.enforce_conversion_category && (
+            <Form.Item
+              name={"category"}
+              label={t("jobs.fields.category")}
+              rules={[
+                {
+                  required: bodyshop.enforce_conversion_category
+                  //message: t("general.validation.required"),
+                }
+              ]}
+            >
+              <Select allowClear>
+                {bodyshop.md_categories.map((s) => (
+                  <Select.Option key={s} value={s}>
+                    {s}
                   </Select.Option>
                 ))}
-            </Select>
-          </Form.Item>
-        )}
-        {bodyshop.enforce_conversion_category && (
-          <Form.Item
-            name={"category"}
-            label={t("jobs.fields.category")}
-            rules={[
-              {
-                required: bodyshop.enforce_conversion_category
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <Select allowClear>
-              {bodyshop.md_categories.map((s) => (
-                <Select.Option key={s} value={s}>
-                  {s}
-                </Select.Option>
-              ))}
-            </Select>
-          </Form.Item>
-        )}
-        {bodyshop.region_config.toLowerCase().startsWith("ca") && (
-          <Form.Item label={t("jobs.fields.ca_gst_registrant")} name="ca_gst_registrant" valuePropName="checked">
+              </Select>
+            </Form.Item>
+          )}
+          {bodyshop.region_config.toLowerCase().startsWith("ca") && (
+            <Form.Item label={t("jobs.fields.ca_gst_registrant")} name="ca_gst_registrant" valuePropName="checked">
+              <Switch />
+            </Form.Item>
+          )}
+          <Form.Item label={t("jobs.fields.driveable")} name="driveable" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+          <Form.Item label={t("jobs.fields.towin")} name="towin" valuePropName="checked">
             <Switch />
           </Form.Item>
-        )}
-        <Form.Item label={t("jobs.fields.driveable")} name="driveable" valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item label={t("jobs.fields.towin")} name="towin" valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Space wrap>
-          <Button disabled={submitDisabled()} type="primary" danger onClick={() => form.submit()} loading={loading}>
-            {t("jobs.actions.convert")}
-          </Button>
-          <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
-        </Space>
-      </Form>
-    </div>
-  );
 
-  if (job.converted) return <></>;
-
-  return (
-    <Popover open={open} content={popMenu}>
-      <Button
-        key="convert"
-        type="primary"
-        danger
-        // style={{ display: job.converted ? "none" : "" }}
-        disabled={job.converted || jobRO}
-        loading={loading}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        {t("jobs.actions.convert")}
-      </Button>
-    </Popover>
+          <Space wrap style={{ marginTop: 16 }}>
+            <Button
+              disabled={submitDisabled() || (isReynoldsMode && !job.dms_id && !earlyRoCreated)}
+              type="primary"
+              danger
+              onClick={() => form.submit()}
+              loading={loading}
+            >
+              {t("jobs.actions.convert")}
+            </Button>
+            <Button onClick={handleModalClose} disabled={earlyRoCreatedThisSession && !job.converted}>
+              {t("general.actions.close")}
+            </Button>
+          </Space>
+        </Form>
+      </Modal>
+    </>
   );
 }
 

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx

@@ -24,7 +24,7 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
     <div>
       <Table
         size="small"
-        title={() => <Input.Search onSearch={(value) => setSearch(value)} />}
+        title={() => <Input.Search onSearch={(value) => setSearch(value)} enterButton/>}
         dataSource={filteredPredefinedVehicles}
         columns={[
           {
@@ -56,9 +56,8 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
                   setOpen(false);
                   setSearch("");
                 }}
-              >
-                <PlusOutlined />
-              </Button>
+                icon={<PlusOutlined />}
+              />
             )
           }
         ]}

client/src/components/jobs-detail-general/jobs-detail-general.component.jsx

@@ -251,7 +251,6 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
             ))}
           </Select>
         </Form.Item>
-
         <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
           <Input disabled={jobRO} />
         </Form.Item>
@@ -267,6 +266,21 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         <Form.Item label={t("jobs.fields.lost_sale_reason")} name="lost_sale_reason">
           <Input disabled={jobRO} allowClear />
         </Form.Item>
+        {bodyshop.rr_dealerid && (
+          <Form.Item label={t("jobs.fields.dms.id")} name="dms_id">
+            <Input disabled />
+          </Form.Item>
+        )}
+        {bodyshop.rr_dealerid && (
+          <Form.Item label={t("jobs.fields.dms.advisor")} name="dms_advisor_id">
+            <Input disabled />
+          </Form.Item>
+        )}
+        {bodyshop.rr_dealerid && (
+          <Form.Item label={t("jobs.fields.dms.customer")} name="dms_customer_id">
+            <Input disabled />
+          </Form.Item>
+        )}
       </FormRow>
     </Card>
   );

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,10 +1,11 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
+import { Button, Card, Dropdown, Form, Input, Modal, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { HasRbacAccess } from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
@@ -20,7 +21,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectAuthLevel, selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
@@ -28,7 +29,6 @@ import dayjs from "../../utils/day";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
@@ -39,7 +39,8 @@ const EMPTY_ARRAY = Object.freeze([]);
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  authLevel: selectAuthLevel
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -117,7 +118,8 @@ export function JobsDetailHeaderActions({
   openChatByPhone,
   setMessage,
   setTimeTicketTaskContext,
-  setTaskUpsertContext
+  setTaskUpsertContext,
+  authLevel
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -129,10 +131,6 @@ export function JobsDetailHeaderActions({
   const jobId = job?.id;
   const watcherVars = useMemo(() => ({ jobid: jobId }), [jobId]);
 
-  // Option A: coordinated Dropdown + Popconfirm open state so the menu doesn't unmount before Popconfirm renders.
-  const [confirmKey, setConfirmKey] = useState(null);
-  const confirmKeyRef = useRef(null);
-
   const [isCancelScheduleModalVisible, setIsCancelScheduleModalVisible] = useState(false);
   const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
   const [deleteJob] = useMutation(DELETE_JOB);
@@ -150,6 +148,8 @@ export function JobsDetailHeaderActions({
   const devEmails = ["imex.dev", "rome.dev"];
   const prodEmails = ["imex.prod", "rome.prod", "imex.test", "rome.test"];
 
+  const canVoidJob = useMemo(() => HasRbacAccess({ authLevel, bodyshop, action: "jobs:void" }), [authLevel, bodyshop]);
+
   const hasValidEmail = (emails) => emails.some((email) => userEmail.endsWith(email));
   const canSubmitForTesting = (isDevEnv && hasValidEmail(devEmails)) || (isProdEnv && hasValidEmail(prodEmails));
 
@@ -157,7 +157,6 @@ export function JobsDetailHeaderActions({
     variables: watcherVars,
     skip: !jobId,
     fetchPolicy: "cache-first",
-    notifyOnNetworkStatusChange: true
   });
 
   const jobWatchersCount = jobWatchersData?.job_watchers?.length ?? job?.job_watchers?.length ?? 0;
@@ -179,83 +178,69 @@ export function JobsDetailHeaderActions({
   const jobInPreProduction = preProductionStatuses.includes(jobStatus);
   const jobInPostProduction = postProductionStatuses.includes(jobStatus);
 
-  const openConfirm = useCallback((key) => {
-    confirmKeyRef.current = key;
-    setConfirmKey(key);
-    setDropdownOpen(true);
-  }, []);
+  const makeConfirmId = () =>
+    globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`;
 
-  const closeConfirm = useCallback(() => {
-    confirmKeyRef.current = null;
-    setConfirmKey(null);
-  }, []);
+  const [modal, modalContextHolder] = Modal.useModal();
 
-  const handleDropdownOpenChange = useCallback(
-    (nextOpen, info) => {
-      if (!nextOpen && info?.source === "menu" && confirmKeyRef.current) return;
-      setDropdownOpen(nextOpen);
-      if (!nextOpen) closeConfirm();
-    },
-    [closeConfirm]
-  );
+  const confirmInstancesRef = useRef(new Map());
 
-  const renderPopconfirmMenuLabel = ({
-    key,
-    text,
+  const closeConfirmById = (id) => {
+    const inst = confirmInstancesRef.current.get(id);
+    if (inst) inst.destroy(); // hard close
+    confirmInstancesRef.current.delete(id);
+  };
+
+  const openConfirmFromMenu = ({
+    variant = "confirm", // "confirm" | "info" | "warning"
     title,
+    content,
     okText,
     cancelText,
     showCancel = true,
-    closeDropdownOnConfirm = true,
-    onConfirm
-  }) => (
-    <Popconfirm
-      title={title}
-      okText={okText}
-      cancelText={cancelText}
-      showCancel={showCancel}
-      open={confirmKey === key}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen) openConfirm(key);
-        else closeConfirm();
-      }}
-      onConfirm={(e) => {
-        e?.stopPropagation?.();
-        closeConfirm();
+    onOk,
+    onCancel
+  }) => {
+    // close the dropdown immediately; confirm dialog is separate
+    setDropdownOpen(false);
 
-        // Critical: for informational popconfirms, keep the dropdown open so the Popconfirm can cleanly close.
-        if (closeDropdownOnConfirm) {
-          setDropdownOpen(false);
+    const id = makeConfirmId();
+
+    const openFn = variant === "info" ? modal.info : variant === "warning" ? modal.warning : modal.confirm;
+
+    const inst = openFn({
+      title,
+      content,
+      okText,
+      cancelText,
+      centered: true,
+      maskClosable: false,
+      onCancel: () => {
+        closeConfirmById(id);
+        onCancel?.();
+      },
+      onOk: async () => {
+        try {
+          await onOk?.();
+        } finally {
+          closeConfirmById(id);
         }
+      },
+      ...(showCancel ? {} : { okCancel: false })
+    });
 
-        onConfirm?.(e);
-      }}
-      onCancel={(e) => {
-        e?.stopPropagation?.();
-        closeConfirm();
-        // Keep dropdown open on cancel so the user can continue using the menu.
-      }}
-      getPopupContainer={() => document.body}
-    >
-      <div
-        style={{ width: "100%" }}
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          openConfirm(key);
-        }}
-      >
-        {text}
-      </div>
-    </Popconfirm>
-  );
+    confirmInstancesRef.current.set(id, inst);
+    return id;
+  };
+
+  const handleDropdownOpenChange = useCallback((nextOpen) => {
+    setDropdownOpen(nextOpen);
+  }, []);
 
-  // Function to show modal
   const showCancelScheduleModal = () => {
     setIsCancelScheduleModalVisible(true);
   };
 
-  // Function to handle Cancel
   const handleCancelScheduleModalCancel = () => {
     setIsCancelScheduleModalVisible(false);
   };
@@ -264,7 +249,7 @@ export function JobsDetailHeaderActions({
     DuplicateJob({
       apolloClient: client,
       jobId: job.id,
-      config: { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
+      config: { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported, timezone: bodyshop.timezone },
       completionCallback: (newJobId) => {
         history(`/manage/jobs/${newJobId}`);
         notification.success({
@@ -279,7 +264,7 @@ export function JobsDetailHeaderActions({
     DuplicateJob({
       apolloClient: client,
       jobId: job.id,
-      config: { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
+      config: { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported, timezone: bodyshop.timezone },
       completionCallback: (newJobId) => {
         history(`/manage/jobs/${newJobId}`);
         notification.success({
@@ -476,6 +461,11 @@ export function JobsDetailHeaderActions({
   };
 
   const handleVoidJob = async () => {
+    if (!canVoidJob) {
+      notification.error({ title: t("general.messages.rbacunauth") });
+      return;
+    }
+
     //delete the job.
     const result = await voidJob({
       variables: {
@@ -964,26 +954,26 @@ export function JobsDetailHeaderActions({
         {
           key: "duplicate",
           id: "job-actions-duplicate",
-          label: renderPopconfirmMenuLabel({
-            key: "confirm-duplicate",
-            text: t("menus.jobsactions.duplicate"),
-            title: t("jobs.labels.duplicateconfirm"),
-            okText: t("general.labels.yes"),
-            cancelText: t("general.labels.no"),
-            onConfirm: handleDuplicate
-          })
+          label: t("menus.jobsactions.duplicate"),
+          onClick: () =>
+            openConfirmFromMenu({
+              title: t("jobs.labels.duplicateconfirm"),
+              okText: t("general.labels.yes"),
+              cancelText: t("general.labels.no"),
+              onOk: handleDuplicate
+            })
         },
         {
           key: "duplicatenolines",
           id: "job-actions-duplicatenolines",
-          label: renderPopconfirmMenuLabel({
-            key: "confirm-duplicate-nolines",
-            text: t("menus.jobsactions.duplicatenolines"),
-            title: t("jobs.labels.duplicateconfirm"),
-            okText: t("general.labels.yes"),
-            cancelText: t("general.labels.no"),
-            onConfirm: handleDuplicateConfirm
-          })
+          label: t("menus.jobsactions.duplicatenolines"),
+          onClick: () =>
+            openConfirmFromMenu({
+              title: t("jobs.labels.duplicateconfirm"),
+              okText: t("general.labels.yes"),
+              cancelText: t("general.labels.no"),
+              onOk: handleDuplicateConfirm
+            })
         }
       ]
     },
@@ -1156,26 +1146,25 @@ export function JobsDetailHeaderActions({
     menuItems.push({
       key: "deletejob",
       id: "job-actions-deletejob",
-      label:
-        jobWatchersCount === 0
-          ? renderPopconfirmMenuLabel({
-              key: "confirm-deletejob",
-              text: t("menus.jobsactions.deletejob"),
-              title: t("jobs.labels.deleteconfirm"),
-              okText: t("general.labels.yes"),
-              cancelText: t("general.labels.no"),
-              onConfirm: handleDeleteJob
-            })
-          : renderPopconfirmMenuLabel({
-              key: "confirm-deletejob-watchers",
-              text: t("menus.jobsactions.deletejob"),
-              title: t("jobs.labels.deletewatchers"),
-              showCancel: false,
-              closeDropdownOnConfirm: false, // <-- FIX: keep dropdown mounted so Popconfirm can close cleanly
-              onConfirm: () => {
-                // informational confirm only
-              }
-            })
+      label: t("menus.jobsactions.deletejob"),
+      onClick: () => {
+        if (jobWatchersCount === 0) {
+          openConfirmFromMenu({
+            title: t("jobs.labels.deleteconfirm"),
+            okText: t("general.labels.yes"),
+            cancelText: t("general.labels.no"),
+            onOk: handleDeleteJob
+          });
+        } else {
+          // informational "OK only"
+          openConfirmFromMenu({
+            variant: "info",
+            title: t("jobs.labels.deletewatchers"),
+            okText: t("general.actions.ok"),
+            showCancel: false
+          });
+        }
+      }
     });
   }
 
@@ -1188,22 +1177,18 @@ export function JobsDetailHeaderActions({
     label: t("appointments.labels.manualevent")
   });
 
-  if (!jobRO && job.converted) {
+  if (!jobRO && job.converted && canVoidJob) {
     menuItems.push({
       key: "voidjob",
       id: "job-actions-voidjob",
-      label: (
-        <RbacWrapper action="jobs:void" noauth>
-          {renderPopconfirmMenuLabel({
-            key: "confirm-voidjob",
-            text: t("menus.jobsactions.void"),
-            title: t("jobs.labels.voidjob"),
-            okText: t("general.labels.yes"),
-            cancelText: t("general.labels.no"),
-            onConfirm: handleVoidJob
-          })}
-        </RbacWrapper>
-      )
+      label: t("menus.jobsactions.void"),
+      onClick: () =>
+        openConfirmFromMenu({
+          title: t("jobs.labels.voidjob"),
+          okText: t("general.labels.yes"),
+          cancelText: t("general.labels.no"),
+          onOk: handleVoidJob
+        })
     });
   }
 
@@ -1235,6 +1220,7 @@ export function JobsDetailHeaderActions({
 
   return (
     <>
+      {modalContextHolder}
       <Modal
         title={t("menus.jobsactions.cancelallappointments")}
         open={isCancelScheduleModalVisible}
@@ -1286,9 +1272,8 @@ export function JobsDetailHeaderActions({
         open={dropdownOpen}
         onOpenChange={handleDropdownOpenChange}
       >
-        <Button>
+        <Button icon={<DownCircleFilled />} iconPlacement="end">
           <span>{t("general.labels.actions")}</span>
-          <DownCircleFilled />
         </Button>
       </Dropdown>
 

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util.js

@@ -15,7 +15,7 @@ export default async function DuplicateJob({
 }) {
   logImEXEvent("job_duplicate");
 
-  const { defaultOpenStatus } = config;
+  const { defaultOpenStatus, timezone } = config;
   //get a list of all fields on the job
   const res = await apolloClient.query({
     query: QUERY_JOB_FOR_DUPE,
@@ -31,9 +31,12 @@ export default async function DuplicateJob({
   delete existingJob.updatedat;
   delete existingJob.cieca_stl;
   delete existingJob.cieca_ttl;
+  !keepJobLines && delete existingJob.clm_total;
 
   const newJob = {
     ...existingJob,
+    date_estimated: dayjs().tz(timezone, false).format("YYYY-MM-DD"),
+    date_open: dayjs(),
     status: defaultOpenStatus
   };
 
@@ -70,7 +73,7 @@ export default async function DuplicateJob({
 export async function CreateIouForJob({ apolloClient, jobId, config, jobLinesToKeep, currentUser }) {
   logImEXEvent("job_create_iou");
 
-  const { status } = config;
+  const { status, timezone } = config;
   //get a list of all fields on the job
   const res = await apolloClient.query({
     query: QUERY_JOB_FOR_DUPE,
@@ -88,10 +91,10 @@ export async function CreateIouForJob({ apolloClient, jobId, config, jobLinesToK
 
   const newJob = {
     ...existingJob,
-
     converted: true,
     status: status,
     iouparent: jobId,
+    date_estimated: dayjs().tz(timezone, false).format("YYYY-MM-DD"),
     date_open: dayjs(),
     audit_trails: {
       data: [

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -143,7 +143,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                 label={t("jobs.fields.comment")}
                 styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
               >
-                <ProductionListColumnComment record={job} />
+                <ProductionListColumnComment record={job} usePortal={true} />
               </DataLabel>
               {!isPartsEntry && <DataLabel label={t("jobs.fields.ins_co_nm_short")}>{job.ins_co_nm}</DataLabel>}
               <DataLabel label={t("jobs.fields.clm_no")}>{job.clm_no}</DataLabel>
@@ -176,7 +176,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                     </DataLabel>
                   )}
                   <DataLabel label={t("jobs.fields.production_vars.note")}>
-                    <ProductionListColumnProductionNote record={job} />
+                    <ProductionListColumnProductionNote record={job} usePortal={true} />
                   </DataLabel>
                   <DataLabel label={t("jobs.fields.estimate_sent_approval")}>
                     <Space>

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -128,9 +128,7 @@ function JobsDocumentsComponent({
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setgalleryImages} />
             <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
             <JobsDocumentsDeleteButton galleryImages={galleryImages} deletionCallback={billsCallback || refetch} />

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx

@@ -65,9 +65,8 @@ function JobsDocumentsImgproxyComponent({
                 //Do the imgproxy refresh too
                 fetchThumbnails();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
             {!billId && (
               <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -102,9 +102,8 @@ export function JobsDocumentsLocalGallery({
                   }
                 }
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
               <Button>{t("documents.labels.openinexplorer")}</Button>
             </a>

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -179,9 +179,8 @@ export default function JobsFindModalComponent({
               onClick={() => {
                 jobsListRefetch();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <Input
               value={modalSearch}
               onChange={(e) => {

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -224,9 +224,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/jobs-list/jobs-list.component.jsx

@@ -313,9 +313,7 @@ export function JobsList({ bodyshop }) {
       title={t("titles.bc.jobs-active")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -121,9 +121,12 @@ export function JobNotesComponent({
       width: 200,
       render: (text, record) => (
         <Space wrap>
-          <Button loading={deleteLoading} disabled={record.audit || jobRO} onClick={() => handleNoteDelete(record.id)}>
-            <DeleteFilled />
-          </Button>
+          <Button
+            loading={deleteLoading}
+            disabled={record.audit || jobRO}
+            onClick={() => handleNoteDelete(record.id)}
+            icon={<DeleteFilled />}
+          />
           <Button
             disabled={record.audit || jobRO}
             onClick={() => {
@@ -135,9 +138,8 @@ export function JobNotesComponent({
                 }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
           <PrintWrapperComponent
             templateObject={{
               name: Templates.individual_job_note.key,

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -297,9 +297,7 @@ export function JobsReadyList({ bodyshop }) {
       extra={
         <Space wrap>
           <span>({readyStatuses && readyStatuses.join(", ")})</span>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             onChange={(e) => {

client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx

@@ -132,7 +132,13 @@ export function LaborAllocationsAdjustmentEdit({
   );
 
   return (
-    <Popover open={open} onOpenChange={(vis) => setOpen(vis)} content={overlay} trigger="click">
+    <Popover
+      getPopupContainer={(trigger) => trigger?.parentElement || document.body}
+      open={open}
+      onOpenChange={(vis) => setOpen(vis)}
+      content={overlay}
+      trigger="click"
+    >
       {children}
     </Popover>
   );

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -246,9 +246,8 @@ export function PayrollLaborAllocationsTable({
                   setTotals(data);
                   refetch();
                 }}
-              >
-                <SyncOutlined />
-              </Button>
+                icon={<SyncOutlined />}
+              />
             </Space>
           }
         >

client/src/components/notification-center/notification-center.component.jsx

@@ -24,6 +24,7 @@ const NotificationCenterComponent = ({
   onNotificationClick,
   unreadCount,
   isEmployee,
+  isDarkMode,
   ref
 }) => {
     const { t } = useTranslation();
@@ -112,14 +113,16 @@ const NotificationCenterComponent = ({
             <Alert title={t("notifications.labels.employee-notification")} type="warning" />
           </div>
         ) : (
-          <Virtuoso
-            ref={virtuosoRef}
-            style={{ height: "400px", width: "100%" }}
-            data={notifications}
-            totalCount={notifications.length}
-            endReached={loadMore}
-            itemContent={renderNotification}
-          />
+          <div className={isDarkMode ? "notification-center--dark" : "notification-center--light"} style={{ height: "400px", width: "100%" }}>
+            <Virtuoso
+              ref={virtuosoRef}
+              style={{ height: "100%", width: "100%" }}
+              data={notifications}
+              totalCount={notifications.length}
+              endReached={loadMore}
+              itemContent={renderNotification}
+            />
+          </div>
         )}
       </div>
     );

client/src/components/notification-center/notification-center.container.jsx

@@ -5,6 +5,7 @@ import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 import day from "../../utils/day.js";
 import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
@@ -22,7 +23,7 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
  * @returns {JSX.Element}
  * @constructor
  */
-const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser }) => {
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser, isDarkMode }) => {
   const [showUnreadOnly, setShowUnreadOnly] = useState(false);
   const [notifications, setNotifications] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -55,7 +56,6 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
       where: whereClause
     },
     fetchPolicy: "cache-and-network",
-    notifyOnNetworkStatusChange: true,
     errorPolicy: "all",
     pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
     skip: skipQuery
@@ -213,13 +213,15 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
       loadMore={loadMore}
       onNotificationClick={handleNotificationClick}
       unreadCount={unreadCount}
+      isDarkMode={isDarkMode}
     />
   );
 };
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  isDarkMode: selectDarkMode
 });
 
 export default connect(mapStateToProps, null)(NotificationCenterContainer);

client/src/components/notification-center/notification-center.styles.scss

@@ -173,3 +173,11 @@
     }
   }
 }
+
+.notification-center--dark {
+  color-scheme: dark;
+}
+
+.notification-center--light {
+  color-scheme: light;
+}

client/src/components/owner-find-modal/owner-find-modal.container.jsx

@@ -48,6 +48,7 @@ export default function OwnerFindModalContainer({
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
             onSearch={(val) => callSearchowners({ variables: { search: val.trim() } })}
+            enterButton
           />
           <OwnerFindModalComponent
             selectedOwner={selectedOwner}

client/src/components/owner-name-display/owner-name-display.component.jsx

@@ -2,6 +2,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { store } from "../../redux/store";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { Tooltip } from "antd";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -11,15 +12,27 @@ const mapDispatchToProps = () => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(OwnerNameDisplay);
 
-export function OwnerNameDisplay({ bodyshop, ownerObject }) {
+export function OwnerNameDisplay({ bodyshop, ownerObject, withToolTip = false }) {
   const emptyTest = ownerObject?.ownr_fn + ownerObject?.ownr_ln + ownerObject?.ownr_co_nm;
 
   if (!emptyTest || emptyTest === "null" || emptyTest.trim() === "") return "N/A";
 
-  if (bodyshop.last_name_first)
-    return `${ownerObject?.ownr_ln || ""}, ${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_co_nm || ""}`.trim();
-
-  return `${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_ln || ""} ${ownerObject.ownr_co_nm || ""}`.trim();
+  let returnString;
+  if (bodyshop.last_name_first) {
+    returnString =
+      `${ownerObject?.ownr_ln || ""}, ${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_co_nm || ""}`.trim();
+  } else {
+    returnString = `${ownerObject?.ownr_fn || ""} ${ownerObject?.ownr_ln || ""} ${ownerObject.ownr_co_nm || ""}`.trim();
+  }
+  if (withToolTip) {
+    return (
+      <Tooltip title={returnString} mouseEnterDelay={0.5}>
+        {returnString}
+      </Tooltip>
+    );
+  } else {
+    return returnString;
+  }
 }
 
 export function OwnerNameDisplayFunction(ownerObject, forceFirstLast = false) {

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

@@ -16,9 +16,10 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
     SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE
   );
 
-  const executeSearch = (v) => {
-    if (v && v.variables?.search !== "" && v.variables.search.length >= 2) callSearch({ variables: v.variables });
+  const executeSearch = (variables) => {
+    if (variables?.search !== "" && variables?.search?.length >= 2) callSearch({ variables });
   };
+
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 
   const handleSearch = (value) => {

client/src/components/owners-list/owners-list.component.jsx

@@ -99,9 +99,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
               </Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx

@@ -93,10 +93,7 @@ export function PartDispatchTableComponent({ bodyshop, job, billsQuery }) {
       title={t("parts_dispatch.labels.parts_dispatch")}
       extra={
         <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}
@@ -104,6 +101,7 @@ export function PartDispatchTableComponent({ bodyshop, job, billsQuery }) {
               e.preventDefault();
               setSearchText(e.target.value);
             }}
+            enterButton
           />
         </Space>
       }

client/src/components/parts-order-delete-line/parts-order-delete-line.component.jsx

@@ -34,9 +34,7 @@ export default function PartsOrderDeleteLine({ disabled, partsLineId, partsOrder
         });
       }}
     >
-      <Button disabled={disabled}>
-        <DeleteFilled />
-      </Button>
+      <Button disabled={disabled} icon={<DeleteFilled />} />
     </Popconfirm>
   );
 }

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

@@ -150,9 +150,8 @@ export function PartsOrderListTableDrawerComponent({
               }
             });
           }}
-        >
-          <FaTasks />
-        </Button>
+          icon={<FaTasks />}
+        />
       )}
       <Popconfirm
         title={t("parts_orders.labels.confirmdelete")}
@@ -173,9 +172,7 @@ export function PartsOrderListTableDrawerComponent({
           });
         }}
       >
-        <Button disabled={jobRO}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={jobRO} icon={<DeleteFilled />} />
       </Popconfirm>
       {!isPartsEntry && (
         <Button

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

@@ -295,6 +295,7 @@ export function PartsOrderListTableComponent({
               e.preventDefault();
               setSearchText(e.target.value);
             }}
+            enterButton
           />
         </Space>
       }

client/src/components/parts-order-modal/parts-order-modal-price-change.component.jsx

@@ -1,94 +1,121 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, InputNumber, Space } from "antd";
+import { Button, Divider, Dropdown, InputNumber, Space, theme } from "antd";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
+const DISCOUNT_PRESETS = [5, 10, 15, 20, 25, 40];
+
 export default function PartsOrderModalPriceChange({ form, field }) {
   const { t } = useTranslation();
-  const menu = {
-    items: [
-      {
-        key: "5",
-        label: t("parts_orders.labels.discount", { percent: "5%" })
-      },
-      {
-        key: "10",
-        label: t("parts_orders.labels.discount", { percent: "10%" })
-      },
-      {
-        key: "15",
-        label: t("parts_orders.labels.discount", { percent: "15%" })
-      },
-      {
-        key: "20",
-        label: t("parts_orders.labels.discount", { percent: "20%" })
-      },
-      {
-        key: "25",
-        label: t("parts_orders.labels.discount", { percent: "25%" })
-      },
-      {
-        key: "40",
-        label: t("parts_orders.labels.discount", { percent: "40%" })
-      },
-      {
-        key: "custom",
-        label: (
-          <Space.Compact>
-            <InputNumber
-              onClick={(e) => e.stopPropagation()}
-              onKeyUp={(e) => {
-                if (e.key === "Enter") {
-                  const values = form.getFieldsValue();
-                  const { parts_order_lines } = values;
+  const { token } = theme.useToken();
 
-                form.setFieldsValue({
-                  parts_order_lines: {
-                    data: parts_order_lines.data.map((p, idx) => {
-                      if (idx !== field.name) return p;
-                      console.log(p, e.target.value, (p.act_price || 0) * ((100 - (e.target.value || 0)) / 100));
-                      return {
-                        ...p,
-                        act_price: (p.act_price || 0) * ((100 - (e.target.value || 0)) / 100)
-                      };
-                    })
-                  }
-                });
-                e.target.value = 0;
-              }
-              }}
-              min={0}
-              max={100}
-            />
-            <span style={{ padding: "0 11px", backgroundColor: "#fafafa", border: "1px solid #d9d9d9", borderLeft: 0 }}>%</span>
-          </Space.Compact>
-        )
+  const [open, setOpen] = useState(false);
+  const [customPercent, setCustomPercent] = useState(0);
+
+  const applyDiscountPercent = (percent) => {
+    const pct = Number(percent) || 0;
+
+    const values = form.getFieldsValue();
+    const parts_order_lines = values?.parts_order_lines;
+    const data = Array.isArray(parts_order_lines?.data) ? parts_order_lines.data : [];
+    if (!data.length) return;
+
+    form.setFieldsValue({
+      parts_order_lines: {
+        data: data.map((p, idx) => {
+          if (idx !== field.name) return p;
+          return {
+            ...p,
+            act_price: (p.act_price || 0) * ((100 - pct) / 100)
+          };
+        })
       }
-    ],
+    });
+  };
+
+  const applyCustom = () => {
+    logImEXEvent("parts_order_manual_discount", {});
+    applyDiscountPercent(customPercent);
+    setCustomPercent(0);
+    setOpen(false);
+  };
+
+  const menu = {
+    // Kill the menu “card” styling so our wrapper becomes the single card.
+    style: {
+      background: "transparent",
+      boxShadow: "none"
+    },
+    items: DISCOUNT_PRESETS.map((pct) => ({
+      key: String(pct),
+      label: t("parts_orders.labels.discount", { percent: `${pct}%` })
+    })),
     onClick: ({ key }) => {
       logImEXEvent("parts_order_manual_discount", {});
-      if (key === "custom") return;
-      const values = form.getFieldsValue();
-      const { parts_order_lines } = values;
-      form.setFieldsValue({
-        parts_order_lines: {
-          data: parts_order_lines.data.map((p, idx) => {
-            if (idx !== field.name) return p;
-            return {
-              ...p,
-              act_price: (p.act_price || 0) * ((100 - key) / 100)
-            };
-          })
-        }
-      });
+      applyDiscountPercent(key);
+      setOpen(false);
     }
   };
 
   return (
-    <Dropdown menu={menu} trigger="click">
+    <Dropdown
+      menu={menu}
+      trigger={["click"]}
+      open={open}
+      onOpenChange={(nextOpen) => setOpen(nextOpen)}
+      getPopupContainer={(triggerNode) => triggerNode?.parentElement ?? document.body}
+      popupRender={(menus) => (
+        <div
+          // This makes the whole dropdown (menu + footer) look like one panel in both light/dark.
+          style={{
+            background: token.colorBgElevated,
+            borderRadius: token.borderRadiusLG,
+            boxShadow: token.boxShadowSecondary,
+            overflow: "hidden",
+            minWidth: 180
+          }}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          {menus}
+
+          <Divider style={{ margin: 0 }} />
+
+          <div style={{ padding: token.paddingXS }}>
+            <Space.Compact style={{ width: "100%" }}>
+              <InputNumber
+                value={customPercent}
+                min={0}
+                max={100}
+                precision={0}
+                controls={false}
+                style={{ width: "100%" }}
+                formatter={(v) => (v === null || v === undefined ? "" : `${v}%`)}
+                parser={(v) =>
+                  String(v ?? "")
+                    .replace("%", "")
+                    .trim()
+                }
+                onChange={(v) => setCustomPercent(v ?? 0)}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    applyCustom();
+                  }
+                }}
+              />
+              <Button type="primary" onClick={applyCustom}>
+                {t("general.labels.apply")}
+              </Button>
+            </Space.Compact>
+          </div>
+        </div>
+      )}
+    >
       <Space>
-        %
-        <DownOutlined />
+        % <DownOutlined />
       </Space>
     </Dropdown>
   );

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -13,6 +13,13 @@ import PartsOrderModalPriceChange from "./parts-order-modal-price-change.compone
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import { selectIsPartsEntry } from "../../redux/application/application.selectors.js";
 
+const PriceInputWrapper = ({ value, onChange, form, field }) => (
+  <Space.Compact style={{ width: "100%" }}>
+    <PartsOrderModalPriceChange form={form} field={field} />
+    <CurrencyInput style={{ flex: 1 }} value={value} onChange={onChange} />
+  </Space.Compact>
+);
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   isPartsEntry: selectIsPartsEntry
@@ -59,7 +66,7 @@ export function PartsOrderModalComponent({
   return (
     <div>
       <Form.Item name="returnfrombill" hidden>
-        <Input />
+        <Input type="hidden" />
       </Form.Item>
       <LayoutFormRow grow noDivider>
         <Form.Item
@@ -199,10 +206,7 @@ export function PartsOrderModalComponent({
                         key={`${index}act_price`}
                         name={[field.name, "act_price"]}
                       >
-                        <Space.Compact style={{ width: "100%" }}>
-                          <PartsOrderModalPriceChange form={form} field={field} />
-                          <CurrencyInput style={{ flex: 1 }} />
-                        </Space.Compact>
+                        <PriceInputWrapper form={form} field={field} />
                       </Form.Item>
                       {isReturn && (
                         <Form.Item

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -17,7 +17,6 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import AlertComponent from "../alert/alert.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import PartsOrderModalComponent from "./parts-order-modal.component";
 import axios from "axios";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
@@ -66,7 +65,7 @@ export function PartsOrderModalContainer({
   const sendTypeState = useState("e");
   const sendType = sendTypeState[0];
 
-  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
+  const { error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
     skip: !open,
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
@@ -89,20 +88,11 @@ export function PartsOrderModalContainer({
 
       return {
         ...p,
-        job_line_id: jobLineId
+        job_line_id: jobLineId,
+        ...(isReturn && { cm_received: false })
       };
     });
 
-    const missingIdx = forcedLines.findIndex((l) => !l?.job_line_id);
-    if (missingIdx !== -1) {
-      notification.error({
-        title: t("parts_orders.errors.creating"),
-        description: `Missing job_line_id for parts line #${missingIdx + 1}`
-      });
-      setSaving(false);
-      return;
-    }
-
     let insertResult;
     try {
       insertResult = await insertPartOrder({
@@ -371,6 +361,7 @@ export function PartsOrderModalContainer({
     }
   }, [open, linesToOrder, form]);
 
+  //This used to have a loading component spinner for the vendor data. With Apollo 4, the NetworkState isn't emitting correctly, so loading just gets set to true the second time, and no longer works as expected.
   return (
     <Modal
       open={open}
@@ -389,18 +380,14 @@ export function PartsOrderModalContainer({
     >
       {error ? <AlertComponent title={error.message} type="error" /> : null}
       <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish} initialValues={initialValues}>
-        {loading ? (
-          <LoadingSpinner />
-        ) : (
-          <PartsOrderModalComponent
-            form={form}
-            vendorList={data?.vendors || []}
-            sendTypeState={sendTypeState}
-            isReturn={isReturn}
-            preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
-            job={job}
-          />
-        )}
+        <PartsOrderModalComponent
+          form={form}
+          vendorList={data?.vendors || []}
+          sendTypeState={sendTypeState}
+          isReturn={isReturn}
+          preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
+          job={job}
+        />
       </Form>
     </Modal>
   );

client/src/components/parts-queue-list/parts-queue.list.component.jsx

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Checkbox, Input, Space, Table } from "antd";
 import _ from "lodash";
 import queryString from "query-string";
 import { useState } from "react";
@@ -31,6 +31,8 @@ export function PartsQueueListComponent({ bodyshop }) {
   const { selected, sortcolumn, sortorder, statusFilters } = searchParams;
   const history = useNavigate();
   const [filter, setFilter] = useLocalStorage("filter_parts_queue", null);
+  const [viewTimeStamp, setViewTimeStamp] = useLocalStorage("parts_queue_timestamps", false);
+  const [countsOnly, setCountsOnly] = useLocalStorage("parts_queue_counts_only", false);
 
   const { loading, error, data, refetch } = useQuery(QUERY_PARTS_QUEUE, {
     fetchPolicy: "network-only",
@@ -92,6 +94,7 @@ export function PartsQueueListComponent({ bodyshop }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
+      width: "110px",
       sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder: sortcolumn === "ro_number" && sortorder,
 
@@ -103,16 +106,20 @@ export function PartsQueueListComponent({ bodyshop }) {
       title: t("jobs.fields.owner"),
       dataIndex: "ownr_ln",
       key: "ownr_ln",
+      width: "8%",
+      ellipsis: {
+        showTitle: true
+      },
       sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
       sortOrder: sortcolumn === "ownr_ln" && sortorder,
       render: (text, record) => {
         return record.ownerid ? (
           <Link to={"/manage/owners/" + record.ownerid}>
-            <OwnerNameDisplay ownerObject={record} />
+            <OwnerNameDisplay ownerObject={record} withToolTip />
           </Link>
         ) : (
           <span>
-            <OwnerNameDisplay ownerObject={record} />
+            <OwnerNameDisplay ownerObject={record} withToolTip />
           </span>
         );
       }
@@ -187,7 +194,7 @@ export function PartsQueueListComponent({ bodyshop }) {
       ellipsis: true,
       sorter: (a, b) => dateSort(a.scheduled_in, b.scheduled_in),
       sortOrder: sortcolumn === "scheduled_in" && sortorder,
-      render: (text, record) => <DateTimeFormatter>{record.scheduled_in}</DateTimeFormatter>
+      render: (text, record) => <DateTimeFormatter hideTime={!viewTimeStamp}>{record.scheduled_in}</DateTimeFormatter>
     },
     {
       title: t("jobs.fields.scheduled_completion"),
@@ -196,7 +203,9 @@ export function PartsQueueListComponent({ bodyshop }) {
       ellipsis: true,
       sorter: (a, b) => dateSort(a.scheduled_completion, b.scheduled_completion),
       sortOrder: sortcolumn === "scheduled_completion" && sortorder,
-      render: (text, record) => <DateTimeFormatter>{record.scheduled_completion}</DateTimeFormatter>
+      render: (text, record) => (
+        <DateTimeFormatter hideTime={!viewTimeStamp}>{record.scheduled_completion}</DateTimeFormatter>
+      )
     },
     // {
     //   title: t("vehicles.fields.plate_no"),
@@ -227,16 +236,23 @@ export function PartsQueueListComponent({ bodyshop }) {
       title: t("jobs.fields.updated_at"),
       dataIndex: "updated_at",
       key: "updated_at",
+      width: "110px",
       sorter: (a, b) => dateSort(a.updated_at, b.updated_at),
       sortOrder: sortcolumn === "updated_at" && sortorder,
-      render: (text, record) => <TimeAgoFormatter>{record.updated_at}</TimeAgoFormatter>
+      render: (text, record) => <TimeAgoFormatter removeAgoString>{record.updated_at}</TimeAgoFormatter>
     },
     {
       title: t("jobs.fields.partsstatus"),
       dataIndex: "partsstatus",
       key: "partsstatus",
+      width: countsOnly ? "180px" : "110px",
       render: (text, record) => (
-        <JobPartsReceived parts={record.joblines_status} displayMode="full" popoverPlacement="topLeft" />
+        <JobPartsReceived
+          parts={record.joblines_status}
+          displayMode="full"
+          popoverPlacement="middle"
+          countsOnly={countsOnly}
+        />
       )
     },
     {
@@ -249,6 +265,7 @@ export function PartsQueueListComponent({ bodyshop }) {
       title: t("jobs.fields.queued_for_parts"),
       dataIndex: "queued_for_parts",
       key: "queued_for_parts",
+      width: "120px",
       sorter: (a, b) => a.queued_for_parts - b.queued_for_parts,
       sortOrder: sortcolumn === "queued_for_parts" && sortorder,
       filteredValue: filter?.queued_for_parts || null,
@@ -269,11 +286,18 @@ export function PartsQueueListComponent({ bodyshop }) {
 
   return (
     <Card
+      title={t("titles.bc.parts-queue")}
       extra={
         <Space wrap>
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
+          <Checkbox checked={countsOnly} onChange={(e) => setCountsOnly(e.target.checked)}>
+            {t("parts.labels.view_counts_only")}
+          </Checkbox>
+          <Checkbox checked={viewTimeStamp} onChange={(e) => setViewTimeStamp(e.target.checked)}>
+            {t("parts.labels.view_timestamps")}
+          </Checkbox>
           <Input.Search
             className="imex-table-header__search"
             placeholder={t("general.labels.search")}
@@ -298,7 +322,7 @@ export function PartsQueueListComponent({ bodyshop }) {
         rowKey="id"
         dataSource={jobs}
         style={{ height: "100%" }}
-        scroll={{ x: true }}
+        //scroll={{ x: true }}
         onChange={handleTableChange}
         rowSelection={{
           onSelect: (record) => {

client/src/components/payment-form/payment-form.totalpayments.component.jsx

@@ -33,7 +33,7 @@ export default function PaymentFormTotalPayments({ jobid }) {
       {balance && (
         <Statistic
           title={t("payments.labels.balance")}
-          styles={{ value: { color: balance.getAmount() !== 0 ? "red" : "green" } }}
+          styles={{ content: { color: balance.getAmount() !== 0 ? "red" : "green" } }}
           value={(balance && balance.toFormat()) || ""}
         />
       )}

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -144,6 +144,7 @@ export function PaymentsListPaginated({
       render: (text, record) => (
         <Space>
           <Button
+            icon={<EditFilled />}
             // disabled={record.exportedat}
             onClick={async () => {
               let apolloResults;
@@ -174,9 +175,7 @@ export function PaymentsListPaginated({
                 context: { ...(apolloResults ? apolloResults : record), refetchRequiresContext: true }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+          />
           <PrintWrapperComponent
             templateObject={{
               name: Templates.payment_receipt.key,
@@ -245,9 +244,7 @@ export function PaymentsListPaginated({
               <Button onClick={() => setCaBcEtfTableContext()}>{t("payments.labels.ca_bc_etf_table")}</Button>
             </>
           )}
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
+          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
           <Input.Search
             placeholder={search.search || t("general.labels.search")}
             onSearch={(value) => {

client/src/components/phone-number-consent/phone-number-consent.component.jsx

@@ -129,6 +129,7 @@ function PhoneNumberConsentList({ bodyshop }) {
         placeholder={t("general.labels.search")}
         onSearch={(value) => setSearch(value)}
         style={{ marginBottom: 16 }}
+        enterButton
       />
 
       <Table

client/src/components/print-center-jobs-labels/print-center-jobs-labels.component.jsx

@@ -108,7 +108,7 @@ export function PrintCenterJobsLabels({ jobId }) {
     </Card>
   );
   return (
-    <Popover content={content} open={isModalVisible}>
+    <Popover content={content} open={isModalVisible} getPopupContainer={(trigger) => trigger.parentElement}>
       <Button onClick={() => setIsModalVisible(true)}>{t("printcenter.jobs.labels.labels")}</Button>
     </Popover>
   );

client/src/components/print-center-jobs/print-center-jobs-parts.component.jsx

@@ -9,6 +9,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { HistoryOutlined, MailOutlined, PrinterOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
@@ -29,27 +30,29 @@ export function PrintCenterJobsPartsComponent({ printCenterModal, bodyshop, tech
     names: ["Enhanced_Payroll"],
     splitKey: bodyshop.imexshopid
   });
-
-  const Templates =
-    bodyshop.cdk_dealerid === null && bodyshop.pbs_serialnumber === null
-      ? Object.keys(tempList)
-          .map((key) => tempList[key])
-          .filter(
-            (temp) =>
-              (!temp.regions ||
-                temp.regions?.[bodyshop.region_config] ||
-                (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)) &&
-              (!temp.dms || temp.dms === false)
-          )
-      : Object.keys(tempList)
-          .map((key) => tempList[key])
-          .filter(
-            (temp) =>
-              !temp.regions ||
+  const hasDMSKey = bodyshopHasDmsKey(bodyshop);
+  
+  const Templates = !hasDMSKey
+    ? Object.keys(tempList)
+        .map((key) => tempList[key])
+        .filter(
+          (temp) =>
+            (!temp.regions ||
               temp.regions?.[bodyshop.region_config] ||
-              (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)
-          );
-
+              (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)) &&
+            (!temp.dms || temp.dms === false)
+        )
+        .filter((temp) => !technician || temp.group !== "financial")
+    : Object.keys(tempList)
+        .map((key) => tempList[key])
+        .filter(
+          (temp) =>
+            !temp.regions ||
+            temp.regions?.[bodyshop.region_config] ||
+            (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)
+        )
+        .filter((temp) => !technician || temp.group !== "financial");
+  
   const JobsReportsList =
     Enhanced_Payroll.treatment === "on"
       ? Object.keys(Templates)

client/src/components/print-center-jobs/print-center-jobs.component.jsx

@@ -12,15 +12,18 @@ import Jobd3RdPartyModal from "../job-3rd-party-modal/job-3rd-party-modal.compon
 import PrintCenterItem from "../print-center-item/print-center-item.component";
 import PrintCenterJobsLabels from "../print-center-jobs-labels/print-center-jobs-labels.component";
 import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-speed-print.component";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  technician: selectTechnician
 });
 
 const mapDispatchToProps = () => ({});
 
-export function PrintCenterJobsComponent({ printCenterModal, bodyshop }) {
+export function PrintCenterJobsComponent({ printCenterModal, bodyshop, technician }) {
   const [search, setSearch] = useState("");
   const { id: jobId, job } = printCenterModal.context;
   const tempList = TemplateList("job", {});
@@ -32,30 +35,33 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop }) {
     names: ["Enhanced_Payroll"],
     splitKey: bodyshop.imexshopid
   });
+  const hasDMSKey = bodyshopHasDmsKey(bodyshop);
 
-  const Templates =
-    bodyshop.cdk_dealerid === null && bodyshop.pbs_serialnumber === null
-      ? Object.keys(tempList)
-          .map((key) => {
-            return tempList[key];
-          })
-          .filter(
-            (temp) =>
-              (!temp.regions ||
-                (temp.regions && temp.regions[bodyshop.region_config]) ||
-                (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)) &&
-              (!temp.dms || temp.dms === false)
-          )
-      : Object.keys(tempList)
-          .map((key) => {
-            return tempList[key];
-          })
-          .filter(
-            (temp) =>
-              !temp.regions ||
+  const Templates = !hasDMSKey
+    ? Object.keys(tempList)
+        .map((key) => {
+          return tempList[key];
+        })
+        .filter(
+          (temp) =>
+            (!temp.regions ||
               (temp.regions && temp.regions[bodyshop.region_config]) ||
-              (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)
-          );
+              (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)) &&
+            (!temp.dms || temp.dms === false)
+        )
+        .filter((temp) => !technician || temp.group !== "financial")
+    : Object.keys(tempList)
+        .map((key) => {
+          return tempList[key];
+        })
+        .filter(
+          (temp) =>
+            !temp.regions ||
+            (temp.regions && temp.regions[bodyshop.region_config]) ||
+            (temp.regions && bodyshop.region_config.includes(Object.keys(temp.regions)) === true)
+        )
+        .filter((temp) => !technician || temp.group !== "financial");
+        
   const JobsReportsList =
     Enhanced_Payroll.treatment === "on"
       ? Object.keys(Templates)
@@ -89,7 +95,7 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop }) {
               <Space wrap>
                 <PrintCenterJobsLabels jobId={jobId} />
                 <Jobd3RdPartyModal jobId={jobId} job={job} />
-                <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} />
+                <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} enterButton />
               </Space>
             }
           >

client/src/components/print-wrapper/print-wrapper.component.jsx

@@ -1,5 +1,5 @@
 import { MailFilled, PrinterFilled } from "@ant-design/icons";
-import { Space, Spin } from "antd";
+import { Button, Space, Spin } from "antd";
 import { useState } from "react";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
@@ -26,16 +26,18 @@ export default function PrintWrapperComponent({
     <Space>
       {children || null}
       {!emailOnly && (
-        <PrinterFilled
+        <Button
+          style={{ cursor: disabled ? "not-allowed" : null }}
+          icon={<PrinterFilled />}
           disabled={disabled}
           onClick={() => handlePrint("p")}
-          style={{ cursor: disabled ? "not-allowed" : null }}
         />
       )}
-      <MailFilled
+      <Button
+        style={{ cursor: disabled ? "not-allowed" : null }}
+        icon={<MailFilled />}
         disabled={disabled}
         onClick={() => handlePrint("e")}
-        style={{ cursor: disabled ? "not-allowed" : null }}
       />
       {loading && <Spin />}
     </Space>

client/src/components/production-board-filters/production-board-filters.component.jsx

@@ -45,6 +45,7 @@ export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading })
           setFilter({ ...filter, search: e.target.value });
           logImEXEvent("visual_board_filter_search", { search: e.target.value });
         }}
+        enterButton
       />
       <EmployeeSearchSelectComponent
         style={{ minWidth: "20rem" }}

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -191,9 +191,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         style={{ paddingInline: 0, paddingBlock: 0 }}
         extra={
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
-              <SyncOutlined />
-            </Button>
+            <Button onClick={() => refetch && refetch()} icon={<SyncOutlined />} />
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
             <ProductionBoardKanbanSettings
               parentLoading={setLoading}

client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { DragDropContext } from "../dnd/lib";
 import PropTypes from "prop-types";
@@ -7,6 +7,7 @@ import { PopoverWrapper } from "react-popopo";
 import * as actions from "../../../../redux/trello/trello.actions.js";
 import { BoardWrapper } from "../styles/Base.js";
 import ProductionStatistics from "../../production-board-kanban.statistics.jsx";
+import isEqual from "lodash/isEqual";
 
 const useDragMap = () => {
   const dragMapRef = useRef(new Map());
@@ -47,8 +48,9 @@ const BoardContainer = ({
   const dispatch = useDispatch();
   const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
   const { setDragTime, getLastDragTime } = useDragMap();
+  const previousDataRef = useRef(null);
 
-  const wireEventBus = () => {
+  const wireEventBus = useCallback(() => {
     const eventBus = {
       publish: (event) => {
         switch (event.type) {
@@ -68,14 +70,17 @@ const BoardContainer = ({
       }
     };
     eventBusHandle(eventBus);
-  };
+  }, [dispatch, eventBusHandle]);
 
   useEffect(() => {
-    dispatch(actions.loadBoard(data));
-    if (eventBusHandle) {
-      wireEventBus();
+    if (!isEqual(previousDataRef.current, data)) {
+      previousDataRef.current = data;
+      dispatch(actions.loadBoard(data));
+      if (eventBusHandle) {
+        wireEventBus();
+      }
     }
-  }, [data, eventBusHandle, dispatch]);
+  }, [data, wireEventBus, dispatch]);
 
   useEffect(() => {
     onDataChange(currentReducerData);
@@ -153,12 +158,17 @@ const BoardContainer = ({
     }
   };
 
+  const boardKey = useMemo(() => {
+    // React Compiler: Generate stable key from lane IDs
+    return currentReducerData.lanes?.map((l) => l.id).join("-") || "empty";
+  }, [currentReducerData.lanes]);
+
   return (
     <div>
       <ProductionStatistics data={queryData} reducerData={currentReducerData} cardSettings={cardSettings} />
       <PopoverWrapper>
         <BoardWrapper orientation={orientation}>
-          <DragDropContext onDragEnd={onLaneDrag} onDragStart={onDragStart} contextId="production-board">
+          <DragDropContext key={boardKey} onDragEnd={onLaneDrag} onDragStart={onDragStart} contextId="production-board">
             {currentReducerData.lanes.map((lane, index) => (
               <Lane
                 key={lane.id}