feature/IO-3497-Ant-Design-v5-to-v6 - Checkpoint (recharts)

Master AIO

.gitignore

@@ -114,7 +114,7 @@ firebase/.env
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
 logs/oAuthClient-log.log
-
+logs/*
 
 .node-persist/**
 

Fortellis Notes.md

@@ -0,0 +1,346 @@
+Fortellis Notes
+
+Subscription ID
+
+- Appears to give us a list of all dealerships we have access to, and `apiDmsInfo` contains the integrations that are enabled for that dealership.
+- Will likely need to filter based on the DMS ID or something?
+- Should store the whole subscription object. Contains department information needed in subsequent calls.
+
+Department ID
+
+- May have multiple departments. Appears that financial stuff goes to Accounting, History will go to Service.
+- TODO: How do we handle the multiple departments that may come up.
+
+###Internal Questions
+
+* Overview of the redis storing mechanism to cache this data. 
+* 
+
+# GL Wip Posting
+
+## Org Helper Return Data
+
+```json
+[
+  {
+    "acctgLgnID": "DEVWB-A",
+    "applCode": "V",
+    "coID": "77",
+    "companyName": "TEST SYS C187092 DEVWB",
+    "lgnDesc": "DEV WRITE BACK VMS",
+    "logon": "DEVWB-V"
+  },
+  {
+    "acctgLgnID": "DEVWB-A",
+    "applCode": "F",
+    "coID": "77",
+    "companyName": "TEST SYS C187092 DEVWB",
+    "lgnDesc": "DEV WRITE BACK F&I SALES",
+    "logon": "DEVWB-FI"
+  },
+  {
+    "acctgLgnID": "DEVWB-A",
+    "applCode": "CS",
+    "coID": "77",
+    "companyName": "TEST SYS C187092 DEVWB",
+    "lgnDesc": "DEV WRITE BACK SERVICE",
+    "logon": "DEVWB-S"
+  },
+  {
+    "acctgLgnID": "DEVWB-A",
+    "applCode": "A",
+    "coID": "77",
+    "companyName": "TEST SYS C187092 DEVWB",
+    "lgnDesc": "DEV WRITE BACK ACCTG",
+    "logon": "DEVWB-A"
+  },
+  {
+    "acctgLgnID": "DEVWB-A",
+    "applCode": "SL",
+    "coID": "77",
+    "companyName": "TEST SYS C187092 DEVWB",
+    "lgnDesc": "DEV WRTIE BACK SLS MGMT",
+    "logon": "DEVWB-SL"
+  },
+  {
+    "acctgLgnID": "DEVWB-A",
+    "applCode": "O",
+    "coID": "77",
+    "companyName": "TEST SYS C187092 DEVWB",
+    "lgnDesc": "DEV WRITE BACK PARTS",
+    "logon": "DEVWB-I"
+  }
+]
+```
+
+## Journal Helper Return Data
+
+```json
+[
+  {
+    "companyNo": "77",
+    "jrnlID": "32",
+    "jrnlName": "PARTS SALES",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "4",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "92",
+    "jrnlName": "YTD ADJUSTMENTS",
+    "jrnlType": "Y",
+    "intercoFlag": "0",
+    "defaultDocType": "3",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "12",
+    "jrnlName": "FLEET SALES",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "9",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "57",
+    "jrnlName": "CASH RECEIPTS (OPEN-ITEM)",
+    "jrnlType": "R",
+    "intercoFlag": "0",
+    "defaultDocType": "1",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "93",
+    "jrnlName": "SET UP HISTORY",
+    "jrnlType": "H",
+    "intercoFlag": "0",
+    "defaultDocType": "10",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "88",
+    "jrnlName": "F/S STATISCAL DATA",
+    "jrnlType": "F",
+    "intercoFlag": "0",
+    "defaultDocType": "10",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "58",
+    "jrnlName": "WARRANTY CREDITS",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "3",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "FC",
+    "jrnlName": "FINANCE CHARGE",
+    "jrnlType": "A",
+    "intercoFlag": "0",
+    "defaultDocType": "12",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "94",
+    "jrnlName": "SET UP SCHEDULES",
+    "jrnlType": "C",
+    "intercoFlag": "0",
+    "defaultDocType": "3",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "95",
+    "jrnlName": "SET UP GENERAL LEDGER",
+    "jrnlType": "B",
+    "intercoFlag": "0",
+    "defaultDocType": "3",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "20",
+    "jrnlName": "USED VEHICLE SALES",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "9",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "60",
+    "jrnlName": "CASH DISBURSEMENTS",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "2",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "30",
+    "jrnlName": "SERVICE SALES",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "7",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "40",
+    "jrnlName": "PAYROLL",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "11",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "15",
+    "jrnlName": "DEALER TRADES",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "9",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "70",
+    "jrnlName": "NEW VEHICLE PURCHASES",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "8",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "25",
+    "jrnlName": "USED WHOLESALE",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "9",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "75",
+    "jrnlName": "GENERAL PURCHASES",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "5",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "10",
+    "jrnlName": "NEW VEHICLE SALES",
+    "jrnlType": "S",
+    "intercoFlag": "0",
+    "defaultDocType": "9",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "80",
+    "jrnlName": "GENERAL JOURNAL",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "3",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "11",
+    "jrnlName": "WORK IN PROGRESS",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "10",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "56",
+    "jrnlName": "CASH RECEIPTS (BALANCE FWD)",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "1",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "81",
+    "jrnlName": "STANDARD ENTRIES",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "6",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "51",
+    "jrnlName": "CASH RECEIPTS JOURNAL - EFT",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "10",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "61",
+    "jrnlName": "CASH DISBURSMENTS -EFT",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "10",
+    "errCode": "",
+    "errMsg": ""
+  },
+  {
+    "companyNo": "77",
+    "jrnlID": "71",
+    "jrnlName": "USED VEHICLE PURCHASES",
+    "jrnlType": "G",
+    "intercoFlag": "0",
+    "defaultDocType": "8",
+    "errCode": "",
+    "errMsg": ""
+  }
+]
+```
+
+# Feedback
+
+- Receiving bad request errors, with no details. API errors page doesn't indicate what's wrong for certain types of error codes.
+- API Error page works on a several minute delay.

_reference/REACT_GRID_LAYOUT_MIGRATION.md

@@ -0,0 +1,251 @@
+# React Grid Layout Migration Guide
+
+## Current Status: Legacy API (v2.2.2)
+
+### What Changed
+- **Package Version**: 1.3.4 → 2.2.2
+- **API Strategy**: Using legacy compatibility layer
+
+### Migration Completed ✅
+
+#### Changes Made:
+```javascript
+// Before (v1.3.4):
+import { Responsive, WidthProvider } from "react-grid-layout";
+
+// After (v2.2.2 with legacy API):
+import { Responsive, WidthProvider } from "react-grid-layout/legacy";
+```
+
+#### Files Updated:
+- `src/components/dashboard-grid/dashboard-grid.component.jsx`
+
+#### Why Legacy API?
+The v2.x release introduces a completely new hooks-based API with breaking changes. The legacy API provides 100% backward compatibility, allowing us to:
+- ✅ Get bug fixes and security updates
+- ✅ Maintain existing functionality without code rewrites
+- ✅ Plan migration to new API incrementally
+
+---
+
+## Future: Migration to New v2 API
+
+When ready to fully migrate to the modern v2 API, follow this guide:
+
+### Breaking Changes in v2
+
+1. **Width Provider Removed**
+   - Old: `WidthProvider(Responsive)`
+   - New: Use `useContainerWidth` hook
+
+2. **Props Restructured**
+   - Old: Flat props structure
+   - New: Grouped configs (`gridConfig`, `dragConfig`, `resizeConfig`)
+
+3. **Layout Prop Required**
+   - Old: Could use `data-grid` attribute
+   - New: Must provide `layout` prop explicitly
+
+4. **Compaction Changes**
+   - Old: `verticalCompact` prop
+   - New: `compactor` prop with pluggable algorithms
+
+### Migration Steps
+
+#### Step 1: Replace WidthProvider with useContainerWidth hook
+
+**Before:**
+```javascript
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
+
+return (
+  <ResponsiveReactGridLayout
+    className="layout"
+    breakpoints={GRID_BREAKPOINTS}
+    cols={GRID_COLS}
+    layouts={state.layouts}
+    onLayoutChange={handleLayoutChange}
+  >
+    {children}
+  </ResponsiveReactGridLayout>
+);
+```
+
+**After:**
+```javascript
+import ReactGridLayout, { useContainerWidth, verticalCompactor } from 'react-grid-layout';
+
+function DashboardGridComponent({ currentUser }) {
+  const { width, containerRef, mounted } = useContainerWidth();
+  
+  return (
+    <div ref={containerRef}>
+      {mounted && (
+        <ReactGridLayout
+          width={width}
+          layout={state.layout}
+          gridConfig={{
+            cols: 12,
+            rowHeight: 30,
+            margin: [10, 10]
+          }}
+          dragConfig={{
+            enabled: true,
+            handle: '.drag-handle' // optional
+          }}
+          resizeConfig={{
+            enabled: true
+          }}
+          compactor={verticalCompactor}
+          onLayoutChange={handleLayoutChange}
+        >
+          {children}
+        </ReactGridLayout>
+      )}
+    </div>
+  );
+}
+```
+
+#### Step 2: Update Responsive Layouts
+
+For responsive behavior, manage breakpoints manually:
+
+```javascript
+function DashboardGridComponent() {
+  const { width, containerRef, mounted } = useContainerWidth();
+  const [currentBreakpoint, setCurrentBreakpoint] = useState('lg');
+  
+  useEffect(() => {
+    if (width > 1200) setCurrentBreakpoint('lg');
+    else if (width > 996) setCurrentBreakpoint('md');
+    else if (width > 768) setCurrentBreakpoint('sm');
+    else if (width > 480) setCurrentBreakpoint('xs');
+    else setCurrentBreakpoint('xxs');
+  }, [width]);
+
+  const currentLayout = state.layouts[currentBreakpoint] || state.layout;
+  const currentCols = GRID_COLS[currentBreakpoint];
+
+  return (
+    <div ref={containerRef}>
+      {mounted && (
+        <ReactGridLayout
+          width={width}
+          layout={currentLayout}
+          gridConfig={{
+            cols: currentCols,
+            rowHeight: 30
+          }}
+          // ... other props
+        >
+          {children}
+        </ReactGridLayout>
+      )}
+    </div>
+  );
+}
+```
+
+#### Step 3: Update Child Components
+
+The `data-grid` attribute still works, but explicitly managing layout is preferred:
+
+**Before:**
+```javascript
+<div
+  key={item.i}
+  data-grid={{
+    ...item,
+    minH,
+    minW
+  }}
+>
+  {content}
+</div>
+```
+
+**After (Preferred):**
+```javascript
+// Manage layout in parent state
+const layout = state.items.map(item => ({
+  i: item.i,
+  x: item.x,
+  y: item.y,
+  w: item.w,
+  h: item.h,
+  minW: componentList[item.i]?.minW || 1,
+  minH: componentList[item.i]?.minH || 1
+}));
+
+// Children just need keys
+<div key={item.i}>
+  {content}
+</div>
+```
+
+#### Step 4: Update Styles (if needed)
+
+The CSS classes remain mostly the same, but check the new documentation for any changes.
+
+### Benefits of New API
+
+- 🚀 **Better Performance**: Optimized rendering with hooks
+- 📦 **TypeScript Support**: Full type definitions included
+- 🎯 **Better API**: More intuitive props organization
+- 🔧 **Extensibility**: Pluggable compactors and strategies
+- 📱 **Modern React**: Uses hooks pattern
+
+### Testing Checklist
+
+When migrating to new API:
+
+- [ ] Grid items render correctly
+- [ ] Drag functionality works
+- [ ] Resize functionality works  
+- [ ] Responsive breakpoints work
+- [ ] Layout persistence works
+- [ ] Add/remove components works
+- [ ] Min/max constraints respected
+- [ ] Performance is acceptable
+- [ ] No console errors or warnings
+
+### Resources
+
+- [React Grid Layout v2 Documentation](https://github.com/react-grid-layout/react-grid-layout)
+- [Migration Guide](https://www.npmjs.com/package/react-grid-layout)
+- [Examples](https://github.com/react-grid-layout/react-grid-layout/tree/master/examples)
+
+---
+
+## Current Implementation Notes
+
+### Component Structure
+- **File**: `src/components/dashboard-grid/dashboard-grid.component.jsx`
+- **Styles**: `src/components/dashboard-grid/dashboard-grid.styles.scss`
+- **Pattern**: Responsive grid with dynamic component loading
+
+### Key Features Used
+- ✅ Responsive layouts with breakpoints
+- ✅ Drag and drop
+- ✅ Resize handles
+- ✅ Layout persistence to database
+- ✅ Dynamic component add/remove
+- ✅ Min/max size constraints
+
+### Configuration
+```javascript
+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 };
+```
+
+### Performance Considerations
+- Layout changes debounced via database updates
+- Memoized dashboard queries to prevent re-fetches
+- Memoized menu items and layout keys
+
+---
+
+**Last Updated**: 2026-01-13  
+**Current Version**: react-grid-layout@2.2.2 (legacy API)  
+**Target Version**: react-grid-layout@2.2.2 (new API) - Future migration

_reference/partsManagement/PATCH_parts-management-provision.md

@@ -30,7 +30,7 @@ Send a JSON object with one or more of the following fields to update:
 - `email` (string, shop's email, not user email)
 - `timezone` (string)
 - `phone` (string)
-- `logo_img_path` (object, e.g. `{ src, width, height, headerMargin }`)
+- `logo_img_path` (string)
 
 Any fields not included in the request body will remain unchanged.
 
@@ -50,12 +50,7 @@ Content-Type: application/json
   "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
-  }
+  "logo_img_path": "https://example.com/logo.png"
 }
 ```
 

client/package.json

@@ -8,49 +8,49 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.25.2",
+    "@amplitude/analytics-browser": "^2.33.1",
     "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^3.13.9",
+    "@apollo/client": "^4.0.12",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@fingerprintjs/fingerprintjs": "^4.6.1",
-    "@firebase/analytics": "^0.10.17",
-    "@firebase/app": "^0.14.3",
-    "@firebase/auth": "^1.10.8",
-    "@firebase/firestore": "^4.9.2",
+    "@fingerprintjs/fingerprintjs": "^5.0.1",
+    "@firebase/analytics": "^0.10.19",
+    "@firebase/app": "^0.14.6",
+    "@firebase/auth": "^1.12.0",
+    "@firebase/firestore": "^4.9.3",
     "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.9.0",
-    "@sentry/cli": "^2.56.0",
-    "@sentry/react": "^9.43.0",
-    "@sentry/vite-plugin": "^4.3.0",
-    "@splitsoftware/splitio-react": "^2.5.0",
-    "@tanem/react-nprogress": "^5.0.53",
-    "antd": "^5.27.4",
-    "apollo-link-logger": "^2.0.1",
-    "apollo-link-sentry": "^4.4.0",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@sentry/cli": "^3.1.0",
+    "@sentry/react": "^10.33.0",
+    "@sentry/vite-plugin": "^4.6.1",
+    "@splitsoftware/splitio-react": "^2.6.1",
+    "@tanem/react-nprogress": "^5.0.56",
+    "antd": "^6.2.0",
+    "apollo-link-logger": "^3.0.0",
     "autosize": "^6.0.1",
-    "axios": "^1.12.2",
+    "axios": "^1.13.2",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.18",
-    "dayjs-business-days2": "^1.3.0",
+    "dayjs": "^1.11.19",
+    "dayjs-business-days2": "^1.3.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^17.2.3",
-    "env-cmd": "^10.1.0",
+    "env-cmd": "^11.0.0",
     "exifr": "^7.1.3",
-    "graphql": "^16.11.0",
-    "i18next": "^25.5.3",
+    "graphql": "^16.12.0",
+    "graphql-ws": "^6.0.6",
+    "i18next": "^25.7.4",
     "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.23",
+    "libphonenumber-js": "^1.12.34",
     "lightningcss": "^1.30.2",
-    "logrocket": "^9.0.2",
+    "logrocket": "^11.0.0",
     "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
-    "normalize-url": "^8.1.0",
+    "normalize-url": "^8.1.1",
     "object-hash": "^3.0.0",
-    "phone": "^3.1.67",
-    "posthog-js": "^1.271.0",
+    "phone": "^3.1.69",
+    "posthog-js": "^1.319.1",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
@@ -61,33 +61,33 @@
     "react-dom": "^18.3.1",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
-    "react-grid-layout": "1.3.4",
-    "react-i18next": "^15.7.3",
+    "react-grid-layout": "^2.2.2",
+    "react-i18next": "^16.5.2",
     "react-icons": "^5.5.0",
     "react-image-lightbox": "^5.1.4",
     "react-markdown": "^10.1.0",
     "react-number-format": "^5.4.3",
     "react-popopo": "^2.1.9",
-    "react-product-fruits": "^2.2.61",
+    "react-product-fruits": "^2.2.62",
     "react-redux": "^9.2.0",
-    "react-resizable": "^3.0.5",
+    "react-resizable": "^3.1.3",
     "react-router-dom": "^6.30.0",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.14.1",
-    "recharts": "^2.15.2",
+    "react-virtuoso": "^4.18.1",
+    "recharts": "^3.6.0",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.3.0",
+    "redux-saga": "^1.4.2",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.93.2",
-    "socket.io-client": "^4.8.1",
-    "styled-components": "^6.1.19",
-    "subscriptions-transport-ws": "^0.11.0",
+    "rxjs": "^7.8.2",
+    "sass": "^1.97.2",
+    "socket.io-client": "^4.8.3",
+    "styled-components": "^6.3.6",
     "use-memo-one": "^1.1.3",
     "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^5.1.0"
   },
   "scripts": {
     "postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'",
@@ -98,10 +98,10 @@
     "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
     "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview",
     "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview",
-    "build:test:imex": "env-cmd -f .env.test.imex npm run build",
-    "build:test:rome": "env-cmd -f .env.test.rome npm run build",
-    "build:production:imex": "env-cmd -f .env.production.imex npm run build",
-    "build:production:rome": "env-cmd -f .env.production.rome npm run build",
+    "build:test:imex": "env-cmd -f .env.test.imex -- npm run build",
+    "build:test:rome": "env-cmd -f .env.test.rome -- npm run build",
+    "build:production:imex": "env-cmd -f .env.production.imex -- npm run build",
+    "build:production:rome": "env-cmd -f .env.production.rome -- npm run build",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
     "eulaize": "node src/utils/eulaize.js",
     "test:unit": "vitest run",
@@ -135,37 +135,36 @@
   "devDependencies": {
     "@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.51.0",
+    "@babel/preset-react": "^7.28.5",
+    "@dotenvx/dotenvx": "^1.51.4",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.37.0",
-    "@playwright/test": "^1.56.0",
-    "@sentry/webpack-plugin": "^4.3.0",
+    "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.57.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@vitejs/plugin-react": "^4.6.0",
-    "browserslist": "^4.26.3",
+    "@testing-library/react": "^16.3.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "browserslist": "^4.28.1",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.6.2",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^15.15.0",
-    "jsdom": "^26.0.0",
-    "memfs": "^4.48.1",
+    "globals": "^17.0.0",
+    "jsdom": "^27.4.0",
+    "memfs": "^4.51.1",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.56.0",
+    "playwright": "^1.57.0",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^7.1.9",
-    "vite-plugin-babel": "^1.3.2",
+    "vite": "^7.3.1",
+    "vite-plugin-babel": "^1.4.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.24.0",
-    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^3.2.4",
-    "workbox-window": "^7.3.0"
+    "vitest": "^4.0.17",
+    "workbox-window": "^7.4.0"
   }
 }

client/src/App/App.container.jsx

@@ -1,4 +1,4 @@
-import { ApolloProvider } from "@apollo/client";
+import { ApolloProvider } from "@apollo/client/react";
 import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
@@ -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

@@ -138,7 +138,7 @@ export function App({
     );
   }
 
-  if (currentEula && !currentUser.eulaIsAccepted) {
+  if (!isPartsEntry && currentEula && !currentUser.eulaIsAccepted) {
     return <Eula />;
   }
 

client/src/App/App.styles.scss

@@ -1,3 +1,5 @@
+@use "react-big-calendar/lib/sass/styles" as rbc;
+
 :root {
   --table-stripe-bg: #f4f4f4; /* Light mode table stripe */
   --menu-divider-color: #74695c; /* Light mode menu divider */
@@ -211,9 +213,6 @@
   --svg-background: #FFF; /* Dark mode SVG background */
 }
 
-// Global Styles
-@import "react-big-calendar/lib/sass/styles";
-
 .ant-menu-item-divider {
   border-bottom: 1px solid var(--menu-divider-color) !important;
 }
@@ -426,6 +425,24 @@
   }
 }
 
+.dms-equal-height-col {
+  display: flex; // make the Col a flex container
+}
+
+/* If the direct child is an AntD Card, make it fill the column */
+.dms-equal-height-col > .ant-card {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Optional: if you want the card body to fill vertically too */
+.dms-equal-height-col > .ant-card .ant-card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 //.rbc-time-header-gutter {
 //  padding: 0;
-//} 
+//}

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

@@ -176,7 +176,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -189,7 +189,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -180,7 +180,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
     <Card
       extra={
         <Space wrap>
-          {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
+          {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && !bodyshop.rr_dealerid && (
             <>
               <JobMarkSelectedExported
                 jobIds={selectedJobs}
@@ -198,7 +198,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
               />
             </>
           )}
-          {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
+          {bodyshop.accountingconfig?.qbo && <QboAuthorizeComponent />}
           <Input.Search
             value={state.search}
             onChange={handleSearch}
@@ -211,7 +211,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/alert/alert.component.test.jsx

@@ -4,27 +4,27 @@ import AlertComponent from "./alert.component";
 
 describe("AlertComponent", () => {
   it("renders with default props", () => {
-    render(<AlertComponent message="Default Alert" />);
+    render(<AlertComponent title="Default Alert" />);
     expect(screen.getByText("Default Alert")).toBeInTheDocument();
     expect(screen.getByRole("alert")).toHaveClass("ant-alert");
   });
 
   it("applies type prop correctly", () => {
-    render(<AlertComponent message="Success Alert" type="success" />);
+    render(<AlertComponent title="Success Alert" type="success" />);
     const alert = screen.getByRole("alert");
     expect(screen.getByText("Success Alert")).toBeInTheDocument();
     expect(alert).toHaveClass("ant-alert-success");
   });
 
   it("displays description when provided", () => {
-    render(<AlertComponent message="Error Alert" description="Something went wrong" type="error" />);
+    render(<AlertComponent title="Error Alert" description="Something went wrong" type="error" />);
     expect(screen.getByText("Error Alert")).toBeInTheDocument();
     expect(screen.getByText("Something went wrong")).toBeInTheDocument();
     expect(screen.getByRole("alert")).toHaveClass("ant-alert-error");
   });
 
   it("is closable and shows icon when props are set", () => {
-    render(<AlertComponent message="Warning Alert" type="warning" showIcon closable />);
+    render(<AlertComponent title="Warning Alert" type="warning" showIcon closable />);
     expect(screen.getByText("Warning Alert")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument(); // Close button
   });

client/src/components/allocations-assignment/allocations-assignment.component.jsx

@@ -28,12 +28,13 @@ export function AllocationsAssignmentComponent({
     <div>
       <Select
         id="employeeSelector"
-        showSearch
+        showSearch={{
+          optionFilterProp: "children",
+          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }}
         style={{ width: 200 }}
         placeholder="Select a person"
-        optionFilterProp="children"
         onChange={onChange}
-        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
       >
         {bodyshop.employees.map((emp) => (
           <Select.Option value={emp.id} key={emp.id}>

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import AllocationsAssignmentComponent from "./allocations-assignment.component";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx

@@ -30,12 +30,13 @@ export default connect(
   const popContent = (
     <div>
       <Select
-        showSearch
+        showSearch={{
+          optionFilterProp: "children",
+          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }}
         style={{ width: 200 }}
         placeholder="Select a person"
-        optionFilterProp="children"
         onChange={onChange}
-        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
       >
         {bodyshop.employees.map((emp) => (
           <Select.Option value={emp.id} key={emp.id}>

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
 import { useTranslation } from "react-i18next";

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

@@ -65,7 +65,7 @@ export default function AuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: pageLimit }}
+      pagination={{ placement: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

client/src/components/audit-trail-list/audit-trail-list.container.jsx

@@ -1,5 +1,5 @@
 import AuditTrailListComponent from "./audit-trail-list.component";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import AlertComponent from "../alert/alert.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -17,7 +17,7 @@ export default function AuditTrailListContainer({ recordId }) {
   return (
     <div>
       {error ? (
-        <AlertComponent type="error" message={error.message} />
+        <AlertComponent type="error" title={error.message} />
       ) : (
         <Row gutter={[16, 16]}>
           <Card>

client/src/components/audit-trail-list/email-audit-trail-list.component.jsx

@@ -50,7 +50,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: pageLimit }}
+      pagination={{ placement: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Popconfirm } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,5 +1,5 @@
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, Divider, Form, Popconfirm, Space } from "antd";
 import queryString from "query-string";
 import { useState } from "react";
@@ -148,7 +148,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
     setUpdateLoading(false);
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
   const exported = data?.bills_by_pk && data.bills_by_pk.exported;
@@ -189,7 +189,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
           />
           <Form form={form} onFinish={handleFinish} initialValues={transformData(data)} layout="vertical">
             <BillFormContainer form={form} billEdit disabled={exported} disableInHouse={isinhouse} />
-            <Divider orientation="left">{t("general.labels.media")}</Divider>
+            <Divider titlePlacement="left">{t("general.labels.media")}</Divider>
             {bodyshop.uselocalmediaserver ? (
               <JobsDocumentsLocalGallery
                 job={{ id: data ? data.bills_by_pk.jobid : null }}

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

@@ -1,5 +1,5 @@
-import { useApolloClient, useMutation } from "@apollo/client";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useApolloClient, useMutation } from "@apollo/client/react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
 import { useEffect, useMemo, useState } from "react";
@@ -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,
@@ -55,7 +56,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
 
   const {
     treatments: { Enhanced_Payroll, Imgproxy }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["Enhanced_Payroll", "Imgproxy"],
     splitKey: bodyshop.imexshopid
@@ -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-lines-extended/bill-form-lines.extended.formitem.component.jsx

@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import CiecaSelect from "../../utils/Ciecaselect";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -44,7 +45,7 @@ export function BillFormItemsExtendedFormItem({
                 quantity: record.part_qty || 1,
                 actual_price: record.act_price,
                 cost_center: record.part_type
-                  ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                  ? bodyshopHasDmsKey(bodyshop)
                     ? record.part_type
                     : responsibilityCenters.defaults && (responsibilityCenters.defaults.costs[record.part_type] || null)
                   : null
@@ -100,7 +101,7 @@ export function BillFormItemsExtendedFormItem({
       </Form.Item>
       <Form.Item label={t("billlines.fields.cost_center")} name={["billlineskeys", record.id, "cost_center"]}>
         <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
-          {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
+          {bodyshopHasDmsKey(bodyshop)
             ? CiecaSelect(true, false)
             : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
         </Select>

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

@@ -1,6 +1,6 @@
 import Icon, { UploadOutlined } from "@ant-design/icons";
-import { useApolloClient } from "@apollo/client";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useApolloClient } from "@apollo/client/react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -22,6 +22,7 @@ import VendorSearchSelect from "../vendor-search-select/vendor-search-select.com
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -50,7 +51,7 @@ export function BillFormComponent({
 
   const {
     treatments: { Extended_Bill_Posting, ClosingPeriod }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["Extended_Bill_Posting", "ClosingPeriod"],
     splitKey: bodyshop.imexshopid
@@ -97,13 +98,11 @@ export function BillFormComponent({
     }
     const jobId = form.getFieldValue("jobid");
     if (jobId) {
-      loadLines({ variables: { id: jobId } });
+      loadLines({ id: jobId });
       if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
         loadOutstandingReturns({
-          variables: {
-            jobId: jobId,
-            vendorId: vendorId
-          }
+          jobId: jobId,
+          vendorId: vendorId
         });
       }
     }
@@ -145,13 +144,11 @@ export function BillFormComponent({
             notExported={false}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
-                loadLines({ variables: { id: form.getFieldValue("jobid") } });
+                loadLines({ id: form.getFieldValue("jobid") });
                 if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
                   loadOutstandingReturns({
-                    variables: {
-                      jobId: form.getFieldValue("jobid"),
-                      vendorId: form.getFieldValue("vendorid")
-                    }
+                    jobId: form.getFieldValue("jobid"),
+                    vendorId: form.getFieldValue("vendorid")
                   });
                 }
               }
@@ -354,7 +351,7 @@ export function BillFormComponent({
               <Form.Item span={3} label={t("bills.fields.local_tax_rate")} name="local_tax_rate">
                 <CurrencyInput min={0} />
               </Form.Item>
-              {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+              {bodyshopHasDmsKey(bodyshop) ? (
                 <Form.Item span={2} label={t("bills.labels.federal_tax_exempt")} name="federal_tax_exempt">
                   <Switch onChange={handleFederalTaxExemptSwitchToggle} />
                 </Form.Item>
@@ -412,15 +409,17 @@ export function BillFormComponent({
                     />
                     <Statistic
                       title={t("bills.labels.discrepancy")}
-                      valueStyle={{
-                        color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
+                      styles={{
+                        value: {
+                          color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
+                        }
                       }}
                       value={totals.discrepancy.toFormat()}
                       precision={2}
                     />
                   </Space>
                   {form.getFieldValue("is_credit_memo") ? (
-                    <AlertComponent type="warning" message={t("bills.labels.enteringcreditmemo")} />
+                    <AlertComponent type="warning" title={t("bills.labels.enteringcreditmemo")} />
                   ) : null}
                 </div>
               );
@@ -428,7 +427,7 @@ export function BillFormComponent({
           }}
         </Form.Item>
       </LayoutFormRow>
-      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
+      <Divider titlePlacement="left">{t("bills.labels.bill_lines")}</Divider>
 
       {Extended_Bill_Posting.treatment === "on" ? (
         <BillFormLinesExtended
@@ -448,7 +447,7 @@ export function BillFormComponent({
           billEdit={billEdit}
         />
       )}
-      <Divider orientation="left" style={{ display: billEdit ? "none" : null }}>
+      <Divider titlePlacement="left" style={{ display: billEdit ? "none" : null }}>
         {t("documents.labels.upload")}
       </Divider>
       <Form.Item

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

@@ -1,5 +1,5 @@
-import { useLazyQuery, useQuery } from "@apollo/client";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useLazyQuery, useQuery } from "@apollo/client/react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
@@ -18,7 +18,7 @@ const mapStateToProps = createStructuredSelector({
 export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse }) {
   const {
     treatments: { Simple_Inventory }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["Simple_Inventory"],
     splitKey: bodyshop && bodyshop.imexshopid

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

@@ -1,5 +1,5 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -33,7 +34,7 @@ export function BillEnterModalLinesComponent({
 
   const {
     treatments: { Simple_Inventory, Enhanced_Payroll }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["Simple_Inventory", "Enhanced_Payroll"],
     splitKey: bodyshop && bodyshop.imexshopid
@@ -45,7 +46,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 +72,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
@@ -90,7 +91,7 @@ export function BillEnterModalLinesComponent({
                       actual_price: opt.cost,
                       original_actual_price: opt.cost,
                       cost_center: opt.part_type
-                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                        ? bodyshopHasDmsKey(bodyshop)
                           ? opt.part_type !== "PAE"
                             ? opt.part_type
                             : null
@@ -110,7 +111,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 +233,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.actual_cost"),
         dataIndex: "actual_cost",
         editable: true,
-        width: "8rem",
+        width: "10rem",
 
         formItemProps: (field) => {
           return {
@@ -322,7 +323,7 @@ export function BillEnterModalLinesComponent({
         },
         formInput: () => (
           <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
-            {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
+            {bodyshopHasDmsKey(bodyshop)
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
           </Select>
@@ -357,6 +358,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.labels.deductedfromlbr"),
         dataIndex: "deductedfromlbr",
         editable: true,
+        width: "40px",
         formItemProps: (field) => {
           return {
             valuePropName: "checked",
@@ -464,7 +466,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 +487,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 +505,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

@@ -10,18 +10,19 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
     <Select
       disabled={disabled}
       ref={ref}
-      showSearch
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          return (
+            (option.line_desc && option.line_desc.toLowerCase().includes(inputValue.toLowerCase())) ||
+            (option.oem_partno && option.oem_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
+            (option.alt_partno && option.alt_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
+            (option.act_price && option.act_price.toString().startsWith(inputValue.toString()))
+          );
+        }
+      }}
       popupMatchSelectWidth={true}
       optionLabelProp={"name"}
       //  optionFilterProp="line_desc"
-      filterOption={(inputValue, option) => {
-        return (
-          (option.line_desc && option.line_desc.toLowerCase().includes(inputValue.toLowerCase())) ||
-          (option.oem_partno && option.oem_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
-          (option.alt_partno && option.alt_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
-          (option.act_price && option.act_price.toString().startsWith(inputValue.toString()))
-        );
-      }}
       notFoundContent={"Removed."}
       options={[
         { value: "noline", label: t("billlines.labels.other"), name: t("billlines.labels.other") },
@@ -39,30 +40,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/bill-mark-exported-button/bill-mark-exported-button.component.jsx

@@ -1,4 +1,6 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/bill-reexport-button/bill-reexport-button.component.jsx

@@ -1,4 +1,5 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -1,5 +1,5 @@
 import { FileAddFilled } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Tooltip } from "antd";
 import { t } from "i18next";
 import dayjs from "./../../utils/day";

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import queryString from "query-string";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Input, Table } from "antd";
@@ -67,7 +67,7 @@ export default function BillsVendorsList() {
     setState({ ...state, search: e.target.value });
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   const dataSource = state.search
     ? data.vendors.filter(
@@ -89,7 +89,7 @@ export default function BillsVendorsList() {
         );
       }}
       dataSource={dataSource}
-      pagination={{ position: "top" }}
+      pagination={{ placement: "top" }}
       columns={columns}
       rowKey="id"
       onChange={handleTableChange}

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -8,7 +8,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import GlobalSearchOs from "../global-search/global-search-os.component";
 import "./breadcrumbs.styles.scss";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   breadcrumbs: selectBreadcrumbs,
@@ -19,7 +19,7 @@ const mapStateToProps = createStructuredSelector({
 export function BreadCrumbs({ breadcrumbs, bodyshop, isPartsEntry }) {
   const {
     treatments: { OpenSearch }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["OpenSearch"],
     splitKey: bodyshop?.imexshopid

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

@@ -1,5 +1,5 @@
 import { CopyFilled, DeleteFilled } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Button, Card, Col, Form, Input, message, Row, Space, Spin, Statistic } from "antd";
 import axios from "axios";
 import { useState } from "react";
@@ -52,7 +52,6 @@ const CardPaymentModalComponent = ({
   const notification = useNotification();
 
   const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
-    variables: { jobids: [context.jobid] },
     skip: !context?.jobid
   });
 
@@ -258,7 +257,7 @@ const CardPaymentModalComponent = ({
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
               if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
-                refetch({ jobids: payments.map((p) => p.jobid) });
+                refetch({ variables: { jobids: payments.map((p) => p.jobid) } });
               }
               return (
                 <>
@@ -316,7 +315,7 @@ const CardPaymentModalComponent = ({
                   >
                     {t("job_payments.buttons.proceedtopayment")}
                   </Button>
-                  <Space direction="vertical" align="center">
+                  <Space orientation="vertical" align="center">
                     <Button
                       type="primary"
                       //  data-ipayname="submit"

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

@@ -1,8 +1,7 @@
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 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";
@@ -10,14 +9,14 @@ import { registerMessagingHandlers, unregisterMessagingHandlers } from "./regist
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
-  const { t } = useTranslation();
   const client = useApolloClient();
   const { socket } = useSocket();
 
+  // 1) FCM subscription (independent of socket handler registration)
   useEffect(() => {
     if (!bodyshop?.messagingservicesid) return;
 
-    async function SubscribeToTopicForFCMNotification() {
+    async function subscribeToTopicForFCMNotification() {
       try {
         await requestForToken();
         await axios.post("/notifications/subscribe", {
@@ -32,17 +31,35 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
       }
     }
 
-    SubscribeToTopicForFCMNotification();
+    subscribeToTopicForFCMNotification();
+  }, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
 
-    // Register WebSocket handlers
-    if (socket?.connected) {
-      registerMessagingHandlers({ socket, client, currentUser, bodyshop, t });
+  // 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]);
+
+    // 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 <></>;
 

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

@@ -13,68 +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"
 });
 
-// Can be uncommonted to test the playback of the notification sound
-// window.testTone = () => {
-//   const notificationSound = new Audio(newMessageSound);
-//   notificationSound.play().catch((error) => {
-//     console.error("Error playing notification sound:", error);
-//   });
-// };
+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;
 
-  const handleNewMessageSummary = async (message) => {
-    const { conversationId, newConversation, existingConversation, isoutbound } = message;
+  // Coalesce unread refetches (avoid spamming during bursts)
+  let unreadRefetchInFlight = null;
+  const refetchUnreadCount = () => {
+    if (unreadRefetchInFlight) return;
 
-    // True only when DB value is strictly true; falls back to true on cache miss
-    const isNewMessageSoundEnabled = (client) => {
+    unreadRefetchInFlight = client
+      .refetchQueries({
+        include: ["UNREAD_CONVERSATION_COUNT"]
+      })
+      .catch(() => {
+        // best-effort
+      })
+      .finally(() => {
+        unreadRefetchInFlight = null;
+      });
+  };
+
+  const handleNewMessageSummary = async (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; // default allow if we can't resolve user
-        const res = client.readQuery({
+        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; // strictly true => enabled
+        return flag === true;
       } catch {
-        // If the query hasn't been seeded in cache yet, default ON
         return true;
       }
     };
 
     logLocal("handleNewMessageSummary - Start", { message, isNew: !existingConversation });
 
-    const queryVariables = { offset: 0 };
-
     if (!isoutbound) {
-      // Play notification sound for new inbound message (scoped to bodyshop)
       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 }),
@@ -86,75 +259,54 @@ export const registerMessagingHandlers = ({ socket, client, currentUser, bodysho
         });
 
         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;
     }
 
@@ -166,88 +318,78 @@ export const registerMessagingHandlers = ({ socket, client, currentUser, bodysho
 
     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;
           }
         }
       });
@@ -262,149 +404,140 @@ export const registerMessagingHandlers = ({ socket, client, currentUser, bodysho
   };
 
   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":
-          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) => ({
+          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];
               }
             }
           });
@@ -412,46 +545,31 @@ export const registerMessagingHandlers = ({ socket, client, currentUser, bodysho
           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);
@@ -461,22 +579,18 @@ export const registerMessagingHandlers = ({ socket, client, currentUser, bodysho
         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];
@@ -491,46 +605,36 @@ export const registerMessagingHandlers = ({ socket, client, currentUser, bodysho
         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-archive-button/chat-archive-button.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -11,8 +11,8 @@ import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-displ
 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 { useQuery } from "@apollo/client/react";
+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,21 +71,31 @@ 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 = (
       <>
         {item.label && <Tag color="blue">{item.label}</Tag>}
         {item.job_conversations.length > 0 ? (
-          <Space direction="vertical">{names}</Space>
+          <Space orientation="vertical">{names}</Space>
         ) : (
           <Space>
             <PhoneFormatter>{item.phone_num}</PhoneFormatter>
@@ -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-tags/chat-conversation-title-tags.component.jsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Tag } from "antd";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";

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,13 +19,15 @@ export function ChatConversationComponent({
   conversation,
   messages,
   handleMarkConversationAsRead,
-  bodyshop
+  handleMarkLastMessageAsUnread,
+  markingAsUnreadInProgress,
+  canMarkUnread
 }) {
   const [loading, error] = subState;
 
   if (conversation?.archived) return null;
   if (loading) return <LoadingSkeleton />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <div
@@ -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,7 @@
-import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import { useApolloClient, useQuery, useSubscription } from "@apollo/client/react";
+import { gql } 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 +19,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 +28,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 +64,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 +81,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 +110,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 +145,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 +180,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 +215,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-label/chat-label.component.jsx

@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Input, Spin, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,6 +1,6 @@
 import { PictureFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useQuery } from "@apollo/client/react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Badge, Popover } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -28,7 +28,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   const [open, setOpen] = useState(false);
   const {
     treatments: { Imgproxy }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["Imgproxy"],
     splitKey: bodyshop && bodyshop.imexshopid
@@ -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.
@@ -58,7 +63,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   const content = (
     <div className="media-selector-content">
       {loading && <LoadingSpinner />}
-      {error && <AlertComponent message={error.message} type="error" />}
+      {error && <AlertComponent title={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div className="error-message">{t("messaging.labels.maxtenimages")}</div>
       ) : null}
@@ -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/chat-popup/chat-popup.component.jsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
+import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client/react";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -27,32 +27,60 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
   const { t } = useTranslation();
-  const [pollInterval, setPollInterval] = useState(0);
   const { socket } = useSocket();
-  const client = useApolloClient(); // Apollo Client instance for cache operations
+  const client = useApolloClient();
 
-  // Lazy query for conversations
-  const [getConversations, { loading, data, refetch }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+  // When socket is connected, we do NOT poll (socket should push updates).
+  // When disconnected, we poll as a fallback.
+  const [pollInterval, setPollInterval] = useState(0);
+
+  // Ensure conversations query runs once on initial page load (component mount).
+  const hasLoadedConversationsOnceRef = useRef(false);
+
+  // Preserve the last known unread aggregate count so the badge doesn't "vanish"
+  // when UNREAD_CONVERSATION_COUNT gets skipped after socket connects.
+  const [unreadAggregateCount, setUnreadAggregateCount] = useState(0);
+
+  // Lazy query for conversations (executed manually)
+  const [getConversations, { loading, data, refetch, called }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !chatVisible,
+    notifyOnNetworkStatusChange: true,
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
-  // Query for unread count when chat is not visible
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
+  // Query for unread count when chat is not visible and socket is not connected.
+  // (Once socket connects, we stop this query; we keep the last known value in state.)
+  const { data: unreadData, error: unreadError } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    pollInterval: 60 * 1000 // TODO: This is a fix for now, should be coming from sockets
+    skip: chatVisible || socket?.connected,
+    pollInterval: socket?.connected ? 0 : 60 * 1000
   });
 
-  // Socket connection status
+  // Handle unread count updates in useEffect
+  useEffect(() => {
+    if (unreadData) {
+      const nextCount = unreadData?.messages_aggregate?.aggregate?.count;
+      if (typeof nextCount === "number") setUnreadAggregateCount(nextCount);
+    }
+  }, [unreadData]);
+
+  // Handle unread count errors in useEffect
+  useEffect(() => {
+    if (unreadError) {
+      // Keep last known count; do not force badge to zero on transient failures
+      console.warn("UNREAD_CONVERSATION_COUNT failed:", unreadError?.message || unreadError);
+    }
+  }, [unreadError]);
+
+  // Socket connection status -> polling strategy for CONVERSATION_LIST_QUERY
   useEffect(() => {
     const handleSocketStatus = () => {
       if (socket?.connected) {
-        setPollInterval(15 * 60 * 1000); // 15 minutes
+        setPollInterval(0); // skip polling if socket connected
       } else {
-        setPollInterval(60 * 1000); // 60 seconds
+        setPollInterval(60 * 1000); // fallback polling if disconnected
       }
     };
 
@@ -71,19 +99,30 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     };
   }, [socket]);
 
-  // Fetch conversations when chat becomes visible
+  // Run conversations query exactly once on initial load (component mount)
   useEffect(() => {
-    if (chatVisible)
-      getConversations({
-        variables: {
-          offset: 0
-        }
-      }).catch((err) => {
-        console.error(`Error fetching conversations: ${(err, err.message || "")}`);
-      });
-  }, [chatVisible, getConversations]);
+    if (hasLoadedConversationsOnceRef.current) return;
 
-  // Get unread count from the cache
+    hasLoadedConversationsOnceRef.current = true;
+
+    getConversations({ offset: 0 }).catch((err) => {
+      console.error(`Error fetching conversations: ${err?.message || ""}`, err);
+    });
+  }, [getConversations]);
+
+  const handleManualRefresh = async () => {
+    try {
+      if (called && typeof refetch === "function") {
+        await refetch({ variables: { offset: 0 } });
+      } else {
+        await getConversations({ offset: 0 });
+      }
+    } catch (err) {
+      console.error(`Error refreshing conversations: ${err?.message || ""}`, err);
+    }
+  };
+
+  // Get unread count from the cache (preferred). Fallback to preserved aggregate count.
   const unreadCount = (() => {
     try {
       const cachedData = client.readQuery({
@@ -91,18 +130,23 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
         variables: { offset: 0 }
       });
 
-      if (!cachedData?.conversations) {
-        return unreadData?.messages_aggregate?.aggregate?.count;
+      const conversations = cachedData?.conversations;
+
+      if (!Array.isArray(conversations) || conversations.length === 0) {
+        return unreadAggregateCount;
       }
 
-      // Aggregate unread message count
-      return cachedData.conversations.reduce((total, conversation) => {
-        const unread = conversation.messages_aggregate?.aggregate?.count || 0;
+      const hasUnreadCounts = conversations.some((c) => c?.messages_aggregate?.aggregate?.count != null);
+      if (!hasUnreadCounts) {
+        return unreadAggregateCount;
+      }
+
+      return conversations.reduce((total, conversation) => {
+        const unread = conversation?.messages_aggregate?.aggregate?.count || 0;
         return total + unread;
       }, 0);
-    } catch (error) {
-      console.warn("Unread count not found in cache:", error);
-      return 0; // Fallback if not in cache
+    } catch {
+      return unreadAggregateCount;
     }
   })();
 
@@ -117,9 +161,12 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
               <Tooltip title={t("messaging.labels.recentonly")}>
                 <InfoCircleOutlined />
               </Tooltip>
-              <SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
+
+              <SyncOutlined style={{ cursor: "pointer" }} onClick={handleManualRefresh} />
+
               {!socket?.connected && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
             </Space>
+
             <ShrinkOutlined
               onClick={() => toggleChatVisible()}
               style={{ position: "absolute", right: ".5rem", top: ".5rem" }}

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

@@ -10,7 +10,7 @@ import { selectIsSending, selectMessage } from "../../redux/messaging/messaging.
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { phone } from "phone";
 import { GET_PHONE_NUMBER_OPT_OUT } from "../../graphql/phone-number-opt-out.queries";
 
@@ -68,13 +68,13 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
   };
 
   return (
-    <Space direction="vertical" style={{ width: "100%" }} size="middle">
+    <Space orientation="vertical" style={{ width: "100%" }} size="middle">
       {isOptedOut && (
         <Tooltip title={t("consent.text_body")}>
           <Alert
             showIcon={true}
             icon={<ExclamationCircleOutlined />}
-            message={t("messaging.errors.no_consent")}
+            title={t("messaging.errors.no_consent")}
             type="error"
           />
         </Tooltip>

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

@@ -10,12 +10,13 @@ export default function ChatTagRoComponent({ roOptions, loading, handleSearch, h
     <Space>
       <div style={{ width: "15rem" }}>
         <Select
-          showSearch
+          showSearch={{
+            filterOption: false,
+            onSearch: handleSearch
+          }}
           autoFocus
           popupMatchSelectWidth
           placeholder={t("general.labels.search")}
-          filterOption={false}
-          onSearch={handleSearch}
           onSelect={handleInsertTag}
           notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
         >

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

@@ -1,5 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import { useLazyQuery, useMutation } from "@apollo/client";
+import { useLazyQuery, useMutation } from "@apollo/client/react";
 import { Tag } from "antd";
 import _ from "lodash";
 import { useState } from "react";
@@ -34,7 +34,7 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 
   const handleSearch = (value) => {
-    debouncedExecuteSearch({ variables: { search: value } });
+    debouncedExecuteSearch({ search: value });
   };
 
   const [insertTag] = useMutation(INSERT_CONVERSATION_TAG, {

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

@@ -104,7 +104,7 @@ export default function ContractsCarsComponent({ loading, data, selectedCarId, h
     >
       <Table
         loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
         columns={columns}
         rowKey="id"
         dataSource={filteredData}

client/src/components/contract-cars/contract-cars.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import dayjs from "../../utils/day";
 import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";
@@ -24,7 +24,7 @@ export default function ContractCarsContainer({ selectedCarState, form }) {
     });
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <ContractCarsComponent
       handleSelect={handleSelect}

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

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { Button, Form, InputNumber, Popover, Radio, Select, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
@@ -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/contract-form/contract-form-job-prefill.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Button } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,7 +11,7 @@ export default function ContractCreateJobPrefillComponent({ jobId, form }) {
   const notification = useNotification();
 
   const handleClick = () => {
-    call({ variables: { id: jobId } });
+    call({ id: jobId });
   };
 
   useEffect(() => {

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

@@ -67,7 +67,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                   .isBefore(dayjs(form.getFieldValue("scheduledreturn")));
               if (insuranceOver)
                 return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
+                  <Space orientation="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.insuranceexpired")}
@@ -107,7 +107,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                   .isSameOrBefore(dayjs(form.getFieldValue("scheduledreturn")));
               if (mileageOver || dueForService)
                 return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
+                  <Space orientation="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.cardueforservice")}

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

@@ -128,11 +128,7 @@ export default function ContractsJobsComponent({ loading, data, selectedJob, han
     >
       <Table
         loading={loading}
-        pagination={{
-          position: "top",
-          defaultPageSize: pageLimit,
-          defaultCurrent: defaultCurrent
-        }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit, defaultCurrent: defaultCurrent }}
         columns={columns}
         rowKey="id"
         dataSource={filteredData}

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
@@ -26,7 +26,7 @@ export function ContractJobsContainer({ selectedJobState, bodyshop }) {
     setSelectedJob(record.id);
   };
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
   return (
     <ContractJobsComponent
       handleSelect={handleSelect}

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

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Button, Form, Modal, Table } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -35,10 +35,8 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
 
     //Execute contract find
     callSearch({
-      variables: {
-        plate: (values.plate && values.plate !== "" && values.plate) || undefined,
-        time: values.time
-      }
+      plate: (values.plate && values.plate !== "" && values.plate) || undefined,
+      time: values.time
     });
   };
 
@@ -63,7 +61,7 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
         <Button onClick={() => form.submit()} type="primary" loading={loading}>
           {t("general.labels.search")}
         </Button>
-        {error && <AlertComponent type="error" message={JSON.stringify(error)} />}
+        {error && <AlertComponent type="error" title={JSON.stringify(error)} />}
         <Table
           loading={loading}
           columns={[

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

@@ -172,12 +172,7 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
         scroll={{
           x: "50%" //y: "40rem"
         }}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1, 10),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
         columns={columns}
         rowKey="id"
         dataSource={contracts}

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -75,12 +75,7 @@ export default function CourtesyCarContractListComponent({ contracts, totalContr
     <Card title={t("menus.header.courtesycars-contracts")}>
       <Table
         scroll={{ x: true }}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1),
-          total: totalContracts
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: totalContracts }}
         columns={columns}
         rowKey="id"
         dataSource={contracts}

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

@@ -1,5 +1,5 @@
 import { WarningFilled } from "@ant-design/icons";
-import { useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client/react";
 import { Button, Form, Input, InputNumber, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import dayjs from "../../utils/day";
@@ -208,7 +208,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
               const mileageOver = nextservicekm ? nextservicekm <= form.getFieldValue("mileage") : false;
               if (mileageOver)
                 return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
+                  <Space orientation="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.cardueforservice")}
@@ -232,7 +232,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
 
               if (dueForService)
                 return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
+                  <Space orientation="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.cardueforservice")}
@@ -265,7 +265,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
 
               if (dateover)
                 return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
+                  <Space orientation="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.dateinpast")}
@@ -298,7 +298,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
 
               if (dateover)
                 return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
+                  <Space orientation="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.dateinpast")}

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -8,7 +8,7 @@ import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
 import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
 import dayjs from "../../utils/day";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
-import { useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -278,7 +278,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
     >
       <Table
         loading={loading}
-        pagination={{ position: "top" }}
+        pagination={{ placement: "top" }}
         columns={columns}
         rowKey="id"
         dataSource={tableData}

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Card, Form, Result } from "antd";
 import queryString from "query-string";
 import { useEffect } from "react";
@@ -36,7 +36,7 @@ export default function CsiResponseFormContainer() {
     );
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent title={error.message} type="error" />;
 
   return (
     <Card>

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -94,12 +94,7 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
     >
       <Table
         loading={loading}
-        pagination={{
-          position: "top",
-          pageSize: pageLimit,
-          current: parseInt(state.page || 1),
-          total: total
-        }}
+        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}
         columns={columns}
         rowKey="id"
         dataSource={responses}

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/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx

@@ -60,7 +60,7 @@ export default function DashboardMonthlyEmployeeEfficiency({ data, ...cardProps
   return (
     <Card title={t("dashboard.titles.monthlyemployeeefficiency")} {...cardProps}>
       <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
           <ComposedChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
             <CartesianGrid stroke="#f5f5f5" />
             <XAxis dataKey="date" />

client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx

@@ -105,7 +105,7 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
         <div style={{ height: "100%" }}>
           <Table
             onChange={handleTableChange}
-            pagination={{ position: "top", defaultPageSize: pageLimit }}
+            pagination={{ placement: "top", defaultPageSize: pageLimit }}
             columns={columns}
             scroll={{ x: true, y: "calc(100% - 4em)" }}
             rowKey="id"

client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx

@@ -1,13 +1,11 @@
 import { Card } from "antd";
 import Dinero from "dinero.js";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
 import DashboardRefreshRequired from "../refresh-required.component";
 
 export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
   const { t } = useTranslation();
-  const [activeIndex, setActiveIndex] = useState(0);
   if (!data) return null;
   if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
 
@@ -36,19 +34,17 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
   return (
     <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
       <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
           <PieChart margin={0} padding={0}>
             <Pie
               data={chartData}
-              activeIndex={activeIndex}
-              activeShape={renderActiveShape}
+              shape={renderActiveShape}
               cx="50%"
               cy="50%"
               innerRadius="60%"
               //  outerRadius={80}
               fill="#8884d8"
               dataKey="value"
-              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
             >
               {chartData.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={entry.color} />
@@ -95,7 +91,8 @@ const renderActiveShape = (props) => {
     fill,
     payload,
     //  percent,
-    value
+    value,
+    isActive
   } = props;
   // const sin = Math.sin(-RADIAN * midAngle);
   // const cos = Math.cos(-RADIAN * midAngle);
@@ -109,12 +106,16 @@ const renderActiveShape = (props) => {
 
   return (
     <g>
-      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
-        {payload.name}
-      </text>
-      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
+      {isActive && (
+        <>
+          <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
+            {payload.name}
+          </text>
+          <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+            {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+          </text>
+        </>
+      )}
       <Sector
         cx={cx}
         cy={cy}
@@ -124,15 +125,17 @@ const renderActiveShape = (props) => {
         endAngle={endAngle}
         fill={fill}
       />
-      <Sector
-        cx={cx}
-        cy={cy}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        innerRadius={outerRadius + 6}
-        outerRadius={outerRadius + 10}
-        fill={fill}
-      />
+      {isActive && (
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+      )}
     </g>
   );
 };

client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx

@@ -1,13 +1,11 @@
 import { Card } from "antd";
 import Dinero from "dinero.js";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
 import DashboardRefreshRequired from "../refresh-required.component";
 
 export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
   const { t } = useTranslation();
-  const [activeIndex, setActiveIndex] = useState(0);
   if (!data) return null;
   if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
 
@@ -34,19 +32,17 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
   return (
     <Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
       <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
           <PieChart margin={0} padding={0}>
             <Pie
               data={chartData}
-              activeIndex={activeIndex}
-              activeShape={renderActiveShape}
+              shape={renderActiveShape}
               cx="50%"
               cy="50%"
               innerRadius="60%"
               // outerRadius={80}
               fill="#8884d8"
               dataKey="value"
-              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
             >
               {chartData.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={entry.color} />
@@ -91,7 +87,8 @@ const renderActiveShape = (props) => {
     fill,
     payload,
     //   percent,
-    value
+    value,
+    isActive
   } = props;
   // const sin = Math.sin(-RADIAN * midAngle);
   // const cos = Math.cos(-RADIAN * midAngle);
@@ -105,12 +102,16 @@ const renderActiveShape = (props) => {
 
   return (
     <g>
-      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
-        {payload.name}
-      </text>
-      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
+      {isActive && (
+        <>
+          <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
+            {payload.name}
+          </text>
+          <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+            {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+          </text>
+        </>
+      )}
       <Sector
         cx={cx}
         cy={cy}
@@ -120,15 +121,17 @@ const renderActiveShape = (props) => {
         endAngle={endAngle}
         fill={fill}
       />
-      <Sector
-        cx={cx}
-        cy={cy}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        innerRadius={outerRadius + 6}
-        outerRadius={outerRadius + 10}
-        fill={fill}
-      />
+      {isActive && (
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+      )}
     </g>
   );
 };

client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx

@@ -40,7 +40,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
   return (
     <Card title={t("dashboard.titles.monthlyrevenuegraph")} {...cardProps}>
       <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
           <ComposedChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
             <CartesianGrid stroke="#f5f5f5" />
             <XAxis dataKey="date" />

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-components/total-production-hours/total-production-hours.component.jsx

@@ -36,7 +36,7 @@ export function DashboardTotalProductionHours({ bodyshop, data, ...cardProps })
         <Statistic
           title={t("dashboard.labels.prodhrs")}
           value={hours.total.toFixed(1)}
-          valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
+          styles={{ value: { color: aboveTargetHours ? "green" : "red" } }}
         />
       </Space>
     </Card>

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

@@ -1,15 +1,15 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
-import { useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useMemo, useState, useEffect } from "react";
-import { Responsive, WidthProvider } from "react-grid-layout";
+import { useEffect, useMemo, useState } from "react";
+import { Responsive, WidthProvider } from "react-grid-layout/legacy";
 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, QUERY_USER_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
+import { QUERY_USER_DASHBOARD_LAYOUT, UPDATE_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";
@@ -156,7 +156,7 @@ export function DashboardGridComponent({ currentUser }) {
   );
 
   if (loading || dashboardLoading) return <LoadingSkeleton message={t("general.labels.loading")} />;
-  if (error || dashboardError) return <AlertComponent message={(error || dashboardError).message} type="error" />;
+  if (error || dashboardError) return <AlertComponent title={(error || dashboardError).message} type="error" />;
 
   const handleLayoutChange = async (layout, layouts) => {
     logImEXEvent("dashboard_change_layout");
@@ -196,7 +196,7 @@ export function DashboardGridComponent({ currentUser }) {
       <PageHeader
         extra={
           <Space>
-            <Button onClick={refetch}>
+            <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
             <Dropdown menu={menu} trigger={["click"]}>

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

@@ -5,7 +5,7 @@ export default function DataLabel({
   hideIfNull,
   children,
   open = true,
-  valueStyle = {},
+  styles,
   valueClassName,
   onValueClick,
   ...props
@@ -33,7 +33,11 @@ export default function DataLabel({
         className={valueClassName}
         onClick={onValueClick}
       >
-        {typeof children === "string" ? <Typography.Text style={valueStyle}>{children}</Typography.Text> : children}
+        {typeof children === "string" ? (
+          <Typography.Text style={styles?.value}>{children}</Typography.Text>
+        ) : (
+          children
+        )}
       </div>
     </div>
   );

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

@@ -55,7 +55,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       });
     }
   }, [socket, socket.connected, billids]);
-  console.log(allocationsSummary);
+
   const columns = [
     {
       title: t("general.labels.status"),
@@ -112,7 +112,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       }
     >
       <Table
-        pagination={{ position: "top", defaultPageSize: pageLimit }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
         dataSource={allocationsSummary}
@@ -122,7 +122,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
         <Form.Item
           name="journal"
           label={t("jobs.fields.dms.journal")}
-          initialValue={bodyshop.cdk_configuration && bodyshop.cdk_configuration.default_journal}
+          initialValue={bodyshop.cdk_configuration?.default_journal}
           rules={[
             {
               required: true

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

@@ -1,72 +1,104 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
-import { useEffect, useState } from "react";
+import { SyncOutlined } from "@ant-design/icons";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import Dinero from "dinero.js";
-import { SyncOutlined } from "@ant-design/icons";
+import { DMS_MAP } from "../../utils/dmsUtils";
+
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import { pageLimit } from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummary);
 
-export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
+/**
+ * DMS Allocations Summary component
+ * @param mode
+ * @param socket
+ * @param bodyshop
+ * @param jobId
+ * @param title
+ * @param onAllocationsChange
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, onAllocationsChange }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
 
-  useEffect(() => {
-    if (socket.connected) {
-      socket.emit("cdk-calculate-allocations", jobId, (ack) => {
-        setAllocationsSummary(ack);
-        socket.allocationsSummary = ack;
+  // Resolve event name by mode (PBS reuses the CDK event per existing behavior)
+  const allocationsEvent =
+    mode === DMS_MAP.reynolds
+      ? "rr-calculate-allocations"
+      : mode === DMS_MAP.fortellis
+        ? "fortellis-calculate-allocations"
+        : /* "cdk" | "pbs" (legacy) */ "cdk-calculate-allocations";
+
+  const fetchAllocations = useCallback(() => {
+    if (!socket || !jobId || !mode) return;
+
+    try {
+      socket.emit(allocationsEvent, jobId, (ack) => {
+        const list = Array.isArray(ack) ? ack : [];
+        setAllocationsSummary(list);
+        // Preserve side-channel used by the post form for discrepancy checks
+        socket.allocationsSummary = list;
+        if (onAllocationsChange) onAllocationsChange(list);
       });
+    } catch {
+      // Best-effort; leave table empty on error
+      setAllocationsSummary([]);
+      if (socket) {
+        socket.allocationsSummary = [];
+      }
+      if (onAllocationsChange) {
+        onAllocationsChange([]);
+      }
     }
-  }, [socket, socket.connected, jobId]);
+  }, [socket, jobId, mode, allocationsEvent]);
+
+  // Initial + whenever mode/socket/jobId changes
+  useEffect(() => {
+    fetchAllocations();
+  }, [fetchAllocations]);
 
   const columns = [
-    {
-      title: t("jobs.fields.dms.center"),
-      dataIndex: "center",
-      key: "center"
-    },
+    { title: t("jobs.fields.dms.center"), dataIndex: "center", key: "center" },
     {
       title: t("jobs.fields.dms.sale"),
       dataIndex: "sale",
       key: "sale",
-      render: (text, record) => Dinero(record.sale).toFormat()
+      render: (_text, record) => Dinero(record.sale).toFormat()
     },
     {
       title: t("jobs.fields.dms.cost"),
       dataIndex: "cost",
       key: "cost",
-      render: (text, record) => Dinero(record.cost).toFormat()
+      render: (_text, record) => Dinero(record.cost).toFormat()
     },
     {
       title: t("jobs.fields.dms.sale_dms_acctnumber"),
       dataIndex: "sale_dms_acctnumber",
       key: "sale_dms_acctnumber",
-      render: (text, record) => record.profitCenter?.dms_acctnumber
+      render: (_text, record) => record.profitCenter?.dms_acctnumber
     },
     {
       title: t("jobs.fields.dms.cost_dms_acctnumber"),
       dataIndex: "cost_dms_acctnumber",
       key: "cost_dms_acctnumber",
-      render: (text, record) => record.costCenter?.dms_acctnumber
+      render: (_text, record) => record.costCenter?.dms_acctnumber
     },
     {
       title: t("jobs.fields.dms.dms_wip_acctnumber"),
       dataIndex: "dms_wip_acctnumber",
       key: "dms_wip_acctnumber",
-      render: (text, record) => record.costCenter?.dms_wip_acctnumber
+      render: (_text, record) => record.costCenter?.dms_wip_acctnumber
     }
   ];
 
@@ -74,54 +106,42 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
     <Card
       title={title}
       extra={
-        <Button
-          onClick={() => {
-            socket.emit("cdk-calculate-allocations", jobId, (ack) => setAllocationsSummary(ack));
-          }}
-        >
+        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
           <SyncOutlined />
         </Button>
       }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
-        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
+        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
       )}
+
       <Table
-        pagination={{ position: "top", defaultPageSize: pageLimit }}
+        pagination={{ placement: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="center"
         dataSource={allocationsSummary}
         locale={{ emptyText: t("dms.labels.refreshallocations") }}
         scroll={{ x: true }}
         summary={() => {
-          const totals =
-            allocationsSummary &&
-            allocationsSummary.reduce(
-              (acc, val) => {
-                return {
-                  totalSale: acc.totalSale.add(Dinero(val.sale)),
-                  totalCost: acc.totalCost.add(Dinero(val.cost))
-                };
-              },
-              {
-                totalSale: Dinero(),
-                totalCost: Dinero()
-              }
-            );
+          const totals = allocationsSummary?.reduce(
+            (acc, val) => ({
+              totalSale: acc.totalSale.add(Dinero(val.sale)),
+              totalCost: acc.totalCost.add(Dinero(val.cost))
+            }),
+            { totalSale: Dinero(), totalCost: Dinero() }
+          ) || { totalSale: Dinero(), totalCost: Dinero() };
+
+          const hasNonZeroSaleTotal = totals.totalSale.getAmount() !== 0;
 
           return (
             <Table.Summary.Row>
               <Table.Summary.Cell>
                 <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
               </Table.Summary.Cell>
-              <Table.Summary.Cell>{totals && totals.totalSale.toFormat()}</Table.Summary.Cell>
-              <Table.Summary.Cell>
-                {
-                  //  totals.totalCost.toFormat()
-                }
-              </Table.Summary.Cell>
-              <Table.Summary.Cell></Table.Summary.Cell>
-              <Table.Summary.Cell></Table.Summary.Cell>
+              <Table.Summary.Cell>{hasNonZeroSaleTotal ? totals.totalSale.toFormat() : null}</Table.Summary.Cell>
+              <Table.Summary.Cell />
+              <Table.Summary.Cell />
+              <Table.Summary.Cell />
             </Table.Summary.Row>
           );
         }}

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

@@ -0,0 +1,342 @@
+import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { resolveRROpCodeFromBodyshop } from "../../utils/dmsUtils.js";
+
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(RrAllocationsSummary);
+
+/**
+ * Normalize job allocations into a flat list for display / preview building.
+ * @param ack
+ * @returns {{
+ *   center: *,
+ *   sale: *,
+ *   partsSale: *,
+ *   partsTaxableSale: *,
+ *   partsNonTaxableSale: *,
+ *   laborTaxableSale: *,
+ *   laborNonTaxableSale: *,
+ *   extrasSale: *,
+ *   extrasTaxableSale: *,
+ *   extrasNonTaxableSale: *,
+ *   cost: *,
+ *   profitCenter: *,
+ *   costCenter: *
+ * }[]|*[]}
+ */
+function normalizeJobAllocations(ack) {
+  if (!ack || !Array.isArray(ack.jobAllocations)) return [];
+
+  return ack.jobAllocations.map((row) => ({
+    center: row.center,
+
+    // legacy "sale" (total) if we ever want to show it again
+    sale: row.sale || row.totalSale || null,
+
+    // bucketed sales used to build split ROGOG/ROLABOR
+    partsSale: row.partsSale || null,
+    partsTaxableSale: row.partsTaxableSale || null,
+    partsNonTaxableSale: row.partsNonTaxableSale || null,
+    laborTaxableSale: row.laborTaxableSale || null,
+    laborNonTaxableSale: row.laborNonTaxableSale || null,
+    extrasSale: row.extrasSale || null,
+    extrasTaxableSale: row.extrasTaxableSale || null,
+    extrasNonTaxableSale: row.extrasNonTaxableSale || null,
+
+    cost: row.cost || null,
+    profitCenter: row.profitCenter || null,
+    costCenter: row.costCenter || null
+  }));
+}
+
+/**
+ * RR-specific DMS Allocations Summary
+ * Focused on what we actually send to RR:
+ *  - ROGOG (split by taxable / non-taxable segments)
+ *  - ROLABOR shell
+ *
+ * The heavy lifting (ROGOG/ROLABOR split, cost allocation, tax flags)
+ * is now done on the backend via buildRogogFromAllocations/buildRolaborFromRogog.
+ * This component just renders the preview from `ack.rogg` / `ack.rolabor`.
+ */
+export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocationsChange, opCode }) {
+  const { t } = useTranslation();
+  const [roggPreview, setRoggPreview] = useState(null);
+  const [rolaborPreview, setRolaborPreview] = useState(null);
+  const [error, setError] = useState(null);
+
+  // Prefer the user-selected OpCode (from DmsContainer), fall back to config default
+  const effectiveOpCode = useMemo(() => opCode || resolveRROpCodeFromBodyshop(bodyshop), [opCode, bodyshop]);
+
+  const fetchAllocations = useCallback(() => {
+    if (!socket || !jobId) return;
+
+    try {
+      socket.emit("rr-calculate-allocations", { jobId, opCode: effectiveOpCode }, (ack) => {
+        if (ack && ack.ok === false) {
+          setRoggPreview(null);
+          setRolaborPreview(null);
+          setError(ack.error || t("dms.labels.allocations_error"));
+          if (socket) {
+            socket.allocationsSummary = [];
+            socket.rrAllocationsRaw = ack;
+          }
+          if (onAllocationsChange) {
+            onAllocationsChange([]);
+          }
+          return;
+        }
+
+        const jobAllocRows = normalizeJobAllocations(ack);
+
+        setRoggPreview(ack?.rogg || null);
+        setRolaborPreview(ack?.rolabor || null);
+        setError(null);
+
+        if (socket) {
+          socket.allocationsSummary = jobAllocRows;
+          socket.rrAllocationsRaw = ack;
+        }
+        if (onAllocationsChange) {
+          onAllocationsChange(jobAllocRows);
+        }
+      });
+    } catch {
+      setRoggPreview(null);
+      setRolaborPreview(null);
+      setError(t("dms.labels.allocations_error"));
+      if (socket) {
+        socket.allocationsSummary = [];
+      }
+      if (onAllocationsChange) {
+        onAllocationsChange([]);
+      }
+    }
+  }, [socket, jobId, t, onAllocationsChange, effectiveOpCode]);
+
+  useEffect(() => {
+    fetchAllocations();
+  }, [fetchAllocations]);
+
+  const segmentLabelMap = {
+    partsTaxable: "Parts Taxable",
+    partsNonTaxable: "Parts Non-Taxable",
+    extrasTaxable: "Extras Taxable",
+    extrasNonTaxable: "Extras Non-Taxable",
+    laborTaxable: "Labor Taxable",
+    laborNonTaxable: "Labor Non-Taxable"
+  };
+
+  const roggRows = useMemo(() => {
+    if (!roggPreview || !Array.isArray(roggPreview.ops)) return [];
+
+    const rows = [];
+    roggPreview.ops.forEach((op) => {
+      const rowOpCode = opCode || op.opCode;
+
+      (op.lines || []).forEach((line, idx) => {
+        const baseDesc = line.itemDesc;
+        const segmentKind = op.segmentKind;
+        const segmentCount = op.segmentCount || 0;
+        const segmentLabel = segmentLabelMap[segmentKind] || segmentKind;
+        const displayDesc = segmentCount > 1 && segmentLabel ? `${baseDesc} (${segmentLabel})` : baseDesc;
+
+        rows.push({
+          key: `${op.jobNo}-${idx}`,
+          opCode: rowOpCode,
+          jobNo: op.jobNo,
+          breakOut: line.breakOut,
+          itemType: line.itemType,
+          itemDesc: displayDesc,
+          custQty: line.custQty,
+          custPayTypeFlag: line.custPayTypeFlag,
+          custTxblNtxblFlag: line.custTxblNtxblFlag,
+          custPrice: line.amount?.custPrice,
+          dlrCost: line.amount?.dlrCost,
+          // segment metadata for visual styling
+          segmentKind,
+          segmentCount
+        });
+      });
+    });
+    return rows;
+  }, [roggPreview, opCode, segmentLabelMap]);
+
+  const rolaborRows = useMemo(() => {
+    if (!rolaborPreview || !Array.isArray(rolaborPreview.ops)) return [];
+
+    return rolaborPreview.ops.map((op, idx) => {
+      const rowOpCode = opCode || op.opCode;
+
+      return {
+        key: `${op.jobNo}-${idx}`,
+        opCode: rowOpCode,
+        jobNo: op.jobNo,
+        custPayTypeFlag: op.custPayTypeFlag,
+        custTxblNtxblFlag: op.custTxblNtxblFlag,
+        payType: op.bill?.payType,
+        amtType: op.amount?.amtType,
+        custPrice: op.amount?.custPrice,
+        totalAmt: op.amount?.totalAmt
+      };
+    });
+  }, [rolaborPreview, opCode]);
+
+  // Totals for ROGOG (sum custPrice + dlrCost over all lines)
+  const roggTotals = useMemo(() => {
+    if (!roggPreview || !Array.isArray(roggPreview.ops)) {
+      return { totalCustPrice: "0.00", totalDlrCost: "0.00" };
+    }
+
+    let totalCustCents = 0;
+    let totalCostCents = 0;
+
+    roggPreview.ops.forEach((op) => {
+      (op.lines || []).forEach((line) => {
+        const cp = parseFloat(line.amount?.custPrice || "0");
+        if (!Number.isNaN(cp)) {
+          totalCustCents += Math.round(cp * 100);
+        }
+
+        const dc = parseFloat(line.amount?.dlrCost || "0");
+        if (!Number.isNaN(dc)) {
+          totalCostCents += Math.round(dc * 100);
+        }
+      });
+    });
+
+    return {
+      totalCustPrice: (totalCustCents / 100).toFixed(2),
+      totalDlrCost: (totalCostCents / 100).toFixed(2)
+    };
+  }, [roggPreview]);
+
+  const roggColumns = [
+    { title: "JobNo", dataIndex: "jobNo", key: "jobNo" },
+    { title: "OpCode", dataIndex: "opCode", key: "opCode" },
+    { title: "BreakOut", dataIndex: "breakOut", key: "breakOut" },
+    { title: "ItemType", dataIndex: "itemType", key: "itemType" },
+    { title: "ItemDesc", dataIndex: "itemDesc", key: "itemDesc" },
+    { title: "CustQty", dataIndex: "custQty", key: "custQty" },
+    { title: "CustTxblFlag", dataIndex: "custTxblNtxblFlag", key: "custTxblNtxblFlag" },
+    { title: "CustPrice", dataIndex: "custPrice", key: "custPrice" },
+    { title: "DlrCost", dataIndex: "dlrCost", key: "dlrCost" }
+  ];
+
+  const rolaborColumns = [
+    { title: "JobNo", dataIndex: "jobNo", key: "jobNo" },
+    { title: "OpCode", dataIndex: "opCode", key: "opCode" },
+    { title: "CustPayType", dataIndex: "custPayTypeFlag", key: "custPayTypeFlag" },
+    { title: "CustTxblFlag", dataIndex: "custTxblNtxblFlag", key: "custTxblNtxblFlag" },
+    { title: "PayType", dataIndex: "payType", key: "payType" },
+    { title: "AmtType", dataIndex: "amtType", key: "amtType" },
+    { title: "CustPrice", dataIndex: "custPrice", key: "custPrice" },
+    { title: "TotalAmt", dataIndex: "totalAmt", key: "totalAmt" }
+  ];
+
+  const tabItems = [
+    {
+      key: "rogog",
+      label: "ROGOG Preview",
+      children: (
+        <>
+          <Typography.Paragraph type="secondary" style={{ marginBottom: 8 }}>
+            OpCode: <strong>{effectiveOpCode}</strong>. Only centers with RR GOG mapping (rr_gogcode &amp; rr_item_type)
+            are included. Totals below reflect exactly what will be sent in ROGOG, with parts, extras, and labor split
+            into taxable / non-taxable segments.
+          </Typography.Paragraph>
+
+          <Table
+            pagination={false}
+            columns={roggColumns}
+            rowKey="key"
+            dataSource={roggRows}
+            locale={{ emptyText: "No ROGOG lines would be generated." }}
+            scroll={{ x: true }}
+            // 👇 visually highlight splits; especially taxable/non-taxable labor segments
+            rowClassName={(record) => {
+              if (
+                record.segmentCount > 1 &&
+                (record.segmentKind === "laborTaxable" || record.segmentKind === "laborNonTaxable")
+              ) {
+                return "rr-allocations-tax-split-row";
+              }
+              if (record.segmentCount > 1) {
+                return "rr-allocations-split-row";
+              }
+              return "";
+            }}
+            summary={() => {
+              const hasCustTotal = Number(roggTotals.totalCustPrice) !== 0;
+              const hasCostTotal = Number(roggTotals.totalDlrCost) !== 0;
+
+              return (
+                <Table.Summary.Row>
+                  <Table.Summary.Cell index={0}>
+                    <Typography.Title level={5}>{t("general.labels.totals")}</Typography.Title>
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell index={1} />
+                  <Table.Summary.Cell index={2} />
+                  <Table.Summary.Cell index={3} />
+                  <Table.Summary.Cell index={4} />
+                  <Table.Summary.Cell index={5} />
+                  <Table.Summary.Cell index={6} />
+                  <Table.Summary.Cell index={7}>{hasCustTotal ? roggTotals.totalCustPrice : null}</Table.Summary.Cell>
+                  <Table.Summary.Cell index={8}>{hasCostTotal ? roggTotals.totalDlrCost : null}</Table.Summary.Cell>
+                </Table.Summary.Row>
+              );
+            }}
+          />
+        </>
+      )
+    },
+    {
+      key: "rolabor",
+      label: "ROLABOR Preview",
+      children: (
+        <>
+          <Typography.Paragraph type="secondary" style={{ marginBottom: 8 }}>
+            This mirrors the shell that would be sent for ROLABOR when all financials are carried in GOG.
+          </Typography.Paragraph>
+          <Table
+            pagination={false}
+            columns={rolaborColumns}
+            rowKey="key"
+            dataSource={rolaborRows}
+            locale={{ emptyText: "No ROLABOR lines would be generated." }}
+            scroll={{ x: true }}
+          />
+        </>
+      )
+    }
+  ];
+
+  return (
+    <Card
+      title={title}
+      extra={
+        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
+          <SyncOutlined />
+        </Button>
+      }
+    >
+      {bodyshop.pbs_configuration?.disablebillwip && (
+        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
+      )}
+
+      {error && <Alert type="error" style={{ marginTop: 8, marginBottom: 8 }} title={error} />}
+
+      <Tabs defaultActiveKey="rogog" items={tabItems} />
+    </Card>
+  );
+}

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
 import { Button, Input, Modal, Table } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -56,11 +56,11 @@ export function DmsCdkVehicles({ form, job }) {
           setOpen(false);
         }}
       >
-        {error && <AlertComponent error={error.message} />}
+        {error && <AlertComponent title={error.message} type="error" />}
         <Table
           title={() => (
             <Input.Search
-              onSearch={(val) => callSearch({ variables: { search: val } })}
+              onSearch={(val) => callSearch({ search: val })}
               placeholder={t("general.labels.search")}
             />
           )}
@@ -87,9 +87,7 @@ export function DmsCdkVehicles({ form, job }) {
         onClick={() => {
           setOpen(true);
           callSearch({
-            variables: {
-              search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
-            }
+            search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
           });
         }}
       >

client/src/components/dms-cdk-makes/dms-cdk-makes.refetch.component.jsx

@@ -1,10 +1,11 @@
-import { Button } from "antd";
+import { Button, Space } from "antd";
 import axios from "axios";
 import { 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 { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -18,21 +19,52 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkMakesRefetch);
 export function DmsCdkMakesRefetch({ currentUser, bodyshop }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
+  const {
+    treatments: { Fortellis }
+  } = useTreatmentsWithConfig({
+    attributes: {},
+    names: ["Fortellis"],
+    splitKey: bodyshop.imexshopid
+  });
 
   if (!currentUser.email.includes("@imex.")) return null;
 
   const handleRefetch = async () => {
-    setLoading(true);
-    await axios.post("/cdk/getvehicles", {
-      cdk_dealerid: bodyshop.cdk_dealerid,
-      bodyshopid: bodyshop.id
-    });
+    try {
+      setLoading(true);
+      await axios.post(`cdk${Fortellis.treatment === "on" ? "/fortellis" : ""}/getvehicles`, {
+        cdk_dealerid: bodyshop.cdk_dealerid,
+        bodyshopid: bodyshop.id
+      });
+    } catch (error) {
+      console.error(error);
+    }
 
     setLoading(false);
   };
+
+  const handleGetCOA = async () => {
+    try {
+      setLoading(true);
+      await axios.post(`cdk/fortellis/getCOA`, {
+        cdk_dealerid: bodyshop.cdk_dealerid,
+        bodyshopid: bodyshop.id
+      });
+    } catch (error) {
+      console.error(error);
+    }
+
+    setLoading(false);
+  };
+
   return (
-    <Button loading={loading} onClick={handleRefetch}>
-      {t("jobs.actions.dms.refetchmakesmodels")}
-    </Button>
+    <Space>
+      <Button loading={loading} onClick={handleRefetch}>
+        {t("jobs.actions.dms.refetchmakesmodels")}
+      </Button>
+      <Button loading={loading} onClick={handleGetCOA}>
+        Get COA
+      </Button>
+    </Space>
   );
 }

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

@@ -0,0 +1,102 @@
+import { Button, Checkbox, Col, Table } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+export default function CDKCustomerSelector({ bodyshop, socket }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [customerList, setCustomerList] = useState([]);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+
+  useEffect(() => {
+    if (!socket) return;
+    const handleCdkSelectCustomer = (list) => {
+      setOpen(true);
+      setCustomerList(Array.isArray(list) ? list : []);
+      setSelectedCustomer(null);
+    };
+    socket.on("cdk-select-customer", handleCdkSelectCustomer);
+    return () => {
+      socket.off("cdk-select-customer", handleCdkSelectCustomer);
+    };
+  }, [socket]);
+
+  const onUseSelected = () => {
+    if (!selectedCustomer) return;
+    setOpen(false);
+    socket.emit("cdk-selected-customer", selectedCustomer);
+    setSelectedCustomer(null);
+  };
+
+  const onUseGeneric = () => {
+    const generic = bodyshop.cdk_configuration?.generic_customer_number || null;
+    setOpen(false);
+    socket.emit("cdk-selected-customer", generic);
+    setSelectedCustomer(null);
+  };
+
+  const onCreateNew = () => {
+    setOpen(false);
+    socket.emit("cdk-selected-customer", null);
+    setSelectedCustomer(null);
+  };
+
+  if (!open) return null;
+
+  const columns = [
+    { title: t("jobs.fields.dms.id"), dataIndex: ["id", "value"], key: "id" },
+    {
+      title: t("jobs.fields.dms.vinowner"),
+      dataIndex: "vinOwner",
+      key: "vinOwner",
+      render: (_t, r) => <Checkbox disabled checked={r.vinOwner} />
+    },
+    {
+      title: t("jobs.fields.dms.name1"),
+      dataIndex: ["name1", "fullName"],
+      key: "name1",
+      sorter: (a, b) => alphaSort(a.name1?.fullName, b.name1?.fullName)
+    },
+    {
+      title: t("jobs.fields.dms.address"),
+      key: "address",
+      render: (record) =>
+        `${record.address?.addressLine && record.address.addressLine[0]}, ${record.address?.city} ${
+          record.address?.stateOrProvince
+        } ${record.address?.postalCode}`
+    }
+  ];
+
+  const rowKey = (r) => r.id?.value || r.customerId;
+
+  return (
+    <Col span={24}>
+      <Table
+        title={() => (
+          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
+              {t("jobs.actions.dms.useselected")}
+            </Button>
+            <Button onClick={onUseGeneric} disabled={!bodyshop.cdk_configuration?.generic_customer_number}>
+              {t("jobs.actions.dms.usegeneric")}
+            </Button>
+            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
+          </div>
+        )}
+        pagination={{ placement: "top" }}
+        columns={columns}
+        rowKey={rowKey}
+        dataSource={customerList}
+        rowSelection={{
+          onSelect: (r) => {
+            const key = r.id?.value || r.customerId;
+            setSelectedCustomer(key ? String(key) : null);
+          },
+          type: "radio",
+          selectedRowKeys: selectedCustomer ? [selectedCustomer] : []
+        }}
+      />
+    </Col>
+  );
+}

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

@@ -1,134 +1,54 @@
-import { Button, Checkbox, Col, Table } from "antd";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { socket } from "../../pages/dms/dms.container";
+
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { alphaSort } from "../../utils/sorters";
+
+import RRCustomerSelector from "./rr-customer-selector";
+import FortellisCustomerSelector from "./fortellis-customer-selector";
+import CDKCustomerSelector from "./cdk-customer-selector";
+import PBSCustomerSelector from "./pbs-customer-selector";
+import { DMS_MAP } from "../../utils/dmsUtils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(DmsCustomerSelector);
 
-export function DmsCustomerSelector({ bodyshop }) {
-  const { t } = useTranslation();
-  const [customerList, setcustomerList] = useState([]);
-  const [open, setOpen] = useState(false);
-  const [selectedCustomer, setSelectedCustomer] = useState(null);
-  const [dmsType, setDmsType] = useState("cdk");
+/**
+ * DMS Customer Selector component that renders the appropriate customer selector
+ * @param props
+ * @returns {JSX.Element|null}
+ * @constructor
+ */
+export function DmsCustomerSelector(props) {
+  const { bodyshop, jobid, socket, rrOptions = {} } = props;
 
-  socket.on("cdk-select-customer", (customerList) => {
-    setOpen(true);
-    setDmsType("cdk");
-    setcustomerList(customerList);
-  });
-  socket.on("pbs-select-customer", (customerList) => {
-    setOpen(true);
-    setDmsType("pbs");
-    setcustomerList(customerList);
-  });
+  // Centralized "mode" (provider + transport)
+  const mode = props.mode;
 
-  const onUseSelected = () => {
-    setOpen(false);
-    socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
-    setSelectedCustomer(null);
-  };
+  // Stable base props for children
+  const base = useMemo(() => ({ bodyshop, jobid, socket }), [bodyshop, jobid, socket]);
 
-  const onUseGeneric = () => {
-    setOpen(false);
-    socket.emit(`${dmsType}-selected-customer`, bodyshop.cdk_configuration.generic_customer_number);
-    setSelectedCustomer(null);
-  };
-
-  const onCreateNew = () => {
-    setOpen(false);
-    socket.emit(`${dmsType}-selected-customer`, null);
-    setSelectedCustomer(null);
-  };
-
-  const cdkColumns = [
-    {
-      title: t("jobs.fields.dms.id"),
-      dataIndex: ["id", "value"],
-      key: "id"
-    },
-    {
-      title: t("jobs.fields.dms.vinowner"),
-      dataIndex: "vinOwner",
-      key: "vinOwner",
-      render: (text, record) => <Checkbox disabled checked={record.vinOwner} />
-    },
-    {
-      title: t("jobs.fields.dms.name1"),
-      dataIndex: ["name1", "fullName"],
-      key: "name1",
-      sorter: (a, b) => alphaSort(a.name1?.fullName, b.name1?.fullName)
-    },
-
-    {
-      title: t("jobs.fields.dms.address"),
-      //dataIndex: ["name2", "fullName"],
-      key: "address",
-      render: (record) =>
-        `${record.address?.addressLine && record.address.addressLine[0]}, ${record.address?.city} ${
-          record.address?.stateOrProvince
-        } ${record.address?.postalCode}`
+  switch (mode) {
+    case DMS_MAP.reynolds: {
+      // Map rrOptions to current RR prop shape (you can also just pass rrOptions through and unpack in RR)
+      const rrProps = {
+        rrOpenRoLimit: rrOptions.openRoLimit,
+        onRrOpenRoFinished: rrOptions.onOpenRoFinished,
+        rrValidationPending: rrOptions.validationPending,
+        onValidationFinished: rrOptions.onValidationFinished
+      };
+      return <RRCustomerSelector {...base} {...rrProps} />;
     }
-  ];
-
-  const pbsColumns = [
-    {
-      title: t("jobs.fields.dms.id"),
-      dataIndex: "ContactId",
-      key: "ContactId"
-    },
-    {
-      title: t("jobs.fields.dms.name1"),
-      key: "name1",
-      sorter: (a, b) => alphaSort(a.LastName, b.LastName),
-      render: (text, record) => `${record.FirstName || ""} ${record.LastName || ""}`
-    },
-
-    {
-      title: t("jobs.fields.dms.address"),
-      key: "address",
-      render: (record) => `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`
-    }
-  ];
-
-  if (!open) return null;
-  return (
-    <Col span={24}>
-      <Table
-        title={() => (
-          <div>
-            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
-              {t("jobs.actions.dms.useselected")}
-            </Button>
-            <Button onClick={onUseGeneric} disabled={!bodyshop.cdk_configuration?.generic_customer_number}>
-              {t("jobs.actions.dms.usegeneric")}
-            </Button>
-            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
-          </div>
-        )}
-        pagination={{ position: "top" }}
-        columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
-        rowKey={(record) => (dmsType === "cdk" ? record.id.value : record.ContactId)}
-        dataSource={customerList}
-        //onChange={handleTableChange}
-        rowSelection={{
-          onSelect: (record) => {
-            setSelectedCustomer(dmsType === "cdk" ? record.id.value : record.ContactId);
-          },
-          type: "radio",
-          selectedRowKeys: [selectedCustomer]
-        }}
-      />
-    </Col>
-  );
+    case DMS_MAP.fortellis:
+      return <FortellisCustomerSelector {...base} />;
+    case DMS_MAP.cdk:
+      return <CDKCustomerSelector {...base} />;
+    case DMS_MAP.pbs:
+      return <PBSCustomerSelector {...base} />;
+    default:
+      return null;
+  }
 }

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

@@ -0,0 +1,105 @@
+import { Button, Checkbox, Col, Table } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [customerList, setCustomerList] = useState([]);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+
+  useEffect(() => {
+    if (!socket) return;
+    const handleFortellisSelectCustomer = (list) => {
+      setOpen(true);
+      setCustomerList(Array.isArray(list) ? list : []);
+      setSelectedCustomer(null);
+    };
+    socket.on("fortellis-select-customer", handleFortellisSelectCustomer);
+    return () => {
+      socket.off("fortellis-select-customer", handleFortellisSelectCustomer);
+    };
+  }, [socket]);
+
+  const onUseSelected = () => {
+    if (!selectedCustomer) return;
+    setOpen(false);
+    socket.emit("fortellis-selected-customer", { selectedCustomerId: selectedCustomer, jobid });
+    setSelectedCustomer(null);
+  };
+
+  const onUseGeneric = () => {
+    const generic = bodyshop.cdk_configuration?.generic_customer_number || null;
+    setOpen(false);
+    socket.emit("fortellis-selected-customer", { selectedCustomerId: generic, jobid });
+    setSelectedCustomer(null);
+  };
+
+  const onCreateNew = () => {
+    setOpen(false);
+    socket.emit("fortellis-selected-customer", { selectedCustomerId: null, jobid });
+    setSelectedCustomer(null);
+  };
+
+  if (!open) return null;
+
+  const columns = [
+    { title: t("jobs.fields.dms.id"), dataIndex: "customerId", key: "id" },
+    {
+      title: t("jobs.fields.dms.vinowner"),
+      dataIndex: "vinOwner",
+      key: "vinOwner",
+      render: (_t, r) => <Checkbox disabled checked={r.vinOwner} />
+    },
+    {
+      title: t("jobs.fields.dms.name1"),
+      dataIndex: ["customerName", "firstName"],
+      key: "firstName",
+      sorter: (a, b) => alphaSort(a.customerName?.firstName, b.customerName?.firstName)
+    },
+    {
+      title: t("jobs.fields.dms.name1"),
+      dataIndex: ["customerName", "lastName"],
+      key: "lastName",
+      sorter: (a, b) => alphaSort(a.customerName?.lastName, b.customerName?.lastName)
+    },
+    {
+      title: t("jobs.fields.dms.address"),
+      key: "address",
+      render: (record) =>
+        `${record.postalAddress?.addressLine1 || ""}${
+          record.postalAddress?.addressLine2 ? `, ${record.postalAddress.addressLine2}` : ""
+        }, ${record.postalAddress?.city || ""} ${record.postalAddress?.state || ""} ${
+          record.postalAddress?.postalCode || ""
+        } ${record.postalAddress?.country || ""}`
+    }
+  ];
+
+  return (
+    <Col span={24}>
+      <Table
+        title={() => (
+          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
+              {t("jobs.actions.dms.useselected")}
+            </Button>
+            <Button onClick={onUseGeneric} disabled={!bodyshop.cdk_configuration?.generic_customer_number}>
+              {t("jobs.actions.dms.usegeneric")}
+            </Button>
+            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
+          </div>
+        )}
+        pagination={{ placement: "top" }}
+        columns={columns}
+        rowKey={(r) => r.customerId}
+        dataSource={customerList}
+        rowSelection={{
+          onSelect: (r) => setSelectedCustomer(r?.customerId ? String(r.customerId) : null),
+          type: "radio",
+          selectedRowKeys: selectedCustomer ? [selectedCustomer] : []
+        }}
+      />
+    </Col>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { Button, Col, Table } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+export default function PBSCustomerSelector({ bodyshop, socket }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [customerList, setCustomerList] = useState([]);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+
+  useEffect(() => {
+    if (!socket) return;
+    const handlePbsSelectCustomer = (list) => {
+      setOpen(true);
+      setCustomerList(Array.isArray(list) ? list : []);
+      setSelectedCustomer(null);
+    };
+    socket.on("pbs-select-customer", handlePbsSelectCustomer);
+    return () => {
+      socket.off("pbs-select-customer", handlePbsSelectCustomer);
+    };
+  }, [socket]);
+
+  const onUseSelected = () => {
+    if (!selectedCustomer) return;
+    setOpen(false);
+    socket.emit("pbs-selected-customer", selectedCustomer);
+    setSelectedCustomer(null);
+  };
+
+  // Restores old behavior: reuse the CDK-named generic number for PBS too,
+  // matching the previous single-component implementation.
+  const onUseGeneric = () => {
+    const generic = bodyshop?.cdk_configuration?.generic_customer_number || null;
+    if (!generic) return;
+    setOpen(false);
+    socket.emit("pbs-selected-customer", generic);
+    setSelectedCustomer(null);
+  };
+
+  const onCreateNew = () => {
+    setOpen(false);
+    socket.emit("pbs-selected-customer", null);
+    setSelectedCustomer(null);
+  };
+
+  if (!open) return null;
+
+  const columns = [
+    { title: t("jobs.fields.dms.id"), dataIndex: "ContactId", key: "ContactId" },
+    {
+      title: t("jobs.fields.dms.name1"),
+      key: "name1",
+      sorter: (a, b) => alphaSort(a.LastName, b.LastName),
+      render: (_t, r) => `${r.FirstName || ""} ${r.LastName || ""}`
+    },
+    {
+      title: t("jobs.fields.dms.address"),
+      key: "address",
+      render: (r) => `${r.Address}, ${r.City} ${r.State} ${r.ZipCode}`
+    }
+  ];
+
+  const hasGeneric = !!bodyshop?.cdk_configuration?.generic_customer_number;
+
+  return (
+    <Col span={24}>
+      <Table
+        title={() => (
+          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
+              {t("jobs.actions.dms.useselected")}
+            </Button>
+            <Button onClick={onUseGeneric} disabled={!hasGeneric}>
+              {t("jobs.actions.dms.usegeneric")}
+            </Button>
+            <Button onClick={onCreateNew}>{t("jobs.actions.dms.createnewcustomer")}</Button>
+          </div>
+        )}
+        pagination={{ placement: "top" }}
+        columns={columns}
+        rowKey={(r) => r.ContactId}
+        dataSource={customerList}
+        rowSelection={{
+          onSelect: (r) => setSelectedCustomer(r?.ContactId ? String(r.ContactId) : null),
+          type: "radio",
+          selectedRowKeys: selectedCustomer ? [selectedCustomer] : []
+        }}
+      />
+    </Col>
+  );
+}

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

@@ -0,0 +1,267 @@
+import { Alert, Button, Checkbox, Col, message, Space, Table } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+const normalizeRrList = (list) => {
+  if (!Array.isArray(list)) return [];
+  return list
+    .map((row) => {
+      const custNo = row.custNo || row.CustomerId || row.customerId || null;
+      const name =
+        row.name ||
+        [row.CustomerName?.FirstName, row.CustomerName?.LastName].filter(Boolean).join(" ").trim() ||
+        (custNo ? String(custNo) : "");
+      if (!custNo) return null;
+      const vinOwner = !!(row.vinOwner ?? row.isVehicleOwner);
+
+      const address =
+        row.address && typeof row.address === "object"
+          ? {
+              line1: row.address.line1 ?? row.address.addr1 ?? row.address.Address1 ?? undefined,
+              line2: row.address.line2 ?? row.address.addr2 ?? row.address.Address2 ?? undefined,
+              city: row.address.city ?? undefined,
+              state: row.address.state ?? row.address.stateOrProvince ?? undefined,
+              postalCode: row.address.postalCode ?? row.address.zip ?? undefined,
+              country: row.address.country ?? row.address.countryCode ?? undefined
+            }
+          : undefined;
+
+      return { custNo: String(custNo), name, vinOwner, address };
+    })
+    .filter(Boolean);
+};
+
+const rrAddressToString = (addr) => {
+  if (!addr) return "";
+  const parts = [
+    addr.line1,
+    addr.line2,
+    [addr.city, addr.state].filter(Boolean).join(" "),
+    addr.postalCode,
+    addr.country
+  ].filter(Boolean);
+  return parts.join(", ");
+};
+
+export default function RRCustomerSelector({
+  jobid,
+  socket,
+  rrOpenRoLimit = false,
+  onRrOpenRoFinished,
+  rrValidationPending = false,
+  onValidationFinished
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [customerList, setCustomerList] = useState([]);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // Show dialog automatically when validation is pending
+  useEffect(() => {
+    if (rrValidationPending) setOpen(true);
+  }, [rrValidationPending]);
+
+  // Listen for RR customer selection list
+  useEffect(() => {
+    if (!socket) return;
+    const handleRrSelectCustomer = (list) => {
+      const normalized = normalizeRrList(list);
+      setOpen(true);
+      setCustomerList(normalized);
+      const firstOwner = normalized.find((r) => r.vinOwner)?.custNo;
+      setSelectedCustomer(firstOwner ? String(firstOwner) : null);
+      setRefreshing(false);
+    };
+    socket.on("rr-select-customer", handleRrSelectCustomer);
+    return () => {
+      socket.off("rr-select-customer", handleRrSelectCustomer);
+    };
+  }, [socket]);
+
+  // VIN owner set
+  const rrOwnerSet = useMemo(() => {
+    return new Set(customerList.filter((c) => c?.vinOwner || c?.isVehicleOwner).map((c) => String(c.custNo)));
+  }, [customerList]);
+  const rrHasVinOwner = rrOwnerSet.size > 0;
+
+  // Enforce VIN owner stays selected if present
+  useEffect(() => {
+    if (!rrHasVinOwner) return;
+    const firstOwner = (customerList.find((c) => c.vinOwner) || {}).custNo;
+    if (firstOwner && String(selectedCustomer) !== String(firstOwner)) {
+      setSelectedCustomer(String(firstOwner));
+    }
+  }, [rrHasVinOwner, customerList, selectedCustomer]);
+
+  const onUseSelected = () => {
+    if (!selectedCustomer) {
+      message.warning(t("general.actions.select"));
+      return;
+    }
+    if (rrHasVinOwner && !rrOwnerSet.has(String(selectedCustomer))) {
+      message.warning(
+        "This VIN is already assigned in Reynolds. Only the VIN owner can be selected. To choose a different customer, change ownership in Reynolds first."
+      );
+      return;
+    }
+    socket.emit("rr-selected-customer", { jobId: jobid, custNo: String(selectedCustomer) }, (ack) => {
+      if (ack?.ok) {
+        message.success(t("dms.messages.customerSelected"));
+      } else if (ack?.error) {
+        message.error(ack.error);
+      }
+    });
+  };
+
+  const onCreateNew = () => {
+    if (rrHasVinOwner) return;
+    socket.emit("rr-selected-customer", { jobId: jobid, create: true }, (ack) => {
+      if (ack?.ok) {
+        if (ack.custNo) setSelectedCustomer(String(ack.custNo));
+        message.success(t("dms.messages.customerCreated"));
+      } else if (ack?.error) {
+        message.error(ack.error);
+      }
+    });
+  };
+
+  const refreshRrSearch = () => {
+    setRefreshing(true);
+    const to = setTimeout(() => setRefreshing(false), 12000);
+    const stop = () => {
+      clearTimeout(to);
+      setRefreshing(false);
+      socket.off("export-failed", stop);
+      socket.off("rr-select-customer", stop);
+    };
+    socket.once("rr-select-customer", stop);
+    socket.once("export-failed", stop);
+    socket.emit("rr-export-job", { jobId: jobid });
+  };
+
+  if (!open) return null;
+
+  const columns = [
+    { title: t("jobs.fields.dms.id"), dataIndex: "custNo", key: "custNo" },
+    {
+      title: t("jobs.fields.dms.vinowner"),
+      dataIndex: "vinOwner",
+      key: "vinOwner",
+      render: (_t, r) => <Checkbox disabled checked={!!(r.vinOwner ?? r.isVehicleOwner)} />
+    },
+    {
+      title: t("jobs.fields.dms.name1"),
+      dataIndex: "name",
+      key: "name",
+      sorter: (a, b) => alphaSort(a?.name, b?.name)
+    },
+    {
+      title: t("jobs.fields.dms.address"),
+      key: "address",
+      render: (record) => rrAddressToString(record.address)
+    }
+  ];
+
+  const rrDisableRow = (record) => {
+    if (!rrHasVinOwner) return false;
+    return !rrOwnerSet.has(String(record.custNo));
+  };
+
+  return (
+    <Col span={24}>
+      <Table
+        title={() => (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {/* Open RO limit banner */}
+            {rrOpenRoLimit && (
+              <Alert
+                type="error"
+                showIcon
+                title="Open RO limit reached in Reynolds"
+                description={
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                    <div>
+                      Reynolds has reached the maximum number of open Repair Orders for this Customer. Close or finalize
+                      an RO in Reynolds, then click <strong>Finished</strong> to continue.
+                    </div>
+                    <div>
+                      <Button type="primary" danger onClick={onRrOpenRoFinished}>
+                        Finished
+                      </Button>
+                    </div>
+                  </div>
+                }
+              />
+            )}
+
+            {/* Validation step banner */}
+            {rrValidationPending && (
+              <Alert
+                type="info"
+                showIcon
+                title="Complete Validation in Reynolds"
+                description={
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                    <div>
+                      We created the Repair Order. Please validate the totals and taxes in the DMS system. When done,
+                      click <strong>Finished</strong> to finalize and mark this export as complete.
+                    </div>
+                    <div>
+                      <Space>
+                        <Button type="primary" onClick={onValidationFinished}>
+                          Finished
+                        </Button>
+                      </Space>
+                    </div>
+                  </div>
+                }
+              />
+            )}
+
+            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+              <Button onClick={onUseSelected} disabled={!selectedCustomer || rrOpenRoLimit}>
+                {t("jobs.actions.dms.useselected")}
+              </Button>
+              {/* No generic in RR */}
+              <Button onClick={onCreateNew} disabled={rrHasVinOwner}>
+                {t("jobs.actions.dms.createnewcustomer")}
+              </Button>
+            </div>
+
+            {rrHasVinOwner && (
+              <Alert
+                type="warning"
+                showIcon
+                title="VIN ownership enforced"
+                description={
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
+                    <div>
+                      This VIN is already assigned in Reynolds. Only the VIN owner is selectable here. To use a
+                      different customer, please change the vehicle ownership in Reynolds first, then return to complete
+                      the export.
+                    </div>
+                    <Button onClick={refreshRrSearch} loading={refreshing}>
+                      Refresh
+                    </Button>
+                  </div>
+                }
+              />
+            )}
+          </div>
+        )}
+        pagination={{ placement: "top" }}
+        columns={columns}
+        rowKey={(r) => r.custNo}
+        dataSource={customerList}
+        rowSelection={{
+          onSelect: (record) => setSelectedCustomer(record?.custNo ? String(record.custNo) : null),
+          type: "radio",
+          selectedRowKeys: selectedCustomer ? [selectedCustomer] : [],
+          getCheckboxProps: (record) => ({ disabled: rrDisableRow(record) })
+        }}
+      />
+    </Col>
+  );
+}

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

@@ -1,50 +1,234 @@
 import { Divider, Space, Tag, Timeline } from "antd";
+import { useEffect, useMemo, useState } from "react";
 import dayjs from "../../utils/day";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 
-const mapStateToProps = createStructuredSelector({});
-
-const mapDispatchToProps = (dispatch) => ({
-  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
-  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
+const mapStateToProps = createStructuredSelector({
+  isDarkMode: selectDarkMode
 });
 
+const mapDispatchToProps = () => ({});
+
 export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
 
-export function DmsLogEvents({ logs }) {
-  return (
-    <Timeline
-      pending
-      reverse={true}
-      items={logs.map((log, idx) => ({
-        key: idx,
-        color: LogLevelHierarchy(log.level),
-        children: (
-          <Space wrap align="start" style={{}}>
-            <Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
-            <span>{dayjs(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
-            <Divider type="vertical" />
-            <span>{log.message}</span>
-          </Space>
-        )
-      }))}
-    />
+export function DmsLogEvents({
+  logs,
+  detailsOpen,
+  detailsNonce,
+  isDarkMode,
+  colorizeJson = false,
+  showDetails = true
+}) {
+  const [openSet, setOpenSet] = useState(() => new Set());
+
+  // Inject JSON highlight styles once (only when colorize is enabled)
+  useEffect(() => {
+    if (!colorizeJson) return;
+    if (typeof document === "undefined") return;
+    if (document.getElementById("json-highlight-styles")) return;
+    const style = document.createElement("style");
+    style.id = "json-highlight-styles";
+    style.textContent = `
+      .json-key { color: #fa8c16; }
+      .json-string { color: #52c41a; }
+      .json-number { color: #722ed1; }
+      .json-boolean { color: #1890ff; }
+      .json-null { color: #faad14; }
+    `;
+    document.head.appendChild(style);
+  }, [colorizeJson]);
+
+  // Trim openSet if logs shrink
+  useEffect(() => {
+    const len = (logs || []).length;
+    setOpenSet((prev) => {
+      const next = new Set();
+      for (let i = 0; i < len; i++) if (prev.has(i)) next.add(i);
+      return next;
+    });
+  }, [logs?.length]);
+
+  // Respond to global toggle button
+  useEffect(() => {
+    if (detailsNonce == null) return;
+    const len = (logs || []).length;
+    setOpenSet(detailsOpen ? new Set(Array.from({ length: len }, (_, i) => i)) : new Set());
+  }, [detailsNonce, detailsOpen, logs?.length]);
+
+  const items = useMemo(
+    () =>
+      (logs || []).map((raw, idx) => {
+        const { level, message, timestamp, meta } = normalizeLog(raw);
+
+        // Only treat meta as "present" when we are allowed to show details
+        const hasMeta = !isEmpty(meta) && showDetails;
+        const isOpen = hasMeta && openSet.has(idx);
+
+        return {
+          key: idx,
+          color: logLevelColor(level),
+          children: (
+            <Space orientation="vertical" size={4} style={{ display: "flex" }}>
+              {/* Row 1: summary + inline "Details" toggle */}
+              <Space wrap align="start">
+                <Tag color={logLevelColor(level)}>{level}</Tag>
+                <Divider orientation="vertical" />
+                <span>{dayjs(timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
+                <Divider orientation="vertical" />
+                <span>{message}</span>
+                {hasMeta && (
+                  <>
+                    <Divider orientation="vertical" />
+                    <a
+                      role="button"
+                      aria-expanded={isOpen}
+                      onClick={() =>
+                        setOpenSet((prev) => {
+                          const next = new Set(prev);
+                          if (isOpen) next.delete(idx);
+                          else next.add(idx);
+                          return next;
+                        })
+                      }
+                      style={{ cursor: "pointer", userSelect: "none" }}
+                    >
+                      {isOpen ? "Hide details" : "Details"}
+                    </a>
+                  </>
+                )}
+              </Space>
+
+              {/* Row 2: details body (only when open) */}
+              {hasMeta && isOpen && (
+                <div style={{ marginLeft: 6 }}>
+                  <JsonBlock isDarkMode={isDarkMode} data={meta} colorize={colorizeJson} />
+                </div>
+              )}
+            </Space>
+          )
+        };
+      }),
+    [logs, openSet, colorizeJson, isDarkMode, showDetails]
   );
+
+  return <Timeline pending reverse items={items} />;
 }
 
-function LogLevelHierarchy(level) {
-  switch (level) {
+/**
+ * Normalize various log input formats into a standard structure.
+ * @param input
+ * @returns {{level: string, message: *|string, timestamp: Date, meta: *}}
+ */
+const normalizeLog = (input) => {
+  const n = input?.normalized || input || {};
+  const level = (n.level || input?.level || "INFO").toString().toUpperCase();
+  const message = n.message ?? input?.message ?? "";
+  const meta = input?.meta != null ? input.meta : n.meta != null ? n.meta : undefined;
+  const tsRaw = input?.timestamp ?? n.timestamp ?? input?.ts ?? Date.now();
+  const timestamp = typeof tsRaw === "number" ? new Date(tsRaw) : new Date(tsRaw);
+  return { level, message, timestamp, meta };
+};
+
+/**
+ * Map log level to tag color.
+ * @param level
+ * @returns {string}
+ */
+const logLevelColor = (level) => {
+  switch ((level || "").toUpperCase()) {
+    case "SILLY":
+      return "purple";
     case "DEBUG":
       return "orange";
     case "INFO":
       return "blue";
     case "WARN":
+    case "WARNING":
       return "yellow";
     case "ERROR":
       return "red";
     default:
-      return 0;
+      return "default";
   }
-}
+};
+
+/**
+ * Check if a value is "empty" (null/undefined, empty array, or empty object).
+ * @param v
+ */
+const isEmpty = (v) => {
+  if (v == null) return true;
+  if (Array.isArray(v)) return v.length === 0;
+  if (typeof v === "object") return Object.keys(v).length === 0;
+  return false;
+};
+
+/**
+ * Safely stringify an object to JSON, falling back to String() on failure.
+ * @param obj
+ * @param spaces
+ * @returns {string}
+ */
+const safeStringify = (obj, spaces = 2) => {
+  try {
+    return JSON.stringify(obj, null, spaces);
+  } catch {
+    return String(obj);
+  }
+};
+
+/**
+ * JSON display block with optional syntax highlighting.
+ * @param data
+ * @param colorize
+ * @param isDarkMode
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JsonBlock = ({ data, colorize, isDarkMode }) => {
+  const jsonText = safeStringify(data, 2);
+  const preStyle = {
+    margin: "6px 0 0",
+    maxWidth: 720,
+    overflowX: "auto",
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: 12,
+    lineHeight: 1.45,
+    padding: 8,
+    borderRadius: 6,
+    background: isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.04)",
+    border: isDarkMode ? "1px solid rgba(255,255,255,0.12)" : "1px solid rgba(0,0,0,0.08)",
+    color: isDarkMode ? "var(--card-text-fallback)" : "#141414"
+  };
+
+  if (colorize) {
+    const html = syntaxHighlight(jsonText);
+    return <pre style={preStyle} dangerouslySetInnerHTML={{ __html: html }} />;
+  }
+  return <pre style={preStyle}>{jsonText}</pre>;
+};
+
+/**
+ * Syntax highlight JSON text for HTML display.
+ * @param jsonText
+ * @returns {*}
+ */
+const syntaxHighlight = (jsonText) => {
+  const esc = jsonText.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return esc.replace(
+    /("(?:\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,
+    (match) => {
+      let cls = "json-number";
+      if (match.startsWith('"')) {
+        cls = match.endsWith(":") ? "json-key" : "json-string";
+      } else if (match === "true" || match === "false") {
+        cls = "json-boolean";
+      } else if (match === "null") {
+        cls = "json-null";
+      }
+      return `<span class="${cls}">${match}</span>`;
+    }
+  );
+};

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

@@ -0,0 +1,420 @@
+import { DeleteFilled, DownOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Dropdown,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+  Space,
+  Statistic,
+  Switch,
+  Tooltip,
+  Typography
+} from "antd";
+import Dinero from "dinero.js";
+import { useTranslation } from "react-i18next";
+import { useMemo, useState } from "react";
+import i18n from "../../translations/i18n";
+import dayjs from "../../utils/day";
+import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
+import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import { DMS_MAP } from "../../utils/dmsUtils";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+
+/**
+ * CDK-like DMS post form:
+ *  - CDK / Fortellis / PBS
+ *  - CDK vehicle details + make/model selection
+ *  - Payer list with discrepancy gating
+ *  - Submit: "{mode}-export-job"
+ * @param bodyshop
+ * @param socket
+ * @param job
+ * @param logsRef
+ * @param mode
+ * @param allocationsSummary
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode, allocationsSummary }) {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const [, /*unused*/ setTick] = useState(0); // handy if you need a forceUpdate later
+
+  const {
+    treatments: { Fortellis }
+  } = useTreatmentsWithConfig({
+    attributes: {},
+    names: ["Fortellis"],
+    splitKey: bodyshop.imexshopid
+  });
+
+  const initialValues = useMemo(
+    () => ({
+      story: `${t("jobs.labels.dms.defaultstory", {
+        ro_number: job.ro_number,
+        ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`.trim(),
+        ins_co_nm: job.ins_co_nm || "N/A",
+        clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${job.po_number || ""}`
+      }).trim()}.${
+        job.area_of_damage?.impact1
+          ? " " +
+            t("jobs.labels.dms.damageto", {
+              area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
+            })
+          : ""
+      }`.slice(0, 239),
+      inservicedate: dayjs(
+        `${
+          (job.v_model_yr &&
+            (job.v_model_yr < 100
+              ? job.v_model_yr >= (dayjs().year() + 1) % 100
+                ? 1900 + parseInt(job.v_model_yr, 10)
+                : 2000 + parseInt(job.v_model_yr, 10)
+              : job.v_model_yr)) ||
+          2019
+        }-01-01`
+      ),
+      journal: bodyshop.cdk_configuration?.default_journal
+    }),
+    [job, bodyshop, t]
+  );
+
+  // Payers helpers
+  const handlePayerSelect = (value, index) => {
+    form.setFieldsValue({
+      payers: (form.getFieldValue("payers") || []).map((payer, mapIndex) => {
+        if (index !== mapIndex) return payer;
+        const cdkPayer =
+          bodyshop.cdk_configuration.payers && bodyshop.cdk_configuration.payers.find((i) => i.name === value);
+        if (!cdkPayer) return payer;
+        return {
+          ...cdkPayer,
+          dms_acctnumber: cdkPayer.dms_acctnumber,
+          controlnumber: job?.[cdkPayer.control_type]
+        };
+      })
+    });
+    setTick((n) => n + 1);
+  };
+
+  const handleFinish = (values) => {
+    if (!socket) return;
+
+    if (mode === DMS_MAP.fortellis) {
+      socket.emit("fortellis-export-job", {
+        jobid: job.id,
+        txEnvelope: { ...values, SubscriptionID: bodyshop.cdk_dealerid }
+      });
+    } else {
+      socket.emit(`${mode}-export-job`, { jobid: job.id, txEnvelope: values });
+    }
+
+    logsRef?.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  // Totals & discrepancy
+  const totals = useMemo(() => {
+    if (!allocationsSummary || allocationsSummary.length === 0) {
+      return { totalSale: Dinero(), totalCost: Dinero() };
+    }
+
+    return allocationsSummary.reduce(
+      (acc, val) => ({
+        totalSale: acc.totalSale.add(Dinero(val.sale)),
+        totalCost: acc.totalCost.add(Dinero(val.cost))
+      }),
+      { totalSale: Dinero(), totalCost: Dinero() }
+    );
+  }, [allocationsSummary]);
+
+  return (
+    <Card title={t("jobs.labels.dms.postingform")}>
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleFinish}
+        style={{ width: "100%" }}
+        initialValues={initialValues}
+      >
+        {/* TOP ROW */}
+        <Row gutter={[16, 12]} align="bottom">
+          <Col xs={24} sm={12} md={8} lg={6}>
+            <Form.Item name="journal" label={t("jobs.fields.dms.journal")} rules={[{ required: true }]}>
+              <Input />
+            </Form.Item>
+          </Col>
+
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Form.Item name="kmin" label={t("jobs.fields.kmin")} initialValue={job?.kmin} rules={[{ required: true }]}>
+              <InputNumber style={{ width: "100%" }} disabled />
+            </Form.Item>
+          </Col>
+
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Form.Item
+              name="kmout"
+              label={t("jobs.fields.kmout")}
+              initialValue={job?.kmout}
+              rules={[{ required: true }]}
+            >
+              <InputNumber style={{ width: "100%" }} disabled />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        {/* CDK vehicle details (kept for CDK/Fortellis paths when dealer id exists) */}
+        {bodyshop.cdk_dealerid && (
+          <>
+            <Row gutter={[16, 12]}>
+              <Col xs={24} sm={12} md={8}>
+                <Form.Item name="dms_make" label={t("jobs.fields.dms.dms_make")} rules={[{ required: true }]}>
+                  <Input disabled />
+                </Form.Item>
+              </Col>
+              <Col xs={24} sm={12} md={8}>
+                <Form.Item name="dms_model" label={t("jobs.fields.dms.dms_model")} rules={[{ required: true }]}>
+                  <Input disabled />
+                </Form.Item>
+              </Col>
+              <Col xs={24} sm={12} md={8}>
+                <Form.Item name="inservicedate" label={t("jobs.fields.dms.inservicedate")}>
+                  <DateTimePicker isDateOnly />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={[16, 12]} align="middle">
+              <Col>
+                <DmsCdkMakes form={form} job={job} />
+              </Col>
+              <Col>
+                <DmsCdkMakesRefetch />
+              </Col>
+              <Col>
+                <Form.Item name="dms_unsold" label={t("jobs.fields.dms.dms_unsold")} initialValue={false}>
+                  <Switch />
+                </Form.Item>
+              </Col>
+              <Col>
+                <Form.Item
+                  name="dms_model_override"
+                  label={t("jobs.fields.dms.dms_model_override")}
+                  initialValue={false}
+                >
+                  <Switch />
+                </Form.Item>
+              </Col>
+            </Row>
+          </>
+        )}
+
+        <Row gutter={[16, 12]}>
+          <Col span={24}>
+            <Form.Item name="story" label={t("jobs.fields.dms.story")} rules={[{ required: true }]}>
+              <Input.TextArea maxLength={Fortellis.treatment === "on" ? 40 : 240} showCount />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Divider />
+
+        {/* Totals */}
+        <Space size="large" wrap align="center" style={{ marginBottom: 16 }}>
+          <Statistic
+            title={t("jobs.fields.ded_amt")}
+            value={Dinero(job.job_totals.totals.custPayable.deductible).toFormat()}
+          />
+          <Statistic
+            title={t("jobs.labels.total_cust_payable")}
+            value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
+          />
+          <Statistic
+            title={t("jobs.labels.net_repairs")}
+            value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
+          />
+        </Space>
+
+        {/* Payers list */}
+        <Divider />
+        <Form.List name={["payers"]}>
+          {(fields, { add, remove }) => (
+            <div>
+              {fields.map((field, index) => (
+                <Card
+                  key={field.key}
+                  size="small"
+                  style={{ marginBottom: 12 }}
+                  title={`${t("jobs.fields.dms.payer.payer_type")} #${index + 1}`}
+                  extra={
+                    <Tooltip title={t("general.actions.remove", "Remove")}>
+                      <Button
+                        type="text"
+                        danger
+                        icon={<DeleteFilled />}
+                        aria-label={t("general.actions.remove", "Remove")}
+                        onClick={() => remove(field.name)}
+                      />
+                    </Tooltip>
+                  }
+                >
+                  <Row gutter={[16, 8]} align="middle">
+                    <Col xs={24} sm={12} md={8} lg={6}>
+                      <Form.Item
+                        label={t("jobs.fields.dms.payer.name")}
+                        name={[field.name, "name"]}
+                        rules={[{ required: true }]}
+                      >
+                        <Select style={{ minWidth: "15rem" }} onSelect={(value) => handlePayerSelect(value, index)}>
+                          {bodyshop.cdk_configuration?.payers?.map((payer) => (
+                            <Select.Option key={payer.name}>{payer.name}</Select.Option>
+                          ))}
+                        </Select>
+                      </Form.Item>
+                    </Col>
+
+                    <Col xs={24} sm={12} md={8} lg={6}>
+                      <Form.Item
+                        label={t("jobs.fields.dms.payer.dms_acctnumber")}
+                        name={[field.name, "dms_acctnumber"]}
+                        rules={[{ required: true }]}
+                      >
+                        <Input disabled />
+                      </Form.Item>
+                    </Col>
+
+                    <Col xs={24} sm={12} md={8} lg={5}>
+                      <Form.Item
+                        label={t("jobs.fields.dms.payer.amount")}
+                        name={[field.name, "amount"]}
+                        rules={[{ required: true }]}
+                      >
+                        <CurrencyInput min={0} />
+                      </Form.Item>
+                    </Col>
+
+                    <Col xs={24} sm={12} md={10} lg={7}>
+                      <Form.Item
+                        label={
+                          <div>
+                            {t("jobs.fields.dms.payer.controlnumber")}{" "}
+                            <Dropdown
+                              trigger={["click"]}
+                              menu={{
+                                items:
+                                  bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
+                                    key: idx,
+                                    label: key.name,
+                                    onClick: () => {
+                                      form.setFieldsValue({
+                                        payers: (form.getFieldValue("payers") || []).map((row, mapIndex) => {
+                                          if (index !== mapIndex) return row;
+                                          return { ...row, controlnumber: key.controlnumber };
+                                        })
+                                      });
+                                    }
+                                  })) ?? []
+                              }}
+                            >
+                              <a href="#" onClick={(e) => e.preventDefault()}>
+                                <DownOutlined />
+                              </a>
+                            </Dropdown>
+                          </div>
+                        }
+                        name={[field.name, "controlnumber"]}
+                        rules={[{ required: true }]}
+                      >
+                        <Input />
+                      </Form.Item>
+                    </Col>
+
+                    <Col xs={24}>
+                      <Form.Item shouldUpdate noStyle>
+                        {() => {
+                          const payers = form.getFieldValue("payers");
+                          const row = payers?.[index];
+                          const cdkPayer =
+                            bodyshop.cdk_configuration.payers &&
+                            bodyshop.cdk_configuration.payers.find((i) => i && row && i.name === row.name);
+                          if (i18n.exists(`jobs.fields.${cdkPayer?.control_type}`))
+                            return <div>{cdkPayer && t(`jobs.fields.${cdkPayer?.control_type}`)}</div>;
+                          else if (i18n.exists(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)) {
+                            return <div>{cdkPayer && t(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)}</div>;
+                          } else {
+                            return null;
+                          }
+                        }}
+                      </Form.Item>
+                    </Col>
+                  </Row>
+                </Card>
+              ))}
+              <Form.Item>
+                <Button
+                  disabled={!(fields.length < 3)}
+                  onClick={() => {
+                    if (fields.length < 3) add();
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("jobs.actions.dms.addpayer")}
+                </Button>
+              </Form.Item>
+            </div>
+          )}
+        </Form.List>
+
+        {/* Validation gates & summary */}
+        <Form.Item shouldUpdate>
+          {() => {
+            let totalAllocated = Dinero();
+            const payers = form.getFieldValue("payers") || [];
+            payers.forEach((payer) => {
+              totalAllocated = totalAllocated.add(Dinero({ amount: Math.round((payer?.amount || 0) * 100) }));
+            });
+
+            const discrep = totals ? totals.totalSale.subtract(totalAllocated) : Dinero();
+
+            // gate: must have payers filled + zero discrepancy when we have a summary
+            const payersOk =
+              payers.length > 0 &&
+              payers.every((p) => p?.name && p.dms_acctnumber && (p.amount ?? "") !== "" && p.controlnumber);
+
+            const hasAllocations = allocationsSummary && allocationsSummary.length > 0;
+            const nonRrDiscrepancyGate = hasAllocations ? discrep.getAmount() !== 0 : true;
+
+            const disablePost = !payersOk || nonRrDiscrepancyGate;
+
+            return (
+              <Space size="large" wrap align="center">
+                <Statistic
+                  title={t("jobs.labels.subtotal")}
+                  value={(totals ? totals.totalSale : Dinero()).toFormat()}
+                />
+                <Typography.Title>-</Typography.Title>
+                <Statistic title={t("jobs.labels.dms.totalallocated")} value={totalAllocated.toFormat()} />
+                <Typography.Title>=</Typography.Title>
+                <Statistic
+                  title={t("jobs.labels.dms.notallocated")}
+                  styles={{ value: { color: discrep.getAmount() === 0 ? "green" : "red" } }}
+                  value={discrep.toFormat()}
+                />
+                <Button disabled={disablePost} htmlType="submit">
+                  {t("jobs.actions.dms.post")}
+                </Button>
+              </Space>
+            );
+          }}
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+}

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

@@ -1,396 +1,75 @@
-import { DeleteFilled, DownOutlined } from "@ant-design/icons";
-import {
-  Button,
-  Card,
-  Divider,
-  Dropdown,
-  Form,
-  Input,
-  InputNumber,
-  Select,
-  Space,
-  Statistic,
-  Switch,
-  Typography
-} from "antd";
-import Dinero from "dinero.js";
-import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { determineDmsType } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import i18n from "../../translations/i18n";
-import dayjs from "../../utils/day";
-import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
-import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { DMS_MAP } from "../../utils/dmsUtils";
+import RRPostForm from "./rr-dms-post-form";
+import CdkLikePostForm from "./cdklike-dms-post-form";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
+
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
 
-export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
-  const [form] = Form.useForm();
-  const { t } = useTranslation();
+/**
+ * DMS Post Form component that renders the appropriate post form
+ * @param mode
+ * @param bodyshop
+ * @param socket
+ * @param job
+ * @param logsRef
+ * @param key
+ * @param allocationsSummary
+ * @param rrOpCodeParts
+ * @param onChangeRrOpCodeParts
+ * @returns {JSX.Element|null}
+ * @constructor
+ */
+export function DmsPostForm({
+  mode,
+  bodyshop,
+  socket,
+  job,
+  logsRef,
+  key,
+  allocationsSummary,
+  rrOpCodeParts,
+  onChangeRrOpCodeParts
+}) {
+  switch (mode) {
+    case DMS_MAP.reynolds:
+      return (
+        <RRPostForm
+          bodyshop={bodyshop}
+          socket={socket}
+          job={job}
+          logsRef={logsRef}
+          key={key}
+          allocationsSummary={allocationsSummary}
+          opCodeParts={rrOpCodeParts}
+          onChangeOpCodeParts={onChangeRrOpCodeParts}
+        />
+      );
 
-  const handlePayerSelect = (value, index) => {
-    form.setFieldsValue({
-      payers: form.getFieldValue("payers").map((payer, mapIndex) => {
-        if (index !== mapIndex) return payer;
-        const cdkPayer =
-          bodyshop.cdk_configuration.payers && bodyshop.cdk_configuration.payers.find((i) => i.name === value);
+    // CDK (legacy /ws), Fortellis (CDK-over-WSS), and PBS share the same UI;
+    // we pass mode down so the child can choose the correct event name.
+    case DMS_MAP.fortellis:
+    case DMS_MAP.cdk:
+    case DMS_MAP.pbs:
+      return (
+        <CdkLikePostForm
+          mode={mode}
+          bodyshop={bodyshop}
+          socket={socket}
+          job={job}
+          logsRef={logsRef}
+          key={key}
+          allocationsSummary={allocationsSummary}
+        />
+      );
 
-        if (!cdkPayer) return payer;
-
-        return {
-          ...cdkPayer,
-          dms_acctnumber: cdkPayer.dms_acctnumber,
-          controlnumber: job && job[cdkPayer.control_type]
-        };
-      })
-    });
-  };
-
-  const handleFinish = (values) => {
-    socket.emit(`${determineDmsType(bodyshop)}-export-job`, {
-      jobid: job.id,
-      txEnvelope: values
-    });
-    console.log(logsRef);
-    if (logsRef) {
-      console.log("executing", logsRef);
-      logsRef.curent &&
-        logsRef.current.scrollIntoView({
-          behavior: "smooth"
-        });
-    }
-  };
-
-  return (
-    <Card title={t("jobs.labels.dms.postingform")}>
-      <Form
-        form={form}
-        layout="vertical"
-        onFinish={handleFinish}
-        initialValues={{
-          story: `${t("jobs.labels.dms.defaultstory", {
-            ro_number: job.ro_number,
-            ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`.trim(),
-            ins_co_nm: job.ins_co_nm || "N/A",
-            clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${job.po_number || ""}`
-          }).trim()}.${
-            job.area_of_damage && job.area_of_damage.impact1
-              ? " " +
-                t("jobs.labels.dms.damageto", {
-                  area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
-                })
-              : ""
-          }`.slice(0, 239),
-          inservicedate: dayjs(
-            `${(job.v_model_yr && (job.v_model_yr < 100 ? (job.v_model_yr >= (dayjs().year() + 1) % 100 ? 1900 + parseInt(job.v_model_yr) : 2000 + parseInt(job.v_model_yr)) : job.v_model_yr)) || 2019}-01-01`
-          )
-        }}
-      >
-        <LayoutFormRow grow>
-          <Form.Item
-            name="journal"
-            label={t("jobs.fields.dms.journal")}
-            initialValue={bodyshop.cdk_configuration && bodyshop.cdk_configuration.default_journal}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            name="kmin"
-            label={t("jobs.fields.kmin")}
-            initialValue={job && job.kmin}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber disabled />
-          </Form.Item>
-          <Form.Item
-            name="kmout"
-            label={t("jobs.fields.kmout")}
-            initialValue={job && job.kmout}
-            rules={[
-              {
-                required: true
-                //message: t("general.validation.required"),
-              }
-            ]}
-          >
-            <InputNumber disabled />
-          </Form.Item>
-        </LayoutFormRow>
-
-        {bodyshop.cdk_dealerid && (
-          <div>
-            <LayoutFormRow style={{ justifyContent: "center" }} grow>
-              <Form.Item
-                name="dms_make"
-                label={t("jobs.fields.dms.dms_make")}
-                rules={[
-                  {
-                    required: true
-                  }
-                ]}
-              >
-                <Input disabled />
-              </Form.Item>
-              <Form.Item
-                name="dms_model"
-                label={t("jobs.fields.dms.dms_model")}
-                rules={[
-                  {
-                    required: true
-                  }
-                ]}
-              >
-                <Input disabled />
-              </Form.Item>
-              <Form.Item name="inservicedate" label={t("jobs.fields.dms.inservicedate")}>
-                <DateTimePicker isDateOnly />
-              </Form.Item>
-            </LayoutFormRow>
-            <Space>
-              <DmsCdkMakes form={form} socket={socket} job={job} />
-              <DmsCdkMakesRefetch />
-              <Form.Item name="dms_unsold" label={t("jobs.fields.dms.dms_unsold")} initialValue={false}>
-                <Switch />
-              </Form.Item>
-              <Form.Item name="dms_model_override" label={t("jobs.fields.dms.dms_model_override")} initialValue={false}>
-                <Switch />
-              </Form.Item>
-            </Space>
-          </div>
-        )}
-        <Form.Item
-          name="story"
-          label={t("jobs.fields.dms.story")}
-          rules={[
-            {
-              required: true
-            }
-          ]}
-        >
-          <Input.TextArea maxLength={240} />
-        </Form.Item>
-
-        <Divider />
-        <Space size="large" wrap align="center">
-          <Statistic
-            title={t("jobs.fields.ded_amt")}
-            value={Dinero(job.job_totals.totals.custPayable.deductible).toFormat()}
-          />
-          <Statistic
-            title={t("jobs.labels.total_cust_payable")}
-            value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
-          />
-          <Statistic
-            title={t("jobs.labels.net_repairs")}
-            value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
-          />
-        </Space>
-        <Form.List name={["payers"]}>
-          {(fields, { add, remove }) => {
-            return (
-              <div>
-                {fields.map((field, index) => (
-                  <Form.Item key={field.key}>
-                    <Space wrap>
-                      <Form.Item
-                        label={t("jobs.fields.dms.payer.name")}
-                        key={`${index}name`}
-                        name={[field.name, "name"]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
-                      >
-                        <Select style={{ minWidth: "15rem" }} onSelect={(value) => handlePayerSelect(value, index)}>
-                          {bodyshop.cdk_configuration &&
-                            bodyshop.cdk_configuration.payers &&
-                            bodyshop.cdk_configuration.payers.map((payer) => (
-                              <Select.Option key={payer.name}>{payer.name}</Select.Option>
-                            ))}
-                        </Select>
-                      </Form.Item>
-
-                      <Form.Item
-                        label={t("jobs.fields.dms.payer.dms_acctnumber")}
-                        key={`${index}dms_acctnumber`}
-                        name={[field.name, "dms_acctnumber"]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
-                      >
-                        <Input disabled />
-                      </Form.Item>
-
-                      <Form.Item
-                        label={t("jobs.fields.dms.payer.amount")}
-                        key={`${index}amount`}
-                        name={[field.name, "amount"]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
-                      >
-                        <CurrencyInput min={0} />
-                      </Form.Item>
-
-                      <Form.Item
-                        label={
-                          <div>
-                            {t("jobs.fields.dms.payer.controlnumber")}{" "}
-                            <Dropdown
-                              menu={{
-                                items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
-                                  key: idx,
-                                  label: key.name,
-                                  onClick: () => {
-                                    form.setFieldsValue({
-                                      payers: form.getFieldValue("payers").map((row, mapIndex) => {
-                                        if (index !== mapIndex) return row;
-                                        return {
-                                          ...row,
-                                          controlnumber: key.controlnumber
-                                        };
-                                      })
-                                    });
-                                  }
-                                }))
-                              }}
-                            >
-                              <a href=" #" onClick={(e) => e.preventDefault()}>
-                                <DownOutlined />
-                              </a>
-                            </Dropdown>
-                          </div>
-                        }
-                        key={`${index}controlnumber`}
-                        name={[field.name, "controlnumber"]}
-                        rules={[
-                          {
-                            required: true
-                          }
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-
-                      <Form.Item shouldUpdate>
-                        {() => {
-                          const payers = form.getFieldValue("payers");
-
-                          const row = payers && payers[index];
-
-                          const cdkPayer =
-                            bodyshop.cdk_configuration.payers &&
-                            bodyshop.cdk_configuration.payers.find((i) => i && row && i.name === row.name);
-                          if (i18n.exists(`jobs.fields.${cdkPayer?.control_type}`))
-                            return <div>{cdkPayer && t(`jobs.fields.${cdkPayer?.control_type}`)}</div>;
-                          else if (i18n.exists(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)) {
-                            return <div>{cdkPayer && t(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)}</div>;
-                          } else {
-                            return null;
-                          }
-                        }}
-                      </Form.Item>
-
-                      <DeleteFilled
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
-                    </Space>
-                  </Form.Item>
-                ))}
-                <Form.Item>
-                  <Button
-                    disabled={!(fields.length < 3)}
-                    onClick={() => {
-                      if (fields.length < 3) add();
-                    }}
-                    style={{ width: "100%" }}
-                  >
-                    {t("jobs.actions.dms.addpayer")}
-                  </Button>
-                </Form.Item>
-              </div>
-            );
-          }}
-        </Form.List>
-        <Form.Item shouldUpdate>
-          {() => {
-            //Perform Calculation to determine discrepancy.
-            let totalAllocated = Dinero();
-
-            const payers = form.getFieldValue("payers");
-            payers &&
-              payers.forEach((payer) => {
-                totalAllocated = totalAllocated.add(Dinero({ amount: Math.round((payer?.amount || 0) * 100) }));
-              });
-
-            const totals =
-              socket.allocationsSummary &&
-              socket.allocationsSummary.reduce(
-                (acc, val) => {
-                  return {
-                    totalSale: acc.totalSale.add(Dinero(val.sale)),
-                    totalCost: acc.totalCost.add(Dinero(val.cost))
-                  };
-                },
-                {
-                  totalSale: Dinero(),
-                  totalCost: Dinero()
-                }
-              );
-            const discrep = totals ? totals.totalSale.subtract(totalAllocated) : Dinero();
-            return (
-              <Space size="large" wrap align="center">
-                <Statistic
-                  title={t("jobs.labels.subtotal")}
-                  value={(totals ? totals.totalSale : Dinero()).toFormat()}
-                />
-                <Typography.Title>-</Typography.Title>
-                <Statistic title={t("jobs.labels.dms.totalallocated")} value={totalAllocated.toFormat()} />
-                <Typography.Title>=</Typography.Title>
-                <Statistic
-                  title={t("jobs.labels.dms.notallocated")}
-                  valueStyle={{
-                    color: discrep.getAmount() === 0 ? "green" : "red"
-                  }}
-                  value={discrep.toFormat()}
-                />
-                <Button disabled={!socket.allocationsSummary || discrep.getAmount() !== 0} htmlType="submit">
-                  {t("jobs.actions.dms.post")}
-                </Button>
-              </Space>
-            );
-          }}
-        </Form.Item>
-      </Form>
-    </Card>
-  );
+    default:
+      return null;
+  }
 }

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

@@ -0,0 +1,373 @@
+import { ReloadOutlined, RollbackOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+  Space,
+  Statistic,
+  Tooltip,
+  Typography
+} from "antd";
+import Dinero from "dinero.js";
+import { useTranslation } from "react-i18next";
+import { useEffect, useMemo, useState } from "react";
+import dayjs from "../../utils/day";
+
+/**
+ * RR DMS Post Form component
+ * Submit: "rr-export-job"
+ * @param bodyshop
+ * @param socket
+ * @param job
+ * @param logsRef
+ * @param allocationsSummary
+ * @param opCodeParts          // { prefix, base, suffix } from container
+ * @param onChangeOpCodeParts  // (partsWithFlags) => void
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function RRPostForm({
+  bodyshop,
+  socket,
+  job,
+  logsRef,
+  allocationsSummary,
+  opCodeParts,
+  onChangeOpCodeParts
+}) {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  // Capture the baseline/default OpCode parts ONCE per mount (tied to resetKey in container)
+  const [baselineOpCodeParts] = useState(() => ({
+    prefix: opCodeParts?.prefix ?? "",
+    base: opCodeParts?.base ?? "",
+    suffix: opCodeParts?.suffix ?? ""
+  }));
+
+  // Advisors
+  const [advisors, setAdvisors] = useState([]);
+  const [advLoading, setAdvLoading] = useState(false);
+
+  const getAdvisorNumber = (a) => a?.advisorId;
+  const getAdvisorLabel = (a) => `${a?.firstName || ""} ${a?.lastName || ""}`.trim();
+
+  const fetchRrAdvisors = (refresh = false) => {
+    if (!socket) return;
+    setAdvLoading(true);
+
+    const onResult = (payload) => {
+      try {
+        const list = payload?.result ?? payload ?? [];
+        setAdvisors(Array.isArray(list) ? list : []);
+      } finally {
+        setAdvLoading(false);
+        socket.off("rr-get-advisors:result", onResult);
+      }
+    };
+
+    socket.once("rr-get-advisors:result", onResult);
+    socket.emit("rr-get-advisors", { departmentType: "B", refresh }, (ack) => {
+      if (ack?.ok) {
+        const list = ack.result ?? [];
+        setAdvisors(Array.isArray(list) ? list : []);
+      } else if (ack) {
+        console.error("Something went wrong fetching DMS Advisors");
+      }
+      setAdvLoading(false);
+      socket.off("rr-get-advisors:result", onResult);
+    });
+  };
+
+  useEffect(() => {
+    fetchRrAdvisors(false);
+  }, [bodyshop?.id, socket]);
+
+  const initialValues = useMemo(
+    () => ({
+      story: `${t("jobs.labels.dms.defaultstory", {
+        ro_number: job.ro_number,
+        ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`.trim(),
+        ins_co_nm: job.ins_co_nm || "N/A",
+        clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${job.po_number || ""}`
+      }).trim()}.${
+        job.area_of_damage?.impact1
+          ? " " +
+            t("jobs.labels.dms.damageto", {
+              area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
+            })
+          : ""
+      }`.slice(0, 239),
+      inservicedate: dayjs(
+        `${
+          (job.v_model_yr &&
+            (job.v_model_yr < 100
+              ? job.v_model_yr >= (dayjs().year() + 1) % 100
+                ? 1900 + parseInt(job.v_model_yr, 10)
+                : 2000 + parseInt(job.v_model_yr, 10)
+              : job.v_model_yr)) ||
+          2019
+        }-01-01`
+      ),
+      opPrefix: opCodeParts?.prefix ?? "",
+      opBase: opCodeParts?.base ?? "",
+      opSuffix: opCodeParts?.suffix ?? ""
+    }),
+    [job, t, opCodeParts]
+  );
+
+  // Keep the RR OpCode parts in sync with DmsContainer state
+  const opPrefixWatch = Form.useWatch("opPrefix", form);
+  const opBaseWatch = Form.useWatch("opBase", form);
+  const opSuffixWatch = Form.useWatch("opSuffix", form);
+
+  // Detect if current form values differ from baseline defaults
+  const isCustomOpCode = useMemo(() => {
+    const current = {
+      prefix: opPrefixWatch !== undefined ? opPrefixWatch : (baselineOpCodeParts.prefix ?? ""),
+      base: opBaseWatch !== undefined ? opBaseWatch : (baselineOpCodeParts.base ?? ""),
+      suffix: opSuffixWatch !== undefined ? opSuffixWatch : (baselineOpCodeParts.suffix ?? "")
+    };
+
+    return (
+      current.prefix !== (baselineOpCodeParts.prefix ?? "") ||
+      current.base !== (baselineOpCodeParts.base ?? "") ||
+      current.suffix !== (baselineOpCodeParts.suffix ?? "")
+    );
+  }, [opPrefixWatch, opBaseWatch, opSuffixWatch, baselineOpCodeParts]);
+
+  // Push changes up to container with some metadata
+  useEffect(() => {
+    if (!onChangeOpCodeParts) return;
+
+    const parts = {
+      prefix: opPrefixWatch || "",
+      base: opBaseWatch || "",
+      suffix: opSuffixWatch || "",
+      isCustom: isCustomOpCode
+    };
+
+    onChangeOpCodeParts(parts);
+  }, [opPrefixWatch, opBaseWatch, opSuffixWatch, isCustomOpCode, onChangeOpCodeParts]);
+
+  const handleFinish = (values) => {
+    if (!socket) return;
+
+    const { opPrefix, opBase, opSuffix, ...rest } = values;
+
+    const combinedOpCode = `${opPrefix || ""}${opBase || ""}${opSuffix || ""}`.trim();
+
+    const txEnvelope = {
+      ...rest,
+      opPrefix,
+      opBase,
+      opSuffix
+    };
+
+    if (combinedOpCode) {
+      txEnvelope.opCode = combinedOpCode;
+    }
+
+    socket.emit("rr-export-job", {
+      bodyshopId: bodyshop?.id,
+      jobId: job.id,
+      job,
+      txEnvelope
+    });
+
+    logsRef?.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  // Discrepancy is ignored for RR; we still show totals for operator context.
+  // Use the lifted allocationsSummary from the container instead of reading from the socket.
+  const totals = useMemo(() => {
+    if (!allocationsSummary || allocationsSummary.length === 0) {
+      return { totalSale: Dinero(), totalCost: Dinero() };
+    }
+
+    return allocationsSummary.reduce(
+      (acc, val) => ({
+        totalSale: acc.totalSale.add(Dinero(val.sale)),
+        totalCost: acc.totalCost.add(Dinero(val.cost))
+      }),
+      { totalSale: Dinero(), totalCost: Dinero() }
+    );
+  }, [allocationsSummary]);
+
+  const handleResetOpCode = () => {
+    form.setFieldsValue({
+      opPrefix: baselineOpCodeParts.prefix,
+      opBase: baselineOpCodeParts.base,
+      opSuffix: baselineOpCodeParts.suffix
+    });
+  };
+
+  return (
+    <Card title={t("jobs.labels.dms.postingform")}>
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleFinish}
+        style={{ width: "100%" }}
+        initialValues={initialValues}
+      >
+        <Row gutter={[16, 12]} align="bottom">
+          {/* Advisor + inline Refresh */}
+          <Col xs={24} sm={24} md={12} lg={8}>
+            <Form.Item label={t("jobs.fields.dms.advisor")} required>
+              <Space.Compact block>
+                <Form.Item
+                  name="advisorNo"
+                  noStyle
+                  rules={[{ required: true, message: t("general.validation.required") }]}
+                >
+                  <Select
+                    style={{ flex: 1 }}
+                    loading={advLoading}
+                    allowClear
+                    placeholder={t("general.actions.select", "Select...")}
+                    popupMatchSelectWidth
+                    options={advisors
+                      .map((a) => {
+                        const value = getAdvisorNumber(a);
+                        if (value == null) return null;
+                        return { value: String(value), label: getAdvisorLabel(a) || String(value) };
+                      })
+                      .filter(Boolean)}
+                    notFoundContent={advLoading ? t("general.labels.loading") : t("general.labels.none")}
+                  />
+                </Form.Item>
+                <Tooltip title={t("general.actions.refresh")}>
+                  <Button
+                    aria-label={t("general.actions.refresh")}
+                    icon={<ReloadOutlined />}
+                    onClick={() => fetchRrAdvisors(true)}
+                    loading={advLoading}
+                  />
+                </Tooltip>
+              </Space.Compact>
+            </Form.Item>
+          </Col>
+
+          {/* RR OpCode (prefix / base / suffix) */}
+          <Col xs={24} sm={12} md={12} lg={8}>
+            <Form.Item
+              required
+              label={
+                <Space size="small" align="center">
+                  {t("jobs.fields.dms.rr_opcode", "RR OpCode")}
+                  {isCustomOpCode && (
+                    <Button
+                      type="link"
+                      size="small"
+                      icon={<RollbackOutlined />}
+                      onClick={handleResetOpCode}
+                      style={{ padding: 0 }}
+                    >
+                      {t("jobs.fields.dms.rr_opcode_reset", "Reset")}
+                    </Button>
+                  )}
+                </Space>
+              }
+            >
+              <Space.Compact block>
+                <Form.Item name="opPrefix" noStyle>
+                  <Input
+                    allowClear
+                    maxLength={4}
+                    style={{ width: "30%" }}
+                    placeholder={t("jobs.fields.dms.rr_opcode_prefix", "Prefix")}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="opBase"
+                  noStyle
+                  rules={[{ required: true, message: t("general.validation.required") }]}
+                >
+                  <Input
+                    allowClear
+                    maxLength={10}
+                    style={{ width: "40%" }}
+                    placeholder={t("jobs.fields.dms.rr_opcode_base", "Base")}
+                  />
+                </Form.Item>
+                <Form.Item name="opSuffix" noStyle>
+                  <Input
+                    allowClear
+                    maxLength={4}
+                    style={{ width: "30%" }}
+                    placeholder={t("jobs.fields.dms.rr_opcode_suffix", "Suffix")}
+                  />
+                </Form.Item>
+              </Space.Compact>
+            </Form.Item>
+          </Col>
+
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Form.Item name="kmin" label={t("jobs.fields.kmin")} initialValue={job?.kmin} rules={[{ required: true }]}>
+              <InputNumber style={{ width: "100%" }} disabled />
+            </Form.Item>
+          </Col>
+
+          <Col xs={12} sm={8} md={6} lg={4}>
+            <Form.Item
+              name="kmout"
+              label={t("jobs.fields.kmout")}
+              initialValue={job?.kmout}
+              rules={[{ required: true }]}
+            >
+              <InputNumber style={{ width: "100%" }} disabled />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Row gutter={[16, 12]}>
+          <Col span={24}>
+            <Form.Item name="story" label={t("jobs.fields.dms.story")} rules={[{ required: true }]}>
+              <Input.TextArea maxLength={240} />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Divider />
+
+        <Space size="large" wrap align="center" style={{ marginBottom: 16 }}>
+          <Statistic
+            title={t("jobs.fields.ded_amt")}
+            value={Dinero(job.job_totals.totals.custPayable.deductible).toFormat()}
+          />
+          <Statistic
+            title={t("jobs.labels.total_cust_payable")}
+            value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
+          />
+          <Statistic
+            title={t("jobs.labels.net_repairs")}
+            value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
+          />
+        </Space>
+
+        {/* Validation  */}
+        <Form.Item shouldUpdate>
+          {() => {
+            const advisorOk = !!form.getFieldValue("advisorNo");
+            return (
+              <Space size="large" wrap align="center">
+                <Statistic title={t("jobs.labels.subtotal")} value={totals.totalSale.toFormat()} />
+                <Typography.Title>=</Typography.Title>
+                <Button disabled={!advisorOk} htmlType="submit">
+                  {t("jobs.actions.dms.post")}
+                </Button>
+              </Space>
+            );
+          }}
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { Result } from "antd";
 import queryString from "query-string";
 import { useEffect } from "react";
@@ -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 title={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 title={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

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -9,7 +9,7 @@ import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
 import JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -26,7 +26,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
   const { t } = useTranslation();
   const {
     treatments: { Imgproxy }
-  } = useSplitTreatments({
+  } = useTreatmentsWithConfig({
     attributes: {},
     names: ["Imgproxy"],
     splitKey: bodyshop?.imexshopid
@@ -45,7 +45,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
   return (
     <div>
       {loading && <LoadingSpinner />}
-      {error && <AlertComponent message={error.message} type="error" />}
+      {error && <AlertComponent title={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
@@ -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/employee-search-select/employee-search-select-email.component.jsx

@@ -9,12 +9,13 @@ const EmployeeSearchSelectEmail = ({ options, ...props }) => {
 
   return (
     <Select
-      showSearch
+      showSearch={{
+        optionFilterProp: "search"
+      }}
       // value={option}
       style={{
         width: 400
       }}
-      optionFilterProp="search"
       {...props}
     >
       {options

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

@@ -9,12 +9,13 @@ const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
 
   return (
     <Select
-      showSearch
+      showSearch={{
+        optionFilterProp: "search"
+      }}
       // value={option}
       style={{
         width: 400
       }}
-      optionFilterProp="search"
       {...props}
     >
       {options