Merged in release/2026-04-03 (pull request #3177)

IO-3637 DMS ID Production Board Column

.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,23 @@ 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
+/.cursorrules
+/AGENTS.md
+/AI_CONTEXT.md
+/CLAUDE.md
+/COPILOT.md
+/.github/copilot-instructions.md
+/GEMINI.md

_reference/localEmailViewer/README.md

@@ -1,7 +1,62 @@
-This will connect to your dockers local stack session and render the email in HTML.
+This app connects to your Docker LocalStack endpoints and gives you a compact inspector for:
+
+- SES generated emails
+- CloudWatch log groups, streams, and recent events
+- Secrets Manager secrets and values
+- S3 buckets and object previews
+
+```shell
+npm start
+```
+
+Or:
 
 ```shell
 node index.js
 ```
 
-http://localhost:3334
+Open: http://localhost:3334
+
+Features:
+
+- SES email workspace with manual refresh, live refresh, search, HTML/text/raw views,
+  attachment downloads, and new-message highlighting
+- CloudWatch Logs workspace with log group selection, stream filtering, adjustable time window,
+  adjustable event limit, live refresh, in-browser log search, log-level highlighting, wrap toggle,
+  and optional tail-to-newest mode
+- Secrets Manager workspace with live refresh, search, expandable secret metadata, lazy-loaded
+  secret values, masked-by-default secret viewing, and quick copy actions
+- S3 Explorer workspace with bucket selection, prefix filtering, object search, lazy object
+  previews,
+  object key/URI copy actions, and downloads
+- Shared LocalStack service health strip plus a reset action for clearing saved viewer state
+- Compact single-page UI for switching between the local stack tools you use most
+
+Code layout:
+
+- `index.js`: small Express bootstrap and route registration
+- `server/config.js`: LocalStack endpoints, defaults, and AWS client setup
+- `server/localstack-service.js`: SES, Logs, Secrets, and S3 data loading helpers
+- `server/page.js`: server-rendered HTML shell, CSS, and client config payload
+- `public/client-app.js`: browser-side UI state, rendering, refresh logic, and interactions
+
+Optional environment variables:
+
+```shell
+PORT=3334
+SES_VIEWER_ENDPOINT=http://localhost:4566/_aws/ses
+SES_VIEWER_REFRESH_MS=10000
+SES_VIEWER_FETCH_TIMEOUT_MS=5000
+CLOUDWATCH_VIEWER_ENDPOINT=http://localhost:4566
+CLOUDWATCH_VIEWER_REGION=ca-central-1
+CLOUDWATCH_VIEWER_LOG_GROUP=development
+CLOUDWATCH_VIEWER_WINDOW_MS=900000
+CLOUDWATCH_VIEWER_LIMIT=200
+SECRETS_VIEWER_ENDPOINT=http://localhost:4566
+SECRETS_VIEWER_REGION=ca-central-1
+S3_VIEWER_ENDPOINT=http://localhost:4566
+S3_VIEWER_REGION=ca-central-1
+S3_VIEWER_BUCKET=
+S3_VIEWER_PREVIEW_BYTES=262144
+S3_VIEWER_IMAGE_PREVIEW_BYTES=1048576
+```

_reference/localEmailViewer/index.js

@@ -1,96 +1,342 @@
-// index.js
-
 import express from "express";
-import fetch from "node-fetch";
-import { simpleParser } from "mailparser";
+import { readFileSync } from "node:fs";
+import {
+  CLOUDWATCH_DEFAULT_LIMIT,
+  CLOUDWATCH_DEFAULT_WINDOW_MS,
+  CLOUDWATCH_ENDPOINT,
+  CLOUDWATCH_REGION,
+  DEFAULT_REFRESH_MS,
+  PORT,
+  S3_ENDPOINT,
+  S3_REGION,
+  SES_ENDPOINT,
+  SECRETS_ENDPOINT,
+  SECRETS_REGION
+} from "./server/config.js";
+import { getClientConfig, renderHtml } from "./server/page.js";
+import {
+  buildAttachmentDisposition,
+  buildInlineDisposition,
+  clampNumber,
+  findSesMessageById,
+  loadLogEvents,
+  loadLogGroups,
+  loadLogStreams,
+  loadMessageAttachment,
+  loadMessages,
+  loadS3Buckets,
+  loadS3ObjectDownload,
+  loadS3ObjectPreview,
+  loadS3Objects,
+  loadSecretValue,
+  loadSecrets,
+  loadServiceHealthSummary
+} from "./server/localstack-service.js";
 
 const app = express();
-const PORT = 3334;
+const CLIENT_APP_PATH = new URL("./public/client-app.js", import.meta.url);
+const CLIENT_APP_SOURCE = readFileSync(CLIENT_APP_PATH, "utf8");
 
-app.get("/", async (req, res) => {
+app.use((req, res, next) => {
+  res.set("Cache-Control", "no-store");
+  next();
+});
+
+app.get("/", (req, res) => {
+  res.type("html").send(renderHtml());
+});
+
+app.get("/app.js", (req, res) => {
+  res.type("application/javascript").send(`${CLIENT_APP_SOURCE}\n\nclientApp(${JSON.stringify(getClientConfig())});\n`);
+});
+
+app.get("/health", (req, res) => {
+  res.json({
+    ok: true,
+    endpoint: SES_ENDPOINT,
+    endpoints: {
+      ses: SES_ENDPOINT,
+      cloudWatchLogs: CLOUDWATCH_ENDPOINT,
+      secretsManager: SECRETS_ENDPOINT,
+      s3: S3_ENDPOINT
+    },
+    port: PORT,
+    defaultRefreshMs: DEFAULT_REFRESH_MS
+  });
+});
+
+app.get("/api/service-health", async (req, res) => {
   try {
-    const response = await fetch("http://localhost:4566/_aws/ses");
-    if (!response.ok) {
-      throw new Error("Network response was not ok");
-    }
-    const data = await response.json();
-    const messagesHtml = await parseMessages(data.messages);
-    res.send(renderHtml(messagesHtml));
+    res.json(await loadServiceHealthSummary());
   } catch (error) {
-    console.error("Error fetching messages:", error);
-    res.status(500).send("Error fetching messages");
+    console.error("Error fetching service health:", error);
+    res.status(502).json({
+      error: "Unable to fetch LocalStack service health",
+      details: error.message
+    });
   }
 });
 
-async function parseMessages(messages) {
-  const parsedMessages = await Promise.all(
-    messages.map(async (message, index) => {
-      try {
-        const parsed = await simpleParser(message.RawData);
-        return `
-          <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
-            <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
-              <div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
-              <div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
-              <div class="mb-2"><span class="font-semibold">To:</span> ${parsed.to.text || "No To Address"}</div>
-              <div class="mb-2"><span class="font-semibold">Subject:</span> ${parsed.subject || "No Subject"}</div>
-              <div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
-              <div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
-            </div>
-            <div class="prose">${parsed.html || parsed.textAsHtml || "No HTML content available"}</div>
-          </div>
-        `;
-      } catch (error) {
-        console.error("Error parsing email:", error);
-        return `
-          <div class="bg-white shadow-md rounded-lg p-4 mb-6">
-            <div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
-            <div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
-            <div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
-            <div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
-            <div class="text-red-500">Error parsing email content</div>
-          </div>
-        `;
-      }
-    })
-  );
-  return parsedMessages.join("");
-}
+app.get("/api/messages", async (req, res) => {
+  try {
+    res.json(await loadMessages());
+  } catch (error) {
+    console.error("Error fetching messages:", error);
+    res.status(502).json({
+      error: "Unable to fetch messages from LocalStack SES",
+      details: error.message,
+      endpoint: SES_ENDPOINT
+    });
+  }
+});
 
-function renderHtml(messagesHtml) {
-  return `
-    <!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Email Messages Viewer</title>
-        <script src="https://cdn.tailwindcss.com"></script>
-        <style>
-          body {
-            background-color: #f3f4f6;
-            font-family: Arial, sans-serif;
-          }
-          .container {
-            max-width: 800px;
-            margin: 50px auto;
-            padding: 20px;
-          }
-          .prose {
-            line-height: 1.6;
-          }
-        </style>
-      </head>
-      <body>
-        <div class="container bg-white shadow-lg rounded-lg p-6">
-          <h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
-          <div id="messages-container">${messagesHtml}</div>
-        </div>
-      </body>
-    </html>
-  `;
-}
+app.get("/api/messages/:id/raw", async (req, res) => {
+  try {
+    const message = await findSesMessageById(req.params.id);
+
+    if (!message) {
+      res.status(404).type("text/plain").send("Message not found");
+      return;
+    }
+
+    res.type("text/plain").send(message.RawData || "");
+  } catch (error) {
+    console.error("Error fetching raw message:", error);
+    res.status(502).type("text/plain").send(`Unable to fetch raw message: ${error.message}`);
+  }
+});
+
+app.get("/api/messages/:id/attachments/:index", async (req, res) => {
+  try {
+    const attachmentIndex = Number.parseInt(req.params.index, 10);
+
+    if (!Number.isInteger(attachmentIndex) || attachmentIndex < 0) {
+      res.status(400).type("text/plain").send("Attachment index must be a non-negative integer");
+      return;
+    }
+
+    const attachment = await loadMessageAttachment(req.params.id, attachmentIndex);
+
+    if (!attachment) {
+      res.status(404).type("text/plain").send("Attachment not found");
+      return;
+    }
+
+    res.setHeader("Content-Type", attachment.contentType);
+    res.setHeader("Content-Disposition", buildAttachmentDisposition(attachment.filename));
+    res.setHeader("Content-Length", String(attachment.content.length));
+    res.send(attachment.content);
+  } catch (error) {
+    console.error("Error downloading attachment:", error);
+    res.status(502).type("text/plain").send(`Unable to download attachment: ${error.message}`);
+  }
+});
+
+app.get("/api/logs/groups", async (req, res) => {
+  try {
+    const groups = await loadLogGroups();
+    res.json({
+      endpoint: CLOUDWATCH_ENDPOINT,
+      region: CLOUDWATCH_REGION,
+      groups
+    });
+  } catch (error) {
+    console.error("Error fetching log groups:", error);
+    res.status(502).json({
+      error: "Unable to fetch CloudWatch log groups from LocalStack",
+      details: error.message,
+      endpoint: CLOUDWATCH_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/logs/streams", async (req, res) => {
+  try {
+    const logGroupName = String(req.query.group || "");
+
+    if (!logGroupName) {
+      res.status(400).json({ error: "Query parameter 'group' is required" });
+      return;
+    }
+
+    res.json({
+      logGroupName,
+      streams: await loadLogStreams(logGroupName)
+    });
+  } catch (error) {
+    console.error("Error fetching log streams:", error);
+    res.status(502).json({
+      error: "Unable to fetch CloudWatch log streams from LocalStack",
+      details: error.message,
+      endpoint: CLOUDWATCH_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/logs/events", async (req, res) => {
+  try {
+    const logGroupName = String(req.query.group || "");
+    const logStreamName = String(req.query.stream || "");
+    const windowMs = clampNumber(req.query.windowMs, CLOUDWATCH_DEFAULT_WINDOW_MS, 60 * 1000, 24 * 60 * 60 * 1000);
+    const limit = clampNumber(req.query.limit, CLOUDWATCH_DEFAULT_LIMIT, 25, 500);
+
+    if (!logGroupName) {
+      res.status(400).json({ error: "Query parameter 'group' is required" });
+      return;
+    }
+
+    res.json(await loadLogEvents({ logGroupName, logStreamName, windowMs, limit }));
+  } catch (error) {
+    console.error("Error fetching log events:", error);
+    res.status(502).json({
+      error: "Unable to fetch CloudWatch log events from LocalStack",
+      details: error.message,
+      endpoint: CLOUDWATCH_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/secrets", async (req, res) => {
+  try {
+    res.json(await loadSecrets());
+  } catch (error) {
+    console.error("Error fetching secrets:", error);
+    res.status(502).json({
+      error: "Unable to fetch Secrets Manager secrets from LocalStack",
+      details: error.message,
+      endpoint: SECRETS_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/secrets/value", async (req, res) => {
+  try {
+    const secretId = String(req.query.id || "");
+
+    if (!secretId) {
+      res.status(400).json({ error: "Query parameter 'id' is required" });
+      return;
+    }
+
+    res.json(await loadSecretValue(secretId));
+  } catch (error) {
+    if (error?.name === "ResourceNotFoundException") {
+      res.status(404).json({
+        error: "Secret not found",
+        details: error.message,
+        endpoint: SECRETS_ENDPOINT
+      });
+      return;
+    }
+
+    console.error("Error fetching secret value:", error);
+    res.status(502).json({
+      error: "Unable to fetch Secrets Manager value from LocalStack",
+      details: error.message,
+      endpoint: SECRETS_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/buckets", async (req, res) => {
+  try {
+    res.json(await loadS3Buckets());
+  } catch (error) {
+    console.error("Error fetching S3 buckets:", error);
+    res.status(502).json({
+      error: "Unable to fetch S3 buckets from LocalStack",
+      details: error.message,
+      endpoint: S3_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/objects", async (req, res) => {
+  try {
+    const bucket = String(req.query.bucket || "");
+    const prefix = String(req.query.prefix || "");
+
+    if (!bucket) {
+      res.status(400).json({ error: "Query parameter 'bucket' is required" });
+      return;
+    }
+
+    res.json(await loadS3Objects({ bucket, prefix }));
+  } catch (error) {
+    console.error("Error fetching S3 objects:", error);
+    res.status(502).json({
+      error: "Unable to fetch S3 objects from LocalStack",
+      details: error.message,
+      endpoint: S3_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/object", async (req, res) => {
+  try {
+    const bucket = String(req.query.bucket || "");
+    const key = String(req.query.key || "");
+
+    if (!bucket || !key) {
+      res.status(400).json({ error: "Query parameters 'bucket' and 'key' are required" });
+      return;
+    }
+
+    res.json(await loadS3ObjectPreview({ bucket, key }));
+  } catch (error) {
+    if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
+      res.status(404).json({
+        error: "Object not found",
+        details: error.message,
+        endpoint: S3_ENDPOINT
+      });
+      return;
+    }
+
+    console.error("Error fetching S3 object preview:", error);
+    res.status(502).json({
+      error: "Unable to fetch S3 object preview from LocalStack",
+      details: error.message,
+      endpoint: S3_ENDPOINT
+    });
+  }
+});
+
+app.get("/api/s3/download", async (req, res) => {
+  try {
+    const bucket = String(req.query.bucket || "");
+    const key = String(req.query.key || "");
+    const inline = String(req.query.inline || "") === "1";
+
+    if (!bucket || !key) {
+      res.status(400).type("text/plain").send("Query parameters 'bucket' and 'key' are required");
+      return;
+    }
+
+    const object = await loadS3ObjectDownload({ bucket, key });
+
+    res.setHeader("Content-Type", object.contentType);
+    res.setHeader(
+      "Content-Disposition",
+      inline ? buildInlineDisposition(object.filename) : buildAttachmentDisposition(object.filename)
+    );
+    res.setHeader("Content-Length", String(object.content.length));
+    res.send(object.content);
+  } catch (error) {
+    if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
+      res.status(404).type("text/plain").send("Object not found");
+      return;
+    }
+
+    console.error("Error downloading S3 object:", error);
+    res.status(502).type("text/plain").send(`Unable to download S3 object: ${error.message}`);
+  }
+});
 
 app.listen(PORT, () => {
-  console.log(`Server is running on http://localhost:${PORT}`);
+  console.log(`LocalStack inspector is running on http://localhost:${PORT}`);
+  console.log(`Watching LocalStack SES endpoint at ${SES_ENDPOINT}`);
+  console.log(`Watching LocalStack CloudWatch Logs endpoint at ${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`);
+  console.log(`Watching LocalStack Secrets Manager endpoint at ${SECRETS_ENDPOINT} (${SECRETS_REGION})`);
+  console.log(`Watching LocalStack S3 endpoint at ${S3_ENDPOINT} (${S3_REGION})`);
 });

_reference/localEmailViewer/package.json

@@ -4,13 +4,17 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node index.js",
+    "check": "node --check index.js && node --check public/client-app.js && node --check server/config.js && node --check server/localstack-service.js && node --check server/page.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": "",
+  "description": "LocalStack inspector for SES emails, CloudWatch logs, Secrets Manager, and S3",
   "dependencies": {
+    "@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
+    "@aws-sdk/client-s3": "^3.1013.0",
+    "@aws-sdk/client-secrets-manager": "^3.1013.0",
     "express": "^5.1.0",
     "mailparser": "^3.7.4",
     "node-fetch": "^3.3.2"

_reference/localEmailViewer/server/config.js

@@ -0,0 +1,45 @@
+import { CloudWatchLogsClient } from "@aws-sdk/client-cloudwatch-logs";
+import { SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
+import { S3Client } from "@aws-sdk/client-s3";
+
+export const PORT = Number(process.env.PORT || 3334);
+export const SES_ENDPOINT = process.env.SES_VIEWER_ENDPOINT || "http://localhost:4566/_aws/ses";
+export const FETCH_TIMEOUT_MS = Number(process.env.SES_VIEWER_FETCH_TIMEOUT_MS || 5000);
+export const DEFAULT_REFRESH_MS = Number(process.env.SES_VIEWER_REFRESH_MS || 10000);
+export const CLOUDWATCH_ENDPOINT = process.env.CLOUDWATCH_VIEWER_ENDPOINT || "http://localhost:4566";
+export const CLOUDWATCH_REGION =
+  process.env.CLOUDWATCH_VIEWER_REGION || process.env.AWS_DEFAULT_REGION || "ca-central-1";
+export const CLOUDWATCH_DEFAULT_GROUP = process.env.CLOUDWATCH_VIEWER_LOG_GROUP || "development";
+export const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW_MS || 15 * 60 * 1000);
+export const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
+export const SECRETS_ENDPOINT = process.env.SECRETS_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
+export const SECRETS_REGION = process.env.SECRETS_VIEWER_REGION || CLOUDWATCH_REGION;
+export const S3_ENDPOINT = process.env.S3_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
+export const S3_REGION = process.env.S3_VIEWER_REGION || CLOUDWATCH_REGION;
+export const S3_DEFAULT_BUCKET = process.env.S3_VIEWER_BUCKET || "";
+export const S3_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_PREVIEW_BYTES || 256 * 1024);
+export const S3_IMAGE_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_IMAGE_PREVIEW_BYTES || 1024 * 1024);
+
+export const LOCALSTACK_CREDENTIALS = {
+  accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
+  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
+};
+
+export const cloudWatchLogsClient = new CloudWatchLogsClient({
+  region: CLOUDWATCH_REGION,
+  endpoint: CLOUDWATCH_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS
+});
+
+export const secretsManagerClient = new SecretsManagerClient({
+  region: SECRETS_REGION,
+  endpoint: SECRETS_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS
+});
+
+export const s3Client = new S3Client({
+  region: S3_REGION,
+  endpoint: S3_ENDPOINT,
+  credentials: LOCALSTACK_CREDENTIALS,
+  forcePathStyle: true
+});

_reference/localEmailViewer/server/localstack-service.js

@@ -0,0 +1,845 @@
+import fetch from "node-fetch";
+import {
+  DescribeLogGroupsCommand,
+  DescribeLogStreamsCommand,
+  FilterLogEventsCommand
+} from "@aws-sdk/client-cloudwatch-logs";
+import { GetSecretValueCommand, ListSecretsCommand } from "@aws-sdk/client-secrets-manager";
+import { GetObjectCommand, HeadObjectCommand, ListBucketsCommand, ListObjectsV2Command } from "@aws-sdk/client-s3";
+import { simpleParser } from "mailparser";
+import {
+  CLOUDWATCH_ENDPOINT,
+  CLOUDWATCH_REGION,
+  FETCH_TIMEOUT_MS,
+  S3_ENDPOINT,
+  S3_IMAGE_PREVIEW_MAX_BYTES,
+  S3_PREVIEW_MAX_BYTES,
+  S3_REGION,
+  SES_ENDPOINT,
+  SECRETS_ENDPOINT,
+  SECRETS_REGION,
+  cloudWatchLogsClient,
+  s3Client,
+  secretsManagerClient
+} from "./config.js";
+
+async function loadMessages() {
+  const startedAt = Date.now();
+  const sesMessages = await fetchSesMessages();
+  const messages = await Promise.all(sesMessages.map((message, index) => toMessageViewModel(message, index)));
+
+  messages.sort((left, right) => {
+    if ((right.timestampMs || 0) !== (left.timestampMs || 0)) {
+      return (right.timestampMs || 0) - (left.timestampMs || 0);
+    }
+
+    return right.index - left.index;
+  });
+
+  return {
+    endpoint: SES_ENDPOINT,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalMessages: messages.length,
+    parseErrors: messages.filter((message) => Boolean(message.parseError)).length,
+    latestMessageTimestamp: messages[0]?.timestamp || "",
+    messages
+  };
+}
+
+async function fetchSesMessages() {
+  const response = await fetch(SES_ENDPOINT, {
+    signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+  });
+
+  if (!response.ok) {
+    throw new Error(`SES endpoint responded with ${response.status}`);
+  }
+
+  const data = await response.json();
+  return Array.isArray(data.messages) ? data.messages : [];
+}
+
+async function loadLogGroups() {
+  const groups = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new DescribeLogGroupsCommand({
+        nextToken,
+        limit: 50
+      })
+    );
+
+    groups.push(
+      ...(response.logGroups || []).map((group) => ({
+        name: group.logGroupName || "",
+        arn: group.arn || "",
+        storedBytes: group.storedBytes || 0,
+        retentionInDays: group.retentionInDays || 0,
+        creationTime: group.creationTime || 0
+      }))
+    );
+
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 10);
+
+  return groups.sort((left, right) => left.name.localeCompare(right.name));
+}
+
+async function loadLogStreams(logGroupName) {
+  const streams = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new DescribeLogStreamsCommand({
+        logGroupName,
+        descending: true,
+        orderBy: "LastEventTime",
+        nextToken,
+        limit: 50
+      })
+    );
+
+    streams.push(
+      ...(response.logStreams || []).map((stream) => ({
+        name: stream.logStreamName || "",
+        arn: stream.arn || "",
+        lastEventTimestamp: stream.lastEventTimestamp || 0,
+        lastIngestionTime: stream.lastIngestionTime || 0,
+        storedBytes: stream.storedBytes || 0
+      }))
+    );
+
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 6 && streams.length < 250);
+
+  return streams;
+}
+
+async function loadLogEvents({ logGroupName, logStreamName, windowMs, limit }) {
+  const startedAt = Date.now();
+  const eventMap = new Map();
+  const startTime = Date.now() - windowMs;
+  let nextToken;
+  let previousToken = "";
+  let pageCount = 0;
+  let searchedLogStreams = 0;
+
+  do {
+    const response = await cloudWatchLogsClient.send(
+      new FilterLogEventsCommand({
+        logGroupName,
+        logStreamNames: logStreamName ? [logStreamName] : undefined,
+        startTime,
+        endTime: Date.now(),
+        limit,
+        nextToken
+      })
+    );
+
+    for (const event of response.events || []) {
+      const id =
+        event.eventId || `${event.logStreamName || "stream"}-${event.timestamp || 0}-${event.ingestionTime || 0}`;
+
+      if (!eventMap.has(id)) {
+        const message = String(event.message || "").trim();
+        eventMap.set(id, {
+          id,
+          timestamp: event.timestamp || 0,
+          ingestionTime: event.ingestionTime || 0,
+          logStreamName: event.logStreamName || "",
+          message,
+          preview: buildLogPreview(message)
+        });
+      }
+    }
+
+    searchedLogStreams = Math.max(searchedLogStreams, (response.searchedLogStreams || []).length);
+    previousToken = nextToken || "";
+    nextToken = response.nextToken;
+    pageCount += 1;
+  } while (nextToken && nextToken !== previousToken && pageCount < 10 && eventMap.size < limit);
+
+  const events = [...eventMap.values()]
+    .sort((left, right) => {
+      if ((right.timestamp || 0) !== (left.timestamp || 0)) {
+        return (right.timestamp || 0) - (left.timestamp || 0);
+      }
+
+      return left.logStreamName.localeCompare(right.logStreamName);
+    })
+    .slice(0, limit);
+
+  return {
+    endpoint: CLOUDWATCH_ENDPOINT,
+    region: CLOUDWATCH_REGION,
+    logGroupName,
+    logStreamName,
+    fetchDurationMs: Date.now() - startedAt,
+    latestTimestamp: events[0]?.timestamp || 0,
+    searchedLogStreams,
+    totalEvents: events.length,
+    events
+  };
+}
+
+async function loadSecrets() {
+  const startedAt = Date.now();
+  const secrets = [];
+  let nextToken;
+  let pageCount = 0;
+
+  do {
+    const response = await secretsManagerClient.send(
+      new ListSecretsCommand({
+        NextToken: nextToken,
+        MaxResults: 50
+      })
+    );
+
+    secrets.push(
+      ...(response.SecretList || []).map((secret, index) => ({
+        id: secret.ARN || secret.Name || `secret-${index}`,
+        name: secret.Name || "Unnamed secret",
+        arn: secret.ARN || "",
+        description: secret.Description || "",
+        createdDate: normalizeTimestamp(secret.CreatedDate),
+        lastChangedDate: normalizeTimestamp(secret.LastChangedDate),
+        lastAccessedDate: normalizeTimestamp(secret.LastAccessedDate),
+        deletedDate: normalizeTimestamp(secret.DeletedDate),
+        primaryRegion: secret.PrimaryRegion || "",
+        owningService: secret.OwningService || "",
+        rotationEnabled: Boolean(secret.RotationEnabled),
+        versionCount: Object.keys(secret.SecretVersionsToStages || {}).length,
+        tagCount: Array.isArray(secret.Tags) ? secret.Tags.length : 0,
+        tags: (secret.Tags || [])
+          .map((tag) => ({
+            key: tag.Key || "",
+            value: tag.Value || ""
+          }))
+          .filter((tag) => tag.key || tag.value)
+      }))
+    );
+
+    nextToken = response.NextToken;
+    pageCount += 1;
+  } while (nextToken && pageCount < 10 && secrets.length < 500);
+
+  secrets.sort((left, right) => {
+    const leftTime = Date.parse(left.lastChangedDate || left.createdDate || 0) || 0;
+    const rightTime = Date.parse(right.lastChangedDate || right.createdDate || 0) || 0;
+
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+
+    return left.name.localeCompare(right.name);
+  });
+
+  return {
+    endpoint: SECRETS_ENDPOINT,
+    region: SECRETS_REGION,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalSecrets: secrets.length,
+    latestTimestamp: secrets[0]?.lastChangedDate || secrets[0]?.createdDate || "",
+    secrets
+  };
+}
+
+async function loadSecretValue(secretId) {
+  const startedAt = Date.now();
+  const response = await secretsManagerClient.send(
+    new GetSecretValueCommand({
+      SecretId: secretId
+    })
+  );
+
+  const secretBinary = response.SecretBinary
+    ? typeof response.SecretBinary === "string"
+      ? response.SecretBinary
+      : Buffer.from(response.SecretBinary).toString("base64")
+    : "";
+
+  return {
+    endpoint: SECRETS_ENDPOINT,
+    region: SECRETS_REGION,
+    fetchDurationMs: Date.now() - startedAt,
+    id: secretId,
+    name: response.Name || "",
+    arn: response.ARN || "",
+    versionId: response.VersionId || "",
+    versionStages: Array.isArray(response.VersionStages) ? response.VersionStages : [],
+    createdDate: normalizeTimestamp(response.CreatedDate),
+    secretString: typeof response.SecretString === "string" ? response.SecretString : "",
+    secretBinary
+  };
+}
+
+async function loadS3Buckets() {
+  const startedAt = Date.now();
+  const response = await s3Client.send(new ListBucketsCommand({}));
+  const buckets = (response.Buckets || [])
+    .map((bucket) => ({
+      name: bucket.Name || "",
+      creationDate: normalizeTimestamp(bucket.CreationDate)
+    }))
+    .filter((bucket) => bucket.name)
+    .sort((left, right) => left.name.localeCompare(right.name));
+
+  return {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalBuckets: buckets.length,
+    buckets
+  };
+}
+
+async function loadS3Objects({ bucket, prefix }) {
+  const startedAt = Date.now();
+  const objects = [];
+  let continuationToken;
+  let pageCount = 0;
+
+  do {
+    const response = await s3Client.send(
+      new ListObjectsV2Command({
+        Bucket: bucket,
+        Prefix: prefix || undefined,
+        ContinuationToken: continuationToken,
+        MaxKeys: 200
+      })
+    );
+
+    objects.push(
+      ...(response.Contents || []).map((object, index) => ({
+        id: `${bucket}::${object.Key || index}`,
+        bucket,
+        key: object.Key || "",
+        size: object.Size || 0,
+        lastModified: normalizeTimestamp(object.LastModified),
+        etag: String(object.ETag || "").replace(/^"|"$/g, ""),
+        storageClass: object.StorageClass || "STANDARD"
+      }))
+    );
+
+    continuationToken = response.IsTruncated ? response.NextContinuationToken : undefined;
+    pageCount += 1;
+  } while (continuationToken && pageCount < 10 && objects.length < 1000);
+
+  objects.sort((left, right) => {
+    const leftTime = Date.parse(left.lastModified || 0) || 0;
+    const rightTime = Date.parse(right.lastModified || 0) || 0;
+
+    if (rightTime !== leftTime) {
+      return rightTime - leftTime;
+    }
+
+    return left.key.localeCompare(right.key);
+  });
+
+  return {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    bucket,
+    prefix,
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    totalObjects: objects.length,
+    latestTimestamp: objects[0]?.lastModified || "",
+    objects
+  };
+}
+
+async function loadS3ObjectPreview({ bucket, key }) {
+  const startedAt = Date.now();
+  const head = await s3Client.send(
+    new HeadObjectCommand({
+      Bucket: bucket,
+      Key: key
+    })
+  );
+
+  const contentType = head.ContentType || guessObjectContentType(key);
+  const contentLength = Number(head.ContentLength || 0);
+  const previewType = resolveS3PreviewType(contentType, key);
+  const result = {
+    endpoint: S3_ENDPOINT,
+    region: S3_REGION,
+    bucket,
+    key,
+    fetchDurationMs: 0,
+    contentType,
+    contentLength,
+    etag: String(head.ETag || "").replace(/^"|"$/g, ""),
+    lastModified: normalizeTimestamp(head.LastModified),
+    metadata: head.Metadata || {},
+    previewType,
+    previewText: "",
+    imageDataUrl: "",
+    truncated: false
+  };
+
+  const shouldLoadTextPreview = previewType === "json" || previewType === "text" || previewType === "html";
+  const shouldLoadImagePreview =
+    previewType === "image" && contentLength > 0 && contentLength <= S3_IMAGE_PREVIEW_MAX_BYTES;
+
+  if ((shouldLoadTextPreview || shouldLoadImagePreview) && contentLength > 0) {
+    const previewBytes = Math.max(1, Math.min(contentLength || S3_PREVIEW_MAX_BYTES, S3_PREVIEW_MAX_BYTES));
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: bucket,
+        Key: key,
+        Range: `bytes=0-${previewBytes - 1}`
+      })
+    );
+    const content = Buffer.from(await response.Body.transformToByteArray());
+    result.truncated = contentLength > content.length;
+
+    if (shouldLoadImagePreview) {
+      result.imageDataUrl = `data:${contentType};base64,${content.toString("base64")}`;
+    } else {
+      result.previewText = content.toString("utf8");
+    }
+  }
+
+  result.fetchDurationMs = Date.now() - startedAt;
+  return result;
+}
+
+async function loadServiceHealthSummary() {
+  const startedAt = Date.now();
+  const [sesResult, logsResult, secretsResult, s3Result] = await Promise.allSettled([
+    fetchSesMessages(),
+    loadLogGroups(),
+    loadSecrets(),
+    loadS3Buckets()
+  ]);
+
+  return {
+    fetchedAt: new Date().toISOString(),
+    fetchDurationMs: Date.now() - startedAt,
+    services: {
+      emails: summarizeHealthResult({
+        icon: "✉️",
+        panel: "emails",
+        label: "SES Emails",
+        result: sesResult,
+        count: sesResult.status === "fulfilled" ? sesResult.value.length : 0,
+        detail: SES_ENDPOINT,
+        noun: "email"
+      }),
+      logs: summarizeHealthResult({
+        icon: "📜",
+        panel: "logs",
+        label: "CloudWatch Logs",
+        result: logsResult,
+        count: logsResult.status === "fulfilled" ? logsResult.value.length : 0,
+        detail: `${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`,
+        noun: "group"
+      }),
+      secrets: summarizeHealthResult({
+        icon: "🔐",
+        panel: "secrets",
+        label: "Secrets Manager",
+        result: secretsResult,
+        count: secretsResult.status === "fulfilled" ? secretsResult.value.totalSecrets : 0,
+        detail: `${SECRETS_ENDPOINT} (${SECRETS_REGION})`,
+        noun: "secret"
+      }),
+      s3: summarizeHealthResult({
+        icon: "🪣",
+        panel: "s3",
+        label: "S3 Explorer",
+        result: s3Result,
+        count: s3Result.status === "fulfilled" ? s3Result.value.totalBuckets : 0,
+        detail: `${S3_ENDPOINT} (${S3_REGION})`,
+        noun: "bucket"
+      })
+    }
+  };
+}
+
+async function findSesMessageById(id) {
+  const messages = await fetchSesMessages();
+  return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
+}
+
+async function parseSesMessageById(id) {
+  const message = await findSesMessageById(id);
+
+  if (!message) {
+    return null;
+  }
+
+  return simpleParser(message.RawData || "");
+}
+
+async function toMessageViewModel(message, index) {
+  const id = resolveMessageId(message, index);
+
+  try {
+    const parsed = await simpleParser(message.RawData || "");
+    const textContent = normalizeText(parsed.text || "");
+    const renderedHtml = buildRenderedHtml(parsed.html || parsed.textAsHtml || "");
+    const timestamp = normalizeTimestamp(message.Timestamp || parsed.date);
+
+    return {
+      id,
+      index,
+      from: formatAddressList(parsed.from) || message.Source || "Unknown sender",
+      to: formatAddressList(parsed.to) || "No To Address",
+      replyTo: formatAddressList(parsed.replyTo),
+      subject: parsed.subject || "No Subject",
+      region: message.Region || "",
+      timestamp,
+      timestampMs: timestamp ? Date.parse(timestamp) : 0,
+      messageId: parsed.messageId || "",
+      rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
+      attachmentCount: parsed.attachments.length,
+      attachments: parsed.attachments.map((attachment, attachmentIndex) => ({
+        index: attachmentIndex,
+        filename: resolveAttachmentFilename(attachment, attachmentIndex),
+        contentType: attachment.contentType || "application/octet-stream",
+        size: attachment.size || 0
+      })),
+      preview: buildPreview(textContent, renderedHtml),
+      textContent,
+      renderedHtml,
+      hasHtml: Boolean(renderedHtml),
+      parseError: ""
+    };
+  } catch (error) {
+    return {
+      id,
+      index,
+      from: message.Source || "Unknown sender",
+      to: "Unknown recipient",
+      replyTo: "",
+      subject: "Unable to parse message",
+      region: message.Region || "",
+      timestamp: normalizeTimestamp(message.Timestamp),
+      timestampMs: message.Timestamp ? Date.parse(message.Timestamp) : 0,
+      messageId: "",
+      rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
+      attachmentCount: 0,
+      attachments: [],
+      preview: "This message could not be parsed. Open the raw view to inspect the MIME source.",
+      textContent: "",
+      renderedHtml: "",
+      hasHtml: false,
+      parseError: error.message
+    };
+  }
+}
+
+function resolveMessageId(message, index = 0) {
+  return message.Id || `${message.Timestamp || "unknown"}-${message.Source || "unknown"}-${index}`;
+}
+
+function resolveAttachmentFilename(attachment, index = 0) {
+  if (attachment?.filename) {
+    return attachment.filename;
+  }
+
+  return `attachment-${index + 1}${attachmentExtension(attachment?.contentType)}`;
+}
+
+function attachmentExtension(contentType) {
+  const normalized = String(contentType || "")
+    .split(";")[0]
+    .trim()
+    .toLowerCase();
+
+  return (
+    {
+      "application/json": ".json",
+      "application/pdf": ".pdf",
+      "application/zip": ".zip",
+      "image/gif": ".gif",
+      "image/jpeg": ".jpg",
+      "image/png": ".png",
+      "image/webp": ".webp",
+      "text/calendar": ".ics",
+      "text/csv": ".csv",
+      "text/html": ".html",
+      "text/plain": ".txt"
+    }[normalized] || ""
+  );
+}
+
+function buildAttachmentDisposition(filename) {
+  const fallback = String(filename || "attachment")
+    .replace(/[^\x20-\x7e]/g, "_")
+    .replace(/["\\]/g, "_");
+
+  return `attachment; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "attachment")}`;
+}
+
+function buildInlineDisposition(filename) {
+  const fallback = String(filename || "file")
+    .replace(/[^\x20-\x7e]/g, "_")
+    .replace(/["\\]/g, "_");
+
+  return `inline; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "file")}`;
+}
+
+function basenameFromKey(key) {
+  const value = String(key || "");
+  const parts = value.split("/").filter(Boolean);
+  return parts[parts.length - 1] || "file";
+}
+
+function guessObjectContentType(key) {
+  const normalizedKey = String(key || "").toLowerCase();
+
+  if (normalizedKey.endsWith(".json")) {
+    return "application/json";
+  }
+
+  if (normalizedKey.endsWith(".csv")) {
+    return "text/csv";
+  }
+
+  if (normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
+    return "text/html";
+  }
+
+  if (normalizedKey.endsWith(".txt") || normalizedKey.endsWith(".log") || normalizedKey.endsWith(".md")) {
+    return "text/plain";
+  }
+
+  if (normalizedKey.endsWith(".png")) {
+    return "image/png";
+  }
+
+  if (normalizedKey.endsWith(".jpg") || normalizedKey.endsWith(".jpeg")) {
+    return "image/jpeg";
+  }
+
+  if (normalizedKey.endsWith(".gif")) {
+    return "image/gif";
+  }
+
+  if (normalizedKey.endsWith(".webp")) {
+    return "image/webp";
+  }
+
+  if (normalizedKey.endsWith(".svg")) {
+    return "image/svg+xml";
+  }
+
+  if (normalizedKey.endsWith(".pdf")) {
+    return "application/pdf";
+  }
+
+  return "application/octet-stream";
+}
+
+function resolveS3PreviewType(contentType, key) {
+  const normalizedType = String(contentType || "").toLowerCase();
+  const normalizedKey = String(key || "").toLowerCase();
+
+  if (normalizedType.includes("json") || normalizedKey.endsWith(".json")) {
+    return "json";
+  }
+
+  if (normalizedType.startsWith("image/")) {
+    return "image";
+  }
+
+  if (normalizedType.includes("html") || normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
+    return "html";
+  }
+
+  if (
+    normalizedType.startsWith("text/") ||
+    [".txt", ".log", ".csv", ".xml", ".yml", ".yaml", ".md"].some((extension) => normalizedKey.endsWith(extension))
+  ) {
+    return "text";
+  }
+
+  return "binary";
+}
+
+function summarizeHealthResult({ icon, panel, label, result, count, detail, noun }) {
+  if (result.status === "fulfilled") {
+    return {
+      ok: true,
+      icon,
+      panel,
+      label,
+      count,
+      summary: `${count} ${noun}${count === 1 ? "" : "s"}`,
+      detail
+    };
+  }
+
+  return {
+    ok: false,
+    icon,
+    panel,
+    label,
+    count: 0,
+    summary: "Needs attention",
+    detail: result.reason?.message || detail
+  };
+}
+
+function normalizeTimestamp(value) {
+  if (!value) {
+    return "";
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toISOString();
+}
+
+function normalizeText(value) {
+  return String(value || "")
+    .replace(/\r\n/g, "\n")
+    .trim();
+}
+
+function buildPreview(textContent, renderedHtml) {
+  const source = (textContent || stripTags(renderedHtml)).replace(/\s+/g, " ").trim();
+
+  if (!source) {
+    return "No message preview available.";
+  }
+
+  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
+}
+
+function buildLogPreview(message) {
+  const source = String(message || "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  if (!source) {
+    return "No log preview available.";
+  }
+
+  return source.length > 220 ? `${source.slice(0, 217)}...` : source;
+}
+
+function clampNumber(value, fallback, min, max) {
+  const parsed = Number(value);
+
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+
+  return Math.min(Math.max(parsed, min), max);
+}
+
+function buildRenderedHtml(html) {
+  if (!html) {
+    return "";
+  }
+
+  const value = String(html);
+  const hasDocument = /<html[\s>]/i.test(value) || /<!doctype/i.test(value);
+
+  if (hasDocument) {
+    return value;
+  }
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base target="_blank">
+    <style>body{margin:0;padding:16px;font-family:Arial,sans-serif;background:#fff;}</style>
+  </head>
+  <body>${value}</body>
+</html>`;
+}
+
+function stripTags(value) {
+  return String(value || "")
+    .replace(/<style[\s\S]*?<\/style>/gi, " ")
+    .replace(/<script[\s\S]*?<\/script>/gi, " ")
+    .replace(/<[^>]+>/g, " ");
+}
+
+function formatAddressList(addresses) {
+  if (!addresses?.value?.length) {
+    return "";
+  }
+
+  return addresses.value
+    .map(({ name, address }) => {
+      if (name && address) {
+        return `${name} <${address}>`;
+      }
+
+      return address || name || "";
+    })
+    .filter(Boolean)
+    .join(", ");
+}
+
+async function loadMessageAttachment(messageId, attachmentIndex) {
+  const parsed = await parseSesMessageById(messageId);
+
+  if (!parsed) {
+    return null;
+  }
+
+  const attachment = parsed.attachments?.[attachmentIndex];
+
+  if (!attachment) {
+    return null;
+  }
+
+  return {
+    filename: resolveAttachmentFilename(attachment, attachmentIndex),
+    contentType: attachment.contentType || "application/octet-stream",
+    content: Buffer.isBuffer(attachment.content) ? attachment.content : Buffer.from(attachment.content || "")
+  };
+}
+
+async function loadS3ObjectDownload({ bucket, key }) {
+  const response = await s3Client.send(
+    new GetObjectCommand({
+      Bucket: bucket,
+      Key: key
+    })
+  );
+
+  return {
+    filename: basenameFromKey(key),
+    contentType: response.ContentType || guessObjectContentType(key),
+    content: Buffer.from(await response.Body.transformToByteArray())
+  };
+}
+
+export {
+  buildAttachmentDisposition,
+  buildInlineDisposition,
+  clampNumber,
+  findSesMessageById,
+  loadLogEvents,
+  loadLogGroups,
+  loadLogStreams,
+  loadMessageAttachment,
+  loadMessages,
+  loadS3Buckets,
+  loadS3ObjectDownload,
+  loadS3ObjectPreview,
+  loadS3Objects,
+  loadSecretValue,
+  loadSecrets,
+  loadServiceHealthSummary
+};

_reference/localEmailViewer/server/page.js

@@ -0,0 +1,495 @@
+import {
+  CLOUDWATCH_DEFAULT_GROUP,
+  CLOUDWATCH_DEFAULT_LIMIT,
+  CLOUDWATCH_DEFAULT_WINDOW_MS,
+  CLOUDWATCH_ENDPOINT,
+  CLOUDWATCH_REGION,
+  DEFAULT_REFRESH_MS,
+  S3_DEFAULT_BUCKET,
+  S3_ENDPOINT,
+  S3_REGION,
+  SECRETS_ENDPOINT,
+  SECRETS_REGION,
+  SES_ENDPOINT
+} from "./config.js";
+
+function getClientConfig() {
+  return {
+    defaultRefreshMs: DEFAULT_REFRESH_MS,
+    endpoint: SES_ENDPOINT,
+    cloudWatchEndpoint: CLOUDWATCH_ENDPOINT,
+    cloudWatchRegion: CLOUDWATCH_REGION,
+    secretsEndpoint: SECRETS_ENDPOINT,
+    secretsRegion: SECRETS_REGION,
+    s3Endpoint: S3_ENDPOINT,
+    s3Region: S3_REGION,
+    defaultS3Bucket: S3_DEFAULT_BUCKET,
+    defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
+    defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
+    defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
+  };
+}
+
+function renderHtml() {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LocalStack Inspector</title>
+    <style>${renderStyles()}</style>
+  </head>
+  <body>
+    <div class="page">
+      <header class="hero">
+        <div class="heroShell">
+          <div class="heroIdentity">
+            <p class="eyebrow">LocalStack Toolbox</p>
+            <h1>Inspector</h1>
+          </div>
+          <div class="heroTopRow">
+            <div class="heroActions">
+              <button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
+              <button id="resetStateButton" class="ghost" type="button">🧹 Reset saved state</button>
+            </div>
+          </div>
+          <div class="heroStatusRow">
+            <span class="heroStatusLabel">Stack</span>
+            <div id="healthStrip" class="healthStrip" aria-live="polite"></div>
+            <button id="healthRefreshButton" class="mini healthRefreshButton" type="button" title="Refresh service health" aria-label="Refresh service health">🩺</button>
+          </div>
+        </div>
+      </header>
+
+      <section id="emailsPanel" class="workspacePanel">
+        <section class="toolControls">
+          <div class="row">
+            <button id="refreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="intervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="statusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <input id="searchInput" class="search" type="search" placeholder="Search subject, sender, preview..." autocomplete="off">
+            <button id="clearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="expandAllButton" class="ghost" type="button">Open all</button>
+            <button id="collapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Total</span><strong id="totalStat">0</strong><small id="visibleStat">0 visible</small></article>
+          <article class="stat"><span>New</span><strong id="newStat">0</strong><small>New since last refresh</small></article>
+          <article class="stat"><span>Newest</span><strong id="newestStat" class="small">No messages</strong><small id="updatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
+        </section>
+
+        <div id="emailsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="banner" class="banner" hidden></div>
+            <div id="empty" class="empty" hidden></div>
+            <section id="list" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="scrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="logsPanel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="logsRefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="logsAutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="logsIntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="logsStatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <label class="chip">Group
+              <select id="logsGroupSelect"></select>
+            </label>
+            <label class="chip">Stream
+              <select id="logsStreamSelect"></select>
+            </label>
+            <label class="chip">Window
+              <select id="logsWindowSelect">
+                <option value="300000">5m</option>
+                <option value="900000" selected>15m</option>
+                <option value="3600000">1h</option>
+                <option value="21600000">6h</option>
+                <option value="86400000">24h</option>
+              </select>
+            </label>
+            <label class="chip">Limit
+              <select id="logsLimitSelect">
+                <option value="100">100</option>
+                <option value="200" selected>200</option>
+                <option value="300">300</option>
+                <option value="500">500</option>
+              </select>
+            </label>
+          </div>
+          <div class="row">
+            <input id="logsSearchInput" class="search" type="search" placeholder="Search stream name or log content..." autocomplete="off">
+            <button id="logsClearSearchButton" class="ghost" type="button">Clear</button>
+            <label class="chip"><input id="logsWrapToggle" type="checkbox" checked> Wrap lines</label>
+            <label class="chip"><input id="logsTailToggle" type="checkbox"> Tail newest</label>
+            <button id="logsExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="logsCollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Events</span><strong id="logsTotalStat">0</strong><small id="logsVisibleStat">0 visible</small></article>
+          <article class="stat"><span>Streams</span><strong id="logsStreamsStat">0</strong><small>Streams in selected group</small></article>
+          <article class="stat"><span>Latest</span><strong id="logsNewestStat" class="small">No events</strong><small id="logsUpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="logsFetchStat" class="small">Idle</strong><small id="logsFetchDetail">Endpoint: ${escapeHtml(CLOUDWATCH_ENDPOINT)} (${escapeHtml(CLOUDWATCH_REGION)})</small></article>
+        </section>
+
+        <div id="logsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="logsBanner" class="banner" hidden></div>
+            <div id="logsEmpty" class="empty" hidden></div>
+            <section id="logsList" class="logList" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="logsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="secretsPanel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="secretsRefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="secretsAutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="secretsIntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="secretsStatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <input id="secretsSearchInput" class="search" type="search" placeholder="Search secret name, description, service, tags..." autocomplete="off">
+            <button id="secretsClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="secretsExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="secretsCollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Secrets</span><strong id="secretsTotalStat">0</strong><small id="secretsVisibleStat">0 visible</small></article>
+          <article class="stat"><span>Loaded</span><strong id="secretsLoadedStat">0</strong><small>Values loaded this session</small></article>
+          <article class="stat"><span>Latest</span><strong id="secretsNewestStat" class="small">No secrets</strong><small id="secretsUpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="secretsFetchStat" class="small">Idle</strong><small id="secretsFetchDetail">Endpoint: ${escapeHtml(SECRETS_ENDPOINT)} (${escapeHtml(SECRETS_REGION)})</small></article>
+        </section>
+
+        <div id="secretsContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="secretsBanner" class="banner" hidden></div>
+            <div id="secretsEmpty" class="empty" hidden></div>
+            <section id="secretsList" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="secretsScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="s3Panel" class="workspacePanel" hidden>
+        <section class="toolControls">
+          <div class="row">
+            <button id="s3RefreshButton" class="primary" type="button">🔄 Refresh</button>
+            <label class="chip"><input id="s3AutoToggle" type="checkbox" checked> Live refresh</label>
+            <label class="chip">Every
+              <select id="s3IntervalSelect">
+                <option value="5000">5s</option>
+                <option value="10000" selected>10s</option>
+                <option value="15000">15s</option>
+                <option value="30000">30s</option>
+                <option value="60000">60s</option>
+              </select>
+            </label>
+            <span id="s3StatusChip" class="status">Waiting for first refresh...</span>
+          </div>
+          <div class="row">
+            <label class="chip">Bucket
+              <select id="s3BucketSelect"></select>
+            </label>
+            <input id="s3PrefixInput" class="search searchCompact" type="search" placeholder="Prefix filter (optional)" autocomplete="off">
+            <button id="s3ApplyPrefixButton" class="ghost" type="button">Apply prefix</button>
+          </div>
+          <div class="row">
+            <input id="s3SearchInput" class="search" type="search" placeholder="Search object key, storage class, or etag..." autocomplete="off">
+            <button id="s3ClearSearchButton" class="ghost" type="button">Clear</button>
+            <button id="s3ExpandAllButton" class="ghost" type="button">Open all</button>
+            <button id="s3CollapseAllButton" class="ghost" type="button">Close all</button>
+          </div>
+        </section>
+
+        <section class="stats">
+          <article class="stat"><span>Objects</span><strong id="s3TotalStat">0</strong><small id="s3VisibleStat">0 visible</small></article>
+          <article class="stat"><span>Buckets</span><strong id="s3BucketsStat">0</strong><small>Available in LocalStack</small></article>
+          <article class="stat"><span>Latest</span><strong id="s3NewestStat" class="small">No objects</strong><small id="s3UpdatedStat">Not refreshed yet</small></article>
+          <article class="stat"><span>Fetch</span><strong id="s3FetchStat" class="small">Idle</strong><small id="s3FetchDetail">Endpoint: ${escapeHtml(S3_ENDPOINT)} (${escapeHtml(S3_REGION)})</small></article>
+        </section>
+
+        <div id="s3ContentPane" class="contentPane">
+          <div class="contentStack">
+            <div id="s3Banner" class="banner" hidden></div>
+            <div id="s3Empty" class="empty" hidden></div>
+            <section id="s3List" class="list" aria-live="polite"></section>
+            <div class="paneTopWrap">
+              <button id="s3ScrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">&#8593;</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>`;
+}
+
+function renderStyles() {
+  return `
+    :root{--panel:rgba(255,255,255,.82);--panel-strong:#fff;--card-shell:linear-gradient(180deg,rgba(255,246,236,.98),rgba(255,252,247,.99));--card-body:#fffdf9;--log-shell:linear-gradient(180deg,rgba(239,246,255,.98),rgba(248,251,255,.99));--log-body:#f8fbff;--secret-shell:linear-gradient(180deg,rgba(239,251,246,.98),rgba(247,253,249,.99));--secret-body:#f6fcf8;--bucket-shell:linear-gradient(180deg,rgba(255,249,232,.98),rgba(255,252,243,.99));--bucket-body:#fffcf2;--ink:#1f2933;--muted:#607080;--line:rgba(31,41,51,.12);--card-line:rgba(207,109,60,.24);--log-line:rgba(48,113,169,.22);--secret-line:rgba(31,143,101,.2);--bucket-line:rgba(181,137,37,.22);--accent:#cf6d3c;--accent-soft:rgba(207,109,60,.1);--info:#3071a9;--info-soft:rgba(48,113,169,.1);--secret:#1f8f65;--secret-soft:rgba(31,143,101,.1);--bucket:#9d6b00;--bucket-soft:rgba(181,137,37,.12);--ok:#1f8f65;--warn:#9d5f00;--bad:#b33a3a;--shadow:0 12px 28px rgba(35,43,53,.08);--card-shadow:0 18px 34px rgba(122,78,34,.12);--log-shadow:0 16px 32px rgba(48,113,169,.12);--secret-shadow:0 16px 32px rgba(31,143,101,.12);--bucket-shadow:0 16px 32px rgba(181,137,37,.12);}
+    *{box-sizing:border-box}
+    html,body{margin:0;height:100%;overflow:hidden}
+    body{color-scheme:light;background:radial-gradient(circle at top left,rgba(207,109,60,.18),transparent 28%),radial-gradient(circle at top right,rgba(31,143,101,.12),transparent 24%),linear-gradient(180deg,#f8f5ef,#efe7da);color:var(--ink);font:15px/1.45 "Aptos","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;transition:background-color .18s ease,color .18s ease}
+    button,input,select,textarea{font:inherit}
+    button{cursor:pointer}
+    .page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;max-width:1360px;height:100vh;height:100dvh;margin:0 auto;padding:14px;overflow:hidden}
+    .hero{display:block;margin-bottom:0}
+    .heroShell,.toolControls,.stat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
+    .card{background:var(--card-shell);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
+    .heroShell,.toolControls{border-radius:18px}
+    .heroShell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
+    .toolControls{padding:12px}
+    .heroIdentity{display:grid;gap:3px;min-width:0}
+    .eyebrow{margin:0 0 4px;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
+    h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.85rem);line-height:.96;letter-spacing:-.05em}
+    .lede{margin:8px 0 0;max-width:54ch;color:var(--muted);font-size:.92rem}
+    .heroTopRow{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .heroActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .heroStatusRow{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px;align-items:center}
+    .heroStatusLabel{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
+    .helper{margin:0;color:var(--muted);font-size:.89rem}
+    .healthStrip{display:flex;flex:1 1 520px;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
+    .healthBadge{display:inline-flex;align-items:center;gap:8px;min-height:30px;max-width:100%;padding:0 10px;border-radius:999px;border:1px solid rgba(31,41,51,.1);background:rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(15,23,42,.06);text-align:left;transition:transform .12s ease,background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
+    .healthBadgeName{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;white-space:nowrap}
+    .healthBadgeSummary{min-width:0;overflow:hidden;color:var(--muted);font-size:.78rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
+    .healthBadge.ok{border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.1)}
+    .healthBadge.bad{border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.1)}
+    .healthBadge.warn{border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.1)}
+    .healthBadge.active{border-color:rgba(207,109,60,.28);background:rgba(207,109,60,.16);box-shadow:0 10px 24px rgba(207,109,60,.12)}
+    .healthBadge.active .healthBadgeName,.healthBadge.active .healthBadgeSummary{color:var(--ink)}
+    .healthRefreshButton{flex:0 0 auto;padding:0 10px}
+    .primary,.ghost,.mini,.tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid transparent;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .themeToggle{white-space:nowrap}
+    .workspacePanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:6px;min-height:0}
+    .workspacePanel[hidden]{display:none}
+    .toolControls{display:grid;gap:8px}
+    .contentPane{height:100%;min-height:0;overflow:auto;scroll-behavior:smooth;padding-right:4px}
+    .contentStack{display:grid;gap:8px;min-width:100%;padding-bottom:18px}
+    .paneTopWrap{display:flex;justify-content:flex-end;position:sticky;bottom:14px;pointer-events:none;padding-right:10px}
+    .paneTopButton{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:rgba(31,41,51,.42);color:#fff;font-size:1.1rem;line-height:1;backdrop-filter:blur(12px);box-shadow:0 10px 24px rgba(31,41,51,.18);opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,background-color .12s ease;z-index:6}
+    .paneTopButton.visible{opacity:.78;transform:translateY(0);visibility:visible;pointer-events:auto}
+    .paneTopButton.visible:hover{opacity:1;background:rgba(31,41,51,.62);transform:translateY(-1px)}
+    .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+    .primary,.ghost{min-height:34px;padding:0 12px;font-weight:700}
+    .mini,.tab{min-height:28px;padding:0 10px;font-weight:600}
+    .primary{background:var(--accent);color:#fff7f2}
+    .ghost,.mini{background:rgba(255,255,255,.76);border-color:var(--line);color:var(--ink)}
+    .tab{background:transparent;color:var(--muted)}
+    .tab.active{background:#fff;border-color:rgba(207,109,60,.18);color:var(--ink)}
+    .primary:hover,.ghost:hover,.mini:hover,.tab:hover{transform:translateY(-1px)}
+    .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);font-weight:600;font-size:.88rem}
+    .chip input{margin:0;accent-color:var(--accent)}
+    .chip select{border:none;background:transparent;outline:none;color:var(--ink)}
+    .search{flex:1 1 260px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--ink);outline:none}
+    .searchCompact{flex:1 1 220px}
+    .status{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid var(--line);color:var(--muted);font-size:.86rem;font-weight:600}
+    .status.ok{color:var(--ok);border-color:rgba(31,143,101,.22);background:rgba(31,143,101,.08)}
+    .status.warn{color:var(--warn);border-color:rgba(157,95,0,.22);background:rgba(157,95,0,.08)}
+    .status.bad{color:var(--bad);border-color:rgba(179,58,58,.22);background:rgba(179,58,58,.08)}
+    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:0}
+    .stat{border-radius:16px;padding:10px 12px}
+    .stat span{display:block;margin-bottom:4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .stat strong{display:block;font-size:clamp(1.6rem,3vw,2rem);line-height:1;letter-spacing:-.05em}
+    .stat strong.small{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
+    .stat small{display:block;margin-top:4px;color:var(--muted);font-size:.82rem}
+    .banner,.empty{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
+    .banner{color:var(--bad);border-color:rgba(179,58,58,.24);background:rgba(179,58,58,.08)}
+    .list{display:grid;gap:12px;align-content:start}
+    .logList{display:grid;gap:10px;align-content:start;width:100%}
+    .card{overflow:hidden;border-radius:16px}
+    .card.new{border-color:rgba(31,143,101,.3);box-shadow:var(--card-shadow),0 0 0 1px rgba(31,143,101,.12)}
+    .summary{list-style:none;display:grid;gap:7px;padding:12px 14px;cursor:pointer;background:linear-gradient(180deg,rgba(255,250,244,.88),rgba(255,246,238,.96))}
+    .summary::-webkit-details-marker{display:none}
+    .top,.tags,.toolbar,.actions,.attachments{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+    .top{justify-content:space-between}
+    .head{min-width:0;flex:1 1 320px}
+    .head h2{margin:0;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.18;letter-spacing:-.03em;word-break:break-word}
+    .meta{margin:4px 0 0;color:var(--muted);font-size:.88rem;word-break:break-word}
+    .time,.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:.76rem;font-weight:700}
+    .time{background:rgba(31,41,51,.06)}
+    .tag{background:var(--accent-soft);color:#8d5632}
+    .tag.new{background:rgba(31,143,101,.1);color:var(--ok)}
+    .tag.bad{background:rgba(179,58,58,.1);color:var(--bad)}
+    .preview{margin:0;color:#324150;font-size:.9rem}
+    .body{display:grid;gap:10px;padding:10px 14px 14px;border-top:1px solid rgba(207,109,60,.14);background:var(--card-body)}
+    .toolbar{justify-content:space-between;align-items:center}
+    .tabs{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:rgba(207,109,60,.08)}
+    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
+    .metaCard{padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(207,109,60,.12)}
+    .metaCard dt{margin:0 0 4px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
+    .metaCard dd{margin:0;word-break:break-word}
+    .attachments{gap:6px}
+    .attachment{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,248,240,.96);border:1px solid rgba(207,109,60,.12);font-size:.84rem}
+    .attachmentLink{color:#8d5632;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
+    .attachmentLink:hover{transform:translateY(-1px);background:#fff;border-color:rgba(207,109,60,.28)}
+    .panel{overflow:hidden;border-radius:12px;border:1px solid rgba(207,109,60,.14);background:#fff}
+    .logEvent{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--log-line);background:var(--log-shell);box-shadow:var(--log-shadow)}
+    .secretCard{background:var(--secret-shell);border:1px solid var(--secret-line);box-shadow:var(--secret-shadow)}
+    .s3Card{background:var(--bucket-shell);border:1px solid var(--bucket-line);box-shadow:var(--bucket-shadow)}
+    .logSummary{list-style:none;display:grid;gap:7px;padding:10px 12px;cursor:pointer}
+    .logSummary::-webkit-details-marker{display:none}
+    .secretSummary{background:linear-gradient(180deg,rgba(244,253,248,.9),rgba(236,249,242,.96))}
+    .s3Summary{background:linear-gradient(180deg,rgba(255,251,238,.92),rgba(255,246,223,.98))}
+    .logSummaryTop{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
+    .logMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+    .logSummaryActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
+    .logTag{background:var(--info-soft);color:var(--info);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .secretTag{background:var(--secret-soft);color:var(--secret);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .bucketTag{background:var(--bucket-soft);color:var(--bucket);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .logPreview{margin:0;color:#324150;font:600 .88rem/1.45 "Cascadia Code","Consolas",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .logBody{padding:8px 12px 12px;border-top:1px solid rgba(48,113,169,.14);background:var(--log-body)}
+    .secretBody{border-top-color:rgba(31,143,101,.14);background:var(--secret-body)}
+    .s3Body{border-top-color:rgba(181,137,37,.18);background:var(--bucket-body)}
+    .logCopyButton{box-shadow:none}
+    .logBody pre{border-radius:12px;border:1px solid rgba(48,113,169,.14);padding:12px;background:linear-gradient(180deg,rgba(48,113,169,.04),transparent 140px),#fff}
+    .secretValuePanel{display:grid;gap:10px}
+    .secretValuePanel pre{border-radius:12px;border:1px solid rgba(31,143,101,.14);padding:12px;background:linear-gradient(180deg,rgba(31,143,101,.04),transparent 140px),#fff}
+    .s3PreviewPanel{display:grid;gap:10px}
+    .s3PreviewImage{max-width:min(100%,640px);border-radius:12px;border:1px solid rgba(181,137,37,.16);background:#fff}
+    .logBody.wrapOff pre{white-space:pre;word-break:normal}
+    .tag.levelError{background:rgba(179,58,58,.12);color:var(--bad)}
+    .tag.levelWarn{background:rgba(157,95,0,.12);color:var(--warn)}
+    .tag.levelInfo{background:rgba(48,113,169,.12);color:var(--info)}
+    .tag.levelDebug{background:rgba(96,112,128,.12);color:var(--muted)}
+    .jsonSyntax .jsonKey{color:#b55f2d}
+    .jsonSyntax .jsonString{color:#1f8f65}
+    .jsonSyntax .jsonNumber{color:#2f6ea9}
+    .jsonSyntax .jsonBoolean{color:#9d5f00}
+    .jsonSyntax .jsonNull{color:#b33a3a}
+    iframe{width:100%;min-height:560px;border:none;background:#fff}
+    pre{margin:0;padding:12px;white-space:pre-wrap;word-break:break-word;overflow:auto;font:12.5px/1.45 "Cascadia Code","Consolas",monospace;color:#102030;background:linear-gradient(180deg,rgba(207,109,60,.04),transparent 140px),#fff}
+    .placeholder,.inlineError{padding:12px}
+    .inlineError{color:var(--bad)}
+    body[data-theme="dark"]{color-scheme:dark;background:radial-gradient(circle at top left,rgba(207,109,60,.12),transparent 28%),radial-gradient(circle at top right,rgba(48,113,169,.12),transparent 26%),linear-gradient(180deg,#10161d,#17202a)}
+    body[data-theme="dark"] .heroShell,
+    body[data-theme="dark"] .toolControls,
+    body[data-theme="dark"] .stat{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.16);box-shadow:0 14px 30px rgba(0,0,0,.32)}
+    body[data-theme="dark"] .card{background:linear-gradient(180deg,rgba(50,35,28,.96),rgba(31,25,22,.98));border-color:rgba(207,109,60,.24);box-shadow:0 18px 34px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .logEvent{background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(14,24,36,.98));border-color:rgba(73,144,204,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .secretCard{background:linear-gradient(180deg,rgba(19,39,31,.96),rgba(14,30,24,.98));border-color:rgba(64,170,126,.22);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .s3Card{background:linear-gradient(180deg,rgba(52,42,17,.96),rgba(37,30,13,.98));border-color:rgba(181,137,37,.24);box-shadow:0 16px 32px rgba(0,0,0,.34)}
+    body[data-theme="dark"] .healthBadge{background:rgba(15,21,30,.84);border-color:rgba(148,163,184,.18);box-shadow:0 10px 22px rgba(0,0,0,.28)}
+    body[data-theme="dark"] .healthBadge.active{border-color:rgba(207,109,60,.32);background:rgba(207,109,60,.18);box-shadow:0 12px 26px rgba(0,0,0,.3)}
+    body[data-theme="dark"] .healthBadge.active .healthBadgeName,
+    body[data-theme="dark"] .healthBadge.active .healthBadgeSummary{color:#f8ede6}
+    body[data-theme="dark"] .tab{color:#aab8c8}
+    body[data-theme="dark"] .tab.active,
+    body[data-theme="dark"] .ghost,
+    body[data-theme="dark"] .mini,
+    body[data-theme="dark"] .chip,
+    body[data-theme="dark"] .status,
+    body[data-theme="dark"] .search{background:rgba(18,25,35,.88);border-color:rgba(148,163,184,.18);color:#edf2f7}
+    body[data-theme="dark"] .chip select,
+    body[data-theme="dark"] .search::placeholder{color:#9fb0c2}
+    body[data-theme="dark"] .ghost,
+    body[data-theme="dark"] .mini,
+    body[data-theme="dark"] .tab.active{border-color:rgba(148,163,184,.18)}
+    body[data-theme="dark"] .summary{background:linear-gradient(180deg,rgba(58,40,31,.88),rgba(45,33,28,.96))}
+    body[data-theme="dark"] .body{background:#211a17;border-top-color:rgba(207,109,60,.18)}
+    body[data-theme="dark"] .logSummary{background:linear-gradient(180deg,rgba(21,34,47,.94),rgba(16,27,39,.98))}
+    body[data-theme="dark"] .logBody{background:#13212d;border-top-color:rgba(73,144,204,.18)}
+    body[data-theme="dark"] .secretSummary{background:linear-gradient(180deg,rgba(21,43,34,.94),rgba(16,34,27,.98))}
+    body[data-theme="dark"] .secretBody{background:#12241c;border-top-color:rgba(64,170,126,.18)}
+    body[data-theme="dark"] .s3Summary{background:linear-gradient(180deg,rgba(53,41,19,.94),rgba(39,31,15,.98))}
+    body[data-theme="dark"] .s3Body{background:#241d10;border-top-color:rgba(181,137,37,.18)}
+    body[data-theme="dark"] .metaCard{background:rgba(17,25,35,.64);border-color:rgba(148,163,184,.14)}
+    body[data-theme="dark"] .attachment{background:rgba(50,35,28,.9);border-color:rgba(207,109,60,.18)}
+    body[data-theme="dark"] .attachmentLink{color:#f6c4a9}
+    body[data-theme="dark"] .attachmentLink:hover{background:rgba(75,52,39,.96);border-color:rgba(246,196,169,.26)}
+    body[data-theme="dark"] .panel,
+    body[data-theme="dark"] pre,
+    body[data-theme="dark"] .logBody pre{background:linear-gradient(180deg,rgba(73,144,204,.06),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .secretValuePanel pre{background:linear-gradient(180deg,rgba(64,170,126,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .s3PreviewPanel pre{background:linear-gradient(180deg,rgba(181,137,37,.08),transparent 140px),#0f1722;color:#e8edf3;border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .panel{border-color:rgba(148,163,184,.14)}
+    body[data-theme="dark"] .banner,
+    body[data-theme="dark"] .empty{background:rgba(15,21,30,.82);border-color:rgba(148,163,184,.16)}
+    body[data-theme="dark"] .time{background:rgba(148,163,184,.12);color:#e8edf3}
+    body[data-theme="dark"] .tag{background:rgba(207,109,60,.14);color:#f0c2aa}
+    body[data-theme="dark"] .logTag{background:rgba(73,144,204,.16);color:#93cfff}
+    body[data-theme="dark"] .secretTag{background:rgba(64,170,126,.16);color:#9fe0be}
+    body[data-theme="dark"] .bucketTag{background:rgba(181,137,37,.16);color:#f1d38c}
+    body[data-theme="dark"] .preview,
+    body[data-theme="dark"] .logPreview,
+    body[data-theme="dark"] .metaCard dd,
+    body[data-theme="dark"] .head h2,
+    body[data-theme="dark"] .stat strong,
+    body[data-theme="dark"] h1{color:#edf2f7}
+    body[data-theme="dark"] .jsonSyntax .jsonKey{color:#f0b08a}
+    body[data-theme="dark"] .jsonSyntax .jsonString{color:#80d5b0}
+    body[data-theme="dark"] .jsonSyntax .jsonNumber{color:#94c9ff}
+    body[data-theme="dark"] .jsonSyntax .jsonBoolean{color:#f0c274}
+    body[data-theme="dark"] .jsonSyntax .jsonNull{color:#ff9c9c}
+    body[data-theme="dark"] .meta,
+    body[data-theme="dark"] .helper,
+    body[data-theme="dark"] .lede,
+    body[data-theme="dark"] .stat small,
+    body[data-theme="dark"] .stat span,
+    body[data-theme="dark"] .chip,
+    body[data-theme="dark"] .tab{color:#aab8c8}
+    body[data-theme="dark"] .paneTopButton{border-color:rgba(255,255,255,.18);background:rgba(8,12,18,.58);color:#edf2f7}
+    body[data-theme="dark"] .paneTopButton.visible:hover{background:rgba(8,12,18,.8)}
+    @media (max-width:1080px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
+    @media (max-width:720px){.page{padding:12px}.heroShell,.heroTopRow,.toolbar,.row,.heroActions{align-items:stretch}.heroTopRow{justify-content:stretch;flex-basis:100%}.heroStatusRow{align-items:flex-start}.heroStatusLabel,.healthStrip{flex-basis:100%}.primary,.ghost,.chip,.themeToggle{width:100%;justify-content:center}.healthBadge{justify-content:flex-start}.logSummaryTop,.logSummaryActions{align-items:flex-start}.contentPane{min-height:300px}iframe{min-height:420px}}
+  `;
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export { getClientConfig, renderHtml };

_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.
+

_reference/testPlans/commission-based-cut-manual-test-plan.md

@@ -0,0 +1,424 @@
+# Commission-Based Cut Feature Manual Test Plan
+
+## Purpose
+Use this guide to manually test the commission-based cut feature from an end-user point of view.
+
+This plan is written for a non-technical tester. Follow the steps exactly as written and mark each scenario as Pass or Fail.
+
+## What You Need Before You Start
+- A login that can open `Manage my Shop`, `Jobs`, and `Time Tickets`.
+- At least 2 active employees in the shop.
+- At least 1 converted repair order that already has labor lines on it.
+- If possible, use a simple test job where the labor sale rates are easy to calculate.
+- A notebook, spreadsheet, or screenshot folder to record what happened.
+
+## Recommended Easy-Math Test Data
+If you can choose your own test job, use something simple like this:
+
+- Body sale rate: `$100.00`
+- Refinish sale rate: `$120.00`
+- Mechanical sale rate: `$80.00`
+- 1 Body labor line with `10.0` hours
+- 1 Refinish labor line with `4.0` hours
+
+This makes the expected payout easy to check:
+
+- `40%` of `$100.00` = `$40.00`
+- `30%` of `$120.00` = `$36.00`
+
+## Important Navigation Notes
+- Team setup is under `Manage my Shop` > `Employee Teams`.
+- Team assignment happens on the job line grid in the `Team` column.
+- Automatic payout happens from the job's `Labor Allocations` card using the `Pay All` button.
+- If your shop uses task presets, the `Flag Hours` button can preview the payout method before committing tickets.
+
+---
+
+## Scenario 1: Create a Simple Commission Team
+### Goal
+Confirm a team member can be set to commission and saved successfully.
+
+### Steps
+1. Sign in.
+2. Click `Manage my Shop`.
+3. Click the `Employee Teams` tab.
+4. Click `New Team`.
+5. In `Team Name`, type `Commission Team Test`.
+6. Make sure `Active` is turned on.
+7. In `Max Load`, enter `10`.
+8. Click `New Team Member`.
+9. In `Employee`, choose an active employee.
+10. In `Allocation %`, enter `100`.
+11. In `Payout Method`, choose `Commission %`.
+12. In each commission field that appears, enter a value.
+13. For the main labor types you plan to test, use these values:
+14. Enter `40` for Body.
+15. Enter `30` for Refinish.
+16. Enter `25` for Mechanical.
+17. Enter `20` for Frame.
+18. Enter `15` for Glass.
+19. Fill in the remaining commission boxes with any valid number from `0` to `100`.
+20. Click `Save`.
+
+### Expected Result
+- The team saves successfully.
+- The team stays visible in the Employee Teams list.
+- The team member card shows a `Commission` tag.
+- The `Allocation Total` shows `100%`.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 2: Allocation Total Must Equal 100%
+### Goal
+Confirm the system blocks a team that does not total exactly 100%.
+
+### Steps
+1. Stay on the same team.
+2. Change `Allocation %` from `100` to `90`.
+3. Click `Save`.
+4. Change `Allocation %` from `90` to `110`.
+5. Click `Save`.
+6. Change `Allocation %` back to `100`.
+7. Click `Save` again.
+
+### Expected Result
+- When the total is `90%`, the system should not save.
+- When the total is `110%`, the system should not save.
+- The page should show that the allocation total is not correct.
+- When the total is set back to `100%`, the save should succeed.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 3: The Same Employee Cannot Be Added Twice
+### Goal
+Confirm the same employee cannot appear twice on one team.
+
+### Steps
+1. Open the same team again.
+2. Click `New Team Member`.
+3. Choose the same employee already used on the team.
+4. Enter any valid allocation amount.
+5. Choose `Commission %`.
+6. Fill in all required commission fields.
+7. Click `Save`.
+
+### Expected Result
+- The system should block the save.
+- The team should not save with the same employee listed twice.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 4: Switching Between Hourly and Commission Changes the Input Style
+### Goal
+Confirm the rate section changes correctly when the payout method changes.
+
+### Steps
+1. Open the same team again.
+2. On the team member row, change `Payout Method` from `Commission %` to `Hourly`.
+3. Look at the rate fields that appear.
+4. Change `Payout Method` back to `Commission %`.
+5. Look at the rate fields again.
+
+### Expected Result
+- In `Hourly` mode, the rate boxes should behave like money/rate fields.
+- In `Commission %` mode, the rate boxes should behave like percentage fields.
+- The screen should clearly show you are editing the correct type of value.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 5: Boundary Values for Commission %
+### Goal
+Confirm the feature accepts valid boundary values and blocks invalid ones.
+
+### Steps
+1. Open the team again.
+2. In one commission box, enter `0`.
+3. In another commission box, enter `100`.
+4. Click `Save`.
+5. Try to type a value above `100` in one of the commission boxes.
+6. Try to type a negative value in one of the commission boxes.
+
+### Expected Result
+- `0` should be accepted.
+- `100` should be accepted.
+- Values above `100` should not be allowed or should fail validation.
+- Negative values should not be allowed or should fail validation.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 6: Inactive Teams Should Not Be Offered for New Assignment
+### Goal
+Confirm inactive teams do not appear as normal team choices.
+
+### Steps
+1. Open the team again.
+2. Turn `Active` off.
+3. Click `Save`.
+4. Open a converted repair order.
+5. Go to the job lines area where the `Team` column is visible.
+6. Click inside the `Team` field on any labor line.
+7. Open the team drop-down list.
+8. Look for `Commission Team Test`.
+9. Go back to `Manage my Shop` > `Employee Teams`.
+10. Turn `Active` back on.
+11. Click `Save`.
+12. Return to the same job line and open the `Team` drop-down again.
+
+### Expected Result
+- When the team is inactive, it should not appear as a normal assignment choice.
+- After turning it back on, it should appear again.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 7: Assign the Commission Team to a Labor Line
+### Goal
+Confirm the team can be assigned to a job line from the job screen.
+
+### Steps
+1. Open a converted repair order that has labor lines.
+2. Find a labor line in the job line grid.
+3. In the `Team` column, click the blank area or the current team name.
+4. From the drop-down list, choose `Commission Team Test`.
+5. Click outside the field so it saves.
+6. Repeat for at least 1 Body line and 1 Refinish line if both exist.
+
+### Expected Result
+- The selected team name should appear in the `Team` column.
+- The assignment should stay in place after the screen refreshes.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 8: Pay All Creates Commission-Based Tickets
+### Goal
+Confirm `Pay All` creates time tickets using the commission rate, not a flat hourly rate.
+
+### Steps
+1. Use a converted repair order that has:
+2. At least 1 labor line assigned to `Commission Team Test`.
+3. Known labor sale rates on the job.
+4. No existing time tickets for the same employee and labor type.
+5. Open that repair order.
+6. Go to the labor/payroll area where the `Labor Allocations` card is visible.
+7. Write down the following before you click anything:
+8. The labor type on the line.
+9. The sold labor rate for that labor type.
+10. The hours on that line.
+11. The commission % you entered for that labor type on the team.
+12. Click `Pay All`.
+13. Wait for the success message.
+14. Look at the `Time Tickets` list on the same screen.
+15. Find the new ticket created for that employee.
+
+### Expected Result
+- The system should show `All hours paid out successfully.`
+- A new time ticket should appear.
+- The ticket rate should equal:
+- `sale rate x commission %`
+- Example: if Body sale rate is `$100.00` and commission is `40%`, the ticket rate should be `$40.00`.
+- The productive hours should match the assigned labor hours for that employee.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 9: Different Labor Types Use Different Commission Rates
+### Goal
+Confirm the feature uses the correct commission % for each labor type.
+
+### Steps
+1. Use a job that has at least:
+2. One Body labor line.
+3. One Refinish labor line.
+4. Make sure both lines are assigned to `Commission Team Test`.
+5. Confirm your team is set up like this:
+6. Body = `40%`
+7. Refinish = `30%`
+8. Open the job's `Labor Allocations` area.
+9. Click `Pay All`.
+10. Review the new time tickets that are created.
+
+### Expected Result
+- The Body ticket should use the Body commission %.
+- The Refinish ticket should use the Refinish commission %.
+- Example:
+- If Body sale rate is `$100.00`, Body payout rate should be `$40.00`.
+- If Refinish sale rate is `$120.00`, Refinish payout rate should be `$36.00`.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 10: Mixed Team With Commission and Hourly Members
+### Goal
+Confirm one team can contain both commission and hourly members, and each person is paid correctly.
+
+### Steps
+1. Open `Manage my Shop` > `Employee Teams`.
+2. Open `Commission Team Test`.
+3. Edit the first team member:
+4. Keep Employee 1 as `Commission %`.
+5. Change `Allocation %` to `60`.
+6. Make sure Body commission is still `40`.
+7. Add a second team member.
+8. Choose a different active employee.
+9. Set `Allocation %` to `40`.
+10. Set `Payout Method` to `Hourly`.
+11. Enter an hourly rate for each required labor type.
+12. For Body, use `$25.00`.
+13. Fill in the other required hourly boxes with valid values.
+14. Make sure the total allocation shows `100%`.
+15. Click `Save`.
+16. Assign this team to a Body line with `10.0` hours.
+17. Click `Pay All`.
+18. Review the new time tickets.
+
+### Expected Result
+- Employee 1 should receive `60%` of the hours at the commission-derived rate.
+- Employee 2 should receive `40%` of the hours at the hourly rate you entered.
+- Example with a 10-hour Body line and `$100.00` sale rate:
+- Employee 1 should get `6.0` hours at `$40.00`.
+- Employee 2 should get `4.0` hours at `$25.00`.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 11: Pay All Only Adds the Remaining Hours
+### Goal
+Confirm `Pay All` does not duplicate hours that were already paid.
+
+### Steps
+1. Use a job with one Body line assigned to `Commission Team Test`.
+2. Make sure the line has `10.0` hours.
+3. In the `Time Tickets` card, click `Enter New Time Ticket`.
+4. Create a manual time ticket for the same employee and the same labor type.
+5. Enter `4.0` productive hours.
+6. Save the manual time ticket.
+7. Go back to the `Labor Allocations` card.
+8. Click `Pay All`.
+9. Review the new ticket that is created.
+
+### Expected Result
+- The system should only create the remaining unpaid hours.
+- In this example, it should add `6.0` hours, not `10.0`.
+- The payout rate should still use the current commission-based rate.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 12: Unassigned Labor Lines Should Block Automatic Payout
+### Goal
+Confirm `Pay All` does not silently pay lines that do not have a team assigned.
+
+### Steps
+1. Open a converted repair order with at least 2 labor lines.
+2. Assign `Commission Team Test` to one line.
+3. Leave the second labor line with no team assigned.
+4. Go to the `Labor Allocations` card.
+5. Click `Pay All`.
+
+### Expected Result
+- The system should not quietly pay everything.
+- You should see an error telling you that not all hours have been assigned.
+- The unassigned line should still need manual attention.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Scenario 13: Flag Hours Preview Shows the Correct Payout Method
+### Goal
+If your shop uses task presets, confirm the preview shows `Commission` for commission-based tickets.
+
+### Steps
+1. Open a converted repair order.
+2. Go to the `Time Tickets` card.
+3. Click `Flag Hours`.
+4. Choose a task preset.
+5. Wait for the preview table to load.
+6. Review the `Payout Method` column in the preview.
+7. If the preview includes more than one employee, review each row.
+
+### Expected Result
+- The preview table should load without error.
+- Rows for commission-based employees should show `Commission`.
+- Rows for hourly employees should show `Hourly`.
+- If there are unassigned hours, a warning should appear.
+
+### Record
+- [ ] Pass
+- [ ] Fail
+- Notes:
+
+---
+
+## Quick Regression Checklist
+- [ ] I can create a commission-based team.
+- [ ] Allocation must total exactly 100%.
+- [ ] The same employee cannot be added twice to one team.
+- [ ] Inactive teams do not appear for normal assignment.
+- [ ] A team can be assigned to job lines from the `Team` column.
+- [ ] `Pay All` creates commission-based tickets correctly.
+- [ ] Different labor types use different commission percentages.
+- [ ] Mixed commission and hourly teams calculate correctly.
+- [ ] `Pay All` only creates the remaining unpaid hours.
+- [ ] Unassigned labor lines stop automatic payout.
+- [ ] `Flag Hours` preview shows the correct payout method.
+
+## Tester Sign-Off
+- Tester name:
+- Test date:
+- Environment:
+- Overall result:
+- Follow-up issues found:

_reference/testPlans/select-component-test-plan.md

@@ -0,0 +1,647 @@
+# Ant Design Select.Option Deprecation - Manual Testing Plan
+**Branch:** `feature/IO-3544-Ant-Select-Deprecation`  
+**Base Branch:** `master-AIO`  
+**Jira:** IO-3544
+
+## Overview
+This branch migrates all Ant Design `<Select.Option>` components to the new `options` prop pattern (required for Ant Design v5+). The deprecated `Select.Option` child component pattern has been replaced with the `options` array prop.
+
+## What Changed
+- **Old Pattern:** `<Select><Select.Option value="x">Label</Select.Option></Select>`
+- **New Pattern:** `<Select options={[{ value: "x", label: "Label" }]} />`
+- Search filtering updated from `optionFilterProp: "children"` to `optionFilterProp: "label"` or custom props
+- Custom filter functions updated to use `option.label` instead of `option.props.children`
+- Complex components with custom rendered content (tags, icons, styled elements) now use `label` prop with JSX
+
+## Code Review Findings ✅
+**Validation completed on representative samples:**
+- ✅ Search functionality properly migrated (showSearch object syntax correct)
+- ✅ Custom rendered content (tags, badges, icons) preserved in label prop
+- ✅ Labor type selectors correctly implement all 14 types
+- ✅ Vendor search with favorites and discount tags working correctly
+- ✅ Employee selectors with flat_rate/straight_time tags properly structured
+- ✅ Job search with owner display and status tags correctly migrated
+- ✅ CiecaSelect utility updated to return options array format
+- ✅ Performance optimizations added (useMemo in jobs-convert-button)
+- ✅ Custom optionFilterProp values used where needed (e.g., "name", "search")
+
+## Testing Strategy
+For each select component below, verify:
+1. ✅ **Options Display:** All options appear correctly
+2. ✅ **Selection:** Can select an option and value is saved
+3. ✅ **Search/Filter:** Search functionality works (if applicable)
+4. ✅ **Visual Rendering:** Labels, tags, and custom content display properly (especially vendor discounts, employee tags, job status badges)
+5. ✅ **Form Integration:** Value persists and submits correctly
+6. ✅ **Custom Search Props:** Components using custom optionFilterProp (name, search) work correctly
+
+---
+
+## Component Test Cases
+
+### 1. Employee Assignment & Allocation
+**Files Modified:**
+- `allocations-assignment.component.jsx`
+- `allocations-bulk-assignment.component.jsx`
+- `labor-allocations-adjustment-edit.component.jsx`
+- `employee-search-select.component.jsx`
+- `employee-search-select-email.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Job Line Allocation:** Assign employee to job line
+  - Navigate to a job → Job Lines tab
+  - Click allocate hours to an employee
+  - Verify employee dropdown shows full names
+  - Search for employee by name
+  - Verify selection saves
+
+- [ ] **Bulk Assignment:** Assign multiple job lines to employee
+  - Select multiple job lines
+  - Open bulk assignment modal
+  - Verify employee selector works
+  - Verify employee number, name, and tags (flat rate/straight time) display
+
+- [ ] **Labor Allocations Adjustment:** Edit labor allocations
+  - Navigate to labor allocations
+  - Edit adjustment form
+  - Verify employee dropdowns work with search
+
+- [ ] **Employee Search Select with Email:** 
+  - Test in any form using employee email selector (uses custom `optionFilterProp: "search"`)
+  - Search by employee number, first name, or last name
+  - Verify employee number, name display correctly
+  - **Critical:** Verify green tag shows "Flat Rate" or "Straight Time"
+  - Verify blue email tag displays when showEmail=true
+  - Test that search matches against concatenated string
+
+---
+
+### 2. Job Management
+**Files Modified:**
+- `job-search-select.component.jsx`
+- `jobs-create-jobs-info.component.jsx`
+- `jobs-detail-general.component.jsx`
+- `jobs-detail-header-actions.component.jsx`
+- `jobs-convert-button.component.jsx`
+- `jobs-close-lines.component.jsx`
+- `job-3rd-party-modal.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Job Search Select:** Search and select jobs
+  - Any form with job selector (e.g., linking jobs, referencing jobs)
+  - Search by RO number, customer name, or vehicle (uses `filterOption: false` with custom search)
+  - **Critical:** Verify job label shows: `[CLM_NO |] RO_NUMBER | Owner Name | Year Make Model`
+  - **Critical:** Verify status tag displays (e.g., "OPEN", "CLOSED")
+  - Verify loading spinner appears during search
+  - Test with claim numbers visible (clm_no prop)
+  - Verify selection works
+
+- [ ] **Create Job Form:**
+  - Navigate to Create New Job
+  - Test all dropdowns in job info section:
+    - Job type selection
+    - Status selection
+    - Department/class selection
+    - Estimator selection
+    - File handler selection
+  - Verify options display and selection works
+
+- [ ] **Job Detail General Tab:**
+  - Open any job → General tab
+  - Test select dropdowns:
+    - Status select
+    - Department/class select
+    - Estimator select
+    - File handler select
+    - Responsibility center select
+  - Verify all dropdowns work with search
+
+- [ ] **Job Convert Button:**
+  - Open estimate job
+  - Click convert to RO
+  - Verify conversion type dropdown works
+  - Test all options in conversion modal
+
+- [ ] **Close Job Lines:**
+  - Open converted job
+  - Go to close/finalize
+  - Test location selector in close lines modal
+  - Verify cost center dropdowns
+
+- [ ] **Third Party Modal:**
+  - Open job → Third party integration
+  - Test company/payer selector
+  - Verify dropdown options and selection
+
+---
+
+### 3. Job Lines & Labor
+**Files Modified:**
+- `job-lines-upsert-modal.component.jsx`
+- `job-line-bulk-assign.component.jsx`
+- `job-line-convert-to-labor.component.jsx`
+- `job-line-dispatch-button.component.jsx`
+- `job-line-status-popup.component.jsx`
+- `job-line-team-assignment.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Add/Edit Job Line:**
+  - Open job → Add new line
+  - Test all dropdowns:
+    - **Labor type selector** (LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1-LA4)
+    - Location selector
+    - Status selector
+    - Skill/category selector
+  - Verify 14 labor type options display correctly
+  - Test search functionality
+
+- [ ] **Bulk Line Assignment:**
+  - Select multiple job lines
+  - Open bulk assign
+  - Test team assignment dropdown
+
+- [ ] **Convert to Labor:**
+  - Select part line
+  - Convert to labor
+  - Test labor type dropdown (LAA, LAB, etc.)
+  - Verify all 14 types available
+
+- [ ] **Line Dispatch:**
+  - Open dispatch modal for job line
+  - Test team/employee selector
+
+- [ ] **Line Status Popup:**
+  - Change job line status
+  - Verify status dropdown options
+
+- [ ] **Team Assignment:**
+  - Assign team to job line
+  - Test team selector dropdown
+
+---
+
+### 4. Owners & Vehicles
+**Files Modified:**
+- `owner-search-select.component.jsx`
+- `vehicle-search-select.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Owner Search Select:**
+  - Any form with owner selector
+  - Search by owner name
+  - Verify owner options display
+  - Test selection and search
+
+- [ ] **Vehicle Search Select:**
+  - Any form with vehicle selector
+  - Search by VIN, license plate, or vehicle description
+  - Verify vehicle options display correctly
+  - Test selection works
+
+---
+
+### 5. Vendors & Parts
+**Files Modified:**
+- `vendor-search-select.component.jsx`
+- `parts-order-modal.component.jsx`
+- `parts-receive-modal.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Vendor Search Select:**
+  - Navigate to bills or parts ordering
+  - Test vendor selector
+  - Search for vendor by name (uses custom `optionFilterProp: "name"`)
+  - **Critical:** Verify favorites (with heart icon) display at top
+  - **Critical:** Verify discount tags show correctly (e.g., "10%")
+  - **Critical:** Verify vendor tags display
+  - Verify phone numbers display if showPhone enabled
+  - Test selection saves discount value to form
+
+- [ ] **Parts Order Modal:**
+  - Order parts for a job
+  - Test all dropdowns in order form:
+    - Vendor selector
+    - Status selector
+    - Priority selector
+  - Verify options and selection
+
+- [ ] **Parts Receive Modal:**
+  - Receive parts
+  - Test selectors in receive form
+  - Verify dropdown functionality
+
+---
+
+### 6. Bills & Payments
+**Files Modified:**
+- `bill-form.component.jsx`
+- `bill-form-lines.component.jsx`
+- `bill-form-lines-extended.formitem.component.jsx`
+- `payment-form.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Bill Entry Form:**
+  - Navigate to Bills → Add New Bill
+  - Test all dropdowns:
+    - Vendor selector
+    - Payment terms selector
+    - GL account selector
+    - Tax code selector
+  - Verify options display
+
+- [ ] **Bill Lines:**
+  - Add bill line
+  - Test line-level selectors:
+    - Job selector
+    - Job line selector
+    - Account selector
+    - Location selector
+
+- [ ] **Bill Lines Extended:**
+  - Add extended bill line
+  - Test responsibility center dropdown
+  - Test cost center dropdown
+
+- [ ] **Payment Form:**
+  - Navigate to Payments → New Payment
+  - Test all dropdowns:
+    - Vendor selector
+    - Payment method selector
+    - Bank account selector
+  - Verify selection works
+
+---
+
+### 7. Shop Configuration
+**Files Modified:**
+- `shop-info.general.component.jsx`
+- `shop-info.intake.component.jsx`
+- `shop-info.responsibilitycenters.component.jsx`
+- `shop-info.rostatus.component.jsx`
+- `shop-info.speedprint.component.jsx`
+- `shop-intellipay-config.component.jsx`
+- `shop-employees-form.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Shop Info - General:**
+  - Navigate to Shop Settings → General
+  - Test all dropdowns:
+    - Timezone selector
+    - Currency selector
+    - Date format selector
+    - Default options
+
+- [ ] **Shop Info - Intake:**
+  - Navigate to Shop Settings → Intake
+  - Test intake form selectors
+  - Verify default options work
+
+- [ ] **Shop Info - Responsibility Centers:**
+  - Navigate to Shop Settings → Responsibility Centers
+  - Test cost center dropdowns
+  - Test location selectors
+  - **Note:** This file had major changes (980 lines modified)
+
+- [ ] **Shop Info - RO Status:**
+  - Navigate to Shop Settings → RO Status
+  - Test status configuration dropdowns
+  - **Note:** 120 lines modified
+
+- [ ] **Shop Info - Speed Print:**
+  - Navigate to Shop Settings → Speed Print
+  - Test printer selector
+  - Test template selector
+
+- [ ] **IntelliPay Config:**
+  - Navigate to Shop Settings → IntelliPay
+  - Test configuration dropdowns (56 lines modified)
+
+- [ ] **Shop Employees Form:**
+  - Navigate to Shop Settings → Employees → Add/Edit
+  - Test all dropdowns:
+    - Role selector
+    - Department selector
+    - Pay type selector
+  - Verify options display
+
+---
+
+### 8. Schedule & Time Tracking
+**Files Modified:**
+- `schedule-job-modal.component.jsx`
+- `schedule-manual-event.component.jsx`
+- `tech-job-clock-in-form.component.jsx`
+- `tech-job-clock-out-button.component.jsx`
+- `time-ticket-modal.component.jsx`
+- `time-ticket-shift-form.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Schedule Job Modal:**
+  - Navigate to Schedule → Add Appointment
+  - Test all dropdowns:
+    - Job selector
+    - Employee selector
+    - Time slot selector
+    - Duration selector
+
+- [ ] **Schedule Manual Event:**
+  - Add manual event to schedule
+  - Test event type dropdown
+  - Test employee selector
+
+- [ ] **Tech Clock In Form:**
+  - Navigate to Tech Portal
+  - Clock in to job
+  - Test job selector
+  - Test operation selector
+
+- [ ] **Tech Clock Out:**
+  - Clock out from job
+  - Test reason selector (if applicable)
+  - Verify dropdown works
+
+- [ ] **Time Ticket Modal:**
+  - Enter/edit time ticket
+  - Test all dropdowns:
+    - Employee selector
+    - Job selector
+    - Operation selector
+
+- [ ] **Time Ticket Shift Form:**
+  - Manage shift
+  - Test shift type selector
+  - Test employee selector
+
+---
+
+### 9. Contracts & Courtesy Cars
+**Files Modified:**
+- `contract-convert-to-ro.component.jsx`
+- `contract-status-select.component.jsx`
+- `courtesy-car-readiness-select.component.jsx`
+- `courtesy-car-status-select.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Contract Convert to RO:**
+  - Open contract
+  - Convert to RO
+  - Test conversion options dropdown
+
+- [ ] **Contract Status Select:**
+  - Change contract status
+  - Test status options:
+    - New
+    - Out
+    - Returned
+  - Verify all 3 status options work
+
+- [ ] **Courtesy Car Readiness:**
+  - Navigate to Courtesy Cars
+  - Change car readiness
+  - Test readiness options:
+    - Ready
+    - Not Ready
+  - Verify both options work
+
+- [ ] **Courtesy Car Status:**
+  - Change courtesy car status
+  - Test all status options:
+    - In
+    - In Service
+    - Out
+    - Sold
+    - Lease Return
+    - Unavailable
+  - Verify all 6 status options work
+
+---
+
+### 10. Email & Communication
+**Files Modified:**
+- `email-overlay.component.jsx`
+- `chat-tag-ro.component.jsx`
+- `parts-shop-info-email-presets.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Email Overlay:**
+  - Send email from any feature
+  - Test all dropdowns:
+    - From email selector (current user, shop email, custom emails)
+    - Template selector
+    - Priority selector
+  - Verify custom from emails display correctly
+
+- [ ] **Chat Tag RO:**
+  - Open chat
+  - Tag to RO
+  - Test RO selector dropdown
+
+- [ ] **Parts Shop Email Presets:**
+  - Navigate to Parts Settings → Email Presets
+  - Test preset selector
+  - Verify options display
+
+---
+
+### 11. DMS Integration
+**Files Modified:**
+- `dms-post-form/cdklike-dms-post-form.jsx`
+- `dms/dms.container.jsx`
+- `dms-payables/dms-payables.container.jsx`
+
+**Test Scenarios:**
+- [ ] **DMS Post Form:**
+  - Navigate to DMS posting
+  - Test all dropdowns in post form:
+    - Account selector
+    - Department selector
+    - GL code selector
+
+- [ ] **DMS Container:**
+  - Navigate to DMS section
+  - Test filter dropdowns
+  - Verify selection works
+
+- [ ] **DMS Payables:**
+  - Navigate to DMS Payables
+  - Test payables filter selectors
+
+---
+
+### 12. Production & Admin
+**Files Modified:**
+- `production-list-config-manager.component.jsx`
+- `jobs-admin-class.component.jsx`
+- `jobs-close/jobs-close.component.jsx`
+
+**Test Scenarios:**
+- [ ] **Production List Config:**
+  - Navigate to Production Board → Configure
+  - Test column configuration dropdown
+  - Verify display settings work
+
+- [ ] **Jobs Admin Class:**
+  - Navigate to Admin → Jobs
+  - Change job class/department
+  - Test class selector dropdown
+
+- [ ] **Jobs Close Page:**
+  - Navigate to Jobs → Close/Export
+  - Test filter dropdowns:
+    - Status filter
+    - Date range
+    - Department filter
+  - Verify selections work
+
+---
+
+### 13. Miscellaneous Components
+**Files Modified:**
+- `Ciecaselect.jsx` (utility component - 75 lines modified)
+
+**Test Scenarios:**
+- [ ] **CIECA Select Utility:**
+  - Used in bill-form-lines-extended for labor type adjustments
+  - Returns options array with 14 labor types (LAA-LAU, LA1-LA4)
+  - Returns 10 part types (PAA, PAC, PAL, PAG, PAM, PAP, PAN, PAO, PAR, PAS) when parts=true
+  - Verify function returns properly formatted options array
+  - Test in any form using DMS integration with CIECA codes
+
+---
+
+## Cross-Component Testing
+
+### Search Functionality
+Test search across all searchable selects:
+- [ ] Employee search (by name, employee number)
+- [ ] Job search (by RO number, customer name, vehicle)
+- [ ] Vendor search (by name)
+- [ ] Vehicle search (by VIN, plate, make/model)
+- [ ] Owner search (by name)
+
+### Multi-Select Components
+If any components use `mode="multiple"`:
+- [ ] Verify multi-select works
+- [ ] Verify tags display correctly
+- [ ] Verify removal of selections works
+
+### Disabled State
+- [ ] Test dropdowns in disabled state
+- [ ] Verify disabled styling matches original
+
+### Form Validation
+- [ ] Test required field validation on selects
+- [ ] Verify error messages display correctly
+- [ ] Test form submission with select values
+
+---
+
+## Regression Testing Priority
+
+### High Priority (Critical User Flows)
+1. ✅ Create new job with all required fields
+2. ✅ Add job lines with labor types
+3. ✅ Assign employees to job lines
+4. ✅ Order parts with vendor selection
+5. ✅ Enter bills with vendor and account selection
+6. ✅ Close and export jobs
+
+### Medium Priority
+7. Convert estimate to RO
+8. Schedule appointments
+9. Clock in/out (tech portal)
+10. Update shop configuration
+11. Manage courtesy cars
+
+### Low Priority (Admin Functions)
+12. DMS integration posting
+13. Production board configuration
+14. Admin job modifications
+
+---
+
+## Browser Testing
+Test in:
+- [ ] Chrome (latest)
+- [ ] Firefox (latest)
+- [ ] Safari (if applicable)
+- [ ] Edge (latest)
+
+---
+
+## Known Changed Components Summary
+**Total Files Modified:** 54 client files + 1 server file
+
+**Labor Type Selectors (14 options):**
+- LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1, LA2, LA3, LA4
+- Found in: job-lines-upsert-modal, job-line-convert-to-labor, bill-form-lines
+
+**Most Complex Changes:**
+- `shop-info.responsibilitycenters.component.jsx` (980 lines changed)
+- `vendor-search-select.component.jsx` (120 lines changed)
+- `shop-info.rostatus.component.jsx` (120 lines changed)
+- `jobs-convert-button.component.jsx` (198 lines changed)
+- `Ciecaselect.jsx` (75 lines changed)
+
+---
+
+## Internal Code Review Results ✅
+
+**Files Validated (Sample):**
+1. ✅ `allocations-assignment.component.jsx` - Simple employee selector with search
+2. ✅ `contract-status-select.component.jsx` - Static 3-option select
+3. ✅ `courtesy-car-status-select.component.jsx` - Static 6-option select  
+4. ✅ `job-lines-upsert-modal.component.jsx` - 14 labor type options inline
+5. ✅ `email-overlay.component.jsx` - From email with custom emails array
+6. ✅ `employee-search-select-email.component.jsx` - Complex with tags and custom search prop
+7. ✅ `bill-form-lines-extended.formitem.component.jsx` - CiecaSelect utility usage
+8. ✅ `vendor-search-select.component.jsx` - Complex with favorites, tags, discount, phone
+9. ✅ `job-search-select.component.jsx` - Complex with owner display, status tags, loading states
+10. ✅ `Ciecaselect.jsx` - Utility function returning options array
+
+**Validation Checklist:**
+- [x] All `Select.Option` patterns removed
+- [x] Replaced with `options` array prop
+- [x] `showSearch` uses object syntax `{{ optionFilterProp: "label" }}`
+- [x] Custom `optionFilterProp` used where needed ("name", "search", etc.)
+- [x] Complex rendered content preserved in `label` prop with JSX
+- [x] Tags, icons, badges, and styled elements working correctly
+- [x] Search functionality using correct property references
+- [x] Labor types: All 14 types present (LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1, LA2, LA3, LA4)
+- [x] Part types: All 10 types in CiecaSelect (PAA, PAC, PAL, PAG, PAM, PAP, PAN, PAO, PAR, PAS)
+- [x] Custom filterOption functions updated (option.label vs option.props.children)
+- [x] Performance optimizations added (useMemo for large option lists)
+- [x] labelRender custom rendering preserved where used
+- [x] optionLabelProp used correctly for display vs value
+
+**Known Complex Patterns Verified:**
+1. **Vendor Select:** Favorites with heart icon, discount tags, phone display, custom search by "name"
+2. **Employee Select:** Flat rate/straight time tags, custom search by "search" prop (employee number + name)
+3. **Job Select:** Owner display function, status tags, loading states, conditional claim number display
+4. **Email Overlay:** Multiple from addresses (user email, shop email, custom md_from_emails array)
+5. **Bill Lines Extended:** Conditional DMS vs responsibility centers, CiecaSelect utility
+
+**No Issues Found** - All migrations follow the correct pattern.
+
+---
+
+## Testing Notes
+- Focus on components with search functionality - filtering logic changed from `children` to `label`
+- Pay attention to components with custom rendered content (tags, badges, formatted text)
+- Verify `optionFilterProp` works correctly for custom search fields
+- Test components that map over arrays to generate options
+- Check components with conditional option rendering
+
+---
+
+## Sign-Off
+- [ ] All high priority tests passed
+- [ ] All medium priority tests passed
+- [ ] All low priority tests passed
+- [ ] No console errors observed
+- [ ] Visual appearance matches original
+- [ ] Performance is acceptable (no lag in large dropdowns)
+
+**Tested By:** _________________  
+**Date:** _________________  
+**Environment:** _________________  
+**Notes:** _________________

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,73 +8,76 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.34.0",
+    "@amplitude/analytics-browser": "^2.38.0",
     "@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/auth": "^1.12.0",
-    "@firebase/firestore": "^4.10.0",
-    "@firebase/messaging": "^0.12.22",
+    "@fingerprintjs/fingerprintjs": "^5.1.0",
+    "@firebase/analytics": "^0.10.21",
+    "@firebase/app": "^0.14.10",
+    "@firebase/auth": "^1.12.2",
+    "@firebase/firestore": "^4.13.0",
+    "@firebase/messaging": "^0.12.25",
     "@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.3.5",
+    "@sentry/react": "^10.47.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.5",
     "apollo-link-logger": "^3.0.0",
     "autosize": "^6.0.1",
-    "axios": "^1.13.4",
+    "axios": "^1.14.0",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.19",
-    "dayjs-business-days2": "^1.3.2",
+    "dayjs": "^1.11.20",
+    "dayjs-business-days2": "^1.3.3",
     "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-ws": "^6.0.7",
-    "i18next": "^25.8.0",
-    "i18next-browser-languagedetector": "^8.2.0",
+    "graphql": "^16.13.2",
+    "graphql-ws": "^6.0.8",
+    "i18next": "^25.10.10",
+    "i18next-browser-languagedetector": "^8.2.1",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.36",
-    "lightningcss": "^1.31.1",
-    "logrocket": "^12.0.0",
+    "libphonenumber-js": "^1.12.41",
+    "lightningcss": "^1.32.0",
+    "logrocket": "^12.1.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.364.4",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
     "react": "^19.2.4",
     "react-big-calendar": "^1.19.4",
     "react-color": "^2.19.3",
-    "react-cookie": "^8.0.1",
+    "react-cookie": "^8.1.0",
     "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",
-    "react-icons": "^5.5.0",
+    "react-grid-layout": "^2.2.3",
+    "react-i18next": "^16.6.6",
+    "react-icons": "^5.6.0",
     "react-image-lightbox": "^5.1.4",
     "react-markdown": "^10.1.0",
-    "react-number-format": "^5.4.3",
+    "react-number-format": "^5.4.5",
     "react-popopo": "^2.1.9",
     "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.2",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.18.1",
-    "recharts": "^3.7.0",
+    "react-virtuoso": "^4.18.3",
+    "recharts": "^3.8.1",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
@@ -82,11 +85,11 @@
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
     "rxjs": "^7.8.2",
-    "sass": "^1.97.3",
+    "sass": "^1.98.0",
     "socket.io-client": "^4.8.3",
-    "styled-components": "^6.3.8",
+    "styled-components": "^6.3.12",
     "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^5.1.0"
+    "web-vitals": "^5.2.0"
   },
   "scripts": {
     "postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'",
@@ -134,40 +137,40 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.1.0",
+    "@ant-design/icons": "^6.1.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.28.5",
-    "@dotenvx/dotenvx": "^1.52.0",
+    "@dotenvx/dotenvx": "^1.59.1",
     "@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": "^4.28.2",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.6.2",
     "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",
-    "memfs": "^4.56.10",
+    "globals": "^17.4.0",
+    "jsdom": "^28.1.0",
+    "memfs": "^4.57.1",
     "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.6.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.25.0",
+    "vite-plugin-node-polyfills": "^0.26.0",
     "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^4.0.18",
+    "vitest": "^4.1.2",
     "workbox-window": "^7.4.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/_test/test.page.jsx

@@ -1,7 +1,11 @@
-import { Button } from "antd";
+import { Button, Card, Divider, Form, Space, Typography } from "antd";
 import { connect } from "react-redux";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import { PayrollLaborAllocationsTable } from "../labor-allocations-table/labor-allocations-table.payroll.component.jsx";
+import { TimeTicketTaskModalComponent } from "../time-ticket-task-modal/time-ticket-task-modal.component.jsx";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -9,8 +13,109 @@ const mapDispatchToProps = (dispatch) => ({
   setRefundPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "refund_payment" }))
 });
 
+const commissionCutFixture = {
+  bodyshop: {
+    features: {
+      timetickets: true
+    },
+    employees: [
+      { id: "emp-1", first_name: "Avery", last_name: "Johnson" },
+      { id: "emp-2", first_name: "Morgan", last_name: "Lee" }
+    ],
+    md_tasks_presets: {
+      presets: [
+        {
+          name: "Body Prep",
+          percent: 50,
+          hourstype: ["LAA", "LAB"],
+          nextstatus: "In Progress"
+        }
+      ]
+    }
+  },
+  jobId: "fixture-job-1",
+  joblines: [
+    {
+      id: "line-1",
+      mod_lbr_ty: "LAA",
+      mod_lb_hrs: 4,
+      assigned_team: "team-1",
+      convertedtolbr: false
+    }
+  ],
+  previewValues: {
+    task: "Body Prep",
+    timetickets: [
+      {
+        employeeid: "emp-1",
+        cost_center: "Body",
+        ciecacode: "LAA",
+        productivehrs: 2,
+        rate: 40,
+        payoutamount: 80,
+        payout_context: {
+          payout_method: "commission"
+        }
+      },
+      {
+        employeeid: "emp-2",
+        cost_center: "Refinish",
+        ciecacode: "LAB",
+        productivehrs: 1,
+        rate: 28,
+        payoutamount: 28,
+        payout_context: {
+          payout_method: "hourly"
+        }
+      }
+    ]
+  }
+};
+
+function CommissionCutHarness() {
+  const [form] = Form.useForm();
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: "100%" }}>
+      <Typography.Title level={2}>Commission Cut Test Harness</Typography.Title>
+      <Typography.Paragraph>
+        This fixture keeps commission-cut browser checks stable by rendering representative payroll and preview UI with
+        local data.
+      </Typography.Paragraph>
+      <Card title="Payroll Labor Allocations">
+        <PayrollLaborAllocationsTable
+          jobId={commissionCutFixture.jobId}
+          joblines={commissionCutFixture.joblines}
+          timetickets={[]}
+          bodyshop={commissionCutFixture.bodyshop}
+          adjustments={[]}
+          refetch={() => {}}
+        />
+      </Card>
+      <Divider />
+      <Card title="Claim Task Preview">
+        <Form form={form} initialValues={commissionCutFixture.previewValues} layout="vertical">
+          <TimeTicketTaskModalComponent
+            bodyshop={commissionCutFixture.bodyshop}
+            form={form}
+            loading={false}
+            completedTasks={[]}
+            unassignedHours={1.25}
+          />
+        </Form>
+      </Card>
+    </Space>
+  );
+}
+
 function Test({ setRefundPaymentContext, refundPaymentModal }) {
+  const search = queryString.parse(useLocation().search);
   console.log("refundPaymentModal", refundPaymentModal);
+
+  if (search.fixture === "commission-cut") {
+    return <CommissionCutHarness />;
+  }
+
   return (
     <div>
       <Button

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/alert/alert.component.jsx

@@ -1,5 +1,5 @@
 import { Alert } from "antd";
 
-export default function AlertComponent(props) {
-  return <Alert {...props} />;
+export default function AlertComponent({ title, message, ...props }) {
+  return <Alert {...props} title={title ?? message} />;
 }

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-ai-feedback/bill-ai-feedback.component.jsx

@@ -0,0 +1,118 @@
+import { DislikeOutlined, LikeOutlined } from "@ant-design/icons";
+import { Button, Form, Input, Radio, Space } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { createStructuredSelector } from "reselect";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+function BillAiFeedback({ billForm, rawAIData, bodyshop }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = useState(false);
+  const notification = useNotification();
+
+  //Need to sanitize becuase we pass as form data to include the attachment.
+  const sanitizeBillFormValues = (value) => {
+    const seen = new WeakSet();
+    return JSON.stringify(
+      value,
+      (key, v) => {
+        if (key === "originFileObj") return undefined;
+        if (key === "thumbUrl") return undefined;
+        if (key === "preview") return undefined;
+        if (typeof v === "function") return undefined;
+        if (v && typeof v === "object") {
+          if (seen.has(v)) return "[Circular]";
+          seen.add(v);
+        }
+        return v;
+      },
+      0
+    );
+  };
+
+  const getAttachmentFromBillFormUpload = () => {
+    const uploads = billForm?.getFieldValue?.("upload") || [];
+    const files = uploads.map((u) => u?.originFileObj).filter(Boolean);
+
+    return (
+      files.find((f) => f?.type === "application/pdf") ||
+      files.find((f) => isString(f?.name) && f.name.toLowerCase().endsWith(".pdf")) ||
+      files[0] ||
+      null
+    );
+  };
+
+  const submitFeedback = async ({ rating, comments }) => {
+    setSubmitting(true);
+    try {
+      const billFormValues = billForm.getFieldsValue(true);
+
+      const formData = new FormData();
+      formData.append("rating", rating);
+      formData.append("comments", comments || "");
+      formData.append("billFormValues", sanitizeBillFormValues(billFormValues));
+      formData.append("rawAIData", sanitizeBillFormValues(rawAIData));
+      formData.append("shopname", bodyshop?.shopname || "");
+
+      const attachmentFile = getAttachmentFromBillFormUpload();
+      if (attachmentFile) {
+        formData.append("billPdf", attachmentFile, attachmentFile.name || "bill.pdf");
+      }
+
+      await axios.post("/ai/bill-feedback", formData);
+
+      notification.success({
+        title: "Thanks — feedback submitted"
+      });
+      form.resetFields();
+    } catch (error) {
+      notification.error({
+        title: "Failed to submit feedback",
+        description: error?.response?.data?.message || error?.message
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const isString = (v) => typeof v === "string";
+
+  return (
+    <Form form={form} onFinish={submitFeedback} requiredMark={false}>
+      <Space wrap align="top" size="small">
+        <Form.Item name="rating" label={t("bills.labels.ai.feedback_prompt")} rules={[{ required: true }]}>
+          <Radio.Group optionType="button" buttonStyle="solid">
+            <Radio.Button value="up">
+              <LikeOutlined />
+            </Radio.Button>
+            <Radio.Button value="down">
+              <DislikeOutlined />
+            </Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+
+        <Space wrap size="small" orientation="vertical">
+          <Form.Item name="comments">
+            <Input.TextArea
+              rows={3}
+              style={{ minWidth: "400px" }}
+              placeholder={t("bills.labels.ai.feedback_placeholder")}
+            />
+          </Form.Item>
+          <Button onClick={() => form.submit()} loading={submitting} disabled={submitting}>
+            {t("bills.labels.ai.submit_feedback")}
+          </Button>
+        </Space>
+      </Space>
+    </Form>
+  );
+}
+export default connect(mapStateToProps, null)(BillAiFeedback);

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,206 @@
+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,
+  setRawAIData
+}) {
+  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);
+
+        setRawAIData(data.data);
+        // 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);
+                setRawAIData(data.data);
+                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

@@ -1,11 +1,12 @@
 import { useApolloClient, useMutation } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Button, Checkbox, Form, Modal, Space } from "antd";
+import { Button, Checkbox, Divider, 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,13 @@ 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";
+import BillAiFeedback from "../bill-ai-feedback/bill-ai-feedback.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -50,15 +52,21 @@ 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 [rawAIData, setRawAIData] = useState(null);
   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 +121,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 +388,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         vendorid: values.vendorid,
         billlines: []
       });
+      setIsAiScan(false);
+      setRawAIData(null);
       // form.resetFields();
     } else {
       toggleModalVisible();
@@ -388,10 +400,23 @@ 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);
+      setRawAIData(null);
       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 +426,46 @@ 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);
+      setRawAIData(null);
     }
   }, [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}
+              setRawAIData={setRawAIData}
+            />
+          )}
+        </Space>
+      }
       width={"98%"}
       open={billEnterModal.open}
       okText={t("general.actions.save")}
@@ -418,26 +477,34 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         setLoading(false);
       }}
       footer={
-        <Space>
-          <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
-            {t("bills.labels.generatepartslabel")}
-          </Checkbox>
-          <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
-            {t("general.actions.save")}
-          </Button>
-          {billEnterModal.context && billEnterModal.context.id ? null : (
-            <Button
-              type="primary"
-              loading={loading}
-              onClick={() => {
-                setEnterAgain(true);
-              }}
-              id="save-and-new-bill-enter-modal"
-            >
-              {t("general.actions.saveandnew")}
-            </Button>
+        <Space orientation="vertical">
+          {isAiScan && (
+            <>
+              <BillAiFeedback billForm={form} rawAIData={rawAIData} />
+              <Divider orientation="horizontal" />
+            </>
           )}
+          <Space wrap align="top">
+            <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
+              {t("bills.labels.generatepartslabel")}
+            </Checkbox>
+            <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
+            <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
+              {t("general.actions.save")}
+            </Button>
+            {billEnterModal.context && billEnterModal.context.id ? null : (
+              <Button
+                type="primary"
+                loading={loading}
+                onClick={() => {
+                  setEnterAgain(true);
+                }}
+                id="save-and-new-bill-enter-modal"
+              >
+                {t("general.actions.saveandnew")}
+              </Button>
+            )}
+          </Space>
         </Space>
       }
       destroyOnHidden
@@ -447,13 +514,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,15 @@ 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 vendorIdFormWatch = Form.useWatch("vendorid", form);
 
   const {
     treatments: { Extended_Bill_Posting, ClosingPeriod }
@@ -114,6 +119,7 @@ export function BillFormComponent({
     }
   }, [
     form,
+    vendorIdFormWatch,
     billEdit,
     loadOutstandingReturns,
     loadInventory,
@@ -123,6 +129,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 +351,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 +395,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 +446,7 @@ export function BillFormComponent({
                     <Statistic
                       title={t("bills.labels.discrepancy")}
                       styles={{
-                        value: {
+                        content: {
                           color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
                         }
                       }}
@@ -427,6 +459,7 @@ export function BillFormComponent({
                   ) : null}
                 </div>
               );
+            }
             return null;
           }}
         </Form.Item>
@@ -449,6 +482,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;
 
@@ -90,7 +94,9 @@ export function BillEnterModalLinesComponent({
     });
   };
 
+  // Only fill actual_cost when the user forward-tabs out of Retail (actual_price)
   const autofillActualCost = (index) => {
+    if (bodyshop.accountingconfig?.disableBillCostCalculation) return;
     Promise.resolve().then(() => {
       const retailRaw = form.getFieldValue(["billlines", index, "actual_price"]);
       const actualRaw = form.getFieldValue(["billlines", index, "actual_cost"]);
@@ -136,6 +142,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",
@@ -154,6 +183,9 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
+            ref={(el) => {
+              firstFieldRefs.current[index] = el;
+            }}
             disabled={disabled}
             options={lineData}
             style={{
@@ -164,10 +196,9 @@ export function BillEnterModalLinesComponent({
             }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
-              const d = normalizeDiscount(discount);
-              const retail = Number(opt.cost);
-              const computedActual = Number.isFinite(retail) ? round2(retail * (1 - d)) : null;
-
+              // IMPORTANT:
+              // Do NOT autofill actual_cost here. It should only fill when the user forward-tabs
+              // from Retail (actual_price) -> Actual Cost (actual_cost).
               setFieldsValue({
                 billlines: (getFieldValue("billlines") || []).map((item, idx) => {
                   if (idx !== index) return item;
@@ -178,7 +209,7 @@ export function BillEnterModalLinesComponent({
                     quantity: opt.part_qty || 1,
                     actual_price: opt.cost,
                     original_actual_price: opt.cost,
-                    actual_cost: isBlank(item.actual_cost) ? computedActual : item.actual_cost,
+                    // actual_cost intentionally untouched here
                     cost_center: opt.part_type
                       ? bodyshopHasDmsKey(bodyshop)
                         ? opt.part_type !== "PAE"
@@ -205,8 +236,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 +266,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,15 +277,25 @@ 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}
-            onBlur={() => autofillActualCost(index)}
+            tabIndex={0}
+            // NOTE: Autofill should only happen on forward Tab out of Retail
             onKeyDown={(e) => {
-              if (e.key === "Tab") autofillActualCost(index);
+              if (e.key === "Tab" && !e.shiftKey) autofillActualCost(index);
             }}
           />
         ),
@@ -328,6 +370,7 @@ export function BillEnterModalLinesComponent({
                     min={0}
                     disabled={disabled}
                     controls={false}
+                    tabIndex={0}
                     style={{ width: "100%", height: CONTROL_HEIGHT }}
                     onFocus={() => autofillActualCost(index)}
                   />
@@ -392,11 +435,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 +461,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 +479,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 +506,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 +552,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 +573,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 +589,7 @@ export function BillEnterModalLinesComponent({
               valuePropName: "checked",
               name: [field.name, "applicable_taxes", "local"]
             }),
-            formInput: () => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} tabIndex={0} />
           }
         ]
       }),
@@ -570,6 +609,7 @@ export function BillEnterModalLinesComponent({
                     icon={<DeleteFilled />}
                     disabled={disabled || invLen > 0}
                     onClick={() => remove(record.name)}
+                    tabIndex={0}
                   />
 
                   {Simple_Inventory.treatment === "on" && (
@@ -641,12 +681,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/bill-reexport-button/bill-reexport-button.component.jsx

@@ -9,18 +9,20 @@ import { createStructuredSelector } from "reselect";
 import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   authLevel: selectAuthLevel
 });
-const mapDispatchToProps = () => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(BillMarkForReexportButton);
 
-export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
+export function BillMarkForReexportButton({ bodyshop, authLevel, bill, insertAuditTrail }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const notification = useNotification();
@@ -47,6 +49,12 @@ export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
       notification.success({
         title: t("bills.successes.reexport")
       });
+      insertAuditTrail({
+        jobid: bill.jobid,
+        billid: bill.id,
+        operation: AuditTrailMapping.billmarkforreexport(bill.invoice_number),
+        type: "billmarkforreexport"
+      });
     } else {
       notification.error({
         title: t("bills.errors.saving", {

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

@@ -10,6 +10,7 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -156,104 +157,127 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
       joblines: {
         data: billingLines
       },
-      parts_tax_rates: {
-        PAA: {
-          prt_type: "PAA",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+      ...InstanceRenderManager({
+        imex: {
+          parts_tax_rates: {
+            PAA: {
+              prt_type: "PAA",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            PAC: {
+              prt_type: "PAC",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            PAL: {
+              prt_type: "PAL",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            PAM: {
+              prt_type: "PAM",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            PAN: {
+              prt_type: "PAN",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            PAR: {
+              prt_type: "PAR",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            PAS: {
+              prt_type: "PAS",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            CCDR: {
+              prt_type: "CCDR",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            CCF: {
+              prt_type: "CCF",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            CCM: {
+              prt_type: "CCM",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            CCC: {
+              prt_type: "CCC",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            },
+            CCD: {
+              prt_type: "CCD",
+              prt_discp: 0,
+              prt_mktyp: false,
+              prt_mkupp: 0,
+              prt_tax_in: true,
+              prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+            }
+          }
         },
-        PAC: {
-          prt_type: "PAC",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        PAL: {
-          prt_type: "PAL",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        PAM: {
-          prt_type: "PAM",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        PAN: {
-          prt_type: "PAN",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        PAR: {
-          prt_type: "PAR",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        PAS: {
-          prt_type: "PAS",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        CCDR: {
-          prt_type: "CCDR",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        CCF: {
-          prt_type: "CCF",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        CCM: {
-          prt_type: "CCM",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        CCC: {
-          prt_type: "CCC",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
-        },
-        CCD: {
-          prt_type: "CCD",
-          prt_discp: 0,
-          prt_mktyp: false,
-          prt_mkupp: 0,
-          prt_tax_in: true,
-          prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
+        rome: {
+          cieca_pft: {
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty1,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty2,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty3,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty4,
+            ...bodyshop.md_responsibility_centers.taxes.tax_ty5
+          },
+          materials: bodyshop.md_responsibility_centers.cieca_pfm,
+          cieca_pfl: bodyshop.md_responsibility_centers.cieca_pfl,
+          parts_tax_rates: bodyshop.md_responsibility_centers.parts_tax_rates,
+          tax_tow_rt: bodyshop.md_responsibility_centers.tax_tow_rt,
+          tax_str_rt: bodyshop.md_responsibility_centers.tax_str_rt,
+          tax_paint_mat_rt: bodyshop.md_responsibility_centers.tax_paint_mat_rt,
+          tax_shop_mat_rt: bodyshop.md_responsibility_centers.tax_shop_mat_rt,
+          tax_sub_rt: bodyshop.md_responsibility_centers.tax_sub_rt,
+          tax_lbr_rt: bodyshop.md_responsibility_centers.tax_lbr_rt,
+          tax_levies_rt: bodyshop.md_responsibility_centers.tax_levies_rt
         }
-      }
+      })
     };
 
     if (currentUser?.email) {
@@ -287,7 +311,7 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
       notification.success({
         title: t("jobs.successes.created"),
         onClick: () => {
-          history.push(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
+          history(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
         }
       });
     }
@@ -309,13 +333,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 +351,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

@@ -41,7 +41,7 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
   const emailsToMenu = {
     items: [
       ...bodyshop.employees
-        .filter((e) => e.user_email)
+        .filter((e) => e.user_email && e.active === true)
         .map((e, idx) => ({
           key: idx,
           label: `${e.first_name} ${e.last_name}`,
@@ -59,7 +59,7 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
   const menuCC = {
     items: [
       ...bodyshop.employees
-        .filter((e) => e.user_email)
+        .filter((e) => e.user_email && e.active === true)
         .map((e, idx) => ({
           key: idx,
           label: `${e.first_name} ${e.last_name}`,
@@ -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

@@ -4,20 +4,203 @@ import AlertComponent from "../alert/alert.component";
 import "./form-fields-changed.styles.scss";
 import Prompt from "../../utils/prompt";
 
-export default function FormsFieldChanged({ form, skipPrompt }) {
+export default function FormsFieldChanged({ form, skipPrompt, onErrorNavigate, onReset, onDirtyChange }) {
   const { t } = useTranslation();
 
+  const normalizeNamePath = (namePath) => (Array.isArray(namePath) ? namePath.filter((part) => part !== undefined) : [namePath]);
+
+  const getFieldIdCandidates = (namePath) => {
+    const normalizedNamePath = normalizeNamePath(namePath).map((part) => String(part));
+    const underscoreId = normalizedNamePath.join("_");
+    const dashId = normalizedNamePath.join("-");
+    const dotName = normalizedNamePath.join(".");
+
+    return [underscoreId, dashId, dotName].filter(Boolean);
+  };
+
+  const clearFormMeta = () => {
+    const fieldMeta = form.getFieldsError().map(({ name }) => ({
+      name,
+      touched: false,
+      validating: false,
+      errors: [],
+      warnings: []
+    }));
+
+    if (fieldMeta.length > 0) {
+      form.setFields(fieldMeta);
+    }
+
+    onDirtyChange?.(false);
+  };
+
   const handleReset = () => {
-    form.resetFields();
+    if (onReset) {
+      onReset();
+    } else {
+      form.resetFields();
+    }
+
+    window.requestAnimationFrame(() => {
+      clearFormMeta();
+    });
+  };
+
+  const getFieldDomNode = (namePath) => {
+    const fieldInstance = form.getFieldInstance?.(namePath);
+    const fieldIdCandidates = getFieldIdCandidates(namePath);
+    const domCandidates = [
+      fieldInstance?.nativeElement,
+      fieldInstance?.input,
+      fieldInstance?.resizableTextArea?.textArea,
+      fieldInstance
+    ];
+
+    fieldIdCandidates.forEach((fieldId) => {
+      const escapedFieldId = CSS.escape(fieldId);
+      const directNode = document.getElementById(fieldId) || document.querySelector(`#${escapedFieldId}`);
+      const labelNode = document.querySelector(`label[for="${escapedFieldId}"]`);
+      const namedNode = document.querySelector(`[name="${escapedFieldId}"]`);
+      const formItemNode =
+        directNode?.closest?.(".ant-form-item") ||
+        labelNode?.closest?.(".ant-form-item") ||
+        namedNode?.closest?.(".ant-form-item");
+
+      domCandidates.push(directNode);
+      domCandidates.push(namedNode);
+      domCandidates.push(formItemNode);
+      domCandidates.push(formItemNode?.querySelector?.("input, textarea, select, .ant-select-selector"));
+    });
+
+    return domCandidates.find((candidate) => candidate instanceof HTMLElement) ?? null;
+  };
+
+  const waitForAnimationFrames = (frameCount = 1) =>
+    new Promise((resolve) => {
+      let remainingFrames = frameCount;
+      const nextFrame = () => {
+        if (remainingFrames <= 0) {
+          resolve();
+          return;
+        }
+        remainingFrames -= 1;
+        window.requestAnimationFrame(nextFrame);
+      };
+      window.requestAnimationFrame(nextFrame);
+    });
+
+  const getFieldOwningTabMeta = (namePath) => {
+    const fieldDomNode = getFieldDomNode(namePath);
+    const owningTabPane = fieldDomNode?.closest?.(".ant-tabs-tabpane");
+    const paneId = owningTabPane?.getAttribute?.("id") || null;
+    const owningTabButton = paneId
+      ? document.querySelector(`[role="tab"][aria-controls="${paneId.replace(/"/g, '\\"')}"]`)
+      : null;
+    const tabLabel = owningTabButton?.textContent?.trim() || null;
+
+    return {
+      owningTabPane,
+      owningTabButton,
+      tabLabel
+    };
+  };
+
+  const openFieldOwningTab = async (namePath) => {
+    const { owningTabPane, owningTabButton } = getFieldOwningTabMeta(namePath);
+    if (!owningTabPane || owningTabPane.classList.contains("ant-tabs-tabpane-active")) return false;
+
+    if (!(owningTabButton instanceof HTMLElement)) return false;
+
+    owningTabButton.click();
+
+    for (let index = 0; index < 24; index += 1) {
+      await waitForAnimationFrames();
+      if (owningTabPane.classList.contains("ant-tabs-tabpane-active")) return true;
+    }
+
+    return owningTabPane.classList.contains("ant-tabs-tabpane-active");
+  };
+
+  const scrollToErrorField = (namePath) => {
+    const normalizedNamePath = normalizeNamePath(namePath);
+    if (!normalizedNamePath.length) return;
+
+    try {
+      form.scrollToField(normalizedNamePath, {
+        behavior: "smooth",
+        block: "center",
+        focus: true
+      });
+      window.requestAnimationFrame(() => {
+        const fallbackNode = getFieldDomNode(normalizedNamePath);
+        fallbackNode?.focus?.();
+      });
+      return;
+    } catch {
+      const fallbackTarget = document.getElementById(normalizedNamePath[0]?.toString?.() ?? "");
+      fallbackTarget?.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  };
+
+  const handleErrorClick = async (namePath) => {
+    const normalizedNamePath = normalizeNamePath(namePath);
+    if (!normalizedNamePath.length) return;
+
+    const switchedTab = await openFieldOwningTab(normalizedNamePath);
+    if (!switchedTab) {
+      const navigationDelayMs = onErrorNavigate?.(normalizedNamePath) ?? 0;
+      if (navigationDelayMs > 0) {
+        window.setTimeout(() => {
+          window.requestAnimationFrame(() => {
+            scrollToErrorField(normalizedNamePath);
+          });
+        }, navigationDelayMs);
+        return;
+      }
+    }
+
+    await waitForAnimationFrames(switchedTab ? 2 : 1);
+    scrollToErrorField(normalizedNamePath);
   };
   //if (!form.isFieldsTouched()) return <></>;
   return (
     <Form.Item className="form-fields-changed" shouldUpdate style={{ margin: 0, padding: 0, minHeight: "unset" }}>
       {() => {
-        const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
+        const errors = form
+          .getFieldsError()
+          .filter((fieldError) => fieldError.errors.length > 0)
+          .flatMap((fieldError) => {
+            const tabMeta = getFieldOwningTabMeta(fieldError.name);
+
+            return fieldError.errors.map((errorMessage, errorIndex) => ({
+              key: `${(fieldError.name || []).join(".")}-${errorIndex}-${errorMessage}`,
+              message: errorMessage,
+              namePath: fieldError.name,
+              tabLabel: tabMeta.tabLabel
+            }));
+          });
+
+        const groupedErrors = errors.reduce((groups, error) => {
+          const groupKey = error.tabLabel || "__ungrouped__";
+          if (!groups[groupKey]) {
+            groups[groupKey] = {
+              key: groupKey,
+              label: error.tabLabel,
+              errors: []
+            };
+          }
+          groups[groupKey].errors.push(error);
+          return groups;
+        }, {});
+        const errorGroups = Object.values(groupedErrors);
+        const hasTabbedErrorGroups = errorGroups.some((group) => Boolean(group.label));
+
         if (form.isFieldsTouched())
           return (
-            <Space orientation="vertical" style={{ width: "100%" }}>
+            <Space orientation="vertical" style={{ width: "100%", marginBottom: 10 }}>
               <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
               <AlertComponent
                 type="warning"
@@ -39,11 +222,38 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  title={
-                    <div>
-                      <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
+                  title={t("general.labels.validationerror")}
+                  description={
+                    <div className="form-fields-changed__error-groups">
+                      {errorGroups.map((group) => (
+                        <div key={group.key} className="form-fields-changed__error-group">
+                          {hasTabbedErrorGroups && group.label ? (
+                            <div className="form-fields-changed__error-group-title">{group.label}</div>
+                          ) : null}
+                          <ul className="form-fields-changed__error-list">
+                            {group.errors.map((error) => (
+                              <li key={error.key}>
+                                {Array.isArray(error.namePath) && error.namePath.length > 0 ? (
+                                  <button
+                                    type="button"
+                                    className="form-fields-changed__error-link"
+                                    onClick={() => {
+                                      handleErrorClick(error.namePath);
+                                    }}
+                                  >
+                                    {error.message}
+                                  </button>
+                                ) : (
+                                  error.message
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ))}
                     </div>
                   }
+                  showIcon
                 />
               )}
             </Space>

client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss

@@ -4,4 +4,47 @@
       min-height: unset !important;
     }
   }
+
+  &__error-list {
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  &__error-groups {
+    display: grid;
+    gap: 10px;
+  }
+
+  &__error-group {
+    display: grid;
+    gap: 4px;
+  }
+
+  &__error-group-title {
+    font-weight: 600;
+  }
+
+  &__error-link {
+    display: inline;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    text-align: left;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      color: color-mix(in srgb, var(--ant-color-error) 82%, var(--ant-color-text));
+    }
+
+    &:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--ant-color-error) 32%, transparent);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+  }
 }

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

@@ -1,11 +1,88 @@
-import { Input } from "antd";
+import { PhoneFilled } from "@ant-design/icons";
+import { Button, Input, Space } from "antd";
 import i18n from "i18next";
 import parsePhoneNumber from "libphonenumber-js";
+import { forwardRef, useMemo, useState } from "react";
 import "./phone-form-item.styles.scss";
 
-function FormItemPhone({ ref, ...props }) {
-  return <Input ref={ref} {...props} />;
-}
+/**
+ * Formats a phone number for display purposes. If the input value is a valid phone number, it will be formatted in a
+ * national format (e.g., (123) 456-7890 for US/CA). If the input is not a valid phone number, it will be returned as-is.
+ * @param value
+ * @returns {*}
+ */
+const formatPhoneDisplayValue = (value) => {
+  if (!value) return value;
+
+  try {
+    const parsedPhone = parsePhoneNumber(value, "CA");
+    return parsedPhone?.isValid() ? parsedPhone.formatNational() : value;
+  } catch {
+    return value;
+  }
+};
+
+/**
+ * Generates a "tel:" URL for a phone number if it's valid. If the input value is a valid phone number, it will return a
+ * URL in the format "tel:+1234567890". If the input is not a valid phone number, it will attempt to trim whitespace and
+ * return a "tel:" URL with the raw value, or null if the trimmed value is empty.
+ * @param value
+ * @returns {string|null}
+ */
+const getPhoneActionHref = (value) => {
+  if (!value) return null;
+
+  try {
+    const parsedPhone = parsePhoneNumber(value, "CA");
+    if (parsedPhone?.isValid()) return `tel:${parsedPhone.number}`;
+  } catch {
+    // Fall back to the raw value below.
+  }
+
+  const trimmedValue = String(value).trim();
+  return trimmedValue ? `tel:${trimmedValue}` : null;
+};
+
+const FormItemPhone = forwardRef(function FormItemPhone(
+  { formatDisplayOnly = false, showPhoneAction = false, value, onBlur, onFocus, ...props },
+  ref
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const displayValue = useMemo(() => {
+    if (!formatDisplayOnly || isFocused) return value;
+    return formatPhoneDisplayValue(value);
+  }, [formatDisplayOnly, isFocused, value]);
+  const phoneActionHref = useMemo(() => (showPhoneAction ? getPhoneActionHref(value) : null), [showPhoneAction, value]);
+
+  const input = (
+    <Input
+      ref={ref}
+      {...props}
+      value={displayValue}
+      onFocus={(event) => {
+        setIsFocused(true);
+        onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        setIsFocused(false);
+        onBlur?.(event);
+      }}
+    />
+  );
+
+  if (!showPhoneAction) return input;
+
+  return (
+    <Space.Compact style={{ width: "100%" }}>
+      {input}
+      {phoneActionHref ? (
+        <Button icon={<PhoneFilled />} href={phoneActionHref} />
+      ) : (
+        <Button icon={<PhoneFilled />} disabled />
+      )}
+    </Space.Compact>
+  );
+});
 
 export default FormItemPhone;
 

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

@@ -10,8 +10,13 @@ const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
+const toFiniteNumber = (value) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
 const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
-  if (!value) return null;
+  if (value === null || value === undefined || value === "") return null;
   switch (type) {
     case "employee": {
       const emp = bodyshop.employees.find((e) => e.id === value);
@@ -20,8 +25,15 @@ const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
 
     case "text":
       return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
-    case "currency":
-      return <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>;
+    case "currency": {
+      const numericValue = toFiniteNumber(value);
+
+      if (numericValue === null) {
+        return null;
+      }
+
+      return <div>{Dinero({ amount: Math.round(numericValue * 100) }).toFormat()}</div>;
+    }
     default:
       return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
   }

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

@@ -0,0 +1,34 @@
+import { LinkOutlined } from "@ant-design/icons";
+import { Button, Input, Space } from "antd";
+import { forwardRef, useMemo } from "react";
+
+const HAS_URL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+.-]*:/;
+const LOCALHOST_OR_IP_REGEX = /^(localhost|127(?:\.\d{1,3}){3}|\d{1,3}(?:\.\d{1,3}){3})(:\d+)?(\/.*)?$/i;
+
+const getUrlActionHref = (value) => {
+  const trimmedValue = String(value ?? "").trim();
+  if (!trimmedValue) return null;
+
+  if (HAS_URL_PROTOCOL_REGEX.test(trimmedValue)) return trimmedValue;
+  if (trimmedValue.startsWith("//")) return `https:${trimmedValue}`;
+  if (LOCALHOST_OR_IP_REGEX.test(trimmedValue)) return `http://${trimmedValue}`;
+
+  return `https://${trimmedValue}`;
+};
+
+const FormItemUrl = forwardRef(function FormItemUrl({ value, defaultValue, ...props }, ref) {
+  const urlActionHref = useMemo(() => getUrlActionHref(value ?? defaultValue), [defaultValue, value]);
+
+  return (
+    <Space.Compact style={{ width: "100%" }}>
+      <Input ref={ref} {...props} value={value} defaultValue={defaultValue} />
+      {urlActionHref ? (
+        <Button icon={<LinkOutlined />} href={urlActionHref} target="_blank" rel="noopener noreferrer" />
+      ) : (
+        <Button icon={<LinkOutlined />} disabled />
+      )}
+    </Space.Compact>
+  );
+});
+
+export default FormItemUrl;

client/src/components/form-list-move-arrows/form-list-item-title.utils.js

@@ -0,0 +1,30 @@
+/**
+ * Normalize Form  Item List Titles
+ * @param value
+ * @returns {*|string}
+ */
+const normalizeFormListTitleValue = (value) => {
+  if (value === null || value === undefined) return "";
+
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => normalizeFormListTitleValue(item))
+      .filter(Boolean)
+      .join(", ");
+  }
+
+  return String(value).trim();
+};
+
+/**
+ * Get Form Listem Item Title
+ * @param fallbackLabel
+ * @param index
+ * @param candidates
+ * @returns {*|string}
+ */
+export function getFormListItemTitle(fallbackLabel, index, ...candidates) {
+  const title = candidates.map((candidate) => normalizeFormListTitleValue(candidate)).find(Boolean);
+
+  return title || `${fallbackLabel} ${index + 1}`;
+}

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

@@ -1,7 +1,7 @@
 import { DownOutlined, UpOutlined } from "@ant-design/icons";
 import { Space } from "antd";
 
-export default function FormListMoveArrows({ move, index, total }) {
+export default function FormListMoveArrows({ move, index, total, orientation = "vertical" }) {
   const upDisabled = index === 0;
   const downDisabled = index === total - 1;
 
@@ -14,7 +14,7 @@ export default function FormListMoveArrows({ move, index, total }) {
   };
 
   return (
-    <Space orientation="vertical">
+    <Space orientation={orientation}>
       <UpOutlined disabled={upDisabled} onClick={handleUp} />
       <DownOutlined disabled={downDisabled} onClick={handleDown} />
     </Space>