Revert "IO-3484 Shop Config Acct Section Move (pull request #2769)"

.gitignore

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

Fortellis Notes.md

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

@@ -1,251 +0,0 @@
-# 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` (string)
+- `logo_img_path` (object, e.g. `{ src, width, height, headerMargin }`)
 
 Any fields not included in the request body will remain unchanged.
 
@@ -50,7 +50,12 @@ Content-Type: application/json
   "email": "shop@example.com",
   "timezone": "America/Chicago",
   "phone": "555-123-4567",
-  "logo_img_path": "https://example.com/logo.png"
+  "logo_img_path": {
+    "src": "https://example.com/logo.png",
+    "width": "200",
+    "height": "100",
+    "headerMargin": 10
+  }
 }
 ```
 

client/package.json

@@ -8,49 +8,49 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.33.1",
+    "@amplitude/analytics-browser": "^2.25.2",
     "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^4.0.12",
+    "@apollo/client": "^3.13.9",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@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",
+    "@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",
     "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.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",
+    "@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",
     "autosize": "^6.0.1",
-    "axios": "^1.13.2",
+    "axios": "^1.12.2",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.19",
-    "dayjs-business-days2": "^1.3.2",
+    "dayjs": "^1.11.18",
+    "dayjs-business-days2": "^1.3.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^17.2.3",
-    "env-cmd": "^11.0.0",
+    "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "graphql": "^16.12.0",
-    "graphql-ws": "^6.0.6",
-    "i18next": "^25.7.4",
+    "graphql": "^16.11.0",
+    "i18next": "^25.5.3",
     "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.34",
+    "libphonenumber-js": "^1.12.23",
     "lightningcss": "^1.30.2",
-    "logrocket": "^11.0.0",
+    "logrocket": "^9.0.2",
     "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
-    "normalize-url": "^8.1.1",
+    "normalize-url": "^8.1.0",
     "object-hash": "^3.0.0",
-    "phone": "^3.1.69",
-    "posthog-js": "^1.319.1",
+    "phone": "^3.1.67",
+    "posthog-js": "^1.271.0",
     "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": "^2.2.2",
-    "react-i18next": "^16.5.2",
+    "react-grid-layout": "1.3.4",
+    "react-i18next": "^15.7.3",
     "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.62",
+    "react-product-fruits": "^2.2.61",
     "react-redux": "^9.2.0",
-    "react-resizable": "^3.1.3",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^6.30.0",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.18.1",
-    "recharts": "^3.6.0",
+    "react-virtuoso": "^4.14.1",
+    "recharts": "^2.15.2",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.4.2",
+    "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "rxjs": "^7.8.2",
-    "sass": "^1.97.2",
-    "socket.io-client": "^4.8.3",
-    "styled-components": "^6.3.6",
+    "sass": "^1.93.2",
+    "socket.io-client": "^4.8.1",
+    "styled-components": "^6.1.19",
+    "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
     "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^5.1.0"
+    "web-vitals": "^3.5.2"
   },
   "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,36 +135,37 @@
   "devDependencies": {
     "@ant-design/icons": "^6.1.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.28.5",
-    "@dotenvx/dotenvx": "^1.51.4",
+    "@babel/preset-react": "^7.27.1",
+    "@dotenvx/dotenvx": "^1.51.0",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.39.2",
-    "@playwright/test": "^1.57.0",
+    "@eslint/js": "^9.37.0",
+    "@playwright/test": "^1.56.0",
+    "@sentry/webpack-plugin": "^4.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
-    "@vitejs/plugin-react": "^5.1.2",
-    "browserslist": "^4.28.1",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "browserslist": "^4.26.3",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.6.2",
-    "eslint": "^9.39.2",
+    "eslint": "^9.37.0",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^17.0.0",
-    "jsdom": "^27.4.0",
-    "memfs": "^4.51.1",
+    "globals": "^15.15.0",
+    "jsdom": "^26.0.0",
+    "memfs": "^4.48.1",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.57.0",
+    "playwright": "^1.56.0",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^7.3.1",
-    "vite-plugin-babel": "^1.4.1",
+    "vite": "^7.1.9",
+    "vite-plugin-babel": "^1.3.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.24.0",
-    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-pwa": "^1.0.3",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^4.0.17",
-    "workbox-window": "^7.4.0"
+    "vitest": "^3.2.4",
+    "workbox-window": "^7.3.0"
   }
 }

client/src/App/App.container.jsx

@@ -1,4 +1,4 @@
-import { ApolloProvider } from "@apollo/client/react";
+import { ApolloProvider } from "@apollo/client";
 import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";

client/src/App/App.styles.scss

@@ -1,5 +1,3 @@
-@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 */
@@ -213,6 +211,9 @@
   --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;
 }
@@ -425,24 +426,6 @@
   }
 }
 
-.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={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "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={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "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.rr_dealerid && (
+          {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
             <>
               <JobMarkSelectedExported
                 jobIds={selectedJobs}
@@ -198,7 +198,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
               />
             </>
           )}
-          {bodyshop.accountingconfig?.qbo && <QboAuthorizeComponent />}
+          {bodyshop.accountingconfig && 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={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "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 title="Default Alert" />);
+    render(<AlertComponent message="Default Alert" />);
     expect(screen.getByText("Default Alert")).toBeInTheDocument();
     expect(screen.getByRole("alert")).toHaveClass("ant-alert");
   });
 
   it("applies type prop correctly", () => {
-    render(<AlertComponent title="Success Alert" type="success" />);
+    render(<AlertComponent message="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 title="Error Alert" description="Something went wrong" type="error" />);
+    render(<AlertComponent message="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 title="Warning Alert" type="warning" showIcon closable />);
+    render(<AlertComponent message="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,13 +28,12 @@ export function AllocationsAssignmentComponent({
     <div>
       <Select
         id="employeeSelector"
-        showSearch={{
-          optionFilterProp: "children",
-          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }}
+        showSearch
         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/react";
+import { useMutation } from "@apollo/client";
 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,13 +30,12 @@ export default connect(
   const popContent = (
     <div>
       <Select
-        showSearch={{
-          optionFilterProp: "children",
-          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }}
+        showSearch
         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/react";
+import { useMutation } from "@apollo/client";
 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/react";
+import { useMutation } from "@apollo/client";
 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={{ placement: "top", defaultPageSize: pageLimit }}
+      pagination={{ position: "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/react";
+import { useQuery } from "@apollo/client";
 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" title={error.message} />
+        <AlertComponent type="error" message={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={{ placement: "top", defaultPageSize: pageLimit }}
+      pagination={{ position: "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/react";
+import { useMutation } from "@apollo/client";
 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/react";
+import { useMutation, useQuery } from "@apollo/client";
 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 title={error.message} type="error" />;
+  if (error) return <AlertComponent message={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 titlePlacement="left">{t("general.labels.media")}</Divider>
+            <Divider orientation="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/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useApolloClient, useMutation } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
 import { useEffect, useMemo, useState } from "react";
@@ -56,7 +56,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
 
   const {
     treatments: { Enhanced_Payroll, Imgproxy }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     attributes: {},
     names: ["Enhanced_Payroll", "Imgproxy"],
     splitKey: bodyshop.imexshopid

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

@@ -7,7 +7,6 @@ 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
@@ -45,7 +44,7 @@ export function BillFormItemsExtendedFormItem({
                 quantity: record.part_qty || 1,
                 actual_price: record.act_price,
                 cost_center: record.part_type
-                  ? bodyshopHasDmsKey(bodyshop)
+                  ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
                     ? record.part_type
                     : responsibilityCenters.defaults && (responsibilityCenters.defaults.costs[record.part_type] || null)
                   : null
@@ -101,7 +100,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}>
-          {bodyshopHasDmsKey(bodyshop)
+          {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
             ? 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/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useApolloClient } from "@apollo/client";
+import { useSplitTreatments } 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,7 +22,6 @@ 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
@@ -51,7 +50,7 @@ export function BillFormComponent({
 
   const {
     treatments: { Extended_Bill_Posting, ClosingPeriod }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     attributes: {},
     names: ["Extended_Bill_Posting", "ClosingPeriod"],
     splitKey: bodyshop.imexshopid
@@ -98,11 +97,13 @@ export function BillFormComponent({
     }
     const jobId = form.getFieldValue("jobid");
     if (jobId) {
-      loadLines({ id: jobId });
+      loadLines({ variables: { id: jobId } });
       if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
         loadOutstandingReturns({
-          jobId: jobId,
-          vendorId: vendorId
+          variables: {
+            jobId: jobId,
+            vendorId: vendorId
+          }
         });
       }
     }
@@ -144,11 +145,13 @@ export function BillFormComponent({
             notExported={false}
             onBlur={() => {
               if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
-                loadLines({ id: form.getFieldValue("jobid") });
+                loadLines({ variables: { id: form.getFieldValue("jobid") } });
                 if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
                   loadOutstandingReturns({
-                    jobId: form.getFieldValue("jobid"),
-                    vendorId: form.getFieldValue("vendorid")
+                    variables: {
+                      jobId: form.getFieldValue("jobid"),
+                      vendorId: form.getFieldValue("vendorid")
+                    }
                   });
                 }
               }
@@ -351,7 +354,7 @@ export function BillFormComponent({
               <Form.Item span={3} label={t("bills.fields.local_tax_rate")} name="local_tax_rate">
                 <CurrencyInput min={0} />
               </Form.Item>
-              {bodyshopHasDmsKey(bodyshop) ? (
+              {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
                 <Form.Item span={2} label={t("bills.labels.federal_tax_exempt")} name="federal_tax_exempt">
                   <Switch onChange={handleFederalTaxExemptSwitchToggle} />
                 </Form.Item>
@@ -409,17 +412,15 @@ export function BillFormComponent({
                     />
                     <Statistic
                       title={t("bills.labels.discrepancy")}
-                      styles={{
-                        value: {
-                          color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
-                        }
+                      valueStyle={{
+                        color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
                       }}
                       value={totals.discrepancy.toFormat()}
                       precision={2}
                     />
                   </Space>
                   {form.getFieldValue("is_credit_memo") ? (
-                    <AlertComponent type="warning" title={t("bills.labels.enteringcreditmemo")} />
+                    <AlertComponent type="warning" message={t("bills.labels.enteringcreditmemo")} />
                   ) : null}
                 </div>
               );
@@ -427,7 +428,7 @@ export function BillFormComponent({
           }}
         </Form.Item>
       </LayoutFormRow>
-      <Divider titlePlacement="left">{t("bills.labels.bill_lines")}</Divider>
+      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
 
       {Extended_Bill_Posting.treatment === "on" ? (
         <BillFormLinesExtended
@@ -447,7 +448,7 @@ export function BillFormComponent({
           billEdit={billEdit}
         />
       )}
-      <Divider titlePlacement="left" style={{ display: billEdit ? "none" : null }}>
+      <Divider orientation="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/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useLazyQuery, useQuery } from "@apollo/client";
+import { useSplitTreatments } 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 }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     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 { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useSplitTreatments } 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,7 +10,6 @@ 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
@@ -34,7 +33,7 @@ export function BillEnterModalLinesComponent({
 
   const {
     treatments: { Simple_Inventory, Enhanced_Payroll }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     attributes: {},
     names: ["Simple_Inventory", "Enhanced_Payroll"],
     splitKey: bodyshop && bodyshop.imexshopid
@@ -91,7 +90,7 @@ export function BillEnterModalLinesComponent({
                       actual_price: opt.cost,
                       original_actual_price: opt.cost,
                       cost_center: opt.part_type
-                        ? bodyshopHasDmsKey(bodyshop)
+                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
                           ? opt.part_type !== "PAE"
                             ? opt.part_type
                             : null
@@ -323,7 +322,7 @@ export function BillEnterModalLinesComponent({
         },
         formInput: () => (
           <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
-            {bodyshopHasDmsKey(bodyshop)
+            {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
           </Select>

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

@@ -10,19 +10,18 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
     <Select
       disabled={disabled}
       ref={ref}
-      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()))
-          );
-        }
-      }}
+      showSearch
       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") },

client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx

@@ -1,6 +1,4 @@
-import { useMutation } from "@apollo/client/react";
-import { gql } from "@apollo/client";
-
+import { gql, useMutation } 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,5 +1,4 @@
-import { useMutation } from "@apollo/client/react";
-import { gql } from "@apollo/client";
+import { gql, useMutation } 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/react";
+import { useMutation } from "@apollo/client";
 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/react";
+import { useQuery } from "@apollo/client";
 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 title={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   const dataSource = state.search
     ? data.vendors.filter(
@@ -89,7 +89,7 @@ export default function BillsVendorsList() {
         );
       }}
       dataSource={dataSource}
-      pagination={{ placement: "top" }}
+      pagination={{ position: "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 { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useSplitTreatments } 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 }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     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/react";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Card, Col, Form, Input, message, Row, Space, Spin, Statistic } from "antd";
 import axios from "axios";
 import { useState } from "react";
@@ -52,6 +52,7 @@ const CardPaymentModalComponent = ({
   const notification = useNotification();
 
   const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
+    variables: { jobids: [context.jobid] },
     skip: !context?.jobid
   });
 
@@ -257,7 +258,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({ variables: { jobids: payments.map((p) => p.jobid) } });
+                refetch({ jobids: payments.map((p) => p.jobid) });
               }
               return (
                 <>
@@ -315,7 +316,7 @@ const CardPaymentModalComponent = ({
                   >
                     {t("job_payments.buttons.proceedtopayment")}
                   </Button>
-                  <Space orientation="vertical" align="center">
+                  <Space direction="vertical" align="center">
                     <Button
                       type="primary"
                       //  data-ipayname="submit"

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

@@ -1,4 +1,4 @@
-import { useApolloClient } from "@apollo/client/react";
+import { useApolloClient } from "@apollo/client";
 import { getToken } from "@firebase/messaging";
 import axios from "axios";
 import { useEffect } from "react";

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

@@ -1,4 +1,4 @@
-import { useMutation } from "@apollo/client/react";
+import { useMutation } from "@apollo/client";
 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,7 +11,7 @@ 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/react";
+import { useQuery } from "@apollo/client";
 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";
@@ -95,7 +95,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
       <>
         {item.label && <Tag color="blue">{item.label}</Tag>}
         {item.job_conversations.length > 0 ? (
-          <Space orientation="vertical">{names}</Space>
+          <Space direction="vertical">{names}</Space>
         ) : (
           <Space>
             <PhoneFormatter>{item.phone_num}</PhoneFormatter>

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

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

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

@@ -27,7 +27,7 @@ export function ChatConversationComponent({
 
   if (conversation?.archived) return null;
   if (loading) return <LoadingSkeleton />;
-  if (error) return <AlertComponent title={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <div

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

@@ -1,5 +1,4 @@
-import { useApolloClient, useQuery, useSubscription } from "@apollo/client/react";
-import { gql } from "@apollo/client";
+import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";

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

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

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/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useQuery } from "@apollo/client";
+import { useSplitTreatments } 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 }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     attributes: {},
     names: ["Imgproxy"],
     splitKey: bodyshop && bodyshop.imexshopid
@@ -63,7 +63,7 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
   const content = (
     <div className="media-selector-content">
       {loading && <LoadingSpinner />}
-      {error && <AlertComponent title={error.message} type="error" />}
+      {error && <AlertComponent message={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div className="error-message">{t("messaging.labels.maxtenimages")}</div>
       ) : null}

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/react";
+import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -27,60 +27,32 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
   const { t } = useTranslation();
-  const { socket } = useSocket();
-  const client = useApolloClient();
-
-  // When socket is connected, we do NOT poll (socket should push updates).
-  // When disconnected, we poll as a fallback.
   const [pollInterval, setPollInterval] = useState(0);
+  const { socket } = useSocket();
+  const client = useApolloClient(); // Apollo Client instance for cache operations
 
-  // 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, {
+  // Lazy query for conversations
+  const [getConversations, { loading, data, refetch }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    notifyOnNetworkStatusChange: true,
+    skip: !chatVisible,
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 
-  // 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, {
+  // Query for unread count when chat is not visible
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: chatVisible || socket?.connected,
-    pollInterval: socket?.connected ? 0 : 60 * 1000
+    pollInterval: 60 * 1000 // TODO: This is a fix for now, should be coming from sockets
   });
 
-  // 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
+  // Socket connection status
   useEffect(() => {
     const handleSocketStatus = () => {
       if (socket?.connected) {
-        setPollInterval(0); // skip polling if socket connected
+        setPollInterval(15 * 60 * 1000); // 15 minutes
       } else {
-        setPollInterval(60 * 1000); // fallback polling if disconnected
+        setPollInterval(60 * 1000); // 60 seconds
       }
     };
 
@@ -99,30 +71,19 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     };
   }, [socket]);
 
-  // Run conversations query exactly once on initial load (component mount)
+  // Fetch conversations when chat becomes visible
   useEffect(() => {
-    if (hasLoadedConversationsOnceRef.current) return;
+    if (chatVisible)
+      getConversations({
+        variables: {
+          offset: 0
+        }
+      }).catch((err) => {
+        console.error(`Error fetching conversations: ${(err, err.message || "")}`);
+      });
+  }, [chatVisible, getConversations]);
 
-    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.
+  // Get unread count from the cache
   const unreadCount = (() => {
     try {
       const cachedData = client.readQuery({
@@ -130,23 +91,18 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
         variables: { offset: 0 }
       });
 
-      const conversations = cachedData?.conversations;
-
-      if (!Array.isArray(conversations) || conversations.length === 0) {
-        return unreadAggregateCount;
+      if (!cachedData?.conversations) {
+        return unreadData?.messages_aggregate?.aggregate?.count;
       }
 
-      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;
+      // Aggregate unread message count
+      return cachedData.conversations.reduce((total, conversation) => {
+        const unread = conversation.messages_aggregate?.aggregate?.count || 0;
         return total + unread;
       }, 0);
-    } catch {
-      return unreadAggregateCount;
+    } catch (error) {
+      console.warn("Unread count not found in cache:", error);
+      return 0; // Fallback if not in cache
     }
   })();
 
@@ -161,12 +117,9 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
               <Tooltip title={t("messaging.labels.recentonly")}>
                 <InfoCircleOutlined />
               </Tooltip>
-
-              <SyncOutlined style={{ cursor: "pointer" }} onClick={handleManualRefresh} />
-
+              <SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
               {!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/react";
+import { useQuery } from "@apollo/client";
 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 orientation="vertical" style={{ width: "100%" }} size="middle">
+    <Space direction="vertical" style={{ width: "100%" }} size="middle">
       {isOptedOut && (
         <Tooltip title={t("consent.text_body")}>
           <Alert
             showIcon={true}
             icon={<ExclamationCircleOutlined />}
-            title={t("messaging.errors.no_consent")}
+            message={t("messaging.errors.no_consent")}
             type="error"
           />
         </Tooltip>

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

@@ -10,13 +10,12 @@ export default function ChatTagRoComponent({ roOptions, loading, handleSearch, h
     <Space>
       <div style={{ width: "15rem" }}>
         <Select
-          showSearch={{
-            filterOption: false,
-            onSearch: handleSearch
-          }}
+          showSearch
           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/react";
+import { useLazyQuery, useMutation } from "@apollo/client";
 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({ search: value });
+    debouncedExecuteSearch({ variables: { 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={{ placement: "top" }}
+        pagination={{ position: "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/react";
+import { useQuery } from "@apollo/client";
 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 title={error.message} type="error" />;
+  if (error) return <AlertComponent message={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/react";
+import { useMutation } from "@apollo/client";
 import { Button, Form, InputNumber, Popover, Radio, Select, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";

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

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client/react";
+import { useLazyQuery } from "@apollo/client";
 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({ id: jobId });
+    call({ variables: { 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 orientation="vertical" style={{ color: "tomato" }}>
+                  <Space direction="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 orientation="vertical" style={{ color: "tomato" }}>
+                  <Space direction="vertical" style={{ color: "tomato" }}>
                     <span>
                       <WarningFilled style={{ marginRight: ".3rem" }} />
                       {t("contracts.labels.cardueforservice")}

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

@@ -128,7 +128,11 @@ export default function ContractsJobsComponent({ loading, data, selectedJob, han
     >
       <Table
         loading={loading}
-        pagination={{ placement: "top", defaultPageSize: pageLimit, defaultCurrent: defaultCurrent }}
+        pagination={{
+          position: "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/react";
+import { useQuery } from "@apollo/client";
 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 title={error.message} type="error" />;
+  if (error) return <AlertComponent message={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/react";
+import { useLazyQuery } from "@apollo/client";
 import { Button, Form, Modal, Table } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -35,8 +35,10 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
 
     //Execute contract find
     callSearch({
-      plate: (values.plate && values.plate !== "" && values.plate) || undefined,
-      time: values.time
+      variables: {
+        plate: (values.plate && values.plate !== "" && values.plate) || undefined,
+        time: values.time
+      }
     });
   };
 
@@ -61,7 +63,7 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
         <Button onClick={() => form.submit()} type="primary" loading={loading}>
           {t("general.labels.search")}
         </Button>
-        {error && <AlertComponent type="error" title={JSON.stringify(error)} />}
+        {error && <AlertComponent type="error" message={JSON.stringify(error)} />}
         <Table
           loading={loading}
           columns={[

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

@@ -172,7 +172,12 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
         scroll={{
           x: "50%" //y: "40rem"
         }}
-        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
+        pagination={{
+          position: "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,7 +75,12 @@ export default function CourtesyCarContractListComponent({ contracts, totalContr
     <Card title={t("menus.header.courtesycars-contracts")}>
       <Table
         scroll={{ x: true }}
-        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: totalContracts }}
+        pagination={{
+          position: "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/react";
+import { useApolloClient } from "@apollo/client";
 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 orientation="vertical" style={{ color: "tomato" }}>
+                  <Space direction="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 orientation="vertical" style={{ color: "tomato" }}>
+                  <Space direction="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 orientation="vertical" style={{ color: "tomato" }}>
+                  <Space direction="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 orientation="vertical" style={{ color: "tomato" }}>
+                  <Space direction="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/react";
+import { useMutation } from "@apollo/client";
 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={{ placement: "top" }}
+        pagination={{ position: "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/react";
+import { useQuery } from "@apollo/client";
 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 title={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <Card>

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

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

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%" minHeight={100}>
+        <ResponsiveContainer width="100%" height="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={{ placement: "top", defaultPageSize: pageLimit }}
+            pagination={{ position: "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,11 +1,13 @@
 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} />;
 
@@ -34,17 +36,19 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
   return (
     <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
       <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
+        <ResponsiveContainer width="100%" height="100%">
           <PieChart margin={0} padding={0}>
             <Pie
               data={chartData}
-              shape={renderActiveShape}
+              activeIndex={activeIndex}
+              activeShape={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,8 +95,7 @@ const renderActiveShape = (props) => {
     fill,
     payload,
     //  percent,
-    value,
-    isActive
+    value
   } = props;
   // const sin = Math.sin(-RADIAN * midAngle);
   // const cos = Math.cos(-RADIAN * midAngle);
@@ -106,16 +109,12 @@ const renderActiveShape = (props) => {
 
   return (
     <g>
-      {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>
-        </>
-      )}
+      <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}
@@ -125,17 +124,15 @@ const renderActiveShape = (props) => {
         endAngle={endAngle}
         fill={fill}
       />
-      {isActive && (
-        <Sector
-          cx={cx}
-          cy={cy}
-          startAngle={startAngle}
-          endAngle={endAngle}
-          innerRadius={outerRadius + 6}
-          outerRadius={outerRadius + 10}
-          fill={fill}
-        />
-      )}
+      <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,11 +1,13 @@
 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} />;
 
@@ -32,17 +34,19 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
   return (
     <Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
       <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
+        <ResponsiveContainer width="100%" height="100%">
           <PieChart margin={0} padding={0}>
             <Pie
               data={chartData}
-              shape={renderActiveShape}
+              activeIndex={activeIndex}
+              activeShape={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} />
@@ -87,8 +91,7 @@ const renderActiveShape = (props) => {
     fill,
     payload,
     //   percent,
-    value,
-    isActive
+    value
   } = props;
   // const sin = Math.sin(-RADIAN * midAngle);
   // const cos = Math.cos(-RADIAN * midAngle);
@@ -102,16 +105,12 @@ const renderActiveShape = (props) => {
 
   return (
     <g>
-      {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>
-        </>
-      )}
+      <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}
@@ -121,17 +120,15 @@ const renderActiveShape = (props) => {
         endAngle={endAngle}
         fill={fill}
       />
-      {isActive && (
-        <Sector
-          cx={cx}
-          cy={cy}
-          startAngle={startAngle}
-          endAngle={endAngle}
-          innerRadius={outerRadius + 6}
-          outerRadius={outerRadius + 10}
-          fill={fill}
-        />
-      )}
+      <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%" minHeight={100}>
+        <ResponsiveContainer width="100%" height="100%">
           <ComposedChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
             <CartesianGrid stroke="#f5f5f5" />
             <XAxis dataKey="date" />

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)}
-          styles={{ value: { color: aboveTargetHours ? "green" : "red" } }}
+          valueStyle={{ 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/react";
+import { useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
-import { useEffect, useMemo, useState } from "react";
-import { Responsive, WidthProvider } from "react-grid-layout/legacy";
+import { useMemo, useState, useEffect } from "react";
+import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { QUERY_USER_DASHBOARD_LAYOUT, UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
+import { UPDATE_DASHBOARD_LAYOUT, QUERY_USER_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import { QUERY_DASHBOARD_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
@@ -156,7 +156,7 @@ export function DashboardGridComponent({ currentUser }) {
   );
 
   if (loading || dashboardLoading) return <LoadingSkeleton message={t("general.labels.loading")} />;
-  if (error || dashboardError) return <AlertComponent title={(error || dashboardError).message} type="error" />;
+  if (error || dashboardError) return <AlertComponent message={(error || dashboardError).message} type="error" />;
 
   const handleLayoutChange = async (layout, layouts) => {
     logImEXEvent("dashboard_change_layout");

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

@@ -5,7 +5,7 @@ export default function DataLabel({
   hideIfNull,
   children,
   open = true,
-  styles,
+  valueStyle = {},
   valueClassName,
   onValueClick,
   ...props
@@ -33,11 +33,7 @@ export default function DataLabel({
         className={valueClassName}
         onClick={onValueClick}
       >
-        {typeof children === "string" ? (
-          <Typography.Text style={styles?.value}>{children}</Typography.Text>
-        ) : (
-          children
-        )}
+        {typeof children === "string" ? <Typography.Text style={valueStyle}>{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={{ placement: "top", defaultPageSize: pageLimit }}
+        pagination={{ position: "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?.default_journal}
+          initialValue={bodyshop.cdk_configuration && bodyshop.cdk_configuration.default_journal}
           rules={[
             {
               required: true

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

@@ -1,104 +1,72 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
-import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import Dinero from "dinero.js";
-import { DMS_MAP } from "../../utils/dmsUtils";
-
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import Dinero from "dinero.js";
+import { SyncOutlined } from "@ant-design/icons";
 import { pageLimit } from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({});
+
+const mapDispatchToProps = () => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummary);
 
-/**
- * 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 }) {
+export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
 
-  // 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, jobId, mode, allocationsEvent]);
-
-  // Initial + whenever mode/socket/jobId changes
   useEffect(() => {
-    fetchAllocations();
-  }, [fetchAllocations]);
+    if (socket.connected) {
+      socket.emit("cdk-calculate-allocations", jobId, (ack) => {
+        setAllocationsSummary(ack);
+        socket.allocationsSummary = ack;
+      });
+    }
+  }, [socket, socket.connected, jobId]);
 
   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
     }
   ];
 
@@ -106,42 +74,54 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
     <Card
       title={title}
       extra={
-        <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
+        <Button
+          onClick={() => {
+            socket.emit("cdk-calculate-allocations", jobId, (ack) => setAllocationsSummary(ack));
+          }}
+        >
           <SyncOutlined />
         </Button>
       }
     >
       {bodyshop.pbs_configuration?.disablebillwip && (
-        <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
+        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
       )}
-
       <Table
-        pagination={{ placement: "top", defaultPageSize: pageLimit }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
         columns={columns}
         rowKey="center"
         dataSource={allocationsSummary}
         locale={{ emptyText: t("dms.labels.refreshallocations") }}
         scroll={{ x: true }}
         summary={() => {
-          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;
+          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()
+              }
+            );
 
           return (
             <Table.Summary.Row>
               <Table.Summary.Cell>
                 <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
               </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.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.Row>
           );
         }}

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

@@ -1,342 +0,0 @@
-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/react";
+import { useLazyQuery } from "@apollo/client";
 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 title={error.message} type="error" />}
+        {error && <AlertComponent error={error.message} />}
         <Table
           title={() => (
             <Input.Search
-              onSearch={(val) => callSearch({ search: val })}
+              onSearch={(val) => callSearch({ variables: { search: val } })}
               placeholder={t("general.labels.search")}
             />
           )}
@@ -87,7 +87,9 @@ export function DmsCdkVehicles({ form, job }) {
         onClick={() => {
           setOpen(true);
           callSearch({
-            search: job?.v_model_desc && job.v_model_desc.substr(0, 3)
+            variables: {
+              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,11 +1,10 @@
-import { Button, Space } from "antd";
+import { Button } 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,
@@ -19,52 +18,21 @@ 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 () => {
-    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(true);
+    await axios.post("/cdk/getvehicles", {
+      cdk_dealerid: bodyshop.cdk_dealerid,
+      bodyshopid: bodyshop.id
+    });
 
     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 (
-    <Space>
-      <Button loading={loading} onClick={handleRefetch}>
-        {t("jobs.actions.dms.refetchmakesmodels")}
-      </Button>
-      <Button loading={loading} onClick={handleGetCOA}>
-        Get COA
-      </Button>
-    </Space>
+    <Button loading={loading} onClick={handleRefetch}>
+      {t("jobs.actions.dms.refetchmakesmodels")}
+    </Button>
   );
 }

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

@@ -1,102 +0,0 @@
-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,54 +1,134 @@
-import { useMemo } from "react";
+import { Button, Checkbox, Col, Table } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-
+import { socket } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-
-import 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";
+import { alphaSort } from "../../utils/sorters";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = () => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
 export default connect(mapStateToProps, mapDispatchToProps)(DmsCustomerSelector);
 
-/**
- * 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;
+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");
 
-  // Centralized "mode" (provider + transport)
-  const mode = props.mode;
+  socket.on("cdk-select-customer", (customerList) => {
+    setOpen(true);
+    setDmsType("cdk");
+    setcustomerList(customerList);
+  });
+  socket.on("pbs-select-customer", (customerList) => {
+    setOpen(true);
+    setDmsType("pbs");
+    setcustomerList(customerList);
+  });
 
-  // Stable base props for children
-  const base = useMemo(() => ({ bodyshop, jobid, socket }), [bodyshop, jobid, socket]);
+  const onUseSelected = () => {
+    setOpen(false);
+    socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
+    setSelectedCustomer(null);
+  };
 
-  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 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}`
     }
-    case DMS_MAP.fortellis:
-      return <FortellisCustomerSelector {...base} />;
-    case DMS_MAP.cdk:
-      return <CDKCustomerSelector {...base} />;
-    case DMS_MAP.pbs:
-      return <PBSCustomerSelector {...base} />;
-    default:
-      return null;
-  }
+  ];
+
+  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>
+  );
 }

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

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

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

@@ -1,267 +0,0 @@
-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,234 +1,50 @@
 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 { selectDarkMode } from "../../redux/application/application.selectors.js";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 
-const mapStateToProps = createStructuredSelector({
-  isDarkMode: selectDarkMode
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
 });
 
-const mapDispatchToProps = () => ({});
-
 export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
 
-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]
+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>
+        )
+      }))}
+    />
   );
-
-  return <Timeline pending reverse items={items} />;
 }
 
-/**
- * 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";
+function LogLevelHierarchy(level) {
+  switch (level) {
     case "DEBUG":
       return "orange";
     case "INFO":
       return "blue";
     case "WARN":
-    case "WARNING":
       return "yellow";
     case "ERROR":
       return "red";
     default:
-      return "default";
+      return 0;
   }
-};
-
-/**
- * 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

@@ -1,420 +0,0 @@
-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,75 +1,396 @@
+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 { DMS_MAP } from "../../utils/dmsUtils";
-import RRPostForm from "./rr-dms-post-form";
-import CdkLikePostForm from "./cdklike-dms-post-form";
+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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({});
-
+const mapDispatchToProps = () => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
 export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);
 
-/**
- * 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}
-        />
-      );
+export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
 
-    // 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}
-        />
-      );
+  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);
 
-    default:
-      return null;
-  }
+        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>
+  );
 }

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

@@ -1,373 +0,0 @@
-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.container.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client/react";
+import { useQuery } from "@apollo/client";
 import { Result } from "antd";
 import queryString from "query-string";
 import { useEffect } from "react";
@@ -51,7 +51,7 @@ export function DocumentEditorContainer({ setBodyshop }) {
   }, [dataShop, setBodyshop]);
 
   if (loadingShop) return <LoadingSpinner />;
-  if (errorShop) return <AlertComponent title={errorShop.message} type="error" />;
+  if (errorShop) return <AlertComponent message={errorShop.message} type="error" />;
 
   if (isLocalMedia) {
     if (imageUrl && filename && jobid) {
@@ -66,7 +66,7 @@ export function DocumentEditorContainer({ setBodyshop }) {
   }
 
   if (loadingDoc) return <LoadingSpinner />;
-  if (errorDoc) return <AlertComponent title={errorDoc.message} type="error" />;
+  if (errorDoc) return <AlertComponent message={errorDoc.message} type="error" />;
 
   if (!dataDoc || !dataDoc.documents_by_pk) return <Result status="404" title={t("general.errors.notfound")} />;
   return (

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

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client/react";
+import { useQuery } from "@apollo/client";
 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 { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useSplitTreatments } 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 }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     attributes: {},
     names: ["Imgproxy"],
     splitKey: bodyshop?.imexshopid
@@ -45,7 +45,7 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
   return (
     <div>
       {loading && <LoadingSpinner />}
-      {error && <AlertComponent title={error.message} type="error" />}
+      {error && <AlertComponent message={error.message} type="error" />}
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client/react";
+import { useQuery } from "@apollo/client";
 import { Select } from "antd";
 import { forwardRef } from "react";
 import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
@@ -9,7 +9,7 @@ import AlertComponent from "../alert/alert.component";
 const EmployeeTeamSearchSelect = ({ ...props }) => {
   const { loading, error, data } = useQuery(QUERY_TEAMS);
 
-  if (error) return <AlertComponent title={JSON.stringify(error)} type="error" />;
+  if (error) return <AlertComponent message={JSON.stringify(error)} />;
   return (
     <Select
       showSearch

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

@@ -122,23 +122,14 @@ class ErrorBoundary extends React.Component {
           />
           <Row>
             <Col offset={6} span={12}>
-              <Collapse
-                bordered={false}
-                items={[
-                  {
-                    key: "errors-panel",
-                    label: t("general.labels.errors"),
-                    children: (
-                      <>
-                        <div>
-                          <strong>{this.state.error.message}</strong>
-                        </div>
-                        <div>{this.state.error.stack}</div>
-                      </>
-                    )
-                  }
-                ]}
-              />
+              <Collapse bordered={false}>
+                <Collapse.Panel key="errors-panel" header={t("general.labels.errors")}>
+                  <div>
+                    <strong>{this.state.error.message}</strong>
+                  </div>
+                  <div>{this.state.error.stack}</div>
+                </Collapse.Panel>
+              </Collapse>
             </Col>
           </Row>
         </div>

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

@@ -5,7 +5,7 @@ import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
-import { useMutation } from "@apollo/client/react";
+import { useMutation } from "@apollo/client";
 import { acceptEula } from "../../redux/user/user.actions";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../utils/day";

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

@@ -56,7 +56,7 @@ function FeatureWrapper({
     return (
       noauth || (
         <AlertComponent
-          title={t("general.messages.nofeatureaccess", {
+          message={t("general.messages.nofeatureaccess", {
             app: InstanceRenderManager({
               imex: "$t(titles.imexonline)",
               rome: "$t(titles.romeonline)"

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

@@ -89,7 +89,7 @@ const DateTimePicker = ({
   return (
     <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
       {isSeparatedTime && (
-        <Space orientation="vertical" style={{ width: "100%" }}>
+        <Space direction="vertical" style={{ width: "100%" }}>
           <DatePicker
             showTime={false}
             format="MM/DD/YYYY"
@@ -131,7 +131,10 @@ const DateTimePicker = ({
                 if (timeValue) {
                   // When time changes, combine it with the existing date
                   const existingDate = dayjs(value);
-                  const newDateTime = existingDate.hour(timeValue.hour()).minute(timeValue.minute()).second(0);
+                  const newDateTime = existingDate
+                    .hour(timeValue.hour())
+                    .minute(timeValue.minute())
+                    .second(0);
                   handleChange(newDateTime);
                 } else {
                   // If time is cleared, just update with null time but keep date

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -17,11 +17,11 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
         const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
         if (form.isFieldsTouched())
           return (
-            <Space orientation="vertical" style={{ width: "100%" }}>
+            <Space direction="vertical" style={{ width: "100%" }}>
               <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
               <AlertComponent
                 type="warning"
-                title={
+                message={
                   <div>
                     <span>{t("general.messages.unsavedchanges")} </span>
                     <span
@@ -39,7 +39,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  title={
+                  message={
                     <div>
                       <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                     </div>

client/src/components/form-items-formatted/email-form-item.component.jsx

@@ -1,20 +1,22 @@
 import { MailFilled } from "@ant-design/icons";
-import { Button, Input, Space } from "antd";
+import { Input } from "antd";
 import { forwardRef } from "react";
 
 function FormItemEmail(props, ref) {
-  const { defaultValue, value, ...restProps } = props;
-  const emailValue = defaultValue || value;
-
   return (
-    <Space.Compact style={{ width: "100%" }}>
-      <Input {...restProps} ref={ref} value={value} defaultValue={defaultValue} />
-      {emailValue ? (
-        <Button icon={<MailFilled />} href={`mailto:${emailValue}`} target="_blank" rel="noopener noreferrer" />
-      ) : (
-        <Button icon={<MailFilled />} disabled />
-      )}
-    </Space.Compact>
+    <Input
+      {...props}
+      ref={ref}
+      addonAfter={
+        props.defaultValue || props.value ? (
+          <a href={`mailto:${props.defaultValue || props.value}`}>
+            <MailFilled />
+          </a>
+        ) : (
+          <MailFilled />
+        )
+      }
+    />
   );
 }
 

client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx

@@ -14,7 +14,7 @@ export default function FormListMoveArrows({ move, index, total }) {
   };
 
   return (
-    <Space orientation="vertical">
+    <Space direction="vertical">
       <UpOutlined disabled={upDisabled} onClick={handleUp} />
       <DownOutlined disabled={downDisabled} onClick={handleDown} />
     </Space>

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

@@ -46,7 +46,7 @@ export default function GlobalSearchOs() {
                 value: job.ro_number || "N/A",
                 label: (
                   <Link to={`/manage/jobs/${job.id}`}>
-                    <Space size="small" separator={<Divider orientation="vertical" />}>
+                    <Space size="small" split={<Divider type="vertical" />}>
                       <strong>{job.ro_number || t("general.labels.na")}</strong>
                       <span>{`${job.status || ""}`}</span>
                       <span>
@@ -69,7 +69,7 @@ export default function GlobalSearchOs() {
                 value: OwnerNameDisplayFunction(owner),
                 label: (
                   <Link to={`/manage/owners/${owner.id}`}>
-                    <Space size="small" separator={<Divider orientation="vertical" />} wrap>
+                    <Space size="small" split={<Divider type="vertical" />} wrap>
                       <span>
                         <OwnerNameDisplay ownerObject={owner} />
                       </span>
@@ -89,7 +89,7 @@ export default function GlobalSearchOs() {
                 value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
                 label: (
                   <Link to={`/manage/vehicles/${vehicle.id}`}>
-                    <Space size="small" separator={<Divider orientation="vertical" />}>
+                    <Space size="small" split={<Divider type="vertical" />}>
                       <span>
                         {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                       </span>
@@ -111,7 +111,7 @@ export default function GlobalSearchOs() {
                 value: `${payment.job?.ro_number} ${payment.amount}`,
                 label: (
                   <Link to={`/manage/jobs/${payment.job?.id}`}>
-                    <Space size="small" separator={<Divider orientation="vertical" />}>
+                    <Space size="small" split={<Divider type="vertical" />}>
                       <span>{payment.paymentnum}</span>
                       <span>{payment.job?.ro_number}</span>
                       <span>{payment.memo || ""}</span>
@@ -131,7 +131,7 @@ export default function GlobalSearchOs() {
                 value: `${bill.invoice_number} - ${bill.vendor.name}`,
                 label: (
                   <Link to={`/manage/bills?billid=${bill.id}`}>
-                    <Space size="small" separator={<Divider orientation="vertical" />}>
+                    <Space size="small" split={<Divider type="vertical" />}>
                       <span>{bill.invoice_number}</span>
                       <span>{bill.vendor.name}</span>
                       <span>{bill.date}</span>
@@ -151,7 +151,7 @@ export default function GlobalSearchOs() {
           //       }`,
           //       label: (
           //         <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-          //           <Space size="small" separator={<Divider orientation="vertical" />}>
+          //           <Space size="small" split={<Divider type="vertical" />}>
           //             <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
           //               pb.company || ""
           //             }`}</span>

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

@@ -1,4 +1,4 @@
-import { useLazyQuery } from "@apollo/client/react";
+import { useLazyQuery } from "@apollo/client";
 import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import { useTranslation } from "react-i18next";
@@ -20,7 +20,7 @@ export default function GlobalSearch() {
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
   const handleSearch = (value) => {
-    debouncedExecuteSearch({ search: value });
+    debouncedExecuteSearch({ variables: { search: value } });
   };
 
   const renderTitle = (title) => {
@@ -37,7 +37,7 @@ export default function GlobalSearch() {
               value: job.ro_number || "N/A",
               label: (
                 <Link to={`/manage/jobs/${job.id}`}>
-                  <Space size="small" separator={<Divider orientation="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <strong>{job.ro_number || t("general.labels.na")}</strong>
                     <span>{`${job.status || ""}`}</span>
                     <span>
@@ -59,7 +59,7 @@ export default function GlobalSearch() {
               value: OwnerNameDisplayFunction(owner),
               label: (
                 <Link to={`/manage/owners/${owner.id}`}>
-                  <Space size="small" separator={<Divider orientation="vertical" />} wrap>
+                  <Space size="small" split={<Divider type="vertical" />} wrap>
                     <span>
                       <OwnerNameDisplay ownerObject={owner} />
                     </span>
@@ -79,7 +79,7 @@ export default function GlobalSearch() {
               value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
               label: (
                 <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <Space size="small" separator={<Divider orientation="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>
                       {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                     </span>
@@ -101,7 +101,7 @@ export default function GlobalSearch() {
               value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
               label: (
                 <Link to={`/manage/jobs/${payment.job.id}`}>
-                  <Space size="small" separator={<Divider orientation="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>{payment.paymentnum}</span>
                     <span>{payment.job.ro_number}</span>
                     <span>{payment.memo || ""}</span>
@@ -121,7 +121,7 @@ export default function GlobalSearch() {
               value: `${bill.invoice_number} - ${bill.vendor.name}`,
               label: (
                 <Link to={`/manage/bills?billid=${bill.id}`}>
-                  <Space size="small" separator={<Divider orientation="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>{bill.invoice_number}</span>
                     <span>{bill.vendor.name}</span>
                     <span>{bill.date}</span>
@@ -139,7 +139,7 @@ export default function GlobalSearch() {
               value: `${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`,
               label: (
                 <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-                  <Space size="small" separator={<Divider orientation="vertical" />}>
+                  <Space size="small" split={<Divider type="vertical" />}>
                     <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`}</span>
                     <PhoneNumberFormatter>{pb.phone1}</PhoneNumberFormatter>
                     <span>{pb.email}</span>
@@ -152,7 +152,7 @@ export default function GlobalSearch() {
       ]
     : [];
 
-  if (error) return <AlertComponent title={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <AutoComplete

client/src/components/header/buildAccountingChildren.jsx

@@ -141,7 +141,7 @@ const buildAccountingChildren = ({
           </Link>
         )
       },
-      ...(!(bodyshop?.cdk_dealerid || bodyshop?.pbs_serialnumber || bodyshop?.rr_dealerid) || DmsAp.treatment === "on"
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on"
         ? [
             {
               key: "payables",
@@ -156,7 +156,7 @@ const buildAccountingChildren = ({
             }
           ]
         : []),
-      ...(!(bodyshop?.cdk_dealerid || bodyshop?.pbs_serialnumber || bodyshop?.rr_dealerid) || DmsAp.treatment === "on"
+      ...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
         ? [
             {
               key: "payments",

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

@@ -1,8 +1,8 @@
 // noinspection RegExpAnonymousGroup
 
 import { BellFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -106,7 +106,7 @@ function Header({
   // Feature flags
   const {
     treatments: { ImEXPay, DmsAp, Simple_Inventory }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
     attributes: {},
     names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
     splitKey: bodyshop && bodyshop.imexshopid

client/src/components/help-rescue/help-rescue.component.jsx

@@ -19,7 +19,7 @@ export default function HelpRescue() {
 
   return (
     <div style={{ display: "flex", justifyContent: "center" }}>
-      <Space orientation="vertical" align="center">
+      <Space direction="vertical" align="center">
         <div>{t("help.labels.rescuedesc")}</div>
         <Input
           size="large"