- Clear stage before moving to a sub-sub branch.

Signed-off-by: Dave Richer <dave@imexsystems.ca>
Merge remote-tracking branch 'origin/master-AIO' into feature/IO-2743-Production-Board
2024-06-07 15:04:36 -04:00 · 2024-06-05 12:59:19 -04:00 · 2024-06-03 22:04:05 +00:00 · 2024-06-03 18:03:22 -04:00 · 2024-06-01 17:19:20 +00:00 · 2024-06-01 17:16:55 +00:00
210 changed files with 181592 additions and 19191 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -9,10 +9,10 @@ const config = {
  arrowParens: "always",
  jsxSingleQuote: false,
  bracketSameLine: false,
-  endOfLine: "lf",
-  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
-  importOrderSeparation: true,
-  importOrderSortSpecifiers: true
+  endOfLine: "lf"
+  // importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  // importOrderSeparation: true,
+  // importOrderSortSpecifiers: true
 };

 module.exports = config;
--- a/README.MD
+++ b/README.MD
@@ -2,7 +2,7 @@ NGROK TEsting:
 ./ngrok.exe http http://localhost:4000 -host-header="localhost:4000"

 Finding deadfiles - run from client directory
-npx deadfile ./src/index.js --exclude build templates
+npx deadfile ./src/index.jsx --exclude build templates

 #Crushing all hasura migrations by creating a new initialization from the server.
 hasura migrate create "Init" --from-server --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
@@ -11,4 +11,4 @@ Production-ImEXOnline!@#'
 hasura migrate status --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'

 Generate the license file:
-$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite
+$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite
--- a/_reference/test
+++ b/_reference/test
@@ -4,7 +4,7 @@ Clone Repository for:
 {
  "name": "node-webhook-scripts",
  "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.jsx",
  "dependencies": {
    "express": "^4.16.4"
  },
--- a/_reference/test-ecoystem.config.js
+++ b/_reference/test-ecoystem.config.js
@@ -11,7 +11,7 @@ module.exports = {

    {
      name: "Bitbucket Webhook",
-      script: "./webhook/index.js",
+      script: "./webhook/index.jsx",
      env: {
        NODE_ENV: "production"
      }
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "react-app"
+  ],
+  "rules": {
+    "no-useless-rename": "off"
+  }
+}
--- a/client/craco.config.js
+++ b/client/craco.config.js
@@ -1,53 +0,0 @@
-// craco.config.js
-const TerserPlugin = require("terser-webpack-plugin");
-const CracoLessPlugin = require("craco-less");
-const { convertLegacyToken } = require("@ant-design/compatible/lib");
-const { theme } = require("antd/lib");
-
-const { defaultAlgorithm, defaultSeed } = theme;
-
-const mapToken = defaultAlgorithm(defaultSeed);
-const v4Token = convertLegacyToken(mapToken);
-
-// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
-
-module.exports = {
-  plugins: [
-    {
-      plugin: CracoLessPlugin,
-      options: {
-        lessLoaderOptions: {
-          lessOptions: {
-            modifyVars: { ...v4Token },
-            javascriptEnabled: true
-          }
-        }
-      }
-    }
-  ],
-  webpack: {
-    configure: (webpackConfig) => {
-      return {
-        ...webpackConfig,
-        // Required for Dev Server
-        devServer: {
-          ...webpackConfig.devServer,
-          allowedHosts: "all"
-        },
-        optimization: {
-          ...webpackConfig.optimization,
-          // Workaround for CircleCI bug caused by the number of CPUs shown
-          // https://github.com/facebook/create-react-app/issues/8320
-          minimizer: webpackConfig.optimization.minimizer.map((item) => {
-            if (item instanceof TerserPlugin) {
-              item.options.parallel = 2;
-            }
-
-            return item;
-          })
-        }
-      };
-    }
-  },
-  devtool: "source-map"
-};
--- a/client/cypress/plugins/index.js
+++ b/client/cypress/plugins/index.js
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 // ***********************************************************
-// This example plugins/index.js can be used to load plugins
+// This example plugins/index.jsx can be used to load plugins
 //
 // You can change the location of this file or turn off loading
 // the plugins file with the 'pluginsFile' configuration option.
--- a/client/cypress/support/e2e.js
+++ b/client/cypress/support/e2e.js
@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/index.jsx is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -2,90 +2,86 @@
  "name": "bodyshop",
  "version": "0.2.1",
  "engines": {
-    "node": "18.18.2"
+    "node": ">=18.18.2"
  },
  "type": "module",
  "private": true,
  "proxy": "http://localhost:4000",
  "dependencies": {
-    "@ant-design/compatible": "^5.1.2",
-    "@ant-design/pro-layout": "^7.17.16",
+    "@ant-design/pro-layout": "^7.19.7",
    "@apollo/client": "^3.8.10",
-    "@asseinfo/react-kanban": "^2.2.0",
-    "@fingerprintjs/fingerprintjs": "^4.2.2",
+    "@emotion/is-prop-valid": "^1.2.2",
+    "@fingerprintjs/fingerprintjs": "^4.3.0",
    "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.1",
-    "@sentry/cli": "^2.28.6",
-    "@sentry/react": "^7.104.0",
-    "@splitsoftware/splitio-react": "^1.11.0",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@sentry/cli": "^2.31.2",
+    "@sentry/react": "^7.114.0",
+    "@splitsoftware/splitio-react": "^1.12.0",
    "@tanem/react-nprogress": "^5.0.51",
    "@vitejs/plugin-react": "^4.2.1",
-    "antd": "^5.15.3",
+    "antd": "^5.17.4",
    "apollo-link-logger": "^2.0.1",
    "apollo-link-sentry": "^3.3.0",
-    "axios": "^1.6.7",
-    "dayjs": "^1.11.10",
+    "autosize": "^6.0.1",
+    "axios": "^1.6.8",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.11",
    "dayjs-business-days2": "^1.2.2",
    "dinero.js": "^1.9.1",
    "dotenv": "^16.4.5",
    "env-cmd": "^10.1.0",
    "exifr": "^7.1.3",
-    "firebase": "^10.8.1",
+    "firebase": "^10.12.2",
    "graphql": "^16.6.0",
-    "i18next": "^23.10.0",
-    "i18next-browser-languagedetector": "^7.0.2",
-    "libphonenumber-js": "^1.10.57",
-    "logrocket": "^8.0.1",
-    "markerjs2": "^2.32.0",
-    "normalize-url": "^8.0.0",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^7.2.1",
+    "immutability-helper": "^3.1.1",
+    "libphonenumber-js": "^1.11.2",
+    "logrocket": "^8.1.0",
+    "markerjs2": "^2.32.1",
+    "normalize-url": "^8.0.1",
    "prop-types": "^15.8.1",
    "query-string": "^9.0.0",
-    "react": "^18.2.0",
-    "react-big-calendar": "^1.11.0",
+    "react": "^18.3.1",
+    "react-big-calendar": "^1.12.2",
    "react-color": "^2.19.3",
-    "react-cookie": "^7.1.0",
-    "react-dom": "^18.2.0",
+    "react-cookie": "^7.1.4",
+    "react-dom": "^18.3.1",
    "react-drag-listview": "^2.0.0",
-    "react-grid-gallery": "^1.0.0",
+    "react-grid-gallery": "^1.0.1",
    "react-grid-layout": "1.3.4",
-    "react-i18next": "^14.0.5",
-    "react-icons": "^5.0.1",
+    "react-i18next": "^14.1.2",
+    "react-icons": "^5.2.1",
    "react-image-lightbox": "^5.1.4",
-    "react-joyride": "^2.7.4",
+    "react-joyride": "^2.8.2",
    "react-markdown": "^9.0.1",
-    "react-number-format": "^5.3.3",
+    "react-number-format": "^5.3.4",
+    "react-popopo": "^2.1.9",
    "react-product-fruits": "^2.2.6",
-    "react-redux": "^9.1.0",
+    "react-redux": "^9.1.2",
    "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.22.2",
-    "react-scripts": "^5.0.1",
+    "react-router-dom": "^6.23.1",
    "react-sticky": "^6.0.3",
    "react-virtualized": "^9.22.5",
-    "recharts": "^2.12.2",
+    "recharts": "^2.12.7",
    "redux": "^5.0.1",
+    "redux-actions": "^3.0.0",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.3.0",
    "redux-state-sync": "^3.1.4",
    "reselect": "^5.1.0",
-    "sass": "^1.71.1",
-    "socket.io-client": "^4.7.4",
-    "styled-components": "^6.1.8",
+    "sass": "^1.77.2",
+    "socket.io-client": "^4.7.5",
+    "styled-components": "^6.1.11",
    "subscriptions-transport-ws": "^0.11.0",
-    "terser-webpack-plugin": "^5.3.10",
    "userpilot": "^1.3.1",
    "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^3.5.2",
-    "workbox-core": "^7.0.0",
-    "workbox-expiration": "^7.0.0",
-    "workbox-navigation-preload": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0"
+    "web-vitals": "^3.5.2"
  },
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "vite",
-    "build": "vite build",
+    "build": "dotenvx run --env-file=.env.development.imex -- vite build",
    "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
    "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
    "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
@@ -128,29 +124,30 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.23.3",
-    "@dotenvx/dotenvx": "^0.15.4",
+    "@babel/preset-react": "^7.24.6",
+    "@dotenvx/dotenvx": "^0.44.1",
    "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.3",
-    "@sentry/webpack-plugin": "^2.14.2",
-    "@swc/core": "^1.3.107",
-    "@swc/plugin-styled-components": "^1.5.108",
+    "@emotion/react": "^11.11.4",
+    "@sentry/webpack-plugin": "^2.16.1",
    "@testing-library/cypress": "^10.0.1",
    "browserslist": "^4.22.3",
    "browserslist-to-esbuild": "^2.1.1",
    "cross-env": "^7.0.3",
-    "cypress": "^13.6.6",
+    "cypress": "^13.9.0",
+    "eslint": "^8.57.0",
+    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.6.0",
+    "memfs": "^4.9.2",
    "os-browserify": "^0.3.0",
    "react-error-overlay": "6.0.11",
    "redux-logger": "^3.0.6",
    "source-map-explorer": "^2.5.3",
-    "vite": "^5.0.11",
+    "vite": "^5.2.11",
    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-legacy": "^2.1.0",
-    "vite-plugin-node-polyfills": "^0.19.0",
-    "vite-plugin-pwa": "^0.19.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-pwa": "^0.20.0",
    "vite-plugin-style-import": "^2.0.0"
  }
 }
--- a/client/public/3rdparty-api.txt
+++ b/client/public/3rdparty-api.txt
@@ -16422,7 +16422,7 @@ For when you don't want to write the same thing over and over to cache a method
 $ npm install --save-dev stubs
 ```
 ```js
-var mylib = require('./lib/index.js')
+var mylib = require('./lib/index.jsx')
 var stubs = require('stubs')

 // make it a noop
--- a/client/public/3rdparty-app.txt
+++ b/client/public/3rdparty-app.txt
@@ -16567,7 +16567,7 @@ even more slower.
 ## Benchmarks

 ```bash
-$ node benchmarks/index.js
+$ node benchmarks/index.jsx
 Benchmarking: sign
 elliptic#sign x 262 ops/sec ±0.51% (177 runs sampled)
 eccjs#sign x 55.91 ops/sec ±0.90% (144 runs sampled)
--- a/client/public/firebase-messaging-sw.js
+++ b/client/public/firebase-messaging-sw.js
@@ -0,0 +1,56 @@
+// Scripts for firebase and firebase messaging
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
+
+// Initialize the Firebase app in the service worker by passing the generated config
+let firebaseConfig;
+switch (this.location.hostname) {
+  case "localhost":
+    firebaseConfig = {
+      apiKey: "AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc",
+      authDomain: "imex-dev.firebaseapp.com",
+      databaseURL: "https://imex-dev.firebaseio.com",
+      projectId: "imex-dev",
+      storageBucket: "imex-dev.appspot.com",
+      messagingSenderId: "759548147434",
+      appId: "1:759548147434:web:e8239868a48ceb36700993",
+      measurementId: "G-K5XRBVVB4S",
+    };
+    break;
+  case "test.imex.online":
+    firebaseConfig = {
+      apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
+      authDomain: "imex-test.firebaseapp.com",
+      projectId: "imex-test",
+      storageBucket: "imex-test.appspot.com",
+      messagingSenderId: "991923618608",
+      appId: "1:991923618608:web:633437569cdad78299bef5",
+      // measurementId: "${config.measurementId}",
+    };
+    break;
+  case "imex.online":
+  default:
+    firebaseConfig = {
+      apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
+      authDomain: "imex-prod.firebaseapp.com",
+      databaseURL: "https://imex-prod.firebaseio.com",
+      projectId: "imex-prod",
+      storageBucket: "imex-prod.appspot.com",
+      messagingSenderId: "253497221485",
+      appId: "1:253497221485:web:3c81c483b94db84b227a64",
+      measurementId: "G-NTWBKG2L0M",
+    };
+}
+
+firebase.initializeApp(firebaseConfig);
+
+// Retrieve firebase messaging
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage(function (payload) {
+  // Customize notification here
+  const channel = new BroadcastChannel("imex-sw-messages");
+  channel.postMessage(payload);
+
+  //self.registration.showNotification(notificationTitle, notificationOptions);
+});
--- a/client/src/App/App.jsx
+++ b/client/src/App/App.jsx
@@ -150,7 +150,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
      <ProductFruits
        workspaceCode={InstanceRenderMgr({
          imex: null,
-          rome: null,
+          rome: "9BkbEseqNqxw8jUH",
          promanager: "aoJoEifvezYI0Z0P"
        })}
        debug
--- a/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx
@@ -34,6 +34,7 @@ export function BillDetailEditReturn({ setPartsOrderContext, insertAuditTrail, b
      actions: {},
      context: {
        jobId: data.bills_by_pk.jobid,
+        job: data.bills_by_pk.job,
        vendorId: data.bills_by_pk.vendorid,
        returnFromBill: data.bills_by_pk.id,
        invoiceNumber: data.bills_by_pk.invoice_number,
--- 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
@@ -25,31 +25,27 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
        );
      }}
      notFoundContent={"Removed."}
-      {...restProps}
-    >
-      <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
-        {t("billlines.labels.other")}
-      </Select.Option>
-      {options
-        ? options.map((item) => (
-            <Option
-              disabled={allowRemoved ? false : item.removed}
-              key={item.id}
-              value={item.id}
-              cost={item.act_price ? item.act_price : 0}
-              part_type={item.part_type}
-              line_desc={item.line_desc}
-              part_qty={item.part_qty}
-              oem_partno={item.oem_partno}
-              alt_partno={item.alt_partno}
-              act_price={item.act_price}
-              style={{
-                ...(item.removed ? { textDecoration: "line-through" } : {})
-              }}
-              name={`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-                item.oem_partno ? ` - ${item.oem_partno}` : ""
-              }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
-            >
+      options={[
+        { value: "noline", label: t("billlines.labels.other"), name: t("billlines.labels.other") },
+        ...options.map((item) => ({
+          disabled: allowRemoved ? false : item.removed,
+          key: item.id,
+          value: item.id,
+          cost: item.act_price ? item.act_price : 0,
+          part_type: item.part_type,
+          line_desc: item.line_desc,
+          part_qty: item.part_qty,
+          oem_partno: item.oem_partno,
+          alt_partno: item.alt_partno,
+          act_price: item.act_price,
+          style: {
+            ...(item.removed ? { textDecoration: "line-through" } : {})
+          },
+          name: `${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
+            item.oem_partno ? ` - ${item.oem_partno}` : ""
+          }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
+          label: (
+            <>
              <span>
                {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                  item.oem_partno ? ` - ${item.oem_partno}` : ""
@@ -60,14 +56,15 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
                  <span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
                )
              })}
-
              <span style={{ float: "right", paddingleft: "1rem" }}>
                {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
              </span>
-            </Option>
-          ))
-        : null}
-    </Select>
+            </>
+          )
+        }))
+      ]}
+      {...restProps}
+    ></Select>
  );
 };
 export default forwardRef(BillLineSearchSelect);
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -14,6 +14,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import { FaTasks } from "react-icons/fa";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -21,9 +22,21 @@ const mapStateToProps = createStructuredSelector({
 });

 const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
-  setReconciliationContext: (context) => dispatch(setModalContext({ context: context, modal: "reconciliation" }))
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
+  setReconciliationContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "reconciliation"
+      })
+    ),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });

 export function BillsListTableComponent({
@@ -32,9 +45,9 @@ export function BillsListTableComponent({
  job,
  billsQuery,
  handleOnRowClick,
-  setPartsOrderContext,
  setBillEnterContext,
-  setReconciliationContext
+  setReconciliationContext,
+  setTaskUpsertContext
 }) {
  const { t } = useTranslation();

@@ -48,6 +61,7 @@ export function BillsListTableComponent({
  const Templates = TemplateList("bill");
  const bills = billsQuery.data ? billsQuery.data.bills : [];
  const { refetch } = billsQuery;
+
  const recordActions = (record, showView = false) => (
    <Space wrap>
      {showView && (
@@ -55,9 +69,22 @@ export function BillsListTableComponent({
          <EditFilled />
        </Button>
      )}
+      <Button
+        title={t("tasks.buttons.create")}
+        onClick={() => {
+          setTaskUpsertContext({
+            context: {
+              jobid: job.id,
+              billid: record.id
+            }
+          });
+        }}
+      >
+        <FaTasks />
+      </Button>
      <BillDeleteButton bill={record} jobid={job.id} />
      <BillDetailEditReturnComponent
-        data={{ bills_by_pk: { ...record, jobid: job.id } }}
+        data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
        disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
      />

--- a/client/src/components/card-payment-modal/card-payment-modal.component..jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.component..jsx
@@ -1,14 +1,12 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, notification, Row, Space, Spin, Statistic } from "antd";
+import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, notification } from "antd";
 import axios from "axios";
-import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_PAYMENT_RESPONSE, QUERY_RO_AND_OWNER_BY_JOB_PKS } from "../../graphql/payment_response.queries";
-import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
@@ -28,12 +26,12 @@ const mapDispatchToProps = (dispatch) => ({
 });

 const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisible, insertAuditTrail }) => {
-  const { context } = cardPaymentModal;
+  const { context, actions } = cardPaymentModal;

  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);
-  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
  const { t } = useTranslation();

@@ -42,7 +40,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
    skip: true
  });

-  console.log("🚀 ~ file: card-payment-modal.component..jsx:61 ~ data:", data);
  //Initialize the intellipay window.
  const SetIntellipayCallbackFunctions = () => {
    console.log("*** Set IntelliPay callback functions.");
@@ -51,16 +48,20 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
    });

    window.intellipay.runOnApproval(async function (response) {
-      console.warn("*** Running On Approval Script ***");
-      form.setFieldValue("paymentResponse", response);
-      form.submit();
+      //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
+      //Add a slight delay to allow the refetch to properly get the data.
+      setTimeout(() => {
+        if (actions && actions.refetch && typeof actions.refetch === "function")
+          actions.refetch();
+        setLoading(false);
+        toggleModalVisible();
+      }, 750);
    });

    window.intellipay.runOnNonApproval(async function (response) {
      // Mutate unsuccessful payment

      const { payments } = form.getFieldsValue();
-
      await insertPaymentResponse({
        variables: {
          paymentResponse: payments.map((payment) => ({
@@ -85,50 +86,9 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
    });
  };

-  const handleFinish = async (values) => {
-    try {
-      await insertPayment({
-        variables: {
-          paymentInput: values.payments.map((payment) => ({
-            amount: payment.amount,
-            transactionid: (values.paymentResponse.paymentid || "").toString(),
-            payer: t("payments.labels.customer"),
-            type: values.paymentResponse.cardbrand,
-            jobid: payment.jobid,
-            date: dayjs(Date.now()),
-            payment_responses: {
-              data: [
-                {
-                  amount: payment.amount,
-                  bodyshopid: bodyshop.id,
-
-                  jobid: payment.jobid,
-                  declinereason: values.paymentResponse.declinereason,
-                  ext_paymentid: values.paymentResponse.paymentid.toString(),
-                  successful: true,
-                  response: values.paymentResponse
-                }
-              ]
-            }
-          }))
-        },
-        refetchQueries: ["GET_JOB_BY_PK"]
-      });
-      toggleModalVisible();
-    } catch (error) {
-      console.error(error);
-      notification.open({
-        type: "error",
-        message: t("payments.errors.inserting", { error: error.message })
-      });
-    } finally {
-      setLoading(false);
-    }
-  };

  const handleIntelliPayCharge = async () => {
    setLoading(true);
-
    //Validate
    try {
      await form.validateFields();
@@ -140,7 +100,8 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
    try {
      const response = await axios.post("/intellipay/lightbox_credentials", {
        bodyshop,
-        refresh: !!window.intellipay
+        refresh: !!window.intellipay,
+        paymentSplitMeta: form.getFieldsValue(),
      });

      if (window.intellipay) {
@@ -169,7 +130,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
    <Card title="Card Payment">
      <Spin spinning={loading}>
        <Form
-          onFinish={handleFinish}
          form={form}
          layout="vertical"
          initialValues={{
@@ -246,18 +206,14 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
            }
          >
            {() => {
-              console.log("Updating the owner info section.");
              //If all of the job ids have been fileld in, then query and update the IP field.
              const { payments } = form.getFieldsValue();
-              if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
-                console.log("**Calling refetch.");
+              if (
+                payments?.length > 0 &&
+                payments?.filter((p) => p?.jobid).length === payments?.length
+              ) {
                refetch({ jobids: payments.map((p) => p.jobid) });
              }
-              console.log(
-                "Acc info",
-                data,
-                payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null
-              );
              return (
                <>
                  <Input
@@ -300,6 +256,13 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
                    type="hidden"
                    value={totalAmountToCharge?.toFixed(2)}
                  />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="comment"
+                    type="hidden"
+                    value={btoa(JSON.stringify(payments))}
+                    hidden
+                  />
                  <Button
                    type="primary"
                    //  data-ipayname="submit"
@@ -314,11 +277,6 @@ const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisi
              );
            }}
          </Form.Item>
-
-          {/* Lightbox payment response when it is completed */}
-          <Form.Item name="paymentResponse" hidden>
-            <Input type="hidden" />
-          </Form.Item>
        </Form>
      </Spin>
    </Card>
--- a/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
+++ b/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
@@ -28,6 +28,7 @@ const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
      <Option value="courtesycars.status.out">{t("courtesycars.status.out")}</Option>
      <Option value="courtesycars.status.sold">{t("courtesycars.status.sold")}</Option>
      <Option value="courtesycars.status.leasereturn">{t("courtesycars.status.leasereturn")}</Option>
+      <Option value="courtesycars.status.unavailable">{t("courtesycars.status.unavailable")}</Option>
    </Select>
  );
 };
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -61,7 +61,11 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
        {
          text: t("courtesycars.status.leasereturn"),
          value: "courtesycars.status.leasereturn"
-        }
+        },
+        {
+          text: t("courtesycars.status.unavailable"),
+          value: "courtesycars.status.unavailable",
+        },
      ],
      onFilter: (value, record) => record.status === value,
      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
--- 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
@@ -9,7 +9,6 @@ import axios from "axios";
 const fortyFiveDaysAgo = () => dayjs().subtract(45, "day").toLocaleString();

 export default function JobLifecycleDashboardComponent({ data, bodyshop, ...cardProps }) {
-  console.log("🚀 ~ JobLifecycleDashboardComponent ~ bodyshop:", bodyshop);
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [lifecycleData, setLifecycleData] = useState(null);
@@ -143,7 +142,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
          >
            <div>
              {lifecycleData.summations.map((key) => (
-                <Tag color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
+                <Tag key={key.status} color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
                  <div
                    aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                    title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
@@ -165,6 +164,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
              size="small"
              pagination={false}
              columns={columns}
+              rowKey={(record) => record.status}
              dataSource={lifecycleData.summations.sort((a, b) => b.value - a.value).slice(0, 3)}
            />
          </Card>
--- 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
@@ -89,8 +89,6 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
      render: (text, record) => {
-        console.log("Render record out today");
-        console.dir(record);
        return record.ownerid ? (
          <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
--- a/client/src/components/employee-search-select/employee-search-select-email.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select-email.component.jsx
@@ -0,0 +1,37 @@
+import { Select, Space, Tag } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const { Option } = Select;
+//To be used as a form element only.
+
+const EmployeeSearchSelectEmail = ({ options, ...props }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Select
+      showSearch
+      // value={option}
+      style={{
+        width: 400
+      }}
+      optionFilterProp="search"
+      {...props}
+    >
+      {options
+        ? options.map((o) => (
+            <Option key={o.id} value={o.user_email} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
+              <Space>
+                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
+
+                <Tag color="green">
+                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
+                </Tag>
+              </Space>
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default EmployeeSearchSelectEmail;
--- a/client/src/components/form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx
+++ b/client/src/components/form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx
@@ -0,0 +1,48 @@
+import { DatePicker } from "antd";
+import dayjs from "../../utils/day.js";
+import React, { useRef } from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(FormDateTimePickerEnhanced);
+
+const dateFormat = "MM/DD/YYYY h:mm a";
+
+export function FormDateTimePickerEnhanced({
+  bodyshop,
+  value,
+  onBlur,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+  return (
+    <div>
+      <DatePicker
+        ref={ref}
+        value={value ? dayjs(value) : null}
+        format={dateFormat}
+        onBlur={onBlur}
+        showToday={false}
+        disabledDate={(d) => {
+          if (onlyToday) {
+            return !dayjs().isSame(d, "day");
+          } else if (onlyFuture) {
+            return dayjs().subtract(1, "day").isAfter(d);
+          }
+        }}
+        {...restProps}
+      />
+    </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,7 +1,7 @@
 import React, { forwardRef } from "react";
 //import DatePicker from "react-datepicker";
 //import "react-datepicker/src/stylesheets/datepicker.scss";
-import { TimePicker } from "antd";
+import { Space, TimePicker } from "antd";
 import dayjs from "../../utils/day";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 //To be used as a form element only.
@@ -14,7 +14,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps
  // };

  return (
-    <div id={id}>
+    <Space direction="vertical" style={{ width: "100%" }} id={id}>
      <FormDatePicker
        {...restProps}
        {...(onlyFuture && {
@@ -39,7 +39,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps
        format="hh:mm a"
        {...restProps}
      />
-    </div>
+    </Space>
  );
 };

--- a/client/src/components/global-search/global-search-os.component.jsx
+++ b/client/src/components/global-search/global-search-os.component.jsx
@@ -3,14 +3,13 @@ import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";

 export default function GlobalSearchOs() {
  const { t } = useTranslation();
-  const history = useNavigate();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(false);

@@ -178,15 +177,7 @@ export default function GlobalSearchOs() {
  };

  return (
-    <AutoComplete
-      options={data}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onSelect={(val, opt) => {
-        history(opt.label.props.to);
-      }}
-      onClear={() => setData([])}
-    >
+    <AutoComplete options={data} onSearch={handleSearch} defaultActiveFirstOption onClear={() => setData([])}>
      <Input.Search
        size="large"
        placeholder={t("general.labels.globalsearch")}
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -3,7 +3,7 @@ import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -12,7 +12,6 @@ import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.compon

 export default function GlobalSearch() {
  const { t } = useTranslation();
-  const history = useNavigate();
  const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);

  const executeSearch = (v) => {
@@ -157,14 +156,7 @@ export default function GlobalSearch() {
  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
-    <AutoComplete
-      options={options}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onSelect={(val, opt) => {
-        history(opt.label.props.to);
-      }}
-    >
+    <AutoComplete options={options} onSearch={handleSearch} defaultActiveFirstOption>
      <Input.Search
        size="large"
        placeholder={t("general.labels.globalsearch")}
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -17,6 +17,7 @@ import Icon, {
  LineChartOutlined,
  PaperClipOutlined,
  PhoneOutlined,
+  PlusCircleOutlined,
  QuestionCircleFilled,
  ScheduleOutlined,
  SettingOutlined,
@@ -30,7 +31,8 @@ import { Layout, Menu, Switch, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
-import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
+import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
+import { FiLogOut } from "react-icons/fi";
 import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from "react-icons/gi";
 import { IoBusinessOutline } from "react-icons/io5";
 import { RiSurveyLine } from "react-icons/ri";
@@ -41,7 +43,6 @@ import { selectRecentItems, selectSelectedHeader } from "../../redux/application
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { FiLogOut } from "react-icons/fi";
 import { checkBeta, handleBeta, setBeta } from "../../utils/betaHandler";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
@@ -54,12 +55,43 @@ const mapStateToProps = createStructuredSelector({
 });

 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
-  setTimeTicketContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
+  setTimeTicketContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "timeTicket"
+      })
+    ),
  setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setReportCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "reportCenter" })),
+  setReportCenterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "reportCenter"
+      })
+    ),
  signOutStart: () => dispatch(signOutStart()),
-  setCardPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "cardPayment" }))
+  setCardPaymentContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "cardPayment"
+      })
+    ),
+  setTaskUpsertContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "taskUpsert"
+      })
+    )
 });

 function Header({
@@ -73,7 +105,8 @@ function Header({
  setPaymentContext,
  setReportCenterContext,
  recentItems,
-  setCardPaymentContext
+  setCardPaymentContext,
+  setTaskUpsertContext
 }) {
  const {
    treatments: { ImEXPay, DmsAp, Simple_Inventory }
@@ -108,11 +141,13 @@ function Header({
    accountingChildren.push(
      {
        key: "bills",
+        id: "header-accounting-bills",
        icon: <Icon component={FaFileInvoiceDollar} />,
        label: <Link to="/manage/bills">{t("menus.header.bills")}</Link>
      },
      {
        key: "enterbills",
+        id: "header-accounting-enterbills",
        icon: <Icon component={GiPayMoney} />,
        label: t("menus.header.enterbills"),
        onClick: () => {
@@ -132,6 +167,7 @@ function Header({
      },
      {
        key: "inventory",
+        id: "header-accounting-inventory",
        icon: <Icon component={FaFileInvoiceDollar} />,
        label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
      }
@@ -150,11 +186,13 @@ function Header({
      },
      {
        key: "allpayments",
+        id: "header-accounting-allpayments",
        icon: <BankFilled />,
        label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
      },
      {
        key: "enterpayments",
+        id: "header-accounting-enterpayments",
        icon: <Icon component={FaCreditCard} />,
        label: t("menus.header.enterpayment"),
        onClick: () => {
@@ -170,6 +208,7 @@ function Header({
  if (ImEXPay.treatment === "on") {
    accountingChildren.push({
      key: "entercardpayments",
+      id: "header-accounting-entercardpayments",
      icon: <Icon component={FaCreditCard} />,
      label: t("menus.header.entercardpayment"),
      onClick: () => {
@@ -194,6 +233,7 @@ function Header({
      },
      {
        key: "timetickets",
+        id: "header-accounting-timetickets",
        icon: <FieldTimeOutlined />,
        label: <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
      }
@@ -202,6 +242,7 @@ function Header({
    if (bodyshop?.md_tasks_presets?.use_approvals) {
      accountingChildren.push({
        key: "ttapprovals",
+        id: "header-accounting-ttapprovals",
        icon: <FieldTimeOutlined />,
        label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
      });
@@ -211,6 +252,7 @@ function Header({
        key: "entertimetickets",
        icon: <Icon component={GiPlayerTime} />,
        label: t("menus.header.entertimeticket"),
+        id: "header-accounting-entertimetickets",
        onClick: () => {
          setTimeTicketContext({
            actions: {},
@@ -231,6 +273,7 @@ function Header({
  const accountingExportChildren = [
    {
      key: "receivables",
+      id: "header-accounting-receivables",
      label: <Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>
    }
  ];
@@ -238,6 +281,7 @@ function Header({
  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
    accountingExportChildren.push({
      key: "payables",
+      id: "header-accounting-payables",
      label: <Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>
    });
  }
@@ -245,6 +289,7 @@ function Header({
  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
    accountingExportChildren.push({
      key: "payments",
+      id: "header-accounting-payments",
      label: <Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>
    });
  }
@@ -255,6 +300,7 @@ function Header({
    },
    {
      key: "exportlogs",
+      id: "header-accounting-exportlogs",
      label: <Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>
    }
  );
@@ -268,6 +314,7 @@ function Header({
  ) {
    accountingChildren.push({
      key: "accountingexport",
+      id: "header-accounting-export",
      icon: <ExportOutlined />,
      label: t("menus.header.export"),
      children: accountingExportChildren
@@ -278,10 +325,12 @@ function Header({
    {
      key: "home",
      icon: <HomeFilled />,
+      id: "header-home",
      label: <Link to="/manage/">{t("menus.header.home")}</Link>
    },
    {
      key: "schedule",
+      id: "header-schedule",
      icon: <Icon component={FaCalendarAlt} />,
      label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
    },
@@ -293,16 +342,19 @@ function Header({
      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>
        },
@@ -314,6 +366,7 @@ function Header({
        },
        {
          key: "newjob",
+          id: "header-new-job",
          icon: <FileAddOutlined />,
          label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
        },
@@ -322,6 +375,7 @@ function Header({
        },
        {
          key: "alljobs",
+          id: "header-all-jobs",
          icon: <UnorderedListOutlined />,
          label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
        },
@@ -330,6 +384,7 @@ function Header({
        },
        {
          key: "productionlist",
+          id: "header-production-list",
          icon: <ScheduleOutlined />,
          label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
        },
@@ -341,6 +396,7 @@ function Header({
          ? [
              {
                key: "productionboard",
+                id: "header-production-board",
                icon: <Icon component={BsKanban} />,
                label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
              }
@@ -358,6 +414,7 @@ function Header({
              },
              {
                key: "scoreboard",
+                id: "header-scoreboard",
                icon: <LineChartOutlined />,
                label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
              }
@@ -368,15 +425,18 @@ function Header({
    {
      key: "customers",
      icon: <UserOutlined />,
+      id: "header-customers",
      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>
        }
@@ -390,21 +450,25 @@ function Header({
      ? [
          {
            key: "ccs",
+            id: "header-css",
            icon: <CarFilled />,
            label: t("menus.header.courtesycars"),
            children: [
              {
                key: "courtesycarsall",
+                id: "header-courtesycars-all",
                icon: <CarFilled />,
                label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
              },
              {
                key: "contracts",
+                id: "header-contracts",
                icon: <FileFilled />,
                label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
              },
              {
                key: "newcontract",
+                id: "header-newcontract",
                icon: <FileAddFilled />,
                label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
              }
@@ -417,6 +481,7 @@ function Header({
      ? [
          {
            key: "accounting",
+            id: "header-accounting",
            icon: <DollarCircleFilled />,
            label: t("menus.header.accounting"),
            children: accountingChildren
@@ -425,6 +490,7 @@ function Header({
      : []),
    {
      key: "phonebook",
+      id: "header-phonebook",
      icon: <PhoneOutlined />,
      label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
    },
@@ -436,28 +502,62 @@ function Header({
      ? [
          {
            key: "temporarydocs",
+            id: "header-temporarydocs",
            icon: <PaperClipOutlined />,
            label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
          }
        ]
      : []),
+    {
+      key: "tasks",
+      id: "tasks",
+      icon: <FaTasks />,
+      label: t("menus.header.tasks"),
+      children: [
+        {
+          key: "createTask",
+          icon: <PlusCircleOutlined />,
+          label: t("menus.header.create_task"),
+          onClick: () => {
+            setTaskUpsertContext({
+              actions: {},
+              context: {}
+            });
+          }
+        },
+        {
+          key: "mytasks",
+          icon: <FaTasks />,
+          label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
+        },
+        {
+          key: "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: <Icon component={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">{t("menus.header.dashboard")}</Link>
        },
        {
          key: "reportcenter",
+          id: "header-reportcenter",
          icon: <BarChartOutlined />,
          label: t("menus.header.reportcenter"),
          onClick: () => {
@@ -469,6 +569,7 @@ function Header({
        },
        {
          key: "shop-vendors",
+          id: "header-shop-vendors",
          icon: <Icon component={IoBusinessOutline} />,
          label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
        },
@@ -480,6 +581,7 @@ function Header({
          ? [
              {
                key: "shop-csi",
+                id: "header-shop-csi",
                icon: <Icon component={RiSurveyLine} />,
                label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
              }
@@ -493,6 +595,7 @@ function Header({
      children: [
        {
          key: "signout",
+          id: "header-signout",
          icon: <Icon component={FiLogOut} />,
          danger: true,
          label: t("user.actions.signout"),
@@ -500,6 +603,7 @@ function Header({
        },
        {
          key: "help",
+          id: "header-help",
          icon: <Icon component={QuestionCircleFilled} />,
          label: t("menus.header.help"),
          onClick: () => {
@@ -514,14 +618,22 @@ function Header({
            );
          }
        },
-        // {
-        //     key: 'rescue',
-        //     icon: <Icon component={CarFilled}/>,
-        //     label: t("menus.header.rescueme"),
-        //     onClick: () => {
-        //         window.open("https://imexrescue.com/", "_blank");
-        //     }
-        // },
+        ...(InstanceRenderManager({
+          imex: true,
+          rome: false,
+          promanager: false
+        })
+          ? [
+              {
+                key: "rescue",
+                icon: <Icon component={CarFilled} />,
+                label: t("menus.header.rescueme"),
+                onClick: () => {
+                  window.open("https://imexrescue.com/", "_blank");
+                }
+              }
+            ]
+          : []),

        ...(InstanceRenderManager({
          imex: true,
@@ -531,6 +643,7 @@ function Header({
          ? [
              {
                key: "shiftclock",
+                id: "header-shiftclock",
                icon: <Icon component={GiPlayerTime} />,
                label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
              }
@@ -538,6 +651,7 @@ function Header({
          : []),
        {
          key: "profile",
+          id: "header-profile",
          icon: <UserOutlined />,
          label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
        }
@@ -573,6 +687,7 @@ function Header({
    {
      key: "recent",
      icon: <ClockCircleFilled />,
+      id: "header-recent",
      children: recentItems.map((i, idx) => ({
        key: idx,
        label: <Link to={i.url}>{i.label}</Link>
@@ -586,6 +701,7 @@ function Header({
    imex: () => {
      menuItems.push({
        key: "beta-switch",
+        id: "header-beta-switch",
        style: { marginLeft: "auto" },
        label: (
          <Tooltip
--- a/client/src/components/job-bills-total/job-bills-total.component.jsx
+++ b/client/src/components/job-bills-total/job-bills-total.component.jsx
@@ -1,11 +1,11 @@
-import { Alert,  Card, Col, Row, Space, Statistic, Tooltip, Typography  } from 'antd';
-import Dinero from 'dinero.js';
-import React from 'react';
-import {  useTranslation  } from 'react-i18next';
-import InstanceRenderManager from '../../utils/instanceRenderMgr';
-import AlertComponent from '../alert/alert.component';
-import LoadingSkeleton from '../loading-skeleton/loading-skeleton.component';
-import './job-bills-total.styles.scss';
+import { Alert, Card, Col, Row, Space, Statistic, Tooltip, Typography } from "antd";
+import Dinero from "dinero.js";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import AlertComponent from "../alert/alert.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import "./job-bills-total.styles.scss";

 export default function JobBillsTotalComponent({
  loading,
@@ -13,16 +13,16 @@ export default function JobBillsTotalComponent({
  partsOrders,
  jobTotals,
  showWarning,
-  warningCallback,
+  warningCallback
 }) {
  const { t } = useTranslation();

  if (loading) return <LoadingSkeleton />;
  if (!!!jobTotals) {
-    if (showWarning && warningCallback && typeof warningCallback === 'function') {
-      warningCallback({ key: 'bills', warning: t('jobs.errors.nofinancial') });
+    if (showWarning && warningCallback && typeof warningCallback === "function") {
+      warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
    }
-    return <AlertComponent type="error" message={t('jobs.errors.nofinancial')} />;
+    return <AlertComponent type="error" message={t("jobs.errors.nofinancial")} />;
  }

  const totals = jobTotals;
@@ -109,64 +109,60 @@ export default function JobBillsTotalComponent({
  const discrepWithCms = discrepWithLbrAdj.add(totalReturns);
  const calculatedCreditsNotReceived = totalReturns.subtract(billCms); //billCms is tracked as a negative number.

-  if (showWarning && warningCallback && typeof warningCallback === 'function') {
-    if (
-      discrepWithCms.getAmount() !== 0 ||
-      discrepWithLbrAdj.getAmount() !== 0 ||
-      discrepancy.getAmount() !== 0
-    ) {
+  if (showWarning && warningCallback && typeof warningCallback === "function") {
+    if (discrepWithCms.getAmount() !== 0) {
      warningCallback({
-        key: 'bills',
-        warning: t('jobs.labels.outstanding_reconciliation_discrep'),
+        key: "bills",
+        warning: t("jobs.labels.outstanding_reconciliation_discrep")
      });
    }
    if (calculatedCreditsNotReceived.getAmount() > 0) {
-      warningCallback({ key: 'cm', warning: t('jobs.labels.outstanding_credit_memos') });
+      warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
    }
  }

  return (
    <Row gutter={[16, 16]}>
      <Col md={24} lg={18}>
-        <Card title={t('jobs.labels.jobtotals')} style={{ height: '100%' }}>
+        <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
          <Space wrap size="large">
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.partstotal'),
+                    __html: t("jobs.labels.plitooltips.partstotal")
                  }}
                />
              }
            >
-              <Statistic title={t('jobs.labels.rosaletotal')} value={totalPartsSublet.toFormat()} />
+              <Statistic title={t("jobs.labels.rosaletotal")} value={totalPartsSublet.toFormat()} />
            </Tooltip>
            <Typography.Title>-</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.billtotal'),
+                    __html: t("jobs.labels.plitooltips.billtotal")
                  }}
                />
              }
            >
-              <Statistic title={t('bills.labels.retailtotal')} value={billTotals.toFormat()} />
+              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.discrep1'),
+                    __html: t("jobs.labels.plitooltips.discrep1")
                  }}
                />
              }
            >
              <Statistic
-                title={t('bills.labels.discrepancy')}
+                title={t("bills.labels.discrepancy")}
                valueStyle={{
-                  color: discrepancy.getAmount() === 0 ? 'green' : 'red',
+                  color: discrepancy.getAmount() === 0 ? "green" : "red"
                }}
                value={discrepancy.toFormat()}
              />
@@ -176,27 +172,27 @@ export default function JobBillsTotalComponent({
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.laboradj'),
+                    __html: t("jobs.labels.plitooltips.laboradj")
                  }}
                />
              }
            >
-              <Statistic title={t('bills.labels.dedfromlbr')} value={lbrAdjustments.toFormat()} />
+              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.discrep2'),
+                    __html: t("jobs.labels.plitooltips.discrep2")
                  }}
                />
              }
            >
              <Statistic
-                title={t('bills.labels.discrepancy')}
+                title={t("bills.labels.discrepancy")}
                valueStyle={{
-                  color: discrepWithLbrAdj.getAmount() === 0 ? 'green' : 'red',
+                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
                }}
                value={discrepWithLbrAdj.toFormat()}
              />
@@ -206,27 +202,27 @@ export default function JobBillsTotalComponent({
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.creditmemos'),
+                    __html: t("jobs.labels.plitooltips.creditmemos")
                  }}
                />
              }
            >
-              <Statistic title={t('bills.labels.totalreturns')} value={totalReturns.toFormat()} />
+              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.discrep3'),
+                    __html: t("jobs.labels.plitooltips.discrep3")
                  }}
                />
              }
            >
              <Statistic
-                title={t('bills.labels.discrepancy')}
+                title={t("bills.labels.discrepancy")}
                valueStyle={{
-                  color: discrepWithCms.getAmount() === 0 ? 'green' : 'red',
+                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
                }}
                value={discrepWithCms.toFormat()}
              />
@@ -238,40 +234,40 @@ export default function JobBillsTotalComponent({
              discrepWithLbrAdj.getAmount() !== 0 ||
              discrepancy.getAmount() !== 0) && (
              <Alert
-                style={{ margin: '8px 0px' }}
+                style={{ margin: "8px 0px" }}
                type="warning"
-                message={t('jobs.labels.outstanding_reconciliation_discrep')}
+                message={t("jobs.labels.outstanding_reconciliation_discrep")}
              />
            )}
        </Card>
      </Col>
      <Col md={24} lg={6}>
-        <Card title={t('jobs.labels.returntotals')} style={{ height: '100%' }}>
+        <Card title={t("jobs.labels.returntotals")} style={{ height: "100%" }}>
          <Space wrap>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.totalreturns'),
+                    __html: t("jobs.labels.plitooltips.totalreturns")
                  }}
                />
              }
            >
-              <Statistic title={t('bills.labels.totalreturns')} value={totalReturns.toFormat()} />
+              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
            </Tooltip>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.calculatedcreditsnotreceived'),
+                    __html: t("jobs.labels.plitooltips.calculatedcreditsnotreceived")
                  }}
                />
              }
            >
              <Statistic
-                title={t('bills.labels.calculatedcreditsnotreceived')}
+                title={t("bills.labels.calculatedcreditsnotreceived")}
                valueStyle={{
-                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? 'green' : 'red',
+                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
                }}
                value={
                  calculatedCreditsNotReceived.getAmount() >= 0
@@ -284,15 +280,15 @@ export default function JobBillsTotalComponent({
              title={
                <div
                  dangerouslySetInnerHTML={{
-                    __html: t('jobs.labels.plitooltips.creditsnotreceived'),
+                    __html: t("jobs.labels.plitooltips.creditsnotreceived")
                  }}
                />
              }
            >
              <Statistic
-                title={t('bills.labels.creditsnotreceived')}
+                title={t("bills.labels.creditsnotreceived")}
                valueStyle={{
-                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? 'green' : 'red',
+                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
                }}
                value={
                  totalReturnsMarkedNotReceived.getAmount() >= 0
@@ -303,11 +299,7 @@ export default function JobBillsTotalComponent({
            </Tooltip>
          </Space>
          {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
-            <Alert
-              style={{ margin: '8px 0px' }}
-              type="warning"
-              message={t('jobs.labels.outstanding_credit_memos')}
-            />
+            <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
          )}
        </Card>
      </Col>
--- a/client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx
@@ -1,20 +1,20 @@
-import React from 'react';
+import React from "react";

-import { useQuery } from '@apollo/client';
-import { useSplitTreatments } from '@splitsoftware/splitio-react';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import { GET_LINE_TICKET_BY_PK } from '../../graphql/jobs-lines.queries';
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
-import { selectBodyshop } from '../../redux/user/user.selectors';
-import AlertComponent from '../alert/alert.component';
-import LaborAllocationsTableComponent from '../labor-allocations-table/labor-allocations-table.component';
-import PayrollLaborAllocationsTable from '../labor-allocations-table/labor-allocations-table.payroll.component';
-import LoadingSkeleton from '../loading-skeleton/loading-skeleton.component';
+import { useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
+import PayrollLaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.payroll.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -24,21 +24,21 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardLabor
 export function JobCloseRoGuardLabor({ job, jobRO, bodyshop, form, warningCallback }) {
  const { loading, error, data, refetch } = useQuery(GET_LINE_TICKET_BY_PK, {
    variables: { id: job.id },
-    fetchPolicy: 'network-only',
-    nextFetchPolicy: 'network-only',
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
  });
  const {
-    treatments: { Enhanced_Payroll },
+    treatments: { Enhanced_Payroll }
  } = useSplitTreatments({
    attributes: {},
-    names: ['Enhanced_Payroll'],
-    splitKey: bodyshop.imexshopid,
+    names: ["Enhanced_Payroll"],
+    splitKey: bodyshop.imexshopid
  });

  if (loading) return <LoadingSkeleton />;
  if (error) return <AlertComponent message={error.message} type="error" />;

-  return Enhanced_Payroll.treatment === 'on' ? (
+  return Enhanced_Payroll.treatment === "on" ? (
    <PayrollLaborAllocationsTable
      jobId={job.id}
      timetickets={data ? data.timetickets : []}
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx
@@ -1,19 +1,19 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";

-import { Alert, Card } from 'antd';
-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 { useMemo } from 'react';
-import Dinero from 'dinero.js';
-import DataLabel from '../data-label/data-label.component';
+import { Alert, Card } from "antd";
+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 { useMemo } from "react";
+import Dinero from "dinero.js";
+import DataLabel from "../data-label/data-label.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -41,25 +41,21 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallb

  useEffect(() => {
    if (balance.getAmount() !== 0) {
-      warningCallback({ key: 'ar', warning: t('jobs.labels.outstanding_ar') });
+      warningCallback({ key: "ar", warning: t("jobs.labels.outstanding_ar") });
    }
  }, [balance, t, warningCallback]);

  return (
-    <Card title={t('jobs.labels.accountsreceivable')} style={{ height: '100%' }}>
-      <DataLabel label={t('payments.labels.totalpayments')}>{total.toFormat()}</DataLabel>
+    <Card title={t("jobs.labels.accountsreceivable")} style={{ height: "100%" }}>
+      <DataLabel label={t("payments.labels.totalpayments")}>{total.toFormat()}</DataLabel>
      <DataLabel
-        valueStyle={{ color: balance.getAmount() !== 0 ? 'red' : 'green' }}
-        label={t('payments.labels.balance')}
+        valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
+        label={t("payments.labels.balance")}
      >
        {balance.toFormat()}
      </DataLabel>
      {balance.getAmount() !== 0 && (
-        <Alert
-          style={{ margin: '8px 0px' }}
-          type="warning"
-          message={t('jobs.labels.outstanding_ar')}
-        />
+        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_ar")} />
      )}
    </Card>
  );
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.bills.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.bills.jsx
@@ -1,17 +1,17 @@
-import React from 'react';
+import React from "react";

-import { useQuery } from '@apollo/client';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import { QUERY_BILLS_BY_JOBID } from '../../graphql/bills.queries';
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
-import { selectBodyshop } from '../../redux/user/user.selectors';
-import AlertComponent from '../alert/alert.component';
-import JobBillsTotalComponent from '../job-bills-total/job-bills-total.component';
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import JobBillsTotalComponent from "../job-bills-total/job-bills-total.component";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -21,8 +21,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardBills
 export function JobCloseRoGuardBills({ job, jobRO, bodyshop, form, warningCallback }) {
  const { loading, error, data } = useQuery(QUERY_BILLS_BY_JOBID, {
    variables: { jobid: job.id },
-    fetchPolicy: 'network-only',
-    nextFetchPolicy: 'network-only',
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
  });

  if (error) return <AlertComponent message={error.message} type="error" />;
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
@@ -12,7 +12,6 @@ import JobCloseRoGuardBills from "./job-close-ro-guard.bills";
 import JobCloseRoGuardPpd from "./job-close-ro-guard.ppd";
 import JobCloseRoGuardProfit from "./job-close-ro-guard.profit";
 import "./job-close-ro-guard.styles.scss";
-import JobCloseRoGuardSublet from "./job-close-ro-guard.sublet";
 import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";

@@ -76,20 +75,21 @@ export function JobCloseRoGuardContainer({ job, jobRO, bodyshop, form }) {
            <Col className="ro-guard-col-multiple" md={24} lg={6}>
              <Row gutter={[32, 32]} style={{ height: "100%" }}>
                <Col span={24}>
-                  <JobCloseRoGuardProfit
-                    job={job}
-                    form={form} //warningCallback={warningCallback}
-                  />
+                  <JobCloseRoGuardProfit job={job} form={form} warningCallback={warningCallback} />
                </Col>
                <Col span={24}>
                  <JobCloseRoGuardAr job={job} form={form} warningCallback={warningCallback} />
                </Col>
              </Row>
            </Col>
-            <Col className="ro-guard-col-50" md={24} lg={8}>
-              <JobCloseRoGuardSublet job={job} warningCallback={warningCallback} />
-              {InstanceRenderManager({ rome: <JobCloseRoGuardPpd job={job} warningCallback={warningCallback} /> })}
-            </Col>
+            {InstanceRenderManager({
+              rome: (
+                <Col md={24} lg={8}>
+                  {/* <JobCloseRoGuardSublet job={job} warningCallback={warningCallback} /> */}
+                  <JobCloseRoGuardPpd job={job} warningCallback={warningCallback} />
+                </Col>
+              )
+            })}
            <Col className="ro-guard-col" md={24} lg={10}>
              <JobCloseRoGuardLabor job={job} form={form} warningCallback={warningCallback} />
            </Col>
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.profit.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.profit.jsx
@@ -1,20 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";

-import { LockOutlined } from '@ant-design/icons';
-import { Card, Form, Input } from 'antd';
-import axios from 'axios';
-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 JobCostingStatistics from '../job-costing-statistics/job-costing-statistics.component';
-import LoadingSkeleton from '../loading-skeleton/loading-skeleton.component';
+import { Alert, Card } from "antd";
+import axios from "axios";
+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 JobCostingStatistics from "../job-costing-statistics/job-costing-statistics.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -31,7 +30,7 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallb
      try {
        if (job.id) {
          setLoading(true);
-          const { data } = await axios.post('/job/costing', { jobid: job.id });
+          const { data } = await axios.post("/job/costing", { jobid: job.id });
          setCostingData(data);
        }
      } catch (error) {}
@@ -45,16 +44,19 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallb
    parseFloat(costingData?.summaryData.gppercent) < bodyshop?.md_ro_guard?.totalgppercent_minimum;

  useEffect(() => {
-    if (enforceProfitPassword && typeof warningCallback === 'function') {
-      warningCallback({ key: 'profit', warning: t('jobs.labels.profitbypassrequired') });
+    if (enforceProfitPassword && typeof warningCallback === "function") {
+      warningCallback({ key: "profit", warning: t("jobs.labels.profitbypassrequired") });
    }
  }, [enforceProfitPassword, t, warningCallback]);

  if (loading || !costingData) return <LoadingSkeleton />;

  return (
-    <Card title={t('jobs.labels.profits')} style={{ height: '100%' }}>
+    <Card title={t("jobs.labels.profits")} style={{ height: "100%" }}>
      <JobCostingStatistics summaryData={costingData?.summaryData} onlyGP />
+      {enforceProfitPassword && (
+        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.profitbypassrequired")} />
+      )}
    </Card>
  );
 }
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.sublet.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.sublet.jsx
@@ -1,17 +1,17 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";

-import { Alert, Card, Table } from 'antd';
-import { t } from '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 CurrencyFormatter from '../../utils/CurrencyFormatter';
-import { alphaSort } from '../../utils/sorters';
+import { Alert, Card, Table } from "antd";
+import { t } from "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 CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { alphaSort } from "../../utils/sorters";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -20,69 +20,56 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRGuardSublet

 export function JobCloseRGuardSublet({ job, jobRO, bodyshop, form, warningCallback }) {
  const subletsNotDone = job?.joblines.filter(
-    (j) =>
-      (j.part_type === 'PAS' || j.part_type === 'PASL') &&
-      (!j.sublet_completed || !j.sublet_ignored)
+    (j) => (j.part_type === "PAS" || j.part_type === "PASL") && (!j.sublet_completed || !j.sublet_ignored)
  );

  const columns = [
    {
-      title: t('joblines.fields.line_desc'),
-      dataIndex: 'line_desc',
-      fixed: 'left',
-      key: 'line_desc',
+      title: t("joblines.fields.line_desc"),
+      dataIndex: "line_desc",
+      fixed: "left",
+      key: "line_desc",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
      onCell: (record) => ({
-        className: record.manual_line && 'job-line-manual',
+        className: record.manual_line && "job-line-manual",
        style: {
-          ...(record.critical ? { boxShadow: ' -.5em 0 0 #FFC107' } : {}),
-        },
+          ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {})
+        }
      }),
-      ellipsis: true,
+      ellipsis: true
    },
    {
-      title: t('joblines.fields.act_price'),
-      dataIndex: 'act_price',
-      key: 'act_price',
+      title: t("joblines.fields.act_price"),
+      dataIndex: "act_price",
+      key: "act_price",
      sorter: (a, b) => a.act_price - b.act_price,

      ellipsis: true,
-      render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>,
+      render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
    },
    {
-      title: t('joblines.fields.part_qty'),
-      dataIndex: 'part_qty',
-      key: 'part_qty',
+      title: t("joblines.fields.part_qty"),
+      dataIndex: "part_qty",
+      key: "part_qty"
    },
    {
-      title: t('joblines.fields.notes'),
-      dataIndex: 'notes',
-      key: 'notes',
-    },
+      title: t("joblines.fields.notes"),
+      dataIndex: "notes",
+      key: "notes"
+    }
  ];

  useEffect(() => {
    if (subletsNotDone.length > 0) {
-      warningCallback({ key: 'sublet', warning: t('jobs.labels.outstanding_sublets') });
+      warningCallback({ key: "sublet", warning: t("jobs.labels.outstanding_sublets") });
    }
  }, [subletsNotDone.length, warningCallback]);

  return (
-    <Card title={t('jobs.labels.subletsnotcompleted')}>
-      <Table
-        dataSource={subletsNotDone}
-        columns={columns}
-        pagination={false}
-        rowKey="id"
-        bordered
-        size="small"
-      />
+    <Card title={t("jobs.labels.subletsnotcompleted")}>
+      <Table dataSource={subletsNotDone} columns={columns} pagination={false} rowKey="id" bordered size="small" />
      {subletsNotDone.length > 0 && (
-        <Alert
-          style={{ margin: '8px 0px' }}
-          type="warning"
-          message={t('jobs.labels.outstanding_sublets')}
-        />
+        <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_sublets")} />
      )}
    </Card>
  );
--- a/client/src/components/job-close-ro-guard/job-close-ro-guard.tt-lifecycle.jsx
+++ b/client/src/components/job-close-ro-guard/job-close-ro-guard.tt-lifecycle.jsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";

-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import { selectJobReadOnly } from '../../redux/application/application.selectors';
-import { selectBodyshop } from '../../redux/user/user.selectors';
-import JobLifecycleComponent from '../job-lifecycle/job-lifecycle.component';
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobLifecycleComponent from "../job-lifecycle/job-lifecycle.component";
 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
--- a/client/src/components/job-detail-lines/job-lines-expander.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines-expander.component.jsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Divider, Row, Skeleton, Space, Timeline, Typography } from "antd";
+import { Col, Row, Skeleton, Space, Timeline, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -7,17 +7,19 @@ import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { QUERY_JOBLINE_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
+import TaskListContainer from "../task-list/task-list.container.jsx";
+import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";

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

 export function JobLinesExpander({ jobline, jobid, bodyshop }) {
@@ -43,13 +45,25 @@ export function JobLinesExpander({ jobline, jobid, bodyshop }) {
              ? data.parts_order_lines.map((line) => ({
                  key: line.id,
                  children: (
-                    <Space split={<Divider type="vertical" />} wrap>
-                      <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
-                        {line.parts_order.order_number}
-                      </Link>
-                      <DateFormatter>{line.parts_order.order_date}</DateFormatter>
-                      {line.parts_order.vendor.name}
-                    </Space>
+                    <Row wrap>
+                      <Col span={4}>
+                        <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
+                          {line.parts_order.order_number}
+                        </Link>
+                      </Col>
+                      <Col span={4}>
+                        <DateFormatter>{line.parts_order.order_date}</DateFormatter>
+                      </Col>
+                      <Col span={4}>{line.parts_order.vendor.name}</Col>
+                      {line.backordered_eta ? (
+                        <Col span={4}>
+                          <span>
+                            {`${t("parts_orders.fields.backordered_eta")}: `}
+                            <DateFormatter>{line.backordered_eta}</DateFormatter>
+                          </span>
+                        </Col>
+                      ) : null}
+                    </Row>
                  )
                }))
              : [
@@ -61,48 +75,6 @@ export function JobLinesExpander({ jobline, jobid, bodyshop }) {
          }
        />{" "}
      </Col>
-      <Col md={24} lg={8}>
-        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-        <Timeline
-          items={
-            data.billlines.length > 0
-              ? data.billlines.map((line) => ({
-                  key: line.id,
-                  children: (
-                    <Row wrap>
-                      <Col span={4}>
-                        <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
-                          {line.bill.invoice_number}
-                        </Link>
-                      </Col>
-                      <Col span={4}>
-                        <span>
-                          {`${t("billlines.fields.actual_price")}: `}
-                          <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
-                        </span>
-                      </Col>
-                      <Col span={4}>
-                        <span>
-                          {`${t("billlines.fields.actual_cost")}: `}
-                          <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
-                        </span>
-                      </Col>
-                      <Col span={4}>
-                        <DateFormatter>{line.bill.date}</DateFormatter>
-                      </Col>
-                      <Col span={4}> {line.bill.vendor.name}</Col>
-                    </Row>
-                  )
-                }))
-              : [
-                  {
-                    key: "no-orders",
-                    children: t("bills.labels.nobilllines")
-                  }
-                ]
-          }
-        />
-      </Col>
      <Col md={24} lg={8}>
        <Typography.Title level={4}>{t("parts_dispatch.labels.parts_dispatch")}</Typography.Title>
        <Timeline
@@ -111,23 +83,84 @@ export function JobLinesExpander({ jobline, jobid, bodyshop }) {
              ? data.parts_dispatch_lines.map((line) => ({
                  key: line.id,
                  children: (
-                    <Space split={<Divider type="vertical" />} wrap>
-                      <Link to={`/manage/jobs/${jobid}?partsorderid=${line.id}`}>{line.parts_dispatch.number}</Link>
-                      {bodyshop.employees.find((e) => e.id === line.parts_dispatch.employeeid)?.first_name}
-                      <Space>
-                        {t("parts_dispatch_lines.fields.accepted_at")}
-                        <DateFormatter>{line.accepted_at}</DateFormatter>
-                      </Space>
-                    </Space>
+                    <Row>
+                      <Col span={8}>
+                        <Link to={`/manage/jobs/${jobid}?partsorderid=${line.id}`}>{line.parts_dispatch.number}</Link>
+                      </Col>
+                      <Col span={8}>
+                        {bodyshop.employees.find((e) => e.id === line.parts_dispatch.employeeid)?.first_name}
+                      </Col>
+                      <Col span={8}>
+                        <Space>
+                          {t("parts_dispatch_lines.fields.accepted_at")}
+                          <DateFormatter>{line.accepted_at}</DateFormatter>
+                        </Space>
+                      </Col>
+                    </Row>
                  )
                }))
-              : {
-                  key: "dispatch-lines",
-                  children: t("parts_orders.labels.notyetordered")
-                }
+              : [
+                  {
+                    key: "dispatch-lines",
+                    children: t("parts_dispatch.labels.notyetdispatched")
+                  }
+                ]
          }
        />
      </Col>
+      <FeatureWrapper featureName="bills" noauth={() => null}>
+        <Col md={24} lg={8}>
+          <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+          <Timeline
+            items={
+              data.billlines.length > 0
+                ? data.billlines.map((line) => ({
+                    key: line.id,
+                    children: (
+                      <Row wrap>
+                        <Col span={4}>
+                          <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
+                            {line.bill.invoice_number}
+                          </Link>
+                        </Col>
+                        <Col span={4}>
+                          <span>
+                            {`${t("billlines.fields.actual_price")}: `}
+                            <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
+                          </span>
+                        </Col>
+                        <Col span={4}>
+                          <span>
+                            {`${t("billlines.fields.actual_cost")}: `}
+                            <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
+                          </span>
+                        </Col>
+                        <Col span={4}>
+                          <DateFormatter>{line.bill.date}</DateFormatter>
+                        </Col>
+                        <Col span={4}> {line.bill.vendor.name}</Col>
+                      </Row>
+                    )
+                  }))
+                : [
+                    {
+                      key: "no-orders",
+                      children: t("bills.labels.nobilllines")
+                    }
+                  ]
+            }
+          />
+        </Col>
+      </FeatureWrapper>
+      <Col md={24} lg={24}>
+        <TaskListContainer
+          parentJobId={jobid}
+          relationshipType={"joblineid"}
+          relationshipId={jobline.id}
+          query={{ QUERY_JOBLINE_TASKS_PAGINATED }}
+          titleTranslation="tasks.titles.job_tasks"
+        />
+      </Col>
    </Row>
  );
 }
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -42,6 +42,8 @@ import JobSendPartPriceChangeComponent from "../job-send-parts-price-change/job-
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 import JobLinesExpander from "./job-lines-expander.component";
 import JobLinesPartPriceChange from "./job-lines-part-price-change.component";
+import { FaTasks } from "react-icons/fa";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -52,7 +54,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
  setJobLineEditContext: (context) => dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" }))
+  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });

 export function JobLinesComponent({
@@ -67,7 +70,8 @@ export function JobLinesComponent({
  job,
  setJobLineEditContext,
  form,
-  setBillEnterContext
+  setBillEnterContext,
+  setTaskUpsertContext
 }) {
  const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
  const {
@@ -331,6 +335,24 @@ export function JobLinesComponent({
              >
                <EditFilled />
              </Button>
+            </>
+          )}
+
+          <Button
+            title={t("tasks.buttons.create")}
+            onClick={() => {
+              setTaskUpsertContext({
+                context: {
+                  jobid: job.id,
+                  joblineid: record.id
+                }
+              });
+            }}
+          >
+            <FaTasks />
+          </Button>
+          {(record.manual_line || jobIsPrivate) && (
+            <>
              <Button
                disabled={jobRO}
                onClick={async () => {
@@ -452,7 +474,7 @@ export function JobLinesComponent({
                      vendorid: bodyshop.inhousevendorid,
                      invoice_number: "ih",
                      isinhouse: true,
-                      date: new dayjs(),
+                      date: dayjs(),
                      total: 0,
                      billlines: selectedLines.map((p) => {
                        return {
@@ -531,7 +553,7 @@ export function JobLinesComponent({
            >
              {t("joblines.actions.new")}
            </Button>
-            {bodyshop.region_config.toLowerCase().startsWith("us") && <JobSendPartPriceChangeComponent job={job} />}
+            {InstanceRenderManager({ rome: <JobSendPartPriceChangeComponent job={job} /> })}
            <JobCreateIOU job={job} selectedJobLines={selectedLines} />
            <Input.Search
              placeholder={t("general.labels.search")}
--- a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
+++ b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
@@ -154,7 +154,7 @@ export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail
    setLoading(true);

    form.setFieldsValue({
-      //   date: new dayjs(),
+      //   date: dayjs(),
      //   bodyhrs: Math.round(v.bodyhrs * 10) / 10,
      //   painthrs: Math.round(v.painthrs * 10) / 10,
    });
--- a/client/src/components/job-search-select/job-search-select.component.jsx
+++ b/client/src/components/job-search-select/job-search-select.component.jsx
@@ -1,3 +1,4 @@
+import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client";
 import { Select, Space, Spin, Tag } from "antd";
 import _ from "lodash";
@@ -6,8 +7,6 @@ import { useTranslation } from "react-i18next";
 import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-import { SearchOutlined } from "@ant-design/icons";
-import { LoadingOutlined } from "@ant-design/icons";

 const { Option } = Select;

@@ -75,7 +74,7 @@ const JobSearchSelect = (
        filterOption={false}
        onSearch={handleSearch}
        //loading={loading || idLoading}
-        suffixIcon={loading && <Spin />}
+        suffixIcon={(loading || idLoading) && <Spin />}
        notFoundContent={loading ? <LoadingOutlined /> : null}
        {...restProps}
      >
@@ -86,9 +85,9 @@ const JobSearchSelect = (
                  <span>
                    {`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
                      o.ro_number || t("general.labels.na")
-                    } | ${OwnerNameDisplayFunction(o)} | ${
-                      o.v_model_yr || ""
-                    } ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
+                    } | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
+                      o.v_model_desc || ""
+                    }`}
                  </span>
                  <Tag>
                    <strong>{o.status}</strong>
--- a/client/src/components/job-totals-table/job-totals.table.totals.component.jsx
+++ b/client/src/components/job-totals-table/job-totals.table.totals.component.jsx
@@ -165,6 +165,8 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
        bold: true
      }
    ];
+    // TODO: was removed by Patrick during a CI bug fix.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [job.job_totals, job.cieca_pft, t, bodyshop.md_responsibility_centers]);

  const columns = [
--- a/client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js
+++ b/client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js
@@ -15,23 +15,43 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
  const linesToUpdate = [];

  newLines.forEach((newLine) => {
-    const matchingIndex = existingLines.findIndex((eL) => eL.unq_seq === newLine.unq_seq);
+    const matchingIndexLines = [];
+    existingLines.forEach((eL, index) => {
+      if (eL.unq_seq === newLine.unq_seq) {
+        matchingIndexLines.push({ index, record: eL });
+      }
+    });

-    //Should do a check to make sure there is only 1 matching unq sequence number.
-
-    if (matchingIndex >= 0) {
-      //Found a relevant matching line. Add it to lines to update.
-      linesToUpdate.push({
-        id: existingLines[matchingIndex].id,
-        newData: { ...newLine, removed: false, act_price_before_ppc: null }
-      });
-
-      //Splice out item we found for performance.
-      existingLines.splice(matchingIndex, 1);
-    } else {
+    if (matchingIndexLines.length === 0) {
      //Didn't find a match. Must be a new line.
      linesToInsert.push(newLine);
    }
+    //If we find only 1, we can use the old logic.
+    else if (matchingIndexLines.length === 1) {
+      //Found a relevant matching line. Add it to lines to update.
+      linesToUpdate.push({
+        id: matchingIndexLines[0].record.id,
+        newData: { ...newLine, removed: false, act_price_before_ppc: null }
+      });
+      //Splice out item we found for performance.
+      existingLines.splice(matchingIndexLines[0].index, 1);
+    } else if (matchingIndexLines.length === 2) {
+      //if we find 2, we need to separate it out by the non-refinish lines and splice one out.
+      //Find the mathcing one depending on whether this is the refiniish one or not.
+      const matchingLine = matchingIndexLines.find((i) =>
+        newLine.mod_lbr_ty === "LAR" ? i.record.mod_lbr_ty === "LAR" : i.record.mod_lbr_ty !== "LAR"
+      );
+
+      linesToUpdate.push({
+        id: matchingLine.record.id,
+        newData: { ...newLine, removed: false, act_price_before_ppc: null }
+      });
+      //Splice out item we found for performance.
+      existingLines.splice(matchingLine.index, 1);
+    } else {
+      //We found more than 2 matching lines. We should never get here. Throw a warning and back out!
+      throw new Error("Too many matching lines found. Ensure EMS file is valid.");
+    }
  });

  //Wahtever is left in the existing lines, are lines that should be removed.
--- a/client/src/components/jobs-available-table/jobs-available-table.container.jsx
+++ b/client/src/components/jobs-available-table/jobs-available-table.container.jsx
@@ -237,7 +237,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
        executeFunction: true,
        rome: ResolveCCCLineIssues,
        promanager: ResolveCCCLineIssues,
-        args: [(supp, bodyshop)]
+        args: [supp, bodyshop]
      });

      await InstanceRenderManager({
@@ -608,13 +608,12 @@ function ResolveCCCLineIssues(estData, bodyshop) {
          //Web Est seems to have additional costs with UNQ_SEQ 0. Keep them all?
          if (line.unq_seq === 0) return;
          if (index0ActPrice !== line.act_price) {
-            line.notes += ` | Price override.`;
+            // line.notes += ` | Price override.`;
            return;
          }
          const indexInEstData = estData.joblines.data.findIndex((l) => l.unq_seq === line.unq_seq);
-          estData.joblines.data[
-            indexInEstData
-          ].notes += ` | Scrubbed due to the line_ref issue. (prev act price = ${estData.joblines.data[indexInEstData].act_price})`;
+          //estData.joblines.data[indexInEstData].notes +=
+          // ` | Act Price delete. (prev act price = ${estData.joblines.data[indexInEstData].act_price})`;
          estData.joblines.data[indexInEstData].act_price = 0;
          estData.joblines.data[indexInEstData].db_price = 0;
        });
--- 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
@@ -1,6 +1,9 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
+import axios from "axios";
+import parsePhoneNumber from "libphonenumber-js";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,27 +11,24 @@ import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
+import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
 import { DELETE_JOB, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { TemplateList } from "../../utils/TemplateConstants";
+import dayjs from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
-import axios from "axios";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
-import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
-import { TemplateList } from "../../utils/TemplateConstants";
-import parsePhoneNumber from "libphonenumber-js";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
-import dayjs from "../../utils/day";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";

 const mapStateToProps = createStructuredSelector({
@@ -39,13 +39,57 @@ const mapStateToProps = createStructuredSelector({

 const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
  setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setJobCostingContext: (context) => dispatch(setModalContext({ context: context, modal: "jobCosting" })),
-  setTimeTicketContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicket" })),
-  setCardPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "cardPayment" })),
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type })),
-  setTimeTicketTaskContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
+  setJobCostingContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "jobCosting"
+      })
+    ),
+  setTimeTicketContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "timeTicket"
+      })
+    ),
+  setCardPaymentContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "cardPayment"
+      })
+    ),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    ),
+  setTimeTicketTaskContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "timeTicketTask"
+      })
+    ),
+  setTaskUpsertContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "taskUpsert"
+      })
+    ),
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
  setMessage: (text) => dispatch(setMessage(text))
@@ -67,7 +111,8 @@ export function JobsDetailHeaderActions({
  setEmailOptions,
  openChatByPhone,
  setMessage,
-  setTimeTicketTaskContext
+  setTimeTicketTaskContext,
+  setTaskUpsertContext
 }) {
  const { t } = useTranslation();
  const client = useApolloClient();
@@ -596,6 +641,7 @@ export function JobsDetailHeaderActions({
  const menuItems = [
    {
      key: "schedule",
+      id: "job-actions-schedule",
      disabled: !jobInPreProduction || !job.converted || jobRO,
      label: t("jobs.actions.schedule"),
      onClick: () => {
@@ -612,6 +658,7 @@ export function JobsDetailHeaderActions({
    },
    {
      key: "cancelallappointments",
+      id: "job-actions-cancelallappointments",
      onClick: () => {
        if (job.status !== bodyshop.md_ro_statuses.default_scheduled) {
          return;
@@ -625,6 +672,7 @@ export function JobsDetailHeaderActions({
      imex: [
        {
          key: "intake",
+          id: "job-actions-intake",
          disabled: !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO,
          label:
            !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO ? (
@@ -635,6 +683,7 @@ export function JobsDetailHeaderActions({
        },
        {
          key: "deliver",
+          id: "job-actions-deliver",
          disabled: !jobInProduction || jobRO,
          label: !jobInProduction ? (
            t("jobs.actions.deliver")
@@ -644,6 +693,7 @@ export function JobsDetailHeaderActions({
        },
        {
          key: "checklist",
+          id: "job-actions-checklist",
          disabled: !job.converted,
          label: <Link to={`/manage/jobs/${job.id}/checklist`}>{t("jobs.actions.viewchecklist")}</Link>
        }
@@ -652,6 +702,7 @@ export function JobsDetailHeaderActions({
      promanager: [
        {
          key: "toggleproduction",
+          id: "job-actions-toggleproduction",
          disabled: !job.converted || jobRO,
          label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
        }
@@ -665,6 +716,7 @@ export function JobsDetailHeaderActions({
      ? [
          {
            key: "entertimetickets",
+            id: "job-actions-entertimetickets",
            disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
            label: t("timetickets.actions.enter"),
            onClick: () => {
@@ -688,6 +740,7 @@ export function JobsDetailHeaderActions({
  if (bodyshop.md_tasks_presets.enable_tasks) {
    menuItems.push({
      key: "claimtimetickettasks",
+      id: "job-actions-claimtimetickettasks",
      disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
      onClick: () => {
        setTimeTicketTaskContext({
@@ -701,6 +754,7 @@ export function JobsDetailHeaderActions({

  menuItems.push({
    key: "enterpayments",
+    id: "job-actions-enterpayments",
    disabled: !job.converted,
    label: t("menus.header.enterpayment"),
    onClick: () => {
@@ -716,22 +770,24 @@ export function JobsDetailHeaderActions({
  if (ImEXPay.treatment === "on") {
    menuItems.push({
      key: "entercardpayments",
+      id: "job-actions-entercardpayments",
      disabled: !job.converted,
      label: t("menus.header.entercardpayment"),
      onClick: () => {
        logImEXEvent("job_header_enter_card_payment");

        setCardPaymentContext({
-          actions: {},
+          actions: { refetch },
          context: { jobid: job.id }
        });
      }
    });
  }

-  if (HasFeatureAccess({ featureName: "courtesycars" })) {
+  if (HasFeatureAccess({ featureName: "courtesycars", bodyshop })) {
    menuItems.push({
      key: "cccontract",
+      id: "job-actions-cccontract",
      disabled: jobRO || !job.converted,
      label: (
        <Link state={{ jobId: job.id }} to="/manage/courtesycars/contracts/new">
@@ -741,16 +797,29 @@ export function JobsDetailHeaderActions({
    });
  }

+  menuItems.push({
+    key: "createtask",
+    id: "job-actions-createtask",
+    label: t("menus.header.create_task"),
+    onClick: () =>
+      setTaskUpsertContext({
+        actions: {},
+        context: { jobid: job.id }
+      })
+  });
+
  menuItems.push(
    job.inproduction
      ? {
-          key: "addtoproduction",
+          key: "removefromproduction",
+          id: "job-actions-removefromproduction",
          disabled: !job.converted,
          label: t("jobs.actions.removefromproduction"),
          onClick: () => AddToProduction(client, job.id, refetch, true)
        }
      : {
          key: "addtoproduction",
+          id: "job-actions-addtoproduction",
          disabled: !job.converted,
          label: t("jobs.actions.addtoproduction"),
          onClick: () => AddToProduction(client, job.id, refetch)
@@ -760,12 +829,14 @@ export function JobsDetailHeaderActions({
  menuItems.push(
    {
      key: "togglesuspend",
+      id: "job-actions-togglesuspend",
      onClick: handleSuspend,
      label: job.suspended ? t("production.actions.unsuspend") : t("production.actions.suspend")
    },
    {
      key: "toggleAlert",
      onClick: handleAlertToggle,
+      id: "job-actions-togglealert",
      label:
        job.production_vars && job.production_vars.alert
          ? t("production.labels.alertoff")
@@ -777,6 +848,7 @@ export function JobsDetailHeaderActions({
      children: [
        {
          key: "duplicate",
+          id: "job-actions-duplicate",
          label: (
            <Popconfirm
              title={t("jobs.labels.duplicateconfirm")}
@@ -792,6 +864,7 @@ export function JobsDetailHeaderActions({
        },
        {
          key: "duplicatenolines",
+          id: "job-actions-duplicatenolines",
          label: (
            <Popconfirm
              title={t("jobs.labels.duplicateconfirm")}
@@ -815,6 +888,7 @@ export function JobsDetailHeaderActions({
      ? [
          {
            key: "postbills",
+            id: "job-actions-postbills",
            disabled: !job.converted,
            label: t("jobs.actions.postbills"),
            onClick: () => {
@@ -833,6 +907,7 @@ export function JobsDetailHeaderActions({

    {
      key: "addtopartsqueue",
+      id: "job-actions-addtopartsqueue",
      disabled: !job.converted || !jobInProduction || jobRO,
      label: t("jobs.actions.addtopartsqueue"),
      onClick: async () => {
@@ -858,6 +933,7 @@ export function JobsDetailHeaderActions({
    },
    {
      key: "closejob",
+      id: "job-actions-closejob",
      disabled: !jobInPostProduction,
      label: !jobInPostProduction ? (
        t("menus.jobsactions.closejob")
@@ -873,6 +949,7 @@ export function JobsDetailHeaderActions({
    },
    {
      key: "admin",
+      id: "job-actions-admin",
      label: (
        <Link
          to={{
@@ -894,6 +971,7 @@ export function JobsDetailHeaderActions({
  ) {
    menuItems.push({
      key: "exportcustdata",
+      id: "job-actions-exportcustdata",
      disabled: !job.converted,
      label: t("jobs.actions.exportcustdata"),
      onClick: handleExportCustData
@@ -904,18 +982,21 @@ export function JobsDetailHeaderActions({
    const children = [
      {
        key: "email",
+        id: "job-actions-email",
        disabled: !!!job.ownr_ea,
        label: t("general.labels.email"),
        onClick: handleCreateCsi
      },
      {
        key: "text",
+        id: "job-actions-text",
        disabled: !!!job.ownr_ph1,
        label: t("general.labels.text"),
        onClick: handleCreateCsi
      },
      {
        key: "generate",
+        id: "job-actions-generate",
        disabled: job.csiinvites && job.csiinvites.length > 0,
        label: t("jobs.actions.generatecsi"),
        onClick: handleCreateCsi
@@ -949,6 +1030,7 @@ export function JobsDetailHeaderActions({
    }
    menuItems.push({
      key: "sendcsi",
+      id: "job-actions-sendcsi",
      label: t("jobs.actions.sendcsi"),
      disabled: !job.converted,
      children
@@ -957,6 +1039,7 @@ export function JobsDetailHeaderActions({

  menuItems.push({
    key: "jobcosting",
+    id: "job-actions-jobcosting",
    disabled: !job.converted,
    label: t("jobs.labels.jobcosting"),
    onClick: () => {
@@ -974,6 +1057,7 @@ export function JobsDetailHeaderActions({
  if (job && !job.converted) {
    menuItems.push({
      key: "deletejob",
+      id: "job-actions-deletejob",
      label: (
        <Popconfirm
          title={t("jobs.labels.deleteconfirm")}
@@ -990,6 +1074,7 @@ export function JobsDetailHeaderActions({

  menuItems.push({
    key: "manualevent",
+    id: "job-actions-manualevent",
    onClick: (e) => {
      setVisibility(true);
    },
@@ -999,6 +1084,7 @@ export function JobsDetailHeaderActions({
  if (!jobRO && job.converted) {
    menuItems.push({
      key: "voidjob",
+      id: "job-actions-voidjob",
      label: (
        <RbacWrapper action="jobs:void" noauth>
          <Popconfirm
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -96,7 +96,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
      }),
      onFilter: (value, record) => value.includes(record.status)
    },
-
    {
      title: t("jobs.fields.vehicle"),
      dataIndex: "vehicle",
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -18,7 +18,6 @@ import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import { setJoyRideSteps } from "../../redux/application/application.actions";
 import { OwnerNameDisplayFunction } from "./../owner-name-display/owner-name-display.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -176,7 +175,6 @@ export function JobsList({ bodyshop, setJoyRideSteps }) {
        [],
      onFilter: (value, record) => value.includes(record.status)
    },
-
    {
      title: t("jobs.fields.vehicle"),
      dataIndex: "vehicle",
@@ -316,34 +314,6 @@ export function JobsList({ bodyshop, setJoyRideSteps }) {
      title={t("titles.bc.jobs-active")}
      extra={
        <Space wrap>
-          {InstanceRenderManager({
-            promanager: (
-              <Button
-                onClick={() =>
-                  setJoyRideSteps([
-                    {
-                      target: "#active-jobs-list",
-                      content: "This is where you will see all work coming in and currently here."
-                    },
-                    {
-                      target: "#header-jobs",
-                      spotlightClicks: true,
-                      disableOverlayClose: true,
-                      content:
-                        "The jobs menu lets you access additional pages to see more information. You can import new jobs, search all jobs, or manage your current production."
-                    },
-                    {
-                      target: "#header-jobs-available",
-                      content: "You can find jobs to import here."
-                    }
-                  ])
-                }
-              >
-                Start Walk Through
-              </Button>
-            )
-          })}
-
          <Button onClick={() => refetch()}>
            <SyncOutlined />
          </Button>
--- a/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
+++ b/client/src/components/owner-detail-jobs/owner-detail-jobs.component.jsx
@@ -6,7 +6,8 @@ import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, statusSort } from "../../utils/sorters";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import OwnerDetailUpdateJobsComponent from "../owner-detail-update-jobs/owner-detail-update-jobs.component";

 const mapStateToProps = createStructuredSelector({
@@ -75,7 +76,18 @@ function OwnerDetailJobsComponent({ bodyshop, owner }) {
      })),
      onFilter: (value, record) => value.includes(record.status)
    },
-
+    {
+      title: t("jobs.fields.actual_completion"),
+      dataIndex: "actual_completion",
+      key: "actual_completion",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.actual_completion}</DateTimeFormatter>
+      ),
+      sorter: (a, b) => dateSort(a.actual_completion, b.actual_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "actual_completion" &&
+        state.sortedInfo.order,
+    },
    {
      title: t("jobs.fields.clm_total"),
      dataIndex: "clm_total",
--- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
@@ -1,23 +1,24 @@
 import { DeleteFilled, EyeFilled, SyncOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Card, Checkbox, Drawer, Grid, Input, Popconfirm, Space, Table } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";

 import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
 import DataLabel from "../data-label/data-label.component";
 import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
 import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
@@ -26,6 +27,7 @@ import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
 import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import { FaTasks } from "react-icons/fa";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -33,8 +35,21 @@ const mapStateToProps = createStructuredSelector({
 });

 const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
-  setPartsReceiveContext: (context) => dispatch(setModalContext({ context: context, modal: "partsReceive" }))
+  setBillEnterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "billEnter"
+      })
+    ),
+  setPartsReceiveContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "partsReceive"
+      })
+    ),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });

 export function PartsOrderListTableComponent({
@@ -44,7 +59,8 @@ export function PartsOrderListTableComponent({
  job,
  billsQuery,
  handleOnRowClick,
-  setPartsReceiveContext
+  setPartsReceiveContext,
+  setTaskUpsertContext
 }) {
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
@@ -66,19 +82,46 @@ export function PartsOrderListTableComponent({
  const [state, setState] = useState({
    sortedInfo: {}
  });
+
+  const [returnfrombill, setReturnFromBill] = useState();
+  const [billData, setBillData] = useState();
  const search = queryString.parse(useLocation().search);
  const selectedpartsorder = search.partsorderid;
  const [searchText, setSearchText] = useState("");

+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
  const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);

  const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
  const { refetch } = billsQuery;

+  useEffect(() => {
+    if (returnfrombill === null) {
+      setBillData(null);
+    } else {
+      const fetchData = async () => {
+        const result = await billQuery({
+          variables: { billid: returnfrombill }
+        });
+        setBillData(result.data);
+      };
+      fetchData();
+    }
+  }, [returnfrombill, billQuery]);
+
  const recordActions = (record, showView = false) => (
-    <Space wrap>
+    <Space direction="horizontal" wrap>
      {showView && (
-        <Button onClick={() => handleOnRowClick(record)}>
+        <Button
+          onClick={() => {
+            if (record.returnfrombill) {
+              setReturnFromBill(record.returnfrombill);
+            } else {
+              setReturnFromBill(null);
+            }
+            handleOnRowClick(record);
+          }}
+        >
          <EyeFilled />
        </Button>
      )}
@@ -108,7 +151,19 @@ export function PartsOrderListTableComponent({
      >
        {t("parts_orders.actions.receive")}
      </Button>
-
+      <Button
+        title={t("tasks.buttons.create")}
+        onClick={() => {
+          setTaskUpsertContext({
+            context: {
+              jobid: job.id,
+              partsorderid: record.id
+            }
+          });
+        }}
+      >
+        <FaTasks />
+      </Button>
      <Popconfirm
        title={t("parts_orders.labels.confirmdelete")}
        disabled={jobRO}
@@ -148,7 +203,7 @@ export function PartsOrderListTableComponent({
                  is_credit_memo: record.return,
                  billlines: record.parts_order_lines.map((pol) => {
                    return {
-                      joblineid: pol.job_line_id,
+                      joblineid: pol.job_line_id || "noline",
                      line_desc: pol.line_desc,
                      quantity: pol.quantity,

@@ -368,7 +423,14 @@ export function PartsOrderListTableComponent({

    return (
      <div>
-        <PageHeader title={record && `${record.vendor.name} - ${record.order_number}`} extra={recordActions(record)} />
+        <PageHeader
+          title={
+            billData
+              ? `${record.vendor.name} - ${record.order_number} - ${t("bills.labels.returnfrombill")}: ${billData.bills_by_pk.invoice_number}`
+              : `${record.vendor.name} - ${record.order_number}`
+          }
+          extra={recordActions(record)}
+        />
        <Table
          scroll={{
            x: true //y: "50rem"
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -182,7 +182,7 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
                          }
                        ]}
                      >
-                        <InputNumber />
+                        <InputNumber min={1} />
                      </Form.Item>
                      <Form.Item
                        label={t("parts_orders.fields.act_price")}
--- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.container.jsx
@@ -158,7 +158,7 @@ export function PartsOrderModalContainer({
            vendorid: bodyshop.inhousevendorid,
            invoice_number: "ih",
            isinhouse: true,
-            date: new dayjs(),
+            date:  dayjs(),
            total: 0,
            billlines: values.parts_order_lines.data.map((p) => {
              return {
--- a/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
+++ b/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
@@ -119,8 +119,14 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {

  return (
    <div>
-      <Descriptions title={t("job_payments.titles.descriptions")} contentStyle={{ fontWeight: "600" }} column={4}>
-        <Descriptions.Item label={t("job_payments.titles.payer")}>{record.payer}</Descriptions.Item>
+      <Descriptions
+        title={t("job_payments.titles.descriptions")}
+        contentStyle={{ fontWeight: "600" }}
+        column={4}
+      >
+        <Descriptions.Item label={t("job_payments.titles.hint")}>
+          {payment_response?.response?.methodhint}
+        </Descriptions.Item>
        <Descriptions.Item label={t("job_payments.titles.payername")}>
          {payment_response?.response?.nameOnCard ?? ""}
        </Descriptions.Item>
@@ -132,7 +138,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
        </Descriptions.Item>
        <Descriptions.Item label={t("job_payments.titles.transactionid")}>{record.transactionid}</Descriptions.Item>
        <Descriptions.Item label={t("job_payments.titles.paymentid")}>
-          {payment_response?.response?.paymentreferenceid ?? ""}
+          {payment_response?.ext_paymentid ?? ""}
        </Descriptions.Item>
        <Descriptions.Item label={t("job_payments.titles.paymenttype")}>{record.type}</Descriptions.Item>
        <Descriptions.Item label={t("job_payments.titles.paymentnum")}>{record.paymentnum}</Descriptions.Item>
--- a/client/src/components/payment-mark-export-button/payment-mark-export-button-component.jsx
+++ b/client/src/components/payment-mark-export-button/payment-mark-export-button-component.jsx
@@ -7,8 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { selectPayment } from "../../redux/modals/modals.selectors";
+import { selectCurrentUser } from "../../redux/user/user.selectors";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -58,8 +58,10 @@ const PaymentMarkForExportButton = ({ bodyshop, payment, refetch, setPaymentCont
          refetch
        },
        context: {
+          ...paymentModal.context,
          ...paymentModal.context,
          ...payment,
+          smartRefetch: true,
          exportedat: today
        }
      });
--- a/client/src/components/payment-modal/payment-modal.container.jsx
+++ b/client/src/components/payment-modal/payment-modal.container.jsx
@@ -1,32 +1,30 @@
-import { useMutation } from "@apollo/client";
-import { Button, Form, Modal, notification, Space } from "antd";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { INSERT_NEW_PAYMENT, UPDATE_PAYMENT } from "../../graphql/payments.queries";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import { selectPayment } from "../../redux/modals/modals.selectors";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { GenerateDocument } from "../../utils/RenderTemplate";
-import { TemplateList } from "../../utils/TemplateConstants";
+import {useMutation} from "@apollo/client";
+import {Button, Form, Modal, notification, Space} from "antd";
+import React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {INSERT_NEW_PAYMENT, UPDATE_PAYMENT} from "../../graphql/payments.queries";
+import {toggleModalVisible} from "../../redux/modals/modals.actions";
+import {selectPayment} from "../../redux/modals/modals.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {GenerateDocument} from "../../utils/RenderTemplate";
+import {TemplateList} from "../../utils/TemplateConstants";
 import PaymentForm from "../payment-form/payment-form.component";
-import PaymentMarkForExportButton from "../payment-mark-export-button/payment-mark-export-button-component";
+import PaymentMarkForExportButton
+  from "../payment-mark-export-button/payment-mark-export-button-component";
 import PaymentReexportButton from "../payment-reexport-button/payment-reexport-button.component";

 const mapStateToProps = createStructuredSelector({
  paymentModal: selectPayment,
  bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
 });

 const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
  toggleModalVisible: () => dispatch(toggleModalVisible("payment"))
 });

-function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop, currentUser, setEmailOptions }) {
+function PaymentModalContainer({paymentModal, toggleModalVisible, bodyshop }) {
  const [form] = Form.useForm();
  const [enterAgain, setEnterAgain] = useState(false);
  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
@@ -34,7 +32,6 @@ function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop, cur

  const { t } = useTranslation();
  const { context, actions, open } = paymentModal;
-
  const [loading, setLoading] = useState(false);

  const handleFinish = async (values) => {
@@ -84,9 +81,9 @@ function PaymentModalContainer({ paymentModal, toggleModalVisible, bodyshop, cur
        });

        if (!!!updatedPayment.errors) {
-          notification["success"]({ message: t("payments.successes.payment") });
+          notification["success"]({ message: t("payments.successes.paymentupdate") });
        } else {
-          notification["error"]({ message: t("payments.errors.payment") });
+          notification["error"]({ message: t("payments.errors.paymentupdate") });
        }
      }

--- a/client/src/components/payment-reexport-button/payment-reexport-button.component.jsx
+++ b/client/src/components/payment-reexport-button/payment-reexport-button.component.jsx
@@ -3,10 +3,10 @@ import { Button, notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectPayment } from "../../redux/modals/modals.selectors";
-import { createStructuredSelector } from "reselect";

 const mapStateToProps = createStructuredSelector({
  paymentModal: selectPayment
@@ -40,6 +40,7 @@ const PaymentReexportButton = ({ paymentModal, payment, refetch, setPaymentConte
          refetch
        },
        context: {
+          ...paymentModal.context,
          ...paymentModal.context,
          ...payment,
          exportedat: null
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -14,11 +14,11 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { pageLimit } from "../../utils/config";
 import { alphaSort } from "../../utils/sorters";
 import CaBcEtfTableModalContainer from "../ca-bc-etf-table-modal/ca-bc-etf-table-modal.container";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import { pageLimit } from "../../utils/config";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
--- a/client/src/components/print-center-jobs-labels/print-center-jobs-labels.component.jsx
+++ b/client/src/components/print-center-jobs-labels/print-center-jobs-labels.component.jsx
@@ -1,4 +1,13 @@
-import { Button, Card, Form, InputNumber, notification, Popover, Radio } from "antd";
+import {
+  Button,
+  Card,
+  Form,
+  InputNumber,
+  notification,
+  Popover,
+  Radio,
+  Space,
+} from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -95,10 +104,16 @@ export function PrintCenterJobsLabels({ bodyshop, jobId }) {
        >
          <InputNumber min={1} precision={0} max={99} />
        </Form.Item>
-        <Button type="primary" loading={loading} onClick={handleOk}>
-          {t("general.actions.print")}
-        </Button>
-        <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <Space>
+            <Button type="primary" loading={loading} onClick={handleOk}>
+              {t("general.actions.print")}
+            </Button>
+            <Button onClick={handleCancel}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Space>
+        </div>
      </Form>
    </Card>
  );
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
@@ -22,7 +22,7 @@ const CardColorLegend = ({ bodyshop }) => {
  });

  return (
-    <Col>
+    <Col style={{ marginLeft: "15px" }}>
      <Typography>{t("production.labels.legend")}</Typography>
      <List
        grid={{
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
@@ -6,7 +6,7 @@ import {
  PauseCircleOutlined
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tooltip } from "antd";
-import React from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -18,77 +18,102 @@ import dayjs from "../../utils/day";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";

+/**
+ * Get the color of the card based on the total hours
+ * @param ssbuckets
+ * @param totalHrs
+ * @returns {{r: number, b: number, g: number}}
+ */
 const cardColor = (ssbuckets, totalHrs) => {
-  const bucket = ssbuckets.filter((bucket) => bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true))[0];
+  const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));

  let color = { r: 255, g: 255, b: 255 };

  if (bucket && bucket.color) {
-    color = bucket.color;
-
-    if (bucket.color.rgb) {
-      color = bucket.color.rgb;
-    }
+    color = bucket.color.rgb || bucket.color;
  }

  return color;
 };

-function getContrastYIQ(bgColor) {
-  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
+/**
+ * Get the contrast color based on the background color
+ * @param bgColor
+ * @returns {string}
+ */
+const getContrastYIQ = (bgColor) =>
+  (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white";

-  return yiq >= 128 ? "black" : "white";
-}
-
-export default function ProductionBoardCard(technician, card, bodyshop, cardSettings) {
+/**
+ * Production Board Card component
+ * @param technician
+ * @param card
+ * @param bodyshop
+ * @param cardSettings
+ * @returns {Element}
+ * @constructor
+ */
+export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
  const { t } = useTranslation();

  let employee_body, employee_prep, employee_refinish, employee_csr;
-  if (card.employee_body) {
-    employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
+
+  // Destructure metadata
+  const { metadata } = card;
+
+  if (metadata?.employee_body) {
+    employee_body = bodyshop.employees.find((e) => e.id === metadata.employee_body);
  }
-  if (card.employee_prep) {
-    employee_prep = bodyshop.employees.find((e) => e.id === card.employee_prep);
+  if (metadata?.employee_prep) {
+    employee_prep = bodyshop.employees.find((e) => e.id === metadata.employee_prep);
  }
-  if (card.employee_refinish) {
-    employee_refinish = bodyshop.employees.find((e) => e.id === card.employee_refinish);
+  if (metadata?.employee_refinish) {
+    employee_refinish = bodyshop.employees.find((e) => e.id === metadata.employee_refinish);
  }
-  if (card.employee_csr) {
-    employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
+  if (metadata?.employee_csr) {
+    employee_csr = bodyshop.employees.find((e) => e.id === metadata.employee_csr);
  }
-  // if (card.employee_csr) {
-  //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
+  // if (metadata.?employee_csr) {
+  //   employee_csr = bodyshop.employees.find((e) => e.id === metadata.employee_csr);
  // }

  const pastDueAlert =
-    !!card.scheduled_completion &&
-    ((dayjs().isSameOrAfter(dayjs(card.scheduled_completion), "day") && "production-completion-past") ||
-      (dayjs().add(1, "day").isSame(dayjs(card.scheduled_completion), "day") && "production-completion-soon"));
+    !!metadata?.scheduled_completion &&
+    ((dayjs().isSameOrAfter(dayjs(metadata.scheduled_completion), "day") && "production-completion-past") ||
+      (dayjs().add(1, "day").isSame(dayjs(metadata.scheduled_completion), "day") && "production-completion-soon"));

-  const totalHrs = card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
-  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
+  const totalHrs = useMemo(() => {
+    return metadata?.labhrs && metadata?.larhrs
+      ? metadata.labhrs.aggregate.sum.mod_lb_hrs + metadata.larhrs.aggregate.sum.mod_lb_hrs
+      : 0;
+  }, [metadata]);
+
+  const bgColor = useMemo(() => cardColor(bodyshop.ssbuckets, totalHrs), [bodyshop.ssbuckets, totalHrs]);
+  const contrastYIQ = useMemo(() => getContrastYIQ(bgColor), [bgColor]);

  return (
    <Card
-      className="react-kanban-card imex-kanban-card"
+      className="react-trello-card"
      size="small"
      style={{
        backgroundColor:
          cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
-        color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor)
+        color: cardSettings && cardSettings.cardcolor && contrastYIQ,
+        maxWidth: "250px",
+        margin: "5px"
      }}
      title={
        <Space>
          <ProductionAlert record={card} key="alert" />
-          {card.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
-          {card.iouparent && (
+          {metadata?.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+          {metadata?.iouparent && (
            <Tooltip title={t("jobs.labels.iou")}>
              <BranchesOutlined style={{ color: "orangered" }} />
            </Tooltip>
          )}
          <span style={{ fontWeight: "bolder" }}>
            <Link to={technician ? `/tech/joblookup?selected=${card.id}` : `/manage/jobs/${card.id}`}>
-              {card.ro_number || t("general.labels.na")}
+              {metadata?.ro_number || t("general.labels.na")}
            </Link>
          </span>
        </Space>
@@ -103,7 +128,7 @@ export default function ProductionBoardCard(technician, card, bodyshop, cardSett
        {cardSettings && cardSettings.ownr_nm && (
          <Col span={24}>
            {cardSettings && cardSettings.compact ? (
-              <div className="ellipses">{`${card.ownr_ln || ""} ${card.ownr_co_nm || ""}`}</div>
+              <div className="ellipses">{`${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`}</div>
            ) : (
              <div className="ellipses">
                <OwnerNameDisplay ownerObject={card} />
@@ -112,18 +137,18 @@ export default function ProductionBoardCard(technician, card, bodyshop, cardSett
          </Col>
        )}
        <Col span={24}>
-          <div className="ellipses">{`${card.v_model_yr || ""} ${
-            card.v_make_desc || ""
-          } ${card.v_model_desc || ""}`}</div>
+          <div className="ellipses">{`${metadata.v_model_yr || ""} ${
+            metadata.v_make_desc || ""
+          } ${metadata.v_model_desc || ""}`}</div>
        </Col>
-        {cardSettings && cardSettings.ins_co_nm && card.ins_co_nm && (
+        {cardSettings && cardSettings.ins_co_nm && metadata.ins_co_nm && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-            <div className="ellipses">{card.ins_co_nm || ""}</div>
+            <div className="ellipses">{metadata.ins_co_nm || ""}</div>
          </Col>
        )}
-        {cardSettings && cardSettings.clm_no && card.clm_no && (
+        {cardSettings && cardSettings.clm_no && metadata.clm_no && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
-            <div className="ellipses">{card.clm_no || ""}</div>
+            <div className="ellipses">{metadata.clm_no || ""}</div>
          </Col>
        )}

@@ -132,7 +157,7 @@ export default function ProductionBoardCard(technician, card, bodyshop, cardSett
            <Row>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
                employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""
-              } ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+              } ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
                employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""
              }`}</Col>
@@ -140,7 +165,7 @@ export default function ProductionBoardCard(technician, card, bodyshop, cardSett
                employee_refinish
                  ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}`
                  : ""
-              } ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+              } ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
                employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""
              }`}</Col>
@@ -151,48 +176,56 @@ export default function ProductionBoardCard(technician, card, bodyshop, cardSett
          <Col span={24}>
            <Row>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
-                card.labhrs.aggregate.sum.mod_lb_hrs || "?"
+                metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"
              } hrs`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
-                card.larhrs.aggregate.sum.mod_lb_hrs || "?"
+                metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"
              } hrs`}</Col>
            </Row>
          </Col>
        )} */}
-        {cardSettings && cardSettings.actual_in && card.actual_in && (
+        {cardSettings && cardSettings.actual_in && metadata.actual_in && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <Space>
              <DownloadOutlined />
-              <DateTimeFormatter format="MM/DD">{card.actual_in}</DateTimeFormatter>
+              <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
            </Space>
          </Col>
        )}
-        {cardSettings && cardSettings.scheduled_completion && card.scheduled_completion && (
+        {cardSettings && cardSettings.scheduled_completion && metadata.scheduled_completion && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <Space className={pastDueAlert}>
              <CalendarOutlined />
-              <DateTimeFormatter format="MM/DD">{card.scheduled_completion}</DateTimeFormatter>
+              <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
            </Space>
          </Col>
        )}
-        {cardSettings && cardSettings.ats && card.alt_transport && (
+        {cardSettings && cardSettings.ats && metadata.alt_transport && (
          <Col span={12}>
-            <div>{card.alt_transport || ""}</div>
+            <div>{metadata.alt_transport || ""}</div>
          </Col>
        )}
        {cardSettings && cardSettings.sublets && (
          <Col span={12}>
-            <ProductionSubletsManageComponent subletJobLines={card.subletLines} />
+            <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
          </Col>
        )}
        {cardSettings && cardSettings.production_note && (
          <Col span={24}>
-            {cardSettings && cardSettings.production_note && <ProductionListColumnProductionNote record={card} />}
+            {cardSettings && cardSettings.production_note && (
+              <ProductionListColumnProductionNote
+                record={{
+                  production_vars: card?.metadata.production_vars,
+                  id: card?.id,
+                  refetch: card?.refetch
+                }}
+              />
+            )}
          </Col>
        )}
        {cardSettings && cardSettings.partsstatus && (
          <Col span={24}>
-            <JobPartsQueueCount parts={card.joblines_status} />
+            <JobPartsQueueCount parts={metadata.joblines_status} />
          </Col>
        )}
      </Row>
--- a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
@@ -1,125 +0,0 @@
-import { useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, notification, Popover, Row, Switch } from "antd";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
-
-export default function ProductionBoardKanbanCardSettings({ associationSettings }) {
-  const [form] = Form.useForm();
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
-
-  useEffect(() => {
-    form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
-  }, [form, associationSettings, open]);
-
-  const { t } = useTranslation();
-
-  const handleFinish = async (values) => {
-    setLoading(true);
-    const result = await updateKbSettings({
-      variables: {
-        id: associationSettings && associationSettings.id,
-        ks: values
-      }
-    });
-    if (result.errors) {
-      notification.open({
-        type: "error",
-        message: t("production.errors.settings", {
-          error: JSON.stringify(result.errors)
-        })
-      });
-    }
-    setOpen(false);
-    setLoading(false);
-  };
-
-  const overlay = (
-    <div>
-      <Card>
-        <Form form={form} onFinish={handleFinish} layout="vertical">
-          <Row gutter={[16, 16]}>
-            <Col span={12}>
-              <Form.Item label={t("production.labels.compact")} name="compact" valuePropName="checked">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.ownr_nm")} name="ownr_nm">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.clm_no")} name="clm_no">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.ins_co_nm")} name="ins_co_nm">
-                <Switch />
-              </Form.Item>
-              {/* <Form.Item
-                valuePropName="checked"
-                label={t("production.labels.laborhrs")}
-                name="laborhrs"
-              >
-                <Switch />
-              </Form.Item> */}
-              <Form.Item
-                valuePropName="checked"
-                label={t("production.labels.employeeassignments")}
-                name="employeeassignments"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.actual_in")} name="actual_in">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.cardcolor")} name="cardcolor">
-                <Switch />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                valuePropName="checked"
-                label={t("production.labels.scheduled_completion")}
-                name="scheduled_completion"
-              >
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.ats")} name="ats">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.production_note")} name="production_note">
-                <Switch />
-              </Form.Item>
-              {/* <Form.Item
-              valuePropName='checked' label={t("production.labels.alert")} name="alert">
-                <Switch/>
-              </Form.Item> */}
-              <Form.Item valuePropName="checked" label={t("production.labels.sublets")} name="sublets">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.partsstatus")} name="partsstatus">
-                <Switch />
-              </Form.Item>
-              <Form.Item valuePropName="checked" label={t("production.labels.stickyheader")} name="stickyheader">
-                <Switch />
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-        <Button
-          onClick={() => {
-            form.submit();
-          }}
-        >
-          {t("general.actions.save")}
-        </Button>
-      </Card>
-    </div>
-  );
-  return (
-    <Popover content={overlay} open={open} placement="topRight">
-      <Button loading={loading} onClick={() => setOpen(true)}>
-        {t("production.labels.cardsettings")}
-      </Button>
-    </Popover>
-  );
-}
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -1,7 +1,7 @@
-import { SyncOutlined } from "@ant-design/icons";
+import { SyncOutlined, UnorderedListOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import Board, { moveCard } from "@asseinfo/react-kanban";
-import { Button, Grid, notification, Space, Statistic } from "antd";
+import Board from "../../components/trello-board/index";
+import { Button, Grid, notification, Skeleton, Space, Statistic } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,11 +19,10 @@ import IndefiniteLoading from "../indefinite-loading/indefinite-loading.componen
 import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
 import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
-import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
-//import "@asseinfo/react-kanban/dist/styles.css";
 import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
-import { createBoardData } from "./production-board-kanban.utils.js";
+import { createBoardData, createFakeBoardData } from "./production-board-kanban.utils.js";
+import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -31,7 +30,14 @@ const mapStateToProps = createStructuredSelector({
 });

 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });

 export function ProductionBoardKanbanComponent({
@@ -42,23 +48,30 @@ export function ProductionBoardKanbanComponent({
  insertAuditTrail,
  associationSettings
 }) {
-  const [boardLanes, setBoardLanes] = useState({
-    columns: [{ id: "Loading...", title: "Loading...", cards: [] }]
-  });
+  const [boardLanes, setBoardLanes] = useState({ lanes: [] });

  const [filter, setFilter] = useState({ search: "", employeeId: null });
+  const [loading, setLoading] = useState(true);

  const [isMoving, setIsMoving] = useState(false);

+  const orientation = associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal";
  const { t } = useTranslation();
+
  useEffect(() => {
-    const boardData = createBoardData(
+    if (associationSettings) {
+      setLoading(false);
+    }
+  }, [associationSettings]);
+
+  useEffect(() => {
+    const boardData = createFakeBoardData(
      [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
      data,
      filter
    );

-    boardData.columns = boardData.columns.map((d) => {
+    boardData.lanes = boardData.lanes.map((d) => {
      return { ...d, title: `${d.title} (${d.cards.length})` };
    });
    setBoardLanes(boardData);
@@ -67,72 +80,75 @@ export function ProductionBoardKanbanComponent({

  const client = useApolloClient();

-  const handleDragEnd = async (card, source, destination) => {
+  const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
    logImEXEvent("kanban_drag_end");

    setIsMoving(true);
-    setBoardLanes(moveCard(boardLanes, source, destination));
-    const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
-    const sourceColumn = boardLanes.columns.find((x) => x.id === source.fromColumnId);
-    const destinationColumn = boardLanes.columns.find((x) => x.id === destination.toColumnId);

-    const movedCardWillBeFirst = destination.toPosition === 0;
+    const sameColumnTransfer = sourceLaneId === targetLaneId;

-    const movedCardWillBeLast = destinationColumn.cards.length - destination.toPosition < 1;
+    const sourceLane = boardLanes.lanes.find((lane) => lane.id === sourceLaneId);
+    const targetLane = boardLanes.lanes.find((lane) => lane.id === targetLaneId);

-    const lastCardInDestinationColumn = destinationColumn.cards[destinationColumn.cards.length - 1];
+    const movedCardWillBeFirst = position === 0;
+    const movedCardWillBeLast = targetLane.cards.length - position < 1;

-    const oldChildCard = sourceColumn.cards[source.fromPosition + 1];
+    const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
+
+    const oldChildCard = sourceLane.cards[position + 1];

    const newChildCard = movedCardWillBeLast
      ? null
-      : destinationColumn.cards[
-          sameColumnTransfer
-            ? source.fromPosition - destination.toPosition > 0
-              ? destination.toPosition
-              : destination.toPosition + 1
-            : destination.toPosition
-        ];
+      : targetLane.cards[sameColumnTransfer ? (position - position > 0 ? position : position + 1) : position];

-    const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
+    const oldChildCardNewParent = oldChildCard ? cardDetails.kanbanparent : null;

    let movedCardNewKanbanParent;
    if (movedCardWillBeFirst) {
-      //console.log("==> New Card is first.");
      movedCardNewKanbanParent = "-1";
    } else if (movedCardWillBeLast) {
-      // console.log("==> New Card is last.");
-      movedCardNewKanbanParent = lastCardInDestinationColumn.id;
+      movedCardNewKanbanParent = lastCardInTargetLane.id;
    } else if (!!newChildCard) {
-      // console.log("==> New Card is somewhere in the middle");
      movedCardNewKanbanParent = newChildCard.kanbanparent;
    } else {
      console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
    }
-    const newChildCardNewParent = newChildCard ? card.id : null;
-    const update = await client.mutate({
-      mutation: generate_UPDATE_JOB_KANBAN(
-        oldChildCard ? oldChildCard.id : null,
-        oldChildCardNewParent,
-        card.id,
-        movedCardNewKanbanParent,
-        destination.toColumnId,
-        newChildCard ? newChildCard.id : null,
-        newChildCardNewParent
-      )
-    });
-    insertAuditTrail({
-      jobid: card.id,
-      operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
-      type: "jobstatuschange"
-    });
+    const newChildCardNewParent = newChildCard ? cardId : null;

-    if (update.errors) {
+    try {
+      const update = await client.mutate({
+        mutation: generate_UPDATE_JOB_KANBAN(
+          oldChildCard ? oldChildCard.id : null,
+          oldChildCardNewParent,
+          cardId,
+          movedCardNewKanbanParent,
+          targetLaneId,
+          newChildCard ? newChildCard.id : null,
+          newChildCardNewParent
+        )
+      });
+
+      insertAuditTrail({
+        jobid: cardId,
+        operation: AuditTrailMapping.jobstatuschange(targetLaneId),
+        type: "jobstatuschange"
+      });
+
+      if (update.errors) {
+        notification["error"]({
+          message: t("production.errors.boardupdate", {
+            message: JSON.stringify(update.errors)
+          })
+        });
+      }
+    } catch (error) {
      notification["error"]({
        message: t("production.errors.boardupdate", {
-          message: JSON.stringify(update.errors)
+          message: error.message
        })
      });
+    } finally {
+      setIsMoving(false);
    }
  };

@@ -171,26 +187,21 @@ export function ProductionBoardKanbanComponent({
      : standardSizes[selectedBreakpoint[0]]
    : "250";

-  const stickyHeader = {
-    renderColumnHeader: ({ title }) => (
-      <Sticky>
-        {({
-          style,
+  const StickyHeader = ({ title }) => (
+    <Sticky>
+      {({ style }) => (
+        <div className="react-trello-column-header" style={{ ...style, zIndex: "99", backgroundColor: "#e3e3e3" }}>
+          <UnorderedListOutlined style={{ marginRight: "5px" }} /> {title}
+        </div>
+      )}
+    </Sticky>
+  );

-          // the following are also available but unused in this example
-          isSticky,
-          wasSticky,
-          distanceFromTop,
-          distanceFromBottom,
-          calculatedHeight
-        }) => (
-          <div className="react-kanban-column-header" style={{ ...style, zIndex: "99", backgroundColor: "#ddd" }}>
-            {title}
-          </div>
-        )}
-      </Sticky>
-    )
-  };
+  const NormalHeader = ({ title }) => (
+    <div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3" }}>
+      <UnorderedListOutlined style={{ marginRight: "5px" }} /> {title}
+    </div>
+  );

  const cardSettings =
    associationSettings &&
@@ -208,13 +219,22 @@ export function ProductionBoardKanbanComponent({
          employeeassignments: true,
          scheduled_completion: true,
          stickyheader: false,
-          cardcolor: false
+          cardcolor: false,
+          orientation: false
        };

+  const components = {
+    Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
+    LaneHeader: cardSettings.stickyheader && orientation === "horizontal" ? StickyHeader : NormalHeader
+  };
+
+  if (loading) {
+    return <Skeleton active />;
+  }
+
  return (
    <Container width={width}>
      <IndefiniteLoading loading={isMoving} />
-
      <PageHeader
        title={
          <Space>
@@ -230,24 +250,37 @@ export function ProductionBoardKanbanComponent({
              <SyncOutlined />
            </Button>
            <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
-            <ProductionBoardKanbanCardSettings associationSettings={associationSettings} />
+            <ProductionBoardKanbanSettings parentLoading={setLoading} associationSettings={associationSettings} />
          </Space>
        }
      />
-
      {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
-
      <ProductionListDetailComponent jobs={data} />
-      <StickyContainer>
-        <Board
-          style={{ height: "100%" }}
-          children={boardLanes}
-          disableCardDrag={isMoving}
-          {...(cardSettings.stickyheader && stickyHeader)}
-          renderCard={(card) => ProductionBoardCard(technician, card, bodyshop, cardSettings)}
-          onCardDragEnd={handleDragEnd}
-        />
-      </StickyContainer>
+      {cardSettings.stickyheader ? (
+        <StickyContainer>
+          <Board
+            data={boardLanes}
+            handleDragEnd={handleDragEnd}
+            style={{ height: "100%", backgroundColor: "transparent", overflowY: "auto" }}
+            components={components}
+            orientation={orientation}
+            collapsibleLanes
+            laneDraggable={false}
+          />
+        </StickyContainer>
+      ) : (
+        <div>
+          <Board
+            data={boardLanes}
+            handleDragEnd={handleDragEnd}
+            style={{ backgroundColor: "transparent", overflowY: "auto" }}
+            components={components}
+            collapsibleLanes
+            orientation={orientation}
+            laneDraggable={false}
+          />
+        </div>
+      )}
    </Container>
  );
 }
@@ -255,9 +288,9 @@ export function ProductionBoardKanbanComponent({
 export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent);

 const Container = styled.div`
-  .react-kanban-card-skeleton,
-  .react-kanban-card,
-  .react-kanban-card-adder-form {
+  .react-trello-card-skeleton,
+  .react-trello-card,
+  .react-trello-card-adder-form {
    box-sizing: border-box;
    max-width: ${(props) => props.width}px;
    min-width: ${(props) => props.width}px;
--- a/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx
@@ -0,0 +1,243 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Tabs, Switch } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
+
+const { TabPane } = Tabs;
+
+export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
+  const [form] = Form.useForm();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
+
+  useEffect(() => {
+    form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
+  }, [form, associationSettings, open]);
+
+  const { t } = useTranslation();
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    parentLoading(true);
+
+    const result = await updateKbSettings({
+      variables: {
+        id: associationSettings && associationSettings.id,
+        ks: values
+      }
+    });
+    if (result.errors) {
+      notification.open({
+        type: "error",
+        message: t("production.errors.settings", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+    setOpen(false);
+    setLoading(false);
+    parentLoading(false);
+    setHasChanges(false);
+  };
+
+  const handleValuesChange = (changedValues, allValues) => {
+    setHasChanges(true);
+  };
+
+  const cardStyle = { minWidth: "50vw", marginTop: 10 };
+
+  const renderCardSettings = () => (
+    <>
+      <Card title={t("settings.sections.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="compact" valuePropName="checked">
+              <Checkbox>{t("production.labels.compact")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="cardcolor" valuePropName="checked">
+              <Checkbox>{t("production.labels.cardcolor")}</Checkbox>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+      <Card title={t("settings.sections.information")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="ownr_nm" valuePropName="checked">
+              <Checkbox>{t("production.labels.ownr_nm")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="clm_no" valuePropName="checked">
+              <Checkbox>{t("production.labels.clm_no")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="ins_co_nm" valuePropName="checked">
+              <Checkbox>{t("production.labels.ins_co_nm")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="employeeassignments" valuePropName="checked">
+              <Checkbox>{t("production.labels.employeeassignments")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="actual_in" valuePropName="checked">
+              <Checkbox>{t("production.labels.actual_in")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="scheduled_completion" valuePropName="checked">
+              <Checkbox>{t("production.labels.scheduled_completion")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="ats" valuePropName="checked">
+              <Checkbox>{t("production.labels.ats")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="production_note" valuePropName="checked">
+              <Checkbox>{t("production.labels.production_note")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="sublets" valuePropName="checked">
+              <Checkbox>{t("production.labels.sublets")}</Checkbox>
+            </Form.Item>
+          </Col>
+          <Col span={4}>
+            <Form.Item name="partsstatus" valuePropName="checked">
+              <Checkbox>{t("production.labels.partsstatus")}</Checkbox>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+      <Card title={t("settings.sections.beta")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4}>
+            <Form.Item name="stickyheader" valuePropName="checked">
+              <Checkbox>{t("production.labels.stickyheader")}</Checkbox>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+    </>
+  );
+
+  const renderBoardSettings = () => (
+    <>
+      <Card title={t("settings.sections.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          <Col span={4} style={{ display: "flex", alignItems: "center" }}>
+            <span style={{ marginRight: "8px" }}>Orientation</span>
+            <Form.Item name="orientation" valuePropName="checked" style={{ marginBottom: 0 }}>
+              <Switch checkedChildren="Vertical" unCheckedChildren="Horizontal" defaultChecked />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Card>
+      {/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="board_setting_3" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("board.labels.some_setting_3")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="board_setting_4" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("board.labels.some_setting_4")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+      {/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+    </>
+  );
+
+  const renderLaneSettings = () => (
+    <>
+      <Card title={t("settings.sections.layout")} style={cardStyle}>
+        <Row gutter={[16, 16]}>
+          {/*<Col span={4}>*/}
+          {/*  <Form.Item name="lane_setting_1" valuePropName="checked">*/}
+          {/*    <Checkbox>{t("lane.labels.some_setting_1")}</Checkbox>*/}
+          {/*  </Form.Item>*/}
+          {/*</Col>*/}
+          {/*<Col span={4}>*/}
+          {/*  <Form.Item name="lane_setting_2" valuePropName="checked">*/}
+          {/*    <Checkbox>{t("lane.labels.some_setting_2")}</Checkbox>*/}
+          {/*  </Form.Item>*/}
+          {/*</Col>*/}
+        </Row>
+      </Card>
+      {/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="lane_setting_3" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("lane.labels.some_setting_3")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*    <Col span={4}>*/}
+      {/*      <Form.Item name="lane_setting_4" valuePropName="checked">*/}
+      {/*        <Checkbox>{t("lane.labels.some_setting_4")}</Checkbox>*/}
+      {/*      </Form.Item>*/}
+      {/*    </Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+      {/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
+      {/*  <Row gutter={[16, 16]}>*/}
+      {/*    <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
+      {/*  </Row>*/}
+      {/*</Card>*/}
+    </>
+  );
+
+  const overlay = (
+    <Card>
+      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
+        <Tabs defaultActiveKey="1">
+          <TabPane tab={t("settings.tabs.card")} key="1">
+            {renderCardSettings()}
+          </TabPane>
+          <TabPane tab={t("settings.tabs.board")} key="2">
+            {renderBoardSettings()}
+          </TabPane>
+          <TabPane tab={t("settings.tabs.lane")} key="3">
+            {renderLaneSettings()}
+          </TabPane>
+        </Tabs>
+        <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
+          <Col span={8}>
+            <Button block onClick={() => setOpen(false)}>
+              {t("general.actions.cancel")}
+            </Button>
+          </Col>
+          <Col span={8}>
+            <Button block onClick={() => form.submit()} loading={loading} type="primary" disabled={!hasChanges}>
+              {t("general.actions.save")}
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+    </Card>
+  );
+
+  return (
+    <Popover content={overlay} open={open} placement="topRight">
+      <Button loading={loading} onClick={() => setOpen(!open)}>
+        {t("settings.buttons.boardSettings")}
+      </Button>
+    </Popover>
+  );
+}
--- a/client/src/components/production-board-kanban/production-board-kanban.styles.scss
+++ b/client/src/components/production-board-kanban/production-board-kanban.styles.scss
@@ -1,31 +1,31 @@
-.react-kanban-board {
+.react-trello-board {
  padding: 5px;
 }

-.react-kanban-card {
+.react-trello-card {
  border-radius: 3px;
  background-color: #fff;
  padding: 4px;
  margin-bottom: 7px;
 }

-// .react-kanban-card-skeleton,
-// .react-kanban-card,
-// .react-kanban-card-adder-form {
+// .react-trello-card-skeleton,
+// .react-trello-card,
+// .react-trello-card-adder-form {
 //   box-sizing: border-box;
 //   max-width: 145px;
 //   min-width: 145px;
 // }

-.react-kanban-card--dragging {
+.react-trello-card--dragging {
  box-shadow: 2px 2px grey;
 }

-.react-kanban-card__description {
+.react-trello-card__description {
  padding-top: 10px;
 }

-.react-kanban-card__title {
+.react-trello-card__title {
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  font-weight: bold;
@@ -33,31 +33,31 @@
  justify-content: space-between;
 }

-.react-kanban-column {
+.react-trello-column {
  padding: 10px;
  border-radius: 2px;
  background-color: #eee;
  margin: 5px;
 }

-.react-kanban-column input:focus {
+.react-trello-column input:focus {
  outline: none;
 }

-.react-kanban-card-adder-form {
+.react-trello-card-adder-form {
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 7px;
 }

-.react-kanban-card-adder-form input {
+.react-trello-card-adder-form input {
  border: 0px;
  font-family: inherit;
  font-size: inherit;
 }

-.react-kanban-card-adder-button {
+.react-trello-card-adder-button {
  width: 100%;
  margin-top: 5px;
  background-color: transparent;
@@ -70,11 +70,11 @@
  font-weight: bold;
 }

-.react-kanban-card-adder-button:hover {
+.react-trello-card-adder-button:hover {
  background-color: #ccc;
 }

-.react-kanban-card-adder-form__title {
+.react-trello-card-adder-form__title {
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
@@ -85,20 +85,20 @@
  padding: 0px;
 }

-.react-kanban-card-adder-form__title:focus {
+.react-trello-card-adder-form__title:focus {
  outline: none;
 }

-.react-kanban-card-adder-form__description {
+.react-trello-card-adder-form__description {
  width: 100%;
  margin-top: 10px;
 }

-.react-kanban-card-adder-form__description:focus {
+.react-trello-card-adder-form__description:focus {
  outline: none;
 }

-.react-kanban-card-adder-form__button {
+.react-trello-card-adder-form__button {
  background-color: #eee;
  border: none;
  padding: 5px;
@@ -107,39 +107,39 @@
  border-radius: 3px;
 }

-.react-kanban-card-adder-form__button:hover {
+.react-trello-card-adder-form__button:hover {
  transition: 0.3s;
  cursor: pointer;
  background-color: #ccc;
 }

-.react-kanban-column-header {
+.react-trello-column-header {
  padding-bottom: 10px;
  font-weight: bold;
 }

-.react-kanban-column-header input:focus {
+.react-trello-column-header input:focus {
  outline: none;
 }

-.react-kanban-column-header__button {
+.react-trello-column-header__button {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
 }

-.react-kanban-column-header__button:hover,
-.react-kanban-column-header__button:focus,
-.react-kanban-column-header__button:active {
+.react-trello-column-header__button:hover,
+.react-trello-column-header__button:focus,
+.react-trello-column-header__button:active {
  background-color: #e6e6e6;
 }

-.react-kanban-column-adder-button {
+.react-trello-column-adder-button {
  border: 2px dashed #eee;
  height: 132px;
  margin: 5px;
 }

-.react-kanban-column-adder-button:hover {
+.react-trello-column-adder-button:hover {
  cursor: pointer;
 }
--- a/client/src/components/production-board-kanban/production-board-kanban.utils.js
+++ b/client/src/components/production-board-kanban/production-board-kanban.utils.js
@@ -1,4 +1,5 @@
 import { groupBy } from "lodash";
+import fakeData from "./testData/board300.json";

 const sortByParentId = (arr) => {
  // return arr.reduce((accumulator, currentValue) => {
@@ -18,8 +19,8 @@ const sortByParentId = (arr) => {
  //console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);

  while (byParentsIdsList[parentId]) {
-    sortedList.push(...byParentsIdsList[parentId]); //Spread in the whole list in case several items have the same parents. 
-    parentId = byParentsIdsList[parentId][byParentsIdsList[parentId].length -1].id; //Grab the ID from the last one.
+    sortedList.push(...byParentsIdsList[parentId]); //Spread in the whole list in case several items have the same parents.
+    parentId = byParentsIdsList[parentId][byParentsIdsList[parentId].length - 1].id; //Grab the ID from the last one.
  }

  if (byParentsIdsList["null"]) byParentsIdsList["null"].map((i) => sortedList.push(i));
@@ -38,17 +39,19 @@ const sortByParentId = (arr) => {
  return sortedList;
 };

+export const createFakeBoardData = () => {
+  return fakeData;
+};
+
 export const createBoardData = (AllStatuses, Jobs, filter) => {
  const { search, employeeId } = filter;
-  const boardLanes = {
-    columns: AllStatuses.map((s) => {
-      return {
-        id: s,
-        title: s,
-        cards: []
-      };
-    })
-  };
+  const lanes = AllStatuses.map((s) => {
+    return {
+      id: s,
+      title: s,
+      cards: []
+    };
+  });

  const filteredJobs =
    (search === "" || !search) && !employeeId
@@ -75,16 +78,25 @@ export const createBoardData = (AllStatuses, Jobs, filter) => {

  Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
    try {
-      const needle = boardLanes.columns.find((l) => l.id === statusGroupKey);
-      if (!needle?.cards) return null;
-      needle.cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
+      const lane = lanes.find((l) => l.id === statusGroupKey);
+      if (!lane?.cards) return null;
+      lane.cards = sortByParentId(DataGroupedByStatus[statusGroupKey]).map((job) => {
+        const { id, title, description, due_date, ...metadata } = job;
+        return {
+          id,
+          title,
+          description,
+          label: job.due_date || "",
+          metadata
+        };
+      });
    } catch (error) {
      console.log("Error while creating board card", error);
    }
    return null;
  });

-  return boardLanes;
+  return { lanes };
 };

 const CheckSearch = (search, job) => {
--- a/client/src/components/production-board-kanban/testData/board1200.json
+++ b/client/src/components/production-board-kanban/testData/board1200.json
--- a/client/src/components/production-board-kanban/testData/board300.json
+++ b/client/src/components/production-board-kanban/testData/board300.json
--- a/client/src/components/production-board-kanban/testData/board600.json
+++ b/client/src/components/production-board-kanban/testData/board600.json
--- a/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
@@ -18,7 +18,6 @@ const mapDispatchToProps = (dispatch) => ({

 function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
  const { t } = useTranslation();
-
  const [note, setNote] = useState((record.production_vars && record.production_vars.note) || "");

  const [open, setOpen] = useState(false);
--- a/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
+++ b/client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
@@ -9,6 +9,7 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
  const { t } = useTranslation();
  const [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET);
  const [loading, setLoading] = useState(false);
+
  const subletCount = useMemo(() => {
    return {
      total: subletJobLines.filter((s) => !s.sublet_ignored).length,
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -2,23 +2,24 @@ import { useLazyQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Col, DatePicker, Form, Input, Radio, Row, Typography } from "antd";
 import _ from "lodash";
-import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
+import { QUERY_ACTIVE_EMPLOYEES, QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL } from "../../graphql/employees.queries";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { selectReportCenter } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DatePickerRanges from "../../utils/DatePickerRanges";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import dayjs from "../../utils/day";
+import EmployeeSearchSelectEmail from "../employee-search-select/employee-search-select-email.component";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
-import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
-import "./report-center-modal.styles.scss";
-import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
+import "./report-center-modal.styles.scss";

 const mapStateToProps = createStructuredSelector({
  reportCenterModal: selectReportCenter,
@@ -66,6 +67,13 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
    skip: !(open && Templates[form.getFieldValue("key")] && Templates[form.getFieldValue("key")].idtype)
  });

+  const [callEmployeeWithEmailQuery, { data: employeeWithEmailData, called: employeeWithEmailCalled }] = useLazyQuery(
+    QUERY_ACTIVE_EMPLOYEES_WITH_EMAIL,
+    {
+      skip: !(open && Templates[form.getFieldValue("key")] && Templates[form.getFieldValue("key")].idtype)
+    }
+  );
+
  const handleFinish = async (values) => {
    setLoading(true);
    const start = values.dates ? values.dates[0] : null;
@@ -197,6 +205,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
            }
            if (!vendorCalled && idtype === "vendor") callVendorQuery();
            if (!employeeCalled && idtype === "employee") callEmployeeQuery();
+            if (!employeeWithEmailCalled && idtype === "employeeWithEmail") callEmployeeWithEmailQuery();
            if (idtype === "vendor")
              return (
                <Form.Item
@@ -227,6 +236,22 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                  <EmployeeSearchSelect options={employeeData ? employeeData.employees : []} />
                </Form.Item>
              );
+            //This was introduced with tasks before assigned_to was shifted to UUID. Keeping in place for reference in the future if needed.
+            if (idtype === "employeeWithEmail")
+              return (
+                <Form.Item
+                  name="id"
+                  label={t("reportcenter.labels.employee")}
+                  rules={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                >
+                  <EmployeeSearchSelectEmail options={employeeWithEmailData ? employeeWithEmailData.employees : []} />
+                </Form.Item>
+              );
            else return null;
          }}
        </Form.Item>
--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
@@ -59,25 +59,33 @@ export function ScheduleCalendarHeaderComponent({
          {loadData && loadData.allJobsOut ? (
            loadData.allJobsOut.map((j) => (
              <tr key={j.id}>
-                <td>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                <td style={{ padding: "2.5px" }}>
+                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> (
+                  {j.status})
                </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                  <OwnerNameDisplay ownerObject={j} />
                </td>
-                <td>
-                  {`(${(j.labhrs.aggregate.sum.mod_lb_hrs + j.larhrs.aggregate.sum.mod_lb_hrs).toFixed(
-                    1
-                  )} ${t("general.labels.hours")})`}
+                <td style={{ padding: "2.5px" }}>
+                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                  }/${(
+                    j.labhrs.aggregate?.sum?.mod_lb_hrs +
+                    j.larhrs.aggregate?.sum?.mod_lb_hrs
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
                </td>
-                <td>
-                  <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                <td style={{ padding: "2.5px" }}>
+                  <DateTimeFormatter>
+                    {j.scheduled_completion}
+                  </DateTimeFormatter>
                </td>
              </tr>
            ))
          ) : (
            <tr>
-              <td>{t("appointments.labels.nocompletingjobs")}</td>
+              <td style={{ padding: "2.5px" }}>
+                {t("appointments.labels.nocompletingjobs")}
+              </td>
            </tr>
          )}
        </tbody>
@@ -92,26 +100,30 @@ export function ScheduleCalendarHeaderComponent({
          {loadData && loadData.allJobsIn ? (
            loadData.allJobsIn.map((j) => (
              <tr key={j.id}>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                  {j.status}
                </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                  <OwnerNameDisplay ownerObject={j} />
                </td>
-                <td>
-                  {`(${(j.labhrs.aggregate.sum.mod_lb_hrs + j.larhrs.aggregate.sum.mod_lb_hrs).toFixed(
-                    1
-                  )} ${t("general.labels.hours")})`}
+                <td style={{ padding: "2.5px" }}>
+                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                  }/${(
+                    j.labhrs?.aggregate?.sum?.mod_lb_hrs +
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
                </td>
-                <td>
+                <td style={{ padding: "2.5px" }}>
                  <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
                </td>
              </tr>
            ))
          ) : (
            <tr>
-              <td>{t("appointments.labels.noarrivingjobs")}</td>
+              <td style={{ padding: "2.5px" }}>
+                {t("appointments.labels.noarrivingjobs")}
+              </td>
            </tr>
          )}
        </tbody>
@@ -121,27 +133,33 @@ export function ScheduleCalendarHeaderComponent({

  const LoadComponent = loadData ? (
    <div>
-      <Space align="center">
-        <Popover
-          placement={"bottom"}
-          content={jobsInPopup}
-          trigger="hover"
-          title={t("appointments.labels.arrivingjobs")}
-        >
-          <Icon component={MdFileDownload} style={{ color: "green" }} />
-          {(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(2)}
-        </Popover>
-        <Popover
-          placement={"bottom"}
-          content={jobsOutPopup}
-          trigger="hover"
-          title={t("appointments.labels.completingjobs")}
-        >
-          <Icon component={MdFileUpload} style={{ color: "red" }} />
-          {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(2)}
-        </Popover>
-        <ScheduleCalendarHeaderGraph loadData={loadData} />
-      </Space>
+        <Space align="center">
+          <Popover
+            placement={"bottom"}
+            content={jobsInPopup}
+            trigger="hover"
+            title={t("appointments.labels.arrivingjobs")}
+          >
+            <Icon component={MdFileDownload} style={{ color: "green" }} />
+            {(loadData.allHoursInBody || 0) &&
+              loadData.allHoursInBody.toFixed(1)}
+            /
+            {(loadData.allHoursInRefinish || 0) &&
+              loadData.allHoursInRefinish.toFixed(1)}
+            /{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
+          </Popover>
+          <Popover
+            placement={"bottom"}
+            content={jobsOutPopup}
+            trigger="hover"
+            title={t("appointments.labels.completingjobs")}
+          >
+            <Icon component={MdFileUpload} style={{ color: "red" }} />
+            {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
+          </Popover>
+          <ScheduleCalendarHeaderGraph loadData={loadData} />
+        </Space>
+   
      <div>
        <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
          {Object.keys(ATSToday).map((key, idx) => (
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -1,25 +1,25 @@
-import {  useSplitTreatments  } from '@splitsoftware/splitio-react';
-import {  Button, Card, Tabs  } from 'antd';
-import React from 'react';
-import {  useTranslation  } from 'react-i18next';
-import {  connect  } from 'react-redux';
-import {  createStructuredSelector  } from 'reselect';
-import {  selectBodyshop  } from '../../redux/user/user.selectors';
-import ShopInfoGeneral from './shop-info.general.component';
-import ShopInfoIntakeChecklistComponent from './shop-info.intake.component';
-import ShopInfoLaborRates from './shop-info.laborrates.component';
-import ShopInfoOrderStatusComponent from './shop-info.orderstatus.component';
-import ShopInfoPartsScan from './shop-info.parts-scan';
-import ShopInfoRbacComponent from './shop-info.rbac.component';
-import ShopInfoResponsibilityCenterComponent from './shop-info.responsibilitycenters.component';
-import ShopInfoROStatusComponent from './shop-info.rostatus.component';
-import ShopInfoSchedulingComponent from './shop-info.scheduling.component';
-import ShopInfoSpeedPrint from './shop-info.speedprint.component';
-import {  useLocation, useNavigate  } from 'react-router-dom';
-import ShopInfoTaskPresets from './shop-info.task-presets.component';
-import queryString from 'query-string';
-import InstanceRenderManager from '../../utils/instanceRenderMgr';
-import ShopInfoRoGuard from './shop-info.roguard.component';
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { Button, Card, Tabs } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ShopInfoGeneral from "./shop-info.general.component";
+import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
+import ShopInfoLaborRates from "./shop-info.laborrates.component";
+import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
+import ShopInfoPartsScan from "./shop-info.parts-scan";
+import ShopInfoRbacComponent from "./shop-info.rbac.component";
+import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
+import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
+import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
+import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
+import { useLocation, useNavigate } from "react-router-dom";
+import ShopInfoTaskPresets from "./shop-info.task-presets.component";
+import queryString from "query-string";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import ShopInfoRoGuard from "./shop-info.roguard.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -47,44 +47,52 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
    {
      key: "general",
      label: t("bodyshop.labels.shopinfo"),
-      children: <ShopInfoGeneral form={form} />
+      children: <ShopInfoGeneral form={form} />,
+      id: "tab-shop-general"
    },
    {
      key: "speedprint",
      label: t("bodyshop.labels.speedprint"),
-      children: <ShopInfoSpeedPrint form={form} />
+      children: <ShopInfoSpeedPrint form={form} />,
+      id: "tab-shop-speedprint"
    },
    {
      key: "rbac",
      label: t("bodyshop.labels.rbac"),
-      children: <ShopInfoRbacComponent form={form} />
+      children: <ShopInfoRbacComponent form={form} />,
+      id: "tab-shop-rbac"
    },
    {
      key: "roStatus",
      label: t("bodyshop.labels.jobstatuses"),
-      children: <ShopInfoROStatusComponent form={form} />
+      children: <ShopInfoROStatusComponent form={form} />,
+      id: "tab-shop-rostatus"
    },
    {
      key: "scheduling",
      label: t("bodyshop.labels.scheduling"),
-      children: <ShopInfoSchedulingComponent form={form} />
+      children: <ShopInfoSchedulingComponent form={form} />,
+      id: "tab-shop-scheduling"
    },
    {
      key: "orderStatus",
      label: t("bodyshop.labels.orderstatuses"),
-      children: <ShopInfoOrderStatusComponent form={form} />
+      children: <ShopInfoOrderStatusComponent form={form} />,
+      id: "tab-shop-orderstatus"
    },
    {
      key: "responsibilityCenters",
      label: t("bodyshop.labels.responsibilitycenters.title"),
-      children: <ShopInfoResponsibilityCenterComponent form={form} />
+      children: <ShopInfoResponsibilityCenterComponent form={form} />,
+      id: "tab-shop-responsibilitycenters"
    },
    ...InstanceRenderManager({
      imex: [
        {
          key: "checklists",
          label: t("bodyshop.labels.checklists"),
-          children: <ShopInfoIntakeChecklistComponent form={form} />
+          children: <ShopInfoIntakeChecklistComponent form={form} />,
+          id: "tab-shop-checklists"
        }
      ],
      rome: "USE_IMEX",
@@ -93,14 +101,16 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
    {
      key: "laborrates",
      label: t("bodyshop.labels.laborrates"),
-      children: <ShopInfoLaborRates form={form} />
+      children: <ShopInfoLaborRates form={form} />,
+      id: "tab-shop-laborrates"
    },
    ...(CriticalPartsScanning.treatment === "on"
      ? [
          {
            key: "partsscan",
            label: t("bodyshop.labels.partsscan"),
-            children: <ShopInfoPartsScan form={form} />
+            children: <ShopInfoPartsScan form={form} />,
+            id: "tab-shop-partsscan"
          }
        ]
      : []),
@@ -109,21 +119,23 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
          {
            key: "task-presets",
            label: t("bodyshop.labels.task-presets"),
-            children: <ShopInfoTaskPresets form={form} />
+            children: <ShopInfoTaskPresets form={form} />,
+            id: "tab-shop-task-presets"
          }
        ]
      : []),
-      ...InstanceRenderManager({
-        imex: [
-          {
-            key: 'roguard',
-            label: t('bodyshop.labels.roguard.title'),
-            children: <ShopInfoRoGuard form={form} />,
-          },
-        ],
-        rome: 'USE_IMEX',
-        promanager: [],
-      }),
+    ...InstanceRenderManager({
+      imex: [
+        {
+          key: "roguard",
+          label: t("bodyshop.labels.roguard.title"),
+          children: <ShopInfoRoGuard form={form} />,
+          id: "tab-shop-roguard"
+        }
+      ],
+      rome: "USE_IMEX",
+      promanager: []
+    })
  ];
  return (
    <Card
--- a/client/src/components/shop-info/shop-info.general.component.jsx
+++ b/client/src/components/shop-info/shop-info.general.component.jsx
@@ -13,6 +13,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";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapper, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 // TODO: Client Update, this might break
 const timeZonesList = Intl.supportedValuesOf("timeZone");
 const mapStateToProps = createStructuredSelector({
@@ -144,285 +145,289 @@ export function ShopInfoGeneral({ form, bodyshop }) {
          <InputNumber min={0} />
        </Form.Item>
      </LayoutFormRow>
-      <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>
-              {() => (
+      <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 (
                <Form.Item
-                  label={t("bodyshop.labels.qbo_usa")}
+                  label={t("bodyshop.labels.2tiersetup")}
                  shouldUpdate
-                  valuePropName="checked"
-                  name={["accountingconfig", "qbo_usa"]}
+                  rules={[
+                    {
+                      required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                  name={["accountingconfig", "twotierpref"]}
                >
-                  <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
+                  <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
+                    <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
+                    <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
+                  </Radio.Group>
                </Form.Item>
-              )}
-            </Form.Item>
-          )
-        })}
-        <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.labels.accountingtiers")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["accountingconfig", "tiers"]}
-        >
-          <Radio.Group>
-            <Radio value={2}>2</Radio>
-            <Radio value={3}>3</Radio>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item shouldUpdate>
-          {() => {
-            return (
+              );
+            }}
+          </Form.Item>
+          <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
+            label={t("bodyshop.fields.inhousevendorid")}
+            name={"inhousevendorid"}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("bodyshop.fields.default_adjustment_rate")}
+            name={"default_adjustment_rate"}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={0} precision={2} />
+          </Form.Item>
+          {InstanceRenderManager({
+            imex: (
+              <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
+                <Input />
+              </Form.Item>
+            )
+          })}
+          <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
+            <Input />
+          </Form.Item>
+          {InstanceRenderManager({
+            imex: (
              <Form.Item
-                label={t("bodyshop.labels.2tiersetup")}
-                shouldUpdate
+                label={t("bodyshop.fields.invoice_federal_tax_rate")}
+                name={["bill_tax_rates", "federal_tax_rate"]}
                rules={[
                  {
-                    required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
+                    required: true
                    //message: t("general.validation.required"),
                  }
                ]}
-                name={["accountingconfig", "twotierpref"]}
              >
-                <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
-                  <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
-                  <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
-                </Radio.Group>
+                <InputNumber />
              </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
-          label={t("bodyshop.fields.inhousevendorid")}
-          name={"inhousevendorid"}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.default_adjustment_rate")}
-          name={"default_adjustment_rate"}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0} precision={2} />
-        </Form.Item>
-        {InstanceRenderManager({
-          imex: (
-            <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
-              <Input />
-            </Form.Item>
-          )
-        })}
-        <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
-          <Input />
-        </Form.Item>
-        {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
-          name={["md_payment_types"]}
-          label={t("bodyshop.fields.md_payment_types")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item
-          name={["md_categories"]}
-          label={t("bodyshop.fields.md_categories")}
-          rules={[
-            {
-              //message: t("general.validation.required"),
-              type: "array"
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          name={["accountingconfig", "ReceivableCustomField1"]}
-          label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
-        >
-          {ReceivableCustomFieldSelect}
-        </Form.Item>
-        <Form.Item
-          name={["accountingconfig", "ReceivableCustomField2"]}
-          label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
-        >
-          {ReceivableCustomFieldSelect}
-        </Form.Item>
-        <Form.Item
-          name={["accountingconfig", "ReceivableCustomField3"]}
-          label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
-        >
-          {ReceivableCustomFieldSelect}
-        </Form.Item>
-        <Form.Item
-          name={["md_classes"]}
-          label={t("bodyshop.fields.md_classes")}
-          rules={[
-            ({ getFieldValue }) => {
-              return {
-                required: getFieldValue("enforce_class"),
+            )
+          })}
+          <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
+            name={["md_payment_types"]}
+            label={t("bodyshop.fields.md_payment_types")}
+            rules={[
+              {
+                required: true,
                //message: t("general.validation.required"),
                type: "array"
-              };
-            }
-          ]}
-        >
-          <Select mode="tags" />
-        </Form.Item>
-        {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>
-          </>
-        )}
-      </LayoutFormRow>
-      <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
-        <Form.Item
-          label={t("bodyshop.fields.dailypainttarget")}
-          name={["scoreboard_target", "dailyPaintTarget"]}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0} precision={0} />
-        </Form.Item>
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>
+          <Form.Item
+            name={["md_categories"]}
+            label={t("bodyshop.fields.md_categories")}
+            rules={[
+              {
+                //message: t("general.validation.required"),
+                type: "array"
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>
+          <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            name={["accountingconfig", "ReceivableCustomField1"]}
+            label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
+          >
+            {ReceivableCustomFieldSelect}
+          </Form.Item>
+          <Form.Item
+            name={["accountingconfig", "ReceivableCustomField2"]}
+            label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
+          >
+            {ReceivableCustomFieldSelect}
+          </Form.Item>
+          <Form.Item
+            name={["accountingconfig", "ReceivableCustomField3"]}
+            label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
+          >
+            {ReceivableCustomFieldSelect}
+          </Form.Item>
+          <Form.Item
+            name={["md_classes"]}
+            label={t("bodyshop.fields.md_classes")}
+            rules={[
+              ({ getFieldValue }) => {
+                return {
+                  required: getFieldValue("enforce_class"),
+                  //message: t("general.validation.required"),
+                  type: "array"
+                };
+              }
+            ]}
+          >
+            <Select mode="tags" />
+          </Form.Item>
+          {ClosingPeriod.treatment === "on" && (
+            <>
+              <Form.Item
+                name={["accountingconfig", "ClosingPeriod"]}
+                label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
+              >
+                <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
+              </Form.Item>
+            </>
+          )}
+        </LayoutFormRow>
+      </FeatureWrapper>
+      <FeatureWrapper featureName="scoreboard" noauth={() => null}>
+        <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
+          <Form.Item
+            label={t("bodyshop.fields.dailypainttarget")}
+            name={["scoreboard_target", "dailyPaintTarget"]}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={0} precision={0} />
+          </Form.Item>

-        <Form.Item
-          label={t("bodyshop.fields.dailybodytarget")}
-          name={["scoreboard_target", "dailyBodyTarget"]}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0} precision={0} />
-        </Form.Item>
+          <Form.Item
+            label={t("bodyshop.fields.dailybodytarget")}
+            name={["scoreboard_target", "dailyBodyTarget"]}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={0} precision={0} />
+          </Form.Item>

-        <Form.Item
-          label={t("bodyshop.fields.lastnumberworkingdays")}
-          name={["scoreboard_target", "lastNumberWorkingDays"]}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={0} max={12} precision={0} />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.ignoreblockeddays")}
-          name={["scoreboard_target", "ignoreblockeddays"]}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.prodtargethrs")}
-          name={["prodtargethrs"]}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-        >
-          <InputNumber min={1} precision={1} />
-        </Form.Item>
-      </LayoutFormRow>
+          <Form.Item
+            label={t("bodyshop.fields.lastnumberworkingdays")}
+            name={["scoreboard_target", "lastNumberWorkingDays"]}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={0} max={12} precision={0} />
+          </Form.Item>
+          <Form.Item
+            label={t("bodyshop.fields.ignoreblockeddays")}
+            name={["scoreboard_target", "ignoreblockeddays"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("bodyshop.fields.prodtargethrs")}
+            name={["prodtargethrs"]}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+          >
+            <InputNumber min={1} precision={1} />
+          </Form.Item>
+        </LayoutFormRow>
+      </FeatureWrapper>
      <LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
        <Form.Item
          name={["md_referral_sources"]}
@@ -567,27 +572,32 @@ export function ShopInfoGeneral({ form, bodyshop }) {
        >
          <Select mode="tags" />
        </Form.Item>
-        <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>
+
+        {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")}
@@ -1042,111 +1052,118 @@ export function ShopInfoGeneral({ form, bodyshop }) {
          }}
        </Form.List>
      </LayoutFormRow>
-      <LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")} id="md_ccc_rates">
-        <Form.List name={["md_ccc_rates"]}>
-          {(fields, { add, remove, move }) => {
-            return (
-              <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <LayoutFormRow noDivider>
-                      <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
-                        <Input />
-                      </Form.Item>
-                      <Form.Item label={t("contracts.fields.actax")} key={`${index}actax`} name={[field.name, "actax"]}>
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.dailyfreekm")}
-                        key={`${index}dailyfreekm`}
-                        name={[field.name, "dailyfreekm"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.refuelcharge")}
-                        key={`${index}refuelcharge`}
-                        name={[field.name, "refuelcharge"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.excesskmrate")}
-                        key={`${index}excesskmrate`}
-                        name={[field.name, "excesskmrate"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.cleanupcharge")}
-                        key={`${index}cleanupcharge`}
-                        name={[field.name, "cleanupcharge"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.damagewaiver")}
-                        key={`${index}damagewaiver`}
-                        name={[field.name, "damagewaiver"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.federaltax")}
-                        key={`${index}federaltax`}
-                        name={[field.name, "federaltax"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.statetax")}
-                        key={`${index}statetax`}
-                        name={[field.name, "statetax"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.localtax")}
-                        key={`${index}localtax`}
-                        name={[field.name, "localtax"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
-                      <Form.Item
-                        label={t("contracts.fields.coverage")}
-                        key={`${index}coverage`}
-                        name={[field.name, "coverage"]}
-                      >
-                        <InputNumber precision={2} />
-                      </Form.Item>
+      <FeatureWrapper featureName="courtesycars" noauth={() => null}>
+        <LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")} id="md_ccc_rates">
+          <Form.List name={["md_ccc_rates"]}>
+            {(fields, { add, remove, move }) => {
+              return (
+                <div>
+                  {fields.map((field, index) => (
+                    <Form.Item key={field.key}>
+                      <LayoutFormRow noDivider>
+                        <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
+                          <Input />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.actax")}
+                          key={`${index}actax`}
+                          name={[field.name, "actax"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.dailyfreekm")}
+                          key={`${index}dailyfreekm`}
+                          name={[field.name, "dailyfreekm"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.refuelcharge")}
+                          key={`${index}refuelcharge`}
+                          name={[field.name, "refuelcharge"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.excesskmrate")}
+                          key={`${index}excesskmrate`}
+                          name={[field.name, "excesskmrate"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.cleanupcharge")}
+                          key={`${index}cleanupcharge`}
+                          name={[field.name, "cleanupcharge"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.damagewaiver")}
+                          key={`${index}damagewaiver`}
+                          name={[field.name, "damagewaiver"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.federaltax")}
+                          key={`${index}federaltax`}
+                          name={[field.name, "federaltax"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.statetax")}
+                          key={`${index}statetax`}
+                          name={[field.name, "statetax"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.localtax")}
+                          key={`${index}localtax`}
+                          name={[field.name, "localtax"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("contracts.fields.coverage")}
+                          key={`${index}coverage`}
+                          name={[field.name, "coverage"]}
+                        >
+                          <InputNumber precision={2} />
+                        </Form.Item>

-                      <Space wrap>
-                        <DeleteFilled
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                      </Space>
-                    </LayoutFormRow>
+                        <Space wrap>
+                          <DeleteFilled
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                          <FormListMoveArrows move={move} index={index} total={fields.length} />
+                        </Space>
+                      </LayoutFormRow>
+                    </Form.Item>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("general.actions.add")}
+                    </Button>
                  </Form.Item>
-                ))}
-                <Form.Item>
-                  <Button
-                    type="dashed"
-                    onClick={() => {
-                      add();
-                    }}
-                    style={{ width: "100%" }}
-                  >
-                    {t("general.actions.add")}
-                  </Button>
-                </Form.Item>
-              </div>
-            );
-          }}
-        </Form.List>
-      </LayoutFormRow>
+                </div>
+              );
+            }}
+          </Form.List>
+        </LayoutFormRow>
+      </FeatureWrapper>
+
      <LayoutFormRow grow header={t("bodyshop.fields.md_jobline_presets")} id="md_jobline_presets">
        <Form.List name={["md_jobline_presets"]}>
          {(fields, { add, remove, move }) => {
--- a/client/src/components/shop-info/shop-info.rbac.component.jsx
+++ b/client/src/components/shop-info/shop-info.rbac.component.jsx
@@ -1,12 +1,13 @@
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Form, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -29,210 +30,219 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
  return (
    <RbacWrapper action="shop:rbac">
      <LayoutFormRow>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.accounting.exportlog")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "accounting:exportlog"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.accounting.payables")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "accounting:payables"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.accounting.payments")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "accounting:payments"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.accounting.receivables")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "accounting:receivables"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.delete")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:delete"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.enter")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:enter"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.reexport")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:reexport"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.view")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.contracts.create")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "contracts:create"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.contracts.detail")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "contracts:detail"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.contracts.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "contracts:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.courtesycar.create")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "courtesycar:create"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.courtesycar.detail")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "courtesycar:detail"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.courtesycar.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "courtesycar:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.csi.export")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "csi:export"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.csi.page")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "csi:page"]}
-        >
-          <InputNumber />
-        </Form.Item>
+        {...HasFeatureAccess({ featureName: "export", bodyshop }) ? [
+          <Form.Item
+            label={t("bodyshop.fields.rbac.accounting.exportlog")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "accounting:exportlog"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.accounting.payables")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "accounting:payables"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.accounting.payments")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "accounting:payments"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.accounting.receivables")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "accounting:receivables"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
+        {...HasFeatureAccess({ featureName: "bills", bodyshop }) ? [
+          <Form.Item
+            label={t("bodyshop.fields.rbac.bills.delete")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "bills:delete"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.bills.enter")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "bills:enter"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.bills.list")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "bills:list"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.bills.reexport")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "bills:reexport"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.bills.view")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "bills:view"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
+
+        {...HasFeatureAccess({ featureName: "courtesycars", bodyshop }) ? [
+          <Form.Item
+            label={t("bodyshop.fields.rbac.contracts.create")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "contracts:create"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.contracts.detail")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "contracts:detail"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.contracts.list")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "contracts:list"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.courtesycar.create")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "courtesycar:create"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.courtesycar.detail")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "courtesycar:detail"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.courtesycar.list")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "courtesycar:list"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
+        {...HasFeatureAccess({ featureName: "csi", bodyshop }) ? [
+          <Form.Item
+            label={t("bodyshop.fields.rbac.csi.export")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "csi:export"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.csi.page")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "csi:page"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
        <Form.Item
          label={t("bodyshop.fields.rbac.employees.page")}
          rules={[
@@ -425,18 +435,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.bills.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "bills:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.rbac.employees.page")}
          rules={[
@@ -510,18 +508,21 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.production.board")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "production:board"]}
-        >
-          <InputNumber />
-        </Form.Item>
+        {HasFeatureAccess({ featureName: "visualboard", bodyshop }) && (
+          <Form.Item
+            label={t("bodyshop.fields.rbac.production.board")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "production:board"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        )}
+
        <Form.Item
          label={t("bodyshop.fields.rbac.production.list")}
          rules={[
@@ -546,102 +547,142 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.scoreboard.view")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "scoreboard:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shiftclock.view")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "shiftclock:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shop.config")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "shop:config"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.edit")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:shiftedit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.editcommitted")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:editcommitted"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.ttapprovals.view")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "ttapprovals:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.ttapprovals.approve")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "ttapprovals:approve"]}
-        >
-          <InputNumber />
-        </Form.Item>
+        {HasFeatureAccess({ featureName: "scoreboard", bodyshop }) && (
+          <Form.Item
+            label={t("bodyshop.fields.rbac.scoreboard.view")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "scoreboard:view"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        )}
+        {...HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? [
+          <Form.Item
+            label={t("bodyshop.fields.rbac.shiftclock.view")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "shiftclock:view"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.shop.config")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "shop:config"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.edit")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:edit"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:shiftedit"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.editcommitted")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:editcommitted"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.ttapprovals.view")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "ttapprovals:view"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.ttapprovals.approve")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "ttapprovals:approve"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.enter")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:enter"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.list")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:list"]}
+          >
+            <InputNumber />
+          </Form.Item>,
+          <Form.Item
+            label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "timetickets:shiftedit"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        ]:[]}
        <Form.Item
          label={t("bodyshop.fields.rbac.shop.vendors")}
          rules={[
@@ -690,7 +731,7 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
        >
          <InputNumber />
        </Form.Item>
-        <Form.Item
+        {/* <Form.Item
          label={t("bodyshop.fields.rbac.shop.templates")}
          rules={[
            {
@@ -701,79 +742,22 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
          name={["md_rbac", "shop:templates"]}
        >
          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.shop.vendors")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "shop:vendors"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.temporarydocs.view")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "temporarydocs:view"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.edit")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:edit"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.enter")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:enter"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.list")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:list"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "timetickets:shiftedit"]}
-        >
-          <InputNumber />
-        </Form.Item>
+        </Form.Item> */}
+        {HasFeatureAccess({ featureName: "media", bodyshop }) && (
+          <Form.Item
+            label={t("bodyshop.fields.rbac.temporarydocs.view")}
+            rules={[
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]}
+            name={["md_rbac", "temporarydocs:view"]}
+          >
+            <InputNumber />
+          </Form.Item>
+        )}
+
        <Form.Item
          label={t("bodyshop.fields.rbac.users.editaccess")}
          rules={[
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -339,7 +339,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
            {(fields, { add, remove, move }) => {
              return (
                <div>
-                  <LayoutFormRow>
+                  <Space size='large' wrap>
                    {fields.map((field, index) => (
                      <Form.Item key={field.key}>
                        <Space direction="vertical">
@@ -386,7 +386,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
                        </Space>
                      </Form.Item>
                    ))}
-                  </LayoutFormRow>
+                  </Space>
                  <Form.Item>
                    <Button
                      type="dashed"
--- a/client/src/components/shop-sub-status/shop-sub-status.component.jsx
+++ b/client/src/components/shop-sub-status/shop-sub-status.component.jsx
@@ -1,4 +1,4 @@
-import { Button, Result } from "antd";
+import { Result } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -16,19 +16,5 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopSubStatus);
 export function ShopSubStatus({ bodyshop }) {
  const { t } = useTranslation();
  const { sub_status } = bodyshop;
-  return (
-    <Result
-      status="403"
-      title={t(`general.labels.sub_status.${sub_status}`)}
-      extra={
-        <Button
-          onClick={() => {
-            alert("Not implemented yet.");
-          }}
-        >
-          {t("general.actions.submitticket")}
-        </Button>
-      }
-    />
-  );
+  return <Result status="403" title={t(`general.labels.sub_status.${sub_status}`)} />;
 }
--- a/client/src/components/task-list/task-list.component.jsx
+++ b/client/src/components/task-list/task-list.component.jsx
@@ -0,0 +1,382 @@
+import { Button, Card, Space, Switch, Table } from "antd";
+import queryString from "query-string";
+import React, { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { pageLimit } from "../../utils/config";
+import dayjs from "../../utils/day";
+import {
+  CheckCircleFilled,
+  CheckCircleOutlined,
+  DeleteFilled,
+  DeleteOutlined,
+  EditFilled,
+  ExclamationCircleFilled,
+  PlusCircleFilled,
+  SyncOutlined
+} from "@ant-design/icons";
+import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
+import { connect } from "react-redux";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+/**
+ * Task List Component
+ * @param dueDate
+ * @returns {Element}
+ * @constructor
+ */
+const DueDateRecord = ({ dueDate }) => {
+  if (!dueDate) return <></>;
+
+  const dueDateDayjs = dayjs(dueDate);
+  const relativeDueDate = dueDateDayjs.fromNow();
+  const isBeforeToday = dueDateDayjs.isBefore(dayjs());
+
+  return (
+    <div title={relativeDueDate} style={isBeforeToday ? { color: "red" } : {}}>
+      <DateFormatter>{dueDate}</DateFormatter>
+    </div>
+  );
+};
+
+const RemindAtRecord = ({ remindAt }) => {
+  if (!remindAt) return <></>;
+
+  const remindAtDayjs = dayjs(remindAt);
+  const relativeRemindAtDate = remindAtDayjs.fromNow();
+  const isBeforeToday = remindAtDayjs.isBefore(dayjs());
+
+  return (
+    <div title={relativeRemindAtDate} style={isBeforeToday ? { color: "red" } : {}}>
+      <DateTimeFormatter>{remindAt}</DateTimeFormatter>
+    </div>
+  );
+};
+
+/**
+ * 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) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
+
+function TaskListComponent({
+  bodyshop,
+  loading,
+  tasks,
+  total,
+  titleTranslation,
+  refetch,
+  toggleCompletedStatus,
+  setTaskUpsertContext,
+  toggleDeletedStatus,
+  relationshipType,
+  relationshipId,
+  onlyMine,
+  parentJobId,
+  query,
+  showRo = true
+}) {
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  const search = queryString.parse(useLocation().search);
+
+  // Extract Query Params
+  const { page, sortcolumn, sortorder, deleted, completed, mine } = search;
+
+  const history = useNavigate();
+  const columns = [];
+
+  useEffect(() => {
+    // This is a hack to force the page to change if the query params change (partssublet for example)
+  }, [location]);
+
+  columns.push({
+    title: t("tasks.fields.created_at"),
+    dataIndex: "created_at",
+    key: "created_at",
+    width: "10%",
+    defaultSortOrder: "descend",
+    sorter: true,
+    sortOrder: sortcolumn === "created_at" && sortorder,
+    render: (text, record) => <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
+  });
+
+  if (!onlyMine) {
+    columns.push({
+      title: t("tasks.fields.assigned_to"),
+      dataIndex: "assigned_to",
+      key: "assigned_to",
+      width: "8%",
+      sorter: true,
+      sortOrder: sortcolumn === "assigned_to" && sortorder,
+      render: (text, record) => {
+        const employee = bodyshop?.employees?.find((e) => e.id === record.assigned_to);
+        return employee ? `${employee.first_name} ${employee.last_name}` : t("general.labels.na");
+      }
+    });
+  }
+
+  if (showRo) {
+    columns.push({
+      title: t("tasks.fields.job.ro_number"),
+      dataIndex: ["job", "ro_number"],
+      key: "job.ro_number",
+      width: "8%",
+      render: (text, record) =>
+        record.job ? (
+          <Link to={`/manage/jobs/${record.job.id}?tab=tasks`}>{record.job.ro_number || t("general.labels.na")}</Link>
+        ) : (
+          t("general.labels.na")
+        )
+    });
+  }
+
+  columns.push(
+    {
+      title: t("tasks.fields.jobline"),
+      dataIndex: ["jobline", "id"],
+      key: "jobline.id",
+      width: "8%",
+      render: (text, record) => record?.jobline?.line_desc || ""
+    },
+    {
+      title: t("tasks.fields.parts_order"),
+      dataIndex: ["parts_order", "id"],
+      key: "part_order.id",
+      width: "8%",
+      render: (text, record) =>
+        record.parts_order ? (
+          <Link to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}>
+            {record.parts_order.order_number && record.parts_order.vendor && record.parts_order.vendor.name
+              ? `${record.parts_order.order_number} - ${record.parts_order.vendor.name}`
+              : t("general.labels.na")}
+          </Link>
+        ) : (
+          ""
+        )
+    },
+    {
+      title: t("tasks.fields.bill"),
+      dataIndex: ["bill", "id"],
+      key: "bill.id",
+      width: "10%",
+      render: (text, record) =>
+        record.bill ? (
+          <Link to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
+            {record.bill.invoice_number && record.bill.vendor && record.bill.vendor.name
+              ? `${record.bill.invoice_number} - ${record.bill.vendor.name}`
+              : t("general.labels.na")}
+          </Link>
+        ) : (
+          ""
+        )
+    },
+    {
+      title: t("tasks.fields.title"),
+      dataIndex: "title",
+      key: "title",
+      sorter: true,
+      sortOrder: sortcolumn === "title" && sortorder
+    },
+    {
+      title: t("tasks.fields.due_date"),
+      dataIndex: "due_date",
+      key: "due_date",
+      sorter: true,
+      sortOrder: sortcolumn === "due_date" && sortorder,
+      width: "8%",
+      render: (text, record) => <DueDateRecord dueDate={record.due_date} />
+    },
+    {
+      title: t("tasks.fields.remind_at"),
+      dataIndex: "remind_at",
+      key: "remind_at",
+      sorter: true,
+      sortOrder: sortcolumn === "remind_at" && sortorder,
+      width: "10%",
+      render: (text, record) => <RemindAtRecord remindAt={record.remind_at} />
+    },
+    {
+      title: t("tasks.fields.priority"),
+      dataIndex: "priority",
+      key: "priority",
+      sorter: true,
+      sortOrder: sortcolumn === "priority" && sortorder,
+      width: "8%",
+      render: (text, record) => <PriorityLabel priority={record.priority} />
+    },
+    {
+      title: t("tasks.fields.actions"),
+      key: "toggleCompleted",
+      width: "5%",
+      render: (text, record) => (
+        <Space direction="horizontal">
+          <Button
+            title={t("tasks.buttons.edit")}
+            onClick={() => {
+              setTaskUpsertContext({
+                context: {
+                  existingTask: record,
+                  query
+                }
+              });
+            }}
+          >
+            <EditFilled />
+          </Button>
+          <Button
+            title={t("tasks.buttons.complete")}
+            onClick={() => toggleCompletedStatus(record.id, record.completed)}
+          >
+            {record.completed ? <CheckCircleOutlined /> : <CheckCircleFilled />}
+          </Button>
+          <Button title={t("tasks.buttons.delete")} onClick={() => toggleDeletedStatus(record.id, record.deleted)}>
+            {record.deleted ? <DeleteOutlined /> : <DeleteFilled />}
+          </Button>
+        </Space>
+      )
+    }
+  );
+
+  const handleCreateTask = useCallback(() => {
+    setTaskUpsertContext({
+      actions: {},
+      context: {
+        jobid: parentJobId,
+        [relationshipType]: relationshipId,
+        query
+      }
+    });
+  }, [parentJobId, relationshipId, relationshipType, setTaskUpsertContext, query]);
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history({ search: queryString.stringify(search) });
+  };
+
+  const handleSwitchChange = useCallback(
+    (param, value) => {
+      if (value) {
+        search[param] = "true";
+      } else {
+        delete search[param];
+      }
+      history({ search: queryString.stringify(search) });
+    },
+    [history, search]
+  );
+
+  const expandableRow = (record) => {
+    return (
+      <Card title={t("tasks.fields.description")} size="small">
+        {record.description}
+      </Card>
+    );
+  };
+
+  /**
+   * Extra actions for the tasks
+   * @type {Function}
+   */
+  const tasksExtra = useCallback(() => {
+    return (
+      <Space direction="horizontal">
+        {!onlyMine && (
+          <Switch
+            checkedChildren={t("tasks.buttons.myTasks")}
+            unCheckedChildren={t("tasks.buttons.allTasks")}
+            title={t("tasks.titles.mine")}
+            checked={mine === "true"}
+            onChange={(value) => handleSwitchChange("mine", value)}
+          />
+        )}
+        <Switch
+          checkedChildren={<CheckCircleFilled />}
+          unCheckedChildren={<CheckCircleOutlined />}
+          title={t("tasks.titles.completed")}
+          checked={completed === "true"}
+          onChange={(value) => handleSwitchChange("completed", value)}
+        />
+        <Switch
+          checkedChildren={<DeleteFilled />}
+          unCheckedChildren={<DeleteOutlined />}
+          title={t("tasks.titles.deleted")}
+          checked={deleted === "true"}
+          onChange={(value) => handleSwitchChange("deleted", value)}
+        />
+        <Button title={t("tasks.buttons.refresh")} onClick={() => refetch()}>
+          <SyncOutlined />
+        </Button>
+        <Button title={t("tasks.buttons.create")} onClick={handleCreateTask}>
+          <PlusCircleFilled />
+          {t("tasks.buttons.create")}
+        </Button>
+      </Space>
+    );
+  }, [refetch, deleted, completed, mine, onlyMine, t, handleSwitchChange, handleCreateTask]);
+
+  return (
+    <Card title={titleTranslation} extra={tasksExtra()}>
+      <Table
+        loading={loading}
+        pagination={{
+          pageSize: pageLimit,
+          current: parseInt(page || 1),
+          total: total,
+          responsive: true,
+          showQuickJumper: true
+        }}
+        columns={columns}
+        rowKey="id"
+        scroll={{ x: true }}
+        dataSource={tasks}
+        onChange={handleTableChange}
+        expandable={{
+          expandedRowRender: expandableRow,
+          rowExpandable: (record) => record.description
+        }}
+      />
+    </Card>
+  );
+}
--- a/client/src/components/task-list/task-list.container.jsx
+++ b/client/src/components/task-list/task-list.container.jsx
@@ -0,0 +1,193 @@
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+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 { notification } from "antd";
+import { useTranslation } from "react-i18next";
+import { connect, useDispatch } from "react-redux";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import dayjs from "../../utils/day";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskListContainer);
+
+export function TaskListContainer({
+  bodyshop,
+  titleTranslation,
+  query,
+  relationshipType,
+  relationshipId,
+  currentUser,
+  onlyMine,
+  parentJobId,
+  showRo = true,
+  disableJobRefetch = false
+}) {
+  const { t } = useTranslation();
+  const searchParams = queryString.parse(useLocation().search);
+  const {
+    page,
+    sortcolumn,
+    sortorder,
+    deleted,
+    completed //mine
+  } = searchParams;
+  const dispatch = useDispatch();
+
+  const { loading, error, data, refetch } = useQuery(query[Object.keys(query)[0]], {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    variables: {
+      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
+      offset: page ? (page - 1) * pageLimit : 0,
+      limit: pageLimit,
+      order: [
+        {
+          [sortcolumn || "created_at"]: sortorder ? (sortorder === "descend" ? "desc" : "asc") : "desc"
+        }
+      ]
+    }
+  });
+
+  /**
+   * Toggle task completed mutation
+   */
+  const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
+
+  /**
+   * Toggle task completed status
+   * @param id
+   * @param currentStatus
+   * @returns {Promise<void>}
+   */
+  const toggleCompletedStatus = async (id, currentStatus) => {
+    const completed_at = !currentStatus ? dayjs().toISOString() : null;
+
+    try {
+      const toggledTaskObject = {
+        variables: {
+          id: id,
+          completed: !currentStatus,
+          completed_at: completed_at
+        },
+        refetchQueries: [Object.keys(query)[0]]
+      };
+
+      if (!disableJobRefetch) {
+        toggledTaskObject.refetchQueries.push("GET_JOB_BY_PK");
+      }
+
+      const toggledTask = await toggleTaskCompleted(toggledTaskObject);
+
+      if (!toggledTask.errors) {
+        dispatch(
+          insertAuditTrail({
+            jobid: toggledTask.data.update_tasks_by_pk.jobid,
+            operation: toggledTask?.data?.update_tasks_by_pk?.completed
+              ? AuditTrailMapping.tasksCompleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email)
+              : AuditTrailMapping.tasksUncompleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email),
+            type: toggledTask?.data?.update_tasks_by_pk?.completed ? "tasksCompleted" : "tasksUncompleted"
+          })
+        );
+      }
+
+      notification["success"]({
+        message: t("tasks.successes.completed")
+      });
+    } catch (err) {
+      notification["error"]({
+        message: t("tasks.failures.completed")
+      });
+    }
+  };
+
+  /**
+   * Toggle task deleted mutation
+   */
+  const [toggleTaskDeleted] = useMutation(MUTATION_TOGGLE_TASK_DELETED);
+
+  /**
+   * Toggle task deleted status
+   * @param id
+   * @param currentStatus
+   * @returns {Promise<void>}
+   */
+
+  const toggleDeletedStatus = async (id, currentStatus) => {
+    const deleted_at = !currentStatus ? dayjs().toISOString() : null;
+    try {
+      const toggledTaskObject = {
+        variables: {
+          id: id,
+          deleted: !currentStatus,
+          deleted_at: deleted_at
+        },
+        refetchQueries: [Object.keys(query)[0]]
+      };
+
+      if (!disableJobRefetch) {
+        toggledTaskObject.refetchQueries.push("GET_JOB_BY_PK");
+      }
+
+      const toggledTask = await toggleTaskDeleted(toggledTaskObject);
+
+      if (!toggledTask.errors) {
+        dispatch(
+          insertAuditTrail({
+            jobid: toggledTask.data.update_tasks_by_pk.jobid,
+            operation: toggledTask?.data?.update_tasks_by_pk?.deleted
+              ? AuditTrailMapping.tasksDeleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email)
+              : AuditTrailMapping.tasksUndeleted(toggledTask.data.update_tasks_by_pk.title, currentUser.email),
+            type: toggledTask?.data?.update_tasks_by_pk?.deleted ? "tasksDeleted" : "tasksUndeleted"
+          })
+        );
+      }
+
+      notification["success"]({
+        message: t("tasks.successes.deleted")
+      });
+    } catch (err) {
+      notification["error"]({
+        message: t("tasks.failures.deleted")
+      });
+    }
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <TaskListComponent
+      loading={loading}
+      tasks={data ? data.tasks : null}
+      total={data ? data.tasks_aggregate.aggregate.count : 0}
+      titleTranslation={t(titleTranslation || "tasks.title")}
+      refetch={refetch}
+      toggleCompletedStatus={toggleCompletedStatus}
+      toggleDeletedStatus={toggleDeletedStatus}
+      relationshipType={relationshipType}
+      relationshipId={relationshipId}
+      onlyMine={onlyMine}
+      showRo={showRo}
+      parentJobId={parentJobId}
+      bodyshop={bodyshop}
+      query={query}
+    />
+  );
+}
--- a/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx
+++ b/client/src/components/task-upsert-modal/task-upsert-modal.component.jsx
@@ -0,0 +1,299 @@
+import { Col, Form, Input, Row, Select, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FormDatePicker } from "../form-date-picker/form-date-picker.component.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
+import dayjs from "../../utils/day";
+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 { FormDateTimePickerEnhanced } from "../form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskUpsertModalComponent);
+
+export function TaskUpsertModalComponent({
+  form,
+  bodyshop,
+  currentUser,
+  selectedJobId,
+  setSelectedJobId,
+  selectedJobDetails,
+  existingTask,
+  loading,
+  error
+}) {
+  const { t } = useTranslation();
+
+  const datePickerPresets = [
+    { label: t("tasks.date_presets.today"), value: dayjs().add(1, "hour") },
+    { label: t("tasks.date_presets.tomorrow"), value: dayjs().add(1, "day").startOf("day") },
+    { label: t("tasks.date_presets.next_week"), value: dayjs().add(1, "week").startOf("day") },
+    { label: t("tasks.date_presets.two_weeks"), value: dayjs().add(2, "weeks").startOf("day") },
+    { label: t("tasks.date_presets.three_weeks"), value: dayjs().add(3, "weeks").startOf("day") },
+    { label: t("tasks.date_presets.one_month"), value: dayjs().add(1, "month").startOf("day") },
+    { label: t("tasks.date_presets.three_months"), value: dayjs().add(3, "month").startOf("day") }
+  ];
+
+  const generatePresets = (job) => {
+    if (!job || !selectedJobDetails) return datePickerPresets; // return default presets if no job selected
+    const relativePresets = [];
+
+    if (selectedJobDetails?.scheduled_completion) {
+      const scheduledCompletion = dayjs(selectedJobDetails.scheduled_completion);
+
+      if (scheduledCompletion.isAfter(dayjs())) {
+        relativePresets.push(
+          {
+            label: `${t("tasks.date_presets.completion")} -1 ${t("tasks.date_presets.day")}`,
+            value: scheduledCompletion.subtract(1, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.completion")} -2 ${t("tasks.date_presets.days")}`,
+            value: scheduledCompletion.subtract(2, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.completion")} -3 ${t("tasks.date_presets.days")}`,
+            value: scheduledCompletion.subtract(3, "day").startOf("day")
+          }
+        );
+      }
+    }
+
+    if (selectedJobDetails?.scheduled_delivery) {
+      const scheduledDelivery = dayjs(selectedJobDetails.scheduled_delivery);
+      if (scheduledDelivery.isAfter(dayjs())) {
+        relativePresets.push(
+          {
+            label: `${t("tasks.date_presets.delivery")} -1 ${t("tasks.date_presets.day")}`,
+            value: scheduledDelivery.subtract(1, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.delivery")} -2 ${t("tasks.date_presets.days")}`,
+            value: scheduledDelivery.subtract(2, "day").startOf("day")
+          },
+          {
+            label: `${t("tasks.date_presets.delivery")} -3 ${t("tasks.date_presets.days")}`,
+            value: scheduledDelivery.subtract(3, "day").startOf("day")
+          }
+        );
+      }
+    }
+
+    return [...relativePresets, ...datePickerPresets];
+  };
+
+  const clearRelations = () => {
+    form.setFieldsValue({
+      billid: null,
+      partsorderid: null,
+      joblineid: null
+    });
+  };
+
+  /**
+   * Change the selected job id
+   * @param jobId
+   */
+  const changeJobId = (jobId) => {
+    setSelectedJobId(jobId || null);
+    // Reset the form fields when selectedJobId changes
+    clearRelations();
+  };
+
+  if (loading || error) return <LoadingSkeleton active />;
+
+  return (
+    <>
+      <Row gutter={[16, 16]}>
+        <Col span={16}>
+          <Form.Item
+            label={t("tasks.fields.title")}
+            name="title"
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <Input placeholder={t("tasks.fields.title")} />
+          </Form.Item>
+        </Col>
+        <Col span={4}>
+          <Form.Item label={t("tasks.fields.priority")} name="priority" initialValue={2}>
+            <Select
+              options={[
+                { value: 3, label: t("tasks.fields.priorities.low") },
+                { value: 2, label: t("tasks.fields.priorities.medium") },
+                { value: 1, label: t("tasks.fields.priorities.high") }
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={4}>
+          <Form.Item
+            label={t("tasks.fields.completed")}
+            name="completed"
+            valuePropName="checked"
+            initialValue={false}
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <Switch />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Form.Item
+            name="jobid"
+            initialValue={selectedJobId}
+            label={t("tasks.fields.jobid")}
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <JobSearchSelectComponent
+              placeholder={t("tasks.placeholders.jobid")}
+              onSelect={changeJobId}
+              onClear={changeJobId}
+              autoFocus={false}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.joblineid")} name="joblineid">
+            <Select
+              allowClear
+              placeholder={t("tasks.placeholders.joblineid")}
+              disabled={!selectedJobDetails || !selectedJobId}
+              options={selectedJobDetails?.joblines?.map((jobline) => ({
+                key: jobline.id,
+                value: jobline.id,
+                label: jobline.line_desc
+              }))}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.partsorderid")} name="partsorderid">
+            <Select
+              allowClear
+              placeholder={t("tasks.placeholders.partsorderid")}
+              disabled={!selectedJobDetails || !selectedJobId}
+              options={selectedJobDetails?.parts_orders?.map((partsOrder) => ({
+                key: partsOrder.id,
+                value: partsOrder.id,
+                label: `${partsOrder.order_number} - ${partsOrder.vendor.name}`
+              }))}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.billid")} name="billid">
+            <Select
+              allowClear
+              placeholder={t("tasks.placeholders.billid")}
+              disabled={!selectedJobDetails || !selectedJobId}
+              options={selectedJobDetails?.bills?.map((bill) => ({
+                key: bill.id,
+                value: bill.id,
+                label: `${bill.invoice_number} - ${bill.vendor.name}`
+              }))}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Form.Item
+            label={t("tasks.fields.assigned_to")}
+            name="assigned_to"
+            initialValue={
+              bodyshop.employees.find((employee) => employee?.user_email === currentUser.email && employee.active)?.id
+            }
+            rules={[
+              {
+                required: true
+              }
+            ]}
+          >
+            <Select
+              placeholder={t("tasks.placeholders.assigned_to")}
+              options={bodyshop.employees
+                .filter((x) => x.active && x.user_email)
+                .map((employee) => ({
+                  key: employee.id,
+                  value: employee.id,
+                  label: `${employee.first_name} ${employee.last_name}`
+                }))}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label={t("tasks.fields.due_date")} name="due_date">
+            <FormDatePicker
+              onlyFuture
+              format="MM/DD/YYYY"
+              presets={generatePresets(selectedJobDetails)}
+              rules={[
+                {
+                  validator: (_, value) => {
+                    if (!value || existingTask?.due_date === value || dayjs(value).isAfter(dayjs())) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject(new Error(t("tasks.validation.due_at_error_message")));
+                  }
+                }
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label={t("tasks.fields.remind_at")}
+            name="remind_at"
+            rules={[
+              {
+                validator: (_, value) => {
+                  if (!value || existingTask?.remind_at === value || dayjs(value).isAfter(dayjs().add(15, "minute"))) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error(t("tasks.validation.remind_at_error_message")));
+                }
+              }
+            ]}
+          >
+            <FormDateTimePickerEnhanced
+              onlyFuture
+              showTime
+              minuteStep={15}
+              presets={generatePresets(selectedJobDetails)}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Form.Item label={t("tasks.fields.description")} name="description">
+            <Input.TextArea rows={8} placeholder={t("tasks.fields.description")} />
+          </Form.Item>
+        </Col>
+      </Row>
+    </>
+  );
+}
--- a/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
+++ b/client/src/components/task-upsert-modal/task-upsert-modal.container.jsx
@@ -0,0 +1,296 @@
+import { useMutation, useQuery } from "@apollo/client";
+import { Form, Modal, notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { MUTATION_INSERT_NEW_TASK, MUTATION_UPDATE_TASK, QUERY_GET_TASK_BY_ID } from "../../graphql/tasks.queries";
+import { GET_JOB_BY_PK, QUERY_GET_TASKS_JOB_DETAILS_BY_ID } from "../../graphql/jobs.queries.js";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectTaskUpsert } from "../../redux/modals/modals.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import TaskUpsertModalComponent from "./task-upsert-modal.component";
+import { replaceUndefinedWithNull } from "../../utils/undefinedtonull.js";
+import { useLocation, useNavigate } from "react-router-dom";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { isEqual } from "lodash";
+import refetchRouteMappings from "./task-upsert-modal.route.mappings";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+  taskUpsert: selectTaskUpsert
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("taskUpsert")),
+  insertAuditTrail: ({ jobid, billid, operation, type }) =>
+    dispatch(insertAuditTrail({ jobid, billid, operation, type }))
+});
+
+export function TaskUpsertModalContainer({ bodyshop, currentUser, taskUpsert, toggleModalVisible, insertAuditTrail }) {
+  const { t } = useTranslation();
+  const history = useNavigate();
+  const [insertTask] = useMutation(MUTATION_INSERT_NEW_TASK);
+  const [updateTask] = useMutation(MUTATION_UPDATE_TASK);
+  const { open, context } = taskUpsert;
+  const { jobid, joblineid, billid, partsorderid, taskId, existingTask, query } = context;
+  const [form] = Form.useForm();
+  const [selectedJobId, setSelectedJobId] = useState(null);
+  const [selectedJobDetails, setSelectedJobDetails] = useState(null);
+  const [jobIdState, setJobIdState] = useState(null);
+  const [isTouched, setIsTouched] = useState(false);
+  const location = useLocation();
+
+  const { loading, error, data } = useQuery(QUERY_GET_TASKS_JOB_DETAILS_BY_ID, {
+    variables: { id: jobIdState },
+    skip: !jobIdState
+  });
+
+  const {
+    loading: taskLoading,
+    error: taskError,
+    data: taskData
+  } = useQuery(QUERY_GET_TASK_BY_ID, {
+    variables: { id: taskId },
+    skip: !taskId
+  });
+  // Use Effect to hydrate existing task if only a taskid is provided
+  useEffect(() => {
+    if (!taskLoading && !taskError && taskData && taskData?.tasks_by_pk) {
+      form.setFieldsValue(taskData.tasks_by_pk);
+      setSelectedJobId(taskData.tasks_by_pk.jobid);
+    }
+  }, [taskLoading, taskError, taskData, form]);
+
+  // Use Effect to hydrate selected job details
+  useEffect(() => {
+    if (!loading && !error && data) {
+      setSelectedJobDetails(data.jobs_by_pk);
+    }
+  }, [loading, error, data]);
+
+  // Use Effect to toggle to set jobid state
+  useEffect(() => {
+    if (selectedJobId) {
+      setJobIdState(selectedJobId);
+    }
+  }, [selectedJobId]);
+
+  // Use Effect to hydrate form fields
+  useEffect(() => {
+    if (jobid || existingTask?.id) {
+      setSelectedJobId(jobid || existingTask.jobid);
+    }
+    if (existingTask && open) {
+      form.setFieldsValue(existingTask);
+    } else if (!existingTask && open) {
+      form.resetFields();
+      if (joblineid) form.setFieldsValue({ joblineid });
+      if (billid) form.setFieldsValue({ billid });
+      if (partsorderid) form.setFieldsValue({ partsorderid });
+    }
+    return () => {
+      setSelectedJobId(null);
+      setIsTouched(false);
+    };
+  }, [jobid, existingTask, form, open, joblineid, billid, partsorderid]);
+
+  /**
+   * Remove the taskid from the URL
+   */
+  const removeTaskIdFromUrl = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (!urlParams.has("taskid")) return;
+    urlParams.delete("taskid");
+    history(`${window.location.pathname}?${urlParams}`);
+  };
+
+  /**
+   * Generate refetch queries
+   * @param jobId
+   * @returns {*[]}
+   */
+  const generateRefetchQueries = (jobId) => {
+    const refetchQueries = [];
+
+    if (location.pathname.includes("/manage/jobs") && jobId) {
+      refetchQueries.push({
+        query: GET_JOB_BY_PK,
+        variables: {
+          id: jobId
+        }
+      });
+    }
+
+    // We have a specified query
+    if (query && Object.keys(query).length) {
+      refetchQueries.push(Object.keys(query)[0]);
+    }
+    // We don't have a specified query, check the page
+    else {
+      refetchRouteMappings.forEach((mapping) => {
+        if (location.pathname.includes(mapping.route)) {
+          refetchQueries.push(mapping.query);
+        }
+      });
+    }
+
+    return refetchQueries;
+  };
+
+  /**
+   * Handle existing task
+   * @param id
+   * @param jobId
+   * @param values
+   * @returns {Promise<void>}
+   */
+  const handleExistingTask = async (id, jobId, values) => {
+    const task = replaceUndefinedWithNull(values);
+
+    // Remind at is dirty so lets clear remind_at_sent
+    if (task?.remind_at) {
+      task.remind_at_sent = null;
+    }
+
+    const taskObject = {
+      variables: {
+        taskId: id,
+        task
+      }
+    };
+
+    taskObject.refetchQueries = generateRefetchQueries(jobId);
+
+    const taskData = await updateTask(taskObject);
+
+    if (!taskData.errors) {
+      const oldTask = taskData?.data?.update_tasks?.returning[0];
+
+      insertAuditTrail({
+        jobid: oldTask.jobid,
+        operation: AuditTrailMapping.tasksUpdated(oldTask.title, currentUser.email),
+        type: "tasksUpdated"
+      });
+    }
+
+    notification["success"]({
+      message: t("tasks.successes.updated")
+    });
+
+    toggleModalVisible();
+  };
+
+  /**
+   * Handle new task
+   * @param values
+   * @returns {Promise<void>}
+   */
+  const handleNewTask = async (values) => {
+    const taskObject = {
+      variables: {
+        taskInput: [
+          {
+            ...values,
+            created_by: currentUser.email,
+            bodyshopid: bodyshop.id
+          }
+        ]
+      }
+    };
+
+    taskObject.refetchQueries = generateRefetchQueries(values.jobid);
+
+    const newTaskData = await insertTask(taskObject);
+    const newTask = newTaskData?.data?.insert_tasks?.returning[0];
+
+    if (!newTaskData.errors) {
+      insertAuditTrail({
+        jobid: newTask.jobid,
+        operation: AuditTrailMapping.tasksCreated(newTask.title, currentUser.email),
+        type: "tasksCreated"
+      });
+    }
+
+    form.resetFields();
+    toggleModalVisible();
+
+    notification["success"]({
+      message: t("tasks.successes.created")
+    });
+  };
+
+  /**
+   * Handle the form submit
+   * @param formValues
+   * @returns {Promise<[{jobid, bodyshopid, created_by},...*]>}
+   */
+  const handleFinish = async (formValues) => {
+    if (existingTask || taskData?.tasks_by_pk) {
+      const taskSource = existingTask || taskData?.tasks_by_pk;
+      const dirtyValues = Object.keys(formValues).reduce((acc, key) => {
+        if (!isEqual(formValues[key], taskSource[key])) {
+          acc[key] = formValues[key];
+        }
+        return acc;
+      }, {});
+      try {
+        await handleExistingTask(taskSource.id, taskSource.jobid, dirtyValues);
+      } catch (e) {
+        notification["error"]({
+          message: t("tasks.failures.updated")
+        });
+      }
+    } else {
+      try {
+        await handleNewTask(formValues);
+      } catch (e) {
+        notification["error"]({
+          message: t("tasks.failures.created")
+        });
+      }
+    }
+  };
+
+  return (
+    <Modal
+      title={existingTask ? t("tasks.actions.edit") : t("tasks.actions.new")}
+      open={open}
+      okText={t("general.actions.save")}
+      width="50%"
+      onOk={() => {
+        removeTaskIdFromUrl();
+        form.submit();
+      }}
+      onCancel={() => {
+        removeTaskIdFromUrl();
+        toggleModalVisible();
+      }}
+      okButtonProps={{ disabled: !isTouched }}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        layout="vertical"
+        onFieldsChange={() => {
+          setIsTouched(true);
+        }}
+      >
+        <TaskUpsertModalComponent
+          form={form}
+          loading={loading || (taskId && taskLoading)}
+          error={error}
+          data={data}
+          existingTask={existingTask || taskData?.tasks_by_pk}
+          selectedJobId={selectedJobId}
+          setSelectedJobId={setSelectedJobId}
+          selectedJobDetails={selectedJobDetails}
+        />
+      </Form>
+    </Modal>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskUpsertModalContainer);
--- a/client/src/components/task-upsert-modal/task-upsert-modal.route.mappings.jsx
+++ b/client/src/components/task-upsert-modal/task-upsert-modal.route.mappings.jsx
@@ -0,0 +1,15 @@
+import {
+  QUERY_ALL_TASKS_PAGINATED,
+  QUERY_JOB_TASKS_PAGINATED,
+  QUERY_MY_TASKS_PAGINATED
+} from "../../graphql/tasks.queries.js";
+
+const getQueryName = (query) => Object.keys(query)[0];
+
+const refetchRouteMappings = [
+  {query: getQueryName({QUERY_MY_TASKS_PAGINATED}), route: "/manage/tasks/mytasks"},
+  {query: getQueryName({QUERY_ALL_TASKS_PAGINATED}), route: "/manage/tasks/alltasks"},
+  {query: getQueryName({QUERY_JOB_TASKS_PAGINATED}), route: "/manage/jobs"}
+];
+
+export default refetchRouteMappings;
--- a/client/src/components/trello-board/components/AddCardLink.jsx
+++ b/client/src/components/trello-board/components/AddCardLink.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { AddCardLink } from "../styles/Base";
+import { useTranslation } from "react-i18next";
+
+const AddCardLinkComponent = ({ onClick, laneId }) => {
+  const { t } = useTranslation();
+
+  return <AddCardLink onClick={onClick}>{t("trello.labels.add_card")}</AddCardLink>;
+};
+
+export default AddCardLinkComponent;
--- a/client/src/components/trello-board/components/Card.jsx
+++ b/client/src/components/trello-board/components/Card.jsx
@@ -0,0 +1,112 @@
+import React, { useCallback } from "react";
+import PropTypes from "prop-types";
+
+import { CardHeader, CardRightContent, CardTitle, Detail, Footer, MovableCardWrapper } from "../styles/Base";
+import InlineInput from "../widgets/InlineInput.jsx";
+import Tag from "./Card/Tag.jsx";
+import DeleteButton from "../widgets/DeleteButton.jsx";
+import { useTranslation } from "react-i18next";
+
+const Card = ({
+  showDeleteButton = true,
+  onDelete = () => {},
+  onClick = () => {},
+  style = {},
+  tagStyle = {},
+  className = "",
+  id,
+  title = "no title",
+  label = "",
+  description = "",
+  tags = [],
+  cardDraggable,
+  editable,
+  onChange
+}) => {
+  const { t } = useTranslation();
+
+  const handleDelete = useCallback(
+    (e) => {
+      onDelete();
+      e.stopPropagation();
+    },
+    [onDelete]
+  );
+
+  const updateCard = (card) => {
+    onChange({ ...card, id });
+  };
+
+  return (
+    <MovableCardWrapper data-id={id} onClick={onClick} style={style} className={className}>
+      <CardHeader>
+        <CardTitle draggable={cardDraggable}>
+          {editable ? (
+            <InlineInput
+              value={title}
+              border
+              placeholder={t("trello.labels.title")}
+              resize="vertical"
+              onSave={(value) => updateCard({ title: value })}
+            />
+          ) : (
+            title
+          )}
+        </CardTitle>
+        <CardRightContent>
+          {editable ? (
+            <InlineInput
+              value={label}
+              border
+              placeholder={t("trello.labels.label")}
+              resize="vertical"
+              onSave={(value) => updateCard({ label: value })}
+            />
+          ) : (
+            label
+          )}
+        </CardRightContent>
+        {showDeleteButton && <DeleteButton onClick={handleDelete} />}
+      </CardHeader>
+      <Detail>
+        {editable ? (
+          <InlineInput
+            value={description}
+            border
+            placeholder={t("trello.labels.description")}
+            resize="vertical"
+            onSave={(value) => updateCard({ description: value })}
+          />
+        ) : (
+          description
+        )}
+      </Detail>
+      {tags && tags.length > 0 && (
+        <Footer>
+          {tags.map((tag) => (
+            <Tag key={tag.title} {...tag} tagStyle={tagStyle} />
+          ))}
+        </Footer>
+      )}
+    </MovableCardWrapper>
+  );
+};
+
+Card.propTypes = {
+  showDeleteButton: PropTypes.bool,
+  onDelete: PropTypes.func,
+  onClick: PropTypes.func,
+  style: PropTypes.object,
+  tagStyle: PropTypes.object,
+  className: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  description: PropTypes.string,
+  tags: PropTypes.array,
+  cardDraggable: PropTypes.bool,
+  editable: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+};
+
+export default Card;
--- a/client/src/components/trello-board/components/Card/Tag.jsx
+++ b/client/src/components/trello-board/components/Card/Tag.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TagSpan } from "../../styles/Base";
+
+const Tag = ({ title, color, bgcolor, tagStyle, ...otherProps }) => {
+  const style = { color: color || "white", backgroundColor: bgcolor || "orange", ...tagStyle };
+  return (
+    <TagSpan style={style} {...otherProps}>
+      {title}
+    </TagSpan>
+  );
+};
+
+Tag.propTypes = {
+  title: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  bgcolor: PropTypes.string,
+  tagStyle: PropTypes.object
+};
+
+export default Tag;
--- a/client/src/components/trello-board/components/Lane/LaneFooter.jsx
+++ b/client/src/components/trello-board/components/Lane/LaneFooter.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { LaneFooter } from "../../styles/Base";
+import { CollapseBtn, ExpandBtn } from "../../styles/Elements";
+
+const LaneFooterComponent = ({ onClick, collapsed }) => (
+  <LaneFooter onClick={onClick}>{collapsed ? <ExpandBtn /> : <CollapseBtn />}</LaneFooter>
+);
+
+export default LaneFooterComponent;
--- a/client/src/components/trello-board/components/Lane/LaneHeader.jsx
+++ b/client/src/components/trello-board/components/Lane/LaneHeader.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import InlineInput from "../../widgets/InlineInput.jsx";
+import { LaneHeader, RightContent, Title } from "../../styles/Base";
+import LaneMenu from "./LaneHeader/LaneMenu.jsx";
+import { useTranslation } from "react-i18next";
+
+const LaneHeaderComponent = ({
+  updateTitle,
+  canAddLanes,
+  onDelete,
+  onDoubleClick,
+  editLaneTitle,
+  label,
+  title,
+  titleStyle,
+  labelStyle,
+  laneDraggable
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <LaneHeader onDoubleClick={onDoubleClick} editLaneTitle={editLaneTitle}>
+      <Title draggable={laneDraggable} style={titleStyle}>
+        {editLaneTitle ? (
+          <InlineInput
+            value={title}
+            border
+            placeholder={t("trello.labels.title")}
+            resize="vertical"
+            onSave={updateTitle}
+          />
+        ) : (
+          title
+        )}
+      </Title>
+      {label && (
+        <RightContent>
+          <span style={labelStyle}>{label}</span>
+        </RightContent>
+      )}
+      {canAddLanes && <LaneMenu onDelete={onDelete} />}
+    </LaneHeader>
+  );
+};
+
+LaneHeaderComponent.propTypes = {
+  updateTitle: PropTypes.func,
+  editLaneTitle: PropTypes.bool,
+  canAddLanes: PropTypes.bool,
+  laneDraggable: PropTypes.bool,
+  label: PropTypes.string,
+  title: PropTypes.string,
+  onDelete: PropTypes.func,
+  onDoubleClick: PropTypes.func
+};
+
+LaneHeaderComponent.defaultProps = {
+  updateTitle: () => {},
+  editLaneTitle: false,
+  canAddLanes: false
+};
+
+export default LaneHeaderComponent;
--- a/client/src/components/trello-board/components/Lane/LaneHeader/LaneMenu.jsx
+++ b/client/src/components/trello-board/components/Lane/LaneHeader/LaneMenu.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import { Popover } from "react-popopo";
+
+import { CustomPopoverContainer, CustomPopoverContent } from "../../../styles/Base";
+
+import {
+  DeleteWrapper,
+  GenDelButton,
+  LaneMenuContent,
+  LaneMenuHeader,
+  LaneMenuItem,
+  LaneMenuTitle,
+  MenuButton
+} from "../../../styles/Elements";
+import { useTranslation } from "react-i18next";
+
+const LaneMenu = ({ onDelete }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Popover
+      position="bottom"
+      PopoverContainer={CustomPopoverContainer}
+      PopoverContent={CustomPopoverContent}
+      trigger={<MenuButton>⋮</MenuButton>}
+    >
+      <LaneMenuHeader>
+        <LaneMenuTitle>{t("trello.labels.lane_actions")}</LaneMenuTitle>
+        <DeleteWrapper>
+          <GenDelButton>&#10006;</GenDelButton>
+        </DeleteWrapper>
+      </LaneMenuHeader>
+      <LaneMenuContent>
+        <LaneMenuItem onClick={onDelete}>{t("trello.labels.delete_lane")}</LaneMenuItem>
+      </LaneMenuContent>
+    </Popover>
+  );
+};
+
+export default LaneMenu;
--- a/client/src/components/trello-board/components/Loader.jsx
+++ b/client/src/components/trello-board/components/Loader.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import {LoaderDiv, LoadingBar} from '../styles/Loader'
+
+const Loader = () => (
+  <LoaderDiv>
+    <LoadingBar />
+    <LoadingBar />
+    <LoadingBar />
+    <LoadingBar />
+  </LoaderDiv>
+)
+
+export default Loader
--- a/client/src/components/trello-board/components/NewCardForm.jsx
+++ b/client/src/components/trello-board/components/NewCardForm.jsx
@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { CardForm, CardHeader, CardRightContent, CardTitle, CardWrapper, Detail } from "../styles/Base";
+import { AddButton, CancelButton } from "../styles/Elements";
+import EditableLabel from "../widgets/EditableLabel.jsx";
+import { useTranslation } from "react-i18next";
+
+const NewCardForm = ({ onCancel, onAdd }) => {
+  const [state, setState] = useState({});
+  const { t } = useTranslation();
+
+  const updateField = (field, value) => {
+    setState((prevState) => ({ ...prevState, [field]: value }));
+  };
+
+  const handleAdd = () => {
+    onAdd(state);
+  };
+
+  return (
+    <CardForm>
+      <CardWrapper>
+        <CardHeader>
+          <CardTitle>
+            <EditableLabel
+              placeholder={t("trello.labels.title")}
+              onChange={(val) => updateField("title", val)}
+              autoFocus
+            />
+          </CardTitle>
+          <CardRightContent>
+            <EditableLabel placeholder={t("trello.labels.label")} onChange={(val) => updateField("label", val)} />
+          </CardRightContent>
+        </CardHeader>
+        <Detail>
+          <EditableLabel
+            placeholder={t("trello.labels.description")}
+            onChange={(val) => updateField("description", val)}
+          />
+        </Detail>
+      </CardWrapper>
+      <AddButton onClick={handleAdd}>{t("trello.labels.add_card")}</AddButton>
+      <CancelButton onClick={onCancel}>{t("trello.labels.cancel")}</CancelButton>
+    </CardForm>
+  );
+};
+
+NewCardForm.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired
+};
+
+export default NewCardForm;
--- a/client/src/components/trello-board/components/NewLaneForm.jsx
+++ b/client/src/components/trello-board/components/NewLaneForm.jsx
@@ -0,0 +1,57 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { LaneTitle, NewLaneButtons, Section } from "../styles/Base";
+import { AddButton, CancelButton } from "../styles/Elements";
+import NewLaneTitleEditor from "../widgets/NewLaneTitleEditor.jsx";
+import { v1 } from "uuid";
+import { useTranslation } from "react-i18next";
+
+const NewLane = ({ onCancel, onAdd }) => {
+  const refInput = useRef(null);
+  const { t } = useTranslation();
+
+  const handleSubmit = () => {
+    onAdd({
+      id: v1(),
+      title: getValue()
+    });
+  };
+
+  const getValue = () => refInput.current.getValue();
+
+  // TODO: Commented out because it was never called and it was causing a error
+  // const onClickOutside = (a, b, c) => {
+  //   if (getValue().length > 0) {
+  //     handleSubmit();
+  //   } else {
+  //     onCancel();
+  //   }
+  // };
+
+  return (
+    <Section>
+      <LaneTitle>
+        <NewLaneTitleEditor
+          ref={refInput}
+          placeholder={t("trello.labels.title")}
+          onCancel={onCancel}
+          onSave={handleSubmit}
+          resize="vertical"
+          border
+          autoFocus
+        />
+      </LaneTitle>
+      <NewLaneButtons>
+        <AddButton onClick={handleSubmit}>{t("trello.labels.add_lane")}</AddButton>
+        <CancelButton onClick={onCancel}>{t("trello.labels.cancel")}</CancelButton>
+      </NewLaneButtons>
+    </Section>
+  );
+};
+
+NewLane.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired
+};
+
+export default NewLane;
--- a/client/src/components/trello-board/components/NewLaneSection.jsx
+++ b/client/src/components/trello-board/components/NewLaneSection.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { NewLaneSection } from "../styles/Base";
+import { AddLaneLink } from "../styles/Elements";
+import { useTranslation } from "react-i18next";
+
+const NewLaneSectionComponent = ({ onClick }) => {
+  const { t } = useTranslation();
+
+  return (
+    <NewLaneSection>
+      <AddLaneLink onClick={onClick}>{t("trello.labels.add_lane")}</AddLaneLink>
+    </NewLaneSection>
+  );
+};
+
+export default NewLaneSectionComponent;
--- a/client/src/components/trello-board/components/index.js
+++ b/client/src/components/trello-board/components/index.js
@@ -0,0 +1,28 @@
+import LaneHeader from "./Lane/LaneHeader";
+import LaneFooter from "./Lane/LaneFooter";
+import Card from "./Card";
+import Loader from "./Loader.jsx";
+import NewLaneForm from "./NewLaneForm.jsx";
+import NewCardForm from "./NewCardForm.jsx";
+import AddCardLink from "./AddCardLink";
+import NewLaneSection from "./NewLaneSection.jsx";
+import { BoardWrapper, StyleHorizontal, GlobalStyle, StyleVertical, ScrollableLane, Section } from "../styles/Base";
+
+const exports = {
+  StyleHorizontal,
+  StyleVertical,
+  GlobalStyle,
+  BoardWrapper,
+  Loader,
+  ScrollableLane,
+  LaneHeader,
+  LaneFooter,
+  Section,
+  NewLaneForm,
+  NewLaneSection,
+  NewCardForm,
+  Card,
+  AddCardLink
+};
+
+export default exports;
--- a/client/src/components/trello-board/controllers/Board.jsx
+++ b/client/src/components/trello-board/controllers/Board.jsx
@@ -0,0 +1,28 @@
+import { BoardContainer } from "../index";
+import classNames from "classnames";
+import { useState } from "react";
+import { v1 } from "uuid";
+
+const Board = ({ id, className, components, orientation, ...additionalProps }) => {
+  const [storeId] = useState(id || v1());
+
+  const allClassNames = classNames("react-trello-board", className || "");
+  const OrientationStyle = orientation === "horizontal" ? components.StyleHorizontal : components.StyleVertical;
+
+  return (
+    <>
+      <components.GlobalStyle />
+      <OrientationStyle>
+        <BoardContainer
+          components={components}
+          orientation={orientation}
+          {...additionalProps}
+          id={storeId}
+          className={allClassNames}
+        />
+      </OrientationStyle>
+    </>
+  );
+};
+
+export default Board;
--- a/client/src/components/trello-board/controllers/BoardContainer.jsx
+++ b/client/src/components/trello-board/controllers/BoardContainer.jsx
@@ -0,0 +1,331 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Container from "../dnd/Container";
+import Draggable from "../dnd/Draggable";
+import PropTypes from "prop-types";
+import pick from "lodash/pick";
+import isEqual from "lodash/isEqual";
+import Lane from "./Lane";
+import { PopoverWrapper } from "react-popopo";
+import * as actions from "../../../redux/trello/trello.actions.js";
+
+/**
+ * BoardContainer is a React component that represents a Trello-like board.
+ * It uses Redux for state management and provides a variety of props to customize its behavior.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.id - The unique identifier for the board
+ * @param {Object} props.components - Custom components to use in the board
+ * @param {Object} props.data - The initial data for the board
+ * @param {boolean} props.draggable - Whether the board is draggable
+ * @param {boolean} props.laneDraggable - Whether the lanes in the board are draggable
+ * @param {string} props.laneDragClass - The CSS class to apply when a lane is being dragged
+ * @param {string} props.laneDropClass - The CSS class to apply when a lane is dropped
+ * @param {Object} props.style - The CSS styles to apply to the board
+ * @param {Function} props.onDataChange - Callback function when the board data changes
+ * @param {Function} props.onCardAdd - Callback function when a card is added
+ * @param {Function} props.onCardUpdate - Callback function when a card is updated
+ * @param {Function} props.onCardClick - Callback function when a card is clicked
+ * @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted
+ * @param {Function} props.onCardDelete - Callback function when a card is deleted
+ * @param {Function} props.onLaneScroll - Callback function when a lane is scrolled
+ * @param {Function} props.onLaneClick - Callback function when a lane is clicked
+ * @param {Function} props.onLaneAdd - Callback function when a lane is added
+ * @param {Function} props.onLaneDelete - Callback function when a lane is deleted
+ * @param {Function} props.onLaneUpdate - Callback function when a lane is updated
+ * @param {boolean} props.editable - Whether the board is editable
+ * @param {boolean} props.canAddLanes - Whether lanes can be added to the board
+ * @param {Object} props.laneStyle - The CSS styles to apply to the lanes
+ * @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
+ * @param {string} props.orientation - The orientation of the board ("horizontal" or "vertical")
+ * @param {Function} props.eventBusHandle - Function to handle events from the event bus
+ * @param {Function} props.handleLaneDragStart - Callback function when a lane drag starts
+ * @param {Function} props.handleLaneDragEnd - Callback function when a lane drag ends
+ * @param {Object} props.reducerData - The initial data for the Redux reducer
+ * @param {Object} props.cardStyle - The CSS styles to apply to the cards
+ * @param {Object} props.otherProps - Any other props to pass to the board
+ * @returns {JSX.Element} A Trello-like board
+ */
+const BoardContainer = ({
+  id,
+  components,
+  data,
+  draggable = false,
+  laneDraggable = true,
+  laneDragClass = "react_trello_dragLaneClass",
+  laneDropClass = "react_trello_dragLaneDropClass",
+  style,
+  onDataChange = () => {},
+  onCardAdd = () => {},
+  onCardUpdate = () => {},
+  onCardClick = () => {},
+  onBeforeCardDelete = () => {},
+  onCardDelete = () => {},
+  onLaneScroll = () => {},
+  onLaneClick = () => {},
+  onLaneAdd = () => {},
+  onLaneDelete = () => {},
+  onLaneUpdate = () => {},
+  editable = false,
+  canAddLanes = false,
+  laneStyle,
+  onCardMoveAcrossLanes = () => {},
+  orientation = "horizontal",
+  eventBusHandle,
+  handleLaneDragStart = () => {},
+  handleLaneDragEnd = () => {},
+  reducerData,
+  cardStyle,
+  ...otherProps
+}) => {
+  const [addLaneMode, setAddLaneMode] = useState(false);
+
+  const dispatch = useDispatch();
+  const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
+
+  const groupName = `TrelloBoard${id}`;
+
+  const wireEventBus = useCallback(() => {
+    const eventBus = {
+      publish: (event) => {
+        switch (event.type) {
+          case "ADD_CARD":
+            return dispatch(actions.addCard({ laneId: event.laneId, card: event.card }));
+          case "REMOVE_CARD":
+            return dispatch(actions.removeCard({ laneId: event.laneId, cardId: event.cardId }));
+          case "REFRESH_BOARD":
+            return dispatch(actions.loadBoard(event.data));
+          case "MOVE_CARD":
+            return dispatch(
+              actions.moveCardAcrossLanes({
+                fromLaneId: event.fromLaneId,
+                toLaneId: event.toLaneId,
+                cardId: event.cardId,
+                index: event.index
+              })
+            );
+          case "UPDATE_CARDS":
+            return dispatch(actions.updateCards({ laneId: event.laneId, cards: event.cards }));
+          case "UPDATE_CARD":
+            return dispatch(actions.updateCard({ laneId: event.laneId, updatedCard: event.card }));
+          case "UPDATE_LANES":
+            return dispatch(actions.updateLanes(event.lanes));
+          case "UPDATE_LANE":
+            return dispatch(actions.updateLane(event.lane));
+          default:
+            return;
+        }
+      }
+    };
+    eventBusHandle(eventBus);
+  }, [dispatch, eventBusHandle]);
+
+  useEffect(() => {
+    dispatch(actions.loadBoard(data));
+    if (eventBusHandle) {
+      wireEventBus();
+    }
+  }, [data, eventBusHandle, dispatch, wireEventBus]);
+
+  useEffect(() => {
+    if (!isEqual(currentReducerData, reducerData)) {
+      onDataChange(currentReducerData);
+    }
+  }, [currentReducerData, reducerData, onDataChange]);
+
+  const onDragStart = useCallback(
+    ({ payload }) => {
+      handleLaneDragStart(payload.id);
+    },
+    [handleLaneDragStart]
+  );
+
+  const onLaneDrop = useCallback(
+    ({ removedIndex, addedIndex, payload }) => {
+      if (removedIndex !== addedIndex) {
+        dispatch(actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex }));
+        handleLaneDragEnd(removedIndex, addedIndex, payload);
+      }
+    },
+    [dispatch, handleLaneDragEnd]
+  );
+
+  const getCardDetails = useCallback(
+    (laneId, cardIndex) => {
+      return currentReducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
+    },
+    [currentReducerData]
+  );
+
+  const getLaneDetails = useCallback(
+    (index) => {
+      return currentReducerData.lanes[index];
+    },
+    [currentReducerData]
+  );
+
+  const hideEditableLane = () => {
+    setAddLaneMode(false);
+  };
+
+  const showEditableLane = () => {
+    setAddLaneMode(true);
+  };
+
+  const addNewLane = (params) => {
+    hideEditableLane();
+    dispatch(actions.addLane(params));
+    onLaneAdd(params);
+  };
+
+  const passThroughProps = pick(
+    {
+      id,
+      components,
+      data,
+      draggable,
+      laneDraggable,
+      laneDragClass,
+      laneDropClass,
+      style,
+      onDataChange,
+      onCardAdd,
+      onCardUpdate,
+      onCardClick,
+      onBeforeCardDelete,
+      onCardDelete,
+      onLaneScroll,
+      onLaneClick,
+      onLaneAdd,
+      onLaneDelete,
+      onLaneUpdate,
+      editable,
+      canAddLanes,
+      laneStyle,
+      onCardMoveAcrossLanes,
+      orientation,
+      eventBusHandle,
+      handleLaneDragStart,
+      handleLaneDragEnd,
+      reducerData,
+      cardStyle,
+      ...otherProps
+    },
+    [
+      "onCardMoveAcrossLanes",
+      "onLaneScroll",
+      "onLaneDelete",
+      "onLaneUpdate",
+      "onCardClick",
+      "onBeforeCardDelete",
+      "onCardDelete",
+      "onCardAdd",
+      "onCardUpdate",
+      "onLaneClick",
+      "laneSortFunction",
+      "draggable",
+      "laneDraggable",
+      "cardDraggable",
+      "collapsibleLanes",
+      "canAddLanes",
+      "hideCardDeleteIcon",
+      "tagStyle",
+      "handleDragStart",
+      "handleDragEnd",
+      "cardDragClass",
+      "editLaneTitle",
+      "orientation"
+    ]
+  );
+
+  return (
+    <components.BoardWrapper style={style} orientation={orientation} draggable={false}>
+      <PopoverWrapper>
+        <Container
+          orientation={orientation === "vertical" ? "vertical" : "horizontal"}
+          onDragStart={onDragStart}
+          dragClass={laneDragClass}
+          dropClass={laneDropClass}
+          onDrop={onLaneDrop}
+          lockAxis={orientation === "vertical" ? "y" : "x"}
+          getChildPayload={(index) => getLaneDetails(index)}
+          groupName={groupName}
+        >
+          {currentReducerData.lanes.map((lane, index) => {
+            const { id, droppable, ...laneOtherProps } = lane;
+            const laneToRender = (
+              <Lane
+                key={id}
+                boardId={groupName}
+                components={components}
+                id={id}
+                getCardDetails={getCardDetails}
+                index={index}
+                droppable={droppable === undefined ? true : droppable}
+                style={laneStyle || lane.style || {}}
+                labelStyle={lane.labelStyle || {}}
+                cardStyle={cardStyle || lane.cardStyle}
+                editable={editable && !lane.disallowAddingCard}
+                {...laneOtherProps}
+                {...passThroughProps}
+              />
+            );
+            return draggable || laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : laneToRender;
+          })}
+        </Container>
+      </PopoverWrapper>
+      {canAddLanes && (
+        <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>
+          {editable && !addLaneMode ? (
+            <components.NewLaneSection onClick={showEditableLane} />
+          ) : (
+            addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />
+          )}
+        </Container>
+      )}
+    </components.BoardWrapper>
+  );
+};
+
+BoardContainer.propTypes = {
+  id: PropTypes.string,
+  components: PropTypes.object,
+  actions: PropTypes.object,
+  data: PropTypes.object.isRequired,
+  reducerData: PropTypes.object,
+  onDataChange: PropTypes.func,
+  eventBusHandle: PropTypes.func,
+  onLaneScroll: PropTypes.func,
+  onCardClick: PropTypes.func,
+  onBeforeCardDelete: PropTypes.func,
+  onCardDelete: PropTypes.func,
+  onCardAdd: PropTypes.func,
+  onCardUpdate: PropTypes.func,
+  onLaneAdd: PropTypes.func,
+  onLaneDelete: PropTypes.func,
+  onLaneClick: PropTypes.func,
+  onLaneUpdate: PropTypes.func,
+  laneSortFunction: PropTypes.func,
+  draggable: PropTypes.bool,
+  collapsibleLanes: PropTypes.bool,
+  editable: PropTypes.bool,
+  canAddLanes: PropTypes.bool,
+  hideCardDeleteIcon: PropTypes.bool,
+  handleDragStart: PropTypes.func,
+  handleDragEnd: PropTypes.func,
+  handleLaneDragStart: PropTypes.func,
+  handleLaneDragEnd: PropTypes.func,
+  style: PropTypes.object,
+  tagStyle: PropTypes.object,
+  laneDraggable: PropTypes.bool,
+  cardDraggable: PropTypes.bool,
+  cardDragClass: PropTypes.string,
+  laneDragClass: PropTypes.string,
+  laneDropClass: PropTypes.string,
+  onCardMoveAcrossLanes: PropTypes.func,
+  orientation: PropTypes.string,
+  cardStyle: PropTypes.object
+};
+
+export default BoardContainer;
--- a/client/src/components/trello-board/controllers/Lane.jsx
+++ b/client/src/components/trello-board/controllers/Lane.jsx
@@ -0,0 +1,408 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import isEqual from "lodash/isEqual";
+import cloneDeep from "lodash/cloneDeep";
+import { v1 } from "uuid";
+
+import Container from "../dnd/Container.jsx";
+import Draggable from "../dnd/Draggable.jsx";
+
+import * as actions from "../../../redux/trello/trello.actions.js";
+
+/**
+ * Lane is a React component that represents a lane in a Trello-like board.
+ * It uses Redux for state management and provides a variety of props to customize its behavior.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Object} props.actions - Redux actions
+ * @param {string} props.id - The unique identifier for the lane
+ * @param {string} props.boardId - The unique identifier for the board
+ * @param {string} props.title - The title of the lane
+ * @param {number} props.index - The index of the lane
+ * @param {Function} props.laneSortFunction - Function to sort the cards in the lane
+ * @param {Object} props.style - The CSS styles to apply to the lane
+ * @param {Object} props.cardStyle - The CSS styles to apply to the cards
+ * @param {Object} props.tagStyle - The CSS styles to apply to the tags
+ * @param {Object} props.titleStyle - The CSS styles to apply to the title
+ * @param {Object} props.labelStyle - The CSS styles to apply to the label
+ * @param {Array} props.cards - The cards in the lane
+ * @param {string} props.label - The label of the lane
+ * @param {boolean} props.draggable - Whether the lane is draggable
+ * @param {boolean} props.collapsibleLanes - Whether the lanes are collapsible
+ * @param {boolean} props.droppable - Whether the lane is droppable
+ * @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
+ * @param {Function} props.onCardClick - Callback function when a card is clicked
+ * @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted
+ * @param {Function} props.onCardDelete - Callback function when a card is deleted
+ * @param {Function} props.onCardAdd - Callback function when a card is added
+ * @param {Function} props.onCardUpdate - Callback function when a card is updated
+ * @param {Function} props.onLaneDelete - Callback function when a lane is deleted
+ * @param {Function} props.onLaneUpdate - Callback function when a lane is updated
+ * @param {Function} props.onLaneClick - Callback function when a lane is clicked
+ * @param {Function} props.onLaneScroll - Callback function when a lane is scrolled
+ * @param {boolean} props.editable - Whether the lane is editable
+ * @param {boolean} props.laneDraggable - Whether the lane is draggable
+ * @param {boolean} props.cardDraggable - Whether the cards are draggable
+ * @param {string} props.cardDragClass - The CSS class to apply when a card is being dragged
+ * @param {string} props.cardDropClass - The CSS class to apply when a card is dropped
+ * @param {boolean} props.canAddLanes - Whether lanes can be added to the board
+ * @param {boolean} props.hideCardDeleteIcon - Whether to hide the card delete icon
+ * @param {Object} props.components - Custom components to use in the lane
+ * @param {Function} props.getCardDetails - Function to get the details of a card
+ * @param {Function} props.handleDragStart - Callback function when a drag starts
+ * @param {Function} props.handleDragEnd - Callback function when a drag ends
+ * @param {string} props.orientation - The orientation of the lane ("horizontal" or "vertical")
+ * @param {string} props.className - The CSS class to apply to the lane
+ * @param {number} props.currentPage - The current page of the lane
+ * @param {Object} props.otherProps - Any other props to pass to the lane
+ * @returns {JSX.Element} A lane in a Trello-like board
+ */
+function Lane({
+  actions,
+  id,
+  boardId,
+  title,
+  index,
+  laneSortFunction,
+  style = {},
+  cardStyle = {},
+  tagStyle = {},
+  titleStyle = {},
+  labelStyle = {},
+  cards,
+  label,
+  draggable = false,
+  collapsibleLanes = false,
+  droppable = true,
+  onCardMoveAcrossLanes = () => {},
+  onCardClick = () => {},
+  onBeforeCardDelete = () => {},
+  onCardDelete = () => {},
+  onCardAdd = () => {},
+  onCardUpdate = () => {},
+  onLaneDelete = () => {},
+  onLaneUpdate = () => {},
+  onLaneClick = () => {},
+  onLaneScroll = () => {},
+  editable = false,
+  laneDraggable = false,
+  cardDraggable = true,
+  cardDragClass,
+  cardDropClass,
+  canAddLanes = false,
+  hideCardDeleteIcon = false,
+  components = {},
+  getCardDetails,
+  handleDragStart = () => {},
+  handleDragEnd = () => {},
+  orientation = "vertical",
+  className,
+  currentPage,
+  ...otherProps
+}) {
+  const [loading, setLoading] = useState(false);
+  const [currentPageFinal, setCurrentPageFinal] = useState(currentPage);
+  const [addCardMode, setAddCardMode] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  const laneRef = useRef(null);
+
+  useEffect(() => {
+    if (!isEqual(cards, currentPageFinal)) {
+      setCurrentPageFinal(currentPage);
+    }
+  }, [cards, currentPage, currentPageFinal]);
+
+  const handleScroll = useCallback(
+    (evt) => {
+      const node = evt.target;
+      const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
+      if (elemScrollPosition < 1 && onLaneScroll && !loading) {
+        const nextPage = currentPageFinal + 1;
+        setLoading(true);
+        onLaneScroll(nextPage, id).then((moreCards) => {
+          if ((moreCards || []).length > 0) {
+            actions.paginateLane({
+              laneId: id,
+              newCards: moreCards,
+              nextPage: nextPage
+            });
+          }
+          setLoading(false);
+        });
+      }
+    },
+    [currentPageFinal, loading, onLaneScroll, id, actions]
+  );
+
+  useEffect(() => {
+    const node = laneRef.current;
+    if (node) {
+      node.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (node) {
+        node.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [handleScroll]);
+
+  const sortCards = (cards, sortFunction) => {
+    if (!cards) return [];
+    if (!sortFunction) return cards;
+    return cards.concat().sort((card1, card2) => sortFunction(card1, card2));
+  };
+
+  const removeCard = (cardId) => {
+    if (onBeforeCardDelete && typeof onBeforeCardDelete === "function") {
+      onBeforeCardDelete(() => {
+        onCardDelete && onCardDelete(cardId, id);
+        actions.removeCard({ laneId: id, cardId: cardId });
+      });
+    } else {
+      onCardDelete && onCardDelete(cardId, id);
+      actions.removeCard({ laneId: id, cardId: cardId });
+    }
+  };
+
+  const handleCardClick = (e, card) => {
+    onCardClick && onCardClick(card.id, card.metadata, card.laneId);
+    e.stopPropagation();
+  };
+
+  const showEditableCard = () => {
+    setAddCardMode(true);
+  };
+
+  const hideEditableCard = () => {
+    setAddCardMode(false);
+  };
+
+  const addNewCard = (params) => {
+    const laneId = id;
+    const newCardId = v1();
+    hideEditableCard();
+    let card = { id: newCardId, ...params };
+    actions.addCard({ laneId, card });
+    onCardAdd(card, laneId);
+  };
+
+  const onDragStart = ({ payload }) => {
+    handleDragStart && handleDragStart(payload.id, payload.laneId);
+  };
+
+  const shouldAcceptDrop = (sourceContainerOptions) => {
+    return droppable && sourceContainerOptions.groupName === groupName;
+  };
+
+  const onDragEnd = (laneId, result) => {
+    const { addedIndex, payload } = result;
+
+    if (isDraggingOver) {
+      setIsDraggingOver(false);
+    }
+
+    if (addedIndex != null) {
+      const newCard = { ...cloneDeep(payload), laneId };
+      const response = handleDragEnd ? handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, newCard) : true;
+      if (response === undefined || !!response) {
+        actions.moveCardAcrossLanes({
+          fromLaneId: payload.laneId,
+          toLaneId: laneId,
+          cardId: payload.id,
+          index: addedIndex
+        });
+        onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex);
+      }
+      return response;
+    }
+  };
+
+  const updateCard = (updatedCard) => {
+    actions.updateCard({ laneId: id, card: updatedCard });
+    onCardUpdate(id, updatedCard);
+  };
+
+  const removeLane = () => {
+    actions.removeLane({ laneId: id });
+    onLaneDelete(id);
+  };
+
+  const updateTitle = (value) => {
+    actions.updateLane({ id, title: value });
+    onLaneUpdate(id, { title: value });
+  };
+
+  const toggleLaneCollapsed = () => {
+    collapsibleLanes && setCollapsed(!collapsed);
+  };
+
+  const groupName = `TrelloBoard${boardId}Lane`;
+
+  const renderDragContainer = (isDraggingOver) => {
+    const stableCards = collapsed ? [] : cards;
+
+    const cardList = sortCards(stableCards, laneSortFunction).map((card, idx) => {
+      const onDeleteCard = () => removeCard(card.id);
+      const cardToRender = (
+        <components.Card
+          key={card.id}
+          index={idx}
+          style={card.style || cardStyle}
+          className="react-trello-card"
+          onDelete={onDeleteCard}
+          onClick={(e) => handleCardClick(e, card)}
+          onChange={(updatedCard) => updateCard(updatedCard)}
+          showDeleteButton={!hideCardDeleteIcon}
+          tagStyle={tagStyle}
+          cardDraggable={cardDraggable}
+          editable={editable}
+          {...card}
+        />
+      );
+      return cardDraggable && (!card.hasOwnProperty("draggable") || card.draggable) ? (
+        <Draggable key={card.id}>{cardToRender}</Draggable>
+      ) : (
+        <span key={card.id}>{cardToRender}</span>
+      );
+    });
+
+    return (
+      <components.ScrollableLane ref={laneRef} isDraggingOver={isDraggingOver}>
+        <Container
+          orientation={orientation === "horizontal" ? "vertical" : "horizontal"}
+          groupName={groupName}
+          dragClass={cardDragClass}
+          dropClass={cardDropClass}
+          onDragStart={onDragStart}
+          onDrop={(e) => onDragEnd(id, e)}
+          onDragEnter={() => setIsDraggingOver(true)}
+          onDragLeave={() => setIsDraggingOver(false)}
+          shouldAcceptDrop={shouldAcceptDrop}
+          getChildPayload={(index) => getCardDetails(id, index)}
+        >
+          {cardList}
+        </Container>
+        {editable && !addCardMode && <components.AddCardLink onClick={showEditableCard} laneId={id} />}
+        {addCardMode && <components.NewCardForm onCancel={hideEditableCard} laneId={id} onAdd={addNewCard} />}
+      </components.ScrollableLane>
+    );
+  };
+
+  const renderHeader = (pickedProps) => {
+    return (
+      <components.LaneHeader
+        {...pickedProps}
+        onDelete={removeLane}
+        onDoubleClick={toggleLaneCollapsed}
+        updateTitle={updateTitle}
+      />
+    );
+  };
+
+  const allClassNames = classNames("react-trello-lane", collapsed ? "lane-collapsed" : "", className || "");
+  const showFooter = collapsibleLanes && cards.length > 0;
+
+  const passedProps = {
+    actions,
+    id,
+    boardId,
+    title,
+    index,
+    laneSortFunction,
+    style,
+    cardStyle,
+    tagStyle,
+    titleStyle,
+    labelStyle,
+    cards,
+    label,
+    draggable,
+    collapsibleLanes,
+    droppable,
+    editable,
+    laneDraggable,
+    cardDraggable,
+    cardDragClass,
+    cardDropClass,
+    canAddLanes,
+    hideCardDeleteIcon,
+    components,
+    getCardDetails,
+    handleDragStart,
+    handleDragEnd,
+    orientation,
+    className,
+    currentPage,
+    ...otherProps
+  };
+
+  return (
+    <components.Section
+      key={id}
+      onClick={() => onLaneClick && onLaneClick(id)}
+      draggable={false}
+      className={allClassNames}
+      orientation={orientation}
+      {...passedProps}
+    >
+      {renderHeader({ id, cards, ...passedProps })}
+      {renderDragContainer(isDraggingOver)}
+      {loading && <components.Loader />}
+      {showFooter && <components.LaneFooter onClick={toggleLaneCollapsed} collapsed={collapsed} />}
+    </components.Section>
+  );
+}
+
+Lane.propTypes = {
+  actions: PropTypes.object,
+  id: PropTypes.string.isRequired,
+  boardId: PropTypes.string,
+  title: PropTypes.node,
+  index: PropTypes.number,
+  laneSortFunction: PropTypes.func,
+  style: PropTypes.object,
+  cardStyle: PropTypes.object,
+  tagStyle: PropTypes.object,
+  titleStyle: PropTypes.object,
+  labelStyle: PropTypes.object,
+  cards: PropTypes.array,
+  label: PropTypes.string,
+  currentPage: PropTypes.number,
+  draggable: PropTypes.bool,
+  collapsibleLanes: PropTypes.bool,
+  droppable: PropTypes.bool,
+  onCardMoveAcrossLanes: PropTypes.func,
+  onCardClick: PropTypes.func,
+  onBeforeCardDelete: PropTypes.func,
+  onCardDelete: PropTypes.func,
+  onCardAdd: PropTypes.func,
+  onCardUpdate: PropTypes.func,
+  onLaneDelete: PropTypes.func,
+  onLaneUpdate: PropTypes.func,
+  onLaneClick: PropTypes.func,
+  onLaneScroll: PropTypes.func,
+  editable: PropTypes.bool,
+  laneDraggable: PropTypes.bool,
+  cardDraggable: PropTypes.bool,
+  cardDragClass: PropTypes.string,
+  cardDropClass: PropTypes.string,
+  canAddLanes: PropTypes.bool,
+  hideCardDeleteIcon: PropTypes.bool,
+  components: PropTypes.object,
+  getCardDetails: PropTypes.func,
+  handleDragStart: PropTypes.func,
+  handleDragEnd: PropTypes.func,
+  orientation: PropTypes.string
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(actions, dispatch)
+});
+
+export default connect(null, mapDispatchToProps)(Lane);
--- a/client/src/components/trello-board/dnd/Container.jsx
+++ b/client/src/components/trello-board/dnd/Container.jsx
@@ -0,0 +1,111 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import container, { dropHandlers } from "../smooth-dnd";
+
+container.dropHandler = dropHandlers.reactDropHandler().handler;
+container.wrapChild = (p) => p; // don't wrap children they will already be wrapped
+
+class Container extends Component {
+  constructor(props) {
+    super(props);
+    this.getContainerOptions = this.getContainerOptions.bind(this);
+    this.setRef = this.setRef.bind(this);
+    this.prevContainer = null;
+  }
+
+  componentDidMount() {
+    this.prevContainer = this.containerDiv;
+    this.container = container(this.containerDiv, this.getContainerOptions());
+  }
+
+  componentWillUnmount() {
+    this.container.dispose();
+    this.container = null;
+  }
+
+  componentDidUpdate() {
+    if (this.containerDiv) {
+      if (this.prevContainer && this.prevContainer !== this.containerDiv) {
+        this.container.dispose();
+        this.container = container(this.containerDiv, this.getContainerOptions());
+        this.prevContainer = this.containerDiv;
+      }
+    }
+  }
+
+  render() {
+    if (this.props.render) {
+      return this.props.render(this.setRef);
+    } else {
+      return (
+        <div style={this.props.style} ref={this.setRef}>
+          {this.props.children}
+        </div>
+      );
+    }
+  }
+
+  setRef(element) {
+    this.containerDiv = element;
+  }
+
+  getContainerOptions() {
+    const functionProps = {};
+    const propKeys = [
+      "onDragStart",
+      "onDragEnd",
+      "onDrop",
+      "getChildPayload",
+      "shouldAnimateDrop",
+      "shouldAcceptDrop",
+      "onDragEnter",
+      "onDragLeave",
+      "render",
+      "onDropReady",
+      "getGhostParent"
+    ];
+
+    propKeys.forEach((key) => {
+      if (this.props[key]) {
+        functionProps[key] = (...p) => this.props[key](...p);
+      }
+    });
+
+    return { ...this.props, ...functionProps };
+  }
+}
+
+Container.propTypes = {
+  behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
+  groupName: PropTypes.string,
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  style: PropTypes.object,
+  dragHandleSelector: PropTypes.string,
+  className: PropTypes.string,
+  nonDragAreaSelector: PropTypes.string,
+  dragBeginDelay: PropTypes.number,
+  animationDuration: PropTypes.number,
+  autoScrollEnabled: PropTypes.string,
+  lockAxis: PropTypes.string,
+  dragClass: PropTypes.string,
+  dropClass: PropTypes.string,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  onDrop: PropTypes.func,
+  getChildPayload: PropTypes.func,
+  shouldAnimateDrop: PropTypes.func,
+  shouldAcceptDrop: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragLeave: PropTypes.func,
+  render: PropTypes.func,
+  getGhostParent: PropTypes.func,
+  removeOnDropOut: PropTypes.bool
+};
+
+Container.defaultProps = {
+  behaviour: "move",
+  orientation: "vertical",
+  className: "reactTrelloBoard"
+};
+
+export default Container;
--- a/client/src/components/trello-board/dnd/Draggable.jsx
+++ b/client/src/components/trello-board/dnd/Draggable.jsx
@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { constants } from "../smooth-dnd";
+const { wrapperClass } = constants;
+
+class Draggable extends Component {
+  render() {
+    const { render, className, children, ...restProps } = this.props;
+
+    try {
+      if (render) {
+        return React.cloneElement(render(), { className: wrapperClass });
+      }
+
+      const clsName = className ? `${className} ` : "";
+      return (
+        <div {...restProps} className={`${clsName}${wrapperClass}`}>
+          {children}
+        </div>
+      );
+    } catch (error) {
+      console.error("Error rendering Draggable component:", error);
+      return null; // Return null if an error occurs to prevent crashing
+    }
+  }
+}
+
+Draggable.propTypes = {
+  render: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default Draggable;
--- a/client/src/components/trello-board/helpers/LaneHelper.js
+++ b/client/src/components/trello-board/helpers/LaneHelper.js
@@ -0,0 +1,118 @@
+import update from "immutability-helper";
+
+const updateLanes = (state, lanes) => update(state, { lanes: { $set: lanes } });
+
+const updateLaneCards = (lane, cards) => update(lane, { cards: { $set: cards } });
+
+const LaneHelper = {
+  initialiseLanes: (state, { lanes }) => {
+    const newLanes = lanes.map((lane) => {
+      lane.currentPage = 1;
+      lane.cards && lane.cards.forEach((c) => (c.laneId = lane.id));
+      return lane;
+    });
+    return updateLanes(state, newLanes);
+  },
+
+  paginateLane: (state, { laneId, newCards, nextPage }) => {
+    const updatedLanes = LaneHelper.appendCardsToLane(state, { laneId: laneId, newCards: newCards });
+    updatedLanes.find((lane) => lane.id === laneId).currentPage = nextPage;
+    return updateLanes(state, updatedLanes);
+  },
+
+  appendCardsToLane: (state, { laneId, newCards, index }) => {
+    const lane = state.lanes.find((lane) => lane.id === laneId);
+    newCards = newCards
+      .map((c) => update(c, { laneId: { $set: laneId } }))
+      .filter((c) => lane.cards.find((card) => card.id === c.id) == null);
+    return state.lanes.map((lane) => {
+      if (lane.id === laneId) {
+        const cardsToUpdate =
+          index !== undefined
+            ? [...lane.cards.slice(0, index), ...newCards, ...lane.cards.slice(index)]
+            : [...lane.cards, ...newCards];
+        return updateLaneCards(lane, cardsToUpdate);
+      } else {
+        return lane;
+      }
+    });
+  },
+
+  appendCardToLane: (state, { laneId, card, index }) => {
+    const newLanes = LaneHelper.appendCardsToLane(state, { laneId: laneId, newCards: [card], index });
+    return updateLanes(state, newLanes);
+  },
+
+  addLane: (state, lane) => {
+    const newLane = { cards: [], ...lane };
+    return updateLanes(state, [...state.lanes, newLane]);
+  },
+
+  updateLane: (state, updatedLane) => {
+    const newLanes = state.lanes.map((lane) => (updatedLane.id === lane.id ? { ...lane, ...updatedLane } : lane));
+    return updateLanes(state, newLanes);
+  },
+
+  removeCardFromLane: (state, { laneId, cardId }) => {
+    const lanes = state.lanes.map((lane) => {
+      if (lane.id === laneId) {
+        const newCards = lane.cards.filter((card) => card.id !== cardId);
+        return updateLaneCards(lane, newCards);
+      } else {
+        return lane;
+      }
+    });
+    return updateLanes(state, lanes);
+  },
+
+  moveCardAcrossLanes: (state, { fromLaneId, toLaneId, cardId, index }) => {
+    let cardToMove = null;
+    const interimLanes = state.lanes.map((lane) => {
+      if (lane.id === fromLaneId) {
+        cardToMove = lane.cards.find((card) => card.id === cardId);
+        const newCards = lane.cards.filter((card) => card.id !== cardId);
+        return updateLaneCards(lane, newCards);
+      } else {
+        return lane;
+      }
+    });
+    return LaneHelper.appendCardToLane(
+      { ...state, lanes: interimLanes },
+      {
+        laneId: toLaneId,
+        card: cardToMove,
+        index: index
+      }
+    );
+  },
+
+  updateCardsForLane: (state, { laneId, cards }) => {
+    const lanes = state.lanes.map((lane) => (lane.id === laneId ? updateLaneCards(lane, cards) : lane));
+    return updateLanes(state, lanes);
+  },
+
+  updateCardForLane: (state, { laneId, card: updatedCard }) => {
+    const lanes = state.lanes.map((lane) => {
+      if (lane.id === laneId) {
+        const cards = lane.cards.map((card) => (card.id === updatedCard.id ? { ...card, ...updatedCard } : card));
+        return updateLaneCards(lane, cards);
+      } else {
+        return lane;
+      }
+    });
+    return updateLanes(state, lanes);
+  },
+
+  moveLane: (state, { oldIndex, newIndex }) => {
+    const laneToMove = state.lanes[oldIndex];
+    const tempState = update(state, { lanes: { $splice: [[oldIndex, 1]] } });
+    return update(tempState, { lanes: { $splice: [[newIndex, 0, laneToMove]] } });
+  },
+
+  removeLane: (state, { laneId }) => {
+    const updatedLanes = state.lanes.filter((lane) => lane.id !== laneId);
+    return updateLanes(state, updatedLanes);
+  }
+};
+
+export default LaneHelper;
--- a/client/src/components/trello-board/index.jsx
+++ b/client/src/components/trello-board/index.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+import Draggable from "./dnd/Draggable.jsx";
+import Container from "./dnd/Container.jsx";
+import BoardContainer from "./controllers/BoardContainer.jsx";
+import Board from "./controllers/Board.jsx";
+import Lane from "./controllers/Lane.jsx";
+import DefaultComponents from "./components";
+
+import widgets from "./widgets/index";
+
+import { StyleSheetManager } from "styled-components";
+import isPropValid from "@emotion/is-prop-valid";
+
+export { Draggable, Container, BoardContainer, Lane, widgets };
+
+export { DefaultComponents as components };
+
+// Enhanced default export using arrow function for simplicity
+const TrelloBoard = ({ components, ...otherProps }) => {
+  return (
+    <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+      <Board components={{ ...DefaultComponents, ...components }} {...otherProps} />
+    </StyleSheetManager>
+  );
+};
+
+const shouldForwardProp = (propName, target) => {
+  if (typeof target === "string") {
+    return isPropValid(propName);
+  }
+  return true;
+};
+
+export default TrelloBoard;
--- a/client/src/components/trello-board/smooth-dnd/index.js
+++ b/client/src/components/trello-board/smooth-dnd/index.js
@@ -0,0 +1,8 @@
+import container from './src/container';
+import * as constants from './src/constants';
+import * as dropHandlers from './src/dropHandlers';
+export default container;
+export {
+	constants,
+	dropHandlers,
+};
--- a/Show More
+++ b/Show More