Merged in release/2026-06-05 (pull request #3288)

IO-3722 Remove delivery date for bypass vehicles.

.dockerignore

@@ -7,6 +7,7 @@ _reference
 client
 redis/dockerdata
 hasura
+harness-feature-flags-export
 node_modules
 # Files to exclude
 .ebignore

.ebignore

@@ -7,6 +7,7 @@
 /client
 /firebase
 /hasura
+/harness-feature-flags-export
 /jsreport
 /node_modules
 .env.local

.gitignore

@@ -17,6 +17,9 @@ jsreport/auth-server/node_modules
 client/coverage
 admin/coverage
 
+# Generated Harness/Split feature flag export artifacts
+/harness-feature-flags-export/
+
 # production
 /build
 client/build
@@ -142,8 +145,6 @@ docker_data
 /CLAUDE.md
 /COPILOT.md
 /GEMINI.md
-/_reference/select-component-test-plan.md
-
 /.cursorrules
 /AGENTS.md
 /AI_CONTEXT.md
@@ -152,3 +153,8 @@ docker_data
 /.github/copilot-instructions.md
 /GEMINI.md
 /_reference/select-component-test-plan.md
+
+.terraform
+
+terraform.tfvars
+terraform.exe

_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/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/package.json

@@ -8,88 +8,88 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.35.3",
+    "@amplitude/analytics-browser": "^2.42.4",
     "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^4.1.6",
+    "@apollo/client": "^4.2.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@documenso/embed-react": "^0.6.1",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@fingerprintjs/fingerprintjs": "^5.0.1",
-    "@firebase/analytics": "^0.10.19",
-    "@firebase/app": "^0.14.8",
-    "@firebase/auth": "^1.12.0",
-    "@firebase/firestore": "^4.11.0",
-    "@firebase/messaging": "^0.12.22",
+    "@fingerprintjs/fingerprintjs": "^5.2.0",
+    "@firebase/analytics": "^0.10.22",
+    "@firebase/app": "^0.14.12",
+    "@firebase/auth": "^1.13.1",
+    "@firebase/firestore": "^4.14.1",
+    "@firebase/messaging": "^0.12.26",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@sentry/cli": "^3.2.2",
-    "@sentry/react": "^10.40.0",
+    "@reduxjs/toolkit": "^2.12.0",
+    "@sentry/cli": "^3.4.3",
+    "@sentry/react": "^10.53.1",
     "@sentry/vite-plugin": "^4.9.1",
-    "@splitsoftware/splitio-react": "^2.6.1",
     "@tanem/react-nprogress": "^5.0.63",
-    "antd": "^6.3.1",
+    "antd": "^6.4.3",
     "apollo-link-logger": "^3.0.0",
     "autosize": "^6.0.1",
-    "axios": "^1.13.5",
+    "axios": "^1.16.1",
     "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.3.1",
+    "dotenv": "^17.4.2",
     "env-cmd": "^11.0.0",
     "exifr": "^7.1.3",
-    "graphql": "^16.13.0",
-    "graphql-ws": "^6.0.7",
-    "i18next": "^25.8.13",
+    "graphql": "^16.14.0",
+    "graphql-ws": "^6.0.8",
+    "i18next": "^25.10.10",
     "i18next-browser-languagedetector": "^8.2.1",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.38",
-    "lightningcss": "^1.31.1",
-    "logrocket": "^12.0.0",
+    "libphonenumber-js": "^1.13.3",
+    "lightningcss": "^1.32.0",
+    "logrocket": "^12.1.1",
     "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.1.1",
     "object-hash": "^3.0.0",
     "phone": "^3.1.71",
-    "posthog-js": "^1.355.0",
+    "posthog-js": "^1.376.0",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
-    "react": "^19.2.4",
+    "react": "^19.2.6",
     "react-big-calendar": "^1.19.4",
     "react-color": "^2.19.3",
-    "react-cookie": "^8.0.1",
-    "react-dom": "^19.2.4",
+    "react-cookie": "^8.1.2",
+    "react-dom": "^19.2.6",
     "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-redux": "^9.3.0",
     "react-resizable": "^3.1.3",
-    "react-router-dom": "^7.13.1",
+    "react-router-dom": "^7.15.1",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.18.1",
-    "recharts": "^3.7.0",
+    "react-virtuoso": "^4.18.7",
+    "recharts": "^3.8.1",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.4.2",
+    "redux-saga": "^1.5.0",
     "redux-state-sync": "^3.1.4",
-    "reselect": "^5.1.1",
+    "reselect": "^5.2.0",
     "rxjs": "^7.8.2",
-    "sass": "^1.97.3",
+    "sass": "^1.100.0",
     "socket.io-client": "^4.8.3",
-    "styled-components": "^6.3.11",
+    "styled-components": "^6.4.2",
     "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'",
@@ -137,40 +137,40 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.1.0",
+    "@ant-design/icons": "^6.2.3",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.28.5",
-    "@dotenvx/dotenvx": "^1.52.0",
+    "@babel/preset-react": "^7.29.7",
+    "@dotenvx/dotenvx": "^1.68.1",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@eslint/js": "^9.39.2",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.60.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@vitejs/plugin-react": "^5.1.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.3.0",
+    "globals": "^17.6.0",
     "jsdom": "^28.1.0",
-    "memfs": "^4.56.10",
+    "memfs": "^4.57.2",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.58.2",
+    "playwright": "^1.60.0",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
     "vite": "^7.3.1",
-    "vite-plugin-babel": "^1.5.1",
+    "vite-plugin-babel": "^1.7.3",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.25.0",
-    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-node-polyfills": "^0.28.0",
+    "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^4.0.18",
-    "workbox-window": "^7.4.0"
+    "vitest": "^4.1.7",
+    "workbox-window": "^7.4.1"
   }
 }

client/public/3rdparty-app.txt

@@ -5593,29 +5593,6 @@ Demo: https://rawgit.com/Sphinxxxx/color-conversion/master/demo/index.html
 
 -----------
 
-The following NPM packages may be included in this product:
-
- - @splitsoftware/splitio-commons@1.6.1
- - @splitsoftware/splitio-react@1.7.1
-
-These packages each contain the following license and notice below:
-
-Copyright © 2022 Split Software, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
------------
-
 The following NPM packages may be included in this product:
 
  - @stripe/react-stripe-js@1.9.0

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

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

@@ -1,6 +1,6 @@
 import { ApolloProvider } from "@apollo/client/react";
 import * as Sentry from "@sentry/react";
-import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
+import { FeatureFlagProvider, useFeatureFlagClient } from "../feature-flags/splitio-react-replacement";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import { useEffect, useMemo } from "react";
@@ -16,23 +16,21 @@ 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 }) {
+function FeatureFlagClientProvider({ children }) {
   const imexshopid = useSelector((state) => state.user.imexshopid);
-  const splitClient = useSplitClient({ key: imexshopid || "anon" });
+  const featureFlagClient = useFeatureFlagClient({ key: imexshopid || "anon" });
 
   useEffect(() => {
-    if (import.meta.env.DEV && splitClient && imexshopid) {
-      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    if (import.meta.env.DEV && featureFlagClient && imexshopid) {
+      console.log(`Feature flag client initialized with key: ${imexshopid}, isReady: ${featureFlagClient.isReady}`);
     }
-  }, [splitClient, imexshopid]);
+  }, [featureFlagClient, imexshopid]);
 
   return children;
 }
@@ -124,11 +122,11 @@ function AppContainer() {
       <ApolloProvider client={client}>
         <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
           <GlobalLoadingBar />
-          <SplitFactoryProvider config={config}>
-            <SplitClientProvider>
+          <FeatureFlagProvider config={config}>
+            <FeatureFlagClientProvider>
               <App />
-            </SplitClientProvider>
-          </SplitFactoryProvider>
+            </FeatureFlagClientProvider>
+          </FeatureFlagProvider>
         </ConfigProvider>
       </ApolloProvider>
     </CookiesProvider>

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

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

@@ -1,6 +1,6 @@
-import { useSplitClient } from "@splitsoftware/splitio-react";
+import { useSplitClient } from "../feature-flags/splitio-react-replacement";
 import { Button, Result } from "antd";
-import LogRocket from "logrocket";
+//import LogRocket from "logrocket";
 import { lazy, Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -101,13 +101,13 @@ export function App({
       client.setAttribute("imexshopid", bodyshop.imexshopid);
 
       if (client.getTreatment("LogRocket_Tracking") === "on") {
-        console.log("LR Start");
-        LogRocket.init(
-          InstanceRenderMgr({
-            imex: "gvfvfw/bodyshopapp",
-            rome: "rome-online/rome-online"
-          })
-        );
+        // console.log("LR Start");
+        // LogRocket.init(
+        //   InstanceRenderMgr({
+        //     imex: "gvfvfw/bodyshopapp",
+        //     rome: "rome-online/rome-online"
+        //   })
+        // );
       }
     }
   }, [bodyshop, client, currentUser.authorized]);
@@ -225,13 +225,22 @@ export function App({
               path="/parts/*"
               element={
                 <ErrorBoundary>
-                  <PrivateRoute isAuthorized={currentUser.authorized} />
+                  <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+                    <PrivateRoute isAuthorized={currentUser.authorized} />
+                  </SocketProvider>
                 </ErrorBoundary>
               }
             >
               <Route path="*" element={<SimplifiedPartsPageContainer />} />
             </Route>
-            <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+            <Route
+              path="/edit/*"
+              element={
+                <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+                  <PrivateRoute isAuthorized={currentUser.authorized} />
+                </SocketProvider>
+              }
+            >
               <Route path="*" element={<DocumentEditorContainer />} />
             </Route>
           </Routes>

client/src/App/App.styles.scss

@@ -509,3 +509,55 @@
     pointer-events: none !important;
   }
 }
+
+
+.esignature-embed {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-width: 0;
+}
+
+.esignature-modal {
+  .ant-modal {
+    top: 16px;
+    max-width: calc(100vw - 32px);
+    padding-bottom: 0;
+  }
+
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 32px);
+  }
+
+  .ant-modal-body {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+}
+
+.esignature-modal-frame {
+  width: 100%;
+  height: calc(100vh - 150px);
+  min-height: 320px;
+  overflow: hidden;
+}
+
+@media (max-width: 768px), (max-height: 560px) {
+  .esignature-modal {
+    .ant-modal {
+      top: 8px;
+      max-width: calc(100vw - 16px);
+    }
+
+    .ant-modal-content {
+      max-height: calc(100vh - 16px);
+    }
+  }
+
+  .esignature-modal-frame {
+    height: calc(100vh - 132px);
+    min-height: 0;
+  }
+}

client/src/App/themeProvider.js

@@ -37,6 +37,7 @@ const defaultTheme = (isDarkMode) => ({
       isDarkMode
     ),
     colorError: isDarkMode ? "#ff4d4f" : "#f5222d",
+    colorShadow: isDarkMode ? "rgba(0, 0, 0, 0.7)" : "#000000",
     colorBgBase: isDarkMode ? "#1f1f1f" : "#ffffff" // Align with Ant Design dark mode
   }
 });

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/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/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-detail-edit/bill-detail-edit-component.jsx

@@ -13,6 +13,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import dayjs from "../../utils/day";
+import { buildBillUpdateAuditDetails } from "../../utils/auditTrailDetails";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
@@ -134,10 +135,16 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
 
     await Promise.all(updates);
 
+    const details = buildBillUpdateAuditDetails({
+      originalBill: data?.bills_by_pk,
+      bill,
+      billlines
+    });
+
     insertAuditTrail({
-      jobid: bill.jobid,
+      jobid: bill.jobid ?? data?.bills_by_pk?.jobid,
       billid: search.billid,
-      operation: AuditTrailMapping.billupdated(bill.invoice_number),
+      operation: AuditTrailMapping.billupdated(bill.invoice_number, details),
       type: "billupdated"
     });
 

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

@@ -23,7 +23,8 @@ function BillEnterAiScan({
   fileInputRef,
   scanLoading,
   setScanLoading,
-  setIsAiScan
+  setIsAiScan,
+  setRawAIData
 }) {
   const notification = useNotification();
   const { t } = useTranslation();
@@ -57,6 +58,7 @@ function BillEnterAiScan({
         }
         setScanLoading(false);
 
+        setRawAIData(data.data);
         // Update form with the extracted data
         if (data?.data?.billForm) {
           form.setFieldsValue(data.data.billForm);
@@ -147,6 +149,7 @@ function BillEnterAiScan({
                 setScanLoading(false);
 
                 form.setFieldsValue(data.data.billForm);
+                setRawAIData(data.data);
                 await form.validateFields(["billlines"], { recursive: true });
 
                 notification.success({

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

@@ -1,6 +1,6 @@
 import { useApolloClient, useMutation } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Button, Checkbox, Form, Modal, Space } from "antd";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
+import { Button, Checkbox, Divider, Form, Modal, Space } from "antd";
 import _ from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -28,6 +28,7 @@ import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
+import BillAiFeedback from "../bill-ai-feedback/bill-ai-feedback.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -53,6 +54,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   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();
@@ -387,6 +389,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         billlines: []
       });
       setIsAiScan(false);
+      setRawAIData(null);
       // form.resetFields();
     } else {
       toggleModalVisible();
@@ -404,6 +407,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       }
       setScanLoading(false);
       setIsAiScan(false);
+      setRawAIData(null);
       toggleModalVisible();
     }
   };
@@ -429,6 +433,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       }
       setScanLoading(false);
       setIsAiScan(false);
+      setRawAIData(null);
     }
   }, [billEnterModal.open, form, formValues]);
 
@@ -456,6 +461,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
               scanLoading={scanLoading}
               setScanLoading={setScanLoading}
               setIsAiScan={setIsAiScan}
+              setRawAIData={setRawAIData}
             />
           )}
         </Space>
@@ -471,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

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

@@ -1,6 +1,6 @@
 import Icon, { UploadOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -52,6 +52,7 @@ export function BillFormComponent({
   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 }
@@ -118,6 +119,7 @@ export function BillFormComponent({
     }
   }, [
     form,
+    vendorIdFormWatch,
     billEdit,
     loadOutstandingReturns,
     loadInventory,

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

@@ -1,5 +1,5 @@
 import { useLazyQuery, useQuery } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";

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

@@ -1,5 +1,5 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -36,6 +36,7 @@ export function BillEnterModalLinesComponent({
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
   const firstFieldRefs = useRef({});
+  const lineDescriptionRefs = useRef({});
 
   const CONTROL_HEIGHT = 32;
 
@@ -94,8 +95,26 @@ export function BillEnterModalLinesComponent({
     });
   };
 
+  const focusLineDescription = (index) => {
+    const lineDescription = lineDescriptionRefs.current[index];
+
+    if (typeof lineDescription?.focus === "function") {
+      lineDescription.focus({ preventScroll: true });
+      return;
+    }
+
+    lineDescription?.resizableTextArea?.textArea?.focus?.({ preventScroll: true });
+  };
+
+  const focusJobLineSelect = (index) => {
+    window.setTimeout(() => {
+      firstFieldRefs.current[index]?.focus?.({ preventScroll: true });
+    }, 0);
+  };
+
   // 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"]);
@@ -194,6 +213,12 @@ export function BillEnterModalLinesComponent({
               minHeight: `${CONTROL_HEIGHT}px`
             }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
+            onInputKeyDown={(event) => {
+              if (event.key !== "Tab" || event.shiftKey || event.defaultPrevented) return;
+
+              event.preventDefault();
+              focusLineDescription(index);
+            }}
             onSelect={(value, opt) => {
               // IMPORTANT:
               // Do NOT autofill actual_cost here. It should only fill when the user forward-tabs
@@ -220,6 +245,7 @@ export function BillEnterModalLinesComponent({
                   };
                 })
               });
+              focusJobLineSelect(index);
             }}
           />
         )
@@ -235,7 +261,16 @@ export function BillEnterModalLinesComponent({
           label: t("billlines.fields.line_desc"),
           rules: [{ required: true }]
         }),
-        formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
+        formInput: (record, index) => (
+          <Input.TextArea
+            ref={(el) => {
+              lineDescriptionRefs.current[index] = el;
+            }}
+            disabled={disabled}
+            autoSize
+            tabIndex={0}
+          />
+        )
       },
 
       {
@@ -434,9 +469,9 @@ export function BillEnterModalLinesComponent({
           rules: [{ required: true }]
         }),
         formInput: () => (
-          <Select 
-            showSearch 
-            style={{ minWidth: "3rem" }} 
+          <Select
+            showSearch
+            style={{ minWidth: "3rem" }}
             disabled={disabled}
             tabIndex={0}
             options={
@@ -460,7 +495,7 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "location"]
               }),
               formInput: () => (
-                <Select 
+                <Select
                   disabled={disabled}
                   tabIndex={0}
                   options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
@@ -494,7 +529,9 @@ export function BillEnterModalLinesComponent({
                     {Enhanced_Payroll.treatment === "on" ? (
                       <Space>
                         {t("joblines.fields.assigned_team", { name: employeeTeamName?.name })}
-                        {`${jobline.mod_lb_hrs} units/${t(`joblines.fields.lbr_types.${jobline.mod_lbr_ty}`)}`}
+                        {jobline
+                          ? `${jobline.mod_lb_hrs} units/${t(`joblines.fields.lbr_types.${jobline.mod_lbr_ty}`)}`
+                          : null}
                       </Space>
                     ) : null}
 
@@ -505,10 +542,7 @@ export function BillEnterModalLinesComponent({
                       rules={[{ required: true }]}
                       name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                     >
-                      <Select 
-                        allowClear
-                        options={CiecaSelect(false, true)}
-                      />
+                      <Select allowClear options={CiecaSelect(false, true)} />
                     </Form.Item>
 
                     {Enhanced_Payroll.treatment === "on" ? (

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

@@ -8,7 +8,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import GlobalSearchOs from "../global-search/global-search-os.component";
 import "./breadcrumbs.styles.scss";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 const mapStateToProps = createStructuredSelector({
   breadcrumbs: selectBreadcrumbs,

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -1,6 +1,6 @@
 import { PictureFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Badge, Popover } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";

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}`);
         }
       });
     }

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

@@ -64,7 +64,7 @@ function normalizeJobAllocations(ack) {
  * RR-specific DMS Allocations Summary
  * Focused on what we actually send to RR:
  *  - ROGOG (split by taxable / non-taxable segments)
- *  - ROLABOR shell
+ *  - ROLABOR labor rows with bill hours / rates
  *
  * The heavy lifting (ROGOG/ROLABOR split, cost allocation, tax flags)
  * is now done on the backend via buildRogogFromAllocations/buildRolaborFromRogog.
@@ -181,21 +181,30 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
   const rolaborRows = useMemo(() => {
     if (!rolaborPreview || !Array.isArray(rolaborPreview.ops)) return [];
 
-    return rolaborPreview.ops.map((op, idx) => {
-      const rowOpCode = opCode || op.opCode;
+    return rolaborPreview.ops
+      .filter((op) =>
+        [op.bill?.jobTotalHrs, op.bill?.billTime, op.bill?.billRate, op.amount?.custPrice, op.amount?.totalAmt]
+          .map((value) => Number.parseFloat(value ?? "0"))
+          .some((value) => !Number.isNaN(value) && value !== 0)
+      )
+      .map((op, idx) => {
+        const rowOpCode = opCode || op.opCode;
 
-      return {
-        key: `${op.jobNo}-${idx}`,
-        opCode: rowOpCode,
-        jobNo: op.jobNo,
-        custPayTypeFlag: op.custPayTypeFlag,
-        custTxblNtxblFlag: op.custTxblNtxblFlag,
-        payType: op.bill?.payType,
-        amtType: op.amount?.amtType,
-        custPrice: op.amount?.custPrice,
-        totalAmt: op.amount?.totalAmt
-      };
-    });
+        return {
+          key: `${op.jobNo}-${idx}`,
+          opCode: rowOpCode,
+          jobNo: op.jobNo,
+          custPayTypeFlag: op.custPayTypeFlag,
+          custTxblNtxblFlag: op.custTxblNtxblFlag,
+          payType: op.bill?.payType,
+          jobTotalHrs: op.bill?.jobTotalHrs,
+          billTime: op.bill?.billTime,
+          billRate: op.bill?.billRate,
+          amtType: op.amount?.amtType,
+          custPrice: op.amount?.custPrice,
+          totalAmt: op.amount?.totalAmt
+        };
+      });
   }, [rolaborPreview, opCode]);
 
   // Totals for ROGOG (sum custPrice + dlrCost over all lines)
@@ -245,6 +254,9 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
     { title: "CustPayType", dataIndex: "custPayTypeFlag", key: "custPayTypeFlag" },
     { title: "CustTxblFlag", dataIndex: "custTxblNtxblFlag", key: "custTxblNtxblFlag" },
     { title: "PayType", dataIndex: "payType", key: "payType" },
+    { title: "JobTotalHrs", dataIndex: "jobTotalHrs", key: "jobTotalHrs" },
+    { title: "BillTime", dataIndex: "billTime", key: "billTime" },
+    { title: "BillRate", dataIndex: "billRate", key: "billRate" },
     { title: "AmtType", dataIndex: "amtType", key: "amtType" },
     { title: "CustPrice", dataIndex: "custPrice", key: "custPrice" },
     { title: "TotalAmt", dataIndex: "totalAmt", key: "totalAmt" }
@@ -317,12 +329,13 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
       children: (
         <>
           <Typography.Paragraph type="secondary" style={{ marginBottom: 8 }}>
-            This mirrors the shell that would be sent for ROLABOR when all financials are carried in GOG.
+            This mirrors the labor rows RR will receive, including weighted bill hours and rates derived from the
+            job&apos;s labor lines.
           </Typography.Paragraph>
           <ResponsiveTable
             pagination={false}
             columns={rolaborColumns}
-            mobileColumnKeys={["jobNo", "opCode", "breakOut", "itemType"]}
+            mobileColumnKeys={["jobNo", "opCode", "billRate", "custPrice"]}
             rowKey="key"
             dataSource={rolaborRows}
             locale={{ emptyText: "No ROLABOR lines would be generated." }}

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

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,

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

@@ -1,4 +1,4 @@
-import { Button, Col } 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";
@@ -49,7 +49,13 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
   if (!open) return null;
 
   const columns = [
-    { title: t("jobs.fields.dms.id"), dataIndex: "ContactId", key: "ContactId" },
+    { title: t("jobs.fields.dms.id"), dataIndex: "Code", key: "ContactId" },
+    {
+      title: t("jobs.fields.dms.IsARCustomer"),
+      dataIndex: "IsARCustomer",
+      key: "IsARCustomer",
+      render: (text, record) => <Checkbox checked={record.IsARCustomer} disabled />
+    },
     {
       title: t("jobs.fields.dms.name1"),
       key: "name1",

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

@@ -26,7 +26,7 @@ import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import { DMS_MAP } from "../../utils/dmsUtils";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 /**
  * CDK-like DMS post form:

client/src/components/document-editor/document-editor-local.component.jsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Result } from "antd";
+import { Result, theme } from "antd";
 import * as markerjs2 from "markerjs2";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,12 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { handleUpload } from "../documents-local-upload/documents-local-upload.utility";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import {
+  addGreyscaleButtonToMarkerArea,
+  addImageHistoryUndoToMarkerArea,
+  applyGreyscaleToMarkerAreaImage,
+  setMarkerAreaImageSource
+} from "./document-editor.utility";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -24,7 +30,9 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageLoading, setImageLoading] = useState(true);
   const markerArea = useRef(null);
+  const imageHistory = useRef([]);
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const notification = useNotification();
   const [uploading, setUploading] = useState(false);
 
@@ -32,6 +40,7 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
     async (dataUrl) => {
       if (uploading) return;
       setUploading(true);
+      setLoading(true);
       const blob = await b64toBlob(dataUrl);
       const nameWithoutExt = filename.split(".").slice(0, -1).join(".").trim();
       const parts = nameWithoutExt.split("-");
@@ -70,6 +79,23 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
     [filename, jobid, notification, uploading]
   );
 
+  const handleGreyscale = useCallback(() => {
+    if (!imgRef.current || loading || uploaded || imageLoading || !imageLoaded) return;
+
+    imageHistory.current.push(imgRef.current.src);
+    applyGreyscaleToMarkerAreaImage(markerArea.current, imgRef.current);
+  }, [imageLoaded, imageLoading, loading, uploaded]);
+
+  const undoImageEdit = useCallback(() => {
+    if (!imgRef.current) return;
+
+    const previousSrc = imageHistory.current.pop();
+
+    if (previousSrc) {
+      setMarkerAreaImageSource(markerArea.current, imgRef.current, previousSrc);
+    }
+  }, []);
+
   useEffect(() => {
     if (imgRef.current !== null && imageLoaded && !markerArea.current) {
       // create a marker.js MarkerArea
@@ -93,8 +119,10 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
       markerArea.current.renderImageQuality = 1;
       //markerArea.current.settings.displayMode = "inline";
       markerArea.current.show();
+      addGreyscaleButtonToMarkerArea(markerArea.current, handleGreyscale, t("documents.labels.greyscale"));
+      addImageHistoryUndoToMarkerArea(markerArea.current, () => imageHistory.current.length > 0, undoImageEdit);
     }
-  }, [triggerUpload, imageLoaded]);
+  }, [handleGreyscale, imageLoaded, t, triggerUpload, undoImageEdit]);
 
   useEffect(() => {
     if (!imageUrl) return;
@@ -106,6 +134,7 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
       try {
         const response = await axios.get(imageUrl, { responseType: "blob", signal: controller.signal });
         const blobUrl = URL.createObjectURL(response.data);
+        imageHistory.current = [];
         setLoadedImageUrl((prevUrl) => {
           if (prevUrl) URL.revokeObjectURL(prevUrl);
           return blobUrl;
@@ -142,7 +171,7 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
   }
 
   return (
-    <div>
+    <div style={{ background: token.colorBgBase, color: token.colorText, minHeight: "100vh" }}>
       {!loading && !uploaded && loadedImageUrl && (
         <img
           ref={imgRef}
@@ -158,7 +187,12 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
       {(loading || imageLoading || !imageLoaded) && !uploaded && (
         <LoadingSpinner message={t("documents.labels.uploading")} />
       )}
-      {uploaded && <Result status="success" title={t("documents.successes.edituploaded")} />}
+      {uploaded && (
+        <Result
+          status="success"
+          title={<span style={{ color: token.colorText }}>{t("documents.successes.edituploaded")}</span>}
+        />
+      )}
     </div>
   );
 }

client/src/components/document-editor/document-editor.component.jsx

@@ -1,15 +1,21 @@
 //import "tui-image-editor/dist/tui-image-editor.css";
 import axios from "axios";
-import { Result } from "antd";
+import { Result, theme } from "antd";
 import * as markerjs2 from "markerjs2";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { handleUpload } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import {
+  addGreyscaleButtonToMarkerArea,
+  addImageHistoryUndoToMarkerArea,
+  applyGreyscaleToMarkerAreaImage,
+  setMarkerAreaImageSource
+} from "./document-editor.utility";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -27,7 +33,9 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageLoading, setImageLoading] = useState(true);
   const markerArea = useRef(null);
+  const imageHistory = useRef([]);
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const notification = useNotification();
 
   const triggerUpload = useCallback(
@@ -57,6 +65,23 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
     [bodyshop, currentUser, document, notification]
   );
 
+  const handleGreyscale = useCallback(() => {
+    if (!imgRef.current || loading || uploaded || imageLoading || !imageLoaded) return;
+
+    imageHistory.current.push(imgRef.current.src);
+    applyGreyscaleToMarkerAreaImage(markerArea.current, imgRef.current);
+  }, [imageLoaded, imageLoading, loading, uploaded]);
+
+  const undoImageEdit = useCallback(() => {
+    if (!imgRef.current) return;
+
+    const previousSrc = imageHistory.current.pop();
+
+    if (previousSrc) {
+      setMarkerAreaImageSource(markerArea.current, imgRef.current, previousSrc);
+    }
+  }, []);
+
   useEffect(() => {
     if (imgRef.current !== null && imageLoaded && !markerArea.current) {
       // create a marker.js MarkerArea
@@ -80,8 +105,10 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       markerArea.current.renderImageQuality = 1;
       //markerArea.current.settings.displayMode = "inline";
       markerArea.current.show();
+      addGreyscaleButtonToMarkerArea(markerArea.current, handleGreyscale, t("documents.labels.greyscale"));
+      addImageHistoryUndoToMarkerArea(markerArea.current, () => imageHistory.current.length > 0, undoImageEdit);
     }
-  }, [triggerUpload, imageLoaded]);
+  }, [handleGreyscale, imageLoaded, t, triggerUpload, undoImageEdit]);
 
   useEffect(() => {
     if (!document?.id) return;
@@ -100,6 +127,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
           }
         );
         const blobUrl = URL.createObjectURL(response.data);
+        imageHistory.current = [];
         setImageUrl((prevUrl) => {
           if (prevUrl) URL.revokeObjectURL(prevUrl);
           return blobUrl;
@@ -134,7 +162,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   }
 
   return (
-    <div>
+    <div style={{ background: token.colorBgBase, color: token.colorText, minHeight: "100vh" }}>
       {!loading && !uploaded && imageUrl && (
         <img
           ref={imgRef}
@@ -150,7 +178,12 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       {(loading || imageLoading || !imageLoaded) && !uploaded && (
         <LoadingSpinner message={t("documents.labels.uploading")} />
       )}
-      {uploaded && <Result status="success" title={t("documents.successes.edituploaded")} />}
+      {uploaded && (
+        <Result
+          status="success"
+          title={<span style={{ color: token.colorText }}>{t("documents.successes.edituploaded")}</span>}
+        />
+      )}
     </div>
   );
 }

client/src/components/document-editor/document-editor.utility.js

@@ -0,0 +1,123 @@
+/**
+ * Converts an image element to a greyscale data URL.
+ * @param imageElement
+ * @returns {string}
+ */
+export function convertImageElementToGreyscaleDataUrl(imageElement) {
+  if (!imageElement?.naturalWidth || !imageElement?.naturalHeight) {
+    throw new Error("Image must be loaded before it can be converted to greyscale.");
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = imageElement.naturalWidth;
+  canvas.height = imageElement.naturalHeight;
+
+  const context = canvas.getContext("2d");
+  context.drawImage(imageElement, 0, 0);
+
+  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+  const pixels = imageData.data;
+
+  for (let i = 0; i < pixels.length; i += 4) {
+    const luminance = Math.round(pixels[i] * 0.299 + pixels[i + 1] * 0.587 + pixels[i + 2] * 0.114);
+    pixels[i] = luminance;
+    pixels[i + 1] = luminance;
+    pixels[i + 2] = luminance;
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  return canvas.toDataURL("image/jpeg", 1);
+}
+
+/**
+ * Adds a greyscale button to the marker area controls if it doesn't already exist.
+ * @param markerArea
+ * @param onGreyscale
+ * @param title
+ */
+export function addGreyscaleButtonToMarkerArea(markerArea, onGreyscale, title) {
+  requestAnimationFrame(() => {
+    const renderButton = markerArea?.coverDiv?.querySelector?.('[data-action="render"]');
+
+    if (!renderButton || markerArea.coverDiv.querySelector('[data-action="greyscale"]')) return;
+
+    const greyscaleButton = document.createElement("div");
+    greyscaleButton.className = renderButton.className;
+    greyscaleButton.innerHTML =
+      '<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20V2zm0 2.25v15.5a7.75 7.75 0 0 1 0-15.5z"/></svg>';
+    greyscaleButton.setAttribute("role", "button");
+    greyscaleButton.setAttribute("data-action", "greyscale");
+    greyscaleButton.setAttribute("aria-label", title);
+    greyscaleButton.title = title;
+    greyscaleButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onGreyscale();
+    });
+
+    renderButton.parentElement.insertBefore(greyscaleButton, renderButton);
+  });
+}
+
+/**
+ * Applies a greyscale filter to the image in the marker area and updates the image source.
+ * @param markerArea
+ * @param imageElement
+ * @returns {string}
+ */
+export function applyGreyscaleToMarkerAreaImage(markerArea, imageElement) {
+  const dataUrl = convertImageElementToGreyscaleDataUrl(imageElement);
+
+  setMarkerAreaImageSource(markerArea, imageElement, dataUrl);
+
+  return dataUrl;
+}
+
+/**
+ * Sets the image source for the marker area and updates the editing target if it's an image element.
+ * @param markerArea
+ * @param imageElement
+ * @param src
+ */
+export function setMarkerAreaImageSource(markerArea, imageElement, src) {
+  imageElement.src = src;
+
+  if (markerArea?.editingTarget instanceof HTMLImageElement) {
+    markerArea.editingTarget.src = src;
+  }
+}
+
+/**
+ * Adds undo functionality for image edits to the marker area by tracking the state before and after undo actions.
+ * @param markerArea
+ * @param canUndoImage
+ * @param undoImage
+ */
+export function addImageHistoryUndoToMarkerArea(markerArea, canUndoImage, undoImage) {
+  requestAnimationFrame(() => {
+    const undoButton = markerArea?.coverDiv?.querySelector?.('[data-action="undo"]');
+
+    if (!undoButton || undoButton.dataset.imageHistoryUndo === "true") return;
+
+    let markerStateBeforeUndo = null;
+
+    undoButton.dataset.imageHistoryUndo = "true";
+    undoButton.addEventListener(
+      "click",
+      () => {
+        markerStateBeforeUndo = JSON.stringify(markerArea.getState(true));
+      },
+      true
+    );
+    undoButton.addEventListener("click", () => {
+      const markerStateAfterUndo = JSON.stringify(markerArea.getState(true));
+
+      if (markerStateBeforeUndo === markerStateAfterUndo && canUndoImage()) {
+        undoImage();
+      }
+
+      markerStateBeforeUndo = null;
+    });
+  });
+}

client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js

@@ -4,6 +4,7 @@ import i18n from "i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
+import { replaceAccents } from "../../utils/replaceAccents.js";
 import client from "../../utils/GraphQLClient";
 
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
@@ -144,32 +145,3 @@ export const uploadToS3 = async (
     if (onError) onError(JSON.stringify(error.message));
   }
 };
-
-function replaceAccents(str) {
-  // Verifies if the String has accents and replace them
-  if (str.search(/[\xC0-\xFF]/g) > -1) {
-    str = str
-      .replace(/[\xC0-\xC5]/g, "A")
-      .replace(/[\xC6]/g, "AE")
-      .replace(/[\xC7]/g, "C")
-      .replace(/[\xC8-\xCB]/g, "E")
-      .replace(/[\xCC-\xCF]/g, "I")
-      .replace(/[\xD0]/g, "D")
-      .replace(/[\xD1]/g, "N")
-      .replace(/[\xD2-\xD6\xD8]/g, "O")
-      .replace(/[\xD9-\xDC]/g, "U")
-      .replace(/[\xDD]/g, "Y")
-      .replace(/[\xDE]/g, "P")
-      .replace(/[\xE0-\xE5]/g, "a")
-      .replace(/[\xE6]/g, "ae")
-      .replace(/[\xE7]/g, "c")
-      .replace(/[\xE8-\xEB]/g, "e")
-      .replace(/[\xEC-\xEF]/g, "i")
-      .replace(/[\xF1]/g, "n")
-      .replace(/[\xF2-\xF6\xF8]/g, "o")
-      .replace(/[\xF9-\xFC]/g, "u")
-      .replace(/[\xFE]/g, "p")
-      .replace(/[\xFD\xFF]/g, "y");
-  }
-  return str;
-}

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

@@ -9,7 +9,7 @@ import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
 import JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 
 const mapStateToProps = createStructuredSelector({

client/src/components/esignature-custom-document/esignature-custom-document.component.jsx

@@ -0,0 +1,105 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Button, Upload } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { hasDocumensoApiKey } from "../../utils/esignature.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setEsignatureContext: (context) =>
+    dispatch(
+      setModalContext({
+        context,
+        modal: "esignature"
+      })
+    )
+});
+
+export function EsignatureCustomDocument({
+  bodyshop,
+  disabled = false,
+  jobId,
+  setEsignatureContext,
+  showUnavailable = false
+}) {
+  const [loading, setLoading] = useState(false);
+  const notification = useNotification();
+  const { t } = useTranslation();
+  const esignatureEnabled = hasDocumensoApiKey(bodyshop);
+  const isDisabled = disabled || !esignatureEnabled;
+
+  if (!esignatureEnabled && !showUnavailable) {
+    return null;
+  }
+
+  const uploadCustomDocument = async ({ file, onError, onSuccess }) => {
+    if (isDisabled) {
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("document", file);
+    formData.append("jobid", jobId);
+    formData.append("bodyshop", JSON.stringify(bodyshop));
+
+    setLoading(true);
+
+    try {
+      const {
+        data: { token, documentId, envelopeId }
+      } = await axios.post("/esign/new-custom", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      });
+
+      setEsignatureContext({ context: { token, documentId, envelopeId, jobid: jobId } });
+      onSuccess?.({ token, documentId, envelopeId });
+    } catch (error) {
+      notification.error({
+        title: t("esignature.errors.upload_title"),
+        description: error?.response?.data?.error || error?.response?.data?.message || error.message
+      });
+      onError?.(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Upload
+      accept="application/pdf,.pdf"
+      beforeUpload={(file) => {
+        if (file.type === "application/pdf" || file.name?.toLowerCase().endsWith(".pdf")) {
+          return true;
+        }
+
+        notification.error({
+          title: t("esignature.errors.upload_title"),
+          description: t("esignature.errors.pdf_only")
+        });
+        return Upload.LIST_IGNORE;
+      }}
+      customRequest={uploadCustomDocument}
+      disabled={isDisabled}
+      maxCount={1}
+      showUploadList={false}
+      multiple={false}
+    >
+      <Button disabled={isDisabled} icon={<UploadOutlined />} loading={loading}>
+        {t("esignature.actions.upload_document")}
+      </Button>
+    </Upload>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EsignatureCustomDocument);

client/src/components/esignature-modal/esignature-modal.container.jsx

@@ -0,0 +1,113 @@
+import { EmbedUpdateDocumentV1 } from "@documenso/embed-react";
+import { Modal, notification, Result } from "antd";
+import axios from "axios";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectEsignature } from "../../redux/modals/modals.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { useState } from "react";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { hasDocumensoApiKey } from "../../utils/esignature.js";
+
+const mapStateToProps = createStructuredSelector({
+  esignatureModal: selectEsignature,
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("esignature"))
+});
+
+export function EsignatureModalContainer({ esignatureModal, toggleModalVisible, bodyshop, currentUser }) {
+  const { t } = useTranslation();
+  const { open, context } = esignatureModal;
+  const { token, envelopeId, documentId, jobid } = context;
+  const [distributing, setDistributing] = useState(false);
+  const hasToken = Boolean(token);
+
+  if (!hasDocumensoApiKey(bodyshop)) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={InstanceRenderManager({
+        imex: t("jobs.labels.esignature_imex"),
+        rome: t("jobs.labels.esignature_rome")
+      })}
+      onOk={async () => {
+        if (!hasToken) {
+          return;
+        }
+
+        try {
+          setDistributing(true);
+          await axios.post("/esign/distribute", {
+            documentId,
+            envelopeId,
+            jobid,
+            bodyshopid: bodyshop.id
+          });
+
+          toggleModalVisible();
+        } catch (error) {
+          notification.error({
+            message: t("esignature.distribute_error"),
+            description: error?.response?.data?.message || error.message
+          });
+        }
+        setDistributing(false);
+      }}
+      onCancel={async () => {
+        if (!hasToken) {
+          toggleModalVisible();
+          return;
+        }
+
+        try {
+          await axios.post("/esign/delete", {
+            documentId,
+            envelopeId,
+            bodyshopid: bodyshop.id
+          });
+
+          toggleModalVisible();
+        } catch (error) {
+          notification.error({
+            message: t("esignature.cancel_error"),
+            description: error?.response?.data?.message || error.message
+          });
+        }
+      }}
+      okButtonProps={{ loading: distributing, style: hasToken ? undefined : { display: "none" } }}
+      okText={t("esignature.actions.distribute")}
+      destroyOnHidden
+      width="calc(100vw - 32px)"
+      wrapClassName="esignature-modal"
+      styles={{ body: { overflow: "hidden", padding: 0 } }}
+    >
+      <div className="esignature-modal-frame">
+        {hasToken ? (
+          <EmbedUpdateDocumentV1
+            presignToken={token}
+            host="https://sign.imex.online"
+            documentId={documentId}
+            externalId={`${jobid}|${currentUser?.email}`}
+            className="esignature-embed"
+            onDocumentUpdated={(data) => {
+              console.log("Document updated:", data);
+            }}
+          />
+        ) : (
+          <Result status="warning" title={t("esignature.errors.no_token")} />
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EsignatureModalContainer);

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,10 +222,35 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  message={t("general.labels.validationerror")}
+                  title={t("general.labels.validationerror")}
                   description={
-                    <div>
-                      <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
+                    <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

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>

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

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
+import { useTreatment } from "../../feature-flags/splitio-react-replacement.jsx";
 import { selectIsPartsEntry } from "../../redux/application/application.selectors.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 
@@ -16,6 +17,12 @@ const mapStateToProps = createStructuredSelector({
 
 export function GlobalFooter({ isPartsEntry }) {
   const { t } = useTranslation();
+  const testFlagTreatment = useTreatment({ name: "TEST_FLAG" });
+  const testFlagEnabled = testFlagTreatment === "on";
+
+  const testFlagIndicator = testFlagEnabled ? (
+    <div style={{ fontWeight: 600, marginTop: 4 }}>Test Feature Flag Enabled</div>
+  ) : null;
 
   if (isPartsEntry) {
     return (
@@ -38,6 +45,7 @@ export function GlobalFooter({ isPartsEntry }) {
           <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
             Disclaimer & Notices
           </Link>
+          {testFlagIndicator}
         </div>
       </Footer>
     );
@@ -74,6 +82,7 @@ export function GlobalFooter({ isPartsEntry }) {
         <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
           Disclaimer & Notices
         </Link>
+        {testFlagIndicator}
       </div>
     </Footer>
   );

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

@@ -2,7 +2,7 @@
 
 import { BellFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Badge, Layout, Menu, Spin, Tooltip } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -1,6 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Col, Row, Tag } from "antd";
+import { Button, Card, Checkbox, Col, Row, Space, Tag } from "antd";
 import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,6 +12,9 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import axios from "axios";
+import { useNotification } from "../../contexts/Notifications/notificationContext";
+import { hasDocumensoApiKey } from "../../utils/esignature.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -23,6 +26,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobAuditTrail);
 
 export function JobAuditTrail({ bodyshop, jobId }) {
   const { t } = useTranslation();
+  const notification = useNotification();
+  const esignatureEnabled = hasDocumensoApiKey(bodyshop);
   const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
     variables: { jobid: jobId },
     skip: !jobId,
@@ -53,6 +58,145 @@ export function JobAuditTrail({ bodyshop, jobId }) {
       )
     }
   ];
+  const esigColumns = [
+    {
+      title: t("esignature.fields.created_at"),
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (text) => <DateTimeFormatter>{text}</DateTimeFormatter>
+    },
+    {
+      title: t("esignature.fields.updated_at"),
+      dataIndex: "updated_at",
+      key: "updated_at",
+      render: (text) => <DateTimeFormatter>{text}</DateTimeFormatter>
+    },
+    {
+      title: t("esignature.fields.title"),
+      dataIndex: "title",
+      key: "title",
+      render: (text) => (
+        <BlurWrapperComponent featureName="audit" bypass>
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
+    },
+    {
+      title: t("esignature.fields.external_document_id"),
+      dataIndex: "external_document_id",
+      key: "external_document_id",
+      render: (text) => (
+        <BlurWrapperComponent featureName="audit" bypass>
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
+    },
+    {
+      title: t("esignature.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      render: (text) => (
+        <BlurWrapperComponent featureName="audit" bypass>
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
+    },
+    {
+      title: t("esignature.fields.opened"),
+      dataIndex: "opened",
+      key: "opened",
+      render: (text) => <Checkbox checked={text} disabled />
+    },
+    {
+      title: t("esignature.fields.rejected"),
+      dataIndex: "rejected",
+      key: "rejected",
+      render: (text) => <Checkbox checked={text} disabled />
+    },
+    {
+      title: t("esignature.fields.completed"),
+      dataIndex: "completed",
+      key: "completed",
+      render: (text) => <Checkbox checked={text} disabled />
+    },
+    {
+      title: t("esignature.fields.completed_at"),
+      dataIndex: "completed_at",
+      key: "completed_at",
+      render: (text) => <DateTimeFormatter>{text}</DateTimeFormatter>
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (_text, record) => (
+        <Space wrap>
+          <Button
+            disabled={record.completed_at !== null || record.status === "REJECTED"}
+            onClick={async () => {
+              logImEXEvent("job_esig_delete", {});
+              try {
+                await axios.post("/esign/delete", {
+                  documentId: record.external_document_id,
+                  bodyshopid: bodyshop.id
+                });
+                refetch();
+              } catch (error) {
+                console.error("Error deleting document:", error?.response?.data || error.message);
+                notification.error({
+                  message: t("esignature.delete_error"),
+                  description: error?.response?.data?.error || error.message
+                });
+              }
+            }}
+          >
+            {t("esignature.actions.delete")}
+          </Button>
+          <Button
+            onClick={async () => {
+              logImEXEvent("job_esig_redistribute", {});
+              try {
+                await axios.post("/esign/redistribute", {
+                  documentId: record.external_document_id,
+                  bodyshopid: bodyshop.id
+                });
+
+                //Pop the success notification. Possible audit requery required.
+              } catch (error) {
+                console.error("Error viewing document:", error?.response?.data || error.message);
+                notification.error({
+                  message: t("esignature.view_error"),
+                  description: error?.response?.data?.message || error.message
+                });
+              }
+            }}
+          >
+            {t("esignature.actions.redistribute")}
+          </Button>
+          <Button
+            onClick={async () => {
+              logImEXEvent("job_esig_view", {});
+              try {
+                const response = await axios.post("/esign/view", {
+                  documentId: record.external_document_id,
+                  bodyshopid: bodyshop.id
+                });
+                window.open(response.data?.document?.downloadUrl, "_blank");
+              } catch (error) {
+                console.error("Error viewing document:", error?.response?.data || error.message);
+                notification.error({
+                  message: t("esignature.view_error"),
+                  description: error?.response?.data?.message || error.message
+                });
+              }
+            }}
+          >
+            {t("esignature.actions.view")}
+          </Button>
+        </Space>
+      )
+    }
+  ];
   const emailColumns = [
     {
       title: t("audit.fields.created"),
@@ -184,6 +328,20 @@ export function JobAuditTrail({ bodyshop, jobId }) {
           />
         </Card>
       </Col>
+      {esignatureEnabled && (
+        <Col span={24}>
+          <Card title={t("jobs.labels.esignatures")}>
+            <ResponsiveTable
+              loading={loading}
+              columns={esigColumns}
+              mobileColumnKeys={["title", "status"]}
+              rowKey="id"
+              scroll={{ x: true }}
+              dataSource={data ? data.esignature_documents : []}
+            />
+          </Card>
+        </Col>
+      )}
     </Row>
   );
 }

client/src/components/job-close-ro-guard/job-close-ro-gaurd.labor.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -1,5 +1,5 @@
 import { useApolloClient } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Button, Popconfirm } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

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

@@ -30,10 +30,10 @@ import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-re
 // import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
 // import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
 // import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import _ from "lodash";
 import { FaTasks } from "react-icons/fa";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
@@ -44,11 +44,13 @@ import JoblineTeamAssignment from "../job-line-team-assignment/job-line-team-ass
 import JobSendPartPriceChangeComponent from "../job-send-parts-price-change/job-send-parts-price-change.component";
 import PartsOrderDrawer from "../parts-order-list-table/parts-order-list-table-drawer.component";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+import { buildInHouseBillLines } from "./job-lines.in-house-bill-lines.utils";
 import JobLinesExpander from "./job-lines-expander.component";
 import JobLinesPartPriceChange from "./job-lines-part-price-change.component";
 import JobLinesExpanderSimple from "./jobs-lines-expander-simple.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component.jsx";
 
 const UPDATE_JOB_LINES_LOCATION_BULK = gql`
   mutation UPDATE_JOB_LINES_LOCATION_BULK($ids: [uuid!]!, $location: String!) {
@@ -66,7 +68,8 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
   technician: selectTechnician,
-  isPartsEntry: selectIsPartsEntry
+  isPartsEntry: selectIsPartsEntry,
+  authLevel: selectAuthLevel
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -94,7 +97,8 @@ export function JobLinesComponent({
   setTaskUpsertContext,
   billsQuery,
   handlePartsOrderOnRowClick,
-  isPartsEntry
+  isPartsEntry,
+  authLevel
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
   const [bulkUpdateLocations] = useMutation(UPDATE_JOB_LINES_LOCATION_BULK);
@@ -386,18 +390,20 @@ export function JobLinesComponent({
             key: "actions",
             render: (text, record) => (
               <Space>
-                {(record.manual_line || jobIsPrivate) && !technician && (
-                  <Button
-                    disabled={jobRO}
-                    onClick={() => {
-                      setJobLineEditContext({
-                        actions: { refetch: refetch, submit: form && form.submit },
-                        context: { ...record, jobid: job.id }
-                      });
-                    }}
-                    icon={<EditFilled />}
-                  />
-                )}
+                {(record.manual_line || jobIsPrivate) &&
+                  !technician &&
+                  HasRbacAccess({ bodyshop, authLevel, action: "jobs:manual-line" }) && (
+                    <Button
+                      disabled={jobRO}
+                      onClick={() => {
+                        setJobLineEditContext({
+                          actions: { refetch: refetch, submit: form && form.submit },
+                          context: { ...record, jobid: job.id }
+                        });
+                      }}
+                      icon={<EditFilled />}
+                    />
+                  )}
                 <Button
                   title={t("tasks.buttons.create")}
                   onClick={() => {
@@ -410,29 +416,30 @@ export function JobLinesComponent({
                   }}
                   icon={<FaTasks />}
                 />
-
-                {(record.manual_line || jobIsPrivate) && !technician && (
-                  <Button
-                    disabled={jobRO}
-                    onClick={async () => {
-                      await deleteJobLine({
-                        variables: { joblineId: record.id },
-                        update(cache) {
-                          cache.modify({
-                            fields: {
-                              joblines(existingJobLines, { readField }) {
-                                return existingJobLines.filter((jlRef) => record.id !== readField("id", jlRef));
+                {(record.manual_line || jobIsPrivate) &&
+                  !technician &&
+                  HasRbacAccess({ bodyshop, authLevel, action: "jobs:manual-line" }) && (
+                    <Button
+                      disabled={jobRO}
+                      onClick={async () => {
+                        await deleteJobLine({
+                          variables: { joblineId: record.id },
+                          update(cache) {
+                            cache.modify({
+                              fields: {
+                                joblines(existingJobLines, { readField }) {
+                                  return existingJobLines.filter((jlRef) => record.id !== readField("id", jlRef));
+                                }
                               }
-                            }
-                          });
-                        }
-                      });
-                      await axios.post("/job/totalsssu", { id: job.id });
-                      if (refetch) refetch();
-                    }}
-                    icon={<DeleteFilled />}
-                  />
-                )}
+                            });
+                          }
+                        });
+                        await axios.post("/job/totalsssu", { id: job.id });
+                        if (refetch) refetch();
+                      }}
+                      icon={<DeleteFilled />}
+                    />
+                  )}
               </Space>
             )
           }
@@ -589,16 +596,7 @@ export function JobLinesComponent({
                         isinhouse: true,
                         date: dayjs(),
                         total: 0,
-                        billlines: selectedLines.map((p) => ({
-                          joblineid: p.id,
-                          actual_price: p.act_price,
-                          actual_cost: 0,
-                          line_desc: p.line_desc,
-                          line_remarks: p.line_remarks,
-                          part_type: p.part_type,
-                          quantity: p.quantity || 1,
-                          applicable_taxes: { local: false, state: false, federal: false }
-                        }))
+                        billlines: buildInHouseBillLines(selectedLines)
                       }
                     }
                   });
@@ -657,7 +655,7 @@ export function JobLinesComponent({
               <Button id="repair-data-mark-button">{t("jobs.actions.mark")}</Button>
             </Dropdown>
 
-            {!isPartsEntry && (
+            {!isPartsEntry && HasRbacAccess({ bodyshop, authLevel, action: "jobs:manual-line" }) && (
               <Button
                 disabled={jobRO || technician}
                 onClick={() => {

client/src/components/job-detail-lines/job-lines.in-house-bill-lines.utils.js

@@ -0,0 +1,11 @@
+export const buildInHouseBillLines = (lines) =>
+  lines.map((line) => ({
+    joblineid: line.id,
+    actual_price: line.act_price,
+    actual_cost: 0,
+    line_desc: line.line_desc,
+    line_remarks: line.line_remarks,
+    part_type: line.part_type,
+    quantity: line.part_qty ?? line.quantity ?? 1,
+    applicable_taxes: { local: false, state: false, federal: false }
+  }));

client/src/components/job-detail-lines/job-lines.in-house-bill-lines.utils.test.js

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { buildInHouseBillLines } from "./job-lines.in-house-bill-lines.utils";
+
+describe("buildInHouseBillLines", () => {
+  it("carries job line part quantity into the in-house bill line", () => {
+    const billLines = buildInHouseBillLines([
+      {
+        id: "job-line-1",
+        act_price: 125,
+        line_desc: "Door shell",
+        line_remarks: "Left",
+        part_type: "PAA",
+        part_qty: 3
+      }
+    ]);
+
+    expect(billLines[0]).toMatchObject({
+      joblineid: "job-line-1",
+      actual_price: 125,
+      actual_cost: 0,
+      line_desc: "Door shell",
+      line_remarks: "Left",
+      part_type: "PAA",
+      quantity: 3,
+      applicable_taxes: { local: false, state: false, federal: false }
+    });
+  });
+
+  it("falls back to legacy quantity and then one when part quantity is absent", () => {
+    expect(buildInHouseBillLines([{ id: "legacy", quantity: 2 }])[0].quantity).toBe(2);
+    expect(buildInHouseBillLines([{ id: "missing" }])[0].quantity).toBe(1);
+  });
+});

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

@@ -63,7 +63,9 @@ export function JobLineDispatchButton({
             }
           }
           //joblineids: selectedLines.map((l) => l.id),
-        }
+        },
+        refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
+        awaitRefetchQueries: true
       });
       if (result.errors) {
         console.log("🚀 ~ handleConvert ~ result.errors:", result.errors);

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

@@ -1,4 +1,4 @@
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Form, Input, InputNumber, Modal, Select, Switch } from "antd";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -67,22 +67,25 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
-            <Select allowClear options={[
-              { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
-              { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
-              { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
-              { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
-              { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
-              { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
-              { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
-              { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
-              { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
-              { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
-              { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
-              { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
-              { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
-              { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
-            ]} />
+            <Select
+              allowClear
+              options={[
+                { value: "LAA", label: t("joblines.fields.lbr_types.LAA") },
+                { value: "LAB", label: t("joblines.fields.lbr_types.LAB") },
+                { value: "LAD", label: t("joblines.fields.lbr_types.LAD") },
+                { value: "LAE", label: t("joblines.fields.lbr_types.LAE") },
+                { value: "LAF", label: t("joblines.fields.lbr_types.LAF") },
+                { value: "LAG", label: t("joblines.fields.lbr_types.LAG") },
+                { value: "LAM", label: t("joblines.fields.lbr_types.LAM") },
+                { value: "LAR", label: t("joblines.fields.lbr_types.LAR") },
+                { value: "LAS", label: t("joblines.fields.lbr_types.LAS") },
+                { value: "LAU", label: t("joblines.fields.lbr_types.LAU") },
+                { value: "LA1", label: t("joblines.fields.lbr_types.LA1") },
+                { value: "LA2", label: t("joblines.fields.lbr_types.LA2") },
+                { value: "LA3", label: t("joblines.fields.lbr_types.LA3") },
+                { value: "LA4", label: t("joblines.fields.lbr_types.LA4") }
+              ]}
+            />
           </Form.Item>
           <Form.Item label={t("joblines.fields.op_code_desc")} name="op_code_desc">
             <Input />
@@ -128,21 +131,27 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
         </LayoutFormRow>
         <LayoutFormRow>
           <Form.Item label={t("joblines.fields.part_type")} name="part_type">
-            <Select allowClear options={[
-              { value: "PAA", label: t("joblines.fields.part_types.PAA") },
-              { value: "PAC", label: t("joblines.fields.part_types.PAC") },
-              { value: "PAE", label: t("joblines.fields.part_types.PAE") },
-              { value: "PAL", label: t("joblines.fields.part_types.PAL") },
-              { value: "PAM", label: t("joblines.fields.part_types.PAM") },
-              { value: "PAN", label: t("joblines.fields.part_types.PAN") },
-              { value: "PAO", label: t("joblines.fields.part_types.PAO") },
-              { value: "PAR", label: t("joblines.fields.part_types.PAR") },
-              { value: "PAS", label: t("joblines.fields.part_types.PAS") }
-            ]} />
+            <Select
+              allowClear
+              options={[
+                { value: "PAA", label: t("joblines.fields.part_types.PAA") },
+                { value: "PAC", label: t("joblines.fields.part_types.PAC") },
+                { value: "PAE", label: t("joblines.fields.part_types.PAE") },
+                { value: "PAL", label: t("joblines.fields.part_types.PAL") },
+                { value: "PAM", label: t("joblines.fields.part_types.PAM") },
+                { value: "PAN", label: t("joblines.fields.part_types.PAN") },
+                { value: "PAO", label: t("joblines.fields.part_types.PAO") },
+                { value: "PAR", label: t("joblines.fields.part_types.PAR") },
+                { value: "PAS", label: t("joblines.fields.part_types.PAS") }
+              ]}
+            />
           </Form.Item>
           <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
             <Input />
           </Form.Item>
+          <Form.Item label={t("joblines.fields.alt_partno")} name="alt_partno">
+            <Input />
+          </Form.Item>
           <Form.Item
             label={t("joblines.fields.part_qty")}
             name="part_qty"

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

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import Axios from "axios";
 import Dinero from "dinero.js";
 import { useState } from "react";
@@ -14,16 +14,20 @@ import CriticalPartsScan from "../../utils/criticalPartsScan";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
+import { buildJobLineInsertAuditDetails, buildJobLineUpdateAuditDetails } from "../../utils/auditTrailDetails.js";
 
 const mapStateToProps = createStructuredSelector({
   jobLineEditModal: selectJobLineEditModal,
   bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit"))
+  toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit")),
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
-function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bodyshop }) {
+function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bodyshop, insertAuditTrail }) {
   const {
     treatments: { CriticalPartsScanning }
   } = useTreatmentsWithConfig({
@@ -74,6 +78,11 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
         notification.success({
           title: t("joblines.successes.created")
         });
+        insertAuditTrail({
+          jobid: jobLineEditModal.context.jobid,
+          operation: AuditTrailMapping.jobmanuallineinsert(buildJobLineInsertAuditDetails(values)),
+          type: "jobmanuallineinsert"
+        });
       } else {
         notification.error({
           title: t("joblines.errors.creating", {
@@ -103,6 +112,17 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
         notification.success({
           title: t("joblines.successes.updated")
         });
+        insertAuditTrail({
+          jobid: jobLineEditModal.context.jobid,
+          operation: AuditTrailMapping.joblineupdate(
+            values.line_desc || jobLineEditModal.context.line_desc || "manual line",
+            buildJobLineUpdateAuditDetails({
+              originalLine: jobLineEditModal.context,
+              values
+            })
+          ),
+          type: "joblineupdate"
+        });
       } else {
         notification.success({
           title: t("joblines.errors.updating", {

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

@@ -16,7 +16,7 @@ import DataLabel from "../data-label/data-label.component";
 import PaymentExpandedRowComponent from "../payment-expanded-row/payment-expanded-row.component";
 import PaymentsGenerateLink from "../payments-generate-link/payments-generate-link.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop

client/src/components/job-totals-table/job-totals.table.labor.component.jsx

@@ -144,18 +144,11 @@ export default function JobTotalsTableLabor({ job }) {
                 {t("jobs.labels.mapa")}
                 {InstanceRenderManager({
                   imex:
-                    job.materials?.mapa &&
-                    job.materials.mapa.cal_maxdlr &&
-                    job.materials.mapa.cal_maxdlr > 0 &&
-                    t("jobs.labels.threshhold", {
-                      amount: job.materials.mapa.cal_maxdlr
-                    }),
+                    (job.materials?.mapa ?? job.materials?.MAPA)?.cal_maxdlr > 0 &&
+                    t("jobs.labels.threshhold", { amount: (job.materials.mapa ?? job.materials.MAPA).cal_maxdlr }),
                   rome:
-                    job.materials?.MAPA &&
-                    job.materials.MAPA.cal_maxdlr !== undefined &&
-                    t("jobs.labels.threshhold", {
-                      amount: job.materials.MAPA.cal_maxdlr
-                    })
+                    job.materials?.MAPA?.cal_maxdlr !== undefined &&
+                    t("jobs.labels.threshhold", { amount: job.materials.MAPA.cal_maxdlr })
                 })}
               </Space>
             </ResponsiveTable.Summary.Cell>
@@ -190,18 +183,11 @@ export default function JobTotalsTableLabor({ job }) {
                 {t("jobs.labels.mash")}
                 {InstanceRenderManager({
                   imex:
-                    job.materials?.mash &&
-                    job.materials.mash.cal_maxdlr &&
-                    job.materials.mash.cal_maxdlr > 0 &&
-                    t("jobs.labels.threshhold", {
-                      amount: job.materials.mash.cal_maxdlr
-                    }),
+                    (job.materials?.mash ?? job.materials?.MASH)?.cal_maxdlr > 0 &&
+                    t("jobs.labels.threshhold", { amount: (job.materials.mash ?? job.materials.MASH).cal_maxdlr }),
                   rome:
-                    job.materials?.MASH &&
-                    job.materials.MASH.cal_maxdlr !== undefined &&
-                    t("jobs.labels.threshhold", {
-                      amount: job.materials.MASH.cal_maxdlr
-                    })
+                    job.materials?.MASH?.cal_maxdlr !== undefined &&
+                    t("jobs.labels.threshhold", { amount: job.materials.MASH.cal_maxdlr })
                 })}
               </Space>
             </ResponsiveTable.Summary.Cell>

client/src/components/job-watcher-toggle/job-watcher-toggle.container.jsx

@@ -4,7 +4,7 @@ import { ADD_JOB_WATCHER, GET_JOB_WATCHERS, REMOVE_JOB_WATCHER } from "../../gra
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import JobWatcherToggleComponent from "./job-watcher-toggle.component.jsx";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
 

client/src/components/jobs-admin-class/jobs-admin-class.component.jsx

@@ -69,7 +69,9 @@ export function JobsAdminClass({ bodyshop, job }) {
       </Form>
 
       <Popconfirm title={t("jobs.labels.changeclass")} onConfirm={() => form.submit()}>
-        <Button loading={loading}>{t("general.actions.save")}</Button>
+        <Button loading={loading} type="primary">
+          {t("general.actions.save")}
+        </Button>
       </Popconfirm>
     </div>
   );

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -157,7 +157,7 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
         </LayoutFormRow>
       </Form>
 
-      <Button loading={loading} onClick={() => form.submit()}>
+      <Button loading={loading} type="primary" onClick={() => form.submit()}>
         {t("general.actions.save")}
       </Button>
     </div>

client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx

@@ -54,7 +54,7 @@ export default function JobAdminOwnerReassociate({ job }) {
         </Form.Item>
       </Form>
       <div>{t("jobs.labels.associationwarning")}</div>
-      <Button loading={loading} onClick={() => form.submit()}>
+      <Button loading={loading} type="primary" onClick={() => form.submit()}>
         {t("general.actions.save")}
       </Button>
     </div>

client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx

@@ -54,7 +54,7 @@ export default function JobAdminOwnerReassociate({ job }) {
         </Form.Item>
       </Form>
       <div>{t("jobs.labels.associationwarning")}</div>
-      <Button loading={loading} onClick={() => form.submit()}>
+      <Button loading={loading} type="primary" onClick={() => form.submit()}>
         {t("general.actions.save")}
       </Button>
     </div>

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -1,6 +1,6 @@
 import { useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Col, Row } from "antd";
 import Axios from "axios";
 import _ from "lodash";

client/src/components/jobs-close-lines/jobs-close-lines.component.jsx

@@ -138,7 +138,7 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                           showSearch={{
                             optionFilterProp: "children",
                             filterOption: (input, option) =>
-                              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                              option?.value?.toLowerCase().indexOf(input?.toLowerCase()) >= 0
                           }}
                           disabled={jobRO}
                           options={bodyshop.md_responsibility_centers.profits.map((p) => ({
@@ -166,7 +166,7 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                           showSearch={{
                             optionFilterProp: "children",
                             filterOption: (input, option) =>
-                              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                              option?.value?.toLowerCase().indexOf(input?.toLowerCase()) >= 0
                           }}
                           disabled={jobRO}
                           options={bodyshop.md_responsibility_centers.profits.map((p) => ({

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -6,7 +6,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { CONVERT_JOB_TO_RO } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -224,14 +224,10 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
             </>
           )}
 
-          <Form.Item
-            name={["ins_co_nm"]}
-            label={t("jobs.fields.ins_co_nm")}
-            rules={[{ required: true }]}
-          >
+          <Form.Item name={["ins_co_nm"]} label={t("jobs.fields.ins_co_nm")} rules={[{ required: true }]}>
             <Select
               showSearch={{
-                optionFilterProp:'label'
+                optionFilterProp: "label"
               }}
               options={insuranceOptions}
             />
@@ -250,7 +246,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
                 label={t("jobs.fields.referralsource")}
                 rules={[{ required: bodyshop.enforce_referral }]}
               >
-                <Select options={referralOptions} />
+                <Select showSearch={{ optionFilterProp: "label" }} options={referralOptions} />
               </Form.Item>
 
               <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
@@ -272,19 +268,21 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
             >
               <Select
                 showSearch={{
-                  optionFilterProp: 'label',
-                  filterOption: (input, option) =>
-                    (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
+                  optionFilterProp: "label",
+                  filterOption: (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
                 }}
                 style={{ width: 200 }}
-
                 options={csrOptions}
               />
             </Form.Item>
           )}
 
           {bodyshop.enforce_conversion_category && (
-            <Form.Item name="category" label={t("jobs.fields.category")} rules={[{ required: bodyshop.enforce_conversion_category }]}>
+            <Form.Item
+              name="category"
+              label={t("jobs.fields.category")}
+              rules={[{ required: bodyshop.enforce_conversion_category }]}
+            >
               <Select allowClear options={categoryOptions} />
             </Form.Item>
           )}

client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -193,6 +193,9 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
                   <Select
+                    showSearch={{
+                      optionFilterProp: "label"
+                    }}
                     options={bodyshop.md_referral_sources.map((s) => ({
                       value: s,
                       label: s

client/src/components/jobs-detail-general/jobs-detail-general.component.jsx

@@ -43,19 +43,25 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
           <Input disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
-          <Select disabled={jobRO} options={[
-            { value: "W", label: t("jobs.labels.deductible.waived") },
-            { value: "Y", label: t("jobs.labels.deductible.stands") }
-          ]} />
+          <Select
+            disabled={jobRO}
+            options={[
+              { value: "W", label: t("jobs.labels.deductible.waived") },
+              { value: "Y", label: t("jobs.labels.deductible.stands") }
+            ]}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
           <CurrencyInput disabled={jobRO} min={0} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_note")} name="ded_note">
-          <Select disabled={jobRO} options={bodyshop.md_ded_notes.map((n) => ({
-            value: n,
-            label: n
-          }))} />
+          <Select
+            disabled={jobRO}
+            options={bodyshop.md_ded_notes.map((n) => ({
+              value: n,
+              label: n
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
           <Input disabled={jobRO} />
@@ -65,10 +71,14 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         </Form.Item>
 
         <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-          <Select disabled={jobRO} onChange={handleInsCoChange} options={bodyshop.md_ins_cos.map((s) => ({
-            value: s.name,
-            label: s.name
-          }))} />
+          <Select
+            disabled={jobRO}
+            onChange={handleInsCoChange}
+            options={bodyshop.md_ins_cos.map((s) => ({
+              value: s.name,
+              label: s.name
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
           <Input disabled={jobRO} />
@@ -119,19 +129,30 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
             }
           ]}
         >
-          <Select disabled={jobRO} allowClear options={bodyshop.md_referral_sources.map((s) => ({
-            value: s,
-            label: s
-          }))} />
+          <Select
+            disabled={jobRO}
+            allowClear
+            showSearch={{
+              optionFilterProp: "label"
+            }}
+            options={bodyshop.md_referral_sources.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
           <Input disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.alt_transport")} name="alt_transport">
-          <Select disabled={jobRO} allowClear options={bodyshop.appt_alt_transport.map((s) => ({
-            value: s,
-            label: s
-          }))} />
+          <Select
+            disabled={jobRO}
+            allowClear
+            options={bodyshop.appt_alt_transport.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
       </FormRow>
       <Row gutter={[16, 16]}>
@@ -233,10 +254,14 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
       </FormRow>
       <FormRow header={t("jobs.forms.other")}>
         <Form.Item label={t("jobs.fields.category")} name="category">
-          <Select disabled={jobRO} allowClear options={bodyshop.md_categories.map((s) => ({
-            value: s,
-            label: s
-          }))} />
+          <Select
+            disabled={jobRO}
+            allowClear
+            options={bodyshop.md_categories.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
           <Input disabled={jobRO} />

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import { Button, Card, Dropdown, Form, Input, Modal, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";

client/src/components/jobs-detail-labor/jobs-detail-labor.component.jsx

@@ -6,7 +6,7 @@ import LaborAllocationsTableComponent from "../labor-allocations-table/labor-all
 import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
 import PayrollLaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.payroll.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,

client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx

@@ -6,7 +6,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import cleanAxios from "../../utils/CleanAxios";
 import formatBytes from "../../utils/formatbytes";
 //import yauzl from "yauzl";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -7,7 +7,7 @@ import JobDocuments from "./jobs-documents-gallery.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx

@@ -3,7 +3,7 @@ import { Button, Card, Col, Row, Space } from "antd";
 import axios from "axios";
 import i18n from "i18next";
 import { isFunction } from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
@@ -12,12 +12,12 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DocumentsUploadImgproxyComponent from "../documents-upload-imgproxy/documents-upload-imgproxy.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LocalMediaGrid from "../jobs-documents-local-gallery/local-media-grid.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import JobsDocumentsDownloadButton from "./jobs-document-imgproxy-gallery.download.component";
 import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reassign.component";
 import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
 import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
-import LocalMediaGrid from "../jobs-documents-local-gallery/local-media-grid.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -38,6 +38,9 @@ function JobsDocumentsImgproxyComponent({
   const [galleryImages, setGalleryImages] = useState({ images: [], other: [] });
   const { t } = useTranslation();
   const [modalState, setModalState] = useState({ open: false, index: 0 });
+  const [previewUrls, setPreviewUrls] = useState({});
+  const [previewError, setPreviewError] = useState(null);
+  const previewUrlsRef = useRef({});
 
   const fetchThumbnails = useCallback(() => {
     fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId, billId });
@@ -49,8 +52,86 @@ function JobsDocumentsImgproxyComponent({
     }
   }, [data, fetchThumbnails]);
 
+  useEffect(() => {
+    return () => {
+      Object.values(previewUrlsRef.current).forEach(URL.revokeObjectURL);
+    };
+  }, []);
+
+  const selectedImage = modalState.open ? galleryImages.images[modalState.index] : null;
+
+  useEffect(() => {
+    if (!modalState.open || !selectedImage?.id) return;
+
+    if (previewUrlsRef.current[selectedImage.id]) {
+      setPreviewError(null);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    async function loadPreviewImage() {
+      setPreviewError(null);
+
+      try {
+        const response = await axios.post(
+          "/media/imgproxy/original",
+          { documentId: selectedImage.id },
+          {
+            responseType: "blob",
+            signal: controller.signal
+          }
+        );
+        const blobUrl = URL.createObjectURL(response.data);
+
+        previewUrlsRef.current = {
+          ...previewUrlsRef.current,
+          [selectedImage.id]: blobUrl
+        };
+        setPreviewUrls(previewUrlsRef.current);
+      } catch (error) {
+        if (axios.isCancel?.(error) || error.name === "CanceledError") return;
+
+        console.error("Failed to fetch original image blob", error);
+        setPreviewError(error);
+      }
+    }
+
+    loadPreviewImage();
+
+    return () => {
+      controller.abort();
+    };
+  }, [modalState.open, selectedImage?.id]);
+
+  useEffect(() => {
+    if (modalState.open && !selectedImage) {
+      setModalState({ open: false, index: 0 });
+    }
+  }, [modalState.open, selectedImage]);
+
+  const openEditorForImage = useCallback((image) => {
+    if (!image?.id) return;
+
+    const newWindow = window.open(
+      `${window.location.protocol}//${window.location.host}/edit?documentId=${image.id}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+    if (newWindow) newWindow.opener = null;
+  }, []);
+
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
+  const previewSrc = selectedImage ? previewUrls[selectedImage.id] : null;
+  const getLightboxImageSrc = useCallback(
+    (index) => {
+      const image = galleryImages.images[index];
+      return image ? previewUrls[image.id] || image.src : undefined;
+    },
+    [galleryImages.images, previewUrls]
+  );
+
   return (
     <div>
       <Row gutter={[16, 16]}>
@@ -147,30 +228,33 @@ function JobsDocumentsImgproxyComponent({
             />
           </Card>
         </Col>
-        {modalState.open && (
+        {modalState.open && selectedImage && (
           <Lightbox
             toolbarButtons={[
               <EditFilled
                 key="edit"
                 onClick={() => {
-                  const newWindow = window.open(
-                    `${window.location.protocol}//${window.location.host}/edit?documentId=${
-                      galleryImages.images[modalState.index].id
-                    }`,
-                    "_blank",
-                    "noopener,noreferrer"
-                  );
-                  if (newWindow) newWindow.opener = null;
+                  openEditorForImage(selectedImage);
                 }}
               />
             ]}
-            mainSrc={galleryImages.images[modalState.index].fullsize}
-            nextSrc={galleryImages.images[(modalState.index + 1) % galleryImages.images.length].fullsize}
-            prevSrc={
+            imageLoadErrorMessage={previewError ? t("general.errors.notfound") : undefined}
+            mainSrc={previewSrc || selectedImage.src}
+            mainSrcThumbnail={selectedImage.src}
+            nextSrc={getLightboxImageSrc((modalState.index + 1) % galleryImages.images.length)}
+            nextSrcThumbnail={galleryImages.images[(modalState.index + 1) % galleryImages.images.length]?.src}
+            prevSrc={getLightboxImageSrc(
+              (modalState.index + galleryImages.images.length - 1) % galleryImages.images.length
+            )}
+            prevSrcThumbnail={
               galleryImages.images[(modalState.index + galleryImages.images.length - 1) % galleryImages.images.length]
-                .fullsize
+                ?.src
             }
-            onCloseRequest={() => setModalState({ open: false, index: 0 })}
+            reactModalProps={{ ariaHideApp: false }}
+            onCloseRequest={() => {
+              setModalState({ open: false, index: 0 });
+              setPreviewError(null);
+            }}
             onMovePrevRequest={() =>
               setModalState({
                 ...modalState,

client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.test.jsx

@@ -0,0 +1,112 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { LaborAllocationsAdjustmentEdit } from "./labor-allocations-adjustment-edit.component.jsx";
+
+const updateAdjustmentsMock = vi.fn();
+const useMutationMock = vi.fn();
+const notification = {
+  success: vi.fn(),
+  error: vi.fn()
+};
+const insertAuditTrailMock = vi.fn();
+const jobmodifylbradjMock = vi.fn(() => "audit-entry");
+
+vi.mock("@apollo/client/react", () => ({
+  useMutation: (...args) => useMutationMock(...args)
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key) => {
+      const translations = {
+        "joblines.fields.mod_lbr_ty": "Labor Type",
+        "joblines.fields.lbr_types.LAA": "LAA",
+        "jobs.fields.adjustmenthours": "Adjustment Hours",
+        "general.actions.save": "Save",
+        "jobs.successes.save": "Saved"
+      };
+
+      return translations[key] || key;
+    }
+  })
+}));
+
+vi.mock("../../contexts/Notifications/notificationContext.jsx", () => ({
+  useNotification: () => notification
+}));
+
+vi.mock("../../utils/AuditTrailMappings", () => ({
+  default: {
+    jobmodifylbradj: (...args) => jobmodifylbradjMock(...args)
+  }
+}));
+
+describe("LaborAllocationsAdjustmentEdit", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    useMutationMock.mockImplementation((mutation) => {
+      if (mutation === UPDATE_JOB) {
+        return [updateAdjustmentsMock];
+      }
+
+      return [vi.fn()];
+    });
+
+    updateAdjustmentsMock.mockResolvedValue({});
+  });
+
+  it("saves merged labor adjustments and records the adjustment delta", async () => {
+    render(
+      <LaborAllocationsAdjustmentEdit
+        insertAuditTrail={insertAuditTrailMock}
+        jobId="job-1"
+        mod_lbr_ty="LAA"
+        adjustments={{
+          LAA: 1.2,
+          LAB: 0.5
+        }}
+        refetchQueryNames={["QUERY_JOB"]}
+      >
+        <button type="button">Edit Adjustment</button>
+      </LaborAllocationsAdjustmentEdit>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit Adjustment" }));
+
+    fireEvent.change(screen.getByRole("spinbutton"), {
+      target: { value: "3.7" }
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => {
+      expect(updateAdjustmentsMock).toHaveBeenCalledWith({
+        variables: {
+          jobId: "job-1",
+          job: {
+            lbr_adjustments: {
+              LAA: 3.7,
+              LAB: 0.5
+            }
+          }
+        },
+        refetchQueries: ["QUERY_JOB"]
+      });
+    });
+
+    expect(jobmodifylbradjMock).toHaveBeenCalledWith({
+      mod_lbr_ty: "LAA",
+      hours: 2.5
+    });
+    expect(insertAuditTrailMock).toHaveBeenCalledWith({
+      jobid: "job-1",
+      operation: "audit-entry",
+      type: "jobmodifylbradj"
+    });
+    expect(notification.success).toHaveBeenCalledWith({
+      title: "Saved"
+    });
+  });
+});

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -21,6 +21,8 @@ const mapStateToProps = createStructuredSelector({
   technician: selectTechnician
 });
 
+const getRequestErrorMessage = (error) => error?.response?.data?.error || error?.message || "";
+
 export function PayrollLaborAllocationsTable({
   jobId,
   joblines,
@@ -43,16 +45,23 @@ export function PayrollLaborAllocationsTable({
   });
   const notification = useNotification();
 
-  useEffect(() => {
-    async function CalculateTotals() {
+  const loadTotals = async () => {
+    try {
       const { data } = await axios.post("/payroll/calculatelabor", {
         jobid: jobId
       });
       setTotals(data);
+    } catch (error) {
+      setTotals([]);
+      notification.error({
+        title: getRequestErrorMessage(error)
+      });
     }
+  };
 
+  useEffect(() => {
     if (!!joblines && !!timetickets && !!bodyshop) {
-      CalculateTotals();
+      loadTotals();
     }
     if (!jobId) setTotals([]);
   }, [joblines, timetickets, bodyshop, adjustments, jobId]);
@@ -210,28 +219,36 @@ export function PayrollLaborAllocationsTable({
               <Button
                 disabled={!hasTimeTicketAccess}
                 onClick={async () => {
-                  const response = await axios.post("/payroll/payall", {
-                    jobid: jobId
-                  });
+                  try {
+                    const response = await axios.post("/payroll/payall", {
+                      jobid: jobId
+                    });
 
-                  if (response.status === 200) {
-                    if (response.data.success !== false) {
-                      notification.success({
-                        title: t("timetickets.successes.payall")
-                      });
+                    if (response.status === 200) {
+                      if (response.data.success !== false) {
+                        notification.success({
+                          title: t("timetickets.successes.payall")
+                        });
+                      } else {
+                        notification.error({
+                          title: t("timetickets.errors.payall", {
+                            error: response.data.error
+                          })
+                        });
+                      }
+
+                      if (refetch) refetch();
                     } else {
                       notification.error({
                         title: t("timetickets.errors.payall", {
-                          error: response.data.error
+                          error: JSON.stringify("")
                         })
                       });
                     }
-
-                    if (refetch) refetch();
-                  } else {
+                  } catch (error) {
                     notification.error({
                       title: t("timetickets.errors.payall", {
-                        error: JSON.stringify("")
+                        error: getRequestErrorMessage(error)
                       })
                     });
                   }
@@ -241,10 +258,7 @@ export function PayrollLaborAllocationsTable({
               </Button>
               <Button
                 onClick={async () => {
-                  const { data } = await axios.post("/payroll/calculatelabor", {
-                    jobid: jobId
-                  });
-                  setTotals(data);
+                  await loadTotals();
                   refetch();
                 }}
                 icon={<SyncOutlined />}

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.test.jsx

@@ -0,0 +1,190 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import axios from "axios";
+import { describe, expect, it, beforeEach, vi } from "vitest";
+import { PayrollLaborAllocationsTable } from "./labor-allocations-table.payroll.component.jsx";
+
+const notification = {
+  success: vi.fn(),
+  error: vi.fn()
+};
+
+vi.mock("axios", () => ({
+  default: {
+    post: vi.fn()
+  }
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key, values = {}) => {
+      const translations = {
+        "jobs.labels.laborallocations": "Labor Allocations",
+        "timetickets.actions.payall": "Pay All",
+        "general.labels.totals": "Totals",
+        "jobs.labels.outstandinghours": "Outstanding hours remain."
+      };
+
+      if (key === "timetickets.successes.payall") {
+        return "All hours paid out successfully.";
+      }
+
+      if (key === "timetickets.errors.payall") {
+        return `Error flagging hours. ${values.error || ""}`.trim();
+      }
+
+      return translations[key] || key;
+    }
+  })
+}));
+
+vi.mock("../../contexts/Notifications/notificationContext.jsx", () => ({
+  useNotification: () => notification
+}));
+
+vi.mock("../responsive-table/responsive-table.component", () => {
+  function ResponsiveTable({ dataSource = [], summary }) {
+    return (
+      <div data-testid="responsive-table">
+        <div>{`rows:${dataSource.length}`}</div>
+        {summary ? <div>{summary()}</div> : null}
+      </div>
+    );
+  }
+
+  ResponsiveTable.Summary = {
+    Row: ({ children }) => <div>{children}</div>,
+    Cell: ({ children }) => <div>{children}</div>
+  };
+
+  return {
+    default: ResponsiveTable
+  };
+});
+
+vi.mock("../feature-wrapper/feature-wrapper.component", () => ({
+  HasFeatureAccess: () => true
+}));
+
+vi.mock("../upsell/upsell.component", () => ({
+  default: () => <div>Upsell</div>,
+  upsellEnum: () => ({
+    timetickets: {
+      allocations: "allocations"
+    }
+  })
+}));
+
+vi.mock("../lock-wrapper/lock-wrapper.component", () => ({
+  default: ({ children }) => children
+}));
+
+describe("PayrollLaborAllocationsTable", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows a success notification after Pay All completes", async () => {
+    axios.post
+      .mockResolvedValueOnce({
+        data: [
+          {
+            employeeid: "emp-1",
+            mod_lbr_ty: "LAA",
+            expectedHours: 4,
+            claimedHours: 1
+          }
+        ]
+      })
+      .mockResolvedValueOnce({
+        status: 200,
+        data: [{ id: "ticket-1" }]
+      });
+
+    const refetch = vi.fn();
+
+    render(
+      <PayrollLaborAllocationsTable
+        jobId="job-1"
+        joblines={[{ id: "line-1", convertedtolbr: false }]}
+        timetickets={[]}
+        bodyshop={{
+          features: {
+            timetickets: true
+          },
+          employees: [{ id: "emp-1", first_name: "Avery", last_name: "Johnson" }]
+        }}
+        adjustments={[]}
+        refetch={refetch}
+      />
+    );
+
+    await waitFor(() => {
+      expect(axios.post).toHaveBeenNthCalledWith(1, "/payroll/calculatelabor", {
+        jobid: "job-1"
+      });
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Pay All" }));
+
+    await waitFor(() => {
+      expect(axios.post).toHaveBeenNthCalledWith(2, "/payroll/payall", {
+        jobid: "job-1"
+      });
+    });
+
+    expect(notification.success).toHaveBeenCalledWith({
+      title: "All hours paid out successfully."
+    });
+    expect(refetch).toHaveBeenCalled();
+  });
+
+  it("shows the returned pay-all error message when payroll rejects the request", async () => {
+    axios.post
+      .mockResolvedValueOnce({
+        data: [
+          {
+            employeeid: "emp-1",
+            mod_lbr_ty: "LAA",
+            expectedHours: 4,
+            claimedHours: 1
+          }
+        ]
+      })
+      .mockResolvedValueOnce({
+        status: 200,
+        data: {
+          success: false,
+          error: "Not all hours have been assigned."
+        }
+      });
+
+    render(
+      <PayrollLaborAllocationsTable
+        jobId="job-1"
+        joblines={[{ id: "line-1", convertedtolbr: false }]}
+        timetickets={[]}
+        bodyshop={{
+          features: {
+            timetickets: true
+          },
+          employees: [{ id: "emp-1", first_name: "Avery", last_name: "Johnson" }]
+        }}
+        adjustments={[]}
+      />
+    );
+
+    await waitFor(() => {
+      expect(axios.post).toHaveBeenNthCalledWith(1, "/payroll/calculatelabor", {
+        jobid: "job-1"
+      });
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Pay All" }));
+
+    await waitFor(() => {
+      expect(notification.error).toHaveBeenCalledWith({
+        title: "Error flagging hours. Not all hours have been assigned."
+      });
+    });
+  });
+});

client/src/components/layout-form-row/config-list-actions.utils.jsx

@@ -0,0 +1,17 @@
+import { Button } from "antd";
+import ConfigListEmptyState from "./config-list-empty-state.component.jsx";
+
+export const buildConfigListActionButton = ({ key, label, onClick, id }) => (
+  <Button key={key} type="primary" block id={id} onClick={onClick}>
+    {label}
+  </Button>
+);
+
+export const renderConfigListOrEmpty = ({ fields, actionLabel, renderItems }) =>
+  fields.length === 0 ? <ConfigListEmptyState actionLabel={actionLabel} /> : renderItems();
+
+export const buildSectionActionButton = (key, label, onClick, id) =>
+  buildConfigListActionButton({ key, label, onClick, id });
+
+export const renderListOrEmpty = (fields, actionLabel, renderItems) =>
+  renderConfigListOrEmpty({ fields, actionLabel, renderItems });

client/src/components/layout-form-row/config-list-empty-state.component.jsx

@@ -0,0 +1,11 @@
+import { useTranslation } from "react-i18next";
+
+export default function ConfigListEmptyState({ actionLabel, minHeight = 96 }) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="imex-form-row-empty-state" style={{ minHeight }}>
+      {t("general.labels.click_to_begin", { action: actionLabel })}
+    </div>
+  );
+}

client/src/components/layout-form-row/inline-form-row-title.utils.js

@@ -0,0 +1,89 @@
+import { UnorderedListOutlined } from "@ant-design/icons";
+
+export const inlineFormRowTitleStyles = Object.freeze({
+  input: Object.freeze({
+    background: "transparent",
+    border: "none",
+    borderRadius: 0,
+    boxShadow: "none",
+    paddingInline: 0,
+    paddingBlock: 0,
+    lineHeight: 1.35,
+    flex: "1 1 auto",
+    minWidth: 0,
+    width: "100%"
+  }),
+  row: Object.freeze({
+    display: "flex",
+    gap: 6,
+    flexWrap: "wrap",
+    alignItems: "center",
+    width: "100%",
+    paddingInline: 4
+  }),
+  group: Object.freeze({
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    paddingInline: 8,
+    paddingBlock: 4,
+    borderRadius: 10,
+    border: "1px solid var(--imex-form-title-group-border)",
+    background: "var(--imex-form-title-group-bg)",
+    minWidth: 0,
+    flex: "1 1 0"
+  }),
+  label: Object.freeze({
+    color: "var(--ant-color-text-secondary)",
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 1,
+    whiteSpace: "nowrap",
+    paddingInline: 6,
+    paddingBlock: 3,
+    borderRadius: 999,
+    border: "1px solid var(--imex-form-title-label-border)",
+    background: "var(--imex-form-title-label-bg)"
+  }),
+  handle: Object.freeze({
+    color: "var(--ant-color-text-tertiary)",
+    fontSize: 14,
+    flex: "0 0 auto",
+    marginRight: 2
+  }),
+  separator: Object.freeze({
+    width: 1,
+    height: 16,
+    background: "color-mix(in srgb, var(--imex-form-surface-border) 58%, transparent)",
+    borderRadius: 999,
+    flex: "0 0 auto",
+    marginInline: 2
+  }),
+  text: Object.freeze({
+    whiteSpace: "nowrap",
+    fontWeight: 500,
+    fontSize: "var(--ant-font-size-lg)",
+    lineHeight: 1.2
+  })
+});
+
+export const INLINE_TITLE_INPUT_STYLE = inlineFormRowTitleStyles.input;
+export const INLINE_TITLE_ROW_STYLE = inlineFormRowTitleStyles.row;
+export const INLINE_TITLE_GROUP_STYLE = inlineFormRowTitleStyles.group;
+export const InlineTitleListIcon = UnorderedListOutlined;
+export const INLINE_TITLE_SWITCH_GROUP_STYLE = Object.freeze({
+  ...inlineFormRowTitleStyles.group,
+  flex: "0 0 auto"
+});
+export const INLINE_TITLE_LABEL_STYLE = inlineFormRowTitleStyles.label;
+export const INLINE_TITLE_HANDLE_STYLE = inlineFormRowTitleStyles.handle;
+export const INLINE_TITLE_SEPARATOR_STYLE = inlineFormRowTitleStyles.separator;
+export const INLINE_TITLE_TEXT_STYLE = inlineFormRowTitleStyles.text;
+
+export const INLINE_FORM_ROW_WRAP_TITLE_STYLES = Object.freeze({
+  title: Object.freeze({
+    whiteSpace: "normal",
+    overflow: "visible",
+    textOverflow: "unset"
+  })
+});

client/src/components/layout-form-row/inline-validated-form-row.component.jsx

@@ -0,0 +1,47 @@
+import { Form } from "antd";
+import LayoutFormRow from "./layout-form-row.component";
+
+export default function InlineValidatedFormRow({ actions, errorNames = [], extraErrors = [], form, ...layoutFormRowProps }) {
+  const normalizedErrorNames = Array.isArray(errorNames) ? errorNames : [errorNames];
+  const normalizedExtraErrors = Array.isArray(extraErrors) ? extraErrors.filter(Boolean) : [extraErrors].filter(Boolean);
+
+  return (
+    <Form.Item noStyle shouldUpdate>
+      {() => {
+        const fieldErrors = normalizedErrorNames.flatMap((name) => form?.getFieldError?.(name) || []);
+        const errors = [...new Set([...fieldErrors, ...normalizedExtraErrors])];
+        const resolvedClassName = [
+          layoutFormRowProps.className,
+          errors.length > 0 ? "imex-form-row--error" : null
+        ]
+          .filter(Boolean)
+          .join(" ");
+
+        const normalizedActions = Array.isArray(actions) ? actions.filter(Boolean) : [actions].filter(Boolean);
+        const resolvedActions =
+          errors.length > 0
+            ? [
+                <div
+                  key="inline-form-row-footer"
+                  className="imex-inline-form-row-errors"
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: normalizedActions.length > 0 ? 8 : 0,
+                    width: "100%",
+                    textAlign: "left"
+                  }}
+                >
+                  <Form.ErrorList errors={errors} />
+                  {normalizedActions.length > 0 ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>{normalizedActions}</div> : null}
+                </div>
+              ]
+            : normalizedActions.length > 0
+              ? normalizedActions
+              : undefined;
+
+        return <LayoutFormRow {...layoutFormRowProps} className={resolvedClassName} actions={resolvedActions} />;
+      }}
+    </Form.Item>
+  );
+}

client/src/components/layout-form-row/layout-form-row.component.jsx

@@ -1,5 +1,6 @@
 import { Card, Col, Row } from "antd";
 import { Children, isValidElement } from "react";
+import { INLINE_FORM_ROW_WRAP_TITLE_STYLES } from "./inline-form-row-title.utils.js";
 import "./layout-form-row.styles.scss";
 
 export default function LayoutFormRow({
@@ -7,32 +8,45 @@ export default function LayoutFormRow({
   children,
   grow = false,
   noDivider = false,
-  gutter = [16, 16], // Responsive gutter: horizontal, vertical
+  titleOnly = false,
+  wrapTitle = false,
+  gutter,
   rowProps,
 
   // Optional overrides if you ever need per-section customization
   surface = true,
   surfaceBg,
   surfaceHeaderBg,
+  surfaceBorderColor,
 
   ...cardProps
 }) {
   const items = Children.toArray(children).filter(Boolean);
-  if (items.length === 0) return null;
+  const isCompactRow = noDivider;
 
   const title = !noDivider && header ? header : undefined;
+  const resolvedTitle = cardProps.title ?? title;
+  const isHeaderOnly = titleOnly || items.length === 0;
+  const hideBody = isHeaderOnly;
+
+  if (items.length === 0 && !resolvedTitle) return null;
+  const resolvedGutter = gutter ?? [16, isCompactRow ? 8 : 16];
 
   const bg = surfaceBg ?? (surface ? "var(--imex-form-surface)" : undefined);
   const headBg = surfaceHeaderBg ?? (surface ? "var(--imex-form-surface-head)" : undefined);
+  const borderColor = surfaceBorderColor ?? (surface ? "var(--imex-form-surface-border)" : undefined);
 
   const mergedStyles = mergeSemanticStyles(
     {
+      ...(wrapTitle ? INLINE_FORM_ROW_WRAP_TITLE_STYLES : null),
       header: {
-        paddingInline: 16,
-        background: headBg
+        paddingInline: isHeaderOnly ? 8 : isCompactRow ? 12 : 16,
+        background: headBg,
+        borderBottomColor: borderColor
       },
       body: {
-        padding: 16,
+        padding: hideBody ? 0 : isCompactRow ? 12 : 16,
+        display: hideBody ? "none" : undefined,
         background: bg
       }
     },
@@ -40,28 +54,12 @@ export default function LayoutFormRow({
   );
 
   const baseCardStyle = {
-    marginBottom: ".8rem",
+    marginBottom: isHeaderOnly ? "0" : isCompactRow ? "8px" : ".8rem",
     ...(bg ? { background: bg } : null), // ensures the “circled area” is tinted
+    ...(borderColor ? { borderColor } : null),
     ...cardProps.style
   };
 
-  // single child => just render it
-  if (items.length === 1) {
-    return (
-      <Card
-        {...cardProps}
-        title={cardProps.title ?? title}
-        size={cardProps.size ?? "small"}
-        variant={cardProps.variant ?? "outlined"}
-        className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
-        style={baseCardStyle}
-        styles={mergedStyles}
-      >
-        {items[0]}
-      </Card>
-    );
-  }
-
   const count = items.length;
 
   // Modern responsive strategy leveraging Ant Design 6:
@@ -125,20 +123,32 @@ export default function LayoutFormRow({
   return (
     <Card
       {...cardProps}
-      title={cardProps.title ?? title}
+      title={resolvedTitle}
       size={cardProps.size ?? "small"}
       variant={cardProps.variant ?? "outlined"}
-      className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
+      className={[
+        "imex-form-row",
+        isCompactRow ? "imex-form-row--compact" : null,
+        isHeaderOnly ? "imex-form-row--title-only" : null,
+        cardProps.className
+      ]
+        .filter(Boolean)
+        .join(" ")}
       style={baseCardStyle}
       styles={mergedStyles}
     >
-      <Row gutter={gutter} wrap {...rowProps}>
-        {items.map((child, idx) => (
-          <Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
-            {child}
-          </Col>
+      {!isHeaderOnly &&
+        (items.length === 1 ? (
+          items[0]
+        ) : (
+          <Row gutter={resolvedGutter} wrap {...rowProps}>
+            {items.map((child, idx) => (
+              <Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
+                {child}
+              </Col>
+            ))}
+          </Row>
         ))}
-      </Row>
     </Card>
   );
 }
@@ -152,6 +162,7 @@ function mergeSemanticStyles(defaults, userStyles) {
       return {
         ...defaults,
         ...computed,
+        title: { ...(defaults.title || {}), ...(computed.title || {}) },
         header: { ...defaults.header, ...(computed.header || {}) },
         body: { ...defaults.body, ...(computed.body || {}) }
       };
@@ -161,6 +172,7 @@ function mergeSemanticStyles(defaults, userStyles) {
   return {
     ...defaults,
     ...userStyles,
+    title: { ...(defaults.title || {}), ...(userStyles.title || {}) },
     header: { ...defaults.header, ...(userStyles.header || {}) },
     body: { ...defaults.body, ...(userStyles.body || {}) }
   };

client/src/components/layout-form-row/layout-form-row.styles.scss

@@ -13,6 +13,12 @@
   --imex-form-surface: #fafafa; /* subtle contrast vs white page */
   --imex-form-surface-head: #f5f5f5; /* header strip */
   --imex-form-surface-border: #d9d9d9; /* matches AntD-ish border */
+  --imex-form-title-input-bg: rgba(255, 255, 255, 0.96);
+  --imex-form-title-input-border: rgba(0, 0, 0, 0.08);
+  --imex-form-title-group-bg: rgba(255, 255, 255, 0.72);
+  --imex-form-title-group-border: rgba(0, 0, 0, 0.08);
+  --imex-form-title-label-bg: rgba(0, 0, 0, 0.04);
+  --imex-form-title-label-border: rgba(0, 0, 0, 0.06);
 }
 
 /* Pick the selector that matches your app and remove the rest */
@@ -20,6 +26,12 @@ html[data-theme="dark"] {
   --imex-form-surface: rgba(255, 255, 255, 0.01); /* subtle lift off page bg */
   --imex-form-surface-head: rgba(255, 255, 255, 0.06); /* slightly stronger for header strip */
   --imex-form-surface-border: rgba(5, 5, 5, 0.12);
+  --imex-form-title-input-bg: rgba(255, 255, 255, 0.12);
+  --imex-form-title-input-border: rgba(255, 255, 255, 0.2);
+  --imex-form-title-group-bg: rgba(255, 255, 255, 0.08);
+  --imex-form-title-group-border: rgba(255, 255, 255, 0.16);
+  --imex-form-title-label-bg: rgba(255, 255, 255, 0.06);
+  --imex-form-title-label-border: rgba(255, 255, 255, 0.12);
 }
 
 .imex-form-row {
@@ -38,18 +50,111 @@ html[data-theme="dark"] {
     border-color: var(--imex-form-surface-border);
   }
 
+  &.imex-form-row--error.ant-card {
+    border-color: var(--ant-color-error);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ant-color-error) 24%, transparent);
+  }
+
   .ant-card-head {
     background: var(--imex-form-surface-head);
     border-bottom-color: var(--imex-form-surface-border);
   }
 
+  &.imex-form-row--error {
+    .ant-card-head,
+    .ant-card-actions {
+      border-color: color-mix(in srgb, var(--ant-color-error) 34%, var(--imex-form-surface-border));
+    }
+  }
+
+  &.imex-form-row--compact {
+    .ant-card-head {
+      min-height: 40px;
+    }
+
+    .ant-card-head-title,
+    .ant-card-extra {
+      padding-block: 2px;
+    }
+
+    .ant-form-item {
+      margin-bottom: 12px;
+    }
+  }
+
+  &.imex-form-row--title-only {
+    .ant-card-head {
+      min-height: auto;
+      padding-inline: 6px;
+      padding-block: 0;
+      border-radius: inherit;
+    }
+
+    .ant-card-head-wrapper {
+      gap: 2px;
+      align-items: center;
+    }
+
+    .ant-card-head-title,
+    .ant-card-extra {
+      padding-block: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-card-head-title {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: unset;
+      font-size: var(--ant-font-size);
+      line-height: 1.1;
+      padding-inline: 4px;
+    }
+
+    .ant-card-body {
+      display: none;
+      padding: 0;
+    }
+
+    .ant-input,
+    .ant-input-number,
+    .ant-input-affix-wrapper,
+    .ant-select-selector,
+    .ant-picker {
+      background: var(--imex-form-title-input-bg);
+      border-color: var(--imex-form-title-input-border);
+    }
+
+    .ant-input-number-input {
+      background: transparent;
+    }
+  }
+
   .ant-card-body {
     background: var(--imex-form-surface);
   }
 
+  .ant-card-actions {
+    background: var(--imex-form-surface-head);
+    border-top-color: var(--imex-form-surface-border);
+  }
+
+  .ant-card-actions > li {
+    margin: 10px 0;
+    padding-inline: 12px;
+  }
+
+  .ant-card-actions .ant-btn {
+    width: 100%;
+  }
+
+  .ant-form-item:last-child {
+    margin-bottom: 4px;
+  }
+
   /* Optional: tighter spacing on phones for better space usage */
   @media (max-width: 575px) {
-    .ant-card-head {
+    &:not(.imex-form-row--title-only) .ant-card-head {
       padding-inline: 12px;
       padding-block: 12px;
     }
@@ -70,6 +175,14 @@ html[data-theme="dark"] {
     width: 100%;
   }
 
+  .ant-form-item:has(.imex-form-row--compact) {
+    margin-bottom: 8px;
+  }
+
+  .ant-form-item:has(.imex-form-row--title-only) {
+    margin-bottom: 4px;
+  }
+
   /* Better form item spacing on mobile */
   @media (max-width: 575px) {
     .ant-form-item {
@@ -77,3 +190,24 @@ html[data-theme="dark"] {
     }
   }
 }
+
+.imex-form-row-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--ant-color-text-description);
+  font-size: var(--ant-font-size);
+  line-height: 1.5;
+}
+
+.imex-inline-form-row-errors {
+  color: var(--ant-color-error);
+
+  .ant-form-item-explain,
+  .ant-form-item-explain-error,
+  .ant-form-item-additional {
+    color: var(--ant-color-error);
+  }
+}

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

@@ -14,7 +14,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const LockWrapper = ({ featureName, bodyshop, children, disabled = true, bypass }) => {
+const LockWrapper = ({ featureName, bodyshop, children, disabled = true, bypass, locked }) => {
   let renderedChildren = children;
 
   //Mark the child prop as disabled.
@@ -36,11 +36,13 @@ const LockWrapper = ({ featureName, bodyshop, children, disabled = true, bypass
     return <span>{children}</span>;
   }
 
-  return HasFeatureAccess({ featureName: featureName, bodyshop }) ? (
+  const hasAccess = typeof locked === "boolean" ? !locked : HasFeatureAccess({ featureName: featureName, bodyshop });
+
+  return hasAccess ? (
     children
   ) : (
     <Space>
-      {!HasFeatureAccess({ featureName: featureName, bodyshop }) && <LockOutlined style={{ color: "tomato" }} />}
+      <LockOutlined style={{ color: "tomato" }} />
       {renderedChildren}
     </Space>
   );

client/src/components/notification-settings/column-header-checkbox.component.jsx

@@ -1,4 +1,3 @@
-import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
 import { Checkbox, Form } from "antd";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
@@ -9,18 +8,18 @@ import PropTypes from "prop-types";
  * @param form
  * @param disabled
  * @param onHeaderChange
+ * @param scenarioKeys
  * @returns {JSX.Element}
  * @constructor
  */
-const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange }) => {
+const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange, scenarioKeys }) => {
   const { t } = useTranslation();
 
   // Subscribe to all form values so that this component re-renders on changes.
   const formValues = Form.useWatch([], form) || {};
 
   // Determine if all scenarios for this channel are checked.
-  const allChecked =
-    notificationScenarios.length > 0 && notificationScenarios.every((scenario) => formValues[scenario]?.[channel]);
+  const allChecked = scenarioKeys.length > 0 && scenarioKeys.every((scenario) => formValues[scenario]?.[channel]);
 
   const onChange = (e) => {
     const checked = e.target.checked;
@@ -28,7 +27,7 @@ const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange
     const currentValues = form.getFieldsValue();
     // Update each scenario for this channel.
     const newValues = { ...currentValues };
-    notificationScenarios.forEach((scenario) => {
+    scenarioKeys.forEach((scenario) => {
       newValues[scenario] = { ...newValues[scenario], [channel]: checked };
     });
     // Update form values.
@@ -50,7 +49,8 @@ ColumnHeaderCheckbox.propTypes = {
   channel: PropTypes.oneOf(["app", "email", "fcm"]).isRequired,
   form: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
-  onHeaderChange: PropTypes.func
+  onHeaderChange: PropTypes.func,
+  scenarioKeys: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 
 export default ColumnHeaderCheckbox;

client/src/components/notification-settings/notification-settings-form.component.jsx

@@ -12,12 +12,13 @@ import {
   UPDATE_NOTIFICATION_SETTINGS,
   UPDATE_NOTIFICATIONS_AUTOADD
 } from "../../graphql/user.queries.js";
-import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
+import { getNotificationScenarios, notificationScenarioDefaults } from "../../utils/jobNotificationScenarios.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
 import PropTypes from "prop-types";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import ColumnHeaderCheckbox from "../notification-settings/column-header-checkbox.component.jsx";
 import { useIsEmployee } from "../../utils/useIsEmployee.js";
+import { hasDocumensoApiKey } from "../../utils/esignature.js";
 
 /**
  * Notifications Settings Form
@@ -35,6 +36,7 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
   const [initialAutoAdd, setInitialAutoAdd] = useState(false);
   const notification = useNotification();
   const isEmployee = useIsEmployee(bodyshop, currentUser);
+  const notificationScenarios = getNotificationScenarios({ includeEsign: hasDocumensoApiKey(bodyshop) });
 
   // Fetch notification settings and notifications_autoadd
   const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
@@ -55,7 +57,8 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
 
       // Ensure each scenario has an object with { app, email, fcm }
       const formattedValues = notificationScenarios.reduce((acc, scenario) => {
-        acc[scenario] = settings[scenario] ?? { app: false, email: false, fcm: false };
+        acc[scenario] = settings[scenario] ??
+          notificationScenarioDefaults[scenario] ?? { app: false, email: false, fcm: false };
         return acc;
       }, {});
 
@@ -65,7 +68,7 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
       setInitialAutoAdd(autoAdd);
       setIsDirty(false); // Reset dirty state when new data loads
     }
-  }, [data, form]);
+  }, [data, form, notificationScenarios]);
 
   // Handle toggle of notifications_autoadd
   const handleAutoAddToggle = async (checked) => {
@@ -136,7 +139,14 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
       width: "80%"
     },
     {
-      title: <ColumnHeaderCheckbox channel="app" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      title: (
+        <ColumnHeaderCheckbox
+          channel="app"
+          form={form}
+          onHeaderChange={() => setIsDirty(true)}
+          scenarioKeys={notificationScenarios}
+        />
+      ),
       dataIndex: "app",
       key: "app",
       align: "center",
@@ -147,7 +157,14 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
       )
     },
     {
-      title: <ColumnHeaderCheckbox channel="email" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      title: (
+        <ColumnHeaderCheckbox
+          channel="email"
+          form={form}
+          onHeaderChange={() => setIsDirty(true)}
+          scenarioKeys={notificationScenarios}
+        />
+      ),
       dataIndex: "email",
       key: "email",
       align: "center",
@@ -162,7 +179,14 @@ const NotificationSettingsForm = ({ currentUser, bodyshop }) => {
   // Currently disabled for prod
   if (!import.meta.env.PROD) {
     columns.push({
-      title: <ColumnHeaderCheckbox channel="fcm" form={form} onHeaderChange={() => setIsDirty(true)} />,
+      title: (
+        <ColumnHeaderCheckbox
+          channel="fcm"
+          form={form}
+          onHeaderChange={() => setIsDirty(true)}
+          scenarioKeys={notificationScenarios}
+        />
+      ),
       dataIndex: "fcm",
       key: "fcm",
       align: "center",

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

@@ -11,12 +11,13 @@ import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 export default function OwnersListComponent({ loading, owners, total, refetch }) {
   const search = queryString.parse(useLocation().search);
-  const {
-    page
-    // sortcolumn, sortorder
-  } = search;
+  const { page, pageSize } = search;
   const history = useNavigate();
 
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
@@ -71,10 +72,14 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
+    const nextPageSize = pagination?.pageSize || currentPageSize;
+    const pageSizeChanged = nextPageSize !== currentPageSize;
+
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
     const updatedSearch = {
       ...search,
-      page: pagination.current,
+      pageSize: nextPageSize,
+      page: pageSizeChanged ? 1 : pagination.current,
       sortcolumn: sorter.columnKey,
       sortorder: sorter.order
     };
@@ -119,7 +124,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
     >
       <ResponsiveTable
         loading={loading}
-        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
+        pagination={{ placement: "top", pageSize: currentPageSize, current: currentPage, showSizeChanger: true, total: total }}
         columns={columns}
         mobileColumnKeys={["name", "ownr_ph1", "ownr_ph2"]}
         rowKey="id"

client/src/components/owners-list/owners-list.container.jsx

@@ -8,14 +8,19 @@ import { pageLimit } from "../../utils/config";
 
 export default function OwnersListContainer() {
   const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { page, sortcolumn, sortorder, search, pageSize } = searchParams;
+
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS_PAGINATED, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     variables: {
       search: search || "",
-      offset: page ? (page - 1) * pageLimit : 0,
-      limit: pageLimit,
+      offset: (currentPage - 1) * currentPageSize,
+      limit: currentPageSize,
       order: [
         {
           [sortcolumn || "created_at"]: sortorder ? (sortorder === "descend" ? "desc" : "asc") : "desc"

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -70,6 +70,12 @@ export function PartsOrderListTableComponent({
   const [deletePartsOrder] = useMutation(DELETE_PARTS_ORDER);
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
+
+  const enrichedPartsOrders = parts_orders.map((order) => ({
+    ...order,
+    invoice_number: order.bill?.invoice_number
+  }));
+
   const { refetch } = billsQuery;
 
   const recordActions = (record, showView = false) => (
@@ -222,7 +228,12 @@ export function PartsOrderListTableComponent({
       dataIndex: "order_number",
       key: "order_number",
       sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
-      sortOrder: state.sortedInfo.columnKey === "invoice_number" && state.sortedInfo.order
+      sortOrder: state.sortedInfo.columnKey === "invoice_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <span>
+          {record.order_number} {record.invoice_number && `(${record.invoice_number})`}
+        </span>
+      )
     },
     {
       title: t("parts_orders.fields.order_date"),
@@ -272,10 +283,10 @@ export function PartsOrderListTableComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const filteredPartsOrders = parts_orders
+  const filteredPartsOrders = enrichedPartsOrders
     ? searchText === ""
-      ? parts_orders
-      : parts_orders.filter(
+      ? enrichedPartsOrders
+      : enrichedPartsOrders.filter(
           (b) =>
             (b.order_number || "").toString().toLowerCase().includes(searchText.toLowerCase()) ||
             (b.vendor.name || "").toLowerCase().includes(searchText.toLowerCase())

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,12 +1,13 @@
 import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
+import { Button, Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import PartsOrderModalPriceChange from "./parts-order-modal-price-change.component";
@@ -50,6 +51,7 @@ export function PartsOrderModalComponent({
   });
 
   const { t } = useTranslation();
+  const partsOrderLines = Form.useWatch(["parts_order_lines", "data"], form) || [];
   const handleClick = ({ item }) => {
     form.setFieldsValue({ comments: item.props.value });
   };
@@ -128,10 +130,38 @@ export function PartsOrderModalComponent({
         {(fields, { remove, move }) => {
           return (
             <div>
-              {fields.map((field, index) => (
-                <Form.Item required={false} key={field.key}>
-                  <div style={{ display: "flex" }}>
-                    <LayoutFormRow grow noDivider style={{ flex: 1 }}>
+              {fields.map((field, index) => {
+                const partsOrderLine = partsOrderLines[field.name] || {};
+
+                return (
+                  <Form.Item required={false} key={field.key}>
+                    <LayoutFormRow
+                      grow
+                      noDivider
+                      title={getFormListItemTitle(
+                        t("parts_orders.fields.line_desc"),
+                        index,
+                        partsOrderLine.line_desc,
+                        partsOrderLine.oem_partno
+                      )}
+                      extra={
+                        <Space align="center" size="small">
+                          <Button
+                            type="text"
+                            icon={<DeleteFilled />}
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                          <FormListMoveArrows
+                            move={move}
+                            index={index}
+                            total={fields.length}
+                            orientation="horizontal"
+                          />
+                        </Space>
+                      }
+                    >
                       <Form.Item
                         //span={8}
                         label={t("parts_orders.fields.line_desc")}
@@ -146,6 +176,9 @@ export function PartsOrderModalComponent({
                       >
                         <Input />
                       </Form.Item>
+                      <Form.Item key={`${index}job_line_id`} name={[field.name, "job_line_id"]} hidden>
+                        <Input type="hidden" />
+                      </Form.Item>
                       <Form.Item
                         label={t("parts_orders.fields.line_remarks")}
                         key={`${index}line_remarks`}
@@ -220,20 +253,9 @@ export function PartsOrderModalComponent({
                         </Form.Item>
                       )}
                     </LayoutFormRow>
-                    <Space wrap size="small" align="center">
-                      <div>
-                        <DeleteFilled
-                          style={{ margin: "1rem" }}
-                          onClick={() => {
-                            remove(field.name);
-                          }}
-                        />
-                      </div>
-                      <FormListMoveArrows move={move} index={index} total={fields.length} />
-                    </Space>
-                  </div>
-                </Form.Item>
-              ))}
+                  </Form.Item>
+                );
+              })}
             </div>
           );
         }}

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -19,10 +19,11 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import AlertComponent from "../alert/alert.component";
 import PartsOrderModalComponent from "./parts-order-modal.component";
 import axios from "axios";
-import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
+import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
 import _ from "lodash";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { buildSubmittedPartsOrderLines, getSubmittedPartsOrderJobLineIds } from "./parts-order-modal.utils.js";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -82,15 +83,10 @@ export function PartsOrderModalContainer({
 
     // Force job_line_id from context so it never gets dropped by AntD form submission behavior.
     const submittedLines = values?.parts_order_lines?.data ?? [];
-    const forcedLines = submittedLines.map((p, index) => {
-      const originalLine = linesToOrder?.[index];
-      const jobLineId = isReturn ? originalLine?.joblineid : originalLine?.id;
-
-      return {
-        ...p,
-        job_line_id: jobLineId,
-        ...(isReturn && { cm_received: false })
-      };
+    const forcedLines = buildSubmittedPartsOrderLines({
+      submittedLines,
+      linesToOrder,
+      isReturn
     });
 
     let insertResult;
@@ -147,10 +143,7 @@ export function PartsOrderModalContainer({
       type: isReturn ? "jobspartsreturn" : "jobspartsorder"
     });
 
-    // Use linesToOrder from context instead of form values to preserve job line ids
-    const jobLineIds = (linesToOrder ?? [])
-      .filter((line) => (isReturn ? line.joblineid : line.id))
-      .map((line) => (isReturn ? line.joblineid : line.id));
+    const jobLineIds = getSubmittedPartsOrderJobLineIds(forcedLines);
 
     try {
       const jobLinesResult = await updateJobLines({
@@ -206,23 +199,20 @@ export function PartsOrderModalContainer({
             isinhouse: true,
             date: dayjs(),
             total: 0,
-            billlines: forcedLines.map((p, index) => {
-              const originalLine = linesToOrder?.[index];
-              return {
-                joblineid: isReturn ? originalLine?.joblineid : originalLine?.id,
-                actual_price: p.act_price,
-                actual_cost: 0, // p.act_price,
-                line_desc: p.line_desc,
-                line_remarks: p.line_remarks,
-                part_type: p.part_type,
-                quantity: p.quantity || 1,
-                applicable_taxes: {
-                  local: false,
-                  state: false,
-                  federal: false
-                }
-              };
-            })
+            billlines: forcedLines.map((p) => ({
+              joblineid: p.job_line_id,
+              actual_price: p.act_price,
+              actual_cost: 0, // p.act_price,
+              line_desc: p.line_desc,
+              line_remarks: p.line_remarks,
+              part_type: p.part_type,
+              quantity: p.quantity || 1,
+              applicable_taxes: {
+                local: false,
+                state: false,
+                federal: false
+              }
+            }))
           }
         }
       });