feature/IO-2924-Refactor-Production-Board-For-Sockets - Clear Stage

Signed-off-by: Dave Richer <dave@imexsystems.ca>

.circleci/config.yml

@@ -5,6 +5,7 @@ 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:
@@ -18,6 +19,12 @@ 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:
@@ -33,11 +40,16 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            npm install hasura-cli -g
+            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
             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
@@ -62,6 +74,7 @@ jobs:
           to: "s3://imex-online-production/"
           arguments: "--exclude '*.map'"
 
+
   imex-app-beta-build:
     docker:
       - image: cimg/node:18.18.2
@@ -86,6 +99,12 @@ 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:
@@ -99,7 +118,12 @@ 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
@@ -114,11 +138,16 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            npm install hasura-cli -g
+            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
             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
@@ -143,6 +172,12 @@ 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:
@@ -168,6 +203,12 @@ 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:
@@ -183,10 +224,16 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            npm install hasura-cli -g
+            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
             hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+      - 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:
@@ -212,6 +259,12 @@ 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:
@@ -237,6 +290,12 @@ 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:
@@ -252,10 +311,16 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            npm install hasura-cli -g
+            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
             hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
             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:
@@ -302,7 +367,12 @@ 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:

certs/cert.pem

@@ -0,0 +1,20 @@
+-----BEGIN CERTIFICATE-----
+MIIDWzCCAkOgAwIBAgIUD/QBSAXy/AlJ/cS4DaPWJLpChxgwDQYJKoZIhvcNAQEL
+BQAwPTELMAkGA1UEBhMCQ0ExCzAJBgNVBAgMAk9OMSEwHwYDVQQKDBhJbnRlcm5l
+dCBXaWRnaXRzIFB0eSBMdGQwHhcNMjQwOTA5MTU0MjA1WhcNMjUwOTA5MTU0MjA1
+WjA9MQswCQYDVQQGEwJDQTELMAkGA1UECAwCT04xITAfBgNVBAoMGEludGVybmV0
+IFdpZGdpdHMgUHR5IEx0ZDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB
+AKSd0l7NJCNBwvtPU+dVPQkteg0AfC3sGqRnZMQteCRVa2oIgC4NoF3A9BK/yHbF
+ZF25OnXTck5vzc8yb3v73ndfTD9ASKNoiaZE84/GFBsxqlKR8cs0qVwzuAsdijMv
+vlMPNlMRyE1Rb7nR6HXGkPXNyxgMko03NXPkvIje9zRudm0Lf8L4q/hPyPkS7Mrm
+/uQfAAJe+xFcupkEX2XY7r0x1C+z6E8lA1UcuhK3SHdW7CWYqp1vU5/dnnUiXwCa
+GiC6Y1bCJB0pDAVISzy3JUDdINZdiqGR+y8ho3pstChf2mp/76s3N9eG9KA/qaFK
+BrGk2PvCoZ8/Aj1aMsRYFHECAwEAAaNTMFEwHQYDVR0OBBYEFDLJ2fbWP4VUJgOp
+PSs+NGHcVgRmMB8GA1UdIwQYMBaAFDLJ2fbWP4VUJgOpPSs+NGHcVgRmMA8GA1Ud
+EwEB/wQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABfv5ut/y03atq0NMB0jeDY4
+AvW4ukk0k1svyqxFZCw9o7m2lHb/IjmVrZG1Sj4JWrrSv0s02ccb26/t6vazNa5L
+Powe3eyfHgfjTZJmgs8hyeMwKS0wWk/SPuu9JDhIJakiquqD+UVBGkHpP+XYvhDv
+vhS2XRlW+aEjpUmr1oCyyrc6WbzrYRNadqEsn/AxwcMyUbht3Ugjkg+OpidcTIQp
+5lv63waKo6I1vQofzBQ3L7JYsKo8kC0vAP7wkLxvzBii335uZJzzpFYFVOyVNezi
+dJdazPbRYbXz4LjltdEn/SNfRuKX8ZRiN2OSo7OfSrZaMTS87SfCSFJGgQM8Yrk=
+-----END CERTIFICATE-----

certs/key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCkndJezSQjQcL7
+T1PnVT0JLXoNAHwt7BqkZ2TELXgkVWtqCIAuDaBdwPQSv8h2xWRduTp103JOb83P
+Mm97+953X0w/QEijaImmRPOPxhQbMapSkfHLNKlcM7gLHYozL75TDzZTEchNUW+5
+0eh1xpD1zcsYDJKNNzVz5LyI3vc0bnZtC3/C+Kv4T8j5EuzK5v7kHwACXvsRXLqZ
+BF9l2O69MdQvs+hPJQNVHLoSt0h3VuwlmKqdb1Of3Z51Il8AmhogumNWwiQdKQwF
+SEs8tyVA3SDWXYqhkfsvIaN6bLQoX9pqf++rNzfXhvSgP6mhSgaxpNj7wqGfPwI9
+WjLEWBRxAgMBAAECggEAUNpHYlLFxh9dokujPUMreF+Cy/IKDBAkQc2au5RNpyLh
+YDIOqw/8TTAhcTgLQPLQygvZP9f8E7RsVLFD+pSJ/v2qmIJ9au1Edor1Sg+S/oxV
+SLrwFMunx2aLpcH7iAqSI3+cQg7A3+D4zD7iOz6tIl3Su9wo+v073tFhHKTOrEwv
+Qgr9Jf3viIiKV1ym+uQEVQndocfsj46FnFpXTQ2qs7kAF6FgAOLDGfQQwzkiqEBD
+NsqsDmbYIx6foZL+DEz1ZVO2M5B+xxpbNK82KwuQilVpimW8ui4LZHCe+RIFzt9+
+BK6KGlLpSEwTFliivI3nahy18JzskZsfyah0CPZlQQKBgQDVv+A0qIPGvOP3Sx+9
+HyeQCV23SkvvSvw8p8pMB0gvwv63YdJ7N/rJzBGS6YUHFWWZZgEeTgkJ6VJvoe0r
+8JL1el9uSUa7f0eayjmFBOGuzpktNVdIn2Tg7A9MWA4JqPNNC69RMOh86ewGD4J3
+a8Hz2a1bHxAmy/AZt2ukypY6eQKBgQDFJ7kqeOPkRBz9WbALRgVIXo8YWf5di0sQ
+r0HC03GAISHQ725A2IFBPHJWeqj0jaMiIZD0y+Obgp7KAskrJaLfsd7Ug775kFfw
+oUI9UAl6kRuPKvm3BaVAm46SQm+56VsgxTi73YN0NUp75THHZgAJjepF9zSpVJxq
+VY9DjEGruQKBgQCQCpGIatcCol/tUg69X7VFd0pULhkl1J5OMbQ9r9qRdRI5eg5h
+QsQaIQ7mtb8TmvOwf/DY/zVQHI+U8sXlCmW+TwzoQTENQSR7xzMj1LpRFqBaustr
+AR72A537kItFLzll/i3SxOam5uxK2UDOQSuerF4KPdCglGXkrpo3nt3F4QKBgQCa
+RArPAOjQo7tLQfJN3+wiRFsTYtd1uphx5bA/EdOtvj8HjVFnzADXWsTchf3N3UXY
+XwtdgGwIMpys1KEz8a8P+c2x26SDAj7NOmDqOMYx8Xju/WGHpBM6Cn30U6e4gK+d
+ZLSPyzQgqdIuP5hDvbwpvbGiLVw3Ys1BJtGCuSxpgQJ/eHnRiuSi5Zq5jGg+GpA+
+FEEc9NCy772rR+4uzEOqyIwqewffqzSuVWuIsY/8MP3fh+NDxl/mU6cB5QVeD54Z
+JZUKwmpM26muiM6WvVnM4ExPdSGA2+l4pZjby/KKd6F/w0tgZ1jb9Pb2/0vN3qVA
+Y4U4XNTMt2fxUACqiL4SHA==
+-----END PRIVATE KEY-----

client/.env.development.imex

@@ -1,5 +1,5 @@
-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_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/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
@@ -8,7 +8,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX

client/.env.development.promanager

@@ -1,5 +1,5 @@
-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_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/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
@@ -8,7 +8,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=PROMANAGER

client/.env.development.rome

@@ -1,14 +1,15 @@
-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_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/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": "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
 VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA

client/.gitignore

@@ -1,3 +1,4 @@
 
 # Sentry Config File
 .sentryclirc
+/dev-dist

client/cypress.config.js

@@ -12,6 +12,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       return require("./cypress/plugins/index.js")(on, config);
     },
-    baseUrl: "http://localhost:3000"
+    baseUrl: "https://localhost:3000"
   }
 });

client/index.html

@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8"/>
   <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-  <link rel="icon" href="/favicon.png" />
+  <link rel="icon" href="/favicon.png"/>
   <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <link rel="icon" href="/ro-favicon.png" />
+  <link rel="icon" href="/ro-favicon.png"/>
   <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <link rel="icon" href="/pm/pm-favicon.ico" />
+  <link rel="icon" href="/pm/pm-favicon.ico"/>
   <% } %>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#1690ff" />
+  <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="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
@@ -30,7 +30,7 @@
     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" />
+  <meta name="description" content="ImEX Online"/>
   <title>ImEX Online</title>
   <script type="text/javascript">
     window.$crisp = [];
@@ -44,12 +44,13 @@
     })();
   </script>
   <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <meta name="description" content="Rome Online" />
+  <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-->
 
-  <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-->
 
@@ -113,13 +114,13 @@
   
   ></call-us>-->
 
-  <script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
-
+  <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" />
+  <meta name="description" content="ProManager"/>
 
   <% } %>
   <script>
@@ -143,12 +144,14 @@
       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 () {
           for (var o = 0; o < e.length; o++) {
             var r = e[o];

client/package.json

@@ -8,22 +8,22 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
-    "@apollo/client": "^3.11.4",
+    "@ant-design/pro-layout": "^7.20.0",
+    "@apollo/client": "^3.11.8",
     "@emotion/is-prop-valid": "^1.3.0",
-    "@fingerprintjs/fingerprintjs": "^4.4.3",
+    "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.33.1",
+    "@sentry/cli": "^2.36.1",
     "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.12.1",
+    "@splitsoftware/splitio-react": "^1.13.0",
     "@tanem/react-nprogress": "^5.0.51",
     "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "antd": "^5.20.6",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "autosize": "^6.0.1",
-    "axios": "^1.7.4",
+    "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
     "dayjs": "^1.11.12",
@@ -32,12 +32,12 @@
     "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.12.5",
+    "firebase": "^10.13.1",
     "graphql": "^16.9.0",
-    "i18next": "^23.12.3",
+    "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.5",
+    "libphonenumber-js": "^1.11.8",
     "logrocket": "^8.1.2",
     "markerjs2": "^2.32.1",
     "memoize-one": "^6.0.0",
@@ -47,7 +47,7 @@
     "query-string": "^9.1.0",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.13.2",
+    "react-big-calendar": "^1.13.4",
     "react-color": "^2.19.3",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
@@ -58,15 +58,15 @@
     "react-icons": "^5.3.0",
     "react-image-lightbox": "^5.1.4",
     "react-markdown": "^9.0.1",
-    "react-number-format": "^5.4.0",
+    "react-number-format": "^5.4.2",
     "react-popopo": "^2.1.9",
-    "react-product-fruits": "^2.2.6",
+    "react-product-fruits": "^2.2.61",
     "react-redux": "^9.1.2",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.2",
     "react-sticky": "^6.0.3",
     "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.10.1",
+    "react-virtuoso": "^4.10.3",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
@@ -74,9 +74,9 @@
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "socket.io-client": "^4.7.5",
-    "styled-components": "^6.1.12",
+    "styled-components": "^6.1.13",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
     "userpilot": "^1.3.5",
@@ -90,6 +90,9 @@
     "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",
+    "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview",
+    "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview",
+    "preview:promanager": "dotenvx run --env-file=.env.development.promanager -- vite preview",
     "build:test:imex": "env-cmd -f .env.test.imex npm run build",
     "build:test:rome": "env-cmd -f .env.test.rome npm run build",
     "build:test:promanager": "env-cmd -f .env.test.promanager npm run build",
@@ -130,15 +133,16 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.7.0",
+    "@dotenvx/dotenvx": "^1.14.0",
     "@emotion/babel-plugin": "^11.12.0",
-    "@emotion/react": "^11.13.0",
-    "@sentry/webpack-plugin": "^2.22.2",
+    "@emotion/react": "^11.13.3",
+    "@sentry/webpack-plugin": "^2.22.4",
     "@testing-library/cypress": "^10.0.2",
     "browserslist": "^4.23.3",
     "browserslist-to-esbuild": "^2.1.1",
+    "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.13.3",
+    "cypress": "^13.14.2",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
@@ -147,12 +151,12 @@
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.0",
+    "vite": "^5.4.3",
     "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"
+    "vite-plugin-style-import": "^2.0.0",
+    "workbox-window": "^7.1.0"
   }
 }

client/src/App/App.jsx

@@ -18,10 +18,10 @@ 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 { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -108,8 +108,6 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
     return <LoadingSpinner message={t("general.labels.loggingin")} />;
   }
 
-  handleBeta();
-
   if (!online) {
     return (
       <Result
@@ -204,7 +202,9 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           path="/manage/*"
           element={
             <ErrorBoundary>
-              <PrivateRoute isAuthorized={currentUser.authorized} />
+              <SocketProvider bodyshop={bodyshop}>
+                <PrivateRoute isAuthorized={currentUser.authorized} />
+              </SocketProvider>
             </ErrorBoundary>
           }
         >
@@ -214,7 +214,9 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           path="/tech/*"
           element={
             <ErrorBoundary>
-              <PrivateRoute isAuthorized={currentUser.authorized} />
+              <SocketProvider bodyshop={bodyshop}>
+                <PrivateRoute isAuthorized={currentUser.authorized} />
+              </SocketProvider>
             </ErrorBoundary>
           }
         >

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

@@ -13,6 +13,7 @@ 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";
 
@@ -170,13 +171,22 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       extra={
         <Space wrap>
           {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
-            <JobsExportAllButton
-              jobIds={selectedJobs}
-              disabled={transInProgress || selectedJobs.length === 0}
-              loadingCallback={setTransInProgress}
-              completedCallback={setSelectedJobs}
-              refetch={refetch}
-            />
+            <>
+              <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}
+              />
+            </>
           )}
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
           <Input.Search

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

@@ -14,7 +14,6 @@ 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";
@@ -22,6 +21,7 @@ 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
@@ -276,7 +276,7 @@ export function BillFormComponent({
             })
           ]}
         >
-          <FormDatePicker disabled={disabled} />
+          <DateTimePicker isDateOnly disabled={disabled} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.is_credit_memo")}

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
                     }
                   ]}
                 >
-                  <FormDatePicker />
+                  <DateTimePicker isDateOnly />
                 </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">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
       </LayoutFormRow>
       <ContractsRatesChangeButton form={form} />

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

@@ -10,16 +10,12 @@ 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();
 
@@ -161,16 +157,16 @@ export default function CourtesyCarCreateFormComponent({
           <Input />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.purchasedate")} name="purchasedate">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.servicestartdate")} name="servicestartdate">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.serviceenddate")} name="serviceenddate">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.leaseenddate")} name="leaseenddate">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
       </LayoutFormRow>
 
@@ -228,7 +224,7 @@ export default function CourtesyCarCreateFormComponent({
         </div>
         <div>
           <Form.Item label={t("courtesycars.fields.nextservicedate")} name="nextservicedate">
-            <FormDatePicker />
+            <DateTimePicker isDateOnly />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}>
             {() => {
@@ -260,7 +256,7 @@ export default function CourtesyCarCreateFormComponent({
         </Form.Item>
         <div>
           <Form.Item label={t("courtesycars.fields.registrationexpires")} name="registrationexpires">
-            <FormDatePicker />
+            <DateTimePicker isDateOnly />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.registrationexpires !== c.registrationexpires}>
             {() => {
@@ -293,7 +289,7 @@ export default function CourtesyCarCreateFormComponent({
               }
             ]}
           >
-            <FormDatePicker />
+            <DateTimePicker isDateOnly />
           </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 FormDatePicker from "../form-date-picker/form-date-picker.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function CourtesyCarReturnModalComponent() {
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ export default function CourtesyCarReturnModalComponent() {
           }
         ]}
       >
-        <FormDatePicker />
+        <DateTimePicker isDateOnly />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.kmend")}

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -1,62 +1,77 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { pageLimit } from "../../utils/config";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx"; // Import SocketContext
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+export default connect(mapStateToProps)(DmsAllocationsSummaryAp);
 
-export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummaryAp);
-
-export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
+export function DmsAllocationsSummaryAp({ bodyshop, billids, title }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
+  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
-    socket.on("ap-export-success", (billid) => {
+    if (!socket) return;
+
+    const handleSuccess = async (billid) => {
       setAllocationsSummary((allocationsSummary) =>
         allocationsSummary.map((a) => {
           if (a.billid !== billid) return a;
           return { ...a, status: "Successful" };
         })
       );
-    });
-    socket.on("ap-export-failure", ({ billid, error }) => {
-      allocationsSummary.map((a) => {
-        if (a.billid !== billid) return a;
-        return { ...a, status: error };
-      });
-    });
 
-    if (socket.disconnected) socket.connect();
-    return () => {
-      socket.removeListener("ap-export-success");
-      socket.removeListener("ap-export-failure");
-      //socket.disconnect();
+      try {
+        await new Promise((resolve, reject) => {
+          socket.emit("clear-dms-session", (response) => {
+            if (response && response.status === "ok") {
+              resolve();
+            } else {
+              reject(new Error("Failed to clear DMS session"));
+            }
+          });
+        });
+      } catch (error) {
+        console.error("Failed to clear DMS session", error);
+      }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    const handleFailure = ({ billid, error }) => {
+      setAllocationsSummary((allocationsSummary) =>
+        allocationsSummary.map((a) => {
+          if (a.billid !== billid) return a;
+          return { ...a, status: error };
+        })
+      );
+    };
+
+    socket.on("ap-export-success", handleSuccess);
+    socket.on("ap-export-failure", handleFailure);
+
+    return () => {
+      socket.off("ap-export-success", handleSuccess);
+      socket.off("ap-export-failure", handleFailure);
+    };
+  }, [socket]);
 
   useEffect(() => {
-    if (socket.connected) {
+    if (socket && socket.connected) {
       socket.emit("pbs-calculate-allocations-ap", billids, (ack) => {
         setAllocationsSummary(ack);
-
         socket.allocationsSummary = ack;
       });
     }
   }, [socket, socket.connected, billids]);
-  console.log(allocationsSummary);
+
   const columns = [
     {
       title: t("general.labels.status"),
@@ -68,35 +83,40 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       dataIndex: ["Posting", "Reference"],
       key: "reference"
     },
-
     {
       title: t("jobs.fields.dms.lines"),
       dataIndex: "Lines",
       key: "Lines",
       render: (text, record) => (
         <table style={{ tableLayout: "auto", width: "100%" }}>
-          <tr>
-            <th>{t("bills.fields.invoice_number")}</th>
-            <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
-            <th>{t("jobs.fields.dms.amount")}</th>
-          </tr>
-          {record.Posting.Lines.map((l, idx) => (
-            <tr key={idx}>
-              <td>{l.InvoiceNumber}</td>
-              <td>{l.Account}</td>
-              <td>{l.Amount}</td>
+          <thead>
+            <tr>
+              <th>{t("bills.fields.invoice_number")}</th>
+              <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
+              <th>{t("jobs.fields.dms.amount")}</th>
             </tr>
-          ))}
+          </thead>
+          <tbody>
+            {record.Posting.Lines.map((l, idx) => (
+              <tr key={idx}>
+                <td>{l.InvoiceNumber}</td>
+                <td>{l.Account}</td>
+                <td>{l.Amount}</td>
+              </tr>
+            ))}
+          </tbody>
         </table>
       )
     }
   ];
 
   const handleFinish = async (values) => {
-    socket.emit(`pbs-export-ap`, {
-      billids,
-      txEnvelope: values
-    });
+    if (socket) {
+      socket.emit("pbs-export-ap", {
+        billids,
+        txEnvelope: values
+      });
+    }
   };
 
   return (
@@ -105,7 +125,9 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       extra={
         <Button
           onClick={() => {
-            socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
+            if (socket) {
+              socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
+            }
           }}
         >
           <SyncOutlined />
@@ -124,12 +146,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
           name="journal"
           label={t("jobs.fields.dms.journal")}
           initialValue={bodyshop.cdk_configuration && bodyshop.cdk_configuration.default_journal}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
+          rules={[{ required: true }]}
         >
           <Input />
         </Form.Item>

client/src/components/dms-customer-selector/dms-customer-selector.component.jsx

@@ -1,37 +1,51 @@
 import { Button, Checkbox, Col, Table } from "antd";
-import React, { useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { socket } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { alphaSort } from "../../utils/sorters";
+import SocketContext from "../../contexts/SocketIO/socketContext"; // Import Socket Context
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = (dispatch) => ({});
+
 export default connect(mapStateToProps, mapDispatchToProps)(DmsCustomerSelector);
 
 export function DmsCustomerSelector({ bodyshop }) {
   const { t } = useTranslation();
-  const [customerList, setcustomerList] = useState([]);
+  const { socket } = useContext(SocketContext); // Use Socket Context
+  const [customerList, setCustomerList] = useState([]);
   const [open, setOpen] = useState(false);
   const [selectedCustomer, setSelectedCustomer] = useState(null);
   const [dmsType, setDmsType] = useState("cdk");
 
-  socket.on("cdk-select-customer", (customerList, callback) => {
-    setOpen(true);
-    setDmsType("cdk");
-    setcustomerList(customerList);
-  });
-  socket.on("pbs-select-customer", (customerList, callback) => {
-    setOpen(true);
-    setDmsType("pbs");
-    setcustomerList(customerList);
-  });
+  useEffect(() => {
+    if (socket) {
+      const handleCdkSelectCustomer = (customerList) => {
+        setOpen(true);
+        setDmsType("cdk");
+        setCustomerList(customerList);
+      };
+
+      const handlePbsSelectCustomer = (customerList) => {
+        setOpen(true);
+        setDmsType("pbs");
+        setCustomerList(customerList);
+      };
+
+      socket.on("cdk-select-customer", handleCdkSelectCustomer);
+      socket.on("pbs-select-customer", handlePbsSelectCustomer);
+
+      // Clean up listeners on unmount
+      return () => {
+        socket.off("cdk-select-customer", handleCdkSelectCustomer);
+        socket.off("pbs-select-customer", handlePbsSelectCustomer);
+      };
+    }
+  }, [socket]);
 
   const onUseSelected = () => {
     setOpen(false);
@@ -69,17 +83,11 @@ export function DmsCustomerSelector({ bodyshop }) {
       key: "name1",
       sorter: (a, b) => alphaSort(a.name1 && a.name1.fullName, b.name1 && b.name1.fullName)
     },
-
     {
       title: t("jobs.fields.dms.address"),
-      //dataIndex: ["name2", "fullName"],
       key: "address",
-      render: (record, value) =>
-        `${
-          record.address && record.address.addressLine && record.address.addressLine[0]
-        }, ${record.address && record.address.city} ${
-          record.address && record.address.stateOrProvince
-        } ${record.address && record.address.postalCode}`
+      render: (record) =>
+        `${record.address?.addressLine?.[0]}, ${record.address?.city} ${record.address?.stateOrProvince} ${record.address?.postalCode}`
     }
   ];
 
@@ -95,15 +103,15 @@ export function DmsCustomerSelector({ bodyshop }) {
       sorter: (a, b) => alphaSort(a.LastName, b.LastName),
       render: (text, record) => `${record.FirstName || ""} ${record.LastName || ""}`
     },
-
     {
       title: t("jobs.fields.dms.address"),
       key: "address",
-      render: (record, value) => `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`
+      render: (record) => `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`
     }
   ];
 
   if (!open) return null;
+
   return (
     <Col span={24}>
       <Table
@@ -125,7 +133,6 @@ export function DmsCustomerSelector({ bodyshop }) {
         columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
         rowKey={(record) => (dmsType === "cdk" ? record.id.value : record.ContactId)}
         dataSource={customerList}
-        //onChange={handleTableChange}
         rowSelection={{
           onSelect: (record) => {
             setSelectedCustomer(dmsType === "cdk" ? record.id.value : record.ContactId);

client/src/components/dms-log-events/dms-log-events.component.jsx

@@ -4,11 +4,8 @@ import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
+const mapStateToProps = createStructuredSelector({});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -17,7 +14,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
 
-export function DmsLogEvents({ socket, logs, bodyshop }) {
+export function DmsLogEvents({ logs }) {
   return (
     <Timeline
       pending

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

@@ -24,9 +24,9 @@ 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
@@ -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")}>
-                <FormDatePicker />
+                <DateTimePicker isDateOnly />
               </Form.Item>
             </LayoutFormRow>
             <Space>

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

@@ -4,7 +4,6 @@ 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";
@@ -12,6 +11,7 @@ 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 }) => (
               }
             ]}
           >
-            <FormDatePicker onChange={handleChange} onlyToday aria-label={t("eula.labels.date_accepted")} />
+            <DateTimePicker isDateOnly 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

@@ -1,123 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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,46 +1,105 @@
-import React, { forwardRef } from "react";
-//import DatePicker from "react-datepicker";
-//import "react-datepicker/src/stylesheets/datepicker.scss";
-import { Space, TimePicker } from "antd";
+import { DatePicker } from "antd";
+import PropTypes from "prop-types";
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import dayjs from "../../utils/day";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
-//To be used as a form element only.
+import { fuzzyMatchDate } from "./formats.js";
 
-const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps }, ref) => {
-  // const handleChange = (newDate) => {
-  //   if (value !== newDate && onChange) {
-  //     onChange(newDate);
-  //   }
-  // };
+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]
+  );
 
   return (
-    <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
+    <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"}
         value={value ? dayjs(value) : null}
-        {...(onlyFuture && {
-          disabledDate: (d) => dayjs().isAfter(d)
-        })}
-        onChange={onChange}
-        disableSeconds={true}
-        minuteStep={15}
-        onBlur={onBlur}
-        format="hh:mm a"
+        onChange={handleChange}
+        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
+        onBlur={onBlur || handleBlur}
+        disabledDate={handleDisabledDate}
         {...restProps}
       />
-    </Space>
+    </div>
   );
 };
 
-export default forwardRef(DateTimePicker);
+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);

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

@@ -0,0 +1,63 @@
+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,7 +13,6 @@ import Icon, {
   FileFilled,
   HomeFilled,
   ImportOutlined,
-  InfoCircleOutlined,
   LineChartOutlined,
   PaperClipOutlined,
   PhoneOutlined,
@@ -27,8 +26,8 @@ import Icon, {
   UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Switch, Tooltip } from "antd";
-import React, { useEffect, useState } from "react";
+import { Layout, Menu } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -43,7 +42,6 @@ import { selectRecentItems, selectSelectedHeader } from "../../redux/application
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { checkBeta, handleBeta, setBeta } from "../../utils/betaHandler";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
@@ -115,20 +113,22 @@ function Header({
     names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
     splitKey: bodyshop && bodyshop.imexshopid
   });
-  const [betaSwitch, setBetaSwitch] = useState(false);
+
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const isBeta = checkBeta();
-    setBetaSwitch(isBeta);
-  }, []);
-
-  const betaSwitchChange = (checked) => {
-    setBeta(checked);
-    setBetaSwitch(checked);
-    handleBeta();
+  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`);
+    }
   };
 
+  deleteBetaCookie();
+
   const accountingChildren = [];
 
   if (
@@ -695,31 +695,6 @@ 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-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 })
                 }
               ]}
             >
-              <FormDatePicker />
+              <DateTimePicker isDateOnly />
             </Form.Item>
             <Form.Item
               label={t("scoreboard.fields.bodyhrs")}

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

@@ -5,7 +5,6 @@ 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";
@@ -20,7 +19,14 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminDatesChange);
@@ -87,7 +93,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">
-            <FormDatePicker format="MM/DD/YYYY" />
+            <DateTimePicker format="MM/DD/YYYY" isDateOnly />
           </Form.Item>
           <Form.Item label={t("jobs.fields.date_towin")} name="date_towin">
             <DateTimePicker />

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

@@ -1,18 +1,9 @@
-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";
@@ -29,6 +20,7 @@ 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
@@ -61,10 +53,7 @@ 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">
@@ -116,7 +105,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">
-              <FormDatePicker />
+              <DateTimePicker isDateOnly />
             </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"]}>
-          <FormDatePicker disabled={!state.vehicle.new} />
+          <DateTimePicker isDateOnly disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>

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

@@ -5,7 +5,6 @@ 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";
 
@@ -30,7 +29,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">
-          <FormDatePicker disabled={jobRO} />
+          <DateTimePicker disabled={jobRO} isDateOnly />
         </Form.Item>
         <Form.Item label={t("jobs.fields.date_open")} name="date_open">
           <DateTimePicker disabled={jobRO} />
@@ -45,7 +44,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
 
       <FormRow header={t("jobs.forms.scheddates")}>
         <Form.Item label={t("jobs.fields.date_scheduled")} name="date_scheduled">
-          <FormDatePicker disabled={jobRO} />
+          <DateTimePicker disabled={jobRO} isDateOnly />
         </Form.Item>
         <Tooltip title={t("jobs.labels.scheduledinchange")}>
           <Form.Item label={t("jobs.fields.scheduled_in")} name="scheduled_in">
@@ -85,7 +84,6 @@ 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,7 +5,6 @@ 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";
@@ -13,6 +12,7 @@ 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">
-              <FormDatePicker disabled={jobRO} />
+              <DateTimePicker isDateOnly disabled={jobRO} />
             </Form.Item>
             <Form.Item label={t("jobs.fields.loss_of_use")} name="loss_of_use">
               <Input disabled={jobRO} />

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

@@ -11,6 +11,7 @@ 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";
@@ -37,7 +38,10 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.ro_number"),
       dataIndex: "ro_number",
       key: "ro_number",
-      sorter: true, //(a, b) => alphaSort(a.ro_number, b.ro_number),
+      sorter: search?.search
+        ? (a, b) =>
+            parseInt((a.ro_number || "0").replace(/\D/g, "")) - parseInt((b.ro_number || "0").replace(/\D/g, ""))
+        : true,
       sortOrder: sortcolumn === "ro_number" && sortorder,
       render: (text, record) => (
         <Link to={"/manage/jobs/" + record.id}>{record.ro_number || t("general.labels.na")}</Link>
@@ -49,7 +53,6 @@ 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 ? (
@@ -67,7 +70,6 @@ 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} />
     },
@@ -75,7 +77,6 @@ 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} />
     },
@@ -85,7 +86,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       key: "status",
 
       ellipsis: true,
-      sorter: true, // (a, b) => alphaSort(a.status, b.status),
+      sorter: search?.search ? (a, b) => statusSort(a.status, b.status, bodyshop.md_ro_statuses.active_statuses) : true,
       sortOrder: sortcolumn === "status" && sortorder,
       render: (text, record) => {
         return record.status || t("general.labels.na");
@@ -100,7 +101,6 @@ 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: true, //(a, b) => alphaSort(a.plate_no, b.plate_no),
+      sorter: search?.search ? (a, b) => alphaSort(a.plate_no, b.plate_no) : true,
       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: true, //(a, b) => alphaSort(a.clm_no, b.clm_no),
+      sorter: search?.search ? (a, b) => alphaSort(a.clm_no, b.clm_no) : true,
       sortOrder: sortcolumn === "clm_no" && sortorder,
       render: (text, record) => `${record.clm_no || ""}${record.po_number ? ` (PO: ${record.po_number})` : ""}`
     },
@@ -142,8 +142,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",
       key: "clm_total",
-
-      sorter: true, //(a, b) => a.clm_total - b.clm_total,
+      sorter: search?.search ? (a, b) => a.clm_total - b.clm_total : true,
       sortOrder: sortcolumn === "clm_total" && sortorder,
       render: (text, record) => {
         return record.clm_total ? (
@@ -157,7 +156,6 @@ 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-mark-selected-exported/jobs-mark-selected-exported.jsx

@@ -0,0 +1,105 @@
+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]);
+  }, [bodyshop?.id]);
 
   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">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </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 FormDatePicker from "../form-date-picker/form-date-picker.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 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">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </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,8 +1,7 @@
-import { DeleteFilled, EyeFilled } from "@ant-design/icons";
+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";
@@ -83,47 +82,34 @@ export function PartsOrderListTableDrawerComponent({
     sortedInfo: {}
   });
 
-  const [returnfrombill, setReturnFromBill] = useState();
-  const [billData, setBillData] = useState();
+  const [billData, setBillData] = useState(null);
   const search = queryString.parse(useLocation().search);
   const selectedpartsorder = search.partsorderid;
 
-  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;
+  const [billQuery] = useLazyQuery(QUERY_BILL_BY_PK);
+  const selectedPartsOrderRecord = parts_orders.find((r) => r.id === selectedpartsorder);
 
   useEffect(() => {
-    if (returnfrombill === null) {
-      setBillData(null);
-    } else {
-      const fetchData = async () => {
-        const result = await billQuery({
-          variables: { billid: returnfrombill }
-        });
-        setBillData(result.data);
-      };
-      fetchData();
-    }
-  }, [returnfrombill, billQuery]);
+    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, showView = false) => (
+  const recordActions = (record) => (
     <Space direction="horizontal" wrap>
-      {showView && (
-        <Button
-          onClick={() => {
-            if (record.returnfrombill) {
-              setReturnFromBill(record.returnfrombill);
-            } else {
-              setReturnFromBill(null);
-            }
-            handleOnRowClick(record);
-          }}
-        >
-          <EyeFilled />
-        </Button>
-      )}
-
       <Button
         disabled={jobRO || record.return || record.vendor.id === bodyshop.inhousevendorid}
         onClick={() => {
@@ -133,16 +119,14 @@ export function PartsOrderListTableDrawerComponent({
             context: {
               jobId: job.id,
               job: job,
-              partsorderlines: record.parts_order_lines.map((pol) => {
-                return {
-                  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
-                };
-              })
+              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
+              }))
             }
           });
         }}
@@ -167,7 +151,6 @@ export function PartsOrderListTableDrawerComponent({
         disabled={jobRO}
         onConfirm={async () => {
           //Delete the parts return.!
-
           await deletePartsOrder({
             variables: { partsOrderId: record.id },
             update(cache) {
@@ -191,7 +174,6 @@ export function PartsOrderListTableDrawerComponent({
           disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
           onClick={() => {
             logImEXEvent("parts_order_receive_bill");
-
             setBillEnterContext({
               actions: { refetch: refetch },
               context: {
@@ -199,24 +181,20 @@ export function PartsOrderListTableDrawerComponent({
                 bill: {
                   vendorid: record.vendor.id,
                   is_credit_memo: record.return,
-                  billlines: record.parts_order_lines.map((pol) => {
-                    return {
-                      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
-                    };
-                  })
+                  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
+                  }))
                 }
               }
             });
@@ -243,8 +221,6 @@ export function PartsOrderListTableDrawerComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const selectedPartsOrderRecord = parts_orders.find((r) => r.id === selectedpartsorder);
-
   const rowExpander = (record) => {
     const columns = [
       {

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")}
         >
-          <FormDatePicker onlyFuture />
+          <DateTimePicker isDateOnly 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)}>
+      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)} type="primary" danger>
         {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 }) {
             }
           ]}
         >
-          <DatePickerFormItem disabled={disabled} />
+          <DateTimePicker isDateOnly 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)}>
+      <Button loading={loading} disabled={disabled} onClick={() => setOpen(true)} type="primary" danger>
         {t("bills.labels.markexported")}
       </Button>
     </Popconfirm>

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

@@ -1,22 +1,32 @@
-import { Input, Space, Spin } from "antd";
-import React from "react";
+import { Button, Input, Space, Spin } from "antd";
+import React, { useState } 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>
       {loading && <Spin />}
@@ -35,6 +45,13 @@ 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/production-board-kanban-card.component.jsx

@@ -6,11 +6,11 @@ import {
   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 Dinero from "dinero.js";
 
 import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
@@ -18,8 +18,8 @@ import ProductionSubletsManageComponent from "../production-sublets-manage/produ
 
 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";
+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));
@@ -213,21 +213,13 @@ const EstimatorToolTip = ({ metadata, cardSettings }) => {
 };
 
 const SubtotalTooltip = ({ metadata, cardSettings, t }) => {
-  const amount = metadata?.job_totals?.totals?.subtotal?.amount;
-  const dineroAmount = amount ? Dinero({ amount: parseInt(amount * 100) }).toFormat("0,0.00") : null;
+  const dineroAmount = Dinero(metadata?.job_totals?.totals?.subtotal ?? Dinero()).toFormat();
 
   return (
     cardSettings?.subtotal && (
       <Col span={cardSettings.compact ? 24 : 12}>
-        <EllipsesToolTip
-          title={!!amount ? `${t("production.statistics.currency_symbol")}${dineroAmount}` : null}
-          kiosk={cardSettings.kiosk}
-        >
-          {!!amount ? (
-            <span>{`${t("production.statistics.currency_symbol")}${dineroAmount}`}</span>
-          ) : (
-            <span>&nbsp;</span>
-          )}
+        <EllipsesToolTip title={`${dineroAmount}`} kiosk={cardSettings.kiosk}>
+          {dineroAmount}
         </EllipsesToolTip>
       </Col>
     )

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

@@ -1,9 +1,10 @@
+import dayjs from "../../utils/day";
 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 { PageHeader } from "@ant-design/pro-layout";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -21,8 +22,9 @@ 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 { mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
+import { defaultFilters, mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
 import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -41,14 +43,140 @@ const mapDispatchToProps = (dispatch) => ({
 
 function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTrail, associationSettings, statuses }) {
   const [boardLanes, setBoardLanes] = useState({ lanes: [] });
-  const [filter, setFilter] = useState({ search: "", employeeId: null });
+  const [filter, setFilter] = useState(defaultFilters);
   const [loading, setLoading] = useState(true);
   const [isMoving, setIsMoving] = useState(false);
   const [orientation, setOrientation] = useState("vertical");
+  const { socket } = useContext(SocketContext); // Access socket from the context
 
   const { t } = useTranslation();
   const client = useApolloClient();
 
+  const handleJobUpdated = useCallback(
+    (updatedJob) => {
+      setBoardLanes((prevBoardLanes) => {
+        const updatedLanes = cloneDeep(prevBoardLanes.lanes);
+
+        // Find the lane containing the card with the updated job ID
+        let sourceLane = updatedLanes.find((lane) => lane.cards.some((card) => card.id === updatedJob.id));
+
+        if (!sourceLane) {
+          console.log("Card not found in any lane. Checking for valid status to add it.");
+
+          // Find the target lane based on the new status if the card does not exist
+          const targetLane = updatedLanes.find((lane) => lane.id === updatedJob.status);
+
+          if (targetLane && updatedJob.isInProduction) {
+            // Check if job is in production and status is valid
+            console.log(`Adding card to lane ${targetLane.title}`);
+
+            // Add the new card to the target lane
+            const newCard = {
+              id: updatedJob.id,
+              metadata: { ...updatedJob }
+            };
+            targetLane.cards.push(newCard);
+
+            // Update the lane title with the new card count
+            targetLane.title = `${targetLane.title.split(" ")[0]} (${targetLane.cards.length})`;
+
+            return { lanes: updatedLanes }; // Return early since the card is added
+          } else {
+            console.error("No valid lane or status to add the job to.");
+            return prevBoardLanes; // Return the previous state if no valid status or lane
+          }
+        }
+
+        // If the card exists, find it in the source lane
+        const cardIndex = sourceLane.cards.findIndex((card) => card.id === updatedJob.id);
+        const currentCard = sourceLane.cards[cardIndex];
+
+        // If we somehow can't find the card, return
+        if (!currentCard) {
+          console.error("Card not found for the updated job.");
+          return prevBoardLanes; // Return the previous state if the card is not found
+        }
+
+        // Iterate through the properties of updatedJob and update the corresponding values in currentCard.metadata
+        Object.keys(updatedJob).forEach((key) => {
+          // Normalize date fields by comparing their ISO strings or timestamps
+          if (key === "updated_at") {
+            const currentCardDate = dayjs(currentCard.metadata[key]).toISOString();
+            const updatedJobDate = dayjs(updatedJob[key]).toISOString();
+
+            if (currentCardDate !== updatedJobDate) {
+              console.log(`Updating ${key} from ${currentCardDate} to ${updatedJobDate}`);
+              currentCard.metadata[key] = updatedJob[key]; // Assign the new value if different
+            }
+          } else if (key in currentCard.metadata && currentCard.metadata[key] !== updatedJob[key]) {
+            console.log(`Updating ${key} from ${currentCard.metadata[key]} to ${updatedJob[key]}`);
+            currentCard.metadata[key] = updatedJob[key];
+          }
+        });
+
+        // Mark that data has been changed if any field was updated
+        const isDataChanged = !isEqual(currentCard.metadata, updatedJob);
+
+        // Check if the lane (status) has changed
+        const isLaneChanged = updatedJob.status !== sourceLane.id;
+
+        // Case 1: Both data and lane have changed
+        if (isDataChanged && isLaneChanged) {
+          console.log("Case 1: Data and Lane Changed");
+
+          // Remove the card from the source lane
+          const [cardToMove] = sourceLane.cards.splice(cardIndex, 1);
+
+          // Find the target lane based on the new status
+          const targetLane = updatedLanes.find((lane) => lane.id === updatedJob.status);
+          if (targetLane) {
+            targetLane.cards.push({ ...cardToMove, metadata: { ...currentCard.metadata } });
+            sourceLane.title = `${sourceLane.title.split(" ")[0]} (${sourceLane.cards.length})`;
+            targetLane.title = `${targetLane.title.split(" ")[0]} (${targetLane.cards.length})`;
+          } else {
+            console.error("Target lane not found for the updated job.");
+          }
+        }
+        // Case 2: Only data has changed
+        else if (isDataChanged && !isLaneChanged) {
+          console.log("Case 2: Only Data Changed");
+          sourceLane.cards[cardIndex] = { ...currentCard, metadata: { ...currentCard.metadata } };
+        }
+        // Case 3: Only the lane has changed
+        else if (!isDataChanged && isLaneChanged) {
+          console.log("Case 3: Only Lane Changed");
+
+          // Remove the card from the source lane
+          const [cardToMove] = sourceLane.cards.splice(cardIndex, 1);
+
+          // Find the target lane based on the new status
+          const targetLane = updatedLanes.find((lane) => lane.id === updatedJob.status);
+          if (targetLane) {
+            targetLane.cards.push(cardToMove);
+            sourceLane.title = `${sourceLane.title.split(" ")[0]} (${sourceLane.cards.length})`;
+            targetLane.title = `${targetLane.title.split(" ")[0]} (${targetLane.cards.length})`;
+          } else {
+            console.error("Target lane not found for the updated job.");
+          }
+        }
+
+        return { lanes: updatedLanes };
+      });
+    },
+    [setBoardLanes]
+  );
+
+  useEffect(() => {
+    // Listen for the job-updated event from the socket
+    if (socket) {
+      socket.on("job-updated", handleJobUpdated);
+
+      return () => {
+        socket.off("job-updated", handleJobUpdated);
+      };
+    }
+  }, [socket, handleJobUpdated]);
+
   useEffect(() => {
     if (associationSettings) {
       setLoading(true);
@@ -187,11 +315,9 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
     return mergeWithDefaults(kanbanSettings);
   }, [associationSettings]);
 
-  const handleSettingsChange = useCallback((newSettings) => {
-    setLoading(true);
-    setOrientation(newSettings.orientation ? "vertical" : "horizontal");
-    setLoading(false);
-  }, []);
+  const handleSettingsChange = () => {
+    setFilter(defaultFilters);
+  };
 
   if (loading) {
     return <Skeleton active />;

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

@@ -28,22 +28,23 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
     onError: (error) => console.error(`Error fetching jobs in production: ${error.message}`)
   });
 
-  const { data: updatedJobs } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION, {
-    onError: (error) => console.error(`Error subscribing to jobs in production: ${error.message}`)
-  });
+  // const { data: updatedJobs } = useSubscription(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}`)
   });
 
+  // This provides us the current version of the Lanes from the Redux store
   // const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
 
-  useEffect(() => {
-    if (updatedJobs && data) {
-      refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`));
-    }
-  }, [updatedJobs, data, refetch]);
+  // useEffect(() => {
+  //   if (updatedJobs && data) {
+  //     refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`));
+  //   }
+  // }, [updatedJobs, data, refetch]);
 
   const filteredAssociationSettings = useMemo(() => {
     return associationSettings?.associations[0] || null;

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

@@ -3,6 +3,7 @@ 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",
@@ -32,7 +33,21 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
   };
 
   const calculateTotalAmount = (items, key) => {
-    return items.reduce((acc, item) => acc + (item[key]?.totals?.subtotal?.amount || 0), 0);
+    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) => {
@@ -43,14 +58,6 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
     }, 0);
   };
 
-  const calculateReducerTotalAmount = (lanes, key) => {
-    return lanes.reduce((acc, lane) => {
-      return (
-        acc + lane.cards.reduce((laneAcc, card) => laneAcc + (card.metadata[key]?.totals?.subtotal?.amount || 0), 0)
-      );
-    }, 0);
-  };
-
   const formatValue = (value, type) => {
     if (type === StatisticType.JOBS) {
       return value.toFixed(0);
@@ -87,9 +94,15 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
   const totalAmountInProduction = useMemo(() => {
     if (!cardSettings.totalAmountInProduction) return null;
     const total = calculateTotalAmount(data, "job_totals");
-    return parseFloat(total.toFixed(2));
+    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 =
@@ -118,12 +131,6 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
     [reducerData, cardSettings.jobsOnBoard]
   );
 
-  const totalAmountOnBoard = useMemo(() => {
-    if (!reducerData || !cardSettings.totalAmountOnBoard) return null;
-    const total = calculateReducerTotalAmount(reducerData.lanes, "job_totals");
-    return parseFloat(total.toFixed(2));
-  }, [reducerData, cardSettings.totalAmountOnBoard]);
-
   const tasksInProduction = useMemo(() => {
     if (!data || !cardSettings.tasksInProduction) return null;
     return data.reduce((acc, item) => acc + (item.tasks_aggregate?.aggregate?.count || 0), 0);
@@ -191,7 +198,6 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
           <Statistic
             title={t(`production.statistics.${stat.label}`)}
             value={formatValue(stat.value, stat.type)}
-            prefix={stat.type === StatisticType.AMOUNT ? t("production.statistics.currency_symbol") : undefined}
             suffix={
               stat.type === StatisticType.HOURS
                 ? t("production.statistics.hours")

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

@@ -29,7 +29,7 @@ const sortByParentId = (arr) => {
 
 // Function to create board data based on statuses and jobs, with optional filtering
 export const createBoardData = ({ statuses, data, filter, cardSettings }) => {
-  const { search, employeeId } = filter;
+  const { search, employeeId, alert } = filter;
 
   const lanes = statuses.map((status) => ({
     id: status,
@@ -52,6 +52,11 @@ export const createBoardData = ({ statuses, data, filter, cardSettings }) => {
     );
   }
 
+  // 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) => {

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

@@ -48,6 +48,8 @@ const defaultKanbanSettings = {
   selectedEstimators: []
 };
 
+const defaultFilters = { search: "", employeeId: null, alert: false };
+
 const mergeWithDefaults = (settings) => {
   // Create a new object that starts with the default settings
   const mergedSettings = { ...defaultKanbanSettings };
@@ -64,4 +66,4 @@ const mergeWithDefaults = (settings) => {
   return mergedSettings;
 };
 
-export { defaultKanbanSettings, statisticsItems, mergeWithDefaults };
+export { defaultKanbanSettings, statisticsItems, mergeWithDefaults, defaultFilters };

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

@@ -9,8 +9,9 @@ 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 }) {
+function ProductionBoardKanbanSettings({ associationSettings, parentLoading, bodyshop, data, onSettingsChange }) {
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -61,6 +62,11 @@ function ProductionBoardKanbanSettings({ associationSettings, parentLoading, bod
     setOpen(false);
     setLoading(false);
     parentLoading(false);
+
+    if (onSettingsChange && isFunction(onSettingsChange)) {
+      onSettingsChange(values);
+    }
+
     setHasChanges(false);
   };
 
@@ -156,6 +162,7 @@ ProductionBoardKanbanSettings.propTypes = {
   associationSettings: PropTypes.object,
   parentLoading: PropTypes.func.isRequired,
   bodyshop: PropTypes.object.isRequired,
+  onSettingsChange: PropTypes.func,
   data: PropTypes.array
 };
 

client/src/components/production-list-columns/production-list-columns.add.component.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Button, Dropdown } from "antd";
 import dataSource from "./production-list-columns.data";
 import { useTranslation } from "react-i18next";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
@@ -10,16 +9,23 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   technician: selectTechnician,
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(ProductionColumnsComponent);
 
-export function ProductionColumnsComponent({ columnState, technician, bodyshop, data, tableState, refetch }) {
+const mapDispatchToProps = (dispatch) => ({
+  // Add any necessary dispatch actions here
+});
+
+export function ProductionColumnsComponent({
+  columnState,
+  technician,
+  bodyshop,
+  data,
+  tableState,
+  refetch,
+  onColumnAdd
+}) {
   const [columns, setColumns] = columnState;
   const { t } = useTranslation();
   const {
@@ -29,18 +35,26 @@ export function ProductionColumnsComponent({ columnState, technician, bodyshop,
     names: ["Enhanced_Payroll"],
     splitKey: bodyshop.imexshopid
   });
+
   const handleAdd = (e) => {
-    setColumns([
-      ...columns,
-      ...dataSource({
-        bodyshop,
-        technician,
-        state: tableState,
-        data,
-        activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-        treatments: { Enhanced_Payroll }
-      }).filter((i) => i.key === e.key)
-    ]);
+    const newColumn = dataSource({
+      bodyshop,
+      technician,
+      state: tableState,
+      data,
+      activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+      treatments: { Enhanced_Payroll }
+    }).find((i) => i.key === e.key);
+
+    if (newColumn) {
+      const updatedColumns = [...columns, newColumn];
+      setColumns(updatedColumns);
+
+      // Call the onColumnAdd function passed as a prop
+      if (onColumnAdd) {
+        onColumnAdd(newColumn);
+      }
+    }
   };
 
   const columnKeys = columns.map((i) => i.key);
@@ -76,12 +90,4 @@ export function ProductionColumnsComponent({ columnState, technician, bodyshop,
   );
 }
 
-// <Transfer
-// dataSource={dataSource}
-// titles={["Source", "Target"]}
-// targetKeys={columns.map((c) => c.key)}
-// render={(item) => item.title}
-// onChange={(nextTargetKeys, direction, moveKeys) => {
-//   setColumns(dataSource.filter((i) => nextTargetKeys.includes(i.key)));
-// }}
-// />
+export default connect(mapStateToProps, mapDispatchToProps)(ProductionColumnsComponent);

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

@@ -2,10 +2,13 @@ import { BranchesOutlined, PauseCircleOutlined } from "@ant-design/icons";
 import { Checkbox, Space, Tooltip } from "antd";
 import i18n from "i18next";
 import { Link } from "react-router-dom";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { store } from "../../redux/store";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { onlyUnique } from "../../utils/arrayHelper";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
@@ -24,9 +27,11 @@ import ProductionListColumnNote from "./production-list-columns.productionnote.c
 import ProductionListColumnCategory from "./production-list-columns.status.category";
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionListColumnTouchTime from "./prodution-list-columns.touchtime.component";
-import { store } from "../../redux/store";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
+
+const getEmployeeName = (employeeId, employees) => {
+  const employee = employees.find((e) => e.id === employeeId);
+  return employee ? `${employee.first_name} ${employee.last_name}` : "";
+};
 
 const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatments }) => {
   const { Enhanced_Payroll } = treatments;
@@ -258,7 +263,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
         { text: "True", value: true },
         { text: "False", value: false }
       ],
-      onFilter: (value, record) => value.includes(record.special_coverage_policy),
+      onFilter: (value, record) => value === record.special_coverage_policy,
       render: (text, record) => <Checkbox checked={record.special_coverage_policy} />
     },
 
@@ -349,6 +354,11 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       key: "alert",
       sorter: (a, b) => Number(a.production_vars?.alert || false) - Number(b.production_vars?.alert || false),
       sortOrder: state.sortedInfo.columnKey === "alert" && state.sortedInfo.order,
+      filters: [
+        { text: "True", value: true },
+        { text: "False", value: false }
+      ],
+      onFilter: (value, record) => value === (record.production_vars?.alert || false),
       render: (text, record) => (
         <ProductionListColumnAlert id={record.id} productionVars={record?.production_vars} refetch={refetch} />
       )
@@ -421,8 +431,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_body" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_body)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_body)?.first_name
+          getEmployeeName(a.employee_body, bodyshop.employees),
+          getEmployeeName(b.employee_body, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment refetch={refetch} record={record} type="employee_body" />
@@ -435,8 +445,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_prep" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_prep)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_prep)?.first_name
+          getEmployeeName(a.employee_prep, bodyshop.employees),
+          getEmployeeName(b.employee_prep, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment record={record} refetch={refetch} type="employee_prep" />
@@ -455,8 +465,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_csr" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_csr)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_csr)?.first_name
+          getEmployeeName(a.employee_csr, bodyshop.employees),
+          getEmployeeName(b.employee_csr, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment refetch={refetch} record={record} type="employee_csr" />
@@ -469,8 +479,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       sortOrder: state.sortedInfo.columnKey === "employee_refinish" && state.sortedInfo.order,
       sorter: (a, b) =>
         alphaSort(
-          bodyshop.employees?.find((e) => e.id === a.employee_refinish)?.first_name,
-          bodyshop.employees?.find((e) => e.id === b.employee_refinish)?.first_name
+          getEmployeeName(a.employee_refinish, bodyshop.employees),
+          getEmployeeName(b.employee_refinish, bodyshop.employees)
         ),
       render: (text, record) => (
         <ProductionListEmployeeAssignment record={record} refetch={refetch} type="employee_refinish" />

client/src/components/production-list-columns/production-list-columns.date.component.jsx

@@ -1,12 +1,12 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Dropdown, Space, TimePicker } from "antd";
+import { Button, Card, Dropdown, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function ProductionListDate({ record, field, time, pastIndicator }) {
   const [updateAlert] = useMutation(UPDATE_JOB);
@@ -57,22 +57,14 @@ export default function ProductionListDate({ record, field, time, pastIndicator
         label: (
           <Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}>
             <Space direction={"vertical"}>
-              <FormDatePicker
+              <DateTimePicker
                 onClick={(e) => e.stopPropagation()}
                 value={(record[field] && dayjs(record[field])) || null}
                 onChange={handleChange}
-                format="MM/DD/YYYY"
+                format={time ? "MM/DD/YYYY hh:mm a" : "MM/DD/YYYY"}
                 isDateOnly={!time}
+                showTime={time ? { format: "hh:mm a", minuteStep: 15 } : false}
               />
-              {time && (
-                <TimePicker
-                  onClick={(e) => e.stopPropagation()}
-                  value={(record[field] && dayjs(record[field])) || null}
-                  onChange={handleChange}
-                  minuteStep={15}
-                  format="hh:mm a"
-                />
-              )}
               <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
             </Space>
           </Card>

client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx

@@ -1,89 +0,0 @@
-import { useMutation } from "@apollo/client";
-import React, { useState } from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { Button, Form, Input, notification, Popover, Space } from "antd";
-import { useTranslation } from "react-i18next";
-import { UPDATE_SHOP } from "../../graphql/bodyshop.queries";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-
-export function ProductionListSaveConfigButton({ columns, bodyshop, tableState }) {
-  const [updateShop] = useMutation(UPDATE_SHOP);
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [form] = Form.useForm();
-
-  const { t } = useTranslation();
-
-  const handleSaveConfig = async (values) => {
-    logImEXEvent("production_save_config");
-    setLoading(true);
-    const result = await updateShop({
-      variables: {
-        id: bodyshop.id,
-        shop: {
-          production_config: [
-            ...bodyshop.production_config.filter((b) => b.name !== values.name),
-            //Assign it to the name
-            {
-              name: values.name,
-              columns: {
-                columnKeys: columns.map((i) => {
-                  return { key: i.key, width: i.width };
-                }),
-                tableState
-              }
-            }
-          ]
-        }
-      }
-    });
-    if (!!!result.errors) {
-      notification["success"]({ message: t("bodyshop.successes.save") });
-    } else {
-      notification["error"]({
-        message: t("bodyshop.errors.saving", {
-          error: JSON.stringify(result.errors)
-        })
-      });
-    }
-    form.resetFields();
-    setOpen(false);
-    setLoading(false);
-  };
-  const popMenu = (
-    <div>
-      <Form layout="vertical" form={form} onFinish={handleSaveConfig}>
-        <Form.Item label={t("production.labels.viewname")} name="name" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-
-        <Space wrap>
-          <Button type="primary" danger onClick={() => form.submit()} loading={loading}>
-            {t("general.actions.save")}
-          </Button>
-          <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
-        </Space>
-      </Form>
-    </div>
-  );
-
-  return (
-    <Popover open={open} content={popMenu}>
-      <Button loading={loading} onClick={() => setOpen(true)}>
-        {t("production.actions.saveconfig")}
-      </Button>
-    </Popover>
-  );
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ProductionListSaveConfigButton);

client/src/components/production-list-table/production-list-config-manager.component.jsx

@@ -0,0 +1,505 @@
+import { DeleteOutlined, ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { Button, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_ACTIVE_PROD_LIST_VIEW } from "../../graphql/associations.queries";
+import { UPDATE_SHOP } from "../../graphql/bodyshop.queries";
+import ProductionListColumns from "../production-list-columns/production-list-columns.data";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { isFunction } from "lodash";
+
+const { confirm } = Modal;
+
+export function ProductionListConfigManager({
+  refetch,
+  bodyshop,
+  technician,
+  currentUser,
+  state,
+  data,
+  columns,
+  setColumns,
+  setState,
+  onSave,
+  hasUnsavedChanges,
+  setHasUnsavedChanges
+}) {
+  const { t } = useTranslation();
+  const [updateDefaultProdView] = useMutation(UPDATE_ACTIVE_PROD_LIST_VIEW);
+  const [updateShop] = useMutation(UPDATE_SHOP);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [isAddingNewProfile, setIsAddingNewProfile] = useState(false);
+  const [form] = Form.useForm();
+
+  const [activeView, setActiveView] = useState(() => {
+    const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
+    return assoc && assoc.default_prod_list_view;
+  });
+
+  const defaultState = {
+    sortedInfo: {
+      columnKey: "ro_number",
+      order: null
+    },
+    filteredInfo: {}
+  };
+
+  const ensureDefaultState = (state) => {
+    return {
+      sortedInfo: state?.sortedInfo || defaultState.sortedInfo,
+      filteredInfo: state?.filteredInfo || defaultState.filteredInfo,
+      ...state
+    };
+  };
+
+  const createDefaultView = async () => {
+    const defaultConfig = {
+      name: t("production.constants.main_profile"),
+      columns: {
+        columnKeys: [
+          { key: "ro_number", width: 100 },
+          { key: "ownr", width: 100 },
+          { key: "vehicle", width: 100 },
+          { key: "ins_co_nm", width: 100 },
+          { key: "actual_in", width: 100 },
+          { key: "scheduled_completion", width: 100 },
+          { key: "labhrs", width: 100 },
+          { key: "employee_body", width: 100 },
+          { key: "larhrs", width: 100 },
+          { key: "employee_refinish", width: 100 },
+          { key: "tt", width: 100 },
+          { key: "status", width: 100 },
+          { key: "sublets", width: 100 },
+          { key: "viewdetail", width: 100 }
+        ],
+        tableState: ensureDefaultState(state)
+      }
+    };
+
+    const result = await updateShop({
+      variables: {
+        id: bodyshop.id,
+        shop: {
+          production_config: [defaultConfig]
+        }
+      }
+    });
+
+    if (!result.errors) {
+      await updateActiveProdView(t("production.constants.main_profile"));
+      window.location.reload(); // Reload the page
+    } else {
+      notification.error({
+        message: t("bodyshop.errors.creatingdefaultview", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+  };
+
+  const {
+    treatments: { Enhanced_Payroll }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Enhanced_Payroll"],
+    splitKey: bodyshop.imexshopid
+  });
+
+  const updateActiveProdView = async (viewName) => {
+    const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
+    if (assoc) {
+      await updateDefaultProdView({
+        variables: { assocId: assoc.id, view: viewName },
+        update(cache) {
+          cache.modify({
+            id: cache.identify(bodyshop),
+            fields: {
+              associations(existingAssociations) {
+                return existingAssociations.map((a) => {
+                  if (a.useremail !== currentUser.email) return a;
+                  return { ...a, default_prod_list_view: viewName };
+                });
+              }
+            }
+          });
+        }
+      });
+      setActiveView(viewName);
+      setHasUnsavedChanges(false);
+    }
+  };
+
+  const handleSelect = async (value) => {
+    if (hasUnsavedChanges) {
+      confirm({
+        title: t("general.labels.unsavedchanges"),
+        icon: <ExclamationCircleOutlined />,
+        content: t("general.messages.unsavedchangespopup"),
+        onOk: () => proceedWithSelect(value),
+        onCancel() {
+          // Do nothing if canceled
+        }
+      });
+    } else {
+      await proceedWithSelect(value);
+    }
+  };
+
+  const proceedWithSelect = async (value) => {
+    if (value === "add_new") {
+      setIsAddingNewProfile(true);
+      setOpen(true);
+      return;
+    }
+
+    const selectedConfig = bodyshop.production_config.find((pc) => pc.name === value);
+
+    // If the selected profile doesn't exist, revert to the main profile
+    if (!selectedConfig) {
+      const mainProfileConfig = bodyshop.production_config.find(
+        (pc) => pc.name === t("production.constants.main_profile")
+      );
+
+      if (mainProfileConfig) {
+        await updateActiveProdView(t("production.constants.main_profile"));
+        setColumns(
+          mainProfileConfig.columns.columnKeys.map((k) => {
+            return {
+              ...ProductionListColumns({
+                bodyshop,
+                refetch,
+                technician,
+                state: ensureDefaultState(state),
+                data: data,
+                activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+                treatments: { Enhanced_Payroll }
+              }).find((e) => e.key === k.key),
+              width: k.width
+            };
+          })
+        );
+        const newState = ensureDefaultState(mainProfileConfig.columns.tableState);
+        setState(newState);
+
+        if (onSave && isFunction(onSave)) {
+          onSave();
+        }
+        return;
+      }
+    }
+
+    // If the selected profile exists, proceed as normal
+    if (selectedConfig) {
+      const newColumns = selectedConfig.columns.columnKeys.map((k) => {
+        return {
+          ...ProductionListColumns({
+            bodyshop,
+            refetch,
+            technician,
+            state: ensureDefaultState(state),
+            data: data,
+            activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+            treatments: { Enhanced_Payroll }
+          }).find((e) => e.key === k.key),
+          width: k.width
+        };
+      });
+      setColumns(newColumns);
+      const newState = ensureDefaultState(selectedConfig.columns.tableState);
+      setState(newState);
+
+      await updateActiveProdView(value);
+      if (onSave && isFunction(onSave)) {
+        onSave();
+      }
+    }
+  };
+
+  const handleTrash = async (name) => {
+    if (name === t("production.constants.main_profile")) return;
+
+    const remainingConfigs = bodyshop.production_config.filter((b) => b.name !== name);
+
+    await updateShop({
+      variables: {
+        id: bodyshop.id,
+        shop: {
+          production_config: remainingConfigs
+        }
+      },
+      awaitRefetchQueries: true
+    });
+
+    if (name === activeView) {
+      // Only switch profiles if the deleted profile was the active profile
+      if (remainingConfigs.length > 0) {
+        const nextConfig = remainingConfigs[0];
+        await updateActiveProdView(nextConfig.name);
+        setColumns(
+          nextConfig.columns.columnKeys.map((k) => {
+            return {
+              ...ProductionListColumns({
+                technician,
+                state: ensureDefaultState(state),
+                refetch,
+                data: data,
+                activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+                treatments: { Enhanced_Payroll }
+              }).find((e) => e.key === k.key),
+              width: k.width
+            };
+          })
+        );
+        setState(ensureDefaultState(nextConfig.columns.tableState));
+      } else {
+        await updateActiveProdView(null);
+        setColumns([]);
+        setState(defaultState);
+      }
+    } else {
+      // Revert back to the active view and load its columns and state
+      const activeConfig = bodyshop.production_config.find((pc) => pc.name === activeView);
+      if (activeConfig) {
+        await updateActiveProdView(activeView);
+        setColumns(
+          activeConfig.columns.columnKeys.map((k) => {
+            return {
+              ...ProductionListColumns({
+                technician,
+                state: ensureDefaultState(state),
+                refetch,
+                data: data,
+                activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+                treatments: { Enhanced_Payroll }
+              }).find((e) => e.key === k.key),
+              width: k.width
+            };
+          })
+        );
+        setState(ensureDefaultState(activeConfig.columns.tableState));
+      }
+    }
+  };
+
+  const handleSaveConfig = async (values) => {
+    logImEXEvent("production_save_config");
+    setLoading(true);
+
+    const profileName = isAddingNewProfile ? values.name : activeView;
+
+    const result = await updateShop({
+      variables: {
+        id: bodyshop.id,
+        shop: {
+          production_config: [
+            ...bodyshop.production_config.filter((b) => b.name !== profileName),
+            {
+              name: profileName,
+              columns: {
+                columnKeys: columns.map((i) => ({ key: i.key, width: i.width })),
+                tableState: ensureDefaultState(state)
+              }
+            }
+          ]
+        }
+      }
+    });
+
+    if (!result.errors) {
+      notification.success({ message: t("bodyshop.successes.save") });
+      if (isAddingNewProfile) {
+        await updateActiveProdView(profileName);
+      }
+      if (onSave && isFunction(onSave)) {
+        onSave();
+      }
+      setHasUnsavedChanges(false);
+    } else {
+      notification.error({
+        message: t("bodyshop.errors.saving", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+
+    form.resetFields();
+    setOpen(false);
+    setLoading(false);
+    setIsAddingNewProfile(false);
+  };
+
+  useEffect(() => {
+    const validateAndSetDefaultView = () => {
+      const configExists = bodyshop.production_config.some((pc) => pc.name === activeView);
+
+      if (!configExists) {
+        // If the default view doesn't exist, revert to the main profile
+        const mainProfileConfig = bodyshop.production_config.find(
+          (pc) => pc.name === t("production.constants.main_profile")
+        );
+
+        if (mainProfileConfig) {
+          setActiveView(t("production.constants.main_profile"));
+
+          setColumns(
+            mainProfileConfig.columns.columnKeys.map((k) => {
+              return {
+                ...ProductionListColumns({
+                  bodyshop,
+                  refetch,
+                  technician,
+                  state: ensureDefaultState(state),
+                  data: data,
+                  activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+                  treatments: { Enhanced_Payroll }
+                }).find((e) => e.key === k.key),
+                width: k.width
+              };
+            })
+          );
+          setState(ensureDefaultState(mainProfileConfig.columns.tableState));
+
+          updateActiveProdView(t("production.constants.main_profile"));
+        }
+      } else {
+        // If the default view exists, set it as active
+        setActiveView(activeView);
+      }
+    };
+
+    if (!bodyshop.production_config || bodyshop.production_config.length === 0) {
+      createDefaultView().catch((e) => {
+        console.error("Something went wrong saving the production list view Config.");
+      });
+    } else {
+      validateAndSetDefaultView();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeView, bodyshop.production_config]);
+
+  const popMenu = (
+    <div>
+      <Form layout="vertical" form={form} onFinish={handleSaveConfig}>
+        {isAddingNewProfile && (
+          <Form.Item
+            label={t("production.labels.viewname")}
+            name="name"
+            rules={[
+              { required: true, message: t("production.errors.name_required") },
+              {
+                validator: (_, value) => {
+                  if (!value) {
+                    return Promise.resolve();
+                  }
+                  const nameExists = bodyshop.production_config.some((pc) => pc.name === value);
+                  if (nameExists) {
+                    return Promise.reject(new Error(t("production.errors.name_exists")));
+                  }
+                  return Promise.resolve();
+                }
+              }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        <Space wrap>
+          <Button
+            type="primary"
+            danger
+            onClick={() => form.submit()}
+            loading={loading}
+            disabled={form.getFieldsError().some(({ errors }) => errors.length)}
+          >
+            {t("general.actions.save")}
+          </Button>
+          {!isAddingNewProfile && (
+            <Button
+              type="default"
+              onClick={() => {
+                setIsAddingNewProfile(true);
+                setOpen(true);
+              }}
+            >
+              {t("general.actions.saveas")}
+            </Button>
+          )}
+          <Button
+            onClick={() => {
+              setIsAddingNewProfile(false);
+              setOpen(false);
+            }}
+          >
+            {t("general.actions.cancel")}
+          </Button>
+        </Space>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Space>
+      <Button loading={loading} onClick={() => setOpen(true)} disabled={isAddingNewProfile || !hasUnsavedChanges}>
+        {t("production.actions.saveconfig")}
+      </Button>
+      <Popover open={open} content={popMenu} placement="bottom">
+        <Select
+          style={{
+            minWidth: "150px"
+          }}
+          onSelect={handleSelect}
+          placeholder={t("production.labels.selectview")}
+          optionLabelProp="label"
+          popupMatchSelectWidth={false}
+          value={activeView}
+          disabled={open || isAddingNewProfile} // Disable the Select box when the popover is open or adding a new profile
+        >
+          {bodyshop.production_config
+            .slice()
+            .sort((a, b) =>
+              a.name === t("production.constants.main_profile")
+                ? -1
+                : b.name === t("production.constants.main_profile")
+                  ? 1
+                  : 0
+            ) //
+            .map((config) => (
+              <Select.Option key={config.name} label={config.name}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <span
+                    style={{
+                      flex: 1,
+                      maxWidth: "80%",
+                      marginRight: "1rem",
+                      textOverflow: "ellipsis"
+                    }}
+                  >
+                    {config.name}
+                  </span>
+                  {config.name !== t("production.constants.main_profile") && (
+                    <Popconfirm
+                      placement="right"
+                      title={t("general.labels.areyousure")}
+                      onConfirm={() => handleTrash(config.name)}
+                      onCancel={(e) => e.stopPropagation()}
+                    >
+                      <DeleteOutlined onClick={(e) => e.stopPropagation()} />
+                    </Popconfirm>
+                  )}
+                </div>
+              </Select.Option>
+            ))}
+          <Select.Option key="add_new" label={t("production.labels.addnewprofile")}>
+            <div style={{ display: "flex", alignItems: "center" }}>
+              <PlusOutlined style={{ marginRight: "0.5rem" }} />
+              {t("production.labels.addnewprofile")}
+            </div>
+          </Select.Option>
+        </Select>
+      </Popover>
+    </Space>
+  );
+}

client/src/components/production-list-table/production-list-table-view-select.component.jsx

@@ -1,157 +0,0 @@
-import { DeleteOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
-import { Popconfirm, Select } from "antd";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { UPDATE_ACTIVE_PROD_LIST_VIEW } from "../../graphql/associations.queries";
-import { UPDATE_SHOP } from "../../graphql/bodyshop.queries";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import ProductionListColumns from "../production-list-columns/production-list-columns.data";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  technician: selectTechnician,
-  currentUser: selectCurrentUser
-});
-
-export function ProductionListTable({ refetch, bodyshop, technician, currentUser, state, data, setColumns, setState }) {
-  const { t } = useTranslation();
-  const [updateDefaultProdView] = useMutation(UPDATE_ACTIVE_PROD_LIST_VIEW);
-  const [updateShop] = useMutation(UPDATE_SHOP);
-
-  const {
-    treatments: { Enhanced_Payroll }
-  } = useSplitTreatments({
-    attributes: {},
-    names: ["Enhanced_Payroll"],
-    splitKey: bodyshop.imexshopid
-  });
-
-  const handleSelect = async (value, option) => {
-    setColumns(
-      bodyshop.production_config
-        .filter((pc) => pc.name === value)[0]
-        .columns.columnKeys.map((k) => {
-          return {
-            ...ProductionListColumns({
-              bodyshop,
-              refetch,
-              technician,
-              state,
-              data: data,
-              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-              treatments: { Enhanced_Payroll }
-            }).find((e) => e.key === k.key),
-            width: k.width
-          };
-        })
-    );
-    setState(bodyshop.production_config.filter((pc) => pc.name === value)[0].columns.tableState);
-
-    const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
-
-    if (assoc) {
-      await updateDefaultProdView({
-        variables: { assocId: assoc.id, view: value },
-        update(cache) {
-          cache.modify({
-            id: cache.identify(bodyshop),
-            fields: {
-              associations(existingAssociations, { readField }) {
-                return existingAssociations.map((a) => {
-                  if (a.useremail !== currentUser.email) return a;
-                  return { ...a, default_prod_list_view: value };
-                });
-              }
-            }
-          });
-        }
-      });
-    }
-  };
-
-  const handleTrash = async (name) => {
-    await updateShop({
-      variables: {
-        id: bodyshop.id,
-        shop: {
-          production_config: bodyshop.production_config.filter((b) => b.name !== name)
-        }
-      },
-      awaitRefetchQueries: true
-    });
-
-    setColumns(
-      bodyshop.production_config[0].columns.columnKeys.map((k) => {
-        return {
-          ...ProductionListColumns({
-            technician,
-            state,
-            refetch,
-            data: data,
-            activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-            treatments: { Enhanced_Payroll }
-          }).find((e) => e.key === k.key),
-          width: k.width
-        };
-      })
-    );
-
-    setState(bodyshop.production_config[0].columns.tableState);
-  };
-  const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
-
-  const defaultView = assoc && assoc.default_prod_list_view;
-  return (
-    <div style={{ width: "10rem" }}>
-      <Select
-        onSelect={handleSelect}
-        placeholder={t("production.labels.selectview")}
-        optionLabelProp="label"
-        popupMatchSelectWidth={false}
-        defaultValue={defaultView}
-      >
-        {bodyshop.production_config.map((config) => (
-          <Select.Option key={config.name} label={config.name}>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center"
-              }}
-            >
-              <span
-                style={{
-                  flex: 1,
-                  maxWidth: "80%",
-                  marginRight: "1rem",
-                  textOverflow: "ellipsis"
-                }}
-              >
-                {config.name}
-              </span>
-
-              <Popconfirm
-                placement="right"
-                title={t("general.labels.areyousure")}
-                onConfirm={() => handleTrash(config.name)}
-              >
-                <DeleteOutlined
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                />
-              </Popconfirm>
-            </div>
-          </Select.Option>
-        ))}
-      </Select>
-    </div>
-  );
-}
-
-export default connect(mapStateToProps, null)(ProductionListTable);

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

@@ -1,20 +1,22 @@
 import { SyncOutlined } from "@ant-design/icons";
+import { PageHeader } from "@ant-design/pro-layout";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Dropdown, Input, Space, Statistic, Table } from "antd";
-import { PageHeader } from "@ant-design/pro-layout";
-import React, { useEffect, useMemo, useState } from "react";
+import _ from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import Prompt from "../../utils/prompt.js";
+import AlertComponent from "../alert/alert.component.jsx";
 import ProductionListColumnsAdd from "../production-list-columns/production-list-columns.add.component";
 import ProductionListColumns from "../production-list-columns/production-list-columns.data";
 import ProductionListDetail from "../production-list-detail/production-list-detail.component";
-import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component";
+import { ProductionListConfigManager } from "./production-list-config-manager.component.jsx";
 import ProductionListPrint from "./production-list-print.component";
-import ProductionListTableViewSelect from "./production-list-table-view-select.component";
 import ResizeableTitle from "./production-list-table.resizeable.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -25,6 +27,7 @@ const mapStateToProps = createStructuredSelector({
 
 export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser }) {
   const [searchText, setSearchText] = useState("");
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const {
     treatments: { Production_List_Status_Colors, Enhanced_Payroll }
@@ -35,92 +38,113 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
   });
 
   const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
-
   const defaultView = assoc && assoc.default_prod_list_view;
 
-  const [state, setState] = useState(
+  const initialStateRef = useRef(
     (bodyshop.production_config &&
       bodyshop.production_config.find((p) => p.name === defaultView)?.columns.tableState) ||
-      bodyshop.production_config[0]?.columns.tableState || {
+      (bodyshop.production_config && bodyshop.production_config[0]?.columns.tableState) || {
         sortedInfo: {},
         filteredInfo: { text: "" }
       }
   );
 
+  const initialColumnsRef = useRef(
+    (initialStateRef.current &&
+      bodyshop.production_config
+        .find((p) => p.name === defaultView)
+        ?.columns.columnKeys.map((k) => {
+          return {
+            ...ProductionListColumns({
+              bodyshop,
+              refetch,
+              technician,
+              state: initialStateRef.current,
+              data,
+              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
+              treatments: { Production_List_Status_Colors, Enhanced_Payroll }
+            }).find((e) => e.key === k.key),
+            width: k.width ?? 100
+          };
+        })) ||
+      []
+  );
+
+  const [state, setState] = useState(initialStateRef.current);
+  const [columns, setColumns] = useState(initialColumnsRef.current);
+
   const { t } = useTranslation();
 
   const matchingColumnConfig = useMemo(() => {
     return bodyshop.production_config.find((p) => p.name === defaultView);
   }, [bodyshop.production_config, defaultView]);
 
-  const [columns, setColumns] = useState(
-    (state &&
-      matchingColumnConfig &&
-      matchingColumnConfig.columns.columnKeys.map((k) => {
+  useEffect(() => {
+    const newColumns =
+      matchingColumnConfig?.columns.columnKeys.map((k) => {
         return {
           ...ProductionListColumns({
             bodyshop,
-            refetch,
             technician,
+            refetch,
             state,
-            data,
+            data: data,
             activeStatuses: bodyshop.md_ro_statuses.active_statuses,
             treatments: { Production_List_Status_Colors, Enhanced_Payroll }
           }).find((e) => e.key === k.key),
           width: k.width ?? 100
         };
-      })) ||
-      []
-  );
+      }) || [];
 
-  useEffect(() => {
-    const newColumns =
-      (state &&
-        matchingColumnConfig &&
-        matchingColumnConfig.columns.columnKeys.map((k) => {
-          return {
-            ...ProductionListColumns({
-              bodyshop,
-              technician,
-              refetch,
-              state,
-              data: data,
-              activeStatuses: bodyshop.md_ro_statuses.active_statuses,
-              treatments: { Production_List_Status_Colors, Enhanced_Payroll }
-            }).find((e) => e.key === k.key),
-            width: k.width ?? 100
-          };
-        })) ||
-      [];
-    setColumns(newColumns);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Only update columns if they haven't been manually changed by the user
+    if (_.isEqual(initialColumnsRef.current, columns)) {
+      setColumns(newColumns);
+    }
   }, [
-    //state,
     matchingColumnConfig,
     bodyshop,
     technician,
-    data
-  ]); //State removed from dependency array as it causes race condition when removing columns from table view and is not needed.
+    data,
+    Enhanced_Payroll,
+    Production_List_Status_Colors,
+    refetch,
+    state,
+    columns
+  ]);
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({
+    const newState = {
       ...state,
       filteredInfo: filters,
       sortedInfo: { columnKey: sorter.columnKey, order: sorter.order }
-    });
+    };
+    if (!_.isEqual(newState, state)) {
+      setState(newState);
+      setHasUnsavedChanges(true);
+    }
   };
 
   const onDragEnd = (fromIndex, toIndex) => {
-    const columnsCopy = columns.slice();
-    const item = columnsCopy.splice(fromIndex, 1)[0];
-    columnsCopy.splice(toIndex, 0, item);
-    setColumns(columnsCopy);
+    if (fromIndex === toIndex) return;
+
+    const columnsCopy = [...columns];
+    const [movedItem] = columnsCopy.splice(fromIndex, 1);
+    columnsCopy.splice(toIndex, 0, movedItem);
+
+    if (!_.isEqual(columnsCopy, columns)) {
+      setColumns(columnsCopy);
+      setHasUnsavedChanges(true);
+    }
   };
 
   const removeColumn = (e) => {
     const { key } = e;
     const newColumns = columns.filter((i) => i.key !== key);
-    setColumns(newColumns);
+
+    if (!_.isEqual(newColumns, columns)) {
+      setColumns(newColumns);
+      setHasUnsavedChanges(true);
+    }
   };
 
   const handleResize =
@@ -131,9 +155,21 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         ...nextColumns[index],
         width: size.width
       };
-      setColumns(nextColumns);
+
+      if (!_.isEqual(nextColumns, columns)) {
+        setColumns(nextColumns);
+        setHasUnsavedChanges(true);
+      }
     };
 
+  const addColumn = (newColumn) => {
+    const updatedColumns = [...columns, newColumn];
+    if (!_.isEqual(updatedColumns, columns)) {
+      setColumns(updatedColumns);
+      setHasUnsavedChanges(true);
+    }
+  };
+
   const headerItem = (col) => {
     const menu = {
       onClick: removeColumn,
@@ -152,29 +188,29 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     );
   };
 
-  const dataSource =
-    searchText === ""
-      ? data
-      : data.filter(
-          (j) =>
-            (j.ro_number || "").toString().toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.ownr_co_nm || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.ownr_fn || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.ownr_ln || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.status || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.ins_co_nm || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.v_model_desc || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.v_make_desc || "").toLowerCase().includes(searchText.toLowerCase())
-        );
+  const resetChanges = () => {
+    setState(initialStateRef.current);
+    setColumns(initialColumnsRef.current);
+    setHasUnsavedChanges(false);
+  };
 
-  // const handleSelectRecord = (record) => {
-  //   if (selected !== record.id) {
-  //     setSelected(record.id);
-  //   } else {
-  //     setSelected(null);
-  //   }
-  // };
+  const filterData = (item, searchText) => {
+    const fieldsToSearch = [
+      item.ro_number,
+      item.ownr_co_nm,
+      item.ownr_fn,
+      item.ownr_ln,
+      item.status,
+      item.ins_co_nm,
+      item.clm_no,
+      item.v_model_desc,
+      item.v_make_desc
+    ];
+
+    return fieldsToSearch.some((field) => (field || "").toString().toLowerCase().includes(searchText.toLowerCase()));
+  };
+
+  const dataSource = searchText === "" ? data : data.filter((j) => filterData(j, searchText));
 
   if (!!!columns) return <div>No columns found.</div>;
 
@@ -186,8 +222,29 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     .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);
+
   return (
     <div>
+      <Prompt when={hasUnsavedChanges} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
+      {hasUnsavedChanges && (
+        <AlertComponent
+          type="warning"
+          message={
+            <div>
+              <span>{t("general.messages.unsavedchanges")} </span>
+              <span
+                onClick={resetChanges}
+                style={{
+                  cursor: "pointer",
+                  textDecoration: "underline"
+                }}
+              >
+                {t("general.actions.reset")}
+              </span>
+            </div>
+          }
+        />
+      )}
       <PageHeader
         title={
           <Space>
@@ -199,20 +256,37 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         }
         extra={
           <Space wrap>
-            <Button onClick={() => refetch && refetch()}>
+            <Button
+              onClick={() => {
+                refetch && refetch();
+              }}
+            >
               <SyncOutlined />
             </Button>
-            <ProductionListColumnsAdd columnState={[columns, setColumns]} tableState={state} data={data} />
-            <ProductionListSaveConfigButton columns={columns} tableState={state} />
-
-            <ProductionListTableViewSelect
-              state={state}
-              setState={setState}
-              setColumns={setColumns}
-              refetch={refetch}
+            <ProductionListColumnsAdd
+              columnState={[columns, setColumns]}
+              tableState={state}
               data={data}
+              onColumnAdd={addColumn}
             />
 
+            <ProductionListConfigManager
+              columns={columns}
+              setColumns={setColumns}
+              state={state}
+              setState={setState}
+              refetch={refetch}
+              data={data}
+              bodyshop={bodyshop}
+              technician={technician}
+              currentUser={currentUser}
+              setHasUnsavedChanges={setHasUnsavedChanges}
+              hasUnsavedChanges={hasUnsavedChanges}
+              onSave={() => {
+                setHasUnsavedChanges(false);
+                initialStateRef.current = state;
+              }}
+            />
             <Input
               onChange={(e) => setSearchText(e.target.value)}
               placeholder={t("general.labels.search")}

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

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { getOrderOperatorsByType, getWhereOperatorsByType } from "../../utils/graphQLmodifier";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { generateInternalReflections } from "./report-center-modal-utils";
-import { FormDatePicker } from "../form-date-picker/form-date-picker.component.jsx";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function ReportCenterModalFiltersSortersComponent({ form, bodyshop }) {
   return (
@@ -196,7 +196,8 @@ function FiltersSection({ filters, form, bodyshop }) {
                                 // We have a type of date, so we will use a date picker
                                 if (type === "date") {
                                   return (
-                                    <FormDatePicker
+                                    <DateTimePicker
+                                      isDateOnly
                                       disabled={!operator}
                                       onChange={(date) => form.setFieldValue(fieldPath, date)}
                                     />

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

@@ -4,7 +4,7 @@ import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function ScoreboardEntryEdit({ entry }) {
   const [open, setOpen] = useState(false);
@@ -52,7 +52,7 @@ export default function ScoreboardEntryEdit({ entry }) {
                   }
                 ]}
               >
-                <FormDatePicker />
+                <DateTimePicker isDateOnly />
               </Form.Item>
               <Form.Item
                 label={t("scoreboard.fields.bodyhrs")}

client/src/components/shop-employees/shop-employees-add-vacation.component.jsx

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_VACATION } from "../../graphql/employees.queries";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 export default function ShopEmployeeAddVacation({ employee }) {
   const { t } = useTranslation();
@@ -64,7 +64,7 @@ export default function ShopEmployeeAddVacation({ employee }) {
             }
           ]}
         >
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
         <Form.Item
           label={t("employees.fields.vacation.end")}
@@ -90,7 +90,7 @@ export default function ShopEmployeeAddVacation({ employee }) {
             })
           ]}
         >
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
 
         <Space wrap>

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

@@ -21,12 +21,12 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
 import queryString from "query-string";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -266,10 +266,10 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
               }
             ]}
           >
-            <FormDatePicker />
+            <DateTimePicker isDateOnly />
           </Form.Item>
           <Form.Item label={t("employees.fields.termination_date")} name="termination_date">
-            <FormDatePicker />
+            <DateTimePicker isDateOnly />
           </Form.Item>
           <Form.Item
             label={t("employees.fields.user_email")}

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

@@ -30,219 +30,226 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
   return (
     <RbacWrapper action="shop:rbac">
       <LayoutFormRow>
-        {...HasFeatureAccess({ featureName: "export", bodyshop }) ? [
-          <Form.Item
-            label={t("bodyshop.fields.rbac.accounting.exportlog")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "accounting:exportlog"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.accounting.payables")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "accounting:payables"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.accounting.payments")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "accounting:payments"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.accounting.receivables")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "accounting:receivables"]}
-          >
-            <InputNumber />
-          </Form.Item>
-        ]:[]}
-        {...HasFeatureAccess({ featureName: "bills", bodyshop }) ? [
-          <Form.Item
-            label={t("bodyshop.fields.rbac.bills.delete")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "bills:delete"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.bills.enter")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "bills:enter"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.bills.list")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "bills:list"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.bills.reexport")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "bills:reexport"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.bills.view")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "bills:view"]}
-          >
-            <InputNumber />
-          </Form.Item>
-        ]:[]}
-
-        {...HasFeatureAccess({ featureName: "courtesycars", bodyshop }) ? [
-          <Form.Item
-            label={t("bodyshop.fields.rbac.contracts.create")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "contracts:create"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.contracts.detail")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "contracts:detail"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.contracts.list")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "contracts:list"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.courtesycar.create")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "courtesycar:create"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.courtesycar.detail")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "courtesycar:detail"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.courtesycar.list")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "courtesycar:list"]}
-          >
-            <InputNumber />
-          </Form.Item>
-        ]:[]}
-        {...HasFeatureAccess({ featureName: "csi", bodyshop }) ? [
-          <Form.Item
-            label={t("bodyshop.fields.rbac.csi.export")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "csi:export"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.csi.page")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "csi:page"]}
-          >
-            <InputNumber />
-          </Form.Item>
-        ]:[]}
+        {...HasFeatureAccess({ featureName: "export", bodyshop })
+          ? [
+              <Form.Item
+                label={t("bodyshop.fields.rbac.accounting.exportlog")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "accounting:exportlog"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.accounting.payables")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "accounting:payables"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.accounting.payments")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "accounting:payments"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.accounting.receivables")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "accounting:receivables"]}
+              >
+                <InputNumber />
+              </Form.Item>
+            ]
+          : []}
+        {...HasFeatureAccess({ featureName: "bills", bodyshop })
+          ? [
+              <Form.Item
+                label={t("bodyshop.fields.rbac.bills.delete")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "bills:delete"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.bills.enter")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "bills:enter"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.bills.list")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "bills:list"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.bills.reexport")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "bills:reexport"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.bills.view")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "bills:view"]}
+              >
+                <InputNumber />
+              </Form.Item>
+            ]
+          : []}
+        {...HasFeatureAccess({ featureName: "courtesycars", bodyshop })
+          ? [
+              <Form.Item
+                label={t("bodyshop.fields.rbac.contracts.create")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "contracts:create"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.contracts.detail")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "contracts:detail"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.contracts.list")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "contracts:list"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.courtesycar.create")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "courtesycar:create"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.courtesycar.detail")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "courtesycar:detail"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.courtesycar.list")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "courtesycar:list"]}
+              >
+                <InputNumber />
+              </Form.Item>
+            ]
+          : []}
+        {...HasFeatureAccess({ featureName: "csi", bodyshop })
+          ? [
+              <Form.Item
+                label={t("bodyshop.fields.rbac.csi.export")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "csi:export"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.csi.page")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "csi:page"]}
+              >
+                <InputNumber />
+              </Form.Item>
+            ]
+          : []}
         <Form.Item
           label={t("bodyshop.fields.rbac.employees.page")}
           rules={[
@@ -255,6 +262,18 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
+        <Form.Item
+          label={t("bodyshop.fields.rbac.employee_teams.page")}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+          name={["md_rbac", "employee_teams:page"]}
+        >
+          <InputNumber />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.fields.rbac.jobs.admin")}
           rules={[
@@ -435,31 +454,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
         >
           <InputNumber />
         </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.employees.page")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "employees:page"]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.rbac.employee_teams.page")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_rbac", "employee_teams:page"]}
-        >
-          <InputNumber />
-        </Form.Item>
-
         <Form.Item
           label={t("bodyshop.fields.rbac.payments.enter")}
           rules={[
@@ -522,7 +516,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
             <InputNumber />
           </Form.Item>
         )}
-
         <Form.Item
           label={t("bodyshop.fields.rbac.production.list")}
           rules={[
@@ -561,128 +554,118 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
             <InputNumber />
           </Form.Item>
         )}
-        {...HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? [
-          <Form.Item
-            label={t("bodyshop.fields.rbac.shiftclock.view")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "shiftclock:view"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.shop.config")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "shop:config"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.timetickets.edit")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "timetickets:edit"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "timetickets:shiftedit"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.timetickets.editcommitted")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "timetickets:editcommitted"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.ttapprovals.view")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "ttapprovals:view"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.ttapprovals.approve")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "ttapprovals:approve"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.timetickets.enter")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "timetickets:enter"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.timetickets.list")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "timetickets:list"]}
-          >
-            <InputNumber />
-          </Form.Item>,
-          <Form.Item
-            label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-            name={["md_rbac", "timetickets:shiftedit"]}
-          >
-            <InputNumber />
-          </Form.Item>
-        ]:[]}
+        {...HasFeatureAccess({ featureName: "timetickets", bodyshop })
+          ? [
+              <Form.Item
+                label={t("bodyshop.fields.rbac.shiftclock.view")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "shiftclock:view"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.shop.config")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "shop:config"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.timetickets.edit")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "timetickets:edit"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.timetickets.shiftedit")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "timetickets:shiftedit"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.timetickets.editcommitted")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "timetickets:editcommitted"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.ttapprovals.view")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "ttapprovals:view"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.ttapprovals.approve")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "ttapprovals:approve"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.timetickets.enter")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "timetickets:enter"]}
+              >
+                <InputNumber />
+              </Form.Item>,
+              <Form.Item
+                label={t("bodyshop.fields.rbac.timetickets.list")}
+                rules={[
+                  {
+                    required: true
+                    //message: t("general.validation.required"),
+                  }
+                ]}
+                name={["md_rbac", "timetickets:list"]}
+              >
+                <InputNumber />
+              </Form.Item>
+            ]
+          : []}
         <Form.Item
           label={t("bodyshop.fields.rbac.shop.vendors")}
           rules={[
@@ -757,7 +740,6 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
             <InputNumber />
           </Form.Item>
         )}
-
         <Form.Item
           label={t("bodyshop.fields.rbac.users.editaccess")}
           rules={[

client/src/components/task-upsert-modal/task-upsert-modal.component.jsx

@@ -1,14 +1,13 @@
 import { Col, Form, Input, Row, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FormDatePicker } from "../form-date-picker/form-date-picker.component.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import dayjs from "../../utils/day";
 import { connect } from "react-redux";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component.jsx";
-import { FormDateTimePickerEnhanced } from "../form-date-time-picker-enhanced/form-date-time-picker-enhanced.component.jsx";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -246,7 +245,8 @@ export function TaskUpsertModalComponent({
         </Col>
         <Col span={8}>
           <Form.Item label={t("tasks.fields.due_date")} name="due_date">
-            <FormDatePicker
+            <DateTimePicker
+              isDateOnly
               onlyFuture
               format="MM/DD/YYYY"
               presets={generatePresets(selectedJobDetails)}
@@ -278,12 +278,7 @@ export function TaskUpsertModalComponent({
               }
             ]}
           >
-            <FormDateTimePickerEnhanced
-              onlyFuture
-              showTime
-              minuteStep={15}
-              presets={generatePresets(selectedJobDetails)}
-            />
+            <DateTimePicker onlyFuture presets={generatePresets(selectedJobDetails)} />
           </Form.Item>
         </Col>
       </Row>

client/src/components/tech-job-print-tickets/tech-job-print-tickets.component.jsx

@@ -1,5 +1,4 @@
 import { Button, Card, DatePicker, Form, Popover, Radio, Space } from "antd";
-import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,10 +6,12 @@ import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import DatePIckerRanges from "../../utils/DatePickerRanges";
+import dayjs from "../../utils/day";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 
 const mapStateToProps = createStructuredSelector({
+  bodyshop: selectTechnician,
   technician: selectTechnician
 });
 const mapDispatchToProps = (dispatch) => ({
@@ -18,7 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(TechJobPrintTickets);
 
-export function TechJobPrintTickets({ technician, event, attendacePrint }) {
+export function TechJobPrintTickets({ bodyshop, technician, event, attendacePrint }) {
   const { t } = useTranslation();
 
   const [loading, setLoading] = useState(false);
@@ -57,7 +58,8 @@ export function TechJobPrintTickets({ technician, event, attendacePrint }) {
           subject:
             attendacePrint === true ? Templates.attendance_employee.subject : Templates.timetickets_employee.subject
         },
-        values.sendby // === "email" ? "e" : "p"
+        values.sendby,
+        bodyshop
       );
     } catch (error) {
       console.log(error);

client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx

@@ -7,9 +7,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.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
@@ -71,7 +71,7 @@ export function TimeTicketListTeamPay({ bodyshop, context, actions }) {
                 }
               ]}
             >
-              <FormDatePicker />
+              <DateTimePicker isDateOnly />
             </Form.Item>
           </LayoutFormRow>
 

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -1,6 +1,6 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Checkbox, Space, Table } from "antd";
-import dayjs from "../../utils/day";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,10 +10,10 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectAuthLevel, selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { onlyUnique } from "../../utils/arrayHelper";
+import dayjs from "../../utils/day";
 import { alphaSort, dateSort } from "../../utils/sorters";
-import RbacWrapper, { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -52,6 +52,10 @@ export function TimeTicketList({
     splitKey: bodyshop.imexshopid
   });
 
+  const canEditCommittedTimeTickets = HasRbacAccess({ bodyshop, authLevel, action: "timetickets:editcommitted" });
+  const canEditTimeTickets = HasRbacAccess({ bodyshop, authLevel, action: "timetickets:edit" });
+  const canEditShiftTickets = HasRbacAccess({ bodyshop, authLevel, action: "timetickets:shiftedit" });
+
   const totals = useMemo(() => {
     if (timetickets)
       return timetickets.reduce(
@@ -65,6 +69,18 @@ export function TimeTicketList({
     return { productivehrs: 0, actualhrs: 0 };
   }, [timetickets]);
 
+  const isDisabled = (record) => {
+    if (disabled === true || !record.id) return true;
+
+    const isShiftTicket = !record.ciecacode;
+    const isCommitted = record.committed_at;
+    if (isShiftTicket) {
+      return !(canEditShiftTickets && (!isCommitted || canEditCommittedTimeTickets));
+    }
+    
+    return !(canEditTimeTickets && (!isCommitted || canEditCommittedTimeTickets));
+  };
+
   const columns = [
     ...(Enhanced_Payroll.treatment === "on"
       ? [
@@ -165,7 +181,7 @@ export function TimeTicketList({
       key: "memo",
       sorter: (a, b) => alphaSort(a.memo, b.memo),
       sortOrder: state.sortedInfo.columnKey === "memo" && state.sortedInfo.order,
-      render: (text, record) => (record.clockon || record.clockoff ? t(record.memo) : record.memo)
+      render: (text, record) => (record.memo?.startsWith("timetickets.labels") ? t(record.memo) : record.memo)
     },
     ...(Enhanced_Payroll.treatment === "on"
       ? [
@@ -206,76 +222,55 @@ export function TimeTicketList({
                 return null;
               }
             }
-          },
-  
+          }
         ]),
-        {
-          title: t("timetickets.fields.created_by"),
-          dataIndex: "created_by",
-          key: "created_by",
-          sorter: (a, b) => alphaSort(a.created_by, b.created_by),
-          sortOrder: state.sortedInfo.columnKey === "created_by" && state.sortedInfo.order,
-          render: (text, record) => record.created_by
-        },
-        // {
-        //   title: "Pay",
-        //   dataIndex: "pay",
-        //   key: "pay",
-        //   render: (text, record) =>
-        //     Dinero({ amount: Math.round(record.rate * 100) })
-        //       .multiply(record.flat_rate ? record.productivehrs : record.actualhrs)
-        //       .toFormat("$0.00"),
-        // },
-        {
-          title: t("general.labels.actions"),
-          dataIndex: "actions",
-          key: "actions",
-          render: (text, record) => (
-            <Space wrap>
-              {techConsole && (
-                <TimeTicketEnterButton
-                  actions={{ refetch }}
-                  context={{ id: record.id, timeticket: record }}
-                  disabled={!record.job || disabled}
-                >
-                  <EditFilled />
-                </TimeTicketEnterButton>
-              )}
-              {!techConsole && (
-                <RbacWrapper
-                  action="timetickets:edit"
-                  noauth={() => {
-                    return <div />;
-                  }}
-                >
-                  <TimeTicketEnterButton
-                    actions={{ refetch }}
-                    context={{
-                      id: record.id,
-                      timeticket: record
-                    }}
-                    disabled={
-                      HasRbacAccess({
-                        bodyshop,
-                        authLevel: authLevel,
-                        action: "timetickets:editcommitted"
-                      }) &&
-                      HasRbacAccess({
-                        bodyshop,
-                        authLevel: authLevel,
-                        action: "timetickets:shiftedit"
-                      })
-                        ? disabled
-                        : !record.jobid
-                    }
-                  >
-                    <EditFilled />
-                  </TimeTicketEnterButton>
-                </RbacWrapper>
-              )}
-            </Space>
-          )
-        }
+    {
+      title: t("timetickets.fields.created_by"),
+      dataIndex: "created_by",
+      key: "created_by",
+      sorter: (a, b) => alphaSort(a.created_by, b.created_by),
+      sortOrder: state.sortedInfo.columnKey === "created_by" && state.sortedInfo.order,
+      render: (text, record) => record.created_by
+    },
+    // {
+    //   title: "Pay",
+    //   dataIndex: "pay",
+    //   key: "pay",
+    //   render: (text, record) =>
+    //     Dinero({ amount: Math.round(record.rate * 100) })
+    //       .multiply(record.flat_rate ? record.productivehrs : record.actualhrs)
+    //       .toFormat("$0.00"),
+    // },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <Space wrap>
+          {techConsole && (
+            <TimeTicketEnterButton
+              actions={{ refetch }}
+              context={{ id: record.id, timeticket: record }}
+              disabled={!record.job || disabled}
+            >
+              <EditFilled />
+            </TimeTicketEnterButton>
+          )}
+          {!techConsole && (
+            <TimeTicketEnterButton
+              actions={{ refetch }}
+              context={{
+                id: record.id,
+                timeticket: record
+              }}
+              disabled={isDisabled(record)}
+            >
+              <EditFilled />
+            </TimeTicketEnterButton>
+          )}
+        </Space>
+      )
+    }
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -1,4 +1,5 @@
 import { useLazyQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Form, Input, InputNumber, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -7,8 +8,10 @@ import { createStructuredSelector } from "reselect";
 import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
 import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-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 {
+  default as DateTimePicker,
+  default as FormDateTimePicker
+} from "../form-date-time-picker/form-date-time-picker.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 import { CalculateAllocationsTotals } from "../labor-allocations-table/labor-allocations-table.utility";
@@ -16,7 +19,6 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -60,8 +62,8 @@ export function TimeTicketModalComponent({
               {item.cost_center === "timetickets.labels.shift"
                 ? t(item.cost_center)
                 : bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || Enhanced_Payroll.treatment === "on"
-                ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
-                : item.cost_center}
+                  ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
+                  : item.cost_center}
             </Select.Option>
           ))}
       </Select>
@@ -69,13 +71,7 @@ export function TimeTicketModalComponent({
   };
 
   const MemoInput = ({ value, ...props }) => {
-    return (
-      <Input
-        value={value?.startsWith("timetickets.") ? t(value) : value}
-        {...props}
-        disabled={value?.startsWith("timetickets.") || disabled}
-      />
-    );
+    return <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />;
   };
 
   return (
@@ -111,7 +107,7 @@ export function TimeTicketModalComponent({
             }
           ]}
         >
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
         <Form.Item
           name="employeeid"
@@ -333,7 +329,9 @@ export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideT
         timetickets={lineTicketData.timetickets}
         adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
       />
-      {!hideTimeTickets && <TimeTicketList loading={loading} timetickets={lineTicketData.timetickets} techConsole />}
+      {!hideTimeTickets && (
+        <TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole />
+      )}
     </div>
   );
 }

client/src/components/time-ticket-shift-active/time-ticket-shift-active.component.jsx

@@ -39,7 +39,7 @@ export default function TimeTicketShiftActive({ timetickets, refetch, isTechCons
               renderItem={(ticket) => (
                 <List.Item>
                   <Card
-                    title={t(ticket.memo)}
+                    title={ticket.memo?.startsWith("timetickets.labels") ? t(ticket.memo) : ticket.memo}
                     actions={[
                       <TechClockOffButton
                         jobId={ticket.jobid}

client/src/components/update-alert/update-alert.component.jsx

@@ -31,7 +31,7 @@ export function UpdateAlert({ updateAvailable }) {
           () => {
             r.update();
           },
-          10 * 60 * 1000
+          30 * 60 * 1000
         );
       }
     },

client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx

@@ -1,9 +1,9 @@
 import { Form, Input } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.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 VehicleDetailFormComponent({ form, loading }) {
   const { t } = useTranslation();
@@ -102,7 +102,7 @@ export default function VehicleDetailFormComponent({ form, loading }) {
           <Input />
         </Form.Item>
         <Form.Item label={t("vehicles.fields.v_prod_dt")} name="v_prod_dt">
-          <FormDatePicker />
+          <DateTimePicker isDateOnly />
         </Form.Item>
 
         <Form.Item label={t("vehicles.fields.v_paint_codes", { number: 1 })} name={["v_paint_codes", "paint_cd1"]}>

client/src/contexts/SocketIO/socketContext.jsx

@@ -0,0 +1,13 @@
+import React, { createContext } from "react";
+import useSocket from "./useSocket"; // Import the custom hook
+
+// Create the SocketContext
+const SocketContext = createContext(null);
+
+export const SocketProvider = ({ children, bodyshop }) => {
+  const { socket, clientId } = useSocket(bodyshop);
+
+  return <SocketContext.Provider value={{ socket, clientId }}> {children}</SocketContext.Provider>;
+};
+
+export default SocketContext;

client/src/contexts/SocketIO/useSocket.js

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import SocketIO from "socket.io-client";
+import { auth } from "../../firebase/firebase.utils";
+
+const useSocket = (bodyshop) => {
+  const [socket, setSocket] = useState(null);
+  const [clientId, setClientId] = useState(null); // State to store unique identifier
+
+  useEffect(() => {
+    const handleBodyshopMessage = (message) => {
+      console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
+    };
+
+    if (bodyshop && bodyshop.id) {
+      const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "https://localhost:3000";
+
+      const socketInstance = SocketIO(endpoint, {
+        path: "/ws", // Ensure this matches the Vite proxy and backend path
+        withCredentials: true,
+        auth: async (callback) => {
+          const token = auth.currentUser && (await auth.currentUser.getIdToken());
+          callback({ token });
+        },
+        reconnectionAttempts: Infinity, // Try reconnecting forever
+        reconnectionDelay: 2000, // How long to wait between reconnection attempts
+        reconnectionDelayMax: 10000 // Maximum delay between attempts
+      });
+
+      setSocket(socketInstance);
+
+      // When the socket connects or reconnects, join the bodyshop room
+      const joinRoomOnConnect = () => {
+        console.log("Socket connected:", socketInstance.id);
+        setClientId(socketInstance.id);
+
+        if (bodyshop.id) {
+          socketInstance.emit("join-bodyshop-room", bodyshop.id);
+          console.log(`Joined bodyshop room: ${bodyshop.id}`);
+        }
+      };
+
+      // Set up the necessary socket event handlers
+      socketInstance.on("connect", joinRoomOnConnect);
+
+      socketInstance.on("reconnect", (attempt) => {
+        console.log(`Socket reconnected after ${attempt} attempts`);
+      });
+
+      socketInstance.on("bodyshop-message", handleBodyshopMessage);
+
+      socketInstance.on("connect_error", (err) => {
+        console.error("Socket connection error:", err);
+      });
+
+      socketInstance.on("disconnect", () => {
+        console.log("Socket disconnected");
+      });
+
+      // Clean up on component unmount or when bodyshop changes
+      return () => {
+        if (bodyshop?.id) {
+          socketInstance.emit("leave-bodyshop-room", bodyshop.id);
+        }
+        socketInstance.off("connect", joinRoomOnConnect);
+        socketInstance.off("bodyshop-message", handleBodyshopMessage);
+        socketInstance.disconnect();
+      };
+    }
+  }, [bodyshop]);
+
+  // Return both socket and clientId
+  return { socket, clientId };
+};
+
+export default useSocket;

client/src/firebase/firebase.utils.js

@@ -5,7 +5,6 @@ import { getFirestore } from "firebase/firestore";
 import { getMessaging, getToken, onMessage } from "firebase/messaging";
 import { store } from "../redux/store";
 import axios from "axios";
-import { checkBeta } from "../utils/handleBeta";
 
 const config = JSON.parse(import.meta.env.VITE_APP_FIREBASE_CONFIG);
 initializeApp(config);
@@ -88,7 +87,7 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
     operationName: eventName,
     variables: additionalParams,
     dbevent: false,
-    env: checkBeta() ? "beta" : "master"
+    env: "master"
   });
   // console.log(
   //   "%c[Analytics]",

client/src/graphql/jobs.queries.js

@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 
 export const QUERY_ALL_ACTIVE_JOBS_PAGINATED = gql`
-  query QUERY_ALL_JOBS_PAGINATED_STATUS_FILTERED(
+  query QUERY_ALL_ACTIVE_JOBS_PAGINATED(
     $offset: Int
     $limit: Int
     $order: [jobs_order_by!]

client/src/pages/dms-payables/dms-payables.container.jsx

@@ -1,20 +1,16 @@
 import { Button, Card, Col, notification, Row, Select, Space } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SocketIO from "socket.io-client";
 import DmsAllocationsSummaryApComponent from "../../components/dms-allocations-summary-ap/dms-allocations-summary-ap.component";
 import DmsLogEvents from "../../components/dms-log-events/dms-log-events.component";
-import { auth } from "../../firebase/firebase.utils";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import SocketContext from "../../contexts/SocketIO/socketContext";
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
+const mapStateToProps = createStructuredSelector({});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -23,20 +19,9 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
 
-export const socket = SocketIO(
-  import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : window.location.origin,
-  {
-    path: "/ws",
-    withCredentials: true,
-    auth: async (callback) => {
-      const token = auth.currentUser && (await auth.currentUser.getIdToken());
-      callback({ token });
-    }
-  }
-);
-
-export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
+export function DmsContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
+  const { socket } = useContext(SocketContext);
   const [logLevel, setLogLevel] = useState("DEBUG");
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
@@ -67,40 +52,43 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   useEffect(() => {
-    socket.on("connect", () => socket.emit("set-log-level", logLevel));
-    socket.on("reconnect", () => {
-      setLogs((logs) => {
-        return [
+    if (socket) {
+      const handleConnect = () => socket.emit("set-log-level", logLevel);
+      const handleReconnect = () => {
+        setLogs((logs) => [
           ...logs,
           {
             timestamp: new Date(),
             level: "WARNING",
             message: "Reconnected to CDK Export Service"
           }
-        ];
-      });
-    });
+        ]);
+      };
+      const handleLogEvent = (payload) => {
+        setLogs((logs) => [...logs, payload]);
+      };
+      const handleExportComplete = () => {
+        notification.open({
+          type: "success",
+          message: t("jobs.labels.dms.apexported")
+        });
+      };
 
-    socket.on("log-event", (payload) => {
-      setLogs((logs) => {
-        return [...logs, payload];
-      });
-    });
+      socket.on("connect", handleConnect);
+      socket.on("reconnect", handleReconnect);
+      socket.on("log-event", handleLogEvent);
+      socket.on("ap-export-complete", handleExportComplete);
 
-    socket.on("ap-export-complete", (payload) => {
-      notification.open({
-        type: "success",
-        message: t("jobs.labels.dms.apexported")
-      });
-    });
+      if (socket.disconnected) socket.connect();
 
-    if (socket.disconnected) socket.connect();
-    return () => {
-      socket.removeAllListeners();
-      socket.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      return () => {
+        socket.off("connect", handleConnect);
+        socket.off("reconnect", handleReconnect);
+        socket.off("log-event", handleLogEvent);
+        socket.off("ap-export-complete", handleExportComplete);
+      };
+    }
+  }, [socket, logLevel, t]);
 
   if (!state?.billids) {
     history(`/manage/accounting/payables`);
@@ -136,27 +124,20 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
                 <Button
                   onClick={() => {
                     setLogs([]);
-
-                    socket.disconnect();
-                    socket.connect();
+                    if (socket) {
+                      socket.emit("clear-dms-session");
+                    }
                   }}
                 >
-                  Reconnect
+                  Clear Session
                 </Button>
               </Space>
             }
           >
-            <DmsLogEvents socket={socket} logs={logs} />
+            <DmsLogEvents logs={logs} />
           </Card>
         </div>
       </Col>
     </Row>
   );
 }
-
-export const determineDmsType = (bodyshop) => {
-  if (bodyshop.cdk_dealerid) return "cdk";
-  else {
-    return "pbs";
-  }
-};

client/src/pages/dms/dms.container.jsx

@@ -1,12 +1,11 @@
 import { useQuery } from "@apollo/client";
 import { Button, Card, Col, notification, Result, Row, Select, Space } from "antd";
 import queryString from "query-string";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SocketIO from "socket.io-client";
 import AlertComponent from "../../components/alert/alert.component";
 import DmsAllocationsSummary from "../../components/dms-allocations-summary/dms-allocations-summary.component";
 import DmsCustomerSelector from "../../components/dms-customer-selector/dms-customer-selector.component";
@@ -14,12 +13,12 @@ import DmsLogEvents from "../../components/dms-log-events/dms-log-events.compone
 import DmsPostForm from "../../components/dms-post-form/dms-post-form.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { OwnerNameDisplayFunction } from "../../components/owner-name-display/owner-name-display.component";
-import { auth } from "../../firebase/firebase.utils";
 import { QUERY_JOB_EXPORT_DMS } from "../../graphql/jobs.queries";
 import { insertAuditTrail, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import SocketContext from "../../contexts/SocketIO/socketContext";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -28,25 +27,21 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
 
-export const socket = SocketIO(
-  import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "http://localhost:4000", // for dev testing,
-  {
-    path: "/ws",
-    withCredentials: true,
-    auth: async (callback) => {
-      const token = auth.currentUser && (await auth.currentUser.getIdToken());
-      callback({ token });
-    }
-  }
-);
-
 export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, insertAuditTrail }) {
   const { t } = useTranslation();
+  const { socket } = useContext(SocketContext);
   const [logLevel, setLogLevel] = useState("DEBUG");
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
@@ -59,6 +54,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+
   const logsRef = useRef(null);
 
   useEffect(() => {
@@ -83,47 +79,73 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   useEffect(() => {
-    socket.on("connect", () => socket.emit("set-log-level", logLevel));
-    socket.on("reconnect", () => {
-      setLogs((logs) => {
-        return [
+    if (socket) {
+      const handleConnect = () => {
+        socket.emit("set-log-level", logLevel);
+      };
+
+      const handleReconnect = () => {
+        setLogs((logs) => [
           ...logs,
           {
             timestamp: new Date(),
             level: "WARNING",
             message: "Reconnected to CDK Export Service"
           }
-        ];
-      });
-    });
-    socket.on("connect_error", (err) => {
-      console.log(`connect_error due to ${err}`, err);
-      notification.error({ message: err.message });
-    });
-    socket.on("log-event", (payload) => {
-      setLogs((logs) => {
-        return [...logs, payload];
-      });
-    });
-    socket.on("export-success", (payload) => {
-      notification.success({
-        message: t("jobs.successes.exported")
-      });
-      insertAuditTrail({
-        jobid: payload,
-        operation: AuditTrailMapping.jobexported(),
-        type: "jobexported"
-      });
-      history("/manage/accounting/receivables");
-    });
+        ]);
+      };
 
-    if (socket.disconnected) socket.connect();
-    return () => {
-      socket.removeAllListeners();
-      socket.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      const handleConnectError = (err) => {
+        console.log(`connect_error due to ${err}`, err);
+        notification.error({ message: err.message });
+      };
+
+      const handleLogEvent = (payload) => {
+        setLogs((logs) => [...logs, payload]);
+      };
+
+      const handleExportSuccess = async (payload) => {
+        notification.success({
+          message: t("jobs.successes.exported")
+        });
+        insertAuditTrail({
+          jobid: payload,
+          operation: AuditTrailMapping.jobexported(),
+          type: "jobexported"
+        });
+
+        try {
+          await new Promise((resolve, reject) => {
+            socket.emit("clear-dms-session", (response) => {
+              if (response && response.status === "ok") {
+                resolve();
+              } else {
+                reject(new Error("Failed to clear DMS session"));
+              }
+            });
+          });
+        } catch (error) {
+          console.error("Failed to clear DMS session", error);
+        }
+
+        history("/manage/accounting/receivables");
+      };
+
+      socket.on("connect", handleConnect);
+      socket.on("reconnect", handleReconnect);
+      socket.on("connect_error", handleConnectError);
+      socket.on("log-event", handleLogEvent);
+      socket.on("export-success", handleExportSuccess);
+
+      return () => {
+        socket.off("connect", handleConnect);
+        socket.off("reconnect", handleReconnect);
+        socket.off("connect_error", handleConnectError);
+        socket.off("log-event", handleLogEvent);
+        socket.off("export-success", handleExportSuccess);
+      };
+    }
+  }, [socket, logLevel, t, insertAuditTrail, history]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
@@ -179,20 +201,21 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
                     <Select.Option key="WARNING">WARNING</Select.Option>
                     <Select.Option key="ERROR">ERROR</Select.Option>
                   </Select>
-                  <Button onClick={() => setLogs([])}>Clear Logs</Button>
+                  4<Button onClick={() => setLogs([])}>Clear Logs</Button>
                   <Button
                     onClick={() => {
                       setLogs([]);
-                      socket.disconnect();
-                      socket.connect();
+                      if (socket) {
+                        socket.emit("clear-dms-session");
+                      }
                     }}
                   >
-                    Reconnect
+                    Clear Session
                   </Button>
                 </Space>
               }
             >
-              <DmsLogEvents socket={socket} logs={logs} />
+              <DmsLogEvents logs={logs} />
             </Card>
           </div>
         </Col>

client/src/pages/manage/manage.page.component.jsx

@@ -1,6 +1,6 @@
 import { FloatButton, Layout, Spin } from "antd";
 // import preval from "preval.macro";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, Route, Routes } from "react-router-dom";
@@ -18,12 +18,12 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
-import { requestForToken } from "../../firebase/firebase.utils";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
@@ -110,17 +110,7 @@ const mapDispatchToProps = (dispatch) => ({});
 export function Manage({ conflict, bodyshop }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
-
-  useEffect(() => {
-    const widgetId = InstanceRenderManager({
-      imex: "IABVNO4scRKY11XBQkNr",
-      rome: "mQdqARMzkZRUVugJ6TdS"
-    });
-    window.noticeable.render("widget", widgetId);
-    requestForToken().catch((error) => {
-      console.error(`Unable to request for token.`, error);
-    });
-  }, []);
+  const { socket, clientId } = useContext(SocketContext);
 
   useEffect(() => {
     document.title = InstanceRenderManager({
@@ -129,6 +119,7 @@ export function Manage({ conflict, bodyshop }) {
       promanager: t("titles.promanager")
     });
   }, [t]);
+
   const AppRouteTable = (
     <Suspense
       fallback={
@@ -569,9 +560,16 @@ export function Manage({ conflict, bodyshop }) {
   else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent />;
   else PageContent = AppRouteTable;
 
+  const broadcastMessage = () => {
+    if (socket && bodyshop && bodyshop.id) {
+      console.log(`Broadcasting message to bodyshop ${bodyshop.id}:`);
+      socket.emit("broadcast-to-bodyshop", bodyshop.id, `Hello from ${clientId}`);
+    }
+  };
+
   return (
     <>
-      <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />
+      {import.meta.env.PROD && <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />}
       <Layout style={{ minHeight: "100vh" }} className="layout-container">
         <UpdateAlert />
         <HeaderContainer />
@@ -603,6 +601,8 @@ export function Manage({ conflict, bodyshop }) {
               </div>
               <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
             </div>
+            <button onClick={broadcastMessage}>Broadcast Message</button>
+
             <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
               Disclaimer & Notices
             </Link>

client/src/pages/tech-lookup/tech-lookup.container.jsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import RbacWrapperComponent from "../../components/rbac-wrapper/rbac-wrapper.component";
 import TechLookupJobsList from "../../components/tech-lookup-jobs-list/tech-lookup-jobs-list.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import TechLookupJobsDrawer from "../../components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component";
 
 export default function TechLookupContainer() {
   const { t } = useTranslation();
@@ -20,6 +21,7 @@ export default function TechLookupContainer() {
   return (
     <div>
       <RbacWrapperComponent action="jobs:list-active">
+        <TechLookupJobsDrawer />
         <TechLookupJobsList />
       </RbacWrapperComponent>
     </div>

client/src/pages/tech/tech.page.component.jsx

@@ -9,7 +9,6 @@ import ErrorBoundary from "../../components/error-boundary/error-boundary.compon
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import TechHeader from "../../components/tech-header/tech-header.component";
-import TechLookupJobsDrawer from "../../components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component";
 import TechSider from "../../components/tech-sider/tech-sider.component";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
@@ -68,7 +67,7 @@ export function TechPage({ technician }) {
       <Layout>
         <UpdateAlert />
         <TechHeader />
-        <TechLookupJobsDrawer />
+
         <TaskUpsertModalContainer />
         <Content className="tech-content-container">
           <ErrorBoundary>

client/src/redux/user/user.sagas.js

@@ -10,7 +10,7 @@ import {
   signInWithEmailAndPassword,
   signOut
 } from "firebase/auth";
-import { doc, getDoc, setDoc } from "firebase/firestore";
+import { arrayUnion, doc, getDoc, setDoc, updateDoc } from "firebase/firestore";
 import { getToken } from "firebase/messaging";
 import i18next from "i18next";
 import LogRocket from "logrocket";
@@ -48,6 +48,7 @@ import {
   validatePasswordResetSuccess
 } from "./user.actions";
 import UserActionTypes from "./user.types";
+import cleanAxios from "../../utils/CleanAxios";
 
 const fpPromise = FingerprintJS.load();
 
@@ -177,10 +178,24 @@ export function* setInstanceIdSaga({ payload: uid }) {
     // Get the visitor identifier when you need it.
     const fp = yield fpPromise;
     const result = yield fp.get();
-    yield setDoc(userInstanceRef, {
-      timestamp: new Date(),
-      fingerprint: result.visitorId
-    });
+    const res = yield cleanAxios.get("https://api.ipify.org/?format=json");
+    const udoc = yield getDoc(userInstanceRef);
+
+    if (!udoc.data()) {
+      yield setDoc(userInstanceRef, {
+        timestamp: new Date(),
+        fingerprint: result.visitorId,
+        //totalFingerprint: result,
+        ip: [res.data.ip]
+      });
+    } else {
+      yield updateDoc(userInstanceRef, {
+        timestamp: new Date(),
+        fingerprint: result.visitorId,
+        //totalFingerprint: result,
+        ip: arrayUnion(res.data.ip)
+      });
+    }
 
     yield put(setLocalFingerprint(result.visitorId));
     yield delay(5 * 60 * 1000);

client/src/translations/en_us/common.json

@@ -271,7 +271,8 @@
       },
       "errors": {
         "loading": "Unable to load shop details. Please call technical support.",
-        "saving": "Error encountered while saving. {{message}}"
+        "saving": "Error encountered while saving. {{message}}",
+        "creatingdefaultview": "Error creating default view."
       },
       "fields": {
         "ReceivableCustomField": "QBO Receivable Custom Field {{number}}",
@@ -699,7 +700,10 @@
         "workingdays": "Working Days"
       },
       "successes": {
-        "save": "Shop configuration saved successfully. "
+        "save": "Shop configuration saved successfully. ",
+        "unsavedchanges": "Unsaved changes will be lost. Are you sure you want to continue?",
+        "areyousure": "Are you sure you want to continue?",
+        "defaultviewcreated": "Default view created successfully."
       },
       "validation": {
         "centermustexist": "The chosen responsibility center does not exist.",
@@ -1161,7 +1165,8 @@
         "tryagain": "Try Again",
         "view": "View",
         "viewreleasenotes": "See What's Changed",
-        "remove_alert": "Are you sure you want to dismiss the alert?"
+        "remove_alert": "Are you sure you want to dismiss the alert?",
+        "saveas": "Save As"
       },
       "errors": {
         "fcm": "You must allow notification permissions to have real time messaging.  Click to try again.",
@@ -1176,6 +1181,7 @@
         "vehicle": "Vehicle"
       },
       "labels": {
+        "unsavedchanges": "Unsaved changes.",
         "actions": "Actions",
         "areyousure": "Are you sure?",
         "barcode": "Barcode",
@@ -1183,6 +1189,8 @@
         "clear": "Clear",
         "confirmpassword": "Confirm Password",
         "created_at": "Created At",
+        "date": "Select Date",
+        "datetime": "Select Date & Time",
         "email": "Email",
         "errors": "Errors",
         "excel": "Excel",
@@ -2731,6 +2739,9 @@
       }
     },
     "production": {
+      "constants": {
+        "main_profile": "Default"
+      },
       "options": {
         "small": "Small",
         "medium": "Medium",
@@ -2780,7 +2791,9 @@
       "errors": {
         "boardupdate": "Error encountered updating Job. {{message}}",
         "removing": "Error removing from production board. {{error}}",
-        "settings": "Error saving board settings: {{error}}"
+        "settings": "Error saving board settings: {{error}}",
+        "name_exists": "A Profile with this name already exists. Please choose a different name.",
+        "name_required": "Profile name is required."
       },
       "labels": {
         "kiosk_mode": "Kiosk Mode",
@@ -2833,7 +2846,9 @@
         "sublets": "Sublets",
         "totalhours": "Total Hrs ",
         "touchtime": "T/T",
-        "viewname": "View Name"
+        "viewname": "View Name",
+        "alerts": "Alerts",
+        "addnewprofile": "Add New Profile"
       },
       "successes": {
         "removed": "Job removed from production."

client/src/translations/fr/common.json

@@ -271,7 +271,8 @@
       },
       "errors": {
         "loading": "Impossible de charger les détails de la boutique. Veuillez appeler le support technique.",
-        "saving": ""
+        "saving": "",
+        "creatingdefaultview": ""
       },
       "fields": {
         "ReceivableCustomField": "",
@@ -699,7 +700,10 @@
         "workingdays": ""
       },
       "successes": {
-        "save": ""
+        "save": "",
+        "unsavedchanges": "",
+        "areyousure": "",
+        "defaultviewcreated": ""
       },
       "validation": {
         "centermustexist": "",
@@ -1161,7 +1165,8 @@
         "tryagain": "",
         "view": "",
         "viewreleasenotes": "",
-        "remove_alert": ""
+        "remove_alert": "",
+        "saveas": ""
       },
       "errors": {
         "fcm": "",
@@ -1176,6 +1181,7 @@
         "vehicle": ""
       },
       "labels": {
+        "unsavedchanges": "",
         "actions": "actes",
         "areyousure": "",
         "barcode": "code à barre",
@@ -1183,6 +1189,8 @@
         "clear": "",
         "confirmpassword": "",
         "created_at": "",
+        "date": "",
+        "datetime": "",
         "email": "",
         "errors": "",
         "excel": "",
@@ -2731,6 +2739,9 @@
       }
     },
     "production": {
+      "constants": {
+        "main_profile": ""
+      },
       "options": {
         "small": "",
         "medium": "",
@@ -2780,7 +2791,9 @@
       "errors": {
         "boardupdate": "",
         "removing": "",
-        "settings": ""
+        "settings": "",
+        "name_exists": "",
+        "name_required": ""
       },
       "labels": {
         "kiosk_mode": "",
@@ -2833,7 +2846,9 @@
         "sublets": "",
         "totalhours": "",
         "touchtime": "",
-        "viewname": ""
+        "viewname": "",
+        "alerts": "",
+        "addnewprofile": ""
       },
       "successes": {
         "removed": ""

client/src/utils/CleanAxios.js

@@ -2,9 +2,9 @@ import axios from "axios";
 import { auth } from "../firebase/firebase.utils";
 import InstanceRenderManager from "./instanceRenderMgr";
 
-axios.defaults.baseURL =
-  import.meta.env.VITE_APP_AXIOS_BASE_API_URL ||
-  (import.meta.env.MODE === "production" ? "https://api.imex.online/" : "http://localhost:4000/");
+axios.defaults.baseURL = import.meta.env.DEV
+  ? "/api/"
+  : import.meta.env.VITE_APP_AXIOS_BASE_API_URL || "https://api.imex.online/";
 
 export const axiosAuthInterceptorId = axios.interceptors.request.use(
   async (config) => {

client/src/utils/betaHandler.js

@@ -1,36 +0,0 @@
-export const BETA_KEY = "betaSwitchImex";
-
-export const checkBeta = () => {
-  const cookie = document.cookie.split("; ").find((row) => row.startsWith(BETA_KEY));
-  return cookie ? cookie.split("=")[1] === "true" : false;
-};
-
-export const setBeta = (value) => {
-  const domain = window.location.hostname.split(".").slice(-2).join(".");
-  document.cookie = `${BETA_KEY}=${value}; path=/; domain=.${domain}`;
-};
-
-export const handleBeta = () => {
-  // If the current host name does not start with beta or test, then we don't need to do anything.
-  if (window.location.hostname.startsWith("localhost")) {
-    console.log("Not on beta or test, so no need to handle beta.");
-    return;
-  }
-
-  const isBeta = checkBeta();
-
-  const currentHostName = window.location.hostname;
-
-  // Beta is enabled, but the current host name does start with beta.
-  if (isBeta && !currentHostName.startsWith("beta")) {
-    const href = `${window.location.protocol}//beta.${currentHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-    window.location.replace(href);
-  }
-
-  // Beta is not enabled, but the current host name does start with beta.
-  else if (!isBeta && currentHostName.startsWith("beta")) {
-    const href = `${window.location.protocol}//${currentHostName.replace("beta.", "")}${window.location.pathname}${window.location.search}${window.location.hash}`;
-    window.location.replace(href);
-  }
-};
-export default handleBeta;

client/src/utils/handleBeta.js

@@ -1,36 +0,0 @@
-export const BETA_KEY = "betaSwitchImex";
-
-export const checkBeta = () => {
-  const cookie = document.cookie.split("; ").find((row) => row.startsWith(BETA_KEY));
-  return cookie ? cookie.split("=")[1] === "true" : false;
-};
-
-export const setBeta = (value) => {
-  const domain = window.location.hostname.split(".").slice(-2).join(".");
-  document.cookie = `${BETA_KEY}=${value}; path=/; domain=.${domain}`;
-};
-
-export const handleBeta = () => {
-  // If the current host name does not start with beta or test, then we don't need to do anything.
-  if (window.location.hostname.startsWith("localhost")) {
-    console.log("Not on beta or test, so no need to handle beta.");
-    return;
-  }
-
-  const isBeta = checkBeta();
-
-  const currentHostName = window.location.hostname;
-
-  // Beta is enabled, but the current host name does start with beta.
-  if (isBeta && !currentHostName.startsWith("beta")) {
-    const href = `${window.location.protocol}//beta.${currentHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-    window.location.replace(href);
-  }
-
-  // Beta is not enabled, but the current host name does start with beta.
-  else if (!isBeta && currentHostName.startsWith("beta")) {
-    const href = `${window.location.protocol}//${currentHostName.replace("beta.", "")}${window.location.pathname}${window.location.search}${window.location.hash}`;
-    window.location.replace(href);
-  }
-};
-export default handleBeta;

client/vite.config.js

@@ -3,16 +3,21 @@ import { promises as fsPromises } from "fs";
 import { createRequire } from "module";
 import * as path from "path";
 import * as url from "url";
-import { defineConfig } from "vite";
+import { createLogger, defineConfig } from "vite";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import eslint from "vite-plugin-eslint";
 import { VitePWA } from "vite-plugin-pwa";
 import InstanceRenderManager from "./src/utils/instanceRenderMgr";
+import chalk from "chalk";
 
 process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString("en-US", {
   timeZone: "America/Los_Angeles"
 });
 
+const getFormattedTimestamp = () =>
+  new Date().toLocaleTimeString("en-US", { hour12: true }).replace("AM", "a.m.").replace("PM", "p.m.");
+
+/** This is a hack around react-virtualized, should be removed when switching to react-virtuoso */
 const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
 
 function reactVirtualizedFix() {
@@ -32,6 +37,11 @@ function reactVirtualizedFix() {
     }
   };
 }
+/** End of hack */
+
+export const logger = createLogger("info", {
+  allowClearScreen: false
+});
 
 export default defineConfig({
   base: "/",
@@ -99,7 +109,6 @@ export default defineConfig({
     reactVirtualizedFix(),
     react(),
     eslint()
-    // CompressionPlugin(), //Cloudfront already compresses assets, so not needed.
   ],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version)
@@ -107,7 +116,57 @@ export default defineConfig({
   server: {
     host: true,
     port: 3000,
-    open: true
+    open: true,
+    proxy: {
+      "/ws": {
+        target: "ws://localhost:4000",
+        rewriteWsOrigin: true,
+        secure: false,
+        ws: true
+      },
+      "/api": {
+        target: "http://localhost:4000",
+        changeOrigin: true,
+        secure: false,
+        ws: false,
+        rewrite: (path) => {
+          const replacedValue = path.replace(/^\/api/, "");
+          logger.info(
+            `${chalk.grey.bold(getFormattedTimestamp())} ${chalk.cyan.bold("[vite]")} ${chalk.green.bold("[API]")} ${chalk.blue(replacedValue)}`
+          );
+          return replacedValue;
+        }
+      }
+    },
+    https: {
+      key: await fsPromises.readFile("../certs/key.pem"),
+      cert: await fsPromises.readFile("../certs/cert.pem"),
+      allowHTTP1: false // Force HTTP/2
+    }
+  },
+  preview: {
+    port: 6000,
+    host: true,
+    open: true,
+    https: {
+      key: await fsPromises.readFile("../certs/key.pem"),
+      cert: await fsPromises.readFile("../certs/cert.pem"),
+      allowHTTP1: false // Force HTTP/2
+    },
+    proxy: {
+      "/ws": {
+        target: "ws://localhost:4000",
+        rewriteWsOrigin: true,
+        secure: false,
+        ws: true
+      },
+      "/api": {
+        target: "http://localhost:4000",
+        changeOrigin: true,
+        secure: false,
+        ws: false
+      }
+    }
   },
   build: {
     rollupOptions: {
@@ -121,7 +180,18 @@ export default defineConfig({
     }
   },
   optimizeDeps: {
-    include: ["react", "react-dom", "antd", "@apollo/client", "@reduxjs/toolkit", "axios"],
+    include: [
+      "react",
+      "react-dom",
+      "antd",
+      "@apollo/client",
+      "@reduxjs/toolkit",
+      "axios",
+      "react-router-dom",
+      "dayjs",
+      "redux",
+      "react-redux"
+    ],
     esbuildOptions: {
       loader: {
         ".js": "jsx"

firebase/readme.md

@@ -1,4 +1,4 @@
 Must set the environment variables using:
 
-firebase functions:config:set auth.graphql_endpoint="https://db.dev.bodyshop.app/v1/graphql"
+firebase functions:config:set auth.graphql_endpoint="https://db.dev.imex.online/v1/graphql"
 auth.hasura_secret_admin_key="Dev-BodyShopApp!"

hasura/config.yaml

@@ -1,5 +1,5 @@
 version: 2
-endpoint: https://db.dev.bodyshop.app
+endpoint: https://db.dev.imex.online
 admin_secret: Dev-BodyShopApp!
 metadata_directory: metadata
 actions:

hasura/metadata/cron_triggers.yaml

@@ -1,3 +1,27 @@
+- name: AutoHouse Data Pump
+  webhook: '{{HASURA_API_URL}}/data/ah'
+  schedule: 0 6 * * *
+  include_in_metadata: true
+  payload: {}
+  headers:
+    - name: x-imex-auth
+      value_from_env: DATAPUMP_AUTH
+- name: Claimscorp Data Pump
+  webhook: '{{HASURA_API_URL}}/data/cc'
+  schedule: 30 6 * * *
+  include_in_metadata: true
+  payload: {}
+  headers:
+    - name: x-imex-auth
+      value_from_env: DATAPUMP_AUTH
+- name: Kaizen Data Pump
+  webhook: '{{HASURA_API_URL}}/data/kaizen'
+  schedule: 30 5 * * *
+  include_in_metadata: true
+  payload: {}
+  headers:
+    - name: x-imex-auth
+      value_from_env: DATAPUMP_AUTH
 - name: Task Reminders
   webhook: '{{HASURA_API_URL}}/tasks-remind-handler'
   schedule: '*/15 * * * *'

hasura/metadata/tables.yaml

@@ -4240,6 +4240,63 @@
                 - active:
                     _eq: true
   event_triggers:
+    - name: job_modified
+      definition:
+        enable_manual: false
+        update:
+          columns:
+            - clm_no
+            - v_make_desc
+            - date_next_contact
+            - status
+            - employee_csr
+            - employee_prep
+            - clm_total
+            - suspended
+            - employee_body
+            - ro_number
+            - actual_in
+            - ownr_co_nm
+            - v_model_yr
+            - comment
+            - job_totals
+            - v_vin
+            - ownr_fn
+            - scheduled_completion
+            - special_coverage_policy
+            - v_color
+            - ca_gst_registrant
+            - scheduled_delivery
+            - actual_delivery
+            - actual_completion
+            - kanbanparent
+            - est_ct_fn
+            - employee_refinish
+            - ownr_ph1
+            - date_last_contacted
+            - alt_transport
+            - inproduction
+            - est_ct_ln
+            - production_vars
+            - category
+            - v_model_desc
+            - date_invoiced
+            - est_co_nm
+            - ownr_ln
+      retry_conf:
+        interval_sec: 10
+        num_retries: 0
+        timeout_sec: 60
+      webhook_from_env: HASURA_API_URL
+      headers:
+        - name: event-secret
+          value_from_env: EVENT_SECRET
+      request_transform:
+        method: POST
+        query_params: {}
+        template_engine: Kriti
+        url: '{{$base_url}}/job/job-updated'
+        version: 2
     - name: job_status_transition
       definition:
         enable_manual: true

package.json

@@ -19,17 +19,18 @@
     "makeitpretty": "prettier --write \"**/*.{css,js,json,jsx,scss}\""
   },
   "dependencies": {
-    "@aws-sdk/client-secrets-manager": "^3.629.0",
-    "@aws-sdk/client-ses": "^3.629.0",
-    "@aws-sdk/credential-provider-node": "^3.629.0",
-    "@opensearch-project/opensearch": "^2.11.0",
-    "aws4": "^1.13.1",
-    "axios": "^1.7.4",
+    "@aws-sdk/client-secrets-manager": "^3.645.0",
+    "@aws-sdk/client-ses": "^3.645.0",
+    "@aws-sdk/credential-provider-node": "^3.645.0",
+    "@opensearch-project/opensearch": "^2.12.0",
+    "@socket.io/redis-adapter": "^8.3.0",
+    "aws4": "^1.13.2",
+    "axios": "^1.7.7",
     "better-queue": "^3.8.12",
     "bluebird": "^3.7.2",
-    "body-parser": "^1.20.2",
+    "body-parser": "^1.20.3",
     "canvas": "^2.11.2",
-    "chart.js": "^4.4.3",
+    "chart.js": "^4.4.4",
     "cloudinary": "^2.4.0",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
@@ -37,8 +38,8 @@
     "csrf": "^3.1.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
-    "express": "^4.19.2",
-    "firebase-admin": "^12.3.1",
+    "express": "^4.20.0",
+    "firebase-admin": "^12.4.0",
     "graphql": "^16.9.0",
     "graphql-request": "^6.1.0",
     "graylog2": "^0.2.1",
@@ -49,14 +50,16 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.45",
     "multer": "^1.4.5-lts.1",
-    "node-mailjet": "^6.0.5",
+    "node-mailjet": "^6.0.6",
     "node-persist": "^4.0.3",
-    "nodemailer": "^6.9.14",
-    "phone": "^3.1.49",
+    "nodemailer": "^6.9.15",
+    "phone": "^3.1.50",
     "recursive-diff": "^1.0.9",
+    "redis": "^4.7.0",
     "rimraf": "^6.0.1",
-    "soap": "^1.1.1",
+    "soap": "^1.1.3",
     "socket.io": "^4.7.5",
+    "socket.io-adapter": "^2.5.5",
     "ssh2-sftp-client": "^10.0.3",
     "twilio": "^4.23.0",
     "uuid": "^10.0.0",

server.js

@@ -1,4 +1,3 @@
-// Import core modules
 const express = require("express");
 const cors = require("cors");
 const bodyParser = require("body-parser");
@@ -7,104 +6,307 @@ const compression = require("compression");
 const cookieParser = require("cookie-parser");
 const http = require("http");
 const { Server } = require("socket.io");
+const { createClient } = require("redis");
+const { createAdapter } = require("@socket.io/redis-adapter");
+const logger = require("./server/utils/logger");
 
 // Load environment variables
 require("dotenv").config({
   path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
 });
 
-// Import custom utilities and handlers
-const logger = require("./server/utils/logger");
+/**
+ * CORS Origin for Socket.IO
+ * @type {string[][]}
+ */
+const SOCKETIO_CORS_ORIGIN = [
+  "https://test.imex.online",
+  "https://www.test.imex.online",
+  "http://localhost:3000",
+  "https://imex.online",
+  "https://www.imex.online",
+  "https://romeonline.io",
+  "https://www.romeonline.io",
+  "https://beta.test.romeonline.io",
+  "https://www.beta.test.romeonline.io",
+  "https://beta.romeonline.io",
+  "https://www.beta.romeonline.io",
+  "https://beta.test.imex.online",
+  "https://www.beta.test.imex.online",
+  "https://beta.imex.online",
+  "https://www.beta.imex.online",
+  "https://www.test.promanager.web-est.com",
+  "https://test.promanager.web-est.com",
+  "https://www.promanager.web-est.com",
+  "https://www.promanager.web-est.com"
+];
 
-// Express app and server setup
-const app = express();
-const port = process.env.PORT || 5000;
-const server = http.createServer(app);
-const io = new Server(server, {
-  path: "/ws",
-  cors: {
-    origin: [
-      "https://test.imex.online",
-      "https://www.test.imex.online",
-      "http://localhost:3000",
-      "https://imex.online",
-      "https://www.imex.online",
-      "https://romeonline.io", //Added in all RO and PM routes to simplyify setup.
-      "https://www.romeonline.io",
-      "https://beta.test.romeonline.io",
-      "https://www.beta.test.romeonline.io",
-      "https://beta.romeonline.io",
-      "https://www.beta.romeonline.io",
-      "https://beta.test.imex.online",
-      "https://www.beta.test.imex.online",
-      "https://beta.imex.online",
-      "https://www.beta.imex.online",
-      "https://www.test.promanager.web-est.com",
-      "https://test.promanager.web-est.com",
-      "https://www.promanager.web-est.com",
-      "https://www.promanager.web-est.com"
-    ],
-    methods: ["GET", "POST"],
-    credentials: true,
-    exposedHeaders: ["set-cookie"]
+/**
+ * Middleware for Express app
+ * @param app
+ */
+const applyMiddleware = (app) => {
+  app.use(compression());
+  app.use(cookieParser());
+  app.use(bodyParser.json({ limit: "50mb" }));
+  app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));
+  app.use(cors({ credentials: true, exposedHeaders: ["set-cookie"] }));
+
+  // Helper middleware
+  app.use((req, res, next) => {
+    req.logger = logger;
+    next();
+  });
+};
+
+/**
+ * Route groupings for Express app
+ * @param app
+ */
+const applyRoutes = (app) => {
+  app.use("/", require("./server/routes/miscellaneousRoutes"));
+  app.use("/notifications", require("./server/routes/notificationsRoutes"));
+  app.use("/render", require("./server/routes/renderRoutes"));
+  app.use("/mixdata", require("./server/routes/mixDataRoutes"));
+  app.use("/accounting", require("./server/routes/accountingRoutes"));
+  app.use("/qbo", require("./server/routes/qboRoutes"));
+  app.use("/media", require("./server/routes/mediaRoutes"));
+  app.use("/sms", require("./server/routes/smsRoutes"));
+  app.use("/job", require("./server/routes/jobRoutes"));
+  app.use("/scheduling", require("./server/routes/schedulingRoutes"));
+  app.use("/utils", require("./server/routes/utilRoutes"));
+  app.use("/data", require("./server/routes/dataRoutes"));
+  app.use("/adm", require("./server/routes/adminRoutes"));
+  app.use("/tech", require("./server/routes/techRoutes"));
+  app.use("/intellipay", require("./server/routes/intellipayRoutes"));
+  app.use("/cdk", require("./server/routes/cdkRoutes"));
+  app.use("/csi", require("./server/routes/csiRoutes"));
+  app.use("/payroll", require("./server/routes/payrollRoutes"));
+
+  // Default route for forbidden access
+  app.get("/", (req, res) => {
+    res.status(200).send("Access Forbidden.");
+  });
+};
+
+/**
+ * Apply Redis to the server
+ * @param server
+ * @param app
+ */
+const applySocketIO = async (server, app) => {
+  // Redis client setup for Pub/Sub and Key-Value Store
+  const pubClient = createClient({ url: process.env.REDIS_URL || "redis://localhost:6379" });
+  const subClient = pubClient.duplicate();
+
+  pubClient.on("error", (err) => logger.log(`Redis pubClient error: ${err}`, "ERROR", "redis"));
+  subClient.on("error", (err) => logger.log(`Redis subClient error: ${err}`, "ERROR", "redis"));
+
+  try {
+    await Promise.all([pubClient.connect(), subClient.connect()]);
+    logger.log(`[${process.env.NODE_ENV}] Connected to Redis`, "INFO", "redis", "api");
+  } catch (redisError) {
+    logger.log("Failed to connect to Redis", "ERROR", "redis", redisError);
   }
-});
-exports.io = io;
 
-require("./server/web-sockets/web-socket");
+  process.on("SIGINT", async () => {
+    logger.log("Closing Redis connections...", "INFO", "redis", "api");
+    await Promise.all([pubClient.disconnect(), subClient.disconnect()]);
+    process.exit(0);
+  });
 
-// Middleware
-app.use(compression());
-app.use(cookieParser());
-app.use(bodyParser.json({ limit: "50mb" }));
-app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));
-app.use(cors({ credentials: true, exposedHeaders: ["set-cookie"] }));
+  const io = new Server(server, {
+    path: "/ws",
+    adapter: createAdapter(pubClient, subClient),
+    cors: {
+      origin: SOCKETIO_CORS_ORIGIN,
+      methods: ["GET", "POST"],
+      credentials: true,
+      exposedHeaders: ["set-cookie"]
+    }
+  });
 
-// Helper middleware
-app.use((req, res, next) => {
-  req.logger = logger;
-  next();
-});
+  app.use((req, res, next) => {
+    req.pubClient = pubClient;
+    req.io = io;
+    next();
+  });
 
-// Route groupings
-app.use("/", require("./server/routes/miscellaneousRoutes"));
-app.use("/notifications", require("./server/routes/notificationsRoutes"));
-app.use("/render", require("./server/routes/renderRoutes"));
-app.use("/mixdata", require("./server/routes/mixDataRoutes"));
-app.use("/accounting", require("./server/routes/accountingRoutes"));
-app.use("/qbo", require("./server/routes/qboRoutes"));
-app.use("/media", require("./server/routes/mediaRoutes"));
-app.use("/sms", require("./server/routes/smsRoutes"));
-app.use("/job", require("./server/routes/jobRoutes"));
-app.use("/scheduling", require("./server/routes/schedulingRoutes"));
-app.use("/utils", require("./server/routes/utilRoutes"));
-app.use("/data", require("./server/routes/dataRoutes"));
-app.use("/adm", require("./server/routes/adminRoutes"));
-app.use("/tech", require("./server/routes/techRoutes"));
-app.use("/intellipay", require("./server/routes/intellipayRoutes"));
-app.use("/cdk", require("./server/routes/cdkRoutes"));
-app.use("/csi", require("./server/routes/csiRoutes"));
-app.use("/payroll", require("./server/routes/payrollRoutes"));
+  Object.assign(module.exports, { io, pubClient });
 
-// Default route for forbidden access
-app.get("/", (req, res) => {
-  res.status(200).send("Access Forbidden.");
-});
+  return { pubClient, io };
+};
 
+/**
+ * Apply Redis helper functions
+ * @param pubClient
+ * @param app
+ */
+const applyRedisHelpers = (pubClient, app) => {
+  // Store session data in Redis
+  const setSessionData = async (socketId, key, value) => {
+    await pubClient.hSet(`socket:${socketId}`, key, JSON.stringify(value)); // Use Redis pubClient
+  };
+
+  // Retrieve session data from Redis
+  const getSessionData = async (socketId, key) => {
+    const data = await pubClient.hGet(`socket:${socketId}`, key);
+    return data ? JSON.parse(data) : null;
+  };
+
+  // Clear session data from Redis
+  const clearSessionData = async (socketId) => {
+    await pubClient.del(`socket:${socketId}`);
+  };
+
+  // Store multiple session data in Redis
+  const setMultipleSessionData = async (socketId, keyValues) => {
+    // keyValues is expected to be an object { key1: value1, key2: value2, ... }
+    const entries = Object.entries(keyValues).map(([key, value]) => [key, JSON.stringify(value)]);
+    await pubClient.hSet(`socket:${socketId}`, ...entries.flat());
+  };
+
+  // Retrieve multiple session data from Redis
+  const getMultipleSessionData = async (socketId, keys) => {
+    const data = await pubClient.hmGet(`socket:${socketId}`, keys);
+    // Redis returns an object with null values for missing keys, so we parse the non-null ones
+    return Object.fromEntries(keys.map((key, index) => [key, data[index] ? JSON.parse(data[index]) : null]));
+  };
+
+  const setMultipleFromArraySessionData = async (socketId, keyValueArray) => {
+    // Use Redis multi/pipeline to batch the commands
+    const multi = pubClient.multi();
+
+    keyValueArray.forEach(([key, value]) => {
+      multi.hSet(`socket:${socketId}`, key, JSON.stringify(value));
+    });
+
+    await multi.exec(); // Execute all queued commands
+  };
+
+  // Helper function to add an item to the end of the Redis list
+  const addItemToEndOfList = async (socketId, key, newItem) => {
+    try {
+      await pubClient.rPush(`socket:${socketId}:${key}`, JSON.stringify(newItem));
+    } catch (error) {
+      console.error(`Error adding item to the end of the list for socket ${socketId}:`, error);
+    }
+  };
+
+  // Helper function to add an item to the beginning of the Redis list
+  const addItemToBeginningOfList = async (socketId, key, newItem) => {
+    try {
+      await pubClient.lPush(`socket:${socketId}:${key}`, JSON.stringify(newItem));
+    } catch (error) {
+      console.error(`Error adding item to the beginning of the list for socket ${socketId}:`, error);
+    }
+  };
+
+  Object.assign(module.exports, {
+    setSessionData,
+    getSessionData,
+    clearSessionData,
+    setMultipleSessionData,
+    getMultipleSessionData,
+    setMultipleFromArraySessionData,
+    addItemToEndOfList,
+    addItemToBeginningOfList,
+    pubClient
+  });
+
+  app.use((req, res, next) => {
+    req.sessionUtils = {
+      setSessionData,
+      getSessionData,
+      clearSessionData,
+      setMultipleSessionData,
+      getMultipleSessionData,
+      setMultipleFromArraySessionData,
+      addItemToEndOfList,
+      addItemToBeginningOfList,
+      pubClient
+    };
+    next();
+  });
+
+  // // Demo to show how all the helper functions work
+  // const demoSessionData = async () => {
+  //   const socketId = "testSocketId";
+  //
+  //   // Store session data using setSessionData
+  //   await exports.setSessionData(socketId, "field1", "Hello, Redis!");
+  //
+  //   // Retrieve session data using getSessionData
+  //   const field1Value = await exports.getSessionData(socketId, "field1");
+  //   console.log("Retrieved single field value:", field1Value);
+  //
+  //   // Store multiple session data using setMultipleSessionData
+  //   await exports.setMultipleSessionData(socketId, { field2: "Second Value", field3: "Third Value" });
+  //
+  //   // Retrieve multiple session data using getMultipleSessionData
+  //   const multipleFields = await exports.getMultipleSessionData(socketId, ["field2", "field3"]);
+  //   console.log("Retrieved multiple field values:", multipleFields);
+  //
+  //   // Store multiple session data using setMultipleFromArraySessionData
+  //   await exports.setMultipleFromArraySessionData(socketId, [
+  //     ["field4", "Fourth Value"],
+  //     ["field5", "Fifth Value"]
+  //   ]);
+  //
+  //   // Retrieve and log all fields
+  //   const allFields = await exports.getMultipleSessionData(socketId, [
+  //     "field1",
+  //     "field2",
+  //     "field3",
+  //     "field4",
+  //     "field5"
+  //   ]);
+  //   console.log("Retrieved all field values:", allFields);
+  //
+  //   // Add item to the end of a Redis list
+  //   await exports.addItemToEndOfList(socketId, "logEvents", { event: "Log Event 1", timestamp: new Date() });
+  //   await exports.addItemToEndOfList(socketId, "logEvents", { event: "Log Event 2", timestamp: new Date() });
+  //
+  //   // Add item to the beginning of a Redis list
+  //   await exports.addItemToBeginningOfList(socketId, "logEvents", { event: "First Log Event", timestamp: new Date() });
+  //
+  //   // Retrieve the entire list (using lRange)
+  //   const logEvents = await pubClient.lRange(`socket:${socketId}:logEvents`, 0, -1);
+  //   console.log("Log Events List:", logEvents.map(JSON.parse));
+  //
+  //   // Clear session data
+  //   await exports.clearSessionData(socketId);
+  //   console.log("Session data cleared.");
+  // };
+  //
+  // if (process.env.NODE_ENV === "development") {
+  //   demoSessionData();
+  // }
+};
+
+/**
+ * Main function to start the server
+ * @returns {Promise<void>}
+ */
 const main = async () => {
-  await server.listen(port);
+  const app = express();
+  const port = process.env.PORT || 5000;
+
+  const server = http.createServer(app);
+
+  const { pubClient } = await applySocketIO(server, app);
+  applyRedisHelpers(pubClient, app);
+  require("./server/web-sockets/web-socket");
+  applyMiddleware(app);
+  applyRoutes(app);
+
+  try {
+    await server.listen(port);
+    logger.log(`[${process.env.NODE_ENV}] Server started on port ${port}`, "INFO", "api");
+  } catch (error) {
+    logger.log(`[${process.env.NODE_ENV}] Server failed to start on port ${port}`, "ERROR", "api", error);
+  }
 };
 
 // Start server
-main()
-  .then(() => {
-    logger.log(`[${process.env.NODE_ENV || "DEVELOPMENT"}] Server started on port ${port}`, "INFO", "api");
-  })
-  .catch((error) => {
-    logger.log(
-      `[${process.env.NODE_ENV || "DEVELOPMENT"}] Server failed to start on port ${port}`,
-      "ERROR",
-      "api",
-      error
-    );
-  });
+main();

server/accounting/pbs/pbs-ap-allocations.js

@@ -12,67 +12,92 @@ const AxiosLib = require("axios").default;
 const axios = AxiosLib.create();
 const { PBS_ENDPOINTS, PBS_CREDENTIALS } = require("./pbs-constants");
 const { CheckForErrors } = require("./pbs-job-export");
+const { getSessionData, getMultipleSessionData, setMultipleSessionData } = require("../../../server");
 const uuid = require("uuid").v4;
-axios.interceptors.request.use((x) => {
-  const socket = x.socket;
 
-  const headers = {
-    ...x.headers.common,
-    ...x.headers[x.method],
-    ...x.headers
-  };
-  const printable = `${new Date()} | Request: ${x.method.toUpperCase()} | ${
-    x.url
-  } | ${JSON.stringify(x.data)} | ${JSON.stringify(headers)}`;
-  console.log(printable);
+axios.interceptors.request.use(
+  async (x) => {
+    const socket = x.socket;
 
-  CdkBase.createJsonEvent(socket, "TRACE", `Raw Request: ${printable}`, x.data);
+    const headers = {
+      ...x.headers.common,
+      ...x.headers[x.method],
+      ...x.headers
+    };
 
-  return x;
-});
+    const printable = `${new Date()} | Request: ${x.method.toUpperCase()} | ${
+      x.url
+    } | ${JSON.stringify(x.data)} | ${JSON.stringify(headers)}`;
 
-axios.interceptors.response.use((x) => {
-  const socket = x.config.socket;
+    console.log(printable);
 
-  const printable = `${new Date()} | Response: ${x.status} | ${JSON.stringify(x.data)}`;
-  console.log(printable);
-  CdkBase.createJsonEvent(socket, "TRACE", `Raw Response: ${printable}`, x.data);
+    // Use await properly here for the async operation
+    await CdkBase.createJsonEvent(socket, "TRACE", `Raw Request: ${printable}`, x.data);
 
-  return x;
-});
+    return x; // Return the modified request
+  },
+  (error) => {
+    return Promise.reject(error); // Proper error handling
+  }
+);
+
+axios.interceptors.response.use(
+  async (x) => {
+    const socket = x.config.socket;
+
+    const printable = `${new Date()} | Response: ${x.status} | ${JSON.stringify(x.data)}`;
+
+    console.log(printable);
+
+    // Use await properly here for the async operation
+    await CdkBase.createJsonEvent(socket, "TRACE", `Raw Response: ${printable}`, x.data);
+
+    return x; // Return the modified response
+  },
+  (error) => {
+    return Promise.reject(error); // Proper error handling
+  }
+);
 
 async function PbsCalculateAllocationsAp(socket, billids) {
   try {
-    CdkBase.createLogEvent(socket, "DEBUG", `Received request to calculate allocations for ${billids}`);
+    await CdkBase.createLogEvent(socket, "DEBUG", `Received request to calculate allocations for ${billids}`);
+
     const { bills, bodyshops } = await QueryBillData(socket, billids);
     const bodyshop = bodyshops[0];
-    socket.bodyshop = bodyshop;
-    socket.bills = bills;
+
+    await setMultipleSessionData(socket.id, {
+      bills,
+      bodyshop
+    });
+
+    const txEnvelope = await getSessionData(socket.id, "txEnvelope");
 
     //Each bill will enter it's own top level transaction.
 
     const transactionlist = [];
     if (bills.length === 0) {
-      CdkBase.createLogEvent(
+      await CdkBase.createLogEvent(
         socket,
         "ERROR",
         `No bills found for export. Ensure they have not already been exported and try again.`
       );
     }
+
     bills.forEach((bill) => {
       //Keep the allocations at the bill level.
 
       const transactionObject = {
-        SerialNumber: socket.bodyshop.pbs_serialnumber,
+        SerialNumber: bodyshop.pbs_serialnumber,
         billid: bill.id,
         Posting: {
-          Reference: bill.invoice_number,
-          JournalCode: socket.txEnvelope ? socket.txEnvelope.journal : null,
-          TransactionDate: moment().tz(socket.bodyshop.timezone).toISOString(), //"0001-01-01T00:00:00.0000000Z",
           //Description: "Bulk AP posting.",
           //AdditionalInfo: "String",
-          Source: "ImEX Online", //TODO:AIO Resolve this for rome online.
-          Lines: [] //socket.apAllocations,
+          Reference: bill.invoice_number,
+          JournalCode: txEnvelope?.journal,
+          TransactionDate: moment().tz(bodyshop.timezone).toISOString(),
+          Source: "ImEX Online", // TODO: Resolve this for Rome Online.
+          Lines: [] // Will be populated with allocation data,
         }
       };
 
@@ -117,13 +142,13 @@ async function PbsCalculateAllocationsAp(socket, billids) {
           };
         }
 
-        //Add the line amount.
+        // Add the line amount.
         billHash[cc.name] = {
           ...billHash[cc.name],
           Amount: billHash[cc.name].Amount.add(lineDinero)
         };
 
-        //Does the line have taxes?
+        // Does the line have taxes?
         if (bl.applicable_taxes.federal) {
           billHash[bodyshop.md_responsibility_centers.taxes.federal_itc.name] = {
             ...billHash[bodyshop.md_responsibility_centers.taxes.federal_itc.name],
@@ -145,7 +170,7 @@ async function PbsCalculateAllocationsAp(socket, billids) {
 
       let APAmount = Dinero();
       Object.keys(billHash).map((key) => {
-        if (billHash[key].Amount.getAmount() > 0 || billHash[key].Amount.getAmount() < 0) {
+        if (billHash[key].Amount.getAmount() !== 0) {
           transactionObject.Posting.Lines.push({
             ...billHash[key],
             Amount: billHash[key].Amount.toFormat("0.00")
@@ -169,19 +194,19 @@ async function PbsCalculateAllocationsAp(socket, billids) {
 
     return transactionlist;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error encountered in PbsCalculateAllocationsAp. ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error encountered in PbsCalculateAllocationsAp. ${error}`);
   }
 }
 
 exports.PbsCalculateAllocationsAp = PbsCalculateAllocationsAp;
 
 async function QueryBillData(socket, billids) {
-  CdkBase.createLogEvent(socket, "DEBUG", `Querying bill data for id(s) ${billids}`);
+  await CdkBase.createLogEvent(socket, "DEBUG", `Querying bill data for id(s) ${billids}`);
   const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT, {});
   const result = await client
     .setHeaders({ Authorization: `Bearer ${socket.handshake.auth.token}` })
     .request(queries.GET_PBS_AP_ALLOCATIONS, { billids: billids });
-  CdkBase.createLogEvent(socket, "TRACE", `Bill data query result ${JSON.stringify(result, null, 2)}`);
+  await CdkBase.createLogEvent(socket, "TRACE", `Bill data query result ${JSON.stringify(result, null, 2)}`);
 
   return result;
 }
@@ -196,40 +221,49 @@ function getCostAccount(billline, respcenters) {
 }
 
 exports.PbsExportAp = async function (socket, { billids, txEnvelope }) {
-  CdkBase.createLogEvent(socket, "DEBUG", `Exporting selected AP.`);
+  await CdkBase.createLogEvent(socket, "DEBUG", `Exporting selected AP.`);
 
-  //apAllocations has the same shap as the lines key for the accounting posting to PBS.
-  socket.apAllocations = await PbsCalculateAllocationsAp(socket, billids);
-  socket.txEnvelope = txEnvelope;
-  for (const allocation of socket.apAllocations) {
+  const apAllocations = await PbsCalculateAllocationsAp(socket, billids);
+
+  await setMultipleSessionData(socket.id, {
+    apAllocations,
+    txEnvelope
+  });
+
+  for (const allocation of apAllocations) {
     const { billid, ...restAllocation } = allocation;
     const { data: AccountPostingChange } = await axios.post(PBS_ENDPOINTS.AccountingPostingChange, restAllocation, {
       auth: PBS_CREDENTIALS,
       socket
     });
 
-    CheckForErrors(socket, AccountPostingChange);
+    CheckForErrors(socket, AccountPostingChange).catch((err) =>
+      console.error(`Error running CheckingForErrors in pbs-ap-allocations`)
+    );
 
     if (AccountPostingChange.WasSuccessful) {
-      CdkBase.createLogEvent(socket, "DEBUG", `Marking bill as exported.`);
+      await CdkBase.createLogEvent(socket, "DEBUG", `Marking bill as exported.`);
       await MarkApExported(socket, [billid]);
 
       socket.emit("ap-export-success", billid);
     } else {
-      CdkBase.createLogEvent(socket, "ERROR", `Export was not succesful.`);
+      await CdkBase.createLogEvent(socket, "ERROR", `Export was not successful.`);
       socket.emit("ap-export-failure", {
         billid,
         error: AccountPostingChange.Message
       });
     }
   }
+
   socket.emit("ap-export-complete");
 };
 
 async function MarkApExported(socket, billids) {
-  CdkBase.createLogEvent(socket, "DEBUG", `Marking bills as exported for id ${billids}`);
+  const { bills, bodyshop } = await getMultipleSessionData(socket.id, ["bills", "bodyshop"]);
+
+  await CdkBase.createLogEvent(socket, "DEBUG", `Marking bills as exported for id ${billids}`);
   const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT, {});
-  const result = await client
+  return await client
     .setHeaders({ Authorization: `Bearer ${socket.handshake.auth.token}` })
     .request(queries.MARK_BILLS_EXPORTED, {
       billids,
@@ -237,13 +271,11 @@ async function MarkApExported(socket, billids) {
         exported: true,
         exported_at: new Date()
       },
-      logs: socket.bills.map((bill) => ({
-        bodyshopid: socket.bodyshop.id,
+      logs: bills.map((bill) => ({
+        bodyshopid: bodyshop.id,
         billid: bill.id,
         successful: true,
         useremail: socket.user.email
       }))
     });
-
-  return result;
 }

server/accounting/pbs/pbs-job-export.js

@@ -12,136 +12,169 @@ const CalculateAllocations = require("../../cdk/cdk-calculate-allocations").defa
 const CdkBase = require("../../web-sockets/web-socket");
 const moment = require("moment-timezone");
 const Dinero = require("dinero.js");
+const { setSessionData, getSessionData, getMultipleSessionData, setMultipleSessionData } = require("../../../server");
 const InstanceManager = require("../../utils/instanceMgr").default;
 const axios = AxiosLib.create();
 
-axios.interceptors.request.use((x) => {
-  const socket = x.socket;
+axios.interceptors.request.use(
+  async (x) => {
+    const socket = x.socket;
 
-  const headers = {
-    ...x.headers.common,
-    ...x.headers[x.method],
-    ...x.headers
-  };
-  const printable = `${new Date()} | Request: ${x.method.toUpperCase()} | ${
-    x.url
-  } | ${JSON.stringify(x.data)} | ${JSON.stringify(headers)}`;
-  console.log(printable);
+    const headers = {
+      ...x.headers.common,
+      ...x.headers[x.method],
+      ...x.headers
+    };
 
-  CdkBase.createJsonEvent(socket, "TRACE", `Raw Request: ${printable}`, x.data);
+    const printable = `${new Date()} | Request: ${x.method.toUpperCase()} | ${
+      x.url
+    } | ${JSON.stringify(x.data)} | ${JSON.stringify(headers)}`;
 
-  return x;
-});
+    console.log(printable);
 
-axios.interceptors.response.use((x) => {
-  const socket = x.config.socket;
+    await CdkBase.createJsonEvent(socket, "TRACE", `Raw Request: ${printable}`, x.data);
 
-  const printable = `${new Date()} | Response: ${x.status} | ${JSON.stringify(x.data)}`;
-  console.log(printable);
-  CdkBase.createJsonEvent(socket, "TRACE", `Raw Response: ${printable}`, x.data);
+    return x; // Make sure to return the request object
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
 
-  return x;
-});
+axios.interceptors.response.use(
+  async (x) => {
+    const socket = x.config.socket;
+
+    const printable = `${new Date()} | Response: ${x.status} | ${JSON.stringify(x.data)}`;
+
+    console.log(printable);
+
+    await CdkBase.createJsonEvent(socket, "TRACE", `Raw Response: ${printable}`, x.data);
+
+    return x; // Make sure to return the response object
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
 
 exports.default = async function (socket, { txEnvelope, jobid }) {
-  socket.logEvents = [];
-  socket.recordid = jobid;
-  socket.txEnvelope = txEnvelope;
   try {
-    CdkBase.createLogEvent(socket, "DEBUG", `Received Job export request for id ${jobid}`);
+    await setMultipleSessionData(socket.id, {
+      recordid: jobid,
+      txEnvelope
+    });
+
+    await CdkBase.createLogEvent(socket, "DEBUG", `Received Job export request for id ${jobid}`);
 
     const JobData = await QueryJobData(socket, jobid);
-    socket.JobData = JobData;
-    CdkBase.createLogEvent(socket, "DEBUG", `Querying the DMS for the Vehicle Record.`);
-    //Query for the Vehicle record to get the associated customer.
-    socket.DmsVeh = await QueryVehicleFromDms(socket);
+    await setSessionData(socket.id, "JobData", JobData);
+
+    await CdkBase.createLogEvent(socket, "DEBUG", `Querying the DMS for the Vehicle Record.`);
+
+    // Query for the Vehicle record to get the associated customer
+    const DmsVeh = await QueryVehicleFromDms(socket);
+    await setSessionData(socket.id, "DmsVeh", DmsVeh);
+
+    let DMSVehCustomer;
+
     //Todo: Need to validate the lines and methods below.
-    if (socket.DmsVeh && socket.DmsVeh.CustomerRef) {
-      //Get the associated customer from the Vehicle Record.
-      socket.DMSVehCustomer = await QueryCustomerBycodeFromDms(socket, socket.DmsVeh.CustomerRef);
+    if (DmsVeh?.CustomerRef) {
+      // Get the associated customer from the Vehicle Record
+      DMSVehCustomer = await QueryCustomerBycodeFromDms(socket, DmsVeh.CustomerRef);
+      await setSessionData(socket.id, "DMSVehCustomer", DMSVehCustomer);
     }
-    socket.DMSCustList = await QueryCustomersFromDms(socket);
+
+    const DMSCustList = await QueryCustomersFromDms(socket);
+    await setSessionData(socket.id, "DMSCustList", DMSCustList);
 
     socket.emit("pbs-select-customer", [
-      ...(socket.DMSVehCustomer ? [{ ...socket.DMSVehCustomer, vinOwner: true }] : []),
-      ...socket.DMSCustList
+      ...(DMSVehCustomer ? [{ ...DMSVehCustomer, vinOwner: true }] : []),
+      ...DMSCustList
     ]);
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error encountered in PbsJobExport. ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error encountered in PbsJobExport. ${error}`);
   }
 };
 
 exports.PbsSelectedCustomer = async function PbsSelectedCustomer(socket, selectedCustomerId) {
   try {
-    if (socket.JobData.bodyshop.pbs_configuration.disablecontactvehicle === false) {
-      CdkBase.createLogEvent(socket, "DEBUG", `User selected customer ${selectedCustomerId || "NEW"}`);
+    const JobData = await getSessionData(socket.id, "JobData");
 
-      //Upsert the contact information as per Wafaa's Email.
-      CdkBase.createLogEvent(
+    if (JobData.bodyshop.pbs_configuration.disablecontactvehicle === false) {
+      await CdkBase.createLogEvent(socket, "DEBUG", `User selected customer ${selectedCustomerId || "NEW"}`);
+
+      // Upsert the contact information as per Wafaa's Email
+      await CdkBase.createLogEvent(
         socket,
         "DEBUG",
         `Upserting contact information to DMS for ${
-          socket.JobData.ownr_fn || ""
-        } ${socket.JobData.ownr_ln || ""} ${socket.JobData.ownr_co_nm || ""}`
+          JobData.ownr_fn || ""
+        } ${JobData.ownr_ln || ""} ${JobData.ownr_co_nm || ""}`
       );
+
       const ownerRef = await UpsertContactData(socket, selectedCustomerId);
 
-      CdkBase.createLogEvent(socket, "DEBUG", `Upserting vehicle information to DMS for ${socket.JobData.v_vin}`);
+      await CdkBase.createLogEvent(socket, "DEBUG", `Upserting vehicle information to DMS for ${JobData.v_vin}`);
       await UpsertVehicleData(socket, ownerRef.ReferenceId);
     } else {
-      CdkBase.createLogEvent(
+      await CdkBase.createLogEvent(
         socket,
         "DEBUG",
         `Contact and Vehicle updates disabled. Skipping to accounting data insert.`
       );
     }
-    CdkBase.createLogEvent(socket, "DEBUG", `Inserting account data.`);
-    CdkBase.createLogEvent(socket, "DEBUG", `Inserting accounting posting data..`);
+
+    await CdkBase.createLogEvent(socket, "DEBUG", `Inserting account data.`);
+    await CdkBase.createLogEvent(socket, "DEBUG", `Inserting accounting posting data..`);
     const insertResponse = await InsertAccountPostingData(socket);
 
+    // TODO: Insert Clear session
     if (insertResponse.WasSuccessful) {
-      CdkBase.createLogEvent(socket, "DEBUG", `Marking job as exported.`);
-      await MarkJobExported(socket, socket.JobData.id);
+      await CdkBase.createLogEvent(socket, "DEBUG", `Marking job as exported.`);
+      await MarkJobExported(socket, JobData.id);
 
-      socket.emit("export-success", socket.JobData.id);
+      socket.emit("export-success", JobData.id);
     } else {
-      CdkBase.createLogEvent(socket, "ERROR", `Export was not succesful.`);
+      await CdkBase.createLogEvent(socket, "ERROR", `Export was not successful.`);
     }
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error encountered in CdkSelectedCustomer. ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error encountered in PbsSelectedCustomer. ${error}`);
     await InsertFailedExportLog(socket, error);
   }
 };
 
 async function CheckForErrors(socket, response) {
   if (response.WasSuccessful === undefined || response.WasSuccessful === true) {
-    CdkBase.createLogEvent(socket, "DEBUG", `Successful response from DMS. ${response.Message || ""}`);
+    await CdkBase.createLogEvent(socket, "DEBUG", `Successful response from DMS. ${response.Message || ""}`);
   } else {
-    CdkBase.createLogEvent(socket, "ERROR", `Error received from DMS: ${response.Message}`);
-    CdkBase.createLogEvent(socket, "TRACE", `Error received from DMS: ${JSON.stringify(response)}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error received from DMS: ${response.Message}`);
+    await CdkBase.createLogEvent(socket, "TRACE", `Error received from DMS: ${JSON.stringify(response)}`);
   }
 }
 
 exports.CheckForErrors = CheckForErrors;
 
 async function QueryJobData(socket, jobid) {
-  CdkBase.createLogEvent(socket, "DEBUG", `Querying job data for id ${jobid}`);
+  await CdkBase.createLogEvent(socket, "DEBUG", `Querying job data for id ${jobid}`);
   const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT, {});
   const result = await client
     .setHeaders({ Authorization: `Bearer ${socket.handshake.auth.token}` })
     .request(queries.QUERY_JOBS_FOR_PBS_EXPORT, { id: jobid });
-  CdkBase.createLogEvent(socket, "TRACE", `Job data query result ${JSON.stringify(result, null, 2)}`);
+  await CdkBase.createLogEvent(socket, "TRACE", `Job data query result ${JSON.stringify(result, null, 2)}`);
   return result.jobs_by_pk;
 }
 
 async function QueryVehicleFromDms(socket) {
   try {
-    if (!socket.JobData.v_vin) return null;
+    const JobData = await getSessionData(socket.id, "JobData");
+
+    if (!JobData.v_vin) return null;
 
     const { data: VehicleGetResponse, request } = await axios.post(
       PBS_ENDPOINTS.VehicleGet,
       {
-        SerialNumber: socket.JobData.bodyshop.pbs_serialnumber,
+        SerialNumber: JobData.bodyshop.pbs_serialnumber,
         // VehicleId: "00000000000000000000000000000000",
         // Year: "String",
         // Make: "String",
@@ -149,7 +182,7 @@ async function QueryVehicleFromDms(socket) {
         // Trim: "String",
         // ModelNumber: "String",
         // StockNumber: "String",
-        VIN: socket.JobData.v_vin
+        VIN: JobData.v_vin
         // LicenseNumber: "String",
         // Lot: "String",
         // Status: "String",
@@ -166,26 +199,31 @@ async function QueryVehicleFromDms(socket) {
       { auth: PBS_CREDENTIALS, socket }
     );
 
-    CheckForErrors(socket, VehicleGetResponse);
+    await CheckForErrors(socket, VehicleGetResponse);
+
     return VehicleGetResponse;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error in QueryVehicleFromDms - ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error in QueryVehicleFromDms - ${error}`);
     throw new Error(error);
   }
 }
 
 async function QueryCustomersFromDms(socket) {
   try {
+    // Retrieve JobData from session storage
+    const JobData = await getSessionData(socket.id, "JobData");
+
+    // Make an API call to PBS to query customer details
     const { data: CustomerGetResponse } = await axios.post(
       PBS_ENDPOINTS.ContactGet,
       {
-        SerialNumber: socket.JobData.bodyshop.pbs_serialnumber,
+        SerialNumber: JobData.bodyshop.pbs_serialnumber,
         //ContactId: "00000000000000000000000000000000",
-        // ContactCode: socket.JobData.owner.accountingid,
-        FirstName: socket.JobData.ownr_fn,
-        LastName: socket.JobData.ownr_co_nm ? socket.JobData.ownr_co_nm : socket.JobData.ownr_ln,
-        PhoneNumber: socket.JobData.ownr_ph1,
-        EmailAddress: socket.JobData.ownr_ea
+        // ContactCode: JobData.owner.accountingid,
+        FirstName: JobData.ownr_fn,
+        LastName: JobData.ownr_co_nm ? JobData.ownr_co_nm : JobData.ownr_ln,
+        PhoneNumber: JobData.ownr_ph1,
+        EmailAddress: JobData.ownr_ea
         // ModifiedSince: "0001-01-01T00:00:00.0000000Z",
         // ModifiedUntil: "0001-01-01T00:00:00.0000000Z",
         // ContactIdList: ["00000000000000000000000000000000"],
@@ -197,27 +235,36 @@ async function QueryCustomersFromDms(socket) {
       },
       { auth: PBS_CREDENTIALS, socket }
     );
-    CheckForErrors(socket, CustomerGetResponse);
+
+    // Check for errors in the PBS response
+    await CheckForErrors(socket, CustomerGetResponse);
+
+    // Return the list of contacts from the PBS response
     return CustomerGetResponse && CustomerGetResponse.Contacts;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error in QueryCustomersFromDms - ${error}`);
+    // Log any errors encountered during the API call
+    await CdkBase.createLogEvent(socket, "ERROR", `Error in QueryCustomersFromDms - ${error}`);
     throw new Error(error);
   }
 }
 
 async function QueryCustomerBycodeFromDms(socket, CustomerRef) {
   try {
+    // Retrieve JobData from session storage
+    const JobData = await getSessionData(socket.id, "JobData");
+
+    // Make an API call to PBS to query customer by ContactId
     const { data: CustomerGetResponse } = await axios.post(
       PBS_ENDPOINTS.ContactGet,
       {
-        SerialNumber: socket.JobData.bodyshop.pbs_serialnumber,
+        SerialNumber: JobData.bodyshop.pbs_serialnumber,
         ContactId: CustomerRef
-        //ContactCode: socket.JobData.owner.accountingid,
-        //FirstName: socket.JobData.ownr_co_nm
-        // ? socket.JobData.ownr_co_nm
-        // : socket.JobData.ownr_fn,
-        //LastName: socket.JobData.ownr_ln,
-        //PhoneNumber: socket.JobData.ownr_ph1,
+        //ContactCode: JobData.owner.accountingid,
+        //FirstName: JobData.ownr_co_nm
+        // ? JobData.ownr_co_nm
+        // : JobData.ownr_fn,
+        //LastName: JobData.ownr_ln,
+        //PhoneNumber: JobData.ownr_ph1,
         // EmailAddress: "String",
         // ModifiedSince: "0001-01-01T00:00:00.0000000Z",
         // ModifiedUntil: "0001-01-01T00:00:00.0000000Z",
@@ -230,33 +277,42 @@ async function QueryCustomerBycodeFromDms(socket, CustomerRef) {
       },
       { auth: PBS_CREDENTIALS, socket }
     );
-    CheckForErrors(socket, CustomerGetResponse);
+
+    // Check for errors in the PBS response
+    await CheckForErrors(socket, CustomerGetResponse);
+
+    // Return the list of contacts from the PBS response
     return CustomerGetResponse && CustomerGetResponse.Contacts;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error in QueryCustomersFromDms - ${error}`);
+    // Log any errors encountered during the API call
+    await CdkBase.createLogEvent(socket, "ERROR", `Error in QueryCustomerBycodeFromDms - ${error}`);
     throw new Error(error);
   }
 }
 
 async function UpsertContactData(socket, selectedCustomerId) {
   try {
+    // Retrieve JobData from session storage
+    const JobData = await getSessionData(socket.id, "JobData");
+
+    // Make an API call to PBS to upsert contact data
     const { data: ContactChangeResponse } = await axios.post(
       PBS_ENDPOINTS.ContactChange,
       {
         ContactInfo: {
-          // Id: socket.JobData.owner.id,
+          // Id: JobData.owner.id,
           ...(selectedCustomerId ? { ContactId: selectedCustomerId } : {}),
-          SerialNumber: socket.JobData.bodyshop.pbs_serialnumber,
-          Code: socket.JobData.owner.accountingid,
-          ...(socket.JobData.ownr_co_nm
+          SerialNumber: JobData.bodyshop.pbs_serialnumber,
+          Code: JobData.owner.accountingid,
+          ...(JobData.ownr_co_nm
             ? {
-                //LastName: socket.JobData.ownr_ln,
-                FirstName: socket.JobData.ownr_co_nm,
+                //LastName: JobData.ownr_ln,
+                FirstName: JobData.ownr_co_nm,
                 IsBusiness: true
               }
             : {
-                LastName: socket.JobData.ownr_ln,
-                FirstName: socket.JobData.ownr_fn,
+                LastName: JobData.ownr_ln,
+                FirstName: JobData.ownr_fn,
                 IsBusiness: false
               }),
 
@@ -266,20 +322,20 @@ async function UpsertContactData(socket, selectedCustomerId) {
           IsInactive: false,
 
           //ApartmentNumber: "String",
-          Address: socket.JobData.ownr_addr1,
-          City: socket.JobData.ownr_city,
-          //County: socket.JobData.ownr_addr1,
-          State: socket.JobData.ownr_st,
-          ZipCode: socket.JobData.ownr_zip,
+          Address: JobData.ownr_addr1,
+          City: JobData.ownr_city,
+          //County: JobData.ownr_addr1,
+          State: JobData.ownr_st,
+          ZipCode: JobData.ownr_zip,
           //BusinessPhone: "String",
           //BusinessPhoneExt: "String",
-          HomePhone: socket.JobData.ownr_ph2,
-          CellPhone: socket.JobData.ownr_ph1,
+          HomePhone: JobData.ownr_ph2,
+          CellPhone: JobData.ownr_ph1,
           //BusinessPhoneRawReverse: "String",
           //HomePhoneRawReverse: "String",
           //CellPhoneRawReverse: "String",
           //FaxNumber: "String",
-          EmailAddress: socket.JobData.ownr_ea
+          EmailAddress: JobData.ownr_ea
           //Notes: "String",
           //CriticalMemo: "String",
           //BirthDate: "0001-01-01T00:00:00.0000000Z",
@@ -312,39 +368,43 @@ async function UpsertContactData(socket, selectedCustomerId) {
       },
       { auth: PBS_CREDENTIALS, socket }
     );
-    CheckForErrors(socket, ContactChangeResponse);
+
+    await CheckForErrors(socket, ContactChangeResponse);
+
     return ContactChangeResponse;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error in UpsertContactData - ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error in UpsertContactData - ${error}`);
     throw new Error(error);
   }
 }
 
 async function UpsertVehicleData(socket, ownerRef) {
   try {
+    const JobData = await getSessionData(socket.id, "JobData");
+
     const { data: VehicleChangeResponse } = await axios.post(
       PBS_ENDPOINTS.VehicleChange,
       {
         VehicleInfo: {
           //Id: "string/00000000-0000-0000-0000-000000000000",
           //VehicleId: "00000000000000000000000000000000",
-          SerialNumber: socket.JobData.bodyshop.pbs_serialnumber,
+          SerialNumber: JobData.bodyshop.pbs_serialnumber,
           //StockNumber: "String",
-          VIN: socket.JobData.v_vin,
-          LicenseNumber: socket.JobData.plate_no,
+          VIN: JobData.v_vin,
+          LicenseNumber: JobData.plate_no,
           //FleetNumber: "String",
           //Status: "String",
           OwnerRef: ownerRef, // "00000000000000000000000000000000",
-          ModelNumber: socket.JobData.vehicle && socket.JobData.vehicle.v_makecode,
-          Make: socket.JobData.v_make_desc,
-          Model: socket.JobData.v_model_desc,
-          Trim: socket.JobData.vehicle && socket.JobData.vehicle.v_trimcode,
+          ModelNumber: JobData.vehicle && JobData.vehicle.v_makecode,
+          Make: JobData.v_make_desc,
+          Model: JobData.v_model_desc,
+          Trim: JobData.vehicle && JobData.vehicle.v_trimcode,
           //VehicleType: "String",
-          Year: socket.JobData.v_model_yr,
-          Odometer: socket.JobData.kmout,
+          Year: JobData.v_model_yr,
+          Odometer: JobData.kmout,
           ExteriorColor: {
-            Code: socket.JobData.v_color,
-            Description: socket.JobData.v_color
+            Code: JobData.v_color,
+            Description: JobData.v_color
           }
           // InteriorColor: { Code: "String", Description: "String" },
           //Engine: "String",
@@ -465,100 +525,112 @@ async function UpsertVehicleData(socket, ownerRef) {
       },
       { auth: PBS_CREDENTIALS, socket }
     );
-    CheckForErrors(socket, VehicleChangeResponse);
+
+    await CheckForErrors(socket, VehicleChangeResponse);
+
     return VehicleChangeResponse;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error in UpsertVehicleData - ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error in UpsertVehicleData - ${error}`);
     throw new Error(error);
   }
 }
 
 async function InsertAccountPostingData(socket) {
   try {
-    const allocations = await CalculateAllocations(socket, socket.JobData.id);
+    const { JobData, txEnvelope } = await getMultipleSessionData(socket.id, ["JobData", "txEnvelope"]);
+
+    const allocations = await CalculateAllocations(socket, JobData.id);
 
     const wips = [];
+
     allocations.forEach((alloc) => {
-      //Add the sale item from each allocation.
+      // Add the sale item from each allocation if the amount is greater than 0 and not a tax
       if (alloc.sale.getAmount() > 0 && !alloc.tax) {
         const item = {
           Account: alloc.profitCenter.dms_acctnumber,
-          ControlNumber: socket.JobData.ro_number,
+          ControlNumber: JobData.ro_number,
           Amount: alloc.sale.multiply(-1).toFormat("0.00"),
-          //Comment: "String",
-          //AdditionalInfo: "String",
-          InvoiceNumber: socket.JobData.ro_number,
-          InvoiceDate: moment(socket.JobData.date_invoiced).tz(socket.JobData.bodyshop.timezone).toISOString()
+          // Comment: "String",
+          // AdditionalInfo: "String",
+          InvoiceNumber: JobData.ro_number,
+          InvoiceDate: moment(JobData.date_invoiced).tz(JobData.bodyshop.timezone).toISOString()
         };
         wips.push(item);
       }
 
-      //Add the cost Item.
+      // Add the cost item if the cost amount is greater than 0 and not a tax
       if (alloc.cost.getAmount() > 0 && !alloc.tax) {
         const item = {
           Account: alloc.costCenter.dms_acctnumber,
-          ControlNumber: socket.JobData.ro_number,
+          ControlNumber: JobData.ro_number,
           Amount: alloc.cost.toFormat("0.00"),
-          //Comment: "String",
-          //AdditionalInfo: "String",
-          InvoiceNumber: socket.JobData.ro_number,
-          InvoiceDate: moment(socket.JobData.date_invoiced).tz(socket.JobData.bodyshop.timezone).toISOString()
+          // Comment: "String",
+          // AdditionalInfo: "String",
+          InvoiceNumber: JobData.ro_number,
+          InvoiceDate: moment(JobData.date_invoiced).tz(JobData.bodyshop.timezone).toISOString()
         };
+
         wips.push(item);
 
         const itemWip = {
           Account: alloc.costCenter.dms_wip_acctnumber,
-          ControlNumber: socket.JobData.ro_number,
+          ControlNumber: JobData.ro_number,
           Amount: alloc.cost.multiply(-1).toFormat("0.00"),
-          //Comment: "String",
-          //AdditionalInfo: "String",
-          InvoiceNumber: socket.JobData.ro_number,
-          InvoiceDate: moment(socket.JobData.date_invoiced).tz(socket.JobData.bodyshop.timezone).toISOString()
+          // Comment: "String",
+          // AdditionalInfo: "String",
+          InvoiceNumber: JobData.ro_number,
+          InvoiceDate: moment(JobData.date_invoiced).tz(JobData.bodyshop.timezone).toISOString()
         };
+
         wips.push(itemWip);
-        //Add to the WIP account.
+        // Add to the WIP account.
       }
 
+      // Add tax-related entries if applicable
       if (alloc.tax) {
         if (alloc.sale.getAmount() > 0) {
           const item2 = {
             Account: alloc.profitCenter.dms_acctnumber,
-            ControlNumber: socket.JobData.ro_number,
+            ControlNumber: JobData.ro_number,
             Amount: alloc.sale.multiply(-1).toFormat("0.00"),
-            //Comment: "String",
-            //AdditionalInfo: "String",
-            InvoiceNumber: socket.JobData.ro_number,
-            InvoiceDate: moment(socket.JobData.date_invoiced).tz(socket.JobData.bodyshop.timezone).toISOString()
+            // Comment: "String",
+            // AdditionalInfo: "String",
+            InvoiceNumber: JobData.ro_number,
+            InvoiceDate: moment(JobData.date_invoiced).tz(JobData.bodyshop.timezone).toISOString()
           };
+
           wips.push(item2);
         }
       }
     });
-    socket.txEnvelope.payers.forEach((payer) => {
+
+    // Add payer information
+    txEnvelope.payers.forEach((payer) => {
       const item = {
         Account: payer.dms_acctnumber,
         ControlNumber: payer.controlnumber,
         Amount: Dinero({ amount: Math.round(payer.amount * 100) }).toFormat("0.0"),
-        //Comment: "String",
-        //AdditionalInfo: "String",
-        InvoiceNumber: socket.JobData.ro_number,
-        InvoiceDate: moment(socket.JobData.date_invoiced).tz(socket.JobData.bodyshop.timezone).toISOString()
+        // Comment: "String",
+        // AdditionalInfo: "String",
+        InvoiceNumber: JobData.ro_number,
+        InvoiceDate: moment(JobData.date_invoiced).tz(JobData.bodyshop.timezone).toISOString()
       };
 
       wips.push(item);
     });
-    socket.transWips = wips;
+
+    await setSessionData(socket.id, "transWips", wips);
 
     const { data: AccountPostingChange } = await axios.post(
       PBS_ENDPOINTS.AccountingPostingChange,
       {
-        SerialNumber: socket.JobData.bodyshop.pbs_serialnumber,
+        SerialNumber: JobData.bodyshop.pbs_serialnumber,
         Posting: {
-          Reference: socket.JobData.ro_number,
-          JournalCode: socket.txEnvelope.journal,
-          TransactionDate: moment(socket.JobData.date_invoiced).tz(socket.JobData.bodyshop.timezone).toISOString(), //"0001-01-01T00:00:00.0000000Z",
-          Description: socket.txEnvelope.story,
-          //AdditionalInfo: "String",
+          Reference: JobData.ro_number,
+          JournalCode: txEnvelope.journal,
+          TransactionDate: moment(JobData.date_invoiced).tz(JobData.bodyshop.timezone).toISOString(), // "0001-01-01T00:00:00.0000000Z",
+          Description: txEnvelope.story,
+          // AdditionalInfo: "String",
           Source: InstanceManager({ imex: "ImEX Online", rome: "Rome Online" }),
           Lines: wips
         }
@@ -566,54 +638,56 @@ async function InsertAccountPostingData(socket) {
       { auth: PBS_CREDENTIALS, socket }
     );
 
-    CheckForErrors(socket, AccountPostingChange);
+    await CheckForErrors(socket, AccountPostingChange);
+
     return AccountPostingChange;
   } catch (error) {
-    CdkBase.createLogEvent(socket, "ERROR", `Error in InsertAccountPostingData - ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error in InsertAccountPostingData - ${error}`);
     throw new Error(error);
   }
 }
 
 async function MarkJobExported(socket, jobid) {
-  CdkBase.createLogEvent(socket, "DEBUG", `Marking job as exported for id ${jobid}`);
+  await CdkBase.createLogEvent(socket, "DEBUG", `Marking job as exported for id ${jobid}`);
   const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT, {});
-  const result = await client
+
+  const { JobData, transWips } = await getMultipleSessionData(socket.id, ["JobData", "transWips"]);
+
+  return await client
     .setHeaders({ Authorization: `Bearer ${socket.handshake.auth.token}` })
     .request(queries.MARK_JOB_EXPORTED, {
       jobId: jobid,
       job: {
-        status: socket.JobData.bodyshop.md_ro_statuses.default_exported || "Exported*",
+        status: JobData.bodyshop.md_ro_statuses.default_exported || "Exported*",
         date_exported: new Date()
       },
       log: {
-        bodyshopid: socket.JobData.bodyshop.id,
+        bodyshopid: JobData.bodyshop.id,
         jobid: jobid,
         successful: true,
         useremail: socket.user.email,
-        metadata: socket.transWips
+        metadata: transWips
       },
       bill: {
         exported: true,
         exported_at: new Date()
       }
     });
-
-  return result;
 }
 
 async function InsertFailedExportLog(socket, error) {
   const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT, {});
-  const result = await client
+  const JobData = await getSessionData(socket.id, "JobData");
+
+  return await client
     .setHeaders({ Authorization: `Bearer ${socket.handshake.auth.token}` })
     .request(queries.INSERT_EXPORT_LOG, {
       log: {
-        bodyshopid: socket.JobData.bodyshop.id,
-        jobid: socket.JobData.id,
+        bodyshopid: JobData.bodyshop.id,
+        jobid: JobData.id,
         successful: false,
         message: [error],
         useremail: socket.user.email
       }
     });
-
-  return result;
 }

server/accounting/qb-receivables-lines.js

@@ -30,8 +30,14 @@ exports.default = function ({ bodyshop, jobs_by_pk, qbo = false, items, taxCodes
     if (jobline.db_ref === "936007") {
       hasMashLine = true;
     }
+
+    //Check if the line is a Towing Line and flag as such.
+    let isTowingLine = false;
+    if (jobline.db_ref === "936001" && jobline.line_desc.includes("Towing")) {
+      isTowingLine = true;
+    }
     //Parts Lines Mappings.
-    if (jobline.profitcenter_part) {
+    if (!isTowingLine && jobline.profitcenter_part) {
       //TODO:AIO This appears to be a net 0 change exept for default quantity as 0 instead of 1 for imex. Need to verify.
       const discountAmount =
         ((jobline.prt_dsmk_m && jobline.prt_dsmk_m !== 0) || (jobline.prt_dsmk_p && jobline.prt_dsmk_p !== 0)) &&

server/cdk/cdk-calculate-allocations.js

@@ -18,12 +18,12 @@ const { DiscountNotAlreadyCounted } = InstanceManager({
 
 exports.defaultRoute = async function (req, res) {
   try {
-    CdkBase.createLogEvent(req, "DEBUG", `Received request to calculate allocations for ${req.body.jobid}`);
+    await CdkBase.createLogEvent(req, "DEBUG", `Received request to calculate allocations for ${req.body.jobid}`);
     const jobData = await QueryJobData(req, req.BearerToken, req.body.jobid);
-    return res.status(200).json({ data: calculateAllocations(req, jobData) });
+    return res.status(200).json({ data: await calculateAllocations(req, jobData) });
   } catch (error) {
     console.log(error);
-    CdkBase.createLogEvent(req, "ERROR", `Error encountered in CdkCalculateAllocations. ${error}`);
+    await CdkBase.createLogEvent(req, "ERROR", `Error encountered in CdkCalculateAllocations. ${error}`);
     res.status(500).json({ error: `Error encountered in CdkCalculateAllocations. ${error}` });
   }
 };
@@ -31,22 +31,22 @@ exports.defaultRoute = async function (req, res) {
 exports.default = async function (socket, jobid) {
   try {
     const jobData = await QueryJobData(socket, "Bearer " + socket.handshake.auth.token, jobid);
-    return calculateAllocations(socket, jobData);
+    return await calculateAllocations(socket, jobData);
   } catch (error) {
     console.log(error);
-    CdkBase.createLogEvent(socket, "ERROR", `Error encountered in CdkCalculateAllocations. ${error}`);
+    await CdkBase.createLogEvent(socket, "ERROR", `Error encountered in CdkCalculateAllocations. ${error}`);
   }
 };
 
 async function QueryJobData(connectionData, token, jobid) {
-  CdkBase.createLogEvent(connectionData, "DEBUG", `Querying job data for id ${jobid}`);
+  await CdkBase.createLogEvent(connectionData, "DEBUG", `Querying job data for id ${jobid}`);
   const client = new GraphQLClient(process.env.GRAPHQL_ENDPOINT, {});
   const result = await client.setHeaders({ Authorization: token }).request(queries.GET_CDK_ALLOCATIONS, { id: jobid });
-  CdkBase.createLogEvent(connectionData, "TRACE", `Job data query result ${JSON.stringify(result, null, 2)}`);
+  await CdkBase.createLogEvent(connectionData, "TRACE", `Job data query result ${JSON.stringify(result, null, 2)}`);
   return result.jobs_by_pk;
 }
 
-function calculateAllocations(connectionData, job) {
+async function calculateAllocations(connectionData, job) {
   const { bodyshop } = job;
 
   const taxAllocations = InstanceManager({
@@ -171,7 +171,7 @@ function calculateAllocations(connectionData, job) {
   const selectedDmsAllocationConfig = bodyshop.md_responsibility_centers.dms_defaults.find(
     (d) => d.name === job.dms_allocation
   );
-  CdkBase.createLogEvent(
+  await CdkBase.createLogEvent(
     connectionData,
     "DEBUG",
     `Using DMS Allocation ${selectedDmsAllocationConfig && selectedDmsAllocationConfig.name} for cost export.`
@@ -361,9 +361,10 @@ function calculateAllocations(connectionData, job) {
   }
   if (InstanceManager({ rome: true })) {
     //profile level adjustments for parts
-    Object.keys(job.job_totals.parts.adjustments).forEach((key) => {
+    for (const key of Object.keys(job.job_totals.parts.adjustments)) {
       const accountName = selectedDmsAllocationConfig.profits[key];
       const otherAccount = bodyshop.md_responsibility_centers.profits.find((c) => c.name === accountName);
+
       if (otherAccount) {
         if (!profitCenterHash[accountName]) profitCenterHash[accountName] = Dinero();
 
@@ -371,31 +372,41 @@ function calculateAllocations(connectionData, job) {
           Dinero(job.job_totals.parts.adjustments[key])
         );
       } else {
-        CdkBase.createLogEvent(
+        // Use await correctly here
+        await CdkBase.createLogEvent(
           connectionData,
           "ERROR",
-          `Error encountered in CdkCalculateAllocations. Unable to find adjustment account. ${error}`
+          `Error encountered in CdkCalculateAllocations. Unable to find adjustment account for key ${key}.`
         );
       }
-    });
+    }
+
     //profile level adjustments for labor and materials
-    Object.keys(job.job_totals.rates).forEach((key) => {
-      if (job.job_totals.rates[key] && job.job_totals.rates[key].adjustment && Dinero(job.job_totals.rates[key].adjustment).isZero() === false) {
+    for (const key of Object.keys(job.job_totals.rates)) {
+      if (
+        job.job_totals.rates[key] &&
+        job.job_totals.rates[key].adjustment &&
+        Dinero(job.job_totals.rates[key].adjustment).isZero() === false
+      ) {
         const accountName = selectedDmsAllocationConfig.profits[key.toUpperCase()];
         const otherAccount = bodyshop.md_responsibility_centers.profits.find((c) => c.name === accountName);
+
         if (otherAccount) {
           if (!profitCenterHash[accountName]) profitCenterHash[accountName] = Dinero();
 
-          profitCenterHash[accountName] = profitCenterHash[accountName].add(Dinero(job.job_totals.rates[key].adjustments));
+          profitCenterHash[accountName] = profitCenterHash[accountName].add(
+            Dinero(job.job_totals.rates[key].adjustments)
+          );
         } else {
-          CdkBase.createLogEvent(
+          // Await the log event creation here
+          await CdkBase.createLogEvent(
             connectionData,
             "ERROR",
-            `Error encountered in CdkCalculateAllocations. Unable to find adjustment account. ${error}`
+            `Error encountered in CdkCalculateAllocations. Unable to find adjustment account for key ${key}.`
           );
         }
       }
-    });
+    }
   }
 
   const jobAllocations = _.union(Object.keys(profitCenterHash), Object.keys(costCenterHash)).map((key) => {

server/cdk/cdk-get-makes.js

@@ -86,7 +86,7 @@ async function GetCdkMakes(req, cdk_dealerid) {
       {}
     );
 
-    CheckCdkResponseForError(null, soapResponseVehicleSearch);
+    await CheckCdkResponseForError(null, soapResponseVehicleSearch);
     const [result, rawResponse, , rawRequest] = soapResponseVehicleSearch;
     logger.log("cdk-replace-makes-models-request", "ERROR", req.user.email, null, {
       cdk_dealerid,