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

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

.circleci/config.yml

@@ -226,9 +226,7 @@ jobs:
           command: |
             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
@@ -315,9 +313,7 @@ jobs:
           command: |
             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
@@ -427,7 +423,7 @@ workflows:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
-              only: master-AIO
+              only: master
       - rome-api-deploy:
           filters:
             branches:
@@ -437,7 +433,7 @@ workflows:
             branches:
               only: master-AIO
       - rome-hasura-migrate:
-          secret: ${HASURA_ROME_PROD_SECRET}
+          secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
               only: master-AIO

.dockerignore

@@ -1,24 +0,0 @@
-# Directories to exclude
-.circleci
-.idea
-.platform
-.vscode
-_reference
-client
-redis/dockerdata
-hasura
-node_modules
-# Files to exclude
-.ebignore
-.editorconfig
-.eslintrc.json
-.gitignore
-.prettierrc.js
-Dockerfile
-README.MD
-bodyshop_translations.babel
-docker-compose.yml
-ecosystem.config.js
-
-# Optional: Exclude logs and temporary files
-*.log

.platform/nginx/conf.d/proxy.conf

@@ -1,2 +1 @@
-client_max_body_size 50M;
-client_body_buffer_size 5M;
+client_max_body_size 50M;

.vscode/launch.json

@@ -14,21 +14,6 @@
       "request": "launch",
       "url": "http://localhost:3000",
       "webRoot": "${workspaceRoot}/client/src"
-    },
-    {
-      "name": "Attach to Node.js in Docker",
-      "type": "node",
-      "request": "attach",
-      "address": "localhost",
-      "port": 9229,
-      "localRoot": "${workspaceFolder}",
-      "remoteRoot": "/app",
-      "protocol": "inspector",
-      "restart": true,
-      "sourceMaps": true,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
     }
   ]
 }

Dockerfile

@@ -1,47 +0,0 @@
-# Use Amazon Linux 2023 as the base image
-FROM amazonlinux:2023
-
-# Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
-RUN dnf install -y git \
-    && curl -sL https://rpm.nodesource.com/setup_20.x | bash - \
-    && dnf install -y nodejs \
-    && dnf clean all
-
-
-# Install dependencies required by node-canvas
-RUN dnf install -y \
-    gcc \
-    gcc-c++ \
-    cairo-devel \
-    pango-devel \
-    libjpeg-turbo-devel \
-    giflib-devel \
-    libpng-devel \
-    make \
-    python3 \
-    python3-pip \
-    && dnf clean all
-
-# Set the working directory
-WORKDIR /app
-
-# This is because our test route uses a git commit hash
-RUN git config --global --add safe.directory /app
-
-# Copy package.json and package-lock.json
-COPY package.json ./
-
-# Install Nodemon
-RUN npm install -g nodemon
-
-# Install dependencies
-RUN npm i --no-package-lock
-
-# Copy the rest of your application code
-COPY . .
-
-# Expose the port your app runs on (adjust if necessary)
-EXPOSE 4000 9229
-
-# Start the application
-CMD ["nodemon", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]

_reference/Documents/dockerreadme.md

@@ -1,64 +0,0 @@
-# Setting up External Networking and Static IP for WSL2 using Hyper-V
-
-This guide will walk you through the steps to configure your WSL2 (Windows Subsystem for Linux) instance to use an external Hyper-V virtual switch, enabling it to connect directly to your local network. Additionally, you'll learn how to assign a static IP address to your WSL2 instance.
-
-## Prerequisites
-
-1. **Windows 11**
-2. **Docker Desktop For Windows (Latest Version)
-
-# Docker Setup
-Inside the root of the project exists the `docker-compose.yaml` file, you can simply run
-`docker-compose up` to launch the backend.
-
-Things to note:
-- When installing NPM packages, you will need to rebuild the `node-app` container 
-- Making changes to the server files will restart the `node-app`
-
-# Local Stack 
-- LocalStack Front end (Optional) - https://apps.microsoft.com/detail/9ntrnft9zws2?hl=en-us&gl=US
-- http://localhost:4566/_aws/ses will allow you to see emails sent
-
-# Docker Commands
-
-##  General `docker-compose` Commands:
-1. Bring up the services, force a rebuild of all services, and do not use the cache: `docker-compose up --build --no-cache`
-2. Start Containers in Detached Mode: This will run the containers in the background (detached mode): `docker-compose up -d`
-3. Stop and Remove Containers: Stops and removes the containers gracefully: `docker-compose down`
-4. Stop containers without removing them: `docker-compose stop`
-5. Remove Containers, Volumes, and Networks: `docker-compose down --volumes`
-6. Force rebuild of containers: `docker-compose build --no-cache`
-7. View running Containers:  `docker-compose ps`
-8. View a specific containers logs: `docker-compose logs <container-name>`
-9. Scale services (multiple instances of a service): `docker-compose up --scale <container-name>=<instances number> -d`
-10. Watch a specific containers logs in realtime with timestamps: `docker-compose logs -f --timestamps <container-name>`
-
-## Volume Management Commands
-1. List  Docker volumes: `docker volume ls`
-2. Remove Unused volumes `docker volume prune`
-3. Remove specific volumes `docker volume rm <volume-name>`
-4. Inspect a volume: `docker volume inspect <volume-name>`
-
-## Container Image Management Commands:
-1. List running containers: `docker ps`
-2. List all containers: `docker os -a`
-3. Remove Stopped containers: `docker container prune`
-4. Remove a specific container: `docker container rm <container-name>`
-5. Remove a specific image: `docker rmi <image-name>:<version>`
-6. Remove all unused images: `docker image prune -a`
-
-## Network Management Commands:
-1. List networks: `docker network ls`
-2. Inspect a specific network: `docker network inspect <network-name>`
-3. Remove a specific network: `docker network rm <network-name>`
-4. Remove unused networks: `docker network prune`
-
-## Debugging and maintenance:
-1. Enter a Running container: `docker exec -it <container name> /bin/bash` (could also be `/bin/sh` or for example `redis-cli` on a redis node)
-2. View container resource usage: `docker stats`
-3. Check Disk space used by Docker: `docker system df`
-4. Remove all unused Data (Nuclear option): `docker system prune`
-
-## Specific examples
-1. To simulate a Clean state, one should run `docker system prune` followed by `docker volume prune -a`
-2. You can run `docker-compose up` without the `-d` option, and you will get what is identical to the experience you were used to, this includes being able to control-c and bring the entire stack down

_reference/localEmailViewer/.gitignore

@@ -1 +0,0 @@
-node_modules

_reference/localEmailViewer/README.md

@@ -1,7 +0,0 @@
-This will connect to your dockers local stack session and render the email in HTML.
-
-```shell
-node index.js
-```
-
-http://localhost:3334

_reference/localEmailViewer/index.js

@@ -1,116 +0,0 @@
-// index.js
-
-import express from 'express';
-import fetch from 'node-fetch';
-import {simpleParser} from 'mailparser';
-
-const app = express();
-const PORT = 3334;
-
-app.get('/', async (req, res) => {
-    try {
-        const response = await fetch('http://localhost:4566/_aws/ses');
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
-        }
-        const data = await response.json();
-        const messagesHtml = await parseMessages(data.messages);
-        res.send(renderHtml(messagesHtml));
-    } catch (error) {
-        console.error('Error fetching messages:', error);
-        res.status(500).send('Error fetching messages');
-    }
-});
-
-async function parseMessages(messages) {
-    const parsedMessages = await Promise.all(
-        messages.map(async (message, index) => {
-            try {
-                const parsed = await simpleParser(message.RawData);
-                return `
-                    <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
-                     <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
-                        <div class="mb-2">
-                            <span class="font-bold text-lg">Message ${index + 1}</span>
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">From:</span> ${message.Source}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Region:</span> ${message.Region}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Timestamp:</span> ${message.Timestamp}
-                        </div>
-                     </div>
-                        <div class="prose">
-                            ${parsed.html || parsed.textAsHtml || 'No HTML content available'}
-                        </div>
-                    </div>
-                `;
-            } catch (error) {
-                console.error('Error parsing email:', error);
-                return `
-                    <div class="bg-white shadow-md rounded-lg p-4 mb-6">
-                        <div class="mb-2">
-                            <span class="font-bold text-lg">Message ${index + 1}</span>
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">From:</span> ${message.Source}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Region:</span> ${message.Region}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Timestamp:</span> ${message.Timestamp}
-                        </div>
-                        <div class="text-red-500">
-                            Error parsing email content
-                        </div>
-                    </div>
-                `;
-            }
-        })
-    );
-    return parsedMessages.join('');
-}
-
-function renderHtml(messagesHtml) {
-    return `
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Email Messages Viewer</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-            <style>
-                body {
-                    background-color: #f3f4f6;
-                    font-family: Arial, sans-serif;
-                }
-                .container {
-                    max-width: 800px;
-                    margin: 50px auto;
-                    padding: 20px;
-                }
-                .prose {
-                    line-height: 1.6;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="container bg-white shadow-lg rounded-lg p-6">
-                <h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
-                <div id="messages-container">
-                    ${messagesHtml}
-                </div>
-            </div>
-        </body>
-        </html>
-    `;
-}
-
-app.listen(PORT, () => {
-    console.log(`Server is running on http://localhost:${PORT}`);
-});

_reference/localEmailViewer/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "localemailviewer",
-  "version": "1.0.0",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "express": "^4.21.1",
-    "mailparser": "^3.7.1",
-    "node-fetch": "^3.3.2"
-  }
-}

_reference/prHelper/index.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>IMEX IO Extractor</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      padding: 20px;
-    }
-    textarea {
-      width: 100%;
-      height: 200px;
-    }
-    .output-box {
-      margin-top: 20px;
-      padding: 10px;
-      border: 1px solid #ccc;
-      background-color: #f9f9f9;
-      min-height: 40px;
-    }
-    .copy-button {
-      margin-top: 10px;
-    }
-  </style>
-</head>
-<body>
-<h1>IMEX IO Extractor</h1>
-<textarea id="inputText" placeholder="Paste your text here..."></textarea>
-<br>
-<button onclick="extractIO()">Extract</button>
-
-<div class="output-box" id="outputBox" contenteditable="true"></div>
-<button class="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
-
-<script>
-  function extractIO() {
-    const inputText = document.getElementById('inputText').value;
-    const ioNumbers = [...new Set(inputText.match(/IO-\d{4}/g))] // Extract unique IO-#### matches
-      .map(io => ({ io, num: parseInt(io.split('-')[1]) }))    // Extract number part for sorting
-      .sort((a, b) => a.num - b.num)                           // Sort by the number
-      .map(item => item.io);                                   // Extract sorted IO-####
-
-    document.getElementById('outputBox').innerText = ioNumbers.join(', '); // Display horizontally
-  }
-
-  function copyToClipboard() {
-    const outputBox = document.getElementById('outputBox');
-    const range = document.createRange();
-    range.selectNodeContents(outputBox);
-    const selection = window.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-    document.execCommand('copy');
-  }
-</script>
-</body>
-</html>

certs/id_rsa

@@ -1,27 +0,0 @@
------BEGIN OPENSSH PRIVATE KEY-----
-b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAABFwAAAAdzc2gtcn
-NhAAAAAwEAAQAAAQEAvNl5fuVmLNv72BZNxnTqX5CHf5Xi8UxjYaYxHITSCx7blnhpVYLd
-qXvcOWXzbsfjch/den73QiW4n2FYz75oGMhUGlOYzdWKA9I9Sj09Qy1R06RhwDiZGd5qaM
-swEeXpkNmi2u4Qd2kJeDfUQUigjC09V81O/vrniGtQAJScfiG/itdm+Ufn09Z4MYk0HWjq
-iDokNEskoEPsibYIrb+Q6vdtuPkZO+wU/smXhPtgw5ST6oQdmm/gVNsRg5XNzxrire+z1G
-WatnnVL3hPnnfpnf8W589dyms7GGJwhPerSGTN1bn0T4+9C69Cd7LBJtxiuFdRmdlGLLLP
-RR48Rur71wAAA9AEfVsdBH1bHQAAAAdzc2gtcnNhAAABAQC82Xl+5WYs2/vYFk3GdOpfkI
-d/leLxTGNhpjEchNILHtuWeGlVgt2pe9w5ZfNux+NyH916fvdCJbifYVjPvmgYyFQaU5jN
-1YoD0j1KPT1DLVHTpGHAOJkZ3mpoyzAR5emQ2aLa7hB3aQl4N9RBSKCMLT1XzU7++ueIa1
-AAlJx+Ib+K12b5R+fT1ngxiTQdaOqIOiQ0SySgQ+yJtgitv5Dq9224+Rk77BT+yZeE+2DD
-lJPqhB2ab+BU2xGDlc3PGuKt77PUZZq2edUveE+ed+md/xbnz13KazsYYnCE96tIZM3Vuf
-RPj70Lr0J3ssEm3GK4V1GZ2UYsss9FHjxG6vvXAAAAAwEAAQAAAQAQTosSLQbMmtY9S3e9
-yjyusdExcCTfhyQRu4MEHmfws+JsNMuLqbgwOVTD1AzYJQR7x0qdmDcLjCxL/uDnV16vvS
-Sd/Vf1dhnryIyoS29tzI0DRG94ZKq7tBvmHp1w/jRT4KcSVnovhW9e5Rs74+SRFhr06PKI
-S+wQOIv48Nwue9+QUMsMCpWgKXHx7SHNTHvnAfqdhi9O29SWlMA+v+mELZ5Cl+HU0UTt2I
-A1BxOe1N8FjN7KE2viJexsl3is1PuqMkpLl/wyHBJTVzUadl6DRALJQIm7/YO5goE72YOV
-Lpo27do3zjhC87dlKdATvZUzfKV0LuUVdxq/PNDZMUbBAAAAgQDShAqDZiDrdTUaGXfUVm
-QzcnVNbh2/KgZh4uux9QNHST562W6cnN7qxoRwVrM4BCOk1Kl73QQZW4nDvXX3PVC5j038
-8AXkcBHS9j9f4h72ue7D2jqlbHFa7aGU9zYgk9mbBF+GX3tDntkAIQjLtwOLfj1iiJ/clX
-mHFUAY1V4L8AAAAIEA3E4t/v0yU5D9AOI0r17UNYqfeyDoKAEDR4QbbFjO1l0kLnEJy7Zx
-Mhj18GilYg2y0P0v8dSM/oWXS8Hua2t5i9Exlv6gHhGlQ80mwYcVGIxewZ/pPeCPw0U+kt
-EKUjt09m9Oe7+6xHQsTBj9hY8/vqPmQwRalZFcLdhHiDiVKTcAAACBANtykaPXdVzEFx7D
-UOlsjVL7zM0EVOFXf9JJQ6BhazhmsEI2PYt3IpgGMo8cXkoUofAOIYjf421AabN1BqSO5J
-XTMxM0ZV3JmLLi804Mu9h1iFrVTBdLYOMJdc2VCo1EwHWpo9SXOyjxce/znvcIOU04aZhu
-TaPg816X+E+gw5JhAAAAFGRhdmVARGF2ZVJpY2hlci1JTUVYAQIDBAUG
------END OPENSSH PRIVATE KEY-----

certs/id_rsa.pub

@@ -1 +0,0 @@
-ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC82Xl+5WYs2/vYFk3GdOpfkId/leLxTGNhpjEchNILHtuWeGlVgt2pe9w5ZfNux+NyH916fvdCJbifYVjPvmgYyFQaU5jN1YoD0j1KPT1DLVHTpGHAOJkZ3mpoyzAR5emQ2aLa7hB3aQl4N9RBSKCMLT1XzU7++ueIa1AAlJx+Ib+K12b5R+fT1ngxiTQdaOqIOiQ0SySgQ+yJtgitv5Dq9224+Rk77BT+yZeE+2DDlJPqhB2ab+BU2xGDlc3PGuKt77PUZZq2edUveE+ed+md/xbnz13KazsYYnCE96tIZM3VufRPj70Lr0J3ssEm3GK4V1GZ2UYsss9FHjxG6vvX dave@DaveRicher-IMEX

client/index.html

@@ -2,9 +2,6 @@
 <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') { %>
@@ -17,7 +14,7 @@
   <meta name="theme-color" content="#1690ff"/>
   <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
   <!-- TODO:AIo Update the individual logos for each.-->
-  <link rel="apple-touch-icon" href="/logo192.png"/>
+  <link rel="apple-touch-icon" href="public/logo192.png"/>
   <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
   <!--
     manifest.json provides metadata used when your web app is installed on a
@@ -49,23 +46,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.json

@@ -8,38 +8,38 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
+    "@ant-design/pro-layout": "^7.20.0",
     "@apollo/client": "^3.11.8",
-    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/is-prop-valid": "^1.3.0",
     "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.36.2",
+    "@sentry/cli": "^2.36.1",
     "@sentry/react": "^7.114.0",
     "@splitsoftware/splitio-react": "^1.13.0",
     "@tanem/react-nprogress": "^5.0.51",
     "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "antd": "^5.20.6",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "autosize": "^6.0.1",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.12",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.13.2",
+    "firebase": "^10.13.1",
     "graphql": "^16.9.0",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.9",
+    "libphonenumber-js": "^1.11.8",
     "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.2",
+    "markerjs2": "^2.32.1",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.0.1",
     "object-hash": "^3.0.0",
@@ -47,7 +47,7 @@
     "query-string": "^9.1.0",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.14.1",
+    "react-big-calendar": "^1.13.4",
     "react-color": "^2.19.3",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
@@ -66,7 +66,7 @@
     "react-router-dom": "^6.26.2",
     "react-sticky": "^6.0.3",
     "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.10.4",
+    "react-virtuoso": "^4.10.3",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
@@ -74,17 +74,16 @@
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.79.3",
-    "socket.io-client": "^4.8.0",
+    "sass": "^1.78.0",
+    "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.13",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.6",
+    "userpilot": "^1.3.5",
     "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^3.5.2"
   },
   "scripts": {
-    "postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
     "build": "dotenvx run --env-file=.env.development.imex -- vite build",
@@ -134,7 +133,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.14.1",
+    "@dotenvx/dotenvx": "^1.14.0",
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/react": "^11.13.3",
     "@sentry/webpack-plugin": "^2.22.4",
@@ -147,16 +146,16 @@
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.12.0",
+    "memfs": "^4.11.1",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.7",
+    "vite": "^5.4.3",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-pwa": "^0.20.1",
     "vite-plugin-style-import": "^2.0.0",
     "workbox-window": "^7.1.0"
   }

client/src/App/App.container.jsx

@@ -2,6 +2,8 @@ import { ApolloProvider } from "@apollo/client";
 import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
+import dayjs from "../utils/day";
+import "dayjs/locale/en";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
@@ -17,6 +19,8 @@ if (import.meta.env.DEV) {
   Userpilot.initialize("NX-69145f08");
 }
 
+dayjs.locale("en");
+
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,

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

@@ -9,7 +9,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { exportPageLimit } from "../../utils/config";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
@@ -175,7 +175,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -8,7 +8,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
-import { exportPageLimit } from "../../utils/config";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
@@ -177,7 +177,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -1,18 +1,18 @@
 import { Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { exportPageLimit } from "../../utils/config";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
-import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { DateFormatter } from "../../utils/DateFormatter";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobMarkSelectedExported from "../jobs-mark-selected-exported/jobs-mark-selected-exported";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
@@ -201,7 +201,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "top" }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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, original_actual_price, create_ppc, ...il } = billline;
+      const { deductedfromlbr, inventories, jobline, ...il } = billline;
       delete il.__typename;
 
       if (il.id) {

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

@@ -7,10 +7,10 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -72,14 +72,7 @@ export function BillEnterModalLinesComponent({
           <BillLineSearchSelect
             disabled={disabled}
             options={lineData}
-            style={{
-              width: "20rem",
-              maxWidth: "20rem",
-              minWidth: "10rem",
-              whiteSpace: "normal",
-              height: "auto",
-              minHeight: "32px" // default height of Ant Design inputs
-            }}
+            style={{ width: "100%", minWidth: "10rem" }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
               setFieldsValue({
@@ -112,7 +105,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.line_desc"),
         dataIndex: "line_desc",
         editable: true,
-        width: "20rem",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}line_desc`,
@@ -126,7 +119,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => <Input.TextArea disabled={disabled} autoSize />
+        formInput: (record, index) => <Input disabled={disabled} />
       },
       {
         title: t("billlines.fields.quantity"),

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

@@ -11,7 +11,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
       disabled={disabled}
       ref={ref}
       showSearch
-      popupMatchSelectWidth={true}
+      popupMatchSelectWidth={false}
       optionLabelProp={"name"}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
@@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
             item.oem_partno ? ` - ${item.oem_partno}` : ""
           }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
           label: (
-            <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+            <>
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                   item.oem_partno ? ` - ${item.oem_partno}` : ""
@@ -57,7 +57,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
               <span style={{ float: "right", paddingleft: "1rem" }}>
                 {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
               </span>
-            </div>
+            </>
           )
         }))
       ]}

client/src/components/card-payment-modal/card-payment-modal.component..jsx

@@ -1,6 +1,6 @@
-import { DeleteFilled, CopyFilled } from "@ant-design/icons";
+import { DeleteFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, message, notification } from "antd";
+import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,12 +14,10 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
-import { getCurrentUser } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   cardPaymentModal: selectCardPayment,
-  bodyshop: selectBodyshop,
-  currentUser: getCurrentUser
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -27,17 +25,11 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment"))
 });
 
-const CardPaymentModalComponent = ({
-  bodyshop,
-  currentUser,
-  cardPaymentModal,
-  toggleModalVisible,
-  insertAuditTrail
-}) => {
+const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisible, insertAuditTrail }) => {
   const { context, actions } = cardPaymentModal;
 
   const [form] = Form.useForm();
-  const [paymentLink, setPaymentLink] = useState();
+
   const [loading, setLoading] = useState(false);
   // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
@@ -45,7 +37,7 @@ const CardPaymentModalComponent = ({
 
   const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
     variables: { jobids: [context.jobid] },
-    skip: !context?.jobid
+    skip: true
   });
 
   //Initialize the intellipay window.
@@ -59,7 +51,8 @@ const CardPaymentModalComponent = ({
       //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
       //Add a slight delay to allow the refetch to properly get the data.
       setTimeout(() => {
-        if (actions && actions.refetch && typeof actions.refetch === "function") actions.refetch();
+        if (actions && actions.refetch && typeof actions.refetch === "function")
+          actions.refetch();
         setLoading(false);
         toggleModalVisible();
       }, 750);
@@ -93,6 +86,7 @@ const CardPaymentModalComponent = ({
     });
   };
 
+
   const handleIntelliPayCharge = async () => {
     setLoading(true);
     //Validate
@@ -107,7 +101,7 @@ const CardPaymentModalComponent = ({
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
-        paymentSplitMeta: form.getFieldsValue()
+        paymentSplitMeta: form.getFieldsValue(),
       });
 
       if (window.intellipay) {
@@ -132,42 +126,6 @@ const CardPaymentModalComponent = ({
     }
   };
 
-  const handleIntelliPayChargeShortLink = async () => {
-    setLoading(true);
-    //Validate
-    try {
-      await form.validateFields();
-    } catch (error) {
-      setLoading(false);
-      return;
-    }
-
-    try {
-      const { payments } = form.getFieldsValue();
-      const response = await axios.post("/intellipay/generate_payment_url", {
-        bodyshop,
-        amount: payments?.reduce((acc, val) => {
-          return acc + (val?.amount || 0);
-        }, 0),
-        account: payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null,
-        comment: btoa(JSON.stringify({ payments, userEmail: currentUser.email })),
-        paymentSplitMeta: form.getFieldsValue()
-      });
-      if (response.data) {
-        setPaymentLink(response.data?.shorUrl);
-        navigator.clipboard.writeText(response.data?.shorUrl);
-        message.success(t("general.actions.copied"));
-      }
-      setLoading(false);
-    } catch (error) {
-      notification.open({
-        type: "error",
-        message: t("job_payments.notifications.error.openingip")
-      });
-      setLoading(false);
-    }
-  };
-
   return (
     <Card title="Card Payment">
       <Spin spinning={loading}>
@@ -244,14 +202,16 @@ const CardPaymentModalComponent = ({
 
           <Form.Item
             shouldUpdate={(prevValues, curValues) =>
-              prevValues.payments?.map((p) => p?.jobid + p?.amount).join() !==
-              curValues.payments?.map((p) => p?.jobid + p?.amount).join()
+              prevValues.payments?.map((p) => p?.jobid).join() !== curValues.payments?.map((p) => p?.jobid).join()
             }
           >
             {() => {
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
-              if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
+              if (
+                payments?.length > 0 &&
+                payments?.filter((p) => p?.jobid).length === payments?.length
+              ) {
                 refetch({ jobids: payments.map((p) => p.jobid) });
               }
               return (
@@ -286,6 +246,7 @@ const CardPaymentModalComponent = ({
               const totalAmountToCharge = payments?.reduce((acc, val) => {
                 return acc + (val?.amount || 0);
               }, 0);
+
               return (
                 <Space style={{ float: "right" }}>
                   <Statistic title="Amount To Charge" value={totalAmountToCharge} precision={2} />
@@ -312,36 +273,11 @@ const CardPaymentModalComponent = ({
                   >
                     {t("job_payments.buttons.proceedtopayment")}
                   </Button>
-                  <Space direction="vertical" align="center">
-                    <Button
-                      type="primary"
-                      //  data-ipayname="submit"
-                      className="ipayfield"
-                      loading={queryLoading || loading}
-                      disabled={!(totalAmountToCharge > 0)}
-                      onClick={handleIntelliPayChargeShortLink}
-                    >
-                      {t("job_payments.buttons.create_short_link")}
-                    </Button>
-                  </Space>
                 </Space>
               );
             }}
           </Form.Item>
         </Form>
-        {paymentLink && (
-          <Space
-            style={{ cursor: "pointer", float: "right" }}
-            align="end"
-            onClick={() => {
-              navigator.clipboard.writeText(paymentLink);
-              message.success(t("general.actions.copied"));
-            }}
-          >
-            <div>{paymentLink}</div>
-            <CopyFilled />
-          </Space>
-        )}
       </Spin>
     </Card>
   );

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

@@ -1,17 +1,15 @@
 import { WarningFilled } from "@ant-design/icons";
 import { Form, Input, InputNumber, Space } from "antd";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
-import dayjs from "../../utils/day";
 //import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import ContractsRatesChangeButton from "../contracts-rates-change-button/contracts-rates-change-button.component";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
-import {
-  default as DateTimePicker,
-  default as FormDateTimePicker
-} from "../form-date-time-picker/form-date-time-picker.component";
+import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -20,10 +18,10 @@ import ContractFormJobPrefill from "./contract-form-job-prefill.component";
 export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
   const { t } = useTranslation();
   return (
-    <>
-      {!create && <FormFieldsChanged form={form} />}
+    <div>
+      <FormFieldsChanged form={form} />
       <LayoutFormRow>
-        {!create && (
+        {create ? null : (
           <Form.Item
             label={t("contracts.fields.status")}
             name="status"
@@ -52,7 +50,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         <Form.Item label={t("contracts.fields.scheduledreturn")} name="scheduledreturn">
           <FormDateTimePicker />
         </Form.Item>
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
             <FormDateTimePicker />
           </Form.Item>
@@ -124,7 +122,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             }}
           </Form.Item>
         )}
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.kmend")} name="kmend">
             <InputNumber />
           </Form.Item>
@@ -147,21 +145,25 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         >
           <CourtesyCarFuelSlider />
         </Form.Item>
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.fuelin")} name="fuelin" span={8}>
             <CourtesyCarFuelSlider />
           </Form.Item>
         )}
       </LayoutFormRow>
-      <LayoutFormRow header={t("contracts.labels.driverinformation")}>
+      <div>
         <Space wrap>
-          {create && selectedJobState && (
-            <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+          {selectedJobState && (
+            <div>
+              <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+            </div>
           )}
-          {/* {<ContractLicenseDecodeButton form={form} />} */}
+          {
+            //<ContractLicenseDecodeButton form={form} />
+          }
         </Space>
-      </LayoutFormRow>
-      <LayoutFormRow noDivider={true}>
+      </div>
+      <LayoutFormRow header={t("contracts.labels.driverinformation")}>
         <Form.Item
           label={t("contracts.fields.driver_dlnumber")}
           name="driver_dlnumber"
@@ -181,8 +183,9 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             const dlExpiresBeforeReturn = dayjs(form.getFieldValue("driver_dlexpiry")).isBefore(
               dayjs(form.getFieldValue("scheduledreturn"))
             );
+
             return (
-              <>
+              <div>
                 <Form.Item
                   label={t("contracts.fields.driver_dlexpiry")}
                   name="driver_dlexpiry"
@@ -201,10 +204,11 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                     <span>{t("contracts.labels.dlexpirebeforereturn")}</span>
                   </Space>
                 )}
-              </>
+              </div>
             );
           }}
         </Form.Item>
+
         <Form.Item label={t("contracts.fields.driver_dlst")} name="driver_dlst">
           <Input />
         </Form.Item>
@@ -311,6 +315,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </>
+    </div>
   );
 }

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
 import { useMutation } from "@apollo/client";
 import { acceptEula } from "../../redux/user/user.actions";
 import { useTranslation } from "react-i18next";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 
 import "./eula.styles.scss";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
@@ -208,7 +208,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
               {
                 required: true,
                 validator: (_, value) => {
-                  if (dayjs(value).isSame(dayjs(), "day")) {
+                  if (day(value).isSame(day(), "day")) {
                     return Promise.resolve();
                   }
                   return Promise.reject(new Error(t("eula.messages.date_accepted")));

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

@@ -4,37 +4,19 @@ import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../utils/day";
 import { fuzzyMatchDate } from "./formats.js";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
-
-const DateTimePicker = ({
-  value,
-  onChange,
-  onBlur,
-  id,
-  onlyFuture,
-  onlyToday,
-  isDateOnly = false,
-  bodyshop,
-  ...restProps
-}) => {
+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) return;
       if (onChange) {
-        onChange(bodyshop?.timezone ? dayjs(newDate).tz(bodyshop.timezone, true) : newDate);
+        onChange(newDate || null);
       }
       setIsManualInput(false);
     },
-    [onChange, bodyshop?.timezone]
+    [onChange]
   );
 
   const handleBlur = useCallback(
@@ -120,4 +102,4 @@ DateTimePicker.propTypes = {
   isDateOnly: PropTypes.bool
 };
 
-export default connect(mapStateToProps, null)(DateTimePicker);
+export default React.memo(DateTimePicker);

client/src/components/global-search/global-search-os.component.jsx

@@ -3,15 +3,13 @@ import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function GlobalSearchOs() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(false);
 
@@ -179,18 +177,7 @@ export default function GlobalSearchOs() {
   };
 
   return (
-    <AutoComplete
-      options={data}
-      onSearch={handleSearch}
-      onKeyDown={(e) => {
-        if (e.key !== "Enter") return;
-        const firstUrlForSearch = data?.[0]?.options?.[0]?.label?.props?.to;
-        if (!firstUrlForSearch) return;
-        navigate(firstUrlForSearch);
-      }}
-      defaultActiveFirstOption
-      onClear={() => setData([])}
-    >
+    <AutoComplete options={data} onSearch={handleSearch} defaultActiveFirstOption onClear={() => setData([])}>
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

client/src/components/global-search/global-search.component.jsx

@@ -3,7 +3,7 @@ import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -13,7 +13,6 @@ import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.compon
 export default function GlobalSearch() {
   const { t } = useTranslation();
   const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
-  const navigate = useNavigate();
 
   const executeSearch = (v) => {
     if (v && v.variables.search && v.variables.search !== "" && v.variables.search.length >= 3) callSearch(v);
@@ -21,6 +20,7 @@ export default function GlobalSearch() {
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
   const handleSearch = (value) => {
+    console.log("Handle Search");
     debouncedExecuteSearch({ variables: { search: value } });
   };
 
@@ -156,17 +156,7 @@ export default function GlobalSearch() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <AutoComplete
-      options={options}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onKeyDown={(e) => {
-        if (e.key !== "Enter") return;
-        const firstUrlForSearch = options?.[0]?.options?.[0]?.label?.props?.to;
-        if (!firstUrlForSearch) return;
-        navigate(firstUrlForSearch);
-      }}
-    >
+    <AutoComplete options={options} onSearch={handleSearch} defaultActiveFirstOption>
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

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

@@ -116,15 +116,18 @@ function Header({
 
   const { t } = useTranslation();
 
-  // const deleteBetaCookie = () => {
-  //   const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
-  //   if (cookieExists) {
-  //     const domain = window.location.hostname.split(".").slice(-2).join(".");
-  //     document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
-  //   }
-  // };
-  //
-  // deleteBetaCookie();
+  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 = [];
 

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

@@ -23,7 +23,6 @@ import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
 import { useMutation } from "@apollo/client";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
-import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -128,9 +127,6 @@ export function ScheduleEventComponent({
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
           </DataLabel>
-          <DataLabel label={t("jobs.fields.comment")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-            <ProductionListColumnComment record={event && event.job} />
-          </DataLabel>
           <ScheduleEventNote event={event} />
         </div>
       ) : (
@@ -320,7 +316,6 @@ export function ScheduleEventComponent({
       })`}
 
       {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
-      {event?.job?.comment && `C: ${event.job.comment}`}
     </Space>
   ) : (
     <div

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 import axios from "axios";
 import { Badge, Card, Space, Table, Tag } from "antd";
 import { gql, useQuery } from "@apollo/client";
@@ -72,7 +72,7 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
       dataIndex: "start",
       key: "start",
       render: (text) => DateTimeFormatterFunction(text),
-      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix()
+      sorter: (a, b) => day(a.start).unix() - day(b.start).unix()
     },
     {
       title: t("job_lifecycle.columns.relative_start"),
@@ -90,7 +90,7 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
           }
           return isEmpty(a.end) ? 1 : -1;
         }
-        return dayjs(a.end).unix() - dayjs(b.end).unix();
+        return day(a.end).unix() - day(b.end).unix();
       },
       render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text))
     },

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 
 import { useMutation } from "@apollo/client";
 import { Button, Form, notification, Popover, Select, Space } from "antd";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -48,7 +48,7 @@ export function JobLineDispatchButton({
       const result = await dispatchLines({
         variables: {
           partsDispatch: {
-            dispatched_at: dayjs(),
+            dispatched_at: day(),
             employeeid: values.employeeid,
             jobid: job.id,
             dispatched_by: currentUser.email,
@@ -138,11 +138,7 @@ export function JobLineDispatchButton({
 
   return (
     <Popover open={visible} content={popMenu}>
-      <Button
-        disabled={selectedLines.length === 0 || jobRO || disabled}
-        loading={loading}
-        onClick={() => setVisible(true)}
-      >
+      <Button disabled={selectedLines.length === 0 || jobRO || disabled} loading={loading} onClick={() => setVisible(true)}>
         {t("joblines.actions.dispatchparts", { count: selectedLines.length })}
       </Button>
     </Popover>

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,8 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { notification } from "antd";
-import Axios from "axios";
-import Dinero from "dinero.js";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,10 +7,13 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_JOB_LINE, UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectJobLineEditModal } from "../../redux/modals/modals.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import CriticalPartsScan from "../../utils/criticalPartsScan";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
+import Axios from "axios";
+import Dinero from "dinero.js";
+import CriticalPartsScan from "../../utils/criticalPartsScan";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   jobLineEditModal: selectJobLineEditModal,
@@ -82,15 +82,13 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
         variables: {
           lineId: jobLineEditModal.context.id,
           line: {
-            ...UndefinedToNull({
-              ...values,
-              prt_dsmk_m: Dinero({
-                amount: Math.round(values.act_price * 100)
-              })
-                .percentage(Math.abs(values.prt_dsmk_p || 0))
-                .multiply(values.prt_dsmk_p >= 0 ? 1 : -1)
-                .toFormat(0.0)
+            ...values,
+            prt_dsmk_m: Dinero({
+              amount: Math.round(values.act_price * 100)
             })
+              .percentage(Math.abs(values.prt_dsmk_p || 0))
+              .multiply(values.prt_dsmk_p >= 0 ? 1 : -1)
+              .toFormat(0.0)
           }
         },
         refetchQueries: ["GET_LINE_TICKET_BY_PK"]

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

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

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

@@ -219,7 +219,7 @@ export function JobsExportAllButton({
   };
 
   return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled || jobIds?.length > 10}>
+    <Button onClick={handleQbxml} loading={loading} disabled={disabled}>
       {t("jobs.actions.exportselected")}
     </Button>
   );

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

@@ -250,8 +250,8 @@ export function JobsList({ bodyshop }) {
     },
     {
       title: t("jobs.labels.estimator"),
-      dataIndex: "estimator",
-      key: "estimator",
+      dataIndex: "jobs.labels.estimator",
+      key: "jobs.labels.estimator",
       ellipsis: true,
       responsive: ["xl"],
       sorter: (a, b) =>

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

@@ -1,6 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Col, notification, Row, Table } from "antd";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_PARTS_DISPATCH_LINE } from "../../graphql/parts-dispatch.queries";
@@ -11,7 +11,7 @@ export default function PartsDispatchExpander({ dispatch, job }) {
   const [updateDispatchLine] = useMutation(UPDATE_PARTS_DISPATCH_LINE);
 
   const handleAccept = async ({ partsDispatchLineId }) => {
-    const accepted_at = dayjs();
+    const accepted_at = day();
     const result = await updateDispatchLine({
       variables: { id: partsDispatchLineId, line: { accepted_at } },
       optimisticResponse: {

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

@@ -242,8 +242,7 @@ export function PartsOrderListTableComponent({
       title: t("general.labels.actions"),
       dataIndex: "actions",
       key: "actions",
-      render: (text, record) => recordActions(record, true),
-      id: "parts-order-list-table-actions"
+      render: (text, record) => recordActions(record, true)
     }
   ];
 

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

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

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

@@ -200,7 +200,7 @@ export function PayableExportAll({
     );
 
   return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled || billids?.length > 10}>
+    <Button onClick={handleQbxml} loading={loading} disabled={disabled}>
       {t("jobs.actions.exportselected")}
     </Button>
   );

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

@@ -180,7 +180,7 @@ export function PaymentsExportAllButton({
   };
 
   return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled || paymentIds?.length > 10}>
+    <Button onClick={handleQbxml} loading={loading} disabled={disabled}>
       {t("jobs.actions.exportselected")}
     </Button>
   );

client/src/components/payments-generate-link/payments-generate-link.component.jsx

@@ -8,12 +8,11 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  currentUser: selectCurrentUser
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -21,7 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(PaymentsGenerateLink);
 
-export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, openChatByPhone, setMessage }) {
+export function PaymentsGenerateLink({ bodyshop, callback, job, openChatByPhone, setMessage }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
 
@@ -31,35 +30,29 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
 
   const handleFinish = async ({ amount }) => {
     setLoading(true);
-    let p;
-    try {
-      p = parsePhoneNumber(job.ownr_ph1 || "", "CA");
-    } catch (error) {
-      console.log("Unable to parse phone number");
-    }
+
+    const p = parsePhoneNumber(job.ownr_ph1, "CA");
     setLoading(true);
     const response = await axios.post("/intellipay/generate_payment_url", {
       bodyshop,
       amount: amount,
       account: job.ro_number,
-      comment: btoa(JSON.stringify({ payments: [{ jobid: job.id, amount }], userEmail: currentUser.email }))
+      invoice: job.id
     });
     setLoading(false);
     setPaymentLink(response.data.shorUrl);
 
-    if (p) {
-      openChatByPhone({
-        phone_num: p.formatInternational(),
-        jobid: job.id
-      });
-      setMessage(
-        t("payments.labels.smspaymentreminder", {
-          shopname: bodyshop.shopname,
-          amount: amount,
-          payment_link: response.data.shorUrl
-        })
-      );
-    }
+    openChatByPhone({
+      phone_num: p.formatInternational(),
+      jobid: job.id
+    });
+    setMessage(
+      t("payments.labels.smspaymentreminder", {
+        shopname: bodyshop.shopname,
+        amount: amount,
+        payment_link: response.data.shorUrl
+      })
+    );
 
     //Add in confirmation & errors.
     if (callback) callback();

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

@@ -1,14 +1,13 @@
+import dayjs from "../../utils/day";
 import { SyncOutlined } from "@ant-design/icons";
-import { PageHeader } from "@ant-design/pro-layout";
 import { useApolloClient } from "@apollo/client";
+import Board from "./trello-board/index";
 import { Button, notification, Skeleton, Space } from "antd";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { PageHeader } from "@ant-design/pro-layout";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -17,13 +16,15 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
-import ProductionListPrint from "../production-list-table/production-list-print.component.jsx";
 import CardColorLegend from "./production-board-kanban-card-color-legend.component.jsx";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
-import { defaultFilters, mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
 import ProductionBoardKanbanSettings from "./settings/production-board-kanban.settings.component.jsx";
-import Board from "./trello-board/index";
+import cloneDeep from "lodash/cloneDeep";
+import isEqual from "lodash/isEqual";
+import { defaultFilters, mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
+import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -46,10 +47,136 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
   const [loading, setLoading] = useState(true);
   const [isMoving, setIsMoving] = useState(false);
   const [orientation, setOrientation] = useState("vertical");
+  const { socket } = useContext(SocketContext); // Access socket from the context
 
   const { t } = useTranslation();
   const client = useApolloClient();
 
+  const handleJobUpdated = useCallback(
+    (updatedJob) => {
+      setBoardLanes((prevBoardLanes) => {
+        const updatedLanes = cloneDeep(prevBoardLanes.lanes);
+
+        // Find the lane containing the card with the updated job ID
+        let sourceLane = updatedLanes.find((lane) => lane.cards.some((card) => card.id === updatedJob.id));
+
+        if (!sourceLane) {
+          console.log("Card not found in any lane. Checking for valid status to add it.");
+
+          // Find the target lane based on the new status if the card does not exist
+          const targetLane = updatedLanes.find((lane) => lane.id === updatedJob.status);
+
+          if (targetLane && updatedJob.isInProduction) {
+            // Check if job is in production and status is valid
+            console.log(`Adding card to lane ${targetLane.title}`);
+
+            // Add the new card to the target lane
+            const newCard = {
+              id: updatedJob.id,
+              metadata: { ...updatedJob }
+            };
+            targetLane.cards.push(newCard);
+
+            // Update the lane title with the new card count
+            targetLane.title = `${targetLane.title.split(" ")[0]} (${targetLane.cards.length})`;
+
+            return { lanes: updatedLanes }; // Return early since the card is added
+          } else {
+            console.error("No valid lane or status to add the job to.");
+            return prevBoardLanes; // Return the previous state if no valid status or lane
+          }
+        }
+
+        // If the card exists, find it in the source lane
+        const cardIndex = sourceLane.cards.findIndex((card) => card.id === updatedJob.id);
+        const currentCard = sourceLane.cards[cardIndex];
+
+        // If we somehow can't find the card, return
+        if (!currentCard) {
+          console.error("Card not found for the updated job.");
+          return prevBoardLanes; // Return the previous state if the card is not found
+        }
+
+        // Iterate through the properties of updatedJob and update the corresponding values in currentCard.metadata
+        Object.keys(updatedJob).forEach((key) => {
+          // Normalize date fields by comparing their ISO strings or timestamps
+          if (key === "updated_at") {
+            const currentCardDate = dayjs(currentCard.metadata[key]).toISOString();
+            const updatedJobDate = dayjs(updatedJob[key]).toISOString();
+
+            if (currentCardDate !== updatedJobDate) {
+              console.log(`Updating ${key} from ${currentCardDate} to ${updatedJobDate}`);
+              currentCard.metadata[key] = updatedJob[key]; // Assign the new value if different
+            }
+          } else if (key in currentCard.metadata && currentCard.metadata[key] !== updatedJob[key]) {
+            console.log(`Updating ${key} from ${currentCard.metadata[key]} to ${updatedJob[key]}`);
+            currentCard.metadata[key] = updatedJob[key];
+          }
+        });
+
+        // Mark that data has been changed if any field was updated
+        const isDataChanged = !isEqual(currentCard.metadata, updatedJob);
+
+        // Check if the lane (status) has changed
+        const isLaneChanged = updatedJob.status !== sourceLane.id;
+
+        // Case 1: Both data and lane have changed
+        if (isDataChanged && isLaneChanged) {
+          console.log("Case 1: Data and Lane Changed");
+
+          // Remove the card from the source lane
+          const [cardToMove] = sourceLane.cards.splice(cardIndex, 1);
+
+          // Find the target lane based on the new status
+          const targetLane = updatedLanes.find((lane) => lane.id === updatedJob.status);
+          if (targetLane) {
+            targetLane.cards.push({ ...cardToMove, metadata: { ...currentCard.metadata } });
+            sourceLane.title = `${sourceLane.title.split(" ")[0]} (${sourceLane.cards.length})`;
+            targetLane.title = `${targetLane.title.split(" ")[0]} (${targetLane.cards.length})`;
+          } else {
+            console.error("Target lane not found for the updated job.");
+          }
+        }
+        // Case 2: Only data has changed
+        else if (isDataChanged && !isLaneChanged) {
+          console.log("Case 2: Only Data Changed");
+          sourceLane.cards[cardIndex] = { ...currentCard, metadata: { ...currentCard.metadata } };
+        }
+        // Case 3: Only the lane has changed
+        else if (!isDataChanged && isLaneChanged) {
+          console.log("Case 3: Only Lane Changed");
+
+          // Remove the card from the source lane
+          const [cardToMove] = sourceLane.cards.splice(cardIndex, 1);
+
+          // Find the target lane based on the new status
+          const targetLane = updatedLanes.find((lane) => lane.id === updatedJob.status);
+          if (targetLane) {
+            targetLane.cards.push(cardToMove);
+            sourceLane.title = `${sourceLane.title.split(" ")[0]} (${sourceLane.cards.length})`;
+            targetLane.title = `${targetLane.title.split(" ")[0]} (${targetLane.cards.length})`;
+          } else {
+            console.error("Target lane not found for the updated job.");
+          }
+        }
+
+        return { lanes: updatedLanes };
+      });
+    },
+    [setBoardLanes]
+  );
+
+  useEffect(() => {
+    // Listen for the job-updated event from the socket
+    if (socket) {
+      socket.on("job-updated", handleJobUpdated);
+
+      return () => {
+        socket.off("job-updated", handleJobUpdated);
+      };
+    }
+  }, [socket, handleJobUpdated]);
+
   useEffect(() => {
     if (associationSettings) {
       setLoading(true);
@@ -186,7 +313,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
   const cardSettings = useMemo(() => {
     const kanbanSettings = associationSettings?.kanban_settings;
     return mergeWithDefaults(kanbanSettings);
-  }, [associationSettings?.kanban_settings]);
+  }, [associationSettings]);
 
   const handleSettingsChange = () => {
     setFilter(defaultFilters);
@@ -215,7 +342,6 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
               bodyshop={bodyshop}
               data={data}
             />
-            <ProductionListPrint />
           </Space>
         }
       />

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

@@ -1,40 +1,18 @@
-import React, { useContext, useEffect, useMemo, useRef } from "react";
-import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import React, { useEffect, useMemo } from "react";
+import { useQuery, useSubscription } from "@apollo/client";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import {
-  QUERY_EXACT_JOB_IN_PRODUCTION,
-  QUERY_JOBS_IN_PRODUCTION,
-  SUBSCRIPTION_JOBS_IN_PRODUCTION,
-  SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW
-} from "../../graphql/jobs.queries";
+import { QUERY_JOBS_IN_PRODUCTION, SUBSCRIPTION_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
 import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ProductionBoardKanbanComponent from "./production-board-kanban.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser
 });
 
-function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionType = "direct" }) {
-  const fired = useRef(false);
-  const client = useApolloClient();
-  const { socket } = useContext(SocketContext); // Get the socket from context
-  const reconnectTimeout = useRef(null); // To store the reconnect timeout
-  const disconnectTime = useRef(null); // To track disconnection time
-  const acceptableReconnectTime = 2000; // 2 seconds threshold
-
-  const {
-    treatments: { Websocket_Production }
-  } = useSplitTreatments({
-    attributes: {},
-    names: ["Websocket_Production"],
-    splitKey: bodyshop && bodyshop.imexshopid
-  });
-
+function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
   const combinedStatuses = useMemo(
     () => [
       ...bodyshop.md_ro_statuses.production_statuses,
@@ -50,127 +28,27 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionTyp
     onError: (error) => console.error(`Error fetching jobs in production: ${error.message}`)
   });
 
-  const subscriptionEnabled = Websocket_Production?.treatment === "off";
-
-  const { data: updatedJobs } = useSubscription(
-    subscriptionType === "view" ? SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW : SUBSCRIPTION_JOBS_IN_PRODUCTION,
-    {
-      skip: !subscriptionEnabled,
-      onError: (error) => console.error(`Error subscribing to jobs in production: ${error.message}`)
-    }
-  );
+  // const { data: updatedJobs } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION, {
+  //   onError: (error) => console.error(`Error subscribing to jobs in production: ${error.message}`)
+  // });
 
   const { loading: associationSettingsLoading, data: associationSettings } = useQuery(QUERY_KANBAN_SETTINGS, {
     variables: { email: currentUser.email },
     onError: (error) => console.error(`Error fetching Kanban settings: ${error.message}`)
   });
 
-  useEffect(() => {
-    if (subscriptionEnabled) {
-      if (!updatedJobs) {
-        return;
-      }
-      if (!fired.current) {
-        fired.current = true;
-        return;
-      }
-      refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`));
-    }
-  }, [updatedJobs, refetch, subscriptionEnabled]);
+  // This provides us the current version of the Lanes from the Redux store
+  // const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
 
-  // Socket.IO implementation for users with Split treatment "off"
-  useEffect(() => {
-    if (subscriptionEnabled || !socket || !bodyshop || !bodyshop.id) {
-      return;
-    }
-
-    const handleJobUpdates = async (jobChangedData) => {
-      const jobId = jobChangedData.id;
-
-      // Access the existing cache for QUERY_JOBS_IN_PRODUCTION
-      const existingJobsCache = client.readQuery({
-        query: QUERY_JOBS_IN_PRODUCTION
-      });
-
-      const existingJobs = existingJobsCache?.jobs || [];
-
-      // Check if the job already exists in the cached jobs
-      const existingJob = existingJobs.find((job) => job.id === jobId);
-
-      if (existingJob) {
-        // If the job exists, we update the cache without making any additional queries
-        client.writeQuery({
-          query: QUERY_JOBS_IN_PRODUCTION,
-          data: {
-            jobs: existingJobs.map((job) =>
-              job.id === jobId ? { ...existingJob, ...jobChangedData, __typename: "jobs" } : job
-            )
-          }
-        });
-      } else {
-        // If the job doesn't exist, fetch it from the server and then add it to the cache
-        try {
-          const { data: jobData } = await client.query({
-            query: QUERY_EXACT_JOB_IN_PRODUCTION,
-            variables: { id: jobId },
-            fetchPolicy: "network-only"
-          });
-
-          // Add the job to the existing cached jobs
-          client.writeQuery({
-            query: QUERY_JOBS_IN_PRODUCTION,
-            data: {
-              jobs: [...existingJobs, { ...jobData.job, __typename: "jobs" }]
-            }
-          });
-        } catch (error) {
-          console.error(`Error fetching job ${jobId}: ${error.message}`);
-        }
-      }
-    };
-
-    const handleDisconnect = () => {
-      // Capture the disconnection time
-      disconnectTime.current = Date.now();
-    };
-
-    const handleReconnect = () => {
-      const reconnectTime = Date.now();
-      const disconnectionDuration = reconnectTime - disconnectTime.current;
-
-      // Only refetch if disconnection was longer than the acceptable reconnect time
-      if (disconnectionDuration >= acceptableReconnectTime) {
-        if (!reconnectTimeout.current) {
-          reconnectTimeout.current = setTimeout(() => {
-            const randomDelay = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000; // Random delay between 10 and 30 seconds
-            setTimeout(() => {
-              if (refetch) refetch().catch((err) => console.error(`Issue `));
-              reconnectTimeout.current = null; // Clear the timeout reference after refetch
-            }, randomDelay);
-          }, acceptableReconnectTime);
-        }
-      }
-    };
-
-    // Listen for 'job-changed', 'disconnect', and 'connect' events
-    socket.on("production-job-updated", handleJobUpdates);
-    socket.on("disconnect", handleDisconnect);
-    socket.on("connect", handleReconnect);
-
-    // Clean up on unmount or when dependencies change
-    return () => {
-      socket.off("production-job-updated", handleJobUpdates);
-      socket.off("disconnect", handleDisconnect);
-      socket.off("connect", handleReconnect);
-      if (reconnectTimeout.current) {
-        clearTimeout(reconnectTimeout.current);
-      }
-    };
-  }, [subscriptionEnabled, socket, bodyshop, client, refetch]);
+  // useEffect(() => {
+  //   if (updatedJobs && data) {
+  //     refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`));
+  //   }
+  // }, [updatedJobs, data, refetch]);
 
   const filteredAssociationSettings = useMemo(() => {
     return associationSettings?.associations[0] || null;
-  }, [associationSettings?.associations]);
+  }, [associationSettings]);
 
   return (
     <ProductionBoardKanbanComponent

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

@@ -17,6 +17,7 @@
   border-radius: 5px 5px 0 0;
 }
 
+
 .production-alert {
   background: transparent;
   border: none;
@@ -69,8 +70,3 @@
     }
   }
 }
-
-.clone.is-dragging .ant-card {
-  border: #1890ff 2px solid !important;
-  border-radius: 12px;
-}

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

@@ -1,66 +1,15 @@
-import InstanceRenderManager from "../../../utils/instanceRenderMgr.js";
-
 const statisticsItems = [
   { id: 0, name: "totalHrs", label: "total_hours_in_production" },
   { id: 1, name: "totalAmountInProduction", label: "total_amount_in_production" },
   { id: 2, name: "totalLAB", label: "total_lab_in_production" },
   { id: 3, name: "totalLAR", label: "total_lar_in_production" },
   { id: 4, name: "jobsInProduction", label: "jobs_in_production" },
-
-  {
-    id: 5,
-    name: "totalHrsOnBoard",
-    label: InstanceRenderManager({
-      imex: "total_hours_in_view",
-      rome: "total_hours_on_board",
-      promanager: "total_hours_on_board"
-    })
-  },
-  {
-    id: 6,
-    name: "totalAmountOnBoard",
-    label: InstanceRenderManager({
-      imex: "total_amount_in_view",
-      rome: "total_amount_on_board",
-      promanager: "total_amount_on_board"
-    })
-  },
-  {
-    id: 7,
-    name: "totalLABOnBoard",
-    label: InstanceRenderManager({
-      imex: "total_lab_in_view",
-      rome: "total_lab_on_board",
-      promanager: "total_lab_on_board"
-    })
-  },
-  {
-    id: 8,
-    name: "totalLAROnBoard",
-    label: InstanceRenderManager({
-      imex: "total_lar_in_view",
-      rome: "total_lar_on_board",
-      promanager: "total_lar_on_board"
-    })
-  },
-  {
-    id: 9,
-    name: "jobsOnBoard",
-    label: InstanceRenderManager({
-      imex: "total_jobs_in_view",
-      rome: "total_jobs_on_board",
-      promanager: "total_jobs_on_board"
-    })
-  },
-  {
-    id: 10,
-    name: "tasksOnBoard",
-    label: InstanceRenderManager({
-      imex: "tasks_in_view",
-      rome: "tasks_on_board",
-      promanager: "tasks_on_board"
-    })
-  },
+  { id: 5, name: "totalHrsOnBoard", label: "total_hours_on_board" },
+  { id: 6, name: "totalAmountOnBoard", label: "total_amount_on_board" },
+  { id: 7, name: "totalLABOnBoard", label: "total_lab_on_board" },
+  { id: 8, name: "totalLAROnBoard", label: "total_lar_on_board" },
+  { id: 9, name: "jobsOnBoard", label: "total_jobs_on_board" },
+  { id: 10, name: "tasksOnBoard", label: "tasks_on_board" },
   { id: 11, name: "tasksInProduction", label: "tasks_in_production" }
 ];
 

client/src/components/production-board-kanban/trello-board/dnd/lib/state/get-droppable-over.js

@@ -25,8 +25,8 @@ function getFurthestAway({ pageBorderBox, draggable, candidates }) {
       const axis = candidate.axis;
       const target = patch(
         candidate.axis.line,
-        // use the center of the list on the main axis
-        candidate.page.borderBox.center[axis.line],
+        // use the current center of the dragging item on the main axis
+        pageBorderBox.center[axis.line],
         // use the center of the list on the cross axis
         candidate.page.borderBox.center[axis.crossAxisLine]
       );

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-droppable-publisher/get-closest-scrollable.js

@@ -5,7 +5,6 @@ import getBodyElement from "../get-body-element";
 const isEqual = (base) => (value) => base === value;
 const isScroll = isEqual("scroll");
 const isAuto = isEqual("auto");
-const isOverlay = isEqual("overlay");
 const isVisible = isEqual("visible");
 const isEither = (overflow, fn) => fn(overflow.overflowX) || fn(overflow.overflowY);
 const isBoth = (overflow, fn) => fn(overflow.overflowX) && fn(overflow.overflowY);
@@ -15,7 +14,7 @@ const isElementScrollable = (el) => {
     overflowX: style.overflowX,
     overflowY: style.overflowY
   };
-  return isEither(overflow, isScroll) || isEither(overflow, isAuto) || isEither(overflow, isOverlay);
+  return isEither(overflow, isScroll) || isEither(overflow, isAuto);
 };
 
 // Special case for a body element

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/find-closest-draggable-id-from-event.js

@@ -8,7 +8,7 @@ function getSelector(contextId) {
   return `[${attributes.dragHandle.contextId}="${contextId}"]`;
 }
 
-export function findClosestDragHandleFromEvent(contextId, event) {
+function findClosestDragHandleFromEvent(contextId, event) {
   const target = event.target;
   if (!isElement(target)) {
     warning("event.target must be a Element");

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/sensors/use-touch-sensor.js

@@ -240,14 +240,11 @@ export default function useTouchSensor(api) {
           y: clientY
         };
 
-        const handle = api.findClosestDragHandle(event);
-        invariant(handle, "Touch sensor unable to find drag handle");
-
         // unbind this event handler
         unbindEventsRef.current();
 
         // eslint-disable-next-line no-use-before-define
-        startPendingDrag(actions, point, handle);
+        startPendingDrag(actions, point);
       }
     }),
     // not including stop or startPendingDrag as it is not defined initially
@@ -291,7 +288,7 @@ export default function useTouchSensor(api) {
     }
   }, [stop]);
   const bindCapturingEvents = useCallback(
-    function bindCapturingEvents(target) {
+    function bindCapturingEvents() {
       const options = {
         capture: true,
         passive: false
@@ -310,7 +307,7 @@ export default function useTouchSensor(api) {
       // Old behaviour:
       // https://gist.github.com/parris/dda613e3ae78f14eb2dc9fa0f4bfce3d
       // https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed
-      const unbindTarget = bindEvents(target, getHandleBindings(args), options);
+      const unbindTarget = bindEvents(window, getHandleBindings(args), options);
       const unbindWindow = bindEvents(window, getWindowBindings(args), options);
       unbindEventsRef.current = function unbindAll() {
         unbindTarget();
@@ -333,7 +330,7 @@ export default function useTouchSensor(api) {
     [getPhase, setPhase]
   );
   const startPendingDrag = useCallback(
-    function startPendingDrag(actions, point, target) {
+    function startPendingDrag(actions, point) {
       invariant(getPhase().type === "IDLE", "Expected to move from IDLE to PENDING drag");
       const longPressTimerId = setTimeout(startDragging, timeForLongPress);
       setPhase({
@@ -342,7 +339,7 @@ export default function useTouchSensor(api) {
         actions,
         longPressTimerId
       });
-      bindCapturingEvents(target);
+      bindCapturingEvents();
     },
     [bindCapturingEvents, getPhase, setPhase, startDragging]
   );

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/use-sensor-marshal.js

@@ -23,9 +23,7 @@ import getBorderBoxCenterPosition from "../get-border-box-center-position";
 import { warning } from "../../dev-warning";
 import useLayoutEffect from "../use-isomorphic-layout-effect";
 import { noop } from "../../empty";
-import findClosestDraggableIdFromEvent, {
-  findClosestDragHandleFromEvent
-} from "./find-closest-draggable-id-from-event";
+import findClosestDraggableIdFromEvent from "./find-closest-draggable-id-from-event";
 import findDraggable from "../get-elements/find-draggable";
 import bindEvents from "../event-bindings/bind-events";
 
@@ -341,9 +339,6 @@ export default function useSensorMarshal({ contextId, store, registry, customSen
       }),
     [contextId, lockAPI, registry, store]
   );
-
-  const findClosestDragHandle = useCallback((event) => findClosestDragHandleFromEvent(contextId, event), [contextId]);
-
   const findClosestDraggableId = useCallback((event) => findClosestDraggableIdFromEvent(contextId, event), [contextId]);
   const findOptionsForDraggable = useCallback(
     (id) => {
@@ -375,18 +370,9 @@ export default function useSensorMarshal({ contextId, store, registry, customSen
       findClosestDraggableId,
       findOptionsForDraggable,
       tryReleaseLock,
-      isLockClaimed,
-      findClosestDragHandle
+      isLockClaimed
     }),
-    [
-      canGetLock,
-      tryGetLock,
-      findClosestDraggableId,
-      findOptionsForDraggable,
-      tryReleaseLock,
-      isLockClaimed,
-      findClosestDragHandle
-    ]
+    [canGetLock, tryGetLock, findClosestDraggableId, findOptionsForDraggable, tryReleaseLock, isLockClaimed]
   );
 
   // Bad ass

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-style-marshal/get-styles.js

@@ -83,13 +83,7 @@ const getFinalStyles = (contextId) => {
     return {
       selector: getSelector(attributes.draggable.contextId),
       styles: {
-        dragging: `
-          ${transition}
-          user-select: none;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-        `,
+        dragging: transition,
         dropAnimating: transition,
         userCancel: transition
       }

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-style-marshal/use-style-marshal.js

@@ -67,9 +67,7 @@ export default function useStyleMarshal(contextId, nonce) {
       const remove = (ref) => {
         const current = ref.current;
         invariant(current, "Cannot unmount ref as it is not set");
-        if (getHead().contains(current)) {
-          getHead().removeChild(current);
-        }
+        getHead().removeChild(current);
         ref.current = null;
       };
       remove(alwaysRef);

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

@@ -298,16 +298,6 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       ellipsis: true,
       sorter: (a, b) => statusSort(a.status, b.status, activeStatuses),
       sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      filters:
-        activeStatuses
-          ?.map((s) => {
-            return {
-              text: s || "No Status*",
-              value: [s]
-            };
-          })
-          .sort((a, b) => statusSort(a.text, b.text, activeStatuses)) || [],
-      onFilter: (value, record) => value.includes(record.status),
       render: (text, record) => <ProductionListColumnStatus record={record} />
     },
     {

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

@@ -21,26 +21,25 @@ export function ProductionListColumnStatus({ record, bodyshop, insertAuditTrail
   const [loading, setLoading] = useState(false);
 
   const handleSetStatus = async (e) => {
-    if (bodyshop.md_ro_statuses.production_statuses.includes(record.status) && !bodyshop.md_ro_statuses.post_production_statuses.includes(record.status)) {
-      logImEXEvent("production_change_status");
-      //    e.stopPropagation();
-      setLoading(true);
-      const { key } = e;
-      await updateJob({
-        variables: {
-          jobId: record.id,
-          job: {
-            status: key
-          }
+    logImEXEvent("production_change_status");
+    //    e.stopPropagation();
+    setLoading(true);
+    const { key } = e;
+    await updateJob({
+      variables: {
+        jobId: record.id,
+        job: {
+          status: key
         }
-      });
-      insertAuditTrail({
-        jobid: record.id,
-        operation: AuditTrailMapping.jobstatuschange(key),
-        type: "jobstatuschange"
-      });
-      setLoading(false);
-    }
+      }
+    });
+    insertAuditTrail({
+      jobid: record.id,
+      operation: AuditTrailMapping.jobstatuschange(key),
+      type: "jobstatuschange"
+    });
+
+    setLoading(false);
   };
 
   const menu = {

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

@@ -457,42 +457,41 @@ export function ProductionListConfigManager({
           value={activeView}
           disabled={open || isAddingNewProfile} // Disable the Select box when the popover is open or adding a new profile
         >
-          {bodyshop?.production_config &&
-            bodyshop.production_config
-              .slice()
-              .sort((a, b) =>
-                a.name === t("production.constants.main_profile")
-                  ? -1
-                  : b.name === t("production.constants.main_profile")
-                    ? 1
-                    : 0
-              ) //
-              .map((config) => (
-                <Select.Option key={config.name} label={config.name}>
-                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                    <span
-                      style={{
-                        flex: 1,
-                        maxWidth: "80%",
-                        marginRight: "1rem",
-                        textOverflow: "ellipsis"
-                      }}
+          {bodyshop.production_config
+            .slice()
+            .sort((a, b) =>
+              a.name === t("production.constants.main_profile")
+                ? -1
+                : b.name === t("production.constants.main_profile")
+                  ? 1
+                  : 0
+            ) //
+            .map((config) => (
+              <Select.Option key={config.name} label={config.name}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                  <span
+                    style={{
+                      flex: 1,
+                      maxWidth: "80%",
+                      marginRight: "1rem",
+                      textOverflow: "ellipsis"
+                    }}
+                  >
+                    {config.name}
+                  </span>
+                  {config.name !== t("production.constants.main_profile") && (
+                    <Popconfirm
+                      placement="right"
+                      title={t("general.labels.areyousure")}
+                      onConfirm={() => handleTrash(config.name)}
+                      onCancel={(e) => e.stopPropagation()}
                     >
-                      {config.name}
-                    </span>
-                    {config.name !== t("production.constants.main_profile") && (
-                      <Popconfirm
-                        placement="right"
-                        title={t("general.labels.areyousure")}
-                        onConfirm={() => handleTrash(config.name)}
-                        onCancel={(e) => e.stopPropagation()}
-                      >
-                        <DeleteOutlined onClick={(e) => e.stopPropagation()} />
-                      </Popconfirm>
-                    )}
-                  </div>
-                </Select.Option>
-              ))}
+                      <DeleteOutlined onClick={(e) => e.stopPropagation()} />
+                    </Popconfirm>
+                  )}
+                </div>
+              </Select.Option>
+            ))}
           <Select.Option key="add_new" label={t("production.labels.addnewprofile")}>
             <div style={{ display: "flex", alignItems: "center" }}>
               <PlusOutlined style={{ marginRight: "0.5rem" }} />

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

@@ -51,8 +51,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
 
   const initialColumnsRef = useRef(
     (initialStateRef.current &&
-      bodyshop?.production_config
-        ?.find((p) => p.name === defaultView)
+      bodyshop.production_config
+        .find((p) => p.name === defaultView)
         ?.columns.columnKeys.map((k) => {
           return {
             ...ProductionListColumns({
@@ -76,7 +76,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
   const { t } = useTranslation();
 
   const matchingColumnConfig = useMemo(() => {
-    return bodyshop?.production_config?.find((p) => p.name === defaultView);
+    return bodyshop.production_config.find((p) => p.name === defaultView);
   }, [bodyshop.production_config, defaultView]);
 
   useEffect(() => {

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

@@ -1,54 +1,24 @@
 import { useApolloClient, useQuery, useSubscription } from "@apollo/client";
-import React, { useContext, useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import {
   QUERY_EXACT_JOB_IN_PRODUCTION,
   QUERY_EXACT_JOBS_IN_PRODUCTION,
   QUERY_JOBS_IN_PRODUCTION,
-  SUBSCRIPTION_JOBS_IN_PRODUCTION,
-  SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW
+  SUBSCRIPTION_JOBS_IN_PRODUCTION
 } from "../../graphql/jobs.queries";
 import ProductionListTable from "./production-list-table.component";
 import _ from "lodash";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
-export default function ProductionListTableContainer({ bodyshop, subscriptionType = "direct" }) {
-  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
-  const [joblist, setJoblist] = useState([]);
-  const reconnectTimeout = useRef(null); // To store the reconnect timeout
-  const disconnectTime = useRef(null); // To store the time of disconnection
-
-  const acceptableReconnectTime = 2000; // 2 seconds threshold
-
-  // Get Split treatment
-  const {
-    treatments: { Websocket_Production }
-  } = useSplitTreatments({
-    attributes: {},
-    names: ["Websocket_Production"],
-    splitKey: bodyshop && bodyshop.imexshopid
-  });
-
-  // Determine if subscription is enabled
-  const subscriptionEnabled = Websocket_Production?.treatment === "off";
-
-  // Use GraphQL query
+export default function ProductionListTableContainer() {
   const { refetch, loading, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
     pollInterval: 3600000,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+  const client = useApolloClient();
+  const [joblist, setJoblist] = useState([]);
+  const { data: updatedJobs } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION);
 
-  // Use GraphQL subscription when subscription is enabled
-  const { data: updatedJobs } = useSubscription(
-    subscriptionType === "view" ? SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW : SUBSCRIPTION_JOBS_IN_PRODUCTION,
-    {
-      skip: !subscriptionEnabled
-    }
-  );
-
-  // Update joblist when data changes
   useEffect(() => {
     if (!(data && data.jobs)) return;
     setJoblist(
@@ -58,134 +28,34 @@ export default function ProductionListTableContainer({ bodyshop, subscriptionTyp
     );
   }, [data]);
 
-  // Handle updates from GraphQL subscription
   useEffect(() => {
-    if (subscriptionEnabled) {
-      if (!updatedJobs || joblist.length === 0) return;
+    if (!updatedJobs || joblist.length === 0) return;
 
-      const jobDiff = _.differenceWith(
-        joblist,
-        updatedJobs.jobs,
-        (a, b) => a.id === b.id && a.updated_at === b.updated_at
-      );
+    const jobDiff = _.differenceWith(
+      joblist,
+      updatedJobs.jobs,
+      (a, b) => a.id === b.id && a.updated_at === b.updated_at
+    );
 
-      if (jobDiff.length > 1) {
-        getUpdatedJobsData(jobDiff.map((j) => j.id));
-      } else if (jobDiff.length === 1) {
-        jobDiff.forEach((job) => {
-          getUpdatedJobData(job.id);
-        });
-      }
-
-      setJoblist(updatedJobs.jobs);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updatedJobs, subscriptionEnabled]);
-
-  // Handle updates from Socket.IO when subscription is disabled
-  useEffect(() => {
-    if (subscriptionEnabled || !socket || !bodyshop || !bodyshop.id) {
-      return;
-    }
-
-    const handleJobUpdates = async (jobChangedData) => {
-      const jobId = jobChangedData.id;
-
-      // Access the existing cache for QUERY_JOBS_IN_PRODUCTION
-      const existingJobsCache = client.readQuery({
-        query: QUERY_JOBS_IN_PRODUCTION
+    if (jobDiff.length > 1) {
+      getUpdatedJobsData(jobDiff.map((j) => j.id));
+    } else if (jobDiff.length === 1) {
+      jobDiff.forEach((job) => {
+        getUpdatedJobData(job.id);
       });
+    }
 
-      const existingJobs = existingJobsCache?.jobs || [];
+    setJoblist(updatedJobs.jobs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updatedJobs]);
 
-      // Check if the job already exists in the cached jobs
-      const existingJob = existingJobs.find((job) => job.id === jobId);
-
-      if (existingJob) {
-        // If the job exists, we update the cache without making any additional queries
-        client.writeQuery({
-          query: QUERY_JOBS_IN_PRODUCTION,
-          data: {
-            jobs: existingJobs.map((job) =>
-              job.id === jobId ? { ...existingJob, ...jobChangedData, __typename: "jobs" } : job
-            )
-          }
-        });
-      } else {
-        // If the job doesn't exist, fetch it from the server and then add it to the cache
-        try {
-          const { data: jobData } = await client.query({
-            query: QUERY_EXACT_JOB_IN_PRODUCTION,
-            variables: { id: jobId },
-            fetchPolicy: "network-only"
-          });
-
-          // Add the job to the existing cached jobs
-          client.writeQuery({
-            query: QUERY_JOBS_IN_PRODUCTION,
-            data: {
-              jobs: [...existingJobs, { ...jobData.job, __typename: "jobs" }]
-            }
-          });
-        } catch (error) {
-          console.error(`Error fetching job ${jobId}: ${error.message}`);
-        }
-      }
-    };
-
-    const handleDisconnect = () => {
-      // Capture the time when the disconnection happens
-      disconnectTime.current = Date.now();
-    };
-
-    const handleReconnect = () => {
-      // Calculate how long the disconnection lasted
-      const reconnectTime = Date.now();
-      const disconnectionDuration = reconnectTime - disconnectTime.current;
-
-      // If disconnection lasted less than acceptable reconnect time, do nothing
-      if (disconnectionDuration < acceptableReconnectTime) {
-        return;
-      }
-
-      // Schedule a refetch with a random delay between 10 and 30 seconds
-      if (!reconnectTimeout.current) {
-        reconnectTimeout.current = setTimeout(() => {
-          const randomDelay = Math.floor(Math.random() * (30000 - 10000 + 1)) + 10000; // Random delay between 10 and 30 seconds
-          setTimeout(() => {
-            if (refetch) refetch();
-            reconnectTimeout.current = null; // Clear the timeout reference after refetch
-          }, randomDelay);
-        }, acceptableReconnectTime);
-      }
-    };
-
-    // Listen for 'production-job-updated', 'disconnect', and 'connect' events
-    socket.on("production-job-updated", handleJobUpdates);
-    socket.on("disconnect", handleDisconnect);
-    socket.on("connect", handleReconnect);
-
-    // Clean up on unmount or when dependencies change
-    return () => {
-      socket.off("production-job-updated", handleJobUpdates);
-      socket.off("disconnect", handleDisconnect);
-      socket.off("connect", handleReconnect);
-      if (reconnectTimeout.current) {
-        clearTimeout(reconnectTimeout.current);
-      }
-    };
-  }, [subscriptionEnabled, socket, bodyshop, client, refetch]);
-
-  // Functions to fetch updated job data
   const getUpdatedJobData = async (jobId) => {
-    await client.query({
+    client.query({
       query: QUERY_EXACT_JOB_IN_PRODUCTION,
-      variables: { id: jobId },
-      fetchPolicy: "network-only"
+      variables: { id: jobId }
     });
   };
-
-  const getUpdatedJobsData = (jobIds) => {
+  const getUpdatedJobsData = async (jobIds) => {
     client.query({
       query: QUERY_EXACT_JOBS_IN_PRODUCTION,
       variables: { ids: jobIds }

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

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

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

@@ -1,498 +0,0 @@
-import isBetween from "dayjs/plugin/isBetween";
-import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
-import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
-import localeData from "dayjs/plugin/localeData";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import minMax from "dayjs/plugin/minMax";
-import utc from "dayjs/plugin/utc";
-import { DateLocalizer } from "react-big-calendar";
-
-function arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-  return _arr;
-}
-
-function unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-}
-
-function arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-  return arr2;
-}
-
-function nonIterableRest() {
-  throw new TypeError(
-    "Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-  );
-}
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
-}
-
-function fixUnit(unit) {
-  var datePart = unit ? unit.toLowerCase() : unit;
-  if (datePart === "FullYear") {
-    datePart = "year";
-  } else if (!datePart) {
-    datePart = undefined;
-  }
-  return datePart;
-}
-
-var timeRangeFormat = function timeRangeFormat(_ref3, culture, local) {
-  var start = _ref3.start,
-    end = _ref3.end;
-  return local.format(start, "LT", culture) + " – " + local.format(end, "LT", culture);
-};
-var timeRangeStartFormat = function timeRangeStartFormat(_ref4, culture, local) {
-  var start = _ref4.start;
-  return local.format(start, "LT", culture) + " – ";
-};
-var timeRangeEndFormat = function timeRangeEndFormat(_ref5, culture, local) {
-  var end = _ref5.end;
-  return " – " + local.format(end, "LT", culture);
-};
-var weekRangeFormat = function weekRangeFormat(_ref, culture, local) {
-  var start = _ref.start,
-    end = _ref.end;
-  return (
-    local.format(start, "MMMM DD", culture) +
-    " – " +
-    // updated to use this localizer 'eq()' method
-    local.format(end, local.eq(start, end, "month") ? "DD" : "MMMM DD", culture)
-  );
-};
-var dateRangeFormat = function dateRangeFormat(_ref2, culture, local) {
-  var start = _ref2.start,
-    end = _ref2.end;
-  return local.format(start, "L", culture) + " – " + local.format(end, "L", culture);
-};
-
-var formats = {
-  dateFormat: "DD",
-  dayFormat: "DD ddd",
-  weekdayFormat: "ddd",
-  selectRangeFormat: timeRangeFormat,
-  eventTimeRangeFormat: timeRangeFormat,
-  eventTimeRangeStartFormat: timeRangeStartFormat,
-  eventTimeRangeEndFormat: timeRangeEndFormat,
-  timeGutterFormat: "LT",
-  monthHeaderFormat: "MMMM YYYY",
-  dayHeaderFormat: "dddd MMM DD",
-  dayRangeHeaderFormat: weekRangeFormat,
-  agendaHeaderFormat: dateRangeFormat,
-  agendaDateFormat: "ddd MMM DD",
-  agendaTimeFormat: "LT",
-  agendaTimeRangeFormat: timeRangeFormat
-};
-
-const localizer = (dayjsLib) => {
-  var locale = function locale(dj, c) {
-    return c ? dj.locale(c) : dj;
-  };
-
-  // if the timezone plugin is loaded,
-  // then use the timezone aware version
-
-  //TODO This was the issue entirely...
-  // var dayjs = dayjsLib.tz ? dayjsLib.tz : dayjsLib;
-
-  var dayjs = dayjsLib;
-
-  function getTimezoneOffset(date) {
-    // ensures this gets cast to timezone
-    return dayjs(date).toDate().getTimezoneOffset();
-  }
-
-  function getDstOffset(start, end) {
-    var _st$tz$$x$$timezone;
-    // convert to dayjs, in case
-    var st = dayjs(start);
-    var ed = dayjs(end);
-    // if not using the dayjs timezone plugin
-    if (!dayjs.tz) {
-      return st.toDate().getTimezoneOffset() - ed.toDate().getTimezoneOffset();
-    }
-    /**
-     * If a default timezone has been applied, then
-     * use this to get the proper timezone offset, otherwise default
-     * the timezone to the browser local
-     */
-    var tzName =
-      (_st$tz$$x$$timezone = st.tz().$x.$timezone) !== null && _st$tz$$x$$timezone !== void 0
-        ? _st$tz$$x$$timezone
-        : dayjsLib.tz.guess();
-    // invert offsets to be inline with moment.js
-    var startOffset = -dayjs.tz(+st, tzName).utcOffset();
-    var endOffset = -dayjs.tz(+ed, tzName).utcOffset();
-    return startOffset - endOffset;
-  }
-
-  function getDayStartDstOffset(start) {
-    var dayStart = dayjs(start).startOf("day");
-    return getDstOffset(dayStart, start);
-  }
-
-  /*** BEGIN localized date arithmetic methods with dayjs ***/
-  function defineComparators(a, b, unit) {
-    var datePart = fixUnit(unit);
-    var dtA = datePart ? dayjs(a).startOf(datePart) : dayjs(a);
-    var dtB = datePart ? dayjs(b).startOf(datePart) : dayjs(b);
-    return [dtA, dtB, datePart];
-  }
-
-  function startOf() {
-    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var unit = arguments.length > 1 ? arguments[1] : undefined;
-    var datePart = fixUnit(unit);
-    if (datePart) {
-      return dayjs(date).startOf(datePart).toDate();
-    }
-    return dayjs(date).toDate();
-  }
-
-  function endOf() {
-    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var unit = arguments.length > 1 ? arguments[1] : undefined;
-    var datePart = fixUnit(unit);
-    if (datePart) {
-      return dayjs(date).endOf(datePart).toDate();
-    }
-    return dayjs(date).toDate();
-  }
-
-  // dayjs comparison operations *always* convert both sides to dayjs objects
-  // prior to running the comparisons
-  function eq(a, b, unit) {
-    var _defineComparators = defineComparators(a, b, unit),
-      _defineComparators2 = _slicedToArray(_defineComparators, 3),
-      dtA = _defineComparators2[0],
-      dtB = _defineComparators2[1],
-      datePart = _defineComparators2[2];
-    return dtA.isSame(dtB, datePart);
-  }
-
-  function neq(a, b, unit) {
-    return !eq(a, b, unit);
-  }
-
-  function gt(a, b, unit) {
-    var _defineComparators3 = defineComparators(a, b, unit),
-      _defineComparators4 = _slicedToArray(_defineComparators3, 3),
-      dtA = _defineComparators4[0],
-      dtB = _defineComparators4[1],
-      datePart = _defineComparators4[2];
-    return dtA.isAfter(dtB, datePart);
-  }
-
-  function lt(a, b, unit) {
-    var _defineComparators5 = defineComparators(a, b, unit),
-      _defineComparators6 = _slicedToArray(_defineComparators5, 3),
-      dtA = _defineComparators6[0],
-      dtB = _defineComparators6[1],
-      datePart = _defineComparators6[2];
-    return dtA.isBefore(dtB, datePart);
-  }
-
-  function gte(a, b, unit) {
-    var _defineComparators7 = defineComparators(a, b, unit),
-      _defineComparators8 = _slicedToArray(_defineComparators7, 3),
-      dtA = _defineComparators8[0],
-      dtB = _defineComparators8[1],
-      datePart = _defineComparators8[2];
-    return dtA.isSameOrBefore(dtB, datePart);
-  }
-
-  function lte(a, b, unit) {
-    var _defineComparators9 = defineComparators(a, b, unit),
-      _defineComparators10 = _slicedToArray(_defineComparators9, 3),
-      dtA = _defineComparators10[0],
-      dtB = _defineComparators10[1],
-      datePart = _defineComparators10[2];
-    return dtA.isSameOrBefore(dtB, datePart);
-  }
-
-  function inRange(day, min, max) {
-    var unit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "day";
-    var datePart = fixUnit(unit);
-    var djDay = dayjs(day);
-    var djMin = dayjs(min);
-    var djMax = dayjs(max);
-    return djDay.isBetween(djMin, djMax, datePart, "[]");
-  }
-
-  function min(dateA, dateB) {
-    var dtA = dayjs(dateA);
-    var dtB = dayjs(dateB);
-    var minDt = dayjsLib.min(dtA, dtB);
-    return minDt.toDate();
-  }
-
-  function max(dateA, dateB) {
-    var dtA = dayjs(dateA);
-    var dtB = dayjs(dateB);
-    var maxDt = dayjsLib.max(dtA, dtB);
-    return maxDt.toDate();
-  }
-
-  function merge(date, time) {
-    if (!date && !time) return null;
-    var tm = dayjs(time).format("HH:mm:ss");
-    var dt = dayjs(date).startOf("day").format("MM/DD/YYYY");
-    // We do it this way to avoid issues when timezone switching
-    return dayjsLib("".concat(dt, " ").concat(tm), "MM/DD/YYYY HH:mm:ss").toDate();
-  }
-
-  function add(date, adder, unit) {
-    var datePart = fixUnit(unit);
-    return dayjs(date).add(adder, datePart).toDate();
-  }
-
-  function range(start, end) {
-    var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "day";
-    var datePart = fixUnit(unit);
-    // because the add method will put these in tz, we have to start that way
-    var current = dayjs(start).toDate();
-    var days = [];
-    while (lte(current, end)) {
-      days.push(current);
-      current = add(current, 1, datePart);
-    }
-    return days;
-  }
-
-  function ceil(date, unit) {
-    var datePart = fixUnit(unit);
-    var floor = startOf(date, datePart);
-    return eq(floor, date) ? floor : add(floor, 1, datePart);
-  }
-
-  function diff(a, b) {
-    var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "day";
-    var datePart = fixUnit(unit);
-    // don't use 'defineComparators' here, as we don't want to mutate the values
-    var dtA = dayjs(a);
-    var dtB = dayjs(b);
-    return dtB.diff(dtA, datePart);
-  }
-
-  function minutes(date) {
-    var dt = dayjs(date);
-    return dt.minutes();
-  }
-
-  function firstOfWeek(culture) {
-    var data = culture ? dayjsLib.localeData(culture) : dayjsLib.localeData();
-    return data ? data.firstDayOfWeek() : 0;
-  }
-
-  function firstVisibleDay(date) {
-    return dayjs(date).startOf("month").startOf("week").toDate();
-  }
-
-  function lastVisibleDay(date) {
-    return dayjs(date).endOf("month").endOf("week").toDate();
-  }
-
-  function visibleDays(date) {
-    var current = firstVisibleDay(date);
-    var last = lastVisibleDay(date);
-    var days = [];
-    while (lte(current, last)) {
-      days.push(current);
-      current = add(current, 1, "d");
-    }
-    return days;
-  }
-
-  /*** END localized date arithmetic methods with dayjs ***/
-
-  /**
-   * Moved from TimeSlots.js, this method overrides the method of the same name
-   * in the localizer.js, using dayjs to construct the js Date
-   * @param {Date} dt - date to start with
-   * @param {Number} minutesFromMidnight
-   * @param {Number} offset
-   * @returns {Date}
-   */
-  function getSlotDate(dt, minutesFromMidnight, offset) {
-    return dayjs(dt)
-      .startOf("day")
-      .minute(minutesFromMidnight + offset)
-      .toDate();
-  }
-
-  // dayjs will automatically handle DST differences in it's calculations
-  function getTotalMin(start, end) {
-    return diff(start, end, "minutes");
-  }
-
-  function getMinutesFromMidnight(start) {
-    var dayStart = dayjs(start).startOf("day");
-    var day = dayjs(start);
-    return day.diff(dayStart, "minutes") + getDayStartDstOffset(start);
-  }
-
-  // These two are used by DateSlotMetrics
-  function continuesPrior(start, first) {
-    var djStart = dayjs(start);
-    var djFirst = dayjs(first);
-    return djStart.isBefore(djFirst, "day");
-  }
-
-  function continuesAfter(start, end, last) {
-    var djEnd = dayjs(end);
-    var djLast = dayjs(last);
-    return djEnd.isSameOrAfter(djLast, "minutes");
-  }
-
-  function daySpan(start, end) {
-    var startDay = dayjs(start);
-    var endDay = dayjs(end);
-    return endDay.diff(startDay, "day");
-  }
-
-  // These two are used by eventLevels
-  function sortEvents(_ref6) {
-    var _ref6$evtA = _ref6.evtA,
-      aStart = _ref6$evtA.start,
-      aEnd = _ref6$evtA.end,
-      aAllDay = _ref6$evtA.allDay,
-      _ref6$evtB = _ref6.evtB,
-      bStart = _ref6$evtB.start,
-      bEnd = _ref6$evtB.end,
-      bAllDay = _ref6$evtB.allDay;
-    var startSort = +startOf(aStart, "day") - +startOf(bStart, "day");
-    var durA = daySpan(aStart, aEnd);
-    var durB = daySpan(bStart, bEnd);
-    return (
-      startSort ||
-      // sort by start Day first
-      durB - durA ||
-      // events spanning multiple days go first
-      !!bAllDay - !!aAllDay ||
-      // then allDay single day events
-      +aStart - +bStart ||
-      // then sort by start time *don't need dayjs conversion here
-      +aEnd - +bEnd // then sort by end time *don't need dayjs conversion here either
-    );
-  }
-
-  function inEventRange(_ref7) {
-    var _ref7$event = _ref7.event,
-      start = _ref7$event.start,
-      end = _ref7$event.end,
-      _ref7$range = _ref7.range,
-      rangeStart = _ref7$range.start,
-      rangeEnd = _ref7$range.end;
-    var startOfDay = dayjs(start).startOf("day");
-    var eEnd = dayjs(end);
-    var rStart = dayjs(rangeStart);
-    var rEnd = dayjs(rangeEnd);
-    var startsBeforeEnd = startOfDay.isSameOrBefore(rEnd, "day");
-    // when the event is zero duration we need to handle a bit differently
-    var sameMin = !startOfDay.isSame(eEnd, "minutes");
-    var endsAfterStart = sameMin ? eEnd.isAfter(rStart, "minutes") : eEnd.isSameOrAfter(rStart, "minutes");
-    return startsBeforeEnd && endsAfterStart;
-  }
-
-  function isSameDate(date1, date2) {
-    var dt = dayjs(date1);
-    var dt2 = dayjs(date2);
-    return dt.isSame(dt2, "day");
-  }
-
-  /**
-   * This method, called once in the localizer constructor, is used by eventLevels
-   * 'eventSegments()' to assist in determining the 'span' of the event in the display,
-   * specifically when using a timezone that is greater than the browser native timezone.
-   * @returns number
-   */
-  function browserTZOffset() {
-    /**
-     * Date.prototype.getTimezoneOffset horrifically flips the positive/negative from
-     * what you see in it's string, so we have to jump through some hoops to get a value
-     * we can actually compare.
-     */
-    var dt = new Date();
-    var neg = /-/.test(dt.toString()) ? "-" : "";
-    var dtOffset = dt.getTimezoneOffset();
-    var comparator = Number("".concat(neg).concat(Math.abs(dtOffset)));
-    // dayjs correctly provides positive/negative offset, as expected
-    var mtOffset = dayjs().utcOffset();
-    return mtOffset > comparator ? 1 : 0;
-  }
-
-  return new DateLocalizer({
-    formats: formats,
-    firstOfWeek: firstOfWeek,
-    firstVisibleDay: firstVisibleDay,
-    lastVisibleDay: lastVisibleDay,
-    visibleDays: visibleDays,
-    format: function format(value, _format, culture) {
-      return locale(dayjs(value), culture).format(_format);
-    },
-    lt: lt,
-    lte: lte,
-    gt: gt,
-    gte: gte,
-    eq: eq,
-    neq: neq,
-    merge: merge,
-    inRange: inRange,
-    startOf: startOf,
-    endOf: endOf,
-    range: range,
-    add: add,
-    diff: diff,
-    ceil: ceil,
-    min: min,
-    max: max,
-    minutes: minutes,
-    getSlotDate: getSlotDate,
-    getTimezoneOffset: getTimezoneOffset,
-    getDstOffset: getDstOffset,
-    getTotalMin: getTotalMin,
-    getMinutesFromMidnight: getMinutesFromMidnight,
-    continuesPrior: continuesPrior,
-    continuesAfter: continuesAfter,
-    sortEvents: sortEvents,
-    inEventRange: inEventRange,
-    isSameDate: isSameDate,
-    browserTZOffset: browserTZOffset
-  });
-};
-export default localizer;

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

@@ -1,7 +1,7 @@
 import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React from "react";
-import { Calendar } from "react-big-calendar";
+import { Calendar, dayjsLocalizer } from "react-big-calendar";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
@@ -14,14 +14,12 @@ import { selectProblemJobs } from "../../redux/application/application.selectors
 import { Alert, Collapse, Space } from "antd";
 import { Trans, useTranslation } from "react-i18next";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import local from "./localizer";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   problemJobs: selectProblemJobs
 });
-
-const localizer = local(dayjs);
+const localizer = dayjsLocalizer(dayjs);
 
 export function ScheduleCalendarWrapperComponent({
   bodyshop,

client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js

@@ -4,7 +4,7 @@ export const CalculateWorkingDaysThisMonth = () => dayjs().endOf("month").busine
 
 export const CalculateWorkingDaysInPeriod = (start, end) => dayjs(end).businessDiff(dayjs(start));
 
-export const CalculateWorkingDaysAsOfToday = () => dayjs().endOf("day").businessDiff(dayjs().startOf("month"));
+export const CalculateWorkingDaysAsOfToday = () => dayjs().businessDaysInMonth().length;
 
 export const CalculateWorkingDaysLastMonth = () =>
   dayjs().subtract(1, "month").endOf("month").businessDaysInMonth().length;

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

@@ -20,7 +20,6 @@ import ShopInfoTaskPresets from "./shop-info.task-presets.component";
 import queryString from "query-string";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
-import ShopInfoIntellipay from "./shop-intellipay-config.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -136,17 +135,6 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
       ],
       rome: "USE_IMEX",
       promanager: []
-    }),
-    ...InstanceRenderManager({
-      imex: [],
-      rome: [
-        {
-          key: "intellipay",
-          label: t("bodyshop.labels.intellipay"),
-          children: <ShopInfoIntellipay form={form} />
-        }
-      ],
-      promanager: []
     })
   ];
   return (

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, ADPPayroll }
+    treatments: { ClosingPeriod }
   } = useSplitTreatments({
     attributes: {},
-    names: ["ClosingPeriod", "ADPPayroll"],
+    names: ["ClosingPeriod"],
     splitKey: bodyshop && bodyshop.imexshopid
   });
 
@@ -98,6 +98,7 @@ 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"
@@ -355,22 +356,14 @@ 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>
-          )}
-          {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>
+            <>
+              <Form.Item
+                name={["accountingconfig", "ClosingPeriod"]}
+                label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
+              >
+                <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
+              </Form.Item>
+            </>
           )}
         </LayoutFormRow>
       </FeatureWrapper>

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

@@ -1,54 +0,0 @@
-import { Alert, Form, InputNumber, Switch } from "antd";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoIntellipay);
-
-export function ShopInfoIntellipay({ bodyshop, form }) {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Form.Item dependencies={[["intellipay_config", "enable_cash_discount"]]}>
-        {() => {
-          const { intellipay_config } = form.getFieldsValue();
-
-          if (intellipay_config?.enable_cash_discount)
-            return <Alert message={t("bodyshop.labels.intellipay_cash_discount")} />;
-        }}
-      </Form.Item>
-
-      <LayoutFormRow noDivider>
-        <Form.Item
-          label={t("bodyshop.fields.intellipay_config.enable_cash_discount")}
-          valuePropName="checked"
-          name={["intellipay_config", "enable_cash_discount"]}
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.intellipay_config.cash_discount_percentage")}
-          valuePropName="checked"
-          dependencies={[["intellipay_config", "enable_cash_discount"]]}
-          name={["intellipay_config", "cash_discount_percentage"]}
-          rules={[
-            ({ getFieldsValue }) => ({ required: form.getFieldValue(["intellipay_config", "enable_cash_discount"]) })
-          ]}
-        >
-          <InputNumber min={0} max={100} precision={1} suffix='%'/>
-        </Form.Item>
-      </LayoutFormRow>
-    </>
-  );
-}

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

@@ -1,3 +1,10 @@
+import { Button, Card, Space, Switch, Table } from "antd";
+import queryString from "query-string";
+import React, { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { pageLimit } from "../../utils/config";
+import dayjs from "../../utils/day";
 import {
   CheckCircleFilled,
   CheckCircleOutlined,
@@ -8,16 +15,9 @@ import {
   PlusCircleFilled,
   SyncOutlined
 } from "@ant-design/icons";
-import { Button, Card, Space, Switch, Table } from "antd";
-import queryString from "query-string";
-import React, { useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { pageLimit } from "../../utils/config";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
-import dayjs from "../../utils/day";
+import { connect } from "react-redux";
+import { setModalContext } from "../../redux/modals/modals.actions";
 
 /**
  * Task List Component
@@ -140,17 +140,6 @@ function TaskListComponent({
     render: (text, record) => <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
   });
 
-  columns.push({
-    title: t("tasks.fields.created_by"),
-    dataIndex: "created_by",
-    key: "created_by",
-    width: "8%",
-    defaultSortOrder: "descend",
-    sorter: true,
-    sortOrder: sortcolumn === "created_by" && sortorder,
-    render: (text, record) => record.created_by
-  });
-
   if (!onlyMine) {
     columns.push({
       title: t("tasks.fields.assigned_to"),
@@ -166,70 +155,65 @@ function TaskListComponent({
     });
   }
 
-  columns.push({
-    title: t("tasks.fields.related_items"),
-    key: "related_items",
-    width: "12%",
-    render: (text, record) => {
-      const items = [];
-
-      // Job
-      if (showRo && record.job) {
-        items.push(
-          <Link key="job" to={`/manage/jobs/${record.job.id}?tab=tasks`}>
-            {t("tasks.fields.job.ro_number")}: {record.job.ro_number}
-          </Link>
-        );
-      }
-      if (showRo && !record.job) {
-        items.push(`${t("tasks.fields.job.ro_number")}: ${t("general.labels.na")}`);
-      }
-
-      // Jobline
-      if (record.jobline?.line_desc) {
-        items.push(
-          <span key="jobline">
-            {t("tasks.fields.jobline")}: {record.jobline.line_desc}
-          </span>
-        );
-      }
-
-      // Parts Order
-      if (record.parts_order) {
-        const { order_number, vendor } = record.parts_order;
-        const partsOrderText =
-          order_number && vendor?.name ? `${order_number} - ${vendor.name}` : t("general.labels.na");
-        items.push(
-          <Link
-            key="parts_order"
-            to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}
-          >
-            {t("tasks.fields.parts_order")}: {partsOrderText}
-          </Link>
-        );
-      }
-
-      // Bill
-      if (record.bill) {
-        const { invoice_number, vendor } = record.bill;
-        const billText = invoice_number && vendor?.name ? `${invoice_number} - ${vendor.name}` : t("general.labels.na");
-        items.push(
-          <Link key="bill" to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
-            {t("tasks.fields.bill")}: {billText}
-          </Link>
-        );
-      }
-
-      return items.length > 0 ? <Space direction="vertical">{items}</Space> : null;
-    }
-  });
+  if (showRo) {
+    columns.push({
+      title: t("tasks.fields.job.ro_number"),
+      dataIndex: ["job", "ro_number"],
+      key: "job.ro_number",
+      width: "8%",
+      render: (text, record) =>
+        record.job ? (
+          <Link to={`/manage/jobs/${record.job.id}?tab=tasks`}>{record.job.ro_number || t("general.labels.na")}</Link>
+        ) : (
+          t("general.labels.na")
+        )
+    });
+  }
 
   columns.push(
+    {
+      title: t("tasks.fields.jobline"),
+      dataIndex: ["jobline", "id"],
+      key: "jobline.id",
+      width: "8%",
+      render: (text, record) => record?.jobline?.line_desc || ""
+    },
+    {
+      title: t("tasks.fields.parts_order"),
+      dataIndex: ["parts_order", "id"],
+      key: "part_order.id",
+      width: "8%",
+      render: (text, record) =>
+        record.parts_order ? (
+          <Link to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}>
+            {record.parts_order.order_number && record.parts_order.vendor && record.parts_order.vendor.name
+              ? `${record.parts_order.order_number} - ${record.parts_order.vendor.name}`
+              : t("general.labels.na")}
+          </Link>
+        ) : (
+          ""
+        )
+    },
+    {
+      title: t("tasks.fields.bill"),
+      dataIndex: ["bill", "id"],
+      key: "bill.id",
+      width: "10%",
+      render: (text, record) =>
+        record.bill ? (
+          <Link to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
+            {record.bill.invoice_number && record.bill.vendor && record.bill.vendor.name
+              ? `${record.bill.invoice_number} - ${record.bill.vendor.name}`
+              : t("general.labels.na")}
+          </Link>
+        ) : (
+          ""
+        )
+    },
     {
       title: t("tasks.fields.title"),
       dataIndex: "title",
       key: "title",
-      minWidth: "20%",
       sorter: true,
       sortOrder: sortcolumn === "title" && sortorder
     },
@@ -263,7 +247,7 @@ function TaskListComponent({
     {
       title: t("tasks.fields.actions"),
       key: "toggleCompleted",
-      width: "8%",
+      width: "5%",
       render: (text, record) => (
         <Space direction="horizontal">
           <Button

client/src/components/time-tickets-commit-toggle/time-tickets-commit-toggle.component.jsx

@@ -1,6 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -29,7 +29,7 @@ export function TimeTicketsCommit({ bodyshop, currentUser, timeticket, disabled,
         ? { commited_by: null, committed_at: null }
         : {
             commited_by: currentUser.email,
-            committed_at: dayjs()
+            committed_at: day()
           };
 
       const result = await updateTimeTicket({

client/src/components/time-tickets-commit/time-tickets-commit.component.jsx

@@ -1,6 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Button, notification } from "antd";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -34,7 +34,7 @@ export function TimeTicketsCommit({
           timeticketIds: timetickets.map((ticket) => ticket.id),
           timeticket: {
             commited_by: currentUser.email,
-            committed_at: dayjs()
+            committed_at: day()
           }
         },
         update(cache) {
@@ -47,7 +47,7 @@ export function TimeTicketsCommit({
                     return {
                       ...ticket,
                       commited_by: currentUser.email,
-                      committed_at: dayjs()
+                      committed_at: day()
                     };
                   }
                   return ticket;

client/src/components/tt-approve-button/tt-approve-button.component.jsx

@@ -1,7 +1,7 @@
 import { useApolloClient } from "@apollo/client";
 import { Button, notification } from "antd";
 import _ from "lodash";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -49,7 +49,7 @@ export function TtApproveButton({
           })),
           approvalIds: selectedTickets,
           approvalUpdate: {
-            approved_at: dayjs(),
+            approved_at: day(),
             approved_by: currentUser.email
           }
         }

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

@@ -1,14 +1,13 @@
 import { AlertOutlined } from "@ant-design/icons";
-import { Alert, Button, Col, notification, Row, Space } from "antd";
+import { Alert, Button, Col, Row, Space } from "antd";
 import i18n from "i18next";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect } 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
@@ -20,15 +19,6 @@ 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],
@@ -50,43 +40,11 @@ export function UpdateAlert({ updateAvailable }) {
     }
   });
 
-  const ReloadNewVersion = useCallback(() => {
-    setLoading(true);
-    updateServiceWorker(true);
-    setTimeout(() => {
-      window.location.reload(true);
-    }, 5000);
-  }, [updateServiceWorker]);
-
   useEffect(() => {
-    if (needRefresh) {
-      start();
-      setTimerStarted(true);
+    if (import.meta.env.DEV) {
+      console.log(`SW Status => Refresh? ${needRefresh} - offlineReady? ${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]);
+  }, [needRefresh, offlineReady]);
 
   if (!needRefresh) return null;
 
@@ -117,10 +75,9 @@ export function UpdateAlert({ updateAvailable }) {
               <Button onClick={() => window.open("https://imex-online.noticeable.news/", "_blank")}>
                 {i18n.t("general.actions.viewreleasenotes")}
               </Button>
-              <Button loading={loading} type="primary" onClick={() => ReloadNewVersion()}>
-                {i18n.t("general.actions.refresh")} {`(${(timeLeft / 1000).toFixed(0)} s)`}
+              <Button type="primary" onClick={() => updateServiceWorker(true)}>
+                {i18n.t("general.actions.refresh")}
               </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,25 +33,9 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
         if (!value || !options) return label;
         const discount = options?.find((o) => o.id === value)?.discount;
         return (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              flexWrap: "nowrap",
-              width: "100%"
-            }}
-          >
-            <div
-              style={{
-                flex: 1,
-                minWidth: 0,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              }}
-            >
-              {label}
-            </div>
+          <div className="imex-flex-row" style={{ width: "100%" }}>
+            <div style={{ flex: 1 }}>{label}</div>
+
             {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
           </div>
         );
@@ -61,67 +45,36 @@ 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
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.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>
               </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>
-            </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}
+            </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>
               </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>
-            </div>
-          </Option>
-        ))}
+            </Option>
+          ))
+        : null}
     </Select>
   );
 };

client/src/components/wss-status-display/wss-status-display.component.jsx

@@ -1,18 +0,0 @@
-import { connect } from "react-redux";
-import { GlobalOutlined } from "@ant-design/icons";
-import { createStructuredSelector } from "reselect";
-import React from "react";
-import { selectWssStatus } from "../../redux/application/application.selectors";
-const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
-  wssStatus: selectWssStatus
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(WssStatusDisplay);
-
-export function WssStatusDisplay({ wssStatus }) {
-  console.log("🚀 ~ WssStatusDisplay ~ wssStatus:", wssStatus);
-  return <GlobalOutlined style={{ color: wssStatus === "connected" ? "green" : "red", marginRight: ".5rem" }} />;
-}

client/src/contexts/SocketIO/useSocket.js

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

client/src/firebase/firebase.utils.js

@@ -87,7 +87,7 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
     operationName: eventName,
     variables: additionalParams,
     dbevent: false,
-    env: `master-AIO|${import.meta.env.VITE_APP_GIT_SHA_DATE}`
+    env: "master"
   });
   // console.log(
   //   "%c[Analytics]",

client/src/graphql/appointments.queries.js

@@ -48,7 +48,6 @@ export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
         v_model_desc
         est_ct_fn
         est_ct_ln
-        comment
         labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
           aggregate {
             sum {

client/src/graphql/bodyshop.queries.js

@@ -138,8 +138,7 @@ export const QUERY_BODYSHOP = gql`
       tt_enforce_hours_for_tech_console
       md_tasks_presets
       use_paint_scale_data
-      intellipay_config
-      md_ro_guard
+            md_ro_guard
       employee_teams(order_by: { name: asc }, where: { active: { _eq: true } }) {
         id
         name
@@ -267,8 +266,7 @@ export const UPDATE_SHOP = gql`
         enforce_conversion_category
         tt_enforce_hours_for_tech_console
         md_tasks_presets
-        intellipay_config
-        md_ro_guard
+                md_ro_guard
         employee_teams(order_by: { name: asc }, where: { active: { _eq: true } }) {
           id
           name

client/src/graphql/jobs.queries.js

@@ -2461,14 +2461,6 @@ export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
     }
   }
 `;
-export const SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW = gql`
-  subscription SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW {
-    jobs: jobs_inproduction {
-      id
-      updated_at
-    }
-  }
-`;
 
 export const QUERY_JOBS_IN_PRODUCTION = gql`
   query QUERY_JOBS_IN_PRODUCTION {