feature/IO-3060-Realtime-Notification-System: Weird sql Lind endings

- Add handlers for Job and Bill Change / Register Routers
- Add Tables / Modify Tables / Add permissions.

.circleci/config.yml

@@ -179,37 +179,6 @@ jobs:
           job_type: deployment
           pipeline_number: << pipeline.number >>
 
-  promanager-app-build:
-    docker:
-      - image: cimg/node:18.18.2
-
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Install Dependencies
-          command: npm i
-
-      - run: npm run build:production:promanager
-
-      - aws-cli/setup:
-          aws_access_key_id: AWS_ACCESS_KEY_ID
-          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
-          region: AWS_REGION
-
-      - aws-s3/sync:
-          from: dist
-          to: "s3://promanager-production/"
-          arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (ProManager) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
-
   test-rome-hasura-migrate:
     docker:
       - image: cimg/node:18.18.2
@@ -268,37 +237,6 @@ jobs:
           job_type: deployment
           pipeline_number: << pipeline.number >>
 
-  test-promanager-app-build:
-    docker:
-      - image: cimg/node:18.18.2
-
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-      - run:
-          name: Install Dependencies
-          command: npm i
-
-      - run: npm run build:test:promanager
-
-      - aws-cli/setup:
-          aws_access_key_id: AWS_ACCESS_KEY_ID
-          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
-          region: AWS_REGION
-
-      - aws-s3/sync:
-          from: dist
-          to: "s3://promanager-testing/"
-          arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (ProManager) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
-
   test-hasura-migrate:
     docker:
       - image: cimg/node:18.18.2
@@ -458,14 +396,6 @@ workflows:
           filters:
             branches:
               only: test-AIO
-      - test-promanager-app-build:
-          filters:
-            branches:
-              only: test-AIO
-      - promanager-app-build:
-          filters:
-            branches:
-              only: master-AIO
       - test-rome-hasura-migrate:
           secret: ${HASURA_ROME_TEST_SECRET}
           filters:

.gitattributes

@@ -0,0 +1,81 @@
+# Ensure all text files use LF for line endings
+* text eol=lf
+
+# Binary files should not be modified by Git
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.webp binary
+*.svg binary
+
+# Fonts
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.otf binary
+*.eot binary
+
+# Videos
+*.mp4 binary
+*.mov binary
+*.avi binary
+*.mkv binary
+*.webm binary
+
+# Audio
+*.mp3 binary
+*.wav binary
+*.ogg binary
+*.flac binary
+
+# Archives and compressed files
+*.zip binary
+*.gz binary
+*.tar binary
+*.7z binary
+*.rar binary
+
+# PDF and documents
+*.pdf binary
+*.doc binary
+*.docx binary
+*.xls binary
+*.xlsx binary
+*.ppt binary
+*.pptx binary
+
+# Exclude JSON and other data files from text processing, if necessary
+*.json text
+*.xml text
+*.csv text
+
+# Scripts and code files should maintain LF endings
+*.js text eol=lf
+*.jsx text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.html text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf
+*.md text eol=lf
+*.sh text eol=lf
+*.py text eol=lf
+*.rb text eol=lf
+*.java text eol=lf
+*.php text eol=lf
+*.sql text eol=lf
+
+# Git configuration files
+.gitattributes text eol=lf
+.gitignore text eol=lf
+*.gitattributes text eol=lf
+
+# Exclude some other potential binary files
+*.db binary
+*.sqlite binary
+*.exe binary
+*.dll binary

.platform/hooks/predeploy/00-install-fonts.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Install required packages
+dnf install -y fontconfig freetype
+
+# Move to the /tmp directory for temporary download and extraction
+cd /tmp
+
+# Download the Montserrat font zip file
+wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip
+
+# Unzip the downloaded font file
+unzip montserrat.zip -d montserrat
+
+# Move the font files to the system fonts directory
+mv montserrat/montserrat/*.ttf /usr/share/fonts
+
+# Rebuild the font cache
+fc-cache -fv
+
+# Clean up
+rm -rf /tmp/montserrat /tmp/montserrat.zip
+
+echo "Montserrat fonts installed and cached successfully."

.platform/hooks/predeploy/01-install-dd.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+DD_API_KEY=58d91898a70c6fd659f6eea768a57976 DD_SITE="us3.datadoghq.com" bash -c "$(curl -L https://install.datadoghq.com/scripts/install_script_agent7.sh)"
+
+echo "Datadog agent installed."

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

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

.vscode/settings.json

@@ -8,5 +8,36 @@
       "pattern": "**/IMEX.xml",
       "systemId": "logs/IMEX.xsd"
     }
-  ]
+  ],
+  "cSpell.words": [
+    "antd",
+    "appointmentconfirmation",
+    "appt",
+    "autohouse",
+    "autohouseid",
+    "billlines",
+    "bodyshop",
+    "bodyshopid",
+    "bodyshops",
+    "CIECA",
+    "claimscorp",
+    "claimscorpid",
+    "Dinero",
+    "driveable",
+    "IMEX",
+    "imexshopid",
+    "jobid",
+    "joblines",
+    "Kaizen",
+    "labhrs",
+    "larhrs",
+    "mixdata",
+    "ownr",
+    "promanager",
+    "shopname",
+    "smartscheduling",
+    "timetickets",
+    "touchtime"
+  ],
+  "eslint.workingDirectories": ["./", "./client"]
 }

Dockerfile

@@ -7,7 +7,6 @@ RUN dnf install -y git \
     && dnf install -y nodejs \
     && dnf clean all
 
-
 # Install dependencies required by node-canvas
 RUN dnf install -y \
     gcc \
@@ -19,9 +18,22 @@ RUN dnf install -y \
     libpng-devel \
     make \
     python3 \
+    fontconfig \
+    freetype \
     python3-pip \
+    wget \
+    unzip \
     && dnf clean all
 
+# Install Montserrat fonts
+RUN cd /tmp \
+    && wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip \
+    && unzip montserrat.zip -d montserrat \
+    && mv montserrat/montserrat/*.ttf /usr/share/fonts \
+    && fc-cache -fv \
+    && rm -rf /tmp/montserrat /tmp/montserrat.zip \
+    && echo "Montserrat fonts installed and cached successfully."
+
 # Set the working directory
 WORKDIR /app
 

_reference/JSON/BodyshopFeatures.json

@@ -10,5 +10,8 @@
   "courtesycars": "date",
   "media": "date",
   "visualboard": "date",
-  "scoreboard": "date"
+  "scoreboard": "date",
+  "checklist": "date",
+  "smartscheduling" :"date",
+  "roguard": "date"
 }

_reference/localEmailViewer/.gitignore

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

_reference/localEmailViewer/README.md

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

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

@@ -0,0 +1,18 @@
+{
+  "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"
+  }
+}

certs/io-ftp-test.key

@@ -0,0 +1,12 @@
+-----BEGIN OPENSSH PRIVATE KEY-----
+b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAArAAAABNlY2RzYS
+1zaGEyLW5pc3RwNTIxAAAACG5pc3RwNTIxAAAAhQQBYJnAujo17diR0fM2Ze1d1Ft6XHm5
+U31pXdFEN+rGC4SoYTdZE8q3relxMS5GwwBOvgvVUuayfid2XS8ls/CMDiMBJAYqEK4CRY
+PbbPB7lLnMWsF7muFhvs+SIpPQC+vtDwM2TKlxF0Y8p+iVRpvCADoggsSze7skmJWKmMTt
+8jEdEOcAAAEQIyXsOSMl7DkAAAATZWNkc2Etc2hhMi1uaXN0cDUyMQAAAAhuaXN0cDUyMQ
+AAAIUEAWCZwLo6Ne3YkdHzNmXtXdRbelx5uVN9aV3RRDfqxguEqGE3WRPKt63pcTEuRsMA
+Tr4L1VLmsn4ndl0vJbPwjA4jASQGKhCuAkWD22zwe5S5zFrBe5rhYb7PkiKT0Avr7Q8DNk
+ypcRdGPKfolUabwgA6IILEs3u7JJiVipjE7fIxHRDnAAAAQUO5dO9G7i0bxGTP0zV3eIwv
+5g0NhrQJfW/bMHS6XWwaxdpr+QZ+DbBJVzZPwYC0wLMW4bJAf+kjqUnj4wGocoTeAAAAD2
+lvLWZ0cC10ZXN0LWtleQECAwQ=
+-----END OPENSSH PRIVATE KEY-----

certs/io-ftp-test.key.pub

@@ -0,0 +1 @@
+ecdsa-sha2-nistp521 AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBAFgmcC6OjXt2JHR8zZl7V3UW3pceblTfWld0UQ36sYLhKhhN1kTyret6XExLkbDAE6+C9VS5rJ+J3ZdLyWz8IwOIwEkBioQrgJFg9ts8HuUucxawXua4WG+z5Iik9AL6+0PAzZMqXEXRjyn6JVGm8IAOiCCxLN7uySYlYqYxO3yMR0Q5w== io-ftp-test-key

certs/io-ftp-test.ppk

@@ -0,0 +1,12 @@
+PuTTY-User-Key-File-3: ecdsa-sha2-nistp521
+Encryption: none
+Comment: io-ftp-test-key
+Public-Lines: 4
+AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBAFgmcC6OjXt
+2JHR8zZl7V3UW3pceblTfWld0UQ36sYLhKhhN1kTyret6XExLkbDAE6+C9VS5rJ+
+J3ZdLyWz8IwOIwEkBioQrgJFg9ts8HuUucxawXua4WG+z5Iik9AL6+0PAzZMqXEX
+Rjyn6JVGm8IAOiCCxLN7uySYlYqYxO3yMR0Q5w==
+Private-Lines: 2
+AAAAQUO5dO9G7i0bxGTP0zV3eIwv5g0NhrQJfW/bMHS6XWwaxdpr+QZ+DbBJVzZP
+wYC0wLMW4bJAf+kjqUnj4wGocoTe
+Private-MAC: d67001d47e13c43dc8bdb9c68a25356a96c1c4a6714f3c5a1836fca646b78b54

client/.env.development.promanager

@@ -1,14 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
-VITE_APP_CLOUDINARY_API_KEY=957865933348715
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=/api/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=PROMANAGER

client/.env.production.promanager

@@ -1,15 +0,0 @@
-GENERATE_SOURCEMAP=true
-VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231103507
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
-VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-VITE_APP_INSTANCE=PROMANAGER

client/.env.test.promanager

@@ -1,15 +0,0 @@
-VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
-VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
-VITE_APP_GA_CODE=231099835
-VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
-VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
-VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
-VITE_APP_CLOUDINARY_API_KEY=473322739956866
-VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
-VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
-VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
-VITE_APP_IS_TEST=true
-VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-VITE_APP_INSTANCE=PROMANAGER

client/eslint.config.js

@@ -0,0 +1,21 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+
+/** @type {import('eslint').Linter.Config[]} */
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,jsx}"]
+  },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
+      "react/prop-types": 0
+    }
+  },
+  pluginReact.configs.flat["jsx-runtime"]
+];

client/index.html

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

client/package-lock.json

@@ -85,11 +85,13 @@
         "web-vitals": "^3.5.2"
       },
       "devDependencies": {
+        "@ant-design/icons": "^5.5.1",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@babel/preset-react": "^7.24.7",
         "@dotenvx/dotenvx": "^1.14.1",
         "@emotion/babel-plugin": "^11.12.0",
         "@emotion/react": "^11.13.3",
+        "@eslint/js": "^9.15.0",
         "@sentry/webpack-plugin": "^2.22.4",
         "@testing-library/cypress": "^10.0.2",
         "browserslist": "^4.23.3",
@@ -97,9 +99,11 @@
         "chalk": "^5.3.0",
         "cross-env": "^7.0.3",
         "cypress": "^13.14.2",
-        "eslint": "^8.57.0",
+        "eslint": "^8.57.1",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-cypress": "^2.15.1",
+        "eslint-plugin-react": "^7.37.2",
+        "globals": "^15.12.0",
         "memfs": "^4.12.0",
         "os-browserify": "^0.3.0",
         "react-error-overlay": "6.0.11",
@@ -1524,6 +1528,16 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-classes/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/plugin-transform-computed-properties": {
       "version": "7.24.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.6.tgz",
@@ -2536,6 +2550,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.7.tgz",
@@ -2952,358 +2975,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
@@ -3429,12 +3100,13 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@fingerprintjs/fingerprintjs": {
@@ -4033,12 +3705,14 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
+        "@humanwhocodes/object-schema": "^2.0.3",
         "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
@@ -4051,6 +3725,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -4061,6 +3736,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -4085,7 +3761,9 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "dev": true
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
     },
     "node_modules/@icons/material": {
       "version": "0.2.4",
@@ -5036,6 +4714,7 @@
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -5220,105 +4899,6 @@
         "@sentry/cli-win32-x64": "2.36.2"
       }
     },
-    "node_modules/@sentry/cli-darwin": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.36.2.tgz",
-      "integrity": "sha512-To64Pq+pcmecEr+gFXiqaZy8oKhyLQLXO/SVDdf16CUL2qpuahE3bO5h9kFacMxPPxOWcgc2btF+4gYa1+bQTA==",
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.36.2.tgz",
-      "integrity": "sha512-cRSvOQK97WM0m03k/c+LVAWT042Qz887WP/2Gy64eUi/PfArwb+QZZnsu4FCygxK9jnzgLTo4+ewoJVi17xaLQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm64": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.36.2.tgz",
-      "integrity": "sha512-g+FFmj1oJ2iRMsfs1ORz6THOO6MiAR55K9YxdZUBvqfoHLjSMt7Jst43sbZ3O0u55hnfixSKLNzDaTGaM/jxIQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-i686": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.36.2.tgz",
-      "integrity": "sha512-rjxTw/CMd0Q7qlOb7gWFiwn3hJIxNkhbn1bOU54xj9CZvQSCvh10l7l4Y9o8znJLl41c5kMXVq8yuYws9A7AGQ==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-x64": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.36.2.tgz",
-      "integrity": "sha512-cF8IPFTlwiC7JgVvSW4rS99sxb1W1N//iANxuzqaDswUnmJLi0AJy/jES87qE5GRB6ljaPVMvH7Kq0OCp3bvPA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-i686": {
-      "version": "2.36.2",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.36.2.tgz",
-      "integrity": "sha512-YDH/Kcd8JAo1Bg4jtSwF8dr7FZZ8QbYLMx8q/5eenHpq6VdOgPENsTvayLW3cAjWLcm44u8Ed/gcEK0z1IxQmQ==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@sentry/cli-win32-x64": {
       "version": "2.36.2",
       "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.36.2.tgz",
@@ -6547,29 +6127,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.toreversed": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
-      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
-      }
-    },
     "node_modules/array.prototype.tosorted": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
-      "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.1.0",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
         "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
@@ -8859,10 +8431,11 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
-      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz",
+      "integrity": "sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -8871,12 +8444,13 @@
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.0.1",
         "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.2",
+        "iterator.prototype": "^1.1.3",
         "safe-array-concat": "^1.1.2"
       },
       "engines": {
@@ -9006,16 +8580,18 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -9357,35 +8933,36 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.34.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
-      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
+      "version": "7.37.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
+      "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "array-includes": "^3.1.7",
-        "array.prototype.findlast": "^1.2.4",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
         "array.prototype.flatmap": "^1.3.2",
-        "array.prototype.toreversed": "^1.1.2",
-        "array.prototype.tosorted": "^1.1.3",
+        "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.17",
+        "es-iterator-helpers": "^1.1.0",
         "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.7",
-        "object.fromentries": "^2.0.7",
-        "object.hasown": "^1.1.3",
-        "object.values": "^1.1.7",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.0",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.10"
+        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
@@ -9504,6 +9081,16 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/eslint/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -10226,6 +9813,7 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -10426,11 +10014,16 @@
       "integrity": "sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA=="
     },
     "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "version": "15.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
+      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/globalthis": {
@@ -11033,6 +10626,7 @@
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
       "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -11226,6 +10820,7 @@
       "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
       "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -11298,6 +10893,7 @@
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
       "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -11421,6 +11017,7 @@
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
       "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -11523,6 +11120,7 @@
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
       "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -11547,6 +11145,7 @@
       "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
       "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "get-intrinsic": "^1.2.4"
@@ -11602,16 +11201,20 @@
       "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
     },
     "node_modules/iterator.prototype": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
-      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
+      "integrity": "sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-properties": "^1.2.1",
         "get-intrinsic": "^1.2.1",
         "has-symbols": "^1.0.3",
         "reflect.getprototypeof": "^1.0.4",
         "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/jake": {
@@ -13270,23 +12873,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/object.hasown": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.4.tgz",
-      "integrity": "sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/object.values": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
@@ -15218,6 +14804,7 @@
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
       "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -16206,6 +15793,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
@@ -17865,13 +17463,14 @@
       }
     },
     "node_modules/which-builtin-type": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz",
-      "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "function.prototype.name": "^1.1.5",
-        "has-tostringtag": "^1.0.0",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
         "is-async-function": "^2.0.0",
         "is-date-object": "^1.0.5",
         "is-finalizationregistry": "^1.0.2",
@@ -17880,8 +17479,8 @@
         "is-weakref": "^1.0.2",
         "isarray": "^2.0.5",
         "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.9"
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17894,13 +17493,15 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/which-collection": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
       "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-map": "^2.0.3",
         "is-set": "^2.0.3",

client/package.json

@@ -90,29 +90,18 @@
     "build": "dotenvx run --env-file=.env.development.imex -- vite build",
     "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
     "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
-    "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
     "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview",
     "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview",
-    "preview:promanager": "dotenvx run --env-file=.env.development.promanager -- vite preview",
     "build:test:imex": "env-cmd -f .env.test.imex npm run build",
     "build:test:rome": "env-cmd -f .env.test.rome npm run build",
-    "build:test:promanager": "env-cmd -f .env.test.promanager npm run build",
     "build:production:imex": "env-cmd -f .env.production.imex npm run build",
     "build:production:rome": "env-cmd -f .env.production.rome npm run build",
-    "build:production:promanager": "env-cmd -f .env.production.promanager npm run build",
     "test": "cypress open",
     "eject": "react-scripts eject",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
     "eulaize": "node src/utils/eulaize.js",
     "sentry:sourcemaps:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:cypress/recommended"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -132,11 +121,13 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.24.7",
     "@dotenvx/dotenvx": "^1.14.1",
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/react": "^11.13.3",
+    "@eslint/js": "^9.15.0",
     "@sentry/webpack-plugin": "^2.22.4",
     "@testing-library/cypress": "^10.0.2",
     "browserslist": "^4.23.3",
@@ -144,9 +135,11 @@
     "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.14.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.12.0",
     "memfs": "^4.12.0",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",

client/public/firebase-messaging-sw.js

@@ -1,6 +1,6 @@
 // Scripts for firebase and firebase messaging
-importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
-importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
+importScripts("https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js");
+importScripts("https://www.gstatic.com/firebasejs/10.14.1/firebase-messaging-compat.js");
 
 // Initialize the Firebase app in the service worker by passing the generated config
 let firebaseConfig;
@@ -14,7 +14,7 @@ switch (this.location.hostname) {
       storageBucket: "imex-dev.appspot.com",
       messagingSenderId: "759548147434",
       appId: "1:759548147434:web:e8239868a48ceb36700993",
-      measurementId: "G-K5XRBVVB4S",
+      measurementId: "G-K5XRBVVB4S"
     };
     break;
   case "test.imex.online":
@@ -24,7 +24,7 @@ switch (this.location.hostname) {
       projectId: "imex-test",
       storageBucket: "imex-test.appspot.com",
       messagingSenderId: "991923618608",
-      appId: "1:991923618608:web:633437569cdad78299bef5",
+      appId: "1:991923618608:web:633437569cdad78299bef5"
       // measurementId: "${config.measurementId}",
     };
     break;
@@ -38,7 +38,7 @@ switch (this.location.hostname) {
       storageBucket: "imex-prod.appspot.com",
       messagingSenderId: "253497221485",
       appId: "1:253497221485:web:3c81c483b94db84b227a64",
-      measurementId: "G-NTWBKG2L0M",
+      measurementId: "G-NTWBKG2L0M"
     };
 }
 
@@ -49,8 +49,6 @@ const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage(function (payload) {
   // Customize notification here
-  const channel = new BroadcastChannel("imex-sw-messages");
-  channel.postMessage(payload);
-
-  //self.registration.showNotification(notificationTitle, notificationOptions);
+  console.log("[firebase-messaging-sw.js] Received background message ", payload);
+  self.registration.showNotification(notificationTitle, notificationOptions);
 });

client/src/App/App.container.jsx

@@ -2,8 +2,6 @@ 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";
@@ -19,8 +17,6 @@ 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/App/App.jsx

@@ -96,8 +96,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         LogRocket.init(
           InstanceRenderMgr({
             imex: "gvfvfw/bodyshopapp",
-            rome: "rome-online/rome-online",
-            promanager: "" // TODO: AIO Add in log rocket for promanager instances.
+            rome: "rome-online/rome-online"
           })
         );
       }
@@ -134,8 +133,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         <LoadingSpinner
           message={InstanceRenderMgr({
             imex: t("titles.imexonline"),
-            rome: t("titles.romeonline"),
-            promanager: t("titles.promanager")
+            rome: t("titles.romeonline")
           })}
         />
       }
@@ -144,8 +142,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         currentUser={currentUser}
         workspaceCode={InstanceRenderMgr({
           imex: null,
-          rome: "9BkbEseqNqxw8jUH",
-          promanager: "aoJoEifvezYI0Z0P"
+          rome: "9BkbEseqNqxw8jUH"
         })}
       />
 

client/src/App/themeProvider.js

@@ -26,13 +26,11 @@ const defaultTheme = {
   token: {
     colorPrimary: InstanceRenderMgr({
       imex: "#1890ff",
-      rome: "#326ade",
-      promanager: "#1d69a6"
+      rome: "#326ade"
     }),
     colorInfo: InstanceRenderMgr({
       imex: "#1890ff",
-      rome: "#326ade",
-      promanager: "#1d69a6"
+      rome: "#326ade"
     })
   }
 };

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,7 +72,14 @@ export function BillEnterModalLinesComponent({
           <BillLineSearchSelect
             disabled={disabled}
             options={lineData}
-            style={{ width: "100%", minWidth: "10rem" }}
+            style={{
+              width: "20rem",
+              maxWidth: "20rem",
+              minWidth: "10rem",
+              whiteSpace: "normal",
+              height: "auto",
+              minHeight: "32px" // default height of Ant Design inputs
+            }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
               setFieldsValue({
@@ -105,7 +112,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`,
@@ -119,7 +126,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => <Input disabled={disabled} />
+        formInput: (record, index) => <Input.TextArea disabled={disabled} autoSize />
       },
       {
         title: t("billlines.fields.quantity"),
@@ -221,7 +228,6 @@ export function BillEnterModalLinesComponent({
                 }}
               </Form.Item>
             )
-            //Do not need to set for promanager as it will default to Rome.
           })
       },
       {
@@ -455,7 +461,6 @@ export function BillEnterModalLinesComponent({
 
       ...InstanceRenderManager({
         rome: [],
-        promanager: [],
         imex: [
           {
             title: t("billlines.fields.federal_tax_applicable"),
@@ -469,7 +474,6 @@ export function BillEnterModalLinesComponent({
                 initialValue: InstanceRenderManager({
                   imex: true,
                   rome: false,
-                  promanager: false
                 }),
                 name: [field.name, "applicable_taxes", "federal"]
               };
@@ -496,7 +500,6 @@ export function BillEnterModalLinesComponent({
 
       ...InstanceRenderManager({
         rome: [],
-        promanager: [],
         imex: [
           {
             title: t("billlines.fields.local_tax_applicable"),

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={false}
+      popupMatchSelectWidth={true}
       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/bills-list-table/bills-list-table.component.jsx

@@ -2,6 +2,7 @@ import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -13,8 +14,10 @@ import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import { FaTasks } from "react-icons/fa";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -170,6 +173,8 @@ export function BillsListTableComponent({
         )
     : [];
 
+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
+
   return (
     <Card
       title={t("bills.labels.bills")}
@@ -181,6 +186,7 @@ export function BillsListTableComponent({
           {job && job.converted ? (
             <>
               <Button
+                disabled={!hasBillsAccess}
                 onClick={() => {
                   setBillEnterContext({
                     actions: { refetch: billsQuery.refetch },
@@ -190,9 +196,10 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                {t("jobs.actions.postbills")}
+                <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>
               </Button>
               <Button
+                disabled={!hasBillsAccess}
                 onClick={() => {
                   setReconciliationContext({
                     actions: { refetch: billsQuery.refetch },
@@ -203,7 +210,7 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                {t("jobs.actions.reconcile")}
+                <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
               </Button>
             </>
           ) : null}
@@ -211,6 +218,7 @@ export function BillsListTableComponent({
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}
+            disabled={!hasBillsAccess}
             onChange={(e) => {
               e.preventDefault();
               setSearchText(e.target.value);
@@ -226,8 +234,13 @@ export function BillsListTableComponent({
         }}
         columns={columns}
         rowKey="id"
-        dataSource={filteredBills}
+        dataSource={hasBillsAccess ? filteredBills : []}
         onChange={handleTableChange}
+        locale={{
+          ...(!hasBillsAccess && {
+            emptyText: <UpsellComponent upsell={upsellEnum().bills.general} />
+          })
+        }}
       />
     </Card>
   );

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

@@ -1,6 +1,6 @@
-import { DeleteFilled, CopyFilled } from "@ant-design/icons";
+import { CopyFilled, 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, message, notification, Row, Space, Spin, Statistic } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -23,7 +23,14 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type })),
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    ),
   toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment"))
 });
 
@@ -39,7 +46,6 @@ const CardPaymentModalComponent = ({
   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);
   const { t } = useTranslation();
 
@@ -48,24 +54,33 @@ const CardPaymentModalComponent = ({
     skip: !context?.jobid
   });
 
-  //Initialize the intellipay window.
+  const collectIPayFields = () => {
+    const iPayFields = document.querySelectorAll(".ipayfield");
+    const iPayData = {};
+    iPayFields.forEach((field) => {
+      iPayData[field.dataset.ipayname] = field.value;
+    });
+    return iPayData;
+  };
+
   const SetIntellipayCallbackFunctions = () => {
     console.log("*** Set IntelliPay callback functions.");
+
     window.intellipay.runOnClose(() => {
       //window.intellipay.initialize();
     });
 
-    window.intellipay.runOnApproval(async function (response) {
+    window.intellipay.runOnApproval(() => {
       //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?.refetch) actions.refetch();
         setLoading(false);
         toggleModalVisible();
       }, 750);
     });
 
-    window.intellipay.runOnNonApproval(async function (response) {
+    window.intellipay.runOnNonApproval(async (response) => {
       // Mutate unsuccessful payment
 
       const { payments } = form.getFieldsValue();
@@ -98,16 +113,21 @@ const CardPaymentModalComponent = ({
     //Validate
     try {
       await form.validateFields();
-    } catch (error) {
+    } catch {
       setLoading(false);
       return;
     }
 
+    const iPayData = collectIPayFields();
+    const { payments } = form.getFieldsValue();
+
     try {
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
-        paymentSplitMeta: form.getFieldsValue()
+        paymentSplitMeta: form.getFieldsValue(),
+        iPayData: iPayData,
+        comment: btoa(JSON.stringify({ payments, userEmail: currentUser.email }))
       });
 
       if (window.intellipay) {
@@ -116,8 +136,8 @@ const CardPaymentModalComponent = ({
         SetIntellipayCallbackFunctions();
         window.intellipay.autoOpen();
       } else {
-        var rg = document.createRange();
-        let node = rg.createContextualFragment(response.data);
+        const rg = document.createRange();
+        const node = rg.createContextualFragment(response.data);
         document.documentElement.appendChild(node);
         SetIntellipayCallbackFunctions();
         window.intellipay.isAutoOpen = true;
@@ -137,25 +157,27 @@ const CardPaymentModalComponent = ({
     //Validate
     try {
       await form.validateFields();
-    } catch (error) {
+    } catch {
       setLoading(false);
       return;
     }
 
+    const iPayData = collectIPayFields();
+
     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,
+        amount: payments.reduce((acc, val) => acc + (val?.amount || 0), 0),
+        account: payments && data?.jobs?.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null,
         comment: btoa(JSON.stringify({ payments, userEmail: currentUser.email })),
-        paymentSplitMeta: form.getFieldsValue()
+        paymentSplitMeta: form.getFieldsValue(),
+        iPayData: iPayData
       });
-      if (response.data) {
-        setPaymentLink(response.data?.shorUrl);
-        navigator.clipboard.writeText(response.data?.shorUrl);
+
+      if (response?.data?.shorUrl) {
+        setPaymentLink(response.data.shorUrl);
+        await navigator.clipboard.writeText(response.data.shorUrl);
         message.success(t("general.actions.copied"));
       }
       setLoading(false);
@@ -179,67 +201,44 @@ const CardPaymentModalComponent = ({
           }}
         >
           <Form.List name={["payments"]}>
-            {(fields, { add, remove, move }) => {
-              return (
-                <div>
-                  {fields.map((field, index) => (
-                    <Form.Item key={field.key}>
-                      <Row gutter={[16, 16]}>
-                        <Col span={16}>
-                          <Form.Item
-                            key={`${index}jobid`}
-                            label={t("jobs.fields.ro_number")}
-                            name={[field.name, "jobid"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
-                          >
-                            <JobSearchSelectComponent notExported={false} clm_no />
-                          </Form.Item>
-                        </Col>
-                        <Col span={6}>
-                          <Form.Item
-                            key={`${index}amount`}
-                            label={t("payments.fields.amount")}
-                            name={[field.name, "amount"]}
-                            rules={[
-                              {
-                                required: true
-                                //message: t("general.validation.required"),
-                              }
-                            ]}
-                          >
-                            <CurrencyFormItemComponent />
-                          </Form.Item>
-                        </Col>
-                        <Col span={2}>
-                          <DeleteFilled
-                            style={{ margin: "1rem" }}
-                            onClick={() => {
-                              remove(field.name);
-                            }}
-                          />
-                        </Col>
-                      </Row>
-                    </Form.Item>
-                  ))}
-                  <Form.Item>
-                    <Button
-                      type="dashed"
-                      onClick={() => {
-                        add();
-                      }}
-                      style={{ width: "100%" }}
-                    >
-                      {t("general.actions.add")}
-                    </Button>
+            {(fields, { add, remove }) => (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key}>
+                    <Row gutter={[16, 16]}>
+                      <Col span={16}>
+                        <Form.Item
+                          key={`${index}jobid`}
+                          label={t("jobs.fields.ro_number")}
+                          name={[field.name, "jobid"]}
+                          rules={[{ required: true }]}
+                        >
+                          <JobSearchSelectComponent notExported={false} clm_no />
+                        </Form.Item>
+                      </Col>
+                      <Col span={6}>
+                        <Form.Item
+                          key={`${index}amount`}
+                          label={t("payments.fields.amount")}
+                          name={[field.name, "amount"]}
+                          rules={[{ required: true }]}
+                        >
+                          <CurrencyFormItemComponent />
+                        </Form.Item>
+                      </Col>
+                      <Col span={2}>
+                        <DeleteFilled style={{ margin: "1rem" }} onClick={() => remove(field.name)} />
+                      </Col>
+                    </Row>
                   </Form.Item>
-                </div>
-              );
-            }}
+                ))}
+                <Form.Item>
+                  <Button type="dashed" onClick={() => add()} style={{ width: "100%" }}>
+                    {t("general.actions.add")}
+                  </Button>
+                </Form.Item>
+              </div>
+            )}
           </Form.List>
 
           <Form.Item
@@ -283,9 +282,7 @@ const CardPaymentModalComponent = ({
           >
             {() => {
               const { payments } = form.getFieldsValue();
-              const totalAmountToCharge = payments?.reduce((acc, val) => {
-                return acc + (val?.amount || 0);
-              }, 0);
+              const totalAmountToCharge = payments?.reduce((acc, val) => acc + (val?.amount || 0), 0);
               return (
                 <Space style={{ float: "right" }}>
                   <Statistic title="Amount To Charge" value={totalAmountToCharge} precision={2} />

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,89 +1,50 @@
 import { useApolloClient } from "@apollo/client";
-import { getToken, onMessage } from "@firebase/messaging";
-import { Button, notification, Space } from "antd";
+import { getToken } from "@firebase/messaging";
 import axios from "axios";
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import SocketContext from "../../contexts/SocketIO/socketContext";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
-import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
+import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
+  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
     if (!bodyshop || !bodyshop.messagingservicesid) return;
 
-    async function SubscribeToTopic() {
+    async function SubscribeToTopicForFCMNotification() {
       try {
-        const r = await axios.post("/notifications/subscribe", {
+        await requestForToken();
+        await axios.post("/notifications/subscribe", {
           fcm_tokens: await getToken(messaging, {
             vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
           }),
           type: "messaging",
           imexshopid: bodyshop.imexshopid
         });
-        console.log("FCM Topic Subscription", r.data);
       } catch (error) {
         console.log("Error attempting to subscribe to messaging topic: ", error);
-        notification.open({
-          key: "fcm",
-          type: "warning",
-          message: t("general.errors.fcm"),
-          btn: (
-            <Space>
-              <Button
-                onClick={async () => {
-                  await requestForToken();
-                  SubscribeToTopic();
-                }}
-              >
-                {t("general.actions.tryagain")}
-              </Button>
-              <Button
-                onClick={() => {
-                  const win = window.open(
-                    "https://help.imex.online/en/article/enabling-notifications-o978xi/",
-                    "_blank"
-                  );
-                  win.focus();
-                }}
-              >
-                {t("general.labels.help")}
-              </Button>
-            </Space>
-          )
-        });
       }
     }
 
-    SubscribeToTopic();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bodyshop]);
+    SubscribeToTopicForFCMNotification();
 
-  useEffect(() => {
-    function handleMessage(payload) {
-      FcmHandler({
-        client,
-        payload: (payload && payload.data && payload.data.data) || payload.data
-      });
+    //Register WS handlers
+    if (socket && socket.connected) {
+      registerMessagingHandlers({ socket, client });
     }
 
-    let stopMessageListener, channel;
-    try {
-      stopMessageListener = onMessage(messaging, handleMessage);
-      channel = new BroadcastChannel("imex-sw-messages");
-      channel.addEventListener("message", handleMessage);
-    } catch (error) {
-      console.log("Unable to set event listeners.");
-    }
     return () => {
-      stopMessageListener && stopMessageListener();
-      channel && channel.removeEventListener("message", handleMessage);
+      if (socket && socket.connected) {
+        unregisterMessagingHandlers({ socket });
+      }
     };
-  }, [client]);
+  }, [bodyshop, socket, t, client]);
 
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 

client/src/components/chat-affix/registerMessagingSocketHandlers.js

@@ -0,0 +1,434 @@
+import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
+import { gql } from "@apollo/client";
+
+const logLocal = (message, ...args) => {
+  if (import.meta.env.VITE_APP_IS_TEST || !import.meta.env.PROD) {
+    console.log(`==================== ${message} ====================`);
+    console.dir({ ...args });
+  }
+};
+
+// Utility function to enrich conversation data
+const enrichConversation = (conversation, isOutbound) => ({
+  ...conversation,
+  updated_at: conversation.updated_at || new Date().toISOString(),
+  unreadcnt: conversation.unreadcnt || 0,
+  archived: conversation.archived || false,
+  label: conversation.label || null,
+  job_conversations: conversation.job_conversations || [],
+  messages_aggregate: conversation.messages_aggregate || {
+    __typename: "messages_aggregate",
+    aggregate: {
+      __typename: "messages_aggregate_fields",
+      count: isOutbound ? 0 : 1
+    }
+  },
+  __typename: "conversations"
+});
+
+export const registerMessagingHandlers = ({ socket, client }) => {
+  if (!(socket && client)) return;
+
+  const handleNewMessageSummary = async (message) => {
+    const { conversationId, newConversation, existingConversation, isoutbound } = message;
+
+    logLocal("handleNewMessageSummary - Start", { message, isNew: !existingConversation });
+
+    const queryVariables = { offset: 0 };
+
+    if (!existingConversation && conversationId) {
+      // Attempt to read from the cache to determine if this is actually a new conversation
+      try {
+        const cachedConversation = client.cache.readFragment({
+          id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+          fragment: gql`
+            fragment ExistingConversationCheck on conversations {
+              id
+            }
+          `
+        });
+
+        if (cachedConversation) {
+          logLocal("handleNewMessageSummary - Existing Conversation inferred from cache", {
+            conversationId
+          });
+          return handleNewMessageSummary({
+            ...message,
+            existingConversation: true
+          });
+        }
+      } catch (error) {
+        logLocal("handleNewMessageSummary - Cache miss", { conversationId });
+      }
+    }
+
+    // Handle new conversation
+    if (!existingConversation && newConversation?.phone_num) {
+      logLocal("handleNewMessageSummary - New Conversation", newConversation);
+
+      try {
+        const queryResults = client.cache.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: queryVariables
+        });
+
+        const existingConversations = queryResults?.conversations || [];
+        const enrichedConversation = enrichConversation(newConversation, isoutbound);
+
+        if (!existingConversations.some((conv) => conv.id === enrichedConversation.id)) {
+          client.cache.modify({
+            id: "ROOT_QUERY",
+            fields: {
+              conversations(existingConversations = []) {
+                return [enrichedConversation, ...existingConversations];
+              }
+            }
+          });
+        }
+      } catch (error) {
+        console.error("Error updating cache for new conversation:", error);
+      }
+      return;
+    }
+
+    // Handle existing conversation
+    if (existingConversation) {
+      try {
+        client.cache.modify({
+          id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+          fields: {
+            updated_at: () => new Date().toISOString(),
+            archived: () => false,
+            messages_aggregate(cached = { aggregate: { count: 0 } }) {
+              const currentCount = cached.aggregate?.count || 0;
+              if (!isoutbound) {
+                return {
+                  __typename: "messages_aggregate",
+                  aggregate: {
+                    __typename: "messages_aggregate_fields",
+                    count: currentCount + 1
+                  }
+                };
+              }
+              return cached;
+            }
+          }
+        });
+      } catch (error) {
+        console.error("Error updating cache for existing conversation:", error);
+      }
+
+      return;
+    }
+
+    logLocal("New Conversation Summary finished without work", { message });
+  };
+
+  const handleNewMessageDetailed = (message) => {
+    const { conversationId, newMessage } = message;
+
+    logLocal("handleNewMessageDetailed - Start", message);
+
+    try {
+      // Check if the conversation exists in the cache
+      const queryResults = client.cache.readQuery({
+        query: GET_CONVERSATION_DETAILS,
+        variables: { conversationId }
+      });
+
+      if (!queryResults?.conversations_by_pk) {
+        console.warn("Conversation not found in cache:", { conversationId });
+        return;
+      }
+
+      // Append the new message to the conversation's message list using cache.modify
+      client.cache.modify({
+        id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+        fields: {
+          messages(existingMessages = []) {
+            return [...existingMessages, newMessage];
+          }
+        }
+      });
+
+      logLocal("handleNewMessageDetailed - Message appended successfully", {
+        conversationId,
+        newMessage
+      });
+    } catch (error) {
+      console.error("Error updating conversation messages in cache:", error);
+    }
+  };
+
+  const handleMessageChanged = (message) => {
+    if (!message) {
+      logLocal("handleMessageChanged - No message provided", message);
+      return;
+    }
+
+    logLocal("handleMessageChanged - Start", message);
+
+    try {
+      client.cache.modify({
+        id: client.cache.identify({ __typename: "conversations", id: message.conversationid }),
+        fields: {
+          messages(existingMessages = [], { readField }) {
+            return existingMessages.map((messageRef) => {
+              // Check if this is the message to update
+              if (readField("id", messageRef) === message.id) {
+                const currentStatus = readField("status", messageRef);
+
+                // Handle known types of message changes
+                switch (message.type) {
+                  case "status-changed":
+                    // Prevent overwriting if the current status is already "delivered"
+                    if (currentStatus === "delivered") {
+                      logLocal("handleMessageChanged - Status already delivered, skipping update", {
+                        messageId: message.id
+                      });
+                      return messageRef;
+                    }
+
+                    // Update the status field
+                    return {
+                      ...messageRef,
+                      status: message.status
+                    };
+
+                  case "text-updated":
+                    // Handle changes to the message text
+                    return {
+                      ...messageRef,
+                      text: message.text
+                    };
+
+                  // Add cases for other known message types as needed
+
+                  default:
+                    // Log a warning for unhandled message types
+                    logLocal("handleMessageChanged - Unhandled message type", { type: message.type });
+                    return messageRef;
+                }
+              }
+
+              return messageRef; // Keep other messages unchanged
+            });
+          }
+        }
+      });
+
+      logLocal("handleMessageChanged - Message updated successfully", {
+        messageId: message.id,
+        type: message.type
+      });
+    } catch (error) {
+      console.error("handleMessageChanged - Error modifying cache:", error);
+    }
+  };
+
+  const handleConversationChanged = async (data) => {
+    if (!data) {
+      logLocal("handleConversationChanged - No data provided", data);
+      return;
+    }
+
+    const { conversationId, type, job_conversations, messageIds, ...fields } = data;
+    logLocal("handleConversationChanged - Start", data);
+
+    const updatedAt = new Date().toISOString();
+
+    const updateConversationList = (newConversation) => {
+      try {
+        const existingList = client.cache.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: { offset: 0 }
+        });
+
+        const updatedList = existingList?.conversations
+          ? [
+              newConversation,
+              ...existingList.conversations.filter((conv) => conv.id !== newConversation.id) // Prevent duplicates
+            ]
+          : [newConversation];
+
+        client.cache.writeQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: { offset: 0 },
+          data: {
+            conversations: updatedList
+          }
+        });
+
+        logLocal("handleConversationChanged - Conversation list updated successfully", newConversation);
+      } catch (error) {
+        console.error("Error updating conversation list in the cache:", error);
+      }
+    };
+
+    // Handle specific types
+    try {
+      switch (type) {
+        case "conversation-marked-read":
+          if (conversationId && messageIds?.length > 0) {
+            client.cache.modify({
+              id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+              fields: {
+                messages(existingMessages = [], { readField }) {
+                  return existingMessages.map((message) => {
+                    if (messageIds.includes(readField("id", message))) {
+                      return { ...message, read: true };
+                    }
+                    return message;
+                  });
+                },
+                messages_aggregate: () => ({
+                  __typename: "messages_aggregate",
+                  aggregate: { __typename: "messages_aggregate_fields", count: 0 }
+                })
+              }
+            });
+          }
+          break;
+
+        case "conversation-created":
+          updateConversationList({ ...fields, job_conversations, updated_at: updatedAt });
+          break;
+
+        case "conversation-unarchived":
+        case "conversation-archived":
+          // Would like to someday figure out how to get this working without refetch queries,
+          // But I have but a solid 4 hours into it, and there are just too many weird occurrences
+          try {
+            const listQueryVariables = { offset: 0 };
+            const detailsQueryVariables = { conversationId };
+
+            // Check if conversation details exist in the cache
+            const detailsExist = !!client.cache.readQuery({
+              query: GET_CONVERSATION_DETAILS,
+              variables: detailsQueryVariables
+            });
+
+            // Refetch conversation list
+            await client.refetchQueries({
+              include: [CONVERSATION_LIST_QUERY, ...(detailsExist ? [GET_CONVERSATION_DETAILS] : [])],
+              variables: [
+                { query: CONVERSATION_LIST_QUERY, variables: listQueryVariables },
+                ...(detailsExist
+                  ? [
+                      {
+                        query: GET_CONVERSATION_DETAILS,
+                        variables: detailsQueryVariables
+                      }
+                    ]
+                  : [])
+              ]
+            });
+
+            logLocal("handleConversationChanged - Refetched queries after state change", {
+              conversationId,
+              type
+            });
+          } catch (error) {
+            console.error("Error refetching queries after conversation state change:", error);
+          }
+          break;
+
+        case "tag-added":
+          // Ensure `job_conversations` is properly formatted
+          const formattedJobConversations = job_conversations.map((jc) => ({
+            __typename: "job_conversations",
+            jobid: jc.jobid || jc.job?.id,
+            conversationid: conversationId,
+            job: jc.job || {
+              __typename: "jobs",
+              id: data.selectedJob.id,
+              ro_number: data.selectedJob.ro_number,
+              ownr_co_nm: data.selectedJob.ownr_co_nm,
+              ownr_fn: data.selectedJob.ownr_fn,
+              ownr_ln: data.selectedJob.ownr_ln
+            }
+          }));
+
+          client.cache.modify({
+            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+            fields: {
+              job_conversations: (existing = []) => {
+                // Ensure no duplicates based on both `conversationid` and `jobid`
+                const existingLinks = new Set(
+                  existing.map((jc) => {
+                    const jobId = client.cache.readFragment({
+                      id: client.cache.identify(jc),
+                      fragment: gql`
+                        fragment JobConversationLinkAdded on job_conversations {
+                          jobid
+                          conversationid
+                        }
+                      `
+                    })?.jobid;
+                    return `${jobId}:${conversationId}`; // Unique identifier for a job-conversation link
+                  })
+                );
+
+                const newItems = formattedJobConversations.filter((jc) => {
+                  const uniqueLink = `${jc.jobid}:${jc.conversationid}`;
+                  return !existingLinks.has(uniqueLink);
+                });
+
+                return [...existing, ...newItems];
+              }
+            }
+          });
+
+          break;
+
+        case "tag-removed":
+          try {
+            const conversationCacheId = client.cache.identify({ __typename: "conversations", id: conversationId });
+
+            // Evict the specific cache entry for job_conversations
+            client.cache.evict({
+              id: conversationCacheId,
+              fieldName: "job_conversations"
+            });
+
+            // Garbage collect evicted entries
+            client.cache.gc();
+
+            logLocal("handleConversationChanged - tag removed - Refetched conversation list after state change", {
+              conversationId,
+              type
+            });
+          } catch (error) {
+            console.error("Error refetching queries after conversation state change: (Tag Removed)", error);
+          }
+
+          break;
+        default:
+          logLocal("handleConversationChanged - Unhandled type", { type });
+          client.cache.modify({
+            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+            fields: {
+              ...Object.fromEntries(
+                Object.entries(fields).map(([key, value]) => [key, (cached) => (value !== undefined ? value : cached)])
+              )
+            }
+          });
+      }
+    } catch (error) {
+      console.error("Error handling conversation changes:", { type, error });
+    }
+  };
+
+  socket.on("new-message-summary", handleNewMessageSummary);
+  socket.on("new-message-detailed", handleNewMessageDetailed);
+  socket.on("message-changed", handleMessageChanged);
+  socket.on("conversation-changed", handleConversationChanged);
+};
+
+export const unregisterMessagingHandlers = ({ socket }) => {
+  if (!socket) return;
+  socket.off("new-message-summary");
+  socket.off("new-message-detailed");
+  socket.off("message-changed");
+  socket.off("conversation-changed");
+};

client/src/components/chat-archive-button/chat-archive-button.component.jsx

@@ -1,27 +1,49 @@
 import { useMutation } from "@apollo/client";
 import { Button } from "antd";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
 
-export default function ChatArchiveButton({ conversation }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = () => ({});
+
+export function ChatArchiveButton({ conversation, bodyshop }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
+  const { socket } = useContext(SocketContext);
+
   const handleToggleArchive = async () => {
     setLoading(true);
 
-    await updateConversation({
-      variables: { id: conversation.id, archived: !conversation.archived },
-      refetchQueries: ["CONVERSATION_LIST_QUERY"]
+    const updatedConversation = await updateConversation({
+      variables: { id: conversation.id, archived: !conversation.archived }
     });
 
+    if (socket) {
+      socket.emit("conversation-modified", {
+        type: "conversation-archived",
+        conversationId: conversation.id,
+        bodyshopId: bodyshop.id,
+        archived: updatedConversation.data.update_conversations_by_pk.archived
+      });
+    }
+
     setLoading(false);
   };
 
   return (
-    <Button onClick={handleToggleArchive} loading={loading} type="primary">
+    <Button onClick={handleToggleArchive} loading={loading} className="archive-button" type="primary">
       {conversation.archived ? t("messaging.labels.unarchive") : t("messaging.labels.archive")}
     </Button>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatArchiveButton);

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -1,7 +1,7 @@
 import { Badge, Card, List, Space, Tag } from "antd";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList } from "react-virtualized";
+import { Virtuoso } from "react-virtuoso";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
@@ -19,19 +19,26 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
 });
 
-function ChatConversationListComponent({
-  conversationList,
-  selectedConversation,
-  setSelectedConversation,
-  loadMoreConversations
-}) {
-  const cache = new CellMeasurerCache({
-    fixedWidth: true,
-    defaultHeight: 60
-  });
+function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
+  // That comma is there for a reason, do not remove it
+  const [, forceUpdate] = useState(false);
 
-  const rowRenderer = ({ index, key, style, parent }) => {
-    const item = conversationList[index];
+  // Re-render every minute
+  useEffect(() => {
+    const interval = setInterval(() => {
+      forceUpdate((prev) => !prev); // Toggle state to trigger re-render
+    }, 60000); // 1 minute in milliseconds
+
+    return () => clearInterval(interval); // Cleanup on unmount
+  }, []);
+
+  // Memoize the sorted conversation list
+  const sortedConversationList = React.useMemo(() => {
+    return _.orderBy(conversationList, ["updated_at"], ["desc"]);
+  }, [conversationList]);
+
+  const renderConversation = (index) => {
+    const item = sortedConversationList[index];
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
       item.job_conversations.length > 0
@@ -52,7 +59,8 @@ function ChatConversationListComponent({
         )}
       </>
     );
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0} />;
+
+    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
 
     const getCardStyle = () =>
       item.id === selectedConversation
@@ -60,40 +68,26 @@ function ChatConversationListComponent({
         : { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
 
     return (
-      <CellMeasurer key={key} cache={cache} parent={parent} columnIndex={0} rowIndex={index}>
-        <List.Item
-          onClick={() => setSelectedConversation(item.id)}
-          style={style}
-          className={`chat-list-item
-    ${item.id === selectedConversation ? "chat-list-selected-conversation" : null}`}
-        >
-          <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
-            <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
-            <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
-          </Card>
-        </List.Item>
-      </CellMeasurer>
+      <List.Item
+        key={item.id}
+        onClick={() => setSelectedConversation(item.id)}
+        className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
+      >
+        <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
+          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
+          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+        </Card>
+      </List.Item>
     );
   };
 
   return (
     <div className="chat-list-container">
-      <AutoSizer>
-        {({ height, width }) => (
-          <VirtualizedList
-            height={height}
-            width={width}
-            rowCount={conversationList.length}
-            rowHeight={cache.rowHeight}
-            rowRenderer={rowRenderer}
-            onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
-              if (scrollTop + clientHeight === scrollHeight) {
-                loadMoreConversations();
-              }
-            }}
-          />
-        )}
-      </AutoSizer>
+      <Virtuoso
+        data={sortedConversationList}
+        itemContent={(index) => renderConversation(index)}
+        style={{ height: "100%", width: "100%" }}
+      />
     </div>
   );
 }

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -1,7 +1,7 @@
 .chat-list-container {
-  overflow: hidden;
-  height: 100%;
+  height: 100%; /* Ensure it takes up the full available height */
   border: 1px solid gainsboro;
+  overflow: auto; /* Allow scrolling for the Virtuoso component */
 }
 
 .chat-list-item {
@@ -14,3 +14,24 @@
     color: #ff7a00;
   }
 }
+
+/* Virtuoso item container adjustments */
+.chat-list-container > div {
+  height: 100%; /* Ensure Virtuoso takes full height */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Add spacing and better alignment for items */
+.chat-list-item {
+  padding: 0.5rem 0; /* Add spacing between list items */
+
+  .ant-card {
+    border-radius: 8px; /* Slight rounding for card edges */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for better definition */
+  }
+
+  &:hover .ant-card {
+    border-color: #ff7a00; /* Highlight border on hover */
+  }
+}

client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx

@@ -1,18 +1,29 @@
 import { useMutation } from "@apollo/client";
 import { Tag } from "antd";
-import React from "react";
+import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
 
-export default function ChatConversationTitleTags({ jobConversations }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = () => ({});
+
+export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
   const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
+  const { socket } = useContext(SocketContext);
 
-  const handleRemoveTag = (jobId) => {
+  const handleRemoveTag = async (jobId) => {
     const convId = jobConversations[0].conversationid;
     if (!!convId) {
-      removeJobConversation({
+      await removeJobConversation({
         variables: {
           conversationId: convId,
           jobId: jobId
@@ -28,6 +39,17 @@ export default function ChatConversationTitleTags({ jobConversations }) {
           });
         }
       });
+
+      if (socket) {
+        // Emit the `conversation-modified` event
+        socket.emit("conversation-modified", {
+          bodyshopId: bodyshop.id,
+          conversationId: convId,
+          type: "tag-removed",
+          jobId: jobId
+        });
+      }
+
       logImEXEvent("messaging_remove_job_tag", {
         conversationId: convId,
         jobId: jobId
@@ -54,3 +76,5 @@ export default function ChatConversationTitleTags({ jobConversations }) {
     </div>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationTitleTags);

client/src/components/chat-conversation-title/chat-conversation-title.component.jsx

@@ -6,10 +6,16 @@ import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conv
 import ChatLabelComponent from "../chat-label/chat-label.component";
 import ChatPrintButton from "../chat-print-button/chat-print-button.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
+import { createStructuredSelector } from "reselect";
+import { connect } from "react-redux";
 
-export default function ChatConversationTitle({ conversation }) {
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = () => ({});
+
+export function ChatConversationTitle({ conversation }) {
   return (
-    <Space wrap>
+    <Space className="chat-title" wrap>
       <PhoneNumberFormatter>{conversation && conversation.phone_num}</PhoneNumberFormatter>
       <ChatLabelComponent conversation={conversation} />
       <ChatPrintButton conversation={conversation} />
@@ -19,3 +25,5 @@ export default function ChatConversationTitle({ conversation }) {
     </Space>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationTitle);

client/src/components/chat-conversation/chat-conversation.component.jsx

@@ -5,10 +5,26 @@ import ChatMessageListComponent from "../chat-messages-list/chat-message-list.co
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import "./chat-conversation.styles.scss";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
 
-export default function ChatConversationComponent({ subState, conversation, messages, handleMarkConversationAsRead }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = () => ({});
+
+export function ChatConversationComponent({
+  subState,
+  conversation,
+  messages,
+  handleMarkConversationAsRead,
+  bodyshop
+}) {
   const [loading, error] = subState;
 
+  if (conversation?.archived) return null;
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -18,9 +34,11 @@ export default function ChatConversationComponent({ subState, conversation, mess
       onMouseDown={handleMarkConversationAsRead}
       onKeyDown={handleMarkConversationAsRead}
     >
-      <ChatConversationTitle conversation={conversation} />
+      <ChatConversationTitle conversation={conversation} bodyshop={bodyshop} />
       <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationComponent);

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -1,22 +1,25 @@
-import { useMutation, useQuery, useSubscription } from "@apollo/client";
-import React, { useState } from "react";
+import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import axios from "axios";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
-import { MARK_MESSAGES_AS_READ_BY_CONVERSATION } from "../../graphql/messages.queries";
+import SocketContext from "../../contexts/SocketIO/socketContext";
+import { GET_CONVERSATION_DETAILS, CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
-import ChatConversationComponent from "./chat-conversation.component";
-import axios from "axios";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import ChatConversationComponent from "./chat-conversation.component";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
   bodyshop: selectBodyshop
 });
 
-export default connect(mapStateToProps, null)(ChatConversationContainer);
+function ChatConversationContainer({ bodyshop, selectedConversation }) {
+  const client = useApolloClient();
+  const { socket } = useContext(SocketContext);
+  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
 
-export function ChatConversationContainer({ bodyshop, selectedConversation }) {
+  // Fetch conversation details
   const {
     loading: convoLoading,
     error: convoError,
@@ -27,55 +30,145 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
     nextFetchPolicy: "network-only"
   });
 
-  const { loading, error, data } = useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
-    variables: { conversationId: selectedConversation }
-  });
-
-  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
-
-  const [markConversationRead] = useMutation(MARK_MESSAGES_AS_READ_BY_CONVERSATION, {
+  // Subscription for conversation updates
+  useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
+    skip: socket?.connected,
     variables: { conversationId: selectedConversation },
-    refetchQueries: ["UNREAD_CONVERSATION_COUNT"],
-    update(cache) {
-      cache.modify({
-        id: cache.identify({
-          __typename: "conversations",
-          id: selectedConversation
-        }),
-        fields: {
-          messages_aggregate(cached) {
-            return { aggregate: { count: 0 } };
+    onData: ({ data: subscriptionResult, client }) => {
+      // Extract the messages array from the result
+      const messages = subscriptionResult?.data?.messages;
+      if (!messages || messages.length === 0) {
+        console.warn("No messages found in subscription result.");
+        return;
+      }
+
+      messages.forEach((message) => {
+        const messageRef = client.cache.identify(message);
+        // Write the new message to the cache
+        client.cache.writeFragment({
+          id: messageRef,
+          fragment: gql`
+            fragment NewMessage on messages {
+              id
+              status
+              text
+              isoutbound
+              image
+              image_path
+              userid
+              created_at
+              read
+            }
+          `,
+          data: message
+        });
+
+        // Update the conversation cache to include the new message
+        client.cache.modify({
+          id: client.cache.identify({ __typename: "conversations", id: selectedConversation }),
+          fields: {
+            messages(existingMessages = []) {
+              const alreadyExists = existingMessages.some((msg) => msg.__ref === messageRef);
+              if (alreadyExists) return existingMessages;
+              return [...existingMessages, { __ref: messageRef }];
+            },
+            updated_at() {
+              return message.created_at;
+            }
           }
-        }
+        });
       });
     }
   });
 
-  const unreadCount =
-    data &&
-    data.messages &&
-    data.messages.reduce((acc, val) => {
-      return !val.read && !val.isoutbound ? acc + 1 : acc;
-    }, 0);
+  const updateCacheWithReadMessages = useCallback(
+    (conversationId, messageIds) => {
+      if (!conversationId || !messageIds?.length) return;
 
-  const handleMarkConversationAsRead = async () => {
-    if (unreadCount > 0 && !!selectedConversation && !markingAsReadInProgress) {
-      setMarkingAsReadInProgress(true);
-      await markConversationRead({});
-      await axios.post("/sms/markConversationRead", {
-        conversationid: selectedConversation,
-        imexshopid: bodyshop.imexshopid
+      messageIds.forEach((messageId) => {
+        client.cache.modify({
+          id: client.cache.identify({ __typename: "messages", id: messageId }),
+          fields: {
+            read: () => true
+          }
+        });
       });
-      setMarkingAsReadInProgress(false);
+    },
+    [client.cache]
+  );
+
+  // WebSocket event handlers
+  useEffect(() => {
+    if (!socket?.connected) return;
+
+    const handleConversationChange = (data) => {
+      if (data.type === "conversation-marked-read") {
+        const { conversationId, messageIds } = data;
+        updateCacheWithReadMessages(conversationId, messageIds);
+      }
+    };
+
+    socket.on("conversation-changed", handleConversationChange);
+
+    return () => {
+      socket.off("conversation-changed", handleConversationChange);
+    };
+  }, [socket, updateCacheWithReadMessages]);
+
+  // Join and leave conversation via WebSocket
+  useEffect(() => {
+    if (!socket?.connected || !selectedConversation || !bodyshop?.id) return;
+
+    socket.emit("join-bodyshop-conversation", {
+      bodyshopId: bodyshop.id,
+      conversationId: selectedConversation
+    });
+
+    return () => {
+      socket.emit("leave-bodyshop-conversation", {
+        bodyshopId: bodyshop.id,
+        conversationId: selectedConversation
+      });
+    };
+  }, [socket, bodyshop, selectedConversation]);
+
+  // Mark conversation as read
+  const handleMarkConversationAsRead = async () => {
+    if (!convoData || markingAsReadInProgress) return;
+
+    const conversation = convoData.conversations_by_pk;
+    if (!conversation) return;
+
+    const unreadMessageIds = conversation.messages
+      ?.filter((message) => !message.read && !message.isoutbound)
+      .map((message) => message.id);
+
+    if (unreadMessageIds?.length > 0) {
+      setMarkingAsReadInProgress(true);
+      try {
+        await axios.post("/sms/markConversationRead", {
+          conversation,
+          imexshopid: bodyshop?.imexshopid,
+          bodyshopid: bodyshop?.id
+        });
+
+        updateCacheWithReadMessages(selectedConversation, unreadMessageIds);
+      } catch (error) {
+        console.error("Error marking conversation as read:", error.message);
+      } finally {
+        setMarkingAsReadInProgress(false);
+      }
     }
   };
 
   return (
     <ChatConversationComponent
-      subState={[loading || convoLoading, error || convoError]}
-      conversation={convoData ? convoData.conversations_by_pk : {}}
-      messages={data ? data.messages : []}
+      subState={[convoLoading, convoError]}
+      conversation={convoData?.conversations_by_pk || {}}
+      messages={convoData?.conversations_by_pk?.messages || []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );
 }
+
+export default connect(mapStateToProps)(ChatConversationContainer);

client/src/components/chat-label/chat-label.component.jsx

@@ -1,14 +1,25 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Input, notification, Spin, Tag, Tooltip } from "antd";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
 
-export default function ChatLabel({ conversation }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export function ChatLabel({ conversation, bodyshop }) {
   const [loading, setLoading] = useState(false);
   const [editing, setEditing] = useState(false);
   const [value, setValue] = useState(conversation.label);
+  const { socket } = useContext(SocketContext);
 
   const { t } = useTranslation();
   const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);
@@ -26,6 +37,14 @@ export default function ChatLabel({ conversation }) {
           })
         });
       } else {
+        if (socket) {
+          socket.emit("conversation-modified", {
+            type: "label-updated",
+            conversationId: conversation.id,
+            bodyshopId: bodyshop.id,
+            label: value
+          });
+        }
         setEditing(false);
       }
     } catch (error) {
@@ -57,3 +76,5 @@ export default function ChatLabel({ conversation }) {
     );
   }
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatLabel);

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,106 +1,87 @@
-import Icon from "@ant-design/icons";
-import { Tooltip } from "antd";
-import i18n from "i18next";
-import dayjs from "../../utils/day";
-import React, { useEffect, useRef } from "react";
-import { MdDone, MdDoneAll } from "react-icons/md";
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { renderMessage } from "./renderMessage";
 import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
-  const virtualizedListRef = useRef(null);
+  const virtuosoRef = useRef(null);
+  const [atBottom, setAtBottom] = useState(true);
+  const loadedImagesRef = useRef(0);
 
-  const _cache = new CellMeasurerCache({
-    fixedWidth: true,
-    // minHeight: 50,
-    defaultHeight: 100
-  });
-
-  const scrollToBottom = (renderedrows) => {
-    //console.log("Scrolling to", messages.length);
-    // !!virtualizedListRef.current &&
-    //   virtualizedListRef.current.scrollToRow(messages.length);
-    // Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
-    //Scrolling does not work on this version of React.
+  const handleScrollStateChange = (isAtBottom) => {
+    setAtBottom(isAtBottom);
   };
 
-  useEffect(scrollToBottom, [messages]);
-
-  const _rowRenderer = ({ index, key, parent, style }) => {
-    return (
-      <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
-        {({ measure, registerChild }) => (
-          <div
-            ref={registerChild}
-            onLoad={measure}
-            style={style}
-            className={`${messages[index].isoutbound ? "mine messages" : "yours messages"}`}
-          >
-            <div className="message msgmargin">
-              {MessageRender(messages[index])}
-              {StatusRender(messages[index].status)}
-            </div>
-            {messages[index].isoutbound && (
-              <div style={{ fontSize: 10 }}>
-                {i18n.t("messaging.labels.sentby", {
-                  by: messages[index].userid,
-                  time: dayjs(messages[index].created_at).format("MM/DD/YYYY @ hh:mm a")
-                })}
-              </div>
-            )}
-          </div>
-        )}
-      </CellMeasurer>
-    );
+  const resetImageLoadState = () => {
+    loadedImagesRef.current = 0;
   };
 
+  const preloadImages = useCallback((imagePaths, onComplete) => {
+    resetImageLoadState();
+
+    if (imagePaths.length === 0) {
+      onComplete();
+      return;
+    }
+
+    imagePaths.forEach((url) => {
+      const img = new Image();
+      img.src = url;
+      img.onload = img.onerror = () => {
+        loadedImagesRef.current += 1;
+        if (loadedImagesRef.current === imagePaths.length) {
+          onComplete();
+        }
+      };
+    });
+  }, []);
+
+  // Ensure all images are loaded on initial render
+  useEffect(() => {
+    const imagePaths = messages
+      .filter((message) => message.image && message.image_path?.length > 0)
+      .flatMap((message) => message.image_path);
+
+    preloadImages(imagePaths, () => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({
+          index: messages.length - 1,
+          align: "end",
+          behavior: "auto"
+        });
+      }
+    });
+  }, [messages, preloadImages]);
+
+  // Handle scrolling when new messages are added
+  useEffect(() => {
+    if (!atBottom) return;
+
+    const latestMessage = messages[messages.length - 1];
+    const imagePaths = latestMessage?.image_path || [];
+
+    preloadImages(imagePaths, () => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({
+          index: messages.length - 1,
+          align: "end",
+          behavior: "smooth"
+        });
+      }
+    });
+  }, [messages, atBottom, preloadImages]);
+
   return (
     <div className="chat">
-      <AutoSizer>
-        {({ height, width }) => (
-          <List
-            ref={virtualizedListRef}
-            width={width}
-            height={height}
-            rowHeight={_cache.rowHeight}
-            rowRenderer={_rowRenderer}
-            rowCount={messages.length}
-            overscanRowCount={10}
-            estimatedRowSize={150}
-            scrollToIndex={messages.length}
-          />
-        )}
-      </AutoSizer>
+      <Virtuoso
+        ref={virtuosoRef}
+        data={messages}
+        overscan={!!messages.reduce((acc, message) => acc + (message.image_path?.length || 0), 0) ? messages.length : 0}
+        itemContent={(index) => renderMessage(messages, index)}
+        followOutput={(isAtBottom) => handleScrollStateChange(isAtBottom)}
+        initialTopMostItemIndex={messages.length - 1}
+        style={{ height: "100%", width: "100%" }}
+      />
     </div>
   );
 }
-
-const MessageRender = (message) => {
-  return (
-    <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
-      <div>
-        {message.image_path &&
-          message.image_path.map((i, idx) => (
-            <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
-              <a href={i} target="__blank">
-                <img alt="Received" className="message-img" src={i} />
-              </a>
-            </div>
-          ))}
-        <div>{message.text}</div>
-      </div>
-    </Tooltip>
-  );
-};
-
-const StatusRender = (status) => {
-  switch (status) {
-    case "sent":
-      return <Icon component={MdDone} className="message-icon" />;
-    case "delivered":
-      return <Icon component={MdDoneAll} className="message-icon" />;
-    default:
-      return null;
-  }
-};

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,119 +1,131 @@
-.message-icon {
-  //position: absolute;
-  // bottom: 0rem;
-  color: whitesmoke;
-  border: #000000;
-  position: absolute;
-  margin: 0 0.1rem;
-  bottom: 0.1rem;
-  right: 0.3rem;
-
-  z-index: 5;
-}
-
 .chat {
-  flex: 1;
-  //width: 300px;
-  //border: solid 1px #eee;
   display: flex;
   flex-direction: column;
-  margin: 0.8rem 0rem;
+  height: 100%;
+  width: 100%;
+}
+.archive-button {
+  height: 20px;
+  border-radius: 4px;
+}
+.chat-title {
+  margin-bottom: 5px;
 }
-
 .messages {
-  //margin-top: 30px;
   display: flex;
   flex-direction: column;
+  padding: 0.5rem; // Prevent edge clipping
 }
 
 .message {
+  position: relative;
   border-radius: 20px;
   padding: 0.25rem 0.8rem;
-  //margin-top: 5px;
-  // margin-bottom: 5px;
-  //display: inline-block;
+  word-wrap: break-word;
 
-  .message-img {
+  &-img {
     max-width: 10rem;
     max-height: 10rem;
     object-fit: contain;
     margin: 0.2rem;
+    border-radius: 4px;
+  }
+
+  &-images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 }
-
-.yours {
-  align-items: flex-start;
+.chat-send-message-button{
+  margin: 0.3rem;
+  padding-left: 0.5rem;
+  
+}
+.message-icon {
+  position: absolute;
+  bottom: 0.1rem;
+  right: 0.3rem;
+  margin: 0 0.1rem;
+  color: whitesmoke;
+  z-index: 5;
 }
 
 .msgmargin {
-  margin-top: 0.1rem;
-  margin-bottom: 0.1rem;
+  margin: 0.1rem 0;
 }
 
-.yours .message {
-  margin-right: 20%;
-  background-color: #eee;
-  position: relative;
+.yours,
+.mine {
+  display: flex;
+  flex-direction: column;
+
+  .message {
+    position: relative;
+
+    &:last-child:before,
+    &:last-child:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 20px;
+      width: 20px;
+      z-index: 0;
+    }
+
+    &:last-child:after {
+      width: 10px;
+      background: white;
+      z-index: 1;
+    }
+  }
 }
 
-.yours .message.last:before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  bottom: 0;
-  left: -7px;
-  height: 20px;
-  width: 20px;
-  background: #eee;
-  border-bottom-right-radius: 15px;
-}
-
-.yours .message.last:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: -10px;
-  width: 10px;
-  height: 20px;
-  background: white;
-  border-bottom-right-radius: 10px;
+/* "Yours" (incoming) message styles */
+.yours {
+  align-items: flex-start;
+
+  .message {
+    margin-right: 20%;
+    background-color: #eee;
+
+    &:last-child:before {
+      left: -7px;
+      background: #eee;
+      border-bottom-right-radius: 15px;
+    }
+
+    &:last-child:after {
+      left: -10px;
+      border-bottom-right-radius: 10px;
+    }
+  }
 }
 
+/* "Mine" (outgoing) message styles */
 .mine {
   align-items: flex-end;
+
+  .message {
+    color: white;
+    margin-left: 25%;
+    background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+    padding-bottom: 0.6rem;
+
+    &:last-child:before {
+      right: -8px;
+      background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+      border-bottom-left-radius: 15px;
+    }
+
+    &:last-child:after {
+      right: -10px;
+      border-bottom-left-radius: 10px;
+    }
+  }
 }
 
-.mine .message {
-  color: white;
-  margin-left: 25%;
-  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
-  background-attachment: fixed;
-  position: relative;
-  padding-bottom: 0.6rem;
-}
-
-.mine .message.last:before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  bottom: 0;
-  right: -8px;
-  height: 20px;
-  width: 20px;
-  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
-  background-attachment: fixed;
-  border-bottom-left-radius: 15px;
-}
-
-.mine .message.last:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  right: -10px;
-  width: 10px;
-  height: 20px;
-  background: white;
-  border-bottom-left-radius: 10px;
+.virtuoso-container {
+  flex: 1;
+  overflow: auto;
 }

client/src/components/chat-messages-list/renderMessage.jsx

@@ -0,0 +1,52 @@
+import Icon from "@ant-design/icons";
+import { Tooltip } from "antd";
+import i18n from "i18next";
+import dayjs from "../../utils/day";
+import { MdDone, MdDoneAll } from "react-icons/md";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+
+export const renderMessage = (messages, index) => {
+  const message = messages[index];
+
+  return (
+    <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
+      <div className="message msgmargin">
+        <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
+          <div>
+            {/* Render images if available */}
+            {message.image && message.image_path?.length > 0 && (
+              <div className="message-images">
+                {message.image_path.map((url, idx) => (
+                  <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
+                    <a href={url} target="_blank" rel="noopener noreferrer">
+                      <img alt="Received" className="message-img" src={url} />
+                    </a>
+                  </div>
+                ))}
+              </div>
+            )}
+            {/* Render text if available */}
+            {message.text && <div>{message.text}</div>}
+          </div>
+        </Tooltip>
+
+        {/* Message status icons */}
+        {message.status && (message.status === "sent" || message.status === "delivered") && (
+          <div className="message-status">
+            <Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
+          </div>
+        )}
+      </div>
+
+      {/* Outbound message metadata */}
+      {message.isoutbound && (
+        <div style={{ fontSize: 10 }}>
+          {i18n.t("messaging.labels.sentby", {
+            by: message.userid,
+            time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

client/src/components/chat-new-conversation/chat-new-conversation.component.jsx

@@ -1,11 +1,12 @@
 import { PlusCircleFilled } from "@ant-design/icons";
 import { Button, Form, Popover } from "antd";
-import React from "react";
+import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -17,8 +18,10 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatNewConversation({ openChatByPhone }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const { socket } = useContext(SocketContext);
+
   const handleFinish = (values) => {
-    openChatByPhone({ phone_num: values.phoneNumber });
+    openChatByPhone({ phone_num: values.phoneNumber, socket });
     form.resetFields();
   };
 

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
-import React from "react";
+import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
@@ -9,6 +9,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -21,6 +22,8 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
+  const { socket } = useContext(SocketContext);
+
   if (!phone) return <></>;
 
   if (!bodyshop.messagingservicesid) return <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>;
@@ -33,7 +36,7 @@ export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobi
         const p = parsePhoneNumber(phone, "CA");
         if (searchingForConversation) return; //This is to prevent finding the same thing twice.
         if (p && p.isValid()) {
-          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
+          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid, socket });
         } else {
           notification["error"]({ message: t("messaging.error.invalidphone") });
         }

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useLazyQuery, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,61 +13,102 @@ import ChatConversationContainer from "../chat-conversation/chat-conversation.co
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import "./chat-popup.styles.scss";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
   chatVisible: selectChatVisible
 });
+
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
   const { t } = useTranslation();
-  const [pollInterval, setpollInterval] = useState(0);
+  const [pollInterval, setPollInterval] = useState(0);
+  const { socket } = useContext(SocketContext);
+  const client = useApolloClient(); // Apollo Client instance for cache operations
 
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    ...(pollInterval > 0 ? { pollInterval } : {})
-  });
-
-  const [getConversations, { loading, data, refetch, fetchMore }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+  // Lazy query for conversations
+  const [getConversations, { loading, data, refetch }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     skip: !chatVisible,
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
-  const fcmToken = sessionStorage.getItem("fcmtoken");
+  // Query for unread count when chat is not visible
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    skip: chatVisible, // Skip when chat is visible
+    ...(pollInterval > 0 ? { pollInterval } : {})
+  });
 
+  // Socket connection status
   useEffect(() => {
-    if (fcmToken) {
-      setpollInterval(0);
-    } else {
-      setpollInterval(60000);
-    }
-  }, [fcmToken]);
+    const handleSocketStatus = () => {
+      if (socket?.connected) {
+        setPollInterval(15 * 60 * 1000); // 15 minutes
+      } else {
+        setPollInterval(60 * 1000); // 60 seconds
+      }
+    };
 
+    handleSocketStatus();
+
+    if (socket) {
+      socket.on("connect", handleSocketStatus);
+      socket.on("disconnect", handleSocketStatus);
+    }
+
+    return () => {
+      if (socket) {
+        socket.off("connect", handleSocketStatus);
+        socket.off("disconnect", handleSocketStatus);
+      }
+    };
+  }, [socket]);
+
+  // Fetch conversations when chat becomes visible
   useEffect(() => {
     if (chatVisible)
       getConversations({
         variables: {
           offset: 0
         }
+      }).catch((err) => {
+        console.error(`Error fetching conversations: ${(err, err.message || "")}`);
       });
   }, [chatVisible, getConversations]);
 
-  const loadMoreConversations = useCallback(() => {
-    if (data)
-      fetchMore({
-        variables: {
-          offset: data.conversations.length
-        }
-      });
-  }, [data, fetchMore]);
+  // Get unread count from the cache
+  const unreadCount = (() => {
+    if (chatVisible) {
+      try {
+        const cachedData = client.readQuery({
+          query: CONVERSATION_LIST_QUERY,
+          variables: { offset: 0 }
+        });
 
-  const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;
+        if (!cachedData?.conversations) return 0;
+
+        // Aggregate unread message count
+        return cachedData.conversations.reduce((total, conversation) => {
+          const unread = conversation.messages_aggregate?.aggregate?.count || 0;
+          return total + unread;
+        }, 0);
+      } catch (error) {
+        console.warn("Unread count not found in cache:", error);
+        return 0; // Fallback if not in cache
+      }
+    } else if (unreadData?.messages_aggregate?.aggregate?.count) {
+      // Use the unread count from the query result
+      return unreadData.messages_aggregate.aggregate.count;
+    }
+    return 0;
+  })();
 
   return (
     <Badge count={unreadCount}>
@@ -81,7 +122,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
                 <InfoCircleOutlined />
               </Tooltip>
               <SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
-              {pollInterval > 0 && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
+              {!socket?.connected && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
             </Space>
             <ShrinkOutlined
               onClick={() => toggleChatVisible()}
@@ -93,10 +134,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
                 {loading ? (
                   <LoadingSpinner />
                 ) : (
-                  <ChatConversationListComponent
-                    conversationList={data ? data.conversations : []}
-                    loadMoreConversations={loadMoreConversations}
-                  />
+                  <ChatConversationListComponent conversationList={data ? data.conversations : []} />
                 )}
               </Col>
               <Col span={16}>{selectedConversation ? <ChatConversationContainer /> : null}</Col>

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -25,6 +25,7 @@ const mapDispatchToProps = (dispatch) => ({
 function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSending, message, setMessage }) {
   const inputArea = useRef(null);
   const [selectedMedia, setSelectedMedia] = useState([]);
+
   useEffect(() => {
     inputArea.current.focus();
   }, [isSending, setMessage]);
@@ -37,14 +38,15 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
     logImEXEvent("messaging_send_message");
 
     if (selectedImages.length < 11) {
-      sendMessage({
+      const newMessage = {
         to: conversation.phone_num,
         body: message || "",
         messagingServiceSid: bodyshop.messagingservicesid,
         conversationid: conversation.id,
         selectedMedia: selectedImages,
         imexshopid: bodyshop.imexshopid
-      });
+      };
+      sendMessage(newMessage);
       setSelectedMedia(
         selectedMedia.map((i) => {
           return { ...i, isSelected: false };
@@ -79,7 +81,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
         />
       </span>
       <SendOutlined
-        className="imex-flex-row__margin"
+        className="chat-send-message-button"
         //  disabled={message === "" || !message}
         onClick={handleEnter}
       />

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -2,22 +2,33 @@ import { PlusOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
 import { Tag } from "antd";
 import _ from "lodash";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import { SEARCH_FOR_JOBS } from "../../graphql/jobs.queries";
 import ChatTagRo from "./chat-tag-ro.component";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { connect } from "react-redux";
 
-export default function ChatTagRoContainer({ conversation }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = () => ({});
+
+export function ChatTagRoContainer({ conversation, bodyshop }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const { socket } = useContext(SocketContext);
 
   const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);
 
   const executeSearch = (v) => {
     logImEXEvent("messaging_search_job_tag", { searchTerm: v });
-    loadRo(v);
+    loadRo(v).catch((e) => console.error("Error in ChatTagRoContainer executeSearch:", e));
   };
 
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
@@ -30,9 +41,40 @@ export default function ChatTagRoContainer({ conversation }) {
     variables: { conversationId: conversation.id }
   });
 
-  const handleInsertTag = (value, option) => {
+  const handleInsertTag = async (value, option) => {
     logImEXEvent("messaging_add_job_tag");
-    insertTag({ variables: { jobId: option.key } });
+
+    await insertTag({
+      variables: { jobId: option.key }
+    });
+
+    if (socket) {
+      // Find the job details from the search data
+      const selectedJob = data?.search_jobs.find((job) => job.id === option.key);
+      if (!selectedJob) return;
+      socket.emit("conversation-modified", {
+        conversationId: conversation.id,
+        bodyshopId: bodyshop.id,
+        type: "tag-added",
+        selectedJob,
+        job_conversations: [
+          {
+            __typename: "job_conversations",
+            jobid: selectedJob.id,
+            conversationid: conversation.id,
+            job: {
+              __typename: "jobs",
+              id: selectedJob.id,
+              ro_number: selectedJob.ro_number,
+              ownr_co_nm: selectedJob.ownr_co_nm,
+              ownr_fn: selectedJob.ownr_fn,
+              ownr_ln: selectedJob.ownr_ln
+            }
+          }
+        ]
+      });
+    }
+
     setOpen(false);
   };
 
@@ -50,9 +92,10 @@ export default function ChatTagRoContainer({ conversation }) {
           handleSearch={handleSearch}
           handleInsertTag={handleInsertTag}
           setOpen={setOpen}
+          style={{ cursor: "pointer" }}
         />
       ) : (
-        <Tag onClick={() => setOpen(true)}>
+        <Tag style={{ cursor: "pointer" }} onClick={() => setOpen(true)}>
           <PlusOutlined />
           {t("messaging.actions.link")}
         </Tag>
@@ -60,3 +103,5 @@ export default function ChatTagRoContainer({ conversation }) {
     </div>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatTagRoContainer);

client/src/components/conflict/conflict.component.jsx

@@ -16,8 +16,7 @@ export default function ConflictComponent() {
               {t("general.labels.instanceconflictext", {
                 app: InstanceRenderManager({
                   imex: "$t(titles.imexonline)",
-                  rome: "$t(titles.romeonline)",
-                  promanager: "$t(titles.promanager)"
+                  rome: "$t(titles.romeonline)"
                 })
               })}
             </div>

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

@@ -1,15 +1,17 @@
 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 FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
+import {
+  default as DateTimePicker,
+  default as FormDateTimePicker
+} from "../form-date-time-picker/form-date-time-picker.component";
 import 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";
@@ -18,10 +20,10 @@ import ContractFormJobPrefill from "./contract-form-job-prefill.component";
 export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
   const { t } = useTranslation();
   return (
-    <div>
-      <FormFieldsChanged form={form} />
+    <>
+      {!create && <FormFieldsChanged form={form} />}
       <LayoutFormRow>
-        {create ? null : (
+        {!create && (
           <Form.Item
             label={t("contracts.fields.status")}
             name="status"
@@ -50,7 +52,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         <Form.Item label={t("contracts.fields.scheduledreturn")} name="scheduledreturn">
           <FormDateTimePicker />
         </Form.Item>
-        {create ? null : (
+        {!create && (
           <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
             <FormDateTimePicker />
           </Form.Item>
@@ -122,7 +124,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             }}
           </Form.Item>
         )}
-        {create ? null : (
+        {!create && (
           <Form.Item label={t("contracts.fields.kmend")} name="kmend">
             <InputNumber />
           </Form.Item>
@@ -145,25 +147,21 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         >
           <CourtesyCarFuelSlider />
         </Form.Item>
-        {create ? null : (
+        {!create && (
           <Form.Item label={t("contracts.fields.fuelin")} name="fuelin" span={8}>
             <CourtesyCarFuelSlider />
           </Form.Item>
         )}
       </LayoutFormRow>
-      <div>
-        <Space wrap>
-          {selectedJobState && (
-            <div>
-              <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
-            </div>
-          )}
-          {
-            //<ContractLicenseDecodeButton form={form} />
-          }
-        </Space>
-      </div>
       <LayoutFormRow header={t("contracts.labels.driverinformation")}>
+        <Space wrap>
+          {create && selectedJobState && (
+            <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+          )}
+          {/* {<ContractLicenseDecodeButton form={form} />} */}
+        </Space>
+      </LayoutFormRow>
+      <LayoutFormRow noDivider={true}>
         <Form.Item
           label={t("contracts.fields.driver_dlnumber")}
           name="driver_dlnumber"
@@ -183,9 +181,8 @@ 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"
@@ -204,11 +201,10 @@ 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>
@@ -315,6 +311,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </div>
+    </>
   );
 }

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

@@ -1,10 +1,10 @@
 import { Card, Table, Tag } from "antd";
-import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
-import { useTranslation } from "react-i18next";
-import React, { useEffect, useState } from "react";
-import dayjs from "../../../utils/day";
-import DashboardRefreshRequired from "../refresh-required.component";
 import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import dayjs from "../../../utils/day";
+import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
+import DashboardRefreshRequired from "../refresh-required.component";
 
 const fortyFiveDaysAgo = () => dayjs().subtract(45, "day").toLocaleString();
 
@@ -46,6 +46,11 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
       dataIndex: "humanReadable",
       key: "humanReadable"
     },
+    {
+      title: t("job_lifecycle.columns.average_human_readable"),
+      dataIndex: "averageHumanReadable",
+      key: "averageHumanReadable"
+    },
     {
       title: t("job_lifecycle.columns.status_count"),
       key: "statusCount",

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

@@ -40,13 +40,11 @@ export function DmsLogEvents({ socket, logs, bodyshop }) {
 
 function LogLevelHierarchy(level) {
   switch (level) {
-    case "TRACE":
-      return "pink";
     case "DEBUG":
       return "orange";
     case "INFO":
       return "blue";
-    case "WARNING":
+    case "WARN":
       return "yellow";
     case "ERROR":
       return "red";

client/src/components/documents-local-upload/documents-local-upload.component.jsx

@@ -6,6 +6,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { handleUpload } from "./documents-local-upload.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -23,17 +26,20 @@ export function DocumentsLocalUploadComponent({
   allowAllTypes
 }) {
   const [fileList, setFileList] = useState([]);
-
+  const { t } = useTranslation();
   const handleDone = (uid) => {
     setTimeout(() => {
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
 
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
+      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
 
@@ -59,7 +65,9 @@ export function DocumentsLocalUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
         </>
       )}
     </Upload.Dragger>

client/src/components/documents-upload/documents-upload.component.jsx

@@ -7,6 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -45,11 +47,13 @@ export function DocumentsUploadComponent({
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
+      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
         setFileList(f.fileList);
@@ -89,7 +93,9 @@ export function DocumentsUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
           {!ignoreSizeLimit && (
             <Space wrap className="ant-upload-text">
               <Progress type="dashboard" percent={pct} size="small" />

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

@@ -108,8 +108,7 @@ class ErrorBoundary extends React.Component {
             subTitle={t("general.messages.exception", {
               app: InstanceRenderManager({
                 imex: "$t(titles.imexonline)",
-                rome: "$t(titles.romeonline)",
-                promanager: "$t(titles.promanager)"
+                rome: "$t(titles.romeonline)"
               })
             })}
             extra={

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 day from "../../utils/day";
+import dayjs 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 (day(value).isSame(day(), "day")) {
+                  if (dayjs(value).isSame(dayjs(), "day")) {
                     return Promise.resolve();
                   }
                   return Promise.reject(new Error(t("eula.messages.date_accepted")));

client/src/components/feature-wrapper/blur-wrapper.component.jsx

@@ -0,0 +1,144 @@
+import Dinero from "dinero.js";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { HasFeatureAccess } from "./feature-wrapper.component";
+import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const blurringProps = {
+  filter: "blur(4px)",
+  webkitUserSelect: "none",
+  msUserSelect: "none",
+  mozUserSelect: "none",
+  userSelect: "none",
+  pointerEvents: "none"
+};
+
+export function BlurWrapper({
+  bodyshop,
+  featureName,
+  styleProp = "style",
+  valueProp = "value",
+  overrideValue = true,
+  overrideValueFunction,
+  children,
+  debug,
+  bypass
+}) {
+  if (import.meta.env.DEV) {
+    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
+  }
+
+  if (debug) {
+    console.trace("*** DEBUG MODE", featureName);
+    console.log("*** HAS FEATURE ACCESS?", featureName, HasFeatureAccess({ featureName, bodyshop }));
+    console.log(
+      "***LOG  ~ All Blur Wrapper Props ",
+      styleProp,
+      valueProp,
+      overrideValue,
+      overrideValueFunction,
+      children,
+      debug,
+      bypass
+    );
+  }
+
+  if (bypass) {
+    if (import.meta.env.DEV) {
+      console.trace("*** Blur Wrapper BYPASS USED", featureName);
+    }
+    return children;
+  }
+
+  if (!HasFeatureAccess({ featureName, bodyshop })) {
+    const childrenWithBlurProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        //Clone the child, and spread in our props to overwrite it.
+        let newValueProp;
+        if (!overrideValue) {
+          newValueProp = child.props[valueProp];
+        } else {
+          if (typeof overrideValueFunction === "function") {
+            newValueProp = overrideValueFunction();
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomDinero") {
+            newValueProp = RandomDinero();
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomAmount") {
+            newValueProp = RandomAmount();
+          } else if (
+            typeof overrideValueFunction === "string" &&
+            overrideValueFunction.startsWith("RandomSmallString")
+          ) {
+            newValueProp = RandomSmallString(overrideValueFunction.split(":")[1] || 3); //Default back to 3 words, otherwise use the string.
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction.startsWith("RandomDate")) {
+            newValueProp = RandomDate();
+          } else {
+            newValueProp = "This is some random text. Nothing interesting here.";
+          }
+        }
+
+        return React.cloneElement(child, {
+          [valueProp]: newValueProp,
+          [styleProp]: { ...child.props[styleProp], ...blurringProps }
+        });
+      }
+      return child;
+    });
+
+    return childrenWithBlurProps;
+  }
+
+  return children;
+}
+export default connect(mapStateToProps, null)(BlurWrapper);
+
+function RandomDinero() {
+  return Dinero({ amount: Math.round(Math.exp(Math.random() * 10, 2)) }).toFormat();
+}
+function RandomAmount() {
+  return Math.round(Math.exp(Math.random() * 10));
+}
+
+function RandomSmallString(maxWords = 3) {
+  const words = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit"];
+  const wordCount = Math.floor(Math.random() * maxWords) + 1; // Random number between 1 and 3
+  let result = [];
+  for (let i = 0; i < wordCount; i++) {
+    const randomIndex = Math.floor(Math.random() * words.length);
+    result.push(words[randomIndex]);
+  }
+  return result.join(" ");
+}
+function RandomDate() {
+  return DateTimeFormatterFunction(new Date(Math.floor(Math.random() * 1000000000000)));
+}
+
+const featureNameList = [
+  "mobile",
+  "allAccess",
+  //"audit", //Removing 2024-12-13. Keeping as default feature.
+  "timetickets",
+  "payments",
+  "partsorders",
+  "bills",
+  "export",
+  "csi",
+  "courtesycars",
+  "media",
+  "visualboard",
+  "scoreboard",
+  "techconsole",
+  "checklist",
+  "smartscheduling",
+  "roguard",
+  "dashboard"
+  //"lifecycle" //Removing 2024-12-13. Keeping as default feature.
+];
+
+export function ValidateFeatureName(featureName) {
+  return featureNameList.includes(featureName);
+}

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

@@ -1,48 +1,84 @@
-import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import AlertComponent from "../alert/alert.component";
+import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import AlertComponent from "../alert/alert.component";
+import { ValidateFeatureName } from "./blur-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function FeatureWrapper({ bodyshop, featureName, noauth, children, ...restProps }) {
+function FeatureWrapper({
+  bodyshop,
+  featureName,
+  noauth,
+  blurContent,
+  children,
+  upsellComponent,
+  bypass,
+  ...restProps
+}) {
   const { t } = useTranslation();
 
+  if (bypass) {
+    if (import.meta.env.DEV) {
+      console.trace("*** Feature Wrapper BYPASS USED", featureName);
+    }
+    return children;
+  }
+
+  if (import.meta.env.DEV) {
+    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
+  }
+
+  if (upsellComponent) {
+    console.error("*** Upsell component passed in. This is not yet implemented.");
+  }
+
   if (HasFeatureAccess({ featureName, bodyshop })) return children;
 
-  return (
-    noauth || (
-      <AlertComponent
-        message={t("general.messages.nofeatureaccess", {
-          app: InstanceRenderManager({
-            imex: "$t(titles.imexonline)",
-            rome: "$t(titles.romeonline)",
-            promanager: "$t(titles.promanager)"
-          })
-        })}
-        type="warning"
-      />
-    )
-  );
+  if (blurContent) {
+    const childrenWithBlurProps = React.Children.map(children, (child) => {
+      // Checking isValidElement is the safe way and avoids a
+      // typescript error too.
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, { blur: true });
+      }
+      return child;
+    });
+    return childrenWithBlurProps;
+  } else {
+    return (
+      noauth || (
+        <AlertComponent
+          message={t("general.messages.nofeatureaccess", {
+            app: InstanceRenderManager({
+              imex: "$t(titles.imexonline)",
+              rome: "$t(titles.romeonline)"
+            })
+          })}
+          type="warning"
+        />
+      )
+    );
+  }
 }
 
-export function HasFeatureAccess({ featureName, bodyshop }) {
+export function HasFeatureAccess({ featureName, bodyshop, bypass, debug = false }) {
+  if (debug) {
+    console.trace(`*** HasFeatureAccessFunction called with feature << ${featureName} >>`);
+  }
+  if (bypass) {
+    if (import.meta.env.DEV) {
+      console.trace("*** Feature Wrapper BYPASS USED", featureName);
+    }
+    return true;
+  }
   return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
 }
 
 export default connect(mapStateToProps, null)(FeatureWrapper);
-
-/* 
-dashboard
-production-board
-scoreboard
-csi
-tech-console
-mobile-imaging
-*/

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

@@ -1,22 +1,40 @@
-import { DatePicker } from "antd";
+import { DatePicker, Space, TimePicker } from "antd";
 import PropTypes from "prop-types";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import dayjs from "../../utils/day";
 import { fuzzyMatchDate } from "./formats.js";
 
-const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const DateTimePicker = ({
+  value,
+  onChange,
+  onBlur,
+  id,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = false,
+  isSeparatedTime = false,
+  bodyshop,
+  ...restProps
+}) => {
   const [isManualInput, setIsManualInput] = useState(false);
   const { t } = useTranslation();
 
   const handleChange = useCallback(
     (newDate) => {
       if (onChange) {
-        onChange(newDate || null);
+        onChange(bodyshop?.timezone && newDate ? dayjs(newDate).tz(bodyshop.timezone, true) : newDate);
       }
       setIsManualInput(false);
     },
-    [onChange]
+    [onChange, bodyshop?.timezone]
   );
 
   const handleBlur = useCallback(
@@ -70,24 +88,57 @@ const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, is
 
   return (
     <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
-      <DatePicker
-        showTime={
-          isDateOnly
-            ? false
-            : {
-                format: "hh:mm a",
-                minuteStep: 15,
-                defaultValue: dayjs(dayjs(), "HH:mm:ss")
-              }
-        }
-        format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
-        value={value ? dayjs(value) : null}
-        onChange={handleChange}
-        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
-        onBlur={onBlur || handleBlur}
-        disabledDate={handleDisabledDate}
-        {...restProps}
-      />
+      {isSeparatedTime && (
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <DatePicker
+            showTime={false}
+            format="MM/DD/YYYY"
+            value={value ? dayjs(value) : null}
+            onChange={handleChange}
+            placeholder={t("general.labels.date")}
+            onBlur={handleBlur}
+            disabledDate={handleDisabledDate}
+            isDateOnly={true}
+            {...restProps}
+          />
+          {value && (
+            <TimePicker
+              format="hh:mm a"
+              minuteStep={15}
+              defaultOpenValue={dayjs(value)
+                .hour(dayjs().hour())
+                .minute(Math.floor(dayjs().minute() / 15) * 15)
+                .second(0)}
+              onChange={(value) => {
+                handleChange(value);
+                onBlur();
+              }}
+              placeholder={t("general.labels.time")}
+              {...restProps}
+            />
+          )}
+        </Space>
+      )}
+      {!isSeparatedTime && (
+        <DatePicker
+          showTime={
+            isDateOnly
+              ? false
+              : {
+                  format: "hh:mm a",
+                  minuteStep: 15,
+                  defaultValue: dayjs(dayjs(), "HH:mm:ss")
+                }
+          }
+          format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
+          value={value ? dayjs(value) : null}
+          onChange={handleChange}
+          placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
+          onBlur={onBlur || handleBlur}
+          disabledDate={handleDisabledDate}
+          {...restProps}
+        />
+      )}
     </div>
   );
 };
@@ -99,7 +150,8 @@ DateTimePicker.propTypes = {
   id: PropTypes.string,
   onlyFuture: PropTypes.bool,
   onlyToday: PropTypes.bool,
-  isDateOnly: PropTypes.bool
+  isDateOnly: PropTypes.bool,
+  isSeparatedTime: PropTypes.bool
 };
 
-export default React.memo(DateTimePicker);
+export default connect(mapStateToProps, null)(DateTimePicker);

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

@@ -26,8 +26,7 @@ import Icon, {
   UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
-import React from "react";
+import { Layout, Menu, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -44,6 +43,7 @@ import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -116,49 +116,51 @@ 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}`;
-      console.log(`betaSwitchImex cookie deleted`);
-    } else {
-      console.log(`betaSwitchImex cookie does not exist`);
-    }
-  };
-
-  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}`;
+  //   }
+  // };
+  //
+  // deleteBetaCookie();
 
   const accountingChildren = [];
 
-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "bills", bodyshop })
-    })
-  ) {
-    accountingChildren.push(
-      {
-        key: "bills",
-        id: "header-accounting-bills",
-        icon: <Icon component={FaFileInvoiceDollar} />,
-        label: <Link to="/manage/bills">{t("menus.header.bills")}</Link>
-      },
-      {
-        key: "enterbills",
-        id: "header-accounting-enterbills",
-        icon: <Icon component={GiPayMoney} />,
-        label: t("menus.header.enterbills"),
-        onClick: () => {
+  accountingChildren.push(
+    {
+      key: "bills",
+      id: "header-accounting-bills",
+      icon: <Icon component={FaFileInvoiceDollar} />,
+      label: (
+        <Link to="/manage/bills">
+          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+            {t("menus.header.bills")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "enterbills",
+      id: "header-accounting-enterbills",
+      icon: <Icon component={GiPayMoney} />,
+      label: (
+        <Space>
+          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+            {t("menus.header.enterbills")}
+          </LockWrapper>
+        </Space>
+      ),
+      onClick: () => {
+        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
           setBillEnterContext({
             actions: {},
             context: {}
           });
-        }
       }
-    );
-  }
+    }
+  );
 
   if (Simple_Inventory.treatment === "on") {
     accountingChildren.push(
@@ -173,37 +175,41 @@ function Header({
       }
     );
   }
-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "payments", bodyshop })
-    })
-  ) {
-    accountingChildren.push(
-      {
-        type: "divider"
-      },
-      {
-        key: "allpayments",
-        id: "header-accounting-allpayments",
-        icon: <BankFilled />,
-        label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
-      },
-      {
-        key: "enterpayments",
-        id: "header-accounting-enterpayments",
-        icon: <Icon component={FaCreditCard} />,
-        label: t("menus.header.enterpayment"),
-        onClick: () => {
+
+  accountingChildren.push(
+    {
+      type: "divider"
+    },
+    {
+      key: "allpayments",
+      id: "header-accounting-allpayments",
+      icon: <BankFilled />,
+      label: (
+        <Link to="/manage/payments">
+          <LockWrapper featureName="payments" bodyshop={bodyshop}>
+            {t("menus.header.allpayments")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+    {
+      key: "enterpayments",
+      id: "header-accounting-enterpayments",
+      icon: <Icon component={FaCreditCard} />,
+      label: (
+        <LockWrapper featureName="payments" bodyshop={bodyshop}>
+          {t("menus.header.enterpayment")}
+        </LockWrapper>
+      ),
+      onClick: () => {
+        HasFeatureAccess({ featureName: "payments", bodyshop }) &&
           setPaymentContext({
             actions: {},
             context: null
           });
-        }
       }
-    );
-  }
+    }
+  );
 
   if (ImEXPay.treatment === "on") {
     accountingChildren.push({
@@ -220,40 +226,44 @@ function Header({
     });
   }
 
-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-    })
-  ) {
-    accountingChildren.push(
-      {
-        type: "divider"
-      },
-      {
-        key: "timetickets",
-        id: "header-accounting-timetickets",
-        icon: <FieldTimeOutlined />,
-        label: <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
-      }
-    );
-
-    if (bodyshop?.md_tasks_presets?.use_approvals) {
-      accountingChildren.push({
-        key: "ttapprovals",
-        id: "header-accounting-ttapprovals",
-        icon: <FieldTimeOutlined />,
-        label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
-      });
+  accountingChildren.push(
+    {
+      type: "divider"
+    },
+    {
+      key: "timetickets",
+      id: "header-accounting-timetickets",
+      icon: <FieldTimeOutlined />,
+      label: (
+        <Link to="/manage/timetickets">
+          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+            {t("menus.header.timetickets")}
+          </LockWrapper>
+        </Link>
+      )
     }
-    accountingChildren.push(
-      {
-        key: "entertimetickets",
-        icon: <Icon component={GiPlayerTime} />,
-        label: t("menus.header.entertimeticket"),
-        id: "header-accounting-entertimetickets",
-        onClick: () => {
+  );
+
+  if (bodyshop?.md_tasks_presets?.use_approvals) {
+    accountingChildren.push({
+      key: "ttapprovals",
+      id: "header-accounting-ttapprovals",
+      icon: <FieldTimeOutlined />,
+      label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+    });
+  }
+  accountingChildren.push(
+    {
+      key: "entertimetickets",
+      icon: <Icon component={GiPlayerTime} />,
+      label: (
+        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+          {t("menus.header.entertimeticket")}
+        </LockWrapper>
+      ),
+      id: "header-accounting-entertimetickets",
+      onClick: () => {
+        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
           setTimeTicketContext({
             actions: {},
             context: {
@@ -262,19 +272,24 @@ function Header({
                 : currentUser.email
             }
           });
-        }
-      },
-      {
-        type: "divider"
       }
-    );
-  }
+    },
+    {
+      type: "divider"
+    }
+  );
 
   const accountingExportChildren = [
     {
       key: "receivables",
       id: "header-accounting-receivables",
-      label: <Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>
+      label: (
+        <Link to="/manage/accounting/receivables">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.accounting-receivables")}
+          </LockWrapper>
+        </Link>
+      )
     }
   ];
 
@@ -282,7 +297,13 @@ function Header({
     accountingExportChildren.push({
       key: "payables",
       id: "header-accounting-payables",
-      label: <Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>
+      label: (
+        <Link to="/manage/accounting/payables">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.accounting-payables")}
+          </LockWrapper>
+        </Link>
+      )
     });
   }
 
@@ -290,7 +311,13 @@ function Header({
     accountingExportChildren.push({
       key: "payments",
       id: "header-accounting-payments",
-      label: <Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>
+      label: (
+        <Link to="/manage/accounting/payments">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.accounting-payments")}
+          </LockWrapper>
+        </Link>
+      )
     });
   }
 
@@ -301,25 +328,27 @@ function Header({
     {
       key: "exportlogs",
       id: "header-accounting-exportlogs",
-      label: <Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>
+      label: (
+        <Link to="/manage/accounting/exportlogs">
+          <LockWrapper featureName="export" bodyshop={bodyshop}>
+            {t("menus.header.export-logs")}
+          </LockWrapper>
+        </Link>
+      )
     }
   );
 
-  if (
-    InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "export", bodyshop })
-    })
-  ) {
-    accountingChildren.push({
-      key: "accountingexport",
-      id: "header-accounting-export",
-      icon: <ExportOutlined />,
-      label: t("menus.header.export"),
-      children: accountingExportChildren
-    });
-  }
+  accountingChildren.push({
+    key: "accountingexport",
+    id: "header-accounting-export",
+    icon: <ExportOutlined />,
+    label: (
+      <LockWrapper featureName="export" bodyshop={bodyshop}>
+        {t("menus.header.export")}
+      </LockWrapper>
+    ),
+    children: accountingExportChildren
+  });
 
   const menuItems = [
     {
@@ -388,38 +417,35 @@ function Header({
           icon: <ScheduleOutlined />,
           label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
         },
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "visualboard", bodyshop })
-        })
-          ? [
-              {
-                key: "productionboard",
-                id: "header-production-board",
-                icon: <Icon component={BsKanban} />,
-                label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
-              }
-            ]
-          : []),
 
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "scoreboard", bodyshop })
-        })
-          ? [
-              {
-                type: "divider"
-              },
-              {
-                key: "scoreboard",
-                id: "header-scoreboard",
-                icon: <LineChartOutlined />,
-                label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
-              }
-            ]
-          : [])
+        {
+          key: "productionboard",
+          id: "header-production-board",
+          icon: <Icon component={BsKanban} />,
+          label: (
+            <Link to="/manage/production/board">
+              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
+                {t("menus.header.productionboard")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+
+        {
+          type: "divider"
+        },
+        {
+          key: "scoreboard",
+          id: "header-scoreboard",
+          icon: <LineChartOutlined />,
+          label: (
+            <Link to="/manage/scoreboard">
+              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
+                {t("menus.header.scoreboard")}
+              </LockWrapper>
+            </Link>
+          )
+        }
       ]
     },
     {
@@ -442,40 +468,54 @@ function Header({
         }
       ]
     },
-    ...(InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: false // HasFeatureAccess({ featureName: 'courtesycars', bodyshop }),
-    })
-      ? [
-          {
-            key: "ccs",
-            id: "header-css",
-            icon: <CarFilled />,
-            label: t("menus.header.courtesycars"),
-            children: [
-              {
-                key: "courtesycarsall",
-                id: "header-courtesycars-all",
-                icon: <CarFilled />,
-                label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
-              },
-              {
-                key: "contracts",
-                id: "header-contracts",
-                icon: <FileFilled />,
-                label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
-              },
-              {
-                key: "newcontract",
-                id: "header-newcontract",
-                icon: <FileAddFilled />,
-                label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
-              }
-            ]
-          }
-        ]
-      : []),
+    {
+      key: "ccs",
+      id: "header-css",
+      icon: <CarFilled />,
+      label: (
+        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+          {t("menus.header.courtesycars")}
+        </LockWrapper>
+      ),
+      children: [
+        {
+          key: "courtesycarsall",
+          id: "header-courtesycars-all",
+          icon: <CarFilled />,
+          label: (
+            <Link to="/manage/courtesycars">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-all")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "contracts",
+          id: "header-contracts",
+          icon: <FileFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-contracts")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+        {
+          key: "newcontract",
+          id: "header-newcontract",
+          icon: <FileAddFilled />,
+          label: (
+            <Link to="/manage/courtesycars/contracts/new">
+              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                {t("menus.header.courtesycars-newcontract")}
+              </LockWrapper>
+            </Link>
+          )
+        }
+      ]
+    },
 
     ...(accountingChildren.length > 0
       ? [
@@ -494,20 +534,20 @@ function Header({
       icon: <PhoneOutlined />,
       label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
     },
-    ...(InstanceRenderManager({
-      imex: true,
-      rome: true,
-      promanager: HasFeatureAccess({ featureName: "media", bodyshop })
-    })
-      ? [
-          {
-            key: "temporarydocs",
-            id: "header-temporarydocs",
-            icon: <PaperClipOutlined />,
-            label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
-          }
-        ]
-      : []),
+
+    {
+      key: "temporarydocs",
+      id: "header-temporarydocs",
+      icon: <PaperClipOutlined />,
+      label: (
+        <Link to="/manage/temporarydocs">
+          <LockWrapper featureName="media" bodyshop={bodyshop}>
+            {t("menus.header.temporarydocs")}
+          </LockWrapper>
+        </Link>
+      )
+    },
+
     {
       key: "tasks",
       id: "tasks",
@@ -553,7 +593,11 @@ function Header({
           key: "dashboard",
           id: "header-dashboard",
           icon: <DashboardFilled />,
-          label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
+          label: (
+            <Link to="/manage/dashboard">
+              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
+            </Link>
+          )
         },
         {
           key: "reportcenter",
@@ -573,20 +617,19 @@ function Header({
           icon: <Icon component={IoBusinessOutline} />,
           label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
         },
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "csi", bodyshop })
-        })
-          ? [
-              {
-                key: "shop-csi",
-                id: "header-shop-csi",
-                icon: <Icon component={RiSurveyLine} />,
-                label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
-              }
-            ]
-          : [])
+
+        {
+          key: "shop-csi",
+          id: "header-shop-csi",
+          icon: <Icon component={RiSurveyLine} />,
+          label: (
+            <Link to="/manage/shop/csi">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shop_csi")}
+              </LockWrapper>
+            </Link>
+          )
+        }
       ]
     },
     {
@@ -610,8 +653,7 @@ function Header({
             window.open(
               InstanceRenderManager({
                 imex: "https://help.imex.online/",
-                rome: "https://rometech.com//",
-                promanager: "https://web-est.com"
+                rome: "https://rometech.com//"
               }),
 
               "_blank"
@@ -620,8 +662,7 @@ function Header({
         },
         ...(InstanceRenderManager({
           imex: true,
-          rome: false,
-          promanager: false
+          rome: false
         })
           ? [
               {
@@ -635,20 +676,19 @@ function Header({
             ]
           : []),
 
-        ...(InstanceRenderManager({
-          imex: true,
-          rome: true,
-          promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-        })
-          ? [
-              {
-                key: "shiftclock",
-                id: "header-shiftclock",
-                icon: <Icon component={GiPlayerTime} />,
-                label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
-              }
-            ]
-          : []),
+        {
+          key: "shiftclock",
+          id: "header-shiftclock",
+          icon: <Icon component={GiPlayerTime} />,
+          label: (
+            <Link to="/manage/shiftclock">
+              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                {t("menus.header.shiftclock")}
+              </LockWrapper>
+            </Link>
+          )
+        },
+
         {
           key: "profile",
           id: "header-profile",

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

@@ -3,7 +3,7 @@ import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select,
 import parsePhoneNumber from "libphonenumber-js";
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -23,6 +23,8 @@ 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";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -48,6 +50,8 @@ export function ScheduleEventComponent({
   const searchParams = queryString.parse(useLocation().search);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
+  const { socket } = useContext(SocketContext);
+
   const blockContent = (
     <Space direction="vertical" wrap>
       <Input
@@ -127,6 +131,9 @@ 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>
       ) : (
@@ -186,7 +193,8 @@ export function ScheduleEventComponent({
                     if (p && p.isValid()) {
                       openChatByPhone({
                         phone_num: p.formatInternational(),
-                        jobid: event.job.id
+                        jobid: event.job.id,
+                        socket
                       });
                       setMessage(
                         t("appointments.labels.reminder", {
@@ -316,6 +324,7 @@ 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-audit-trail/job-audit-trail.component.jsx

@@ -1,23 +1,27 @@
+import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Col, Row, Table, Tag } from "antd";
-import { SyncOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobAuditTrail);
 
-export function JobAuditTrail({ currentUser, jobId }) {
+export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
   const { t } = useTranslation();
   const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
     variables: { jobid: jobId },
@@ -41,7 +45,12 @@ export function JobAuditTrail({ currentUser, jobId }) {
     {
       title: t("audit.fields.operation"),
       dataIndex: "operation",
-      key: "operation"
+      key: "operation",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit" bypass>
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
     }
   ];
   const emailColumns = [
@@ -64,52 +73,84 @@ export function JobAuditTrail({ currentUser, jobId }) {
       dataIndex: "to",
       key: "to",
 
-      render: (text, record) => record.to && record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>)
+      render: (text, record) =>
+        record.to &&
+        record.to.map((email, idx) => (
+          <Tag key={idx}>
+            <BlurWrapperComponent featureName="audit" bypass>
+              <div>{email}</div>
+            </BlurWrapperComponent>
+          </Tag>
+        ))
     },
     {
       title: t("audit.fields.cc"),
       dataIndex: "cc",
       key: "cc",
 
-      render: (text, record) => record.cc && record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>)
+      render: (text, record) =>
+        record.cc &&
+        record.cc.map((email, idx) => (
+          <Tag key={idx}>
+            <BlurWrapperComponent featureName="audit" bypass>
+              <div>{email}</div>
+            </BlurWrapperComponent>
+          </Tag>
+        ))
     },
     {
       title: t("audit.fields.subject"),
       dataIndex: "subject",
-      key: "subject"
+      key: "subject",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit" bypass>
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("audit.fields.status"),
       dataIndex: "status",
-      key: "status"
+      key: "status",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit" bypass>
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
     },
-    ...(currentUser?.email.includes("@imex.")
-      ? [
-          {
-            title: t("audit.fields.contents"),
-            dataIndex: "contents",
-            key: "contents",
-            width: "10%",
-            render: (text, record) => (
-              <Button
-                onClick={() => {
-                  var win = window.open(
-                    "",
-                    "Title",
-                    "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
-                  );
-                  win.document.body.innerHTML = record.contents;
-                }}
-              >
-                Preview
-              </Button>
-            )
-          }
-        ]
-      : [])
+
+    {
+      title: t("audit.fields.contents"),
+      dataIndex: "contents",
+      key: "contents",
+      width: "10%",
+      render: (text, record) => (
+        <Button
+          onClick={() => {
+            var win = window.open(
+              "",
+              "Title",
+              "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
+            );
+            win.document.body.innerHTML = record.contents;
+          }}
+        >
+          Preview
+        </Button>
+      )
+    }
   ];
+
+  const hasAuditAccess = HasFeatureAccess({ bodyshop, featureName: "audit" });
   return (
     <Row gutter={[16, 16]}>
+      {!hasAuditAccess && (
+        <Col span={24}>
+          <Card>
+            <UpsellComponent upsell={upsellEnum().audit.general} disableMask />
+          </Card>
+        </Col>
+      )}
       <Col span={24}>
         <Card
           title={t("jobs.labels.audit")}

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

@@ -6,8 +6,22 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import "./job-bills-total.styles.scss";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
-export default function JobBillsTotalComponent({
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobBillsTotalComponent({
+  bodyshop,
   loading,
   bills,
   partsOrders,
@@ -18,7 +32,7 @@ export default function JobBillsTotalComponent({
   const { t } = useTranslation();
 
   if (loading) return <LoadingSkeleton />;
-  if (!!!jobTotals) {
+  if (!jobTotals) {
     if (showWarning && warningCallback && typeof warningCallback === "function") {
       warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
     }
@@ -97,8 +111,7 @@ export default function JobBillsTotalComponent({
     .add(
       InstanceRenderManager({
         imex: Dinero(),
-        rome: Dinero(totals.additional.additionalCosts),
-        promanager: "USE_ROME"
+        rome: Dinero(totals.additional.additionalCosts)
       })
     ); // Additional costs were captured for Rome, but not imex.
 
@@ -120,10 +133,10 @@ export default function JobBillsTotalComponent({
       warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
     }
   }
-
+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
   return (
     <Row gutter={[16, 16]}>
-      <Col md={24} lg={18}>
+      <Col {...(hasBillsAccess ? { md: 24, lg: 18 } : { span: 12 })}>
         <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
           <Space wrap size="large">
             <Tooltip
@@ -147,7 +160,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -159,13 +174,15 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
-                title={t("bills.labels.discrepancy")}
-                valueStyle={{
-                  color: discrepancy.getAmount() === 0 ? "green" : "red"
-                }}
-                value={discrepancy.toFormat()}
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.discrepancy")}
+                  valueStyle={{
+                    color: discrepancy.getAmount() === 0 ? "green" : "red"
+                  }}
+                  value={discrepancy.toFormat()}
+                />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>+</Typography.Title>
             <Tooltip
@@ -177,7 +194,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -189,13 +208,15 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
-                title={t("bills.labels.discrepancy")}
-                valueStyle={{
-                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
-                }}
-                value={discrepWithLbrAdj.toFormat()}
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.discrepancy")}
+                  valueStyle={{
+                    color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
+                  }}
+                  value={discrepWithLbrAdj.toFormat()}
+                />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>+</Typography.Title>
             <Tooltip
@@ -207,7 +228,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -219,16 +242,17 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
-                title={t("bills.labels.discrepancy")}
-                valueStyle={{
-                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
-                }}
-                value={discrepWithCms.toFormat()}
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.discrepancy")}
+                  valueStyle={{
+                    color: discrepWithCms.getAmount() === 0 ? "green" : "red"
+                  }}
+                  value={discrepWithCms.toFormat()}
+                />
+              </BlurWrapperComponent>
             </Tooltip>
           </Space>
-
           {showWarning &&
             (discrepWithCms.getAmount() !== 0 ||
               discrepWithLbrAdj.getAmount() !== 0 ||
@@ -253,7 +277,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Tooltip
               title={
@@ -264,17 +290,19 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
-                title={t("bills.labels.calculatedcreditsnotreceived")}
-                valueStyle={{
-                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
-                }}
-                value={
-                  calculatedCreditsNotReceived.getAmount() >= 0
-                    ? calculatedCreditsNotReceived.toFormat()
-                    : Dinero().toFormat()
-                }
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.calculatedcreditsnotreceived")}
+                  valueStyle={{
+                    color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
+                  }}
+                  value={
+                    calculatedCreditsNotReceived.getAmount() >= 0
+                      ? calculatedCreditsNotReceived.toFormat()
+                      : Dinero().toFormat()
+                  }
+                />
+              </BlurWrapperComponent>
             </Tooltip>
             <Tooltip
               title={
@@ -285,17 +313,19 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
-                title={t("bills.labels.creditsnotreceived")}
-                valueStyle={{
-                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
-                }}
-                value={
-                  totalReturnsMarkedNotReceived.getAmount() >= 0
-                    ? totalReturnsMarkedNotReceived.toFormat()
-                    : Dinero().toFormat()
-                }
-              />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic
+                  title={t("bills.labels.creditsnotreceived")}
+                  valueStyle={{
+                    color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
+                  }}
+                  value={
+                    totalReturnsMarkedNotReceived.getAmount() >= 0
+                      ? totalReturnsMarkedNotReceived.toFormat()
+                      : Dinero().toFormat()
+                  }
+                />
+              </BlurWrapperComponent>
             </Tooltip>
           </Space>
           {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
@@ -303,6 +333,15 @@ export default function JobBillsTotalComponent({
           )}
         </Card>
       </Col>
+      {!hasBillsAccess && (
+        <Col span={6}>
+          <Card style={{ height: "100%" }}>
+            <UpsellComponent upsell={upsellEnum().bills.autoreconcile} disableMask />
+          </Card>
+        </Col>
+      )}
     </Row>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobBillsTotalComponent);

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

@@ -47,7 +47,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
     md: "100%",
     lg: "75%",
     xl: "75%",
-    xxl: "60%"
+    xxl: "75%"
   };
   const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
 
@@ -122,7 +122,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
             </Col>
             {!bodyshop.uselocalmediaserver && (
               <Col {...span}>
-                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} />
+                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} bodyshop={bodyshop} />
               </Col>
             )}
             <Col {...span}>

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

@@ -1,11 +1,14 @@
 import { Carousel } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import { GenerateThumbUrl } from "../jobs-documents-gallery/job-documents.utility";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import CardTemplate from "./job-detail-cards.template.component";
 
-export default function JobDetailCardsDocumentsComponent({ loading, data }) {
+export default function JobDetailCardsDocumentsComponent({ loading, data, bodyshop }) {
   const { t } = useTranslation();
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   if (!data)
     return (
@@ -20,14 +23,18 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
       title={t("jobs.labels.cards.documents")}
       extraLink={`/manage/jobs/${data.id}?tab=documents`}
     >
-      {data.documents.length > 0 ? (
-        <Carousel autoplay>
-          {data.documents.map((item) => (
-            <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
-          ))}
-        </Carousel>
-      ) : (
-        <div>{t("documents.errors.nodocuments")}</div>
+      {!hasMediaAccess && (
+        <UpsellComponent disableMask upsell={upsellEnum().media.general}>
+          {data.documents.length > 0 ? (
+            <Carousel autoplay>
+              {data.documents.map((item) => (
+                <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
+              ))}
+            </Carousel>
+          ) : (
+            <div>{t("documents.errors.nodocuments")}</div>
+          )}
+        </UpsellComponent>
       )}
     </CardTemplate>
   );

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

@@ -12,9 +12,10 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container.jsx";
-import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";
-import TaskListContainer from "../task-list/task-list.container.jsx";
+import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container";
+
+import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
+import TaskListContainer from "../task-list/task-list.container";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -82,7 +83,7 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
                   }
                 ]
           }
-        />{" "}
+        />
       </Col>
       <Col md={24} lg={8}>
         <Typography.Title level={4}>{t("parts_dispatch.labels.parts_dispatch")}</Typography.Title>
@@ -117,57 +118,61 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
           }
         />
       </Col>
-      <FeatureWrapper featureName="bills" noauth={() => null}>
-        <Col md={24} lg={8}>
-          <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-          <BillDetailEditcontainer />
-          <Timeline
-            items={
-              data.billlines.length > 0
-                ? data.billlines.map((line) => ({
-                    key: line.id,
+
+      <Col md={24} lg={8}>
+        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+        <BillDetailEditcontainer />
+        <Timeline
+          items={
+            data.billlines.length > 0
+              ? data.billlines.map((line) => ({
+                  key: line.id,
+                  children: (
+                    <Row wrap>
+                      <Col span={4}>
+                        {!technician ? (
+                          <>
+                            <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
+                              {line.bill.invoice_number}
+                            </Link>
+                          </>
+                        ) : (
+                          `${line.bill.invoice_number}`
+                        )}
+                      </Col>
+                      <Col span={4}>
+                        <span>
+                          {`${t("billlines.fields.actual_price")}: `}
+                          <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
+                        </span>
+                      </Col>
+                      <Col span={4}>
+                        <span>
+                          {`${t("billlines.fields.actual_cost")}: `}
+                          <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
+                        </span>
+                      </Col>
+                      <Col span={4}>
+                        <DateFormatter>{line.bill.date}</DateFormatter>
+                      </Col>
+                      <Col span={4}> {line.bill.vendor.name}</Col>
+                    </Row>
+                  )
+                }))
+              : [
+                  {
+                    key: "no-orders",
                     children: (
-                      <Row wrap>
-                        <Col span={4}>
-                          {!technician ? (
-                            <>
-                              <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
-                                {line.bill.invoice_number}
-                              </Link>
-                            </>
-                          ) : (
-                            `${line.bill.invoice_number}`
-                          )}
-                        </Col>
-                        <Col span={4}>
-                          <span>
-                            {`${t("billlines.fields.actual_price")}: `}
-                            <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
-                          </span>
-                        </Col>
-                        <Col span={4}>
-                          <span>
-                            {`${t("billlines.fields.actual_cost")}: `}
-                            <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
-                          </span>
-                        </Col>
-                        <Col span={4}>
-                          <DateFormatter>{line.bill.date}</DateFormatter>
-                        </Col>
-                        <Col span={4}> {line.bill.vendor.name}</Col>
-                      </Row>
+                      <BlurWrapper featureName="bills">
+                        <span>{t("bills.labels.nobilllines")}</span>
+                      </BlurWrapper>
                     )
-                  }))
-                : [
-                    {
-                      key: "no-orders",
-                      children: t("bills.labels.nobilllines")
-                    }
-                  ]
-            }
-          />
-        </Col>
-      </FeatureWrapper>
+                  }
+                ]
+          }
+        />
+      </Col>
+
       <Col md={24} lg={24}>
         <TaskListContainer
           parentJobId={jobid}

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

@@ -60,24 +60,21 @@ export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
     }
   };
 
-  const popcontent = !technician && InstanceRenderManager({
-    imex: null,
-    rome: (
-      <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
-        <Form.Item name="act_price" label={t("jobs.labels.act_price_ppc")} rules={[{ required: true }]}>
-          <CurrencyFormItemComponent />
-        </Form.Item>
-        <Button
-          disabled={InstanceRenderManager({ imex: true, rome: false, promanager: true })}
-          loading={loading}
-          htmlType="primary"
-        >
-          {t("general.actions.save")}
-        </Button>
-      </Form>
-    ),
-    promanager: null
-  });
+  const popcontent =
+    !technician &&
+    InstanceRenderManager({
+      imex: null,
+      rome: (
+        <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
+          <Form.Item name="act_price" label={t("jobs.labels.act_price_ppc")} rules={[{ required: true }]}>
+            <CurrencyFormItemComponent />
+          </Form.Item>
+          <Button disabled={InstanceRenderManager({ imex: true, rome: false })} loading={loading} htmlType="primary">
+            {t("general.actions.save")}
+          </Button>
+        </Form>
+      )
+    });
 
   return (
     <JobLineConvertToLabor jobline={line} job={job}>

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

@@ -118,8 +118,7 @@ export function JobLinesComponent({
           ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {})
         }
       }),
-      sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
-      ellipsis: true
+      sortOrder: state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order
     },
     {
       title: t("joblines.fields.oem_partno"),
@@ -217,7 +216,9 @@ export function JobLinesComponent({
     {
       title: t("joblines.fields.part_qty"),
       dataIndex: "part_qty",
-      key: "part_qty"
+      key: "part_qty",
+      sorter: (a, b) => a.part_qty - b.part_qty,
+      sortOrder: state.sortedInfo.columnKey === "part_qty" && state.sortedInfo.order
     },
     // {
     //   title: t('joblines.fields.tax_part'),

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -158,8 +158,7 @@ export function JobEmployeeAssignments({
           label={t(
             InstanceRenderManager({
               imex: "jobs.fields.employee_csr",
-              rome: "jobs.fields.employee_csr_writer",
-              promanager: "USE_ROME"
+              rome: "jobs.fields.employee_csr_writer"
             })
           )}
         >

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import day from "../../utils/day";
+import dayjs from "../../utils/day";
 import axios from "axios";
 import { Badge, Card, Space, Table, Tag } from "antd";
 import { gql, useQuery } from "@apollo/client";
@@ -8,13 +8,26 @@ import { isEmpty } from "lodash";
 import { useTranslation } from "react-i18next";
 
 import "./job-lifecycle.styles.scss";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.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))
+});
 // show text on bar if text can fit
-export function JobLifecycleComponent({ job, statuses, ...rest }) {
+export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
   const [loading, setLoading] = useState(true);
   const [lifecycleData, setLifecycleData] = useState(null);
   const { t } = useTranslation(); // Used for tracking external state changes.
-
+  const hasLifeCycleAccess = HasFeatureAccess({ bodyshop, featureName: "lifecycle" });
   const { data } = useQuery(
     gql`
       query get_job_test($id: uuid!) {
@@ -65,14 +78,28 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
     {
       title: t("job_lifecycle.columns.value"),
       dataIndex: "value",
-      key: "value"
+      key: "value",
+      render: (text, record) => (
+        <BlurWrapperComponent
+          featureName="lifecycle"
+          bypass
+          valueProp="children"
+          overrideValueFunction="RandomSmallString:2"
+        >
+          <span>{text}</span>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("job_lifecycle.columns.start"),
       dataIndex: "start",
       key: "start",
-      render: (text) => DateTimeFormatterFunction(text),
-      sorter: (a, b) => day(a.start).unix() - day(b.start).unix()
+      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
+          <span>{DateTimeFormatterFunction(text)}</span>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("job_lifecycle.columns.relative_start"),
@@ -90,9 +117,14 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
           }
           return isEmpty(a.end) ? 1 : -1;
         }
-        return day(a.end).unix() - day(b.end).unix();
+        return dayjs(a.end).unix() - dayjs(b.end).unix();
       },
-      render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text))
+
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
+          <span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("job_lifecycle.columns.relative_end"),
@@ -122,67 +154,74 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
               }
               style={{ width: "100%" }}
             >
-              <div
-                id="bar-container"
-                style={{
-                  display: "flex",
-                  width: "100%",
-                  height: "100px",
-                  textAlign: "center",
-                  borderRadius: "5px",
-                  borderWidth: "5px",
-                  borderStyle: "solid",
-                  borderColor: "#f0f2f5",
-                  margin: 0,
-                  padding: 0
-                }}
-              >
-                {lifecycleData.durations.summations.map((key, index, array) => {
-                  const isFirst = index === 0;
-                  const isLast = index === array.length - 1;
-                  return (
-                    <div
-                      key={key.status}
-                      style={{
-                        overflow: "hidden",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        margin: 0,
-                        padding: 0,
+              {!hasLifeCycleAccess && (
+                <Card type="inner" style={{ marginTop: "10px" }}>
+                  <UpsellComponent upsell={upsellEnum().lifecycle.general} />
+                </Card>
+              )}
+              <BlurWrapperComponent featureName="lifecycle" bypass>
+                <div
+                  id="bar-container"
+                  style={{
+                    display: "flex",
+                    width: "100%",
+                    height: "100px",
+                    textAlign: "center",
+                    borderRadius: "5px",
+                    borderWidth: "5px",
+                    borderStyle: "solid",
+                    borderColor: "#f0f2f5",
+                    margin: 0,
+                    padding: 0
+                  }}
+                >
+                  {lifecycleData.durations.summations.map((key, index, array) => {
+                    const isFirst = index === 0;
+                    const isLast = index === array.length - 1;
+                    return (
+                      <div
+                        key={key.status}
+                        style={{
+                          overflow: "hidden",
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          margin: 0,
+                          padding: 0,
 
-                        borderTop: "1px solid #f0f2f5",
-                        borderBottom: "1px solid #f0f2f5",
-                        borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
-                        borderRight: isLast ? "1px solid #f0f2f5" : undefined,
+                          borderTop: "1px solid #f0f2f5",
+                          borderBottom: "1px solid #f0f2f5",
+                          borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
+                          borderRight: isLast ? "1px solid #f0f2f5" : undefined,
 
-                        backgroundColor: key.color,
-                        width: `${key.percentage}%`
-                      }}
-                      aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
-                      title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
-                    >
-                      {key.percentage > 15 ? (
-                        <>
-                          <div>{key.roundedPercentage}</div>
-                          <div
-                            style={{
-                              backgroundColor: "#f0f2f5",
-                              borderRadius: "5px",
-                              paddingRight: "2px",
-                              paddingLeft: "2px",
-                              fontSize: "0.8rem"
-                            }}
-                          >
-                            {key.status}
-                          </div>
-                        </>
-                      ) : null}
-                    </div>
-                  );
-                })}
-              </div>
+                          backgroundColor: key.color,
+                          width: `${key.percentage}%`
+                        }}
+                        aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                        title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                      >
+                        {key.percentage > 15 ? (
+                          <>
+                            <div>{key.roundedPercentage}</div>
+                            <div
+                              style={{
+                                backgroundColor: "#f0f2f5",
+                                borderRadius: "5px",
+                                paddingRight: "2px",
+                                paddingLeft: "2px",
+                                fontSize: "0.8rem"
+                              }}
+                            >
+                              {key.status}
+                            </div>
+                          </>
+                        ) : null}
+                      </div>
+                    );
+                  })}
+                </div>
+              </BlurWrapperComponent>
               <Card type="inner" title={t("job_lifecycle.content.legend_title")} style={{ marginTop: "10px" }}>
                 <div>
                   {lifecycleData.durations.summations.map((key) => (
@@ -197,7 +236,16 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
                           textAlign: "center"
                         }}
                       >
-                        {key.status} ({key.roundedPercentage})
+                        {key.status} (
+                        <BlurWrapperComponent
+                          featureName="lifecycle"
+                          bypass
+                          overrideValueFunction="RandomAmount"
+                          valueProp="children"
+                        >
+                          <span>{key.roundedPercentage}</span>
+                        </BlurWrapperComponent>
+                        )
                       </div>
                     </Tag>
                   ))}
@@ -267,5 +315,4 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
     </Card>
   );
 }
-
-export default JobLifecycleComponent;
+export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);

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 day from "../../utils/day";
+import dayjs 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: day(),
+            dispatched_at: dayjs(),
             employeeid: values.employeeid,
             jobid: job.id,
             dispatched_by: currentUser.email,
@@ -138,7 +138,11 @@ 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-line-note-popup/job-line-note-popup.component.jsx

@@ -45,7 +45,8 @@ export default function JobLineNotePopup({ jobline, disabled }) {
   if (editing)
     return (
       <div>
-        <Input
+        <Input.TextArea
+          autoSize
           autoFocus
           suffix={loading ? <LoadingSpinner /> : null}
           value={note}

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

@@ -1,10 +1,10 @@
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Form, Input, InputNumber, Modal, Select, Switch } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import InputCurrency from "../form-items-formatted/currency-form-item.component";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import JoblinesPreset from "../job-lines-preset-button/job-lines-preset-button.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -61,7 +61,7 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
             ]}
             name="line_desc"
           >
-            <Input />
+            <Input.TextArea autoSize />
           </Form.Item>
           <JoblinesPreset form={form} />
         </LayoutFormRow>

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

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -26,21 +25,16 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setCardPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "cardPayment" })),
-  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
-  setMessage: (text) => dispatch(setMessage(text))
+  setCardPaymentContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "cardPayment"
+      })
+    )
 });
 
-export function JobPayments({
-  job,
-  jobRO,
-  bodyshop,
-  setMessage,
-  openChatByPhone,
-  setPaymentContext,
-  setCardPaymentContext,
-  refetch
-}) {
+export function JobPayments({ job, jobRO, bodyshop, setPaymentContext, setCardPaymentContext, refetch }) {
   const {
     treatments: { ImEXPay }
   } = useSplitTreatments({
@@ -133,7 +127,7 @@ export function JobPayments({
     }
   ];
 
-    //Same as in RO guard. If changed, update in both. 
+  //Same as in RO guard. If changed, update in both.
   const total = useMemo(() => {
     return (
       job.payments &&