IO-3239 Additional logging fixes.

IO-3239 QBO Logging and integration log schema changes.
Merged in release/2025-06-02 (pull request #2330 )
2025-05-28 15:21:42 -07:00 · 2025-05-22 11:54:17 -07:00 · 2025-05-22 16:46:27 +00:00 · 2025-05-22 11:37:47 -04:00 · 2025-05-22 15:13:34 +00:00 · 2025-05-22 15:13:03 +00:00
257 changed files with 13165 additions and 8946 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -121,3 +121,12 @@ logs/oAuthClient-log.log
 /*.env.*
 .idea/*
 .idea
+
+# Vitest
+vitest-report*/ 
+vitest-coverage/
+*.vitest.log
+test-output.txt
+server/job/test/fixtures
+
+.github
--- a/3
+++ b/3
@@ -56,4 +56,5 @@ COPY . .
 EXPOSE 4000 9229

 # Start the application
-CMD ["nodemon", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]
+RUN echo "Starting the application..."
+CMD ["nodemon", "--ignore", "./server/job/test/fixtures", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]
--- a/_reference/localEmailViewer/package-lock.json
+++ b/_reference/localEmailViewer/package-lock.json
--- a/_reference/localEmailViewer/package.json
+++ b/_reference/localEmailViewer/package.json
@@ -11,8 +11,8 @@
  "license": "ISC",
  "description": "",
  "dependencies": {
-    "express": "^4.21.1",
-    "mailparser": "^3.7.1",
+    "express": "^5.1.0",
+    "mailparser": "^3.7.2",
    "node-fetch": "^3.3.2"
  }
 }
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
--- a/client/.env.development.imex
+++ b/client/.env.development.imex
@@ -12,3 +12,5 @@ VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"
--- a/client/.env.development.rome
+++ b/client/.env.development.rome
@@ -14,3 +14,5 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA
 VITE_APP_INSTANCE=ROME
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -1,3 +1,14 @@
+# Vitest
+vitest-report*/ 
+vitest-coverage/
+*.vitest.log
+test-output.txt
+
+# Playwright
+playwright-report/
+test-results/
+playwright/.cache/
+*.playwright.log

 # Sentry Config File
 .sentryclirc
--- a/client/index.html
+++ b/client/index.html
@@ -74,50 +74,8 @@
      })();
    </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 || []);
+    <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 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
@@ -8,26 +8,25 @@
  "private": true,
  "proxy": "http://localhost:4000",
  "dependencies": {
-    "@ant-design/pro-layout": "^7.22.3",
-    "@apollo/client": "^3.13.5",
+    "@ant-design/pro-layout": "^7.22.4",
+    "@apollo/client": "^3.13.6",
    "@emotion/is-prop-valid": "^1.3.1",
    "@fingerprintjs/fingerprintjs": "^4.6.1",
-    "@firebase/analytics": "^0.10.12",
-    "@firebase/app": "^0.11.3",
-    "@firebase/auth": "^1.9.1",
-    "@firebase/firestore": "^4.7.10",
-    "@firebase/messaging": "^0.12.17",
+    "@firebase/analytics": "^0.10.16",
+    "@firebase/app": "^0.13.0",
+    "@firebase/auth": "^1.10.5",
+    "@firebase/firestore": "^4.7.15",
+    "@firebase/messaging": "^0.12.21",
    "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.6.1",
-    "@sentry/cli": "^2.42.4",
-    "@sentry/react": "^9.9.0",
-    "@sentry/vite-plugin": "^3.2.2",
-    "@splitsoftware/splitio-react": "^2.0.1",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@sentry/cli": "^2.45.0",
+    "@sentry/react": "^9.22.0",
+    "@sentry/vite-plugin": "^3.5.0",
+    "@splitsoftware/splitio-react": "^2.1.1",
    "@tanem/react-nprogress": "^5.0.53",
-    "@vitejs/plugin-react": "^4.3.4",
-    "antd": "^5.24.5",
+    "antd": "^5.25.2",
    "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",
@@ -38,18 +37,18 @@
    "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.8",
    "logrocket": "^9.0.2",
    "markerjs2": "^2.32.4",
    "memoize-one": "^6.0.0",
    "normalize-url": "^8.0.1",
    "object-hash": "^3.0.0",
    "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",
@@ -70,17 +69,17 @@
    "react-resizable": "^3.0.5",
    "react-router-dom": "^6.30.0",
    "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.12.5",
-    "recharts": "^2.15.0",
+    "react-virtuoso": "^4.12.7",
+    "recharts": "^2.15.2",
    "redux": "^5.0.1",
    "redux-actions": "^3.0.3",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.3.0",
    "redux-state-sync": "^3.1.4",
    "reselect": "^5.1.1",
-    "sass": "^1.86.0",
+    "sass": "^1.89.0",
    "socket.io-client": "^4.8.1",
-    "styled-components": "^6.1.16",
+    "styled-components": "^6.1.18",
    "subscriptions-transport-ws": "^0.11.0",
    "use-memo-one": "^1.1.3",
    "vite-plugin-ejs": "^1.7.0",
@@ -100,7 +99,14 @@
    "build:production:imex": "env-cmd -f .env.production.imex npm run build",
    "build:production:rome": "env-cmd -f .env.production.rome npm run build",
    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
-    "eulaize": "node src/utils/eulaize.js"
+    "eulaize": "node src/utils/eulaize.js",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e:imex": "playwright test --config playwright.config.js",
+    "test:e2e:rome": "playwright test --config playwright.rome.config.js",
+    "test:e2e:imex:headed": "playwright test --config playwright.config.js --headed",
+    "test:e2e:rome:headed": "playwright test --config playwright.rome.config.js --headed",
+    "test:e2e:report": "playwright show-report"
  },
  "browserslist": {
    "production": [
@@ -123,30 +129,38 @@
  "devDependencies": {
    "@ant-design/icons": "^6.0.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.26.3",
-    "@dotenvx/dotenvx": "^1.39.0",
+    "@babel/preset-react": "^7.27.1",
+    "@dotenvx/dotenvx": "^1.44.1",
    "@emotion/babel-plugin": "^11.13.5",
    "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.23.0",
-    "@sentry/webpack-plugin": "^3.2.2",
-    "browserslist": "^4.24.4",
+    "@eslint/js": "^9.27.0",
+    "@playwright/test": "^1.51.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",
+    "browserslist": "^4.24.5",
    "browserslist-to-esbuild": "^2.1.1",
    "chalk": "^5.4.1",
    "eslint": "^8.57.1",
    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
    "globals": "^15.15.0",
-    "memfs": "^4.17.0",
+    "jsdom": "^26.0.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.3",
-    "vite-plugin-babel": "^1.3.0",
+    "vite": "^6.3.5",
+    "vite-plugin-babel": "^1.3.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-node-polyfills": "^0.23.0",
-    "vite-plugin-pwa": "^0.21.2",
+    "vite-plugin-pwa": "^1.0.0",
    "vite-plugin-style-import": "^2.0.0",
+    "vitest": "^3.1.4",
    "workbox-window": "^7.3.0"
  }
 }
--- a/client/playwright.config.js
+++ b/client/playwright.config.js
@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config({
+  path: "./.env.development.imex",
+  prefix: "TEST_"
+});
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  testMatch: "*.e2e.js",
+  timeout: 60 * 1000,
+  reporter: [["list"], ["html"]],
+  use: {
+    baseURL: "https://localhost:3000",
+    browser: "chromium",
+    ignoreHTTPSErrors: true
+  },
+  webServer: {
+    command: "npm run start:imex",
+    ignoreHTTPSErrors: true,
+    url: "https://localhost:3000/health", // Health check endpoint will tell us when the server is ready
+    reuseExistingServer: !process.env.CI // Reuse server locally, not in CI
+  }
+});
--- a/client/playwright.rome.config.js
+++ b/client/playwright.rome.config.js
@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config({
+  path: "./.env.development.rome",
+  prefix: "TEST_"
+});
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  testMatch: "*.e2e.js",
+  timeout: 60 * 1000,
+  reporter: [["list"], ["html"]],
+  use: {
+    baseURL: "https://localhost:3000",
+    browser: "chromium",
+    ignoreHTTPSErrors: true
+  },
+  webServer: {
+    command: "npm run start:rome",
+    ignoreHTTPSErrors: true,
+    url: "https://localhost:3000/health", // Health check endpoint will tell us when the server is ready
+    reuseExistingServer: !process.env.CI // Reuse server locally, not in CI
+  }
+});
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -10,6 +10,7 @@ import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
 import themeProvider from "./themeProvider";
+import { CookiesProvider } from "react-cookie";

 // Base Split configuration
 const config = {
@@ -38,26 +39,28 @@ function AppContainer() {
  const { t } = useTranslation();

  return (
-    <ApolloProvider client={client}>
-      <ConfigProvider
-        input={{ autoComplete: "new-password" }}
-        locale={enLocale}
-        theme={themeProvider}
-        form={{
-          validateMessages: {
-            // eslint-disable-next-line no-template-curly-in-string
-            required: t("general.validation.required", { label: "${label}" })
-          }
-        }}
-      >
-        <GlobalLoadingBar />
-        <SplitFactoryProvider config={config}>
-          <SplitClientProvider>
-            <App />
-          </SplitClientProvider>
-        </SplitFactoryProvider>
-      </ConfigProvider>
-    </ApolloProvider>
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={{ autoComplete: "new-password" }}
+          locale={enLocale}
+          theme={themeProvider}
+          form={{
+            validateMessages: {
+              // eslint-disable-next-line no-template-curly-in-string
+              required: t("general.validation.required", { label: "${label}" })
+            }
+          }}
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
  );
 }

--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -21,8 +21,8 @@ import "./App.styles.scss";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
-import { SocketProvider } from "../contexts/SocketIO/useSocket.jsx";
 import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";
+import SocketProvider from "../contexts/SocketIO/socketProvider.jsx";

 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -142,11 +142,10 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
    >
      <ProductFruitsWrapper
        currentUser={currentUser}
-        workspaceCode={InstanceRenderMgr({
-          imex: null,
-          rome: "9BkbEseqNqxw8jUH"
-        })}
+        bodyshop={bodyshop}
+        workspaceCode={bodyshop?.tours_enabled ? "9BkbEseqNqxw8jUH" : ""}
      />
+
      <NotificationProvider>
        <Routes>
          <Route
--- a/client/src/App/ProductFruitsWrapper.jsx
+++ b/client/src/App/ProductFruitsWrapper.jsx
@@ -1,8 +1,16 @@
 import React from "react";
-import { ProductFruits } from "react-product-fruits";
 import PropTypes from "prop-types";
+import { ProductFruits } from "react-product-fruits";
+import dayjs from "dayjs";
+
+const ProductFruitsWrapper = React.memo(({ currentUser, bodyshop, workspaceCode }) => {
+  const featureProps = bodyshop?.features
+    ? Object.entries(bodyshop.features).reduce((acc, [key, value]) => {
+        acc[key] = value === true || (typeof value === "string" && dayjs(value).isAfter(dayjs()));
+        return acc;
+      }, {})
+    : {};

-const ProductFruitsWrapper = React.memo(({ currentUser, workspaceCode }) => {
  return (
    workspaceCode &&
    currentUser?.authorized === true &&
@@ -14,7 +22,8 @@ const ProductFruitsWrapper = React.memo(({ currentUser, workspaceCode }) => {
        language="en"
        user={{
          email: currentUser.email,
-          username: currentUser.email
+          username: currentUser.email,
+          props: featureProps
        }}
      />
    )
@@ -28,5 +37,6 @@ ProductFruitsWrapper.propTypes = {
    authorized: PropTypes.bool,
    email: PropTypes.string
  }),
-  workspaceCode: PropTypes.string
+  workspaceCode: PropTypes.string,
+  bodyshop: PropTypes.object
 };
--- a/client/src/components/alert/snapshots/alert.component.test.js.snap
+++ b/client/src/components/alert/snapshots/alert.component.test.js.snap
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Alert component should render Alert component 1`] = `ShallowWrapper {}`;
--- a/client/src/components/alert/alert.component.test.js
+++ b/client/src/components/alert/alert.component.test.js
@@ -1,19 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import Alert from "./alert.component";
-
-describe("Alert component", () => {
-  let wrapper;
-  beforeEach(() => {
-    const mockProps = {
-      type: "error",
-      message: "Test error message."
-    };
-
-    wrapper = shallow(<Alert {...mockProps} />);
-  });
-
-  it("should render Alert component", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-});
--- a/client/src/components/alert/alert.component.test.jsx
+++ b/client/src/components/alert/alert.component.test.jsx
@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import AlertComponent from "./alert.component";
+
+describe("AlertComponent", () => {
+  it("renders with default props", () => {
+    render(<AlertComponent message="Default Alert" />);
+    expect(screen.getByText("Default Alert")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass("ant-alert");
+  });
+
+  it("applies type prop correctly", () => {
+    render(<AlertComponent message="Success Alert" type="success" />);
+    const alert = screen.getByRole("alert");
+    expect(screen.getByText("Success Alert")).toBeInTheDocument();
+    expect(alert).toHaveClass("ant-alert-success");
+  });
+
+  it("displays description when provided", () => {
+    render(<AlertComponent message="Error Alert" description="Something went wrong" type="error" />);
+    expect(screen.getByText("Error Alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass("ant-alert-error");
+  });
+
+  it("is closable and shows icon when props are set", () => {
+    render(<AlertComponent message="Warning Alert" type="warning" showIcon closable />);
+    expect(screen.getByText("Warning Alert")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument(); // Close button
+  });
+});
--- a/client/src/components/allocations-assignment/snapshots/allocations-assignment.component.test.js.snap
+++ b/client/src/components/allocations-assignment/snapshots/allocations-assignment.component.test.js.snap
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AllocationsAssignmentComponent component should create an allocation on save 1`] = `ReactWrapper {}`;
-
-exports[`AllocationsAssignmentComponent component should render AllocationsAssignmentComponent component 1`] = `ReactWrapper {}`;
--- a/client/src/components/allocations-assignment/allocations-assignment.component.test.js
+++ b/client/src/components/allocations-assignment/allocations-assignment.component.test.js
@@ -1,35 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import { MockBodyshop } from "../../utils/TestingHelpers";
-import { AllocationsAssignmentComponent } from "./allocations-assignment.component";
-
-describe("AllocationsAssignmentComponent component", () => {
-  let wrapper;
-
-  beforeEach(() => {
-    const mockProps = {
-      bodyshop: MockBodyshop,
-      handleAssignment: jest.fn(),
-      assignment: {},
-      setAssignment: jest.fn(),
-      visibilityState: [false, jest.fn()],
-      maxHours: 4
-    };
-
-    wrapper = mount(<AllocationsAssignmentComponent {...mockProps} />);
-  });
-
-  it("should render AllocationsAssignmentComponent component", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should render a list of employees", () => {
-    const empList = wrapper.find("#employeeSelector");
-    expect(empList.children()).to.have.lengthOf(2);
-  });
-
-  it("should create an allocation on save", () => {
-    wrapper.find("Button").simulate("click");
-    expect(wrapper).toMatchSnapshot();
-  });
-});
--- 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" })),
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  setPartsOrderContext: (context) =>
+    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
@@ -412,7 +412,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
          )}
        </Space>
      }
-      destroyOnClose
+      destroyOnHidden
    >
      <Form
        onFinish={handleFinish}
--- 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/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
@@ -3,11 +3,11 @@ import { getToken } from "@firebase/messaging";
 import axios from "axios";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 export function ChatAffixContainer({ bodyshop, chatVisible }) {
  const { t } = useTranslation();
@@ -34,16 +34,14 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {

    SubscribeToTopicForFCMNotification();

-    //Register WS handlers
+    // Register WebSocket handlers
    if (socket && socket.connected) {
      registerMessagingHandlers({ socket, client });
-    }

-    return () => {
-      if (socket && socket.connected) {
+      return () => {
        unregisterMessagingHandlers({ socket });
-      }
-    };
+      };
+    }
  }, [bodyshop, socket, t, client]);

  if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
--- a/client/src/components/chat-archive-button/chat-archive-button.component.jsx
+++ b/client/src/components/chat-archive-button/chat-archive-button.component.jsx
@@ -3,10 +3,10 @@ import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
--- 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 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";
@@ -10,35 +10,60 @@ import PhoneFormatter from "../../utils/PhoneFormatter";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
 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 }) {
-  // That comma is there for a reason, do not remove it
+function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
+  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
-    }, 60000); // 1 minute in milliseconds
-
-    return () => clearInterval(interval); // Cleanup on unmount
+      forceUpdate((prev) => !prev);
+    }, 60000);
+    return () => clearInterval(interval);
  }, []);

-  // Memoize the sorted conversation list
-  const sortedConversationList = React.useMemo(() => {
+  const sortedConversationList = 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 +85,12 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
      </>
    );

-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
+    const cardExtra = (
+      <>
+        <Badge count={item.messages_aggregate.aggregate.count} />
+        {hasOptOutEntry && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
+      </>
+    );

    const getCardStyle = () =>
      item.id === selectedConversation
@@ -73,9 +103,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}>
-          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
-          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
+          <div
+            style={{
+              display: "inline-block",
+              width: "70%",
+              textAlign: "left"
+            }}
+          >
+            {cardContentLeft}
+          </div>
+          <div
+            style={{
+              display: "inline-block",
+              width: "30%",
+              textAlign: "right"
+            }}
+          >
+            {cardContentRight}
+          </div>
        </Card>
      </List.Item>
    );
@@ -85,7 +131,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-title-tags/chat-conversation-title-tags.component.jsx
+++ b/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
@@ -4,10 +4,10 @@ import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/client/src/components/chat-conversation/chat-conversation.container.jsx
@@ -3,11 +3,11 @@ import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
--- a/client/src/components/chat-label/chat-label.component.jsx
+++ b/client/src/components/chat-label/chat-label.component.jsx
@@ -4,11 +4,11 @@ import { Input, Spin, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
--- a/client/src/components/chat-media-selector/chat-media-selector.component.jsx
+++ b/client/src/components/chat-media-selector/chat-media-selector.component.jsx
@@ -37,7 +37,7 @@ 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] && conversation.job_conversations[0]?.jobid
    },

    skip: !open || !conversation.job_conversations || conversation.job_conversations.length === 0
@@ -67,14 +67,14 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
        <>
          {!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] && 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] && conversation.job_conversations[0]?.jobid}
            />
          )}
        </>
--- a/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
+++ b/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -7,7 +7,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -12,9 +12,9 @@ import ChatConversationListComponent from "../chat-conversation-list/chat-conver
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";

 import "./chat-popup.styles.scss";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
--- 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,5 +1,5 @@
 import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
-import { Input, Spin } from "antd";
+import { Alert, Input, Spin } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -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(
@@ -57,6 +69,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi

  return (
    <div className="imex-flex-row" style={{ width: "100%" }}>
+      {isOptedOut && <Alert message={t("messaging.errors.no_consent")} type="warning" style={{ marginBottom: 8 }} />}
      <ChatPresetsComponent className="imex-flex-row__margin" />
      <ChatMediaSelector
        conversation={conversation}
@@ -71,18 +84,18 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
          ref={inputArea}
          autoSize={{ minRows: 1, maxRows: 4 }}
          value={message}
-          disabled={isSending}
+          disabled={isSending || isOptedOut}
          placeholder={t("messaging.labels.typeamessage")}
          onChange={(e) => setMessage(e.target.value)}
          onPressEnter={(event) => {
            event.preventDefault();
-            if (!!!event.shiftKey) handleEnter();
+            if (!event.shiftKey && !isOptedOut) handleEnter();
          }}
        />
      </span>
      <SendOutlined
        className="chat-send-message-button"
-        //  disabled={message === "" || !message}
+        disabled={isOptedOut || message === "" || !message}
        onClick={handleEnter}
      />
      <Spin
--- a/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
@@ -8,10 +8,10 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import { SEARCH_FOR_JOBS } from "../../graphql/jobs.queries";
 import ChatTagRo from "./chat-tag-ro.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
--- 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>
-                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
-
-                <Tag color="green">
+              <Space size="small">
+                {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
+                <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
                  {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
@@ -20,6 +20,7 @@ function FeatureWrapper({
  children,
  upsellComponent,
  bypass,
+  // eslint-disable-next-line no-unused-vars
  ...restProps
 }) {
  const { t } = useTranslation();
@@ -78,7 +79,12 @@ export function HasFeatureAccess({ featureName, bodyshop, bypass, debug = false
    }
    return true;
  }
-  return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
+  return (
+    bodyshop?.features?.allAccess ||
+    (typeof bodyshop?.features?.[featureName] === "boolean"
+      ? bodyshop?.features?.[featureName]
+      : dayjs(bodyshop?.features?.[featureName]).isAfter(dayjs()))
+  );
 }

 export default connect(mapStateToProps, null)(FeatureWrapper);
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -40,7 +40,6 @@ 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.jsx";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -51,6 +50,8 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 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";
+import { useIsEmployee } from "../../utils/useIsEmployee.js";

 // Redux mappings
 const mapStateToProps = createStructuredSelector({
@@ -98,6 +99,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,
@@ -682,7 +684,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
@@ -1,5 +1,5 @@
 import { AlertFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import queryString from "query-string";
@@ -8,24 +8,30 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
+import { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
+import { HasFeatureAccess } from "./../feature-wrapper/feature-wrapper.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -33,7 +39,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
-  setMessage: (text) => dispatch(setMessage(text))
+  setMessage: (text) => dispatch(setMessage(text)),
+  insertAuditTrail: ({ jobid, operation }) => dispatch(insertAuditTrail({ jobid, operation }))
 });

 export function ScheduleEventComponent({
@@ -43,16 +50,42 @@ export function ScheduleEventComponent({
  event,
  refetch,
  handleCancel,
-  setScheduleContext
+  setScheduleContext,
+  insertAuditTrail
 }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const history = useNavigate();
  const searchParams = queryString.parse(useLocation().search);
  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const [mutationUpdateJob] = useMutation(JOB_PRODUCTION_TOGGLE);
  const [title, setTitle] = useState(event.title);
  const { socket } = useSocket();
  const notification = useNotification();
+  const [form] = Form.useForm();
+  const [popOverVisible, setPopOverVisible] = useState(false);
+
+  const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
+    variables: { id: event.job?.id },
+    onCompleted: (data) => {
+      if (data?.jobs_by_pk) {
+        const totalHours =
+          (data.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) +
+          (data.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0);
+        form.setFieldsValue({
+          actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
+          scheduled_completion: data.jobs_by_pk.scheduled_completion
+            ? data.jobs_by_pk.scheduled_completion
+            : totalHours && bodyshop.ss_configuration.nobusinessdays
+              ? dayjs().businessDaysAdd(totalHours / (bodyshop.target_touchtime || 1), "day")
+              : dayjs().add(totalHours / (bodyshop.target_touchtime || 1), "day"),
+          scheduled_delivery: data.jobs_by_pk.scheduled_delivery
+        });
+      }
+    },
+
+    fetchPolicy: "network-only"
+  });

  const blockContent = (
    <Space direction="vertical" wrap>
@@ -89,6 +122,74 @@ export function ScheduleEventComponent({
    </Space>
  );

+  const handleConvert = async (values) => {
+    const res = await mutationUpdateJob({
+      variables: {
+        jobId: event.job.id,
+        job: {
+          ...values,
+          status: bodyshop.md_ro_statuses.default_arrived,
+          inproduction: true
+        }
+      }
+    });
+
+    if (!res.errors) {
+      notification["success"]({
+        message: t("jobs.successes.converted")
+      });
+      insertAuditTrail({
+        jobid: event.job.id,
+        operation: AuditTrailMapping.jobintake(
+          res.data.update_jobs.returning[0].status,
+          DateTimeFormatterFunction(values.scheduled_completion)
+        )
+      });
+      setPopOverVisible(false);
+      refetch();
+    }
+  };
+
+  const popMenu = (
+    <div onClick={(e) => e.stopPropagation()}>
+      <Form layout="vertical" form={form} onFinish={handleConvert}>
+        <Form.Item
+          name={["actual_in"]}
+          label={t("jobs.fields.actual_in")}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+        >
+          <FormDateTimePickerComponent disabled={event.ro_number} />
+        </Form.Item>
+        <Form.Item
+          name={["scheduled_completion"]}
+          label={t("jobs.fields.scheduled_completion")}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+        >
+          <FormDateTimePickerComponent disabled={event.ro_number} />
+        </Form.Item>
+        <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
+          <FormDateTimePickerComponent disabled={event.ro_number} />
+        </Form.Item>
+
+        <Space wrap>
+          <Button type="primary" onClick={() => form.submit()}>
+            {t("general.actions.save")}
+          </Button>
+        </Space>
+      </Form>
+    </div>
+  );
+
  const popoverContent = (
    <div style={{ maxWidth: "40vw" }}>
      {!event.isintake ? (
@@ -294,7 +395,7 @@ export function ScheduleEventComponent({
        ) : (
          <ScheduleManualEvent event={event} />
        )}
-        {event.isintake ? (
+        {event.isintake && HasFeatureAccess({ featureName: "checklist", bodyshop }) ? (
          <Link
            to={{
              pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
@@ -303,7 +404,23 @@ export function ScheduleEventComponent({
          >
            <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
          </Link>
-        ) : null}
+        ) : (
+          <Popover //open={open}
+            content={popMenu}
+            open={popOverVisible}
+            onOpenChange={setPopOverVisible}
+            onClick={(e) => {
+              if (event.job?.id) {
+                e.stopPropagation();
+                getJobDetails();
+              }
+            }}
+            getPopupContainer={(trigger) => trigger.parentNode}
+            trigger="click"
+          >
+            <Button disabled={event.arrived}>{t("jobs.actions.intake_quick")}</Button>
+          </Popover>
+        )}
      </Space>
    </div>
  );
--- 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
@@ -6,7 +6,8 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";
@@ -31,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({
@@ -86,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-reconciliation-modal/job-reconciliation-modal.component.jsx
+++ b/client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx
@@ -1,9 +1,9 @@
 import { Col, Row } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobReconciliationBillsTable from "../job-reconciliation-bills-table/job-reconciliation-bills-table.component";
 import JobReconciliationPartsTable from "../job-reconciliation-parts-table/job-reconciliation-parts-table.component";
 import JobReconciliationTotals from "../job-reconciliation-totals/job-reconciliation-totals.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";

 export default function JobReconciliationModalComponent({ job, bills }) {
  const jobLineState = useState([]);
@@ -20,7 +20,7 @@ export default function JobReconciliationModalComponent({ job, bills }) {

  const filterFunction = InstanceRenderManager({
    imex: (j) =>
-      (j.part_type !== null && j.part_type !== "PAE") ||
+      (j.part_type !== null && j.part_type !== "PAE" && j.act_price !== 0 && j.part_qty !== 0) ||
      (j.line_desc && j.line_desc.toLowerCase().includes("towing") && j.lbr_op === "OP13") ||
      j.db_ref === "936004", //ADD SHIPPING LINE.
    rome: (j) =>
--- 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
-              type={isWatching ? "primary" : "default"}
-              danger={!isWatching}
-              icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
-              size="medium"
-              onClick={handleToggleSelf}
-              loading={adding || removing}
-            >
-              {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")}
-            </Button>
+            <Tooltip title={!isEmployee ? t("notifications.tooltips.not-employee") : ""} placement="top">
+              <span>
+                <Button
+                  type={isWatching ? "primary" : "default"}
+                  danger={!isWatching}
+                  icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
+                  size="medium"
+                  onClick={handleToggleSelf}
+                  loading={adding || removing}
+                  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) =>
-            jobWatchers.every((w) => w.user_email !== e.user_email && e.active && e.user_email)
+          bodyshop?.employees?.filter(
+            (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 jobid = job.id;
-
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
  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-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-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
-                label={t("jobs.fields.actual_completion")}
-                name="actual_completion"
-                rules={[
-                  {
-                    required: jobInPostProduction
-                  }
-                ]}
-              >
-                <DateTimePicker disabled={jobRO} />
-              </Form.Item>
-            );
-          }}
+          {() => (
+            <Form.Item
+              label={t("jobs.fields.actual_completion")}
+              name="actual_completion"
+              rules={[{ required: jobInPostProduction }]}
+            >
+              <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,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.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";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -133,6 +133,16 @@ export function JobsDetailHeaderActions({
  const { socket } = useSocket();
  const notification = useNotification();

+  const isDevEnv = import.meta.env.DEV;
+  const isProdEnv = import.meta.env.PROD;
+  const userEmail = currentUser?.email || "";
+
+  const devEmails = ["imex.dev", "rome.dev"];
+  const prodEmails = ["imex.prod", "rome.prod", "imex.test", "rome.test"];
+
+  const hasValidEmail = (emails) => emails.some((email) => userEmail.endsWith(email));
+  const canSubmitForTesting = (isDevEnv && hasValidEmail(devEmails)) || (isProdEnv && hasValidEmail(prodEmails));
+
  const {
    treatments: { ImEXPay }
  } = useSplitTreatments({
@@ -171,7 +181,7 @@ export function JobsDetailHeaderActions({
      { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
      (newJobId) => {
        history(`/manage/jobs/${newJobId}`);
-        notification["success"]({
+        notification.success({
          message: t("jobs.successes.duplicated")
        });
      },
@@ -181,7 +191,7 @@ export function JobsDetailHeaderActions({
  const handleDuplicateConfirm = () =>
    DuplicateJob(client, job.id, { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported }, (newJobId) => {
      history(`/manage/jobs/${newJobId}`);
-      notification["success"]({
+      notification.success({
        message: t("jobs.successes.duplicated")
      });
    });
@@ -217,13 +227,13 @@ export function JobsDetailHeaderActions({
    const result = await deleteJob({ variables: { id: job.id } });

    if (!result.errors) {
-      notification["success"]({
+      notification.success({
        message: t("jobs.successes.delete")
      });
      //go back to jobs list.
      history(`/manage/`);
    } else {
-      notification["error"]({
+      notification.error({
        message: t("jobs.errors.deleted", {
          error: JSON.stringify(result.errors)
        })
@@ -275,9 +285,9 @@ export function JobsDetailHeaderActions({
        });

        if (!result.errors) {
-          notification["success"]({ message: t("csi.successes.created") });
+          notification.success({ message: t("csi.successes.created") });
        } else {
-          notification["error"]({
+          notification.error({
            message: t("csi.errors.creating", {
              message: JSON.stringify(result.errors)
            })
@@ -316,7 +326,7 @@ export function JobsDetailHeaderActions({
              `${window.location.protocol}//${window.location.host}/csi/${result.data.insert_csi.returning[0].id}`
            );
          } else {
-            notification["error"]({
+            notification.error({
              message: t("messaging.error.invalidphone")
            });
          }
@@ -328,7 +338,7 @@ export function JobsDetailHeaderActions({
          );
        }
      } else {
-        notification["error"]({
+        notification.error({
          message: t("csi.errors.notconfigured")
        });
      }
@@ -358,7 +368,7 @@ export function JobsDetailHeaderActions({
          });
          setMessage(`${window.location.protocol}//${window.location.host}/csi/${job.csiinvites[0].id}`);
        } else {
-          notification["error"]({
+          notification.error({
            message: t("messaging.error.invalidphone")
          });
        }
@@ -398,7 +408,7 @@ export function JobsDetailHeaderActions({
    });

    if (!result.errors) {
-      notification["success"]({
+      notification.success({
        message: t("jobs.successes.voided")
      });
      insertAuditTrail({
@@ -409,7 +419,7 @@ export function JobsDetailHeaderActions({
      //go back to jobs list.
      history(`/manage/`);
    } else {
-      notification["error"]({
+      notification.error({
        message: t("jobs.errors.voiding", {
          error: JSON.stringify(result.errors)
        })
@@ -442,7 +452,7 @@ export function JobsDetailHeaderActions({
        console.log("handle -> XML", QbXmlResponse);
      } catch (error) {
        console.log("Error getting QBXML from Server.", error);
-        notification["error"]({
+        notification.error({
          message: t("jobs.errors.exporting", {
            error: "Unable to retrieve QBXML. " + JSON.stringify(error.message)
          })
@@ -460,7 +470,7 @@ export function JobsDetailHeaderActions({
        });
      } catch (error) {
        console.log("Error connecting to quickbooks or partner.", error);
-        notification["error"]({
+        notification.error({
          message: t("jobs.errors.exporting-partner")
        });

@@ -556,7 +566,7 @@ export function JobsDetailHeaderActions({
      }
    });
    if (!jobUpdate.errors) {
-      notification["success"]({
+      notification.success({
        message: t("appointments.successes.canceled")
      });
      insertAuditTrail({
@@ -931,11 +941,11 @@ export function JobsDetailHeaderActions({
        });

        if (!result.errors) {
-          notification["success"]({
+          notification.success({
            message: t("jobs.successes.partsqueue")
          });
        } else {
-          notification["error"]({
+          notification.error({
            message: t("jobs.errors.saving", {
              error: JSON.stringify(result.errors)
            })
@@ -1111,6 +1121,27 @@ export function JobsDetailHeaderActions({
    });
  }

+  if (canSubmitForTesting) {
+    menuItems.push({
+      key: "submitfortesting",
+      id: "job-actions-submitfortesting",
+      label: t("menus.jobsactions.submit-for-testing"),
+      onClick: async () => {
+        try {
+          await axios.post("/job/totals-recorder", { id: job.id });
+          notification.success({
+            message: t("general.messages.submit-for-testing")
+          });
+        } catch (err) {
+          console.error(`Error submitting job for testing: ${err?.message}`);
+          notification.error({
+            message: t("general.errors.submit-for-testing-error")
+          });
+        }
+      }
+    });
+  }
+
  const menu = {
    items: menuItems,
    key: "popovermenu"
--- 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
@@ -5,6 +5,7 @@ import { useEffect, 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 { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -12,7 +13,6 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";

 const mapStateToProps = createStructuredSelector({
@@ -44,9 +44,16 @@ export function JobsDetailHeaderActionsToggleProduction({
    variables: { id: job.id },
    onCompleted: (data) => {
      if (data?.jobs_by_pk) {
+        const totalHours =
+          (data.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) +
+          (data.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0);
        form.setFieldsValue({
          actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
-          scheduled_completion: data.jobs_by_pk.scheduled_completion,
+          scheduled_completion: data.jobs_by_pk.scheduled_completion
+            ? data.jobs_by_pk.scheduled_completion
+            : totalHours && bodyshop.ss_configuration.nobusinessdays
+              ? dayjs().businessDaysAdd(totalHours / (bodyshop.target_touchtime || 1), "day")
+              : dayjs().add(totalHours / (bodyshop.target_touchtime || 1), "day"),
          actual_completion: data.jobs_by_pk.actual_completion,
          scheduled_delivery: data.jobs_by_pk.scheduled_delivery,
          actual_delivery: data.jobs_by_pk.actual_delivery
--- 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,18 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, WarningFilled } from "@ant-design/icons";
-import { Card, Col, Divider, Row, Space, Tag, Tooltip } from "antd";
-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 { useMutation } from "@apollo/client";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } 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 +24,7 @@ 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";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -29,41 +32,55 @@ const mapStateToProps = createStructuredSelector({
 });

 const mapDispatchToProps = (dispatch) => ({
-  setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
+  setPrintCenterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "printCenter"
+      })
+    )
 });

 const colSpan = {
-  xs: {
-    span: 24
-  },
-  sm: {
-    span: 24
-  },
-  md: {
-    span: 12
-  },
-  lg: {
-    span: 6
-  },
-  xl: {
-    span: 6
-  }
+  xs: { span: 24 },
+  sm: { span: 24 },
+  md: { span: 12 },
+  lg: { span: 6 },
+  xl: { span: 6 }
 };

 export function JobsDetailHeader({ job, bodyshop, disabled }) {
  const { t } = useTranslation();
+  const { notification } = useNotification();
  const [notesClamped, setNotesClamped] = useState(true);
-  const vehicleTitle = `${job.v_model_yr || ""} ${job.v_color || ""}
-  ${job.v_make_desc || ""} 
-  ${job.v_model_desc || ""}`.trim();
-
+  const [updateJob] = useMutation(UPDATE_JOB);
+  const vehicleTitle =
+    `${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 {
+      await updateJob({
+        variables: {
+          jobId: job.id,
+          job: { [field]: value }
+        },
+        refetchQueries: ["GET_JOB_BY_PK"],
+        awaitRefetchQueries: true
+      });
+    } catch (error) {
+      notification.error({
+        message: t("jobs.errors.saving", { error: error.message })
+      });
+    }
+  };
+
  return (
    <Row gutter={[16, 16]} style={{ alignItems: "stretch" }}>
      <Col {...colSpan}>
@@ -72,11 +89,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
            <DataLabel label={t("jobs.fields.status")}>
              <Space wrap>
                {job.status}
-                {job.inproduction && (
-                  <Tag color="#f50" key="production">
-                    {t("jobs.labels.inproduction")}
-                  </Tag>
-                )}
+                {job.inproduction && <Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>}
                {job.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
                {job.iouparent && (
                  <Link to={`/manage/jobs/${job.iouparent}`}>
@@ -110,7 +123,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 +139,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 +189,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>
--- 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
@@ -1,12 +1,10 @@
 import { Button, Space } from "antd";
 import axios from "axios";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import cleanAxios from "../../utils/CleanAxios";
 import formatBytes from "../../utils/formatbytes";
-//import yauzl from "yauzl";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -28,7 +26,7 @@ const mapDispatchToProps = (dispatch) => ({

 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyDownloadButton);

-export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier }) {
+export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier, jobId }) {
  const { t } = useTranslation();
  const [download, setDownload] = useState(null);
  const [loading, setLoading] = useState(false);
@@ -46,6 +44,7 @@ export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, i
      };
    });
  }
+
  function standardMediaDownload(bufferData) {
    const a = document.createElement("a");
    const url = window.URL.createObjectURL(new Blob([bufferData]));
@@ -53,13 +52,14 @@ export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, i
    a.download = `${identifier || "documents"}.zip`;
    a.click();
  }
+
  const handleDownload = async () => {
    logImEXEvent("jobs_documents_download");
    setLoading(true);
    const zipUrl = await axios({
      url: "/media/imgproxy/download",
      method: "POST",
-      data: { documentids: imagesToDownload.map((_) => _.id) }
+      data: { jobId, documentids: imagesToDownload.map((_) => _.id) }
    });

    const theDownloadedZip = await cleanAxios({
--- 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
@@ -75,7 +75,7 @@ function JobsDocumentsImgproxyComponent({
              <SyncOutlined />
            </Button>
            <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
-            <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
+            <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} jobId={jobId} />
            <JobsDocumentsDeleteButton
              galleryImages={galleryImages}
              deletionCallback={billsCallback || fetchThumbnails || refetch}
--- a/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
+++ b/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
@@ -65,7 +65,7 @@ export default connect(
    <Modal
      title={t("jobs.labels.existing_jobs")}
      width={"80%"}
-      destroyOnClose
+      destroyOnHidden
      okButtonProps={{ disabled: selectedJob ? false : true }}
      {...modalProps}
    >
--- 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
-          ref={virtuosoRef}
-          style={{ height: "400px", width: "100%" }}
-          data={notifications}
-          totalCount={notifications.length}
-          endReached={loadMore}
-          itemContent={renderNotification}
-        />
+        {!isEmployee ? (
+          <div style={{ padding: 10 }}>
+            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
+          </div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            style={{ height: "400px", width: "100%" }}
+            data={notifications}
+            totalCount={notifications.length}
+            endReached={loadMore}
+            itemContent={renderNotification}
+          />
+        )}
      </div>
    );
  }
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -3,10 +3,11 @@ import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
-import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 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.
-      const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
-      if (!result?.errors) {
-        notification.success({ message: t("notifications.labels.notification-settings-success") });
-        setInitialValues(values);
-        setIsDirty(false);
-      } else {
+      try {
+        const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
+        if (!result?.errors) {
+          notification.success({ message: t("notifications.labels.notification-settings-success") });
+          setInitialValues(values);
+          setIsDirty(false);
+        } 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={saving}>
+            <Button type="primary" htmlType="submit" disabled={!isDirty} loading={savingSettings}>
              {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/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/payments-generate-link/payments-generate-link.component.jsx
+++ b/client/src/components/payments-generate-link/payments-generate-link.component.jsx
@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
--- 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,62 @@
+import { useQuery } from "@apollo/client";
+import { Input, Table } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+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 PhoneNumberFormatter from "../../utils/PhoneFormatter";
+import { TimeAgoFormatter } from "../../utils/DateFormatter";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = () => ({});
+
+function PhoneNumberConsentList({ bodyshop, currentUser }) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const { loading, data } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
+    variables: { bodyshopid: bodyshop.id, search: search ? `%${search}%` : undefined },
+    fetchPolicy: "network-only"
+  });
+
+  const columns = [
+    {
+      title: t("consent.phone_number"),
+      dataIndex: "phone_number",
+      render: (text) => <PhoneNumberFormatter>{text}</PhoneNumberFormatter>,
+      sorter: (a, b) => a.phone_number.localeCompare(b.phone_number)
+    },
+    {
+      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>
+      <Input.Search
+        placeholder={t("general.labels.search")}
+        onSearch={(value) => setSearch(value)}
+        style={{ marginBottom: 16 }}
+      />
+
+      <Table
+        columns={columns}
+        dataSource={data?.phone_number_opt_out}
+        loading={loading}
+        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/production-board-kanban.container.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.container.jsx
@@ -12,7 +12,7 @@ import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ProductionBoardKanbanComponent from "./production-board-kanban.component";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
--- 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")}>
-    <Row gutter={[16, 16]}>
+  <Card title={t("production.settings.information")} style={{ maxWidth: "100%", overflowX: "auto" }}>
+    <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 }) => (
-  <Card title={t("production.settings.layout")}>
+const mapStateToProps = createStructuredSelector({
+  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") }
          ]
        },
-        {
-          name: "cardcolor",
-          label: t("production.labels.cardcolor"),
-          options: [
-            { value: true, label: t("production.labels.on") },
-            { value: false, label: t("production.labels.off") }
-          ]
-        },
+        ...(HasFeatureAccess({ bodyshop, featureName: "smartscheduling" })
+          ? [
+              {
+                name: "cardcolor",
+                label: t("production.labels.cardcolor"),
+                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 { isFunction } from "lodash";
-import { useNotification } from "../../../contexts/Notifications/notificationContext.jsx";
-import { SettingOutlined } from "@ant-design/icons";
+import InformationSettings from "./InformationSettings.jsx";
+import LayoutSettings from "./LayoutSettings.jsx";
+import StatisticsSettings from "./StatisticsSettings.jsx";

 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/BoardContainer.jsx
+++ b/client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx
@@ -100,26 +100,28 @@ 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;

-      setIsProcessing(true);
+      // Only update drag time if it's a valid drop with a different destination
+      if (type === "lane" && source && destination && !isEqual(source, destination)) {
+        setDragTime(source.droppableId);
+        setIsProcessing(true);

-      dispatch(
-        actions.moveCardAcrossLanes({
-          fromLaneId: source.droppableId,
-          toLaneId: destination.droppableId,
-          cardId: draggableId,
-          index: destination.index
-        })
-      );
+        dispatch(
+          actions.moveCardAcrossLanes({
+            fromLaneId: source.droppableId,
+            toLaneId: destination.droppableId,
+            cardId: draggableId,
+            index: destination.index
+          })
+        );

-      try {
-        await onDragEnd({ draggableId, type, source, reason, mode, destination, combine });
-      } catch (err) {
-        console.error("Error in onLaneDrag", err);
-      } finally {
-        setIsProcessing(false);
+        try {
+          await onDragEnd({ draggableId, type, source, reason, mode, destination, combine });
+        } catch (err) {
+          console.error("Error in onLaneDrag", err);
+        } finally {
+          setIsProcessing(false);
+        }
      }
    },
    [dispatch, onDragEnd, setDragTime]
--- 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,15 +120,14 @@ 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
@@ -142,7 +141,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
@@ -180,13 +178,14 @@ const Lane = ({
          override={orientation !== "horizontal" && (collapsed || !renderedCards.length)}
        >
          <div
-            {...provided.droppableProps}
-            ref={provided.innerRef}
+            ref={laneRef} // Ensure laneRef is set here
+            style={{ height: "100%", width: "100%" }} // Make it scrollable
            className={`react-trello-lane ${collapsed ? "lane-collapsed" : ""}`}
-            style={{ ...provided.droppableProps.style }}
          >
-            <FinalComponent {...finalComponentProps} />
-            {shouldRenderPlaceholder && provided.placeholder}
+            <div {...provided.droppableProps} ref={provided.innerRef} style={{ ...provided.droppableProps.style }}>
+              <FinalComponent {...finalComponentProps} />
+              {shouldRenderPlaceholder && provided.placeholder}
+            </div>
          </div>
        </HeightMemoryWrapper>
      );
--- a/client/src/components/production-list-detail/production-list-detail.component.jsx
+++ b/client/src/components/production-list-detail/production-list-detail.component.jsx
@@ -7,7 +7,7 @@ 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.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { logImEXEvent } from "../../firebase/firebase.utils.js";
 import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";
--- a/client/src/components/production-list-table/production-list-table.container.jsx
+++ b/client/src/components/production-list-table/production-list-table.container.jsx
@@ -10,7 +10,7 @@ import {
 import ProductionListTable from "./production-list-table.component";
 import _ from "lodash";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";

 export default function ProductionListTableContainer({ bodyshop, subscriptionType = "direct" }) {
  const client = useApolloClient();
--- a/client/src/components/profile-my/profile-my.component.jsx
+++ b/client/src/components/profile-my/profile-my.component.jsx
@@ -8,7 +8,7 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import NotificationSettingsForm from "../notification-settings/notification-settings-form.component.jsx";

 const mapStateToProps = createStructuredSelector({
--- a/client/src/components/profile-shops/profile-shops.container.jsx
+++ b/client/src/components/profile-shops/profile-shops.container.jsx
@@ -54,6 +54,9 @@ export function ProfileShopsContainer({ bodyshop, currentUser }) {

    //Force window refresh.

+    //Ping the new partner to refresh.
+    axios.post("http://localhost:1337/refresh");
+
    window.location.reload();
  };

--- 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.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -1,6 +1,6 @@
 import { Button, Col, Form, Input, Row, Select, Space, Switch, Typography } 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";
@@ -8,16 +8,16 @@ import { calculateScheduleLoad } from "../../redux/application/application.actio
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
+import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
-import "./schedule-job-modal.scss";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import "./schedule-job-modal.scss";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -60,10 +60,12 @@ export function ScheduleJobModalComponent({
      const totalHours =
        lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs + lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs;

-      if (values.start && !values.scheduled_completion)
-        form.setFieldsValue({
-          scheduled_completion: dayjs(values.start).businessDaysAdd(totalHours / bodyshop.target_touchtime, "day")
-        });
+      if (values.start && !values.scheduled_completion) {
+        const addDays = bodyshop.ss_configuration.nobusinessdays
+          ? dayjs(values.start).add(totalHours / (bodyshop.target_touchtime || 1), "day")
+          : dayjs(values.start).businessDaysAdd(totalHours / (bodyshop.target_touchtime || 1), "day");
+        form.setFieldsValue({ scheduled_completion: addDays });
+      }
    }
  };

--- 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-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-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -1,4 +1,3 @@
-
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Tabs } from "antd";
 import React from "react";
@@ -24,6 +23,8 @@ 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";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import ShopInfoNotificationsAutoadd from "./shop-info.notifications-autoadd.component.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -41,6 +42,7 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
    names: ["CriticalPartsScanning", "Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });
+  const { scenarioNotificationsOn } = useSocket();

  const { t } = useTranslation();
  const history = useNavigate();
@@ -137,9 +139,21 @@ 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
--- 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
@@ -906,6 +906,7 @@ export function ShopInfoGeneral({ form, bodyshop }) {
                      add();
                    }}
                    style={{ width: "100%" }}
+                    id="insurancecos-add-button"
                  >
                    {t("general.actions.add")}
                  </Button>
--- 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.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -1,16 +1,15 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { ColorPicker } from "./shop-info.rostatus.component";

-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
@@ -78,6 +77,13 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
        >
          <InputNumber min={0} />
        </Form.Item>
+        <Form.Item
+          name={["ss_configuration", "nobusinessdays"]}
+          label={t("bodyshop.fields.ss_configuration.nobusinessdays")}
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
        <Form.Item
          name={["md_lost_sale_reasons"]}
          label={t("bodyshop.fields.md_lost_sale_reasons")}
--- 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-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.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -1,7 +1,6 @@
 import { useLazyQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Form, Input, InputNumber, Select, Switch } from "antd";
-import React from "react";
+import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -19,6 +18,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
+import JobEmployeeAssignmentsContainer from "./../job-employee-assignments/job-employee-assignments.container";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -319,10 +319,15 @@ export function TimeTicketModalComponent({
 }

 export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideTimeTickets = false }) {
+  const { t } = useTranslation();
  if (loading) return <LoadingSkeleton />;
  if (!lineTicketData) return null;
+  if (!jobid) return null;
  return (
-    <div>
+    <Space direction="vertical" style={{ width: "100%" }}>
+      <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
+        <JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} />
+      </Card>
      <LaborAllocationsTable
        jobId={jobid}
        joblines={lineTicketData.joblines}
@@ -332,6 +337,6 @@ export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideT
      {!hideTimeTickets && (
        <TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole />
      )}
-    </div>
+    </Space>
  );
 }
--- a/Show More
+++ b/Show More