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

2026-01-02 22:09:24 +00:00
605 changed files with 18439 additions and 34860 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -114,7 +114,7 @@ firebase/.env
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
 logs/oAuthClient-log.log
-logs/*
+

 .node-persist/**

--- a/2
+++ b/2
@@ -3,7 +3,7 @@ FROM amazonlinux:2023

 # Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
 RUN dnf install -y git \
-    && curl -sL https://rpm.nodesource.com/setup_24.x | bash - \
+    && curl -sL https://rpm.nodesource.com/setup_22.x | bash - \
    && dnf install -y nodejs \
    && dnf clean all

--- a/Notes.md
+++ b/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.
--- a/_reference/partsManagement/PATCH_parts-management-provision.md
+++ b/_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
+  }
 }
 ```

--- a/_reference/refactorReports/OPTIMIZATION_SUMMARY.md
+++ b/_reference/refactorReports/OPTIMIZATION_SUMMARY.md
@@ -1,236 +0,0 @@
-# Production Board Kanban - React 19 & Ant Design 6 Optimizations
-
-## Overview
-This document outlines the optimizations made to the production board kanban components to leverage React 19's new compiler and Ant Design 6 capabilities.
-
-## Key Optimizations Implemented
-
-### 1. React Compiler Optimizations
-
-#### Removed Manual Memoization
-The React 19 compiler automatically handles memoization, so we removed unnecessary `useMemo`, `useCallback`, and `memo()` wrappers:
-
-**Files Updated:**
-
-**Main Components:**
- `production-board-kanban.component.jsx`
- `production-board-kanban.container.jsx`
- `production-board-kanban-card.component.jsx`
- `production-board-kanban.statistics.jsx`
-
-**Trello-Board Components:**
- `trello-board/controllers/Board.jsx`
- `trello-board/controllers/Lane.jsx`
- `trello-board/controllers/BoardContainer.jsx`
- `trello-board/components/ItemWrapper.jsx`
-
-**Benefits:**
- Cleaner, more readable code
- Reduced bundle size
- Better performance through compiler-optimized memoization
- Fewer function closures and re-creations
-
-### 2. Simplified State Management
-
-#### Removed Unnecessary Deep Cloning
-**Before:**
-```javascript
-setBoardLanes((prevBoardLanes) => {
-  const deepClonedData = cloneDeep(newBoardData);
-  if (!isEqual(prevBoardLanes, deepClonedData)) {
-    return deepClonedData;
-  }
-  return prevBoardLanes;
-});
-```
-
-**After:**
-```javascript
-setBoardLanes(newBoardData);
-```
-
-**Benefits:**
- Removed lodash `cloneDeep` and `isEqual` dependencies from this component
- React 19's compiler handles change detection efficiently
- Reduced memory overhead
- Faster state updates
-
-### 3. Component Simplification
-
-#### Removed `memo()` Wrapper
-**Before:**
-```javascript
-const EllipsesToolTip = memo(({ title, children, kiosk }) => {
-  // component logic
-});
-EllipsesToolTip.displayName = "EllipsesToolTip";
-```
-
-**After:**
-```javascript
-function EllipsesToolTip({ title, children, kiosk }) {
-  // component logic
-}
-```
-
-**Benefits:**
- Compiler handles optimization automatically
- No need for manual displayName assignment
- Cleaner component definition
-
-### 4. Optimized Computed Values
-
-#### Replaced useMemo with Direct Calculations
-**Before:**
-```javascript
-const totalHrs = useMemo(() => {
-  if (!cardSettings.totalHrs) return null;
-  const total = calculateTotal(data, "labhrs", "mod_lb_hrs") + calculateTotal(data, "larhrs", "mod_lb_hrs");
-  return parseFloat(total.toFixed(2));
-}, [data, cardSettings.totalHrs]);
-```
-
-**After:**
-```javascript
-const totalHrs = cardSettings.totalHrs
-  ? parseFloat((calculateTotal(data, "labhrs", "mod_lb_hrs") + calculateTotal(data, "larhrs", "mod_lb_hrs")).toFixed(2))
-  : null;
-```
-
-**Benefits:**
- Compiler automatically memoizes when needed
- More concise code
- Better readability
-
-### 5. Improved Card Rendering
-
-#### Simplified Employee Lookups
-**Before:**
-```javascript
-const { employee_body, employee_prep, employee_refinish, employee_csr } = useMemo(() => {
-  return {
-    employee_body: metadata?.employee_body && findEmployeeById(employees, metadata.employee_body),
-    employee_prep: metadata?.employee_prep && findEmployeeById(employees, metadata.employee_prep),
-    // ...
-  };
-}, [metadata, employees]);
-```
-
-**After:**
-```javascript
-const employee_body = metadata?.employee_body && findEmployeeById(employees, metadata.employee_body);
-const employee_prep = metadata?.employee_prep && findEmployeeById(employees, metadata.employee_prep);
-// ...
-```
-
-**Benefits:**
- Direct assignments are cleaner
- Compiler optimizes automatically
- Easier to debug
-
-### 6. Optimized Trello-Board Controllers
-
-#### BoardContainer Optimizations
- Removed `useCallback` from `wireEventBus`, `onDragStart`, and `onLaneDrag`
- Removed lodash `isEqual` for drag position comparison (uses direct comparison)
- Simplified event binding logic
-
-#### Lane Component Optimizations
- Removed `useCallback` from `toggleLaneCollapsed`, `renderDraggable`, `renderDroppable`, and `renderDragContainer`
- Direct function definitions for all render methods
- Compiler handles render optimization automatically
-
-#### Board Component Optimizations
- Removed `useMemo` for orientation style selection
- Removed `useMemo` for grid item width calculation
- Direct conditional assignment for styles
-
-## React 19 Compiler Benefits
-
-The React 19 compiler provides automatic optimizations:
-
-1. **Automatic Memoization**: Intelligently memoizes component outputs and computed values
-2. **Smart Re-rendering**: Only re-renders components when props actually change
-3. **Optimized Closures**: Reduces unnecessary closure creation
-4. **Better Dead Code Elimination**: Removes unused code paths more effectively
-
-## Ant Design 6 Compatibility
-
-### Current Layout Approach
-The current implementation uses `VirtuosoGrid` for vertical layouts, which provides:
- Virtual scrolling for performance
- Responsive grid layout
- Drag-and-drop support
-
-### Potential Masonry Enhancement (Future Consideration)
-While Ant Design 6 doesn't have a built-in Masonry component, the current grid layout can be enhanced with CSS Grid or a third-party masonry library if needed. The current implementation already provides:
- Flexible card sizing (small, medium, large)
- Responsive grid columns
- Efficient virtual scrolling
-
-**Note:** The VirtuosoGrid approach is more performant for large datasets due to virtualization, making it preferable over a traditional masonry layout for this use case.
-
-## Third-Party Library Considerations
-
-### DND Library (Drag and Drop)
-The `trello-board/dnd` directory contains a vendored drag-and-drop library that uses `use-memo-one` for memoization. **We intentionally did not modify this library** because:
- It's third-party code that should be updated at the source
- It uses a specialized memoization library (`use-memo-one`) for drag-and-drop performance
- Modifying it could introduce bugs or break drag-and-drop functionality
- The library's internal memoization is specifically tuned for DND operations
-
-## Performance Improvements
-
-### Measured Benefits:
-1. **Bundle Size**: Reduced by removing lodash deep clone/equal operations from main component
-2. **Memory Usage**: Lower memory footprint with direct state updates
-3. **Render Performance**: Compiler-optimized re-renders
-4. **Code Maintainability**: Cleaner, more readable code
-
-### Optimization Statistics:
- **Removed hooks**: 25+ useMemo/useCallback hooks across components
- **Removed memo wrappers**: 2 (EllipsesToolTip, ItemWrapper)
- **Lines of code reduced**: ~150+ lines of memoization boilerplate
-
-### Virtual Scrolling
-The components continue to leverage `Virtuoso` and `VirtuosoGrid` for optimal performance with large card lists:
- Only renders visible cards
- Maintains scroll position during updates
- Handles thousands of cards efficiently
-
-## Testing Recommendations
-
-1. **Visual Regression Testing**: Ensure card layout and interactions work correctly
-2. **Performance Testing**: Measure render times with large datasets
-3. **Drag-and-Drop Testing**: Verify drag-and-drop functionality remains intact
-4. **Responsive Testing**: Test on various screen sizes
-5. **Filter Testing**: Ensure all filters work correctly with optimized code
-6. **Memory Profiling**: Verify reduced memory usage with React DevTools Profiler
-
-## Migration Notes
-
-### Breaking Changes
-None - All optimizations are internal and maintain the same component API.
-
-### Backward Compatibility
-The components remain fully compatible with existing usage patterns.
-
-## Future Enhancement Opportunities
-
-1. **CSS Grid Masonry**: Consider CSS Grid masonry when widely supported
-2. **Animation Improvements**: Leverage React 19's improved transition APIs
-3. **Concurrent Features**: Explore React 19's concurrent rendering for smoother UX
-4. **Suspense Integration**: Consider wrapping async operations with Suspense boundaries
-5. **DND Library Update**: Monitor for React 19-compatible drag-and-drop libraries
-
-## Conclusion
-
-These optimizations modernize the production board kanban for React 19 while maintaining all functionality. The React Compiler handles memoization intelligently, allowing for cleaner, more maintainable code while achieving better performance. The trello-board directory has been fully optimized except for the vendored DND library, which should remain unchanged until an official React 19-compatible update is available.
-
---
-
-**Last Updated**: January 2026
-**React Version**: 19.2.3
-**Ant Design Version**: 6.2.0
-**Files Optimized**: 8 custom components + controllers
-**DND Library**: Intentionally preserved (use-memo-one based)
--- a/_reference/refactorReports/REACT_19_FEATURES_GUIDE.md
+++ b/_reference/refactorReports/REACT_19_FEATURES_GUIDE.md
@@ -1,468 +0,0 @@
-# React 19 Features Guide
-
-## Overview
-This guide covers the new React 19 features available in our codebase and provides practical examples for implementing them.
-
---
-
-## 1. New Hooks for Forms
-
-### `useFormStatus` - Track Form Submission State
-
-**What it does:** Provides access to the current form's submission status without manual state management.
-
-**Use Case:** Show loading states on submit buttons, disable inputs during submission.
-
-**Example:**
-```jsx
-import { useFormStatus } from 'react';
-
-function SubmitButton() {
-  const { pending } = useFormStatus();
-  
-  return (
-    <button type="submit" disabled={pending}>
-      {pending ? 'Saving...' : 'Save'}
-    </button>
-  );
-}
-
-function JobForm({ onSave }) {
-  return (
-    <form action={onSave}>
-      <input name="jobNumber" />
-      <SubmitButton />
-    </form>
-  );
-}
-```
-
-**Benefits:**
- No manual `useState` for loading states
- Automatic re-renders when form status changes
- Better separation of concerns (button doesn't need form state)
-
---
-
-### `useOptimistic` - Instant UI Updates
-
-**What it does:** Updates UI immediately while async operations complete in the background.
-
-**Use Case:** Comments, notes, status updates - anything where you want instant feedback.
-
-**Example:**
-```jsx
-import { useState, useOptimistic } from 'react';
-
-function JobNotes({ jobId, initialNotes }) {
-  const [notes, setNotes] = useState(initialNotes);
-  const [optimisticNotes, addOptimisticNote] = useOptimistic(
-    notes,
-    (current, newNote) => [...current, newNote]
-  );
-
-  async function handleAddNote(formData) {
-    const text = formData.get('note');
-    const tempNote = { id: Date.now(), text, pending: true };
-    
-    // Show immediately
-    addOptimisticNote(tempNote);
-    
-    // Save to server
-    const saved = await saveNote(jobId, text);
-    setNotes([...notes, saved]);
-  }
-
-  return (
-    <form action={handleAddNote}>
-      <textarea name="note" />
-      <button type="submit">Add Note</button>
-      <ul>
-        {optimisticNotes.map(note => (
-          <li key={note.id} style={{ opacity: note.pending ? 0.5 : 1 }}>
-            {note.text}
-          </li>
-        ))}
-      </ul>
-    </form>
-  );
-}
-```
-
-**Benefits:**
- Perceived performance improvement
- Better UX - users see changes instantly
- Automatic rollback on error (if implemented)
-
---
-
-### `useActionState` - Complete Form State Management
-
-**What it does:** Manages async form submissions with built-in loading, error, and success states.
-
-**Use Case:** Form validation, API submissions, complex form workflows.
-
-**Example:**
-```jsx
-import { useActionState } from 'react';
-
-async function createContract(prevState, formData) {
-  const data = {
-    customerId: formData.get('customerId'),
-    vehicleId: formData.get('vehicleId'),
-  };
-  
-  try {
-    const result = await fetch('/api/contracts', {
-      method: 'POST',
-      body: JSON.stringify(data),
-    });
-    
-    if (!result.ok) {
-      return { error: 'Failed to create contract', data: null };
-    }
-    
-    return { error: null, data: await result.json() };
-  } catch (err) {
-    return { error: err.message, data: null };
-  }
-}
-
-function ContractForm() {
-  const [state, submitAction, isPending] = useActionState(
-    createContract,
-    { error: null, data: null }
-  );
-
-  return (
-    <form action={submitAction}>
-      <input name="customerId" required />
-      <input name="vehicleId" required />
-      
-      <button type="submit" disabled={isPending}>
-        {isPending ? 'Creating...' : 'Create Contract'}
-      </button>
-      
-      {state.error && <div className="error">{state.error}</div>}
-      {state.data && <div className="success">Contract #{state.data.id} created!</div>}
-    </form>
-  );
-}
-```
-
-**Benefits:**
- Replaces multiple `useState` calls
- Built-in pending state
- Cleaner error handling
- Type-safe with TypeScript
-
---
-
-## 2. Actions API
-
-The Actions API simplifies form submissions and async operations by using the native `action` prop on forms.
-
-### Traditional Approach (React 18):
-```jsx
-function OldForm() {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  
-  async function handleSubmit(e) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    
-    try {
-      const formData = new FormData(e.target);
-      await saveData(formData);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-  
-  return (
-    <form onSubmit={handleSubmit}>
-      {/* form fields */}
-    </form>
-  );
-}
-```
-
-### Modern Approach (React 19):
-```jsx
-import { useActionState } from 'react';
-
-function NewForm() {
-  const [state, formAction, isPending] = useActionState(async (_, formData) => {
-    return await saveData(formData);
-  }, null);
-  
-  return (
-    <form action={formAction}>
-      {/* form fields */}
-    </form>
-  );
-}
-```
-
---
-
-## 3. Practical Implementation Examples
-
-### Example 1: Owner/Customer Form with Optimistic UI
-
-```jsx
-import { useOptimistic, useActionState } from 'react';
-import { Form, Input, Button } from 'antd';
-
-function OwnerFormModern({ owner, onSave }) {
-  const [optimisticOwner, setOptimisticOwner] = useOptimistic(
-    owner,
-    (current, updates) => ({ ...current, ...updates })
-  );
-  
-  const [state, submitAction, isPending] = useActionState(
-    async (_, formData) => {
-      const updates = {
-        name: formData.get('name'),
-        phone: formData.get('phone'),
-        email: formData.get('email'),
-      };
-      
-      // Show changes immediately
-      setOptimisticOwner(updates);
-      
-      // Save to server
-      try {
-        await onSave(updates);
-        return { success: true };
-      } catch (error) {
-        return { success: false, error: error.message };
-      }
-    },
-    { success: null }
-  );
-
-  return (
-    <form action={submitAction}>
-      <Form.Item label="Name">
-        <Input name="name" defaultValue={optimisticOwner.name} />
-      </Form.Item>
-      
-      <Form.Item label="Phone">
-        <Input name="phone" defaultValue={optimisticOwner.phone} />
-      </Form.Item>
-      
-      <Form.Item label="Email">
-        <Input name="email" defaultValue={optimisticOwner.email} />
-      </Form.Item>
-      
-      <Button type="primary" htmlType="submit" loading={isPending}>
-        {isPending ? 'Saving...' : 'Save Owner'}
-      </Button>
-      
-      {state.error && <div className="error">{state.error}</div>}
-    </form>
-  );
-}
-```
-
-### Example 2: Job Status Update with useFormStatus
-
-```jsx
-import { useFormStatus } from 'react';
-
-function JobStatusButton({ status }) {
-  const { pending } = useFormStatus();
-  
-  return (
-    <button disabled={pending}>
-      {pending ? 'Updating...' : `Mark as ${status}`}
-    </button>
-  );
-}
-
-function JobStatusForm({ jobId, currentStatus }) {
-  async function updateStatus(formData) {
-    const newStatus = formData.get('status');
-    await fetch(`/api/jobs/${jobId}/status`, {
-      method: 'PATCH',
-      body: JSON.stringify({ status: newStatus }),
-    });
-  }
-
-  return (
-    <form action={updateStatus}>
-      <input type="hidden" name="status" value="IN_PROGRESS" />
-      <JobStatusButton status="In Progress" />
-    </form>
-  );
-}
-```
-
---
-
-## 4. Third-Party Library Compatibility
-
-### ✅ Fully Compatible (Already in use)
-
-1. **Ant Design 6.2.0**
-   - ✅ Full React 19 support out of the box
-   - ✅ No patches or workarounds needed
-   - 📝 Note: Ant Design 6 was built with React 19 in mind
-
-2. **React-Redux 9.2.0**
-   - ✅ Full React 19 support
-   - ✅ All hooks (`useSelector`, `useDispatch`) work correctly
-   - 📝 Tip: Continue using hooks over `connect()` HOC
-
-3. **Apollo Client 4.0.13**
-   - ✅ Compatible with React 19
-   - ✅ `useQuery`, `useMutation` work correctly
-   - 📝 Note: Supports React 19's concurrent features
-
-4. **React Router 7.12.0**
-   - ✅ Full React 19 support
-   - ✅ All navigation hooks compatible
-   - ✅ Future flags enabled for optimal performance
-
-### Integration Notes
-
-All our major dependencies are already compatible with React 19:
- No additional patches needed
- No breaking changes in current code
- All hooks and patterns continue to work
-
---
-
-## 5. Migration Strategy
-
-### Gradual Adoption Approach
-
-**Phase 1: Learn** (Current)
- Review this guide
- Understand new hooks and patterns
- Identify good candidates for migration
-
-**Phase 2: Pilot** (Recommended)
- Start with new features/forms
- Try `useActionState` in one new form
- Measure developer experience improvement
-
-**Phase 3: Refactor** (Optional)
- Gradually update high-traffic forms
- Add optimistic UI to user-facing features
- Simplify complex form state management
-
-### Good Candidates for React 19 Features
-
-1. **Forms with Complex Loading States**
-   - Contract creation
-   - Job creation/editing
-   - Owner/Vehicle forms
-   - → Use `useActionState`
-
-2. **Instant Feedback Features**
-   - Adding job notes
-   - Status updates
-   - Comments/messages
-   - → Use `useOptimistic`
-
-3. **Submit Buttons**
-   - Any form button that needs loading state
-   - → Use `useFormStatus`
-
-### Don't Rush to Refactor
-
-**Keep using current patterns for:**
- Ant Design Form components (already excellent)
- Redux for global state
- Apollo Client for GraphQL
- Existing working code
-
-**Only refactor when:**
- Building new features
- Fixing bugs in forms
- Simplifying overly complex state management
-
---
-
-## 6. Performance Improvements in React 19
-
-### Automatic Optimizations
-
-React 19 includes built-in compiler optimizations that automatically improve performance:
-
-1. **Automatic Memoization**
-   - Less need for `useMemo` and `useCallback`
-   - Components automatically optimize re-renders
-
-2. **Improved Concurrent Rendering**
-   - Better handling of heavy operations
-   - Smoother UI during data loading
-
-3. **Enhanced Suspense**
-   - Better loading states
-   - Improved streaming SSR
-
-**What this means for us:**
- Existing code may run faster without changes
- Future code will be easier to write
- Less manual optimization needed
-
---
-
-## 7. Resources
-
-### Official Documentation
- [React 19 Release Notes](https://react.dev/blog/2024/12/05/react-19)
- [useActionState](https://react.dev/reference/react/useActionState)
- [useFormStatus](https://react.dev/reference/react-dom/hooks/useFormStatus)
- [useOptimistic](https://react.dev/reference/react/useOptimistic)
-
-### Migration Guides
- [React 18 to 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
- [Actions API Documentation](https://react.dev/reference/react/useActionState)
-
-### Community Resources
- [React 19 Features Tutorial](https://www.freecodecamp.org/news/react-19-actions-simpliy-form-submission-and-loading-states/)
- [Practical Examples](https://blog.logrocket.com/react-useactionstate/)
-
---
-
-## 8. Summary
-
-### Current Status
-✅ **All dependencies compatible with React 19**
- Ant Design 6.2.0 ✓
- React-Redux 9.2.0 ✓
- Apollo Client 4.0.13 ✓
- React Router 7.12.0 ✓
-
-### New Features Available
-🎯 **Ready to use in new code:**
- `useFormStatus` - Track form submission state
- `useOptimistic` - Instant UI updates
- `useActionState` - Complete form state management
- Actions API - Cleaner form handling
-
-### Recommendations
-1. ✅ **No immediate action required** - Everything works
-2. 🎯 **Start using new features in new code** - Especially forms
-3. 📚 **Learn gradually** - No need to refactor everything
-4. 🚀 **Enjoy performance improvements** - Automatic optimizations active
-
---
-
-## Questions or Need Help?
-
-Feel free to:
- Try examples in a branch first
- Ask the team for code reviews
- Share patterns that work well
- Document new patterns you discover
-
-**Happy coding with React 19! 🎉**
--- a/_reference/refactorReports/REACT_19_MIGRATION_SUMMARY.md
+++ b/_reference/refactorReports/REACT_19_MIGRATION_SUMMARY.md
@@ -1,382 +0,0 @@
-# React 19 Migration - Complete Summary
-
-**Date:** January 13, 2026  
-**Project:** Bodyshop Client Application  
-**Status:** ✅ Complete
-
---
-
-## Migration Overview
-
-Successfully upgraded from React 18 to React 19 with zero breaking changes and minimal code
-modifications.
-
---
-
-## Changes Made
-
-### 1. Package Updates
-
-| Package          | Before | After      |
-|------------------|--------|------------|
-| react            | 18.3.1 | **19.2.3** |
-| react-dom        | 18.3.1 | **19.2.3** |
-| react-router-dom | 6.30.3 | **7.12.0** |
-
-**Updated Files:**
-
- `package.json`
- `package-lock.json`
-
-### 2. Code Changes
-
-**File:** `src/index.jsx`
-
-Added React Router v7 future flags to enable optimal performance:
-
-```javascript
-const router = sentryCreateBrowserRouter(
-  createRoutesFromElements(<Route path="*" element={<AppContainer/>}/>),
-  {
-    future: {
-      v7_startTransition: true,      // Smooth transitions
-      v7_relativeSplatPath: true,    // Correct splat path resolution
-    },
-  }
-);
-```
-
-**Why:** These flags enable React Router v7's enhanced transition behavior and fix relative path
-resolution in splat routes (`path="*"`).
-
-### 3. Documentation Created
-
-Created comprehensive guides for the team:
-
-1. **REACT_19_FEATURES_GUIDE.md** (12KB)
-  - Overview of new React 19 hooks
-  - Practical examples for our codebase
-  - Third-party library compatibility check
-  - Migration strategy and recommendations
-
-2. **REACT_19_MODERNIZATION_EXAMPLES.md** (10KB)
-  - Before/after code comparisons
-  - Real-world examples from our codebase
-  - Step-by-step modernization checklist
-  - Best practices for gradual adoption
-
---
-
-## Verification Results
-
-### ✅ Build
-
- **Status:** Success
- **Time:** 42-48 seconds
- **Warnings:** None (only Sentry auth token warnings - expected)
- **Output:** 238 files, 7.6 MB precached
-
-### ✅ Tests
-
- **Unit Tests:** 5/5 passing
- **Duration:** ~5 seconds
- **Status:** All green
-
-### ✅ Linting
-
- **Status:** Clean
- **Errors:** 0
- **Warnings:** 0
-
-### ✅ Code Analysis
-
- **String refs:** None found ✓
- **defaultProps:** None found ✓
- **Legacy context:** None found ✓
- **ReactDOM.render:** Already using createRoot ✓
-
---
-
-## Third-Party Library Compatibility
-
-All major dependencies are fully compatible with React 19:
-
-### ✅ Ant Design 6.2.0
-
- **Status:** Full support, no patches needed
- **Notes:** Version 6 was built with React 19 in mind
- **Action Required:** None
-
-### ✅ React-Redux 9.2.0
-
- **Status:** Full compatibility
- **Notes:** All hooks work correctly
- **Action Required:** None
-
-### ✅ Apollo Client 4.0.13
-
- **Status:** Compatible
- **Notes:** Supports React 19 concurrent features
- **Action Required:** None
-
-### ✅ React Router 7.12.0
-
- **Status:** Fully compatible
- **Notes:** Future flags enabled for optimal performance
- **Action Required:** None
-
---
-
-## New Features Available
-
-React 19 introduces several powerful new features now available in our codebase:
-
-### 1. `useFormStatus`
-
-**Purpose:** Track form submission state without manual state management
-
-**Use Case:** Show loading states on buttons, disable during submission
-
-**Complexity:** Low - drop-in replacement for manual loading states
-
-### 2. `useOptimistic`
-
-**Purpose:** Update UI instantly while async operations complete
-
-**Use Case:** Comments, notes, status updates - instant user feedback
-
-**Complexity:** Medium - requires understanding of optimistic UI patterns
-
-### 3. `useActionState`
-
-**Purpose:** Complete async form state management (loading, error, success)
-
-**Use Case:** Form submissions, API calls, complex workflows
-
-**Complexity:** Medium - replaces multiple useState calls
-
-### 4. Actions API
-
-**Purpose:** Simpler form handling with native `action` prop
-
-**Use Case:** Any form submission or async operation
-
-**Complexity:** Low to Medium - cleaner than traditional onSubmit
-
---
-
-## Performance Improvements
-
-React 19 includes automatic performance optimizations:
-
- ✅ **Automatic Memoization** - Less need for useMemo/useCallback
- ✅ **Improved Concurrent Rendering** - Smoother UI during heavy operations
- ✅ **Enhanced Suspense** - Better loading states
- ✅ **Compiler Optimizations** - Automatic code optimization
-
-**Impact:** Existing code may run faster without any changes.
-
---
-
-## Recommendations
-
-### Immediate (No Action Required)
-
- ✅ Migration is complete
- ✅ All code works as-is
- ✅ Performance improvements are automatic
-
-### Short Term (Optional - For New Code)
-
-1. **Read the Documentation**
-  - Review `REACT_19_FEATURES_GUIDE.md`
-  - Understand new hooks and patterns
-
-2. **Try in New Features**
-  - Use `useActionState` in new forms
-  - Experiment with `useOptimistic` for notes/comments
-  - Use `useFormStatus` for submit buttons
-
-3. **Share Knowledge**
-  - Discuss patterns in code reviews
-  - Share what works well
-  - Document team preferences
-
-### Long Term (Optional - Gradual Refactoring)
-
-1. **High-Traffic Forms**
-  - Add optimistic UI to frequently-used features
-  - Simplify complex loading state management
-
-2. **New Features**
-  - Default to React 19 patterns for new code
-  - Build examples for the team
-
-3. **Team Training**
-  - Share learnings
-  - Update coding standards
-  - Create internal patterns library
-
---
-
-## What NOT to Do
-
-❌ **Don't rush to refactor everything**
-
- Current code works perfectly
- Ant Design forms are already excellent
- Only refactor when there's clear benefit
-
-❌ **Don't force new patterns**
-
- Some forms work better with traditional patterns
- Complex Ant Design forms should stay as-is
- Use new features where they make sense
-
-❌ **Don't break working code**
-
- If it ain't broke, don't fix it
- New features are additive, not replacements
- Migration is about gradual improvement
-
---
-
-## Success Metrics
-
-### Migration Quality: A+
-
- ✅ Zero breaking changes
- ✅ Zero deprecation warnings
- ✅ All tests passing
- ✅ Build successful
- ✅ Linting clean
-
-### Code Health: Excellent
-
- ✅ Already using React 18+ APIs
- ✅ No deprecated patterns
- ✅ Modern component structure
- ✅ Good separation of concerns
-
-### Future Readiness: High
-
- ✅ All dependencies compatible
- ✅ Ready for React 19 features
- ✅ No technical debt blocking adoption
- ✅ Clear migration path documented
-
---
-
-## Timeline
-
-| Date         | Action                | Status     |
-|--------------|-----------------------|------------|
-| Jan 13, 2026 | Package updates       | ✅ Complete |
-| Jan 13, 2026 | Future flags added    | ✅ Complete |
-| Jan 13, 2026 | Build verification    | ✅ Complete |
-| Jan 13, 2026 | Test verification     | ✅ Complete |
-| Jan 13, 2026 | Documentation created | ✅ Complete |
-| Jan 13, 2026 | Console warning fixed | ✅ Complete |
-
-**Total Time:** ~1 hour
-**Issues Encountered:** 0
-**Rollback Required:** No
-
---
-
-## Team Next Steps
-
-### For Developers
-
-1. ✅ Pull latest changes
-2. 📚 Read `REACT_19_FEATURES_GUIDE.md`
-3. 🎯 Try new patterns in next feature
-4. 💬 Share feedback with team
-
-### For Team Leads
-
-1. ✅ Review documentation
-2. 📋 Discuss adoption strategy in next standup
-3. 🎯 Identify good pilot features
-4. 📊 Track developer experience improvements
-
-### For QA
-
-1. ✅ No regression testing needed
-2. ✅ All existing tests pass
-3. 🎯 Watch for new features using React 19 patterns
-4. 📝 Document any issues (none expected)
-
---
-
-## Support Resources
-
-### Internal Documentation
-
- [React 19 Features Guide](REACT_19_FEATURES_GUIDE.md)
- [Modernization Examples](REACT_19_MODERNIZATION_EXAMPLES.md)
- This summary document
-
-### Official React Documentation
-
- [React 19 Release Notes](https://react.dev/blog/2024/12/05/react-19)
- [Migration Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
- [New Hooks Reference](https://react.dev/reference/react)
-
-### Community Resources
-
- [LogRocket Guide](https://blog.logrocket.com/react-useactionstate/)
- [FreeCodeCamp Tutorial](https://www.freecodecamp.org/news/react-19-actions-simpliy-form-submission-and-loading-states/)
-
---
-
-## Conclusion
-
-The migration to React 19 was **successful, seamless, and non-disruptive**.
-
-### Key Achievements
-
- ✅ Zero downtime
- ✅ Zero breaking changes
- ✅ Zero code refactoring required
- ✅ Enhanced features available
- ✅ Automatic performance improvements
-
-### Why It Went Smoothly
-
-1. **Codebase was already modern**
-  - Using ReactDOM.createRoot
-  - No deprecated APIs
-  - Good patterns in place
-
-2. **Dependencies were ready**
-  - All libraries React 19 compatible
-  - No version conflicts
-  - Smooth upgrade path
-
-3. **React 19 is backward compatible**
-  - New features are additive
-  - Old patterns still work
-  - Gradual adoption possible
-
-**Status: Ready for Production** ✅
-
---
-
-## Questions?
-
-If you have questions about:
-
- Using new React 19 features
- Migrating specific components
- Best practices for patterns
- Code review guidance
-
-Feel free to:
-
- Check the documentation
- Ask in team chat
- Create a POC/branch
- Request code review
-
-**Happy coding with React 19!** 🎉🚀
--- a/_reference/refactorReports/REACT_19_MODERNIZATION_EXAMPLES.md
+++ b/_reference/refactorReports/REACT_19_MODERNIZATION_EXAMPLES.md
@@ -1,375 +0,0 @@
-# React 19 Form Modernization Example
-
-This document shows a practical example of how existing forms in our codebase could be simplified
-using React 19 features.
-
---
-
-## Example: Sign-In Form Modernization
-
-### Current Implementation (React 18 Pattern)
-
-```jsx
-// Current approach using Redux, manual state management
-function SignInComponent({emailSignInStart, loginLoading, signInError}) {
-  const [form] = Form.useForm();
-
-  const handleFinish = (values) => {
-    const {email, password} = values;
-    emailSignInStart(email, password);
-  };
-
-  return (
-    <Form form={form} onFinish={handleFinish}>
-      <Form.Item name="email" rules={[{required: true, type: 'email'}]}>
-        <Input prefix={<UserOutlined/>} placeholder="Email"/>
-      </Form.Item>
-
-      <Form.Item name="password" rules={[{required: true}]}>
-        <Input.Password prefix={<LockOutlined/>} placeholder="Password"/>
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={loginLoading} block>
-          {loginLoading ? 'Signing in...' : 'Sign In'}
-        </Button>
-      </Form.Item>
-
-      {signInError && <AlertComponent type="error" message={signInError}/>}
-    </Form>
-  );
-}
-```
-
-**Characteristics:**
-
- ✅ Works well with Ant Design
- ✅ Good separation with Redux
- ⚠️ Loading state managed in Redux
- ⚠️ Error state managed in Redux
- ⚠️ Multiple state slices for one operation
-
---
-
-### Modern Alternative (React 19 Pattern)
-
-**Option 1: Keep Ant Design + Add useActionState for cleaner Redux actions**
-
-```jsx
-import {useActionState} from 'react';
-import {Form, Input, Button} from 'antd';
-import {UserOutlined, LockOutlined} from '@ant-design/icons';
-
-function SignInModern() {
-  const [form] = Form.useForm();
-
-  // Wrap your Redux action with useActionState
-  const [state, submitAction, isPending] = useActionState(
-    async (prevState, formData) => {
-      try {
-        // Call your Redux action
-        await emailSignInAsync(
-          formData.get('email'),
-          formData.get('password')
-        );
-        return {error: null, success: true};
-      } catch (error) {
-        return {error: error.message, success: false};
-      }
-    },
-    {error: null, success: false}
-  );
-
-  return (
-    <Form
-      form={form}
-      onFinish={(values) => {
-        // Convert Ant Design form values to FormData
-        const formData = new FormData();
-        formData.append('email', values.email);
-        formData.append('password', values.password);
-        submitAction(formData);
-      }}
-    >
-      <Form.Item name="email" rules={[{required: true, type: 'email'}]}>
-        <Input prefix={<UserOutlined/>} placeholder="Email"/>
-      </Form.Item>
-
-      <Form.Item name="password" rules={[{required: true}]}>
-        <Input.Password prefix={<LockOutlined/>} placeholder="Password"/>
-      </Form.Item>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={isPending} block>
-          {isPending ? 'Signing in...' : 'Sign In'}
-        </Button>
-      </Form.Item>
-
-      {state.error && <AlertComponent type="error" message={state.error}/>}
-    </Form>
-  );
-}
-```
-
-**Benefits:**
-
- ✅ Loading state is local (no Redux slice needed)
- ✅ Error handling is simpler
- ✅ Still works with Ant Design validation
- ✅ Less Redux boilerplate
-
---
-
-**Option 2: Native HTML Form + React 19 (for simpler use cases)**
-
-```jsx
-import {useActionState} from 'react';
-import {signInWithEmailAndPassword} from '@firebase/auth';
-import {auth} from '../../firebase/firebase.utils';
-
-function SimpleSignIn() {
-  const [state, formAction, isPending] = useActionState(
-    async (prevState, formData) => {
-      const email = formData.get('email');
-      const password = formData.get('password');
-
-      try {
-        await signInWithEmailAndPassword(auth, email, password);
-        return {error: null};
-      } catch (error) {
-        return {error: error.message};
-      }
-    },
-    {error: null}
-  );
-
-  return (
-    <form action={formAction} className="sign-in-form">
-      <input
-        type="email"
-        name="email"
-        placeholder="Email"
-        required
-      />
-
-      <input
-        type="password"
-        name="password"
-        placeholder="Password"
-        required
-      />
-
-      <button type="submit" disabled={isPending}>
-        {isPending ? 'Signing in...' : 'Sign In'}
-      </button>
-
-      {state.error && <div className="error">{state.error}</div>}
-    </form>
-  );
-}
-```
-
-**Benefits:**
-
- ✅ Minimal code
- ✅ No form library needed
- ✅ Built-in HTML5 validation
- ⚠️ Less feature-rich than Ant Design
-
---
-
-## Recommendation for Our Codebase
-
-### Keep Current Pattern When:
-
-1. Using complex Ant Design form features (nested forms, dynamic fields, etc.)
-2. Form state needs to be in Redux for other reasons
-3. Form is working well and doesn't need changes
-
-### Consider React 19 Pattern When:
-
-1. Creating new simple forms
-2. Form only needs local state
-3. Want to reduce Redux boilerplate
-4. Building optimistic UI features
-
---
-
-## Real-World Example: Job Note Adding
-
-Let's look at a more practical example for our domain:
-
-### Adding Job Notes with Optimistic UI
-
-```jsx
-import {useOptimistic, useActionState} from 'react';
-import {Form, Input, Button, List} from 'antd';
-
-function JobNotesModern({jobId, initialNotes}) {
-  const [notes, setNotes] = useState(initialNotes);
-
-  // Optimistic UI for instant feedback
-  const [optimisticNotes, addOptimisticNote] = useOptimistic(
-    notes,
-    (currentNotes, newNote) => [newNote, ...currentNotes]
-  );
-
-  // Form submission with loading state
-  const [state, submitAction, isPending] = useActionState(
-    async (prevState, formData) => {
-      const noteText = formData.get('note');
-
-      // Show note immediately (optimistic)
-      const tempNote = {
-        id: `temp-${Date.now()}`,
-        text: noteText,
-        createdAt: new Date().toISOString(),
-        pending: true,
-      };
-      addOptimisticNote(tempNote);
-
-      try {
-        // Save to server
-        const response = await fetch(`/api/jobs/${jobId}/notes`, {
-          method: 'POST',
-          body: JSON.stringify({text: noteText}),
-        });
-
-        const savedNote = await response.json();
-
-        // Update with real note
-        setNotes(prev => [savedNote, ...prev]);
-
-        return {error: null, success: true};
-      } catch (error) {
-        // Optimistic note will disappear on next render
-        return {error: error.message, success: false};
-      }
-    },
-    {error: null, success: false}
-  );
-
-  return (
-    <div className="job-notes">
-      <Form onFinish={(values) => {
-        const formData = new FormData();
-        formData.append('note', values.note);
-        submitAction(formData);
-      }}>
-        <Form.Item name="note" rules={[{required: true}]}>
-          <Input.TextArea
-            placeholder="Add a note..."
-            rows={3}
-          />
-        </Form.Item>
-
-        <Button type="primary" htmlType="submit" loading={isPending}>
-          {isPending ? 'Adding...' : 'Add Note'}
-        </Button>
-
-        {state.error && <div className="error">{state.error}</div>}
-      </Form>
-
-      <List
-        dataSource={optimisticNotes}
-        renderItem={note => (
-          <List.Item style={{opacity: note.pending ? 0.5 : 1}}>
-            <List.Item.Meta
-              title={note.text}
-              description={new Date(note.createdAt).toLocaleString()}
-            />
-            {note.pending && <span className="badge">Saving...</span>}
-          </List.Item>
-        )}
-      />
-    </div>
-  );
-}
-```
-
-**User Experience:**
-
-1. User types note and clicks "Add Note"
-2. Note appears instantly (optimistic)
-3. Note is grayed out with "Saving..." badge
-4. Once saved, note becomes solid and badge disappears
-5. If error, note disappears and error shows
-
-**Benefits:**
-
- ⚡ Instant feedback (feels faster)
- 🎯 Clear visual indication of pending state
- ✅ Automatic error handling
- 🧹 Clean, readable code
-
---
-
-## Migration Checklist
-
-When modernizing a form to React 19 patterns:
-
-### Step 1: Analyze Current Form
-
- [ ] Does it need Redux state? (Multi-component access?)
- [ ] How complex is the validation?
- [ ] Does it benefit from optimistic UI?
- [ ] Is it a good candidate for modernization?
-
-### Step 2: Choose Pattern
-
- [ ] Keep Ant Design + useActionState (complex forms)
- [ ] Native HTML + Actions (simple forms)
- [ ] Add useOptimistic (instant feedback needed)
-
-### Step 3: Implement
-
- [ ] Create new branch
- [ ] Update component
- [ ] Test loading states
- [ ] Test error states
- [ ] Test success flow
-
-### Step 4: Review
-
- [ ] Code is cleaner/simpler?
- [ ] No loss of functionality?
- [ ] Better UX?
- [ ] Team understands pattern?
-
---
-
-## Conclusion
-
-React 19's new features are **additive** - they give us new tools without breaking existing
-patterns.
-
-**Recommended Approach:**
-
-1. ✅ Keep current forms working as-is
-2. 🎯 Try React 19 patterns in NEW forms first
-3. 📚 Learn by doing in low-risk features
-4. 🔄 Gradually adopt where it makes sense
-
-**Don't:**
-
- ❌ Rush to refactor everything
- ❌ Break working code
- ❌ Force patterns where they don't fit
-
-**Do:**
-
- ✅ Experiment with new features
- ✅ Share learnings with team
- ✅ Use where it improves code
- ✅ Enjoy better DX (Developer Experience)!
-
---
-
-## Next Steps
-
-1. Review the main [REACT_19_FEATURES_GUIDE.md](REACT_19_FEATURES_GUIDE.md)
-2. Try `useActionState` in one new form
-3. Share feedback with the team
-4. Consider optimistic UI for high-traffic features
-
-Happy coding! 🚀
--- a/_reference/refactorReports/REACT_GRID_LAYOUT_MIGRATION.md
+++ b/_reference/refactorReports/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
--- a/client/.env.development.imex
+++ b/client/.env.development.imex
@@ -17,5 +17,4 @@ TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
-VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891
-VITE_ENABLE_COMPILER_IN_DEV=1
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891
--- a/client/.env.development.rome
+++ b/client/.env.development.rome
@@ -19,5 +19,4 @@ TEST_PASSWORD="test123"
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
-VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78
-VITE_ENABLE_COMPILER_IN_DEV=1
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78
--- a/client/.env.test.imex
+++ b/client/.env.test.imex
@@ -16,4 +16,4 @@ VITE_APP_INSTANCE=IMEX
 VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
-VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@@ -1,17 +1,10 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import pluginReact from "eslint-plugin-react";
-import pluginReactCompiler from "eslint-plugin-react-compiler";

 /** @type {import("eslint").Linter.Config[]} */
 export default [
-  { ignores: [
-    "node_modules/**", 
-    "dist/**", 
-    "build/**", 
-    "dev-dist/**",
-    "**/trello-board/dnd/**" // Exclude third-party DnD library
-  ] },
+  { ignores: ["node_modules/**", "dist/**", "build/**", "dev-dist/**"] },
  {
    files: ["**/*.{js,mjs,cjs,jsx}"]
  },
@@ -28,13 +21,5 @@ export default [
      "react/no-children-prop": 0 // Disable react/no-children-prop rule
    }
  },
-  pluginReact.configs.flat["jsx-runtime"],
-  {
-    plugins: {
-      "react-compiler": pluginReactCompiler
-    },
-    rules: {
-      "react-compiler/react-compiler": "error"
-    }
-  }
+  pluginReact.configs.flat["jsx-runtime"]
 ];
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -8,85 +8,86 @@
  "private": true,
  "proxy": "http://localhost:4000",
  "dependencies": {
-    "@amplitude/analytics-browser": "^2.33.4",
+    "@amplitude/analytics-browser": "^2.25.2",
    "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^4.1.1",
+    "@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.7",
-    "@firebase/auth": "^1.12.0",
-    "@firebase/firestore": "^4.10.0",
+    "@fingerprintjs/fingerprintjs": "^4.6.1",
+    "@firebase/analytics": "^0.10.17",
+    "@firebase/app": "^0.14.3",
+    "@firebase/auth": "^1.10.8",
+    "@firebase/firestore": "^4.9.2",
    "@firebase/messaging": "^0.12.22",
    "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@sentry/cli": "^3.1.0",
-    "@sentry/react": "^10.35.0",
-    "@sentry/vite-plugin": "^4.7.0",
-    "@splitsoftware/splitio-react": "^2.6.1",
-    "@tanem/react-nprogress": "^5.0.56",
-    "antd": "^6.2.1",
-    "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.8.0",
+    "graphql": "^16.11.0",
+    "i18next": "^25.5.3",
    "i18next-browser-languagedetector": "^8.2.0",
    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.34",
-    "lightningcss": "^1.31.0",
-    "logrocket": "^11.0.0",
+    "libphonenumber-js": "^1.12.23",
+    "lightningcss": "^1.30.2",
+    "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.335.0",
+    "phone": "^3.1.67",
+    "posthog-js": "^1.271.0",
    "prop-types": "^15.8.1",
    "query-string": "^9.3.1",
    "raf-schd": "^4.0.3",
-    "react": "^19.2.3",
+    "react": "^18.3.1",
    "react-big-calendar": "^1.19.4",
    "react-color": "^2.19.3",
    "react-cookie": "^8.0.1",
-    "react-dom": "^19.2.3",
+    "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.3",
+    "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-router-dom": "^7.12.0",
+    "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.8",
+    "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'",
@@ -97,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",
@@ -134,38 +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.52.0",
+    "@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.58.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.2",
-    "@vitejs/plugin-react": "^5.1.2",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "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",
-    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "globals": "^17.1.0",
-    "jsdom": "^27.4.0",
-    "memfs": "^4.56.10",
+    "globals": "^15.15.0",
+    "jsdom": "^26.0.0",
+    "memfs": "^4.48.1",
    "os-browserify": "^0.3.0",
-    "playwright": "^1.58.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.25.0",
-    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-node-polyfills": "^0.24.0",
+    "vite-plugin-pwa": "^1.0.3",
    "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^4.0.18",
-    "workbox-window": "^7.4.0"
+    "vitest": "^3.2.4",
+    "workbox-window": "^7.3.0"
  }
 }
--- a/client/src/App/App.container.jsx
+++ b/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";
@@ -6,7 +6,8 @@ import enLocale from "antd/es/locale/en_US";
 import { useEffect, useMemo } from "react";
 import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
+import { connect, useSelector } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import { setDarkMode } from "../redux/application/application.actions";
 import { selectDarkMode } from "../redux/application/application.selectors";
@@ -27,102 +28,93 @@ const config = {
 function SplitClientProvider({ children }) {
  const imexshopid = useSelector((state) => state.user.imexshopid);
  const splitClient = useSplitClient({ key: imexshopid || "anon" });
-
  useEffect(() => {
-    if (import.meta.env.DEV && splitClient && imexshopid) {
+    if (splitClient && imexshopid) {
      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
    }
  }, [splitClient, imexshopid]);
-
  return children;
 }

-function AppContainer() {
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
+  signOutStart: () => dispatch(signOutStart())
+});
+
+function AppContainer({ currentUser, setDarkMode, signOutStart }) {
  const { t } = useTranslation();
-  const dispatch = useDispatch();
-
-  const currentUser = useSelector(selectCurrentUser);
  const isDarkMode = useSelector(selectDarkMode);
-
  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);

-  const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
-
-  const antdForm = useMemo(
-    () => ({
-      validateMessages: {
-        required: t("general.validation.required", { label: "${label}" })
-      }
-    }),
-    [t]
-  );
-
  // Global seamless logout listener with redirect to /signin
  useEffect(() => {
    const handleSeamlessLogout = (event) => {
      if (event.data?.type !== "seamlessLogoutRequest") return;

-      // Only accept messages from the parent window
-      if (event.source !== window.parent) return;
-
-      const targetOrigin = event.origin || "*";
+      const requestOrigin = event.origin;

      if (currentUser?.authorized !== true) {
-        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
+        window.parent.postMessage(
+          { type: "seamlessLogoutResponse", status: "already_logged_out" },
+          requestOrigin || "*"
+        );
        return;
      }

-      dispatch(signOutStart());
-      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
+      signOutStart();
+      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
    };

    window.addEventListener("message", handleSeamlessLogout);
    return () => {
      window.removeEventListener("message", handleSeamlessLogout);
    };
-  }, [dispatch, currentUser?.authorized]);
+  }, [signOutStart, currentUser]);

-  // Update data-theme attribute (no cleanup to avoid transient style churn)
+  // Update data-theme attribute
  useEffect(() => {
-    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+    return () => document.documentElement.removeAttribute("data-theme");
  }, [isDarkMode]);

  // Sync darkMode with localStorage
  useEffect(() => {
-    const uid = currentUser?.uid;
-
-    if (!uid) {
-      dispatch(setDarkMode(false));
-      return;
+    if (currentUser?.uid) {
+      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
+      if (savedMode !== null) {
+        setDarkMode(JSON.parse(savedMode));
+      } else {
+        setDarkMode(false);
+      }
+    } else {
+      setDarkMode(false);
    }
-
-    const key = `dark-mode-${uid}`;
-    const raw = localStorage.getItem(key);
-
-    if (raw == null) {
-      dispatch(setDarkMode(false));
-      return;
-    }
-
-    try {
-      dispatch(setDarkMode(Boolean(JSON.parse(raw))));
-    } catch {
-      dispatch(setDarkMode(false));
-    }
-  }, [currentUser?.uid, dispatch]);
+  }, [currentUser?.uid, setDarkMode]);

  // Persist darkMode
  useEffect(() => {
-    const uid = currentUser?.uid;
-    if (!uid) return;
-
-    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
+    if (currentUser?.uid) {
+      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
+    }
  }, [isDarkMode, currentUser?.uid]);

  return (
    <CookiesProvider>
      <ApolloProvider client={client}>
-        <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
+        <ConfigProvider
+          input={{ autoComplete: "new-password" }}
+          locale={enLocale}
+          theme={theme}
+          form={{
+            validateMessages: {
+              required: t("general.validation.required", { label: "${label}" })
+            }
+          }}
+        >
          <GlobalLoadingBar />
          <SplitFactoryProvider config={config}>
            <SplitClientProvider>
@@ -135,4 +127,4 @@ function AppContainer() {
  );
 }

-export default Sentry.withProfiler(AppContainer);
+export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));
--- a/client/src/App/App.styles.scss
+++ b/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;
-//}
+//} 
--- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
+++ b/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}
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/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}
--- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
+++ b/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}
--- a/client/src/components/alert/alert.component.test.jsx
+++ b/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
  });
--- a/client/src/components/allocations-assignment/allocations-assignment.component.jsx
+++ b/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}>
--- a/client/src/components/allocations-assignment/allocations-assignment.container.jsx
+++ b/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";
@@ -19,15 +19,15 @@ export default function AllocationsAssignmentContainer({ jobLineId, hours, refet
  const handleAssignment = () => {
    insertAllocation({ variables: { alloc: { ...assignment } } })
      .then(() => {
-        notification.success({
-          title: t("allocations.successes.save")
+        notification["success"]({
+          message: t("allocations.successes.save")
        });
        visibilityState[1](false);
        if (refetch) refetch();
      })
      .catch((error) => {
-        notification.error({
-          title: t("employees.errors.saving", { message: error.message })
+        notification["error"]({
+          message: t("employees.errors.saving", { message: error.message })
        });
      });
  };
--- a/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
+++ b/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}>
--- a/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx
+++ b/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";
@@ -25,8 +25,8 @@ export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }
    }, []);

    insertAllocation({ variables: { alloc: allocs } }).then(() => {
-      notification.success({
-        title: t("employees.successes.save")
+      notification["success"]({
+        message: t("employees.successes.save")
      });
      visibilityState[1](false);
      if (refetch) refetch();
--- a/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
+++ b/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";
@@ -13,13 +13,13 @@ export default function AllocationsLabelContainer({ allocation, refetch }) {
    e.preventDefault();
    deleteAllocation({ variables: { id: allocation.id } })
      .then(() => {
-        notification.success({
-          title: t("allocations.successes.deleted")
+        notification["success"]({
+          message: t("allocations.successes.deleted")
        });
        if (refetch) refetch();
      })
      .catch(() => {
-        notification.error({ title: t("allocations.errors.deleting") });
+        notification["error"]({ message: t("allocations.errors.deleting") });
      });
  };

--- a/client/src/components/audit-trail-list/audit-trail-list.component.jsx
+++ b/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}
--- a/client/src/components/audit-trail-list/audit-trail-list.container.jsx
+++ b/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>
--- a/client/src/components/audit-trail-list/email-audit-trail-list.component.jsx
+++ b/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}
--- a/client/src/components/bill-delete-button/bill-delete-button.component.jsx
+++ b/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";
@@ -44,7 +44,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
    });

    if (!result.errors) {
-      notification.success({ title: t("bills.successes.deleted") });
+      notification["success"]({ message: t("bills.successes.deleted") });
      insertAuditTrail({
        jobid: jobid,
        operation: AuditTrailMapping.billdeleted(bill.invoice_number),
@@ -57,14 +57,14 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
      const error = JSON.stringify(result.errors);

      if (error.toLowerCase().includes("inventory_billid_fkey")) {
-        notification.error({
-          title: t("bills.errors.deleting", {
+        notification["error"]({
+          message: t("bills.errors.deleting", {
            error: t("bills.errors.existinginventoryline")
          })
        });
      } else {
-        notification.error({
-          title: t("bills.errors.deleting", {
+        notification["error"]({
+          message: t("bills.errors.deleting", {
            error: JSON.stringify(result.errors)
          })
        });
@@ -77,7 +77,13 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
  return (
    <RbacWrapper action="bills:delete" noauth={<></>}>
      <Popconfirm disabled={bill.exported} onConfirm={handleDelete} title={t("bills.labels.deleteconfirm")}>
-        <Button icon={<DeleteFilled />} disabled={bill.exported} loading={loading} />
+        <Button
+          disabled={bill.exported}
+          // onClick={handleDelete}
+          loading={loading}
+        >
+          <DeleteFilled />
+        </Button>
      </Popconfirm>
    </RbacWrapper>
  );
--- a/client/src/components/bill-detail-edit/bill-detail-edit-component.jsx
+++ b/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";
@@ -56,7 +56,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
  const handleSave = () => {
    //It's got a previously deducted bill line!
    if (
-      data?.bills_by_pk?.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
+      data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
      form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length > 0
    )
      setOpen(true);
@@ -84,7 +84,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
    //Find bill lines that were deleted.
    const deletedJobLines = [];

-    data?.bills_by_pk?.billlines.forEach((a) => {
+    data.bills_by_pk.billlines.forEach((a) => {
      const matchingRecord = billlines.find((b) => b.id === a.id);
      if (!matchingRecord) {
        deletedJobLines.push(a);
@@ -148,11 +148,11 @@ 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;
-  const isinhouse = data?.bills_by_pk && data?.bills_by_pk?.isinhouse;
+  const exported = data?.bills_by_pk && data.bills_by_pk.exported;
+  const isinhouse = data?.bills_by_pk && data.bills_by_pk.isinhouse;

  return (
    <>
@@ -160,7 +160,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
      {data && (
        <>
          <PageHeader
-            title={data && `${data?.bills_by_pk?.invoice_number} - ${data?.bills_by_pk?.vendor?.name}`}
+            title={data && `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`}
            extra={
              <Space>
                <BillDetailEditReturn data={data} />
@@ -189,18 +189,18 @@ 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 }}
-                invoice_number={data ? data?.bills_by_pk?.invoice_number : null}
-                vendorid={data ? data?.bills_by_pk?.vendorid : null}
+                job={{ id: data ? data.bills_by_pk.jobid : null }}
+                invoice_number={data ? data.bills_by_pk.invoice_number : null}
+                vendorid={data ? data.bills_by_pk.vendorid : null}
              />
            ) : (
              <JobDocumentsGallery
-                jobId={data ? data?.bills_by_pk?.jobid : null}
+                jobId={data ? data.bills_by_pk.jobid : null}
                billId={search.billid}
-                documentsList={data ? data?.bills_by_pk?.documents : []}
+                documentsList={data ? data.bills_by_pk.documents : []}
                billsCallback={refetch}
              />
            )}
@@ -212,7 +212,7 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
 }

 const transformData = (data) => {
-  return data?.bills_by_pk
+  return data
    ? {
        ...data.bills_by_pk,

--- a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
@@ -23,7 +23,7 @@ export default function BillDetailEditcontainer() {

  return (
    <Drawer
-      size={drawerPercentage}
+      width={drawerPercentage}
      onClose={() => {
        delete search.billid;
        history({ search: queryString.stringify(search) });
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/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
@@ -205,8 +205,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
        }
      });
      if (jobUpdate.errors) {
-        notification.error({
-          title: t("jobs.errors.saving", {
+        notification["error"]({
+          message: t("jobs.errors.saving", {
            message: JSON.stringify(jobUpdate.errors)
          })
        });
@@ -224,8 +224,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
      if (r2.errors) {
        setLoading(false);
        setEnterAgain(false);
-        notification.error({
-          title: t("parts_orders.errors.updating", {
+        notification["error"]({
+          message: t("parts_orders.errors.updating", {
            message: JSON.stringify(r2.errors)
          })
        });
@@ -235,8 +235,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
    if (r1.errors) {
      setLoading(false);
      setEnterAgain(false);
-      notification.error({
-        title: t("bills.errors.creating", {
+      notification["error"]({
+        message: t("bills.errors.creating", {
          message: JSON.stringify(r1.errors)
        })
      });
@@ -255,8 +255,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
      if (r2.errors) {
        setLoading(false);
        setEnterAgain(false);
-        notification.error({
-          title: t("inventory.errors.updating", {
+        notification["error"]({
+          message: t("inventory.errors.updating", {
            message: JSON.stringify(r2.errors)
          })
        });
@@ -343,8 +343,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
    }
    ///////////////////////////
    setLoading(false);
-    notification.success({
-      title: t("bills.successes.created")
+    notification["success"]({
+      message: t("bills.successes.created")
    });

    if (generateLabel) {
--- a/client/src/components/bill-form-lines-extended/bill-form-lines.extended.formitem.component.jsx
+++ b/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
@@ -32,7 +31,6 @@ export function BillFormItemsExtendedFormItem({
  if (!value)
    return (
      <Button
-        icon={<PlusCircleFilled />}
        onClick={() => {
          const values = form.getFieldsValue("billlineskeys");

@@ -46,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
@@ -54,7 +52,9 @@ export function BillFormItemsExtendedFormItem({
            }
          });
        }}
-      />
+      >
+        <PlusCircleFilled />
+      </Button>
    );

  return (
@@ -100,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>
@@ -195,7 +195,6 @@ export function BillFormItemsExtendedFormItem({
      </Form.Item>

      <Button
-        icon={<MinusCircleFilled />}
        onClick={() => {
          const values = form.getFieldsValue("billlineskeys");

@@ -207,7 +206,9 @@ export function BillFormItemsExtendedFormItem({
            }
          });
        }}
-      />
+      >
+        <MinusCircleFilled />
+      </Button>
    </Space>
  );
 }
--- a/client/src/components/bill-form/bill-form.component.jsx
+++ b/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
@@ -110,7 +109,7 @@ export function BillFormComponent({
    }

    if (vendorId === bodyshop.inhousevendorid && !billEdit) {
-      loadInventory({ variables: {} });
+      loadInventory();
    }
  }, [
    form,
@@ -126,7 +125,7 @@ export function BillFormComponent({
  return (
    <div>
      <FormFieldsChanged form={form} />
-      <Form.Item hidden name="isinhouse" valuePropName="checked">
+      <Form.Item style={{ display: "none" }} name="isinhouse" valuePropName="checked">
        <Switch />
      </Form.Item>
      <LayoutFormRow grow>
@@ -193,7 +192,7 @@ export function BillFormComponent({
          <Alert
            key={iou.id}
            type="warning"
-            title={
+            message={
              <Space>
                {t("bills.labels.iouexists")}
                <Link target="_blank" rel="noopener noreferrer" to={`/manage/jobs/${iou.id}?tab=repairdata`}>
@@ -355,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>
@@ -413,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>
              );
@@ -431,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
@@ -451,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
--- a/client/src/components/bill-form/bill-form.container.jsx
+++ b/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
--- a/client/src/components/bill-form/bill-form.lines.component.jsx
+++ b/client/src/components/bill-form/bill-form.lines.component.jsx
@@ -1,28 +1,26 @@
 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";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectDarkMode } from "../../redux/application/application.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";

 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  isDarkMode: selectDarkMode
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = () => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-
-const mapDispatchToProps = () => ({});

 export function BillEnterModalLinesComponent({
  bodyshop,
-  isDarkMode,
  disabled,
  lineData,
  discount,
@@ -33,102 +31,9 @@ export function BillEnterModalLinesComponent({
  const { t } = useTranslation();
  const { setFieldsValue, getFieldsValue, getFieldValue } = form;

-  const CONTROL_HEIGHT = 32;
-
-  const normalizeDiscount = (d) => {
-    const n = Number(d);
-    if (!Number.isFinite(n) || n <= 0) return 0;
-    return n > 1 ? n / 100 : n;
-  };
-
-  const round2 = (v) => Math.round((v + Number.EPSILON) * 100) / 100;
-
-  const isBlank = (v) => v === null || v === undefined || v === "" || Number.isNaN(v);
-
-  const toNumber = (raw) => {
-    if (raw === null || raw === undefined) return NaN;
-    if (typeof raw === "number") return raw;
-
-    if (typeof raw === "string") {
-      const cleaned = raw
-        .trim()
-        .replace(/[^\d.,-]/g, "")
-        .replace(/,/g, "");
-      return Number.parseFloat(cleaned);
-    }
-
-    if (typeof raw === "object") {
-      try {
-        if (typeof raw.toNumber === "function") return raw.toNumber();
-
-        const v = raw.valueOf?.();
-        if (typeof v === "number") return v;
-        if (typeof v === "string") {
-          const cleaned = v
-            .trim()
-            .replace(/[^\d.,-]/g, "")
-            .replace(/,/g, "");
-          return Number.parseFloat(cleaned);
-        }
-      } catch {
-        // ignore
-      }
-    }
-
-    return NaN;
-  };
-
-  const setLineField = (index, field, value) => {
-    if (typeof form.setFieldValue === "function") {
-      form.setFieldValue(["billlines", index, field], value);
-      return;
-    }
-
-    const lines = form.getFieldValue("billlines") || [];
-    form.setFieldsValue({
-      billlines: lines.map((l, i) => (i === index ? { ...l, [field]: value } : l))
-    });
-  };
-
-  const autofillActualCost = (index) => {
-    Promise.resolve().then(() => {
-      const retailRaw = form.getFieldValue(["billlines", index, "actual_price"]);
-      const actualRaw = form.getFieldValue(["billlines", index, "actual_cost"]);
-      const d = normalizeDiscount(discount);
-
-      if (!isBlank(actualRaw)) return;
-
-      const retail = toNumber(retailRaw);
-      if (!Number.isFinite(retail)) return;
-
-      const next = round2(retail * (1 - d));
-      setLineField(index, "actual_cost", next);
-    });
-  };
-
-  const getIndicatorColor = (lineDiscount) => {
-    const d = normalizeDiscount(discount);
-    if (Math.abs(lineDiscount - d) > 0.005) return lineDiscount > d ? "orange" : "red";
-    return "green";
-  };
-
-  const getIndicatorShellStyles = (statusColor) => {
-    if (isDarkMode) {
-      if (statusColor === "green")
-        return { borderColor: "rgba(82, 196, 26, 0.75)", background: "rgba(82, 196, 26, 0.10)" };
-      if (statusColor === "orange")
-        return { borderColor: "rgba(250, 173, 20, 0.75)", background: "rgba(250, 173, 20, 0.10)" };
-      return { borderColor: "rgba(255, 77, 79, 0.75)", background: "rgba(255, 77, 79, 0.10)" };
-    }
-
-    if (statusColor === "green") return { borderColor: "#b7eb8f", background: "#f6ffed" };
-    if (statusColor === "orange") return { borderColor: "#ffe58f", background: "#fffbe6" };
-    return { borderColor: "#ffccc7", background: "#fff2f0" };
-  };
-
  const {
    treatments: { Simple_Inventory, Enhanced_Payroll }
-  } = useTreatmentsWithConfig({
+  } = useSplitTreatments({
    attributes: {},
    names: ["Simple_Inventory", "Enhanced_Payroll"],
    splitKey: bodyshop && bodyshop.imexshopid
@@ -141,15 +46,24 @@ export function BillEnterModalLinesComponent({
        dataIndex: "joblineid",
        editable: true,
        minWidth: "10rem",
-        formItemProps: (field) => ({
-          key: `${field.name}joblinename`,
-          name: [field.name, "joblineid"],
-          label: t("billlines.fields.jobline"),
-          rules: [{ required: true }]
-        }),
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}joblinename`,
+            name: [field.name, "joblineid"],
+            label: t("billlines.fields.jobline"),
+            rules: [
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]
+          };
+        },
        wrapper: (props) => (
          <Form.Item noStyle shouldUpdate={(prev, cur) => prev.is_credit_memo !== cur.is_credit_memo}>
-            {() => props.children}
+            {() => {
+              return props.children;
+            }}
          </Form.Item>
        ),
        formInput: (record, index) => (
@@ -157,37 +71,35 @@ export function BillEnterModalLinesComponent({
            disabled={disabled}
            options={lineData}
            style={{
+              //width: "10rem",
+              // maxWidth: "20rem",
              minWidth: "20rem",
              whiteSpace: "normal",
              height: "auto",
-              minHeight: `${CONTROL_HEIGHT}px`
+              minHeight: "32px" // default height of Ant Design inputs
            }}
            allowRemoved={form.getFieldValue("is_credit_memo") || false}
            onSelect={(value, opt) => {
-              const d = normalizeDiscount(discount);
-              const retail = Number(opt.cost);
-              const computedActual = Number.isFinite(retail) ? round2(retail * (1 - d)) : null;
-
              setFieldsValue({
-                billlines: (getFieldValue("billlines") || []).map((item, idx) => {
-                  if (idx !== index) return item;
-
-                  return {
-                    ...item,
-                    line_desc: opt.line_desc,
-                    quantity: opt.part_qty || 1,
-                    actual_price: opt.cost,
-                    original_actual_price: opt.cost,
-                    actual_cost: isBlank(item.actual_cost) ? computedActual : item.actual_cost,
-                    cost_center: opt.part_type
-                      ? bodyshopHasDmsKey(bodyshop)
-                        ? opt.part_type !== "PAE"
-                          ? opt.part_type
-                          : null
-                        : responsibilityCenters.defaults &&
-                          (responsibilityCenters.defaults.costs[opt.part_type] || null)
-                      : null
-                  };
+                billlines: getFieldsValue(["billlines"]).billlines.map((item, idx) => {
+                  if (idx === index) {
+                    return {
+                      ...item,
+                      line_desc: opt.line_desc,
+                      quantity: opt.part_qty || 1,
+                      actual_price: opt.cost,
+                      original_actual_price: opt.cost,
+                      cost_center: opt.part_type
+                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                          ? opt.part_type !== "PAE"
+                            ? opt.part_type
+                            : null
+                          : responsibilityCenters.defaults &&
+                            (responsibilityCenters.defaults.costs[opt.part_type] || null)
+                        : null
+                    };
+                  }
+                  return item;
                })
              });
            }}
@@ -199,12 +111,19 @@ export function BillEnterModalLinesComponent({
        dataIndex: "line_desc",
        editable: true,
        minWidth: "10rem",
-        formItemProps: (field) => ({
-          key: `${field.name}line_desc`,
-          name: [field.name, "line_desc"],
-          label: t("billlines.fields.line_desc"),
-          rules: [{ required: true }]
-        }),
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}line_desc`,
+            name: [field.name, "line_desc"],
+            label: t("billlines.fields.line_desc"),
+            rules: [
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]
+          };
+        },
        formInput: () => <Input.TextArea disabled={disabled} autoSize />
      },
      {
@@ -212,28 +131,31 @@ export function BillEnterModalLinesComponent({
        dataIndex: "quantity",
        editable: true,
        width: "4rem",
-        formItemProps: (field) => ({
-          key: `${field.name}quantity`,
-          name: [field.name, "quantity"],
-          label: t("billlines.fields.quantity"),
-          rules: [
-            { required: true },
-            ({ getFieldValue: gf }) => ({
-              validator(_, value) {
-                const invLen = gf(["billlines", field.name, "inventories"])?.length ?? 0;
-
-                if (value && invLen > value) {
-                  return Promise.reject(
-                    t("bills.validation.inventoryquantity", {
-                      number: invLen
-                    })
-                  );
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}quantity`,
+            name: [field.name, "quantity"],
+            label: t("billlines.fields.quantity"),
+            rules: [
+              {
+                required: true
+                //message: t("general.validation.required"),
+              },
+              ({ getFieldValue }) => ({
+                validator(rule, value) {
+                  if (value && getFieldValue("billlines")[field.fieldKey]?.inventories?.length > value) {
+                    return Promise.reject(
+                      t("bills.validation.inventoryquantity", {
+                        number: getFieldValue("billlines")[field.fieldKey]?.inventories?.length
+                      })
+                    );
+                  }
+                  return Promise.resolve();
                }
-                return Promise.resolve();
-              }
-            })
-          ]
-        }),
+              })
+            ]
+          };
+        },
        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} />
      },
      {
@@ -241,19 +163,37 @@ export function BillEnterModalLinesComponent({
        dataIndex: "actual_price",
        width: "8rem",
        editable: true,
-        formItemProps: (field) => ({
-          key: `${field.name}actual_price`,
-          name: [field.name, "actual_price"],
-          label: t("billlines.fields.actual_price"),
-          rules: [{ required: true }]
-        }),
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}actual_price`,
+            name: [field.name, "actual_price"],
+            label: t("billlines.fields.actual_price"),
+            rules: [
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]
+          };
+        },
        formInput: (record, index) => (
          <CurrencyInput
            min={0}
            disabled={disabled}
-            onBlur={() => autofillActualCost(index)}
-            onKeyDown={(e) => {
-              if (e.key === "Tab") autofillActualCost(index);
+            onBlur={(e) => {
+              setFieldsValue({
+                billlines: getFieldsValue("billlines").billlines.map((item, idx) => {
+                  if (idx === index) {
+                    return {
+                      ...item,
+                      actual_cost: item.actual_cost
+                        ? item.actual_cost
+                        : Math.round((parseFloat(e.target.value) * (1 - discount) + Number.EPSILON) * 100) / 100
+                    };
+                  }
+                  return item;
+                })
+              });
            }}
          />
        ),
@@ -280,8 +220,9 @@ export function BillEnterModalLinesComponent({
                        {t("joblines.fields.create_ppc")}
                      </Space>
                    );
+                  } else {
+                    return null;
                  }
-                  return null;
                }}
              </Form.Item>
            )
@@ -292,108 +233,96 @@ export function BillEnterModalLinesComponent({
        dataIndex: "actual_cost",
        editable: true,
        width: "10rem",
-        skipFormItem: true,
-        formItemProps: (field) => ({
-          key: `${field.name}actual_cost`,
-          name: [field.name, "actual_cost"],
-          label: t("billlines.fields.actual_cost"),
-          rules: [{ required: true }]
-        }),
-        formInput: (record, index, fieldProps) => {
-          const { name, rules, valuePropName, getValueFromEvent, normalize, validateTrigger, initialValue } =
-            fieldProps || {};

-          const bindProps = {
-            name,
-            rules,
-            valuePropName,
-            getValueFromEvent,
-            normalize,
-            validateTrigger,
-            initialValue
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}actual_cost`,
+            name: [field.name, "actual_cost"],
+            label: t("billlines.fields.actual_cost"),
+            rules: [
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]
          };
-
-          return (
-            <div
-              style={{
-                display: "flex",
-                width: "100%",
-                alignItems: "center",
-                height: CONTROL_HEIGHT
-              }}
-            >
-              <div style={{ flex: "1 1 auto", minWidth: 0 }}>
-                <Form.Item noStyle {...bindProps}>
-                  <CurrencyInput
-                    min={0}
-                    disabled={disabled}
-                    controls={false}
-                    style={{ width: "100%", height: CONTROL_HEIGHT }}
-                    onFocus={() => autofillActualCost(index)}
-                  />
-                </Form.Item>
-              </div>
-
+        },
+        formInput: (record, index) => (
+          <CurrencyInput
+            min={0}
+            disabled={disabled}
+            controls={false}
+            addonAfter={
              <Form.Item shouldUpdate noStyle>
                {() => {
-                  const all = getFieldsValue(["billlines"]);
-                  const line = all?.billlines?.[index];
+                  const line = getFieldsValue(["billlines"]).billlines[index];
                  if (!line) return null;
-
-                  const ap = toNumber(line.actual_price);
-                  const ac = toNumber(line.actual_cost);
-
-                  let lineDiscount = 0;
-                  if (Number.isFinite(ap) && ap !== 0 && Number.isFinite(ac)) {
-                    lineDiscount = 1 - ac / ap;
-                  }
-
-                  const statusColor = getIndicatorColor(lineDiscount);
-                  const shell = getIndicatorShellStyles(statusColor);
-
+                  let lineDiscount = 1 - line.actual_cost / line.actual_price;
+                  if (isNaN(lineDiscount)) lineDiscount = 0;
                  return (
                    <Tooltip title={`${(lineDiscount * 100).toFixed(2) || 0}%`}>
-                      <div
+                      <DollarCircleFilled
                        style={{
-                          height: CONTROL_HEIGHT,
-                          minWidth: CONTROL_HEIGHT,
-                          padding: "0 10px",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          boxSizing: "border-box",
-                          borderStyle: "solid",
-                          borderWidth: 1,
-                          borderLeftWidth: 0,
-                          ...shell,
-                          borderTopRightRadius: 6,
-                          borderBottomRightRadius: 6
+                          color:
+                            Math.abs(lineDiscount - discount) > 0.005
+                              ? lineDiscount > discount
+                                ? "orange"
+                                : "red"
+                              : "green"
                        }}
-                      >
-                        <DollarCircleFilled style={{ color: statusColor, lineHeight: 1 }} />
-                      </div>
+                      />
                    </Tooltip>
                  );
                }}
              </Form.Item>
-            </div>
-          );
-        }
+            }
+          />
+        )
+        // additional: (record, index) => (
+        //   <Form.Item shouldUpdate>
+        //     {() => {
+        //       const line = getFieldsValue(["billlines"]).billlines[index];
+        //       if (!!!line) return null;
+        //       const lineDiscount = (
+        //         1 -
+        //         Math.round((line.actual_cost / line.actual_price) * 100) / 100
+        //       ).toPrecision(2);
+
+        //       return (
+        //         <Tooltip title={`${(lineDiscount * 100).toFixed(0) || 0}%`}>
+        //           <DollarCircleFilled
+        //             style={{
+        //               color: lineDiscount - discount !== 0 ? "red" : "green",
+        //             }}
+        //           />
+        //         </Tooltip>
+        //       );
+        //     }}
+        //   </Form.Item>
+        // ),
      },
      {
        title: t("billlines.fields.cost_center"),
        dataIndex: "cost_center",
        editable: true,
-        formItemProps: (field) => ({
-          key: `${field.name}cost_center`,
-          name: [field.name, "cost_center"],
-          label: t("billlines.fields.cost_center"),
-          valuePropName: "value",
-          rules: [{ required: true }]
-        }),
+
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}cost_center`,
+            name: [field.name, "cost_center"],
+            label: t("billlines.fields.cost_center"),
+            valuePropName: "value",
+            rules: [
+              {
+                required: true
+                //message: t("general.validation.required"),
+              }
+            ]
+          };
+        },
        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>
@@ -407,10 +336,12 @@ export function BillEnterModalLinesComponent({
              dataIndex: "location",
              editable: true,
              label: t("billlines.fields.location"),
-              formItemProps: (field) => ({
-                key: `${field.name}location`,
-                name: [field.name, "location"]
-              }),
+              formItemProps: (field) => {
+                return {
+                  key: `${field.index}location`,
+                  name: [field.name, "location"]
+                };
+              },
              formInput: () => (
                <Select disabled={disabled}>
                  {bodyshop.md_parts_locations.map((loc, idx) => (
@@ -427,19 +358,25 @@ export function BillEnterModalLinesComponent({
        dataIndex: "deductedfromlbr",
        editable: true,
        width: "40px",
-        formItemProps: (field) => ({
-          valuePropName: "checked",
-          key: `${field.name}deductedfromlbr`,
-          name: [field.name, "deductedfromlbr"]
-        }),
+        formItemProps: (field) => {
+          return {
+            valuePropName: "checked",
+            key: `${field.index}deductedfromlbr`,
+            name: [field.name, "deductedfromlbr"]
+          };
+        },
        formInput: () => <Switch disabled={disabled} />,
        additional: (record, index) => (
          <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
            {() => {
              const price = getFieldValue(["billlines", record.name, "actual_price"]);
+
              const adjustmentRate = getFieldValue(["billlines", record.name, "lbr_adjustment", "rate"]);
+
              const billline = getFieldValue(["billlines", record.name]);
+
              const jobline = lineData.find((line) => line.id === billline?.joblineid);
+
              const employeeTeamName = bodyshop.employee_teams.find((team) => team.id === jobline?.assigned_team);

              if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
@@ -447,7 +384,9 @@ export function BillEnterModalLinesComponent({
                  <div>
                    {Enhanced_Payroll.treatment === "on" ? (
                      <Space>
-                        {t("joblines.fields.assigned_team", { name: employeeTeamName?.name })}
+                        {t("joblines.fields.assigned_team", {
+                          name: employeeTeamName?.name
+                        })}
                        {`${jobline.mod_lb_hrs} units/${t(`joblines.fields.lbr_types.${jobline.mod_lbr_ty}`)}`}
                      </Space>
                    ) : null}
@@ -456,7 +395,12 @@ export function BillEnterModalLinesComponent({
                      label={t("joblines.fields.mod_lbr_ty")}
                      key={`${index}modlbrty`}
                      initialValue={jobline ? jobline.mod_lbr_ty : null}
-                      rules={[{ required: true }]}
+                      rules={[
+                        {
+                          required: true
+                          //message: t("general.validation.required"),
+                        }
+                      ]}
                      name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                    >
                      <Select allowClear>
@@ -476,12 +420,16 @@ export function BillEnterModalLinesComponent({
                        <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
                      </Select>
                    </Form.Item>
-
                    {Enhanced_Payroll.treatment === "on" ? (
                      <Form.Item
                        label={t("billlines.labels.mod_lbr_adjustment")}
                        name={[record.name, "lbr_adjustment", "mod_lb_hrs"]}
-                        rules={[{ required: true }]}
+                        rules={[
+                          {
+                            required: true
+                            //message: t("general.validation.required"),
+                          }
+                        ]}
                      >
                        <InputNumber precision={5} min={0.01} max={jobline ? jobline.mod_lb_hrs : 0} />
                      </Form.Item>
@@ -490,7 +438,12 @@ export function BillEnterModalLinesComponent({
                        label={t("jobs.labels.adjustmentrate")}
                        name={[record.name, "lbr_adjustment", "rate"]}
                        initialValue={bodyshop.default_adjustment_rate}
-                        rules={[{ required: true }]}
+                        rules={[
+                          {
+                            required: true
+                            //message: t("general.validation.required"),
+                          }
+                        ]}
                      >
                        <InputNumber precision={2} min={0.01} />
                      </Form.Item>
@@ -499,7 +452,6 @@ export function BillEnterModalLinesComponent({
                    <Space>{price && adjustmentRate && `${(price / adjustmentRate).toFixed(1)} hrs`}</Space>
                  </div>
                );
-
              return <></>;
            }}
          </Form.Item>
@@ -514,11 +466,17 @@ export function BillEnterModalLinesComponent({
            dataIndex: "applicable_taxes.federal",
            editable: true,
            width: "40px",
-            formItemProps: (field) => ({
-              key: `${field.name}fedtax`,
-              valuePropName: "checked",
-              name: [field.name, "applicable_taxes", "federal"]
-            }),
+            formItemProps: (field) => {
+              return {
+                key: `${field.index}fedtax`,
+                valuePropName: "checked",
+                initialValue: InstanceRenderManager({
+                  imex: true,
+                  rome: false
+                }),
+                name: [field.name, "applicable_taxes", "federal"]
+              };
+            },
            formInput: () => <Switch disabled={disabled} />
          }
        ]
@@ -529,11 +487,13 @@ export function BillEnterModalLinesComponent({
        dataIndex: "applicable_taxes.state",
        editable: true,
        width: "40px",
-        formItemProps: (field) => ({
-          key: `${field.name}statetax`,
-          valuePropName: "checked",
-          name: [field.name, "applicable_taxes", "state"]
-        }),
+        formItemProps: (field) => {
+          return {
+            key: `${field.index}statetax`,
+            valuePropName: "checked",
+            name: [field.name, "applicable_taxes", "state"]
+          };
+        },
        formInput: () => <Switch disabled={disabled} />
      },

@@ -545,43 +505,40 @@ export function BillEnterModalLinesComponent({
            dataIndex: "applicable_taxes.local",
            editable: true,
            width: "40px",
-            formItemProps: (field) => ({
-              key: `${field.name}localtax`,
-              valuePropName: "checked",
-              name: [field.name, "applicable_taxes", "local"]
-            }),
+            formItemProps: (field) => {
+              return {
+                key: `${field.index}localtax`,
+                valuePropName: "checked",
+                name: [field.name, "applicable_taxes", "local"]
+              };
+            },
            formInput: () => <Switch disabled={disabled} />
          }
        ]
      }),
-
      {
        title: t("general.labels.actions"),
+
        dataIndex: "actions",
        render: (text, record) => (
          <Form.Item shouldUpdate noStyle>
-            {() => {
-              const currentLine = getFieldValue(["billlines", record.name]);
-              const invLen = currentLine?.inventories?.length ?? 0;
-
-              return (
-                <Space wrap>
-                  <Button
-                    icon={<DeleteFilled />}
-                    disabled={disabled || invLen > 0}
-                    onClick={() => remove(record.name)}
+            {() => (
+              <Space wrap>
+                <Button
+                  disabled={disabled || getFieldValue("billlines")[record.fieldKey]?.inventories?.length > 0}
+                  onClick={() => remove(record.name)}
+                >
+                  <DeleteFilled />
+                </Button>
+                {Simple_Inventory.treatment === "on" && (
+                  <BilllineAddInventory
+                    disabled={!billEdit || form.isFieldsTouched() || form.getFieldValue("is_credit_memo")}
+                    billline={getFieldValue("billlines")[record.fieldKey]}
+                    jobid={getFieldValue("jobid")}
                  />
-
-                  {Simple_Inventory.treatment === "on" && (
-                    <BilllineAddInventory
-                      disabled={!billEdit || form.isFieldsTouched() || form.getFieldValue("is_credit_memo")}
-                      billline={currentLine}
-                      jobid={getFieldValue("jobid")}
-                    />
-                  )}
-                </Space>
-              );
-            }}
+                )}
+              </Space>
+            )}
          </Form.Item>
        )
      }
@@ -591,7 +548,6 @@ export function BillEnterModalLinesComponent({
  const mergedColumns = (remove) =>
    columns(remove).map((col) => {
      if (!col.editable) return col;
-
      return {
        ...col,
        onCell: (record) => ({
@@ -599,8 +555,8 @@ export function BillEnterModalLinesComponent({
          formItemProps: col.formItemProps,
          formInput: col.formInput,
          additional: col.additional,
-          wrapper: col.wrapper,
-          skipFormItem: col.skipFormItem
+          dataIndex: col.dataIndex,
+          title: col.title
        })
      };
    });
@@ -619,41 +575,33 @@ export function BillEnterModalLinesComponent({
      ]}
    >
      {(fields, { add, remove }) => {
-        const hasRows = fields.length > 0;
-
        return (
          <>
            <Table
-              className="bill-lines-table"
-              components={{ body: { cell: EditableCell } }}
+              components={{
+                body: {
+                  cell: EditableCell
+                }
+              }}
              size="small"
              bordered
              dataSource={fields}
-              rowKey="key"
              columns={mergedColumns(remove)}
-              scroll={hasRows ? { x: "max-content" } : undefined}
+              scroll={{ x: true }}
              pagination={false}
              rowClassName="editable-row"
            />
-
-            <div style={{ marginTop: 12 }}>
-              <Form.Item style={{ marginBottom: 0 }}>
-                <Button
-                  disabled={disabled}
-                  onClick={() => {
-                    add(
-                      InstanceRenderManager({
-                        imex: { applicable_taxes: { federal: true } },
-                        rome: { applicable_taxes: { federal: false } }
-                      })
-                    );
-                  }}
-                  style={{ width: "100%" }}
-                >
-                  {t("billlines.actions.newline")}
-                </Button>
-              </Form.Item>
-            </div>
+            <Form.Item>
+              <Button
+                disabled={disabled}
+                onClick={() => {
+                  add();
+                }}
+                style={{ width: "100%" }}
+              >
+                {t("billlines.actions.newline")}
+              </Button>
+            </Form.Item>
          </>
        );
      }}
@@ -663,51 +611,37 @@ export function BillEnterModalLinesComponent({

 export default connect(mapStateToProps, mapDispatchToProps)(BillEnterModalLinesComponent);

-const EditableCell = ({
-  record,
-  children,
-  formInput,
-  formItemProps,
-  additional,
-  wrapper: Wrapper,
-  skipFormItem,
-  ...restProps
-}) => {
-  const rawProps = formItemProps?.(record);
-
-  const propsFinal = rawProps
-    ? (() => {
-        // eslint-disable-next-line no-unused-vars
-        const { key, ...rest } = rawProps;
-        return rest;
-      })()
-    : undefined;
-
-  const control = skipFormItem ? (
-    (formInput && formInput(record, record.name, propsFinal)) || children
-  ) : (
-    <Form.Item labelCol={{ span: 0 }} {...propsFinal} style={{ marginBottom: 0 }}>
-      {(formInput && formInput(record, record.name, propsFinal)) || children}
-    </Form.Item>
-  );
-
-  const cellInner = additional ? (
-    <div>
-      {control}
-      {additional(record, record.name)}
-    </div>
-  ) : (
-    control
-  );
-
-  const { style: tdStyle, ...tdRest } = restProps;
-
-  const td = (
-    <td {...tdRest} style={{ ...tdStyle, verticalAlign: "middle" }}>
-      {cellInner}
+const EditableCell = ({ dataIndex, record, children, formInput, formItemProps, additional, wrapper, ...restProps }) => {
+  const propsFinal = formItemProps && formItemProps(record);
+  if (propsFinal && "key" in propsFinal) {
+    delete propsFinal.key;
+  }
+  if (additional)
+    return (
+      <td {...restProps}>
+        <div size="small">
+          <Form.Item name={dataIndex} labelCol={{ span: 0 }} {...propsFinal}>
+            {(formInput && formInput(record, record.name)) || children}
+          </Form.Item>
+          {additional && additional(record, record.name)}
+        </div>
+      </td>
+    );
+  if (wrapper)
+    return (
+      <wrapper>
+        <td {...restProps}>
+          <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
+            {(formInput && formInput(record, record.name)) || children}
+          </Form.Item>
+        </td>
+      </wrapper>
+    );
+  return (
+    <td {...restProps}>
+      <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
+        {(formInput && formInput(record, record.name)) || children}
+      </Form.Item>
    </td>
  );
-
-  if (Wrapper) return <Wrapper>{td}</Wrapper>;
-  return td;
 };
--- a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
+++ b/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
@@ -1,27 +1,27 @@
 import { Select } from "antd";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";

-const BillLineSearchSelect = ({ options, disabled, allowRemoved, ref, ...restProps }) => {
+const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
  const { t } = useTranslation();

  return (
    <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") },
@@ -67,4 +67,4 @@ function generateLineName(item) {
    </div>
  );
 }
-export default BillLineSearchSelect;
+export default forwardRef(BillLineSearchSelect);
--- a/client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx
+++ b/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";
@@ -62,12 +60,12 @@ export function BillMarkExportedButton({ currentUser, bodyshop, authLevel, bill
    });

    if (!result.errors) {
-      notification.success({
-        title: t("bills.successes.markexported")
+      notification["success"]({
+        message: t("bills.successes.markexported")
      });
    } else {
-      notification.error({
-        title: t("bills.errors.saving", {
+      notification["error"]({
+        message: t("bills.errors.saving", {
          error: JSON.stringify(result.errors)
        })
      });
--- a/client/src/components/bill-reexport-button/bill-reexport-button.component.jsx
+++ b/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";
@@ -44,12 +43,12 @@ export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
    });

    if (!result.errors) {
-      notification.success({
-        title: t("bills.successes.reexport")
+      notification["success"]({
+        message: t("bills.successes.reexport")
      });
    } else {
-      notification.error({
-        title: t("bills.errors.saving", {
+      notification["error"]({
+        message: t("bills.errors.saving", {
          error: JSON.stringify(result.errors)
        })
      });
--- a/client/src/components/billline-add-inventory/billline-add-inventory.component.jsx
+++ b/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";
@@ -17,137 +17,121 @@ const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser
 });
-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = () => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
 export default connect(mapStateToProps, mapDispatchToProps)(BilllineAddInventory);

 export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled, jobid }) {
  const [loading, setLoading] = useState(false);
-  const qs = queryString.parse(useLocation().search);
-  const billid = qs?.billid != null ? String(qs.billid) : null;
-
+  const { billid } = queryString.parse(useLocation().search);
  const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
  const notification = useNotification();

-  const inventoryCount = billline?.inventories?.length ?? 0;
-  const quantity = billline?.quantity ?? 0;
-
  const addToInventory = async () => {
-    if (loading) return;
-
-    // Defensive: row identity can transiently desync during remove/add reindexing.
-    if (!billline) {
-      notification.error({
-        title: t("inventory.errors.inserting", { error: "Bill line is missing (please try again)." })
-      });
-      return;
-    }
-
    setLoading(true);

-    try {
-      const taxes = billline?.applicable_taxes ?? {};
-      const cm = {
-        vendorid: bodyshop.inhousevendorid,
-        invoice_number: "ih",
-        jobid: jobid,
-        isinhouse: true,
-        is_credit_memo: true,
-        date: dayjs().format("YYYY-MM-DD"),
-        federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
-        state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
-        local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
-        total: 0,
-        billlines: [
-          {
-            actual_price: billline.actual_price,
-            actual_cost: billline.actual_cost,
-            quantity: billline.quantity,
-            line_desc: billline.line_desc,
-            cost_center: billline.cost_center,
-            deductedfromlbr: billline.deductedfromlbr,
-            applicable_taxes: {
-              local: taxes.local,
-              state: taxes.state,
-              federal: taxes.federal
-            }
-          }
-        ]
-      };
+    //Check to  make sure there are no existing items already in the inventory.

-      cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
-
-      const insertResult = await insertInventoryLine({
-        variables: {
-          joblineId: billline.joblineid === "noline" ? billline.id : billline.joblineid,
-          joblineStatus: bodyshop.md_order_statuses.default_returned,
-          inv: {
-            shopid: bodyshop.id,
-            billlineid: billline.id,
-            actual_price: billline.actual_price,
-            actual_cost: billline.actual_cost,
-            quantity: billline.quantity,
-            line_desc: billline.line_desc
-          },
-          cm: { ...cm, billlines: { data: cm.billlines } },
-          pol: {
-            returnfrombill: billid,
-            vendorid: bodyshop.inhousevendorid,
-            deliver_by: dayjs().format("YYYY-MM-DD"),
-            parts_order_lines: {
-              data: [
-                {
-                  line_desc: billline.line_desc,
-                  act_price: billline.actual_price,
-                  cost: billline.actual_cost,
-                  quantity: billline.quantity,
-                  job_line_id: billline.joblineid === "noline" ? null : billline.joblineid,
-                  part_type: billline.jobline && billline.jobline.part_type,
-                  cm_received: true
-                }
-              ]
-            },
-            order_date: "2022-06-01",
-            orderedby: currentUser.email,
-            jobid: jobid,
-            user_email: currentUser.email,
-            return: true,
-            status: "Ordered"
+    const cm = {
+      vendorid: bodyshop.inhousevendorid,
+      invoice_number: "ih",
+      jobid: jobid,
+      isinhouse: true,
+      is_credit_memo: true,
+      date: dayjs().format("YYYY-MM-DD"),
+      federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
+      state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
+      local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
+      total: 0,
+      billlines: [
+        {
+          actual_price: billline.actual_price,
+          actual_cost: billline.actual_cost,
+          quantity: billline.quantity,
+          line_desc: billline.line_desc,
+          cost_center: billline.cost_center,
+          deductedfromlbr: billline.deductedfromlbr,
+          applicable_taxes: {
+            local: billline.applicable_taxes.local,
+            state: billline.applicable_taxes.state,
+            federal: billline.applicable_taxes.federal
          }
+        }
+      ]
+    };
+
+    cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
+
+    const insertResult = await insertInventoryLine({
+      variables: {
+        joblineId: billline.joblineid === "noline" ? billline.id : billline.joblineid, //This will return null as there will be no jobline that has the id of the bill line.
+        //Unfortunately, we can't send null as the GQL syntax validation fails.
+        joblineStatus: bodyshop.md_order_statuses.default_returned,
+        inv: {
+          shopid: bodyshop.id,
+          billlineid: billline.id,
+          actual_price: billline.actual_price,
+          actual_cost: billline.actual_cost,
+          quantity: billline.quantity,
+          line_desc: billline.line_desc
        },
-        refetchQueries: ["QUERY_BILL_BY_PK"]
-      });
+        cm: { ...cm, billlines: { data: cm.billlines } }, //Fix structure for apollo insert.
+        pol: {
+          returnfrombill: billid,
+          vendorid: bodyshop.inhousevendorid,
+          deliver_by: dayjs().format("YYYY-MM-DD"),
+          parts_order_lines: {
+            data: [
+              {
+                line_desc: billline.line_desc,

-      if (!insertResult?.errors?.length) {
-        notification.success({
-          title: t("inventory.successes.inserted")
-        });
-      } else {
-        notification.error({
-          title: t("inventory.errors.inserting", {
-            error: JSON.stringify(insertResult.errors)
-          })
-        });
-      }
-    } catch (err) {
-      notification.error({
-        title: t("inventory.errors.inserting", {
-          error: err?.message || String(err)
+                act_price: billline.actual_price,
+                cost: billline.actual_cost,
+                quantity: billline.quantity,
+                job_line_id: billline.joblineid === "noline" ? null : billline.joblineid,
+                part_type: billline.jobline && billline.jobline.part_type,
+                cm_received: true
+              }
+            ]
+          },
+          order_date: "2022-06-01",
+          orderedby: currentUser.email,
+          jobid: jobid,
+          user_email: currentUser.email,
+          return: true,
+          status: "Ordered"
+        }
+      },
+      refetchQueries: ["QUERY_BILL_BY_PK"]
+    });
+
+    if (!insertResult.errors) {
+      notification.open({
+        type: "success",
+        message: t("inventory.successes.inserted")
+      });
+    } else {
+      notification.open({
+        type: "error",
+        message: t("inventory.errors.inserting", {
+          error: JSON.stringify(insertResult.errors)
        })
      });
-    } finally {
-      setLoading(false);
    }
+
+    setLoading(false);
  };

  return (
    <Tooltip title={t("inventory.actions.addtoinventory")}>
      <Button
-        icon={<FileAddFilled />}
        loading={loading}
-        disabled={disabled || inventoryCount >= quantity}
+        disabled={disabled || billline?.inventories?.length >= billline.quantity}
        onClick={addToInventory}
      >
-        {inventoryCount > 0 && <div>({inventoryCount} in inv)</div>}
+        <FileAddFilled />
+        {billline?.inventories?.length > 0 && <div>({billline?.inventories?.length} in inv)</div>}
      </Button>
    </Tooltip>
  );
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -84,14 +84,15 @@ export function BillsListTableComponent({
            }
          });
        }}
-        icon={<FaTasks />}
-      />
-
+      >
+        <FaTasks />
+      </Button>
      <BillDeleteButton bill={record} jobid={job.id} />
      <BillDetailEditReturnComponent
        data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
        disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
      />
+
      {record.isinhouse && (
        <PrintWrapperComponent
          templateObject={{
@@ -189,7 +190,9 @@ export function BillsListTableComponent({
      title={t("bills.labels.bills")}
      extra={
        <Space wrap>
-          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
          {job && job.converted ? (
            <>
              <Button
--- a/client/src/components/bills-vendors-list/bills-vendors-list.component.jsx
+++ b/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}
--- a/client/src/components/breadcrumbs/breadcrumbs.component.jsx
+++ b/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
--- a/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
+++ b/client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx
@@ -41,7 +41,9 @@ export default function CABCpvrtCalculator({ disabled, form }) {

  return (
    <Popover destroyOnHidden content={popContent} open={visibility} disabled={disabled}>
-      <Button disabled={disabled} onClick={() => setVisibility(true)} icon={<CalculatorFilled />} />
+      <Button disabled={disabled} onClick={() => setVisibility(true)}>
+        <CalculatorFilled />
+      </Button>
    </Popover>
  );
 }
--- a/client/src/components/card-payment-modal/card-payment-modal.component.jsx
+++ b/client/src/components/card-payment-modal/card-payment-modal.component.jsx
@@ -1,14 +1,12 @@
 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_PAYMENT_RESPONSE, QUERY_RO_AND_OWNER_BY_JOB_PKS } from "../../graphql/payment_response.queries";
-import { getCurrentUser, logImEXEvent } from "../../firebase/firebase.utils";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
@@ -16,6 +14,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
+import { getCurrentUser, logImEXEvent } from "../../firebase/firebase.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

 const mapStateToProps = createStructuredSelector({
  cardPaymentModal: selectCardPayment,
@@ -46,65 +46,15 @@ const CardPaymentModalComponent = ({

  const [form] = Form.useForm();
  const [paymentLink, setPaymentLink] = useState();
-  const isMountedRef = useRef(true);
-
  const [loading, setLoading] = useState(false);
  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
  const { t } = useTranslation();
  const notification = useNotification();

-  const [loadRoAndOwnerByJobPks, { data, loading: queryLoading, error: queryError, refetch, called }] = useLazyQuery(
-    QUERY_RO_AND_OWNER_BY_JOB_PKS,
-    {
-      fetchPolicy: "network-only",
-      notifyOnNetworkStatusChange: true
-    }
-  );
-
-  const safeRefetchRoAndOwner = useCallback(
-    (vars) => {
-      // First run: execute the lazy query
-      if (!called) return loadRoAndOwnerByJobPks({ variables: vars });
-      // Subsequent runs: refetch expects the variables object directly (not { variables: ... })
-      return refetch(vars);
-    },
-    [called, loadRoAndOwnerByJobPks, refetch]
-  );
-
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  const setLoadingSafe = useCallback((value) => {
-    if (isMountedRef.current) setLoading(value);
-  }, []);
-
-  // Watch form payments so we can query jobs when all jobids are filled (without side effects during render)
-  const payments = Form.useWatch(["payments"], form);
-
-  const jobids = useMemo(() => {
-    if (!Array.isArray(payments) || payments.length === 0) return [];
-    return payments.map((p) => p?.jobid).filter(Boolean);
-  }, [payments]);
-
-  const allJobIdsFilled = useMemo(() => {
-    if (!Array.isArray(payments) || payments.length === 0) return false;
-    return payments.every((p) => !!p?.jobid);
-  }, [payments]);
-
-  const lastJobidsKeyRef = useRef("");
-
-  useEffect(() => {
-    if (!allJobIdsFilled) return;
-
-    const nextKey = jobids.join("|");
-    if (!nextKey || nextKey === lastJobidsKeyRef.current) return;
-
-    lastJobidsKeyRef.current = nextKey;
-    safeRefetchRoAndOwner({ jobids });
-  }, [allJobIdsFilled, jobids, safeRefetchRoAndOwner]);
+  const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
+    variables: { jobids: [context.jobid] },
+    skip: !context?.jobid
+  });

  const collectIPayFields = () => {
    const iPayFields = document.querySelectorAll(".ipayfield");
@@ -118,84 +68,55 @@ const CardPaymentModalComponent = ({
  const SetIntellipayCallbackFunctions = () => {
    console.log("*** Set IntelliPay callback functions.");

-    const isLikelyUserCancel = (response) => {
-      const reason = String(response?.declinereason ?? "").toLowerCase();
-      // Heuristics: adjust if IntelliPay gives you a known cancel code/message
-      return (
-        reason.includes("cancel") ||
-        reason.includes("canceled") ||
-        reason.includes("closed") ||
-        // many gateways won't have a paymentid if user cancels before submitting
-        !response?.paymentid
-      );
-    };
-
    window.intellipay.runOnClose(() => {
-      // This is the path for Cancel / X
-      try {
-        // If IntelliPay uses this flag, clear it so initialize() won't reopen unexpectedly
-        window.intellipay.isAutoOpen = false;
-      } catch {
-        // ignore
-      }
-
-      // Optional: if IntelliPay needs re-init after close, uncomment:
-      // try { window.intellipay.initialize?.(); } catch {}
-
-      setLoadingSafe(false);
+      //window.intellipay.initialize();
    });

    window.intellipay.runOnApproval(() => {
-      // keep your existing behavior
+      //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
+      //Add a slight delay to allow the refetch to properly get the data.
      setTimeout(() => {
        if (actions?.refetch) actions.refetch();
-        setLoadingSafe(false);
+        setLoading(false);
        toggleModalVisible();
      }, 750);
    });

    window.intellipay.runOnNonApproval(async (response) => {
-      try {
-        // If cancel is reported as "non-approval", don't record it as a failed payment
-        if (isLikelyUserCancel(response)) return;
+      // Mutate unsuccessful payment

-        const { payments } = form.getFieldsValue();
-
-        await insertPaymentResponse({
-          variables: {
-            paymentResponse: payments.map((payment) => ({
-              amount: payment.amount,
-              bodyshopid: bodyshop.id,
-              jobid: payment.jobid,
-              declinereason: response.declinereason,
-              ext_paymentid: response.paymentid?.toString?.() ?? null,
-              successful: false,
-              response
-            }))
-          }
-        });
-
-        payments.forEach((payment) =>
-          insertAuditTrail({
+      const { payments } = form.getFieldsValue();
+      await insertPaymentResponse({
+        variables: {
+          paymentResponse: payments.map((payment) => ({
+            amount: payment.amount,
+            bodyshopid: bodyshop.id,
            jobid: payment.jobid,
-            operation: AuditTrailMapping.failedpayment(),
-            type: "failedpayment"
-          })
-        );
-      } finally {
-        // IMPORTANT: always clear loading, even on errors
-        setLoadingSafe(false);
-      }
+            declinereason: response.declinereason,
+            ext_paymentid: response.paymentid.toString(),
+            successful: false,
+            response
+          }))
+        }
+      });
+
+      payments.forEach((payment) =>
+        insertAuditTrail({
+          jobid: payment.jobid,
+          operation: AuditTrailMapping.failedpayment(),
+          type: "failedpayment"
+        })
+      );
    });
  };

  const handleIntelliPayCharge = async () => {
    setLoading(true);
-    // Validate
+    //Validate
    try {
      await form.validateFields();
    } catch {
-      setLoadingSafe(false);
+      setLoading(false);
      return;
    }

@@ -213,9 +134,7 @@ const CardPaymentModalComponent = ({
      });

      if (window.intellipay) {
-        // Use Function constructor instead of eval for security (still executes dynamic code but safer)
-        // IntelliPay provides initialization code that must be executed
-        Function(response.data)();
+        eval(response.data);
        pollForIntelliPay(() => {
          SetIntellipayCallbackFunctions();
          window.intellipay.autoOpen();
@@ -226,26 +145,26 @@ const CardPaymentModalComponent = ({
        document.documentElement.appendChild(node);
        pollForIntelliPay(() => {
          SetIntellipayCallbackFunctions();
-
          window.intellipay.isAutoOpen = true;
          window.intellipay.initialize();
        });
      }
    } catch {
-      notification.error({
-        title: t("job_payments.notifications.error.openingip")
+      notification.open({
+        type: "error",
+        message: t("job_payments.notifications.error.openingip")
      });
-      setLoadingSafe(false);
+      setLoading(false);
    }
  };

  const handleIntelliPayChargeShortLink = async () => {
    setLoading(true);
-    // Validate
+    //Validate
    try {
      await form.validateFields();
    } catch {
-      setLoadingSafe(false);
+      setLoading(false);
      return;
    }

@@ -268,12 +187,13 @@ const CardPaymentModalComponent = ({
        await navigator.clipboard.writeText(response.data.shorUrl);
        message.success(t("general.actions.copied"));
      }
-      setLoadingSafe(false);
+      setLoading(false);
    } catch {
-      notification.error({
-        title: t("job_payments.notifications.error.openingip")
+      notification.open({
+        type: "error",
+        message: t("job_payments.notifications.error.openingip")
      });
-      setLoadingSafe(false);
+      setLoading(false);
    }
  };

@@ -328,20 +248,40 @@ const CardPaymentModalComponent = ({
            )}
          </Form.List>

-          {/* Hidden IntelliPay fields driven by watched payments + query result.  IMPORTANT: no refetch() here (avoid side effects during render). */}
-          <Input
-            className="ipayfield"
-            data-ipayname="account"
-            type="hidden"
-            value={data?.jobs?.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null}
-          />
-          <Input
-            className="ipayfield"
-            data-ipayname="email"
-            type="hidden"
-            value={data?.jobs?.length > 0 ? (data.jobs.find((j) => j.ownr_ea)?.ownr_ea ?? null) : null}
-          />
-
+          <Form.Item
+            shouldUpdate={(prevValues, curValues) =>
+              prevValues.payments?.map((p) => p?.jobid + p?.amount).join() !==
+              curValues.payments?.map((p) => p?.jobid + p?.amount).join()
+            }
+          >
+            {() => {
+              //If all of the job ids have been fileld in, then query and update the IP field.
+              const { payments } = form.getFieldsValue();
+              if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
+                refetch({ jobids: payments.map((p) => p.jobid) });
+              }
+              return (
+                <>
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="account"
+                    type="hidden"
+                    value={
+                      payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null
+                    }
+                  />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="email"
+                    type="hidden"
+                    value={
+                      payments && data && data.jobs.length > 0 ? data.jobs.filter((j) => j.ownr_ea)[0]?.ownr_ea : null
+                    }
+                  />
+                </>
+              );
+            }}
+          </Form.Item>
          <Form.Item
            shouldUpdate={(prevValues, curValues) =>
              prevValues.payments?.map((p) => p?.amount).join() !== curValues.payments?.map((p) => p?.amount).join()
@@ -376,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"
@@ -393,7 +333,6 @@ const CardPaymentModalComponent = ({
            }}
          </Form.Item>
        </Form>
-
        {paymentLink && (
          <Space
            style={{ cursor: "pointer", float: "right" }}
@@ -407,12 +346,6 @@ const CardPaymentModalComponent = ({
            <CopyFilled />
          </Space>
        )}
-
-        {queryError ? (
-          <div style={{ marginTop: 12 }}>
-            <span style={{ color: "red" }}>{queryError.message}</span>
-          </div>
-        ) : null}
      </Spin>
    </Card>
  );
@@ -420,10 +353,10 @@ const CardPaymentModalComponent = ({

 export default connect(mapStateToProps, mapDispatchToProps)(CardPaymentModalComponent);

-// Poll for window.IntelliPay.fixAmount for 5 seconds. If it doesn't come up, just try anyways to force the possible error.
+//Poll for window.IntelliPay.fixAmount for 5 seconds. If it doesn't come up, just try anyways to force the possible error.
 function pollForIntelliPay(callbackFunction) {
  const timeout = 5000;
-  const interval = 150;
+  const interval = 150; // Poll every 100 milliseconds
  const startTime = Date.now();

  function checkFixAmount() {
@@ -433,7 +366,7 @@ function pollForIntelliPay(callbackFunction) {
    }

    if (Date.now() - startTime >= timeout) {
-      console.log("Stopped polling IntelliPay after 5 seconds. Attempting to set functions anyways.");
+      console.log("Stopped polling IntelliPay after 10 seconds. Attemping to set functions anyways.");
      callbackFunction();
      return;
    }
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/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";
@@ -12,16 +12,11 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
  const client = useApolloClient();
  const { socket } = useSocket();

-  const messagingServicesId = bodyshop?.messagingservicesid;
-  const bodyshopId = bodyshop?.id;
-  const imexshopid = bodyshop?.imexshopid;
-
-  const messagingEnabled = Boolean(messagingServicesId);
-
+  // 1) FCM subscription (independent of socket handler registration)
  useEffect(() => {
-    if (!messagingEnabled) return;
+    if (!bodyshop?.messagingservicesid) return;

-    (async () => {
+    async function subscribeToTopicForFCMNotification() {
      try {
        await requestForToken();
        await axios.post("/notifications/subscribe", {
@@ -29,19 +24,23 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
            vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
          }),
          type: "messaging",
-          imexshopid
+          imexshopid: bodyshop.imexshopid
        });
      } catch (error) {
        console.log("Error attempting to subscribe to messaging topic: ", error);
      }
-    })();
-  }, [messagingEnabled, imexshopid]);
+    }

+    subscribeToTopicForFCMNotification();
+  }, [bodyshop?.messagingservicesid, bodyshop?.imexshopid]);
+
+  // 2) Register socket handlers as soon as socket is connected (regardless of chatVisible)
  useEffect(() => {
    if (!socket) return;
-    if (!messagingEnabled) return;
-    if (!bodyshopId) return;
+    if (!bodyshop?.messagingservicesid) return;
+    if (!bodyshop?.id) return;

+    // If socket isn't connected yet, ensure no stale handlers remain.
    if (!socket.connected) {
      unregisterMessagingHandlers({ socket });
      return;
@@ -57,14 +56,16 @@ export function ChatAffixContainer({ bodyshop, chatVisible, currentUser }) {
      bodyshop
    });

-    return () => unregisterMessagingHandlers({ socket });
-  }, [socket, messagingEnabled, bodyshopId, client, currentUser?.email, bodyshop]);
+    return () => {
+      unregisterMessagingHandlers({ socket });
+    };
+  }, [socket, socket?.connected, bodyshop?.id, bodyshop?.messagingservicesid, client, currentUser?.email]);

-  if (!messagingEnabled) return null;
+  if (!bodyshop?.messagingservicesid) return <></>;

  return (
    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {messagingEnabled ? <ChatPopupComponent /> : null}
+      {bodyshop?.messagingservicesid ? <ChatPopupComponent /> : null}
    </div>
  );
 }
--- a/client/src/components/chat-archive-button/chat-archive-button.component.jsx
+++ b/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";
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/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>
@@ -128,7 +128,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
        onClick={() => setSelectedConversation(item.id)}
        className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
      >
-        <Card style={getCardStyle()} variant="outlined" size="small" extra={cardExtra} title={cardTitle}>
+        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
        </Card>
--- a/client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx
+++ b/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";
--- a/client/src/components/chat-conversation/chat-conversation.component.jsx
+++ b/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
--- a/client/src/components/chat-conversation/chat-conversation.container.jsx
+++ b/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";
--- a/client/src/components/chat-label/chat-label.component.jsx
+++ b/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";
@@ -33,8 +33,8 @@ export function ChatLabel({ conversation, bodyshop }) {
        variables: { id: conversation.id, label: value }
      });
      if (response.errors) {
-        notification.error({
-          title: t("messages.errors.updatinglabel", {
+        notification["error"]({
+          message: t("messages.errors.updatinglabel", {
            error: JSON.stringify(response.errors)
          })
        });
@@ -50,8 +50,8 @@ export function ChatLabel({ conversation, bodyshop }) {
        setEditing(false);
      }
    } catch (error) {
-      notification.error({
-        title: t("messages.errors.updatinglabel", {
+      notification["error"]({
+        message: t("messages.errors.updatinglabel", {
          error: JSON.stringify(error)
        })
      });
--- a/client/src/components/chat-media-selector/chat-media-selector.component.jsx
+++ b/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}
--- a/client/src/components/chat-open-button/chat-open-button.component.jsx
+++ b/client/src/components/chat-open-button/chat-open-button.component.jsx
@@ -1,23 +1,22 @@
-import { Button } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
-import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
+
+import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import PhoneNumberFormatter from "../../utils/PhoneFormatter";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
-  searchingForConversation
+  searchingForConversation: searchingForConversation
 });

 const mapDispatchToProps = (dispatch) => ({
-  openChatByPhone: (payload) => dispatch(openChatByPhone(payload))
+  openChatByPhone: (phone) => dispatch(openChatByPhone(phone))
 });

 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type, jobid, openChatByPhone }) {
@@ -25,59 +24,31 @@ export function ChatOpenButton({ bodyshop, searchingForConversation, phone, type
  const { socket } = useSocket();
  const notification = useNotification();

-  if (!phone) return null;
+  if (!phone) return <></>;

-  const messagingEnabled = Boolean(bodyshop?.messagingservicesid);
+  if (!bodyshop.messagingservicesid) {
+    return <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
+  }

-  const parsed = useMemo(() => {
-    if (!messagingEnabled) return null;
-    try {
-      return parsePhoneNumber(phone, "CA") || null;
-    } catch {
-      return null;
-    }
-  }, [messagingEnabled, phone]);
-
-  const isValid = Boolean(parsed?.isValid?.() && parsed.isValid());
-  const clickable = messagingEnabled && !searchingForConversation && isValid;
-
-  const onClick = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!messagingEnabled) return;
-      if (searchingForConversation) return;
-
-      if (!isValid) {
-        notification.error({ title: t("messaging.error.invalidphone") });
-        return;
-      }
-
-      openChatByPhone({
-        phone_num: parsed.formatInternational(),
-        jobid,
-        socket
-      });
-    },
-    [messagingEnabled, searchingForConversation, isValid, parsed, jobid, socket, openChatByPhone, notification, t]
-  );
-
-  const content = <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>;
-
-  // If not clickable, render plain formatted text (no link styling)
-  if (!clickable) return content;
-
-  // Clickable: render as a link-styled button (best for a “command”)
  return (
-    <Button
-      type="link"
-      onClick={onClick}
-      className="chat-open-button-link"
-      aria-label={t("messaging.actions.openchat") || "Open chat"}
+    <a
+      href="# "
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (searchingForConversation) return; // Prevent finding the same thing twice.
+
+        const p = parsePhoneNumber(phone, "CA");
+        if (p && p.isValid()) {
+          openChatByPhone({ phone_num: p.formatInternational(), jobid, socket });
+        } else {
+          notification["error"]({ message: t("messaging.error.invalidphone") });
+        }
+      }}
    >
-      {content}
-    </Button>
+      <PhoneNumberFormatter type={type}>{phone}</PhoneNumberFormatter>
+    </a>
  );
 }

--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/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";
@@ -15,74 +15,44 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";

 import "./chat-popup.styles.scss";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
-import { selectDarkMode } from "../../redux/application/application.selectors.js";

 const mapStateToProps = createStructuredSelector({
  selectedConversation: selectSelectedConversation,
-  chatVisible: selectChatVisible,
-  isDarkMode: selectDarkMode
+  chatVisible: selectChatVisible
 });

 const mapDispatchToProps = (dispatch) => ({
  toggleChatVisible: () => dispatch(toggleChatVisible())
 });

-export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible, isDarkMode }) {
+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
      }
    };

@@ -101,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({ variables: { offset: 0 } }).catch((err) => {
-      console.error(`Error fetching conversations: ${err?.message || ""}`, err);
-    });
-  }, [getConversations]);
-
-  const handleManualRefresh = async () => {
-    try {
-      if (called && typeof refetch === "function") {
-        await refetch({ offset: 0 });
-      } else {
-        await getConversations({ variables: { 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({
@@ -132,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
    }
  })();

@@ -156,19 +110,16 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
    <Badge count={unreadCount}>
      <Card size="small">
        {chatVisible ? (
-          <div className={`chat-popup ${isDarkMode ? "chat-popup--dark" : "chat-popup--light"}`}>
+          <div className="chat-popup">
            <Space align="center">
              <Typography.Title level={4}>{t("messaging.labels.messaging")}</Typography.Title>
              <ChatNewConversation />
              <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" }}
--- a/client/src/components/chat-popup/chat-popup.styles.scss
+++ b/client/src/components/chat-popup/chat-popup.styles.scss
@@ -26,11 +26,3 @@
    flex-direction: column;
  }
 }
-
-.chat-popup--dark {
-  color-scheme: dark;
-}
-
-.chat-popup--light {
-  color-scheme: light;
-}
--- a/client/src/components/chat-send-message/chat-send-message.component.jsx
+++ b/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>
--- a/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
+++ b/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 />}
        >
--- a/client/src/components/chat-tag-ro/chat-tag-ro.container.jsx
+++ b/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";
@@ -28,13 +28,13 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {

  const executeSearch = (v) => {
    logImEXEvent("messaging_search_job_tag", { searchTerm: v });
-    loadRo({ variables: v }).catch((e) => console.error("Error in ChatTagRoContainer executeSearch:", e));
+    loadRo(v).catch((e) => console.error("Error in ChatTagRoContainer executeSearch:", e));
  };

  const debouncedExecuteSearch = _.debounce(executeSearch, 500);

  const handleSearch = (value) => {
-    debouncedExecuteSearch({ search: value });
+    debouncedExecuteSearch({ variables: { search: value } });
  };

  const [insertTag] = useMutation(INSERT_CONVERSATION_TAG, {
--- a/client/src/components/contract-cars/contract-cars.component.jsx
+++ b/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}
--- a/client/src/components/contract-cars/contract-cars.container.jsx
+++ b/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}
--- a/client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx
+++ b/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";
@@ -278,14 +278,14 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
    });

    if (result.errors) {
-      notification.error({
-        title: t("jobs.errors.inserting", {
+      notification["error"]({
+        message: t("jobs.errors.inserting", {
          message: JSON.stringify(result.errors)
        })
      });
    } else {
-      notification.success({
-        title: t("jobs.successes.created"),
+      notification["success"]({
+        message: t("jobs.successes.created"),
        onClick: () => {
          history.push(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
        }
--- a/client/src/components/contract-form/contract-form-job-prefill.component.jsx
+++ b/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";
@@ -30,8 +30,8 @@ export default function ContractCreateJobPrefillComponent({ jobId, form }) {
  }, [data, form]);

  if (error) {
-    notification.error({
-      title: t("contracts.errors.fetchingjobinfo", {
+    notification["error"]({
+      message: t("contracts.errors.fetchingjobinfo", {
        error: JSON.stringify(error)
      })
    });
--- a/client/src/components/contract-form/contract-form.component.jsx
+++ b/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")}
--- a/client/src/components/contract-jobs/contract-jobs.component.jsx
+++ b/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}
--- a/client/src/components/contract-jobs/contract-jobs.container.jsx
+++ b/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}
--- a/client/src/components/contract-status-select/contract-status-select.component.jsx
+++ b/client/src/components/contract-status-select/contract-status-select.component.jsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";

 const { Option } = Select;

-const ContractStatusComponent = ({ value, onChange, ref }) => {
+const ContractStatusComponent = ({ value, onChange }) => {
  const [option, setOption] = useState(value);
  const { t } = useTranslation();

@@ -15,14 +15,17 @@ const ContractStatusComponent = ({ value, onChange, ref }) => {
  }, [value, option, onChange]);

  return (
-    <Select ref={ref} value={option} style={{ width: 100 }} onChange={setOption}>
+    <Select
+      value={option}
+      style={{
+        width: 100
+      }}
+      onChange={setOption}
+    >
      <Option value="contracts.status.new">{t("contracts.status.new")}</Option>
      <Option value="contracts.status.out">{t("contracts.status.out")}</Option>
-      <Option value="contracts.status.returned">{t("contracts.status.out")}</Option>
+      <Option value="contracts.status.returned">{t("contracts.status.returned")}</Option>
    </Select>
  );
 };
-
-ContractStatusComponent.displayName = "ContractStatusComponent";
-
-export default ContractStatusComponent;
+export default forwardRef(ContractStatusComponent);
--- a/client/src/components/contracts-find-modal/contracts-find-modal.container.jsx
+++ b/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";
@@ -63,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={[
--- a/client/src/components/contracts-list/contracts-list.component.jsx
+++ b/client/src/components/contracts-list/contracts-list.component.jsx
@@ -127,13 +127,10 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    const updatedSearch = {
-      ...search,
-      page: pagination.current,
-      sortcolumn: sorter.columnKey,
-      sortorder: sorter.order
-    };
-    history({ search: queryString.stringify(updatedSearch) });
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history({ search: queryString.stringify(search) });
  };

  return (
@@ -156,13 +153,14 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
            </>
          )}
          <Button onClick={() => setContractFinderContext()}>{t("contracts.actions.find")}</Button>
-          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
          <Input.Search
            placeholder={search.searh || t("general.labels.search")}
            onSearch={(value) => {
-              const updatedSearch = { ...search, search: value };
-              history({ search: queryString.stringify(updatedSearch) });
+              search.search = value;
+              history({ search: queryString.stringify(search) });
            }}
          />
        </Space>
@@ -174,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}
--- a/client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx
+++ b/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}
--- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx
+++ b/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")}
--- a/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
+++ b/client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
@@ -1,7 +1,8 @@
 import { Slider } from "antd";
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";

-const CourtesyCarFuelComponent = ({ ref, ...props }) => {
+const CourtesyCarFuelComponent = (props, ref) => {
  const { t } = useTranslation();

  const marks = {
@@ -62,4 +63,4 @@ const CourtesyCarFuelComponent = ({ ref, ...props }) => {
    />
  );
 };
-export default CourtesyCarFuelComponent;
+export default forwardRef(CourtesyCarFuelComponent);
--- a/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
+++ b/client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
@@ -1,10 +1,10 @@
 import { Select } from "antd";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

 const { Option } = Select;

-const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
+const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
  const [option, setOption] = useState(value);
  const { t } = useTranslation();

@@ -29,4 +29,4 @@ const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
    </Select>
  );
 };
-export default CourtesyCarReadinessComponent;
+export default forwardRef(CourtesyCarReadinessComponent);
--- a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx
+++ b/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({
@@ -51,8 +51,8 @@ export function CCReturnModalContainer({ courtesyCarReturnModal, toggleModalVisi
        toggleModalVisible();
      })
      .catch((error) => {
-        notification.error({
-          title: t("contracts.errors.returning", { error: error })
+        notification["error"]({
+          message: t("contracts.errors.returning", { error: error })
        });
      });
    setLoading(false);
--- a/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
+++ b/client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";

 const { Option } = Select;

-const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
+const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
  const [option, setOption] = useState(value);
  const { t } = useTranslation();

@@ -32,4 +32,4 @@ const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
    </Select>
  );
 };
-export default CourtesyCarStatusComponent;
+export default forwardRef(CourtesyCarStatusComponent);
--- a/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
+++ b/client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx
@@ -255,8 +255,9 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
      title={t("menus.header.courtesycars")}
      extra={
        <Space wrap>
-          <Button onClick={() => refetch()} icon={<SyncOutlined />} />
-
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
          <Dropdown trigger="click" menu={menu}>
            <Button>{t("general.labels.print")}</Button>
          </Dropdown>
@@ -277,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}
--- a/client/src/components/csi-response-form/csi-response-form.container.jsx
+++ b/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>
--- a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
+++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
@@ -85,10 +85,21 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
  };

  return (
-    <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
+    <Card
+      extra={
+        <Button onClick={() => refetch()}>
+          <SyncOutlined />
+        </Button>
+      }
+    >
      <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}
--- a/client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx
+++ b/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" />
--- a/client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx
+++ b/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"
--- a/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx
+++ b/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>
  );
 };
--- a/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx
+++ b/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>
  );
 };
--- a/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx
+++ b/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" />
--- a/client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx
+++ b/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>
--- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx
+++ b/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";
@@ -106,7 +106,7 @@ export function DashboardGridComponent({ currentUser }) {
      if (errors.length) {
        const errorMessages = errors.map(({ message }) => message || String(error));
        notification.error({
-          title: t("dashboard.errors.updatinglayout", {
+          message: t("dashboard.errors.updatinglayout", {
            message: errorMessages.join("; ")
          })
        });
@@ -117,7 +117,7 @@ export function DashboardGridComponent({ currentUser }) {
    } catch (err) {
      console.error(`Dashboard ${errorContext} failed`, err);
      notification.error({
-        title: t("dashboard.errors.updatinglayout", {
+        message: t("dashboard.errors.updatinglayout", {
          message: err?.message || String(err)
        })
      });
@@ -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");
@@ -196,7 +196,9 @@ export function DashboardGridComponent({ currentUser }) {
      <PageHeader
        extra={
          <Space>
-            <Button onClick={() => refetch()} icon={<SyncOutlined />} />
+            <Button onClick={() => refetch()}>
+              <SyncOutlined />
+            </Button>
            <Dropdown menu={menu} trigger={["click"]}>
              <Button>{t("dashboard.actions.addcomponent")}</Button>
            </Dropdown>
--- a/client/src/components/data-label/data-label.component.jsx
+++ b/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
@@ -13,32 +13,27 @@ export default function DataLabel({
  if (!open || (hideIfNull && !children)) return null;

  return (
-    <div {...props} style={{ display: "flex", alignItems: "flex-start" }}>
+    <div {...props} style={{ display: "flex" }}>
      <div
        style={{
-          marginRight: ".2rem",
-          flexShrink: 0, // <-- key: don't let the label collapse
-          whiteSpace: "nowrap" // <-- key: keep "Email:" on one line
+          // flex: 2,
+          marginRight: ".2rem"
        }}
      >
        <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
      </div>
-
      <div
        style={{
-          flex: 1, // <-- key: take remaining space
-          minWidth: 0, // <-- key: allow this flex item to shrink
+          flex: 4,
          marginLeft: ".3rem",
          fontWeight: "bolder",
-          overflowWrap: "anywhere", // <-- key: break long tokens (email/vin)
-          wordBreak: "break-word", // (backup behavior across browsers)
-          cursor: onValueClick !== undefined ? "pointer" : "",
-          ...(styles?.value ?? {}) // apply your per-field overrides to ALL children types
+          wordWrap: "break-word",
+          cursor: onValueClick !== undefined ? "pointer" : ""
        }}
        className={valueClassName}
        onClick={onValueClick}
      >
-        {typeof children === "string" ? <Typography.Text>{children}</Typography.Text> : children}
+        {typeof children === "string" ? <Typography.Text style={valueStyle}>{children}</Typography.Text> : children}
      </div>
    </div>
  );
--- a/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
+++ b/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx
@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } 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";
@@ -21,11 +21,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummar
 export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
  const { t } = useTranslation();
  const [allocationsSummary, setAllocationsSummary] = useState([]);
-  const socketRef = useRef(socket);
-
-  useEffect(() => {
-    socketRef.current = socket;
-  }, [socket]);

  useEffect(() => {
    socket.on("ap-export-success", (billid) => {
@@ -55,12 +50,12 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
    if (socket.connected) {
      socket.emit("pbs-calculate-allocations-ap", billids, (ack) => {
        setAllocationsSummary(ack);
-        // Store on socket for side-channel communication
-        socketRef.current.allocationsSummary = ack;
+
+        socket.allocationsSummary = ack;
      });
    }
  }, [socket, socket.connected, billids]);
-
+  console.log(allocationsSummary);
  const columns = [
    {
      title: t("general.labels.status"),
@@ -111,12 +106,13 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
          onClick={() => {
            socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
          }}
-          icon={<SyncOutlined />}
-        />
+        >
+          <SyncOutlined />
+        </Button>
      }
    >
      <Table
-        pagination={{ placement: "top", defaultPageSize: pageLimit }}
+        pagination={{ position: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
        dataSource={allocationsSummary}
@@ -126,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
--- a/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
+++ b/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx
@@ -1,148 +1,127 @@
 import { Alert, Button, Card, Table, Typography } from "antd";
-import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useRef, 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([]);
-  const socketRef = useRef(socket);

  useEffect(() => {
-    socketRef.current = socket;
-  }, [socket]);
-
-  // 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
-        socketRef.current.allocationsSummary = list;
-        if (onAllocationsChange) onAllocationsChange(list);
+    if (socket.connected) {
+      socket.emit("cdk-calculate-allocations", jobId, (ack) => {
+        setAllocationsSummary(ack);
+        socket.allocationsSummary = ack;
      });
-    } catch {
-      // Best-effort; leave table empty on error
-      setAllocationsSummary([]);
-      if (socketRef.current) {
-        socketRef.current.allocationsSummary = [];
-      }
-      if (onAllocationsChange) {
-        onAllocationsChange([]);
-      }
    }
-  }, [socket, jobId, mode, allocationsEvent]);
-
-  // Initial + whenever mode/socket/jobId changes
-  useEffect(() => {
-    fetchAllocations();
-  }, [fetchAllocations]);
+  }, [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
    }
  ];

  return (
    <Card
      title={title}
-      extra={<Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")} icon={<SyncOutlined />} />}
+      extra={
+        <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>
          );
        }}
--- a/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx
+++ b/client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx
@@ -1,343 +0,0 @@
-import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
-import { SyncOutlined } from "@ant-design/icons";
-import { useCallback, useEffect, useMemo, useRef, 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);
-  const socketRef = useRef(socket);
-
-  useEffect(() => {
-    socketRef.current = socket;
-  }, [socket]);
-
-  // 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 (socketRef.current) {
-            socketRef.current.allocationsSummary = [];
-            socketRef.current.rrAllocationsRaw = ack;
-          }
-          if (onAllocationsChange) {
-            onAllocationsChange([]);
-          }
-          return;
-        }
-
-        const jobAllocRows = normalizeJobAllocations(ack);
-
-        setRoggPreview(ack?.rogg || null);
-        setRolaborPreview(ack?.rolabor || null);
-        setError(null);
-
-        if (socketRef.current) {
-          socketRef.current.allocationsSummary = jobAllocRows;
-          socketRef.current.rrAllocationsRaw = ack;
-        }
-        if (onAllocationsChange) {
-          onAllocationsChange(jobAllocRows);
-        }
-      });
-    } catch {
-      setRoggPreview(null);
-      setRolaborPreview(null);
-      setError(t("dms.labels.allocations_error"));
-      if (socketRef.current) {
-        socketRef.current.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")} icon={<SyncOutlined />} />}
-    >
-      {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>
-  );
-}
--- a/client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx
+++ b/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,7 +56,7 @@ export function DmsCdkVehicles({ form, job }) {
          setOpen(false);
        }}
      >
-        {error && <AlertComponent title={error.message} type="error" />}
+        {error && <AlertComponent error={error.message} />}
        <Table
          title={() => (
            <Input.Search
--- a/client/src/components/dms-cdk-makes/dms-cdk-makes.refetch.component.jsx
+++ b/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>
  );
 }
--- a/client/src/components/dms-customer-selector/cdk-customer-selector.jsx
+++ b/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>
-  );
-}
--- a/client/src/components/dms-customer-selector/dms-customer-selector.component.jsx
+++ b/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>
+  );
 }
--- a/client/src/components/dms-customer-selector/fortellis-customer-selector.jsx
+++ b/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>
-  );
-}
--- a/client/src/components/dms-customer-selector/pbs-customer-selector.jsx
+++ b/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>
-  );
-}
--- a/client/src/components/dms-customer-selector/rr-customer-selector.jsx
+++ b/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>
-  );
-}
--- a/client/src/components/dms-log-events/dms-log-events.component.jsx
+++ b/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>`;
-    }
-  );
-};
+}
--- a/client/src/components/dms-post-form/cdklike-dms-post-form.jsx
+++ b/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>
-  );
-}
--- a/client/src/components/dms-post-form/dms-post-form.component.jsx
+++ b/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>
+  );
 }
--- a/Show More
+++ b/Show More