Add PPC.

# Conflicts:
#	_reference/reportFiltersAndSorters.md

.circleci/config.yml

@@ -59,6 +59,139 @@ jobs:
           to: "s3://imex-online-production/"
           arguments: "--exclude '*.map'"
       - jira/notify
+      
+  rome-api-deploy:
+    docker:
+      - image: "cimg/base:stable"
+    steps:
+      - checkout
+      - eb/setup
+      - run:
+          command: |
+            eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb status --verbose
+            eb deploy
+            eb status
+      - jira/notify
+
+  rome-hasura-migrate:
+    docker:
+      - image: cimg/node:16.15.0
+    parameters:
+      secret:
+        type: string
+        default: $HASURA_PROD_SECRET
+    working_directory: ~/repo/hasura
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Execute migration
+          command: |
+            npm install hasura-cli -g
+            hasura migrate apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata reload --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
+
+  rome-app-build:
+    docker:
+      - image: cimg/node:16.15.0
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-production/"
+      - jira/notify
+
+  test-rome-hasura-migrate:
+    docker:
+      - image: cimg/node:16.15.0
+    parameters:
+      secret:
+        type: string
+        default: $HASURA_ROME_TEST_SECRET
+    working_directory: ~/repo/hasura
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Execute migration
+          command: |
+            npm install hasura-cli -g
+            echo ${HASURA_TEST_SECRET}
+            hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+
+  test-rome-app-build:
+    docker:
+      - image: cimg/node:16.15.0
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-test/"
+      - jira/notify 
+
+  app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-beta/"
+      - jira/notify  
+
+  rome-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-production-beta/"
+      - jira/notify      
 
   test-hasura-migrate:
     docker:
@@ -101,6 +234,49 @@ jobs:
           arguments: "--exclude '*.map'"
       - jira/notify
 
+  test-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-test-beta/"
+      - jira/notify
+
+  rome-test-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-test-beta/"
+      - jira/notify
+
+
   admin-app-build:
     docker:
       - image: cimg/node:16.15.0
@@ -142,20 +318,58 @@ workflows:
           filters:
             branches:
               only: master
+      - app-beta-build:
+          filters:
+            branches:
+              only: master-beta
+      - rome-app-beta-build:
+          filters:
+            branches:
+              only: rome/master-beta
       - hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
               only: master
+      - rome-api-deploy:
+          filters:
+            branches:
+              only: rome/master
+      - rome-app-build:
+          filters:
+            branches:
+              only: rome/master
+      - rome-hasura-migrate:
+          secret: ${HASURA_PROD_SECRET}
+          filters:
+            branches:
+              only: rome/master
       - test-app-build:
           filters:
             branches:
               only: test
+      - rome-test-app-beta-build:
+          filters:
+            branches:
+              only: rome/test-beta
+      - test-app-beta-build:
+          filters:
+            branches:
+              only: test-beta
       - test-hasura-migrate:
           secret: ${HASURA_TEST_SECRET}
           filters:
             branches:
               only: test
+      - test-rome-app-build:
+          filters:
+            branches:
+              only: rome/test
+      - test-rome-hasura-migrate:
+          secret: ${HASURA_ROME_TEST_SECRET}
+          filters:
+            branches:
+              only: rome/test
       #- admin-app-build:
       #filters:
       #branches:

.prettierrc.js

@@ -0,0 +1,16 @@
+exports.default = {
+  printWidth: 120,
+  useTabs: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  semi: true,
+  singleQuote: false,
+  bracketSpacing: true,
+  arrowParens: "always",
+  jsxSingleQuote: false,
+  bracketSameLine: false,
+  endOfLine: "lf",
+  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};

_reference/reportFiltersAndSorters.md

@@ -3,6 +3,15 @@
 This documentation details the schema required for `.filters` files on the report server. It is used to dynamically
 modify the graphQL query and provide the user more power over their reports.
 
+For filters and sorters, valid types include (`type` key in the schema):
+- string (default)
+- number
+- bool or boolean
+- date
+
+## Special Notes
+- When passing the data to the template server, the property filters and sorters is added to the data object and will reflect the filters and sorters the user has selected
+
 ## High level Schema Overview
 
 ```javascript
@@ -36,6 +45,38 @@ const schema = {
 Filters effect the where clause of the graphQL query. They are used to filter the data returned from the server.
 A note on special notation used in the `name` field.
 
+## Reflection
+
+Filters can make use of reflection to pre-fill select boxes, the following is an example of that in the filters file.
+
+```json
+    {
+      "name": "jobs.status",
+      "translation": "jobs.fields.status",
+      "label": "Status",
+      "type": "string",
+      "reflector": {
+        "type": "internal",
+        "name": "special.job_statuses"
+      }
+    },
+```
+
+in this example, a reflector with the type 'internal' (all types at the moment require this, and it is used for future functionality), with a name of `special.job_statuses`
+
+The following cases are available
+
+- `special.job_statuses` - This will reflect the statuses of the jobs table `bodyshop.md_ro_statuses.statuses'`
+- `special.cost_centers` - This will reflect the cost centers `bodyshop.md_responsibility_centers.costs`
+- `special.categories` - This will reflect the categories `bodyshop.md_categories`
+- `special.insurance_companies` - This will reflect the insurance companies `bodyshop.md_ins_cos`'
+- `special.employee_teams` - This will reflect the employee teams `bodyshop.employee_teams`
+- `special.employees` - This will reflect the employees `bodyshop.employees`
+- `special.first_names` - This will reflect the first names `bodyshop.employees`
+- `special.last_names` - This will reflect the last names `bodyshop.employees`
+- `special.referral_sources` - This will reflect the referral sources `bodyshop.md_referral_sources
+- `special.class`- This will reflect the class `bodyshop.md_classes`
+-
 ### Path without brackets, multi level
 
 `"name": "jobs.joblines.mod_lb_hrs",`
@@ -71,8 +112,8 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
 }
 ```
 
-
 ### Path with brackets,top level
+
 `"name": "[jobs].joblines.mod_lb_hrs",`
 This will produce a where clause at the `jobs` level of the graphQL query.
 
@@ -107,14 +148,37 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
 ```
 
 ## Known Caveats
-- Will only support two level of nesting in the graphQL query `jobs.joblines.mod_lb_hrs` vs `[jobs].joblines.mod_lb_hrs` is fine, but `jobs.[joblines.].some_table.mod_lb_hrs` is not.
-- The `dates` object is not yet implemented and will be added in a future release.
-- The type object must be 'string' or 'number' and is case-sensitive.
+
+- Will only support two level of nesting in the graphQL query `jobs.joblines.mod_lb_hrs` vs `[jobs].joblines.mod_lb_hrs`
+  is fine, but `jobs.[joblines.].some_table.mod_lb_hrs` is not.
+- The type object must be 'string' or 'number'  or 'bool' or 'boolean' or 'date' and is case-sensitive.
 - The `translation` key is used to look up the label in the GUI, if it is not found, the `label` key is used.
-- Do not add the ability to filter things that are already filtered as part of the original query, this would be redundant and could cause issues.
+- Do not add the ability to filter things that are already filtered as part of the original query, this would be
+  redundant and could cause issues.
 - Do not add the ability to filter on things like FK constraints, must like the above example.
 
-
 ## Sorters
-- Sorters follow the same schema as filters, however, they do not do square bracket wrapping to indicate level hoisting, a filter added on `job.md_status` would be added at the top level, and a filter added on `jobs.joblines.mod_lb_hrs` would be added at the `joblines` level.
-- Most of the reports currently do sorting on a template level, this will need to change to actually see the results using the sorters.
+
+- Sorters follow the same schema as filters, however, they do not do square bracket wrapping to indicate level hoisting,
+  a filter added on `job.md_status` would be added at the top level, and a filter added on `jobs.joblines.mod_lb_hrs`
+  would be added at the `joblines` level.
+- Most of the reports currently do sorting on a template level, this will need to change to actually see the results
+  using the sorters.
+
+### Default Sorters
+
+- A sorter can be given a default object containing a `order` and `direction` key value. This will be used to sort the report if the user does not select any of the sorters themselves.
+- The `order` key is the order in which the sorters are applied, and the `direction` key is the direction of the sort, either `asc` or `desc`.
+
+```json
+{
+    "name": "jobs.joblines.mod_lb_hrs",
+    "translation": "jobs.joblines.mod_lb_hrs_1",
+    "label": "mod_lb_hrs_1",
+    "type": "number",
+    "default": {
+        "order": 1,
+        "direction": "asc"
+    }
+}
+```

client/.env.development

@@ -1,13 +1,14 @@
 REACT_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
 REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 REACT_APP_GA_CODE=231099835
-REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+REACT_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
 REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
 REACT_APP_CLOUDINARY_API_KEY=957865933348715
 REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+REACT_APP_COUNTRY=USA

client/.env.production

@@ -1,14 +1,13 @@
-GENERATE_SOURCEMAP=true
-REACT_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
-REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
 REACT_APP_GA_CODE=231103507
-REACT_APP_FIREBASE_CONFIG={"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"}
+REACT_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
 REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
 REACT_APP_CLOUDINARY_API_KEY=473322739956866
 REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
-REACT_APP_REPORTS_SERVER_URL=https://reports.imex.online
+REACT_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
+REACT_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
 REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk

client/.env.test

@@ -1,14 +1,14 @@
-REACT_APP_GRAPHQL_ENDPOINT=https://db.test.bodyshop.app/v1/graphql
-REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.bodyshop.app/v1/graphql
-REACT_APP_GA_CODE=231099835
-REACT_APP_FIREBASE_CONFIG={   "apiKey":"AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",   "authDomain":"imex-test.firebaseapp.com",   "projectId":"imex-test",   "storageBucket":"imex-test.appspot.com",   "messagingSenderId":"991923618608",   "appId":"1:991923618608:web:633437569cdad78299bef5",   "measurementId":"G-TW0XLZEH18"}
+REACT_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
+REACT_APP_GA_CODE=231103507
+REACT_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
 REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
 REACT_APP_CLOUDINARY_API_KEY=473322739956866
 REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-REACT_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
-REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+REACT_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
+REACT_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 REACT_APP_IS_TEST=true
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/craco.config.js

@@ -27,7 +27,7 @@ module.exports = {
           lessOptions: {
             modifyVars: {
               ...(process.env.NODE_ENV === "development"
-                ? { "@primary-color": "#a51d1d" }
+                ? { "@primary-color": "#B22234" }
                 : {
                     //"@primary-color": "#1DA57A"
                   }),

client/public/firebase-messaging-sw.js

@@ -28,6 +28,17 @@ switch (this.location.hostname) {
       // measurementId: "${config.measurementId}",
     };
     break;
+  case "romeonline.io":
+    firebaseConfig = {
+      apiKey: "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",
+      authDomain: "rome-prod-1.firebaseapp.com",
+      projectId: "rome-prod-1",
+      storageBucket: "rome-prod-1.appspot.com",
+      messagingSenderId: "147786367145",
+      appId: "1:147786367145:web:9d4cba68071c3f29a8a9b8",
+      measurementId: "G-G8Z9DRHTZS",
+    };
+    break;
   case "imex.online":
   default:
     firebaseConfig = {

client/public/index.html

@@ -2,23 +2,81 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="%PUBLIC_URL%/ro-favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#002366" />
-    <meta name="description" content="ImEX Online" />
+    <meta name="description" content="Rome Online" />
     <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+
+    <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
+
+<call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001 party="LiveChat528346"></call-us-selector>
+
+<!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
+
+<!--<call-us
+
+phonesystem-url=https://rometech.east.3cx.us:5001
+
+style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
+
+id="wp-live-chat-by-3CX"
+
+minimized="true"
+
+animation-style="noanimation"
+
+party="LiveChat528346"
+
+minimized-style="bubbleright"
+
+allow-call="true"
+
+allow-video="false"
+
+allow-soundnotifications="true"
+
+enable-mute="true"
+
+enable-onmobile="true"
+
+offline-enabled="true"
+
+enable="true"
+
+ignore-queueownership="false"
+
+authentication="both"
+
+show-operator-actual-name="true"
+
+aknowledge-received="true"
+
+gdpr-enabled="false"
+
+message-userinfo-format="name"
+
+message-dateformat="both"
+
+lang="browser"
+
+button-icon-type="default"
+
+greeting-visibility="none"
+
+greeting-offline-visibility="none"
+
+chat-delay="2000"
+
+enable-direct-call="true"
+
+enable-ga="false"
+
+></call-us>-->
+
+<script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
+
     <link rel="apple-touch-icon" href="logo192.png" />
-    <script type="text/javascript">
-      window.$crisp = [];
-      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
-      (function () {
-        d = document;
-        s = d.createElement("script");
-        s.src = "https://client.crisp.chat/l.js";
-        s.async = 1;
-        d.getElementsByTagName("head")[0].appendChild(s);
-      })();
-    </script>
     <script>
       !(function () {
         "use strict";
@@ -77,7 +135,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>ImEX Online</title>
+    <title>Rome Online</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "ImEX Online",
-  "name": "ImEX Online",
+  "short_name": "Rome Online",
+  "name": "Rome Online",
   "description": "The ultimate bodyshop management system.",
   "icons": [
     {

client/src/App/App.container.jsx

@@ -28,6 +28,12 @@ function AppContainer() {
         //componentSize="small"
         input={{ autoComplete: "new-password" }}
         locale={enLocale}
+        theme={{
+          token: {
+            colorPrimary: "#326ade",
+            colorInfo: "#326ade"
+          },
+        }}
         form={{
           validateMessages: {
             // eslint-disable-next-line no-template-curly-in-string

client/src/App/App.jsx

@@ -78,9 +78,9 @@ export function App({
     if (currentUser.authorized && bodyshop) {
       client.setAttribute("imexshopid", bodyshop.imexshopid);
 
+      LogRocket.init("rome-online/rome-online");
       if (client.getTreatment("LogRocket_Tracking") === "on") {
-        console.log("LR Start");
-        LogRocket.init("gvfvfw/bodyshopapp");
+        LogRocket.init("rome-online/rome-online");
       }
     }
   }, [bodyshop, client, currentUser.authorized]);
@@ -112,7 +112,7 @@ export function App({
 
   return (
     <Switch>
-      <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
+      <Suspense fallback={<LoadingSpinner />}>
         <ErrorBoundary>
           <Route exact path="/" component={LandingPage} />
         </ErrorBoundary>

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -3,10 +3,22 @@ import { useMutation } from "@apollo/client";
 import { Button, notification, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { DELETE_BILL } from "../../graphql/bills.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 
-export default function BillDeleteButton({ bill, callback }) {
+const mapStateToProps = createStructuredSelector({});
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BillDeleteButton);
+
+export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [deleteBill] = useMutation(DELETE_BILL);
@@ -36,6 +48,10 @@ export default function BillDeleteButton({ bill, callback }) {
 
     if (!!!result.errors) {
       notification["success"]({ message: t("bills.successes.deleted") });
+      insertAuditTrail({
+        jobid: jobid,
+        operation: AuditTrailMapping.billdeleted(bill.invoice_number),
+      });
 
       if (callback && typeof callback === "function") callback(bill.id);
     } else {

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -1,4 +1,5 @@
 import { useApolloClient, useMutation } from "@apollo/client";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space, notification } from "antd";
 import _ from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
@@ -63,9 +64,19 @@ function BillEnterModalContainer({
     "enter_bill_generate_label",
     false
   );
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
   const formValues = useMemo(() => {
     return {
       ...billEnterModal.context.bill,
+      //Added as a part of IO-2436 for capturing parts price changes.
+      billlines: billEnterModal.context?.bill?.billlines?.map((line) => ({
+        ...line,
+        original_actual_price: line.actual_price,
+      })),
       jobid:
         (billEnterModal.context.job && billEnterModal.context.job.id) || null,
       federal_tax_rate:
@@ -99,6 +110,7 @@ function BillEnterModalContainer({
     } = values;
 
     let adjustmentsToInsert = {};
+    let payrollAdjustmentsToInsert = [];
 
     const r1 = await insertBill({
       variables: {
@@ -114,14 +126,33 @@ function BillEnterModalContainer({
                     lbr_adjustment,
                     location: lineLocation,
                     part_type,
+                    create_ppc,
+                    original_actual_price,
                     ...restI
                   } = i;
 
-                  if (deductedfromlbr) {
-                    adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
-                      (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
-                      restI.actual_price / lbr_adjustment.rate;
+                  if (Enhanced_Payroll.treatment === "on") {
+                    if (
+                      deductedfromlbr &&
+                      true //payroll is on
+                    ) {
+                      payrollAdjustmentsToInsert.push({
+                        id: i.joblineid,
+                        convertedtolbr: true,
+                        convertedtolbr_data: {
+                          mod_lb_hrs: lbr_adjustment.mod_lb_hrs * -1,
+                          mod_lbr_ty: lbr_adjustment.mod_lbr_ty,
+                        },
+                      });
+                    }
+                  } else {
+                    if (deductedfromlbr) {
+                      adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
+                        (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
+                        restI.actual_price / lbr_adjustment.rate;
+                    }
                   }
+
                   return {
                     ...restI,
                     deductedfromlbr: deductedfromlbr,
@@ -147,6 +178,20 @@ function BillEnterModalContainer({
       refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
     });
 
+    await Promise.all(
+      payrollAdjustmentsToInsert.map((li) => {
+        return updateJobLines({
+          variables: {
+            lineId: li.id,
+            line: {
+              convertedtolbr: li.convertedtolbr,
+              convertedtolbr_data: li.convertedtolbr_data,
+            },
+          },
+        });
+      })
+    );
+
     const adjKeys = Object.keys(adjustmentsToInsert);
     if (adjKeys.length > 0) {
       //Query the adjustments, merge, and update them.
@@ -255,6 +300,14 @@ function BillEnterModalContainer({
                   location: li.location || location,
                   status:
                     bodyshop.md_order_statuses.default_received || "Received*",
+                  //Added parts price changes.
+                  ...(li.create_ppc &&
+                  li.original_actual_price !== li.actual_price
+                    ? {
+                        act_price_before_ppc: li.original_actual_price,
+                        act_price: li.actual_price,
+                      }
+                    : {}),
                 },
               },
             });
@@ -323,12 +376,12 @@ function BillEnterModalContainer({
     });
 
     if (enterAgain) {
-      form.resetFields();
-      form.resetFields();
+      // form.resetFields();
       form.setFieldsValue({
         ...formValues,
         billlines: [],
       });
+      form.resetFields();
     } else {
       toggleModalVisible();
     }

client/src/components/bill-form/bill-form.component.jsx

@@ -79,19 +79,19 @@ export function BillFormComponent({
       });
   };
 
-  const handleFederalTaxExemptSwitchToggle = (checked) => {
-    // Early gate
-    if (!checked) return;
-    const values = form.getFieldsValue("billlines");
-    // Gate bill lines
-    if (!values?.billlines?.length) return;
+  // const handleFederalTaxExemptSwitchToggle = (checked) => {
+  //   // Early gate
+  //   if (!checked) return;
+  //   const values = form.getFieldsValue("billlines");
+  //   // Gate bill lines
+  //   if (!values?.billlines?.length) return;
 
-    const billlines = values.billlines.map((b) => {
-      b.applicable_taxes.federal = false;
-      return b;
-    });
-    form.setFieldsValue({ billlines });
-  };
+  //   const billlines = values.billlines.map((b) => {
+  //     b.applicable_taxes.federal = false;
+  //     return b;
+  //   });
+  //   form.setFieldsValue({ billlines });
+  // };
 
   useEffect(() => {
     if (job) form.validateFields(["is_credit_memo"]);
@@ -380,13 +380,15 @@ export function BillFormComponent({
         )}
       </LayoutFormRow>
       <LayoutFormRow>
-        <Form.Item
-          span={3}
-          label={t("bills.fields.federal_tax_rate")}
-          name="federal_tax_rate"
-        >
-          <CurrencyInput min={0} disabled={disabled} />
-        </Form.Item>
+        {
+          // <Form.Item
+          //   span={3}
+          //   label={t("bills.fields.federal_tax_rate")}
+          //   name="federal_tax_rate"
+          // >
+          //   <CurrencyInput min={0} disabled={disabled} />
+          // </Form.Item>
+        }
         <Form.Item
           span={3}
           label={t("bills.fields.state_tax_rate")}
@@ -394,22 +396,27 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} disabled={disabled} />
         </Form.Item>
-        <Form.Item
-          span={3}
-          label={t("bills.fields.local_tax_rate")}
-          name="local_tax_rate"
-        >
-          <CurrencyInput min={0} />
-        </Form.Item>
-        {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
-          <Form.Item
-            span={2}
-            label={t("bills.labels.federal_tax_exempt")}
-            name="federal_tax_exempt"
-          >
-            <Switch onChange={handleFederalTaxExemptSwitchToggle} />
-          </Form.Item>
-        ) : null}
+        {
+          //   <Form.Item
+          //     span={3}
+          //     label={t("bills.fields.local_tax_rate")}
+          //     name="local_tax_rate"
+          //   >
+          //     <CurrencyInput min={0} />
+          //   </Form.Item>
+        }
+        {
+          //Removed as a part of the merge to Rome Online. Federal tax not applicable. 
+        //   bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+        //   <Form.Item
+        //     span={2}
+        //     label={t("bills.labels.federal_tax_exempt")}
+        //     name="federal_tax_exempt"
+        //   >
+        //     <Switch onChange={handleFederalTaxExemptSwitchToggle} />
+        //   </Form.Item>
+        // ) : null
+      }
         <Form.Item shouldUpdate span={13}>
           {() => {
             const values = form.getFieldsValue([
@@ -435,21 +442,25 @@ export function BillFormComponent({
                       value={totals.subtotal.toFormat()}
                       precision={2}
                     />
-                    <Statistic
-                      title={t("bills.labels.federal_tax")}
-                      value={totals.federalTax.toFormat()}
-                      precision={2}
-                    />
+                    {
+                      // <Statistic
+                      //   title={t("bills.labels.federal_tax")}
+                      //   value={totals.federalTax.toFormat()}
+                      //   precision={2}
+                      // />
+                    }
                     <Statistic
                       title={t("bills.labels.state_tax")}
                       value={totals.stateTax.toFormat()}
                       precision={2}
                     />
-                    <Statistic
-                      title={t("bills.labels.local_tax")}
-                      value={totals.localTax.toFormat()}
-                      precision={2}
-                    />
+                    {
+                      // <Statistic
+                      //   title={t("bills.labels.local_tax")}
+                      //   value={totals.localTax.toFormat()}
+                      //   precision={2}
+                      // />
+                    }
                     <Statistic
                       title={t("bills.labels.entered_total")}
                       value={totals.enteredTotal.toFormat()}

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -2,6 +2,7 @@ import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
   Button,
+  Checkbox,
   Form,
   Input,
   InputNumber,
@@ -46,6 +47,13 @@ export function BillEnterModalLinesComponent({
     {},
     bodyshop && bodyshop.imexshopid
   );
+
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
+
   const columns = (remove) => {
     return [
       {
@@ -94,6 +102,7 @@ export function BillEnterModalLinesComponent({
                         line_desc: opt.line_desc,
                         quantity: opt.part_qty || 1,
                         actual_price: opt.cost,
+                        original_actual_price: opt.cost,
                         cost_center: opt.part_type
                           ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
                             ? opt.part_type !== "PAE"
@@ -220,6 +229,43 @@ export function BillEnterModalLinesComponent({
             }}
           />
         ),
+        additional: (record, index) => (
+          <Form.Item
+            dependencies={["billlines", record.name, "actual_price"]}
+            noStyle
+          >
+            {() => {
+              const billLine = getFieldValue(["billlines", record.name]);
+              const jobLine = lineData.find(
+                (line) => line.id === billLine?.joblineid
+              );
+
+              if (
+                !billEdit &&
+                billLine &&
+                jobLine &&
+                billLine?.actual_price !== jobLine?.act_price
+              ) {
+                return (
+                  <Space size="small">
+                    <Form.Item
+                      noStyle
+                      label={t("joblines.fields.create_ppc")}
+                      key={`${index}ppc`}
+                      valuePropName="checked"
+                      name={[record.name, "create_ppc"]}
+                    >
+                      <Checkbox />
+                    </Form.Item>
+                    {t("joblines.fields.create_ppc")}
+                  </Space>
+                );
+              } else {
+                return null;
+              }
+            }}
+          </Form.Item>
+        ),
       },
       {
         title: t("billlines.fields.actual_cost"),
@@ -361,7 +407,7 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => <Switch disabled={disabled} />,
         additional: (record, index) => (
-          <Form.Item shouldUpdate style={{ display: "inline-block" }}>
+          <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
               const price = getFieldValue([
                 "billlines",
@@ -376,12 +422,31 @@ export function BillEnterModalLinesComponent({
                 "rate",
               ]);
 
+              const billline = getFieldValue(["billlines", record.name]);
+
+              const jobline = lineData.find(
+                (line) => line.id === billline?.joblineid
+              );
+
+              const employeeTeamName = bodyshop.employee_teams.find(
+                (team) => team.id === jobline?.assigned_team
+              );
+
               if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
                 return (
                   <div>
+                    <Space>
+                      {t("joblines.fields.assigned_team", {
+                        name: employeeTeamName?.name,
+                      })}
+                      {`${jobline.mod_lb_hrs} units/${t(
+                        `joblines.fields.lbr_types.${jobline.mod_lbr_ty}`
+                      )}`}
+                    </Space>
                     <Form.Item
                       label={t("joblines.fields.mod_lbr_ty")}
                       key={`${index}modlbrty`}
+                      initialValue={jobline ? jobline.mod_lbr_ty : null}
                       rules={[
                         {
                           required: true,
@@ -435,22 +500,44 @@ export function BillEnterModalLinesComponent({
                         </Select.Option>
                       </Select>
                     </Form.Item>
-                    <Form.Item
-                      label={t("jobs.labels.adjustmentrate")}
-                      name={[record.name, "lbr_adjustment", "rate"]}
-                      initialValue={bodyshop.default_adjustment_rate}
-                      rules={[
-                        {
-                          required: true,
-                          //message: t("general.validation.required"),
-                        },
-                      ]}
-                    >
-                      <InputNumber precision={2} min={0.01} />
-                    </Form.Item>
-                    {price &&
-                      adjustmentRate &&
-                      `${(price / adjustmentRate).toFixed(1)} hrs`}
+                    {Enhanced_Payroll.treatment === "on" ? (
+                      <Form.Item
+                        label={t("billlines.labels.mod_lbr_adjustment")}
+                        name={[record.name, "lbr_adjustment", "mod_lb_hrs"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <InputNumber
+                          precision={5}
+                          min={0.01}
+                          max={jobline ? jobline.mod_lb_hrs : 0}
+                        />
+                      </Form.Item>
+                    ) : (
+                      <Form.Item
+                        label={t("jobs.labels.adjustmentrate")}
+                        name={[record.name, "lbr_adjustment", "rate"]}
+                        initialValue={bodyshop.default_adjustment_rate}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <InputNumber precision={2} min={0.01} />
+                      </Form.Item>
+                    )}
+
+                    <Space>
+                      {price &&
+                        adjustmentRate &&
+                        `${(price / adjustmentRate).toFixed(1)} hrs`}
+                    </Space>
                   </div>
                 );
               return <></>;
@@ -458,22 +545,21 @@ export function BillEnterModalLinesComponent({
           </Form.Item>
         ),
       },
-      {
-        title: t("billlines.fields.federal_tax_applicable"),
-        dataIndex: "applicable_taxes.federal",
-        editable: true,
+      // {
+      //   title: t("billlines.fields.federal_tax_applicable"),
+      //   dataIndex: "applicable_taxes.federal",
+      //   editable: true,
 
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}fedtax`,
-            valuePropName: "checked",
-            initialValue:
-              form.getFieldValue("federal_tax_exempt") === true ? false : true,
-            name: [field.name, "applicable_taxes", "federal"],
-          };
-        },
-        formInput: (record, index) => <Switch disabled={disabled} />,
-      },
+      //   formItemProps: (field) => {
+      //     return {
+      //       key: `${field.index}fedtax`,
+      //       valuePropName: "checked",
+      //       //  initialValue: true,
+      //       name: [field.name, "applicable_taxes", "federal"],
+      //     };
+      //   },
+      //   formInput: (record, index) => <Switch disabled={disabled} />,
+      // },
       {
         title: t("billlines.fields.state_tax_applicable"),
         dataIndex: "applicable_taxes.state",
@@ -488,20 +574,20 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => <Switch disabled={disabled} />,
       },
-      {
-        title: t("billlines.fields.local_tax_applicable"),
-        dataIndex: "applicable_taxes.local",
-        editable: true,
+      // {
+      //   title: t("billlines.fields.local_tax_applicable"),
+      //   dataIndex: "applicable_taxes.local",
+      //   editable: true,
 
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}localtax`,
-            valuePropName: "checked",
-            name: [field.name, "applicable_taxes", "local"],
-          };
-        },
-        formInput: (record, index) => <Switch disabled={disabled} />,
-      },
+      //   formItemProps: (field) => {
+      //     return {
+      //       key: `${field.index}localtax`,
+      //       valuePropName: "checked",
+      //       name: [field.name, "applicable_taxes", "local"],
+      //     };
+      //   },
+      //   formInput: (record, index) => <Switch disabled={disabled} />,
+      // },
       {
         title: t("general.labels.actions"),
 
@@ -626,7 +712,7 @@ const EditableCell = ({
   if (additional)
     return (
       <td {...restProps}>
-        <Space size="small">
+        <div size="small">
           <Form.Item
             name={dataIndex}
             labelCol={{ span: 0 }}
@@ -635,7 +721,7 @@ const EditableCell = ({
             {(formInput && formInput(record, record.name)) || children}
           </Form.Item>
           {additional && additional(record, record.name)}
-        </Space>
+        </div>
       </td>
     );
   if (wrapper)

client/src/components/bill-form/bill-form.totals.utility.js

@@ -19,14 +19,14 @@ export const CalculateBillTotal = (invoice) => {
       }).multiply(i.quantity || 1);
 
       subtotal = subtotal.add(itemTotal);
-      if (i.applicable_taxes.federal) {
+      if (i.applicable_taxes?.federal) {
         federalTax = federalTax.add(
           itemTotal.percentage(federal_tax_rate || 0)
         );
       }
-      if (i.applicable_taxes.state)
+      if (i.applicable_taxes?.state)
         stateTax = stateTax.add(itemTotal.percentage(state_tax_rate || 0));
-      if (i.applicable_taxes.local)
+      if (i.applicable_taxes?.local)
         localTax = localTax.add(itemTotal.percentage(local_tax_rate || 0));
     }
   });

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -63,6 +63,12 @@ const BillLineSearchSelect = (
                   item.oem_partno ? ` - ${item.oem_partno}` : ""
                 }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
               </span>
+              {item.act_price === 0 && item.mod_lb_hrs > 0 && (
+                <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)}`

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -9,8 +9,8 @@ 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, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort, dateSort } from "../../utils/sorters";
 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";
@@ -58,7 +58,7 @@ export function BillsListTableComponent({
           <EditFilled />
         </Button>
       )}
-      <BillDeleteButton bill={record} />
+      <BillDeleteButton bill={record} jobid={job.id} />
       <BillDetailEditReturnComponent
         data={{ bills_by_pk: { ...record, jobid: job.id } }}
         disabled={

client/src/components/contract-form/contract-form.component.jsx

@@ -68,6 +68,30 @@ export default function ContractFormComponent({
             <FormDateTimePicker />
           </Form.Item>
         )}
+        {create && (
+          <Form.Item
+            shouldUpdate={(p, c) => p.scheduledreturn !== c.scheduledreturn}
+          >
+            {() => {
+              const insuranceOver =
+                selectedCar &&
+                selectedCar.insuranceexpires &&
+                moment(selectedCar.insuranceexpires)
+                  .endOf("day")
+                  .isBefore(moment(form.getFieldValue("scheduledreturn")));
+              if (insuranceOver)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.insuranceexpired")}
+                    </span>
+                  </Space>
+                );
+              return <></>;
+            }}
+          </Form.Item>
+        )}
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
@@ -90,16 +114,17 @@ export default function ContractFormComponent({
           >
             {() => {
               const mileageOver =
-                selectedCar &&
-                selectedCar.nextservicekm <= form.getFieldValue("kmstart");
-
+                selectedCar && selectedCar.nextservicekm
+                  ? selectedCar.nextservicekm <= form.getFieldValue("kmstart")
+                  : false;
               const dueForService =
                 selectedCar &&
                 selectedCar.nextservicedate &&
-                moment(selectedCar.nextservicedate).isBefore(
-                  moment(form.getFieldValue("scheduledreturn"))
-                );
-
+                moment(selectedCar.nextservicedate)
+                  .endOf("day")
+                  .isSameOrBefore(
+                    moment(form.getFieldValue("scheduledreturn"))
+                  );
               if (mileageOver || dueForService)
                 return (
                   <Space direction="vertical" style={{ color: "tomato" }}>
@@ -117,7 +142,6 @@ export default function ContractFormComponent({
                     </span>
                   </Space>
                 );
-
               return <></>;
             }}
           </Form.Item>

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -17,13 +17,18 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" },
   });
   const [searchText, setSearchText] = useState("");
+  const [filter, setFilter] = useLocalStorage(
+    "filter_courtesy_cars_list",
+    null
+  );
   const { t } = useTranslation();
 
   const columns = [
@@ -50,6 +55,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       dataIndex: "status",
       key: "status",
       sorter: (a, b) => alphaSort(a.status, b.status),
+      filteredValue: filter?.status || null,
       filters: [
         {
           text: t("courtesycars.status.in"),
@@ -72,7 +78,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => {
-        const { nextservicedate, nextservicekm, mileage } = record;
+        const { nextservicedate, nextservicekm, mileage, insuranceexpires } =
+          record;
 
         const mileageOver = nextservicekm ? nextservicekm <= mileage : false;
 
@@ -80,11 +87,25 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           nextservicedate &&
           moment(nextservicedate).endOf("day").isSameOrBefore(moment());
 
+        const insuranceOver =
+          insuranceexpires &&
+          moment(insuranceexpires).endOf("day").isBefore(moment());
+
         return (
           <Space>
             {t(record.status)}
-            {(mileageOver || dueForService) && (
-              <Tooltip title={t("contracts.labels.cardueforservice")}>
+            {(mileageOver || dueForService || insuranceOver) && (
+              <Tooltip
+                title={
+                  (mileageOver || dueForService) && insuranceOver
+                    ? t("contracts.labels.insuranceexpired") +
+                      " / " +
+                      t("contracts.labels.cardueforservice")
+                    : insuranceOver
+                    ? t("contracts.labels.insuranceexpired")
+                    : t("contracts.labels.cardueforservice")
+                }
+              >
                 <WarningFilled style={{ color: "tomato" }} />
               </Tooltip>
             )}
@@ -97,6 +118,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       dataIndex: "readiness",
       key: "readiness",
       sorter: (a, b) => alphaSort(a.readiness, b.readiness),
+      filteredValue: filter?.readiness || null,
       filters: [
         {
           text: t("courtesycars.readiness.ready"),
@@ -212,7 +234,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    setState({ ...state, sortedInfo: sorter });
+    setFilter(filters);
   };
 
   const tableData = searchText

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -3,21 +3,32 @@ import {
   ExclamationCircleFilled,
   PauseCircleOutlined,
 } from "@ant-design/icons";
-import { Card, Space, Table, Tooltip } from "antd";
+import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { TimeFormatter } from "../../../utils/DateFormatter";
+import { onlyUnique } from "../../../utils/arrayHelper";
+import { alphaSort, dateSort } from "../../../utils/sorters";
+import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
-import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
-import {pageLimit} from "../../../utils/config";
 
 export default function DashboardScheduledInToday({ data, ...cardProps }) {
   const { t } = useTranslation();
   const [state, setState] = useState({
     sortedInfo: {},
+    filteredInfo: {},
   });
+  const [isTvModeScheduledIn, setIsTvModeScheduledIn] = useLocalStorage(
+    "isTvModeScheduledIn",
+    false
+  );
+
   if (!data) return null;
   if (!data.scheduled_in_today)
     return <DashboardRefreshRequired {...cardProps} />;
@@ -31,6 +42,12 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         alt_transport: item.job.alt_transport,
         clm_no: item.job.clm_no,
         jobid: item.job.jobid,
+        joblines_body: item.job.joblines
+          .filter((l) => l.mod_lbr_ty !== "LAR")
+          .reduce((acc, val) => acc + val.mod_lb_hrs, 0),
+        joblines_ref: item.job.joblines
+          .filter((l) => l.mod_lbr_ty === "LAR")
+          .reduce((acc, val) => acc + val.mod_lb_hrs, 0),
         ins_co_nm: item.job.ins_co_nm,
         iouparent: item.job.iouparent,
         ownerid: item.job.ownerid,
@@ -49,7 +66,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         v_vin: item.job.v_vin,
         vehicleid: item.job.vehicleid,
         note: item.note,
-        start: moment(item.start).format("hh:mm a"),
+        start: item.start,
         title: item.title,
       };
       appt.push(i);
@@ -59,11 +76,192 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
     return new moment(a.start) - new moment(b.start);
   });
 
-  const columns = [
+  const tvFontSize = 16;
+  const tvFontWeight = "bold";
+
+  const tvColumns = [
+    {
+      title: t("appointments.fields.time"),
+      dataIndex: "start",
+      key: "start",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.start, b.start),
+      sortOrder:
+        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          <TimeFormatter>{record.start}</TimeFormatter>
+        </span>
+      ),
+    },
     {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {record.ro_number || t("general.labels.na")}
+              {record.production_vars && record.production_vars.alert ? (
+                <ExclamationCircleFilled className="production-alert" />
+              ) : null}
+              {record.suspended && (
+                <PauseCircleOutlined style={{ color: "orangered" }} />
+              )}
+              {record.iouparent && (
+                <Tooltip title={t("jobs.labels.iou")}>
+                  <BranchesOutlined style={{ color: "orangered" }} />
+                </Tooltip>
+              )}
+            </span>
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              <OwnerNameDisplay ownerObject={record} />
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                record.v_model_desc || ""
+              }`}
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      },
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
+      filters:
+        (appt &&
+          appt
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Alt. Transport",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport),
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.alt_transport}
+        </span>
+      ),
+    },
+    {
+      title: t("jobs.fields.lab"),
+      dataIndex: "joblines_body",
+      key: "joblines_body",
+      sorter: (a, b) => a.joblines_body - b.joblines_body,
+      sortOrder:
+        state.sortedInfo.columnKey === "joblines_body" &&
+        state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_body.toFixed(1)}
+        </span>
+      ),
+    },
+    {
+      title: t("jobs.fields.lar"),
+      dataIndex: "joblines_ref",
+      key: "joblines_ref",
+      sorter: (a, b) => a.joblines_ref - b.joblines_ref,
+      sortOrder:
+        state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_ref.toFixed(1)}
+        </span>
+      ),
+    },
+  ];
+
+  const columns = [
+    {
+      title: t("appointments.fields.time"),
+      dataIndex: "start",
+      key: "start",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.start, b.start),
+      sortOrder:
+        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
+      render: (text, record) => <TimeFormatter>{record.start}</TimeFormatter>,
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) => (
         <Link
           to={"/manage/jobs/" + record.jobid}
@@ -91,7 +289,10 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-      responsive: ["md"],
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
         return record.ownerid ? (
           <Link
@@ -108,23 +309,16 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       },
     },
     {
-      title: t("jobs.fields.ownr_ph1"),
-      dataIndex: "ownr_ph1",
-      key: "ownr_ph1",
+      title: t("dashboard.labels.phone"),
+      dataIndex: "ownr_ph",
+      key: "ownr_ph",
       ellipsis: true,
       responsive: ["md"],
       render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
-      ),
-    },
-    {
-      title: t("jobs.fields.ownr_ph2"),
-      dataIndex: "ownr_ph2",
-      key: "ownr_ph2",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        <Space size="small" wrap>
+          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        </Space>
       ),
     },
     {
@@ -134,7 +328,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       ellipsis: true,
       responsive: ["md"],
       render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid} />
+        <a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
       ),
     },
     {
@@ -142,6 +336,15 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       dataIndex: "vehicle",
       key: "vehicle",
       ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
       render: (text, record) => {
         return record.vehicleid ? (
           <Link
@@ -165,43 +368,80 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       key: "ins_co_nm",
       ellipsis: true,
       responsive: ["md"],
-    },
-    {
-      title: t("appointments.fields.time"),
-      dataIndex: "start",
-      key: "start",
-      ellipsis: true,
-      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder:
+        state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
+      filters:
+        (appt &&
+          appt
+            .map((j) => j.ins_co_nm)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Ins. Co.*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.ins_co_nm),
     },
     {
       title: t("appointments.fields.alt_transport"),
       dataIndex: "alt_transport",
       key: "alt_transport",
       ellipsis: true,
-      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
+      filters:
+        (appt &&
+          appt
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Alt. Transport",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport),
     },
   ];
 
-  const handleTableChange = (sorter) => {
-    setState({ ...state, sortedInfo: sorter });
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
   return (
     <Card
-      title={t("dashboard.titles.scheduledintoday", {
+      title={t("dashboard.titles.scheduledindate", {
         date: moment().startOf("day").format("MM/DD/YYYY"),
       })}
+      extra={
+        <Space>
+          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
+          <Switch
+            onClick={() => setIsTvModeScheduledIn(!isTvModeScheduledIn)}
+            defaultChecked={isTvModeScheduledIn}
+          />
+        </Space>
+      }
       {...cardProps}
     >
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: pageLimit }}
-          columns={columns}
+          pagination={false}
+          columns={isTvModeScheduledIn ? tvColumns : columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}
           dataSource={appt}
+          size={isTvModeScheduledIn ? "small" : "middle"}
         />
       </div>
     </Card>
@@ -220,6 +460,10 @@ export const DashboardScheduledInTodayGql = `
       alt_transport
       clm_no
       jobid: id
+      joblines(where: {removed: {_eq: false}}) {
+        mod_lb_hrs
+        mod_lbr_ty
+      }
       ins_co_nm
       iouparent
       ownerid

client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx

@@ -3,37 +3,272 @@ import {
   ExclamationCircleFilled,
   PauseCircleOutlined,
 } from "@ant-design/icons";
-import { Card, Space, Table, Tooltip } from "antd";
+import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { TimeFormatter } from "../../../utils/DateFormatter";
+import { onlyUnique } from "../../../utils/arrayHelper";
+import { alphaSort, dateSort } from "../../../utils/sorters";
+import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
-import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
-import {pageLimit} from "../../../utils/config";
 
 export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   const { t } = useTranslation();
   const [state, setState] = useState({
     sortedInfo: {},
+    filteredInfo: {},
   });
+  const [isTvModeScheduledOut, setIsTvModeScheduledOut] = useLocalStorage(
+    "isTvModeScheduledOut",
+    false
+  );
+
   if (!data) return null;
   if (!data.scheduled_out_today)
     return <DashboardRefreshRequired {...cardProps} />;
 
   data.scheduled_out_today.forEach((item) => {
-    item.scheduled_completion= moment(item.scheduled_completion).format("hh:mm a")
+    item.joblines_body = item.joblines
+      ? item.joblines
+          .filter((l) => l.mod_lbr_ty !== "LAR")
+          .reduce((acc, val) => acc + val.mod_lb_hrs, 0)
+      : 0;
+    item.joblines_ref = item.joblines
+      ? item.joblines
+          .filter((l) => l.mod_lbr_ty === "LAR")
+          .reduce((acc, val) => acc + val.mod_lb_hrs, 0)
+      : 0;
   });
   data.scheduled_out_today.sort(function (a, b) {
     return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
   });
 
-  const columns = [
+  const tvFontSize = 18;
+  const tvFontWeight = "bold";
+
+  const tvColumns = [
+    {
+      title: t("jobs.fields.scheduled_completion"),
+      dataIndex: "scheduled_completion",
+      key: "scheduled_completion",
+      ellipsis: true,
+      sorter: (a, b) =>
+        dateSort(a.scheduled_completion, b.scheduled_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "scheduled_completion" &&
+        state.sortedInfo.order,
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          <TimeFormatter>{record.scheduled_completion}</TimeFormatter>
+        </span>
+      ),
+    },
     {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {record.ro_number || t("general.labels.na")}
+              {record.production_vars && record.production_vars.alert ? (
+                <ExclamationCircleFilled className="production-alert" />
+              ) : null}
+              {record.suspended && (
+                <PauseCircleOutlined style={{ color: "orangered" }} />
+              )}
+              {record.iouparent && (
+                <Tooltip title={t("jobs.labels.iou")}>
+                  <BranchesOutlined style={{ color: "orangered" }} />
+                </Tooltip>
+              )}
+            </span>
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              <OwnerNameDisplay ownerObject={record} />
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                record.v_model_desc || ""
+              }`}
+            </span>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      },
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
+      filters:
+        (data.scheduled_out_today &&
+          data.scheduled_out_today
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Alt. Transport*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport),
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.alt_transport}
+        </span>
+      ),
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      filters:
+        (data.scheduled_out_today &&
+          data.scheduled_out_today
+            .map((j) => j.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.status}
+        </span>
+      ),
+    },
+    {
+      title: t("jobs.fields.lab"),
+      dataIndex: "joblines_body",
+      key: "joblines_body",
+      sorter: (a, b) => a.joblines_body - b.joblines_body,
+      sortOrder:
+        state.sortedInfo.columnKey === "joblines_body" &&
+        state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_body.toFixed(1)}
+        </span>
+      ),
+    },
+    {
+      title: t("jobs.fields.lar"),
+      dataIndex: "joblines_ref",
+      key: "joblines_ref",
+      sorter: (a, b) => a.joblines_ref - b.joblines_ref,
+      sortOrder:
+        state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_ref.toFixed(1)}
+        </span>
+      ),
+    },
+  ];
+
+  const columns = [
+    {
+      title: t("jobs.fields.scheduled_completion"),
+      dataIndex: "scheduled_completion",
+      key: "scheduled_completion",
+      ellipsis: true,
+      sorter: (a, b) =>
+        dateSort(a.scheduled_completion, b.scheduled_completion),
+      sortOrder:
+        state.sortedInfo.columnKey === "scheduled_completion" &&
+        state.sortedInfo.order,
+      render: (text, record) => (
+        <TimeFormatter>{record.scheduled_completion}</TimeFormatter>
+      ),
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
       render: (text, record) => (
         <Link
           to={"/manage/jobs/" + record.jobid}
@@ -61,7 +296,10 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-      responsive: ["md"],
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
         return record.ownerid ? (
           <Link
@@ -78,23 +316,16 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       },
     },
     {
-      title: t("jobs.fields.ownr_ph1"),
-      dataIndex: "ownr_ph1",
-      key: "ownr_ph1",
+      title: t("dashboard.labels.phone"),
+      dataIndex: "ownr_ph",
+      key: "ownr_ph",
       ellipsis: true,
       responsive: ["md"],
       render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
-      ),
-    },
-    {
-      title: t("jobs.fields.ownr_ph2"),
-      dataIndex: "ownr_ph2",
-      key: "ownr_ph2",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        <Space size="small" wrap>
+          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        </Space>
       ),
     },
     {
@@ -104,7 +335,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       ellipsis: true,
       responsive: ["md"],
       render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid} />
+        <a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
       ),
     },
     {
@@ -112,6 +343,15 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       dataIndex: "vehicle",
       key: "vehicle",
       ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
       render: (text, record) => {
         return record.vehicleid ? (
           <Link
@@ -135,43 +375,80 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       key: "ins_co_nm",
       ellipsis: true,
       responsive: ["md"],
-    },
-    {
-      title: t("jobs.fields.scheduled_completion"),
-      dataIndex: "scheduled_completion",
-      key: "scheduled_completion",
-      ellipsis: true,
-      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder:
+        state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
+      filters:
+        (data.scheduled_out_today &&
+          data.scheduled_out_today
+            .map((j) => j.ins_co_nm)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Ins. Co.*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.ins_co_nm),
     },
     {
       title: t("appointments.fields.alt_transport"),
       dataIndex: "alt_transport",
       key: "alt_transport",
       ellipsis: true,
-      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
+      filters:
+        (data.scheduled_out_today &&
+          data.scheduled_out_today
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Alt. Transport*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.alt_transport),
     },
   ];
 
-  const handleTableChange = (sorter) => {
-    setState({ ...state, sortedInfo: sorter });
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
   return (
     <Card
-      title={t("dashboard.titles.scheduledouttoday", {
+      title={t("dashboard.titles.scheduledoutdate", {
         date: moment().startOf("day").format("MM/DD/YYYY"),
       })}
+      extra={
+        <Space>
+          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
+          <Switch
+            onClick={() => setIsTvModeScheduledOut(!isTvModeScheduledOut)}
+            defaultChecked={isTvModeScheduledOut}
+          />
+        </Space>
+      }
       {...cardProps}
     >
       <div style={{ height: "100%" }}>
         <Table
           onChange={handleTableChange}
-          pagination={{ position: "top", defaultPageSize: pageLimit }}
-          columns={columns}
+          pagination={false}
+          columns={isTvModeScheduledOut ? tvColumns : columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}
           dataSource={data.scheduled_out_today}
+          size={isTvModeScheduledOut ? "small" : "middle"}
         />
       </div>
     </Card>
@@ -188,6 +465,10 @@ export const DashboardScheduledOutTodayGql = `
       alt_transport
       clm_no
       jobid: id
+      joblines(where: {removed: {_eq: false}}) {
+        mod_lb_hrs
+        mod_lbr_ty
+      }
       ins_co_nm
       iouparent
       ownerid
@@ -200,6 +481,7 @@ export const DashboardScheduledOutTodayGql = `
       production_vars
       ro_number
       scheduled_completion
+      status
       suspended
       v_make_desc
       v_model_desc

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -275,26 +275,22 @@ const componentList = {
     h: 2,
   },
   ScheduleInToday: {
-    label: i18next.t("dashboard.titles.scheduledintoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
-    }),
+    label: i18next.t("dashboard.titles.scheduledintoday"),
     component: DashboardScheduledInToday,
     gqlFragment: DashboardScheduledInTodayGql,
-    minW: 10,
+    minW: 6,
     minH: 2,
     w: 10,
-    h: 2,
+    h: 3,
   },
   ScheduleOutToday: {
-    label: i18next.t("dashboard.titles.scheduledouttoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
-    }),
+    label: i18next.t("dashboard.titles.scheduledouttoday"),
     component: DashboardScheduledOutToday,
     gqlFragment: DashboardScheduledOutTodayGql,
-    minW: 10,
+    minW: 6,
     minH: 2,
     w: 10,
-    h: 2,
+    h: 3,
   },
 };
 
@@ -306,8 +302,7 @@ const createDashboardQuery = (state) => {
       .map((item, index) => componentList[item.i].gqlFragment || "")
       .join("");
   return gql`
-    query QUERY_DASHBOARD_DETAILS {
-         ${componentBasedAdditions || ""}
+    query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""} 
       monthly_sales: jobs(where: {_and: [
         { voided: {_eq: false}},
         {date_invoiced: {_gte: "${moment()
@@ -317,11 +312,11 @@ const createDashboardQuery = (state) => {
     .endOf("month")
     .endOf("day")
     .toISOString()}"}}]}) {
-    id
-    ro_number
-    date_invoiced
-    job_totals
-          rate_la1
+      id
+      ro_number
+      date_invoiced
+      job_totals
+      rate_la1
       rate_la2
       rate_la3
       rate_la4
@@ -344,43 +339,42 @@ const createDashboardQuery = (state) => {
       rate_mapa
       rate_mash
       rate_matd
-    joblines(where: { removed: { _eq: false } }) {
+      joblines(where: { removed: { _eq: false } }) {
         id
         mod_lbr_ty
         mod_lb_hrs
         act_price
         part_qty
         part_type
+      }
     }
-  }
-      production_jobs: jobs(where: { inproduction: { _eq: true } }) {
+    production_jobs: jobs(where: { inproduction: { _eq: true } }) {
+      id
+      ro_number
+      ins_co_nm
+      job_totals
+      joblines(where: { removed: { _eq: false } }) {
         id
-        ro_number
-        ins_co_nm
-        job_totals
-        joblines(where: { removed: { _eq: false } }) {
-          id
-          mod_lbr_ty
-          mod_lb_hrs
-          act_price
-          part_qty
-          part_type
-        }
-        labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
-          aggregate {
-            sum {
-              mod_lb_hrs
-            }
+        mod_lbr_ty
+        mod_lb_hrs
+        act_price
+        part_qty
+        part_type
+      }
+      labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
+        aggregate {
+          sum {
+            mod_lb_hrs
           }
         }
-        larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
-          aggregate {
-            sum {
-              mod_lb_hrs
-            }
+      }
+      larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
+        aggregate {
+          sum {
+            mod_lb_hrs
           }
         }
       }
     }
-  `;
+  }`;
 };

client/src/components/dashboard-grid/dashboard-grid.styles.scss

@@ -128,7 +128,7 @@
   height: 100%;
   width: 100%;
   .ant-card-body {
-    height: 80%;
+    height: calc(100% - 2rem);
     width: 100%;
     // //  background-color: red;
     // height: 90%;

client/src/components/dms-cdk-makes/dms-cdk-makes.refetch.component.jsx

@@ -21,7 +21,13 @@ export function DmsCdkMakesRefetch({ currentUser, bodyshop, form, socket }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
 
-  if (!currentUser.email.includes("@imex.")) return null;
+  if (
+    !(
+      currentUser.email.includes("@imex.") ||
+      currentUser.email.includes("@rome.")
+    )
+  )
+    return null;
 
   const handleRefetch = async () => {
     setLoading(true);

client/src/components/employee-search-select/employee-search-select.component.jsx

@@ -1,10 +1,10 @@
 import { Select, Space, Tag } from "antd";
-import React, { forwardRef } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 const { Option } = Select;
 //To be used as a form element only.
 
-const EmployeeSearchSelect = ({ options, ...props }, ref) => {
+const EmployeeSearchSelect = ({ options, ...props }) => {
   const { t } = useTranslation();
 
   return (
@@ -39,4 +39,4 @@ const EmployeeSearchSelect = ({ options, ...props }, ref) => {
     </Select>
   );
 };
-export default forwardRef(EmployeeSearchSelect);
+export default EmployeeSearchSelect;

client/src/components/employee-team-search-select/employee-team-search-select.component.jsx

@@ -0,0 +1,33 @@
+import { useQuery } from "@apollo/client";
+import { Select } from "antd";
+import React, { forwardRef } from "react";
+import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
+import AlertComponent from "../alert/alert.component";
+
+//To be used as a form element only.
+
+const EmployeeTeamSearchSelect = ({ ...props }, ref) => {
+  const { loading, error, data } = useQuery(QUERY_TEAMS);
+
+  if (error) return <AlertComponent message={JSON.stringify(error)} />;
+  return (
+    <Select
+      showSearch
+      allowClear
+      loading={loading}
+      style={{
+        width: 400,
+      }}
+      options={
+        data
+          ? data.employee_teams.map((e) => ({
+              value: JSON.stringify(e),
+              label: e.name,
+            }))
+          : []
+      }
+      {...props}
+    />
+  );
+};
+export default forwardRef(EmployeeTeamSearchSelect);

client/src/components/error-boundary/error-boundary.component.jsx

@@ -40,22 +40,22 @@ class ErrorBoundary extends React.Component {
   }
 
   handleErrorSubmit = () => {
-    window.$crisp.push([
-      "do",
-      "message:send",
-      [
-        "text",
-        `I hit the following error: \n\n 
-    ${this.state.error.message}\n\n
-    ${this.state.error.stack}\n\n
-    URL:${window.location} as ${this.props.currentUser.email} for ${
-          this.props.bodyshop && this.props.bodyshop.name
-        }
-    `,
-      ],
-    ]);
+    // window.$crisp.push([
+    //   "do",
+    //   "message:send",
+    //   [
+    //     "text",
+    //     `I hit the following error: \n\n 
+    // ${this.state.error.message}\n\n
+    // ${this.state.error.stack}\n\n
+    // URL:${window.location} as ${this.props.currentUser.email} for ${
+    //       this.props.bodyshop && this.props.bodyshop.name
+    //     }
+    // `,
+    //   ],
+    // ]);
 
-    window.$crisp.push(["do", "chat:open"]);
+    // window.$crisp.push(["do", "chat:open"]);
     //     const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**
 
     // ----

client/src/components/form-items-formatted/read-only-form-item.component.jsx

@@ -1,9 +1,26 @@
 import Dinero from "dinero.js";
 import React, { forwardRef } from "react";
 
-const ReadOnlyFormItem = ({ value, type = "text", onChange }, ref) => {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+const ReadOnlyFormItem = (
+  { bodyshop, value, type = "text", onChange },
+  ref
+) => {
   if (!value) return null;
   switch (type) {
+    case "employee":
+      const emp = bodyshop.employees.find((e) => e.id === value);
+      return `${emp?.first_name} ${emp?.last_name}`;
+
     case "text":
       return <div>{value}</div>;
     case "currency":
@@ -14,4 +31,8 @@ const ReadOnlyFormItem = ({ value, type = "text", onChange }, ref) => {
       return <div>{value}</div>;
   }
 };
-export default forwardRef(ReadOnlyFormItem);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(forwardRef(ReadOnlyFormItem));

client/src/components/header/header.component.jsx

@@ -13,7 +13,8 @@ import Icon, {
   FileFilled,
   //GlobalOutlined,
   HomeFilled,
-  ImportOutlined, InfoCircleOutlined,
+  ImportOutlined,
+  // InfoCircleOutlined,
   LineChartOutlined,
   PaperClipOutlined,
   PhoneOutlined,
@@ -26,8 +27,11 @@ import Icon, {
   UserOutlined,
 } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
-import {Layout, Menu, Switch, Tooltip} from "antd";
-import React, {useEffect, useState} from "react";
+import {
+  Layout,
+  Menu, // Switch, Tooltip
+} from "antd";
+import React from "react"; //, { useEffect, useState }
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import {
@@ -52,7 +56,7 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import {handleBeta, setBeta, checkBeta} from "../../utils/handleBeta";
+//import { handleBeta, setBeta, checkBeta } from "../../utils/handleBeta";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -103,20 +107,20 @@ function Header({
     {},
     bodyshop && bodyshop.imexshopid
   );
-  const [betaSwitch, setBetaSwitch] = useState(false);
+  //const [betaSwitch, setBetaSwitch] = useState(false);
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const isBeta = checkBeta();
-    setBetaSwitch(isBeta);
-  }, []);
+  // useEffect(() => {
+  //   const isBeta = checkBeta();
+  //   setBetaSwitch(isBeta);
+  // }, []);
 
-  const betaSwitchChange = (checked) => {
-    setBeta(checked);
-    setBetaSwitch(checked);
-    handleBeta();
-  }
+  // const betaSwitchChange = (checked) => {
+  //   setBeta(checked);
+  //   setBetaSwitch(checked);
+  //   handleBeta();
+  // };
 
   return (
     <Layout.Header>
@@ -281,6 +285,13 @@ function Header({
               {t("menus.header.timetickets")}
             </Link>
           </Menu.Item>
+          {bodyshop?.md_tasks_presets?.use_approvals && (
+            <Menu.Item key="ttapprovals" icon={<FieldTimeOutlined />}>
+              <Link to="/manage/ttapprovals">
+                {t("menus.header.ttapprovals")}
+              </Link>
+            </Menu.Item>
+          )}
           <Menu.Item
             key="entertimetickets"
             icon={<Icon component={GiPlayerTime} />}
@@ -395,20 +406,12 @@ function Header({
           <Menu.Item
             key="help"
             onClick={() => {
-              window.open("https://help.imex.online/", "_blank");
+              window.open("https://rometech.com/", "_blank");
             }}
             icon={<Icon component={QuestionCircleFilled} />}
           >
             {t("menus.header.help")}
           </Menu.Item>
-          <Menu.Item
-            key="rescue"
-            onClick={() => {
-              window.open("https://imexrescue.com/", "_blank");
-            }}
-          >
-            {t("menus.header.rescueme")}
-          </Menu.Item>
           <Menu.Item key="shiftclock">
             <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
           </Menu.Item>
@@ -444,17 +447,18 @@ function Header({
             </Menu.Item>
           ))}
         </Menu.SubMenu>
-        <Menu.Item style={{marginLeft: 'auto'}} key="profile">
-          <Tooltip title="A more modern ImEX Online is ready for you to try! You can switch back at any time.">
-            <InfoCircleOutlined/>
-            <span style={{marginRight: 8}}>Try the new ImEX Online</span>
-            <Switch
-                checked={betaSwitch}
-                onChange={betaSwitchChange}
-            />
-          </Tooltip>
-        </Menu.Item>
-
+        {
+          // <Menu.Item style={{marginLeft: 'auto'}} key="profile">
+          //   <Tooltip title="A more modern ImEX Online is ready for you to try! You can switch back at any time.">
+          //     <InfoCircleOutlined/>
+          //     <span style={{marginRight: 8}}>Try the new ImEX Online</span>
+          //     <Switch
+          //         checked={betaSwitch}
+          //         onChange={betaSwitchChange}
+          //     />
+          //   </Tooltip>
+          // </Menu.Item>
+        }
       </Menu>
     </Layout.Header>
   );

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -87,7 +87,8 @@ export default function JobBillsTotalComponent({
   const totalPartsSublet = Dinero(totals.parts.parts.total)
     .add(Dinero(totals.parts.sublets.total))
     .add(Dinero(totals.additional.shipping))
-    .add(Dinero(totals.additional.towing));
+    .add(Dinero(totals.additional.towing))
+    .add(Dinero(totals.additional.additionalCosts));
 
   const discrepancy = totalPartsSublet.subtract(billTotals);
 

client/src/components/job-calculate-totals/job-calculate-totals.component.jsx

@@ -1,47 +1,52 @@
 import { Button, notification } from "antd";
 import Axios from "axios";
 import React, { useState } from "react";
-import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
-import { UPDATE_JOB } from "../../graphql/jobs.queries";
-import Dinero from "dinero.js";
-export default function JobCalculateTotals({ job, disabled }) {
+export default function JobCalculateTotals({ job, disabled, refetch }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [updateJob] = useMutation(UPDATE_JOB);
 
   const handleCalculate = async () => {
-    setLoading(true);
-    const newTotals = (
-      await Axios.post("/job/totals", {
-        job: job,
-      })
-    ).data;
+    try {
+      setLoading(true);
 
-    const result = await updateJob({
-      refetchQueries: ["GET_JOB_BY_PK"],
-      awaitRefetchQueries: true,
-      variables: {
-        jobId: job.id,
-        job: {
-          job_totals: newTotals,
-          clm_total: Dinero(newTotals.totals.total_repairs).toFormat("0.00"),
-          owner_owing: Dinero(newTotals.totals.custPayable.total).toFormat(
-            "0.00"
-          ),
-        },
-      },
-    });
-    if (!!!result.errors) {
-      notification["success"]({ message: t("jobs.successes.updated") });
-    } else {
+      await Axios.post("/job/totalsssu", {
+        id: job.id,
+      });
+
+      if (refetch) refetch();
+      // const result = await updateJob({
+      //   refetchQueries: ["GET_JOB_BY_PK"],
+      //   awaitRefetchQueries: true,
+      //   variables: {
+      //     jobId: job.id,
+      //     job: {
+      //       job_totals: newTotals,
+      //       clm_total: Dinero(newTotals.totals.total_repairs).toFormat("0.00"),
+      //       owner_owing: Dinero(newTotals.totals.custPayable.total).toFormat(
+      //         "0.00"
+      //       ),
+      //     },
+      //   },
+      // });
+      // if (!!!result.errors) {
+      //   notification["success"]({ message: t("jobs.successes.updated") });
+      // } else {
+      //   notification["error"]({
+      //     message: t("jobs.errors.updating", {
+      //       error: JSON.stringify(result.errors),
+      //     }),
+      //   });
+      // }
+    } catch (error) {
       notification["error"]({
         message: t("jobs.errors.updating", {
-          error: JSON.stringify(result.errors),
+          error: JSON.stringify(error),
         }),
       });
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -32,9 +32,9 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 const span = {
-  sm: { span: 24 },
-  md: { span: 12 },
-  lg: { span: 8 },
+  lg: { span: 24 },
+  xl: { span: 12 },
+  xxl: { span: 8 },
 };
 
 export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
@@ -137,12 +137,6 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
                 data={data ? data.jobs_by_pk : null}
               />
             </Col>
-            <Col {...span}>
-              <JobDetailCardsPartsComponent
-                loading={loading}
-                data={data ? data.jobs_by_pk : null}
-              />
-            </Col>
             <Col {...span}>
               <JobDetailCardsNotesComponent
                 loading={loading}
@@ -163,6 +157,12 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
                 data={data ? data.jobs_by_pk : null}
               />
             </Col>
+            <Col span={24}>
+              <JobDetailCardsPartsComponent
+                loading={loading}
+                data={data ? data.jobs_by_pk : null}
+              />
+            </Col>
           </Row>
         </Card>
       ) : null}

client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx

@@ -1,16 +1,119 @@
+import { Table } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
 import PartsStatusPie from "../parts-status-pie/parts-status-pie.component";
 import CardTemplate from "./job-detail-cards.template.component";
 
-export default function JobDetailCardsPartsComponent({ loading, data }) {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { onlyUnique } from "../../utils/arrayHelper";
+import { alphaSort } from "../../utils/sorters";
+import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
+import JobLineStatusPopup from "../job-line-status-popup/job-line-status-popup.component";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  jobRO: selectJobReadOnly,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDetailCardsPartsComponent);
+
+export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
   const { t } = useTranslation();
   const { joblines_status } = data;
 
+  const columns = [
+    {
+      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",
+        style: {
+          ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {}),
+        },
+      }),
+      width: "30%",
+      ellipsis: true,
+    },
+    {
+      title: t("joblines.fields.part_type"),
+      dataIndex: "part_type",
+      key: "part_type",
+      width: "15%",
+      sorter: (a, b) =>
+        alphaSort(
+          t(`joblines.fields.part_types.${a.part_type}`),
+          t(`joblines.fields.part_types.${b.part_type}`)
+        ),
+      render: (text, record) =>
+        record.part_type
+          ? t(`joblines.fields.part_types.${record.part_type}`)
+          : null,
+    },
+    {
+      title: t("joblines.fields.part_qty"),
+      dataIndex: "part_qty",
+      key: "part_qty",
+      width: "10%",
+    },
+    {
+      title: t("joblines.fields.notes"),
+      dataIndex: "notes",
+      key: "notes",
+      render: (text, record) => (
+        <JobLineNotePopup disabled={jobRO} jobline={record} />
+      ),
+    },
+    {
+      title: t("joblines.fields.location"),
+      dataIndex: "location",
+      key: "location",
+      sorter: (a, b) => alphaSort(a.location, b.location),
+      render: (text, record) => (
+        <JobLineLocationPopup jobline={record} disabled={jobRO} />
+      ),
+    },
+    {
+      title: t("joblines.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      filters:
+        (data &&
+          data.joblines
+            ?.map((l) => l.status)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Status*",
+                value: [s],
+              };
+            })) ||
+        [],
+      onFilter: (value, record) => value.includes(record.status),
+      render: (text, record) => (
+        <JobLineStatusPopup jobline={record} disabled={jobRO} />
+      ),
+    },
+  ];
   return (
     <div>
       <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
         <PartsStatusPie joblines_status={joblines_status} />
+        <Table
+          key="id"
+          columns={columns}
+          dataSource={data ? data.joblines : []}
+        />
       </CardTemplate>
     </div>
   );

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -8,7 +8,18 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
 
-export default function JobLinesExpander({ jobline, jobid }) {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobLinesExpander);
+
+export function JobLinesExpander({ jobline, jobid, bodyshop }) {
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
     fetchPolicy: "network-only",
@@ -23,7 +34,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
 
   return (
     <Row>
-      <Col md={24} lg={12}>
+      <Col md={24} lg={8}>
         <Typography.Title level={4}>
           {t("parts_orders.labels.parts_orders")}
         </Typography.Title>
@@ -49,7 +60,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
           )}
         </Timeline>
       </Col>
-      <Col md={24} lg={12}>
+      <Col md={24} lg={8}>
         <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
         <Timeline>
           {data.billlines.length > 0 ? (
@@ -71,7 +82,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
                   </Col>
                   <Col span={4}>
                     <span>
-                    {`${t("billlines.fields.actual_cost")}: `}
+                      {`${t("billlines.fields.actual_cost")}: `}
                       <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
                     </span>
                   </Col>
@@ -89,6 +100,37 @@ export default function JobLinesExpander({ jobline, jobid }) {
           )}
         </Timeline>
       </Col>
+      <Col md={24} lg={8}>
+        <Typography.Title level={4}>
+          {t("parts_dispatch.labels.parts_dispatch")}
+        </Typography.Title>
+        <Timeline>
+          {data.parts_dispatch_lines.length > 0 ? (
+            data.parts_dispatch_lines.map((line) => (
+              <Timeline.Item key={line.id}>
+                <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>
+              </Timeline.Item>
+            ))
+          ) : (
+            <Timeline.Item>
+              {t("parts_orders.labels.notyetordered")}
+            </Timeline.Item>
+          )}
+        </Timeline>
+      </Col>
     </Row>
   );
 }

client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx

@@ -0,0 +1,97 @@
+import { useMutation } from "@apollo/client";
+import { Button, Form, notification, Popover, Tooltip } from "antd";
+import { t } from "i18next";
+import React, { useState } from "react";
+import { UPDATE_LINE_PPC } from "../../graphql/jobs-lines.queries";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
+import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
+import axios from "axios";
+export default function JobLinesPartPriceChange({ job, line, refetch }) {
+  const [loading, setLoading] = useState(false);
+  const [updatePartPrice] = useMutation(UPDATE_LINE_PPC);
+
+  const handleFinish = async (values) => {
+    try {
+      setLoading(true);
+      const result = await updatePartPrice({
+        variables: {
+          id: line.id,
+          jobline: {
+            act_price_before_ppc: line.act_price_before_ppc
+              ? line.act_price_before_ppc
+              : line.act_price,
+            act_price: values.act_price,
+          },
+        },
+      });
+      await axios.post("/job/totalsssu", {
+        id: job.id,
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("joblines.errors.saving", {
+            error: JSON.stringify(result.errors),
+          }),
+        });
+        if (refetch) refetch();
+      } else {
+        notification.open({
+          type: "success",
+          message: t("joblines.successes.saved"),
+        });
+      }
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("joblines.errors.saving", { error: JSON.stringify(error) }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const popcontent = (
+    <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
+      <Form.Item
+        name="act_price"
+        label={t("jobs.labels.act_price_ppc")}
+        rules={[{ required: true }]}
+      >
+        <CurrencyFormItemComponent />
+      </Form.Item>
+      <Button loading={loading} htmlType="primary">
+        {t("general.actions.save")}
+      </Button>
+    </Form>
+  );
+
+  return (
+    <JobLineConvertToLabor jobline={line} job={job}>
+      <Popover trigger="click" disabled={line.manual_line} content={popcontent}>
+        <CurrencyFormatter>
+          {line.db_ref === "900510" || line.db_ref === "900511"
+            ? line.prt_dsmk_m
+            : line.act_price}
+        </CurrencyFormatter>
+        {line.prt_dsmk_p && line.prt_dsmk_p !== 0 ? (
+          <span style={{ marginLeft: ".2rem" }}>{`(${line.prt_dsmk_p}%)`}</span>
+        ) : (
+          <></>
+        )}
+        {line.act_price_before_ppc && line.act_price_before_ppc !== 0 ? (
+          <Tooltip title={t("jobs.labels.ppc")}>
+            <span style={{ marginLeft: ".2rem", color: "tomato" }}>
+              (
+              <CurrencyFormatter>{line.act_price_before_ppc}</CurrencyFormatter>
+              )
+            </span>
+          </Tooltip>
+        ) : (
+          <></>
+        )}
+      </Popover>
+    </JobLineConvertToLabor>
+  );
+}

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -1,12 +1,12 @@
 import {
   DeleteFilled,
+  EditFilled,
   FilterFilled,
+  HomeOutlined,
+  MinusCircleTwoTone,
+  PlusCircleTwoTone,
   SyncOutlined,
   WarningFilled,
-  EditFilled,
-  PlusCircleTwoTone,
-  MinusCircleTwoTone,
-  HomeOutlined,
 } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import {
@@ -29,7 +29,6 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
 import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
@@ -38,13 +37,18 @@ import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-re
 // import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
 // import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
 // import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
-import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 import _ from "lodash";
-import JobCreateIOU from "../job-create-iou/job-create-iou.component";
-import JobLinesExpander from "./job-lines-expander.component";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import moment from "moment";
-import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobCreateIOU from "../job-create-iou/job-create-iou.component";
+import JobSendPartPriceChangeComponent from "../job-send-parts-price-change/job-send-parts-price-change.component";
+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 JoblineTeamAssignment from "../job-line-team-assignment/job-line-team-assignmnent.component";
+import JobLineDispatchButton from "../job-line-dispatch-button/job-line-dispatch-button.component";
+import JobLineBulkAssignComponent from "../job-line-bulk-assign/job-line-bulk-assign.component";
+import { useTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -76,8 +80,16 @@ export function JobLinesComponent({
   setBillEnterContext,
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
-
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
   const [selectedLines, setSelectedLines] = useState([]);
+  console.log(
+    "🚀 ~ file: job-lines.component.jsx:89 ~ selectedLines:",
+    selectedLines
+  );
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: {},
@@ -121,10 +133,21 @@ export function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
       ellipsis: true,
-      render: (text, record) =>
-        `${record.oem_partno || ""} ${
-          record.alt_partno ? `(${record.alt_partno})` : ""
-        }`.trim(),
+      onCell: (record) => ({
+        className: record.manual_line && "job-line-manual",
+        style: {
+          ...(record.parts_dispatch_lines[0]?.accepted_at
+            ? { boxShadow: " -.5em 0 0 #FFC107" }
+            : {}),
+        },
+      }),
+      render: (text, record) => (
+        <span class="ant-table-cell-content">
+          {`${record.oem_partno || ""} ${
+            record.alt_partno ? `(${record.alt_partno})` : ""
+          }`.trim()}
+        </span>
+      ),
     },
     {
       title: t("joblines.fields.op_code_desc"),
@@ -220,20 +243,7 @@ export function JobLinesComponent({
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
       ellipsis: true,
       render: (text, record) => (
-        <JobLineConvertToLabor jobline={record} job={job}>
-          <CurrencyFormatter>
-            {record.db_ref === "900510" || record.db_ref === "900511"
-              ? record.prt_dsmk_m
-              : record.act_price}
-          </CurrencyFormatter>
-          {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
-            <span
-              style={{ marginLeft: ".2rem" }}
-            >{`(${record.prt_dsmk_p}%)`}</span>
-          ) : (
-            <></>
-          )}
-        </JobLineConvertToLabor>
+        <JobLinesPartPriceChange line={record} job={job} refetch={refetch} />
       ),
     },
     {
@@ -286,6 +296,23 @@ export function JobLinesComponent({
         state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order,
       responsive: ["md"],
     },
+    ...(Enhanced_Payroll.treatment === "on"
+      ? [
+          {
+            title: t("joblines.fields.assigned_team"),
+            dataIndex: "assigned_team",
+            key: "assigned_team",
+            render: (text, record) => (
+              <JoblineTeamAssignment
+                disabled={jobRO}
+                jobline={record}
+                jobId={job.id}
+              />
+            ),
+          },
+        ]
+      : []),
+
     {
       title: t("joblines.fields.notes"),
       dataIndex: "notes",
@@ -404,7 +431,11 @@ export function JobLinesComponent({
       setSelectedLines((selectedLines) =>
         _.uniq([
           ...selectedLines,
-          ...jobLines.filter((item) => markedTypes.includes(item.part_type)),
+          ...jobLines.filter(
+            (item) =>
+              markedTypes.includes(item.part_type) ||
+              markedTypes.includes(item.mod_lbr_ty)
+          ),
         ])
       );
     }
@@ -417,6 +448,21 @@ export function JobLinesComponent({
       <Menu.Item key="PAL">{t("joblines.fields.part_types.PAL")}</Menu.Item>
       <Menu.Item key="PAS">{t("joblines.fields.part_types.PAS")}</Menu.Item>
       <Menu.Divider />
+      <Menu.Item key="LAA">{t("joblines.fields.lbr_types.LAA")}</Menu.Item>
+      <Menu.Item key="LAB">{t("joblines.fields.lbr_types.LAB")}</Menu.Item>
+      <Menu.Item key="LAD">{t("joblines.fields.lbr_types.LAD")}</Menu.Item>
+      <Menu.Item key="LAE">{t("joblines.fields.lbr_types.LAE")}</Menu.Item>
+      <Menu.Item key="LAF">{t("joblines.fields.lbr_types.LAF")}</Menu.Item>
+      <Menu.Item key="LAG">{t("joblines.fields.lbr_types.LAG")}</Menu.Item>
+      <Menu.Item key="LAM">{t("joblines.fields.lbr_types.LAM")}</Menu.Item>
+      <Menu.Item key="LAR">{t("joblines.fields.lbr_types.LAR")}</Menu.Item>
+      <Menu.Item key="LAS">{t("joblines.fields.lbr_types.LAS")}</Menu.Item>
+      <Menu.Item key="LAU">{t("joblines.fields.lbr_types.LAU")}</Menu.Item>
+      <Menu.Item key="LA1">{t("joblines.fields.lbr_types.LA1")}</Menu.Item>
+      <Menu.Item key="LA2">{t("joblines.fields.lbr_types.LA2")}</Menu.Item>
+      <Menu.Item key="LA3">{t("joblines.fields.lbr_types.LA3")}</Menu.Item>
+      <Menu.Item key="LA4">{t("joblines.fields.lbr_types.LA2")}</Menu.Item>
+      <Menu.Divider />
       <Menu.Item key="clear">{t("general.labels.clear")}</Menu.Item>
     </Menu>
   );
@@ -440,6 +486,18 @@ export function JobLinesComponent({
                 </Space>
               </Tag>
             )}
+            <JobLineDispatchButton
+              selectedLines={selectedLines}
+              setSelectedLines={setSelectedLines}
+              job={job}
+            />
+            {Enhanced_Payroll.treatment === "on" && (
+              <JobLineBulkAssignComponent
+                selectedLines={selectedLines}
+                setSelectedLines={setSelectedLines}
+                job={job}
+              />
+            )}
             <Button
               disabled={
                 (job && !job.converted) ||
@@ -448,15 +506,6 @@ export function JobLinesComponent({
                 technician
               }
               onClick={() => {
-                // setPartsOrderContext({
-                //   actions: { refetch: refetch },
-                //   context: {
-                //     jobId: job.id,
-                //     job: job,
-                //     linesToOrder: selectedLines,
-                //   },
-                // });
-
                 setBillEnterContext({
                   actions: { refetch: refetch },
                   context: {
@@ -563,6 +612,9 @@ export function JobLinesComponent({
             >
               {t("joblines.actions.new")}
             </Button>
+            {bodyshop.region_config.toLowerCase().startsWith("us") && (
+              <JobSendPartPriceChangeComponent job={job} />
+            )}
             <JobCreateIOU job={job} selectedJobLines={selectedLines} />
             <Input.Search
               placeholder={t("general.labels.search")}

client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+
+import { useMutation } from "@apollo/client";
+import { Button, Form, Popover, Select, Space, notification } from "antd";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_LINE_BULK_ASSIGN } from "../../graphql/jobs-lines.queries";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  jobRO: selectJobReadOnly,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JoblineBulkAssign);
+
+export function JoblineBulkAssign({
+  setSelectedLines,
+  selectedLines,
+  insertAuditTrail,
+  bodyshop,
+  jobRO,
+  job,
+  currentUser,
+}) {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  const { t } = useTranslation();
+  const [assignLines] = useMutation(UPDATE_LINE_BULK_ASSIGN);
+
+  const handleConvert = async (values) => {
+    try {
+      setLoading(true);
+      const result = await assignLines({
+        variables: {
+          jobline: {
+            assigned_team: values.assigned_team,
+          },
+          ids: selectedLines.map((l) => l.id),
+        },
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("parts_dispatch.errors.creating", {
+            error: JSON.stringify(result.errors),
+          }),
+        });
+      } else {
+        //Insert the audit trail here.
+
+        const teamName = bodyshop.employee_teams.find(
+          (et) => et.id === values.assigned_team
+        )?.name;
+
+        const hours = selectedLines.reduce(
+          (acc, val) => (acc += val.mod_lb_hrs),
+          0
+        );
+
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.assignedlinehours(
+            teamName,
+            hours.toFixed(1)
+          ),
+        });
+        setSelectedLines([]);
+        setVisible(false);
+      }
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("parts_dispatch.errors.creating", {
+          error: error,
+        }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const popMenu = (
+    <div>
+      <Form layout="vertical" form={form} onFinish={handleConvert}>
+        <Form.Item
+          name={"assigned_team"}
+          label={t("joblines.fields.assigned_team")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select
+            showSearch
+            style={{ width: 200 }}
+            optionFilterProp="children"
+            filterOption={(input, option) =>
+              option.props.children
+                .toLowerCase()
+                .indexOf(input.toLowerCase()) >= 0
+            }
+          >
+            {bodyshop.employee_teams.map((team) => (
+              <Select.Option value={team.id} key={team.id} name={team.name}>
+                {team.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Space wrap>
+          <Button type="danger" onClick={() => form.submit()} loading={loading}>
+            {t("general.actions.save")}
+          </Button>
+          <Button onClick={() => setVisible(false)}>
+            {t("general.actions.cancel")}
+          </Button>
+        </Space>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Popover open={visible} content={popMenu}>
+      <Button
+        disabled={selectedLines.length === 0 || jobRO}
+        loading={loading}
+        onClick={() => setVisible(true)}
+      >
+        {t("joblines.actions.assign_team", { count: selectedLines.length })}
+      </Button>
+    </Popover>
+  );
+}

client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx

@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+
+import { useMutation } from "@apollo/client";
+import { Button, Form, Popover, Select, Space, notification } from "antd";
+import moment from "moment";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_PARTS_DISPATCH } from "../../graphql/parts-dispatch.queries";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  jobRO: selectJobReadOnly,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobLineDispatchButton);
+
+export function JobLineDispatchButton({
+  setSelectedLines,
+  selectedLines,
+
+  bodyshop,
+  jobRO,
+  job,
+  currentUser,
+}) {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  const Templates = TemplateList("job_special", {
+    ro_number: job.ro_number,
+  });
+  const { t } = useTranslation();
+  const [dispatchLines] = useMutation(INSERT_PARTS_DISPATCH);
+
+  const handleConvert = async (values) => {
+    try {
+      setLoading(true);
+      //THIS HAS NOT YET BEEN TESTED. START BY FINISHING THIS FUNCTION.
+      const result = await dispatchLines({
+        variables: {
+          partsDispatch: {
+            dispatched_at: moment(),
+            employeeid: values.employeeid,
+            jobid: job.id,
+            dispatched_by: currentUser.email,
+            parts_dispatch_lines: {
+              data: selectedLines.map((l) => ({
+                joblineid: l.id,
+                quantity: l.part_qty,
+              })),
+            },
+          },
+          //joblineids: selectedLines.map((l) => l.id),
+        },
+      });
+      if (result.errors) {
+        notification.open({
+          type: "error",
+          message: t("parts_dispatch.errors.creating", {
+            error: result.errors,
+          }),
+        });
+      } else {
+        setSelectedLines([]);
+        await GenerateDocument(
+          {
+            name: Templates.parts_dispatch.key,
+            variables: {
+              id: result.data.insert_parts_dispatch_one.id,
+            },
+          },
+          {},
+          "p"
+        );
+      }
+      setVisible(false);
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("parts_dispatch.errors.creating", {
+          error: error,
+        }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const popMenu = (
+    <div>
+      <Form layout="vertical" form={form} onFinish={handleConvert}>
+        <Form.Item
+          name={"employeeid"}
+          label={t("timetickets.fields.employee")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select
+            showSearch
+            style={{ width: 200 }}
+            optionFilterProp="children"
+            filterOption={(input, option) =>
+              option.props.children
+                .toLowerCase()
+                .indexOf(input.toLowerCase()) >= 0
+            }
+          >
+            {bodyshop.employees
+              .filter((emp) => emp.active)
+              .map((emp) => (
+                <Select.Option
+                  value={emp.id}
+                  key={emp.id}
+                  name={`${emp.first_name} ${emp.last_name}`}
+                >
+                  {`${emp.first_name} ${emp.last_name}`}
+                </Select.Option>
+              ))}
+          </Select>
+        </Form.Item>
+
+        <Space wrap>
+          <Button
+            type="danger"
+            onClick={() => form.submit()}
+            loading={loading}
+            disabled={selectedLines.length === 0}
+          >
+            {t("general.actions.save")}
+          </Button>
+          <Button onClick={() => setVisible(false)}>
+            {t("general.actions.cancel")}
+          </Button>
+        </Space>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Popover open={visible} content={popMenu}>
+      <Button
+        disabled={selectedLines.length === 0 || jobRO}
+        loading={loading}
+        onClick={() => setVisible(true)}
+      >
+        {t("joblines.actions.dispatchparts", { count: selectedLines.length })}
+      </Button>
+    </Popover>
+  );
+}

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { notification, Select } from "antd";
+import { notification, Select, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -77,7 +77,10 @@ export function JobLineLocationPopup({ bodyshop, jobline, disabled }) {
       style={{ width: "100%", minHeight: "2rem", cursor: "pointer" }}
       onClick={() => !disabled && setEditing(true)}
     >
-      {jobline.location}
+      <Space wrap>
+        {jobline.location}
+        {jobline.parts_dispatch_lines?.length > 0 && "-Disp"}
+      </Space>
     </div>
   );
 }

client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx

@@ -0,0 +1,115 @@
+import { notification, Select } from "antd";
+import React, { useEffect, useState } from "react";
+import { useMutation } from "@apollo/client";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export function JoblineTeamAssignment({
+  bodyshop,
+  jobline,
+  disabled,
+  jobId,
+  insertAuditTrail,
+}) {
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [assignedTeam, setAssignedTeam] = useState(jobline.assigned_team);
+  const [updateJob] = useMutation(UPDATE_JOB_LINE);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (editing) setAssignedTeam(jobline.assigned_team);
+  }, [editing, jobline.assigned_team]);
+
+  const handleChange = (e) => {
+    setAssignedTeam(e);
+  };
+
+  const handleSave = async (e) => {
+    setLoading(true);
+    const result = await updateJob({
+      variables: {
+        lineId: jobline.id,
+        line: { assigned_team: assignedTeam },
+      },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("joblines.successes.saved") });
+      //insert the audit trail here.
+      const teamName = bodyshop.employee_teams.find(
+        (et) => et.id === assignedTeam
+      )?.name;
+      insertAuditTrail({
+        jobid: jobId,
+        operation: AuditTrailMapping.assignedlinehours(
+          teamName,
+          jobline.mod_lb_hrs
+        ),
+      });
+    } else {
+      notification["error"]({
+        message: t("joblines.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+    setEditing(false);
+  };
+
+  if (editing)
+    return (
+      <div>
+        <LoadingSpinner loading={loading}>
+          <Select
+            autoFocus
+            allowClear
+            dropdownMatchSelectWidth={100}
+            value={assignedTeam}
+            onSelect={handleChange}
+            onBlur={handleSave}
+            onClear={() => handleChange(null)}
+          >
+            {Object.values(bodyshop.employee_teams).map((s, idx) => (
+              <Select.Option key={idx} value={s.id}>
+                {s.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </LoadingSpinner>
+      </div>
+    );
+
+  const team = bodyshop.employee_teams.find(
+    (tm) => tm.id === jobline.assigned_team
+  );
+
+  return (
+    <div
+      style={{ width: "100%", minHeight: "1rem", cursor: "pointer" }}
+      onClick={() => !disabled && setEditing(true)}
+    >
+      {team?.name}
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JoblineTeamAssignment);

client/src/components/job-profile-data-warning/job-profile-data-warning.component.jsx

@@ -0,0 +1,18 @@
+import { Alert } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function JobProfileDataWarning({ job }) {
+  const { t } = useTranslation();
+
+  let missingProfileInfo =
+    Object.keys(job.cieca_pft).length === 0 ||
+    Object.keys(job.cieca_pfl).length === 0 ||
+    Object.keys(job.materials).length === 0;
+
+  if (missingProfileInfo)
+    return (
+      <Alert type="error" message={t("jobs.labels.missingprofileinfo")}></Alert>
+    );
+  return null;
+}

client/src/components/job-reconciliation-modal/job-reconciliation-modal.component.jsx

@@ -19,7 +19,8 @@ export default function JobReconciliationModalComponent({ job, bills }) {
 
   const jobLineData = job.joblines.filter(
     (j) =>
-      (j.part_type !== null && j.part_type !== "PAE") ||
+      (j.part_type !== "PAE" && j.act_price !== 0 && j.part_qty !== 0) ||
+      j.misc_amt !== 0 ||
       (j.line_desc &&
         j.line_desc.toLowerCase().includes("towing") &&
         j.lbr_op === "OP13") ||

client/src/components/job-send-parts-price-change/job-send-parts-price-change.component.jsx

@@ -0,0 +1,31 @@
+import { Button, notification } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export default function JobSendPartPriceChangeComponent({ job }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const handleClick = async () => {
+    setLoading(true);
+    try {
+      const ppcData = await axios.post("/job/ppc", { jobid: job.id });
+      await axios.post("http://localhost:1337/ppc/", ppcData.data);
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("jobs.errors.partspricechange", {
+          error: JSON.stringify(error),
+        }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button onClick={handleClick} loading={loading}>
+      {t("jobs.actions.sendpartspricechange")}
+    </Button>
+  );
+}

client/src/components/job-totals-table/job-totals-table.component.jsx

@@ -67,7 +67,8 @@ export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
                 <JobTotalsTableTotals job={job} />
               </Card>
             </Col>
-            {currentUser.email.includes("@imex.") && (
+            {(currentUser.email.includes("@imex.") ||
+              currentUser.email.includes("@rome.")) && (
               <Col span={24}>
                 <Card title="DEVELOPMENT USE ONLY">
                   <JobCalculateTotals job={job} disabled={jobRO} />

client/src/components/job-totals-table/job-totals.table.labor.component.jsx

@@ -123,11 +123,10 @@ export default function JobTotalsTableLabor({ job }) {
               <Space>
                 {t("jobs.labels.mapa")}
                 {job.materials &&
-                  job.materials.mapa &&
-                  job.materials.mapa.cal_maxdlr &&
-                  job.materials.mapa.cal_maxdlr > 0 &&
+                  job.materials.MAPA &&
+                  job.materials.MAPA.cal_maxdlr !== undefined &&
                   t("jobs.labels.threshhold", {
-                    amount: job.materials.mapa.cal_maxdlr,
+                    amount: job.materials.MAPA.cal_maxdlr,
                   })}
               </Space>
             </Table.Summary.Cell>
@@ -148,11 +147,10 @@ export default function JobTotalsTableLabor({ job }) {
               <Space wrap>
                 {t("jobs.labels.mash")}
                 {job.materials &&
-                  job.materials.mash &&
-                  job.materials.mash.cal_maxdlr &&
-                  job.materials.mash.cal_maxdlr > 0 &&
+                  job.materials.MASH &&
+                  job.materials.MASH.cal_maxdlr !== undefined &&
                   t("jobs.labels.threshhold", {
-                    amount: job.materials.mash.cal_maxdlr,
+                    amount: job.materials.MASH.cal_maxdlr,
                   })}
               </Space>
             </Table.Summary.Cell>

client/src/components/job-totals-table/job-totals.table.parts.component.jsx

@@ -11,6 +11,22 @@ export default function JobTotalsTableParts({ job }) {
     filteredInfo: {},
   });
 
+  const insuranceAdjustments = useMemo(() => {
+    if (!job.job_totals) return [];
+    if (!job.job_totals?.parts?.adjustments) return [];
+    const adjs = [];
+    Object.keys(job.job_totals?.parts?.adjustments).forEach((key) => {
+      if (Dinero(job.job_totals?.parts?.adjustments[key]).getAmount() !== 0) {
+        adjs.push({
+          id: key,
+          amount: Dinero(job.job_totals.parts.adjustments[key]),
+        });
+      }
+    });
+
+    return adjs;
+  }, [job.job_totals]);
+
   const data = useMemo(() => {
     return Object.keys(job.job_totals.parts.parts.list)
       .filter(
@@ -74,11 +90,11 @@ export default function JobTotalsTableParts({ job }) {
             <Table.Summary.Cell>
               {t("jobs.labels.prt_dsmk_total")}
             </Table.Summary.Cell>
-
             <Table.Summary.Cell align="right">
               {Dinero(job.job_totals.parts.parts.prt_dsmk_total).toFormat()}
             </Table.Summary.Cell>
           </Table.Summary.Row>
+
           <Table.Summary.Row>
             <Table.Summary.Cell>
               <strong>{t("jobs.labels.partstotal")}</strong>
@@ -90,6 +106,24 @@ export default function JobTotalsTableParts({ job }) {
               </strong>
             </Table.Summary.Cell>
           </Table.Summary.Row>
+          {insuranceAdjustments.length > 0 && (
+            <Table.Summary.Row>
+              <Table.Summary.Cell colSpan={24}>
+                {t("jobs.labels.profileadjustments")}
+              </Table.Summary.Cell>
+            </Table.Summary.Row>
+          )}
+          {insuranceAdjustments.map((adj, idx) => (
+            <Table.Summary.Row key={idx}>
+              <Table.Summary.Cell>
+                {t(`jobs.fields.${adj.id.toLowerCase()}`)}
+              </Table.Summary.Cell>
+
+              <Table.Summary.Cell align="right">
+                {adj.amount.toFormat()}
+              </Table.Summary.Cell>
+            </Table.Summary.Row>
+          ))}
         </>
       )}
     />

client/src/components/job-totals-table/job-totals.table.totals.component.jsx

@@ -28,26 +28,109 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
         total: job.job_totals.totals.subtotal,
         bold: true,
       },
-      {
-        key: t("jobs.labels.local_tax_amt"),
-        total: job.job_totals.totals.local_tax,
-      },
-      {
-        key: t("jobs.labels.state_tax_amt"),
-        total: job.job_totals.totals.state_tax,
-      },
-      ...(bodyshop.region_config === "CA_BC"
+
+      ...(job.job_totals.totals.us_sales_tax_breakdown
         ? [
             {
-              key: t("jobs.fields.ca_bc_pvrt"),
-              total: job.job_totals.additional.pvrt,
+              key: `${
+                bodyshop.md_responsibility_centers.taxes.tax_ty1?.tax_type1 ||
+                "T1"
+              } - ${[
+                job.cieca_pft.ty1_rate1,
+                job.cieca_pft.ty1_rate2,
+                job.cieca_pft.ty1_rate3,
+                job.cieca_pft.ty1_rate4,
+                job.cieca_pft.ty1_rate5,
+              ]
+                .filter((i) => i > 0)
+                .join(", ")}%`,
+              total: job.job_totals.totals.us_sales_tax_breakdown.ty1Tax,
             },
-          ]
-        : []),
-      {
-        key: t("jobs.labels.federal_tax_amt"),
-        total: job.job_totals.totals.federal_tax,
-      },
+            {
+              key: `${
+                bodyshop.md_responsibility_centers.taxes.tax_ty2?.tax_type2 ||
+                "T2"
+              } - ${[
+                job.cieca_pft.ty2_rate1,
+                job.cieca_pft.ty2_rate2,
+                job.cieca_pft.ty2_rate3,
+                job.cieca_pft.ty2_rate4,
+                job.cieca_pft.ty2_rate5,
+              ]
+                .filter((i) => i > 0)
+                .join(", ")}%`,
+              total: job.job_totals.totals.us_sales_tax_breakdown.ty2Tax,
+            },
+            {
+              key: `${
+                bodyshop.md_responsibility_centers.taxes.tax_ty3?.tax_type3 ||
+                "T3"
+              } - ${[
+                job.cieca_pft.ty3_rate1,
+                job.cieca_pft.ty3_rate2,
+                job.cieca_pft.ty3_rate3,
+                job.cieca_pft.ty3_rate4,
+                job.cieca_pft.ty3_rate5,
+              ]
+                .filter((i) => i > 0)
+                .join(", ")}%`,
+              total: job.job_totals.totals.us_sales_tax_breakdown.ty3Tax,
+            },
+            {
+              key: `${
+                bodyshop.md_responsibility_centers.taxes.tax_ty4?.tax_type4 ||
+                "T4"
+              } - ${[
+                job.cieca_pft.ty4_rate1,
+                job.cieca_pft.ty4_rate2,
+                job.cieca_pft.ty4_rate3,
+                job.cieca_pft.ty4_rate4,
+                job.cieca_pft.ty4_rate5,
+              ]
+                .filter((i) => i > 0)
+                .join(", ")}%`,
+              total: job.job_totals.totals.us_sales_tax_breakdown.ty4Tax,
+            },
+            {
+              key: `${
+                bodyshop.md_responsibility_centers.taxes.tax_ty5?.tax_type5 ||
+                "TT"
+              } - ${[
+                job.cieca_pft.ty5_rate1,
+                job.cieca_pft.ty5_rate2,
+                job.cieca_pft.ty5_rate3,
+                job.cieca_pft.ty5_rate4,
+                job.cieca_pft.ty5_rate5,
+              ]
+                .filter((i) => i > 0)
+                .join(", ")}%`,
+              total: job.job_totals.totals.us_sales_tax_breakdown.ty5Tax,
+            },
+            {
+              key: t("jobs.labels.total_sales_tax"),
+              bold: true,
+              total: Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty1Tax)
+                .add(
+                  Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty2Tax)
+                )
+                .add(
+                  Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty3Tax)
+                )
+                .add(
+                  Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty4Tax)
+                )
+                .add(
+                  Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty5Tax)
+                ).toJSON(),
+            },
+          ].filter((item) => item.total.amount !== 0)
+        : [
+            {
+              key: t("jobs.labels.state_tax_amt"),
+              total: job.job_totals.totals.state_tax,
+            },
+          ]),
+
       {
         key: t("jobs.labels.total_repairs"),
         total: job.job_totals.totals.total_repairs,
@@ -57,10 +140,10 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
         key: t("jobs.fields.ded_amt"),
         total: job.job_totals.totals.custPayable.deductible,
       },
-      {
-        key: t("jobs.fields.federal_tax_payable"),
-        total: job.job_totals.totals.custPayable.federal_tax,
-      },
+      // {
+      //   key: t("jobs.fields.federal_tax_payable"),
+      //   total: job.job_totals.totals.custPayable.federal_tax,
+      // },
       {
         key: t("jobs.fields.other_amount_payable"),
         total: job.job_totals.totals.custPayable.other_customer_amount,
@@ -81,7 +164,7 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
         bold: true,
       },
     ];
-  }, [job.job_totals, t, bodyshop.region_config]);
+  }, [job.job_totals, job.cieca_pft, t, bodyshop.md_responsibility_centers]);
 
   const columns = [
     {

client/src/components/jobs-available-table/jobs-available-supplement.estlines.util.js

@@ -25,7 +25,7 @@ export const GetSupplementDelta = async (client, jobId, newLines) => {
       //Found a relevant matching line. Add it to lines to update.
       linesToUpdate.push({
         id: existingLines[matchingIndex].id,
-        newData: { ...newLine, removed: false },
+        newData: { ...newLine, removed: false, act_price_before_ppc: null },
       });
 
       //Splice out item we found for performance.

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -6,9 +6,9 @@ import {
   useQuery,
 } from "@apollo/client";
 import { useTreatments } from "@splitsoftware/splitio-react";
-import { Col, Row, notification } from "antd";
+import { Button, Col, Row, notification } from "antd";
 import Axios from "axios";
-import Dinero from "dinero.js";
+import _ from "lodash";
 import moment from "moment-business-days";
 import queryString from "query-string";
 import React, { useCallback, useEffect, useState } from "react";
@@ -31,7 +31,7 @@ import {
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import confirmDialog from "../../utils/asyncConfirm";
+//import confirmDialog from "../../utils/asyncConfirm";
 import CriticalPartsScan from "../../utils/criticalPartsScan";
 import AlertComponent from "../alert/alert.component";
 import JobsAvailableScan from "../jobs-available-scan/jobs-available-scan.component";
@@ -100,14 +100,15 @@ export function JobsAvailableContainer({
   const modalSearchState = useState("");
 
   //Import Scenario
-  const onOwnerFindModalOk = async () => {
+  const onOwnerFindModalOk = async (lazyData) => {
     logImEXEvent("job_import_new");
 
     setOwnerModalVisible(false);
 
     setInsertLoading(true);
-
-    const estData = replaceEmpty(estDataRaw.data.available_jobs_by_pk);
+    const estData = replaceEmpty(
+      lazyData?.available_jobs_by_pk || estDataRaw.data.available_jobs_by_pk
+    );
 
     if (!(estData && estData.est_data)) {
       //We don't have the right data. Error!
@@ -117,17 +118,21 @@ export function JobsAvailableContainer({
       });
       return;
     }
+    // if (process.env.REACT_APP_COUNTRY === "USA") {
+    //Massage the CCC file set to remove duplicate UNQ_SEQ.
+    await ResolveCCCLineIssues(estData.est_data, bodyshop);
+    //   } else {
     //IO-539 Check for Parts Rate on PAL for SGI use case.
     await CheckTaxRates(estData.est_data, bodyshop);
-
-    const newTotals = (
-      await Axios.post("/job/totals", {
-        job: {
-          ...estData.est_data,
-          joblines: estData.est_data.joblines.data,
-        },
-      })
-    ).data;
+    //  }
+    // const newTotals = (
+    //   await Axios.post("/job/totals", {
+    //     job: {
+    //       ...estData.est_data,
+    //       joblines: estData.est_data.joblines.data,
+    //     },
+    //   })
+    // ).data;
 
     let existingVehicles;
     if (estData.est_data.v_vin) {
@@ -142,9 +147,9 @@ export function JobsAvailableContainer({
 
     const newJob = {
       ...estData.est_data,
-      clm_total: Dinero(newTotals.totals.total_repairs).toFormat("0.00"),
-      owner_owing: Dinero(newTotals.totals.custPayable.total).toFormat("0.00"),
-      job_totals: newTotals,
+      // clm_total: Dinero(newTotals.totals.total_repairs).toFormat("0.00"),
+      // owner_owing: Dinero(newTotals.totals.custPayable.total).toFormat("0.00"),
+      // job_totals: newTotals,
       date_open: moment(),
       status: bodyshop.md_ro_statuses.default_imported,
       notes: {
@@ -168,17 +173,23 @@ export function JobsAvailableContainer({
       delete newJob.vehicle;
     }
 
+    if (typeof newJob.kmin === "string") {
+      newJob.kmin = null;
+    }
+
     try {
       const r = await insertNewJob({
         variables: {
           job: newJob,
         },
       });
+      await Axios.post("/job/totalsssu", {
+        id: r.data.insert_jobs.returning[0].id,
+      });
 
       if (CriticalPartsScanning.treatment === "on") {
         CriticalPartsScan(r.data.insert_jobs.returning[0].id);
       }
-
       notification["success"]({
         message: t("jobs.successes.created"),
         onClick: () => {
@@ -192,7 +203,7 @@ export function JobsAvailableContainer({
         operation: AuditTrailMapping.jobimported(),
       });
 
-      deleteJob({
+      await deleteJob({
         variables: { id: estData.id },
       }).then((r) => {
         refetch();
@@ -200,12 +211,12 @@ export function JobsAvailableContainer({
       });
 
       setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
-    } catch (err) {
+    } catch (r) {
       //error while inserting
       notification["error"]({
-        message: t("jobs.errors.creating", { error: err.message }),
+        message: t("jobs.errors.creating", { error: r.message }),
       });
-      refetch().catch((e) => {
+      refetch().catch((err) => {
         console.error(
           `Something went wrong in jobs available table container - ${
             err.message || ""
@@ -214,6 +225,7 @@ export function JobsAvailableContainer({
       });
       setInsertLoading(false);
       setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
+
     }
   };
 
@@ -237,6 +249,7 @@ export function JobsAvailableContainer({
       let supp = replaceEmpty({ ...estData.est_data });
       //IO-539 Check for Parts Rate on PAL for SGI use case.
       await CheckTaxRates(supp, bodyshop);
+      await ResolveCCCLineIssues(supp, bodyshop);
 
       if (updateSchComp.checked === true) {
         if (updateSchComp.automatic === true) {
@@ -428,6 +441,25 @@ export function JobsAvailableContainer({
         updateSchComp={updateSchComp}
         setSchComp={setSchComp}
       />
+      {currentUser.email.includes("@rome.") ||
+      currentUser.email.includes("@imex.") ? (
+        <Button
+          onClick={async () => {
+            for (const record of data.available_jobs) {
+              //Query the data
+              console.log("Start Job", record.id);
+              const { data } = await loadEstData({
+                variables: { id: record.id },
+              });
+              console.log("Query has been awaited and is complete");
+              await onOwnerFindModalOk(data);
+            }
+          }}
+        >
+          Add all jobs as new.
+        </Button>
+      ) : null}
+
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <JobsAvailableTableComponent
@@ -459,115 +491,158 @@ function replaceEmpty(someObj, replaceValue = null) {
 }
 
 async function CheckTaxRates(estData, bodyshop) {
-  //LKQ Check
-  if (
-    !estData.parts_tax_rates?.PAL ||
-    estData.parts_tax_rates?.PAL?.prt_tax_rt === null ||
-    estData.parts_tax_rates?.PAL?.prt_tax_rt === 0
-  ) {
-    const res = await confirmDialog(
-      `ImEX Online has detected that there is a missing tax rate for LKQ parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
-    );
-    if (res) {
-      if (!estData.parts_tax_rates.PAL) {
-        estData.parts_tax_rates.PAL = {
-          prt_discp: 0,
-          prt_mktyp: true,
-          prt_mkupp: 0,
-          prt_type: "PAL",
-        };
-      }
-      estData.parts_tax_rates.PAL.prt_tax_rt =
-        bodyshop.bill_tax_rates.state_tax_rate / 100;
-      estData.parts_tax_rates.PAL.prt_tax_in = true;
-    }
-  }
-  //PAC Check
-  if (
-    !estData.parts_tax_rates?.PAC ||
-    estData.parts_tax_rates?.PAC?.prt_tax_rt === null ||
-    estData.parts_tax_rates?.PAC?.prt_tax_rt === 0
-  ) {
-    const res = await confirmDialog(
-      `ImEX Online has detected that there is a missing tax rate for rechromed parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
-    );
-    if (res) {
-      if (!estData.parts_tax_rates.PAC) {
-        estData.parts_tax_rates.PAC = {
-          prt_discp: 0,
-          prt_mktyp: true,
-          prt_mkupp: 0,
-          prt_type: "PAC",
-        };
-      }
-      estData.parts_tax_rates.PAC.prt_tax_rt =
-        bodyshop.bill_tax_rates.state_tax_rate / 100;
-      estData.parts_tax_rates.PAC.prt_tax_in = true;
-    }
-  }
+  // //LKQ Check
+  // if (
+  //   !estData.parts_tax_rates?.PAL ||
+  //   estData.parts_tax_rates?.PAL?.prt_tax_rt === null ||
+  //   estData.parts_tax_rates?.PAL?.prt_tax_rt === 0
+  // ) {
+  //   const res = await confirmDialog(
+  //     `Rome Online has detected that there is a missing tax rate for LKQ parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
+  //   );
+  //   if (res) {
+  //     if (!estData.parts_tax_rates.PAL) {
+  //       estData.parts_tax_rates.PAL = {
+  //         prt_discp: 0,
+  //         prt_mktyp: true,
+  //         prt_mkupp: 0,
+  //         prt_type: "PAL",
+  //       };
+  //     }
+  //     estData.parts_tax_rates.PAL.prt_tax_rt =
+  //       bodyshop.bill_tax_rates.state_tax_rate / 100;
+  //     estData.parts_tax_rates.PAL.prt_tax_in = true;
+  //   }
+  // }
+  // //PAC Check
+  // if (
+  //   !estData.parts_tax_rates?.PAC ||
+  //   estData.parts_tax_rates?.PAC?.prt_tax_rt === null ||
+  //   estData.parts_tax_rates?.PAC?.prt_tax_rt === 0
+  // ) {
+  //   const res = await confirmDialog(
+  //     `Rome Online has detected that there is a missing tax rate for rechromed parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
+  //   );
+  //   if (res) {
+  //     if (!estData.parts_tax_rates.PAC) {
+  //       estData.parts_tax_rates.PAC = {
+  //         prt_discp: 0,
+  //         prt_mktyp: true,
+  //         prt_mkupp: 0,
+  //         prt_type: "PAC",
+  //       };
+  //     }
+  //     estData.parts_tax_rates.PAC.prt_tax_rt =
+  //       bodyshop.bill_tax_rates.state_tax_rate / 100;
+  //     estData.parts_tax_rates.PAC.prt_tax_in = true;
+  //   }
+  // }
+
   //PAM Check
-  if (
-    !estData.parts_tax_rates?.PAM ||
-    estData.parts_tax_rates?.PAM?.prt_tax_rt === null ||
-    estData.parts_tax_rates?.PAM?.prt_tax_rt === 0
-  ) {
-    const res = await confirmDialog(
-      `ImEX Online has detected that there is a missing tax rate for remanufactured parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
-    );
-    if (res) {
-      if (!estData.parts_tax_rates.PAM) {
-        estData.parts_tax_rates.PAM = {
-          prt_discp: 0,
-          prt_mktyp: true,
-          prt_mkupp: 0,
-          prt_type: "PAM",
-        };
-      }
-      estData.parts_tax_rates.PAM.prt_tax_rt =
-        bodyshop.bill_tax_rates.state_tax_rate / 100;
-      estData.parts_tax_rates.PAM.prt_tax_in = true;
-    }
+  if (!estData.parts_tax_rates?.PAM) {
+    estData.parts_tax_rates.PAM = estData.parts_tax_rates.PAC;
   }
 
-  if (
-    !estData.parts_tax_rates?.PAR ||
-    estData.parts_tax_rates?.PAR?.prt_tax_rt === null ||
-    estData.parts_tax_rates?.PAR?.prt_tax_rt === 0
-  ) {
-    const res = await confirmDialog(
-      `ImEX Online has detected that there is a missing tax rate for recored parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
-    );
-    if (res) {
-      if (!estData.parts_tax_rates.PAR) {
-        estData.parts_tax_rates.PAR = {
-          prt_discp: 0,
-          prt_mktyp: true,
-          prt_mkupp: 0,
-          prt_type: "PAR",
-        };
-      }
-      estData.parts_tax_rates.PAR.prt_tax_rt =
-        bodyshop.bill_tax_rates.state_tax_rate / 100;
-      estData.parts_tax_rates.PAR.prt_tax_in = true;
-    }
-  }
+  // //PAM Check
+  // if (
+  //   !estData.parts_tax_rates?.PAM ||
+  //   estData.parts_tax_rates?.PAM?.prt_tax_rt === null ||
+  //   estData.parts_tax_rates?.PAM?.prt_tax_rt === 0
+  // ) {
+  //   const res = await confirmDialog(
+  //     `Rome Online has detected that there is a missing tax rate for remanufactured parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
+  //   );
+  //   if (res) {
+  //     if (!estData.parts_tax_rates.PAM) {
+  //       estData.parts_tax_rates.PAM = {
+  //         prt_discp: 0,
+  //         prt_mktyp: true,
+  //         prt_mkupp: 0,
+  //         prt_type: "PAM",
+  //       };
+  //     }
+  //     estData.parts_tax_rates.PAM.prt_tax_rt =
+  //       bodyshop.bill_tax_rates.state_tax_rate / 100;
+  //     estData.parts_tax_rates.PAM.prt_tax_in = true;
+  //   }
+  // }
+
+  // if (
+  //   !estData.parts_tax_rates?.PAR ||
+  //   estData.parts_tax_rates?.PAR?.prt_tax_rt === null ||
+  //   estData.parts_tax_rates?.PAR?.prt_tax_rt === 0
+  // ) {
+  //   const res = await confirmDialog(
+  //     `Rome Online has detected that there is a missing tax rate for recored parts. Pressing OK will set the tax rate to ${bodyshop.bill_tax_rates.state_tax_rate}% and enable the rate. Pressing cancel will keep the tax rate as is.`
+  //   );
+  //   if (res) {
+  //     if (!estData.parts_tax_rates.PAR) {
+  //       estData.parts_tax_rates.PAR = {
+  //         prt_discp: 0,
+  //         prt_mktyp: true,
+  //         prt_mkupp: 0,
+  //         prt_type: "PAR",
+  //       };
+  //     }
+  //     estData.parts_tax_rates.PAR.prt_tax_rt =
+  //       bodyshop.bill_tax_rates.state_tax_rate / 100;
+  //     estData.parts_tax_rates.PAR.prt_tax_in = true;
+  //   }
+  // }
 
   //IO-1387 If a sublet line is NOT R&R, use the labor tax. If it is, use the sublet tax rate.
   //Currently limited to SK shops only.
-  //if (bodyshop.region_config === "CA_SK") {
-  estData.joblines.data.forEach((jl, index) => {
-    if (
-      (jl.part_type === "PASL" || jl.part_type === "PAS") &&
-      jl.lbr_op !== "OP11"
-    ) {
-      estData.joblines.data[index].tax_part = jl.lbr_tax;
-    }
+  if (bodyshop.region_config === "CA_SK") {
+    estData.joblines.data.forEach((jl, index) => {
+      if (
+        (jl.part_type === "PASL" || jl.part_type === "PAS") &&
+        jl.lbr_op !== "OP11"
+      ) {
+        estData.joblines.data[index].tax_part = jl.lbr_tax;
+      }
 
-    //Set markup lines and tax lines as taxable.
-    //900510 is a mark up. 900510 is a discount.
-    if (jl.db_ref === "900510") {
-      estData.joblines.data[index].tax_part = true;
+      //Set markup lines and tax lines as taxable.
+      //900510 is a mark up. 900510 is a discount.
+      if (jl.db_ref === "900510") {
+        estData.joblines.data[index].tax_part = true;
+      }
+    });
+  }
+}
+
+async function ResolveCCCLineIssues(estData, bodyshop) {
+  //Find all misc amounts, populate them to the act price.
+  //TODO Ensure that this doesnt get violated
+  //This needs to be done before cleansing unq_seq since some misc prices could move over.
+  estData.joblines.data.forEach((line) => {
+    if (line.misc_amt && line.misc_amt !== 0) {
+      line.act_price = line.act_price + line.misc_amt;
+      line.tax_part = !!line.misc_tax;
     }
   });
-  //}
+
+  //Generate the list of duplicated UNQ_SEQ that will feed into the next section to scrub the lines.
+  const unqSeqHash = _.groupBy(estData.joblines.data, "unq_seq");
+  const duplicatedUnqSeq = Object.keys(unqSeqHash).filter(
+    (key) => unqSeqHash[key].length > 1
+  );
+
+  duplicatedUnqSeq.forEach((unq_seq) => {
+    //Keys are strings, convert to int.
+    const int_unq_seq = parseInt(unq_seq);
+
+    //When line splitting, the first line is always the non-refinish line. We will keep it as is.
+    //We will cleanse the second line, which is always the next line.
+    const nonRefLineIndex = estData.joblines.data.findIndex(
+      (line) => line.unq_seq === int_unq_seq
+    );
+    estData.joblines.data[nonRefLineIndex + 1] = {
+      ...estData.joblines.data[nonRefLineIndex + 1],
+      part_type: null,
+      act_price: 0,
+      db_price: 0,
+      prt_dsmk_p: 0,
+      prt_dsmk_m: 0,
+    };
+  });
 }

client/src/components/jobs-close-auto-allocate/jobs-close-auto-allocate.component.jsx

@@ -36,6 +36,8 @@ export function JobsCloseAutoAllocate({ bodyshop, joblines, form, disabled }) {
             ret.profitcenter_part = defaults.profits["MAPA"];
           } else if (lineDesc.includes("ats amount")) {
             ret.profitcenter_part = defaults.profits["ATS"];
+          } else if (jl.act_price > 0) {
+            ret.profitcenter_part = defaults.profits["PAO"];
           } else {
             ret.profitcenter_part = null;
           }

client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx

@@ -9,10 +9,12 @@ import { createStructuredSelector } from "reselect";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import client from "../../utils/GraphQLClient";
 
 const mapStateToProps = createStructuredSelector({
@@ -20,6 +22,11 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
 });
 
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
 function updateJobCache(items) {
   client.cache.modify({
     id: "ROOT_QUERY",
@@ -40,6 +47,7 @@ export function JobsCloseExportButton({
   disabled,
   setSelectedJobs,
   refetch,
+  insertAuditTrail,
 }) {
   const history = useHistory();
   const { t } = useTranslation();
@@ -181,6 +189,10 @@ export function JobsCloseExportButton({
             key: "jobsuccessexport",
             message: t("jobs.successes.exported"),
           });
+          insertAuditTrail({
+            jobid: jobId,
+            operation: AuditTrailMapping.jobexported(),
+          });
           updateJobCache(
             jobUpdateResponse.data.update_jobs.returning.map((job) => job.id)
           );
@@ -192,12 +204,20 @@ export function JobsCloseExportButton({
           });
         }
       }
-      if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && successfulTransactions.length > 0) {
+      if (
+        bodyshop.accountingconfig &&
+        bodyshop.accountingconfig.qbo &&
+        successfulTransactions.length > 0
+      ) {
         notification.open({
           type: "success",
           key: "jobsuccessexport",
           message: t("jobs.successes.exported"),
         });
+        insertAuditTrail({
+          jobid: jobId,
+          operation: AuditTrailMapping.jobexported(),
+        });
         updateJobCache([
           ...new Set(
             successfulTransactions.map(
@@ -227,4 +247,7 @@ export function JobsCloseExportButton({
   );
 }
 
-export default connect(mapStateToProps, null)(JobsCloseExportButton);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsCloseExportButton);

client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -1,4 +1,4 @@
-import { Collapse, Form, Input, InputNumber, Select, Switch } from "antd";
+import { Collapse, Form, Input, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,6 +12,12 @@ import FormItemPhone, {
 } from "../form-items-formatted/phone-form-item.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
 import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
+
+import JobsDetailRatesLabor from "../jobs-detail-rates/jobs-detail-rates.labor.component";
+import JobsDetailRatesMaterials from "../jobs-detail-rates/jobs-detail-rates.materials.component";
+import JobsDetailRatesOther from "../jobs-detail-rates/jobs-detail-rates.other.component";
+import JobsDetailRatesTaxes from "../jobs-detail-rates/jobs-detail-rates.taxes.component";
+
 import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 const mapStateToProps = createStructuredSelector({
@@ -258,26 +264,28 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               <CurrencyInput />
             </Form.Item>
           </LayoutFormRow>
-          <LayoutFormRow>
-            <Form.Item
-              label={t("jobs.fields.federal_tax_rate")}
-              name="federal_tax_rate"
-            >
-              <InputNumber min={0} max={1} precision={2} />
-            </Form.Item>
-            <Form.Item
-              label={t("jobs.fields.state_tax_rate")}
-              name="state_tax_rate"
-            >
-              <InputNumber min={0} max={1} precision={2} />
-            </Form.Item>
-            <Form.Item
-              label={t("jobs.fields.local_tax_rate")}
-              name="local_tax_rate"
-            >
-              <InputNumber min={0} max={1} precision={2} />
-            </Form.Item>
-          </LayoutFormRow>
+          {
+            // <LayoutFormRow>
+            //   <Form.Item
+            //     label={t("jobs.fields.federal_tax_rate")}
+            //     name="federal_tax_rate"
+            //   >
+            //     <InputNumber min={0} max={1} precision={2} />
+            //   </Form.Item>
+            //   <Form.Item
+            //     label={t("jobs.fields.state_tax_rate")}
+            //     name="state_tax_rate"
+            //   >
+            //     <InputNumber min={0} max={1} precision={2} />
+            //   </Form.Item>
+            //   <Form.Item
+            //     label={t("jobs.fields.local_tax_rate")}
+            //     name="local_tax_rate"
+            //   >
+            //     <InputNumber min={0} max={1} precision={2} />
+            //   </Form.Item>
+            // </LayoutFormRow>
+          }
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
               <CurrencyInput />
@@ -356,6 +364,10 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
         required={selected && true}
         form={form}
       />
+      <JobsDetailRatesLabor form={form} />
+      <JobsDetailRatesMaterials form={form} />
+      <JobsDetailRatesOther form={form} />
+      <JobsDetailRatesTaxes form={form} />
     </div>
   );
 }

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -50,6 +50,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "jobCosting" })),
   setTimeTicketContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+  setTimeTicketTaskContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
   setCardPaymentContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "cardPayment" })),
   insertAuditTrail: ({ jobid, operation }) =>
@@ -67,6 +69,7 @@ export function JobsDetailHeaderActions({
   setJobCostingContext,
   jobRO,
   setTimeTicketContext,
+  setTimeTicketTaskContext,
   setCardPaymentContext,
   insertAuditTrail,
 }) {
@@ -129,6 +132,12 @@ export function JobsDetailHeaderActions({
         },
       },
     });
+    insertAuditTrail({
+      jobid: job.id,
+      operation: AuditTrailMapping.jobsuspend(
+        !!job.suspended ? !job.suspended : true
+      ),
+    });
   };
 
   const statusmenu = (
@@ -276,6 +285,24 @@ export function JobsDetailHeaderActions({
       >
         {t("timetickets.actions.enter")}
       </Menu.Item>
+      {bodyshop.md_tasks_presets.enable_tasks && (
+        <Menu.Item
+          key="claimtimetickettasks"
+          disabled={
+            !job.converted ||
+            (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced)
+          }
+          onClick={() => {
+            setTimeTicketTaskContext({
+              actions: {},
+              context: { jobid: job.id },
+            });
+          }}
+        >
+          {t("timetickets.actions.claimtasks")}
+        </Menu.Item>
+      )}
+
       <Menu.Item
         key="enterpayments"
         disabled={!job.converted}
@@ -540,6 +567,10 @@ export function JobsDetailHeaderActions({
                   notification["success"]({
                     message: t("jobs.successes.voided"),
                   });
+                  insertAuditTrail({
+                    jobid: job.id,
+                    operation: AuditTrailMapping.jobvoid(),
+                  });
                   //go back to jobs list.
                   history.push(`/manage/`);
                 } else {

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -123,11 +123,16 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
             </DataLabel>
             {job.cccontracts.length > 0 && (
               <DataLabel label={t("jobs.labels.contracts")}>
-                {job.cccontracts.map((c) => (
-                  <Link
-                    key={c.id}
-                    to={`/manage/courtesycars/contracts/${c.id}`}
-                  >{`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}</Link>
+                {job.cccontracts.map((c, index) => (
+                  <Space wrap>
+                    <Link
+                      key={c.id}
+                      to={`/manage/courtesycars/contracts/${c.id}`}
+                    >
+                      {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
+                      {index !== job.cccontracts.length - 1 ? "," : null}
+                    </Link>
+                  </Space>
                 ))}
               </DataLabel>
             )}

client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx

@@ -5,9 +5,13 @@ import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
+import PayrollLaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.payroll.component";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
 });
 
 export default connect(mapStateToProps, null)(JobsDetailLaborContainer);
@@ -48,6 +52,7 @@ const adjSpan = {
 };
 
 export function JobsDetailLaborContainer({
+  bodyshop,
   jobRO,
   job,
   jobId,
@@ -58,6 +63,12 @@ export function JobsDetailLaborContainer({
   techConsole,
   adjustments,
 }) {
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
+
   return (
     <Row gutter={[16, 16]}>
       <Col {...ticketSpan}>
@@ -70,14 +81,28 @@ export function JobsDetailLaborContainer({
           jobId={jobId}
         />
       </Col>
-      <Col {...adjSpan}>
-        <LaborAllocationsTableComponent
-          jobId={jobId}
-          joblines={joblines}
-          timetickets={timetickets}
-          adjustments={adjustments}
-        />
-      </Col>
+
+      {Enhanced_Payroll.treatment === "on" ? (
+        <Col {...adjSpan}>
+          <PayrollLaborAllocationsTable
+            jobId={jobId}
+            joblines={joblines}
+            timetickets={timetickets}
+            refetch={refetch}
+            adjustments={adjustments}
+          />
+        </Col>
+      ) : (
+        <Col {...adjSpan}>
+          <LaborAllocationsTableComponent
+            jobId={jobId}
+            joblines={joblines}
+            timetickets={timetickets}
+            refetch={refetch}
+            adjustments={adjustments}
+          />
+        </Col>
+      )}
     </Row>
   );
 }

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -6,12 +6,14 @@ import BillsListTable from "../bills-list-table/bills-list-table.component";
 import JobBillsTotal from "../job-bills-total/job-bills-total.component";
 import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component";
 import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
+import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
 
 export default function JobsDetailPliComponent({
   job,
   billsQuery,
   handleBillOnRowClick,
   handlePartsOrderOnRowClick,
+  handlePartsDispatchOnRowClick,
 }) {
   return (
     <div>
@@ -43,6 +45,13 @@ export default function JobsDetailPliComponent({
             billsQuery={billsQuery}
           />
         </Col>
+        <Col span={24}>
+          <PartsDispatchTable
+            job={job}
+            handleOnRowClick={handlePartsDispatchOnRowClick}
+            billsQuery={billsQuery}
+          />
+        </Col>
       </Row>
     </div>
   );

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -39,12 +39,24 @@ export default function JobsDetailPliContainer({ job }) {
     }
   };
 
+  const handlePartsDispatchOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.partsdispatchid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.partsdispatchid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
   return (
     <JobsDetailPliComponent
       job={job}
       billsQuery={billsQuery}
       handleBillOnRowClick={handleBillOnRowClick}
       handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
+      handlePartsDispatchOnRowClick={handlePartsDispatchOnRowClick}
     />
   );
 }

client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx

@@ -1,25 +1,21 @@
-import {
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  Select,
-  Space,
-  Switch,
-  Tooltip,
-} from "antd";
+import { Divider, Form, Input, Select, Space, Switch, Tooltip } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CABCpvrtCalculator from "../ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component";
+
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
 import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
+import JobsDetailRatesLabor from "./jobs-detail-rates.labor.component";
+import JobsDetailRatesMaterials from "./jobs-detail-rates.materials.component";
+import JobsDetailRatesOther from "./jobs-detail-rates.other.component";
 import JobsDetailRatesParts from "./jobs-detail-rates.parts.component";
+import JobsDetailRatesTaxes from "./jobs-detail-rates.taxes.component";
+import JobsDetailRatesProfileOVerride from "./jobs-detail-rates.profile-override.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -84,14 +80,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
         >
           <CurrencyInput disabled={jobRO || bodyshop.cdk_dealerid} />
         </Form.Item>
-        {bodyshop.region_config === "CA_BC" && (
-          <Space align="center">
-            <Form.Item label={t("jobs.fields.ca_bc_pvrt")} name="ca_bc_pvrt">
-              <CurrencyInput disabled={jobRO} min={0} />
-            </Form.Item>
-            <CABCpvrtCalculator form={form} disabled={jobRO} />
-          </Space>
-        )}
+
         <Form.Item
           label={t("jobs.fields.auto_add_ats")}
           name="auto_add_ats"
@@ -120,41 +109,7 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
           }}
         </Form.Item>
       </FormRow>
-      <FormRow>
-        <Form.Item
-          label={t("jobs.fields.federal_tax_rate")}
-          name="federal_tax_rate"
-        >
-          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.state_tax_rate")}
-          name="state_tax_rate"
-        >
-          <InputNumber
-            min={0}
-            max={1}
-            precision={2}
-            disabled={jobRO}
-            autoComplete="new-password"
-          />
-        </Form.Item>
-        <Form.Item
-          label={t("jobs.fields.local_tax_rate")}
-          name="local_tax_rate"
-        >
-          <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
-        </Form.Item>
-        {bodyshop.region_config.toLowerCase().startsWith("ca") && (
-          <Form.Item
-            label={t("jobs.fields.ca_gst_registrant")}
-            name="ca_gst_registrant"
-            valuePropName="checked"
-          >
-            <Switch disabled={jobRO} />
-          </Form.Item>
-        )}
-      </FormRow>
+
       <Divider
         orientation="left"
         type="horizontal"
@@ -242,7 +197,15 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
           <CurrencyInput min={0} disabled={jobRO} />
         </Form.Item>
       </FormRow>
+      <Divider orientation="left">Tax Profile</Divider>
+
+      <JobsDetailRatesProfileOVerride form={form} />
+
       <JobsDetailRatesParts form={form} />
+      <JobsDetailRatesLabor form={form} />
+      <JobsDetailRatesMaterials form={form} />
+      <JobsDetailRatesOther form={form} />
+      <JobsDetailRatesTaxes form={form} />
     </div>
   );
 }

client/src/components/jobs-detail-rates/jobs-detail-rates.labor.component.jsx

@@ -0,0 +1,427 @@
+import { Collapse, Form, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+});
+
+export function JobsDetailRatesLabor({
+  jobRO,
+  expanded,
+  required = true,
+  form,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Collapse defaultActiveKey={expanded && "rates"}>
+      <Collapse.Panel
+        forceRender
+        header={t("jobs.labels.cieca_pfl")}
+        key="cieca_pfl"
+      >
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAB", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAB", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAB", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAB", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAB", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAB", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAD")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAD", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAD", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAD", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAD", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAD", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAD", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAE")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAE", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAE", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAE", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAE", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAE", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAE", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAF")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAF", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAF", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAF", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAF", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAF", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAF", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAG")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAG", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAG", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAG", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAG", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAG", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAG", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAM")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAM", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAM", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAM", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAM", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAM", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAM", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAR")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAR", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAR", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAR", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAR", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAR", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAR", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAS")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAS", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAS", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAS", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAS", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAS", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAS", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("joblines.fields.lbr_types.LAU")}>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
+            name={["cieca_pfl", "LAU", "lbr_tax_in"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
+            name={["cieca_pfl", "LAU", "lbr_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in2")}
+            name={["cieca_pfl", "LAU", "lbr_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in3")}
+            name={["cieca_pfl", "LAU", "lbr_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in4")}
+            name={["cieca_pfl", "LAU", "lbr_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfl.lbr_tx_in5")}
+            name={["cieca_pfl", "LAU", "lbr_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch disabled={jobRO} />
+          </Form.Item>
+        </LayoutFormRow>
+      </Collapse.Panel>
+    </Collapse>
+  );
+}
+export default connect(mapStateToProps, null)(JobsDetailRatesLabor);

client/src/components/jobs-detail-rates/jobs-detail-rates.materials.component.jsx

@@ -0,0 +1,145 @@
+import { Collapse, Form, Input, InputNumber, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+});
+
+export function JobsDetailRatesMaterials({
+  jobRO,
+  expanded,
+  required = true,
+  form,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Collapse defaultActiveKey={expanded && "rates"}>
+      <Collapse.Panel
+        forceRender
+        header={t("jobs.fields.materials.materials")}
+        key="materials"
+      >
+        <LayoutFormRow header={t("jobs.fields.materials.MAPA")}>
+          <Form.Item
+            label={t("jobs.fields.materials.cal_maxdlr")}
+            name={["materials", "MAPA", "cal_maxdlr"]}
+          >
+            <InputNumber min={0} precision={2} disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.cal_opcode")}
+            name={["materials", "MAPA", "cal_opcode"]}
+          >
+            <Input disabled={jobRO} />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.materials.tax_ind")}
+            name={["materials", "MAPA", "tax_ind"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in1")}
+            name={["materials", "MAPA", "mat_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in2")}
+            name={["materials", "MAPA", "mat_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in3")}
+            name={["materials", "MAPA", "mat_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in4")}
+            name={["materials", "MAPA", "mat_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in5")}
+            name={["materials", "MAPA", "mat_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </LayoutFormRow>
+        <LayoutFormRow header={t("jobs.fields.materials.MASH")}>
+          <Form.Item
+            label={t("jobs.fields.materials.cal_maxdlr")}
+            name={["materials", "MASH", "cal_maxdlr"]}
+          >
+            <InputNumber min={0} precision={2} disabled={jobRO} />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.cal_opcode")}
+            name={["materials", "MASH", "cal_opcode"]}
+          >
+            <Input disabled={jobRO} />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.materials.tax_ind")}
+            name={["materials", "MASH", "tax_ind"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in1")}
+            name={["materials", "MASH", "mat_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in2")}
+            name={["materials", "MASH", "mat_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in3")}
+            name={["materials", "MASH", "mat_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in4")}
+            name={["materials", "MASH", "mat_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.materials.mat_tx_in5")}
+            name={["materials", "MASH", "mat_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </LayoutFormRow>
+      </Collapse.Panel>
+    </Collapse>
+  );
+}
+export default connect(mapStateToProps, null)(JobsDetailRatesMaterials);

client/src/components/jobs-detail-rates/jobs-detail-rates.other.component.jsx

@@ -0,0 +1,104 @@
+import { Collapse, Form, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+});
+
+export function JobsDetailRatesOther({
+  jobRO,
+  expanded,
+  required = true,
+  form,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Collapse defaultActiveKey={expanded && "rates"}>
+      <Collapse.Panel
+        forceRender
+        header={t("jobs.labels.cieca_pfo")}
+        key="cieca_pfo"
+      >
+        <LayoutFormRow noDivider>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.tow_t_in1")}
+            name={["cieca_pfo", "tow_t_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.tow_t_in2")}
+            name={["cieca_pfo", "tow_t_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.tow_t_in3")}
+            name={["cieca_pfo", "tow_t_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.tow_t_in4")}
+            name={["cieca_pfo", "tow_t_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.tow_t_in5")}
+            name={["cieca_pfo", "tow_t_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.stor_t_in1")}
+            name={["cieca_pfo", "stor_t_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.stor_t_in2")}
+            name={["cieca_pfo", "stor_t_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.stor_t_in3")}
+            name={["cieca_pfo", "stor_t_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.stor_t_in4")}
+            name={["cieca_pfo", "stor_t_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.cieca_pfo.stor_t_in5")}
+            name={["cieca_pfo", "stor_t_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </LayoutFormRow>
+      </Collapse.Panel>
+    </Collapse>
+  );
+}
+export default connect(mapStateToProps, null)(JobsDetailRatesOther);

client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx

@@ -29,7 +29,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAA", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -42,7 +42,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAA", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -68,18 +68,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAA", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAA", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAA", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAA", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAA", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAC")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAC", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -92,7 +132,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAC", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -118,18 +158,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAC", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAC", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAC", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAC", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAC", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAL")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAL", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -142,7 +222,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAL", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -168,18 +248,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAL", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAL", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAL", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAL", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAL", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAG")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAG", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -192,7 +312,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAG", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -218,18 +338,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAG", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAG", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAG", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAG", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAG", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAM")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAM", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -242,7 +402,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAM", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -268,18 +428,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAM", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAM", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAM", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAM", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAM", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAN")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAN", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -292,7 +492,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAN", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -318,18 +518,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAN", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAN", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAN", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAN", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAN", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAO")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAO", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -342,7 +582,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAO", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -368,18 +608,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAO", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAO", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAO", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAO", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAO", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAP")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAP", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -392,7 +672,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAP", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -418,18 +698,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAP", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAP", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAP", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAP", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAP", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAR")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAR", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -442,7 +762,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAR", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -468,18 +788,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAR", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAR", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAR", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAR", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAR", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PAS")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PAS", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -492,7 +852,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PAS", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -518,18 +878,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PAS", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PAS", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PAS", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PAS", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PAS", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.PASL")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "PASL", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -542,7 +942,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "PASL", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -568,18 +968,58 @@ export function JobsDetailRatesParts({
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+                  <InputNumber
+                    min={0}
+                    max={100}
+                    precision={4}
+                    disabled={jobRO}
+                  />
                 </Form.Item>
               );
             }}
           </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in1")}
+            name={["parts_tax_rates", "PASL", "prt_tx_in1"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in2")}
+            name={["parts_tax_rates", "PASL", "prt_tx_in2"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in3")}
+            name={["parts_tax_rates", "PASL", "prt_tx_in3"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in4")}
+            name={["parts_tax_rates", "PASL", "prt_tx_in4"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("jobs.fields.parts_tax_rates.prt_tx_in5")}
+            name={["parts_tax_rates", "PASL", "prt_tx_in5"]}
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.CCDR")}>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "CCDR", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -592,7 +1032,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "CCDR", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -605,7 +1045,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_tax_rt")}
             name={["parts_tax_rates", "CCDR", "prt_tax_rt"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.CCF")}>
@@ -613,7 +1053,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "CCF", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -626,7 +1066,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "CCF", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -639,7 +1079,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_tax_rt")}
             name={["parts_tax_rates", "CCF", "prt_tax_rt"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.CCM")}>
@@ -647,7 +1087,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "CCM", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -660,7 +1100,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "CCM", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -673,7 +1113,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_tax_rt")}
             name={["parts_tax_rates", "CCM", "prt_tax_rt"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.CCC")}>
@@ -681,7 +1121,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "CCC", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -694,7 +1134,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "CCC", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -707,7 +1147,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_tax_rt")}
             name={["parts_tax_rates", "CCC", "prt_tax_rt"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.part_types.CCD")}>
@@ -715,7 +1155,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_discp")}
             name={["parts_tax_rates", "CCD", "prt_discp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_mktyp")}
@@ -728,7 +1168,7 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_mkupp")}
             name={["parts_tax_rates", "CCD", "prt_mkupp"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.parts_tax_rates.prt_tax_in")}
@@ -741,39 +1181,39 @@ export function JobsDetailRatesParts({
             label={t("jobs.fields.parts_tax_rates.prt_tax_rt")}
             name={["parts_tax_rates", "CCD", "prt_tax_rt"]}
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow>
           <Form.Item label={t("jobs.fields.tax_tow_rt")} name="tax_tow_rt">
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item label={t("jobs.fields.tax_str_rt")} name="tax_str_rt">
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.tax_paint_mat_rt")}
             name="tax_paint_mat_rt"
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.tax_shop_mat_rt")}
             name="tax_shop_mat_rt"
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item label={t("jobs.fields.tax_sub_rt")} name="tax_sub_rt">
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item label={t("jobs.fields.tax_lbr_rt")} name="tax_lbr_rt">
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
           <Form.Item
             label={t("jobs.fields.tax_levies_rt")}
             name="tax_levies_rt"
           >
-            <InputNumber min={0} max={1} precision={2} disabled={jobRO} />
+            <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
       </Collapse.Panel>

client/src/components/jobs-detail-rates/jobs-detail-rates.profile-override.component.jsx

@@ -0,0 +1,42 @@
+import { Button, Popconfirm } 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";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsDetailRatesProfileOVerride);
+
+export function JobsDetailRatesProfileOVerride({ bodyshop, form }) {
+  const { t } = useTranslation();
+  return (
+    <Popconfirm
+      onConfirm={() => {
+        form.setFieldsValue({
+          cieca_pft: {
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty1,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty2,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty3,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty4,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty5,
+          },
+          materials: bodyshop.md_responsibility_centers.cieca_pfm,
+          cieca_pfl: bodyshop.md_responsibility_centers.cieca_pfl,
+          parts_tax_rates: bodyshop.md_responsibility_centers.parts_tax_rates,
+        });
+      }}
+      title={t("jobs.actions.taxprofileoverride_confirm")}
+    >
+      <Button type="link">{t("jobs.actions.taxprofileoverride")}</Button>
+    </Popconfirm>
+  );
+}

client/src/components/jobs-detail-rates/jobs-detail-rates.taxes.component.jsx

@@ -0,0 +1,155 @@
+import { Collapse, Divider, Form, Input, InputNumber, Space } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
+});
+
+export function JobsDetailRatesTaxes({
+  jobRO,
+  expanded,
+  bodyshop,
+  required = true,
+  form,
+}) {
+  const { t } = useTranslation();
+  const formItems = [];
+  for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
+    const section = [];
+
+    section.push(
+      TaxFormItems({
+        typeNum: tyCounter,
+        rootElements: true,
+        bodyshop,
+        jobRO,
+      })
+    );
+
+    for (let iterator = 1; iterator <= 5; iterator++) {
+      section.push(
+        TaxFormItems({
+          typeNum: tyCounter,
+          typeNumIterator: iterator,
+          rootElements: false,
+          jobRO,
+        })
+      );
+    }
+    formItems.push(Space({ children: section, wrap: true }));
+    formItems.push(<Divider />);
+  }
+  return (
+    <Collapse defaultActiveKey={expanded && "rates"}>
+      <Collapse.Panel
+        forceRender
+        header={t("jobs.labels.cieca_pft")}
+        key="cieca_pft"
+      >
+        {formItems}
+      </Collapse.Panel>
+    </Collapse>
+  );
+}
+export default connect(mapStateToProps, null)(JobsDetailRatesTaxes);
+
+function TaxFormItems({
+  typeNum,
+  typeNumIterator,
+  rootElements,
+  bodyshopjobRO,
+  jobRO,
+}) {
+  const { t } = useTranslation();
+
+  if (rootElements)
+    return (
+      <>
+        <Form.Item
+          label={t("bodyshop.fields.responsibilitycenter_tax_type", {
+            typeNum,
+            typeNumIterator,
+          })}
+          // rules={[
+          //   {
+          //     required: true,
+          //     //message: t("general.validation.required"),
+          //   },
+          // ]}
+          name={["cieca_pft", `tax_type${typeNum}`]}
+        >
+          <Input disabled={jobRO} />
+        </Form.Item>
+      </>
+    );
+
+  return (
+    <>
+      <Form.Item
+        label={t("bodyshop.fields.responsibilitycenter_tax_tier", {
+          typeNum,
+          typeNumIterator,
+        })}
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+        name={["cieca_pft", `ty${typeNum}_tier${typeNumIterator}`]}
+      >
+        <InputNumber precision={0} min={0} disabled={jobRO} />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.responsibilitycenter_tax_thres", {
+          typeNum,
+          typeNumIterator,
+        })}
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+        name={["cieca_pft", `ty${typeNum}_thres${typeNumIterator}`]}
+      >
+        <InputNumber min={0} precision={2} disabled={jobRO} />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.responsibilitycenter_tax_rate", {
+          typeNum,
+          typeNumIterator,
+        })}
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+        name={["cieca_pft", `ty${typeNum}_rate${typeNumIterator}`]}
+      >
+        <InputNumber min={0} precision={2} disabled={jobRO} />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.responsibilitycenter_tax_sur", {
+          typeNum,
+          typeNumIterator,
+        })}
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+        name={["cieca_pft", `ty${typeNum}_sur${typeNumIterator}`]}
+      >
+        <InputNumber min={0} precision={2} disabled={jobRO} />
+      </Form.Item>
+    </>
+  );
+}

client/src/components/jobs-export-all-button/jobs-export-all-button.component.jsx

@@ -9,10 +9,12 @@ import { createStructuredSelector } from "reselect";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_JOBS } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import client from "../../utils/GraphQLClient";
 
 const mapStateToProps = createStructuredSelector({
@@ -20,6 +22,11 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
 });
 
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
 function updateJobCache(items) {
   client.cache.modify({
     id: "ROOT_QUERY",
@@ -41,6 +48,7 @@ export function JobsExportAllButton({
   loadingCallback,
   completedCallback,
   refetch,
+  insertAuditTrail,
 }) {
   const { t } = useTranslation();
   const [updateJob] = useMutation(UPDATE_JOBS);
@@ -177,6 +185,12 @@ export function JobsExportAllButton({
                 key: "jobsuccessexport",
                 message: t("jobs.successes.exported"),
               });
+              jobUpdateResponse.data.update_jobs.returning.forEach((job) => {
+                insertAuditTrail({
+                  jobid: job.id,
+                  operation: AuditTrailMapping.jobexported(),
+                });
+              });
               updateJobCache(
                 jobUpdateResponse.data.update_jobs.returning.map(
                   (job) => job.id
@@ -190,13 +204,17 @@ export function JobsExportAllButton({
               });
             }
           }
-          if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && successfulTransactions.length > 0) {
+          if (
+            bodyshop.accountingconfig &&
+            bodyshop.accountingconfig.qbo &&
+            successfulTransactions.length > 0
+          ) {
             notification.open({
               type: "success",
               key: "jobsuccessexport",
               message: t("jobs.successes.exported"),
             });
-            updateJobCache([
+            const successfulTransactionsSet = [
               ...new Set(
                 successfulTransactions.map(
                   (st) =>
@@ -207,7 +225,14 @@ export function JobsExportAllButton({
                     ]
                 )
               ),
-            ]);
+            ];
+            if (successfulTransactionsSet.length > 0) {
+              insertAuditTrail({
+                jobid: successfulTransactionsSet[0],
+                operation: AuditTrailMapping.jobexported(),
+              });
+            }
+            updateJobCache(successfulTransactionsSet);
           }
         }
       })
@@ -225,4 +250,7 @@ export function JobsExportAllButton({
   );
 }
 
-export default connect(mapStateToProps, null)(JobsExportAllButton);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsExportAllButton);

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -0,0 +1,333 @@
+import {
+  Button,
+  Card,
+  Col,
+  Row,
+  Space,
+  Table,
+  Typography,
+  notification,
+} from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+import axios from "axios";
+import _ from "lodash";
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import "./labor-allocations-table.styles.scss";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  technician: selectTechnician,
+});
+
+export function PayrollLaborAllocationsTable({
+  jobId,
+  joblines,
+  timetickets,
+  bodyshop,
+  adjustments,
+  technician,
+  refetch,
+}) {
+  const { t } = useTranslation();
+  const [totals, setTotals] = useState([]);
+  const [state, setState] = useState({
+    sortedInfo: {
+      columnKey: "cost_center",
+      field: "cost_center",
+      order: "ascend",
+    },
+    filteredInfo: {},
+  });
+
+  useEffect(() => {
+    async function CalculateTotals() {
+      const { data } = await axios.post("/payroll/calculatelabor", {
+        jobid: jobId,
+      });
+      setTotals(data);
+    }
+
+    if (!!joblines && !!timetickets && !!bodyshop) {
+      CalculateTotals();
+    }
+    if (!jobId) setTotals([]);
+  }, [joblines, timetickets, bodyshop, adjustments, jobId]);
+
+  const convertedLines = useMemo(
+    () => joblines && joblines.filter((j) => j.convertedtolbr),
+    [joblines]
+  );
+
+  const columns = [
+    {
+      title: t("timetickets.fields.employee"),
+      dataIndex: "employeeid",
+      key: "employeeid",
+      render: (text, record) => {
+        if (record.employeeid === undefined) {
+          return (
+            <span style={{ color: "tomato", fontWeight: "bolder" }}>
+              {t("timetickets.labels.unassigned")}
+            </span>
+          );
+        }
+        const emp = bodyshop.employees.find((e) => e.id === record.employeeid);
+        return `${emp?.first_name} ${emp?.last_name}`;
+      },
+    },
+    {
+      title: t("joblines.fields.mod_lbr_ty"),
+      dataIndex: "mod_lbr_ty",
+      key: "mod_lbr_ty",
+      render: (text, record) =>
+        record.employeeid === undefined ? (
+          <span style={{ color: "tomato", fontWeight: "bolder" }}>
+            {t("timetickets.labels.unassigned")}
+          </span>
+        ) : (
+          t(`joblines.fields.lbr_types.${record.mod_lbr_ty?.toUpperCase()}`)
+        ),
+    },
+    // {
+    //   title: t("timetickets.fields.rate"),
+    //   dataIndex: "rate",
+    //   key: "rate",
+    // },
+    {
+      title: t("jobs.labels.hrs_total"),
+      dataIndex: "expectedHours",
+      key: "expectedHours",
+      sorter: (a, b) => a.expectedHours - b.expectedHours,
+      sortOrder:
+        state.sortedInfo.columnKey === "expectedHours" &&
+        state.sortedInfo.order,
+      render: (text, record) => record.expectedHours.toFixed(5),
+    },
+    {
+      title: t("jobs.labels.hrs_claimed"),
+      dataIndex: "claimedHours",
+      key: "claimedHours",
+      sorter: (a, b) => a.claimedHours - b.claimedHours,
+      sortOrder:
+        state.sortedInfo.columnKey === "claimedHours" && state.sortedInfo.order,
+      render: (text, record) =>
+        record.claimedHours && record.claimedHours.toFixed(5),
+    },
+    {
+      title: t("jobs.labels.difference"),
+      dataIndex: "difference",
+
+      key: "difference",
+      sorter: (a, b) => a.difference - b.difference,
+      sortOrder:
+        state.sortedInfo.columnKey === "difference" && state.sortedInfo.order,
+      render: (text, record) => {
+        const difference = _.round(
+          record.expectedHours - record.claimedHours,
+          5
+        );
+
+        return (
+          <strong
+            style={{
+              color: difference >= 0 ? "green" : "red",
+            }}
+          >
+            {difference}
+          </strong>
+        );
+      },
+    },
+  ];
+  const convertedTableCols = [
+    {
+      title: t("joblines.fields.line_desc"),
+      dataIndex: "line_desc",
+      key: "line_desc",
+      ellipsis: true,
+    },
+    {
+      title: t("joblines.fields.op_code_desc"),
+      dataIndex: "op_code_desc",
+      key: "op_code_desc",
+      ellipsis: true,
+      render: (text, record) =>
+        `${record.op_code_desc || ""}${
+          record.alt_partm ? ` ${record.alt_partm}` : ""
+        }`,
+    },
+
+    {
+      title: t("joblines.fields.act_price"),
+      dataIndex: "act_price",
+      key: "act_price",
+      ellipsis: true,
+      render: (text, record) => (
+        <>
+          <CurrencyFormatter>
+            {record.db_ref === "900510" || record.db_ref === "900511"
+              ? record.prt_dsmk_m
+              : record.act_price}
+          </CurrencyFormatter>
+          {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
+            <span
+              style={{ marginLeft: ".2rem" }}
+            >{`(${record.prt_dsmk_p}%)`}</span>
+          ) : (
+            <></>
+          )}
+        </>
+      ),
+    },
+    {
+      title: t("joblines.fields.part_qty"),
+      dataIndex: "part_qty",
+      key: "part_qty",
+    },
+    {
+      title: t("joblines.fields.mod_lbr_ty"),
+      dataIndex: "conv_mod_lbr_ty",
+      key: "conv_mod_lbr_ty",
+      render: (text, record) =>
+        record.convertedtolbr_data && record.convertedtolbr_data.mod_lbr_ty,
+    },
+    {
+      title: t("joblines.fields.mod_lb_hrs"),
+      dataIndex: "conv_mod_lb_hrs",
+      key: "conv_mod_lb_hrs",
+      render: (text, record) =>
+        record.convertedtolbr_data &&
+        record.convertedtolbr_data.mod_lb_hrs &&
+        record.convertedtolbr_data.mod_lb_hrs.toFixed(5),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const summary =
+    totals &&
+    totals.reduce(
+      (acc, val) => {
+        acc.hrs_total += val.expectedHours;
+        acc.hrs_claimed += val.claimedHours;
+        // acc.adjustments += val.adjustments;
+        acc.difference += val.expectedHours - val.claimedHours;
+        return acc;
+      },
+      { hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 }
+    );
+
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <Card
+          title={t("jobs.labels.laborallocations")}
+          extra={
+            <Space>
+              <Button
+                onClick={async () => {
+                  const response = await axios.post("/payroll/payall", {
+                    jobid: jobId,
+                  });
+
+                  if (response.status === 200) {
+                    if (response.data.success !== false) {
+                      notification.open({
+                        type: "success",
+                        message: t("timetickets.successes.payall"),
+                      });
+                    } else {
+                      notification.open({
+                        type: "error",
+                        message: t("timetickets.errors.payall", {
+                          error: response.data.error,
+                        }),
+                      });
+                    }
+
+                    if (refetch) refetch();
+                  } else {
+                    notification.open({
+                      type: "error",
+                      message: t("timetickets.errors.payall", {
+                        error: JSON.stringify(""),
+                      }),
+                    });
+                  }
+                }}
+              >
+                {t("timetickets.actions.payall")}
+              </Button>
+              <Button
+                onClick={async () => {
+                  const { data } = await axios.post("/payroll/calculatelabor", {
+                    jobid: jobId,
+                  });
+                  setTotals(data);
+                  refetch();
+                }}
+              >
+                <SyncOutlined />
+              </Button>
+            </Space>
+          }
+        >
+          <Table
+            columns={columns}
+            rowKey={(record) => `${record.employeeid} ${record.mod_lbr_ty}`}
+            pagination={false}
+            onChange={handleTableChange}
+            dataSource={totals}
+            scroll={{
+              x: true,
+            }}
+            summary={() => (
+              <Table.Summary.Row>
+                <Table.Summary.Cell>
+                  <Typography.Title level={4}>
+                    {t("general.labels.totals")}
+                  </Typography.Title>
+                </Table.Summary.Cell>
+                <Table.Summary.Cell></Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  {summary.hrs_total.toFixed(5)}
+                </Table.Summary.Cell>
+                <Table.Summary.Cell>
+                  {summary.hrs_claimed.toFixed(5)}
+                </Table.Summary.Cell>
+
+                <Table.Summary.Cell>
+                  {summary.difference.toFixed(5)}
+                </Table.Summary.Cell>
+              </Table.Summary.Row>
+            )}
+          />
+        </Card>
+      </Col>
+      {convertedLines && convertedLines.length > 0 && (
+        <Col span={24}>
+          <Card title={t("jobs.labels.convertedtolabor")}>
+            <Table
+              columns={convertedTableCols}
+              rowKey="id"
+              pagination={false}
+              dataSource={convertedLines}
+              scroll={{
+                x: true,
+              }}
+            />
+          </Card>
+        </Col>
+      )}
+    </Row>
+  );
+}
+export default connect(mapStateToProps, null)(PayrollLaborAllocationsTable);

client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx

@@ -0,0 +1,81 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Col, Row, Table, notification } from "antd";
+import moment from "moment-business-days";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_PARTS_DISPATCH_LINE } from "../../graphql/parts-dispatch.queries";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+
+export default function PartsDispatchExpander({ dispatch, job }) {
+  const { t } = useTranslation();
+  const [updateDispatchLine] = useMutation(UPDATE_PARTS_DISPATCH_LINE);
+
+  const handleAccept = async ({ partsDispatchLineId }) => {
+    const accepted_at = moment();
+    const result = await updateDispatchLine({
+      variables: { id: partsDispatchLineId, line: { accepted_at } },
+      optimisticResponse: {
+        update_parts_dispatch_lines_by_pk: {
+          accepted_at,
+          id: partsDispatchLineId,
+        },
+      },
+    });
+    if (result.errors) {
+      notification.open({
+        type: "error",
+        message: t("parts_dispatch.errors.accepting", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+  };
+
+  const columns = [
+    {
+      title: t("joblines.fields.part_qty"),
+      dataIndex: "quantity",
+      key: "quantity",
+      width: "10%",
+      //sorter: (a, b) => alphaSort(a.number, b.number),
+    },
+    {
+      title: t("joblines.fields.line_desc"),
+      dataIndex: "joblineid",
+      key: "joblineid",
+      //sorter: (a, b) => alphaSort(a.number, b.number),
+      render: (text, record) => record.jobline.line_desc,
+    },
+    {
+      title: t("parts_dispatch_lines.fields.accepted_at"),
+      dataIndex: "accepted_at",
+      key: "accepted_at",
+      width: "20%",
+
+      //sorter: (a, b) => alphaSort(a.number, b.number),
+      render: (text, record) =>
+        record.accepted_at ? (
+          <DateTimeFormatter>{record.accepted_at}</DateTimeFormatter>
+        ) : (
+          <Button
+            onClick={() => handleAccept({ partsDispatchLineId: record.id })}
+          >
+            {t("parts_dispatch.actions.accept")}
+          </Button>
+        ),
+    },
+  ];
+  return (
+    <Card>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Table
+            rowKey={"id"}
+            dataSource={dispatch.parts_dispatch_lines}
+            columns={columns}
+          />
+        </Col>
+      </Row>
+    </Card>
+  );
+}

client/src/components/parts-dispatch-table/parts-dispatch-table.component.jsx

@@ -0,0 +1,155 @@
+import {
+  MinusCircleTwoTone,
+  PlusCircleTwoTone,
+  SyncOutlined,
+} from "@ant-design/icons";
+import { Button, Card, Input, Space, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
+import PartsDispatchExpander from "../parts-dispatch-expander/parts-dispatch-expander.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+
+const mapStateToProps = createStructuredSelector({
+  jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export function PartDispatchTableComponent({
+  bodyshop,
+  jobRO,
+  job,
+  billsQuery,
+  handleOnRowClick,
+}) {
+  const { t } = useTranslation();
+
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  // const search = queryString.parse(useLocation().search);
+  // const selectedBill = search.billid;
+  const [searchText, setSearchText] = useState("");
+
+  const Templates = TemplateList("job_special");
+
+  const { refetch } = billsQuery;
+
+  const recordActions = (record) => (
+    <Space wrap>
+      <PrintWrapperComponent
+        templateObject={{
+          name: Templates.parts_dispatch.key,
+          variables: { id: record.id },
+        }}
+      />
+    </Space>
+  );
+  const columns = [
+    {
+      title: t("parts_dispatch.fields.number"),
+      dataIndex: "number",
+      key: "number",
+      sorter: (a, b) => alphaSort(a.number, b.number),
+      width: "10%",
+      sortOrder:
+        state.sortedInfo.columnKey === "number" && state.sortedInfo.order,
+    },
+    {
+      title: t("timetickets.fields.employee"),
+      dataIndex: "employeeid",
+      key: "employeeid",
+      sorter: (a, b) => alphaSort(a.employeeid, b.employeeid),
+      sortOrder:
+        state.sortedInfo.columnKey === "employeeid" && state.sortedInfo.order,
+      render: (text, record) => {
+        const e = bodyshop.employees.find((e) => e.id === record.employeeid);
+        return `${e?.first_name || ""} ${e?.last_name || ""}`.trim();
+      },
+    },
+    {
+      title: t("parts_dispatch.fields.percent_accepted"),
+      dataIndex: "percent_accepted",
+      key: "percent_accepted",
+
+      render: (text, record) =>
+        record.parts_dispatch_lines.length > 0
+          ? `
+              ${(
+                (record.parts_dispatch_lines.filter((l) => l.accepted_at)
+                  .length /
+                  record.parts_dispatch_lines.length) *
+                100
+              ).toFixed(0)}%`
+          : "0%",
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      width: "10%",
+      render: (text, record) => recordActions(record, true),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("parts_dispatch.labels.parts_dispatch")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            value={searchText}
+            onChange={(e) => {
+              e.preventDefault();
+              setSearchText(e.target.value);
+            }}
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={billsQuery.loading}
+        scroll={{
+          x: true, // y: "50rem"
+        }}
+        expandable={{
+          expandedRowRender: (record) => (
+            <PartsDispatchExpander dispatch={record} job={job} />
+          ),
+          rowExpandable: (record) => true,
+
+          expandIcon: ({ expanded, onExpand, record }) =>
+            expanded ? (
+              <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+            ) : (
+              <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+            ),
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={billsQuery.data ? billsQuery.data.parts_dispatch : []}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PartDispatchTableComponent);

client/src/components/payment-expanded-row/payment-expanded-row.component.jsx

@@ -59,8 +59,8 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
     await insertPayment({
       variables: {
         paymentInput: {
-          amount: -refund_response.data.amount,
-          transactionid: payment_response.response.receiptelements.transid,
+          amount: -refund_response?.data?.amount,
+          transactionid: payment_response?.response?.receiptelements?.transid,
           payer: record.payer,
           type: "Refund",
           jobid: payment_response.jobid,

client/src/components/print-center-jobs/print-center-jobs.component.jsx

@@ -1,3 +1,4 @@
+import { useTreatments } from "@splitsoftware/splitio-react";
 import { Card, Col, Input, Row, Space, Typography } from "antd";
 import _ from "lodash";
 import React, { useState } from "react";
@@ -23,8 +24,13 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop }) {
   const { id: jobId, job } = printCenterModal.context;
   const tempList = TemplateList("job", {});
   const { t } = useTranslation();
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
 
-  const JobsReportsList =
+  const Templates =
     bodyshop.cdk_dealerid === null && bodyshop.pbs_serialnumber === null
       ? Object.keys(tempList)
           .map((key) => {
@@ -51,7 +57,26 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop }) {
                 bodyshop.region_config.includes(Object.keys(temp.regions)) ===
                   true)
           );
-
+  const JobsReportsList =
+    Enhanced_Payroll.treatment === "on"
+      ? Object.keys(Templates)
+          .map((key) => {
+            return Templates[key];
+          })
+          .filter(
+            (temp) =>
+              temp.enhanced_payroll === undefined ||
+              temp.enhanced_payroll === true
+          )
+      : Object.keys(Templates)
+          .map((key) => {
+            return Templates[key];
+          })
+          .filter(
+            (temp) =>
+              temp.enhanced_payroll === undefined ||
+              temp.enhanced_payroll === false
+          );
   const filteredJobsReportsList =
     search !== ""
       ? JobsReportsList.filter((r) =>

client/src/components/print-wrapper/print-wrapper.component.jsx

@@ -9,9 +9,11 @@ export default function PrintWrapperComponent({
   children,
   id,
   emailOnly = false,
+  disabled,
 }) {
   const [loading, setLoading] = useState(false);
   const handlePrint = async (type) => {
+    if (disabled) return;
     setLoading(true);
     await GenerateDocument(templateObject, messageObject, type, id);
     setLoading(false);
@@ -20,8 +22,18 @@ export default function PrintWrapperComponent({
   return (
     <Space>
       {children || null}
-      {!emailOnly && <PrinterFilled onClick={() => handlePrint("p")} />}
-      <MailFilled onClick={() => handlePrint("e")} />
+      {!emailOnly && (
+        <PrinterFilled
+          disabled={disabled}
+          onClick={() => handlePrint("p")}
+          style={{ cursor: disabled ? "not-allowed" : null }}
+        />
+      )}
+      <MailFilled
+        disabled={disabled}
+        onClick={() => handlePrint("e")}
+        style={{ cursor: disabled ? "not-allowed" : null }}
+      />
       {loading && <Spin />}
     </Space>
   );

client/src/components/production-board-kanban/production-board-kanban.utils.js

@@ -18,8 +18,8 @@ const sortByParentId = (arr) => {
   //console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
 
   while (byParentsIdsList[parentId]) {
-    sortedList.push(byParentsIdsList[parentId][0]);
-    parentId = byParentsIdsList[parentId][0].id;
+    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"])

client/src/components/production-list-columns/production-list-columns.data.js

@@ -25,6 +25,8 @@ import ProductionListColumnNote from "./production-list-columns.productionnote.c
 import ProductionListColumnCategory from "./production-list-columns.status.category";
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
+import { store } from "../../redux/store";
+import { setModalContext } from "../../redux/modals/modals.actions";
 
 const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
   return [
@@ -39,6 +41,29 @@ const r = ({ technician, state, activeStatuses, data, bodyshop }) => {
         </Link>
       ),
     },
+    {
+      title: i18n.t("timetickets.actions.claimtasks"),
+      dataIndex: "claimtasks",
+      key: "claimtasks",
+      ellipsis: true,
+      render: (text, record) => (
+        <div
+          onClick={() => {
+            store.dispatch(
+              setModalContext({
+                context: {
+                  actions: {},
+                  context: { jobid: record.id },
+                },
+                modal: "timeTicketTask",
+              })
+            );
+          }}
+        >
+          {i18n.t("timetickets.actions.claimtasks")}
+        </div>
+      ),
+    },
     {
       title: i18n.t("jobs.fields.ro_number"),
       dataIndex: "ro_number",

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -97,7 +97,7 @@ export function ProductionListDetail({
         />
       }
       placement="right"
-      width={"33%"}
+      width={"50%"}
       onClose={handleClose}
       visible={selected}
     >

client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx

@@ -1,52 +1,414 @@
 import {Button, Card, Checkbox, Col, Form, Input, InputNumber, Row, Select} from "antd";
-import React, {useEffect, useState} from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {fetchFilterData} from "../../utils/RenderTemplate";
 import {DeleteFilled} from "@ant-design/icons";
 import {useTranslation} from "react-i18next";
-import {getOperatorsByType} from "../../utils/graphQLmodifier";
+import {getOrderOperatorsByType, getWhereOperatorsByType} from "../../utils/graphQLmodifier";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import {generateInternalReflections} from "./report-center-modal-utils";
+import {FormDatePicker} from "../form-date-picker/form-date-picker.component.jsx";
 
-export default function ReportCenterModalFiltersSortersComponent({form}) {
+export default function ReportCenterModalFiltersSortersComponent({form, bodyshop}) {
     return (
         <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
             {() => {
                 const key = form.getFieldValue("key");
-                return <RenderFilters form={form} templateId={key}/>;
+                return <RenderFilters form={form} templateId={key} bodyshop={bodyshop}/>;
             }}
         </Form.Item>
     );
 }
 
-function RenderFilters({templateId, form}) {
+/**
+ * Filters Section
+ * @param filters
+ * @param form
+ * @param bodyshop
+ * @returns {JSX.Element}
+ * @constructor
+ */
+function FiltersSection({filters, form, bodyshop}) {
+    const {t} = useTranslation();
+
+    return (
+        <Card type='inner' title={t('reportcenter.labels.advanced_filters_filters')} style={{marginTop: '10px'}}>
+            <Form.List name={["filters"]}>
+                {(fields, {add, remove}) => {
+                    return (
+                        <div>
+                            {fields.map((field, index) => (
+                                <Form.Item key={field.key}>
+                                    <Row gutter={[16, 16]}>
+                                        <Col span={10}>
+                                            <Form.Item
+                                                key={`${index}field`}
+                                                label={t('reportcenter.labels.advanced_filters_filter_field')}
+                                                name={[field.name, "field"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Select
+                                                    getPopupContainer={trigger => trigger.parentNode}
+                                                    onChange={() => {
+                                                        // Clear related Fields
+                                                        form.setFieldValue(['filters', field.name, 'value'], null);
+                                                        form.setFieldValue(['filters', field.name, 'operator'], null);
+                                                    }}
+                                                    options={
+                                                        filters.map((f) => {
+                                                            return {
+                                                                value: f.name,
+                                                                label: f?.translation ? (t(f.translation) === f.translation ? f.label : t(f.translation)) : f.label,
+                                                            }
+                                                        })
+                                                    }
+                                                />
+                                            </Form.Item>
+                                        </Col>
+                                        <Col span={6}>
+                                            <Form.Item
+                                                dependencies={[['filters', field.name, "field"],['filters', field.name, "value"]]}
+                                            >
+                                                {
+                                                    () => {
+                                                        const name = form.getFieldValue(['filters', field.name, "field"]);
+                                                        const type = filters.find(f => f.name === name)?.type;
+
+                                                        return <Form.Item
+                                                            key={`${index}operator`}
+                                                            label={t('reportcenter.labels.advanced_filters_filter_operator')}
+                                                            name={[field.name, "operator"]}
+                                                            rules={[
+                                                                {
+                                                                    required: true,
+                                                                    //message: t("general.validation.required"),
+                                                                },
+                                                            ]}
+                                                        >
+                                                            <Select
+                                                                getPopupContainer={trigger => trigger.parentNode}
+                                                                options={   getWhereOperatorsByType(type)}
+                                                                onChange={() => {
+                                                                    // Clear related Fields
+
+                                                                    form.setFieldValue(['filters', field.name, 'value'], undefined);
+                                                                }}
+                                                            />
+                                                        </Form.Item>
+                                                    }
+                                                }
+                                            </Form.Item>
+                                        </Col>
+                                        <Col span={6}>
+                                            <Form.Item dependencies={[
+                                                ['filters', field.name, "field"],
+                                                ['filters', field.name, "operator"]
+                                            ]}
+                                            >
+                                                {
+                                                    () => {
+                                                        // Because it looks cleaner than inlining.
+                                                        const name = form.getFieldValue(['filters', field.name, "field"]);
+                                                        const type = filters.find(f => f.name === name)?.type;
+                                                        const reflector = filters.find(f => f.name === name)?.reflector;
+                                                        const operator = form.getFieldValue(['filters', field.name, "operator"]);
+                                                        const operatorType = operator ? getWhereOperatorsByType(type).find((o) => o.value === operator)?.type : null;
+
+                                                        return <Form.Item
+                                                            key={`${index}value`}
+                                                            label={t('reportcenter.labels.advanced_filters_filter_value')}
+                                                            name={[field.name, "value"]}
+                                                            rules={[
+                                                                {
+                                                                    required: true,
+                                                                    //message: t("general.validation.required"),
+                                                                },
+                                                            ]}
+                                                        >
+                                                            {
+                                                                (() => {
+                                                                    const generateReflections = (reflector) => {
+                                                                        if (!reflector) return [];
+
+                                                                        const {name} = reflector;
+                                                                        const path = name?.split('.');
+                                                                        const upperPath = path?.[0];
+                                                                        const finalPath = path?.slice(1).join('.');
+
+                                                                        return generateInternalReflections({
+                                                                            bodyshop,
+                                                                            upperPath,
+                                                                            finalPath
+                                                                        });
+                                                                    };
+
+                                                                    const reflections = reflector ? generateReflections(reflector) : [];
+                                                                    const fieldPath = [[field.name, "value"]];
+                                                                    // We have reflections so we will use a select box
+                                                                    if (reflections.length > 0) {
+                                                                        // We have reflections and the operator type is array, so we will use a select box with multiple options
+                                                                        if (operatorType === "array") {
+                                                                            return (
+                                                                                <Select
+                                                                                    disabled={!operator}
+                                                                                    mode="multiple"
+                                                                                    options={reflections}
+                                                                                    getPopupContainer={trigger => trigger.parentNode}
+                                                                                    onChange={(value) => {
+                                                                                        form.setFieldValue(fieldPath, value);
+                                                                                    }}
+                                                                                />
+                                                                            );
+                                                                        }
+                                                                        return (
+                                                                            <Select
+                                                                                options={reflections}
+                                                                                getPopupContainer={trigger => trigger.parentNode}
+                                                                                onChange={(value) => {
+                                                                                    form.setFieldValue(fieldPath, value);
+                                                                                }}
+                                                                            />
+                                                                        );
+                                                                    }
+
+                                                                    // We have a type of number, so we will use a number input
+                                                                    if (type === "number") {
+                                                                        return (
+                                                                            <InputNumber
+                                                                                disabled={!operator}
+                                                                                onChange={(value) => form.setFieldValue(fieldPath, value)}/>
+                                                                        );
+                                                                    }
+
+                                                                    // We have a type of date, so we will use a date picker
+                                                                    if (type === "date") {
+                                                                        return (
+                                                                            <FormDatePicker
+                                                                                disabled={!operator}
+                                                                                onChange={(date) => form.setFieldValue(fieldPath, date)}
+                                                                            />
+                                                                        );
+                                                                    }
+
+                                                                    // we have a type of boolean, so we will use a select box with a true or false option.
+                                                                    if (type === "boolean" || type === "bool") {
+                                                                        return (
+                                                                            <Select
+                                                                                disabled={!operator}
+                                                                                getPopupContainer={trigger => trigger.parentNode}
+                                                                                options={[
+                                                                                    {
+                                                                                        label: t('reportcenter.labels.advanced_filters_true'),
+                                                                                        value: true
+                                                                                    },
+                                                                                    {
+                                                                                        label: t('reportcenter.labels.advanced_filters_false'),
+                                                                                        value: false
+                                                                                    }
+                                                                                ]}
+                                                                                onChange={(value) => form.setFieldValue(fieldPath, value)}
+                                                                            />
+                                                                        );
+                                                                    }
+                                                                    return (
+                                                                        <Input
+                                                                            disabled={!operator}
+                                                                            onChange={(e) => form.setFieldValue(fieldPath, e.target.value)}
+                                                                        />
+                                                                    );
+                                                                })()
+                                                            }
+                                                        </Form.Item>
+                                                    }
+                                                }
+                                            </Form.Item>
+
+                                        </Col>
+                                        <Col span={2}>
+                                            <DeleteFilled
+                                                style={{margin: "1rem", paddingTop: '23px'}}
+                                                onClick={() => {
+                                                    remove(field.name);
+                                                }}
+                                            />
+                                        </Col>
+                                    </Row>
+                                </Form.Item>
+                            ))}
+                            <Form.Item>
+                                <Button
+                                    type="dashed"
+                                    onClick={() => {
+                                        add();
+                                    }}
+                                    style={{width: "100%"}}
+                                >
+                                    {t("general.actions.add")}
+                                </Button>
+                            </Form.Item>
+                        </div>
+                    );
+                }}
+            </Form.List>
+        </Card>
+    );
+}
+
+/**
+ * Sorters Section
+ * @param sorters
+ * @param form
+ * @returns {JSX.Element}
+ * @constructor
+ */
+function SortersSection({sorters}) {
+    const {t} = useTranslation();
+    return (
+        <Card type='inner' title={t('reportcenter.labels.advanced_filters_sorters')} style={{marginTop: '10px'}}>
+            <Form.List name={["sorters"]}>
+                {(fields, {add, remove}) => {
+                    return (
+                        <div>
+                            Sorters
+                            {fields.map((field, index) => (
+                                <Form.Item key={field.key}>
+                                    <Row gutter={[16, 16]}>
+                                        <Col span={11}>
+                                            <Form.Item
+                                                key={`${index}field`}
+                                                label={t('reportcenter.labels.advanced_filters_sorter_field')}
+                                                name={[field.name, "field"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Select
+                                                    options={
+                                                        sorters.map((f) => ({
+                                                            value: f.name,
+                                                            label: f?.translation ? (t(f.translation) === f.translation ? f.label : t(f.translation)) : f.label,
+                                                        }))
+                                                    }
+                                                    getPopupContainer={trigger => trigger.parentNode}
+                                                />
+                                            </Form.Item>
+                                        </Col>
+                                        <Col span={11}>
+                                            <Form.Item
+                                                key={`${index}direction`}
+                                                label={t('reportcenter.labels.advanced_filters_sorter_direction')}
+                                                name={[field.name, "direction"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Select
+                                                    options={getOrderOperatorsByType()}
+                                                    getPopupContainer={trigger => trigger.parentNode}
+                                                />
+                                            </Form.Item>
+                                        </Col>
+
+                                        <Col span={2}>
+                                            <DeleteFilled
+                                                style={{margin: "1rem", paddingTop: '23px'}}
+                                                onClick={() => {
+                                                    remove(field.name);
+                                                }}
+                                            />
+                                        </Col>
+                                    </Row>
+                                </Form.Item>
+                            ))}
+                            <Form.Item>
+                                <Button
+                                    type="dashed"
+                                    onClick={() => {
+                                        add();
+                                    }}
+                                    style={{width: "100%"}}
+                                >
+                                    {t("general.actions.add")}
+                                </Button>
+                            </Form.Item>
+                        </div>
+                    );
+                }}
+            </Form.List>
+        </Card>
+    );
+}
+
+/**
+ * Render Filters
+ * @param templateId
+ * @param form
+ * @param bodyshop
+ * @returns {JSX.Element|null}
+ * @constructor
+ */
+function RenderFilters({templateId, form, bodyshop}) {
     const [state, setState] = useState(null);
     const [visible, setVisible] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const {t} = useTranslation();
 
-    useEffect(() => {
-        const fetch = async () => {
-            setIsLoading(true);
-            const data = await fetchFilterData({name: templateId});
-            if (data?.success) {
-                setState(data.data);
-            } else {
-                setState(null);
-            }
-            setIsLoading(false);
-        };
+    const fetch = useCallback(async () => {
+        // Reset all the filters and Sorters.
+        form.resetFields(['filters']);
+        form.resetFields(['sorters']);
+        form.resetFields(['defaultSorters']);
 
+        setIsLoading(true);
+
+        const data = await fetchFilterData({name: templateId});
+
+        // We have Success
+        if (data?.success) {
+            if (data?.data?.sorters && data?.data?.sorters.length > 0) {
+                const defaultSorters = data?.data?.sorters.filter((sorter) => sorter.hasOwnProperty('default')).map((sorter) => {
+                    return {
+                        field: sorter.name,
+                        direction: sorter.default.direction
+                    };
+                }).sort((a, b) => a.default.order - b.default.order);
+
+                form.setFieldValue('defaultSorters', JSON.stringify(defaultSorters));
+            }
+            // Set the state
+            setState(data.data);
+        }
+        // Something went wrong fetching filter data
+        else {
+            setState(null);
+        }
+        setIsLoading(false);
+    }, [templateId, form]);
+
+    useEffect(() => {
         if (templateId) {
             fetch();
+
         }
-    }, [templateId]);
+    }, [templateId, fetch]);
 
+    const filters = useMemo(() => state?.filters || [], [state]);
+    const sorters = useMemo(() => state?.sorters || [], [state]);
 
-    // Conditional display of filters and sorters
     if (!templateId) return null;
     if (isLoading) return <LoadingSkeleton/>;
     if (!state) return null;
 
-    // Filters and Sorters data available
     return (
         <div style={{marginTop: '10px'}}>
             <Checkbox
@@ -56,215 +418,11 @@ function RenderFilters({templateId, form}) {
             />
             {visible && (
                 <div>
-                    {state.filters && state.filters.length > 0 && (
-                        <Card type='inner' title={ t('reportcenter.labels.advanced_filters_filters')} style={{marginTop: '10px'}}>
-                            <Form.List name={["filters"]}>
-                                {(fields, {add, remove, move}) => {
-                                    return (
-                                        <div>
-                                            {fields.map((field, index) => (
-                                                <Form.Item key={field.key}>
-                                                    <Row gutter={[16, 16]}>
-                                                        <Col span={10}>
-                                                            <Form.Item
-                                                                key={`${index}field`}
-                                                                label="field"
-                                                                name={[field.name, "field"]}
-                                                                rules={[
-                                                                    {
-                                                                        required: true,
-                                                                        //message: t("general.validation.required"),
-                                                                    },
-                                                                ]}
-                                                            >
-                                                                <Select
-                                                                    options={
-                                                                        state.filters
-                                                                            ? state.filters.map((f) => {
-                                                                                return {
-                                                                                    value: f.name,
-                                                                                    label: f?.translation ? (t(f.translation) === f.translation ? f.label : t(f.translation)) : f.label,
-                                                                                }
-                                                                            })
-                                                                            : []
-                                                                    }
-                                                                />
-                                                            </Form.Item>
-                                                        </Col>
-                                                        <Col span={6}>
-                                                            <Form.Item dependencies={[['filters', field.name, "field"]]}>
-                                                                {
-                                                                    () => {
-                                                                        const name = form.getFieldValue(['filters', field.name, "field"]);
-                                                                        const type = state.filters.find(f => f.name === name)?.type;
-
-                                                                        return <Form.Item
-                                                                            key={`${index}operator`}
-                                                                            label="operator"
-                                                                            name={[field.name, "operator"]}
-                                                                            dependencies={[]}
-                                                                            rules={[
-                                                                                {
-                                                                                    required: true,
-                                                                                    //message: t("general.validation.required"),
-                                                                                },
-                                                                            ]}
-                                                                        >
-                                                                            <Select options={getOperatorsByType(type)}/>
-                                                                        </Form.Item>
-                                                                    }
-                                                                }
-                                                            </Form.Item>
-
-                                                        </Col>
-                                                        <Col span={6}>
-                                                            <Form.Item dependencies={[['filters', field.name, "field"]]}>
-                                                                {
-                                                                    () => {
-                                                                        const name = form.getFieldValue(['filters', field.name, "field"]);
-                                                                        const type = state.filters.find(f => f.name === name)?.type;
-
-                                                                        return <Form.Item
-                                                                            key={`${index}value`}
-                                                                            label="value"
-                                                                            name={[field.name, "value"]}
-                                                                            rules={[
-                                                                                {
-                                                                                    required: true,
-                                                                                    //message: t("general.validation.required"),
-                                                                                },
-                                                                            ]}
-                                                                        >
-                                                                            {type === 'number' ?
-                                                                                <InputNumber
-                                                                                    onChange={(value) => {
-                                                                                        form.setFieldsValue({[field.name]: {value: parseInt(value)}});
-                                                                                    }}
-                                                                                />
-                                                                                :
-                                                                                <Input
-                                                                                    onChange={(value) => {
-                                                                                        form.setFieldsValue({[field.name]: {value: value.toString()}});
-                                                                                    }}
-                                                                                />
-                                                                            }
-                                                                        </Form.Item>
-                                                                    }
-                                                                }
-                                                            </Form.Item>
-
-                                                        </Col>
-                                                        <Col span={2}>
-                                                            <DeleteFilled
-                                                                style={{margin: "1rem"}}
-                                                                onClick={() => {
-                                                                    remove(field.name);
-                                                                }}
-                                                            />
-                                                        </Col>
-                                                    </Row>
-                                                </Form.Item>
-                                            ))}
-                                            <Form.Item>
-                                                <Button
-                                                    type="dashed"
-                                                    onClick={() => {
-                                                        add();
-                                                    }}
-                                                    style={{width: "100%"}}
-                                                >
-                                                    {t("general.actions.add")}
-                                                </Button>
-                                            </Form.Item>
-                                        </div>
-                                    );
-                                }}
-                            </Form.List>
-
-                        </Card>
+                    {filters.length > 0 && (
+                        <FiltersSection filters={filters} form={form} bodyshop={bodyshop}/>
                     )}
-                    {state.sorters && state.sorters.length > 0 && (
-                        <Card type='inner' title={ t('reportcenter.labels.advanced_filters_sorters')} style={{marginTop: '10px'}}>
-                            <Form.List name={["sorters"]}>
-                                {(fields, {add, remove, move}) => {
-                                    return (
-                                        <div>
-                                            Sorters
-                                            {fields.map((field, index) => (
-                                                <Form.Item key={field.key}>
-                                                    <Row gutter={[16, 16]}>
-                                                        <Col span={11}>
-                                                            <Form.Item
-                                                                key={`${index}field`}
-                                                                label="field"
-                                                                name={[field.name, "field"]}
-                                                                rules={[
-                                                                    {
-                                                                        required: true,
-                                                                        //message: t("general.validation.required"),
-                                                                    },
-                                                                ]}
-                                                            >
-                                                                <Select
-                                                                    options={
-                                                                        state.sorters
-                                                                            ? state.sorters.map((f) => ({
-                                                                                value: f.name,
-                                                                                label: f?.translation ? (t(f.translation) === f.translation ? f.label : t(f.translation)) : f.label,
-                                                                            }))
-                                                                            : []
-                                                                    }
-                                                                />
-                                                            </Form.Item>
-                                                        </Col>
-                                                        <Col span={11}>
-                                                            <Form.Item
-                                                                key={`${index}direction`}
-                                                                label="direction"
-                                                                name={[field.name, "direction"]}
-                                                                rules={[
-                                                                    {
-                                                                        required: true,
-                                                                        //message: t("general.validation.required"),
-                                                                    },
-                                                                ]}
-                                                            >
-                                                                <Select
-                                                                    options={[
-                                                                        {value: "desc", label: "Descending"},
-                                                                        {value: "asc", label: "Ascending"},
-                                                                    ]}
-                                                                />
-                                                            </Form.Item>
-                                                        </Col>
-
-                                                        <Col span={2}>
-                                                            <DeleteFilled
-                                                                style={{margin: "1rem"}}
-                                                                onClick={() => {
-                                                                    remove(field.name);
-                                                                }}
-                                                            />
-                                                        </Col>
-                                                    </Row>
-                                                </Form.Item>
-                                            ))}
-                                            <Form.Item>
-                                                <Button
-                                                    type="dashed"
-                                                    onClick={() => {
-                                                        add();
-                                                    }}
-                                                    style={{width: "100%"}}
-                                                >
-                                                    {t("general.actions.add")}
-                                                </Button>
-                                            </Form.Item>
-                                        </div>
-                                    );
-                                }}
-                            </Form.List>
-                        </Card>
+                    {sorters.length > 0 && (
+                        <SortersSection sorters={sorters} form={form}/>
                     )}
                 </div>
             )}

client/src/components/report-center-modal/report-center-modal-utils.js

@@ -0,0 +1,137 @@
+import {uniqBy} from "lodash";
+
+/**
+ * Get value from path
+ * @param obj
+ * @param path
+ * @returns {*}
+ */
+const getValueFromPath = (obj, path) => path.split('.').reduce((prev, curr) => prev?.[curr], obj);
+
+/**
+ * Generate options from array
+ * @param bodyshop
+ * @param path
+ * @returns {unknown[]}
+ */
+const generateOptionsFromArray = (bodyshop, path) => {
+    const options = getValueFromPath(bodyshop, path);
+    return uniqBy(options.map((value) => ({
+        label: value,
+        value: value,
+    })), 'value');
+}
+
+
+/**
+ * Valid internal reflections
+ * Note: This is intended for future functionality
+ * @type {{special: string[], bodyshop: [{name: string, type: string}]}}
+ */
+const VALID_INTERNAL_REFLECTIONS = {
+    bodyshop: [
+        {
+            name: 'md_ro_statuses.statuses',
+            type: 'kv-to-v'
+        }
+    ],
+};
+
+/**
+ * Generate options
+ * @param bodyshop
+ * @param path
+ * @param labelPath
+ * @param valuePath
+ * @returns {{label: *, value: *}[]}
+ */
+const generateOptionsFromObject = (bodyshop, path, labelPath, valuePath) => {
+    const options = getValueFromPath(bodyshop, path);
+    return uniqBy(Object.values(options).map((value) => ({
+        label: value[labelPath],
+        value: value[valuePath],
+    })), 'value');
+}
+
+/**
+ * Generate special reflections
+ * @param bodyshop
+ * @param finalPath
+ * @returns {{label: *, value: *}[]|{label: *, value: *}[]|{label: string, value: *}[]|*[]}
+ */
+const generateSpecialReflections = (bodyshop, finalPath) => {
+    switch (finalPath) {
+        // Special case because Referral Sources is an Array, not an Object.
+        case 'referral_source':
+            return generateOptionsFromArray(bodyshop, 'md_referral_sources');
+        case 'class':
+            return generateOptionsFromArray(bodyshop, 'md_classes');
+        case 'cost_centers':
+            return generateOptionsFromObject(bodyshop, 'md_responsibility_centers.costs', 'name', 'name');
+        // Special case because Categories is an Array, not an Object.
+        case 'categories':
+            return generateOptionsFromArray(bodyshop, 'md_categories');
+        case 'insurance_companies':
+            return generateOptionsFromObject(bodyshop, 'md_ins_cos', 'name', 'name');
+        case 'employee_teams':
+            return generateOptionsFromObject(bodyshop, 'employee_teams', 'name', 'id');
+        // Special case because Employees uses a concatenation of first_name and last_name
+        case 'employees':
+            const employeesOptions = getValueFromPath(bodyshop, 'employees');
+            return uniqBy(Object.values(employeesOptions).map((value) => ({
+                label: `${value.first_name} ${value.last_name}`,
+                value: value.id,
+            })), 'value');
+        case 'last_names':
+            return generateOptionsFromObject(bodyshop, 'employees', 'last_name', 'last_name');
+        case 'first_names':
+            return generateOptionsFromObject(bodyshop, 'employees', 'first_name', 'first_name');
+        case 'job_statuses':
+            const statusOptions = getValueFromPath(bodyshop, 'md_ro_statuses.statuses');
+            return Object.values(statusOptions).map((value) => ({
+                label: value,
+                value
+            }));
+        default:
+            console.error('Invalid Special reflection provided by  Report Filters');
+            return [];
+    }
+}
+
+/**
+ *  Generate bodyshop reflections
+ * @param bodyshop
+ * @param finalPath
+ * @returns {{label: *, value: *}[]|*[]}
+ */
+const generateBodyshopReflections = (bodyshop, finalPath) => {
+    const options = getValueFromPath(bodyshop, finalPath);
+    const reflectionRenderer = VALID_INTERNAL_REFLECTIONS.bodyshop.find(reflection => reflection.name === finalPath);
+    if (reflectionRenderer?.type === 'kv-to-v') {
+        return Object.values(options).map((value) => ({
+            label: value,
+            value
+        }));
+    }
+    return [];
+}
+
+/**
+ * Generate internal reflections based on the path and bodyshop
+ * @param bodyshop
+ * @param upperPath
+ * @param finalPath
+ * @returns {{label: *, value: *}[]|[]|{label: *, value: *}[]|{label: string, value: *}[]|{label: *, value: *}[]|*[]}
+ */
+const generateInternalReflections = ({bodyshop, upperPath, finalPath}) => {
+    switch (upperPath) {
+        case 'special':
+            return generateSpecialReflections(bodyshop, finalPath);
+        case 'bodyshop':
+            return generateBodyshopReflections(bodyshop, finalPath);
+        default:
+            return [];
+    }
+};
+
+export {generateInternalReflections}

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -1,24 +1,27 @@
-import {useLazyQuery} from "@apollo/client";
-import {Button, Card, Col, DatePicker, Form, Input, Radio, Row, Typography,} from "antd";
+import { useLazyQuery } from "@apollo/client";
+import { useTreatments } from "@splitsoftware/splitio-react";
+import { Button, Card, Col, DatePicker, Form, Input, Radio, Row, Typography, } from "antd";
 import _ from "lodash";
 import moment from "moment";
-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_ALL_VENDORS} from "../../graphql/vendors.queries";
-import {selectReportCenter} from "../../redux/modals/modals.selectors";
+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_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 { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
 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 "./report-center-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
-  reportCenterModal: selectReportCenter,
+    reportCenterModal: selectReportCenter,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -28,16 +31,38 @@ export default connect(
     mapDispatchToProps
 )(ReportCenterModalComponent);
 
-export function ReportCenterModalComponent({reportCenterModal}) {
+export function ReportCenterModalComponent({reportCenterModal, bodyshop}) {
   const [form] = Form.useForm();
   const [search, setSearch] = useState("");
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
 
   const [loading, setLoading] = useState(false);
   const {t} = useTranslation();
   const Templates = TemplateList("report_center");
-  const ReportsList = Object.keys(Templates).map((key) => {
-    return Templates[key];
-  });
+  const ReportsList =
+    Enhanced_Payroll.treatment === "on"
+      ? Object.keys(Templates)
+          .map((key) => {
+            return Templates[key];
+          })
+          .filter(
+            (temp) =>
+              temp.enhanced_payroll === undefined ||
+              temp.enhanced_payroll === true
+          )
+      : Object.keys(Templates)
+          .map((key) => {
+            return Templates[key];
+          })
+          .filter(
+            (temp) =>
+              temp.enhanced_payroll === undefined ||
+              temp.enhanced_payroll === false
+          );
   const {open} = reportCenterModal;
 
   const [callVendorQuery, {data: vendorData, called: vendorCalled}] =
@@ -64,22 +89,28 @@ export function ReportCenterModalComponent({reportCenterModal}) {
     const end = values.dates ? values.dates[1] : null;
     const { id } = values;
 
-    await GenerateDocument(
-        {
+      const templateConfig = {
           name: values.key,
           variables: {
-            ...(start
-                ? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
-                : {}),
-            ...(end ? { end: moment(end).endOf("day").format("YYYY-MM-DD") } : {}),
-            ...(start ? { starttz: moment(start).startOf("day") } : {}),
-            ...(end ? { endtz: moment(end).endOf("day") } : {}),
+              ...(start
+                  ? {start: moment(start).startOf("day").format("YYYY-MM-DD")}
+                  : {}),
+              ...(end ? {end: moment(end).endOf("day").format("YYYY-MM-DD")} : {}),
+              ...(start ? {starttz: moment(start).startOf("day")} : {}),
+              ...(end ? {endtz: moment(end).endOf("day")} : {}),
 
-            ...(id ? { id: id } : {}),
+              ...(id ? {id: id} : {}),
           },
           filters: values.filters,
           sorters: values.sorters,
-        },
+      };
+
+      if (_.isString(values.defaultSorters) && !_.isEmpty(values.defaultSorters)) {
+          templateConfig.defaultSorters = JSON.parse(values.defaultSorters);
+      }
+
+      await GenerateDocument(
+          templateConfig,
         {
           to: values.to,
           subject: Templates[values.key]?.subject,
@@ -117,7 +148,8 @@ export function ReportCenterModalComponent({reportCenterModal}) {
               onChange={(e) => setSearch(e.target.value)}
               value={search}
           />
-          <Form.Item
+            <Form.Item name="defaultSorters" hidden/>
+            <Form.Item
               name="key"
               label={t("reportcenter.labels.key")}
               //  className="radio-group-columns"
@@ -181,7 +213,7 @@ export function ReportCenterModalComponent({reportCenterModal}) {
               );
             }}
           </Form.Item>
-          <ReportCenterModalFiltersSortersComponent form={form} />
+            <ReportCenterModalFiltersSortersComponent form={form} bodyshop={bodyshop} />
           <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
             {() => {
               const key = form.getFieldValue("key");
@@ -236,6 +268,9 @@ export function ReportCenterModalComponent({reportCenterModal}) {
             {() => {
               const key = form.getFieldValue("key");
               const datedisable = Templates[key] && Templates[key].datedisable;
+
+              // TODO: MERGE NOTE, Ranges turns to presets in DatePicker.RangePicker
+
               if (datedisable !== true) {
                 return (
                     <Form.Item
@@ -250,7 +285,7 @@ export function ReportCenterModalComponent({reportCenterModal}) {
                     >
                       <DatePicker.RangePicker
                           format="MM/DD/YYYY"
-                          presets={DatePickerRanges}
+                          ranges={DatePickerRanges}
                       />
                     </Form.Item>
                 );

client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx

@@ -25,6 +25,8 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
     return acc + value.bodyhrs;
   }, 0);
 
+  const numJobs = entries.length;
+
   return (
     <Card
       title={moment(date).format("D - ddd")}
@@ -33,17 +35,18 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
     >
       <Statistic
         valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
-        label="B"
+        label="Body"
         value={bodyHrs.toFixed(1)}
       />
       <Statistic
         valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
-        label="P"
+        label="Refinish"
         value={paintHrs.toFixed(1)}
       />
       <Divider style={{ margin: 0 }} />
-
-      <Statistic value={(bodyHrs + paintHrs).toFixed(1)} />
+      <Statistic label="Total" value={(bodyHrs + paintHrs).toFixed(1)} />
+      <Divider style={{ margin: 0 }} />
+      <Statistic label="Jobs" value={numJobs} />
     </Card>
   );
 }

client/src/components/scoreboard-entry-edit/scoreboard-entry-edit.component.jsx

@@ -1,5 +1,14 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Dropdown, Form, InputNumber, notification } from "antd";
+import {
+  Button,
+  Card,
+  Dropdown,
+  Form,
+  InputNumber,
+  notification,
+  Space,
+} from "antd";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
@@ -13,6 +22,7 @@ export default function ScoreboardEntryEdit({ entry }) {
 
   const handleFinish = async (values) => {
     setLoading(true);
+    values.date = moment(values.date).format("YYYY-MM-DD");
     const result = await updateScoreboardentry({
       variables: { sbId: entry.id, sbInput: values },
     });
@@ -77,13 +87,14 @@ export default function ScoreboardEntryEdit({ entry }) {
         >
           <InputNumber precision={1} />
         </Form.Item>
-
-        <Button type="primary" loading={loading} htmlType="submit">
-          {t("general.actions.save")}
-        </Button>
-        <Button onClick={() => setVisible(false)}>
-          {t("general.actions.cancel")}
-        </Button>
+        <Space wrap>
+          <Button type="primary" loading={loading} htmlType="submit">
+            {t("general.actions.save")}
+          </Button>
+          <Button onClick={() => setVisible(false)}>
+            {t("general.actions.cancel")}
+          </Button>
+        </Space>
       </Form>
     </Card>
   );

client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx

@@ -1,3 +1,4 @@
+import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Input, Modal, Space, Table, Typography } from "antd";
 import React, { useState } from "react";
@@ -5,12 +6,14 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { QUERY_SCOREBOARD_PAGINATED } from "../../graphql/scoreboard.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 import ScoreboardEntryEdit from "../scoreboard-entry-edit/scoreboard-entry-edit.component";
 import ScoreboardRemoveButton from "../scoreboard-remove-button/scorebard-remove-button.component";
-import { SyncOutlined } from "@ant-design/icons";
-import {pageLimit} from "../../utils/config";
 export default function ScoreboardJobsList({ scoreBoardlist }) {
   const { t } = useTranslation();
   const [state, setState] = useState({
@@ -44,6 +47,7 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.job.id}>
           {record.job.ro_number || t("general.labels.na")}
@@ -55,7 +59,11 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-
+      sorter: (a, b) =>
+        alphaSort(
+          OwnerNameDisplayFunction(a.job),
+          OwnerNameDisplayFunction(b.job)
+        ),
       render: (text, record) => <OwnerNameDisplay ownerObject={record.job} />,
     },
     {
@@ -63,6 +71,15 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
       dataIndex: "vehicle",
       key: "vehicle",
       ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.job.v_model_yr || ""} ${a.job.v_make_desc || ""} ${
+            a.job.v_model_desc || ""
+          }`,
+          `${b.job.v_model_yr || ""} ${b.job.v_make_desc || ""} ${
+            b.job.v_model_desc || ""
+          }`
+        ),
       render: (text, record) => (
         <span>{`${record.job.v_model_yr || ""} ${
           record.job.v_make_desc || ""
@@ -73,17 +90,20 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
       title: t("scoreboard.fields.date"),
       dataIndex: "date",
       key: "date",
+      sorter: (a, b) => dateSort(a.date, b.date),
       render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
     },
-    {
-      title: t("scoreboard.fields.painthrs"),
-      dataIndex: "painthrs",
-      key: "painthrs",
-    },
     {
       title: t("scoreboard.fields.bodyhrs"),
       dataIndex: "bodyhrs",
       key: "bodyhrs",
+      sorter: (a, b) => Number(a.bodyhrs) - Number(b.bodyhrs),
+    },
+    {
+      title: t("scoreboard.fields.painthrs"),
+      dataIndex: "painthrs",
+      key: "painthrs",
+      sorter: (a, b) => Number(a.painthrs) - Number(b.painthrs),
     },
     {
       title: t("general.labels.actions"),
@@ -104,8 +124,9 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
         visible={state.visible}
         destroyOnClose
         width="80%"
+        closable={false}
         cancelButtonProps={{ style: { display: "none" } }}
-        onCancel={() =>
+        onOk={() =>
           setState((state) => ({
             ...state,
             visible: false,

client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx

@@ -29,10 +29,13 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
     let ret = {
       todayBody: 0,
       todayPaint: 0,
+      todayJobs: 0,
       weeklyPaint: 0,
+      weeklyJobs: 0,
       weeklyBody: 0,
       toDateBody: 0,
       toDatePaint: 0,
+      toDateJobs: 0,
     };
 
     const today = moment();
@@ -40,6 +43,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
       dateHash[today.format("YYYY-MM-DD")].forEach((d) => {
         ret.todayBody = ret.todayBody + d.bodyhrs;
         ret.todayPaint = ret.todayPaint + d.painthrs;
+        ret.todayJobs++;
       });
     }
 
@@ -49,6 +53,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
         dateHash[StartOfWeek.format("YYYY-MM-DD")].forEach((d) => {
           ret.weeklyBody = ret.weeklyBody + d.bodyhrs;
           ret.weeklyPaint = ret.weeklyPaint + d.painthrs;
+          ret.weeklyJobs++;
         });
       }
       StartOfWeek = StartOfWeek.add(1, "day");
@@ -60,6 +65,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
         dateHash[startOfMonth.format("YYYY-MM-DD")].forEach((d) => {
           ret.toDateBody = ret.toDateBody + d.bodyhrs;
           ret.toDatePaint = ret.toDatePaint + d.painthrs;
+          ret.toDateJobs++;
         });
       }
       startOfMonth = startOfMonth.add(1, "day");
@@ -87,7 +93,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
               <Statistic
                 title={t("scoreboard.labels.dailytarget")}
                 value={bodyshop.scoreboard_target.dailyBodyTarget}
-                prefix="B"
+                prefix={t("scoreboard.labels.bodyabbrev")}
               />
             </Col>
             <Col {...statSpans}>
@@ -140,7 +146,7 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
             <Col {...statSpans}>
               <Statistic
                 value={bodyshop.scoreboard_target.dailyPaintTarget}
-                prefix="P"
+                prefix={t("scoreboard.labels.refinishabbrev")}
               />
             </Col>
             <Col {...statSpans}>
@@ -181,7 +187,12 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
             <Divider style={{ margin: 5 }} />
           </Row>
           <Row>
-            <Col {...statSpans}></Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={"\u00A0"}
+                prefix={t("scoreboard.labels.total")}
+              />
+            </Col>
             <Col {...statSpans}>
               <Statistic
                 value={(values.todayPaint + values.todayBody).toFixed(1)}
@@ -240,6 +251,29 @@ export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
               />
             </Col>
           </Row>
+          <Row>
+            <Divider style={{ margin: 5 }} />
+          </Row>
+          <Row>
+            <Col {...statSpans}>
+              <Statistic
+                value={"\u00A0"}
+                prefix={t("scoreboard.labels.jobs")}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic value={values.todayJobs} />
+            </Col>
+            <Col {...statSpans} />
+            <Col {...statSpans}>
+              <Statistic value={values.weeklyJobs} />
+            </Col>
+            <Col {...statSpans} />
+            <Col {...statSpans} />
+            <Col {...statSpans}>
+              <Statistic value={values.toDateJobs} />
+            </Col>
+          </Row>
         </Col>
       </Row>
     </Card>

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -11,7 +11,7 @@ import {
   Switch,
   Table,
 } from "antd";
-import { useForm } from "antd/es/form/Form";
+
 import moment from "moment";
 import querystring from "query-string";
 import React, { useEffect } from "react";
@@ -36,6 +36,7 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
+import { useTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -46,7 +47,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ShopEmployeesFormComponent({ bodyshop }) {
   const { t } = useTranslation();
-  const [form] = useForm();
+  const [form] = Form.useForm();
   const history = useHistory();
   const search = querystring.parse(useLocation().search);
   const [deleteVacation] = useMutation(DELETE_VACATION);
@@ -56,7 +57,11 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
-
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
   const client = useApolloClient();
   useEffect(() => {
     if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
@@ -362,7 +367,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
                             {t("timetickets.labels.shift")}
                           </Select.Option>
 
-                          {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
+                          {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || Enhanced_Payroll.treatment === "on"
                             ? CiecaSelect(false, true)
                             : bodyshop.md_responsibility_centers.costs.map(
                                 (c) => (

client/src/components/shop-info/shop-info.component.jsx

@@ -15,6 +15,7 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
 import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
+import ShopInfoTaskPresets from "./shop-info.task-presets.component";
 import { useHistory, useLocation } from "react-router-dom";
 import queryString from "query-string";
 
@@ -96,6 +97,12 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
             <ShopInfoPartsScan form={form} />
           </Tabs.TabPane>
         )}
+        <Tabs.TabPane
+          key="task-presets"
+          tab={t("bodyshop.labels.task-presets")}
+        >
+          <ShopInfoTaskPresets form={form} />
+        </Tabs.TabPane>
       </Tabs>
     </Card>
   );

client/src/components/shop-info/shop-info.general.component.jsx

@@ -189,20 +189,22 @@ export function ShopInfoGeneral({ form, bodyshop }) {
           <Switch />
         </Form.Item>
 
-        <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 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"]}
@@ -291,36 +293,34 @@ export function ShopInfoGeneral({ form, bodyshop }) {
         >
           <InputNumber min={0} precision={2} />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.federal_tax_id")}
-          name="federal_tax_id"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
+        {
+          // <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>
-        <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_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"]}

client/src/components/shop-info/shop-info.rbac.component.jsx

@@ -408,7 +408,31 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "owners:detail"]}
+          name={["md_rbac", "bills:list"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.employees.page")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "employees:page"]}
+        >
+          <InputNumber />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.employee_teams.page")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "employee_teams:page"]}
         >
           <InputNumber />
         </Form.Item>
@@ -540,7 +564,67 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
               //message: t("general.validation.required"),
             },
           ]}
-          name={["md_rbac", "shop:config"]}
+          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.shop.vendors")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={["md_rbac", "shop:vendors"]}
         >
           <InputNumber />
         </Form.Item>

client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx

@@ -17,6 +17,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { useTreatments } from "@splitsoftware/splitio-react";
+import ShopInfoResponsibilitycentersTaxesComponent from "./shop-info.responsibilitycenters.taxes.component";
 
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
@@ -4116,122 +4117,124 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
         </LayoutFormRow>
       </SelectorDiv>
 
-      <LayoutFormRow
-        header={t("bodyshop.labels.responsibilitycenters.tax_accounts")}
-        id="tax_accounts"
-      >
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenters.federal_tax")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "federal", "name"]}
-        >
-          <Input />
-        </Form.Item>
-        {/* <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={[
-            "md_responsibility_centers",
-            "taxes",
-            "federal",
-            "accountnumber",
-          ]}
-        >
-          <Input />
-        </Form.Item> */}
-        {/* <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountname")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={[
-            "md_responsibility_centers",
-            "taxes",
-            "federal",
-            "accountname",
-          ]}
-        >
-          <Input />
-        </Form.Item> */}
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={[
-            "md_responsibility_centers",
-            "taxes",
-            "federal",
-            "accountdesc",
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={[
-            "md_responsibility_centers",
-            "taxes",
-            "federal",
-            "accountitem",
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        {(bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
-          <Form.Item
-            label={t("bodyshop.fields.dms.dms_acctnumber")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
-            name={[
-              "md_responsibility_centers",
-              "taxes",
-              "federal",
-              "dms_acctnumber",
-            ]}
-          >
-            <Input />
-          </Form.Item>
-        )}
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_rate")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "federal", "rate"]}
-        >
-          <InputNumber precision={2} />
-        </Form.Item>
-      </LayoutFormRow>
+      {
+        //   <LayoutFormRow
+        //   header={t("bodyshop.labels.responsibilitycenters.tax_accounts")}
+        //   id="tax_accounts"
+        // >
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenters.federal_tax")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "federal", "name"]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   {/* <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "federal",
+        //       "accountnumber",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item> */}
+        //   {/* <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountname")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "federal",
+        //       "accountname",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item> */}
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "federal",
+        //       "accountdesc",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "federal",
+        //       "accountitem",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   {(bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
+        //     <Form.Item
+        //       label={t("bodyshop.fields.dms.dms_acctnumber")}
+        //       rules={[
+        //         {
+        //           required: true,
+        //           //message: t("general.validation.required"),
+        //         },
+        //       ]}
+        //       name={[
+        //         "md_responsibility_centers",
+        //         "taxes",
+        //         "federal",
+        //         "dms_acctnumber",
+        //       ]}
+        //     >
+        //       <Input />
+        //     </Form.Item>
+        //   )}
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_rate")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "federal", "rate"]}
+        //   >
+        //     <InputNumber precision={2} />
+        //   </Form.Item>
+        // </LayoutFormRow>
+      }
       {DmsAp.treatment === "on" && (
         <LayoutFormRow id="federal_tax_itc">
           <Form.Item
@@ -4347,202 +4350,242 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           </Form.Item>
         </LayoutFormRow>
       )}
-      <LayoutFormRow id="state_tax">
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenters.state_tax")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "state", "name"]}
-        >
-          <Input />
-        </Form.Item>
-        {/* <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={[
-            "md_responsibility_centers",
-            "taxes",
-            "state",
-            "accountnumber",
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountname")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "state", "accountname"]}
-        >
-          <Input />
-        </Form.Item> */}
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "state", "accountdesc"]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "state", "accountitem"]}
-        >
-          <Input />
-        </Form.Item>
-        {(bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
-          <Form.Item
-            label={t("bodyshop.fields.dms.dms_acctnumber")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
-            name={[
-              "md_responsibility_centers",
-              "taxes",
-              "state",
-              "dms_acctnumber",
-            ]}
-          >
-            <Input />
-          </Form.Item>
-        )}
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_rate")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "state", "rate"]}
-        >
-          <InputNumber precision={2} />
-        </Form.Item>
-      </LayoutFormRow>
-      <LayoutFormRow id="local_tax">
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenters.local_tax")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "local", "name"]}
-        >
-          <Input />
-        </Form.Item>
-        {/* <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={[
-            "md_responsibility_centers",
-            "taxes",
-            "local",
-            "accountnumber",
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountname")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "local", "accountname"]}
-        >
-          <Input />
-        </Form.Item> */}
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "local", "accountdesc"]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "local", "accountitem"]}
-        >
-          <Input />
-        </Form.Item>
-        {(bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
-          <Form.Item
-            label={t("bodyshop.fields.dms.dms_acctnumber")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
-            name={[
-              "md_responsibility_centers",
-              "taxes",
-              "local",
-              "dms_acctnumber",
-            ]}
-          >
-            <Input />
-          </Form.Item>
-        )}
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_rate")}
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-          name={["md_responsibility_centers", "taxes", "local", "rate"]}
-        >
-          <InputNumber precision={2} />
-        </Form.Item>
-      </LayoutFormRow>
+      {
+        //   <LayoutFormRow id="state_tax">
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenters.state_tax")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "state", "name"]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   {/* <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "state",
+        //       "accountnumber",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountname")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "state", "accountname"]}
+        //   >
+        //     <Input />
+        //   </Form.Item> */}
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "state", "accountdesc"]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "state", "accountitem"]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   {(bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
+        //     <Form.Item
+        //       label={t("bodyshop.fields.dms.dms_acctnumber")}
+        //       rules={[
+        //         {
+        //           required: true,
+        //           //message: t("general.validation.required"),
+        //         },
+        //       ]}
+        //       name={[
+        //         "md_responsibility_centers",
+        //         "taxes",
+        //         "state",
+        //         "dms_acctnumber",
+        //       ]}
+        //     >
+        //       <Input />
+        //     </Form.Item>
+        //   )}
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_rate")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "state", "rate"]}
+        //   >
+        //     <InputNumber precision={2} />
+        //   </Form.Item>
+        // </LayoutFormRow>
+      }
+      <ShopInfoResponsibilitycentersTaxesComponent form={form} />
+      <Form.Item
+        label={t("bodyshop.fields.responsibilitycenters.itemexemptcode")}
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+        name={["md_responsibility_centers", "taxes", "itemexemptcode"]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.responsibilitycenters.invoiceexemptcode")}
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+        name={["md_responsibility_centers", "taxes", "invoiceexemptcode"]}
+      >
+        <Input />
+      </Form.Item>
+
+      {
+        // <LayoutFormRow id="local_tax">
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenters.local_tax")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "local", "name"]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   {/* <Form.Item
+        //   label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
+        //   rules={[
+        //     {
+        //       required: true,
+        //       //message: t("general.validation.required"),
+        //     },
+        //   ]}
+        //   name={[
+        //     "md_responsibility_centers",
+        //     "taxes",
+        //     "local",
+        //     "accountnumber",
+        //   ]}
+        // >
+        //   <Input />
+        // </Form.Item>
+        // <Form.Item
+        //   label={t("bodyshop.fields.responsibilitycenter_accountname")}
+        //   rules={[
+        //     {
+        //       required: true,
+        //       //message: t("general.validation.required"),
+        //     },
+        //   ]}
+        //   name={["md_responsibility_centers", "taxes", "local", "accountname"]}
+        // >
+        //   <Input />
+        // </Form.Item> */}
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "local",
+        //       "accountdesc",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={[
+        //       "md_responsibility_centers",
+        //       "taxes",
+        //       "local",
+        //       "accountitem",
+        //     ]}
+        //   >
+        //     <Input />
+        //   </Form.Item>
+        //   {(bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber) && (
+        //     <Form.Item
+        //       label={t("bodyshop.fields.dms.dms_acctnumber")}
+        //       rules={[
+        //         {
+        //           required: true,
+        //           //message: t("general.validation.required"),
+        //         },
+        //       ]}
+        //       name={[
+        //         "md_responsibility_centers",
+        //         "taxes",
+        //         "local",
+        //         "dms_acctnumber",
+        //       ]}
+        //     >
+        //       <Input />
+        //     </Form.Item>
+        //   )}
+        //   <Form.Item
+        //     label={t("bodyshop.fields.responsibilitycenter_rate")}
+        //     rules={[
+        //       {
+        //         required: true,
+        //         //message: t("general.validation.required"),
+        //       },
+        //     ]}
+        //     name={["md_responsibility_centers", "taxes", "local", "rate"]}
+        //   >
+        //     <InputNumber precision={2} />
+        //   </Form.Item>
+        // </LayoutFormRow>
+      }
       <LayoutFormRow header={<div>AR</div>} id="AR">
         {/* <Form.Item
           label={t("bodyshop.fields.responsibilitycenters.ar")}

client/src/components/shop-info/shop-info.task-presets.component.jsx

@@ -0,0 +1,269 @@
+import { DeleteFilled } from "@ant-design/icons";
+import {
+  Button,
+  Checkbox,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+  Space,
+  Switch,
+} from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShopInfoTaskPresets);
+
+export function ShopInfoTaskPresets({ bodyshop, form }) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <LayoutFormRow noDivider>
+        <Form.Item
+          label={t("bodyshop.fields.md_tasks_presets.enable_tasks")}
+          valuePropName="checked"
+          name={["md_tasks_presets", "enable_tasks"]}
+        >
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.md_tasks_presets.use_approvals")}
+          valuePropName="checked"
+          name={["md_tasks_presets", "use_approvals"]}
+        >
+          <Switch />
+        </Form.Item>
+      </LayoutFormRow>
+
+      <LayoutFormRow header={t("bodyshop.labels.md_tasks_presets")}>
+        <Form.List name={["md_tasks_presets", "presets"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key}>
+                    <LayoutFormRow noDivider>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.name")}
+                        key={`${index}name`}
+                        name={[field.name, "name"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        span={12}
+                        label={t("bodyshop.fields.md_tasks_presets.hourstype")}
+                        key={`${index}hourstype`}
+                        name={[field.name, "hourstype"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Checkbox.Group>
+                          <Row>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAA"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAA")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAB"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAB")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAD"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAD")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAE"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAE")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAF"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAF")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAG"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAG")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAM"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAM")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAR"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAR")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAS"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAS")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LAU"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LAU")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LA1"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LA1")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LA2"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LA2")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LA3"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LA3")}
+                              </Checkbox>
+                            </Col>
+                            <Col span={4}>
+                              <Checkbox
+                                value="LA4"
+                                style={{ lineHeight: "32px" }}
+                              >
+                                {t("joblines.fields.lbr_types.LA4")}
+                              </Checkbox>
+                            </Col>
+                          </Row>
+                        </Checkbox.Group>
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.percent")}
+                        key={`${index}percent`}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                        name={[field.name, "percent"]}
+                      >
+                        <InputNumber min={0} max={100} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.memo")}
+                        key={`${index}memo`}
+                        name={[field.name, "memo"]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.fields.md_tasks_presets.nextstatus")}
+                        key={`${index}nextstatus`}
+                        name={[field.name, "nextstatus"]}
+                      >
+                        <Select
+                          options={bodyshop.md_ro_statuses.production_statuses.map(
+                            (o) => ({ value: o, label: o })
+                          )}
+                        />
+                      </Form.Item>
+                      <Space wrap>
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows
+                          move={move}
+                          index={index}
+                          total={fields.length}
+                        />
+                      </Space>
+                    </LayoutFormRow>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("bodyshop.actions.add_task_preset")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </LayoutFormRow>
+    </>
+  );
+}

client/src/components/shop-teams/shop-employee-teams-member.component.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function ShopEmployeeTeamMember({teamMember}) {
+  return (
+    <div>ShopEmployeeTeamMember</div>
+  )
+}

client/src/components/shop-teams/shop-employee-teams.form.component.jsx

@@ -0,0 +1,436 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { useMutation, useQuery } from "@apollo/client";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Space,
+  Switch,
+  notification,
+} from "antd";
+
+import querystring from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+import {
+  INSERT_EMPLOYEE_TEAM,
+  QUERY_EMPLOYEE_TEAM_BY_ID,
+  UPDATE_EMPLOYEE_TEAM,
+} from "../../graphql/employee_teams.queries";
+import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const history = useHistory();
+  const search = querystring.parse(useLocation().search);
+
+  const { error, data } = useQuery(QUERY_EMPLOYEE_TEAM_BY_ID, {
+    variables: { id: search.employeeTeamId },
+    skip: !search.employeeTeamId || search.employeeTeamId === "new",
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  useEffect(() => {
+    if (data && data.employee_teams_by_pk)
+      form.setFieldsValue(data.employee_teams_by_pk);
+    else {
+      form.resetFields();
+    }
+  }, [form, data, search.employeeTeamId]);
+
+  const [updateEmployeeTeam] = useMutation(UPDATE_EMPLOYEE_TEAM);
+  const [insertEmployeeTeam] = useMutation(INSERT_EMPLOYEE_TEAM);
+
+  const handleFinish = async ({ employee_team_members, ...values }) => {
+    if (search.employeeTeamId && search.employeeTeamId !== "new") {
+      //Update a record.
+      logImEXEvent("shop_employee_update");
+
+      const result = await updateEmployeeTeam({
+        variables: {
+          employeeTeamId: search.employeeTeamId,
+          employeeTeam: values,
+          teamMemberUpdates: employee_team_members
+            .filter((e) => e.id)
+            .map((e) => {
+              delete e.__typename;
+              return { where: { id: { _eq: e.id } }, _set: e };
+            }),
+          teamMemberInserts: employee_team_members
+            .filter((e) => e.id === null || e.id === undefined)
+            .map((e) => ({ ...e, teamid: search.employeeTeamId })),
+          teamMemberDeletes:
+            data.employee_teams_by_pk.employee_team_members.filter(
+              (e) => !employee_team_members.find((etm) => etm.id === e.id)
+            ),
+        },
+      });
+      if (!result.errors) {
+        notification["success"]({
+          message: t("employees.successes.save"),
+        });
+      } else {
+        notification["error"]({
+          message: t("employees.errors.save", {
+            message: JSON.stringify(error),
+          }),
+        });
+      }
+    } else {
+      //New record, insert it.
+      logImEXEvent("shop_employee_insert");
+
+      insertEmployeeTeam({
+        variables: {
+          employeeTeam: {
+            ...values,
+            employee_team_members: { data: employee_team_members },
+            bodyshopid: bodyshop.id,
+          },
+        },
+        refetchQueries: ["QUERY_TEAMS"],
+      }).then((r) => {
+        search.employeeTeamId = r.data.insert_employee_teams_one.id;
+        history.push({ search: querystring.stringify(search) });
+        notification["success"]({
+          message: t("employees.successes.save"),
+        });
+      });
+    }
+  };
+
+  if (!search.employeeTeamId) return null;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Card
+      extra={
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.save")}
+        </Button>
+      }
+    >
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        layout="vertical"
+        form={form}
+      >
+        <LayoutFormRow>
+          <Form.Item
+            name="name"
+            label={t("employee_teams.fields.name")}
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={t("employee_teams.fields.active")}
+            name="active"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            label={t("employee_teams.fields.max_load")}
+            name="max_load"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <InputNumber min={0} precision={1} />
+          </Form.Item>
+        </LayoutFormRow>
+        <Form.List name={["employee_team_members"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                    <Form.Item
+                      label={t("employees.fields.id")}
+                      key={`${index}`}
+                      name={[field.name, "id"]}
+                      hidden
+                    >
+                      <Input />
+                    </Form.Item>
+                    <LayoutFormRow grow>
+                      <Form.Item
+                        label={t("employee_teams.fields.employeeid")}
+                        key={`${index}`}
+                        name={[field.name, "employeeid"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <EmployeeSearchSelectComponent
+                          options={bodyshop.employees}
+                        />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("employee_teams.fields.percentage")}
+                        key={`${index}`}
+                        name={[field.name, "percentage"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <InputNumber min={0} max={100} precision={2} />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAA")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAA"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAB")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAB"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAD")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAD"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAE")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAE"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAF")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAF"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAG")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAG"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAM")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAM"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAR")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAR"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAS")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAS"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LAU")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LAU"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA1")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA1"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA2")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA2"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA3")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA3"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.lbr_types.LA4")}
+                        key={`${index}`}
+                        name={[field.name, "labor_rates", "LA4"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <CurrencyInput />
+                      </Form.Item>
+                      <Space align="center">
+                        <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("employee_teams.actions.newmember")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </Form>
+    </Card>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShopEmployeeTeamsFormComponent);

client/src/components/shop-teams/shop-employee-teams.list.jsx

@@ -0,0 +1,71 @@
+import { Button, Table } from "antd";
+import queryString from "query-string";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function ShopEmployeeTeamsListComponent({
+  loading,
+  employee_teams,
+}) {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const search = queryString.parse(useLocation().search);
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      search.employeeTeamId = record.id;
+      history.push({ search: queryString.stringify(search) });
+    } else {
+      delete search.employeeTeamId;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+  const columns = [
+    {
+      title: t("employee_teams.fields.name"),
+      dataIndex: "name",
+      key: "name",
+    },
+  ];
+
+  return (
+    <div>
+      <Table
+        title={() => {
+          return (
+            <Button
+              type="primary"
+              onClick={() => {
+                search.employeeTeamId = "new";
+                history.push({ search: queryString.stringify(search) });
+              }}
+            >
+              {t("employee_teams.actions.new")}
+            </Button>
+          );
+        }}
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        dataSource={employee_teams}
+        rowSelection={{
+          onSelect: (props) => {
+            search.employeeTeamId = props.id;
+            history.push({ search: queryString.stringify(search) });
+          },
+          type: "radio",
+          selectedRowKeys: [search.employeeTeamId],
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            },
+          };
+        }}
+      />
+    </div>
+  );
+}

client/src/components/shop-teams/shop-teams.container.jsx

@@ -0,0 +1,43 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
+import ShopEmployeeTeamsListComponent from "./shop-employee-teams.list";
+import ShopEmployeeTeamsFormComponent from "./shop-employee-teams.form.component";
+import { Col, Row } from "antd";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+function ShopTeamsContainer({ bodyshop }) {
+  const { loading, error, data } = useQuery(QUERY_TEAMS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      <RbacWrapper action="employee_teams:page">
+        <Row gutter={[16, 16]}>
+          <Col span={6}>
+            <ShopEmployeeTeamsListComponent
+              employee_teams={data ? data.employee_teams : []}
+              loading={loading}
+            />
+          </Col>
+          <Col span={18}>
+            <ShopEmployeeTeamsFormComponent />
+          </Col>
+        </Row>
+      </RbacWrapper>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(ShopTeamsContainer);

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -1,12 +1,12 @@
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Form, Input, Typography } from "antd";
+import { Button, Form, Input } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, Redirect, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import ImEXOnlineLogo from "../../assets/logo192.png";
+import RomeLogo from "../../assets/RomeOnlineBlue.png";
 import {
   emailSignInStart,
   sendPasswordReset,
@@ -53,8 +53,7 @@ export function SignInComponent({
   return (
     <div className="login-container">
       <div className="login-logo-container">
-        <img src={ImEXOnlineLogo} height="100" width="100" alt="ImEX Online" />
-        <Typography.Title>{t("titles.app")}</Typography.Title>
+        <img src={RomeLogo} width={200} alt="Rome Online" />
       </div>
       <Form onFinish={handleFinish} form={form} size="large">
         <Form.Item