feature/IO-3303-logging - Logging

Merged in feature/IO-3294-imgproxy-bill-upload-hotfix (pull request #2401 )
2025-07-14 19:31:31 -04:00 · 2025-07-14 19:28:29 -04:00 · 2025-07-08 21:46:35 +00:00 · 2025-07-08 14:31:32 -07:00 · 2025-07-05 01:21:35 +00:00 · 2025-07-04 21:03:37 +00:00
210 changed files with 14743 additions and 9491 deletions
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
--- a/client/index.html
+++ b/client/index.html
@@ -74,50 +74,8 @@
      })();
    </script>
    <% } %>
-    <script>
+    <script>!function(w,d,i,s){function l(){if(!d.getElementById(i)){var f=d.getElementsByTagName(s)[0],e=d.createElement(s);e.type="text/javascript",e.async=!0,e.src="https://canny.io/sdk.js",f.parentNode.insertBefore(e,f)}}if("function"!=typeof w.Canny){var c=function(){c.q.push(arguments)};c.q=[],w.Canny=c,"complete"===d.readyState?l():w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}}(window,document,"canny-jssdk","script");</script>
      !(function () {
        "use strict";
        var e = [
          "debug",
          "destroy",
          "do",
          "help",
          "identify",
          "is",
          "off",
          "on",
          "ready",
          "render",
          "reset",
          "safe",
          "set"
        ];
        if (window.noticeable) console.warn("Noticeable SDK code snippet loaded more than once");
        else {
          var n = (window.noticeable = window.noticeable || []);
          function t(e) {
            return function () {
              var t = Array.prototype.slice.call(arguments);
              return t.unshift(e), n.push(t), n;
            };
          }
          !(function () {
            for (var o = 0; o < e.length; o++) {
              var r = e[o];
              n[r] = t(r);
            }
          })(),
            (function () {
              var e = document.createElement("script");
              (e.async = !0), (e.src = "https://sdk.noticeable.io/l.js");
              var n = document.head;
              n.insertBefore(e, n.firstChild);
            })();
        }
      })();
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -12,21 +12,21 @@
    "@apollo/client": "^3.13.6",
    "@emotion/is-prop-valid": "^1.3.1",
    "@fingerprintjs/fingerprintjs": "^4.6.1",
-    "@firebase/analytics": "^0.10.12",
+    "@firebase/analytics": "^0.10.16",
-    "@firebase/app": "^0.11.4",
+    "@firebase/app": "^0.13.1",
-    "@firebase/auth": "^1.10.0",
+    "@firebase/auth": "^1.10.6",
-    "@firebase/firestore": "^4.7.10",
+    "@firebase/firestore": "^4.7.17",
-    "@firebase/messaging": "^0.12.17",
+    "@firebase/messaging": "^0.12.21",
    "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.6.1",
+    "@reduxjs/toolkit": "^2.8.2",
-    "@sentry/cli": "^2.43.0",
+    "@sentry/cli": "^2.46.0",
-    "@sentry/react": "^9.11.0",
+    "@sentry/react": "^9.27.0",
-    "@sentry/vite-plugin": "^3.3.1",
+    "@sentry/vite-plugin": "^3.5.0",
-    "@splitsoftware/splitio-react": "^2.1.1",
+    "@splitsoftware/splitio-react": "^2.3.1",
    "@tanem/react-nprogress": "^5.0.53",
-    "antd": "^5.24.6",
+    "antd": "^5.25.4",
    "apollo-link-logger": "^2.0.1",
-    "apollo-link-sentry": "^4.2.0",
+    "apollo-link-sentry": "^4.3.0",
    "autosize": "^6.0.1",
    "axios": "^1.8.4",
    "classnames": "^2.5.1",
@@ -37,28 +37,29 @@
    "dotenv": "^16.4.7",
    "env-cmd": "^10.1.0",
    "exifr": "^7.1.3",
-    "graphql": "^16.10.0",
+    "graphql": "^16.11.0",
    "i18next": "^24.2.3",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-browser-languagedetector": "^8.1.0",
    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.6",
+    "libphonenumber-js": "^1.12.9",
    "logrocket": "^9.0.2",
    "markerjs2": "^2.32.4",
    "memoize-one": "^6.0.0",
-    "normalize-url": "^8.0.1",
+    "normalize-url": "^8.0.2",
    "object-hash": "^3.0.0",
    "phone": "^3.1.59",
    "prop-types": "^15.8.1",
-    "query-string": "^9.1.1",
+    "query-string": "^9.2.0",
    "raf-schd": "^4.0.3",
    "react": "^18.3.1",
-    "react-big-calendar": "^1.18.0",
+    "react-big-calendar": "^1.19.2",
    "react-color": "^2.19.3",
    "react-cookie": "^8.0.1",
    "react-dom": "^18.3.1",
    "react-drag-listview": "^2.0.0",
    "react-grid-gallery": "^1.0.1",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "1.3.4",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.2",
    "react-icons": "^5.5.0",
    "react-image-lightbox": "^5.1.4",
    "react-markdown": "^10.1.0",
@@ -69,7 +70,7 @@
    "react-resizable": "^3.0.5",
    "react-router-dom": "^6.30.0",
    "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.12.5",
+    "react-virtuoso": "^4.12.8",
    "recharts": "^2.15.2",
    "redux": "^5.0.1",
    "redux-actions": "^3.0.3",
@@ -77,9 +78,9 @@
    "redux-saga": "^1.3.0",
    "redux-state-sync": "^3.1.4",
    "reselect": "^5.1.1",
-    "sass": "^1.86.3",
+    "sass": "^1.89.1",
    "socket.io-client": "^4.8.1",
-    "styled-components": "^6.1.17",
+    "styled-components": "^6.1.18",
    "subscriptions-transport-ws": "^0.11.0",
    "use-memo-one": "^1.1.3",
    "vite-plugin-ejs": "^1.7.0",
@@ -129,18 +130,18 @@
  "devDependencies": {
    "@ant-design/icons": "^6.0.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-react": "^7.27.1",
-    "@dotenvx/dotenvx": "^1.39.1",
+    "@dotenvx/dotenvx": "^1.44.1",
    "@emotion/babel-plugin": "^11.13.5",
    "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.24.0",
+    "@eslint/js": "^9.28.0",
    "@playwright/test": "^1.51.1",
-    "@sentry/webpack-plugin": "^3.3.1",
+    "@sentry/webpack-plugin": "^3.5.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.5.1",
-    "browserslist": "^4.24.4",
+    "browserslist": "^4.25.0",
    "browserslist-to-esbuild": "^2.1.1",
    "chalk": "^5.4.1",
    "eslint": "^8.57.1",
@@ -148,19 +149,19 @@
    "eslint-plugin-react": "^7.37.5",
    "globals": "^15.15.0",
    "jsdom": "^26.0.0",
-    "memfs": "^4.17.0",
+    "memfs": "^4.17.2",
    "os-browserify": "^0.3.0",
    "playwright": "^1.51.1",
    "react-error-overlay": "^6.1.0",
    "redux-logger": "^3.0.6",
    "source-map-explorer": "^2.5.3",
-    "vite": "^6.2.5",
+    "vite": "^6.3.5",
-    "vite-plugin-babel": "^1.3.0",
+    "vite-plugin-babel": "^1.3.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-node-polyfills": "^0.23.0",
    "vite-plugin-pwa": "^1.0.0",
    "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^3.1.1",
+    "vitest": "^3.2.3",
    "workbox-window": "^7.3.0"
  }
 }
--- a/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
@@ -14,8 +14,21 @@ const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
+  setPartsOrderContext: (context) =>
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+    dispatch(
      setModalContext({
        context: context,
        modal: "partsOrder"
      })
    ),
  insertAuditTrail: ({ jobid, operation, type }) =>
    dispatch(
      insertAuditTrail({
        jobid,
        operation,
        type
      })
    )
 });
 export default connect(mapStateToProps, mapDispatchToProps)(BillDetailEditReturn);
@@ -69,7 +82,7 @@ export function BillDetailEditReturn({ setPartsOrderContext, insertAuditTrail, b
      <Modal
        open={open}
        onCancel={() => setOpen(false)}
-        destroyOnClose
+        destroyOnHidden
        title={t("bills.actions.return")}
        onOk={() => form.submit()}
      >
--- a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
@@ -29,7 +29,7 @@ export default function BillDetailEditcontainer() {
        delete search.billid;
        history({ search: queryString.stringify(search) });
      }}
-      destroyOnClose
+      destroyOnHidden
      open={search.billid}
    >
      <BillDetailEditComponent />
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -2,10 +2,11 @@ import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
 import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
@@ -24,7 +25,7 @@ import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
 const mapStateToProps = createStructuredSelector({
  billEnterModal: selectBillEnterModal,
@@ -53,10 +54,10 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
  const notification = useNotification();
  const {
-    treatments: { Enhanced_Payroll }
+    treatments: { Enhanced_Payroll, Imgproxy }
  } = useSplitTreatments({
    attributes: {},
-    names: ["Enhanced_Payroll"],
+    names: ["Enhanced_Payroll", "Imgproxy"],
    splitKey: bodyshop.imexshopid
  });
@@ -196,7 +197,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
          job: { lbr_adjustments: newAdjustments }
        }
      });
-      if (!!jobUpdate.errors) {
+      if (jobUpdate.errors) {
        notification["error"]({
          message: t("jobs.errors.saving", {
            message: JSON.stringify(jobUpdate.errors)
@@ -213,7 +214,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
        variables: { partsLineIds: markPolReceived.map((p) => p.id) },
        refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"]
      });
-      if (!!r2.errors) {
+      if (r2.errors) {
        setLoading(false);
        setEnterAgain(false);
        notification["error"]({
@@ -224,7 +225,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
      }
    }
-    if (!!r1.errors) {
+    if (r1.errors) {
      setLoading(false);
      setEnterAgain(false);
      notification["error"]({
@@ -244,7 +245,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
          consumedbybillid: billId
        }
      });
-      if (!!r2.errors) {
+      if (r2.errors) {
        setLoading(false);
        setEnterAgain(false);
        notification["error"]({
@@ -298,20 +299,39 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
          });
        });
      } else {
-        upload.forEach((u) => {
+        //Check if using Imgproxy or cloudinary
-          handleUpload(
+
-            { file: u.originFileObj },
+        if (Imgproxy.treatment === "on") {
-            {
+          upload.forEach((u) => {
-              bodyshop: bodyshop,
+            handleUploadToImageProxy(
-              uploaded_by: currentUser.email,
+              { file: u.originFileObj },
-              jobId: values.jobid,
+              {
-              billId: billId,
+                bodyshop: bodyshop,
-              tagsArray: null,
+                uploaded_by: currentUser.email,
-              callback: null
+                jobId: values.jobid,
-            },
+                billId: billId,
-            notification
+                tagsArray: null,
-          );
+                callback: null
-        });
+              },
              notification
            );
          });
        } else {
          upload.forEach((u) => {
            handleUpload(
              { file: u.originFileObj },
              {
                bodyshop: bodyshop,
                uploaded_by: currentUser.email,
                jobId: values.jobid,
                billId: billId,
                tagsArray: null,
                callback: null
              },
              notification
            );
          });
        }
      }
    }
    ///////////////////////////
@@ -396,7 +416,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
            {t("bills.labels.generatepartslabel")}
          </Checkbox>
          <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()}>
+          <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
            {t("general.actions.save")}
          </Button>
          {billEnterModal.context && billEnterModal.context.id ? null : (
@@ -406,13 +426,14 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
              onClick={() => {
                setEnterAgain(true);
              }}
              id="save-and-new-bill-enter-modal"
            >
              {t("general.actions.saveandnew")}
            </Button>
          )}
        </Space>
      }
-      destroyOnClose
+      destroyOnHidden
    >
      <Form
        onFinish={handleFinish}
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -1,6 +1,6 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
@@ -209,6 +209,7 @@ export function BillsListTableComponent({
                    }
                  });
                }}
                id="reconcile-bills-button"
              >
                <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
              </Button>
--- a/client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx
+++ b/client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx
@@ -75,7 +75,7 @@ export function ContractsFindModalContainer({ caBcEtfTableModal, toggleModalVisi
      title={t("payments.labels.findermodal")}
      onCancel={() => toggleModalVisible()}
      onOk={() => toggleModalVisible()}
-      destroyOnClose
+      destroyOnHidden
      forceRender
    >
      <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
--- a/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
+++ b/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
@@ -3,6 +3,7 @@ import { Button, Form, InputNumber, Popover, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 export default function CABCpvrtCalculator({ disabled, form }) {
  const [visibility, setVisibility] = useState(false);
@@ -39,7 +40,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
  );
  return (
-    <Popover destroyTooltipOnHide content={popContent} open={visibility} disabled={disabled}>
+    <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
      <Button disabled={disabled} onClick={() => setVisibility(true)}>
        <CalculatorFilled />
      </Button>
--- a/client/src/components/card-payment-modal/card-payment-modal.container.jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.container.jsx
@@ -40,7 +40,7 @@ function CardPaymentModalContainer({ cardPaymentModal, toggleModalVisible, bodys
        </Button>
      ]}
      width="80%"
-      destroyOnClose
+      destroyOnHidden
    >
      <CardPaymentModalComponent />
    </Modal>
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/client/src/components/chat-affix/chat-affix.container.jsx
@@ -34,16 +34,14 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
    SubscribeToTopicForFCMNotification();
-    //Register WS handlers
+    // Register WebSocket handlers
    if (socket && socket.connected) {
      registerMessagingHandlers({ socket, client });
    }
-    return () => {
+      return () => {
      if (socket && socket.connected) {
        unregisterMessagingHandlers({ socket });
-      }
+      };
-    };
+    }
  }, [bodyshop, socket, t, client]);
  if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
--- a/client/src/components/chat-affix/registerMessagingSocketHandlers.js
+++ b/client/src/components/chat-affix/registerMessagingSocketHandlers.js
@@ -202,8 +202,6 @@ export const registerMessagingHandlers = ({ socket, client }) => {
                      text: message.text
                    };
                  // Add cases for other known message types as needed
                  default:
                    // Log a warning for unhandled message types
                    logLocal("handleMessageChanged - Unhandled message type", { type: message.type });
@@ -211,7 +209,7 @@ export const registerMessagingHandlers = ({ socket, client }) => {
                }
              }
-              return messageRef; // Keep other messages unchanged
+              return messageRef;
            });
          }
        }
@@ -245,11 +243,8 @@ export const registerMessagingHandlers = ({ socket, client }) => {
        });
        const updatedList = existingList?.conversations
-          ? [
+          ? [newConversation, ...existingList.conversations.filter((conv) => conv.id !== newConversation.id)]
-              newConversation,
+          : [newConversation]; // Prevent duplicates
              ...existingList.conversations.filter((conv) => conv.id !== newConversation.id) // Prevent duplicates
            ]
          : [newConversation];
        client.cache.writeQuery({
          query: CONVERSATION_LIST_QUERY,
@@ -403,6 +398,7 @@ export const registerMessagingHandlers = ({ socket, client }) => {
          }
          break;
        default:
          logLocal("handleConversationChanged - Unhandled type", { type });
          client.cache.modify({
@@ -419,10 +415,95 @@ export const registerMessagingHandlers = ({ socket, client }) => {
    }
  };
  // Existing handler for phone number opt-out
  const handlePhoneNumberOptedOut = async (data) => {
    const { bodyshopid, phone_number } = data;
    logLocal("handlePhoneNumberOptedOut - Start", data);
    try {
      client.cache.modify({
        id: "ROOT_QUERY",
        fields: {
          phone_number_opt_out(existing = [], { readField }) {
            const phoneNumberExists = existing.some(
              (ref) => readField("phone_number", ref) === phone_number && readField("bodyshopid", ref) === bodyshopid
            );
            if (phoneNumberExists) {
              logLocal("handlePhoneNumberOptedOut - Phone number already in cache", { phone_number, bodyshopid });
              return existing;
            }
            const newOptOut = {
              __typename: "phone_number_opt_out",
              id: `temporary-${phone_number}-${Date.now()}`,
              bodyshopid,
              phone_number,
              created_at: new Date().toISOString(),
              updated_at: new Date().toISOString()
            };
            return [...existing, newOptOut];
          }
        },
        broadcast: true
      });
      client.cache.evict({
        id: "ROOT_QUERY",
        fieldName: "phone_number_opt_out",
        args: { bodyshopid, search: phone_number }
      });
      client.cache.gc();
      logLocal("handlePhoneNumberOptedOut - Cache updated successfully", data);
    } catch (error) {
      console.error("Error updating cache for phone number opt-out:", error);
      logLocal("handlePhoneNumberOptedOut - Error", { error: error.message });
    }
  };
  // New handler for phone number opt-in
  const handlePhoneNumberOptedIn = async (data) => {
    const { bodyshopid, phone_number } = data;
    logLocal("handlePhoneNumberOptedIn - Start", data);
    try {
      // Update the Apollo cache for GET_PHONE_NUMBER_OPT_OUTS by removing the phone number
      client.cache.modify({
        id: "ROOT_QUERY",
        fields: {
          phone_number_opt_out(existing = [], { readField }) {
            // Filter out the phone number from the opt-out list
            return existing.filter(
              (ref) => !(readField("phone_number", ref) === phone_number && readField("bodyshopid", ref) === bodyshopid)
            );
          }
        },
        broadcast: true // Trigger UI updates
      });
      // Evict the cache entry to force a refetch on next query
      client.cache.evict({
        id: "ROOT_QUERY",
        fieldName: "phone_number_opt_out",
        args: { bodyshopid, search: phone_number }
      });
      client.cache.gc();
      logLocal("handlePhoneNumberOptedIn - Cache updated successfully", data);
    } catch (error) {
      console.error("Error updating cache for phone number opt-in:", error);
      logLocal("handlePhoneNumberOptedIn - Error", { error: error.message });
    }
  };
  socket.on("new-message-summary", handleNewMessageSummary);
  socket.on("new-message-detailed", handleNewMessageDetailed);
  socket.on("message-changed", handleMessageChanged);
  socket.on("conversation-changed", handleConversationChanged);
  socket.on("phone-number-opted-out", handlePhoneNumberOptedOut);
  socket.on("phone-number-opted-in", handlePhoneNumberOptedIn);
 };
 export const unregisterMessagingHandlers = ({ socket }) => {
@@ -431,4 +512,6 @@ export const unregisterMessagingHandlers = ({ socket }) => {
  socket.off("new-message-detailed");
  socket.off("message-changed");
  socket.off("conversation-changed");
  socket.off("phone-number-opted-out");
  socket.off("phone-number-opted-in");
 };
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -1,5 +1,5 @@
-import { Badge, Card, List, Space, Tag } from "antd";
+import { Badge, Card, List, Space, Tag, Tooltip } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";
 import { Virtuoso } from "react-virtuoso";
 import { createStructuredSelector } from "reselect";
@@ -9,36 +9,62 @@ import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import "./chat-conversation-list.styles.scss";
 import { useQuery } from "@apollo/client";
 import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries.js";
 import { phone } from "phone";
 import { useTranslation } from "react-i18next";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
-  selectedConversation: selectSelectedConversation
+  selectedConversation: selectSelectedConversation,
  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
  setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
 });
-function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
+function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
-  // That comma is there for a reason, do not remove it
+  const { t } = useTranslation();
  const [, forceUpdate] = useState(false);
-  // Re-render every minute
+  const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
  const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
    variables: {
      bodyshopid: bodyshop.id,
      phone_numbers: phoneNumbers
    },
    skip: !conversationList.length,
    fetchPolicy: "cache-and-network"
  });
  const optOutMap = useMemo(() => {
    const map = new Map();
    optOutData?.phone_number_opt_out?.forEach((optOut) => {
      map.set(optOut.phone_number, true);
    });
    return map;
  }, [optOutData?.phone_number_opt_out]);
  useEffect(() => {
    const interval = setInterval(() => {
-      forceUpdate((prev) => !prev); // Toggle state to trigger re-render
+      forceUpdate((prev) => !prev);
-    }, 60000); // 1 minute in milliseconds
+    }, 60000);
-
+    return () => clearInterval(interval);
    return () => clearInterval(interval); // Cleanup on unmount
  }, []);
-  // Memoize the sorted conversation list
+  const sortedConversationList = useMemo(() => {
  const sortedConversationList = React.useMemo(() => {
    return _.orderBy(conversationList, ["updated_at"], ["desc"]);
  }, [conversationList]);
-  const renderConversation = (index) => {
+  const renderConversation = (index, t) => {
    const item = sortedConversationList[index];
    const normalizedPhone = phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
    const hasOptOutEntry = optOutMap.has(normalizedPhone);
    const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
    const cardContentLeft =
      item.job_conversations.length > 0
@@ -60,7 +86,18 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
      </>
    );
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
+    const cardExtra = (
      <>
        <Badge count={item.messages_aggregate.aggregate.count} />
        {hasOptOutEntry && (
          <Tooltip title={t("consent.text_body")}>
            <Tag color="red" icon={<ExclamationCircleOutlined />}>
              {t("messaging.labels.no_consent")}
            </Tag>
          </Tooltip>
        )}
      </>
    );
    const getCardStyle = () =>
      item.id === selectedConversation
@@ -73,9 +110,25 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
        onClick={() => setSelectedConversation(item.id)}
        className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
      >
-        <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
+        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
-          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
+          <div
-          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+            style={{
              display: "inline-block",
              width: "70%",
              textAlign: "left"
            }}
          >
            {cardContentLeft}
          </div>
          <div
            style={{
              display: "inline-block",
              width: "30%",
              textAlign: "right"
            }}
          >
            {cardContentRight}
          </div>
        </Card>
      </List.Item>
    );
@@ -85,7 +138,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
    <div className="chat-list-container">
      <Virtuoso
        data={sortedConversationList}
-        itemContent={(index) => renderConversation(index)}
+        itemContent={(index) => renderConversation(index, t)}
        style={{ height: "100%", width: "100%" }}
      />
    </div>
--- a/client/src/components/chat-conversation-list/chat-conversation-list.styles.scss
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.styles.scss
@@ -24,7 +24,7 @@
 /* Add spacing and better alignment for items */
 .chat-list-item {
-  padding: 0.5rem 0; /* Add spacing between list items */
+  padding: 0.2rem 0; /* Add spacing between list items */
  .ant-card {
    border-radius: 8px; /* Slight rounding for card edges */
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -58,6 +58,7 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
              userid
              created_at
              read
              is_system
            }
          `,
          data: message
--- a/client/src/components/chat-media-selector/chat-media-selector.component.jsx
+++ b/client/src/components/chat-media-selector/chat-media-selector.component.jsx
@@ -13,13 +13,14 @@ import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-document
 import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import "./chat-media-selector.styles.scss";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+const mapDispatchToProps = (dispatch) => ({});
-});
+
 export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
 export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
@@ -37,9 +38,8 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    variables: {
-      jobId: conversation.job_conversations[0] && conversation.job_conversations[0].jobid
+      jobId: conversation.job_conversations[0]?.jobid
    },
    skip: !open || !conversation.job_conversations || conversation.job_conversations.length === 0
  });
@@ -56,25 +56,25 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
  //If Imageproxy is on, rely only on the LMS selector
  //If not on, use the old methods.
  const content = (
-    <div>
+    <div className="media-selector-content">
      {loading && <LoadingSpinner />}
      {error && <AlertComponent message={error.message} type="error" />}
      {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
-        <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
+        <div className="error-message">{t("messaging.labels.maxtenimages")}</div>
      ) : null}
      {Imgproxy.treatment === "on" ? (
        <>
          {!bodyshop.uselocalmediaserver && (
            <JobsDocumentImgproxyGalleryExternal
-              jobId={conversation.job_conversations[0].jobid}
+              jobId={conversation.job_conversations[0]?.jobid}
              externalMediaState={[selectedMedia, setSelectedMedia]}
            />
          )}
          {bodyshop.uselocalmediaserver && open && (
            <JobDocumentsLocalGalleryExternal
              externalMediaState={[selectedMedia, setSelectedMedia]}
-              jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
+              jobId={conversation.job_conversations[0]?.jobid}
            />
          )}
        </>
@@ -89,7 +89,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
          {bodyshop.uselocalmediaserver && open && (
            <JobDocumentsLocalGalleryExternal
              externalMediaState={[selectedMedia, setSelectedMedia]}
-              jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
+              jobId={conversation.job_conversations[0]?.jobid}
            />
          )}
        </>
@@ -100,12 +100,17 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
  return (
    <Popover
      content={
-        conversation.job_conversations.length === 0 ? <div>{t("messaging.errors.noattachedjobs")}</div> : content
+        conversation.job_conversations.length === 0 ? (
          <div className="no-jobs-message">{t("messaging.errors.noattachedjobs")}</div>
        ) : (
          content
        )
      }
      title={t("messaging.labels.selectmedia")}
      trigger="click"
      open={open}
      onOpenChange={handleVisibleChange}
      classNames={{ root: "media-selector-popover" }}
    >
      <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
        <PictureFilled style={{ margin: "0 .5rem" }} />
--- a/client/src/components/chat-media-selector/chat-media-selector.styles.scss
+++ b/client/src/components/chat-media-selector/chat-media-selector.styles.scss
@@ -0,0 +1,48 @@
 .media-selector-popover {
  .ant-popover-inner-content {
    position: relative;
    max-width: 640px;
    max-height: 480px;
    overflow-y: auto;
    padding: 8px;
    background-color: #fff;
    border-radius: 8px;
  }
 }
 .media-selector-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
 }
 .error-message {
  color: red;
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
 }
 .no-jobs-message {
  font-size: 14px;
  color: #888;
  text-align: center;
  padding: 8px;
 }
 /* Style images within gallery components */
 .media-selector-content img {
  object-fit: cover;
  border-radius: 4px;
  margin: 4px;
  cursor: pointer;
 }
 /* Grid layout for gallery components */
 .media-selector-content .ant-image, /* Assuming gallery components use Ant Design's Image */
 .media-selector-content .gallery-container { /* Fallback for custom gallery classes */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
 }
--- a/client/src/components/chat-messages-list/chat-message-list.styles.scss
+++ b/client/src/components/chat-messages-list/chat-message-list.styles.scss
@@ -4,13 +4,16 @@
  height: 100%;
  width: 100%;
 }
 .archive-button {
  height: 20px;
  border-radius: 4px;
 }
 .chat-title {
  margin-bottom: 5px;
 }
 .messages {
  display: flex;
  flex-direction: column;
@@ -37,11 +40,13 @@
    gap: 8px;
  }
 }
-.chat-send-message-button{
+
 .chat-send-message-button {
  margin: 0.3rem;
  padding-left: 0.5rem;
 }
 .message-icon {
  position: absolute;
  bottom: 0.1rem;
@@ -125,6 +130,37 @@
  }
 }
 .system {
  align-items: center;
  margin: 0.5rem 10%;
  .message {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    text-align: center;
    font-style: italic;
    color: #555;
    width: fit-content;
    max-width: 80%;
  }
  .system-label {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.2rem;
    display: block;
  }
  .system-date {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.2rem;
    text-align: center;
  }
 }
 .virtuoso-container {
  flex: 1;
  overflow: auto;
--- a/client/src/components/chat-messages-list/renderMessage.jsx
+++ b/client/src/components/chat-messages-list/renderMessage.jsx
@@ -2,17 +2,29 @@ import Icon from "@ant-design/icons";
 import { Tooltip } from "antd";
 import i18n from "i18next";
 import dayjs from "../../utils/day";
-import { MdDone, MdDoneAll } from "react-icons/md";
+import { MdClose, MdDone, MdDoneAll } from "react-icons/md";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 export const renderMessage = (messages, index) => {
  const message = messages[index];
  const isSystem = message.is_system;
  // Determine message class
  const messageClass = isSystem ? "system messages" : message.isoutbound ? "mine messages" : "yours messages";
  // Tooltip content based on message type
  const tooltipTitle = isSystem ? (
    i18n.t("consent.text_body")
  ) : (
    <DateTimeFormatter>{message.created_at}</DateTimeFormatter>
  );
  return (
-    <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
+    <div key={index} className={messageClass}>
      <div className="message msgmargin">
-        <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
+        <Tooltip title={tooltipTitle}>
          <div>
            {isSystem && <span className="system-label">System</span>}
            {/* Render images if available */}
            {message.image && message.image_path?.length > 0 && (
              <div className="message-images">
@@ -26,20 +38,31 @@ export const renderMessage = (messages, index) => {
              </div>
            )}
            {/* Render text if available */}
-            {message.text && <div>{message.text}</div>}
+            {message.text && <div className="message-text">{message.text}</div>}
            {/* Render date for system messages */}
            {isSystem && (
              <div className="system-date">
                <DateTimeFormatter>{message.created_at}</DateTimeFormatter>
              </div>
            )}
          </div>
        </Tooltip>
-        {/* Message status icons */}
+        {/* Message status icons for non-system messages */}
-        {message.status && (message.status === "sent" || message.status === "delivered") && (
+        {!isSystem &&
-          <div className="message-status">
+          message.status &&
-            <Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
+          (message.status === "sent" || message.status === "delivered" || message.status === "failed") && (
-          </div>
+            <div className="message-status">
-        )}
+              <Icon
                component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : MdClose}
                className="message-icon"
                style={message.status === "failed" ? { color: "#ff0000" } : undefined}
              />
            </div>
          )}
      </div>
-
+      {/* Outbound message metadata for non-system messages */}
-      {/* Outbound message metadata */}
+      {!isSystem && message.isoutbound && (
      {message.isoutbound && (
        <div style={{ fontSize: 10 }}>
          {i18n.t("messaging.labels.sentby", {
            by: message.userid,
--- a/client/src/components/chat-send-message/chat-send-message.component.jsx
+++ b/client/src/components/chat-send-message/chat-send-message.component.jsx
@@ -1,6 +1,6 @@
-import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
+import { ExclamationCircleOutlined, LoadingOutlined, SendOutlined } from "@ant-design/icons";
-import { Input, Spin } from "antd";
+import { Alert, Input, Space, Spin, Tooltip } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -10,6 +10,9 @@ import { selectIsSending, selectMessage } from "../../redux/messaging/messaging.
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
 import { useQuery } from "@apollo/client";
 import { phone } from "phone";
 import { GET_PHONE_NUMBER_OPT_OUT } from "../../graphql/phone-number-opt-out.queries";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -25,16 +28,24 @@ const mapDispatchToProps = (dispatch) => ({
 function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSending, message, setMessage }) {
  const inputArea = useRef(null);
  const [selectedMedia, setSelectedMedia] = useState([]);
  const { t } = useTranslation();
  const normalizedPhone = phone(conversation.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
  const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUT, {
    variables: { bodyshopid: bodyshop.id, phone_number: normalizedPhone },
    fetchPolicy: "cache-and-network"
  });
  const isOptedOut = !!optOutData?.phone_number_opt_out?.[0];
  useEffect(() => {
    inputArea.current.focus();
  }, [isSending, setMessage]);
  const { t } = useTranslation();
  const handleEnter = () => {
    const selectedImages = selectedMedia.filter((i) => i.isSelected);
    if ((message === "" || !message) && selectedImages.length === 0) return;
    if (isOptedOut) return; // Prevent sending if phone number is opted out
    logImEXEvent("messaging_send_message");
    if (selectedImages.length < 11) {
@@ -44,7 +55,8 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
        messagingServiceSid: bodyshop.messagingservicesid,
        conversationid: conversation.id,
        selectedMedia: selectedImages,
-        imexshopid: bodyshop.imexshopid
+        imexshopid: bodyshop.imexshopid,
        bodyshopid: bodyshop.id
      };
      sendMessage(newMessage);
      setSelectedMedia(
@@ -56,47 +68,67 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
  };
  return (
-    <div className="imex-flex-row" style={{ width: "100%" }}>
+    <Space direction="vertical" style={{ width: "100%" }} size="middle">
-      <ChatPresetsComponent className="imex-flex-row__margin" />
+      {isOptedOut && (
-      <ChatMediaSelector
+        <Tooltip title={t("consent.text_body")}>
-        conversation={conversation}
+          <Alert
-        selectedMedia={selectedMedia}
+            showIcon={true}
-        setSelectedMedia={setSelectedMedia}
+            icon={<ExclamationCircleOutlined />}
-      />
+            message={t("messaging.errors.no_consent")}
-      <span style={{ flex: 1 }}>
+            type="error"
        <Input.TextArea
          className="imex-flex-row__margin imex-flex-row__grow"
          allowClear
          autoFocus
          ref={inputArea}
          autoSize={{ minRows: 1, maxRows: 4 }}
          value={message}
          disabled={isSending}
          placeholder={t("messaging.labels.typeamessage")}
          onChange={(e) => setMessage(e.target.value)}
          onPressEnter={(event) => {
            event.preventDefault();
            if (!!!event.shiftKey) handleEnter();
          }}
        />
      </span>
      <SendOutlined
        className="chat-send-message-button"
        //  disabled={message === "" || !message}
        onClick={handleEnter}
      />
      <Spin
        style={{ display: `${isSending ? "" : "none"}` }}
        indicator={
          <LoadingOutlined
            style={{
              fontSize: 24
            }}
            spin
          />
-        }
+        </Tooltip>
-      />
+      )}
-    </div>
+      <div className="imex-flex-row" style={{ width: "100%" }}>
        {!isOptedOut && (
          <>
            <ChatPresetsComponent disabled={isSending} className="imex-flex-row__margin" />
            <ChatMediaSelector
              disabled={isSending}
              conversation={conversation}
              selectedMedia={selectedMedia}
              setSelectedMedia={setSelectedMedia}
            />
          </>
        )}
        <span style={{ flex: 1 }}>
          <Input.TextArea
            className="imex-flex-row__margin imex-flex-row__grow"
            allowClear
            autoFocus
            ref={inputArea}
            autoSize={{ minRows: 1, maxRows: 4 }}
            value={message}
            disabled={isSending || isOptedOut}
            placeholder={t("messaging.labels.typeamessage")}
            onChange={(e) => setMessage(e.target.value)}
            onPressEnter={(event) => {
              event.preventDefault();
              if (!event.shiftKey && !isOptedOut) handleEnter();
            }}
          />
        </span>
        {!isOptedOut && (
          <SendOutlined
            className="chat-send-message-button"
            disabled={isSending || message === "" || !message}
            onClick={handleEnter}
          />
        )}
        <Spin
          style={{ display: `${isSending ? "" : "none"}` }}
          indicator={
            <LoadingOutlined
              style={{
                fontSize: 24
              }}
              spin
            />
          }
        />
      </div>
    </Space>
  );
 }
--- a/client/src/components/contracts-find-modal/contracts-find-modal.container.jsx
+++ b/client/src/components/contracts-find-modal/contracts-find-modal.container.jsx
@@ -63,7 +63,7 @@ export function ContractsFindModalContainer({
      title={t("contracts.labels.findermodal")}
      onCancel={() => toggleModalVisible()}
      onOk={() => toggleModalVisible()}
-      destroyOnClose
+      destroyOnHidden
      forceRender
    >
      <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/client/src/components/email-overlay/email-overlay.container.jsx
@@ -152,7 +152,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
  }, [modalVisible]); // eslint-disable-line react-hooks/exhaustive-deps
  return (
    <Modal
-      destroyOnClose={true}
+      destroyOnHidden
      open={modalVisible}
      maskClosable={false}
      width={"80%"}
--- a/client/src/components/employee-search-select/employee-search-select.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select.component.jsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 const { Option } = Select;
 //To be used as a form element only.
-const EmployeeSearchSelect = ({ options, ...props }) => {
+const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
  const { t } = useTranslation();
  return (
@@ -21,12 +21,16 @@ const EmployeeSearchSelect = ({ options, ...props }) => {
      {options
        ? options.map((o) => (
            <Option key={o.id} value={o.id} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
-              <Space>
+              <Space size="small">
-                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
+                {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
-
+                <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
                <Tag color="green">
                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
                </Tag>
                {showEmail && o.user_email ? (
                  <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
                    {o.user_email}
                  </Tag>
                ) : null}
              </Space>
            </Option>
          ))
--- a/client/src/components/feature-wrapper/feature-wrapper.component.jsx
+++ b/client/src/components/feature-wrapper/feature-wrapper.component.jsx
@@ -81,8 +81,9 @@ export function HasFeatureAccess({ featureName, bodyshop, bypass, debug = false
  }
  return (
    bodyshop?.features?.allAccess ||
-    bodyshop?.features?.[featureName] ||
+    (typeof bodyshop?.features?.[featureName] === "boolean"
-    dayjs(bodyshop?.features[featureName]).isAfter(dayjs())
+      ? bodyshop?.features?.[featureName]
      : dayjs(bodyshop?.features?.[featureName]).isAfter(dayjs()))
  );
 }
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -15,6 +15,7 @@ import {
  HomeFilled,
  ImportOutlined,
  LineChartOutlined,
  OneToOneOutlined,
  PaperClipOutlined,
  PhoneOutlined,
  PlusCircleOutlined,
@@ -24,6 +25,7 @@ import {
  TeamOutlined,
  ToolFilled,
  UnorderedListOutlined,
  UsergroupAddOutlined,
  UserOutlined
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
@@ -40,6 +42,7 @@ import { RiSurveyLine } from "react-icons/ri";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -47,10 +50,10 @@ import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import day from "../../utils/day.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 // Redux mappings
 const mapStateToProps = createStructuredSelector({
@@ -98,6 +101,7 @@ function Header({
  const baseTitleRef = useRef(document.title || "");
  const lastSetTitleRef = useRef("");
  const userAssociationId = bodyshop?.associations?.[0]?.id;
  const isEmployee = useIsEmployee(bodyshop, currentUser);
  const {
    data: unreadData,
@@ -640,17 +644,32 @@ function Header({
          label: t("menus.header.help"),
          onClick: () => window.open("https://help.imex.online/", "_blank")
        },
-        ...(InstanceRenderManager({ imex: true, rome: false })
+        {
-          ? [
+          key: "remoteassist",
-              {
+          id: "header-remote-assist",
-                key: "rescue",
+          icon: <OneToOneOutlined />,
-                id: "header-rescue",
+          label: t("menus.header.remoteassist"),
-                icon: <CarFilled />,
+          children: [
-                label: t("menus.header.rescueme"),
+            ...(InstanceRenderManager({ imex: true, rome: false })
-                onClick: () => window.open("https://imexrescue.com/", "_blank")
+              ? [
-              }
+                  {
-            ]
+                    key: "rescue",
-          : []),
+                    id: "header-rescue",
                    icon: <PlusCircleOutlined />,
                    label: t("menus.header.rescueme"),
                    onClick: () => window.open("https://imexrescue.com/", "_blank")
                  }
                ]
              : []),
            {
              key: "rescue-zoho",
              id: "header-rescue-zoho",
              icon: <UsergroupAddOutlined />,
              label: t("menus.header.rescuemezoho"),
              onClick: () => window.open("https://join.zoho.com/", "_blank")
            }
          ]
        },
        {
          key: "shiftclock",
          id: "header-shiftclock",
@@ -682,7 +701,7 @@ function Header({
          icon: unreadLoading ? (
            <Spin size="small" />
          ) : (
-            <Badge offset={[8, 0]} size="small" count={unreadCount}>
+            <Badge offset={[8, 0]} size="small" count={isEmployee ? unreadCount : 0}>
              <BellFilled />
            </Badge>
          ),
--- a/client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx
+++ b/client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx
@@ -98,7 +98,7 @@ export function InventoryUpsertModalContainer({ currentUser, bodyshop, inventory
      onCancel={() => {
        toggleModalVisible();
      }}
-      destroyOnClose
+      destroyOnHidden
    >
      <Form form={form} onFinish={handleFinish} layout="vertical">
        <InventoryUpsertModal form={form} />
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -66,7 +66,7 @@ export function ScheduleEventComponent({
  const [popOverVisible, setPopOverVisible] = useState(false);
  const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
-    variables: { id: event.job.id },
+    variables: { id: event.job?.id },
    onCompleted: (data) => {
      if (data?.jobs_by_pk) {
        const totalHours =
@@ -83,6 +83,7 @@ export function ScheduleEventComponent({
        });
      }
    },
    fetchPolicy: "network-only"
  });
@@ -394,30 +395,33 @@ export function ScheduleEventComponent({
        ) : (
          <ScheduleManualEvent event={event} />
        )}
-        {event.isintake && HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
+        {event.job &&
-          <Link
+          (HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
-            to={{
+            <Link
-              pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
+              to={{
-              search: `?appointmentId=${event.id}`
+                pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
-            }}
+                search: `?appointmentId=${event.id}`
-          >
+              }}
-            <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
+            >
-          </Link>
+              <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
-        ) : (
+            </Link>
-          <Popover //open={open}
+          ) : (
-            content={popMenu}
+            <Popover //open={open}
-            open={popOverVisible}
+              content={popMenu}
-            onOpenChange={setPopOverVisible}
+              open={popOverVisible}
-            onClick={(e) => {
+              onOpenChange={setPopOverVisible}
-              getJobDetails();
+              onClick={(e) => {
-              e.stopPropagation();
+                if (event.job?.id) {
-            }}
+                  e.stopPropagation();
-            getPopupContainer={(trigger) => trigger.parentNode}
+                  getJobDetails();
-            trigger="click"
+                }
-          >
+              }}
-            <Button disabled={event.arrived}>{t("jobs.actions.intake_quick")}</Button>
+              getPopupContainer={(trigger) => trigger.parentNode}
-          </Popover>
+              trigger="click"
-        )}
+            >
              <Button disabled={event.arrived}>{t("jobs.actions.intake_quick")}</Button>
            </Popover>
          ))}
      </Space>
    </div>
  );
--- a/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
+++ b/client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
@@ -1,7 +1,7 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, Switch } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -9,7 +9,6 @@ import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import { MARK_APPOINTMENT_ARRIVED, MARK_LATEST_APPOINTMENT_ARRIVED } from "../../../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
 import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
 import { insertAuditTrail } from "../../../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../../../redux/user/user.selectors";
 import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
@@ -32,7 +31,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
  const [loading, setLoading] = useState(false);
  const [markAptArrived] = useMutation(MARK_APPOINTMENT_ARRIVED);
  const [markLatestAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_ARRIVED);
  const [updateOwner] = useMutation(UPDATE_OWNER);
  const notification = useNotification();
  const { jobId } = useParams();
@@ -129,24 +127,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
      }
    }
    if (type === "intake" && job.owner && job.owner.id) {
      //Updae Owner Allow to Text
      const updateOwnerResult = await updateOwner({
        variables: {
          ownerId: job.owner.id,
          owner: { allow_text_message: values.allow_text_message }
        }
      });
      if (!!updateOwnerResult.errors) {
        notification["error"]({
          message: t("checklist.errors.complete", {
            error: JSON.stringify(result.errors)
          })
        });
      }
    }
    setLoading(false);
    if (!!!result.errors) {
@@ -189,7 +169,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
        initialValues={{
          ...(type === "intake" && {
            addToProduction: true,
            allow_text_message: job.owner && job.owner.allow_text_message,
            scheduled_completion:
              (job && job.scheduled_completion && dayjs(job.scheduled_completion)) ||
              (job &&
@@ -228,14 +207,6 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
            >
              <Switch disabled={readOnly} />
            </Form.Item>
            <Form.Item
              name="allow_text_message"
              valuePropName="checked"
              label={t("checklist.labels.allow_text_message")}
              disabled={readOnly}
            >
              <Switch disabled={readOnly} />
            </Form.Item>
            <Form.Item
              name="scheduled_completion"
              label={t("jobs.fields.scheduled_completion")}
--- a/client/src/components/job-costing-modal/job-costing-modal.container.jsx
+++ b/client/src/components/job-costing-modal/job-costing-modal.container.jsx
@@ -49,7 +49,7 @@ export function JobCostingModalContainer({ jobCostingModal, toggleModalVisible }
      }}
      cancelButtonProps={{ style: { display: "none" } }}
      width="90%"
-      destroyOnClose
+      destroyOnHidden
    >
      {!costingData ? (
        <LoadingSpinner loading={true} />
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -32,7 +32,13 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" })),
+  setPrintCenterContext: (context) =>
    dispatch(
      setModalContext({
        context: context,
        modal: "printCenter"
      })
    ),
  insertAuditTrail: ({ jobid, operation, type }) =>
    dispatch(
      insertAuditTrail({
@@ -87,7 +93,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
  };
  return (
-    <Drawer open={!!selected} destroyOnClose width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
+    <Drawer open={!!selected} destroyOnHidden width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
      {loading ? <LoadingSpinner /> : null}
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      {data ? (
--- a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
+++ b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
@@ -80,7 +80,7 @@ export function JobEmployeeAssignments({
  );
  return (
-    <Popover destroyTooltipOnHide content={popContent} open={visibility}>
+    <Popover destroyOnHidden content={popContent} open={visibility}>
      <Spin spinning={loading}>
        <DataLabel label={t("jobs.fields.employee_body")}>
          {body ? (
--- a/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx
@@ -44,7 +44,7 @@ function JobReconciliationModalContainer({ reconciliationModal, toggleModalVisib
      onOk={handleCancel}
      onCancel={handleCancel}
      cancelButtonProps={{ display: "none" }}
-      destroyOnClose
+      destroyOnHidden
      className="imex-reconciliation-modal"
    >
      {loading && <LoadingSpinner loading={loading} />}
--- a/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
@@ -24,7 +24,8 @@ export default function JobWatcherToggleComponent({
  handleToggleSelf,
  handleRemoveWatcher,
  handleWatcherSelect,
-  handleTeamSelect
+  handleTeamSelect,
  isEmployee
 }) {
  const { t } = useTranslation();
@@ -66,22 +67,32 @@ export default function JobWatcherToggleComponent({
      <List>
        <List.Item
          actions={[
-            <Button
+            <Tooltip title={!isEmployee ? t("notifications.tooltips.not-employee") : ""} placement="top">
-              type={isWatching ? "primary" : "default"}
+              <span>
-              danger={!isWatching}
+                <Button
-              icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
+                  type={isWatching ? "primary" : "default"}
-              size="medium"
+                  danger={!isWatching}
-              onClick={handleToggleSelf}
+                  icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
-              loading={adding || removing}
+                  size="medium"
-            >
+                  onClick={handleToggleSelf}
-              {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
+                  loading={adding || removing}
-            </Button>
+                  disabled={!isEmployee || adding || removing}
                >
                  {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
                </Button>
              </span>
            </Tooltip>
          ]}
        >
          <List.Item.Meta>
            <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
              {t("notifications.labels.watching-issue")}
            </Text>
            {!isEmployee && (
              <Text type="danger" style={{ marginBottom: 8, display: "block" }}>
                {t("notifications.tooltips.not-employee")}
              </Text>
            )}
          </List.Item.Meta>
        </List.Item>
      </List>
@@ -98,12 +109,16 @@ export default function JobWatcherToggleComponent({
      <EmployeeSearchSelectComponent
        style={{ minWidth: "100%" }}
        options={
-          bodyshop?.employees?.filter((e) =>
+          bodyshop?.employees?.filter(
-            jobWatchers.every((w) => w.user_email !== e.user_email && e.active && e.user_email)
+            (e) =>
              e.user_email && // Ensure user_email is not null or undefined
              e.active && // Ensure employee is active
              jobWatchers.every((w) => w.user_email !== e.user_email) // Ensure not already a watcher
          ) || []
        }
        placeholder={t("notifications.labels.employee-search")}
        value={selectedWatcher}
        showEmail={true}
        onChange={(value) => {
          setSelectedWatcher(value);
          handleWatcherSelect(value);
--- a/client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx
@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import JobWatcherToggleComponent from "./job-watcher-toggle.component.jsx";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -21,13 +22,14 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
    splitKey: bodyshop && bodyshop.imexshopid
  });
-  const userEmail = currentUser.email;
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
  const jobid = job.id;
  const [open, setOpen] = useState(false);
  const [selectedWatcher, setSelectedWatcher] = useState(null);
  const [selectedTeam, setSelectedTeam] = useState(null);
  const userEmail = currentUser.email;
  const jobid = job.id;
  // Fetch current watchers with refetch capability
  const {
    data: watcherData,
@@ -139,13 +141,13 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
  });
  const handleToggleSelf = useCallback(async () => {
-    if (adding || removing) return;
+    if (adding || removing || !isEmployee) return;
    if (isWatching) {
      await removeWatcher({ variables: { jobid, userEmail } });
    } else {
      await addWatcher({ variables: { jobid, userEmail } });
    }
-  }, [isWatching, addWatcher, removeWatcher, jobid, userEmail, adding, removing]);
+  }, [isWatching, addWatcher, removeWatcher, jobid, userEmail, adding, removing, isEmployee]);
  const handleRemoveWatcher = useCallback(
    async (email) => {
@@ -187,7 +189,16 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
        setSelectedTeam(null);
        return;
      }
-      await Promise.all(newWatchers.map((email) => addWatcher({ variables: { jobid, userEmail: email } })));
+      await Promise.all(
        newWatchers.map((email) =>
          addWatcher({
            variables: {
              jobid,
              userEmail: email
            }
          })
        )
      );
    },
    [jobWatchers, addWatcher, jobid, adding]
  );
@@ -212,6 +223,7 @@ function JobWatcherToggleContainer({ job, currentUser, bodyshop }) {
      handleWatcherSelect={handleWatcherSelect}
      handleTeamSelect={handleTeamSelect}
      currentUser={currentUser}
      isEmployee={isEmployee} // Pass isEmployee to the component
    />
  );
 }
--- a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
+++ b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
@@ -106,7 +106,12 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
          <Form.Item label={t("jobs.fields.date_open")} name="date_open">
            <DateTimePicker />
          </Form.Item>
-
+          <Form.Item label={t("jobs.fields.estimate_sent_approval")} name="estimate_sent_approval">
            <DateTimePicker />
          </Form.Item>
          <Form.Item label={t("jobs.fields.estimate_approved")} name="estimate_approved">
            <DateTimePicker />
          </Form.Item>
          <Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
            <DateTimePicker />
          </Form.Item>
--- a/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
+++ b/client/src/components/jobs-available-scan/jobs-available-scan.component.jsx
@@ -1,19 +1,19 @@
 import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Input, Space, Table } from "antd";
 import axios from "axios";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import { alphaSort } from "../../utils/sorters";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  partnerVersion: selectPartnerVersion
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobsAvailableScan);
@@ -126,6 +126,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
            onClick={() => {
              scanEstimates();
            }}
            id="scan-estimates-button"
          >
            <SyncOutlined />
          </Button>
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -4,11 +4,12 @@ import { Col, Row } from "antd";
 import Axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
  DELETE_AVAILABLE_JOB,
@@ -33,7 +34,6 @@ import OwnerFindModalContainer from "../owner-find-modal/owner-find-modal.contai
 import { GetSupplementDelta } from "./jobs-available-supplement.estlines.util";
 import HeaderFields from "./jobs-available-supplement.headerfields";
 import JobsAvailableTableComponent from "./jobs-available-table.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -195,7 +195,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
      await deleteJob({
        variables: { id: estData.id }
-      }).then((r) => {
+      }).then(() => {
        refetch();
        setInsertLoading(false);
      });
@@ -315,7 +315,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
      deleteJob({
        variables: { id: estData.id }
-      }).then((r) => {
+      }).then(() => {
        refetch();
        setInsertLoading(false);
      });
@@ -372,7 +372,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
    loadEstData({ variables: { id: record.id } });
    modalSearchState[1](record.clm_no);
    setJobModalVisible(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line
  }, []);
  useEffect(() => {
@@ -456,7 +456,7 @@ function replaceEmpty(someObj, replaceValue = null) {
  return JSON.parse(temp);
 }
-async function CheckTaxRatesUSA(estData, bodyshop) {
+async function CheckTaxRatesUSA(estData) {
  if (!estData.parts_tax_rates?.PAM) {
    estData.parts_tax_rates.PAM = estData.parts_tax_rates.PAC;
  }
@@ -568,7 +568,7 @@ async function CheckTaxRates(estData, bodyshop) {
  });
  //}
 }
-function ResolveCCCLineIssues(estData, bodyshop) {
+function ResolveCCCLineIssues(estData) {
  //Find all misc amounts, populate them to the act price.
  //This needs to be done before cleansing unq_seq since some misc prices could move over.
  estData.joblines.data.forEach((line) => {
@@ -585,6 +585,9 @@ function ResolveCCCLineIssues(estData, bodyshop) {
          //  line.notes += ` | ET/UT Update (prev = ${line.mod_lbr_ty})`;
          line.mod_lbr_ty = "LAR";
        }
        if (line.mod_lbr_ty === "OTSL") {
          line.mod_lbr_ty = line.mod_lbr_hrs === 0 ? null : "LAB";
        }
      }
    });
  });
--- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
+++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
@@ -1,4 +1,4 @@
-import { Form, Input, Switch } from "antd";
+import { Form, Input } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -129,13 +129,6 @@ export default function JobsCreateOwnerInfoNewComponent() {
        <Form.Item label={t("owners.fields.preferred_contact")} name={["owner", "data", "preferred_contact"]}>
          <Input disabled={!state.owner.new} />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.allow_text_message")}
          valuePropName="checked"
          name={["owner", "data", "allow_text_message"]}
        >
          <Switch disabled={!state.owner.new} />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
--- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx
+++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.search.component.jsx
@@ -1,5 +1,5 @@
 import { Card, Input, Table } from "antd";
-import React, { useContext, useState } from "react";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import PhoneFormatter from "../../utils/PhoneFormatter";
@@ -91,6 +91,7 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
            });
          }}
          enterButton
          id="search-owner"
        />
      }
    >
@@ -112,9 +113,9 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
          type: "radio",
          selectedRowKeys: [state.owner.selectedid]
        }}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
          return {
-            onClick: (event) => {
+            onClick: () => {
              if (record) {
                if (record.id) {
                  setState({
--- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx
+++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.predefined.component.jsx
@@ -72,7 +72,7 @@ export default function JobsCreateVehicleInfoPredefined({ disabled, form }) {
      open={open}
      placement="left"
      onOpenChange={handleOpenChange}
-      destroyTooltipOnHide
+      destroyOnHidden
    >
      <SearchOutlined style={{ cursor: "pointer" }} />
    </Popover>
--- a/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx
+++ b/client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx
@@ -1,9 +1,9 @@
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Card, Input, Space, Table } from "antd";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import { alphaSort } from "../../utils/sorters";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles }) {
@@ -63,6 +63,7 @@ export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles
              });
            }}
            enterButton
            id="search-vehicle"
          />
        </Space>
      }
@@ -91,9 +92,9 @@ export default function JobsCreateVehicleInfoSearchComponent({ loading, vehicles
          type: "radio",
          selectedRowKeys: [state.vehicle.selectedid]
        }}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
          return {
-            onClick: (event) => {
+            onClick: () => {
              if (record) {
                if (record.id) {
                  setState({
--- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
+++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
@@ -7,6 +7,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
 import dayjs from "../../utils/day";
 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -40,6 +41,20 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
        <Form.Item label={t("jobs.fields.date_rentalresp")} name="date_rentalresp">
          <DateTimePicker disabled={jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.estimate_sent_approval")} name="estimate_sent_approval">
          <DateTimePicker
            disabled={true}
            value={job.estimate_sent_approval ? dayjs(job.estimate_sent_approval) : null}
            placeholder={t("general.labels.na")}
          />
        </Form.Item>
        <Form.Item label={t("jobs.fields.estimate_approved")} name="estimate_approved">
          <DateTimePicker
            disabled={true}
            value={job.estimate_approved ? dayjs(job.estimate_approved) : null}
            placeholder={t("general.labels.na")}
          />
        </Form.Item>
      </FormRow>
      <FormRow header={t("jobs.forms.scheddates")}>
@@ -76,21 +91,15 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
          <DateTimePicker disabled={jobRO} />
        </Form.Item>
        <Form.Item shouldUpdate>
-          {() => {
+          {() => (
-            return (
+            <Form.Item
-              <Form.Item
+              label={t("jobs.fields.actual_completion")}
-                label={t("jobs.fields.actual_completion")}
+              name="actual_completion"
-                name="actual_completion"
+              rules={[{ required: jobInPostProduction }]}
-                rules={[
+            >
-                  {
+              <DateTimePicker disabled={jobRO} />
-                    required: jobInPostProduction
+            </Form.Item>
-                  }
+          )}
                ]}
              >
                <DateTimePicker disabled={jobRO} />
              </Form.Item>
            );
          }}
        </Form.Item>
        <Form.Item label={t("jobs.fields.scheduled_delivery")} name="scheduled_delivery">
          <DateTimePicker disabled={jobRO} />
@@ -103,15 +112,12 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
        <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
          <DateTimePicker disabled={true || jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
          <DateTimePicker disabled={true || jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.date_void")} name="date_void">
          <DateTimePicker disabled={true || jobRO} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.date_lost_sale")} name="date_lost_sale">
          <DateTimePicker disabled={true || jobRO} />
        </Form.Item>
--- a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
+++ b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
@@ -1,5 +1,4 @@
 import { Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -188,6 +187,12 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
            <Form.Item label={t("jobs.fields.tlos_ind")} name="tlos_ind" valuePropName="checked">
              <Switch disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.hit_and_run")} name="hit_and_run" valuePropName="checked">
              <Switch disabled={jobRO} />
            </Form.Item>
            <Form.Item label={t("jobs.fields.acv_amount")} name="acv_amount">
              <CurrencyInput disabled={jobRO} min={0} />
            </Form.Item>
          </FormRow>
        </Col>
        <Col {...lossColDamage}>
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 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";
@@ -32,7 +33,6 @@ import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -1078,17 +1078,26 @@ export function JobsDetailHeaderActions({
    menuItems.push({
      key: "deletejob",
      id: "job-actions-deletejob",
-      label: (
+      label:
-        <Popconfirm
+        job.job_watchers.length === 0 ? (
-          title={t("jobs.labels.deleteconfirm")}
+          <Popconfirm
-          okText={t("general.labels.yes")}
+            title={t("jobs.labels.deleteconfirm")}
-          cancelText={t("general.labels.no")}
+            okText={t("general.labels.yes")}
-          onClick={(e) => e.stopPropagation()}
+            cancelText={t("general.labels.no")}
-          onConfirm={handleDeleteJob}
+            onClick={(e) => e.stopPropagation()}
-        >
+            onConfirm={handleDeleteJob}
-          {t("menus.jobsactions.deletejob")}
+          >
-        </Popconfirm>
+            {t("menus.jobsactions.deletejob")}
-      )
+          </Popconfirm>
        ) : (
          <Popconfirm
            title={t("jobs.labels.deletewatchers")}
            onClick={(e) => e.stopPropagation()}
            showCancel={false}
          >
            {t("menus.jobsactions.deletejob")}
          </Popconfirm>
        )
    });
  }
@@ -1109,8 +1118,8 @@ export function JobsDetailHeaderActions({
        <RbacWrapper action="jobs:void" noauth>
          <Popconfirm
            title={t("jobs.labels.voidjob")}
-            okText="Yes"
+            okText={t("general.labels.yes")}
-            cancelText="No"
+            cancelText={t("general.labels.no")}
            onClick={(e) => e.stopPropagation()}
            onConfirm={handleVoidJob}
          >
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx
@@ -167,7 +167,18 @@ export function JobsDetailHeaderActionsToggleProduction({
                <FormDateTimePickerComponent disabled={jobRO} />
              </Form.Item>
-              <Form.Item name={["actual_delivery"]} label={t("jobs.fields.actual_delivery")}>
+              <Form.Item
                name={["actual_delivery"]}
                label={t("jobs.fields.actual_delivery")}
                rules={[
                  {
                    required: bodyshop.deliverchecklist.actual_delivery
                      ? bodyshop.deliverchecklist.actual_delivery
                      : false
                    //message: t("general.validation.required"),
                  }
                ]}
              >
                <FormDateTimePickerComponent disabled={jobRO} />
              </Form.Item>
            </>
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -1,15 +1,21 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, WarningFilled } from "@ant-design/icons";
-import { Card, Col, Divider, Row, Space, Tag, Tooltip } from "antd";
+import { useMutation } from "@apollo/client";
-import React, { useState } from "react";
+import { Card, Checkbox, Col, Divider, Row, Space, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { DateTimeFormatter, DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
@@ -21,7 +27,6 @@ import ProductionListColumnComment from "../production-list-columns/production-l
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 import "./jobs-detail-header.styles.scss";
 import dayjs from "../../utils/day";
 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -29,41 +34,73 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
+  setPrintCenterContext: (context) =>
    dispatch(
      setModalContext({
        context: context,
        modal: "printCenter"
      })
    ),
  insertAuditTrail: ({ jobid, operation, type }) =>
    dispatch(
      insertAuditTrail({
        jobid,
        operation,
        type
      })
    )
 });
 const colSpan = {
-  xs: {
+  xs: { span: 24 },
-    span: 24
+  sm: { span: 24 },
-  },
+  md: { span: 12 },
-  sm: {
+  lg: { span: 6 },
-    span: 24
+  xl: { span: 6 }
  },
  md: {
    span: 12
  },
  lg: {
    span: 6
  },
  xl: {
    span: 6
  }
 };
-export function JobsDetailHeader({ job, bodyshop, disabled }) {
+export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail }) {
  const { t } = useTranslation();
  const { notification } = useNotification();
  const [notesClamped, setNotesClamped] = useState(true);
-  const vehicleTitle = `${job.v_model_yr || ""} ${job.v_color || ""}
+  const [updateJob] = useMutation(UPDATE_JOB);
-  ${job.v_make_desc || ""} 
+  const vehicleTitle =
-  ${job.v_model_desc || ""}`.trim();
+    `${job.v_model_yr || ""} ${job.v_color || ""} ${job.v_make_desc || ""} ${job.v_model_desc || ""}`.trim();
  const bodyHrs = job.joblines.filter((j) => j.mod_lbr_ty !== "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0);
  const refinishHrs = job.joblines
    .filter((line) => line.mod_lbr_ty === "LAR")
    .reduce((acc, val) => acc + val.mod_lb_hrs, 0);
  const ownerTitle = OwnerNameDisplayFunction(job).trim();
  // Handle checkbox changes
  const handleCheckboxChange = async (field, checked) => {
    const value = checked ? dayjs().toISOString() : null;
    try {
      const ret = await updateJob({
        variables: {
          jobId: job.id,
          job: { [field]: value }
        },
        refetchQueries: ["GET_JOB_BY_PK"],
        awaitRefetchQueries: true
      });
      insertAuditTrail({
        jobid: job.id,
        operation: AuditTrailMapping.jobfieldchange(
          field,
          ret.data.update_jobs.returning[0][field]
            ? DateTimeFormatterFunction(ret.data.update_jobs.returning[0][field])
            : checked
        ),
        type: "jobfieldchange"
      });
    } catch (error) {
      notification.error({
        message: t("jobs.errors.saving", { error: error.message })
      });
    }
  };
  return (
    <Row gutter={[16, 16]} style={{ alignItems: "stretch" }}>
      <Col {...colSpan}>
@@ -72,11 +109,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
            <DataLabel label={t("jobs.fields.status")}>
              <Space wrap>
                {job.status}
-                {job.inproduction && (
+                {job.inproduction && <Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>}
                  <Tag color="#f50" key="production">
                    {t("jobs.labels.inproduction")}
                  </Tag>
                )}
                {job.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
                {job.iouparent && (
                  <Link to={`/manage/jobs/${job.iouparent}`}>
@@ -110,7 +143,6 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
              <span style={{ margin: "0rem .5rem" }}>/</span>
              <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
            </DataLabel>
            <DataLabel label={t("jobs.fields.alt_transport")}>
              {job.alt_transport}
              <JobAltTransportChange job={job} />
@@ -127,11 +159,39 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                ))}
              </DataLabel>
            )}
            <DataLabel label={t("jobs.fields.production_vars.note")}>
              <ProductionListColumnProductionNote record={job} />
            </DataLabel>
-
+            <DataLabel label={t("jobs.fields.estimate_sent_approval")}>
              <Space>
                <Checkbox
                  checked={!!job.estimate_sent_approval}
                  onChange={(e) => handleCheckboxChange("estimate_sent_approval", e.target.checked)}
                  disabled={disabled}
                >
                  {job.estimate_sent_approval && (
                    <span style={{ color: "#888" }}>
                      <DateTimeFormatter>{job.estimate_sent_approval}</DateTimeFormatter>
                    </span>
                  )}
                </Checkbox>
              </Space>
            </DataLabel>
            <DataLabel label={t("jobs.fields.estimate_approved")}>
              <Space>
                <Checkbox
                  checked={!!job.estimate_approved}
                  onChange={(e) => handleCheckboxChange("estimate_approved", e.target.checked)}
                  disabled={disabled}
                >
                  {job.estimate_approved && (
                    <span style={{ color: "#888" }}>
                      <DateTimeFormatter>{job.estimate_approved}</DateTimeFormatter>
                    </span>
                  )}
                </Checkbox>
              </Space>
            </DataLabel>
            <Space wrap>
              {job.special_coverage_policy && (
                <Tag color="tomato">
@@ -149,6 +209,14 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
                  </Space>
                </Tag>
              )}
              {job.hit_and_run && (
                <Tag color="green">
                  <Space>
                    <WarningFilled />
                    <span>{t("jobs.fields.hit_and_run")}</span>
                  </Space>
                </Tag>
              )}
            </Space>
          </div>
        </Card>
@@ -267,7 +335,11 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
        </Card>
      </Col>
      <Col {...colSpan}>
-        <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
+        <Card
          style={{ height: "100%" }}
          title=<span id="job-employee-assignments-title">{t("jobs.labels.employeeassignments")}</span>
          id={"job-employee-assignments"}
        >
          <div>
            <JobEmployeeAssignments job={job} />
            <Divider style={{ margin: ".5rem" }} />
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
@@ -42,7 +42,7 @@ export function JobsDocumentsContainer({
    variables: { jobId: jobId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
-    skip: Imgproxy.treatment === "on" || !!billId
+    skip: !!billId
  });
  if (loading) return <LoadingSpinner />;
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx
@@ -46,32 +46,40 @@ export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, i
  }
  function standardMediaDownload(bufferData) {
-    const a = document.createElement("a");
+    try {
-    const url = window.URL.createObjectURL(new Blob([bufferData]));
+      const a = document.createElement("a");
-    a.href = url;
+      const url = window.URL.createObjectURL(new Blob([bufferData]));
-    a.download = `${identifier || "documents"}.zip`;
+      a.href = url;
-    a.click();
+      a.download = `${identifier || "documents"}.zip`;
      a.click();
    } catch (error) {
      setLoading(false);
      setDownload(null);
    }
  }
  const handleDownload = async () => {
    logImEXEvent("jobs_documents_download");
    setLoading(true);
-    const zipUrl = await axios({
+    try {
-      url: "/media/imgproxy/download",
+      const response = await axios({
-      method: "POST",
+        url: "/media/imgproxy/download",
-      data: { jobId, documentids: imagesToDownload.map((_) => _.id) }
+        method: "POST",
-    });
+        responseType: "blob",
        data: { jobId, documentids: imagesToDownload.map((_) => _.id) },
        onDownloadProgress: downloadProgress
      });
-    const theDownloadedZip = await cleanAxios({
+      setLoading(false);
-      url: zipUrl.data.url,
+      setDownload(null);
      method: "GET",
      responseType: "arraybuffer",
      onDownloadProgress: downloadProgress
    });
    setLoading(false);
    setDownload(null);
-    standardMediaDownload(theDownloadedZip.data);
+      // Use the response data (Blob) to trigger download
      standardMediaDownload(response.data);
    } catch (error) {
      setLoading(false);
      setDownload(null);
      // handle error (optional)
    }
  };
  return (
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
@@ -98,7 +98,13 @@ function JobsDocumentsImgproxyComponent({
              jobId={jobId}
              totalSize={totalSize}
              billId={billId}
-              callbackAfterUpload={billsCallback || fetchThumbnails || refetch}
+              callbackAfterUpload={
                billsCallback ||
                function () {
                  isFunction(refetch) && refetch();
                  isFunction(fetchThumbnails) && fetchThumbnails();
                }
              }
              ignoreSizeLimit={ignoreSizeLimit}
            />
          </Card>
--- a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
@@ -1,9 +1,9 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Checkbox, Divider, Input, Space, Table } from "antd";
-import dayjs from "../../utils/day";
+import { useState } from "react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import dayjs from "../../utils/day";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -223,9 +223,9 @@ export default function JobsFindModalComponent({
          type: "radio",
          selectedRowKeys: [selectedJob]
        }}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
          return {
-            onClick: (event) => {
+            onClick: () => {
              handleOnRowClick(record);
            }
          };
@@ -241,15 +241,17 @@ export default function JobsFindModalComponent({
              overrideHeaders: e.target.checked
            })
          }
          id="override_header"
        >
          {t("jobs.labels.override_header")}
        </Checkbox>
-        <Checkbox checked={partsQueueToggle} onChange={(e) => setPartsQueueToggle(e.target.checked)}>
+        <Checkbox checked={partsQueueToggle} onChange={(e) => setPartsQueueToggle(e.target.checked)} id="parts_queue_toggle">
          {t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
        </Checkbox>
        <Checkbox
          checked={updateSchComp.checked}
          onChange={(e) => setSchComp({ ...updateSchComp, checked: e.target.checked })}
          id="update_scheduled_completion"
        >
          {t("jobs.labels.update_scheduled_completion")}
        </Checkbox>
@@ -261,6 +263,7 @@ export default function JobsFindModalComponent({
                onChange={(e) => {
                  setSchComp({ ...updateSchComp, scheduled_completion: e });
                }}
                id="scheduled_completion_date_time_picker"
              />
            ) : null}
            <Checkbox
@@ -273,6 +276,7 @@ export default function JobsFindModalComponent({
                  automatic: true
                });
              }}
              id="calculate_scheduled_completion"
            >
              {t("jobs.labels.calc_scheuled_completion")}
            </Checkbox>
--- a/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
@@ -1,6 +1,5 @@
 import { useQuery } from "@apollo/client";
 import { Modal } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -65,8 +64,8 @@ export default connect(
    <Modal
      title={t("jobs.labels.existing_jobs")}
      width={"80%"}
-      destroyOnClose
+      destroyOnHidden
-      okButtonProps={{ disabled: selectedJob ? false : true }}
+      okButtonProps={{ disabled: selectedJob ? false : true, id: "jobs-find-modal-container-ok" }}
      {...modalProps}
    >
      {loading ? <LoadingSpinner /> : null}
--- a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
@@ -20,7 +20,14 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("noteUpsert")),
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
    dispatch(
      insertAuditTrail({
        jobid,
        operation,
        type
      })
    )
 });
 export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleModalVisible, insertAuditTrail }) {
@@ -123,7 +130,7 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
      onCancel={() => {
        toggleModalVisible();
      }}
-      destroyOnClose
+      destroyOnHidden
    >
      <Form form={form} onFinish={handleFinish} layout="vertical">
        <NoteUpsertModalComponent form={form} />
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -1,11 +1,11 @@
 import { Virtuoso } from "react-virtuoso";
-import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { Alert, Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
 import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./notification-center.styles.scss";
 import day from "../../utils/day.js";
-import { forwardRef, useRef, useEffect } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 const { Text, Title } = Typography;
@@ -26,7 +26,8 @@ const NotificationCenterComponent = forwardRef(
      markAllRead,
      loadMore,
      onNotificationClick,
-      unreadCount
+      unreadCount,
      isEmployee
    },
    ref
  ) => {
@@ -93,7 +94,12 @@ const NotificationCenterComponent = forwardRef(
                ) : (
                  <EyeOutlined className="notification-toggle-icon" />
                )}
-                <Switch checked={showUnreadOnly} onChange={(checked) => toggleUnreadOnly(checked)} size="small" />
+                <Switch
                  checked={showUnreadOnly}
                  onChange={(checked) => toggleUnreadOnly(checked)}
                  size="small"
                  disabled={!isEmployee}
                />
              </Space>
            </Tooltip>
            <Tooltip title={t("notifications.labels.mark-all-read")}>
@@ -106,14 +112,20 @@ const NotificationCenterComponent = forwardRef(
            </Tooltip>
          </div>
        </div>
-        <Virtuoso
+        {!isEmployee ? (
-          ref={virtuosoRef}
+          <div style={{ padding: 10 }}>
-          style={{ height: "400px", width: "100%" }}
+            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
-          data={notifications}
+          </div>
-          totalCount={notifications.length}
+        ) : (
-          endReached={loadMore}
+          <Virtuoso
-          itemContent={renderNotification}
+            ref={virtuosoRef}
-        />
+            style={{ height: "400px", width: "100%" }}
            data={notifications}
            totalCount={notifications.length}
            endReached={loadMore}
            itemContent={renderNotification}
          />
        )}
      </div>
    );
  }
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -4,9 +4,10 @@ import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import day from "../../utils/day.js";
 import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
 // This will be used to poll for notifications when the socket is disconnected
 const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
@@ -17,17 +18,18 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
 * @param onClose
 * @param bodyshop
 * @param unreadCount
 * @param currentUser
 * @returns {JSX.Element}
 * @constructor
 */
-const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }) => {
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser }) => {
  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const { isConnected, markNotificationRead, markAllNotificationsRead } = useSocket();
  const notificationRef = useRef(null);
  const userAssociationId = bodyshop?.associations?.[0]?.id;
  const isEmployee = useIsEmployee(bodyshop, currentUser);
  const baseWhereClause = useMemo(() => {
    return { associationid: { _eq: userAssociationId } };
@@ -51,7 +53,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
    fetchPolicy: "cache-and-network",
    notifyOnNetworkStatusChange: true,
    pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
-    skip: !userAssociationId,
+    skip: !userAssociationId || !isEmployee,
    onError: (err) => {
      console.error(`Error polling Notifications: ${err?.message || ""}`);
      setTimeout(() => refetch(), day.duration(2, "seconds").asMilliseconds());
@@ -71,7 +73,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
  }, [visible, onClose]);
  useEffect(() => {
-    if (data?.notifications) {
+    if (data?.notifications && isEmployee) {
      const processedNotifications = data.notifications
        .map((notif) => {
          let scenarioText;
@@ -101,11 +103,13 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
        })
        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
      setNotifications(processedNotifications);
    } else if (!isEmployee) {
      setNotifications([]); // Clear notifications if not an employee
    }
-  }, [data]);
+  }, [data, isEmployee]);
  const loadMore = useCallback(() => {
-    if (!queryLoading && data?.notifications.length) {
+    if (!queryLoading && data?.notifications.length && isEmployee) {
      setIsLoading(true); // Show spinner during fetchMore
      fetchMore({
        variables: { offset: data.notifications.length, where: whereClause },
@@ -121,13 +125,14 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
        })
        .finally(() => setIsLoading(false)); // Hide spinner when done
    }
-  }, [data?.notifications?.length, fetchMore, queryLoading, whereClause]);
+  }, [data?.notifications?.length, fetchMore, queryLoading, whereClause, isEmployee]);
  const handleToggleUnreadOnly = (value) => {
    setShowUnreadOnly(value);
  };
  const handleMarkAllRead = useCallback(() => {
    if (!isEmployee) return; // Do nothing if not an employee
    setIsLoading(true);
    markAllNotificationsRead()
      .then(() => {
@@ -147,7 +152,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
      })
      .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`))
      .finally(() => setIsLoading(false));
-  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly]);
+  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly, isEmployee]);
  const handleNotificationClick = useCallback(
    (notificationId) => {
@@ -170,17 +175,18 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
  );
  useEffect(() => {
-    if (visible && !isConnected) {
+    if (visible && !isConnected && isEmployee) {
      setIsLoading(true);
      refetch()
        .catch((err) => console.error(`Error re-fetching notifications: ${err?.message || ""}`))
        .finally(() => setIsLoading(false));
    }
-  }, [visible, isConnected, refetch]);
+  }, [visible, isConnected, refetch, isEmployee]);
  return (
    <NotificationCenterComponent
      ref={notificationRef}
      isEmployee={isEmployee}
      visible={visible}
      onClose={onClose}
      notifications={notifications}
@@ -196,7 +202,8 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
 };
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser
 });
 export default connect(mapStateToProps, null)(NotificationCenterContainer);
--- a/client/src/components/notification-settings/notification-settings-form.component.jsx
+++ b/client/src/components/notification-settings/notification-settings-form.component.jsx
@@ -1,32 +1,41 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { useEffect, useState } from "react";
-import { Button, Card, Checkbox, Form, Space, Table } from "antd";
+import { Alert, Button, Card, Checkbox, Divider, Form, Space, Switch, Table, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
-import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../../graphql/user.queries.js";
+import {
  QUERY_NOTIFICATION_SETTINGS,
  UPDATE_NOTIFICATION_SETTINGS,
  UPDATE_NOTIFICATIONS_AUTOADD
 } from "../../graphql/user.queries.js";
 import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
 import PropTypes from "prop-types";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import ColumnHeaderCheckbox from "../notification-settings/column-header-checkbox.component.jsx";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
 /**
 * Notifications Settings Form
 * @param currentUser
 * @param bodyshop
 * @returns {JSX.Element}
 * @constructor
 */
-const NotificationSettingsForm = ({ currentUser }) => {
+const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [initialValues, setInitialValues] = useState({});
  const [isDirty, setIsDirty] = useState(false);
  const [autoAddEnabled, setAutoAddEnabled] = useState(false);
  const [initialAutoAdd, setInitialAutoAdd] = useState(false);
  const notification = useNotification();
  const isEmployee = useIsEmployee(bodyshop, currentUser);
-  // Fetch notification settings.
+  // Fetch notification settings and notifications_autoadd
  const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
@@ -34,13 +43,16 @@ const NotificationSettingsForm = ({ currentUser }) => {
    skip: !currentUser
  });
-  const [updateNotificationSettings, { loading: saving }] = useMutation(UPDATE_NOTIFICATION_SETTINGS);
+  const [updateNotificationSettings, { loading: savingSettings }] = useMutation(UPDATE_NOTIFICATION_SETTINGS);
  const [updateNotificationsAutoAdd, { loading: savingAutoAdd }] = useMutation(UPDATE_NOTIFICATIONS_AUTOADD);
-  // Populate form with fetched data.
+  // Populate form with fetched data
  useEffect(() => {
    if (data?.associations?.length > 0) {
      const settings = data.associations[0].notification_settings || {};
-      // Ensure each scenario has an object with { app, email, fcm }.
+      const autoAdd = data.associations[0].notifications_autoadd ?? false;
      // Ensure each scenario has an object with { app, email, fcm }
      const formattedValues = notificationScenarios.reduce((acc, scenario) => {
        acc[scenario] = settings[scenario] ?? { app: false, email: false, fcm: false };
        return acc;
@@ -48,32 +60,66 @@ const NotificationSettingsForm = ({ currentUser }) => {
      setInitialValues(formattedValues);
      form.setFieldsValue(formattedValues);
-      setIsDirty(false); // Reset dirty state when new data loads.
+      setAutoAddEnabled(autoAdd);
      setInitialAutoAdd(autoAdd);
      setIsDirty(false); // Reset dirty state when new data loads
    }
  }, [data, form]);
  // Handle toggle of notifications_autoadd
  const handleAutoAddToggle = async (checked) => {
    if (data?.associations?.length > 0) {
      const userId = data.associations[0].id;
      try {
        const result = await updateNotificationsAutoAdd({
          variables: { id: userId, autoadd: checked }
        });
        if (!result?.errors) {
          setAutoAddEnabled(checked);
          setInitialAutoAdd(checked);
          notification.success({ message: t("notifications.labels.auto-add-success") });
          setIsDirty(false); // Reset dirty state if only auto-add was changed
        } else {
          throw new Error("Failed to update auto-add setting");
        }
      } catch (err) {
        setAutoAddEnabled(!checked); // Revert on error
        notification.error({ message: t("notifications.labels.auto-add-failure") });
      }
    }
  };
  // Handle save of notification settings
  const handleSave = async (values) => {
    if (data?.associations?.length > 0) {
      const userId = data.associations[0].id;
-      // Save the updated notification settings.
+      try {
-      const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
+        const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
-      if (!result?.errors) {
+        if (!result?.errors) {
-        notification.success({ message: t("notifications.labels.notification-settings-success") });
+          notification.success({ message: t("notifications.labels.notification-settings-success") });
-        setInitialValues(values);
+          setInitialValues(values);
-        setIsDirty(false);
+          setIsDirty(false);
-      } else {
+        } else {
          throw new Error("Failed to update notification settings");
        }
      } catch (err) {
        notification.error({ message: t("notifications.labels.notification-settings-failure") });
      }
    }
  };
-  // Mark the form as dirty on any manual change.
+  // Mark the form as dirty on any manual change
  const handleFormChange = () => {
    setIsDirty(true);
  };
  // Check if auto-add has changed
  const isAutoAddDirty = autoAddEnabled !== initialAutoAdd;
  // Handle reset of form and auto-add
  const handleReset = () => {
    form.setFieldsValue(initialValues);
    setAutoAddEnabled(initialAutoAdd);
    setIsDirty(false);
  };
@@ -139,17 +185,30 @@ const NotificationSettingsForm = ({ currentUser }) => {
        title={t("notifications.labels.notificationscenarios")}
        extra={
          <Space>
-            <Button type="default" onClick={handleReset} disabled={!isDirty}>
+            <Typography.Text type="secondary">{t("notifications.labels.auto-add")}</Typography.Text>
            <Switch
              checked={autoAddEnabled}
              onChange={handleAutoAddToggle}
              loading={savingAutoAdd}
              // checkedChildren={t("notifications.labels.auto-add-on")}
              // unCheckedChildren={t("notifications.labels.auto-add-off")}
            />
            <Button type="default" onClick={handleReset} disabled={!isDirty && !isAutoAddDirty}>
              {t("general.actions.clear")}
            </Button>
-
+            <Button type="primary" htmlType="submit" disabled={!isDirty} loading={savingSettings}>
            <Button type="primary" htmlType="submit" disabled={!isDirty} loading={saving}>
              {t("notifications.labels.save")}
            </Button>
          </Space>
        }
      >
        {!isEmployee && (
          <div style={{ width: "100%", marginBottom: "10px" }}>
            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
          </div>
        )}
        <Table dataSource={dataSource} columns={columns} pagination={false} bordered rowKey="key" />
        <Divider />
      </Card>
    </Form>
  );
@@ -158,11 +217,13 @@ const NotificationSettingsForm = ({ currentUser }) => {
 NotificationSettingsForm.propTypes = {
  currentUser: PropTypes.shape({
    email: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
  bodyshop: PropTypes.object.isRequired
 };
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop
 });
 export default connect(mapStateToProps)(NotificationSettingsForm);
--- a/client/src/components/owner-detail-form/owner-detail-form.component.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.component.jsx
@@ -1,14 +1,15 @@
-import { Form, Input, Switch } from "antd";
+import { Form, Input, Tooltip } from "antd";
-import React from "react";
+import { CloseCircleFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-export default function OwnerDetailFormComponent({ form, loading }) {
+export default function OwnerDetailFormComponent({ form, loading, isPhone1OptedOut, isPhone2OptedOut }) {
  const { t } = useTranslation();
  const { getFieldValue } = form;
  return (
    <div>
      <FormFieldsChanged form={form} />
@@ -26,7 +27,7 @@ export default function OwnerDetailFormComponent({ form, loading }) {
          <Input />
        </Form.Item>
        <Form.Item label={t("owners.fields.accountingid")} name="accountingid">
-          <Input disabled/>
+          <Input disabled />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow header={t("owners.forms.address")}>
@@ -50,9 +51,6 @@ export default function OwnerDetailFormComponent({ form, loading }) {
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow header={t("owners.forms.contact")}>
        <Form.Item label={t("owners.fields.allow_text_message")} name="allow_text_message" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("owners.fields.ownr_ea")}
          name="ownr_ea"
@@ -65,19 +63,55 @@ export default function OwnerDetailFormComponent({ form, loading }) {
        >
          <FormItemEmail email={getFieldValue("ownr_ea")} />
        </Form.Item>
-        <Form.Item
+        <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
-          label={t("owners.fields.ownr_ph1")}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          name="ownr_ph1"
+            <Form.Item
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
+              name="ownr_ph1"
-        >
+              noStyle
-          <FormItemPhone />
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph1")]}
            >
              <Input style={{ flex: 1, minWidth: "150px" }} />
            </Form.Item>
            {isPhone1OptedOut && (
              <Tooltip title={t("consent.text_body")}>
                <CloseCircleFilled
                  style={{
                    color: "#ff4d4f",
                    fontSize: 16,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "100%"
                  }}
                />
              </Tooltip>
            )}
          </div>
        </Form.Item>
-        <Form.Item
+        <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
-          label={t("owners.fields.ownr_ph2")}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          name="ownr_ph2"
+            <Form.Item
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
+              name="ownr_ph2"
-        >
+              noStyle
-          <FormItemPhone />
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "ownr_ph2")]}
            >
              <Input style={{ flex: 1, minWidth: "150px" }} />
            </Form.Item>
            {isPhone2OptedOut && (
              <Tooltip title={t("consent.text_body")}>
                <CloseCircleFilled
                  style={{
                    color: "#ff4d4f",
                    fontSize: 16,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "100%"
                  }}
                />
              </Tooltip>
            )}
          </div>
        </Form.Item>
        <Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
          <Input />
--- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx
@@ -1,69 +1,115 @@
 import { Button, Form, Popconfirm } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-
+import { useEffect, useState } from "react";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useMutation } from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors"; // Adjust path
 import { phoneNumberOptOutService } from "../../utils/phoneOptOutService.js"; // Adjust path
 import OwnerDetailFormComponent from "./owner-detail-form.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { phone } from "phone"; // Import phone utility for formatting
-function OwnerDetailFormContainer({ owner, refetch }) {
+// Connect to Redux to access bodyshop
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
 function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
-  const history = useNavigate();
+  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [optedOutPhones, setOptedOutPhones] = useState(new Set());
  const [updateOwner] = useMutation(UPDATE_OWNER);
  const [deleteOwner] = useMutation(DELETE_OWNER);
  const notification = useNotification();
  const apolloClient = useApolloClient();
  // Fetch opt-out status on mount
  useEffect(() => {
    const fetchOptOutStatus = async () => {
      if (bodyshop?.id && bodyshop?.messagingservicesid && (owner?.ownr_ph1 || owner?.ownr_ph2)) {
        const phoneNumbers = [owner.ownr_ph1, owner.ownr_ph2].filter(Boolean);
        const optOutSet = await phoneNumberOptOutService(apolloClient, bodyshop.id, phoneNumbers);
        setOptedOutPhones(optOutSet);
      } else {
        setOptedOutPhones(new Set());
      }
    };
    fetchOptOutStatus();
  }, [apolloClient, bodyshop?.id, bodyshop?.messagingservicesid, owner?.ownr_ph1, owner?.ownr_ph2]);
  // Reset form fields when owner changes
  useEffect(() => {
    form.setFieldsValue({
      ownr_ph1: owner?.ownr_ph1,
      ownr_ph2: owner?.ownr_ph2,
      ...owner
    });
  }, [owner, form]);
  const handleDelete = async () => {
    setLoading(true);
-    const result = await deleteOwner({
+    try {
-      variables: { id: owner.id }
+      const result = await deleteOwner({
-    });
+        variables: { id: owner.id }
-    console.log(result);
+      });
-    if (result.errors) {
+      if (result.errors) {
-      notification["error"]({
+        notification.error({
          message: t("owners.errors.deleting", {
            error: JSON.stringify(result.errors)
          })
        });
      } else {
        notification.success({
          message: t("owners.successes.delete")
        });
        navigate(`/manage/owners`);
      }
    } catch (error) {
      notification.error({
        message: t("owners.errors.deleting", {
-          error: JSON.stringify(result.errors)
+          error: error.message
        })
      });
    } finally {
      setLoading(false);
    } else {
      notification["success"]({
        message: t("owners.successes.delete")
      });
      setLoading(false);
      history(`/manage/owners`);
    }
  };
  const handleFinish = async (values) => {
    setLoading(true);
-    const result = await updateOwner({
+    try {
-      variables: { ownerId: owner.id, owner: values }
+      const result = await updateOwner({
-    });
+        variables: { ownerId: owner.id, owner: values }
-
+      });
-    if (!!result.errors) {
+      if (result.errors) {
-      notification["error"]({
+        notification.error({
          message: t("owners.errors.saving", {
            error: JSON.stringify(result.errors)
          })
        });
      } else {
        notification.success({
          message: t("owners.successes.save")
        });
        if (refetch) await refetch();
        form.resetFields();
      }
    } catch (error) {
      notification.error({
        message: t("owners.errors.saving", {
-          error: JSON.stringify(result.errors)
+          error: error.message
        })
      });
    } finally {
      setLoading(false);
      return;
    }
    notification["success"]({
      message: t("owners.successes.save")
    });
    if (refetch) await refetch();
    form.resetFields();
    form.resetFields();
    setLoading(false);
  };
  return (
@@ -72,6 +118,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
        title={t("menus.header.owners")}
        extra={[
          <Popconfirm
            key="delete"
            trigger="click"
            onConfirm={handleDelete}
            disabled={owner.jobs.length !== 0}
@@ -81,16 +128,29 @@ function OwnerDetailFormContainer({ owner, refetch }) {
              {t("general.actions.delete")}
            </Button>
          </Popconfirm>,
-          <Button type="primary" loading={loading} onClick={() => form.submit()}>
+          <Button key="save" type="primary" loading={loading} onClick={() => form.submit()}>
            {t("general.actions.save")}
          </Button>
        ]}
      />
      <Form form={form} onFinish={handleFinish} autoComplete="off" layout="vertical" initialValues={owner}>
-        <OwnerDetailFormComponent loading={loading} form={form} />
+        <OwnerDetailFormComponent
          loading={loading}
          form={form}
          isPhone1OptedOut={
            bodyshop?.messagingservicesid &&
            owner?.ownr_ph1 &&
            optedOutPhones.has(phone(owner.ownr_ph1, "CA").phoneNumber?.replace(/^\+1/, ""))
          }
          isPhone2OptedOut={
            bodyshop?.messagingservicesid &&
            owner?.ownr_ph2 &&
            optedOutPhones.has(phone(owner.ownr_ph2, "CA").phoneNumber?.replace(/^\+1/, ""))
          }
        />
      </Form>
    </>
  );
 }
-export default OwnerDetailFormContainer;
+export default connect(mapStateToProps)(OwnerDetailFormContainer);
--- a/client/src/components/owner-find-modal/owner-find-modal.container.jsx
+++ b/client/src/components/owner-find-modal/owner-find-modal.container.jsx
@@ -1,12 +1,12 @@
 import { useLazyQuery } from "@apollo/client";
 import { Input, Modal } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import OwnerFindModalComponent from "./owner-find-modal.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import OwnerFindModalComponent from "./owner-find-modal.component";
 export default function OwnerFindModalContainer({
  loading,
@@ -41,6 +41,7 @@ export default function OwnerFindModalContainer({
    <Modal
      title={<span id="owner-find-modal-title">{t("owners.labels.existing_owners")}</span>}
      width={"80%"}
      okButtonProps={{ id: "owner-find-modal-ok-button" }}
      {...modalProps}
    >
      {loading ? <LoadingSpinner /> : null}
--- a/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx
+++ b/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx
@@ -75,7 +75,7 @@ export function PartsOrderBackorderEta({
  );
  return (
-    <Popover destroyTooltipOnHide content={popContent} open={visibility} disabled={disabled}>
+    <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
      <DateFormatter>{backordered_eta}</DateFormatter>
      {isAlreadyBackordered && <CalendarFilled style={{ cursor: "pointer" }} onClick={handlePopover} />}
      {loading && <Spin />}
--- a/client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx
+++ b/client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx
@@ -84,7 +84,7 @@ export function PartsOrderLineBackorderButton({ partsOrderStatus, partsLineId, j
  );
  return (
-    <Popover destroyTooltipOnHide content={popContent} open={visibility} disabled={disabled}>
+    <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
      <Button loading={loading} onClick={handlePopover}>
        {isAlreadyBackordered ? t("parts_orders.actions.receive") : t("parts_orders.actions.backordered")}
      </Button>
--- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.container.jsx
@@ -333,7 +333,7 @@ export function PartsOrderModalContainer({
      onOk={() => form.submit()}
      okButtonProps={{ loading: saving }}
      cancelButtonProps={{ loading: saving }}
-      destroyOnClose
+      destroyOnHidden
      width="75%"
      forceRender
    >
--- a/client/src/components/parts-queue-card/parts-queue-card.component.jsx
+++ b/client/src/components/parts-queue-card/parts-queue-card.component.jsx
@@ -46,7 +46,7 @@ export default function PartsQueueDetailCard() {
  };
  return (
-    <Drawer open={!!selected} destroyOnClose width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
+    <Drawer open={!!selected} destroyOnHidden width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
      {loading ? <LoadingSpinner /> : null}
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      {data ? (
--- a/client/src/components/parts-receive-modal/parts-receive-modal.container.jsx
+++ b/client/src/components/parts-receive-modal/parts-receive-modal.container.jsx
@@ -90,7 +90,7 @@ export function PartsReceiveModalContainer({ partsReceiveModal, toggleModalVisib
      onCancel={() => toggleModalVisible()}
      onOk={() => form.submit()}
      okButtonProps={{ loading: loading }}
-      destroyOnClose
+      destroyOnHidden
      forceRender
      width="50%"
    >
--- a/client/src/components/payment-modal/payment-modal.container.jsx
+++ b/client/src/components/payment-modal/payment-modal.container.jsx
@@ -134,7 +134,7 @@ function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop }) {
    <Modal
      title={!context || (context && !context.id) ? t("payments.labels.new") : t("payments.labels.edit")}
      open={open}
-      destroyOnClose
+      destroyOnHidden
      okText={t("general.actions.save")}
      onOk={() => form.submit()}
      width="50%"
--- a/client/src/components/phone-number-consent/phone-number-consent.component.jsx
+++ b/client/src/components/phone-number-consent/phone-number-consent.component.jsx
@@ -0,0 +1,146 @@
 import { useQuery } from "@apollo/client";
 import { Input, Table, Typography } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 const { Paragraph } = Typography;
 // Commented out Associated Owners section for now
 //import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 //import { Link } from "react-router-dom";
 //import { useMemo, useState } from "react";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser
 });
 const mapDispatchToProps = () => ({});
 function PhoneNumberConsentList({ bodyshop, currentUser }) {
  const { t } = useTranslation();
  const [search, setSearch] = useState("");
  // Fetch opt-out phone numbers
  const { loading: optOutLoading, data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
    variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined },
    fetchPolicy: "network-only"
  });
  // Commented out Associated Owners section for now
  /*// Prepare phone numbers for owner query
  const phoneNumbers = useMemo(() => {
    return optOutData?.phone_number_opt_out?.map((item) => item.phone_number) || [];
  }, [optOutData?.phone_number_opt_out]);
  const allPhoneNumbers = useMemo(() => {
    const normalized = phoneNumbers;
    const withPlusOne = phoneNumbers.map((num) => `+1${num}`);
    return [...normalized, ...withPlusOne].filter(Boolean);
  }, [phoneNumbers]);
  // Fetch owners for all phone numbers
  const { loading: ownersLoading, data: ownersData } = useQuery(SEARCH_OWNERS_BY_PHONE_NUMBERS, {
    variables: { bodyshopid: bodyshop.id, phone_numbers: allPhoneNumbers },
    skip: allPhoneNumbers.length === 0 || !bodyshop.id,
    fetchPolicy: "network-only"
  });
  // Map phone numbers to their associated owners and identify phone field
  const getAssociatedOwners = (phoneNumber) => {
    if (!ownersData?.owners) return [];
    const normalizedPhone = phoneNumber.replace(/^\+1/, "");
    return ownersData.owners
      .filter(
        (owner) =>
          owner.ownr_ph1 === phoneNumber ||
          owner.ownr_ph2 === phoneNumber ||
          owner.ownr_ph1 === normalizedPhone ||
          owner.ownr_ph2 === normalizedPhone ||
          owner.ownr_ph1 === `+1${phoneNumber}` ||
          owner.ownr_ph2 === `+1${phoneNumber}`
      )
      .map((owner) => ({
        ...owner,
        phoneField:
          [owner.ownr_ph1, owner.ownr_ph2].includes(phoneNumber) ||
          [owner.ownr_ph1, owner.ownr_ph2].includes(normalizedPhone) ||
          [owner.ownr_ph1, owner.ownr_ph2].includes(`+1${phoneNumber}`)
            ? owner.ownr_ph1 === phoneNumber ||
              owner.ownr_ph1 === normalizedPhone ||
              owner.ownr_ph1 === `+1${phoneNumber}`
              ? t("consent.phone_1")
              : t("consent.phone_2")
            : null
      }));
  };*/
  const columns = [
    {
      title: t("consent.phone_number"),
      dataIndex: "phone_number",
      render: (text) => <ChatOpenButton phone={text} />,
      sorter: (a, b) => a.phone_number.localeCompare(b.phone_number)
    },
    // Commented out Associated Owners section for now
    /*{
      title: t("consent.associated_owners"),
      dataIndex: "phone_number",
      render: (phoneNumber) => {
        const owners = getAssociatedOwners(phoneNumber);
        if (!owners || owners.length === 0) {
          return t("consent.no_owners");
        }
        return owners.map((owner) => (
          <div key={owner.id}>
            <Space direction="horizontal">
              <Link to={"/manage/owners/" + owner.id}>
                <OwnerNameDisplay ownerObject={owner} />
              </Link>
              ({owner.phoneField})
            </Space>
          </div>
        ));
      },
      sorter: (a, b) => {
        const aOwners = getAssociatedOwners(a.phone_number);
        const bOwners = getAssociatedOwners(b.phone_number);
        const aName = aOwners[0] ? `${aOwners[0].ownr_fn} ${aOwners[0].ownr_ln}` : "";
        const bName = bOwners[0] ? `${bOwners[0].ownr_fn} ${bOwners[0].ownr_ln}` : "";
        return aName.localeCompare(bName);
      }
    },*/
    {
      title: t("consent.created_at"),
      dataIndex: "created_at",
      render: (text) => <TimeAgoFormatter>{text}</TimeAgoFormatter>,
      sorter: (a, b) => new Date(a.created_at) - new Date(b.created_at)
    }
  ];
  return (
    <div>
      <Paragraph>{t("consent.text_body")}</Paragraph>
      <Input.Search
        placeholder={t("general.labels.search")}
        onSearch={(value) => setSearch(value)}
        style={{ marginBottom: 16 }}
      />
      <Table
        columns={columns}
        dataSource={optOutData?.phone_number_opt_out}
        loading={optOutLoading /* || ownersLoading*/}
        rowKey="id"
        style={{ marginTop: 16 }}
      />
    </div>
  );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(PhoneNumberConsentList);
--- a/client/src/components/print-center-modal/print-center-modal.container.jsx
+++ b/client/src/components/print-center-modal/print-center-modal.container.jsx
@@ -32,7 +32,7 @@ export function PrintCenterModalContainer({ printCenterModal, toggleModalVisible
      okText={t("general.actions.close")}
      width="90%"
      title={t("printcenter.labels.title")}
-      destroyOnClose
+      destroyOnHidden
    >
      <PrintCenterModalComponent context={context} />
    </Modal>
--- a/client/src/components/production-board-kanban/settings/FilterSettings.jsx
+++ b/client/src/components/production-board-kanban/settings/FilterSettings.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Card, Form, Select } from "antd";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 const FilterSettings = ({
  selectedMdInsCos,
--- a/client/src/components/production-board-kanban/settings/InformationSettings.jsx
+++ b/client/src/components/production-board-kanban/settings/InformationSettings.jsx
@@ -1,10 +1,9 @@
 import { Card, Checkbox, Col, Form, Row } from "antd";
 import React from "react";
 import PropTypes from "prop-types";
 const InformationSettings = ({ t }) => (
-  <Card title={t("production.settings.information")}>
+  <Card title={t("production.settings.information")} style={{ maxWidth: "100%", overflowX: "auto" }}>
-    <Row gutter={[16, 16]}>
+    <Row gutter={[16, 16]} wrap>
      {[
        "model_info",
        "ownr_nm",
@@ -21,7 +20,7 @@ const InformationSettings = ({ t }) => (
        "subtotal",
        "tasks"
      ].map((item) => (
-        <Col span={4} key={item}>
+        <Col xs={24} sm={12} md={8} lg={6} key={item}>
          <Form.Item name={item} valuePropName="checked">
            <Checkbox>{t(`production.labels.${item}`)}</Checkbox>
          </Form.Item>
--- a/client/src/components/production-board-kanban/settings/LayoutSettings.jsx
+++ b/client/src/components/production-board-kanban/settings/LayoutSettings.jsx
@@ -1,9 +1,16 @@
 import { Card, Col, Form, Radio, Row } from "antd";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
 import { HasFeatureAccess } from "../../feature-wrapper/feature-wrapper.component";
-const LayoutSettings = ({ t }) => (
+const mapStateToProps = createStructuredSelector({
-  <Card title={t("production.settings.layout")}>
+  bodyshop: selectBodyshop
 });
 const LayoutSettings = ({ t, bodyshop }) => (
  <Card title={t("production.settings.layout")} style={{ maxWidth: "100%", overflowX: "auto" }}>
    <Row gutter={[16, 16]}>
      {[
        {
@@ -31,14 +38,18 @@ const LayoutSettings = ({ t }) => (
            { value: false, label: t("production.labels.wide") }
          ]
        },
-        {
+        ...(HasFeatureAccess({ bodyshop, featureName: "smartscheduling" })
-          name: "cardcolor",
+          ? [
-          label: t("production.labels.cardcolor"),
+              {
-          options: [
+                name: "cardcolor",
-            { value: true, label: t("production.labels.on") },
+                label: t("production.labels.cardcolor"),
-            { value: false, label: t("production.labels.off") }
+                options: [
-          ]
+                  { value: true, label: t("production.labels.on") },
-        },
+                  { value: false, label: t("production.labels.off") }
                ]
              }
            ]
          : []),
        {
          name: "kiosk",
          label: t("production.labels.kiosk_mode"),
@@ -48,9 +59,9 @@ const LayoutSettings = ({ t }) => (
          ]
        }
      ].map(({ name, label, options }) => (
-        <Col span={4} key={name}>
+        <Col xs={24} sm={16} md={10} lg={8} key={name}>
          <Form.Item name={name} label={label}>
-            <Radio.Group>
+            <Radio.Group style={{ display: "flex", flexWrap: "nowrap" }}>
              {options.map((option) => (
                <Radio.Button key={option.value.toString()} value={option.value}>
                  {option.label}
@@ -68,4 +79,4 @@ LayoutSettings.propTypes = {
  t: PropTypes.func.isRequired
 };
-export default LayoutSettings;
+export default connect(mapStateToProps)(LayoutSettings);
--- a/client/src/components/production-board-kanban/settings/StatisticsSettings.jsx
+++ b/client/src/components/production-board-kanban/settings/StatisticsSettings.jsx
@@ -1,8 +1,7 @@
 import { Card, Checkbox, Form } from "antd";
 import PropTypes from "prop-types";
 import { DragDropContext, Draggable, Droppable } from "../trello-board/dnd/lib/index.js";
 import { statisticsItems } from "./defaultKanbanSettings.js";
 import { Card, Checkbox, Form } from "antd";
 import React from "react";
 import PropTypes from "prop-types";
 const StatisticsSettings = ({ t, statisticsOrder, setStatisticsOrder, setHasChanges }) => {
  const onDragEnd = (result) => {
--- a/client/src/components/production-board-kanban/settings/production-board-kanban.settings.component.jsx
+++ b/client/src/components/production-board-kanban/settings/production-board-kanban.settings.component.jsx
@@ -1,17 +1,17 @@
 import { SettingOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, Card, Col, Form, Popover, Row, Tabs } from "antd";
 import { isFunction } from "lodash";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNotification } from "../../../contexts/Notifications/notificationContext.jsx";
 import { UPDATE_KANBAN_SETTINGS } from "../../../graphql/user.queries.js";
 import { defaultKanbanSettings, mergeWithDefaults } from "./defaultKanbanSettings.js";
 import LayoutSettings from "./LayoutSettings.jsx";
 import InformationSettings from "./InformationSettings.jsx";
 import StatisticsSettings from "./StatisticsSettings.jsx";
 import FilterSettings from "./FilterSettings.jsx";
-import PropTypes from "prop-types";
+import InformationSettings from "./InformationSettings.jsx";
-import { isFunction } from "lodash";
+import LayoutSettings from "./LayoutSettings.jsx";
-import { useNotification } from "../../../contexts/Notifications/notificationContext.jsx";
+import StatisticsSettings from "./StatisticsSettings.jsx";
 import { SettingOutlined } from "@ant-design/icons";
 function ProductionBoardKanbanSettings({ associationSettings, parentLoading, bodyshop, data, onSettingsChange }) {
  const [form] = Form.useForm();
@@ -87,7 +87,7 @@ function ProductionBoardKanbanSettings({ associationSettings, parentLoading, bod
  };
  const overlay = (
-    <Card style={{ minWidth: "80vw" }}>
+    <Card style={{ maxWidth: "80vw", width: "100%"}}>
      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
        <Tabs
          defaultActiveKey="1"
--- a/client/src/components/production-board-kanban/trello-board/controllers/Board.jsx
+++ b/client/src/components/production-board-kanban/trello-board/controllers/Board.jsx
@@ -20,7 +20,7 @@ const Board = ({ id, className, orientation, cardSettings, ...additionalProps })
      default:
        return cardSizesVertical.small;
    }
-  }, [cardSettings]);
+  }, [cardSettings?.cardSize]);
  return (
    <>
--- a/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx
+++ b/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx
@@ -100,24 +100,67 @@ const BoardContainer = ({
  const onLaneDrag = useCallback(
    async ({ draggableId, type, source, reason, mode, destination, combine }) => {
      setIsDragging(false);
      setDragTime(source.droppableId);
      if (!type || type !== "lane" || !source || !destination || isEqual(source, destination)) return;
      // Validate drag type and source
      if (type !== "lane" || !source) {
        // Invalid drag type or missing source, attempt to revert if possible
        if (source) {
          dispatch(
            actions.moveCardAcrossLanes({
              fromLaneId: source.droppableId,
              toLaneId: source.droppableId,
              cardId: draggableId,
              index: source.index
            })
          );
        }
        setIsProcessing(false);
        try {
          await onDragEnd({ draggableId, type, source, reason, mode, destination, combine });
        } catch (err) {
          console.error("Error in onLaneDrag for invalid drag type or source", err);
        }
        return;
      }
      setDragTime(source.droppableId);
      setIsProcessing(true);
-      dispatch(
+      // Handle valid drop to a different lane or position
-        actions.moveCardAcrossLanes({
+      if (destination && !isEqual(source, destination)) {
-          fromLaneId: source.droppableId,
+        dispatch(
-          toLaneId: destination.droppableId,
+          actions.moveCardAcrossLanes({
-          cardId: draggableId,
+            fromLaneId: source.droppableId,
-          index: destination.index
+            toLaneId: destination.droppableId,
-        })
+            cardId: draggableId,
-      );
+            index: destination.index
          })
        );
      } else {
        // Same-lane drop or no destination, revert to original position
        dispatch(
          actions.moveCardAcrossLanes({
            fromLaneId: source.droppableId,
            toLaneId: source.droppableId,
            cardId: draggableId,
            index: source.index
          })
        );
      }
      try {
        await onDragEnd({ draggableId, type, source, reason, mode, destination, combine });
      } catch (err) {
        console.error("Error in onLaneDrag", err);
        // Ensure revert on error
        dispatch(
          actions.moveCardAcrossLanes({
            fromLaneId: source.droppableId,
            toLaneId: source.droppableId,
            cardId: draggableId,
            index: source.index
          })
        );
      } finally {
        setIsProcessing(false);
      }
--- a/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
+++ b/client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx
@@ -120,21 +120,22 @@ const Lane = ({
      const Component = orientation === "vertical" ? VirtuosoGrid : Virtuoso;
      const FinalComponent = collapsed ? "div" : Component;
      const commonProps = {
-        useWindowScroll: true,
+        data: renderedCards,
-        data: renderedCards
+        customScrollParent: laneRef.current
      };
      const verticalProps = {
        ...commonProps,
        listClassName: "grid-container",
        itemClassName: "grid-item",
        customScrollParent: laneRef.current,
        components: {
          List: ListComponent,
          Item: ItemComponent
        },
        itemContent: (index, item) => <ItemWrapper>{renderDraggable(index, item)}</ItemWrapper>,
-        overscan: { main: 10, reverse: 10 }
+        overscan: { main: 10, reverse: 10 },
        // Ensure a minimum height for empty lanes to allow dropping
        style: renderedCards.length === 0 ? { minHeight: "5px" } : {}
      };
      const horizontalProps = {
@@ -142,7 +143,6 @@ const Lane = ({
        components: { Item: HeightPreservingItem },
        overscan: { main: 3, reverse: 3 },
        itemContent: (index, item) => renderDraggable(index, item),
        scrollerRef: provided.innerRef,
        style: {
          minWidth: maxCardWidth,
          minHeight: maxLaneHeight
@@ -151,8 +151,6 @@ const Lane = ({
      const componentProps = orientation === "vertical" ? verticalProps : horizontalProps;
      // If the lane is collapsed, we want to render a div instead of the virtualized list, and we want to set the height to the max height of the lane so that
      // the lane doesn't shrink when collapsed (in horizontal mode)
      const finalComponentProps = collapsed
        ? orientation === "horizontal"
          ? {
@@ -163,9 +161,8 @@ const Lane = ({
          : {}
        : componentProps;
-      // If the lane is horizontal and collapsed, we want to render a placeholder so that the lane doesn't shrink to 0 height and grows when
+      // Always render placeholder for empty lanes in vertical mode to ensure droppable area
-      // a card is dragged over it
+      const shouldRenderPlaceholder = orientation === "vertical" ? collapsed || renderedCards.length === 0 : collapsed;
      const shouldRenderPlaceholder = orientation !== "horizontal" && (collapsed || renderedCards.length === 0);
      return (
        <HeightMemoryWrapper
@@ -180,13 +177,14 @@ const Lane = ({
          override={orientation !== "horizontal" && (collapsed || !renderedCards.length)}
        >
          <div
-            {...provided.droppableProps}
+            ref={laneRef}
-            ref={provided.innerRef}
+            style={{ height: "100%", width: "100%" }}
            className={`react-trello-lane ${collapsed ? "lane-collapsed" : ""}`}
            style={{ ...provided.droppableProps.style }}
          >
-            <FinalComponent {...finalComponentProps} />
+            <div {...provided.droppableProps} ref={provided.innerRef} style={{ ...provided.droppableProps.style }}>
-            {shouldRenderPlaceholder && provided.placeholder}
+              <FinalComponent {...finalComponentProps} />
              {shouldRenderPlaceholder && provided.placeholder}
            </div>
          </div>
        </HeightMemoryWrapper>
      );
--- a/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
@@ -140,7 +140,7 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
  if (record[type]) theEmployee = bodyshop.employees.find((e) => e.id === record[type]);
  return (
-    <Popover destroyTooltipOnHide content={popContent} open={visibility}>
+    <Popover destroyOnHidden content={popContent} open={visibility}>
      <Spin spinning={loading}>
        {record[type] ? (
          <div>
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -6,6 +6,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { QUERY_ACTIVE_EMPLOYEES, QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL } from "../../graphql/employees.queries";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { selectReportCenter } from "../../redux/modals/modals.selectors";
@@ -18,11 +19,10 @@ import EmployeeSearchSelectEmail from "../employee-search-select/employee-search
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
 import "./report-center-modal.styles.scss";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 const mapStateToProps = createStructuredSelector({
  reportCenterModal: selectReportCenter,
@@ -389,5 +389,7 @@ const restrictedReports = [
  { key: "job_costing_ro_date_detail", days: 183 },
  { key: "job_costing_ro_estimator", days: 183 },
  { key: "job_lifecycle_date_detail", days: 183 },
-  { key: "job_lifecycle_date_summary", days: 183 }
+  { key: "job_lifecycle_date_summary", days: 183 },
  { key: "customer_list", days: 183 },
  { key: "customer_list_excel", days: 183 }
 ];
--- a/client/src/components/report-center-modal/report-center-modal.container.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.container.jsx
@@ -28,7 +28,7 @@ export function ReportCenterModalContainer({ reportCenterModal, toggleModalVisib
      onOk={() => toggleModalVisible()}
      onCancel={() => toggleModalVisible()}
      cancelButtonProps={{ style: { display: "none" } }}
-      destroyOnClose
+      destroyOnHidden
      width="80%"
    >
      <RbacWrapperComponent action="shop:reportcenter">
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -209,7 +209,7 @@ export function ScheduleJobModalContainer({
      onOk={() => form.submit()}
      width={"90%"}
      maskClosable={false}
-      destroyOnClose
+      destroyOnHidden
      okButtonProps={{
        loading: loading
      }}
--- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx
+++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx
@@ -1,5 +1,5 @@
 import { Col, Row } from "antd";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
@@ -26,18 +26,18 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
      start: dayjs().startOf("month"),
      end: dayjs().endOf("month")
    },
-    pollInterval: 60000*5
+    pollInterval: 60000 * 5
  });
  const { data } = scoreboardSubscription;
  const client = useApolloClient();
-  const scoreBoardlist = (data && data.scoreboard) || [];
+  const scoreBoardlist = data?.scoreboard || [];
  const sbEntriesByDate = {};
  scoreBoardlist.forEach((i) => {
    const entryDate = i.date;
-    if (!!!sbEntriesByDate[entryDate]) {
+    if (!sbEntriesByDate[entryDate]) {
      sbEntriesByDate[entryDate] = [];
    }
    sbEntriesByDate[entryDate].push(i);
@@ -58,10 +58,9 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
        });
        appointments = data.appointments;
      }
-
+      dayjs.updateLocale(dayjs.locale(), {
      dayjs.updateLocale("ca", {
        workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays),
-        ...(appointments
+        ...(appointments?.length
          ? {
              holidays: appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY"))
            }
@@ -78,11 +77,9 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
      <Col span={24}>
        <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
      </Col>
      <Col span={24}>
        <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
      </Col>
      <Col span={24}>
        <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
      </Col>
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
@@ -106,7 +106,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
    <>
      <Modal
        open={state.open}
-        destroyOnClose
+        destroyOnHidden
        width="80%"
        closable={false}
        cancelButtonProps={{ style: { display: "none" } }}
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -1,13 +1,15 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Form, Input, InputNumber, Select, Switch, Table } from "antd";
 import { useForm } from "antd/es/form/Form";
-import dayjs from "../../utils/day";
+import queryString from "query-string";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
  CHECK_EMPLOYEE_NUMBER,
@@ -20,19 +22,17 @@ import {
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
 import queryString from "query-string";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
@@ -83,7 +83,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
          }
        }
      })
-        .then((r) => {
+        .then(() => {
          notification["success"]({
            message: t("employees.successes.save")
          });
@@ -120,13 +120,13 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
      title: t("employees.fields.vacation.start"),
      dataIndex: "start",
      key: "start",
-      render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      render: (text) => <DateFormatter>{text}</DateFormatter>
    },
    {
      title: t("employees.fields.vacation.end"),
      dataIndex: "end",
      key: "end",
-      render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      render: (text) => <DateFormatter>{text}</DateFormatter>
    },
    {
      title: t("employees.fields.vacation.length"),
@@ -210,7 +210,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                required: true
                //message: t("general.validation.required"),
              },
-              ({ getFieldValue }) => ({
+              () => ({
                async validator(rule, value) {
                  if (value) {
                    const response = await client.query({
@@ -369,8 +369,9 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                      add();
                    }}
                    style={{ width: "100%" }}
                    id="add-employee-rate-button"
                  >
-                    {t("employees.actions.newrate")}
+                    <span id="new-employee-rate">{t("employees.actions.newrate")}</span>
                  </Button>
                </Form.Item>
              </div>
@@ -383,7 +384,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
        title={() => <ShopEmployeeAddVacation employee={data && data.employees_by_pk} />}
        columns={columns}
        rowKey={"id"}
-        dataSource={data ? data.employees_by_pk.employee_vacations : []}
+        dataSource={data?.employees_by_pk?.employee_vacations ?? []}
      />
    </Card>
  );
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -1,34 +1,34 @@
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Tabs } from "antd";
-import React from "react";
+import queryString from "query-string";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import ShopInfoGeneral from "./shop-info.general.component";
 import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
 import ShopInfoLaborRates from "./shop-info.laborrates.component";
 import ShopInfoNotificationsAutoadd from "./shop-info.notifications-autoadd.component.jsx";
 import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
 import ShopInfoPartsScan from "./shop-info.parts-scan";
 import ShopInfoRbacComponent from "./shop-info.rbac.component";
 import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
 import { useLocation, useNavigate } from "react-router-dom";
 import ShopInfoTaskPresets from "./shop-info.task-presets.component";
 import queryString from "query-string";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoComponent);
@@ -41,6 +41,7 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
    names: ["CriticalPartsScanning", "Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });
  const { scenarioNotificationsOn } = useSocket();
  const { t } = useTranslation();
  const history = useNavigate();
@@ -137,14 +138,26 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
    {
      key: "intellipay",
-      label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
+      label: InstanceRenderManager({
        rome: t("bodyshop.labels.romepay"),
        imex: t("bodyshop.labels.imexpay")
      }),
      children: <ShopInfoIntellipay form={form} />
-    }
+    },
    ...(scenarioNotificationsOn
      ? [
          {
            key: "notifications_autoadd",
            label: t("bodyshop.labels.notifications.followers"),
            children: <ShopInfoNotificationsAutoadd form={form} bodyshop={bodyshop} />
          }
        ]
      : [])
  ];
  return (
    <Card
      extra={
-        <Button type="primary" loading={saveLoading} onClick={() => form.submit()}>
+        <Button type="primary" loading={saveLoading} onClick={() => form.submit()} id="shop-info-save-button">
          {t("general.actions.save")}
        </Button>
      }
--- a/client/src/components/shop-info/shop-info.consent.component.jsx
+++ b/client/src/components/shop-info/shop-info.consent.component.jsx
@@ -0,0 +1,25 @@
 import { Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import PhoneNumberConsentList from "../phone-number-consent/phone-number-consent.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({});
 function ShopInfoConsentComponent({ bodyshop }) {
  const { t } = useTranslation();
  return (
    <div>
      <Typography.Title level={4}>{t("settings.title")}</Typography.Title>
      {<PhoneNumberConsentList bodyshop={bodyshop} />}
    </div>
  );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoConsentComponent);
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -1,7 +1,6 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -15,11 +14,12 @@ import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-forma
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 // eslint-disable-next-line no-undef
 const timeZonesList = Intl.supportedValuesOf("timeZone");
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoGeneral);
@@ -144,236 +144,246 @@ export function ShopInfoGeneral({ form, bodyshop }) {
          <InputNumber min={0} />
        </Form.Item>
      </LayoutFormRow>
-      <FeatureWrapper featureName="export" noauth={() => null}>
+      <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
-        <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
+        {HasFeatureAccess({ featureName: "export", bodyshop }) && (
-          <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
+          <>
-            <Switch />
+            <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
-          </Form.Item>
+              <Switch />
-          {InstanceRenderManager({
+            </Form.Item>
-            imex: (
+            {InstanceRenderManager({
-              <Form.Item shouldUpdate noStyle>
+              imex: (
-                {() => (
+                <Form.Item shouldUpdate noStyle>
                  {() => (
                    <Form.Item
                      label={t("bodyshop.labels.qbo_usa")}
                      shouldUpdate
                      valuePropName="checked"
                      name={["accountingconfig", "qbo_usa"]}
                    >
                      <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
                    </Form.Item>
                  )}
                </Form.Item>
              )
            })}
            <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
              <Input />
            </Form.Item>
            <Form.Item
              label={t("bodyshop.labels.accountingtiers")}
              rules={[
                {
                  required: true
                  //message: t("general.validation.required"),
                }
              ]}
              name={["accountingconfig", "tiers"]}
            >
              <Radio.Group>
                <Radio value={2}>2</Radio>
                <Radio value={3}>3</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item shouldUpdate>
              {() => {
                return (
                  <Form.Item
-                    label={t("bodyshop.labels.qbo_usa")}
+                    label={t("bodyshop.labels.2tiersetup")}
                    shouldUpdate
-                    valuePropName="checked"
+                    rules={[
-                    name={["accountingconfig", "qbo_usa"]}
+                      {
                        required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
                        //message: t("general.validation.required"),
                      }
                    ]}
                    name={["accountingconfig", "twotierpref"]}
                  >
-                    <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
+                    <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
                      <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
                      <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
                    </Radio.Group>
                  </Form.Item>
-                )}
+                );
-              </Form.Item>
+              }}
-            )
+            </Form.Item>
-          })}
+            <Form.Item
-          <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
+              label={t("bodyshop.labels.printlater")}
-            <Input />
+              valuePropName="checked"
-          </Form.Item>
+              name={["accountingconfig", "printlater"]}
-          <Form.Item
+            >
-            label={t("bodyshop.labels.accountingtiers")}
+              <Switch />
-            rules={[
+            </Form.Item>
-              {
+            <Form.Item
-                required: true
+              label={t("bodyshop.labels.emaillater")}
-                //message: t("general.validation.required"),
+              valuePropName="checked"
-              }
+              name={["accountingconfig", "emaillater"]}
-            ]}
+            >
-            name={["accountingconfig", "tiers"]}
+              <Switch />
-          >
+            </Form.Item>
-            <Radio.Group>
+          </>
-              <Radio value={2}>2</Radio>
+        )}
-              <Radio value={3}>3</Radio>
+        <Form.Item
-            </Radio.Group>
+          label={t("bodyshop.fields.inhousevendorid")}
-          </Form.Item>
+          name={"inhousevendorid"}
-          <Form.Item shouldUpdate>
+          rules={[
-            {() => {
+            {
-              return (
+              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.default_adjustment_rate")}
          name={"default_adjustment_rate"}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <InputNumber min={0} precision={2} />
        </Form.Item>
        {InstanceRenderManager({
          imex: (
            <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
              <Input />
            </Form.Item>
          )
        })}
        <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
          <Input />
        </Form.Item>
        {HasFeatureAccess({ featureName: "bills", bodyshop }) && (
          <>
            {InstanceRenderManager({
              imex: (
                <Form.Item
-                  label={t("bodyshop.labels.2tiersetup")}
+                  label={t("bodyshop.fields.invoice_federal_tax_rate")}
-                  shouldUpdate
+                  name={["bill_tax_rates", "federal_tax_rate"]}
                  rules={[
                    {
-                      required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                      required: true
                      //message: t("general.validation.required"),
                    }
                  ]}
                  name={["accountingconfig", "twotierpref"]}
                >
-                  <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
+                  <InputNumber />
                    <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
                    <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
                  </Radio.Group>
                </Form.Item>
-              );
+              )
-            }}
+            })}
-          </Form.Item>
+            <Form.Item
-          <Form.Item
+              label={t("bodyshop.fields.invoice_state_tax_rate")}
-            label={t("bodyshop.labels.printlater")}
+              name={["bill_tax_rates", "state_tax_rate"]}
-            valuePropName="checked"
+              rules={[
-            name={["accountingconfig", "printlater"]}
+                {
-          >
+                  required: true
-            <Switch />
+                  //message: t("general.validation.required"),
-          </Form.Item>
+                }
-          <Form.Item
+              ]}
-            label={t("bodyshop.labels.emaillater")}
+            >
-            valuePropName="checked"
+              <InputNumber />
-            name={["accountingconfig", "emaillater"]}
+            </Form.Item>
-          >
+            <Form.Item
-            <Switch />
+              label={t("bodyshop.fields.invoice_local_tax_rate")}
-          </Form.Item>
+              name={["bill_tax_rates", "local_tax_rate"]}
-          <Form.Item
+              rules={[
-            label={t("bodyshop.fields.inhousevendorid")}
+                {
-            name={"inhousevendorid"}
+                  required: true
-            rules={[
+                  //message: t("general.validation.required"),
-              {
+                }
-                required: true
+              ]}
-                //message: t("general.validation.required"),
+            >
-              }
+              <InputNumber />
-            ]}
+            </Form.Item>
-          >
+          </>
-            <Input />
+        )}
-          </Form.Item>
+        <Form.Item
-          <Form.Item
+          name={["md_payment_types"]}
-            label={t("bodyshop.fields.default_adjustment_rate")}
+          label={t("bodyshop.fields.md_payment_types")}
-            name={"default_adjustment_rate"}
+          rules={[
-            rules={[
+            {
-              {
+              required: true,
-                required: true
+              //message: t("general.validation.required"),
-                //message: t("general.validation.required"),
+              type: "array"
-              }
+            }
-            ]}
+          ]}
-          >
+        >
-            <InputNumber min={0} precision={2} />
+          <Select mode="tags" />
-          </Form.Item>
+        </Form.Item>
-          {InstanceRenderManager({
+        <Form.Item
-            imex: (
+          name={["md_categories"]}
-              <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
+          label={t("bodyshop.fields.md_categories")}
          rules={[
            {
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
        {HasFeatureAccess({ featureName: "export", bodyshop }) && (
          <>
            <Form.Item
              name={["accountingconfig", "ReceivableCustomField1"]}
              label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
            >
              {ReceivableCustomFieldSelect}
            </Form.Item>
            <Form.Item
              name={["accountingconfig", "ReceivableCustomField2"]}
              label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
            >
              {ReceivableCustomFieldSelect}
            </Form.Item>
            <Form.Item
              name={["accountingconfig", "ReceivableCustomField3"]}
              label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
            >
              {ReceivableCustomFieldSelect}
            </Form.Item>
            <Form.Item
              name={["md_classes"]}
              label={t("bodyshop.fields.md_classes")}
              rules={[
                ({ getFieldValue }) => {
                  return {
                    required: getFieldValue("enforce_class"),
                    //message: t("general.validation.required"),
                    type: "array"
                  };
                }
              ]}
            >
              <Select mode="tags" />
            </Form.Item>
            <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
              <Switch />
            </Form.Item>
            {ClosingPeriod.treatment === "on" && (
              <Form.Item
                name={["accountingconfig", "ClosingPeriod"]}
                label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
              >
                <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
              </Form.Item>
            )}
            {ADPPayroll.treatment === "on" && (
              <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
                <Input />
              </Form.Item>
-            )
+            )}
-          })}
+            {ADPPayroll.treatment === "on" && (
-          <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
+              <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
-            <Input />
+                <Input />
          </Form.Item>
          {InstanceRenderManager({
            imex: (
              <Form.Item
                label={t("bodyshop.fields.invoice_federal_tax_rate")}
                name={["bill_tax_rates", "federal_tax_rate"]}
                rules={[
                  {
                    required: true
                    //message: t("general.validation.required"),
                  }
                ]}
              >
                <InputNumber />
              </Form.Item>
-            )
+            )}
-          })}
+          </>
-          <Form.Item
+        )}
-            label={t("bodyshop.fields.invoice_state_tax_rate")}
+      </LayoutFormRow>
            name={["bill_tax_rates", "state_tax_rate"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.invoice_local_tax_rate")}
            name={["bill_tax_rates", "local_tax_rate"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            name={["md_payment_types"]}
            label={t("bodyshop.fields.md_payment_types")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
                type: "array"
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>
          <Form.Item
            name={["md_categories"]}
            label={t("bodyshop.fields.md_categories")}
            rules={[
              {
                //message: t("general.validation.required"),
                type: "array"
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>
          <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item
            name={["accountingconfig", "ReceivableCustomField1"]}
            label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
          >
            {ReceivableCustomFieldSelect}
          </Form.Item>
          <Form.Item
            name={["accountingconfig", "ReceivableCustomField2"]}
            label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
          >
            {ReceivableCustomFieldSelect}
          </Form.Item>
          <Form.Item
            name={["accountingconfig", "ReceivableCustomField3"]}
            label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
          >
            {ReceivableCustomFieldSelect}
          </Form.Item>
          <Form.Item
            name={["md_classes"]}
            label={t("bodyshop.fields.md_classes")}
            rules={[
              ({ getFieldValue }) => {
                return {
                  required: getFieldValue("enforce_class"),
                  //message: t("general.validation.required"),
                  type: "array"
                };
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>
          {ClosingPeriod.treatment === "on" && (
            <Form.Item
              name={["accountingconfig", "ClosingPeriod"]}
              label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
            >
              <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
            </Form.Item>
          )}
          {ADPPayroll.treatment === "on" && (
            <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
              <Input />
            </Form.Item>
          )}
          {ADPPayroll.treatment === "on" && (
            <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
              <Input />
            </Form.Item>
          )}
        </LayoutFormRow>
      </FeatureWrapper>
      <FeatureWrapper featureName="scoreboard" noauth={() => null}>
        <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
          <Form.Item
@@ -823,7 +833,11 @@ export function ShopInfoGeneral({ form, bodyshop }) {
          }}
        </Form.List>
      </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.labels.insurancecos")} id="insurancecos">
+      <LayoutFormRow
        grow
        header=<span id="insurancecos-header">{t("bodyshop.labels.insurancecos")}</span>
        id="insurancecos"
      >
        <Form.List name={["md_ins_cos"]}>
          {(fields, { add, remove, move }) => {
            return (
--- a/client/src/components/shop-info/shop-info.notifications-autoadd.component.jsx
+++ b/client/src/components/shop-info/shop-info.notifications-autoadd.component.jsx
@@ -0,0 +1,57 @@
 import { Form, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component.jsx";
 const { Text, Paragraph } = Typography;
 export default function ShopInfoNotificationsAutoadd({ bodyshop }) {
  const { t } = useTranslation();
  // Filter employee options to ensure active employees with valid IDs
  const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.user_email && e.id) || [];
  return (
    <div>
      <Paragraph>{t("bodyshop.fields.notifications.description")}</Paragraph>
      <Text type="secondary">{t("bodyshop.labels.notifications.followers")}</Text>
      {employeeOptions.length > 0 ? (
        <Form.Item
          name="notification_followers"
          rules={[
            {
              type: "array",
              message: t("general.validation.array")
            },
            {
              validator: async (_, value) => {
                if (!value || value.length === 0) {
                  return Promise.resolve(); // Allow empty array
                }
                const hasInvalid = value.some((id) => id == null || typeof id !== "string" || id.trim() === "");
                if (hasInvalid) {
                  return Promise.reject(new Error(t("bodyshop.fields.notifications.invalid_followers")));
                }
                return Promise.resolve();
              }
            }
          ]}
        >
          <EmployeeSearchSelectComponent
            style={{ minWidth: "100%" }}
            mode="multiple"
            options={employeeOptions}
            placeholder={t("bodyshop.fields.notifications.placeholder")}
            showEmail={true}
            onChange={(value) => {
              // Filter out null or invalid values before passing to Form
              const cleanedValue = value?.filter((id) => id != null && typeof id === "string" && id.trim() !== "");
              return cleanedValue;
            }}
          />
        </Form.Item>
      ) : (
        <Text type="secondary">{t("bodyshop.fields.no_employees_available")}</Text>
      )}
    </div>
  );
 }
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -13,7 +13,7 @@ import { ColorPicker } from "./shop-info.rostatus.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
@@ -22,7 +22,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
  return (
    <div>
-      <LayoutFormRow>
+      <LayoutFormRow id="shopinfo-scheduling">
        <Form.Item
          label={t("bodyshop.fields.appt_length")}
          name={"appt_length"}
@@ -44,6 +44,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
              //message: t("general.validation.required"),
            }
          ]}
          id="schedule_start_time"
        >
          <TimePicker disableSeconds={true} format="HH:mm" />
        </Form.Item>
@@ -56,6 +57,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
              //message: t("general.validation.required"),
            }
          ]}
          id="schedule_end_time"
        >
          <TimePicker disableSeconds={true} format="HH:mm" />
        </Form.Item>
--- a/client/src/components/shop-sub-status/shop-sub-status.component.jsx
+++ b/client/src/components/shop-sub-status/shop-sub-status.component.jsx
@@ -16,5 +16,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopSubStatus);
 export function ShopSubStatus({ bodyshop }) {
  const { t } = useTranslation();
  const { sub_status } = bodyshop;
-  return <Result status="403" title={t(`general.labels.sub_status.${sub_status}`)} />;
+  // ‘expired’ ‘trail-expired' are the valid sub_status values
  return <Result status="403" title={t(`general.errors.sub_status.${sub_status}`)} />;
 }
--- a/client/src/components/shop-template-test-render/shop-template-test-render.component.jsx
+++ b/client/src/components/shop-template-test-render/shop-template-test-render.component.jsx
@@ -25,23 +25,6 @@ export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef, style
      emailEditorRef.current.exportHtml(async (data) => {
        try {
          // const inlineHtml = await axios.post("/render/inlinecss", {
          //   html: data.html,
          //   url: `${window.location.protocol}://${window.location.host}/`,
          // });
          // const { data: contextData } = await client.query({
          //   query: gql(query),
          //   variables: variables,
          //
          // });
          // const renderResponse = await axios.post("/render", {
          //   view: inlineHtml.data,
          //   context: { ...contextData, bodyshop: bodyshop },
          // });
          //  displayTemplateInWindowNoprint(renderResponse.data);
          setLoading(false);
        } catch (error) {
          setLoading(false);
--- a/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
+++ b/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
@@ -275,7 +275,7 @@ export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, to
        toggleModalVisible();
      }}
      okButtonProps={{ disabled: !isTouched }}
-      destroyOnClose
+      destroyOnHidden
    >
      <Form
        form={form}
--- a/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
+++ b/client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx
@@ -70,7 +70,7 @@ export function TechLookupJobsDrawer({ bodyshop, setPrintCenterContext }) {
  };
  return (
-    <Drawer open={!!selected} destroyOnClose width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
+    <Drawer open={!!selected} destroyOnHidden width={drawerPercentage} placement="right" onClose={handleDrawerClose}>
      {loading ? <LoadingSpinner /> : null}
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      {data ? (
--- a/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx
+++ b/client/src/components/time-ticket-calculator/time-ticket-calculator.component.jsx
@@ -107,7 +107,7 @@ export default function TimeTicketCalculatorComponent({
      open={visible}
      onOpenChange={handleOpenChange}
      placement="right"
-      destroyTooltipOnHide
+      destroyOnHidden
    >
      <Button onClick={(e) => e.preventDefault()}>
        <Space>
--- a/client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx
@@ -39,7 +39,7 @@ export function TimeTicketListTeamPay({ bodyshop, context, actions }) {
  return (
    <>
-      <Modal width={"80%"} open={visible} destroyOnClose onOk={handleOk} onCancel={() => setVisible(false)}>
+      <Modal width={"80%"} open={visible} destroyOnHidden onOk={handleOk} onCancel={() => setVisible(false)}>
        <Form layout="vertical" form={form} initialValues={{ jobid: jobId }}>
          <LayoutFormRow grow noDivider>
            <Form.Item shouldUpdate>
--- a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
@@ -181,7 +181,7 @@ export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible,
          )}
        </Space>
      }
-      destroyOnClose
+      destroyOnHidden
      id="time-ticket-modal"
    >
      <Form
--- a/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
+++ b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx
@@ -119,7 +119,7 @@ export function TimeTickeTaskModalContainer({
  return (
    <Modal
-      destroyOnClose
+      destroyOnHidden
      open={open}
      onCancel={() => {
        toggleModalVisible();
--- a/client/src/components/update-alert/update-alert.component.jsx
+++ b/client/src/components/update-alert/update-alert.component.jsx
@@ -113,7 +113,7 @@ export function UpdateAlert({ updateAvailable }) {
          </Col>
          <Col sm={24} md={8} lg={6}>
            <Space wrap>
-              <Button onClick={() => window.open("https://imex-online.noticeable.news/", "_blank")}>
+              <Button onClick={() => window.open("https://shopmanagement.canny.io/changelog", "_blank")}>
                {i18n.t("general.actions.viewreleasenotes")}
              </Button>
              <Button loading={loading} type="primary" onClick={() => ReloadNewVersion()}>
--- a/client/src/contexts/SocketIO/socketProvider.jsx
+++ b/client/src/contexts/SocketIO/socketProvider.jsx
@@ -16,7 +16,7 @@ import {
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { SocketContext, INITIAL_NOTIFICATIONS } from "./useSocket.js";
+import { INITIAL_NOTIFICATIONS, SocketContext } from "./useSocket.js";
 /**
 * Socket Provider - Scenario Notifications / Web Socket related items
@@ -157,7 +157,10 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
        auth: { token, bodyshopId: bodyshop.id },
        reconnectionAttempts: Infinity,
        reconnectionDelay: 2000,
-        reconnectionDelayMax: 10000
+        reconnectionDelayMax: 60000,
        randomizationFactor: 0.5,
        transports: ["websocket", "polling"], // Add this to prefer WebSocket with polling fallback
        rememberUpgrade: true
      });
      socketRef.current = socketInstance;
--- a/client/src/graphql/bodyshop.queries.js
+++ b/client/src/graphql/bodyshop.queries.js
@@ -141,6 +141,7 @@ export const QUERY_BODYSHOP = gql`
      use_paint_scale_data
      intellipay_config
      md_ro_guard
      notification_followers
      employee_teams(order_by: { name: asc }, where: { active: { _eq: true } }) {
        id
        name
@@ -271,6 +272,7 @@ export const UPDATE_SHOP = gql`
        md_tasks_presets
        intellipay_config
        md_ro_guard
        notification_followers
        employee_teams(order_by: { name: asc }, where: { active: { _eq: true } }) {
          id
          name
@@ -310,7 +312,6 @@ export const QUERY_INTAKE_CHECKLIST = gql`
      intakechecklist
      status
      owner {
        allow_text_message
        id
      }
      labhrs: joblines_aggregate(where: { _and: [{ mod_lbr_ty: { _neq: "LAR" } }, { removed: { _eq: false } }] }) {
--- a/client/src/graphql/conversations.queries.js
+++ b/client/src/graphql/conversations.queries.js
@@ -43,6 +43,7 @@ export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
      id
      status
      text
      is_system
      isoutbound
      image
      image_path
@@ -77,6 +78,7 @@ export const GET_CONVERSATION_DETAILS = gql`
        id
        status
        text
        is_system
        isoutbound
        image
        image_path
--- a/Show More
+++ b/Show More