IO-2824 Dev Server Instance Switch

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.circleci/config.yml

@@ -5,7 +5,6 @@ orbs:
   aws-s3: circleci/aws-s3@4.0.0
   aws-cli: circleci/aws-cli@4.0
   eb: circleci/aws-elastic-beanstalk@2.0.1
-  jira: circleci/jira@2.1.0
 jobs:
   imex-api-deploy:
     docker:
@@ -19,12 +18,6 @@ jobs:
             eb status --verbose
             eb deploy
             eb status
-      - jira/notify:
-          environment: Production (ImEX) - API
-          environment_type: production
-          job_type: deployment
-          pipeline_id: << pipeline.id >>
-          pipeline_number: << pipeline.number >>
 
   imex-hasura-migrate:
     docker:
@@ -40,16 +33,11 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Production (ImEX) - Hasura
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
   imex-app-build:
     docker:
       - image: cimg/node:18.18.2
@@ -74,7 +62,6 @@ jobs:
           to: "s3://imex-online-production/"
           arguments: "--exclude '*.map'"
 
-
   imex-app-beta-build:
     docker:
       - image: cimg/node:18.18.2
@@ -99,12 +86,6 @@ jobs:
           from: dist
           to: "s3://imex-online-beta/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (ImEX) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   rome-api-deploy:
     docker:
@@ -118,12 +99,7 @@ jobs:
             eb status --verbose
             eb deploy
             eb status
-      - jira/notify:
-          environment: Production (Rome) - API
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
   rome-hasura-migrate:
     docker:
       - image: cimg/node:18.18.2
@@ -138,16 +114,11 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            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 >>
-      - jira/notify:
-          environment: Production (Rome) - Hasura
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
   rome-app-build:
     docker:
       - image: cimg/node:18.18.2
@@ -172,12 +143,6 @@ jobs:
           from: dist
           to: "s3://rome-online-production/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (Rome) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   promanager-app-build:
     docker:
@@ -203,12 +168,6 @@ jobs:
           from: dist
           to: "s3://promanager-production/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (ProManager) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   test-rome-hasura-migrate:
     docker:
@@ -224,18 +183,10 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-            sleep 5
             hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-            sleep 10
             hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Test (Rome) - Hasura
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   test-rome-app-build:
     docker:
@@ -261,12 +212,6 @@ jobs:
           from: dist
           to: "s3://rome-online-test/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (Rome) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   test-promanager-app-build:
     docker:
@@ -292,12 +237,6 @@ jobs:
           from: dist
           to: "s3://promanager-testing/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (ProManager) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   test-hasura-migrate:
     docker:
@@ -313,18 +252,10 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
-            sleep 15
             hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
-            sleep 30
             hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Test (ImEX) - Hasura
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   imex-test-app-build:
     docker:
@@ -371,12 +302,7 @@ jobs:
           from: dist
           to: "s3://imex-online-test-beta/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (ImEX) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
 
   admin-app-build:
     docker:
@@ -427,7 +353,7 @@ workflows:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
-              only: master-AIO
+              only: master
       - rome-api-deploy:
           filters:
             branches:
@@ -437,7 +363,7 @@ workflows:
             branches:
               only: master-AIO
       - rome-hasura-migrate:
-          secret: ${HASURA_ROME_PROD_SECRET}
+          secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
               only: master-AIO

README.MD

@@ -2,7 +2,7 @@ NGROK TEsting:
 ./ngrok.exe http http://localhost:4000 -host-header="localhost:4000"
 
 Finding deadfiles - run from client directory
-npx deadfile ./src/index.jsx --exclude build templates
+npx deadfile ./src/index.js --exclude build templates
 
 #Crushing all hasura migrations by creating a new initialization from the server.
 hasura migrate create "Init" --from-server --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
@@ -11,4 +11,4 @@ Production-ImEXOnline!@#'
 hasura migrate status --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
 
 Generate the license file:
-$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite
+$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite

_reference/productionBoardNotes.md

@@ -1,41 +0,0 @@
-# Production Board Notes:
-
-## General Notes
-
-- You can single click the lane footer to collapse/un-collapse the lane
-- You can double click the lane header to collapse/un-collapse the lane
-- If you need to scroll horizontally, you can hold shift and use the mouse scroll wheel, or press the mouse scroll wheel while scrolling
-
-## Board Settings
-
-#### Layout
-
-- Board Orientation (Vertical or Horizontal) 
-  - This determines the orientation of the card layout on the board.
-  - Horizontal is the default setting, and how the prior board was set up.
-  - Vertical is the new setting and allows lanes to be displayed vertically, with a grid of cards
-- Card Size (Small, Medium, Large)
-  - This determines the size of the cards on the board.
-  - Small is the default setting, and how the prior board was set up.
-  - Medium and Large are new settings and allow for larger cards to be displayed on the board.
-- Compact Cards (Tall or Wide)
-   - Formally called 'Compact'
-   - When on, data is displayed on the card vertically
-   - when turned off, some fields may share horizontal space, tightening the card layout
-- Colored Cards (On or Off)
-  - When on, cards are colored based on the Status color
-- Kiosk Mode (On or Off)
-   - This should be turned on if the shop is using it on a tablet (Ipad)
-
-#### Information
-
-These allow users to turn fields on or off, turning them all off will show the card in the most minimal form
-
-
-### Statistics
-
-- The statistics section allows users to see accumulations of both jobs on the board, and jobs in production.
-- you can click a statistic to turn it on and off, and drag and drop the statistics to rearrange them
-
-### Filters
-- Allows you to set, and persist filters for estimators and insurance companies

_reference/test api setup.md

@@ -4,7 +4,7 @@ Clone Repository for:
 {
   "name": "node-webhook-scripts",
   "version": "1.0.0",
-  "main": "index.jsx",
+  "main": "index.js",
   "dependencies": {
     "express": "^4.16.4"
   },

_reference/test-ecoystem.config.js

@@ -11,7 +11,7 @@ module.exports = {
 
     {
       name: "Bitbucket Webhook",
-      script: "./webhook/index.jsx",
+      script: "./webhook/index.js",
       env: {
         NODE_ENV: "production"
       }

client/.env.development.imex

@@ -1,5 +1,5 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GA_CODE=231099835
 VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
 VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test

client/.env.development.promanager

@@ -1,6 +1,7 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GA_CODE=231099835
+# VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
 VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
 VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test

client/.env.development.rome

@@ -1,5 +1,5 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 VITE_APP_GA_CODE=231099835
 # VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 VITE_APP_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"}

client/craco.config.js

@@ -0,0 +1,53 @@
+// craco.config.js
+const TerserPlugin = require("terser-webpack-plugin");
+const CracoLessPlugin = require("craco-less");
+const { convertLegacyToken } = require("@ant-design/compatible/lib");
+const { theme } = require("antd/lib");
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+const v4Token = convertLegacyToken(mapToken);
+
+// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: { ...v4Token },
+            javascriptEnabled: true
+          }
+        }
+      }
+    }
+  ],
+  webpack: {
+    configure: (webpackConfig) => {
+      return {
+        ...webpackConfig,
+        // Required for Dev Server
+        devServer: {
+          ...webpackConfig.devServer,
+          allowedHosts: "all"
+        },
+        optimization: {
+          ...webpackConfig.optimization,
+          // Workaround for CircleCI bug caused by the number of CPUs shown
+          // https://github.com/facebook/create-react-app/issues/8320
+          minimizer: webpackConfig.optimization.minimizer.map((item) => {
+            if (item instanceof TerserPlugin) {
+              item.options.parallel = 2;
+            }
+
+            return item;
+          })
+        }
+      };
+    }
+  },
+  devtool: "source-map"
+};

client/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 // ***********************************************************
-// This example plugins/index.jsx can be used to load plugins
+// This example plugins/index.js can be used to load plugins
 //
 // You can change the location of this file or turn off loading
 // the plugins file with the 'pluginsFile' configuration option.

client/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.jsx is processed and
+// This example support/index.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

client/index.html

@@ -1,180 +1,174 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8"/>
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-  <link rel="icon" href="/favicon.png"/>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <link rel="icon" href="/ro-favicon.png"/>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <link rel="icon" href="/pm/pm-favicon.ico"/>
-  <% } %>
+  <head>
+    <meta charset="utf-8" />
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <link rel="icon" href="/favicon.png" />
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <link rel="icon" href="/ro-favicon.png" />
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
+    <link rel="icon" href="/pm/pm-favicon.ico" />
+    <% } %>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <meta name="theme-color" content="#1690ff"/>
-  <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-  <!-- TODO:AIo Update the individual logos for each.-->
-  <link rel="apple-touch-icon" href="public/logo192.png"/>
-  <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
-  <!--
-    manifest.json provides metadata used when your web app is installed on a
-    user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-  -->
-  <!--
-    Notice the use of %PUBLIC_URL% in the tags above.
-    It will be replaced with the URL of the `public` folder during the build.
-    Only files inside the `public` folder can be referenced from the HTML.
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1690ff" />
+    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+    <!-- TODO:AIo Update the individual logos for each.-->
+    <link rel="apple-touch-icon" href="public/logo192.png" />
+    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
 
-    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-    work correctly both with client-side routing and a non-root public URL.
-    Learn how to configure a non-root public URL by running `npm run build`.
-  -->
-  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-  <meta name="description" content="ImEX Online"/>
-  <title>ImEX Online</title>
-  <script type="text/javascript">
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
-    (function () {
-      d = document;
-      s = d.createElement('script');
-      s.src = 'https://client.crisp.chat/l.js';
-      s.async = 1;
-      d.getElementsByTagName('head')[0].appendChild(s);
-    })();
-  </script>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <meta name="description" content="Rome Online"/>
-  <title>Rome Online</title>
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <meta name="description" content="ImEX Online" />
+    <title>ImEX Online</title>
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
+      (function () {
+        d = document;
+        s = d.createElement('script');
+        s.src = 'https://client.crisp.chat/l.js';
+        s.async = 1;
+        d.getElementsByTagName('head')[0].appendChild(s);
+      })();
+    </script>
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <meta name="description" content="Rome Online" />
+    <title>Rome Online</title>
 
-  <!--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-->
+    <!--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>
+    <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>
+    <!--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>
 
 
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <title>ProManager</title>
-  <meta name="description" content="ProManager"/>
 
-  <% } %>
-  <script>
-    !(function () {
-      'use strict';
-      var e = [
-        'debug',
-        'destroy',
-        'do',
-        'help',
-        'identify',
-        'is',
-        'off',
-        'on',
-        'ready',
-        'render',
-        'reset',
-        'safe',
-        'set',
-      ];
-      if (window.noticeable) console.warn('Noticeable SDK code snippet loaded more than once');
-      else {
-        var n = (window.noticeable = window.noticeable || []);
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
+    <title>ProManager</title>
+    <meta name="description" content="ProManager" />
 
-        function t(e) {
-          return function () {
-            var t = Array.prototype.slice.call(arguments);
-            return t.unshift(e), n.push(t), n;
-          };
-        }
-
-        !(function () {
-          for (var o = 0; o < e.length; o++) {
-            var r = e[o];
-            n[r] = t(r);
+    <% } %>
+    <script>
+      !(function () {
+        'use strict';
+        var e = [
+          'debug',
+          'destroy',
+          'do',
+          'help',
+          'identify',
+          'is',
+          'off',
+          'on',
+          'ready',
+          'render',
+          'reset',
+          'safe',
+          'set',
+        ];
+        if (window.noticeable) console.warn('Noticeable SDK code snippet loaded more than once');
+        else {
+          var n = (window.noticeable = window.noticeable || []);
+          function t(e) {
+            return function () {
+              var t = Array.prototype.slice.call(arguments);
+              return t.unshift(e), n.push(t), n;
+            };
           }
-        })(),
-          (function () {
-            var e = document.createElement('script');
-            (e.async = !0), (e.src = 'https://sdk.noticeable.io/l.js');
-            var n = document.head;
-            n.insertBefore(e, n.firstChild);
-          })();
-      }
-    })();
-  </script>
-</head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
+          !(function () {
+            for (var o = 0; o < e.length; o++) {
+              var r = e[o];
+              n[r] = t(r);
+            }
+          })(),
+            (function () {
+              var e = document.createElement('script');
+              (e.async = !0), (e.src = 'https://sdk.noticeable.io/l.js');
+              var n = document.head;
+              n.insertBefore(e, n.firstChild);
+            })();
+        }
+      })();
+    </script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
 
-<script type="module" src="src/index.jsx"></script>
-</body>
+    <script type="module" src="src/index.jsx"></script>
+  </body>
 </html>

client/package.json

@@ -2,91 +2,90 @@
   "name": "bodyshop",
   "version": "0.2.1",
   "engines": {
-    "node": ">=18.18.2"
+    "node": "18.18.2"
   },
   "type": "module",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
-    "@apollo/client": "^3.11.4",
-    "@emotion/is-prop-valid": "^1.3.0",
-    "@fingerprintjs/fingerprintjs": "^4.4.3",
+    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/pro-layout": "^7.17.16",
+    "@apollo/client": "^3.8.10",
+    "@asseinfo/react-kanban": "^2.2.0",
+    "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.33.1",
-    "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.12.1",
+    "@reduxjs/toolkit": "^2.2.1",
+    "@sentry/cli": "^2.28.6",
+    "@sentry/react": "^7.104.0",
+    "@splitsoftware/splitio-react": "^1.11.0",
     "@tanem/react-nprogress": "^5.0.51",
-    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "antd": "^5.15.3",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
-    "autosize": "^6.0.1",
-    "axios": "^1.7.4",
-    "classnames": "^2.5.1",
-    "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.12",
+    "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.12.5",
-    "graphql": "^16.9.0",
-    "i18next": "^23.12.3",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.5",
-    "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.1",
-    "memoize-one": "^6.0.0",
-    "normalize-url": "^8.0.1",
-    "object-hash": "^3.0.0",
+    "firebase": "^10.8.1",
+    "graphql": "^16.6.0",
+    "i18next": "^23.10.0",
+    "i18next-browser-languagedetector": "^7.0.2",
+    "libphonenumber-js": "^1.10.57",
+    "logrocket": "^8.0.1",
+    "markerjs2": "^2.32.0",
+    "normalize-url": "^8.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^9.1.0",
-    "raf-schd": "^4.0.3",
-    "react": "^18.3.1",
-    "react-big-calendar": "^1.13.2",
+    "query-string": "^9.0.0",
+    "react": "^18.2.0",
+    "react-big-calendar": "^1.11.0",
     "react-color": "^2.19.3",
-    "react-cookie": "^7.2.0",
-    "react-dom": "^18.3.1",
+    "react-cookie": "^7.1.0",
+    "react-dom": "^18.2.0",
     "react-drag-listview": "^2.0.0",
-    "react-grid-gallery": "^1.0.1",
+    "react-grid-gallery": "^1.0.0",
     "react-grid-layout": "1.3.4",
-    "react-i18next": "^14.1.3",
-    "react-icons": "^5.3.0",
+    "react-i18next": "^14.0.5",
+    "react-icons": "^5.0.1",
     "react-image-lightbox": "^5.1.4",
+    "react-joyride": "^2.7.4",
     "react-markdown": "^9.0.1",
-    "react-number-format": "^5.4.0",
-    "react-popopo": "^2.1.9",
+    "react-number-format": "^5.3.3",
     "react-product-fruits": "^2.2.6",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.1.0",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.22.2",
+    "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.10.1",
-    "recharts": "^2.12.7",
+    "recharts": "^2.12.2",
     "redux": "^5.0.1",
-    "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
-    "reselect": "^5.1.1",
-    "sass": "^1.77.8",
-    "socket.io-client": "^4.7.5",
-    "styled-components": "^6.1.12",
+    "reselect": "^5.1.0",
+    "sass": "^1.71.1",
+    "socket.io-client": "^4.7.4",
+    "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
-    "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.5",
+    "terser-webpack-plugin": "^5.3.10",
+    "userpilot": "^1.3.1",
     "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^3.5.2",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-navigation-preload": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
-    "build": "dotenvx run --env-file=.env.development.imex -- vite build",
+    "build": "vite build",
     "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
     "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
     "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
@@ -129,31 +128,32 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.7.0",
-    "@emotion/babel-plugin": "^11.12.0",
-    "@emotion/react": "^11.13.0",
-    "@sentry/webpack-plugin": "^2.22.2",
-    "@testing-library/cypress": "^10.0.2",
-    "browserslist": "^4.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@dotenvx/dotenvx": "^0.15.4",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@sentry/webpack-plugin": "^2.14.2",
+    "@swc/core": "^1.3.107",
+    "@swc/plugin-styled-components": "^1.5.108",
+    "@testing-library/cypress": "^10.0.1",
+    "browserslist": "^4.22.3",
     "browserslist-to-esbuild": "^2.1.1",
     "cross-env": "^7.0.3",
-    "cypress": "^13.13.3",
+    "cypress": "^13.6.6",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.11.1",
+    "memfs": "^4.6.0",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.0",
+    "vite": "^5.0.11",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-legacy": "^2.1.0",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.1",
-    "vite-plugin-style-import": "^2.0.0",
-    "workbox-window": "^7.1.0"
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite-plugin-pwa": "^0.19.0",
+    "vite-plugin-style-import": "^2.0.0"
   }
 }

client/public/3rdparty-api.txt

@@ -16422,7 +16422,7 @@ For when you don't want to write the same thing over and over to cache a method
 $ npm install --save-dev stubs
 ```
 ```js
-var mylib = require('./lib/index.jsx')
+var mylib = require('./lib/index.js')
 var stubs = require('stubs')
 
 // make it a noop

client/public/3rdparty-app.txt

@@ -16567,7 +16567,7 @@ even more slower.
 ## Benchmarks
 
 ```bash
-$ node benchmarks/index.jsx
+$ node benchmarks/index.js
 Benchmarking: sign
 elliptic#sign x 262 ops/sec ±0.51% (177 runs sampled)
 eccjs#sign x 55.91 ops/sec ±0.90% (144 runs sampled)

client/src/App/App.jsx

@@ -7,7 +7,9 @@ import { connect } from "react-redux";
 import { Route, Routes } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
-import ErrorBoundary from "../components/error-boundary/error-boundary.component"; // Component Imports
+import ErrorBoundary from "../components/error-boundary/error-boundary.component";
+
+//Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import LandingPage from "../pages/landing/landing.page";
@@ -18,23 +20,23 @@ import { checkUserSession } from "../redux/user/user.actions";
 import { selectBodyshop, selectCurrentEula, selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
+import handleBeta from "../utils/betaHandler";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
-import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
+import { ProductFruits } from "react-product-fruits";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
+
 const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
 const MobilePaymentContainer = lazy(() => import("../pages/mobile-payment/mobile-payment.container"));
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   online: selectOnline,
   bodyshop: selectBodyshop,
   currentEula: selectCurrentEula
 });
-
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
   setOnline: (isOnline) => dispatch(setOnline(isOnline))
@@ -58,11 +60,11 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
 
   // Associate event listeners, memoize to prevent multiple listeners being added
   useEffect(() => {
-    const offlineListener = () => {
+    const offlineListener = (e) => {
       setOnline(false);
     };
 
-    const onlineListener = () => {
+    const onlineListener = (e) => {
       setOnline(true);
     };
 
@@ -96,7 +98,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           InstanceRenderMgr({
             imex: "gvfvfw/bodyshopapp",
             rome: "rome-online/rome-online",
-            promanager: "" // TODO: AIO Add in log rocket for promanager instances.
+            promanager: "" //TODO:AIO Add in log rocket for promanager instances.
           })
         );
       }
@@ -107,20 +109,26 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
     return <LoadingSpinner message={t("general.labels.loggingin")} />;
   }
 
-  if (!online) {
+  handleBeta();
+
+  if (!online)
     return (
       <Result
         status="warning"
         title={t("general.labels.nointernet")}
         subTitle={t("general.labels.nointernet_sub")}
         extra={
-          <Button type="primary" onClick={() => window.location.reload()}>
+          <Button
+            type="primary"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
             {t("general.actions.refresh")}
           </Button>
         }
       />
     );
-  }
 
   if (currentEula && !currentUser.eulaIsAccepted) {
     return <Eula />;
@@ -139,13 +147,18 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         />
       }
     >
-      <ProductFruitsWrapper
-        currentUser={currentUser}
+      <ProductFruits
         workspaceCode={InstanceRenderMgr({
           imex: null,
           rome: "9BkbEseqNqxw8jUH",
           promanager: "aoJoEifvezYI0Z0P"
         })}
+        debug
+        language="en"
+        user={{
+          email: currentUser.email,
+          username: currentUser.email
+        }}
       />
 
       <Routes>

client/src/App/App.styles.scss

@@ -161,15 +161,3 @@
 .rowWithColor > td {
   background-color: var(--bgColor) !important;
 }
-
-.muted-button {
-  color: lightgray;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 16px; /* Adjust as needed */
-}
-
-.muted-button:hover {
-  color: darkgrey;
-}

client/src/App/ProductFruitsWrapper.jsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { ProductFruits } from "react-product-fruits";
-import PropTypes from "prop-types";
-
-const ProductFruitsWrapper = React.memo(({ currentUser, workspaceCode }) => {
-  return (
-    workspaceCode &&
-    currentUser?.authorized === true &&
-    currentUser?.email && (
-      <ProductFruits
-        lifeCycle="unmount"
-        workspaceCode={workspaceCode}
-        debug
-        language="en"
-        user={{
-          email: currentUser.email,
-          username: currentUser.email
-        }}
-      />
-    )
-  );
-});
-
-export default ProductFruitsWrapper;
-
-ProductFruitsWrapper.propTypes = {
-  currentUser: PropTypes.shape({
-    authorized: PropTypes.bool,
-    email: PropTypes.string
-  }),
-  workspaceCode: PropTypes.string
-};

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -13,7 +13,6 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import JobMarkSelectedExported from "../jobs-mark-selected-exported/jobs-mark-selected-exported";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 
@@ -171,22 +170,13 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       extra={
         <Space wrap>
           {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
-            <>
-              <JobMarkSelectedExported
-                jobIds={selectedJobs}
-                disabled={transInProgress || selectedJobs.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedJobs}
-                refetch={refetch}
-              />
-              <JobsExportAllButton
-                jobIds={selectedJobs}
-                disabled={transInProgress || selectedJobs.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedJobs}
-                refetch={refetch}
-              />
-            </>
+            <JobsExportAllButton
+              jobIds={selectedJobs}
+              disabled={transInProgress || selectedJobs.length === 0}
+              loadingCallback={setTransInProgress}
+              completedCallback={setSelectedJobs}
+              refetch={refetch}
+            />
           )}
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
           <Input.Search

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -1,6 +1,6 @@
-import { PageHeader } from "@ant-design/pro-layout";
 import { useMutation, useQuery } from "@apollo/client";
 import { Button, Divider, Form, Popconfirm, Space } from "antd";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,7 +13,6 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
@@ -23,6 +22,7 @@ import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-galler
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import BillDetailEditReturn from "./bill-detail-edit-return.component";
+import { PageHeader } from "@ant-design/pro-layout";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -98,7 +98,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
     });
 
     billlines.forEach((billline) => {
-      const { deductedfromlbr, inventories, jobline, original_actual_price, create_ppc, ...il } = billline;
+      const { deductedfromlbr, inventories, jobline, ...il } = billline;
       delete il.__typename;
 
       if (il.id) {
@@ -153,7 +153,6 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
   const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
-  const isinhouse = data && data.bills_by_pk && data.bills_by_pk.isinhouse;
 
   return (
     <>
@@ -189,7 +188,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
             }
           />
           <Form form={form} onFinish={handleFinish} initialValues={transformData(data)} layout="vertical">
-            <BillFormContainer form={form} billEdit disabled={exported} disableInHouse={isinhouse} />
+            <BillFormContainer form={form} billEdit disabled={exported} />
             <Divider orientation="left">{t("general.labels.media")}</Divider>
             {bodyshop.uselocalmediaserver ? (
               <JobsDocumentsLocalGallery

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

@@ -14,6 +14,7 @@ import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
@@ -21,7 +22,6 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -41,8 +41,7 @@ export function BillFormComponent({
   job,
   loadOutstandingReturns,
   loadInventory,
-  preferredMake,
-  disableInHouse
+  preferredMake
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -178,7 +177,7 @@ export function BillFormComponent({
           ]}
         >
           <VendorSearchSelect
-            disabled={disabled || disableInHouse}
+            disabled={disabled}
             options={vendorAutoCompleteOptions}
             preferredMake={preferredMake}
             onSelect={handleVendorSelect}
@@ -244,7 +243,7 @@ export function BillFormComponent({
             })
           ]}
         >
-          <Input disabled={disabled || disableInvNumber || disableInHouse} />
+          <Input disabled={disabled || disableInvNumber} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.date")}
@@ -276,7 +275,7 @@ export function BillFormComponent({
             })
           ]}
         >
-          <DateTimePicker isDateOnly disabled={disabled} />
+          <FormDatePicker disabled={disabled} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.is_credit_memo")}

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

@@ -16,7 +16,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse }) {
+export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber }) {
   const {
     treatments: { Simple_Inventory }
   } = useSplitTreatments({
@@ -47,7 +47,6 @@ export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableI
         job={lineData ? lineData.jobs_by_pk : null}
         responsibilityCenters={bodyshop.md_responsibility_centers || null}
         disableInvNumber={disableInvNumber}
-        disableInHouse={disableInHouse}
         loadOutstandingReturns={loadOutstandingReturns}
         loadInventory={loadInventory}
         preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}

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

@@ -3,6 +3,8 @@ import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
+//To be used as a form element only.
+const { Option } = Select;
 const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
   const { t } = useTranslation();
 

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

@@ -8,8 +8,8 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import ContractsRatesChangeButton from "../contracts-rates-change-button/contracts-rates-change-button.component";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -196,7 +196,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                     }
                   ]}
                 >
-                  <DateTimePicker isDateOnly />
+                  <FormDatePicker />
                 </Form.Item>
                 {dlExpiresBeforeReturn && (
                   <Space style={{ color: "tomato" }}>
@@ -274,7 +274,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputPhone />
         </Form.Item>
         <Form.Item label={t("contracts.fields.driver_dob")} name="driver_dob">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
       <ContractsRatesChangeButton form={form} />

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -10,12 +10,16 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
 import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
-export default function CourtesyCarCreateFormComponent({ form, saveLoading, newCC }) {
+export default function CourtesyCarCreateFormComponent({
+  form,
+  saveLoading,
+  newCC,
+}) {
   const { t } = useTranslation();
   const client = useApolloClient();
 
@@ -157,16 +161,16 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
           <Input />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.purchasedate")} name="purchasedate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.servicestartdate")} name="servicestartdate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.serviceenddate")} name="serviceenddate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.leaseenddate")} name="leaseenddate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
 
@@ -224,7 +228,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
         </div>
         <div>
           <Form.Item label={t("courtesycars.fields.nextservicedate")} name="nextservicedate">
-            <DateTimePicker isDateOnly />
+            <FormDatePicker />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}>
             {() => {
@@ -256,7 +260,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
         </Form.Item>
         <div>
           <Form.Item label={t("courtesycars.fields.registrationexpires")} name="registrationexpires">
-            <DateTimePicker isDateOnly />
+            <FormDatePicker />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.registrationexpires !== c.registrationexpires}>
             {() => {
@@ -289,7 +293,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
               }
             ]}
           >
-            <DateTimePicker isDateOnly />
+            <FormDatePicker />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.insuranceexpires !== c.insuranceexpires}>
             {() => {

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.component.jsx

@@ -2,7 +2,7 @@ import { Form, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 export default function CourtesyCarReturnModalComponent() {
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ export default function CourtesyCarReturnModalComponent() {
           }
         ]}
       >
-        <DateTimePicker isDateOnly />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.kmend")}

client/src/components/dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx

@@ -9,6 +9,7 @@ import axios from "axios";
 const fortyFiveDaysAgo = () => dayjs().subtract(45, "day").toLocaleString();
 
 export default function JobLifecycleDashboardComponent({ data, bodyshop, ...cardProps }) {
+  console.log("🚀 ~ JobLifecycleDashboardComponent ~ bodyshop:", bodyshop);
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [lifecycleData, setLifecycleData] = useState(null);
@@ -142,7 +143,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
           >
             <div>
               {lifecycleData.summations.map((key) => (
-                <Tag key={key.status} color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
+                <Tag color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
                   <div
                     aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                     title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
@@ -164,7 +165,6 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
               size="small"
               pagination={false}
               columns={columns}
-              rowKey={(record) => record.status}
               dataSource={lifecycleData.summations.sort((a, b) => b.value - a.value).slice(0, 3)}
             />
           </Card>

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

@@ -36,6 +36,9 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
     };
   });
 
+  console.log("Scheduled Out Today");
+  console.dir(scheduledOutToday);
+
   const tvFontSize = 18;
   const tvFontWeight = "bold";
 
@@ -86,6 +89,8 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
       sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
+        console.log("Render record out today");
+        console.dir(record);
         return record.ownerid ? (
           <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
             <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -14,6 +14,7 @@ import {
   Typography
 } from "antd";
 import Dinero from "dinero.js";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -21,12 +22,11 @@ import { createStructuredSelector } from "reselect";
 import { determineDmsType } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import i18n from "../../translations/i18n";
-import dayjs from "../../utils/day";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -89,7 +89,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
             job.area_of_damage && job.area_of_damage.impact1
               ? " " +
                 t("jobs.labels.dms.damageto", {
-                  area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
+                  area_of_damage: (job.area_of_damage && job.area_of_damage.impact1) || "UNKNOWN"
                 })
               : ""
           }`.slice(0, 239),
@@ -164,7 +164,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                 <Input disabled />
               </Form.Item>
               <Form.Item name="inservicedate" label={t("jobs.fields.dms.inservicedate")}>
-                <DateTimePicker isDateOnly />
+                <FormDatePicker />
               </Form.Item>
             </LayoutFormRow>
             <Space>

client/src/components/eula/eula.component.jsx

@@ -4,6 +4,7 @@ import Markdown from "react-markdown";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
+import { FormDatePicker } from "../form-date-picker/form-date-picker.component";
 import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
 import { useMutation } from "@apollo/client";
 import { acceptEula } from "../../redux/user/user.actions";
@@ -11,7 +12,6 @@ import { useTranslation } from "react-i18next";
 import day from "../../utils/day";
 
 import "./eula.styles.scss";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const Eula = ({ currentEula, currentUser, acceptEula }) => {
   const [formReady, setFormReady] = useState(false);
@@ -216,7 +216,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
               }
             ]}
           >
-            <DateTimePicker isDateOnly onChange={handleChange} onlyToday aria-label={t("eula.labels.date_accepted")} />
+            <FormDatePicker onChange={handleChange} onlyToday aria-label={t("eula.labels.date_accepted")} />
           </Form.Item>
         </Col>
       </Row>

client/src/components/form-date-picker/form-date-picker.component.jsx

@@ -0,0 +1,123 @@
+import { DatePicker } from "antd";
+import dayjs from "../../utils/day";
+import React, { useRef } from "react";
+
+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)(FormDatePicker);
+
+const dateFormat = "MM/DD/YYYY";
+
+export function FormDatePicker({
+  bodyshop,
+  value,
+  onChange,
+  onBlur,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+
+  const handleChange = (newDate) => {
+    if (value !== newDate && onChange) {
+      onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key.toLowerCase() === "t") {
+      if (onChange) {
+        onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+      }
+    } else if (e.key.toLowerCase() === "enter") {
+      if (ref.current && ref.current.blur) ref.current.blur();
+    }
+  };
+
+  const handleBlur = (e) => {
+    const v = e.target.value;
+    if (!v) return;
+
+    const formats = [
+      "MMDDYY",
+      "MMDDYYYY",
+      "MM/DD/YY",
+      "MM/DD/YYYY",
+      "M/DD/YY",
+      "M/DD/YYYY",
+      "MM/D/YY",
+      "MM/D/YYYY",
+      "M/D/YY",
+      "M/D/YYYY",
+      "D/MM/YY",
+      "D/MM/YYYY",
+      "DD/M/YY",
+      "DD/M/YYYY",
+      "D/M/YY",
+      "D/M/YYYY"
+    ];
+
+    let _a;
+
+    // Iterate through formats to find the correct one
+    for (let format of formats) {
+      _a = dayjs(v, format);
+      if (v === _a.format(format)) {
+        break;
+      }
+    }
+
+    if (_a.isValid() && value && value.isValid && value.isValid()) {
+      _a.set({
+        hours: value.hours(),
+        minutes: value.minutes(),
+        seconds: value.seconds(),
+        milliseconds: value.milliseconds()
+      });
+    }
+
+    if (_a.isValid() && onChange) {
+      if (onlyFuture) {
+        if (dayjs().subtract(1, "day").isBefore(_a)) {
+          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+        } else {
+          onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+        }
+      } else {
+        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+      }
+    }
+  };
+
+  return (
+    <div onKeyDown={handleKeyDown}>
+      <DatePicker
+        ref={ref}
+        value={value ? dayjs(value) : null}
+        onChange={handleChange}
+        format={dateFormat}
+        onBlur={onBlur || handleBlur}
+        showToday={false}
+        disabledTime
+        disabledDate={(d) => {
+          if (onlyToday) {
+            return !dayjs().isSame(d, "day");
+          } else if (onlyFuture) {
+            return dayjs().subtract(1, "day").isAfter(d);
+          }
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+}

client/src/components/form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx

@@ -0,0 +1,48 @@
+import { DatePicker } from "antd";
+import dayjs from "../../utils/day.js";
+import React, { useRef } from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(FormDateTimePickerEnhanced);
+
+const dateFormat = "MM/DD/YYYY h:mm a";
+
+export function FormDateTimePickerEnhanced({
+  bodyshop,
+  value,
+  onBlur,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+  return (
+    <div>
+      <DatePicker
+        ref={ref}
+        value={value ? dayjs(value) : null}
+        format={dateFormat}
+        onBlur={onBlur}
+        showToday={false}
+        disabledDate={(d) => {
+          if (onlyToday) {
+            return !dayjs().isSame(d, "day");
+          } else if (onlyFuture) {
+            return dayjs().subtract(1, "day").isAfter(d);
+          }
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+}

client/src/components/form-date-time-picker/form-date-time-picker.component.jsx

@@ -1,105 +1,46 @@
-import { DatePicker } from "antd";
-import PropTypes from "prop-types";
-import React, { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { forwardRef } from "react";
+//import DatePicker from "react-datepicker";
+//import "react-datepicker/src/stylesheets/datepicker.scss";
+import { Space, TimePicker } from "antd";
 import dayjs from "../../utils/day";
-import { fuzzyMatchDate } from "./formats.js";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+//To be used as a form element only.
 
-const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
-  const [isManualInput, setIsManualInput] = useState(false);
-  const { t } = useTranslation();
-
-  const handleChange = useCallback(
-    (newDate) => {
-      if (onChange) {
-        onChange(newDate || null);
-      }
-      setIsManualInput(false);
-    },
-    [onChange]
-  );
-
-  const handleBlur = useCallback(
-    (e) => {
-      // Bail if this is not a manual input
-      if (!isManualInput) {
-        return;
-      }
-      // Reset manual input flag
-      setIsManualInput(false);
-
-      const v = e?.target?.value;
-
-      if (!v) return;
-
-      let parsedDate = isDateOnly ? fuzzyMatchDate(v)?.startOf("day") : fuzzyMatchDate(v);
-
-      if (parsedDate && onChange) {
-        onChange(parsedDate);
-      }
-    },
-    [isManualInput, isDateOnly, onChange]
-  );
-
-  const handleKeyDown = useCallback(
-    (e) => {
-      setIsManualInput(true);
-
-      if (e.key.toLowerCase() === "t" && onChange) {
-        e.preventDefault();
-        setIsManualInput(false);
-        onChange(dayjs());
-      } else if (e.key.toLowerCase() === "enter") {
-        handleBlur(e);
-      }
-    },
-    [onChange, handleBlur]
-  );
-
-  const handleDisabledDate = useCallback(
-    (current) => {
-      if (onlyToday) {
-        return !dayjs().isSame(current, "day");
-      } else if (onlyFuture) {
-        return dayjs().subtract(1, "day").isAfter(current);
-      }
-      return false;
-    },
-    [onlyToday, onlyFuture]
-  );
+const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps }, ref) => {
+  // const handleChange = (newDate) => {
+  //   if (value !== newDate && onChange) {
+  //     onChange(newDate);
+  //   }
+  // };
 
   return (
-    <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
-      <DatePicker
-        showTime={
-          isDateOnly
-            ? false
-            : {
-                format: "hh:mm a",
-                minuteStep: 15,
-                defaultValue: dayjs(dayjs(), "HH:mm:ss")
-              }
-        }
-        format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
+    <Space direction="vertical" style={{ width: "100%" }} id={id}>
+      <FormDatePicker
+        {...restProps}
+        {...(onlyFuture && {
+          disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d)
+        })}
+        value={value}
+        onBlur={onBlur}
+        onChange={onChange}
+        onlyFuture={onlyFuture}
+        isDateOnly={false}
+      />
+
+      <TimePicker
         value={value ? dayjs(value) : null}
-        onChange={handleChange}
-        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
-        onBlur={onBlur || handleBlur}
-        disabledDate={handleDisabledDate}
+        {...(onlyFuture && {
+          disabledDate: (d) => dayjs().isAfter(d)
+        })}
+        onChange={onChange}
+        disableSeconds={true}
+        minuteStep={15}
+        onBlur={onBlur}
+        format="hh:mm a"
         {...restProps}
       />
-    </div>
+    </Space>
   );
 };
 
-DateTimePicker.propTypes = {
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  id: PropTypes.string,
-  onlyFuture: PropTypes.bool,
-  onlyToday: PropTypes.bool,
-  isDateOnly: PropTypes.bool
-};
-
-export default React.memo(DateTimePicker);
+export default forwardRef(DateTimePicker);

client/src/components/form-date-time-picker/formats.js

@@ -1,63 +0,0 @@
-import dayjs from "../../utils/day";
-
-const dateFormats = [
-  "MMDDYYYY",
-  "MMDDYY",
-  "M/D/YYYY",
-  "MM/D/YYYY",
-  "M/DD/YYYY",
-  "MM/DD/YYYY",
-  "M/D/YY",
-  "MM/D/YY",
-  "M/DD/YY",
-  "MM/DD/YY"
-];
-
-const timeFormats = ["h:mm A", "h:mmA", "h A", "hA", "hh:mm A", "hh:mm:ss A"];
-
-const dateTimeFormats = [
-  ...["M/D/YYYY", "MM/D/YYYY", "M/DD/YYYY", "MM/DD/YYYY", "M/D/YY", "MM/D/YY", "M/DD/YY", "MM/DD/YY"].flatMap(
-    (dateFormat) => timeFormats.map((timeFormat) => `${dateFormat} ${timeFormat}`)
-  ),
-
-  ...["MMDDYYYY", "MMDDYY"].flatMap((dateFormat) => timeFormats.map((timeFormat) => `${dateFormat} ${timeFormat}`)),
-
-  "M/D/YYYY",
-  "MM/D/YYYY",
-  "M/DD/YYYY",
-  "MM/DD/YYYY",
-  "M/D/YY",
-  "MM/D/YY",
-  "M/DD/YY",
-  "MM/DD/YY",
-  "MMDDYYYY",
-  "MMDDYY"
-];
-
-const sanitizeInput = (input) =>
-  input
-    .trim()
-    .toUpperCase()
-    .replace(/\s*(am|pm)\s*/i, " $1")
-    .replaceAll(".", "/")
-    .replaceAll("-", "/");
-
-export const fuzzyMatchDate = (dateString) => {
-  const sanitizedInput = sanitizeInput(dateString);
-
-  for (const format of dateFormats) {
-    const parsedDate = dayjs(sanitizedInput, format, true);
-    if (parsedDate.isValid()) {
-      return parsedDate;
-    }
-  }
-
-  for (const format of dateTimeFormats) {
-    const parsedDateTime = dayjs(sanitizedInput, format, true);
-    if (parsedDateTime.isValid()) {
-      return parsedDateTime; // Return the dayjs object
-    }
-  }
-
-  return null; // If no matching format is found
-};

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

@@ -13,6 +13,7 @@ import Icon, {
   FileFilled,
   HomeFilled,
   ImportOutlined,
+  InfoCircleOutlined,
   LineChartOutlined,
   PaperClipOutlined,
   PhoneOutlined,
@@ -26,8 +27,8 @@ import Icon, {
   UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
-import React from "react";
+import { Layout, Menu, Switch, Tooltip } from "antd";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -42,6 +43,7 @@ import { selectRecentItems, selectSelectedHeader } from "../../redux/application
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { checkBeta, handleBeta, setBeta } from "../../utils/betaHandler";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
@@ -113,21 +115,19 @@ function Header({
     names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
     splitKey: bodyshop && bodyshop.imexshopid
   });
-
+  const [betaSwitch, setBetaSwitch] = useState(false);
   const { t } = useTranslation();
 
-  const deleteBetaCookie = () => {
-    const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
-    if (cookieExists) {
-      const domain = window.location.hostname.split(".").slice(-2).join(".");
-      document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
-      console.log(`betaSwitchImex cookie deleted`);
-    } else {
-      console.log(`betaSwitchImex cookie does not exist`);
-    }
-  };
+  useEffect(() => {
+    const isBeta = checkBeta();
+    setBetaSwitch(isBeta);
+  }, []);
 
-  deleteBetaCookie();
+  const betaSwitchChange = (checked) => {
+    setBeta(checked);
+    setBetaSwitch(checked);
+    handleBeta();
+  };
 
   const accountingChildren = [];
 
@@ -695,6 +695,31 @@ function Header({
     }
   ];
 
+  InstanceRenderManager({
+    executeFunction: true,
+    args: [],
+    imex: () => {
+      menuItems.push({
+        key: "beta-switch",
+        id: "header-beta-switch",
+        style: { marginLeft: "auto" },
+        label: (
+          <Tooltip
+            title={`A more modern ${InstanceRenderManager({
+              imex: t("titles.imexonline"),
+              rome: t("titles.romeonline"),
+              promanager: t("titles.promanager")
+            })} is ready for you to try! You can switch back at any time.`}
+          >
+            <InfoCircleOutlined />
+            <span style={{ marginRight: 8 }}>Try the new app</span>
+            <Switch checked={betaSwitch} onChange={betaSwitchChange} />
+          </Tooltip>
+        )
+      });
+    }
+  });
+
   return (
     <Layout.Header>
       <Menu

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,5 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, notification, Switch } from "antd";
+import dayjs from "../../../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,7 +14,6 @@ import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
 import { insertAuditTrail } from "../../../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../../../redux/user/user.selectors";
 import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
-import dayjs from "../../../../utils/day";
 import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
 import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
 
@@ -275,19 +275,7 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
             >
               <DateTimePicker disabled={readOnly} />
             </Form.Item>
-            <Form.Item
-              name="actual_delivery"
-              label={t("jobs.fields.actual_delivery")}
-              rules={[
-                {
-                  required: bodyshop.deliverchecklist.actual_delivery
-                    ? bodyshop.deliverchecklist.actual_delivery
-                    : false
-                  //message: t("general.validation.required"),
-                }
-              ]}
-              disabled={readOnly}
-            >
+            <Form.Item name="actual_delivery" label={t("jobs.fields.actual_delivery")} disabled={readOnly}>
               <DateTimePicker disabled={readOnly} />
             </Form.Item>
             <Form.Item

client/src/components/job-close-ro-guard/job-close-ro-guard.bills.jsx

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

client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx

@@ -1,6 +1,6 @@
+import React, { useCallback, useState } from "react";
 import { LockOutlined } from "@ant-design/icons";
 import { Badge, Card, Col, Collapse, Form, Input, Row, Space, Tooltip } from "antd";
-import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,8 +12,9 @@ import JobCloseRoGuardBills from "./job-close-ro-guard.bills";
 import JobCloseRoGuardPpd from "./job-close-ro-guard.ppd";
 import JobCloseRoGuardProfit from "./job-close-ro-guard.profit";
 import "./job-close-ro-guard.styles.scss";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import JobCloseRoGuardSublet from "./job-close-ro-guard.sublet";
 import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser

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

@@ -1,21 +1,14 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import Car from "../job-damage-visual/job-damage-visual.component";
 import CardTemplate from "./job-detail-cards.template.component";
+import Car from "../job-damage-visual/job-damage-visual.component";
 
 export default function JobDetailCardsDamageComponent({ loading, data }) {
   const { t } = useTranslation();
   const { area_of_damage } = data;
   return (
     <CardTemplate loading={loading} title={t("jobs.labels.cards.damage")}>
-      {area_of_damage ? (
-        <Car
-          dmg1={area_of_damage.impact1 && area_of_damage.impact1.padStart(2, "0")}
-          dmg2={area_of_damage.impact2 && area_of_damage.impact2.padStart(2, "0")}
-        />
-      ) : (
-        t("jobs.errors.nodamage")
-      )}
+      {area_of_damage ? <Car dmg1={area_of_damage.impact1} dmg2={area_of_damage.impact2} /> : t("jobs.errors.nodamage")}
     </CardTemplate>
   );
 }

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

@@ -26,16 +26,6 @@ export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
   const { t } = useTranslation();
   const { joblines_status } = data;
 
-  const filteredJobLines = data.joblines.filter(
-    (j) =>
-      j.part_type !== null &&
-      j.part_type !== "PAE" &&
-      j.part_type !== "PAS" &&
-      j.part_type !== "PASL" &&
-      j.part_qty !== 0 &&
-      j.act_price !== 0
-  );
-//TODO: Correct jobline_statuses view by including the part_qty !== 0 and act_price !== 0
   const columns = [
     {
       title: t("joblines.fields.line_desc"),
@@ -105,7 +95,7 @@ export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
     <div>
       <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
         <PartsStatusPie joblines_status={joblines_status} />
-        <Table key="id" columns={columns} dataSource={filteredJobLines ? filteredJobLines : []} />
+        <Table key="id" columns={columns} dataSource={data ? data.joblines : []} />
       </CardTemplate>
     </div>
   );

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

@@ -2,30 +2,27 @@ import { useQuery } from "@apollo/client";
 import { Col, Row, Skeleton, Space, Timeline, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import { GET_JOB_LINE_ORDERS } from "../../graphql/jobs.queries";
-import { QUERY_JOBLINE_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
-import { selectTechnician } from "../../redux/tech/tech.selectors.js";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container.jsx";
-import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { QUERY_JOBLINE_TASKS_PAGINATED } from "../../graphql/tasks.queries.js";
 import TaskListContainer from "../task-list/task-list.container.jsx";
+import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  technician: selectTechnician
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobLinesExpander);
 
-export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
+export function JobLinesExpander({ jobline, jobid, bodyshop }) {
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(GET_JOB_LINE_ORDERS, {
     fetchPolicy: "network-only",
@@ -50,15 +47,9 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
                   children: (
                     <Row wrap>
                       <Col span={4}>
-                        {!technician ? (
-                          <>
-                            <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
-                              {line.parts_order.order_number}
-                            </Link>
-                          </>
-                        ) : (
-                          `${line.parts_order.order_number}`
-                        )}
+                        <Link to={`/manage/jobs/${jobid}?partsorderid=${line.parts_order.id}`}>
+                          {line.parts_order.order_number}
+                        </Link>
                       </Col>
                       <Col span={4}>
                         <DateFormatter>{line.parts_order.order_date}</DateFormatter>
@@ -93,17 +84,17 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
                   key: line.id,
                   children: (
                     <Row>
-                      <Col span={8}>{line.parts_dispatch.number}</Col>
+                      <Col span={8}>
+                        <Link to={`/manage/jobs/${jobid}?partsorderid=${line.id}`}>{line.parts_dispatch.number}</Link>
+                      </Col>
                       <Col span={8}>
                         {bodyshop.employees.find((e) => e.id === line.parts_dispatch.employeeid)?.first_name}
                       </Col>
                       <Col span={8}>
-                        {line.accepted_at ? (
-                          <Space>
-                            {t("parts_dispatch_lines.fields.accepted_at")}
-                            <DateFormatter>{line.accepted_at}</DateFormatter>
-                          </Space>
-                        ) : null}
+                        <Space>
+                          {t("parts_dispatch_lines.fields.accepted_at")}
+                          <DateFormatter>{line.accepted_at}</DateFormatter>
+                        </Space>
                       </Col>
                     </Row>
                   )
@@ -120,7 +111,6 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
       <FeatureWrapper featureName="bills" noauth={() => null}>
         <Col md={24} lg={8}>
           <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-          <BillDetailEditcontainer />
           <Timeline
             items={
               data.billlines.length > 0
@@ -129,15 +119,9 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
                     children: (
                       <Row wrap>
                         <Col span={4}>
-                          {!technician ? (
-                            <>
-                              <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
-                                {line.bill.invoice_number}
-                              </Link>
-                            </>
-                          ) : (
-                            `${line.bill.invoice_number}`
-                          )}
+                          <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
+                            {line.bill.invoice_number}
+                          </Link>
                         </Col>
                         <Col span={4}>
                           <span>

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

@@ -3,21 +3,13 @@ import { Button, Form, notification, Popover, Tooltip } from "antd";
 import axios from "axios";
 import { t } from "i18next";
 import React, { useState } from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { UPDATE_LINE_PPC } from "../../graphql/jobs-lines.queries";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
 
-const mapStateToProps = createStructuredSelector({
-  technician: selectTechnician
-});
-const mapDispatchToProps = (dispatch) => ({});
-
-export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
+export default function JobLinesPartPriceChange({ job, line, refetch }) {
   const [loading, setLoading] = useState(false);
   const [updatePartPrice] = useMutation(UPDATE_LINE_PPC);
 
@@ -60,7 +52,7 @@ export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
     }
   };
 
-  const popcontent = !technician && InstanceRenderManager({
+  const popcontent = InstanceRenderManager({
     imex: null,
     rome: (
       <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
@@ -103,4 +95,3 @@ export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
     </JobLineConvertToLabor>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(JobLinesPartPriceChange);

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

@@ -31,20 +31,19 @@ import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-re
 // import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import _ from "lodash";
-import { FaTasks } from "react-icons/fa";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import JobCreateIOU from "../job-create-iou/job-create-iou.component";
 import JobLineBulkAssignComponent from "../job-line-bulk-assign/job-line-bulk-assign.component";
 import JobLineDispatchButton from "../job-line-dispatch-button/job-line-dispatch-button.component";
 import JoblineTeamAssignment from "../job-line-team-assignment/job-line-team-assignmnent.component";
 import JobSendPartPriceChangeComponent from "../job-send-parts-price-change/job-send-parts-price-change.component";
-import PartsOrderDrawer from "../parts-order-list-table/parts-order-list-table-drawer.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 { FaTasks } from "react-icons/fa";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -55,7 +54,6 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setJobLineEditContext: (context) => dispatch(setModalContext({ context: context, modal: "jobLineEdit" })),
   setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  setPartsReceiveContext: (context) => dispatch(setModalContext({ context: context, modal: "partsReceive" })),
   setBillEnterContext: (context) => dispatch(setModalContext({ context: context, modal: "billEnter" })),
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
@@ -65,7 +63,6 @@ export function JobLinesComponent({
   jobRO,
   technician,
   setPartsOrderContext,
-  setPartsReceiveContext,
   loading,
   refetch,
   jobLines,
@@ -74,11 +71,7 @@ export function JobLinesComponent({
   setJobLineEditContext,
   form,
   setBillEnterContext,
-  setTaskUpsertContext,
-  billsQuery,
-  handleBillOnRowClick,
-  handlePartsOrderOnRowClick,
-  handlePartsDispatchOnRowClick
+  setTaskUpsertContext
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
   const {
@@ -205,6 +198,7 @@ export function JobLinesComponent({
       onFilter: (value, record) => value.includes(record.part_type),
       render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
     },
+
     {
       title: t("joblines.fields.act_price"),
       dataIndex: "act_price",
@@ -219,6 +213,7 @@ export function JobLinesComponent({
       dataIndex: "part_qty",
       key: "part_qty"
     },
+
     // {
     //   title: t('joblines.fields.tax_part'),
     //   dataIndex: 'tax_part',
@@ -327,7 +322,7 @@ export function JobLinesComponent({
       key: "actions",
       render: (text, record) => (
         <Space>
-          {(record.manual_line || jobIsPrivate) && !technician && (
+          {(record.manual_line || jobIsPrivate) && (
             <>
               <Button
                 disabled={jobRO}
@@ -342,6 +337,7 @@ export function JobLinesComponent({
               </Button>
             </>
           )}
+
           <Button
             title={t("tasks.buttons.create")}
             onClick={() => {
@@ -355,7 +351,7 @@ export function JobLinesComponent({
           >
             <FaTasks />
           </Button>
-          {(record.manual_line || jobIsPrivate) && !technician && (
+          {(record.manual_line || jobIsPrivate) && (
             <>
               <Button
                 disabled={jobRO}
@@ -441,15 +437,6 @@ export function JobLinesComponent({
   return (
     <div>
       <PartsOrderModalContainer />
-      {!technician && (
-        <PartsOrderDrawer
-          job={job}
-          billsQuery={billsQuery}
-          handleOnRowClick={handlePartsOrderOnRowClick}
-          setPartsReceiveContext={setPartsReceiveContext}
-          setTaskUpsertContext={setTaskUpsertContext}
-        />
-      )}
       <PageHeader
         title={t("jobs.labels.estimatelines")}
         extra={
@@ -566,7 +553,7 @@ export function JobLinesComponent({
             >
               {t("joblines.actions.new")}
             </Button>
-            {InstanceRenderManager({ rome: <JobSendPartPriceChangeComponent job={job} disabled={technician} /> })}
+            {InstanceRenderManager({ rome: <JobSendPartPriceChangeComponent job={job} /> })}
             <JobCreateIOU job={job} selectedJobLines={selectedLines} />
             <Input.Search
               placeholder={t("general.labels.search")}

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

@@ -1,17 +1,7 @@
 import React, { useMemo, useState } from "react";
 import JobLinesComponent from "./job-lines.component";
 
-function JobLinesContainer({
-  job,
-  joblines,
-  billsQuery,
-  handleBillOnRowClick,
-  handlePartsOrderOnRowClick,
-  handlePartsDispatchOnRowClick,
-  refetch,
-  form,
-  ...rest
-}) {
+function JobLinesContainer({ job, joblines, refetch, form, ...rest }) {
   const [searchText, setSearchText] = useState("");
 
   const jobLines = useMemo(() => {
@@ -32,19 +22,7 @@ function JobLinesContainer({
   }, [joblines, searchText]);
 
   return (
-    <div>
-      <JobLinesComponent
-        refetch={refetch}
-        jobLines={jobLines}
-        billsQuery={billsQuery}
-        handleBillOnRowClick={handleBillOnRowClick}
-        handlePartsOrderOnRowClick={handlePartsOrderOnRowClick}
-        handlePartsDispatchOnRowClick={handlePartsDispatchOnRowClick}
-        setSearchText={setSearchText}
-        job={job}
-        form={form}
-      />
-    </div>
+    <JobLinesComponent refetch={refetch} jobLines={jobLines} setSearchText={setSearchText} job={job} form={form} />
   );
 }
 

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -11,18 +11,17 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 
 const mapStateToProps = createStructuredSelector({
-  technician: selectTechnician
+  //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobLineConvertToLabor);
 
-export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail, technician, ...otherBtnProps }) {
+export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail, ...otherBtnProps }) {
   const { t } = useTranslation();
 
   const [loading, setLoading] = useState(false);
@@ -166,7 +165,7 @@ export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail
   return (
     <>
       {children}
-      {jobline.act_price !== 0 && !technician && (
+      {jobline.act_price !== 0 && (
         <Popover disabled={jobline.convertedtolbr} content={overlay} open={visibility} placement="bottom">
           <Tooltip title={t("joblines.actions.converttolabor")}>
             <Button

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -10,8 +10,8 @@ import {
   QUERY_SCOREBOARD_ENTRY,
   UPDATE_SCOREBOARD_ENTRY
 } from "../../graphql/scoreboard.queries";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps }) {
   const { t } = useTranslation();
@@ -86,7 +86,7 @@ export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps })
                 }
               ]}
             >
-              <DateTimePicker isDateOnly />
+              <FormDatePicker />
             </Form.Item>
             <Form.Item
               label={t("scoreboard.fields.bodyhrs")}

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

@@ -3,7 +3,7 @@ import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-export default function JobSendPartPriceChangeComponent({ job, disabled }) {
+export default function JobSendPartPriceChangeComponent({ job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const handleClick = async () => {
@@ -24,7 +24,7 @@ export default function JobSendPartPriceChangeComponent({ job, disabled }) {
   };
 
   return (
-    <Button onClick={handleClick} loading={loading} disabled={disabled}>
+    <Button onClick={handleClick} loading={loading}>
       {t("jobs.actions.sendpartspricechange")}
     </Button>
   );

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

@@ -3,8 +3,8 @@ import Dinero from "dinero.js";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { alphaSort } from "../../utils/sorters";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 export default function JobTotalsTableLabor({ job }) {
   const { t } = useTranslation();
@@ -56,49 +56,16 @@ export default function JobTotalsTableLabor({ job }) {
       sortOrder: state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order,
       render: (text, record) => record.hours.toFixed(1)
     },
-    ...InstanceRenderManager({
-      imex: [
-        {
-          title: t("joblines.fields.total"),
-          dataIndex: "total",
-          key: "total",
-          align: "right",
-          sorter: (a, b) => a.total.amount - b.total.amount,
-          sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
-          render: (text, record) => Dinero(record.total).toFormat()
-        }
-      ],
-      rome: [
-        {
-          title: t("joblines.fields.amount"),
-          dataIndex: "base",
-          key: "base",
-          align: "right",
-          sorter: (a, b) => a.base.amount - b.base.amount,
-          sortOrder: state.sortedInfo.columnKey === "base" && state.sortedInfo.order,
-          render: (text, record) => Dinero(record.base).toFormat()
-        },
-        {
-          title: t("joblines.fields.adjustment"),
-          dataIndex: "adjustment",
-          key: "adjustment",
-          align: "right",
-          sorter: (a, b) => a.adjustment.amount - b.adjustment.amount,
-          sortOrder: state.sortedInfo.columnKey === "adjustment" && state.sortedInfo.order,
-          render: (text, record) => Dinero(record.adjustment).toFormat()
-        },
-        {
-          title: t("joblines.fields.total"),
-          dataIndex: "total",
-          key: "total",
-          align: "right",
-          sorter: (a, b) => a.total.amount - b.total.amount,
-          sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
-          render: (text, record) => Dinero(record.total).toFormat()
-        }
-      ],
-      promanager: "USE_ROME"
-    })
+    {
+      title: t("joblines.fields.total"),
+      dataIndex: "total",
+      key: "total",
+      align: "right",
+      sorter: (a, b) => a.total.amount - b.total.amount,
+      sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+
+      render: (text, record) => Dinero(record.total).toFormat()
+    }
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -124,16 +91,6 @@ export default function JobTotalsTableLabor({ job }) {
             <Table.Summary.Cell>
               {(job.job_totals.rates.mapa.hours + job.job_totals.rates.mash.hours).toFixed(1)}
             </Table.Summary.Cell>
-            {InstanceRenderManager({
-              imex: null,
-              rome: (
-                <>
-                  <Table.Summary.Cell />
-                  <Table.Summary.Cell />
-                </>
-              ),
-              promanager: "USE_ROME"
-            })}
             <Table.Summary.Cell align="right">
               <strong>{Dinero(job.job_totals.rates.rates_subtotal).toFormat()}</strong>
             </Table.Summary.Cell>
@@ -165,29 +122,7 @@ export default function JobTotalsTableLabor({ job }) {
               <CurrencyFormatter>{job.job_totals.rates.mapa.rate}</CurrencyFormatter>
             </Table.Summary.Cell>
             <Table.Summary.Cell>{job.job_totals.rates.mapa.hours.toFixed(1)}</Table.Summary.Cell>
-            {InstanceRenderManager({
-              imex: (
-                <>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mapa.total).toFormat()}
-                  </Table.Summary.Cell>
-                </>
-              ),
-              rome: (
-                <>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mapa.base).toFormat()}
-                  </Table.Summary.Cell>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mapa.adjustment).toFormat()}
-                  </Table.Summary.Cell>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mapa.total).toFormat()}
-                  </Table.Summary.Cell>
-                </>
-              ),
-              promanager: "USE_ROME"
-            })}
+            <Table.Summary.Cell align="right">{Dinero(job.job_totals.rates.mapa.total).toFormat()}</Table.Summary.Cell>
           </Table.Summary.Row>
           <Table.Summary.Row>
             <Table.Summary.Cell>
@@ -216,29 +151,7 @@ export default function JobTotalsTableLabor({ job }) {
               <CurrencyFormatter>{job.job_totals.rates.mash.rate}</CurrencyFormatter>
             </Table.Summary.Cell>
             <Table.Summary.Cell>{job.job_totals.rates.mash.hours.toFixed(1)}</Table.Summary.Cell>
-            {InstanceRenderManager({
-              imex: (
-                <>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mash.total).toFormat()}
-                  </Table.Summary.Cell>
-                </>
-              ),
-              rome: (
-                <>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mash.base).toFormat()}
-                  </Table.Summary.Cell>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mash.adjustment).toFormat()}
-                  </Table.Summary.Cell>
-                  <Table.Summary.Cell align="right">
-                    {Dinero(job.job_totals.rates.mash.total).toFormat()}
-                  </Table.Summary.Cell>
-                </>
-              ),
-              promanager: "USE_ROME"
-            })}
+            <Table.Summary.Cell align="right">{Dinero(job.job_totals.rates.mash.total).toFormat()}</Table.Summary.Cell>
           </Table.Summary.Row>
           <Table.Summary.Row>
             <Table.Summary.Cell>
@@ -246,16 +159,6 @@ export default function JobTotalsTableLabor({ job }) {
             </Table.Summary.Cell>
             <Table.Summary.Cell />
             <Table.Summary.Cell />
-            {InstanceRenderManager({
-              imex: null,
-              rome: (
-                <>
-                  <Table.Summary.Cell />
-                  <Table.Summary.Cell />
-                </>
-              ),
-              promanager: "USE_ROME"
-            })}
             <Table.Summary.Cell align="right">
               <strong>{Dinero(job.job_totals.rates.subtotal).toFormat()}</strong>
             </Table.Summary.Cell>

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

@@ -141,14 +141,10 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
         key: t("jobs.fields.ded_amt"),
         total: job.job_totals.totals.custPayable.deductible
       },
-      ...(InstanceRenderManager({
-        imex: [{
-          key: t("jobs.fields.federal_tax_payable"),
-          total: job.job_totals.totals.custPayable.federal_tax
-        }],
-        rome: [],
-        promanager: "USE_ROME"
-      })),
+      // {
+      //   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

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -5,6 +5,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -19,14 +20,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) =>
-    dispatch(
-      insertAuditTrail({
-        jobid,
-        operation,
-        type
-      })
-    )
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminDatesChange);
@@ -93,7 +87,7 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
         <FormFieldsChanged form={form} />
         <LayoutFormRow header={t("jobs.forms.estdates")}>
           <Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
-            <DateTimePicker format="MM/DD/YYYY" isDateOnly />
+            <FormDatePicker format="MM/DD/YYYY" />
           </Form.Item>
           <Form.Item label={t("jobs.fields.date_towin")} name="date_towin">
             <DateTimePicker />

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -3,7 +3,6 @@ import { Button, Space, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_DELIVERY_CHECKLIST, DELETE_INTAKE_CHECKLIST } from "../../graphql/jobs.queries";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 export default function JobAdminDeleteIntake({ job }) {
   const { t } = useTranslation();
@@ -48,22 +47,16 @@ export default function JobAdminDeleteIntake({ job }) {
     setLoading(false);
   };
 
-  const InstanceRender = InstanceRenderManager({
-    imex: true,
-    rome: "USE_IMEX",
-    promanager: false
-  });
-
-  return InstanceRender ? (
+  return (
     <>
       <Space wrap>
         <Button loading={loading} onClick={handleDelete} disabled={!job.intakechecklist}>
           {t("jobs.labels.deleteintake")}
         </Button>
-        <Button loading={loading} onClick={handleDeleteDelivery} disabled={!job.deliverchecklist}>
+        <Button loading={loading} onClick={handleDeleteDelivery} disabled={!job.deliverychecklist}>
           {t("jobs.labels.deletedelivery")}
         </Button>
       </Space>
     </>
-  ) : null;
+  );
 }

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

@@ -3,6 +3,7 @@ import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Col, Row, notification } from "antd";
 import Axios from "axios";
 import _ from "lodash";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -23,8 +24,6 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import confirmDialog from "../../utils/asyncConfirm";
 import CriticalPartsScan from "../../utils/criticalPartsScan";
-import dayjs from "../../utils/day";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import JobsAvailableScan from "../jobs-available-scan/jobs-available-scan.component";
 import JobsFindModalContainer from "../jobs-find-modal/jobs-find-modal.container";
@@ -33,6 +32,7 @@ import OwnerFindModalContainer from "../owner-find-modal/owner-find-modal.contai
 import { GetSupplementDelta } from "./jobs-available-supplement.estlines.util";
 import HeaderFields from "./jobs-available-supplement.headerfields";
 import JobsAvailableTableComponent from "./jobs-available-table.component";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -580,13 +580,12 @@ function ResolveCCCLineIssues(estData, bodyshop) {
     InstanceRenderManager({
       executeFunction: true,
       args: [],
-      rome: () => {
+      promanager: () => {
         if (line.mod_lbr_ty === "LAET" || line.mod_lbr_ty === "LAUT") {
           //  line.notes += ` | ET/UT Update (prev = ${line.mod_lbr_ty})`;
           line.mod_lbr_ty = "LAR";
         }
-      },
-      promanager: "USE_ROME"
+      }
     });
   });
 

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

@@ -1,9 +1,18 @@
-import { Collapse, Form, Input, InputNumber, Select, Space, Switch } from "antd";
+import {
+  Collapse,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Switch,
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
@@ -20,7 +29,6 @@ import JobsDetailRatesTaxes from "../jobs-detail-rates/jobs-detail-rates.taxes.c
 import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -53,7 +61,10 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
               <Input />
             </Form.Item>
-            <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
+            <Form.Item
+              label={t("jobs.fields.regie_number")}
+              name="regie_number"
+            >
               <Input />
             </Form.Item>
             <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
@@ -105,7 +116,7 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               <FormItemEmail email={getFieldValue("ins_ea")} />
             </Form.Item>
             <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
-              <DateTimePicker isDateOnly />
+              <FormDatePicker />
             </Form.Item>
             <Form.Item label={t("jobs.fields.kmin")} name="kmin">
               <Input />

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

@@ -2,9 +2,9 @@ import { Form, Input } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import JobsCreateVehicleInfoPredefined from "./jobs-create-vehicle-info.predefined.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function JobsCreateVehicleInfoNewComponent({ form }) {
   const [state] = useContext(JobCreateContext);
@@ -113,7 +113,7 @@ export default function JobsCreateVehicleInfoNewComponent({ form }) {
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item label={t("vehicles.fields.v_prod_dt")} name={["vehicle", "data", "v_prod_dt"]}>
-          <DateTimePicker isDateOnly disabled={!state.vehicle.new} />
+          <FormDatePicker disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>

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

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
 
@@ -29,7 +30,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
     <div>
       <FormRow header={t("jobs.forms.estdates")}>
         <Form.Item label={t("jobs.fields.date_estimated")} name="date_estimated">
-          <DateTimePicker disabled={jobRO} isDateOnly />
+          <FormDatePicker disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.date_open")} name="date_open">
           <DateTimePicker disabled={jobRO} />
@@ -44,7 +45,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
 
       <FormRow header={t("jobs.forms.scheddates")}>
         <Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
-          <DateTimePicker disabled={jobRO} isDateOnly />
+          <FormDatePicker disabled={jobRO} />
         </Form.Item>
         <Tooltip title={t("jobs.labels.scheduledinchange")}>
           <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
@@ -84,6 +85,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
                 rules={[
                   {
                     required: jobInPostProduction
+                    //message: t("general.validation.required"),
                   }
                 ]}
               >

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

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
@@ -12,7 +13,6 @@ import Car from "../job-damage-visual/job-damage-visual.component";
 import JobsDetailChangeEstimator from "../jobs-detail-change-estimator/jobs-detail-change-estimator.component";
 import JobsDetailChangeFileHandler from "../jobs-detail-change-filehandler/jobs-detail-change-filehandler.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -152,7 +152,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
               <Input disabled={jobRO} />
             </Form.Item>
             <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
-              <DateTimePicker isDateOnly disabled={jobRO} />
+              <FormDatePicker disabled={jobRO} />
             </Form.Item>
             <Form.Item label={t("jobs.fields.loss_of_use")} name="loss_of_use">
               <Input disabled={jobRO} />
@@ -189,10 +189,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         </Col>
         <Col {...lossColDamage}>
           {job.area_of_damage ? (
-            <Car
-              dmg1={job.area_of_damage.impact1 && job.area_of_damage.impact1.padStart(2, "0")}
-              dmg2={job.area_of_damage.impact2 && job.area_of_damage.impact2.padStart(2, "0")}
-            />
+            <Car dmg1={job.area_of_damage.impact1} dmg2={job.area_of_damage.impact2} />
           ) : (
             t("jobs.errors.nodamage")
           )}

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

@@ -1,13 +1,55 @@
+import { useQuery } from "@apollo/client";
+import queryString from "query-string";
 import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { QUERY_BILLS_BY_JOBID } from "../../graphql/bills.queries";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
 
-export default function JobsDetailPliContainer({
-  job,
-  billsQuery,
-  handleBillOnRowClick,
-  handlePartsOrderOnRowClick,
-  handlePartsDispatchOnRowClick
-}) {
+export default function JobsDetailPliContainer({ job }) {
+  const billsQuery = useQuery(QUERY_BILLS_BY_JOBID, {
+    variables: { jobid: job.id },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
+  });
+
+  const search = queryString.parse(useLocation().search);
+  const history = useNavigate();
+
+  const handleBillOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.billid = record.id;
+        history({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.billid;
+      history({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handlePartsOrderOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.partsorderid = record.id;
+        history({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.partsorderid;
+      history({ search: queryString.stringify(search) });
+    }
+  };
+
+  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}

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

@@ -1,4 +1,4 @@
-import { Collapse, Form, InputNumber, Switch } from "antd";
+import { Collapse, Form, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -17,9 +17,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
     <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_adjp")} name={["cieca_pfl", "LAB", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAB", "lbr_tax_in"]}
@@ -27,24 +24,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAB", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAB", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAB", "lbr_tx_in1"]}
@@ -82,9 +61,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAD")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAD", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAD", "lbr_tax_in"]}
@@ -92,24 +68,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAD", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAD", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAD", "lbr_tx_in1"]}
@@ -147,9 +105,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAE")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAE", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAE", "lbr_tax_in"]}
@@ -157,24 +112,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAE", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAE", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAE", "lbr_tx_in1"]}
@@ -212,9 +149,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAF")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAF", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAF", "lbr_tax_in"]}
@@ -222,24 +156,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAF", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAF", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAF", "lbr_tx_in1"]}
@@ -277,9 +193,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAG")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAG", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAG", "lbr_tax_in"]}
@@ -287,24 +200,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAG", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAG", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAG", "lbr_tx_in1"]}
@@ -342,9 +237,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAM")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAM", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAM", "lbr_tax_in"]}
@@ -352,24 +244,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAM", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAM", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAM", "lbr_tx_in1"]}
@@ -407,9 +281,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAR")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAR", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAR", "lbr_tax_in"]}
@@ -417,24 +288,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAR", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAR", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAR", "lbr_tx_in1"]}
@@ -472,9 +325,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAS")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAS", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAS", "lbr_tax_in"]}
@@ -482,24 +332,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAS", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAS", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAS", "lbr_tx_in1"]}
@@ -537,9 +369,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           </Form.Item>
         </LayoutFormRow>
         <LayoutFormRow header={t("joblines.fields.lbr_types.LAU")}>
-          <Form.Item label={t("jobs.fields.cieca_pfl.lbr_adjp")} name={["cieca_pfl", "LAU", "lbr_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
             name={["cieca_pfl", "LAU", "lbr_tax_in"]}
@@ -547,24 +376,6 @@ export function JobsDetailRatesLabor({ jobRO, expanded, required = true, form })
           >
             <Switch disabled={jobRO} />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.cieca_pfl.lbr_taxp")}
-                  name={["cieca_pfl", "LAU", "lbr_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["cieca_pfl", "LAU", "lbr_tax_in"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.cieca_pfl.lbr_tx_in1")}
             name={["cieca_pfl", "LAU", "lbr_tx_in1"]}

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

@@ -23,9 +23,7 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, for
           <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.mat_adjp")} name={["materials", "MAPA", "mat_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
+
           <Form.Item
             label={t("jobs.fields.materials.tax_ind")}
             name={["materials", "MAPA", "tax_ind"]}
@@ -33,24 +31,6 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, for
           >
             <Switch />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.materials.mat_taxp")}
-                  name={["materials", "MAPA", "mat_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["materials", "MAPA", "tax_ind"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.materials.mat_tx_in1")}
             name={["materials", "MAPA", "mat_tx_in1"]}
@@ -94,9 +74,7 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, for
           <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.mat_adjp")} name={["materials", "MAPA", "mat_adjp"]}>
-            <InputNumber min={-100} max={100} precision={4} disabled={jobRO} />
-          </Form.Item>
+
           <Form.Item
             label={t("jobs.fields.materials.tax_ind")}
             name={["materials", "MASH", "tax_ind"]}
@@ -104,24 +82,6 @@ export function JobsDetailRatesMaterials({ jobRO, expanded, required = true, for
           >
             <Switch />
           </Form.Item>
-          <Form.Item shouldUpdate>
-            {() => {
-              return (
-                <Form.Item
-                  label={t("jobs.fields.materials.mat_taxp")}
-                  name={["materials", "MASH", "mat_taxp"]}
-                  rules={[
-                    {
-                      required: form.getFieldValue(["materials", "MASH", "tax_ind"])
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-                </Form.Item>
-              );
-            }}
-          </Form.Item>
           <Form.Item
             label={t("jobs.fields.materials.mat_tx_in1")}
             name={["materials", "MASH", "mat_tx_in1"]}

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

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -989,24 +988,18 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
           <Form.Item label={t("jobs.fields.tax_str_rt")} name="tax_str_rt">
             <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
-          {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
-            <>
-              <Form.Item label={t("jobs.fields.tax_paint_mat_rt")} name="tax_paint_mat_rt">
-                <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={100} precision={4} disabled={jobRO} />
-              </Form.Item>{" "}
-            </>
-          ) : null}
+          <Form.Item label={t("jobs.fields.tax_paint_mat_rt")} name="tax_paint_mat_rt">
+            <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={100} precision={4} disabled={jobRO} />
+          </Form.Item>
           <Form.Item label={t("jobs.fields.tax_sub_rt")} name="tax_sub_rt">
             <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
-          {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
-            <Form.Item label={t("jobs.fields.tax_lbr_rt")} name="tax_lbr_rt">
-              <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
-            </Form.Item>
-          ) : null}
+          <Form.Item label={t("jobs.fields.tax_lbr_rt")} name="tax_lbr_rt">
+            <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={100} precision={4} disabled={jobRO} />
           </Form.Item>

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

@@ -11,7 +11,6 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { pageLimit } from "../../utils/config";
-import { alphaSort, statusSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -38,10 +37,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      sorter: search?.search
-        ? (a, b) =>
-            parseInt((a.ro_number || "0").replace(/\D/g, "")) - parseInt((b.ro_number || "0").replace(/\D/g, ""))
-        : true,
+      sorter: true, //(a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder: sortcolumn === "ro_number" && sortorder,
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.id}>{record.ro_number || t("general.labels.na")}</Link>
@@ -53,6 +49,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       key: "ownr_ln",
       ellipsis: true,
       //sorter: true, // (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+
       //sortOrder: sortcolumn === "ownr_ln" && sortorder,
       render: (text, record) => {
         return record.ownerid ? (
@@ -70,6 +67,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
+
       ellipsis: true,
       render: (text, record) => <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
     },
@@ -77,6 +75,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
+
       ellipsis: true,
       render: (text, record) => <StartChatButton phone={record.ownr_ph2} jobid={record.id} />
     },
@@ -86,7 +85,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       key: "status",
 
       ellipsis: true,
-      sorter: search?.search ? (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.active_statuses) : true,
+      sorter: true, // (a, b) => alphaSort(a.status, b.status),
       sortOrder: sortcolumn === "status" && sortorder,
       render: (text, record) => {
         return record.status || t("general.labels.na");
@@ -101,6 +100,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
       key: "vehicle",
+
       ellipsis: true,
       render: (text, record) => {
         return record.vehicleid ? (
@@ -117,7 +117,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       dataIndex: "plate_no",
       key: "plate_no",
       ellipsis: true,
-      sorter: search?.search ? (a, b) => alphaSort(a.plate_no, b.plate_no) : true,
+      sorter: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
       sortOrder: sortcolumn === "plate_no" && sortorder,
       render: (text, record) => {
         return record.plate_no ? record.plate_no : "";
@@ -128,7 +128,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       dataIndex: "clm_no",
       key: "clm_no",
       ellipsis: true,
-      sorter: search?.search ? (a, b) => alphaSort(a.clm_no, b.clm_no) : true,
+      sorter: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder: sortcolumn === "clm_no" && sortorder,
       render: (text, record) => `${record.clm_no || ""}${record.po_number ? ` (PO: ${record.po_number})` : ""}`
     },
@@ -142,7 +142,8 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",
       key: "clm_total",
-      sorter: search?.search ? (a, b) => a.clm_total - b.clm_total : true,
+
+      sorter: true, //(a, b) => a.clm_total - b.clm_total,
       sortOrder: sortcolumn === "clm_total" && sortorder,
       render: (text, record) => {
         return record.clm_total ? (
@@ -156,6 +157,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.owner_owing"),
       dataIndex: "owner_owing",
       key: "owner_owing",
+
       render: (text, record) => <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
     },
     {

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

@@ -16,15 +16,17 @@ import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { setJoyRideSteps } from "../../redux/application/application.actions";
 import { OwnerNameDisplayFunction } from "./../owner-name-display/owner-name-display.component";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = (dispatch) => ({
+  setJoyRideSteps: (steps) => dispatch(setJoyRideSteps(steps))
+});
 
-export function JobsList({ bodyshop }) {
+export function JobsList({ bodyshop, setJoyRideSteps }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())

client/src/components/jobs-mark-selected-exported/jobs-mark-selected-exported.jsx

@@ -1,105 +0,0 @@
-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 { 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";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(JobMarkSelectedExported);
-
-export function JobMarkSelectedExported({
-  bodyshop,
-  currentUser,
-  jobIds,
-  disabled,
-  loadingCallback,
-  completedCallback,
-  refetch,
-  insertAuditTrail
-}) {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
-
-  const [updateJob] = useMutation(UPDATE_JOBS);
-  const handleUpdate = async () => {
-    setLoading(true);
-    loadingCallback(true);
-    const result = await updateJob({
-      variables: {
-        jobIds: jobIds,
-        fields: {
-          status: bodyshop.md_ro_statuses.default_exported || "Exported*",
-          date_exported: new Date()
-        }
-      },
-      update(cache) {}
-    });
-
-    await insertExportLog({
-      variables: {
-        logs: jobIds.map((id) => {
-          return {
-            bodyshopid: bodyshop.id,
-            jobid: id,
-            successful: true,
-            message: JSON.stringify([t("general.labels.markedexported")]),
-            useremail: currentUser.email
-          };
-        })
-      }
-    });
-
-    if (!result.errors) {
-      notification["success"]({ message: t("jobs.successes.save") });
-      result.data.update_jobs.returning.forEach((job) => {
-        console.log("results job", job.id, "audit: ", AuditTrailMapping.admin_jobmarkexported());
-        insertAuditTrail({
-          jobid: job.id,
-          operation: AuditTrailMapping.admin_jobmarkexported(),
-          type: "admin_jobmarkexported"
-        });
-      });
-    } else {
-      notification["error"]({
-        message: t("jobs.errors.saving", {
-          error: JSON.stringify(result.errors)
-        })
-      });
-    }
-    loadingCallback(false);
-    completedCallback && completedCallback([]);
-    setLoading(false);
-    refetch && refetch();
-    setOpen(false);
-  };
-
-  return (
-    <Popconfirm
-      open={open}
-      title={t("general.labels.areyousure")}
-      onCancel={() => setOpen(false)}
-      onConfirm={handleUpdate}
-      disabled={disabled}
-    >
-      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)} type="primary" danger>
-        {t("jobs.actions.markasexported")}
-      </Button>
-    </Popconfirm>
-  );
-}

client/src/components/partner-ping/partner-ping.component.jsx

@@ -23,7 +23,7 @@ export function PartnerPingComponent({ bodyshop }) {
     // Execute the created function directly
     checkPartnerStatus(bodyshop);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bodyshop?.id]);
+  }, [bodyshop]);
 
   return <></>;
 }

client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx

@@ -8,8 +8,8 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { MUTATION_UPDATE_BO_ETA } from "../../graphql/parts-orders.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import { CalendarFilled } from "@ant-design/icons";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -62,7 +62,7 @@ export function PartsOrderBackorderEta({
     <div>
       <Form form={form} onFinish={handleFinish}>
         <Form.Item name="eta">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Button type="primary" onClick={() => form.submit()}>
           {t("general.actions.save")}

client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx

@@ -7,7 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -71,7 +71,7 @@ export function PartsOrderLineBackorderButton({ partsOrderStatus, partsLineId, j
     <div>
       <Form form={form} onFinish={handleFinish}>
         <Form.Item name="eta">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Button type="primary" onClick={() => form.submit()}>
           {t("parts_orders.actions.backordered")}

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -1,387 +0,0 @@
-import { DeleteFilled } from "@ant-design/icons";
-import { PageHeader } from "@ant-design/pro-layout";
-import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Drawer, Grid, Popconfirm, Space, Table } from "antd";
-import queryString from "query-string";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { FaTasks } from "react-icons/fa";
-import { connect } from "react-redux";
-import { useLocation } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
-import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
-import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateFormatter } from "../../utils/DateFormatter";
-import { TemplateList } from "../../utils/TemplateConstants";
-import { alphaSort } from "../../utils/sorters";
-import DataLabel from "../data-label/data-label.component";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
-import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
-import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
-import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
-import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
-import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
-import PrintWrapper from "../print-wrapper/print-wrapper.component";
-
-const mapStateToProps = createStructuredSelector({
-  jobRO: selectJobReadOnly,
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setBillEnterContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "billEnter"
-      })
-    ),
-  setPartsReceiveContext: (context) =>
-    dispatch(
-      setModalContext({
-        context: context,
-        modal: "partsReceive"
-      })
-    ),
-  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
-});
-
-export function PartsOrderListTableDrawerComponent({
-  setBillEnterContext,
-  bodyshop,
-  jobRO,
-  job,
-  billsQuery,
-  handleOnRowClick,
-  setPartsReceiveContext,
-  setTaskUpsertContext
-}) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
-  const bpoints = {
-    xs: "100%",
-    sm: "100%",
-    md: "100%",
-    lg: "75%",
-    xl: "75%",
-    xxl: "65%"
-  };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
-  const responsibilityCenters = bodyshop.md_responsibility_centers;
-  const Templates = TemplateList("partsorder", { job });
-
-  const { t } = useTranslation();
-  const [state, setState] = useState({
-    sortedInfo: {}
-  });
-
-  const [billData, setBillData] = useState(null);
-  const search = queryString.parse(useLocation().search);
-  const selectedpartsorder = search.partsorderid;
-
-  const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
-  const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
-  const { refetch } = billsQuery;
-  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
-  const selectedPartsOrderRecord = parts_orders.find((r) => r.id === selectedpartsorder);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (selectedPartsOrderRecord?.returnfrombill) {
-        try {
-          const { data } = await billQuery({
-            variables: { billid: selectedPartsOrderRecord.returnfrombill }
-          });
-          setBillData(data);
-        } catch (error) {
-          console.error("Error fetching bill data:", error);
-        }
-      } else setBillData(null);
-    };
-    fetchData();
-  }, [selectedPartsOrderRecord, billQuery]);
-
-  const recordActions = (record) => (
-    <Space direction="horizontal" wrap>
-      <Button
-        disabled={jobRO || record.return || record.vendor.id === bodyshop.inhousevendorid}
-        onClick={() => {
-          logImEXEvent("parts_order_receive_bill");
-          setPartsReceiveContext({
-            actions: { refetch: refetch },
-            context: {
-              jobId: job.id,
-              job: job,
-              partsorderlines: record.parts_order_lines.map((pol) => ({
-                joblineid: pol.job_line_id,
-                id: pol.id,
-                line_desc: pol.line_desc,
-                quantity: pol.quantity,
-                act_price: pol.act_price,
-                oem_partno: pol.oem_partno
-              }))
-            }
-          });
-        }}
-      >
-        {t("parts_orders.actions.receive")}
-      </Button>
-      <Button
-        title={t("tasks.buttons.create")}
-        onClick={() => {
-          setTaskUpsertContext({
-            context: {
-              jobid: job.id,
-              partsorderid: record.id
-            }
-          });
-        }}
-      >
-        <FaTasks />
-      </Button>
-      <Popconfirm
-        title={t("parts_orders.labels.confirmdelete")}
-        disabled={jobRO}
-        onConfirm={async () => {
-          //Delete the parts return.!
-          await deletePartsOrder({
-            variables: { partsOrderId: record.id },
-            update(cache) {
-              cache.modify({
-                fields: {
-                  parts_orders(existingPartsOrders, { readField }) {
-                    return existingPartsOrders.filter((billref) => record.id !== readField("id", billref));
-                  }
-                }
-              });
-            }
-          });
-        }}
-      >
-        <Button disabled={jobRO}>
-          <DeleteFilled />
-        </Button>
-      </Popconfirm>
-      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-        <Button
-          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
-          onClick={() => {
-            logImEXEvent("parts_order_receive_bill");
-            setBillEnterContext({
-              actions: { refetch: refetch },
-              context: {
-                job: job,
-                bill: {
-                  vendorid: record.vendor.id,
-                  is_credit_memo: record.return,
-                  billlines: record.parts_order_lines.map((pol) => ({
-                    joblineid: pol.job_line_id || "noline",
-                    line_desc: pol.line_desc,
-                    quantity: pol.quantity,
-                    actual_price: pol.act_price,
-                    cost_center: pol.jobline?.part_type
-                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                        ? pol.jobline.part_type !== "PAE"
-                          ? pol.jobline.part_type
-                          : null
-                        : responsibilityCenters.defaults &&
-                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                      : null
-                  }))
-                }
-              }
-            });
-          }}
-        >
-          {t("parts_orders.actions.receivebill")}
-        </Button>
-      </FeatureWrapperComponent>
-      <PrintWrapper
-        templateObject={{
-          name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,
-          variables: { id: record.id }
-        }}
-        messageObject={{
-          subject: record.return ? Templates.parts_return_slip.subject : Templates.parts_order.subject,
-          to: record.vendor.email
-        }}
-        id={job.id}
-      />
-    </Space>
-  );
-
-  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-  };
-
-  const rowExpander = (record) => {
-    const columns = [
-      {
-        title: t("parts_orders.fields.line_desc"),
-        dataIndex: "line_desc",
-        key: "line_desc",
-        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
-        sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order
-      },
-      {
-        title: t("parts_orders.fields.quantity"),
-        dataIndex: "quantity",
-        key: "quantity",
-        sorter: (a, b) => a.quantity - b.quantity,
-        sortOrder: state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order
-      },
-      {
-        title: t("parts_orders.fields.act_price"),
-        dataIndex: "act_price",
-        key: "act_price",
-        sorter: (a, b) => a.act_price - b.act_price,
-        sortOrder: state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
-        render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
-      },
-      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
-        ? [
-            {
-              title: t("parts_orders.fields.cost"),
-              dataIndex: "cost",
-              key: "cost",
-              sorter: (a, b) => a.cost - b.cost,
-              sortOrder: state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
-              render: (text, record) => <CurrencyFormatter>{record.cost}</CurrencyFormatter>
-            }
-          ]
-        : []),
-      {
-        title: t("parts_orders.fields.part_type"),
-        dataIndex: "part_type",
-        key: "part_type",
-        render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
-      },
-      {
-        title: t("parts_orders.fields.oem_partno"),
-        dataIndex: "oem_partno",
-        key: "oem_partno",
-        sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
-        sortOrder: state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order
-      },
-      {
-        title: t("parts_orders.fields.line_remarks"),
-        dataIndex: "line_remarks",
-        key: "line_remarks"
-      },
-      {
-        title: t("parts_orders.fields.status"),
-        dataIndex: "status",
-        key: "status"
-      },
-
-      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
-        ? [
-            {
-              title: t("parts_orders.fields.cm_received"),
-              dataIndex: "cm_received",
-              key: "cm_received",
-              render: (text, record) => (
-                <PartsOrderCmReceived
-                  orderLineId={record.id}
-                  checked={record.cm_received}
-                  partsorderid={selectedPartsOrderRecord.id}
-                />
-              )
-            }
-          ]
-        : []),
-      {
-        title: t("parts_orders.fields.backordered_on"),
-        dataIndex: "backordered_on",
-        key: "backordered_on",
-        render: (text, record) => <DateFormatter>{text}</DateFormatter>
-      },
-      {
-        title: t("parts_orders.fields.backordered_eta"),
-        dataIndex: "backordered_eta",
-        key: "backordered_eta",
-        render: (text, record) => (
-          <PartsOrderBackorderEta
-            backordered_eta={record.backordered_eta}
-            disabled={jobRO}
-            partsOrderStatus={record.status}
-            partsLineId={record.id}
-            jobLineId={record.job_line_id}
-          />
-        )
-      },
-
-      {
-        title: t("general.labels.actions"),
-        dataIndex: "actions",
-        key: "actions",
-        render: (text, record) => (
-          <Space wrap>
-            <PartsOrderDeleteLine
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              partsOrderId={selectedpartsorder}
-              jobLineId={record.job_line_id}
-            />
-            <PartsOrderLineBackorderButton
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              jobLineId={record.job_line_id}
-            />
-          </Space>
-        )
-      }
-    ];
-
-    return (
-      <div>
-        <PageHeader
-          title={
-            billData
-              ? `${record.vendor.name} - ${record.order_number} - ${t("bills.labels.returnfrombill")}: ${billData.bills_by_pk.invoice_number}`
-              : `${record.vendor.name} - ${record.order_number}`
-          }
-          extra={recordActions(record)}
-        />
-        <Table
-          scroll={{
-            x: true //y: "50rem"
-          }}
-          columns={columns}
-          rowKey="id"
-          dataSource={record.parts_order_lines}
-          onChange={handleTableChange}
-        />
-        <DataLabel label={t("parts_orders.fields.comments")}>
-          <div style={{ whiteSpace: "pre" }}>{record.comments}</div>
-        </DataLabel>
-      </div>
-    );
-  };
-
-  return (
-    <div>
-      <PartsReceiveModalContainer />
-      <Drawer
-        placement="right"
-        onClose={() => handleOnRowClick(null)}
-        open={selectedpartsorder}
-        closable
-        width={drawerPercentage}
-      >
-        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
-      </Drawer>
-    </div>
-  );
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(PartsOrderListTableDrawerComponent);

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,23 +1,33 @@
 import { DeleteFilled, EyeFilled, SyncOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
-import { Button, Card, Checkbox, Input, Popconfirm, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useLazyQuery, useMutation } from "@apollo/client";
+import { Button, Card, Checkbox, Drawer, Grid, Input, Popconfirm, Space, Table } from "antd";
+import { PageHeader } from "@ant-design/pro-layout";
+
+import queryString from "query-string";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QUERY_BILL_BY_PK } from "../../graphql/bills.queries";
 import { DELETE_PARTS_ORDER } from "../../graphql/parts-orders.queries";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import DataLabel from "../data-label/data-label.component";
+import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
+import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
+import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
+import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
-import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import { FaTasks } from "react-icons/fa";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -52,6 +62,19 @@ export function PartsOrderListTableComponent({
   setPartsReceiveContext,
   setTaskUpsertContext
 }) {
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "75%",
+    xl: "75%",
+    xxl: "65%"
+  };
+  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder", { job });
 
@@ -60,17 +83,42 @@ export function PartsOrderListTableComponent({
     sortedInfo: {}
   });
 
+  const [returnfrombill, setReturnFromBill] = useState();
+  const [billData, setBillData] = useState();
+  const search = queryString.parse(useLocation().search);
+  const selectedpartsorder = search.partsorderid;
   const [searchText, setSearchText] = useState("");
+
+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
   const { refetch } = billsQuery;
 
+  useEffect(() => {
+    if (returnfrombill === null) {
+      setBillData(null);
+    } else {
+      const fetchData = async () => {
+        const result = await billQuery({
+          variables: { billid: returnfrombill }
+        });
+        setBillData(result.data);
+      };
+      fetchData();
+    }
+  }, [returnfrombill, billQuery]);
+
   const recordActions = (record, showView = false) => (
     <Space direction="horizontal" wrap>
       {showView && (
         <Button
           onClick={() => {
+            if (record.returnfrombill) {
+              setReturnFromBill(record.returnfrombill);
+            } else {
+              setReturnFromBill(null);
+            }
             handleOnRowClick(record);
           }}
         >
@@ -250,6 +298,154 @@ export function PartsOrderListTableComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
+  const selectedPartsOrderRecord = parts_orders.find((r) => r.id === selectedpartsorder);
+
+  const rowExpander = (record) => {
+    const columns = [
+      {
+        title: t("parts_orders.fields.line_desc"),
+        dataIndex: "line_desc",
+        key: "line_desc",
+        sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
+        sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order
+      },
+      {
+        title: t("parts_orders.fields.quantity"),
+        dataIndex: "quantity",
+        key: "quantity",
+        sorter: (a, b) => a.quantity - b.quantity,
+        sortOrder: state.sortedInfo.columnKey === "quantity" && state.sortedInfo.order
+      },
+      {
+        title: t("parts_orders.fields.act_price"),
+        dataIndex: "act_price",
+        key: "act_price",
+        sorter: (a, b) => a.act_price - b.act_price,
+        sortOrder: state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
+        render: (text, record) => <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
+      },
+      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
+        ? [
+            {
+              title: t("parts_orders.fields.cost"),
+              dataIndex: "cost",
+              key: "cost",
+              sorter: (a, b) => a.cost - b.cost,
+              sortOrder: state.sortedInfo.columnKey === "cost" && state.sortedInfo.order,
+              render: (text, record) => <CurrencyFormatter>{record.cost}</CurrencyFormatter>
+            }
+          ]
+        : []),
+      {
+        title: t("parts_orders.fields.part_type"),
+        dataIndex: "part_type",
+        key: "part_type",
+        render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
+      },
+      {
+        title: t("parts_orders.fields.oem_partno"),
+        dataIndex: "oem_partno",
+        key: "oem_partno",
+        sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
+        sortOrder: state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order
+      },
+      {
+        title: t("parts_orders.fields.line_remarks"),
+        dataIndex: "line_remarks",
+        key: "line_remarks"
+      },
+      {
+        title: t("parts_orders.fields.status"),
+        dataIndex: "status",
+        key: "status"
+      },
+
+      ...(selectedPartsOrderRecord && selectedPartsOrderRecord.return
+        ? [
+            {
+              title: t("parts_orders.fields.cm_received"),
+              dataIndex: "cm_received",
+              key: "cm_received",
+              render: (text, record) => (
+                <PartsOrderCmReceived
+                  orderLineId={record.id}
+                  checked={record.cm_received}
+                  partsorderid={selectedPartsOrderRecord.id}
+                />
+              )
+            }
+          ]
+        : []),
+      {
+        title: t("parts_orders.fields.backordered_on"),
+        dataIndex: "backordered_on",
+        key: "backordered_on",
+        render: (text, record) => <DateFormatter>{text}</DateFormatter>
+      },
+      {
+        title: t("parts_orders.fields.backordered_eta"),
+        dataIndex: "backordered_eta",
+        key: "backordered_eta",
+        render: (text, record) => (
+          <PartsOrderBackorderEta
+            backordered_eta={record.backordered_eta}
+            disabled={jobRO}
+            partsOrderStatus={record.status}
+            partsLineId={record.id}
+            jobLineId={record.job_line_id}
+          />
+        )
+      },
+
+      {
+        title: t("general.labels.actions"),
+        dataIndex: "actions",
+        key: "actions",
+        render: (text, record) => (
+          <Space wrap>
+            <PartsOrderDeleteLine
+              disabled={jobRO}
+              partsOrderStatus={record.status}
+              partsLineId={record.id}
+              partsOrderId={selectedpartsorder}
+              jobLineId={record.job_line_id}
+            />
+            <PartsOrderLineBackorderButton
+              disabled={jobRO}
+              partsOrderStatus={record.status}
+              partsLineId={record.id}
+              jobLineId={record.job_line_id}
+            />
+          </Space>
+        )
+      }
+    ];
+
+    return (
+      <div>
+        <PageHeader
+          title={
+            billData
+              ? `${record.vendor.name} - ${record.order_number} - ${t("bills.labels.returnfrombill")}: ${billData.bills_by_pk.invoice_number}`
+              : `${record.vendor.name} - ${record.order_number}`
+          }
+          extra={recordActions(record)}
+        />
+        <Table
+          scroll={{
+            x: true //y: "50rem"
+          }}
+          columns={columns}
+          rowKey="id"
+          dataSource={record.parts_order_lines}
+        />
+        <DataLabel label={t("parts_orders.fields.comments")}>
+          <div style={{ whiteSpace: "pre" }}>{record.comments}</div>
+        </DataLabel>
+      </div>
+    );
+  };
+
   const filteredPartsOrders = parts_orders
     ? searchText === ""
       ? parts_orders
@@ -280,13 +476,15 @@ export function PartsOrderListTableComponent({
       }
     >
       <PartsReceiveModalContainer />
-      <PartsOrderDrawer
-        job={job}
-        billsQuery={billsQuery}
-        handleOnRowClick={handleOnRowClick}
-        setPartsReceiveContext={setPartsReceiveContext}
-        setTaskUpsertContext={setTaskUpsertContext}
-      />
+      <Drawer
+        placement="right"
+        onClose={() => handleOnRowClick(null)}
+        open={selectedpartsorder}
+        closable
+        width={drawerPercentage}
+      >
+        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
+      </Drawer>
       <Table
         loading={billsQuery.loading}
         scroll={{

client/src/components/parts-order-modal/parts-order-modal-price-change.component.jsx

@@ -27,10 +27,6 @@ export default function PartsOrderModalPriceChange({ form, field }) {
         key: "25",
         label: t("parts_orders.labels.discount", { percent: "25%" })
       },
-      {
-        key: "40",
-        label: t("parts_orders.labels.discount", { percent: "40%" })
-      },
       {
         key: "custom",
         label: (

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -6,12 +6,12 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDatePicker from "../form-date-picker/form-date-picker.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 VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import PartsOrderModalPriceChange from "./parts-order-modal-price-change.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -74,7 +74,7 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
           ]}
           label={t("parts_orders.fields.deliver_by")}
         >
-          <DateTimePicker isDateOnly onlyFuture />
+          <FormDatePicker onlyFuture />
         </Form.Item>
         {job && job.special_coverage_policy && (
           <Tag color="tomato">

client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx

@@ -90,7 +90,7 @@ export function BillMarkSelectedExported({
       onConfirm={handleUpdate}
       disabled={disabled}
     >
-      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)} type="primary" danger>
+      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)}>
         {t("bills.labels.markexported")}
       </Button>
     </Popconfirm>

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

@@ -5,11 +5,11 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import DatePickerFormItem from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import PaymentFormTotalPayments from "./payment-form.totalpayments.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -77,7 +77,7 @@ export function PaymentFormComponent({ form, bodyshop, disabled }) {
             }
           ]}
         >
-          <DateTimePicker isDateOnly disabled={disabled} />
+          <DatePickerFormItem disabled={disabled} />
         </Form.Item>
       </LayoutFormRow>
 

client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx

@@ -90,7 +90,7 @@ export function PaymentMarkSelectedExported({
       onConfirm={handleUpdate}
       disabled={disabled}
     >
-      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)} type="primary" danger>
+      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)}>
         {t("bills.labels.markexported")}
       </Button>
     </Popconfirm>

client/src/components/production-board-filters/production-board-filters.component.jsx

@@ -1,31 +1,22 @@
-import { Button, Input, Space, Spin } from "antd";
-import React, { useState } from "react";
+import { Input, Space, Spin } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { ExclamationCircleFilled, ExclamationCircleOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
 
 const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-
 export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardFilters);
 
 export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading }) {
   const { t } = useTranslation();
-  const [alertFilter, setAlertFilter] = useState(false);
-
-  const toggleAlertFilter = () => {
-    const newAlertFilter = !alertFilter;
-    setAlertFilter(newAlertFilter);
-    setFilter({ ...filter, alert: newAlertFilter });
-  };
 
   return (
     <Space wrap>
@@ -45,13 +36,6 @@ export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading })
         onChange={(emp) => setFilter({ ...filter, employeeId: emp })}
         allowClear
       />
-      <Button
-        type={alertFilter ? "primary" : "default"}
-        onClick={toggleAlertFilter}
-        icon={alertFilter ? <ExclamationCircleFilled /> : <ExclamationCircleOutlined />}
-      >
-        {t("production.labels.alerts")}
-      </Button>
     </Space>
   );
 }

client/src/components/production-board-kanban-card/production-board-card.styles.scss

@@ -0,0 +1,11 @@
+.imex-kanban-card {
+  padding: 0px !important;
+
+  .ant-card-body {
+    padding: 0.8rem;
+  }
+
+  .ant-card-head {
+    padding: 0rem 0.8rem;
+  }
+}

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -0,0 +1,201 @@
+import {
+  BranchesOutlined,
+  CalendarOutlined,
+  DownloadOutlined,
+  EyeFilled,
+  PauseCircleOutlined
+} from "@ant-design/icons";
+import { Card, Col, Row, Space, Tooltip } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
+import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
+import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
+import "./production-board-card.styles.scss";
+import dayjs from "../../utils/day";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
+
+const cardColor = (ssbuckets, totalHrs) => {
+  const bucket = ssbuckets.filter((bucket) => bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true))[0];
+
+  let color = { r: 255, g: 255, b: 255 };
+
+  if (bucket && bucket.color) {
+    color = bucket.color;
+
+    if (bucket.color.rgb) {
+      color = bucket.color.rgb;
+    }
+  }
+
+  return color;
+};
+
+function getContrastYIQ(bgColor) {
+  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
+
+  return yiq >= 128 ? "black" : "white";
+}
+
+export default function ProductionBoardCard(technician, card, bodyshop, cardSettings) {
+  const { t } = useTranslation();
+
+  let employee_body, employee_prep, employee_refinish, employee_csr;
+  if (card.employee_body) {
+    employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
+  }
+  if (card.employee_prep) {
+    employee_prep = bodyshop.employees.find((e) => e.id === card.employee_prep);
+  }
+  if (card.employee_refinish) {
+    employee_refinish = bodyshop.employees.find((e) => e.id === card.employee_refinish);
+  }
+  if (card.employee_csr) {
+    employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
+  }
+  // if (card.employee_csr) {
+  //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
+  // }
+
+  const pastDueAlert =
+    !!card.scheduled_completion &&
+    ((dayjs().isSameOrAfter(dayjs(card.scheduled_completion), "day") && "production-completion-past") ||
+      (dayjs().add(1, "day").isSame(dayjs(card.scheduled_completion), "day") && "production-completion-soon"));
+
+  const totalHrs = card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
+  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
+
+  return (
+    <Card
+      className="react-kanban-card imex-kanban-card"
+      size="small"
+      style={{
+        backgroundColor:
+          cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
+        color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor)
+      }}
+      title={
+        <Space>
+          <ProductionAlert record={card} key="alert" />
+          {card.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
+          {card.iouparent && (
+            <Tooltip title={t("jobs.labels.iou")}>
+              <BranchesOutlined style={{ color: "orangered" }} />
+            </Tooltip>
+          )}
+          <span style={{ fontWeight: "bolder" }}>
+            <Link to={technician ? `/tech/joblookup?selected=${card.id}` : `/manage/jobs/${card.id}`}>
+              {card.ro_number || t("general.labels.na")}
+            </Link>
+          </span>
+        </Space>
+      }
+      extra={
+        <Link to={{ search: `?selected=${card.id}` }}>
+          <EyeFilled />
+        </Link>
+      }
+    >
+      <Row>
+        {cardSettings && cardSettings.ownr_nm && (
+          <Col span={24}>
+            {cardSettings && cardSettings.compact ? (
+              <div className="ellipses">{`${card.ownr_ln || ""} ${card.ownr_co_nm || ""}`}</div>
+            ) : (
+              <div className="ellipses">
+                <OwnerNameDisplay ownerObject={card} />
+              </div>
+            )}
+          </Col>
+        )}
+        <Col span={24}>
+          <div className="ellipses">{`${card.v_model_yr || ""} ${
+            card.v_make_desc || ""
+          } ${card.v_model_desc || ""}`}</div>
+        </Col>
+        {cardSettings && cardSettings.ins_co_nm && card.ins_co_nm && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <div className="ellipses">{card.ins_co_nm || ""}</div>
+          </Col>
+        )}
+        {cardSettings && cardSettings.clm_no && card.clm_no && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <div className="ellipses">{card.clm_no || ""}</div>
+          </Col>
+        )}
+
+        {cardSettings && cardSettings.employeeassignments && (
+          <Col span={24}>
+            <Row>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
+                employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""
+              } ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
+                employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""
+              }`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
+                employee_refinish
+                  ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}`
+                  : ""
+              } ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
+                employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""
+              }`}</Col>
+            </Row>
+          </Col>
+        )}
+        {/* {cardSettings && cardSettings.laborhrs && (
+          <Col span={24}>
+            <Row>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
+                card.labhrs.aggregate.sum.mod_lb_hrs || "?"
+              } hrs`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
+                card.larhrs.aggregate.sum.mod_lb_hrs || "?"
+              } hrs`}</Col>
+            </Row>
+          </Col>
+        )} */}
+        {cardSettings && cardSettings.actual_in && card.actual_in && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <Space>
+              <DownloadOutlined />
+              <DateTimeFormatter format="MM/DD">{card.actual_in}</DateTimeFormatter>
+            </Space>
+          </Col>
+        )}
+        {cardSettings && cardSettings.scheduled_completion && card.scheduled_completion && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <Space className={pastDueAlert}>
+              <CalendarOutlined />
+              <DateTimeFormatter format="MM/DD">{card.scheduled_completion}</DateTimeFormatter>
+            </Space>
+          </Col>
+        )}
+        {cardSettings && cardSettings.ats && card.alt_transport && (
+          <Col span={12}>
+            <div>{card.alt_transport || ""}</div>
+          </Col>
+        )}
+        {cardSettings && cardSettings.sublets && (
+          <Col span={12}>
+            <ProductionSubletsManageComponent subletJobLines={card.subletLines} />
+          </Col>
+        )}
+        {cardSettings && cardSettings.production_note && (
+          <Col span={24}>
+            {cardSettings && cardSettings.production_note && <ProductionListColumnProductionNote record={card} />}
+          </Col>
+        )}
+        {cardSettings && cardSettings.partsstatus && (
+          <Col span={24}>
+            <JobPartsQueueCount parts={card.joblines_status} />
+          </Col>
+        )}
+      </Row>
+    </Card>
+  );
+}

client/src/components/production-board-kanban/production-board-kanban-card.component.jsx

@@ -1,429 +0,0 @@
-import {
-  BranchesOutlined,
-  CalendarOutlined,
-  DownloadOutlined,
-  EyeFilled,
-  PauseCircleOutlined
-} from "@ant-design/icons";
-import { Card, Col, Row, Space, Tooltip } from "antd";
-import Dinero from "dinero.js";
-import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-
-import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
-import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
-import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
-
-import dayjs from "../../utils/day";
-
-import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-
-const cardColor = (ssbuckets, totalHrs) => {
-  const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
-  return bucket && bucket.color ? bucket.color.rgb || bucket.color : { r: 255, g: 255, b: 255 };
-};
-
-const getContrastYIQ = (bgColor) =>
-  (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000 >= 128 ? "black" : "white";
-
-const findEmployeeById = (employees, id) => employees.find((e) => e.id === id);
-
-const EllipsesToolTip = React.memo(({ title, children, kiosk }) => {
-  if (kiosk || !title) {
-    return <div className="ellipses no-select">{children}</div>;
-  }
-  return (
-    <Tooltip title={title}>
-      <div className="ellipses">{children}</div>
-    </Tooltip>
-  );
-});
-
-const OwnerNameToolTip = ({ metadata, cardSettings }) =>
-  cardSettings?.ownr_nm && (
-    <Col span={24}>
-      <EllipsesToolTip
-        title={metadata.ownr_ln || metadata.ownr_co_nm ? <OwnerNameDisplay ownerObject={metadata} /> : null}
-        kiosk={cardSettings.kiosk}
-      >
-        {metadata.ownr_ln || metadata.ownr_co_nm ? (
-          cardSettings.compact ? (
-            `${metadata.ownr_ln || ""} ${metadata.ownr_co_nm || ""}`
-          ) : (
-            <OwnerNameDisplay ownerObject={metadata} />
-          )
-        ) : (
-          <span>&nbsp;</span>
-        )}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const ModelInfoToolTip = ({ metadata, cardSettings }) =>
-  cardSettings?.model_info && (
-    <Col span={24}>
-      <EllipsesToolTip
-        title={
-          metadata.v_model_yr || metadata.v_make_desc || metadata.v_model_desc
-            ? `${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`
-            : null
-        }
-        kiosk={cardSettings.kiosk}
-      >
-        {metadata.v_model_yr || metadata.v_make_desc || metadata.v_model_desc ? (
-          `${metadata.v_model_yr || ""} ${metadata.v_make_desc || ""} ${metadata.v_model_desc || ""}`
-        ) : (
-          <span>&nbsp;</span>
-        )}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const InsuranceCompanyToolTip = ({ metadata, cardSettings }) =>
-  cardSettings?.ins_co_nm && (
-    <Col span={cardSettings.compact ? 24 : 12}>
-      <EllipsesToolTip title={metadata.ins_co_nm || null} kiosk={cardSettings.kiosk}>
-        {metadata.ins_co_nm ? metadata.ins_co_nm : <span>&nbsp;</span>}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const ClaimNumberToolTip = ({ metadata, cardSettings }) =>
-  cardSettings?.clm_no && (
-    <Col span={cardSettings.compact ? 24 : 12}>
-      <EllipsesToolTip title={metadata.clm_no || null} kiosk={cardSettings.kiosk}>
-        {metadata.clm_no ? metadata.clm_no : <span>&nbsp;</span>}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const EmployeeAssignmentsToolTip = ({
-  metadata,
-  cardSettings,
-  employee_body,
-  employee_prep,
-  employee_refinish,
-  employee_csr
-}) =>
-  cardSettings?.employeeassignments && (
-    <Col span={24}>
-      <Row>
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip
-            title={
-              employee_body || metadata.labhrs.aggregate.sum.mod_lb_hrs
-                ? `B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`
-                : null
-            }
-            kiosk={cardSettings.kiosk}
-          >
-            {employee_body || metadata.labhrs.aggregate.sum.mod_lb_hrs ? (
-              `B: ${employee_body ? `${employee_body.first_name.substring(0, 3)} ${employee_body.last_name.charAt(0)}` : ""} ${metadata.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`
-            ) : (
-              <span>&nbsp;</span>
-            )}
-          </EllipsesToolTip>
-        </Col>
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip
-            title={
-              employee_prep
-                ? `P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`
-                : null
-            }
-            kiosk={cardSettings.kiosk}
-          >
-            {employee_prep ? (
-              `P: ${employee_prep ? `${employee_prep.first_name.substring(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""}`
-            ) : (
-              <span>&nbsp;</span>
-            )}
-          </EllipsesToolTip>
-        </Col>
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip
-            title={
-              employee_refinish || metadata.larhrs.aggregate.sum.mod_lb_hrs
-                ? `R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`
-                : null
-            }
-            kiosk={cardSettings.kiosk}
-          >
-            {employee_refinish || metadata.larhrs.aggregate.sum.mod_lb_hrs ? (
-              `R: ${employee_refinish ? `${employee_refinish.first_name.substring(0, 3)} ${employee_refinish.last_name.charAt(0)}` : ""} ${metadata.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`
-            ) : (
-              <span>&nbsp;</span>
-            )}
-          </EllipsesToolTip>
-        </Col>
-        <Col span={cardSettings.compact ? 24 : 12}>
-          <EllipsesToolTip
-            title={
-              employee_csr ? `C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}` : null
-            }
-            kiosk={cardSettings.kiosk}
-          >
-            {employee_csr ? (
-              `C: ${employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""}`
-            ) : (
-              <span>&nbsp;</span>
-            )}
-          </EllipsesToolTip>
-        </Col>
-      </Row>
-    </Col>
-  );
-
-const ActualInToolTip = ({ metadata, cardSettings }) =>
-  cardSettings?.actual_in && (
-    <Col span={cardSettings.compact ? 24 : 12}>
-      <EllipsesToolTip title={metadata.actual_in || null} kiosk={cardSettings.kiosk}>
-        {metadata.actual_in ? (
-          <Space>
-            <DownloadOutlined />
-            <DateTimeFormatter format="MM/DD">{metadata.actual_in}</DateTimeFormatter>
-          </Space>
-        ) : (
-          <span>&nbsp;</span>
-        )}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const EstimatorToolTip = ({ metadata, cardSettings }) => {
-  return (
-    cardSettings?.estimator && (
-      <Col span={cardSettings.compact ? 24 : 12}>
-        <EllipsesToolTip
-          title={metadata.est_ct_fn && metadata.est_ct_ln ? `${metadata.est_ct_fn} ${metadata.est_ct_ln}` : null}
-          kiosk={cardSettings.kiosk}
-        >
-          {metadata.est_ct_fn && metadata.est_ct_ln ? (
-            <span>E: {`${metadata.est_ct_fn} ${metadata.est_ct_ln}`}</span>
-          ) : (
-            <span>&nbsp;</span>
-          )}
-        </EllipsesToolTip>
-      </Col>
-    )
-  );
-};
-
-const SubtotalTooltip = ({ metadata, cardSettings, t }) => {
-  const dineroAmount = Dinero(metadata?.job_totals?.totals?.subtotal ?? Dinero()).toFormat();
-
-  return (
-    cardSettings?.subtotal && (
-      <Col span={cardSettings.compact ? 24 : 12}>
-        <EllipsesToolTip title={`${dineroAmount}`} kiosk={cardSettings.kiosk}>
-          {dineroAmount}
-        </EllipsesToolTip>
-      </Col>
-    )
-  );
-};
-
-const ScheduledCompletionToolTip = ({ metadata, cardSettings, pastDueAlert }) =>
-  cardSettings?.scheduled_completion && (
-    <Col span={cardSettings.compact ? 24 : 12}>
-      <EllipsesToolTip title={metadata.scheduled_completion || null} kiosk={cardSettings.kiosk}>
-        {metadata.scheduled_completion ? (
-          <Space className={pastDueAlert}>
-            <CalendarOutlined />
-            <DateTimeFormatter format="MM/DD">{metadata.scheduled_completion}</DateTimeFormatter>
-          </Space>
-        ) : (
-          <span>&nbsp;</span>
-        )}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const AltTransportToolTip = ({ metadata, cardSettings }) =>
-  cardSettings?.ats && (
-    <Col span={12}>
-      <EllipsesToolTip title={metadata.alt_transport || null} kiosk={cardSettings.kiosk}>
-        {metadata.alt_transport ? metadata.alt_transport : <span>&nbsp;</span>}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-const SubletsComponent = ({ metadata, cardSettings }) =>
-  cardSettings?.sublets && (
-    <Col span={12}>
-      {metadata.subletLines ? (
-        <ProductionSubletsManageComponent subletJobLines={metadata.subletLines} />
-      ) : (
-        <span>&nbsp;</span>
-      )}
-    </Col>
-  );
-
-const ProductionNoteComponent = ({ metadata, cardSettings, card }) =>
-  cardSettings?.production_note && (
-    <Col span={24} style={{ margin: "2px 0" }}>
-      <ProductionListColumnProductionNote
-        record={{
-          production_vars: metadata?.production_vars,
-          id: card?.id,
-          refetch: card?.refetch
-        }}
-      />
-    </Col>
-  );
-
-const PartsStatusComponent = ({ metadata, cardSettings }) =>
-  cardSettings?.partsstatus && (
-    <Col span={24} style={{ textAlign: "center" }}>
-      {metadata.joblines_status ? <JobPartsQueueCount parts={metadata.joblines_status} /> : <span>&nbsp;</span>}
-    </Col>
-  );
-
-const TasksToolTip = ({ metadata, cardSettings, t }) =>
-  cardSettings?.tasks && (
-    <Col span={12}>
-      <EllipsesToolTip
-        title={`${t("production.labels.tasks")}: ${metadata.tasks_aggregate?.aggregate?.count || 0}`}
-        kiosk={cardSettings.kiosk}
-      >
-        {metadata.tasks_aggregate?.aggregate?.count ? (
-          `T: ${metadata.tasks_aggregate.aggregate.count}`
-        ) : (
-          <span>T: 0</span>
-        )}
-      </EllipsesToolTip>
-    </Col>
-  );
-
-export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings, clone }) {
-  const { t } = useTranslation();
-  const { metadata } = card;
-
-  const employees = useMemo(() => bodyshop.employees, [bodyshop.employees]);
-
-  const { employee_body, employee_prep, employee_refinish, employee_csr } = useMemo(() => {
-    return {
-      employee_body: metadata?.employee_body && findEmployeeById(employees, metadata.employee_body),
-      employee_prep: metadata?.employee_prep && findEmployeeById(employees, metadata.employee_prep),
-      employee_refinish: metadata?.employee_refinish && findEmployeeById(employees, metadata.employee_refinish),
-      employee_csr: metadata?.employee_csr && findEmployeeById(employees, metadata.employee_csr)
-    };
-  }, [metadata, employees]);
-
-  const pastDueAlert = useMemo(() => {
-    if (!metadata?.scheduled_completion) return null;
-    const completionDate = dayjs(metadata.scheduled_completion);
-    if (dayjs().isSameOrAfter(completionDate, "day")) return "production-completion-past";
-    if (dayjs().add(1, "day").isSame(completionDate, "day")) return "production-completion-soon";
-    return null;
-  }, [metadata?.scheduled_completion]);
-
-  const totalHrs = useMemo(() => {
-    return metadata?.labhrs && metadata?.larhrs
-      ? metadata.labhrs.aggregate.sum.mod_lb_hrs + metadata.larhrs.aggregate.sum.mod_lb_hrs
-      : 0;
-  }, [metadata?.labhrs, metadata?.larhrs]);
-
-  const bgColor = useMemo(() => cardColor(bodyshop.ssbuckets, totalHrs), [bodyshop.ssbuckets, totalHrs]);
-  const contrastYIQ = useMemo(() => getContrastYIQ(bgColor), [bgColor]);
-
-  const isBodyEmpty = useMemo(() => {
-    return !(
-      cardSettings?.ownr_nm ||
-      cardSettings?.model_info ||
-      cardSettings?.ins_co_nm ||
-      cardSettings?.clm_no ||
-      cardSettings?.employeeassignments ||
-      cardSettings?.actual_in ||
-      cardSettings?.scheduled_completion ||
-      cardSettings?.ats ||
-      cardSettings?.sublets ||
-      cardSettings?.production_note ||
-      cardSettings?.partsstatus ||
-      cardSettings?.estimator ||
-      cardSettings?.subtotal ||
-      cardSettings?.tasks
-    );
-  }, [cardSettings]);
-
-  const headerContent = (
-    <div className="header-content-container">
-      <div className="inner-container">
-        <ProductionAlert id={card.id} productionVars={metadata?.production_vars} refetch={card?.refetch} key="alert" />
-        {metadata?.suspended && <PauseCircleOutlined className="circle-outline" key="suspended" />}
-        {metadata?.iouparent && (
-          <EllipsesToolTip
-            title={t("jobs.labels.iou")}
-            key="iouparent"
-            className="iouparent"
-            kiosk={cardSettings.kiosk}
-          >
-            <BranchesOutlined className="branches-outlined" />
-          </EllipsesToolTip>
-        )}
-      </div>
-      <span className="tech-container">
-        <Link to={technician ? `/tech/joblookup?selected=${card.id}` : `/manage/jobs/${card.id}`}>
-          {metadata?.ro_number || t("general.labels.na")}
-        </Link>
-      </span>
-      {isBodyEmpty && (
-        <div className="body-empty-container">
-          <Link to={{ search: `?selected=${card.id}` }}>
-            <EyeFilled />
-          </Link>
-        </div>
-      )}
-    </div>
-  );
-
-  const bodyContent = (
-    <Row>
-      <OwnerNameToolTip metadata={metadata} cardSettings={cardSettings} />
-      <ModelInfoToolTip metadata={metadata} cardSettings={cardSettings} />
-      <InsuranceCompanyToolTip metadata={metadata} cardSettings={cardSettings} />
-      <ClaimNumberToolTip metadata={metadata} cardSettings={cardSettings} />
-      <EmployeeAssignmentsToolTip
-        metadata={metadata}
-        cardSettings={cardSettings}
-        employee_body={employee_body}
-        employee_prep={employee_prep}
-        employee_refinish={employee_refinish}
-        employee_csr={employee_csr}
-      />
-      <EstimatorToolTip metadata={metadata} cardSettings={cardSettings} />
-      <TasksToolTip metadata={metadata} cardSettings={cardSettings} t={t} />
-      <SubtotalTooltip metadata={metadata} cardSettings={cardSettings} t={t} />
-      <ActualInToolTip metadata={metadata} cardSettings={cardSettings} />
-      <ScheduledCompletionToolTip metadata={metadata} cardSettings={cardSettings} pastDueAlert={pastDueAlert} />
-      <AltTransportToolTip metadata={metadata} cardSettings={cardSettings} />
-      <SubletsComponent metadata={metadata} cardSettings={cardSettings} />
-      <ProductionNoteComponent metadata={metadata} cardSettings={cardSettings} card={card} />
-      <PartsStatusComponent metadata={metadata} cardSettings={cardSettings} />
-    </Row>
-  );
-
-  return (
-    <Card
-      className={`react-trello-card ${cardSettings.kiosk ? "kiosk-mode" : ""}`}
-      size="small"
-      style={{
-        backgroundColor: cardSettings?.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
-        color: cardSettings?.cardcolor && contrastYIQ
-      }}
-      title={!isBodyEmpty ? headerContent : null}
-      extra={
-        !isBodyEmpty && (
-          <Link to={{ search: `?selected=${card.id}` }}>
-            <EyeFilled />
-          </Link>
-        )
-      }
-    >
-      {isBodyEmpty ? headerContent : bodyContent}
-    </Card>
-  );
-}

client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx

@@ -0,0 +1,125 @@
+import { useMutation } from "@apollo/client";
+import { Button, Card, Col, Form, notification, Popover, Row, Switch } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
+
+export default function ProductionBoardKanbanCardSettings({ associationSettings }) {
+  const [form] = Form.useForm();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
+
+  useEffect(() => {
+    form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
+  }, [form, associationSettings, open]);
+
+  const { t } = useTranslation();
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    const result = await updateKbSettings({
+      variables: {
+        id: associationSettings && associationSettings.id,
+        ks: values
+      }
+    });
+    if (result.errors) {
+      notification.open({
+        type: "error",
+        message: t("production.errors.settings", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+    setOpen(false);
+    setLoading(false);
+  };
+
+  const overlay = (
+    <div>
+      <Card>
+        <Form form={form} onFinish={handleFinish} layout="vertical">
+          <Row gutter={[16, 16]}>
+            <Col span={12}>
+              <Form.Item label={t("production.labels.compact")} name="compact" valuePropName="checked">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.ownr_nm")} name="ownr_nm">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.clm_no")} name="clm_no">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.ins_co_nm")} name="ins_co_nm">
+                <Switch />
+              </Form.Item>
+              {/* <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.laborhrs")}
+                name="laborhrs"
+              >
+                <Switch />
+              </Form.Item> */}
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.employeeassignments")}
+                name="employeeassignments"
+              >
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.actual_in")} name="actual_in">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.cardcolor")} name="cardcolor">
+                <Switch />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.scheduled_completion")}
+                name="scheduled_completion"
+              >
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.ats")} name="ats">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.production_note")} name="production_note">
+                <Switch />
+              </Form.Item>
+              {/* <Form.Item
+              valuePropName='checked' label={t("production.labels.alert")} name="alert">
+                <Switch/>
+              </Form.Item> */}
+              <Form.Item valuePropName="checked" label={t("production.labels.sublets")} name="sublets">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.partsstatus")} name="partsstatus">
+                <Switch />
+              </Form.Item>
+              <Form.Item valuePropName="checked" label={t("production.labels.stickyheader")} name="stickyheader">
+                <Switch />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+        <Button
+          onClick={() => {
+            form.submit();
+          }}
+        >
+          {t("general.actions.save")}
+        </Button>
+      </Card>
+    </div>
+  );
+  return (
+    <Popover content={overlay} open={open} placement="topRight">
+      <Button loading={loading} onClick={() => setOpen(true)}>
+        {t("production.labels.cardsettings")}
+      </Button>
+    </Popover>
+  );
+}

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -1,235 +1,265 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import Board from "./trello-board/index";
-import { Button, notification, Skeleton, Space } from "antd";
+import Board, { moveCard } from "@asseinfo/react-kanban";
+import { Button, Grid, notification, Space, Statistic } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { Sticky, StickyContainer } from "react-sticky";
 import { createStructuredSelector } from "reselect";
+import styled from "styled-components";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
+import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
-import CardColorLegend from "./production-board-kanban-card-color-legend.component.jsx";
+import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
+//import "@asseinfo/react-kanban/dist/styles.css";
+import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
-import ProductionBoardKanbanSettings from "./settings/production-board-kanban.settings.component.jsx";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
-import { defaultFilters, mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
-import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  technician: selectTechnician
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) =>
-    dispatch(
-      insertAuditTrail({
-        jobid,
-        operation,
-        type
-      })
-    )
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
-function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTrail, associationSettings, statuses }) {
-  const [boardLanes, setBoardLanes] = useState({ lanes: [] });
-  const [filter, setFilter] = useState(defaultFilters);
-  const [loading, setLoading] = useState(true);
+export function ProductionBoardKanbanComponent({
+  data,
+  bodyshop,
+  refetch,
+  technician,
+  insertAuditTrail,
+  associationSettings
+}) {
+  const [boardLanes, setBoardLanes] = useState({
+    columns: [{ id: "Loading...", title: "Loading...", cards: [] }]
+  });
+
+  const [filter, setFilter] = useState({ search: "", employeeId: null });
+
   const [isMoving, setIsMoving] = useState(false);
-  const [orientation, setOrientation] = useState("vertical");
 
   const { t } = useTranslation();
+  useEffect(() => {
+    const boardData = createBoardData(
+      [...bodyshop.md_ro_statuses.production_statuses, ...(bodyshop.md_ro_statuses.additional_board_statuses || [])],
+      data,
+      filter
+    );
+
+    boardData.columns = boardData.columns.map((d) => {
+      return { ...d, title: `${d.title} (${d.cards.length})` };
+    });
+    setBoardLanes(boardData);
+    setIsMoving(false);
+  }, [data, setBoardLanes, setIsMoving, bodyshop.md_ro_statuses, filter]);
+
   const client = useApolloClient();
 
-  useEffect(() => {
-    if (associationSettings) {
-      setLoading(true);
-      setOrientation(associationSettings?.kanban_settings?.orientation ? "vertical" : "horizontal");
-      setLoading(false);
-    }
-  }, [associationSettings]);
+  const handleDragEnd = async (card, source, destination) => {
+    logImEXEvent("kanban_drag_end");
 
-  useEffect(() => {
     setIsMoving(true);
-    const newBoardData = createBoardData({
-      statuses,
-      data,
-      filter,
-      cardSettings: associationSettings?.kanban_settings
-    });
+    setBoardLanes(moveCard(boardLanes, source, destination));
+    const sameColumnTransfer = source.fromColumnId === destination.toColumnId;
+    const sourceColumn = boardLanes.columns.find((x) => x.id === source.fromColumnId);
+    const destinationColumn = boardLanes.columns.find((x) => x.id === destination.toColumnId);
 
-    newBoardData.lanes = newBoardData.lanes.map((lane) => ({
-      ...lane,
-      title: `${lane.title} (${lane.cards.length})`
-    }));
+    const movedCardWillBeFirst = destination.toPosition === 0;
 
-    setBoardLanes((prevBoardLanes) => {
-      const deepClonedData = cloneDeep(newBoardData);
-      if (!isEqual(prevBoardLanes, deepClonedData)) {
-        return deepClonedData;
-      }
-      return prevBoardLanes;
-    });
-    setIsMoving(false);
-  }, [data, bodyshop.md_ro_statuses, filter, statuses, associationSettings?.kanban_settings]);
+    const movedCardWillBeLast = destinationColumn.cards.length - destination.toPosition < 1;
 
-  const getCardByID = useCallback((data, cardId) => {
-    for (const lane of data.lanes) {
-      for (const card of lane.cards) {
-        if (card.id === cardId) {
-          return card;
-        }
-      }
+    const lastCardInDestinationColumn = destinationColumn.cards[destinationColumn.cards.length - 1];
+
+    const oldChildCard = sourceColumn.cards[source.fromPosition + 1];
+
+    const newChildCard = movedCardWillBeLast
+      ? null
+      : destinationColumn.cards[
+          sameColumnTransfer
+            ? source.fromPosition - destination.toPosition > 0
+              ? destination.toPosition
+              : destination.toPosition + 1
+            : destination.toPosition
+        ];
+
+    const oldChildCardNewParent = oldChildCard ? card.kanbanparent : null;
+
+    let movedCardNewKanbanParent;
+    if (movedCardWillBeFirst) {
+      //console.log("==> New Card is first.");
+      movedCardNewKanbanParent = "-1";
+    } else if (movedCardWillBeLast) {
+      // console.log("==> New Card is last.");
+      movedCardNewKanbanParent = lastCardInDestinationColumn.id;
+    } else if (!!newChildCard) {
+      // console.log("==> New Card is somewhere in the middle");
+      movedCardNewKanbanParent = newChildCard.kanbanparent;
+    } else {
+      console.log("==> !!!!!!Couldn't find a parent.!!!! <==");
     }
-    return null;
-  }, []);
+    const newChildCardNewParent = newChildCard ? card.id : null;
+    const update = await client.mutate({
+      mutation: generate_UPDATE_JOB_KANBAN(
+        oldChildCard ? oldChildCard.id : null,
+        oldChildCardNewParent,
+        card.id,
+        movedCardNewKanbanParent,
+        destination.toColumnId,
+        newChildCard ? newChildCard.id : null,
+        newChildCardNewParent
+      )
+    });
+    insertAuditTrail({
+      jobid: card.id,
+      operation: AuditTrailMapping.jobstatuschange(destination.toColumnId),
+      type: "jobstatuschange"
+    });
 
-  const onDragEnd = useCallback(
-    async ({ type, source, destination, draggableId }) => {
-      logImEXEvent("kanban_drag_end");
-
-      if (!type || type !== "lane" || !source || !destination || isMoving) return;
-
-      setIsMoving(true);
-
-      const targetLane = boardLanes.lanes.find((lane) => lane.id === destination.droppableId);
-      const sourceLane = boardLanes.lanes.find((lane) => lane.id === source.droppableId);
-
-      if (!targetLane || !sourceLane) {
-        setIsMoving(false);
-        console.error("Invalid source or destination lane");
-        return;
-      }
-
-      const sameColumnTransfer = source.droppableId === destination.droppableId;
-      const sourceCard = getCardByID(boardLanes, draggableId);
-
-      const movedCardWillBeFirst = destination.index === 0;
-      const movedCardWillBeLast = destination.index >= targetLane.cards.length - 1;
-
-      const lastCardInTargetLane = targetLane.cards[targetLane.cards.length - 1];
-      const oldChildCard = sourceLane.cards[source.index + 1];
-
-      const newChildCard = movedCardWillBeLast
-        ? null
-        : targetLane.cards[
-            sameColumnTransfer
-              ? source.index < destination.index
-                ? destination.index + 1
-                : destination.index
-              : destination.index
-          ];
-
-      const oldChildCardNewParent = oldChildCard ? sourceCard.metadata.kanbanparent : null;
-
-      let movedCardNewKanbanParent;
-      if (movedCardWillBeFirst) {
-        movedCardNewKanbanParent = "-1";
-      } else if (movedCardWillBeLast) {
-        movedCardNewKanbanParent = lastCardInTargetLane.id;
-      } else if (newChildCard) {
-        movedCardNewKanbanParent = newChildCard.metadata.kanbanparent;
-      } else {
-        console.error("==> !!!!!!Couldn't find a parent.!!!! <==");
-      }
-
-      const newChildCardNewParent = newChildCard ? draggableId : null;
-
-      try {
-        const update = await client.mutate({
-          mutation: generate_UPDATE_JOB_KANBAN(
-            oldChildCard ? oldChildCard.id : null,
-            oldChildCardNewParent,
-            draggableId,
-            movedCardNewKanbanParent,
-            targetLane.id,
-            newChildCard ? newChildCard.id : null,
-            newChildCardNewParent
-          )
-        });
-
-        insertAuditTrail({
-          jobid: draggableId,
-          operation: AuditTrailMapping.jobstatuschange(targetLane.id),
-          type: "jobstatuschange"
-        });
-
-        if (update.errors) {
-          notification["error"]({
-            message: t("production.errors.boardupdate", {
-              message: JSON.stringify(update.errors)
-            })
-          });
-        }
-      } catch (error) {
-        notification["error"]({
-          message: t("production.errors.boardupdate", {
-            message: error.message
-          })
-        });
-      } finally {
-        setIsMoving(false);
-      }
-    },
-    [boardLanes, client, getCardByID, isMoving, t, insertAuditTrail]
-  );
-
-  const cardSettings = useMemo(() => {
-    const kanbanSettings = associationSettings?.kanban_settings;
-    return mergeWithDefaults(kanbanSettings);
-  }, [associationSettings]);
-
-  const handleSettingsChange = () => {
-    setFilter(defaultFilters);
+    if (update.errors) {
+      notification["error"]({
+        message: t("production.errors.boardupdate", {
+          message: JSON.stringify(update.errors)
+        })
+      });
+    }
   };
 
-  if (loading) {
-    return <Skeleton active />;
-  }
+  const totalHrs = data
+    .reduce(
+      (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
+      0
+    )
+    .toFixed(1);
+  const totalLAB = data.reduce((acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0), 0).toFixed(1);
+  const totalLAR = data.reduce((acc, val) => acc + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0), 0).toFixed(1);
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const standardSizes = {
+    xs: "250",
+    sm: "250",
+    md: "250",
+    lg: "250",
+    xl: "250",
+    xxl: "250"
+  };
+  const compactSizes = {
+    xs: "150",
+    sm: "150",
+    md: "150",
+    lg: "150",
+    xl: "155",
+    xxl: "155"
+  };
+
+  const width = selectedBreakpoint
+    ? associationSettings && associationSettings.kanban_settings && associationSettings.kanban_settings.compact
+      ? compactSizes[selectedBreakpoint[0]]
+      : standardSizes[selectedBreakpoint[0]]
+    : "250";
+
+  const stickyHeader = {
+    renderColumnHeader: ({ title }) => (
+      <Sticky>
+        {({
+          style,
+
+          // the following are also available but unused in this example
+          isSticky,
+          wasSticky,
+          distanceFromTop,
+          distanceFromBottom,
+          calculatedHeight
+        }) => (
+          <div className="react-kanban-column-header" style={{ ...style, zIndex: "99", backgroundColor: "#ddd" }}>
+            {title}
+          </div>
+        )}
+      </Sticky>
+    )
+  };
+
+  const cardSettings =
+    associationSettings &&
+    associationSettings.kanban_settings &&
+    Object.keys(associationSettings.kanban_settings).length > 0
+      ? associationSettings.kanban_settings
+      : {
+          ats: true,
+          clm_no: true,
+          compact: false,
+          ownr_nm: true,
+          sublets: true,
+          ins_co_nm: true,
+          production_note: true,
+          employeeassignments: true,
+          scheduled_completion: true,
+          stickyheader: false,
+          cardcolor: false
+        };
 
   return (
-    <div>
+    <Container width={width}>
       <IndefiniteLoading loading={isMoving} />
+
       <PageHeader
-        title={cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
-        style={{ paddingInline: 0, paddingBlock: 0 }}
+        title={
+          <Space>
+            <Statistic title={t("dashboard.titles.productionhours")} value={totalHrs} />
+            <Statistic title={t("dashboard.titles.labhours")} value={totalLAB} />
+            <Statistic title={t("dashboard.titles.larhours")} value={totalLAR} />
+            <Statistic title={t("appointments.labels.inproduction")} value={data && data.length} />
+          </Space>
+        }
         extra={
           <Space wrap>
             <Button onClick={() => refetch && refetch()}>
               <SyncOutlined />
             </Button>
             <ProductionBoardFilters filter={filter} setFilter={setFilter} loading={isMoving} />
-            <ProductionBoardKanbanSettings
-              parentLoading={setLoading}
-              associationSettings={associationSettings}
-              onSettingsChange={handleSettingsChange}
-              bodyshop={bodyshop}
-              data={data}
-            />
+            <ProductionBoardKanbanCardSettings associationSettings={associationSettings} />
           </Space>
         }
       />
 
-      <NoteUpsertModal />
-      <ProductionListDetailComponent jobs={data} />
+      {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
 
-      <Board
-        queryData={data}
-        data={boardLanes}
-        onDragEnd={onDragEnd}
-        orientation={orientation}
-        cardSettings={cardSettings}
-      />
-    </div>
+      <ProductionListDetailComponent jobs={data} />
+      <StickyContainer>
+        <Board
+          style={{ height: "100%" }}
+          children={boardLanes}
+          disableCardDrag={isMoving}
+          {...(cardSettings.stickyheader && stickyHeader)}
+          renderCard={(card) => ProductionBoardCard(technician, card, bodyshop, cardSettings)}
+          onCardDragEnd={handleDragEnd}
+        />
+      </StickyContainer>
+    </Container>
   );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent);
+
+const Container = styled.div`
+  .react-kanban-card-skeleton,
+  .react-kanban-card,
+  .react-kanban-card-adder-form {
+    box-sizing: border-box;
+    max-width: ${(props) => props.width}px;
+    min-width: ${(props) => props.width}px;
+  }
+`;

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import { useQuery, useSubscription } from "@apollo/client";
+import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import _ from "lodash";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
+  QUERY_EXACT_JOB_IN_PRODUCTION,
+  QUERY_EXACT_JOBS_IN_PRODUCTION,
   QUERY_JOBS_IN_PRODUCTION,
-  SUBSCRIPTION_JOBS_IN_PRODUCTION,
-  SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW
+  SUBSCRIPTION_JOBS_IN_PRODUCTION
 } from "../../graphql/jobs.queries";
 import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
@@ -16,63 +18,76 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionType = "direct" }) {
-  const fired = useRef(false); // useRef to keep track of whether the subscription fired
-
-  const combinedStatuses = useMemo(
-    () => [
-      ...bodyshop.md_ro_statuses.production_statuses,
-      ...(bodyshop.md_ro_statuses.additional_board_statuses || [])
-    ],
-    [bodyshop.md_ro_statuses.production_statuses, bodyshop.md_ro_statuses.additional_board_statuses]
-  );
-
+export function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
   const { refetch, loading, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
     pollInterval: 3600000,
     fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    onError: (error) => console.error(`Error fetching jobs in production: ${error.message}`)
+    nextFetchPolicy: "network-only"
   });
-
-  const { data: updatedJobs } = useSubscription(
-    subscriptionType === "view" ? SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW : SUBSCRIPTION_JOBS_IN_PRODUCTION,
-    {
-      onError: (error) => console.error(`Error subscribing to jobs in production: ${error.message}`)
-    }
-  );
-
-  const { loading: associationSettingsLoading, data: associationSettings } = useQuery(QUERY_KANBAN_SETTINGS, {
-    variables: { email: currentUser.email },
-    onError: (error) => console.error(`Error fetching Kanban settings: ${error.message}`)
-  });
-
-  // const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
+  const client = useApolloClient();
+  const [joblist, setJoblist] = useState([]);
+  const { data: updatedJobs } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
 
   useEffect(() => {
-    if (!updatedJobs) {
-      return;
-    }
-    if (!fired.current) {
-      fired.current = true;
-      return;
-    }
-    refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`));
-  }, [updatedJobs, refetch]);
+    if (!(data && data.jobs)) return;
+    setJoblist(
+      data.jobs.map((j) => {
+        return { id: j.id, updated_at: j.updated_at };
+      })
+    );
+  }, [data]);
 
-  const filteredAssociationSettings = useMemo(() => {
-    return associationSettings?.associations[0] || null;
-  }, [associationSettings]);
+  useEffect(() => {
+    if (!updatedJobs || joblist.length === 0) return;
+
+    const jobDiff = _.differenceWith(
+      joblist,
+      updatedJobs.jobs,
+      (a, b) => a.id === b.id && a.updated_at === b.updated_at
+    );
+
+    jobDiff.forEach((job) => {
+      getUpdatedJobData(job.id);
+    });
+    if (jobDiff.length > 1) {
+      getUpdatedJobsData(jobDiff.map((j) => j.id));
+    } else if (jobDiff.length === 1) {
+      jobDiff.forEach((job) => {
+        getUpdatedJobData(job.id);
+      });
+    }
+
+    setJoblist(updatedJobs.jobs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updatedJobs]);
+
+  const getUpdatedJobData = async (jobId) => {
+    client.query({
+      query: QUERY_EXACT_JOB_IN_PRODUCTION,
+      variables: { id: jobId }
+    });
+  };
+  const getUpdatedJobsData = async (jobIds) => {
+    client.query({
+      query: QUERY_EXACT_JOBS_IN_PRODUCTION,
+      variables: { ids: jobIds }
+    });
+  };
+
+  const { loading: associationSettingsLoading, data: associationSettings } = useQuery(QUERY_KANBAN_SETTINGS, {
+    variables: { email: currentUser.email }
+  });
 
   return (
     <ProductionBoardKanbanComponent
       loading={loading || associationSettingsLoading}
       data={data ? data.jobs : []}
       refetch={refetch}
-      associationSettings={filteredAssociationSettings}
-      bodyshop={bodyshop}
-      statuses={combinedStatuses}
+      associationSettings={
+        associationSettings && associationSettings.associations[0] ? associationSettings.associations[0] : null
+      }
     />
   );
 }
 
-export default connect(mapStateToProps)(ProductionBoardKanbanContainer);
+export default connect(mapStateToProps, null)(ProductionBoardKanbanContainer);

client/src/components/production-board-kanban/production-board-kanban.statistics.jsx

@@ -1,221 +0,0 @@
-import React, { useMemo } from "react";
-import { Card, Statistic } from "antd";
-import { useTranslation } from "react-i18next";
-import PropTypes from "prop-types";
-import { defaultKanbanSettings, statisticsItems } from "./settings/defaultKanbanSettings.js";
-import Dinero from "dinero.js";
-
-export const StatisticType = {
-  HOURS: "hours",
-  AMOUNT: "amount",
-  JOBS: "jobs",
-  TASKS: "tasks"
-};
-
-const mergeStatistics = (items, values) => {
-  const valuesMap = values.reduce((acc, value) => {
-    acc[value.id] = value;
-    return acc;
-  }, {});
-
-  return items.map((item) => ({
-    ...item,
-    value: valuesMap[item.id]?.value,
-    type: valuesMap[item.id]?.type
-  }));
-};
-
-const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
-  const { t } = useTranslation();
-
-  const calculateTotal = (items, key, subKey) => {
-    return items.reduce((acc, item) => acc + (item[key]?.aggregate?.sum?.[subKey] || 0), 0);
-  };
-
-  const calculateTotalAmount = (items, key) => {
-    return items.reduce((acc, item) => acc.add(Dinero(item[key]?.totals?.subtotal ?? Dinero())), Dinero({ amount: 0 }));
-  };
-
-  const calculateReducerTotalAmount = (lanes, key) => {
-    return lanes.reduce(
-      (acc, lane) => {
-        return acc.add(
-          lane.cards.reduce(
-            (laneAcc, card) => laneAcc.add(Dinero(card.metadata[key]?.totals?.subtotal ?? Dinero())),
-            Dinero({ amount: 0 })
-          )
-        );
-      },
-      Dinero({ amount: 0 })
-    );
-  };
-
-  const calculateReducerTotal = (lanes, key, subKey) => {
-    return lanes.reduce((acc, lane) => {
-      return (
-        acc + lane.cards.reduce((laneAcc, card) => laneAcc + (card.metadata[key]?.aggregate?.sum?.[subKey] || 0), 0)
-      );
-    }, 0);
-  };
-
-  const formatValue = (value, type) => {
-    if (type === StatisticType.JOBS) {
-      return value.toFixed(0);
-    }
-    if (type === StatisticType.HOURS) {
-      return value.toFixed(2);
-    }
-    return value;
-  };
-
-  const totalHrs = useMemo(() => {
-    if (!cardSettings.totalHrs) return null;
-    const total = calculateTotal(data, "labhrs", "mod_lb_hrs") + calculateTotal(data, "larhrs", "mod_lb_hrs");
-    return parseFloat(total.toFixed(2));
-  }, [data, cardSettings.totalHrs]);
-
-  const totalLAB = useMemo(() => {
-    if (!cardSettings.totalLAB) return null;
-    const total = calculateTotal(data, "labhrs", "mod_lb_hrs");
-    return parseFloat(total.toFixed(2));
-  }, [data, cardSettings.totalLAB]);
-
-  const totalLAR = useMemo(() => {
-    if (!cardSettings.totalLAR) return null;
-    const total = calculateTotal(data, "larhrs", "mod_lb_hrs");
-    return parseFloat(total.toFixed(2));
-  }, [data, cardSettings.totalLAR]);
-
-  const jobsInProduction = useMemo(
-    () => (cardSettings.jobsInProduction ? data.length : null),
-    [data, cardSettings.jobsInProduction]
-  );
-
-  const totalAmountInProduction = useMemo(() => {
-    if (!cardSettings.totalAmountInProduction) return null;
-    const total = calculateTotalAmount(data, "job_totals");
-    return total.toFormat("$0,0.00");
-  }, [data, cardSettings.totalAmountInProduction]);
-
-  const totalAmountOnBoard = useMemo(() => {
-    if (!reducerData || !cardSettings.totalAmountOnBoard) return null;
-    const total = calculateReducerTotalAmount(reducerData.lanes, "job_totals");
-    return total.toFormat("$0,0.00");
-  }, [reducerData, cardSettings.totalAmountOnBoard]);
-
-  const totalHrsOnBoard = useMemo(() => {
-    if (!reducerData || !cardSettings.totalHrsOnBoard) return null;
-    const total =
-      calculateReducerTotal(reducerData.lanes, "labhrs", "mod_lb_hrs") +
-      calculateReducerTotal(reducerData.lanes, "larhrs", "mod_lb_hrs");
-    return parseFloat(total.toFixed(2));
-  }, [reducerData, cardSettings.totalHrsOnBoard]);
-
-  const totalLABOnBoard = useMemo(() => {
-    if (!reducerData || !cardSettings.totalLABOnBoard) return null;
-    const total = calculateReducerTotal(reducerData.lanes, "labhrs", "mod_lb_hrs");
-    return parseFloat(total.toFixed(2));
-  }, [reducerData, cardSettings.totalLABOnBoard]);
-
-  const totalLAROnBoard = useMemo(() => {
-    if (!reducerData || !cardSettings.totalLAROnBoard) return null;
-    const total = calculateReducerTotal(reducerData.lanes, "larhrs", "mod_lb_hrs");
-    return parseFloat(total.toFixed(2));
-  }, [reducerData, cardSettings.totalLAROnBoard]);
-
-  const jobsOnBoard = useMemo(
-    () =>
-      reducerData && cardSettings.jobsOnBoard
-        ? reducerData.lanes.reduce((acc, lane) => acc + lane.cards.length, 0)
-        : null,
-    [reducerData, cardSettings.jobsOnBoard]
-  );
-
-  const tasksInProduction = useMemo(() => {
-    if (!data || !cardSettings.tasksInProduction) return null;
-    return data.reduce((acc, item) => acc + (item.tasks_aggregate?.aggregate?.count || 0), 0);
-  }, [data, cardSettings.tasksInProduction]);
-
-  const tasksOnBoard = useMemo(() => {
-    if (!reducerData || !cardSettings.tasksOnBoard) return null;
-    return reducerData.lanes.reduce((acc, lane) => {
-      return (
-        acc + lane.cards.reduce((laneAcc, card) => laneAcc + (card.metadata.tasks_aggregate?.aggregate?.count || 0), 0)
-      );
-    }, 0);
-  }, [reducerData, cardSettings.tasksOnBoard]);
-
-  const statistics = useMemo(
-    () =>
-      mergeStatistics(statisticsItems, [
-        { id: 0, value: totalHrs, type: StatisticType.HOURS },
-        { id: 1, value: totalAmountInProduction, type: StatisticType.AMOUNT },
-        { id: 2, value: totalLAB, type: StatisticType.HOURS },
-        { id: 3, value: totalLAR, type: StatisticType.HOURS },
-        { id: 4, value: jobsInProduction, type: StatisticType.JOBS },
-        { id: 5, value: totalHrsOnBoard, type: StatisticType.HOURS },
-        { id: 6, value: totalAmountOnBoard, type: StatisticType.AMOUNT },
-        { id: 7, value: totalLABOnBoard, type: StatisticType.HOURS },
-        { id: 8, value: totalLAROnBoard, type: StatisticType.HOURS },
-        { id: 9, value: jobsOnBoard, type: StatisticType.JOBS },
-        { id: 10, value: tasksOnBoard, type: StatisticType.TASKS },
-        { id: 11, value: tasksInProduction, type: StatisticType.TASKS }
-      ]),
-    [
-      totalHrs,
-      totalAmountInProduction,
-      totalLAB,
-      totalLAR,
-      jobsInProduction,
-      totalHrsOnBoard,
-      totalAmountOnBoard,
-      totalLABOnBoard,
-      totalLAROnBoard,
-      jobsOnBoard,
-      tasksOnBoard,
-      tasksInProduction
-    ]
-  );
-
-  const sortedStatistics = useMemo(() => {
-    const statisticsMap = new Map(statistics.map((stat) => [stat.id, stat]));
-
-    return (
-      cardSettings?.statisticsOrder ? cardSettings.statisticsOrder : defaultKanbanSettings.statisticsOrder
-    ).reduce((sorted, orderId) => {
-      const value = statisticsMap.get(orderId);
-      if (value && value.value !== null) {
-        sorted.push(value);
-      }
-      return sorted;
-    }, []);
-  }, [statistics, cardSettings.statisticsOrder]);
-
-  return (
-    <div style={{ display: "flex", gap: "5px", flexWrap: "wrap", marginBottom: "5px" }}>
-      {sortedStatistics.map((stat) => (
-        <Card styles={{ body: { padding: "8px" } }} key={stat.id}>
-          <Statistic
-            title={t(`production.statistics.${stat.label}`)}
-            value={formatValue(stat.value, stat.type)}
-            suffix={
-              stat.type === StatisticType.HOURS
-                ? t("production.statistics.hours")
-                : stat.type === StatisticType.JOBS
-                  ? t("production.statistics.jobs")
-                  : undefined
-            }
-          />
-        </Card>
-      ))}
-    </div>
-  );
-};
-
-ProductionStatistics.propTypes = {
-  data: PropTypes.array.isRequired,
-  cardSettings: PropTypes.object.isRequired,
-  reducerData: PropTypes.object
-};
-
-export default ProductionStatistics;

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -1,72 +1,145 @@
-.react-trello-board {
+.react-kanban-board {
   padding: 5px;
 }
 
-.height-preserving-container:empty {
-  min-height: calc(var(--child-height));
-  box-sizing: border-box;
+.react-kanban-card {
+  border-radius: 3px;
+  background-color: #fff;
+  padding: 4px;
+  margin-bottom: 7px;
 }
 
-.height-preserving-container {
+// .react-kanban-card-skeleton,
+// .react-kanban-card,
+// .react-kanban-card-adder-form {
+//   box-sizing: border-box;
+//   max-width: 145px;
+//   min-width: 145px;
+// }
+
+.react-kanban-card--dragging {
+  box-shadow: 2px 2px grey;
 }
 
-.react-trello-column-header {
+.react-kanban-card__description {
+  padding-top: 10px;
+}
+
+.react-kanban-card__title {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 5px;
   font-weight: bold;
-  cursor: pointer;
-  background-color: #d0d0d0;
-  border-radius: 5px 5px 0 0;
-}
-
-
-.production-alert {
-  background: transparent;
-  border: none;
-}
-.react-trello-footer {
-  background-color: #d0d0d0;
-  border-radius: 0 0 5px 5px;
-}
-
-.grid-item {
-  margin: 1px; // TODO: (Note) THis is where we set the margin for vertical
-}
-
-.lane-title {
-  vertical-align: middle;
-
-  .icon {
-    margin-right: 8px; /* Adjust the spacing as needed */
-  }
-}
-
-.header-content-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  .body-empty-container {
-    position: absolute;
-    right: 0;
-  }
-  .tech-container {
-    font-weight: bolder;
-    text-align: center;
-    flex: 1;
-    .branches-outlined {
-      color: orangered;
-    }
-  }
-  .inner-container {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    left: 0;
-    .circle-outline {
-      color: orangered;
-      margin-left: 8px;
-    }
-    .iou-parent {
-      margin-left: 8px;
-    }
-  }
+  justify-content: space-between;
+}
+
+.react-kanban-column {
+  padding: 10px;
+  border-radius: 2px;
+  background-color: #eee;
+  margin: 5px;
+}
+
+.react-kanban-column input:focus {
+  outline: none;
+}
+
+.react-kanban-card-adder-form {
+  border-radius: 3px;
+  background-color: #fff;
+  padding: 10px;
+  margin-bottom: 7px;
+}
+
+.react-kanban-card-adder-form input {
+  border: 0px;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.react-kanban-card-adder-button {
+  width: 100%;
+  margin-top: 5px;
+  background-color: transparent;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  transition: 0.3s;
+  border-radius: 3px;
+  font-size: 20px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.react-kanban-card-adder-button:hover {
+  background-color: #ccc;
+}
+
+.react-kanban-card-adder-form__title {
+  font-weight: bold;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 5px;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0px;
+}
+
+.react-kanban-card-adder-form__title:focus {
+  outline: none;
+}
+
+.react-kanban-card-adder-form__description {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.react-kanban-card-adder-form__description:focus {
+  outline: none;
+}
+
+.react-kanban-card-adder-form__button {
+  background-color: #eee;
+  border: none;
+  padding: 5px;
+  width: 45%;
+  margin-top: 5px;
+  border-radius: 3px;
+}
+
+.react-kanban-card-adder-form__button:hover {
+  transition: 0.3s;
+  cursor: pointer;
+  background-color: #ccc;
+}
+
+.react-kanban-column-header {
+  padding-bottom: 10px;
+  font-weight: bold;
+}
+
+.react-kanban-column-header input:focus {
+  outline: none;
+}
+
+.react-kanban-column-header__button {
+  color: #333333;
+  background-color: #ffffff;
+  border-color: #cccccc;
+}
+
+.react-kanban-column-header__button:hover,
+.react-kanban-column-header__button:focus,
+.react-kanban-column-header__button:active {
+  background-color: #e6e6e6;
+}
+
+.react-kanban-column-adder-button {
+  border: 2px dashed #eee;
+  height: 132px;
+  margin: 5px;
+}
+
+.react-kanban-column-adder-button:hover {
+  cursor: pointer;
 }

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

@@ -1,107 +1,121 @@
-// Function to sort an array of objects by parentId
 import { groupBy } from "lodash";
 
 const sortByParentId = (arr) => {
+  // return arr.reduce((accumulator, currentValue) => {
+  //   //Find the parent item.
+  //   let item = accumulator.find((x) => x.id === currentValue.kanbanparent);
+  //   //Get index of parent item
+  //   let index = accumulator.indexOf(item);
+
+  //   index = index !== -1 ? index + 1 : 0;
+  //   accumulator.splice(index, 0, currentValue);
+  //   return accumulator;
+  // }, []);
+
   let parentId = "-1";
   const sortedList = [];
-  const byParentsIdsList = groupBy(arr, "kanbanparent");
+  const byParentsIdsList = groupBy(arr, "kanbanparent"); // Create a new array with objects indexed by parentId
+  //console.log("sortByParentId -> byParentsIdsList", byParentsIdsList);
 
   while (byParentsIdsList[parentId]) {
-    sortedList.push(...byParentsIdsList[parentId]);
-    parentId = byParentsIdsList[parentId][byParentsIdsList[parentId].length - 1].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"]) {
-    sortedList.push(...byParentsIdsList["null"]);
-  }
+  if (byParentsIdsList["null"]) byParentsIdsList["null"].map((i) => sortedList.push(i));
 
-  // Ensure all items are included in the sorted list
+  //Validate that the 2 arrays are of the same length and no children are missing.
   if (arr.length !== sortedList.length) {
-    arr.forEach((origItem) => {
-      if (!sortedList.some((s) => s.id === origItem.id)) {
+    arr.map((origItem) => {
+      if (!!!sortedList.find((s) => s.id === origItem.id)) {
         sortedList.push(origItem);
+        console.log("DATA CONSISTENCY ERROR: ", origItem.ro_number);
       }
+      return 1;
     });
   }
 
   return sortedList;
 };
 
-// Function to create board data based on statuses and jobs, with optional filtering
-export const createBoardData = ({ statuses, data, filter, cardSettings }) => {
-  const { search, employeeId, alert } = filter;
+export const createBoardData = (AllStatuses, Jobs, filter) => {
+  const { search, employeeId } = filter;
+  const boardLanes = {
+    columns: AllStatuses.map((s) => {
+      return {
+        id: s,
+        title: s,
+        cards: []
+      };
+    })
+  };
 
-  const lanes = statuses.map((status) => ({
-    id: status,
-    title: status,
-    cards: []
-  }));
+  const filteredJobs =
+    (search === "" || !search) && !employeeId
+      ? Jobs
+      : Jobs.filter((j) => {
+          let include = false;
+          if (search && search !== "") {
+            include = CheckSearch(search, j);
+          }
 
-  let filteredJobs =
-    (search === "" || !search) && !employeeId ? data : data.filter((job) => checkFilter(search, employeeId, job));
+          if (!!employeeId) {
+            include =
+              include ||
+              j.employee_body === employeeId ||
+              j.employee_prep === employeeId ||
+              j.employee_csr === employeeId ||
+              j.employee_refinish === employeeId;
+          }
 
-  // Filter jobs by selectedMdInsCos if it has values
-  if (cardSettings?.selectedMdInsCos?.length > 0) {
-    filteredJobs = filteredJobs.filter((job) => cardSettings.selectedMdInsCos.includes(job.ins_co_nm));
-  }
+          return include;
+        });
 
-  // Filter jobs by selectedEstimators if it has values
-  if (cardSettings?.selectedEstimators?.length > 0) {
-    filteredJobs = filteredJobs.filter((job) =>
-      cardSettings.selectedEstimators.includes(`${job.est_ct_fn} ${job.est_ct_ln}`)
-    );
-  }
+  const DataGroupedByStatus = groupBy(filteredJobs, (d) => d.status);
 
-  // Filter jobs by alert if alert filter is true
-  if (alert) {
-    filteredJobs = filteredJobs.filter((job) => job.production_vars?.alert);
-  }
-
-  const DataGroupedByStatus = groupBy(filteredJobs, "status");
-
-  Object.keys(DataGroupedByStatus).forEach((statusGroupKey) => {
+  Object.keys(DataGroupedByStatus).map((statusGroupKey) => {
     try {
-      const lane = lanes.find((l) => l.id === statusGroupKey);
-      if (!lane) return;
-
-      lane.cards = sortByParentId(DataGroupedByStatus[statusGroupKey]).map((job) => {
-        const { id, title, description, due_date, ...metadata } = job;
-        return {
-          id,
-          title,
-          description,
-          label: due_date || "",
-          metadata
-        };
-      });
+      const needle = boardLanes.columns.find((l) => l.id === statusGroupKey);
+      if (!needle?.cards) return null;
+      needle.cards = sortByParentId(DataGroupedByStatus[statusGroupKey]);
     } catch (error) {
-      console.error("Error while creating board card", error);
+      console.log("Error while creating board card", error);
     }
+    return null;
   });
 
-  return { lanes };
+  return boardLanes;
 };
 
-// Function to check if a job matches the search and/or employeeId filter
-const checkFilter = (search, employeeId, job) => {
-  const lowerSearch = search?.toLowerCase() ?? "";
-
-  const matchesSearch =
-    lowerSearch &&
-    [
-      job.ro_number,
-      job.ownr_fn,
-      job.ownr_co_nm,
-      job.ownr_ln,
-      job.status,
-      job.v_make_desc,
-      job.v_model_desc,
-      job.clm_no,
-      job.plate_no
-    ].some((field) => field?.toLowerCase().includes(lowerSearch));
-
-  const matchesEmployeeId =
-    employeeId && [job.employee_body, job.employee_prep, job.employee_csr, job.employee_refinish].includes(employeeId);
-
-  return matchesSearch || matchesEmployeeId;
+const CheckSearch = (search, job) => {
+  return (
+    (job.ro_number || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.ownr_fn || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.ownr_co_nm || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.ownr_ln || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.status || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.v_make_desc || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.v_model_desc || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.clm_no || "").toLowerCase().includes(search.toLowerCase()) ||
+    (job.plate_no || "").toLowerCase().includes(search.toLowerCase())
+  );
 };
+
+// export const updateBoardOnMove = (board, card, source, destination) => {
+//   //Slice from source
+
+//   const sourceCardList = board.columns.find((x) => x.id === source.fromColumnId)
+//     .cards;
+//   sourceCardList.slice(source.fromPosition, 0);
+
+//   //Splice into destination.
+//   const destCardList = board.columns.find(
+//     (x) => x.id === destination.toColumnId
+//   ).cards;
+//   console.log("updateBoardOnMove -> destCardList", destCardList);
+
+//   destCardList.splice(destination.toPosition, 0, card);
+//   console.log("updateBoardOnMove -> destCardList", destCardList);
+//   console.log("board", board);
+//   return board;
+// };

client/src/components/production-board-kanban/settings/FilterSettings.jsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { Card, Form, Select } from "antd";
-import { useTranslation } from "react-i18next";
-import PropTypes from "prop-types";
-
-const FilterSettings = ({
-  selectedMdInsCos,
-  setSelectedMdInsCos,
-  selectedEstimators,
-  setSelectedEstimators,
-  setHasChanges,
-  bodyshop,
-  data
-}) => {
-  const { t } = useTranslation();
-
-  const extractNames = (source, firstNameKey, lastNameKey) =>
-    source.map((item) => ({
-      firstName: item[firstNameKey],
-      lastName: item[lastNameKey]
-    }));
-
-  const bodyshopNames = extractNames(bodyshop.md_estimators, "est_ct_fn", "est_ct_ln");
-  const dataNames = extractNames(data, "est_ct_fn", "est_ct_ln");
-
-  const combinedNames = [...bodyshopNames, ...dataNames];
-
-  const uniqueNames = Array.from(
-    new Map(combinedNames.map((item) => [`${item.firstName} ${item.lastName}`, item])).values()
-  );
-
-  return (
-    <Card title={t("production.settings.filters_title")}>
-      <Form.Item label={t("production.settings.filters.md_ins_cos")}>
-        <Select
-          mode="multiple"
-          placeholder={t("production.settings.filters.md_ins_cos")}
-          value={selectedMdInsCos}
-          onChange={(value) => {
-            setSelectedMdInsCos(value);
-            setHasChanges(true);
-          }}
-          options={bodyshop.md_ins_cos.map((item) => ({
-            value: item.name,
-            label: item.name
-          }))}
-        />
-      </Form.Item>
-      <Form.Item label={t("production.settings.filters.md_estimators")}>
-        <Select
-          mode="multiple"
-          placeholder={t("production.settings.filters.md_estimators")}
-          value={selectedEstimators}
-          onChange={(value) => {
-            setSelectedEstimators(value);
-            setHasChanges(true);
-          }}
-          options={uniqueNames.map((item) => {
-            const name = `${item.firstName} ${item.lastName}`.trim();
-            return {
-              value: name,
-              label: name
-            };
-          })}
-        />
-      </Form.Item>
-    </Card>
-  );
-};
-
-FilterSettings.propTypes = {
-  selectedMdInsCos: PropTypes.array.isRequired,
-  setSelectedMdInsCos: PropTypes.func.isRequired,
-  setHasChanges: PropTypes.func.isRequired,
-  selectedEstimators: PropTypes.array.isRequired,
-  setSelectedEstimators: PropTypes.func,
-  bodyshop: PropTypes.object.isRequired,
-  data: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default FilterSettings;

client/src/components/production-board-kanban/settings/InformationSettings.jsx

@@ -1,38 +0,0 @@
-import { Card, Checkbox, Col, Form, Row } from "antd";
-import React from "react";
-import PropTypes from "prop-types";
-
-const InformationSettings = ({ t }) => (
-  <Card title={t("production.settings.information")}>
-    <Row gutter={[16, 16]}>
-      {[
-        "model_info",
-        "ownr_nm",
-        "clm_no",
-        "ins_co_nm",
-        "employeeassignments",
-        "actual_in",
-        "scheduled_completion",
-        "ats",
-        "production_note",
-        "sublets",
-        "partsstatus",
-        "estimator",
-        "subtotal",
-        "tasks"
-      ].map((item) => (
-        <Col span={4} key={item}>
-          <Form.Item name={item} valuePropName="checked">
-            <Checkbox>{t(`production.labels.${item}`)}</Checkbox>
-          </Form.Item>
-        </Col>
-      ))}
-    </Row>
-  </Card>
-);
-
-InformationSettings.propTypes = {
-  t: PropTypes.func.isRequired
-};
-
-export default InformationSettings;

client/src/components/production-board-kanban/settings/LayoutSettings.jsx

@@ -1,71 +0,0 @@
-import { Card, Col, Form, Radio, Row } from "antd";
-import React from "react";
-import PropTypes from "prop-types";
-
-const LayoutSettings = ({ t }) => (
-  <Card title={t("production.settings.layout")}>
-    <Row gutter={[16, 16]}>
-      {[
-        {
-          name: "orientation",
-          label: t("production.labels.orientation"),
-          options: [
-            { value: true, label: t("production.labels.vertical") },
-            { value: false, label: t("production.labels.horizontal") }
-          ]
-        },
-        {
-          name: "cardSize",
-          label: t("production.labels.card_size"),
-          options: [
-            { value: "small", label: t("production.options.small") },
-            { value: "medium", label: t("production.options.medium") },
-            { value: "large", label: t("production.options.large") }
-          ]
-        },
-        {
-          name: "compact",
-          label: t("production.labels.compact"),
-          options: [
-            { value: true, label: t("production.labels.tall") },
-            { value: false, label: t("production.labels.wide") }
-          ]
-        },
-        {
-          name: "cardcolor",
-          label: t("production.labels.cardcolor"),
-          options: [
-            { value: true, label: t("production.labels.on") },
-            { value: false, label: t("production.labels.off") }
-          ]
-        },
-        {
-          name: "kiosk",
-          label: t("production.labels.kiosk_mode"),
-          options: [
-            { value: true, label: t("production.labels.on") },
-            { value: false, label: t("production.labels.off") }
-          ]
-        }
-      ].map(({ name, label, options }) => (
-        <Col span={4} key={name}>
-          <Form.Item name={name} label={label}>
-            <Radio.Group>
-              {options.map((option) => (
-                <Radio.Button key={option.value.toString()} value={option.value}>
-                  {option.label}
-                </Radio.Button>
-              ))}
-            </Radio.Group>
-          </Form.Item>
-        </Col>
-      ))}
-    </Row>
-  </Card>
-);
-
-LayoutSettings.propTypes = {
-  t: PropTypes.func.isRequired
-};
-
-export default LayoutSettings;

client/src/components/production-board-kanban/settings/StatisticsSettings.jsx

@@ -1,59 +0,0 @@
-import { DragDropContext, Draggable, Droppable } from "../trello-board/dnd/lib/index.js";
-import { statisticsItems } from "./defaultKanbanSettings.js";
-import { Card, Checkbox, Form } from "antd";
-import React from "react";
-import PropTypes from "prop-types";
-
-const StatisticsSettings = ({ t, statisticsOrder, setStatisticsOrder, setHasChanges }) => {
-  const onDragEnd = (result) => {
-    if (!result.destination) return;
-    const newOrder = Array.from(statisticsOrder);
-    const [movedItem] = newOrder.splice(result.source.index, 1);
-    newOrder.splice(result.destination.index, 0, movedItem);
-    setStatisticsOrder(newOrder);
-    setHasChanges(true);
-  };
-
-  return (
-    <Card title={t("production.settings.statistics_title")}>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable direction="grid" droppableId="statistics">
-          {(provided) => (
-            <div
-              {...provided.droppableProps}
-              ref={provided.innerRef}
-              style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}
-            >
-              {statisticsOrder.map((itemId, index) => {
-                const item = statisticsItems.find((stat) => stat.id === itemId);
-                return (
-                  <Draggable key={itemId} draggableId={itemId.toString()} index={index}>
-                    {(provided) => (
-                      <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                        <Card styles={{ body: { padding: "5px" } }} style={{ marginBottom: 8, flex: "0 1 auto" }}>
-                          <Form.Item style={{ marginBottom: 0 }} name={item.name} valuePropName="checked">
-                            <Checkbox>{t(`production.settings.statistics.${item.label}`)}</Checkbox>
-                          </Form.Item>
-                        </Card>
-                      </div>
-                    )}
-                  </Draggable>
-                );
-              })}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-    </Card>
-  );
-};
-
-StatisticsSettings.propTypes = {
-  t: PropTypes.func.isRequired,
-  statisticsOrder: PropTypes.arrayOf(PropTypes.number).isRequired,
-  setStatisticsOrder: PropTypes.func.isRequired,
-  setHasChanges: PropTypes.func.isRequired
-};
-
-export default StatisticsSettings;

client/src/components/production-board-kanban/settings/defaultKanbanSettings.js

@@ -1,69 +0,0 @@
-const statisticsItems = [
-  { id: 0, name: "totalHrs", label: "total_hours_in_production" },
-  { id: 1, name: "totalAmountInProduction", label: "total_amount_in_production" },
-  { id: 2, name: "totalLAB", label: "total_lab_in_production" },
-  { id: 3, name: "totalLAR", label: "total_lar_in_production" },
-  { id: 4, name: "jobsInProduction", label: "jobs_in_production" },
-  { id: 5, name: "totalHrsOnBoard", label: "total_hours_on_board" },
-  { id: 6, name: "totalAmountOnBoard", label: "total_amount_on_board" },
-  { id: 7, name: "totalLABOnBoard", label: "total_lab_on_board" },
-  { id: 8, name: "totalLAROnBoard", label: "total_lar_on_board" },
-  { id: 9, name: "jobsOnBoard", label: "total_jobs_on_board" },
-  { id: 10, name: "tasksOnBoard", label: "tasks_on_board" },
-  { id: 11, name: "tasksInProduction", label: "tasks_in_production" }
-];
-
-const defaultKanbanSettings = {
-  ats: true,
-  clm_no: true,
-  compact: false,
-  ownr_nm: true,
-  sublets: true,
-  ins_co_nm: true,
-  production_note: true,
-  employeeassignments: true,
-  scheduled_completion: true,
-  cardcolor: false,
-  orientation: false,
-  tasks: false,
-  cardSize: "small",
-  model_info: true,
-  kiosk: false,
-  totalHrs: true,
-  totalAmountInProduction: false,
-  totalLAB: true,
-  totalLAR: true,
-  jobsInProduction: true,
-  totalHrsOnBoard: false,
-  totalLABOnBoard: false,
-  totalLAROnBoard: false,
-  jobsOnBoard: false,
-  tasksOnBoard: false,
-  tasksInProduction: false,
-  totalAmountOnBoard: true,
-  estimator: false,
-  subtotal: false,
-  statisticsOrder: statisticsItems.map((item) => item.id),
-  selectedMdInsCos: [],
-  selectedEstimators: []
-};
-
-const defaultFilters = { search: "", employeeId: null, alert: false };
-
-const mergeWithDefaults = (settings) => {
-  // Create a new object that starts with the default settings
-  const mergedSettings = { ...defaultKanbanSettings };
-
-  // Override with the provided settings, if any
-  if (settings) {
-    for (const key in settings) {
-      if (settings.hasOwnProperty(key)) {
-        mergedSettings[key] = settings[key];
-      }
-    }
-  }
-
-  return mergedSettings;
-};
-
-export { defaultKanbanSettings, statisticsItems, mergeWithDefaults, defaultFilters };

client/src/components/production-board-kanban/settings/production-board-kanban.settings.component.jsx

@@ -1,169 +0,0 @@
-import { useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, notification, Popover, Row, Tabs } from "antd";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { UPDATE_KANBAN_SETTINGS } from "../../../graphql/user.queries.js";
-import { defaultKanbanSettings, mergeWithDefaults } from "./defaultKanbanSettings.js";
-import LayoutSettings from "./LayoutSettings.jsx";
-import InformationSettings from "./InformationSettings.jsx";
-import StatisticsSettings from "./StatisticsSettings.jsx";
-import FilterSettings from "./FilterSettings.jsx";
-import PropTypes from "prop-types";
-import { isFunction } from "lodash";
-
-function ProductionBoardKanbanSettings({ associationSettings, parentLoading, bodyshop, data, onSettingsChange }) {
-  const [form] = Form.useForm();
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [hasChanges, setHasChanges] = useState(false);
-  const [statisticsOrder, setStatisticsOrder] = useState(defaultKanbanSettings.statisticsOrder);
-  const [selectedMdInsCos, setSelectedMdInsCos] = useState(defaultKanbanSettings.selectedMdInsCos);
-  const [selectedEstimators, setSelectedEstimators] = useState(defaultKanbanSettings.selectedEstimators);
-
-  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    if (associationSettings?.kanban_settings) {
-      const finalSettings = mergeWithDefaults(associationSettings.kanban_settings);
-      form.setFieldsValue(finalSettings);
-      setStatisticsOrder(finalSettings.statisticsOrder);
-      setSelectedMdInsCos(finalSettings.selectedMdInsCos);
-      setSelectedEstimators(finalSettings.selectedEstimators);
-    }
-  }, [form, associationSettings]);
-
-  const handleFinish = async (values) => {
-    setLoading(true);
-    parentLoading(true);
-
-    const result = await updateKbSettings({
-      variables: {
-        id: associationSettings?.id,
-        ks: {
-          ...associationSettings.kanban_settings,
-          ...values,
-          statisticsOrder,
-          selectedMdInsCos,
-          selectedEstimators
-        }
-      }
-    });
-
-    if (result.errors) {
-      notification.open({
-        type: "error",
-        message: t("production.errors.settings", {
-          error: JSON.stringify(result.errors)
-        })
-      });
-    }
-
-    setOpen(false);
-    setLoading(false);
-    parentLoading(false);
-
-    if (onSettingsChange && isFunction(onSettingsChange)) {
-      onSettingsChange(values);
-    }
-
-    setHasChanges(false);
-  };
-
-  const handleValuesChange = () => setHasChanges(true);
-
-  const handleRestoreDefaults = () => {
-    form.setFieldsValue({
-      ...defaultKanbanSettings,
-      statisticsOrder: defaultKanbanSettings.statisticsOrder
-    });
-    setStatisticsOrder(defaultKanbanSettings.statisticsOrder);
-    setSelectedMdInsCos(defaultKanbanSettings.selectedMdInsCos);
-    setSelectedEstimators(defaultKanbanSettings.selectedEstimators);
-    setHasChanges(true);
-  };
-
-  const overlay = (
-    <Card style={{ minWidth: "80vw" }}>
-      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
-        <Tabs
-          defaultActiveKey="1"
-          items={[
-            {
-              key: "1",
-              label: t("production.settings.layout"),
-              children: <LayoutSettings t={t} />
-            },
-            {
-              key: "2",
-              label: t("production.settings.information"),
-              children: <InformationSettings t={t} />
-            },
-            {
-              key: "3",
-              label: t("production.settings.statistics_title"),
-              children: (
-                <StatisticsSettings
-                  t={t}
-                  statisticsOrder={statisticsOrder}
-                  setStatisticsOrder={setStatisticsOrder}
-                  setHasChanges={setHasChanges}
-                />
-              )
-            },
-            {
-              key: "4",
-              label: t("production.settings.filters_title"),
-              children: (
-                <FilterSettings
-                  selectedMdInsCos={selectedMdInsCos}
-                  setSelectedMdInsCos={setSelectedMdInsCos}
-                  selectedEstimators={selectedEstimators}
-                  setSelectedEstimators={setSelectedEstimators}
-                  setHasChanges={setHasChanges}
-                  bodyshop={bodyshop}
-                  data={data}
-                />
-              )
-            }
-          ]}
-        />
-        <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
-          <Col span={8}>
-            <Button block onClick={() => setOpen(false)}>
-              {t("general.actions.cancel")}
-            </Button>
-          </Col>
-          <Col span={8}>
-            <Button block onClick={handleRestoreDefaults}>
-              {t("general.actions.defaults")}
-            </Button>
-          </Col>
-          <Col span={8}>
-            <Button block onClick={form.submit} loading={loading} type="primary" disabled={!hasChanges}>
-              {t("general.actions.save")}
-            </Button>
-          </Col>
-        </Row>
-      </Form>
-    </Card>
-  );
-
-  return (
-    <Popover content={overlay} open={open} placement="topRight">
-      <Button loading={loading} onClick={() => setOpen(!open)}>
-        {t("production.settings.board_settings")}
-      </Button>
-    </Popover>
-  );
-}
-
-ProductionBoardKanbanSettings.propTypes = {
-  associationSettings: PropTypes.object,
-  parentLoading: PropTypes.func.isRequired,
-  bodyshop: PropTypes.object.isRequired,
-  onSettingsChange: PropTypes.func,
-  data: PropTypes.array
-};
-
-export default ProductionBoardKanbanSettings;

client/src/components/production-board-kanban/trello-board/components/HeightMemoryWrapper.jsx

@@ -1,83 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
-
-/**
- * Height Memory Wrapper
- * @param children
- * @param maxHeight
- * @param setMaxHeight
- * @param override - Override the minHeight style from being set
- * @param itemKey - Unique key to preserve height for items with the same key
- * @returns {JSX.Element}
- */
-const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, itemKey }) => {
-  const ref = useRef(null);
-  const heightMapRef = useRef(new Map());
-  const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight);
-  const [devicePixelRatio, setDevicePixelRatio] = useState(window.devicePixelRatio);
-
-  useEffect(() => {
-    const currentRef = ref.current;
-    const updateHeight = () => {
-      const currentHeight = currentRef?.firstChild?.clientHeight || 0;
-      if (itemKey) {
-        const keyHeight = heightMapRef.current.get(itemKey) || 0;
-        const newHeight = Math.max(keyHeight, currentHeight);
-        heightMapRef.current.set(itemKey, newHeight);
-        setLocalMaxHeight(newHeight);
-      } else {
-        setLocalMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
-      }
-      setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
-    };
-
-    const resizeObserver = new ResizeObserver(updateHeight);
-
-    if (currentRef?.firstChild) {
-      resizeObserver.observe(currentRef.firstChild);
-    }
-
-    const resizeHandler = () => {
-      if (Math.abs(window.devicePixelRatio - devicePixelRatio) > 0.1) {
-        // Threshold to detect significant zoom level change
-        heightMapRef.current.clear(); // Clearing the height memory as zoom level has changed significantly
-        setLocalMaxHeight(0); // Reset local max height
-        setDevicePixelRatio(window.devicePixelRatio); // Update the recorded device pixel ratio
-      }
-      updateHeight();
-    };
-
-    window.addEventListener("resize", resizeHandler);
-
-    return () => {
-      if (currentRef?.firstChild) {
-        resizeObserver.unobserve(currentRef.firstChild);
-      }
-      window.removeEventListener("resize", resizeHandler);
-    };
-  }, [itemKey, setMaxHeight, devicePixelRatio]);
-
-  useEffect(() => {
-    if (itemKey && heightMapRef.current.has(itemKey)) {
-      setLocalMaxHeight(heightMapRef.current.get(itemKey));
-    }
-  }, [itemKey]);
-
-  const style = override ? {} : { minHeight: localMaxHeight };
-
-  return (
-    <div ref={ref} style={style}>
-      {children}
-    </div>
-  );
-};
-
-HeightMemoryWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-  maxHeight: PropTypes.number.isRequired,
-  setMaxHeight: PropTypes.func.isRequired,
-  override: PropTypes.bool,
-  itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-
-export default HeightMemoryWrapper;

client/src/components/production-board-kanban/trello-board/components/HeightPreservingItem.jsx

@@ -1,24 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-const HeightPreservingItem = ({ children, ...props }) => {
-  const [size, setSize] = useState(0);
-  const knownSize = props["data-known-size"];
-  useEffect(() => {
-    setSize((prevSize) => {
-      return knownSize === 0 ? prevSize : knownSize;
-    });
-  }, [setSize, knownSize]);
-  return (
-    <div
-      {...props}
-      className="height-preserving-container"
-      style={{
-        "--child-height": `${size}px`
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default HeightPreservingItem;

client/src/components/production-board-kanban/trello-board/components/ItemComponent.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-const ItemComponent = ({ children, maxCardHeight, maxCardWidth, ...props }) => (
-  <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
-    {children}
-  </div>
-);
-
-export default ItemComponent;

client/src/components/production-board-kanban/trello-board/components/ItemWrapper.jsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-const ItemWrapper = React.memo(({ children, ...props }) => (
-  <div {...props} className="item-wrapper">
-    {children}
-  </div>
-));
-
-export default ItemWrapper;

client/src/components/production-board-kanban/trello-board/components/LaneFooter.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { LaneFooter } from "../styles/Base.js";
-import { CollapseBtn, ExpandBtn } from "../styles/Elements.js";
-
-const LaneFooterComponent = ({ onClick, collapsed }) => (
-  <LaneFooter className="react-trello-footer" onClick={onClick}>
-    {collapsed ? <ExpandBtn /> : <CollapseBtn />}
-  </LaneFooter>
-);
-
-export default LaneFooterComponent;

client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx

@@ -1,9 +0,0 @@
-import React, { forwardRef } from "react";
-
-const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
-  <div ref={ref} {...props} style={{ ...style }}>
-    {children}
-  </div>
-));
-
-export default ListComponent;

client/src/components/production-board-kanban/trello-board/components/SizeMemoryWrapper.jsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import PropTypes from "prop-types";
-
-const SizeMemoryWrapper = ({ children, maxHeight, setMaxHeight, maxWidth, setMaxWidth }) => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const currentRef = ref.current;
-
-    const updateSize = () => {
-      const currentHeight = currentRef?.firstChild?.clientHeight || 0;
-      const currentWidth = currentRef?.firstChild?.clientWidth || 0;
-      setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight));
-      setMaxWidth((prevWidth) => Math.max(prevWidth, currentWidth));
-    };
-
-    const resizeObserver = new ResizeObserver(updateSize);
-
-    if (currentRef?.firstChild) {
-      resizeObserver.observe(currentRef.firstChild);
-    }
-
-    const handleLoad = () => {
-      if (window.devicePixelRatio < 1) {
-        return; // Do not update width and height
-      }
-      updateSize();
-    };
-
-    window.addEventListener("load", handleLoad);
-
-    return () => {
-      if (currentRef?.firstChild) {
-        resizeObserver.unobserve(currentRef.firstChild);
-      }
-      window.removeEventListener("load", handleLoad);
-    };
-  }, [setMaxHeight, setMaxWidth]);
-
-  return (
-    <div ref={ref} className="size-memory-wrapper" style={{ minHeight: maxHeight, minWidth: maxWidth }}>
-      {children}
-    </div>
-  );
-};
-
-SizeMemoryWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-  maxHeight: PropTypes.number.isRequired,
-  setMaxHeight: PropTypes.func.isRequired,
-  maxWidth: PropTypes.number.isRequired,
-  setMaxWidth: PropTypes.func.isRequired
-};
-
-export default SizeMemoryWrapper;

client/src/components/production-board-kanban/trello-board/controllers/Board.jsx

@@ -1,39 +0,0 @@
-import { BoardContainer } from "../index";
-import { useMemo } from "react";
-import { StyleHorizontal, StyleVertical } from "../styles/Base.js";
-import { cardSizesVertical } from "../styles/Globals.js";
-
-const Board = ({ id, className, orientation, cardSettings, ...additionalProps }) => {
-  const OrientationStyle = useMemo(
-    () => (orientation === "horizontal" ? StyleHorizontal : StyleVertical),
-    [orientation]
-  );
-
-  const gridItemWidth = useMemo(() => {
-    switch (cardSettings?.cardSize) {
-      case "small":
-        return cardSizesVertical.small;
-      case "large":
-        return cardSizesVertical.large;
-      case "medium":
-        return cardSizesVertical.medium;
-      default:
-        return cardSizesVertical.small;
-    }
-  }, [cardSettings]);
-
-  return (
-    <>
-      <OrientationStyle {...{ gridItemWidth }}>
-        <BoardContainer
-          orientation={orientation}
-          cardSettings={cardSettings}
-          {...additionalProps}
-          className="react-trello-board"
-        />
-      </OrientationStyle>
-    </>
-  );
-};
-
-export default Board;