IO-2626 Adjust Image Prop on customer page

IO-2626 Prevent crisp from loading on anon CSI page.
Merge branch 'feature/IO-2626-CSI-Pages' of bitbucket.org:snaptsoft/bodyshop into feature/IO-2626-CSI-Pages
2024-02-08 09:57:39 -08:00 · 2024-02-06 10:04:59 -08:00 · 2024-02-06 09:36:16 -08:00 · 2024-02-06 09:29:22 -08:00 · 2024-02-06 09:10:32 -08:00 · 2024-02-06 08:52:51 -08:00
237 changed files with 55700 additions and 3589 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -42,31 +42,22 @@ jobs:
  app-build:
    docker:
      - image: cimg/node:16.15.0
-
+    resource_class: large
    working_directory: ~/repo/client

    steps:
      - checkout:
          path: ~/repo
-
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Install Dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i

-      - run: yarn run build
+      - run: npm run build

      - aws-s3/sync:
          from: build
          to: "s3://imex-online-production/"
+          arguments: "--exclude '*.map'"
      - jira/notify

  test-hasura-migrate:
@@ -92,31 +83,22 @@ jobs:
  test-app-build:
    docker:
      - image: cimg/node:16.15.0
-
+    resource_class: large
    working_directory: ~/repo/client

    steps:
      - checkout:
          path: ~/repo
-
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Install Dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i

-      - run: yarn run build:test
+      - run: npm run build:test

      - aws-s3/sync:
          from: build
          to: "s3://imex-online-test/"
+          arguments: "--exclude '*.map'"
      - jira/notify

  admin-app-build:
@@ -177,4 +159,4 @@ workflows:
      #- admin-app-build:
      #filters:
      #branches:
-      #only: master
+      #only: master
--- a/client/.env.production
+++ b/client/.env.production
@@ -1,4 +1,4 @@
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=true
 REACT_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
 REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
 REACT_APP_GA_CODE=231103507
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -0,0 +1,3 @@
+
+# Sentry Config File
+.sentryclirc
--- a/client/craco.config.js
+++ b/client/craco.config.js
@@ -1,25 +1,25 @@
 // craco.config.js
 const TerserPlugin = require("terser-webpack-plugin");
 const CracoLessPlugin = require("craco-less");
-const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+//const SentryWebpackPlugin = require("@sentry/webpack-plugin");

 module.exports = {
  plugins: [
-    {
-      plugin: SentryWebpackPlugin,
-      options: {
-        // sentry-cli configuration
-        authToken:
-          "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
-        org: "snapt-software",
-        project: "imexonline",
-        release: process.env.REACT_APP_GIT_SHA,
+    // {
+    //   plugin: SentryWebpackPlugin,
+    //   options: {
+    //     // sentry-cli configuration
+    //     authToken:
+    //       "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
+    //     org: "snapt-software",
+    //     project: "imexonline",
+    //     release: process.env.REACT_APP_GIT_SHA,

-        // webpack-specific configuration
-        include: ".",
-        ignore: ["node_modules", "webpack.config.js"],
-      },
-    },
+    //     // webpack-specific configuration
+    //     include: ".",
+    //     ignore: ["node_modules", "webpack.config.js"],
+    //   },
+    // },
    {
      plugin: CracoLessPlugin,
      options: {
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -13,12 +13,14 @@
        "@craco/craco": "^7.0.0",
        "@fingerprintjs/fingerprintjs": "^3.4.2",
        "@jsreport/browser-client": "^3.1.0",
-        "@sentry/react": "^7.40.0",
+        "@sentry/cli": "^2.27.0",
+        "@sentry/react": "^7.99.0",
        "@sentry/tracing": "^7.40.0",
        "@splitsoftware/splitio-react": "^1.8.1",
        "@tanem/react-nprogress": "^5.0.8",
        "antd": "^4.24.8",
        "apollo-link-logger": "^2.0.1",
+        "apollo-link-sentry": "^3.3.0",
        "axios": "^1.3.4",
        "craco-less": "^2.0.0",
        "dinero.js": "^1.9.1",
@@ -4214,40 +4216,195 @@
      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
      "license": "MIT"
    },
-    "node_modules/@sentry/browser": {
-      "version": "7.40.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.40.0.tgz",
-      "integrity": "sha512-07rZ+cTcpmYB1r84/oZtmSPJJvLCxW8yIh/5s4MdKRyZpqIDKhOz6cCS/4j+l1V+MeLcNLZBjFtNdKA2eocTpg==",
-      "license": "MIT",
+    "node_modules/@sentry-internal/feedback": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.99.0.tgz",
+      "integrity": "sha512-exIO1o+bE0MW4z30FxC0cYzJ4ZHSMlDPMHCBDPzU+MWGQc/fb8s58QUrx5Dnm6HTh9G3H+YlroCxIo9u0GSwGQ==",
      "dependencies": {
-        "@sentry/core": "7.40.0",
-        "@sentry/replay": "7.40.0",
-        "@sentry/types": "7.40.0",
-        "@sentry/utils": "7.40.0",
-        "tslib": "^1.9.3"
+        "@sentry/core": "7.99.0",
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@sentry-internal/feedback/node_modules/@sentry/core": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.99.0.tgz",
+      "integrity": "sha512-vOAtzcAXEUtS/oW7wi3wMkZ3hsb5Ch96gKyrrj/mXdOp2zrcwdNV6N9/pawq2E9P/7Pw8AXw4CeDZztZrjQLuA==",
+      "dependencies": {
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
      },
      "engines": {
        "node": ">=8"
      }
    },
-    "node_modules/@sentry/browser/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "license": "0BSD"
+    "node_modules/@sentry-internal/feedback/node_modules/@sentry/types": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.99.0.tgz",
+      "integrity": "sha512-94qwOw4w40sAs5mCmzcGyj8ZUu/KhnWnuMZARRq96k+SjRW/tHFAOlIdnFSrt3BLPvSOK7R3bVAskZQ0N4FTmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/feedback/node_modules/@sentry/utils": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.99.0.tgz",
+      "integrity": "sha512-cYZy5WNTkWs5GgggGnjfGqC44CWir0pAv4GVVSx0fsup4D4pMKBJPrtub15f9uC+QkUf3vVkqwpBqeFxtmJQTQ==",
+      "dependencies": {
+        "@sentry/types": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.99.0.tgz",
+      "integrity": "sha512-PoIkfusToDq0snfl2M6HJx/1KJYtXxYhQplrn11kYadO04SdG0XGXf4h7wBTMEQ7LDEAtQyvsOu4nEQtTO3YjQ==",
+      "dependencies": {
+        "@sentry/core": "7.99.0",
+        "@sentry/replay": "7.99.0",
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/core": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.99.0.tgz",
+      "integrity": "sha512-vOAtzcAXEUtS/oW7wi3wMkZ3hsb5Ch96gKyrrj/mXdOp2zrcwdNV6N9/pawq2E9P/7Pw8AXw4CeDZztZrjQLuA==",
+      "dependencies": {
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/types": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.99.0.tgz",
+      "integrity": "sha512-94qwOw4w40sAs5mCmzcGyj8ZUu/KhnWnuMZARRq96k+SjRW/tHFAOlIdnFSrt3BLPvSOK7R3bVAskZQ0N4FTmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/utils": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.99.0.tgz",
+      "integrity": "sha512-cYZy5WNTkWs5GgggGnjfGqC44CWir0pAv4GVVSx0fsup4D4pMKBJPrtub15f9uC+QkUf3vVkqwpBqeFxtmJQTQ==",
+      "dependencies": {
+        "@sentry/types": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/tracing": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.99.0.tgz",
+      "integrity": "sha512-z3JQhHjoM1KdM20qrHwRClKJrNLr2CcKtCluq7xevLtXHJWNAQQbafnWD+Aoj85EWXBzKt9yJMv2ltcXJ+at+w==",
+      "dependencies": {
+        "@sentry/core": "7.99.0",
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/tracing/node_modules/@sentry/core": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.99.0.tgz",
+      "integrity": "sha512-vOAtzcAXEUtS/oW7wi3wMkZ3hsb5Ch96gKyrrj/mXdOp2zrcwdNV6N9/pawq2E9P/7Pw8AXw4CeDZztZrjQLuA==",
+      "dependencies": {
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/tracing/node_modules/@sentry/types": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.99.0.tgz",
+      "integrity": "sha512-94qwOw4w40sAs5mCmzcGyj8ZUu/KhnWnuMZARRq96k+SjRW/tHFAOlIdnFSrt3BLPvSOK7R3bVAskZQ0N4FTmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/tracing/node_modules/@sentry/utils": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.99.0.tgz",
+      "integrity": "sha512-cYZy5WNTkWs5GgggGnjfGqC44CWir0pAv4GVVSx0fsup4D4pMKBJPrtub15f9uC+QkUf3vVkqwpBqeFxtmJQTQ==",
+      "dependencies": {
+        "@sentry/types": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.99.0.tgz",
+      "integrity": "sha512-bgfoUv3wkwwLgN5YUOe0ibB3y268ZCnamZh6nLFqnY/UBKC1+FXWFdvzVON/XKUm62LF8wlpCybOf08ebNj2yg==",
+      "dependencies": {
+        "@sentry-internal/feedback": "7.99.0",
+        "@sentry-internal/replay-canvas": "7.99.0",
+        "@sentry-internal/tracing": "7.99.0",
+        "@sentry/core": "7.99.0",
+        "@sentry/replay": "7.99.0",
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/browser/node_modules/@sentry/core": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.99.0.tgz",
+      "integrity": "sha512-vOAtzcAXEUtS/oW7wi3wMkZ3hsb5Ch96gKyrrj/mXdOp2zrcwdNV6N9/pawq2E9P/7Pw8AXw4CeDZztZrjQLuA==",
+      "dependencies": {
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/browser/node_modules/@sentry/types": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.99.0.tgz",
+      "integrity": "sha512-94qwOw4w40sAs5mCmzcGyj8ZUu/KhnWnuMZARRq96k+SjRW/tHFAOlIdnFSrt3BLPvSOK7R3bVAskZQ0N4FTmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/browser/node_modules/@sentry/utils": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.99.0.tgz",
+      "integrity": "sha512-cYZy5WNTkWs5GgggGnjfGqC44CWir0pAv4GVVSx0fsup4D4pMKBJPrtub15f9uC+QkUf3vVkqwpBqeFxtmJQTQ==",
+      "dependencies": {
+        "@sentry/types": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
    },
    "node_modules/@sentry/cli": {
-      "version": "1.74.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-1.74.6.tgz",
-      "integrity": "sha512-pJ7JJgozyjKZSTjOGi86chIngZMLUlYt2HOog+OJn+WGvqEkVymu8m462j1DiXAnex9NspB4zLLNuZ/R6rTQHg==",
-      "dev": true,
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.27.0.tgz",
+      "integrity": "sha512-pc0opd71W8lGhYvmB1keQtJkarxzCS9f9ErKYv6TfXOOX6drvwkyA6vD/6xEnpzyvqGAuGRU4T4sEeLD3irwUQ==",
      "hasInstallScript": true,
-      "license": "BSD-3-Clause",
      "dependencies": {
        "https-proxy-agent": "^5.0.0",
-        "mkdirp": "^0.5.5",
        "node-fetch": "^2.6.7",
-        "npmlog": "^4.1.2",
        "progress": "^2.0.3",
        "proxy-from-env": "^1.1.0",
        "which": "^2.0.2"
@@ -4256,7 +4413,124 @@
        "sentry-cli": "bin/sentry-cli"
      },
      "engines": {
-        "node": ">= 8"
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@sentry/cli-darwin": "2.27.0",
+        "@sentry/cli-linux-arm": "2.27.0",
+        "@sentry/cli-linux-arm64": "2.27.0",
+        "@sentry/cli-linux-i686": "2.27.0",
+        "@sentry/cli-linux-x64": "2.27.0",
+        "@sentry/cli-win32-i686": "2.27.0",
+        "@sentry/cli-win32-x64": "2.27.0"
+      }
+    },
+    "node_modules/@sentry/cli-darwin": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.27.0.tgz",
+      "integrity": "sha512-/DOZlN5rK19g7YP2OaVNauQhUrRfJ88RDr6qURFiqdxYHDc3isPFGHZJmeZBTwOnDDepyZb4XLaOyfwvAOxHig==",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.27.0.tgz",
+      "integrity": "sha512-JmMQ9zgFhkZUEN5WIYuJisu4Jif/ThRHDjbsbXBRbUkkgRn88hgUfg299djMvlZZxjpl3K9AEua+1TIUeQd0Sg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm64": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.27.0.tgz",
+      "integrity": "sha512-f+zuB9XGfB8pNamNgSDhqsavuLuzi6saZxbr3uQf30bA5AESI5hspOd1zPcidOORCVZxiPzQe3+T7avBI1XLuw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-i686": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.27.0.tgz",
+      "integrity": "sha512-/4eyz7jnYp20mZqNtpvCEBkxFW0nEjEZRo2BiASQ5/7K8CmoJRe1vhpDA0WOfzi1zTFIfpdE1/RZm2CjHS6DHQ==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-x64": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.27.0.tgz",
+      "integrity": "sha512-ptu7wXecnYssihzHlxEOaqbFHWmNEfbepBKGXTdWK2kC+D51+7yHsR9xRdThwVID1bisFgjAveKmBQjmKuXjHQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-i686": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.27.0.tgz",
+      "integrity": "sha512-Db4/xmdE5qV4Aq7Yc8vRw22Y46JJdGMdsMsl5jIf0GVSQPgO23O/2uTiDGpPOdeq91K9EtvpH1zQfDLIfLMaXw==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-x64": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.27.0.tgz",
+      "integrity": "sha512-q7y/BH4iGfs0TD5PXh2Q8oqnTbOIufoT1NWJcKqvZcOiqCLK3PNUiq7xUeX1PMTrFYAh3Bm6EekOnMavqvbGmg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/@sentry/core": {
@@ -4280,16 +4554,15 @@
      "license": "0BSD"
    },
    "node_modules/@sentry/react": {
-      "version": "7.40.0",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.40.0.tgz",
-      "integrity": "sha512-7yYagpOCdsXnVTtLL8Y7wAf2xXgsk2ncuju3O/G4kEckkLewZWmQeoknOSGFlAgVdGNhTaXc2WGzgOiBMOkhug==",
-      "license": "MIT",
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.99.0.tgz",
+      "integrity": "sha512-RtHwgzMHJhzJfSQpVG0SDPQYMTGDX3Q37/YWI59S4ALMbSW4/F6n/eQAvGVYZKbh2UCSqgFuRWaXOYkSZT17wA==",
      "dependencies": {
-        "@sentry/browser": "7.40.0",
-        "@sentry/types": "7.40.0",
-        "@sentry/utils": "7.40.0",
-        "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
+        "@sentry/browser": "7.99.0",
+        "@sentry/core": "7.99.0",
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0",
+        "hoist-non-react-statics": "^3.3.2"
      },
      "engines": {
        "node": ">=8"
@@ -4298,26 +4571,82 @@
        "react": "15.x || 16.x || 17.x || 18.x"
      }
    },
-    "node_modules/@sentry/react/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "license": "0BSD"
+    "node_modules/@sentry/react/node_modules/@sentry/core": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.99.0.tgz",
+      "integrity": "sha512-vOAtzcAXEUtS/oW7wi3wMkZ3hsb5Ch96gKyrrj/mXdOp2zrcwdNV6N9/pawq2E9P/7Pw8AXw4CeDZztZrjQLuA==",
+      "dependencies": {
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/react/node_modules/@sentry/types": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.99.0.tgz",
+      "integrity": "sha512-94qwOw4w40sAs5mCmzcGyj8ZUu/KhnWnuMZARRq96k+SjRW/tHFAOlIdnFSrt3BLPvSOK7R3bVAskZQ0N4FTmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/react/node_modules/@sentry/utils": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.99.0.tgz",
+      "integrity": "sha512-cYZy5WNTkWs5GgggGnjfGqC44CWir0pAv4GVVSx0fsup4D4pMKBJPrtub15f9uC+QkUf3vVkqwpBqeFxtmJQTQ==",
+      "dependencies": {
+        "@sentry/types": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
    },
    "node_modules/@sentry/replay": {
-      "version": "7.40.0",
-      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.40.0.tgz",
-      "integrity": "sha512-Y9Kvo9jKouUdrHQhHVv5SmWZClF5o7BFI6oVpLlv4zXORPQlyoZONM/9sxiMvvH73alDSpxzCoxyhlypAOH4ww==",
-      "license": "MIT",
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.99.0.tgz",
+      "integrity": "sha512-gyN/I2WpQrLAZDT+rScB/0jnFL2knEVBo8U8/OVt8gNP20Pq8T/rDZKO/TG0cBfvULDUbJj2P4CJryn2p/O2rA==",
      "dependencies": {
-        "@sentry/core": "7.40.0",
-        "@sentry/types": "7.40.0",
-        "@sentry/utils": "7.40.0"
+        "@sentry-internal/tracing": "7.99.0",
+        "@sentry/core": "7.99.0",
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
      },
      "engines": {
        "node": ">=12"
      }
    },
+    "node_modules/@sentry/replay/node_modules/@sentry/core": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.99.0.tgz",
+      "integrity": "sha512-vOAtzcAXEUtS/oW7wi3wMkZ3hsb5Ch96gKyrrj/mXdOp2zrcwdNV6N9/pawq2E9P/7Pw8AXw4CeDZztZrjQLuA==",
+      "dependencies": {
+        "@sentry/types": "7.99.0",
+        "@sentry/utils": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/replay/node_modules/@sentry/types": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.99.0.tgz",
+      "integrity": "sha512-94qwOw4w40sAs5mCmzcGyj8ZUu/KhnWnuMZARRq96k+SjRW/tHFAOlIdnFSrt3BLPvSOK7R3bVAskZQ0N4FTmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/replay/node_modules/@sentry/utils": {
+      "version": "7.99.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.99.0.tgz",
+      "integrity": "sha512-cYZy5WNTkWs5GgggGnjfGqC44CWir0pAv4GVVSx0fsup4D4pMKBJPrtub15f9uC+QkUf3vVkqwpBqeFxtmJQTQ==",
+      "dependencies": {
+        "@sentry/types": "7.99.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/@sentry/tracing": {
      "version": "7.40.0",
      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.40.0.tgz",
@@ -4381,6 +4710,27 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@sentry/webpack-plugin/node_modules/@sentry/cli": {
+      "version": "1.77.3",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-1.77.3.tgz",
+      "integrity": "sha512-c3eDqcDRmy4TFz2bFU5Y6QatlpoBPPa8cxBooaS4aMQpnIdLYPF1xhyyiW0LQlDUNc3rRjNF7oN5qKoaRoMTQQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "https-proxy-agent": "^5.0.0",
+        "mkdirp": "^0.5.5",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/@sinclair/typebox": {
      "version": "0.24.51",
      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
@@ -6112,12 +6462,21 @@
        "@apollo/client": "^3.0.0"
      }
    },
-    "node_modules/aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-      "dev": true,
-      "license": "ISC"
+    "node_modules/apollo-link-sentry": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/apollo-link-sentry/-/apollo-link-sentry-3.3.0.tgz",
+      "integrity": "sha512-wLffWmo5sRw3rHN1Ck6azM0oxObvtaBBf3AC8cLX4SxhyjmkRIagGDji6CFkyAhxupPz0b9/H1u4Ocx+63lNug==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "dot-prop": "^6.0.0",
+        "tslib": "^2.0.3",
+        "zen-observable-ts": "^1.2.5"
+      },
+      "peerDependencies": {
+        "@apollo/client": "^3.2.3",
+        "@sentry/browser": "^7.41.0",
+        "graphql": "15 - 16"
+      }
    },
    "node_modules/arch": {
      "version": "2.2.0",
@@ -6140,17 +6499,6 @@
      ],
      "license": "MIT"
    },
-    "node_modules/are-we-there-yet": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
-      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
-      }
-    },
    "node_modules/arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -7571,16 +7919,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/collect-v8-coverage": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -7743,13 +8081,6 @@
        "node": ">=0.8"
      }
    },
-    "node_modules/console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "dev": true,
-      "license": "ISC"
-    },
    "node_modules/content-disposition": {
      "version": "0.5.4",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -8911,13 +9242,6 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/denque": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/denque/-/denque-1.5.1.tgz",
@@ -9218,6 +9542,28 @@
        "tslib": "^2.0.3"
      }
    },
+    "node_modules/dot-prop": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz",
+      "integrity": "sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/dotenv": {
      "version": "16.0.1",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz",
@@ -10464,6 +10810,8 @@
    },
    "node_modules/eventemitter2": {
      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
+      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
      "dev": true,
      "license": "MIT"
    },
@@ -11283,74 +11631,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "aproba": "^1.0.3",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
-        "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
-      }
-    },
-    "node_modules/gauge/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "number-is-nan": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -11753,13 +12033,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "dev": true,
-      "license": "ISC"
-    },
    "node_modules/he": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -15744,19 +16017,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
-      }
-    },
    "node_modules/nth-check": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -15769,16 +16029,6 @@
        "url": "https://github.com/fb55/nth-check?sponsor=1"
      }
    },
-    "node_modules/number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/nwsapi": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.1.tgz",
@@ -17794,7 +18044,6 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.4.0"
@@ -20526,13 +20775,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "dev": true,
-      "license": "ISC"
-    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -22110,19 +22352,6 @@
        "is-typedarray": "^1.0.0"
      }
    },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
    "node_modules/typescript-compare": {
      "version": "0.0.2",
      "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz",
@@ -23080,16 +23309,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
    "node_modules/wildcard": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
--- a/client/package.json
+++ b/client/package.json
@@ -9,12 +9,14 @@
    "@craco/craco": "^7.0.0",
    "@fingerprintjs/fingerprintjs": "^3.4.2",
    "@jsreport/browser-client": "^3.1.0",
-    "@sentry/react": "^7.40.0",
+    "@sentry/cli": "^2.27.0",
+    "@sentry/react": "^7.99.0",
    "@sentry/tracing": "^7.40.0",
    "@splitsoftware/splitio-react": "^1.8.1",
    "@tanem/react-nprogress": "^5.0.8",
    "antd": "^4.24.8",
    "apollo-link-logger": "^2.0.1",
+    "apollo-link-sentry": "^3.3.0",
    "axios": "^1.3.4",
    "craco-less": "^2.0.0",
    "dinero.js": "^1.9.1",
@@ -88,13 +90,14 @@
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "craco start",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
+    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build && npm run sentry:sourcemaps",
    "build:test": "env-cmd -f .env.test npm run build",
    "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
    "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
    "test": "cypress open",
    "eject": "react-scripts eject",
-    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular ."
+    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
  },
  "eslintConfig": {
    "extends": [
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
+import * as Sentry from "@sentry/react";

 moment.locale("en-US");

@@ -18,7 +19,7 @@ export const factory = SplitSdk({
  },
 });

-export default function AppContainer() {
+function AppContainer() {
  const { t } = useTranslation();

  return (
@@ -42,3 +43,5 @@ export default function AppContainer() {
    </ApolloProvider>
  );
 }
+
+export default Sentry.withProfiler(AppContainer);
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -22,6 +22,7 @@ import {
 } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
+import handleBeta from "../utils/handleBeta";

 const ResetPassword = lazy(() =>
  import("../pages/reset-password/reset-password.component")
@@ -57,7 +58,6 @@ export function App({
    if (!navigator.onLine) {
      setOnline(false);
    }
-
    checkUserSession();
  }, [checkUserSession, setOnline]);

@@ -73,6 +73,7 @@ export function App({
  window.addEventListener("online", function (e) {
    setOnline(true);
  });
+
  useEffect(() => {
    if (currentUser.authorized && bodyshop) {
      client.setAttribute("imexshopid", bodyshop.imexshopid);
@@ -107,6 +108,8 @@ export function App({
      />
    );

+  handleBeta();
+
  return (
    <Switch>
      <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
--- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
+++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
@@ -15,6 +15,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -210,7 +211,7 @@ export function AccountingPayablesTableComponent({
      <Table
        loading={loading}
        dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
        columns={columns}
        rowKey="id"
        onChange={handleTableChange}
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -15,6 +15,7 @@ import PaymentExportButton from "../payment-export-button/payment-export-button.
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function AccountingPayablesTableComponent({
      <Table
        loading={loading}
        dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
        columns={columns}
        rowKey="id"
        onChange={handleTableChange}
--- a/client/src/components/audit-trail-list/audit-trail-list.component.jsx
+++ b/client/src/components/audit-trail-list/audit-trail-list.component.jsx
@@ -4,6 +4,7 @@ import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { useTranslation } from "react-i18next";
 import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values.component";
+import {pageLimit} from "../../utils/config";

 export default function AuditTrailListComponent({ loading, data }) {
  const [state, setState] = useState({
@@ -74,7 +75,7 @@ export default function AuditTrailListComponent({ loading, data }) {
    <Table
      {...formItemLayout}
      loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
      columns={columns}
      rowKey="id"
      dataSource={data}
--- a/client/src/components/audit-trail-list/email-audit-trail-list.component.jsx
+++ b/client/src/components/audit-trail-list/email-audit-trail-list.component.jsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";

 export default function EmailAuditTrailListComponent({ loading, data }) {
  const [state, setState] = useState({
@@ -53,7 +54,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
    <Table
      {...formItemLayout}
      loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
      columns={columns}
      rowKey="id"
      dataSource={data}
--- a/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import {
  DELETE_BILL_LINE,
  INSERT_NEW_BILL_LINES,
-  UPDATE_BILL_LINE
+  UPDATE_BILL_LINE,
 } from "../../graphql/bill-lines.queries";
 import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -20,6 +20,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
+import BillPrintButton from "../bill-print-button/bill-print-button.component";
 import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
 import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
@@ -176,7 +177,7 @@ export function BillDetailEditcontainer({
            extra={
              <Space>
                <BillDetailEditReturn data={data} />
-
+                <BillPrintButton billid={search.billid} />
                <Popconfirm
                  visible={visible}
                  onConfirm={() => form.submit()}
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/client/src/components/bill-form/bill-form.component.jsx
@@ -79,6 +79,20 @@ export function BillFormComponent({
      });
  };

+  const handleFederalTaxExemptSwitchToggle = (checked) => {
+    // Early gate
+    if (!checked) return;
+    const values = form.getFieldsValue("billlines");
+    // Gate bill lines
+    if (!values?.billlines?.length) return;
+
+    const billlines = values.billlines.map((b) => {
+      b.applicable_taxes.federal = false;
+      return b;
+    });
+    form.setFieldsValue({ billlines });
+  };
+
  useEffect(() => {
    if (job) form.validateFields(["is_credit_memo"]);
  }, [job, form]);
@@ -387,7 +401,16 @@ export function BillFormComponent({
        >
          <CurrencyInput min={0} />
        </Form.Item>
-        <Form.Item shouldUpdate span={15}>
+        {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+          <Form.Item
+            span={2}
+            label={t("bills.labels.federal_tax_exempt")}
+            name="federal_tax_exempt"
+          >
+            <Switch onChange={handleFederalTaxExemptSwitchToggle} />
+          </Form.Item>
+        ) : null}
+        <Form.Item shouldUpdate span={13}>
          {() => {
            const values = form.getFieldsValue([
              "billlines",
@@ -405,7 +428,7 @@ export function BillFormComponent({
              totals = CalculateBillTotal(values);
            if (!!totals)
              return (
-                <div>
+                <div align="right">
                  <Space wrap>
                    <Statistic
                      title={t("bills.labels.subtotal")}
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -1,14 +1,15 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
-  Button, Form,
+  Button,
+  Form,
  Input,
  InputNumber,
  Select,
  Space,
  Switch,
  Table,
-  Tooltip
+  Tooltip,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -466,7 +467,8 @@ export function BillEnterModalLinesComponent({
          return {
            key: `${field.index}fedtax`,
            valuePropName: "checked",
-            initialValue: true,
+            initialValue:
+              form.getFieldValue("federal_tax_exempt") === true ? false : true,
            name: [field.name, "applicable_taxes", "federal"],
          };
        },
--- a/client/src/components/bill-print-button/bill-print-button.component.jsx
+++ b/client/src/components/bill-print-button/bill-print-button.component.jsx
@@ -0,0 +1,38 @@
+import { Button, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+export default function BillPrintButton({ billid }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const Templates = TemplateList("job_special");
+
+  const submitHandler = async () => {
+    setLoading(true);
+    try {
+      await GenerateDocument(
+        {
+          name: Templates.parts_invoice_label_single.key,
+          variables: {
+            id: billid,
+          },
+        },
+        {},
+        "p"
+      );
+    } catch (e) {
+      console.warn("Warning: Error generating a document.");
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Space wrap>
+      <Button loading={loading} onClick={submitHandler}>
+        {t("bills.labels.printlabels")}
+      </Button>
+    </Space>
+  );
+}
--- a/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
+++ b/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
@@ -4,6 +4,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatLabelComponent from "../chat-label/chat-label.component";
+import ChatPrintButton from "../chat-print-button/chat-print-button.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";

 export default function ChatConversationTitle({ conversation }) {
@@ -13,6 +14,7 @@ export default function ChatConversationTitle({ conversation }) {
        {conversation && conversation.phone_num}
      </PhoneNumberFormatter>
      <ChatLabelComponent conversation={conversation} />
+      <ChatPrintButton conversation={conversation} />
      <ChatConversationTitleTags
        jobConversations={
          (conversation && conversation.job_conversations) || []
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/client/src/components/chat-popup/chat-popup.component.jsx
@@ -132,7 +132,7 @@ export function ChatPopupComponent({
            onClick={() => toggleChatVisible()}
            style={{ cursor: "pointer" }}
          >
-            <MessageOutlined />
+            <MessageOutlined className="chat-popup-info-icon" />
            <strong>{t("messaging.labels.messaging")}</strong>
          </div>
        )}
--- a/client/src/components/chat-popup/chat-popup.styles.scss
+++ b/client/src/components/chat-popup/chat-popup.styles.scss
@@ -13,6 +13,9 @@
    height: 100%;
  }
 }
+.chat-popup-info-icon {
+  margin-right: 5px;
+}

@media only screen and (min-width: 992px) {
  .chat-popup {
--- a/client/src/components/chat-print-button/chat-print-button.component.jsx
+++ b/client/src/components/chat-print-button/chat-print-button.component.jsx
@@ -0,0 +1,59 @@
+import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
+import { Space, Spin } from "antd";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
+});
+
+export function ChatPrintButton({ conversation }) {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Space wrap>
+      <PrinterOutlined
+        onClick={() => {
+          setLoading(true);
+          GenerateDocument(
+            {
+              name: TemplateList("messaging").conversation_list.key,
+              variables: { id: conversation.id },
+            },
+            {
+              subject: TemplateList("messaging").conversation_list.subject,
+            },
+            "p",
+            conversation.id
+          );
+          setLoading(false);
+        }}
+      />
+      <MailOutlined
+        onClick={() => {
+          setLoading(true);
+          GenerateDocument(
+            {
+              name: TemplateList("messaging").conversation_list.key,
+              variables: { id: conversation.id },
+            },
+            {
+              subject: TemplateList("messaging").conversation_list.subject,
+            },
+            "e",
+            conversation.id
+          );
+          setLoading(false);
+        }}
+      />
+      {loading && <Spin />}
+    </Space>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ChatPrintButton);
--- a/client/src/components/contract-cars/contract-cars.component.jsx
+++ b/client/src/components/contract-cars/contract-cars.component.jsx
@@ -35,6 +35,15 @@ export default function ContractsCarsComponent({
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
      render: (text, record) => <div>{t(record.status)}</div>,
    },
+    {
+      title: t("courtesycars.fields.readiness"),
+      dataIndex: "readiness",
+      key: "readiness",
+      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      sortOrder:
+        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
+      render: (text, record) => t(record.readiness),
+    },
    {
      title: t("courtesycars.fields.year"),
      dataIndex: "year",
--- a/client/src/components/contract-jobs/contract-jobs.component.jsx
+++ b/client/src/components/contract-jobs/contract-jobs.component.jsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";

 export default function ContractsJobsComponent({
  loading,
@@ -175,7 +176,7 @@ export default function ContractsJobsComponent({
        loading={loading}
        pagination={{
          position: "top",
-          defaultPageSize: 10,
+          defaultPageSize: pageLimit,
          defaultCurrent: defaultCurrent,
        }}
        columns={columns}
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/client/src/components/contracts-list/contracts-list.component.jsx
@@ -13,6 +13,7 @@ import moment from "moment";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function ContractsList({
        }}
        pagination={{
          position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
          current: parseInt(page || 1),
          total: total,
        }}
--- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
+++ b/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";

 export default function CourtesyCarContractListComponent({
  contracts,
@@ -89,7 +90,7 @@ export default function CourtesyCarContractListComponent({
        scroll={{ x: true }}
        pagination={{
          position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
          current: parseInt(page || 1),
          total: totalContracts,
        }}
--- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
+++ b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
@@ -213,6 +214,9 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
        >
          <CourtesyCarStatus />
        </Form.Item>
+        <Form.Item label={t("courtesycars.fields.readiness")} name="readiness">
+          <CourtesyCarReadiness />
+        </Form.Item>
        <div>
          <Form.Item
            label={t("courtesycars.fields.nextservicekm")}
@@ -227,9 +231,9 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
          >
            {() => {
              const nextservicekm = form.getFieldValue("nextservicekm");
-              const mileageOver =
-                nextservicekm <= form.getFieldValue("mileage");
-
+              const mileageOver = nextservicekm
+                ? nextservicekm <= form.getFieldValue("mileage")
+                : false;
              if (mileageOver)
                return (
                  <Space direction="vertical" style={{ color: "tomato" }}>
--- a/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
+++ b/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
@@ -34,6 +34,32 @@ const CourtesyCarFuelComponent = (props, ref) => {
      step={null}
      style={{ marginLeft: "2rem", marginRight: "2rem" }}
      {...props}
+      tooltip={{
+        formatter: (value) => {
+          switch (value) {
+            case 0:
+              return t("courtesycars.labels.fuel.empty");
+            case 13:
+              return t("courtesycars.labels.fuel.18");
+            case 25:
+              return t("courtesycars.labels.fuel.14");
+            case 38:
+              return t("courtesycars.labels.fuel.38");
+            case 50:
+              return t("courtesycars.labels.fuel.12");
+            case 63:
+              return t("courtesycars.labels.fuel.58");
+            case 75:
+              return t("courtesycars.labels.fuel.34");
+            case 88:
+              return t("courtesycars.labels.fuel.78");
+            case 100:
+              return t("courtesycars.labels.fuel.full");
+            default:
+              return value;
+          }
+        },
+      }}
    />
  );
 };
--- a/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
+++ b/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
@@ -0,0 +1,35 @@
+import { Select } from "antd";
+import React, { forwardRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+const { Option } = Select;
+
+const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (value !== option && onChange) {
+      onChange(option);
+    }
+  }, [value, option, onChange]);
+
+  return (
+    <Select
+      allowClear
+      ref={ref}
+      value={option}
+      style={{
+        width: 100,
+      }}
+      onChange={setOption}
+    >
+      <Option value="courtesycars.readiness.ready">
+        {t("courtesycars.readiness.ready")}
+      </Option>
+      <Option value="courtesycars.readiness.notready">
+        {t("courtesycars.readiness.notready")}
+      </Option>
+    </Select>
+  );
+};
+export default forwardRef(CourtesyCarReadinessComponent);
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -74,10 +74,11 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
      render: (text, record) => {
        const { nextservicedate, nextservicekm, mileage } = record;

-        const mileageOver = nextservicekm <= mileage;
+        const mileageOver = nextservicekm ? nextservicekm <= mileage : false;

        const dueForService =
-          nextservicedate && moment(nextservicedate).isBefore(moment());
+          nextservicedate &&
+          moment(nextservicedate).endOf("day").isSameOrBefore(moment());

        return (
          <Space>
@@ -91,6 +92,26 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
        );
      },
    },
+    {
+      title: t("courtesycars.fields.readiness"),
+      dataIndex: "readiness",
+      key: "readiness",
+      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      filters: [
+        {
+          text: t("courtesycars.readiness.ready"),
+          value: "courtesycars.readiness.ready",
+        },
+        {
+          text: t("courtesycars.readiness.notready"),
+          value: "courtesycars.readiness.notready",
+        },
+      ],
+      onFilter: (value, record) => value.includes(record.readiness),
+      sortOrder:
+        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
+      render: (text, record) => t(record.readiness),
+    },
    {
      title: t("courtesycars.fields.year"),
      dataIndex: "year",
@@ -131,6 +152,36 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
      sortOrder:
        state.sortedInfo.columnKey === "plate" && state.sortedInfo.order,
    },
+    {
+      title: t("courtesycars.fields.fuel"),
+      dataIndex: "fuel",
+      key: "fuel",
+      sorter: (a, b) => alphaSort(a.fuel, b.fuel),
+      sortOrder:
+        state.sortedInfo.columnKey === "fuel" && state.sortedInfo.order,
+      render: (text, record) => {
+        switch (record.fuel) {
+          case 100:
+            return t("courtesycars.labels.fuel.full");
+          case 88:
+            return t("courtesycars.labels.fuel.78");
+          case 63:
+            return t("courtesycars.labels.fuel.58");
+          case 50:
+            return t("courtesycars.labels.fuel.12");
+          case 38:
+            return t("courtesycars.labels.fuel.34");
+          case 25:
+            return t("courtesycars.labels.fuel.14");
+          case 13:
+            return t("courtesycars.labels.fuel.18");
+          case 0:
+            return t("courtesycars.labels.fuel.empty");
+          default:
+            return record.fuel;
+        }
+      },
+    },
    {
      title: t("courtesycars.labels.outwith"),
      dataIndex: "outwith",
--- a/client/src/components/csi-response-form/csi-response-form.container.jsx
+++ b/client/src/components/csi-response-form/csi-response-form.container.jsx
@@ -5,6 +5,7 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
+import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
 import ConfigFormComponents from "../config-form-components/config-form-components.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -44,6 +45,13 @@ export default function CsiResponseFormContainer() {
          readOnly
          componentList={data.csi_by_pk.csiquestion.config}
        />
+        {data.csi_by_pk.validuntil ? (
+          <>
+            {t("csi.fields.validuntil")}
+            {": "}
+            <DateFormatter>{data.csi_by_pk.validuntil}</DateFormatter>
+          </>
+        ) : null}
      </Form>
    </Card>
  );
--- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
+++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
@@ -5,8 +5,11 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, dateSort } from "../../utils/sorters";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";

 export default function CsiResponseListPaginated({
  refetch,
@@ -15,23 +18,23 @@ export default function CsiResponseListPaginated({
  total,
 }) {
  const search = queryString.parse(useLocation().search);
-  const { responseid, page, sortcolumn, sortorder } = search;
+  const { responseid } = search;
  const history = useHistory();
+  const { t } = useTranslation();
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: { text: "" },
+    page: "",
  });

-  const { t } = useTranslation();
  const columns = [
    {
      title: t("jobs.fields.ro_number"),
      dataIndex: "ro_number",
      key: "ro_number",
-      width: "8%",
      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-      sortOrder: sortcolumn === "ro_number" && sortorder,
-
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
      render: (text, record) => (
        <Link to={"/manage/jobs/" + record.job.id}>
          {record.job.ro_number || t("general.labels.na")}
@@ -40,15 +43,18 @@ export default function CsiResponseListPaginated({
    },
    {
      title: t("jobs.fields.owner"),
-      dataIndex: "owner",
-      key: "owner",
-      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
-      width: "25%",
-      sortOrder: sortcolumn === "owner" && sortorder,
+      dataIndex: "owner_name",
+      key: "owner_name",
+      sorter: (a, b) =>
+        alphaSort(
+          OwnerNameDisplayFunction(a.job),
+          OwnerNameDisplayFunction(b.job)
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner_name" && state.sortedInfo.order,
      render: (text, record) => {
-        return record.job.owner ? (
-          <Link to={"/manage/owners/" + record.job.owner.id}>
+        return record.job.ownerid ? (
+          <Link to={"/manage/owners/" + record.job.ownerid}>
            <OwnerNameDisplay ownerObject={record.job} />
          </Link>
        ) : (
@@ -63,9 +69,9 @@ export default function CsiResponseListPaginated({
      dataIndex: "completedon",
      key: "completedon",
      ellipsis: true,
-      sorter: (a, b) => a.completedon - b.completedon,
-      width: "25%",
-      sortOrder: sortcolumn === "completedon" && sortorder,
+      sorter: (a, b) => dateSort(a.completedon, b.completedon),
+      sortOrder:
+        state.sortedInfo.columnKey === "completedon" && state.sortedInfo.order,
      render: (text, record) => {
        return record.completedon ? (
          <DateFormatter>{record.completedon}</DateFormatter>
@@ -75,11 +81,12 @@ export default function CsiResponseListPaginated({
  ];

  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    search.page = pagination.current;
-    search.sortcolumn = sorter.columnKey;
-    search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    setState({
+      ...state,
+      filteredInfo: filters,
+      sortedInfo: sorter,
+      page: pagination.current,
+    });
  };

  const handleOnRowClick = (record) => {
@@ -106,8 +113,8 @@ export default function CsiResponseListPaginated({
        loading={loading}
        pagination={{
          position: "top",
-          pageSize: 25,
-          current: parseInt(page || 1),
+          pageSize: pageLimit,
+          current: parseInt(state.page || 1),
          total: total,
        }}
        columns={columns}
@@ -121,13 +128,6 @@ export default function CsiResponseListPaginated({
          selectedRowKeys: [responseid],
          type: "radio",
        }}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
-            }, // click row
-          };
-        }}
      />
    </Card>
  );
--- a/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
+++ b/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
@@ -6,6 +6,7 @@ import { alphaSort } from "../../../utils/sorters";
 import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
 import Dinero from "dinero.js";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";

 export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
  const { t } = useTranslation();
@@ -118,7 +119,7 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
        <div style={{ height: "100%" }}>
          <Table
            onChange={handleTableChange}
-            pagination={{ position: "top", defaultPageSize: 50 }}
+            pagination={{ position: "top", defaultPageSize: pageLimit }}
            columns={columns}
            scroll={{ x: true, y: "calc(100% - 4em)" }}
            rowKey="id"
--- a/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";

 export default function DashboardScheduledInToday({ data, ...cardProps }) {
  const { t } = useTranslation();
@@ -195,7 +196,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
      <div style={{ height: "100%" }}>
        <Table
          onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: 50 }}
+          pagination={{ position: "top", defaultPageSize: pageLimit }}
          columns={columns}
          scroll={{ x: true, y: "calc(100% - 2em)" }}
          rowKey="id"
--- a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
@@ -11,6 +11,7 @@ import { Link } from "react-router-dom";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
+import {pageLimit} from "../../../utils/config";

 export default function DashboardScheduledOutToday({ data, ...cardProps }) {
  const { t } = useTranslation();
@@ -165,7 +166,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
      <div style={{ height: "100%" }}>
        <Table
          onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: 50 }}
+          pagination={{ position: "top", defaultPageSize: pageLimit }}
          columns={columns}
          scroll={{ x: true, y: "calc(100% - 2em)" }}
          rowKey="id"
--- a/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
+++ b/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -117,7 +118,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
      }
    >
      <Table
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
        dataSource={allocationsSummary}
--- a/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
+++ b/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Dinero from "dinero.js";
 import { SyncOutlined } from "@ant-design/icons";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -94,7 +95,7 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
      )}
      <Table
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="center"
        dataSource={allocationsSummary}
--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -2,7 +2,7 @@ import { Button, Col, Collapse, Result, Row, Space } from "antd";
 import React from "react";
 import { withTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-
+import * as Sentry from "@sentry/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -138,7 +138,6 @@ class ErrorBoundary extends React.Component {
  }
 }

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation()(ErrorBoundary));
+export default Sentry.withErrorBoundary(
+  connect(mapStateToProps, mapDispatchToProps)(withTranslation()(ErrorBoundary))
+);
--- a/client/src/components/form-date-picker/form-date-picker.component.jsx
+++ b/client/src/components/form-date-picker/form-date-picker.component.jsx
@@ -65,8 +65,17 @@ export function FormDatePicker({
      });
    }

-    if (_a.isValid() && onChange)
-      onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+    if (_a.isValid() && onChange) {
+      if (onlyFuture) {
+        if (moment().subtract(1, "day").isBefore(_a)) {
+          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+        } else {
+          onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+        }
+      } else {
+        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+      }
+    }
  };

  return (
--- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
+++ b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
 //import DatePicker from "react-datepicker";
 //import "react-datepicker/src/stylesheets/datepicker.scss";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import { TimePicker } from "antd";
 import moment from "moment";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //To be used as a form element only.

 const DateTimePicker = (
@@ -26,20 +26,21 @@ const DateTimePicker = (
        value={value}
        onBlur={onBlur}
        onChange={onChange}
+        onlyFuture={onlyFuture}
        isDateOnly={false}
      />

      <TimePicker
-      value={value ? moment(value) : null}
-      {...(onlyFuture && {
-        disabledDate: (d) => moment().isAfter(d),
-      })}
-      onChange={onChange}
-      showSecond={false}
-      minuteStep={15}
-      onBlur={onBlur}
-      format="hh:mm a"
-      {...restProps}
+        value={value ? moment(value) : null}
+        {...(onlyFuture && {
+          disabledDate: (d) => moment().isAfter(d),
+        })}
+        onChange={onChange}
+        showSecond={false}
+        minuteStep={15}
+        onBlur={onBlur}
+        format="hh:mm a"
+        {...restProps}
      />
    </div>
  );
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -13,7 +13,7 @@ import Icon, {
  FileFilled,
  //GlobalOutlined,
  HomeFilled,
-  ImportOutlined,
+  ImportOutlined, InfoCircleOutlined,
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
@@ -26,8 +26,8 @@ import Icon, {
  UserOutlined,
 } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
-import React from "react";
+import {Layout, Menu, Switch, Tooltip} from "antd";
+import React, {useEffect, useState} from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import {
@@ -52,6 +52,7 @@ import {
  selectBodyshop,
  selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import {handleBeta, setBeta, checkBeta} from "../../utils/handleBeta";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -102,9 +103,21 @@ function Header({
    {},
    bodyshop && bodyshop.imexshopid
  );
+  const [betaSwitch, setBetaSwitch] = useState(false);

  const { t } = useTranslation();

+  useEffect(() => {
+    const isBeta = checkBeta();
+    setBetaSwitch(isBeta);
+  }, []);
+
+  const betaSwitchChange = (checked) => {
+    setBeta(checked);
+    setBetaSwitch(checked);
+    handleBeta();
+  }
+
  return (
    <Layout.Header>
      <Menu
@@ -431,6 +444,17 @@ function Header({
            </Menu.Item>
          ))}
        </Menu.SubMenu>
+        <Menu.Item style={{marginLeft: 'auto'}} key="profile">
+          <Tooltip title="A more modern ImEX Online is ready for you to try! You can switch back at any time.">
+            <InfoCircleOutlined/>
+            <span style={{marginRight: 8}}>Try the new ImEX Online</span>
+            <Switch
+                checked={betaSwitch}
+                onChange={betaSwitchChange}
+            />
+          </Tooltip>
+        </Menu.Item>
+
      </Menu>
    </Layout.Header>
  );
--- a/client/src/components/inventory-list/inventory-list.component.jsx
+++ b/client/src/components/inventory-list/inventory-list.component.jsx
@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
 import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
@@ -213,7 +214,7 @@ export function JobsList({
        loading={loading}
        pagination={{
          position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
          current: parseInt(page || 1),
          total: total,
        }}
--- a/client/src/components/inventory-list/inventory-list.container.jsx
+++ b/client/src/components/inventory-list/inventory-list.container.jsx
@@ -11,6 +11,7 @@ import {
 } from "../../redux/application/application.actions";
 import AlertComponent from "../alert/alert.component";
 import InventoryListPaginated from "./inventory-list.component";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  //bodyshop: selectBodyshop,
@@ -32,8 +33,8 @@ export function InventoryList({ setBreadcrumbs, setSelectedHeader }) {
      nextFetchPolicy: "network-only",
      variables: {
        search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
        consumedIsNull: showall === "true" ? null : true,
        order: [
          {
--- a/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx
+++ b/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import Dinero from "dinero.js";
+import {pageLimit} from "../../utils/config";
 export default function JobCostingPartsTable({ data, summaryData }) {
  const [searchText, setSearchText] = useState("");
  const [state, setState] = useState({
@@ -98,7 +99,7 @@ export default function JobCostingPartsTable({ data, summaryData }) {
          x: "50%", //y: "40rem"
        }}
        onChange={handleTableChange}
-        pagination={{ position: "top", defaultPageSize: 50 }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="id"
        dataSource={filteredData}
--- a/client/src/components/job-create-iou/job-create-iou.component.jsx
+++ b/client/src/components/job-create-iou/job-create-iou.component.jsx
@@ -7,21 +7,31 @@ import { connect } from "react-redux";
 import { useHistory } from "react-router";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import {
  selectBodyshop,
  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { CreateIouForJob } from "../jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util";
+
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
+  technician: selectTechnician,
 });
+
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobCreateIOU);

-export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
+export function JobCreateIOU({
+  bodyshop,
+  currentUser,
+  job,
+  selectedJobLines,
+  technician,
+}) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const client = useApolloClient();
@@ -79,13 +89,19 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
      title={t("jobs.labels.createiouwarning")}
      onConfirm={handleCreateIou}
      disabled={
-        !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+        !selectedJobLines ||
+        selectedJobLines.length === 0 ||
+        !job.converted ||
+        technician
      }
    >
      <Button
        loading={loading}
        disabled={
-          !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+          !selectedJobLines ||
+          selectedJobLines.length === 0 ||
+          !job.converted ||
+          technician
        }
      >
        {t("jobs.actions.createiou")}
--- a/client/src/components/job-detail-cards/job-detail-cards.template.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.template.component.jsx
@@ -1,15 +1,37 @@
-import React from "react";
 import { Card } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";

-export default function JobDetailCardTemplate({
+const mapStateToProps = createStructuredSelector({
+  technician: selectTechnician,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDetailCardTemplate);
+
+export function JobDetailCardTemplate({
  loading,
  title,
  extraLink,
+  technician,
  ...otherProps
 }) {
+  const { t } = useTranslation();
+
  let extra;
-  if (extraLink) extra = { extra: <Link to={extraLink}>More</Link> };
+  if (extraLink && !technician)
+    extra = {
+      extra: <Link to={extraLink}>{t("jobs.labels.cards.more")}</Link>,
+    };
  return (
    <Card
      size="small"
--- a/client/src/components/job-lifecycle/job-lifecycle.component.jsx
+++ b/client/src/components/job-lifecycle/job-lifecycle.component.jsx
@@ -0,0 +1,246 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import moment from "moment";
+import axios from 'axios';
+import {Badge, Card, Space, Table, Tag} from 'antd';
+import {gql, useQuery} from "@apollo/client";
+import {DateTimeFormatterFunction} from "../../utils/DateFormatter";
+import {isEmpty} from "lodash";
+import {useTranslation} from "react-i18next";
+
+require('./job-lifecycle.styles.scss');
+
+// show text on bar if text can fit
+export function JobLifecycleComponent({job, statuses, ...rest}) {
+    const [loading, setLoading] = useState(true);
+    const [lifecycleData, setLifecycleData] = useState(null);
+    const {t} = useTranslation();    // Used for tracking external state changes.
+
+    const {data} = useQuery(gql`
+        query get_job_test($id: uuid!){
+            jobs_by_pk(id:$id){
+                id
+                status
+            }
+        }
+    `, {
+        variables: {
+            id: job.id
+        },
+        fetchPolicy: 'cache-only'
+    });
+
+    /**
+     * Gets the lifecycle data for the job.
+     * @returns {Promise<void>}
+     */
+    const getLifecycleData = useCallback(async () => {
+        if (job && job.id && statuses && statuses.statuses) {
+            try {
+                setLoading(true);
+                const response = await axios.post("/job/lifecycle", {
+                    jobids: job.id,
+                    statuses: statuses.statuses
+                });
+                const data = response.data.transition[job.id];
+                setLifecycleData(data);
+            } catch (err) {
+                console.error(`${t('job_lifecycle.errors.fetch')}: ${err.message}`);
+            } finally {
+                setLoading(false);
+            }
+        }
+    }, [job, statuses, t]);
+
+    useEffect(() => {
+        if (!data) return;
+        setTimeout(() => {
+            getLifecycleData().catch(err => console.error(`${t('job_lifecycle.errors.fetch')}: ${err.message}`));
+        }, 500);
+    }, [data, getLifecycleData, t]);
+
+    const columns = [
+        {
+            title: t('job_lifecycle.columns.value'),
+            dataIndex: 'value',
+            key: 'value',
+        },
+        {
+            title: t('job_lifecycle.columns.start'),
+            dataIndex: 'start',
+            key: 'start',
+            render: (text) => DateTimeFormatterFunction(text),
+            sorter: (a, b) => moment(a.start).unix() - moment(b.start).unix(),
+        },
+        {
+            title: t('job_lifecycle.columns.relative_start'),
+            dataIndex: 'start_readable',
+            key: 'start_readable',
+        },
+        {
+            title: t('job_lifecycle.columns.end'),
+            dataIndex: 'end',
+            key: 'end',
+            sorter: (a, b) => {
+                if (isEmpty(a.end) || isEmpty(b.end)) {
+                    if (isEmpty(a.end) && isEmpty(b.end)) {
+                        return 0;
+                    }
+                    return isEmpty(a.end) ? 1 : -1;
+                }
+                return moment(a.end).unix() - moment(b.end).unix();
+            },
+            render: (text) => isEmpty(text) ? t('job_lifecycle.content.not_available') : DateTimeFormatterFunction(text)
+        },
+        {
+            title: t('job_lifecycle.columns.relative_end'),
+            dataIndex: 'end_readable',
+            key: 'end_readable',
+        },
+        {
+            title: t('job_lifecycle.columns.duration'),
+            dataIndex: 'duration_readable',
+            key: 'duration_readable',
+            sorter: (a, b) => a.duration - b.duration,
+        },
+    ];
+
+    return (
+        <Card loading={loading} title={t('job_lifecycle.content.title')}>
+            {!loading ? (
+                lifecycleData && lifecycleData.lifecycle && lifecycleData.durations ? (
+                    <Space direction='vertical' style={{width: '100%'}}>
+                        <Card
+                            type='inner'
+                            title={(
+                                <Space direction='horizontal' size='small'>
+                                    <Badge status='processing' count={lifecycleData.durations.totalStatuses}/>
+                                    {t('job_lifecycle.content.title_durations')}
+                                </Space>
+
+                            )}
+                            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,
+
+                                            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>
+                            <Card type='inner' title={t('job_lifecycle.content.legend_title')}
+                                  style={{marginTop: '10px'}}>
+                                <div>
+                                    {lifecycleData.durations.summations.map((key) => (
+                                        <Tag color={key.color} style={{width: '13vh', padding: '4px', margin: '4px'}}>
+                                            <div
+                                                aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                                title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                                                style={{
+                                                    backgroundColor: '#f0f2f5',
+                                                    color: '#000',
+                                                    padding: '4px',
+                                                    textAlign: 'center'
+                                                }}>
+                                                {key.status} ({key.roundedPercentage})
+                                            </div>
+                                        </Tag>
+                                    ))}
+                                </div>
+                            </Card>
+                            {(lifecycleData?.durations?.humanReadableTotal) ||
+                            (lifecycleData.lifecycle[0] && lifecycleData.lifecycle[0].value && lifecycleData?.durations?.totalCurrentStatusDuration?.humanReadable) ?
+                                <Card style={{marginTop: '10px'}}>
+                                    <ul>
+                                        {lifecycleData.durations && lifecycleData.durations.humanReadableTotal &&
+                                            <li>
+                                                <span
+                                                    style={{fontWeight: 'bold'}}>{t('job_lifecycle.content.previous_status_accumulated_time')}:</span> {lifecycleData.durations.humanReadableTotal}
+                                            </li>
+                                        }
+                                        {lifecycleData.lifecycle[0] && lifecycleData.lifecycle[0].value && lifecycleData?.durations?.totalCurrentStatusDuration?.humanReadable &&
+                                            <li>
+                                                <span
+                                                    style={{fontWeight: 'bold'}}>{t('job_lifecycle.content.current_status_accumulated_time')} ({lifecycleData.lifecycle[0].value}):</span> {lifecycleData.durations.totalCurrentStatusDuration.humanReadable}
+                                            </li>
+                                        }
+                                    </ul>
+                                </Card>
+                                : null}
+                        </Card>
+                        <Card type='inner' title={(
+                            <>
+                                <Space direction="horizontal" size="small">
+                                    <Badge status='processing' count={lifecycleData.lifecycle.length}/>
+                                    {t('job_lifecycle.content.title_transitions')}
+                                </Space>
+                            </>
+                        )}>
+                            <Table style={{
+                                overflow: 'auto',
+                                width: '100%',
+                            }} columns={columns} dataSource={lifecycleData.lifecycle}/>
+                        </Card>
+                    </Space>
+                ) : (
+                    <Card type='inner' style={{textAlign: 'center'}}>
+                        {t('job_lifecycle.content.data_unavailable')}
+                    </Card>
+                )
+            ) : (
+                <Card type='inner' title={t('job_lifecycle.content.title_loading')}>
+                    {t('job_lifecycle.content.loading')}
+                </Card>
+            )}
+        </Card>
+    );
+}
+
+export default JobLifecycleComponent;
--- a/client/src/components/job-lifecycle/job-lifecycle.styles.scss
+++ b/client/src/components/job-lifecycle/job-lifecycle.styles.scss
--- a/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
+++ b/client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx
@@ -53,12 +53,14 @@ export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
  );

  return (
-    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
-      <Button shape="round">
-        <span>{job.status}</span>
+    <>
+      <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
+        <Button shape="round">
+          <span>{job.status}</span>

-        <DownCircleFilled />
-      </Button>
-    </Dropdown>
+          <DownCircleFilled />
+        </Button>
+      </Dropdown>
+    </>
  );
 }
--- 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
@@ -1,34 +1,18 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
-import { gql } from "@apollo/client";
+import { Button, Space, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import {
+  DELETE_DELIVERY_CHECKLIST,
+  DELETE_INTAKE_CHECKLIST,
+} from "../../graphql/jobs.queries";
+
 export default function JobAdminDeleteIntake({ job }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
-  const [deleteIntake] = useMutation(gql`
-    mutation DELETE_INTAKE($jobId: uuid!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { intakechecklist: null }
-      ) {
-        id
-        intakechecklist
-      }
-    }
-  `);

-  const [DELETE_DELIVERY] = useMutation(gql`
-    mutation DELETE_DELIVERY($jobId: uuid!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { deliverchecklist: null }
-      ) {
-        id
-        deliverchecklist
-      }
-    }
-  `);
+  const [deleteIntake] = useMutation(DELETE_INTAKE_CHECKLIST);
+  const [deleteDelivery] = useMutation(DELETE_DELIVERY_CHECKLIST);

  const handleDelete = async (values) => {
    setLoading(true);
@@ -50,7 +34,7 @@ export default function JobAdminDeleteIntake({ job }) {

  const handleDeleteDelivery = async (values) => {
    setLoading(true);
-    const result = await DELETE_DELIVERY({
+    const result = await deleteDelivery({
      variables: { jobId: job.id },
    });

@@ -68,12 +52,22 @@ export default function JobAdminDeleteIntake({ job }) {

  return (
    <>
-      <Button loading={loading} onClick={handleDelete}>
-        {t("jobs.labels.deleteintake")}
-      </Button>
-      <Button loading={loading} onClick={handleDeleteDelivery}>
-        {t("jobs.labels.deletedelivery")}
-      </Button>
+      <Space wrap>
+        <Button
+          loading={loading}
+          onClick={handleDelete}
+          disabled={!job.intakechecklist}
+        >
+          {t("jobs.labels.deleteintake")}
+        </Button>
+        <Button
+          loading={loading}
+          onClick={handleDeleteDelivery}
+          disabled={!job.deliverychecklist}
+        >
+          {t("jobs.labels.deletedelivery")}
+        </Button>
+      </Space>
    </>
  );
 }
--- a/client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx
+++ b/client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx
@@ -1,5 +1,5 @@
-import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { useMutation } from "@apollo/client";
+import { Button, Space, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";

@@ -7,6 +7,11 @@ import moment from "moment";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
+import {
+  MARK_JOB_AS_EXPORTED,
+  MARK_JOB_AS_UNINVOICED,
+  MARK_JOB_FOR_REEXPORT,
+} from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
  selectBodyshop,
@@ -35,58 +40,18 @@ export function JobAdminMarkReexport({
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
-  const [markJobForReexport] = useMutation(gql`
-    mutation MARK_JOB_FOR_REEXPORT($jobId: uuid!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { date_exported: null
-        status: "${bodyshop.md_ro_statuses.default_invoiced}"
-        }
-      ) {
-        id
-        date_exported
-        status
-        date_invoiced
-      }
-    }
-  `);

-  const [markJobExported] = useMutation(gql`
-    mutation MARK_JOB_AS_EXPORTED($jobId: uuid!, $date_exported: timestamptz!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { date_exported: $date_exported
-        status: "${bodyshop.md_ro_statuses.default_exported}"
-        }
-      ) {
-        id
-        date_exported
-        date_invoiced
-        status
-      }
-    }
-  `);
-  const [markJobUninvoiced] = useMutation(gql`
-    mutation MARK_JOB_AS_UNINVOICED($jobId: uuid!, ) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { date_exported: null
-          date_invoiced: null
-        status: "${bodyshop.md_ro_statuses.default_delivered}"
-        }
-      ) {
-        id
-        date_exported
-        date_invoiced
-        status
-      }
-    }
-  `);
+  const [markJobForReexport] = useMutation(MARK_JOB_FOR_REEXPORT);
+  const [markJobExported] = useMutation(MARK_JOB_AS_EXPORTED);
+  const [markJobUninvoiced] = useMutation(MARK_JOB_AS_UNINVOICED);

  const handleMarkForExport = async () => {
    setLoading(true);
    const result = await markJobForReexport({
-      variables: { jobId: job.id },
+      variables: {
+        jobId: job.id,
+        default_invoiced: bodyshop.md_ro_statuses.default_invoiced,
+      },
    });

    if (!result.errors) {
@@ -108,7 +73,11 @@ export function JobAdminMarkReexport({
  const handleMarkExported = async () => {
    setLoading(true);
    const result = await markJobExported({
-      variables: { jobId: job.id, date_exported: moment() },
+      variables: {
+        jobId: job.id,
+        date_exported: moment(),
+        default_exported: bodyshop.md_ro_statuses.default_exported,
+      },
    });

    await insertExportLog({
@@ -144,7 +113,10 @@ export function JobAdminMarkReexport({
  const handleUninvoice = async () => {
    setLoading(true);
    const result = await markJobUninvoiced({
-      variables: { jobId: job.id },
+      variables: {
+        jobId: job.id,
+        default_delivered: bodyshop.md_ro_statuses.default_delivered,
+      },
    });

    if (!result.errors) {
@@ -165,27 +137,29 @@ export function JobAdminMarkReexport({

  return (
    <>
-      <Button
-        loading={loading}
-        disabled={!job.date_exported}
-        onClick={handleMarkForExport}
-      >
-        {t("jobs.labels.markforreexport")}
-      </Button>
-      <Button
-        loading={loading}
-        disabled={job.date_exported}
-        onClick={handleMarkExported}
-      >
-        {t("jobs.actions.markasexported")}
-      </Button>
-      <Button
-        loading={loading}
-        disabled={!job.date_invoiced || job.date_exported}
-        onClick={handleUninvoice}
-      >
-        {t("jobs.actions.uninvoice")}
-      </Button>
+      <Space wrap>
+        <Button
+          loading={loading}
+          disabled={!job.date_exported}
+          onClick={handleMarkForExport}
+        >
+          {t("jobs.labels.markforreexport")}
+        </Button>
+        <Button
+          loading={loading}
+          disabled={job.date_exported}
+          onClick={handleMarkExported}
+        >
+          {t("jobs.actions.markasexported")}
+        </Button>
+        <Button
+          loading={loading}
+          disabled={!job.date_invoiced || job.date_exported}
+          onClick={handleUninvoice}
+        >
+          {t("jobs.actions.uninvoice")}
+        </Button>
+      </Space>
    </>
  );
 }
--- a/client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx
+++ b/client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx
@@ -0,0 +1,65 @@
+import { useMutation } from "@apollo/client";
+import { Switch, notification } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_REMOVE_FROM_AR } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+
+const mapStateToProps = createStructuredSelector({});
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminRemoveAR);
+
+export function JobsAdminRemoveAR({ insertAuditTrail, job }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [switchValue, setSwitchValue] = useState(job.remove_from_ar);
+
+  const [mutationUpdateRemoveFromAR] = useMutation(UPDATE_REMOVE_FROM_AR);
+
+  const handleChange = async (value) => {
+    setLoading(true);
+    const result = await mutationUpdateRemoveFromAR({
+      variables: { jobId: job.id, remove_from_ar: value },
+    });
+
+    if (!result.errors) {
+      notification["success"]({ message: t("jobs.successes.save") });
+      insertAuditTrail({
+        jobid: job.id,
+        operation: AuditTrailMapping.admin_job_remove_from_ar(value),
+      });
+      setSwitchValue(value);
+    } else {
+      notification["error"]({
+        message: t("jobs.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ marginRight: "10px" }}>
+          {t("jobs.labels.remove_from_ar")}:
+        </div>
+        <div>
+          <Switch
+            checked={switchValue}
+            loading={loading}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
--- a/client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx
+++ b/client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx
@@ -1,9 +1,10 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { UNVOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
  selectBodyshop,
@@ -29,66 +30,17 @@ export function JobsAdminUnvoid({
 }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
-  const [updateJob] = useMutation(gql`
-mutation UNVOID_JOB($jobId: uuid!) {
-  update_jobs_by_pk(pk_columns: {id: $jobId}, _set: {voided: false, status: "${
-    bodyshop.md_ro_statuses.default_imported
-  }", date_void: null}) {
-    id
-    date_void
-    voided
-    status
-  }
-  insert_notes(objects: {jobid: $jobId, audit: true, created_by: "${
-    currentUser.email
-  }", text: "${t("jobs.labels.unvoidnote")}"}) {
-    returning {
-      id
-    }
-  }
-}
-
-  `);
-
-  //       const result = await voidJob({
-  //     variables: {
-  //       jobId: job.id,
-  //       job: {
-  //         status: bodyshop.md_ro_statuses.default_void,
-  //         voided: true,
-  //       },
-  //       note: [
-  //         {
-  //           jobid: job.id,
-  //           created_by: currentUser.email,
-  //           audit: true,
-  //           text: t("jobs.labels.voidnote", {
-  //             date: moment().format("MM/DD/yyy"),
-  //             time: moment().format("hh:mm a"),
-  //           }),
-  //         },
-  //       ],
-  //     },
-  //   });
-
-  //   if (!!!result.errors) {
-  //     notification["success"]({
-  //       message: t("jobs.successes.voided"),
-  //     });
-  //     //go back to jobs list.
-  //     history.push(`/manage/`);
-  //   } else {
-  //     notification["error"]({
-  //       message: t("jobs.errors.voiding", {
-  //         error: JSON.stringify(result.errors),
-  //       }),
-  //     });
-  //   }
+  const [mutationUnvoidJob] = useMutation(UNVOID_JOB);

  const handleUpdate = async (values) => {
    setLoading(true);
-    const result = await updateJob({
-      variables: { jobId: job.id },
+    const result = await mutationUnvoidJob({
+      variables: {
+        jobId: job.id,
+        default_imported: bodyshop.md_ro_statuses.default_imported,
+        currentUserEmail: currentUser.email,
+        text: t("jobs.labels.unvoidnote"),
+      },
    });

    if (!result.errors) {
@@ -110,8 +62,10 @@ mutation UNVOID_JOB($jobId: uuid!) {
  };

  return (
-    <Button loading={loading} disabled={!job.voided} onClick={handleUpdate}>
-      {t("jobs.actions.unvoid")}
-    </Button>
+    <>
+      <Button loading={loading} disabled={!job.voided} onClick={handleUpdate}>
+        {t("jobs.actions.unvoid")}
+      </Button>
+    </>
  );
 }
--- a/client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js
+++ b/client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js
@@ -1,6 +1,6 @@
-import { GET_ALL_JOBLINES_BY_PK } from "../../graphql/jobs-lines.queries";
 import { gql } from "@apollo/client";
 import _ from "lodash";
+import { GET_ALL_JOBLINES_BY_PK } from "../../graphql/jobs-lines.queries";

 export const GetSupplementDelta = async (client, jobId, newLines) => {
  const {
@@ -50,7 +50,7 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
    .reduce((acc, value, idx) => {
      return acc + generateRemoveQuery(value, idx);
    }, "");
-  console.log(insertQueries, updateQueries, removeQueries);
+  //console.log(insertQueries, updateQueries, removeQueries);

  if ((insertQueries + updateQueries + removeQueries).trim() === "") {
    return new Promise((resolve, reject) => {
--- a/client/src/components/jobs-available-table/jobs-available-supplement.headerfields.js
+++ b/client/src/components/jobs-available-table/jobs-available-supplement.headerfields.js
@@ -114,7 +114,7 @@ const headerFields = [
  "ins_ct_ph",
  "ins_ct_phx",
  "loss_cat",
-  //ad2
+  //AD2
  "clmt_ln",
  "clmt_fn",
  "clmt_title",
@@ -219,7 +219,16 @@ const headerFields = [
  "loc_title",
  "loc_ph",
  "loc_phx",
-  "loc_ea"
+  "loc_ea",
+  //VEH
+  "plate_no",
+  "plate_st",
+  "v_vin",
+  "v_model_yr",
+  "v_make_desc",
+  "v_model_desc",
+  "v_options",
+  "v_color",
 ];

 export default headerFields;
--- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
+++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
@@ -19,10 +19,13 @@ export default function JobsCreateOwnerInfoNewComponent() {
          label={t("owners.fields.ownr_ln")}
          name={["owner", "data", "ownr_ln"]}
          rules={[
-            {
-              required: state.owner.new,
+            ({ getFieldValue }) => ({
+              required:
+                state.owner.new &&
+                (!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
+                  getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
              //message: t("general.validation.required"),
-            },
+            }),
          ]}
        >
          <Input disabled={!state.owner.new} />
@@ -31,10 +34,13 @@ export default function JobsCreateOwnerInfoNewComponent() {
          label={t("owners.fields.ownr_fn")}
          name={["owner", "data", "ownr_fn"]}
          rules={[
-            {
-              required: state.owner.new,
+            ({ getFieldValue }) => ({
+              required:
+                state.owner.new &&
+                (!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
+                  getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
              //message: t("general.validation.required"),
-            },
+            }),
          ]}
        >
          <Input disabled={!state.owner.new} />
@@ -51,6 +57,17 @@ export default function JobsCreateOwnerInfoNewComponent() {
        <Form.Item
          label={t("owners.fields.ownr_co_nm")}
          name={["owner", "data", "ownr_co_nm"]}
+          rules={[
+            ({ getFieldValue }) => ({
+              required:
+                state.owner.new &&
+                (!getFieldValue(["owner", "data", "ownr_ln"]) ||
+                  !getFieldValue(["owner", "data", "ownr_fn"]) ||
+                  getFieldValue(["owner", "data", "ownr_ln"]) === "" ||
+                  getFieldValue(["owner", "data", "ownr_fn"]) === ""),
+              //message: t("general.validation.required"),
+            }),
+          ]}
        >
          <Input disabled={!state.owner.new} />
        </Form.Item>
--- 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
@@ -108,6 +108,14 @@ export function JobsDetailHeaderActions({
        },
      },
    });
+    insertAuditTrail({
+      jobid: job.id,
+      operation: AuditTrailMapping.alertToggle(
+        !!job.production_vars && !!job.production_vars.alert
+          ? !job.production_vars.alert
+          : true
+      ),
+    });
  };

  const handleSuspend = (e) => {
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -1,8 +1,8 @@
 import {
+  BranchesOutlined,
  ExclamationCircleFilled,
  PauseCircleOutlined,
  WarningFilled,
-  BranchesOutlined,
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tag, Tooltip } from "antd";
 import React, { useState } from "react";
@@ -15,6 +15,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
@@ -160,19 +161,35 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
        <Card
          style={{ height: "100%" }}
          title={
-            <Link to={disabled ? "#" : `/manage/owners/${job.owner.id}`}>
-              {ownerTitle.length > 0
-                ? ownerTitle
-                : t("owner.labels.noownerinfo")}
-            </Link>
+            disabled ? (
+              <>
+                {ownerTitle.length > 0
+                  ? ownerTitle
+                  : t("owner.labels.noownerinfo")}
+              </>
+            ) : (
+              <Link to={`/manage/owners/${job.owner.id}`}>
+                {ownerTitle.length > 0
+                  ? ownerTitle
+                  : t("owner.labels.noownerinfo")}
+              </Link>
+            )
          }
        >
          <div>
            <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
-              <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
+              {disabled ? (
+                <PhoneNumberFormatter>{job.ownr_ph1}</PhoneNumberFormatter>
+              ) : (
+                <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
+              )}
            </DataLabel>
            <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
-              <ChatOpenButton phone={job.ownr_ph2} jobid={job.id} />
+              {disabled ? (
+                <PhoneNumberFormatter>{job.ownr_ph2}</PhoneNumberFormatter>
+              ) : (
+                <ChatOpenButton phone={job.ownr_ph2} jobid={job.id} />
+              )}
            </DataLabel>
            <DataLabel key="3" label={t("owners.fields.address")}>
              {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
@@ -180,7 +197,11 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
              } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
            </DataLabel>
            <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
-              {job.ownr_ea || ""}
+              {disabled ? (
+                <>{job.ownr_ea || ""}</>
+              ) : job.ownr_ea ? (
+                <a href={`mailto:${job.ownr_ea}`}>{job.ownr_ea}</a>
+              ) : null}
            </DataLabel>
            {job.owner?.tax_number && (
              <DataLabel key="5" label={t("owners.fields.tax_number")}>
@@ -195,17 +216,19 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
          style={{ height: "100%" }}
          title={
            job.vehicle ? (
-              <Link
-                to={
-                  disabled
-                    ? "#"
-                    : job.vehicle && `/manage/vehicles/${job.vehicle.id}`
-                }
-              >
-                {vehicleTitle.length > 0
-                  ? vehicleTitle
-                  : t("vehicles.labels.novehinfo")}
-              </Link>
+              disabled ? (
+                <>
+                  {vehicleTitle.length > 0
+                    ? vehicleTitle
+                    : t("vehicles.labels.novehinfo")}{" "}
+                </>
+              ) : (
+                <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
+                  {vehicleTitle.length > 0
+                    ? vehicleTitle
+                    : t("vehicles.labels.novehinfo")}
+                </Link>
+              )
            ) : (
              <span></span>
            )
@@ -221,9 +244,19 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
              <VehicleVinDisplay>
                {`${job.v_vin || t("general.labels.na")}`}
              </VehicleVinDisplay>
+              {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+                job.v_vin?.length !== 17 ? (
+                  <WarningFilled
+                    style={{ color: "tomato", marginLeft: ".3rem" }}
+                  />
+                ) : null
+              ) : null}
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.regie_number")}>
+              {job.regie_number || t("general.labels.na")}
            </DataLabel>
            <DataLabel label={t("jobs.labels.relatedros")}>
-              <JobsRelatedRos jobid={job.id} job={job} />
+              <JobsRelatedRos jobid={job.id} job={job} disabled={disabled} />
            </DataLabel>
            {job.vehicle && job.vehicle.notes && (
              <DataLabel
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -10,6 +10,8 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { pageLimit } from "../../utils/config";
+import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 const mapStateToProps = createStructuredSelector({
@@ -24,6 +26,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
  const search = queryString.parse(useLocation().search);
  const [openSearchResults, setOpenSearchResults] = useState([]);
  const [searchLoading, setSearchLoading] = useState(false);
+  const [filter, setFilter] = useLocalStorage("filter_jobs_all", null);
  const { page, sortcolumn, sortorder } = search;
  const history = useHistory();

@@ -33,17 +36,14 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
      title: t("jobs.fields.ro_number"),
      dataIndex: "ro_number",
      key: "ro_number",
-
      sorter: true, //(a, b) => alphaSort(a.ro_number, b.ro_number),
      sortOrder: sortcolumn === "ro_number" && sortorder,
-
      render: (text, record) => (
        <Link to={"/manage/jobs/" + record.id}>
          {record.ro_number || t("general.labels.na")}
        </Link>
      ),
    },
-
    {
      title: t("jobs.fields.owner"),
      dataIndex: "ownr_ln",
@@ -95,6 +95,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
      render: (text, record) => {
        return record.status || t("general.labels.na");
      },
+      filteredValue: filter?.status || null,
      filters: bodyshop.md_ro_statuses.statuses.map((s) => {
        return { text: s, value: [s] };
      }),
@@ -125,7 +126,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
      title: t("vehicles.fields.plate_no"),
      dataIndex: "plate_no",
      key: "plate_no",
-
      ellipsis: true,
      sorter: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
      sortOrder: sortcolumn === "plate_no" && sortorder,
@@ -137,7 +137,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
      title: t("jobs.fields.clm_no"),
      dataIndex: "clm_no",
      key: "clm_no",
-
      ellipsis: true,
      sorter: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
      sortOrder: sortcolumn === "clm_no" && sortorder,
@@ -193,6 +192,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
    } else {
      delete search.statusFilters;
    }
+    setFilter(filters);
    history.push({ search: queryString.stringify(search) });
  };

@@ -259,11 +259,11 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
        pagination={
          search?.search
            ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                showSizeChanger: false,
              }
            : {
-                pageSize: 25,
+                pageSize: pageLimit,
                current: parseInt(page || 1),
                total: total,
                showSizeChanger: false,
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -1,8 +1,8 @@
 import {
-  SyncOutlined,
+  BranchesOutlined,
  ExclamationCircleFilled,
  PauseCircleOutlined,
-  BranchesOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
@@ -14,9 +14,10 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from "../../utils/sorters";
+import { onlyUnique } from "../../utils/arrayHelper";
+import { alphaSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -39,10 +40,8 @@ export function JobsList({ bodyshop }) {
    nextFetchPolicy: "network-only",
  });

-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+  const [state, setState] = useState({ sortedInfo: {} });
+  const [filter, setFilter] = useLocalStorage("filter_jobs_list", null);

  const { t } = useTranslation();
  const history = useHistory();
@@ -91,7 +90,8 @@ export function JobsList({ bodyshop }) {
    : [];

  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    setState({ ...state, sortedInfo: sorter });
+    setFilter(filters);
  };

  const handleOnRowClick = (record) => {
@@ -117,7 +117,6 @@ export function JobsList({ bodyshop }) {
        parseInt((b.ro_number || "0").replace(/\D/g, "")),
      sortOrder:
        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-
      render: (text, record) => (
        <Link
          to={"/manage/jobs/" + record.id}
@@ -145,7 +144,6 @@ export function JobsList({ bodyshop }) {
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
-
      responsive: ["md"],
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      sortOrder:
@@ -185,16 +183,15 @@ export function JobsList({ bodyshop }) {
        <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
      ),
    },
-
    {
      title: t("jobs.fields.status"),
      dataIndex: "status",
      key: "status",
      ellipsis: true,
-
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder:
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filteredValue: filter?.status || null,
      filters:
        (jobs &&
          jobs
@@ -205,7 +202,14 @@ export function JobsList({ bodyshop }) {
                text: s || "No Status*",
                value: [s],
              };
-            })) ||
+            })
+            .sort((a, b) =>
+              statusSort(
+                a.text,
+                b.text,
+                bodyshop.md_ro_statuses.active_statuses
+              )
+            )) ||
        [],
      onFilter: (value, record) => value.includes(record.status),
    },
@@ -262,6 +266,7 @@ export function JobsList({ bodyshop }) {
      dataIndex: "ins_co_nm",
      key: "ins_co_nm",
      ellipsis: true,
+      filteredValue: filter?.ins_co_nm || null,
      filters:
        (jobs &&
          jobs
@@ -269,10 +274,11 @@ export function JobsList({ bodyshop }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s,
+                text: s || "No Ins. Co.*",
                value: [s],
              };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
        [],
      onFilter: (value, record) => value.includes(record.ins_co_nm),
      responsive: ["md"],
@@ -283,7 +289,6 @@ export function JobsList({ bodyshop }) {
      key: "clm_total",
      responsive: ["md"],
      ellipsis: true,
-
      sorter: (a, b) => a.clm_total - b.clm_total,
      sortOrder:
        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
@@ -294,10 +299,11 @@ export function JobsList({ bodyshop }) {
    {
      title: t("jobs.labels.estimator"),
      dataIndex: "jobs.labels.estimator",
-      key: "jobs.labels.estimator",
+      key: "estimator",
      ellipsis: true,
      responsive: ["xl"],
      filterSearch: true,
+      filteredValue: filter?.estimator || null,
      filters:
        (jobs &&
          jobs
@@ -305,10 +311,11 @@ export function JobsList({ bodyshop }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "N/A",
+                text: s || "No Estimator*",
                value: [s],
              };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
        [],
      onFilter: (value, record) =>
        value.includes(
--- a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
+++ b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
@@ -16,7 +16,9 @@ import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { onlyUnique } from "../../utils/arrayHelper";
-import { alphaSort } from "../../utils/sorters";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -52,10 +54,8 @@ export function JobsReadyList({ bodyshop }) {
    nextFetchPolicy: "network-only",
  });

-  const [state, setState] = useState({
-    sortedInfo: {},
-    filteredInfo: { text: "" },
-  });
+  const [state, setState] = useState({ sortedInfo: {} });
+  const [filter, setFilter] = useLocalStorage("filter_jobs_ready", null);

  const { t } = useTranslation();
  const history = useHistory();
@@ -104,7 +104,8 @@ export function JobsReadyList({ bodyshop }) {
    : [];

  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    setState({ ...state, sortedInfo: sorter });
+    setFilter(filters);
  };

  const handleOnRowClick = (record) => {
@@ -128,7 +129,6 @@ export function JobsReadyList({ bodyshop }) {
      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
      sortOrder:
        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-
      render: (text, record) => (
        <Link
          to={"/manage/jobs/" + record.id}
@@ -156,7 +156,6 @@ export function JobsReadyList({ bodyshop }) {
      dataIndex: "owner",
      key: "owner",
      ellipsis: true,
-
      responsive: ["md"],
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      sortOrder:
@@ -196,16 +195,15 @@ export function JobsReadyList({ bodyshop }) {
        <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
      ),
    },
-
    {
      title: t("jobs.fields.status"),
      dataIndex: "status",
      key: "status",
      ellipsis: true,
-
      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder:
        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filteredValue: filter?.status || null,
      filters:
        (jobs &&
          jobs
@@ -216,11 +214,17 @@ export function JobsReadyList({ bodyshop }) {
                text: s || "No Status*",
                value: [s],
              };
-            })) ||
+            })
+            .sort((a, b) =>
+              statusSort(
+                a.text,
+                b.text,
+                bodyshop.md_ro_statuses.active_statuses
+              )
+            )) ||
        [],
      onFilter: (value, record) => value.includes(record.status),
    },
-
    {
      title: t("jobs.fields.vehicle"),
      dataIndex: "vehicle",
@@ -273,6 +277,7 @@ export function JobsReadyList({ bodyshop }) {
      dataIndex: "ins_co_nm",
      key: "ins_co_nm",
      ellipsis: true,
+      filteredValue: filter?.ins_co_nm || null,
      filters:
        (jobs &&
          jobs
@@ -280,10 +285,11 @@ export function JobsReadyList({ bodyshop }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s,
+                text: s || "No Ins Co.*",
                value: [s],
              };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
        [],
      onFilter: (value, record) => value.includes(record.ins_co_nm),
      responsive: ["md"],
@@ -294,7 +300,6 @@ export function JobsReadyList({ bodyshop }) {
      key: "clm_total",
      responsive: ["md"],
      ellipsis: true,
-
      sorter: (a, b) => a.clm_total - b.clm_total,
      sortOrder:
        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
@@ -305,9 +310,10 @@ export function JobsReadyList({ bodyshop }) {
    {
      title: t("jobs.labels.estimator"),
      dataIndex: "jobs.labels.estimator",
-      key: "jobs.labels.estimator",
+      key: "estimator",
      ellipsis: true,
      responsive: ["xl"],
+      filteredValue: filter?.estimator || null,
      filterSearch: true,
      filters:
        (jobs &&
@@ -316,10 +322,11 @@ export function JobsReadyList({ bodyshop }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "N/A",
+                text: s || "No Estimator*",
                value: [s],
              };
-            })) ||
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
        [],
      onFilter: (value, record) =>
        value.includes(
@@ -377,7 +384,7 @@ export function JobsReadyList({ bodyshop }) {
    >
      <Table
        loading={loading}
-        pagination={{ defaultPageSize: 50 }}
+        pagination={{ defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="id"
        dataSource={jobs}
--- a/client/src/components/jobs-related-ros/jobs-related-ros.component.jsx
+++ b/client/src/components/jobs-related-ros/jobs-related-ros.component.jsx
@@ -2,7 +2,7 @@ import { Space, Tag } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";

-export default function JobsRelatedRos({ jobid, job }) {
+export default function JobsRelatedRos({ jobid, job, disabled }) {
  if (!(job && job.vehicle && job.vehicle.jobs)) return null;
  return (
    <Space wrap>
@@ -10,9 +10,15 @@ export default function JobsRelatedRos({ jobid, job }) {
        .filter((j) => j.id !== job.id)
        .map((j) => (
          <Tag key={j.id}>
-            <Link to={`/manage/jobs/${j?.id}`}>{`${j.ro_number || "N/A"}${
-              j.clm_no ? ` | ${j.clm_no}` : ""
-            }${j.status ? ` | ${j.status}` : ""}`}</Link>
+            {disabled ? (
+              <>{`${j.ro_number || "N/A"}${j.clm_no ? ` | ${j.clm_no}` : ""}${
+                j.status ? ` | ${j.status}` : ""
+              }`}</>
+            ) : (
+              <Link to={`/manage/jobs/${j?.id}`}>{`${j.ro_number || "N/A"}${
+                j.clm_no ? ` | ${j.clm_no}` : ""
+              }${j.status ? ` | ${j.status}` : ""}`}</Link>
+            )}
          </Tag>
        ))}
    </Space>
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/client/src/components/owners-list/owners-list.component.jsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";

 export default function OwnersListComponent({
  loading,
@@ -122,7 +123,7 @@ export default function OwnersListComponent({
        loading={loading}
        pagination={{
          position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
          current: parseInt(page || 1),
          total: total,
        }}
--- a/client/src/components/owners-list/owners-list.container.jsx
+++ b/client/src/components/owners-list/owners-list.container.jsx
@@ -5,6 +5,7 @@ import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";

 export default function OwnersListContainer() {
  const searchParams = queryString.parse(useLocation().search);
@@ -16,8 +17,8 @@ export default function OwnersListContainer() {
      nextFetchPolicy: "network-only",
      variables: {
        search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
        order: [
          {
            [sortcolumn || "created_at"]: sortorder
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -18,6 +18,7 @@ import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -282,11 +283,11 @@ export function PaymentsListPaginated({
        pagination={
          search?.search
            ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                showSizeChanger: false,
              }
            : {
-                pageSize: 25,
+                pageSize: pageLimit,
                current: parseInt(page || 1),
                total: total,
                showSizeChanger: false,
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -115,7 +115,7 @@ export function ProductionBoardKanbanComponent({
      // console.log("==> New Card is somewhere in the middle");
      movedCardNewKanbanParent = newChildCard.kanbanparent;
    } else {
-      throw new Error("==> !!!!!!Couldn't find a parent.!!!! <==");
+      console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
    }
    const newChildCardNewParent = newChildCard ? card.id : null;
    const update = await client.mutate({
@@ -153,7 +153,7 @@ export function ProductionBoardKanbanComponent({
      0
    )
    .toFixed(1);
-    const totalLAB = data
+  const totalLAB = data
    .reduce(
      (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0),
      0
--- a/client/src/components/production-list-columns/production-list-columns.add.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.add.component.jsx
@@ -1,7 +1,7 @@
-import React from "react";
 import { Button, Dropdown, Menu } from "antd";
-import dataSource from "./production-list-columns.data";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import dataSource from "./production-list-columns.data";

 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,6 +24,7 @@ export function ProductionColumnsComponent({
  columnState,
  technician,
  bodyshop,
+  data,
  tableState,
 }) {
  const [columns, setColumns] = columnState;
@@ -36,6 +37,7 @@ export function ProductionColumnsComponent({
        bodyshop,
        technician,
        state: tableState,
+        data: data,
        activeStatuses: bodyshop.md_ro_statuses.active_statuses,
      }).filter((i) => i.key === e.key),
    ]);
@@ -46,6 +48,7 @@ export function ProductionColumnsComponent({
    technician,
    state: tableState,
    activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+    data: data,
  });
  const menu = (
    <Menu
--- a/client/src/components/production-list-columns/production-list-columns.alert.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.alert.component.jsx
@@ -1,12 +1,23 @@
 import { ExclamationCircleFilled } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
 import { Dropdown, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "@apollo/client";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";

-export default function ProductionListColumnAlert({ record }) {
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export function ProductionListColumnAlert({ record, insertAuditTrail }) {
  const { t } = useTranslation();

  const [updateAlert] = useMutation(UPDATE_JOB);
@@ -27,6 +38,14 @@ export default function ProductionListColumnAlert({ record }) {
          },
        },
      },
+    });
+    insertAuditTrail({
+      jobid: record.id,
+      operation: AuditTrailMapping.alertToggle(
+        !!record.production_vars && !!record.production_vars.alert
+          ? !record.production_vars.alert
+          : true
+      ),
    }).then(() => {
      if (record.refetch) record.refetch();
    });
@@ -58,3 +77,8 @@ export default function ProductionListColumnAlert({ record }) {
    </Dropdown>
  );
 }
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionListColumnAlert);
--- a/client/src/components/production-list-columns/production-list-columns.data.js
+++ b/client/src/components/production-list-columns/production-list-columns.data.js
@@ -1,4 +1,4 @@
-import { PauseCircleOutlined, BranchesOutlined } from "@ant-design/icons";
+import { BranchesOutlined, PauseCircleOutlined } from "@ant-design/icons";
 import { Space, Tooltip } from "antd";
 import i18n from "i18next";
 import moment from "moment";
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
+import { onlyUnique } from "../../utils/arrayHelper";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
@@ -25,7 +26,7 @@ import ProductionListColumnCategory from "./production-list-columns.status.categ
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";

-const r = ({ technician, state, activeStatuses, bodyshop }) => {
+const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
  return [
    {
      title: i18n.t("jobs.actions.viewdetail"),
@@ -75,7 +76,14 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
      dataIndex: "ownr",
      key: "ownr",
      ellipsis: true,
-      render: (text, record) => <OwnerNameDisplay ownerObject={record} />,
+      render: (text, record) =>
+        technician ? (
+          <OwnerNameDisplay ownerObject={record} />
+        ) : (
+          <Link to={`/manage/owners/${record.ownerid}`}>
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ),
      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      sortOrder:
        state.sortedInfo.columnKey === "ownr" && state.sortedInfo.order,
@@ -92,13 +100,18 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
        ),
      sortOrder:
        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
-      render: (text, record) => (
-        <Link to={`/manage/vehicles/${record.vehicleid}`}>{`${
-          record.v_model_yr || ""
-        } ${record.v_make_desc || ""} ${record.v_model_desc || ""} ${
-          record.v_color || ""
-        } ${record.plate_no || ""}`}</Link>
-      ),
+      render: (text, record) =>
+        technician ? (
+          <>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          } ${record.v_color || ""} ${record.plate_no || ""}`}</>
+        ) : (
+          <Link to={`/manage/vehicles/${record.vehicleid}`}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""} ${
+            record.v_color || ""
+          } ${record.plate_no || ""}`}</Link>
+        ),
    },
    {
      title: i18n.t("jobs.fields.actual_in"),
@@ -536,6 +549,36 @@ const r = ({ technician, state, activeStatuses, bodyshop }) => {
        <JobPartsQueueCount parts={record.joblines_status} record={record} />
      ),
    },
+    {
+      title: i18n.t("jobs.labels.estimator"),
+      dataIndex: "estimator",
+      key: "estimator",
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.est_ct_fn || ""} ${a.est_ct_ln || ""}`.trim(),
+          `${b.est_ct_fn || ""} ${b.est_ct_ln || ""}`.trim()
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "estimator" && state.sortedInfo.order,
+      filters:
+        (data &&
+          data
+            .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "N/A",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) =>
+        value.includes(
+          `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
+        ),
+      render: (text, record) =>
+        `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
+    },

    //Added as a place holder for St Claude. Not implemented as it requires another join for a field used by only 1 client.
    // {
--- a/client/src/components/production-list-detail/production-list-detail.component.jsx
+++ b/client/src/components/production-list-detail/production-list-detail.component.jsx
@@ -13,12 +13,14 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import JobAtChange from "../job-at-change/job-at-change.component";
 import JobDetailCardsDocumentsComponent from "../job-detail-cards/job-detail-cards.documents.component";
 import JobDetailCardsNotesComponent from "../job-detail-cards/job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "../job-detail-cards/job-detail-cards.parts.component";
+import CardTemplate from "../job-detail-cards/job-detail-cards.template.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add-button.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
@@ -103,7 +105,13 @@ export function ProductionListDetail({
      {error && <AlertComponent error={JSON.stringify(error)} />}
      {!loading && data && (
        <div>
-          <JobEmployeeAssignments job={data.jobs_by_pk} refetch={refetch} />
+          <CardTemplate
+            title={t("jobs.labels.employeeassignments")}
+            loading={loading}
+          >
+            <JobEmployeeAssignments job={data.jobs_by_pk} refetch={refetch} />
+          </CardTemplate>
+          <div style={{ height: "8px" }} />
          <Descriptions bordered column={1}>
            <Descriptions.Item label={t("jobs.fields.ro_number")}>
              {theJob.ro_number || ""}
@@ -111,7 +119,7 @@ export function ProductionListDetail({
            <Descriptions.Item label={t("jobs.fields.alt_transport")}>
              <Space>
                {data.jobs_by_pk.alt_transport || ""}
-                <JobAtChange event={{ job: data.jobs_by_pk }} />
+                <JobAtChange job={data.jobs_by_pk} />
              </Space>
            </Descriptions.Item>
            <Descriptions.Item label={t("jobs.fields.clm_no")}>
@@ -121,15 +129,30 @@ export function ProductionListDetail({
              {theJob.ins_co_nm || ""}
            </Descriptions.Item>
            <Descriptions.Item label={t("jobs.fields.owner")}>
-              <OwnerNameDisplay ownerObject={theJob} />
-              <StartChatButton
-                phone={data.jobs_by_pk.ownr_ph1}
-                jobid={data.jobs_by_pk.id}
-              />
-              <StartChatButton
-                phone={data.jobs_by_pk.ownr_ph2}
-                jobid={data.jobs_by_pk.id}
-              />
+              <Space>
+                <OwnerNameDisplay ownerObject={theJob} />
+                {!technician ? (
+                  <>
+                    <StartChatButton
+                      phone={data.jobs_by_pk.ownr_ph1}
+                      jobid={data.jobs_by_pk.id}
+                    />
+                    <StartChatButton
+                      phone={data.jobs_by_pk.ownr_ph2}
+                      jobid={data.jobs_by_pk.id}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <PhoneNumberFormatter>
+                      {data.jobs_by_pk.ownr_ph1}
+                    </PhoneNumberFormatter>
+                    <PhoneNumberFormatter>
+                      {data.jobs_by_pk.ownr_ph2}
+                    </PhoneNumberFormatter>
+                  </>
+                )}
+              </Space>
            </Descriptions.Item>
            <Descriptions.Item label={t("jobs.fields.vehicle")}>
              {`${theJob.v_model_yr || ""} ${theJob.v_color || ""} ${
@@ -146,21 +169,24 @@ export function ProductionListDetail({
              <DateFormatter>{theJob.scheduled_completion}</DateFormatter>
            </Descriptions.Item>
          </Descriptions>
-
+          <div style={{ height: "8px" }} />
          <JobDetailCardsPartsComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
-
+          <div style={{ height: "8px" }} />
          <JobDetailCardsNotesComponent
            loading={loading}
            data={data ? data.jobs_by_pk : null}
          />
          {!bodyshop.uselocalmediaserver && (
-            <JobDetailCardsDocumentsComponent
-              loading={loading}
-              data={data ? data.jobs_by_pk : null}
-            />
+            <>
+              <div style={{ height: "8px" }} />
+              <JobDetailCardsDocumentsComponent
+                loading={loading}
+                data={data ? data.jobs_by_pk : null}
+              />
+            </>
          )}
        </div>
      )}
--- a/client/src/components/production-list-table/production-list-table-view-select.component.jsx
+++ b/client/src/components/production-list-table/production-list-table-view-select.component.jsx
@@ -24,6 +24,7 @@ export function ProductionListTable({
  technician,
  currentUser,
  state,
+  data,
  setColumns,
  setState,
 }) {
@@ -41,6 +42,7 @@ export function ProductionListTable({
              bodyshop,
              technician,
              state,
+              data: data,
              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
            }).find((e) => e.key === k.key),
            width: k.width,
@@ -95,6 +97,7 @@ export function ProductionListTable({
          ...ProductionListColumns({
            technician,
            state,
+            data: data,
            activeStatuses: bodyshop.md_ro_statuses.active_statuses,
          }).find((e) => e.key === k.key),
          width: k.width,
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.component.jsx
@@ -10,7 +10,7 @@ import {
  Statistic,
  Table,
 } from "antd";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -79,6 +79,7 @@ export function ProductionListTable({
            bodyshop,
            technician,
            state,
+            data: data,
            activeStatuses: bodyshop.md_ro_statuses.active_statuses,
          }).find((e) => e.key === k.key),
          width: k.width ?? 100,
@@ -87,6 +88,33 @@ export function ProductionListTable({
      []
  );

+  useEffect(() => {
+    const newColumns =
+      (state &&
+        matchingColumnConfig &&
+        matchingColumnConfig.columns.columnKeys.map((k) => {
+          return {
+            ...ProductionListColumns({
+              bodyshop,
+              technician,
+              state,
+              data: data,
+              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+            }).find((e) => e.key === k.key),
+            width: k.width ?? 100,
+          };
+        })) ||
+      [];
+    setColumns(newColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    //state,
+    matchingColumnConfig,
+    bodyshop,
+    technician,
+    data,
+  ]); //State removed from dependency array as it causes race condition when removing columns from table view and is not needed.
+
  const handleTableChange = (pagination, filters, sorter) => {
    setState({
      ...state,
@@ -104,7 +132,8 @@ export function ProductionListTable({

  const removeColumn = (e) => {
    const { key } = e;
-    setColumns(columns.filter((i) => i.key !== key));
+    const newColumns = columns.filter((i) => i.key !== key);
+    setColumns(newColumns);
  };

  const handleResize =
@@ -227,6 +256,7 @@ export function ProductionListTable({
            <ProductionListColumnsAdd
              columnState={[columns, setColumns]}
              tableState={state}
+              data={data}
            />
            <ProductionListSaveConfigButton
              columns={columns}
@@ -237,6 +267,7 @@ export function ProductionListTable({
              state={state}
              setState={setState}
              setColumns={setColumns}
+              data={data}
            />

            <Input
--- a/client/src/components/rbac-wrapper/rbac-defaults.js
+++ b/client/src/components/rbac-wrapper/rbac-defaults.js
@@ -55,10 +55,11 @@ const ret = {
  "shiftclock:view": 2,

  "shop:config": 4,
-  "shop:rbac": 5,
-  "shop:vendors": 2,
  "shop:dashboard": 3,
+  "shop:rbac": 5,
+  "shop:reportcenter": 2,
  "shop:templates": 4,
+  "shop:vendors": 2,

  "temporarydocs:view": 2,

--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -68,8 +68,8 @@ export function ReportCenterModalComponent({ reportCenterModal }) {

  const handleFinish = async (values) => {
    setLoading(true);
-    const start = values.dates[0];
-    const end = values.dates[1];
+    const start = values.dates ? values.dates[0] : null;
+    const end = values.dates ? values.dates[1] : null;
    const { id } = values;

    await GenerateDocument(
@@ -239,20 +239,30 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
            else return null;
          }}
        </Form.Item>
-        <Form.Item
-          name="dates"
-          label={t("reportcenter.labels.dates")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <DatePicker.RangePicker
-            format="MM/DD/YYYY"
-            ranges={DatePIckerRanges}
-          />
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            const datedisable = Templates[key] && Templates[key].datedisable;
+            if (datedisable !== true) {
+              return (
+                <Form.Item
+                  name="dates"
+                  label={t("reportcenter.labels.dates")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <DatePicker.RangePicker
+                    format="MM/DD/YYYY"
+                    ranges={DatePIckerRanges}
+                  />
+                </Form.Item>
+              );
+            } else return null;
+          }}
        </Form.Item>
        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
          {() => {
--- a/client/src/components/report-center-modal/report-center-modal.container.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.container.jsx
@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectReportCenter } from "../../redux/modals/modals.selectors";
+import RbacWrapperComponent from "../rbac-wrapper/rbac-wrapper.component";
 import ReportCenterModalComponent from "./report-center-modal.component";

 const mapStateToProps = createStructuredSelector({
@@ -33,7 +34,9 @@ export function ReportCenterModalContainer({
      destroyOnClose
      width="80%"
    >
-      <ReportCenterModalComponent />
+      <RbacWrapperComponent action="shop:reportcenter">
+        <ReportCenterModalComponent />
+      </RbacWrapperComponent>
    </Modal>
  );
 }
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -216,6 +216,7 @@ export function ScheduleJobModalContainer({
      okButtonProps={{
        loading: loading,
      }}
+      closable={false}
    >
      <Form
        form={form}
--- a/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
+++ b/client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx
@@ -10,13 +10,14 @@ import OwnerNameDisplay from "../owner-name-display/owner-name-display.component
 import ScoreboardEntryEdit from "../scoreboard-entry-edit/scoreboard-entry-edit.component";
 import ScoreboardRemoveButton from "../scoreboard-remove-button/scorebard-remove-button.component";
 import { SyncOutlined } from "@ant-design/icons";
+import {pageLimit} from "../../utils/config";
 export default function ScoreboardJobsList({ scoreBoardlist }) {
  const { t } = useTranslation();
  const [state, setState] = useState({
    visible: false,
    search: "",
    current: 1,
-    pageSize: 10,
+    pageSize: pageLimit,
  });

  const { loading, error, data, refetch } = useQuery(
@@ -148,7 +149,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
            }
            pagination={{
              position: "top",
-              pageSize: state.pageSize || 10,
+              pageSize: state.pageSize || pageLimit,
              current: state.current || 1,
              total: data ? data.scoreboard_aggregate.aggregate.count : 0,
            }}
--- a/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.component.jsx
+++ b/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.component.jsx
@@ -29,7 +29,7 @@ export default connect(

 export function ScoreboardTimeTicketsStats({ bodyshop }) {
  const { t } = useTranslation();
-  const startDate = moment().startOf("month")
+  const startDate = moment().startOf("month");
  const endDate = moment().endOf("month");

  const fixedPeriods = useMemo(() => {
@@ -84,6 +84,8 @@ export function ScoreboardTimeTicketsStats({ bodyshop }) {
      end: endDate.format("YYYY-MM-DD"),
      fixedStart: fixedPeriods.start.format("YYYY-MM-DD"),
      fixedEnd: fixedPeriods.end.format("YYYY-MM-DD"),
+      jobStart: startDate,
+      jobEnd: endDate,
    },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
@@ -340,11 +342,21 @@ export function ScoreboardTimeTicketsStats({ bodyshop }) {
      larData.push({ ...r, ...lar });
    });

+    const jobData = {};
+    data.jobs.forEach((job) => {
+      job.tthrs = job.joblines.reduce((acc, val) => acc + val.mod_lb_hrs, 0);
+    });
+    jobData.tthrs = data.jobs
+      .reduce((acc, val) => acc + val.tthrs, 0)
+      .toFixed(1);
+    jobData.count = data.jobs.length.toFixed(0);
+
    return {
      fixed: ret,
      combinedData: combinedData,
      labData: labData,
      larData: larData,
+      jobData: jobData,
    };
  }, [fixedPeriods, data, bodyshop]);

@@ -356,7 +368,10 @@ export function ScoreboardTimeTicketsStats({ bodyshop }) {
        <ScoreboardTimeticketsTargetsTable />
      </Col>
      <Col span={24}>
-        <ScoreboardTicketsStats data={calculatedData.fixed} />
+        <ScoreboardTicketsStats
+          data={calculatedData.fixed}
+          jobData={calculatedData.jobData}
+        />
      </Col>
      <Col span={24}>
        <ScoreboardTimeTicketsChart
--- a/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.stats.component.jsx
+++ b/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.stats.component.jsx
@@ -41,7 +41,7 @@ function useLocalStorage(key, initialValue) {
  return [storedValue, setStoredValue];
 }

-export function ScoreboardTicketsStats({ data, bodyshop }) {
+export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
  const { t } = useTranslation();
  const [isLarge, setIsLarge] = useLocalStorage("isLargeStatistic", false);

@@ -408,7 +408,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
            {/* Monthly Stats */}
            <Row gutter={[16, 16]}>
              {/* This Month */}
-              <Col span={8} align="center">
+              <Col span={7} align="center">
                <Card size="small" title={t("scoreboard.labels.thismonth")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
@@ -482,7 +482,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
                </Card>
              </Col>
              {/* Last Month */}
-              <Col span={8} align="center">
+              <Col span={7} align="center">
                <Card size="small" title={t("scoreboard.labels.lastmonth")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
@@ -556,7 +556,7 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
                </Card>
              </Col>
              {/* Efficiency Over Period */}
-              <Col span={8} align="center">
+              <Col span={7} align="center">
                <Card
                  size="small"
                  title={t("scoreboard.labels.efficiencyoverperiod")}
@@ -604,6 +604,40 @@ export function ScoreboardTicketsStats({ data, bodyshop }) {
                  </Row>
                </Card>
              </Col>
+              <Col span={3} align="center">
+                <Card
+                  size="small"
+                  title={t("scoreboard.labels.jobscompletednotinvoiced")}
+                >
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        value={jobData.count}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                  <Row gutter={[16, 16]}>
+                    <Col span={24}>
+                      <Statistic
+                        title={
+                          <Typography.Text strong>
+                            {t("scoreboard.labels.totalhrs")}
+                          </Typography.Text>
+                        }
+                        value={jobData.tthrs}
+                        valueStyle={{
+                          fontSize: statisticSize,
+                          fontWeight: statisticWeight,
+                        }}
+                      />
+                    </Col>
+                  </Row>
+                </Card>
+              </Col>
            </Row>
          </Space>
          {/* Disclaimer */}
--- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
+++ b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx
@@ -65,6 +65,8 @@ export default function ScoreboardTimeTickets() {
      end: endDate.format("YYYY-MM-DD"),
      fixedStart: fixedPeriods.start.format("YYYY-MM-DD"),
      fixedEnd: fixedPeriods.end.format("YYYY-MM-DD"),
+      jobStart: startDate,
+      jobEnd: endDate,
    },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
--- a/client/src/components/shop-csi-config-form/shop-csi-config-form.component.jsx
+++ b/client/src/components/shop-csi-config-form/shop-csi-config-form.component.jsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Form } from "antd";
+import React from "react";
 import ConfigFormComponents from "../config-form-components/config-form-components.component";

 export default function ShopCsiConfigForm({ selectedCsi }) {
@@ -9,7 +9,7 @@ export default function ShopCsiConfigForm({ selectedCsi }) {

  return (
    <div>
-      The Config Form {readOnly}
+      {readOnly}
      {selectedCsi && (
        <Form form={form} onFinish={handleFinish}>
          <ConfigFormComponents
--- a/client/src/components/shop-csi-config/shop-csi-config.component.jsx
+++ b/client/src/components/shop-csi-config/shop-csi-config.component.jsx
@@ -1,7 +1,7 @@
 import { CheckCircleFilled } from "@ant-design/icons";
+import { useQuery } from "@apollo/client";
 import { Button, Col, List, Row } from "antd";
 import React, { useState } from "react";
-import { useQuery } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { GET_ALL_QUESTION_SETS } from "../../graphql/csi.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
@@ -21,7 +21,6 @@ export default function ShopCsiConfig() {
  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
    <div>
-      The Config Form
      <Row>
        <Col span={3}>
          <List
@@ -42,7 +41,8 @@ export default function ShopCsiConfig() {
            )}
          />
        </Col>
-        <Col span={21}>
+        <Col span={1} />
+        <Col span={20}>
          <ShopCsiConfigForm selectedCsi={selectedCsi} />
        </Col>
      </Row>
--- a/client/src/components/shop-employees/shop-employees-list.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-list.component.jsx
@@ -1,14 +1,20 @@
 import { Button, Table } from "antd";
 import queryString from "query-string";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
+import { alphaSort } from "../../utils/sorters";

 export default function ShopEmployeesListComponent({ loading, employees }) {
  const { t } = useTranslation();
  const history = useHistory();
  const search = queryString.parse(useLocation().search);

+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
  const handleOnRowClick = (record) => {
    if (record) {
      search.employeeId = record.id;
@@ -18,32 +24,82 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
      history.push({ search: queryString.stringify(search) });
    }
  };
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
  const columns = [
    {
      title: t("employees.fields.employee_number"),
      dataIndex: "employee_number",
      key: "employee_number",
+      sorter: (a, b) => alphaSort(a.employee_number, b.employee_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "employee_number" &&
+        state.sortedInfo.order,
    },
    {
-      title: t("employees.fields.first_name"),
-      dataIndex: "first_name",
-      key: "first_name",
+      title: t("employees.labels.name"),
+      dataIndex: "employee_name",
+      key: "employee_name",
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.first_name || ""} ${a.last_name || ""}`.trim(),
+          `${b.first_name || ""} ${b.last_name || ""}`.trim()
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "employee_name" &&
+        state.sortedInfo.order,
+      render: (text, record) =>
+        `${record.first_name || ""} ${record.last_name || ""}`.trim(),
    },
-    {
-      title: t("employees.fields.last_name"),
-      dataIndex: "last_name",
-      key: "last_name",
-    },
-
    {
      title: t("employees.labels.rate_type"),
      dataIndex: "rate_type",
      key: "rate_type",
+      sorter: (a, b) => Number(a.flat_rate) - Number(b.flat_rate),
+      sortOrder:
+        state.sortedInfo.columnKey === "rate_type" && state.sortedInfo.order,
+      filters: [
+        {
+          text: t("employees.labels.flat_rate"),
+          value: true,
+        },
+        {
+          text: t("employees.labels.straight_time"),
+          value: false,
+        },
+      ],
+      onFilter: (value, record) => value === record.flate_rate,
      render: (text, record) =>
        record.flat_rate
          ? t("employees.labels.flat_rate")
          : t("employees.labels.straight_time"),
    },
+    {
+      title: t("employees.labels.status"),
+      dataIndex: "active",
+      key: "active",
+      sorter: (a, b) => Number(a.active) - Number(b.active),
+      sortOrder:
+        state.sortedInfo.columnKey === "active" && state.sortedInfo.order,
+      filters: [
+        {
+          text: t("employees.labels.active"),
+          value: true,
+        },
+        {
+          text: t("employees.labels.inactive"),
+          value: false,
+        },
+      ],
+      onFilter: (value, record) => value === record.active,
+      render: (text, record) =>
+        record.active
+          ? t("employees.labels.active")
+          : t("employees.labels.inactive"),
+    },
  ];
  return (
    <div>
@@ -74,6 +130,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
          type: "radio",
          selectedRowKeys: [search.employeeId],
        }}
+        onChange={handleTableChange}
        onRow={(record, rowIndex) => {
          return {
            onClick: (event) => {
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -49,13 +49,6 @@ export function ShopInfoGeneral({ form, bodyshop }) {
        header={t("bodyshop.labels.businessinformation")}
        id="businessinformation"
      >
-        <Form.Item
-        label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
-        name={["md_functionality_toggles","parts_queue_toggle"]}
-        valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.shopname")}
          name="shopname"
@@ -688,6 +681,13 @@ export function ShopInfoGeneral({ form, bodyshop }) {
        >
          <Select mode="tags" />
        </Form.Item>
+        <Form.Item
+            label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
+            name={["md_functionality_toggles","parts_queue_toggle"]}
+            valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
        <Form.Item
          name={["last_name_first"]}
          label={t("bodyshop.fields.last_name_first")}
--- a/client/src/components/shop-info/shop-info.rbac.component.jsx
+++ b/client/src/components/shop-info/shop-info.rbac.component.jsx
@@ -28,18 +28,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
  return (
    <RbacWrapper action="shop:rbac">
      <LayoutFormRow>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.accounting.payables")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "accounting:payables"]}
-        >
-          <InputNumber />
-        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.accounting.exportlog")}
          rules={[
@@ -52,6 +40,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.accounting.payables")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "accounting:payables"]}
+        >
+          <InputNumber />
+        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.accounting.payments")}
          rules={[
@@ -77,26 +77,62 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.csi.page")}
+          label={t("bodyshop.fields.rbac.bills.delete")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "csi:page"]}
+          name={["md_rbac", "bills:delete"]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.csi.export")}
+          label={t("bodyshop.fields.rbac.bills.enter")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "csi:export"]}
+          name={["md_rbac", "bills:enter"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.bills.list")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "bills:list"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.bills.reexport")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "bills:reexport"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.bills.view")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "bills:view"]}
        >
          <InputNumber />
        </Form.Item>
@@ -173,26 +209,38 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.list-active")}
+          label={t("bodyshop.fields.rbac.csi.export")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "jobs:list-active"]}
+          name={["md_rbac", "csi:export"]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.list-ready")}
+          label={t("bodyshop.fields.rbac.csi.page")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "jobs:list-ready"]}
+          name={["md_rbac", "csi:page"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.employees.page")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "employees:page"]}
        >
          <InputNumber />
        </Form.Item>
@@ -208,30 +256,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.partsqueue")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "jobs:partsqueue"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.list-all")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "jobs:list-all"]}
-        >
-          <InputNumber />
-        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.jobs.available-list")}
          rules={[
@@ -245,26 +269,14 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.create")}
+          label={t("bodyshop.fields.rbac.jobs.checklist-view")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "jobs:create"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.intake")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "jobs:intake"]}
+          name={["md_rbac", "jobs:checklist-view"]}
        >
          <InputNumber />
        </Form.Item>
@@ -280,6 +292,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.create")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:create"]}
+        >
+          <InputNumber />
+        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.jobs.deliver")}
          rules={[
@@ -305,14 +329,62 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.jobs.checklist-view")}
+          label={t("bodyshop.fields.rbac.jobs.intake")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "jobs:checklist-view"]}
+          name={["md_rbac", "jobs:intake"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.list-active")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:list-active"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.list-all")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:list-all"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.list-ready")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:list-ready"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.jobs.partsqueue")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "jobs:partsqueue"]}
        >
          <InputNumber />
        </Form.Item>
@@ -329,74 +401,14 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.enter")}
+          label={t("bodyshop.fields.rbac.owners.detail")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "bills:enter"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.delete")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:delete"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.reexport")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:reexport"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.view")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.list")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "bills:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.employees.page")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "employees:page"]}
+          name={["md_rbac", "owners:detail"]}
        >
          <InputNumber />
        </Form.Item>
@@ -412,18 +424,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.owners.detail")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "owners:detail"]}
-        >
-          <InputNumber />
-        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.payments.enter")}
          rules={[
@@ -448,6 +448,30 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.phonebook.edit")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "phonebook:edit"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.phonebook.view")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "phonebook:view"]}
+        >
+          <InputNumber />
+        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.production.board")}
          rules={[
@@ -509,38 +533,14 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          <InputNumber />
        </Form.Item>
        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.edit")}
+          label={t("bodyshop.fields.rbac.shop.config")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
-          name={["md_rbac", "timetickets:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "timetickets:shiftedit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shop.vendors")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "shop:vendors"]}
+          name={["md_rbac", "shop:config"]}
        >
          <InputNumber />
        </Form.Item>
@@ -556,18 +556,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shop.config")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "shop:config"]}
-        >
-          <InputNumber />
-        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.shop.rbac")}
          rules={[
@@ -580,6 +568,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.shop.reportcenter")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "shop:reportcenter"]}
+        >
+          <InputNumber />
+        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.shop.templates")}
          rules={[
@@ -592,6 +592,42 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.shop.vendors")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "shop:vendors"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.temporarydocs.view")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "temporarydocs:view"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.timetickets.edit")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "timetickets:edit"]}
+        >
+          <InputNumber />
+        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.timetickets.enter")}
          rules={[
@@ -616,6 +652,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "timetickets:shiftedit"]}
+        >
+          <InputNumber />
+        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.users.editaccess")}
          rules={[
@@ -628,42 +676,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.temporarydocs.view")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "temporarydocs:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.phonebook.view")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "phonebook:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.phonebook.edit")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_rbac", "phonebook:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
        {Simple_Inventory.treatment === "on" && (
          <>
            <Form.Item
--- a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
+++ b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
@@ -166,9 +166,6 @@ export function TechClockOffButton({
                      },
                      ({ getFieldValue }) => ({
                        validator(rule, value) {
-                          console.log(
-                            bodyshop.tt_enforce_hours_for_tech_console
-                          );
                          if (!bodyshop.tt_enforce_hours_for_tech_console) {
                            return Promise.resolve();
                          }
--- a/client/src/components/tech-login/tech-login.component.jsx
+++ b/client/src/components/tech-login/tech-login.component.jsx
@@ -1,7 +1,8 @@
 import { Button, Form, Input } from "antd";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { techLoginStart } from "../../redux/tech/tech.actions";
 import {
@@ -11,7 +12,6 @@ import {
 } from "../../redux/tech/tech.selectors";
 import AlertComponent from "../alert/alert.component";
 import "./tech-login.styles.scss";
-import { Redirect } from "react-router-dom";

 const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
@@ -35,6 +35,10 @@ export function TechLogin({
    techLoginStart(values);
  };

+  useEffect(() => {
+    document.title = t("titles.techconsole");
+  }, [t]);
+
  return (
    <div className="tech-login-container">
      {technician ? <Redirect to={`/tech/joblookup`} /> : null}
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -5,6 +5,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
+import {pageLimit} from "../../utils/config";
 export default function VehiclesListComponent({
  loading,
  vehicles,
@@ -106,7 +107,7 @@ export default function VehiclesListComponent({
        loading={loading}
        pagination={{
          position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
          current: parseInt(page || 1),
          total: total,
        }}
--- a/client/src/components/vehicles-list/vehicles-list.container.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.container.jsx
@@ -5,6 +5,7 @@ import AlertComponent from "../alert/alert.component";
 import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import {pageLimit} from "../../utils/config";

 export default function VehiclesListContainer() {
  const searchParams = queryString.parse(useLocation().search);
@@ -15,8 +16,8 @@ export default function VehiclesListContainer() {
    {
      variables: {
        search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
        order: [
          {
            [sortcolumn || "created_at"]: sortorder
--- a/client/src/graphql/apollo-error-handling.js
+++ b/client/src/graphql/apollo-error-handling.js
@@ -1,17 +1,21 @@
 import { onError } from "@apollo/client/link/error";
 //https://stackoverflow.com/questions/57163454/refreshing-a-token-with-apollo-client-firebase-auth
+import * as Sentry from "@sentry/react";

 const errorLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
-    if (graphQLErrors)
-      graphQLErrors.forEach(({ message, locations, path }) =>
+    if (graphQLErrors) {
+      graphQLErrors.forEach(({ message, locations, path }) => {
        console.log(
          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-        )
-      );
+        );
+        Sentry.captureException({ message, locations, path });
+      });
+    }
    if (networkError)
      console.log(`[Network error]: ${JSON.stringify(networkError)}`);
    console.log(operation.getContext());
+    return forward(operation);
  }
 );

--- a/client/src/graphql/courtesy-car.queries.js
+++ b/client/src/graphql/courtesy-car.queries.js
@@ -30,15 +30,15 @@ export const QUERY_AVAILABLE_CC = gql`
      fuel
      id
      make
-      model
-      plate
-      status
-      year
-      dailycost
      mileage
+      model
      notes
      nextservicekm
      nextservicedate
+      plate
+      readiness
+      status
+      year
    }
  }
 `;
@@ -68,19 +68,20 @@ export const QUERY_ALL_CC = gql`
      insuranceexpires
      leaseenddate
      make
+      mileage
      model
      nextservicedate
      nextservicekm
      notes
      plate
      purchasedate
+      readiness
      registrationexpires
      serviceenddate
      servicestartdate
      status
      vin
      year
-      mileage
      cccontracts(
        where: { status: { _eq: "contracts.status.out" } }
        order_by: { contract_date: desc }
@@ -90,10 +91,10 @@ export const QUERY_ALL_CC = gql`
        scheduledreturn
        job {
          id
-          ro_number
          ownr_fn
          ownr_ln
          ownr_co_nm
+          ro_number
        }
      }
    }
@@ -119,19 +120,20 @@ export const QUERY_CC_BY_PK = gql`
      insuranceexpires
      leaseenddate
      make
+      mileage
      model
      nextservicedate
      nextservicekm
      notes
      plate
      purchasedate
+      readiness
      registrationexpires
      serviceenddate
      servicestartdate
      status
      vin
      year
-      mileage
      cccontracts_aggregate {
        aggregate {
          count(distinct: true)
@@ -139,21 +141,20 @@ export const QUERY_CC_BY_PK = gql`
      }
      cccontracts(offset: $offset, limit: $limit, order_by: $order) {
        agreementnumber
+        driver_fn
+        driver_ln
        id
-        status
-        start
-        scheduledreturn
        kmstart
        kmend
-        driver_ln
-        driver_fn
+        scheduledreturn
+        start
+        status
        job {
-          ro_number
-
+          id
          ownr_ln
          ownr_fn
          ownr_co_nm
-          id
+          ro_number
        }
      }
    }
--- a/client/src/graphql/csi.queries.js
+++ b/client/src/graphql/csi.queries.js
@@ -57,19 +57,15 @@ export const INSERT_CSI = gql`
 `;

 export const QUERY_CSI_RESPONSE_PAGINATED = gql`
-  query QUERY_CSI_RESPONSE_PAGINATED(
-    $offset: Int
-    $limit: Int
-    $order: [csi_order_by!]!
-  ) {
-    csi(offset: $offset, limit: $limit, order_by: $order) {
+  query QUERY_CSI_RESPONSE_PAGINATED {
+    csi(order_by: { completedon: desc_nulls_last }) {
      id
      completedon
      job {
        ownr_fn
        ownr_ln
+        ownerid
        ro_number
-
        id
      }
    }
@@ -83,6 +79,7 @@ export const QUERY_CSI_RESPONSE_PAGINATED = gql`
 export const QUERY_CSI_RESPONSE_BY_PK = gql`
  query QUERY_CSI_RESPONSE_BY_PK($id: uuid!) {
    csi_by_pk(id: $id) {
+      completedon
      relateddata
      valid
      validuntil
--- a/client/src/graphql/employees.queries.js
+++ b/client/src/graphql/employees.queries.js
@@ -3,11 +3,12 @@ import { gql } from "@apollo/client";
 export const QUERY_EMPLOYEES = gql`
  query QUERY_EMPLOYEES {
    employees(order_by: { employee_number: asc }) {
-      last_name
-      id
+      active
+      employee_number
      first_name
      flat_rate
-      employee_number
+      id
+      last_name
    }
  }
 `;
--- a/client/src/graphql/jobs.queries.js
+++ b/client/src/graphql/jobs.queries.js
@@ -1,5 +1,65 @@
 import { gql } from "@apollo/client";

+export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
+  query QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED(
+    $offset: Int
+    $limit: Int
+    $order: [jobs_order_by!]
+    $statuses: [String!]!
+    $isConverted: Boolean
+  ) {
+    jobs(
+      offset: $offset
+      limit: $limit
+      where: { status: { _in: $statuses }, converted: { _eq: $isConverted } }
+      order_by: $order
+    ) {
+      iouparent
+      ownr_fn
+      ownr_ln
+      ownr_co_nm
+      ownr_ph1
+      ownr_ph2
+      ownr_ea
+      ownerid
+      comment
+      plate_no
+      plate_st
+      v_vin
+      v_model_yr
+      v_model_desc
+      v_make_desc
+      v_color
+      vehicleid
+      actual_completion
+      actual_delivery
+      actual_in
+      production_vars
+      id
+      ins_co_nm
+      clm_no
+      po_number
+      clm_total
+      owner_owing
+      ro_number
+      scheduled_completion
+      scheduled_in
+      scheduled_delivery
+      status
+      updated_at
+      ded_amt
+      suspended
+      est_ct_fn
+      est_ct_ln
+    }
+    jobs_aggregate(where: { status: { _in: $statuses } }) {
+      aggregate {
+        count(distinct: true)
+      }
+    }
+  }
+`;
+
 export const QUERY_ALL_ACTIVE_JOBS = gql`
  query QUERY_ALL_ACTIVE_JOBS($statuses: [String!]!, $isConverted: Boolean) {
    jobs(
@@ -60,7 +120,9 @@ export const QUERY_PARTS_QUEUE = gql`
      }
    }
    jobs(
-      where: { _and: [{ status: { _in: $statuses } }] }
+      where: {
+        _and: [{ status: { _in: $statuses }, converted: { _eq: true } }]
+      }
      offset: $offset
      limit: $limit
      order_by: $order
@@ -276,6 +338,7 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
      category
      iouparent
      ro_number
+      ownerid
      ownr_fn
      ownr_ln
      ownr_co_nm
@@ -304,6 +367,8 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
      employee_refinish
      employee_prep
      employee_csr
+      est_ct_fn
+      est_ct_ln
      suspended
      date_repairstarted
      joblines_status {
@@ -480,147 +545,166 @@ export const QUERY_JOB_COSTING_DETAILS = gql`
 export const GET_JOB_BY_PK = gql`
  query GET_JOB_BY_PK($id: uuid!) {
    jobs_by_pk(id: $id) {
-      updated_at
+      actual_completion
+      actual_delivery
+      actual_in
+      adjustment_bottom_line
+      area_of_damage
+      auto_add_ats
+      available_jobs {
+        id
+      }
+      alt_transport
+      ca_bc_pvrt
+      ca_customer_gst
+      ca_gst_registrant
+      category
+      cccontracts {
+        agreementnumber
+        courtesycar {
+          fleetnumber
+          id
+          make
+          model
+          plate
+          year
+        }
+        id
+        scheduledreturn
+        start
+        status
+      }
+      cieca_ttl
+      class
+      clm_no
+      clm_total
+      comment
+      converted
+      csiinvites {
+        completedon
+        id
+      }
+      date_estimated
+      date_exported
+      date_invoiced
+      date_last_contacted
+      date_lost_sale
+      date_next_contact
+      date_open
+      date_rentalresp
+      date_repairstarted
+      date_scheduled
+      date_towin
+      date_void
+      ded_amt
+      ded_note
+      ded_status
+      deliverchecklist
+      depreciation_taxes
+      driveable
+      employee_body
      employee_body_rel {
        id
        first_name
        last_name
      }
-      employee_refinish_rel {
-        id
-        first_name
-        last_name
-      }
-      employee_prep_rel {
-        id
-        first_name
-        last_name
-      }
+      employee_csr
      employee_csr_rel {
        id
        first_name
        last_name
      }
-      employee_csr
      employee_prep
+      employee_prep_rel {
+        id
+        first_name
+        last_name
+      }
      employee_refinish
-      employee_body
-      alt_transport
-      intakechecklist
-      invoice_final_note
-      comment
-      loss_desc
-      kmin
-      kmout
-      referral_source
-      referral_source_extra
-      unit_number
-      po_number
-      special_coverage_policy
-      scheduled_delivery
-      converted
-      lbr_adjustments
-      ro_number
-      po_number
-      clm_total
+      employee_refinish_rel {
+        id
+        first_name
+        last_name
+      }
+      est_co_nm
+      est_ct_fn
+      est_ct_ln
+      est_ea
+      est_ph1
+      federal_tax_rate
+      id
      inproduction
-      vehicleid
-      plate_no
-      plate_st
-      v_vin
-      v_model_yr
-      v_model_desc
-      v_make_desc
-      v_color
-      vehicleid
-      driveable
-      towin
-      loss_of_use
-      lost_sale_reason
-      vehicle {
-        id
-        plate_no
-        plate_st
-        v_vin
-        v_model_yr
-        v_model_desc
-        v_make_desc
-        v_color
-        notes
-        v_paint_codes
-        jobs {
-          id
-          ro_number
-          status
-          clm_no
-        }
-      }
-      available_jobs {
-        id
-      }
-      ins_co_id
-      policy_no
-      loss_date
-      clm_no
-      area_of_damage
-      ins_co_nm
      ins_addr1
      ins_city
+      ins_co_id
+      ins_co_nm
      ins_ct_ln
      ins_ct_fn
      ins_ea
      ins_ph1
-      est_co_nm
-      est_ct_fn
-      est_ct_ln
-      est_ph1
-      est_ea
-      selling_dealer
-      servicing_dealer
-      selling_dealer_contact
-      servicing_dealer_contact
-      regie_number
-      scheduled_completion
-      id
-      ded_amt
-      ded_status
-      depreciation_taxes
-      other_amount_payable
-      towing_payable
-      storage_payable
-      adjustment_bottom_line
-      federal_tax_rate
-      state_tax_rate
-      local_tax_rate
-      tax_tow_rt
-      tax_str_rt
-      tax_paint_mat_rt
-      tax_shop_mat_rt
-      tax_sub_rt
-      tax_lbr_rt
-      tax_levies_rt
-      parts_tax_rates
-      job_totals
-      ownr_fn
-      ownr_ln
-      ownr_co_nm
-      ownr_ea
-      ownr_addr1
-      ownr_addr2
-      ownr_city
-      ownr_st
-      ownr_zip
-      ownr_ctry
-      ownr_ph1
-      ownr_ph2
-      production_vars
-      ca_gst_registrant
-      ownerid
-      ded_note
-      materials
-      auto_add_ats
-      rate_ats
+      intakechecklist
+      invoice_final_note
      iouparent
+      job_totals
+      joblines(where: { removed: { _eq: false } }, order_by: { line_no: asc }) {
+        act_price
+        ah_detail_line
+        alt_partm
+        alt_partno
+        billlines(limit: 1, order_by: { bill: { date: desc } }) {
+          actual_cost
+          actual_price
+          bill {
+            id
+            invoice_number
+            vendor {
+              id
+              name
+            }
+          }
+          joblineid
+          id
+          quantity
+        }
+        convertedtolbr
+        critical
+        db_hrs
+        db_price
+        db_ref
+        id
+        ioucreated
+        lbr_amt
+        lbr_op
+        line_desc
+        line_ind
+        line_no
+        line_ref
+        location
+        manual_line
+        mod_lb_hrs
+        mod_lbr_ty
+        notes
+        oem_partno
+        op_code_desc
+        part_qty
+        part_type
+        prt_dsmk_m
+        prt_dsmk_p
+        status
+        tax_part
+        unq_seq
+      }
+      kmin
+      kmout
+      labor_rate_desc
+      lbr_adjustments
+      local_tax_rate
+      loss_date
+      loss_desc
+      loss_of_use
+      lost_sale_reason
+      materials
+      other_amount_payable
      owner {
        id
        ownr_fn
@@ -637,7 +721,40 @@ export const GET_JOB_BY_PK = gql`
        ownr_ph2
        tax_number
      }
-      labor_rate_desc
+      owner_owing
+      ownerid
+      ownr_addr1
+      ownr_addr2
+      ownr_ctry
+      ownr_city
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      ownr_st
+      ownr_zip
+      parts_tax_rates
+      payments {
+        amount
+        created_at
+        date
+        exportedat
+        id
+        jobid
+        memo
+        payer
+        paymentnum
+        transactionid
+        type
+      }
+      plate_no
+      plate_st
+      po_number
+      policy_no
+      production_vars
+      rate_ats
      rate_la1
      rate_la2
      rate_la3
@@ -661,121 +778,64 @@ export const GET_JOB_BY_PK = gql`
      rate_mapa
      rate_mash
      rate_matd
-      actual_in
-      federal_tax_rate
-      local_tax_rate
-      state_tax_rate
+      regie_number
+      referral_source
+      referral_source_extra
+      remove_from_ar
+      ro_number
      scheduled_completion
-      scheduled_in
-      actual_completion
      scheduled_delivery
-      actual_delivery
-      date_estimated
-      date_open
-      date_scheduled
-      date_invoiced
-      date_last_contacted
-      date_lost_sale
-      date_next_contact
-      date_towin
-      date_rentalresp
-      date_exported
-      date_repairstarted
-      date_void
+      scheduled_in
+      selling_dealer
+      servicing_dealer
+      selling_dealer_contact
+      servicing_dealer_contact
+      special_coverage_policy
+      state_tax_rate
      status
-      owner_owing
-      tax_registration_number
-      class
-      category
-      deliverchecklist
-      voided
-      ca_bc_pvrt
-      ca_customer_gst
+      storage_payable
      suspended
-      joblines(where: { removed: { _eq: false } }, order_by: { line_no: asc }) {
+      tax_lbr_rt
+      tax_levies_rt
+      tax_paint_mat_rt
+      tax_registration_number
+      tax_shop_mat_rt
+      tax_str_rt
+      tax_sub_rt
+      tax_tow_rt
+      towin
+      towing_payable
+      unit_number
+      updated_at
+      v_vin
+      v_model_yr
+      v_model_desc
+      v_make_desc
+      v_color
+      vehicleid
+      vehicle {
        id
-        alt_partm
-        line_no
-        unq_seq
-        line_ind
-        line_desc
-        line_ref
-        part_type
-        oem_partno
-        alt_partno
-        db_price
-        act_price
-        part_qty
-        mod_lbr_ty
-        db_hrs
-        mod_lb_hrs
-        lbr_op
-        lbr_amt
-        op_code_desc
-        status
+        jobs {
+          clm_no
+          id
+          ro_number
+          status
+        }
        notes
-        location
-        tax_part
-        db_ref
-        manual_line
-        prt_dsmk_p
-        prt_dsmk_m
-        ioucreated
-        convertedtolbr
-        ah_detail_line
-        critical
-        billlines(limit: 1, order_by: { bill: { date: desc } }) {
-          id
-          quantity
-          actual_cost
-          actual_price
-          joblineid
-          bill {
-            id
-            invoice_number
-            vendor {
-              id
-              name
-            }
-          }
-        }
-      }
-      payments {
-        id
-        jobid
-        amount
-        payer
-        paymentnum
-        created_at
-        transactionid
-        memo
-        date
-        type
-        exportedat
-      }
-      cccontracts {
-        id
-        status
-        start
-        scheduledreturn
-        agreementnumber
-        courtesycar {
-          id
-          make
-          model
-          year
-          plate
-          fleetnumber
-        }
-      }
-      cieca_ttl
-      csiinvites {
-        id
-        completedon
+        plate_no
+        plate_st
+        v_color
+        v_make_desc
+        v_model_desc
+        v_model_yr
+        v_paint_codes
+        v_vin
      }
+      voided
    }
  }
 `;
+
 export const GET_JOB_RECONCILIATION_BY_PK = gql`
  query GET_JOB_RECONCILIATION_BY_PK($id: uuid!) {
    bills(where: { jobid: { _eq: $id } }) {
@@ -840,6 +900,7 @@ export const GET_JOB_RECONCILIATION_BY_PK = gql`
    }
  }
 `;
+
 export const QUERY_JOB_CARD_DETAILS = gql`
  query QUERY_JOB_CARD_DETAILS($id: uuid!) {
    jobs_by_pk(id: $id) {
@@ -2160,3 +2221,120 @@ export const GET_JOB_LINE_ORDERS = gql`
    }
  }
 `;
+
+export const UPDATE_REMOVE_FROM_AR = gql`
+  mutation UPDATE_REMOVE_FROM_AR($jobId: uuid!, $remove_from_ar: Boolean!) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: { remove_from_ar: $remove_from_ar }
+    ) {
+      id
+      remove_from_ar
+    }
+  }
+`;
+
+export const UNVOID_JOB = gql`
+  mutation UNVOID_JOB(
+    $jobId: uuid!
+    $default_imported: String!
+    $currentUserEmail: String!
+    $text: String!
+  ) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: { voided: false, status: $default_imported, date_void: null }
+    ) {
+      id
+      date_void
+      voided
+      status
+    }
+    insert_notes(
+      objects: {
+        jobid: $jobId
+        audit: true
+        created_by: $currentUserEmail
+        text: $text
+      }
+    ) {
+      returning {
+        id
+      }
+    }
+  }
+`;
+
+export const DELETE_INTAKE_CHECKLIST = gql`
+  mutation DELETE_INTAKE($jobId: uuid!) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: { intakechecklist: null }
+    ) {
+      id
+      intakechecklist
+    }
+  }
+`;
+
+export const DELETE_DELIVERY_CHECKLIST = gql`
+  mutation DELETE_DELIVERY($jobId: uuid!) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: { deliverchecklist: null }
+    ) {
+      id
+      deliverchecklist
+    }
+  }
+`;
+
+export const MARK_JOB_FOR_REEXPORT = gql`
+  mutation MARK_JOB_FOR_REEXPORT($jobId: uuid!, $default_invoiced: String!) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: { date_exported: null, status: $default_invoiced }
+    ) {
+      id
+      date_exported
+      status
+      date_invoiced
+    }
+  }
+`;
+
+export const MARK_JOB_AS_EXPORTED = gql`
+  mutation MARK_JOB_AS_EXPORTED(
+    $jobId: uuid!
+    $date_exported: timestamptz!
+    $default_exported: String!
+  ) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: { date_exported: $date_exported, status: $default_exported }
+    ) {
+      id
+      date_exported
+      date_invoiced
+      status
+    }
+  }
+`;
+
+export const MARK_JOB_AS_UNINVOICED = gql`
+  mutation MARK_JOB_AS_UNINVOICED($jobId: uuid!, $default_delivered: String!) {
+    update_jobs_by_pk(
+      pk_columns: { id: $jobId }
+      _set: {
+        date_exported: null
+        date_invoiced: null
+        status: $default_delivered
+      }
+    ) {
+      id
+      date_exported
+      date_invoiced
+      status
+    }
+  }
+`;
--- a/client/src/graphql/timetickets.queries.js
+++ b/client/src/graphql/timetickets.queries.js
@@ -143,9 +143,14 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
    $end: date!
    $fixedStart: date!
    $fixedEnd: date!
+    $jobStart: timestamptz!
+    $jobEnd: timestamptz!
  ) {
    timetickets(
-      where: { date: { _gte: $start, _lte: $end }, cost_center: {_neq: "timetickets.labels.shift"} }
+      where: {
+        date: { _gte: $start, _lte: $end }
+        cost_center: { _neq: "timetickets.labels.shift" }
+      }
      order_by: { date: desc_nulls_first }
    ) {
      actualhrs
@@ -176,7 +181,10 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
      }
    }
    fixedperiod: timetickets(
-      where: { date: { _gte: $fixedStart, _lte: $fixedEnd }, cost_center: {_neq: "timetickets.labels.shift"} }
+      where: {
+        date: { _gte: $fixedStart, _lte: $fixedEnd }
+        cost_center: { _neq: "timetickets.labels.shift" }
+      }
      order_by: { date: desc_nulls_first }
    ) {
      actualhrs
@@ -205,6 +213,25 @@ export const QUERY_TIME_TICKETS_IN_RANGE_SB = gql`
        last_name
      }
    }
+    jobs(
+      where: {
+        date_invoiced: { _is_null: true }
+        ro_number: { _is_null: false }
+        voided: { _eq: false }
+        _or: [
+          { actual_completion: { _gte: $jobStart, _lte: $jobEnd } }
+          { actual_delivery: { _gte: $jobStart, _lte: $jobEnd } }
+        ]
+      }
+    ) {
+      id
+      joblines(order_by: { line_no: asc }, where: { removed: { _eq: false } }) {
+        convertedtolbr
+        convertedtolbr_data
+        mod_lb_hrs
+        mod_lbr_ty
+      }
+    }
  }
 `;

--- a/client/src/index.js
+++ b/client/src/index.js
@@ -14,38 +14,38 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
+
 //import { BrowserTracing } from "@sentry/tracing";

 // Dinero.defaultCurrency = "CAD";
 // Dinero.globalLocale = "en-CA";
 Dinero.globalRoundingMode = "HALF_EVEN";

-if (process.env.NODE_ENV !== "development") {
-  Sentry.init({
-    dsn: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
-    ignoreErrors: [
-      "ResizeObserver loop",
-      "Module specifier, 'fs' does not start",
-      "Module specifier, 'zlib' does not start with",
-    ],
-    integrations: [
-      // new BrowserTracing(),
-      // new Sentry.Integrations.Breadcrumbs({ console: true }),
-      //  new Sentry.Replay(),
-    ],
-    // This sets the sample rate to be 10%. You may want this to be 100% while
-    // in development and sample at a lower rate in production
-    // replaysSessionSampleRate: 0.1,
-    // // If the entire session is not sampled, use the below sample rate to sample
-    // // sessions when an error occurs.
-    // replaysOnErrorSampleRate: 1.0,
-    environment: process.env.NODE_ENV,
-    // tracesSampleRate: 0.2,
-    // We recommend adjusting this value in production, or using tracesSampler
-    // for finer control
-    //  tracesSampleRate: 0.5,
-  });
-}
+//if (process.env.NODE_ENV !== "development") {
+Sentry.init({
+  dsn: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
+  ignoreErrors: [
+    "ResizeObserver loop",
+    "Module specifier, 'fs' does not start",
+    "Module specifier, 'zlib' does not start with",
+  ],
+  integrations: [
+    Sentry.replayIntegration({
+      maskAllText: false,
+      blockAllMedia: true,
+    }),
+    new Sentry.BrowserTracing({}),
+  ],
+  tracePropagationTargets: [
+    "api.imex.online",
+    "api.test.imex.online",
+    "db.imex.online",
+  ],
+  tracesSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  environment: process.env.NODE_ENV,
+});
+//}

 ReactDOM.render(
  <Provider store={store}>
--- a/client/src/pages/bills/bills.page.component.jsx
+++ b/client/src/pages/bills/bills.page.component.jsx
@@ -14,6 +14,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import {pageLimit} from "../../utils/config";

 const mapDispatchToProps = (dispatch) => ({
  setPartsOrderContext: (context) =>
@@ -295,11 +296,11 @@ export function BillsListPage({
        pagination={
          search?.search
            ? {
-                pageSize: 25,
+                pageSize: pageLimit,
                showSizeChanger: false,
              }
            : {
-                pageSize: 25,
+                pageSize: pageLimit,
                current: parseInt(page || 1),
                total: total,
                showSizeChanger: false,
--- a/client/src/pages/bills/bills.page.container.jsx
+++ b/client/src/pages/bills/bills.page.container.jsx
@@ -13,6 +13,7 @@ import {
  setSelectedHeader,
 } from "../../redux/application/application.actions";
 import BillsPageComponent from "./bills.page.component";
+import {pageLimit} from "../../utils/config";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -38,8 +39,8 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
      variables: {
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
        order: [
          searchObj
            ? JSON.parse(searchObj)
--- a/client/src/pages/contracts/contracts.page.container.jsx
+++ b/client/src/pages/contracts/contracts.page.container.jsx
@@ -12,6 +12,7 @@ import {
  setSelectedHeader,
 } from "../../redux/application/application.actions";
 import ContractsPageComponent from "./contracts.page.component";
+import {pageLimit} from "../../utils/config";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -29,8 +30,8 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
      nextFetchPolicy: "network-only",
      variables: {
        search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
        order: [
          {
            [sortcolumn || "start"]: sortorder
--- 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
@@ -1,11 +1,14 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, notification } from "antd";
 import moment from "moment";
+import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import NotFound from "../../components/not-found/not-found.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
 import {
@@ -13,12 +16,10 @@ import {
  setBreadcrumbs,
  setSelectedHeader,
 } from "../../redux/application/application.actions";
+import { pageLimit } from "../../utils/config";
 import { CreateRecentItem } from "../../utils/create-recent-item";
+import UndefinedToNull from "./../../utils/undefinedtonull";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
-import NotFound from "../../components/not-found/not-found.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import queryString from "query-string";
-import { useLocation } from "react-router-dom";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -41,8 +42,8 @@ export function CourtesyCarDetailPageContainer({
  const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
    variables: {
      id: ccId,
-      offset: page ? (page - 1) * 25 : 0,
-      limit: 25,
+      offset: page ? (page - 1) * pageLimit : 0,
+      limit: pageLimit,
      order: [
        {
          [sortcolumn || "start"]: sortorder
@@ -111,7 +112,10 @@ export function CourtesyCarDetailPageContainer({
    setSaveLoading(true);

    const result = await updateCourtesyCar({
-      variables: { cc: { ...values }, ccId: ccId },
+      variables: {
+        cc: { ...UndefinedToNull(values, ["readiness"]) },
+        ccId: ccId,
+      },
      refetchQueries: ["QUERY_CC_BY_PK"],
      awaitRefetchQueries: true,
    });
--- a/client/src/pages/csi/csi.container.page.jsx
+++ b/client/src/pages/csi/csi.container.page.jsx
@@ -1,88 +1,67 @@
-import { useQuery, useMutation } from "@apollo/client";
-import { Form, Layout, Typography, Button, Result } from "antd";
-import React, { useState } from "react";
+// import { useMutation, useQuery } from "@apollo/client";
+import { Button, Form, Layout, Result, Typography } from "antd";
+import axios from "axios";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import ConfigFormComponents from "../../components/config-form-components/config-form-components.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import { QUERY_SURVEY, COMPLETE_SURVEY } from "../../graphql/csi.queries";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { DateTimeFormat } from "./../../utils/DateFormatter";

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

 export function CsiContainerPage({ currentUser }) {
  const { surveyId } = useParams();
  const [form] = Form.useForm();
+  const [axiosResponse, setAxiosResponse] = useState(null);
  const [submitting, setSubmitting] = useState({
    loading: false,
    submitted: false,
  });
-
-  const { loading, error, data } = useQuery(QUERY_SURVEY, {
-    variables: { surveyId },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
-
  const { t } = useTranslation();
-  const [completeSurvey] = useMutation(COMPLETE_SURVEY);
-  if (loading) return <LoadingSpinner />;

-  if (error || !!!data.csi_by_pk)
-    return (
-      <div>
-        <Result
-          status="error"
-          title={t("csi.errors.notfoundtitle")}
-          subTitle={t("csi.errors.notfoundsubtitle")}
-        >
-          {error ? (
-            <div>ERROR: {error.graphQLErrors.map((e) => e.message)}</div>
-          ) : null}
-        </Result>
-      </div>
-    );
-
-  const handleFinish = async (values) => {
-    setSubmitting({ ...submitting, loading: true });
-
-    const result = await completeSurvey({
-      variables: {
-        surveyId,
-        survey: {
-          response: values,
-          valid: false,
-          completedon: new Date(),
-        },
-      },
-    });
-
-    if (!!!result.errors) {
-      setSubmitting({ ...submitting, loading: false, submitted: true });
-    } else {
-      setSubmitting({
-        ...submitting,
+  const getAxiosData = useCallback(async () => {
+    try {
+      try {
+        window.$crisp.push(["do", "chat:hide"]);
+      } catch {
+        console.log("Unable to attach to crisp instance. ");
+      }
+      setSubmitting((prevSubmitting) => ({ ...prevSubmitting, loading: true }));
+      const response = await axios.post("/csi/lookup", { surveyId });
+      setSubmitting((prevSubmitting) => ({
+        ...prevSubmitting,
        loading: false,
-        error: JSON.stringify(result.errors),
+      }));
+      setAxiosResponse(response.data);
+    } catch (error) {
+      console.error(`Something went wrong...: ${error.message}`);
+      console.dir({
+        stack: error?.stack,
+        message: error?.message,
      });
    }
-  };
+  }, [setAxiosResponse, surveyId]);

-  const {
-    relateddata: { bodyshop, job },
-    csiquestion: { config: csiquestions },
-  } = data.csi_by_pk;
+  useEffect(() => {
+    getAxiosData().catch((err) =>
+      console.error(
+        `Something went wrong fetching axios data: ${err.message || ""}`
+      )
+    );
+  }, [getAxiosData]);

-  if (currentUser && currentUser.authorized)
+  // Return if authorized
+  if (currentUser && currentUser.authorized) {
    return (
      <Layout
        style={{ height: "100vh", display: "flex", flexDirection: "column" }}
@@ -94,85 +73,176 @@ export function CsiContainerPage({ currentUser }) {
        />
      </Layout>
    );
+  }

-  return (
-    <Layout
-      style={{ height: "100vh", display: "flex", flexDirection: "column" }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", margin: "2em" }}>
-          {bodyshop.logo_img_path && bodyshop.logo_img_path.src ? (
-            <img src={bodyshop.logo_img_path.src} alt="Logo" />
-          ) : null}
-          <div style={{ margin: "2em" }}>
-            <strong>{bodyshop.shopname || ""}</strong>
-            <div>{`${bodyshop.address1 || ""}`}</div>
-            <div>{`${bodyshop.address2 || ""}`}</div>
-            <div>{`${bodyshop.city || ""} ${bodyshop.state || ""} ${
-              bodyshop.zip_post || ""
-            }`}</div>
+  if (submitting.loading) return <LoadingSpinner />;
+
+  const handleFinish = async (values) => {
+    try {
+      setSubmitting({ ...submitting, loading: true, submitting: true });
+      const result = await axios.post("/csi/submit", { surveyId, values });
+      console.log("result", result);
+      if (!!!result.errors && result.data.update_csi.affected_rows > 0) {
+        setSubmitting({ ...submitting, loading: false, submitted: true });
+      }
+    } catch (error) {
+      console.error(`Something went wrong...: ${error.message}`);
+      console.dir({
+        stack: error?.stack,
+        message: error?.message,
+      });
+    }
+  };
+
+  if (!axiosResponse || axiosResponse.csi_by_pk === null) {
+    // Do something here , this is where you would return a loading box or something
+    return (
+      <>
+        <Layout style={{ display: "flex", flexDirection: "column" }}>
+          <Layout.Content
+            style={{
+              backgroundColor: "#fff",
+              margin: "2em 4em",
+              padding: "2em",
+              overflowY: "auto",
+              textAlign: "center",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Form>
+              <Result
+                status="error"
+                title={t("csi.errors.notfoundtitle")}
+                subTitle={t("csi.errors.notfoundsubtitle")}
+              />
+            </Form>
+          </Layout.Content>
+          <Layout.Footer>
+            {t("csi.labels.copyright")}{" "}
+            {t("csi.fields.surveyid", { surveyId: surveyId })}
+          </Layout.Footer>
+        </Layout>
+      </>
+    );
+  } else {
+    const {
+      relateddata: { bodyshop, job },
+      csiquestion: { config: csiquestions },
+    } = axiosResponse.csi_by_pk;
+
+    return (
+      <Layout style={{ display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", margin: "2em" }}>
+            {bodyshop.logo_img_path && bodyshop.logo_img_path.src ? (
+              <img
+                src={bodyshop.logo_img_path.src}
+                alt={bodyshop.shopname.concat(" Logo")}
+                height={bodyshop.logo_img_path.height}
+                width={bodyshop.logo_img_path.width}
+              />
+            ) : null}
+            <div style={{ margin: "2em", verticalAlign: "middle" }}>
+              <Typography.Title level={4} style={{ margin: 0 }}>
+                {bodyshop.shopname || ""}
+              </Typography.Title>
+              <Typography.Paragraph style={{ margin: 0 }}>
+                {`${bodyshop.address1 || ""}${bodyshop.address2 ? ", " : ""}${
+                  bodyshop.address2 || ""
+                }`.trim()}
+              </Typography.Paragraph>
+              <Typography.Paragraph style={{ margin: 0 }}>
+                {`${bodyshop.city || ""}${
+                  bodyshop.city && bodyshop.state ? ", " : ""
+                }${bodyshop.state || ""} ${bodyshop.zip_post || ""}`.trim()}
+              </Typography.Paragraph>
+            </div>
          </div>
+          <Typography.Title>{t("csi.labels.title")}</Typography.Title>
+          <strong>
+            {t("csi.labels.greeting", {
+              name: job.ownr_co_nm || job.ownr_fn || "",
+            })}
+          </strong>
+          <Typography.Paragraph>
+            {t("csi.labels.intro", { shopname: bodyshop.shopname || "" })}
+          </Typography.Paragraph>
        </div>
-        <Typography.Title>{t("csi.labels.title")}</Typography.Title>
-        <strong>{`Hi ${job.ownr_co_nm || job.ownr_fn || ""}!`}</strong>
-        <Typography.Paragraph>
-          {`At ${
-            bodyshop.shopname || ""
-          }, we value your feedback. We would love to
-          hear what you have to say. Please fill out the form below.`}
-        </Typography.Paragraph>
-      </div>

-      {submitting.error ? (
-        <AlertComponent message={submitting.error} type="error" />
-      ) : null}
+        {submitting.error ? (
+          <AlertComponent message={submitting.error} type="error" />
+        ) : null}

-      {submitting.submitted ? (
-        <Layout.Content
-          style={{
-            backgroundColor: "#fff",
-            margin: "2em 4em",
-            padding: "2em",
-            overflowY: "auto",
-          }}
-        >
-          <Result
-            status="success"
-            title={t("csi.successes.submitted")}
-            subTitle={t("csi.successes.submittedsub")}
-          />
-        </Layout.Content>
-      ) : (
-        <Layout.Content
-          style={{
-            backgroundColor: "#fff",
-            margin: "2em 4em",
-            padding: "2em",
-            overflowY: "auto",
-          }}
-        >
-          <Form form={form} onFinish={handleFinish}>
-            <ConfigFormComponents componentList={csiquestions} />
-            <Button
-              loading={submitting.loading}
-              type="primary"
-              htmlType="submit"
-            >
-              {t("general.actions.submit")}
-            </Button>
-          </Form>
-        </Layout.Content>
-      )}
-
-      <Layout.Footer>
-        {`Copyright ImEX.Online. Survey ID: ${surveyId}`}
-      </Layout.Footer>
-    </Layout>
-  );
+        {submitting.submitted ? (
+          <Layout.Content
+            style={{
+              backgroundColor: "#fff",
+              margin: "2em 4em",
+              padding: "2em",
+              overflowY: "auto",
+            }}
+          >
+            <Result
+              status="success"
+              title={t("csi.successes.submitted")}
+              subTitle={t("csi.successes.submittedsub")}
+            />
+          </Layout.Content>
+        ) : (
+          <Layout.Content
+            style={{
+              backgroundColor: "#fff",
+              margin: "2em 4em",
+              padding: "2em",
+              overflowY: "auto",
+            }}
+          >
+            <Form form={form} onFinish={handleFinish}>
+              {axiosResponse.csi_by_pk.valid ? (
+                <>
+                  <ConfigFormComponents componentList={csiquestions} />
+                  <Button
+                    loading={submitting.loading}
+                    type="primary"
+                    htmlType="submit"
+                    style={{ float: "right" }}
+                  >
+                    {t("general.actions.submit")}
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Result
+                    title={t("csi.errors.surveycompletetitle")}
+                    status="warning"
+                    subTitle={t("csi.errors.surveycompletesubtitle", {
+                      date: DateTimeFormat(axiosResponse.csi_by_pk.completedon),
+                    })}
+                  />
+                  <Typography.Paragraph
+                    type="secondary"
+                    style={{ textAlign: "center" }}
+                  >
+                    {t("csi.successes.submittedsub")}
+                  </Typography.Paragraph>
+                </>
+              )}
+            </Form>
+          </Layout.Content>
+        )}
+        <Layout.Footer>
+          {t("csi.labels.copyright")}{" "}
+          {t("csi.fields.surveyid", { surveyId: surveyId })}
+        </Layout.Footer>
+      </Layout>
+    );
+  }
 }
--- a/client/src/pages/export-logs/export-logs.page.component.jsx
+++ b/client/src/pages/export-logs/export-logs.page.component.jsx
@@ -12,6 +12,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_EXPORT_LOG_PAGINATED } from "../../graphql/accounting.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import {pageLimit} from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -29,8 +30,8 @@ export function ExportLogsPageComponent({ bodyshop }) {
      nextFetchPolicy: "network-only",
      variables: {
        search: search || "",
-        offset: page ? (page - 1) * 25 : 0,
-        limit: 25,
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
        order: [
          {
            [sortcolumn || "created_at"]: sortorder
@@ -178,7 +179,7 @@ export function ExportLogsPageComponent({ bodyshop }) {
        loading={loading}
        pagination={{
          position: "top",
-          pageSize: 25,
+          pageSize: pageLimit,
          current: parseInt(page || 1),
          total: data && data.search_exportlog_aggregate.aggregate.count,
        }}
--- a/Show More
+++ b/Show More