Merge remote-tracking branch 'origin/master-AIO' into release/2026-02-27

.gitignore

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

_reference/localEmailViewer/README.md

@@ -1,62 +1,7 @@
-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:
+This will connect to your dockers local stack session and render the email in HTML.
 
 ```shell
 node index.js
 ```
 
-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
-```
+http://localhost:3334

_reference/localEmailViewer/index.js

@@ -1,342 +1,96 @@
+// index.js
+
 import express from "express";
-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";
+import fetch from "node-fetch";
+import { simpleParser } from "mailparser";
 
 const app = express();
-const CLIENT_APP_PATH = new URL("./public/client-app.js", import.meta.url);
-const CLIENT_APP_SOURCE = readFileSync(CLIENT_APP_PATH, "utf8");
+const PORT = 3334;
 
-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) => {
+app.get("/", async (req, res) => {
   try {
-    res.json(await loadServiceHealthSummary());
-  } catch (error) {
-    console.error("Error fetching service health:", error);
-    res.status(502).json({
-      error: "Unable to fetch LocalStack service health",
-      details: error.message
-    });
-  }
-});
-
-app.get("/api/messages", async (req, res) => {
-  try {
-    res.json(await loadMessages());
+    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));
   } 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
-    });
+    res.status(500).send("Error fetching messages");
   }
 });
 
-app.get("/api/messages/:id/raw", async (req, res) => {
-  try {
-    const message = await findSesMessageById(req.params.id);
+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("");
+}
 
-    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}`);
-  }
-});
+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.listen(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})`);
+  console.log(`Server is running on http://localhost:${PORT}`);
 });

_reference/localEmailViewer/package.json

@@ -4,17 +4,13 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "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"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": "LocalStack inspector for SES emails, CloudWatch logs, Secrets Manager, and S3",
+  "description": "",
   "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

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

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

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

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

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

client/.env.development.imex

@@ -18,4 +18,3 @@ VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
 VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891
-VITE_APP_ENABLE_RESPONSIVE_TABLE_FILTERING=false

client/.env.development.rome

@@ -20,4 +20,3 @@ VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
 VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
 VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78
-VITE_APP_ENABLE_RESPONSIVE_TABLE_FILTERING=false

client/package.json

@@ -8,77 +8,76 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.38.0",
+    "@amplitude/analytics-browser": "^2.34.0",
     "@ant-design/pro-layout": "^7.22.6",
-    "@apollo/client": "^4.1.6",
+    "@apollo/client": "^4.1.3",
     "@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.5.1",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@fingerprintjs/fingerprintjs": "^5.1.0",
-    "@firebase/analytics": "^0.10.21",
-    "@firebase/app": "^0.14.10",
-    "@firebase/auth": "^1.12.2",
-    "@firebase/firestore": "^4.13.0",
-    "@firebase/messaging": "^0.12.25",
+    "@fingerprintjs/fingerprintjs": "^5.0.1",
+    "@firebase/analytics": "^0.10.19",
+    "@firebase/app": "^0.14.7",
+    "@firebase/auth": "^1.12.0",
+    "@firebase/firestore": "^4.10.0",
+    "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "@sentry/cli": "^3.3.5",
-    "@sentry/react": "^10.47.0",
-    "@sentry/vite-plugin": "^4.9.1",
+    "@sentry/cli": "^3.1.0",
+    "@sentry/react": "^10.38.0",
+    "@sentry/vite-plugin": "^4.8.0",
     "@splitsoftware/splitio-react": "^2.6.1",
-    "@tanem/react-nprogress": "^5.0.63",
-    "antd": "^6.3.5",
+    "@tanem/react-nprogress": "^5.0.58",
+    "antd": "^6.2.2",
     "apollo-link-logger": "^3.0.0",
     "autosize": "^6.0.1",
-    "axios": "^1.14.0",
+    "axios": "^1.13.4",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.20",
-    "dayjs-business-days2": "^1.3.3",
+    "dayjs": "^1.11.19",
+    "dayjs-business-days2": "^1.3.2",
     "dinero.js": "^1.9.1",
-    "dotenv": "^17.3.1",
+    "dotenv": "^17.2.3",
     "env-cmd": "^11.0.0",
     "exifr": "^7.1.3",
-    "graphql": "^16.13.2",
-    "graphql-ws": "^6.0.8",
-    "i18next": "^25.10.10",
-    "i18next-browser-languagedetector": "^8.2.1",
+    "graphql": "^16.12.0",
+    "graphql-ws": "^6.0.7",
+    "i18next": "^25.8.0",
+    "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.12.41",
-    "lightningcss": "^1.32.0",
-    "logrocket": "^12.1.0",
+    "libphonenumber-js": "^1.12.36",
+    "lightningcss": "^1.31.1",
+    "logrocket": "^12.0.0",
     "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.1.1",
     "object-hash": "^3.0.0",
-    "phone": "^3.1.71",
-    "posthog-js": "^1.364.4",
+    "phone": "^3.1.70",
+    "posthog-js": "^1.336.4",
     "prop-types": "^15.8.1",
     "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
     "react": "^19.2.4",
     "react-big-calendar": "^1.19.4",
     "react-color": "^2.19.3",
-    "react-cookie": "^8.1.0",
+    "react-cookie": "^8.0.1",
     "react-dom": "^19.2.4",
     "react-grid-gallery": "^1.0.1",
-    "react-grid-layout": "^2.2.3",
-    "react-i18next": "^16.6.6",
-    "react-icons": "^5.6.0",
+    "react-grid-layout": "^2.2.2",
+    "react-i18next": "^16.5.4",
+    "react-icons": "^5.5.0",
     "react-image-lightbox": "^5.1.4",
     "react-markdown": "^10.1.0",
-    "react-number-format": "^5.4.5",
+    "react-number-format": "^5.4.3",
     "react-popopo": "^2.1.9",
     "react-product-fruits": "^2.2.62",
     "react-redux": "^9.2.0",
     "react-resizable": "^3.1.3",
-    "react-router-dom": "^7.13.2",
+    "react-router-dom": "^7.13.0",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.18.3",
-    "recharts": "^3.8.1",
+    "react-virtuoso": "^4.18.1",
+    "recharts": "^3.7.0",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
@@ -86,11 +85,11 @@
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
     "rxjs": "^7.8.2",
-    "sass": "^1.98.0",
+    "sass": "^1.97.3",
     "socket.io-client": "^4.8.3",
-    "styled-components": "^6.3.12",
+    "styled-components": "^6.3.8",
     "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^5.2.0"
+    "web-vitals": "^5.1.0"
   },
   "scripts": {
     "postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'",
@@ -138,40 +137,40 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^6.1.1",
+    "@ant-design/icons": "^6.1.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.28.5",
-    "@dotenvx/dotenvx": "^1.59.1",
+    "@dotenvx/dotenvx": "^1.52.0",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@eslint/js": "^9.39.2",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.58.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",
+    "@vitejs/plugin-react": "^5.1.2",
     "babel-plugin-react-compiler": "^1.0.0",
-    "browserslist": "^4.28.2",
+    "browserslist": "^4.28.1",
     "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.4.0",
-    "jsdom": "^28.1.0",
-    "memfs": "^4.57.1",
+    "globals": "^17.2.0",
+    "jsdom": "^27.4.0",
+    "memfs": "^4.56.10",
     "os-browserify": "^0.3.0",
-    "playwright": "^1.58.2",
+    "playwright": "^1.58.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.6.0",
+    "vite-plugin-babel": "^1.4.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.26.0",
+    "vite-plugin-node-polyfills": "^0.25.0",
     "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^4.1.2",
+    "vitest": "^4.0.18",
     "workbox-window": "^7.4.0"
   }
 }

client/src/App/App.jsx

@@ -1,6 +1,6 @@
 import { useSplitClient } from "@splitsoftware/splitio-react";
 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]);

client/src/App/App.styles.scss

@@ -509,10 +509,3 @@
     pointer-events: none !important;
   }
 }
-
-
-.esignature-embed {
-width: 100%;
-height: 100%;
-border-width: 0;
-}

client/src/App/themeProvider.js

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

client/src/components/_test/test.page.jsx

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

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

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

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

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

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

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

client/src/components/alert/alert.component.jsx

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

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

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

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

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

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

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

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

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

client/src/components/bill-ai-feedback/bill-ai-feedback.component.jsx

@@ -1,118 +0,0 @@
-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,7 +13,6 @@ 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";
@@ -135,16 +134,10 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
 
     await Promise.all(updates);
 
-    const details = buildBillUpdateAuditDetails({
-      originalBill: data?.bills_by_pk,
-      bill,
-      billlines
-    });
-
     insertAuditTrail({
-      jobid: bill.jobid ?? data?.bills_by_pk?.jobid,
+      jobid: bill.jobid,
       billid: search.billid,
-      operation: AuditTrailMapping.billupdated(bill.invoice_number, details),
+      operation: AuditTrailMapping.billupdated(bill.invoice_number),
       type: "billupdated"
     });
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,15 +5,14 @@ import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectDarkMode } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectDarkMode } from "../../redux/application/application.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
-import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import ConfidenceDisplay from "./bill-form.lines.confidence.component.jsx";
+import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -30,8 +29,7 @@ export function BillEnterModalLinesComponent({
   discount,
   form,
   responsibilityCenters,
-  billEdit,
-  isAiScan
+  billEdit
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
@@ -96,7 +94,6 @@ export function BillEnterModalLinesComponent({
 
   // Only fill actual_cost when the user forward-tabs out of Retail (actual_price)
   const autofillActualCost = (index) => {
-    if (bodyshop.accountingconfig?.disableBillCostCalculation) return;
     Promise.resolve().then(() => {
       const retailRaw = form.getFieldValue(["billlines", index, "actual_price"]);
       const actualRaw = form.getFieldValue(["billlines", index, "actual_cost"]);
@@ -142,29 +139,6 @@ export function BillEnterModalLinesComponent({
 
   const columns = (remove) => {
     return [
-      ...(isAiScan
-        ? [
-            {
-              title: t("billlines.fields.confidence"),
-              dataIndex: "confidence",
-              editable: true,
-              width: "5rem",
-              formItemProps: (field) => ({
-                key: `${field.index}confidence`,
-                name: [field.name, "confidence"],
-                label: t("billlines.fields.confidence")
-              }),
-              formInput: (record) => {
-                const rowValue = getFieldValue(["billlines", record.name]);
-                return (
-                  <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <ConfidenceDisplay rowValue={rowValue} />
-                  </div>
-                );
-              }
-            }
-          ]
-        : []),
       {
         title: t("billlines.fields.jobline"),
         dataIndex: "joblineid",
@@ -238,7 +212,6 @@ export function BillEnterModalLinesComponent({
         }),
         formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
       },
-
       {
         title: t("billlines.fields.quantity"),
         dataIndex: "quantity",
@@ -277,16 +250,7 @@ export function BillEnterModalLinesComponent({
           key: `${field.name}actual_price`,
           name: [field.name, "actual_price"],
           label: t("billlines.fields.actual_price"),
-          rules: [
-            { required: true },
-            {
-              validator: (_, value) => {
-                return Math.abs(parseFloat(value)) < 0.01 ? Promise.reject() : Promise.resolve();
-              },
-              warningOnly: true
-            }
-          ],
-          hasFeedback: true
+          rules: [{ required: true }]
         }),
         formInput: (record, index) => (
           <CurrencyInput
@@ -435,17 +399,11 @@ export function BillEnterModalLinesComponent({
           rules: [{ required: true }]
         }),
         formInput: () => (
-          <Select
-            showSearch
-            style={{ minWidth: "3rem" }}
-            disabled={disabled}
-            tabIndex={0}
-            options={
-              bodyshopHasDmsKey(bodyshop)
-                ? CiecaSelect(true, false)
-                : responsibilityCenters.costs.map((item) => ({ value: item.name, label: item.name }))
-            }
-          />
+          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled} tabIndex={0}>
+            {bodyshopHasDmsKey(bodyshop)
+              ? CiecaSelect(true, false)
+              : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
+          </Select>
         )
       },
       ...(billEdit
@@ -461,11 +419,13 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "location"]
               }),
               formInput: () => (
-                <Select
-                  disabled={disabled}
-                  tabIndex={0}
-                  options={bodyshop.md_parts_locations.map((loc) => ({ value: loc, label: loc }))}
-                />
+                <Select disabled={disabled} tabIndex={0}>
+                  {bodyshop.md_parts_locations.map((loc, idx) => (
+                    <Select.Option key={idx} value={loc}>
+                      {loc}
+                    </Select.Option>
+                  ))}
+                </Select>
               )
             }
           ]),
@@ -495,9 +455,7 @@ export function BillEnterModalLinesComponent({
                     {Enhanced_Payroll.treatment === "on" ? (
                       <Space>
                         {t("joblines.fields.assigned_team", { name: employeeTeamName?.name })}
-                        {jobline
-                          ? `${jobline.mod_lb_hrs} units/${t(`joblines.fields.lbr_types.${jobline.mod_lbr_ty}`)}`
-                          : null}
+                        {`${jobline.mod_lb_hrs} units/${t(`joblines.fields.lbr_types.${jobline.mod_lbr_ty}`)}`}
                       </Space>
                     ) : null}
 
@@ -508,7 +466,22 @@ export function BillEnterModalLinesComponent({
                       rules={[{ required: true }]}
                       name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                     >
-                      <Select allowClear options={CiecaSelect(false, true)} />
+                      <Select allowClear>
+                        <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
+                        <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
+                        <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
+                        <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
+                        <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
+                        <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
+                        <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
+                        <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
+                        <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
+                        <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
+                        <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
+                        <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
+                        <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
+                        <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
+                      </Select>
                     </Form.Item>
 
                     {Enhanced_Payroll.treatment === "on" ? (

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

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

client/src/components/bill-reexport-button/bill-reexport-button.component.jsx

@@ -9,20 +9,18 @@ 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 = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+const mapDispatchToProps = () => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(BillMarkForReexportButton);
 
-export function BillMarkForReexportButton({ bodyshop, authLevel, bill, insertAuditTrail }) {
+export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const notification = useNotification();
@@ -49,12 +47,6 @@ export function BillMarkForReexportButton({ bodyshop, authLevel, bill, insertAud
       notification.success({
         title: t("bills.successes.reexport")
       });
-      insertAuditTrail({
-        jobid: bill.jobid,
-        billid: bill.id,
-        operation: AuditTrailMapping.billmarkforreexport(bill.invoice_number),
-        type: "billmarkforreexport"
-      });
     } else {
       notification.error({
         title: t("bills.errors.saving", {

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

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

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

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

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

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

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

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

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

@@ -10,7 +10,6 @@ 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
@@ -157,127 +156,104 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
       joblines: {
         data: billingLines
       },
-      ...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
-            }
-          }
+      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
         },
-        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
+        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
         }
-      })
+      }
     };
 
     if (currentUser?.email) {
@@ -311,7 +287,7 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
       notification.success({
         title: t("jobs.successes.created"),
         onClick: () => {
-          history(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
+          history.push(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
         }
       });
     }
@@ -333,13 +309,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
             }
           ]}
         >
-          <Select
-            options={bodyshop.md_ins_cos.map((s) => ({
-              key: s.name,
-              value: s.name,
-              label: s.name
-            }))}
-          />
+          <Select>
+            {bodyshop.md_ins_cos.map((s) => (
+              <Select.Option key={s.name} value={s.name}>
+                {s.name}
+              </Select.Option>
+            ))}
+          </Select>
         </Form.Item>
         <Form.Item
           name={"class"}
@@ -351,13 +327,13 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
             }
           ]}
         >
-          <Select
-            options={bodyshop.md_classes.map((s) => ({
-              key: s,
-              value: s,
-              label: s
-            }))}
-          />
+          <Select>
+            {bodyshop.md_classes.map((s) => (
+              <Select.Option key={s} value={s}>
+                {s}
+              </Select.Option>
+            ))}
+          </Select>
         </Form.Item>
         <Form.Item
           label={t("contracts.labels.convertform.applycleanupcharge")}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
-import { Alert, Button, Card, Tabs, Typography } from "antd";
-import ResponsiveTable from "../responsive-table/responsive-table.component";
+import { Alert, Button, Card, Table, Tabs, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -64,7 +63,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 labor rows with bill hours / rates
+ *  - ROLABOR shell
  *
  * The heavy lifting (ROGOG/ROLABOR split, cost allocation, tax flags)
  * is now done on the backend via buildRogogFromAllocations/buildRolaborFromRogog.
@@ -181,30 +180,21 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
   const rolaborRows = useMemo(() => {
     if (!rolaborPreview || !Array.isArray(rolaborPreview.ops)) return [];
 
-    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 rolaborPreview.ops.map((op, idx) => {
+      const rowOpCode = opCode || op.opCode;
 
-        return {
-          key: `${op.jobNo}-${idx}`,
-          opCode: rowOpCode,
-          jobNo: op.jobNo,
-          custPayTypeFlag: op.custPayTypeFlag,
-          custTxblNtxblFlag: op.custTxblNtxblFlag,
-          payType: op.bill?.payType,
-          jobTotalHrs: op.bill?.jobTotalHrs,
-          billTime: op.bill?.billTime,
-          billRate: op.bill?.billRate,
-          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,
+        amtType: op.amount?.amtType,
+        custPrice: op.amount?.custPrice,
+        totalAmt: op.amount?.totalAmt
+      };
+    });
   }, [rolaborPreview, opCode]);
 
   // Totals for ROGOG (sum custPrice + dlrCost over all lines)
@@ -254,9 +244,6 @@ 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" }
@@ -274,10 +261,9 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
             into taxable / non-taxable segments.
           </Typography.Paragraph>
 
-          <ResponsiveTable
+          <Table
             pagination={false}
             columns={roggColumns}
-            mobileColumnKeys={["jobNo", "opCode", "breakOut", "itemType"]}
             rowKey="key"
             dataSource={roggRows}
             locale={{ emptyText: "No ROGOG lines would be generated." }}
@@ -300,23 +286,19 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
               const hasCostTotal = Number(roggTotals.totalDlrCost) !== 0;
 
               return (
-                <ResponsiveTable.Summary.Row>
-                  <ResponsiveTable.Summary.Cell index={0}>
+                <Table.Summary.Row>
+                  <Table.Summary.Cell index={0}>
                     <Typography.Title level={5}>{t("general.labels.totals")}</Typography.Title>
-                  </ResponsiveTable.Summary.Cell>
-                  <ResponsiveTable.Summary.Cell index={1} />
-                  <ResponsiveTable.Summary.Cell index={2} />
-                  <ResponsiveTable.Summary.Cell index={3} />
-                  <ResponsiveTable.Summary.Cell index={4} />
-                  <ResponsiveTable.Summary.Cell index={5} />
-                  <ResponsiveTable.Summary.Cell index={6} />
-                  <ResponsiveTable.Summary.Cell index={7}>
-                    {hasCustTotal ? roggTotals.totalCustPrice : null}
-                  </ResponsiveTable.Summary.Cell>
-                  <ResponsiveTable.Summary.Cell index={8}>
-                    {hasCostTotal ? roggTotals.totalDlrCost : null}
-                  </ResponsiveTable.Summary.Cell>
-                </ResponsiveTable.Summary.Row>
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell index={1} />
+                  <Table.Summary.Cell index={2} />
+                  <Table.Summary.Cell index={3} />
+                  <Table.Summary.Cell index={4} />
+                  <Table.Summary.Cell index={5} />
+                  <Table.Summary.Cell index={6} />
+                  <Table.Summary.Cell index={7}>{hasCustTotal ? roggTotals.totalCustPrice : null}</Table.Summary.Cell>
+                  <Table.Summary.Cell index={8}>{hasCostTotal ? roggTotals.totalDlrCost : null}</Table.Summary.Cell>
+                </Table.Summary.Row>
               );
             }}
           />
@@ -329,13 +311,11 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
       children: (
         <>
           <Typography.Paragraph type="secondary" style={{ marginBottom: 8 }}>
-            This mirrors the labor rows RR will receive, including weighted bill hours and rates derived from the
-            job&apos;s labor lines.
+            This mirrors the shell that would be sent for ROLABOR when all financials are carried in GOG.
           </Typography.Paragraph>
-          <ResponsiveTable
+          <Table
             pagination={false}
             columns={rolaborColumns}
-            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.component.jsx

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

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

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

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

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

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

@@ -1,5 +1,4 @@
-import { Button, Checkbox, Col } from "antd";
-import ResponsiveTable from "../responsive-table/responsive-table.component";
+import { Button, Col, Table } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -49,13 +48,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
   if (!open) return null;
 
   const columns = [
-    { 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.id"), dataIndex: "ContactId", key: "ContactId" },
     {
       title: t("jobs.fields.dms.name1"),
       key: "name1",
@@ -73,7 +66,7 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
 
   return (
     <Col span={24}>
-      <ResponsiveTable
+      <Table
         title={() => (
           <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             <Button onClick={onUseSelected} disabled={!selectedCustomer}>
@@ -87,7 +80,6 @@ export default function PBSCustomerSelector({ bodyshop, socket }) {
         )}
         pagination={{ placement: "top" }}
         columns={columns}
-        mobileColumnKeys={["ContactId", "name1", "address"]}
         rowKey={(r) => r.ContactId}
         dataSource={customerList}
         rowSelection={{

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

@@ -1,5 +1,4 @@
-import { Alert, Button, Checkbox, message, Modal, Space } from "antd";
-import ResponsiveTable from "../responsive-table/responsive-table.component";
+import { Alert, Button, Checkbox, message, Modal, Space, Table } from "antd";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -73,14 +72,14 @@ export default function RRCustomerSelector({
     if (!socket) return;
     const handleRrSelectCustomer = (list) => {
       const normalized = normalizeRrList(list);
-
+      
       // If list is empty, it means early RO exists and customer selection should be skipped
       // Don't open the modal in this case
       if (normalized.length === 0) {
         setRefreshing(false);
         return;
       }
-
+      
       setOpen(true);
       setCustomerList(normalized);
       const firstOwner = normalized.find((r) => r.vinOwner)?.custNo;
@@ -196,8 +195,8 @@ export default function RRCustomerSelector({
             description={
               <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                 <div>
-                  We created the Repair Order. Please validate the totals and taxes in the DMS system. When done, click{" "}
-                  <strong>Finished</strong> to finalize and mark this export as complete.
+                  We created the Repair Order. Please validate the totals and taxes in the DMS system. When done,
+                  click <strong>Finished</strong> to finalize and mark this export as complete.
                 </div>
                 <div>
                   <Space>
@@ -216,8 +215,14 @@ export default function RRCustomerSelector({
   }
 
   return (
-    <Modal open={open} onCancel={handleClose} footer={null} width={800} title={t("dms.selectCustomer")}>
-      <ResponsiveTable
+    <Modal
+      open={open}
+      onCancel={handleClose}
+      footer={null}
+      width={800}
+      title={t("dms.selectCustomer")}
+    >
+      <Table
         title={() => (
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
             {/* Open RO limit banner */}
@@ -299,7 +304,6 @@ export default function RRCustomerSelector({
         )}
         pagination={{ placement: "top" }}
         columns={columns}
-        mobileColumnKeys={["custNo", "vinOwner", "name", "address"]}
         rowKey={(r) => r.custNo}
         dataSource={customerList}
         rowSelection={{

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

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

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

@@ -272,19 +272,11 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode,
                         name={[field.name, "name"]}
                         rules={[{ required: true }]}
                       >
-                        <Select
-                          showSearch={{
-                            optionFilterProp: "label",
-                            filterOption: (input, option) => option.label.toLowerCase().includes(input.toLowerCase())
-                          }}
-                          style={{ width: "100%" }}
-                          onSelect={(value) => handlePayerSelect(value, index)}
-                          options={bodyshop.cdk_configuration?.payers?.map((payer) => ({
-                            key: payer.name,
-                            value: payer.name,
-                            label: payer.name
-                          }))}
-                        />
+                        <Select style={{ width: "100%" }} onSelect={(value) => handlePayerSelect(value, index)}>
+                          {bodyshop.cdk_configuration?.payers?.map((payer) => (
+                            <Select.Option key={payer.name}>{payer.name}</Select.Option>
+                          ))}
+                        </Select>
                       </Form.Item>
                     </Col>
 

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

@@ -1,6 +1,5 @@
 import { ReloadOutlined } from "@ant-design/icons";
-import { Alert, Button, Form, Input, InputNumber, Modal, Radio, Select, Space, Typography } from "antd";
-import ResponsiveTable from "../responsive-table/responsive-table.component";
+import { Alert, Button, Form, Input, InputNumber, Modal, Radio, Select, Space, Table, Typography } from "antd";
 import { useEffect, useMemo, useState } from "react";
 
 // Simple customer selector table
@@ -27,14 +26,7 @@ function CustomerSelectorTable({ customers, onSelect, isSubmitting }) {
 
   return (
     <div>
-      <ResponsiveTable
-        columns={columns}
-        mobileColumnKeys={["name", "select", "custNo", "vinOwner"]}
-        dataSource={customers}
-        rowKey="custNo"
-        pagination={false}
-        size="small"
-      />
+      <Table columns={columns} dataSource={customers} rowKey="custNo" pagination={false} size="small" />
       <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
         <Button
           type="primary"

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

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Result, theme } from "antd";
+import { Result } from "antd";
 import * as markerjs2 from "markerjs2";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,12 +9,6 @@ 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,
@@ -30,9 +24,7 @@ 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);
 
@@ -40,7 +32,6 @@ 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("-");
@@ -79,23 +70,6 @@ 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
@@ -119,10 +93,8 @@ 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);
     }
-  }, [handleGreyscale, imageLoaded, t, triggerUpload, undoImageEdit]);
+  }, [triggerUpload, imageLoaded]);
 
   useEffect(() => {
     if (!imageUrl) return;
@@ -134,7 +106,6 @@ 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;
@@ -171,7 +142,7 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
   }
 
   return (
-    <div style={{ background: token.colorBgBase, color: token.colorText, minHeight: "100vh" }}>
+    <div>
       {!loading && !uploaded && loadedImageUrl && (
         <img
           ref={imgRef}
@@ -187,12 +158,7 @@ export function DocumentEditorLocalComponent({ imageUrl, filename, jobid }) {
       {(loading || imageLoading || !imageLoaded) && !uploaded && (
         <LoadingSpinner message={t("documents.labels.uploading")} />
       )}
-      {uploaded && (
-        <Result
-          status="success"
-          title={<span style={{ color: token.colorText }}>{t("documents.successes.edituploaded")}</span>}
-        />
-      )}
+      {uploaded && <Result status="success" title={t("documents.successes.edituploaded")} />}
     </div>
   );
 }

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

@@ -1,21 +1,15 @@
 //import "tui-image-editor/dist/tui-image-editor.css";
 import axios from "axios";
-import { Result, theme } from "antd";
+import { Result } 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 {
-  addGreyscaleButtonToMarkerArea,
-  addImageHistoryUndoToMarkerArea,
-  applyGreyscaleToMarkerAreaImage,
-  setMarkerAreaImageSource
-} from "./document-editor.utility";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -33,9 +27,7 @@ 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(
@@ -65,23 +57,6 @@ 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
@@ -105,10 +80,8 @@ 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);
     }
-  }, [handleGreyscale, imageLoaded, t, triggerUpload, undoImageEdit]);
+  }, [triggerUpload, imageLoaded]);
 
   useEffect(() => {
     if (!document?.id) return;
@@ -127,7 +100,6 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
           }
         );
         const blobUrl = URL.createObjectURL(response.data);
-        imageHistory.current = [];
         setImageUrl((prevUrl) => {
           if (prevUrl) URL.revokeObjectURL(prevUrl);
           return blobUrl;
@@ -162,7 +134,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   }
 
   return (
-    <div style={{ background: token.colorBgBase, color: token.colorText, minHeight: "100vh" }}>
+    <div>
       {!loading && !uploaded && imageUrl && (
         <img
           ref={imgRef}
@@ -178,12 +150,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       {(loading || imageLoading || !imageLoaded) && !uploaded && (
         <LoadingSpinner message={t("documents.labels.uploading")} />
       )}
-      {uploaded && (
-        <Result
-          status="success"
-          title={<span style={{ color: token.colorText }}>{t("documents.successes.edituploaded")}</span>}
-        />
-      )}
+      {uploaded && <Result status="success" title={t("documents.successes.edituploaded")} />}
     </div>
   );
 }

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

@@ -1,123 +0,0 @@
-/**
- * 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,7 +4,6 @@ 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
@@ -145,3 +144,32 @@ 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-overlay/email-overlay.component.jsx

@@ -41,7 +41,7 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
   const emailsToMenu = {
     items: [
       ...bodyshop.employees
-        .filter((e) => e.user_email && e.active === true)
+        .filter((e) => e.user_email)
         .map((e, idx) => ({
           key: idx,
           label: `${e.first_name} ${e.last_name}`,
@@ -59,7 +59,7 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
   const menuCC = {
     items: [
       ...bodyshop.employees
-        .filter((e) => e.user_email && e.active === true)
+        .filter((e) => e.user_email)
         .map((e, idx) => ({
           key: idx,
           label: `${e.first_name} ${e.last_name}`,
@@ -86,13 +86,11 @@ export function EmailOverlayComponent({ emailConfig, form, selectedMediaState, b
           }
         ]}
       >
-        <Select
-          options={[
-            { key: currentUser.email, value: currentUser.email, label: currentUser.email },
-            { key: bodyshop.email, value: bodyshop.email, label: bodyshop.email },
-            ...(bodyshop.md_from_emails ? bodyshop.md_from_emails.map((e) => ({ key: e, value: e, label: e })) : [])
-          ]}
-        />
+        <Select>
+          <Select.Option key={currentUser.email}>{currentUser.email}</Select.Option>
+          <Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
+          {bodyshop.md_from_emails && bodyshop.md_from_emails.map((e) => <Select.Option key={e}>{e}</Select.Option>)}
+        </Select>
       </Form.Item>
       <Form.Item
         label={

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

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

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

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

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

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

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

@@ -1,92 +0,0 @@
-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, jobId, setEsignatureContext }) {
-  const [loading, setLoading] = useState(false);
-  const notification = useNotification();
-  const { t } = useTranslation();
-
-  if (!hasDocumensoApiKey(bodyshop)) {
-    return null;
-  }
-
-  const uploadCustomDocument = async ({ file, onError, onSuccess }) => {
-    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}
-      maxCount={1}
-      showUploadList={false}
-      multiple={false}
-    >
-      <Button 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

@@ -1,101 +0,0 @@
-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);
-
-  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 () => {
-        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 () => {
-        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 }}
-      okText={t("esignature.actions.distribute")}
-      destroyOnHidden
-      width={"80%"}
-    >
-      <div style={{ height: "80vh", width: "100%" }}>
-        {token ? (
-          <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/eula/eula.component.jsx

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

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

@@ -4,203 +4,20 @@ import AlertComponent from "../alert/alert.component";
 import "./form-fields-changed.styles.scss";
 import Prompt from "../../utils/prompt";
 
-export default function FormsFieldChanged({ form, skipPrompt, onErrorNavigate, onReset, onDirtyChange }) {
+export default function FormsFieldChanged({ form, skipPrompt }) {
   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 = () => {
-    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);
+    form.resetFields();
   };
   //if (!form.isFieldsTouched()) return <></>;
   return (
     <Form.Item className="form-fields-changed" shouldUpdate style={{ margin: 0, padding: 0, minHeight: "unset" }}>
       {() => {
-        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));
-
+        const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
         if (form.isFieldsTouched())
           return (
-            <Space orientation="vertical" style={{ width: "100%", marginBottom: 10 }}>
+            <Space orientation="vertical" style={{ width: "100%" }}>
               <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
               <AlertComponent
                 type="warning"
@@ -222,38 +39,11 @@ export default function FormsFieldChanged({ form, skipPrompt, onErrorNavigate, o
               {errors.length > 0 && (
                 <AlertComponent
                   type="error"
-                  title={t("general.labels.validationerror")}
-                  description={
-                    <div className="form-fields-changed__error-groups">
-                      {errorGroups.map((group) => (
-                        <div key={group.key} className="form-fields-changed__error-group">
-                          {hasTabbedErrorGroups && group.label ? (
-                            <div className="form-fields-changed__error-group-title">{group.label}</div>
-                          ) : null}
-                          <ul className="form-fields-changed__error-list">
-                            {group.errors.map((error) => (
-                              <li key={error.key}>
-                                {Array.isArray(error.namePath) && error.namePath.length > 0 ? (
-                                  <button
-                                    type="button"
-                                    className="form-fields-changed__error-link"
-                                    onClick={() => {
-                                      handleErrorClick(error.namePath);
-                                    }}
-                                  >
-                                    {error.message}
-                                  </button>
-                                ) : (
-                                  error.message
-                                )}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-                      ))}
+                  title={
+                    <div>
+                      <ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
                     </div>
                   }
-                  showIcon
                 />
               )}
             </Space>

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

@@ -4,47 +4,4 @@
       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,88 +1,11 @@
-import { PhoneFilled } from "@ant-design/icons";
-import { Button, Input, Space } from "antd";
+import { Input } from "antd";
 import i18n from "i18next";
 import parsePhoneNumber from "libphonenumber-js";
-import { forwardRef, useMemo, useState } from "react";
 import "./phone-form-item.styles.scss";
 
-/**
- * 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>
-  );
-});
+function FormItemPhone({ ref, ...props }) {
+  return <Input ref={ref} {...props} />;
+}
 
 export default FormItemPhone;
 

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

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

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

@@ -1,30 +0,0 @@
-/**
- * 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, orientation = "vertical" }) {
+export default function FormListMoveArrows({ move, index, total }) {
   const upDisabled = index === 0;
   const downDisabled = index === total - 1;
 
@@ -14,7 +14,7 @@ export default function FormListMoveArrows({ move, index, total, orientation = "
   };
 
   return (
-    <Space orientation={orientation}>
+    <Space orientation="vertical">
       <UpOutlined disabled={upDisabled} onClick={handleUp} />
       <DownOutlined disabled={downDisabled} onClick={handleDown} />
     </Space>

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

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

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

@@ -160,6 +160,9 @@ export default function GlobalSearch() {
   return (
     <AutoComplete
       options={options}
+      showSearch={{
+        onSearch: handleSearch
+      }}
       defaultActiveFirstOption
       onKeyDown={(e) => {
         if (e.key !== "Enter") return;
@@ -169,13 +172,11 @@ export default function GlobalSearch() {
       }}
     >
       <Input.Search
-        // className="global-search-autocomplete-fix"
         size="large"
         placeholder={t("general.labels.globalsearch")}
         enterButton
         allowClear
         loading={loading}
-        onChange={(e) => handleSearch(e.target.value)}
       />
     </AutoComplete>
   );

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

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

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

@@ -67,19 +67,16 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
     );
   };
 
-  const handleInsSelect = (value) => {
-    const selectedVendor = bodyshop.md_ins_cos.find(s => s.name === value);
-    if (selectedVendor) {
-      form.setFieldsValue({
-        addr1: selectedVendor.name,
-        addr2: selectedVendor.street1,
-        addr3: selectedVendor.street2,
-        city: selectedVendor.city,
-        state: selectedVendor.state,
-        zip: selectedVendor.zip,
-        vendorid: null
-      });
-    }
+  const handleInsSelect = (value, option) => {
+    form.setFieldsValue({
+      addr1: option.obj.name,
+      addr2: option.obj.street1,
+      addr3: option.obj.street2,
+      city: option.obj.city,
+      state: option.obj.state,
+      zip: option.obj.zip,
+      vendorid: null
+    });
   };
 
   const handleVendorSelect = (vendorid) => {
@@ -106,13 +103,13 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
             <VendorSearchSelect options={VendorAutoCompleteData?.vendors} onSelect={handleVendorSelect} />
           </Form.Item>
           <Form.Item label={t("bodyshop.fields.md_ins_co.name")} name="ins_co_id">
-            <Select
-              onSelect={handleInsSelect}
-              options={bodyshop.md_ins_cos.map((s) => ({
-                value: s.name,
-                label: s.name
-              }))}
-            />
+            <Select onSelect={handleInsSelect}>
+              {bodyshop.md_ins_cos.map((s) => (
+                <Select.Option key={s.name} obj={s} value={s.name}>
+                  {s.name}
+                </Select.Option>
+              ))}
+            </Select>
           </Form.Item>
           <LayoutFormRow grow>
             <Form.Item label={t("printcenter.jobs.3rdpartyfields.addr1")} name="addr1">

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

@@ -1,7 +1,6 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client/react";
-import { Button, Card, Checkbox, Col, Row, Space, Tag } from "antd";
-import ResponsiveTable from "../responsive-table/responsive-table.component";
+import { Button, Card, Col, Row, Table, Tag } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -12,9 +11,6 @@ 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
@@ -26,8 +22,6 @@ 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,
@@ -58,145 +52,6 @@ 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"),
@@ -308,40 +163,14 @@ export function JobAuditTrail({ bodyshop, jobId }) {
             />
           }
         >
-          <ResponsiveTable
-            loading={loading}
-            columns={columns}
-            mobileColumnKeys={["status", "created", "useremail", "operation"]}
-            rowKey="id"
-            dataSource={data ? data.audit_trail : []}
-          />
+          <Table loading={loading} columns={columns} rowKey="id" dataSource={data ? data.audit_trail : []} />
         </Card>
       </Col>
       <Col span={24}>
         <Card title={t("jobs.labels.emailaudit")}>
-          <ResponsiveTable
-            loading={loading}
-            columns={emailColumns}
-            mobileColumnKeys={["status", "created", "useremail", "operation"]}
-            rowKey="id"
-            dataSource={data ? data.email_audit_trail : []}
-          />
+          <Table loading={loading} columns={emailColumns} rowKey="id" dataSource={data ? data.email_audit_trail : []} />
         </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-guard.ppd.jsx

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

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

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

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

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

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

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

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

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

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

@@ -33,7 +33,7 @@ import JobLinesBillRefernece from "../job-lines-bill-reference/job-lines-bill-re
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import _ from "lodash";
 import { FaTasks } from "react-icons/fa";
-import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
+import { 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,13 +44,11 @@ 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!) {
@@ -68,8 +66,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   jobRO: selectJobReadOnly,
   technician: selectTechnician,
-  isPartsEntry: selectIsPartsEntry,
-  authLevel: selectAuthLevel
+  isPartsEntry: selectIsPartsEntry
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -97,8 +94,7 @@ export function JobLinesComponent({
   setTaskUpsertContext,
   billsQuery,
   handlePartsOrderOnRowClick,
-  isPartsEntry,
-  authLevel
+  isPartsEntry
 }) {
   const [deleteJobLine] = useMutation(DELETE_JOB_LINE_BY_PK);
   const [bulkUpdateLocations] = useMutation(UPDATE_JOB_LINES_LOCATION_BULK);
@@ -390,20 +386,18 @@ export function JobLinesComponent({
             key: "actions",
             render: (text, record) => (
               <Space>
-                {(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 />}
-                    />
-                  )}
+                {(record.manual_line || jobIsPrivate) && !technician && (
+                  <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={() => {
@@ -416,30 +410,29 @@ export function JobLinesComponent({
                   }}
                   icon={<FaTasks />}
                 />
-                {(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));
-                                }
+
+                {(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));
                               }
-                            });
-                          }
-                        });
-                        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>
             )
           }
@@ -596,7 +589,16 @@ export function JobLinesComponent({
                         isinhouse: true,
                         date: dayjs(),
                         total: 0,
-                        billlines: buildInHouseBillLines(selectedLines)
+                        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 }
+                        }))
                       }
                     }
                   });
@@ -655,7 +657,7 @@ export function JobLinesComponent({
               <Button id="repair-data-mark-button">{t("jobs.actions.mark")}</Button>
             </Dropdown>
 
-            {!isPartsEntry && HasRbacAccess({ bodyshop, authLevel, action: "jobs:manual-line" }) && (
+            {!isPartsEntry && (
               <Button
                 disabled={jobRO || technician}
                 onClick={() => {
@@ -688,7 +690,6 @@ export function JobLinesComponent({
 
       <Table
         columns={columns}
-        // mobileColumnKeys={["status", "line_desc", "actions", "line_no"]}
         rowKey="id"
         loading={loading}
         pagination={false}