IO-2932-Scheduling-Lag-on-AIO:

profiler

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,18 @@ 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 >>
+            sleep 5
             hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            sleep 10
             hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+      - jira/notify:
+          environment: Test (Rome) - Hasura
+          environment_type: testing
+          pipeline_id: << pipeline.id >>
+          job_type: deployment
+          pipeline_number: << pipeline.number >>
 
   test-rome-app-build:
     docker:
@@ -212,6 +261,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 +292,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 +313,18 @@ 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 >>
+            sleep 15
             hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+            sleep 30
             hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
+      - jira/notify:
+          environment: Test (ImEX) - Hasura
+          environment_type: testing
+          pipeline_id: << pipeline.id >>
+          job_type: deployment
+          pipeline_number: << pipeline.number >>
 
   imex-test-app-build:
     docker:
@@ -302,7 +371,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:
@@ -353,7 +427,7 @@ workflows:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
-              only: master
+              only: master-AIO
       - rome-api-deploy:
           filters:
             branches:
@@ -363,7 +437,7 @@ workflows:
             branches:
               only: master-AIO
       - rome-hasura-migrate:
-          secret: ${HASURA_PROD_SECRET}
+          secret: ${HASURA_ROME_PROD_SECRET}
           filters:
             branches:
               only: master-AIO

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

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

client/.env.development.rome

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

client/index.html

@@ -2,6 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8"/>
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
   <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
   <link rel="icon" href="/favicon.png"/>
   <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
@@ -46,23 +49,77 @@
   <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
   <meta name="description" content="Rome Online"/>
   <title>Rome Online</title>
-  <script type="text/javascript" id="zsiqchat">
-    var $zoho = $zoho || {};
-    $zoho.salesiq = $zoho.salesiq || {
-      widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
-      values: {},
-      ready: function () {
-      }
-    };
-    var d = document;
-    s = d.createElement("script");
-    s.type = "text/javascript";
-    s.id = "zsiqscript";
-    s.defer = true;
-    s.src = "https://salesiq.zohopublic.com/widget";
-    t = d.getElementsByTagName("script")[0];
-    t.parentNode.insertBefore(s, t);
-  </script>
+
+  <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
+
+  <call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001
+                    party="LiveChat528346"></call-us-selector>
+
+  <!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
+
+  <!--<call-us
+  
+  phonesystem-url=https://rometech.east.3cx.us:5001
+  
+  style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
+  
+  id="wp-live-chat-by-3CX"
+  
+  minimized="true"
+  
+  animation-style="noanimation"
+  
+  party="LiveChat528346"
+  
+  minimized-style="bubbleright"
+  
+  allow-call="true"
+  
+  allow-video="false"
+  
+  allow-soundnotifications="true"
+  
+  enable-mute="true"
+  
+  enable-onmobile="true"
+  
+  offline-enabled="true"
+  
+  enable="true"
+  
+  ignore-queueownership="false"
+  
+  authentication="both"
+  
+  show-operator-actual-name="true"
+  
+  aknowledge-received="true"
+  
+  gdpr-enabled="false"
+  
+  message-userinfo-format="name"
+  
+  message-dateformat="both"
+  
+  lang="browser"
+  
+  button-icon-type="default"
+  
+  greeting-visibility="none"
+  
+  greeting-offline-visibility="none"
+  
+  chat-delay="2000"
+  
+  enable-direct-call="true"
+  
+  enable-ga="false"
+  
+  ></call-us>-->
+
+  <script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js
+          id="tcx-callus-js" charset="utf-8"></script>
+
 
   <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
   <title>ProManager</title>

client/package-lock.json

@@ -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.14.1",
         "react-color": "^2.19.3",
         "react-cookie": "^7.2.0",
         "react-dom": "^18.3.1",
@@ -109,7 +109,8 @@
         "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"
       },
       "engines": {
         "node": ">=18.18.2"
@@ -14670,9 +14671,9 @@
       }
     },
     "node_modules/react-big-calendar": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-1.13.2.tgz",
-      "integrity": "sha512-yzeVRM1I+JloeJXytrZx2lJWKUfLAi5bsgGuBjh3aFSHZrdFcGnfA7LE6pBacdyOG+NGP+332m2MziszkmQWcw==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-1.14.1.tgz",
+      "integrity": "sha512-6Le0kV/4yiV/mlqv5YYBBS+FaBeYBPNGjcYitLoVdPCiXsc0xzSHyX8+2FRqX9AM16XZYIjjomouK3wcnq6+XQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
@@ -18429,6 +18430,7 @@
       "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-7.1.0.tgz",
       "integrity": "sha512-ZHeROyqR+AS5UPzholQRDttLFqGMwP0Np8MKWAdyxsDETxq3qOAyXvqessc3GniohG6e0mAqSQyKOHmT8zPF7g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/trusted-types": "^2.0.2",
         "workbox-core": "7.1.0"

client/package.json

@@ -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.14.1",
     "react-color": "^2.19.3",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
@@ -153,6 +153,7 @@
     "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,7 +18,6 @@ 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/handleBeta";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
@@ -108,8 +107,6 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
     return <LoadingSpinner message={t("general.labels.loggingin")} />;
   }
 
-  handleBeta();
-
   if (!online) {
     return (
       <Result

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

@@ -98,7 +98,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
     });
 
     billlines.forEach((billline) => {
-      const { deductedfromlbr, inventories, jobline, ...il } = billline;
+      const { deductedfromlbr, inventories, jobline, original_actual_price, create_ppc, ...il } = billline;
       delete il.__typename;
 
       if (il.id) {

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

@@ -1,18 +1,18 @@
-import React, { useCallback, useState } from "react";
 import { DatePicker } from "antd";
-import dayjs from "../../utils/day";
-import { formats, shorthandFormats } from "./formats.js";
 import PropTypes from "prop-types";
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import dayjs from "../../utils/day";
+import { fuzzyMatchDate } from "./formats.js";
 
 const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
   const [isManualInput, setIsManualInput] = useState(false);
+  const { t } = useTranslation();
 
   const handleChange = useCallback(
     (newDate) => {
-      if (newDate === null && onChange) {
-        onChange(null);
-      } else if (newDate && onChange) {
-        onChange(newDate);
+      if (onChange) {
+        onChange(newDate || null);
       }
       setIsManualInput(false);
     },
@@ -21,57 +21,24 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
 
   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;
+      const v = e?.target?.value;
+
       if (!v) return;
 
-      const upperV = v.toUpperCase();
+      let parsedDate = isDateOnly ? fuzzyMatchDate(v)?.startOf("day") : fuzzyMatchDate(v);
 
-      let _a;
-
-      for (const format of shorthandFormats) {
-        _a = dayjs(upperV, format);
-        if (_a.isValid()) break;
-      }
-
-      if (!_a || !_a.isValid()) {
-        for (const format of formats) {
-          _a = dayjs(upperV, format);
-          if (_a.isValid()) break;
-        }
-      }
-
-      if (_a && _a.isValid()) {
-        if (isDateOnly) {
-          _a = _a.startOf("day");
-        }
-
-        if (value && value.isValid && value.isValid()) {
-          _a.set({
-            hours: value.hours(),
-            minutes: value.minutes(),
-            seconds: value.seconds(),
-            milliseconds: value.milliseconds()
-          });
-        }
-
-        if (onlyFuture) {
-          if (dayjs().subtract(1, "day").isBefore(_a)) {
-            onChange(_a);
-          } else {
-            onChange(dayjs().startOf("day"));
-          }
-        } else {
-          onChange(_a);
-        }
+      if (parsedDate && onChange) {
+        onChange(parsedDate);
       }
     },
-    [isManualInput, isDateOnly, onlyFuture, onChange, value]
+    [isManualInput, isDateOnly, onChange]
   );
 
   const handleKeyDown = useCallback(
@@ -79,6 +46,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
       setIsManualInput(true);
 
       if (e.key.toLowerCase() === "t" && onChange) {
+        e.preventDefault();
         setIsManualInput(false);
         onChange(dayjs());
       } else if (e.key.toLowerCase() === "enter") {
@@ -115,6 +83,7 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
         format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
         value={value ? dayjs(value) : null}
         onChange={handleChange}
+        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
         onBlur={onBlur || handleBlur}
         disabledDate={handleDisabledDate}
         {...restProps}

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

@@ -1,93 +1,63 @@
-export const shorthandFormats = [
-  "M/D/YY hA",
-  "M/D/YY h:mmA",
-  "M/D/YYYY hA",
-  "M/D/YYYY h:mmA",
-  "M/D/YY ha",
-  "M/D/YY h:mma",
-  "M/D/YYYY ha",
-  "M/D/YYYY h:mma"
+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"
 ];
 
-export 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",
+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",
-  "D/MM/YY",
-  "D/MM/YYYY",
-  "DD/M/YY",
-  "DD/M/YYYY",
-  "D/M/YY",
-  "D/M/YYYY",
-  "MMDDYY hh:mm A",
-  "MMDDYYYY hh:mm A",
-  "MM/DD/YY hh:mm A",
-  "MM/DD/YYYY hh:mm A",
-  "M/DD/YY hh:mm A",
-  "M/DD/YYYY hh:mm A",
-  "MM/D/YY hh:mm A",
-  "MM/D/YYYY hh:mm A",
-  "M/D/YY hh:mm A",
-  "M/D/YYYY hh:mm A",
-  "D/MM/YY hh:mm A",
-  "D/MM/YYYY hh:mm A",
-  "DD/M/YY hh:mm A",
-  "DD/M/YYYY hh:mm A",
-  "D/M/YY hh:mm A",
-  "D/M/YYYY hh:mm A",
-  "MMDDYY hh:mm:ss A",
-  "MMDDYYYY hh:mm:ss A",
-  "MM/DD/YY hh:mm:ss A",
-  "MM/DD/YYYY hh:mm:ss A",
-  "M/DD/YY hh:mm:ss A",
-  "M/DD/YYYY hh:mm:ss A",
-  "MM/D/YY hh:mm:ss A",
-  "MM/D/YYYY hh:mm:ss A",
-  "M/D/YY hh:mm:ss A",
-  "M/D/YYYY hh:mm:ss A",
-  "D/MM/YY hh:mm:ss A",
-  "D/MM/YYYY hh:mm:ss A",
-  "DD/M/YY hh:mm:ss A",
-  "DD/M/YYYY hh:mm:ss A",
-  "D/M/YY hh:mm:ss A",
-  "D/M/YYYY hh:mm:ss A",
-  "MMDDYY HH:mm",
-  "MMDDYYYY HH:mm",
-  "MM/DD/YY HH:mm",
-  "MM/DD/YYYY HH:mm",
-  "M/DD/YY HH:mm",
-  "M/DD/YYYY HH:mm",
-  "MM/D/YY HH:mm",
-  "MM/D/YYYY HH:mm",
-  "M/D/YY HH:mm",
-  "M/D/YYYY HH:mm",
-  "D/MM/YY HH:mm",
-  "D/MM/YYYY HH:mm",
-  "DD/M/YY HH:mm",
-  "DD/M/YYYY HH:mm",
-  "D/M/YY HH:mm",
-  "D/M/YYYY HH:mm",
-  "MMDDYY HH:mm:ss",
-  "MMDDYYYY HH:mm:ss",
-  "MM/DD/YY HH:mm:ss",
-  "MM/DD/YYYY HH:mm:ss",
-  "M/DD/YY HH:mm:ss",
-  "M/DD/YYYY HH:mm:ss",
-  "MM/D/YY HH:mm:ss",
-  "MM/D/YYYY HH:mm:ss",
-  "M/D/YY HH:mm:ss",
-  "M/D/YYYY HH:mm:ss",
-  "D/MM/YY HH:mm:ss",
-  "D/MM/YYYY HH:mm:ss",
-  "DD/M/YY HH:mm:ss",
-  "DD/M/YYYY HH:mm:ss",
-  "D/M/YY HH:mm:ss",
-  "D/M/YYYY HH:mm:ss"
+  "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/handleBeta";
 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-at-change/schedule-event.color.component.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { useMutation } from "@apollo/client";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
@@ -11,55 +11,61 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 
 export function ScheduleEventColor({ bodyshop, event }) {
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const { t } = useTranslation();
 
-  const onClick = async ({ key }) => {
-    const result = await updateAppointment({
-      variables: {
-        appid: event.id,
-        app: { color: key === "null" ? null : key }
-      }
-    });
-
-    if (!!!result.errors) {
-      notification["success"]({ message: t("appointments.successes.saved") });
-    } else {
-      notification["error"]({
-        message: t("appointments.errors.saving", {
-          error: JSON.stringify(result.errors)
-        })
+  const onClick = useCallback(
+    async ({ key }) => {
+      const result = await updateAppointment({
+        variables: {
+          appid: event.id,
+          app: { color: key === "null" ? null : key }
+        }
       });
+
+      if (!result.errors) {
+        notification.success({ message: t("appointments.successes.saved") });
+      } else {
+        notification.error({
+          message: t("appointments.errors.saving", {
+            error: JSON.stringify(result.errors)
+          })
+        });
+      }
+    },
+    [event.id, t, updateAppointment]
+  );
+
+  const selectedColor = useMemo(() => {
+    if (event.color && bodyshop.appt_colors) {
+      const colorObj = bodyshop.appt_colors.find((color) => color.color.hex === event.color);
+      return colorObj?.label;
     }
-  };
+    return null;
+  }, [event.color, bodyshop.appt_colors]);
 
-  const selectedColor =
-    event.color &&
-    bodyshop.appt_colors &&
-    bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]?.label;
-
-  const menu = {
-    defaultSelectedKeys: [event.color],
-    onClick: onClick,
-    items: [
-      ...(bodyshop.appt_colors || []).map((color) => ({
-        key: color.color.hex,
-        label: color.label,
-        style: { color: color.color.hex }
-      })),
-      { type: "divider" },
-      { key: "null", label: t("general.actions.clear") }
-    ]
-  };
+  const menu = useMemo(
+    () => ({
+      defaultSelectedKeys: [event.color],
+      onClick: onClick,
+      items: [
+        ...(bodyshop.appt_colors || []).map((color) => ({
+          key: color.color.hex,
+          label: color.label,
+          style: { color: color.color.hex }
+        })),
+        { type: "divider" },
+        { key: "null", label: t("general.actions.clear") }
+      ]
+    }),
+    [bodyshop.appt_colors, event.color, onClick, t]
+  );
 
   return (
     <Dropdown menu={menu}>
-      <a href=" #" onClick={(e) => e.preventDefault()}>
+      <a href="#" onClick={(e) => e.preventDefault()}>
         {selectedColor}
         <DownOutlined />
       </a>
@@ -67,4 +73,4 @@ export function ScheduleEventColor({ bodyshop, event }) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);
+export default connect(mapStateToProps)(React.memo(ScheduleEventColor));

client/src/components/job-at-change/schedule-event.component.jsx

@@ -2,11 +2,10 @@ import { AlertFilled } from "@ant-design/icons";
 import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import dayjs from "../../utils/day";
-import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -27,6 +26,7 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
+
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -44,301 +44,319 @@ export function ScheduleEventComponent({
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const history = useNavigate();
-  const searchParams = queryString.parse(useLocation().search);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
-  const blockContent = (
-    <Space direction="vertical" wrap>
-      <Input
-        value={title}
-        onChange={(e) => setTitle(e.currentTarget.value)}
-        onBlur={async () => {
-          await updateAppointment({
-            variables: {
-              appid: event.id,
-              app: {
-                title: title
-              }
-            },
-            optimisticResponse: {
-              update_appointments: {
-                __typename: "appointments_mutation_response",
-                returning: [
-                  {
-                    ...event,
-                    title: title,
-                    __typename: "appointments"
-                  }
-                ]
-              }
-            }
-          });
-        }}
-      />
 
-      <Button onClick={() => handleCancel({ id: event.id })} disabled={event.arrived}>
-        {t("appointments.actions.unblock")}
-      </Button>
-    </Space>
+  const handleTitleBlur = useCallback(async () => {
+    await updateAppointment({
+      variables: {
+        appid: event.id,
+        app: {
+          title: title
+        }
+      },
+      optimisticResponse: {
+        update_appointments: {
+          __typename: "appointments_mutation_response",
+          returning: [
+            {
+              ...event,
+              title: title,
+              __typename: "appointments"
+            }
+          ]
+        }
+      }
+    });
+  }, [updateAppointment, event, title]);
+
+  const handleUnblock = useCallback(() => {
+    handleCancel({ id: event.id });
+  }, [handleCancel, event.id]);
+
+  const handlePreviewClick = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    params.set("selected", event.job?.id);
+    navigate({ search: `?${params.toString()}` });
+  }, [navigate, searchParams, event.job?.id]);
+
+  const handleSendEmailReminder = useCallback(() => {
+    const Template = TemplateList("job").appointment_reminder;
+    GenerateDocument(
+      {
+        name: Template.key,
+        variables: { id: event.job.id }
+      },
+      {
+        to: event.job && event.job.ownr_ea,
+        subject: Template.subject
+      },
+      "e",
+      event.job && event.job.id
+    );
+  }, [event.job]);
+
+  const handleSendSMSReminder = useCallback(() => {
+    const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
+    if (p && p.isValid()) {
+      openChatByPhone({
+        phone_num: p.formatInternational(),
+        jobid: event.job.id
+      });
+      setMessage(
+        t("appointments.labels.reminder", {
+          shopname: bodyshop.shopname,
+          date: dayjs(event.start).format("MM/DD/YYYY"),
+          time: dayjs(event.start).format("HH:mm a")
+        })
+      );
+      setOpen(false);
+    } else {
+      notification.error({
+        message: t("messaging.error.invalidphone")
+      });
+    }
+  }, [event.job, openChatByPhone, setMessage, t, bodyshop.shopname, event.start, setOpen]);
+
+  const reminderMenuItems = useMemo(
+    () => [
+      {
+        key: "email",
+        label: t("general.labels.email"),
+        disabled: event.arrived,
+        onClick: handleSendEmailReminder
+      },
+      {
+        key: "sms",
+        label: t("general.labels.sms"),
+        disabled: event.arrived || !bodyshop.messagingservicesid,
+        onClick: handleSendSMSReminder
+      }
+    ],
+    [t, event.arrived, handleSendEmailReminder, handleSendSMSReminder, bodyshop.messagingservicesid]
   );
 
-  const popoverContent = (
-    <div style={{ maxWidth: "40vw" }}>
-      {!event.isintake ? (
-        <Space>
-          <strong>{event.title}</strong>
-          <ScheduleEventColor event={event} />
-        </Space>
-      ) : (
-        <Space>
-          <strong>
-            <OwnerNameDisplay ownerObject={event.job} />
-          </strong>
-          <span style={{ margin: 4 }}>
-            {`${(event.job && event.job.v_model_yr) || ""} ${
-              (event.job && event.job.v_make_desc) || ""
-            } ${(event.job && event.job.v_model_desc) || ""}`}
-          </span>
-          <ScheduleEventColor event={event} />
-        </Space>
-      )}
+  const reminderMenu = useMemo(() => ({ items: reminderMenuItems }), [reminderMenuItems]);
 
-      {event.job ? (
-        <div>
-          <DataLabel label={t("jobs.fields.ro_number")}>{(event.job && event.job.ro_number) || ""}</DataLabel>
-          <DataLabel label={t("jobs.fields.clm_total")}>
-            <CurrencyFormatter>{(event.job && event.job.clm_total) || ""}</CurrencyFormatter>
-          </DataLabel>
-          <DataLabel hideIfNull label={t("jobs.fields.ins_co_nm")}>
-            {(event.job && event.job.ins_co_nm) || ""}
-          </DataLabel>
-          <DataLabel hideIfNull label={t("jobs.fields.clm_no")}>
-            {(event.job && event.job.clm_no) || ""}
-          </DataLabel>
-          <DataLabel label={t("jobs.fields.ownr_ea")}>{(event.job && event.job.ownr_ea) || ""}</DataLabel>
-          <DataLabel label={t("jobs.fields.ownr_ph1")}>
-            <ChatOpenButton phone={event.job && event.job.ownr_ph1} jobid={event.job.id} />
-          </DataLabel>
-          <DataLabel label={t("jobs.fields.ownr_ph2")}>
-            <ChatOpenButton phone={event.job && event.job.ownr_ph2} jobid={event.job.id} />
-          </DataLabel>
-          <DataLabel label={t("jobs.fields.alt_transport")}>
-            {(event.job && event.job.alt_transport) || ""}
-            <ScheduleAtChange job={event && event.job} />
-          </DataLabel>
-          <ScheduleEventNote event={event} />
-        </div>
-      ) : (
-        <div>{event.note || ""}</div>
-      )}
-      <Divider />
-      <Space wrap>
-        {event.job ? (
-          <Link to={`/manage/jobs/${event.job && event.job.id}`}>
-            <Button>{t("appointments.actions.viewjob")}</Button>
-          </Link>
-        ) : null}
-        {event.job ? (
-          <Button
-            onClick={() => {
-              history({
-                search: queryString.stringify({
-                  ...searchParams,
-                  selected: event.job.id
-                })
-              });
-            }}
-          >
-            {t("appointments.actions.preview")}
-          </Button>
-        ) : null}
-        {event.job ? (
-          <Dropdown
-            menu={{
-              items: [
-                {
-                  key: "email",
-                  label: t("general.labels.email"),
-                  disabled: event.arrived,
-                  onClick: () => {
-                    const Template = TemplateList("job").appointment_reminder;
-                    GenerateDocument(
-                      {
-                        name: Template.key,
-                        variables: { id: event.job.id }
-                      },
-                      {
-                        to: event.job && event.job.ownr_ea,
-                        subject: Template.subject
-                      },
-                      "e",
-                      event.job && event.job.id
-                    );
-                  }
-                },
-                {
-                  key: "sms",
-                  label: t("general.labels.sms"),
-                  disabled: event.arrived || !bodyshop.messagingservicesid,
-                  onClick: () => {
-                    const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
-                    if (p && p.isValid()) {
-                      openChatByPhone({
-                        phone_num: p.formatInternational(),
-                        jobid: event.job.id
-                      });
-                      setMessage(
-                        t("appointments.labels.reminder", {
-                          shopname: bodyshop.shopname,
-                          date: dayjs(event.start).format("MM/DD/YYYY"),
-                          time: dayjs(event.start).format("HH:mm a")
-                        })
-                      );
-                      setOpen(false);
-                    } else {
-                      notification["error"]({
-                        message: t("messaging.error.invalidphone")
-                      });
-                    }
-                  }
-                }
-              ]
-            }}
-          >
-            <Button>{t("appointments.actions.sendreminder")}</Button>
-          </Dropdown>
-        ) : null}
-        {event.arrived ? (
-          <Button
-            // onClick={() => handleCancel(event.id)}
-            disabled={event.arrived}
-          >
-            {t("appointments.actions.cancel")}
-          </Button>
-        ) : (
-          <Popover
-            trigger="click"
-            disabled={event.arrived}
-            content={
-              <Form
-                layout="vertical"
-                onFinish={({ lost_sale_reason }) => {
-                  handleCancel({ id: event.id, lost_sale_reason });
-                }}
-              >
-                <Form.Item
-                  name="lost_sale_reason"
-                  label={t("jobs.fields.lost_sale_reason")}
-                  rules={[
-                    {
-                      required: true
-                      //message: t("general.validation.required"),
-                    }
-                  ]}
-                >
-                  <Select
-                    options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
-                      label: lsr,
-                      value: lsr
-                    }))}
-                  />
-                </Form.Item>
-                <Button htmlType="submit">{t("appointments.actions.cancel")}</Button>
-              </Form>
-            }
-          >
-            <Button
-              // onClick={() => handleCancel(event.id)}
-              disabled={event.arrived}
-            >
-              {t("appointments.actions.cancel")}
-            </Button>
-          </Popover>
-        )}
+  const handleCancelFormFinish = useCallback(
+    ({ lost_sale_reason }) => {
+      handleCancel({ id: event.id, lost_sale_reason });
+    },
+    [handleCancel, event.id]
+  );
 
-        {event.isintake ? (
-          <Button
-            disabled={event.arrived}
-            onClick={() => {
-              setOpen(false);
-              setScheduleContext({
-                actions: { refetch: refetch },
-                context: {
-                  jobId: event.job.id,
-                  job: event.job,
-                  previousEvent: event.id,
-                  color: event.color,
-                  alt_transport: event.job && event.job.alt_transport,
-                  note: event.note
-                }
-              });
-            }}
-          >
-            {t("appointments.actions.reschedule")}
-          </Button>
-        ) : (
-          <ScheduleManualEvent event={event} />
-        )}
-        {event.isintake ? (
-          <Link
-            to={{
-              pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
-              search: `?appointmentId=${event.id}`
-            }}
-          >
-            <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
-          </Link>
-        ) : null}
+  const handleRescheduleClick = useCallback(() => {
+    setOpen(false);
+    setScheduleContext({
+      actions: { refetch: refetch },
+      context: {
+        jobId: event.job.id,
+        job: event.job,
+        previousEvent: event.id,
+        color: event.color,
+        alt_transport: event.job && event.job.alt_transport,
+        note: event.note
+      }
+    });
+  }, [setOpen, setScheduleContext, refetch, event]);
+
+  const handleOpenChange = useCallback(
+    (vis) => {
+      if (!event.vacation) setOpen(vis);
+    },
+    [event.vacation]
+  );
+
+  const blockContent = useMemo(
+    () => (
+      <Space direction="vertical" wrap>
+        <Input value={title} onChange={(e) => setTitle(e.currentTarget.value)} onBlur={handleTitleBlur} />
+
+        <Button onClick={handleUnblock} disabled={event.arrived}>
+          {t("appointments.actions.unblock")}
+        </Button>
       </Space>
-    </div>
+    ),
+    [title, handleTitleBlur, handleUnblock, event.arrived, t]
   );
 
-  const RegularEvent = event.isintake ? (
-    <Space
-      wrap
-      size="small"
-      style={{
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
-      }}
-    >
-      {event.note && <AlertFilled className="production-alert" />}
-      <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
+  const popoverContent = useMemo(() => {
+    console.log("hit");
+    return (
+      <div style={{ maxWidth: "40vw" }}>
+        {!event.isintake ? (
+          <Space>
+            <strong>{event.title}</strong>
+            <ScheduleEventColor event={event} />
+          </Space>
+        ) : (
+          <Space>
+            <strong>
+              <OwnerNameDisplay ownerObject={event.job} />
+            </strong>
+            <span style={{ margin: 4 }}>
+              {`${(event.job && event.job.v_model_yr) || ""} ${
+                (event.job && event.job.v_make_desc) || ""
+              } ${(event.job && event.job.v_model_desc) || ""}`}
+            </span>
+            <ScheduleEventColor event={event} />
+          </Space>
+        )}
 
-      <OwnerNameDisplay ownerObject={event.job} />
+        {event.job ? (
+          <div>
+            <DataLabel label={t("jobs.fields.ro_number")}>{(event.job && event.job.ro_number) || ""}</DataLabel>
+            <DataLabel label={t("jobs.fields.clm_total")}>
+              <CurrencyFormatter>{(event.job && event.job.clm_total) || ""}</CurrencyFormatter>
+            </DataLabel>
+            <DataLabel hideIfNull label={t("jobs.fields.ins_co_nm")}>
+              {(event.job && event.job.ins_co_nm) || ""}
+            </DataLabel>
+            <DataLabel hideIfNull label={t("jobs.fields.clm_no")}>
+              {(event.job && event.job.clm_no) || ""}
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.ownr_ea")}>{(event.job && event.job.ownr_ea) || ""}</DataLabel>
+            <DataLabel label={t("jobs.fields.ownr_ph1")}>
+              <ChatOpenButton phone={event.job && event.job.ownr_ph1} jobid={event.job.id} />
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.ownr_ph2")}>
+              <ChatOpenButton phone={event.job && event.job.ownr_ph2} jobid={event.job.id} />
+            </DataLabel>
+            <DataLabel label={t("jobs.fields.alt_transport")}>
+              {(event.job && event.job.alt_transport) || ""}
+              <ScheduleAtChange job={event && event.job} />
+            </DataLabel>
+            <ScheduleEventNote event={event} />
+          </div>
+        ) : (
+          <div>{event.note || ""}</div>
+        )}
+        <Divider />
+        <Space wrap>
+          {event.job ? (
+            <Link to={`/manage/jobs/${event.job && event.job.id}`}>
+              <Button>{t("appointments.actions.viewjob")}</Button>
+            </Link>
+          ) : null}
+          {event.job ? <Button onClick={handlePreviewClick}>{t("appointments.actions.preview")}</Button> : null}
+          {event.job ? (
+            <Dropdown menu={reminderMenu}>
+              <Button>{t("appointments.actions.sendreminder")}</Button>
+            </Dropdown>
+          ) : null}
+          {event.arrived ? (
+            <Button disabled={event.arrived}>{t("appointments.actions.cancel")}</Button>
+          ) : (
+            <Popover
+              trigger="click"
+              disabled={event.arrived}
+              content={
+                <Form layout="vertical" onFinish={handleCancelFormFinish}>
+                  <Form.Item
+                    name="lost_sale_reason"
+                    label={t("jobs.fields.lost_sale_reason")}
+                    rules={[
+                      {
+                        required: true
+                      }
+                    ]}
+                  >
+                    <Select
+                      options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
+                        label: lsr,
+                        value: lsr
+                      }))}
+                    />
+                  </Form.Item>
+                  <Button htmlType="submit">{t("appointments.actions.cancel")}</Button>
+                </Form>
+              }
+            >
+              <Button disabled={event.arrived}>{t("appointments.actions.cancel")}</Button>
+            </Popover>
+          )}
 
-      {`${(event.job && event.job.v_model_yr) || ""} ${
-        (event.job && event.job.v_make_desc) || ""
-      } ${(event.job && event.job.v_model_desc) || ""}`}
+          {event.isintake ? (
+            <Button disabled={event.arrived} onClick={handleRescheduleClick}>
+              {t("appointments.actions.reschedule")}
+            </Button>
+          ) : (
+            <ScheduleManualEvent event={event} />
+          )}
+          {event.isintake ? (
+            <Link
+              to={{
+                pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
+                search: `?appointmentId=${event.id}`
+              }}
+            >
+              <Button disabled={event.arrived}>{t("appointments.actions.intake")}</Button>
+            </Link>
+          ) : null}
+        </Space>
+      </div>
+    );
+  }, [
+    event,
+    t,
+    handlePreviewClick,
+    reminderMenu,
+    bodyshop.md_lost_sale_reasons,
+    handleCancelFormFinish,
+    handleRescheduleClick
+  ]);
 
-      {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
-        (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
-      })`}
+  const RegularEvent = useMemo(
+    () =>
+      event.isintake ? (
+        <Space
+          wrap
+          size="small"
+          style={{
+            backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+          }}
+        >
+          {event.note && <AlertFilled className="production-alert" />}
+          <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
 
-      {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
-    </Space>
-  ) : (
-    <div
-      style={{
-        height: "100%",
-        width: "100%",
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
-      }}
-    >
-      <strong>{`${event.title || ""}`}</strong>
-    </div>
+          <OwnerNameDisplay ownerObject={event.job} />
+
+          {`${(event.job && event.job.v_model_yr) || ""} ${
+            (event.job && event.job.v_make_desc) || ""
+          } ${(event.job && event.job.v_model_desc) || ""}`}
+
+          {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
+            (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
+          })`}
+
+          {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
+        </Space>
+      ) : (
+        <div
+          style={{
+            height: "100%",
+            width: "100%",
+            backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+          }}
+        >
+          <strong>{`${event.title || ""}`}</strong>
+        </div>
+      ),
+    [event, t]
   );
 
   return (
     <Popover
       open={open}
-      onOpenChange={(vis) => !event.vacation && setOpen(vis)}
+      onOpenChange={handleOpenChange}
       trigger="click"
       content={event.block ? blockContent : popoverContent}
       style={{
         height: "100%",
         width: "100%",
-
         backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
       }}
     >
@@ -347,4 +365,4 @@ export function ScheduleEventComponent({
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(ScheduleEventComponent));

client/src/components/job-at-change/schedule-event.container.jsx

@@ -1,6 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { notification } from "antd";
-import React from "react";
+import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -10,64 +10,70 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ScheduleEventComponent from "./schedule-event.component";
 
-export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
+function ScheduleEventContainer({ bodyshop, event, refetch }) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [updateJob] = useMutation(UPDATE_JOB);
-  const handleCancel = async ({ id, lost_sale_reason }) => {
-    logImEXEvent("schedule_cancel_appt");
 
-    const cancelAppt = await cancelAppointment({
-      variables: { appid: event.id }
-    });
-    notification["success"]({
-      message: t("appointments.successes.canceled")
-    });
+  const handleCancel = useCallback(
+    async ({ id, lost_sale_reason }) => {
+      logImEXEvent("schedule_cancel_appt");
 
-    if (!!cancelAppt.errors) {
-      notification["error"]({
-        message: t("appointments.errors.canceling", {
-          message: JSON.stringify(cancelAppt.errors)
-        })
+      const cancelAppt = await cancelAppointment({
+        variables: { appid: event.id }
       });
-      return;
-    }
 
-    if (event.job) {
-      const jobUpdate = await updateJob({
-        variables: {
-          jobId: event.job.id,
-          job: {
-            date_scheduled: null,
-            scheduled_in: null,
-            scheduled_completion: null,
-            lost_sale_reason,
-            date_lost_sale: new Date(),
-            status: bodyshop.md_ro_statuses.default_imported
-          }
-        }
-      });
-      if (!jobUpdate.errors) {
-        dispatch(
-          insertAuditTrail({
-            jobid: event.job.id,
-            operation: AuditTrailMapping.appointmentcancel(lost_sale_reason),
-            type: "appointmentcancel"
-          })
-        );
-      }
-      if (!!jobUpdate.errors) {
-        notification["error"]({
-          message: t("jobs.errors.updating", {
-            message: JSON.stringify(jobUpdate.errors)
+      if (!cancelAppt.errors) {
+        notification.success({
+          message: t("appointments.successes.canceled")
+        });
+      } else {
+        notification.error({
+          message: t("appointments.errors.canceling", {
+            message: JSON.stringify(cancelAppt.errors)
           })
         });
         return;
       }
-    }
-    if (refetch) refetch();
-  };
+
+      if (event.job) {
+        const jobUpdate = await updateJob({
+          variables: {
+            jobId: event.job.id,
+            job: {
+              date_scheduled: null,
+              scheduled_in: null,
+              scheduled_completion: null,
+              lost_sale_reason,
+              date_lost_sale: new Date(),
+              status: bodyshop.md_ro_statuses.default_imported
+            }
+          }
+        });
+        if (!jobUpdate.errors) {
+          dispatch(
+            insertAuditTrail({
+              jobid: event.job.id,
+              operation: AuditTrailMapping.appointmentcancel(lost_sale_reason),
+              type: "appointmentcancel"
+            })
+          );
+        } else {
+          notification.error({
+            message: t("jobs.errors.updating", {
+              message: JSON.stringify(jobUpdate.errors)
+            })
+          });
+          return;
+        }
+      }
+      if (refetch) refetch();
+    },
+    [cancelAppointment, event.id, event.job, updateJob, bodyshop.md_ro_statuses.default_imported, dispatch, t, refetch]
+  );
 
   return <ScheduleEventComponent event={event} refetch={refetch} handleCancel={handleCancel} />;
 }
+
+export default React.memo(ScheduleEventContainer);

client/src/components/job-at-change/schedule-event.note.component.jsx

@@ -1,7 +1,7 @@
 import { EditFilled, SaveFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, Input, notification, Space } from "antd";
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,9 +12,6 @@ import DataLabel from "../data-label/data-label.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 
 export function ScheduleEventNote({ event }) {
   const [editing, setEditing] = useState(false);
@@ -23,9 +20,9 @@ export function ScheduleEventNote({ event }) {
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const { t } = useTranslation();
 
-  const toggleEdit = async () => {
+  const toggleEdit = useCallback(async () => {
     if (editing) {
-      //Await the update
+      // Await the update
       setLoading(true);
       const result = await updateAppointment({
         variables: {
@@ -34,10 +31,10 @@ export function ScheduleEventNote({ event }) {
         }
       });
 
-      if (!!!result.errors) {
-        //  notification["success"]({ message: t("appointments.successes.saved") });
+      if (!result.errors) {
+        // notification.success({ message: t("appointments.successes.saved") });
       } else {
-        notification["error"]({
+        notification.error({
           message: t("jobs.errors.saving", {
             error: JSON.stringify(result.errors)
           })
@@ -45,11 +42,15 @@ export function ScheduleEventNote({ event }) {
       }
 
       setEditing(false);
+      setLoading(false);
     } else {
       setEditing(true);
     }
-    setLoading(false);
-  };
+  }, [editing, note, updateAppointment, event.id, t]);
+
+  const handleNoteChange = useCallback((e) => {
+    setNote(e.target.value);
+  }, []);
 
   return (
     <DataLabel label={t("appointments.fields.note")}>
@@ -57,7 +58,7 @@ export function ScheduleEventNote({ event }) {
         {!editing ? (
           event.note || ""
         ) : (
-          <Input.TextArea rows={3} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: "8vw" }} />
+          <Input.TextArea rows={3} value={note} onChange={handleNoteChange} style={{ maxWidth: "8vw" }} />
         )}
         <Button onClick={toggleEdit} loading={loading}>
           {editing ? <SaveFilled /> : <EditFilled />}
@@ -67,4 +68,4 @@ export function ScheduleEventNote({ event }) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventNote);
+export default connect(mapStateToProps)(React.memo(ScheduleEventNote));

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

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

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

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

client/src/components/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.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-list-columns/production-list-columns.data.jsx

@@ -28,6 +28,11 @@ import ProductionListColumnCategory from "./production-list-columns.status.categ
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionListColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
+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;
   return [
@@ -426,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" />
@@ -440,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" />
@@ -460,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" />
@@ -474,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-table/production-list-table.component.jsx

@@ -1,23 +1,23 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Dropdown, Input, Space, Statistic, Table } from "antd";
+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 _ 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 { ProductionListConfigManager } from "./production-list-config-manager.component.jsx";
 import ProductionListPrint from "./production-list-print.component";
 import ResizeableTitle from "./production-list-table.resizeable.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { SyncOutlined } from "@ant-design/icons";
-import Prompt from "../../utils/prompt.js";
-import _ from "lodash";
-import AlertComponent from "../alert/alert.component.jsx";
-import { ProductionListConfigManager } from "./production-list-config-manager.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -43,7 +43,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
   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: "" }
       }

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

@@ -34,28 +34,34 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
   const [form] = Form.useForm();
   const [search, setSearch] = useState("");
   const {
-    treatments: { Enhanced_Payroll }
+    treatments: { Enhanced_Payroll, ADPPayroll }
   } = useSplitTreatments({
     attributes: {},
-    names: ["Enhanced_Payroll"],
+    names: ["Enhanced_Payroll", "ADPPayroll"],
     splitKey: bodyshop.imexshopid
   });
 
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const Templates = TemplateList("report_center");
-  const ReportsList =
-    Enhanced_Payroll.treatment === "on"
-      ? Object.keys(Templates)
-          .map((key) => {
-            return Templates[key];
-          })
-          .filter((temp) => temp.enhanced_payroll === undefined || temp.enhanced_payroll === true)
-      : Object.keys(Templates)
-          .map((key) => {
-            return Templates[key];
-          })
-          .filter((temp) => temp.enhanced_payroll === undefined || temp.enhanced_payroll === false);
+  const ReportsList = Object.keys(Templates)
+    .map((key) => Templates[key])
+    .filter((temp) => {
+      const enhancedPayrollOn = Enhanced_Payroll.treatment === "on";
+      const adpPayrollOn = ADPPayroll.treatment === "on";
+
+      if (enhancedPayrollOn && adpPayrollOn) {
+        return temp.enhanced_payroll !== false || temp.adp_payroll !== false;
+      }
+      if (enhancedPayrollOn) {
+        return temp.enhanced_payroll !== false && temp.adp_payroll !== true;
+      }
+      if (adpPayrollOn) {
+        return temp.adp_payroll !== false && temp.enhanced_payroll !== true;
+      }
+
+      return temp.enhanced_payroll !== true && temp.adp_payroll !== true;
+    });
 
   const { open } = reportCenterModal;
 
@@ -104,7 +110,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
         to: values.to,
         subject: Templates[values.key]?.subject
       },
-      values.sendbyexcel === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
+      values.sendbytext === "text" ? values.sendbytext : values.sendbyexcel === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
       id
     );
     setLoading(false);
@@ -291,7 +297,15 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                   </Radio.Group>
                 </Form.Item>
               );
-            if (reporttype !== "excel")
+            if (reporttype === "text")
+              return (
+                <Form.Item label={t("general.labels.sendby")} name="sendbytext" initialValue="text">
+                  <Radio.Group>
+                    <Radio value="text">{t("general.labels.text")}</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              );
+            if (reporttype !== "excel" || reporttype !== "text")
               return (
                 <Form.Item label={t("general.labels.sendby")} name="sendby" initialValue="print">
                   <Radio.Group>

client/src/components/schedule-ats-summary/schedule-ats-summary.component.jsx

@@ -1,50 +1,36 @@
 import { Space } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectScheduleLoad } from "../../redux/application/application.selectors";
 
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-  scheduleLoad: selectScheduleLoad
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-
-export function ScheduleAtsSummary({ scheduleLoad, appointments }) {
+const ScheduleAtsSummary = React.memo(function ScheduleAtsSummary({ appointments }) {
   const { t } = useTranslation();
 
   const atsSummary = useMemo(() => {
-    let atsSummary = {};
     if (!appointments || appointments.length === 0) {
       return {};
     }
+    const summary = {};
     appointments
-      .filter((a) => a.isintake)
+      .filter((a) => a.isintake && a.job?.alt_transport)
       .forEach((a) => {
-        if (!a.job.alt_transport) return;
-        if (!atsSummary[a.job.alt_transport]) {
-          atsSummary[a.job.alt_transport] = 1;
-        } else {
-          atsSummary[a.job.alt_transport] = atsSummary[a.job.alt_transport] + 1;
-        }
+        const key = a.job.alt_transport;
+        summary[key] = (summary[key] || 0) + 1;
       });
-    return atsSummary;
+    return summary;
   }, [appointments]);
 
-  if (Object.keys(atsSummary).length > 0)
+  if (Object.keys(atsSummary).length > 0) {
     return (
       <Space wrap>
         {t("schedule.labels.atssummary")}
-        {Object.keys(atsSummary).map((key) => (
-          <span key={key}>{`${key}: ${atsSummary[key]}`}</span>
+        {Object.entries(atsSummary).map(([key, value]) => (
+          <span key={key}>{`${key}: ${value}`}</span>
         ))}
       </Space>
     );
+  }
 
   return null;
-}
+});
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleAtsSummary);
+export default ScheduleAtsSummary;

client/src/components/schedule-block-day/schedule-block-day.component.jsx

@@ -1,7 +1,7 @@
 import { useMutation } from "@apollo/client";
 import { Dropdown, notification } from "antd";
 import dayjs from "../../utils/day";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,57 +13,61 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({});
-
-export function ScheduleBlockDay({ date, children, refetch, bodyshop, alreadyBlocked }) {
+const ScheduleBlockDay = React.memo(function ScheduleBlockDay({ date, children, refetch, bodyshop, alreadyBlocked }) {
   const { t } = useTranslation();
   const [insertBlock] = useMutation(INSERT_APPOINTMENT_BLOCK);
 
-  const handleMenu = async (e) => {
-    e.domEvent.stopPropagation();
+  const handleMenu = useCallback(
+    async (e) => {
+      e.domEvent.stopPropagation();
 
-    if (e.key === "block") {
-      const blockAppt = {
-        title: t("appointments.labels.blocked"),
-        block: true,
-        isintake: false,
-        bodyshopid: bodyshop.id,
-        start: dayjs(date).startOf("day"),
-        end: dayjs(date).endOf("day")
-      };
-      logImEXEvent("dashboard_change_layout");
+      if (e.key === "block") {
+        const blockAppt = {
+          title: t("appointments.labels.blocked"),
+          block: true,
+          isintake: false,
+          bodyshopid: bodyshop.id,
+          start: dayjs(date).startOf("day"),
+          end: dayjs(date).endOf("day")
+        };
+        logImEXEvent("dashboard_change_layout");
 
-      const result = await insertBlock({
-        variables: { app: [blockAppt] }
-      });
-
-      if (!!result.errors) {
-        notification["error"]({
-          message: t("appointments.errors.blocking", {
-            message: JSON.stringify(result.errors)
-          })
+        const result = await insertBlock({
+          variables: { app: [blockAppt] }
         });
-      }
 
-      if (!!refetch) refetch();
-    }
-  };
+        if (result.errors) {
+          notification.error({
+            message: t("appointments.errors.blocking", {
+              message: JSON.stringify(result.errors)
+            })
+          });
+        }
 
-  const menu = {
-    items: [
-      {
-        key: "block",
-        label: t("appointments.actions.block")
+        if (refetch) refetch();
       }
-    ],
-    onClick: handleMenu
-  };
+    },
+    [t, bodyshop.id, date, insertBlock, refetch]
+  );
+
+  const menu = useMemo(
+    () => ({
+      items: [
+        {
+          key: "block",
+          label: t("appointments.actions.block")
+        }
+      ],
+      onClick: handleMenu
+    }),
+    [t, handleMenu]
+  );
 
   return (
     <Dropdown menu={menu} disabled={alreadyBlocked} trigger={["contextMenu"]}>
       {children}
     </Dropdown>
   );
-}
+});
 
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleBlockDay);
+export default connect(mapStateToProps)(ScheduleBlockDay);

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx

@@ -10,55 +10,48 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 
-export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
+const mapDispatchToProps = () => ({});
+
+const ScheduleCalendarHeaderGraph = React.memo(function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
   const { ssbuckets } = bodyshop;
   const { t } = useTranslation();
-  const data = useMemo(() => {
-    return (
-      (loadData &&
-        loadData.expectedLoad &&
-        Object.keys(loadData.expectedLoad).map((key) => {
-          const metadataBucket = ssbuckets.filter((b) => b.id === key)[0];
 
-          return {
-            bucket: loadData.expectedLoad[key].label,
-            current: loadData.expectedLoad[key].count,
-            target: metadataBucket && metadataBucket.target
-          };
-        })) ||
-      []
-    );
+  const data = useMemo(() => {
+    if (!loadData || !loadData.expectedLoad || !ssbuckets) return [];
+
+    return Object.keys(loadData.expectedLoad).map((key) => {
+      const metadataBucket = ssbuckets.find((b) => b.id === key);
+
+      return {
+        bucket: loadData.expectedLoad[key].label,
+        current: loadData.expectedLoad[key].count,
+        target: metadataBucket?.target || 0
+      };
+    });
   }, [loadData, ssbuckets]);
 
-  const popContent = (
-    <div>
-      <Space>
-        {t("appointments.labels.expectedprodhrs")}
-        <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
-        {t("appointments.labels.expectedjobs")}
-        <strong>{loadData?.expectedJobCount}</strong>
-      </Space>
-      <RadarChart
-        // cx={300}
-        // cy={250}
-        // outerRadius={150}
-        width={800}
-        height={600}
-        data={data}
-      >
-        <PolarGrid />
-        <PolarAngleAxis dataKey="bucket" />
-        <PolarRadiusAxis angle={90} />
-        <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
-        <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
-        <Tooltip />
-        <Legend />
-      </RadarChart>
-    </div>
+  const popContent = useMemo(
+    () => (
+      <div>
+        <Space>
+          {t("appointments.labels.expectedprodhrs")}
+          <strong>{loadData?.expectedHours?.toFixed(1) || 0}</strong>
+          {t("appointments.labels.expectedjobs")}
+          <strong>{loadData?.expectedJobCount || 0}</strong>
+        </Space>
+        <RadarChart width={300} height={250} data={data}>
+          <PolarGrid />
+          <PolarAngleAxis dataKey="bucket" />
+          <PolarRadiusAxis angle={90} />
+          <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
+          <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
+          <Tooltip />
+          <Legend />
+        </RadarChart>
+      </div>
+    ),
+    [t, loadData, data]
   );
 
   return (
@@ -66,6 +59,6 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
       <RadarChartOutlined />
     </Popover>
   );
-}
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarHeaderGraph);

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -1,9 +1,8 @@
+import React, { useCallback, useMemo } from "react";
 import Icon from "@ant-design/icons";
 import { Popover, Space } from "antd";
 import _ from "lodash";
 import dayjs from "../../utils/day";
-
-import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
@@ -24,115 +23,114 @@ const mapStateToProps = createStructuredSelector({
   calculating: selectScheduleLoadCalculating
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
-export function ScheduleCalendarHeaderComponent({
+export const ScheduleCalendarHeaderComponent = React.memo(function ScheduleCalendarHeaderComponent({
   bodyshop,
   label,
   refetch,
   date,
   load,
   calculating,
-  events,
-  ...otherProps
+  events
 }) {
+  const dayjsDate = useMemo(() => dayjs(date), [date]);
+  const { t } = useTranslation();
+
   const ATSToday = useMemo(() => {
     if (!events) return [];
-    return _.groupBy(
-      events.filter((e) => !e.vacation && e.isintake && dayjs(date).isSame(dayjs(e.start), "day")),
-      "job.alt_transport"
-    );
-  }, [events, date]);
+    const filteredEvents = events.filter((e) => !e.vacation && e.isintake && dayjsDate.isSame(dayjs(e.start), "day"));
+    return _.groupBy(filteredEvents, "job.alt_transport");
+  }, [events, dayjsDate]);
 
   const isDayBlocked = useMemo(() => {
     if (!events) return [];
-    return events && events.filter((e) => dayjs(date).isSame(dayjs(e.start), "day") && e.block);
-  }, [events, date]);
+    return events.filter((e) => dayjsDate.isSame(dayjs(e.start), "day") && e.block);
+  }, [events, dayjsDate]);
 
-  const { t } = useTranslation();
-  const loadData = load[date.toISOString().substr(0, 10)];
+  const dateString = dayjsDate.format("YYYY-MM-DD");
+  const loadData = load[dateString];
 
-  const jobsOutPopup = () => (
-    <div onClick={(e) => e.stopPropagation()}>
-      <table>
-        <tbody>
-          {loadData && loadData.allJobsOut ? (
-            loadData.allJobsOut.map((j) => (
-              <tr key={j.id}>
-                <td style={{ padding: "2.5px" }}>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> (
-                  {j.status})
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <OwnerNameDisplay ownerObject={j} />
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                  }/${(
-                    j.labhrs.aggregate?.sum?.mod_lb_hrs +
-                    j.larhrs.aggregate?.sum?.mod_lb_hrs
-                  ).toFixed(1)} ${t("general.labels.hours")})`}
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <DateTimeFormatter>
-                    {j.scheduled_completion}
-                  </DateTimeFormatter>
-                </td>
+  const jobsOutPopup = useCallback(
+    () => (
+      <div onClick={(e) => e.stopPropagation()}>
+        <table>
+          <tbody>
+            {loadData && loadData.allJobsOut && loadData.allJobsOut.length > 0 ? (
+              loadData.allJobsOut.map((j) => (
+                <tr key={j.id}>
+                  <td style={{ padding: "2.5px" }}>
+                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <OwnerNameDisplay ownerObject={j} />
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    }/${(
+                      (j.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) + (j.larhrs?.aggregate?.sum?.mod_lb_hrs || 0)
+                    ).toFixed(1)} ${t("general.labels.hours")})`}
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
               </tr>
-            ))
-          ) : (
-            <tr>
-              <td style={{ padding: "2.5px" }}>
-                {t("appointments.labels.nocompletingjobs")}
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
+            )}
+          </tbody>
+        </table>
+      </div>
+    ),
+    [loadData, t]
   );
 
-  const jobsInPopup = () => (
-    <div onClick={(e) => e.stopPropagation()}>
-      <table>
-        <tbody>
-          {loadData && loadData.allJobsIn ? (
-            loadData.allJobsIn.map((j) => (
-              <tr key={j.id}>
-                <td style={{ padding: "2.5px" }}>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <OwnerNameDisplay ownerObject={j} />
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                  }/${(
-                    j.labhrs?.aggregate?.sum?.mod_lb_hrs +
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs
-                  ).toFixed(1)} ${t("general.labels.hours")})`}
-                </td>
-                <td style={{ padding: "2.5px" }}>
-                  <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
-                </td>
+  const jobsInPopup = useCallback(
+    () => (
+      <div onClick={(e) => e.stopPropagation()}>
+        <table>
+          <tbody>
+            {loadData && loadData.allJobsIn && loadData.allJobsIn.length > 0 ? (
+              loadData.allJobsIn.map((j) => (
+                <tr key={j.id}>
+                  <td style={{ padding: "2.5px" }}>
+                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <OwnerNameDisplay ownerObject={j} />
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    }/${(
+                      (j.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) + (j.larhrs?.aggregate?.sum?.mod_lb_hrs || 0)
+                    ).toFixed(1)} ${t("general.labels.hours")})`}
+                  </td>
+                  <td style={{ padding: "2.5px" }}>
+                    <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
               </tr>
-            ))
-          ) : (
-            <tr>
-              <td style={{ padding: "2.5px" }}>
-                {t("appointments.labels.noarrivingjobs")}
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
+            )}
+          </tbody>
+        </table>
+      </div>
+    ),
+    [loadData, t]
   );
 
-  const LoadComponent = loadData ? (
-    <div>
+  const LoadComponent = useMemo(() => {
+    if (!loadData) return null;
+    return (
+      <div>
         <Space align="center">
           <Popover
             placement={"bottom"}
@@ -141,12 +139,8 @@ export function ScheduleCalendarHeaderComponent({
             title={t("appointments.labels.arrivingjobs")}
           >
             <Icon component={MdFileDownload} style={{ color: "green" }} />
-            {(loadData.allHoursInBody || 0) &&
-              loadData.allHoursInBody.toFixed(1)}
-            /
-            {(loadData.allHoursInRefinish || 0) &&
-              loadData.allHoursInRefinish.toFixed(1)}
-            /{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
+            {(loadData.allHoursInBody || 0).toFixed(1)}/{(loadData.allHoursInRefinish || 0).toFixed(1)}/
+            {(loadData.allHoursIn || 0).toFixed(1)}
           </Popover>
           <Popover
             placement={"bottom"}
@@ -155,57 +149,31 @@ export function ScheduleCalendarHeaderComponent({
             title={t("appointments.labels.completingjobs")}
           >
             <Icon component={MdFileUpload} style={{ color: "red" }} />
-            {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
+            {(loadData.allHoursOut || 0).toFixed(1)}
           </Popover>
           <ScheduleCalendarHeaderGraph loadData={loadData} />
         </Space>
-   
-      <div>
-        <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
-          {Object.keys(ATSToday).map((key, idx) => (
-            <li key={idx}>{`${key === "null" || key === "undefined" ? "N/A" : key}: ${ATSToday[key].length}`}</li>
-          ))}
-        </ul>
+        <div>
+          <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
+            {Object.keys(ATSToday).map((key, idx) => (
+              <li key={idx}>{`${key === "null" || key === "undefined" ? "N/A" : key}: ${ATSToday[key].length}`}</li>
+            ))}
+          </ul>
+        </div>
       </div>
-    </div>
-  ) : null;
-
-  const isShopOpen = (date) => {
-    let day;
-    switch (dayjs(date).day()) {
-      case 0:
-        day = "sunday";
-        break;
-      case 1:
-        day = "monday";
-        break;
-      case 2:
-        day = "tuesday";
-        break;
-      case 3:
-        day = "wednesday";
-        break;
-      case 4:
-        day = "thursday";
-        break;
-      case 5:
-        day = "friday";
-        break;
-      case 6:
-        day = "saturday";
-        break;
-      default:
-        day = "sunday";
-        break;
-    }
+    );
+  }, [loadData, jobsInPopup, jobsOutPopup, t, ATSToday]);
 
+  const isShopOpen = useCallback(() => {
+    const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+    const day = days[dayjsDate.day()];
     return bodyshop.workingdays[day];
-  };
+  }, [bodyshop, dayjsDate]);
 
   return (
     <div className="imex-calendar-load">
       <ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
-        <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
+        <div style={{ color: isShopOpen() ? "" : "tomato" }}>
           {label}
           {InstanceRenderMgr({
             imex: calculating ? <LoadingSkeleton /> : LoadComponent,
@@ -216,6 +184,6 @@ export function ScheduleCalendarHeaderComponent({
       </ScheduleBlockDay>
     </div>
   );
-}
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarHeaderComponent);

client/src/components/schedule-calendar-wrapper/schedule-calendar-util.js

@@ -1,29 +1,28 @@
 import dayjs from "../../utils/day";
 
-export function getRange(dateParam, viewParam) {
-  let start, end;
-  let date = dateParam || new Date();
-  let view = viewParam || "week";
-  // if view is day: from dayjs(date).startOf('day') to dayjs(date).endOf('day');
-  if (view === "day") {
-    start = dayjs(date).startOf("day");
-    end = dayjs(date).endOf("day");
-  }
-  // if view is week: from dayjs(date).startOf('isoWeek') to dayjs(date).endOf('isoWeek');
-  else if (view === "week") {
-    start = dayjs(date).startOf("week");
-    end = dayjs(date).endOf("week");
-  }
-  //if view is month: from dayjs(date).startOf('month').subtract(7, 'day') to dayjs(date).endOf('month').add(7, 'day'); i do additional 7 days math because you can see adjacent weeks on month view (that is the way how i generate my recurrent events for the Big Calendar, but if you need only start-end of month - just remove that math);
-  else if (view === "month") {
-    start = dayjs(date).startOf("month").subtract(7, "day");
-    end = dayjs(date).endOf("month").add(7, "day");
-  }
-  // if view is agenda: from dayjs(date).startOf('day') to dayjs(date).endOf('day').add(1, 'month');
-  else if (view === "agenda") {
-    start = dayjs(date).startOf("day");
-    end = dayjs(date).endOf("day").add(1, "month");
-  }
+// Predefine range calculation functions for each view
+const viewRanges = {
+  day: (date) => ({
+    start: date.startOf("day"),
+    end: date.endOf("day")
+  }),
+  week: (date) => ({
+    start: date.startOf("week"),
+    end: date.endOf("week")
+  }),
+  month: (date) => ({
+    // Adjusting for adjacent weeks
+    start: date.startOf("month").subtract(7, "day"),
+    end: date.endOf("month").add(7, "day")
+  }),
+  agenda: (date) => ({
+    start: date.startOf("day"),
+    end: date.endOf("day").add(1, "month")
+  })
+};
 
-  return { start, end };
+export function getRange(dateParam = new Date(), viewParam = "week") {
+  const date = dayjs(dateParam);
+  const view = viewRanges[viewParam] ? viewParam : "week";
+  return viewRanges[view](date);
 }

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -1,6 +1,6 @@
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Calendar, dayjsLocalizer } from "react-big-calendar";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -19,9 +19,10 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   problemJobs: selectProblemJobs
 });
+
 const localizer = dayjsLocalizer(dayjs);
 
-export function ScheduleCalendarWrapperComponent({
+export const ScheduleCalendarWrapperComponent = React.memo(function ScheduleCalendarWrapperComponent({
   bodyshop,
   problemJobs,
   data,
@@ -31,23 +32,79 @@ export function ScheduleCalendarWrapperComponent({
   date,
   ...otherProps
 }) {
-  const search = queryString.parse(useLocation().search);
-  const history = useNavigate();
+  const location = useLocation();
+  const search = useMemo(() => queryString.parse(location.search), [location.search]);
+  const navigate = useNavigate();
   const { t } = useTranslation();
-  const handleEventPropStyles = (event, start, end, isSelected) => {
-    return {
-      ...(event.color && !((search.view || defaultView) === "agenda")
-        ? {
-            style: {
-              backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
-            }
-          }
-        : {}),
-      className: `${event.arrived ? "imex-event-arrived" : ""} ${event.block ? "imex-event-block" : ""}`
-    };
-  };
 
-  const selectedDate = new Date(date || dayjs(search.date) || Date.now());
+  const selectedDate = useMemo(() => {
+    return new Date(date || dayjs(search.date).toDate() || Date.now());
+  }, [date, search.date]);
+
+  const minTime = useMemo(() => {
+    return bodyshop.schedule_start_time ? new Date(bodyshop.schedule_start_time) : new Date("2020-01-01T06:00:00");
+  }, [bodyshop.schedule_start_time]);
+
+  const maxTime = useMemo(() => {
+    return bodyshop.schedule_end_time ? new Date(bodyshop.schedule_end_time) : new Date("2020-01-01T20:00:00");
+  }, [bodyshop.schedule_end_time]);
+
+  const handleEventPropStyles = useCallback(
+    (event, start, end, isSelected) => {
+      return {
+        ...(event.color && !((search.view || defaultView) === "agenda")
+          ? {
+              style: {
+                backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+              }
+            }
+          : {}),
+        className: `${event.arrived ? "imex-event-arrived" : ""} ${event.block ? "imex-event-block" : ""}`
+      };
+    },
+    [search.view, defaultView]
+  );
+
+  const eventComponent = useCallback(
+    (e) => <Event bodyshop={bodyshop} event={e.event} refetch={refetch} />,
+    [bodyshop, refetch]
+  );
+
+  const headerComponent = useCallback(
+    (p) => <HeaderComponent {...p} events={data} refetch={refetch} />,
+    [data, refetch]
+  );
+
+  const calendarComponents = useMemo(
+    () => ({
+      event: eventComponent,
+      header: headerComponent
+    }),
+    [eventComponent, headerComponent]
+  );
+
+  const onNavigate = useCallback(
+    (date, view, action) => {
+      const newSearch = { ...search, date: date.toISOString().substr(0, 10) };
+      navigate({ search: queryString.stringify(newSearch) });
+    },
+    [search, navigate]
+  );
+
+  const onView = useCallback(
+    (view) => {
+      const newSearch = { ...search, view };
+      navigate({ search: queryString.stringify(newSearch) });
+    },
+    [search, navigate]
+  );
+
+  const onRangeChange = useCallback(
+    (range) => {
+      if (setDateRangeCallback) setDateRangeCallback(range);
+    },
+    [setDateRangeCallback]
+  );
 
   return (
     <>
@@ -109,32 +166,20 @@ export function ScheduleCalendarWrapperComponent({
         events={data}
         defaultView={search.view || defaultView || "week"}
         date={selectedDate}
-        onNavigate={(date, view, action) => {
-          search.date = date.toISOString().substr(0, 10);
-          history({ search: queryString.stringify(search) });
-        }}
-        onRangeChange={(start, end) => {
-          if (setDateRangeCallback) setDateRangeCallback({ start, end });
-        }}
-        onView={(view) => {
-          search.view = view;
-          history({ search: queryString.stringify(search) });
-        }}
+        onNavigate={onNavigate}
+        onRangeChange={onRangeChange}
+        onView={onView}
         step={15}
-        // timeslots={1}
         showMultiDayTimes
         localizer={localizer}
-        min={bodyshop.schedule_start_time ? new Date(bodyshop.schedule_start_time) : new Date("2020-01-01T06:00:00")}
-        max={bodyshop.schedule_end_time ? new Date(bodyshop.schedule_end_time) : new Date("2020-01-01T20:00:00")}
+        min={minTime}
+        max={maxTime}
         eventPropGetter={handleEventPropStyles}
-        components={{
-          event: (e) => Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
-          header: (p) => <HeaderComponent {...p} events={data} refetch={refetch} />
-        }}
+        components={calendarComponents}
         {...otherProps}
       />
     </>
   );
-}
+});
 
 export default connect(mapStateToProps, null)(ScheduleCalendarWrapperComponent);

client/src/components/schedule-calendar/schedule-calendar.component.jsx

@@ -1,8 +1,8 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Col, Row, Select, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import { t } from "i18next";
-import React, { useMemo } from "react";
+import React, { Profiler, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import useLocalStorage from "../../utils/useLocalStorage";
 import ScheduleAtsSummary from "../schedule-ats-summary/schedule-ats-summary.component";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
@@ -18,19 +18,17 @@ import _ from "lodash";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarComponent);
 
-export function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
+const ScheduleCalendarComponent = React.memo(function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
+  const { t } = useTranslation();
+
   const [filter, setFilter] = useLocalStorage("filter_events", {
     intake: true,
     manual: true,
     employeevacation: true,
     ins_co_nm: null
   });
-  const [estimatorsFilter, setEstimatiorsFilter] = useLocalStorage("estimators", []);
+  const [estimatorsFilter, setEstimatorsFilter] = useLocalStorage("estimators", []);
 
   const estimators = useMemo(() => {
     return _.uniq([
@@ -48,7 +46,7 @@ export function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
         d.__typename === "appointments"
           ? estimatorsFilter.length === 0
             ? true
-            : !!estimatorsFilter.find((e) => e === `${d.job?.est_ct_fn || ""} ${d.job?.est_ct_ln || ""}`.trim())
+            : estimatorsFilter.includes(`${d.job?.est_ct_fn || ""} ${d.job?.est_ct_ln || ""}`.trim())
           : true;
 
       return (
@@ -62,7 +60,85 @@ export function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
     });
   }, [data, filter, estimatorsFilter]);
 
+  const estimatorsOptions = useMemo(() => {
+    return estimators.map((e) => ({
+      label: e,
+      value: e
+    }));
+  }, [estimators]);
+
+  const insCoNmOptions = useMemo(() => {
+    return bodyshop.md_ins_cos.map((i) => ({
+      label: i.name,
+      value: i.name
+    }));
+  }, [bodyshop.md_ins_cos]);
+
+  const handleEstimatorsFilterChange = useCallback(
+    (e) => {
+      setEstimatorsFilter(e);
+    },
+    [setEstimatorsFilter]
+  );
+
+  const handleEstimatorsFilterClear = useCallback(() => {
+    setEstimatorsFilter([]);
+  }, [setEstimatorsFilter]);
+
+  const handleInsCoNmFilterChange = useCallback(
+    (e) => {
+      setFilter((prevFilter) => ({ ...prevFilter, ins_co_nm: e }));
+    },
+    [setFilter]
+  );
+
+  const handleInsCoNmFilterClear = useCallback(() => {
+    setFilter((prevFilter) => ({ ...prevFilter, ins_co_nm: [] }));
+  }, [setFilter]);
+
+  const handleIntakeFilterChange = useCallback(
+    (e) => {
+      const checked = e.target.checked;
+      setFilter((prevFilter) => ({ ...prevFilter, intake: checked }));
+    },
+    [setFilter]
+  );
+
+  const handleManualFilterChange = useCallback(
+    (e) => {
+      const checked = e.target.checked;
+      setFilter((prevFilter) => ({ ...prevFilter, manual: checked }));
+    },
+    [setFilter]
+  );
+
+  const handleEmployeeVacationFilterChange = useCallback(
+    (e) => {
+      const checked = e.target.checked;
+      setFilter((prevFilter) => ({ ...prevFilter, employeevacation: checked }));
+    },
+    [setFilter]
+  );
+
+  const handleRefetch = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
   return (
+    // TODO Remove when done
+    // <Profiler
+    //   id="cal"
+    //   onRender={(id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+    //     console.dir({
+    //       id,
+    //       phase,
+    //       actualDuration,
+    //       baseDuration,
+    //       startTime,
+    //       commitTime
+    //     });
+    //   }}
+    // >
     <Row gutter={[16, 16]}>
       <ScheduleModal />
 
@@ -76,65 +152,35 @@ export function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
                 mode="multiple"
                 placeholder={t("schedule.labels.estimators")}
                 allowClear
-                onClear={() => setEstimatiorsFilter([])}
-                value={[...estimatorsFilter]}
-                onChange={(e) => {
-                  setEstimatiorsFilter(e);
-                }}
-                options={estimators.map((e) => ({
-                  label: e,
-                  value: e
-                }))}
+                onClear={handleEstimatorsFilterClear}
+                value={estimatorsFilter}
+                onChange={handleEstimatorsFilterChange}
+                options={estimatorsOptions}
               />
               <Select
                 style={{ minWidth: "15rem" }}
                 mode="multiple"
                 placeholder={t("schedule.labels.ins_co_nm_filter")}
                 allowClear
-                onClear={() => setFilter({ ...filter, ins_co_nm: [] })}
-                value={filter?.ins_co_nm ? filter.ins_co_nm : []}
-                onChange={(e) => {
-                  setFilter({ ...filter, ins_co_nm: e });
-                }}
-                options={bodyshop.md_ins_cos.map((i) => ({
-                  label: i.name,
-                  value: i.name
-                }))}
+                onClear={handleInsCoNmFilterClear}
+                value={filter.ins_co_nm || []}
+                onChange={handleInsCoNmFilterChange}
+                options={insCoNmOptions}
               />
-              <Checkbox
-                checked={filter?.intake}
-                onChange={(e) => {
-                  setFilter({ ...filter, intake: e.target.checked });
-                }}
-              >
+              <Checkbox checked={filter.intake} onChange={handleIntakeFilterChange}>
                 {t("schedule.labels.intake")}
               </Checkbox>
-              <Checkbox
-                checked={filter?.manual}
-                onChange={(e) => {
-                  setFilter({ ...filter, manual: e.target.checked });
-                }}
-              >
+              <Checkbox checked={filter.manual} onChange={handleManualFilterChange}>
                 {t("schedule.labels.manual")}
               </Checkbox>
-              <Checkbox
-                checked={filter?.employeevacation}
-                onChange={(e) => {
-                  setFilter({ ...filter, employeevacation: e.target.checked });
-                }}
-              >
+              <Checkbox checked={filter.employeevacation} onChange={handleEmployeeVacationFilterChange}>
                 {t("schedule.labels.employeevacation")}
               </Checkbox>
               <ScheduleVerifyIntegrity />
-              <Button
-                onClick={() => {
-                  refetch();
-                }}
-              >
+              <Button onClick={handleRefetch}>
                 <SyncOutlined />
               </Button>
               <ScheduleProductionList />
-
               <ScheduleManualEvent />
             </Space>
           }
@@ -147,5 +193,9 @@ export function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
         </Card>
       </Col>
     </Row>
+    // TODO Remove when done
+    // </Profiler>
   );
-}
+});
+
+export default connect(mapStateToProps)(ScheduleCalendarComponent);

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -15,56 +15,65 @@ import dayjs from "../../utils/day";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
 });
+
 const mapDispatchToProps = (dispatch) => ({
   calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate))
 });
 
-export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
-  const search = queryString.parse(useLocation().search);
+const ScheduleCalendarContainer = React.memo(function ScheduleCalendarContainer({ calculateScheduleLoad }) {
+  const location = useLocation();
+  const search = useMemo(() => queryString.parse(location.search), [location.search]);
 
   const { date, view } = search;
   const range = useMemo(() => getRange(date, view), [date, view]);
 
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_APPOINTMENTS, {
-    variables: {
+  const queryVariables = useMemo(
+    () => ({
       start: range.start.toDate(),
       end: range.end.toDate(),
       startd: range.start,
       endd: range.end
-    },
-    skip: !!!range.start || !!!range.end,
+    }),
+    [range]
+  );
+
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_APPOINTMENTS, {
+    variables: queryVariables,
+    skip: !range.start || !range.end,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
 
   useEffect(() => {
-    if (data && range.end) calculateScheduleLoad(range.end);
-  }, [data, range, calculateScheduleLoad]);
+    if (data && range.end) {
+      calculateScheduleLoad(range.end);
+    }
+  }, [data, range.end, calculateScheduleLoad]);
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
-  let normalizedData = [
-    ...data.appointments.map((e) => {
-      //Required because Hasura returns a string instead of a date object.
-      return Object.assign({}, e, { start: new Date(e.start) }, { end: new Date(e.end) });
-    }),
-    ...data.employee_vacation.map((e) => {
-      //Required because Hasura returns a string instead of a date object.
-      return {
+  const normalizedData = useMemo(() => {
+    if (!data) return [];
+    return [
+      ...data.appointments.map((e) => ({
         ...e,
-        title: `${
-          (e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
-        } ${e.employee.last_name || ""} OUT`,
+        start: new Date(e.start),
+        end: new Date(e.end)
+      })),
+      ...data.employee_vacation.map((e) => ({
+        ...e,
+        title: `${e.employee.first_name?.[0] || ""} ${e.employee.last_name || ""} OUT`,
         color: "red",
         start: dayjs(e.start).startOf("day").toDate(),
         end: dayjs(e.end).startOf("day").toDate(),
         allDay: true,
         vacation: true
-      };
-    })
-  ];
+      }))
+    ];
+  }, [data]);
 
-  return <ScheduleCalendarComponent refetch={refetch} data={data ? normalizedData : []} />;
-}
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return <ScheduleCalendarComponent refetch={refetch} data={normalizedData} />;
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarContainer);

client/src/components/schedule-day-view/schedule-day-view.component.jsx

@@ -2,9 +2,14 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 
-export default function ScheduleDayViewComponent({ data, day }) {
+const ScheduleDayViewComponent = React.memo(function ScheduleDayViewComponent({ data, day }) {
   const { t } = useTranslation();
-  if (data)
-    return <ScheduleCalendarWrapperComponent events={data} defaultView="day" view={"day"} views={["day"]} date={day} />;
-  else return <div>{t("appointments.labels.nodateselected")}</div>;
-}
+
+  if (data) {
+    return <ScheduleCalendarWrapperComponent events={data} defaultView="day" view="day" views={["day"]} date={day} />;
+  } else {
+    return <div>{t("appointments.labels.nodateselected")}</div>;
+  }
+});
+
+export default ScheduleDayViewComponent;

client/src/components/schedule-day-view/schedule-day-view.container.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import ScheduleDayViewComponent from "./schedule-day-view.component";
 import { useQuery } from "@apollo/client";
 import { QUERY_APPOINTMENT_BY_DATE } from "../../graphql/appointments.queries";
@@ -6,45 +6,59 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";
 
-export default function ScheduleDayViewContainer({ day }) {
+const ScheduleDayViewContainer = React.memo(function ScheduleDayViewContainer({ day }) {
+  const { t } = useTranslation();
+
+  // Memoize dayjs computations
+  const dayjsDay = useMemo(() => dayjs(day), [day]);
+
+  // Memoize query variables
+  const queryVariables = useMemo(
+    () => ({
+      start: dayjsDay.startOf("day").toISOString(),
+      end: dayjsDay.endOf("day").toISOString(),
+      startd: dayjsDay.startOf("day").format("YYYY-MM-DD"),
+      endd: dayjsDay.add(1, "day").format("YYYY-MM-DD")
+    }),
+    [dayjsDay]
+  );
+
+  // Use the useQuery hook
   const { loading, error, data } = useQuery(QUERY_APPOINTMENT_BY_DATE, {
-    variables: {
-      start: dayjs(day).startOf("day"),
-      end: dayjs(day).endOf("day"),
-      startd: dayjs(day).startOf("day").format("YYYY-MM-DD"),
-      endd: dayjs(day).add(1, "day").format("YYYY-MM-DD")
-    },
-    skip: !dayjs(day).isValid(),
+    variables: queryVariables,
+    skip: !dayjsDay.isValid(),
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
-  const { t } = useTranslation();
+
+  // Memoize normalizedData
+  const normalizedData = useMemo(() => {
+    if (!data) return [];
+
+    const appointments = data.appointments.map((e) => ({
+      ...e,
+      start: new Date(e.start),
+      end: new Date(e.end)
+    }));
+
+    const vacations = data.employee_vacation.map((e) => ({
+      ...e,
+      title: `${e.employee.first_name?.[0] || ""} ${e.employee.last_name || ""} OUT`,
+      color: "red",
+      start: dayjs(e.start).startOf("day").toDate(),
+      end: dayjs(e.end).startOf("day").toDate(),
+      vacation: true
+    }));
+
+    return [...appointments, ...vacations];
+  }, [data]);
+
+  // Handle conditional rendering
   if (!day) return <div>{t("appointments.labels.nodateselected")}</div>;
   if (loading) return <LoadingSkeleton paragraph={{ rows: 4 }} />;
   if (error) return <div>{error.message}</div>;
-  let normalizedData;
 
-  if (data) {
-    normalizedData = [
-      ...data.appointments.map((e) => {
-        //Required becuase Hasura returns a string instead of a date object.
-        return Object.assign({}, e, { start: new Date(e.start) }, { end: new Date(e.end) });
-      }),
-      ...data.employee_vacation.map((e) => {
-        //Required becuase Hasura returns a string instead of a date object.
-        return {
-          ...e,
-          title: `${
-            (e.employee.first_name && e.employee.first_name.substr(0, 1)) || ""
-          } ${e.employee.last_name || ""} OUT`,
-          color: "red",
-          start: dayjs(e.start).startOf("day").toDate(),
-          end: dayjs(e.end).startOf("day").toDate(),
-          vacation: true
-        };
-      })
-    ];
-  }
+  return <ScheduleDayViewComponent data={normalizedData} day={day} />;
+});
 
-  return <ScheduleDayViewComponent data={data ? normalizedData : []} day={day} />;
-}
+export default ScheduleDayViewContainer;

client/src/components/schedule-existing-appointments-list/schedule-existing-appointments-list.component.jsx

@@ -1,38 +1,43 @@
-import React from "react";
+import React, { useMemo } from "react";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import AlertComponent from "../alert/alert.component";
 import { Timeline } from "antd";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 
-export default function ScheduleExistingAppointmentsList({ existingAppointments }) {
+const ScheduleExistingAppointmentsList = React.memo(function ScheduleExistingAppointmentsList({
+  existingAppointments
+}) {
   const { t } = useTranslation();
-  if (existingAppointments.loading) return <LoadingSpinner />;
-  if (existingAppointments.error) return <AlertComponent message={existingAppointments.error.message} type="error" />;
+  const { loading, error, data } = existingAppointments;
+
+  const items = useMemo(() => {
+    if (!data) return [];
+    return data.appointments.map((item) => ({
+      key: item.id,
+      color: item.canceled ? "red" : item.arrived ? "green" : "blue",
+      children: (
+        <>
+          {item.canceled
+            ? t("appointments.labels.cancelledappointment")
+            : item.arrived
+              ? t("appointments.labels.arrivedon")
+              : t("appointments.labels.scheduledfor")}
+          <DateTimeFormatter>{item.start}</DateTimeFormatter>
+        </>
+      )
+    }));
+  }, [data, t]);
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <div>
       {t("appointments.labels.priorappointments")}
-      <Timeline
-        items={
-          existingAppointments.data
-            ? existingAppointments.data.appointments.map((item) => ({
-                key: item.id,
-                color: item.canceled ? "red" : item.arrived ? "green" : "blue",
-                children: (
-                  <>
-                    {item.canceled
-                      ? t("appointments.labels.cancelledappointment")
-                      : item.arrived
-                        ? t("appointments.labels.arrivedon")
-                        : t("appointments.labels.scheduledfor")}
-                    <DateTimeFormatter>{item.start}</DateTimeFormatter>
-                  </>
-                )
-              }))
-            : []
-        }
-      />
+      <Timeline items={items} />
     </div>
   );
-}
+});
+
+export default ScheduleExistingAppointmentsList;

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

@@ -1,7 +1,7 @@
 import { Button, Col, Form, Input, Row, Select, Space, Switch, Typography } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -19,12 +19,12 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
+
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
   calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate))
 });
 
-export function ScheduleJobModalComponent({
+const ScheduleJobModalComponent = React.memo(function ScheduleJobModalComponent({
   bodyshop,
   form,
   existingAppointments,
@@ -36,7 +36,7 @@ export function ScheduleJobModalComponent({
   const [loading, setLoading] = useState(false);
   const [smartOptions, setSmartOptions] = useState([]);
 
-  const handleSmartScheduling = async () => {
+  const handleSmartScheduling = useCallback(async () => {
     setLoading(true);
     try {
       const response = await axios.post("/scheduling/job", {
@@ -48,21 +48,66 @@ export function ScheduleJobModalComponent({
     } finally {
       setLoading(false);
     }
-  };
+  }, [jobId]);
 
-  const handleDateBlur = () => {
+  const handleDateBlur = useCallback(() => {
     const values = form.getFieldsValue();
 
     if (lbrHrsData) {
       const totalHours =
-        lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs + lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs;
+        (lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs || 0) +
+        (lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs || 0);
 
       if (values.start && !values.scheduled_completion)
         form.setFieldsValue({
           scheduled_completion: dayjs(values.start).businessDaysAdd(totalHours / bodyshop.target_touchtime, "day")
         });
     }
-  };
+  }, [form, lbrHrsData, bodyshop.target_touchtime]);
+
+  const colorOptions = useMemo(() => {
+    return (
+      bodyshop.appt_colors &&
+      bodyshop.appt_colors.map((color) => (
+        <Select.Option style={{ color: color.color.hex }} key={color.color.hex} value={color.color.hex}>
+          {color.label}
+        </Select.Option>
+      ))
+    );
+  }, [bodyshop.appt_colors]);
+
+  const altTransportOptions = useMemo(() => {
+    return (
+      bodyshop.appt_alt_transport &&
+      bodyshop.appt_alt_transport.map((alt) => (
+        <Select.Option key={alt} value={alt}>
+          {alt}
+        </Select.Option>
+      ))
+    );
+  }, [bodyshop.appt_alt_transport]);
+
+  const smartOptionsButtons = useMemo(() => {
+    return smartOptions.map((d, idx) => (
+      <Button
+        className="imex-flex-row__margin"
+        key={idx}
+        onClick={() => {
+          const ssDate = dayjs(d);
+          if (ssDate.isBefore(dayjs())) {
+            form.setFieldsValue({ start: dayjs() });
+          } else {
+            form.setFieldsValue({
+              start: dayjs(d).add(8, "hour")
+            });
+          }
+          handleDateBlur();
+        }}
+      >
+        <DateFormatter includeDay>{d}</DateFormatter>
+      </Button>
+    ));
+  }, [smartOptions, form, handleDateBlur]);
 
   return (
     <Row gutter={[16, 16]}>
@@ -80,7 +125,6 @@ export function ScheduleJobModalComponent({
             rules={[
               {
                 required: true
-                //message: t("general.validation.required"),
               }
             ]}
           >
@@ -92,7 +136,6 @@ export function ScheduleJobModalComponent({
             rules={[
               {
                 required: true
-                //message: t("general.validation.required"),
               }
             ]}
           >
@@ -107,25 +150,7 @@ export function ScheduleJobModalComponent({
                 <Button onClick={handleSmartScheduling} loading={loading}>
                   {t("appointments.actions.calculate")}
                 </Button>
-                {smartOptions.map((d, idx) => (
-                  <Button
-                    className="imex-flex-row__margin"
-                    key={idx}
-                    onClick={() => {
-                      const ssDate = dayjs(d);
-                      if (ssDate.isBefore(dayjs())) {
-                        form.setFieldsValue({ start: dayjs() });
-                      } else {
-                        form.setFieldsValue({
-                          start: dayjs(d).add(8, "hour")
-                        });
-                      }
-                      handleDateBlur();
-                    }}
-                  >
-                    <DateFormatter includeDay>{d}</DateFormatter>
-                  </Button>
-                ))}
+                {smartOptionsButtons}
               </Space>
             </>
           ),
@@ -144,20 +169,10 @@ export function ScheduleJobModalComponent({
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item name="color" label={t("appointments.fields.color")}>
-            <Select allowClear>
-              {bodyshop.appt_colors &&
-                bodyshop.appt_colors.map((color) => (
-                  <Select.Option style={{ color: color.color.hex }} key={color.color.hex} value={color.color.hex}>
-                    {color.label}
-                  </Select.Option>
-                ))}
-            </Select>
+            <Select allowClear>{colorOptions}</Select>
           </Form.Item>
           <Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}>
-            <Select allowClear>
-              {bodyshop.appt_alt_transport &&
-                bodyshop.appt_alt_transport.map((alt) => <Select.Option key={alt}>{alt}</Select.Option>)}
-            </Select>
+            <Select allowClear>{altTransportOptions}</Select>
           </Form.Item>
           <Form.Item name={"note"} label={t("appointments.fields.note")}>
             <Input />
@@ -183,6 +198,6 @@ export function ScheduleJobModalComponent({
       </Col>
     </Row>
   );
-}
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleJobModalComponent);

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -1,7 +1,7 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { Form, Modal, notification } from "antd";
 import dayjs from "../../utils/day";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -27,13 +27,21 @@ const mapStateToProps = createStructuredSelector({
   scheduleModal: selectSchedule,
   currentUser: selectCurrentUser
 });
+
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
-export function ScheduleJobModalContainer({
+const ScheduleJobModalContainer = React.memo(function ScheduleJobModalContainer({
   scheduleModal,
   bodyshop,
   toggleModalVisible,
@@ -43,168 +51,186 @@ export function ScheduleJobModalContainer({
 }) {
   const { open, context, actions } = scheduleModal;
   const { jobId, job, previousEvent } = context;
-
   const { refetch } = actions;
   const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
 
   const { data: lbrHrsData } = useQuery(QUERY_LBR_HRS_BY_PK, {
-    variables: { id: job && job.id },
-    skip: !job || !job.id,
+    variables: { id: job?.id },
+    skip: !job?.id,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
 
-  const [loading, setLoading] = useState(false);
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
   const [updateJobStatus] = useMutation(UPDATE_JOBS);
 
-  useEffect(() => {
-    if (job) form.resetFields();
-  }, [job, form]);
-
-  const { t } = useTranslation();
-
   const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
     variables: { jobid: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !open || !!!jobId
+    skip: !open || !jobId
   });
 
   useEffect(() => {
-    if (
-      existingAppointments.data &&
-      existingAppointments.data.appointments.length > 0 &&
-      !existingAppointments.data.appointments[0].canceled
-    ) {
-      form.setFieldsValue({
-        color: existingAppointments.data.appointments[0].color,
+    if (job) form.resetFields();
+  }, [job, form]);
 
-        note: existingAppointments.data.appointments[0].note
+  useEffect(() => {
+    const appointments = existingAppointments.data?.appointments;
+    if (appointments?.length && !appointments[0].canceled) {
+      form.setFieldsValue({
+        color: appointments[0].color,
+        note: appointments[0].note
       });
     }
   }, [existingAppointments.data, form]);
 
-  const handleFinish = async (values) => {
-    logImEXEvent("schedule_new_appointment");
+  const handleFinish = useCallback(
+    async (values) => {
+      logImEXEvent("schedule_new_appointment");
+      setLoading(true);
 
-    setLoading(true);
-    if (!!previousEvent) {
-      const cancelAppt = await cancelAppointment({
-        variables: { appid: previousEvent }
-      });
-
-      if (!!cancelAppt.errors) {
-        notification["error"]({
-          message: t("appointments.errors.canceling", {
-            message: JSON.stringify(cancelAppt.errors)
-          })
+      if (previousEvent) {
+        const cancelAppt = await cancelAppointment({
+          variables: { appid: previousEvent }
         });
-        return;
-      }
 
-      notification["success"]({
-        message: t("appointments.successes.canceled")
-      });
-    }
-
-    if (existingAppointments.data.appointments.length > 0) {
-      await Promise.all(
-        existingAppointments.data.appointments.map((app) => {
-          return cancelAppointment({
-            variables: { appid: app.id }
+        if (cancelAppt.errors) {
+          notification.error({
+            message: t("appointments.errors.canceling", {
+              message: JSON.stringify(cancelAppt.errors)
+            })
           });
-        })
-      );
-    }
+          return;
+        }
 
-    const appt = await insertAppointment({
-      variables: {
-        app: {
-          jobid: jobId,
-          bodyshopid: bodyshop.id,
-          start: dayjs(values.start),
-          end: dayjs(values.start).add(bodyshop.appt_length || 60, "minute"),
-          color: values.color,
-          note: values.note,
-          created_by: currentUser.email
-        },
-        jobId: jobId,
-        altTransport: values.alt_transport
+        notification.success({
+          message: t("appointments.successes.canceled")
+        });
       }
-    });
 
-    if (!appt.errors) {
-      insertAuditTrail({
-        jobid: job.id,
-        operation: AuditTrailMapping.appointmentinsert(DateTimeFormat(values.start)),
-        type: "appointmentinsert"
-      });
-    }
+      const existingApps = existingAppointments.data?.appointments || [];
+      if (existingApps.length > 0) {
+        await Promise.all(
+          existingApps.map((app) =>
+            cancelAppointment({
+              variables: { appid: app.id }
+            })
+          )
+        );
+      }
 
-    if (!!appt.errors) {
-      notification["error"]({
-        message: t("appointments.errors.saving", {
-          message: JSON.stringify(appt.errors)
-        })
-      });
-      return;
-    }
-    notification["success"]({
-      message: t("appointments.successes.created")
-    });
-    if (jobId) {
-      const jobUpdate = await updateJobStatus({
+      const appt = await insertAppointment({
         variables: {
-          jobIds: [jobId],
-          fields: {
-            status: bodyshop.md_ro_statuses.default_scheduled,
-            date_scheduled: new Date(),
-            scheduled_in: values.start,
-            scheduled_completion: values.scheduled_completion,
-            lost_sale_reason: null,
-            date_lost_sale: null
-          }
+          app: {
+            jobid: jobId,
+            bodyshopid: bodyshop.id,
+            start: dayjs(values.start),
+            end: dayjs(values.start).add(bodyshop.appt_length || 60, "minute"),
+            color: values.color,
+            note: values.note,
+            created_by: currentUser.email
+          },
+          jobId: jobId,
+          altTransport: values.alt_transport
         }
       });
 
-      if (!!jobUpdate.errors) {
-        notification["error"]({
+      if (!appt.errors) {
+        insertAuditTrail({
+          jobid: job.id,
+          operation: AuditTrailMapping.appointmentinsert(DateTimeFormat(values.start)),
+          type: "appointmentinsert"
+        });
+      } else {
+        notification.error({
           message: t("appointments.errors.saving", {
-            message: JSON.stringify(jobUpdate.errors)
+            message: JSON.stringify(appt.errors)
           })
         });
         return;
       }
-    }
-    setLoading(false);
-    toggleModalVisible();
-    if (values.notifyCustomer) {
-      setEmailOptions({
-        jobid: jobId,
-        messageOptions: {
-          to: [values.email],
-          replyTo: bodyshop.email,
-          subject: TemplateList("appointment").appointment_confirmation.subject
-        },
-        template: {
-          name: TemplateList("appointment").appointment_confirmation.key,
-          variables: {
-            id: appt.data.insert_appointments.returning[0].id
-          }
-        }
+
+      notification.success({
+        message: t("appointments.successes.created")
       });
-    }
-    if (refetch) refetch();
-  };
+
+      if (jobId) {
+        const jobUpdate = await updateJobStatus({
+          variables: {
+            jobIds: [jobId],
+            fields: {
+              status: bodyshop.md_ro_statuses.default_scheduled,
+              date_scheduled: new Date(),
+              scheduled_in: values.start,
+              scheduled_completion: values.scheduled_completion,
+              lost_sale_reason: null,
+              date_lost_sale: null
+            }
+          }
+        });
+
+        if (jobUpdate.errors) {
+          notification.error({
+            message: t("appointments.errors.saving", {
+              message: JSON.stringify(jobUpdate.errors)
+            })
+          });
+          return;
+        }
+      }
+
+      if (values.notifyCustomer) {
+        setEmailOptions({
+          jobid: jobId,
+          messageOptions: {
+            to: [values.email],
+            replyTo: bodyshop.email,
+            subject: TemplateList("appointment").appointment_confirmation.subject
+          },
+          template: {
+            name: TemplateList("appointment").appointment_confirmation.key,
+            variables: {
+              id: appt.data.insert_appointments.returning[0].id
+            }
+          }
+        });
+      }
+
+      if (refetch) refetch();
+      toggleModalVisible();
+      setLoading(false);
+    },
+    [
+      t,
+      previousEvent,
+      cancelAppointment,
+      existingAppointments.data,
+      insertAppointment,
+      jobId,
+      bodyshop.id,
+      bodyshop.appt_length,
+      currentUser.email,
+      insertAuditTrail,
+      job,
+      updateJobStatus,
+      bodyshop.md_ro_statuses.default_scheduled,
+      setEmailOptions,
+      refetch,
+      toggleModalVisible,
+      bodyshop.email
+    ]
+  );
 
   return (
     <Modal
       open={open}
-      onCancel={() => toggleModalVisible()}
+      onCancel={toggleModalVisible}
       onOk={() => form.submit()}
-      width={"90%"}
+      width="90%"
       maskClosable={false}
       destroyOnClose
       okButtonProps={{
@@ -217,10 +243,9 @@ export function ScheduleJobModalContainer({
         layout="vertical"
         onFinish={handleFinish}
         initialValues={{
-          notifyCustomer: !!(job && job.ownr_ea),
-          email: (job && job.ownr_ea) || "",
+          notifyCustomer: !!job?.ownr_ea,
+          email: job?.ownr_ea || "",
           start: null,
-          // smartDates: [],
           scheduled_completion: null,
           color: context.color,
           alt_transport: context.alt_transport,
@@ -236,6 +261,6 @@ export function ScheduleJobModalContainer({
       </Form>
     </Modal>
   );
-}
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(ScheduleJobModalContainer);

client/src/components/schedule-manual-event/schedule-manual-event.component.jsx

@@ -1,7 +1,7 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, Popover, Select, Space } from "antd";
 import dayjs from "../../utils/day";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,142 +13,143 @@ import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleManualEvent);
 
-export function ScheduleManualEvent({ bodyshop, event }) {
+const ScheduleManualEvent = React.memo(function ScheduleManualEvent({ bodyshop, event }) {
   const { t } = useTranslation();
-  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
-  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT, {
+    refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"]
+  });
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT, {
+    refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"]
+  });
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [visibility, setVisibility] = useState(false);
-  //   const [callQuery, { loading: entryLoading, data: entryData }] = useLazyQuery(
-  //     QUERY_SCOREBOARD_ENTRY
-  //   );
+
+  const handleFinish = useCallback(
+    async (values) => {
+      logImEXEvent("schedule_manual_event");
+      setLoading(true);
+      try {
+        if (event && event.id) {
+          await updateAppointment({
+            variables: { appid: event.id, app: values }
+          });
+        } else {
+          await insertAppointment({
+            variables: {
+              apt: {
+                ...values,
+                isintake: false,
+                bodyshopid: bodyshop.id
+              }
+            }
+          });
+        }
+        form.resetFields();
+        setVisibility(false);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [event, updateAppointment, insertAppointment, bodyshop.id, form]
+  );
+
+  const handleClick = useCallback(() => {
+    setVisibility(true);
+  }, []);
 
   useEffect(() => {
     if (visibility && event) {
       form.setFieldsValue(event);
+    } else if (!visibility) {
+      form.resetFields();
     }
   }, [visibility, form, event]);
 
-  const handleFinish = async (values) => {
-    logImEXEvent("schedule_manual_event");
-
-    setLoading(true);
-    try {
-      if (event && event.id) {
-        updateAppointment({
-          variables: { appid: event.id, app: values },
-          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"]
-        });
-      } else {
-        insertAppointment({
-          variables: {
-            apt: { ...values, isintake: false, bodyshopid: bodyshop.id }
-          },
-          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"]
-        });
-      }
-      form.resetFields();
-      setVisibility(false);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const colorOptions = useMemo(() => {
+    return bodyshop.appt_colors.map((col, idx) => (
+      <Select.Option key={idx} value={col.color.hex}>
+        {col.label}
+      </Select.Option>
+    ));
+  }, [bodyshop.appt_colors]);
 
   const overlay = (
     <Card>
-      <div>
-        <Form form={form} layout="vertical" onFinish={handleFinish}>
-          <Form.Item
-            label={t("appointments.fields.title")}
-            name="title"
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("appointments.fields.note")} name="note">
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("appointments.fields.start")}
-            name="start"
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <FormDateTimePickerComponent />
-          </Form.Item>
-          <Form.Item
-            label={t("appointments.fields.end")}
-            name="end"
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              },
-              ({ getFieldValue }) => ({
-                async validator(rule, value) {
-                  if (value) {
-                    const { start } = form.getFieldsValue();
-                    if (dayjs(start).isAfter(dayjs(value))) {
-                      return Promise.reject(t("employees.labels.endmustbeafterstart"));
-                    } else {
-                      return Promise.resolve();
-                    }
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        <Form.Item
+          label={t("appointments.fields.title")}
+          name="title"
+          rules={[
+            {
+              required: true
+            }
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("appointments.fields.note")} name="note">
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("appointments.fields.start")}
+          name="start"
+          rules={[
+            {
+              required: true
+            }
+          ]}
+        >
+          <FormDateTimePickerComponent />
+        </Form.Item>
+        <Form.Item
+          label={t("appointments.fields.end")}
+          name="end"
+          rules={[
+            {
+              required: true
+            },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (value) {
+                  const start = form.getFieldValue("start");
+                  if (dayjs(start).isAfter(dayjs(value))) {
+                    return Promise.reject(t("employees.labels.endmustbeafterstart"));
                   } else {
                     return Promise.resolve();
                   }
+                } else {
+                  return Promise.resolve();
                 }
-              })
-            ]}
-          >
-            <FormDateTimePickerComponent />
-          </Form.Item>
-          <Form.Item label={t("appointments.fields.color")} name="color">
-            <Select>
-              {bodyshop.appt_colors.map((col, idx) => (
-                <Select.Option key={idx} value={col.color.hex}>
-                  {col.label}
-                </Select.Option>
-              ))}
-            </Select>
-          </Form.Item>
-
-          <Space wrap>
-            <Button type="primary" htmlType="submit">
-              {t("general.actions.save")}
-            </Button>
-            <Button onClick={() => setVisibility(false)}>{t("general.actions.cancel")}</Button>
-          </Space>
-        </Form>
-      </div>
+              }
+            })
+          ]}
+        >
+          <FormDateTimePickerComponent />
+        </Form.Item>
+        <Form.Item label={t("appointments.fields.color")} name="color">
+          <Select>{colorOptions}</Select>
+        </Form.Item>
+        <Space wrap>
+          <Button type="primary" htmlType="submit" loading={loading}>
+            {t("general.actions.save")}
+          </Button>
+          <Button onClick={() => setVisibility(false)}>{t("general.actions.cancel")}</Button>
+        </Space>
+      </Form>
     </Card>
   );
 
-  const handleClick = (e) => {
-    setVisibility(true);
-  };
-
   return (
     <Popover content={overlay} open={visibility}>
-      <Button loading={loading} onClick={handleClick}>
+      <Button onClick={handleClick}>
         {event ? t("appointments.actions.reschedule") : t("appointments.labels.manualevent")}
       </Button>
     </Popover>
   );
-}
+});
+
+export default connect(mapStateToProps)(ScheduleManualEvent);

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

@@ -1,6 +1,6 @@
 import { DownOutlined } from "@ant-design/icons";
 import { Button, Card, Popover } from "antd";
-import React from "react";
+import React, { useCallback } from "react";
 import { useLazyQuery } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -11,52 +11,52 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import "./schedule-production-list.styles.scss";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
-export default function ScheduleProductionList() {
+const ScheduleProductionList = React.memo(function ScheduleProductionList() {
   const { t } = useTranslation();
   const [callQuery, { loading, error, data }] = useLazyQuery(QUERY_JOBS_IN_PRODUCTION);
 
-  const content = () => {
+  const content = useCallback(() => {
     return (
       <Card>
         <div onClick={(e) => e.stopPropagation()} className="jobs-in-production-table">
-          {loading ? <LoadingSkeleton /> : null}
-          {error ? <AlertComponent message={error.message} type="error" /> : null}
-          {data ? (
+          {loading && <LoadingSkeleton />}
+          {error && <AlertComponent message={error.message} type="error" />}
+          {data && data.jobs && (
             <table>
               <tbody>
-                {data && data.jobs
-                  ? data.jobs.map((j) => (
-                      <tr key={j.id}>
-                        <td>
-                          <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                        </td>
-                        <td>
-                          <OwnerNameDisplay ownerObject={j} />
-                        </td>
-                        <td>{`${j.v_model_yr || ""} ${j.v_make_desc || ""} ${j.v_model_desc || ""}`}</td>
-                        <td>{`${j.labhrs.aggregate.sum.mod_lb_hrs || "0"} / ${
-                          j.larhrs.aggregate.sum.mod_lb_hrs || "0"
-                        }`}</td>
-                        <td>
-                          <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
-                        </td>
-                      </tr>
-                    ))
-                  : null}
+                {data.jobs.map((j) => (
+                  <tr key={j.id}>
+                    <td>
+                      <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                    </td>
+                    <td>
+                      <OwnerNameDisplay ownerObject={j} />
+                    </td>
+                    <td>{`${j.v_model_yr || ""} ${j.v_make_desc || ""} ${j.v_model_desc || ""}`}</td>
+                    <td>{`${j.labhrs.aggregate.sum.mod_lb_hrs || "0"} / ${
+                      j.larhrs.aggregate.sum.mod_lb_hrs || "0"
+                    }`}</td>
+                    <td>
+                      <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                    </td>
+                  </tr>
+                ))}
               </tbody>
             </table>
-          ) : null}
+          )}
         </div>
       </Card>
     );
-  };
+  }, [loading, error, data]);
 
   return (
     <Popover content={content} trigger="click" placement="bottomRight">
-      <Button onClick={() => callQuery()}>
+      <Button onClick={callQuery}>
         {t("appointments.labels.inproduction")}
         <DownOutlined />
       </Button>
     </Popover>
   );
-}
+});
+
+export default ScheduleProductionList;

client/src/components/schedule-verify-integrity/schedule-verify-integrity.component.jsx

@@ -1,7 +1,7 @@
 import { useApolloClient } from "@apollo/client";
 import { Button } from "antd";
 import dayjs from "../../utils/day";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_SCHEDULE_LOAD_DATA } from "../../graphql/appointments.queries";
@@ -10,49 +10,46 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(ScheduleVerifyIntegrity);
 
-export function ScheduleVerifyIntegrity({ currentUser }) {
+const ScheduleVerifyIntegrity = React.memo(function ScheduleVerifyIntegrity({ currentUser }) {
   const [loading, setLoading] = useState(false);
-
   const client = useApolloClient();
-  const handleVerify = async () => {
+
+  const handleVerify = useCallback(async () => {
     setLoading(true);
-    const {
-      data: { arrJobs, compJobs, prodJobs }
-    } = await client.query({
-      query: QUERY_SCHEDULE_LOAD_DATA,
-      variables: { start: dayjs(), end: dayjs().add(180, "day") }
-    });
+    try {
+      const {
+        data: { arrJobs, compJobs, prodJobs }
+      } = await client.query({
+        query: QUERY_SCHEDULE_LOAD_DATA,
+        variables: { start: dayjs(), end: dayjs().add(180, "day") }
+      });
 
-    //check that the leaving jobs are either in the arriving list, or in production.
-    const issues = [];
+      // Check that the completing jobs are either in production or arriving within the next 180 days.
+      const issues = compJobs.filter((j) => {
+        const inProdJobs = prodJobs.some((p) => p.id === j.id);
+        const inArrJobs = arrJobs.some((p) => p.id === j.id);
+        return !(inProdJobs || inArrJobs);
+      });
 
-    compJobs.forEach((j) => {
-      const inProdJobs = prodJobs.find((p) => p.id === j.id);
-      const inArrJobs = arrJobs.find((p) => p.id === j.id);
+      console.log("The following completing jobs are not in production or arriving within the next 180 days:", issues);
+    } catch (error) {
+      console.error("Error verifying schedule integrity:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
 
-      if (!(inProdJobs || inArrJobs)) {
-        // NOT FOUND!
-        issues.push(j);
-      }
-    });
-    console.log(
-      "The following completing jobs are not in production, or are arriving within the next 180 days. ",
-      issues
-    );
+  // TODO: A Global helper with developer emails
+  if (currentUser.email !== "patrick@imex.prod") {
+    return null;
+  }
 
-    setLoading(false);
-  };
+  return (
+    <Button loading={loading} onClick={handleVerify}>
+      Developer Use Only - Verify Schedule Integrity
+    </Button>
+  );
+});
 
-  if (currentUser.email === "patrick@imex.prod")
-    return (
-      <Button loading={loading} onClick={handleVerify}>
-        Developer Use Only - Verify Schedule Integrity
-      </Button>
-    );
-  else return null;
-}
+export default connect(mapStateToProps)(ScheduleVerifyIntegrity);

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

@@ -7,13 +7,13 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DatePickerRanges from "../../utils/DatePickerRanges";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapper, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-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 InstanceRenderManager from "../../utils/instanceRenderMgr";
-import FeatureWrapper, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 // TODO: Client Update, this might break
 const timeZonesList = Intl.supportedValuesOf("timeZone");
 const mapStateToProps = createStructuredSelector({
@@ -28,10 +28,10 @@ export function ShopInfoGeneral({ form, bodyshop }) {
   const { t } = useTranslation();
 
   const {
-    treatments: { ClosingPeriod }
+    treatments: { ClosingPeriod, ADPPayroll }
   } = useSplitTreatments({
     attributes: {},
-    names: ["ClosingPeriod"],
+    names: ["ClosingPeriod", "ADPPayroll"],
     splitKey: bodyshop && bodyshop.imexshopid
   });
 
@@ -98,7 +98,6 @@ export function ShopInfoGeneral({ form, bodyshop }) {
         <Form.Item label={t("bodyshop.fields.email")} name="email">
           <Input />
         </Form.Item>
-
         <Form.Item
           label={t("bodyshop.fields.phone")}
           name="phone"
@@ -356,14 +355,22 @@ export function ShopInfoGeneral({ form, bodyshop }) {
             <Select mode="tags" />
           </Form.Item>
           {ClosingPeriod.treatment === "on" && (
-            <>
-              <Form.Item
-                name={["accountingconfig", "ClosingPeriod"]}
-                label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
-              >
-                <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
-              </Form.Item>
-            </>
+            <Form.Item
+              name={["accountingconfig", "ClosingPeriod"]}
+              label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
+            >
+              <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
+            </Form.Item>
+          )}
+          {ADPPayroll.treatment === "on" && (
+            <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
+              <Input />
+            </Form.Item>
+          )}
+          {ADPPayroll.treatment === "on" && (
+            <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
+              <Input />
+            </Form.Item>
           )}
         </LayoutFormRow>
       </FeatureWrapper>

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/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.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 FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-import DateTimePicker 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,
@@ -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 (
@@ -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

@@ -1,13 +1,14 @@
 import { AlertOutlined } from "@ant-design/icons";
-import { Alert, Button, Col, Row, Space } from "antd";
+import { Alert, Button, Col, notification, Row, Space } from "antd";
 import i18n from "i18next";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectUpdateAvailable } from "../../redux/application/application.selectors";
 import { useRegisterSW } from "virtual:pwa-register/react";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import useCountDown from "../../utils/countdownHook";
 
 const mapStateToProps = createStructuredSelector({
   updateAvailable: selectUpdateAvailable
@@ -19,6 +20,15 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function UpdateAlert({ updateAvailable }) {
   const { t } = useTranslation();
+  const [timerStarted, setTimerStarted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [
+    timeLeft,
+    {
+      start //pause, resume, reset
+    }
+  ] = useCountDown(180000, 1000);
+
   const {
     offlineReady: [offlineReady],
     needRefresh: [needRefresh],
@@ -31,7 +41,7 @@ export function UpdateAlert({ updateAvailable }) {
           () => {
             r.update();
           },
-          10 * 60 * 1000
+          30 * 60 * 1000
         );
       }
     },
@@ -40,11 +50,43 @@ export function UpdateAlert({ updateAvailable }) {
     }
   });
 
+  const ReloadNewVersion = useCallback(() => {
+    setLoading(true);
+    updateServiceWorker(true);
+    setTimeout(() => {
+      window.location.reload(true);
+    }, 5000);
+  }, [updateServiceWorker]);
+
   useEffect(() => {
-    if (import.meta.env.DEV) {
-      console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${offlineReady}`);
+    if (needRefresh) {
+      start();
+      setTimerStarted(true);
     }
-  }, [needRefresh, offlineReady]);
+  }, [start, needRefresh, offlineReady]);
+
+  useEffect(() => {
+    if (needRefresh && timerStarted && timeLeft < 60000) {
+      notification.open({
+        type: "warning",
+        closable: false,
+        duration: 65000,
+        key: "autoupdate",
+        message: t("general.actions.autoupdate", {
+          time: (timeLeft / 1000).toFixed(0),
+          app: InstanceRenderManager({
+            imex: "$t(titles.imexonline)",
+            rome: "$t(titles.romeonline)",
+            promanager: "$t(titles.promanager)"
+          })
+        }),
+        placement: "bottomRight"
+      });
+    }
+    if (needRefresh && timerStarted && timeLeft <= 0) {
+      ReloadNewVersion();
+    }
+  }, [timeLeft, t, needRefresh, ReloadNewVersion, timerStarted]);
 
   if (!needRefresh) return null;
 
@@ -75,9 +117,10 @@ export function UpdateAlert({ updateAvailable }) {
               <Button onClick={() => window.open("https://imex-online.noticeable.news/", "_blank")}>
                 {i18n.t("general.actions.viewreleasenotes")}
               </Button>
-              <Button type="primary" onClick={() => updateServiceWorker(true)}>
-                {i18n.t("general.actions.refresh")}
+              <Button loading={loading} type="primary" onClick={() => ReloadNewVersion()}>
+                {i18n.t("general.actions.refresh")} {`(${(timeLeft / 1000).toFixed(0)} s)`}
               </Button>
+              <Button onClick={() => start(300000)}>{i18n.t("general.actions.delay")}</Button>
             </Space>
           </Col>
         </Row>

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

@@ -5,7 +5,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const { Option } = Select;
 
-//To be used as a form element only.
+// To be used as a form element only.
 
 const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone }, ref) => {
   const [option, setOption] = useState(value);
@@ -33,9 +33,25 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
         if (!value || !options) return label;
         const discount = options?.find((o) => o.id === value)?.discount;
         return (
-          <div className="imex-flex-row" style={{ width: "100%" }}>
-            <div style={{ flex: 1 }}>{label}</div>
-
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              width: "100%"
+            }}
+          >
+            <div
+              style={{
+                flex: 1,
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }}
+            >
+              {label}
+            </div>
             {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
           </div>
         );
@@ -45,36 +61,67 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
       optionFilterProp="name"
       onSelect={onSelect}
       disabled={disabled || false}
-      optionLabelProp={"name"}
+      optionLabelProp="name"
     >
-      {favorites
-        ? favorites.map((o) => (
-            <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
-              <div className="imex-flex-row">
-                <div style={{ flex: 1 }}>{o.name}</div>
-                <Space style={{ marginLeft: "1rem" }}>
-                  <HeartOutlined style={{ color: "red" }} />
-                  {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                  {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-                </Space>
+      {favorites &&
+        favorites.map((o) => (
+          <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                flexWrap: "nowrap",
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }}
+              >
+                {o.name}
               </div>
-            </Option>
-          ))
-        : null}
-      {options
-        ? options.map((o) => (
-            <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
-              <div className="imex-flex-row" style={{ width: "100%" }}>
-                <div style={{ flex: 1 }}>{o.name}</div>
-
-                <Space style={{ marginLeft: "1rem" }}>
-                  {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                  {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-                </Space>
+              <Space style={{ marginLeft: "1rem" }}>
+                <HeartOutlined style={{ color: "red" }} />
+                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
+                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
+              </Space>
+            </div>
+          </Option>
+        ))}
+      {options &&
+        options.map((o) => (
+          <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                flexWrap: "nowrap",
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }}
+              >
+                {o.name}
               </div>
-            </Option>
-          ))
-        : null}
+              <Space style={{ marginLeft: "1rem" }}>
+                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
+                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
+              </Space>
+            </div>
+          </Option>
+        ))}
     </Select>
   );
 };

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/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

@@ -230,7 +230,7 @@
         "markexported": "Mark Exported",
         "markforreexport": "Mark for Re-export",
         "new": "New Bill",
-        "nobilllines": "This part has not yet been recieved.",
+        "nobilllines": "",
         "noneselected": "No bill selected.",
         "onlycmforinvoiced": "Only credit memos can be entered for any Job that has been invoiced, exported, or voided.",
         "printlabels": "Print Labels",
@@ -270,9 +270,9 @@
         "testrender": "Test Render"
       },
       "errors": {
+        "creatingdefaultview": "Error creating default view.",
         "loading": "Unable to load shop details. Please call technical support.",
-        "saving": "Error encountered while saving. {{message}}",
-        "creatingdefaultview": "Error creating default view."
+        "saving": "Error encountered while saving. {{message}}"
       },
       "fields": {
         "ReceivableCustomField": "QBO Receivable Custom Field {{number}}",
@@ -285,19 +285,21 @@
         },
         "appt_length": "Default Appointment Length",
         "attach_pdf_to_email": "Attach PDF copy to sent emails?",
+        "batchid": "ADP Batch ID",
         "bill_allow_post_to_closed": "Allow Bills to be posted to Closed Jobs",
         "bill_federal_tax_rate": "Bills - Federal Tax Rate %",
         "bill_local_tax_rate": "Bill - Local Tax Rate %",
         "bill_state_tax_rate": "Bill - Provincial/State Tax Rate %",
         "city": "City",
         "closingperiod": "Closing Period",
+        "companycode": "ADP Company Code",
         "country": "Country",
         "dailybodytarget": "Scoreboard - Daily Body Target",
         "dailypainttarget": "Scoreboard - Daily Paint Target",
         "default_adjustment_rate": "Default Labor Deduction Adjustment Rate",
         "deliver": {
-          "templates": "Delivery Templates",
-          "require_actual_delivery_date": "Require Actual Delivery"
+          "require_actual_delivery_date": "Require Actual Delivery",
+          "templates": "Delivery Templates"
         },
         "dms": {
           "apcontrol": "AP Control Number",
@@ -700,10 +702,10 @@
         "workingdays": "Working Days"
       },
       "successes": {
-        "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."
+        "defaultviewcreated": "Default view created successfully.",
+        "save": "Shop configuration saved successfully. ",
+        "unsavedchanges": "Unsaved changes will be lost. Are you sure you want to continue?"
       },
       "validation": {
         "centermustexist": "The chosen responsibility center does not exist.",
@@ -1133,8 +1135,8 @@
     },
     "general": {
       "actions": {
-        "defaults": "Defaults",
         "add": "Add",
+        "autoupdate": "{{app}} will automatically update in {{time}} seconds. Please save all changes.",
         "calculate": "Calculate",
         "cancel": "Cancel",
         "clear": "Clear",
@@ -1142,6 +1144,8 @@
         "copied": "Copied!",
         "copylink": "Copy Link",
         "create": "Create",
+        "defaults": "Defaults",
+        "delay": "Delay Update (5 mins)",
         "delete": "Delete",
         "deleteall": "Delete All",
         "deselectall": "Deselect All",
@@ -1153,10 +1157,12 @@
         "print": "Print",
         "refresh": "Refresh",
         "remove": "Remove",
+        "remove_alert": "Are you sure you want to dismiss the alert?",
         "reset": "Reset your changes.",
         "resetpassword": "Reset Password",
         "save": "Save",
         "saveandnew": "Save and New",
+        "saveas": "Save As",
         "selectall": "Select All",
         "send": "Send",
         "sendbysms": "Send by SMS",
@@ -1164,9 +1170,7 @@
         "submit": "Submit",
         "tryagain": "Try Again",
         "view": "View",
-        "viewreleasenotes": "See What's Changed",
-        "remove_alert": "Are you sure you want to dismiss the alert?",
-        "saveas": "Save As"
+        "viewreleasenotes": "See What's Changed"
       },
       "errors": {
         "fcm": "You must allow notification permissions to have real time messaging.  Click to try again.",
@@ -1181,7 +1185,6 @@
         "vehicle": "Vehicle"
       },
       "labels": {
-        "unsavedchanges": "Unsaved changes.",
         "actions": "Actions",
         "areyousure": "Are you sure?",
         "barcode": "Barcode",
@@ -1189,6 +1192,8 @@
         "clear": "Clear",
         "confirmpassword": "Confirm Password",
         "created_at": "Created At",
+        "date": "Select Date",
+        "datetime": "Select Date & Time",
         "email": "Email",
         "errors": "Errors",
         "excel": "Excel",
@@ -1248,6 +1253,7 @@
         "tuesday": "Tuesday",
         "tvmode": "TV Mode",
         "unknown": "Unknown",
+        "unsavedchanges": "Unsaved changes.",
         "username": "Username",
         "view": "View",
         "wednesday": "Wednesday",
@@ -2737,41 +2743,6 @@
       }
     },
     "production": {
-      "constants":{
-        "main_profile": "Default"
-      },
-      "options": {
-        "small": "Small",
-        "medium": "Medium",
-        "large": "Large",
-        "vertical": "Vertical",
-        "horizontal": "Horizontal"
-      },
-      "settings": {
-        "layout": "Layout",
-        "information": "Information",
-        "statistics_title": "Statistics",
-        "board_settings": "Board Settings",
-        "filters_title": "Filters",
-        "filters": {
-          "md_ins_cos": "Insurance Companies",
-          "md_estimators": "Estimators"
-        },
-        "statistics": {
-          "total_hours_in_production": "Hours in Production",
-          "total_lab_in_production": "Body Hours in Production",
-          "total_lar_in_production": "Refinish Hours in Production",
-          "total_amount_in_production": "Dollars in Production",
-          "jobs_in_production": "Jobs in Production",
-          "total_hours_on_board": "Hours on Board",
-          "total_lab_on_board": "Body Hours on Board",
-          "total_lar_on_board": "Refinish Hours on Board",
-          "total_amount_on_board": "Dollars on Board",
-          "total_jobs_on_board": "Jobs on Board",
-          "tasks_in_production": "Tasks in Production",
-          "tasks_on_board": "Tasks on Board"
-        }
-      },
       "actions": {
         "addcolumns": "Add Columns",
         "bodypriority-clear": "Clear Body Priority",
@@ -2786,29 +2757,23 @@
         "suspend": "Suspend",
         "unsuspend": "Unsuspend"
       },
+      "constants": {
+        "main_profile": "Default"
+      },
       "errors": {
         "boardupdate": "Error encountered updating Job. {{message}}",
-        "removing": "Error removing from production board. {{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."
+        "name_required": "Profile name is required.",
+        "removing": "Error removing from production board. {{error}}",
+        "settings": "Error saving board settings: {{error}}"
       },
       "labels": {
-        "kiosk_mode": "Kiosk Mode",
-        "on": "On",
-        "off": "Off",
-        "wide": "Wide",
-        "tall": "Tall",
-        "vertical": "Vertical",
-        "horizontal": "Horizontal",
-        "orientation": "Board Orientation",
-        "card_size": "Card Size",
-        "model_info": "Vehicle Info",
         "actual_in": "Actual In",
+        "addnewprofile": "Add New Profile",
         "alert": "Alert",
-        "tasks": "Tasks",
         "alertoff": "Remove alert from Job",
         "alerton": "Add alert to Job",
+        "alerts": "Alerts",
         "ats": "Alternative Transportation",
         "bodyhours": "B",
         "bodypriority": "B/P",
@@ -2818,6 +2783,7 @@
             "qbo_usa": "QBO USA"
           }
         },
+        "card_size": "Card Size",
         "cardcolor": "Colored Cards",
         "cardsettings": "Card Settings",
         "clm_no": "Claim Number",
@@ -2826,48 +2792,88 @@
         "detailpriority": "D/P",
         "employeeassignments": "Employee Assignments",
         "employeesearch": "Employee Search",
+        "estimator": "Estimator",
+        "horizontal": "Horizontal",
         "ins_co_nm": "Insurance Company Name",
         "jobdetail": "Job Details",
+        "kiosk_mode": "Kiosk Mode",
         "laborhrs": "Labor Hours",
         "legend": "Legend:",
+        "model_info": "Vehicle Info",
         "note": "Production Note",
+        "off": "Off",
+        "on": "On",
+        "orientation": "Board Orientation",
         "ownr_nm": "Customer Name",
         "paintpriority": "P/P",
         "partsstatus": "Parts Status",
-        "estimator": "Estimator",
-        "subtotal": "Subtotal",
         "production_note": "Production Note",
         "refinishhours": "R",
         "scheduled_completion": "Scheduled Completion",
         "selectview": "Select a View",
         "stickyheader": "Sticky Header (BETA)",
         "sublets": "Sublets",
+        "subtotal": "Subtotal",
+        "tall": "Tall",
+        "tasks": "Tasks",
         "totalhours": "Total Hrs ",
         "touchtime": "T/T",
+        "vertical": "Vertical",
         "viewname": "View Name",
-        "alerts": "Alerts",
-        "addnewprofile": "Add New Profile"
+        "wide": "Wide"
+      },
+      "options": {
+        "horizontal": "Horizontal",
+        "large": "Large",
+        "medium": "Medium",
+        "small": "Small",
+        "vertical": "Vertical"
+      },
+      "settings": {
+        "board_settings": "Board Settings",
+        "filters": {
+          "md_estimators": "Estimators",
+          "md_ins_cos": "Insurance Companies"
+        },
+        "filters_title": "Filters",
+        "information": "Information",
+        "layout": "Layout",
+        "statistics": {
+          "jobs_in_production": "Jobs in Production",
+          "tasks_in_production": "Tasks in Production",
+          "tasks_on_board": "Tasks on Board",
+          "total_amount_in_production": "Dollars in Production",
+          "total_amount_on_board": "Dollars on Board",
+          "total_hours_in_production": "Hours in Production",
+          "total_hours_on_board": "Hours on Board",
+          "total_jobs_on_board": "Jobs on Board",
+          "total_lab_in_production": "Body Hours in Production",
+          "total_lab_on_board": "Body Hours on Board",
+          "total_lar_in_production": "Refinish Hours in Production",
+          "total_lar_on_board": "Refinish Hours on Board"
+        },
+        "statistics_title": "Statistics"
+      },
+      "statistics": {
+        "currency_symbol": "$",
+        "hours": "Hours",
+        "jobs": "Jobs",
+        "jobs_in_production": "Jobs in Production",
+        "tasks": "Tasks",
+        "tasks_in_production": "Tasks in Production",
+        "tasks_on_board": "Tasks on Board",
+        "total_amount_in_production": "Dollars in Production",
+        "total_amount_on_board": "Dollars on Board",
+        "total_hours_in_production": "Hours in Production",
+        "total_hours_on_board": "Hours on Board",
+        "total_jobs_on_board": "Jobs on Board",
+        "total_lab_in_production": "Body Hours in Production",
+        "total_lab_on_board": "Body Hours on Board",
+        "total_lar_in_production": "Refinish Hours in Production",
+        "total_lar_on_board": "Refinish Hours on Board"
       },
       "successes": {
         "removed": "Job removed from production."
-      },
-      "statistics": {
-        "total_hours_in_production": "Hours in Production",
-        "total_lab_in_production": "Body Hours in Production",
-        "total_lar_in_production": "Refinish Hours in Production",
-        "total_amount_in_production": "Dollars in Production",
-        "jobs_in_production": "Jobs in Production",
-        "total_hours_on_board": "Hours on Board",
-        "total_lab_on_board": "Body Hours on Board",
-        "total_lar_on_board": "Refinish Hours on Board",
-        "total_amount_on_board": "Dollars on Board",
-        "total_jobs_on_board": "Jobs on Board",
-        "tasks_in_production": "Tasks in Production",
-        "tasks_on_board": "Tasks on Board",
-        "tasks": "Tasks",
-        "hours": "Hours",
-        "currency_symbol": "$",
-        "jobs": "Jobs"
       }
     },
     "profile": {
@@ -2925,6 +2931,8 @@
         "vendor": "Vendor"
       },
       "templates": {
+        "adp_payroll_flat": "ADP Payroll - Flat Rate",
+        "adp_payroll_straight": "ADP Payroll - Straight Time",
         "anticipated_revenue": "Anticipated Revenue",
         "ar_aging": "AR Aging",
         "attendance_detail": "Attendance (All Employees)",
@@ -3416,6 +3424,18 @@
       "vehicledetail": "Vehicle Details {{vehicle}} | {{app}}",
       "vehicles": "All Vehicles | {{app}}"
     },
+    "trello": {
+      "labels": {
+        "add_card": "Add Card",
+        "add_lane": "Add Lane",
+        "cancel": "Cancel",
+        "delete_lane": "Delete Lane",
+        "description": "Description",
+        "label": "Label",
+        "lane_actions": "Lane Actions",
+        "title": "Title"
+      }
+    },
     "tt_approvals": {
       "actions": {
         "approveselected": "Approve Selected"
@@ -3554,18 +3574,6 @@
       "validation": {
         "unique_vendor_name": "You must enter a unique vendor name."
       }
-    },
-    "trello": {
-      "labels": {
-        "add_card": "Add Card",
-        "add_lane": "Add Lane",
-        "delete_lane": "Delete Lane",
-        "lane_actions": "Lane Actions",
-        "title": "Title",
-        "description": "Description",
-        "label": "Label",
-        "cancel": "Cancel"
-      }
     }
   }
 }

client/src/translations/fr/common.json

@@ -270,9 +270,9 @@
         "testrender": ""
       },
       "errors": {
+        "creatingdefaultview": "",
         "loading": "Impossible de charger les détails de la boutique. Veuillez appeler le support technique.",
-        "saving": "",
-        "creatingdefaultview": ""
+        "saving": ""
       },
       "fields": {
         "ReceivableCustomField": "",
@@ -285,19 +285,21 @@
         },
         "appt_length": "",
         "attach_pdf_to_email": "",
+        "batchid": "",
         "bill_allow_post_to_closed": "",
         "bill_federal_tax_rate": "",
         "bill_local_tax_rate": "",
         "bill_state_tax_rate": "",
         "city": "",
         "closingperiod": "",
+        "companycode": "",
         "country": "",
         "dailybodytarget": "",
         "dailypainttarget": "",
         "default_adjustment_rate": "",
         "deliver": {
-          "templates": "",
-          "require_actual_delivery_date": ""
+          "require_actual_delivery_date": "",
+          "templates": ""
         },
         "dms": {
           "apcontrol": "",
@@ -700,10 +702,10 @@
         "workingdays": ""
       },
       "successes": {
-        "save": "",
-        "unsavedchanges": "",
         "areyousure": "",
-        "defaultviewcreated": ""
+        "defaultviewcreated": "",
+        "save": "",
+        "unsavedchanges": ""
       },
       "validation": {
         "centermustexist": "",
@@ -1133,8 +1135,8 @@
     },
     "general": {
       "actions": {
-        "defaults": "",
         "add": "",
+        "autoupdate": "",
         "calculate": "",
         "cancel": "",
         "clear": "",
@@ -1142,6 +1144,8 @@
         "copied": "",
         "copylink": "",
         "create": "",
+        "defaults": "",
+        "delay": "",
         "delete": "Effacer",
         "deleteall": "",
         "deselectall": "",
@@ -1153,10 +1157,12 @@
         "print": "",
         "refresh": "",
         "remove": "",
+        "remove_alert": "",
         "reset": " Rétablir l'original.",
         "resetpassword": "",
         "save": "sauvegarder",
         "saveandnew": "",
+        "saveas": "",
         "selectall": "",
         "send": "",
         "sendbysms": "",
@@ -1164,9 +1170,7 @@
         "submit": "",
         "tryagain": "",
         "view": "",
-        "viewreleasenotes": "",
-        "remove_alert": "",
-        "saveas": ""
+        "viewreleasenotes": ""
       },
       "errors": {
         "fcm": "",
@@ -1181,7 +1185,6 @@
         "vehicle": ""
       },
       "labels": {
-        "unsavedchanges": "",
         "actions": "actes",
         "areyousure": "",
         "barcode": "code à barre",
@@ -1189,6 +1192,8 @@
         "clear": "",
         "confirmpassword": "",
         "created_at": "",
+        "date": "",
+        "datetime": "",
         "email": "",
         "errors": "",
         "excel": "",
@@ -1248,6 +1253,7 @@
         "tuesday": "",
         "tvmode": "",
         "unknown": "Inconnu",
+        "unsavedchanges": "",
         "username": "",
         "view": "",
         "wednesday": "",
@@ -2737,41 +2743,6 @@
       }
     },
     "production": {
-      "constants":{
-        "main_profile": ""
-      },
-      "options": {
-        "small": "",
-        "medium": "",
-        "large": "",
-        "vertical": "",
-        "horizontal": ""
-      },
-      "settings": {
-        "layout": "",
-        "information": "",
-        "statistics_title": "",
-        "board_settings": "",
-        "filters_title": "",
-        "filters": {
-          "md_ins_cos": "",
-          "md_estimators": ""
-        },
-        "statistics": {
-          "total_hours_in_production": "",
-          "total_lab_in_production": "",
-          "total_lar_in_production": "",
-          "total_amount_in_production": "",
-          "jobs_in_production": "",
-          "total_hours_on_board": "",
-          "total_lab_on_board": "",
-          "total_lar_on_board": "",
-          "total_amount_on_board": "",
-          "total_jobs_on_board": "",
-          "tasks_in_production": "",
-          "tasks_on_board": ""
-        }
-      },
       "actions": {
         "addcolumns": "",
         "bodypriority-clear": "",
@@ -2786,29 +2757,23 @@
         "suspend": "",
         "unsuspend": ""
       },
+      "constants": {
+        "main_profile": ""
+      },
       "errors": {
         "boardupdate": "",
-        "removing": "",
-        "settings": "",
         "name_exists": "",
-        "name_required": ""
+        "name_required": "",
+        "removing": "",
+        "settings": ""
       },
       "labels": {
-        "kiosk_mode": "",
-        "on": "",
-        "off": "",
-        "wide": "",
-        "tall": "",
-        "vertical": "",
-        "horizontal": "",
-        "orientation": "",
-        "card_size": "",
-        "model_info": "",
         "actual_in": "",
+        "addnewprofile": "",
         "alert": "",
-        "tasks": "",
         "alertoff": "",
         "alerton": "",
+        "alerts": "",
         "ats": "",
         "bodyhours": "",
         "bodypriority": "",
@@ -2818,6 +2783,7 @@
             "qbo_usa": ""
           }
         },
+        "card_size": "",
         "cardcolor": "",
         "cardsettings": "",
         "clm_no": "",
@@ -2826,48 +2792,88 @@
         "detailpriority": "",
         "employeeassignments": "",
         "employeesearch": "",
+        "estimator": "",
+        "horizontal": "",
         "ins_co_nm": "",
         "jobdetail": "",
+        "kiosk_mode": "",
         "laborhrs": "",
         "legend": "",
+        "model_info": "",
         "note": "",
+        "off": "",
+        "on": "",
+        "orientation": "",
         "ownr_nm": "",
         "paintpriority": "",
         "partsstatus": "",
-        "estimator": "",
-        "subtotal": "",
         "production_note": "",
         "refinishhours": "",
         "scheduled_completion": "",
         "selectview": "",
         "stickyheader": "",
         "sublets": "",
+        "subtotal": "",
+        "tall": "",
+        "tasks": "",
         "totalhours": "",
         "touchtime": "",
+        "vertical": "",
         "viewname": "",
-        "alerts": "",
-        "addnewprofile": ""
+        "wide": ""
+      },
+      "options": {
+        "horizontal": "",
+        "large": "",
+        "medium": "",
+        "small": "",
+        "vertical": ""
+      },
+      "settings": {
+        "board_settings": "",
+        "filters": {
+          "md_estimators": "",
+          "md_ins_cos": ""
+        },
+        "filters_title": "",
+        "information": "",
+        "layout": "",
+        "statistics": {
+          "jobs_in_production": "",
+          "tasks_in_production": "",
+          "tasks_on_board": "",
+          "total_amount_in_production": "",
+          "total_amount_on_board": "",
+          "total_hours_in_production": "",
+          "total_hours_on_board": "",
+          "total_jobs_on_board": "",
+          "total_lab_in_production": "",
+          "total_lab_on_board": "",
+          "total_lar_in_production": "",
+          "total_lar_on_board": ""
+        },
+        "statistics_title": ""
+      },
+      "statistics": {
+        "currency_symbol": "",
+        "hours": "",
+        "jobs": "",
+        "jobs_in_production": "",
+        "tasks": "",
+        "tasks_in_production": "",
+        "tasks_on_board": "",
+        "total_amount_in_production": "",
+        "total_amount_on_board": "",
+        "total_hours_in_production": "",
+        "total_hours_on_board": "",
+        "total_jobs_on_board": "",
+        "total_lab_in_production": "",
+        "total_lab_on_board": "",
+        "total_lar_in_production": "",
+        "total_lar_on_board": ""
       },
       "successes": {
         "removed": ""
-      },
-      "statistics": {
-        "total_hours_in_production": "",
-        "total_lab_in_production": "",
-        "total_lar_in_production": "",
-        "total_amount_in_production": "",
-        "jobs_in_production": "",
-        "total_hours_on_board": "",
-        "total_lab_on_board": "",
-        "total_lar_on_board": "",
-        "total_amount_on_board": "",
-        "total_jobs_on_board": "",
-        "tasks_in_production": "",
-        "tasks_on_board": "",
-        "tasks": "",
-        "hours": "",
-        "currency_symbol": "",
-        "jobs": ""
       }
     },
     "profile": {
@@ -2925,6 +2931,8 @@
         "vendor": ""
       },
       "templates": {
+        "adp_payroll_flat": "",
+        "adp_payroll_straight": "",
         "anticipated_revenue": "",
         "ar_aging": "",
         "attendance_detail": "",
@@ -3416,6 +3424,18 @@
       "vehicledetail": "Détails du véhicule {{vehicle} | {{app}}",
       "vehicles": "Tous les véhicules | {{app}}"
     },
+    "trello": {
+      "labels": {
+        "add_card": "",
+        "add_lane": "",
+        "cancel": "",
+        "delete_lane": "",
+        "description": "",
+        "label": "",
+        "lane_actions": "",
+        "title": ""
+      }
+    },
     "tt_approvals": {
       "actions": {
         "approveselected": ""
@@ -3554,18 +3574,6 @@
       "validation": {
         "unique_vendor_name": ""
       }
-    },
-    "trello": {
-      "labels": {
-        "add_card": "",
-        "add_lane": "",
-        "delete_lane": "",
-        "lane_actions": "",
-        "title": "",
-        "description": "",
-        "label": "",
-        "cancel": ""
-      }
     }
   }
 }

client/src/utils/TemplateConstants.js

@@ -2158,6 +2158,32 @@ export const TemplateList = (type, context) => {
               field: i18n.t("tasks.fields.created_at")
             },
             group: "jobs"
+          },
+          adp_payroll_flat: {
+            title: i18n.t("reportcenter.templates.adp_payroll_flat"),
+            subject: i18n.t("reportcenter.templates.adp_payroll_flat"),
+            key: "adp_payroll_flat",
+            reporttype: "text",
+            disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.timetickets"),
+              field: i18n.t("timetickets.fields.committed_at")
+            },
+            group: "payroll",
+            adp_payroll: true
+          },
+          adp_payroll_straight: {
+            title: i18n.t("reportcenter.templates.adp_payroll_straight"),
+            subject: i18n.t("reportcenter.templates.adp_payroll_straight"),
+            key: "adp_payroll_straight",
+            reporttype: "text",
+            disabled: false,
+            rangeFilter: {
+              object: i18n.t("reportcenter.labels.objects.timetickets"),
+              field: i18n.t("timetickets.fields.date")
+            },
+            group: "payroll",
+            adp_payroll: true
           }
         }
       : {}),

client/src/utils/countdownHook.js

@@ -0,0 +1,84 @@
+import React from "react";
+
+const useCountDown = (timeToCount = 60 * 1000, interval = 1000) => {
+  const [timeLeft, setTimeLeft] = React.useState(0);
+  const timer = React.useRef({});
+
+  const run = (ts) => {
+    if (!timer.current.started) {
+      timer.current.started = ts;
+      timer.current.lastInterval = ts;
+    }
+
+    const localInterval = Math.min(interval, timer.current.timeLeft || Infinity);
+    if (ts - timer.current.lastInterval >= localInterval) {
+      timer.current.lastInterval += localInterval;
+      setTimeLeft((timeLeft) => {
+        timer.current.timeLeft = timeLeft - localInterval;
+        return timer.current.timeLeft;
+      });
+    }
+
+    if (ts - timer.current.started < timer.current.timeToCount) {
+      timer.current.requestId = window.requestAnimationFrame(run);
+    } else {
+      timer.current = {};
+      setTimeLeft(0);
+    }
+  };
+
+  const start = React.useCallback(
+    (ttc) => {
+      window.cancelAnimationFrame(timer.current.requestId);
+
+      const newTimeToCount = ttc !== undefined ? ttc : timeToCount;
+      timer.current.started = null;
+      timer.current.lastInterval = null;
+      timer.current.timeToCount = newTimeToCount;
+      timer.current.requestId = window.requestAnimationFrame(run);
+
+      setTimeLeft(newTimeToCount);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const pause = React.useCallback(() => {
+    window.cancelAnimationFrame(timer.current.requestId);
+    timer.current.started = null;
+    timer.current.lastInterval = null;
+    timer.current.timeToCount = timer.current.timeLeft;
+  }, []);
+
+  const resume = React.useCallback(
+    () => {
+      if (!timer.current.started && timer.current.timeLeft > 0) {
+        window.cancelAnimationFrame(timer.current.requestId);
+        timer.current.requestId = window.requestAnimationFrame(run);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const reset = React.useCallback(() => {
+    if (timer.current.timeLeft) {
+      window.cancelAnimationFrame(timer.current.requestId);
+      timer.current = {};
+      setTimeLeft(0);
+    }
+  }, []);
+
+  const actions = React.useMemo(
+    () => ({ start, pause, resume, reset }), // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  React.useEffect(() => {
+    return () => window.cancelAnimationFrame(timer.current.requestId);
+  }, []);
+
+  return [timeLeft, actions];
+};
+
+export default useCountDown;

client/src/utils/handleBeta.js

@@ -1,47 +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 (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;
-
-  // Determine if the host name starts with "beta" or "www.beta"
-  const isBetaHost = currentHostName.startsWith("beta.");
-  const isBetaHostWithWWW = currentHostName.startsWith("www.beta.");
-
-  if (isBeta) {
-    // If beta is on and we are not on a beta domain, redirect to the beta version
-    if (!isBetaHost && !isBetaHostWithWWW) {
-      const newHostName = currentHostName.startsWith("www.")
-        ? `www.beta.${currentHostName.replace(/^www\./, "")}`
-        : `beta.${currentHostName}`;
-      const href = `${window.location.protocol}//${newHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-      window.location.replace(href);
-    }
-    // Otherwise, if beta is on and we're already on a beta domain, stay there
-  } else {
-    // If beta is off and we are on a beta domain, redirect to the non-beta version
-    if (isBetaHost || isBetaHostWithWWW) {
-      const newHostName = currentHostName.replace(/^www\.beta\./, "www.").replace(/^beta\./, "");
-      const href = `${window.location.protocol}//${newHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
-      window.location.replace(href);
-    }
-    // Otherwise, if beta is off and we're not on a beta domain, stay there
-  }
-};
-
-export default handleBeta;

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 * * * *'

server/accounting/qbo/qbo-payables.js

@@ -94,7 +94,10 @@ exports.default = async (req, res) => {
         ret.push({
           billid: bill.id,
           success: false,
-          errorMessage: (error && error.authResponse && error.authResponse.body) || (error && error.message)
+          errorMessage:
+            (error && error.authResponse && error.authResponse.body) ||
+            error.response?.data?.Fault?.Error.map((e) => e.Detail).join(", ") ||
+            (error && error.message)
         });
 
         //Add the export log error.
@@ -209,14 +212,14 @@ async function InsertBill(oauthClient, qbo_realmId, req, bill, vendor, bodyshop)
       AccountBasedExpenseLineDetail: {
         ...(bill.job.class ? { ClassRef: { value: classes[bill.job.class] } } : {}),
         AccountRef: {
-          value: accounts[bodyshop.md_responsibility_centers.taxes.federal.accountdesc]
+          value: accounts[bodyshop.md_responsibility_centers.taxes.federal_itc.accountdesc]
         }
       },
 
       Amount: Dinero({
         amount: Math.round(
           bill.billlines.reduce((acc, val) => {
-            return acc + val.actual_cost * val.quantity;
+            return acc + val.applicable_taxes?.federal ? (val.actual_cost * val.quantity ?? 0) : 0;
           }, 0) * 100
         )
       })
@@ -274,6 +277,8 @@ async function InsertBill(oauthClient, qbo_realmId, req, bill, vendor, bodyshop)
   } catch (error) {
     logger.log("qbo-payables-error", "DEBUG", req.user.email, bill.id, {
       error: error, //(error && error.authResponse && error.authResponse.body) || (error && error.message),
+      validationError: JSON.stringify(error?.response?.data),
+      accountmeta: JSON.stringify({ accounts, taxCodes, classes }),
       method: "InsertBill"
     });
     throw error;

server/accounting/qbo/qbo-receivables.js

@@ -179,7 +179,11 @@ exports.default = async (req, res) => {
         ret.push({
           jobid: job.id,
           success: false,
-          errorMessage: (error && error.authResponse && error.authResponse.body) || (error && error.message)
+          errorMessage:
+            error?.authResponse?.body ||
+            error?.response?.data?.Fault?.Error.map((e) => e.Detail).join(", ") ||
+            error?.response?.data ||
+            error?.message
         });
         console.log(error);
         logger.log("qbo-receivable-create-error", "ERROR", req.user.email, {
@@ -254,7 +258,6 @@ async function InsertInsuranceCo(oauthClient, qbo_realmId, req, job, bodyshop) {
     throw new Error(
       `Insurance Company '${job.ins_co_nm}' not found in shop configuration. Please make sure it exists or change the insurance company name on the job to one that exists.`
     );
-    return;
   }
   const Customer = {
     DisplayName: job.ins_co_nm.trim(),
@@ -575,7 +578,9 @@ async function InsertInvoice(oauthClient, qbo_realmId, req, job, bodyshop, paren
   } catch (error) {
     logger.log("qbo-receivables-error", "DEBUG", req.user.email, job.id, {
       error,
-      method: "InsertOwner"
+      method: "InsertInvoice",
+      validationError: JSON.stringify(error?.response?.data),
+      accountmeta: JSON.stringify({ items, taxCodes, classes })
     });
     throw error;
   }

server/data/autohouse.js

@@ -31,6 +31,12 @@ const ftpSetup = {
 };
 
 exports.default = async (req, res) => {
+  // Only process if in production environment.
+  if (process.env.NODE_ENV !== "production") {
+    res.sendStatus(403);
+    return;
+  }
+
   //Query for the List of Bodyshop Clients.
   logger.log("autohouse-start", "DEBUG", "api", null, null);
   const { bodyshops } = await client.request(queries.GET_AUTOHOUSE_SHOPS);

server/data/claimscorp.js

@@ -31,6 +31,12 @@ const ftpSetup = {
 };
 
 exports.default = async (req, res) => {
+  // Only process if in production environment.
+  if (process.env.NODE_ENV !== "production") {
+    res.sendStatus(403);
+    return;
+  }
+
   //Query for the List of Bodyshop Clients.
   logger.log("claimscorp-start", "DEBUG", "api", null, null);
   const { bodyshops } = await client.request(queries.GET_CLAIMSCORP_SHOPS);

server/data/kaizen.js

@@ -31,6 +31,12 @@ const ftpSetup = {
 };
 
 exports.default = async (req, res) => {
+  // Only process if in production environment.
+  if (process.env.NODE_ENV !== "production") {
+    res.sendStatus(403);
+    return;
+  }
+
   //Query for the List of Bodyshop Clients.
   logger.log("kaizen-start", "DEBUG", "api", null, null);
   const kaizenShopsIDs = ["SUMMIT", "STRATHMORE", "SUNRIDGE", "SHAW"];
@@ -56,8 +62,8 @@ exports.default = async (req, res) => {
       try {
         const { jobs, bodyshops_by_pk } = await client.request(queries.KAIZEN_QUERY, {
           bodyshopid: bodyshop.id,
-          start: start ? moment(start).startOf("hours") : moment().subtract(2, "hours").startOf("hour"),
-          ...(end && { end: moment(end).endOf("hours") })
+          start: start ? moment(start).startOf("day") : moment().subtract(5, "days").startOf("day"),
+          ...(end && { end: moment(end).endOf("day") })
         });
 
         const kaizenObject = {
@@ -176,24 +182,19 @@ exports.default = async (req, res) => {
     } finally {
       sftp.end();
     }
-    // sendServerEmail({
-    //   subject: `Kaizen Report ${moment().format("MM-DD-YY")}`,
-    //   text: `Errors: ${allErrors.map((e) => JSON.stringify(e, null, 2))}
-    //   Uploaded: ${JSON.stringify(
-    //     allxmlsToUpload.map((x) => ({ filename: x.filename, count: x.count })),
-    //     null,
-    //     2
-    //   )}
-    //   `,
-    // });
+    sendServerEmail({
+      subject: `Kaizen Report ${moment().format("MM-DD-YY")}`,
+      text: `Errors: ${allErrors.map((e) => JSON.stringify(e, null, 2))}
+      Uploaded: ${JSON.stringify(
+        allxmlsToUpload.map((x) => ({ filename: x.filename, count: x.count })),
+        null,
+        2
+      )}
+      `
+    });
     res.sendStatus(200);
   } catch (error) {
     res.status(200).json(error);
-    sendServerEmail({
-      subject: `Kaizen Report ${moment().format("MM-DD-YY @ HH:mm:ss")}`,
-      text: `Errors: JSON.stringify(error)}
-      All Errors: ${allErrors.map((e) => JSON.stringify(e, null, 2))}`
-    });
   }
 };
 

server/job/job-totals-USA.js

@@ -965,22 +965,17 @@ function CalculateTaxesTotals(job, otherTotals) {
     }
   });
 
-  if (job.adjustment_bottom_line) {
-    const subtotal_before_adjustment = subtotal.add(Dinero({ amount: Math.round(job.adjustment_bottom_line * -100) }));
-    const percent_of_adjustment =
-      Math.round(
-        subtotal_before_adjustment.toUnit() /
-          (job.adjustment_bottom_line > 0 ? job.adjustment_bottom_line : job.adjustment_bottom_line * -1)
-      ) / 100;
-
-    Object.keys(taxableAmountsByTier).forEach((taxTierKey) => {
-      taxable_adjustment = taxableAmountsByTier[taxTierKey].multiply(percent_of_adjustment);
-      if (job.adjustment_bottom_line > 0) {
-        taxableAmountsByTier[taxTierKey] = taxableAmountsByTier[taxTierKey].add(taxable_adjustment);
-      } else {
-        taxableAmountsByTier[taxTierKey] = taxableAmountsByTier[taxTierKey].subtract(taxable_adjustment);
+  if (job.adjustment_bottom_line && job.adjustment_bottom_line !== 0) {
+    for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
+      if (IsTrueOrYes(pfp["PAN"][`prt_tx_in${tyCounter}`])) {
+        //This amount is taxable for this type.
+        taxableAmountsByTier[`ty${tyCounter}Tax`] = taxableAmountsByTier[`ty${tyCounter}Tax`].add(
+          Dinero({
+            amount: Math.round(job.adjustment_bottom_line * 100)
+          })
+        );
       }
-    });
+    }
   }
 
   const remainingTaxableAmounts = taxableAmountsByTier;