IO-3514 Print Center Restrict Financial Group on Tech Station and Fix Drawer Close on Tech Console

Signed-off-by: Allan Carr <allan@imexsystems.ca>

client/.env.test.imex

@@ -16,4 +16,4 @@ VITE_APP_INSTANCE=IMEX
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
-VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^2.33.4",
     "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^4.0.13",
+    "@apollo/client": "^4.1.1",
     "@emotion/is-prop-valid": "^1.4.0",
     "@fingerprintjs/fingerprintjs": "^5.0.1",
     "@firebase/analytics": "^0.10.19",
@@ -21,11 +21,11 @@
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.11.2",
     "@sentry/cli": "^3.1.0",
-    "@sentry/react": "^10.34.0",
-    "@sentry/vite-plugin": "^4.6.2",
+    "@sentry/react": "^10.35.0",
+    "@sentry/vite-plugin": "^4.7.0",
     "@splitsoftware/splitio-react": "^2.6.1",
     "@tanem/react-nprogress": "^5.0.56",
-    "antd": "^6.2.0",
+    "antd": "^6.2.1",
     "apollo-link-logger": "^3.0.0",
     "autosize": "^6.0.1",
     "axios": "^1.13.2",
@@ -39,18 +39,18 @@
     "exifr": "^7.1.3",
     "graphql": "^16.12.0",
     "graphql-ws": "^6.0.6",
-    "i18next": "^25.7.4",
+    "i18next": "^25.8.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
     "libphonenumber-js": "^1.12.34",
-    "lightningcss": "^1.30.2",
+    "lightningcss": "^1.31.0",
     "logrocket": "^11.0.0",
     "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.1.1",
     "object-hash": "^3.0.0",
     "phone": "^3.1.69",
-    "posthog-js": "^1.322.0",
+    "posthog-js": "^1.335.0",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
@@ -84,7 +84,7 @@
     "rxjs": "^7.8.2",
     "sass": "^1.97.2",
     "socket.io-client": "^4.8.3",
-    "styled-components": "^6.3.6",
+    "styled-components": "^6.3.8",
     "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^5.1.0"
   },
@@ -135,14 +135,14 @@
     "@ant-design/icons": "^6.1.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.28.5",
-    "@dotenvx/dotenvx": "^1.51.4",
+    "@dotenvx/dotenvx": "^1.52.0",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@eslint/js": "^9.39.2",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.58.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@vitejs/plugin-react": "^5.1.2",
     "babel-plugin-react-compiler": "^1.0.0",
     "browserslist": "^4.28.1",
@@ -151,11 +151,11 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "globals": "^17.0.0",
+    "globals": "^17.1.0",
     "jsdom": "^27.4.0",
-    "memfs": "^4.52.0",
+    "memfs": "^4.56.10",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.57.0",
+    "playwright": "^1.58.0",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
@@ -165,7 +165,7 @@
     "vite-plugin-node-polyfills": "^0.25.0",
     "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^4.0.17",
+    "vitest": "^4.0.18",
     "workbox-window": "^7.4.0"
   }
 }

client/src/App/App.container.jsx

@@ -6,8 +6,7 @@ import enLocale from "antd/es/locale/en_US";
 import { useEffect, useMemo } from "react";
 import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
-import { connect, useSelector } from "react-redux";
-import { createStructuredSelector } from "reselect";
+import { useDispatch, useSelector } from "react-redux";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import { setDarkMode } from "../redux/application/application.actions";
 import { selectDarkMode } from "../redux/application/application.selectors";
@@ -28,93 +27,102 @@ const config = {
 function SplitClientProvider({ children }) {
   const imexshopid = useSelector((state) => state.user.imexshopid);
   const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
   useEffect(() => {
-    if (splitClient && imexshopid) {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
       console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
     }
   }, [splitClient, imexshopid]);
+
   return children;
 }
 
-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
-  signOutStart: () => dispatch(signOutStart())
-});
-
-function AppContainer({ currentUser, setDarkMode, signOutStart }) {
+function AppContainer() {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
   const isDarkMode = useSelector(selectDarkMode);
+
   const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
 
+  const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
+
+  const antdForm = useMemo(
+    () => ({
+      validateMessages: {
+        required: t("general.validation.required", { label: "${label}" })
+      }
+    }),
+    [t]
+  );
+
   // Global seamless logout listener with redirect to /signin
   useEffect(() => {
     const handleSeamlessLogout = (event) => {
       if (event.data?.type !== "seamlessLogoutRequest") return;
 
-      const requestOrigin = event.origin;
+      // Only accept messages from the parent window
+      if (event.source !== window.parent) return;
+
+      const targetOrigin = event.origin || "*";
 
       if (currentUser?.authorized !== true) {
-        window.parent.postMessage(
-          { type: "seamlessLogoutResponse", status: "already_logged_out" },
-          requestOrigin || "*"
-        );
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
         return;
       }
 
-      signOutStart();
-      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
     };
 
     window.addEventListener("message", handleSeamlessLogout);
     return () => {
       window.removeEventListener("message", handleSeamlessLogout);
     };
-  }, [signOutStart, currentUser]);
+  }, [dispatch, currentUser?.authorized]);
 
-  // Update data-theme attribute
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
   useEffect(() => {
-    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
-    return () => document.documentElement.removeAttribute("data-theme");
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
   }, [isDarkMode]);
 
   // Sync darkMode with localStorage
   useEffect(() => {
-    if (currentUser?.uid) {
-      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
-      if (savedMode !== null) {
-        setDarkMode(JSON.parse(savedMode));
-      } else {
-        setDarkMode(false);
-      }
-    } else {
-      setDarkMode(false);
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
     }
-  }, [currentUser?.uid, setDarkMode]);
+
+    const key = `dark-mode-${uid}`;
+    const raw = localStorage.getItem(key);
+
+    if (raw == null) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    try {
+      dispatch(setDarkMode(Boolean(JSON.parse(raw))));
+    } catch {
+      dispatch(setDarkMode(false));
+    }
+  }, [currentUser?.uid, dispatch]);
 
   // Persist darkMode
   useEffect(() => {
-    if (currentUser?.uid) {
-      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
-    }
+    const uid = currentUser?.uid;
+    if (!uid) return;
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
   }, [isDarkMode, currentUser?.uid]);
 
   return (
     <CookiesProvider>
       <ApolloProvider client={client}>
-        <ConfigProvider
-          input={{ autoComplete: "new-password" }}
-          locale={enLocale}
-          theme={theme}
-          form={{
-            validateMessages: {
-              required: t("general.validation.required", { label: "${label}" })
-            }
-          }}
-        >
+        <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
           <GlobalLoadingBar />
           <SplitFactoryProvider config={config}>
             <SplitClientProvider>
@@ -127,4 +135,4 @@ function AppContainer({ currentUser, setDarkMode, signOutStart }) {
   );
 }
 
-export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));
+export default Sentry.withProfiler(AppContainer);

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-component.jsx

@@ -56,7 +56,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
   const handleSave = () => {
     //It's got a previously deducted bill line!
     if (
-      data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
+      data?.bills_by_pk?.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
       form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length > 0
     )
       setOpen(true);
@@ -84,7 +84,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
     //Find bill lines that were deleted.
     const deletedJobLines = [];
 
-    data.bills_by_pk.billlines.forEach((a) => {
+    data?.bills_by_pk?.billlines.forEach((a) => {
       const matchingRecord = billlines.find((b) => b.id === a.id);
       if (!matchingRecord) {
         deletedJobLines.push(a);
@@ -151,8 +151,8 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
   if (error) return <AlertComponent title={error.message} type="error" />;
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
-  const exported = data?.bills_by_pk && data.bills_by_pk.exported;
-  const isinhouse = data?.bills_by_pk && data.bills_by_pk.isinhouse;
+  const exported = data?.bills_by_pk && data?.bills_by_pk?.exported;
+  const isinhouse = data?.bills_by_pk && data?.bills_by_pk?.isinhouse;
 
   return (
     <>
@@ -160,7 +160,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
       {data && (
         <>
           <PageHeader
-            title={data && `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`}
+            title={data && `${data?.bills_by_pk?.invoice_number} - ${data?.bills_by_pk?.vendor?.name}`}
             extra={
               <Space>
                 <BillDetailEditReturn data={data} />
@@ -192,15 +192,15 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
             <Divider titlePlacement="left">{t("general.labels.media")}</Divider>
             {bodyshop.uselocalmediaserver ? (
               <JobsDocumentsLocalGallery
-                job={{ id: data ? data.bills_by_pk.jobid : null }}
-                invoice_number={data ? data.bills_by_pk.invoice_number : null}
-                vendorid={data ? data.bills_by_pk.vendorid : null}
+                job={{ id: data ? data?.bills_by_pk?.jobid : null }}
+                invoice_number={data ? data?.bills_by_pk?.invoice_number : null}
+                vendorid={data ? data?.bills_by_pk?.vendorid : null}
               />
             ) : (
               <JobDocumentsGallery
-                jobId={data ? data.bills_by_pk.jobid : null}
+                jobId={data ? data?.bills_by_pk?.jobid : null}
                 billId={search.billid}
-                documentsList={data ? data.bills_by_pk.documents : []}
+                documentsList={data ? data?.bills_by_pk?.documents : []}
                 billsCallback={refetch}
               />
             )}
@@ -212,7 +212,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
 }
 
 const transformData = (data) => {
-  return data
+  return data?.bills_by_pk
     ? {
         ...data.bills_by_pk,
 

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

@@ -98,17 +98,19 @@ export function BillFormComponent({
     }
     const jobId = form.getFieldValue("jobid");
     if (jobId) {
-      loadLines({ id: jobId });
+      loadLines({ variables: { id: jobId } });
       if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
         loadOutstandingReturns({
-          jobId: jobId,
-          vendorId: vendorId
+          variables: {
+            jobId: jobId,
+            vendorId: vendorId
+          }
         });
       }
     }
 
     if (vendorId === bodyshop.inhousevendorid && !billEdit) {
-      loadInventory();
+      loadInventory({ variables: {} });
     }
   }, [
     form,
@@ -124,7 +126,7 @@ export function BillFormComponent({
   return (
     <div>
       <FormFieldsChanged form={form} />
-      <Form.Item style={{ display: "none" }} name="isinhouse" valuePropName="checked">
+      <Form.Item hidden name="isinhouse" valuePropName="checked">
         <Switch />
       </Form.Item>
       <LayoutFormRow grow>
@@ -144,11 +146,13 @@ export function BillFormComponent({
             notExported={false}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
-                loadLines({ id: form.getFieldValue("jobid") });
+                loadLines({ variables: { id: form.getFieldValue("jobid") } });
                 if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
                   loadOutstandingReturns({
-                    jobId: form.getFieldValue("jobid"),
-                    vendorId: form.getFieldValue("vendorid")
+                    variables: {
+                      jobId: form.getFieldValue("jobid"),
+                      vendorId: form.getFieldValue("vendorid")
+                    }
                   });
                 }
               }
@@ -189,7 +193,7 @@ export function BillFormComponent({
           <Alert
             key={iou.id}
             type="warning"
-            message={
+            title={
               <Space>
                 {t("bills.labels.iouexists")}
                 <Link target="_blank" rel="noopener noreferrer" to={`/manage/jobs/${iou.id}?tab=repairdata`}>

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

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectDarkMode } from "../../redux/application/application.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
@@ -13,15 +14,15 @@ import CurrencyInput from "../form-items-formatted/currency-form-item.component"
 import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  bodyshop: selectBodyshop,
+  isDarkMode: selectDarkMode
 });
 
+const mapDispatchToProps = () => ({});
+
 export function BillEnterModalLinesComponent({
   bodyshop,
+  isDarkMode,
   disabled,
   lineData,
   discount,
@@ -32,6 +33,99 @@ export function BillEnterModalLinesComponent({
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
 
+  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;
+  };
+
+  const round2 = (v) => Math.round((v + Number.EPSILON) * 100) / 100;
+
+  const isBlank = (v) => v === null || v === undefined || v === "" || Number.isNaN(v);
+
+  const toNumber = (raw) => {
+    if (raw === null || raw === undefined) return NaN;
+    if (typeof raw === "number") return raw;
+
+    if (typeof raw === "string") {
+      const cleaned = raw
+        .trim()
+        .replace(/[^\d.,-]/g, "")
+        .replace(/,/g, "");
+      return Number.parseFloat(cleaned);
+    }
+
+    if (typeof raw === "object") {
+      try {
+        if (typeof raw.toNumber === "function") return raw.toNumber();
+
+        const v = raw.valueOf?.();
+        if (typeof v === "number") return v;
+        if (typeof v === "string") {
+          const cleaned = v
+            .trim()
+            .replace(/[^\d.,-]/g, "")
+            .replace(/,/g, "");
+          return Number.parseFloat(cleaned);
+        }
+      } catch {
+        // ignore
+      }
+    }
+
+    return NaN;
+  };
+
+  const setLineField = (index, field, value) => {
+    if (typeof form.setFieldValue === "function") {
+      form.setFieldValue(["billlines", index, field], value);
+      return;
+    }
+
+    const lines = form.getFieldValue("billlines") || [];
+    form.setFieldsValue({
+      billlines: lines.map((l, i) => (i === index ? { ...l, [field]: value } : l))
+    });
+  };
+
+  const autofillActualCost = (index) => {
+    Promise.resolve().then(() => {
+      const retailRaw = form.getFieldValue(["billlines", index, "actual_price"]);
+      const actualRaw = form.getFieldValue(["billlines", index, "actual_cost"]);
+      const d = normalizeDiscount(discount);
+
+      if (!isBlank(actualRaw)) return;
+
+      const retail = toNumber(retailRaw);
+      if (!Number.isFinite(retail)) return;
+
+      const next = round2(retail * (1 - d));
+      setLineField(index, "actual_cost", next);
+    });
+  };
+
+  const getIndicatorColor = (lineDiscount) => {
+    const d = normalizeDiscount(discount);
+    if (Math.abs(lineDiscount - d) > 0.005) return lineDiscount > d ? "orange" : "red";
+    return "green";
+  };
+
+  const getIndicatorShellStyles = (statusColor) => {
+    if (isDarkMode) {
+      if (statusColor === "green")
+        return { borderColor: "rgba(82, 196, 26, 0.75)", background: "rgba(82, 196, 26, 0.10)" };
+      if (statusColor === "orange")
+        return { borderColor: "rgba(250, 173, 20, 0.75)", background: "rgba(250, 173, 20, 0.10)" };
+      return { borderColor: "rgba(255, 77, 79, 0.75)", background: "rgba(255, 77, 79, 0.10)" };
+    }
+
+    if (statusColor === "green") return { borderColor: "#b7eb8f", background: "#f6ffed" };
+    if (statusColor === "orange") return { borderColor: "#ffe58f", background: "#fffbe6" };
+    return { borderColor: "#ffccc7", background: "#fff2f0" };
+  };
+
   const {
     treatments: { Simple_Inventory, Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -47,24 +141,15 @@ export function BillEnterModalLinesComponent({
         dataIndex: "joblineid",
         editable: true,
         minWidth: "10rem",
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}joblinename`,
-            name: [field.name, "joblineid"],
-            label: t("billlines.fields.jobline"),
-            rules: [
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]
-          };
-        },
+        formItemProps: (field) => ({
+          key: `${field.name}joblinename`,
+          name: [field.name, "joblineid"],
+          label: t("billlines.fields.jobline"),
+          rules: [{ required: true }]
+        }),
         wrapper: (props) => (
           <Form.Item noStyle shouldUpdate={(prev, cur) => prev.is_credit_memo !== cur.is_credit_memo}>
-            {() => {
-              return props.children;
-            }}
+            {() => props.children}
           </Form.Item>
         ),
         formInput: (record, index) => (
@@ -72,35 +157,37 @@ export function BillEnterModalLinesComponent({
             disabled={disabled}
             options={lineData}
             style={{
-              //width: "10rem",
-              // maxWidth: "20rem",
               minWidth: "20rem",
               whiteSpace: "normal",
               height: "auto",
-              minHeight: "32px" // default height of Ant Design inputs
+              minHeight: `${CONTROL_HEIGHT}px`
             }}
             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;
+
               setFieldsValue({
-                billlines: getFieldsValue(["billlines"]).billlines.map((item, idx) => {
-                  if (idx === index) {
-                    return {
-                      ...item,
-                      line_desc: opt.line_desc,
-                      quantity: opt.part_qty || 1,
-                      actual_price: opt.cost,
-                      original_actual_price: opt.cost,
-                      cost_center: opt.part_type
-                        ? bodyshopHasDmsKey(bodyshop)
-                          ? opt.part_type !== "PAE"
-                            ? opt.part_type
-                            : null
-                          : responsibilityCenters.defaults &&
-                            (responsibilityCenters.defaults.costs[opt.part_type] || null)
-                        : null
-                    };
-                  }
-                  return item;
+                billlines: (getFieldValue("billlines") || []).map((item, idx) => {
+                  if (idx !== index) return item;
+
+                  return {
+                    ...item,
+                    line_desc: opt.line_desc,
+                    quantity: opt.part_qty || 1,
+                    actual_price: opt.cost,
+                    original_actual_price: opt.cost,
+                    actual_cost: isBlank(item.actual_cost) ? computedActual : item.actual_cost,
+                    cost_center: opt.part_type
+                      ? bodyshopHasDmsKey(bodyshop)
+                        ? opt.part_type !== "PAE"
+                          ? opt.part_type
+                          : null
+                        : responsibilityCenters.defaults &&
+                          (responsibilityCenters.defaults.costs[opt.part_type] || null)
+                      : null
+                  };
                 })
               });
             }}
@@ -112,19 +199,12 @@ export function BillEnterModalLinesComponent({
         dataIndex: "line_desc",
         editable: true,
         minWidth: "10rem",
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}line_desc`,
-            name: [field.name, "line_desc"],
-            label: t("billlines.fields.line_desc"),
-            rules: [
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]
-          };
-        },
+        formItemProps: (field) => ({
+          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 />
       },
       {
@@ -132,31 +212,28 @@ export function BillEnterModalLinesComponent({
         dataIndex: "quantity",
         editable: true,
         width: "4rem",
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}quantity`,
-            name: [field.name, "quantity"],
-            label: t("billlines.fields.quantity"),
-            rules: [
-              {
-                required: true
-                //message: t("general.validation.required"),
-              },
-              ({ getFieldValue }) => ({
-                validator(rule, value) {
-                  if (value && getFieldValue("billlines")[field.fieldKey]?.inventories?.length > value) {
-                    return Promise.reject(
-                      t("bills.validation.inventoryquantity", {
-                        number: getFieldValue("billlines")[field.fieldKey]?.inventories?.length
-                      })
-                    );
-                  }
-                  return Promise.resolve();
+        formItemProps: (field) => ({
+          key: `${field.name}quantity`,
+          name: [field.name, "quantity"],
+          label: t("billlines.fields.quantity"),
+          rules: [
+            { required: true },
+            ({ getFieldValue: gf }) => ({
+              validator(_, value) {
+                const invLen = gf(["billlines", field.name, "inventories"])?.length ?? 0;
+
+                if (value && invLen > value) {
+                  return Promise.reject(
+                    t("bills.validation.inventoryquantity", {
+                      number: invLen
+                    })
+                  );
                 }
-              })
-            ]
-          };
-        },
+                return Promise.resolve();
+              }
+            })
+          ]
+        }),
         formInput: () => <InputNumber precision={0} min={1} disabled={disabled} />
       },
       {
@@ -164,37 +241,19 @@ export function BillEnterModalLinesComponent({
         dataIndex: "actual_price",
         width: "8rem",
         editable: true,
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}actual_price`,
-            name: [field.name, "actual_price"],
-            label: t("billlines.fields.actual_price"),
-            rules: [
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]
-          };
-        },
+        formItemProps: (field) => ({
+          key: `${field.name}actual_price`,
+          name: [field.name, "actual_price"],
+          label: t("billlines.fields.actual_price"),
+          rules: [{ required: true }]
+        }),
         formInput: (record, index) => (
           <CurrencyInput
             min={0}
             disabled={disabled}
-            onBlur={(e) => {
-              setFieldsValue({
-                billlines: getFieldsValue("billlines").billlines.map((item, idx) => {
-                  if (idx === index) {
-                    return {
-                      ...item,
-                      actual_cost: item.actual_cost
-                        ? item.actual_cost
-                        : Math.round((parseFloat(e.target.value) * (1 - discount) + Number.EPSILON) * 100) / 100
-                    };
-                  }
-                  return item;
-                })
-              });
+            onBlur={() => autofillActualCost(index)}
+            onKeyDown={(e) => {
+              if (e.key === "Tab") autofillActualCost(index);
             }}
           />
         ),
@@ -221,9 +280,8 @@ export function BillEnterModalLinesComponent({
                         {t("joblines.fields.create_ppc")}
                       </Space>
                     );
-                  } else {
-                    return null;
                   }
+                  return null;
                 }}
               </Form.Item>
             )
@@ -234,93 +292,105 @@ export function BillEnterModalLinesComponent({
         dataIndex: "actual_cost",
         editable: true,
         width: "10rem",
+        skipFormItem: true,
+        formItemProps: (field) => ({
+          key: `${field.name}actual_cost`,
+          name: [field.name, "actual_cost"],
+          label: t("billlines.fields.actual_cost"),
+          rules: [{ required: true }]
+        }),
+        formInput: (record, index, fieldProps) => {
+          const { name, rules, valuePropName, getValueFromEvent, normalize, validateTrigger, initialValue } =
+            fieldProps || {};
 
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}actual_cost`,
-            name: [field.name, "actual_cost"],
-            label: t("billlines.fields.actual_cost"),
-            rules: [
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]
+          const bindProps = {
+            name,
+            rules,
+            valuePropName,
+            getValueFromEvent,
+            normalize,
+            validateTrigger,
+            initialValue
           };
-        },
-        formInput: (record, index) => (
-          <CurrencyInput
-            min={0}
-            disabled={disabled}
-            controls={false}
-            addonAfter={
+
+          return (
+            <div
+              style={{
+                display: "flex",
+                width: "100%",
+                alignItems: "center",
+                height: CONTROL_HEIGHT
+              }}
+            >
+              <div style={{ flex: "1 1 auto", minWidth: 0 }}>
+                <Form.Item noStyle {...bindProps}>
+                  <CurrencyInput
+                    min={0}
+                    disabled={disabled}
+                    controls={false}
+                    style={{ width: "100%", height: CONTROL_HEIGHT }}
+                    onFocus={() => autofillActualCost(index)}
+                  />
+                </Form.Item>
+              </div>
+
               <Form.Item shouldUpdate noStyle>
                 {() => {
-                  const line = getFieldsValue(["billlines"]).billlines[index];
+                  const all = getFieldsValue(["billlines"]);
+                  const line = all?.billlines?.[index];
                   if (!line) return null;
-                  let lineDiscount = 1 - line.actual_cost / line.actual_price;
-                  if (isNaN(lineDiscount)) lineDiscount = 0;
+
+                  const ap = toNumber(line.actual_price);
+                  const ac = toNumber(line.actual_cost);
+
+                  let lineDiscount = 0;
+                  if (Number.isFinite(ap) && ap !== 0 && Number.isFinite(ac)) {
+                    lineDiscount = 1 - ac / ap;
+                  }
+
+                  const statusColor = getIndicatorColor(lineDiscount);
+                  const shell = getIndicatorShellStyles(statusColor);
+
                   return (
                     <Tooltip title={`${(lineDiscount * 100).toFixed(2) || 0}%`}>
-                      <DollarCircleFilled
+                      <div
                         style={{
-                          color:
-                            Math.abs(lineDiscount - discount) > 0.005
-                              ? lineDiscount > discount
-                                ? "orange"
-                                : "red"
-                              : "green"
+                          height: CONTROL_HEIGHT,
+                          minWidth: CONTROL_HEIGHT,
+                          padding: "0 10px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          boxSizing: "border-box",
+                          borderStyle: "solid",
+                          borderWidth: 1,
+                          borderLeftWidth: 0,
+                          ...shell,
+                          borderTopRightRadius: 6,
+                          borderBottomRightRadius: 6
                         }}
-                      />
+                      >
+                        <DollarCircleFilled style={{ color: statusColor, lineHeight: 1 }} />
+                      </div>
                     </Tooltip>
                   );
                 }}
               </Form.Item>
-            }
-          />
-        )
-        // additional: (record, index) => (
-        //   <Form.Item shouldUpdate>
-        //     {() => {
-        //       const line = getFieldsValue(["billlines"]).billlines[index];
-        //       if (!!!line) return null;
-        //       const lineDiscount = (
-        //         1 -
-        //         Math.round((line.actual_cost / line.actual_price) * 100) / 100
-        //       ).toPrecision(2);
-
-        //       return (
-        //         <Tooltip title={`${(lineDiscount * 100).toFixed(0) || 0}%`}>
-        //           <DollarCircleFilled
-        //             style={{
-        //               color: lineDiscount - discount !== 0 ? "red" : "green",
-        //             }}
-        //           />
-        //         </Tooltip>
-        //       );
-        //     }}
-        //   </Form.Item>
-        // ),
+            </div>
+          );
+        }
       },
       {
         title: t("billlines.fields.cost_center"),
         dataIndex: "cost_center",
         editable: true,
-
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}cost_center`,
-            name: [field.name, "cost_center"],
-            label: t("billlines.fields.cost_center"),
-            valuePropName: "value",
-            rules: [
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]
-          };
-        },
+        formItemProps: (field) => ({
+          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}>
             {bodyshopHasDmsKey(bodyshop)
@@ -337,12 +407,10 @@ export function BillEnterModalLinesComponent({
               dataIndex: "location",
               editable: true,
               label: t("billlines.fields.location"),
-              formItemProps: (field) => {
-                return {
-                  key: `${field.index}location`,
-                  name: [field.name, "location"]
-                };
-              },
+              formItemProps: (field) => ({
+                key: `${field.name}location`,
+                name: [field.name, "location"]
+              }),
               formInput: () => (
                 <Select disabled={disabled}>
                   {bodyshop.md_parts_locations.map((loc, idx) => (
@@ -359,25 +427,19 @@ export function BillEnterModalLinesComponent({
         dataIndex: "deductedfromlbr",
         editable: true,
         width: "40px",
-        formItemProps: (field) => {
-          return {
-            valuePropName: "checked",
-            key: `${field.index}deductedfromlbr`,
-            name: [field.name, "deductedfromlbr"]
-          };
-        },
+        formItemProps: (field) => ({
+          valuePropName: "checked",
+          key: `${field.name}deductedfromlbr`,
+          name: [field.name, "deductedfromlbr"]
+        }),
         formInput: () => <Switch disabled={disabled} />,
         additional: (record, index) => (
           <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
               const price = getFieldValue(["billlines", record.name, "actual_price"]);
-
               const adjustmentRate = getFieldValue(["billlines", record.name, "lbr_adjustment", "rate"]);
-
               const billline = getFieldValue(["billlines", record.name]);
-
               const jobline = lineData.find((line) => line.id === billline?.joblineid);
-
               const employeeTeamName = bodyshop.employee_teams.find((team) => team.id === jobline?.assigned_team);
 
               if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
@@ -385,9 +447,7 @@ export function BillEnterModalLinesComponent({
                   <div>
                     {Enhanced_Payroll.treatment === "on" ? (
                       <Space>
-                        {t("joblines.fields.assigned_team", {
-                          name: employeeTeamName?.name
-                        })}
+                        {t("joblines.fields.assigned_team", { name: employeeTeamName?.name })}
                         {`${jobline.mod_lb_hrs} units/${t(`joblines.fields.lbr_types.${jobline.mod_lbr_ty}`)}`}
                       </Space>
                     ) : null}
@@ -396,12 +456,7 @@ export function BillEnterModalLinesComponent({
                       label={t("joblines.fields.mod_lbr_ty")}
                       key={`${index}modlbrty`}
                       initialValue={jobline ? jobline.mod_lbr_ty : null}
-                      rules={[
-                        {
-                          required: true
-                          //message: t("general.validation.required"),
-                        }
-                      ]}
+                      rules={[{ required: true }]}
                       name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                     >
                       <Select allowClear>
@@ -421,16 +476,12 @@ export function BillEnterModalLinesComponent({
                         <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
                       </Select>
                     </Form.Item>
+
                     {Enhanced_Payroll.treatment === "on" ? (
                       <Form.Item
                         label={t("billlines.labels.mod_lbr_adjustment")}
                         name={[record.name, "lbr_adjustment", "mod_lb_hrs"]}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                        rules={[{ required: true }]}
                       >
                         <InputNumber precision={5} min={0.01} max={jobline ? jobline.mod_lb_hrs : 0} />
                       </Form.Item>
@@ -439,12 +490,7 @@ export function BillEnterModalLinesComponent({
                         label={t("jobs.labels.adjustmentrate")}
                         name={[record.name, "lbr_adjustment", "rate"]}
                         initialValue={bodyshop.default_adjustment_rate}
-                        rules={[
-                          {
-                            required: true
-                            //message: t("general.validation.required"),
-                          }
-                        ]}
+                        rules={[{ required: true }]}
                       >
                         <InputNumber precision={2} min={0.01} />
                       </Form.Item>
@@ -453,6 +499,7 @@ export function BillEnterModalLinesComponent({
                     <Space>{price && adjustmentRate && `${(price / adjustmentRate).toFixed(1)} hrs`}</Space>
                   </div>
                 );
+
               return <></>;
             }}
           </Form.Item>
@@ -467,17 +514,11 @@ export function BillEnterModalLinesComponent({
             dataIndex: "applicable_taxes.federal",
             editable: true,
             width: "40px",
-            formItemProps: (field) => {
-              return {
-                key: `${field.index}fedtax`,
-                valuePropName: "checked",
-                initialValue: InstanceRenderManager({
-                  imex: true,
-                  rome: false
-                }),
-                name: [field.name, "applicable_taxes", "federal"]
-              };
-            },
+            formItemProps: (field) => ({
+              key: `${field.name}fedtax`,
+              valuePropName: "checked",
+              name: [field.name, "applicable_taxes", "federal"]
+            }),
             formInput: () => <Switch disabled={disabled} />
           }
         ]
@@ -488,13 +529,11 @@ export function BillEnterModalLinesComponent({
         dataIndex: "applicable_taxes.state",
         editable: true,
         width: "40px",
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}statetax`,
-            valuePropName: "checked",
-            name: [field.name, "applicable_taxes", "state"]
-          };
-        },
+        formItemProps: (field) => ({
+          key: `${field.name}statetax`,
+          valuePropName: "checked",
+          name: [field.name, "applicable_taxes", "state"]
+        }),
         formInput: () => <Switch disabled={disabled} />
       },
 
@@ -506,40 +545,43 @@ export function BillEnterModalLinesComponent({
             dataIndex: "applicable_taxes.local",
             editable: true,
             width: "40px",
-            formItemProps: (field) => {
-              return {
-                key: `${field.index}localtax`,
-                valuePropName: "checked",
-                name: [field.name, "applicable_taxes", "local"]
-              };
-            },
+            formItemProps: (field) => ({
+              key: `${field.name}localtax`,
+              valuePropName: "checked",
+              name: [field.name, "applicable_taxes", "local"]
+            }),
             formInput: () => <Switch disabled={disabled} />
           }
         ]
       }),
+
       {
         title: t("general.labels.actions"),
-
         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>
-                {Simple_Inventory.treatment === "on" && (
-                  <BilllineAddInventory
-                    disabled={!billEdit || form.isFieldsTouched() || form.getFieldValue("is_credit_memo")}
-                    billline={getFieldValue("billlines")[record.fieldKey]}
-                    jobid={getFieldValue("jobid")}
+            {() => {
+              const currentLine = getFieldValue(["billlines", record.name]);
+              const invLen = currentLine?.inventories?.length ?? 0;
+
+              return (
+                <Space wrap>
+                  <Button
+                    icon={<DeleteFilled />}
+                    disabled={disabled || invLen > 0}
+                    onClick={() => remove(record.name)}
                   />
-                )}
-              </Space>
-            )}
+
+                  {Simple_Inventory.treatment === "on" && (
+                    <BilllineAddInventory
+                      disabled={!billEdit || form.isFieldsTouched() || form.getFieldValue("is_credit_memo")}
+                      billline={currentLine}
+                      jobid={getFieldValue("jobid")}
+                    />
+                  )}
+                </Space>
+              );
+            }}
           </Form.Item>
         )
       }
@@ -549,6 +591,7 @@ export function BillEnterModalLinesComponent({
   const mergedColumns = (remove) =>
     columns(remove).map((col) => {
       if (!col.editable) return col;
+
       return {
         ...col,
         onCell: (record) => ({
@@ -556,8 +599,8 @@ export function BillEnterModalLinesComponent({
           formItemProps: col.formItemProps,
           formInput: col.formInput,
           additional: col.additional,
-          dataIndex: col.dataIndex,
-          title: col.title
+          wrapper: col.wrapper,
+          skipFormItem: col.skipFormItem
         })
       };
     });
@@ -576,33 +619,41 @@ export function BillEnterModalLinesComponent({
       ]}
     >
       {(fields, { add, remove }) => {
+        const hasRows = fields.length > 0;
+
         return (
           <>
             <Table
-              components={{
-                body: {
-                  cell: EditableCell
-                }
-              }}
+              className="bill-lines-table"
+              components={{ body: { cell: EditableCell } }}
               size="small"
               bordered
               dataSource={fields}
+              rowKey="key"
               columns={mergedColumns(remove)}
-              scroll={{ x: true }}
+              scroll={hasRows ? { x: "max-content" } : undefined}
               pagination={false}
               rowClassName="editable-row"
             />
-            <Form.Item>
-              <Button
-                disabled={disabled}
-                onClick={() => {
-                  add();
-                }}
-                style={{ width: "100%" }}
-              >
-                {t("billlines.actions.newline")}
-              </Button>
-            </Form.Item>
+
+            <div style={{ marginTop: 12 }}>
+              <Form.Item style={{ marginBottom: 0 }}>
+                <Button
+                  disabled={disabled}
+                  onClick={() => {
+                    add(
+                      InstanceRenderManager({
+                        imex: { applicable_taxes: { federal: true } },
+                        rome: { applicable_taxes: { federal: false } }
+                      })
+                    );
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("billlines.actions.newline")}
+                </Button>
+              </Form.Item>
+            </div>
           </>
         );
       }}
@@ -613,55 +664,50 @@ export function BillEnterModalLinesComponent({
 export default connect(mapStateToProps, mapDispatchToProps)(BillEnterModalLinesComponent);
 
 const EditableCell = ({
-  dataIndex,
   record,
   children,
   formInput,
   formItemProps,
   additional,
   wrapper: Wrapper,
+  skipFormItem,
   ...restProps
 }) => {
   const rawProps = formItemProps?.(record);
 
-  // DO NOT mutate rawProps; omit `key` immutably
   const propsFinal = rawProps
     ? (() => {
-        const { ...rest } = rawProps;
+        // eslint-disable-next-line no-unused-vars
+        const { key, ...rest } = rawProps;
         return rest;
       })()
     : undefined;
 
-  if (additional) {
-    return (
-      <td {...restProps}>
-        <div>
-          <Form.Item name={dataIndex} labelCol={{ span: 0 }} {...propsFinal}>
-            {(formInput && formInput(record, record.name)) || children}
-          </Form.Item>
-          {additional(record, record.name)}
-        </div>
-      </td>
-    );
-  }
+  const control = skipFormItem ? (
+    (formInput && formInput(record, record.name, propsFinal)) || children
+  ) : (
+    <Form.Item labelCol={{ span: 0 }} {...propsFinal} style={{ marginBottom: 0 }}>
+      {(formInput && formInput(record, record.name, propsFinal)) || children}
+    </Form.Item>
+  );
 
-  if (Wrapper) {
-    return (
-      <Wrapper>
-        <td {...restProps}>
-          <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
-            {(formInput && formInput(record, record.name)) || children}
-          </Form.Item>
-        </td>
-      </Wrapper>
-    );
-  }
+  const cellInner = additional ? (
+    <div>
+      {control}
+      {additional(record, record.name)}
+    </div>
+  ) : (
+    control
+  );
 
-  return (
-    <td {...restProps}>
-      <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
-        {(formInput && formInput(record, record.name)) || children}
-      </Form.Item>
+  const { style: tdStyle, ...tdRest } = restProps;
+
+  const td = (
+    <td {...tdRest} style={{ ...tdStyle, verticalAlign: "middle" }}>
+      {cellInner}
     </td>
   );
+
+  if (Wrapper) return <Wrapper>{td}</Wrapper>;
+  return 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

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

@@ -15,17 +15,19 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 import "./chat-popup.styles.scss";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
-  chatVisible: selectChatVisible
+  chatVisible: selectChatVisible,
+  isDarkMode: selectDarkMode
 });
 
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
-export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
+export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible, isDarkMode }) {
   const { t } = useTranslation();
   const { socket } = useSocket();
   const client = useApolloClient();
@@ -105,7 +107,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
 
     hasLoadedConversationsOnceRef.current = true;
 
-    getConversations({ offset: 0 }).catch((err) => {
+    getConversations({ variables: { offset: 0 } }).catch((err) => {
       console.error(`Error fetching conversations: ${err?.message || ""}`, err);
     });
   }, [getConversations]);
@@ -113,9 +115,9 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const handleManualRefresh = async () => {
     try {
       if (called && typeof refetch === "function") {
-        await refetch({ variables: { offset: 0 } });
+        await refetch({ offset: 0 });
       } else {
-        await getConversations({ offset: 0 });
+        await getConversations({ variables: { offset: 0 } });
       }
     } catch (err) {
       console.error(`Error refreshing conversations: ${err?.message || ""}`, err);
@@ -154,7 +156,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     <Badge count={unreadCount}>
       <Card size="small">
         {chatVisible ? (
-          <div className="chat-popup">
+          <div className={`chat-popup ${isDarkMode ? "chat-popup--dark" : "chat-popup--light"}`}>
             <Space align="center">
               <Typography.Title level={4}>{t("messaging.labels.messaging")}</Typography.Title>
               <ChatNewConversation />

client/src/components/chat-popup/chat-popup.styles.scss

@@ -26,3 +26,11 @@
     flex-direction: column;
   }
 }
+
+.chat-popup--dark {
+  color-scheme: dark;
+}
+
+.chat-popup--light {
+  color-scheme: light;
+}

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -28,7 +28,7 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
 
   const executeSearch = (v) => {
     logImEXEvent("messaging_search_job_tag", { searchTerm: v });
-    loadRo(v).catch((e) => console.error("Error in ChatTagRoContainer executeSearch:", e));
+    loadRo({ variables: v }).catch((e) => console.error("Error in ChatTagRoContainer executeSearch:", e));
   };
 
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);

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

@@ -11,7 +11,7 @@ export default function ContractCreateJobPrefillComponent({ jobId, form }) {
   const notification = useNotification();
 
   const handleClick = () => {
-    call({ id: jobId });
+    call({ variables: { id: jobId } });
   };
 
   useEffect(() => {

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

@@ -35,8 +35,10 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
 
     //Execute contract find
     callSearch({
-      plate: (values.plate && values.plate !== "" && values.plate) || undefined,
-      time: values.time
+      variables: {
+        plate: (values.plate && values.plate !== "" && values.plate) || undefined,
+        time: values.time
+      }
     });
   };
 

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

@@ -156,9 +156,8 @@ 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) => {

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-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/data-label/data-label.component.jsx

@@ -13,31 +13,32 @@ export default function DataLabel({
   if (!open || (hideIfNull && !children)) return null;
 
   return (
-    <div {...props} style={{ display: "flex" }}>
+    <div {...props} style={{ display: "flex", alignItems: "flex-start" }}>
       <div
         style={{
-          // flex: 2,
-          marginRight: ".2rem"
+          marginRight: ".2rem",
+          flexShrink: 0, // <-- key: don't let the label collapse
+          whiteSpace: "nowrap" // <-- key: keep "Email:" on one line
         }}
       >
         <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
       </div>
+
       <div
         style={{
-          flex: 4,
+          flex: 1, // <-- key: take remaining space
+          minWidth: 0, // <-- key: allow this flex item to shrink
           marginLeft: ".3rem",
           fontWeight: "bolder",
-          wordWrap: "break-word",
-          cursor: onValueClick !== undefined ? "pointer" : ""
+          overflowWrap: "anywhere", // <-- key: break long tokens (email/vin)
+          wordBreak: "break-word", // (backup behavior across browsers)
+          cursor: onValueClick !== undefined ? "pointer" : "",
+          ...(styles?.value ?? {}) // apply your per-field overrides to ALL children types
         }}
         className={valueClassName}
         onClick={onValueClick}
       >
-        {typeof children === "string" ? (
-          <Typography.Text style={styles?.value}>{children}</Typography.Text>
-        ) : (
-          children
-        )}
+        {typeof children === "string" ? <Typography.Text>{children}</Typography.Text> : children}
       </div>
     </div>
   );

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

@@ -60,7 +60,7 @@ export function DmsCdkVehicles({ form, job }) {
         <Table
           title={() => (
             <Input.Search
-              onSearch={(val) => callSearch({ search: val })}
+              onSearch={(val) => callSearch({ variables: { search: val } })}
               placeholder={t("general.labels.search")}
             />
           )}
@@ -87,7 +87,9 @@ export function DmsCdkVehicles({ form, job }) {
         onClick={() => {
           setOpen(true);
           callSearch({
-            search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
+            variables: {
+              search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
+            }
           });
         }}
       >

client/src/components/email-overlay/email-overlay.container.jsx

@@ -32,6 +32,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
   const [loading, setLoading] = useState(false);
   const [sending, setSending] = useState(false);
   const [rawHtml, setRawHtml] = useState("");
+  const [htmlSize, setHtmlSize] = useState(0);
   const [pdfCopytoAttach, setPdfCopytoAttach] = useState({
     filename: null,
     pdf: null
@@ -151,6 +152,13 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
     if (modalVisible) render();
   }, [modalVisible]);
 
+  useEffect(() => {
+    const html = form.getFieldValue("html");
+    if (html) {
+      setHtmlSize(new Blob([html]).size);
+    }
+  }, [form, rawHtml]);
+
   return (
     <Modal
       destroyOnHidden
@@ -169,7 +177,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
         disabled:
           selectedMedia &&
           (selectedMedia.filter((s) => s.isSelected).reduce((acc, val) => (acc = acc + val.size), 0) >=
-            10485760 - new Blob([form.getFieldValue("html")]).size ||
+            10485760 - htmlSize ||
             selectedMedia.filter((s) => s.isSelected).length > 10)
       }}
     >
@@ -195,7 +203,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
               disabled={
                 selectedMedia &&
                 (selectedMedia.filter((s) => s.isSelected).reduce((acc, val) => (acc = acc + val.size), 0) >=
-                  10485760 - new Blob([form.getFieldValue("html")]).size ||
+                  10485760 - htmlSize ||
                   selectedMedia.filter((s) => s.isSelected).length > 10)
               }
               type="primary"

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-at-change/schedule-event.component.jsx

@@ -120,6 +120,13 @@ export function ScheduleEventComponent({
   );
 
   const handleConvert = async (values) => {
+    if (!event.job?.id) {
+      notification.error({
+        title: t("appointments.errors.nojob")
+      });
+      return;
+    }
+
     const res = await mutationUpdateJob({
       variables: {
         jobId: event.job.id,
@@ -397,21 +404,21 @@ export function ScheduleEventComponent({
           (HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
             <Link
               to={{
-                pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
+                pathname: `/manage/jobs/${event.job.id}/intake`,
                 search: `?appointmentId=${event.id}`
               }}
             >
               <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
             </Link>
           ) : (
-            <Popover //open={open}
+            <Popover
               content={popMenu}
               open={popOverVisible}
               onOpenChange={setPopOverVisible}
               onClick={(e) => {
                 if (event.job?.id) {
                   e.stopPropagation();
-                  getJobDetails({ id: event.job.id });
+                  getJobDetails({ variables: { id: event.job.id } });
                 }
               }}
               getPopupContainer={(trigger) => trigger.parentNode}
@@ -434,37 +441,36 @@ export function ScheduleEventComponent({
     return baseColor;
   };
 
-  const RegularEvent = event.isintake ? (
-    <Space
-      wrap
-      size="small"
-      style={{
-        backgroundColor: getEventBackground()
-      }}
-    >
-      {event.note && <AlertFilled className="production-alert" />}
-      <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
-      <OwnerNameDisplay ownerObject={event.job} />
-      {`${(event.job && event.job.v_model_yr) || ""} ${
-        (event.job && event.job.v_make_desc) || ""
-      } ${(event.job && event.job.v_model_desc) || ""}`}
-      {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
-        (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
-      })`}
-      {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
-      {event?.job?.comment && `C: ${event.job.comment}`}
-    </Space>
-  ) : (
-    <div
-      style={{
-        height: "100%",
-        width: "100%",
-        backgroundColor: getEventBackground()
-      }}
-    >
-      <strong>{`${event.title || ""}`}</strong>
-    </div>
-  );
+  const RegularEvent =
+    event.isintake && event.job ? (
+      <Space
+        wrap
+        size="small"
+        style={{
+          backgroundColor: getEventBackground()
+        }}
+      >
+        {event.note && <AlertFilled className="production-alert" />}
+        <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
+        <OwnerNameDisplay ownerObject={event.job} />
+        {`${event.job.v_model_yr || ""} ${event.job.v_make_desc || ""} ${event.job.v_model_desc || ""}`}
+        {`(${event.job.labhrs?.aggregate?.sum?.mod_lb_hrs || "0"} / ${
+          event.job.larhrs?.aggregate?.sum?.mod_lb_hrs || "0"
+        })`}
+        {event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
+        {event.job.comment && `C: ${event.job.comment}`}
+      </Space>
+    ) : (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          backgroundColor: getEventBackground()
+        }}
+      >
+        <strong>{`${event.title || ""}`}</strong>
+      </div>
+    );
 
   return (
     <Popover

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-calculate-totals/job-calculate-totals.component.jsx

@@ -18,29 +18,6 @@ export default function JobCalculateTotals({ job, disabled, refetch }) {
       });
 
       if (refetch) refetch();
-      // const result = await updateJob({
-      //   refetchQueries: ["GET_JOB_BY_PK"],
-      //   awaitRefetchQueries: true,
-      //   variables: {
-      //     jobId: job.id,
-      //     job: {
-      //       job_totals: newTotals,
-      //       clm_total: Dinero(newTotals.totals.total_repairs).toFormat("0.00"),
-      //       owner_owing: Dinero(newTotals.totals.custPayable.total).toFormat(
-      //         "0.00"
-      //       ),
-      //     },
-      //   },
-      // });
-      // if (!!!result.errors) {
-      //   notification["success"]({ message: t("jobs.successes.updated") });
-      // } else {
-      //   notification.error({
-      //     message: t("jobs.errors.updating", {
-      //       error: JSON.stringify(result.errors),
-      //     }),
-      //   });
-      // }
     } catch (error) {
       notification.error({
         title: t("jobs.errors.updating", {

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-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -16,11 +16,15 @@ const mapDispatchToProps = () => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardLabor);
 
 export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
+  const jobId = job?.id ?? null;
+
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: { id: job.id },
+    variables: { id: jobId },
+    skip: !jobId,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+
   const {
     treatments: { Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -29,12 +33,13 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
     splitKey: bodyshop.imexshopid
   });
 
+  if (!jobId) return <LoadingSkeleton />;
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent title={error.message} type="error" />;
 
   return Enhanced_Payroll.treatment === "on" ? (
     <PayrollLaborAllocationsTable
-      jobId={job.id}
+      jobId={jobId}
       timetickets={data ? data.timetickets : []}
       refetch={refetch}
       adjustments={data ? data.jobs_by_pk.lbr_adjustments : []}
@@ -43,7 +48,7 @@ export function JobCloseRoGuardLabor({ job, bodyshop, warningCallback }) {
     />
   ) : (
     <LaborAllocationsTableComponent
-      jobId={job.id}
+      jobId={jobId}
       joblines={data ? data.joblines : []}
       timetickets={data ? data.timetickets : []}
       refetch={refetch}

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

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -13,11 +13,22 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 
-const iconStyle = { marginLeft: ".3rem" };
+const iconStyle = {
+  marginLeft: ".3rem"
+};
+
+const iconClickableStyle = {
+  marginLeft: ".3rem",
+  cursor: "pointer"
+};
+
+const iconDisabledStyle = {
+  marginLeft: ".3rem",
+  cursor: "not-allowed",
+  opacity: 0.5
+};
 
 export function JobEmployeeAssignments({
   bodyshop,
@@ -31,163 +42,199 @@ export function JobEmployeeAssignments({
   loading
 }) {
   const { t } = useTranslation();
-  const [assignment, setAssignment] = useState({
-    operation: null,
-    employeeid: null
-  });
-  const [visibility, setVisibility] = useState(false);
 
-  const onChange = (value, option) => {
-    setAssignment({ ...assignment, employeeid: value, name: option.name });
+  // Which assignment popover is currently open: "body" | "prep" | "refinish" | "csr" | null
+  const [openOperation, setOpenOperation] = useState(null);
+
+  // Current selection inside the popover
+  const [selected, setSelected] = useState({ employeeid: null, name: null });
+
+  const employeeOptions = (bodyshop?.employees || [])
+    .filter((emp) => emp.active)
+    .map((emp) => ({
+      value: emp.id,
+      label: `${emp.first_name} ${emp.last_name}`
+    }));
+
+  const getPopupContainer = () => document.querySelector("#time-ticket-modal") || document.body;
+
+  const openFor = (operation) => {
+    if (jobRO) return;
+    setSelected({ employeeid: null, name: null });
+    setOpenOperation(operation);
   };
 
-  const popContent = (
-    <Row gutter={[16, 16]}>
-      <Col span={24}>
-        <Select
-          id="employeeSelector"
-          showSearc={{
-            optionFilterProp: "children",
-            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }}
-          style={{ width: 200 }}
-          onChange={onChange}
-        >
-          {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>
-      </Col>
-      <Col span={24}>
-        <Space wrap>
-          <Button
-            type="primary"
-            disabled={!assignment.employeeid || jobRO}
-            onClick={() => {
-              handleAdd(assignment);
-              setVisibility(false);
+  const close = () => {
+    setOpenOperation(null);
+    setSelected({ employeeid: null, name: null });
+  };
+
+  const renderAssigner = (operation) => {
+    if (jobRO) {
+      return <PlusCircleFilled style={iconDisabledStyle} />;
+    }
+
+    const popContent = (
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Select
+            style={{ width: 220 }}
+            options={employeeOptions}
+            value={selected.employeeid}
+            placeholder={t("employees.actions.select")}
+            allowClear
+            showSearch={{
+              optionFilterProp: "label"
             }}
-          >
-            {t("allocations.actions.assign")}
-          </Button>
-          <Button onClick={() => setVisibility(false)}>Close</Button>
-        </Space>
-      </Col>
-    </Row>
-  );
+            onChange={(value, option) => {
+              if (!value) {
+                setSelected({ employeeid: null, name: null });
+                return;
+              }
+              setSelected({ employeeid: value, name: option?.label || null });
+            }}
+          />
+        </Col>
+
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              type="primary"
+              disabled={!selected.employeeid}
+              onClick={() => {
+                handleAdd({ operation, employeeid: selected.employeeid, name: selected.name });
+                close();
+              }}
+            >
+              {t("allocations.actions.assign")}
+            </Button>
+            <Button onClick={close}>Close</Button>
+          </Space>
+        </Col>
+      </Row>
+    );
+
+    return (
+      <Popover
+        destroyOnHidden
+        trigger="click"
+        open={openOperation === operation}
+        onOpenChange={(open) => {
+          // Important: let Popover drive close on outside click
+          if (open) openFor(operation);
+          else close();
+        }}
+        content={popContent}
+        getPopupContainer={getPopupContainer}
+      >
+        <span
+          role="button"
+          tabIndex={0}
+          style={{ display: "inline-flex", alignItems: "center", cursor: "pointer" }}
+          onClick={(e) => {
+            // Prevent the click from being re-interpreted as "outside"
+            e.preventDefault();
+            e.stopPropagation();
+            openFor(operation);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              openFor(operation);
+            }
+          }}
+        >
+          <PlusCircleFilled style={iconClickableStyle} />
+        </span>
+      </Popover>
+    );
+  };
 
   return (
-    <Popover destroyOnHidden content={popContent} open={visibility}>
-      <Spin spinning={loading}>
-        <DataLabel label={t("jobs.fields.employee_body")}>
-          {body ? (
-            <div>
-              <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
-              <DeleteFilled
-                operation="body"
-                disabled={jobRO}
-                style={iconStyle}
-                onClick={() => !jobRO && handleRemove("body")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+    <Spin spinning={loading}>
+      <DataLabel label={t("jobs.fields.employee_body")}>
+        {body ? (
+          <div>
+            <span>{`${body.first_name || ""} ${body.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "body" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("body");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel label={t("jobs.fields.employee_prep")}>
-          {prep ? (
-            <div>
-              <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="prep"
-                onClick={() => !jobRO && handleRemove("prep")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("body")
+        )}
+      </DataLabel>
+
+      <DataLabel label={t("jobs.fields.employee_prep")}>
+        {prep ? (
+          <div>
+            <span>{`${prep.first_name || ""} ${prep.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "prep" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("prep");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel label={t("jobs.fields.employee_refinish")}>
-          {refinish ? (
-            <div>
-              <span>{`${refinish.first_name || ""} ${refinish.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="refinish"
-                onClick={() => !jobRO && handleRemove("refinish")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("prep")
+        )}
+      </DataLabel>
+
+      <DataLabel label={t("jobs.fields.employee_refinish")}>
+        {refinish ? (
+          <div>
+            <span>{`${refinish.first_name || ""} ${refinish.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "refinish" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("refinish");
               }}
             />
-          )}
-        </DataLabel>
-        <DataLabel
-          label={t(
-            InstanceRenderManager({
-              imex: "jobs.fields.employee_csr",
-              rome: "jobs.fields.employee_csr_writer"
-            })
-          )}
-        >
-          {csr ? (
-            <div>
-              <span>{`${csr.first_name || ""} ${csr.last_name || ""}`}</span>
-              <DeleteFilled
-                disabled={jobRO}
-                style={iconStyle}
-                operation="csr"
-                onClick={() => !jobRO && handleRemove("csr")}
-              />
-            </div>
-          ) : (
-            <PlusCircleFilled
+          </div>
+        ) : (
+          renderAssigner("refinish")
+        )}
+      </DataLabel>
+
+      <DataLabel
+        label={t(
+          InstanceRenderManager({
+            imex: "jobs.fields.employee_csr",
+            rome: "jobs.fields.employee_csr_writer"
+          })
+        )}
+      >
+        {csr ? (
+          <div>
+            <span>{`${csr.first_name || ""} ${csr.last_name || ""}`}</span>
+            <DeleteFilled
               disabled={jobRO}
               style={iconStyle}
-              onClick={() => {
-                if (!jobRO) {
-                  setAssignment({ operation: "csr" });
-                  setVisibility(true);
-                }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!jobRO) handleRemove("csr");
               }}
             />
-          )}
-        </DataLabel>
-      </Spin>
-    </Popover>
+          </div>
+        ) : (
+          renderAssigner("csr")
+        )}
+      </DataLabel>
+    </Spin>
   );
 }
 

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -11,9 +11,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-});
+const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
@@ -26,55 +24,69 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
   const notification = useNotification();
 
   const handleAdd = async (assignment) => {
-    setLoading(true);
     const { operation, employeeid, name } = assignment;
-    logImEXEvent("job_assign_employee", { operation });
+    const empAssignment = determineFieldName(operation);
 
-    let empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment || !employeeid) return;
 
-    const result = await updateJob({
-      variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
-    });
-    if (refetch) refetch();
-
-    if (!result.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.jobassignmentchange(operation, name),
-        type: "jobassignmentchange"
-      });
-    } else {
-      notification.error({
-        title: t("jobs.errors.assigning", {
-          message: JSON.stringify(result.errors)
-        })
-      });
-    }
-    setLoading(false);
-  };
-  const handleRemove = async (operation) => {
     setLoading(true);
-    logImEXEvent("job_unassign_employee", { operation });
+    try {
+      logImEXEvent("job_assign_employee", { operation });
 
-    let empAssignment = determineFieldName(operation);
-    const result = await updateJob({
-      variables: { jobId: job.id, job: { [empAssignment]: null } }
-    });
+      const result = await updateJob({
+        variables: { jobId: job.id, job: { [empAssignment]: employeeid } }
+      });
 
-    if (!result.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.jobassignmentremoved(operation),
-        type: "jobassignmentremoved"
-      });
-    } else {
-      notification.error({
-        title: t("jobs.errors.assigning", {
-          message: JSON.stringify(result.errors)
-        })
-      });
+      if (typeof refetch === "function") await refetch();
+
+      if (!result.errors) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.jobassignmentchange(operation, name),
+          type: "jobassignmentchange"
+        });
+      } else {
+        notification.error({
+          title: t("jobs.errors.assigning", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemove = async (operation) => {
+    const empAssignment = determineFieldName(operation);
+    if (!job?.id || !empAssignment) return;
+
+    setLoading(true);
+    try {
+      logImEXEvent("job_unassign_employee", { operation });
+
+      const result = await updateJob({
+        variables: { jobId: job.id, job: { [empAssignment]: null } }
+      });
+
+      if (typeof refetch === "function") await refetch();
+
+      if (!result.errors) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.jobassignmentremoved(operation),
+          type: "jobassignmentremoved"
+        });
+      } else {
+        notification.error({
+          title: t("jobs.errors.assigning", {
+            message: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
@@ -102,7 +114,6 @@ const determineFieldName = (operation) => {
       return "employee_csr";
     case "refinish":
       return "employee_refinish";
-
     default:
       return null;
   }

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-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-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -38,7 +38,7 @@ export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps
 
   useEffect(() => {
     if (visibility) {
-      callQuery({ jobid: job.id });
+      callQuery({ variables: { jobid: job.id } });
     }
   }, [visibility, job.id, callQuery]);
 

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/job-totals-table/job-totals-table.component.jsx

@@ -21,13 +21,16 @@ const colSpan = {
   lg: { span: 12 }
 };
 
-export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
+export function JobsTotalsTableComponent({ jobRO, currentUser, job, refetch }) {
   const { t } = useTranslation();
 
   if (!job.job_totals) {
     return (
       <Card>
-        <Result title={t("jobs.errors.nofinancial")} extra={<JobCalculateTotals job={job} disabled={jobRO} />} />
+        <Result
+          title={t("jobs.errors.nofinancial")}
+          extra={<JobCalculateTotals job={job} disabled={jobRO} refetch={refetch} />}
+        />
       </Card>
     );
   }
@@ -64,7 +67,7 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
             {(currentUser.email.includes("@imex.") || currentUser.email.includes("@rome.")) && (
               <Col span={24}>
                 <Card title="DEVELOPMENT USE ONLY">
-                  <JobCalculateTotals job={job} disabled={jobRO} />
+                  <JobCalculateTotals job={job} disabled={jobRO} refetch={refetch} />
                   <Collapse
                     items={[
                       {

client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx

@@ -8,6 +8,8 @@ import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import JobWatcherToggleComponent from "./job-watcher-toggle.component.jsx";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
 
+const EMPTY_ARRAY = Object.freeze([]);
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser
@@ -27,21 +29,24 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
   const [selectedWatcher, setSelectedWatcher] = useState(null);
   const [selectedTeam, setSelectedTeam] = useState(null);
 
-  const userEmail = currentUser.email;
-  const jobid = job.id;
+  const userEmail = currentUser?.email;
+  const jobid = job?.id;
+  const watcherVars = useMemo(() => ({ jobid }), [jobid]);
 
-  // Fetch current watchers with refetch capability
   const {
     data: watcherData,
     loading: watcherLoading,
     refetch
   } = useQuery(GET_JOB_WATCHERS, {
-    variables: { jobid },
-    fetchPolicy: "cache-and-network" // Ensure fresh data from server
+    variables: watcherVars,
+    skip: !jobid,
+    fetchPolicy: "cache-first",
+    notifiyOnNetworkStatusChange: true
   });
 
-  // Refetch jobWatchers when the popover opens (open changes to true)
+  // Refetch jobWatchers when the popover opens
   useEffect(() => {
+    if (!jobid) return;
     if (open) {
       refetch().catch((err) =>
         console.error(`Something went wrong fetching Notification Watchers on popover open: ${err?.message}`, {
@@ -49,18 +54,17 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
         })
       );
     }
-  }, [open, refetch]);
+  }, [open, refetch, jobid]);
 
-  const jobWatchers = useMemo(() => (watcherData?.job_watchers ? [...watcherData.job_watchers] : []), [watcherData]);
-  const isWatching = jobWatchers.some((w) => w.user_email === userEmail);
+  // Do NOT clone arrays; keep referential stability for React Compiler and to reduce rerenders.
+  const jobWatchers = watcherData?.job_watchers ?? EMPTY_ARRAY;
+  const watcherEmailSet = useMemo(
+    () => new Set((jobWatchers ?? EMPTY_ARRAY).map((w) => w?.user_email).filter(Boolean)),
+    [jobWatchers]
+  );
+  const isWatching = !!userEmail && watcherEmailSet.has(userEmail);
 
   const [addWatcher, { loading: adding }] = useMutation(ADD_JOB_WATCHER, {
-    onCompleted: () =>
-      refetch().catch((err) =>
-        console.error(`Something went wrong fetching Notification Watchers after add: ${err?.message}`, {
-          stack: err?.stack
-        })
-      ),
     onError: (err) => {
       if (err.graphQLErrors && err.graphQLErrors.length > 0) {
         const errorMessage = err.graphQLErrors[0].message;
@@ -69,12 +73,13 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
           errorMessage.includes("idx_job_watchers_jobid_user_email_unique")
         ) {
           console.warn("Watcher already exists for this job and user.");
-          refetch().catch((err) =>
+          // Only refetch for this edge case to ensure UI is accurate
+          refetch().catch((e) =>
             console.error(
-              `Something went wrong fetching Notification Watchers after uniqueness violation: ${err?.message}`,
-              { stack: err?.stack }
+              `Something went wrong fetching Notification Watchers after uniqueness violation: ${e?.message}`,
+              { stack: e?.stack }
             )
-          ); // Sync with server to ensure UI reflects actual state
+          );
         } else {
           console.error(`Error adding job watcher: ${errorMessage}`);
         }
@@ -83,65 +88,41 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
       }
     },
     update(cache, { data }) {
-      if (!data || !data.insert_job_watchers_one) {
-        console.warn("No data or insert_job_watchers_one returned from mutation, skipping cache update.");
-        refetch().catch((err) =>
-          console.error(`Something went wrong updating Notification Watchers after add: ${err?.message}`, {
-            stack: err?.stack
-          })
-        );
-        return;
-      }
+      const inserted = data?.insert_job_watchers_one;
+      if (!inserted) return;
 
-      const insert_job_watchers_one = data.insert_job_watchers_one;
-      const existingData = cache.readQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid }
-      });
+      cache.updateQuery({ query: GET_JOB_WATCHERS, variables: watcherVars }, (existing) => {
+        const prev = existing?.job_watchers ?? [];
+        if (prev.some((w) => w.user_email === inserted.user_email)) return existing;
 
-      cache.writeQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid },
-        data: {
-          ...existingData,
-          job_watchers: [...(existingData?.job_watchers || []), insert_job_watchers_one]
-        }
+        return {
+          ...existing,
+          job_watchers: [...prev, inserted]
+        };
       });
     }
   });
 
   const [removeWatcher, { loading: removing }] = useMutation(REMOVE_JOB_WATCHER, {
-    onCompleted: () =>
-      refetch().catch((err) =>
-        console.error(`Something went wrong fetching Notification Watchers after remove: ${err?.message}`, {
-          stack: err?.stack
-        })
-      ), // Refetch to sync with server after success
     onError: (err) => console.error(`Error removing job watcher: ${err.message}`),
-    update(cache, { data: { delete_job_watchers } }) {
-      const existingData = cache.readQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid }
-      });
+    update(cache, { data }) {
+      const deleted = data?.delete_job_watchers?.returning?.[0];
+      if (!deleted?.user_email) return;
 
-      const deletedWatcher = delete_job_watchers.returning[0];
-      const updatedWatchers = deletedWatcher
-        ? (existingData?.job_watchers || []).filter((watcher) => watcher.user_email !== deletedWatcher.user_email)
-        : existingData?.job_watchers || [];
-
-      cache.writeQuery({
-        query: GET_JOB_WATCHERS,
-        variables: { jobid },
-        data: {
-          ...existingData,
-          job_watchers: updatedWatchers
-        }
+      cache.updateQuery({ query: GET_JOB_WATCHERS, variables: watcherVars }, (existing) => {
+        const prev = existing?.job_watchers ?? [];
+        return {
+          ...existing,
+          job_watchers: prev.filter((w) => w.user_email !== deleted.user_email)
+        };
       });
     }
   });
 
   const handleToggleSelf = useCallback(async () => {
+    if (!jobid || !userEmail) return;
     if (adding || removing || !isEmployee) return;
+
     if (isWatching) {
       await removeWatcher({ variables: { jobid, userEmail } });
     } else {
@@ -151,7 +132,9 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
 
   const handleRemoveWatcher = useCallback(
     async (email) => {
+      if (!jobid) return;
       if (removing) return;
+      if (!email) return;
       await removeWatcher({ variables: { jobid, userEmail: email } });
     },
     [removeWatcher, jobid, removing]
@@ -159,36 +142,45 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
 
   const handleWatcherSelect = useCallback(
     async (selectedUser) => {
+      if (!jobid) return;
       if (adding || removing) return;
-      const employee = bodyshop.employees.find((e) => e.id === selectedUser);
-      if (!employee) return;
+
+      const employee = bodyshop?.employees?.find((e) => e.id === selectedUser);
+      if (!employee?.user_email) return;
 
       const email = employee.user_email;
-      const isAlreadyWatching = jobWatchers.some((w) => w.user_email === email);
+      const isAlreadyWatching = watcherEmailSet.has(email);
 
       if (isAlreadyWatching) {
         await handleRemoveWatcher(email);
       } else {
         await addWatcher({ variables: { jobid, userEmail: email } });
       }
+
       setSelectedWatcher(null);
     },
-    [jobWatchers, addWatcher, handleRemoveWatcher, jobid, bodyshop, adding, removing]
+    [watcherEmailSet, addWatcher, handleRemoveWatcher, jobid, bodyshop, adding, removing]
   );
 
   const handleTeamSelect = useCallback(
     async (team) => {
+      if (!jobid) return;
       if (adding) return;
-      const selectedTeamMembers = JSON.parse(team);
-      const newWatchers = selectedTeamMembers.filter(
-        (email) => !jobWatchers.some((watcher) => watcher.user_email === email)
-      );
 
+      let selectedTeamMembers = [];
+      try {
+        selectedTeamMembers = Array.isArray(team) ? team : JSON.parse(team);
+      } catch {
+        selectedTeamMembers = [];
+      }
+
+      const newWatchers = (selectedTeamMembers ?? []).filter(Boolean).filter((email) => !watcherEmailSet.has(email));
       if (newWatchers.length === 0) {
         console.warn("All selected team members are already watchers.");
         setSelectedTeam(null);
         return;
       }
+
       await Promise.all(
         newWatchers.map((email) =>
           addWatcher({
@@ -199,8 +191,10 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
           })
         )
       );
+
+      setSelectedTeam(null);
     },
-    [jobWatchers, addWatcher, jobid, adding]
+    [watcherEmailSet, addWatcher, jobid, adding]
   );
 
   return (
@@ -223,7 +217,7 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
       handleWatcherSelect={handleWatcherSelect}
       handleTeamSelect={handleTeamSelect}
       currentUser={currentUser}
-      isEmployee={isEmployee} // Pass isEmployee to the component
+      isEmployee={isEmployee}
     />
   );
 }

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,15 +122,14 @@ 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")}

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()

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

@@ -98,7 +98,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
     setOwnerModalVisible(false);
 
     setInsertLoading(true);
-    const estData = replaceEmpty(lazyData?.available_jobs_by_pk || estDataRaw.data.available_jobs_by_pk);
+    const estData = replaceEmpty(lazyData?.available_jobs_by_pk || estDataRaw?.data?.available_jobs_by_pk);
 
     if (!(estData && estData.est_data)) {
       //We don't have the right data. Error!
@@ -226,7 +226,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
     setJobModalVisible(false);
     setInsertLoading(true);
 
-    const estData = estDataRaw.data.available_jobs_by_pk;
+    const estData = estDataRaw?.data?.available_jobs_by_pk;
 
     if (!(estData && estData.est_data)) {
       //We don't have the right data. Error!
@@ -369,12 +369,12 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
   };
 
   const addJobAsNew = (record) => {
-    loadEstData({ id: record.id });
+    loadEstData({ variables: { id: record.id } });
     setOwnerModalVisible(true);
   };
 
   const addJobAsSupp = useCallback((record) => {
-    loadEstData({ id: record.id });
+    loadEstData({ variables: { id: record.id } });
     modalSearchState[1](record.clm_no);
     setJobModalVisible(true);
   }, []);

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

@@ -86,20 +86,18 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail, isPar
 
   const statusMenu = {
     items: [
-      ...availableStatuses.map((item) => ({
+      ...(availableStatuses?.map((item) => ({
         key: item,
         label: item
-      }))
+      })) ?? [])
     ],
     onClick: (e) => updateJobStatus(e.key)
   };
 
   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-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx

@@ -56,9 +56,8 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
                   setOpen(false);
                   setSearch("");
                 }}
-              >
-                <PlusOutlined />
-              </Button>
+                icon={<PlusOutlined />}
+              />
             )
           }
         ]}

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

@@ -1,10 +1,10 @@
 import { DownCircleFilled } from "@ant-design/icons";
-import { useApolloClient, useMutation } from "@apollo/client/react";
+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 axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
@@ -14,7 +14,7 @@ import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
-import { DELETE_JOB, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
+import { DELETE_JOB, GET_JOB_WATCHERS, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setEmailOptions } from "../../redux/email/email.actions";
@@ -34,6 +34,8 @@ import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
 
+const EMPTY_ARRAY = Object.freeze([]);
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
@@ -123,6 +125,14 @@ export function JobsDetailHeaderActions({
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [visibility, setVisibility] = useState(false);
+  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);
@@ -143,6 +153,15 @@ export function JobsDetailHeaderActions({
   const hasValidEmail = (emails) => emails.some((email) => userEmail.endsWith(email));
   const canSubmitForTesting = (isDevEnv && hasValidEmail(devEmails)) || (isProdEnv && hasValidEmail(prodEmails));
 
+  const { data: jobWatchersData } = useQuery(GET_JOB_WATCHERS, {
+    variables: watcherVars,
+    skip: !jobId,
+    fetchPolicy: "cache-first",
+    notifyOnNetworkStatusChange: true
+  });
+
+  const jobWatchersCount = jobWatchersData?.job_watchers?.length ?? job?.job_watchers?.length ?? 0;
+
   const {
     treatments: { ImEXPay }
   } = useTreatmentsWithConfig({
@@ -151,18 +170,85 @@ export function JobsDetailHeaderActions({
     splitKey: bodyshop && bodyshop.imexshopid
   });
 
-  const jobInProduction = useMemo(() => {
-    return bodyshop.md_ro_statuses.production_statuses.includes(job.status);
-  }, [job, bodyshop.md_ro_statuses.production_statuses]);
-  const [visibility, setVisibility] = useState(false);
+  const productionStatuses = bodyshop?.md_ro_statuses?.production_statuses ?? EMPTY_ARRAY;
+  const preProductionStatuses = bodyshop?.md_ro_statuses?.pre_production_statuses ?? EMPTY_ARRAY;
+  const postProductionStatuses = bodyshop?.md_ro_statuses?.post_production_statuses ?? EMPTY_ARRAY;
+  const jobStatus = job?.status;
 
-  const jobInPreProduction = useMemo(() => {
-    return bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status);
-  }, [job.status, bodyshop.md_ro_statuses.pre_production_statuses]);
+  const jobInProduction = productionStatuses.includes(jobStatus);
+  const jobInPreProduction = preProductionStatuses.includes(jobStatus);
+  const jobInPostProduction = postProductionStatuses.includes(jobStatus);
 
-  const jobInPostProduction = useMemo(() => {
-    return bodyshop.md_ro_statuses.post_production_statuses.includes(job.status);
-  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);
+  const openConfirm = useCallback((key) => {
+    confirmKeyRef.current = key;
+    setConfirmKey(key);
+    setDropdownOpen(true);
+  }, []);
+
+  const closeConfirm = useCallback(() => {
+    confirmKeyRef.current = null;
+    setConfirmKey(null);
+  }, []);
+
+  const handleDropdownOpenChange = useCallback(
+    (nextOpen, info) => {
+      if (!nextOpen && info?.source === "menu" && confirmKeyRef.current) return;
+      setDropdownOpen(nextOpen);
+      if (!nextOpen) closeConfirm();
+    },
+    [closeConfirm]
+  );
+
+  const renderPopconfirmMenuLabel = ({
+    key,
+    text,
+    title,
+    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();
+
+        // Critical: for informational popconfirms, keep the dropdown open so the Popconfirm can cleanly close.
+        if (closeDropdownOnConfirm) {
+          setDropdownOpen(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>
+  );
 
   // Function to show modal
   const showCancelScheduleModal = () => {
@@ -549,12 +635,6 @@ export function JobsDetailHeaderActions({
     });
   };
 
-  // Function to handle OK
-  const handleCancelScheduleOK = async () => {
-    await form.submit(); // Assuming 'form' is the Form instance from useForm()
-    setIsCancelScheduleModalVisible(false);
-  };
-
   const handleLostSaleFinish = async ({ lost_sale_reason }) => {
     const jobUpdate = await cancelAllAppointments({
       variables: {
@@ -884,34 +964,26 @@ export function JobsDetailHeaderActions({
         {
           key: "duplicate",
           id: "job-actions-duplicate",
-          label: (
-            <Popconfirm
-              title={t("jobs.labels.duplicateconfirm")}
-              okText="Yes"
-              cancelText="No"
-              onClick={(e) => e.stopPropagation()}
-              onConfirm={handleDuplicate}
-              getPopupContainer={(trigger) => trigger.parentNode}
-            >
-              {t("menus.jobsactions.duplicate")}
-            </Popconfirm>
-          )
+          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
+          })
         },
         {
           key: "duplicatenolines",
           id: "job-actions-duplicatenolines",
-          label: (
-            <Popconfirm
-              title={t("jobs.labels.duplicateconfirm")}
-              okText="Yes"
-              cancelText="No"
-              onClick={(e) => e.stopPropagation()}
-              onConfirm={handleDuplicateConfirm}
-              getPopupContainer={(trigger) => trigger.parentNode}
-            >
-              {t("menus.jobsactions.duplicatenolines")}
-            </Popconfirm>
-          )
+          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
+          })
         }
       ]
     },
@@ -1085,21 +1157,25 @@ export function JobsDetailHeaderActions({
       key: "deletejob",
       id: "job-actions-deletejob",
       label:
-        job.job_watchers.length === 0 ? (
-          <Popconfirm
-            title={t("jobs.labels.deleteconfirm")}
-            okText={t("general.labels.yes")}
-            cancelText={t("general.labels.no")}
-            onClick={(e) => e.stopPropagation()}
-            onConfirm={handleDeleteJob}
-          >
-            {t("menus.jobsactions.deletejob")}
-          </Popconfirm>
-        ) : (
-          <Popconfirm title={t("jobs.labels.deletewatchers")} onClick={(e) => e.stopPropagation()} showCancel={false}>
-            {t("menus.jobsactions.deletejob")}
-          </Popconfirm>
-        )
+        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
+              }
+            })
     });
   }
 
@@ -1118,15 +1194,14 @@ export function JobsDetailHeaderActions({
       id: "job-actions-voidjob",
       label: (
         <RbacWrapper action="jobs:void" noauth>
-          <Popconfirm
-            title={t("jobs.labels.voidjob")}
-            okText={t("general.labels.yes")}
-            cancelText={t("general.labels.no")}
-            onClick={(e) => e.stopPropagation()}
-            onConfirm={handleVoidJob}
-          >
-            {t("menus.jobsactions.void")}
-          </Popconfirm>
+          {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>
       )
     });
@@ -1163,20 +1238,12 @@ export function JobsDetailHeaderActions({
       <Modal
         title={t("menus.jobsactions.cancelallappointments")}
         open={isCancelScheduleModalVisible}
-        onOk={handleCancelScheduleOK}
         onCancel={handleCancelScheduleModalCancel}
         footer={[
           <Button form="cancelScheduleForm" key="back" onClick={handleCancelScheduleModalCancel}>
             {t("general.actions.cancel")}
           </Button>,
-          <Button
-            form="cancelScheduleForm"
-            htmlType="submit"
-            key="submit"
-            type="primary"
-            loading={loading}
-            onClick={handleCancelScheduleOK}
-          >
+          <Button form="cancelScheduleForm" htmlType="submit" key="submit" type="primary" loading={loading}>
             {t("appointments.actions.cancel")}
           </Button>
         ]}
@@ -1184,9 +1251,12 @@ export function JobsDetailHeaderActions({
         <Form
           layout="vertical"
           id="cancelScheduleForm"
-          onFinish={(s) => {
-            console.log(s);
-            handleLostSaleFinish(s);
+          onFinish={async (s) => {
+            try {
+              await handleLostSaleFinish(s);
+            } finally {
+              setIsCancelScheduleModalVisible(false);
+            }
           }}
         >
           <Form.Item
@@ -1208,12 +1278,19 @@ export function JobsDetailHeaderActions({
           </Form.Item>
         </Form>
       </Modal>
-      <Dropdown menu={menu} trigger={["click"]} key="changestatus" open={dropdownOpen} onOpenChange={setDropdownOpen}>
-        <Button>
+
+      <Dropdown
+        menu={menu}
+        trigger={["click"]}
+        key="changestatus"
+        open={dropdownOpen}
+        onOpenChange={handleDropdownOpenChange}
+      >
+        <Button icon={<DownCircleFilled />} iconPlacement="end">
           <span>{t("general.labels.actions")}</span>
-          <DownCircleFilled />
         </Button>
       </Dropdown>
+
       <Popover content={popOverContent} open={visibility} />
     </>
   );

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx

@@ -203,7 +203,7 @@ export function JobsDetailHeaderActionsToggleProduction({
       open={popOverVisible}
       onOpenChange={setPopOverVisible}
       onClick={(e) => {
-        getJobDetails({ id: job.id });
+        getJobDetails({ variables: { id: job.id } });
         e.stopPropagation();
       }}
       getPopupContainer={(trigger) => trigger.parentNode}

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

@@ -65,8 +65,8 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
   const colSpan = {
     xs: { span: 24 },
     sm: { span: 24 },
-    md: { span: isPartsEntry ? 8 : 12 },
-    lg: { span: isPartsEntry ? 8 : 6 },
+    md: { span: 12 },
+    lg: { span: 12 },
     xl: { span: isPartsEntry ? 8 : 6 }
   };
 
@@ -260,19 +260,19 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                   <ChatOpenButton type={job.ownr_ph1_ty} phone={job.ownr_ph1} jobid={job.id} />
                 )}
               </DataLabel>
-              <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
+              <DataLabel key="3" label={t("jobs.fields.ownr_ph2")}>
                 {disabled || isPartsEntry ? (
                   <PhoneNumberFormatter type={job.ownr_ph2_ty}>{job.ownr_ph2}</PhoneNumberFormatter>
                 ) : (
                   <ChatOpenButton type={job.ownr_ph2_ty} phone={job.ownr_ph2} jobid={job.id} />
                 )}
               </DataLabel>
-              <DataLabel key="3" label={t("owners.fields.address")}>
+              <DataLabel key="4" label={t("owners.fields.address")}>
                 {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
                   job.ownr_city || ""
                 } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
               </DataLabel>
-              <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
+              <DataLabel key="5" label={t("owners.fields.ownr_ea")}>
                 {disabled || isPartsEntry ? (
                   <>{job.ownr_ea || ""}</>
                 ) : job.ownr_ea ? (
@@ -280,13 +280,14 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                 ) : null}
               </DataLabel>
               {job.owner?.tax_number && (
-                <DataLabel key="5" label={t("owners.fields.tax_number")}>
+                <DataLabel key="6" label={t("owners.fields.tax_number")}>
                   {job.owner?.tax_number || ""}
                 </DataLabel>
               )}
               <DataLabel
                 label={t("owners.fields.note")}
                 styles={{ value: { overflow: "hidden", textOverflow: "ellipsis" } }}
+                key="7"
               >
                 {job.owner?.note || ""}
               </DataLabel>

client/src/components/jobs-detail-labor/jobs-detail-labor.container.jsx

@@ -4,9 +4,11 @@ import AlertComponent from "../alert/alert.component";
 import JobsDetailLaborComponent from "./jobs-detail-labor.component";
 
 export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
+  const id = jobId ?? null;
+
   const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
-    variables: { id: jobId },
-    skip: !jobId,
+    variables: { id },
+    skip: !id,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
@@ -16,7 +18,7 @@ export default function JobsDetailLaborContainer({ jobId, techConsole, job }) {
   return (
     <JobsDetailLaborComponent
       loading={loading}
-      jobId={jobId}
+      jobId={id}
       timetickets={data ? data.timetickets : []}
       joblines={data ? data.joblines : []}
       refetch={refetch}

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

@@ -5,7 +5,7 @@ import JobTotalsTable from "../job-totals-table/job-totals-table.component";
 export function JobsDetailTotals({ job, refetch }) {
   return (
     <div>
-      <JobTotalsTable job={job} />
+      <JobTotalsTable job={job} refetch={refetch} />
       <Divider />
       <JobPayments job={job} refetch={refetch} />
     </div>

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-gallery/jobs-documents-gallery.container.jsx

@@ -44,7 +44,7 @@ export function JobsDocumentsContainer({
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !!billId
+    skip: !jobId || !!billId
   });
 
   if (loading) return <LoadingSpinner />;

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

@@ -9,7 +9,6 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import useLocalStorage from "../../utils/useLocalStorage";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 import JobNotesPinToggle from "../job-notes-pin-toggle/job-notes-pin-toggle.component";
 
@@ -122,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={() => {
@@ -136,9 +138,8 @@ export function JobNotesComponent({
                 }
               });
             }}
-          >
-            <EditFilled />
-          </Button>
+            icon={<EditFilled />}
+          />
           <PrintWrapperComponent
             templateObject={{
               name: Templates.individual_job_note.key,
@@ -184,8 +185,6 @@ export function JobNotesComponent({
           </Button>
         }
       >
-        <NoteUpsertModal />
-
         <Table loading={loading} columns={columns} rowKey="id" dataSource={data} onChange={handleTableChange} />
       </Card>
     </div>

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-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);
@@ -213,13 +214,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

@@ -29,7 +29,7 @@ export default function OwnerFindModalContainer({
       const s = OwnerNameDisplayFunction(owner, true);
 
       setSearchText(s.trim());
-      callSearchowners({ search: s.trim() });
+      callSearchowners({ variables: { search: s.trim() } });
     }
   }, [callSearchowners, modalProps.open, owner]);
 
@@ -47,7 +47,7 @@ export default function OwnerFindModalContainer({
           <Input.Search
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
-            onSearch={(val) => callSearchowners({ search: val.trim() })}
+            onSearch={(val) => callSearchowners({ variables: { search: val.trim() } })}
           />
           <OwnerFindModalComponent
             selectedOwner={selectedOwner}

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

@@ -17,7 +17,7 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
   );
 
   const executeSearch = (v) => {
-    if (v && v.variables?.search !== "" && v.variables.search.length >= 2) callSearch(v);
+    if (v && v.variables?.search !== "" && v.variables.search.length >= 2) callSearch({ variables: v.variables });
   };
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 
@@ -29,7 +29,7 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
 
   useEffect(() => {
     if (value === option && value) {
-      callIdSearch({ id: value });
+      callIdSearch({ variables: { id: value } });
     }
   }, [value, option, callIdSearch]);
 

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}

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

@@ -101,7 +101,9 @@ export function PartsOrderListTableDrawerComponent({
       if (selectedPartsOrderRecord?.returnfrombill) {
         try {
           const { data } = await billQuery({
-            billid: selectedPartsOrderRecord.returnfrombill
+            variables: {
+              billid: selectedPartsOrderRecord.returnfrombill
+            }
           });
           setBillData(data);
         } catch (error) {
@@ -148,9 +150,8 @@ export function PartsOrderListTableDrawerComponent({
               }
             });
           }}
-        >
-          <FaTasks />
-        </Button>
+          icon={<FaTasks />}
+        />
       )}
       <Popconfirm
         title={t("parts_orders.labels.confirmdelete")}
@@ -171,9 +172,7 @@ export function PartsOrderListTableDrawerComponent({
           });
         }}
       >
-        <Button disabled={jobRO}>
-          <DeleteFilled />
-        </Button>
+        <Button disabled={jobRO} icon={<DeleteFilled />} />
       </Popconfirm>
       {!isPartsEntry && (
         <Button

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

@@ -34,13 +34,13 @@ export default function PartsOrderModalPriceChange({ form, field }) {
       {
         key: "custom",
         label: (
-          <InputNumber
-            onClick={(e) => e.stopPropagation()}
-            addonAfter="%"
-            onKeyUp={(e) => {
-              if (e.key === "Enter") {
-                const values = form.getFieldsValue();
-                const { parts_order_lines } = values;
+          <Space.Compact>
+            <InputNumber
+              onClick={(e) => e.stopPropagation()}
+              onKeyUp={(e) => {
+                if (e.key === "Enter") {
+                  const values = form.getFieldsValue();
+                  const { parts_order_lines } = values;
 
                 form.setFieldsValue({
                   parts_order_lines: {
@@ -56,10 +56,12 @@ export default function PartsOrderModalPriceChange({ form, field }) {
                 });
                 e.target.value = 0;
               }
-            }}
-            min={0}
-            max={100}
-          />
+              }}
+              min={0}
+              max={100}
+            />
+            <span style={{ padding: "0 11px", backgroundColor: "#fafafa", border: "1px solid #d9d9d9", borderLeft: 0 }}>%</span>
+          </Space.Compact>
         )
       }
     ],

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

@@ -58,8 +58,8 @@ export function PartsOrderModalComponent({
 
   return (
     <div>
-      <Form.Item name="returnfrombill" style={{ display: "none" }}>
-        <Input />
+      <Form.Item name="returnfrombill" hidden>
+        <Input type="hidden" />
       </Form.Item>
       <LayoutFormRow grow noDivider>
         <Form.Item
@@ -199,7 +199,10 @@ export function PartsOrderModalComponent({
                         key={`${index}act_price`}
                         name={[field.name, "act_price"]}
                       >
-                        <CurrencyInput addonBefore={<PartsOrderModalPriceChange form={form} field={field} />} />
+                        <Space.Compact style={{ width: "100%" }}>
+                          <PartsOrderModalPriceChange form={form} field={field} />
+                          <CurrencyInput style={{ flex: 1 }} />
+                        </Space.Compact>
                       </Form.Item>
                       {isReturn && (
                         <Form.Item

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

@@ -80,36 +80,75 @@ export function PartsOrderModalContainer({
   const handleFinish = async ({ order_type, removefrompartsqueue, is_quote, ...values }) => {
     logImEXEvent("parts_order_insert");
     setSaving(true);
-    let insertResult;
 
-    insertResult = await insertPartOrder({
-      variables: {
-        po: [
-          {
-            ...values,
-            order_date: dayjs().format("YYYY-MM-DD"),
-            orderedby: currentUser.email,
-            jobid: jobId,
-            user_email: currentUser.email,
-            return: isReturn,
-            status: is_quote
-              ? bodyshop.md_order_statuses.default_quote || "Quote"
-              : bodyshop.md_order_statuses.default_ordered || "Ordered*"
-          }
-        ]
-      },
-      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"]
+    // Force job_line_id from context so it never gets dropped by AntD form submission behavior.
+    const submittedLines = values?.parts_order_lines?.data ?? [];
+    const forcedLines = submittedLines.map((p, index) => {
+      const originalLine = linesToOrder?.[index];
+      const jobLineId = isReturn ? originalLine?.joblineid : originalLine?.id;
+
+      return {
+        ...p,
+        job_line_id: jobLineId
+      };
     });
-    if (insertResult.errors) {
+
+    const missingIdx = forcedLines.findIndex((l) => !l?.job_line_id);
+    if (missingIdx !== -1) {
       notification.error({
         title: t("parts_orders.errors.creating"),
-        description: JSON.stringify(insertResult.errors)
+        description: `Missing job_line_id for parts line #${missingIdx + 1}`
       });
+      setSaving(false);
       return;
     }
+
+    let insertResult;
+    try {
+      insertResult = await insertPartOrder({
+        variables: {
+          po: [
+            {
+              ...values,
+              order_date: dayjs().format("YYYY-MM-DD"),
+              orderedby: currentUser.email,
+              jobid: jobId,
+              user_email: currentUser.email,
+              return: isReturn,
+              status: is_quote
+                ? bodyshop.md_order_statuses.default_quote || "Quote"
+                : bodyshop.md_order_statuses.default_ordered || "Ordered*",
+
+              // override nested lines to guarantee linkage
+              parts_order_lines: { data: forcedLines }
+            }
+          ]
+        },
+        refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"]
+      });
+
+      if (insertResult.errors) {
+        notification.error({
+          title: t("parts_orders.errors.creating"),
+          description: JSON.stringify(insertResult.errors)
+        });
+        setSaving(false);
+        return;
+      }
+    } catch (err) {
+      notification.error({
+        title: t("parts_orders.errors.creating"),
+        description: err?.message || String(err)
+      });
+      console.error("Parts order insert error:", err);
+      setSaving(false);
+      return;
+    }
+
     notification.success({
-      title: values.isReturn ? t("parts_orders.successes.return_created") : t("parts_orders.successes.created")
+      title: isReturn ? t("parts_orders.successes.return_created") : t("parts_orders.successes.created")
     });
+
     insertAuditTrail({
       jobid: jobId,
       operation: isReturn
@@ -118,36 +157,54 @@ export function PartsOrderModalContainer({
       type: isReturn ? "jobspartsreturn" : "jobspartsorder"
     });
 
-    const jobLinesResult = await updateJobLines({
-      variables: {
-        ids: values.parts_order_lines.data.filter((item) => item.job_line_id).map((item) => item.job_line_id),
-        status: isReturn
-          ? bodyshop.md_order_statuses.default_returned || "Returned*"
-          : is_quote
-            ? bodyshop.md_order_statuses.default_quote || "Quote"
-            : bodyshop.md_order_statuses.default_ordered || "Ordered*"
-      }
-    });
+    // Use linesToOrder from context instead of form values to preserve job line ids
+    const jobLineIds = (linesToOrder ?? [])
+      .filter((line) => (isReturn ? line.joblineid : line.id))
+      .map((line) => (isReturn ? line.joblineid : line.id));
 
-    if (!isReturn && removefrompartsqueue) {
-      await updateJob({
+    try {
+      const jobLinesResult = await updateJobLines({
         variables: {
-          jobId: jobId,
-          job: {
-            queued_for_parts: false
-          }
+          ids: jobLineIds,
+          status: isReturn
+            ? bodyshop.md_order_statuses.default_returned || "Returned*"
+            : is_quote
+              ? bodyshop.md_order_statuses.default_quote || "Quote"
+              : bodyshop.md_order_statuses.default_ordered || "Ordered*"
         }
       });
+
+      if (jobLinesResult.errors) {
+        notification.error({
+          title: t("parts_orders.errors.updating_status"),
+          description: JSON.stringify(jobLinesResult.errors)
+        });
+      }
+    } catch (err) {
+      notification.error({
+        title: t("parts_orders.errors.updating_status"),
+        description: err?.message || String(err)
+      });
+      console.error("Job lines update error:", err);
     }
 
-    if (jobLinesResult.errors) {
-      notification.error({
-        title: t("parts_orders.errors.creating"),
-        description: JSON.stringify(jobLinesResult.errors)
-      });
+    if (!isReturn && removefrompartsqueue) {
+      try {
+        await updateJob({
+          variables: {
+            jobId: jobId,
+            job: {
+              queued_for_parts: false
+            }
+          }
+        });
+      } catch (err) {
+        console.error("Update job queue error:", err);
+      }
     }
 
     if (values.vendorid === bodyshop.inhousevendorid) {
+      // Use linesToOrder for joblineid, and use forcedLines for the user-entered fields
       setBillEnterContext({
         actions: { refetch: refetch },
         context: {
@@ -159,11 +216,12 @@ export function PartsOrderModalContainer({
             isinhouse: true,
             date: dayjs(),
             total: 0,
-            billlines: values.parts_order_lines.data.map((p) => {
+            billlines: forcedLines.map((p, index) => {
+              const originalLine = linesToOrder?.[index];
               return {
-                joblineid: p.job_line_id,
+                joblineid: isReturn ? originalLine?.joblineid : originalLine?.id,
                 actual_price: p.act_price,
-                actual_cost: 0, //p.act_price,
+                actual_cost: 0, // p.act_price,
                 line_desc: p.line_desc,
                 line_remarks: p.line_remarks,
                 part_type: p.part_type,
@@ -178,6 +236,8 @@ export function PartsOrderModalContainer({
           }
         }
       });
+
+      setSaving(false);
       toggleModalVisible();
       return;
     }
@@ -187,9 +247,8 @@ export function PartsOrderModalContainer({
     const Templates = TemplateList("partsorder", context);
 
     if (sendType === "e") {
-      const matchingVendor = data.vendors.filter((item) => item.id === values.vendorid)[0];
-
-      let vendorEmails = matchingVendor?.email && matchingVendor.email.split(RegExp("[;,]"));
+      const matchingVendor = data?.vendors?.find((item) => item.id === values.vendorid);
+      const vendorEmails = matchingVendor?.email && matchingVendor.email.split(RegExp("[;,]"));
 
       GenerateDocument(
         {
@@ -233,7 +292,7 @@ export function PartsOrderModalContainer({
         notification
       );
     } else if (sendType === "oec") {
-      //Send to Partner OEC.
+      // Send to Partner OEC.
       try {
         const partsOrder = await client.query({
           query: QUERY_PARTS_ORDER_OEC,
@@ -241,26 +300,21 @@ export function PartsOrderModalContainer({
             id: insertResult.data.insert_parts_orders.returning[0].id
           }
         });
+
         let po;
-        //Massage the data based on the split. Should they be able to overwrite OEC pricing?
+        // Massage the data based on the split. Should they be able to overwrite OEC pricing?
         if (OEConnection_PriceChange.treatment === "on") {
-          //Set the flag to include the override.
           po = _.cloneDeep(partsOrder.data.parts_orders_by_pk);
           po.parts_order_lines.forEach((pol) => {
             pol.priceChange = true;
           });
         }
 
-        const oecResponse = await axios.post(
-          "http://localhost:1337/oec/",
-
-          po || partsOrder.data.parts_orders_by_pk,
-          {
-            headers: {
-              Authorization: `Bearer ${await auth.currentUser.getIdToken()}`
-            }
+        const oecResponse = await axios.post("http://localhost:1337/oec/", po || partsOrder.data.parts_orders_by_pk, {
+          headers: {
+            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`
           }
-        );
+        });
 
         if (oecResponse.data && oecResponse.data.success === false) {
           notification.error({
@@ -269,17 +323,18 @@ export function PartsOrderModalContainer({
             })
           });
         }
-      } catch (error) {
-        console.log("Error OEC.", error);
+      } catch (err) {
+        console.log("Error OEC.", err);
         notification.error({
           title: t("parts_orders.errors.oec", {
-            error: JSON.stringify(error.message)
+            error: JSON.stringify(err?.message || String(err))
           })
         });
         setSaving(false);
         return;
       }
     }
+
     setSaving(false);
     toggleModalVisible();
   };
@@ -290,7 +345,6 @@ export function PartsOrderModalContainer({
     deliver_by: isReturn ? dayjs(new Date()) : null,
     vendorid: vendorId,
     returnfrombill: returnFromBill,
-
     parts_order_lines: {
       data: linesToOrder
         ? linesToOrder.reduce((acc, value) => {

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

@@ -46,10 +46,10 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
               {fields.map((field, index) => (
                 <Form.Item required={false} key={field.key}>
                   <div style={{ display: "flex", alignItems: "center" }}>
-                    <Form.Item style={{ display: "none" }} key={`${index}joblineid`} name={[field.name, "joblineid"]}>
+                    <Form.Item hidden key={`${index}joblineid`} name={[field.name, "joblineid"]}>
                       <Input />
                     </Form.Item>
-                    <Form.Item style={{ display: "none" }} key={`${index}id`} name={[field.name, "id"]}>
+                    <Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
                       <Input />
                     </Form.Item>
                     <LayoutFormRow grow style={{ flex: 1 }}>

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

@@ -37,39 +37,85 @@ export function PartsReceiveModalContainer({ partsReceiveModal, toggleModalVisib
   const handleFinish = async (values) => {
     logImEXEvent("parts_order_receive");
     setLoading(true);
-    const result = await Promise.all(
-      values.partsorderlines.map((li) => {
-        return receivePartsLine({
-          variables: {
-            lineId: li.joblineid,
-            line: {
-              location: li.location,
-              status: bodyshop.md_order_statuses.default_received || "Received*"
-            },
-            orderLineId: li.id,
-            orderLine: {
-              status: bodyshop.md_order_statuses.default_received || "Received*"
-            }
-          }
-        });
-      })
-    );
 
-    result.forEach((jobLinesResult) => {
-      if (jobLinesResult.errors) {
+    try {
+      const submittedLines = values.partsorderlines ?? [];
+
+      // Preserve ids from modal context, merge editable fields from form submission (e.g. location)
+      const mergedLines = (partsorderlines ?? []).map((ctxLine, idx) => ({
+        ...ctxLine,
+        ...submittedLines[idx]
+      }));
+
+      // Optional: hard guard to catch the exact failure early with a better message
+      const missing = mergedLines
+        .map((l, idx) => ({
+          idx,
+          orderLineId: l?.id,
+          jobLineId: l?.joblineid // adjust if your ctx uses job_line_id instead
+        }))
+        .filter((x) => !x.orderLineId || !x.jobLineId);
+
+      if (missing.length) {
         notification.error({
           title: t("parts_orders.errors.creating"),
-          description: JSON.stringify(jobLinesResult.errors)
+          description: `Missing required ids for lines: ${missing
+            .map((m) => `#${m.idx + 1} (orderLineId=${m.orderLineId}, jobLineId=${m.jobLineId})`)
+            .join(", ")}`
         });
+        return;
       }
-    });
 
-    notification.success({
-      title: t("parts_orders.successes.received")
-    });
-    setLoading(false);
-    if (refetch) refetch();
-    toggleModalVisible();
+      const results = await Promise.allSettled(
+        mergedLines.map((li) =>
+          receivePartsLine({
+            variables: {
+              lineId: li.joblineid,
+              line: {
+                location: li.location,
+                status: bodyshop.md_order_statuses.default_received || "Received*"
+              },
+              orderLineId: li.id,
+              orderLine: {
+                status: bodyshop.md_order_statuses.default_received || "Received*"
+              }
+            },
+            // Ensures GraphQL errors come back on the result when possible (instead of only throwing)
+            errorPolicy: "all"
+          })
+        )
+      );
+
+      const errors = [];
+      results.forEach((r, idx) => {
+        if (r.status === "rejected") {
+          errors.push({ idx, message: r.reason?.message ?? String(r.reason) });
+          return;
+        }
+        if (r.value?.errors?.length) {
+          errors.push({
+            idx,
+            message: r.value.errors.map((e) => e.message).join(" | ")
+          });
+        }
+      });
+
+      if (errors.length) {
+        errors.forEach((e) =>
+          notification.error({
+            title: t("parts_orders.errors.creating"),
+            description: `Line ${e.idx + 1}: ${e.message}`
+          })
+        );
+        return; // keep modal open so user can retry
+      }
+
+      notification.success({ title: t("parts_orders.successes.received") });
+      if (refetch) refetch();
+      toggleModalVisible();
+    } finally {
+      setLoading(false);
+    }
   };
 
   const initialValues = {

client/src/components/parts-shop-info/parts-shop-info.container.jsx

@@ -27,7 +27,7 @@ export default function PartsShopInfoContainer() {
     logImEXEvent("parts_shop_update");
 
     updateBodyshop({
-      variables: { id: data.bodyshops[0].id, shop: values }
+      variables: { id: data?.bodyshops?.[0]?.id, shop: values }
     })
       .then(() => {
         notification.success({ title: t("bodyshop.successes.save") });
@@ -38,6 +38,7 @@ export default function PartsShopInfoContainer() {
           title: t("bodyshop.errors.saving", { message: error })
         });
       });
+
     setSaveLoading(false);
   };
 
@@ -55,7 +56,7 @@ export default function PartsShopInfoContainer() {
       autoComplete="new-password"
       onFinish={handleFinish}
       initialValues={
-        data
+        data?.bodyshops?.[0]
           ? {
               ...data.bodyshops[0],
               schedule_start_time: dayjs(data.bodyshops[0].schedule_start_time),

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/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-kanban/production-board-kanban.component.jsx

@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -192,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}
@@ -208,7 +205,6 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
         }
       />
 
-      <NoteUpsertModal />
       <ProductionListDetailComponent jobs={data} />
 
       <Board

client/src/components/production-list-columns/production-list-columns.comment.component.jsx

@@ -18,6 +18,7 @@ export default function ProductionListColumnComment({ record }) {
 
   const handleSaveNote = (e) => {
     e.stopPropagation();
+    e.preventDefault();
     setOpen(false);
     updateAlert({
       variables: {
@@ -33,7 +34,6 @@ export default function ProductionListColumnComment({ record }) {
   };
 
   const handleChange = (e) => {
-    e.stopPropagation();
     setNote(e.target.value);
   };
 
@@ -42,36 +42,37 @@ export default function ProductionListColumnComment({ record }) {
     if (flag) setNote(record.comment || "");
   };
 
+  const content = (
+    <div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
+      <Input.TextArea
+        rows={5}
+        value={note}
+        onChange={handleChange}
+        autoFocus
+        allowClear
+        style={{ marginBottom: "1em" }}
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      />
+      <div>
+        <Button onClick={handleSaveNote} type="primary">
+          {t("general.actions.save")}
+        </Button>
+      </div>
+    </div>
+  );
+
   return (
-    <Popover
-      onOpenChange={handleOpenChange}
-      open={open}
-      content={
-        <div style={{ width: "30em" }}>
-          <Input.TextArea
-            rows={5}
-            value={note}
-            onChange={handleChange}
-            // onPressEnter={handleSaveNote}
-            autoFocus
-            allowClear
-          />
-          <div>
-            <Button onClick={handleSaveNote}>{t("general.actions.save")}</Button>
-          </div>
-        </div>
-      }
-      trigger={["click"]}
-    >
+    <Popover onOpenChange={handleOpenChange} open={open} content={content} trigger="click" fresh>
       <div
         style={{
           width: "100%",
           height: "19px",
           cursor: "pointer",
           overflow: "hidden",
-          textOverflow: "ellipsis",
-          display: "inline-block"
+          textOverflow: "ellipsis"
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         <Tooltip title={record.comment}>{record.comment || " "}</Tooltip>

client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx

@@ -1,7 +1,7 @@
 import Icon from "@ant-design/icons";
 import { useMutation } from "@apollo/client/react";
 import { Button, Input, Popover, Space } from "antd";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaRegStickyNote } from "react-icons/fa";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -27,6 +27,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
     (e) => {
       logImEXEvent("production_add_note");
       e.stopPropagation();
+      e.preventDefault();
       setOpen(false);
       updateAlert({
         variables: {
@@ -46,7 +47,6 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
   );
 
   const handleChange = useCallback((e) => {
-    e.stopPropagation();
     setNote(e.target.value);
   }, []);
 
@@ -58,42 +58,41 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
     [record]
   );
 
-  const popoverContent = useMemo(
-    () => (
-      <div style={{ width: "30em" }}>
-        <Input.TextArea
-          rows={5}
-          value={note}
-          onChange={handleChange}
-          autoFocus
-          allowClear
-          style={{ marginBottom: "1em" }}
-        />
-        <Space>
-          <Button onClick={handleSaveNote} type="primary">
-            {t("general.actions.save")}
-          </Button>
-          <Button
-            onClick={() => {
-              setOpen(false);
-              setNoteUpsertContext({
-                context: {
-                  jobId: record.id,
-                  text: note
-                }
-              });
-            }}
-          >
-            {t("notes.actions.savetojobnotes")}
-          </Button>
-        </Space>
-      </div>
-    ),
-    [note, handleSaveNote, handleChange, record, setNoteUpsertContext, t]
+  const content = (
+    <div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
+      <Input.TextArea
+        rows={5}
+        value={note}
+        onChange={handleChange}
+        autoFocus
+        allowClear
+        style={{ marginBottom: "1em" }}
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      />
+      <Space>
+        <Button onClick={handleSaveNote} type="primary">
+          {t("general.actions.save")}
+        </Button>
+        <Button
+          onClick={() => {
+            setOpen(false);
+            setNoteUpsertContext({
+              context: {
+                jobId: record.id,
+                text: note
+              }
+            });
+          }}
+        >
+          {t("notes.actions.savetojobnotes")}
+        </Button>
+      </Space>
+    </div>
   );
 
   return (
-    <Popover onOpenChange={handleOpenChange} open={open} content={popoverContent} trigger={["click"]}>
+    <Popover onOpenChange={handleOpenChange} open={open} content={content} trigger="click" fresh>
       <div
         style={{
           width: "100%",
@@ -102,6 +101,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
           overflow: "hidden",
           textOverflow: "ellipsis"
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         {record.production_vars?.note || " "}

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

@@ -251,9 +251,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               onClick={() => {
                 refetch && refetch();
               }}
-            >
-              <SyncOutlined />
-            </Button>
+              icon={<SyncOutlined />}
+            />
             <ProductionListColumnsAdd
               columnState={[columns, setColumns]}
               tableState={state}

client/src/components/production-sublets-manage/production-sublets-manage.component.jsx

@@ -69,9 +69,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "complete");
                   }}
                   type={s.sublet_completed ? "primary" : "ghost"}
-                >
-                  <CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />
-                </Button>,
+                  icon={<CheckCircleFilled style={{ color: s.sublet_completed ? "green" : undefined }} />}
+                />,
                 <Button
                   key="sublet"
                   loading={loading}
@@ -80,9 +79,8 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
                     handleSubletMark(s, "ignore");
                   }}
                   type={s.sublet_ignored ? "primary" : "ghost"}
-                >
-                  <EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />
-                </Button>
+                  icon={<EyeInvisibleFilled style={{ color: s.sublet_ignored ? "tomato" : undefined }} />}
+                />
               ]}
             >
               <List.Item.Meta title={s.line_desc} />

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -146,7 +146,9 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
     <div className="report-center-modal">
       <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
         <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} />
-        <Form.Item name="defaultSorters" hidden />
+        <Form.Item name="defaultSorters" hidden>
+          <Input type="hidden" />
+        </Form.Item>
         <Form.Item
           name="key"
           label={t("reportcenter.labels.key")}
@@ -258,9 +260,10 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
               form.setFieldsValue({ id: null });
               return null;
             }
-            if (!vendorCalled && idtype === "vendor") callVendorQuery();
-            if (!employeeCalled && idtype === "employee") callEmployeeQuery();
-            if (!employeeWithEmailCalled && idtype === "employeeWithEmail") callEmployeeWithEmailQuery();
+            if (!vendorCalled && idtype === "vendor") callVendorQuery({ variables: {} });
+            if (!employeeCalled && idtype === "employee") callEmployeeQuery({ variables: {} });
+            if (!employeeWithEmailCalled && idtype === "employeeWithEmail")
+              callEmployeeWithEmailQuery({ variables: {} });
             if (idtype === "vendor")
               return (
                 <Form.Item

client/src/components/schedule-production-list/schedule-production-list.component.jsx

@@ -22,6 +22,15 @@ export default function ScheduleProductionList() {
           {error ? <AlertComponent title={error.message} type="error" /> : null}
           {data ? (
             <table>
+              <thead>
+                <tr>
+                  <th> {t("appointments.labels.ro_number")}</th>
+                  <th> {t("appointments.labels.owner")}</th>
+                  <th> {t("appointments.labels.vehicle")}</th>
+                  <th> {t("appointments.labels.bp")}</th>
+                  <th> {t("appointments.labels.scheduled_completion")}</th>
+                </tr>
+              </thead>
               <tbody>
                 {data?.jobs
                   ? data.jobs.map((j) => (
@@ -52,9 +61,8 @@ export default function ScheduleProductionList() {
 
   return (
     <Popover content={content} trigger="click" placement="bottomRight">
-      <Button onClick={() => callQuery()}>
+      <Button onClick={() => callQuery({ variables: {} })} icon={<DownOutlined />} iconPlacement="end">
         {t("appointments.labels.inproduction")}
-        <DownOutlined />
       </Button>
     </Popover>
   );

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

@@ -123,9 +123,8 @@ export default function ScoreboardJobsList() {
         <Card
           extra={
             <Space align="middle" wrap>
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
+              <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+
               <Typography.Title level={4}>
                 {t("general.labels.searchresults", { search: state.search })}
               </Typography.Title>

client/src/components/scoreboard-remove-button/scorebard-remove-button.component.jsx

@@ -37,9 +37,5 @@ export default function ScoreboardRemoveButton({ scoreboardId }) {
     }
     setLoading(false);
   };
-  return (
-    <Button onClick={handleDelete} loading={loading}>
-      <DeleteFilled />
-    </Button>
-  );
+  return <Button onClick={handleDelete} loading={loading} icon={<DeleteFilled />} />;
 }

client/src/components/shop-csi-config/shop-csi-config.component.jsx

@@ -1,6 +1,6 @@
 import { CheckCircleFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Col, List, Row } from "antd";
+import { Button, Card, Col, List, Row } from "antd";
 import { useState } from "react";
 
 import { useTranslation } from "react-i18next";
@@ -21,7 +21,7 @@ export default function ShopCsiConfig() {
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent title={error.message} type="error" />;
   return (
-    <div>
+    <Card>
       <Row>
         <Col span={3}>
           <List
@@ -41,6 +41,6 @@ export default function ShopCsiConfig() {
           <ShopCsiConfigForm selectedCsi={selectedCsi} />
         </Col>
       </Row>
-    </div>
+    </Card>
   );
 }

client/src/components/shop-employees/shop-employees-add-vacation.component.jsx

@@ -21,15 +21,21 @@ export default function ShopEmployeeAddVacation({ employee }) {
     logImEXEvent("employee_add_vacation");
 
     setLoading(true);
-    let result;
+    if (!employee?.id) {
+      notification.error({
+        title: t("employees.errors.adding", { message: "Employee not loaded yet." })
+      });
+      return;
+    }
 
-    result = await insertVacation({
+    setLoading(true);
+    const result = await insertVacation({
       variables: { vacation: { ...values, employeeid: employee.id } },
       update(cache, { data }) {
         cache.modify({
           id: cache.identify({ id: employee.id, __typename: "employees" }),
           fields: {
-            employee_vacations(ex) {
+            employee_vacations(ex = []) {
               return [data.insert_employee_vacation_one, ...ex];
             }
           }

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -159,9 +159,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
               }
             });
           }}
-        >
-          <DeleteFilled />
-        </Button>
+          icon={<DeleteFilled />}
+        />
       )
     }
   ];

client/src/components/shop-info/shop-info.consent.component.jsx

@@ -1,4 +1,4 @@
-import { Typography } from "antd";
+import { Card, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -15,10 +15,10 @@ function ShopInfoConsentComponent({ bodyshop }) {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <Card>
       <Typography.Title level={4}>{t("settings.title")}</Typography.Title>
       {<PhoneNumberConsentList bodyshop={bodyshop} />}
-    </div>
+    </Card>
   );
 }