IO-3349 Chart Enqueue and Label Required

Signed-off-by: Allan Carr <allan@imexsystems.ca>
Merged in hotfix/background-colors-dark-mode (pull request #2485 )
2025-08-22 11:29:33 -07:00 · 2025-08-18 18:39:42 +00:00 · 2025-08-18 14:37:00 -04:00 · 2025-08-18 14:13:16 -04:00 · 2025-08-16 01:13:04 +00:00 · 2025-08-14 18:59:34 +00:00
151 changed files with 12437 additions and 8191 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -130,3 +130,5 @@ test-output.txt
 server/job/test/fixtures

 .github
+_reference/ragmate/.ragmate.env
+docker_data
--- a/.platform/nginx/conf.d/proxy.conf
+++ b/.platform/nginx/conf.d/proxy.conf
@@ -1,2 +1,2 @@
 client_max_body_size 50M;
-client_body_buffer_size 5M;
+client_body_buffer_size 5M;
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,8 +20,8 @@
        "@firebase/messaging": "^0.12.21",
        "@jsreport/browser-client": "^3.1.0",
        "@reduxjs/toolkit": "^2.8.2",
-        "@sentry/cli": "^2.46.0",
-        "@sentry/react": "^9.27.0",
+        "@sentry/cli": "^2.47.1",
+        "@sentry/react": "^9.38.0",
        "@sentry/vite-plugin": "^3.5.0",
        "@splitsoftware/splitio-react": "^2.3.1",
        "@tanem/react-nprogress": "^5.0.53",
@@ -42,7 +42,7 @@
        "i18next": "^24.2.3",
        "i18next-browser-languagedetector": "^8.1.0",
        "immutability-helper": "^3.1.1",
-        "libphonenumber-js": "^1.12.9",
+        "libphonenumber-js": "^1.12.10",
        "logrocket": "^9.0.2",
        "markerjs2": "^2.32.4",
        "memoize-one": "^6.0.0",
@@ -91,11 +91,11 @@
        "@ant-design/icons": "^6.0.0",
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@babel/preset-react": "^7.27.1",
-        "@dotenvx/dotenvx": "^1.44.1",
+        "@dotenvx/dotenvx": "^1.47.5",
        "@emotion/babel-plugin": "^11.13.5",
        "@emotion/react": "^11.14.0",
-        "@eslint/js": "^9.28.0",
-        "@playwright/test": "^1.51.1",
+        "@eslint/js": "^9.31.0",
+        "@playwright/test": "^1.54.1",
        "@sentry/webpack-plugin": "^3.5.0",
        "@testing-library/dom": "^10.4.0",
        "@testing-library/jest-dom": "^6.6.3",
@@ -111,7 +111,7 @@
        "jsdom": "^26.0.0",
        "memfs": "^4.17.2",
        "os-browserify": "^0.3.0",
-        "playwright": "^1.51.1",
+        "playwright": "^1.54.1",
        "react-error-overlay": "^6.1.0",
        "redux-logger": "^3.0.6",
        "source-map-explorer": "^2.5.3",
@@ -2588,9 +2588,9 @@
      }
    },
    "node_modules/@dotenvx/dotenvx": {
-      "version": "1.44.1",
-      "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.44.1.tgz",
-      "integrity": "sha512-j1QImCqf/XJmhIjC1OPpgiZV9g370HG9MNT9s/CDwCKsoYzNCPEKK+GfsidahJx7yIlBbm+4dPLlGec+bKn7oA==",
+      "version": "1.47.5",
+      "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.47.5.tgz",
+      "integrity": "sha512-FtDgJyqOXmkj+BTU0qcE4Iq2HKjrEH6ZhRMc7m8fmOwstf1Ms9/9lbLNzyiNqyQrEnVr38W8PTTWMbDB3IX5og==",
      "dev": true,
      "license": "BSD-3-Clause",
      "dependencies": {
@@ -2605,8 +2605,7 @@
        "which": "^4.0.0"
      },
      "bin": {
-        "dotenvx": "src/cli/dotenvx.js",
-        "git-dotenvx": "src/cli/dotenvx.js"
+        "dotenvx": "src/cli/dotenvx.js"
      },
      "funding": {
        "url": "https://dotenvx.com"
@@ -2913,9 +2912,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.28.0.tgz",
-      "integrity": "sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==",
+      "version": "9.31.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz",
+      "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -3519,13 +3518,13 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
-      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.1.tgz",
+      "integrity": "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.52.0"
+        "playwright": "1.54.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -4469,50 +4468,50 @@
      "license": "MIT"
    },
    "node_modules/@sentry-internal/browser-utils": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.27.0.tgz",
-      "integrity": "sha512-SJa7f6Ct1BzP8rWEomnshSGN1CmT+axNKvT+StrbFPD6AyHnYfFLJpKgc2iToIJHB/pmeuOI9dUwqtzVx+5nSw==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-9.38.0.tgz",
+      "integrity": "sha512-BkTaMPm4pjgoT1qNsLX5e3HjTCwBmsR/OGyKHFpMUnN+HINi9L1nGGbRroOEtfU49vMKi8MlM7HpuzzYV/3D1A==",
      "license": "MIT",
      "dependencies": {
-        "@sentry/core": "9.27.0"
+        "@sentry/core": "9.38.0"
      },
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/@sentry-internal/feedback": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.27.0.tgz",
-      "integrity": "sha512-e7L8eG0y63RulN352lmafoCCfQGg4jLVT8YLx6096eWu/YKLkgmVpgi8livsT5WREnH+HB+iFSrejOwK7cRkhw==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-9.38.0.tgz",
+      "integrity": "sha512-vDVufE9WLqHCmUL2sa3nIKz5ARaBdaqCG+b9/hwkmkLnqaQUBiHE+ArxoYuc2toWqaELxSHcMDp2ajkeDBQeLA==",
      "license": "MIT",
      "dependencies": {
-        "@sentry/core": "9.27.0"
+        "@sentry/core": "9.38.0"
      },
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/@sentry-internal/replay": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.27.0.tgz",
-      "integrity": "sha512-n2kO1wOfCG7GxkMAqbYYkpgTqJM5tuVLdp0JuNCqTOLTXWvw6svWGaYKlYpKUgsK9X/GDzJYSXZmfe+Dbg+FJQ==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-9.38.0.tgz",
+      "integrity": "sha512-LLZuQk5Khvco+EYKg2+woiSNMLyR4XZeoAdgvAa+HZriFoAQR6GFNAuu+TlynCDDt2H+w90HcIAV66NWFy8QoQ==",
      "license": "MIT",
      "dependencies": {
-        "@sentry-internal/browser-utils": "9.27.0",
-        "@sentry/core": "9.27.0"
+        "@sentry-internal/browser-utils": "9.38.0",
+        "@sentry/core": "9.38.0"
      },
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/@sentry-internal/replay-canvas": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.27.0.tgz",
-      "integrity": "sha512-44rVSt3LCH6qePYRQrl4WUBwnkOk9dzinmnKmuwRksEdDOkVq5KBRhi/IDr7omwSpX8C+KrX5alfKhOx1cP0gQ==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-9.38.0.tgz",
+      "integrity": "sha512-87BZDTjszdaSB5p0CTiVav2QgxLMAab/6q1jcIUBzNsrXHZbqcoMaJmd446mCsQkR6wAccM/uAxJlgh9FIqA8w==",
      "license": "MIT",
      "dependencies": {
-        "@sentry-internal/replay": "9.27.0",
-        "@sentry/core": "9.27.0"
+        "@sentry-internal/replay": "9.38.0",
+        "@sentry/core": "9.38.0"
      },
      "engines": {
        "node": ">=18"
@@ -4528,16 +4527,16 @@
      }
    },
    "node_modules/@sentry/browser": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.27.0.tgz",
-      "integrity": "sha512-geR3lhRJOmUQqi1WgovLSYcD/f66zYnctdnDEa7j1BW2XIB1nlTJn0mpYyAHghXKkUN/pBpp1Z+Jk0XlVwFYVg==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-9.38.0.tgz",
+      "integrity": "sha512-ZUIeU+3VUD3BntYgB2DkhBD6N9oybsuk1+U7yK1ezHIw/nvkPILcH6MZgPs0Km0RcWWozMUDSbdZNud9/isYmw==",
      "license": "MIT",
      "dependencies": {
-        "@sentry-internal/browser-utils": "9.27.0",
-        "@sentry-internal/feedback": "9.27.0",
-        "@sentry-internal/replay": "9.27.0",
-        "@sentry-internal/replay-canvas": "9.27.0",
-        "@sentry/core": "9.27.0"
+        "@sentry-internal/browser-utils": "9.38.0",
+        "@sentry-internal/feedback": "9.38.0",
+        "@sentry-internal/replay": "9.38.0",
+        "@sentry-internal/replay-canvas": "9.38.0",
+        "@sentry/core": "9.38.0"
      },
      "engines": {
        "node": ">=18"
@@ -4728,9 +4727,9 @@
      }
    },
    "node_modules/@sentry/cli": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.46.0.tgz",
-      "integrity": "sha512-nqoPl7UCr446QFkylrsRrUXF51x8Z9dGquyf4jaQU+OzbOJMqclnYEvU6iwbwvaw3tu/2DnoZE/Og+Nq1h63sA==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.47.1.tgz",
+      "integrity": "sha512-t45lfyyMYs6L1oFUmtYuLDJFf0o6a0IGbPJvzOZcP3lmidouEG5nloBF6FG39AkL29pwrS2WN41j2gyDjrQ71g==",
      "hasInstallScript": true,
      "license": "BSD-3-Clause",
      "dependencies": {
@@ -4747,20 +4746,20 @@
        "node": ">= 10"
      },
      "optionalDependencies": {
-        "@sentry/cli-darwin": "2.46.0",
-        "@sentry/cli-linux-arm": "2.46.0",
-        "@sentry/cli-linux-arm64": "2.46.0",
-        "@sentry/cli-linux-i686": "2.46.0",
-        "@sentry/cli-linux-x64": "2.46.0",
-        "@sentry/cli-win32-arm64": "2.46.0",
-        "@sentry/cli-win32-i686": "2.46.0",
-        "@sentry/cli-win32-x64": "2.46.0"
+        "@sentry/cli-darwin": "2.47.1",
+        "@sentry/cli-linux-arm": "2.47.1",
+        "@sentry/cli-linux-arm64": "2.47.1",
+        "@sentry/cli-linux-i686": "2.47.1",
+        "@sentry/cli-linux-x64": "2.47.1",
+        "@sentry/cli-win32-arm64": "2.47.1",
+        "@sentry/cli-win32-i686": "2.47.1",
+        "@sentry/cli-win32-x64": "2.47.1"
      }
    },
    "node_modules/@sentry/cli-darwin": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.46.0.tgz",
-      "integrity": "sha512-5Ll+e5KAdIk9OYiZO8aifMBRNWmNyPjSqdjaHlBC1Qfh7pE3b1zyzoHlsUazG0bv0sNrSGea8e7kF5wIO1hvyg==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.47.1.tgz",
+      "integrity": "sha512-Vq+8Hs1AR5MFYCI8vkz+rdRJmcNgUf8b8dW8aSLYCHy7wS/X61OB00LupLaaaoN5c/xemb0rZCg4M0ftUqB5Kw==",
      "license": "BSD-3-Clause",
      "optional": true,
      "os": [
@@ -4771,9 +4770,9 @@
      }
    },
    "node_modules/@sentry/cli-linux-arm": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.46.0.tgz",
-      "integrity": "sha512-WRrLNq/TEX/TNJkGqq6Ad0tGyapd5dwlxtsPbVBrIdryuL1mA7VCBoaHBr3kcwJLsgBHFH0lmkMee2ubNZZdkg==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.47.1.tgz",
+      "integrity": "sha512-Wkcvr0LYP1XMSoaczQnUtOSZPfyBzdGk7wQyloYWyMv9oZWJYkt1wYI0/FaNM+MIX15RqEAx0nI5CjotLMlj8w==",
      "cpu": [
        "arm"
      ],
@@ -4789,9 +4788,9 @@
      }
    },
    "node_modules/@sentry/cli-linux-arm64": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.46.0.tgz",
-      "integrity": "sha512-OEJN8yAjI9y5B4telyqzu27Hi3+S4T8VxZCqJz1+z2Mp0Q/MZ622AahVPpcrVq/5bxrnlZR16+lKh8L1QwNFPg==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.47.1.tgz",
+      "integrity": "sha512-Kuda8/BFMVyqYayQjP0NQnxnAz5Xpfo2crG1/RRXF9lYQ9O/5YRb3dvlMPX6WasplCzajaSuLrYt/LXcs4McwA==",
      "cpu": [
        "arm64"
      ],
@@ -4807,9 +4806,9 @@
      }
    },
    "node_modules/@sentry/cli-linux-i686": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.46.0.tgz",
-      "integrity": "sha512-xko3/BVa4LX8EmRxVOCipV+PwfcK5Xs8lP6lgF+7NeuAHMNL4DqF6iV9rrN8gkGUHCUI9RXSve37uuZnFy55+Q==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.47.1.tgz",
+      "integrity": "sha512-WB3FbRjeJmKHhGc5CftaFFJfFc7c+Mu/XKwbI8Es/9f65bVWdB6BA2tH7aHyoAQngA++1ZVXUJwUpxYPNxQEag==",
      "cpu": [
        "x86",
        "ia32"
@@ -4826,9 +4825,9 @@
      }
    },
    "node_modules/@sentry/cli-linux-x64": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.46.0.tgz",
-      "integrity": "sha512-hJ1g5UEboYcOuRia96LxjJ0jhnmk8EWLDvlGnXLnYHkwy3ree/L7sNgdp/QsY8Z4j2PGO5f22Va+UDhSjhzlfQ==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.47.1.tgz",
+      "integrity": "sha512-C+3GJLDpZQMO45toUKiF4bPZpxQiU5/10LtZg2vhpUyyzFGNseVQO/Bsnu9hG/LVjYGLkTgEaorl1liRQsfKVg==",
      "cpu": [
        "x64"
      ],
@@ -4844,9 +4843,9 @@
      }
    },
    "node_modules/@sentry/cli-win32-arm64": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.46.0.tgz",
-      "integrity": "sha512-mN7cpPoCv2VExFRGHt+IoK11yx4pM4ADZQGEso5BAUZ5duViXB2WrAXCLd8DrwMnP0OE978a7N8OtzsFqjkbNA==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.47.1.tgz",
+      "integrity": "sha512-K3yb1yLvA6Lh0UaXjsU6lP/2uOMkZ47cVq0dFxL/hEr4fBHRkXuvg3oOJNDkJ2xXt2W2s7AIa83T2EisZ0a/NQ==",
      "cpu": [
        "arm64"
      ],
@@ -4860,9 +4859,9 @@
      }
    },
    "node_modules/@sentry/cli-win32-i686": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.46.0.tgz",
-      "integrity": "sha512-6F73AUE3lm71BISUO19OmlnkFD5WVe4/wA1YivtLZTc1RU3eUYJLYxhDfaH3P77+ycDppQ2yCgemLRaA4A8mNQ==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.47.1.tgz",
+      "integrity": "sha512-wk+6IIT+VT28c9uPe9PDzxdh+OiTEDb/0PIdFv1khSfAmEuVSNWzuDWsra7MnA7OPfgzzNDPkP4HRW1CKb3Xiw==",
      "cpu": [
        "x86",
        "ia32"
@@ -4877,9 +4876,9 @@
      }
    },
    "node_modules/@sentry/cli-win32-x64": {
-      "version": "2.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.46.0.tgz",
-      "integrity": "sha512-yuGVcfepnNL84LGA0GjHzdMIcOzMe0bjPhq/rwPsPN+zu11N+nPR2wV2Bum4U0eQdqYH3iAlMdL5/BEQfuLJww==",
+      "version": "2.47.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.47.1.tgz",
+      "integrity": "sha512-blseDhuUJDsb+3Ku9dvR4b0JO4nunRokF/9jzW+qHqTha7UHE2kQYXkCfsoDg65juvJFeKeQASYV7VphEJgIGQ==",
      "cpu": [
        "x64"
      ],
@@ -4914,22 +4913,22 @@
      }
    },
    "node_modules/@sentry/core": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.27.0.tgz",
-      "integrity": "sha512-Zb2SSAdWXQjTem+sVWrrAq9L6YYfxyoTwtapaE6C6qZBR5C8Uak0wcYww8StaCFH7dDA/PSW+VxOwjNXocrQHQ==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-9.38.0.tgz",
+      "integrity": "sha512-dUwSv1VXDfsrcY69a/cgZNDsFal6iYOf0C4T+/ylpmgYp5SVe3vQK+2FLXUMuvgnOf+kHO6IeW0RhnhSyUflmA==",
      "license": "MIT",
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/@sentry/react": {
-      "version": "9.27.0",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-9.27.0.tgz",
-      "integrity": "sha512-UT7iaGEwTqe06O4mgHfKGTRBHg+U0JSI/id+QxrOji6ksosOsSnSC3Vdq+gPs9pzCCFE+6+DkH6foYNNLIN0lw==",
+      "version": "9.38.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-9.38.0.tgz",
+      "integrity": "sha512-MGnrzEJdwCEhGnQrFvljCGM+19agsC5ONAExRM+TuCVjeDJ/ifegZ4eEUyaGHt7YyjAUszddSbWbpEBUg2zBvQ==",
      "license": "MIT",
      "dependencies": {
-        "@sentry/browser": "9.27.0",
-        "@sentry/core": "9.27.0",
+        "@sentry/browser": "9.38.0",
+        "@sentry/core": "9.38.0",
        "hoist-non-react-statics": "^3.3.2"
      },
      "engines": {
@@ -11499,9 +11498,9 @@
      }
    },
    "node_modules/libphonenumber-js": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.9.tgz",
-      "integrity": "sha512-VWwAdNeJgN7jFOD+wN4qx83DTPMVPPAUyx9/TUkBXKLiNkuWWk6anV0439tgdtwaJDrEdqkvdN22iA6J4bUCZg==",
+      "version": "1.12.10",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.10.tgz",
+      "integrity": "sha512-E91vHJD61jekHHR/RF/E83T/CMoaLXT7cwYA75T4gim4FZjnM6hbJjVIGg7chqlSqRsSvQ3izGmOjHy1SQzcGQ==",
      "license": "MIT"
    },
    "node_modules/lines-and-columns": {
@@ -13340,13 +13339,13 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
-      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.1.tgz",
+      "integrity": "sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.52.0"
+        "playwright-core": "1.54.1"
      },
      "bin": {
        "playwright": "cli.js"
@@ -13359,9 +13358,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
-      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz",
+      "integrity": "sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==",
      "dev": true,
      "license": "Apache-2.0",
      "bin": {
--- a/client/package.json
+++ b/client/package.json
@@ -19,8 +19,8 @@
    "@firebase/messaging": "^0.12.21",
    "@jsreport/browser-client": "^3.1.0",
    "@reduxjs/toolkit": "^2.8.2",
-    "@sentry/cli": "^2.46.0",
-    "@sentry/react": "^9.27.0",
+    "@sentry/cli": "^2.47.1",
+    "@sentry/react": "^9.38.0",
    "@sentry/vite-plugin": "^3.5.0",
    "@splitsoftware/splitio-react": "^2.3.1",
    "@tanem/react-nprogress": "^5.0.53",
@@ -41,7 +41,7 @@
    "i18next": "^24.2.3",
    "i18next-browser-languagedetector": "^8.1.0",
    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.9",
+    "libphonenumber-js": "^1.12.10",
    "logrocket": "^9.0.2",
    "markerjs2": "^2.32.4",
    "memoize-one": "^6.0.0",
@@ -131,11 +131,11 @@
    "@ant-design/icons": "^6.0.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-react": "^7.27.1",
-    "@dotenvx/dotenvx": "^1.44.1",
+    "@dotenvx/dotenvx": "^1.47.5",
    "@emotion/babel-plugin": "^11.13.5",
    "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.28.0",
-    "@playwright/test": "^1.51.1",
+    "@eslint/js": "^9.31.0",
+    "@playwright/test": "^1.54.1",
    "@sentry/webpack-plugin": "^3.5.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
@@ -151,7 +151,7 @@
    "jsdom": "^26.0.0",
    "memfs": "^4.17.2",
    "os-browserify": "^0.3.0",
-    "playwright": "^1.51.1",
+    "playwright": "^1.54.1",
    "react-error-overlay": "^6.1.0",
    "redux-logger": "^3.0.6",
    "source-map-explorer": "^2.5.3",
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -1,16 +1,20 @@
 import { ApolloProvider } from "@apollo/client";
+import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
+import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
+import { connect, useSelector } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
 import client from "../utils/GraphQLClient";
 import App from "./App";
-import * as Sentry from "@sentry/react";
-import themeProvider from "./themeProvider";
-import { CookiesProvider } from "react-cookie";
+import getTheme from "./themeProvider";

 // Base Split configuration
 const config = {
@@ -24,19 +28,54 @@ const config = {
 function SplitClientProvider({ children }) {
  const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
  const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
-
  useEffect(() => {
    if (splitClient && imexshopid) {
-      // Log readiness for debugging; no need for ready() since isReady is available
      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
    }
  }, [splitClient, imexshopid]);
-
  return children;
 }

-function AppContainer() {
+const mapDispatchToProps = (dispatch) => ({
+  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode))
+});
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+function AppContainer({ currentUser, setDarkMode }) {
  const { t } = useTranslation();
+  const isDarkMode = useSelector(selectDarkMode);
+  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+
+  // Update data-theme attribute when dark mode changes
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+    return () => document.documentElement.removeAttribute("data-theme");
+  }, [isDarkMode]);
+
+  // Sync Redux darkMode with localStorage on user change
+  useEffect(() => {
+    if (currentUser?.uid) {
+      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
+      if (savedMode !== null) {
+        setDarkMode(JSON.parse(savedMode));
+      } else {
+        setDarkMode(false); // default to light mode
+      }
+    } else {
+      setDarkMode(false);
+    }
+    // eslint-disable-next-line
+  }, [currentUser?.uid]);
+
+  // Persist darkMode to localStorage when it or user changes
+  useEffect(() => {
+    if (currentUser?.uid) {
+      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
+    }
+  }, [isDarkMode, currentUser?.uid]);

  return (
    <CookiesProvider>
@@ -44,10 +83,9 @@ function AppContainer() {
        <ConfigProvider
          input={{ autoComplete: "new-password" }}
          locale={enLocale}
-          theme={themeProvider}
+          theme={theme}
          form={{
            validateMessages: {
-              // eslint-disable-next-line no-template-curly-in-string
              required: t("general.validation.required", { label: "${label}" })
            }
          }}
@@ -64,4 +102,4 @@ function AppContainer() {
  );
 }

-export default Sentry.withProfiler(AppContainer);
+export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));
--- a/client/src/App/App.styles.scss
+++ b/client/src/App/App.styles.scss
@@ -1,15 +1,226 @@
-//Global Styles.
+:root {
+  --table-stripe-bg: #f4f4f4; /* Light mode table stripe */
+  --menu-divider-color: #74695c; /* Light mode menu divider */
+  --menu-submenu-text: rgba(255, 255, 255, 0.65); /* Light mode submenu text */
+  --kanban-column-bg: #ddd; /* Light mode kanban column */
+  --alert-color: blue; /* Light mode alert */
+  --completion-soon-color: rgba(255, 140, 0, 0.8); /* Light mode completion soon */
+  --completion-past-color: rgba(255, 0, 0, 0.8); /* Light mode completion past */
+  --job-line-manual-color: tomato; /* Light mode job line manual */
+  --muted-button-color: lightgray; /* Light mode muted button */
+  --muted-button-hover-color: darkgrey; /* Light mode muted button hover */
+  --table-border-color: #ddd; /* Light mode table border */
+  --table-hover-bg: #f5f5f5; /* Light mode table hover */
+  --popover-bg: #fff; /* Light mode popover background */
+  --error-text: red; /* Light mode error message */
+  --no-jobs-text: #888; /* Light mode no jobs message */
+  --message-yours-bg: #eee; /* Light mode yours message background */
+  --message-mine-bg-start: #00d0ea; /* Light mode mine message gradient start */
+  --message-mine-bg-end: #0085d1; /* Light mode mine message gradient end */
+  --message-mine-text: white; /* Light mode mine message text */
+  --message-mine-tail-bg: white; /* Light mode mine/yours message tail */
+  --system-message-bg: #f5f5f5; /* Light mode system message background */
+  --system-message-text: #555; /* Light mode system message text */
+  --system-label-text: #888; /* Light mode system label/date text */
+  --message-icon-color: whitesmoke; /* Light mode message icon */
+  --eula-card-bg: lightgray; /* Light mode eula card background */
+  --notification-bg: #fff; /* Light mode notification background */
+  --notification-text: rgba(0, 0, 0, 0.85); /* Light mode notification text */
+  --notification-border: #d9d9d9; /* Light mode notification border */
+  --notification-header-bg: #fafafa; /* Light mode notification header background */
+  --notification-header-border: #f0f0f0; /* Light mode notification header border */
+  --notification-header-text: rgba(0, 0, 0, 0.85); /* Light mode notification header text */
+  --notification-toggle-icon: #1677ff; /* Light mode notification toggle icon */
+  --notification-switch-bg: #1677ff; /* Light mode notification switch background */
+  --notification-btn-link: #1677ff; /* Light mode notification link button */
+  --notification-btn-link-hover: #69b1ff; /* Light mode notification link button hover */
+  --notification-btn-link-disabled: rgba(0, 0, 0, 0.25); /* Light mode notification link button disabled */
+  --notification-btn-link-active: #0958d9; /* Light mode notification link button active */
+  --notification-read-bg: #fff; /* Light mode notification read background */
+  --notification-read-text: rgba(0, 0, 0, 0.65); /* Light mode notification read text */
+  --notification-unread-bg: #f5f5f5; /* Light mode notification unread background */
+  --notification-unread-text: rgba(0, 0, 0, 0.85); /* Light mode notification unread text */
+  --notification-item-hover-bg: #fafafa; /* Light mode notification item hover background */
+  --notification-ro-number: #1677ff; /* Light mode notification RO number */
+  --notification-relative-time: rgba(0, 0, 0, 0.45); /* Light mode notification relative time */
+  --alert-bg: #fff1f0; /* Light mode alert background */
+  --alert-text: rgba(0, 0, 0, 0.85); /* Light mode alert text */
+  --alert-border: #ffa39e; /* Light mode alert border */
+  --alert-message: #ff4d4f; /* Light mode alert message */
+  --share-badge-bg: #cccccc; /* Light mode share badge background */
+  --column-header-bg: #d0d0d0; /* Light mode column header background */
+  --footer-bg: #d0d0d0; /* Light mode footer background */
+  --tech-icon-color: orangered; /* Light mode tech icon color */
+  --clone-border-color: #1890ff; /* Light mode clone border color */
+  --event-arrived-bg: rgba(4, 141, 4, 0.4); /* Light mode arrived event background */
+  --event-block-bg: tomato; /* Light mode block event background */
+  --event-selected-bg: slategrey; /* Light mode selected event background */
+  --task-bg: #fff; /* Light mode task center background */
+  --task-text: rgba(0, 0, 0, 0.85); /* Light mode task text */
+  --task-border: #d9d9d9; /* Light mode task border */
+  --task-header-bg: #fafafa; /* Light mode task header background */
+  --task-header-border: #f0f0f0; /* Light mode task header border */
+  --task-section-bg: #f5f5f5; /* Light mode task section background */
+  --task-section-border: #e8e8e8; /* Light mode task section border */
+  --task-row-hover-bg: #f5f5f5; /* Light mode task row hover background */
+  --task-row-border: #f0f0f0; /* Light mode task row border */
+  --task-ro-number: #1677ff; /* Light mode task RO number */
+  --task-due-text: rgba(0, 0, 0, 0.45); /* Light mode task due text */
+  --task-button-bg: #1677ff; /* Light mode task button background */
+  --task-button-hover-bg: #4096ff; /* Light mode task button hover background */
+  --task-button-disabled-bg: #d9d9d9; /* Light mode task button disabled background */
+  --task-button-text: white; /* Light mode task button text */
+  --task-message-text: rgba(0, 0, 0, 0.45); /* Light mode task message text */
+  --mask-bg: rgba(0, 0, 0, 0.05); /* Light mode mask background */
+  --board-text-color: #393939; /* Light mode board text color */
+  --section-bg: #e3e3e3; /* Light mode section background */
+  --detail-text-color: #4d4d4d; /* Light mode detail text color */
+  --card-selected-bg: rgba(128, 128, 128, 0.2); /* Light mode selected card background */
+  --card-stripe-even-bg: #f0f2f5; /* Light mode even card background */
+  --card-stripe-odd-bg: #ffffff; /* Light mode odd card background */
+  --bar-border-color: #f0f2f5; /* Light mode bar border and background */
+  --tag-wrapper-bg: #f0f2f5; /* Light mode tag wrapper background */
+  --tag-wrapper-text: #000; /* Light mode tag wrapper text */
+  --preview-bg: lightgray; /* Light mode preview background */
+  --preview-border-color: #2196F3; /* Light mode preview border color */
+  --event-bg-fallback: #c4c4c4; /* Light mode event background fallback */
+  --card-bg-fallback: #ffffff; /* Light mode card background fallback */
+  --card-text-fallback: black; /* Light mode card text fallback */
+  --table-row-even-bg: rgb(236, 236, 236); /* Light mode table row even background */
+  --status-row-bg-fallback: #ffffff; /* Light mode status row fallback background */
+  --reset-link-color: #0000ff; /* Light mode reset link color */
+  --error-header-text: tomato; /* Light mode error header text */
+  --tooltip-bg: white; /* Light mode tooltip background */
+  --tooltip-border: gray; /* Light mode tooltip border */
+  --tooltip-text-fallback: black; /* Light mode tooltip text fallback */
+  --teams-button-bg: #6264A7; /* Light mode Teams button background */
+  --teams-button-border: #6264A7; /* Light mode Teams button border */
+  --teams-button-text: #FFFFFF; /* Light mode Teams button text and icon */
+  --content-bg: #fff; /* Light mode content background */
+  --legend-bg-fallback: #ffffff; /* Light mode legend background fallback */
+  --tech-content-bg: #fff; /* Light mode tech content background */
+  --today-bg: #ffffff; /* Light mode today background */
+  --today-text: #000000; /* Light mode today text */
+  --off-range-bg: #f8f8f8; /* Light mode off-range background */
+}
+
+[data-theme="dark"] {
+  --table-stripe-bg: #2a2a2a; /* Dark mode table stripe */
+  --menu-divider-color: #5c5c5c; /* Dark mode menu divider */
+  --menu-submenu-text: rgba(255, 255, 255, 0.85); /* Dark mode submenu text */
+  --kanban-column-bg: #333333; /* Dark mode kanban column */
+  --alert-color: #4da8ff; /* Dark mode alert */
+  --completion-soon-color: #ff8c1a; /* Dark mode completion soon */
+  --completion-past-color: #ff4d4f; /* Dark mode completion past */
+  --job-line-manual-color: #ff6347; /* Dark mode job line manual */
+  --muted-button-color: #666666; /* Dark mode muted button */
+  --muted-button-hover-color: #999999; /* Dark mode muted button hover */
+  --table-border-color: #5c5c5c; /* Dark mode table border */
+  --table-hover-bg: #2a2a2a; /* Dark mode table hover */
+  --popover-bg: #2a2a2a; /* Dark mode popover background */
+  --error-text: #ff4d4f; /* Dark mode error message */
+  --no-jobs-text: #999999; /* Dark mode no jobs message */
+  --message-yours-bg: #2a2a2a; /* Dark mode yours message background */
+  --message-mine-bg-start: #4da8ff; /* Dark mode mine message gradient start */
+  --message-mine-bg-end: #326ade; /* Dark mode mine message gradient end */
+  --message-mine-text: #ffffff; /* Dark mode mine message text */
+  --message-mine-tail-bg: #1f1f1f; /* Dark mode mine/yours message tail */
+  --system-message-bg: #333333; /* Dark mode system message background */
+  --system-message-text: #cccccc; /* Dark mode system message text */
+  --system-label-text: #999999; /* Dark mode system label/date text */
+  --message-icon-color: #cccccc; /* Dark mode message icon */
+  --eula-card-bg: #2a2a2a; /* Dark mode eula card background */
+  --notification-bg: #2a2a2a; /* Dark mode notification background */
+  --notification-text: rgba(255, 255, 255, 0.85); /* Dark mode notification text */
+  --notification-border: #5c5c5c; /* Dark mode notification border */
+  --notification-header-bg: #333333; /* Dark mode notification header background */
+  --notification-header-border: #444444; /* Dark mode notification header border */
+  --notification-header-text: rgba(255, 255, 255, 0.85); /* Dark mode notification header text */
+  --notification-toggle-icon: #4da8ff; /* Dark mode notification toggle icon */
+  --notification-switch-bg: #4da8ff; /* Dark mode notification switch background */
+  --notification-btn-link: #4da8ff; /* Dark mode notification link button */
+  --notification-btn-link-hover: #80c1ff; /* Dark mode notification link button hover */
+  --notification-btn-link-disabled: rgba(255, 255, 255, 0.25); /* Dark mode notification link button disabled */
+  --notification-btn-link-active: #2681ff; /* Dark mode notification link button active */
+  --notification-read-bg: #2a2a2a; /* Dark mode notification read background */
+  --notification-read-text: rgba(255, 255, 255, 0.65); /* Dark mode notification read text */
+  --notification-unread-bg: #333333; /* Dark mode notification unread background */
+  --notification-unread-text: rgba(255, 255, 255, 0.85); /* Dark mode notification unread text */
+  --notification-item-hover-bg: #3a3a3a; /* Dark mode notification item hover background */
+  --notification-ro-number: #4da8ff; /* Dark mode notification RO number */
+  --notification-relative-time: rgba(255, 255, 255, 0.45); /* Dark mode notification relative time */
+  --alert-bg: #3a1a1a; /* Dark mode alert background */
+  --alert-text: rgba(255, 255, 255, 0.85); /* Dark mode alert text */
+  --alert-border: #ff6666; /* Dark mode alert border */
+  --alert-message: #ff6666; /* Dark mode alert message */
+  --share-badge-bg: #666666; /* Dark mode share badge background */
+  --column-header-bg: #333333; /* Dark mode column header background */
+  --footer-bg: #333333; /* Dark mode footer background */
+  --tech-icon-color: #ff4500; /* Dark mode tech icon color */
+  --clone-border-color: #4da8ff; /* Dark mode clone border color */
+  --event-arrived-bg: rgba(4, 141, 4, 0.6); /* Dark mode arrived event background */
+  --event-block-bg: tomato; /* Dark mode block event background */
+  --event-selected-bg: #4a5e6e; /* Dark mode selected event background */
+  --task-bg: #2a2a2a; /* Dark mode task center background */
+  --task-text: rgba(255, 255, 255, 0.85); /* Dark mode task text */
+  --task-border: #5c5c5c; /* Dark mode task border */
+  --task-header-bg: #333333; /* Dark mode task header background */
+  --task-header-border: #444444; /* Dark mode task header border */
+  --task-section-bg: #333333; /* Dark mode task section background */
+  --task-section-border: #444444; /* Dark mode task section border */
+  --task-row-hover-bg: #3a3a3a; /* Dark mode task row hover background */
+  --task-row-border: #444444; /* Dark mode task row border */
+  --task-ro-number: #4da8ff; /* Dark mode task RO number */
+  --task-due-text: rgba(255, 255, 255, 0.45); /* Dark mode task due text */
+  --task-button-bg: #4da8ff; /* Dark mode task button background */
+  --task-button-hover-bg: #80c1ff; /* Dark mode task button hover background */
+  --task-button-disabled-bg: #666666; /* Dark mode task button disabled background */
+  --task-button-text: #ffffff; /* Dark mode task button text */
+  --task-message-text: rgba(255, 255, 255, 0.45); /* Dark mode task message text */
+  --mask-bg: rgba(255, 255, 255, 0.05); /* Dark mode mask background */
+  --board-text-color: #cccccc; /* Dark mode board text color */
+  --section-bg: #333333; /* Dark mode section background */
+  --detail-text-color: #bbbbbb; /* Dark mode detail text color */
+  --card-selected-bg: rgba(255, 255, 255, 0.1); /* Dark mode selected card background */
+  --card-stripe-even-bg: #2a2a2a; /* Dark mode even card background */
+  --card-stripe-odd-bg: #1f1f1f; /* Dark mode odd card background */
+  --bar-border-color: #2a2a2a; /* Dark mode bar border and background */
+  --tag-wrapper-bg: #2a2a2a; /* Dark mode tag wrapper background */
+  --tag-wrapper-text: #cccccc; /* Dark mode tag wrapper text */
+  --preview-bg: #2a2a2a; /* Dark mode preview background */
+  --preview-border-color: #4da8ff; /* Dark mode preview border color */
+  --event-bg-fallback: #262626; /* Dark mode event background fallback */
+  --card-bg-fallback: #2a2a2a; /* Dark mode card background fallback */
+  --card-text-fallback: #cccccc; /* Dark mode card text fallback */
+  --table-row-even-bg: #2a2a2a; /* Dark mode table row even background */
+  --status-row-bg-fallback: #1f1f1f; /* Dark mode status row fallback background */
+  --reset-link-color: #4da8ff; /* Dark mode reset link color */
+  --error-header-text: #ff6347; /* Dark mode error header text */
+  --tooltip-bg: #2a2a2a; /* Dark mode tooltip background */
+  --tooltip-border: #5c5c5c; /* Dark mode tooltip border */
+  --tooltip-text-fallback: #cccccc; /* Dark mode tooltip text fallback */
+  --teams-button-bg: #7b7dc4; /* Dark mode Teams button background */
+  --teams-button-border: #7b7dc4; /* Dark mode Teams button border */
+  --teams-button-text: #ffffff; /* Dark mode Teams button text and icon */
+  --content-bg: #2a2a2a; /* Dark mode content background */
+  --legend-bg-fallback: #2a2a2a; /* Dark mode legend background fallback */
+  --tech-content-bg: #2a2a2a; /* Dark mode tech content background */
+  --today-bg: #4a5e6e; /* Dark mode today background */
+  --today-text: #ffffff; /* Dark mode today text */
+  --off-range-bg: #333333; /* Dark mode off-range background */
+  --svg-background: #FFF; /* Dark mode SVG background */
+}
+
+// Global Styles
@import "react-big-calendar/lib/sass/styles";

 .ant-menu-item-divider {
-  border-bottom: 1px solid #74695c !important;
+  border-bottom: 1px solid var(--menu-divider-color) !important;
 }

-// TODO: This was added because the newest release of ant was making the text color and the background color the same on a selected header
-// Tried all available tokens (https://ant.design/components/menu?locale=en-US) and even reverted all our custom styles, to no avail
-// This should be kept an eye on, especially if implementing DARK MODE
+// Note: Monitor this in dark mode to ensure text visibility
 .ant-menu-submenu-title {
-  color: rgba(255, 255, 255, 0.65) !important;
+  color: var(--menu-submenu-text) !important;
 }

 .imex-table-header {
@@ -46,7 +257,7 @@
 }

 .ellipses {
-  display: inline-block; /* for em, a, span, etc (inline by default) */
+  display: inline-block;
  text-overflow: ellipsis;
  width: calc(95%);
  overflow: hidden;
@@ -60,23 +271,24 @@
  }
 }

-// ::-webkit-scrollbar-track {
-//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-//   border-radius: 0.2rem;
-//   background-color: #f5f5f5;
-// }
+// Scrollbar styles (uncomment if needed, updated for dark mode)
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 0.2rem;
+  background-color: var(--table-stripe-bg);
+}

-// ::-webkit-scrollbar {
-//   width: 0.25rem;
-//   max-height: 0.25rem;
-//   background-color: #f5f5f5;
-// }
+::-webkit-scrollbar {
+  width: 0.25rem;
+  max-height: 0.25rem;
+  background-color: var(--table-stripe-bg);
+}

-// ::-webkit-scrollbar-thumb {
-//   border-radius: 0.2rem;
-//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-//   background-color: #188fff;
-// }
+::-webkit-scrollbar-thumb {
+  border-radius: 0.2rem;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: var(--alert-color);
+}

 .ant-input-number-input,
 .ant-input-number,
@@ -88,28 +300,27 @@

 .production-alert {
  animation: alertBlinker 1s linear infinite;
-  color: blue;
+  color: var(--alert-color);
 }

@keyframes alertBlinker {
  50% {
-    color: red;
+    color: var(--completion-past-color);
    opacity: 100;
-    //opacity: 0;
  }
 }

 .blue {
-  color: blue;
+  color: var(--alert-color);
 }

 .production-completion-soon {
-  color: rgba(255, 140, 0, 0.8);
+  color: var(--completion-soon-color);
  font-weight: bold;
 }

 .production-completion-past {
-  color: rgba(255, 0, 0, 0.8);
+  color: var(--completion-past-color);
  font-weight: bold;
 }

@@ -139,7 +350,7 @@
 }

 .react-kanban-column {
-  background-color: #ddd !important;
+  background-color: var(--kanban-column-bg) !important;
 }

 .production-list-table {
@@ -151,18 +362,18 @@
 .ReactGridGallery_tile-icon-bar {
  div {
    svg {
-      fill: #1890ff;
+      fill: var(--alert-color);
    }
  }
 }

 .job-line-manual {
-  color: tomato;
+  color: var(--job-line-manual-color);
  font-style: italic;
 }

 .ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
-  background-color: #f4f4f4;
+  background-color: var(--table-stripe-bg);
 }

 .rowWithColor > td {
@@ -170,15 +381,15 @@
 }

 .muted-button {
-  color: lightgray;
+  color: var(--muted-button-color);
  border: none;
  background: none;
  cursor: pointer;
-  font-size: 16px; /* Adjust as needed */
+  font-size: 16px;
 }

 .muted-button:hover {
-  color: darkgrey;
+  color: var(--muted-button-hover-color);
 }

 .notification-alert-unordered-list {
@@ -190,3 +401,27 @@
    margin-right: 0;
  }
 }
+
+// Override react-big-calendar styles for dark mode only
+[data-theme="dark"] {
+  .car-svg {
+    background-color: var(--svg-background);
+  }
+
+  .rbc-today {
+    background-color: var(--today-bg);
+    color: var(--today-text);
+  }
+
+  .rbc-off-range {
+    background-color: var(--off-range-bg);
+  }
+
+  .rbc-day-bg.rbc-today {
+    background-color: var(--today-bg);
+  }
+}
+
+//.rbc-time-header-gutter {
+//  padding: 0;
+//} 
--- a/client/src/App/themeProvider.js
+++ b/client/src/App/themeProvider.js
@@ -4,36 +4,42 @@ import InstanceRenderMgr from "../utils/instanceRenderMgr";

 const { defaultAlgorithm, darkAlgorithm } = theme;

-let isDarkMode = false;
-
 /**
 * Default theme
 * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
 */
-const defaultTheme = {
+const defaultTheme = (isDarkMode) => ({
  components: {
    Table: {
-      rowHoverBg: "#e7f3ff",
-      rowSelectedBg: "#e6f7ff",
+      rowHoverBg: isDarkMode ? "#2a2a2a" : "#e7f3ff",
+      rowSelectedBg: isDarkMode ? "#333333" : "#e6f7ff",
      headerSortHoverBg: "transparent"
    },
    Menu: {
-      darkItemHoverBg: "#1890ff",
-      itemHoverBg: "#1890ff",
-      horizontalItemHoverBg: "#1890ff"
+      darkItemHoverBg: isDarkMode ? "#004a77" : "#1890ff",
+      itemHoverBg: isDarkMode ? "#004a77" : "#1890ff",
+      horizontalItemHoverBg: isDarkMode ? "#004a77" : "#1890ff"
    }
  },
  token: {
-    colorPrimary: InstanceRenderMgr({
-      imex: "#1890ff",
-      rome: "#326ade"
-    }),
-    colorInfo: InstanceRenderMgr({
-      imex: "#1890ff",
-      rome: "#326ade"
-    })
+    colorPrimary: InstanceRenderMgr(
+      {
+        imex: isDarkMode ? "#4da8ff" : "#1890ff",
+        rome: isDarkMode ? "#5b8ce6" : "#326ade"
+      },
+      isDarkMode
+    ),
+    colorInfo: InstanceRenderMgr(
+      {
+        imex: isDarkMode ? "#4da8ff" : "#1890ff",
+        rome: isDarkMode ? "#5b8ce6" : "#326ade"
+      },
+      isDarkMode
+    ),
+    colorError: isDarkMode ? "#ff4d4f" : "#f5222d",
+    colorBgBase: isDarkMode ? "#1f1f1f" : "#ffffff" // Align with Ant Design dark mode
  }
-};
+});

 /**
 * Development theme
@@ -60,8 +66,9 @@ const prodTheme = {};

 const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;

-const finaltheme = {
+const getTheme = (isDarkMode) => ({
  algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
  ...defaultsDeep(currentTheme, defaultTheme)
-};
-export default finaltheme;
+});
+
+export default getTheme;
--- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
+++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
@@ -1,6 +1,6 @@
 import { Card, Checkbox, Input, Space, Table } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -16,12 +16,13 @@ import PayableExportAll from "../payable-export-all-button/payable-export-all-bu
 import PayableExportButton from "../payable-export-button/payable-export-button.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import useLocalStorage from "./../../utils/useLocalStorage";

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

-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
  const { t } = useTranslation();
  const [selectedBills, setSelectedBills] = useState([]);
  const [transInProgress, setTransInProgress] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-payables-table-state", {
    sortedInfo: {},
    search: ""
  });
@@ -181,7 +182,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
        onChange={handleTableChange}
        rowSelection={{
          onSelectAll: (selected, selectedRows) => setSelectedBills(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
            setSelectedBills(selectedRows.map((i) => i.id));
          },
          getCheckboxProps: (record) => ({
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -1,5 +1,5 @@
 import { Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,6 +10,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { exportPageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
@@ -21,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
  const { t } = useTranslation();
  const [selectedPayments, setSelectedPayments] = useState([]);
  const [transInProgress, setTransInProgress] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-payments-table-state", {
    sortedInfo: {},
    search: ""
  });
@@ -194,7 +195,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
        onChange={handleTableChange}
        rowSelection={{
          onSelectAll: (selected, selectedRows) => setSelectedPayments(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
            setSelectedPayments(selectedRows.map((i) => i.id));
          },
          getCheckboxProps: (record) => ({
--- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
+++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
@@ -1,5 +1,5 @@
 import { Button, Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,6 +10,7 @@ import { exportPageLimit } from "../../utils/config";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
@@ -20,7 +21,7 @@ import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(AccountingReceivablesTableComponent);
@@ -30,7 +31,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
  const [selectedJobs, setSelectedJobs] = useState([]);
  const [transInProgress, setTransInProgress] = useState(false);

-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-receivables-table-state", {
    sortedInfo: {},
    search: ""
  });
@@ -207,7 +208,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
        onChange={handleTableChange}
        rowSelection={{
          onSelectAll: (selected, selectedRows) => setSelectedJobs(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
            setSelectedJobs(selectedRows.map((i) => i.id));
          },
          getCheckboxProps: (record) => ({
--- a/client/src/components/bill-cm-returns-table/bill-cm-returns-table.styles.scss
+++ b/client/src/components/bill-cm-returns-table/bill-cm-returns-table.styles.scss
@@ -6,7 +6,7 @@
  td {
    padding: 8px;
    text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--table-border-color);

    .ant-form-item {
      margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
  }

  tr:hover {
-    background-color: #f5f5f5;
+    background-color: var(--table-hover-bg);
  }
 }
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -25,6 +25,7 @@ import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
+import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";

 const mapStateToProps = createStructuredSelector({
  billEnterModal: selectBillEnterModal,
@@ -53,10 +54,10 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
  const notification = useNotification();

  const {
-    treatments: { Enhanced_Payroll }
+    treatments: { Enhanced_Payroll, Imgproxy }
  } = useSplitTreatments({
    attributes: {},
-    names: ["Enhanced_Payroll"],
+    names: ["Enhanced_Payroll", "Imgproxy"],
    splitKey: bodyshop.imexshopid
  });

@@ -298,20 +299,39 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
          });
        });
      } else {
-        upload.forEach((u) => {
-          handleUpload(
-            { file: u.originFileObj },
-            {
-              bodyshop: bodyshop,
-              uploaded_by: currentUser.email,
-              jobId: values.jobid,
-              billId: billId,
-              tagsArray: null,
-              callback: null
-            },
-            notification
-          );
-        });
+        //Check if using Imgproxy or cloudinary
+
+        if (Imgproxy.treatment === "on") {
+          upload.forEach((u) => {
+            handleUploadToImageProxy(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                billId: billId,
+                tagsArray: null,
+                callback: null
+              },
+              notification
+            );
+          });
+        } else {
+          upload.forEach((u) => {
+            handleUpload(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                billId: billId,
+                tagsArray: null,
+                callback: null
+              },
+              notification
+            );
+          });
+        }
      }
    }
    ///////////////////////////
--- a/client/src/components/bill-inventory-table/bill-inventory-table.styles.scss
+++ b/client/src/components/bill-inventory-table/bill-inventory-table.styles.scss
@@ -6,7 +6,7 @@
  td {
    padding: 8px;
    text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--table-border-color);

    .ant-form-item {
      margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
  }

  tr:hover {
-    background-color: #f5f5f5;
+    background-color: var(--table-hover-bg);
  }
 }
--- a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
+++ b/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
@@ -1,5 +1,5 @@
 import { Select } from "antd";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";

@@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
            item.oem_partno ? ` - ${item.oem_partno}` : ""
          }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
          label: (
-            <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+            <div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
              <span>
                {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                  item.oem_partno ? ` - ${item.oem_partno}` : ""
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -29,9 +29,7 @@ const mapDispatchToProps = (dispatch) => ({
 function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
  const { t } = useTranslation();
  const [, forceUpdate] = useState(false);
-
  const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
-
  const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
    variables: {
      bodyshopid: bodyshop.id,
@@ -64,15 +62,12 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
    const item = sortedConversationList[index];
    const normalizedPhone = phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
    const hasOptOutEntry = optOutMap.has(normalizedPhone);
-
    const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
    const cardContentLeft =
      item.job_conversations.length > 0
        ? item.job_conversations.map((j, idx) => <Tag key={idx}>{j.job.ro_number}</Tag>)
        : null;
-
    const names = <>{_.uniq(item.job_conversations.map((j, idx) => OwnerNameDisplayFunction(j.job)))}</>;
-
    const cardTitle = (
      <>
        {item.label && <Tag color="blue">{item.label}</Tag>}
@@ -85,7 +80,6 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
        )}
      </>
    );
-
    const cardExtra = (
      <>
        <Badge count={item.messages_aggregate.aggregate.count} />
@@ -98,11 +92,10 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
        )}
      </>
    );
-
    const getCardStyle = () =>
      item.id === selectedConversation
-        ? { backgroundColor: "rgba(128, 128, 128, 0.2)" }
-        : { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
+        ? { backgroundColor: "var(--card-selected-bg)" }
+        : { backgroundColor: index % 2 === 0 ? "var(--card-stripe-even-bg)" : "var(--card-stripe-odd-bg)" };

    return (
      <List.Item
--- a/client/src/components/chat-media-selector/chat-media-selector.component.jsx
+++ b/client/src/components/chat-media-selector/chat-media-selector.component.jsx
@@ -110,7 +110,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
      trigger="click"
      open={open}
      onOpenChange={handleVisibleChange}
-      overlayClassName="media-selector-popover"
+      classNames={{ root: "media-selector-popover" }}
    >
      <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
        <PictureFilled style={{ margin: "0 .5rem" }} />
--- a/client/src/components/chat-media-selector/chat-media-selector.styles.scss
+++ b/client/src/components/chat-media-selector/chat-media-selector.styles.scss
@@ -1,10 +1,11 @@
 .media-selector-popover {
  .ant-popover-inner-content {
+    position: relative;
    max-width: 640px;
    max-height: 480px;
    overflow-y: auto;
    padding: 8px;
-    background-color: #fff;
+    background-color: var(--popover-bg);
    border-radius: 8px;
  }
 }
@@ -16,7 +17,7 @@
 }

 .error-message {
-  color: red;
+  color: var(--error-text);
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
@@ -24,28 +25,22 @@

 .no-jobs-message {
  font-size: 14px;
-  color: #888;
+  color: var(--no-jobs-text);
  text-align: center;
  padding: 8px;
 }

 /* Style images within gallery components */
 .media-selector-content img {
-
  object-fit: cover;
  border-radius: 4px;
  margin: 4px;
  cursor: pointer;
-  transition: transform 0.2s;
-
-  &:hover {
-    transform: scale(1.05);
-  }
 }

 /* Grid layout for gallery components */
-.media-selector-content .ant-image, /* Assuming gallery components use Ant Design's Image */
-.media-selector-content .gallery-container { /* Fallback for custom gallery classes */
+.media-selector-content .ant-image,
+.media-selector-content .gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
--- a/client/src/components/chat-messages-list/chat-message-list.styles.scss
+++ b/client/src/components/chat-messages-list/chat-message-list.styles.scss
@@ -44,7 +44,6 @@
 .chat-send-message-button {
  margin: 0.3rem;
  padding-left: 0.5rem;
-
 }

 .message-icon {
@@ -52,7 +51,7 @@
  bottom: 0.1rem;
  right: 0.3rem;
  margin: 0 0.1rem;
-  color: whitesmoke;
+  color: var(--message-icon-color);
  z-index: 5;
 }

@@ -80,7 +79,7 @@

    &:last-child:after {
      width: 10px;
-      background: white;
+      background: var(--message-mine-tail-bg);
      z-index: 1;
    }
  }
@@ -92,11 +91,11 @@

  .message {
    margin-right: 20%;
-    background-color: #eee;
+    background-color: var(--message-yours-bg);

    &:last-child:before {
      left: -7px;
-      background: #eee;
+      background: var(--message-yours-bg);
      border-bottom-right-radius: 15px;
    }

@@ -112,14 +111,14 @@
  align-items: flex-end;

  .message {
-    color: white;
+    color: var(--message-mine-text);
    margin-left: 25%;
-    background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+    background: linear-gradient(to bottom, var(--message-mine-bg-start) 0%, var(--message-mine-bg-end) 100%);
    padding-bottom: 0.6rem;

    &:last-child:before {
      right: -8px;
-      background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+      background: linear-gradient(to bottom, var(--message-mine-bg-start) 0%, var(--message-mine-bg-end) 100%);
      border-bottom-left-radius: 15px;
    }

@@ -135,32 +134,31 @@
  margin: 0.5rem 10%;

  .message {
-    background-color: #f5f5f5;
+    background-color: var(--system-message-bg);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    text-align: center;
    font-style: italic;
-    color: #555;
+    color: var(--system-message-text);
    width: fit-content;
    max-width: 80%;
  }

  .system-label {
    font-size: 0.75rem;
-    color: #888;
+    color: var(--system-label-text);
    margin-bottom: 0.2rem;
    display: block;
  }

  .system-date {
    font-size: 0.75rem;
-    color: #888;
+    color: var(--system-label-text);
    margin-top: 0.2rem;
    text-align: center;
  }
 }

-
 .virtuoso-container {
  flex: 1;
  overflow: auto;
--- a/client/src/components/contract-status-select/contract-status-select.component.jsx
+++ b/client/src/components/contract-status-select/contract-status-select.component.jsx
@@ -1,10 +1,10 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";

 const { Option } = Select;

-const ContractStatusComponent = ({ value, onChange }, ref) => {
+const ContractStatusComponent = ({ value, onChange }) => {
  const [option, setOption] = useState(value);
  const { t } = useTranslation();

--- 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
@@ -1,5 +1,5 @@
 import { Slider } from "antd";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";

 const CourtesyCarFuelComponent = (props, ref) => {
--- a/client/src/components/dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx
+++ b/client/src/components/dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx
@@ -1,6 +1,6 @@
 import { Card, Table, Tag } from "antd";
 import axios from "axios";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../../utils/day";
 import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
@@ -69,7 +69,6 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
  ];

  if (!data) return null;
-
  if (!data.job_lifecycle || !lifecycleData) return <DashboardRefreshRequired {...cardProps} />;

  const extra = `${t("job_lifecycle.content.calculated_based_on")} ${lifecycleData.jobs} ${t("job_lifecycle.content.jobs_in_since")} ${fortyFiveDaysAgo()}`;
@@ -88,7 +87,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
              borderRadius: "5px",
              borderWidth: "5px",
              borderStyle: "solid",
-              borderColor: "#f0f2f5",
+              borderColor: "var(--bar-border-color)",
              margin: 0,
              padding: 0
            }}
@@ -107,12 +106,10 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
                    alignItems: "center",
                    margin: 0,
                    padding: 0,
-
-                    borderTop: "1px solid #f0f2f5",
-                    borderBottom: "1px solid #f0f2f5",
-                    borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
-                    borderRight: isLast ? "1px solid #f0f2f5" : undefined,
-
+                    borderTop: "1px solid var(--bar-border-color)",
+                    borderBottom: "1px solid var(--bar-border-color)",
+                    borderLeft: isFirst ? "1px solid var(--bar-border-color)" : undefined,
+                    borderRight: isLast ? "1px solid var(--bar-border-color)" : undefined,
                    backgroundColor: key.color,
                    width: `${key.percentage}%`
                  }}
@@ -124,7 +121,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
                      <div>{key.roundedPercentage}</div>
                      <div
                        style={{
-                          backgroundColor: "#f0f2f5",
+                          backgroundColor: "var(--tag-wrapper-bg)",
                          borderRadius: "5px",
                          paddingRight: "2px",
                          paddingLeft: "2px",
@@ -152,8 +149,8 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
                    aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                    title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                    style={{
-                      backgroundColor: "#f0f2f5",
-                      color: "#000",
+                      backgroundColor: "var(--tag-wrapper-bg)",
+                      color: "var(--tag-wrapper-text)",
                      padding: "4px",
                      textAlign: "center"
                    }}
--- a/client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx
@@ -0,0 +1,411 @@
+import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
+import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { TimeFormatter } from "../../../utils/DateFormatter";
+import { onlyUnique } from "../../../utils/arrayHelper";
+import dayjs from "../../../utils/day";
+import { alphaSort, dateSort } from "../../../utils/sorters";
+import useLocalStorage from "../../../utils/useLocalStorage";
+import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../../owner-name-display/owner-name-display.component";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardScheduledDeliveryToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {}
+  });
+  const [isTvModeScheduledDelivery, setIsTvModeScheduledDelivery] = useLocalStorage("isTvModeScheduledDelivery", false);
+  if (!data) return null;
+  if (!data.scheduled_delivery_today) return <DashboardRefreshRequired {...cardProps} />;
+
+  const scheduledDeliveryToday = data.scheduled_delivery_today.map((item) => {
+    const joblines_body = item.joblines
+      ? item.joblines.filter((l) => l.mod_lbr_ty !== "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0)
+      : 0;
+    const joblines_ref = item.joblines
+      ? item.joblines.filter((l) => l.mod_lbr_ty === "LAR").reduce((acc, val) => acc + val.mod_lb_hrs, 0)
+      : 0;
+    return {
+      ...item,
+      joblines_body,
+      joblines_ref
+    };
+  });
+
+  const tvFontSize = 18;
+  const tvFontWeight = "bold";
+
+  const tvColumns = [
+    {
+      title: t("jobs.fields.scheduled_delivery"),
+      dataIndex: "scheduled_delivery",
+      key: "scheduled_delivery",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery),
+      sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order,
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
+        </span>
+      )
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      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.jobid} onClick={(e) => e.stopPropagation()}>
+          <Space>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {record.ro_number || t("general.labels.na")}
+              {record.production_vars && record.production_vars.alert ? (
+                <ExclamationCircleFilled className="production-alert" />
+              ) : null}
+              {record.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+              {record.iouparent && (
+                <Tooltip title={t("jobs.labels.iou")}>
+                  <BranchesOutlined style={{ color: "orangered" }} />
+                </Tooltip>
+              )}
+            </span>
+          </Space>
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              <OwnerNameDisplay ownerObject={record} />
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link to={"/manage/vehicles/" + record.vehicleid} onClick={(e) => e.stopPropagation()}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      }
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.atp"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport),
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.alt_transport}</span>
+      )
+    },
+    {
+      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,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.status"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
+      render: (text, record) => <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.status}</span>
+    },
+    {
+      title: t("jobs.fields.lab"),
+      dataIndex: "joblines_body",
+      key: "joblines_body",
+      sorter: (a, b) => a.joblines_body - b.joblines_body,
+      sortOrder: state.sortedInfo.columnKey === "joblines_body" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.joblines_body.toFixed(1)}</span>
+      )
+    },
+    {
+      title: t("jobs.fields.lar"),
+      dataIndex: "joblines_ref",
+      key: "joblines_ref",
+      sorter: (a, b) => a.joblines_ref - b.joblines_ref,
+      sortOrder: state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{record.joblines_ref.toFixed(1)}</span>
+      )
+    }
+  ];
+
+  const columns = [
+    {
+      title: t("jobs.fields.scheduled_delivery"),
+      dataIndex: "scheduled_delivery",
+      key: "scheduled_delivery",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.scheduled_delivery, b.scheduled_delivery),
+      sortOrder: state.sortedInfo.columnKey === "scheduled_delivery" && state.sortedInfo.order,
+      render: (text, record) => <TimeFormatter>{record.scheduled_delivery}</TimeFormatter>
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      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.jobid} onClick={(e) => e.stopPropagation()}>
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      }
+    },
+    {
+      title: t("dashboard.labels.phone"),
+      dataIndex: "ownr_ph",
+      key: "ownr_ph",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <Space size="small" wrap>
+          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+
+          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        </Space>
+      )
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => <a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link to={"/manage/vehicles/" + record.vehicleid} onClick={(e) => e.stopPropagation()}>
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder: state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.ins_co_nm)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.insco"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.ins_co_nm)
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder: state.sortedInfo.columnKey === "alt_transport" && state.sortedInfo.order,
+      filters:
+        (scheduledDeliveryToday &&
+          scheduledDeliveryToday
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || t("dashboard.errors.atp"),
+                value: [s]
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport)
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("dashboard.titles.scheduleddeliverydate", {
+        date: dayjs().startOf("day").format("MM/DD/YYYY")
+      })}
+      extra={
+        <Space>
+          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
+          <Switch
+            onClick={() => setIsTvModeScheduledDelivery(!isTvModeScheduledDelivery)}
+            defaultChecked={isTvModeScheduledDelivery}
+          />
+        </Space>
+      }
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={false}
+          columns={isTvModeScheduledDelivery ? tvColumns : columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={scheduledDeliveryToday}
+          size={isTvModeScheduledDelivery ? "small" : "middle"}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardScheduledDeliveryTodayGql = `
+  scheduled_delivery_today: jobs(where: {
+    date_invoiced: {_is_null: true}, 
+    ro_number: {_is_null: false}, 
+    voided: {_eq: false}, 
+    scheduled_delivery: {_gte: "${dayjs().startOf("day").toISOString()}", 
+    _lte: "${dayjs().endOf("day").toISOString()}"}}) {
+      alt_transport
+      clm_no
+      jobid: id
+      joblines(where: {removed: {_eq: false}}) {
+        mod_lb_hrs
+        mod_lbr_ty
+      }
+      ins_co_nm
+      iouparent
+      ownerid
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      production_vars
+      ro_number
+      scheduled_delivery
+      status
+      suspended
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      vehicleid
+  }
+`;
--- 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
@@ -1,11 +1,11 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
 import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
-import dayjs from "../../../utils/day";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { TimeFormatter } from "../../../utils/DateFormatter";
 import { onlyUnique } from "../../../utils/arrayHelper";
+import dayjs from "../../../utils/day";
 import { alphaSort, dateSort } from "../../../utils/sorters";
 import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
@@ -169,7 +169,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Alt. Transport",
+                text: s || t("dashboard.errors.atp"),
                value: [s]
              };
            })
@@ -313,7 +313,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Ins. Co.*",
+                text: s || t("dashboard.errors.insco"),
                value: [s]
              };
            })
@@ -335,7 +335,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Alt. Transport",
+                text: s || t("dashboard.errors.atp"),
                value: [s]
              };
            })
--- 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
@@ -1,11 +1,11 @@
 import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined } from "@ant-design/icons";
 import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
-import dayjs from "../../../utils/day";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { TimeFormatter } from "../../../utils/DateFormatter";
 import { onlyUnique } from "../../../utils/arrayHelper";
+import dayjs from "../../../utils/day";
 import { alphaSort, dateSort } from "../../../utils/sorters";
 import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
@@ -138,7 +138,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Alt. Transport*",
+                text: s || t("dashboard.errors.atp"),
                value: [s]
              };
            })
@@ -154,7 +154,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
      dataIndex: "status",
      key: "status",
      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sorter: (a, b) => alphaSort(a.status, b.status),
      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
      filters:
        (scheduledOutToday &&
@@ -163,7 +163,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Status*",
+                text: s || t("dashboard.errors.status"),
                value: [s]
              };
            })
@@ -306,7 +306,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Ins. Co.*",
+                text: s || t("dashboard.errors.insco"),
                value: [s]
              };
            })
@@ -328,7 +328,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
            .filter(onlyUnique)
            .map((s) => {
              return {
-                text: s || "No Alt. Transport*",
+                text: s || t("dashboard.errors.atp"),
                value: [s]
              };
            })
--- a/client/src/components/dashboard-grid/componentList.js
+++ b/client/src/components/dashboard-grid/componentList.js
@@ -1,30 +1,33 @@
 import i18next from "i18next";
-import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx";
-import {
-  DashboardTotalProductionHours,
-  DashboardTotalProductionHoursGql
-} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx";
-import DashboardProjectedMonthlySales, {
-  DashboardProjectedMonthlySalesGql
-} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx";
-import DashboardMonthlyRevenueGraph, {
-  DashboardMonthlyRevenueGraphGql
-} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx";
-import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx";
-import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx";
-import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx";
+import JobLifecycleDashboardComponent, {
+  JobLifecycleDashboardGQL
+} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx";
 import DashboardMonthlyEmployeeEfficiency, {
  DashboardMonthlyEmployeeEfficiencyGql
 } from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx";
+import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx";
+import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx";
+import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx";
+import DashboardMonthlyRevenueGraph, {
+  DashboardMonthlyRevenueGraphGql
+} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx";
+import DashboardProjectedMonthlySales, {
+  DashboardProjectedMonthlySalesGql
+} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx";
+import DashboardScheduledDeliveryToday, {
+  DashboardScheduledDeliveryTodayGql
+} from "../dashboard-components/scheduled-delivery-today/scheduled-delivery-today.component.jsx";
 import DashboardScheduledInToday, {
  DashboardScheduledInTodayGql
 } from "../dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx";
 import DashboardScheduledOutToday, {
  DashboardScheduledOutTodayGql
 } from "../dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx";
-import JobLifecycleDashboardComponent, {
-  JobLifecycleDashboardGQL
-} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx";
+import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx";
+import {
+  DashboardTotalProductionHours,
+  DashboardTotalProductionHoursGql
+} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx";

 const componentList = {
  ProductionDollars: {
@@ -118,6 +121,15 @@ const componentList = {
    w: 10,
    h: 3
  },
+  ScheduleDeliveryToday: {
+    label: i18next.t("dashboard.titles.scheduleddeliverytoday"),
+    component: DashboardScheduledDeliveryToday,
+    gqlFragment: DashboardScheduledDeliveryTodayGql,
+    minW: 6,
+    minH: 2,
+    w: 10,
+    h: 3
+  },
  JobLifecycle: {
    label: i18next.t("dashboard.titles.joblifecycle"),
    component: JobLifecycleDashboardComponent,
--- a/client/src/components/dms-post-form/dms-post-form.component.jsx
+++ b/client/src/components/dms-post-form/dms-post-form.component.jsx
@@ -14,7 +14,6 @@ import {
  Typography
 } from "antd";
 import Dinero from "dinero.js";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,14 +23,14 @@ import i18n from "../../translations/i18n";
 import dayjs from "../../utils/day";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
@@ -93,7 +92,9 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                })
              : ""
          }`.slice(0, 239),
-          inservicedate: dayjs("2019-01-01")
+          inservicedate: dayjs(
+            `${(job.v_model_yr && (job.v_model_yr < 100 ? (job.v_model_yr >= (dayjs().year() + 1) % 100 ? 1900 + parseInt(job.v_model_yr) : 2000 + parseInt(job.v_model_yr)) : job.v_model_yr)) || 2019}-01-01`
+          )
        }}
      >
        <LayoutFormRow grow>
--- a/client/src/components/email-overlay/email-overlay.component.jsx
+++ b/client/src/components/email-overlay/email-overlay.component.jsx
@@ -1,7 +1,6 @@
 import { UploadOutlined, UserAddOutlined } from "@ant-design/icons";
 import { Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload } from "antd";
 import _ from "lodash";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -15,20 +14,24 @@ const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  emailConfig: selectEmailConfig
 });
-const mapDispatchToProps = (dispatch) => ({
+
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
+
 export default connect(mapStateToProps, mapDispatchToProps)(EmailOverlayComponent);

 export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, bodyshop, currentUser }) {
  const { t } = useTranslation();
-  const handleClick = ({ item, key, keyPath }) => {
+
+  const handleClick = ({ item }) => {
    const email = item.props.value;
    form.setFieldsValue({
      to: _.uniq([...form.getFieldValue("to"), ...(typeof email === "string" ? [email] : email)])
    });
  };
-  const handle_CC_Click = ({ item, key, keyPath }) => {
+
+  const handle_CC_Click = ({ item }) => {
    const email = item.props.value;
    form.setFieldsValue({
      cc: _.uniq([...(form.getFieldValue("cc") || ""), ...(typeof email === "string" ? [email] : email)])
@@ -52,6 +55,7 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
    ],
    onClick: handleClick
  };
+
  const menuCC = {
    items: [
      ...bodyshop.employees
@@ -136,26 +140,22 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
      >
        <Input />
      </Form.Item>
-
      <Divider>{t("emails.labels.preview")}</Divider>
      {bodyshop.attach_pdf_to_email && <strong>{t("emails.labels.pdfcopywillbeattached")}</strong>}
-
      <Form.Item shouldUpdate>
        {() => {
          return (
            <div
              style={{
                padding: "1rem",
-
-                backgroundColor: "lightgray",
-                borderLeft: "6px solid #2196F3"
+                backgroundColor: "var(--preview-bg)",
+                borderLeft: "6px solid var(--preview-border-color)"
              }}
              dangerouslySetInnerHTML={{ __html: form.getFieldValue("html") }}
            />
          );
        }}
      </Form.Item>
-
      <Tabs
        defaultActiveKey="documents"
        items={[
@@ -184,12 +184,10 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
                    return e && e.fileList;
                  }}
                  rules={[
-                    ({ getFieldValue }) => ({
+                    () => ({
                      validator(rule, value) {
                        const totalSize = value.reduce((acc, val) => (acc = acc + val.size), 0);
-
                        const limit = 10485760 - new Blob([form.getFieldValue("html")]).size;
-
                        if (totalSize > limit) {
                          return Promise.reject(t("general.errors.sizelimit"));
                        }
--- a/client/src/components/eula/eula.styles.scss
+++ b/client/src/components/eula/eula.styles.scss
@@ -5,7 +5,7 @@
 .eula-markdown-card {
  max-height: 50vh;
  overflow-y: auto;
-  background-color: lightgray;
+  background-color: var(--eula-card-bg);
 }

 .eula-markdown-div {
--- 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,6 +1,6 @@
 import { DatePicker, Space, TimePicker } from "antd";
 import PropTypes from "prop-types";
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -94,7 +94,24 @@ const DateTimePicker = ({
            showTime={false}
            format="MM/DD/YYYY"
            value={value ? dayjs(value) : null}
-            onChange={handleChange}
+            onChange={(dateValue) => {
+              if (dateValue) {
+                // When date changes, preserve the existing time if it exists
+                if (value && dayjs(value).isValid()) {
+                  const existingTime = dayjs(value);
+                  const newDateTime = dayjs(dateValue)
+                    .hour(existingTime.hour())
+                    .minute(existingTime.minute())
+                    .second(existingTime.second());
+                  handleChange(newDateTime);
+                } else {
+                  // If no existing time, just set the date without time
+                  handleChange(dateValue);
+                }
+              } else {
+                handleChange(dateValue);
+              }
+            }}
            placeholder={t("general.labels.date")}
            onBlur={handleBlur}
            disabledDate={handleDisabledDate}
@@ -105,13 +122,25 @@ const DateTimePicker = ({
            <TimePicker
              format="hh:mm a"
              minuteStep={15}
+              value={value && dayjs(value).hour() === 0 && dayjs(value).minute() === 0 ? null : dayjs(value)}
              defaultOpenValue={dayjs(value)
                .hour(dayjs().hour())
                .minute(Math.floor(dayjs().minute() / 15) * 15)
                .second(0)}
-              onChange={(value) => {
-                handleChange(value);
-                onBlur();
+              onChange={(timeValue) => {
+                if (timeValue) {
+                  // When time changes, combine it with the existing date
+                  const existingDate = dayjs(value);
+                  const newDateTime = existingDate
+                    .hour(timeValue.hour())
+                    .minute(timeValue.minute())
+                    .second(0);
+                  handleChange(newDateTime);
+                } else {
+                  // If time is cleared, just update with null time but keep date
+                  handleChange(timeValue);
+                }
+                if (onBlur) onBlur();
              }}
              placeholder={t("general.labels.time")}
              {...restProps}
--- a/client/src/components/form-items-formatted/labor-type-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/labor-type-form-item.component.jsx
@@ -1,7 +1,7 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";

-const LaborTypeFormItem = ({ value, onChange }, ref) => {
+const LaborTypeFormItem = ({ value }) => {
  const { t } = useTranslation();

  if (!value) return null;
--- a/client/src/components/form-items-formatted/part-type-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/part-type-form-item.component.jsx
@@ -1,11 +1,13 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";

-const PartTypeFormItem = ({ value, onChange }, ref) => {
+const PartTypeFormItem = ({ value }) => {
  const { t } = useTranslation();

  if (!value) return null;

-  return <div>{t(`joblines.fields.part_types.${value}`)}</div>;
+  return (
+    <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{t(`joblines.fields.part_types.${value}`)}</div>
+  );
 };
 export default forwardRef(PartTypeFormItem);
--- a/client/src/components/form-items-formatted/read-only-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/read-only-form-item.component.jsx
@@ -1,6 +1,4 @@
 import Dinero from "dinero.js";
-import React, { forwardRef } from "react";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -8,24 +6,25 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

-const ReadOnlyFormItem = ({ bodyshop, value, type = "text", onChange }, ref) => {
+const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
  if (!value) return null;
  switch (type) {
-    case "employee":
+    case "employee": {
      const emp = bodyshop.employees.find((e) => e.id === value);
      return `${emp?.first_name} ${emp?.last_name}`;
+    }

    case "text":
-      return <div>{value}</div>;
+      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
    case "currency":
      return <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>;
    default:
-      return <div>{value}</div>;
+      return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
  }
 };

-export default connect(mapStateToProps, mapDispatchToProps)(forwardRef(ReadOnlyFormItem));
+export default connect(mapStateToProps, mapDispatchToProps)(ReadOnlyFormItem);
--- a/client/src/components/header/buildAccountingChildren.jsx
+++ b/client/src/components/header/buildAccountingChildren.jsx
@@ -0,0 +1,190 @@
+import { Link } from "react-router-dom";
+import { FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
+import { GiPayMoney, GiPlayerTime } from "react-icons/gi";
+import { BankFilled, ExportOutlined, FieldTimeOutlined } from "@ant-design/icons";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
+
+// --- Menu Item Builders ---
+const buildAccountingChildren = ({
+  t,
+  bodyshop,
+  currentUser,
+  setBillEnterContext,
+  setPaymentContext,
+  setCardPaymentContext,
+  setTimeTicketContext,
+  ImEXPay,
+  DmsAp,
+  Simple_Inventory
+}) => [
+  {
+    key: "bills",
+    id: "header-accounting-bills",
+    icon: <FaFileInvoiceDollar />,
+    label: (
+      <Link to="/manage/bills">
+        <LockWrapper featureName="bills" bodyshop={bodyshop}>
+          {t("menus.header.bills")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  {
+    key: "enterbills",
+    id: "header-accounting-enterbills",
+    icon: <GiPayMoney />,
+    label: (
+      <LockWrapper featureName="bills" bodyshop={bodyshop}>
+        {t("menus.header.enterbills")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "bills", bodyshop }) && setBillEnterContext({ actions: {}, context: {} })
+  },
+  ...(Simple_Inventory.treatment === "on"
+    ? [
+        { type: "divider" },
+        {
+          key: "inventory",
+          id: "header-accounting-inventory",
+          icon: <FaFileInvoiceDollar />,
+          label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
+        }
+      ]
+    : []),
+  { type: "divider" },
+  {
+    key: "allpayments",
+    id: "header-accounting-allpayments",
+    icon: <BankFilled />,
+    label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
+  },
+  {
+    key: "enterpayments",
+    id: "header-accounting-enterpayments",
+    icon: <FaCreditCard />,
+    label: t("menus.header.enterpayment"),
+    onClick: () => setPaymentContext({ actions: {}, context: null })
+  },
+  ...(ImEXPay.treatment === "on"
+    ? [
+        {
+          key: "entercardpayments",
+          id: "header-accounting-entercardpayments",
+          icon: <FaCreditCard />,
+          label: t("menus.header.entercardpayment"),
+          onClick: () => setCardPaymentContext({ actions: {}, context: {} })
+        }
+      ]
+    : []),
+  { type: "divider" },
+  {
+    key: "timetickets",
+    id: "header-accounting-timetickets",
+    icon: <FieldTimeOutlined />,
+    label: (
+      <Link to="/manage/timetickets">
+        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+          {t("menus.header.timetickets")}
+        </LockWrapper>
+      </Link>
+    )
+  },
+  ...(bodyshop?.md_tasks_presets?.use_approvals
+    ? [
+        {
+          key: "ttapprovals",
+          id: "header-accounting-ttapprovals",
+          icon: <FieldTimeOutlined />,
+          label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+        }
+      ]
+    : []),
+  {
+    key: "entertimetickets",
+    id: "header-accounting-entertimetickets",
+    icon: <GiPlayerTime />,
+    label: (
+      <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+        {t("menus.header.entertimeticket")}
+      </LockWrapper>
+    ),
+    onClick: () =>
+      HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
+      setTimeTicketContext({
+        actions: {},
+        context: {
+          created_by: currentUser.displayName ? `${currentUser.email} | ${currentUser.displayName}` : currentUser.email
+        }
+      })
+  },
+  { type: "divider" },
+  {
+    key: "accountingexport",
+    id: "header-accounting-export",
+    icon: <ExportOutlined />,
+    label: (
+      <LockWrapper featureName="export" bodyshop={bodyshop}>
+        {t("menus.header.export")}
+      </LockWrapper>
+    ),
+    children: [
+      {
+        key: "receivables",
+        id: "header-accounting-receivables",
+        label: (
+          <Link to="/manage/accounting/receivables">
+            <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {t("menus.header.accounting-receivables")}
+            </LockWrapper>
+          </Link>
+        )
+      },
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on"
+        ? [
+            {
+              key: "payables",
+              id: "header-accounting-payables",
+              label: (
+                <Link to="/manage/accounting/payables">
+                  <LockWrapper featureName="export" bodyshop={bodyshop}>
+                    {t("menus.header.accounting-payables")}
+                  </LockWrapper>
+                </Link>
+              )
+            }
+          ]
+        : []),
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
+        ? [
+            {
+              key: "payments",
+              id: "header-accounting-payments",
+              label: (
+                <Link to="/manage/accounting/payments">
+                  <LockWrapper featureName="export" bodyshop={bodyshop}>
+                    {t("menus.header.accounting-payments")}
+                  </LockWrapper>
+                </Link>
+              )
+            }
+          ]
+        : []),
+      { type: "divider" },
+      {
+        key: "exportlogs",
+        id: "header-accounting-exportlogs",
+        label: (
+          <Link to="/manage/accounting/exportlogs">
+            <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {t("menus.header.export-logs")}
+            </LockWrapper>
+          </Link>
+        )
+      }
+    ]
+  }
+];
+
+export default buildAccountingChildren;
--- a/client/src/components/header/buildLeftMenuItems.jsx
+++ b/client/src/components/header/buildLeftMenuItems.jsx
@@ -0,0 +1,399 @@
+import { Link } from "react-router-dom";
+import {
+  BarChartOutlined,
+  CarFilled,
+  CheckCircleOutlined,
+  ClockCircleFilled,
+  DashboardFilled,
+  DollarCircleFilled,
+  FileAddFilled,
+  FileAddOutlined,
+  FileFilled,
+  HomeFilled,
+  ImportOutlined,
+  LineChartOutlined,
+  OneToOneOutlined,
+  PaperClipOutlined,
+  PhoneOutlined,
+  PlusCircleOutlined,
+  QuestionCircleFilled,
+  ScheduleOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  ToolFilled,
+  UnorderedListOutlined,
+  UsergroupAddOutlined,
+  UserOutlined
+} from "@ant-design/icons";
+import { FaCalendarAlt, FaCarCrash, FaMoon, FaSun, FaTasks } from "react-icons/fa";
+import { BsKanban } from "react-icons/bs";
+import { FiLogOut } from "react-icons/fi";
+import { GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
+import { RiSurveyLine } from "react-icons/ri";
+import { IoBusinessOutline } from "react-icons/io5";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
+
+const buildLeftMenuItems = ({
+  t,
+  bodyshop,
+  recentItems,
+  setTaskUpsertContext,
+  setReportCenterContext,
+  signOutStart,
+  accountingChildren,
+  handleDarkModeToggle,
+  darkMode
+}) => {
+  return [
+    {
+      key: "home",
+      id: "header-home",
+      icon: <HomeFilled />,
+      label: <Link to="/manage/">{t("menus.header.home")}</Link>
+    },
+    {
+      key: "schedule",
+      id: "header-schedule",
+      icon: <FaCalendarAlt />,
+      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
+    },
+    {
+      key: "jobssubmenu",
+      id: "header-jobs",
+      icon: <FaCarCrash />,
+      label: t("menus.header.jobs"),
+      children: [
+        {
+          key: "activejobs",
+          id: "header-active-jobs",
+          icon: <FileFilled />,
+          label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
+        },
+        {
+          key: "readyjobs",
+          id: "header-ready-jobs",
+          icon: <CheckCircleOutlined />,
+          label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
+        },
+        {
+          key: "parts-queue",
+          id: "header-parts-queue",
+          icon: <ToolFilled />,
+          label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
+        },
+        {
+          key: "availablejobs",
+          id: "header-jobs-available",
+          icon: <ImportOutlined />,
+          label: <Link to="/manage/available">{t("menus.header.availablejobs")}</Link>
+        },
+        {
+          key: "newjob",
+          id: "header-new-job",
+          icon: <FileAddOutlined />,
+          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
+        },
+        { type: "divider" },
+        {
+          key: "alljobs",
+          id: "header-all-jobs",
+          icon: <UnorderedListOutlined />,
+          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
+        },
+        { type: "divider" },
+        {
+          key: "productionlist",
+          id: "header-production-list",
+          icon: <ScheduleOutlined />,
+          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
+        },
+        {
+          key: "productionboard",
+          id: "header-production-board",
+          icon: <BsKanban />,
+          label: (
+            <Link to="/manage/production/board">
+              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
+                {t("menus.header.productionboard")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        { type: "divider" },
+        {
+          key: "scoreboard",
+          id: "header-scoreboard",
+          icon: <LineChartOutlined />,
+          label: (
+            <Link to="/manage/scoreboard">
+              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
+                {t("menus.header.scoreboard")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    {
+      key: "customers",
+      id: "header-customers",
+      icon: <UserOutlined />,
+      label: t("menus.header.customers"),
+      children: [
+        {
+          key: "owners",
+          id: "header-owners",
+          icon: <TeamOutlined />,
+          label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
+        },
+        {
+          key: "vehicles",
+          id: "header-vehicles",
+          icon: <CarFilled />,
+          label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
+        }
+      ]
+    },
+    {
+      key: "ccs",
+      id: "header-css",
+      icon: <CarFilled />,
+      label: (
+        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+          {t("menus.header.courtesycars")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "courtesycarsall",
+          id: "header-courtesycars-all",
+          icon: <CarFilled />,
+          label: (
+            <Link to="/manage/courtesycars">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-all")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "contracts",
+          id: "header-contracts",
+          icon: <FileFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-contracts")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "newcontract",
+          id: "header-newcontract",
+          icon: <FileAddFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts/new">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-newcontract")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    ...(accountingChildren.length > 0
+      ? [
+          {
+            key: "accounting",
+            id: "header-accounting",
+            icon: <DollarCircleFilled />,
+            label: t("menus.header.accounting"),
+            children: accountingChildren
+          }
+        ]
+      : []),
+    {
+      key: "phonebook",
+      id: "header-phonebook",
+      icon: <PhoneOutlined />,
+      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
+    },
+    {
+      key: "temporarydocs",
+      id: "header-temporarydocs",
+      icon: <PaperClipOutlined />,
+      label: (
+        <Link to="/manage/temporarydocs">
+          <LockWrapper featureName="media" bodyshop={bodyshop}>
+            {t("menus.header.temporarydocs")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "tasks",
+      id: "tasks",
+      icon: <FaTasks />,
+      label: t("menus.header.tasks"),
+      children: [
+        {
+          key: "createTask",
+          id: "header-create-task",
+          icon: <PlusCircleOutlined />,
+          label: t("menus.header.create_task"),
+          onClick: () => setTaskUpsertContext({ actions: {}, context: {} })
+        },
+        {
+          key: "mytasks",
+          id: "header-my-tasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
+        },
+        {
+          key: "all_tasks",
+          id: "header-all-tasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
+        }
+      ]
+    },
+    {
+      key: "shopsubmenu",
+      id: "header-shopsubmenu",
+      icon: <SettingOutlined />,
+      label: t("menus.header.shop"),
+      children: [
+        {
+          key: "shop",
+          id: "header-shop",
+          icon: <GiSettingsKnobs />,
+          label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
+        },
+        {
+          key: "dashboard",
+          id: "header-dashboard",
+          icon: <DashboardFilled />,
+          label: (
+            <Link to="/manage/dashboard">
+              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "reportcenter",
+          id: "header-reportcenter",
+          icon: <BarChartOutlined />,
+          label: t("menus.header.reportcenter"),
+          onClick: () => setReportCenterContext({ actions: {}, context: {} })
+        },
+        {
+          key: "shop-vendors",
+          id: "header-shop-vendors",
+          icon: <IoBusinessOutline />,
+          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
+        },
+        {
+          key: "shop-csi",
+          id: "header-shop-csi",
+          icon: <RiSurveyLine />,
+          label: (
+            <Link to="/manage/shop/csi">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shop_csi")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
+    {
+      key: "recent",
+      id: "header-recent",
+      icon: <ClockCircleFilled />,
+      label: t("menus.header.recent"),
+      children: recentItems.map((i, idx) => ({
+        key: idx,
+        id: `header-recent-${idx}`,
+        label: <Link to={i.url}>{i.label}</Link>
+      }))
+    },
+    {
+      key: "user",
+      id: "header-user",
+      icon: <UserOutlined />,
+      label: t("menus.currentuser.profile"),
+      children: [
+        {
+          key: "signout",
+          id: "header-signout",
+          icon: <FiLogOut />,
+          danger: true,
+          label: t("user.actions.signout"),
+          onClick: () => signOutStart()
+        },
+        {
+          key: "darkmode-toggle",
+          id: "header-darkmode-toggle",
+          label: darkMode ? t("user.actions.light_theme") : t("user.actions.dark_theme"),
+          icon: darkMode ? <FaSun /> : <FaMoon />,
+          onClick: handleDarkModeToggle
+        },
+        {
+          key: "help",
+          id: "header-help",
+          icon: <QuestionCircleFilled />,
+          label: t("menus.header.help"),
+          onClick: () => window.open("https://help.imex.online/", "_blank")
+        },
+        {
+          key: "remoteassist",
+          id: "header-remote-assist",
+          icon: <OneToOneOutlined />,
+          label: t("menus.header.remoteassist"),
+          children: [
+            ...(InstanceRenderManager({ imex: true, rome: false })
+              ? [
+                  {
+                    key: "rescue",
+                    id: "header-rescue",
+                    icon: <PlusCircleOutlined />,
+                    label: t("menus.header.rescueme"),
+                    onClick: () => window.open("https://imexrescue.com/", "_blank")
+                  }
+                ]
+              : []),
+            {
+              key: "rescue-zoho",
+              id: "header-rescue-zoho",
+              icon: <UsergroupAddOutlined />,
+              label: t("menus.header.rescuemezoho"),
+              onClick: () => window.open("https://join.zoho.com/", "_blank")
+            }
+          ]
+        },
+        {
+          key: "shiftclock",
+          id: "header-shiftclock",
+          icon: <GiPlayerTime />,
+          label: (
+            <Link to="/manage/shiftclock">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shiftclock")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "profile",
+          id: "header-profile",
+          icon: <UserOutlined />,
+          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
+        }
+      ]
+    }
+  ];
+};
+
+export default buildLeftMenuItems;
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -36,6 +36,7 @@ import ScheduleEventNote from "./schedule-event.note.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
+
 const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -64,7 +65,6 @@ export function ScheduleEventComponent({
  const notification = useNotification();
  const [form] = Form.useForm();
  const [popOverVisible, setPopOverVisible] = useState(false);
-
  const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
    variables: { id: event.job?.id },
    onCompleted: (data) => {
@@ -83,7 +83,6 @@ export function ScheduleEventComponent({
        });
      }
    },
-
    fetchPolicy: "network-only"
  });

@@ -115,7 +114,6 @@ export function ScheduleEventComponent({
          });
        }}
      />
-
      <Button onClick={() => handleCancel({ id: event.id })} disabled={event.arrived}>
        {t("appointments.actions.unblock")}
      </Button>
@@ -133,7 +131,6 @@ export function ScheduleEventComponent({
        }
      }
    });
-
    if (!res.errors) {
      notification["success"]({
        message: t("jobs.successes.converted")
@@ -180,7 +177,6 @@ export function ScheduleEventComponent({
        <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
          <FormDateTimePickerComponent disabled={event.ro_number} />
        </Form.Item>
-
        <Space wrap>
          <Button type="primary" onClick={() => form.submit()}>
            {t("general.actions.save")}
@@ -210,7 +206,6 @@ export function ScheduleEventComponent({
          <ScheduleEventColor event={event} />
        </Space>
      )}
-
      {event.job ? (
        <div>
          <DataLabel label={t("jobs.fields.ro_number")}>{(event.job && event.job.ro_number) || ""}</DataLabel>
@@ -371,7 +366,6 @@ export function ScheduleEventComponent({
            </Button>
          </Popover>
        )}
-
        {event.isintake ? (
          <Button
            disabled={event.arrived}
@@ -385,7 +379,9 @@ export function ScheduleEventComponent({
                  previousEvent: event.id,
                  color: event.color,
                  alt_transport: event.job && event.job.alt_transport,
-                  note: event.note
+                  note: event.note,
+                  scheduled_in: event.job && event.job.scheduled_in,
+                  scheduled_completion: event.job && event.job.scheduled_completion
                }
              });
            }}
@@ -426,27 +422,33 @@ export function ScheduleEventComponent({
    </div>
  );

+  // Adjust event color for dark mode if needed
+  const getEventBackground = () => {
+    if (event?.block) {
+      return "var(--event-block-bg)"; // Use a specific color for dark mode
+    }
+    const baseColor = event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)";
+    // Optionally adjust color for dark mode (e.g., lighten if too dark)
+    return baseColor;
+  };
+
  const RegularEvent = event.isintake ? (
    <Space
      wrap
      size="small"
      style={{
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+        backgroundColor: getEventBackground()
      }}
    >
      {event.note && <AlertFilled className="production-alert" />}
      <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
-
      <OwnerNameDisplay ownerObject={event.job} />
-
      {`${(event.job && event.job.v_model_yr) || ""} ${
        (event.job && event.job.v_make_desc) || ""
      } ${(event.job && event.job.v_model_desc) || ""}`}
-
      {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
        (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
      })`}
-
      {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
      {event?.job?.comment && `C: ${event.job.comment}`}
    </Space>
@@ -455,7 +457,7 @@ export function ScheduleEventComponent({
      style={{
        height: "100%",
        width: "100%",
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+        backgroundColor: getEventBackground()
      }}
    >
      <strong>{`${event.title || ""}`}</strong>
@@ -471,8 +473,7 @@ export function ScheduleEventComponent({
      style={{
        height: "100%",
        width: "100%",
-
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+        backgroundColor: getEventBackground()
      }}
    >
      {RegularEvent}
--- a/client/src/components/job-damage-visual/job-damage-visual.component.jsx
+++ b/client/src/components/job-damage-visual/job-damage-visual.component.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";

 const Car = ({ dmg1, dmg2 }) => {
@@ -8,6 +7,7 @@ const Car = ({ dmg1, dmg2 }) => {
    <div style={{ position: "relative", textAlign: "center" }}>
      {t("jobs.labels.cards.damage")}
      <svg
+        className="car-svg"
        style={{ left: 0, top: 0, width: "100%", height: "100%" }}
        id="svg166"
        version="1.1"
--- a/client/src/components/job-lifecycle/job-lifecycle.component.jsx
+++ b/client/src/components/job-lifecycle/job-lifecycle.component.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import dayjs from "../../utils/day";
 import axios from "axios";
 import { Badge, Card, Space, Table, Tag } from "antd";
@@ -6,24 +6,24 @@ import { gql, useQuery } from "@apollo/client";
 import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import { isEmpty } from "lodash";
 import { useTranslation } from "react-i18next";
-
 import "./job-lifecycle.styles.scss";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
-
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
-
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
+
 // show text on bar if text can fit
-export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
+export function JobLifecycleComponent({ bodyshop, job, statuses }) {
  const [loading, setLoading] = useState(true);
  const [lifecycleData, setLifecycleData] = useState(null);
  const { t } = useTranslation(); // Used for tracking external state changes.
@@ -79,7 +79,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
      title: t("job_lifecycle.columns.value"),
      dataIndex: "value",
      key: "value",
-      render: (text, record) => (
+      render: (text) => (
        <BlurWrapperComponent
          featureName="lifecycle"
          bypass
@@ -95,7 +95,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
      dataIndex: "start",
      key: "start",
      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
-      render: (text, record) => (
+      render: (text) => (
        <BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
          <span>{DateTimeFormatterFunction(text)}</span>
        </BlurWrapperComponent>
@@ -119,8 +119,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
        }
        return dayjs(a.end).unix() - dayjs(b.end).unix();
      },
-
-      render: (text, record) => (
+      render: (text) => (
        <BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
          <span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
        </BlurWrapperComponent>
@@ -170,7 +169,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
                    borderRadius: "5px",
                    borderWidth: "5px",
                    borderStyle: "solid",
-                    borderColor: "#f0f2f5",
+                    borderColor: "var(--bar-border-color)",
                    margin: 0,
                    padding: 0
                  }}
@@ -189,12 +188,10 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
                          alignItems: "center",
                          margin: 0,
                          padding: 0,
-
-                          borderTop: "1px solid #f0f2f5",
-                          borderBottom: "1px solid #f0f2f5",
-                          borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
-                          borderRight: isLast ? "1px solid #f0f2f5" : undefined,
-
+                          borderTop: "1px solid var(--bar-border-color)",
+                          borderBottom: "1px solid var(--bar-border-color)",
+                          borderLeft: isFirst ? "1px solid var(--bar-border-color)" : undefined,
+                          borderRight: isLast ? "1px solid var(--bar-border-color)" : undefined,
                          backgroundColor: key.color,
                          width: `${key.percentage}%`
                        }}
@@ -206,7 +203,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
                            <div>{key.roundedPercentage}</div>
                            <div
                              style={{
-                                backgroundColor: "#f0f2f5",
+                                backgroundColor: "var(--tag-wrapper-bg)",
                                borderRadius: "5px",
                                paddingRight: "2px",
                                paddingLeft: "2px",
@@ -230,8 +227,8 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
                        aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                        title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                        style={{
-                          backgroundColor: "#f0f2f5",
-                          color: "#000",
+                          backgroundColor: "var(--tag-wrapper-bg)",
+                          color: "var(--tag-wrapper-text)",
                          padding: "4px",
                          textAlign: "center"
                        }}
@@ -315,4 +312,5 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
    </Card>
  );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);
--- a/client/src/components/job-notes-pin-toggle/job-notes-pin-toggle.component.jsx
+++ b/client/src/components/job-notes-pin-toggle/job-notes-pin-toggle.component.jsx
@@ -0,0 +1,25 @@
+import { PushpinFilled, PushpinOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { UPDATE_NOTE } from "../../graphql/notes.queries";
+
+function JobNotesPinToggle({ note }) {
+  const [updateNote] = useMutation(UPDATE_NOTE);
+
+  const handlePinToggle = () => {
+    updateNote({
+      variables: {
+        noteId: note.id,
+        note: { pinned: !note.pinned }
+      },
+      refetchQueries: ["GET_JOB_BY_PK", "QUERY_JOB_CARD_DETAILS", "QUERY_PARTS_QUEUE_CARD_DETAILS"]
+    });
+  };
+
+  return note.pinned ? (
+    <PushpinFilled size="large" onClick={handlePinToggle} style={{ color: "gold" }} />
+  ) : (
+    <PushpinOutlined size="large" onClick={handlePinToggle} />
+  );
+}
+
+export default JobNotesPinToggle;
--- a/client/src/components/jobs-change-status/jobs-change-status.component.jsx
+++ b/client/src/components/jobs-change-status/jobs-change-status.component.jsx
@@ -1,16 +1,16 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, Dropdown } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -24,7 +24,6 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
  const { t } = useTranslation();

  const [availableStatuses, setAvailableStatuses] = useState([]);
-  const [otherStages, setOtherStages] = useState([]);
  const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
  const notification = useNotification();

@@ -32,7 +31,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
    mutationUpdateJobstatus({
      variables: { jobId: job.id, status: status }
    })
-      .then((r) => {
+      .then(() => {
        notification["success"]({ message: t("jobs.successes.save") });
        insertAuditTrail({
          jobid: job.id,
@@ -41,7 +40,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
        });
        // refetch();
      })
-      .catch((error) => {
+      .catch(() => {
        notification["error"]({ message: t("jobs.errors.saving") });
      });
  };
@@ -51,19 +50,14 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
    if (job && bodyshop) {
      if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status)) {
        setAvailableStatuses(bodyshop.md_ro_statuses.pre_production_statuses);
-        if (bodyshop.md_ro_statuses.production_statuses[0])
-          setOtherStages([bodyshop.md_ro_statuses.production_statuses[0]]);
      } else if (bodyshop.md_ro_statuses.production_statuses.includes(job.status)) {
        setAvailableStatuses(bodyshop.md_ro_statuses.production_statuses);
-        setOtherStages([bodyshop.md_ro_statuses.default_imported, bodyshop.md_ro_statuses.default_delivered]);
      } else if (bodyshop.md_ro_statuses.post_production_statuses.includes(job.status)) {
        setAvailableStatuses(
          bodyshop.md_ro_statuses.post_production_statuses.filter(
            (s) => s !== bodyshop.md_ro_statuses.default_invoiced && s !== bodyshop.md_ro_statuses.default_exported
          )
        );
-        if (bodyshop.md_ro_statuses.production_statuses[0])
-          setOtherStages([bodyshop.md_ro_statuses.production_statuses[0]]);
      } else {
        console.log("Status didn't match any restrictions. Allowing all status changes.");
        setAvailableStatuses(bodyshop.md_ro_statuses.statuses);
@@ -76,16 +70,7 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
      ...availableStatuses.map((item) => ({
        key: item,
        label: item
-      })),
-      ...(job.converted
-        ? [
-            { type: "divider" },
-            ...otherStages.map((item) => ({
-              key: item,
-              label: item
-            }))
-          ]
-        : [])
+      }))
    ],
    onClick: (e) => updateJobStatus(e.key)
  };
--- a/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
+++ b/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
@@ -1,5 +1,5 @@
+import { WarningOutlined } from "@ant-design/icons";
 import { Form, Select, Space, Tooltip } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -8,14 +8,13 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import LaborTypeFormItem from "../form-items-formatted/labor-type-form-item.component";
 import PartTypeFormItem from "../form-items-formatted/part-type-form-item.component";
 import ReadOnlyFormItem from "../form-items-formatted/read-only-form-item.component";
-import { WarningOutlined } from "@ant-design/icons";
 import "./jobs-close-lines.styles.scss";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -24,7 +23,7 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
  return (
    <div>
      <Form.List name={["joblines"]}>
-        {(fields, { add, remove, move }) => {
+        {(fields) => {
          return (
            <table className="jobs-close-table">
              <thead>
--- a/client/src/components/jobs-close-lines/jobs-close-lines.styles.scss
+++ b/client/src/components/jobs-close-lines/jobs-close-lines.styles.scss
@@ -6,7 +6,7 @@
  td {
    padding: 8px;
    text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--table-border-color);

    .ant-form-item {
      margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
  }

  tr:hover {
-    background-color: #f5f5f5;
+    background-color: var(--table-hover-bg);
  }
 }
--- a/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
+++ b/client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx
@@ -1,13 +1,13 @@
 import { Form, Statistic, Tooltip } from "antd";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import dayjs from "../../utils/day";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
-import dayjs from "../../utils/day";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -43,14 +43,14 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
        </Form.Item>
        <Form.Item label={t("jobs.fields.estimate_sent_approval")} name="estimate_sent_approval">
          <DateTimePicker
-            disabled={true}
+            disabled={jobRO}
            value={job.estimate_sent_approval ? dayjs(job.estimate_sent_approval) : null}
            placeholder={t("general.labels.na")}
          />
        </Form.Item>
        <Form.Item label={t("jobs.fields.estimate_approved")} name="estimate_approved">
          <DateTimePicker
-            disabled={true}
+            disabled={jobRO}
            value={job.estimate_approved ? dayjs(job.estimate_approved) : null}
            placeholder={t("general.labels.na")}
          />
@@ -63,7 +63,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
        </Form.Item>
        <Tooltip title={t("jobs.labels.scheduledinchange")}>
          <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
-            <DateTimePicker disabled={true || jobRO} />
+            <DateTimePicker disabled={true} />
          </Form.Item>
        </Tooltip>
        <Form.Item label={t("jobs.fields.actual_in")} name="actual_in">
@@ -110,16 +110,16 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
      </FormRow>
      <FormRow header={t("jobs.forms.admindates")}>
        <Form.Item label={t("jobs.fields.date_invoiced")} name="date_invoiced">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.date_exported")} name="date_exported">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.date_void")} name="date_void">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
        </Form.Item>
        <Form.Item label={t("jobs.fields.date_lost_sale")} name="date_lost_sale">
-          <DateTimePicker disabled={true || jobRO} />
+          <DateTimePicker disabled={true} />
        </Form.Item>
      </FormRow>
    </div>
--- 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
@@ -673,7 +673,9 @@ export function JobsDetailHeaderActions({
          context: {
            jobId: job.id,
            job: job,
-            alt_transport: job.alt_transport
+            alt_transport: job.alt_transport,
+            scheduled_in: job.scheduled_in,
+            scheduled_completion: job.scheduled_completion
          }
        });
      }
@@ -1090,11 +1092,7 @@ export function JobsDetailHeaderActions({
            {t("menus.jobsactions.deletejob")}
          </Popconfirm>
        ) : (
-          <Popconfirm
-            title={t("jobs.labels.deletewatchers")}
-            onClick={(e) => e.stopPropagation()}
-            showCancel={false}
-          >
+          <Popconfirm title={t("jobs.labels.deletewatchers")} onClick={(e) => e.stopPropagation()} showCancel={false}>
            {t("menus.jobsactions.deletejob")}
          </Popconfirm>
        )
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -23,6 +23,7 @@ import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import JobsRelatedRos from "../jobs-related-ros/jobs-related-ros.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+import PinnedJobNotes from "../pinned-job-notes/pinned-job-notes.component.jsx";
 import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
@@ -102,250 +103,257 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail })
  };

  return (
-    <Row gutter={[16, 16]} style={{ alignItems: "stretch" }}>
-      <Col {...colSpan}>
-        <Card title={"Job Status"} style={{ height: "100%" }}>
-          <div>
-            <DataLabel label={t("jobs.fields.status")}>
+    <>
+      <Row gutter={[16, 16]} style={{ alignItems: "stretch" }}>
+        <Col {...colSpan}>
+          <Card title={"Job Status"} style={{ height: "100%" }}>
+            <div>
+              <DataLabel label={t("jobs.fields.status")}>
+                <Space wrap>
+                  {job.status}
+                  {job.inproduction && <Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>}
+                  {job.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+                  {job.iouparent && (
+                    <Link to={`/manage/jobs/${job.iouparent}`}>
+                      <Tooltip title={t("jobs.labels.iou")}>
+                        <BranchesOutlined style={{ color: "orangered" }} />
+                      </Tooltip>
+                    </Link>
+                  )}
+                  {job.production_vars && job.production_vars.alert ? (
+                    <ExclamationCircleFilled className="production-alert" />
+                  ) : null}
+                  {job.status === bodyshop.md_ro_statuses.default_scheduled && job.scheduled_in ? (
+                    <Tag>
+                      <Link to={`/manage/schedule?date=${dayjs(job.scheduled_in).format("YYYY-MM-DD")}`}>
+                        <DateTimeFormatter>{job.scheduled_in}</DateTimeFormatter>
+                      </Link>
+                    </Tag>
+                  ) : null}
+                </Space>
+              </DataLabel>
+              <DataLabel label={t("jobs.fields.comment")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+                <ProductionListColumnComment record={job} />
+              </DataLabel>
+              <DataLabel label={t("jobs.fields.ins_co_nm_short")}>{job.ins_co_nm}</DataLabel>
+              <DataLabel label={t("jobs.fields.clm_no")}>{job.clm_no}</DataLabel>
+              <DataLabel label={t("jobs.fields.ponumber")} hideIfNull>
+                {job.po_number}
+              </DataLabel>
+              <DataLabel label={t("jobs.fields.repairtotal")}>
+                <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
+                <span style={{ margin: "0rem .5rem" }}>/</span>
+                <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
+              </DataLabel>
+              <DataLabel label={t("jobs.fields.alt_transport")}>
+                {job.alt_transport}
+                <JobAltTransportChange job={job} />
+              </DataLabel>
+              {job?.cccontracts?.length > 0 && (
+                <DataLabel label={t("jobs.labels.contracts")}>
+                  {job.cccontracts.map((c, index) => (
+                    <Space key={c.id} wrap>
+                      <Link to={`/manage/courtesycars/contracts/${c.id}`}>
+                        {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
+                        {index !== job.cccontracts.length - 1 ? "," : null}
+                      </Link>
+                    </Space>
+                  ))}
+                </DataLabel>
+              )}
+              <DataLabel label={t("jobs.fields.production_vars.note")}>
+                <ProductionListColumnProductionNote record={job} />
+              </DataLabel>
+              <DataLabel label={t("jobs.fields.estimate_sent_approval")}>
+                <Space>
+                  <Checkbox
+                    checked={!!job.estimate_sent_approval}
+                    onChange={(e) => handleCheckboxChange("estimate_sent_approval", e.target.checked)}
+                    disabled={disabled}
+                  >
+                    {job.estimate_sent_approval && (
+                      <span style={{ color: "#888" }}>
+                        <DateTimeFormatter>{job.estimate_sent_approval}</DateTimeFormatter>
+                      </span>
+                    )}
+                  </Checkbox>
+                </Space>
+              </DataLabel>
+              <DataLabel label={t("jobs.fields.estimate_approved")}>
+                <Space>
+                  <Checkbox
+                    checked={!!job.estimate_approved}
+                    onChange={(e) => handleCheckboxChange("estimate_approved", e.target.checked)}
+                    disabled={disabled}
+                  >
+                    {job.estimate_approved && (
+                      <span style={{ color: "#888" }}>
+                        <DateTimeFormatter>{job.estimate_approved}</DateTimeFormatter>
+                      </span>
+                    )}
+                  </Checkbox>
+                </Space>
+              </DataLabel>
              <Space wrap>
-                {job.status}
-                {job.inproduction && <Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>}
-                {job.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
-                {job.iouparent && (
-                  <Link to={`/manage/jobs/${job.iouparent}`}>
-                    <Tooltip title={t("jobs.labels.iou")}>
-                      <BranchesOutlined style={{ color: "orangered" }} />
-                    </Tooltip>
-                  </Link>
-                )}
-                {job.production_vars && job.production_vars.alert ? (
-                  <ExclamationCircleFilled className="production-alert" />
-                ) : null}
-                {job.status === bodyshop.md_ro_statuses.default_scheduled && job.scheduled_in ? (
-                  <Tag>
-                    <Link to={`/manage/schedule?date=${dayjs(job.scheduled_in).format("YYYY-MM-DD")}`}>
-                      <DateTimeFormatter>{job.scheduled_in}</DateTimeFormatter>
-                    </Link>
+                {job.special_coverage_policy && (
+                  <Tag color="tomato">
+                    <Space>
+                      <WarningFilled />
+                      <span>{t("jobs.labels.specialcoveragepolicy")}</span>
+                    </Space>
                  </Tag>
-                ) : null}
+                )}
+                {job.ca_gst_registrant && (
+                  <Tag color="geekblue">
+                    <Space>
+                      <WarningFilled />
+                      <span>{t("jobs.fields.ca_gst_registrant")}</span>
+                    </Space>
+                  </Tag>
+                )}
+                {job.hit_and_run && (
+                  <Tag color="green">
+                    <Space>
+                      <WarningFilled />
+                      <span>{t("jobs.fields.hit_and_run")}</span>
+                    </Space>
+                  </Tag>
+                )}
              </Space>
-            </DataLabel>
-            <DataLabel label={t("jobs.fields.comment")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-              <ProductionListColumnComment record={job} />
-            </DataLabel>
-            <DataLabel label={t("jobs.fields.ins_co_nm_short")}>{job.ins_co_nm}</DataLabel>
-            <DataLabel label={t("jobs.fields.clm_no")}>{job.clm_no}</DataLabel>
-            <DataLabel label={t("jobs.fields.ponumber")} hideIfNull>
-              {job.po_number}
-            </DataLabel>
-            <DataLabel label={t("jobs.fields.repairtotal")}>
-              <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
-              <span style={{ margin: "0rem .5rem" }}>/</span>
-              <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
-            </DataLabel>
-            <DataLabel label={t("jobs.fields.alt_transport")}>
-              {job.alt_transport}
-              <JobAltTransportChange job={job} />
-            </DataLabel>
-            {job?.cccontracts?.length > 0 && (
-              <DataLabel label={t("jobs.labels.contracts")}>
-                {job.cccontracts.map((c, index) => (
-                  <Space key={c.id} wrap>
-                    <Link to={`/manage/courtesycars/contracts/${c.id}`}>
-                      {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
-                      {index !== job.cccontracts.length - 1 ? "," : null}
-                    </Link>
-                  </Space>
-                ))}
-              </DataLabel>
-            )}
-            <DataLabel label={t("jobs.fields.production_vars.note")}>
-              <ProductionListColumnProductionNote record={job} />
-            </DataLabel>
-            <DataLabel label={t("jobs.fields.estimate_sent_approval")}>
-              <Space>
-                <Checkbox
-                  checked={!!job.estimate_sent_approval}
-                  onChange={(e) => handleCheckboxChange("estimate_sent_approval", e.target.checked)}
-                  disabled={disabled}
-                >
-                  {job.estimate_sent_approval && (
-                    <span style={{ color: "#888" }}>
-                      <DateTimeFormatter>{job.estimate_sent_approval}</DateTimeFormatter>
-                    </span>
-                  )}
-                </Checkbox>
-              </Space>
-            </DataLabel>
-            <DataLabel label={t("jobs.fields.estimate_approved")}>
-              <Space>
-                <Checkbox
-                  checked={!!job.estimate_approved}
-                  onChange={(e) => handleCheckboxChange("estimate_approved", e.target.checked)}
-                  disabled={disabled}
-                >
-                  {job.estimate_approved && (
-                    <span style={{ color: "#888" }}>
-                      <DateTimeFormatter>{job.estimate_approved}</DateTimeFormatter>
-                    </span>
-                  )}
-                </Checkbox>
-              </Space>
-            </DataLabel>
-            <Space wrap>
-              {job.special_coverage_policy && (
-                <Tag color="tomato">
-                  <Space>
-                    <WarningFilled />
-                    <span>{t("jobs.labels.specialcoveragepolicy")}</span>
-                  </Space>
-                </Tag>
-              )}
-              {job.ca_gst_registrant && (
-                <Tag color="geekblue">
-                  <Space>
-                    <WarningFilled />
-                    <span>{t("jobs.fields.ca_gst_registrant")}</span>
-                  </Space>
-                </Tag>
-              )}
-              {job.hit_and_run && (
-                <Tag color="green">
-                  <Space>
-                    <WarningFilled />
-                    <span>{t("jobs.fields.hit_and_run")}</span>
-                  </Space>
-                </Tag>
-              )}
-            </Space>
-          </div>
-        </Card>
-      </Col>
-      <Col {...colSpan}>
-        <Card
-          style={{ height: "100%" }}
-          title={
-            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")}>
-              {disabled ? (
-                <PhoneNumberFormatter>{job.ownr_ph1}</PhoneNumberFormatter>
-              ) : (
-                <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
-              )}
-            </DataLabel>
-            <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
-              {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 || ""} ${
-                job.ownr_city || ""
-              } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
-            </DataLabel>
-            <DataLabel key="4" label={t("owners.fields.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")}>
-                {job.owner?.tax_number || ""}
-              </DataLabel>
-            )}
-            <DataLabel label={t("owners.fields.note")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-              {job.owner?.note || ""}
-            </DataLabel>
-          </div>
-        </Card>
-      </Col>
-      <Col {...colSpan}>
-        <Card
-          style={{ height: "100%" }}
-          title={
-            job.vehicle ? (
+            </div>
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card
+            style={{ height: "100%" }}
+            title={
              disabled ? (
-                <>{vehicleTitle.length > 0 ? vehicleTitle : t("vehicles.labels.novehinfo")} </>
+                <>{ownerTitle.length > 0 ? ownerTitle : t("owner.labels.noownerinfo")}</>
              ) : (
-                <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
-                  {vehicleTitle.length > 0 ? vehicleTitle : t("vehicles.labels.novehinfo")}
+                <Link to={`/manage/owners/${job.owner.id}`}>
+                  {ownerTitle.length > 0 ? ownerTitle : t("owner.labels.noownerinfo")}
                </Link>
              )
-            ) : (
-              <span></span>
-            )
-          }
-        >
-          <div>
-            <DataLabel key="2" label={t("vehicles.fields.plate_no")}>
-              {`${job.plate_no || t("general.labels.na")} (${`${job.plate_st || t("general.labels.na")}`})`}
-            </DataLabel>
-            <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
-              <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} disabled={disabled} />
-            </DataLabel>
-            {job.vehicle && job.vehicle.notes && (
-              <DataLabel
-                label={t("vehicles.fields.notes")}
-                valueStyle={{ whiteSpace: "pre-wrap" }}
-                valueClassName={notesClamped ? "clamp" : ""}
-                onValueClick={() => setNotesClamped(!notesClamped)}
-              >
-                {job.vehicle.notes}
+            }
+          >
+            <div>
+              <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
+                {disabled ? (
+                  <PhoneNumberFormatter>{job.ownr_ph1}</PhoneNumberFormatter>
+                ) : (
+                  <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
+                )}
              </DataLabel>
-            )}
-            {job.vehicle && job.vehicle.v_paint_codes && (
-              <DataLabel label={t("vehicles.fields.v_paint_codes", { number: "" })}>
-                <span style={{ whiteSpace: "pre" }}>
-                  {Object.keys(job.vehicle.v_paint_codes)
-                    .filter(
-                      (key) =>
-                        job.vehicle.v_paint_codes[key] !== "" &&
-                        job.vehicle.v_paint_codes[key] !== null &&
-                        job.vehicle.v_paint_codes[key] !== undefined
-                    )
-                    .map((key, idx) => (
-                      <Tag key={idx}>{job.vehicle.v_paint_codes[key]}</Tag>
-                    ))}
-                </span>
+              <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
+                {disabled ? (
+                  <PhoneNumberFormatter>{job.ownr_ph2}</PhoneNumberFormatter>
+                ) : (
+                  <ChatOpenButton phone={job.ownr_ph2} jobid={job.id} />
+                )}
              </DataLabel>
-            )}
-          </div>
-        </Card>
-      </Col>
-      <Col {...colSpan}>
-        <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
-          <div>
-            <JobEmployeeAssignments job={job} />
-            <Divider style={{ margin: ".5rem" }} />
-            <DataLabel label={t("jobs.labels.labor_hrs")}>
-              {bodyHrs.toFixed(1)} / {refinishHrs.toFixed(1)} / {(bodyHrs + refinishHrs).toFixed(1)}
-            </DataLabel>
-          </div>
-        </Card>
-      </Col>
-    </Row>
+              <DataLabel key="3" label={t("owners.fields.address")}>
+                {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
+                  job.ownr_city || ""
+                } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
+              </DataLabel>
+              <DataLabel key="4" label={t("owners.fields.ownr_ea")}>
+                {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")}>
+                  {job.owner?.tax_number || ""}
+                </DataLabel>
+              )}
+              <DataLabel label={t("owners.fields.note")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+                {job.owner?.note || ""}
+              </DataLabel>
+            </div>
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card
+            style={{ height: "100%" }}
+            title={
+              job.vehicle ? (
+                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>
+              )
+            }
+          >
+            <div>
+              <DataLabel key="2" label={t("vehicles.fields.plate_no")}>
+                {`${job.plate_no || t("general.labels.na")} (${`${job.plate_st || t("general.labels.na")}`})`}
+              </DataLabel>
+              <DataLabel key="4" label={t("vehicles.fields.v_vin")}>
+                <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} disabled={disabled} />
+              </DataLabel>
+              {job.vehicle && job.vehicle.notes && (
+                <DataLabel
+                  label={t("vehicles.fields.notes")}
+                  valueStyle={{ whiteSpace: "pre-wrap" }}
+                  valueClassName={notesClamped ? "clamp" : ""}
+                  onValueClick={() => setNotesClamped(!notesClamped)}
+                >
+                  {job.vehicle.notes}
+                </DataLabel>
+              )}
+              {job.vehicle && job.vehicle.v_paint_codes && (
+                <DataLabel label={t("vehicles.fields.v_paint_codes", { number: "" })}>
+                  <span style={{ whiteSpace: "pre" }}>
+                    {Object.keys(job.vehicle.v_paint_codes)
+                      .filter(
+                        (key) =>
+                          job.vehicle.v_paint_codes[key] !== "" &&
+                          job.vehicle.v_paint_codes[key] !== null &&
+                          job.vehicle.v_paint_codes[key] !== undefined
+                      )
+                      .map((key, idx) => (
+                        <Tag key={idx}>{job.vehicle.v_paint_codes[key]}</Tag>
+                      ))}
+                  </span>
+                </DataLabel>
+              )}
+            </div>
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card
+            style={{ height: "100%" }}
+            title={<span id="job-employee-assignments-title">{t("jobs.labels.employeeassignments")}</span>}
+            id={"job-employee-assignments"}
+          >
+            <div>
+              <JobEmployeeAssignments job={job} />
+              <Divider style={{ margin: ".5rem" }} />
+              <DataLabel label={t("jobs.labels.labor_hrs")}>
+                {bodyHrs.toFixed(1)} / {refinishHrs.toFixed(1)} / {(bodyHrs + refinishHrs).toFixed(1)}
+              </DataLabel>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+      <PinnedJobNotes job={job} />
+    </>
  );
 }

--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx
@@ -3,7 +3,6 @@ import axios from "axios";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import cleanAxios from "../../utils/CleanAxios";
 import formatBytes from "../../utils/formatbytes";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,7 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -26,7 +25,7 @@ const mapDispatchToProps = (dispatch) => ({

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

-export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier, jobId }) {
+export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier, jobId }) {
  const { t } = useTranslation();
  const [download, setDownload] = useState(null);
  const [loading, setLoading] = useState(false);
@@ -46,32 +45,40 @@ export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, i
  }

  function standardMediaDownload(bufferData) {
-    const a = document.createElement("a");
-    const url = window.URL.createObjectURL(new Blob([bufferData]));
-    a.href = url;
-    a.download = `${identifier || "documents"}.zip`;
-    a.click();
+    try {
+      const a = document.createElement("a");
+      const url = window.URL.createObjectURL(new Blob([bufferData]));
+      a.href = url;
+      a.download = `${identifier || "documents"}.zip`;
+      a.click();
+    } catch (error) {
+      setLoading(false);
+      setDownload(null);
+    }
  }

  const handleDownload = async () => {
    logImEXEvent("jobs_documents_download");
    setLoading(true);
-    const zipUrl = await axios({
-      url: "/media/imgproxy/download",
-      method: "POST",
-      data: { jobId, documentids: imagesToDownload.map((_) => _.id) }
-    });
+    try {
+      const response = await axios({
+        url: "/media/imgproxy/download",
+        method: "POST",
+        responseType: "blob",
+        data: { jobId, documentids: imagesToDownload.map((_) => _.id) },
+        onDownloadProgress: downloadProgress
+      });

-    const theDownloadedZip = await cleanAxios({
-      url: zipUrl.data.url,
-      method: "GET",
-      responseType: "arraybuffer",
-      onDownloadProgress: downloadProgress
-    });
-    setLoading(false);
-    setDownload(null);
+      setLoading(false);
+      setDownload(null);

-    standardMediaDownload(theDownloadedZip.data);
+      // Use the response data (Blob) to trigger download
+      standardMediaDownload(response.data);
+    } catch (error) {
+      setLoading(false);
+      setDownload(null);
+      // handle error (optional)
+    }
  };

  return (
--- a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
@@ -46,8 +46,8 @@ function JobsDocumentsImgproxyComponent({
  const [modalState, setModalState] = useState({ open: false, index: 0 });

  const fetchThumbnails = useCallback(() => {
-    fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId });
-  }, [jobId, setGalleryImages]);
+    fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId, billId });
+  }, [jobId, billId, setGalleryImages]);

  useEffect(() => {
    if (data) {
@@ -98,7 +98,13 @@ function JobsDocumentsImgproxyComponent({
              jobId={jobId}
              totalSize={totalSize}
              billId={billId}
-              callbackAfterUpload={billsCallback || fetchThumbnails || refetch}
+              callbackAfterUpload={
+                billsCallback ||
+                function () {
+                  isFunction(refetch) && refetch();
+                  isFunction(fetchThumbnails) && fetchThumbnails();
+                }
+              }
              ignoreSizeLimit={ignoreSizeLimit}
            />
          </Card>
@@ -202,8 +208,8 @@ function JobsDocumentsImgproxyComponent({

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

-export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
-  const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
+export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, billId, imagesOnly }) => {
+  const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId, billid: billId });
  const documents = result.data.reduce(
    (acc, value) => {
      if (value.type.startsWith("image")) {
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -20,7 +20,7 @@ const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -203,6 +203,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {

  return (
    <Card
+      id="all-jobs-list"
+      title={t("titles.bc.jobs-all")}
      extra={
        <Space wrap>
          {search.search && (
@@ -256,6 +258,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
        rowKey="id"
        dataSource={search?.search ? openSearchResults : jobs}
        onChange={handleTableChange}
+        id="all-jobs-list-table"
      />
    </Card>
  );
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -2,7 +2,7 @@ import { BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined, SyncOut
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -22,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});

 export function JobsList({ bodyshop }) {
  const searchParams = queryString.parse(useLocation().search);
@@ -342,13 +342,14 @@ export function JobsList({ bodyshop }) {
          type: "radio"
        }}
        onChange={handleTableChange}
-        onRow={(record, rowIndex) => {
+        onRow={(record) => {
          return {
-            onClick: (event) => {
+            onClick: () => {
              handleOnRowClick(record);
            }
          };
        }}
+        id="active-jobs-list-table"
      />
    </Card>
  );
--- a/client/src/components/jobs-notes/jobs.notes.component.jsx
+++ b/client/src/components/jobs-notes/jobs.notes.component.jsx
@@ -12,6 +12,7 @@ import useLocalStorage from "../../utils/useLocalStorage";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import JobNotesPinToggle from "../job-notes-pin-toggle/job-notes-pin-toggle.component";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly
@@ -47,6 +48,9 @@ export function JobNotesComponent({
      key: "icons",
      width: 80,
      filteredValue: filter?.icons || null,
+      defaultSortOrder: "desc",
+      multiple: 1,
+      sorter: (a, b) => a.pinned - b.pinned,
      filters: [
        {
          text: t("notes.labels.usernotes"),
@@ -63,6 +67,7 @@ export function JobNotesComponent({
          {record.critical ? <WarningFilled style={{ margin: 4, color: "red" }} /> : null}
          {record.private ? <EyeInvisibleFilled style={{ margin: 4 }} /> : null}
          {record.audit ? <AuditOutlined style={{ margin: 4 }} /> : null}
+          <JobNotesPinToggle note={record} />
        </span>
      )
    },
@@ -100,6 +105,7 @@ export function JobNotesComponent({
      dataIndex: "updated_at",
      key: "updated_at",
      defaultSortOrder: "descend",
+      multiple: 2,
      width: 200,
      sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
      render: (text, record) => <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
--- a/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
@@ -23,17 +23,22 @@ export function NoteUpsertModalComponent({ form, noteUpsertModal }) {
  return (
    <>
      <Row gutter={[16, 16]}>
-        <Col span={8}>
+        <Col span={6}>
          <Form.Item label={t("notes.fields.critical")} name="critical" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Col>
-        <Col span={8}>
+        <Col span={6}>
          <Form.Item label={t("notes.fields.private")} name="private" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Col>
-        <Col span={8}>
+        <Col span={6}>
+          <Form.Item label={t("notes.fields.pinned")} name="pinned" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Col>
+        <Col span={6}>
          <Form.Item label={t("notes.fields.type")} name="type" initialValue="general">
            <Select
              options={[
--- a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
+++ b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
@@ -1,10 +1,12 @@
 import { useMutation } from "@apollo/client";
 import { Form, Modal } from "antd";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries.js";
 import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
@@ -12,7 +14,6 @@ import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import NoteUpsertModalComponent from "./note-upsert-modal.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -41,7 +42,7 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
  const { refetch } = actions;

  const [form] = Form.useForm();
-
+  
  useEffect(() => {
    //Required to prevent infinite looping.
    if (existingNote && open) {
@@ -65,8 +66,9 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
        variables: {
          noteId: existingNote.id,
          note: values
-        }
-      }).then((r) => {
+        },
+        refetchQueries: ["GET_JOB_BY_PK", "QUERY_JOB_CARD_DETAILS", "QUERY_PARTS_QUEUE_CARD_DETAILS"]
+      }).then(() => {
        notification["success"]({
          message: t("notes.successes.updated")
        });
@@ -86,6 +88,33 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
        variables: {
          noteInput: [{ ...values, jobid: jobId, created_by: currentUser.email }]
        },
+        update(cache, { data: { updateNote: updatedNote } }) {
+          try {
+            const existingJob = cache.readQuery({
+              query: GET_JOB_BY_PK,
+              variables: { id: jobId }
+            });
+
+            if (existingJob) {
+              cache.writeQuery({
+                query: GET_JOB_BY_PK,
+                variables: { id: jobId },
+                data: {
+                  ...existingJob,
+                  job: {
+                    ...existingJob.job,
+                    notes: updatedNote.pinned
+                      ? [updatedNote, ...existingJob.job.notes]
+                      : existingJob.job.notes.filter((n) => n.id !== updatedNote.id)
+                  }
+                }
+              });
+            }
+          } catch (error) {
+            // Cache miss is okay, query hasn't been executed yet
+            console.log("Cache miss for GET_JOB_BY_PK");
+          }
+        },
        refetchQueries: ["QUERY_NOTES_BY_JOB_PK"]
      });

--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -131,4 +131,6 @@ const NotificationCenterComponent = forwardRef(
  }
 );

+NotificationCenterComponent.displayName = "NotificationCenterComponent";
+
 export default NotificationCenterComponent;
--- a/client/src/components/notification-center/notification-center.styles.scss
+++ b/client/src/components/notification-center/notification-center.styles.scss
@@ -4,9 +4,9 @@
  right: 0;
  width: 400px;
  max-width: 400px;
-  background: #fff;
-  color: rgba(0, 0, 0, 0.85);
-  border: 1px solid #d9d9d9;
+  background: var(--notification-bg);
+  color: var(--notification-text);
+  border: 1px solid var(--notification-border);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
  z-index: 1000;
@@ -19,23 +19,22 @@

  .notification-header {
    padding: 4px 16px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--notification-header-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
-    background: #fafafa;
+    background: var(--notification-header-bg);

    h3 {
      margin: 0;
      font-size: 14px;
-      color: rgba(0, 0, 0, 0.85);
+      color: var(--notification-header-text);
    }

    .notification-controls {
      display: flex;
      align-items: center;
      gap: 8px;
-
      // Styles for the eye icon and switch (custom classes)
      .notification-toggle {
        align-items: center; // Ensure vertical alignment
@@ -43,7 +42,7 @@

      .notification-toggle-icon {
        font-size: 14px;
-        color: #1677ff;
+        color: var(--notification-toggle-icon);
        vertical-align: middle;
      }

@@ -59,7 +58,8 @@
          }

          &.ant-switch-checked {
-            background-color: #1677ff;
+            background-color: var(--notification-switch-bg);
+
            .ant-switch-handle {
              left: calc(100% - 14px);
            }
@@ -70,37 +70,37 @@
      // Styles for the "Mark All Read" button (restore original link button style)
      .ant-btn-link {
        padding: 0;
-        color: #1677ff;
+        color: var(--notification-btn-link);

        &:hover {
-          color: #69b1ff;
+          color: var(--notification-btn-link-hover);
        }

        &:disabled {
-          color: rgba(0, 0, 0, 0.25);
+          color: var(--notification-btn-link-disabled);
          cursor: not-allowed;
        }

        &.active {
-          color: #0958d9;
+          color: var(--notification-btn-link-active);
        }
      }
    }
  }

  .notification-read {
-    background: #fff;
-    color: rgba(0, 0, 0, 0.65);
+    background: var(--notification-read-bg);
+    color: var(--notification-read-text);
  }

  .notification-unread {
-    background: #f5f5f5;
-    color: rgba(0, 0, 0, 0.85);
+    background: var(--notification-unread-bg);
+    color: var(--notification-unread-text);
  }

  .notification-item {
    padding: 12px 16px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--notification-header-border);
    display: block;
    overflow: visible;
    width: 100%;
@@ -108,7 +108,7 @@
    cursor: pointer;

    &:hover {
-      background: #fafafa;
+      background: var(--notification-item-hover-bg);
    }

    .notification-content {
@@ -125,7 +125,7 @@

      .ro-number {
        margin: 0;
-        color: #1677ff;
+        color: var(--notification-ro-number);
        flex-shrink: 0;
        white-space: nowrap;
      }
@@ -133,7 +133,7 @@
      .relative-time {
        margin: 0;
        font-size: 12px;
-        color: rgba(0, 0, 0, 0.45);
+        color: var(--notification-relative-time);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: auto;
@@ -164,12 +164,12 @@

  .ant-alert {
    margin: 8px;
-    background: #fff1f0;
-    color: rgba(0, 0, 0, 0.85);
-    border: 1px solid #ffa39e;
+    background: var(--alert-bg);
+    color: var(--alert-text);
+    border: 1px solid var(--alert-border);

    .ant-alert-message {
-      color: #ff4d4f;
+      color: var(--alert-message);
    }
  }
 }
--- a/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
+++ b/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
@@ -16,10 +16,10 @@ import { useNotification } from "../../contexts/Notifications/notificationContex

 const { confirm } = Modal;

-const openNotificationWithIcon = (type, t, notification) => {
+const openNotificationWithIcon = (type, t, notification, message) => {
  notification[type]({
    message: t("job_payments.notifications.error.title"),
-    description: t("job_payments.notifications.error.description")
+    description: t("job_payments.notifications.error.description", { message: message || "Unknown error." })
  });
 };

@@ -99,7 +99,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
        });

        if (refundResponse.data.status < 0) {
-          openNotificationWithIcon("error", t, notification);
+          openNotificationWithIcon("error", t, notification, refundResponse.data.message);
          return;
        }

--- a/client/src/components/pinned-job-notes/pinned-job-notes.component.jsx
+++ b/client/src/components/pinned-job-notes/pinned-job-notes.component.jsx
@@ -0,0 +1,30 @@
+import { Card, Divider, Space } from "antd";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import JobNotesPinToggle from "../job-notes-pin-toggle/job-notes-pin-toggle.component";
+
+function PinnedJobNotes({ job }) {
+  const { t } = useTranslation();
+
+  const pinnedNotes = useMemo(() => {
+    return job?.notes?.filter((note) => note.pinned); //This will be typically filtered, but adding this to maximize flexibility of the component.
+  }, [job.notes]);
+
+  return pinnedNotes?.length ? (
+    <>
+      <Divider />
+      <Space direction="vertical" style={{ width: "100%" }}>
+        {pinnedNotes?.map((note) => (
+          <Card
+            key={note.id}
+            title={`${t("notes.labels.pinned_note")} - ${t(`notes.fields.types.${note.type}`)}`}
+            extra={<JobNotesPinToggle note={note} />}
+          >
+            {note.text}
+          </Card>
+        ))}
+      </Space>
+    </>
+  ) : null;
+}
+export default PinnedJobNotes;
--- a/client/src/components/production-board-kanban/production-board-kanban-card-color-legend.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban-card-color-legend.component.jsx
@@ -1,26 +1,29 @@
 import { Col, List, Space, Typography } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";

 const CardColorLegend = ({ bodyshop }) => {
  const { t } = useTranslation();
  const data = bodyshop.ssbuckets.map((bucket) => {
-    let color = { r: 255, g: 255, b: 255 };
-
+    let color = { r: 255, g: 255, b: 255, a: 1 }; // Default to white with full opacity
    if (bucket.color) {
      color = bucket.color;
-
      if (bucket.color.rgb) {
-        color = bucket.color.rgb;
+        color = { ...bucket.color.rgb, a: bucket.color.a || 1 };
      }
    }
-
    return {
      label: bucket.label,
      color
    };
  });

+  const getBackgroundColor = (color) => {
+    // Return dynamic color if valid, otherwise use fallback
+    return color && color.r !== undefined && color.g !== undefined && color.b !== undefined
+      ? `rgba(${color.r},${color.g},${color.b},${color.a || 1})`
+      : "var(--legend-bg-fallback)";
+  };
+
  return (
    <Col>
      <Typography>{t("production.labels.legend")}</Typography>
@@ -36,7 +39,7 @@ const CardColorLegend = ({ bodyshop }) => {
                style={{
                  width: "1.5rem",
                  aspectRatio: "1/1",
-                  backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`
+                  backgroundColor: getBackgroundColor(item.color)
                }}
              ></div>
              <div>{item.label}</div>
--- a/client/src/components/production-board-kanban/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban-card.component.jsx
@@ -11,13 +11,10 @@ import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-
 import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
-
 import dayjs from "../../utils/day";
-
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
@@ -25,11 +22,25 @@ import { PiMicrosoftTeamsLogo } from "react-icons/pi";

 const cardColor = (ssbuckets, totalHrs) => {
  const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
-  return bucket && bucket.color ? bucket.color.rgb || bucket.color : { r: 255, g: 255, b: 255 };
+  return bucket && bucket.color
+    ? bucket.color.rgb || bucket.color
+    : {
+        r: 255,
+        g: 255,
+        b: 255,
+        a: 1,
+        fallback: "var(--card-bg-fallback)"
+      };
 };

-const getContrastYIQ = (bgColor) =>
-  (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white";
+const getContrastYIQ = (bgColor, isDarkMode = document.documentElement.getAttribute("data-theme") === "dark") => {
+  // Use fallback if bgColor is invalid
+  if (!bgColor || bgColor.fallback) return isDarkMode ? "var(--card-text-fallback)" : "black";
+  // Calculate luminance for contrast
+  const luminance = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
+  // Adjust threshold for dark mode to ensure readable text
+  return luminance >= (isDarkMode ? 150 : 128) ? "black" : isDarkMode ? "var(--card-text-fallback)" : "white";
+};

 const findEmployeeById = (employees, id) => employees.find((e) => e.id === id);

@@ -44,6 +55,8 @@ const EllipsesToolTip = React.memo(({ title, children, kiosk }) => {
  );
 });

+EllipsesToolTip.displayName = "EllipsesToolTip";
+
 const OwnerNameToolTip = ({ metadata, cardSettings }) =>
  cardSettings?.ownr_nm && (
    <Col span={24}>
@@ -214,9 +227,8 @@ const EstimatorToolTip = ({ metadata, cardSettings }) => {
  );
 };

-const SubtotalTooltip = ({ metadata, cardSettings, t }) => {
+const SubtotalTooltip = ({ metadata, cardSettings }) => {
  const dineroAmount = Dinero(metadata?.job_totals?.totals?.subtotal ?? Dinero()).toFormat();
-
  return (
    cardSettings?.subtotal && (
      <Col span={cardSettings.compact ? 24 : 12}>
@@ -300,12 +312,10 @@ const TasksToolTip = ({ metadata, cardSettings, t }) =>
    </Col>
  );

-export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) {
+export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
  const { t } = useTranslation();
  const { metadata } = card;
-
  const employees = useMemo(() => bodyshop.employees, [bodyshop.employees]);
-
  const { employee_body, employee_prep, employee_refinish, employee_csr } = useMemo(() => {
    return {
      employee_body: metadata?.employee_body && findEmployeeById(employees, metadata.employee_body),
@@ -314,7 +324,6 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
      employee_csr: metadata?.employee_csr && findEmployeeById(employees, metadata.employee_csr)
    };
  }, [metadata, employees]);
-
  const pastDueAlert = useMemo(() => {
    if (!metadata?.scheduled_completion) return null;
    const completionDate = dayjs(metadata.scheduled_completion);
@@ -322,16 +331,13 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
    if (dayjs().add(1, "day").isSame(completionDate, "day")) return "production-completion-soon";
    return null;
  }, [metadata?.scheduled_completion]);
-
  const totalHrs = useMemo(() => {
    return metadata?.labhrs && metadata?.larhrs
      ? metadata.labhrs.aggregate.sum.mod_lb_hrs + metadata.larhrs.aggregate.sum.mod_lb_hrs
      : 0;
  }, [metadata?.labhrs, metadata?.larhrs]);
-
  const bgColor = useMemo(() => cardColor(bodyshop.ssbuckets, totalHrs), [bodyshop.ssbuckets, totalHrs]);
  const contrastYIQ = useMemo(() => getContrastYIQ(bgColor), [bgColor]);
-
  const isBodyEmpty = useMemo(() => {
    return !(
      cardSettings?.ownr_nm ||
@@ -413,8 +419,10 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
      className={`react-trello-card ${cardSettings.kiosk ? "kiosk-mode" : ""}`}
      size="small"
      style={{
-        backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
-        color: cardSettings?.cardcolor && contrastYIQ
+        backgroundColor: cardSettings?.cardcolor
+          ? bgColor.fallback || `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a || 1})`
+          : "var(--card-bg-fallback)",
+        color: cardSettings?.cardcolor ? contrastYIQ : "var(--card-text-fallback)"
      }}
      title={!isBodyEmpty ? headerContent : null}
      extra={
--- a/client/src/components/production-board-kanban/production-board-kanban.styles.scss
+++ b/client/src/components/production-board-kanban/production-board-kanban.styles.scss
@@ -11,7 +11,7 @@
 }

 .share-to-teams-badge {
-  background-color: #cccccc;
+  background-color: var(--share-badge-bg);
  border-radius: 50%;
  width: 24px;
  height: 24px;
@@ -23,7 +23,7 @@
 .react-trello-column-header {
  font-weight: bold;
  cursor: pointer;
-  background-color: #d0d0d0;
+  background-color: var(--column-header-bg);
  border-radius: 5px 5px 0 0;
 }

@@ -31,13 +31,14 @@
  background: transparent;
  border: none;
 }
+
 .react-trello-footer {
-  background-color: #d0d0d0;
+  background-color: var(--footer-bg);
  border-radius: 0 0 5px 5px;
 }

 .grid-item {
-  margin: 1px; // TODO: (Note) THis is where we set the margin for vertical
+  margin: 1px; // TODO: (Note) This is where we set the margin for vertical
 }

 .lane-title {
@@ -53,27 +54,33 @@
  justify-content: center;
  align-items: center;
  position: relative;
+
  .body-empty-container {
    position: absolute;
    right: 0;
  }
+
  .tech-container {
    font-weight: bolder;
    text-align: center;
    flex: 1;
+
    .branches-outlined {
-      color: orangered;
+      color: var(--tech-icon-color);
    }
  }
+
  .inner-container {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
+
    .circle-outline {
-      color: orangered;
+      color: var(--tech-icon-color);
      margin-left: 8px;
    }
+
    .iou-parent {
      margin-left: 8px;
    }
@@ -81,6 +88,6 @@
 }

 .clone.is-dragging .ant-card {
-  border: #1890ff 2px solid !important;
+  border: 2px solid var(--clone-border-color) !important;
  border-radius: 12px;
 }
--- a/client/src/components/production-board-kanban/trello-board/styles/Base.js
+++ b/client/src/components/production-board-kanban/trello-board/styles/Base.js
@@ -58,7 +58,7 @@ export const StyleHorizontal = styled.div`
    height: 100%;
    min-height: 1px;
    overflow-y: visible;
-    overflow-x: visible; // change this line
+    overflow-x: visible;
  }

  .react-trello-lane.lane-collapsed {
@@ -85,17 +85,17 @@ export const StyleHorizontal = styled.div`

  .react-trello-card {
    height: auto;
-    margin: 2px;
+    margin: 2px 0 2px;
  }

  .size-memory-wrapper {
-    display: flex; /* This makes it a flex container */
-    flex-direction: column; /* Aligns children vertically */
+    display: flex;
+    flex-direction: column;
  }

  .size-memory-wrapper .ant-card {
-    flex-grow: 1; /* Allows the card to expand to fill the available space */
-    width: 100%; /* Ensures the card stretches to fill the width of its parent */
+    flex-grow: 1;
+    width: 100%;
  }
 `;

@@ -131,7 +131,7 @@ export const StyleVertical = styled.div`

  .grid-item {
    display: flex;
-    width: ${(props) => props.gridItemWidth}; /* Use props to set width */
+    width: ${(props) => props.gridItemWidth};
    align-content: stretch;
    box-sizing: border-box;
  }
@@ -148,13 +148,13 @@ export const StyleVertical = styled.div`
  }

  .size-memory-wrapper {
-    display: flex; /* This makes it a flex container */
-    flex-direction: column; /* Aligns children vertically */
+    display: flex;
+    flex-direction: column;
  }

  .size-memory-wrapper .ant-card {
-    flex-grow: 1; /* Allows the card to expand to fill the available space */
-    width: 100%; /* Ensures the card stretches to fill the width of its parent */
+    flex-grow: 1;
+    width: 100%;
  }

  .react-trello-lane .lane-collapsed {
@@ -163,7 +163,7 @@ export const StyleVertical = styled.div`
 `;

 export const BoardWrapper = styled.div`
-  color: #393939;
+  color: var(--board-text-color);
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
@@ -171,7 +171,7 @@ export const BoardWrapper = styled.div`
 `;

 export const Section = styled.section`
-  background-color: #e3e3e3;
+  background-color: var(--section-bg);
  border-radius: 3px;
  margin: 2px 2px;
  height: 100%;
@@ -197,6 +197,6 @@ export const ScrollableLane = styled.div`

 export const Detail = styled.div`
  font-size: 12px;
-  color: #4d4d4d;
+  color: var(--detail-text-color);
  white-space: pre-wrap;
 `;
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.component.jsx
@@ -28,7 +28,6 @@ const mapStateToProps = createStructuredSelector({
 export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser }) {
  const [searchText, setSearchText] = useState("");
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-
  const {
    treatments: { Production_List_Status_Colors, Enhanced_Payroll }
  } = useSplitTreatments({
@@ -36,10 +35,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
    names: ["Production_List_Status_Colors", "Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });
-
  const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
  const defaultView = assoc && assoc.default_prod_list_view;
-
  const initialStateRef = useRef(
    (bodyshop.production_config &&
      bodyshop.production_config.find((p) => p.name === defaultView)?.columns.tableState) ||
@@ -48,7 +45,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
        filteredInfo: { text: "" }
      }
  );
-
  const initialColumnsRef = useRef(
    (initialStateRef.current &&
      bodyshop?.production_config
@@ -69,12 +65,9 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
        })) ||
      []
  );
-
  const [state, setState] = useState(initialStateRef.current);
  const [columns, setColumns] = useState(initialColumnsRef.current);
-
  const { t } = useTranslation();
-
  const matchingColumnConfig = useMemo(() => {
    return bodyshop?.production_config?.find((p) => p.name === defaultView);
  }, [bodyshop.production_config, defaultView]);
@@ -95,7 +88,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
          width: k.width ?? 100
        };
      }) || [];
-
    // Only update columns if they haven't been manually changed by the user
    if (_.isEqual(initialColumnsRef.current, columns)) {
      setColumns(newColumns);
@@ -126,11 +118,9 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici

  const onDragEnd = (fromIndex, toIndex) => {
    if (fromIndex === toIndex) return;
-
    const columnsCopy = [...columns];
    const [movedItem] = columnsCopy.splice(fromIndex, 1);
    columnsCopy.splice(toIndex, 0, movedItem);
-
    if (!_.isEqual(columnsCopy, columns)) {
      setColumns(columnsCopy);
      setHasUnsavedChanges(true);
@@ -140,7 +130,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
  const removeColumn = (e) => {
    const { key } = e;
    const newColumns = columns.filter((i) => i.key !== key);
-
    if (!_.isEqual(newColumns, columns)) {
      setColumns(newColumns);
      setHasUnsavedChanges(true);
@@ -155,7 +144,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
        ...nextColumns[index],
        width: size.width
      };
-
      if (!_.isEqual(nextColumns, columns)) {
        setColumns(nextColumns);
        setHasUnsavedChanges(true);
@@ -180,7 +168,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
        }
      ]
    };
-
    return (
      <Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
        <span>{col.title}</span>
@@ -206,13 +193,12 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
      item.v_model_desc,
      item.v_make_desc
    ];
-
    return fieldsToSearch.some((field) => (field || "").toString().toLowerCase().includes(searchText.toLowerCase()));
  };

  const dataSource = searchText === "" ? data : data.filter((j) => filterData(j, searchText));

-  if (!!!columns) return <div>No columns found.</div>;
+  if (!columns) return <div>No columns found.</div>;

  const totalHrs = data
    .reduce(
@@ -236,7 +222,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
                onClick={resetChanges}
                style={{
                  cursor: "pointer",
-                  textDecoration: "underline"
+                  textDecoration: "underline",
+                  color: "var(--reset-link-color)"
                }}
              >
                {t("general.actions.reset")}
@@ -269,7 +256,6 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
              data={data}
              onColumnAdd={addColumn}
            />
-
            <ProductionListConfigManager
              columns={columns}
              setColumns={setColumns}
@@ -305,24 +291,22 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
          {...(Production_List_Status_Colors.treatment === "on" && {
            onRow: (record, index) => {
              if (!bodyshop.md_ro_statuses.production_colors) return null;
-
              const color = bodyshop.md_ro_statuses.production_colors.find((x) => x.status === record.status);
-
              if (!color) {
                if (index % 2 === 0)
                  return {
                    style: {
-                      backgroundColor: `rgb(236, 236, 236)`
+                      backgroundColor: "var(--table-row-even-bg)"
                    }
                  };
-
                return null;
              }
-
              return {
                className: "rowWithColor",
                style: {
-                  "--bgColor": `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`
+                  "--bgColor": color.color
+                    ? `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.a || 1})`
+                    : "var(--status-row-bg-fallback)"
                }
              };
            }
--- a/client/src/components/rbac-wrapper/rbac-defaults.js
+++ b/client/src/components/rbac-wrapper/rbac-defaults.js
@@ -59,6 +59,7 @@ const ret = {
  "shop:dashboard": 3,
  "shop:rbac": 5,
  "shop:reportcenter": 2,
+  "shop:responsibilitycenter": 4, // Updated from "shop:responsibility" to "shop:responsibilitycenter"
  "shop:templates": 4,
  "shop:vendors": 2,

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

-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
@@ -26,21 +26,12 @@ const mapStateToProps = createStructuredSelector({
  calculating: selectScheduleLoadCalculating
 });

-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});

-export function ScheduleCalendarHeaderComponent({
-  bodyshop,
-  label,
-  refetch,
-  date,
-  load,
-  calculating,
-  events,
-  ...otherProps
-}) {
+export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date, load, calculating, events }) {
  const ATSToday = useMemo(() => {
    if (!events) return [];
-    return _.groupBy(
+    return groupBy(
      events.filter((e) => !e.vacation && e.isintake && dayjs(date).isSame(dayjs(e.start), "day")),
      "job.alt_transport"
    );
@@ -155,7 +146,11 @@ export function ScheduleCalendarHeaderComponent({
          <Space size="small">
            <Icon component={MdFileDownload} style={{ color: "green" }} />
            <BlurWrapper featureName="smartscheduling">
-              <span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
+              <span>
+                {`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${
+                  (loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)
+                }/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}
+              </span>
            </BlurWrapper>
          </Space>
        </Popover>
@@ -217,6 +212,10 @@ export function ScheduleCalendarHeaderComponent({
    return bodyshop.workingdays[day];
  };

+  const blocked = isDayBlocked.length > 0;
+  const headerStyle = blocked ? { color: "#fff" } : { color: isShopOpen(date) ? "" : "tomato" };
+  const headerClass = `imex-calendar-header-card ${blocked ? "imex-calendar-header-card--blocked" : ""}`.trim();
+
  return (
    <div className="imex-calendar-load">
      <ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss
+++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss
@@ -19,11 +19,42 @@
 // }

 .imex-event-arrived {
-  background-color: rgba(4, 141, 4, 0.4);
+  background-color: var(--event-arrived-bg);
 }

 .imex-event-block {
-  background-color: rgba(212, 2, 2, 0.6);
+  background-color: var(--event-block-bg);
+}
+
+/* Ensure readable text when fallback background is used */
+.imex-event-fallback,
+.imex-event-fallback .rbc-event-content,
+.imex-event-fallback .rbc-event-label,
+.imex-event-fallback a {
+  color: var(--card-text-fallback) !important;
+}
+
+/* Optional subtle border to distinguish on white backgrounds */
+.imex-event-fallback {
+  border: 1px solid var(--bar-border-color);
+}
+
+/* Header day card styling */
+.imex-calendar-header-card {
+  display: inline-block;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.25rem;
+}
+
+.imex-calendar-header-card--blocked {
+  background-color: var(--event-block-bg);
+  color: #ffffff;
+}
+
+.imex-calendar-header-card--blocked a,
+.imex-calendar-header-card--blocked span,
+.imex-calendar-header-card--blocked .ant-typography {
+  color: #ffffff;
 }

 .rbc-month-view {
@@ -31,12 +62,12 @@
 }

 .rbc-event.rbc-selected {
-  background-color: slategrey;
+  background-color: var(--event-selected-bg);
 }

 .imex-calendar-load {
  max-width: 12rem;
  position: relative;
  left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%);
 }
--- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
@@ -36,16 +36,40 @@ export function ScheduleCalendarWrapperComponent({
  const search = queryString.parse(useLocation().search);
  const history = useNavigate();
  const { t } = useTranslation();
+
+  // Determine current view to compute styles consistently
+  const currentView = search.view || defaultView || "week";
+
  const handleEventPropStyles = (event, start, end, isSelected) => {
+    const hasColor = Boolean(event?.color?.hex || event?.color);
+    const useBg = currentView !== "agenda";
+
+    // Prioritize explicit blocked-day background to ensure red in all themes
+    let bg;
+    if (useBg) {
+      if (event?.block) {
+        bg = "var(--event-block-bg)";
+      } else if (hasColor) {
+        bg = event?.color?.hex ?? event?.color;
+      } else {
+        bg = "var(--event-bg-fallback)";
+      }
+    }
+
+    const usedFallback = !hasColor && !event?.block; // only mark as fallback when not blocked
+
+    const classes = [
+      "imex-event",
+      event.arrived && "imex-event-arrived",
+      event.block && "imex-event-block",
+      usedFallback && "imex-event-fallback"
+    ]
+      .filter(Boolean)
+      .join(" ");
+
    return {
-      ...(event.color && !((search.view || defaultView) === "agenda")
-        ? {
-            style: {
-              backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
-            }
-          }
-        : {}),
-      className: `${event.arrived ? "imex-event-arrived" : ""} ${event.block ? "imex-event-block" : ""}`
+      ...(bg ? { style: { backgroundColor: bg } } : {}),
+      className: classes
    };
  };

@@ -60,7 +84,9 @@ export function ScheduleCalendarWrapperComponent({
          <Collapse style={{ marginBottom: "5px" }}>
            <Collapse.Panel
              key="1"
-              header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
+              header={
+                <span style={{ color: "var(--error-header-text)" }}>{t("appointments.labels.severalerrorsfound")}</span>
+              }
            >
              <Space direction="vertical" style={{ width: "100%" }}>
                {problemJobs.map((problem) => (
@@ -70,7 +96,7 @@ export function ScheduleCalendarWrapperComponent({
                    message={
                      <Trans
                        i18nKey="appointments.labels.dataconsistency"
-                        components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                        components={[<Link key={problem.id} to={`/manage/jobs/${problem.id}`} target="_blank" />]}
                        values={{
                          ro_number: problem.ro_number,
                          code: problem.code
@@ -91,7 +117,7 @@ export function ScheduleCalendarWrapperComponent({
                message={
                  <Trans
                    i18nKey="appointments.labels.dataconsistency"
-                    components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                    components={[<Link key={problem.id} to={`/manage/jobs/${problem.id}`} target="_blank" />]}
                    values={{
                      ro_number: problem.ro_number,
                      code: problem.code
@@ -102,12 +128,11 @@ export function ScheduleCalendarWrapperComponent({
            ))}
          </Space>
        ))}
-
      <Calendar
        events={data}
        defaultView={search.view || defaultView || "week"}
        date={selectedDate}
-        onNavigate={(date, view, action) => {
+        onNavigate={(date) => {
          search.date = date.toISOString().substr(0, 10);
          history({ search: queryString.stringify(search) });
        }}
--- a/client/src/components/schedule-calendar/schedule-calendar.component.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.component.jsx
@@ -2,7 +2,7 @@ import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Col, Row, Select, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import { t } from "i18next";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import useLocalStorage from "../../utils/useLocalStorage";
 import ScheduleAtsSummary from "../schedule-ats-summary/schedule-ats-summary.component";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
@@ -18,7 +18,7 @@ import _ from "lodash";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarComponent);
--- a/client/src/components/schedule-calendar/schedule-calendar.container.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.container.jsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
-import React, { useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
 import AlertComponent from "../alert/alert.component";
@@ -32,7 +32,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
      startd: range.start,
      endd: range.end
    },
-    skip: !!!range.start || !!!range.end,
+    skip: !range.start || !range.end,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal } from "antd";
-import dayjs from "../../utils/day";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
  CANCEL_APPOINTMENT_BY_ID,
@@ -19,9 +19,9 @@ import { selectSchedule } from "../../redux/modals/modals.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormat } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ScheduleJobModalComponent from "./schedule-job-modal.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -72,7 +72,7 @@ export function ScheduleJobModalContainer({
    variables: { jobid: jobId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
-    skip: !open || !!!jobId
+    skip: !open || !jobId
  });

  useEffect(() => {
@@ -93,12 +93,12 @@ export function ScheduleJobModalContainer({
    logImEXEvent("schedule_new_appointment");

    setLoading(true);
-    if (!!previousEvent) {
+    if (previousEvent) {
      const cancelAppt = await cancelAppointment({
        variables: { appid: previousEvent }
      });

-      if (!!cancelAppt.errors) {
+      if (cancelAppt.errors) {
        notification["error"]({
          message: t("appointments.errors.canceling", {
            message: JSON.stringify(cancelAppt.errors)
@@ -146,7 +146,7 @@ export function ScheduleJobModalContainer({
      });
    }

-    if (!!appt.errors) {
+    if (appt.errors) {
      notification["error"]({
        message: t("appointments.errors.saving", {
          message: JSON.stringify(appt.errors)
@@ -172,7 +172,7 @@ export function ScheduleJobModalContainer({
        }
      });

-      if (!!jobUpdate.errors) {
+      if (jobUpdate.errors) {
        notification["error"]({
          message: t("appointments.errors.saving", {
            message: JSON.stringify(jobUpdate.errors)
@@ -222,9 +222,9 @@ export function ScheduleJobModalContainer({
        initialValues={{
          notifyCustomer: !!(job && job.ownr_ea),
          email: (job && job.ownr_ea) || "",
-          start: null,
          // smartDates: [],
-          scheduled_completion: null,
+          start: context.scheduled_in,
+          scheduled_completion: context.scheduled_completion ,
          color: context.color,
          alt_transport: context.alt_transport,
          note: context.note
--- a/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
+++ b/client/src/components/scoreboard-chart/chart-custom-tooltip.jsx
@@ -5,26 +5,25 @@ const CustomTooltip = ({ active, payload, label }) => {
    return (
      <div
        style={{
-          backgroundColor: "white",
-          border: "1px solid gray",
+          backgroundColor: "var(--tooltip-bg)",
+          border: "1px solid var(--tooltip-border)",
          padding: "0.5rem"
        }}
      >
        <p style={{ margin: "0" }}>{label}</p>
        {payload.map((data, index) => {
+          const textColor = data.color || "var(--tooltip-text-fallback)";
          if (data.dataKey === "sales" || data.dataKey === "accSales")
            return (
-              <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${data.name} : ${Dinero({
+              <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${data.name} : ${Dinero({
                amount: Math.round(data.value * 100)
              }).toFormat()}`}</p>
            );
-
-          return <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${data.name} : ${data.value}`}</p>;
+          return <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${data.name} : ${data.value}`}</p>;
        })}
      </div>
    );
  }
-
  return null;
 };

--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
@@ -1,8 +1,7 @@
 import { Card } from "antd";
 import Dinero from "dinero.js";
-import _ from "lodash";
+import { round } from "lodash";
 import dayjs from "../../utils/day";
-import React from "react";
 import { connect } from "react-redux";
 import {
  Area,
@@ -29,7 +28,7 @@ const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });

-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardChart);
@@ -40,7 +39,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
  const data = listOfBusDays.reduce((acc, val) => {
    //Sum up the current day.
    let dayhrs;
-    if (!!sbEntriesByDate[val]) {
+    if (sbEntriesByDate[val]) {
      dayhrs = sbEntriesByDate[val].reduce(
        (dayAcc, dayVal) => {
          return {
@@ -61,9 +60,9 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {

    const theValue = {
      date: dayjs(val).format("D ddd"),
-      paintHrs: _.round(dayhrs.painthrs, 1),
-      bodyHrs: _.round(dayhrs.bodyhrs, 1),
-      accTargetHrs: _.round(
+      paintHrs: round(dayhrs.painthrs, 1),
+      bodyHrs: round(dayhrs.bodyhrs, 1),
+      accTargetHrs: round(
        Utils.AsOfDateTargetHours(
          bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget,
          val
@@ -72,14 +71,14 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
          bodyshop.scoreboard_target.dailyPaintTarget,
        1
      ),
-      accHrs: _.round(
+      accHrs: round(
        acc.length > 0
          ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
          : dayhrs.painthrs + dayhrs.bodyhrs,
        1
      ),
-      sales: _.round(dayhrs.sales, 2),
-      accSales: _.round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
+      sales: round(dayhrs.sales, 2),
+      accSales: round(acc.length > 0 ? acc[acc.length - 1].accSales + dayhrs.sales : dayhrs.sales, 2)
    };

    return [...acc, theValue];
--- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx
+++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx
@@ -1,23 +1,25 @@
-import { Col, Row } from "antd";
-import React, { useEffect } from "react";
+import { Col, Row, Spin } from "antd";
+import { useEffect, useState } from "react";
 import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
 import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
 import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
-
 import { useApolloClient, useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_BLOCKED_DAYS, QUERY_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
+import {
+  clearHolidays,
+  clearWorkingWeekdays,
+  setHolidays,
+  setWorkingWeekdays
+} from "../scoreboard-targets-table/scoreboard-targets-table.util";

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

 export function ScoreboardDisplayComponent({ bodyshop }) {
@@ -26,63 +28,76 @@ export function ScoreboardDisplayComponent({ bodyshop }) {
      start: dayjs().startOf("month"),
      end: dayjs().endOf("month")
    },
-    pollInterval: 60000*5
+    pollInterval: 60000 * 5
  });

  const { data } = scoreboardSubscription;
  const client = useApolloClient();
-  const scoreBoardlist = (data && data.scoreboard) || [];
-
+  const scoreBoardlist = data?.scoreboard || [];
  const sbEntriesByDate = {};

  scoreBoardlist.forEach((i) => {
    const entryDate = i.date;
-    if (!!!sbEntriesByDate[entryDate]) {
+    if (!sbEntriesByDate[entryDate]) {
      sbEntriesByDate[entryDate] = [];
    }
    sbEntriesByDate[entryDate].push(i);
  });

+  const [loading, setLoading] = useState(true); // Loading state
+
  useEffect(() => {
-    //Update the locals.
    async function setDayJSSettings() {
-      let appointments;
+      try {
+        let appointments;

-      if (!bodyshop.scoreboard_target.ignoreblockeddays) {
-        const { data } = await client.query({
-          query: GET_BLOCKED_DAYS,
-          variables: {
-            start: dayjs().startOf("month"),
-            end: dayjs().endOf("month")
-          }
-        });
-        appointments = data.appointments;
-      }
-
-      dayjs.updateLocale("ca", {
-        workingWeekdays: translateSettingsToWorkingDays(bodyshop.workingdays),
-        ...(appointments
-          ? {
-              holidays: appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY"))
+        if (!bodyshop.scoreboard_target.ignoreblockeddays) {
+          const { data } = await client.query({
+            query: GET_BLOCKED_DAYS,
+            variables: {
+              start: dayjs().startOf("month"),
+              end: dayjs().endOf("month")
            }
-          : {}),
-        holidayFormat: "MM-DD-YYYY"
-      });
+          });
+          appointments = data.appointments;
+        }
+
+        const holidays = appointments ? appointments.map((h) => dayjs(h.start).format("MM-DD-YYYY")) : [];
+        const workingWeekdays = translateSettingsToWorkingDays(bodyshop.workingdays);
+
+        // Set holidays and working weekdays
+        setHolidays(holidays);
+        setWorkingWeekdays(workingWeekdays);
+      } finally {
+        setLoading(false); // Set loading to false after processing
+      }
    }

    setDayJSSettings();
+
+    // Cleanup on unmount
+    return () => {
+      clearHolidays();
+      clearWorkingWeekdays();
+    };
  }, [client, bodyshop]);

+  if (loading) {
+    return (
+      <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
+        <Spin size="large" />
+      </Row>
+    );
+  }
+
  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
        <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
      </Col>
-
      <Col span={24}>
        <ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
      </Col>
-
      <Col span={24}>
        <ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
      </Col>
@@ -92,27 +107,12 @@ export function ScoreboardDisplayComponent({ bodyshop }) {

 function translateSettingsToWorkingDays(workingdays) {
  const days = [];
-
-  if (workingdays.monday) {
-    days.push(1);
-  }
-  if (workingdays.tuesday) {
-    days.push(2);
-  }
-  if (workingdays.wednesday) {
-    days.push(3);
-  }
-  if (workingdays.thursday) {
-    days.push(4);
-  }
-  if (workingdays.friday) {
-    days.push(5);
-  }
-  if (workingdays.saturday) {
-    days.push(6);
-  }
-  if (workingdays.sunday) {
-    days.push(0);
-  }
+  if (workingdays.monday) days.push(1);
+  if (workingdays.tuesday) days.push(2);
+  if (workingdays.wednesday) days.push(3);
+  if (workingdays.thursday) days.push(4);
+  if (workingdays.friday) days.push(5);
+  if (workingdays.saturday) days.push(6);
+  if (workingdays.sunday) days.push(0);
  return days;
 }
--- a/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx
+++ b/client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -10,7 +9,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -26,7 +25,7 @@ export function ScoreboardLastDays({ bodyshop, sbEntriesByDate }) {
    <Row>
      {ArrayOfDate.map((a) => (
        <Col span={2} key={a}>
-          {!!sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
+          {sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
        </Col>
      ))}
    </Row>
--- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
+++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
@@ -1,8 +1,8 @@
 import { CalendarOutlined } from "@ant-design/icons";
 import { Card, Col, Divider, Row, Statistic } from "antd";
-import _ from "lodash";
+import { groupBy } from "lodash";
 import dayjs from "../../utils/day";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,7 +13,7 @@ import * as Util from "./scoreboard-targets-table.util";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -24,7 +24,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
  const { t } = useTranslation();

  const values = useMemo(() => {
-    const dateHash = _.groupBy(scoreBoardlist, "date");
+    const dateHash = groupBy(scoreBoardlist, "date");

    let ret = {
      todayBody: 0,
@@ -213,4 +213,5 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
    </Card>
  );
 }
+
 export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTargetsTable);
--- a/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js
+++ b/client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js
@@ -1,29 +1,172 @@
 import dayjs from "../../utils/day";

-export const CalculateWorkingDaysThisMonth = () => dayjs().endOf("month").businessDaysInMonth().length;
+const DEFAULT_WORKING_DAYS = [1, 2, 3, 4, 5]; // Default to Monday-Friday

-export const CalculateWorkingDaysInPeriod = (start, end) => dayjs(end).businessDiff(dayjs(start));
+// Module-level state for holidays and working weekdays
+let holidays = [];
+let workingWeekdays = DEFAULT_WORKING_DAYS;

-export const CalculateWorkingDaysAsOfToday = () => dayjs().endOf("day").businessDiff(dayjs().startOf("month"));
+/**
+ * Sets the holidays for the business logic.
+ * @param newHolidays
+ */
+export const setHolidays = (newHolidays = []) => {
+  holidays = newHolidays;
+};

-export const CalculateWorkingDaysLastMonth = () =>
-  dayjs().subtract(1, "month").endOf("month").businessDaysInMonth().length;
+/**
+ * Clears the holidays.
+ */
+export const clearHolidays = () => {
+  holidays = [];
+};

+/**
+ * Sets the working weekdays for the business logic.
+ * @param newWorkingWeekdays
+ */
+export const setWorkingWeekdays = (newWorkingWeekdays = DEFAULT_WORKING_DAYS) => {
+  workingWeekdays = newWorkingWeekdays;
+};
+
+/**
+ * Clears the working weekdays, resetting to default (Monday-Friday).
+ */
+export const clearWorkingWeekdays = () => {
+  workingWeekdays = DEFAULT_WORKING_DAYS; // Reset to default
+};
+
+/**
+ * Translates the bodyshop working days settings to an array of weekdays.
+ * @returns {*[]}
+ */
+export const getHolidays = () => {
+  return holidays;
+};
+
+/**
+ * Translates the working days settings from the bodyshop to an array of weekdays.
+ * @returns {number[]}
+ */
+export const getWorkingWeekdays = () => {
+  return workingWeekdays;
+};
+
+/**
+ * Calculates the number of working days in the current month, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysThisMonth = () => {
+  const businessDays = dayjs().businessDaysInMonth();
+  return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length;
+};
+
+/**
+ * Calculates the number of working days in a given period, excluding holidays.
+ * @param start
+ * @param end
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysInPeriod = (start, end) => {
+  let businessDays = dayjs(end).businessDiff(dayjs(start));
+  if (dayjs(end).isBusinessDay() && !holidays.includes(dayjs(end).format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return businessDays;
+};
+
+/**
+ * Calculates the number of working days as of today, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysAsOfToday = () => {
+  const today = dayjs().startOf("day");
+  let businessDays = today.businessDiff(dayjs().startOf("month"));
+  if (today.isBusinessDay() && !holidays.includes(today.format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return businessDays;
+};
+
+/**
+ * Calculates the number of working days in the last month, excluding holidays.
+ * @returns {number}
+ * @constructor
+ */
+export const CalculateWorkingDaysLastMonth = () => {
+  const businessDays = dayjs().subtract(1, "month").businessDaysInMonth();
+  return businessDays.filter((day) => !holidays.includes(dayjs(day).format("MM-DD-YYYY"))).length;
+};
+
+/**
+ * Calculates the weekly target hours based on daily target hours and the number of working days in the current week.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const WeeklyTargetHrs = (dailyTargetHrs) =>
  dailyTargetHrs * CalculateWorkingDaysInPeriod(dayjs().startOf("week"), dayjs().endOf("week"));

+/**
+ * Calculates the weekly target hours for a specific period.
+ * @param dailyTargetHrs
+ * @param start
+ * @param end
+ * @returns {number}
+ * @constructor
+ */
 export const WeeklyTargetHrsInPeriod = (dailyTargetHrs, start, end) =>
  dailyTargetHrs * CalculateWorkingDaysInPeriod(start, end);

+/**
+ * Calculates the monthly target hours based on daily target hours and the number of working days in the current month.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const MonthlyTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysThisMonth();

+/**
+ * Calculates the monthly target hours for the last month based on daily target hours and the number of working days
+ * in the last month.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const LastMonthTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysLastMonth();

+/**
+ * Calculates the target hours as of today based on daily target hours and the number of working days as of today.
+ * @param dailyTargetHrs
+ * @returns {number}
+ * @constructor
+ */
 export const AsOfTodayTargetHrs = (dailyTargetHrs) => dailyTargetHrs * CalculateWorkingDaysAsOfToday();

-export const AsOfDateTargetHours = (dailyTargetHours, date) =>
-  dailyTargetHours * dayjs(date).businessDiff(dayjs().startOf("month"));
+/**
+ * Calculates the target hours as of a specific date based on daily target hours and the number of business days up to
+ * that date.
+ * @param dailyTargetHours
+ * @param date
+ * @returns {number}
+ * @constructor
+ */
+export const AsOfDateTargetHours = (dailyTargetHours, date) => {
+  let businessDays = dayjs(date).businessDiff(dayjs().startOf("month"));
+  if (dayjs(date).isBusinessDay() && !holidays.includes(dayjs(date).format("MM-DD-YYYY"))) {
+    businessDays += 1;
+  }
+  return dailyTargetHours * businessDays;
+};

+/**
+ * Generates a list of all days in the current month.
+ * @returns {*[]}
+ * @constructor
+ */
 export const ListOfDaysInCurrentMonth = () => {
  const days = [];
  let dateStart = dayjs().startOf("month");
@@ -36,6 +179,13 @@ export const ListOfDaysInCurrentMonth = () => {
  return days;
 };

+/**
+ * Generates a list of all days between two dates.
+ * @param start
+ * @param end
+ * @returns {*[]}
+ * @constructor
+ */
 export const ListDaysBetween = ({ start, end }) => {
  const days = [];
  let dateStart = dayjs(start);
--- a/client/src/components/scoreboard-timetickets-stats/chart-custom-tooltip.jsx
+++ b/client/src/components/scoreboard-timetickets-stats/chart-custom-tooltip.jsx
@@ -3,15 +3,16 @@ const CustomTooltip = ({ active, payload, label }) => {
    return (
      <div
        style={{
-          backgroundColor: "white",
-          border: "1px solid gray",
+          backgroundColor: "var(--tooltip-bg)",
+          border: "1px solid var(--tooltip-border)",
          padding: "0.5rem"
        }}
      >
        <p style={{ margin: "0" }}>{label}</p>
        {payload.map((data, index) => {
+          const textColor = data.color || "var(--tooltip-text-fallback)";
          return (
-            <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${
+            <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${
              data.name
            } : ${data.value.toFixed(1)}`}</p>
          );
@@ -19,7 +20,6 @@ const CustomTooltip = ({ active, payload, label }) => {
      </div>
    );
  }
-
  return null;
 };

--- a/client/src/components/share-to-teams/share-to-teams.component.jsx
+++ b/client/src/components/share-to-teams/share-to-teams.component.jsx
@@ -41,7 +41,6 @@ const ShareToTeamsComponent = ({
 }) => {
  const location = useLocation();
  const { t } = useTranslation();
-
  const currentUrl =
    urlOverride ||
    encodeURIComponent(`${window.location.origin}${location.pathname}${location.search}${location.hash}`);
@@ -49,31 +48,24 @@ const ShareToTeamsComponent = ({
    pageTitleOverride ||
    encodeURIComponent(typeof document !== "undefined" ? document.title : t("general.actions.sharetoteams"));
  const messageText = messageTextOverride || encodeURIComponent(t("general.actions.sharetoteams"));
-
  // Construct the Teams share URL with parameters
  const teamsShareUrl = `https://teams.microsoft.com/share?href=${currentUrl}&preText=${messageText}&title=${pageTitle}`;
-
  // Function to open the centered share link in a new window/tab
  const handleShare = () => {
    const screenWidth = window.screen.width;
    const screenHeight = window.screen.height;
    const windowWidth = 600;
    const windowHeight = 400;
-
    const left = screenWidth / 2 - windowWidth / 2;
    const top = screenHeight / 2 - windowHeight / 2;
-
    const windowFeatures = `width=${windowWidth},height=${windowHeight},left=${left},top=${top}`;
-
    // noinspection JSIgnoredPromiseFromCall
    window.open(teamsShareUrl, "_blank", windowFeatures);
  };
-
  // Feature is disabled
  if (!bodyshop?.md_functionality_toggles?.teams) {
    return null;
  }
-
  if (noIcon) {
    return (
      <div style={{ cursor: "pointer", ...noIconStyle }} onClick={handleShare}>
@@ -81,16 +73,15 @@ const ShareToTeamsComponent = ({
      </div>
    );
  }
-
  return (
    <Button
      style={{
-        backgroundColor: "#6264A7",
-        borderColor: "#6264A7",
-        color: "#FFFFFF",
+        backgroundColor: "var(--teams-button-bg)",
+        borderColor: "var(--teams-button-border)",
+        color: "var(--teams-button-text)",
        ...buttonStyle
      }}
-      icon={<PiMicrosoftTeamsLogo style={{ color: "#FFFFFF", ...buttonIconStyle }} />}
+      icon={<PiMicrosoftTeamsLogo style={{ color: "var(--teams-button-text)", ...buttonIconStyle }} />}
      onClick={handleShare}
      title={linkText === null ? t("general.actions.sharetoteams") : linkText}
    />
--- a/client/src/components/shop-employees/shop-employees-form.component.jsx
+++ b/client/src/components/shop-employees/shop-employees-form.component.jsx
@@ -1,13 +1,15 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Form, Input, InputNumber, Select, Switch, Table } from "antd";
 import { useForm } from "antd/es/form/Form";
-import dayjs from "../../utils/day";
-import React, { useEffect } from "react";
+import queryString from "query-string";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
  CHECK_EMPLOYEE_NUMBER,
@@ -20,19 +22,17 @@ import {
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import { DateFormatter } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
-import queryString from "query-string";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -83,7 +83,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
          }
        }
      })
-        .then((r) => {
+        .then(() => {
          notification["success"]({
            message: t("employees.successes.save")
          });
@@ -120,13 +120,13 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
      title: t("employees.fields.vacation.start"),
      dataIndex: "start",
      key: "start",
-      render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      render: (text) => <DateFormatter>{text}</DateFormatter>
    },
    {
      title: t("employees.fields.vacation.end"),
      dataIndex: "end",
      key: "end",
-      render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      render: (text) => <DateFormatter>{text}</DateFormatter>
    },
    {
      title: t("employees.fields.vacation.length"),
@@ -210,7 +210,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                required: true
                //message: t("general.validation.required"),
              },
-              ({ getFieldValue }) => ({
+              () => ({
                async validator(rule, value) {
                  if (value) {
                    const response = await client.query({
@@ -369,8 +369,9 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                      add();
                    }}
                    style={{ width: "100%" }}
+                    id="add-employee-rate-button"
                  >
-                    {t("employees.actions.newrate")}
+                    <span id="new-employee-rate">{t("employees.actions.newrate")}</span>
                  </Button>
                </Form.Item>
              </div>
@@ -383,7 +384,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
        title={() => <ShopEmployeeAddVacation employee={data && data.employees_by_pk} />}
        columns={columns}
        rowKey={"id"}
-        dataSource={data ? data.employees_by_pk.employee_vacations : []}
+        dataSource={data?.employees_by_pk?.employee_vacations ?? []}
      />
    </Card>
  );
--- a/client/src/components/shop-info/shop-info.container.jsx
+++ b/client/src/components/shop-info/shop-info.container.jsx
@@ -1,15 +1,16 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form } from "antd";
-import dayjs from "../../utils/day";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_BODYSHOP, UPDATE_SHOP } from "../../graphql/bodyshop.queries";
+import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import FormsFieldChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import ShopInfoComponent from "./shop-info.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { FEATURE_CONFIGS, useFormDataPreservation } from "./useFormDataPreservation";

 export default function ShopInfoContainer() {
  const [form] = Form.useForm();
@@ -22,16 +23,24 @@ export default function ShopInfoContainer() {
  });
  const notification = useNotification();

-  const handleFinish = (values) => {
+  const combinedFeatureConfig = {
+    ...FEATURE_CONFIGS.general,
+    ...FEATURE_CONFIGS.responsibilitycenters
+  };
+
+  // Use form data preservation for all shop-info features
+  const { createSubmissionHandler } = useFormDataPreservation(form, data?.bodyshops[0], combinedFeatureConfig);
+
+  const handleFinish = createSubmissionHandler((values) => {
    setSaveLoading(true);
    logImEXEvent("shop_update");

    updateBodyshop({
      variables: { id: data.bodyshops[0].id, shop: values }
    })
-      .then((r) => {
+      .then(() => {
        notification["success"]({ message: t("bodyshop.successes.save") });
-        refetch().then((_) => form.resetFields());
+        refetch().then(() => form.resetFields());
      })
      .catch((error) => {
        notification["error"]({
@@ -39,7 +48,7 @@ export default function ShopInfoContainer() {
        });
      });
    setSaveLoading(false);
-  };
+  });

  useEffect(() => {
    if (data) form.resetFields();
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -14,6 +14,7 @@ import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-forma
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";

+// eslint-disable-next-line no-undef
 const timeZonesList = Intl.supportedValuesOf("timeZone");
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -143,82 +144,99 @@ export function ShopInfoGeneral({ form, bodyshop }) {
          <InputNumber min={0} />
        </Form.Item>
      </LayoutFormRow>
-      <FeatureWrapper featureName="export" noauth={() => null}>
-        <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
-          <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
-            <Switch />
-          </Form.Item>
-          {InstanceRenderManager({
-            imex: (
-              <Form.Item shouldUpdate noStyle>
-                {() => (
-                  <Form.Item
-                    label={t("bodyshop.labels.qbo_usa")}
-                    shouldUpdate
-                    valuePropName="checked"
-                    name={["accountingconfig", "qbo_usa"]}
-                  >
-                    <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
-                  </Form.Item>
-                )}
-              </Form.Item>
-            )
-          })}
-          <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.labels.accountingtiers")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["accountingconfig", "tiers"]}
-          >
-            <Radio.Group>
-              <Radio value={2}>2</Radio>
-              <Radio value={3}>3</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
+      <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
+        {[
+          ...(HasFeatureAccess({ featureName: "export", bodyshop })
+            ? [
                <Form.Item
-                  label={t("bodyshop.labels.2tiersetup")}
-                  shouldUpdate
+                  key="qbo"
+                  label={t("bodyshop.labels.qbo")}
+                  valuePropName="checked"
+                  name={["accountingconfig", "qbo"]}
+                >
+                  <Switch />
+                </Form.Item>,
+                InstanceRenderManager({
+                  imex: (
+                    <Form.Item key="qbo_usa_wrapper" shouldUpdate noStyle>
+                      {() => (
+                        <Form.Item
+                          label={t("bodyshop.labels.qbo_usa")}
+                          shouldUpdate
+                          valuePropName="checked"
+                          name={["accountingconfig", "qbo_usa"]}
+                        >
+                          <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
+                        </Form.Item>
+                      )}
+                    </Form.Item>
+                  )
+                }),
+                <Form.Item
+                  key="qbo_departmentid"
+                  label={t("bodyshop.labels.qbo_departmentid")}
+                  name={["accountingconfig", "qbo_departmentid"]}
+                >
+                  <Input />
+                </Form.Item>,
+                <Form.Item
+                  key="accountingtiers"
+                  label={t("bodyshop.labels.accountingtiers")}
                  rules={[
                    {
-                      required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                      required: true
                      //message: t("general.validation.required"),
                    }
                  ]}
-                  name={["accountingconfig", "twotierpref"]}
+                  name={["accountingconfig", "tiers"]}
                >
-                  <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
-                    <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
-                    <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
+                  <Radio.Group>
+                    <Radio value={2}>2</Radio>
+                    <Radio value={3}>3</Radio>
                  </Radio.Group>
+                </Form.Item>,
+                <Form.Item key="twotierpref_wrapper" shouldUpdate>
+                  {() => {
+                    return (
+                      <Form.Item
+                        label={t("bodyshop.labels.2tiersetup")}
+                        shouldUpdate
+                        rules={[
+                          {
+                            required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                            //message: t("general.validation.required"),
+                          }
+                        ]}
+                        name={["accountingconfig", "twotierpref"]}
+                      >
+                        <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
+                          <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
+                          <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
+                        </Radio.Group>
+                      </Form.Item>
+                    );
+                  }}
+                </Form.Item>,
+                <Form.Item
+                  key="printlater"
+                  label={t("bodyshop.labels.printlater")}
+                  valuePropName="checked"
+                  name={["accountingconfig", "printlater"]}
+                >
+                  <Switch />
+                </Form.Item>,
+                <Form.Item
+                  key="emaillater"
+                  label={t("bodyshop.labels.emaillater")}
+                  valuePropName="checked"
+                  name={["accountingconfig", "emaillater"]}
+                >
+                  <Switch />
                </Form.Item>
-              );
-            }}
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.labels.printlater")}
-            valuePropName="checked"
-            name={["accountingconfig", "printlater"]}
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.labels.emaillater")}
-            valuePropName="checked"
-            name={["accountingconfig", "emaillater"]}
-          >
-            <Switch />
-          </Form.Item>
+              ]
+            : []),
          <Form.Item
+            key="inhousevendorid"
            label={t("bodyshop.fields.inhousevendorid")}
            name={"inhousevendorid"}
            rules={[
@@ -229,8 +247,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
            ]}
          >
            <Input />
-          </Form.Item>
+          </Form.Item>,
          <Form.Item
+            key="default_adjustment_rate"
            label={t("bodyshop.fields.default_adjustment_rate")}
            name={"default_adjustment_rate"}
            rules={[
@@ -241,58 +260,66 @@ export function ShopInfoGeneral({ form, bodyshop }) {
            ]}
          >
            <InputNumber min={0} precision={2} />
-          </Form.Item>
-          {InstanceRenderManager({
+          </Form.Item>,
+          InstanceRenderManager({
            imex: (
-              <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
+              <Form.Item key="federal_tax_id" label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
                <Input />
              </Form.Item>
            )
-          })}
-          <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
+          }),
+          <Form.Item key="state_tax_id" label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
            <Input />
-          </Form.Item>
-          {InstanceRenderManager({
-            imex: (
-              <Form.Item
-                label={t("bodyshop.fields.invoice_federal_tax_rate")}
-                name={["bill_tax_rates", "federal_tax_rate"]}
-                rules={[
-                  {
-                    required: true
-                    //message: t("general.validation.required"),
-                  }
-                ]}
-              >
-                <InputNumber />
-              </Form.Item>
-            )
-          })}
-          <Form.Item
-            label={t("bodyshop.fields.invoice_state_tax_rate")}
-            name={["bill_tax_rates", "state_tax_rate"]}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber />
-          </Form.Item>
-          <Form.Item
-            label={t("bodyshop.fields.invoice_local_tax_rate")}
-            name={["bill_tax_rates", "local_tax_rate"]}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber />
-          </Form.Item>
+          </Form.Item>,
+          ...(HasFeatureAccess({ featureName: "bills", bodyshop })
+            ? [
+                InstanceRenderManager({
+                  imex: (
+                    <Form.Item
+                      key="invoice_federal_tax_rate"
+                      label={t("bodyshop.fields.invoice_federal_tax_rate")}
+                      name={["bill_tax_rates", "federal_tax_rate"]}
+                      rules={[
+                        {
+                          required: true
+                          //message: t("general.validation.required"),
+                        }
+                      ]}
+                    >
+                      <InputNumber />
+                    </Form.Item>
+                  )
+                }),
+                <Form.Item
+                  key="invoice_state_tax_rate"
+                  label={t("bodyshop.fields.invoice_state_tax_rate")}
+                  name={["bill_tax_rates", "state_tax_rate"]}
+                  rules={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                >
+                  <InputNumber />
+                </Form.Item>,
+                <Form.Item
+                  key="invoice_local_tax_rate"
+                  label={t("bodyshop.fields.invoice_local_tax_rate")}
+                  name={["bill_tax_rates", "local_tax_rate"]}
+                  rules={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                >
+                  <InputNumber />
+                </Form.Item>
+              ]
+            : []),
          <Form.Item
+            key="md_payment_types"
            name={["md_payment_types"]}
            label={t("bodyshop.fields.md_payment_types")}
            rules={[
@@ -304,8 +331,9 @@ export function ShopInfoGeneral({ form, bodyshop }) {
            ]}
          >
            <Select mode="tags" />
-          </Form.Item>
+          </Form.Item>,
          <Form.Item
+            key="md_categories"
            name={["md_categories"]}
            label={t("bodyshop.fields.md_categories")}
            rules={[
@@ -316,63 +344,91 @@ export function ShopInfoGeneral({ form, bodyshop }) {
            ]}
          >
            <Select mode="tags" />
-          </Form.Item>
-          <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            name={["accountingconfig", "ReceivableCustomField1"]}
-            label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
-          >
-            {ReceivableCustomFieldSelect}
-          </Form.Item>
-          <Form.Item
-            name={["accountingconfig", "ReceivableCustomField2"]}
-            label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
-          >
-            {ReceivableCustomFieldSelect}
-          </Form.Item>
-          <Form.Item
-            name={["accountingconfig", "ReceivableCustomField3"]}
-            label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
-          >
-            {ReceivableCustomFieldSelect}
-          </Form.Item>
-          <Form.Item
-            name={["md_classes"]}
-            label={t("bodyshop.fields.md_classes")}
-            rules={[
-              ({ getFieldValue }) => {
-                return {
-                  required: getFieldValue("enforce_class"),
-                  //message: t("general.validation.required"),
-                  type: "array"
-                };
-              }
-            ]}
-          >
-            <Select mode="tags" />
-          </Form.Item>
-          {ClosingPeriod.treatment === "on" && (
-            <Form.Item
-              name={["accountingconfig", "ClosingPeriod"]}
-              label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
-            >
-              <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
-            </Form.Item>
-          )}
-          {ADPPayroll.treatment === "on" && (
-            <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
-              <Input />
-            </Form.Item>
-          )}
-          {ADPPayroll.treatment === "on" && (
-            <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
-              <Input />
-            </Form.Item>
-          )}
-        </LayoutFormRow>
-      </FeatureWrapper>
+          </Form.Item>,
+          ...(HasFeatureAccess({ featureName: "export", bodyshop })
+            ? [
+                <Form.Item
+                  key="ReceivableCustomField1"
+                  name={["accountingconfig", "ReceivableCustomField1"]}
+                  label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
+                >
+                  {ReceivableCustomFieldSelect}
+                </Form.Item>,
+                <Form.Item
+                  key="ReceivableCustomField2"
+                  name={["accountingconfig", "ReceivableCustomField2"]}
+                  label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
+                >
+                  {ReceivableCustomFieldSelect}
+                </Form.Item>,
+                <Form.Item
+                  key="ReceivableCustomField3"
+                  name={["accountingconfig", "ReceivableCustomField3"]}
+                  label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
+                >
+                  {ReceivableCustomFieldSelect}
+                </Form.Item>,
+                <Form.Item
+                  key="md_classes"
+                  name={["md_classes"]}
+                  label={t("bodyshop.fields.md_classes")}
+                  rules={[
+                    ({ getFieldValue }) => {
+                      return {
+                        required: getFieldValue("enforce_class"),
+                        //message: t("general.validation.required"),
+                        type: "array"
+                      };
+                    }
+                  ]}
+                >
+                  <Select mode="tags" />
+                </Form.Item>,
+                <Form.Item
+                  key="enforce_class"
+                  name={["enforce_class"]}
+                  label={t("bodyshop.fields.enforce_class")}
+                  valuePropName="checked"
+                >
+                  <Switch />
+                </Form.Item>,
+                ...(ClosingPeriod.treatment === "on"
+                  ? [
+                      <Form.Item
+                        key="ClosingPeriod"
+                        name={["accountingconfig", "ClosingPeriod"]}
+                        label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
+                      >
+                        <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
+                      </Form.Item>
+                    ]
+                  : []),
+                ...(ADPPayroll.treatment === "on"
+                  ? [
+                      <Form.Item
+                        key="companyCode"
+                        name={["accountingconfig", "companyCode"]}
+                        label={t("bodyshop.fields.companycode")}
+                      >
+                        <Input />
+                      </Form.Item>
+                    ]
+                  : []),
+                ...(ADPPayroll.treatment === "on"
+                  ? [
+                      <Form.Item
+                        key="batchID"
+                        name={["accountingconfig", "batchID"]}
+                        label={t("bodyshop.fields.batchid")}
+                      >
+                        <Input />
+                      </Form.Item>
+                    ]
+                  : [])
+              ]
+            : [])
+        ]}
+      </LayoutFormRow>
      <FeatureWrapper featureName="scoreboard" noauth={() => null}>
        <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
          <Form.Item
@@ -435,211 +491,255 @@ export function ShopInfoGeneral({ form, bodyshop }) {
        </LayoutFormRow>
      </FeatureWrapper>
      <LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
-        <Form.Item
-          name={["md_referral_sources"]}
-          label={t("bodyshop.fields.md_referral_sources")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item name={["enforce_referral"]} label={t("bodyshop.fields.enforce_referral")} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["enforce_conversion_csr"]}
-          label={t("bodyshop.fields.enforce_conversion_csr")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["enforce_conversion_category"]}
-          label={t("bodyshop.fields.enforce_conversion_category")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["target_touchtime"]}
-          label={t("bodyshop.fields.target_touchtime")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0.1} precision={1} />
-        </Form.Item>
-        <Form.Item label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.md_hour_split.prep")}
-          name={["md_hour_split", "prep"]}
-          dependencies={[["md_hour_split", "paint"]]}
-          rules={[
-            ({ getFieldValue }) => ({
-              validator(rule, value) {
-                if (!value && !getFieldValue(["md_hour_split", "paint"])) {
-                  return Promise.resolve();
-                }
-                if (value + getFieldValue(["md_hour_split", "paint"]) === 1) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(t("bodyshop.validation.larsplit"));
+        {[
+          <Form.Item
+            key="md_referral_sources"
+            name={["md_referral_sources"]}
+            label={t("bodyshop.fields.md_referral_sources")}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+                type: "array"
              }
-            })
-          ]}
-        >
-          <InputNumber min={0} max={1} precision={2} />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.md_hour_split.paint")}
-          name={["md_hour_split", "paint"]}
-          dependencies={[["md_hour_split", "prep"]]}
-          rules={[
-            ({ getFieldValue }) => ({
-              validator(rule, value) {
-                if (!value && !getFieldValue(["md_hour_split", "paint"])) {
-                  return Promise.resolve();
-                }
-                if (value + getFieldValue(["md_hour_split", "prep"]) === 1) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(t("bodyshop.validation.larsplit"));
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>,
+          <Form.Item
+            key="enforce_referral"
+            name={["enforce_referral"]}
+            label={t("bodyshop.fields.enforce_referral")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="enforce_conversion_csr"
+            name={["enforce_conversion_csr"]}
+            label={t("bodyshop.fields.enforce_conversion_csr")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="enforce_conversion_category"
+            name={["enforce_conversion_category"]}
+            label={t("bodyshop.fields.enforce_conversion_category")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="target_touchtime"
+            name={["target_touchtime"]}
+            label={t("bodyshop.fields.target_touchtime")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
              }
-            })
-          ]}
-        >
-          <InputNumber min={0} max={1} precision={2} />
-        </Form.Item>
-        <Form.Item label={t("bodyshop.fields.jc_hourly_rates.mapa")} name={["jc_hourly_rates", "mapa"]}>
-          <CurrencyInput />
-        </Form.Item>
-        <Form.Item label={t("bodyshop.fields.jc_hourly_rates.mash")} name={["jc_hourly_rates", "mash"]}>
-          <CurrencyInput />
-        </Form.Item>
-        <Form.Item
-          name={["use_paint_scale_data"]}
-          label={t("bodyshop.fields.use_paint_scale_data")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["attach_pdf_to_email"]}
-          label={t("bodyshop.fields.attach_pdf_to_email")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["md_from_emails"]}
-          label={t("bodyshop.fields.md_from_emails")}
-          // rules={[
-          //   {
-          //     //message: t("general.validation.required"),
-          //     type: "array",
-          //   },
-          // ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          name={["md_email_cc", "parts_order"]}
-          label={t("bodyshop.fields.md_email_cc", { template: "parts_orders" })}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          name={["md_email_cc", "parts_return_slip"]}
-          label={t("bodyshop.fields.md_email_cc", { template: "parts_returns" })}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-
-        {HasFeatureAccess({ featureName: "timetickets", bodyshop }) && (
-          <>
-            <Form.Item
-              name={["tt_allow_post_to_invoiced"]}
-              label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item
-              name={["tt_enforce_hours_for_tech_console"]}
-              label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item
-              name={["bill_allow_post_to_closed"]}
-              label={t("bodyshop.fields.bill_allow_post_to_closed")}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-          </>
-        )}
-        <Form.Item
-          name={["md_ded_notes"]}
-          label={t("bodyshop.fields.md_ded_notes")}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <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")} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["uselocalmediaserver"]}
-          label={t("bodyshop.fields.uselocalmediaserver")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item name={["localmediaserverhttp"]} label={t("bodyshop.fields.localmediaserverhttp")}>
-          <Input />
-        </Form.Item>
-        <Form.Item name={["localmediaservernetwork"]} label={t("bodyshop.fields.localmediaservernetwork")}>
-          <Input />
-        </Form.Item>
-        <Form.Item name={["localmediatoken"]} label={t("bodyshop.fields.localmediatoken")}>
-          <Input />
-        </Form.Item>
+            ]}
+          >
+            <InputNumber min={0.1} precision={1} />
+          </Form.Item>,
+          <Form.Item key="use_fippa" label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="md_hour_split_prep"
+            label={t("bodyshop.fields.md_hour_split.prep")}
+            name={["md_hour_split", "prep"]}
+            dependencies={[["md_hour_split", "paint"]]}
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (!value && !getFieldValue(["md_hour_split", "paint"])) {
+                    return Promise.resolve();
+                  }
+                  if (value + getFieldValue(["md_hour_split", "paint"]) === 1) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(t("bodyshop.validation.larsplit"));
+                }
+              })
+            ]}
+          >
+            <InputNumber min={0} max={1} precision={2} />
+          </Form.Item>,
+          <Form.Item
+            key="md_hour_split_paint"
+            label={t("bodyshop.fields.md_hour_split.paint")}
+            name={["md_hour_split", "paint"]}
+            dependencies={[["md_hour_split", "prep"]]}
+            rules={[
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (!value && !getFieldValue(["md_hour_split", "paint"])) {
+                    return Promise.resolve();
+                  }
+                  if (value + getFieldValue(["md_hour_split", "prep"]) === 1) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(t("bodyshop.validation.larsplit"));
+                }
+              })
+            ]}
+          >
+            <InputNumber min={0} max={1} precision={2} />
+          </Form.Item>,
+          <Form.Item
+            key="jc_hourly_rates_mapa"
+            label={t("bodyshop.fields.jc_hourly_rates.mapa")}
+            name={["jc_hourly_rates", "mapa"]}
+          >
+            <CurrencyInput />
+          </Form.Item>,
+          <Form.Item
+            key="jc_hourly_rates_mash"
+            label={t("bodyshop.fields.jc_hourly_rates.mash")}
+            name={["jc_hourly_rates", "mash"]}
+          >
+            <CurrencyInput />
+          </Form.Item>,
+          <Form.Item
+            key="use_paint_scale_data"
+            name={["use_paint_scale_data"]}
+            label={t("bodyshop.fields.use_paint_scale_data")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="attach_pdf_to_email"
+            name={["attach_pdf_to_email"]}
+            label={t("bodyshop.fields.attach_pdf_to_email")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="md_from_emails"
+            name={["md_from_emails"]}
+            label={t("bodyshop.fields.md_from_emails")}
+            // rules={[
+            //   {
+            //     //message: t("general.validation.required"),
+            //     type: "array",
+            //   },
+            // ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>,
+          <Form.Item
+            key="md_email_cc_parts_order"
+            name={["md_email_cc", "parts_order"]}
+            label={t("bodyshop.fields.md_email_cc", { template: "parts_orders" })}
+            rules={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>,
+          <Form.Item
+            key="md_email_cc_parts_return_slip"
+            name={["md_email_cc", "parts_return_slip"]}
+            label={t("bodyshop.fields.md_email_cc", { template: "parts_returns" })}
+            rules={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>,
+          ...(HasFeatureAccess({ featureName: "timetickets", bodyshop })
+            ? [
+                <Form.Item
+                  key="tt_allow_post_to_invoiced"
+                  name={["tt_allow_post_to_invoiced"]}
+                  label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
+                  valuePropName="checked"
+                >
+                  <Switch />
+                </Form.Item>,
+                <Form.Item
+                  key="tt_enforce_hours_for_tech_console"
+                  name={["tt_enforce_hours_for_tech_console"]}
+                  label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
+                  valuePropName="checked"
+                >
+                  <Switch />
+                </Form.Item>,
+                <Form.Item
+                  key="bill_allow_post_to_closed"
+                  name={["bill_allow_post_to_closed"]}
+                  label={t("bodyshop.fields.bill_allow_post_to_closed")}
+                  valuePropName="checked"
+                >
+                  <Switch />
+                </Form.Item>
+              ]
+            : []),
+          <Form.Item
+            key="md_ded_notes"
+            name={["md_ded_notes"]}
+            label={t("bodyshop.fields.md_ded_notes")}
+            rules={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>,
+          <Form.Item
+            key="parts_queue_toggle"
+            label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
+            name={["md_functionality_toggles", "parts_queue_toggle"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="last_name_first"
+            name={["last_name_first"]}
+            label={t("bodyshop.fields.last_name_first")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="uselocalmediaserver"
+            name={["uselocalmediaserver"]}
+            label={t("bodyshop.fields.uselocalmediaserver")}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>,
+          <Form.Item
+            key="localmediaserverhttp"
+            name={["localmediaserverhttp"]}
+            label={t("bodyshop.fields.localmediaserverhttp")}
+          >
+            <Input />
+          </Form.Item>,
+          <Form.Item
+            key="localmediaservernetwork"
+            name={["localmediaservernetwork"]}
+            label={t("bodyshop.fields.localmediaservernetwork")}
+          >
+            <Input />
+          </Form.Item>,
+          <Form.Item key="localmediatoken" name={["localmediatoken"]} label={t("bodyshop.fields.localmediatoken")}>
+            <Input />
+          </Form.Item>
+        ]}
      </LayoutFormRow>
      <LayoutFormRow header={t("bodyshop.labels.shop_enabled_features")} id="sharing">
        <Form.Item
@@ -822,7 +922,11 @@ export function ShopInfoGeneral({ form, bodyshop }) {
          }}
        </Form.List>
      </LayoutFormRow>
-      <LayoutFormRow grow header=<span id="insurancecos-header">{t("bodyshop.labels.insurancecos")}</span> id="insurancecos">
+      <LayoutFormRow
+        grow
+        header=<span id="insurancecos-header">{t("bodyshop.labels.insurancecos")}</span>
+        id="insurancecos"
+      >
        <Form.List name={["md_ins_cos"]}>
          {(fields, { add, remove, move }) => {
            return (
--- a/client/src/components/shop-info/shop-info.rbac.component.jsx
+++ b/client/src/components/shop-info/shop-info.rbac.component.jsx
--- a/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
+++ b/client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -13,7 +13,7 @@ import { ColorPicker } from "./shop-info.rostatus.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });

@@ -22,7 +22,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {

  return (
    <div>
-      <LayoutFormRow>
+      <LayoutFormRow id="shopinfo-scheduling">
        <Form.Item
          label={t("bodyshop.fields.appt_length")}
          name={"appt_length"}
@@ -44,6 +44,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
              //message: t("general.validation.required"),
            }
          ]}
+          id="schedule_start_time"
        >
          <TimePicker disableSeconds={true} format="HH:mm" />
        </Form.Item>
@@ -56,6 +57,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
              //message: t("general.validation.required"),
            }
          ]}
+          id="schedule_end_time"
        >
          <TimePicker disableSeconds={true} format="HH:mm" />
        </Form.Item>
--- a/client/src/components/shop-info/useFormDataPreservation.js
+++ b/client/src/components/shop-info/useFormDataPreservation.js
@@ -0,0 +1,140 @@
+import { useCallback, useEffect } from "react";
+import { HasFeatureAccess } from "./../feature-wrapper/feature-wrapper.component";
+
+/**
+ * Custom hook to preserve form data for conditionally hidden fields based on feature access
+ * @param {Object} form - Ant Design form instance
+ * @param {Object} bodyshop - Bodyshop data for feature access checks (also contains existing database values)
+ * @param {Object} featureConfig - Configuration object defining which features and their associated fields to preserve
+ */
+export const useFormDataPreservation = (form, bodyshop, featureConfig) => {
+  const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => current?.[key], obj);
+  };
+
+  const setNestedValue = (obj, path, value) => {
+    const lastKey = path[path.length - 1];
+    const parentPath = path.slice(0, -1);
+
+    const parent = parentPath.reduce((current, key) => {
+      if (!current[key]) current[key] = {};
+      return current[key];
+    }, obj);
+
+    parent[lastKey] = value;
+  };
+
+  const preserveHiddenFormData = useCallback(() => {
+    const preservationData = {};
+    let hasDataToPreserve = false;
+
+    Object.entries(featureConfig).forEach(([featureName, fieldPaths]) => {
+      const hasAccess = HasFeatureAccess({ featureName, bodyshop });
+
+      if (!hasAccess) {
+        fieldPaths.forEach((fieldPath) => {
+          const currentValues = form.getFieldsValue();
+          let value = getNestedValue(currentValues, fieldPath);
+
+          if (value === undefined || value === null) {
+            value = getNestedValue(bodyshop, fieldPath);
+          }
+
+          if (value !== undefined && value !== null) {
+            setNestedValue(preservationData, fieldPath, value);
+            hasDataToPreserve = true;
+          }
+        });
+      }
+    });
+
+    if (hasDataToPreserve) {
+      form.setFieldsValue(preservationData);
+    }
+  }, [form, featureConfig, bodyshop]);
+
+  const getCompleteFormValues = () => {
+    const currentFormValues = form.getFieldsValue();
+    const completeValues = { ...currentFormValues };
+
+    Object.entries(featureConfig).forEach(([featureName, fieldPaths]) => {
+      const hasAccess = HasFeatureAccess({ featureName, bodyshop });
+
+      if (!hasAccess) {
+        fieldPaths.forEach((fieldPath) => {
+          let value = getNestedValue(currentFormValues, fieldPath);
+          if (value === undefined || value === null) {
+            value = getNestedValue(bodyshop, fieldPath);
+          }
+
+          if (value !== undefined && value !== null) {
+            setNestedValue(completeValues, fieldPath, value);
+          }
+        });
+      }
+    });
+
+    return completeValues;
+  };
+
+  const createSubmissionHandler = (originalHandler) => {
+    return () => {
+      const completeValues = getCompleteFormValues();
+
+      // Call the original handler with complete values including hidden data
+      return originalHandler(completeValues);
+    };
+  };
+
+  useEffect(() => {
+    preserveHiddenFormData();
+  }, [bodyshop, preserveHiddenFormData]);
+
+  return { preserveHiddenFormData, getCompleteFormValues, createSubmissionHandler };
+};
+
+/**
+ * Predefined feature configurations for common shop-info components
+ */
+export const FEATURE_CONFIGS = {
+  responsibilitycenters: {
+    export: [
+      ["md_responsibility_centers", "costs"],
+      ["md_responsibility_centers", "profits"],
+      ["md_responsibility_centers", "defaults"],
+      ["md_responsibility_centers", "dms_defaults"],
+      ["md_responsibility_centers", "taxes", "itemexemptcode"],
+      ["md_responsibility_centers", "taxes", "invoiceexemptcode"],
+      ["md_responsibility_centers", "ar"],
+      ["md_responsibility_centers", "refund"],
+      ["md_responsibility_centers", "sales_tax_codes"],
+      ["md_responsibility_centers", "ttl_adjustment"],
+      ["md_responsibility_centers", "ttl_tax_adjustment"]
+    ]
+  },
+  general: {
+    export: [
+      ["accountingconfig", "qbo"],
+      ["accountingconfig", "qbo_usa"],
+      ["accountingconfig", "qbo_departmentid"],
+      ["accountingconfig", "tiers"],
+      ["accountingconfig", "twotierpref"],
+      ["accountingconfig", "printlater"],
+      ["accountingconfig", "emaillater"],
+      ["accountingconfig", "ReceivableCustomField1"],
+      ["accountingconfig", "ReceivableCustomField2"],
+      ["accountingconfig", "ReceivableCustomField3"],
+      ["md_classes"],
+      ["enforce_class"],
+      ["accountingconfig", "ClosingPeriod"],
+      ["accountingconfig", "companyCode"],
+      ["accountingconfig", "batchID"]
+    ],
+    bills: [
+      ["bill_tax_rates", "federal_tax_rate"],
+      ["bill_tax_rates", "state_tax_rate"],
+      ["bill_tax_rates", "local_tax_rate"]
+    ],
+    timetickets: [["tt_allow_post_to_invoiced"], ["tt_enforce_hours_for_tech_console"], ["bill_allow_post_to_closed"]]
+  }
+};
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/client/src/components/task-center/task-center.component.jsx
@@ -0,0 +1,156 @@
+import { Virtuoso } from "react-virtuoso";
+import { Badge, Button, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { forwardRef, useMemo, useRef } from "react";
+import day from "../../utils/day.js";
+import "./task-center.styles.scss";
+import {
+  ArrowRightOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  PlusCircleOutlined,
+  QuestionCircleOutlined
+} from "@ant-design/icons";
+
+const TaskCenterComponent = forwardRef(
+  ({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => {
+    const { t } = useTranslation();
+    const virtuosoRef = useRef(null);
+
+    const sectionIcons = {
+      [t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
+      [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
+    };
+
+    const groups = useMemo(() => {
+      const now = day();
+      const today = now.startOf("day");
+
+      const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
+      const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
+      const upcoming = tasks.filter(
+        (t) => t.due_date && day(t.due_date).isAfter(today) && !day(t.due_date).isSame(today, "day")
+      );
+      const noDueDate = tasks.filter((t) => !t.due_date);
+
+      return [
+        { label: t("tasks.labels.overdue"), tasks: overdue },
+        { label: t("tasks.labels.due_today"), tasks: dueToday },
+        { label: t("tasks.labels.upcoming"), tasks: upcoming },
+        { label: t("tasks.labels.no_due_date"), tasks: noDueDate }
+      ].filter((group) => group.tasks.length > 0);
+    }, [tasks, t]);
+
+    const groupCounts = useMemo(() => groups.map((group) => group.tasks.length), [groups]);
+
+    const flatTasks = useMemo(() => groups.flatMap((group) => group.tasks), [groups]);
+
+    const priorityColors = {
+      1: "red",
+      2: "orange",
+      3: "green"
+    };
+
+    const getPriorityColor = (priority) => priorityColors[priority] || null;
+
+    const groupContent = (groupIndex) => {
+      const { label, tasks } = groups[groupIndex];
+      let displayCount = tasks.length;
+      if (label === t("tasks.labels.no_due_date")) {
+        displayCount =
+          incompleteTaskCount -
+          groups.reduce((sum, group, idx) => (idx !== groupIndex ? sum + group.tasks.length : sum), 0);
+      }
+      return (
+        <div className="section-title">
+          {sectionIcons[label]}
+          {label} ({displayCount})
+        </div>
+      );
+    };
+
+    const itemContent = (index) => {
+      const task = flatTasks[index];
+      const priorityColor = getPriorityColor(task.priority);
+      return (
+        <div
+          className="task-row"
+          onClick={() => onTaskClick(task.id)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              onTaskClick(task.id);
+            }
+          }}
+        >
+          <div className="task-title-cell">
+            <div className="task-row-container">
+              <div className="task-title">{task.title}</div>
+              <div className="task-ro-number">
+                {t("tasks.labels.ro-number", {
+                  ro_number: task.job?.ro_number || t("general.labels.na")
+                })}
+              </div>
+            </div>
+          </div>
+          <div className="task-due-cell">
+            {task.due_date && <span>{day(task.due_date).fromNow()}</span>}
+            {!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
+          </div>
+        </div>
+      );
+    };
+
+    if (error) {
+      return (
+        <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+          <div className="task-header">
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </div>
+          <div className="error-message">{t("tasks.errors.load_failed")}</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
+        <div className="task-header">
+          <Badge count={incompleteTaskCount} size="medium" offset={[13, -5]}>
+            <h3>{t("tasks.labels.my_tasks_center")}</h3>
+          </Badge>
+          <div className="task-header-actions">
+            <Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
+            {loading && <Spin spinning={loading} size="small" />}
+          </div>
+        </div>
+
+        {tasks.length === 0 && !loading ? (
+          <div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            style={{ height: "550px", width: "100%" }}
+            groupCounts={groupCounts}
+            groupContent={groupContent}
+            itemContent={itemContent}
+            endReached={hasMore && !loading ? onLoadMore : undefined}
+            components={{
+              Footer: () =>
+                loading ? (
+                  <div className="loading-footer">
+                    <Spin />
+                  </div>
+                ) : null
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+TaskCenterComponent.displayName = "TaskCenterComponent";
+export default TaskCenterComponent;
--- a/client/src/components/task-center/task-center.container.jsx
+++ b/client/src/components/task-center/task-center.container.jsx
@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket";
+import { useIsEmployee } from "../../utils/useIsEmployee";
+import TaskCenterComponent from "./task-center.component";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from "../../graphql/tasks.queries";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+});
+
+const TaskCenterContainer = ({
+  visible,
+  onClose,
+  bodyshop,
+  currentUser,
+  setTaskUpsertContext,
+  incompleteTaskCount
+}) => {
+  const [tasks, setTasks] = useState([]);
+  const { isConnected } = useSocket();
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
+
+  const assignedToId = useMemo(() => {
+    const employee = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email);
+    return employee?.id || null;
+  }, [bodyshop, currentUser]);
+
+  // Query 1: Tasks with due dates
+  const {
+    data: dueDateData,
+    loading: dueLoading,
+    error: dueError
+  } = useQuery(QUERY_TASKS_WITH_DUE_DATES, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ due_date: "asc" }, { created_at: "desc" }]
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  // Query 2: Tasks with no due date (paginated)
+  const {
+    data: noDueDateData,
+    loading: noDueLoading,
+    error: noDueError,
+    fetchMore
+  } = useQuery(QUERY_TASKS_NO_DUE_DATE_PAGINATED, {
+    variables: {
+      bodyshop: bodyshop?.id,
+      assigned_to: assignedToId,
+      order: [{ priority: "asc" }, { created_at: "desc" }],
+      limit: INITIAL_TASKS, // Adjust this constant as needed
+      offset: 0
+    },
+    skip: !bodyshop?.id || !assignedToId || !isEmployee || !currentUser?.email,
+    fetchPolicy: "cache-and-network",
+    pollInterval: isConnected ? 0 : TASKS_CENTER_POLL_INTERVAL
+  });
+
+  // Combine tasks from both queries
+  useEffect(() => {
+    const dueDateTasks = dueDateData?.tasks || [];
+    const noDueDateTasks = noDueDateData?.tasks || [];
+    setTasks([...dueDateTasks, ...noDueDateTasks]);
+  }, [dueDateData, noDueDateData]);
+
+  const noDueDateLength = noDueDateData?.tasks?.length || 0;
+  const totalNoDueDate = noDueDateData?.tasks_aggregate?.aggregate?.count || 0;
+  const hasMore = noDueDateLength < totalNoDueDate;
+
+  // Handle pagination for no-due-date tasks
+  const handleLoadMore = () => {
+    fetchMore({
+      variables: {
+        offset: noDueDateData?.tasks?.length || 0
+      },
+      updateQuery: (prev, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return prev;
+        return {
+          ...prev,
+          tasks: [...prev.tasks, ...fetchMoreResult.tasks],
+          tasks_aggregate: fetchMoreResult.tasks_aggregate
+        };
+      }
+    });
+  };
+
+  const handleTaskClick = useCallback(
+    (id) => {
+      const task = tasks.find((t) => t.id === id);
+      if (task) {
+        setTaskUpsertContext({
+          context: {
+            existingTask: task
+          }
+        });
+      }
+    },
+    [tasks, setTaskUpsertContext]
+  );
+
+  const createNewTask = () => {
+    setTaskUpsertContext({ actions: {}, context: {} });
+  };
+
+  return (
+    <TaskCenterComponent
+      visible={visible}
+      onClose={onClose}
+      tasks={tasks}
+      loading={dueLoading || noDueLoading}
+      error={dueError || noDueError}
+      onTaskClick={handleTaskClick}
+      onLoadMore={handleLoadMore}
+      hasMore={hasMore}
+      createNewTask={createNewTask}
+      incompleteTaskCount={incompleteTaskCount}
+    />
+  );
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer);
--- a/client/src/components/task-center/task-center.styles.scss
+++ b/client/src/components/task-center/task-center.styles.scss
@@ -0,0 +1,143 @@
+.task-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  width: 500px;
+  max-width: 500px;
+  background: var(--task-bg);
+  color: var(--task-text);
+  border: 1px solid var(--task-border);
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  display: none;
+  overflow-x: hidden;
+
+  &.visible {
+    display: block;
+  }
+
+  .task-header {
+    padding: 4px 10px;
+    border-bottom: 1px solid var(--task-header-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--task-header-bg);
+
+    h3 {
+      font-size: 14px;
+      margin: 0;
+    }
+
+    .create-task-button {
+      border: none;
+      color: var(--task-button-text);
+      padding: 4px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        background-color: var(--task-button-hover-bg);
+      }
+    }
+  }
+
+  .task-section {
+    margin: 0;
+    padding: 0;
+  }
+
+  .section-title {
+    padding: 0px 10px;
+    margin: 0px;
+    background: var(--task-section-bg);
+    font-weight: 650;
+    border-bottom: 1px solid var(--task-section-border);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .task-row-container {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  .task-row {
+    cursor: pointer;
+    border-bottom: 1px solid var(--task-row-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &:hover {
+      background: var(--task-row-hover-bg);
+    }
+
+    .task-title-cell {
+      flex: 1;
+      padding: 6px 8px;
+      vertical-align: top;
+      line-height: 1.2;
+      max-width: 350px;
+
+      .task-title {
+        font-size: 16px;
+        font-weight: 550;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .task-ro-number {
+        margin-top: 20px;
+        color: var(--task-ro-number);
+      }
+    }
+
+    .task-due-cell {
+      padding: 6px 8px;
+      vertical-align: top;
+      line-height: 1.2;
+      text-align: right;
+      white-space: nowrap;
+      color: var(--task-due-text);
+    }
+  }
+
+  button {
+    margin: 8px auto;
+    padding: 4px 10px;
+    background-color: var(--task-button-bg);
+    color: var(--task-button-text);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--task-button-hover-bg);
+    }
+
+    &:disabled {
+      background-color: var(--task-button-disabled-bg);
+      cursor: not-allowed;
+    }
+  }
+
+  .no-tasks-message,
+  .error-message {
+    padding: 16px;
+    text-align: center;
+    color: var(--task-message-text);
+  }
+
+  .loading-footer {
+    padding: 16px;
+    text-align: center;
+  }
+}
--- a/client/src/components/task-list/task-list.component.jsx
+++ b/client/src/components/task-list/task-list.component.jsx
@@ -4,13 +4,12 @@ import {
  DeleteFilled,
  DeleteOutlined,
  EditFilled,
-  ExclamationCircleFilled,
  PlusCircleFilled,
  SyncOutlined
 } from "@ant-design/icons";
 import { Button, Card, Space, Switch, Table } from "antd";
 import queryString from "query-string";
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -19,6 +18,7 @@ import { pageLimit } from "../../utils/config";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
 import dayjs from "../../utils/day";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
+import PriorityLabel from "../../utils/tasksPriorityLabel.jsx";

 /**
 * Task List Component
@@ -54,47 +54,12 @@ const RemindAtRecord = ({ remindAt }) => {
  );
 };

-/**
- * Priority Label Component
- * @param priority
- * @returns {Element}
- * @constructor
- */
-const PriorityLabel = ({ priority }) => {
-  switch (priority) {
-    case 1:
-      return (
-        <div>
-          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
-        </div>
-      );
-    case 2:
-      return (
-        <div>
-          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
-        </div>
-      );
-    case 3:
-      return (
-        <div>
-          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
-        </div>
-      );
-    default:
-      return (
-        <div>
-          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
-        </div>
-      );
-  }
-};
-
 const mapDispatchToProps = (dispatch) => ({
  // Existing dispatch props...
  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });

-const mapStateToProps = (state) => ({});
+const mapStateToProps = () => ({});

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

--- a/client/src/components/task-list/task-list.container.jsx
+++ b/client/src/components/task-list/task-list.container.jsx
@@ -4,7 +4,6 @@ import { useMutation, useQuery } from "@apollo/client";
 import { MUTATION_TOGGLE_TASK_COMPLETED, MUTATION_TOGGLE_TASK_DELETED } from "../../graphql/tasks.queries.js";
 import { pageLimit } from "../../utils/config.js";
 import AlertComponent from "../alert/alert.component.jsx";
-import React from "react";
 import TaskListComponent from "./task-list.component.jsx";
 import { useTranslation } from "react-i18next";
 import { connect, useDispatch } from "react-redux";
@@ -20,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
 });

-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});

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

@@ -55,8 +54,8 @@ export function TaskListContainer({
      bodyshop: bodyshop.id,
      [relationshipType]: relationshipId,
      deleted: deleted === "true",
-      completed: completed === "true", //TODO: Find where mine is set.
-      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined, // replace currentUserID with the actual ID of the current user
+      completed: completed === "true",
+      assigned_to: onlyMine ? bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id : undefined,
      offset: page ? (page - 1) * pageLimit : 0,
      limit: pageLimit,
      order: [
--- a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx
+++ b/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx
@@ -1,5 +1,4 @@
 import { Col, Form, Input, Row, Select, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
@@ -8,6 +7,7 @@ import { connect } from "react-redux";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { Link } from "react-router-dom";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -42,7 +42,7 @@ export function TaskUpsertModalComponent({
  ];

  const generatePresets = (job) => {
-    if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
+    if (!job || !selectedJobDetails) return datePickerPresets;
    const relativePresets = [];

    if (selectedJobDetails?.scheduled_completion) {
@@ -97,13 +97,8 @@ export function TaskUpsertModalComponent({
    });
  };

-  /**
-   * Change the selected job id
-   * @param jobId
-   */
  const changeJobId = (jobId) => {
    setSelectedJobId(jobId || null);
-    // Reset the form fields when selectedJobId changes
    clearRelations();
  };

@@ -163,6 +158,13 @@ export function TaskUpsertModalComponent({
                required: true
              }
            ]}
+            extra={
+              existingTask && selectedJobId ? (
+                <div style={{ textAlign: "right" }}>
+                  <Link to={`/manage/jobs/${selectedJobId}`}>{t("tasks.labels.go_to_job")}</Link>
+                </div>
+              ) : null
+            }
          >
            <JobSearchSelectComponent
              placeholder={t("tasks.placeholders.jobid")}
@@ -203,7 +205,18 @@ export function TaskUpsertModalComponent({
          </Form.Item>
        </Col>
        <Col span={8}>
-          <Form.Item label={t("tasks.fields.billid")} name="billid">
+          <Form.Item
+            label={t("tasks.fields.billid")}
+            name="billid"
+            extra={
+              form.getFieldValue("billid") ? (
+                <Link to={`/manage/bills?billid=${form.getFieldValue("billid")}`}>
+                  {t("tasks.links.go_to_bill")} (
+                  {selectedJobDetails?.bills?.find((bill) => bill.id === form.getFieldValue("billid"))?.invoice_number})
+                </Link>
+              ) : null
+            }
+          >
            <Select
              allowClear
              placeholder={t("tasks.placeholders.billid")}
--- a/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
+++ b/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
--- a/client/src/components/time-ticket-task-modal/time-ticket-task-modal.styles.scss
+++ b/client/src/components/time-ticket-task-modal/time-ticket-task-modal.styles.scss
@@ -6,7 +6,7 @@
  td {
    padding: 8px;
    text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--table-border-color);

    .ant-form-item {
      margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
  }

  tr:hover {
-    background-color: #f5f5f5;
+    background-color: var(--table-hover-bg);
  }
 }
--- a/client/src/components/upsell/upsell.component.jsx
+++ b/client/src/components/upsell/upsell.component.jsx
@@ -11,7 +11,7 @@ import {
 } from "@ant-design/icons";
 import { Button, Card, Result } from "antd";
 import i18n from "i18next";
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { store } from "../../redux/store.js";
@@ -21,7 +21,6 @@ import "./upsell.styles.scss";
 export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) {
  const { t } = useTranslation();
  const resultProps = upsell || upsellEnum[featureName][subFeatureName];
-
  const componentRef = useRef(null);

  useEffect(() => {
@@ -34,12 +33,10 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
      mask.style.left = 0;
      mask.style.width = "100%";
      mask.style.height = "100%";
-      mask.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+      mask.style.backgroundColor = "var(--mask-bg)";
      // mask.style.zIndex = 9999;
      parentElement.style.position = "relative";
-
      parentElement.prepend(mask);
-
      return () => {
        parentElement.removeChild(mask);
      };
@@ -47,18 +44,22 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
  }, [disableMask]);

  if (!resultProps) return <Result status="info" title={t("upsell.messages.generic")} />;
+
  return (
    <div ref={componentRef}>
      <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
    </div>
  );
 }
+
 //Kept in the same function as the result props line must mirror and doesnt warrant a separate function.
 export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureName }) {
  const resultProps = upsell || upsellEnum[featureName][subFeatureName];
  return (
    <div className="mask-wrapper">
-      <div className="mask-content">{children}</div>
+      <div className="mask-content" style={{ backgroundColor: "var(--mask-bg)" }}>
+        {children}
+      </div>
      <div className="mask-overlay">
        <Card size="small">
          <Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
@@ -71,7 +72,6 @@ export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureNam
 //This is kept in this function as pulling it out into it's own util/enum prevents passing JSX as an `extra` prop
 export const upsellEnum = () => {
  const { currentUser, bodyshop } = store.getState().user;
-
  const [first_name, ...last_name] = currentUser?.displayName ? currentUser.displayName.split(" ") : [];
  const LearnMoreLink = encodeURI(
    InstanceRenderManager({
@@ -79,7 +79,6 @@ export const upsellEnum = () => {
      rome: `https://forms.zohopublic.com/rometech/form/ROLearnMore/formperma/0G29z8LgLlvKK8nno-b7s-GHgNXwIFlrMeE0mC394L4?first_name=${first_name || ""}&last_name=${last_name.join(" ") || ""}&shop_name=${bodyshop?.shopname || ""}&email=${currentUser?.email || ""}&shop_phone=${bodyshop?.phone || ""}`
    })
  );
-
  return {
    bills: {
      autoreconcile: {
--- a/client/src/components/upsell/upsell.styles.scss
+++ b/client/src/components/upsell/upsell.styles.scss
@@ -1,6 +1,5 @@
 .mask-wrapper {
  position: relative;
-//Newly added
  display: flex;
  justify-content: center;
  align-items: center;
@@ -8,12 +7,8 @@
 }

 .mask-content {
-  // filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--mask-content-bg);
  pointer-events: none;
-
-  //Newly added
-  //width: 100%;
 }

 .mask-overlay {
@@ -22,35 +17,8 @@
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
- // width: 100%
 }

 .mask-overlay .ant-card {
  max-width: 100%;
 }
-
-// .mask-wrapper {
-//   position: relative;
-//   display: inline-block;
-// }
-
-// .mask-content {
-//   filter: blur(5px);
-//   pointer-events: none;
-// }
-
-// .mask-overlay {
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   width: 100%;
-//   height: 100%;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   z-index: 10;
-// }
-
-// .mask-overlay .ant-card {
-//   max-width: 100%;
-// }
--- a/client/src/components/vendor-search-select/vendor-search-select.component.jsx
+++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
@@ -52,6 +52,7 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
            >
              {label}
            </div>
+
            {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
          </div>
        );
@@ -116,6 +117,11 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
                {o.name}
              </div>
              <Space style={{ marginLeft: "1rem" }}>
+                {o.tags?.map((tag, idx) => (
+                  <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
+                    {tag}
+                  </Tag>
+                ))}
                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
              </Space>
--- a/client/src/components/vendors-form/vendors-form.component.jsx
+++ b/client/src/components/vendors-form/vendors-form.component.jsx
@@ -1,7 +1,7 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Divider, Form, Input, InputNumber, Space, Switch } from "antd";
+import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -179,6 +179,18 @@ export function VendorsFormComponent({
        }
      </LayoutFormRow>

+      <Form.Item
+        name="tags"
+        label={t("vendor.fields.tags")}
+        rules={[
+          {
+            //message: t("general.validation.required"),
+            type: "array"
+          }
+        ]}
+      >
+        <Select mode="tags" />
+      </Form.Item>
      {DmsAp.treatment === "on" && (
        <Form.Item label={t("vendors.fields.dmsid")} name="dmsid">
          <Input />
--- a/client/src/components/vendors-list/vendors-list.component.jsx
+++ b/client/src/components/vendors-list/vendors-list.component.jsx
@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table, Tag } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,6 +38,18 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
      title: t("vendors.fields.city"),
      dataIndex: "city",
      key: "city"
+    },
+    {
+      title: t("vendors.fields.tags"),
+      dataIndex: "tags",
+      key: "tags",
+      render: (text, record) => (
+        <Space>
+          {record?.tags?.map((tag, idx) => (
+            <Tag key={idx}>{tag}</Tag>
+          ))}
+        </Space>
+      )
    }
  ];

--- a/client/src/contexts/SocketIO/socketProvider.jsx
+++ b/client/src/contexts/SocketIO/socketProvider.jsx
@@ -1,4 +1,3 @@
-// SocketProvider.js
 import { useEffect, useRef, useState } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
@@ -16,7 +15,9 @@ import {
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { SocketContext, INITIAL_NOTIFICATIONS } from "./useSocket.js";
+import { INITIAL_NOTIFICATIONS, SocketContext } from "./useSocket.js";
+
+const LIMIT = INITIAL_NOTIFICATIONS;

 /**
 * Socket Provider - Scenario Notifications / Web Socket related items
@@ -157,7 +158,10 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
        auth: { token, bodyshopId: bodyshop.id },
        reconnectionAttempts: Infinity,
        reconnectionDelay: 2000,
-        reconnectionDelayMax: 10000
+        reconnectionDelayMax: 60000
+        // randomizationFactor: 0.5,
+        // transports: ["websocket", "polling"], // Add this to prefer WebSocket with polling fallback
+        // rememberUpgrade: true
      });

      socketRef.current = socketInstance;
@@ -167,6 +171,82 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
        switch (message.type) {
          case "alert-update":
            store.dispatch(addAlerts(message.payload));
+            break;
+          case "task-created":
+          case "task-updated":
+          case "task-deleted":
+            const payload = message.payload;
+            const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email)?.id;
+            if (!assignedToId || payload.assigned_to !== assignedToId) return;
+
+            const dueVars = {
+              bodyshop: bodyshop?.id,
+              assigned_to: assignedToId,
+              order: [{ due_date: "asc" }, { created_at: "desc" }]
+            };
+            const noDueVars = {
+              bodyshop: bodyshop?.id,
+              assigned_to: assignedToId,
+              order: [{ created_at: "desc" }],
+              limit: LIMIT,
+              offset: 0
+            };
+
+            const whereBase = {
+              bodyshopid: { _eq: bodyshop?.id },
+              assigned_to: { _eq: assignedToId },
+              deleted: { _eq: false },
+              completed: { _eq: false }
+            };
+            const whereDue = { ...whereBase, due_date: { _is_null: false } };
+            const whereNoDue = { ...whereBase, due_date: { _is_null: true } };
+
+            // Helper to invalidate a cache entry
+            const invalidateCache = (fieldName, args) => {
+              try {
+                client.cache.evict({
+                  id: "ROOT_QUERY",
+                  fieldName,
+                  args
+                });
+              } catch (error) {
+                console.error("Error invalidating cache:", error);
+              }
+            };
+
+            // Invalidate lists and aggregates based on event type
+            if (message.type === "task-deleted" || message.type === "task-updated") {
+              // Invalidate both lists and no due aggregate for deletes and updates
+              invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
+              invalidateCache("tasks", {
+                where: whereNoDue,
+                order_by: noDueVars.order,
+                limit: noDueVars.limit,
+                offset: noDueVars.offset
+              });
+              invalidateCache("tasks_aggregate", { where: whereNoDue });
+            } else if (message.type === "task-created") {
+              // For creates, invalidate the target list and no due aggregate if applicable
+              const hasDue = !!payload.due_date;
+              if (hasDue) {
+                invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
+              } else {
+                invalidateCache("tasks", {
+                  where: whereNoDue,
+                  order_by: noDueVars.order,
+                  limit: noDueVars.limit,
+                  offset: noDueVars.offset
+                });
+                invalidateCache("tasks_aggregate", { where: whereNoDue });
+              }
+            }
+
+            // Always invalidate the total count for all events (handles creates, deletes, updates including completions)
+            invalidateCache("tasks_aggregate", { where: whereBase });
+
+            // Garbage collect after evictions
+            client.cache.gc();
+
            break;
          default:
            break;
--- a/client/src/contexts/SocketIO/useSocket.js
+++ b/client/src/contexts/SocketIO/useSocket.js
@@ -3,6 +3,8 @@ import { createContext, useContext } from "react";
 const SocketContext = createContext(null);

 const INITIAL_NOTIFICATIONS = 10;
+const INITIAL_TASKS = 5;
+const TASKS_CENTER_POLL_INTERVAL = 60 * 60 * 1000; // 1 hour in milliseconds

 const useSocket = () => {
  const context = useContext(SocketContext);
@@ -10,4 +12,4 @@ const useSocket = () => {
  return context;
 };

-export { SocketContext, INITIAL_NOTIFICATIONS, useSocket };
+export { SocketContext, INITIAL_NOTIFICATIONS, INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket };
--- a/client/src/graphql/appointments.queries.js
+++ b/client/src/graphql/appointments.queries.js
@@ -31,6 +31,8 @@ export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
      color
      note
      job {
+        scheduled_in
+        scheduled_completion
        alt_transport
        ro_number
        ownr_ln
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Allan Carr	141b05f558	IO-3349 Chart Enqueue and Label Required Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-22 11:29:33 -07:00
Dave Richer	8c9ef375be	Merged in hotfix/background-colors-dark-mode (pull request #2485 ) Hotfix/background colors dark mode	2025-08-18 18:39:42 +00:00
Dave	8295cb111a	Fix Dark Mode Schedule	2025-08-18 14:37:00 -04:00
Dave	951d214d49	feature/IO-3255-simplified-parts-management - Beef Up Change Request Parser, add Change Request documentation data	2025-08-18 14:13:16 -04:00
Dave Richer	6f19c1dd3f	Merged in release/2025-08-15 (pull request #2478 ) Release/2025-08-15 into master-AIO - IO-1113, IO-3285, IO-3307, IO-3330, IO-3332, IO-3335	2025-08-16 01:13:04 +00:00
Allan Carr	637e95c351	Merged in feature/IO-3330-CARFAX-Datapump (pull request #2474 ) Feature/IO-3330 CARFAX Datapump Approved-by: Dave Richer	2025-08-14 18:59:34 +00:00
Allan Carr	0cadf007b5	IO-3330 CARFAX Datapump Prep for express upgrade with return Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-14 11:30:04 -07:00
Allan Carr	60258a0f5d	IO-3330 CARFAX Datapump Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-14 09:17:02 -07:00
Allan Carr	7873405a30	IO-3330 CARFAX Datapump Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-14 08:44:10 -07:00
Allan Carr	7639655911	Merged in feature/IO-3330-CARFAX-Datapump (pull request #2471 ) IO-3330 CARFAX Datapump Approved-by: Dave Richer	2025-08-14 14:26:03 +00:00
Allan Carr	4fb1871044	Merged in feature/IO-3335-QBO-Payment-Logging (pull request #2470 ) IO-3335 QBO Payment Logging Approved-by: Dave Richer	2025-08-14 14:25:15 +00:00
Allan Carr	e5dd1edf13	IO-3330 CARFAX Datapump Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-13 21:49:55 -07:00
Allan Carr	542c95c395	IO-3335 QBO Payment Logging Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-13 16:35:52 -07:00
Patrick Fic	2b40793c77	Merged in feature/IO-3322-intellipay-refund (pull request #2465 ) IO-3332 Add error message to intellipay refund error.	2025-08-11 19:29:59 +00:00
Dave Richer	4d475e25fa	release/2025-08-15 - Add LogImexEvent for Theme toggling / remove Tooltip with translations (no longer necessary)	2025-08-11 14:27:48 -04:00
Allan Carr	4e5aba59d7	Merged in feature/IO-3285-Shop-Config-Lite-Basic (pull request #2456 ) IO-3285 Shop Config Lite-Basic Approved-by: Dave Richer	2025-08-11 17:50:02 +00:00
Patrick Fic	09f96f0b68	Merged in feature/IO-3307-imgproxy-bill-route (pull request #2455 ) IO-3307 Resolve bill document for imgproxy. Approved-by: Dave Richer	2025-08-11 17:46:03 +00:00
Dave Richer	f0c166907b	Merged in feature/IO-1113-Online-Dark-Mode (pull request #2460 ) feature/IO-1113-Online-Dark-Mode - Adjust Car SVG Background color in Dark mode	2025-08-08 16:51:26 +00:00
Dave Richer	c06b4e8af5	feature/IO-1113-Online-Dark-Mode - Adjust Car SVG Background color in Dark mode	2025-08-08 12:51:00 -04:00
Dave Richer	a7e21b0505	Merged in feature/IO-1113-Online-Dark-Mode (pull request #2458 ) Feature/IO-1113 Online Dark Mode	2025-08-08 16:20:48 +00:00
Dave Richer	3b481afa9e	feature/IO-1113-Online-Dark-Mode - Finish	2025-08-08 12:14:11 -04:00
Patrick Fic	75de177b7b	IO-3332 Add error message to intellipay refund error.	2025-08-08 09:11:48 -07:00
Dave Richer	ec6c0279de	feature/IO-1113-Online-Dark-Mode - Toggle / Local storage solution	2025-08-08 11:53:51 -04:00
Dave Richer	c9572d2db5	feature/IO-1113-Online-Dark-Mode - Remove unnecessary forward ref	2025-08-08 10:38:47 -04:00
Dave Richer	93e9e20f6f	feature/IO-1113-Online-Dark-Mode - Initial Commit	2025-08-08 10:23:09 -04:00
Allan Carr	4e8ea736c5	IO-3285 Shop Config Lite-Basic Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-07 20:45:04 -07:00
Patrick Fic	8f00dbfc17	IO-3307 Resolve bill document for imgproxy.	2025-08-07 13:54:39 -07:00
Dave Richer	55d242d40d	Merged in hotfix/2025-08-07 (pull request #2454 ) IO-3322 IntelliPay Refund	2025-08-07 17:58:49 +00:00
Allan Carr	4f99ae40d3	Merged in feature/IO-3322-IntelliPay-Refund (pull request #2453 ) IO-3322 IntelliPay Refund Approved-by: Dave Richer	2025-08-07 17:28:21 +00:00
Allan Carr	d94b573ae6	Merged in feature/IO-3322-IntelliPay-Refund (pull request #2450 ) IO-3322 IntelliPay Refund Approved-by: Dave Richer	2025-08-07 15:54:03 +00:00
Allan Carr	790ab0447f	IO-3322 IntelliPay Refund Add logging to capture Response from IntelliPay API on success Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-08-06 16:30:56 -07:00
Dave Richer	3737fe457f	Merged in release/2025-08-01 (pull request #2448 ) Release/2025 08 01 into master-AIO - IO-2604, IO-3292, IO-3310, IO-3315, IO-3316, IO-3318, IO-3319, IO-3320	2025-08-02 01:21:40 +00:00
Allan Carr	bb4e8eb5bd	Merged in feature/IO-3320-Responsibility-Center-RBAC (pull request #2446 ) IO-3320 Responsibility Center RBAC Approved-by: Dave Richer	2025-07-31 19:51:38 +00:00
Allan Carr	27a07e8d5d	IO-3320 Responsibility Center RBAC Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-31 12:49:56 -07:00
Allan Carr	e2618eee83	Merged in feature/IO-2604-vendor-tagging (pull request #2444 ) IO-2604 Vendor Tagging English Translation Approved-by: Dave Richer	2025-07-31 19:47:53 +00:00
Dave Richer	66c51a4be5	release/2025-08-01 - Fix Notes via refetch queries, cache manipulation too complex	2025-07-31 15:46:34 -04:00
Allan Carr	d5afcaeaab	IO-2604 Vendor Tagging English Translation Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-31 11:35:02 -07:00
Allan Carr	c332ec11b7	Merged in feature/IO-3319-Job-Status-Change (pull request #2442 ) IO-3319 Job Status Change Approved-by: Dave Richer	2025-07-30 18:13:59 +00:00
Allan Carr	cf31290f05	IO-3319 Job Status Change Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-30 11:12:15 -07:00
Allan Carr	dbbab910b6	Merged in feature/IO-3318-Close-Job-Page-UI-Bugs (pull request #2440 ) IO-3318 Close Job Page UI Bugs Approved-by: Dave Richer	2025-07-30 17:10:40 +00:00
Allan Carr	abf01b4966	IO-3318 Close Job Page UI Bugs Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-29 19:19:38 -07:00
Allan Carr	a965f9edf5	Merged in feature/IO-3315-CDK-InService-Date (pull request #2437 ) IO-3315 CDK InService Date Approved-by: Dave Richer	2025-07-29 17:24:51 +00:00
Allan Carr	f02ca05eba	Merged in feature/IO-3316-Local-Storage-Sort (pull request #2436 ) IO-3316 Local Storage Sort Approved-by: Dave Richer	2025-07-29 17:23:26 +00:00
Allan Carr	a182ea0869	IO-3315 CDK InService Date Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-29 10:04:13 -07:00
Allan Carr	7bc2d41a68	IO-3316 Local Storage Sort Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-28 14:05:59 -07:00
Allan Carr	5277e90946	Merged in feature/IO-3310-Shop-Data-Preservation (pull request #2433 ) IO-3310 Shop Data Preservation on Hidden Fields Approved-by: Dave Richer	2025-07-24 17:50:14 +00:00
Allan Carr	15ea4e6afa	IO-3310 Shop Data Preservation on Hidden Fields Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-22 17:40:51 -07:00
Dave Richer	5b3b6a409c	Merged in hotfix/2025-07-22-SocketProvider (pull request #2431 ) Hotfix/2025 07 22 SocketProvider	2025-07-23 00:16:13 +00:00
Patrick Fic	d92bab113e	Merged in hotfix/2025-07-22-SocketProvider (pull request #2430 ) Hotfix/2025 07 22 SocketProvider	2025-07-22 21:24:59 +00:00
Patrick Fic	93c6e2b601	Revert socket transport settings.	2025-07-22 14:23:25 -07:00
Dave Richer	19a90571f6	Down Socket Reconnects	2025-07-22 17:11:52 -04:00
Patrick Fic	736e9cedfa	Merged in feature/IO-2604-vendor-tagging (pull request #2428 ) IO-2604 Add vendor tags to search select & vendor edit screen. Approved-by: Dave Richer	2025-07-22 18:09:57 +00:00
Patrick Fic	c433103e1b	IO-2604 Merge in conflicted translations file.	2025-07-22 10:25:04 -07:00
Patrick Fic	2892fdbb58	IO-2604 reformat translations to resolve conflict.	2025-07-22 10:17:10 -07:00
Patrick Fic	c45f38e47b	IO-2604 Add vendor tags to search select & vendor edit screen.	2025-07-22 10:03:07 -07:00
Patrick Fic	54a58c9fbc	Merged in feature/IO-3292-pinned-notes (pull request #2427 ) IO-3292 Add note pinning functionality. Approved-by: Dave Richer	2025-07-22 16:13:51 +00:00
Patrick Fic	1934ae0758	IO-3292 Add note pinning functionality.	2025-07-22 09:03:41 -07:00
Dave Richer	953e70efef	Merged in release/2025-07-18 (pull request #2422 ) Release 2025-07-18 into master-AIO - IO-1054, IO-3252, IO-3286, IO-3291, IO-3296, IO-3303, IO-3309	2025-07-19 00:57:33 +00:00
Dave Richer	a6bae390e5	feature/IO-3255-simplified-parts-management - Merge release / resolve conflicts	2025-07-18 14:55:00 -04:00
Allan Carr	cf9d8d649d	Merged in feature/IO-3309-Date-Restriction-Removal (pull request #2419 ) IO-3309 Date Field Rescriton Removal Approved-by: Dave Richer	2025-07-17 23:36:53 +00:00
Allan Carr	a25051c4c2	IO-3309 Date Field Rescriton Removal Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-17 16:31:08 -07:00
Allan Carr	d5c3152631	Merged in feature/IO-3252-Reschedule-Job (pull request #2417 ) IO-3252 Reschedule Job with Existing Data Approved-by: Dave Richer	2025-07-16 21:08:03 +00:00
Allan Carr	66c425bf96	IO-3252 Fix Spelling Mistake in Feature Request Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-16 14:12:16 -07:00
Allan Carr	ffad0dfbf7	IO-3252 Reschedule Job with Existing Data Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-16 14:02:30 -07:00
Patrick Fic	17285fc029	Merged in hotfix/2025-07-15-nginxtune (pull request #2416 ) Remove all testing due to failed test in RO.	2025-07-16 19:07:20 +00:00
Patrick Fic	401e3cff73	Remove all testing due to failed test in RO.	2025-07-16 12:05:40 -07:00
Patrick Fic	865680e019	Merged in hotfix/2025-07-15-nginxtune (pull request #2415 ) Adjust body and buffer sizes.	2025-07-15 21:07:46 +00:00
Patrick Fic	9f97ca0336	Adjust body and buffer sizes.	2025-07-15 14:06:55 -07:00
Patrick Fic	5df38f8612	Merged in hotfix/2025-07-15-nginxtune (pull request #2414 ) Override nginx.conf	2025-07-15 20:46:27 +00:00
Patrick Fic	63c5719420	Override nginx.conf	2025-07-15 13:45:37 -07:00
Patrick Fic	d6c80f1420	Merged in hotfix/2025-07-15-nginxtune (pull request #2413 ) Additional change	2025-07-15 20:36:13 +00:00
Patrick Fic	fade927c9e	Additional change	2025-07-15 13:35:17 -07:00
Patrick Fic	9f472ce1d0	Merged in hotfix/2025-07-15-nginxtune (pull request #2412 ) Add worker process limits for EB config.	2025-07-15 20:21:38 +00:00
Patrick Fic	47a56e32b9	Add worker process limits for EB config.	2025-07-15 13:20:41 -07:00
Allan Carr	f13f79acb6	Merged in feature/IO-3286-Additional-Product-Fruit-IDs (pull request #2406 ) IO-3286 Additional Product Fruit IDs Approved-by: Dave Richer	2025-07-15 18:01:05 +00:00
Dave Richer	bfa9fddb9e	Merged in feature/IO-3303-logging (pull request #2410 ) [DO NOT MERGE] - IO-3303 Logging/Socket Params into Master-AIO Approved-by: Patrick Fic	2025-07-14 23:51:09 +00:00
Dave Richer	28abd9707e	feature/IO-3303-logging - Logging	2025-07-14 19:31:31 -04:00
Dave Richer	5f621e1ae0	feature/IO-3303-logging - Logging	2025-07-14 19:28:29 -04:00
Dave Richer	624414799e	Merge branch 'feature/IO-3303-Socket-IO-Optimization-Auto-Add-Watchers-Gate' into release/2025-07-18 # Conflicts: # client/src/contexts/SocketIO/socketProvider.jsx	2025-07-14 18:45:34 -04:00
Dave Richer	72091e9eae	feature/IO-3303-Socket-IO-Optimization-Auto-Add-Watchers-Gate - SocketIO Optimization / Auto Add Watchers Gate	2025-07-14 18:42:27 -04:00
Dave Richer	9cfacdd025	Merged in feature/IO-3291-Tasks-Notifications (pull request #2407 ) feature/IO-3291-Tasks-Notifications: Package Bumps	2025-07-14 17:34:30 +00:00
Dave Richer	d5c63b798a	feature/IO-3291-Tasks-Notifications: Package Bumps	2025-07-14 13:33:23 -04:00
Allan Carr	655e516246	IO-3286 Additional Product Fruit IDs Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-11 11:07:12 -07:00
Dave Richer	7b12f0a3b9	Merged in feature/IO-3291-Tasks-Notifications (pull request #2404 ) Feature/IO-3291 Tasks Notifications	2025-07-11 17:40:06 +00:00
Dave Richer	e0b937474d	feature/IO-3291-Tasks-Notifications: Final	2025-07-11 13:38:19 -04:00
Allan Carr	5c4267f3ef	Merge branch 'master-AIO' into feature/IO-3286-Additional-Product-Fruit-IDs	2025-07-11 10:31:22 -07:00
Dave Richer	4dcfb382a9	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-10 17:27:32 -04:00
Dave Richer	cf181dfd0a	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-10 16:40:55 -04:00
Dave Richer	1127864ba9	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-10 13:18:01 -04:00
Dave Richer	79e379b61a	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-10 10:12:50 -04:00
Allan Carr	e79e512291	Merged in feature/IO-3296-Scheduled-Delivery-Dashboard (pull request #2402 ) Feature/IO-3296 Scheduled Delivery Dashboard Approved-by: Dave Richer	2025-07-09 22:30:29 +00:00
Allan Carr	f0064abfbe	IO-3296 Schedule Delivery Dashboard Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-09 15:16:31 -07:00
Dave Richer	4a30a5bc64	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-09 17:47:32 -04:00
Allan Carr	32bdea559e	IO-3296 Schedule Delivery Dashboard Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-09 14:37:51 -07:00
Dave Richer	d4215b7aee	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-09 16:41:55 -04:00
Dave Richer	2494399993	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-09 13:12:28 -04:00
Dave Richer	34f62a8858	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-09 12:40:26 -04:00
Dave Richer	9e5689b06f	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-09 11:59:57 -04:00
Dave Richer	5d69d37db2	Merge remote-tracking branch 'origin/master-AIO' into feature/IO-3291-Tasks-Notifications	2025-07-09 11:14:28 -04:00
Dave Richer	9ab2fdc868	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-09 11:14:04 -04:00
Patrick Fic	fbd6766dcd	Merged in feature/IO-3294-imgproxy-bill-upload-hotfix (pull request #2401 ) IO-3294 fix upload to image proxy for bills.	2025-07-08 21:46:35 +00:00
Patrick Fic	9ace531edb	IO-3294 fix upload to image proxy for bills.	2025-07-08 14:31:32 -07:00
Dave Richer	2e3944099b	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-08 13:52:59 -04:00
Dave Richer	9b53bd9b40	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-08 12:29:23 -04:00
Dave Richer	443ed717cb	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-08 11:38:18 -04:00
Dave Richer	9845c1cea5	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-07 18:10:40 -04:00
Dave Richer	2061a49e0e	feature/IO-3291-Tasks-Notifications: Checkpoint	2025-07-07 17:35:00 -04:00
Dave Richer	f8a3d0f854	feature/IO-3291-Tasks-Notifications: Pre-cleanup	2025-07-07 15:06:37 -04:00
Allan Carr	23901c0cc1	IO-3286 Adjustment to ID Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-07 08:36:16 -07:00
Allan Carr	b99a212d75	Merged in feature/IO-3286-Additional-Product-Fruit-IDs (pull request #2398 ) IO-3286 Adjustment to ID Approved-by: Dave Richer	2025-07-07 15:33:46 +00:00
Dave Richer	a4963922da	Merged in feature/IO-1054-ScoreBoard-WorkingDays (pull request #2396 ) feature/IO-1054-ScoreBoard-WorkingDays - Fix	2025-07-07 14:37:33 +00:00
Dave Richer	3ae41b7016	feature/IO-1054-ScoreBoard-WorkingDays - Fix	2025-07-07 10:36:58 -04:00
Dave Richer	9c59fd4c00	Merged in release/2025-07-04 (pull request #2393 ) DO NOT MERGE - PENDING Release/2025 07 04 into master-AIO - IO-3284 IO-3285 IO-3286 IO-3288	2025-07-05 01:21:35 +00:00
Allan Carr	a9f959cced	Merged in feature/IO-3286-Additional-Product-Fruit-IDs (pull request #2394 ) IO-3286 Additional Product Fruit IDs Approved-by: Dave Richer	2025-07-04 21:03:37 +00:00
Allan Carr	414897bba0	IO-3286 Additional Product Fruit IDs Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-07-04 13:35:32 -07:00
Allan Carr	7467a31d76	Merged in feature/IO-3284-JobLine-Price-Lbr-Hrs-Totals (pull request #2387 ) IO-3284 JobLine Price Lbr Hrs Total Approved-by: Dave Richer	2025-06-27 18:24:16 +00:00
Allan Carr	894f6bf6d2	Merged in feature/IO-3285-Shop-Config-Lite-Basic (pull request #2388 ) IO-3285 Shop Config Lite Basic Approved-by: Dave Richer	2025-06-27 18:23:41 +00:00
Allan Carr	744dfa8163	Merged in feature/IO-3286-Additional-Product-Fruit-IDs (pull request #2389 ) IO-3286 Additional Product Fruit IDs Approved-by: Dave Richer	2025-06-27 18:22:56 +00:00
Dave Richer	2293119518	Merged in feature/IO-3288-Score-Board-Blocked-Days (pull request #2390 ) feature/IO-3288-Score-Board-Blocked-Days - Fix	2025-06-27 17:57:25 +00:00
Dave Richer	bd529a0dfa	feature/IO-3288-Score-Board-Blocked-Days - Fix	2025-06-27 13:56:18 -04:00
Allan Carr	57ad89747f	IO-3286 Additional Product Fruit IDs Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-06-26 18:48:09 -07:00
Allan Carr	3ae8f38adb	IO-3285 Shop Config Lite Basic Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-06-26 18:45:48 -07:00
Allan Carr	dc5ed1a39c	IO-3284 JobLine Price Lbr Hrs Total Signed-off-by: Allan Carr <allan@imexsystems.ca>	2025-06-26 18:40:38 -07:00
Patrick Fic	aa6e6b8980	Merged in hotfix/2025-06-25 (pull request #2386 ) IO-3281 Resolve key issue for downloads.	2025-06-25 23:33:37 +00:00
Patrick Fic	1dc80c068b	Merged in feature/IO-3281-imgproxy-download-hotfix (pull request #2385 ) IO-3281 Resolve key issue for downloads.	2025-06-25 23:33:14 +00:00
Patrick Fic	bd0c4ceae2	IO-3281 Resolve key issue for downloads.	2025-06-25 16:32:47 -07:00
Patrick Fic	30b58c6ea5	Merged in hotfix/2025-06-25 (pull request #2384 ) IO-3281 missed file in previous commit.	2025-06-25 22:48:53 +00:00
Patrick Fic	a55e9224f8	Merged in feature/IO-3281-imgproxy-download-hotfix (pull request #2383 ) IO-3281 missed file in previous commit.	2025-06-25 22:48:41 +00:00
Patrick Fic	0c80abb3ca	IO-3281 missed file in previous commit.	2025-06-25 15:48:06 -07:00
Patrick Fic	7137e611cd	Merged in hotfix/2025-06-25 (pull request #2382 ) IO-3281 Prevent broken stream reseting HTTP headers.	2025-06-25 22:37:01 +00:00
Patrick Fic	6f9d291d36	Merged in feature/IO-3281-imgproxy-download-hotfix (pull request #2381 ) IO-3281 Prevent broken stream reseting HTTP headers.	2025-06-25 22:36:47 +00:00
Patrick Fic	f2a2653eae	IO-3281 Prevent broken stream reseting HTTP headers.	2025-06-25 15:36:03 -07:00
Patrick Fic	73c25ab91f	Merged in hotfix/2025-06-25 (pull request #2380 ) Hotfix/2025 06 25 - IO-3279 IO-3281	2025-06-25 17:08:57 +00:00
Patrick Fic	780449bac6	Merge branch 'hotfix/2025-06-25' of bitbucket.org:snaptsoft/bodyshop into hotfix/2025-06-25	2025-06-25 10:08:09 -07:00
Patrick Fic	2509a1ecf3	Merge branch 'feature/IO-3279-usage-report' into hotfix/2025-06-25	2025-06-25 10:08:02 -07:00
Patrick Fic	16075f7ddd	Merged in feature/IO-3281-imgproxy-download-hotfix (pull request #2378 ) IO-3281 Adjust zip to stream.	2025-06-25 16:43:29 +00:00
Patrick Fic	27d28e7ffc	IO-3281 Adjust zip to stream.	2025-06-25 09:42:45 -07:00
Patrick Fic	66b87e5c45	Merged in feature/IO-3281-imgproxy-download-hotfix (pull request #2376 ) IO-3281 resolve imgproxy download failures.	2025-06-25 15:53:33 +00:00
Patrick Fic	c1e1dff7d2	IO-3281 resolve imgproxy download failures.	2025-06-25 08:51:41 -07:00
Dave Richer	f76eb7abf5	Merged in hotfix/IO-3280-Image-Selection-Bug (pull request #2374 ) hotfix/IO-3280-Image-Selection-Bug - Fix Bug in image selection dialog	2025-06-24 18:43:29 +00:00
Dave Richer	25ea2a80a3	hotfix/IO-3280-Image-Selection-Bug - Fix Bug in image selection dialog	2025-06-24 14:42:06 -04:00