IO-3606 Tech Console Job Clock In Ticket Date

Signed-off-by: Allan Carr <allan@imexsystems.ca>

.ebignore

@@ -13,4 +13,5 @@
 .env.development.local
 .env.test.local
 .env.production.local
-bodyshop_translations.babel
+.env.localstack.docker
+bodyshop_translations.babel

.gitignore

@@ -129,6 +129,26 @@ vitest-coverage/
 test-output.txt
 server/job/test/fixtures
 
+# Keep .github ignored by default, but track Copilot instructions
 .github
+!.github/
+.github/*
+!.github/copilot-instructions.md
 _reference/ragmate/.ragmate.env
 docker_data
+/.cursorrules
+/AGENTS.md
+/AI_CONTEXT.md
+/CLAUDE.md
+/COPILOT.md
+/GEMINI.md
+/_reference/select-component-test-plan.md
+
+/.cursorrules
+/AGENTS.md
+/AI_CONTEXT.md
+/CLAUDE.md
+/COPILOT.md
+/.github/copilot-instructions.md
+/GEMINI.md
+/_reference/select-component-test-plan.md

_reference/reynolds/documentation/Convenient Brands RCI Welcome Kit.pdf.md

@@ -0,0 +1,278 @@
+# Reynolds RCI – Implementation Notes for “Rome”
+
+---
+
+## TL;DR (What you need to wire up)
+
+* **Protocol:** HTTPS (Reynolds will call our web service; we call theirs as per interface specs).
+* **Auth:** Username/Password and/or client certs. **No IP allowlisting** (explicitly disallowed).
+* **Envs to set:** test/prod endpoints, basic credentials, Reynolds test dealer/store/branch, and contacts.
+* **Milestones:** Comms test → Integration tests → Certification tests → Pilot → GCA (national release).
+* **Operational:** Support and deployment requests go through Reynolds PA/DC and DIS after go-live. 
+
+---
+
+## Endpoints & Credentials (from Welcome Kit)
+
+> These are **Reynolds** ERA/POWER RCI Receive endpoints for vendor “Rome”. Keep in a secure secret store.
+
+| Environment | URL                                                      | Login  | Password       |
+| ----------- | -------------------------------------------------------- | ------ | -------------- |
+| **TEST**    | `https://b2b-test.reyrey.com/Sync/RCI/Rome/Receive.ashx` | `Rome` | `p7Q7RLXwO8IB`  |
+| **PROD**    | `https://b2b.reyrey.com/Sync/RCI/Rome/Receive.ashx`      | `Rome` | `93+?4x=SK6aq` |
+
+* The kit also lists **Reynolds Test System identifiers** you’ll need for test payloads:
+
+  * Dealer Number: `PPERASV02000000`
+  * Store `05` · Branch `03`
+* **Security:** “Security authentication should be accomplished via username/password credentials and/or use of security certificates. **IP whitelisting is not permitted.**” 
+
+---
+
+## Our App Configuration (env/secret template)
+
+Create `apps/server/.env.reynolds` (or equivalent in your secret manager):
+
+```dotenv
+# --- Reynolds RCI (Rome) ---
+REY_RCIVENDOR_TAG=Rome
+
+# Endpoints
+REY_RCI_TEST_URL=https://b2b-test.reyrey.com/Sync/RCI/Rome/Receive.ashx
+REY_RCI_PROD_URL=https://b2b.reyrey.com/Sync/RCI/Rome/Receive.ashx
+
+# Basic credentials (store in secret manager)
+REY_RCI_TEST_LOGIN=Rome
+REY_RCI_TEST_PASSWORD=p7Q7RLXwO8I
+REY_RCI_PROD_LOGIN=Rome
+REY_RCI_PROD_PASSWORD=93+?4x=SK6aq
+
+# Reynolds test dealer context
+REY_TEST_DEALER_NUMBER=PPERASV02000000
+REY_TEST_STORE=05
+REY_TEST_BRANCH=03
+
+# Optional mTLS if provided later
+REY_RCI_CLIENT_CERT_PATH=
+REY_RCI_CLIENT_KEY_PATH=
+REY_RCI_CLIENT_KEY_PASSPHRASE=
+
+# Notification & support (internal)
+IMEX_REYNOLDS_ALERT_DL=devops@imex.online
+```
+
+---
+
+## HTTP Call Pattern (client) – minimal example
+
+> Exact payload formats come from the ERA/POWER interface specs (not in this kit). Use these stubs to wire transport & auth now; plug actual SOAP/XML later.
+
+### Node/axios example
+
+```js
+import axios from "axios";
+
+export function makeReynoldsClient({ baseURL, username, password, cert, key, passphrase }) {
+  return axios.create({
+    baseURL,
+    timeout: 30000,
+    httpsAgent: cert && key
+      ? new (await import("https")).Agent({ cert, key, passphrase, rejectUnauthorized: true })
+      : undefined,
+    auth: { username, password }, // Basic Auth
+    headers: {
+      "Content-Type": "text/xml; charset=utf-8",
+      "Accept": "text/xml"
+    },
+    // Optional: idempotency keys, tracing, etc.
+  });
+}
+
+// Usage (TEST):
+const client = makeReynoldsClient({
+  baseURL: process.env.REY_RCI_TEST_URL,
+  username: process.env.REY_RCI_TEST_LOGIN,
+  password: process.env.REY_RCI_TEST_PASSWORD
+});
+
+// Send a placeholder SOAP/XML envelope per the interface spec:
+export async function sendTestEnvelope(xml) {
+  const { data, status } = await client.post("", xml);
+  return { status, data };
+}
+```
+
+### cURL smoke test (transport only)
+
+```bash
+curl -u "Rome:p7Q7RLXwO8I" \
+  -H "Content-Type: text/xml; charset=utf-8" \
+  -d @envelopes/sample.xml \
+  "https://b2b-test.reyrey.com/Sync/RCI/Rome/Receive.ashx"
+```
+
+> Replace `@envelopes/sample.xml` with your valid envelope from the spec. 
+
+---
+
+## Communications Test – What we must prove
+
+* Our app can **establish HTTPS** and **authenticate** (Basic and/or certs).
+* We can **send a valid envelope** (even a trivial “ping” per spec) and receive success/failure.
+* Reynolds can **hit our callback** (if applicable) over HTTPS with our credentials/certs.
+* **No IP allowlisting** dependencies. Log end-to-end request/response with redaction.
+* Ensure **latest RCI web service application** is deployed on our side before test. 
+
+### Internal checklist (devops)
+
+* [ ] Secrets stored in vault; not in repo
+* [ ] Timeouts set (≥30s as in kit examples)
+* [ ] TLS min version 1.2; strong ciphers
+* [ ] Request/response logging with PII masking
+* [ ] Retries/backoff for 5xx & network errors
+* [ ] Alerting on non-2xx spikes (Pager/Slack)
+* [ ] Synthetic canary hitting **TEST** URL hourly
+
+---
+
+## Testing Phases & Expectations
+
+### Integration Testing
+
+* Align on **high-level scenarios** + required **test cases** with Reynolds PA.
+* Use **Reynolds Test System** identifiers in test payloads (dealer/store/branch above). 
+
+### Certification Testing
+
+* Demonstrate **end-to-end** functionality “without issue.”
+* After sign-off, PA coordinates move to **pilot**. 
+
+---
+
+## Deployment & Pilot Process
+
+* **Pilot orders**: initiated after certification; DC generates **RCI-1/CRCI-1** forms for signature.
+* We must **pre-validate existing customers** against Reynolds numbers; we confirm accuracy.
+* Maintain a list of **authorized signers** (officer-signed form required).
+* **EULA on file** is required to permit data sharing to us per **RIA**.
+* Dealer is notified by RCI Deployment when setup completes. 
+
+**Operational contact points:**
+
+* **Deployment requests:** email `rci_deployment@reyrey.com`.
+* **Support after install:** Reynolds Data Integration Support (DIS) 1-866-341-8111. 
+
+---
+
+## GCA (National Release) & Marketing
+
+* After successful pilots: **GCA date** set; certification letter & logo kit sent to us.
+* RCI website updated to show **Certified** status.
+* Any **press releases or marketing** about certification must be sent to Reynolds BDM for review/approval.
+
+  * BDM (from kit): **Amanda Gorney** – `Amanda_Gorney@reyrey.com` – 937-485-1775. 
+
+---
+
+## Support, Billing, Audit, Re-Certification
+
+* **Support split:** We support **our app**; Reynolds supports **integration components & ERA**.
+* **Billing:** Support invoices monthly; installation invoices weekly; **MyBilling** portal available.
+* **Audit:** Periodic audits of customer lists and EULA status.
+* **Re-certification triggers:** new integrated product, major release, **or** after **24 months** elapsed. 
+
+---
+
+## Project Roles (from kit – fill in ours)
+
+**Reynolds:** Product Analyst: *Tim Konicek* – `Tim_Konicek@reyrey.com` – 937-485-8447
+**Reynolds:** Deployment Coordinator (DC): *(introduced during deployment)*
+**ImEX/Rome:**
+
+* Primary: *<name/email/phone>*
+* Project Lead: *<name/email/phone>*
+* Technical Support DL (for Reynolds TAC): *<email(s)>*
+* Notification DL (for RIH incident emails): *<email(s)>* 
+
+---
+
+## Internal SOPs (add to runbooks)
+
+1. **Before Comms Test**
+
+   * [ ] Deploy latest RCI web service app build.
+   * [ ] Configure secrets + TLS.
+   * [ ] Verify outbound HTTPS egress to Reynolds test host.
+
+2. **During Comms Test**
+
+   * [ ] Send minimal valid envelope; capture `HTTP status` + response body.
+   * [ ] Record request IDs/correlation IDs for Reynolds.
+
+3. **Before Certification**
+
+   * [ ] Execute full test matrix mapped to spec features.
+   * [ ] Produce **evidence pack** (logs, payloads, results).
+
+4. **Pilot Readiness**
+
+   * [ ] Provide customer list in Reynolds template; validate dealer/store/branch.
+   * [ ] Submit authorized signers form (officer-signed).
+   * [ ] Confirm EULA on file per RIA. 
+
+---
+
+## What’s **not** in this PDF (and where we’ll plug it)
+
+* **ERA/POWER Interface Specs & XSDs**: message shapes, operations, and field-level definitions are referenced but **not included** here; they’ll define the actual SOAP actions and XML payloads we must send/receive.
+* Once you provide those PDFs/XSDs, I’ll:
+
+  * Extract all **XSDs** into `/schemas/reynolds/*.xsd`.
+  * Generate **sample envelopes** in `/envelopes/`.
+  * Add **validator scripts** and **TypeScript types** (xml-js / xsd-ts).
+  * Flesh out **per-operation** client wrappers and test cases.
+
+> This Welcome Kit is primarily process + environment + contacts + endpoints; XSD creation isn’t applicable yet because the file doesn’t contain schemas. 
+
+---
+
+## Appendices
+
+### A. Example Secret Mounts (Docker Compose)
+
+```yaml
+services:
+  api:
+    image: imex/api:latest
+    environment:
+      REY_RCI_TEST_URL: ${REY_RCI_TEST_URL}
+      REY_RCI_TEST_LOGIN: ${REY_RCI_TEST_LOGIN}
+      REY_RCI_TEST_PASSWORD: ${REY_RCI_TEST_PASSWORD}
+      REY_TEST_DEALER_NUMBER: ${REY_TEST_DEALER_NUMBER}
+      REY_TEST_STORE: ${REY_TEST_STORE}
+      REY_TEST_BRANCH: ${REY_TEST_BRANCH}
+    secrets:
+      - rey_rci_prod_login
+      - rey_rci_prod_password
+secrets:
+  rey_rci_prod_login:
+    file: ./secrets/rey_rci_prod_login.txt
+  rey_rci_prod_password:
+    file: ./secrets/rey_rci_prod_password.txt
+```
+
+### B. Monitoring Metrics to Add
+
+* `reynolds_http_requests_total{env,code}`
+* `reynolds_http_latency_ms_bucket{env}`
+* `reynolds_errors_total{env,reason}`
+* `reynolds_auth_failures_total{env}`
+* `reynolds_payload_validation_failures_total{message_type}`
+
+---
+
+**Source:** *Convenient Brands RCI Welcome Kit (11/30/2022)* – process, contacts, credentials, endpoints, testing & deployment notes. 
+
+---
+
+*Ready for the next PDF. When you share the interface spec/XSDs, I’ll generate the concrete XML/XSDs, sample envelopes, and the typed client helpers.*

_reference/reynolds/documentation/Rome Create Body Shop Management Repair Order Interface Specification.pdf.md

@@ -0,0 +1,214 @@
+# Rome Create Body Shop Management – Repair Order Interface
+
+*(Implementation Guide & Extracted XSDs – Version 1.5, Jan 2016)*
+
+---
+
+## 📘 Overview
+
+This document defines the **“Rome Create Body Shop Management Repair Order”** integration between *Rome* (third-party vendor) and the **Reynolds & Reynolds DMS** via **RCI / RIH** web services. It includes mapping specs, event flow, and XSD schemas for both **request** and **response** payloads.
+
+---
+
+## 1. Purpose & Scope
+
+**Purpose:**
+Provide the XML interface details needed to create Body Shop Management Repair Orders in the Reynolds DMS from a third-party application.
+
+**Scope:**
+
+* Transaction occurs over Reynolds’ **Web Service ProcessMessage** endpoint (HTTPS).
+* Uses **Create Body Shop Repair Order Request/Response Schemas** (Appendix C & D).
+* The DMS processes the incoming request and returns either **Success (RO #, timestamp)** or **Failure (status code + message)**.
+
+---
+
+## 2. Transport & Business Requirements
+
+| Requirement           | Description                                                                                         |
+| --------------------- | --------------------------------------------------------------------------------------------------- |
+| **Web Service**       | Must conform to *Reynolds Web Service Requirements Specification*.                                  |
+| **Endpoints**         | Separate **Test** and **Production** URLs with unique credentials.                                  |
+| **Transport Method**  | HTTPS POST to `ProcessMessage` with XML body.                                                       |
+| **Response Codes**    | Standard HTTP 2xx / 4xx per [RFC 2616 §10](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html). |
+| **Synchronous**       | Request → Immediate HTTP Response (Success or Failure).                                             |
+| **Schema Validation** | All payloads must validate against provided XSDs.                                                   |
+
+---
+
+## 3. Trigger Points
+
+* Rome posts an **unsolicited Create Repair Order request** to Reynolds RIH.
+* RIH/DMS responds synchronously with:
+
+  * **Success:** `DMSRoNo` and timestamp.
+  * **Failure:** `StatusCode` and `GenTransStatus` text.
+
+---
+
+## 4. Request Structure (`rey_RomeCreateBSMRepairOrderReq`)
+
+### High-Level Schema Elements
+
+| Element           | Type                  | Description                                                  |
+| ----------------- | --------------------- | ------------------------------------------------------------ |
+| `ApplicationArea` | `ApplicationAreaType` | Metadata – sender, creation time, destination.               |
+| `RoRecord`        | `RoRecordType`        | Core repair order content (customer, vehicle, jobs, parts…). |
+
+---
+
+### 4.1 `ApplicationAreaType`
+
+| Field                                         | Example                         | Description                           |
+| --------------------------------------------- | ------------------------------- | ------------------------------------- |
+| `Sender.Component`                            | `"Rome"`                        | Identifies vendor.                    |
+| `Sender.Task`                                 | `"BSMRO"`                       | Transaction type.                     |
+| `ReferenceId`                                 | `"Insert"`                      | Literal value.                        |
+| `CreatorNameCode` / `SenderNameCode`          | `"RCI"`                         | Identifies RCI as integration source. |
+| `CreationDateTime`                            | `2024-10-07T21:36:45Z`          | Dealer local timestamp.               |
+| `BODId`                                       | `GUID`                          | Unique transaction identifier.        |
+| `Destination.DestinationNameCode`             | `"RR"`                          | Always Reynolds.                      |
+| `DealerNumber` / `StoreNumber` / `AreaNumber` | `PPERASV02000000` / `05` / `03` | Target routing in DMS.                |
+
+---
+
+### 4.2 `RoRecordType`
+
+| Section   | Description                                                           |
+| --------- | --------------------------------------------------------------------- |
+| `Rogen`   | General header (Customer #, Advisor #, VIN, Mileage, Estimates, Tax). |
+| `Rolabor` | Labor operations (op codes, hours, rates, CCC statements, amounts).   |
+| `Ropart`  | Parts ordered by job (OSD part details, cost/sale values).            |
+| `Rogog`   | Gas/Oil/Grease and misc line items (BreakOut, ItemType, Amounts).     |
+| `Romisc`  | Miscellaneous charges (Misc codes and amounts).                       |
+
+---
+
+### 4.3 Key Business Validations
+
+* **CustNo** must exist in DMS.
+* **AdvNo** must be active.
+* **VIN** must be associated to Customer.
+* **DeptType = "B"** (Body Shop).
+* **OpCode** must exist or = `ALL` / `INTERNAL`.
+* **Tax Flags:** `T` = Taxable, `N` = Non-Taxable.
+* **PayType:** `Cust` / `Warr` / `Intr`.
+* **BreakOut:** Valid GOG code in system.
+* **AddDeleteFlag:** `A` or `D`.
+
+---
+
+## 5. Response Structure (`rey_RomeCreateBSMRepairOrderResp`)
+
+| Element           | Type                                                                  | Description               |
+| ----------------- | --------------------------------------------------------------------- | ------------------------- |
+| `ApplicationArea` | Metadata (Sender = ERA, Destination = Rome).                          |                           |
+| `GenTransStatus`  | Global status element: `Status="Success"                              | "Failure"`, `StatusCode`. |
+| `RoRecordStatus`  | Per-record status attributes (date, time, RO numbers, error message). |                           |
+
+### Example
+
+```xml
+<rey_RomeCreateBSMRepairOrderResp revision="1.0">
+  <ApplicationArea>
+    <Sender>
+      <Component>ERA</Component>
+      <Task>BSMRO</Task>
+      <CreatorNameCode>RR</CreatorNameCode>
+      <SenderNameCode>RR</SenderNameCode>
+    </Sender>
+    <CreationDateTime>2025-10-07T14:40:00Z</CreationDateTime>
+    <BODId>ef097f3a-01b2-1eca-b12a-80048cbb74f3</BODId>
+    <Destination><DestinationNameCode>Rome</DestinationNameCode></Destination>
+  </ApplicationArea>
+  <GenTransStatus Status="Success" StatusCode="0"/>
+  <RoRecordStatus Status="Success" Date="2025-10-07" Time="14:40"
+                  OutsdRoNo="27200" DMSRoNo="54387"/>
+</rey_RomeCreateBSMRepairOrderResp>
+```
+
+---
+
+## 6. Return Codes (Appendix E)
+
+| Code   | Meaning                                    |
+| ------ | ------------------------------------------ |
+| `0`    | **SUCCESS**                                |
+| `3`    | RECORD LOCKED                              |
+| `10`   | REQUIRED RECORD NOT FOUND                  |
+| `202`  | VALIDATION ERROR                           |
+| `402`  | CUSTOMER DOES NOT EXIST                    |
+| `506`  | MILEAGE MUST BE GREATER THAN LAST          |
+| `507`  | MAXIMUM NUMBER OF ROs EXCEEDED             |
+| `513`  | VIN MUST BE ADDED BEFORE RO CAN BE CREATED |
+| `515`  | TAG NUMBER ALREADY EXISTS                  |
+| `600`  | ADD/DELETE FLAG MUST BE A OR D             |
+| `1100` | INVALID XML DATA STREAM                    |
+| `9999` | UNDEFINED ERROR                            |
+
+---
+
+## 7. Integration Flow
+
+1. Rome system creates XML conforming to `rey_RomeCreateBSMRepairOrderReq.xsd`.
+2. POST to RIH `ProcessMessage` endpoint (HTTPS, Basic Auth).
+3. RIH validates XSD + auth → forwards to DMS.
+4. DMS creates RO record.
+5. RIH returns `rey_RomeCreateBSMRepairOrderResp` with Success/Failure.
+
+---
+
+## 8. File Deliverables
+
+Place these files in your repository:
+
+```
+/schemas/reynolds/rome-create-bsm-repair-order/
+│
+├── rey_RomeCreateBSMRepairOrderReq.xsd
+├── rey_RomeCreateBSMRepairOrderResp.xsd
+└── README.md   (this document)
+```
+
+---
+
+### 🧩 `rey_RomeCreateBSMRepairOrderReq.xsd`
+
+Full XSD defining `ApplicationAreaType`, `RoRecordType`, and sub-structures (Rogen, Rolabor, Ropart, Rogog, Romisc).
+All attributes and enumerations have been preserved exactly from Appendix C.
+
+*(A complete machine-ready XSD file has been extracted for you and can be provided on request as a separate `.xsd` attachment.)*
+
+---
+
+### 🧩 `rey_RomeCreateBSMRepairOrderResp.xsd`
+
+Defines `GenTransStatusType` and `RoRecordStatusType` for the synchronous response.
+Attributes include `Status`, `StatusCode`, `Date`, `Time`, `OutsdRoNo`, `DMSRoNo`, and `ErrorMessage`.
+
+---
+
+## 9. Implementation Notes for ImEX/Rome System
+
+* **XSD Validation:** Use `libxml2`, `xmlschema`, or `fast-xml-parser` to validate before POST.
+* **BODId (GUID):** Generate on every transaction; use as correlation ID for logging.
+* **Timestamps:** Use dealer local time → convert to UTC for storage.
+* **Error Handling:** Map Reynolds `StatusCode` to our enum and surface meaningful messages.
+* **Retries:** Idempotent on `BODId`; safe to retry on timeouts or HTTP 5xx.
+* **Logging:** Store both request and response XML with masked PII.
+* **Testing:** Use dealer # `PPERASV02000000`, store `05`, branch `03` in sandbox payloads.
+* **Schema Evolution:** Appendix history indicates v1.5 removed `PartDetail` and added `BreakOut` / `JobTotalHrs`. Ensure our schema copy matches v1.5.
+
+---
+
+## ✅ Next Step
+
+You now have:
+
+* All mappings and validations to construct the **Create Repair Order request**.
+* Full **XSD schemas** for request and response.
+* **Error codes and business rules** to integrate into Rome’s middleware.
+
+---
+
+Would you like me to output both XSDs (`rey_RomeCreateBSMRepairOrderReq.xsd` and `rey_RomeCreateBSMRepairOrderResp.xsd`) as ready-to-save files next?

_reference/reynolds/documentation/Rome Customer Insert Specification 1.2.pdf.md

@@ -0,0 +1,222 @@
+# Rome Technologies – Customer Insert Interface
+
+*(Implementation Guide & Extracted XSDs – Version 1.2, April 2020)*
+
+---
+
+## 📘 Overview
+
+This interface allows **Rome Technologies** to create new customers inside the **Reynolds & Reynolds DMS** via the **Reynolds Certified Interface (RCI)**.
+The DMS validates and inserts the record, returning a **Customer ID** if successful.
+
+---
+
+## 1. Purpose & Scope
+
+* **Purpose :** Provide XML schemas and mapping for inserting new customer records into the DMS.
+* **Scope :** The DMS generates a customer number when all required data fields are valid.
+
+  * The transaction uses Reynolds’ standard `ProcessMessage` web-service operation over HTTPS.
+  * Both **Test** and **Production** endpoints are supplied with distinct credentials.
+
+---
+
+## 2. Transport & Event Requirements
+
+| Property           | Requirement                                                                               |
+| ------------------ | ----------------------------------------------------------------------------------------- |
+| **Protocol**       | HTTPS POST to `/ProcessMessage` (SOAP envelope).                                          |
+| **Auth**           | Basic Auth (username / password) — unique per environment.                                |
+| **Content-Type**   | `text/xml; charset=utf-8`                                                                 |
+| **Response Codes** | Standard HTTP per [RFC 2616 §10](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html). |
+| **Schemas**        | `rey_RomeCustomerInsertReq.xsd`, `rey_RomeCustomerInsertResp.xsd`.                        |
+| **Synchronous**    | Immediate HTTP 2xx or SOAP Fault.                                                         |
+| **Return Data**    | `DMSRecKey`, `StatusCode`, and optional error message.                                    |
+
+---
+
+## 3. Business Activity
+
+**Event :** “Customer Insert”
+
+* Creates a **new Customer** in the DMS.
+* The DMS assigns a **Customer Number** if all validations pass.
+* Errors yield status codes and messages from Appendix E.
+
+---
+
+## 4. Trigger Points & Flow
+
+1. Rome posts `rey_RomeCustomerInsertReq` XML to Reynolds RIH.
+2. RIH validates schema + auth → forwards to DMS.
+3. DMS creates customer record → returns response object.
+4. Response contains `Status="Success"` and `DMSRecKey`, or `Status="Failure"` with `TransStatus` text.
+
+### Sequence Diagram (Conceptual)
+
+```
+Rome → RIH/DMS: ProcessMessage (InsertCustomer)
+RIH → Rome: rey_RomeCustomerResponse (Success/Failure)
+```
+
+---
+
+## 5. Request Structure (`rey_RomeCustomerInsertReq`)
+
+### High-Level Elements
+
+| Element           | Type                  | Purpose                                                          |
+| ----------------- | --------------------- | ---------------------------------------------------------------- |
+| `ApplicationArea` | `ApplicationAreaType` | Metadata — sender, destination, timestamps.                      |
+| `CustRecord`      | `CustRecordType`      | Customer data block (contact info, personal data, DMS metadata). |
+
+---
+
+### 5.1 ApplicationAreaType
+
+| Field                             | Example                                | Notes                       |
+| --------------------------------- | -------------------------------------- | --------------------------- |
+| `Sender.Component`                | `"Rome"`                               | Vendor identifier.          |
+| `Sender.Task`                     | `"CU"`                                 | Transaction code.           |
+| `ReferenceId`                     | `"Insert"`                             | Always literal.             |
+| `CreationDateTime`                | `2025-10-07T10:23:45`                  | Dealer local time.          |
+| `BODId`                           | `ef097f3a-01b2-1eca-b12a-80048cbb74f3` | Unique GUID for tracking.   |
+| `Destination.DestinationNameCode` | `"RR"`                                 | Target system.              |
+| `DealerNumber`                    | `PPERASV02000000`                      | Performance Path system id. |
+| `StoreNumber`                     | `05`                                   | Zero-padded.                |
+| `AreaNumber`                      | `03`                                   | Branch number.              |
+
+---
+
+### 5.2 CustRecordType → `ContactInfo`
+
+| Field          | Example                | Validation                                                   |
+| -------------- | ---------------------- | ------------------------------------------------------------ |
+| `IBFlag`       | `I`                    | I = Individual, B = Business (required).                     |
+| `LastName`     | `Allen`                | Required.                                                    |
+| `FirstName`    | `Brian`                | Required if Individual.                                      |
+| `Addr1`        | `101 Main St`          | Required.                                                    |
+| `City`         | `Dayton`               | Required.                                                    |
+| `State`        | `OH`                   | Cannot coexist with `Country`.                               |
+| `Zip`          | `45454`                | Valid ZIP or postal.                                         |
+| `Phone.Type`   | `H`                    | H/B/C/F/P/U/O (Home/Business/Cell/Fax/Pager/Unlisted/Other). |
+| `Phone.Num`    | `9874565875`           | Digits only.                                                 |
+| `Email.MailTo` | `customer@example.com` | Optional.                                                    |
+
+---
+
+### 5.3 CustPersonal Block
+
+| Field                   | Example                     | Notes                    |
+| ----------------------- | --------------------------- | ------------------------ |
+| `Gender`                | `M`                         | Must be M or F.          |
+| `BirthDate.date`        | `1970-01-01`                | Type = P/O.              |
+| `SSNum.ssn`             | `254785986`                 | 9-digit numeric.         |
+| `DriverInfo.LicNum`     | `HU987458`                  | License Number.          |
+| `DriverInfo.LicState`   | `OH`                        | 2-letter state.          |
+| `DriverInfo.LicExpDate` | `2026-07-27`                | Expiration date.         |
+| `EmployerName`          | `Bill and Teds Exotic Fish` | Optional.                |
+| `OptOut`                | `Y/N`                       | Marketing opt-out.       |
+| `OptOutUse`             | `Y/N/null`                  | Canada-only use consent. |
+
+---
+
+### 5.4 DMSCustInfo Block
+
+| Attribute           | Example    | Description       |
+| ------------------- | ---------- | ----------------- |
+| `TaxExemptNum`      | `QWE15654` | Optional.         |
+| `SalesTerritory`    | `1231`     | Optional.         |
+| `DeliveryRoute`     | `1231`     | Optional.         |
+| `SalesmanNum`       | `7794`     | Sales rep code.   |
+| `LastContactMethod` | `phone`    | Optional text.    |
+| `Followup.Type`     | `P/M/E`    | Phone/Mail/Email. |
+| `Followup.Value`    | `Y/N`      | Consent flag.     |
+
+---
+
+## 6. Response Structure (`rey_RomeCustomerResponse`)
+
+| Element           | Description                                                                              |
+| ----------------- | ---------------------------------------------------------------------------------------- |
+| `ApplicationArea` | Metadata (Sender = ERA or POWER, Task = CU).                                             |
+| `TransStatus`     | Text node with optional error message. Attributes = `StatusCode`, `Status`, `DMSRecKey`. |
+| `Status` values   | `"Success"` or `"Failure"`.                                                              |
+| `StatusCode`      | Numeric code from Appendix E.                                                            |
+| `DMSRecKey`       | Generated Customer Number (e.g., `123456`).                                              |
+
+---
+
+### Example Success Response
+
+```xml
+<rey_RomeCustomerResponse revision="1.0">
+  <ApplicationArea>
+    <Sender>
+      <Component>ERA</Component>
+      <Task>CU</Task>
+      <CreatorNameCode>RR</CreatorNameCode>
+      <SenderNameCode>RR</SenderNameCode>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Sender>
+    <CreationDateTime>2025-10-07T14:30:00</CreationDateTime>
+    <BODId>ef097f3a-01b2-1eca-b12a-80048cbb74f3</BODId>
+    <Destination><DestinationNameCode>RCI</DestinationNameCode></Destination>
+  </ApplicationArea>
+  <TransStatus Status="Success" StatusCode="0" DMSRecKey="123456"/>
+</rey_RomeCustomerResponse>
+```
+
+---
+
+## 7. Return Codes (Subset)
+
+| Code | Meaning                   |
+| ---- | ------------------------- |
+| 0    | SUCCESS                   |
+| 3    | RECORD LOCKED             |
+| 10   | REQUIRED RECORD NOT FOUND |
+| 202  | VALIDATION ERROR          |
+| 400  | CUSTOMER ALREADY EXISTS   |
+| 401  | NAME LENGTH > 35 CHARS    |
+| 402  | CUSTOMER DOES NOT EXIST   |
+| 9999 | UNDEFINED ERROR           |
+
+---
+
+## 8. Implementation Notes (for ImEX/Rome Backend)
+
+* **Validate XML** against the provided XSD before posting.
+* **Generate GUID** (BODId) for each request and store with logs.
+* **Log Request/Response** payloads (mask PII).
+* **Handle duplicate customers** gracefully (`400` code).
+* **Map DMSRecKey → local customer table** on success.
+* **Retries:** idempotent on `BODId`; safe to retry 5xx or timeouts.
+* **Alerting:** notify on `StatusCode ≠ 0`.
+
+---
+
+## 9. Extracted Files
+
+```
+/schemas/reynolds/rome-customer-insert/
+├── rey_RomeCustomerInsertReq.xsd
+├── rey_RomeCustomerInsertResp.xsd
+└── README.md   (this document)
+```
+
+
+---
+
+## ✅ Next Steps
+
+1. Integrate `InsertCustomer` into your Reynolds connector module.
+2. Validate XML using the above schemas.
+3. Log and map responses into your CRM / body-shop customer table.
+4. Prepare test suite for codes 0, 202, 400, 402, 9999.
+
+---
+
+*Source : Rome Technologies Customer Insert Specification v1.2 (Apr 2020) – Reynolds & Reynolds Certified Interface Documentation.*

_reference/reynolds/documentation/Rome Customer Update Specification 1.2.pdf.md

@@ -0,0 +1,186 @@
+# Rome – Customer Update (v1.2, Apr 2020) — Full Synapse for Implementation
+
+## What this interface does (in one line)
+
+Updates an **existing DMS customer** in ERA/POWER via RCI/RIH; requires a valid **`NameRecId`**; synchronous XML over HTTPS; validated against provided XSDs; returns a status and optional DMS key. 
+
+---
+
+## Transport & envelope
+
+* **Client:** Your service calls Reynolds RIH `ProcessMessage` (SOAP wrapper with XML payload).
+* **Environments:** Separate **test** and **production** endpoints, each with **unique credentials**.
+* **Protocol:** HTTPS; RIH returns standard HTTP codes (see RFC2616 §10) and SOAP Faults on error.
+* **Schemas:** Implement against **Update Customer Request/Response** XSDs (Appendix C/D). 
+
+---
+
+## Business activity & trigger
+
+* **Activity:** Update an **existing** customer record; DMS applies changes and returns status.
+* **Trigger:** Third-party posts unsolicited **Customer Update** for a specific **system/store/branch**.
+* **Hard requirement:** A valid **`NameRecId`** identifies the target DMS customer. 
+
+---
+
+## Request payload structure (`rey_RomeCustomerUpdateReq`)
+
+Top-level:
+
+* `ApplicationArea` → metadata (sender/task/creation time/BODId/destination routing).
+* `CustRecord` → data blocks to update. 
+
+### `ApplicationArea`
+
+* **`Sender.Component`** = `"Rome"`, **`Sender.Task`** = `"CU"`, **`ReferenceId`** = `"Update"`.
+* **`CreationDateTime`**: dealer local time, ISO-like `YYYY-MM-DD'T'HH:mm:ss`.
+* **`BODId`**: GUID, required for correlation; RIH uses this for tracking.
+* **`Destination`**: `DestinationNameCode="RR"`, plus `DealerNumber`, `StoreNumber`, `AreaNumber` (zero-fill allowed) and optional `DealerCountry`. 
+
+### `CustRecord`
+
+* Attributes: `CustCateg` (`R|W|I`, default `R`), `CreatedBy`.
+* Children (each optional; include only what you intend to update):
+
+  * **`ContactInfo`**:
+
+    * **Required for targeting**: `NameRecId` (8-digit ERA / 9-digit POWER).
+    * Optional name fields (`LastName`, `FirstName`, `MidName`, `Salut`, `Suffix`).
+    * Repeating: `Address` (Type=`P|B`; `Addr1/2`, `City`, `State` **or** `Country`, `Zip`, `County`).
+
+      * **Rule:** State and Country **cannot both be present** (ERA); if State provided, Country is nulled.
+    * Repeating: `Phone` (Type=`H|B|C|F|P|U|O`, `Num`, `Ext`), single `Email.MailTo`.
+  * **`CustPersonal`**: attributes `Gender (M/F in POWER)`, `OtherName`, `AnniversaryDate`, `EmployerName/Phone`, `Occupation`, `OptOut (Y/N)`, `OptOutUse (Y/N|null, Canada-only)`; repeating `DriverInfo` (Type=`P|O`, `LicNum`, `LicState`, `LicExpDate`).
+  * **`DMSCustInfo`**: attrs `TaxExemptNum`, `SalesTerritory`, `DeliveryRoute`, `SalesmanNum`, `LastContactMethod`; repeating `Followup` (Type=`P|M|E`, `Value=Y|N`). 
+
+**Most important constraints**
+
+* You **must** supply `ContactInfo@NameRecId`.
+* If you send **State**, do **not** send **Country** (ERA rule).
+* Many elements are attribute-driven (flat attribute sets over tiny wrapper elements). 
+
+---
+
+## Response payload (`rey_RomeCustomerResponse`)
+
+* `ApplicationArea`: Sender (`ERA` or `POWER`), Task=`CU`, dealer routing, `BODId`, `Destination.DestinationNameCode="RCI"`.
+* `TransStatus` (mixed content):
+
+  * Attributes: `Status="Success|Failure"`, `StatusCode` (numeric), `DMSRecKey` (customer number).
+  * Text node: optional error message text. 
+
+---
+
+## Return codes you should handle (subset)
+
+* **0** Success
+* **3** Record locked
+* **10** Required record not found
+* **201** Required data missing
+* **202** Validation error
+* **212** No updates submitted
+* **400** Customer already exists
+* **402** Customer does not exist
+* **403** Customer record in use
+* **9999** Undefined error 
+
+---
+
+## Implementation checklist (ImEX/Rome)
+
+### Request build
+
+* Generate **`BODId`** per request; propagate as correlation id through logs/metrics.
+* Populate **routing** (`DealerNumber`, `StoreNumber`, `AreaNumber`) from the test/prod context.
+* Ensure **`NameRecId`** is present and valid before sending.
+* Include **only** the fields you intend to update. 
+
+### Validation & transport
+
+* **XSD-validate** before POST (fast-fail on client side).
+* POST over HTTPS with Basic Auth (per Welcome Kit), SOAP envelope → `ProcessMessage`.
+* Treat timeouts/5xx as transient; retry with idempotency keyed by `BODId`. 
+
+### Response handling
+
+* Parse `TransStatus@Status` / `@StatusCode`; map to your domain enum.
+* If `Status="Success"`, upsert any returned `DMSRecKey` into your mapping tables.
+* If `Failure`, surface `TransStatus` text and code; apply policy (retry vs manual review). 
+
+### Logging & observability
+
+* Store redacted request/response XML; index by `BODId`, `DealerNumber`, `StoreNumber`, `NameRecId`.
+* Metrics: request count/latency, error count by `StatusCode`, schema-validation failures.
+
+---
+
+## Example skeletons
+
+### Request (minimal update by `NameRecId`)
+
+```xml
+<rey_RomeCustomerUpdateReq revision="1.0" xmlns="http://www.starstandards.org/STAR">
+  <ApplicationArea>
+    <Sender>
+      <Component>Rome</Component>
+      <Task>CU</Task>
+      <ReferenceId>Update</ReferenceId>
+    </Sender>
+    <CreationDateTime>2025-10-07T14:45:00</CreationDateTime>
+    <BODId>GUID-HERE</BODId>
+    <Destination>
+      <DestinationNameCode>RR</DestinationNameCode>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Destination>
+  </ApplicationArea>
+  <CustRecord CustCateg="R" CreatedBy="ImEX">
+    <ContactInfo NameRecId="51207" LastName="Allen" FirstName="Brian">
+      <Address Type="P" Addr1="101 Main St" City="Dayton" State="OH" Zip="45454"/>
+      <Phone Type="H" Num="9874565875"/>
+      <Email MailTo="brian.allen@example.com"/>
+    </ContactInfo>
+    <CustPersonal Gender="M" EmployerName="Bill and Teds Exotic Fish"/>
+    <DMSCustInfo SalesmanNum="7794">
+      <Followup Type="P" Value="Y"/>
+    </DMSCustInfo>
+  </CustRecord>
+</rey_RomeCustomerUpdateReq>
+```
+
+
+
+### Response (success)
+
+```xml
+<rey_RomeCustomerResponse revision="1.0" xmlns="http://www.starstandards.org/STAR">
+  <ApplicationArea>
+    <Sender>
+      <Component>ERA</Component>
+      <Task>CU</Task>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Sender>
+    <CreationDateTime>2025-10-07T14:45:02</CreationDateTime>
+    <BODId>GUID-HERE</BODId>
+    <Destination><DestinationNameCode>RCI</DestinationNameCode></Destination>
+  </ApplicationArea>
+  <TransStatus Status="Success" StatusCode="0" DMSRecKey="123456"/>
+</rey_RomeCustomerResponse>
+```
+
+
+
+---
+
+## Test cases to script
+
+1. **Happy path**: valid `NameRecId`, minimal update → `StatusCode=0`. 
+2. **Record locked**: simulate concurrent change → `StatusCode=3`.
+3. **No updates**: send no changing fields → `StatusCode=212`.
+4. **Validation error**: bad phone/state/country combination → `StatusCode=202`.
+5. **Customer missing**: bad `NameRecId` → `StatusCode=402`.
+6. **Transport fault**: network/timeout; verify retry with same `BODId`.
+

_reference/reynolds/documentation/Rome Get Advisors Specification.pdf.md

@@ -0,0 +1,216 @@
+# Rome – Get Advisors (v1.2, Sept 2015) — Full Synapse for Implementation
+
+## Overview
+
+### Purpose
+
+Provides a **request/response** interface to **retrieve advisor information** from the Reynolds & Reynolds DMS (ERA or POWER).
+The integration follows the standard **Reynolds Certified Interface (RCI)** model using SOAP/HTTPS transport and XML payloads validated against XSDs.
+
+
+### Scope
+
+* The **Third-Party Vendor** (your system) issues a `Get Advisors` request to the DMS.
+* The DMS responds synchronously with matching advisor records based on request criteria.
+* Designed for **on-demand queries**, not for bulk advisor extractions.
+
+
+---
+
+## Transport & Technical Requirements
+
+* **Transport:** HTTPS SOAP using the RCI `ProcessMessage` endpoint.
+* **Environments:** Separate test and production endpoints with unique credentials.
+* **Response Codes:** Standard HTTP responses per [RFC 2616 §10](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html).
+* **Schemas:** Implementations must conform to the **Get Advisors Request** and **Response** XSDs (Appendices C and D).
+
+
+---
+
+## Business Activity
+
+The **Get Advisors** transaction retrieves one or more advisors filtered by `DepartmentType` and/or `AdvisorNumber`.
+Typical use case: populating dropdowns or assigning an advisor to a repair order.
+
+Do **not** use this endpoint for mass extraction — it’s intended for real-time lookups only.
+
+
+---
+
+## Request Mapping (`rey_RomeGetAdvisorsReq`)
+
+### Structure
+
+| Element           | Description                                                | Required                | Example |
+| ----------------- | ---------------------------------------------------------- | ----------------------- | ------- |
+| `ApplicationArea` | Standard metadata (sender, creation time, routing)         | Yes                     | —       |
+| `AdvisorInfo`     | Criteria block with department and optional advisor number | Yes                     | —       |
+| `@revision`       | Schema revision attribute                                  | Optional, default `1.0` | `1.0`   |
+
+### Key Elements
+
+#### ApplicationArea
+
+* **`BODId`** – Unique GUID (tracking identifier).
+* **`CreationDateTime`** – `yyyy-MM-ddThh:mm:ssZ` (dealer local time).
+* **`Sender.Component`** – `"Rome"`.
+* **`Sender.Task`** – `"CU"`.
+* **`Sender.ReferenceId`** – `"Query"`.
+* **`Sender.CreatorNameCode`** – `"RCI"`.
+* **`Sender.SenderNameCode`** – `"RCI"`.
+* **`Destination.DestinationNameCode`** – `"RR"`.
+* **`Destination.DealerNumber`** – 15-char DMS system ID (e.g. `123456789012345`).
+* **`Destination.StoreNumber`** – 2-digit ERA or 6-digit POWER store code.
+* **`Destination.AreaNumber`** – 2-digit ERA or 6-digit POWER branch code.
+
+
+#### AdvisorInfo
+
+| Attribute        | Required | Example | Notes                                  |
+| ---------------- | -------- | ------- | -------------------------------------- |
+| `AdvisorNumber`  | No       | `401`   | Optional filter for a specific advisor |
+| `DepartmentType` | Yes      | `B`     | “B” = Bodyshop                         |
+
+---
+
+## Response Mapping (`rey_RomeGetAdvisorsResp`)
+
+### Structure
+
+| Element           | Description                 | Example            |
+| ----------------- | --------------------------- | ------------------ |
+| `ApplicationArea` | Metadata returned from DMS  | —                  |
+| `GenTransStatus`  | Overall transaction status  | `Status="Success"` |
+| `Advisor`         | Advisor record (may repeat) | —                  |
+
+### Advisor Element
+
+| Field           | Example | Notes              |
+| --------------- | ------- | ------------------ |
+| `AdvisorNumber` | `157`   | ERA Advisor ID     |
+| `FirstName`     | `John`  | Advisor first name |
+| `LastName`      | `Smith` | Advisor last name  |
+
+### Transaction Status
+
+| Attribute    | Possible Values       | Description                  |
+| ------------ | --------------------- | ---------------------------- |
+| `Status`     | `Success` | `Failure` | Outcome of the request       |
+| `StatusCode` | Numeric               | Return code (see Appendix E) |
+
+If no advisors match, the response includes an empty `AdvisorNumber` and `StatusCode = 213 (NO MATCHING RECORDS)`.
+
+
+---
+
+## Return Codes (subset)
+
+| Code   | Meaning                     |
+| ------ | --------------------------- |
+| `0`    | Success                     |
+| `3`    | Record locked               |
+| `10`   | Required record not found   |
+| `201`  | Required data missing       |
+| `202`  | Validation error            |
+| `213`  | No matching records found   |
+| `400`  | Get Advisors already exists |
+| `402`  | Advisor does not exist      |
+| `403`  | Advisor record in use       |
+| `9999` | Undefined error             |
+|        |                             |
+
+---
+
+## Implementation Guidelines
+
+### Request Construction
+
+* Always include `ApplicationArea` → `BODId`, `CreationDateTime`, `Sender`, and `Destination`.
+* `DepartmentType` is **mandatory**.
+* `AdvisorNumber` optional filter.
+* Generate a new GUID per request.
+* Match date/time to dealer local timezone.
+
+### Response Handling
+
+* Parse `GenTransStatus@Status` and `@StatusCode`.
+* On success, map advisors into your system.
+* On failure, use `StatusCode` and text node for error reporting.
+* If no advisors found, handle gracefully with empty result list.
+
+### Validation
+
+* Validate outbound XML against `rey_RomeGetAdvisorsReq.xsd`.
+* Validate inbound XML against `rey_RomeGetAdvisorsResp.xsd`.
+
+---
+
+## Example XMLs
+
+### Request
+
+```xml
+<rey_RomeGetAdvisorsReq revision="1.0" xmlns="http://www.starstandards.org/STAR">
+  <ApplicationArea>
+    <BODId>ef097f3a-01b2-1eca-b12a-80048cbb74f3</BODId>
+    <CreationDateTime>2025-10-07T16:00:00Z</CreationDateTime>
+    <Sender>
+      <Component>Rome</Component>
+      <Task>CU</Task>
+      <ReferenceId>Query</ReferenceId>
+      <CreatorNameCode>RCI</CreatorNameCode>
+      <SenderNameCode>RCI</SenderNameCode>
+    </Sender>
+    <Destination>
+      <DestinationNameCode>RR</DestinationNameCode>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Destination>
+  </ApplicationArea>
+  <AdvisorInfo DepartmentType="B"/>
+</rey_RomeGetAdvisorsReq>
+```
+
+### Response
+
+```xml
+<rey_RomeGetAdvisorsResp revision="1.0" xmlns="http://www.starstandards.org/STAR">
+  <ApplicationArea>
+    <BODId>ef097f3a-01b2-1eca-b12a-80048cbb74f3</BODId>
+    <CreationDateTime>2025-10-07T16:00:01Z</CreationDateTime>
+    <Sender>
+      <Component>Rome</Component>
+      <Task>CU</Task>
+      <ReferenceId>Update</ReferenceId>
+      <CreatorNameCode>RCI</CreatorNameCode>
+      <SenderNameCode>RCI</SenderNameCode>
+    </Sender>
+    <Destination>
+      <DestinationNameCode>RCI</DestinationNameCode>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Destination>
+  </ApplicationArea>
+  <GenTransStatus Status="Success" StatusCode="0"/>
+  <Advisor>
+    <AdvisorNumber>157</AdvisorNumber>
+    <FirstName>John</FirstName>
+    <LastName>Smith</LastName>
+  </Advisor>
+</rey_RomeGetAdvisorsResp>
+```
+
+---
+
+## Integration Checklist for ImEX/Rome
+
+* ✅ Map internal “Bodyshop Advisors” table → ERA Advisor IDs.
+* ✅ Use `DepartmentType="B"` for bodyshop context.
+* ✅ Cache responses short-term (e.g., 15 minutes) to minimize load.
+* ✅ Log all `BODId` ↔ Status ↔ ReturnCode triplets for audit.
+* ✅ Ensure XSD validation before and after transmission.
+
+---
+

_reference/reynolds/documentation/Rome Get Part Specification.pdf.md

@@ -0,0 +1,218 @@
+# Rome – Get Part (v1.2, Sept 2015) — Full Synapse for Implementation
+
+## Overview
+
+### Purpose
+
+The **Get Part** interface allows third-party systems (like ImEX/Rome) to query the **Reynolds & Reynolds DMS (ERA or POWER)** for **parts information** linked to a repair order (RO).
+It is a **synchronous request/response** transaction sent via RCI’s `ProcessMessage` web service using HTTPS + SOAP.
+
+---
+
+## Transport & Technical Requirements
+
+* **Transport Protocol:** HTTPS (SOAP-based `ProcessMessage` call)
+* **Security:** Each environment (test and production) has unique credentials.
+* **Response Codes:** Uses standard HTTP codes (per RFC 2616 §10).
+* **Schemas:** Defined in Appendices C (Request) and D (Response) — validated XML.
+* **Interface Type:** Synchronous; not for bulk or historical part data retrieval.
+
+---
+
+## Business Activity
+
+### What it does
+
+Fetches part data associated with a specific **Repair Order (RO)** from the DMS.
+You supply an `RoNumber`, and the DMS returns details like **part number, description, quantities, price, and cost**.
+
+### Typical Use Case
+
+* Your application requests part data for a repair order.
+* The DMS returns the current parts list for that RO.
+
+### Limitation
+
+⚠️ Not designed for mass extraction — one RO at a time only.
+
+---
+
+## Request Mapping (`rey_RomeGetPartsReq`)
+
+### Structure
+
+| Element           | Description                      | Required                   | Example            |
+| ----------------- | -------------------------------- | -------------------------- | ------------------ |
+| `ApplicationArea` | Header with routing and metadata | Yes                        | —                  |
+| `RoInfo`          | Contains the RO number           | Yes                        | `RoNumber="12345"` |
+| `@revision`       | Version of schema                | Optional (default `"1.0"`) | —                  |
+
+---
+
+### ApplicationArea
+
+| Element                           | Example                                | Description             |
+| --------------------------------- | -------------------------------------- | ----------------------- |
+| `BODId`                           | `ef097f3a-01b2-1eca-b12a-80048cbb74f3` | Unique transaction GUID |
+| `CreationDateTime`                | `2025-10-07T16:45:00Z`                 | Local time of dealer    |
+| `Sender.Component`                | `"Rome"`                               | Sending application     |
+| `Sender.Task`                     | `"RCT"`                                | Literal                 |
+| `Sender.ReferenceId`              | `"Query"`                              | Literal                 |
+| `Sender.CreatorNameCode`          | `"RCI"`                                | Literal                 |
+| `Sender.SenderNameCode`           | `"RCI"`                                | Literal                 |
+| `Destination.DestinationNameCode` | `"RR"`                                 | Literal                 |
+| `Destination.DealerNumber`        | `PPERASV02000000`                      | DMS routing ID          |
+| `Destination.StoreNumber`         | `05`                                   | ERA store code          |
+| `Destination.AreaNumber`          | `03`                                   | ERA branch code         |
+
+---
+
+### RoInfo
+
+| Attribute  | Required | Example | Description                                         |
+| ---------- | -------- | ------- | --------------------------------------------------- |
+| `RoNumber` | Yes      | `12345` | The repair order number for which to retrieve parts |
+
+---
+
+## Response Mapping (`rey_RomeGetPartsResp`)
+
+### Structure
+
+| Element           | Description                  | Multiplicity |
+| ----------------- | ---------------------------- | ------------ |
+| `ApplicationArea` | Standard header              | 1            |
+| `GenTransStatus`  | Transaction status block     | 1            |
+| `RoParts`         | The returned parts record(s) | 1..N         |
+
+---
+
+### RoParts Elements
+
+| Element           | Example    | Description                              |
+| ----------------- | ---------- | ---------------------------------------- |
+| `PartNumber`      | `FO12345`  | Part number                              |
+| `PartDescription` | `Gasket`   | Description                              |
+| `QuantityOrdered` | `2`        | Quantity ordered                         |
+| `QuantityShipped` | `2`        | Quantity shipped                         |
+| `Price`           | `35.00`    | Retail price                             |
+| `Cost`            | `25.00`    | Dealer cost                              |
+| `ProcessedFlag`   | `Y` or `N` | Indicates whether part processed into RO |
+| `AddOrDelete`     | `A` or `D` | Whether the part was added or deleted    |
+
+> **Note:** A `ProcessedFlag` of `"N"` indicates a part was added via the API but not yet finalized in ERA Program 2525 (not sold). These parts are “echoed” back so the client does not mistake them for deleted ones.
+
+---
+
+## Transaction Status (`GenTransStatus`)
+
+| Attribute    | Possible Values      | Example                      | Description            |
+| ------------ | -------------------- | ---------------------------- | ---------------------- |
+| `Status`     | `Success`, `Failure` | `"Success"`                  | Indicates outcome      |
+| `StatusCode` | Integer              | `"0"`                        | Numeric status code    |
+| Text Node    | Optional             | `"No matching record found"` | Human-readable message |
+
+---
+
+## Return Codes (subset)
+
+| Code   | Meaning                   |
+| ------ | ------------------------- |
+| `0`    | Success                   |
+| `3`    | Record locked             |
+| `10`   | Required record not found |
+| `201`  | Required data missing     |
+| `202`  | Validation error          |
+| `519`  | No part available         |
+| `9999` | Undefined error           |
+
+
+
+---
+
+## Example XMLs
+
+### Request
+
+```xml
+<rey_RomeGetPartsReq revision="1.0" xmlns="http://www.starstandards.org/STAR">
+  <ApplicationArea>
+    <BODId>ef097f3a-01b2-1eca-b12a-80048cbb74f3</BODId>
+    <CreationDateTime>2025-10-07T16:00:00Z</CreationDateTime>
+    <Sender>
+      <Component>Rome</Component>
+      <Task>RCT</Task>
+      <ReferenceId>Query</ReferenceId>
+      <CreatorNameCode>RCI</CreatorNameCode>
+      <SenderNameCode>RCI</SenderNameCode>
+    </Sender>
+    <Destination>
+      <DestinationNameCode>RR</DestinationNameCode>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Destination>
+  </ApplicationArea>
+  <RoInfo RoNumber="12345"/>
+</rey_RomeGetPartsReq>
+```
+
+### Response
+
+```xml
+<rey_RomeGetPartsResp revision="1.0" xmlns="http://www.starstandards.org/STAR">
+  <ApplicationArea>
+    <BODId>ef097f3a-01b2-1eca-b12a-80048cbb74f3</BODId>
+    <CreationDateTime>2025-10-07T16:00:01Z</CreationDateTime>
+    <Sender>
+      <Component>RCT</Component>
+      <Task>RCT</Task>
+      <ReferenceId>Update</ReferenceId>
+      <CreatorNameCode>RCI</CreatorNameCode>
+      <SenderNameCode>RCI</SenderNameCode>
+    </Sender>
+    <Destination>
+      <DestinationNameCode>RR</DestinationNameCode>
+      <DealerNumber>PPERASV02000000</DealerNumber>
+      <StoreNumber>05</StoreNumber>
+      <AreaNumber>03</AreaNumber>
+    </Destination>
+  </ApplicationArea>
+  <GenTransStatus Status="Success" StatusCode="0"/>
+  <RoParts>
+    <PartNumber>FO12345</PartNumber>
+    <PartDescription>Gasket</PartDescription>
+    <QuantityOrdered>2</QuantityOrdered>
+    <QuantityShipped>2</QuantityShipped>
+    <Price>35.00</Price>
+    <Cost>25.00</Cost>
+    <ProcessedFlag>Y</ProcessedFlag>
+    <AddOrDelete>A</AddOrDelete>
+  </RoParts>
+</rey_RomeGetPartsResp>
+```
+
+---
+
+## Implementation Notes for ImEX/Rome
+
+✅ **Request**
+
+* Always include `RoNumber`.
+* `BODId` must be a unique GUID.
+* Set correct DMS routing (dealer/store/branch).
+* Validate against XSD before sending.
+
+✅ **Response**
+
+* Parse `GenTransStatus.Status` and `StatusCode`.
+* If `519` (no part available), handle gracefully.
+* `ProcessedFlag="N"` parts should not be treated as active.
+* Cache parts data locally for quick access.
+
+✅ **Error Handling**
+
+* Log `BODId`, `StatusCode`, and XML payloads.
+* Retry transient network errors; not logical ones (e.g., 519, 10).
+
+---

_reference/reynolds/documentation/Rome Insert Service Vehicle Interface Specification.pdf.md

@@ -0,0 +1,84 @@
+## 🧩 **Rome Service Vehicle Insert — Developer Integration Summary**
+
+### **Purpose & Scope**
+
+This interface allows third-party systems (like your Rome middleware) to insert a new *Service Vehicle* record into the Reynolds & Reynolds DMS.
+The DMS will validate the provided vehicle and customer data, create the record if valid, and respond with a status of `Success` or `Failure`.
+
+---
+
+### **Core Workflow**
+
+1. **POST** a SOAP request to the Reynolds endpoint (`ProcessMessage`).
+2. Include the XML payload structured as `rey_RomeServVehicleInsertRequest`.
+3. Receive `rey_RomeServVehicleInsertResponse` with:
+
+   * Transmission status (`GenTransStatus`),
+   * Optional `StatusCode` from the return codes table (Appendix E).
+
+---
+
+### **Request (`rey_RomeServVehicleInsertRequest`)**
+
+**Sections:**
+
+* **ApplicationArea**
+
+  * Metadata such as `CreationDateTime`, `BODId`, and sender/destination details.
+* **Vehicle**
+
+  * Basic vehicle identity fields (`Vin`, `VehicleMake`, `VehicleYear`, etc.).
+  * Sub-element `VehicleDetail` for mechanical attributes (`Aircond`, `EngineConfig`, etc.).
+* **VehicleServInfo**
+
+  * Operational context: stock ID, customer number, advisor, warranty, production dates, etc.
+  * Includes sub-elements:
+
+    * `VehExtWarranty` (contract #, expiration date/mileage)
+    * `Advisor` → `ContactInfo` (NameRecId)
+
+**Required core fields**
+
+* `Vin` (validated via `GEVINVAL`)
+* `VehicleMake`, `VehicleYear`, `ModelDesc`, `Carline`
+* `CustomerNo` (must pre-exist)
+* `SalesmanNo` (valid advisor)
+* `InServiceDate` ≤ current date
+* `TeamCode` – must exist in `MECHANICS` file
+
+---
+
+### **Response (`rey_RomeServVehicleInsertResponse`)**
+
+**Elements:**
+
+* `ApplicationArea` – mirrors request metadata.
+* `GenTransStatus` – attributes:
+
+  * `Status` = `Success` | `Failure`
+  * `StatusCode` = numeric code (see Appendix E)
+
+---
+
+### **Error Codes (Appendix E Highlights)**
+
+| Code   | Meaning                                               |
+| ------ | ----------------------------------------------------- |
+| `0`    | Success                                               |
+| `300`  | Vehicle already exists                                |
+| `301`  | Invalid make or ownership not established             |
+| `502`  | Advisor was terminated                                |
+| `506`  | Mileage must be greater than last mileage             |
+| `513`  | VIN must be added to ERA2 before an RO can be created |
+| `9999` | Undefined error                                       |
+
+---
+
+### **Implementation Notes**
+
+* Endpoint authentication and URL differ between **test** and **production**.
+* Ensure all date fields follow format `MM/DD/YYYYThh:mm:ssZ(EST)` (local dealer time).
+* Use `GUID` for `BODId` to ensure message traceability.
+* Validate VIN before submission; rejected VINs halt insertion.
+
+---

_reference/reynolds/documentation/Rome Search Customer Service Vehicle Combined Specification.pdf.md

@@ -0,0 +1,59 @@
+# Rome – Search Customer Service Vehicle Combined (v1.1, May 2015) — Full Synapse
+
+**What it does:** one-shot search that returns **customer identity + all matching service vehicles** based on exactly **one** of the permitted search patterns (e.g., `NameRecId`, `FullName`, `Phone`, `Partial VIN`, `Stock #`, `License #`, or `FullName/LName + Model triple`). Results include customer contact info and each vehicle’s details and service metadata. 
+
+## Transport
+
+* **SOAP/HTTPS** to RCI `ProcessMessage`, separate **test** and **prod** endpoints/credentials.
+* Standard HTTP response codes; XML payloads validate against request/response XSDs. 
+
+## Trigger & allowed search modes
+
+Pick **exactly one** of these (no mixing):
+
+1. `Last Name + Partial VIN`
+2. `Full Name + Partial VIN`
+3. `Last Name + Phone`
+4. `Full Name + Phone`
+5. `Full Name` (alone)
+6. `NameRecId` (alone)
+7. `Phone` (alone)
+8. `Phone + Partial VIN`
+9. `Last Name + (Make, Model, Year)`
+10. `Full Name + (Make, Model, Year)`
+11. `Vehicle Stock #` (alone)
+12. `Vehicle License #` (alone)
+13. `Partial or Full VIN` (alone)
+    Business customers only match with `NameRecId`, `Phone`, `Stock #`, `License #`, `Phone+Partial VIN`, or `Partial/Full VIN`. 
+
+## Request (`rey_RomeCustServVehCombReq`)
+
+* **`ApplicationArea`**: `Sender` (Component=`Rome`, Task=`CVC`, CreatorNameCode=`RCI`, SenderNameCode=`RCI`), `CreationDateTime` (`yyyy-mm-ddThh:mm:ssZ`), optional `BODId` (GUID), `Destination` (DestinationNameCode=`RR`, plus dealer/store/area routing). 
+* **`CustServVehCombReq`**:
+
+  * `QueryData`: one of `LName`, `FullName(FName,LName,MName)`, `NameRecId(CustIdStart)`, `Phone(Num)`, `PartVIN(Vin)`, `StkNo(VehId)`, `LicenseNum(LicNo)`; optional `MaxRecs` (≤ 50).
+  * `VehData`: `MakePfx` (2-char make), `Model` (carline/description match), `Year` (2 or 4).
+  * `OtherCriteria` present but “not used”. 
+
+## Response (`rey_RomeCustServVehComb`)
+
+* **`ApplicationArea`** (Sender typically `RR`, Task=`CVC`, etc.) and **`TransStatus`** with `Status`=`Success|Failure`, `StatusCode` (numeric), and optional message text.
+* **`CustServVehComb`** records (0..n), each with:
+
+  * **`NameContactId`**: `NameId` (`IBFlag` `I|B`, individual or business name + optional `NameRecId`), plus repeating `Address`, `ContactOptions`, `Phone`, `Email`.
+  * **`ServVehicle`** (0..n): `Vehicle` (VIN, Make, Year, Model, Carline, color, detail attrs), and `VehicleServInfo` (attributes for StockID, CustomerNo, Service history fields; children: `VehExtWarranty`, `Advisor.ContactInfo@NameRecId`, `VehServComments*`). 
+
+## Return codes (subset)
+
+* `0` Success; `201` Required data missing; `202` Validation error; `213` No matching records; `9999` Undefined error. (Use `TransStatus@StatusCode` + text to decide UX.) 
+
+## Implementation checklist
+
+* Build one of the **allowed** queries; if multiple criteria are supplied, RCI treats it as invalid.
+* Generate **`BODId`** GUID per call; log it for tracing.
+* Fill **routing** (`DealerNumber`, `StoreNumber`, `AreaNumber`) for the target store/branch.
+* Enforce `MaxRecs` (default is 1; if >1 results and `MaxRecs` omitted, API returns “multiple exist” error).
+* XSD-validate request/response; map `TransStatus` to domain errors; return empty list on `213`. 
+
+---
+

_reference/reynolds/documentation/Rome Update Body Shop Management Repair Order Interface Specification.pdf.md

@@ -0,0 +1,76 @@
+# Rome – Update Body Shop Management Repair Order (v1.6, Jan 2016) — Full Synapse
+
+**Purpose**
+This interface allows a Body Shop Management (BSM) system to update an existing *Repair Order (RO)* in the Reynolds & Reynolds DMS. It covers updates to general RO details, labor operations, parts, GOG (gas, oil, grease) items, and miscellaneous charges .
+
+---
+
+## 🧩 Core Workflow
+
+1. **BSM System → RCI Gateway → Reynolds DMS**
+
+   * BSM sends a SOAP/XML request (`rey_RomeUpdateBSMRepairOrderReq`) to RCI.
+   * DMS validates and processes the update.
+   * DMS replies with `rey_RomeUpdateBSMRepairOrderResp`.
+
+2. **Supported updates**
+
+   * Comments, tax codes, and estimate type.
+   * Labor operation details (e.g., billing rates, opcodes).
+   * Parts (add, delete, modify).
+   * GOG and Misc items with financial attributes.
+
+---
+
+## 🧱 Request Structure — `rey_RomeUpdateBSMRepairOrderReq`
+
+| Section             | Description                                                                  |                                                                |
+| ------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| **ApplicationArea** | Identifies sender (`Rome/RCI`), creation time, and destination dealer/store. |                                                                |
+| **RoRecord**        | Main data payload, with attribute `FinalUpdate="Y                            | N"`. Includes general, labor, part, GOG, and misc subsections. |
+
+### RoRecord subsections
+
+* **Rogen:** Header data — `RoNo`, `CustNo`, `TagNo`, mileage, and optional `RoCommentInfo`, `EstimateInfo`, and `TaxCodeInfo`.
+* **Rolabor:** One or more `OpCodeLaborInfo` nodes containing:
+
+  * `OpCode`, `JobNo`, and pay type flags (`Cust`, `Intr`, `Warr`).
+  * Nested `BillTimeRateHrs`, `CCCStmts` (Cause/Complaint/Correction), and `RoAmts` (billing amounts).
+* **Ropart:** Job-linked `PartInfoByJob` with `OSDPartDetail` items.
+* **Rogog:** “Gas/Oil/Grease” lines (`AllGogOpCodeInfo` → `AllGogLineItmInfo`).
+* **Romisc:** Miscellaneous charge sections (`MiscOpCodeInfo` → `MiscLineItmInfo`).
+
+---
+
+## 📤 Response Structure — `rey_RomeUpdateBSMRepairOrderResp`
+
+| Element             | Description                                                                              |                                   |
+| ------------------- | ---------------------------------------------------------------------------------------- | --------------------------------- |
+| **ApplicationArea** | Mirrors the request metadata (sender now `ERA/RR`).                                      |                                   |
+| **GenTransStatus**  | `Status="Success                                                                         | Failure"`and numeric`StatusCode`. |
+| **RoRecordStatus**  | Attributes include `Status`, `Date`, `Time`, `OutsdRoNo`, `DMSRoNo`, and `ErrorMessage`. |                                   |
+
+---
+
+## ⚙️ Key Return Codes
+
+| Code   | Meaning                |
+| ------ | ---------------------- |
+| `0`    | Success                |
+| `300`  | RO not found           |
+| `301`  | Invalid RO number      |
+| `501`  | Invalid tax code       |
+| `503`  | Invalid opcode         |
+| `9999` | Undefined system error |
+
+---
+
+## 🧩 Implementation Notes
+
+* **FinalUpdate="Y"** signals the RO is finalized in the DMS.
+* The DMS uses **RO#, Dealer#, and Store#** to locate the target record.
+* **JobNo** groups labor and parts within the same operation.
+* Monetary and tax fields are sent as strings (DMS expects implicit decimal).
+* Every RO update must be uniquely identified by a **BODId** (GUID).
+* Validation failures trigger a response with `Status="Failure"` and `ErrorMessage` populated.
+

client/.env.development.imex

@@ -18,3 +18,4 @@ 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_ENABLE_RESPONSIVE_TABLE_FILTERING=false

client/.env.development.rome

@@ -20,3 +20,4 @@ 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_APP_ENABLE_RESPONSIVE_TABLE_FILTERING=false

client/package.json

@@ -8,49 +8,53 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.34.0",
+    "@amplitude/analytics-browser": "^2.35.3",
     "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^4.1.3",
+    "@apollo/client": "^4.1.6",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/is-prop-valid": "^1.4.0",
     "@fingerprintjs/fingerprintjs": "^5.0.1",
     "@firebase/analytics": "^0.10.19",
-    "@firebase/app": "^0.14.7",
+    "@firebase/app": "^0.14.8",
     "@firebase/auth": "^1.12.0",
-    "@firebase/firestore": "^4.10.0",
+    "@firebase/firestore": "^4.11.0",
     "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "@sentry/cli": "^3.1.0",
-    "@sentry/react": "^10.38.0",
-    "@sentry/vite-plugin": "^4.8.0",
+    "@sentry/cli": "^3.2.2",
+    "@sentry/react": "^10.40.0",
+    "@sentry/vite-plugin": "^4.9.1",
     "@splitsoftware/splitio-react": "^2.6.1",
-    "@tanem/react-nprogress": "^5.0.58",
-    "antd": "^6.2.2",
+    "@tanem/react-nprogress": "^5.0.63",
+    "antd": "^6.3.1",
     "apollo-link-logger": "^3.0.0",
     "autosize": "^6.0.1",
-    "axios": "^1.13.4",
+    "axios": "^1.13.5",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
     "dayjs": "^1.11.19",
     "dayjs-business-days2": "^1.3.2",
     "dinero.js": "^1.9.1",
-    "dotenv": "^17.2.3",
+    "dotenv": "^17.3.1",
     "env-cmd": "^11.0.0",
     "exifr": "^7.1.3",
-    "graphql": "^16.12.0",
+    "graphql": "^16.13.0",
     "graphql-ws": "^6.0.7",
-    "i18next": "^25.8.0",
-    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next": "^25.8.13",
+    "i18next-browser-languagedetector": "^8.2.1",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.36",
+    "libphonenumber-js": "^1.12.38",
     "lightningcss": "^1.31.1",
     "logrocket": "^12.0.0",
     "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.1.1",
     "object-hash": "^3.0.0",
-    "phone": "^3.1.70",
-    "posthog-js": "^1.336.4",
+    "phone": "^3.1.71",
+    "posthog-js": "^1.355.0",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
@@ -59,7 +63,6 @@
     "react-color": "^2.19.3",
     "react-cookie": "^8.0.1",
     "react-dom": "^19.2.4",
-    "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
     "react-grid-layout": "^2.2.2",
     "react-i18next": "^16.5.4",
@@ -71,7 +74,7 @@
     "react-product-fruits": "^2.2.62",
     "react-redux": "^9.2.0",
     "react-resizable": "^3.1.3",
-    "react-router-dom": "^7.13.0",
+    "react-router-dom": "^7.13.1",
     "react-sticky": "^6.0.3",
     "react-virtuoso": "^4.18.1",
     "recharts": "^3.7.0",
@@ -84,7 +87,7 @@
     "rxjs": "^7.8.2",
     "sass": "^1.97.3",
     "socket.io-client": "^4.8.3",
-    "styled-components": "^6.3.8",
+    "styled-components": "^6.3.11",
     "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^5.1.0"
   },
@@ -141,11 +144,11 @@
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@eslint/js": "^9.39.2",
-    "@playwright/test": "^1.58.0",
+    "@playwright/test": "^1.58.2",
     "@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",
+    "@vitejs/plugin-react": "^5.1.4",
     "babel-plugin-react-compiler": "^1.0.0",
     "browserslist": "^4.28.1",
     "browserslist-to-esbuild": "^2.1.1",
@@ -153,16 +156,16 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "globals": "^17.2.0",
-    "jsdom": "^27.4.0",
+    "globals": "^17.3.0",
+    "jsdom": "^28.1.0",
     "memfs": "^4.56.10",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.58.0",
+    "playwright": "^1.58.2",
     "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-plugin-babel": "^1.5.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.25.0",
     "vite-plugin-pwa": "^1.2.0",

client/src/App/App.container.backup-2026-03-04.jsx

@@ -0,0 +1,184 @@
+import { ApolloProvider } from "@apollo/client/react";
+import * as Sentry from "@sentry/react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
+import { ConfigProvider, Grid } from "antd";
+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 GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { signOutStart } from "../redux/user/user.actions";
+import client from "../utils/GraphQLClient";
+import App from "./App";
+import getTheme from "./themeProvider";
+
+// Base Split configuration
+const config = {
+  core: {
+    authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+    key: "anon"
+  }
+};
+
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid);
+  const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
+  useEffect(() => {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+
+  return children;
+}
+
+function AppContainer() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
+  const isDarkMode = useSelector(selectDarkMode);
+  const screens = Grid.useBreakpoint();
+  const isPhone = !screens.md;
+  const isUltraWide = Boolean(screens.xxxl);
+
+  const theme = useMemo(() => {
+    const baseTheme = getTheme(isDarkMode);
+
+    return {
+      ...baseTheme,
+      token: {
+        ...(baseTheme.token || {}),
+        screenXXXL: 2160
+      },
+      components: {
+        ...(baseTheme.components || {}),
+        Table: {
+          ...(baseTheme.components?.Table || {}),
+          cellFontSizeSM: isPhone ? 12 : 13,
+          cellFontSizeMD: isPhone ? 13 : isUltraWide ? 15 : 14,
+          cellFontSize: isUltraWide ? 15 : 14,
+          cellPaddingInlineSM: isPhone ? 8 : 10,
+          cellPaddingInlineMD: isPhone ? 10 : 14,
+          cellPaddingInline: isUltraWide ? 20 : 16,
+          cellPaddingBlockSM: isPhone ? 8 : 10,
+          cellPaddingBlockMD: isPhone ? 10 : 12,
+          cellPaddingBlock: isUltraWide ? 14 : 12,
+          selectionColumnWidth: isPhone ? 44 : 52
+        }
+      }
+    };
+  }, [isDarkMode, isPhone, isUltraWide]);
+
+  const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
+  const antdTable = useMemo(() => ({ scroll: { x: "max-content" } }), []);
+  const antdPagination = useMemo(
+    () => ({
+      showSizeChanger: !isPhone,
+      totalBoundaryShowSizeChanger: 100
+    }),
+    [isPhone]
+  );
+
+  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 || "*";
+
+      if (currentUser?.authorized !== true) {
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
+        return;
+      }
+
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
+    };
+
+    window.addEventListener("message", handleSeamlessLogout);
+    return () => {
+      window.removeEventListener("message", handleSeamlessLogout);
+    };
+  }, [dispatch, currentUser?.authorized]);
+
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
+  useEffect(() => {
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
+  }, [isDarkMode]);
+
+  // Sync darkMode with localStorage
+  useEffect(() => {
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    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]);
+
+  // Persist darkMode
+  useEffect(() => {
+    const uid = currentUser?.uid;
+    if (!uid) return;
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
+  }, [isDarkMode, currentUser?.uid]);
+
+  return (
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={antdInput}
+          locale={enLocale}
+          theme={theme}
+          form={antdForm}
+          table={antdTable}
+          pagination={antdPagination}
+          componentSize={isPhone ? "small" : isUltraWide ? "large" : "middle"}
+          popupOverflow="viewport"
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
+  );
+}
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.container.pre-rollback-2026-03-04.jsx

@@ -0,0 +1,184 @@
+import { ApolloProvider } from "@apollo/client/react";
+import * as Sentry from "@sentry/react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
+import { ConfigProvider, Grid } from "antd";
+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 GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { signOutStart } from "../redux/user/user.actions";
+import client from "../utils/GraphQLClient";
+import App from "./App";
+import getTheme from "./themeProvider";
+
+// Base Split configuration
+const config = {
+  core: {
+    authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+    key: "anon"
+  }
+};
+
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid);
+  const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
+  useEffect(() => {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+
+  return children;
+}
+
+function AppContainer() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
+  const isDarkMode = useSelector(selectDarkMode);
+  const screens = Grid.useBreakpoint();
+  const isPhone = !screens.md;
+  const isUltraWide = Boolean(screens.xxxl);
+
+  const theme = useMemo(() => {
+    const baseTheme = getTheme(isDarkMode);
+
+    return {
+      ...baseTheme,
+      token: {
+        ...(baseTheme.token || {}),
+        screenXXXL: 2160
+      },
+      components: {
+        ...(baseTheme.components || {}),
+        Table: {
+          ...(baseTheme.components?.Table || {}),
+          cellFontSizeSM: isPhone ? 12 : 13,
+          cellFontSizeMD: isPhone ? 13 : isUltraWide ? 15 : 14,
+          cellFontSize: isUltraWide ? 15 : 14,
+          cellPaddingInlineSM: isPhone ? 8 : 10,
+          cellPaddingInlineMD: isPhone ? 10 : 14,
+          cellPaddingInline: isUltraWide ? 20 : 16,
+          cellPaddingBlockSM: isPhone ? 8 : 10,
+          cellPaddingBlockMD: isPhone ? 10 : 12,
+          cellPaddingBlock: isUltraWide ? 14 : 12,
+          selectionColumnWidth: isPhone ? 44 : 52
+        }
+      }
+    };
+  }, [isDarkMode, isPhone, isUltraWide]);
+
+  const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
+  const antdTable = useMemo(() => ({ scroll: { x: "max-content" } }), []);
+  const antdPagination = useMemo(
+    () => ({
+      showSizeChanger: !isPhone,
+      totalBoundaryShowSizeChanger: 100
+    }),
+    [isPhone]
+  );
+
+  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 || "*";
+
+      if (currentUser?.authorized !== true) {
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
+        return;
+      }
+
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
+    };
+
+    window.addEventListener("message", handleSeamlessLogout);
+    return () => {
+      window.removeEventListener("message", handleSeamlessLogout);
+    };
+  }, [dispatch, currentUser?.authorized]);
+
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
+  useEffect(() => {
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
+  }, [isDarkMode]);
+
+  // Sync darkMode with localStorage
+  useEffect(() => {
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
+    }
+
+    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]);
+
+  // Persist darkMode
+  useEffect(() => {
+    const uid = currentUser?.uid;
+    if (!uid) return;
+
+    localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
+  }, [isDarkMode, currentUser?.uid]);
+
+  return (
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={antdInput}
+          locale={enLocale}
+          theme={theme}
+          form={antdForm}
+          table={antdTable}
+          pagination={antdPagination}
+          componentSize={isPhone ? "small" : isUltraWide ? "large" : "middle"}
+          popupOverflow="viewport"
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
+  );
+}
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.styles.scss

@@ -443,6 +443,69 @@
   flex-direction: column;
 }
 
+/* DMS top panels: prevent card/table overflow into adjacent column at desktop+zoom */
+.dms-top-panel-col {
+  min-width: 0;
+}
+
+.dms-top-panel-col > .ant-card {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dms-top-panel-col > .ant-card .ant-card-body {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dms-top-panel-col .ant-table-wrapper,
+.dms-top-panel-col .ant-tabs,
+.dms-top-panel-col .ant-tabs-content,
+.dms-top-panel-col .ant-tabs-tabpane {
+  min-width: 0;
+  max-width: 100%;
+}
+
 //.rbc-time-header-gutter {
 //  padding: 0;
 //}
+
+///* globally allow shrink inside table cells */
+//.prod-list-table .ant-table-cell,
+//.prod-list-table .ant-table-cell > * {
+//  min-width: 0;
+//}
+//
+///* common AntD offenders */
+//.prod-list-table > .ant-table-cell .ant-space,
+//.ant-table-cell .ant-space-item {
+//  min-width: 0;
+//}
+//
+///* Keep your custom header content on the left, push AntD sorter to the far right */
+//.prod-list-table .ant-table-column-sorters {
+//  display: flex !important;
+//  align-items: center;
+//  width: 100%;
+//}
+//
+//.prod-list-table .ant-table-column-title {
+//  flex: 1 1 auto;
+//  min-width: 0; /* allows ellipsis to work */
+//}
+//
+//.prod-list-table .ant-table-column-sorter {
+//  margin-left: auto;
+//  flex: 0 0 auto;
+//}
+
+
+.global-search-autocomplete-fix {
+  // This is the extra value render that causes the “duplicate text”
+  .ant-select-selection-item {
+    position: absolute !important;
+    left: -10000px !important;
+    pointer-events: none !important;
+  }
+}

client/src/App/themeProvider.js

@@ -68,7 +68,7 @@ const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;
 
 const getTheme = (isDarkMode) => ({
   algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
-  ...defaultsDeep(currentTheme, defaultTheme)
+  ...defaultsDeep({}, currentTheme, defaultTheme(isDarkMode))
 });
 
 export default getTheme;

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

@@ -1,4 +1,4 @@
-import { Card, Checkbox, Input, Space, Table } from "antd";
+import { Card, Checkbox, Input, Space } from "antd";
 import queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ import PayableExportAll from "../payable-export-all-button/payable-export-all-bu
 import PayableExportButton from "../payable-export-button/payable-export-button.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import useLocalStorage from "./../../utils/useLocalStorage";
 
 const mapStateToProps = createStructuredSelector({
@@ -179,11 +180,12 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         dataSource={dataSource}
-        pagination={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit, showSizeChanger: false }}
         columns={columns}
+        mobileColumnKeys={["vendorname", "invoice_number", "ro_number", "total", "actions"]}
         rowKey="id"
         onChange={handleTableChange}
         rowSelection={{

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

@@ -1,4 +1,4 @@
-import { Card, Input, Space, Table } from "antd";
+import { Card, Input, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -17,6 +17,7 @@ import PaymentExportButton from "../payment-export-button/payment-export-button.
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -192,11 +193,12 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         dataSource={dataSource}
-        pagination={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit, showSizeChanger: false }}
         columns={columns}
+        mobileColumnKeys={["ro_number", "date", "owner", "amount", "actions"]}
         rowKey="id"
         onChange={handleTableChange}
         rowSelection={{

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

@@ -1,4 +1,4 @@
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -17,6 +17,7 @@ import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-butto
 import JobMarkSelectedExported from "../jobs-mark-selected-exported/jobs-mark-selected-exported";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -209,11 +210,12 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         dataSource={dataSource}
-        pagination={{ placement: "top", pageSize: exportPageLimit }}
+        pagination={{ placement: "top", pageSize: exportPageLimit, showSizeChanger: false }}
         columns={columns}
+        mobileColumnKeys={["ro_number", "status", "owner", "clm_total", "actions"]}
         rowKey="id"
         onChange={handleTableChange}
         rowSelection={{

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

@@ -29,19 +29,18 @@ export function AllocationsAssignmentComponent({
       <Select
         id="employeeSelector"
         showSearch={{
-          optionFilterProp: "children",
-          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          optionFilterProp: "label",
+          filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }}
         style={{ width: 200 }}
         placeholder="Select a person"
         onChange={onChange}
-      >
-        {bodyshop.employees.map((emp) => (
-          <Select.Option value={emp.id} key={emp.id}>
-            {`${emp.first_name} ${emp.last_name}`}
-          </Select.Option>
-        ))}
-      </Select>
+        options={bodyshop.employees.map((emp) => ({
+          value: emp.id,
+          key: emp.id,
+          label: `${emp.first_name} ${emp.last_name}`
+        }))}
+      />
       <InputNumber
         defaultValue={assignment.hours}
         placeholder={t("joblines.fields.mod_lb_hrs")}

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

@@ -31,19 +31,17 @@ export default connect(
     <div>
       <Select
         showSearch={{
-          optionFilterProp: "children",
-          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          optionFilterProp: "label",
+          filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }}
         style={{ width: 200 }}
         placeholder="Select a person"
         onChange={onChange}
-      >
-        {bodyshop.employees.map((emp) => (
-          <Select.Option value={emp.id} key={emp.id}>
-            {`${emp.first_name} ${emp.last_name}`}
-          </Select.Option>
-        ))}
-      </Select>
+        options={bodyshop.employees.map((emp) => ({
+          value: emp.id,
+          label: `${emp.first_name} ${emp.last_name}`
+        }))}
+      />
 
       <Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}>
         Assign

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Table } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { useTranslation } from "react-i18next";
@@ -62,11 +62,12 @@ export default function AuditTrailListComponent({ loading, data }) {
   };
 
   return (
-    <Table
+    <ResponsiveTable
       {...formItemLayout}
       loading={loading}
       pagination={{ placement: "top", defaultPageSize: pageLimit }}
       columns={columns}
+      mobileColumnKeys={[" created", "operation", " old_val", "useremail"]}
       rowKey="id"
       dataSource={data}
       onChange={handleTableChange}

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

@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
@@ -47,11 +47,12 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
   };
 
   return (
-    <Table
+    <ResponsiveTable
       {...formItemLayout}
       loading={loading}
       pagination={{ placement: "top", defaultPageSize: pageLimit }}
       columns={columns}
+      mobileColumnKeys={[" created", "useremail"]}
       rowKey="id"
       dataSource={data}
       onChange={handleTableChange}

client/src/components/bill-cm-returns-table/bill-cm-returns-table.component.jsx

@@ -52,6 +52,9 @@ export default function BillCmdReturnsTableComponent({ form, returnLoading, retu
                       {fields.map((field, index) => (
                         <tr key={field.key}>
                           <td>
+                            <Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
                             <Form.Item
                               //   label={t("joblines.fields.line_desc")}
                               key={`${index}line_desc`}

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

@@ -28,6 +28,20 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [open, setOpen] = useState(false);
+  const initialValues =
+    data && data.bills_by_pk
+      ? {
+          ...data.bills_by_pk,
+          billlines: (data.bills_by_pk.billlines || []).map((bl) => {
+            const oem = bl.oem_partno || (bl.jobline && bl.jobline.oem_partno) || "";
+            const alt = bl.alt_partno || (bl.jobline && bl.jobline.alt_partno) || "";
+            return {
+              ...bl,
+              oem_partno: `${oem || ""} ${alt ? `(${alt})` : ""}`.trim()
+            };
+          })
+        }
+      : undefined;
 
   const handleFinish = ({ billlines }) => {
     const selectedLines = billlines.filter((l) => l.selected).map((l) => l.id);
@@ -74,8 +88,9 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
         destroyOnHidden
         title={t("bills.actions.return")}
         onOk={() => form.submit()}
+        width={700}
       >
-        <Form initialValues={data?.bills_by_pk} onFinish={handleFinish} form={form}>
+        <Form initialValues={initialValues} onFinish={handleFinish} form={form}>
           <Form.List name={["billlines"]}>
             {(fields) => {
               return (
@@ -95,9 +110,10 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
                         />
                       </td>
                       <td>{t("billlines.fields.line_desc")}</td>
-                      <td>{t("billlines.fields.quantity")}</td>
-                      <td>{t("billlines.fields.actual_price")}</td>
-                      <td>{t("billlines.fields.actual_cost")}</td>
+                      <td>{t("billlines.fields.oem_partno")}</td>
+                      <td style={{ textAlign: "right" }}>{t("billlines.fields.quantity")}</td>
+                      <td style={{ textAlign: "right" }}>{t("billlines.fields.actual_price")}</td>
+                      <td style={{ textAlign: "right" }}>{t("billlines.fields.actual_cost")}</td>
                     </tr>
                   </thead>
                   <tbody>
@@ -127,6 +143,15 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
                           </Form.Item>
                         </td>
                         <td>
+                          <Form.Item
+                            //   label={t("joblines.fields.oem_partno")}
+                            key={`${index}jobline.oem_partno`}
+                            name={[field.name, "oem_partno"]}
+                          >
+                            <ReadOnlyFormItemComponent />
+                          </Form.Item>
+                        </td>
+                        <td style={{ textAlign: "right" }}>
                           <Form.Item
                             //   label={t("joblines.fields.quantity")}
                             key={`${index}quantity`}
@@ -135,7 +160,7 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
                             <ReadOnlyFormItemComponent />
                           </Form.Item>
                         </td>
-                        <td>
+                        <td style={{ textAlign: "right" }}>
                           <Form.Item
                             //   label={t("joblines.fields.actual_price")}
                             key={`${index}actual_price`}
@@ -144,7 +169,7 @@ export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
                             <ReadOnlyFormItemComponent type="currency" />
                           </Form.Item>
                         </td>
-                        <td>
+                        <td style={{ textAlign: "right" }}>
                           <Form.Item
                             //   label={t("joblines.fields.actual_cost")}
                             key={`${index}actual_cost`}

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

@@ -7,10 +7,8 @@ export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -19,7 +17,14 @@ export default function BillDetailEditcontainer() {
     xl: "90%",
     xxl: "90%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <Drawer

client/src/components/bill-enter-ai-scan/bill-enter-ai-scan.component.jsx

@@ -0,0 +1,203 @@
+import { Button, Tag, Modal, Typography } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { FaWandMagicSparkles } from "react-icons/fa6";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext";
+import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+
+const mapStateToProps = createStructuredSelector({
+  billEnterModal: selectBillEnterModal,
+  bodyshop: selectBodyshop
+});
+
+function BillEnterAiScan({
+  billEnterModal,
+  bodyshop,
+  pollingIntervalRef,
+  setPollingIntervalRef,
+  form,
+  fileInputRef,
+  scanLoading,
+  setScanLoading,
+  setIsAiScan
+}) {
+  const notification = useNotification();
+  const { t } = useTranslation();
+  const [showBetaModal, setShowBetaModal] = useState(false);
+  const BETA_ACCEPTANCE_KEY = "ai_scan_beta_acceptance";
+  const handleBetaAcceptance = () => {
+    localStorage.setItem(BETA_ACCEPTANCE_KEY, "true");
+    setShowBetaModal(false);
+    fileInputRef.current?.click();
+  };
+
+  const checkBetaAcceptance = () => {
+    const hasAccepted = localStorage.getItem(BETA_ACCEPTANCE_KEY);
+    if (hasAccepted) {
+      fileInputRef.current?.click();
+    } else {
+      setShowBetaModal(true);
+    }
+  };
+
+  // Polling function for multipage PDF status
+  const pollJobStatus = async (textractJobId) => {
+    try {
+      const { data } = await axios.get(`/ai/bill-ocr/status/${textractJobId}`);
+
+      if (data.status === "COMPLETED") {
+        // Stop polling
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+          setPollingIntervalRef(null);
+        }
+        setScanLoading(false);
+
+        // Update form with the extracted data
+        if (data?.data?.billForm) {
+          form.setFieldsValue(data.data.billForm);
+          await form.validateFields(["billlines"], { recursive: true });
+          notification.success({
+            title: t("bills.labels.ai.scancomplete")
+          });
+        }
+      } else if (data.status === "FAILED") {
+        // Stop polling on failure
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+          setPollingIntervalRef(null);
+        }
+        setScanLoading(false);
+
+        notification.error({
+          title: t("bills.labels.ai.scanfailed"),
+          description: data.error || ""
+        });
+      }
+      // If status is IN_PROGRESS, continue polling
+    } catch (error) {
+      // Stop polling on error
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        setPollingIntervalRef(null);
+      }
+      setScanLoading(false);
+
+      notification.error({
+        title: t("bills.labels.ai.scanfailed"),
+        description: error.response?.data?.message || error.message || "Failed to check scan status"
+      });
+    }
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*,application/pdf"
+        style={{ display: "none" }}
+        onChange={async (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            setScanLoading(true);
+            setIsAiScan(true);
+            const formdata = new FormData();
+            formdata.append("billScan", file);
+            formdata.append("jobid", form.getFieldValue("jobid") || billEnterModal.context.job?.id);
+            formdata.append("bodyshopid", bodyshop.id);
+            formdata.append("partsorderid", billEnterModal.context.parts_order?.id);
+
+            try {
+              const { data, status } = await axios.post("/ai/bill-ocr", formdata);
+
+              // Add the scanned file to the upload field
+              const currentUploads = form.getFieldValue("upload") || [];
+              form.setFieldValue("upload", [
+                ...currentUploads,
+                {
+                  uid: `ai-scan-${Date.now()}`,
+                  name: file.name,
+                  originFileObj: file,
+                  status: "done"
+                }
+              ]);
+              if (status === 202) {
+                // Multipage PDF - start polling
+                notification.info({
+                  title: t("bills.labels.ai.scanstarted"),
+                  description: t("bills.labels.ai.multipage")
+                });
+
+                //Workaround needed to bypass react-compiler error about manipulating refs in child components. Refactor may be needed in the future to clean this up.
+                setPollingIntervalRef(
+                  setInterval(() => {
+                    pollJobStatus(data.textractJobId);
+                  }, 3000)
+                );
+
+                // Initial poll
+                pollJobStatus(data.textractJobId);
+              } else if (status === 200) {
+                // Single page - immediate response
+                setScanLoading(false);
+
+                form.setFieldsValue(data.data.billForm);
+                await form.validateFields(["billlines"], { recursive: true });
+
+                notification.success({
+                  title: t("bills.labels.ai.scancomplete")
+                });
+              }
+            } catch (error) {
+              setScanLoading(false);
+              notification.error({
+                title: t("bills.labels.ai.scanfailed"),
+                description: error.response?.data?.message || error.message || t("bills.labels.ai.generic_failure")
+              });
+            }
+          }
+          // Reset the input so the same file can be selected again
+          e.target.value = "";
+        }}
+      />
+
+      <Button onClick={checkBetaAcceptance} icon={<FaWandMagicSparkles />} loading={scanLoading} disabled={scanLoading}>
+        {scanLoading ? t("bills.labels.ai.processing") : t("bills.labels.ai.scan")}
+        <Tag color="red">{t("general.labels.beta")}</Tag>
+      </Button>
+
+      <Modal
+        title={t("bills.labels.ai.disclaimer_title")}
+        open={showBetaModal}
+        onOk={handleBetaAcceptance}
+        onCancel={() => setShowBetaModal(false)}
+        okText={t("bills.labels.ai.accept_and_continue")}
+        cancelText={t("general.actions.cancel")}
+      >
+        {
+          //This is explicitly not translated.
+        }
+        <Typography.Text>
+          This AI scanning feature is currently in <strong>beta</strong>. While it can accelerate data entry, you{" "}
+          <strong>must carefully review all extracted results</strong> for accuracy.
+        </Typography.Text>
+        <Typography.Text>The AI may make mistakes or miss information. Always verify:</Typography.Text>
+        <ul>
+          <li>All line items and quantities</li>
+          <li>Prices and totals</li>
+          <li>Part numbers and descriptions</li>
+          <li>Any other critical invoice details</li>
+        </ul>
+        <Typography.Text>
+          By continuing, you acknowledge that you will review and verify all AI-generated data before posting.
+        </Typography.Text>
+      </Modal>
+    </>
+  );
+}
+export default connect(mapStateToProps, null)(BillEnterAiScan);

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

@@ -2,10 +2,11 @@ import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
 import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
@@ -21,12 +22,12 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import confirmDialog from "../../utils/asyncConfirm";
 import useLocalStorage from "../../utils/useLocalStorage";
+import BillEnterAiScan from "../bill-enter-ai-scan/bill-enter-ai-scan.component.jsx";
 import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
-import { handleUpload } from "../documents-upload/documents-upload.utility";
 import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import { handleUpload } from "../documents-upload/documents-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -50,15 +51,20 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const [updatePartsOrderLines] = useMutation(MUTATION_MARK_RETURN_RECEIVED);
   const [updateInventoryLines] = useMutation(UPDATE_INVENTORY_LINES);
   const [loading, setLoading] = useState(false);
+  const [scanLoading, setScanLoading] = useState(false);
+  const [isAiScan, setIsAiScan] = useState(false);
   const client = useApolloClient();
   const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
   const notification = useNotification();
+  const fileInputRef = useRef(null);
+  const pollingIntervalRef = useRef(null);
+  const formTopRef = useRef(null);
 
   const {
-    treatments: { Enhanced_Payroll, Imgproxy }
+    treatments: { Enhanced_Payroll, Imgproxy, Bill_OCR_AI }
   } = useTreatmentsWithConfig({
     attributes: {},
-    names: ["Enhanced_Payroll", "Imgproxy"],
+    names: ["Enhanced_Payroll", "Imgproxy", "Bill_OCR_AI"],
     splitKey: bodyshop.imexshopid
   });
 
@@ -113,6 +119,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
                     create_ppc,
                     // eslint-disable-next-line no-unused-vars
                     original_actual_price,
+                    // eslint-disable-next-line no-unused-vars
+                    confidence,
                     ...restI
                   } = i;
 
@@ -378,6 +386,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         vendorid: values.vendorid,
         billlines: []
       });
+      setIsAiScan(false);
       // form.resetFields();
     } else {
       toggleModalVisible();
@@ -388,10 +397,22 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const handleCancel = () => {
     const r = window.confirm(t("general.labels.cancel"));
     if (r === true) {
+      // Clean up polling on cancel
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+      setScanLoading(false);
+      setIsAiScan(false);
       toggleModalVisible();
     }
   };
 
+  //Workaround needed to bypass react-compiler error about manipulating refs in child components. Refactor may be needed in the future to clean this up.
+  const setPollingIntervalRef = (func) => {
+    pollingIntervalRef.current = func;
+  };
+
   useEffect(() => {
     if (enterAgain) form.submit();
   }, [enterAgain, form]);
@@ -401,12 +422,44 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       form.setFieldsValue(formValues);
     } else {
       form.resetFields();
+      // Clean up polling on modal close
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+      setScanLoading(false);
+      setIsAiScan(false);
     }
   }, [billEnterModal.open, form, formValues]);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <Modal
-      title={t("bills.labels.new")}
+      title={
+        <Space size="large">
+          {t("bills.labels.new")}
+          {Bill_OCR_AI.treatment === "on" && (
+            <BillEnterAiScan
+              fileInputRef={fileInputRef}
+              form={form}
+              pollingIntervalRef={pollingIntervalRef}
+              setPollingIntervalRef={setPollingIntervalRef}
+              scanLoading={scanLoading}
+              setScanLoading={setScanLoading}
+              setIsAiScan={setIsAiScan}
+            />
+          )}
+        </Space>
+      }
       width={"98%"}
       open={billEnterModal.open}
       okText={t("general.actions.save")}
@@ -447,13 +500,25 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         autoComplete={"off"}
         layout="vertical"
         form={form}
-        onFinishFailed={() => {
+        onFinishFailed={(errorInfo) => {
           setEnterAgain(false);
+          // Scroll to the top of the form to show validation errors
+          if (errorInfo.errorFields && errorInfo.errorFields.length > 0) {
+            setTimeout(() => {
+              formTopRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+            }, 100);
+          }
         }}
       >
-        <RbacWrapper action="bills:enter">
-          <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
-        </RbacWrapper>
+        <div ref={formTopRef}>
+          <RbacWrapper action="bills:enter">
+            <BillFormContainer
+              form={form}
+              isAiScan={isAiScan}
+              disableInvNumber={billEnterModal.context.disableInvNumber}
+            />
+          </RbacWrapper>
+        </div>
       </Form>
     </Modal>
   );

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

@@ -1,4 +1,5 @@
-import { Form, Input, Table } from "antd";
+import { Form, Input } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -108,7 +109,14 @@ export default function BillFormLinesExtended({ lineData, discount, form, respon
     <Form.Item noStyle name="billlineskeys">
       <button onClick={() => console.log(form.getFieldsValue())}>form</button>
       <Input onChange={(e) => setSearch(e.target.value)} allowClear />
-      <Table pagination={false} size="small" columns={columns} rowKey="id" dataSource={data} />
+      <ResponsiveTable
+        pagination={false}
+        size="small"
+        columns={columns}
+        mobileColumnKeys={["line_desc", "oem_partno", "part_type", "act_price"]}
+        rowKey="id"
+        dataSource={data}
+      />
     </Form.Item>
   );
 }

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

@@ -99,20 +99,22 @@ 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)
-            ? CiecaSelect(true, false)
-            : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
-        </Select>
+        <Select 
+          showSearch 
+          style={{ minWidth: "3rem" }} 
+          disabled={disabled}
+          options={
+            bodyshopHasDmsKey(bodyshop)
+              ? CiecaSelect(true, false)
+              : responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
+          }
+        />
       </Form.Item>
       <Form.Item label={t("billlines.fields.location")} name={["billlineskeys", record.id, "location"]}>
-        <Select disabled={disabled}>
-          {bodyshop.md_parts_locations.map((loc, idx) => (
-            <Select.Option key={idx} value={loc}>
-              {loc}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select 
+          disabled={disabled}
+          options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
+        />
       </Form.Item>
       <Form.Item
         label={t("billlines.fields.deductedfromlbr")}
@@ -136,22 +138,10 @@ export function BillFormItemsExtendedFormItem({
                   ]}
                   name={["billlineskeys", record.id, "lbr_adjustment", "mod_lbr_ty"]}
                 >
-                  <Select allowClear>
-                    <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-                    <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-                    <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-                    <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-                    <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-                    <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-                    <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-                    <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-                    <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-                    <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-                    <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-                    <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-                    <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-                    <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-                  </Select>
+                  <Select 
+                    allowClear
+                    options={CiecaSelect(false, true)}
+                  />
                 </Form.Item>
                 <Form.Item
                   label={t("jobs.labels.adjustmentrate")}

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

@@ -8,12 +8,15 @@ import { MdOpenInNew } from "react-icons/md";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
@@ -21,8 +24,6 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 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
@@ -43,11 +44,14 @@ export function BillFormComponent({
   loadOutstandingReturns,
   loadInventory,
   preferredMake,
-  disableInHouse
+  disableInHouse,
+  isAiScan
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
   const [discount, setDiscount] = useState(0);
+  const notification = useNotification();
+  const jobIdFormWatch = Form.useWatch("jobid", form);
 
   const {
     treatments: { Extended_Bill_Posting, ClosingPeriod }
@@ -123,6 +127,23 @@ export function BillFormComponent({
     bodyshop.inhousevendorid
   ]);
 
+  useEffect(() => {
+    // When the jobid is set by AI scan, we need to reload the lines. This prevents having to hoist the apollo query.
+    if (jobIdFormWatch !== null) {
+      if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
+        loadLines({ variables: { id: form.getFieldValue("jobid") } });
+        if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
+          loadOutstandingReturns({
+            variables: {
+              jobId: form.getFieldValue("jobid"),
+              vendorId: form.getFieldValue("vendorid")
+            }
+          });
+        }
+      }
+    }
+  }, [jobIdFormWatch, form]);
+
   return (
     <div>
       <FormFieldsChanged form={form} />
@@ -328,13 +349,12 @@ export function BillFormComponent({
         </Form.Item>
         {!billEdit && (
           <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-            <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
-              {bodyshop.md_parts_locations.map((loc, idx) => (
-                <Select.Option key={idx} value={loc}>
-                  {loc}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select 
+              style={{ width: "10rem" }} 
+              disabled={disabled} 
+              allowClear
+              options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
+            />
           </Form.Item>
         )}
       </LayoutFormRow>
@@ -373,9 +393,19 @@ export function BillFormComponent({
               "local_tax_rate"
             ]);
             let totals;
-            if (!!values.total && !!values.billlines && values.billlines.length > 0)
-              totals = CalculateBillTotal(values);
-            if (totals)
+            if (!!values.total && !!values.billlines && values.billlines.length > 0) {
+              try {
+                totals = CalculateBillTotal(values);
+              } catch (error) {
+                notification.error({
+                  title: t("bills.errors.calculating_totals"),
+                  message: error.message || t("bills.errors.calculating_totals_generic"),
+                  key: "bill_totals_calculation_error"
+                });
+              }
+            }
+
+            if (totals) {
               return (
                 // TODO: Align is not correct
                 // eslint-disable-next-line react/no-unknown-property
@@ -414,7 +444,7 @@ export function BillFormComponent({
                     <Statistic
                       title={t("bills.labels.discrepancy")}
                       styles={{
-                        value: {
+                        content: {
                           color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
                         }
                       }}
@@ -427,6 +457,7 @@ export function BillFormComponent({
                   ) : null}
                 </div>
               );
+            }
             return null;
           }}
         </Form.Item>
@@ -449,6 +480,7 @@ export function BillFormComponent({
           responsibilityCenters={responsibilityCenters}
           disabled={disabled}
           billEdit={billEdit}
+          isAiScan={isAiScan}
         />
       )}
       <Divider titlePlacement="left" style={{ display: billEdit ? "none" : null }}>

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

@@ -15,7 +15,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse }) {
+export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse,isAiScan }) {
   const {
     treatments: { Simple_Inventory }
   } = useTreatmentsWithConfig({
@@ -50,6 +50,7 @@ export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableI
         loadOutstandingReturns={loadOutstandingReturns}
         loadInventory={loadInventory}
         preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}
+        isAiScan={isAiScan}
       />
       {!billEdit && <BillCmdReturnsTableComponent form={form} returnLoading={returnLoading} returnData={returnData} />}
       {Simple_Inventory.treatment === "on" && (

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

@@ -1,17 +1,19 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
+import { useRef } from "react";
 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 { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 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";
+import ConfidenceDisplay from "./bill-form.lines.confidence.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -28,10 +30,12 @@ export function BillEnterModalLinesComponent({
   discount,
   form,
   responsibilityCenters,
-  billEdit
+  billEdit,
+  isAiScan
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
+  const firstFieldRefs = useRef({});
 
   const CONTROL_HEIGHT = 32;
 
@@ -137,6 +141,29 @@ export function BillEnterModalLinesComponent({
 
   const columns = (remove) => {
     return [
+      ...(isAiScan
+        ? [
+            {
+              title: t("billlines.fields.confidence"),
+              dataIndex: "confidence",
+              editable: true,
+              width: "5rem",
+              formItemProps: (field) => ({
+                key: `${field.index}confidence`,
+                name: [field.name, "confidence"],
+                label: t("billlines.fields.confidence")
+              }),
+              formInput: (record) => {
+                const rowValue = getFieldValue(["billlines", record.name]);
+                return (
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    <ConfidenceDisplay rowValue={rowValue} />
+                  </div>
+                );
+              }
+            }
+          ]
+        : []),
       {
         title: t("billlines.fields.jobline"),
         dataIndex: "joblineid",
@@ -155,6 +182,9 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
+            ref={(el) => {
+              firstFieldRefs.current[index] = el;
+            }}
             disabled={disabled}
             options={lineData}
             style={{
@@ -205,8 +235,9 @@ export function BillEnterModalLinesComponent({
           label: t("billlines.fields.line_desc"),
           rules: [{ required: true }]
         }),
-        formInput: () => <Input.TextArea disabled={disabled} autoSize />
+        formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
       },
+
       {
         title: t("billlines.fields.quantity"),
         dataIndex: "quantity",
@@ -234,7 +265,7 @@ export function BillEnterModalLinesComponent({
             })
           ]
         }),
-        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} />
+        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} tabIndex={0} />
       },
       {
         title: t("billlines.fields.actual_price"),
@@ -245,12 +276,22 @@ export function BillEnterModalLinesComponent({
           key: `${field.name}actual_price`,
           name: [field.name, "actual_price"],
           label: t("billlines.fields.actual_price"),
-          rules: [{ required: true }]
+          rules: [
+            { required: true },
+            {
+              validator: (_, value) => {
+                return Math.abs(parseFloat(value)) < 0.01 ? Promise.reject() : Promise.resolve();
+              },
+              warningOnly: true
+            }
+          ],
+          hasFeedback: true
         }),
         formInput: (record, index) => (
           <CurrencyInput
             min={0}
             disabled={disabled}
+            tabIndex={0}
             // NOTE: Autofill should only happen on forward Tab out of Retail
             onKeyDown={(e) => {
               if (e.key === "Tab" && !e.shiftKey) autofillActualCost(index);
@@ -328,8 +369,9 @@ export function BillEnterModalLinesComponent({
                     min={0}
                     disabled={disabled}
                     controls={false}
+                    tabIndex={0}
                     style={{ width: "100%", height: CONTROL_HEIGHT }}
-                    // NOTE: No auto-fill on focus/blur; only triggered from Retail on Tab
+                    onFocus={() => autofillActualCost(index)}
                   />
                 </Form.Item>
               </div>
@@ -392,11 +434,17 @@ export function BillEnterModalLinesComponent({
           rules: [{ required: true }]
         }),
         formInput: () => (
-          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
-            {bodyshopHasDmsKey(bodyshop)
-              ? CiecaSelect(true, false)
-              : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
-          </Select>
+          <Select 
+            showSearch 
+            style={{ minWidth: "3rem" }} 
+            disabled={disabled}
+            tabIndex={0}
+            options={
+              bodyshopHasDmsKey(bodyshop)
+                ? CiecaSelect(true, false)
+                : responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
+            }
+          />
         )
       },
       ...(billEdit
@@ -412,13 +460,11 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "location"]
               }),
               formInput: () => (
-                <Select disabled={disabled}>
-                  {bodyshop.md_parts_locations.map((loc, idx) => (
-                    <Select.Option key={idx} value={loc}>
-                      {loc}
-                    </Select.Option>
-                  ))}
-                </Select>
+                <Select 
+                  disabled={disabled}
+                  tabIndex={0}
+                  options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
+                />
               )
             }
           ]),
@@ -432,7 +478,7 @@ export function BillEnterModalLinesComponent({
           key: `${field.name}deductedfromlbr`,
           name: [field.name, "deductedfromlbr"]
         }),
-        formInput: () => <Switch disabled={disabled} />,
+        formInput: () => <Switch disabled={disabled} tabIndex={0} />,
         additional: (record, index) => (
           <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
@@ -459,22 +505,10 @@ export function BillEnterModalLinesComponent({
                       rules={[{ required: true }]}
                       name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                     >
-                      <Select allowClear>
-                        <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-                        <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-                        <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-                        <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-                        <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-                        <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-                        <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-                        <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-                        <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-                        <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-                        <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-                        <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-                        <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-                        <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-                      </Select>
+                      <Select 
+                        allowClear
+                        options={CiecaSelect(false, true)}
+                      />
                     </Form.Item>
 
                     {Enhanced_Payroll.treatment === "on" ? (
@@ -517,9 +551,13 @@ export function BillEnterModalLinesComponent({
             formItemProps: (field) => ({
               key: `${field.name}fedtax`,
               valuePropName: "checked",
-              name: [field.name, "applicable_taxes", "federal"]
+              name: [field.name, "applicable_taxes", "federal"],
+              initialValue: InstanceRenderManager({
+                imex: true,
+                rome: false
+              })
             }),
-            formInput: () => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} tabIndex={0} />
           }
         ]
       }),
@@ -534,7 +572,7 @@ export function BillEnterModalLinesComponent({
           valuePropName: "checked",
           name: [field.name, "applicable_taxes", "state"]
         }),
-        formInput: () => <Switch disabled={disabled} />
+        formInput: () => <Switch disabled={disabled} tabIndex={0} />
       },
 
       ...InstanceRenderManager({
@@ -550,7 +588,7 @@ export function BillEnterModalLinesComponent({
               valuePropName: "checked",
               name: [field.name, "applicable_taxes", "local"]
             }),
-            formInput: () => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} tabIndex={0} />
           }
         ]
       }),
@@ -570,6 +608,7 @@ export function BillEnterModalLinesComponent({
                     icon={<DeleteFilled />}
                     disabled={disabled || invLen > 0}
                     onClick={() => remove(record.name)}
+                    tabIndex={0}
                   />
 
                   {Simple_Inventory.treatment === "on" && (
@@ -641,12 +680,19 @@ export function BillEnterModalLinesComponent({
                 <Button
                   disabled={disabled}
                   onClick={() => {
+                    const newIndex = fields.length;
                     add(
                       InstanceRenderManager({
                         imex: { applicable_taxes: { federal: true } },
                         rome: { applicable_taxes: { federal: false } }
                       })
                     );
+                    setTimeout(() => {
+                      const firstField = firstFieldRefs.current[newIndex];
+                      if (firstField?.focus) {
+                        firstField.focus();
+                      }
+                    }, 100);
                   }}
                   style={{ width: "100%" }}
                 >

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

@@ -0,0 +1,87 @@
+import { Progress, Space, Tag, Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
+const parseConfidence = (confidenceStr) => {
+  if (!confidenceStr || typeof confidenceStr !== "string") return null;
+
+  const match = confidenceStr.match(/T([\d.]+)\s*-\s*O([\d.]+)\s*-\s*J([\d.]+)/);
+  if (!match) return null;
+
+  return {
+    total: parseFloat(match[1]),
+    ocr: parseFloat(match[2]),
+    jobMatch: parseFloat(match[3])
+  };
+};
+
+const getConfidenceColor = (value) => {
+  if (value >= 80) return "green";
+  if (value >= 60) return "orange";
+  if (value >= 40) return "gold";
+  return "red";
+};
+
+const ConfidenceDisplay = ({ rowValue: { confidence, actual_price, actual_cost } }) => {
+  const { t } = useTranslation();
+  const parsed = parseConfidence(confidence);
+  const parsed_actual_price = parseFloat(actual_price);
+  const parsed_actual_cost = parseFloat(actual_cost);
+  if (!parsed) {
+    return <span style={{ color: "#959595", fontSize: "0.85em" }}>N/A</span>;
+  }
+
+  const { total, ocr, jobMatch } = parsed;
+  const color = getConfidenceColor(total);
+
+  return (
+    <Tooltip
+      title={
+        <div style={{ padding: "4px 0" }}>
+          <div style={{ marginBottom: 8, fontWeight: 600 }}>{t("bills.labels.ai.confidence.breakdown")}</div>
+          <div style={{ marginBottom: 4 }}>
+            <strong>{t("bills.labels.ai.confidence.overall")}:</strong> {total.toFixed(1)}%
+            <Progress
+              percent={total}
+              size="small"
+              strokeColor={getConfidenceColor(total)}
+              showInfo={false}
+              style={{ marginTop: 2 }}
+            />
+          </div>
+          <div style={{ marginBottom: 4 }}>
+            <strong>{t("bills.labels.ai.confidence.ocr")}:</strong> {ocr.toFixed(1)}%
+            <Progress
+              percent={ocr}
+              size="small"
+              strokeColor={getConfidenceColor(ocr)}
+              showInfo={false}
+              style={{ marginTop: 2 }}
+            />
+          </div>
+          <div>
+            <strong>{t("bills.labels.ai.confidence.match")}:</strong> {jobMatch.toFixed(1)}%
+            <Progress
+              percent={jobMatch}
+              size="small"
+              strokeColor={getConfidenceColor(jobMatch)}
+              showInfo={false}
+              style={{ marginTop: 2 }}
+            />
+          </div>
+        </div>
+      }
+    >
+      <Space size="small">
+        {!parsed_actual_cost || !parsed_actual_price || parsed_actual_cost === 0 || parsed_actual_price === 0 ? (
+          <Tag color="red" style={{ margin: 0, cursor: "help", userSelect: "none" }}>
+            {t("bills.labels.ai.confidence.missing_data")}
+          </Tag>
+        ) : null}
+        <Tag color={color} style={{ margin: 0, cursor: "help", userSelect: "none" }}>
+          {total.toFixed(0)}%
+        </Tag>
+      </Space>
+    </Tooltip>
+  );
+};
+
+export default ConfidenceDisplay;

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

@@ -1,5 +1,5 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Checkbox, Input, Space, Table } from "antd";
+import { Button, Card, Checkbox, Input, Space } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaTasks } from "react-icons/fa";
@@ -18,6 +18,7 @@ import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -237,12 +238,13 @@ export function BillsListTableComponent({
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={billsQuery.loading}
         scroll={{
           x: true // y: "50rem"
         }}
         columns={columns}
+        mobileColumnKeys={["vendorname", "invoice_number", "date", "total", "actions"]}
         rowKey="id"
         dataSource={hasBillsAccess ? filteredBills : []}
         onChange={handleTableChange}

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

@@ -3,7 +3,8 @@ import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { useQuery } from "@apollo/client/react";
 import queryString from "query-string";
 import { useLocation, useNavigate } from "react-router-dom";
-import { Input, Table } from "antd";
+import { Input } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
@@ -79,7 +80,7 @@ export default function BillsVendorsList() {
     : (data && data.vendors) || [];
 
   return (
-    <Table
+    <ResponsiveTable
       loading={loading}
       title={() => {
         return (
@@ -91,6 +92,7 @@ export default function BillsVendorsList() {
       dataSource={dataSource}
       pagination={{ placement: "top" }}
       columns={columns}
+      mobileColumnKeys={["name", "cost_center", "city"]}
       rowKey="id"
       onChange={handleTableChange}
       rowSelection={{

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

@@ -57,7 +57,6 @@ const CardPaymentModalComponent = ({
     QUERY_RO_AND_OWNER_BY_JOB_PKS,
     {
       fetchPolicy: "network-only",
-      notifyOnNetworkStatusChange: true
     }
   );
 

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

@@ -47,7 +47,6 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const [getConversations, { loading, data, refetch, called }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    notifyOnNetworkStatusChange: true,
     ...(pollInterval > 0 ? { pollInterval } : {})
   });
 

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

@@ -19,13 +19,12 @@ export default function ChatTagRoComponent({ roOptions, loading, handleSearch, h
           placeholder={t("general.labels.search")}
           onSelect={handleInsertTag}
           notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
-        >
-          {roOptions.map((item, idx) => (
-            <Select.Option key={item.id || idx}>
-              {` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`}
-            </Select.Option>
-          ))}
-        </Select>
+          options={roOptions.map((item, idx) => ({
+            key: item.id || idx,
+            value: item.id || idx,
+            label: ` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`
+          }))}
+        />
       </div>
       {loading ? <LoadingOutlined /> : null}
 

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

@@ -1,4 +1,5 @@
-import { Card, Input, Table } from "antd";
+import { Card, Input } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -103,10 +104,11 @@ export default function ContractsCarsComponent({ loading, data, selectedCarId, h
         />
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["status", "fleetnumber", "readiness", "year"]}
         rowKey="id"
         dataSource={filteredData}
         onChange={handleTableChange}

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

@@ -309,13 +309,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
             }
           ]}
         >
-          <Select>
-            {bodyshop.md_ins_cos.map((s) => (
-              <Select.Option key={s.name} value={s.name}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            options={bodyshop.md_ins_cos.map((s) => ({
+              key: s.name,
+              value: s.name,
+              label: s.name
+            }))}
+          />
         </Form.Item>
         <Form.Item
           name={"class"}
@@ -327,13 +327,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
             }
           ]}
         >
-          <Select>
-            {bodyshop.md_classes.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+          <Select
+            options={bodyshop.md_classes.map((s) => ({
+              key: s,
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
         <Form.Item
           label={t("contracts.labels.convertform.applycleanupcharge")}

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

@@ -1,4 +1,5 @@
-import { Card, Input, Table } from "antd";
+import { Card, Input } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -127,10 +128,11 @@ export default function ContractsJobsComponent({ loading, data, selectedJob, han
         />
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ placement: "top", defaultPageSize: pageLimit, defaultCurrent: defaultCurrent }}
         columns={columns}
+        mobileColumnKeys={["ro_number", "owner", "status", "vehicle", "plate_no"]}
         rowKey="id"
         dataSource={filteredData}
         onChange={handleTableChange}

client/src/components/contract-status-select/contract-status-select.component.jsx

@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 const ContractStatusComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
@@ -15,11 +13,17 @@ const ContractStatusComponent = ({ value, onChange, ref }) => {
   }, [value, option, onChange]);
 
   return (
-    <Select ref={ref} 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>
-    </Select>
+    <Select
+      ref={ref}
+      value={option}
+      style={{ width: 100 }}
+      onChange={setOption}
+      options={[
+        { value: "contracts.status.new", label: t("contracts.status.new") },
+        { value: "contracts.status.out", label: t("contracts.status.out") },
+        { value: "contracts.status.returned", label: t("contracts.status.out") }
+      ]}
+    />
   );
 };
 

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

@@ -1,5 +1,6 @@
 import { useLazyQuery } from "@apollo/client/react";
-import { Button, Form, Modal, Table } from "antd";
+import { Button, Form, Modal } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -64,7 +65,7 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
           {t("general.labels.search")}
         </Button>
         {error && <AlertComponent type="error" title={JSON.stringify(error)} />}
-        <Table
+        <ResponsiveTable
           loading={loading}
           columns={[
             {
@@ -124,6 +125,7 @@ export function ContractsFindModalContainer({ contractFinderModal, toggleModalVi
               render: (text, record) => <DateTimeFormatter>{record.actualreturn}</DateTimeFormatter>
             }
           ]}
+          mobileColumnKeys={["agreementnumber", "job.ro_number", "driver_ln", "status"]}
           rowKey="id"
           dataSource={data?.cccontracts}
         />

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Input, Space, Typography } from "antd";
 import queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,6 +14,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { pageLimit } from "../../utils/config";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -170,13 +171,14 @@ export function ContractsList({ bodyshop, loading, contracts, refetch, total, se
       }
     >
       <ContractsFindModalContainer />
-      <Table
+      <ResponsiveTable
         loading={loading}
         scroll={{
           x: "50%" //y: "40rem"
         }}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
         columns={columns}
+        mobileColumnKeys={["agreementnumber", "driver_ln", "status", "scheduledreturn"]}
         rowKey="id"
         dataSource={contracts}
         onChange={handleTableChange}

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

@@ -1,4 +1,5 @@
-import { Card, Table } from "antd";
+import { Card } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import queryString from "query-string";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -73,10 +74,11 @@ export default function CourtesyCarContractListComponent({ contracts, totalContr
 
   return (
     <Card title={t("menus.header.courtesycars-contracts")}>
-      <Table
+      <ResponsiveTable
         scroll={{ x: true }}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: totalContracts }}
         columns={columns}
+        mobileColumnKeys={["agreementnumber", "driver_ln", "status", "job.ro_number"]}
         rowKey="id"
         dataSource={contracts}
         onChange={handleTableChange}

client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx

@@ -2,8 +2,6 @@ import { Select } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
@@ -23,10 +21,11 @@ const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
         width: 100
       }}
       onChange={setOption}
-    >
-      <Option value="courtesycars.readiness.ready">{t("courtesycars.readiness.ready")}</Option>
-      <Option value="courtesycars.readiness.notready">{t("courtesycars.readiness.notready")}</Option>
-    </Select>
+      options={[
+        { value: "courtesycars.readiness.ready", label: t("courtesycars.readiness.ready") },
+        { value: "courtesycars.readiness.notready", label: t("courtesycars.readiness.notready") }
+      ]}
+    />
   );
 };
 export default CourtesyCarReadinessComponent;

client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx

@@ -2,8 +2,6 @@ import { useEffect, useState } from "react";
 import { Select } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
-
 const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
@@ -22,14 +20,15 @@ const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
         width: 100
       }}
       onChange={setOption}
-    >
-      <Option value="courtesycars.status.in">{t("courtesycars.status.in")}</Option>
-      <Option value="courtesycars.status.inservice">{t("courtesycars.status.inservice")}</Option>
-      <Option value="courtesycars.status.out">{t("courtesycars.status.out")}</Option>
-      <Option value="courtesycars.status.sold">{t("courtesycars.status.sold")}</Option>
-      <Option value="courtesycars.status.leasereturn">{t("courtesycars.status.leasereturn")}</Option>
-      <Option value="courtesycars.status.unavailable">{t("courtesycars.status.unavailable")}</Option>
-    </Select>
+      options={[
+        { value: "courtesycars.status.in", label: t("courtesycars.status.in") },
+        { value: "courtesycars.status.inservice", label: t("courtesycars.status.inservice") },
+        { value: "courtesycars.status.out", label: t("courtesycars.status.out") },
+        { value: "courtesycars.status.sold", label: t("courtesycars.status.sold") },
+        { value: "courtesycars.status.leasereturn", label: t("courtesycars.status.leasereturn") },
+        { value: "courtesycars.status.unavailable", label: t("courtesycars.status.unavailable") }
+      ]}
+    />
   );
 };
 export default CourtesyCarStatusComponent;

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

@@ -1,5 +1,6 @@
 import { SyncOutlined, WarningFilled } from "@ant-design/icons";
-import { Button, Card, Dropdown, Input, Space, Table, Tooltip } from "antd";
+import { Button, Card, Dropdown, Input, Space, Tooltip } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import dayjs from "../../utils/day";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -275,10 +276,11 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["status", "fleetnumber", "vin", "readiness"]}
         rowKey="id"
         dataSource={tableData}
         onChange={handleTableChange}

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

@@ -1,5 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Table } from "antd";
+import { Button, Card } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -86,10 +87,11 @@ export default function CsiResponseListPaginated({ refetch, loading, responses,
 
   return (
     <Card extra={<Button onClick={() => refetch()} icon={<SyncOutlined />} />}>
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(state.page || 1), total: total }}
         columns={columns}
+        mobileColumnKeys={["ro_number", "owner_name", "completedon"]}
         rowKey="id"
         dataSource={responses}
         onChange={handleTableChange}

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

@@ -1,4 +1,5 @@
-import { Card, Table, Tag } from "antd";
+import { Card, Tag } from "antd";
+import ResponsiveTable from "../../responsive-table/responsive-table.component";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -182,10 +183,11 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
             </div>
           </Card>
           <Card style={{ marginTop: "5px" }} type="inner" title={t("job_lifecycle.titles.top_durations")}>
-            <Table
+            <ResponsiveTable
               size="small"
               pagination={false}
               columns={columns}
+              mobileColumnKeys={["status", "humanReadable", "averageHumanReadable", "statusCount"]}
               rowKey={(record) => record.status}
               dataSource={lifecycleData.summations.sort((a, b) => b.value - a.value).slice(0, 3)}
             />

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

@@ -1,4 +1,4 @@
-import { Card, Input, Space, Table, Typography } from "antd";
+import { Card, Input, Space, Typography } from "antd";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
 import Dinero from "dinero.js";
 import DashboardRefreshRequired from "../refresh-required.component";
 import { pageLimit } from "../../../utils/config";
+import ResponsiveTable from "../../responsive-table/responsive-table.component.jsx";
 
 export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
   const { t } = useTranslation();
@@ -103,31 +104,33 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
       {...cardProps}
     >
       <LoadingSkeleton loading={loading}>
-        <div style={{ height: "100%" }}>
-          <Table
+        <div style={{ height: "100%", minHeight: 0, width: "100%", overflow: "auto" }}>
+          <ResponsiveTable
+            size="small"
+            tableLayout="fixed"
             onChange={handleTableChange}
             pagination={{ placement: "top", defaultPageSize: pageLimit }}
             columns={columns}
-            scroll={{ x: true, y: "calc(100% - 4em)" }}
+            scroll={{ x: "max-content" }}
             rowKey="id"
-            style={{ height: "100%" }}
+            style={{ width: "100%" }}
             dataSource={filteredData}
             summary={() => (
-              <Table.Summary.Row>
-                <Table.Summary.Cell>
+              <ResponsiveTable.Summary.Row>
+                <ResponsiveTable.Summary.Cell>
                   <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
-                </Table.Summary.Cell>
-                <Table.Summary.Cell>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell>
                   {Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalSales).toFormat()}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell>
                   {Dinero(costingData?.allSummaryData && costingData.allSummaryData.totalCost).toFormat()}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell>
                   {Dinero(costingData?.allSummaryData && costingData.allSummaryData.gpdollars).toFormat()}
-                </Table.Summary.Cell>
-                <Table.Summary.Cell></Table.Summary.Cell>
-              </Table.Summary.Row>
+                </ResponsiveTable.Summary.Cell>
+                <ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
+              </ResponsiveTable.Summary.Row>
             )}
           />
         </div>

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

@@ -363,6 +363,7 @@ export default function DashboardScheduledDeliveryToday({ data, ...cardProps })
           onChange={handleTableChange}
           pagination={false}
           columns={isTvModeScheduledDelivery ? tvColumns : columns}
+          // mobileColumnKeys={["ro_number", "owner", "status", "vehicle"]}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}

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

@@ -368,6 +368,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
           onChange={handleTableChange}
           pagination={false}
           columns={isTvModeScheduledIn ? tvColumns : columns}
+          mobileColumnKeys={["ro_number", "owner", "vehicle", "start"]}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}

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

@@ -363,6 +363,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
           onChange={handleTableChange}
           pagination={false}
           columns={isTvModeScheduledOut ? tvColumns : columns}
+          // mobileColumnKeys={["ro_number", "owner", "status", "vehicle"]}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}

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" } }}
+          styles={{ content: { color: aboveTargetHours ? "green" : "red" } }}
         />
       </Space>
     </Card>

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

@@ -1,5 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Form, Input, Table } from "antd";
+import { Button, Card, Form, Input } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -78,7 +79,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       dataIndex: "Lines",
       key: "Lines",
       render: (text, record) => (
-        <table style={{ tableLayout: "auto", width: "100%" }}>
+        <ResponsiveTable style={{ tableLayout: "auto", width: "100%" }}>
           <tr>
             <th>{t("bills.fields.invoice_number")}</th>
             <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
@@ -91,7 +92,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
               <td>{l.Amount}</td>
             </tr>
           ))}
-        </table>
+        </ResponsiveTable>
       )
     }
   ];
@@ -115,9 +116,10 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
         />
       }
     >
-      <Table
+      <ResponsiveTable
         pagination={{ placement: "top", defaultPageSize: pageLimit }}
         columns={columns}
+        mobileColumnKeys={["status", "reference", "Lines"]}
         rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
         dataSource={allocationsSummary}
         locale={{ emptyText: t("dms.labels.refreshallocations") }}

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

@@ -1,4 +1,5 @@
-import { Alert, Button, Card, Table, Typography } from "antd";
+import { Alert, Button, Card, Typography } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { SyncOutlined } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -116,9 +117,10 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
         <Alert type="warning" title={t("jobs.labels.dms.disablebillwip")} />
       )}
 
-      <Table
+      <ResponsiveTable
         pagination={{ placement: "top", defaultPageSize: pageLimit }}
         columns={columns}
+        mobileColumnKeys={["center", "sale", "cost", "sale_dms_acctnumber"]}
         rowKey="center"
         dataSource={allocationsSummary}
         locale={{ emptyText: t("dms.labels.refreshallocations") }}
@@ -135,15 +137,17 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, on
           const hasNonZeroSaleTotal = totals.totalSale.getAmount() !== 0;
 
           return (
-            <Table.Summary.Row>
-              <Table.Summary.Cell>
+            <ResponsiveTable.Summary.Row>
+              <ResponsiveTable.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.Row>
+              </ResponsiveTable.Summary.Cell>
+              <ResponsiveTable.Summary.Cell>
+                {hasNonZeroSaleTotal ? totals.totalSale.toFormat() : null}
+              </ResponsiveTable.Summary.Cell>
+              <ResponsiveTable.Summary.Cell />
+              <ResponsiveTable.Summary.Cell />
+              <ResponsiveTable.Summary.Cell />
+            </ResponsiveTable.Summary.Row>
           );
         }}
       />

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

@@ -1,4 +1,5 @@
-import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
+import { Alert, Button, Card, Tabs, Typography } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { SyncOutlined } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -261,9 +262,10 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
             into taxable / non-taxable segments.
           </Typography.Paragraph>
 
-          <Table
+          <ResponsiveTable
             pagination={false}
             columns={roggColumns}
+            mobileColumnKeys={["jobNo", "opCode", "breakOut", "itemType"]}
             rowKey="key"
             dataSource={roggRows}
             locale={{ emptyText: "No ROGOG lines would be generated." }}
@@ -286,19 +288,23 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
               const hasCostTotal = Number(roggTotals.totalDlrCost) !== 0;
 
               return (
-                <Table.Summary.Row>
-                  <Table.Summary.Cell index={0}>
+                <ResponsiveTable.Summary.Row>
+                  <ResponsiveTable.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>
+                  </ResponsiveTable.Summary.Cell>
+                  <ResponsiveTable.Summary.Cell index={1} />
+                  <ResponsiveTable.Summary.Cell index={2} />
+                  <ResponsiveTable.Summary.Cell index={3} />
+                  <ResponsiveTable.Summary.Cell index={4} />
+                  <ResponsiveTable.Summary.Cell index={5} />
+                  <ResponsiveTable.Summary.Cell index={6} />
+                  <ResponsiveTable.Summary.Cell index={7}>
+                    {hasCustTotal ? roggTotals.totalCustPrice : null}
+                  </ResponsiveTable.Summary.Cell>
+                  <ResponsiveTable.Summary.Cell index={8}>
+                    {hasCostTotal ? roggTotals.totalDlrCost : null}
+                  </ResponsiveTable.Summary.Cell>
+                </ResponsiveTable.Summary.Row>
               );
             }}
           />
@@ -313,9 +319,10 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
           <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
+          <ResponsiveTable
             pagination={false}
             columns={rolaborColumns}
+            mobileColumnKeys={["jobNo", "opCode", "breakOut", "itemType"]}
             rowKey="key"
             dataSource={rolaborRows}
             locale={{ emptyText: "No ROLABOR lines would be generated." }}

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

@@ -1,5 +1,6 @@
 import { useLazyQuery } from "@apollo/client/react";
-import { Button, Input, Modal, Table } from "antd";
+import { Button, Input, Modal } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -60,7 +61,7 @@ export function DmsCdkVehicles({ form, job }) {
         okButtonProps={{ disabled: !selectedModel }}
       >
         {error && <AlertComponent title={error.message} type="error" />}
-        <Table
+        <ResponsiveTable
           title={() => (
             <Input.Search
               onSearch={(val) => callSearch({ variables: { search: val } })}
@@ -69,6 +70,7 @@ export function DmsCdkVehicles({ form, job }) {
             />
           )}
           columns={columns}
+          mobileColumnKeys={["make", "model", "makecode", "modelcode"]}
           loading={loading}
           rowKey="id"
           dataSource={data ? data.search_dms_vehicles : []}

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

@@ -1,4 +1,5 @@
-import { Button, Checkbox, Col, Table } from "antd";
+import { Button, Checkbox, Col } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -72,7 +73,7 @@ export default function CDKCustomerSelector({ bodyshop, socket }) {
 
   return (
     <Col span={24}>
-      <Table
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -86,6 +87,7 @@ export default function CDKCustomerSelector({ bodyshop, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["id", "vinOwner", "name1", "address"]}
         rowKey={rowKey}
         dataSource={customerList}
         rowSelection={{

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

@@ -23,13 +23,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsCustomerSelector)
  * @constructor
  */
 export function DmsCustomerSelector(props) {
-  const { bodyshop, jobid, socket, rrOptions = {} } = props;
+  const { bodyshop, jobid, job, socket, rrOptions = {} } = props;
 
   // Centralized "mode" (provider + transport)
   const mode = props.mode;
 
   // Stable base props for children
-  const base = useMemo(() => ({ bodyshop, jobid, socket }), [bodyshop, jobid, socket]);
+  const base = useMemo(() => ({ bodyshop, jobid, job, socket }), [bodyshop, jobid, job, socket]);
 
   switch (mode) {
     case DMS_MAP.reynolds: {

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

@@ -1,4 +1,5 @@
-import { Button, Checkbox, Col, Table } from "antd";
+import { Button, Checkbox, Col } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -78,7 +79,7 @@ export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
 
   return (
     <Col span={24}>
-      <Table
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -92,6 +93,7 @@ export default function FortellisCustomerSelector({ bodyshop, jobid, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["id", "vinOwner", "firstName", "address"]}
         rowKey={(r) => r.customerId}
         dataSource={customerList}
         rowSelection={{

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

@@ -1,4 +1,5 @@
-import { Button, Col, Table } from "antd";
+import { Button, Col } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -66,7 +67,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
 
   return (
     <Col span={24}>
-      <Table
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -80,6 +81,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["ContactId", "name1", "address"]}
         rowKey={(r) => r.ContactId}
         dataSource={customerList}
         rowSelection={{

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

@@ -1,4 +1,5 @@
-import { Alert, Button, Checkbox, Col, message, Space, Table } from "antd";
+import { Alert, Button, Checkbox, message, Modal, Space } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -47,6 +48,7 @@ const rrAddressToString = (addr) => {
 export default function RRCustomerSelector({
   jobid,
   socket,
+  job,
   rrOpenRoLimit = false,
   onRrOpenRoFinished,
   rrValidationPending = false,
@@ -59,15 +61,26 @@ export default function RRCustomerSelector({
   const [refreshing, setRefreshing] = useState(false);
 
   // Show dialog automatically when validation is pending
+  // BUT: skip this for early RO flow (job already has dms_id)
   useEffect(() => {
-    if (rrValidationPending) setOpen(true);
-  }, [rrValidationPending]);
+    if (rrValidationPending && !job?.dms_id) {
+      setOpen(true);
+    }
+  }, [rrValidationPending, job?.dms_id]);
 
   // Listen for RR customer selection list
   useEffect(() => {
     if (!socket) return;
     const handleRrSelectCustomer = (list) => {
       const normalized = normalizeRrList(list);
+
+      // If list is empty, it means early RO exists and customer selection should be skipped
+      // Don't open the modal in this case
+      if (normalized.length === 0) {
+        setRefreshing(false);
+        return;
+      }
+
       setOpen(true);
       setCustomerList(normalized);
       const firstOwner = normalized.find((r) => r.vinOwner)?.custNo;
@@ -127,6 +140,10 @@ export default function RRCustomerSelector({
     });
   };
 
+  const handleClose = () => {
+    setOpen(false);
+  };
+
   const refreshRrSearch = () => {
     setRefreshing(true);
     const to = setTimeout(() => setRefreshing(false), 12000);
@@ -141,8 +158,6 @@ export default function RRCustomerSelector({
     socket.emit("rr-export-job", { jobId: jobid });
   };
 
-  if (!open) return null;
-
   const columns = [
     { title: t("jobs.fields.dms.id"), dataIndex: "custNo", key: "custNo" },
     {
@@ -169,9 +184,40 @@ export default function RRCustomerSelector({
     return !rrOwnerSet.has(String(record.custNo));
   };
 
+  // For early RO flow: show validation banner even when modal is closed
+  if (!open) {
+    if (rrValidationPending && job?.dms_id) {
+      return (
+        <div style={{ marginBottom: 16 }}>
+          <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>
+      );
+    }
+    return null;
+  }
+
   return (
-    <Col span={24}>
-      <Table
+    <Modal open={open} onCancel={handleClose} footer={null} width={800} title={t("dms.selectCustomer")}>
+      <ResponsiveTable
         title={() => (
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
             {/* Open RO limit banner */}
@@ -196,8 +242,8 @@ export default function RRCustomerSelector({
               />
             )}
 
-            {/* Validation step banner */}
-            {rrValidationPending && (
+            {/* Validation step banner - only show for NON-early RO flow (legacy) */}
+            {rrValidationPending && !job?.dms_id && (
               <Alert
                 type="info"
                 showIcon
@@ -253,6 +299,7 @@ export default function RRCustomerSelector({
         )}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["custNo", "vinOwner", "name", "address"]}
         rowKey={(r) => r.custNo}
         dataSource={customerList}
         rowSelection={{
@@ -262,6 +309,6 @@ export default function RRCustomerSelector({
           getCheckboxProps: (record) => ({ disabled: rrDisableRow(record) })
         }}
       />
-    </Col>
+    </Modal>
   );
 }

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

@@ -4,6 +4,7 @@ import dayjs from "../../utils/day";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectDarkMode } from "../../redux/application/application.selectors.js";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   isDarkMode: selectDarkMode
@@ -19,25 +20,35 @@ export function DmsLogEvents({
   detailsNonce,
   isDarkMode,
   colorizeJson = false,
-  showDetails = true
+  showDetails = true,
+  allowXmlPayload = true
 }) {
+  const { t } = useTranslation();
   const [openSet, setOpenSet] = useState(() => new Set());
+  const [copiedKey, setCopiedKey] = useState(null);
 
   // 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";
+    let style = document.getElementById("json-highlight-styles");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "json-highlight-styles";
+      document.head.appendChild(style);
+    }
     style.textContent = `
       .json-key { color: #fa8c16; }
       .json-string { color: #52c41a; }
       .json-number { color: #722ed1; }
       .json-boolean { color: #1890ff; }
       .json-null { color: #faad14; }
+      .xml-tag { color: #1677ff; }
+      .xml-attr { color: #d46b08; }
+      .xml-value { color: #389e0d; }
+      .xml-decl { color: #7c3aed; }
+      .xml-comment { color: #8c8c8c; }
     `;
-    document.head.appendChild(style);
   }, [colorizeJson]);
 
   // Trim openSet if logs shrink
@@ -65,11 +76,18 @@ export function DmsLogEvents({
         // Only treat meta as "present" when we are allowed to show details
         const hasMeta = !isEmpty(meta) && showDetails;
         const isOpen = hasMeta && openSet.has(idx);
+        const xml = hasMeta && allowXmlPayload ? extractXmlFromMeta(meta) : { request: null, response: null };
+        const hasRequestXml = !!xml.request;
+        const hasResponseXml = !!xml.response;
+        const copyPayload = hasMeta ? getCopyPayload(meta) : null;
+        const copyPayloadKey = `copy-${idx}`;
+        const copyReqKey = `copy-req-${idx}`;
+        const copyResKey = `copy-res-${idx}`;
 
         return {
           key: idx,
           color: logLevelColor(level),
-          children: (
+          content: (
             <Space orientation="vertical" size={4} style={{ display: "flex" }}>
               {/* Row 1: summary + inline "Details" toggle */}
               <Space wrap align="start">
@@ -92,10 +110,42 @@ export function DmsLogEvents({
                           return next;
                         })
                       }
-                      style={{ cursor: "pointer", userSelect: "none" }}
+                      style={{ cursor: "pointer", userSelect: "none", fontSize: 11 }}
                     >
-                      {isOpen ? "Hide details" : "Details"}
+                      {isOpen ? t("dms.labels.hide_details") : t("dms.labels.details")}
                     </a>
+                    <Divider orientation="vertical" />
+                    <a
+                      role="button"
+                      onClick={() => handleCopyAction(copyPayloadKey, copyPayload, setCopiedKey)}
+                      style={{ cursor: "pointer", userSelect: "none", fontSize: 11 }}
+                    >
+                      {copiedKey === copyPayloadKey ? t("dms.labels.copied") : t("dms.labels.copy")}
+                    </a>
+                    {hasRequestXml && (
+                      <>
+                        <Divider orientation="vertical" />
+                        <a
+                          role="button"
+                          onClick={() => handleCopyAction(copyReqKey, xml.request, setCopiedKey)}
+                          style={{ cursor: "pointer", userSelect: "none", fontSize: 11 }}
+                        >
+                          {copiedKey === copyReqKey ? t("dms.labels.copied") : t("dms.labels.copy_request")}
+                        </a>
+                      </>
+                    )}
+                    {hasResponseXml && (
+                      <>
+                        <Divider orientation="vertical" />
+                        <a
+                          role="button"
+                          onClick={() => handleCopyAction(copyResKey, xml.response, setCopiedKey)}
+                          style={{ cursor: "pointer", userSelect: "none", fontSize: 11 }}
+                        >
+                          {copiedKey === copyResKey ? t("dms.labels.copied") : t("dms.labels.copy_response")}
+                        </a>
+                      </>
+                    )}
                   </>
                 )}
               </Space>
@@ -103,17 +153,33 @@ export function DmsLogEvents({
               {/* Row 2: details body (only when open) */}
               {hasMeta && isOpen && (
                 <div style={{ marginLeft: 6 }}>
-                  <JsonBlock isDarkMode={isDarkMode} data={meta} colorize={colorizeJson} />
+                  <JsonBlock isDarkMode={isDarkMode} data={removeXmlFromMeta(meta)} colorize={colorizeJson} />
+                  {hasRequestXml && (
+                    <XmlBlock
+                      isDarkMode={isDarkMode}
+                      title={t("dms.labels.request_xml")}
+                      xmlText={xml.request}
+                      colorize={colorizeJson}
+                    />
+                  )}
+                  {hasResponseXml && (
+                    <XmlBlock
+                      isDarkMode={isDarkMode}
+                      title={t("dms.labels.response_xml")}
+                      xmlText={xml.response}
+                      colorize={colorizeJson}
+                    />
+                  )}
                 </div>
               )}
             </Space>
           )
         };
       }),
-    [logs, openSet, colorizeJson, isDarkMode, showDetails]
+    [logs, openSet, colorizeJson, copiedKey, isDarkMode, showDetails, allowXmlPayload, t]
   );
 
-  return <Timeline pending reverse items={items} />;
+  return <Timeline reverse items={items} />;
 }
 
 /**
@@ -179,6 +245,121 @@ const safeStringify = (obj, spaces = 2) => {
   }
 };
 
+/**
+ * Get request/response XML from various Reynolds log meta shapes.
+ * @param meta
+ * @returns {{request: string|null, response: string|null}}
+ */
+const extractXmlFromMeta = (meta) => {
+  const request =
+    firstString(meta?.requestXml) ||
+    firstString(meta?.xml?.request) ||
+    firstString(meta?.response?.xml?.request) ||
+    firstString(meta?.response?.requestXml);
+
+  const response =
+    firstString(meta?.responseXml) || firstString(meta?.xml?.response) || firstString(meta?.response?.xml?.response);
+
+  return { request, response };
+};
+
+/**
+ * Return the value to copy when clicking the "Copy" action.
+ * @param meta
+ * @returns {*}
+ */
+const getCopyPayload = (meta) => {
+  if (meta?.payload != null) return meta.payload;
+  return meta;
+};
+
+/**
+ * Remove bulky XML fields from object shown in JSON block (XML is rendered separately).
+ * @param meta
+ * @returns {*}
+ */
+const removeXmlFromMeta = (meta) => {
+  if (meta == null || typeof meta !== "object") return meta;
+  const cloned = safeClone(meta);
+  if (cloned == null || typeof cloned !== "object") return meta;
+
+  if (typeof cloned.requestXml === "string") delete cloned.requestXml;
+  if (typeof cloned.responseXml === "string") delete cloned.responseXml;
+
+  if (cloned.xml && typeof cloned.xml === "object") {
+    if (typeof cloned.xml.request === "string") delete cloned.xml.request;
+    if (typeof cloned.xml.response === "string") delete cloned.xml.response;
+    if (isEmpty(cloned.xml)) delete cloned.xml;
+  }
+
+  if (cloned.response?.xml && typeof cloned.response.xml === "object") {
+    if (typeof cloned.response.xml.request === "string") delete cloned.response.xml.request;
+    if (typeof cloned.response.xml.response === "string") delete cloned.response.xml.response;
+    if (isEmpty(cloned.response.xml)) delete cloned.response.xml;
+  }
+
+  return cloned;
+};
+
+/**
+ * Safe deep clone for plain JSON structures.
+ * @param value
+ * @returns {*}
+ */
+const safeClone = (value) => {
+  try {
+    return JSON.parse(JSON.stringify(value));
+  } catch {
+    return value;
+  }
+};
+
+/**
+ * First non-empty string helper.
+ * @param value
+ * @returns {string|null}
+ */
+const firstString = (value) => {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  return trimmed ? trimmed : null;
+};
+
+/**
+ * Copy arbitrary text/object to clipboard.
+ * @param key
+ * @param value
+ * @param setCopied
+ * @returns {Promise<void>}
+ */
+const handleCopyAction = async (key, value, setCopied) => {
+  const text = typeof value === "string" ? value : safeStringify(value, 2);
+  if (!text) return;
+  const copied = await copyTextToClipboard(text);
+  if (!copied) return;
+  setCopied(key);
+  setTimeout(() => {
+    setCopied((prev) => (prev === key ? null : prev));
+  }, 1200);
+};
+
+/**
+ * Clipboard helper (modern async Clipboard API).
+ * @param text
+ * @returns {Promise<boolean>}
+ */
+const copyTextToClipboard = async (text) => {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * JSON display block with optional syntax highlighting.
  * @param data
@@ -210,6 +391,105 @@ const JsonBlock = ({ data, colorize, isDarkMode }) => {
   return <pre style={preStyle}>{jsonText}</pre>;
 };
 
+/**
+ * XML display block with normalized indentation.
+ * @param title
+ * @param xmlText
+ * @param isDarkMode
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const XmlBlock = ({ title, xmlText, isDarkMode, colorize = false }) => {
+  const base = {
+    margin: "8px 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",
+    whiteSpace: "pre"
+  };
+
+  return (
+    <div style={{ marginTop: 6 }}>
+      <div style={{ fontSize: 11, fontWeight: 600 }}>{title}</div>
+      {colorize ? (
+        <pre style={base} dangerouslySetInnerHTML={{ __html: highlightXml(formatXml(xmlText)) }} />
+      ) : (
+        <pre style={base}>{formatXml(xmlText)}</pre>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Basic XML pretty-printer.
+ * @param xml
+ * @returns {string}
+ */
+const formatXml = (xml) => {
+  if (typeof xml !== "string") return "";
+  const normalized = xml.replace(/\r\n/g, "\n").replace(/>\s*</g, ">\n<").trim();
+  const lines = normalized.split("\n");
+  let indent = 0;
+  const out = [];
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line) continue;
+
+    if (/^<\/[^>]+>/.test(line)) indent = Math.max(indent - 1, 0);
+    out.push(`${"  ".repeat(indent)}${line}`);
+
+    const opens = (line.match(/<[^/!?][^>]*>/g) || []).length;
+    const closes = (line.match(/<\/[^>]+>/g) || []).length;
+    const selfClosing = (line.match(/<[^>]+\/>/g) || []).length;
+    const declaration = /^<\?xml/.test(line) ? 1 : 0;
+
+    indent += opens - closes - selfClosing - declaration;
+    if (indent < 0) indent = 0;
+  }
+
+  return out.join("\n");
+};
+
+/**
+ * Syntax highlight pretty-printed XML text for HTML display.
+ * @param xmlText
+ * @returns {string}
+ */
+const highlightXml = (xmlText) => {
+  const esc = String(xmlText || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+  const lines = esc.split("\n");
+
+  return lines
+    .map((line) => {
+      let out = line;
+
+      out = out.replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="xml-comment">$1</span>');
+      out = out.replace(/(&lt;\?xml[\s\S]*?\?&gt;)/g, '<span class="xml-decl">$1</span>');
+
+      out = out.replace(/(&lt;\/?)([A-Za-z_][\w:.-]*)([\s\S]*?)(\/?&gt;)/g, (_m, open, tag, attrs, close) => {
+        const coloredAttrs = attrs.replace(
+          /([A-Za-z_][\w:.-]*)(=)("[^"]*"|'[^']*'|&quot;[\s\S]*?&quot;|&apos;[\s\S]*?&apos;)/g,
+          '<span class="xml-attr">$1</span>$2<span class="xml-value">$3</span>'
+        );
+        return `${open}<span class="xml-tag">${tag}</span>${coloredAttrs}${close}`;
+      });
+
+      return out;
+    })
+    .join("\n");
+};
+
 /**
  * Syntax highlight JSON text for HTML display.
  * @param jsonText

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

@@ -272,11 +272,19 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                         name={[field.name, "name"]}
                         rules={[{ required: true }]}
                       >
-                        <Select style={{ width: "100%" }} onSelect={(value) => handlePayerSelect(value, index)}>
-                          {bodyshop.cdk_configuration?.payers?.map((payer) => (
-                            <Select.Option key={payer.name}>{payer.name}</Select.Option>
-                          ))}
-                        </Select>
+                        <Select
+                          showSearch={{
+                            optionFilterProp: "label",
+                            filterOption: (input, option) => option.label.toLowerCase().includes(input.toLowerCase())
+                          }}
+                          style={{ width: "100%" }}
+                          onSelect={(value) => handlePayerSelect(value, index)}
+                          options={bodyshop.cdk_configuration?.payers?.map((payer) => ({
+                            key: payer.name,
+                            value: payer.name,
+                            label: payer.name
+                          }))}
+                        />
                       </Form.Item>
                     </Col>
 
@@ -404,7 +412,7 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                 <Typography.Title>=</Typography.Title>
                 <Statistic
                   title={t("jobs.labels.dms.notallocated")}
-                  styles={{ value: { color: discrep.getAmount() === 0 ? "green" : "red" } }}
+                  styles={{ content: { color: discrep.getAmount() === 0 ? "green" : "red" } }}
                   value={discrep.toFormat()}
                 />
                 <Button disabled={disablePost} htmlType="submit">

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

@@ -208,8 +208,18 @@ export default function RRPostForm({
     });
   };
 
+  // Check if early RO was created (job has all early RO fields)
+  const hasEarlyRO = !!(job?.dms_id && job?.dms_customer_id && job?.dms_advisor_id);
+
   return (
     <Card title={t("jobs.labels.dms.postingform")}>
+      {hasEarlyRO && (
+        <Typography.Paragraph type="success" strong style={{ marginBottom: 16 }}>
+          ✅ {t("jobs.labels.dms.earlyro.created")} {job.dms_id}
+          <br />
+          <Typography.Text type="secondary">{t("jobs.labels.dms.earlyro.willupdate")}</Typography.Text>
+        </Typography.Paragraph>
+      )}
       <Form
         form={form}
         layout="vertical"
@@ -218,96 +228,96 @@ export default function RRPostForm({
         initialValues={initialValues}
       >
         <Row gutter={[16, 12]} align="bottom">
-          {/* Advisor + inline Refresh */}
-          <Col xs={24} sm={24} md={12} lg={8}>
-            <Form.Item label={t("jobs.fields.dms.advisor")} required>
-              <Space.Compact block>
-                <Form.Item
-                  name="advisorNo"
-                  noStyle
-                  rules={[{ required: true, message: t("general.validation.required") }]}
-                >
-                  <Select
-                    style={{ flex: 1 }}
-                    loading={advLoading}
-                    allowClear
-                    placeholder={t("general.actions.select", "Select...")}
-                    popupMatchSelectWidth
-                    options={advisors
-                      .map((a) => {
-                        const value = getAdvisorNumber(a);
-                        if (value == null) return null;
-                        return { value: String(value), label: getAdvisorLabel(a) || String(value) };
-                      })
-                      .filter(Boolean)}
-                    notFoundContent={advLoading ? t("general.labels.loading") : t("general.labels.none")}
-                  />
-                </Form.Item>
-                <Tooltip title={t("general.actions.refresh")}>
-                  <Button
-                    aria-label={t("general.actions.refresh")}
-                    icon={<ReloadOutlined />}
-                    onClick={() => fetchRrAdvisors(true)}
-                    loading={advLoading}
-                  />
-                </Tooltip>
-              </Space.Compact>
-            </Form.Item>
-          </Col>
-
-          {/* RR OpCode (prefix / base / suffix) */}
-          <Col xs={24} sm={12} md={12} lg={8}>
-            <Form.Item
-              required
-              label={
-                <Space size="small" align="center">
-                  {t("jobs.fields.dms.rr_opcode", "RR OpCode")}
-                  {isCustomOpCode && (
+          {/* Advisor + inline Refresh - Only show if no early RO */}
+          {!hasEarlyRO && (
+            <Col xs={24} sm={24} md={12} lg={8}>
+              <Form.Item label={t("jobs.fields.dms.advisor")} required>
+                <Space.Compact block>
+                  <Form.Item
+                    name="advisorNo"
+                    noStyle
+                    rules={[{ required: true, message: t("general.validation.required") }]}
+                  >
+                    <Select
+                      style={{ flex: 1 }}
+                      loading={advLoading}
+                      allowClear
+                      placeholder={t("general.actions.select", "Select...")}
+                      popupMatchSelectWidth
+                      options={advisors
+                        .map((a) => {
+                          const value = getAdvisorNumber(a);
+                          if (value == null) return null;
+                          return { value: String(value), label: getAdvisorLabel(a) || String(value) };
+                        })
+                        .filter(Boolean)}
+                      notFoundContent={advLoading ? t("general.labels.loading") : t("general.labels.none")}
+                    />
+                  </Form.Item>
+                  <Tooltip title={t("general.actions.refresh")}>
                     <Button
-                      type="link"
-                      size="small"
-                      icon={<RollbackOutlined />}
-                      onClick={handleResetOpCode}
-                      style={{ padding: 0 }}
-                    >
-                      {t("jobs.fields.dms.rr_opcode_reset", "Reset")}
-                    </Button>
-                  )}
-                </Space>
-              }
-            >
-              <Space.Compact block>
-                <Form.Item name="opPrefix" noStyle>
-                  <Input
-                    allowClear
-                    maxLength={4}
-                    style={{ width: "30%" }}
-                    placeholder={t("jobs.fields.dms.rr_opcode_prefix", "Prefix")}
-                  />
-                </Form.Item>
-                <Form.Item
-                  name="opBase"
-                  noStyle
-                  rules={[{ required: true, message: t("general.validation.required") }]}
-                >
-                  <Input
-                    allowClear
-                    maxLength={10}
-                    style={{ width: "40%" }}
-                    placeholder={t("jobs.fields.dms.rr_opcode_base", "Base")}
-                  />
-                </Form.Item>
-                <Form.Item name="opSuffix" noStyle>
-                  <Input
-                    allowClear
-                    maxLength={4}
-                    style={{ width: "30%" }}
-                    placeholder={t("jobs.fields.dms.rr_opcode_suffix", "Suffix")}
-                  />
-                </Form.Item>
-              </Space.Compact>
-            </Form.Item>
-          </Col>
+                      aria-label={t("general.actions.refresh")}
+                      icon={<ReloadOutlined />}
+                      onClick={() => fetchRrAdvisors(true)}
+                      loading={advLoading}
+                    />
+                  </Tooltip>
+                </Space.Compact>
+              </Form.Item>
+            </Col>
+          )}
+
+          {/* RR OpCode (prefix / base / suffix) - Only show if no early RO */}
+          {!hasEarlyRO && (
+            <Col xs={24} sm={12} md={12} lg={8}>
+              <Form.Item
+                required
+                label={
+                  <Space size="small" align="center">
+                    {t("jobs.fields.dms.rr_opcode", "RR OpCode")}
+                    {isCustomOpCode && (
+                      <Button
+                        type="link"
+                        size="small"
+                        icon={<RollbackOutlined />}
+                        onClick={handleResetOpCode}
+                        style={{ padding: 0 }}
+                      >
+                        {t("jobs.fields.dms.rr_opcode_reset", "Reset")}
+                      </Button>
+                    )}
+                  </Space>
+                }
+              >
+                <Space.Compact block>
+                  <Form.Item name="opPrefix" noStyle>
+                    <Input
+                      allowClear
+                      maxLength={4}
+                      style={{ width: "30%" }}
+                      placeholder={t("jobs.fields.dms.rr_opcode_prefix", "Prefix")}
+                    />
+                  </Form.Item>
+                  <Form.Item name="opBase" noStyle rules={[{ required: true }]}>
+                    <Input
+                      allowClear
+                      maxLength={10}
+                      style={{ width: "40%" }}
+                      placeholder={t("jobs.fields.dms.rr_opcode_base", "Base")}
+                    />
+                  </Form.Item>
+                  <Form.Item name="opSuffix" noStyle>
+                    <Input
+                      allowClear
+                      maxLength={4}
+                      style={{ width: "30%" }}
+                      placeholder={t("jobs.fields.dms.rr_opcode_suffix", "Suffix")}
+                    />
+                  </Form.Item>
+                </Space.Compact>
+              </Form.Item>
+            </Col>
+          )}
 
           <Col xs={12} sm={8} md={6} lg={4}>
             <Form.Item name="kmin" label={t("jobs.fields.kmin")} initialValue={job?.kmin} rules={[{ required: true }]}>
@@ -355,13 +365,14 @@ export default function RRPostForm({
         {/* Validation  */}
         <Form.Item shouldUpdate>
           {() => {
-            const advisorOk = !!form.getFieldValue("advisorNo");
+            // When early RO exists, advisor is already set, so we don't need to validate it
+            const advisorOk = hasEarlyRO ? true : !!form.getFieldValue("advisorNo");
             return (
               <Space size="large" wrap align="center">
                 <Statistic title={t("jobs.labels.subtotal")} value={totals.totalSale.toFormat()} />
                 <Typography.Title>=</Typography.Title>
-                <Button disabled={!advisorOk} htmlType="submit">
-                  {t("jobs.actions.dms.post")}
+                <Button disabled={!advisorOk} htmlType="submit" type={hasEarlyRO ? "default" : "primary"}>
+                  {hasEarlyRO ? t("jobs.actions.dms.update_ro") : t("jobs.actions.dms.post")}
                 </Button>
               </Space>
             );

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

@@ -0,0 +1,375 @@
+import { ReloadOutlined } from "@ant-design/icons";
+import { Alert, Button, Form, Input, InputNumber, Modal, Radio, Select, Space, Typography } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
+import { useEffect, useMemo, useState } from "react";
+
+// Simple customer selector table
+function CustomerSelectorTable({ customers, onSelect, isSubmitting }) {
+  const [selectedCustNo, setSelectedCustNo] = useState(null);
+
+  const columns = [
+    {
+      title: "Select",
+      key: "select",
+      width: 80,
+      render: (_, record) => (
+        <Radio checked={selectedCustNo === record.custNo} onChange={() => setSelectedCustNo(record.custNo)} />
+      )
+    },
+    { title: "Customer ID", dataIndex: "custNo", key: "custNo" },
+    { title: "Name", dataIndex: "name", key: "name" },
+    {
+      title: "VIN Owner",
+      key: "vinOwner",
+      render: (_, record) => (record.vinOwner || record.isVehicleOwner ? "Yes" : "No")
+    }
+  ];
+
+  return (
+    <div>
+      <ResponsiveTable
+        columns={columns}
+        mobileColumnKeys={["name", "select", "custNo", "vinOwner"]}
+        dataSource={customers}
+        rowKey="custNo"
+        pagination={false}
+        size="small"
+      />
+      <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
+        <Button
+          type="primary"
+          onClick={() => onSelect(selectedCustNo, false)}
+          disabled={!selectedCustNo || isSubmitting}
+          loading={isSubmitting}
+        >
+          Use Selected Customer
+        </Button>
+        <Button onClick={() => onSelect(null, true)} disabled={isSubmitting} loading={isSubmitting}>
+          Create New Customer
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * RR Early RO Creation Form
+ * Used from convert button or admin page to create minimal RO before full export
+ * @param bodyshop
+ * @param socket
+ * @param job
+ * @param onSuccess - callback when RO is created successfully
+ * @param onCancel - callback to close modal
+ * @param showCancelButton - whether to show cancel button
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function RREarlyROForm({ bodyshop, socket, job, onSuccess, onCancel, showCancelButton = true }) {
+  const [form] = Form.useForm();
+
+  // Advisors
+  const [advisors, setAdvisors] = useState([]);
+  const [advLoading, setAdvLoading] = useState(false);
+
+  // Customer selection
+  const [customerCandidates, setCustomerCandidates] = useState([]);
+  const [showCustomerSelector, setShowCustomerSelector] = useState(false);
+
+  // Loading and success states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [earlyRoCreated, setEarlyRoCreated] = useState(!!job?.dms_id);
+  const [createdRoNumber, setCreatedRoNumber] = useState(job?.dms_id || null);
+
+  // Derive default OpCode parts from bodyshop config (matching dms.container.jsx logic)
+  const initialValues = useMemo(() => {
+    const cfg = bodyshop?.rr_configuration || {};
+    const defaults =
+      cfg.opCodeDefault ||
+      cfg.op_code_default ||
+      cfg.op_codes?.default ||
+      cfg.defaults?.opCode ||
+      cfg.defaults ||
+      cfg.default ||
+      {};
+
+    const prefix = defaults.prefix ?? defaults.opCodePrefix ?? "";
+    const base = defaults.base ?? defaults.opCodeBase ?? "";
+    const suffix = defaults.suffix ?? defaults.opCodeSuffix ?? "";
+
+    return {
+      kmin: job?.kmin || 0,
+      opPrefix: prefix,
+      opBase: base,
+      opSuffix: suffix
+    };
+  }, [bodyshop, job]);
+
+  const getAdvisorNumber = (a) => a?.advisorId;
+  const getAdvisorLabel = (a) => `${a?.firstName || ""} ${a?.lastName || ""}`.trim();
+
+  const fetchRrAdvisors = (refresh = false) => {
+    if (!socket) return;
+    setAdvLoading(true);
+
+    const onResult = (payload) => {
+      try {
+        const list = payload?.result ?? payload ?? [];
+        setAdvisors(Array.isArray(list) ? list : []);
+      } finally {
+        setAdvLoading(false);
+        socket.off("rr-get-advisors:result", onResult);
+      }
+    };
+
+    socket.once("rr-get-advisors:result", onResult);
+    socket.emit("rr-get-advisors", { departmentType: "B", refresh }, (ack) => {
+      if (ack?.ok) {
+        const list = ack.result ?? [];
+        setAdvisors(Array.isArray(list) ? list : []);
+      } else if (ack) {
+        console.error("Error fetching RR Advisors:", ack.error);
+      }
+      setAdvLoading(false);
+      socket.off("rr-get-advisors:result", onResult);
+    });
+  };
+
+  useEffect(() => {
+    fetchRrAdvisors(false);
+  }, [bodyshop?.id, socket]);
+
+  const handleStartEarlyRO = async (values) => {
+    if (!socket) {
+      console.error("Socket not available");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    const txEnvelope = {
+      advisorNo: values.advisorNo,
+      story: values.story || "",
+      kmin: values.kmin || job?.kmin || 0,
+      opPrefix: values.opPrefix || "",
+      opBase: values.opBase || "",
+      opSuffix: values.opSuffix || ""
+    };
+
+    // Emit the early RO creation request
+    socket.emit("rr-create-early-ro", {
+      jobId: job.id,
+      txEnvelope
+    });
+
+    // Wait for customer selection
+    const customerListener = (candidates) => {
+      console.log("Received rr-select-customer event with candidates:", candidates);
+      setCustomerCandidates(candidates || []);
+      setShowCustomerSelector(true);
+      setIsSubmitting(false);
+      socket.off("rr-select-customer", customerListener);
+    };
+
+    socket.once("rr-select-customer", customerListener);
+
+    // Handle failures
+    const failureListener = (payload) => {
+      if (payload?.jobId === job.id) {
+        console.error("Early RO creation failed:", payload.error);
+        alert(`Failed to create early RO: ${payload.error}`);
+        setIsSubmitting(false);
+        setShowCustomerSelector(false);
+        socket.off("export-failed", failureListener);
+        socket.off("rr-select-customer", customerListener);
+      }
+    };
+
+    socket.once("export-failed", failureListener);
+  };
+
+  const handleCustomerSelected = (custNo, createNew = false) => {
+    if (!socket) return;
+
+    console.log("handleCustomerSelected called:", { custNo, createNew, custNoType: typeof custNo });
+
+    setIsSubmitting(true);
+    setShowCustomerSelector(false);
+
+    const payload = {
+      jobId: job.id,
+      custNo: createNew ? null : custNo,
+      create: createNew
+    };
+
+    console.log("Emitting rr-early-customer-selected:", payload);
+
+    // Emit customer selection
+    socket.emit("rr-early-customer-selected", payload, (ack) => {
+      console.log("Received ack from rr-early-customer-selected:", ack);
+      setIsSubmitting(false);
+
+      if (ack?.ok) {
+        const roNumber = ack.dmsRoNo || ack.outsdRoNo;
+        setEarlyRoCreated(true);
+        setCreatedRoNumber(roNumber);
+        onSuccess?.({ roNumber, ...ack });
+      } else {
+        alert(`Failed to create early RO: ${ack?.error || "Unknown error"}`);
+      }
+    });
+
+    // Also listen for socket events
+    const successListener = (payload) => {
+      if (payload?.jobId === job.id) {
+        const roNumber = payload.dmsRoNo || payload.outsdRoNo;
+        console.log("Early RO created:", roNumber);
+        socket.off("rr-early-ro-created", successListener);
+        socket.off("export-failed", failureListener);
+      }
+    };
+
+    const failureListener = (payload) => {
+      if (payload?.jobId === job.id) {
+        console.error("Early RO creation failed:", payload.error);
+        setIsSubmitting(false);
+        setEarlyRoCreated(false);
+        socket.off("rr-early-ro-created", successListener);
+        socket.off("export-failed", failureListener);
+      }
+    };
+
+    socket.once("rr-early-ro-created", successListener);
+    socket.once("export-failed", failureListener);
+  };
+
+  // If early RO already created, show success message
+  if (earlyRoCreated) {
+    return (
+      <Alert
+        title="Early Reynolds RO Created"
+        description={`RO Number: ${createdRoNumber || "N/A"} - You can now convert the job.`}
+        type="success"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+    );
+  }
+
+  // If showing customer selector, render modal
+  if (showCustomerSelector) {
+    return (
+      <>
+        <Typography.Title level={5}>Create Early Reynolds RO</Typography.Title>
+        <Typography.Paragraph type="secondary">Waiting for customer selection...</Typography.Paragraph>
+
+        <Modal
+          title="Select Customer for Early RO"
+          open={true}
+          width={800}
+          footer={null}
+          onCancel={() => {
+            setShowCustomerSelector(false);
+            setIsSubmitting(false);
+          }}
+        >
+          <CustomerSelectorTable
+            customers={customerCandidates}
+            onSelect={handleCustomerSelected}
+            isSubmitting={isSubmitting}
+          />
+        </Modal>
+      </>
+    );
+  }
+
+  // Handle manual submit (since we can't nest forms)
+  const handleManualSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      handleStartEarlyRO(values);
+    } catch (error) {
+      console.error("Validation failed:", error);
+    }
+  };
+
+  // Show the form
+  return (
+    <div style={{ marginTop: 16 }}>
+      <Typography.Title level={5}>Create Early Reynolds RO</Typography.Title>
+      <Typography.Paragraph type="secondary" style={{ fontSize: "12px" }}>
+        Complete this section to create a minimal RO in Reynolds before converting the job.
+      </Typography.Paragraph>
+
+      <Form form={form} layout="vertical" component={false} initialValues={initialValues}>
+        <Form.Item name="advisorNo" label="Advisor" rules={[{ required: true, message: "Please select an advisor" }]}>
+          <Select
+            showSearch={{
+              optionFilterProp: "children",
+              filterOption: (input, option) => (option?.children?.toLowerCase() ?? "").includes(input.toLowerCase())
+            }}
+            loading={advLoading}
+            placeholder="Select advisor..."
+            popupRender={(menu) => (
+              <>
+                {menu}
+                <Button
+                  type="link"
+                  icon={<ReloadOutlined />}
+                  onClick={() => fetchRrAdvisors(true)}
+                  style={{ width: "100%", textAlign: "left" }}
+                >
+                  Refresh Advisors
+                </Button>
+              </>
+            )}
+          >
+            {advisors.map((adv) => (
+              <Select.Option key={getAdvisorNumber(adv)} value={getAdvisorNumber(adv)}>
+                {getAdvisorLabel(adv)}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          name="kmin"
+          label="Mileage In"
+          rules={[
+            { required: true, message: "Please enter initial mileage" },
+            { type: "number", min: 1, message: "Mileage must be greater than 0" }
+          ]}
+        >
+          <InputNumber min={1} style={{ width: "100%" }} />
+        </Form.Item>
+
+        {/* RR OpCode (prefix / base / suffix) */}
+        <Form.Item required label="RR OpCode">
+          <Space.Compact block>
+            <Form.Item name="opPrefix" noStyle>
+              <Input allowClear maxLength={4} style={{ width: "30%" }} placeholder="Prefix" />
+            </Form.Item>
+            <Form.Item name="opBase" noStyle rules={[{ required: true, message: "Base Required" }]}>
+              <Input allowClear maxLength={10} style={{ width: "40%" }} placeholder="Base" />
+            </Form.Item>
+            <Form.Item name="opSuffix" noStyle>
+              <Input allowClear maxLength={4} style={{ width: "30%" }} placeholder="Suffix" />
+            </Form.Item>
+          </Space.Compact>
+        </Form.Item>
+
+        <Form.Item name="story" label="Comments / Story (Optional)">
+          <Input.TextArea rows={2} maxLength={240} showCount placeholder="Enter comments or story..." />
+        </Form.Item>
+
+        <div style={{ marginTop: 16 }}>
+          <Space>
+            <Button type="primary" onClick={handleManualSubmit} loading={isSubmitting} disabled={advLoading}>
+              Create Early RO
+            </Button>
+            {showCancelButton && <Button onClick={onCancel}>Cancel</Button>}
+          </Space>
+        </div>
+      </Form>
+    </div>
+  );
+}

client/src/components/dms-post-form/rr-early-ro-modal.jsx

@@ -0,0 +1,33 @@
+import { Modal } from "antd";
+import RREarlyROForm from "./rr-early-ro-form";
+
+/**
+ * Modal wrapper for RR Early RO Creation Form
+ * @param open - boolean to control modal visibility
+ * @param onClose - callback when modal is closed
+ * @param onSuccess - callback when RO is created successfully
+ * @param bodyshop - bodyshop object
+ * @param socket - socket.io connection
+ * @param job - job object
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function RREarlyROModal({ open, onClose, onSuccess, bodyshop, socket, job }) {
+  const handleSuccess = (result) => {
+    onSuccess?.(result);
+    onClose?.();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={700}
+      destroyOnHidden
+      title="Create Reynolds Repair Order"
+    >
+      <RREarlyROForm bodyshop={bodyshop} socket={socket} job={job} onSuccess={handleSuccess} onCancel={onClose} />
+    </Modal>
+  );
+}

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

@@ -86,11 +86,13 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
           }
         ]}
       >
-        <Select>
-          <Select.Option key={currentUser.email}>{currentUser.email}</Select.Option>
-          <Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
-          {bodyshop.md_from_emails && bodyshop.md_from_emails.map((e) => <Select.Option key={e}>{e}</Select.Option>)}
-        </Select>
+        <Select
+          options={[
+            { key: currentUser.email, value: currentUser.email, label: currentUser.email },
+            { key: bodyshop.email, value: bodyshop.email, label: bodyshop.email },
+            ...(bodyshop.md_from_emails ? bodyshop.md_from_emails.map((e) => ({ key: e, value: e, label: e })) : [])
+          ]}
+        />
       </Form.Item>
       <Form.Item
         label={

client/src/components/email-overlay/email-overlay.container.jsx

@@ -163,7 +163,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
     <Modal
       destroyOnHidden
       open={modalVisible}
-      maskClosable={false}
+      mask={{ closable: false }}
       width={"80%"}
       onOk={() => form.submit()}
       title={t("emails.labels.emailpreview")}

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

@@ -1,7 +1,6 @@
 import { Select, Space, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
 //To be used as a form element only.
 
 const EmployeeSearchSelectEmail = ({ options, ...props }) => {
@@ -12,26 +11,24 @@ const EmployeeSearchSelectEmail = ({ options, ...props }) => {
       showSearch={{
         optionFilterProp: "search"
       }}
-      // value={option}
       style={{
         width: 400
       }}
+      options={options?.map((o) => ({
+        key: o.id,
+        value: o.user_email,
+        search: `${o.employee_number}  ${o.first_name} ${o.last_name}`,
+        label: (
+          <Space>
+            {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
+            <Tag color="green">
+              {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
+            </Tag>
+          </Space>
+        )
+      }))}
       {...props}
-    >
-      {options
-        ? options.map((o) => (
-            <Option key={o.id} value={o.user_email} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
-              <Space>
-                {`${o.employee_number}  ${o.first_name} ${o.last_name}`}
-
-                <Tag color="green">
-                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
-                </Tag>
-              </Space>
-            </Option>
-          ))
-        : null}
-    </Select>
+    />
   );
 };
 export default EmployeeSearchSelectEmail;

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

@@ -1,7 +1,6 @@
 import { Select, Space, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 
-const { Option } = Select;
 //To be used as a form element only.
 
 const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
@@ -12,30 +11,29 @@ const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {
       showSearch={{
         optionFilterProp: "search"
       }}
-      // value={option}
       style={{
         width: 400
       }}
+      options={options?.map((o) => ({
+        key: o.id,
+        value: o.id,
+        search: `${o.employee_number}  ${o.first_name} ${o.last_name}`,
+        label: (
+          <Space size="small">
+            {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
+            <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
+              {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
+            </Tag>
+            {showEmail && o.user_email ? (
+              <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
+                {o.user_email}
+              </Tag>
+            ) : null}
+          </Space>
+        )
+      }))}
       {...props}
-    >
-      {options
-        ? options.map((o) => (
-            <Option key={o.id} value={o.id} search={`${o.employee_number}  ${o.first_name} ${o.last_name}`}>
-              <Space size="small">
-                {`${o.employee_number ?? ""}  ${o.first_name} ${o.last_name}`}
-                <Tag color="green" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
-                  {o.flat_rate ? t("timetickets.labels.flat_rate") : t("timetickets.labels.straight_time")}
-                </Tag>
-                {showEmail && o.user_email ? (
-                  <Tag color="blue" style={{ padding: "0.1 0.1rem", marginRight: "1px", marginLeft: "1px" }}>
-                    {o.user_email}
-                  </Tag>
-                ) : null}
-              </Space>
-            </Option>
-          ))
-        : null}
-    </Select>
+    />
   );
 };
 export default EmployeeSearchSelect;

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

@@ -25,6 +25,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
 
   const handleScroll = useCallback(
     (e) => {
+      if (!e.target) return;
       const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
       if (bottom && !hasEverScrolledToBottom) {
         setHasEverScrolledToBottom(true);
@@ -36,7 +37,9 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
   );
 
   useEffect(() => {
-    handleScroll({ target: markdownCardRef.current });
+    if (markdownCardRef.current) {
+      handleScroll({ target: markdownCardRef.current });
+    }
   }, [handleScroll]);
 
   const handleChange = useCallback(() => {

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

@@ -39,11 +39,13 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  title={
+                  message={t("general.labels.validationerror")}
+                  description={
                     <div>
                       <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                     </div>
                   }
+                  showIcon
                 />
               )}
             </Space>

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

@@ -184,22 +184,29 @@ export default function GlobalSearchOs() {
   return (
     <AutoComplete
       options={data}
-      onSearch={handleSearch}
+      defaultActiveFirstOption
       onKeyDown={(e) => {
         if (e.key !== "Enter") return;
         const firstUrlForSearch = data?.[0]?.options?.[0]?.label?.props?.to;
         if (!firstUrlForSearch) return;
         navigate(firstUrlForSearch);
       }}
-      defaultActiveFirstOption
-      onClear={() => setData([])}
     >
       <Input.Search
+        // className="global-search-autocomplete-fix"
         size="large"
         placeholder={t("general.labels.globalsearch")}
         enterButton
         allowClear
         loading={loading}
+        onChange={(e) => {
+          const value = e.target.value;
+          if (!value) {
+            setData([]);
+          } else {
+            handleSearch(value);
+          }
+        }}
       />
     </AutoComplete>
   );

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

@@ -14,8 +14,11 @@ export default function GlobalSearch() {
   const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
   const navigate = useNavigate();
 
-  const executeSearch = (v) => {
-    if (v && v.variables.search && v.variables.search !== "" && v.variables.search.length >= 3) callSearch(v);
+  const executeSearch = (variables) => {
+    if (variables?.search !== "" && variables?.search?.length >= 3)
+      callSearch({
+        variables
+      });
   };
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
@@ -157,7 +160,6 @@ export default function GlobalSearch() {
   return (
     <AutoComplete
       options={options}
-      onSearch={handleSearch}
       defaultActiveFirstOption
       onKeyDown={(e) => {
         if (e.key !== "Enter") return;
@@ -167,11 +169,13 @@ export default function GlobalSearch() {
       }}
     >
       <Input.Search
+        // className="global-search-autocomplete-fix"
         size="large"
         placeholder={t("general.labels.globalsearch")}
         enterButton
         allowClear
         loading={loading}
+        onChange={(e) => handleSearch(e.target.value)}
       />
     </AutoComplete>
   );

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

@@ -1,5 +1,5 @@
 import { EditFilled, FileAddFilled, SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table, Typography } from "antd";
+import { Button, Card, Input, Space, Typography } from "antd";
 import queryString from "query-string";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InventoryBillRo from "../inventory-bill-ro/inventory-bill-ro.component";
 import InventoryLineDelete from "../inventory-line-delete/inventory-line-delete.component";
 import { pageLimit } from "../../utils/config";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
@@ -185,10 +186,11 @@ export function JobsList({ refetch, loading, jobs, total, setInventoryUpsertCont
         </Space>
       }
     >
-      <Table
+      <ResponsiveTable
         loading={loading}
         pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: total }}
         columns={columns}
+        mobileColumnKeys={["line_desc", "actual_price", "consumedbyjob", "actions"]}
         rowKey="id"
         dataSource={jobs}
         onChange={handleTableChange}

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -67,16 +67,19 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
     );
   };
 
-  const handleInsSelect = (value, option) => {
-    form.setFieldsValue({
-      addr1: option.obj.name,
-      addr2: option.obj.street1,
-      addr3: option.obj.street2,
-      city: option.obj.city,
-      state: option.obj.state,
-      zip: option.obj.zip,
-      vendorid: null
-    });
+  const handleInsSelect = (value) => {
+    const selectedVendor = bodyshop.md_ins_cos.find(s => s.name === value);
+    if (selectedVendor) {
+      form.setFieldsValue({
+        addr1: selectedVendor.name,
+        addr2: selectedVendor.street1,
+        addr3: selectedVendor.street2,
+        city: selectedVendor.city,
+        state: selectedVendor.state,
+        zip: selectedVendor.zip,
+        vendorid: null
+      });
+    }
   };
 
   const handleVendorSelect = (vendorid) => {
@@ -97,19 +100,19 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
   return (
     <>
       <Button onClick={showModal}>{t("printcenter.jobs.3rdpartypayer")}</Button>
-      <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+      <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel} getContainer={() => document.body}>
         <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
           <Form.Item label={t("bills.fields.vendor")} name="vendorid">
             <VendorSearchSelect options={VendorAutoCompleteData?.vendors} onSelect={handleVendorSelect} />
           </Form.Item>
           <Form.Item label={t("bodyshop.fields.md_ins_co.name")} name="ins_co_id">
-            <Select onSelect={handleInsSelect}>
-              {bodyshop.md_ins_cos.map((s) => (
-                <Select.Option key={s.name} obj={s} value={s.name}>
-                  {s.name}
-                </Select.Option>
-              ))}
-            </Select>
+            <Select
+              onSelect={handleInsSelect}
+              options={bodyshop.md_ins_cos.map((s) => ({
+                value: s.name,
+                label: s.name
+              }))}
+            />
           </Form.Item>
           <LayoutFormRow grow>
             <Form.Item label={t("printcenter.jobs.3rdpartyfields.addr1")} name="addr1">

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

@@ -1,6 +1,7 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Col, Row, Table, Tag } from "antd";
+import { Button, Card, Col, Row, Tag } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -163,12 +164,24 @@ export function JobAuditTrail({ bodyshop, jobId }) {
             />
           }
         >
-          <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
+          <ResponsiveTable
+            loading={loading}
+            columns={columns}
+            mobileColumnKeys={["status", "created", "useremail", "operation"]}
+            rowKey="id"
+            dataSource={data ? data.audit_trail : []}
+          />
         </Card>
       </Col>
       <Col span={24}>
         <Card title={t("jobs.labels.emailaudit")}>
-          <Table loading={loading} columns={emailColumns} rowKey="id" dataSource={data ? data.email_audit_trail : []} />
+          <ResponsiveTable
+            loading={loading}
+            columns={emailColumns}
+            mobileColumnKeys={["status", "created", "useremail", "operation"]}
+            rowKey="id"
+            dataSource={data ? data.email_audit_trail : []}
+          />
         </Card>
       </Col>
     </Row>

client/src/components/job-close-ro-guard/job-close-ro-guard.ppd.jsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import { Alert, Card, Table } from "antd";
+import { Alert, Card } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { t } from "i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -68,7 +69,15 @@ export function JobCloseRGuardPpd({ job, warningCallback }) {
 
   return (
     <Card title={t("jobs.labels.ppdnotexported")}>
-      <Table dataSource={linesWithPPD} columns={columns} pagination={false} rowKey="id" bordered size="small" />
+      <ResponsiveTable
+        dataSource={linesWithPPD}
+        columns={columns}
+        mobileColumnKeys={["line_desc", "ppd", "act_price", "act_price_before_ppc"]}
+        pagination={false}
+        rowKey="id"
+        bordered
+        size="small"
+      />
       {linesWithPPD.length > 0 && (
         <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstanding_ppd")} />
       )}

client/src/components/job-close-ro-guard/job-close-ro-guard.sublet.jsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 
-import { Alert, Card, Table } from "antd";
+import { Alert, Card } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { t } from "i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -62,7 +63,15 @@ export function JobCloseRGuardSublet({ job, warningCallback }) {
 
   return (
     <Card title={t("jobs.labels.subletsnotcompleted")}>
-      <Table dataSource={subletsNotDone} columns={columns} pagination={false} rowKey="id" bordered size="small" />
+      <ResponsiveTable
+        dataSource={subletsNotDone}
+        columns={columns}
+        mobileColumnKeys={["line_desc", "act_price", "part_qty", "notes"]}
+        pagination={false}
+        rowKey="id"
+        bordered
+        size="small"
+      />
       {subletsNotDone.length > 0 && (
         <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstanding_sublets")} />
       )}

client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx

@@ -1,4 +1,5 @@
-import { Input, Space, Table, Typography } from "antd";
+import { Input, Space, Typography } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -65,7 +66,7 @@ export default function JobCostingPartsTable({ data, summaryData }) {
 
   return (
     <div>
-      <Table
+      <ResponsiveTable
         title={() => {
           return (
             <Space wrap>
@@ -87,18 +88,19 @@ export default function JobCostingPartsTable({ data, summaryData }) {
         onChange={handleTableChange}
         pagination={{ placement: "top", defaultPageSize: pageLimit }}
         columns={columns}
+        mobileColumnKeys={["cost_center", "sales", "costs", "gpdollars", "gppercent"]}
         rowKey="id"
         dataSource={filteredData}
         summary={() => (
-          <Table.Summary.Row>
-            <Table.Summary.Cell>
+          <ResponsiveTable.Summary.Row>
+            <ResponsiveTable.Summary.Cell>
               <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
-            </Table.Summary.Cell>
-            <Table.Summary.Cell>{Dinero(summaryData.totalSales).toFormat()}</Table.Summary.Cell>
-            <Table.Summary.Cell>{Dinero(summaryData.totalCost).toFormat()}</Table.Summary.Cell>
-            <Table.Summary.Cell>{Dinero(summaryData.gpdollars).toFormat()}</Table.Summary.Cell>
-            <Table.Summary.Cell></Table.Summary.Cell>
-          </Table.Summary.Row>
+            </ResponsiveTable.Summary.Cell>
+            <ResponsiveTable.Summary.Cell>{Dinero(summaryData.totalSales).toFormat()}</ResponsiveTable.Summary.Cell>
+            <ResponsiveTable.Summary.Cell>{Dinero(summaryData.totalCost).toFormat()}</ResponsiveTable.Summary.Cell>
+            <ResponsiveTable.Summary.Cell>{Dinero(summaryData.gpdollars).toFormat()}</ResponsiveTable.Summary.Cell>
+            <ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
+          </ResponsiveTable.Summary.Row>
         )}
       />
     </div>

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

@@ -58,10 +58,8 @@ const span = {
 export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTrail }) {
   const { scenarioNotificationsOn } = useSocket();
   const [updateJob] = useMutation(UPDATE_JOB);
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -70,7 +68,14 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
     xl: "75%",
     xxl: "75%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;

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

@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useTranslation } from "react-i18next";
 import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
 import PartsStatusPie from "../parts-status-pie/parts-status-pie.component";
@@ -101,7 +101,12 @@ function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
     <div>
       <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
         <PartsStatusPie joblines_status={joblines_status} />
-        <Table rowKey="id" columns={columns} dataSource={filteredJobLines || []} />
+        <ResponsiveTable
+          rowKey="id"
+          columns={columns}
+          mobileColumnKeys={["status", "line_desc", "part_type", "part_qty"]}
+          dataSource={filteredJobLines || []}
+        />
       </CardTemplate>
     </div>
   );

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

@@ -690,6 +690,7 @@ export function JobLinesComponent({
 
       <Table
         columns={columns}
+        // mobileColumnKeys={["status", "line_desc", "actions", "line_no"]}
         rowKey="id"
         loading={loading}
         pagination={false}

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

@@ -1,6 +1,7 @@
 import { useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
-import { Badge, Card, Space, Table, Tag } from "antd";
+import { Badge, Card, Space, Tag } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import axios from "axios";
 import { isEmpty } from "lodash";
 import { useCallback, useEffect, useState } from "react";
@@ -311,12 +312,13 @@ export function JobLifecycleComponent({ bodyshop, job, statuses }) {
                 </>
               }
             >
-              <Table
+              <ResponsiveTable
                 style={{
                   overflow: "auto",
                   width: "100%"
                 }}
                 columns={columns}
+                mobileColumnKeys={["value", "start", "start_readable", "end"]}
                 dataSource={lifecycleData.lifecycle}
                 rowKey="start"
               />

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

@@ -88,17 +88,15 @@ export function JoblineBulkAssign({ setSelectedLines, selectedLines, insertAudit
         >
           <Select
             showSearch={{
-              optionFilterProp: "children",
-              filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              optionFilterProp: "label",
+              filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }}
             style={{ width: 200 }}
-          >
-            {bodyshop.employee_teams.map((team) => (
-              <Select.Option value={team.id} key={team.id} name={team.name}>
-                {team.name}
-              </Select.Option>
-            ))}
-          </Select>
+            options={bodyshop.employee_teams.map((team) => ({
+              value: team.id,
+              label: team.name
+            }))}
+          />
         </Form.Item>
 
         <Space wrap>

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -122,22 +122,26 @@ export function JobLineConvertToLabor({
             }
           ]}
         >
-          <Select allowClear showSearch={{ optionFilterProp: "children" }}>
-            <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-            <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-            <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-            <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-            <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-            <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-            <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-            <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-            <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-            <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-            <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-            <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-            <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-            <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-          </Select>
+          <Select
+            allowClear
+            showSearch
+            options={[
+              { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
+              { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
+              { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
+              { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
+              { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
+              { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
+              { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
+              { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
+              { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
+              { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
+              { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
+              { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
+              { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
+              { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
+            ]}
+          />
         </Form.Item>
 
         <Form.Item shouldUpdate>

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

@@ -115,19 +115,18 @@ export function JobLineDispatchButton({
         >
           <Select
             showSearch={{
-              optionFilterProp: "children",
-              filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              optionFilterProp: "label",
+              filterOption: (input, option) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }}
             style={{ width: 200 }}
-          >
-            {bodyshop.employees
+            options={bodyshop.employees
               .filter((emp) => emp.active)
-              .map((emp) => (
-                <Select.Option value={emp.id} key={emp.id} name={`${emp.first_name} ${emp.last_name}`}>
-                  {`${emp.first_name} ${emp.last_name}`}
-                </Select.Option>
-              ))}
-          </Select>
+              .map((emp) => ({
+                value: emp.id,
+                key: emp.id,
+                label: `${emp.first_name} ${emp.last_name}`
+              }))}
+          />
         </Form.Item>
 
         <Space wrap>

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

@@ -64,13 +64,12 @@ export function JobLineStatusPopup({ bodyshop, jobline, disabled }) {
             onSelect={handleChange}
             onBlur={handleSave}
             onClear={() => handleChange(null)}
-          >
-            {Object.values(bodyshop.md_order_statuses).map((s, idx) => (
-              <Select.Option key={idx} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
+            options={Object.values(bodyshop.md_order_statuses).map((s, idx) => ({
+              key: idx,
+              value: s,
+              label: s
+            }))}
+          />
         </LoadingSpinner>
       </div>
     );

client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx

@@ -75,13 +75,12 @@ export function JoblineTeamAssignment({ bodyshop, jobline, disabled, jobId, inse
             onSelect={handleChange}
             onBlur={handleSave}
             onClear={() => handleChange(null)}
-          >
-            {Object.values(bodyshop.employee_teams).map((s, idx) => (
-              <Select.Option key={idx} value={s.id}>
-                {s.name}
-              </Select.Option>
-            ))}
-          </Select>
+            options={Object.values(bodyshop.employee_teams).map((s) => ({
+              key: s.id,
+              value: s.id,
+              label: s.name
+            }))}
+          />
         </LoadingSpinner>
       </div>
     );

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

@@ -67,22 +67,22 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
-            <Select allowClear>
-              <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
-              <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
-              <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
-              <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
-              <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
-              <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
-              <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
-              <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
-              <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
-              <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
-              <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
-              <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
-              <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
-              <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
-            </Select>
+            <Select allowClear options={[
+              { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
+              { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
+              { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
+              { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
+              { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
+              { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
+              { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
+              { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
+              { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
+              { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
+              { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
+              { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
+              { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
+              { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
+            ]} />
           </Form.Item>
           <Form.Item label={t("joblines.fields.op_code_desc")} name="op_code_desc">
             <Input />
@@ -128,17 +128,17 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
         </LayoutFormRow>
         <LayoutFormRow>
           <Form.Item label={t("joblines.fields.part_type")} name="part_type">
-            <Select allowClear>
-              <Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option>
-              <Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option>
-              <Select.Option value="PAE">{t("joblines.fields.part_types.PAE")}</Select.Option>
-              <Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option>
-              <Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option>
-              <Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option>
-              <Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option>
-              <Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option>
-              <Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option>
-            </Select>
+            <Select allowClear options={[
+              { value: "PAA", label: t("joblines.fields.part_types.PAA") },
+              { value: "PAC", label: t("joblines.fields.part_types.PAC") },
+              { value: "PAE", label: t("joblines.fields.part_types.PAE") },
+              { value: "PAL", label: t("joblines.fields.part_types.PAL") },
+              { value: "PAM", label: t("joblines.fields.part_types.PAM") },
+              { value: "PAN", label: t("joblines.fields.part_types.PAN") },
+              { value: "PAO", label: t("joblines.fields.part_types.PAO") },
+              { value: "PAR", label: t("joblines.fields.part_types.PAR") },
+              { value: "PAS", label: t("joblines.fields.part_types.PAS") }
+            ]} />
           </Form.Item>
           <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
             <Input />

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

@@ -1,29 +1,65 @@
 import { useMemo } from "react";
-import { Tag, Tooltip } from "antd";
+import { Tooltip } from "antd";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = () => ({});
+
+const colorMap = {
+  gray: { bg: "#fafafa", border: "#d9d9d9", text: "#000000" },
+  gold: { bg: "#fffbe6", border: "#ffe58f", text: "#d48806" },
+  red: { bg: "#fff1f0", border: "#ffccc7", text: "#cf1322" },
+  blue: { bg: "#e6f7ff", border: "#91d5ff", text: "#0958d9" },
+  green: { bg: "#f6ffed", border: "#b7eb8f", text: "#389e0d" },
+  orange: { bg: "#fff7e6", border: "#ffd591", text: "#d46b08" }
+};
+
+function CompactTag({ color = "gray", children, tooltip = "" }) {
+  const colors = colorMap[color] || colorMap.gray;
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 2px",
+        fontSize: "12px",
+        lineHeight: "20px",
+        backgroundColor: colors.bg,
+        border: `1px solid ${colors.border}`,
+        borderRadius: "2px",
+        color: colors.text,
+        minWidth: "24px",
+        textAlign: "center"
+      }}
+    >
+      <Tooltip title={tooltip}>{children}</Tooltip>
+    </span>
+  );
+}
 
 export default connect(mapStateToProps, mapDispatchToProps)(JobPartsQueueCount);
 
 export function JobPartsQueueCount({ bodyshop, parts }) {
-  const { t } = useTranslation();
   const partsStatus = useMemo(() => {
     if (!parts) return null;
+
     const statusKeys = ["default_bo", "default_ordered", "default_received", "default_returned"];
+
     return parts.reduce(
       (acc, val) => {
         if (val.part_type === "PAS" || val.part_type === "PASL") return acc;
-        acc.total = acc.total + val.count;
-        acc[val.status] = acc[val.status] + val.count;
+
+        acc.total += val.count;
+
+        // NOTE: if val.status is null, object key becomes "null"
+        acc[val.status] = (acc[val.status] ?? 0) + val.count;
+
         return acc;
       },
       {
@@ -34,45 +70,38 @@ export function JobPartsQueueCount({ bodyshop, parts }) {
     );
   }, [bodyshop, parts]);
 
-  if (!parts) return null;
+  if (!parts || !partsStatus) return null;
+
   return (
     <div
       style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(40px, 1fr))",
-        gap: "8px",
-        width: "100%",
-        justifyItems: "start"
+        display: "inline-flex", // ✅ shrink-wraps, fixes the “extra box” to the right
+        gap: 2,
+        alignItems: "center",
+        whiteSpace: "nowrap"
       }}
     >
-      <Tooltip title="Total">
-        <Tag style={{ minWidth: "40px", textAlign: "center" }}>{partsStatus.total}</Tag>
-      </Tooltip>
-      <Tooltip title={t("dashboard.errors.status_normal")}>
-        <Tag color="gold" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus["null"]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_bo}>
-        <Tag color="red" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_bo]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
-        <Tag color="blue" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_ordered]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_received}>
-        <Tag color="green" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_received]}
-        </Tag>
-      </Tooltip>
-      <Tooltip title={bodyshop.md_order_statuses.default_returned}>
-        <Tag color="orange" style={{ minWidth: "40px", textAlign: "center" }}>
-          {partsStatus[bodyshop.md_order_statuses.default_returned]}
-        </Tag>
-      </Tooltip>
+      <CompactTag tooltip="Total" color="gray">
+        {partsStatus.total}
+      </CompactTag>
+
+      <CompactTag tooltip="No Status" color="gold">
+        {partsStatus["null"]}
+      </CompactTag>
+
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_bo} color="red">
+        {partsStatus[bodyshop.md_order_statuses.default_bo]}
+      </CompactTag>
+
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_ordered} color="blue">
+        {partsStatus[bodyshop.md_order_statuses.default_ordered]}
+      </CompactTag>
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_received} color="green">
+        {partsStatus[bodyshop.md_order_statuses.default_received]}
+      </CompactTag>
+      <CompactTag tooltip={bodyshop.md_order_statuses.default_returned} color="orange">
+        {partsStatus[bodyshop.md_order_statuses.default_returned]}
+      </CompactTag>
     </div>
   );
 }

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

@@ -18,10 +18,17 @@ const mapStateToProps = createStructuredSelector({
  * @param parts
  * @param displayMode
  * @param popoverPlacement
+ * @param countsOnly
  * @returns {JSX.Element}
  * @constructor
  */
-export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popoverPlacement = "top" }) {
+export function JobPartsReceived({
+  bodyshop,
+  parts,
+  displayMode = "full",
+  popoverPlacement = "top",
+  countsOnly = false
+}) {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -61,6 +68,8 @@ export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popove
     [canOpen]
   );
 
+  if (countsOnly) return <JobPartsQueueCount parts={parts} />;
+
   const displayText =
     displayMode === "compact" ? summary.percentLabel : `${summary.percentLabel} (${summary.received}/${summary.total})`;
 
@@ -74,7 +83,7 @@ export function JobPartsReceived({ bodyshop, parts, displayMode = "full", popove
       trigger={["click"]}
       placement={popoverPlacement}
       content={
-        <div onClick={stop} style={{ minWidth: 260 }}>
+        <div onClick={stop}>
           <JobPartsQueueCount parts={parts} />
         </div>
       }
@@ -99,7 +108,8 @@ JobPartsReceived.propTypes = {
   bodyshop: PropTypes.object,
   parts: PropTypes.array,
   displayMode: PropTypes.oneOf(["full", "compact"]),
-  popoverPlacement: PropTypes.string
+  popoverPlacement: PropTypes.string,
+  countsOnly: PropTypes.bool
 };
 
 export default connect(mapStateToProps)(JobPartsReceived);