Revert "Merged in feature/IO-3484-Shop-Config-Account-Move (pull request #2769)"

This reverts commit 0f5dd02d75, reversing
changes made to 2eca085284.

_reference/localEmailViewer/index.js

@@ -1,116 +1,96 @@
 // index.js
 
-import express from 'express';
-import fetch from 'node-fetch';
-import {simpleParser} from 'mailparser';
+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');
+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('');
+  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">To:</span> ${parsed.to.text || "No To Address"}</div>
+              <div class="mb-2"><span class="font-semibold">Subject:</span> ${parsed.subject || "No Subject"}</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>
-    `;
+  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}`);
-});
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

_reference/localEmailViewer/package-lock.json

@@ -10,7 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "express": "^5.1.0",
-        "mailparser": "^3.7.2",
+        "mailparser": "^3.7.4",
         "node-fetch": "^3.3.2"
       }
     },
@@ -634,9 +634,9 @@
       "license": "MIT"
     },
     "node_modules/libmime": {
-      "version": "5.3.6",
-      "resolved": "https://registry.npmjs.org/libmime/-/libmime-5.3.6.tgz",
-      "integrity": "sha512-j9mBC7eiqi6fgBPAGvKCXJKJSIASanYF4EeA4iBzSG0HxQxmXnR3KbyWqTn4CwsKSebqCv2f5XZfAO6sKzgvwA==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/libmime/-/libmime-5.3.7.tgz",
+      "integrity": "sha512-FlDb3Wtha8P01kTL3P9M+ZDNDWPKPmKHWaU/cG/lg5pfuAwdflVpZE+wm9m7pKmC5ww6s+zTxBKS1p6yl3KpSw==",
       "license": "MIT",
       "dependencies": {
         "encoding-japanese": "2.2.0",
@@ -661,31 +661,31 @@
       }
     },
     "node_modules/mailparser": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/mailparser/-/mailparser-3.7.2.tgz",
-      "integrity": "sha512-iI0p2TCcIodR1qGiRoDBBwboSSff50vQAWytM5JRggLfABa4hHYCf3YVujtuzV454xrOP352VsAPIzviqMTo4Q==",
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/mailparser/-/mailparser-3.7.4.tgz",
+      "integrity": "sha512-Beh4yyR4jLq3CZZ32asajByrXnW8dLyKCAQD3WvtTiBnMtFWhxO+wa93F6sJNjDmfjxXs4NRNjw3XAGLqZR3Vg==",
       "license": "MIT",
       "dependencies": {
         "encoding-japanese": "2.2.0",
         "he": "1.2.0",
         "html-to-text": "9.0.5",
         "iconv-lite": "0.6.3",
-        "libmime": "5.3.6",
+        "libmime": "5.3.7",
         "linkify-it": "5.0.0",
-        "mailsplit": "5.4.2",
-        "nodemailer": "6.9.16",
+        "mailsplit": "5.4.5",
+        "nodemailer": "7.0.4",
         "punycode.js": "2.3.1",
-        "tlds": "1.255.0"
+        "tlds": "1.259.0"
       }
     },
     "node_modules/mailsplit": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/mailsplit/-/mailsplit-5.4.2.tgz",
-      "integrity": "sha512-4cczG/3Iu3pyl8JgQ76dKkisurZTmxMrA4dj/e8d2jKYcFTZ7MxOzg1gTioTDMPuFXwTrVuN/gxhkrO7wLg7qA==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/mailsplit/-/mailsplit-5.4.5.tgz",
+      "integrity": "sha512-oMfhmvclR689IIaQmIcR5nODnZRRVwAKtqFT407TIvmhX2OLUBnshUTcxzQBt3+96sZVDud9NfSe1NxAkUNXEQ==",
       "license": "(MIT OR EUPL-1.1+)",
       "dependencies": {
         "libbase64": "1.3.0",
-        "libmime": "5.3.6",
+        "libmime": "5.3.7",
         "libqp": "2.1.1"
       }
     },
@@ -793,9 +793,9 @@
       }
     },
     "node_modules/nodemailer": {
-      "version": "6.9.16",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.16.tgz",
-      "integrity": "sha512-psAuZdTIRN08HKVd/E8ObdV6NO7NTBY3KsC30F7M4H1OnmLCUNaS56FpYxyb26zWLSyYF9Ozch9KYHhHegsiOQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.4.tgz",
+      "integrity": "sha512-9O00Vh89/Ld2EcVCqJ/etd7u20UhME0f/NToPfArwPEe1Don1zy4mAIz6ariRr7mJ2RDxtaDzN0WJVdVXPtZaw==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
@@ -1114,9 +1114,9 @@
       }
     },
     "node_modules/tlds": {
-      "version": "1.255.0",
-      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.255.0.tgz",
-      "integrity": "sha512-tcwMRIioTcF/FcxLev8MJWxCp+GUALRhFEqbDoZrnowmKSGqPrl5pqS+Sut2m8BgJ6S4FExCSSpGffZ0Tks6Aw==",
+      "version": "1.259.0",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.259.0.tgz",
+      "integrity": "sha512-AldGGlDP0PNgwppe2quAvuBl18UcjuNtOnDuUkqhd6ipPqrYYBt3aTxK1QTsBVknk97lS2JcafWMghjGWFtunw==",
       "license": "MIT",
       "bin": {
         "tlds": "bin.js"

_reference/localEmailViewer/package.json

@@ -12,7 +12,7 @@
   "description": "",
   "dependencies": {
     "express": "^5.1.0",
-    "mailparser": "^3.7.2",
+    "mailparser": "^3.7.4",
     "node-fetch": "^3.3.2"
   }
 }

_reference/partsManagement/PATCH_parts-management-job-status.md

@@ -0,0 +1,61 @@
+# PATCH /integrations/parts-management/job/:id/status
+
+Update (patch) the status of a job created under parts management. This endpoint is only available
+for jobs whose parent bodyshop has an `external_shop_id` (i.e., is provisioned for parts
+management).
+
+## Endpoint
+
+```
+PATCH /integrations/parts-management/job/:id/status
+```
+
+- `:id` is the UUID of the job to update.
+
+## Request Headers
+
+- `Authorization`: (if required by your integration middleware)
+- `Content-Type: application/json`
+
+## Request Body
+
+Send a JSON object with the following field:
+
+- `status` (string, required): The new status for the job.
+
+Example:
+
+```
+PATCH /integrations/parts-management/job/123e4567-e89b-12d3-a456-426614174000/status
+Content-Type: application/json
+
+{
+  "status": "IN_PROGRESS"
+}
+```
+
+## Success Response
+
+- **200 OK**
+- Returns the updated job object with the new status.
+
+```
+{
+  "id": "123e4567-e89b-12d3-a456-426614174000",
+  "status": "IN_PROGRESS",
+  ...
+}
+```
+
+## Error Responses
+
+- **400 Bad Request**: Missing status field, or parent bodyshop does not have an `external_shop_id`.
+- **404 Not Found**: No job found with the given ID.
+- **500 Internal Server Error**: Unexpected error.
+
+## Notes
+
+- Only jobs whose parent bodyshop has an `external_shop_id` can be patched via this route.
+- Fields other than `status` will be ignored if included in the request body.
+- The route is protected by the same middleware as other parts management endpoints.
+

_reference/partsManagement/PATCH_parts-management-provision.md

@@ -0,0 +1,86 @@
+# PATCH /integrations/parts-management/provision/:id
+
+Update (patch) select fields for a parts management bodyshop. Only available for shops that have an
+`external_shop_id` (i.e., are provisioned for parts management).
+
+## Endpoint
+
+```
+PATCH /integrations/parts-management/provision/:id
+```
+
+- `:id` is the UUID of the bodyshop to update.
+
+## Request Headers
+
+- `Authorization`: (if required by your integration middleware)
+- `Content-Type: application/json`
+
+## Request Body
+
+Send a JSON object with one or more of the following fields to update:
+
+- `shopname` (string)
+- `address1` (string)
+- `address2` (string, optional)
+- `city` (string)
+- `state` (string)
+- `zip_post` (string)
+- `country` (string)
+- `email` (string, shop's email, not user email)
+- `timezone` (string)
+- `phone` (string)
+- `logo_img_path` (object, e.g. `{ src, width, height, headerMargin }`)
+
+Any fields not included in the request body will remain unchanged.
+
+## Example Request
+
+```
+PATCH /integrations/parts-management/provision/123e4567-e89b-12d3-a456-426614174000
+Content-Type: application/json
+
+{
+  "shopname": "New Shop Name",
+  "address1": "123 Main St",
+  "city": "Springfield",
+  "state": "IL",
+  "zip_post": "62704",
+  "country": "USA",
+  "email": "shop@example.com",
+  "timezone": "America/Chicago",
+  "phone": "555-123-4567",
+  "logo_img_path": {
+    "src": "https://example.com/logo.png",
+    "width": "200",
+    "height": "100",
+    "headerMargin": 10
+  }
+}
+```
+
+## Success Response
+
+- **200 OK**
+- Returns the updated shop object with the patched fields.
+
+```
+{
+  "id": "123e4567-e89b-12d3-a456-426614174000",
+  "shopname": "New Shop Name",
+  ...
+}
+```
+
+## Error Responses
+
+- **400 Bad Request**: No valid fields provided, or shop does not have an `external_shop_id`.
+- **404 Not Found**: No shop found with the given ID.
+- **500 Internal Server Error**: Unexpected error.
+
+## Notes
+
+- Only shops with an `external_shop_id` can be patched via this route.
+- Fields not listed above will be ignored if included in the request body.
+- The route is protected by the same middleware as other parts management endpoints.
+

bodyshop_translations.babel

@@ -5305,6 +5305,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>ro_posting</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>sendmaterialscosting</name>
                                                 <definition_loaded>false</definition_loaded>

client/.env.development.imex

@@ -16,4 +16,5 @@ TEST_USERNAME="test@imex.dev"
 TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/.env.development.rome

@@ -18,4 +18,5 @@ TEST_USERNAME="test@imex.dev"
 TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

client/.env.production.imex

@@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
 VITE_APP_INSTANCE=IMEX
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/.env.production.rome

@@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
 VITE_APP_INSTANCE=ROME
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

client/.env.test.imex

@@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/.env.test.rome

@@ -15,4 +15,5 @@ VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=ROME
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

client/package.json

@@ -8,56 +8,56 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.23.5",
+    "@amplitude/analytics-browser": "^2.25.2",
     "@ant-design/pro-layout": "^7.22.6",
     "@apollo/client": "^3.13.9",
     "@emotion/is-prop-valid": "^1.4.0",
     "@fingerprintjs/fingerprintjs": "^4.6.1",
     "@firebase/analytics": "^0.10.17",
-    "@firebase/app": "^0.14.2",
+    "@firebase/app": "^0.14.3",
     "@firebase/auth": "^1.10.8",
-    "@firebase/firestore": "^4.9.1",
+    "@firebase/firestore": "^4.9.2",
     "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.9.0",
-    "@sentry/cli": "^2.53.0",
+    "@sentry/cli": "^2.56.0",
     "@sentry/react": "^9.43.0",
     "@sentry/vite-plugin": "^4.3.0",
-    "@splitsoftware/splitio-react": "^2.3.1",
+    "@splitsoftware/splitio-react": "^2.5.0",
     "@tanem/react-nprogress": "^5.0.53",
-    "antd": "^5.27.3",
+    "antd": "^5.27.4",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^4.4.0",
     "autosize": "^6.0.1",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
     "dayjs": "^1.11.18",
     "dayjs-business-days2": "^1.3.0",
     "dinero.js": "^1.9.1",
-    "dotenv": "^17.2.2",
+    "dotenv": "^17.2.3",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
     "graphql": "^16.11.0",
-    "i18next": "^25.5.2",
+    "i18next": "^25.5.3",
     "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.15",
+    "libphonenumber-js": "^1.12.23",
+    "lightningcss": "^1.30.2",
     "logrocket": "^9.0.2",
-    "markerjs2": "^2.32.6",
+    "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
-    "normalize-url": "^8.0.2",
+    "normalize-url": "^8.1.0",
     "object-hash": "^3.0.0",
     "phone": "^3.1.67",
-    "posthog-js": "^1.261.7",
+    "posthog-js": "^1.271.0",
     "prop-types": "^15.8.1",
-    "query-string": "^9.2.2",
+    "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
     "react-big-calendar": "^1.19.4",
     "react-color": "^2.19.3",
     "react-cookie": "^8.0.1",
-    "lightningcss": "^1.30.1",
     "react-dom": "^18.3.1",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
@@ -73,7 +73,7 @@
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.30.0",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.14.0",
+    "react-virtuoso": "^4.14.1",
     "recharts": "^2.15.2",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
@@ -81,7 +81,7 @@
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.92.0",
+    "sass": "^1.93.2",
     "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.19",
     "subscriptions-transport-ws": "^0.11.0",
@@ -133,33 +133,33 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.0.0",
+    "@ant-design/icons": "^6.1.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.27.1",
-    "@dotenvx/dotenvx": "^1.49.0",
+    "@dotenvx/dotenvx": "^1.51.0",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.33.0",
-    "@playwright/test": "^1.55.0",
-    "@sentry/webpack-plugin": "^4.1.1",
+    "@eslint/js": "^9.37.0",
+    "@playwright/test": "^1.56.0",
+    "@sentry/webpack-plugin": "^4.3.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@vitejs/plugin-react": "^4.6.0",
-    "browserslist": "^4.25.3",
+    "browserslist": "^4.26.3",
     "browserslist-to-esbuild": "^2.1.1",
-    "chalk": "^5.6.0",
-    "eslint": "^9.33.0",
+    "chalk": "^5.6.2",
+    "eslint": "^9.37.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^15.15.0",
     "jsdom": "^26.0.0",
-    "memfs": "^4.36.3",
+    "memfs": "^4.48.1",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.55.0",
+    "playwright": "^1.56.0",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^7.1.3",
+    "vite": "^7.1.9",
     "vite-plugin-babel": "^1.3.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.24.0",

client/src/App/App.container.jsx

@@ -12,6 +12,7 @@ import GlobalLoadingBar from "../components/global-loading-bar/global-loading-ba
 import { setDarkMode } from "../redux/application/application.actions";
 import { selectDarkMode } from "../redux/application/application.selectors";
 import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { signOutStart } from "../redux/user/user.actions";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import getTheme from "./themeProvider";
@@ -20,14 +21,13 @@ import getTheme from "./themeProvider";
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
-    key: "anon" // Default key, overridden dynamically by SplitClientProvider
+    key: "anon"
   }
 };
 
-// Custom provider to manage the Split client key based on imexshopid from Redux
 function SplitClientProvider({ children }) {
-  const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
-  const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
+  const imexshopid = useSelector((state) => state.user.imexshopid);
+  const splitClient = useSplitClient({ key: imexshopid || "anon" });
   useEffect(() => {
     if (splitClient && imexshopid) {
       console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
@@ -36,40 +36,66 @@ function SplitClientProvider({ children }) {
   return children;
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode))
-});
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-function AppContainer({ currentUser, setDarkMode }) {
+const mapDispatchToProps = (dispatch) => ({
+  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
+  signOutStart: () => dispatch(signOutStart())
+});
+
+function AppContainer({ currentUser, setDarkMode, signOutStart }) {
   const { t } = useTranslation();
   const isDarkMode = useSelector(selectDarkMode);
   const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
 
-  // Update data-theme attribute when dark mode changes
+  // Global seamless logout listener with redirect to /signin
+  useEffect(() => {
+    const handleSeamlessLogout = (event) => {
+      if (event.data?.type !== "seamlessLogoutRequest") return;
+
+      const requestOrigin = event.origin;
+
+      if (currentUser?.authorized !== true) {
+        window.parent.postMessage(
+          { type: "seamlessLogoutResponse", status: "already_logged_out" },
+          requestOrigin || "*"
+        );
+        return;
+      }
+
+      signOutStart();
+      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
+    };
+
+    window.addEventListener("message", handleSeamlessLogout);
+    return () => {
+      window.removeEventListener("message", handleSeamlessLogout);
+    };
+  }, [signOutStart, currentUser]);
+
+  // Update data-theme attribute
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
     return () => document.documentElement.removeAttribute("data-theme");
   }, [isDarkMode]);
 
-  // Sync Redux darkMode with localStorage on user change
+  // Sync darkMode with localStorage
   useEffect(() => {
     if (currentUser?.uid) {
       const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
       if (savedMode !== null) {
         setDarkMode(JSON.parse(savedMode));
       } else {
-        setDarkMode(false); // default to light mode
+        setDarkMode(false);
       }
     } else {
       setDarkMode(false);
     }
-  }, [currentUser?.uid]);
+  }, [currentUser?.uid, setDarkMode]);
 
-  // Persist darkMode to localStorage when it or user changes
+  // Persist darkMode
   useEffect(() => {
     if (currentUser?.uid) {
       localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));

client/src/App/App.jsx

@@ -24,6 +24,7 @@ import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
 import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";
 import SocketProvider from "../contexts/SocketIO/socketProvider.jsx";
+import SoundWrapper from "./SoundWrapper.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -72,9 +73,6 @@ export function App({
     setIsPartsEntry(isParts);
   }, [setIsPartsEntry]);
 
-  //const b = Grid.useBreakpoint();
-  // console.log("Breakpoints:", b);
-
   // Associate event listeners, memoize to prevent multiple listeners being added
   useEffect(() => {
     const offlineListener = () => {
@@ -140,7 +138,7 @@ export function App({
     );
   }
 
-  if (currentEula && !currentUser.eulaIsAccepted) {
+  if (!isPartsEntry && currentEula && !currentUser.eulaIsAccepted) {
     return <Eula />;
   }
 
@@ -164,85 +162,87 @@ export function App({
       />
 
       <NotificationProvider>
-        <Routes>
-          <Route
-            path="*"
-            element={
-              <ErrorBoundary>
-                <LandingPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/signin"
-            element={
-              <ErrorBoundary>
-                <SignInPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/resetpassword"
-            element={
-              <ErrorBoundary>
-                <ResetPassword />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/csi/:surveyId"
-            element={
-              <ErrorBoundary>
-                <CsiPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/disclaimer"
-            element={
-              <ErrorBoundary>
-                <DisclaimerPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/manage/*"
-            element={
-              <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+        <SoundWrapper bodyshop={bodyshop}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <ErrorBoundary>
+                  <LandingPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/signin"
+              element={
+                <ErrorBoundary>
+                  <SignInPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/resetpassword"
+              element={
+                <ErrorBoundary>
+                  <ResetPassword />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/csi/:surveyId"
+              element={
+                <ErrorBoundary>
+                  <CsiPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/disclaimer"
+              element={
+                <ErrorBoundary>
+                  <DisclaimerPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/manage/*"
+              element={
+                <ErrorBoundary>
+                  <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+                    <PrivateRoute isAuthorized={currentUser.authorized} />
+                  </SocketProvider>
+                </ErrorBoundary>
+              }
+            >
+              <Route path="*" element={<ManagePage />} />
+            </Route>
+            <Route
+              path="/tech/*"
+              element={
+                <ErrorBoundary>
+                  <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+                    <PrivateRoute isAuthorized={currentUser.authorized} />
+                  </SocketProvider>
+                </ErrorBoundary>
+              }
+            >
+              <Route path="*" element={<TechPageContainer />} />
+            </Route>
+            <Route
+              path="/parts/*"
+              element={
+                <ErrorBoundary>
                   <PrivateRoute isAuthorized={currentUser.authorized} />
-                </SocketProvider>
-              </ErrorBoundary>
-            }
-          >
-            <Route path="*" element={<ManagePage />} />
-          </Route>
-          <Route
-            path="/tech/*"
-            element={
-              <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
-                  <PrivateRoute isAuthorized={currentUser.authorized} />
-                </SocketProvider>
-              </ErrorBoundary>
-            }
-          >
-            <Route path="*" element={<TechPageContainer />} />
-          </Route>
-          <Route
-            path="/parts/*"
-            element={
-              <ErrorBoundary>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
-              </ErrorBoundary>
-            }
-          >
-            <Route path="*" element={<SimplifiedPartsPageContainer />} />
-          </Route>
-          <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
-            <Route path="*" element={<DocumentEditorContainer />} />
-          </Route>
-        </Routes>
+                </ErrorBoundary>
+              }
+            >
+              <Route path="*" element={<SimplifiedPartsPageContainer />} />
+            </Route>
+            <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+              <Route path="*" element={<DocumentEditorContainer />} />
+            </Route>
+          </Routes>
+        </SoundWrapper>
       </NotificationProvider>
     </Suspense>
   );

client/src/App/App.styles.scss

@@ -272,23 +272,23 @@
 }
 
 // Scrollbar styles (uncomment if needed, updated for dark mode)
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0.2rem;
-  background-color: var(--table-stripe-bg);
-}
+// ::-webkit-scrollbar-track {
+//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+//   border-radius: 0.2rem;
+//   background-color: var(--table-stripe-bg);
+// }
 
-::-webkit-scrollbar {
-  width: 0.25rem;
-  max-height: 0.25rem;
-  background-color: var(--table-stripe-bg);
-}
+// ::-webkit-scrollbar {
+//   width: 0.25rem;
+//   max-height: 0.25rem;
+//   background-color: var(--table-stripe-bg);
+// }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 0.2rem;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: var(--alert-color);
-}
+// ::-webkit-scrollbar-thumb {
+//   border-radius: 0.2rem;
+//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+//   background-color: var(--alert-color);
+// }
 
 .ant-input-number-input,
 .ant-input-number,

client/src/App/SoundWrapper.jsx

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNotification } from "../contexts/Notifications/notificationContext.jsx";
+import { initNewMessageSound, unlockAudio } from "./../utils/soundManager";
+import { initSingleTabAudioLeader } from "../utils/singleTabAudioLeader";
+
+export default function SoundWrapper({ children, bodyshop }) {
+  const { t } = useTranslation();
+  const notification = useNotification();
+
+  useEffect(() => {
+    if (!bodyshop?.id) return;
+
+    // 1) Init single-tab leader election (only one tab should play sounds), scoped by bodyshopId
+    const cleanupLeader = initSingleTabAudioLeader(bodyshop.id);
+
+    // 2) Initialize base audio
+    initNewMessageSound("https://images.imex.online/app/messageTone.wav", 0.7);
+
+    // 3) Show a one-time prompt when autoplay blocks first play
+    const onNeedsUnlock = () => {
+      notification.info({
+        description: t("audio.manager.description"),
+        duration: 3
+      });
+    };
+    window.addEventListener("sound-needs-unlock", onNeedsUnlock);
+
+    // 4) Proactively unlock on first gesture (once per session)
+    const gesture = () => unlockAudio(bodyshop.id);
+    window.addEventListener("click", gesture, { once: true, passive: true });
+    window.addEventListener("touchstart", gesture, { once: true, passive: true });
+    window.addEventListener("keydown", gesture, { once: true });
+
+    return () => {
+      cleanupLeader();
+      window.removeEventListener("sound-needs-unlock", onNeedsUnlock);
+      // gesture listeners were added with {once:true}
+    };
+  }, [notification, t, bodyshop?.id]); // include bodyshop.id so this runs when org changes
+
+  return <>{children}</>;
+}

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

@@ -142,7 +142,16 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
             refetch={refetch}
           />
           <Link to={`/manage/jobs/${record.id}/close`}>
-            <Button>{t("jobs.labels.viewallocations")}</Button>
+            <Button
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                verticalAlign: "middle"
+              }}
+            >
+              {t("jobs.labels.viewallocations")}
+            </Button>
           </Link>
         </Space>
       )

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -26,6 +26,7 @@ import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
 import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -450,7 +451,9 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           setEnterAgain(false);
         }}
       >
-        <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
+        <RbacWrapper action="bills:enter">
+          <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
+        </RbacWrapper>
       </Form>
     </Modal>
   );

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

@@ -45,7 +45,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.jobline"),
         dataIndex: "joblineid",
         editable: true,
-        width: "20rem",
+        minWidth: "10rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}joblinename`,
@@ -71,9 +71,9 @@ export function BillEnterModalLinesComponent({
             disabled={disabled}
             options={lineData}
             style={{
-              width: "20rem",
-              maxWidth: "20rem",
-              minWidth: "10rem",
+              //width: "10rem",
+              // maxWidth: "20rem",
+              minWidth: "20rem",
               whiteSpace: "normal",
               height: "auto",
               minHeight: "32px" // default height of Ant Design inputs
@@ -110,7 +110,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.line_desc"),
         dataIndex: "line_desc",
         editable: true,
-        width: "20rem",
+        minWidth: "10rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}line_desc`,
@@ -232,7 +232,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.actual_cost"),
         dataIndex: "actual_cost",
         editable: true,
-        width: "8rem",
+        width: "10rem",
 
         formItemProps: (field) => {
           return {
@@ -357,6 +357,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.labels.deductedfromlbr"),
         dataIndex: "deductedfromlbr",
         editable: true,
+        width: "40px",
         formItemProps: (field) => {
           return {
             valuePropName: "checked",
@@ -464,7 +465,7 @@ export function BillEnterModalLinesComponent({
             title: t("billlines.fields.federal_tax_applicable"),
             dataIndex: "applicable_taxes.federal",
             editable: true,
-
+            width: "40px",
             formItemProps: (field) => {
               return {
                 key: `${field.index}fedtax`,
@@ -485,7 +486,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.state_tax_applicable"),
         dataIndex: "applicable_taxes.state",
         editable: true,
-
+        width: "40px",
         formItemProps: (field) => {
           return {
             key: `${field.index}statetax`,
@@ -503,7 +504,7 @@ export function BillEnterModalLinesComponent({
             title: t("billlines.fields.local_tax_applicable"),
             dataIndex: "applicable_taxes.local",
             editable: true,
-
+            width: "40px",
             formItemProps: (field) => {
               return {
                 key: `${field.index}localtax`,

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

@@ -39,30 +39,32 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
           style: {
             ...(item.removed ? { textDecoration: "line-through" } : {})
           },
-          name: `${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-            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}` : ""
-                }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
-              </span>
-              {InstanceRenderMgr({
-                rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
-                  <span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
-                )
-              })}
-              <span style={{ float: "right", paddingleft: "1rem" }}>
-                {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
-              </span>
-            </div>
-          )
+          name: generateLineName(item),
+          label: generateLineName(item)
         }))
       ]}
       {...restProps}
     ></Select>
   );
 };
+
+function generateLineName(item) {
+  return (
+    <div style={{ whiteSpace: "normal", wordBreak: "break-word" }}>
+      <span>
+        {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
+          item.oem_partno ? ` - ${item.oem_partno}` : ""
+        }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
+      </span>
+      {InstanceRenderMgr({
+        rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
+          <span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
+        )
+      })}
+      <span style={{ float: "right", paddingleft: "1rem" }}>
+        {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
+      </span>
+    </div>
+  );
+}
 export default forwardRef(BillLineSearchSelect);

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

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -75,6 +76,7 @@ export function BillsListTableComponent({
       <Button
         title={t("tasks.buttons.create")}
         onClick={() => {
+          logImEXEvent("bills_create_task", {});
           setTaskUpsertContext({
             context: {
               jobid: job.id,
@@ -167,6 +169,7 @@ export function BillsListTableComponent({
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    logImEXEvent("bills_list_sort_filter", { pagination, filters, sorter });
   };
 
   const filteredBills = bills
@@ -208,6 +211,7 @@ export function BillsListTableComponent({
               <Button
                 disabled={!hasBillsAccess}
                 onClick={() => {
+                  logImEXEvent("bills_reconcile", {});
                   setReconciliationContext({
                     actions: { refetch: billsQuery.refetch },
                     context: {

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

@@ -14,7 +14,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
-import { getCurrentUser } from "../../firebase/firebase.utils";
+import { getCurrentUser, logImEXEvent } from "../../firebase/firebase.utils";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
@@ -124,6 +124,7 @@ const CardPaymentModalComponent = ({
     const { payments } = form.getFieldsValue();
 
     try {
+      logImEXEvent("payment_cc_lightbox");
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
@@ -171,6 +172,7 @@ const CardPaymentModalComponent = ({
 
     try {
       const { payments } = form.getFieldsValue();
+      logImEXEvent("payment_cc_shortlink");
       const response = await axios.post("/intellipay/generate_payment_url", {
         bodyshop,
         amount: payments.reduce((acc, val) => acc + (val?.amount || 0), 0),

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

@@ -2,22 +2,21 @@ import { useApolloClient } from "@apollo/client";
 import { getToken } from "@firebase/messaging";
 import axios from "axios";
 import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
-export function ChatAffixContainer({ bodyshop, chatVisible }) {
-  const { t } = useTranslation();
+export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
   const client = useApolloClient();
   const { socket } = useSocket();
 
+  // 1) FCM subscription (independent of socket handler registration)
   useEffect(() => {
-    if (!bodyshop || !bodyshop.messagingservicesid) return;
+    if (!bodyshop?.messagingservicesid) return;
 
-    async function SubscribeToTopicForFCMNotification() {
+    async function subscribeToTopicForFCMNotification() {
       try {
         await requestForToken();
         await axios.post("/notifications/subscribe", {
@@ -32,23 +31,41 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
       }
     }
 
-    SubscribeToTopicForFCMNotification();
+    subscribeToTopicForFCMNotification();
+  }, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
 
-    // Register WebSocket handlers
-    if (socket && socket.connected) {
-      registerMessagingHandlers({ socket, client });
+  // 2) Register socket handlers as soon as socket is connected (regardless of chatVisible)
+  useEffect(() => {
+    if (!socket) return;
+    if (!bodyshop?.messagingservicesid) return;
+    if (!bodyshop?.id) return;
 
-      return () => {
-        unregisterMessagingHandlers({ socket });
-      };
+    // If socket isn't connected yet, ensure no stale handlers remain.
+    if (!socket.connected) {
+      unregisterMessagingHandlers({ socket });
+      return;
     }
-  }, [bodyshop, socket, t, client]);
 
-  if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
+    // Prevent duplicate listeners if this effect runs more than once.
+    unregisterMessagingHandlers({ socket });
+
+    registerMessagingHandlers({
+      socket,
+      client,
+      currentUser,
+      bodyshop
+    });
+
+    return () => {
+      unregisterMessagingHandlers({ socket });
+    };
+  }, [socket, socket?.connected, bodyshop?.id, bodyshop?.messagingservicesid, client, currentUser?.email]);
+
+  if (!bodyshop?.messagingservicesid) return <></>;
 
   return (
     <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
+      {bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
     </div>
   );
 }

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

@@ -1,6 +1,11 @@
-import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { gql } from "@apollo/client";
 
+import { playNewMessageSound } from "../../utils/soundManager.js";
+import { isLeaderTab } from "../../utils/singleTabAudioLeader";
+
+import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
+import { QUERY_ACTIVE_ASSOCIATION_SOUND } from "../../graphql/user.queries";
+
 const logLocal = (message, ...args) => {
   if (import.meta.env.VITE_APP_IS_TEST || !import.meta.env.PROD) {
     console.log(`==================== ${message} ====================`);
@@ -8,36 +13,241 @@ const logLocal = (message, ...args) => {
   }
 };
 
-// Utility function to enrich conversation data
-const enrichConversation = (conversation, isOutbound) => ({
+const safeIsoNow = () => new Date().toISOString();
+const isSystemMsid = (msid) => typeof msid === "string" && msid.startsWith("SYS_");
+
+const normalizeConversationForList = (raw, { isoutbound, isSystem } = {}) => {
+  const c = raw || {};
+  const id = c.id;
+
+  return {
+    __typename: "conversations",
+    id,
+    phone_num: c.phone_num ?? null,
+    updated_at: c.updated_at ?? safeIsoNow(),
+    unreadcnt: typeof c.unreadcnt === "number" ? c.unreadcnt : 0,
+    archived: c.archived ?? false,
+    label: c.label ?? null,
+
+    job_conversations: Array.isArray(c.job_conversations)
+      ? c.job_conversations.map((jc) => {
+          const job = jc?.job || {};
+          const jobId = jc?.jobid ?? job?.id ?? null;
+
+          return {
+            __typename: "job_conversations",
+            jobid: jobId,
+            conversationid: jc?.conversationid ?? id ?? null,
+            job: {
+              __typename: "jobs",
+              id: jobId,
+              ro_number: job?.ro_number ?? null,
+              ownr_fn: job?.ownr_fn ?? null,
+              ownr_ln: job?.ownr_ln ?? null,
+              ownr_co_nm: job?.ownr_co_nm ?? null
+            }
+          };
+        })
+      : [],
+
+    messages_aggregate: c.messages_aggregate || {
+      __typename: "messages_aggregate",
+      aggregate: {
+        __typename: "messages_aggregate_fields",
+        count: isoutbound || isSystem ? 0 : 1
+      }
+    }
+  };
+};
+
+const CONVERSATION_LIST_ITEM_FRAGMENT = gql`
+  fragment _ConversationListItem on conversations {
+    id
+    phone_num
+    updated_at
+    unreadcnt
+    archived
+    label
+    job_conversations {
+      jobid
+      conversationid
+      job {
+        id
+        ro_number
+        ownr_fn
+        ownr_ln
+        ownr_co_nm
+      }
+    }
+    messages_aggregate(where: { read: { _eq: false }, isoutbound: { _eq: false }, is_system: { _eq: false } }) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
+
+const normalizeMessageForCache = (raw, fallbackConversationId) => {
+  const m = raw || {};
+
+  return {
+    __typename: "messages",
+    id: m.id,
+    conversationid: m.conversationid ?? m.conversation?.id ?? fallbackConversationId,
+
+    status: m.status ?? null,
+    text: m.text ?? "",
+    is_system: typeof m.is_system === "boolean" ? m.is_system : false,
+    isoutbound: typeof m.isoutbound === "boolean" ? m.isoutbound : false,
+    image: typeof m.image === "boolean" ? m.image : false,
+    image_path: m.image_path ?? null,
+    userid: m.userid ?? null,
+    created_at: m.created_at ?? safeIsoNow(),
+    read: typeof m.read === "boolean" ? m.read : false
+  };
+};
+
+const isConversationDetailsCached = (client, conversationId) => {
+  try {
+    return !!client.cache.readQuery({
+      query: GET_CONVERSATION_DETAILS,
+      variables: { conversationId }
+    })?.conversations_by_pk;
+  } catch {
+    return false;
+  }
+};
+
+const conversationDetailsCached = (client, conversationId) => {
+  try {
+    const res = client.cache.readQuery({
+      query: GET_CONVERSATION_DETAILS,
+      variables: { conversationId }
+    });
+    return !!res?.conversations_by_pk;
+  } catch {
+    return false;
+  }
+};
+
+const messageEntityCached = (client, messageId) => {
+  const cacheId = client.cache.identify({ __typename: "messages", id: messageId });
+  if (!cacheId) return false;
+
+  try {
+    client.cache.readFragment({
+      id: cacheId,
+      fragment: gql`
+        fragment _MsgExists on messages {
+          id
+        }
+      `
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const enrichConversation = (conversation, { isoutbound, isSystem }) => ({
   ...conversation,
-  updated_at: conversation.updated_at || new Date().toISOString(),
-  unreadcnt: conversation.unreadcnt || 0,
-  archived: conversation.archived || false,
-  label: conversation.label || null,
+  updated_at: conversation.updated_at || safeIsoNow(),
+  unreadcnt: typeof conversation.unreadcnt === "number" ? 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
+      count: isoutbound || isSystem ? 0 : 1
     }
   },
   __typename: "conversations"
 });
 
-export const registerMessagingHandlers = ({ socket, client }) => {
+const upsertConversationIntoOffsetZeroList = (client, conversationObj, { isoutbound, isSystem } = {}) => {
+  const normalized = normalizeConversationForList(conversationObj, { isoutbound, isSystem });
+  if (!normalized?.id) return;
+
+  const convCacheId = client.cache.identify(normalized);
+  if (!convCacheId) return;
+
+  client.cache.writeFragment({
+    id: convCacheId,
+    fragment: CONVERSATION_LIST_ITEM_FRAGMENT,
+    data: normalized
+  });
+
+  client.cache.modify({
+    id: "ROOT_QUERY",
+    fields: {
+      conversations(existing = [], { args, readField }) {
+        if (!args || args.offset !== 0) return existing;
+
+        const archivedEq = args?.where?.archived?._eq;
+        if (archivedEq === true) return existing;
+
+        const without = existing.filter((c) => readField("id", c) !== normalized.id);
+        return [{ __ref: convCacheId }, ...without];
+      }
+    }
+  });
+};
+
+export const registerMessagingHandlers = ({ socket, client, currentUser, bodyshop }) => {
   if (!(socket && client)) return;
 
+  // Coalesce unread refetches (avoid spamming during bursts)
+  let unreadRefetchInFlight = null;
+  const refetchUnreadCount = () => {
+    if (unreadRefetchInFlight) return;
+
+    unreadRefetchInFlight = client
+      .refetchQueries({
+        include: ["UNREAD_CONVERSATION_COUNT"]
+      })
+      .catch(() => {
+        // best-effort
+      })
+      .finally(() => {
+        unreadRefetchInFlight = null;
+      });
+  };
+
   const handleNewMessageSummary = async (message) => {
-    const { conversationId, newConversation, existingConversation, isoutbound } = message;
+    const { conversationId, newConversation, existingConversation, isoutbound, msid, updated_at } = message;
+    const isSystem = isSystemMsid(msid);
+
+    const isNewMessageSoundEnabled = (clientInstance) => {
+      try {
+        const email = currentUser?.email;
+        if (!email) return true;
+        const res = clientInstance.readQuery({
+          query: QUERY_ACTIVE_ASSOCIATION_SOUND,
+          variables: { email }
+        });
+        const flag = res?.associations?.[0]?.new_message_sound;
+        return flag === true;
+      } catch {
+        return true;
+      }
+    };
 
     logLocal("handleNewMessageSummary - Start", { message, isNew: !existingConversation });
 
-    const queryVariables = { offset: 0 };
+    if (!isoutbound) {
+      if (isLeaderTab(bodyshop.id) && isNewMessageSoundEnabled(client)) {
+        playNewMessageSound(bodyshop.id);
+      }
+
+      // Real-time badge update for affix (best-effort, coalesced)
+      if (!isSystem) {
+        refetchUnreadCount();
+      }
+    }
 
     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 }),
@@ -49,75 +259,54 @@ export const registerMessagingHandlers = ({ socket, client }) => {
         });
 
         if (cachedConversation) {
-          logLocal("handleNewMessageSummary - Existing Conversation inferred from cache", {
-            conversationId
-          });
-          return handleNewMessageSummary({
-            ...message,
-            existingConversation: true
-          });
+          logLocal("handleNewMessageSummary - Existing Conversation inferred from cache", { conversationId });
+          return handleNewMessageSummary({ ...message, existingConversation: true });
         }
       } catch {
-        logLocal("handleNewMessageSummary - Cache miss", { conversationId });
+        // Cache miss is normal
       }
     }
 
-    // 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];
-              }
-            }
-          });
-        }
+        upsertConversationIntoOffsetZeroList(client, newConversation, { isoutbound, isSystem });
       } catch (error) {
         console.error("Error updating cache for new conversation:", error);
       }
       return;
     }
 
-    // Handle existing conversation
-    if (existingConversation) {
+    if (existingConversation && conversationId) {
       try {
         client.cache.modify({
           id: client.cache.identify({ __typename: "conversations", id: conversationId }),
           fields: {
-            updated_at: () => new Date().toISOString(),
+            updated_at: () => updated_at || safeIsoNow(),
             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;
+
+            messages_aggregate(cached = null) {
+              if (isoutbound || isSystem) return cached;
+
+              const currentCount = cached?.aggregate?.count ?? 0;
+              return {
+                __typename: "messages_aggregate",
+                aggregate: {
+                  __typename: "messages_aggregate_fields",
+                  count: currentCount + 1
+                }
+              };
+            },
+
+            unreadcnt(cached) {
+              if (isoutbound || isSystem) return cached;
+              const n = typeof cached === "number" ? cached : 0;
+              return n + 1;
             }
           }
         });
       } catch (error) {
         console.error("Error updating cache for existing conversation:", error);
       }
-
       return;
     }
 
@@ -129,88 +318,78 @@ export const registerMessagingHandlers = ({ socket, client }) => {
 
     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 (!conversationId || !isConversationDetailsCached(client, conversationId)) return;
 
-      if (!queryResults?.conversations_by_pk) {
-        console.warn("Conversation not found in cache:", { conversationId });
+    try {
+      const normalized = normalizeMessageForCache(newMessage, conversationId);
+
+      const messageCacheId = client.cache.identify(normalized);
+      if (!messageCacheId) {
+        console.warn("handleNewMessageDetailed - Could not identify message for cache", {
+          conversationId,
+          newMessageId: newMessage?.id
+        });
         return;
       }
 
-      // Append the new message to the conversation's message list using cache.modify
+      client.cache.writeFragment({
+        id: messageCacheId,
+        fragment: gql`
+          fragment _IncomingMessage on messages {
+            id
+            conversationid
+            status
+            text
+            is_system
+            isoutbound
+            image
+            image_path
+            userid
+            created_at
+            read
+          }
+        `,
+        data: normalized
+      });
+
       client.cache.modify({
         id: client.cache.identify({ __typename: "conversations", id: conversationId }),
         fields: {
-          messages(existingMessages = []) {
-            return [...existingMessages, newMessage];
+          messages(existing = [], { readField }) {
+            const already = existing.some((ref) => readField("id", ref) === normalized.id);
+            if (already) return existing;
+            return [...existing, { __ref: messageCacheId }];
+          },
+          updated_at() {
+            return normalized.created_at || safeIsoNow();
           }
         }
       });
 
-      logLocal("handleNewMessageDetailed - Message appended successfully", {
-        conversationId,
-        newMessage
-      });
+      logLocal("handleNewMessageDetailed - Message appended successfully", { conversationId });
     } catch (error) {
       console.error("Error updating conversation messages in cache:", error);
     }
   };
 
   const handleMessageChanged = (message) => {
-    if (!message) {
-      logLocal("handleMessageChanged - No message provided", message);
-      return;
-    }
+    if (!message?.id) return;
 
     logLocal("handleMessageChanged - Start", message);
 
+    if (!messageEntityCached(client, message.id)) return;
+
     try {
+      const msgCacheId = client.cache.identify({ __typename: "messages", id: message.id });
+
       client.cache.modify({
-        id: client.cache.identify({ __typename: "conversations", id: message.conversationid }),
+        id: msgCacheId,
         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
-                    };
-
-                  default:
-                    // Log a warning for unhandled message types
-                    logLocal("handleMessageChanged - Unhandled message type", { type: message.type });
-                    return messageRef;
-                }
-              }
-
-              return messageRef;
-            });
+          status(existing) {
+            return message.type === "status-changed" ? (message.status ?? existing) : existing;
+          },
+          text(existing) {
+            return message.type === "text-updated" ? (message.text ?? existing) : existing;
           }
         }
       });
@@ -225,150 +404,140 @@ export const registerMessagingHandlers = ({ socket, client }) => {
   };
 
   const handleConversationChanged = async (data) => {
-    if (!data) {
-      logLocal("handleConversationChanged - No data provided", data);
-      return;
-    }
+    if (!data?.conversationId) return;
+
+    const {
+      conversationId,
+      type,
+      job_conversations,
+      messageIds,
+      messageIdsMarkedRead,
+      lastUnreadMessageId,
+      unreadCount,
+      ...fields
+    } = data;
 
-    const { conversationId, type, job_conversations, messageIds, ...fields } = data;
     logLocal("handleConversationChanged - Start", data);
 
-    const updatedAt = new Date().toISOString();
+    const updatedAt = safeIsoNow();
+    const detailsCached = conversationDetailsCached(client, conversationId);
 
-    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)]
-          : [newConversation]; // Prevent duplicates
-
-        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 }
-                })
-              }
+        case "conversation-marked-read": {
+          refetchUnreadCount();
+
+          if (detailsCached && Array.isArray(messageIds)) {
+            messageIds.forEach((id) => {
+              if (!messageEntityCached(client, id)) return;
+              client.cache.modify({
+                id: client.cache.identify({ __typename: "messages", id }),
+                fields: { read: () => true }
+              });
             });
           }
-          break;
 
-        case "conversation-created":
-          updateConversationList({ ...fields, job_conversations, updated_at: updatedAt });
+          client.cache.modify({
+            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+            fields: {
+              messages_aggregate: () => ({
+                __typename: "messages_aggregate",
+                aggregate: { __typename: "messages_aggregate_fields", count: 0 }
+              }),
+              unreadcnt: () => 0,
+              updated_at: () => updatedAt
+            }
+          });
+
           break;
+        }
+
+        case "conversation-marked-unread": {
+          refetchUnreadCount();
+
+          const safeUnreadCount = typeof unreadCount === "number" ? unreadCount : 1;
+          const idsMarkedRead = Array.isArray(messageIdsMarkedRead) ? messageIdsMarkedRead : [];
+
+          if (detailsCached) {
+            idsMarkedRead.forEach((id) => {
+              if (!messageEntityCached(client, id)) return;
+              client.cache.modify({
+                id: client.cache.identify({ __typename: "messages", id }),
+                fields: { read: () => true }
+              });
+            });
+
+            if (lastUnreadMessageId && messageEntityCached(client, lastUnreadMessageId)) {
+              client.cache.modify({
+                id: client.cache.identify({ __typename: "messages", id: lastUnreadMessageId }),
+                fields: { read: () => false }
+              });
+            }
+          }
+
+          client.cache.modify({
+            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+            fields: {
+              updated_at: () => updatedAt,
+              messages_aggregate: () => ({
+                __typename: "messages_aggregate",
+                aggregate: {
+                  __typename: "messages_aggregate_fields",
+                  count: safeUnreadCount
+                }
+              }),
+              unreadcnt: () => safeUnreadCount
+            }
+          });
+
+          break;
+        }
+
+        case "conversation-created": {
+          // New conversation likely implies new unread inbound message(s)
+          refetchUnreadCount();
+
+          const conv = enrichConversation(
+            { id: conversationId, job_conversations, ...fields, updated_at: updatedAt },
+            { isoutbound: false, isSystem: false }
+          );
+          upsertConversationIntoOffsetZeroList(client, conv);
+          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 };
+        case "conversation-archived": {
+          // Keep unread badge correct even if archiving affects counts
+          refetchUnreadCount();
 
-            // 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);
-          }
+          await client.refetchQueries({
+            include: [CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS]
+          });
           break;
+        }
 
-        case "tag-added": { // Ensure `job_conversations` is properly formatted
-          const formattedJobConversations = job_conversations.map((jc) => ({
+        case "tag-added": {
+          const formattedJobConversations = (job_conversations || []).map((jc) => ({
             __typename: "job_conversations",
             jobid: jc.jobid || jc.job?.id,
             conversationid: conversationId,
-            job: jc.job || {
+            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
+              id: jc.job?.id,
+              ro_number: jc.job?.ro_number,
+              ownr_co_nm: jc.job?.ownr_co_nm,
+              ownr_fn: jc.job?.ownr_fn,
+              ownr_ln: jc.job?.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];
+              job_conversations(existing = [], { readField }) {
+                const seen = new Set(existing.map((x) => readField("jobid", x)).filter(Boolean));
+                const incoming = formattedJobConversations.filter((x) => x.jobid && !seen.has(x.jobid));
+                return [...existing, ...incoming];
               }
             }
           });
@@ -376,46 +545,31 @@ export const registerMessagingHandlers = ({ socket, client }) => {
           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);
-          }
+        case "tag-removed": {
+          const conversationCacheId = client.cache.identify({ __typename: "conversations", id: conversationId });
 
+          client.cache.evict({
+            id: conversationCacheId,
+            fieldName: "job_conversations"
+          });
+          client.cache.gc();
           break;
+        }
 
-        default:
-          logLocal("handleConversationChanged - Unhandled type", { type });
+        default: {
           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)])
-              )
-            }
+            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 });
     }
   };
 
-  // Existing handler for phone number opt-out
   const handlePhoneNumberOptedOut = async (data) => {
     const { bodyshopid, phone_number } = data;
     logLocal("handlePhoneNumberOptedOut - Start", data);
@@ -425,22 +579,18 @@ export const registerMessagingHandlers = ({ socket, client }) => {
         id: "ROOT_QUERY",
         fields: {
           phone_number_opt_out(existing = [], { readField }) {
-            const phoneNumberExists = existing.some(
+            const exists = existing.some(
               (ref) => readField("phone_number", ref) === phone_number && readField("bodyshopid", ref) === bodyshopid
             );
-
-            if (phoneNumberExists) {
-              logLocal("handlePhoneNumberOptedOut - Phone number already in cache", { phone_number, bodyshopid });
-              return existing;
-            }
+            if (exists) return existing;
 
             const newOptOut = {
               __typename: "phone_number_opt_out",
               id: `temporary-${phone_number}-${Date.now()}`,
               bodyshopid,
               phone_number,
-              created_at: new Date().toISOString(),
-              updated_at: new Date().toISOString()
+              created_at: safeIsoNow(),
+              updated_at: safeIsoNow()
             };
 
             return [...existing, newOptOut];
@@ -455,46 +605,36 @@ export const registerMessagingHandlers = ({ socket, client }) => {
         args: { bodyshopid, search: phone_number }
       });
       client.cache.gc();
-
-      logLocal("handlePhoneNumberOptedOut - Cache updated successfully", data);
     } catch (error) {
       console.error("Error updating cache for phone number opt-out:", error);
-      logLocal("handlePhoneNumberOptedOut - Error", { error: error.message });
     }
   };
 
-  // New handler for phone number opt-in
   const handlePhoneNumberOptedIn = async (data) => {
     const { bodyshopid, phone_number } = data;
     logLocal("handlePhoneNumberOptedIn - Start", data);
 
     try {
-      // Update the Apollo cache for GET_PHONE_NUMBER_OPT_OUTS by removing the phone number
       client.cache.modify({
         id: "ROOT_QUERY",
         fields: {
           phone_number_opt_out(existing = [], { readField }) {
-            // Filter out the phone number from the opt-out list
             return existing.filter(
               (ref) => !(readField("phone_number", ref) === phone_number && readField("bodyshopid", ref) === bodyshopid)
             );
           }
         },
-        broadcast: true // Trigger UI updates
+        broadcast: true
       });
 
-      // Evict the cache entry to force a refetch on next query
       client.cache.evict({
         id: "ROOT_QUERY",
         fieldName: "phone_number_opt_out",
         args: { bodyshopid, search: phone_number }
       });
       client.cache.gc();
-
-      logLocal("handlePhoneNumberOptedIn - Cache updated successfully", data);
     } catch (error) {
       console.error("Error updating cache for phone number opt-in:", error);
-      logLocal("handlePhoneNumberOptedIn - Error", { error: error.message });
     }
   };
 

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

@@ -12,7 +12,7 @@ import _ from "lodash";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import "./chat-conversation-list.styles.scss";
 import { useQuery } from "@apollo/client";
-import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries.js";
+import { GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS } from "../../graphql/phone-number-opt-out.queries.js";
 import { phone } from "phone";
 import { useTranslation } from "react-i18next";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -29,13 +29,26 @@ const mapDispatchToProps = (dispatch) => ({
 function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
   const { t } = useTranslation();
   const [, forceUpdate] = useState(false);
-  const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
-  const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
+
+  const phoneNumbers = useMemo(() => {
+    return (conversationList || [])
+      .map((item) => {
+        try {
+          const p = phone(item.phone_num, "CA")?.phoneNumber;
+          return p ? p.replace(/^\+1/, "") : null;
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
+  }, [conversationList]);
+
+  const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS_BY_NUMBERS, {
     variables: {
-      bodyshopid: bodyshop.id,
+      bodyshopid: bodyshop?.id,
       phone_numbers: phoneNumbers
     },
-    skip: !conversationList.length,
+    skip: !bodyshop?.id || phoneNumbers.length === 0,
     fetchPolicy: "cache-and-network"
   });
 
@@ -58,15 +71,25 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
     return _.orderBy(conversationList, ["updated_at"], ["desc"]);
   }, [conversationList]);
 
-  const renderConversation = (index, t) => {
+  const renderConversation = (index) => {
     const item = sortedConversationList[index];
-    const normalizedPhone = phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
-    const hasOptOutEntry = optOutMap.has(normalizedPhone);
+
+    const normalizedPhone = (() => {
+      try {
+        return phone(item.phone_num, "CA")?.phoneNumber?.replace(/^\+1/, "") || "";
+      } catch {
+        return "";
+      }
+    })();
+
+    const hasOptOutEntry = normalizedPhone ? optOutMap.has(normalizedPhone) : false;
+
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
       item.job_conversations.length > 0
         ? item.job_conversations.map((j, idx) => <Tag key={idx}>{j.job.ro_number}</Tag>)
         : null;
+
     const names = <>{_.uniq(item.job_conversations.map((j) => OwnerNameDisplayFunction(j.job)))}</>;
     const cardTitle = (
       <>
@@ -80,9 +103,10 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         )}
       </>
     );
+
     const cardExtra = (
       <>
-        <Badge count={item.messages_aggregate.aggregate.count} />
+        <Badge count={item.messages_aggregate?.aggregate?.count || 0} />
         {hasOptOutEntry && (
           <Tooltip title={t("consent.text_body")}>
             <Tag color="red" icon={<ExclamationCircleOutlined />}>
@@ -92,6 +116,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         )}
       </>
     );
+
     const getCardStyle = () =>
       item.id === selectedConversation
         ? { backgroundColor: "var(--card-selected-bg)" }
@@ -104,24 +129,8 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
       >
         <Card style={getCardStyle()} variant={true} 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>
+          <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>
     );
@@ -131,7 +140,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
     <div className="chat-list-container">
       <Virtuoso
         data={sortedConversationList}
-        itemContent={(index) => renderConversation(index, t)}
+        itemContent={(index) => renderConversation(index)}
         style={{ height: "100%", width: "100%" }}
       />
     </div>

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

@@ -5,24 +5,24 @@ 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";
+import ChatMarkUnreadButton from "../chat-mark-unread-button/chat-mark-unread-button.component";
 
-const mapStateToProps = createStructuredSelector({});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationTitle({ conversation }) {
+export function ChatConversationTitle({ conversation, onMarkUnread, markUnreadDisabled, markUnreadLoading }) {
   return (
     <Space className="chat-title" wrap>
       <PhoneNumberFormatter>{conversation?.phone_num}</PhoneNumberFormatter>
+
       <ChatLabelComponent conversation={conversation} />
       <ChatPrintButton conversation={conversation} />
+
       <ChatConversationTitleTags jobConversations={conversation?.job_conversations || []} />
       <ChatTagRoContainer conversation={conversation || []} />
+
+      <ChatMarkUnreadButton disabled={markUnreadDisabled} loading={markUnreadLoading} onMarkUnread={onMarkUnread} />
+
       <ChatArchiveButton conversation={conversation} />
     </Space>
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationTitle);
+export default ChatConversationTitle;

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

@@ -19,7 +19,9 @@ export function ChatConversationComponent({
   conversation,
   messages,
   handleMarkConversationAsRead,
-  bodyshop
+  handleMarkLastMessageAsUnread,
+  markingAsUnreadInProgress,
+  canMarkUnread
 }) {
   const [loading, error] = subState;
 
@@ -33,7 +35,12 @@ export function ChatConversationComponent({
       onMouseDown={handleMarkConversationAsRead}
       onKeyDown={handleMarkConversationAsRead}
     >
-      <ChatConversationTitle conversation={conversation} bodyshop={bodyshop} />
+      <ChatConversationTitle
+        conversation={conversation}
+        onMarkUnread={handleMarkLastMessageAsUnread}
+        markUnreadDisabled={!canMarkUnread}
+        markUnreadLoading={markingAsUnreadInProgress}
+      />
       <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>

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

@@ -1,6 +1,6 @@
 import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import axios from "axios";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
@@ -18,8 +18,8 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const client = useApolloClient();
   const { socket } = useSocket();
   const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
+  const [markingAsUnreadInProgress, setMarkingAsUnreadInProgress] = useState(false);
 
-  // Fetch conversation details
   const {
     loading: convoLoading,
     error: convoError,
@@ -27,24 +27,23 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
   } = useQuery(GET_CONVERSATION_DETAILS, {
     variables: { conversationId: selectedConversation },
     fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only"
+    nextFetchPolicy: "network-only",
+    skip: !selectedConversation
   });
 
-  // Subscription for conversation updates
+  const conversation = convoData?.conversations_by_pk;
+
+  // Subscription for conversation updates (used when socket is NOT connected)
   useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
-    skip: socket?.connected,
+    skip: socket?.connected || !selectedConversation,
     variables: { conversationId: selectedConversation },
     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;
-      }
+      if (!messages || messages.length === 0) return;
 
       messages.forEach((message) => {
         const messageRef = client.cache.identify(message);
-        // Write the new message to the cache
+
         client.cache.writeFragment({
           id: messageRef,
           fragment: gql`
@@ -64,7 +63,6 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
           data: message
         });
 
-        // Update the conversation cache to include the new message
         client.cache.modify({
           id: client.cache.identify({ __typename: "conversations", id: selectedConversation }),
           fields: {
@@ -82,6 +80,28 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
     }
   });
 
+  /**
+   * Best-effort badge update:
+   * This assumes your list query uses messages_aggregate.aggregate.count as UNREAD inbound count.
+   * If it’s total messages, rename/create a dedicated unread aggregate in the list query and update that field instead.
+   */
+  const setConversationUnreadCountBestEffort = useCallback(
+    (conversationId, unreadCount) => {
+      if (!conversationId) return;
+
+      client.cache.modify({
+        id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+        fields: {
+          messages_aggregate(existing) {
+            if (!existing?.aggregate) return existing;
+            return { ...existing, aggregate: { ...existing.aggregate, count: unreadCount } };
+          }
+        }
+      });
+    },
+    [client.cache]
+  );
+
   const updateCacheWithReadMessages = useCallback(
     (conversationId, messageIds) => {
       if (!conversationId || !messageIds?.length) return;
@@ -89,13 +109,34 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
       messageIds.forEach((messageId) => {
         client.cache.modify({
           id: client.cache.identify({ __typename: "messages", id: messageId }),
-          fields: {
-            read: () => true
-          }
+          fields: { read: () => true }
         });
       });
+
+      setConversationUnreadCountBestEffort(conversationId, 0);
     },
-    [client.cache]
+    [client.cache, setConversationUnreadCountBestEffort]
+  );
+
+  const applyUnreadStateWithMaxOneUnread = useCallback(
+    ({ conversationId, lastUnreadMessageId, messageIdsMarkedRead = [], unreadCount = 1 }) => {
+      if (!conversationId || !lastUnreadMessageId) return;
+
+      messageIdsMarkedRead.forEach((id) => {
+        client.cache.modify({
+          id: client.cache.identify({ __typename: "messages", id }),
+          fields: { read: () => true }
+        });
+      });
+
+      client.cache.modify({
+        id: client.cache.identify({ __typename: "messages", id: lastUnreadMessageId }),
+        fields: { read: () => false }
+      });
+
+      setConversationUnreadCountBestEffort(conversationId, unreadCount);
+    },
+    [client.cache, setConversationUnreadCountBestEffort]
   );
 
   // WebSocket event handlers
@@ -103,20 +144,25 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
     if (!socket?.connected) return;
 
     const handleConversationChange = (data) => {
-      if (data.type === "conversation-marked-read") {
-        const { conversationId, messageIds } = data;
-        updateCacheWithReadMessages(conversationId, messageIds);
+      if (data?.type === "conversation-marked-read") {
+        updateCacheWithReadMessages(data.conversationId, data.messageIds);
+      }
+
+      if (data?.type === "conversation-marked-unread") {
+        applyUnreadStateWithMaxOneUnread({
+          conversationId: data.conversationId,
+          lastUnreadMessageId: data.lastUnreadMessageId,
+          messageIdsMarkedRead: data.messageIdsMarkedRead,
+          unreadCount: data.unreadCount
+        });
       }
     };
 
     socket.on("conversation-changed", handleConversationChange);
+    return () => socket.off("conversation-changed", handleConversationChange);
+  }, [socket, updateCacheWithReadMessages, applyUnreadStateWithMaxOneUnread]);
 
-    return () => {
-      socket.off("conversation-changed", handleConversationChange);
-    };
-  }, [socket, updateCacheWithReadMessages]);
-
-  // Join and leave conversation via WebSocket
+  // Join/leave conversation via WebSocket
   useEffect(() => {
     if (!socket?.connected || !selectedConversation || !bodyshop?.id) return;
 
@@ -133,15 +179,21 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
     };
   }, [socket, bodyshop, selectedConversation]);
 
-  // Mark conversation as read
-  const handleMarkConversationAsRead = async () => {
-    if (!convoData || markingAsReadInProgress) return;
+  const inboundNonSystemMessages = useMemo(() => {
+    const msgs = conversation?.messages || [];
+    return msgs
+      .filter((m) => m && !m.isoutbound && !m.is_system)
+      .slice()
+      .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+  }, [conversation?.messages]);
 
-    const conversation = convoData.conversations_by_pk;
-    if (!conversation) return;
+  const canMarkUnread = inboundNonSystemMessages.length > 0;
+
+  const handleMarkConversationAsRead = async () => {
+    if (!conversation || markingAsReadInProgress) return;
 
     const unreadMessageIds = conversation.messages
-      ?.filter((message) => !message.read && !message.isoutbound)
+      ?.filter((message) => !message.read && !message.isoutbound && !message.is_system)
       .map((message) => message.id);
 
     if (unreadMessageIds?.length > 0) {
@@ -162,12 +214,48 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
     }
   };
 
+  const handleMarkLastMessageAsUnread = async () => {
+    if (!conversation || markingAsUnreadInProgress) return;
+    if (!bodyshop?.id || !bodyshop?.imexshopid) return;
+
+    const lastInbound = inboundNonSystemMessages[inboundNonSystemMessages.length - 1];
+    if (!lastInbound?.id) return;
+
+    setMarkingAsUnreadInProgress(true);
+    try {
+      const res = await axios.post("/sms/markLastMessageUnread", {
+        conversationId: conversation.id,
+        imexshopid: bodyshop.imexshopid,
+        bodyshopid: bodyshop.id
+      });
+
+      const payload = res?.data || {};
+      if (payload.lastUnreadMessageId) {
+        applyUnreadStateWithMaxOneUnread({
+          conversationId: conversation.id,
+          lastUnreadMessageId: payload.lastUnreadMessageId,
+          messageIdsMarkedRead: payload.messageIdsMarkedRead || [],
+          unreadCount: typeof payload.unreadCount === "number" ? payload.unreadCount : 1
+        });
+      } else {
+        setConversationUnreadCountBestEffort(conversation.id, 0);
+      }
+    } catch (error) {
+      console.error("Error marking last message unread:", error.message);
+    } finally {
+      setMarkingAsUnreadInProgress(false);
+    }
+  };
+
   return (
     <ChatConversationComponent
       subState={[convoLoading, convoError]}
-      conversation={convoData?.conversations_by_pk || {}}
-      messages={convoData?.conversations_by_pk?.messages || []}
+      conversation={conversation || {}}
+      messages={conversation?.messages || []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
+      handleMarkLastMessageAsUnread={handleMarkLastMessageAsUnread}
+      markingAsUnreadInProgress={markingAsUnreadInProgress}
+      canMarkUnread={canMarkUnread}
     />
   );
 }

client/src/components/chat-mark-unread-button/chat-mark-unread-button.component.jsx

@@ -0,0 +1,24 @@
+import { Button, Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+
+export default function ChatMarkUnreadButton({ disabled, loading, onMarkUnread }) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={t("messaging.labels.mark_unread")}>
+      <Button
+        size="small"
+        className="unread-button"
+        type="primary"
+        children={t("messaging.labels.mark_unread")}
+        loading={loading}
+        disabled={disabled}
+        onMouseDown={(e) => e.stopPropagation()} // prevent parent mark-read handler
+        onClick={(e) => {
+          e.stopPropagation();
+          onMarkUnread?.();
+        }}
+      />
+    </Tooltip>
+  );
+}

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -40,7 +40,11 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
     variables: {
       jobId: conversation.job_conversations[0]?.jobid
     },
-    skip: !open || !conversation.job_conversations || conversation.job_conversations.length === 0
+    skip:
+      !open ||
+      !conversation.job_conversations ||
+      conversation.job_conversations.length === 0 ||
+      bodyshop.uselocalmediaserver
   });
 
   const handleVisibleChange = (change) => {
@@ -48,7 +52,8 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   };
 
   useEffect(() => {
-    setSelectedMedia([]);
+    // Instead of wiping the array (which holds media objects), just clear selection flags
+    setSelectedMedia((prev) => prev.map((m) => ({ ...m, isSelected: false })));
   }, [setSelectedMedia, conversation]);
 
   //Knowingly taking on the technical debt of poor implementation below. Done this way to avoid an edge case where no component may be displayed.
@@ -75,6 +80,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
             <JobDocumentsLocalGalleryExternal
               externalMediaState={[selectedMedia, setSelectedMedia]}
               jobId={conversation.job_conversations[0]?.jobid}
+              context="chat"
             />
           )}
         </>
@@ -90,6 +96,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
             <JobDocumentsLocalGalleryExternal
               externalMediaState={[selectedMedia, setSelectedMedia]}
               jobId={conversation.job_conversations[0]?.jobid}
+              context="chat"
             />
           )}
         </>
@@ -110,6 +117,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
       trigger="click"
       open={open}
       onOpenChange={handleVisibleChange}
+      destroyOnHidden
       classNames={{ root: "media-selector-popover" }}
     >
       <Badge count={selectedMedia.filter((s) => s.isSelected).length}>

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

@@ -10,6 +10,11 @@
   border-radius: 4px;
 }
 
+.unread-button {
+  height: 20px;
+  border-radius: 4px;
+}
+
 .chat-title {
   margin-bottom: 5px;
 }

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

@@ -19,30 +19,35 @@ const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
 });
 
-export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
+export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
   const { t } = useTranslation();
   const { socket } = useSocket();
   const notification = useNotification();
 
   if (!phone) return <></>;
 
-  if (!bodyshop.messagingservicesid) return <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>;
+  if (!bodyshop.messagingservicesid) {
+    return <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
+  }
 
   return (
     <a
       href="# "
       onClick={(e) => {
+        e.preventDefault();
         e.stopPropagation();
+
+        if (searchingForConversation) return; // Prevent finding the same thing twice.
+
         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, socket });
+          openChatByPhone({ phone_num: p.formatInternational(), jobid, socket });
         } else {
           notification["error"]({ message: t("messaging.error.invalidphone") });
         }
       }}
     >
-      <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>
+      <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>
     </a>
   );
 }

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -133,6 +133,9 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
       ownr_ln: contract.job.owner.ownr_ln,
       ownr_co_nm: contract.job.owner.ownr_co_nm,
       ownr_ph1: contract.job.owner.ownr_ph1,
+      ownr_ph2: contract.job.owner.ownr_ph2,
+      ownr_ph1_ty: contract.job.owner.ownr_ph1_ty,
+      ownr_ph2_ty: contract.job.owner.ownr_ph2_ty,
       ownr_ea: contract.job.owner.ownr_ea,
       v_model_desc: contract.job.vehicle && contract.job.vehicle.v_model_desc,
       v_model_yr: contract.job.vehicle && contract.job.vehicle.v_model_yr,
@@ -253,6 +256,10 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
       }
     };
 
+    if (currentUser?.email) {
+      newJob.created_user_email = currentUser.email;
+    }
+
     //Calcualte the new job totals.
 
     const newTotals = (

client/src/components/contracts-find-modal/contracts-find-modal.container.jsx

@@ -34,7 +34,6 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
     logImEXEvent("contract_finder_search");
 
     //Execute contract find
-
     callSearch({
       variables: {
         plate: (values.plate && values.plate !== "" && values.plate) || undefined,

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

@@ -142,17 +142,37 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
             title={t("job_lifecycle.content.legend_title")}
             style={{ marginTop: "10px" }}
           >
-            <div>
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 8
+              }}
+            >
               {lifecycleData.summations.map((key) => (
-                <Tag key={key.status} color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
+                <Tag
+                  key={key.status}
+                  color={key.color}
+                  style={{
+                    // IMPORTANT: let the tag grow with its content
+                    width: "auto",
+                    padding: 0,
+                    margin: 0,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxSizing: "border-box"
+                  }}
+                >
                   <div
                     aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                     title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                     style={{
                       backgroundColor: "var(--tag-wrapper-bg)",
                       color: "var(--tag-wrapper-text)",
-                      padding: "4px",
-                      textAlign: "center"
+                      padding: "4px 8px",
+                      textAlign: "center",
+                      whiteSpace: "nowrap" // keep it on one line while letting the pill expand
                     }}
                   >
                     {key.status} [{lifecycleData.statusCounts[key.status]}] ({key.roundedPercentage})

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

@@ -256,9 +256,9 @@ export default function DashboardScheduledDeliveryToday({ data, ...cardProps })
       responsive: ["md"],
       render: (text, record) => (
         <Space size="small" wrap>
-          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+          <ChatOpenButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.jobid} />
 
-          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+          <ChatOpenButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.jobid} />
         </Space>
       )
     },
@@ -397,6 +397,8 @@ export const DashboardScheduledDeliveryTodayGql = `
       ownr_ln
       ownr_ph1
       ownr_ph2
+      ownr_ph1_ty
+      ownr_ph2_ty
       production_vars
       ro_number
       scheduled_delivery

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

@@ -48,6 +48,8 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         ownr_ln: item.job.ownr_ln,
         ownr_ph1: item.job.ownr_ph1,
         ownr_ph2: item.job.ownr_ph2,
+        ownr_ph1_ty: item.job.ownr_ph1_ty,
+        ownr_ph2_ty: item.job.ownr_ph2_ty,
         production_vars: item.job.production_vars,
         ro_number: item.job.ro_number,
         suspended: item.job.suspended,
@@ -264,8 +266,8 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       responsive: ["md"],
       render: (text, record) => (
         <Space size="small" wrap>
-          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
-          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+          <ChatOpenButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.jobid} />
+          <ChatOpenButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.jobid} />
         </Space>
       )
     },
@@ -400,6 +402,8 @@ export const DashboardScheduledInTodayGql = `
       ownr_ln
       ownr_ph1
       ownr_ph2
+      ownr_ph1_ty
+      ownr_ph2_ty
       production_vars
       ro_number
       suspended

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

@@ -256,9 +256,9 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       responsive: ["md"],
       render: (text, record) => (
         <Space size="small" wrap>
-          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+          <ChatOpenButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.jobid} />
 
-          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+          <ChatOpenButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.jobid} />
         </Space>
       )
     },
@@ -397,6 +397,8 @@ export const DashboardScheduledOutTodayGql = `
       ownr_ln
       ownr_ph1
       ownr_ph2
+      ownr_ph1_ty
+      ownr_ph2_ty
       production_vars
       ro_number
       scheduled_completion

client/src/components/dashboard-grid/createDashboardQuery.js

@@ -2,11 +2,13 @@ import { gql } from "@apollo/client";
 import dayjs from "../../utils/day.js";
 import componentList from "./componentList.js";
 
-const createDashboardQuery = (state) => {
+const createDashboardQuery = (items) => {
   const componentBasedAdditions =
-    state &&
-    Array.isArray(state.layout) &&
-    state.layout.map((item) => componentList[item.i].gqlFragment || "").join("");
+    Array.isArray(items) &&
+    items
+      .map((item) => (componentList[item.i] && componentList[item.i].gqlFragment) || "")
+      .filter(Boolean)
+      .join("");
   return gql`
     query QUERY_DASHBOARD_DETAILS { ${componentBasedAdditions || ""}
       monthly_sales: jobs(where: {_and: [

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,17 +1,17 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
-import { cloneDeep, isEmpty } from "lodash";
 import { useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { UPDATE_DASHBOARD_LAYOUT, QUERY_USER_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
+import { QUERY_DASHBOARD_BODYSHOP } from "../../graphql/bodyshop.queries";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import { GenerateDashboardData } from "./dashboard-grid.utils";
@@ -24,93 +24,173 @@ import "./dashboard-grid.styles.scss";
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop
+  currentUser: selectCurrentUser
 });
 
 const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function DashboardGridComponent({ currentUser, bodyshop }) {
+export function DashboardGridComponent({ currentUser }) {
   const { t } = useTranslation();
-  const [state, setState] = useState({
-    ...(bodyshop.associations[0].user.dashboardlayout
-      ? bodyshop.associations[0].user.dashboardlayout
-      : { items: [], layout: {}, layouts: [] })
-  });
   const notification = useNotification();
 
-  const { loading, error, data, refetch } = useQuery(createDashboardQuery(state), {
+  // Constants for layout defaults
+  const DEFAULT_COLS = 12;
+  const DEFAULT_Y_POSITION = 1000;
+  const GRID_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
+  const GRID_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 };
+
+  // Fetch dashboard layout data
+  const { data: layoutData } = useQuery(QUERY_USER_DASHBOARD_LAYOUT, {
+    variables: { email: currentUser.email },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    skip: !currentUser?.email
+  });
+
+  // Fetch minimal bodyshop data for components
+  const {
+    loading,
+    error,
+    data: bodyshopData
+  } = useQuery(QUERY_DASHBOARD_BODYSHOP, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
 
   const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
 
-  const handleLayoutChange = async (layout, layouts) => {
-    logImEXEvent("dashboard_change_layout");
+  // Memoize layout state initialization
+  const initialState = useMemo(() => {
+    const persisted = layoutData?.users?.[0]?.dashboardlayout;
+    if (persisted) {
+      const { items = [], layout = [], layouts = {}, cols = DEFAULT_COLS } = persisted;
+      return {
+        items: Array.isArray(items) ? items : [],
+        layout: Array.isArray(layout) ? layout : [],
+        layouts: typeof layouts === "object" && !Array.isArray(layouts) ? layouts : {},
+        cols
+      };
+    }
+    return { items: [], layout: [], layouts: {}, cols: DEFAULT_COLS };
+  }, [layoutData]);
 
-    setState({ ...state, layout, layouts });
+  const [state, setState] = useState(initialState);
 
-    const result = await updateLayout({
-      variables: {
-        email: currentUser.email,
-        layout: { ...state, layout, layouts }
+  // Update state when layout data changes
+  useEffect(() => {
+    if (layoutData?.users?.[0]?.dashboardlayout) {
+      const { items = [], layout = [], layouts = {}, cols = DEFAULT_COLS } = layoutData.users[0].dashboardlayout;
+      setState({
+        items: Array.isArray(items) ? items : [],
+        layout: Array.isArray(layout) ? layout : [],
+        layouts: typeof layouts === "object" && !Array.isArray(layouts) ? layouts : {},
+        cols
+      });
+    }
+  }, [layoutData]);
+
+  // Get bodyshop data for components
+  const bodyshop = bodyshopData?.dashboard_bodyshops?.[0];
+
+  // DRY helper function to update layout in database and cache
+  const updateLayoutAndCache = async (updatedLayout, errorContext = "updating layout") => {
+    try {
+      const { data: result } = await updateLayout({
+        variables: { email: currentUser.email, layout: updatedLayout }
+      });
+
+      const { errors = [] } = result?.update_users?.returning?.[0] || {};
+
+      if (errors.length) {
+        const errorMessages = errors.map(({ message }) => message || String(error));
+        notification.error({
+          message: t("dashboard.errors.updatinglayout", {
+            message: errorMessages.join("; ")
+          })
+        });
+        return false;
       }
-    });
 
-    if (!isEmpty(result?.errors)) {
+      return true;
+    } catch (err) {
+      console.error(`Dashboard ${errorContext} failed`, err);
       notification.error({
         message: t("dashboard.errors.updatinglayout", {
-          message: JSON.stringify(result.errors)
+          message: err?.message || String(err)
         })
       });
+      return false;
     }
   };
 
-  const handleRemoveComponent = (key) => {
+  // Memoize the query document so Apollo doesn't treat each render as a brand-new query causing continuous re-fetches
+  const dashboardQueryDoc = useMemo(() => createDashboardQuery(state.items), [state.items]);
+
+  const {
+    loading: dashboardLoading,
+    error: dashboardError,
+    data: dashboardQueryData,
+    refetch
+  } = useQuery(dashboardQueryDoc, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
+  });
+
+  const dashboardData = useMemo(() => GenerateDashboardData(dashboardQueryData), [dashboardQueryData]);
+
+  // Memoize existing layout keys to prevent unnecessary recalculations
+  const existingLayoutKeys = useMemo(() => state.items.map(({ i }) => i), [state.items]);
+
+  // Memoize menu items to prevent unnecessary recalculations
+  const menuItems = useMemo(
+    () =>
+      Object.entries(componentList).map(([key, { label }]) => ({
+        key,
+        label,
+        value: key,
+        disabled: existingLayoutKeys.includes(key)
+      })),
+    [existingLayoutKeys]
+  );
+
+  if (loading || dashboardLoading) return <LoadingSkeleton message={t("general.labels.loading")} />;
+  if (error || dashboardError) return <AlertComponent message={(error || dashboardError).message} type="error" />;
+
+  const handleLayoutChange = async (layout, layouts) => {
+    logImEXEvent("dashboard_change_layout");
+    setState((prev) => ({ ...prev, layout, layouts }));
+    await updateLayoutAndCache({ ...state, layout, layouts }, "layout change");
+  };
+
+  const handleRemoveComponent = async (key) => {
     logImEXEvent("dashboard_remove_component", { name: key });
-    const idxToRemove = state.items.findIndex((i) => i.i === key);
-
-    const items = cloneDeep(state.items);
-
-    items.splice(idxToRemove, 1);
-    setState({ ...state, items });
+    const updatedState = { ...state, items: state.items.filter((item) => item.i !== key) };
+    setState(updatedState);
+    await updateLayoutAndCache(updatedState, "component removal");
   };
 
-  const handleAddComponent = (e) => {
-    logImEXEvent("dashboard_add_component", { name: e.key });
-    setState({
-      ...state,
-      items: [
-        ...state.items,
-        {
-          i: e.key,
-          x: (state.items.length * 2) % (state.cols || 12),
-          y: 99, // puts it at the bottom
-          w: componentList[e.key].w || 2,
-          h: componentList[e.key].h || 2
-        }
-      ]
-    });
+  const handleAddComponent = async ({ key }) => {
+    logImEXEvent("dashboard_add_component", { key });
+    const { minW = 1, minH = 1, w: baseW = 2, h: baseH = 2 } = componentList[key] || {};
+    const nextItems = [
+      ...state.items,
+      {
+        i: key,
+        x: (state.items.length * 2) % (state.cols || DEFAULT_COLS),
+        y: DEFAULT_Y_POSITION,
+        w: Math.max(baseW, minW),
+        h: Math.max(baseH, minH)
+      }
+    ];
+    const updatedState = { ...state, items: nextItems };
+    setState(updatedState);
+    await updateLayoutAndCache(updatedState, "component addition");
   };
 
-  const dashboardData = useMemo(() => GenerateDashboardData(data), [data]);
-
-  const existingLayoutKeys = state.items.map((i) => i.i);
-
-  const menuItems = Object.keys(componentList).map((key) => ({
-    key: key,
-    label: componentList[key].label,
-    value: key,
-    disabled: existingLayoutKeys.includes(key)
-  }));
-
   const menu = { items: menuItems, onClick: handleAddComponent };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
-
   return (
     <div>
       <PageHeader
@@ -128,27 +208,32 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
 
       <ResponsiveReactGridLayout
         className="layout"
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
+        breakpoints={GRID_BREAKPOINTS}
+        cols={GRID_COLS}
         layouts={state.layouts}
         onLayoutChange={handleLayoutChange}
       >
         {state.items.map((item) => {
-          const TheComponent = componentList[item.i].component;
+          const { component: TheComponent, minW = 1, minH = 1, w: specW, h: specH } = componentList[item.i] || {};
+          const safeItem = {
+            ...item,
+            w: Math.max(item.w || specW || minW, minW),
+            h: Math.max(item.h || specH || minH, minH)
+          };
+
           return (
             <div
-              key={item.i}
+              key={safeItem.i}
               data-grid={{
-                ...item,
-                minH: componentList[item.i].minH || 1,
-                minW: componentList[item.i].minW || 1
+                ...safeItem,
+                minH,
+                minW
               }}
             >
               <LoadingSkeleton loading={loading}>
                 <Icon
                   component={MdClose}
-                  key={item.i}
+                  key={safeItem.i}
                   style={{
                     position: "absolute",
                     zIndex: "2",
@@ -156,9 +241,9 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
                     top: ".25rem",
                     cursor: "pointer"
                   }}
-                  onClick={() => handleRemoveComponent(item.i)}
+                  onClick={() => handleRemoveComponent(safeItem.i)}
                 />
-                <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboardData} />
+                {TheComponent && <TheComponent className="dashboard-card" bodyshop={bodyshop} data={dashboardData} />}
               </LoadingSkeleton>
             </div>
           );

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

@@ -92,6 +92,7 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
         rowKey="center"
         dataSource={allocationsSummary}
         locale={{ emptyText: t("dms.labels.refreshallocations") }}
+        scroll={{ x: true }}
         summary={() => {
           const totals =
             allocationsSummary &&

client/src/components/document-editor/document-editor-local.component.jsx

@@ -0,0 +1,166 @@
+import axios from "axios";
+import { Result } from "antd";
+import * as markerjs2 from "markerjs2";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { handleUpload } from "../documents-local-upload/documents-local-upload.utility";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = () => ({});
+
+export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
+  const imgRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [uploaded, setuploaded] = useState(false);
+  const [loadedImageUrl, setLoadedImageUrl] = useState(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
+  const markerArea = useRef(null);
+  const { t } = useTranslation();
+  const notification = useNotification();
+  const [uploading, setUploading] = useState(false);
+
+  const triggerUpload = useCallback(
+    async (dataUrl) => {
+      if (uploading) return;
+      setUploading(true);
+      const blob = await b64toBlob(dataUrl);
+      const nameWithoutExt = filename.split(".").slice(0, -1).join(".").trim();
+      const parts = nameWithoutExt.split("-");
+      const baseParts = [];
+      for (let i = 0; i < parts.length; i++) {
+        if (/^\d+$/.test(parts[i])) {
+          break;
+        }
+        baseParts.push(parts[i]);
+      }
+      const adjustedBase = baseParts.length > 0 ? baseParts.join("-") : "edited";
+      const adjustedFilename = `${adjustedBase}.jpg`;
+      const file = new File([blob], adjustedFilename, { type: "image/jpeg" });
+
+      handleUpload({
+        ev: {
+          file: file,
+          filename: adjustedFilename,
+          onSuccess: () => {
+            setUploading(false);
+            setLoading(false);
+            setuploaded(true);
+          },
+          onError: () => {
+            setUploading(false);
+            setLoading(false);
+          }
+        },
+        context: {
+          jobid: jobid,
+          callback: () => {} // Optional callback
+        },
+        notification
+      });
+    },
+    [filename, jobid, notification, uploading]
+  );
+
+  useEffect(() => {
+    if (imgRef.current !== null && imageLoaded && !markerArea.current) {
+      // create a marker.js MarkerArea
+      markerArea.current = new markerjs2.MarkerArea(imgRef.current);
+
+      // attach an event handler to assign annotated image back to our image element
+      markerArea.current.addEventListener("close", () => {
+        // NO OP
+      });
+
+      markerArea.current.addEventListener("render", (event) => {
+        const dataUrl = event.dataUrl;
+        imgRef.current.src = dataUrl;
+        markerArea.current.close();
+        triggerUpload(dataUrl);
+      });
+      // launch marker.js
+
+      markerArea.current.renderAtNaturalSize = true;
+      markerArea.current.renderImageType = "image/jpeg";
+      markerArea.current.renderImageQuality = 1;
+      //markerArea.current.settings.displayMode = "inline";
+      markerArea.current.show();
+    }
+  }, [triggerUpload, imageLoaded]);
+
+  useEffect(() => {
+    if (!imageUrl) return;
+    const controller = new AbortController();
+
+    const loadImage = async () => {
+      setImageLoaded(false);
+      setImageLoading(true);
+      try {
+        const response = await axios.get(imageUrl, { responseType: "blob", signal: controller.signal });
+        const blobUrl = URL.createObjectURL(response.data);
+        setLoadedImageUrl((prevUrl) => {
+          if (prevUrl) URL.revokeObjectURL(prevUrl);
+          return blobUrl;
+        });
+      } catch (error) {
+        if (axios.isCancel?.(error) || error.name === "CanceledError") {
+          // request was aborted — safe to ignore
+          return;
+        }
+        console.error("Failed to fetch image blob", error);
+      } finally {
+        if (!controller.signal.aborted) {
+          setImageLoading(false);
+        }
+      }
+    };
+    loadImage();
+    return () => {
+      controller.abort();
+    };
+  }, [imageUrl]);
+
+  useEffect(() => {
+    return () => {
+      if (loadedImageUrl) {
+        URL.revokeObjectURL(loadedImageUrl);
+      }
+    };
+  }, [loadedImageUrl]);
+
+  async function b64toBlob(url) {
+    const res = await fetch(url);
+    return await res.blob();
+  }
+
+  return (
+    <div>
+      {!loading && !uploaded && loadedImageUrl && (
+        <img
+          ref={imgRef}
+          src={loadedImageUrl}
+          alt="sample"
+          onLoad={() => setImageLoaded(true)}
+          onError={(error) => {
+            console.error("Failed to load image", error);
+          }}
+          style={{ maxWidth: "90vw", maxHeight: "90vh" }}
+        />
+      )}
+      {(loading || imageLoading || !imageLoaded) && !uploaded && (
+        <LoadingSpinner message={t("documents.labels.uploading")} />
+      )}
+      {uploaded && <Result status="success" title={t("documents.successes.edituploaded")} />}
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DocumentEditorLocalComponent);

client/src/components/document-editor/document-editor.component.jsx

@@ -1,4 +1,5 @@
 //import "tui-image-editor/dist/tui-image-editor.css";
+import axios from "axios";
 import { Result } from "antd";
 import * as markerjs2 from "markerjs2";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -6,8 +7,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";
+import { handleUpload } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
@@ -23,6 +23,9 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   const imgRef = useRef(null);
   const [loading, setLoading] = useState(false);
   const [uploaded, setuploaded] = useState(false);
+  const [imageUrl, setImageUrl] = useState(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageLoading, setImageLoading] = useState(true);
   const markerArea = useRef(null);
   const { t } = useTranslation();
   const notification = useNotification();
@@ -55,7 +58,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   );
 
   useEffect(() => {
-    if (imgRef.current !== null) {
+    if (imgRef.current !== null && imageLoaded && !markerArea.current) {
       // create a marker.js MarkerArea
       markerArea.current = new markerjs2.MarkerArea(imgRef.current);
 
@@ -78,7 +81,52 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       //markerArea.current.settings.displayMode = "inline";
       markerArea.current.show();
     }
-  }, [triggerUpload]);
+  }, [triggerUpload, imageLoaded]);
+
+  useEffect(() => {
+    if (!document?.id) return;
+    const controller = new AbortController();
+
+    const loadImage = async () => {
+      setImageLoaded(false);
+      setImageLoading(true);
+      try {
+        const response = await axios.post(
+          "/media/imgproxy/original",
+          { documentId: document.id },
+          {
+            responseType: "blob",
+            signal: controller.signal
+          }
+        );
+        const blobUrl = URL.createObjectURL(response.data);
+        setImageUrl((prevUrl) => {
+          if (prevUrl) URL.revokeObjectURL(prevUrl);
+          return blobUrl;
+        });
+      } catch (error) {
+        if (axios.isCancel?.(error) || error.name === "CanceledError") {
+          // request was aborted — safe to ignore
+          return;
+        }
+        console.error("Failed to fetch original image blob", error);
+      } finally {
+        setImageLoading(false);
+      }
+    };
+    loadImage();
+    return () => {
+      controller.abort();
+    };
+  }, [document]);
+
+  useEffect(() => {
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
 
   async function b64toBlob(url) {
     const res = await fetch(url);
@@ -87,16 +135,21 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
 
   return (
     <div>
-      {!loading && !uploaded && (
+      {!loading && !uploaded && imageUrl && (
         <img
           ref={imgRef}
-          src={GenerateSrcUrl(document)}
+          src={imageUrl}
           alt="sample"
-          crossOrigin="anonymous"
+          onLoad={() => setImageLoaded(true)}
+          onError={(error) => {
+            console.error("Failed to load original image", error);
+          }}
           style={{ maxWidth: "90vw", maxHeight: "90vh" }}
         />
       )}
-      {loading && <LoadingSpinner message={t("documents.labels.uploading")} />}
+      {(loading || imageLoading || !imageLoaded) && !uploaded && (
+        <LoadingSpinner message={t("documents.labels.uploading")} />
+      )}
       {uploaded && <Result status="success" title={t("documents.successes.edituploaded")} />}
     </div>
   );

client/src/components/document-editor/document-editor.container.jsx

@@ -11,6 +11,7 @@ import { setBodyshop } from "../../redux/user/user.actions";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import DocumentEditor from "./document-editor.component";
+import { DocumentEditorLocalComponent } from "./document-editor-local.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBodyshop: (bs) => dispatch(setBodyshop(bs))
@@ -21,7 +22,7 @@ export default connect(null, mapDispatchToProps)(DocumentEditorContainer);
 export function DocumentEditorContainer({ setBodyshop }) {
   //Get the image details for the image to be saved.
   //Get the document id from the search string.
-  const { documentId } = queryString.parse(useLocation().search);
+  const { documentId, imageUrl, filename, jobid } = queryString.parse(useLocation().search);
   const { t } = useTranslation();
   const {
     loading: loadingShop,
@@ -32,24 +33,45 @@ export function DocumentEditorContainer({ setBodyshop }) {
     nextFetchPolicy: "network-only"
   });
 
-  useEffect(() => {
-    if (dataShop) setBodyshop(dataShop.bodyshops[0]);
-  }, [dataShop, setBodyshop]);
+  const isLocalMedia = !!dataShop?.bodyshops?.[0]?.uselocalmediaserver;
 
-  const { loading, error, data } = useQuery(GET_DOCUMENT_BY_PK, {
+  const {
+    loading: loadingDoc,
+    error: errorDoc,
+    data: dataDoc
+  } = useQuery(GET_DOCUMENT_BY_PK, {
     variables: { documentId },
-    skip: !documentId,
+    skip: !documentId || isLocalMedia,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
 
-  if (loading || loadingShop) return <LoadingSpinner />;
-  if (error || errorShop) return <AlertComponent message={error.message || errorShop.message} type="error" />;
+  useEffect(() => {
+    if (dataShop) setBodyshop(dataShop.bodyshops[0]);
+  }, [dataShop, setBodyshop]);
 
-  if (!data || !data.documents_by_pk) return <Result status="404" title={t("general.errors.notfound")} />;
+  if (loadingShop) return <LoadingSpinner />;
+  if (errorShop) return <AlertComponent message={errorShop.message} type="error" />;
+
+  if (isLocalMedia) {
+    if (imageUrl && filename && jobid) {
+      return (
+        <div>
+          <DocumentEditorLocalComponent imageUrl={imageUrl} filename={filename} jobid={jobid} />
+        </div>
+      );
+    } else {
+      return <Result status="404" title={t("general.errors.notfound")} />;
+    }
+  }
+
+  if (loadingDoc) return <LoadingSpinner />;
+  if (errorDoc) return <AlertComponent message={errorDoc.message} type="error" />;
+
+  if (!dataDoc || !dataDoc.documents_by_pk) return <Result status="404" title={t("general.errors.notfound")} />;
   return (
     <div>
-      <DocumentEditor document={data ? data.documents_by_pk : null} />
+      <DocumentEditor document={dataDoc ? dataDoc.documents_by_pk : null} />
     </div>
   );
 }

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

@@ -67,6 +67,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
             <JobsDocumentsLocalGalleryExternalComponent
               externalMediaState={[selectedMedia, setSelectedMedia]}
               jobId={emailConfig.jobid}
+              context="email"
             />
           )}
         </>
@@ -82,6 +83,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
             <JobsDocumentsLocalGalleryExternalComponent
               externalMediaState={[selectedMedia, setSelectedMedia]}
               jobId={emailConfig.jobid}
+              context="email"
             />
           )}
         </>

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

@@ -55,7 +55,8 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
     const useremail = currentUser.email;
 
     try {
-      const { ...otherFormValues } = formValues;
+      // eslint-disable-next-line no-unused-vars
+      const { accepted_terms, ...otherFormValues } = formValues;
 
       // Trim the values of the fields before submitting
       const trimmedFormValues = Object.entries(otherFormValues).reduce((acc, [key, value]) => {

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

@@ -7,6 +7,7 @@ import { Link, useNavigate } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function GlobalSearchOs() {
   const { t } = useTranslation();
@@ -19,6 +20,8 @@ export default function GlobalSearchOs() {
     if (v && v && v !== "" && v.length >= 3) {
       try {
         setLoading(true);
+        logImEXEvent("global_search", { search: v });
+
         const searchData = await axios.post("/search", {
           search: v
         });
@@ -70,8 +73,8 @@ export default function GlobalSearchOs() {
                       <span>
                         <OwnerNameDisplay ownerObject={owner} />
                       </span>
-                      <PhoneNumberFormatter>{owner.ownr_ph1}</PhoneNumberFormatter>
-                      <PhoneNumberFormatter>{owner.ownr_ph2}</PhoneNumberFormatter>
+                      <PhoneNumberFormatter type={owner?.ownr_ph1_ty}>{owner.ownr_ph1}</PhoneNumberFormatter>
+                      <PhoneNumberFormatter type={owner?.ownr_ph2_ty}>{owner.ownr_ph2}</PhoneNumberFormatter>
                     </Space>
                   </Link>
                 )

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

@@ -63,8 +63,8 @@ export default function GlobalSearch() {
                     <span>
                       <OwnerNameDisplay ownerObject={owner} />
                     </span>
-                    <PhoneNumberFormatter>{owner.ownr_ph1}</PhoneNumberFormatter>
-                    <PhoneNumberFormatter>{owner.ownr_ph2}</PhoneNumberFormatter>
+                    <PhoneNumberFormatter type={owner.ownr_ph1_ty}>{owner.ownr_ph1}</PhoneNumberFormatter>
+                    <PhoneNumberFormatter type={owner.ownr_ph2_ty}>{owner.ownr_ph2}</PhoneNumberFormatter>
                   </Space>
                 </Link>
               )

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

@@ -220,10 +220,10 @@ export function ScheduleEventComponent({
           </DataLabel>
           <DataLabel label={t("jobs.fields.ownr_ea")}>{(event.job && event.job.ownr_ea) || ""}</DataLabel>
           <DataLabel label={t("jobs.fields.ownr_ph1")}>
-            <ChatOpenButton phone={event.job && event.job.ownr_ph1} jobid={event.job.id} />
+            <ChatOpenButton phone={event?.job?.ownr_ph1} type={event?.job?.ownr_ph1_ty} jobid={event.job.id} />
           </DataLabel>
           <DataLabel label={t("jobs.fields.ownr_ph2")}>
-            <ChatOpenButton phone={event.job && event.job.ownr_ph2} jobid={event.job.id} />
+            <ChatOpenButton phone={event?.job?.ownr_ph2} type={event?.job?.ownr_ph2_ty} jobid={event.job.id} />
           </DataLabel>
           <DataLabel hideIfNull label={t("jobs.fields.loss_of_use")}>
             {(event.job && event.job.loss_of_use) || ""}

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -4,6 +4,7 @@ import { Button, Card, Col, Row, Table, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -125,6 +126,7 @@ export function JobAuditTrail({ bodyshop, jobId }) {
       render: (text, record) => (
         <Button
           onClick={() => {
+            logImEXEvent("jobs_audit_view_email", {});
             var win = window.open(
               "",
               "Title",

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -43,16 +43,18 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines, tec
   const handleCreateIou = async () => {
     setLoading(true);
     //Query all of the job details to recreate.
-    const iouId = await CreateIouForJob(
-      client,
-      job.id,
-      {
+    const iouId = await CreateIouForJob({
+      apolloClient: client,
+      jobLinesToKeep: selectedJobLines,
+      jobId: job.id,
+      config: {
         status: bodyshop.md_ro_statuses.default_open,
         bodyshopid: bodyshop.id,
         useremail: currentUser.email
       },
-      selectedJobLines
-    );
+      currentUser
+    });
+
     notification.open({
       type: "success",
       message: t("jobs.successes.ioucreated"),

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

@@ -90,7 +90,7 @@ export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Status*",
+                text: s || t("dashboard.errors.status"),
                 value: [s]
               };
             })) ||
@@ -103,7 +103,7 @@ export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
     <div>
       <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
         <PartsStatusPie joblines_status={joblines_status} />
-        <Table key="id" columns={columns} dataSource={filteredJobLines ? filteredJobLines : []} />
+        <Table key="id" columns={columns} dataSource={filteredJobLines || []} />
       </CardTemplate>
     </div>
   );

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

@@ -9,10 +9,10 @@ import {
   WarningFilled
 } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMutation } from "@apollo/client";
-import { Button, Dropdown, Input, Space, Table, Tag } from "antd";
+import { gql, useMutation } from "@apollo/client";
+import { Button, Dropdown, Input, Modal, Select, Space, Table, Tag, Typography } from "antd";
 import axios from "axios";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -46,6 +46,20 @@ import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.con
 import JobLinesExpander from "./job-lines-expander.component";
 import JobLinesPartPriceChange from "./job-lines-part-price-change.component";
 import JobLinesExpanderSimple from "./jobs-lines-expander-simple.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+
+const UPDATE_JOB_LINES_LOCATION_BULK = gql`
+  mutation UPDATE_JOB_LINES_LOCATION_BULK($ids: [uuid!]!, $location: String!) {
+    update_joblines(where: { id: { _in: $ids } }, _set: { location: $location }) {
+      affected_rows
+      returning {
+        id
+        location
+      }
+    }
+  }
+`;
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -82,6 +96,9 @@ export function JobLinesComponent({
   isPartsEntry
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
+  const [bulkUpdateLocations] = useMutation(UPDATE_JOB_LINES_LOCATION_BULK);
+  const notification = useNotification();
+
   const {
     treatments: { Enhanced_Payroll }
   } = useSplitTreatments({
@@ -96,15 +113,89 @@ export function JobLinesComponent({
     filteredInfo: {
       ...(isPartsEntry
         ? {
-            part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG", "PAO"]
+            part_type: ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"] //"PAO" Removed by request
           }
         : {})
     }
   });
 
+  // Bulk location modal state
+  const [bulkLocationOpen, setBulkLocationOpen] = useState(false);
+  const [bulkLocation, setBulkLocation] = useState(null);
+  const [bulkLocationSaving, setBulkLocationSaving] = useState(false);
+
   const { t } = useTranslation();
   const jobIsPrivate = bodyshop.md_ins_cos.find((c) => c.name === job.ins_co_nm)?.private;
 
+  const selectedLineIds = useMemo(() => selectedLines.map((l) => l?.id).filter(Boolean), [selectedLines]);
+
+  const commonSelectedLocation = useMemo(() => {
+    const locs = selectedLines
+      .map((l) => (typeof l?.location === "string" ? l.location : ""))
+      .map((x) => x.trim())
+      .filter(Boolean);
+
+    if (locs.length === 0) return null;
+
+    const uniq = _.uniq(locs);
+    return uniq.length === 1 ? uniq[0] : null;
+  }, [selectedLines]);
+
+  const openBulkLocationModal = () => {
+    setBulkLocation(commonSelectedLocation);
+    setBulkLocationOpen(true);
+    logImEXEvent("joblines_bulk_location_open", { count: selectedLineIds.length });
+  };
+
+  const closeBulkLocationModal = () => {
+    setBulkLocationOpen(false);
+    setBulkLocation(null);
+  };
+
+  const saveBulkLocation = async () => {
+    if (selectedLineIds.length === 0) return;
+
+    setBulkLocationSaving(true);
+
+    try {
+      const locationToSave = (bulkLocation ?? "").toString();
+
+      const result = await bulkUpdateLocations({
+        variables: {
+          ids: selectedLineIds,
+          location: locationToSave
+        }
+      });
+
+      if (!result?.errors) {
+        // Keep UI selection consistent without waiting for refetch
+        setSelectedLines((prev) =>
+          prev.map((l) => (l && selectedLineIds.includes(l.id) ? { ...l, location: locationToSave } : l))
+        );
+
+        notification["success"]({ message: t("joblines.successes.saved") });
+
+        logImEXEvent("joblines_bulk_location_saved", {
+          count: selectedLineIds.length,
+          location: locationToSave
+        });
+
+        closeBulkLocationModal();
+        if (refetch) refetch();
+      } else {
+        notification["error"]({
+          message: t("joblines.errors.saving", { error: JSON.stringify(result.errors) })
+        });
+      }
+    } catch (error) {
+      notification["error"]({
+        message: t("joblines.errors.saving", { error: error?.message || String(error) })
+      });
+    } finally {
+      setBulkLocationSaving(false);
+    }
+  };
+
   const columns = [
     {
       title: "#",
@@ -170,46 +261,16 @@ export function JobLinesComponent({
             ? ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG", "PAO"]
             : ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"]
         },
-        {
-          text: t("joblines.fields.part_types.PAN"),
-          value: ["PAN"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAP"),
-          value: ["PAP"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAL"),
-          value: ["PAL"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAA"),
-          value: ["PAA"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAG"),
-          value: ["PAG"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAS"),
-          value: ["PAS"]
-        },
-        {
-          text: t("joblines.fields.part_types.PASL"),
-          value: ["PASL"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAC"),
-          value: ["PAC"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAR"),
-          value: ["PAR"]
-        },
-        {
-          text: t("joblines.fields.part_types.PAM"),
-          value: ["PAM"]
-        },
+        { text: t("joblines.fields.part_types.PAN"), value: ["PAN"] },
+        { text: t("joblines.fields.part_types.PAP"), value: ["PAP"] },
+        { text: t("joblines.fields.part_types.PAL"), value: ["PAL"] },
+        { text: t("joblines.fields.part_types.PAA"), value: ["PAA"] },
+        { text: t("joblines.fields.part_types.PAG"), value: ["PAG"] },
+        { text: t("joblines.fields.part_types.PAS"), value: ["PAS"] },
+        { text: t("joblines.fields.part_types.PASL"), value: ["PASL"] },
+        { text: t("joblines.fields.part_types.PAC"), value: ["PAC"] },
+        { text: t("joblines.fields.part_types.PAR"), value: ["PAR"] },
+        { text: t("joblines.fields.part_types.PAM"), value: ["PAM"] },
         ...(isPartsEntry
           ? [
               {
@@ -219,7 +280,6 @@ export function JobLinesComponent({
             ]
           : [])
       ],
-
       onFilter: (value, record) => value.includes(record.part_type),
       render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
     },
@@ -245,7 +305,6 @@ export function JobLinesComponent({
             title: t("joblines.fields.mod_lbr_ty"),
             dataIndex: "mod_lbr_ty",
             key: "mod_lbr_ty",
-
             sorter: (a, b) => alphaSort(a.mod_lbr_ty, b.mod_lbr_ty),
             sortOrder: state.sortedInfo.columnKey === "mod_lbr_ty" && state.sortedInfo.order,
             render: (text, record) => (record.mod_lbr_ty ? t(`joblines.fields.lbr_types.${record.mod_lbr_ty}`) : null)
@@ -254,7 +313,6 @@ export function JobLinesComponent({
             title: t("joblines.fields.mod_lb_hrs"),
             dataIndex: "mod_lb_hrs",
             key: "mod_lb_hrs",
-
             sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs,
             sortOrder: state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order
           },
@@ -309,18 +367,12 @@ export function JobLinesComponent({
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       filteredValue: state.filteredInfo.status || null,
-
       filters:
         (jobLines &&
           jobLines
             .map((l) => l.status)
             .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s || "No Status*",
-                value: [s]
-              };
-            })) ||
+            .map((s) => ({ text: s || t("dashboard.errors.status"), value: [s] }))) ||
         [],
       onFilter: (value, record) => value.includes(record.status),
       render: (text, record) => <JobLineStatusPopup jobline={record} disabled={jobRO} />
@@ -375,9 +427,7 @@ export function JobLinesComponent({
                           });
                         }
                       });
-                      await axios.post("/job/totalsssu", {
-                        id: job.id
-                      });
+                      await axios.post("/job/totalsssu", { id: job.id });
                       if (refetch) refetch();
                     }}
                   >
@@ -397,6 +447,7 @@ export function JobLinesComponent({
       filteredInfo: filters,
       sortedInfo: sorter
     }));
+    logImEXEvent("joblines_table_change", { pagination, filters, sorter });
   };
 
   const handleMark = (e) => {
@@ -413,6 +464,7 @@ export function JobLinesComponent({
         ])
       );
     }
+    logImEXEvent("joblines_mark_lines", {});
   };
 
   const markMenu = {
@@ -445,6 +497,36 @@ export function JobLinesComponent({
   return (
     <div>
       <PartsOrderModalContainer />
+
+      <Modal
+        open={bulkLocationOpen}
+        title={t("joblines.actions.updatelocation")}
+        onCancel={closeBulkLocationModal}
+        onOk={saveBulkLocation}
+        okButtonProps={{
+          disabled: jobRO || technician || selectedLineIds.length === 0,
+          loading: bulkLocationSaving
+        }}
+        destroyOnHidden
+      >
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <Typography.Text type="secondary">
+            {t("general.labels.selected")}: {selectedLineIds.length}
+          </Typography.Text>
+
+          <Select
+            allowClear
+            placeholder={t("joblines.fields.location")}
+            value={bulkLocation}
+            style={{ width: "100%" }}
+            popupMatchSelectWidth={false}
+            onChange={(val) => setBulkLocation(val ?? null)}
+            options={(bodyshop?.md_parts_locations || []).map((loc) => ({ label: loc, value: loc }))}
+          />
+          <Typography.Text type="secondary">{t("joblines.labels.bulk_location_help")}</Typography.Text>
+        </Space>
+      </Modal>
+
       {!technician && (
         <PartsOrderDrawer
           job={job}
@@ -454,6 +536,7 @@ export function JobLinesComponent({
           setTaskUpsertContext={setTaskUpsertContext}
         />
       )}
+
       <PageHeader
         title={t("jobs.labels.estimatelines")}
         extra={
@@ -462,6 +545,16 @@ export function JobLinesComponent({
               <SyncOutlined />
             </Button>
 
+            {/* Bulk Update Location */}
+            <Button
+              id="job-lines-bulk-update-location-button"
+              disabled={jobRO || technician || selectedLineIds.length === 0}
+              onClick={openBulkLocationModal}
+            >
+              {t("joblines.actions.updatelocation")}
+              {selectedLineIds.length > 0 && ` (${selectedLineIds.length})`}
+            </Button>
+
             {job.special_coverage_policy && (
               <Tag color="tomato">
                 <Space>
@@ -470,6 +563,7 @@ export function JobLinesComponent({
                 </Space>
               </Tag>
             )}
+
             {!isPartsEntry && (
               <JobLineDispatchButton
                 selectedLines={selectedLines}
@@ -478,9 +572,11 @@ export function JobLinesComponent({
                 disabled={technician}
               />
             )}
+
             {Enhanced_Payroll.treatment === "on" && (
               <JobLineBulkAssignComponent selectedLines={selectedLines} setSelectedLines={setSelectedLines} job={job} />
             )}
+
             {!isPartsEntry && (
               <Button
                 disabled={(job && !job.converted) || (selectedLines.length > 0 ? false : true) || jobRO || technician}
@@ -496,27 +592,20 @@ export function JobLinesComponent({
                         isinhouse: true,
                         date: dayjs(),
                         total: 0,
-                        billlines: selectedLines.map((p) => {
-                          return {
-                            joblineid: p.id,
-                            actual_price: p.act_price,
-                            actual_cost: 0, //p.act_price,
-                            line_desc: p.line_desc,
-                            line_remarks: p.line_remarks,
-                            part_type: p.part_type,
-                            quantity: p.quantity || 1,
-                            applicable_taxes: {
-                              local: false,
-                              state: false,
-                              federal: false
-                            }
-                          };
-                        })
+                        billlines: selectedLines.map((p) => ({
+                          joblineid: p.id,
+                          actual_price: p.act_price,
+                          actual_cost: 0,
+                          line_desc: p.line_desc,
+                          line_remarks: p.line_remarks,
+                          part_type: p.part_type,
+                          quantity: p.quantity || 1,
+                          applicable_taxes: { local: false, state: false, federal: false }
+                        }))
                       }
                     }
                   });
 
-                  //Clear out the selected lines. IO-785
                   setSelectedLines([]);
                 }}
               >
@@ -525,6 +614,7 @@ export function JobLinesComponent({
                 {selectedLines.length > 0 && ` (${selectedLines.length})`}
               </Button>
             )}
+
             <Button
               id="job-lines-order-parts-button"
               disabled={(job && !job.converted) || (selectedLines.length > 0 ? false : true) || jobRO || technician}
@@ -541,13 +631,13 @@ export function JobLinesComponent({
                   }
                 });
 
-                //Clear out the selected lines. IO-785
                 setSelectedLines([]);
               }}
             >
               {t("parts.actions.order")}
               {selectedLines.length > 0 && ` (${selectedLines.length})`}
             </Button>
+
             {!isPartsEntry && (
               <Button
                 id="job-lines-filter-parts-only-button"
@@ -564,9 +654,11 @@ export function JobLinesComponent({
                 <FilterFilled /> {t("jobs.actions.filterpartsonly")}
               </Button>
             )}
+
             <Dropdown menu={markMenu} trigger={["click"]}>
               <Button id="repair-data-mark-button">{t("jobs.actions.mark")}</Button>
             </Dropdown>
+
             {!isPartsEntry && (
               <Button
                 disabled={jobRO || technician}
@@ -580,9 +672,12 @@ export function JobLinesComponent({
                 {t("joblines.actions.new")}
               </Button>
             )}
+
             {!isPartsEntry &&
               InstanceRenderManager({ rome: <JobSendPartPriceChangeComponent job={job} disabled={technician} /> })}
+
             <JobCreateIOU job={job} selectedJobLines={selectedLines} />
+
             <Input.Search
               placeholder={t("general.labels.search")}
               onChange={(e) => {
@@ -593,6 +688,7 @@ export function JobLinesComponent({
           </Space>
         }
       />
+
       <Table
         columns={columns}
         rowKey="id"
@@ -600,9 +696,7 @@ export function JobLinesComponent({
         pagination={false}
         dataSource={jobLines}
         onChange={handleTableChange}
-        scroll={{
-          x: true
-        }}
+        scroll={{ x: true }}
         expandable={{
           expandedRowRender: (record) =>
             isPartsEntry ? (
@@ -611,24 +705,27 @@ export function JobLinesComponent({
               <JobLinesExpander jobline={record} jobid={job.id} />
             ),
           rowExpandable: () => true,
-          //expandRowByClick: true,
           expandIcon: ({ expanded, onExpand, record }) =>
             expanded ? (
               <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
             ) : (
-              <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
+              <PlusCircleTwoTone
+                onClick={(e) => {
+                  onExpand(record, e);
+                  logImEXEvent("joblines_expander", {});
+                }}
+              />
             )
         }}
-        onRow={(record) => {
-          return {
-            onDoubleClick: () => {
-              const notMatchingLines = selectedLines.filter((i) => i.id !== record.id);
-              notMatchingLines.length !== selectedLines.length
-                ? setSelectedLines(notMatchingLines)
-                : setSelectedLines([...selectedLines, record]);
-            } // double click row
-          };
-        }}
+        onRow={(record) => ({
+          onDoubleClick: () => {
+            logImEXEvent("joblines_double_click_select", {});
+            const notMatchingLines = selectedLines.filter((i) => i.id !== record.id);
+            notMatchingLines.length !== selectedLines.length
+              ? setSelectedLines(notMatchingLines)
+              : setSelectedLines([...selectedLines, record]);
+          }
+        })}
         rowSelection={{
           selectedRowKeys: selectedLines.map((item) => item && item.id),
           onSelectAll: (selected, selectedRows) => {

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

@@ -1,18 +1,19 @@
-import { useCallback, useEffect, useState } from "react";
-import dayjs from "../../utils/day";
-import axios from "axios";
-import { Badge, Card, Space, Table, Tag } from "antd";
 import { gql, useQuery } from "@apollo/client";
-import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
+import { Badge, Card, Space, Table, Tag } from "antd";
+import axios from "axios";
 import { isEmpty } from "lodash";
+import { useCallback, useEffect, useState } from "react";
 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 { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import "./job-lifecycle.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -57,6 +58,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses }) {
           jobids: job.id,
           statuses: statuses.statuses
         });
+        logImEXEvent("jobs_lifecycle_data", {});
         const data = response.data.transition[job.id];
         setLifecycleData(data);
       } catch (err) {
@@ -220,17 +222,37 @@ export function JobLifecycleComponent({ bodyshop, job, statuses }) {
                 </div>
               </BlurWrapperComponent>
               <Card type="inner" title={t("job_lifecycle.content.legend_title")} style={{ marginTop: "10px" }}>
-                <div>
+                <div
+                  style={{
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 8
+                  }}
+                >
                   {lifecycleData.durations.summations.map((key) => (
-                    <Tag key={key.status} color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
+                    <Tag
+                      key={key.status}
+                      color={key.color}
+                      style={{
+                        // let the tag grow with its content
+                        width: "auto",
+                        padding: 0,
+                        margin: 0,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        boxSizing: "border-box"
+                      }}
+                    >
                       <div
                         aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                         title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                         style={{
                           backgroundColor: "var(--tag-wrapper-bg)",
                           color: "var(--tag-wrapper-text)",
-                          padding: "4px",
-                          textAlign: "center"
+                          padding: "4px 8px",
+                          textAlign: "center",
+                          whiteSpace: "nowrap" // single line; tag gets wider instead of text escaping
                         }}
                       >
                         {key.status} (

client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx

@@ -10,6 +10,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -32,6 +33,7 @@ export function JoblineBulkAssign({ setSelectedLines, selectedLines, insertAudit
   const handleConvert = async (values) => {
     try {
       setLoading(true);
+      logImEXEvent("joblines_bulk_assign", {});
       const result = await assignLines({
         variables: {
           jobline: {

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

@@ -12,6 +12,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -46,6 +47,7 @@ export function JobLineDispatchButton({
     try {
       setLoading(true);
       //THIS HAS NOT YET BEEN TESTED. START BY FINISHING THIS FUNCTION.
+      logImEXEvent("joblines_dispatch", {});
       const result = await dispatchLines({
         variables: {
           partsDispatch: {

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,25 +1,23 @@
 import { useMutation } from "@apollo/client";
-import { Select, Space } from "antd";
-import { useEffect, useState } from "react";
+import { Select, Space, Tag } from "antd";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
+
+const CLEAR_VALUE = "__CLEAR_LOCATION__";
 
 export function JobLineLocationPopup({ bodyshop, jobline, disabled }) {
   const [editing, setEditing] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [location, setLocation] = useState(jobline.location);
   const [updateJob] = useMutation(UPDATE_JOB_LINE);
   const { t } = useTranslation();
@@ -29,55 +27,78 @@ export function JobLineLocationPopup({ bodyshop, jobline, disabled }) {
     if (editing) setLocation(jobline.location);
   }, [editing, jobline.location]);
 
-  const handleChange = (e) => {
-    setLocation(e);
-  };
+  const options = useMemo(() => {
+    const locs = bodyshop?.md_parts_locations || [];
+    return [
+      { label: t("general.labels.none", "No location"), value: CLEAR_VALUE },
+      ...locs.map((loc) => ({ label: loc, value: loc }))
+    ];
+  }, [bodyshop?.md_parts_locations, t]);
 
-  const handleSave = async () => {
-    setLoading(true);
-    const result = await updateJob({
-      variables: { lineId: jobline.id, line: { location: location || "" } }
-    });
+  const saveLocation = async (nextLocation) => {
+    setSaving(true);
 
-    if (!result.errors) {
-      notification["success"]({ message: t("joblines.successes.saved") });
-    } else {
-      notification["error"]({
-        message: t("joblines.errors.saving", {
-          error: JSON.stringify(result.errors)
-        })
+    try {
+      const result = await updateJob({
+        variables: { lineId: jobline.id, line: { location: nextLocation || "" } }
       });
+
+      if (!result.errors) {
+        notification["success"]({ message: t("joblines.successes.saved") });
+      } else {
+        notification["error"]({
+          message: t("joblines.errors.saving", {
+            error: JSON.stringify(result.errors)
+          })
+        });
+      }
+    } catch (error) {
+      notification["error"]({
+        message: t("joblines.errors.saving", { error: error?.message || String(error) })
+      });
+    } finally {
+      setSaving(false);
+      setEditing(false);
     }
-    setLoading(false);
-    setEditing(false);
   };
 
-  if (editing)
+  const handleChange = async (value) => {
+    const next = value === CLEAR_VALUE ? null : value;
+    setLocation(next);
+    await saveLocation(next);
+  };
+
+  if (editing) {
     return (
-      <div>
-        <LoadingSpinner loading={loading}>
-          <Select
-            autoFocus
-            allowClear
-            popupMatchSelectWidth={100}
-            value={location}
-            onClear={() => setLocation(null)}
-            onSelect={handleChange}
-            onBlur={handleSave}
-          >
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
-        </LoadingSpinner>
+      <div style={{ width: "100%", display: "flex", alignItems: "center" }}>
+        <Select
+          autoFocus
+          size="small"
+          value={location ?? undefined}
+          loading={saving}
+          disabled={saving}
+          style={{ flex: 1, minWidth: 0 }}
+          popupMatchSelectWidth={false}
+          getPopupContainer={(triggerNode) => triggerNode.parentNode}
+          onChange={handleChange}
+          onBlur={() => !saving && setEditing(false)}
+          options={options}
+        />
       </div>
     );
+  }
+
   return (
-    <div style={{ width: "100%", minHeight: "2rem", cursor: "pointer" }} onClick={() => !disabled && setEditing(true)}>
+    <div
+      style={{ width: "100%", minHeight: "2rem", cursor: disabled ? "default" : "pointer" }}
+      onClick={() => !disabled && setEditing(true)}
+    >
       <Space wrap>
-        {jobline.location}
+        {jobline.location ? (
+          <Tag>{jobline.location}</Tag>
+        ) : (
+          <span style={{ opacity: 0.6 }}>{t("general.labels.none")}</span>
+        )}
         {jobline.parts_dispatch_lines?.length > 0 && "-Disp"}
       </Space>
     </div>

client/src/components/job-parts-queue-count/job-parts-queue-count.component.jsx

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
-import { Col, Row, Tag, Tooltip } from "antd";
+import { Tag, Tooltip } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -11,65 +12,67 @@ const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export const DEFAULT_COL_LAYOUT = { xs: 24, sm: 24, md: 8, lg: 4, xl: 4, xxl: 4 };
-
 export default connect(mapStateToProps, mapDispatchToProps)(JobPartsQueueCount);
 
-export function JobPartsQueueCount({ bodyshop, parts, defaultColLayout = DEFAULT_COL_LAYOUT }) {
+export function JobPartsQueueCount({ bodyshop, parts }) {
+  const { t } = useTranslation();
   const partsStatus = useMemo(() => {
     if (!parts) return null;
+    const statusKeys = ["default_bo", "default_ordered", "default_received", "default_returned"];
     return parts.reduce(
       (acc, val) => {
         if (val.part_type === "PAS" || val.part_type === "PASL") return acc;
         acc.total = acc.total + val.count;
         acc[val.status] = acc[val.status] + val.count;
-
         return acc;
       },
       {
         total: 0,
         null: 0,
-        [bodyshop.md_order_statuses.default_bo]: 0,
-        [bodyshop.md_order_statuses.default_ordered]: 0,
-        [bodyshop.md_order_statuses.default_received]: 0,
-        [bodyshop.md_order_statuses.default_returned]: 0
+        ...Object.fromEntries(statusKeys.map((key) => [bodyshop.md_order_statuses[key], 0]))
       }
     );
   }, [bodyshop, parts]);
 
   if (!parts) return null;
   return (
-    <Row>
-      <Col {...defaultColLayout}>
-        <Tooltip title="Total">
-          <Tag>{partsStatus.total}</Tag>
-        </Tooltip>
-      </Col>
-      <Col {...defaultColLayout}>
-        <Tooltip title="No Status">
-          <Tag color="gold">{partsStatus["null"]}</Tag>
-        </Tooltip>
-      </Col>
-      <Col {...defaultColLayout}>
-        <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
-          <Tag color="blue">{partsStatus[bodyshop.md_order_statuses.default_ordered]}</Tag>
-        </Tooltip>
-      </Col>
-      <Col {...defaultColLayout}>
-        <Tooltip title={bodyshop.md_order_statuses.default_received}>
-          <Tag color="green">{partsStatus[bodyshop.md_order_statuses.default_received]}</Tag>
-        </Tooltip>
-      </Col>
-      <Col {...defaultColLayout}>
-        <Tooltip title={bodyshop.md_order_statuses.default_returned}>
-          <Tag color="orange">{partsStatus[bodyshop.md_order_statuses.default_returned]}</Tag>
-        </Tooltip>
-      </Col>
-      <Col {...defaultColLayout}>
-        <Tooltip title={bodyshop.md_order_statuses.default_bo}>
-          <Tag color="red">{partsStatus[bodyshop.md_order_statuses.default_bo]}</Tag>
-        </Tooltip>
-      </Col>
-    </Row>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(40px, 1fr))",
+        gap: "8px",
+        width: "100%",
+        justifyItems: "start"
+      }}
+    >
+      <Tooltip title="Total">
+        <Tag style={{ minWidth: "40px", textAlign: "center" }}>{partsStatus.total}</Tag>
+      </Tooltip>
+      <Tooltip title={t("dashboard.errors.status_normal")}>
+        <Tag color="gold" style={{ minWidth: "40px", textAlign: "center" }}>
+          {partsStatus["null"]}
+        </Tag>
+      </Tooltip>
+      <Tooltip title={bodyshop.md_order_statuses.default_bo}>
+        <Tag color="red" style={{ minWidth: "40px", textAlign: "center" }}>
+          {partsStatus[bodyshop.md_order_statuses.default_bo]}
+        </Tag>
+      </Tooltip>
+      <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
+        <Tag color="blue" style={{ minWidth: "40px", textAlign: "center" }}>
+          {partsStatus[bodyshop.md_order_statuses.default_ordered]}
+        </Tag>
+      </Tooltip>
+      <Tooltip title={bodyshop.md_order_statuses.default_received}>
+        <Tag color="green" style={{ minWidth: "40px", textAlign: "center" }}>
+          {partsStatus[bodyshop.md_order_statuses.default_received]}
+        </Tag>
+      </Tooltip>
+      <Tooltip title={bodyshop.md_order_statuses.default_returned}>
+        <Tag color="orange" style={{ minWidth: "40px", textAlign: "center" }}>
+          {partsStatus[bodyshop.md_order_statuses.default_returned]}
+        </Tag>
+      </Tooltip>
+    </div>
   );
 }

client/src/components/job-parts-received/job-parts-received.component.jsx

@@ -0,0 +1,105 @@
+import { useCallback, useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import { Popover } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
+import { useTranslation } from "react-i18next";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+/**
+ * Displays "Parts Received" summary (modeled after the Production Board List column),
+ * and on click shows a popover with the Parts Status grid (existing JobPartsQueueCount UI).
+ * @param bodyshop
+ * @param parts
+ * @param displayMode
+ * @param popoverPlacement
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popoverPlacement = "top" }) {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const summary = useMemo(() => {
+    const receivedStatus = bodyshop?.md_order_statuses?.default_received;
+
+    if (!Array.isArray(parts) || parts.length === 0 || !receivedStatus) {
+      return { total: 0, received: 0, percentLabel: t("general.labels.na") };
+    }
+
+    // Keep consistent with JobPartsQueueCount: exclude PAS / PASL from parts math
+    const { total, received } = parts.reduce(
+      (acc, val) => {
+        if (val?.part_type === "PAS" || val?.part_type === "PASL") return acc;
+        const count = Number(val?.count || 0);
+        acc.total += count;
+
+        if (val?.status === receivedStatus) {
+          acc.received += count;
+        }
+        return acc;
+      },
+      { total: 0, received: 0 }
+    );
+
+    const percentLabel = total > 0 ? `${Math.round((received / total) * 100)}%` : t("general.labels.na");
+    return { total, received, percentLabel };
+  }, [parts, bodyshop?.md_order_statuses?.default_received]);
+
+  const canOpen = summary.total > 0;
+
+  const handleOpenChange = useCallback(
+    (nextOpen) => {
+      if (!canOpen) return;
+      setOpen(nextOpen);
+    },
+    [canOpen]
+  );
+
+  const displayText =
+    displayMode === "compact" ? summary.percentLabel : `${summary.percentLabel} (${summary.received}/${summary.total})`;
+
+  // Prevent row/cell click handlers (table selection, drawer selection, etc.)
+  const stop = (e) => e.stopPropagation();
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={["click"]}
+      placement={popoverPlacement}
+      content={
+        <div onClick={stop} style={{ minWidth: 260 }}>
+          <JobPartsQueueCount parts={parts} />
+        </div>
+      }
+    >
+      <div
+        onClick={stop}
+        style={{
+          width: "100%",
+          height: "19px",
+          cursor: canOpen ? "pointer" : "default",
+          userSelect: "none"
+        }}
+        title={canOpen ? t("production.labels.click_for_statuses") : undefined}
+      >
+        {displayText}
+      </div>
+    </Popover>
+  );
+}
+
+JobPartsReceived.propTypes = {
+  bodyshop: PropTypes.object,
+  parts: PropTypes.array,
+  displayMode: PropTypes.oneOf(["full", "compact"]),
+  popoverPlacement: PropTypes.string
+};
+
+export default connect(mapStateToProps)(JobPartsReceived);

client/src/components/job-remove-from-parst-queue/job-remove-from-parts-queue.component.jsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 
 export default function JobRemoveFromPartsQueue({ checked, jobId }) {
   const [updateJob] = useMutation(UPDATE_JOB);
@@ -13,6 +14,8 @@ export default function JobRemoveFromPartsQueue({ checked, jobId }) {
 
   const handleChange = async (e) => {
     setLoading(true);
+    logImEXEvent("parts_queue_toggle", { estimators: e });
+
     const result = await updateJob({
       variables: { jobId: jobId, job: { queued_for_parts: e.target.checked } }
     });

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import { alphaSort } from "../../utils/sorters";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -30,11 +31,15 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
   const notification = useNotification();
 
   const handleTableChange = (pagination, filters, sorter) => {
+    logImEXEvent("available_jobs_scan_sort_filter", { pagination, filters, sorter });
+
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
   const handleImport = async (filepath) => {
     setLoading(true);
+    logImEXEvent("available_jobs_scan", {});
+
     const response = await axios.post("http://localhost:1337/import/", {
       filepath
     });

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

@@ -12,6 +12,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -34,6 +35,7 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    logImEXEvent("available_jobs_sort_filter", { pagination, filters, sorter });
   };
 
   const columns = [

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

@@ -154,6 +154,10 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
         : {})
     };
 
+    if (currentUser?.email) {
+      newJob.created_user_email = currentUser.email;
+    }
+
     if (selectedOwner) {
       newJob.ownerid = selectedOwner;
       delete newJob.owner;

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

@@ -1,4 +1,4 @@
-import { Form, Input } from "antd";
+import { Form, Input, Select } from "antd";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
@@ -7,6 +7,11 @@ import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-forma
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function JobsCreateOwnerInfoNewComponent() {
+  const PHONE_TYPE_OPTIONS = [
+    { label: t("owners.labels.home"), value: "Home" },
+    { label: t("owners.labels.work"), value: "Work" },
+    { label: t("owners.labels.cell"), value: "Cell" }
+  ];
   const [state] = useContext(JobCreateContext);
 
   const { t } = useTranslation();
@@ -105,26 +110,56 @@ export default function JobsCreateOwnerInfoNewComponent() {
           ]}
           name={["owner", "data", "ownr_ea"]}
         >
-          <FormItemEmail
-            //email={form.getFieldValue("ownr_ea")}
-            disabled={!state.owner.new}
-          />
+          <FormItemEmail disabled={!state.owner.new} />
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.ownr_ph1")}
-          name={["owner", "data", "ownr_ph1"]}
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph1")]}
-        >
-          <FormItemPhone disabled={!state.owner.new} />
+
+        {/* Phone 1 + Type */}
+        <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <Form.Item
+              name={["owner", "data", "ownr_ph1"]}
+              noStyle
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph1")]}
+            >
+              <FormItemPhone disabled={!state.owner.new} style={{ flex: 1, minWidth: 150 }} />
+            </Form.Item>
+
+            <Form.Item name={["owner", "data", "ownr_ph1_ty"]} noStyle>
+              <Select
+                disabled={!state.owner.new}
+                allowClear
+                placeholder="Type"
+                options={PHONE_TYPE_OPTIONS}
+                style={{ width: 110 }}
+              />
+            </Form.Item>
+          </div>
         </Form.Item>
-        <Form.Item
-          label={t("owners.fields.ownr_ph2")}
-          name={["owner", "data", "ownr_ph2"]}
-          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph2")]}
-        >
-          <FormItemPhone disabled={!state.owner.new} />
+
+        {/* Phone 2 + Type */}
+        <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <Form.Item
+              name={["owner", "data", "ownr_ph2"]}
+              noStyle
+              rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "owner.data.ownr_ph2")]}
+            >
+              <FormItemPhone disabled={!state.owner.new} style={{ flex: 1, minWidth: 150 }} />
+            </Form.Item>
+
+            <Form.Item name={["owner", "data", "ownr_ph2_ty"]} noStyle>
+              <Select
+                disabled={!state.owner.new}
+                allowClear
+                placeholder="Type"
+                options={PHONE_TYPE_OPTIONS}
+                style={{ width: 110 }}
+              />
+            </Form.Item>
+          </div>
         </Form.Item>
       </LayoutFormRow>
+
       <LayoutFormRow grow>
         <Form.Item label={t("owners.fields.preferred_contact")} name={["owner", "data", "preferred_contact"]}>
           <Input disabled={!state.owner.new} />

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

@@ -61,7 +61,7 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
       title: t("owners.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
-      render: (text, record) => <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>,
+      render: (text, record) => <PhoneFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneFormatter>,
       sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
       sortOrder: tableState.sortedInfo.columnKey === "ownr_ph1" && tableState.sortedInfo.order
     },
@@ -69,7 +69,7 @@ export default function JobsCreateOwnerInfoSearchComponent({ loading, owners })
       title: t("owners.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
-      render: (text, record) => <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>,
+      render: (text, record) => <PhoneFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneFormatter>,
       sorter: (a, b) => alphaSort(a.ownr_ph2, b.ownr_ph2),
       sortOrder: tableState.sortedInfo.columnKey === "ownr_ph2" && tableState.sortedInfo.order
     }

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -175,25 +175,33 @@ export function JobsDetailHeaderActions({
   };
 
   const handleDuplicate = () =>
-    DuplicateJob(
-      client,
-      job.id,
-      { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
-      (newJobId) => {
+    DuplicateJob({
+      apolloClient: client,
+      jobId: job.id,
+      config: { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
+      completionCallback: (newJobId) => {
         history(`/manage/jobs/${newJobId}`);
         notification.success({
           message: t("jobs.successes.duplicated")
         });
       },
-      true
-    );
+      keepJobLines: true,
+      currentUser
+    });
 
   const handleDuplicateConfirm = () =>
-    DuplicateJob(client, job.id, { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported }, (newJobId) => {
-      history(`/manage/jobs/${newJobId}`);
-      notification.success({
-        message: t("jobs.successes.duplicated")
-      });
+    DuplicateJob({
+      apolloClient: client,
+      jobId: job.id,
+      config: { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
+      completionCallback: (newJobId) => {
+        history(`/manage/jobs/${newJobId}`);
+        notification.success({
+          message: t("jobs.successes.duplicated")
+        });
+      },
+      keepJobLines: false,
+      currentUser
     });
 
   const handleFinish = async (values) => {
@@ -609,7 +617,7 @@ export function JobsDetailHeaderActions({
             <FormDateTimePickerComponent
               onBlur={() => {
                 const start = form.getFieldValue("start");
-                form.setFieldsValue({ end: start.add(30, "minutes") });
+                form.setFieldsValue({ end: start?.add(30, "minutes") });
               }}
             />
           </Form.Item>

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util.js

@@ -5,7 +5,14 @@ import { INSERT_NEW_JOB, QUERY_JOB_FOR_DUPE } from "../../graphql/jobs.queries";
 import dayjs from "../../utils/day";
 import i18n from "i18next";
 
-export default async function DuplicateJob(apolloClient, jobId, config, completionCallback, keepJobLines = false) {
+export default async function DuplicateJob({
+  apolloClient,
+  jobId,
+  config,
+  completionCallback,
+  keepJobLines = false,
+  currentUser
+}) {
   logImEXEvent("job_duplicate");
 
   const { defaultOpenStatus } = config;
@@ -19,6 +26,7 @@ export default async function DuplicateJob(apolloClient, jobId, config, completi
   const existingJob = _.cloneDeep(jobs_by_pk);
   delete existingJob.__typename;
   delete existingJob.id;
+  delete existingJob.created_user_email;
   delete existingJob.createdat;
   delete existingJob.updatedat;
   delete existingJob.cieca_stl;
@@ -29,6 +37,10 @@ export default async function DuplicateJob(apolloClient, jobId, config, completi
     status: defaultOpenStatus
   };
 
+  if (currentUser?.email) {
+    newJob.created_user_email = currentUser.email;
+  }
+
   const _tempLines = _.cloneDeep(existingJob.joblines);
   _tempLines.forEach((line) => {
     delete line.id;
@@ -55,7 +67,7 @@ export default async function DuplicateJob(apolloClient, jobId, config, completi
   return;
 }
 
-export async function CreateIouForJob(apolloClient, jobId, config, jobLinesToKeep) {
+export async function CreateIouForJob({ apolloClient, jobId, config, jobLinesToKeep, currentUser }) {
   logImEXEvent("job_create_iou");
 
   const { status } = config;
@@ -109,6 +121,9 @@ export async function CreateIouForJob(apolloClient, jobId, config, jobLinesToKee
   delete newJob.joblines;
   newJob.joblines = { data: _tempLines };
 
+  if (currentUser?.email) {
+    newJob.created_user_email = currentUser.email;
+  }
   const res2 = await apolloClient.mutate({
     mutation: INSERT_NEW_JOB,
     variables: { job: [newJob] }

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx

@@ -14,6 +14,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser,
@@ -108,6 +109,9 @@ export function JobsDetailHeaderActionsToggleProduction({
                 DateTimeFormatterFunction(values.actual_completion)
               )
       });
+
+      logImEXEvent(scenario === "pre" ? "job_intake_quick" : "job-deliver-quick", {});
+
       setPopOverVisible(false);
       closeParentMenu();
       refetch();

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

@@ -77,6 +77,8 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
     .reduce((acc, val) => acc + val.mod_lb_hrs, 0);
   const ownerTitle = OwnerNameDisplayFunction(job).trim();
 
+  const employeeData = bodyshop.associations.find((a) => a.useremail === job.admin_clerk)?.user?.employee ?? null;
+
   // Handle checkbox changes
   const handleCheckboxChange = async (field, checked) => {
     const value = checked ? dayjs().toISOString() : null;
@@ -162,7 +164,7 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
                       {job.cccontracts.map((c, index) => (
                         <Space key={c.id} wrap>
                           <Link to={`/manage/courtesycars/contracts/${c.id}`}>
-                            {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
+                            {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model} ${c.courtesycar.plate} - ${t(c.status)}`}
                             {index !== job.cccontracts.length - 1 ? "," : null}
                           </Link>
                         </Space>
@@ -249,16 +251,16 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
             <div>
               <DataLabel key="2" label={t("jobs.fields.ownr_ph1")}>
                 {disabled || isPartsEntry ? (
-                  <PhoneNumberFormatter>{job.ownr_ph1}</PhoneNumberFormatter>
+                  <PhoneNumberFormatter type={job.ownr_ph1_ty}>{job.ownr_ph1}</PhoneNumberFormatter>
                 ) : (
-                  <ChatOpenButton phone={job.ownr_ph1} jobid={job.id} />
+                  <ChatOpenButton type={job.ownr_ph1_ty} phone={job.ownr_ph1} jobid={job.id} />
                 )}
               </DataLabel>
               <DataLabel key="22" label={t("jobs.fields.ownr_ph2")}>
                 {disabled || isPartsEntry ? (
-                  <PhoneNumberFormatter>{job.ownr_ph2}</PhoneNumberFormatter>
+                  <PhoneNumberFormatter type={job.ownr_ph2_ty}>{job.ownr_ph2}</PhoneNumberFormatter>
                 ) : (
-                  <ChatOpenButton phone={job.ownr_ph2} jobid={job.id} />
+                  <ChatOpenButton type={job.ownr_ph2_ty} phone={job.ownr_ph2} jobid={job.id} />
                 )}
               </DataLabel>
               <DataLabel key="3" label={t("owners.fields.address")}>
@@ -355,6 +357,14 @@ export function JobsDetailHeader({ job, bodyshop, disabled, insertAuditTrail, is
             >
               <div>
                 <JobEmployeeAssignments job={job} />
+                {job.admin_clerk && (
+                  <>
+                    <Divider style={{ margin: ".5rem" }} />
+                    <DataLabel label={t("jobs.fields.admin_clerk")}>
+                      {employeeData?.displayName ?? job.admin_clerk}
+                    </DataLabel>
+                  </>
+                )}
                 <Divider style={{ margin: ".5rem" }} />
                 <DataLabel label={t("jobs.labels.labor_hrs")}>
                   {bodyHrs.toFixed(1)} / {refinishHrs.toFixed(1)} / {(bodyHrs + refinishHrs).toFixed(1)}

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx

@@ -35,16 +35,14 @@ export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier,
     ...galleryImages.other.filter((image) => image.isSelected)
   ];
 
-  function downloadProgress(progressEvent) {
-    setDownload((currentDownloadState) => {
-      return {
-        downloaded: progressEvent.loaded || 0,
-        speed: (progressEvent.loaded || 0) - ((currentDownloadState && currentDownloadState.downloaded) || 0)
-      };
-    });
-  }
+  const downloadProgress = ({ loaded }) => {
+    setDownload((currentDownloadState) => ({
+      downloaded: loaded ?? 0,
+      speed: (loaded ?? 0) - (currentDownloadState?.downloaded ?? 0)
+    }));
+  };
 
-  function standardMediaDownload(bufferData) {
+  const standardMediaDownload = (bufferData) => {
     try {
       const a = document.createElement("a");
       const url = window.URL.createObjectURL(new Blob([bufferData]));
@@ -55,29 +53,26 @@ export function JobsDocumentsImgproxyDownloadButton({ galleryImages, identifier,
       setLoading(false);
       setDownload(null);
     }
-  }
+  };
 
   const handleDownload = async () => {
     logImEXEvent("jobs_documents_download");
     setLoading(true);
     try {
-      const response = await axios({
+      const { data } = await axios({
         url: "/media/imgproxy/download",
         method: "POST",
         responseType: "blob",
         data: { jobId, documentids: imagesToDownload.map((_) => _.id) },
         onDownloadProgress: downloadProgress
       });
-
-      setLoading(false);
-      setDownload(null);
-
       // Use the response data (Blob) to trigger download
-      standardMediaDownload(response.data);
+      standardMediaDownload(data);
     } catch {
+      // handle error (optional)
+    } finally {
       setLoading(false);
       setDownload(null);
-      // handle error (optional)
     }
   };
 

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx

@@ -76,14 +76,14 @@ function JobsDocumentsImgproxyComponent({
               <SyncOutlined />
             </Button>
             <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
+            {!billId && (
+              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
+            )}
             <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} jobId={jobId} />
             <JobsDocumentsDeleteButton
               galleryImages={galleryImages}
               deletionCallback={billsCallback || fetchThumbnails || refetch}
             />
-            {!billId && (
-              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
-            )}
           </Space>
         </Col>
         {!hasMediaAccess && (

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.delete.component.jsx

@@ -67,7 +67,7 @@ export default function JobsDocumentsImgproxyDeleteButton({ galleryImages, delet
       okButtonProps={{ danger: true }}
       cancelText={t("general.actions.cancel")}
     >
-      <Button disabled={imagesToDelete.length < 1} loading={loading}>
+      <Button danger disabled={imagesToDelete.length < 1} loading={loading}>
         {t("documents.actions.delete")}
       </Button>
     </Popconfirm>

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -1,4 +1,4 @@
-import { FileExcelFilled, SyncOutlined } from "@ant-design/icons";
+import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
 import { Alert, Button, Card, Col, Row, Space } from "antd";
 import { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
@@ -107,8 +107,8 @@ export function JobsDocumentsLocalGallery({
             <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
               <Button>{t("documents.labels.openinexplorer")}</Button>
             </a>
-            <JobsDocumentsLocalGalleryReassign jobid={job.id} />
             <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
+            <JobsDocumentsLocalGalleryReassign jobid={job.id} />
             <JobsLocalGalleryDownloadButton job={job} />
             <JobsDocumentsLocalDeleteButton jobid={job.id} />
           </Space>
@@ -185,6 +185,21 @@ export function JobsDocumentsLocalGallery({
         </Col>
         {modalState.open && (
           <Lightbox
+            toolbarButtons={[
+              <EditFilled
+                key="edit"
+                onClick={() => {
+                  const newWindow = window.open(
+                    `${window.location.protocol}//${window.location.host}/edit?imageUrl=${
+                      jobMedia.images[modalState.index].fullsize
+                    }&filename=${jobMedia.images[modalState.index].filename}&jobid=${job.id}`,
+                    "_blank",
+                    "noopener,noreferrer"
+                  );
+                  if (newWindow) newWindow.opener = null;
+                }}
+              />
+            ]}
             mainSrc={jobMedia.images[modalState.index].fullsize}
             nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
             prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.delete.component.jsx

@@ -28,6 +28,8 @@ export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia
 
   const [loading, setLoading] = useState(false);
 
+  const imagesToDelete = (allMedia?.[jobid] || []).filter((i) => i.isSelected);
+
   const handleDelete = async () => {
     logImEXEvent("job_documents_delete");
     setLoading(true);
@@ -36,7 +38,7 @@ export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia
       `${bodyshop.localmediaserverhttp}/jobs/delete`,
       {
         jobid: jobid,
-        files: (allMedia?.[jobid] || []).filter((i) => i.isSelected).map((i) => i.filename)
+        files: imagesToDelete.map((i) => i.filename)
       },
       { headers: { ims_token: bodyshop.localmediatoken } }
     );
@@ -60,14 +62,17 @@ export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia
 
   return (
     <Popconfirm
+      disabled={imagesToDelete.length < 1}
       icon={<QuestionCircleOutlined style={{ color: "red" }} />}
       onConfirm={handleDelete}
       title={t("documents.labels.confirmdelete")}
       okText={t("general.actions.delete")}
-      okButtonProps={{ type: "danger" }}
+      okButtonProps={{ danger: true }}
       cancelText={t("general.actions.cancel")}
     >
-      <Button loading={loading}>{t("documents.actions.delete")}</Button>
+      <Button danger disabled={imagesToDelete.length < 1} loading={loading}>
+        {t("documents.actions.delete")}
+      </Button>
     </Popconfirm>
   );
 }

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.download.jsx

@@ -1,8 +1,8 @@
-import { Button } from "antd";
+import { Button, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import cleanAxios from "../../utils/CleanAxios";
-
+import formatBytes from "../../utils/formatbytes";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectAllMedia } from "../../redux/media/media.selectors";
@@ -19,45 +19,63 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsLocalGalleryDown
 
 export function JobsLocalGalleryDownloadButton({ bodyshop, allMedia, job }) {
   const { t } = useTranslation();
-  const [download, setDownload] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [download, setDownload] = useState(false);
 
-  function downloadProgress(progressEvent) {
-    setDownload((currentDownloadState) => {
-      return {
-        downloaded: progressEvent.loaded || 0,
-        speed: (progressEvent.loaded || 0) - (currentDownloadState?.downloaded || 0)
-      };
-    });
-  }
+  const imagesToDownload = (allMedia?.[job.id] || []).filter((i) => i.isSelected);
+
+  const downloadProgress = ({ loaded }) => {
+    setDownload((currentDownloadState) => ({
+      downloaded: loaded || 0,
+      speed: (loaded || 0) - (currentDownloadState?.downloaded || 0)
+    }));
+  };
+
+  const standardMediaDownload = (bufferData, filename) => {
+    try {
+      const a = document.createElement("a");
+      const url = window.URL.createObjectURL(new Blob([bufferData]));
+      a.href = url;
+      a.download = `${filename}.zip`;
+      a.click();
+    } catch {
+      setLoading(false);
+      setDownload(null);
+    }
+  };
 
   const handleDownload = async () => {
-    const theDownloadedZip = await cleanAxios.post(
-      `${bodyshop.localmediaserverhttp}/jobs/download`,
-      {
-        jobid: job.id,
-        files: (allMedia?.[job.id] || []).filter((i) => i.isSelected).map((i) => i.filename)
-      },
-      {
-        headers: { ims_token: bodyshop.localmediatoken },
-        responseType: "arraybuffer",
-        onDownloadProgress: downloadProgress
-      }
-    );
-    setDownload(null);
-    standardMediaDownload(theDownloadedZip.data, job.ro_number);
+    const { localmediaserverhttp, localmediatoken } = bodyshop;
+    const { id, ro_number } = job;
+    setLoading(true);
+    try {
+      const response = await cleanAxios.post(
+        `${localmediaserverhttp}/jobs/download`,
+        {
+          jobid: id,
+          files: imagesToDownload.map((i) => i.filename)
+        },
+        {
+          headers: { ims_token: localmediatoken },
+          responseType: "arraybuffer",
+          onDownloadProgress: downloadProgress
+        }
+      );
+      standardMediaDownload(response.data, ro_number);
+    } catch {
+      // handle error (optional)
+    } finally {
+      setLoading(false);
+      setDownload(null);
+    }
   };
 
   return (
-    <Button loading={!!download} onClick={handleDownload}>
-      {t("documents.actions.download")}
+    <Button disabled={imagesToDownload < 1} loading={download || loading} onClick={handleDownload}>
+      <Space>
+        <span>{t("documents.actions.download")}</span>
+        {download && <span>{`(${formatBytes(download.downloaded)} @ ${formatBytes(download.speed)} / second)`}</span>}
+      </Space>
     </Button>
   );
 }
-
-function standardMediaDownload(bufferData, filename) {
-  const a = document.createElement("a");
-  const url = window.URL.createObjectURL(new Blob([bufferData]));
-  a.href = url;
-  a.download = `${filename}.zip`;
-  a.click();
-}

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx

@@ -1,11 +1,12 @@
-import { useEffect } from "react";
-import { Gallery } from "react-grid-gallery";
+import { useEffect, useMemo, useState, useCallback } from "react";
+import LocalMediaGrid from "./local-media-grid.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { getJobMedia } from "../../redux/media/media.actions";
 import { selectAllMedia } from "../../redux/media/media.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -18,41 +19,127 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobDocumentsLocalGalleryExternal);
 
-function JobDocumentsLocalGalleryExternal({ jobId, externalMediaState, getJobMedia, allMedia }) {
+/**
+ * JobDocumentsLocalGalleryExternal
+ * Fetches and displays job-related image media using the custom LocalMediaGrid.
+ *
+ * Props:
+ *  - jobId: string | number (required to fetch media)
+ *  - externalMediaState: [imagesArray, setImagesFn] (state lifted to parent for shared selection)
+ *  - getJobMedia: dispatching function to retrieve media for a job
+ *  - allMedia: redux slice keyed by jobId containing raw media records
+ *  - context: "chat" | "email" | other string used to drive grid behavior
+ *
+ * Notes:
+ *  - The previous third-party gallery required a remount key (openVersion); custom grid no longer does.
+ *  - Selection flags are preserved when media refreshes.
+ *  - Loading state ends after transformation regardless of whether any images were found.
+ */
+function JobDocumentsLocalGalleryExternal({ jobId, externalMediaState, getJobMedia, allMedia, context = "chat" }) {
   const [galleryImages, setgalleryImages] = externalMediaState;
-  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation(); // i18n hook retained if future translations are added
+  const DEBUG_LOCAL_GALLERY = false; // flip to true for verbose console logging
 
+  // Transform raw media record into a normalized image object consumed by the grid.
+  const transformMediaToImages = useCallback((raw) => {
+    return raw
+      .filter((m) => m.type?.mime?.startsWith("image"))
+      .map((m) => ({
+        ...m,
+        src: m.thumbnail,
+        thumbnail: m.thumbnail,
+        fullsize: m.src,
+        width: 225,
+        height: 225,
+        thumbnailWidth: 225,
+        thumbnailHeight: 225,
+        caption: m.filename || m.key
+      }));
+  }, []);
+
+  // Fetch media when jobId changes (network request triggers Redux update -> documents memo recalculates).
   useEffect(() => {
-    if (jobId) {
-      getJobMedia(jobId);
-    }
+    if (!jobId) return;
+    setIsLoading(true);
+    getJobMedia(jobId);
   }, [jobId, getJobMedia]);
 
-  useEffect(() => {
-    let documents = allMedia?.[jobId]
-      ? allMedia[jobId].reduce((acc, val) => {
-          if (val.type?.mime && val.type.mime.startsWith("image")) {
-            acc.push({ ...val, src: val.thumbnail, fullsize: val.src });
-          }
-          return acc;
-        }, [])
-      : [];
-    console.log(
-      "🚀 ~ file: jobs-documents-local-gallery.external.component.jsx:48 ~ useEffect ~ documents:",
-      documents
-    );
+  // Memo: transform raw redux media into gallery documents.
+  const documents = useMemo(
+    () => transformMediaToImages(allMedia?.[jobId] || []),
+    [allMedia, jobId, transformMediaToImages]
+  );
 
-    setgalleryImages(documents);
-  }, [allMedia, jobId, setgalleryImages, t]);
+  // Sync transformed documents into external state while preserving selection flags.
+  useEffect(() => {
+    const prevSelection = new Map(galleryImages.map((p) => [p.filename, p.isSelected]));
+    const nextImages = documents.map((d) => ({ ...d, isSelected: prevSelection.get(d.filename) || false }));
+    // Micro-optimization: if array length and each filename + selection flag match, skip creating a new array.
+    if (galleryImages.length === nextImages.length) {
+      let identical = true;
+      for (let i = 0; i < nextImages.length; i++) {
+        if (
+          galleryImages[i].filename !== nextImages[i].filename ||
+          galleryImages[i].isSelected !== nextImages[i].isSelected
+        ) {
+          identical = false;
+          break;
+        }
+      }
+      if (identical) {
+        setIsLoading(false); // ensure loading stops even on no-change
+        if (DEBUG_LOCAL_GALLERY) {
+          console.log("[LocalGallery] documents unchanged", { jobId, count: documents.length });
+        }
+        return;
+      }
+    }
+    setgalleryImages(nextImages);
+    setIsLoading(false); // stop loading after transform regardless of emptiness
+    if (DEBUG_LOCAL_GALLERY) {
+      console.log("[LocalGallery] documents transformed", { jobId, count: documents.length });
+    }
+  }, [documents, setgalleryImages, galleryImages, jobId, DEBUG_LOCAL_GALLERY]);
+
+  // Toggle handler (stable reference)
+  const handleToggle = useCallback(
+    (idx) => {
+      setgalleryImages((imgs) => imgs.map((g, gIdx) => (gIdx === idx ? { ...g, isSelected: !g.isSelected } : g)));
+    },
+    [setgalleryImages]
+  );
+
+  const messageStyle = { textAlign: "center", padding: "1rem" }; // retained for potential future states
+
+  if (!jobId) {
+    return (
+      <div aria-label="media gallery unavailable" style={{ position: "relative", minHeight: 80 }}>
+        <div style={messageStyle}>No job selected.</div>
+      </div>
+    );
+  }
 
   return (
-    <div className="clearfix">
-      <Gallery
-        images={galleryImages}
-        onSelect={(index) => {
-          setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
-        }}
-      />
+    <div
+      className="clearfix"
+      style={{ position: "relative", minHeight: 80 }}
+      data-jobid={jobId}
+      aria-label={`media gallery for job ${jobId}`}
+    >
+      {isLoading && galleryImages.length === 0 && (
+        <div className="local-gallery-loading" style={messageStyle} role="status" aria-live="polite">
+          <LoadingSpinner />
+        </div>
+      )}
+      {galleryImages.length > 0 && (
+        <LocalMediaGrid images={galleryImages} minColumns={4} context={context} onToggle={handleToggle} />
+      )}
+      {galleryImages.length > 0 && (
+        <div style={{ fontSize: 10, color: "#888", marginTop: 4 }} aria-live="off">
+          {`${t("general.labels.media")}: ${galleryImages.length}`}
+        </div>
+      )}
     </div>
   );
 }

client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+/**
+ * LocalMediaGrid
+ * Lightweight replacement for react-grid-gallery inside the chat popover.
+ * Props:
+ *  - images: Array<{ src, fullsize, filename?, isSelected? }>
+ *  - onToggle(index)
+ */
+export function LocalMediaGrid({
+  images,
+  onToggle,
+  thumbSize = 100,
+  gap = 8,
+  minColumns = 3,
+  maxColumns = 12,
+  context = "default"
+}) {
+  const containerRef = useRef(null);
+  const [cols, setCols] = useState(() => {
+    // Pre-calc initial columns to stabilize layout before images render
+    const count = images.length;
+    if (count === 0) return minColumns; // reserve minimal structure
+    if (count === 1 && context === "chat") return 1;
+    return Math.min(maxColumns, Math.max(minColumns, count));
+  });
+  const [justifyMode, setJustifyMode] = useState("start");
+  const [distributeExtra, setDistributeExtra] = useState(false);
+  const [loadedMap, setLoadedMap] = useState(() => new Map()); // filename -> boolean loaded
+
+  const handleImageLoad = useCallback((key) => {
+    setLoadedMap((prev) => {
+      if (prev.get(key)) return prev; // already loaded
+      const next = new Map(prev);
+      next.set(key, true);
+      return next;
+    });
+  }, []);
+
+  // Dynamically compute columns for all contexts to avoid auto-fit stretching gaps in email overlay
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const compute = () => {
+      // For non-chat (email / default) we rely on CSS auto-fill; only chat needs explicit column calc & distribution logic.
+      if (context !== "chat") {
+        setCols(images.length || 0); // retain count for ARIA semantics; not used for template when non-chat.
+        setDistributeExtra(false);
+        return;
+      }
+      const width = el.clientWidth;
+      if (!width) return;
+      const perCol = thumbSize + gap; // track + gap space
+      const fitCols = Math.max(1, Math.floor((width + gap) / perCol));
+      // base desired columns: up to how many images we have and how many fit
+      let finalCols = Math.min(images.length || 1, fitCols, maxColumns);
+      // enforce minimum columns to reserve layout skeleton (except when fewer images)
+      if (finalCols < minColumns && images.length >= minColumns) {
+        finalCols = Math.min(fitCols, minColumns);
+      }
+      // chat-specific clamp
+      if (context === "chat") {
+        finalCols = Math.min(finalCols, 4);
+      }
+      if (finalCols < 1) finalCols = 1;
+      setCols(finalCols);
+      setJustifyMode("start");
+
+      // Determine if there is leftover horizontal space that can't fit another column.
+      // Only distribute when we're at the maximum allowed columns for the context and images exceed or meet that count.
+      const contextMax = context === "chat" ? 4 : maxColumns;
+      const baseWidthNeeded = finalCols * thumbSize + (finalCols - 1) * gap;
+      const leftover = width - baseWidthNeeded;
+      const atMaxColumns = finalCols === contextMax && images.length >= finalCols;
+      // leftover must be positive but less than space needed for an additional column (perCol)
+      if (atMaxColumns && leftover > 0 && leftover < perCol) {
+        setDistributeExtra(true);
+      } else {
+        setDistributeExtra(false);
+      }
+    };
+    compute();
+    const ro = new ResizeObserver(() => compute());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [images.length, thumbSize, gap, minColumns, maxColumns, context]);
+
+  const gridTemplateColumns = useMemo(() => {
+    if (context === "chat") {
+      if (distributeExtra) {
+        return `repeat(${cols}, minmax(${thumbSize}px, 1fr))`;
+      }
+      return `repeat(${cols}, ${thumbSize}px)`;
+    }
+    // Non-chat contexts: allow browser to auto-fill columns; fixed min (thumbSize) ensures squares; tracks expand to distribute remaining space.
+    return `repeat(auto-fill, minmax(${thumbSize}px, 1fr))`;
+  }, [cols, thumbSize, distributeExtra, context]);
+  const stableWidth = undefined; // no fixed width
+
+  const handleKeyDown = useCallback(
+    (e, idx) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onToggle(idx);
+      }
+    },
+    [onToggle]
+  );
+
+  return (
+    <div
+      className="local-media-grid"
+      style={{
+        display: "grid",
+        gridTemplateColumns,
+        gap,
+        maxHeight: 420,
+        overflowY: "auto",
+        overflowX: "hidden",
+        padding: 4,
+        justifyContent: justifyMode,
+        width: stableWidth
+      }}
+      ref={containerRef}
+      role="list"
+      aria-label="media thumbnails"
+    >
+      {images.map((img, idx) => (
+        <div
+          key={img.filename || idx}
+          role="listitem"
+          tabIndex={0}
+          aria-label={img.filename || `image ${idx + 1}`}
+          onClick={() => onToggle(idx)}
+          onKeyDown={(e) => handleKeyDown(e, idx)}
+          style={{
+            position: "relative",
+            border: img.isSelected ? "2px solid #1890ff" : "1px solid #ccc",
+            outline: "none",
+            borderRadius: 4,
+            cursor: "pointer",
+            background: "#fafafa",
+            width: thumbSize,
+            height: thumbSize,
+            overflow: "hidden",
+            boxSizing: "border-box"
+          }}
+        >
+          {(() => {
+            const key = img.filename || idx;
+            const loaded = loadedMap.get(key) === true;
+            return (
+              <>
+                {!loaded && (
+                  <div
+                    aria-hidden="true"
+                    style={{
+                      position: "absolute",
+                      inset: 0,
+                      background: "#f0f0f0",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 10,
+                      color: "#bbb"
+                    }}
+                  >
+                    {/* simple skeleton; no shimmer to reduce cost */}…
+                  </div>
+                )}
+                <img
+                  src={img.src}
+                  alt={img.filename || img.caption || "thumbnail"}
+                  loading="lazy"
+                  onLoad={() => handleImageLoad(key)}
+                  style={{
+                    width: thumbSize,
+                    height: thumbSize,
+                    objectFit: "cover",
+                    display: "block",
+                    borderRadius: 4,
+                    opacity: loaded ? 1 : 0,
+                    transition: "opacity .25s ease"
+                  }}
+                />
+              </>
+            );
+          })()}
+          {img.isSelected && (
+            <div
+              aria-hidden="true"
+              style={{
+                position: "absolute",
+                inset: 0,
+                background: "rgba(24,144,255,0.45)",
+                borderRadius: 4
+              }}
+            />
+          )}
+        </div>
+      ))}
+      {/* No placeholders needed; layout uses auto-fit for non-chat or fixed columns for chat */}
+    </div>
+  );
+}
+
+export default LocalMediaGrid;

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -64,7 +64,11 @@ export default function JobsFindModalComponent({
       width: "12%",
       ellipsis: true,
       render: (text, record) => {
-        return record.ownr_ph1 ? <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter> : t("general.labels.unknown");
+        return record.ownr_ph1 ? (
+          <PhoneFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneFormatter>
+        ) : (
+          t("general.labels.unknown")
+        );
       }
     },
     {
@@ -74,7 +78,11 @@ export default function JobsFindModalComponent({
       width: "12%",
       ellipsis: true,
       render: (text, record) => {
-        return record.ownr_ph2 ? <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter> : t("general.labels.unknown");
+        return record.ownr_ph2 ? (
+          <PhoneFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneFormatter>
+        ) : (
+          t("general.labels.unknown")
+        );
       }
     },
     {
@@ -245,7 +253,11 @@ export default function JobsFindModalComponent({
         >
           {t("jobs.labels.override_header")}
         </Checkbox>
-        <Checkbox checked={partsQueueToggle} onChange={(e) => setPartsQueueToggle(e.target.checked)} id="parts_queue_toggle">
+        <Checkbox
+          checked={partsQueueToggle}
+          onChange={(e) => setPartsQueueToggle(e.target.checked)}
+          id="parts_queue_toggle"
+        >
           {t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
         </Checkbox>
         <Checkbox

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

@@ -15,6 +15,7 @@ import { alphaSort, statusSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -71,14 +72,14 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
       ellipsis: true,
-      render: (text, record) => <StartChatButton phone={record.ownr_ph1} jobid={record.id} />
+      render: (text, record) => <StartChatButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.id} />
     },
     {
       title: t("jobs.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
       ellipsis: true,
-      render: (text, record) => <StartChatButton phone={record.ownr_ph2} jobid={record.id} />
+      render: (text, record) => <StartChatButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.id} />
     },
     {
       title: t("jobs.fields.status"),
@@ -177,6 +178,7 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     }
     setFilter(filters);
     history({ search: queryString.stringify(search) });
+    logImEXEvent("jobs_all_list_sort_filter", { pagination, filters, sorter });
   };
 
   useEffect(() => {

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

@@ -17,6 +17,7 @@ import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import { OwnerNameDisplayFunction } from "./../owner-name-display/owner-name-display.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -67,6 +68,7 @@ export function JobsList({ bodyshop }) {
     : [];
 
   const handleTableChange = (pagination, filters, sorter) => {
+    logImEXEvent("jobs_list_sort_filter", { pagination, filters, sorter });
     setState({ ...state, sortedInfo: sorter });
     setFilter(filters);
   };
@@ -137,7 +139,7 @@ export function JobsList({ bodyshop }) {
       key: "ownr_ph1",
       ellipsis: true,
       responsive: ["md"],
-      render: (text, record) => <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
+      render: (text, record) => <ChatOpenButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.id} />
     },
     {
       title: t("jobs.fields.ownr_ph2"),
@@ -145,7 +147,7 @@ export function JobsList({ bodyshop }) {
       key: "ownr_ph2",
       ellipsis: true,
       responsive: ["md"],
-      render: (text, record) => <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
+      render: (text, record) => <ChatOpenButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.id} />
     },
 
     {
@@ -164,7 +166,7 @@ export function JobsList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Status*",
+                text: s || t("dashboard.errors.status"),
                 value: [s]
               };
             })

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

@@ -140,7 +140,7 @@ export function JobsReadyList({ bodyshop }) {
       key: "ownr_ph1",
       ellipsis: true,
       responsive: ["md"],
-      render: (text, record) => <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
+      render: (text, record) => <ChatOpenButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.id} />
     },
     {
       title: t("jobs.fields.ownr_ph2"),
@@ -148,7 +148,7 @@ export function JobsReadyList({ bodyshop }) {
       key: "ownr_ph2",
       ellipsis: true,
       responsive: ["md"],
-      render: (text, record) => <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
+      render: (text, record) => <ChatOpenButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.id} />
     },
     {
       title: t("jobs.fields.status"),
@@ -165,7 +165,7 @@ export function JobsReadyList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Status*",
+                text: s || t("dashboard.errors.status"),
                 value: [s]
               };
             })

client/src/components/notification-center/notification-center.container.jsx

@@ -39,11 +39,15 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
     return showUnreadOnly ? { ...baseWhereClause, read: { _is_null: true } } : baseWhereClause;
   }, [baseWhereClause, showUnreadOnly]);
 
+  // before you call useQuery, compute skip once so you can reuse it
+  const skipQuery = !userAssociationId || !isEmployee;
+
   const {
     data,
     fetchMore,
     loading: queryLoading,
-    refetch
+    refetch,
+    error
   } = useQuery(GET_NOTIFICATIONS, {
     variables: {
       limit: INITIAL_NOTIFICATIONS,
@@ -52,14 +56,26 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
     },
     fetchPolicy: "cache-and-network",
     notifyOnNetworkStatusChange: true,
+    errorPolicy: "all",
     pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
-    skip: !userAssociationId || !isEmployee,
-    onError: (err) => {
-      console.error(`Error polling Notifications: ${err?.message || ""}`);
-      setTimeout(() => refetch(), day.duration(2, "seconds").asMilliseconds());
-    }
+    skip: skipQuery
   });
 
+  // Replace onError with a side-effect that reacts to the hook’s `error`
+  useEffect(() => {
+    if (!error || skipQuery) return;
+
+    console.error(`Error polling Notifications: ${error?.message || ""}`);
+
+    const t = setTimeout(() => {
+      // Guard: if component unmounted or query now skipped, do nothing
+      if (!skipQuery) {
+        refetch().catch((e) => console.error("Refetch failed:", e?.message || e));
+      }
+    }, day.duration(2, "seconds").asMilliseconds());
+
+    return () => clearTimeout(t);
+  }, [error, refetch, skipQuery]);
   useEffect(() => {
     const handleClickOutside = (event) => {
       // Prevent open + close behavior from the header

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

@@ -1,4 +1,4 @@
-import { Form, Input, Tooltip } from "antd";
+import { Form, Input, Select, Tooltip } from "antd";
 import { CloseCircleFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
@@ -10,6 +10,12 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
   const { t } = useTranslation();
   const { getFieldValue } = form;
 
+  const PHONE_TYPE_OPTIONS = [
+    { label: t("owners.labels.home"), value: "Home" },
+    { label: t("owners.labels.work"), value: "Work" },
+    { label: t("owners.labels.cell"), value: "Cell" }
+  ];
+
   return (
     <div>
       <FormFieldsChanged form={form} />
@@ -30,6 +36,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
           <Input disabled />
         </Form.Item>
       </LayoutFormRow>
+
       <LayoutFormRow header={t("owners.forms.address")}>
         <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">
           <Input />
@@ -50,6 +57,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
           <Input />
         </Form.Item>
       </LayoutFormRow>
+
       <LayoutFormRow header={t("owners.forms.contact")}>
         <Form.Item
           label={t("owners.fields.ownr_ea")}
@@ -63,6 +71,8 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
         >
           <FormItemEmail email={getFieldValue("ownr_ea")} />
         </Form.Item>
+
+        {/* Phone 1 + Type + Opt-out icon */}
         <Form.Item label={t("owners.fields.ownr_ph1")} style={{ marginBottom: 0 }}>
           <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
             <Form.Item
@@ -72,6 +82,11 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
             >
               <Input style={{ flex: 1, minWidth: "150px" }} />
             </Form.Item>
+
+            <Form.Item name="ownr_ph1_ty" noStyle>
+              <Select allowClear placeholder="Type" options={PHONE_TYPE_OPTIONS} style={{ width: 110 }} />
+            </Form.Item>
+
             {isPhone1OptedOut && (
               <Tooltip title={t("consent.text_body")}>
                 <CloseCircleFilled
@@ -88,6 +103,8 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
             )}
           </div>
         </Form.Item>
+
+        {/* Phone 2 + Type + Opt-out icon */}
         <Form.Item label={t("owners.fields.ownr_ph2")} style={{ marginBottom: 0 }}>
           <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
             <Form.Item
@@ -97,6 +114,11 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
             >
               <Input style={{ flex: 1, minWidth: "150px" }} />
             </Form.Item>
+
+            <Form.Item name="ownr_ph2_ty" noStyle>
+              <Select allowClear placeholder="Type" options={PHONE_TYPE_OPTIONS} style={{ width: 110 }} />
+            </Form.Item>
+
             {isPhone2OptedOut && (
               <Tooltip title={t("consent.text_body")}>
                 <CloseCircleFilled
@@ -113,6 +135,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
             )}
           </div>
         </Form.Item>
+
         <Form.Item label={t("owners.fields.preferred_contact")} name="preferred_contact">
           <Input />
         </Form.Item>
@@ -120,6 +143,7 @@ export default function OwnerDetailFormComponent({ form, isPhone1OptedOut, isPho
           <Input />
         </Form.Item>
       </LayoutFormRow>
+
       <Form.Item label={t("owners.fields.note")} name="note">
         <Input.TextArea rows={4} />
       </Form.Item>

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,17 +1,18 @@
-import { Button, Form, Popconfirm } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { useApolloClient, useMutation } from "@apollo/client";
+import { Button, Form, Popconfirm } from "antd";
+import { phone } from "phone"; // Import phone utility for formatting
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
 import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors"; // Adjust path
 import { phoneNumberOptOutService } from "../../utils/phoneOptOutService.js"; // Adjust path
 import OwnerDetailFormComponent from "./owner-detail-form.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { phone } from "phone"; // Import phone utility for formatting
 
 // Connect to Redux to access bodyshop
 const mapStateToProps = createStructuredSelector({
@@ -55,6 +56,7 @@ function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
 
   const handleDelete = async () => {
     setLoading(true);
+    logImEXEvent("owner_delete", {});
     try {
       const result = await deleteOwner({
         variables: { id: owner.id }
@@ -84,6 +86,7 @@ function OwnerDetailFormContainer({ owner, refetch, bodyshop }) {
 
   const handleFinish = async (values) => {
     setLoading(true);
+    logImEXEvent("owner_update", {});
     try {
       const result = await updateOwner({
         variables: { ownerId: owner.id, owner: values }

client/src/components/owner-detail-update-jobs/owner-detail-update-jobs.component.jsx

@@ -25,8 +25,10 @@ export default function OwnerDetailUpdateJobsComponent({ owner, selectedJobs, di
           ownr_ea: owner["ownr_ea"],
           ownr_fn: owner["ownr_fn"],
           ownr_ph1: owner["ownr_ph1"],
+          ownr_ph1_ty: owner["ownr_ph1_ty"],
           ownr_ln: owner["ownr_ln"],
           ownr_ph2: owner["ownr_ph2"],
+          ownr_ph2_ty: owner["ownr_ph2_ty"],
           ownr_st: owner["ownr_st"],
           ownr_title: owner["ownr_title"],
           ownr_zip: owner["ownr_zip"]

client/src/components/owner-find-modal/owner-find-modal.component.jsx

@@ -47,13 +47,13 @@ export default function OwnerFindModalComponent({
       title: t("owners.fields.ownr_ph1"),
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
-      render: (text, record) => <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
+      render: (text, record) => <PhoneFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneFormatter>
     },
     {
       title: t("owners.fields.ownr_ph2"),
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
-      render: (text, record) => <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>
+      render: (text, record) => <PhoneFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneFormatter>
     },
     {
       title: t("owners.fields.note"),

client/src/components/owner-tag-popover/owner-tag-popover.component.jsx

@@ -15,10 +15,10 @@ export default function OwnerTagPopoverComponent({ job }) {
               <OwnerNameDisplay ownerObject={job} />
             </Descriptions.Item>
             <Descriptions.Item key="2" label={t("jobs.fields.ownr_ph1")}>
-              <PhoneFormatter>{job.ownr_ph1 || ""}</PhoneFormatter>
+              <PhoneFormatter type={job.ownr_ph1_ty}>{job.ownr_ph1 || ""}</PhoneFormatter>
             </Descriptions.Item>
             <Descriptions.Item key="22" label={t("jobs.fields.ownr_ph2")}>
-              <PhoneFormatter>{job.ownr_ph2 || ""}</PhoneFormatter>
+              <PhoneFormatter type={job.ownr_ph2_ty}>{job.ownr_ph2 || ""}</PhoneFormatter>
             </Descriptions.Item>
             <Descriptions.Item key="3" label={t("owners.fields.address")}>
               {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
@@ -36,13 +36,10 @@ export default function OwnerTagPopoverComponent({ job }) {
               <OwnerNameDisplay ownerObject={job.owner} />
             </Descriptions.Item>
             <Descriptions.Item key="2" label={t("jobs.fields.ownr_ph1")}>
-              <PhoneFormatter>{job.owner.ownr_ph1 || ""}</PhoneFormatter>
-            </Descriptions.Item>
-            <Descriptions.Item key="22" label={t("jobs.fields.ownr_ph2")}>
-              <PhoneFormatter>{job.owner.ownr_ph2 || ""}</PhoneFormatter>
+              <PhoneFormatter type={job.owner.ownr_ph1_ty}>{job.owner.ownr_ph1 || ""}</PhoneFormatter>
             </Descriptions.Item>
             <Descriptions.Item key="2" label={t("jobs.fields.ownr_ph2")}>
-              <PhoneFormatter>{job.owner.ownr_ph2 || ""}</PhoneFormatter>
+              <PhoneFormatter type={job.owner.ownr_ph2_ty}>{job.owner.ownr_ph2 || ""}</PhoneFormatter>
             </Descriptions.Item>
             <Descriptions.Item key="3" label={t("owners.fields.address")}>
               {`${job.owner.ownr_addr1 || ""} ${job.owner.ownr_addr2 || ""} ${

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

@@ -39,7 +39,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
       dataIndex: "ownr_ph1",
       key: "ownr_ph1",
       render: (text, record) => {
-        return <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>;
+        return <PhoneFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneFormatter>;
       }
     },
     {
@@ -47,7 +47,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
       dataIndex: "ownr_ph2",
       key: "ownr_ph2",
       render: (text, record) => {
-        return <PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>;
+        return <PhoneFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneFormatter>;
       }
     },
     {

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

@@ -1,7 +1,7 @@
 import { DownOutlined } from "@ant-design/icons";
 import { Dropdown, InputNumber, Space } from "antd";
 import { useTranslation } from "react-i18next";
-
+import { logImEXEvent } from "../../firebase/firebase.utils";
 export default function PartsOrderModalPriceChange({ form, field }) {
   const { t } = useTranslation();
   const menu = {
@@ -63,6 +63,7 @@ export default function PartsOrderModalPriceChange({ form, field }) {
       }
     ],
     onClick: ({ key }) => {
+      logImEXEvent("parts_order_manual_discount", {});
       if (key === "custom") return;
       const values = form.getFieldsValue();
       const { parts_order_lines } = values;

client/src/components/parts-queue-card/parts-queue-card.component.jsx

@@ -8,6 +8,7 @@ import AlertComponent from "../alert/alert.component";
 import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import PartsQueueJobLinesComponent from "./parts-queue-job-lines.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function PartsQueueDetailCard() {
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
@@ -37,6 +38,8 @@ export default function PartsQueueDetailCard() {
   const { t } = useTranslation();
   const handleDrawerClose = () => {
     delete searchParams.selected;
+    logImEXEvent("parts_queue_drawer", {});
+
     history({
       search: queryString.stringify({
         ...searchParams

client/src/components/parts-queue-card/parts-queue-job-lines.component.jsx

@@ -145,7 +145,7 @@ export function PartsQueueJobLinesComponent({ loading, jobLines }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Status*",
+                text: s || t("dashboard.errors.status"),
                 value: [s]
               };
             })) ||

client/src/components/parts-queue-list/parts-queue.list.component.jsx

@@ -16,10 +16,11 @@ import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import AlertComponent from "../alert/alert.component";
-import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 import JobRemoveFromPartsQueue from "../job-remove-from-parst-queue/job-remove-from-parts-queue.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import JobPartsReceived from "../job-parts-received/job-parts-received.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -73,6 +74,7 @@ export function PartsQueueListComponent({ bodyshop }) {
     }
     setFilter(filters);
     history({ search: queryString.stringify(searchParams) });
+    logImEXEvent("parts_queue_sort_filter", { pagination, filters, sorter });
   };
 
   const handleOnRowClick = (record) => {
@@ -169,7 +171,7 @@ export function PartsQueueListComponent({ bodyshop }) {
       filters:
         bodyshop.md_ro_statuses.active_statuses.map((s) => {
           return {
-            text: s || "No Status*",
+            text: s || t("dashboard.errors.status"),
             value: [s]
           };
         }) || [],
@@ -233,7 +235,9 @@ export function PartsQueueListComponent({ bodyshop }) {
       title: t("jobs.fields.partsstatus"),
       dataIndex: "partsstatus",
       key: "partsstatus",
-      render: (text, record) => <JobPartsQueueCount parts={record.joblines_status} />
+      render: (text, record) => (
+        <JobPartsReceived parts={record.joblines_status} displayMode="full" popoverPlacement="topLeft" />
+      )
     },
     {
       title: t("jobs.fields.comment"),

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

@@ -10,6 +10,7 @@ import {
 } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -26,10 +27,12 @@ export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading })
 
   const toggleAlertFilter = () => {
     setFilter({ ...filter, alert: !filter.alert });
+    logImEXEvent("visual_board_filter_alert", {});
   };
 
   const toggleUnassignedFilter = () => {
     setFilter({ ...filter, unassigned: !filter.unassigned });
+    logImEXEvent("visual_board_filter_unassigned", {});
   };
 
   return (
@@ -40,6 +43,7 @@ export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading })
         placeholder={t("general.labels.search")}
         onChange={(e) => {
           setFilter({ ...filter, search: e.target.value });
+          logImEXEvent("visual_board_filter_search", { search: e.target.value });
         }}
       />
       <EmployeeSearchSelectComponent
@@ -47,7 +51,10 @@ export function ProductionBoardFilters({ bodyshop, filter, setFilter, loading })
         options={bodyshop.employees.filter((e) => e.active)}
         value={filter.employeeId}
         placeholder={t("production.labels.employeesearch")}
-        onChange={(emp) => setFilter({ ...filter, employeeId: emp })}
+        onChange={(emp) => {
+          setFilter({ ...filter, employeeId: emp });
+          logImEXEvent("visual_board_filter_alert", { employeeId: emp });
+        }}
         allowClear
       />
       <Button

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

@@ -19,6 +19,7 @@ import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.c
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 import { PiMicrosoftTeamsLogo } from "react-icons/pi";
+import ProductionListColumnPartsReceived from "../production-list-columns/production-list-columns.partsreceived.component";
 
 const cardColor = (ssbuckets, totalHrs) => {
   const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
@@ -312,6 +313,20 @@ const TasksToolTip = ({ metadata, cardSettings, t }) =>
     </Col>
   );
 
+const PartsReceivedComponent = ({ metadata, cardSettings, card }) =>
+  cardSettings?.partsreceived && (
+    <Col span={24} style={{ textAlign: "center" }}>
+      <ProductionListColumnPartsReceived
+        displayMode="full"
+        popoverPlacement="topLeft"
+        record={{
+          ...metadata,
+          id: card?.id,
+          refetch: card?.refetch
+        }}
+      />
+    </Col>
+  );
 export default function ProductionBoardCard({ technician, card, bodyshop, cardSettings }) {
   const { t } = useTranslation();
   const { metadata } = card;
@@ -411,6 +426,7 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
       <SubletsComponent metadata={metadata} cardSettings={cardSettings} />
       <ProductionNoteComponent metadata={metadata} cardSettings={cardSettings} card={card} />
       <PartsStatusComponent metadata={metadata} cardSettings={cardSettings} />
+      <PartsReceivedComponent metadata={metadata} cardSettings={cardSettings} card={card} />
     </Row>
   );
 

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

@@ -18,7 +18,8 @@ const InformationSettings = ({ t }) => (
         "partsstatus",
         "estimator",
         "subtotal",
-        "tasks"
+        "tasks",
+        "partsreceived"
       ].map((item) => (
         <Col xs={24} sm={12} md={8} lg={6} key={item}>
           <Form.Item name={item} valuePropName="checked">

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

@@ -74,6 +74,7 @@ const defaultKanbanSettings = {
   cardSize: "small",
   model_info: true,
   kiosk: false,
+  partsreceived: false,
   totalHrs: true,
   totalAmountInProduction: false,
   totalLAB: true,