release/2024-12-13: Merge in Rome Lite Branch

2024-12-11 10:26:06 -08:00
parent d315617d87 53d15b0d45
commit 206257ed3b
163 changed files with 19388 additions and 15398 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -179,37 +179,6 @@ jobs:
          job_type: deployment
          pipeline_number: << pipeline.number >>

-  promanager-app-build:
-    docker:
-      - image: cimg/node:18.18.2
-
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Install Dependencies
-          command: npm i
-
-      - run: npm run build:production:promanager
-
-      - aws-cli/setup:
-          aws_access_key_id: AWS_ACCESS_KEY_ID
-          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
-          region: AWS_REGION
-
-      - aws-s3/sync:
-          from: dist
-          to: "s3://promanager-production/"
-          arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (ProManager) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
-
  test-rome-hasura-migrate:
    docker:
      - image: cimg/node:18.18.2
@@ -268,37 +237,6 @@ jobs:
          job_type: deployment
          pipeline_number: << pipeline.number >>

-  test-promanager-app-build:
-    docker:
-      - image: cimg/node:18.18.2
-
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Install Dependencies
-          command: npm i
-
-      - run: npm run build:test:promanager
-
-      - aws-cli/setup:
-          aws_access_key_id: AWS_ACCESS_KEY_ID
-          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
-          region: AWS_REGION
-
-      - aws-s3/sync:
-          from: dist
-          to: "s3://promanager-testing/"
-          arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (ProManager) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
-
  test-hasura-migrate:
    docker:
      - image: cimg/node:18.18.2
@@ -458,14 +396,6 @@ workflows:
          filters:
            branches:
              only: test-AIO
-      - test-promanager-app-build:
-          filters:
-            branches:
-              only: test-AIO
-      - promanager-app-build:
-          filters:
-            branches:
-              only: master-AIO
      - test-rome-hasura-migrate:
          secret: ${HASURA_ROME_TEST_SECRET}
          filters:
--- a/.gitattributes
+++ b/.gitattributes
@@ -1 +1,80 @@
+# Ensure all text files use LF for line endings
 * text eol=lf
+
+# Binary files should not be modified by Git
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.webp binary
+*.svg binary
+
+# Fonts
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.otf binary
+*.eot binary
+
+# Videos
+*.mp4 binary
+*.mov binary
+*.avi binary
+*.mkv binary
+*.webm binary
+
+# Audio
+*.mp3 binary
+*.wav binary
+*.ogg binary
+*.flac binary
+
+# Archives and compressed files
+*.zip binary
+*.gz binary
+*.tar binary
+*.7z binary
+*.rar binary
+
+# PDF and documents
+*.pdf binary
+*.doc binary
+*.docx binary
+*.xls binary
+*.xlsx binary
+*.ppt binary
+*.pptx binary
+
+# Exclude JSON and other data files from text processing, if necessary
+*.json text
+*.xml text
+*.csv text
+
+# Scripts and code files should maintain LF endings
+*.js text eol=lf
+*.jsx text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.html text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf
+*.md text eol=lf
+*.sh text eol=lf
+*.py text eol=lf
+*.rb text eol=lf
+*.java text eol=lf
+*.php text eol=lf
+
+# Git configuration files
+.gitattributes text eol=lf
+.gitignore text eol=lf
+*.gitattributes text eol=lf
+
+# Exclude some other potential binary files
+*.db binary
+*.sqlite binary
+*.exe binary
+*.dll binary
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -38,5 +38,6 @@
    "smartscheduling",
    "timetickets",
    "touchtime"
-  ]
+  ],
+  "eslint.workingDirectories": ["./", "./client"]
 }
--- a/_reference/JSON/BodyshopFeatures.json
+++ b/_reference/JSON/BodyshopFeatures.json
@@ -10,5 +10,8 @@
  "courtesycars": "date",
  "media": "date",
  "visualboard": "date",
-  "scoreboard": "date"
+  "scoreboard": "date",
+  "checklist": "date",
+  "smartscheduling" :"date",
+  "roguard": "date"
 }
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
--- a/client/.env.development.promanager
+++ b/client/.env.development.promanager
@@ -1,14 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
-VITE_APP_CLOUDINARY_API_KEY=957865933348715
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=/api/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=PROMANAGER
--- a/client/.env.production.promanager
+++ b/client/.env.production.promanager
@@ -1,15 +0,0 @@
-GENERATE_SOURCEMAP=true
-VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231103507
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
-VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-VITE_APP_INSTANCE=PROMANAGER
--- a/client/.env.test.promanager
+++ b/client/.env.test.promanager
@@ -1,15 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
-VITE_APP_IS_TEST=true
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=PROMANAGER
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -0,0 +1,21 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+
+/** @type {import('eslint').Linter.Config[]} */
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"]
+  },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
+      "react/prop-types": 0
+    }
+  },
+  pluginReact.configs.flat["jsx-runtime"]
+];
--- a/client/index.html
+++ b/client/index.html
@@ -1,29 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8"/>
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-  <link rel="icon" href="/favicon.png"/>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <link rel="icon" href="/ro-favicon.png"/>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <link rel="icon" href="/pm/pm-favicon.ico"/>
-  <% } %>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <link rel="icon" href="/favicon.png" />
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <link rel="icon" href="/ro-favicon.png" />
+    <% } %>

-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <meta name="theme-color" content="#1690ff"/>
-  <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-  <!-- TODO:AIo Update the individual logos for each.-->
-  <link rel="apple-touch-icon" href="/logo192.png"/>
-  <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
-  <!--
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1690ff" />
+    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF" />
+    <!--
    manifest.json provides metadata used when your web app is installed on a
    user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
  -->
-  <!--
+    <!--
    Notice the use of %PUBLIC_URL% in the tags above.
    It will be replaced with the URL of the `public` folder during the build.
    Only files inside the `public` folder can be referenced from the HTML.
@@ -32,95 +29,90 @@
    work correctly both with client-side routing and a non-root public URL.
    Learn how to configure a non-root public URL by running `npm run build`.
  -->
-  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-  <meta name="description" content="ImEX Online"/>
-  <title>ImEX Online</title>
-  <script type="text/javascript">
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
-    (function () {
-      d = document;
-      s = d.createElement('script');
-      s.src = 'https://client.crisp.chat/l.js';
-      s.async = 1;
-      d.getElementsByTagName('head')[0].appendChild(s);
-    })();
-  </script>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <meta name="description" content="Rome Online"/>
-  <title>Rome Online</title>
-  <script type="text/javascript" id="zsiqchat">
-    var $zoho = $zoho || {};
-    $zoho.salesiq = $zoho.salesiq || {
-      widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
-      values: {},
-      ready: function () {
-      }
-    };
-    var d = document;
-    s = d.createElement("script");
-    s.type = "text/javascript";
-    s.id = "zsiqscript";
-    s.defer = true;
-    s.src = "https://salesiq.zohopublic.com/widget";
-    t = d.getElementsByTagName("script")[0];
-    t.parentNode.insertBefore(s, t);
-  </script>
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <meta name="description" content="ImEX Online" />
+    <title>ImEX Online</title>
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
+      (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+      })();
+    </script>
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <meta name="description" content="Rome Online" />
+    <title>Rome Online</title>
+    <script type="text/javascript" id="zsiqchat">
+      var $zoho = $zoho || {};
+      $zoho.salesiq = $zoho.salesiq || {
+        widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
+        values: {},
+        ready: function () {}
+      };
+      var d = document;
+      s = d.createElement("script");
+      s.type = "text/javascript";
+      s.id = "zsiqscript";
+      s.defer = true;
+      s.src = "https://salesiq.zohopublic.com/widget";
+      t = d.getElementsByTagName("script")[0];
+      t.parentNode.insertBefore(s, t);
+    </script>

-  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <title>ProManager</title>
-  <meta name="description" content="ProManager"/>
+    <% } %>
+    <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 () {
-      'use strict';
-      var e = [
-        'debug',
-        'destroy',
-        'do',
-        'help',
-        'identify',
-        'is',
-        'off',
-        'on',
-        'ready',
-        'render',
-        'reset',
-        'safe',
-        'set',
-      ];
-      if (window.noticeable) console.warn('Noticeable SDK code snippet loaded more than once');
-      else {
-        var n = (window.noticeable = window.noticeable || []);
-
-        function t(e) {
-          return function () {
-            var t = Array.prototype.slice.call(arguments);
-            return t.unshift(e), n.push(t), n;
-          };
-        }
-
-        !(function () {
-          for (var o = 0; o < e.length; o++) {
-            var r = e[o];
-            n[r] = t(r);
+          function t(e) {
+            return function () {
+              var t = Array.prototype.slice.call(arguments);
+              return t.unshift(e), n.push(t), n;
+            };
          }
-        })(),
-          (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>
-<div id="root"></div>

-<script type="module" src="src/index.jsx"></script>
-</body>
+          !(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>
+    <div id="root"></div>
+
+    <script type="module" src="src/index.jsx"></script>
+  </body>
 </html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -91,6 +91,7 @@
        "@dotenvx/dotenvx": "^1.14.1",
        "@emotion/babel-plugin": "^11.12.0",
        "@emotion/react": "^11.13.3",
+        "@eslint/js": "^9.15.0",
        "@sentry/webpack-plugin": "^2.22.4",
        "@testing-library/cypress": "^10.0.2",
        "browserslist": "^4.23.3",
@@ -98,9 +99,11 @@
        "chalk": "^5.3.0",
        "cross-env": "^7.0.3",
        "cypress": "^13.14.2",
-        "eslint": "^8.57.0",
+        "eslint": "^8.57.1",
        "eslint-config-react-app": "^7.0.1",
        "eslint-plugin-cypress": "^2.15.1",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.12.0",
        "memfs": "^4.12.0",
        "os-browserify": "^0.3.0",
        "react-error-overlay": "6.0.11",
@@ -1525,6 +1528,16 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/plugin-transform-classes/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@babel/plugin-transform-computed-properties": {
      "version": "7.24.6",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.6.tgz",
@@ -2537,6 +2550,15 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@babel/types": {
      "version": "7.24.7",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.7.tgz",
@@ -2953,358 +2975,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
    "node_modules/@esbuild/win32-x64": {
      "version": "0.21.5",
      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
@@ -3430,12 +3100,13 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
      "dev": true,
+      "license": "MIT",
      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
    "node_modules/@fingerprintjs/fingerprintjs": {
@@ -4034,12 +3705,14 @@
      }
    },
    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
      "dev": true,
+      "license": "Apache-2.0",
      "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
+        "@humanwhocodes/object-schema": "^2.0.3",
        "debug": "^4.3.1",
        "minimatch": "^3.0.5"
      },
@@ -4052,6 +3725,7 @@
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
@@ -4062,6 +3736,7 @@
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
      "dev": true,
+      "license": "ISC",
      "dependencies": {
        "brace-expansion": "^1.1.7"
      },
@@ -4086,7 +3761,9 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "dev": true
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
    },
    "node_modules/@icons/material": {
      "version": "0.2.4",
@@ -5037,6 +4714,7 @@
      "cpu": [
        "x64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "linux"
@@ -5221,105 +4899,6 @@
        "@sentry/cli-win32-x64": "2.36.2"
      }
    },
-    "node_modules/@sentry/cli-darwin": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.36.2.tgz",
-      "integrity": "sha512-To64Pq+pcmecEr+gFXiqaZy8oKhyLQLXO/SVDdf16CUL2qpuahE3bO5h9kFacMxPPxOWcgc2btF+4gYa1+bQTA==",
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.36.2.tgz",
-      "integrity": "sha512-cRSvOQK97WM0m03k/c+LVAWT042Qz887WP/2Gy64eUi/PfArwb+QZZnsu4FCygxK9jnzgLTo4+ewoJVi17xaLQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm64": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.36.2.tgz",
-      "integrity": "sha512-g+FFmj1oJ2iRMsfs1ORz6THOO6MiAR55K9YxdZUBvqfoHLjSMt7Jst43sbZ3O0u55hnfixSKLNzDaTGaM/jxIQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-i686": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.36.2.tgz",
-      "integrity": "sha512-rjxTw/CMd0Q7qlOb7gWFiwn3hJIxNkhbn1bOU54xj9CZvQSCvh10l7l4Y9o8znJLl41c5kMXVq8yuYws9A7AGQ==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-x64": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.36.2.tgz",
-      "integrity": "sha512-cF8IPFTlwiC7JgVvSW4rS99sxb1W1N//iANxuzqaDswUnmJLi0AJy/jES87qE5GRB6ljaPVMvH7Kq0OCp3bvPA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-i686": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.36.2.tgz",
-      "integrity": "sha512-YDH/Kcd8JAo1Bg4jtSwF8dr7FZZ8QbYLMx8q/5eenHpq6VdOgPENsTvayLW3cAjWLcm44u8Ed/gcEK0z1IxQmQ==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/@sentry/cli-win32-x64": {
      "version": "2.36.2",
      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.36.2.tgz",
@@ -6548,29 +6127,21 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/array.prototype.toreversed": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
-      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
-      }
-    },
    "node_modules/array.prototype.tosorted": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
-      "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.7",
        "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.1.0",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
      }
    },
    "node_modules/arraybuffer.prototype.slice": {
@@ -8860,10 +8431,11 @@
      }
    },
    "node_modules/es-iterator-helpers": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
-      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz",
+      "integrity": "sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "call-bind": "^1.0.7",
        "define-properties": "^1.2.1",
@@ -8872,12 +8444,13 @@
        "es-set-tostringtag": "^2.0.3",
        "function-bind": "^1.1.2",
        "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.0.1",
        "has-property-descriptors": "^1.0.2",
        "has-proto": "^1.0.3",
        "has-symbols": "^1.0.3",
        "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.2",
+        "iterator.prototype": "^1.1.3",
        "safe-array-concat": "^1.1.2"
      },
      "engines": {
@@ -9007,16 +8580,18 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.6.1",
        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@nodelib/fs.walk": "^1.2.8",
        "@ungap/structured-clone": "^1.2.0",
@@ -9358,35 +8933,36 @@
      }
    },
    "node_modules/eslint-plugin-react": {
-      "version": "7.34.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
-      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
+      "version": "7.37.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
+      "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "array-includes": "^3.1.7",
-        "array.prototype.findlast": "^1.2.4",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
        "array.prototype.flatmap": "^1.3.2",
-        "array.prototype.toreversed": "^1.1.2",
-        "array.prototype.tosorted": "^1.1.3",
+        "array.prototype.tosorted": "^1.1.4",
        "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.17",
+        "es-iterator-helpers": "^1.1.0",
        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
        "minimatch": "^3.1.2",
-        "object.entries": "^1.1.7",
-        "object.fromentries": "^2.0.7",
-        "object.hasown": "^1.1.3",
-        "object.values": "^1.1.7",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.0",
        "prop-types": "^15.8.1",
        "resolve": "^2.0.0-next.5",
        "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.10"
+        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.repeat": "^1.0.0"
      },
      "engines": {
        "node": ">=4"
      },
      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
      }
    },
    "node_modules/eslint-plugin-react-hooks": {
@@ -9505,6 +9081,16 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/eslint/node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
    "node_modules/eslint/node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10227,6 +9813,7 @@
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
      "dev": true,
      "hasInstallScript": true,
+      "license": "MIT",
      "optional": true,
      "os": [
        "darwin"
@@ -10427,11 +10014,16 @@
      "integrity": "sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA=="
    },
    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "version": "15.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
+      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
+      "dev": true,
+      "license": "MIT",
      "engines": {
-        "node": ">=4"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/globalthis": {
@@ -11034,6 +10626,7 @@
      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "has-tostringtag": "^1.0.0"
      },
@@ -11227,6 +10820,7 @@
      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "call-bind": "^1.0.2"
      },
@@ -11299,6 +10893,7 @@
      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
      "dev": true,
+      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
      },
@@ -11422,6 +11017,7 @@
      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
      "dev": true,
+      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
      },
@@ -11524,6 +11120,7 @@
      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
      "dev": true,
+      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
      },
@@ -11548,6 +11145,7 @@
      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "call-bind": "^1.0.7",
        "get-intrinsic": "^1.2.4"
@@ -11603,16 +11201,20 @@
      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
    },
    "node_modules/iterator.prototype": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
-      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
+      "integrity": "sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "define-properties": "^1.2.1",
        "get-intrinsic": "^1.2.1",
        "has-symbols": "^1.0.3",
        "reflect.getprototypeof": "^1.0.4",
        "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
      }
    },
    "node_modules/jake": {
@@ -13271,23 +12873,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/object.hasown": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.4.tgz",
-      "integrity": "sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/object.values": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
@@ -15219,6 +14804,7 @@
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "call-bind": "^1.0.7",
        "define-properties": "^1.2.1",
@@ -16207,6 +15793,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
    "node_modules/string.prototype.trim": {
      "version": "1.2.9",
      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
@@ -17866,13 +17463,14 @@
      }
    },
    "node_modules/which-builtin-type": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz",
-      "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "function.prototype.name": "^1.1.5",
-        "has-tostringtag": "^1.0.0",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
        "is-async-function": "^2.0.0",
        "is-date-object": "^1.0.5",
        "is-finalizationregistry": "^1.0.2",
@@ -17881,8 +17479,8 @@
        "is-weakref": "^1.0.2",
        "isarray": "^2.0.5",
        "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.9"
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.15"
      },
      "engines": {
        "node": ">= 0.4"
@@ -17895,13 +17493,15 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/which-collection": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "is-map": "^2.0.3",
        "is-set": "^2.0.3",
--- a/client/package.json
+++ b/client/package.json
@@ -90,29 +90,18 @@
    "build": "dotenvx run --env-file=.env.development.imex -- vite build",
    "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
    "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
-    "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
    "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview",
    "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview",
-    "preview:promanager": "dotenvx run --env-file=.env.development.promanager -- vite preview",
    "build:test:imex": "env-cmd -f .env.test.imex npm run build",
    "build:test:rome": "env-cmd -f .env.test.rome npm run build",
-    "build:test:promanager": "env-cmd -f .env.test.promanager npm run build",
    "build:production:imex": "env-cmd -f .env.production.imex npm run build",
    "build:production:rome": "env-cmd -f .env.production.rome npm run build",
-    "build:production:promanager": "env-cmd -f .env.production.promanager npm run build",
    "test": "cypress open",
    "eject": "react-scripts eject",
    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
    "eulaize": "node src/utils/eulaize.js",
    "sentry:sourcemaps:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:cypress/recommended"
-    ]
-  },
  "browserslist": {
    "production": [
      ">0.2%",
@@ -138,6 +127,7 @@
    "@dotenvx/dotenvx": "^1.14.1",
    "@emotion/babel-plugin": "^11.12.0",
    "@emotion/react": "^11.13.3",
+    "@eslint/js": "^9.15.0",
    "@sentry/webpack-plugin": "^2.22.4",
    "@testing-library/cypress": "^10.0.2",
    "browserslist": "^4.23.3",
@@ -145,9 +135,11 @@
    "chalk": "^5.3.0",
    "cross-env": "^7.0.3",
    "cypress": "^13.14.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.12.0",
    "memfs": "^4.12.0",
    "os-browserify": "^0.3.0",
    "react-error-overlay": "6.0.11",
--- a/client/public/pm/pm-apple-touch-icon.png
+++ b/client/public/pm/pm-apple-touch-icon.png
--- a/client/public/pm/pm-favicon.ico
+++ b/client/public/pm/pm-favicon.ico
--- a/client/public/pm/pm-icon-192-maskable.png
+++ b/client/public/pm/pm-icon-192-maskable.png
--- a/client/public/pm/pm-icon-192.png
+++ b/client/public/pm/pm-icon-192.png
--- a/client/public/pm/pm-icon-512-maskable.png
+++ b/client/public/pm/pm-icon-512-maskable.png
--- a/client/public/pm/pm-icon-512.png
+++ b/client/public/pm/pm-icon-512.png
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -96,8 +96,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
        LogRocket.init(
          InstanceRenderMgr({
            imex: "gvfvfw/bodyshopapp",
-            rome: "rome-online/rome-online",
-            promanager: "" // TODO: AIO Add in log rocket for promanager instances.
+            rome: "rome-online/rome-online"
          })
        );
      }
@@ -134,8 +133,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
        <LoadingSpinner
          message={InstanceRenderMgr({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })}
        />
      }
@@ -144,8 +142,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
        currentUser={currentUser}
        workspaceCode={InstanceRenderMgr({
          imex: null,
-          rome: "9BkbEseqNqxw8jUH",
-          promanager: "aoJoEifvezYI0Z0P"
+          rome: "9BkbEseqNqxw8jUH"
        })}
      />

--- a/client/src/App/themeProvider.js
+++ b/client/src/App/themeProvider.js
@@ -26,13 +26,11 @@ const defaultTheme = {
  token: {
    colorPrimary: InstanceRenderMgr({
      imex: "#1890ff",
-      rome: "#326ade",
-      promanager: "#1d69a6"
+      rome: "#326ade"
    }),
    colorInfo: InstanceRenderMgr({
      imex: "#1890ff",
-      rome: "#326ade",
-      promanager: "#1d69a6"
+      rome: "#326ade"
    })
  }
 };
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -228,7 +228,6 @@ export function BillEnterModalLinesComponent({
                }}
              </Form.Item>
            )
-            //Do not need to set for promanager as it will default to Rome.
          })
      },
      {
@@ -462,7 +461,6 @@ export function BillEnterModalLinesComponent({

      ...InstanceRenderManager({
        rome: [],
-        promanager: [],
        imex: [
          {
            title: t("billlines.fields.federal_tax_applicable"),
@@ -476,7 +474,6 @@ export function BillEnterModalLinesComponent({
                initialValue: InstanceRenderManager({
                  imex: true,
                  rome: false,
-                  promanager: false
                }),
                name: [field.name, "applicable_taxes", "federal"]
              };
@@ -503,7 +500,6 @@ export function BillEnterModalLinesComponent({

      ...InstanceRenderManager({
        rome: [],
-        promanager: [],
        imex: [
          {
            title: t("billlines.fields.local_tax_applicable"),
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -1,7 +1,8 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -13,8 +14,11 @@ import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import { FaTasks } from "react-icons/fa";
+import UpsellComponent from "../upsell/upsell.component";
+import { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -57,6 +61,7 @@ export function BillsListTableComponent({
  // const search = queryString.parse(useLocation().search);
  // const selectedBill = search.billid;
  const [searchText, setSearchText] = useState("");
+  const containerRef = useRef(null);

  const Templates = TemplateList("bill");
  const bills = billsQuery.data ? billsQuery.data.bills : [];
@@ -170,6 +175,8 @@ export function BillsListTableComponent({
        )
    : [];

+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
+
  return (
    <Card
      title={t("bills.labels.bills")}
@@ -181,6 +188,7 @@ export function BillsListTableComponent({
          {job && job.converted ? (
            <>
              <Button
+                disabled={!hasBillsAccess}
                onClick={() => {
                  setBillEnterContext({
                    actions: { refetch: billsQuery.refetch },
@@ -190,9 +198,10 @@ export function BillsListTableComponent({
                  });
                }}
              >
-                {t("jobs.actions.postbills")}
+                <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>
              </Button>
              <Button
+                disabled={!hasBillsAccess}
                onClick={() => {
                  setReconciliationContext({
                    actions: { refetch: billsQuery.refetch },
@@ -203,7 +212,7 @@ export function BillsListTableComponent({
                  });
                }}
              >
-                {t("jobs.actions.reconcile")}
+                <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
              </Button>
            </>
          ) : null}
@@ -211,6 +220,7 @@ export function BillsListTableComponent({
          <Input.Search
            placeholder={t("general.labels.search")}
            value={searchText}
+            disabled={!hasBillsAccess}
            onChange={(e) => {
              e.preventDefault();
              setSearchText(e.target.value);
@@ -226,8 +236,13 @@ export function BillsListTableComponent({
        }}
        columns={columns}
        rowKey="id"
-        dataSource={filteredBills}
+        dataSource={hasBillsAccess ? filteredBills : []}
        onChange={handleTableChange}
+        locale={{
+          ...(!hasBillsAccess && {
+            emptyText: <UpsellComponent upsell={upsellEnum().bills.general} />
+          })
+        }}
      />
    </Card>
  );
--- a/client/src/components/conflict/conflict.component.jsx
+++ b/client/src/components/conflict/conflict.component.jsx
@@ -16,8 +16,7 @@ export default function ConflictComponent() {
              {t("general.labels.instanceconflictext", {
                app: InstanceRenderManager({
                  imex: "$t(titles.imexonline)",
-                  rome: "$t(titles.romeonline)",
-                  promanager: "$t(titles.promanager)"
+                  rome: "$t(titles.romeonline)"
                })
              })}
            </div>
--- a/client/src/components/documents-local-upload/documents-local-upload.component.jsx
+++ b/client/src/components/documents-local-upload/documents-local-upload.component.jsx
@@ -6,6 +6,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { handleUpload } from "./documents-local-upload.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { useTranslation } from "react-i18next";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -23,17 +26,20 @@ export function DocumentsLocalUploadComponent({
  allowAllTypes
 }) {
  const [fileList, setFileList] = useState([]);
-
+  const { t } = useTranslation();
  const handleDone = (uid) => {
    setTimeout(() => {
      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
    }, 2000);
  };

+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
  return (
    <Upload.Dragger
      multiple={true}
      fileList={fileList}
+      disabled={!hasMediaAccess}
      onChange={(f) => {
        if (f.event && f.event.percent === 100) handleDone(f.file.uid);

@@ -59,7 +65,9 @@ export function DocumentsLocalUploadComponent({
          <p className="ant-upload-drag-icon">
            <UploadOutlined />
          </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
        </>
      )}
    </Upload.Dragger>
--- a/client/src/components/documents-upload/documents-upload.component.jsx
+++ b/client/src/components/documents-upload/documents-upload.component.jsx
@@ -7,6 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -45,11 +47,13 @@ export function DocumentsUploadComponent({
      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
    }, 2000);
  };
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });

  return (
    <Upload.Dragger
      multiple={true}
      fileList={fileList}
+      disabled={!hasMediaAccess}
      onChange={(f) => {
        if (f.event && f.event.percent === 100) handleDone(f.file.uid);
        setFileList(f.fileList);
@@ -89,7 +93,9 @@ export function DocumentsUploadComponent({
          <p className="ant-upload-drag-icon">
            <UploadOutlined />
          </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
          {!ignoreSizeLimit && (
            <Space wrap className="ant-upload-text">
              <Progress type="dashboard" percent={pct} size="small" />
--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -108,8 +108,7 @@ class ErrorBoundary extends React.Component {
            subTitle={t("general.messages.exception", {
              app: InstanceRenderManager({
                imex: "$t(titles.imexonline)",
-                rome: "$t(titles.romeonline)",
-                promanager: "$t(titles.promanager)"
+                rome: "$t(titles.romeonline)"
              })
            })}
            extra={
--- a/client/src/components/feature-wrapper/blur-wrapper.component.jsx
+++ b/client/src/components/feature-wrapper/blur-wrapper.component.jsx
@@ -0,0 +1,142 @@
+import Dinero from "dinero.js";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { HasFeatureAccess } from "./feature-wrapper.component";
+import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const blurringProps = {
+  filter: "blur(4px)",
+  webkitUserSelect: "none",
+  msUserSelect: "none",
+  mozUserSelect: "none",
+  userSelect: "none",
+  pointerEvents: "none"
+};
+
+export function BlurWrapper({
+  bodyshop,
+  featureName,
+  styleProp = "style",
+  valueProp = "value",
+  overrideValue = true,
+  overrideValueFunction,
+  children,
+  debug,
+  bypass
+}) {
+  if (import.meta.env.DEV) {
+    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
+  }
+
+  if (debug) {
+    console.trace("*** DEBUG MODE", featureName);
+    console.log("*** HAS FEATURE ACCESS?", featureName, HasFeatureAccess({ featureName, bodyshop }));
+    console.log(
+      "***LOG  ~ All Blur Wrapper Props ",
+      styleProp,
+      valueProp,
+      overrideValue,
+      overrideValueFunction,
+      children,
+      debug,
+      bypass
+    );
+  }
+
+  if (bypass) {
+    console.trace("*** BYPASS USED", featureName);
+    return children;
+  }
+
+  if (!HasFeatureAccess({ featureName, bodyshop })) {
+    const childrenWithBlurProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        //Clone the child, and spread in our props to overwrite it.
+        let newValueProp;
+        if (!overrideValue) {
+          newValueProp = child.props[valueProp];
+        } else {
+          if (typeof overrideValueFunction === "function") {
+            newValueProp = overrideValueFunction();
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomDinero") {
+            newValueProp = RandomDinero();
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomAmount") {
+            newValueProp = RandomAmount();
+          } else if (
+            typeof overrideValueFunction === "string" &&
+            overrideValueFunction.startsWith("RandomSmallString")
+          ) {
+            newValueProp = RandomSmallString(overrideValueFunction.split(":")[1] || 3); //Default back to 3 words, otherwise use the string.
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction.startsWith("RandomDate")) {
+            newValueProp = RandomDate();
+          } else {
+            newValueProp = "This is some random text. Nothing interesting here.";
+          }
+        }
+
+        return React.cloneElement(child, {
+          [valueProp]: newValueProp,
+          [styleProp]: { ...child.props[styleProp], ...blurringProps }
+        });
+      }
+      return child;
+    });
+
+    return childrenWithBlurProps;
+  }
+
+  return children;
+}
+export default connect(mapStateToProps, null)(BlurWrapper);
+
+function RandomDinero() {
+  return Dinero({ amount: Math.round(Math.exp(Math.random() * 10, 2)) }).toFormat();
+}
+function RandomAmount() {
+  return Math.round(Math.exp(Math.random() * 10));
+}
+
+function RandomSmallString(maxWords = 3) {
+  const words = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit"];
+  const wordCount = Math.floor(Math.random() * maxWords) + 1; // Random number between 1 and 3
+  let result = [];
+  for (let i = 0; i < wordCount; i++) {
+    const randomIndex = Math.floor(Math.random() * words.length);
+    result.push(words[randomIndex]);
+  }
+  return result.join(" ");
+}
+function RandomDate() {
+  return DateTimeFormatterFunction(new Date(Math.floor(Math.random() * 1000000000000)));
+}
+
+const featureNameList = [
+  "mobile",
+  "allAccess",
+  "audit",
+  "timetickets",
+  "payments",
+  "partsorders",
+  "bills",
+  "export",
+  "csi",
+  "courtesycars",
+  "media",
+  "visualboard",
+  "scoreboard",
+  "techconsole",
+  "checklist",
+  "smartscheduling",
+  "roguard",
+  "dashboard",
+  "lifecycle"
+];
+
+export function ValidateFeatureName(featureName) {
+  return featureNameList.includes(featureName);
+}
--- a/client/src/components/feature-wrapper/feature-wrapper.component.jsx
+++ b/client/src/components/feature-wrapper/feature-wrapper.component.jsx
@@ -1,48 +1,69 @@
-import dayjs from "../../utils/day";
 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 AlertComponent from "../alert/alert.component";
+import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import AlertComponent from "../alert/alert.component";
+import { ValidateFeatureName } from "./blur-wrapper.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-function FeatureWrapper({ bodyshop, featureName, noauth, children, ...restProps }) {
+function FeatureWrapper({
+  bodyshop,
+  featureName,
+  noauth,
+  blurContent,
+  children,
+  upsellComponent,
+  ...restProps
+}) {
  const { t } = useTranslation();
+  if (import.meta.env.DEV) {
+    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
+  }
+
+  if (upsellComponent) {
+    console.error("*** Upsell component passed in. This is not yet implemented.");
+  }

  if (HasFeatureAccess({ featureName, bodyshop })) return children;

-  return (
-    noauth || (
-      <AlertComponent
-        message={t("general.messages.nofeatureaccess", {
-          app: InstanceRenderManager({
-            imex: "$t(titles.imexonline)",
-            rome: "$t(titles.romeonline)",
-            promanager: "$t(titles.promanager)"
-          })
-        })}
-        type="warning"
-      />
-    )
-  );
+  if (blurContent) {
+    const childrenWithBlurProps = React.Children.map(children, (child) => {
+      // Checking isValidElement is the safe way and avoids a
+      // typescript error too.
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, { blur: true });
+      }
+      return child;
+    });
+    return childrenWithBlurProps;
+  } else {
+    return (
+      noauth || (
+        <AlertComponent
+          message={t("general.messages.nofeatureaccess", {
+            app: InstanceRenderManager({
+              imex: "$t(titles.imexonline)",
+              rome: "$t(titles.romeonline)"
+            })
+          })}
+          type="warning"
+        />
+      )
+    );
+  }
 }

-export function HasFeatureAccess({ featureName, bodyshop }) {
+export function HasFeatureAccess({ featureName, bodyshop, debug = false }) {
+  if (debug) {
+    console.trace(`*** HasFeatureAccessFunction called with feature << ${featureName} >>`);
+  }
  return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
 }

 export default connect(mapStateToProps, null)(FeatureWrapper);
-
-/* 
-dashboard
-production-board
-scoreboard
-csi
-tech-console
-mobile-imaging
-*/
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -26,8 +26,7 @@ import Icon, {
  UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
-import React from "react";
+import { Layout, Menu, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -44,6 +43,7 @@ import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapper from "../lock-wrapper/lock-wrapper.component";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -128,34 +128,39 @@ function Header({

  const accountingChildren = [];

-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "bills", bodyshop })
-    })
-  ) {
-    accountingChildren.push(
-      {
-        key: "bills",
-        id: "header-accounting-bills",
-        icon: <Icon component={FaFileInvoiceDollar} />,
-        label: <Link to="/manage/bills">{t("menus.header.bills")}</Link>
-      },
-      {
-        key: "enterbills",
-        id: "header-accounting-enterbills",
-        icon: <Icon component={GiPayMoney} />,
-        label: t("menus.header.enterbills"),
-        onClick: () => {
+  accountingChildren.push(
+    {
+      key: "bills",
+      id: "header-accounting-bills",
+      icon: <Icon component={FaFileInvoiceDollar} />,
+      label: (
+        <Link to="/manage/bills">
+          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+            {t("menus.header.bills")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "enterbills",
+      id: "header-accounting-enterbills",
+      icon: <Icon component={GiPayMoney} />,
+      label: (
+        <Space>
+          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+            {t(t("menus.header.enterbills"))}
+          </LockWrapper>
+        </Space>
+      ),
+      onClick: () => {
+        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
          setBillEnterContext({
            actions: {},
            context: {}
          });
-        }
      }
-    );
-  }
+    }
+  );

  if (Simple_Inventory.treatment === "on") {
    accountingChildren.push(
@@ -170,37 +175,41 @@ function Header({
      }
    );
  }
-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "payments", bodyshop })
-    })
-  ) {
-    accountingChildren.push(
-      {
-        type: "divider"
-      },
-      {
-        key: "allpayments",
-        id: "header-accounting-allpayments",
-        icon: <BankFilled />,
-        label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
-      },
-      {
-        key: "enterpayments",
-        id: "header-accounting-enterpayments",
-        icon: <Icon component={FaCreditCard} />,
-        label: t("menus.header.enterpayment"),
-        onClick: () => {
+
+  accountingChildren.push(
+    {
+      type: "divider"
+    },
+    {
+      key: "allpayments",
+      id: "header-accounting-allpayments",
+      icon: <BankFilled />,
+      label: (
+        <Link to="/manage/payments">
+          <LockWrapper featureName="payments" bodyshop={bodyshop}>
+            {t("menus.header.allpayments")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "enterpayments",
+      id: "header-accounting-enterpayments",
+      icon: <Icon component={FaCreditCard} />,
+      label: (
+        <LockWrapper featureName="payments" bodyshop={bodyshop}>
+          {t("menus.header.enterpayment")}
+        </LockWrapper>
+      ),
+      onClick: () => {
+        HasFeatureAccess({ featureName: "payments", bodyshop }) &&
          setPaymentContext({
            actions: {},
            context: null
          });
-        }
      }
-    );
-  }
+    }
+  );

  if (ImEXPay.treatment === "on") {
    accountingChildren.push({
@@ -217,40 +226,44 @@ function Header({
    });
  }

-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-    })
-  ) {
-    accountingChildren.push(
-      {
-        type: "divider"
-      },
-      {
-        key: "timetickets",
-        id: "header-accounting-timetickets",
-        icon: <FieldTimeOutlined />,
-        label: <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
-      }
-    );
-
-    if (bodyshop?.md_tasks_presets?.use_approvals) {
-      accountingChildren.push({
-        key: "ttapprovals",
-        id: "header-accounting-ttapprovals",
-        icon: <FieldTimeOutlined />,
-        label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
-      });
+  accountingChildren.push(
+    {
+      type: "divider"
+    },
+    {
+      key: "timetickets",
+      id: "header-accounting-timetickets",
+      icon: <FieldTimeOutlined />,
+      label: (
+        <Link to="/manage/timetickets">
+          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+            {t("menus.header.timetickets")}
+          </LockWrapper>
+        </Link>
+      )
    }
-    accountingChildren.push(
-      {
-        key: "entertimetickets",
-        icon: <Icon component={GiPlayerTime} />,
-        label: t("menus.header.entertimeticket"),
-        id: "header-accounting-entertimetickets",
-        onClick: () => {
+  );
+
+  if (bodyshop?.md_tasks_presets?.use_approvals) {
+    accountingChildren.push({
+      key: "ttapprovals",
+      id: "header-accounting-ttapprovals",
+      icon: <FieldTimeOutlined />,
+      label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+    });
+  }
+  accountingChildren.push(
+    {
+      key: "entertimetickets",
+      icon: <Icon component={GiPlayerTime} />,
+      label: (
+        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+          {t("menus.header.entertimeticket")}
+        </LockWrapper>
+      ),
+      id: "header-accounting-entertimetickets",
+      onClick: () => {
+        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
          setTimeTicketContext({
            actions: {},
            context: {
@@ -259,19 +272,24 @@ function Header({
                : currentUser.email
            }
          });
-        }
-      },
-      {
-        type: "divider"
      }
-    );
-  }
+    },
+    {
+      type: "divider"
+    }
+  );

  const accountingExportChildren = [
    {
      key: "receivables",
      id: "header-accounting-receivables",
-      label: <Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>
+      label: (
+        <Link to="/manage/accounting/receivables">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.accounting-receivables")}
+          </LockWrapper>
+        </Link>
+      )
    }
  ];

@@ -279,7 +297,13 @@ function Header({
    accountingExportChildren.push({
      key: "payables",
      id: "header-accounting-payables",
-      label: <Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>
+      label: (
+        <Link to="/manage/accounting/payables">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.accounting-payables")}
+          </LockWrapper>
+        </Link>
+      )
    });
  }

@@ -287,7 +311,13 @@ function Header({
    accountingExportChildren.push({
      key: "payments",
      id: "header-accounting-payments",
-      label: <Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>
+      label: (
+        <Link to="/manage/accounting/payments">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.accounting-payments")}
+          </LockWrapper>
+        </Link>
+      )
    });
  }

@@ -298,25 +328,27 @@ function Header({
    {
      key: "exportlogs",
      id: "header-accounting-exportlogs",
-      label: <Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>
+      label: (
+        <Link to="/manage/accounting/exportlogs">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.export-logs")}
+          </LockWrapper>
+        </Link>
+      )
    }
  );

-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "export", bodyshop })
-    })
-  ) {
-    accountingChildren.push({
-      key: "accountingexport",
-      id: "header-accounting-export",
-      icon: <ExportOutlined />,
-      label: t("menus.header.export"),
-      children: accountingExportChildren
-    });
-  }
+  accountingChildren.push({
+    key: "accountingexport",
+    id: "header-accounting-export",
+    icon: <ExportOutlined />,
+    label: (
+      <LockWrapper featureName="export" bodyshop={bodyshop}>
+        {t("menus.header.export")}
+      </LockWrapper>
+    ),
+    children: accountingExportChildren
+  });

  const menuItems = [
    {
@@ -385,38 +417,35 @@ function Header({
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "visualboard", bodyshop })
-        })
-          ? [
-              {
-                key: "productionboard",
-                id: "header-production-board",
-                icon: <Icon component={BsKanban} />,
-                label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
-              }
-            ]
-          : []),

-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "scoreboard", bodyshop })
-        })
-          ? [
-              {
-                type: "divider"
-              },
-              {
-                key: "scoreboard",
-                id: "header-scoreboard",
-                icon: <LineChartOutlined />,
-                label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
-              }
-            ]
-          : [])
+        {
+          key: "productionboard",
+          id: "header-production-board",
+          icon: <Icon component={BsKanban} />,
+          label: (
+            <Link to="/manage/production/board">
+              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
+                {t("menus.header.productionboard")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+
+        {
+          type: "divider"
+        },
+        {
+          key: "scoreboard",
+          id: "header-scoreboard",
+          icon: <LineChartOutlined />,
+          label: (
+            <Link to="/manage/scoreboard">
+              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
+                {t("menus.header.scoreboard")}
+              </LockWrapper>
+            </Link>
+          )
+        }
      ]
    },
    {
@@ -439,40 +468,54 @@ function Header({
        }
      ]
    },
-    ...(InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: false // HasFeatureAccess({ featureName: 'courtesycars', bodyshop }),
-    })
-      ? [
-          {
-            key: "ccs",
-            id: "header-css",
-            icon: <CarFilled />,
-            label: t("menus.header.courtesycars"),
-            children: [
-              {
-                key: "courtesycarsall",
-                id: "header-courtesycars-all",
-                icon: <CarFilled />,
-                label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
-              },
-              {
-                key: "contracts",
-                id: "header-contracts",
-                icon: <FileFilled />,
-                label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
-              },
-              {
-                key: "newcontract",
-                id: "header-newcontract",
-                icon: <FileAddFilled />,
-                label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
-              }
-            ]
-          }
-        ]
-      : []),
+    {
+      key: "ccs",
+      id: "header-css",
+      icon: <CarFilled />,
+      label: (
+        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+          {t("menus.header.courtesycars")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "courtesycarsall",
+          id: "header-courtesycars-all",
+          icon: <CarFilled />,
+          label: (
+            <Link to="/manage/courtesycars">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-all")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "contracts",
+          id: "header-contracts",
+          icon: <FileFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-contracts")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "newcontract",
+          id: "header-newcontract",
+          icon: <FileAddFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts/new">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-newcontract")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },

    ...(accountingChildren.length > 0
      ? [
@@ -491,20 +534,20 @@ function Header({
      icon: <PhoneOutlined />,
      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
    },
-    ...(InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "media", bodyshop })
-    })
-      ? [
-          {
-            key: "temporarydocs",
-            id: "header-temporarydocs",
-            icon: <PaperClipOutlined />,
-            label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
-          }
-        ]
-      : []),
+
+    {
+      key: "temporarydocs",
+      id: "header-temporarydocs",
+      icon: <PaperClipOutlined />,
+      label: (
+        <Link to="/manage/temporarydocs">
+          <LockWrapper featureName="media" bodyshop={bodyshop}>
+            {t("menus.header.temporarydocs")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+
    {
      key: "tasks",
      id: "tasks",
@@ -550,7 +593,11 @@ function Header({
          key: "dashboard",
          id: "header-dashboard",
          icon: <DashboardFilled />,
-          label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
+          label: (
+            <Link to="/manage/dashboard">
+              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
+            </Link>
+          )
        },
        {
          key: "reportcenter",
@@ -570,20 +617,19 @@ function Header({
          icon: <Icon component={IoBusinessOutline} />,
          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
        },
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "csi", bodyshop })
-        })
-          ? [
-              {
-                key: "shop-csi",
-                id: "header-shop-csi",
-                icon: <Icon component={RiSurveyLine} />,
-                label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
-              }
-            ]
-          : [])
+
+        {
+          key: "shop-csi",
+          id: "header-shop-csi",
+          icon: <Icon component={RiSurveyLine} />,
+          label: (
+            <Link to="/manage/shop/csi">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shop_csi")}
+              </LockWrapper>
+            </Link>
+          )
+        }
      ]
    },
    {
@@ -607,8 +653,7 @@ function Header({
            window.open(
              InstanceRenderManager({
                imex: "https://help.imex.online/",
-                rome: "https://rometech.com//",
-                promanager: "https://web-est.com"
+                rome: "https://rometech.com//"
              }),

              "_blank"
@@ -617,8 +662,7 @@ function Header({
        },
        ...(InstanceRenderManager({
          imex: true,
-          rome: false,
-          promanager: false
+          rome: false
        })
          ? [
              {
@@ -632,20 +676,19 @@ function Header({
            ]
          : []),

-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-        })
-          ? [
-              {
-                key: "shiftclock",
-                id: "header-shiftclock",
-                icon: <Icon component={GiPlayerTime} />,
-                label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
-              }
-            ]
-          : []),
+        {
+          key: "shiftclock",
+          id: "header-shiftclock",
+          icon: <Icon component={GiPlayerTime} />,
+          label: (
+            <Link to="/manage/shiftclock">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shiftclock")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+
        {
          key: "profile",
          id: "header-profile",
--- a/client/src/components/job-audit-trail/job-audit-trail.component.jsx
+++ b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
@@ -1,23 +1,27 @@
+import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Col, Row, Table, Tag } from "antd";
-import { SyncOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobAuditTrail);

-export function JobAuditTrail({ currentUser, jobId }) {
+export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
  const { t } = useTranslation();
  const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
    variables: { jobid: jobId },
@@ -41,7 +45,12 @@ export function JobAuditTrail({ currentUser, jobId }) {
    {
      title: t("audit.fields.operation"),
      dataIndex: "operation",
-      key: "operation"
+      key: "operation",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit">
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
    }
  ];
  const emailColumns = [
@@ -64,52 +73,84 @@ export function JobAuditTrail({ currentUser, jobId }) {
      dataIndex: "to",
      key: "to",

-      render: (text, record) => record.to && record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>)
+      render: (text, record) =>
+        record.to &&
+        record.to.map((email, idx) => (
+          <Tag key={idx}>
+            <BlurWrapperComponent featureName="audit">
+              <div>{email}</div>
+            </BlurWrapperComponent>
+          </Tag>
+        ))
    },
    {
      title: t("audit.fields.cc"),
      dataIndex: "cc",
      key: "cc",

-      render: (text, record) => record.cc && record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>)
+      render: (text, record) =>
+        record.cc &&
+        record.cc.map((email, idx) => (
+          <Tag key={idx}>
+            <BlurWrapperComponent featureName="audit">
+              <div>{email}</div>
+            </BlurWrapperComponent>
+          </Tag>
+        ))
    },
    {
      title: t("audit.fields.subject"),
      dataIndex: "subject",
-      key: "subject"
+      key: "subject",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit">
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
    },
    {
      title: t("audit.fields.status"),
      dataIndex: "status",
-      key: "status"
+      key: "status",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit">
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
    },
-    ...(currentUser?.email.includes("@imex.")
-      ? [
-          {
-            title: t("audit.fields.contents"),
-            dataIndex: "contents",
-            key: "contents",
-            width: "10%",
-            render: (text, record) => (
-              <Button
-                onClick={() => {
-                  var win = window.open(
-                    "",
-                    "Title",
-                    "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
-                  );
-                  win.document.body.innerHTML = record.contents;
-                }}
-              >
-                Preview
-              </Button>
-            )
-          }
-        ]
-      : [])
+
+    {
+      title: t("audit.fields.contents"),
+      dataIndex: "contents",
+      key: "contents",
+      width: "10%",
+      render: (text, record) => (
+        <Button
+          onClick={() => {
+            var win = window.open(
+              "",
+              "Title",
+              "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
+            );
+            win.document.body.innerHTML = record.contents;
+          }}
+        >
+          Preview
+        </Button>
+      )
+    }
  ];
+
+  const hasAuditAccess = HasFeatureAccess({ bodyshop, featureName: "audit" });
  return (
    <Row gutter={[16, 16]}>
+      {!hasAuditAccess && (
+        <Col span={24}>
+          <Card>
+            <UpsellComponent upsell={upsellEnum().audit.general} disableMask />
+          </Card>
+        </Col>
+      )}
      <Col span={24}>
        <Card
          title={t("jobs.labels.audit")}
--- a/client/src/components/job-bills-total/job-bills-total.component.jsx
+++ b/client/src/components/job-bills-total/job-bills-total.component.jsx
@@ -6,8 +6,22 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import "./job-bills-total.styles.scss";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";

-export default function JobBillsTotalComponent({
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobBillsTotalComponent({
+  bodyshop,
  loading,
  bills,
  partsOrders,
@@ -18,7 +32,7 @@ export default function JobBillsTotalComponent({
  const { t } = useTranslation();

  if (loading) return <LoadingSkeleton />;
-  if (!!!jobTotals) {
+  if (!jobTotals) {
    if (showWarning && warningCallback && typeof warningCallback === "function") {
      warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
    }
@@ -97,8 +111,7 @@ export default function JobBillsTotalComponent({
    .add(
      InstanceRenderManager({
        imex: Dinero(),
-        rome: Dinero(totals.additional.additionalCosts),
-        promanager: "USE_ROME"
+        rome: Dinero(totals.additional.additionalCosts)
      })
    ); // Additional costs were captured for Rome, but not imex.

@@ -120,10 +133,10 @@ export default function JobBillsTotalComponent({
      warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
    }
  }
-
+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
  return (
    <Row gutter={[16, 16]}>
-      <Col md={24} lg={18}>
+      <Col {...(hasBillsAccess ? { md: 24, lg: 18 } : { span: 12 })}>
        <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
          <Space wrap size="large">
            <Tooltip
@@ -147,7 +160,9 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
+              </BlurWrapperComponent>
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
@@ -159,13 +174,15 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic
-                title={t("bills.labels.discrepancy")}
-                valueStyle={{
-                  color: discrepancy.getAmount() === 0 ? "green" : "red"
-                }}
-                value={discrepancy.toFormat()}
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.discrepancy")}
+                  valueStyle={{
+                    color: discrepancy.getAmount() === 0 ? "green" : "red"
+                  }}
+                  value={discrepancy.toFormat()}
+                />
+              </BlurWrapperComponent>
            </Tooltip>
            <Typography.Title>+</Typography.Title>
            <Tooltip
@@ -177,7 +194,9 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
+              </BlurWrapperComponent>
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
@@ -189,13 +208,15 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic
-                title={t("bills.labels.discrepancy")}
-                valueStyle={{
-                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
-                }}
-                value={discrepWithLbrAdj.toFormat()}
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.discrepancy")}
+                  valueStyle={{
+                    color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
+                  }}
+                  value={discrepWithLbrAdj.toFormat()}
+                />
+              </BlurWrapperComponent>
            </Tooltip>
            <Typography.Title>+</Typography.Title>
            <Tooltip
@@ -207,7 +228,9 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              </BlurWrapperComponent>
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
@@ -219,16 +242,17 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic
-                title={t("bills.labels.discrepancy")}
-                valueStyle={{
-                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
-                }}
-                value={discrepWithCms.toFormat()}
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.discrepancy")}
+                  valueStyle={{
+                    color: discrepWithCms.getAmount() === 0 ? "green" : "red"
+                  }}
+                  value={discrepWithCms.toFormat()}
+                />
+              </BlurWrapperComponent>
            </Tooltip>
          </Space>
-
          {showWarning &&
            (discrepWithCms.getAmount() !== 0 ||
              discrepWithLbrAdj.getAmount() !== 0 ||
@@ -253,7 +277,9 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              </BlurWrapperComponent>
            </Tooltip>
            <Tooltip
              title={
@@ -264,17 +290,19 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic
-                title={t("bills.labels.calculatedcreditsnotreceived")}
-                valueStyle={{
-                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
-                }}
-                value={
-                  calculatedCreditsNotReceived.getAmount() >= 0
-                    ? calculatedCreditsNotReceived.toFormat()
-                    : Dinero().toFormat()
-                }
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.calculatedcreditsnotreceived")}
+                  valueStyle={{
+                    color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
+                  }}
+                  value={
+                    calculatedCreditsNotReceived.getAmount() >= 0
+                      ? calculatedCreditsNotReceived.toFormat()
+                      : Dinero().toFormat()
+                  }
+                />
+              </BlurWrapperComponent>
            </Tooltip>
            <Tooltip
              title={
@@ -285,17 +313,19 @@ export default function JobBillsTotalComponent({
                />
              }
            >
-              <Statistic
-                title={t("bills.labels.creditsnotreceived")}
-                valueStyle={{
-                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
-                }}
-                value={
-                  totalReturnsMarkedNotReceived.getAmount() >= 0
-                    ? totalReturnsMarkedNotReceived.toFormat()
-                    : Dinero().toFormat()
-                }
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.creditsnotreceived")}
+                  valueStyle={{
+                    color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
+                  }}
+                  value={
+                    totalReturnsMarkedNotReceived.getAmount() >= 0
+                      ? totalReturnsMarkedNotReceived.toFormat()
+                      : Dinero().toFormat()
+                  }
+                />
+              </BlurWrapperComponent>
            </Tooltip>
          </Space>
          {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
@@ -303,6 +333,15 @@ export default function JobBillsTotalComponent({
          )}
        </Card>
      </Col>
+      {!hasBillsAccess && (
+        <Col span={6}>
+          <Card style={{ height: "100%" }}>
+            <UpsellComponent upsell={upsellEnum().bills.autoreconcile} disableMask />
+          </Card>
+        </Col>
+      )}
    </Row>
  );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobBillsTotalComponent);
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -47,7 +47,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
    md: "100%",
    lg: "75%",
    xl: "75%",
-    xxl: "60%"
+    xxl: "75%"
  };
  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";

--- a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { GenerateThumbUrl } from "../jobs-documents-gallery/job-documents.utility";
 import CardTemplate from "./job-detail-cards.template.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 export default function JobDetailCardsDocumentsComponent({ loading, data }) {
  const { t } = useTranslation();
@@ -20,15 +21,17 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
      title={t("jobs.labels.cards.documents")}
      extraLink={`/manage/jobs/${data.id}?tab=documents`}
    >
-      {data.documents.length > 0 ? (
-        <Carousel autoplay>
-          {data.documents.map((item) => (
-            <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
-          ))}
-        </Carousel>
-      ) : (
-        <div>{t("documents.errors.nodocuments")}</div>
-      )}
+      <UpsellComponent disableMask upsell={upsellEnum().media.general}>
+        {data.documents.length > 0 ? (
+          <Carousel autoplay>
+            {data.documents.map((item) => (
+              <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
+            ))}
+          </Carousel>
+        ) : (
+          <div>{t("documents.errors.nodocuments")}</div>
+        )}
+      </UpsellComponent>
    </CardTemplate>
  );
 }
--- a/client/src/components/job-detail-lines/job-lines-expander.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines-expander.component.jsx
@@ -12,9 +12,10 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container.jsx";
-import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";
-import TaskListContainer from "../task-list/task-list.container.jsx";
+import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container";
+
+import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
+import TaskListContainer from "../task-list/task-list.container";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -82,7 +83,7 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
                  }
                ]
          }
-        />{" "}
+        />
      </Col>
      <Col md={24} lg={8}>
        <Typography.Title level={4}>{t("parts_dispatch.labels.parts_dispatch")}</Typography.Title>
@@ -117,57 +118,61 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
          }
        />
      </Col>
-      <FeatureWrapper featureName="bills" noauth={() => null}>
-        <Col md={24} lg={8}>
-          <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-          <BillDetailEditcontainer />
-          <Timeline
-            items={
-              data.billlines.length > 0
-                ? data.billlines.map((line) => ({
-                    key: line.id,
+
+      <Col md={24} lg={8}>
+        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+        <BillDetailEditcontainer />
+        <Timeline
+          items={
+            data.billlines.length > 0
+              ? data.billlines.map((line) => ({
+                  key: line.id,
+                  children: (
+                    <Row wrap>
+                      <Col span={4}>
+                        {!technician ? (
+                          <>
+                            <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
+                              {line.bill.invoice_number}
+                            </Link>
+                          </>
+                        ) : (
+                          `${line.bill.invoice_number}`
+                        )}
+                      </Col>
+                      <Col span={4}>
+                        <span>
+                          {`${t("billlines.fields.actual_price")}: `}
+                          <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
+                        </span>
+                      </Col>
+                      <Col span={4}>
+                        <span>
+                          {`${t("billlines.fields.actual_cost")}: `}
+                          <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
+                        </span>
+                      </Col>
+                      <Col span={4}>
+                        <DateFormatter>{line.bill.date}</DateFormatter>
+                      </Col>
+                      <Col span={4}> {line.bill.vendor.name}</Col>
+                    </Row>
+                  )
+                }))
+              : [
+                  {
+                    key: "no-orders",
                    children: (
-                      <Row wrap>
-                        <Col span={4}>
-                          {!technician ? (
-                            <>
-                              <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
-                                {line.bill.invoice_number}
-                              </Link>
-                            </>
-                          ) : (
-                            `${line.bill.invoice_number}`
-                          )}
-                        </Col>
-                        <Col span={4}>
-                          <span>
-                            {`${t("billlines.fields.actual_price")}: `}
-                            <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
-                          </span>
-                        </Col>
-                        <Col span={4}>
-                          <span>
-                            {`${t("billlines.fields.actual_cost")}: `}
-                            <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
-                          </span>
-                        </Col>
-                        <Col span={4}>
-                          <DateFormatter>{line.bill.date}</DateFormatter>
-                        </Col>
-                        <Col span={4}> {line.bill.vendor.name}</Col>
-                      </Row>
+                      <BlurWrapper featureName="bills">
+                        <span>{t("bills.labels.nobilllines")}</span>
+                      </BlurWrapper>
                    )
-                  }))
-                : [
-                    {
-                      key: "no-orders",
-                      children: t("bills.labels.nobilllines")
-                    }
-                  ]
-            }
-          />
-        </Col>
-      </FeatureWrapper>
+                  }
+                ]
+          }
+        />
+      </Col>
+
      <Col md={24} lg={24}>
        <TaskListContainer
          parentJobId={jobid}
--- a/client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Checkbox, Form, notification, Popover, Tooltip } from "antd";
+import { Button, Form, notification, Popover, Tooltip } from "antd";
 import axios from "axios";
 import { t } from "i18next";
 import React, { useState } from "react";
@@ -69,16 +69,11 @@ export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
          <Form.Item name="act_price" label={t("jobs.labels.act_price_ppc")} rules={[{ required: true }]}>
            <CurrencyFormItemComponent />
          </Form.Item>
-          <Button
-            disabled={InstanceRenderManager({ imex: true, rome: false, promanager: true })}
-            loading={loading}
-            htmlType="primary"
-          >
+          <Button disabled={InstanceRenderManager({ imex: true, rome: false })} loading={loading} htmlType="primary">
            {t("general.actions.save")}
          </Button>
        </Form>
-      ),
-      promanager: null
+      )
    });

  return (
--- a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
+++ b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
@@ -158,8 +158,7 @@ export function JobEmployeeAssignments({
          label={t(
            InstanceRenderManager({
              imex: "jobs.fields.employee_csr",
-              rome: "jobs.fields.employee_csr_writer",
-              promanager: "USE_ROME"
+              rome: "jobs.fields.employee_csr_writer"
            })
          )}
        >
--- a/client/src/components/job-lifecycle/job-lifecycle.component.jsx
+++ b/client/src/components/job-lifecycle/job-lifecycle.component.jsx
@@ -8,6 +8,8 @@ import { isEmpty } from "lodash";
 import { useTranslation } from "react-i18next";

 import "./job-lifecycle.styles.scss";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 // show text on bar if text can fit
 export function JobLifecycleComponent({ job, statuses, ...rest }) {
@@ -65,14 +67,23 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
    {
      title: t("job_lifecycle.columns.value"),
      dataIndex: "value",
-      key: "value"
+      key: "value",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomSmallString:2">
+          <span>{text}</span>
+        </BlurWrapperComponent>
+      )
    },
    {
      title: t("job_lifecycle.columns.start"),
      dataIndex: "start",
      key: "start",
-      render: (text) => DateTimeFormatterFunction(text),
-      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix()
+      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomDate">
+          <span>{DateTimeFormatterFunction(text)}</span>
+        </BlurWrapperComponent>
+      )
    },
    {
      title: t("job_lifecycle.columns.relative_start"),
@@ -92,7 +103,12 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
        }
        return dayjs(a.end).unix() - dayjs(b.end).unix();
      },
-      render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text))
+
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomDate">
+          <span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
+        </BlurWrapperComponent>
+      )
    },
    {
      title: t("job_lifecycle.columns.relative_end"),
@@ -122,67 +138,72 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
              }
              style={{ width: "100%" }}
            >
-              <div
-                id="bar-container"
-                style={{
-                  display: "flex",
-                  width: "100%",
-                  height: "100px",
-                  textAlign: "center",
-                  borderRadius: "5px",
-                  borderWidth: "5px",
-                  borderStyle: "solid",
-                  borderColor: "#f0f2f5",
-                  margin: 0,
-                  padding: 0
-                }}
-              >
-                {lifecycleData.durations.summations.map((key, index, array) => {
-                  const isFirst = index === 0;
-                  const isLast = index === array.length - 1;
-                  return (
-                    <div
-                      key={key.status}
-                      style={{
-                        overflow: "hidden",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        margin: 0,
-                        padding: 0,
+              <Card type="inner" style={{ marginTop: "10px" }}>
+                <UpsellComponent upsell={upsellEnum().lifecycle.general} />
+              </Card>
+              <BlurWrapperComponent featureName="lifecycle">
+                <div
+                  id="bar-container"
+                  style={{
+                    display: "flex",
+                    width: "100%",
+                    height: "100px",
+                    textAlign: "center",
+                    borderRadius: "5px",
+                    borderWidth: "5px",
+                    borderStyle: "solid",
+                    borderColor: "#f0f2f5",
+                    margin: 0,
+                    padding: 0
+                  }}
+                >
+                  {lifecycleData.durations.summations.map((key, index, array) => {
+                    const isFirst = index === 0;
+                    const isLast = index === array.length - 1;
+                    return (
+                      <div
+                        key={key.status}
+                        style={{
+                          overflow: "hidden",
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          margin: 0,
+                          padding: 0,

-                        borderTop: "1px solid #f0f2f5",
-                        borderBottom: "1px solid #f0f2f5",
-                        borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
-                        borderRight: isLast ? "1px solid #f0f2f5" : undefined,
+                          borderTop: "1px solid #f0f2f5",
+                          borderBottom: "1px solid #f0f2f5",
+                          borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
+                          borderRight: isLast ? "1px solid #f0f2f5" : undefined,

-                        backgroundColor: key.color,
-                        width: `${key.percentage}%`
-                      }}
-                      aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
-                      title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
-                    >
-                      {key.percentage > 15 ? (
-                        <>
-                          <div>{key.roundedPercentage}</div>
-                          <div
-                            style={{
-                              backgroundColor: "#f0f2f5",
-                              borderRadius: "5px",
-                              paddingRight: "2px",
-                              paddingLeft: "2px",
-                              fontSize: "0.8rem"
-                            }}
-                          >
-                            {key.status}
-                          </div>
-                        </>
-                      ) : null}
-                    </div>
-                  );
-                })}
-              </div>
+                          backgroundColor: key.color,
+                          width: `${key.percentage}%`
+                        }}
+                        aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                        title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                      >
+                        {key.percentage > 15 ? (
+                          <>
+                            <div>{key.roundedPercentage}</div>
+                            <div
+                              style={{
+                                backgroundColor: "#f0f2f5",
+                                borderRadius: "5px",
+                                paddingRight: "2px",
+                                paddingLeft: "2px",
+                                fontSize: "0.8rem"
+                              }}
+                            >
+                              {key.status}
+                            </div>
+                          </>
+                        ) : null}
+                      </div>
+                    );
+                  })}
+                </div>
+              </BlurWrapperComponent>
              <Card type="inner" title={t("job_lifecycle.content.legend_title")} style={{ marginTop: "10px" }}>
                <div>
                  {lifecycleData.durations.summations.map((key) => (
@@ -197,7 +218,15 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
                          textAlign: "center"
                        }}
                      >
-                        {key.status} ({key.roundedPercentage})
+                        {key.status} (
+                        <BlurWrapperComponent
+                          featureName="lifecycle"
+                          overrideValueFunction="RandomAmount"
+                          valueProp="children"
+                        >
+                          <span>{key.roundedPercentage}</span>
+                        </BlurWrapperComponent>
+                        )
                      </div>
                    </Tag>
                  ))}
--- a/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
+++ b/client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx
@@ -1,19 +1,31 @@
-import { useLazyQuery, useMutation } from "@apollo/client";
 import { CheckCircleOutlined } from "@ant-design/icons";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Card, Form, InputNumber, notification, Popover, Space } from "antd";
-import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
  INSERT_SCOREBOARD_ENTRY,
  QUERY_SCOREBOARD_ENTRY,
  UPDATE_SCOREBOARD_ENTRY
 } from "../../graphql/scoreboard.queries";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import dayjs from "../../utils/day";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component.jsx";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component.jsx";

-export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps }) {
  const { t } = useTranslation();
  const [insertScoreboardEntry] = useMutation(INSERT_SCOREBOARD_ENTRY);
  const [updateScoreboardEntry] = useMutation(UPDATE_SCOREBOARD_ENTRY);
@@ -162,12 +174,14 @@ export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps })
    setVisibility(true);
    setLoading(false);
  };
-
+  const hasScoreboardAccess = HasFeatureAccess({ bodyshop, featureName: "scoreboard" });
  return (
    <Popover content={overlay} open={visibility} placement="bottom">
-      <Button loading={loading} disabled={disabled} onClick={handleClick} {...otherBtnProps}>
-        {t("jobs.actions.addtoscoreboard")}
+      <Button loading={loading} disabled={disabled || !hasScoreboardAccess} onClick={handleClick} {...otherBtnProps}>
+        <LockWrapperComponent featureName="scoreboard">{t("jobs.actions.addtoscoreboard")}</LockWrapperComponent>
      </Button>
    </Popover>
  );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardAddButton);
--- a/client/src/components/job-totals-table/job-totals.table.labor.component.jsx
+++ b/client/src/components/job-totals-table/job-totals.table.labor.component.jsx
@@ -96,8 +96,7 @@ export default function JobTotalsTableLabor({ job }) {
          sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
          render: (text, record) => Dinero(record.total).toFormat()
        }
-      ],
-      promanager: "USE_ROME"
+      ]
    })
  ];

@@ -131,8 +130,7 @@ export default function JobTotalsTableLabor({ job }) {
                  <Table.Summary.Cell />
                  <Table.Summary.Cell />
                </>
-              ),
-              promanager: "USE_ROME"
+              )
            })}
            <Table.Summary.Cell align="right">
              <strong>{Dinero(job.job_totals.rates.rates_subtotal).toFormat()}</strong>
@@ -185,8 +183,7 @@ export default function JobTotalsTableLabor({ job }) {
                    {Dinero(job.job_totals.rates.mapa.total).toFormat()}
                  </Table.Summary.Cell>
                </>
-              ),
-              promanager: "USE_ROME"
+              )
            })}
          </Table.Summary.Row>
          <Table.Summary.Row>
@@ -236,8 +233,7 @@ export default function JobTotalsTableLabor({ job }) {
                    {Dinero(job.job_totals.rates.mash.total).toFormat()}
                  </Table.Summary.Cell>
                </>
-              ),
-              promanager: "USE_ROME"
+              )
            })}
          </Table.Summary.Row>
          <Table.Summary.Row>
@@ -253,8 +249,7 @@ export default function JobTotalsTableLabor({ job }) {
                  <Table.Summary.Cell />
                  <Table.Summary.Cell />
                </>
-              ),
-              promanager: "USE_ROME"
+              )
            })}
            <Table.Summary.Cell align="right">
              <strong>{Dinero(job.job_totals.rates.subtotal).toFormat()}</strong>
--- a/client/src/components/job-totals-table/job-totals.table.totals.component.jsx
+++ b/client/src/components/job-totals-table/job-totals.table.totals.component.jsx
@@ -59,7 +59,6 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
            total: job.job_totals.totals.federal_tax
          }
        ],
-        promanager: "USE_ROME",
        rome: job.job_totals.totals.us_sales_tax_breakdown
          ? [
              {
@@ -183,7 +182,6 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
          }
        ],
        rome: [],
-        promanager: "USE_ROME"
      }),
      {
        key: t("jobs.fields.other_amount_payable"),
--- a/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
+++ b/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
@@ -51,7 +51,6 @@ export default function JobAdminDeleteIntake({ job }) {
  const InstanceRender = InstanceRenderManager({
    imex: true,
    rome: "USE_IMEX",
-    promanager: false
  });

  return InstanceRender ? (
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -110,18 +110,17 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
    InstanceRenderManager({
      executeFunction: true,
      rome: ResolveCCCLineIssues,
-      args: [estData.est_data, bodyshop],
-      promanager: ResolveCCCLineIssues
+      args: [estData.est_data, bodyshop]
    });

    //   } else {
    //IO-539 Check for Parts Rate on PAL for SGI use case.
-    //TODO:AIO Check that the async function is actually waiting before moving on.
+
    await InstanceRenderManager({
      executeFunction: true,
      imex: CheckTaxRates,
      rome: CheckTaxRatesUSA,
-      promanager: CheckTaxRatesUSA,
+
      args: [estData.est_data, bodyshop]
    });

@@ -236,7 +235,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
      await InstanceRenderManager({
        executeFunction: true,
        rome: ResolveCCCLineIssues,
-        promanager: ResolveCCCLineIssues,
+
        args: [supp, bodyshop]
      });

@@ -244,7 +243,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
        executeFunction: true,
        imex: CheckTaxRates,
        rome: CheckTaxRatesUSA,
-        promanager: CheckTaxRatesUSA,
+
        args: [supp, bodyshop]
      });

@@ -568,7 +567,6 @@ async function CheckTaxRates(estData, bodyshop) {
 }
 function ResolveCCCLineIssues(estData, bodyshop) {
  //Find all misc amounts, populate them to the act price.
-  //TODO Ensure that this doesnt get violated
  //This needs to be done before cleansing unq_seq since some misc prices could move over.
  estData.joblines.data.forEach((line) => {
    if (line.misc_amt && line.misc_amt !== 0) {
@@ -584,48 +582,13 @@ function ResolveCCCLineIssues(estData, bodyshop) {
          //  line.notes += ` | ET/UT Update (prev = ${line.mod_lbr_ty})`;
          line.mod_lbr_ty = "LAR";
        }
-      },
-      promanager: "USE_ROME"
+      }
    });
  });

-  //Group by line no
-  // For everything but the first one, strip out the price number in
-
  InstanceRenderManager({
    executeFunction: true,
    args: [],
-    promanager: () => {
-      const groupedByLineRef = _.groupBy(estData.joblines.data, "line_ref");
-      Object.keys(groupedByLineRef).forEach((lineRef) => {
-        let index0ActPrice;
-        groupedByLineRef[lineRef].forEach((line, index) => {
-          //Let the first one keep it
-          if (index === 0) {
-            index0ActPrice = line.act_price;
-            return;
-          }
-          //Web Est seems to have additional costs with UNQ_SEQ 0. Keep them all?
-          if (line.unq_seq === 0) return;
-          if (index0ActPrice !== line.act_price) {
-            // line.notes += ` | Price override.`;
-            return;
-          }
-          const indexInEstData = estData.joblines.data.findIndex((l) => l.unq_seq === line.unq_seq);
-          //estData.joblines.data[indexInEstData].notes +=
-          // ` | Act Price delete. (prev act price = ${estData.joblines.data[indexInEstData].act_price})`;
-          estData.joblines.data[indexInEstData].act_price = 0;
-          estData.joblines.data[indexInEstData].db_price = 0;
-          estData.joblines.data[indexInEstData].part_type = null;
-        });
-      });
-    }
-  });
-
-  InstanceRenderManager({
-    executeFunction: true,
-    args: [],
-    promanager: null, //Require to prevent auto firing of Rome.
    rome: () => {
      //Generate the list of duplicated UNQ_SEQ that will feed into the next section to scrub the lines.
      const unqSeqHash = _.groupBy(estData.joblines.data, "unq_seq");
--- a/client/src/components/jobs-close-auto-allocate/jobs-close-auto-allocate.component.jsx
+++ b/client/src/components/jobs-close-auto-allocate/jobs-close-auto-allocate.component.jsx
@@ -33,7 +33,6 @@ export function JobsCloseAutoAllocate({ bodyshop, joblines, form, disabled }) {
          InstanceRenderManager({
            imex: !jl.part_type && !jl.mod_lbr_ty,
            rome: !ret.profitcenter_part,
-            promanager: "USE_ROME"
          })
        ) {
          const lineDesc = jl.line_desc ? jl.line_desc.toLowerCase() : "";
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -151,8 +151,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
            label={t(
              InstanceRenderManager({
                imex: "jobs.fields.employee_csr",
-                rome: "jobs.fields.employee_csr_writer",
-                promanager: "USE_ROME"
+                rome: "jobs.fields.employee_csr_writer"
              })
            )}
            rules={[
--- 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
@@ -23,9 +23,9 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import dayjs from "../../utils/day";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
+import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
@@ -198,6 +198,7 @@ export function JobsDetailHeaderActions({
        message: t("appointments.successes.created")
      });
    } catch (error) {
+      notification.open({ type: "error", message: t("appointments.errors.saving", { error: error.message }) });
    } finally {
      setLoading(false);
      setVisibility(false);
@@ -208,7 +209,7 @@ export function JobsDetailHeaderActions({
    //delete the job.
    const result = await deleteJob({ variables: { id: job.id } });

-    if (!!!result.errors) {
+    if (!result.errors) {
      notification["success"]({
        message: t("jobs.successes.delete")
      });
@@ -266,7 +267,7 @@ export function JobsDetailHeaderActions({
          awaitRefetchQueries: true
        });

-        if (!!!result.errors) {
+        if (!result.errors) {
          notification["success"]({ message: t("csi.successes.created") });
        } else {
          notification["error"]({
@@ -389,7 +390,7 @@ export function JobsDetailHeaderActions({
      }
    });

-    if (!!!result.errors) {
+    if (!result.errors) {
      notification["success"]({
        message: t("jobs.successes.voided")
      });
@@ -409,7 +410,7 @@ export function JobsDetailHeaderActions({
    }
  };

-  const handleExportCustData = async (e) => {
+  const handleExportCustData = async () => {
    logImEXEvent("job_export_cust_data");
    let PartnerResponse;
    if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo) {
@@ -486,7 +487,7 @@ export function JobsDetailHeaderActions({
    }
  };

-  const handleAlertToggle = (e) => {
+  const handleAlertToggle = () => {
    logImEXEvent("production_toggle_alert");
    //e.stopPropagation();
    updateJob({
@@ -509,7 +510,7 @@ export function JobsDetailHeaderActions({
    });
  };

-  const handleSuspend = (e) => {
+  const handleSuspend = () => {
    logImEXEvent("production_toggle_alert");
    //e.stopPropagation();
    updateJob({
@@ -522,7 +523,7 @@ export function JobsDetailHeaderActions({
    });
    insertAuditTrail({
      jobid: job.id,
-      operation: AuditTrailMapping.jobsuspend(!!job.suspended ? !job.suspended : true),
+      operation: AuditTrailMapping.jobsuspend(job.suspended ? !job.suspended : true),
      type: "jobsuspend"
    });
  };
@@ -603,7 +604,7 @@ export function JobsDetailHeaderActions({
                required: true
                //message: t("general.validation.required"),
              },
-              ({ getFieldValue }) => ({
+              () => ({
                async validator(rule, value) {
                  if (value) {
                    const { start } = form.getFieldsValue();
@@ -672,73 +673,74 @@ export function JobsDetailHeaderActions({
      disabled: job.status !== bodyshop.md_ro_statuses.default_scheduled,
      label: t("menus.jobsactions.cancelallappointments")
    },
-    ...InstanceRenderManager({
-      imex: [
-        {
-          key: "intake",
-          id: "job-actions-intake",
-          disabled: !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO,
-          label:
-            !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO ? (
-              t("jobs.actions.intake")
-            ) : (
-              <Link to={`/manage/jobs/${job.id}/intake`}>{t("jobs.actions.intake")}</Link>
-            )
-        },
-        {
-          key: "deliver",
-          id: "job-actions-deliver",
-          disabled: !jobInProduction || jobRO,
-          label: !jobInProduction ? (
-            t("jobs.actions.deliver")
-          ) : (
-            <Link to={`/manage/jobs/${job.id}/deliver`}>{t("jobs.actions.deliver")}</Link>
-          )
-        },
-        {
-          key: "checklist",
-          id: "job-actions-checklist",
-          disabled: !job.converted,
-          label: <Link to={`/manage/jobs/${job.id}/checklist`}>{t("jobs.actions.viewchecklist")}</Link>
-        }
-      ],
-      rome: "USE_IMEX",
-      promanager: [
-        {
-          key: "toggleproduction",
-          id: "job-actions-toggleproduction",
-          disabled: !job.converted || jobRO,
-          label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
-        }
-      ]
-    }),
-    ...(InstanceRenderManager({
-      imex: true,
-      rome: "USE_IMEX",
-      promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-    })
-      ? [
-          {
-            key: "entertimetickets",
-            id: "job-actions-entertimetickets",
-            disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
-            label: t("timetickets.actions.enter"),
-            onClick: () => {
-              logImEXEvent("job_header_enter_time_ticekts");
+    {
+      key: "intake",
+      id: "job-actions-intake",
+      disabled: !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO,
+      label:
+        !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO ? (
+          <LockerWrapperComponent featureName="checklist">{t("jobs.actions.intake")}</LockerWrapperComponent>
+        ) : (
+          <Link to={`/manage/jobs/${job.id}/intake`}>
+            <LockerWrapperComponent featureName="checklist">{t("jobs.actions.intake")}</LockerWrapperComponent>
+          </Link>
+        )
+    },
+    {
+      key: "deliver",
+      id: "job-actions-deliver",
+      disabled: !jobInProduction || jobRO,
+      label: !jobInProduction ? (
+        <LockerWrapperComponent disabled featureName="checklist">
+          {t("jobs.actions.deliver")}
+        </LockerWrapperComponent>
+      ) : (
+        <Link to={`/manage/jobs/${job.id}/deliver`}>
+          <LockerWrapperComponent disabled featureName="checklist">
+            {t("jobs.actions.deliver")}
+          </LockerWrapperComponent>
+        </Link>
+      )
+    },
+    {
+      key: "checklist",
+      id: "job-actions-checklist",
+      disabled: !job.converted,
+      label: (
+        <Link to={`/manage/jobs/${job.id}/checklist`}>
+          <LockerWrapperComponent featureName="checklist">{t("jobs.actions.viewchecklist")}</LockerWrapperComponent>
+        </Link>
+      )
+    },
+    {
+      key: "toggleproduction",
+      id: "job-actions-toggleproduction",
+      disabled: !job.converted || jobRO,
+      label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
+    },

-              setTimeTicketContext({
-                actions: {},
-                context: {
-                  jobId: job.id,
-                  created_by: currentUser.displayName
-                    ? currentUser.email.concat(" | ", currentUser.displayName)
-                    : currentUser.email
-                }
-              });
+    {
+      key: "entertimetickets",
+      id: "job-actions-entertimetickets",
+      disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
+      label: (
+        <LockerWrapperComponent featureName="timetickets">{t("timetickets.actions.enter")}</LockerWrapperComponent>
+      ),
+      onClick: () => {
+        logImEXEvent("job_header_enter_time_ticekts");
+
+        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
+          setTimeTicketContext({
+            actions: {},
+            context: {
+              jobId: job.id,
+              created_by: currentUser.displayName
+                ? currentUser.email.concat(" | ", currentUser.displayName)
+                : currentUser.email
            }
-          }
-        ]
-      : [])
+          });
+      }
+    }
  ];

  if (bodyshop.md_tasks_presets.enable_tasks) {
@@ -760,14 +762,15 @@ export function JobsDetailHeaderActions({
    key: "enterpayments",
    id: "job-actions-enterpayments",
    disabled: !job.converted,
-    label: t("menus.header.enterpayment"),
+    label: <LockerWrapperComponent featureName="payments">{t("menus.header.enterpayment")}</LockerWrapperComponent>,
    onClick: () => {
      logImEXEvent("job_header_enter_payment");

-      setPaymentContext({
-        actions: {},
-        context: { jobid: job.id }
-      });
+      HasFeatureAccess({ featureName: "payments", bodyshop }) &&
+        setPaymentContext({
+          actions: {},
+          context: { jobid: job.id }
+        });
    }
  });

@@ -788,18 +791,18 @@ export function JobsDetailHeaderActions({
    });
  }

-  if (HasFeatureAccess({ featureName: "courtesycars", bodyshop })) {
-    menuItems.push({
-      key: "cccontract",
-      id: "job-actions-cccontract",
-      disabled: jobRO || !job.converted,
-      label: (
-        <Link state={{ jobId: job.id }} to="/manage/courtesycars/contracts/new">
+  menuItems.push({
+    key: "cccontract",
+    id: "job-actions-cccontract",
+    disabled: jobRO || !job.converted,
+    label: (
+      <Link state={{ jobId: job.id }} to="/manage/courtesycars/contracts/new">
+        <LockerWrapperComponent featureName="courtesycars">
          {t("menus.jobsactions.newcccontract")}
-        </Link>
-      )
-    });
-  }
+        </LockerWrapperComponent>
+      </Link>
+    )
+  });

  menuItems.push({
    key: "createtask",
@@ -884,30 +887,23 @@ export function JobsDetailHeaderActions({
        }
      ]
    },
-    ...(InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "bills", bodyshop })
-    })
-      ? [
-          {
-            key: "postbills",
-            id: "job-actions-postbills",
-            disabled: !job.converted,
-            label: t("jobs.actions.postbills"),
-            onClick: () => {
-              logImEXEvent("job_header_enter_bills");

-              setBillEnterContext({
-                actions: { refetch: refetch },
-                context: {
-                  job: job
-                }
-              });
+    {
+      key: "postbills",
+      id: "job-actions-postbills",
+      disabled: !job.converted,
+      label: <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>,
+      onClick: () => {
+        logImEXEvent("job_header_enter_bills");
+        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
+          setBillEnterContext({
+            actions: { refetch: refetch },
+            context: {
+              job: job
            }
-          }
-        ]
-      : []),
+          });
+      }
+    },

    {
      key: "addtopartsqueue",
@@ -922,7 +918,7 @@ export function JobsDetailHeaderActions({
          }
        });

-        if (!!!result.errors) {
+        if (!result.errors) {
          notification["success"]({
            message: t("jobs.successes.partsqueue")
          });
@@ -966,80 +962,70 @@ export function JobsDetailHeaderActions({
    }
  );

-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "export", bodyshop })
-    })
-  ) {
-    menuItems.push({
-      key: "exportcustdata",
-      id: "job-actions-exportcustdata",
-      disabled: !job.converted,
-      label: t("jobs.actions.exportcustdata"),
-      onClick: handleExportCustData
-    });
-  }
+  menuItems.push({
+    key: "exportcustdata",
+    id: "job-actions-exportcustdata",
+    disabled: !(job.converted && HasFeatureAccess({ bodyshop, featureName: "export" })),
+    label: <LockerWrapperComponent featureName="export">{t("jobs.actions.exportcustdata")}</LockerWrapperComponent>,
+    onClick: handleExportCustData
+  });

-  if (HasFeatureAccess({ featureName: "csi", bodyshop })) {
-    const children = [
-      {
-        key: "email",
-        id: "job-actions-email",
-        disabled: !!!job.ownr_ea,
-        label: t("general.labels.email"),
-        onClick: handleCreateCsi
-      },
-      {
-        key: "text",
-        id: "job-actions-text",
-        disabled: !!!job.ownr_ph1,
-        label: t("general.labels.text"),
-        onClick: handleCreateCsi
-      },
-      {
-        key: "generate",
-        id: "job-actions-generate",
-        disabled: job.csiinvites && job.csiinvites.length > 0,
-        label: t("jobs.actions.generatecsi"),
-        onClick: handleCreateCsi
-      }
-    ];
-
-    if (job?.csiinvites?.length) {
-      children.push(
-        {
-          type: "divider"
-        },
-        ...job.csiinvites.map((item, idx) => {
-          return item.completedon
-            ? {
-                key: idx,
-                label: (
-                  <Link to={`/manage/shop/csi?responseid=${item.id}`}>
-                    <DateTimeFormatter>{item.completedon}</DateTimeFormatter>
-                  </Link>
-                )
-              }
-            : {
-                key: idx,
-                onClick: () => {
-                  navigator.clipboard.writeText(`${window.location.protocol}//${window.location.host}/csi/${item.id}`);
-                },
-                label: t("general.actions.copylink")
-              };
-        })
-      );
+  const children = [
+    {
+      key: "email",
+      id: "job-actions-email",
+      disabled: !(job.ownr_ea && HasFeatureAccess({ bodyshop, featureName: "csi" })),
+      label: <LockerWrapperComponent featureName="checklist">{t("general.labels.email")}</LockerWrapperComponent>,
+      onClick: handleCreateCsi
+    },
+    {
+      key: "text",
+      id: "job-actions-text",
+      disabled: !(job.ownr_ph1 && HasFeatureAccess({ bodyshop, featureName: "csi" })),
+      label: <LockerWrapperComponent featureName="checklist">{t("general.labels.text")}</LockerWrapperComponent>,
+      onClick: handleCreateCsi
+    },
+    {
+      key: "generate",
+      id: "job-actions-generate",
+      disabled: job.csiinvites?.length > 0 || !HasFeatureAccess({ bodyshop, featureName: "csi" }),
+      label: <LockerWrapperComponent featureName="checklist">{t("jobs.actions.generatecsi")}</LockerWrapperComponent>,
+      onClick: handleCreateCsi
    }
-    menuItems.push({
-      key: "sendcsi",
-      id: "job-actions-sendcsi",
-      label: t("jobs.actions.sendcsi"),
-      disabled: !job.converted,
-      children
-    });
+  ];
+
+  if (job?.csiinvites?.length) {
+    children.push(
+      {
+        type: "divider"
+      },
+      ...job.csiinvites.map((item, idx) => {
+        return item.completedon
+          ? {
+              key: idx,
+              label: (
+                <Link to={`/manage/shop/csi?responseid=${item.id}`}>
+                  <DateTimeFormatter>{item.completedon}</DateTimeFormatter>
+                </Link>
+              )
+            }
+          : {
+              key: idx,
+              onClick: () => {
+                navigator.clipboard.writeText(`${window.location.protocol}//${window.location.host}/csi/${item.id}`);
+              },
+              label: t("general.actions.copylink")
+            };
+      })
+    );
  }
+  menuItems.push({
+    key: "sendcsi",
+    id: "job-actions-sendcsi",
+    label: <LockerWrapperComponent featureName="checklist">{t("jobs.actions.sendcsi")}</LockerWrapperComponent>,
+    disabled: !job.converted,
+    children
+  });

  menuItems.push({
    key: "jobcosting",
@@ -1079,7 +1065,7 @@ export function JobsDetailHeaderActions({
  menuItems.push({
    key: "manualevent",
    id: "job-actions-manualevent",
-    onClick: (e) => {
+    onClick: () => {
      setVisibility(true);
    },
    label: t("appointments.labels.manualevent")
--- 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
@@ -168,8 +168,8 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
      getPopupContainer={(trigger) => trigger.parentNode}
      trigger="click"
    >
-      {scenario === "pre" && t("jobs.actions.intake")}
-      {scenario === "prod" && t("jobs.actions.deliver")}
+      {scenario === "pre" && t("jobs.actions.intake_quick")}
+      {scenario === "prod" && t("jobs.actions.deliver_quick")}
    </Popover>
  );
 }
--- a/client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx
+++ b/client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx
@@ -4,10 +4,9 @@ import AlertComponent from "../alert/alert.component";
 import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container";
 import BillsListTable from "../bills-list-table/bills-list-table.component";
 import JobBillsTotal from "../job-bills-total/job-bills-total.component";
+import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
 import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component";
 import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
-import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";

 export default function JobsDetailPliComponent({
  job,
@@ -22,16 +21,14 @@ export default function JobsDetailPliComponent({
      {billsQuery.error ? <AlertComponent message={billsQuery.error.message} type="error" /> : null}
      <BillDetailEditcontainer />
      <Row gutter={[16, 16]}>
-        <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-          <Col span={24}>
-            <JobBillsTotal
-              bills={billsQuery.data ? billsQuery.data.bills : []}
-              partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
-              loading={billsQuery.loading}
-              jobTotals={job.job_totals}
-            />
-          </Col>
-        </FeatureWrapperComponent>
+        <Col span={24}>
+          <JobBillsTotal
+            bills={billsQuery.data ? billsQuery.data.bills : []}
+            partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
+            loading={billsQuery.loading}
+            jobTotals={job.job_totals}
+          />
+        </Col>
        <Col span={24}>
          <PartsOrderListTableComponent
            job={job}
@@ -39,11 +36,9 @@ export default function JobsDetailPliComponent({
            billsQuery={billsQuery}
          />
        </Col>
-        <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-          <Col span={24}>
-            <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
-          </Col>
-        </FeatureWrapperComponent>
+        <Col span={24}>
+          <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
+        </Col>
        <Col span={24}>
          <PartsDispatchTable job={job} handleOnRowClick={handlePartsDispatchOnRowClick} billsQuery={billsQuery} />
        </Col>
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
@@ -194,8 +194,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
            <JobsDetailRatesOther form={form} />
            <JobsDetailRatesTaxes form={form} />
          </>
-        ),
-        promanager: "USE_ROME"
+        )
      })}
    </div>
  );
--- a/client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx
+++ b/client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx
@@ -989,7 +989,7 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
          <Form.Item label={t("jobs.fields.tax_str_rt")} name="tax_str_rt">
            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
          </Form.Item>
-          {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
+          {InstanceRenderManager({ imex: true, rome: false }) ? (
            <>
              <Form.Item label={t("jobs.fields.tax_paint_mat_rt")} name="tax_paint_mat_rt">
                <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
@@ -1002,7 +1002,7 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
          <Form.Item label={t("jobs.fields.tax_sub_rt")} name="tax_sub_rt">
            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
          </Form.Item>
-          {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
+          {InstanceRenderManager({ imex: true, rome: false }) ? (
            <Form.Item label={t("jobs.fields.tax_lbr_rt")} name="tax_lbr_rt">
              <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
            </Form.Item>
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -13,8 +13,19 @@ import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.sel

 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});

 function JobsDocumentsComponent({
+  bodyshop,
  data,
  jobId,
  refetch,
@@ -103,7 +114,8 @@ function JobsDocumentsComponent({
    );
    setgalleryImages(documents);
  }, [data, setgalleryImages, t]);
-
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+  const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
  return (
    <div>
      <Row gutter={[16, 16]}>
@@ -118,6 +130,14 @@ function JobsDocumentsComponent({
            {!billId && <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={refetch} />}
          </Space>
        </Col>
+        {!hasMediaAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
+            </Card>
+          </Col>
+        )}
+
        <Col span={24}>
          <Card>
            <DocumentsUploadComponent
@@ -129,7 +149,13 @@ function JobsDocumentsComponent({
            />
          </Card>
        </Col>
-
+        {hasMediaAccess && !hasMobileAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent upsell={upsellEnum().media.mobile} />
+            </Card>
+          </Col>
+        )}
        <Col span={24}>
          <Card title={t("jobs.labels.documents-images")}>
            <Gallery
@@ -219,4 +245,4 @@ function JobsDocumentsComponent({
  );
 }

-export default JobsDocumentsComponent;
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsComponent);
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
@@ -1,5 +1,5 @@
 import { FileExcelFilled, SyncOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Space } from "antd";
+import { Alert, Button, Card, Col, Row, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
@@ -17,6 +17,8 @@ import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-

 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -84,98 +86,120 @@ export function JobsDocumentsLocalGallery({
          { images: [], other: [] }
        )
      : { images: [], other: [] };
-
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
  return (
    <div>
-      <Space wrap>
-        <Button
-          onClick={() => {
-            if (job) {
-              if (invoice_number) {
-                getBillMedia({ jobid: job.id, invoice_number });
-              } else {
-                getJobMedia(job.id);
-              }
-            }
-          }}
-        >
-          <SyncOutlined />
-        </Button>
-        <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
-          <Button>{t("documents.labels.openinexplorer")}</Button>
-        </a>
-        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
-        <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
-        <JobsLocalGalleryDownloadButton job={job} />
-        <JobsDocumentsLocalDeleteButton jobid={job.id} />
-      </Space>
-      <Card>
-        <DocumentsLocalUploadComponent job={job} invoice_number={invoice_number} vendorid={vendorid} allowAllTypes />
-      </Card>
-      <Card title={t("jobs.labels.documents-images")}>
-        <Gallery
-          images={jobMedia.images}
-          onSelect={(index, image) => {
-            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          }}
-          {...(optimized && {
-            customControls: [
-              <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
-            ]
-          })}
-          onClick={(index) => {
-            setModalState({ open: true, index: index });
-            // const media = allMedia[job.id].find(
-            //   (m) => m.optimized === item.src
-            // );
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              onClick={() => {
+                if (job) {
+                  if (invoice_number) {
+                    getBillMedia({ jobid: job.id, invoice_number });
+                  } else {
+                    getJobMedia(job.id);
+                  }
+                }
+              }}
+            >
+              <SyncOutlined />
+            </Button>
+            <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
+              <Button>{t("documents.labels.openinexplorer")}</Button>
+            </a>
+            <JobsDocumentsLocalGalleryReassign jobid={job.id} />
+            <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
+            <JobsLocalGalleryDownloadButton job={job} />
+            <JobsDocumentsLocalDeleteButton jobid={job.id} />
+          </Space>
+        </Col>
+        {!hasMediaAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
+            </Card>
+          </Col>
+        )}
+        <Col span={24}>
+          <Card>
+            <DocumentsLocalUploadComponent
+              job={job}
+              invoice_number={invoice_number}
+              vendorid={vendorid}
+              allowAllTypes
+            />
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-images")}>
+            <Gallery
+              images={jobMedia.images}
+              onSelect={(index, image) => {
+                toggleMediaSelected({ jobid: job.id, filename: image.filename });
+              }}
+              {...(optimized && {
+                customControls: [
+                  <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
+                ]
+              })}
+              onClick={(index) => {
+                setModalState({ open: true, index: index });
+                // const media = allMedia[job.id].find(
+                //   (m) => m.optimized === item.src
+                // );

-            // window.open(
-            //   media ? media.fullsize : item.fullsize,
-            //   "_blank",
-            //   "toolbar=0,location=0,menubar=0"
-            // );
-          }}
-        />
-      </Card>
-      <Card title={t("jobs.labels.documents-other")}>
-        <Gallery
-          images={jobMedia.other}
-          thumbnailStyle={() => {
-            return {
-              backgroundImage: <FileExcelFilled />,
-              height: "100%",
-              width: "100%",
-              cursor: "pointer"
-            };
-          }}
-          onClick={(index) => {
-            window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
-          }}
-          onSelect={(index, image) => {
-            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          }}
-        />
-      </Card>
-      {modalState.open && (
-        <Lightbox
-          mainSrc={jobMedia.images[modalState.index].fullsize}
-          nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
-          prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
-          onCloseRequest={() => setModalState({ open: false, index: 0 })}
-          onMovePrevRequest={() =>
-            setModalState({
-              ...modalState,
-              index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
-            })
-          }
-          onMoveNextRequest={() =>
-            setModalState({
-              ...modalState,
-              index: (modalState.index + 1) % jobMedia.images.length
-            })
-          }
-        />
-      )}
+                // window.open(
+                //   media ? media.fullsize : item.fullsize,
+                //   "_blank",
+                //   "toolbar=0,location=0,menubar=0"
+                // );
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-other")}>
+            <Gallery
+              images={jobMedia.other}
+              thumbnailStyle={() => {
+                return {
+                  backgroundImage: <FileExcelFilled />,
+                  height: "100%",
+                  width: "100%",
+                  cursor: "pointer"
+                };
+              }}
+              onClick={(index) => {
+                window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
+              }}
+              onSelect={(index, image) => {
+                toggleMediaSelected({ jobid: job.id, filename: image.filename });
+              }}
+            />
+          </Card>
+        </Col>
+        {modalState.open && (
+          <Lightbox
+            mainSrc={jobMedia.images[modalState.index].fullsize}
+            nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
+            prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
+            onCloseRequest={() => setModalState({ open: false, index: 0 })}
+            onMovePrevRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
+              })
+            }
+            onMoveNextRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + 1) % jobMedia.images.length
+              })
+            }
+          />
+        )}
+      </Row>
    </div>
  );
 }
--- a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
@@ -12,7 +12,8 @@ import { alphaSort } from "../../utils/sorters";
 import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
 import "./labor-allocations-table.styles.scss";
 import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
-
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician
@@ -190,6 +191,7 @@ export function LaborAllocationsTable({
    warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
  }

+  const hasTimeTicketAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
@@ -199,7 +201,16 @@ export function LaborAllocationsTable({
            rowKey={(record) => `${record.cost_center} ${record.mod_lbr_ty}`}
            pagination={false}
            onChange={handleTableChange}
-            dataSource={totals}
+            dataSource={hasTimeTicketAccess ? totals : []}
+            locale={{
+              ...(!hasTimeTicketAccess && {
+                emptyText: (
+                  <Card>
+                    <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
+                  </Card>
+                )
+              })
+            }}
            scroll={{
              x: true
            }}
@@ -233,7 +244,16 @@ export function LaborAllocationsTable({
              columns={convertedTableCols}
              rowKey="id"
              pagination={false}
-              dataSource={convertedLines}
+              dataSource={hasTimeTicketAccess ? convertedLines : []}
+              locale={{
+                ...(!hasTimeTicketAccess && {
+                  emptyText: (
+                    <Card>
+                      <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
+                    </Card>
+                  )
+                })
+              }}
              scroll={{
                x: true
              }}
--- a/client/src/components/loading-spinner/loading-spinner.component.jsx
+++ b/client/src/components/loading-spinner/loading-spinner.component.jsx
@@ -12,7 +12,6 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
          position: "relative",
          alignContent: "center"
        }}
-        // TODO: Client Update - if anything funky happens check this out
        {...(props.children ? { tip: message ? message : null } : {})}
        delay={200}
        // TODO: Client Update - tip only works when there are actually children, and this component is used in a lot of places where there are no children
--- a/client/src/components/lock-wrapper/lock-wrapper.component.jsx
+++ b/client/src/components/lock-wrapper/lock-wrapper.component.jsx
@@ -0,0 +1,38 @@
+import { LockOutlined } from "@ant-design/icons";
+import { Space } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  recentItems: selectRecentItems,
+  selectedHeader: selectSelectedHeader,
+  bodyshop: selectBodyshop
+});
+
+const LockWrapper = ({ featureName, bodyshop, children, disabled = true }) => {
+  let renderedChildren = children;
+
+  if (disabled) {
+    renderedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          disabled: true
+        });
+      }
+      return child;
+    });
+  }
+
+  return (
+    <Space>
+      {!HasFeatureAccess({ featureName: featureName, bodyshop }) && <LockOutlined style={{ color: "tomato" }} />}
+      {renderedChildren}
+    </Space>
+  );
+};
+export default connect(mapStateToProps, null)(LockWrapper);
--- a/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
@@ -20,7 +20,8 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
 import DataLabel from "../data-label/data-label.component";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
 import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
 import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
@@ -169,40 +170,44 @@ export function PartsOrderListTableDrawerComponent({
          <DeleteFilled />
        </Button>
      </Popconfirm>
-      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-        <Button
-          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
-          onClick={() => {
-            logImEXEvent("parts_order_receive_bill");
-            setBillEnterContext({
-              actions: { refetch: refetch },
-              context: {
-                job: job,
-                bill: {
-                  vendorid: record.vendor.id,
-                  is_credit_memo: record.return,
-                  billlines: record.parts_order_lines.map((pol) => ({
-                    joblineid: pol.job_line_id || "noline",
-                    line_desc: pol.line_desc,
-                    quantity: pol.quantity,
-                    actual_price: pol.act_price,
-                    cost_center: pol.jobline?.part_type
-                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                        ? pol.jobline.part_type !== "PAE"
-                          ? pol.jobline.part_type
-                          : null
-                        : responsibilityCenters.defaults &&
-                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                      : null
-                  }))
-                }
+
+      <Button
+        disabled={
+          (jobRO ? !record.return : jobRO) ||
+          record.vendor.id === bodyshop.inhousevendorid ||
+          !HasFeatureAccess({ bodyshop, featureName: "bills" })
+        }
+        onClick={() => {
+          logImEXEvent("parts_order_receive_bill");
+          setBillEnterContext({
+            actions: { refetch: refetch },
+            context: {
+              job: job,
+              bill: {
+                vendorid: record.vendor.id,
+                is_credit_memo: record.return,
+                billlines: record.parts_order_lines.map((pol) => ({
+                  joblineid: pol.job_line_id || "noline",
+                  line_desc: pol.line_desc,
+                  quantity: pol.quantity,
+                  actual_price: pol.act_price,
+                  cost_center: pol.jobline?.part_type
+                    ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                      ? pol.jobline.part_type !== "PAE"
+                        ? pol.jobline.part_type
+                        : null
+                      : responsibilityCenters.defaults &&
+                        (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
+                    : null
+                }))
              }
-            });
-          }}
-        >
-          {t("parts_orders.actions.receivebill")}
-        </Button>
-      </FeatureWrapperComponent>
+            }
+          });
+        }}
+      >
+        <LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
+      </Button>
+
      <PrintWrapper
        templateObject={{
          name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,
--- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
@@ -14,7 +14,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
 import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
@@ -140,45 +141,49 @@ export function PartsOrderListTableComponent({
          <DeleteFilled />
        </Button>
      </Popconfirm>
-      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-        <Button
-          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
-          onClick={() => {
-            logImEXEvent("parts_order_receive_bill");

-            setBillEnterContext({
-              actions: { refetch: refetch },
-              context: {
-                job: job,
-                bill: {
-                  vendorid: record.vendor.id,
-                  is_credit_memo: record.return,
-                  billlines: record.parts_order_lines.map((pol) => {
-                    return {
-                      joblineid: pol.job_line_id || "noline",
-                      line_desc: pol.line_desc,
-                      quantity: pol.quantity,
+      <Button
+        disabled={
+          (jobRO ? !record.return : jobRO) ||
+          record.vendor.id === bodyshop.inhousevendorid ||
+          !HasFeatureAccess({ bodyshop, featureName: "bills" })
+        }
+        onClick={() => {
+          logImEXEvent("parts_order_receive_bill");

-                      actual_price: pol.act_price,
+          setBillEnterContext({
+            actions: { refetch: refetch },
+            context: {
+              job: job,
+              bill: {
+                vendorid: record.vendor.id,
+                is_credit_memo: record.return,
+                billlines: record.parts_order_lines.map((pol) => {
+                  return {
+                    joblineid: pol.job_line_id || "noline",
+                    line_desc: pol.line_desc,
+                    quantity: pol.quantity,

-                      cost_center: pol.jobline?.part_type
-                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                          ? pol.jobline.part_type !== "PAE"
-                            ? pol.jobline.part_type
-                            : null
-                          : responsibilityCenters.defaults &&
-                            (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                        : null
-                    };
-                  })
-                }
+                    actual_price: pol.act_price,
+
+                    cost_center: pol.jobline?.part_type
+                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                        ? pol.jobline.part_type !== "PAE"
+                          ? pol.jobline.part_type
+                          : null
+                        : responsibilityCenters.defaults &&
+                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
+                      : null
+                  };
+                })
              }
-            });
-          }}
-        >
-          {t("parts_orders.actions.receivebill")}
-        </Button>
-      </FeatureWrapperComponent>
+            }
+          });
+        }}
+      >
+        <LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
+      </Button>
+
      <PrintWrapper
        templateObject={{
          name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,
--- a/client/src/components/production-board-kanban/settings/defaultKanbanSettings.js
+++ b/client/src/components/production-board-kanban/settings/defaultKanbanSettings.js
@@ -12,8 +12,7 @@ const statisticsItems = [
    name: "totalHrsOnBoard",
    label: InstanceRenderManager({
      imex: "total_hours_in_view",
-      rome: "total_hours_on_board",
-      promanager: "total_hours_on_board"
+      rome: "total_hours_on_board"
    })
  },
  {
@@ -21,8 +20,7 @@ const statisticsItems = [
    name: "totalAmountOnBoard",
    label: InstanceRenderManager({
      imex: "total_amount_in_view",
-      rome: "total_amount_on_board",
-      promanager: "total_amount_on_board"
+      rome: "total_amount_on_board"
    })
  },
  {
@@ -30,8 +28,7 @@ const statisticsItems = [
    name: "totalLABOnBoard",
    label: InstanceRenderManager({
      imex: "total_lab_in_view",
-      rome: "total_lab_on_board",
-      promanager: "total_lab_on_board"
+      rome: "total_lab_on_board"
    })
  },
  {
@@ -39,8 +36,7 @@ const statisticsItems = [
    name: "totalLAROnBoard",
    label: InstanceRenderManager({
      imex: "total_lar_in_view",
-      rome: "total_lar_on_board",
-      promanager: "total_lar_on_board"
+      rome: "total_lar_on_board"
    })
  },
  {
@@ -48,8 +44,7 @@ const statisticsItems = [
    name: "jobsOnBoard",
    label: InstanceRenderManager({
      imex: "total_jobs_in_view",
-      rome: "total_jobs_on_board",
-      promanager: "total_jobs_on_board"
+      rome: "total_jobs_on_board"
    })
  },
  {
@@ -57,8 +52,7 @@ const statisticsItems = [
    name: "tasksOnBoard",
    label: InstanceRenderManager({
      imex: "tasks_in_view",
-      rome: "tasks_on_board",
-      promanager: "tasks_on_board"
+      rome: "tasks_on_board"
    })
  },
  { id: 11, name: "tasksInProduction", label: "tasks_in_production" }
--- a/client/src/components/production-list-columns/production-list-columns.data.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.data.jsx
@@ -466,8 +466,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
      title: i18n.t(
        InstanceRenderManager({
          imex: "jobs.fields.employee_csr",
-          rome: "jobs.fields.employee_csr_writer",
-          promanager: "USE_ROME"
+          rome: "jobs.fields.employee_csr_writer"
        })
      ),
      dataIndex: "employee_csr",
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -16,6 +16,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import dayjs from "../../utils/day";
 import EmployeeSearchSelectEmail from "../employee-search-select/employee-search-select-email.component";
 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 VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
@@ -130,10 +131,13 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
  const grouped = _.groupBy(FilteredReportsList, "group");

  const groupExcludeKeyFilter = [
-    ...(!HasFeatureAccess({ featureName: "bills", bodyshop }) ? ["purchases"] : []),
-    ...(!HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? ["payroll"] : [])
+    ...(!HasFeatureAccess({ featureName: "bills", bodyshop }) ? [{ key: "purchases", featureName: "bills" }] : []),
+    ...(!HasFeatureAccess({ featureName: "timetickets", bodyshop })
+      ? [{ key: "payroll", featureName: "timetickets" }]
+      : [])
  ];

+  //TODO: Find a way to filter out / blur on demand.
  return (
    <div>
      <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
@@ -151,15 +155,9 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
          ]}
        >
          <Radio.Group>
-            {/* {Object.keys(Templates).map((key) => (
-                <Radio key={key} value={key}>
-                  {Templates[key].title}
-                </Radio>
-              ))} */}
-
            <Row gutter={[16, 16]}>
              {Object.keys(grouped)
-                .filter((key) => !groupExcludeKeyFilter.includes(key))
+                //.filter((key) => !groupExcludeKeyFilter.includes(key))
                .map((key) => (
                  <Col md={8} sm={12} key={key}>
                    <Card.Grid
@@ -171,15 +169,31 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                      }}
                    >
                      <Typography.Title level={4}>{t(`reportcenter.labels.groups.${key}`)}</Typography.Title>
-                      <ul style={{ listStyleType: "none", columns: "2 auto" }}>
-                        {grouped[key].map((item) => (
-                          <li key={item.key}>
-                            <Radio key={item.key} value={item.key}>
-                              {item.title}
-                            </Radio>
-                          </li>
-                        ))}
-                      </ul>
+                      {groupExcludeKeyFilter.find((g) => g.key === key) ? (
+                        <BlurWrapperComponent
+                          featureName={groupExcludeKeyFilter.find((g) => g.key === key).featureName}
+                        >
+                          <ul style={{ listStyleType: "none", columns: "2 auto" }}>
+                            {grouped[key].map((item) => (
+                              <li key={item.key}>
+                                <Radio key={item.key} value={item.key}>
+                                  {item.title}
+                                </Radio>
+                              </li>
+                            ))}
+                          </ul>
+                        </BlurWrapperComponent>
+                      ) : (
+                        <ul style={{ listStyleType: "none", columns: "2 auto" }}>
+                          {grouped[key].map((item) => (
+                            <li key={item.key}>
+                              <Radio key={item.key} value={item.key}>
+                                {item.title}
+                              </Radio>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
                    </Card.Grid>
                  </Col>
                ))}
@@ -284,7 +298,8 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                    {
                      validator: (_, value) => {
                        if (
-                          (!import.meta.env.VITE_APP_IS_TEST && import.meta.env.PROD) &&
+                          !import.meta.env.VITE_APP_IS_TEST &&
+                          import.meta.env.PROD &&
                          value &&
                          value[0] &&
                          value[1]
--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx
@@ -6,6 +6,8 @@ import { connect } from "react-redux";
 import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip } from "recharts";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import { UpsellMaskWrapper, upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -38,26 +40,34 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
    <div>
      <Space>
        {t("appointments.labels.expectedprodhrs")}
-        <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+        <BlurWrapperComponent featureName="smartscheduling">
+          <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+        </BlurWrapperComponent>
        {t("appointments.labels.expectedjobs")}
-        <strong>{loadData?.expectedJobCount}</strong>
+        <BlurWrapperComponent featureName="smartscheduling">
+          <strong>{loadData?.expectedJobCount}</strong>
+        </BlurWrapperComponent>
      </Space>
-      <RadarChart
-        // cx={300}
-        // cy={250}
-        // outerRadius={150}
-        width={800}
-        height={600}
-        data={data}
-      >
-        <PolarGrid />
-        <PolarAngleAxis dataKey="bucket" />
-        <PolarRadiusAxis angle={90} />
-        <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
-        <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
-        <Tooltip />
-        <Legend />
-      </RadarChart>
+      <UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>
+        <BlurWrapperComponent featureName="smartscheduling">
+          <RadarChart
+            // cx={300}
+            // cy={250}
+            // outerRadius={150}
+            width={800}
+            height={600}
+            data={data}
+          >
+            <PolarGrid />
+            <PolarAngleAxis dataKey="bucket" />
+            <PolarRadiusAxis angle={90} />
+            <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
+            <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
+            <Tooltip />
+            <Legend />
+          </RadarChart>
+        </BlurWrapperComponent>
+      </UpsellMaskWrapper>
    </div>
  );

--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Popover, Space } from "antd";
+import { Card, Popover, Space } from "antd";
 import _ from "lodash";
 import dayjs from "../../utils/day";

@@ -12,11 +12,12 @@ import { createStructuredSelector } from "reselect";
 import { selectScheduleLoad, selectScheduleLoadCalculating } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { default as BlurWrapper, default as BlurWrapperComponent } from "../feature-wrapper/blur-wrapper.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
-import InstanceRenderMgr from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum, UpsellMaskWrapper } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -58,38 +59,39 @@ export function ScheduleCalendarHeaderComponent({
        <tbody>
          {loadData && loadData.allJobsOut ? (
            loadData.allJobsOut.map((j) => (
-              <tr key={j.id}>
-                <td style={{ padding: "2.5px" }}>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> (
-                  {j.status})
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <OwnerNameDisplay ownerObject={j} />
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                  }/${(
-                    j.labhrs.aggregate?.sum?.mod_lb_hrs +
-                    j.larhrs.aggregate?.sum?.mod_lb_hrs
-                  ).toFixed(1)} ${t("general.labels.hours")})`}
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <DateTimeFormatter>
-                    {j.scheduled_completion}
-                  </DateTimeFormatter>
-                </td>
-              </tr>
+              <BlurWrapperComponent key={j.id} featureName="smartscheduling">
+                <tr>
+                  <td style={{ padding: "2.5px" }}>
+                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <OwnerNameDisplay ownerObject={j} />
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    }/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
+                      1
+                    )} ${t("general.labels.hours")})`}
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                  </td>
+                </tr>
+              </BlurWrapperComponent>
            ))
          ) : (
            <tr>
-              <td style={{ padding: "2.5px" }}>
-                {t("appointments.labels.nocompletingjobs")}
-              </td>
+              <BlurWrapperComponent featureName="smartscheduling">
+                <td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
+              </BlurWrapperComponent>
            </tr>
          )}
        </tbody>
      </table>
+      <Card style={{ maxWidth: "30rem" }}>
+        <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
+      </Card>
    </div>
  );

@@ -99,33 +101,37 @@ export function ScheduleCalendarHeaderComponent({
        <tbody>
          {loadData && loadData.allJobsIn ? (
            loadData.allJobsIn.map((j) => (
-              <tr key={j.id}>
-                <td style={{ padding: "2.5px" }}>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <OwnerNameDisplay ownerObject={j} />
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                  }/${(
-                    j.labhrs?.aggregate?.sum?.mod_lb_hrs +
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs
-                  ).toFixed(1)} ${t("general.labels.hours")})`}
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
-                </td>
-              </tr>
+              <BlurWrapperComponent key={j.id} featureName="smartscheduling">
+                <tr>
+                  <td style={{ padding: "2.5px" }}>
+                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <OwnerNameDisplay ownerObject={j} />
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
+                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    }/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
+                      1
+                    )} ${t("general.labels.hours")})`}
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
+                  </td>
+                </tr>
+              </BlurWrapperComponent>
            ))
          ) : (
            <tr>
-              <td style={{ padding: "2.5px" }}>
-                {t("appointments.labels.noarrivingjobs")}
-              </td>
+              <BlurWrapperComponent featureName="smartscheduling">
+                <td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
+              </BlurWrapperComponent>
            </tr>
          )}
+          <Card style={{ maxWidth: "30rem" }}>
+            <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
+          </Card>
        </tbody>
      </table>
    </div>
@@ -133,33 +139,36 @@ export function ScheduleCalendarHeaderComponent({

  const LoadComponent = loadData ? (
    <div>
-        <Space align="center">
-          <Popover
-            placement={"bottom"}
-            content={jobsInPopup}
-            trigger="hover"
-            title={t("appointments.labels.arrivingjobs")}
-          >
+      <Space align="center">
+        <Popover
+          placement={"bottom"}
+          content={jobsInPopup}
+          trigger="hover"
+          title={t("appointments.labels.arrivingjobs")}
+        >
+          <Space size="small">
            <Icon component={MdFileDownload} style={{ color: "green" }} />
-            {(loadData.allHoursInBody || 0) &&
-              loadData.allHoursInBody.toFixed(1)}
-            /
-            {(loadData.allHoursInRefinish || 0) &&
-              loadData.allHoursInRefinish.toFixed(1)}
-            /{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
-          </Popover>
-          <Popover
-            placement={"bottom"}
-            content={jobsOutPopup}
-            trigger="hover"
-            title={t("appointments.labels.completingjobs")}
-          >
+            <BlurWrapper featureName="smartscheduling">
+              <span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
+            </BlurWrapper>
+          </Space>
+        </Popover>
+        <Popover
+          placement={"bottom"}
+          content={jobsOutPopup}
+          trigger="hover"
+          title={t("appointments.labels.completingjobs")}
+        >
+          <Space size="small">
            <Icon component={MdFileUpload} style={{ color: "red" }} />
-            {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
-          </Popover>
-          <ScheduleCalendarHeaderGraph loadData={loadData} />
-        </Space>
-   
+            <BlurWrapper featureName="smartscheduling">
+              <span>{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}</span>
+            </BlurWrapper>
+          </Space>
+        </Popover>
+        <ScheduleCalendarHeaderGraph loadData={loadData} />
+      </Space>
+
      <div>
        <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
          {Object.keys(ATSToday).map((key, idx) => (
@@ -207,11 +216,7 @@ export function ScheduleCalendarHeaderComponent({
      <ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
        <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
          {label}
-          {InstanceRenderMgr({
-            imex: calculating ? <LoadingSkeleton /> : LoadComponent,
-            rome: "USE_IMEX",
-            promanager: <></>
-          })}
+          {calculating ? <LoadingSkeleton /> : LoadComponent}
        </div>
      </ScheduleBlockDay>
    </div>
--- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
@@ -1,20 +1,20 @@
-import dayjs from "../../utils/day";
+import { Alert, Collapse, Space } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { Calendar } from "react-big-calendar";
+import { Trans, useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { selectProblemJobs } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import dayjs from "../../utils/day";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import Event from "../job-at-change/schedule-event.container";
+import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
+import local from "./localizer";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
-import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
-import { selectProblemJobs } from "../../redux/application/application.selectors";
-import { Alert, Collapse, Space } from "antd";
-import { Trans, useTranslation } from "react-i18next";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import local from "./localizer";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -54,58 +54,54 @@ export function ScheduleCalendarWrapperComponent({
  return (
    <>
      <JobDetailCards />
-      {InstanceRenderManager({
-        imex:
-          problemJobs && problemJobs.length > 2 ? (
-            <Collapse style={{ marginBottom: "5px" }}>
-              <Collapse.Panel
-                key="1"
-                header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
-              >
-                <Space direction="vertical" style={{ width: "100%" }}>
-                  {problemJobs.map((problem) => (
-                    <Alert
-                      key={problem.id}
-                      type="error"
-                      message={
-                        <Trans
-                          i18nKey="appointments.labels.dataconsistency"
-                          components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
-                          values={{
-                            ro_number: problem.ro_number,
-                            code: problem.code
-                          }}
-                        />
-                      }
-                    />
-                  ))}
-                </Space>
-              </Collapse.Panel>
-            </Collapse>
-          ) : (
-            <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
-              {problemJobs.map((problem) => (
-                <Alert
-                  key={problem.id}
-                  type="error"
-                  message={
-                    <Trans
-                      i18nKey="appointments.labels.dataconsistency"
-                      components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
-                      values={{
-                        ro_number: problem.ro_number,
-                        code: problem.code
-                      }}
-                    />
-                  }
-                />
-              ))}
-            </Space>
-          ),
-
-        rome: "USE_IMEX",
-        promanager: <span />
-      })}
+      {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
+        problemJobs &&
+        (problemJobs.length > 2 ? (
+          <Collapse style={{ marginBottom: "5px" }}>
+            <Collapse.Panel
+              key="1"
+              header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
+            >
+              <Space direction="vertical" style={{ width: "100%" }}>
+                {problemJobs.map((problem) => (
+                  <Alert
+                    key={problem.id}
+                    type="error"
+                    message={
+                      <Trans
+                        i18nKey="appointments.labels.dataconsistency"
+                        components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                        values={{
+                          ro_number: problem.ro_number,
+                          code: problem.code
+                        }}
+                      />
+                    }
+                  />
+                ))}
+              </Space>
+            </Collapse.Panel>
+          </Collapse>
+        ) : (
+          <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
+            {problemJobs.map((problem) => (
+              <Alert
+                key={problem.id}
+                type="error"
+                message={
+                  <Trans
+                    i18nKey="appointments.labels.dataconsistency"
+                    components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                    values={{
+                      ro_number: problem.ro_number,
+                      code: problem.code
+                    }}
+                  />
+                }
+              />
+            ))}
+          </Space>
+        ))}

      <Calendar
        events={data}
--- a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -8,13 +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 InstanceRenderManager from "../../utils/instanceRenderMgr";
+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 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";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -64,6 +67,8 @@ export function ScheduleJobModalComponent({
    }
  };

+  const hasSmartSchedulingAccess = HasFeatureAccess({ bodyshop, featureName: "smartscheduling" });
+
  return (
    <Row gutter={[16, 16]}>
      <Col span={12}>
@@ -99,39 +104,46 @@ export function ScheduleJobModalComponent({
            <DateTimePicker onlyFuture />
          </Form.Item>
        </LayoutFormRow>
-        {InstanceRenderManager({
-          imex: (
-            <>
-              <Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
-              <Space wrap>
-                <Button onClick={handleSmartScheduling} loading={loading}>
+        {
+          <>
+            <Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
+            <Space wrap>
+              <Button onClick={handleSmartScheduling} loading={loading}>
+                <LockWrapperComponent featureName="smartscheduling">
                  {t("appointments.actions.calculate")}
+                </LockWrapperComponent>
+              </Button>
+
+              {smartOptions.map((d, idx) => (
+                <Button
+                  key={idx}
+                  className="imex-flex-row__margin"
+                  disabled={!hasSmartSchedulingAccess}
+                  onClick={() => {
+                    const ssDate = dayjs(d);
+                    if (ssDate.isBefore(dayjs())) {
+                      form.setFieldsValue({ start: dayjs() });
+                    } else {
+                      form.setFieldsValue({
+                        start: dayjs(d).add(8, "hour")
+                      });
+                    }
+                    handleDateBlur();
+                  }}
+                >
+                  <BlurWrapper featureName="smartscheduling">
+                    <span>
+                      <DateFormatter includeDay>{d}</DateFormatter>
+                    </span>
+                  </BlurWrapper>
                </Button>
-                {smartOptions.map((d, idx) => (
-                  <Button
-                    className="imex-flex-row__margin"
-                    key={idx}
-                    onClick={() => {
-                      const ssDate = dayjs(d);
-                      if (ssDate.isBefore(dayjs())) {
-                        form.setFieldsValue({ start: dayjs() });
-                      } else {
-                        form.setFieldsValue({
-                          start: dayjs(d).add(8, "hour")
-                        });
-                      }
-                      handleDateBlur();
-                    }}
-                  >
-                    <DateFormatter includeDay>{d}</DateFormatter>
-                  </Button>
-                ))}
-              </Space>
-            </>
-          ),
-          rome: "USE_IMEX",
-          promanager: <></>
-        })}
+              ))}
+              {smartOptions.length > 1 && hasSmartSchedulingAccess && (
+                <UpsellComponent upsell={upsellEnum().smartscheduling.general} />
+              )}
+            </Space>
+          </>
+        }

        <LayoutFormRow grow>
          <Form.Item name="notifyCustomer" valuePropName="checked" label={t("jobs.labels.appointmentconfirmation")}>
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -21,6 +21,8 @@ import queryString from "query-string";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -87,18 +89,14 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
      children: <ShopInfoResponsibilityCenterComponent form={form} />,
      id: "tab-shop-responsibilitycenters"
    },
-    ...InstanceRenderManager({
-      imex: [
-        {
-          key: "checklists",
-          label: t("bodyshop.labels.checklists"),
-          children: <ShopInfoIntakeChecklistComponent form={form} />,
-          id: "tab-shop-checklists"
-        }
-      ],
-      rome: "USE_IMEX",
-      promanager: []
-    }),
+
+    {
+      key: "checklists",
+      label: <LockWrapperComponent featureName="checklist">{t("bodyshop.labels.checklists")}</LockWrapperComponent>,
+      children: <ShopInfoIntakeChecklistComponent form={form} />,
+      disabled: HasFeatureAccess({ bodyshop, featureName: "checklist" }),
+      id: "tab-shop-checklists"
+    },
    {
      key: "laborrates",
      label: t("bodyshop.labels.laborrates"),
@@ -125,29 +123,22 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
          }
        ]
      : []),
-    ...InstanceRenderManager({
-      imex: [
-        {
-          key: "roguard",
-          label: t("bodyshop.labels.roguard.title"),
-          children: <ShopInfoRoGuard form={form} />,
-          id: "tab-shop-roguard"
-        }
-      ],
-      rome: "USE_IMEX",
-      promanager: []
-    }),
-    ...InstanceRenderManager({
-      imex: [],
-      rome: [
-        {
-          key: "intellipay",
-          label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
-          children: <ShopInfoIntellipay form={form} />
-        }
-      ],
-      promanager: []
-    })
+    ...(HasFeatureAccess({ featureName: "roguard", bodyshop })
+      ? [
+          {
+            key: "roguard",
+            label: t("bodyshop.labels.roguard.title"),
+            children: <ShopInfoRoGuard form={form} />,
+            id: "tab-shop-roguard"
+          }
+        ]
+      : []),
+
+    {
+      key: "intellipay",
+      label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
+      children: <ShopInfoIntellipay form={form} />
+    }
  ];
  return (
    <Card
--- a/client/src/components/shop-info/shop-info.rbac.component.jsx
+++ b/client/src/components/shop-info/shop-info.rbac.component.jsx
@@ -26,7 +26,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
    names: ["Simple_Inventory"],
    splitKey: bodyshop && bodyshop.imexshopid
  });
-  //TODO:AIO Ensure that there are no duplicates here, it seems like there may be.
  return (
    <RbacWrapper action="shop:rbac">
      <LayoutFormRow>
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
@@ -4043,8 +4043,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
              <Input />
            </Form.Item>
          </>
-        ),
-        promanager: "USE_ROME"
+        )
      })}

      {/*<LayoutFormRow id="local_tax">*/}
@@ -4336,7 +4335,6 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
      </LayoutFormRow>

      {InstanceRenderManager({
-        promanager: "USE_ROME",
        rome: (
          <LayoutFormRow header={<div>Adjustments</div>} id="refund">
            {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber ? (
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.taxes.component.jsx
@@ -2034,7 +2034,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
            <Form.Item label={t("jobs.fields.tax_str_rt")} name={["md_responsibility_centers", "tax_str_rt"]}>
              <InputNumber min={0} max={100} precision={4} />
            </Form.Item>
-            {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
+            {InstanceRenderManager({ imex: true, rome: false }) ? (
              <>
                <Form.Item
                  label={t("jobs.fields.tax_paint_mat_rt")}
@@ -2053,7 +2053,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
            <Form.Item label={t("jobs.fields.tax_sub_rt")} name={["md_responsibility_centers", "tax_sub_rt"]}>
              <InputNumber min={0} max={100} precision={4} />
            </Form.Item>
-            {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
+            {InstanceRenderManager({ imex: true, rome: false }) ? (
              <Form.Item label={t("jobs.fields.tax_lbr_rt")} name={["md_responsibility_centers", "tax_lbr_rt"]}>
                <InputNumber min={0} max={100} precision={4} />
              </Form.Item>
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -2,13 +2,23 @@ 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 { 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 InstanceRenderManager from "../../utils/instanceRenderMgr";

-export default function ShopInfoSchedulingComponent({ form }) {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ShopInfoSchedulingComponent({ form, bodyshop }) {
  const { t } = useTranslation();

  return (
@@ -167,138 +177,136 @@ export default function ShopInfoSchedulingComponent({ form }) {
          }}
        </Form.List>
      </LayoutFormRow>
-      {InstanceRenderManager({
-        imex: (
-          <LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
-            <Form.List name={["ssbuckets"]}>
-              {(fields, { add, remove, move }) => {
-                return (
-                  <div>
-                    {fields.map((field, index) => (
-                      <Form.Item key={field.key}>
-                        <LayoutFormRow noDivider>
-                          <Form.Item
-                            label={t("bodyshop.fields.ssbuckets.id")}
-                            key={`${index}id`}
-                            name={[field.name, "id"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
-                          >
-                            <Input />
-                          </Form.Item>
-                          <Form.Item
-                            label={t("bodyshop.fields.ssbuckets.label")}
-                            key={`${index}label`}
-                            name={[field.name, "label"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
-                          >
-                            <Input />
-                          </Form.Item>
+      {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
+        <LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
+          <Form.List name={["ssbuckets"]}>
+            {(fields, { add, remove, move }) => {
+              return (
+                <div>
+                  {fields.map((field, index) => (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow noDivider>
+                        <Form.Item
+                          label={t("bodyshop.fields.ssbuckets.id")}
+                          key={`${index}id`}
+                          name={[field.name, "id"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("bodyshop.fields.ssbuckets.label")}
+                          key={`${index}label`}
+                          name={[field.name, "label"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <Input />
+                        </Form.Item>

+                        <Form.Item
+                          label={t("bodyshop.fields.ssbuckets.gte")}
+                          key={`${index}gte`}
+                          name={[field.name, "gte"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <InputNumber />
+                        </Form.Item>
+
+                        <Form.Item
+                          label={t("bodyshop.fields.ssbuckets.lt")}
+                          key={`${index}lt`}
+                          name={[field.name, "lt"]}
+                        >
+                          <InputNumber />
+                        </Form.Item>
+
+                        <Form.Item
+                          label={t("bodyshop.fields.ssbuckets.target")}
+                          key={`${index}target`}
+                          name={[field.name, "target"]}
+                          rules={[
+                            {
+                              required: true
+                              //message: t("general.validation.required"),
+                            }
+                          ]}
+                        >
+                          <InputNumber />
+                        </Form.Item>
+
+                        <Space direction="horizontal">
                          <Form.Item
-                            label={t("bodyshop.fields.ssbuckets.gte")}
-                            key={`${index}gte`}
-                            name={[field.name, "gte"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
+                            label={
+                              <Space>
+                                {t("bodyshop.fields.ssbuckets.color")}
+                                <Button
+                                  size="small"
+                                  onClick={() => {
+                                    form.setFieldValue(["ssbuckets", field.name, "color"]);
+
+                                    form.setFields([
+                                      {
+                                        name: ["ssbuckets", field.name, "color"],
+                                        touched: true
+                                      }
+                                    ]);
+                                  }}
+                                >
+                                  Reset
+                                </Button>
+                              </Space>
+                            }
+                            key={`${index}color`}
+                            name={[field.name, "color"]}
                          >
-                            <InputNumber />
+                            <ColorPicker />
                          </Form.Item>
-
-                          <Form.Item
-                            label={t("bodyshop.fields.ssbuckets.lt")}
-                            key={`${index}lt`}
-                            name={[field.name, "lt"]}
-                          >
-                            <InputNumber />
-                          </Form.Item>
-
-                          <Form.Item
-                            label={t("bodyshop.fields.ssbuckets.target")}
-                            key={`${index}target`}
-                            name={[field.name, "target"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
-                          >
-                            <InputNumber />
-                          </Form.Item>
-
-                          <Space direction="horizontal">
-                            <Form.Item
-                              label={
-                                <Space>
-                                  {t("bodyshop.fields.ssbuckets.color")}
-                                  <Button
-                                    size="small"
-                                    onClick={() => {
-                                      form.setFieldValue(["ssbuckets", field.name, "color"]);
-
-                                      form.setFields([
-                                        {
-                                          name: ["ssbuckets", field.name, "color"],
-                                          touched: true
-                                        }
-                                      ]);
-                                    }}
-                                  >
-                                    Reset
-                                  </Button>
-                                </Space>
-                              }
-                              key={`${index}color`}
-                              name={[field.name, "color"]}
-                            >
-                              <ColorPicker />
-                            </Form.Item>
-                            <Space wrap>
-                              <DeleteFilled
-                                onClick={() => {
-                                  remove(field.name);
-                                }}
-                              />
-                              <FormListMoveArrows move={move} index={index} total={fields.length} />
-                            </Space>
+                          <Space wrap>
+                            <DeleteFilled
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                            <FormListMoveArrows move={move} index={index} total={fields.length} />
                          </Space>
-                        </LayoutFormRow>
-                      </Form.Item>
-                    ))}
-                    <Form.Item>
-                      <Button
-                        type="dashed"
-                        onClick={() => {
-                          add();
-                        }}
-                        style={{ width: "100%" }}
-                      >
-                        {t("bodyshop.actions.addbucket")}
-                      </Button>
+                        </Space>
+                      </LayoutFormRow>
                    </Form.Item>
-                  </div>
-                );
-              }}
-            </Form.List>
-          </LayoutFormRow>
-        ),
-        rome: "USE_IMEX",
-        promanager: null
-      })}
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("bodyshop.actions.addbucket")}
+                    </Button>
+                  </Form.Item>
+                </div>
+              );
+            }}
+          </Form.List>
+        </LayoutFormRow>
+      )}
    </div>
  );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoSchedulingComponent);
--- a/client/src/components/shop-info/shop-intellipay-config.component.jsx
+++ b/client/src/components/shop-info/shop-intellipay-config.component.jsx
@@ -1,6 +1,6 @@
-import {Alert, Form, Switch} from "antd";
+import { Alert, Form, Switch } from "antd";
 import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";

 import {connect} from "react-redux";
--- a/client/src/components/sign-in-form/sign-in-form.component.jsx
+++ b/client/src/components/sign-in-form/sign-in-form.component.jsx
@@ -8,10 +8,9 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import RomeLogo from "../../assets/RomeOnlineBlue.png";
 import ImEXOnlineLogo from "../../assets/logo192.png";
-import ProManagerLogo from "../../assets/promanager/ProManagerLogo.gif";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { emailSignInStart, sendPasswordReset } from "../../redux/user/user.actions";
 import { selectCurrentUser, selectLoginLoading, selectSignInError } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import "./sign-in-form.styles.scss";

@@ -49,21 +48,18 @@ export function SignInComponent({ emailSignInStart, currentUser, signInError, se
        <img
          src={InstanceRenderManager({
            imex: ImEXOnlineLogo,
-            rome: RomeLogo,
-            promanager: ProManagerLogo
+            rome: RomeLogo
          })}
-          width={InstanceRenderManager({ imex: 200, rome: 200, promanager: 450 })}
+          width={InstanceRenderManager({ imex: 200, rome: 200 })}
          alt={InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })}
        />
        <Typography.Title>
          {InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: null
+            rome: t("titles.romeonline")
          })}
        </Typography.Title>
      </div>
--- a/client/src/components/tech-login/tech-login.component.jsx
+++ b/client/src/components/tech-login/tech-login.component.jsx
@@ -37,8 +37,7 @@ export function TechLogin({ technician, loginError, loginLoading, techLoginStart
    document.title = t("titles.techconsole", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
  }, [t]);
--- a/client/src/components/time-ticket-list/time-ticket-list.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -14,6 +14,9 @@ import dayjs from "../../utils/day";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -39,7 +42,7 @@ export function TimeTicketList({
  extra
 }) {
  const [state, setState] = useState({
-    sortedInfo: { columnKey: 'date', order: 'descend' },
+    sortedInfo: { columnKey: "date", order: "descend" },
    filteredInfo: { text: "" }
  });

@@ -77,7 +80,7 @@ export function TimeTicketList({
    if (isShiftTicket) {
      return !(canEditShiftTickets && (!isCommitted || canEditCommittedTimeTickets));
    }
-    
+
    return !(canEditTimeTickets && (!isCommitted || canEditCommittedTimeTickets));
  };

@@ -277,6 +280,8 @@ export function TimeTicketList({
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };

+  const hasTimeTicketsAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
+
  return (
    <Card
      title={t("timetickets.labels.timetickets")}
@@ -284,7 +289,7 @@ export function TimeTicketList({
        <Space wrap>
          {jobId && bodyshop.md_tasks_presets.enable_tasks && (
            <Button
-              disabled={disabled}
+              disabled={disabled || !hasTimeTicketsAccess}
              onClick={() => {
                setTimeTicketTaskContext({
                  actions: { refetch: refetch },
@@ -292,7 +297,9 @@ export function TimeTicketList({
                });
              }}
            >
-              {t("timetickets.actions.claimtasks")}
+              <LockWrapperComponent featureName="timetickets">
+                {t("timetickets.actions.claimtasks")}
+              </LockWrapperComponent>
            </Button>
          )}
          {jobId &&
@@ -305,9 +312,9 @@ export function TimeTicketList({
                    ? currentUser.email.concat(" | ", currentUser.displayName)
                    : currentUser.email
                }}
-                disabled={disabled}
+                disabled={disabled || !hasTimeTicketsAccess}
              >
-                {t("timetickets.actions.enter")}
+                <LockWrapperComponent featureName="timetickets">{t("timetickets.actions.enter")}</LockWrapperComponent>
              </TimeTicketEnterButton>
            ))}
          {extra}
@@ -328,7 +335,7 @@ export function TimeTicketList({
        scroll={{
          x: true
        }}
-        dataSource={timetickets}
+        dataSource={hasTimeTicketsAccess ? timetickets : []}
        onChange={handleTableChange}
        summary={() => {
          if (Enhanced_Payroll.treatment === "on") return null;
@@ -338,7 +345,6 @@ export function TimeTicketList({
                <Table.Summary.Cell>{t("general.labels.totals")}</Table.Summary.Cell>
                <Table.Summary.Cell />
                <Table.Summary.Cell />
-                <Table.Summary.Cell />
                <Table.Summary.Cell>{totals.productivehrs.toFixed(1)}</Table.Summary.Cell>
                <Table.Summary.Cell>{totals.actualhrs.toFixed(1)}</Table.Summary.Cell>
                <Table.Summary.Cell>
@@ -354,6 +360,15 @@ export function TimeTicketList({
              </Table.Summary.Row>
            );
        }}
+        locale={{
+          ...(!hasTimeTicketsAccess && {
+            emptyText: (
+              <Card>
+                <UpsellComponent upsell={upsellEnum().timetickets.general} />
+              </Card>
+            )
+          })
+        }}
      />
    </Card>
  );
--- a/client/src/components/update-alert/update-alert.component.jsx
+++ b/client/src/components/update-alert/update-alert.component.jsx
@@ -76,8 +76,7 @@ export function UpdateAlert({ updateAvailable }) {
          time: (timeLeft / 1000).toFixed(0),
          app: InstanceRenderManager({
            imex: "$t(titles.imexonline)",
-            rome: "$t(titles.romeonline)",
-            promanager: "$t(titles.promanager)"
+            rome: "$t(titles.romeonline)"
          })
        }),
        placement: "bottomRight"
@@ -95,8 +94,7 @@ export function UpdateAlert({ updateAvailable }) {
      message={t("general.messages.newversiontitle", {
        app: InstanceRenderManager({
          imex: "$t(titles.imexonline)",
-          rome: "$t(titles.romeonline)",
-          promanager: "$t(titles.promanager)"
+          rome: "$t(titles.romeonline)"
        })
      })}
      showIcon
@@ -107,8 +105,7 @@ export function UpdateAlert({ updateAvailable }) {
            {t("general.messages.newversionmessage", {
              app: InstanceRenderManager({
                imex: "$t(titles.imexonline)",
-                rome: "$t(titles.romeonline)",
-                promanager: "$t(titles.promanager)"
+                rome: "$t(titles.romeonline)"
              })
            })}
          </Col>
--- a/client/src/components/upsell/upsell.component.jsx
+++ b/client/src/components/upsell/upsell.component.jsx
@@ -0,0 +1,238 @@
+import {
+  AppstoreAddOutlined,
+  BuildOutlined,
+  CalendarOutlined,
+  CarOutlined,
+  DashboardOutlined,
+  DollarOutlined,
+  LineChartOutlined,
+  MobileOutlined,
+  StarOutlined
+} from "@ant-design/icons";
+import { Button, Card, Result } from "antd";
+import i18n from "i18next";
+import React, { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import "./upsell.styles.scss";
+
+export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) {
+  const { t } = useTranslation();
+  const resultProps = upsell || upsellEnum[featureName][subFeatureName];
+
+  console.trace("***LOG  ~ file: upsell.component.jsx:22 ~ UpsellComponent ~ resultProps:", resultProps);
+  const componentRef = useRef(null);
+
+  useEffect(() => {
+    if (disableMask) return;
+    const parentElement = componentRef.current?.parentElement;
+    if (parentElement) {
+      const mask = document.createElement("div");
+      mask.style.position = "absolute";
+      mask.style.top = 0;
+      mask.style.left = 0;
+      mask.style.width = "100%";
+      mask.style.height = "100%";
+      mask.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+      // mask.style.zIndex = 9999;
+      parentElement.style.position = "relative";
+
+      parentElement.prepend(mask);
+
+      return () => {
+        parentElement.removeChild(mask);
+      };
+    }
+  }, [disableMask]);
+
+  if (!resultProps) return <Result status="info" title={t("upsell.messages.generic")} />;
+  return (
+    <div ref={componentRef}>
+      <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
+    </div>
+  );
+}
+//Kept in the same function as the result props line must mirror and doesnt warrant a separate function.
+export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureName }) {
+  const resultProps = upsell || upsellEnum[featureName][subFeatureName];
+  return (
+    <div className="mask-wrapper">
+      <div className="mask-content">{children}</div>
+      <div className="mask-overlay">
+        <Card size="small">
+          <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
+        </Card>
+      </div>
+    </div>
+  );
+}
+//This is kept in this function as pulling it out into it's own util/enum prevents passing JSX as an `extra` prop
+export const upsellEnum = () => ({
+  bills: {
+    autoreconcile: {
+      //icon: null,
+      title: i18n.t("upsell.messages.bills.autoreconcile.title"),
+      subTitle: i18n.t("upsell.messages.bills.autoreconcile.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    },
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.bills.general.title"),
+      subTitle: i18n.t("upsell.messages.bills.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  checklist: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.checklist.general.title"),
+      subTitle: i18n.t("upsell.messages.checklist.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  payments: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.payments.general.title"),
+      subTitle: i18n.t("upsell.messages.payments.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  audit: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.audit.general.title"),
+      subTitle: i18n.t("upsell.messages.audit.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  lifecycle: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.lifecycle.general.title"),
+      subTitle: i18n.t("upsell.messages.lifecycle.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null }
+    }
+  },
+  media: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.media.general.title"),
+      subTitle: i18n.t("upsell.messages.media.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null }
+    },
+    mobile: {
+      icon: <MobileOutlined />,
+      title: i18n.t("upsell.messages.media.mobile.title"),
+      subTitle: i18n.t("upsell.messages.media.mobile.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null }
+    }
+  },
+  timetickets: {
+    allocations: {
+      title: i18n.t("upsell.messages.timetickets.allocations.title"),
+      subTitle: i18n.t("upsell.messages.timetickets.allocations.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    general: {
+      title: i18n.t("upsell.messages.timetickets.general.title"),
+      subTitle: i18n.t("upsell.messages.timetickets.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  smartscheduling: {
+    general: {
+      icon: <CalendarOutlined />,
+      title: i18n.t("upsell.messages.smartscheduling.general.title"),
+      subTitle: i18n.t("upsell.messages.smartscheduling.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    hrsdelta: {
+      icon: <CarOutlined />,
+      title: i18n.t("upsell.messages.smartscheduling.hrsdelta.title"),
+      subTitle: i18n.t("upsell.messages.smartscheduling.hrsdelta.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    datepicker: {
+      icon: <CarOutlined />,
+      title: i18n.t("upsell.messages.smartscheduling.datepicker.title"),
+      subTitle: i18n.t("upsell.messages.smartscheduling.datepicker.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  accounting: {
+    payables: {
+      icon: <DollarOutlined />,
+      title: i18n.t("upsell.messages.accounting.payables.title"),
+      subTitle: i18n.t("upsell.messages.accounting.payables.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    receivables: {
+      icon: <DollarOutlined />,
+      title: i18n.t("upsell.messages.accounting.receivables.title"),
+      subTitle: i18n.t("upsell.messages.accounting.receivables.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    payments: {
+      icon: <DollarOutlined />,
+      title: i18n.t("upsell.messages.accounting.payments.title"),
+      subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  courtesycars: {
+    general: {
+      icon: <CarOutlined />,
+      title: i18n.t("upsell.messages.courtesycars.general.title"),
+      subTitle: i18n.t("upsell.messages.courtesycars.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  dashboard: {
+    general: {
+      icon: <DashboardOutlined />,
+      title: i18n.t("upsell.messages.dashboard.general.title"),
+      subTitle: i18n.t("upsell.messages.dashboard.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  visualboard: {
+    general: {
+      icon: <BuildOutlined />,
+      title: i18n.t("upsell.messages.visualboard.general.title"),
+      subTitle: i18n.t("upsell.messages.visualboard.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  scoreboard: {
+    general: {
+      icon: <LineChartOutlined />,
+      title: i18n.t("upsell.messages.scoreboard.general.title"),
+      subTitle: i18n.t("upsell.messages.scoreboard.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  techconsole: {
+    general: {
+      icon: <LineChartOutlined />,
+      title: i18n.t("upsell.messages.techconsole.general.title"),
+      subTitle: i18n.t("upsell.messages.techconsole.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  csi: {
+    general: {
+      icon: <StarOutlined />,
+      title: i18n.t("upsell.messages.csi.general.title"),
+      subTitle: i18n.t("upsell.messages.csi.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  }
+});
--- a/client/src/components/upsell/upsell.styles.scss
+++ b/client/src/components/upsell/upsell.styles.scss
@@ -0,0 +1,56 @@
+.mask-wrapper {
+  position: relative;
+//Newly added
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px; /* Adjust as needed */
+}
+
+.mask-content {
+  // filter: blur(5px);
+  background-color: rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+
+  //Newly added
+  //width: 100%;
+}
+
+.mask-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+ // width: 100%
+}
+
+.mask-overlay .ant-card {
+  max-width: 100%;
+}
+
+// .mask-wrapper {
+//   position: relative;
+//   display: inline-block;
+// }
+
+// .mask-content {
+//   filter: blur(5px);
+//   pointer-events: none;
+// }
+
+// .mask-overlay {
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   z-index: 10;
+// }
+
+// .mask-overlay .ant-card {
+//   max-width: 100%;
+// }
--- a/client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx
+++ b/client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx
@@ -55,15 +55,13 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset, sendPassw
          width="100"
          alt={InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })}
        />
        <Typography.Title>
          {InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })}
        </Typography.Title>
      </div>
--- a/client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx
+++ b/client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx
@@ -75,16 +75,14 @@ export function UserValidatePwReset({ passwordReset, validatePasswordReset, oobC
          width={100}
          alt={InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })}
        />

        <Typography.Title>
          {InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })}
        </Typography.Title>
      </div>
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -31,8 +31,7 @@ if (import.meta.env.PROD) {
  Sentry.init({
    dsn: InstanceRenderManager({
      imex: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
-      rome: "https://a6acc91c073e414196014b8484627a61@o492140.ingest.sentry.io/4504561071161344",
-      promanager: "" //TODO:AIO Add in the sentry tracker for proman.
+      rome: "https://a6acc91c073e414196014b8484627a61@o492140.ingest.sentry.io/4504561071161344"
    }),

    ignoreErrors: [
--- a/client/src/pages/accounting-payables/accounting-payables.container.jsx
+++ b/client/src/pages/accounting-payables/accounting-payables.container.jsx
@@ -13,6 +13,8 @@ import { selectPartnerVersion } from "../../redux/application/application.select
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { Card } from "antd";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -31,8 +33,7 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec
    document.title = t("titles.accounting-payables", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("payables");
@@ -58,7 +59,14 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec

  return (
    <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        noauth={
+          <Card>
+            <UpsellComponent upsell={upsellEnum().accounting.payables} />
+          </Card>
+        }
+      >
        <RbacWrapper action="accounting:payables">
          {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
          <AccountingPayablesTable loadaing={loading} bills={data ? data.bills : []} refetch={refetch} />
--- a/client/src/pages/accounting-payments/accounting-payments.container.jsx
+++ b/client/src/pages/accounting-payments/accounting-payments.container.jsx
@@ -13,6 +13,8 @@ import { checkPartnerStatus } from "../../components/partner-ping/partner-ping.c
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { Card } from "antd";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -31,8 +33,7 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
    document.title = t("titles.accounting-payments", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("payments");
@@ -56,7 +57,14 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
    !(bodyshop && (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || bodyshop.accountingconfig.qbo));
  return (
    <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        noauth={
+          <Card>
+            <UpsellComponent upsell={upsellEnum().accounting.payments} />
+          </Card>
+        }
+      >
        <RbacWrapper action="accounting:payments">
          {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
          <AccountingPaymentsTable loadaing={loading} payments={data ? data.payments : []} refetch={refetch} />
--- a/client/src/pages/accounting-receivables/accounting-receivables.container.jsx
+++ b/client/src/pages/accounting-receivables/accounting-receivables.container.jsx
@@ -13,6 +13,8 @@ import { checkPartnerStatus } from "../../components/partner-ping/partner-ping.c
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -31,8 +33,7 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe
    document.title = t("titles.accounting-receivables", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("receivables");
@@ -61,7 +62,14 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe

  return (
    <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        noauth={
+          <Card>
+            <UpsellComponent upsell={upsellEnum().accounting.receivables} />
+          </Card>
+        }
+      >
        <RbacWrapper action="accounting:receivables">
          {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
          <AccountingReceivablesTable loadaing={loading} jobs={data ? data.jobs : []} refetch={refetch} />
--- a/client/src/pages/bills/bills.page.container.jsx
+++ b/client/src/pages/bills/bills.page.container.jsx
@@ -13,6 +13,8 @@ import BillsPageComponent from "./bills.page.component";
 import { pageLimit } from "../../utils/config";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -28,8 +30,7 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.bills-list", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("bills");
@@ -54,7 +55,14 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <FeatureWrapperComponent featureName="bills">
+    <FeatureWrapperComponent
+      featureName="bills"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().bills.general} />
+        </Card>
+      }
+    >
      <RbacWrapper action="bills:list">
        <div>
          <BillsPageComponent
--- a/client/src/pages/contract-create/contract-create.page.container.jsx
+++ b/client/src/pages/contract-create/contract-create.page.container.jsx
@@ -1,18 +1,19 @@
 import { useMutation } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Card, Form, notification } from "antd";
 import React, { 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 FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ContractCreatePageComponent from "./contract-create.page.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import ContractCreatePageComponent from "./contract-create.page.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -102,8 +103,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
    document.title = t("titles.contracts-create", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("newcontract");
@@ -121,7 +121,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
+        </Card>
+      }
+    >
      <RbacWrapper action="contracts:create">
        <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
          <ContractCreatePageComponent
--- a/client/src/pages/contract-detail/contract-detail.page.container.jsx
+++ b/client/src/pages/contract-detail/contract-detail.page.container.jsx
@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Card, Form, notification } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ import ContractDetailPageComponent from "./contract-detail.page.component";
 import NotFound from "../../components/not-found/not-found.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -41,14 +42,12 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
    document.title = loading
      ? InstanceRenderManager({
          imex: t("titles.imexonline"),
-          rome: t("titles.romeonline"),
-          promanager: t("titles.promanager")
+          rome: t("titles.romeonline")
        })
      : error
        ? InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })
        : t("titles.contracts-detail", {
            id: (data && data.cccontracts_by_pk && data.cccontracts_by_pk.agreementnumber) || ""
@@ -107,10 +106,17 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
  if (error) return <AlertComponent message={error.message} type="error" />;
  if (loading) return <LoadingSpinner />;

-  if (!!!data.cccontracts_by_pk) return <NotFound />;
+  if (!data.cccontracts_by_pk) return <NotFound />;

  return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
+        </Card>
+      }
+    >
      <RbacWrapper action="contracts:detail">
        <div>
          <CourtesyCarReturnModalContainer />
--- a/client/src/pages/contracts/contracts.page.container.jsx
+++ b/client/src/pages/contracts/contracts.page.container.jsx
@@ -12,6 +12,8 @@ import ContractsPageComponent from "./contracts.page.component";
 import { pageLimit } from "../../utils/config";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -41,8 +43,7 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.contracts", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("contracts");
@@ -57,7 +58,14 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
+        </Card>
+      }
+    >
      <RbacWrapper action="contracts:list">
        <ContractsPageComponent
          loading={loading}
--- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
+++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Card, Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,6 +12,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -55,8 +56,7 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
    document.title = t("titles.courtesycars-create", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setBreadcrumbs([
@@ -69,17 +69,20 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <RbacWrapper action="courtesycar:create">
-      <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
+        </Card>
+      }
+    >
+      <RbacWrapper action="courtesycar:create">
        <Form form={form} autoComplete="new-password" onFinish={handleFinish} layout="vertical">
-          <CourtesyCarFormComponent
-          form={form}
-          saveLoading={loading}
-          newCC={true}
-        />
+          <CourtesyCarFormComponent form={form} saveLoading={loading} newCC={true} />
        </Form>
-      </FeatureWrapperComponent>
-    </RbacWrapper>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
  );
 }

--- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
+++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx
@@ -54,20 +54,17 @@ export function CourtesyCarDetailPageContainer({ setBreadcrumbs, addRecentItem,
    document.title = loading
      ? InstanceRenderManager({
          imex: t("titles.imexonline"),
-          rome: t("titles.romeonline"),
-          promanager: t("titles.promanager")
+          rome: t("titles.romeonline")
        })
      : error
        ? InstanceRenderManager({
            imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
          })
        : t("titles.courtesycars-detail", {
            app: InstanceRenderManager({
              imex: "$t(titles.imexonline)",
-              rome: "$t(titles.romeonline)",
-              promanager: "$t(titles.promanager)"
+              rome: "$t(titles.romeonline)"
            }),
            id: (data && data.courtesycars_by_pk && data.courtesycars_by_pk.fleet_number) || ""
          });
--- a/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
+++ b/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
@@ -9,6 +9,8 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import CourtesyCarsPageComponent from "./courtesy-cars.page.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -25,8 +27,7 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })
    document.title = t("titles.courtesycars", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("courtesycarsall");
@@ -35,11 +36,18 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <RbacWrapper action="courtesycar:list">
-      <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
+        </Card>
+      }
+    >
+      <RbacWrapper action="courtesycar:list">
        <CourtesyCarsPageComponent loading={loading} data={(data && data.courtesycars) || []} refetch={refetch} />
-      </FeatureWrapperComponent>
-    </RbacWrapper>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
  );
 }

--- a/client/src/pages/csi/csi.container.page.jsx
+++ b/client/src/pages/csi/csi.container.page.jsx
@@ -70,15 +70,13 @@ export function CsiContainerPage({ currentUser }) {
          title={t("csi.labels.nologgedinuser", {
            app: InstanceRenderManager({
              imex: "$t(titles.imexonline)",
-              rome: "$t(titles.romeonline)",
-              promanager: "$t(titles.promanager)"
+              rome: "$t(titles.romeonline)"
            })
          })}
          subTitle={t("csi.labels.nologgedinuser_sub", {
            app: InstanceRenderManager({
              imex: "$t(titles.imexonline)",
-              rome: "$t(titles.romeonline)",
-              promanager: "$t(titles.promanager)"
+              rome: "$t(titles.romeonline)"
            })
          })}
        />
--- a/client/src/pages/dashboard/dashboard.container.jsx
+++ b/client/src/pages/dashboard/dashboard.container.jsx
@@ -6,6 +6,8 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -19,8 +21,7 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.dashboard", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("dashboard");
@@ -33,7 +34,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
  }, [setBreadcrumbs, t, setSelectedHeader]);

  return (
-    <FeatureWrapper featureName="dashboard">
+    <FeatureWrapper
+      featureName="dashboard"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().dashboard.general} />
+        </Card>
+      }
+    >
      <RbacWrapper action="shop:dashboard">
        <DashboardGridComponent />
      </RbacWrapper>
--- a/client/src/pages/disclaimer/disclaimer.page.jsx
+++ b/client/src/pages/disclaimer/disclaimer.page.jsx
@@ -9,9 +9,8 @@ export default function AboutPage() {
    <div style={{ textAlign: "center", margin: "1rem 0rem" }}>
      <Typography.Title level={2}>{`${InstanceRenderMgr({
        imex: t("titles.imexonline"),
-        rome: t("titles.romeonline"),
-        promanager: t("titles.promanager")
-      })}Rome Online V.${import.meta.env.MODE}-${import.meta.env.VITE_APP_GIT_SHA}`}</Typography.Title>
+        rome: t("titles.romeonline")
+      })} V.${import.meta.env.MODE}-${import.meta.env.VITE_APP_GIT_SHA}`}</Typography.Title>
      <Typography.Title level={2}>Third Party Notices</Typography.Title>
      <a href="/3rdparty-app.txt">
        <Typography.Title level={4}>Application</Typography.Title>
--- a/client/src/pages/dms-payables/dms-payables.container.jsx
+++ b/client/src/pages/dms-payables/dms-payables.container.jsx
@@ -46,8 +46,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.dms", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("dms");
--- a/client/src/pages/dms/dms.container.jsx
+++ b/client/src/pages/dms/dms.container.jsx
@@ -65,8 +65,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
    document.title = t("titles.dms", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("dms");
--- a/client/src/pages/export-logs/export-logs.page.container.jsx
+++ b/client/src/pages/export-logs/export-logs.page.container.jsx
@@ -6,6 +6,8 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import ExportLogsPage from "./export-logs.page.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -19,8 +21,7 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.export-logs", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("export-logs");
@@ -33,7 +34,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
  }, [setBreadcrumbs, t, setSelectedHeader]);

  return (
-    <FeatureWrapperComponent featureName="export">
+    <FeatureWrapperComponent
+      featureName="export"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().accounting.receivables} />
+        </Card>
+      }
+    >
      <RbacWrapper action="accounting:exportlogs">
        <ExportLogsPage />
      </RbacWrapper>
--- a/client/src/pages/inventory/inventory.page.jsx
+++ b/client/src/pages/inventory/inventory.page.jsx
@@ -19,8 +19,7 @@ export function InventoryPage({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.inventory", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("inventory");
--- a/client/src/pages/jobs-admin/jobs-admin.page.jsx
+++ b/client/src/pages/jobs-admin/jobs-admin.page.jsx
@@ -52,8 +52,7 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.jobs-admin", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      }),
      ro_number: data ? data.jobs_by_pk && data.jobs_by_pk.ro_number : null
    });
--- a/client/src/pages/jobs-all/jobs-all.container.jsx
+++ b/client/src/pages/jobs-all/jobs-all.container.jsx
@@ -47,8 +47,7 @@ export function AllJobs({ setBreadcrumbs, setSelectedHeader }) {
    document.title = t("titles.jobs-all", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("alljobs");
--- a/client/src/pages/jobs-available/jobs-available.page.container.jsx
+++ b/client/src/pages/jobs-available/jobs-available.page.container.jsx
@@ -29,8 +29,7 @@ export function JobsAvailablePageContainer({ partnerVersion, setBreadcrumbs, set
    document.title = t("titles.jobsavailable", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("availablejobs");
@@ -55,8 +54,7 @@ export function JobsAvailablePageContainer({ partnerVersion, setBreadcrumbs, set
              <a
                href={InstanceRenderManager({
                  imex: "https://partner.imex.online/Setup.exe",
-                  rome: "https://partner.romeonline.io/Setup.exe",
-                  promanager: "https://dzaenazwrgg60.cloudfront.net/Setup.exe"
+                  rome: "https://partner.romeonline.io/Setup.exe"
                })}
              >
                <Button size="small">{t("general.actions.download")}</Button>
@@ -66,7 +64,6 @@ export function JobsAvailablePageContainer({ partnerVersion, setBreadcrumbs, set
              app: InstanceRenderManager({
                imex: "$t(titles.imexonline)",
                rome: "$t(titles.romeonline)",
-                promanager: "$t(titles.promanager)"
              })
            })}
          />
--- a/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
+++ b/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row, Typography } from "antd";
+import { Card, Col, Row, Typography } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,8 @@ import { QUERY_JOB_CHECKLISTS } from "../../graphql/jobs.queries";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -37,8 +39,7 @@ export function JobsChecklistViewContainer({ bodyshop, setBreadcrumbs, setSelect
    document.title = t("titles.jobs-checklist", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      })
    });
    setSelectedHeader("activejobs");
@@ -74,38 +75,47 @@ export function JobsChecklistViewContainer({ bodyshop, setBreadcrumbs, setSelect
  );

  return (
-    <RbacWrapper action="jobs:checklist-view">
-      <Row gutter={[16, 16]}>
-        <Col span={12}>
-          <Typography.Title level={4}>{t("jobs.labels.intakechecklist")}</Typography.Title>
-          {data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form && (
-            <>
-              <JobChecklistForm
-                formItems={data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form}
-                type="intake"
-                job={data.jobs_by_pk}
-                readOnly
-              />
-              <CompletedBy checklist={data.jobs_by_pk.intakechecklist} />
-            </>
-          )}
-        </Col>
-        <Col span={12}>
-          <Typography.Title level={4}>{t("jobs.labels.deliverchecklist")}</Typography.Title>
-          {data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form && (
-            <>
-              <JobChecklistForm
-                formItems={data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form}
-                type="deliver"
-                job={data.jobs_by_pk}
-                readOnly
-              />
-              <CompletedBy checklist={data.jobs_by_pk.deliverchecklist} />
-            </>
-          )}
-        </Col>
-      </Row>
-    </RbacWrapper>
+    <FeatureWrapperComponent
+      featureName="checklist"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum().checklist.general} />
+        </Card>
+      }
+    >
+      <RbacWrapper action="jobs:checklist-view">
+        <Row gutter={[16, 16]}>
+          <Col span={12}>
+            <Typography.Title level={4}>{t("jobs.labels.intakechecklist")}</Typography.Title>
+            {data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form && (
+              <>
+                <JobChecklistForm
+                  formItems={data.jobs_by_pk.intakechecklist && data.jobs_by_pk.intakechecklist.form}
+                  type="intake"
+                  job={data.jobs_by_pk}
+                  readOnly
+                />
+                <CompletedBy checklist={data.jobs_by_pk.intakechecklist} />
+              </>
+            )}
+          </Col>
+          <Col span={12}>
+            <Typography.Title level={4}>{t("jobs.labels.deliverchecklist")}</Typography.Title>
+            {data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form && (
+              <>
+                <JobChecklistForm
+                  formItems={data.jobs_by_pk.deliverchecklist && data.jobs_by_pk.deliverchecklist.form}
+                  type="deliver"
+                  job={data.jobs_by_pk}
+                  readOnly
+                />
+                <CompletedBy checklist={data.jobs_by_pk.deliverchecklist} />
+              </>
+            )}
+          </Col>
+        </Row>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
  );
 }

--- a/client/src/pages/jobs-close/jobs-close.container.jsx
+++ b/client/src/pages/jobs-close/jobs-close.container.jsx
@@ -39,8 +39,7 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader, setJobRe
    document.title = t("titles.jobs-close", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
-        rome: "$t(titles.romeonline)",
-        promanager: "$t(titles.promanager)"
+        rome: "$t(titles.romeonline)"
      }),
      number: data ? data.jobs_by_pk && data.jobs_by_pk.ro_number : null
    });
--- a/Show More
+++ b/Show More