Merge remote-tracking branch 'origin/master-AIO' into feature/IO-2433-esignature
This commit is contained in:
Patrick Fic
2
.gitignore
vendored
2
.gitignore
vendored
@@ -142,8 +142,6 @@ docker_data
|
||||
/CLAUDE.md
|
||||
/COPILOT.md
|
||||
/GEMINI.md
|
||||
/_reference/select-component-test-plan.md
|
||||
|
||||
/.cursorrules
|
||||
/AGENTS.md
|
||||
/AI_CONTEXT.md
|
||||
|
||||
@@ -1,7 +1,62 @@
|
||||
This will connect to your dockers local stack session and render the email in HTML.
|
||||
This app connects to your Docker LocalStack endpoints and gives you a compact inspector for:
|
||||
|
||||
- SES generated emails
|
||||
- CloudWatch log groups, streams, and recent events
|
||||
- Secrets Manager secrets and values
|
||||
- S3 buckets and object previews
|
||||
|
||||
```shell
|
||||
npm start
|
||||
```
|
||||
|
||||
Or:
|
||||
|
||||
```shell
|
||||
node index.js
|
||||
```
|
||||
|
||||
http://localhost:3334
|
||||
Open: http://localhost:3334
|
||||
|
||||
Features:
|
||||
|
||||
- SES email workspace with manual refresh, live refresh, search, HTML/text/raw views,
|
||||
attachment downloads, and new-message highlighting
|
||||
- CloudWatch Logs workspace with log group selection, stream filtering, adjustable time window,
|
||||
adjustable event limit, live refresh, in-browser log search, log-level highlighting, wrap toggle,
|
||||
and optional tail-to-newest mode
|
||||
- Secrets Manager workspace with live refresh, search, expandable secret metadata, lazy-loaded
|
||||
secret values, masked-by-default secret viewing, and quick copy actions
|
||||
- S3 Explorer workspace with bucket selection, prefix filtering, object search, lazy object
|
||||
previews,
|
||||
object key/URI copy actions, and downloads
|
||||
- Shared LocalStack service health strip plus a reset action for clearing saved viewer state
|
||||
- Compact single-page UI for switching between the local stack tools you use most
|
||||
|
||||
Code layout:
|
||||
|
||||
- `index.js`: small Express bootstrap and route registration
|
||||
- `server/config.js`: LocalStack endpoints, defaults, and AWS client setup
|
||||
- `server/localstack-service.js`: SES, Logs, Secrets, and S3 data loading helpers
|
||||
- `server/page.js`: server-rendered HTML shell, CSS, and client config payload
|
||||
- `public/client-app.js`: browser-side UI state, rendering, refresh logic, and interactions
|
||||
|
||||
Optional environment variables:
|
||||
|
||||
```shell
|
||||
PORT=3334
|
||||
SES_VIEWER_ENDPOINT=http://localhost:4566/_aws/ses
|
||||
SES_VIEWER_REFRESH_MS=10000
|
||||
SES_VIEWER_FETCH_TIMEOUT_MS=5000
|
||||
CLOUDWATCH_VIEWER_ENDPOINT=http://localhost:4566
|
||||
CLOUDWATCH_VIEWER_REGION=ca-central-1
|
||||
CLOUDWATCH_VIEWER_LOG_GROUP=development
|
||||
CLOUDWATCH_VIEWER_WINDOW_MS=900000
|
||||
CLOUDWATCH_VIEWER_LIMIT=200
|
||||
SECRETS_VIEWER_ENDPOINT=http://localhost:4566
|
||||
SECRETS_VIEWER_REGION=ca-central-1
|
||||
S3_VIEWER_ENDPOINT=http://localhost:4566
|
||||
S3_VIEWER_REGION=ca-central-1
|
||||
S3_VIEWER_BUCKET=
|
||||
S3_VIEWER_PREVIEW_BYTES=262144
|
||||
S3_VIEWER_IMAGE_PREVIEW_BYTES=1048576
|
||||
```
|
||||
|
||||
@@ -1,96 +1,342 @@
|
||||
// index.js
|
||||
|
||||
import express from "express";
|
||||
import fetch from "node-fetch";
|
||||
import { simpleParser } from "mailparser";
|
||||
import { readFileSync } from "node:fs";
|
||||
import {
|
||||
CLOUDWATCH_DEFAULT_LIMIT,
|
||||
CLOUDWATCH_DEFAULT_WINDOW_MS,
|
||||
CLOUDWATCH_ENDPOINT,
|
||||
CLOUDWATCH_REGION,
|
||||
DEFAULT_REFRESH_MS,
|
||||
PORT,
|
||||
S3_ENDPOINT,
|
||||
S3_REGION,
|
||||
SES_ENDPOINT,
|
||||
SECRETS_ENDPOINT,
|
||||
SECRETS_REGION
|
||||
} from "./server/config.js";
|
||||
import { getClientConfig, renderHtml } from "./server/page.js";
|
||||
import {
|
||||
buildAttachmentDisposition,
|
||||
buildInlineDisposition,
|
||||
clampNumber,
|
||||
findSesMessageById,
|
||||
loadLogEvents,
|
||||
loadLogGroups,
|
||||
loadLogStreams,
|
||||
loadMessageAttachment,
|
||||
loadMessages,
|
||||
loadS3Buckets,
|
||||
loadS3ObjectDownload,
|
||||
loadS3ObjectPreview,
|
||||
loadS3Objects,
|
||||
loadSecretValue,
|
||||
loadSecrets,
|
||||
loadServiceHealthSummary
|
||||
} from "./server/localstack-service.js";
|
||||
|
||||
const app = express();
|
||||
const PORT = 3334;
|
||||
const CLIENT_APP_PATH = new URL("./public/client-app.js", import.meta.url);
|
||||
const CLIENT_APP_SOURCE = readFileSync(CLIENT_APP_PATH, "utf8");
|
||||
|
||||
app.get("/", async (req, res) => {
|
||||
app.use((req, res, next) => {
|
||||
res.set("Cache-Control", "no-store");
|
||||
next();
|
||||
});
|
||||
|
||||
app.get("/", (req, res) => {
|
||||
res.type("html").send(renderHtml());
|
||||
});
|
||||
|
||||
app.get("/app.js", (req, res) => {
|
||||
res.type("application/javascript").send(`${CLIENT_APP_SOURCE}\n\nclientApp(${JSON.stringify(getClientConfig())});\n`);
|
||||
});
|
||||
|
||||
app.get("/health", (req, res) => {
|
||||
res.json({
|
||||
ok: true,
|
||||
endpoint: SES_ENDPOINT,
|
||||
endpoints: {
|
||||
ses: SES_ENDPOINT,
|
||||
cloudWatchLogs: CLOUDWATCH_ENDPOINT,
|
||||
secretsManager: SECRETS_ENDPOINT,
|
||||
s3: S3_ENDPOINT
|
||||
},
|
||||
port: PORT,
|
||||
defaultRefreshMs: DEFAULT_REFRESH_MS
|
||||
});
|
||||
});
|
||||
|
||||
app.get("/api/service-health", async (req, res) => {
|
||||
try {
|
||||
const response = await fetch("http://localhost:4566/_aws/ses");
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
const data = await response.json();
|
||||
const messagesHtml = await parseMessages(data.messages);
|
||||
res.send(renderHtml(messagesHtml));
|
||||
res.json(await loadServiceHealthSummary());
|
||||
} catch (error) {
|
||||
console.error("Error fetching messages:", error);
|
||||
res.status(500).send("Error fetching messages");
|
||||
console.error("Error fetching service health:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch LocalStack service health",
|
||||
details: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function parseMessages(messages) {
|
||||
const parsedMessages = await Promise.all(
|
||||
messages.map(async (message, index) => {
|
||||
try {
|
||||
const parsed = await simpleParser(message.RawData);
|
||||
return `
|
||||
<div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
|
||||
<div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
|
||||
<div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
|
||||
<div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
|
||||
<div class="mb-2"><span class="font-semibold">To:</span> ${parsed.to.text || "No To Address"}</div>
|
||||
<div class="mb-2"><span class="font-semibold">Subject:</span> ${parsed.subject || "No Subject"}</div>
|
||||
<div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
|
||||
<div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
|
||||
</div>
|
||||
<div class="prose">${parsed.html || parsed.textAsHtml || "No HTML content available"}</div>
|
||||
</div>
|
||||
`;
|
||||
} catch (error) {
|
||||
console.error("Error parsing email:", error);
|
||||
return `
|
||||
<div class="bg-white shadow-md rounded-lg p-4 mb-6">
|
||||
<div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
|
||||
<div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
|
||||
<div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
|
||||
<div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
|
||||
<div class="text-red-500">Error parsing email content</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
})
|
||||
);
|
||||
return parsedMessages.join("");
|
||||
}
|
||||
app.get("/api/messages", async (req, res) => {
|
||||
try {
|
||||
res.json(await loadMessages());
|
||||
} catch (error) {
|
||||
console.error("Error fetching messages:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch messages from LocalStack SES",
|
||||
details: error.message,
|
||||
endpoint: SES_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function renderHtml(messagesHtml) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Email Messages Viewer</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f4f6;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.prose {
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container bg-white shadow-lg rounded-lg p-6">
|
||||
<h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
|
||||
<div id="messages-container">${messagesHtml}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
app.get("/api/messages/:id/raw", async (req, res) => {
|
||||
try {
|
||||
const message = await findSesMessageById(req.params.id);
|
||||
|
||||
if (!message) {
|
||||
res.status(404).type("text/plain").send("Message not found");
|
||||
return;
|
||||
}
|
||||
|
||||
res.type("text/plain").send(message.RawData || "");
|
||||
} catch (error) {
|
||||
console.error("Error fetching raw message:", error);
|
||||
res.status(502).type("text/plain").send(`Unable to fetch raw message: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/messages/:id/attachments/:index", async (req, res) => {
|
||||
try {
|
||||
const attachmentIndex = Number.parseInt(req.params.index, 10);
|
||||
|
||||
if (!Number.isInteger(attachmentIndex) || attachmentIndex < 0) {
|
||||
res.status(400).type("text/plain").send("Attachment index must be a non-negative integer");
|
||||
return;
|
||||
}
|
||||
|
||||
const attachment = await loadMessageAttachment(req.params.id, attachmentIndex);
|
||||
|
||||
if (!attachment) {
|
||||
res.status(404).type("text/plain").send("Attachment not found");
|
||||
return;
|
||||
}
|
||||
|
||||
res.setHeader("Content-Type", attachment.contentType);
|
||||
res.setHeader("Content-Disposition", buildAttachmentDisposition(attachment.filename));
|
||||
res.setHeader("Content-Length", String(attachment.content.length));
|
||||
res.send(attachment.content);
|
||||
} catch (error) {
|
||||
console.error("Error downloading attachment:", error);
|
||||
res.status(502).type("text/plain").send(`Unable to download attachment: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/logs/groups", async (req, res) => {
|
||||
try {
|
||||
const groups = await loadLogGroups();
|
||||
res.json({
|
||||
endpoint: CLOUDWATCH_ENDPOINT,
|
||||
region: CLOUDWATCH_REGION,
|
||||
groups
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching log groups:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch CloudWatch log groups from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: CLOUDWATCH_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/logs/streams", async (req, res) => {
|
||||
try {
|
||||
const logGroupName = String(req.query.group || "");
|
||||
|
||||
if (!logGroupName) {
|
||||
res.status(400).json({ error: "Query parameter 'group' is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json({
|
||||
logGroupName,
|
||||
streams: await loadLogStreams(logGroupName)
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching log streams:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch CloudWatch log streams from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: CLOUDWATCH_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/logs/events", async (req, res) => {
|
||||
try {
|
||||
const logGroupName = String(req.query.group || "");
|
||||
const logStreamName = String(req.query.stream || "");
|
||||
const windowMs = clampNumber(req.query.windowMs, CLOUDWATCH_DEFAULT_WINDOW_MS, 60 * 1000, 24 * 60 * 60 * 1000);
|
||||
const limit = clampNumber(req.query.limit, CLOUDWATCH_DEFAULT_LIMIT, 25, 500);
|
||||
|
||||
if (!logGroupName) {
|
||||
res.status(400).json({ error: "Query parameter 'group' is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(await loadLogEvents({ logGroupName, logStreamName, windowMs, limit }));
|
||||
} catch (error) {
|
||||
console.error("Error fetching log events:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch CloudWatch log events from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: CLOUDWATCH_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/secrets", async (req, res) => {
|
||||
try {
|
||||
res.json(await loadSecrets());
|
||||
} catch (error) {
|
||||
console.error("Error fetching secrets:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch Secrets Manager secrets from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: SECRETS_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/secrets/value", async (req, res) => {
|
||||
try {
|
||||
const secretId = String(req.query.id || "");
|
||||
|
||||
if (!secretId) {
|
||||
res.status(400).json({ error: "Query parameter 'id' is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(await loadSecretValue(secretId));
|
||||
} catch (error) {
|
||||
if (error?.name === "ResourceNotFoundException") {
|
||||
res.status(404).json({
|
||||
error: "Secret not found",
|
||||
details: error.message,
|
||||
endpoint: SECRETS_ENDPOINT
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.error("Error fetching secret value:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch Secrets Manager value from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: SECRETS_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/s3/buckets", async (req, res) => {
|
||||
try {
|
||||
res.json(await loadS3Buckets());
|
||||
} catch (error) {
|
||||
console.error("Error fetching S3 buckets:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch S3 buckets from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: S3_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/s3/objects", async (req, res) => {
|
||||
try {
|
||||
const bucket = String(req.query.bucket || "");
|
||||
const prefix = String(req.query.prefix || "");
|
||||
|
||||
if (!bucket) {
|
||||
res.status(400).json({ error: "Query parameter 'bucket' is required" });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(await loadS3Objects({ bucket, prefix }));
|
||||
} catch (error) {
|
||||
console.error("Error fetching S3 objects:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch S3 objects from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: S3_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/s3/object", async (req, res) => {
|
||||
try {
|
||||
const bucket = String(req.query.bucket || "");
|
||||
const key = String(req.query.key || "");
|
||||
|
||||
if (!bucket || !key) {
|
||||
res.status(400).json({ error: "Query parameters 'bucket' and 'key' are required" });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json(await loadS3ObjectPreview({ bucket, key }));
|
||||
} catch (error) {
|
||||
if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
|
||||
res.status(404).json({
|
||||
error: "Object not found",
|
||||
details: error.message,
|
||||
endpoint: S3_ENDPOINT
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.error("Error fetching S3 object preview:", error);
|
||||
res.status(502).json({
|
||||
error: "Unable to fetch S3 object preview from LocalStack",
|
||||
details: error.message,
|
||||
endpoint: S3_ENDPOINT
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/s3/download", async (req, res) => {
|
||||
try {
|
||||
const bucket = String(req.query.bucket || "");
|
||||
const key = String(req.query.key || "");
|
||||
const inline = String(req.query.inline || "") === "1";
|
||||
|
||||
if (!bucket || !key) {
|
||||
res.status(400).type("text/plain").send("Query parameters 'bucket' and 'key' are required");
|
||||
return;
|
||||
}
|
||||
|
||||
const object = await loadS3ObjectDownload({ bucket, key });
|
||||
|
||||
res.setHeader("Content-Type", object.contentType);
|
||||
res.setHeader(
|
||||
"Content-Disposition",
|
||||
inline ? buildInlineDisposition(object.filename) : buildAttachmentDisposition(object.filename)
|
||||
);
|
||||
res.setHeader("Content-Length", String(object.content.length));
|
||||
res.send(object.content);
|
||||
} catch (error) {
|
||||
if (error?.name === "NoSuchKey" || error?.name === "NotFound") {
|
||||
res.status(404).type("text/plain").send("Object not found");
|
||||
return;
|
||||
}
|
||||
|
||||
console.error("Error downloading S3 object:", error);
|
||||
res.status(502).type("text/plain").send(`Unable to download S3 object: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server is running on http://localhost:${PORT}`);
|
||||
console.log(`LocalStack inspector is running on http://localhost:${PORT}`);
|
||||
console.log(`Watching LocalStack SES endpoint at ${SES_ENDPOINT}`);
|
||||
console.log(`Watching LocalStack CloudWatch Logs endpoint at ${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`);
|
||||
console.log(`Watching LocalStack Secrets Manager endpoint at ${SECRETS_ENDPOINT} (${SECRETS_REGION})`);
|
||||
console.log(`Watching LocalStack S3 endpoint at ${S3_ENDPOINT} (${S3_REGION})`);
|
||||
});
|
||||
|
||||
1764
_reference/localEmailViewer/package-lock.json
generated
1764
_reference/localEmailViewer/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,13 +4,17 @@
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"start": "node index.js",
|
||||
"check": "node --check index.js && node --check public/client-app.js && node --check server/config.js && node --check server/localstack-service.js && node --check server/page.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"description": "LocalStack inspector for SES emails, CloudWatch logs, Secrets Manager, and S3",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-cloudwatch-logs": "^3.1012.0",
|
||||
"@aws-sdk/client-s3": "^3.1013.0",
|
||||
"@aws-sdk/client-secrets-manager": "^3.1013.0",
|
||||
"express": "^5.1.0",
|
||||
"mailparser": "^3.7.4",
|
||||
"node-fetch": "^3.3.2"
|
||||
|
||||
3154
_reference/localEmailViewer/public/client-app.js
Normal file
3154
_reference/localEmailViewer/public/client-app.js
Normal file
File diff suppressed because it is too large
Load Diff
45
_reference/localEmailViewer/server/config.js
Normal file
45
_reference/localEmailViewer/server/config.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import { CloudWatchLogsClient } from "@aws-sdk/client-cloudwatch-logs";
|
||||
import { SecretsManagerClient } from "@aws-sdk/client-secrets-manager";
|
||||
import { S3Client } from "@aws-sdk/client-s3";
|
||||
|
||||
export const PORT = Number(process.env.PORT || 3334);
|
||||
export const SES_ENDPOINT = process.env.SES_VIEWER_ENDPOINT || "http://localhost:4566/_aws/ses";
|
||||
export const FETCH_TIMEOUT_MS = Number(process.env.SES_VIEWER_FETCH_TIMEOUT_MS || 5000);
|
||||
export const DEFAULT_REFRESH_MS = Number(process.env.SES_VIEWER_REFRESH_MS || 10000);
|
||||
export const CLOUDWATCH_ENDPOINT = process.env.CLOUDWATCH_VIEWER_ENDPOINT || "http://localhost:4566";
|
||||
export const CLOUDWATCH_REGION =
|
||||
process.env.CLOUDWATCH_VIEWER_REGION || process.env.AWS_DEFAULT_REGION || "ca-central-1";
|
||||
export const CLOUDWATCH_DEFAULT_GROUP = process.env.CLOUDWATCH_VIEWER_LOG_GROUP || "development";
|
||||
export const CLOUDWATCH_DEFAULT_WINDOW_MS = Number(process.env.CLOUDWATCH_VIEWER_WINDOW_MS || 15 * 60 * 1000);
|
||||
export const CLOUDWATCH_DEFAULT_LIMIT = Number(process.env.CLOUDWATCH_VIEWER_LIMIT || 200);
|
||||
export const SECRETS_ENDPOINT = process.env.SECRETS_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
|
||||
export const SECRETS_REGION = process.env.SECRETS_VIEWER_REGION || CLOUDWATCH_REGION;
|
||||
export const S3_ENDPOINT = process.env.S3_VIEWER_ENDPOINT || CLOUDWATCH_ENDPOINT;
|
||||
export const S3_REGION = process.env.S3_VIEWER_REGION || CLOUDWATCH_REGION;
|
||||
export const S3_DEFAULT_BUCKET = process.env.S3_VIEWER_BUCKET || "";
|
||||
export const S3_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_PREVIEW_BYTES || 256 * 1024);
|
||||
export const S3_IMAGE_PREVIEW_MAX_BYTES = Number(process.env.S3_VIEWER_IMAGE_PREVIEW_BYTES || 1024 * 1024);
|
||||
|
||||
export const LOCALSTACK_CREDENTIALS = {
|
||||
accessKeyId: process.env.AWS_ACCESS_KEY_ID || "test",
|
||||
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || "test"
|
||||
};
|
||||
|
||||
export const cloudWatchLogsClient = new CloudWatchLogsClient({
|
||||
region: CLOUDWATCH_REGION,
|
||||
endpoint: CLOUDWATCH_ENDPOINT,
|
||||
credentials: LOCALSTACK_CREDENTIALS
|
||||
});
|
||||
|
||||
export const secretsManagerClient = new SecretsManagerClient({
|
||||
region: SECRETS_REGION,
|
||||
endpoint: SECRETS_ENDPOINT,
|
||||
credentials: LOCALSTACK_CREDENTIALS
|
||||
});
|
||||
|
||||
export const s3Client = new S3Client({
|
||||
region: S3_REGION,
|
||||
endpoint: S3_ENDPOINT,
|
||||
credentials: LOCALSTACK_CREDENTIALS,
|
||||
forcePathStyle: true
|
||||
});
|
||||
845
_reference/localEmailViewer/server/localstack-service.js
Normal file
845
_reference/localEmailViewer/server/localstack-service.js
Normal file
@@ -0,0 +1,845 @@
|
||||
import fetch from "node-fetch";
|
||||
import {
|
||||
DescribeLogGroupsCommand,
|
||||
DescribeLogStreamsCommand,
|
||||
FilterLogEventsCommand
|
||||
} from "@aws-sdk/client-cloudwatch-logs";
|
||||
import { GetSecretValueCommand, ListSecretsCommand } from "@aws-sdk/client-secrets-manager";
|
||||
import { GetObjectCommand, HeadObjectCommand, ListBucketsCommand, ListObjectsV2Command } from "@aws-sdk/client-s3";
|
||||
import { simpleParser } from "mailparser";
|
||||
import {
|
||||
CLOUDWATCH_ENDPOINT,
|
||||
CLOUDWATCH_REGION,
|
||||
FETCH_TIMEOUT_MS,
|
||||
S3_ENDPOINT,
|
||||
S3_IMAGE_PREVIEW_MAX_BYTES,
|
||||
S3_PREVIEW_MAX_BYTES,
|
||||
S3_REGION,
|
||||
SES_ENDPOINT,
|
||||
SECRETS_ENDPOINT,
|
||||
SECRETS_REGION,
|
||||
cloudWatchLogsClient,
|
||||
s3Client,
|
||||
secretsManagerClient
|
||||
} from "./config.js";
|
||||
|
||||
async function loadMessages() {
|
||||
const startedAt = Date.now();
|
||||
const sesMessages = await fetchSesMessages();
|
||||
const messages = await Promise.all(sesMessages.map((message, index) => toMessageViewModel(message, index)));
|
||||
|
||||
messages.sort((left, right) => {
|
||||
if ((right.timestampMs || 0) !== (left.timestampMs || 0)) {
|
||||
return (right.timestampMs || 0) - (left.timestampMs || 0);
|
||||
}
|
||||
|
||||
return right.index - left.index;
|
||||
});
|
||||
|
||||
return {
|
||||
endpoint: SES_ENDPOINT,
|
||||
fetchedAt: new Date().toISOString(),
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
totalMessages: messages.length,
|
||||
parseErrors: messages.filter((message) => Boolean(message.parseError)).length,
|
||||
latestMessageTimestamp: messages[0]?.timestamp || "",
|
||||
messages
|
||||
};
|
||||
}
|
||||
|
||||
async function fetchSesMessages() {
|
||||
const response = await fetch(SES_ENDPOINT, {
|
||||
signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`SES endpoint responded with ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return Array.isArray(data.messages) ? data.messages : [];
|
||||
}
|
||||
|
||||
async function loadLogGroups() {
|
||||
const groups = [];
|
||||
let nextToken;
|
||||
let pageCount = 0;
|
||||
|
||||
do {
|
||||
const response = await cloudWatchLogsClient.send(
|
||||
new DescribeLogGroupsCommand({
|
||||
nextToken,
|
||||
limit: 50
|
||||
})
|
||||
);
|
||||
|
||||
groups.push(
|
||||
...(response.logGroups || []).map((group) => ({
|
||||
name: group.logGroupName || "",
|
||||
arn: group.arn || "",
|
||||
storedBytes: group.storedBytes || 0,
|
||||
retentionInDays: group.retentionInDays || 0,
|
||||
creationTime: group.creationTime || 0
|
||||
}))
|
||||
);
|
||||
|
||||
nextToken = response.nextToken;
|
||||
pageCount += 1;
|
||||
} while (nextToken && pageCount < 10);
|
||||
|
||||
return groups.sort((left, right) => left.name.localeCompare(right.name));
|
||||
}
|
||||
|
||||
async function loadLogStreams(logGroupName) {
|
||||
const streams = [];
|
||||
let nextToken;
|
||||
let pageCount = 0;
|
||||
|
||||
do {
|
||||
const response = await cloudWatchLogsClient.send(
|
||||
new DescribeLogStreamsCommand({
|
||||
logGroupName,
|
||||
descending: true,
|
||||
orderBy: "LastEventTime",
|
||||
nextToken,
|
||||
limit: 50
|
||||
})
|
||||
);
|
||||
|
||||
streams.push(
|
||||
...(response.logStreams || []).map((stream) => ({
|
||||
name: stream.logStreamName || "",
|
||||
arn: stream.arn || "",
|
||||
lastEventTimestamp: stream.lastEventTimestamp || 0,
|
||||
lastIngestionTime: stream.lastIngestionTime || 0,
|
||||
storedBytes: stream.storedBytes || 0
|
||||
}))
|
||||
);
|
||||
|
||||
nextToken = response.nextToken;
|
||||
pageCount += 1;
|
||||
} while (nextToken && pageCount < 6 && streams.length < 250);
|
||||
|
||||
return streams;
|
||||
}
|
||||
|
||||
async function loadLogEvents({ logGroupName, logStreamName, windowMs, limit }) {
|
||||
const startedAt = Date.now();
|
||||
const eventMap = new Map();
|
||||
const startTime = Date.now() - windowMs;
|
||||
let nextToken;
|
||||
let previousToken = "";
|
||||
let pageCount = 0;
|
||||
let searchedLogStreams = 0;
|
||||
|
||||
do {
|
||||
const response = await cloudWatchLogsClient.send(
|
||||
new FilterLogEventsCommand({
|
||||
logGroupName,
|
||||
logStreamNames: logStreamName ? [logStreamName] : undefined,
|
||||
startTime,
|
||||
endTime: Date.now(),
|
||||
limit,
|
||||
nextToken
|
||||
})
|
||||
);
|
||||
|
||||
for (const event of response.events || []) {
|
||||
const id =
|
||||
event.eventId || `${event.logStreamName || "stream"}-${event.timestamp || 0}-${event.ingestionTime || 0}`;
|
||||
|
||||
if (!eventMap.has(id)) {
|
||||
const message = String(event.message || "").trim();
|
||||
eventMap.set(id, {
|
||||
id,
|
||||
timestamp: event.timestamp || 0,
|
||||
ingestionTime: event.ingestionTime || 0,
|
||||
logStreamName: event.logStreamName || "",
|
||||
message,
|
||||
preview: buildLogPreview(message)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
searchedLogStreams = Math.max(searchedLogStreams, (response.searchedLogStreams || []).length);
|
||||
previousToken = nextToken || "";
|
||||
nextToken = response.nextToken;
|
||||
pageCount += 1;
|
||||
} while (nextToken && nextToken !== previousToken && pageCount < 10 && eventMap.size < limit);
|
||||
|
||||
const events = [...eventMap.values()]
|
||||
.sort((left, right) => {
|
||||
if ((right.timestamp || 0) !== (left.timestamp || 0)) {
|
||||
return (right.timestamp || 0) - (left.timestamp || 0);
|
||||
}
|
||||
|
||||
return left.logStreamName.localeCompare(right.logStreamName);
|
||||
})
|
||||
.slice(0, limit);
|
||||
|
||||
return {
|
||||
endpoint: CLOUDWATCH_ENDPOINT,
|
||||
region: CLOUDWATCH_REGION,
|
||||
logGroupName,
|
||||
logStreamName,
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
latestTimestamp: events[0]?.timestamp || 0,
|
||||
searchedLogStreams,
|
||||
totalEvents: events.length,
|
||||
events
|
||||
};
|
||||
}
|
||||
|
||||
async function loadSecrets() {
|
||||
const startedAt = Date.now();
|
||||
const secrets = [];
|
||||
let nextToken;
|
||||
let pageCount = 0;
|
||||
|
||||
do {
|
||||
const response = await secretsManagerClient.send(
|
||||
new ListSecretsCommand({
|
||||
NextToken: nextToken,
|
||||
MaxResults: 50
|
||||
})
|
||||
);
|
||||
|
||||
secrets.push(
|
||||
...(response.SecretList || []).map((secret, index) => ({
|
||||
id: secret.ARN || secret.Name || `secret-${index}`,
|
||||
name: secret.Name || "Unnamed secret",
|
||||
arn: secret.ARN || "",
|
||||
description: secret.Description || "",
|
||||
createdDate: normalizeTimestamp(secret.CreatedDate),
|
||||
lastChangedDate: normalizeTimestamp(secret.LastChangedDate),
|
||||
lastAccessedDate: normalizeTimestamp(secret.LastAccessedDate),
|
||||
deletedDate: normalizeTimestamp(secret.DeletedDate),
|
||||
primaryRegion: secret.PrimaryRegion || "",
|
||||
owningService: secret.OwningService || "",
|
||||
rotationEnabled: Boolean(secret.RotationEnabled),
|
||||
versionCount: Object.keys(secret.SecretVersionsToStages || {}).length,
|
||||
tagCount: Array.isArray(secret.Tags) ? secret.Tags.length : 0,
|
||||
tags: (secret.Tags || [])
|
||||
.map((tag) => ({
|
||||
key: tag.Key || "",
|
||||
value: tag.Value || ""
|
||||
}))
|
||||
.filter((tag) => tag.key || tag.value)
|
||||
}))
|
||||
);
|
||||
|
||||
nextToken = response.NextToken;
|
||||
pageCount += 1;
|
||||
} while (nextToken && pageCount < 10 && secrets.length < 500);
|
||||
|
||||
secrets.sort((left, right) => {
|
||||
const leftTime = Date.parse(left.lastChangedDate || left.createdDate || 0) || 0;
|
||||
const rightTime = Date.parse(right.lastChangedDate || right.createdDate || 0) || 0;
|
||||
|
||||
if (rightTime !== leftTime) {
|
||||
return rightTime - leftTime;
|
||||
}
|
||||
|
||||
return left.name.localeCompare(right.name);
|
||||
});
|
||||
|
||||
return {
|
||||
endpoint: SECRETS_ENDPOINT,
|
||||
region: SECRETS_REGION,
|
||||
fetchedAt: new Date().toISOString(),
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
totalSecrets: secrets.length,
|
||||
latestTimestamp: secrets[0]?.lastChangedDate || secrets[0]?.createdDate || "",
|
||||
secrets
|
||||
};
|
||||
}
|
||||
|
||||
async function loadSecretValue(secretId) {
|
||||
const startedAt = Date.now();
|
||||
const response = await secretsManagerClient.send(
|
||||
new GetSecretValueCommand({
|
||||
SecretId: secretId
|
||||
})
|
||||
);
|
||||
|
||||
const secretBinary = response.SecretBinary
|
||||
? typeof response.SecretBinary === "string"
|
||||
? response.SecretBinary
|
||||
: Buffer.from(response.SecretBinary).toString("base64")
|
||||
: "";
|
||||
|
||||
return {
|
||||
endpoint: SECRETS_ENDPOINT,
|
||||
region: SECRETS_REGION,
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
id: secretId,
|
||||
name: response.Name || "",
|
||||
arn: response.ARN || "",
|
||||
versionId: response.VersionId || "",
|
||||
versionStages: Array.isArray(response.VersionStages) ? response.VersionStages : [],
|
||||
createdDate: normalizeTimestamp(response.CreatedDate),
|
||||
secretString: typeof response.SecretString === "string" ? response.SecretString : "",
|
||||
secretBinary
|
||||
};
|
||||
}
|
||||
|
||||
async function loadS3Buckets() {
|
||||
const startedAt = Date.now();
|
||||
const response = await s3Client.send(new ListBucketsCommand({}));
|
||||
const buckets = (response.Buckets || [])
|
||||
.map((bucket) => ({
|
||||
name: bucket.Name || "",
|
||||
creationDate: normalizeTimestamp(bucket.CreationDate)
|
||||
}))
|
||||
.filter((bucket) => bucket.name)
|
||||
.sort((left, right) => left.name.localeCompare(right.name));
|
||||
|
||||
return {
|
||||
endpoint: S3_ENDPOINT,
|
||||
region: S3_REGION,
|
||||
fetchedAt: new Date().toISOString(),
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
totalBuckets: buckets.length,
|
||||
buckets
|
||||
};
|
||||
}
|
||||
|
||||
async function loadS3Objects({ bucket, prefix }) {
|
||||
const startedAt = Date.now();
|
||||
const objects = [];
|
||||
let continuationToken;
|
||||
let pageCount = 0;
|
||||
|
||||
do {
|
||||
const response = await s3Client.send(
|
||||
new ListObjectsV2Command({
|
||||
Bucket: bucket,
|
||||
Prefix: prefix || undefined,
|
||||
ContinuationToken: continuationToken,
|
||||
MaxKeys: 200
|
||||
})
|
||||
);
|
||||
|
||||
objects.push(
|
||||
...(response.Contents || []).map((object, index) => ({
|
||||
id: `${bucket}::${object.Key || index}`,
|
||||
bucket,
|
||||
key: object.Key || "",
|
||||
size: object.Size || 0,
|
||||
lastModified: normalizeTimestamp(object.LastModified),
|
||||
etag: String(object.ETag || "").replace(/^"|"$/g, ""),
|
||||
storageClass: object.StorageClass || "STANDARD"
|
||||
}))
|
||||
);
|
||||
|
||||
continuationToken = response.IsTruncated ? response.NextContinuationToken : undefined;
|
||||
pageCount += 1;
|
||||
} while (continuationToken && pageCount < 10 && objects.length < 1000);
|
||||
|
||||
objects.sort((left, right) => {
|
||||
const leftTime = Date.parse(left.lastModified || 0) || 0;
|
||||
const rightTime = Date.parse(right.lastModified || 0) || 0;
|
||||
|
||||
if (rightTime !== leftTime) {
|
||||
return rightTime - leftTime;
|
||||
}
|
||||
|
||||
return left.key.localeCompare(right.key);
|
||||
});
|
||||
|
||||
return {
|
||||
endpoint: S3_ENDPOINT,
|
||||
region: S3_REGION,
|
||||
bucket,
|
||||
prefix,
|
||||
fetchedAt: new Date().toISOString(),
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
totalObjects: objects.length,
|
||||
latestTimestamp: objects[0]?.lastModified || "",
|
||||
objects
|
||||
};
|
||||
}
|
||||
|
||||
async function loadS3ObjectPreview({ bucket, key }) {
|
||||
const startedAt = Date.now();
|
||||
const head = await s3Client.send(
|
||||
new HeadObjectCommand({
|
||||
Bucket: bucket,
|
||||
Key: key
|
||||
})
|
||||
);
|
||||
|
||||
const contentType = head.ContentType || guessObjectContentType(key);
|
||||
const contentLength = Number(head.ContentLength || 0);
|
||||
const previewType = resolveS3PreviewType(contentType, key);
|
||||
const result = {
|
||||
endpoint: S3_ENDPOINT,
|
||||
region: S3_REGION,
|
||||
bucket,
|
||||
key,
|
||||
fetchDurationMs: 0,
|
||||
contentType,
|
||||
contentLength,
|
||||
etag: String(head.ETag || "").replace(/^"|"$/g, ""),
|
||||
lastModified: normalizeTimestamp(head.LastModified),
|
||||
metadata: head.Metadata || {},
|
||||
previewType,
|
||||
previewText: "",
|
||||
imageDataUrl: "",
|
||||
truncated: false
|
||||
};
|
||||
|
||||
const shouldLoadTextPreview = previewType === "json" || previewType === "text" || previewType === "html";
|
||||
const shouldLoadImagePreview =
|
||||
previewType === "image" && contentLength > 0 && contentLength <= S3_IMAGE_PREVIEW_MAX_BYTES;
|
||||
|
||||
if ((shouldLoadTextPreview || shouldLoadImagePreview) && contentLength > 0) {
|
||||
const previewBytes = Math.max(1, Math.min(contentLength || S3_PREVIEW_MAX_BYTES, S3_PREVIEW_MAX_BYTES));
|
||||
const response = await s3Client.send(
|
||||
new GetObjectCommand({
|
||||
Bucket: bucket,
|
||||
Key: key,
|
||||
Range: `bytes=0-${previewBytes - 1}`
|
||||
})
|
||||
);
|
||||
const content = Buffer.from(await response.Body.transformToByteArray());
|
||||
result.truncated = contentLength > content.length;
|
||||
|
||||
if (shouldLoadImagePreview) {
|
||||
result.imageDataUrl = `data:${contentType};base64,${content.toString("base64")}`;
|
||||
} else {
|
||||
result.previewText = content.toString("utf8");
|
||||
}
|
||||
}
|
||||
|
||||
result.fetchDurationMs = Date.now() - startedAt;
|
||||
return result;
|
||||
}
|
||||
|
||||
async function loadServiceHealthSummary() {
|
||||
const startedAt = Date.now();
|
||||
const [sesResult, logsResult, secretsResult, s3Result] = await Promise.allSettled([
|
||||
fetchSesMessages(),
|
||||
loadLogGroups(),
|
||||
loadSecrets(),
|
||||
loadS3Buckets()
|
||||
]);
|
||||
|
||||
return {
|
||||
fetchedAt: new Date().toISOString(),
|
||||
fetchDurationMs: Date.now() - startedAt,
|
||||
services: {
|
||||
emails: summarizeHealthResult({
|
||||
icon: "✉️",
|
||||
panel: "emails",
|
||||
label: "SES Emails",
|
||||
result: sesResult,
|
||||
count: sesResult.status === "fulfilled" ? sesResult.value.length : 0,
|
||||
detail: SES_ENDPOINT,
|
||||
noun: "email"
|
||||
}),
|
||||
logs: summarizeHealthResult({
|
||||
icon: "📜",
|
||||
panel: "logs",
|
||||
label: "CloudWatch Logs",
|
||||
result: logsResult,
|
||||
count: logsResult.status === "fulfilled" ? logsResult.value.length : 0,
|
||||
detail: `${CLOUDWATCH_ENDPOINT} (${CLOUDWATCH_REGION})`,
|
||||
noun: "group"
|
||||
}),
|
||||
secrets: summarizeHealthResult({
|
||||
icon: "🔐",
|
||||
panel: "secrets",
|
||||
label: "Secrets Manager",
|
||||
result: secretsResult,
|
||||
count: secretsResult.status === "fulfilled" ? secretsResult.value.totalSecrets : 0,
|
||||
detail: `${SECRETS_ENDPOINT} (${SECRETS_REGION})`,
|
||||
noun: "secret"
|
||||
}),
|
||||
s3: summarizeHealthResult({
|
||||
icon: "🪣",
|
||||
panel: "s3",
|
||||
label: "S3 Explorer",
|
||||
result: s3Result,
|
||||
count: s3Result.status === "fulfilled" ? s3Result.value.totalBuckets : 0,
|
||||
detail: `${S3_ENDPOINT} (${S3_REGION})`,
|
||||
noun: "bucket"
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function findSesMessageById(id) {
|
||||
const messages = await fetchSesMessages();
|
||||
return messages.find((message, index) => resolveMessageId(message, index) === id) || null;
|
||||
}
|
||||
|
||||
async function parseSesMessageById(id) {
|
||||
const message = await findSesMessageById(id);
|
||||
|
||||
if (!message) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return simpleParser(message.RawData || "");
|
||||
}
|
||||
|
||||
async function toMessageViewModel(message, index) {
|
||||
const id = resolveMessageId(message, index);
|
||||
|
||||
try {
|
||||
const parsed = await simpleParser(message.RawData || "");
|
||||
const textContent = normalizeText(parsed.text || "");
|
||||
const renderedHtml = buildRenderedHtml(parsed.html || parsed.textAsHtml || "");
|
||||
const timestamp = normalizeTimestamp(message.Timestamp || parsed.date);
|
||||
|
||||
return {
|
||||
id,
|
||||
index,
|
||||
from: formatAddressList(parsed.from) || message.Source || "Unknown sender",
|
||||
to: formatAddressList(parsed.to) || "No To Address",
|
||||
replyTo: formatAddressList(parsed.replyTo),
|
||||
subject: parsed.subject || "No Subject",
|
||||
region: message.Region || "",
|
||||
timestamp,
|
||||
timestampMs: timestamp ? Date.parse(timestamp) : 0,
|
||||
messageId: parsed.messageId || "",
|
||||
rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
|
||||
attachmentCount: parsed.attachments.length,
|
||||
attachments: parsed.attachments.map((attachment, attachmentIndex) => ({
|
||||
index: attachmentIndex,
|
||||
filename: resolveAttachmentFilename(attachment, attachmentIndex),
|
||||
contentType: attachment.contentType || "application/octet-stream",
|
||||
size: attachment.size || 0
|
||||
})),
|
||||
preview: buildPreview(textContent, renderedHtml),
|
||||
textContent,
|
||||
renderedHtml,
|
||||
hasHtml: Boolean(renderedHtml),
|
||||
parseError: ""
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
id,
|
||||
index,
|
||||
from: message.Source || "Unknown sender",
|
||||
to: "Unknown recipient",
|
||||
replyTo: "",
|
||||
subject: "Unable to parse message",
|
||||
region: message.Region || "",
|
||||
timestamp: normalizeTimestamp(message.Timestamp),
|
||||
timestampMs: message.Timestamp ? Date.parse(message.Timestamp) : 0,
|
||||
messageId: "",
|
||||
rawSizeBytes: Buffer.byteLength(message.RawData || "", "utf8"),
|
||||
attachmentCount: 0,
|
||||
attachments: [],
|
||||
preview: "This message could not be parsed. Open the raw view to inspect the MIME source.",
|
||||
textContent: "",
|
||||
renderedHtml: "",
|
||||
hasHtml: false,
|
||||
parseError: error.message
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function resolveMessageId(message, index = 0) {
|
||||
return message.Id || `${message.Timestamp || "unknown"}-${message.Source || "unknown"}-${index}`;
|
||||
}
|
||||
|
||||
function resolveAttachmentFilename(attachment, index = 0) {
|
||||
if (attachment?.filename) {
|
||||
return attachment.filename;
|
||||
}
|
||||
|
||||
return `attachment-${index + 1}${attachmentExtension(attachment?.contentType)}`;
|
||||
}
|
||||
|
||||
function attachmentExtension(contentType) {
|
||||
const normalized = String(contentType || "")
|
||||
.split(";")[0]
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
|
||||
return (
|
||||
{
|
||||
"application/json": ".json",
|
||||
"application/pdf": ".pdf",
|
||||
"application/zip": ".zip",
|
||||
"image/gif": ".gif",
|
||||
"image/jpeg": ".jpg",
|
||||
"image/png": ".png",
|
||||
"image/webp": ".webp",
|
||||
"text/calendar": ".ics",
|
||||
"text/csv": ".csv",
|
||||
"text/html": ".html",
|
||||
"text/plain": ".txt"
|
||||
}[normalized] || ""
|
||||
);
|
||||
}
|
||||
|
||||
function buildAttachmentDisposition(filename) {
|
||||
const fallback = String(filename || "attachment")
|
||||
.replace(/[^\x20-\x7e]/g, "_")
|
||||
.replace(/["\\]/g, "_");
|
||||
|
||||
return `attachment; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "attachment")}`;
|
||||
}
|
||||
|
||||
function buildInlineDisposition(filename) {
|
||||
const fallback = String(filename || "file")
|
||||
.replace(/[^\x20-\x7e]/g, "_")
|
||||
.replace(/["\\]/g, "_");
|
||||
|
||||
return `inline; filename="${fallback}"; filename*=UTF-8''${encodeURIComponent(filename || "file")}`;
|
||||
}
|
||||
|
||||
function basenameFromKey(key) {
|
||||
const value = String(key || "");
|
||||
const parts = value.split("/").filter(Boolean);
|
||||
return parts[parts.length - 1] || "file";
|
||||
}
|
||||
|
||||
function guessObjectContentType(key) {
|
||||
const normalizedKey = String(key || "").toLowerCase();
|
||||
|
||||
if (normalizedKey.endsWith(".json")) {
|
||||
return "application/json";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".csv")) {
|
||||
return "text/csv";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
|
||||
return "text/html";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".txt") || normalizedKey.endsWith(".log") || normalizedKey.endsWith(".md")) {
|
||||
return "text/plain";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".png")) {
|
||||
return "image/png";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".jpg") || normalizedKey.endsWith(".jpeg")) {
|
||||
return "image/jpeg";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".gif")) {
|
||||
return "image/gif";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".webp")) {
|
||||
return "image/webp";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".svg")) {
|
||||
return "image/svg+xml";
|
||||
}
|
||||
|
||||
if (normalizedKey.endsWith(".pdf")) {
|
||||
return "application/pdf";
|
||||
}
|
||||
|
||||
return "application/octet-stream";
|
||||
}
|
||||
|
||||
function resolveS3PreviewType(contentType, key) {
|
||||
const normalizedType = String(contentType || "").toLowerCase();
|
||||
const normalizedKey = String(key || "").toLowerCase();
|
||||
|
||||
if (normalizedType.includes("json") || normalizedKey.endsWith(".json")) {
|
||||
return "json";
|
||||
}
|
||||
|
||||
if (normalizedType.startsWith("image/")) {
|
||||
return "image";
|
||||
}
|
||||
|
||||
if (normalizedType.includes("html") || normalizedKey.endsWith(".html") || normalizedKey.endsWith(".htm")) {
|
||||
return "html";
|
||||
}
|
||||
|
||||
if (
|
||||
normalizedType.startsWith("text/") ||
|
||||
[".txt", ".log", ".csv", ".xml", ".yml", ".yaml", ".md"].some((extension) => normalizedKey.endsWith(extension))
|
||||
) {
|
||||
return "text";
|
||||
}
|
||||
|
||||
return "binary";
|
||||
}
|
||||
|
||||
function summarizeHealthResult({ icon, panel, label, result, count, detail, noun }) {
|
||||
if (result.status === "fulfilled") {
|
||||
return {
|
||||
ok: true,
|
||||
icon,
|
||||
panel,
|
||||
label,
|
||||
count,
|
||||
summary: `${count} ${noun}${count === 1 ? "" : "s"}`,
|
||||
detail
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: false,
|
||||
icon,
|
||||
panel,
|
||||
label,
|
||||
count: 0,
|
||||
summary: "Needs attention",
|
||||
detail: result.reason?.message || detail
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeTimestamp(value) {
|
||||
if (!value) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
return Number.isNaN(date.getTime()) ? "" : date.toISOString();
|
||||
}
|
||||
|
||||
function normalizeText(value) {
|
||||
return String(value || "")
|
||||
.replace(/\r\n/g, "\n")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function buildPreview(textContent, renderedHtml) {
|
||||
const source = (textContent || stripTags(renderedHtml)).replace(/\s+/g, " ").trim();
|
||||
|
||||
if (!source) {
|
||||
return "No message preview available.";
|
||||
}
|
||||
|
||||
return source.length > 220 ? `${source.slice(0, 217)}...` : source;
|
||||
}
|
||||
|
||||
function buildLogPreview(message) {
|
||||
const source = String(message || "")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
|
||||
if (!source) {
|
||||
return "No log preview available.";
|
||||
}
|
||||
|
||||
return source.length > 220 ? `${source.slice(0, 217)}...` : source;
|
||||
}
|
||||
|
||||
function clampNumber(value, fallback, min, max) {
|
||||
const parsed = Number(value);
|
||||
|
||||
if (!Number.isFinite(parsed)) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
return Math.min(Math.max(parsed, min), max);
|
||||
}
|
||||
|
||||
function buildRenderedHtml(html) {
|
||||
if (!html) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const value = String(html);
|
||||
const hasDocument = /<html[\s>]/i.test(value) || /<!doctype/i.test(value);
|
||||
|
||||
if (hasDocument) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base target="_blank">
|
||||
<style>body{margin:0;padding:16px;font-family:Arial,sans-serif;background:#fff;}</style>
|
||||
</head>
|
||||
<body>${value}</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
function stripTags(value) {
|
||||
return String(value || "")
|
||||
.replace(/<style[\s\S]*?<\/style>/gi, " ")
|
||||
.replace(/<script[\s\S]*?<\/script>/gi, " ")
|
||||
.replace(/<[^>]+>/g, " ");
|
||||
}
|
||||
|
||||
function formatAddressList(addresses) {
|
||||
if (!addresses?.value?.length) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return addresses.value
|
||||
.map(({ name, address }) => {
|
||||
if (name && address) {
|
||||
return `${name} <${address}>`;
|
||||
}
|
||||
|
||||
return address || name || "";
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
}
|
||||
|
||||
async function loadMessageAttachment(messageId, attachmentIndex) {
|
||||
const parsed = await parseSesMessageById(messageId);
|
||||
|
||||
if (!parsed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const attachment = parsed.attachments?.[attachmentIndex];
|
||||
|
||||
if (!attachment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
filename: resolveAttachmentFilename(attachment, attachmentIndex),
|
||||
contentType: attachment.contentType || "application/octet-stream",
|
||||
content: Buffer.isBuffer(attachment.content) ? attachment.content : Buffer.from(attachment.content || "")
|
||||
};
|
||||
}
|
||||
|
||||
async function loadS3ObjectDownload({ bucket, key }) {
|
||||
const response = await s3Client.send(
|
||||
new GetObjectCommand({
|
||||
Bucket: bucket,
|
||||
Key: key
|
||||
})
|
||||
);
|
||||
|
||||
return {
|
||||
filename: basenameFromKey(key),
|
||||
contentType: response.ContentType || guessObjectContentType(key),
|
||||
content: Buffer.from(await response.Body.transformToByteArray())
|
||||
};
|
||||
}
|
||||
|
||||
export {
|
||||
buildAttachmentDisposition,
|
||||
buildInlineDisposition,
|
||||
clampNumber,
|
||||
findSesMessageById,
|
||||
loadLogEvents,
|
||||
loadLogGroups,
|
||||
loadLogStreams,
|
||||
loadMessageAttachment,
|
||||
loadMessages,
|
||||
loadS3Buckets,
|
||||
loadS3ObjectDownload,
|
||||
loadS3ObjectPreview,
|
||||
loadS3Objects,
|
||||
loadSecretValue,
|
||||
loadSecrets,
|
||||
loadServiceHealthSummary
|
||||
};
|
||||
495
_reference/localEmailViewer/server/page.js
Normal file
495
_reference/localEmailViewer/server/page.js
Normal file
@@ -0,0 +1,495 @@
|
||||
import {
|
||||
CLOUDWATCH_DEFAULT_GROUP,
|
||||
CLOUDWATCH_DEFAULT_LIMIT,
|
||||
CLOUDWATCH_DEFAULT_WINDOW_MS,
|
||||
CLOUDWATCH_ENDPOINT,
|
||||
CLOUDWATCH_REGION,
|
||||
DEFAULT_REFRESH_MS,
|
||||
S3_DEFAULT_BUCKET,
|
||||
S3_ENDPOINT,
|
||||
S3_REGION,
|
||||
SECRETS_ENDPOINT,
|
||||
SECRETS_REGION,
|
||||
SES_ENDPOINT
|
||||
} from "./config.js";
|
||||
|
||||
function getClientConfig() {
|
||||
return {
|
||||
defaultRefreshMs: DEFAULT_REFRESH_MS,
|
||||
endpoint: SES_ENDPOINT,
|
||||
cloudWatchEndpoint: CLOUDWATCH_ENDPOINT,
|
||||
cloudWatchRegion: CLOUDWATCH_REGION,
|
||||
secretsEndpoint: SECRETS_ENDPOINT,
|
||||
secretsRegion: SECRETS_REGION,
|
||||
s3Endpoint: S3_ENDPOINT,
|
||||
s3Region: S3_REGION,
|
||||
defaultS3Bucket: S3_DEFAULT_BUCKET,
|
||||
defaultLogGroup: CLOUDWATCH_DEFAULT_GROUP,
|
||||
defaultLogWindowMs: CLOUDWATCH_DEFAULT_WINDOW_MS,
|
||||
defaultLogLimit: CLOUDWATCH_DEFAULT_LIMIT
|
||||
};
|
||||
}
|
||||
|
||||
function renderHtml() {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LocalStack Inspector</title>
|
||||
<style>${renderStyles()}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="hero">
|
||||
<div class="heroShell">
|
||||
<div class="heroIdentity">
|
||||
<p class="eyebrow">LocalStack Toolbox</p>
|
||||
<h1>Inspector</h1>
|
||||
</div>
|
||||
<div class="heroTopRow">
|
||||
<div class="heroActions">
|
||||
<button id="themeToggle" class="ghost themeToggle" type="button" aria-pressed="false">☀️ Light theme</button>
|
||||
<button id="resetStateButton" class="ghost" type="button">🧹 Reset saved state</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="heroStatusRow">
|
||||
<span class="heroStatusLabel">Stack</span>
|
||||
<div id="healthStrip" class="healthStrip" aria-live="polite"></div>
|
||||
<button id="healthRefreshButton" class="mini healthRefreshButton" type="button" title="Refresh service health" aria-label="Refresh service health">🩺</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="emailsPanel" class="workspacePanel">
|
||||
<section class="toolControls">
|
||||
<div class="row">
|
||||
<button id="refreshButton" class="primary" type="button">🔄 Refresh</button>
|
||||
<label class="chip"><input id="autoToggle" type="checkbox" checked> Live refresh</label>
|
||||
<label class="chip">Every
|
||||
<select id="intervalSelect">
|
||||
<option value="5000">5s</option>
|
||||
<option value="10000" selected>10s</option>
|
||||
<option value="15000">15s</option>
|
||||
<option value="30000">30s</option>
|
||||
<option value="60000">60s</option>
|
||||
</select>
|
||||
</label>
|
||||
<span id="statusChip" class="status">Waiting for first refresh...</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="searchInput" class="search" type="search" placeholder="Search subject, sender, preview..." autocomplete="off">
|
||||
<button id="clearSearchButton" class="ghost" type="button">Clear</button>
|
||||
<button id="expandAllButton" class="ghost" type="button">Open all</button>
|
||||
<button id="collapseAllButton" class="ghost" type="button">Close all</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats">
|
||||
<article class="stat"><span>Total</span><strong id="totalStat">0</strong><small id="visibleStat">0 visible</small></article>
|
||||
<article class="stat"><span>New</span><strong id="newStat">0</strong><small>New since last refresh</small></article>
|
||||
<article class="stat"><span>Newest</span><strong id="newestStat" class="small">No messages</strong><small id="updatedStat">Not refreshed yet</small></article>
|
||||
<article class="stat"><span>Fetch</span><strong id="fetchStat" class="small">Idle</strong><small id="fetchDetail">Endpoint: ${escapeHtml(SES_ENDPOINT)}</small></article>
|
||||
</section>
|
||||
|
||||
<div id="emailsContentPane" class="contentPane">
|
||||
<div class="contentStack">
|
||||
<div id="banner" class="banner" hidden></div>
|
||||
<div id="empty" class="empty" hidden></div>
|
||||
<section id="list" class="list" aria-live="polite"></section>
|
||||
<div class="paneTopWrap">
|
||||
<button id="scrollToTopButton" class="paneTopButton" type="button" title="Scroll to top" aria-label="Scroll to top">↑</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">↑</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">↑</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">↑</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, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
export { getClientConfig, renderHtml };
|
||||
424
_reference/testPlans/commission-based-cut-manual-test-plan.md
Normal file
424
_reference/testPlans/commission-based-cut-manual-test-plan.md
Normal file
@@ -0,0 +1,424 @@
|
||||
# Commission-Based Cut Feature Manual Test Plan
|
||||
|
||||
## Purpose
|
||||
Use this guide to manually test the commission-based cut feature from an end-user point of view.
|
||||
|
||||
This plan is written for a non-technical tester. Follow the steps exactly as written and mark each scenario as Pass or Fail.
|
||||
|
||||
## What You Need Before You Start
|
||||
- A login that can open `Manage my Shop`, `Jobs`, and `Time Tickets`.
|
||||
- At least 2 active employees in the shop.
|
||||
- At least 1 converted repair order that already has labor lines on it.
|
||||
- If possible, use a simple test job where the labor sale rates are easy to calculate.
|
||||
- A notebook, spreadsheet, or screenshot folder to record what happened.
|
||||
|
||||
## Recommended Easy-Math Test Data
|
||||
If you can choose your own test job, use something simple like this:
|
||||
|
||||
- Body sale rate: `$100.00`
|
||||
- Refinish sale rate: `$120.00`
|
||||
- Mechanical sale rate: `$80.00`
|
||||
- 1 Body labor line with `10.0` hours
|
||||
- 1 Refinish labor line with `4.0` hours
|
||||
|
||||
This makes the expected payout easy to check:
|
||||
|
||||
- `40%` of `$100.00` = `$40.00`
|
||||
- `30%` of `$120.00` = `$36.00`
|
||||
|
||||
## Important Navigation Notes
|
||||
- Team setup is under `Manage my Shop` > `Employee Teams`.
|
||||
- Team assignment happens on the job line grid in the `Team` column.
|
||||
- Automatic payout happens from the job's `Labor Allocations` card using the `Pay All` button.
|
||||
- If your shop uses task presets, the `Flag Hours` button can preview the payout method before committing tickets.
|
||||
|
||||
---
|
||||
|
||||
## Scenario 1: Create a Simple Commission Team
|
||||
### Goal
|
||||
Confirm a team member can be set to commission and saved successfully.
|
||||
|
||||
### Steps
|
||||
1. Sign in.
|
||||
2. Click `Manage my Shop`.
|
||||
3. Click the `Employee Teams` tab.
|
||||
4. Click `New Team`.
|
||||
5. In `Team Name`, type `Commission Team Test`.
|
||||
6. Make sure `Active` is turned on.
|
||||
7. In `Max Load`, enter `10`.
|
||||
8. Click `New Team Member`.
|
||||
9. In `Employee`, choose an active employee.
|
||||
10. In `Allocation %`, enter `100`.
|
||||
11. In `Payout Method`, choose `Commission %`.
|
||||
12. In each commission field that appears, enter a value.
|
||||
13. For the main labor types you plan to test, use these values:
|
||||
14. Enter `40` for Body.
|
||||
15. Enter `30` for Refinish.
|
||||
16. Enter `25` for Mechanical.
|
||||
17. Enter `20` for Frame.
|
||||
18. Enter `15` for Glass.
|
||||
19. Fill in the remaining commission boxes with any valid number from `0` to `100`.
|
||||
20. Click `Save`.
|
||||
|
||||
### Expected Result
|
||||
- The team saves successfully.
|
||||
- The team stays visible in the Employee Teams list.
|
||||
- The team member card shows a `Commission` tag.
|
||||
- The `Allocation Total` shows `100%`.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 2: Allocation Total Must Equal 100%
|
||||
### Goal
|
||||
Confirm the system blocks a team that does not total exactly 100%.
|
||||
|
||||
### Steps
|
||||
1. Stay on the same team.
|
||||
2. Change `Allocation %` from `100` to `90`.
|
||||
3. Click `Save`.
|
||||
4. Change `Allocation %` from `90` to `110`.
|
||||
5. Click `Save`.
|
||||
6. Change `Allocation %` back to `100`.
|
||||
7. Click `Save` again.
|
||||
|
||||
### Expected Result
|
||||
- When the total is `90%`, the system should not save.
|
||||
- When the total is `110%`, the system should not save.
|
||||
- The page should show that the allocation total is not correct.
|
||||
- When the total is set back to `100%`, the save should succeed.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 3: The Same Employee Cannot Be Added Twice
|
||||
### Goal
|
||||
Confirm the same employee cannot appear twice on one team.
|
||||
|
||||
### Steps
|
||||
1. Open the same team again.
|
||||
2. Click `New Team Member`.
|
||||
3. Choose the same employee already used on the team.
|
||||
4. Enter any valid allocation amount.
|
||||
5. Choose `Commission %`.
|
||||
6. Fill in all required commission fields.
|
||||
7. Click `Save`.
|
||||
|
||||
### Expected Result
|
||||
- The system should block the save.
|
||||
- The team should not save with the same employee listed twice.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 4: Switching Between Hourly and Commission Changes the Input Style
|
||||
### Goal
|
||||
Confirm the rate section changes correctly when the payout method changes.
|
||||
|
||||
### Steps
|
||||
1. Open the same team again.
|
||||
2. On the team member row, change `Payout Method` from `Commission %` to `Hourly`.
|
||||
3. Look at the rate fields that appear.
|
||||
4. Change `Payout Method` back to `Commission %`.
|
||||
5. Look at the rate fields again.
|
||||
|
||||
### Expected Result
|
||||
- In `Hourly` mode, the rate boxes should behave like money/rate fields.
|
||||
- In `Commission %` mode, the rate boxes should behave like percentage fields.
|
||||
- The screen should clearly show you are editing the correct type of value.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 5: Boundary Values for Commission %
|
||||
### Goal
|
||||
Confirm the feature accepts valid boundary values and blocks invalid ones.
|
||||
|
||||
### Steps
|
||||
1. Open the team again.
|
||||
2. In one commission box, enter `0`.
|
||||
3. In another commission box, enter `100`.
|
||||
4. Click `Save`.
|
||||
5. Try to type a value above `100` in one of the commission boxes.
|
||||
6. Try to type a negative value in one of the commission boxes.
|
||||
|
||||
### Expected Result
|
||||
- `0` should be accepted.
|
||||
- `100` should be accepted.
|
||||
- Values above `100` should not be allowed or should fail validation.
|
||||
- Negative values should not be allowed or should fail validation.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 6: Inactive Teams Should Not Be Offered for New Assignment
|
||||
### Goal
|
||||
Confirm inactive teams do not appear as normal team choices.
|
||||
|
||||
### Steps
|
||||
1. Open the team again.
|
||||
2. Turn `Active` off.
|
||||
3. Click `Save`.
|
||||
4. Open a converted repair order.
|
||||
5. Go to the job lines area where the `Team` column is visible.
|
||||
6. Click inside the `Team` field on any labor line.
|
||||
7. Open the team drop-down list.
|
||||
8. Look for `Commission Team Test`.
|
||||
9. Go back to `Manage my Shop` > `Employee Teams`.
|
||||
10. Turn `Active` back on.
|
||||
11. Click `Save`.
|
||||
12. Return to the same job line and open the `Team` drop-down again.
|
||||
|
||||
### Expected Result
|
||||
- When the team is inactive, it should not appear as a normal assignment choice.
|
||||
- After turning it back on, it should appear again.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 7: Assign the Commission Team to a Labor Line
|
||||
### Goal
|
||||
Confirm the team can be assigned to a job line from the job screen.
|
||||
|
||||
### Steps
|
||||
1. Open a converted repair order that has labor lines.
|
||||
2. Find a labor line in the job line grid.
|
||||
3. In the `Team` column, click the blank area or the current team name.
|
||||
4. From the drop-down list, choose `Commission Team Test`.
|
||||
5. Click outside the field so it saves.
|
||||
6. Repeat for at least 1 Body line and 1 Refinish line if both exist.
|
||||
|
||||
### Expected Result
|
||||
- The selected team name should appear in the `Team` column.
|
||||
- The assignment should stay in place after the screen refreshes.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 8: Pay All Creates Commission-Based Tickets
|
||||
### Goal
|
||||
Confirm `Pay All` creates time tickets using the commission rate, not a flat hourly rate.
|
||||
|
||||
### Steps
|
||||
1. Use a converted repair order that has:
|
||||
2. At least 1 labor line assigned to `Commission Team Test`.
|
||||
3. Known labor sale rates on the job.
|
||||
4. No existing time tickets for the same employee and labor type.
|
||||
5. Open that repair order.
|
||||
6. Go to the labor/payroll area where the `Labor Allocations` card is visible.
|
||||
7. Write down the following before you click anything:
|
||||
8. The labor type on the line.
|
||||
9. The sold labor rate for that labor type.
|
||||
10. The hours on that line.
|
||||
11. The commission % you entered for that labor type on the team.
|
||||
12. Click `Pay All`.
|
||||
13. Wait for the success message.
|
||||
14. Look at the `Time Tickets` list on the same screen.
|
||||
15. Find the new ticket created for that employee.
|
||||
|
||||
### Expected Result
|
||||
- The system should show `All hours paid out successfully.`
|
||||
- A new time ticket should appear.
|
||||
- The ticket rate should equal:
|
||||
- `sale rate x commission %`
|
||||
- Example: if Body sale rate is `$100.00` and commission is `40%`, the ticket rate should be `$40.00`.
|
||||
- The productive hours should match the assigned labor hours for that employee.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 9: Different Labor Types Use Different Commission Rates
|
||||
### Goal
|
||||
Confirm the feature uses the correct commission % for each labor type.
|
||||
|
||||
### Steps
|
||||
1. Use a job that has at least:
|
||||
2. One Body labor line.
|
||||
3. One Refinish labor line.
|
||||
4. Make sure both lines are assigned to `Commission Team Test`.
|
||||
5. Confirm your team is set up like this:
|
||||
6. Body = `40%`
|
||||
7. Refinish = `30%`
|
||||
8. Open the job's `Labor Allocations` area.
|
||||
9. Click `Pay All`.
|
||||
10. Review the new time tickets that are created.
|
||||
|
||||
### Expected Result
|
||||
- The Body ticket should use the Body commission %.
|
||||
- The Refinish ticket should use the Refinish commission %.
|
||||
- Example:
|
||||
- If Body sale rate is `$100.00`, Body payout rate should be `$40.00`.
|
||||
- If Refinish sale rate is `$120.00`, Refinish payout rate should be `$36.00`.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 10: Mixed Team With Commission and Hourly Members
|
||||
### Goal
|
||||
Confirm one team can contain both commission and hourly members, and each person is paid correctly.
|
||||
|
||||
### Steps
|
||||
1. Open `Manage my Shop` > `Employee Teams`.
|
||||
2. Open `Commission Team Test`.
|
||||
3. Edit the first team member:
|
||||
4. Keep Employee 1 as `Commission %`.
|
||||
5. Change `Allocation %` to `60`.
|
||||
6. Make sure Body commission is still `40`.
|
||||
7. Add a second team member.
|
||||
8. Choose a different active employee.
|
||||
9. Set `Allocation %` to `40`.
|
||||
10. Set `Payout Method` to `Hourly`.
|
||||
11. Enter an hourly rate for each required labor type.
|
||||
12. For Body, use `$25.00`.
|
||||
13. Fill in the other required hourly boxes with valid values.
|
||||
14. Make sure the total allocation shows `100%`.
|
||||
15. Click `Save`.
|
||||
16. Assign this team to a Body line with `10.0` hours.
|
||||
17. Click `Pay All`.
|
||||
18. Review the new time tickets.
|
||||
|
||||
### Expected Result
|
||||
- Employee 1 should receive `60%` of the hours at the commission-derived rate.
|
||||
- Employee 2 should receive `40%` of the hours at the hourly rate you entered.
|
||||
- Example with a 10-hour Body line and `$100.00` sale rate:
|
||||
- Employee 1 should get `6.0` hours at `$40.00`.
|
||||
- Employee 2 should get `4.0` hours at `$25.00`.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 11: Pay All Only Adds the Remaining Hours
|
||||
### Goal
|
||||
Confirm `Pay All` does not duplicate hours that were already paid.
|
||||
|
||||
### Steps
|
||||
1. Use a job with one Body line assigned to `Commission Team Test`.
|
||||
2. Make sure the line has `10.0` hours.
|
||||
3. In the `Time Tickets` card, click `Enter New Time Ticket`.
|
||||
4. Create a manual time ticket for the same employee and the same labor type.
|
||||
5. Enter `4.0` productive hours.
|
||||
6. Save the manual time ticket.
|
||||
7. Go back to the `Labor Allocations` card.
|
||||
8. Click `Pay All`.
|
||||
9. Review the new ticket that is created.
|
||||
|
||||
### Expected Result
|
||||
- The system should only create the remaining unpaid hours.
|
||||
- In this example, it should add `6.0` hours, not `10.0`.
|
||||
- The payout rate should still use the current commission-based rate.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 12: Unassigned Labor Lines Should Block Automatic Payout
|
||||
### Goal
|
||||
Confirm `Pay All` does not silently pay lines that do not have a team assigned.
|
||||
|
||||
### Steps
|
||||
1. Open a converted repair order with at least 2 labor lines.
|
||||
2. Assign `Commission Team Test` to one line.
|
||||
3. Leave the second labor line with no team assigned.
|
||||
4. Go to the `Labor Allocations` card.
|
||||
5. Click `Pay All`.
|
||||
|
||||
### Expected Result
|
||||
- The system should not quietly pay everything.
|
||||
- You should see an error telling you that not all hours have been assigned.
|
||||
- The unassigned line should still need manual attention.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Scenario 13: Flag Hours Preview Shows the Correct Payout Method
|
||||
### Goal
|
||||
If your shop uses task presets, confirm the preview shows `Commission` for commission-based tickets.
|
||||
|
||||
### Steps
|
||||
1. Open a converted repair order.
|
||||
2. Go to the `Time Tickets` card.
|
||||
3. Click `Flag Hours`.
|
||||
4. Choose a task preset.
|
||||
5. Wait for the preview table to load.
|
||||
6. Review the `Payout Method` column in the preview.
|
||||
7. If the preview includes more than one employee, review each row.
|
||||
|
||||
### Expected Result
|
||||
- The preview table should load without error.
|
||||
- Rows for commission-based employees should show `Commission`.
|
||||
- Rows for hourly employees should show `Hourly`.
|
||||
- If there are unassigned hours, a warning should appear.
|
||||
|
||||
### Record
|
||||
- [ ] Pass
|
||||
- [ ] Fail
|
||||
- Notes:
|
||||
|
||||
---
|
||||
|
||||
## Quick Regression Checklist
|
||||
- [ ] I can create a commission-based team.
|
||||
- [ ] Allocation must total exactly 100%.
|
||||
- [ ] The same employee cannot be added twice to one team.
|
||||
- [ ] Inactive teams do not appear for normal assignment.
|
||||
- [ ] A team can be assigned to job lines from the `Team` column.
|
||||
- [ ] `Pay All` creates commission-based tickets correctly.
|
||||
- [ ] Different labor types use different commission percentages.
|
||||
- [ ] Mixed commission and hourly teams calculate correctly.
|
||||
- [ ] `Pay All` only creates the remaining unpaid hours.
|
||||
- [ ] Unassigned labor lines stop automatic payout.
|
||||
- [ ] `Flag Hours` preview shows the correct payout method.
|
||||
|
||||
## Tester Sign-Off
|
||||
- Tester name:
|
||||
- Test date:
|
||||
- Environment:
|
||||
- Overall result:
|
||||
- Follow-up issues found:
|
||||
647
_reference/testPlans/select-component-test-plan.md
Normal file
647
_reference/testPlans/select-component-test-plan.md
Normal file
@@ -0,0 +1,647 @@
|
||||
# Ant Design Select.Option Deprecation - Manual Testing Plan
|
||||
**Branch:** `feature/IO-3544-Ant-Select-Deprecation`
|
||||
**Base Branch:** `master-AIO`
|
||||
**Jira:** IO-3544
|
||||
|
||||
## Overview
|
||||
This branch migrates all Ant Design `<Select.Option>` components to the new `options` prop pattern (required for Ant Design v5+). The deprecated `Select.Option` child component pattern has been replaced with the `options` array prop.
|
||||
|
||||
## What Changed
|
||||
- **Old Pattern:** `<Select><Select.Option value="x">Label</Select.Option></Select>`
|
||||
- **New Pattern:** `<Select options={[{ value: "x", label: "Label" }]} />`
|
||||
- Search filtering updated from `optionFilterProp: "children"` to `optionFilterProp: "label"` or custom props
|
||||
- Custom filter functions updated to use `option.label` instead of `option.props.children`
|
||||
- Complex components with custom rendered content (tags, icons, styled elements) now use `label` prop with JSX
|
||||
|
||||
## Code Review Findings ✅
|
||||
**Validation completed on representative samples:**
|
||||
- ✅ Search functionality properly migrated (showSearch object syntax correct)
|
||||
- ✅ Custom rendered content (tags, badges, icons) preserved in label prop
|
||||
- ✅ Labor type selectors correctly implement all 14 types
|
||||
- ✅ Vendor search with favorites and discount tags working correctly
|
||||
- ✅ Employee selectors with flat_rate/straight_time tags properly structured
|
||||
- ✅ Job search with owner display and status tags correctly migrated
|
||||
- ✅ CiecaSelect utility updated to return options array format
|
||||
- ✅ Performance optimizations added (useMemo in jobs-convert-button)
|
||||
- ✅ Custom optionFilterProp values used where needed (e.g., "name", "search")
|
||||
|
||||
## Testing Strategy
|
||||
For each select component below, verify:
|
||||
1. ✅ **Options Display:** All options appear correctly
|
||||
2. ✅ **Selection:** Can select an option and value is saved
|
||||
3. ✅ **Search/Filter:** Search functionality works (if applicable)
|
||||
4. ✅ **Visual Rendering:** Labels, tags, and custom content display properly (especially vendor discounts, employee tags, job status badges)
|
||||
5. ✅ **Form Integration:** Value persists and submits correctly
|
||||
6. ✅ **Custom Search Props:** Components using custom optionFilterProp (name, search) work correctly
|
||||
|
||||
---
|
||||
|
||||
## Component Test Cases
|
||||
|
||||
### 1. Employee Assignment & Allocation
|
||||
**Files Modified:**
|
||||
- `allocations-assignment.component.jsx`
|
||||
- `allocations-bulk-assignment.component.jsx`
|
||||
- `labor-allocations-adjustment-edit.component.jsx`
|
||||
- `employee-search-select.component.jsx`
|
||||
- `employee-search-select-email.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Job Line Allocation:** Assign employee to job line
|
||||
- Navigate to a job → Job Lines tab
|
||||
- Click allocate hours to an employee
|
||||
- Verify employee dropdown shows full names
|
||||
- Search for employee by name
|
||||
- Verify selection saves
|
||||
|
||||
- [ ] **Bulk Assignment:** Assign multiple job lines to employee
|
||||
- Select multiple job lines
|
||||
- Open bulk assignment modal
|
||||
- Verify employee selector works
|
||||
- Verify employee number, name, and tags (flat rate/straight time) display
|
||||
|
||||
- [ ] **Labor Allocations Adjustment:** Edit labor allocations
|
||||
- Navigate to labor allocations
|
||||
- Edit adjustment form
|
||||
- Verify employee dropdowns work with search
|
||||
|
||||
- [ ] **Employee Search Select with Email:**
|
||||
- Test in any form using employee email selector (uses custom `optionFilterProp: "search"`)
|
||||
- Search by employee number, first name, or last name
|
||||
- Verify employee number, name display correctly
|
||||
- **Critical:** Verify green tag shows "Flat Rate" or "Straight Time"
|
||||
- Verify blue email tag displays when showEmail=true
|
||||
- Test that search matches against concatenated string
|
||||
|
||||
---
|
||||
|
||||
### 2. Job Management
|
||||
**Files Modified:**
|
||||
- `job-search-select.component.jsx`
|
||||
- `jobs-create-jobs-info.component.jsx`
|
||||
- `jobs-detail-general.component.jsx`
|
||||
- `jobs-detail-header-actions.component.jsx`
|
||||
- `jobs-convert-button.component.jsx`
|
||||
- `jobs-close-lines.component.jsx`
|
||||
- `job-3rd-party-modal.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Job Search Select:** Search and select jobs
|
||||
- Any form with job selector (e.g., linking jobs, referencing jobs)
|
||||
- Search by RO number, customer name, or vehicle (uses `filterOption: false` with custom search)
|
||||
- **Critical:** Verify job label shows: `[CLM_NO |] RO_NUMBER | Owner Name | Year Make Model`
|
||||
- **Critical:** Verify status tag displays (e.g., "OPEN", "CLOSED")
|
||||
- Verify loading spinner appears during search
|
||||
- Test with claim numbers visible (clm_no prop)
|
||||
- Verify selection works
|
||||
|
||||
- [ ] **Create Job Form:**
|
||||
- Navigate to Create New Job
|
||||
- Test all dropdowns in job info section:
|
||||
- Job type selection
|
||||
- Status selection
|
||||
- Department/class selection
|
||||
- Estimator selection
|
||||
- File handler selection
|
||||
- Verify options display and selection works
|
||||
|
||||
- [ ] **Job Detail General Tab:**
|
||||
- Open any job → General tab
|
||||
- Test select dropdowns:
|
||||
- Status select
|
||||
- Department/class select
|
||||
- Estimator select
|
||||
- File handler select
|
||||
- Responsibility center select
|
||||
- Verify all dropdowns work with search
|
||||
|
||||
- [ ] **Job Convert Button:**
|
||||
- Open estimate job
|
||||
- Click convert to RO
|
||||
- Verify conversion type dropdown works
|
||||
- Test all options in conversion modal
|
||||
|
||||
- [ ] **Close Job Lines:**
|
||||
- Open converted job
|
||||
- Go to close/finalize
|
||||
- Test location selector in close lines modal
|
||||
- Verify cost center dropdowns
|
||||
|
||||
- [ ] **Third Party Modal:**
|
||||
- Open job → Third party integration
|
||||
- Test company/payer selector
|
||||
- Verify dropdown options and selection
|
||||
|
||||
---
|
||||
|
||||
### 3. Job Lines & Labor
|
||||
**Files Modified:**
|
||||
- `job-lines-upsert-modal.component.jsx`
|
||||
- `job-line-bulk-assign.component.jsx`
|
||||
- `job-line-convert-to-labor.component.jsx`
|
||||
- `job-line-dispatch-button.component.jsx`
|
||||
- `job-line-status-popup.component.jsx`
|
||||
- `job-line-team-assignment.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Add/Edit Job Line:**
|
||||
- Open job → Add new line
|
||||
- Test all dropdowns:
|
||||
- **Labor type selector** (LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1-LA4)
|
||||
- Location selector
|
||||
- Status selector
|
||||
- Skill/category selector
|
||||
- Verify 14 labor type options display correctly
|
||||
- Test search functionality
|
||||
|
||||
- [ ] **Bulk Line Assignment:**
|
||||
- Select multiple job lines
|
||||
- Open bulk assign
|
||||
- Test team assignment dropdown
|
||||
|
||||
- [ ] **Convert to Labor:**
|
||||
- Select part line
|
||||
- Convert to labor
|
||||
- Test labor type dropdown (LAA, LAB, etc.)
|
||||
- Verify all 14 types available
|
||||
|
||||
- [ ] **Line Dispatch:**
|
||||
- Open dispatch modal for job line
|
||||
- Test team/employee selector
|
||||
|
||||
- [ ] **Line Status Popup:**
|
||||
- Change job line status
|
||||
- Verify status dropdown options
|
||||
|
||||
- [ ] **Team Assignment:**
|
||||
- Assign team to job line
|
||||
- Test team selector dropdown
|
||||
|
||||
---
|
||||
|
||||
### 4. Owners & Vehicles
|
||||
**Files Modified:**
|
||||
- `owner-search-select.component.jsx`
|
||||
- `vehicle-search-select.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Owner Search Select:**
|
||||
- Any form with owner selector
|
||||
- Search by owner name
|
||||
- Verify owner options display
|
||||
- Test selection and search
|
||||
|
||||
- [ ] **Vehicle Search Select:**
|
||||
- Any form with vehicle selector
|
||||
- Search by VIN, license plate, or vehicle description
|
||||
- Verify vehicle options display correctly
|
||||
- Test selection works
|
||||
|
||||
---
|
||||
|
||||
### 5. Vendors & Parts
|
||||
**Files Modified:**
|
||||
- `vendor-search-select.component.jsx`
|
||||
- `parts-order-modal.component.jsx`
|
||||
- `parts-receive-modal.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Vendor Search Select:**
|
||||
- Navigate to bills or parts ordering
|
||||
- Test vendor selector
|
||||
- Search for vendor by name (uses custom `optionFilterProp: "name"`)
|
||||
- **Critical:** Verify favorites (with heart icon) display at top
|
||||
- **Critical:** Verify discount tags show correctly (e.g., "10%")
|
||||
- **Critical:** Verify vendor tags display
|
||||
- Verify phone numbers display if showPhone enabled
|
||||
- Test selection saves discount value to form
|
||||
|
||||
- [ ] **Parts Order Modal:**
|
||||
- Order parts for a job
|
||||
- Test all dropdowns in order form:
|
||||
- Vendor selector
|
||||
- Status selector
|
||||
- Priority selector
|
||||
- Verify options and selection
|
||||
|
||||
- [ ] **Parts Receive Modal:**
|
||||
- Receive parts
|
||||
- Test selectors in receive form
|
||||
- Verify dropdown functionality
|
||||
|
||||
---
|
||||
|
||||
### 6. Bills & Payments
|
||||
**Files Modified:**
|
||||
- `bill-form.component.jsx`
|
||||
- `bill-form-lines.component.jsx`
|
||||
- `bill-form-lines-extended.formitem.component.jsx`
|
||||
- `payment-form.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Bill Entry Form:**
|
||||
- Navigate to Bills → Add New Bill
|
||||
- Test all dropdowns:
|
||||
- Vendor selector
|
||||
- Payment terms selector
|
||||
- GL account selector
|
||||
- Tax code selector
|
||||
- Verify options display
|
||||
|
||||
- [ ] **Bill Lines:**
|
||||
- Add bill line
|
||||
- Test line-level selectors:
|
||||
- Job selector
|
||||
- Job line selector
|
||||
- Account selector
|
||||
- Location selector
|
||||
|
||||
- [ ] **Bill Lines Extended:**
|
||||
- Add extended bill line
|
||||
- Test responsibility center dropdown
|
||||
- Test cost center dropdown
|
||||
|
||||
- [ ] **Payment Form:**
|
||||
- Navigate to Payments → New Payment
|
||||
- Test all dropdowns:
|
||||
- Vendor selector
|
||||
- Payment method selector
|
||||
- Bank account selector
|
||||
- Verify selection works
|
||||
|
||||
---
|
||||
|
||||
### 7. Shop Configuration
|
||||
**Files Modified:**
|
||||
- `shop-info.general.component.jsx`
|
||||
- `shop-info.intake.component.jsx`
|
||||
- `shop-info.responsibilitycenters.component.jsx`
|
||||
- `shop-info.rostatus.component.jsx`
|
||||
- `shop-info.speedprint.component.jsx`
|
||||
- `shop-intellipay-config.component.jsx`
|
||||
- `shop-employees-form.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Shop Info - General:**
|
||||
- Navigate to Shop Settings → General
|
||||
- Test all dropdowns:
|
||||
- Timezone selector
|
||||
- Currency selector
|
||||
- Date format selector
|
||||
- Default options
|
||||
|
||||
- [ ] **Shop Info - Intake:**
|
||||
- Navigate to Shop Settings → Intake
|
||||
- Test intake form selectors
|
||||
- Verify default options work
|
||||
|
||||
- [ ] **Shop Info - Responsibility Centers:**
|
||||
- Navigate to Shop Settings → Responsibility Centers
|
||||
- Test cost center dropdowns
|
||||
- Test location selectors
|
||||
- **Note:** This file had major changes (980 lines modified)
|
||||
|
||||
- [ ] **Shop Info - RO Status:**
|
||||
- Navigate to Shop Settings → RO Status
|
||||
- Test status configuration dropdowns
|
||||
- **Note:** 120 lines modified
|
||||
|
||||
- [ ] **Shop Info - Speed Print:**
|
||||
- Navigate to Shop Settings → Speed Print
|
||||
- Test printer selector
|
||||
- Test template selector
|
||||
|
||||
- [ ] **IntelliPay Config:**
|
||||
- Navigate to Shop Settings → IntelliPay
|
||||
- Test configuration dropdowns (56 lines modified)
|
||||
|
||||
- [ ] **Shop Employees Form:**
|
||||
- Navigate to Shop Settings → Employees → Add/Edit
|
||||
- Test all dropdowns:
|
||||
- Role selector
|
||||
- Department selector
|
||||
- Pay type selector
|
||||
- Verify options display
|
||||
|
||||
---
|
||||
|
||||
### 8. Schedule & Time Tracking
|
||||
**Files Modified:**
|
||||
- `schedule-job-modal.component.jsx`
|
||||
- `schedule-manual-event.component.jsx`
|
||||
- `tech-job-clock-in-form.component.jsx`
|
||||
- `tech-job-clock-out-button.component.jsx`
|
||||
- `time-ticket-modal.component.jsx`
|
||||
- `time-ticket-shift-form.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Schedule Job Modal:**
|
||||
- Navigate to Schedule → Add Appointment
|
||||
- Test all dropdowns:
|
||||
- Job selector
|
||||
- Employee selector
|
||||
- Time slot selector
|
||||
- Duration selector
|
||||
|
||||
- [ ] **Schedule Manual Event:**
|
||||
- Add manual event to schedule
|
||||
- Test event type dropdown
|
||||
- Test employee selector
|
||||
|
||||
- [ ] **Tech Clock In Form:**
|
||||
- Navigate to Tech Portal
|
||||
- Clock in to job
|
||||
- Test job selector
|
||||
- Test operation selector
|
||||
|
||||
- [ ] **Tech Clock Out:**
|
||||
- Clock out from job
|
||||
- Test reason selector (if applicable)
|
||||
- Verify dropdown works
|
||||
|
||||
- [ ] **Time Ticket Modal:**
|
||||
- Enter/edit time ticket
|
||||
- Test all dropdowns:
|
||||
- Employee selector
|
||||
- Job selector
|
||||
- Operation selector
|
||||
|
||||
- [ ] **Time Ticket Shift Form:**
|
||||
- Manage shift
|
||||
- Test shift type selector
|
||||
- Test employee selector
|
||||
|
||||
---
|
||||
|
||||
### 9. Contracts & Courtesy Cars
|
||||
**Files Modified:**
|
||||
- `contract-convert-to-ro.component.jsx`
|
||||
- `contract-status-select.component.jsx`
|
||||
- `courtesy-car-readiness-select.component.jsx`
|
||||
- `courtesy-car-status-select.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Contract Convert to RO:**
|
||||
- Open contract
|
||||
- Convert to RO
|
||||
- Test conversion options dropdown
|
||||
|
||||
- [ ] **Contract Status Select:**
|
||||
- Change contract status
|
||||
- Test status options:
|
||||
- New
|
||||
- Out
|
||||
- Returned
|
||||
- Verify all 3 status options work
|
||||
|
||||
- [ ] **Courtesy Car Readiness:**
|
||||
- Navigate to Courtesy Cars
|
||||
- Change car readiness
|
||||
- Test readiness options:
|
||||
- Ready
|
||||
- Not Ready
|
||||
- Verify both options work
|
||||
|
||||
- [ ] **Courtesy Car Status:**
|
||||
- Change courtesy car status
|
||||
- Test all status options:
|
||||
- In
|
||||
- In Service
|
||||
- Out
|
||||
- Sold
|
||||
- Lease Return
|
||||
- Unavailable
|
||||
- Verify all 6 status options work
|
||||
|
||||
---
|
||||
|
||||
### 10. Email & Communication
|
||||
**Files Modified:**
|
||||
- `email-overlay.component.jsx`
|
||||
- `chat-tag-ro.component.jsx`
|
||||
- `parts-shop-info-email-presets.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Email Overlay:**
|
||||
- Send email from any feature
|
||||
- Test all dropdowns:
|
||||
- From email selector (current user, shop email, custom emails)
|
||||
- Template selector
|
||||
- Priority selector
|
||||
- Verify custom from emails display correctly
|
||||
|
||||
- [ ] **Chat Tag RO:**
|
||||
- Open chat
|
||||
- Tag to RO
|
||||
- Test RO selector dropdown
|
||||
|
||||
- [ ] **Parts Shop Email Presets:**
|
||||
- Navigate to Parts Settings → Email Presets
|
||||
- Test preset selector
|
||||
- Verify options display
|
||||
|
||||
---
|
||||
|
||||
### 11. DMS Integration
|
||||
**Files Modified:**
|
||||
- `dms-post-form/cdklike-dms-post-form.jsx`
|
||||
- `dms/dms.container.jsx`
|
||||
- `dms-payables/dms-payables.container.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **DMS Post Form:**
|
||||
- Navigate to DMS posting
|
||||
- Test all dropdowns in post form:
|
||||
- Account selector
|
||||
- Department selector
|
||||
- GL code selector
|
||||
|
||||
- [ ] **DMS Container:**
|
||||
- Navigate to DMS section
|
||||
- Test filter dropdowns
|
||||
- Verify selection works
|
||||
|
||||
- [ ] **DMS Payables:**
|
||||
- Navigate to DMS Payables
|
||||
- Test payables filter selectors
|
||||
|
||||
---
|
||||
|
||||
### 12. Production & Admin
|
||||
**Files Modified:**
|
||||
- `production-list-config-manager.component.jsx`
|
||||
- `jobs-admin-class.component.jsx`
|
||||
- `jobs-close/jobs-close.component.jsx`
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **Production List Config:**
|
||||
- Navigate to Production Board → Configure
|
||||
- Test column configuration dropdown
|
||||
- Verify display settings work
|
||||
|
||||
- [ ] **Jobs Admin Class:**
|
||||
- Navigate to Admin → Jobs
|
||||
- Change job class/department
|
||||
- Test class selector dropdown
|
||||
|
||||
- [ ] **Jobs Close Page:**
|
||||
- Navigate to Jobs → Close/Export
|
||||
- Test filter dropdowns:
|
||||
- Status filter
|
||||
- Date range
|
||||
- Department filter
|
||||
- Verify selections work
|
||||
|
||||
---
|
||||
|
||||
### 13. Miscellaneous Components
|
||||
**Files Modified:**
|
||||
- `Ciecaselect.jsx` (utility component - 75 lines modified)
|
||||
|
||||
**Test Scenarios:**
|
||||
- [ ] **CIECA Select Utility:**
|
||||
- Used in bill-form-lines-extended for labor type adjustments
|
||||
- Returns options array with 14 labor types (LAA-LAU, LA1-LA4)
|
||||
- Returns 10 part types (PAA, PAC, PAL, PAG, PAM, PAP, PAN, PAO, PAR, PAS) when parts=true
|
||||
- Verify function returns properly formatted options array
|
||||
- Test in any form using DMS integration with CIECA codes
|
||||
|
||||
---
|
||||
|
||||
## Cross-Component Testing
|
||||
|
||||
### Search Functionality
|
||||
Test search across all searchable selects:
|
||||
- [ ] Employee search (by name, employee number)
|
||||
- [ ] Job search (by RO number, customer name, vehicle)
|
||||
- [ ] Vendor search (by name)
|
||||
- [ ] Vehicle search (by VIN, plate, make/model)
|
||||
- [ ] Owner search (by name)
|
||||
|
||||
### Multi-Select Components
|
||||
If any components use `mode="multiple"`:
|
||||
- [ ] Verify multi-select works
|
||||
- [ ] Verify tags display correctly
|
||||
- [ ] Verify removal of selections works
|
||||
|
||||
### Disabled State
|
||||
- [ ] Test dropdowns in disabled state
|
||||
- [ ] Verify disabled styling matches original
|
||||
|
||||
### Form Validation
|
||||
- [ ] Test required field validation on selects
|
||||
- [ ] Verify error messages display correctly
|
||||
- [ ] Test form submission with select values
|
||||
|
||||
---
|
||||
|
||||
## Regression Testing Priority
|
||||
|
||||
### High Priority (Critical User Flows)
|
||||
1. ✅ Create new job with all required fields
|
||||
2. ✅ Add job lines with labor types
|
||||
3. ✅ Assign employees to job lines
|
||||
4. ✅ Order parts with vendor selection
|
||||
5. ✅ Enter bills with vendor and account selection
|
||||
6. ✅ Close and export jobs
|
||||
|
||||
### Medium Priority
|
||||
7. Convert estimate to RO
|
||||
8. Schedule appointments
|
||||
9. Clock in/out (tech portal)
|
||||
10. Update shop configuration
|
||||
11. Manage courtesy cars
|
||||
|
||||
### Low Priority (Admin Functions)
|
||||
12. DMS integration posting
|
||||
13. Production board configuration
|
||||
14. Admin job modifications
|
||||
|
||||
---
|
||||
|
||||
## Browser Testing
|
||||
Test in:
|
||||
- [ ] Chrome (latest)
|
||||
- [ ] Firefox (latest)
|
||||
- [ ] Safari (if applicable)
|
||||
- [ ] Edge (latest)
|
||||
|
||||
---
|
||||
|
||||
## Known Changed Components Summary
|
||||
**Total Files Modified:** 54 client files + 1 server file
|
||||
|
||||
**Labor Type Selectors (14 options):**
|
||||
- LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1, LA2, LA3, LA4
|
||||
- Found in: job-lines-upsert-modal, job-line-convert-to-labor, bill-form-lines
|
||||
|
||||
**Most Complex Changes:**
|
||||
- `shop-info.responsibilitycenters.component.jsx` (980 lines changed)
|
||||
- `vendor-search-select.component.jsx` (120 lines changed)
|
||||
- `shop-info.rostatus.component.jsx` (120 lines changed)
|
||||
- `jobs-convert-button.component.jsx` (198 lines changed)
|
||||
- `Ciecaselect.jsx` (75 lines changed)
|
||||
|
||||
---
|
||||
|
||||
## Internal Code Review Results ✅
|
||||
|
||||
**Files Validated (Sample):**
|
||||
1. ✅ `allocations-assignment.component.jsx` - Simple employee selector with search
|
||||
2. ✅ `contract-status-select.component.jsx` - Static 3-option select
|
||||
3. ✅ `courtesy-car-status-select.component.jsx` - Static 6-option select
|
||||
4. ✅ `job-lines-upsert-modal.component.jsx` - 14 labor type options inline
|
||||
5. ✅ `email-overlay.component.jsx` - From email with custom emails array
|
||||
6. ✅ `employee-search-select-email.component.jsx` - Complex with tags and custom search prop
|
||||
7. ✅ `bill-form-lines-extended.formitem.component.jsx` - CiecaSelect utility usage
|
||||
8. ✅ `vendor-search-select.component.jsx` - Complex with favorites, tags, discount, phone
|
||||
9. ✅ `job-search-select.component.jsx` - Complex with owner display, status tags, loading states
|
||||
10. ✅ `Ciecaselect.jsx` - Utility function returning options array
|
||||
|
||||
**Validation Checklist:**
|
||||
- [x] All `Select.Option` patterns removed
|
||||
- [x] Replaced with `options` array prop
|
||||
- [x] `showSearch` uses object syntax `{{ optionFilterProp: "label" }}`
|
||||
- [x] Custom `optionFilterProp` used where needed ("name", "search", etc.)
|
||||
- [x] Complex rendered content preserved in `label` prop with JSX
|
||||
- [x] Tags, icons, badges, and styled elements working correctly
|
||||
- [x] Search functionality using correct property references
|
||||
- [x] Labor types: All 14 types present (LAA, LAB, LAD, LAE, LAF, LAG, LAM, LAR, LAS, LAU, LA1, LA2, LA3, LA4)
|
||||
- [x] Part types: All 10 types in CiecaSelect (PAA, PAC, PAL, PAG, PAM, PAP, PAN, PAO, PAR, PAS)
|
||||
- [x] Custom filterOption functions updated (option.label vs option.props.children)
|
||||
- [x] Performance optimizations added (useMemo for large option lists)
|
||||
- [x] labelRender custom rendering preserved where used
|
||||
- [x] optionLabelProp used correctly for display vs value
|
||||
|
||||
**Known Complex Patterns Verified:**
|
||||
1. **Vendor Select:** Favorites with heart icon, discount tags, phone display, custom search by "name"
|
||||
2. **Employee Select:** Flat rate/straight time tags, custom search by "search" prop (employee number + name)
|
||||
3. **Job Select:** Owner display function, status tags, loading states, conditional claim number display
|
||||
4. **Email Overlay:** Multiple from addresses (user email, shop email, custom md_from_emails array)
|
||||
5. **Bill Lines Extended:** Conditional DMS vs responsibility centers, CiecaSelect utility
|
||||
|
||||
**No Issues Found** - All migrations follow the correct pattern.
|
||||
|
||||
---
|
||||
|
||||
## Testing Notes
|
||||
- Focus on components with search functionality - filtering logic changed from `children` to `label`
|
||||
- Pay attention to components with custom rendered content (tags, badges, formatted text)
|
||||
- Verify `optionFilterProp` works correctly for custom search fields
|
||||
- Test components that map over arrays to generate options
|
||||
- Check components with conditional option rendering
|
||||
|
||||
---
|
||||
|
||||
## Sign-Off
|
||||
- [ ] All high priority tests passed
|
||||
- [ ] All medium priority tests passed
|
||||
- [ ] All low priority tests passed
|
||||
- [ ] No console errors observed
|
||||
- [ ] Visual appearance matches original
|
||||
- [ ] Performance is acceptable (no lag in large dropdowns)
|
||||
|
||||
**Tested By:** _________________
|
||||
**Date:** _________________
|
||||
**Environment:** _________________
|
||||
**Notes:** _________________
|
||||
1189
client/package-lock.json
generated
1189
client/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@
|
||||
"private": true,
|
||||
"proxy": "http://localhost:4000",
|
||||
"dependencies": {
|
||||
"@amplitude/analytics-browser": "^2.35.3",
|
||||
"@amplitude/analytics-browser": "^2.38.0",
|
||||
"@ant-design/pro-layout": "^7.22.6",
|
||||
"@apollo/client": "^4.1.6",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
@@ -17,68 +17,68 @@
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@documenso/embed-react": "^0.5.1",
|
||||
"@emotion/is-prop-valid": "^1.4.0",
|
||||
"@fingerprintjs/fingerprintjs": "^5.0.1",
|
||||
"@firebase/analytics": "^0.10.19",
|
||||
"@firebase/app": "^0.14.8",
|
||||
"@firebase/auth": "^1.12.0",
|
||||
"@firebase/firestore": "^4.11.0",
|
||||
"@firebase/messaging": "^0.12.22",
|
||||
"@fingerprintjs/fingerprintjs": "^5.1.0",
|
||||
"@firebase/analytics": "^0.10.21",
|
||||
"@firebase/app": "^0.14.10",
|
||||
"@firebase/auth": "^1.12.2",
|
||||
"@firebase/firestore": "^4.13.0",
|
||||
"@firebase/messaging": "^0.12.25",
|
||||
"@jsreport/browser-client": "^3.1.0",
|
||||
"@reduxjs/toolkit": "^2.11.2",
|
||||
"@sentry/cli": "^3.2.2",
|
||||
"@sentry/react": "^10.40.0",
|
||||
"@sentry/cli": "^3.3.5",
|
||||
"@sentry/react": "^10.47.0",
|
||||
"@sentry/vite-plugin": "^4.9.1",
|
||||
"@splitsoftware/splitio-react": "^2.6.1",
|
||||
"@tanem/react-nprogress": "^5.0.63",
|
||||
"antd": "^6.3.1",
|
||||
"antd": "^6.3.5",
|
||||
"apollo-link-logger": "^3.0.0",
|
||||
"autosize": "^6.0.1",
|
||||
"axios": "^1.13.5",
|
||||
"axios": "^1.14.0",
|
||||
"classnames": "^2.5.1",
|
||||
"css-box-model": "^1.2.1",
|
||||
"dayjs": "^1.11.19",
|
||||
"dayjs-business-days2": "^1.3.2",
|
||||
"dayjs": "^1.11.20",
|
||||
"dayjs-business-days2": "^1.3.3",
|
||||
"dinero.js": "^1.9.1",
|
||||
"dotenv": "^17.3.1",
|
||||
"env-cmd": "^11.0.0",
|
||||
"exifr": "^7.1.3",
|
||||
"graphql": "^16.13.0",
|
||||
"graphql-ws": "^6.0.7",
|
||||
"i18next": "^25.8.13",
|
||||
"graphql": "^16.13.2",
|
||||
"graphql-ws": "^6.0.8",
|
||||
"i18next": "^25.10.10",
|
||||
"i18next-browser-languagedetector": "^8.2.1",
|
||||
"immutability-helper": "^3.1.1",
|
||||
"libphonenumber-js": "^1.12.38",
|
||||
"lightningcss": "^1.31.1",
|
||||
"logrocket": "^12.0.0",
|
||||
"libphonenumber-js": "^1.12.41",
|
||||
"lightningcss": "^1.32.0",
|
||||
"logrocket": "^12.1.0",
|
||||
"markerjs2": "^2.32.7",
|
||||
"memoize-one": "^6.0.0",
|
||||
"normalize-url": "^8.1.1",
|
||||
"object-hash": "^3.0.0",
|
||||
"phone": "^3.1.71",
|
||||
"posthog-js": "^1.355.0",
|
||||
"posthog-js": "^1.364.4",
|
||||
"prop-types": "^15.8.1",
|
||||
"query-string": "^9.3.1",
|
||||
"raf-schd": "^4.0.3",
|
||||
"react": "^19.2.4",
|
||||
"react-big-calendar": "^1.19.4",
|
||||
"react-color": "^2.19.3",
|
||||
"react-cookie": "^8.0.1",
|
||||
"react-cookie": "^8.1.0",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-grid-gallery": "^1.0.1",
|
||||
"react-grid-layout": "^2.2.2",
|
||||
"react-i18next": "^16.5.4",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-grid-layout": "^2.2.3",
|
||||
"react-i18next": "^16.6.6",
|
||||
"react-icons": "^5.6.0",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-number-format": "^5.4.3",
|
||||
"react-number-format": "^5.4.5",
|
||||
"react-popopo": "^2.1.9",
|
||||
"react-product-fruits": "^2.2.62",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-resizable": "^3.1.3",
|
||||
"react-router-dom": "^7.13.1",
|
||||
"react-router-dom": "^7.13.2",
|
||||
"react-sticky": "^6.0.3",
|
||||
"react-virtuoso": "^4.18.1",
|
||||
"recharts": "^3.7.0",
|
||||
"react-virtuoso": "^4.18.3",
|
||||
"recharts": "^3.8.1",
|
||||
"redux": "^5.0.1",
|
||||
"redux-actions": "^3.0.3",
|
||||
"redux-persist": "^6.0.0",
|
||||
@@ -86,11 +86,11 @@
|
||||
"redux-state-sync": "^3.1.4",
|
||||
"reselect": "^5.1.1",
|
||||
"rxjs": "^7.8.2",
|
||||
"sass": "^1.97.3",
|
||||
"sass": "^1.98.0",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"styled-components": "^6.3.11",
|
||||
"styled-components": "^6.3.12",
|
||||
"vite-plugin-ejs": "^1.7.0",
|
||||
"web-vitals": "^5.1.0"
|
||||
"web-vitals": "^5.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'",
|
||||
@@ -138,10 +138,10 @@
|
||||
"@rollup/rollup-linux-x64-gnu": "4.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"@ant-design/icons": "^6.1.1",
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@babel/preset-react": "^7.28.5",
|
||||
"@dotenvx/dotenvx": "^1.52.0",
|
||||
"@dotenvx/dotenvx": "^1.59.1",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@eslint/js": "^9.39.2",
|
||||
@@ -151,27 +151,27 @@
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@vitejs/plugin-react": "^5.1.4",
|
||||
"babel-plugin-react-compiler": "^1.0.0",
|
||||
"browserslist": "^4.28.1",
|
||||
"browserslist": "^4.28.2",
|
||||
"browserslist-to-esbuild": "^2.1.1",
|
||||
"chalk": "^5.6.2",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-compiler": "^19.1.0-rc.2",
|
||||
"globals": "^17.3.0",
|
||||
"globals": "^17.4.0",
|
||||
"jsdom": "^28.1.0",
|
||||
"memfs": "^4.56.10",
|
||||
"memfs": "^4.57.1",
|
||||
"os-browserify": "^0.3.0",
|
||||
"playwright": "^1.58.2",
|
||||
"react-error-overlay": "^6.1.0",
|
||||
"redux-logger": "^3.0.6",
|
||||
"source-map-explorer": "^2.5.3",
|
||||
"vite": "^7.3.1",
|
||||
"vite-plugin-babel": "^1.5.1",
|
||||
"vite-plugin-babel": "^1.6.0",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-plugin-node-polyfills": "^0.25.0",
|
||||
"vite-plugin-node-polyfills": "^0.26.0",
|
||||
"vite-plugin-pwa": "^1.2.0",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
"vitest": "^4.0.18",
|
||||
"vitest": "^4.1.2",
|
||||
"workbox-window": "^7.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import { Button } from "antd";
|
||||
import { Button, Card, Divider, Form, Space, Typography } from "antd";
|
||||
import { connect } from "react-redux";
|
||||
import queryString from "query-string";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
import { PayrollLaborAllocationsTable } from "../labor-allocations-table/labor-allocations-table.payroll.component.jsx";
|
||||
import { TimeTicketTaskModalComponent } from "../time-ticket-task-modal/time-ticket-task-modal.component.jsx";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({});
|
||||
|
||||
@@ -9,8 +13,109 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
setRefundPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "refund_payment" }))
|
||||
});
|
||||
|
||||
const commissionCutFixture = {
|
||||
bodyshop: {
|
||||
features: {
|
||||
timetickets: true
|
||||
},
|
||||
employees: [
|
||||
{ id: "emp-1", first_name: "Avery", last_name: "Johnson" },
|
||||
{ id: "emp-2", first_name: "Morgan", last_name: "Lee" }
|
||||
],
|
||||
md_tasks_presets: {
|
||||
presets: [
|
||||
{
|
||||
name: "Body Prep",
|
||||
percent: 50,
|
||||
hourstype: ["LAA", "LAB"],
|
||||
nextstatus: "In Progress"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
jobId: "fixture-job-1",
|
||||
joblines: [
|
||||
{
|
||||
id: "line-1",
|
||||
mod_lbr_ty: "LAA",
|
||||
mod_lb_hrs: 4,
|
||||
assigned_team: "team-1",
|
||||
convertedtolbr: false
|
||||
}
|
||||
],
|
||||
previewValues: {
|
||||
task: "Body Prep",
|
||||
timetickets: [
|
||||
{
|
||||
employeeid: "emp-1",
|
||||
cost_center: "Body",
|
||||
ciecacode: "LAA",
|
||||
productivehrs: 2,
|
||||
rate: 40,
|
||||
payoutamount: 80,
|
||||
payout_context: {
|
||||
payout_method: "commission"
|
||||
}
|
||||
},
|
||||
{
|
||||
employeeid: "emp-2",
|
||||
cost_center: "Refinish",
|
||||
ciecacode: "LAB",
|
||||
productivehrs: 1,
|
||||
rate: 28,
|
||||
payoutamount: 28,
|
||||
payout_context: {
|
||||
payout_method: "hourly"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
function CommissionCutHarness() {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size="large" style={{ width: "100%" }}>
|
||||
<Typography.Title level={2}>Commission Cut Test Harness</Typography.Title>
|
||||
<Typography.Paragraph>
|
||||
This fixture keeps commission-cut browser checks stable by rendering representative payroll and preview UI with
|
||||
local data.
|
||||
</Typography.Paragraph>
|
||||
<Card title="Payroll Labor Allocations">
|
||||
<PayrollLaborAllocationsTable
|
||||
jobId={commissionCutFixture.jobId}
|
||||
joblines={commissionCutFixture.joblines}
|
||||
timetickets={[]}
|
||||
bodyshop={commissionCutFixture.bodyshop}
|
||||
adjustments={[]}
|
||||
refetch={() => {}}
|
||||
/>
|
||||
</Card>
|
||||
<Divider />
|
||||
<Card title="Claim Task Preview">
|
||||
<Form form={form} initialValues={commissionCutFixture.previewValues} layout="vertical">
|
||||
<TimeTicketTaskModalComponent
|
||||
bodyshop={commissionCutFixture.bodyshop}
|
||||
form={form}
|
||||
loading={false}
|
||||
completedTasks={[]}
|
||||
unassignedHours={1.25}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
function Test({ setRefundPaymentContext, refundPaymentModal }) {
|
||||
const search = queryString.parse(useLocation().search);
|
||||
console.log("refundPaymentModal", refundPaymentModal);
|
||||
|
||||
if (search.fixture === "commission-cut") {
|
||||
return <CommissionCutHarness />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Alert } from "antd";
|
||||
|
||||
export default function AlertComponent(props) {
|
||||
return <Alert {...props} />;
|
||||
export default function AlertComponent({ title, message, ...props }) {
|
||||
return <Alert {...props} title={title ?? message} />;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings";
|
||||
import dayjs from "../../utils/day";
|
||||
import { buildBillUpdateAuditDetails } from "../../utils/auditTrailDetails";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import BillFormContainer from "../bill-form/bill-form.container";
|
||||
import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
|
||||
@@ -134,10 +135,16 @@ export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
|
||||
|
||||
await Promise.all(updates);
|
||||
|
||||
const details = buildBillUpdateAuditDetails({
|
||||
originalBill: data?.bills_by_pk,
|
||||
bill,
|
||||
billlines
|
||||
});
|
||||
|
||||
insertAuditTrail({
|
||||
jobid: bill.jobid,
|
||||
jobid: bill.jobid ?? data?.bills_by_pk?.jobid,
|
||||
billid: search.billid,
|
||||
operation: AuditTrailMapping.billupdated(bill.invoice_number),
|
||||
operation: AuditTrailMapping.billupdated(bill.invoice_number, details),
|
||||
type: "billupdated"
|
||||
});
|
||||
|
||||
|
||||
@@ -52,6 +52,7 @@ export function BillFormComponent({
|
||||
const [discount, setDiscount] = useState(0);
|
||||
const notification = useNotification();
|
||||
const jobIdFormWatch = Form.useWatch("jobid", form);
|
||||
const vendorIdFormWatch = Form.useWatch("vendorid", form);
|
||||
|
||||
const {
|
||||
treatments: { Extended_Bill_Posting, ClosingPeriod }
|
||||
@@ -118,6 +119,7 @@ export function BillFormComponent({
|
||||
}
|
||||
}, [
|
||||
form,
|
||||
vendorIdFormWatch,
|
||||
billEdit,
|
||||
loadOutstandingReturns,
|
||||
loadInventory,
|
||||
|
||||
@@ -96,6 +96,7 @@ 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"]);
|
||||
|
||||
@@ -9,18 +9,20 @@ import { createStructuredSelector } from "reselect";
|
||||
import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import { insertAuditTrail } from "../../redux/application/application.actions.js";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
authLevel: selectAuthLevel
|
||||
});
|
||||
const mapDispatchToProps = () => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BillMarkForReexportButton);
|
||||
|
||||
export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
|
||||
export function BillMarkForReexportButton({ bodyshop, authLevel, bill, insertAuditTrail }) {
|
||||
const { t } = useTranslation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const notification = useNotification();
|
||||
@@ -47,6 +49,12 @@ export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
|
||||
notification.success({
|
||||
title: t("bills.successes.reexport")
|
||||
});
|
||||
insertAuditTrail({
|
||||
jobid: bill.jobid,
|
||||
billid: bill.id,
|
||||
operation: AuditTrailMapping.billmarkforreexport(bill.invoice_number),
|
||||
type: "billmarkforreexport"
|
||||
});
|
||||
} else {
|
||||
notification.error({
|
||||
title: t("bills.errors.saving", {
|
||||
|
||||
@@ -10,6 +10,7 @@ import { createStructuredSelector } from "reselect";
|
||||
import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
|
||||
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
@@ -156,104 +157,127 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
|
||||
joblines: {
|
||||
data: billingLines
|
||||
},
|
||||
parts_tax_rates: {
|
||||
PAA: {
|
||||
prt_type: "PAA",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
...InstanceRenderManager({
|
||||
imex: {
|
||||
parts_tax_rates: {
|
||||
PAA: {
|
||||
prt_type: "PAA",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAC: {
|
||||
prt_type: "PAC",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAL: {
|
||||
prt_type: "PAL",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAM: {
|
||||
prt_type: "PAM",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAN: {
|
||||
prt_type: "PAN",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAR: {
|
||||
prt_type: "PAR",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAS: {
|
||||
prt_type: "PAS",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCDR: {
|
||||
prt_type: "CCDR",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCF: {
|
||||
prt_type: "CCF",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCM: {
|
||||
prt_type: "CCM",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCC: {
|
||||
prt_type: "CCC",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCD: {
|
||||
prt_type: "CCD",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
}
|
||||
}
|
||||
},
|
||||
PAC: {
|
||||
prt_type: "PAC",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAL: {
|
||||
prt_type: "PAL",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAM: {
|
||||
prt_type: "PAM",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAN: {
|
||||
prt_type: "PAN",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAR: {
|
||||
prt_type: "PAR",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
PAS: {
|
||||
prt_type: "PAS",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCDR: {
|
||||
prt_type: "CCDR",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCF: {
|
||||
prt_type: "CCF",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCM: {
|
||||
prt_type: "CCM",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCC: {
|
||||
prt_type: "CCC",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
},
|
||||
CCD: {
|
||||
prt_type: "CCD",
|
||||
prt_discp: 0,
|
||||
prt_mktyp: false,
|
||||
prt_mkupp: 0,
|
||||
prt_tax_in: true,
|
||||
prt_tax_rt: bodyshop.bill_tax_rates.state_tax_rate / 100
|
||||
rome: {
|
||||
cieca_pft: {
|
||||
...bodyshop.md_responsibility_centers.taxes.tax_ty1,
|
||||
...bodyshop.md_responsibility_centers.taxes.tax_ty2,
|
||||
...bodyshop.md_responsibility_centers.taxes.tax_ty3,
|
||||
...bodyshop.md_responsibility_centers.taxes.tax_ty4,
|
||||
...bodyshop.md_responsibility_centers.taxes.tax_ty5
|
||||
},
|
||||
materials: bodyshop.md_responsibility_centers.cieca_pfm,
|
||||
cieca_pfl: bodyshop.md_responsibility_centers.cieca_pfl,
|
||||
parts_tax_rates: bodyshop.md_responsibility_centers.parts_tax_rates,
|
||||
tax_tow_rt: bodyshop.md_responsibility_centers.tax_tow_rt,
|
||||
tax_str_rt: bodyshop.md_responsibility_centers.tax_str_rt,
|
||||
tax_paint_mat_rt: bodyshop.md_responsibility_centers.tax_paint_mat_rt,
|
||||
tax_shop_mat_rt: bodyshop.md_responsibility_centers.tax_shop_mat_rt,
|
||||
tax_sub_rt: bodyshop.md_responsibility_centers.tax_sub_rt,
|
||||
tax_lbr_rt: bodyshop.md_responsibility_centers.tax_lbr_rt,
|
||||
tax_levies_rt: bodyshop.md_responsibility_centers.tax_levies_rt
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
if (currentUser?.email) {
|
||||
@@ -287,7 +311,7 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
|
||||
notification.success({
|
||||
title: t("jobs.successes.created"),
|
||||
onClick: () => {
|
||||
history.push(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
|
||||
history(`/manage/jobs/${result.data.insert_jobs.returning[0].id}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ function normalizeJobAllocations(ack) {
|
||||
* RR-specific DMS Allocations Summary
|
||||
* Focused on what we actually send to RR:
|
||||
* - ROGOG (split by taxable / non-taxable segments)
|
||||
* - ROLABOR shell
|
||||
* - ROLABOR labor rows with bill hours / rates
|
||||
*
|
||||
* The heavy lifting (ROGOG/ROLABOR split, cost allocation, tax flags)
|
||||
* is now done on the backend via buildRogogFromAllocations/buildRolaborFromRogog.
|
||||
@@ -181,21 +181,30 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
|
||||
const rolaborRows = useMemo(() => {
|
||||
if (!rolaborPreview || !Array.isArray(rolaborPreview.ops)) return [];
|
||||
|
||||
return rolaborPreview.ops.map((op, idx) => {
|
||||
const rowOpCode = opCode || op.opCode;
|
||||
return rolaborPreview.ops
|
||||
.filter((op) =>
|
||||
[op.bill?.jobTotalHrs, op.bill?.billTime, op.bill?.billRate, op.amount?.custPrice, op.amount?.totalAmt]
|
||||
.map((value) => Number.parseFloat(value ?? "0"))
|
||||
.some((value) => !Number.isNaN(value) && value !== 0)
|
||||
)
|
||||
.map((op, idx) => {
|
||||
const rowOpCode = opCode || op.opCode;
|
||||
|
||||
return {
|
||||
key: `${op.jobNo}-${idx}`,
|
||||
opCode: rowOpCode,
|
||||
jobNo: op.jobNo,
|
||||
custPayTypeFlag: op.custPayTypeFlag,
|
||||
custTxblNtxblFlag: op.custTxblNtxblFlag,
|
||||
payType: op.bill?.payType,
|
||||
amtType: op.amount?.amtType,
|
||||
custPrice: op.amount?.custPrice,
|
||||
totalAmt: op.amount?.totalAmt
|
||||
};
|
||||
});
|
||||
return {
|
||||
key: `${op.jobNo}-${idx}`,
|
||||
opCode: rowOpCode,
|
||||
jobNo: op.jobNo,
|
||||
custPayTypeFlag: op.custPayTypeFlag,
|
||||
custTxblNtxblFlag: op.custTxblNtxblFlag,
|
||||
payType: op.bill?.payType,
|
||||
jobTotalHrs: op.bill?.jobTotalHrs,
|
||||
billTime: op.bill?.billTime,
|
||||
billRate: op.bill?.billRate,
|
||||
amtType: op.amount?.amtType,
|
||||
custPrice: op.amount?.custPrice,
|
||||
totalAmt: op.amount?.totalAmt
|
||||
};
|
||||
});
|
||||
}, [rolaborPreview, opCode]);
|
||||
|
||||
// Totals for ROGOG (sum custPrice + dlrCost over all lines)
|
||||
@@ -245,6 +254,9 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
|
||||
{ title: "CustPayType", dataIndex: "custPayTypeFlag", key: "custPayTypeFlag" },
|
||||
{ title: "CustTxblFlag", dataIndex: "custTxblNtxblFlag", key: "custTxblNtxblFlag" },
|
||||
{ title: "PayType", dataIndex: "payType", key: "payType" },
|
||||
{ title: "JobTotalHrs", dataIndex: "jobTotalHrs", key: "jobTotalHrs" },
|
||||
{ title: "BillTime", dataIndex: "billTime", key: "billTime" },
|
||||
{ title: "BillRate", dataIndex: "billRate", key: "billRate" },
|
||||
{ title: "AmtType", dataIndex: "amtType", key: "amtType" },
|
||||
{ title: "CustPrice", dataIndex: "custPrice", key: "custPrice" },
|
||||
{ title: "TotalAmt", dataIndex: "totalAmt", key: "totalAmt" }
|
||||
@@ -317,12 +329,13 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title, onAllocat
|
||||
children: (
|
||||
<>
|
||||
<Typography.Paragraph type="secondary" style={{ marginBottom: 8 }}>
|
||||
This mirrors the shell that would be sent for ROLABOR when all financials are carried in GOG.
|
||||
This mirrors the labor rows RR will receive, including weighted bill hours and rates derived from the
|
||||
job's labor lines.
|
||||
</Typography.Paragraph>
|
||||
<ResponsiveTable
|
||||
pagination={false}
|
||||
columns={rolaborColumns}
|
||||
mobileColumnKeys={["jobNo", "opCode", "breakOut", "itemType"]}
|
||||
mobileColumnKeys={["jobNo", "opCode", "billRate", "custPrice"]}
|
||||
rowKey="key"
|
||||
dataSource={rolaborRows}
|
||||
locale={{ emptyText: "No ROLABOR lines would be generated." }}
|
||||
|
||||
@@ -4,20 +4,203 @@ import AlertComponent from "../alert/alert.component";
|
||||
import "./form-fields-changed.styles.scss";
|
||||
import Prompt from "../../utils/prompt";
|
||||
|
||||
export default function FormsFieldChanged({ form, skipPrompt }) {
|
||||
export default function FormsFieldChanged({ form, skipPrompt, onErrorNavigate, onReset, onDirtyChange }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const normalizeNamePath = (namePath) => (Array.isArray(namePath) ? namePath.filter((part) => part !== undefined) : [namePath]);
|
||||
|
||||
const getFieldIdCandidates = (namePath) => {
|
||||
const normalizedNamePath = normalizeNamePath(namePath).map((part) => String(part));
|
||||
const underscoreId = normalizedNamePath.join("_");
|
||||
const dashId = normalizedNamePath.join("-");
|
||||
const dotName = normalizedNamePath.join(".");
|
||||
|
||||
return [underscoreId, dashId, dotName].filter(Boolean);
|
||||
};
|
||||
|
||||
const clearFormMeta = () => {
|
||||
const fieldMeta = form.getFieldsError().map(({ name }) => ({
|
||||
name,
|
||||
touched: false,
|
||||
validating: false,
|
||||
errors: [],
|
||||
warnings: []
|
||||
}));
|
||||
|
||||
if (fieldMeta.length > 0) {
|
||||
form.setFields(fieldMeta);
|
||||
}
|
||||
|
||||
onDirtyChange?.(false);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
if (onReset) {
|
||||
onReset();
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
clearFormMeta();
|
||||
});
|
||||
};
|
||||
|
||||
const getFieldDomNode = (namePath) => {
|
||||
const fieldInstance = form.getFieldInstance?.(namePath);
|
||||
const fieldIdCandidates = getFieldIdCandidates(namePath);
|
||||
const domCandidates = [
|
||||
fieldInstance?.nativeElement,
|
||||
fieldInstance?.input,
|
||||
fieldInstance?.resizableTextArea?.textArea,
|
||||
fieldInstance
|
||||
];
|
||||
|
||||
fieldIdCandidates.forEach((fieldId) => {
|
||||
const escapedFieldId = CSS.escape(fieldId);
|
||||
const directNode = document.getElementById(fieldId) || document.querySelector(`#${escapedFieldId}`);
|
||||
const labelNode = document.querySelector(`label[for="${escapedFieldId}"]`);
|
||||
const namedNode = document.querySelector(`[name="${escapedFieldId}"]`);
|
||||
const formItemNode =
|
||||
directNode?.closest?.(".ant-form-item") ||
|
||||
labelNode?.closest?.(".ant-form-item") ||
|
||||
namedNode?.closest?.(".ant-form-item");
|
||||
|
||||
domCandidates.push(directNode);
|
||||
domCandidates.push(namedNode);
|
||||
domCandidates.push(formItemNode);
|
||||
domCandidates.push(formItemNode?.querySelector?.("input, textarea, select, .ant-select-selector"));
|
||||
});
|
||||
|
||||
return domCandidates.find((candidate) => candidate instanceof HTMLElement) ?? null;
|
||||
};
|
||||
|
||||
const waitForAnimationFrames = (frameCount = 1) =>
|
||||
new Promise((resolve) => {
|
||||
let remainingFrames = frameCount;
|
||||
const nextFrame = () => {
|
||||
if (remainingFrames <= 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
remainingFrames -= 1;
|
||||
window.requestAnimationFrame(nextFrame);
|
||||
};
|
||||
window.requestAnimationFrame(nextFrame);
|
||||
});
|
||||
|
||||
const getFieldOwningTabMeta = (namePath) => {
|
||||
const fieldDomNode = getFieldDomNode(namePath);
|
||||
const owningTabPane = fieldDomNode?.closest?.(".ant-tabs-tabpane");
|
||||
const paneId = owningTabPane?.getAttribute?.("id") || null;
|
||||
const owningTabButton = paneId
|
||||
? document.querySelector(`[role="tab"][aria-controls="${paneId.replace(/"/g, '\\"')}"]`)
|
||||
: null;
|
||||
const tabLabel = owningTabButton?.textContent?.trim() || null;
|
||||
|
||||
return {
|
||||
owningTabPane,
|
||||
owningTabButton,
|
||||
tabLabel
|
||||
};
|
||||
};
|
||||
|
||||
const openFieldOwningTab = async (namePath) => {
|
||||
const { owningTabPane, owningTabButton } = getFieldOwningTabMeta(namePath);
|
||||
if (!owningTabPane || owningTabPane.classList.contains("ant-tabs-tabpane-active")) return false;
|
||||
|
||||
if (!(owningTabButton instanceof HTMLElement)) return false;
|
||||
|
||||
owningTabButton.click();
|
||||
|
||||
for (let index = 0; index < 24; index += 1) {
|
||||
await waitForAnimationFrames();
|
||||
if (owningTabPane.classList.contains("ant-tabs-tabpane-active")) return true;
|
||||
}
|
||||
|
||||
return owningTabPane.classList.contains("ant-tabs-tabpane-active");
|
||||
};
|
||||
|
||||
const scrollToErrorField = (namePath) => {
|
||||
const normalizedNamePath = normalizeNamePath(namePath);
|
||||
if (!normalizedNamePath.length) return;
|
||||
|
||||
try {
|
||||
form.scrollToField(normalizedNamePath, {
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
focus: true
|
||||
});
|
||||
window.requestAnimationFrame(() => {
|
||||
const fallbackNode = getFieldDomNode(normalizedNamePath);
|
||||
fallbackNode?.focus?.();
|
||||
});
|
||||
return;
|
||||
} catch {
|
||||
const fallbackTarget = document.getElementById(normalizedNamePath[0]?.toString?.() ?? "");
|
||||
fallbackTarget?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleErrorClick = async (namePath) => {
|
||||
const normalizedNamePath = normalizeNamePath(namePath);
|
||||
if (!normalizedNamePath.length) return;
|
||||
|
||||
const switchedTab = await openFieldOwningTab(normalizedNamePath);
|
||||
if (!switchedTab) {
|
||||
const navigationDelayMs = onErrorNavigate?.(normalizedNamePath) ?? 0;
|
||||
if (navigationDelayMs > 0) {
|
||||
window.setTimeout(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
scrollToErrorField(normalizedNamePath);
|
||||
});
|
||||
}, navigationDelayMs);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await waitForAnimationFrames(switchedTab ? 2 : 1);
|
||||
scrollToErrorField(normalizedNamePath);
|
||||
};
|
||||
//if (!form.isFieldsTouched()) return <></>;
|
||||
return (
|
||||
<Form.Item className="form-fields-changed" shouldUpdate style={{ margin: 0, padding: 0, minHeight: "unset" }}>
|
||||
{() => {
|
||||
const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
|
||||
const errors = form
|
||||
.getFieldsError()
|
||||
.filter((fieldError) => fieldError.errors.length > 0)
|
||||
.flatMap((fieldError) => {
|
||||
const tabMeta = getFieldOwningTabMeta(fieldError.name);
|
||||
|
||||
return fieldError.errors.map((errorMessage, errorIndex) => ({
|
||||
key: `${(fieldError.name || []).join(".")}-${errorIndex}-${errorMessage}`,
|
||||
message: errorMessage,
|
||||
namePath: fieldError.name,
|
||||
tabLabel: tabMeta.tabLabel
|
||||
}));
|
||||
});
|
||||
|
||||
const groupedErrors = errors.reduce((groups, error) => {
|
||||
const groupKey = error.tabLabel || "__ungrouped__";
|
||||
if (!groups[groupKey]) {
|
||||
groups[groupKey] = {
|
||||
key: groupKey,
|
||||
label: error.tabLabel,
|
||||
errors: []
|
||||
};
|
||||
}
|
||||
groups[groupKey].errors.push(error);
|
||||
return groups;
|
||||
}, {});
|
||||
const errorGroups = Object.values(groupedErrors);
|
||||
const hasTabbedErrorGroups = errorGroups.some((group) => Boolean(group.label));
|
||||
|
||||
if (form.isFieldsTouched())
|
||||
return (
|
||||
<Space orientation="vertical" style={{ width: "100%" }}>
|
||||
<Space orientation="vertical" style={{ width: "100%", marginBottom: 10 }}>
|
||||
<Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
|
||||
<AlertComponent
|
||||
type="warning"
|
||||
@@ -39,10 +222,35 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
|
||||
{errors.length > 0 && (
|
||||
<AlertComponent
|
||||
type="error"
|
||||
message={t("general.labels.validationerror")}
|
||||
title={t("general.labels.validationerror")}
|
||||
description={
|
||||
<div>
|
||||
<ul>{errors.map((e, idx) => e.errors.map((e2, idx2) => <li key={`${idx}${idx2}`}>{e2}</li>))}</ul>
|
||||
<div className="form-fields-changed__error-groups">
|
||||
{errorGroups.map((group) => (
|
||||
<div key={group.key} className="form-fields-changed__error-group">
|
||||
{hasTabbedErrorGroups && group.label ? (
|
||||
<div className="form-fields-changed__error-group-title">{group.label}</div>
|
||||
) : null}
|
||||
<ul className="form-fields-changed__error-list">
|
||||
{group.errors.map((error) => (
|
||||
<li key={error.key}>
|
||||
{Array.isArray(error.namePath) && error.namePath.length > 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="form-fields-changed__error-link"
|
||||
onClick={() => {
|
||||
handleErrorClick(error.namePath);
|
||||
}}
|
||||
>
|
||||
{error.message}
|
||||
</button>
|
||||
) : (
|
||||
error.message
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
showIcon
|
||||
|
||||
@@ -4,4 +4,47 @@
|
||||
min-height: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__error-list {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
&__error-groups {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&__error-group {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__error-group-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__error-link {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
color: color-mix(in srgb, var(--ant-color-error) 82%, var(--ant-color-text));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--ant-color-error) 32%, transparent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,88 @@
|
||||
import { Input } from "antd";
|
||||
import { PhoneFilled } from "@ant-design/icons";
|
||||
import { Button, Input, Space } from "antd";
|
||||
import i18n from "i18next";
|
||||
import parsePhoneNumber from "libphonenumber-js";
|
||||
import { forwardRef, useMemo, useState } from "react";
|
||||
import "./phone-form-item.styles.scss";
|
||||
|
||||
function FormItemPhone({ ref, ...props }) {
|
||||
return <Input ref={ref} {...props} />;
|
||||
}
|
||||
/**
|
||||
* Formats a phone number for display purposes. If the input value is a valid phone number, it will be formatted in a
|
||||
* national format (e.g., (123) 456-7890 for US/CA). If the input is not a valid phone number, it will be returned as-is.
|
||||
* @param value
|
||||
* @returns {*}
|
||||
*/
|
||||
const formatPhoneDisplayValue = (value) => {
|
||||
if (!value) return value;
|
||||
|
||||
try {
|
||||
const parsedPhone = parsePhoneNumber(value, "CA");
|
||||
return parsedPhone?.isValid() ? parsedPhone.formatNational() : value;
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates a "tel:" URL for a phone number if it's valid. If the input value is a valid phone number, it will return a
|
||||
* URL in the format "tel:+1234567890". If the input is not a valid phone number, it will attempt to trim whitespace and
|
||||
* return a "tel:" URL with the raw value, or null if the trimmed value is empty.
|
||||
* @param value
|
||||
* @returns {string|null}
|
||||
*/
|
||||
const getPhoneActionHref = (value) => {
|
||||
if (!value) return null;
|
||||
|
||||
try {
|
||||
const parsedPhone = parsePhoneNumber(value, "CA");
|
||||
if (parsedPhone?.isValid()) return `tel:${parsedPhone.number}`;
|
||||
} catch {
|
||||
// Fall back to the raw value below.
|
||||
}
|
||||
|
||||
const trimmedValue = String(value).trim();
|
||||
return trimmedValue ? `tel:${trimmedValue}` : null;
|
||||
};
|
||||
|
||||
const FormItemPhone = forwardRef(function FormItemPhone(
|
||||
{ formatDisplayOnly = false, showPhoneAction = false, value, onBlur, onFocus, ...props },
|
||||
ref
|
||||
) {
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const displayValue = useMemo(() => {
|
||||
if (!formatDisplayOnly || isFocused) return value;
|
||||
return formatPhoneDisplayValue(value);
|
||||
}, [formatDisplayOnly, isFocused, value]);
|
||||
const phoneActionHref = useMemo(() => (showPhoneAction ? getPhoneActionHref(value) : null), [showPhoneAction, value]);
|
||||
|
||||
const input = (
|
||||
<Input
|
||||
ref={ref}
|
||||
{...props}
|
||||
value={displayValue}
|
||||
onFocus={(event) => {
|
||||
setIsFocused(true);
|
||||
onFocus?.(event);
|
||||
}}
|
||||
onBlur={(event) => {
|
||||
setIsFocused(false);
|
||||
onBlur?.(event);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
if (!showPhoneAction) return input;
|
||||
|
||||
return (
|
||||
<Space.Compact style={{ width: "100%" }}>
|
||||
{input}
|
||||
{phoneActionHref ? (
|
||||
<Button icon={<PhoneFilled />} href={phoneActionHref} />
|
||||
) : (
|
||||
<Button icon={<PhoneFilled />} disabled />
|
||||
)}
|
||||
</Space.Compact>
|
||||
);
|
||||
});
|
||||
|
||||
export default FormItemPhone;
|
||||
|
||||
|
||||
@@ -10,8 +10,13 @@ const mapDispatchToProps = () => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
const toFiniteNumber = (value) => {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : null;
|
||||
};
|
||||
|
||||
const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
|
||||
if (!value) return null;
|
||||
if (value === null || value === undefined || value === "") return null;
|
||||
switch (type) {
|
||||
case "employee": {
|
||||
const emp = bodyshop.employees.find((e) => e.id === value);
|
||||
@@ -20,8 +25,15 @@ const ReadOnlyFormItem = ({ bodyshop, value, type = "text" }) => {
|
||||
|
||||
case "text":
|
||||
return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
|
||||
case "currency":
|
||||
return <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>;
|
||||
case "currency": {
|
||||
const numericValue = toFiniteNumber(value);
|
||||
|
||||
if (numericValue === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <div>{Dinero({ amount: Math.round(numericValue * 100) }).toFormat()}</div>;
|
||||
}
|
||||
default:
|
||||
return <div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{value}</div>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { LinkOutlined } from "@ant-design/icons";
|
||||
import { Button, Input, Space } from "antd";
|
||||
import { forwardRef, useMemo } from "react";
|
||||
|
||||
const HAS_URL_PROTOCOL_REGEX = /^[a-zA-Z][a-zA-Z\d+.-]*:/;
|
||||
const LOCALHOST_OR_IP_REGEX = /^(localhost|127(?:\.\d{1,3}){3}|\d{1,3}(?:\.\d{1,3}){3})(:\d+)?(\/.*)?$/i;
|
||||
|
||||
const getUrlActionHref = (value) => {
|
||||
const trimmedValue = String(value ?? "").trim();
|
||||
if (!trimmedValue) return null;
|
||||
|
||||
if (HAS_URL_PROTOCOL_REGEX.test(trimmedValue)) return trimmedValue;
|
||||
if (trimmedValue.startsWith("//")) return `https:${trimmedValue}`;
|
||||
if (LOCALHOST_OR_IP_REGEX.test(trimmedValue)) return `http://${trimmedValue}`;
|
||||
|
||||
return `https://${trimmedValue}`;
|
||||
};
|
||||
|
||||
const FormItemUrl = forwardRef(function FormItemUrl({ value, defaultValue, ...props }, ref) {
|
||||
const urlActionHref = useMemo(() => getUrlActionHref(value ?? defaultValue), [defaultValue, value]);
|
||||
|
||||
return (
|
||||
<Space.Compact style={{ width: "100%" }}>
|
||||
<Input ref={ref} {...props} value={value} defaultValue={defaultValue} />
|
||||
{urlActionHref ? (
|
||||
<Button icon={<LinkOutlined />} href={urlActionHref} target="_blank" rel="noopener noreferrer" />
|
||||
) : (
|
||||
<Button icon={<LinkOutlined />} disabled />
|
||||
)}
|
||||
</Space.Compact>
|
||||
);
|
||||
});
|
||||
|
||||
export default FormItemUrl;
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Normalize Form Item List Titles
|
||||
* @param value
|
||||
* @returns {*|string}
|
||||
*/
|
||||
const normalizeFormListTitleValue = (value) => {
|
||||
if (value === null || value === undefined) return "";
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
return value
|
||||
.map((item) => normalizeFormListTitleValue(item))
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
}
|
||||
|
||||
return String(value).trim();
|
||||
};
|
||||
|
||||
/**
|
||||
* Get Form Listem Item Title
|
||||
* @param fallbackLabel
|
||||
* @param index
|
||||
* @param candidates
|
||||
* @returns {*|string}
|
||||
*/
|
||||
export function getFormListItemTitle(fallbackLabel, index, ...candidates) {
|
||||
const title = candidates.map((candidate) => normalizeFormListTitleValue(candidate)).find(Boolean);
|
||||
|
||||
return title || `${fallbackLabel} ${index + 1}`;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { DownOutlined, UpOutlined } from "@ant-design/icons";
|
||||
import { Space } from "antd";
|
||||
|
||||
export default function FormListMoveArrows({ move, index, total }) {
|
||||
export default function FormListMoveArrows({ move, index, total, orientation = "vertical" }) {
|
||||
const upDisabled = index === 0;
|
||||
const downDisabled = index === total - 1;
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function FormListMoveArrows({ move, index, total }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Space orientation="vertical">
|
||||
<Space orientation={orientation}>
|
||||
<UpOutlined disabled={upDisabled} onClick={handleUp} />
|
||||
<DownOutlined disabled={downDisabled} onClick={handleDown} />
|
||||
</Space>
|
||||
|
||||
@@ -14,16 +14,20 @@ import CriticalPartsScan from "../../utils/criticalPartsScan";
|
||||
import UndefinedToNull from "../../utils/undefinedtonull";
|
||||
import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
|
||||
import { insertAuditTrail } from "../../redux/application/application.actions.js";
|
||||
import { buildJobLineInsertAuditDetails, buildJobLineUpdateAuditDetails } from "../../utils/auditTrailDetails.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
jobLineEditModal: selectJobLineEditModal,
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit"))
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit")),
|
||||
insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
|
||||
});
|
||||
|
||||
function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bodyshop }) {
|
||||
function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bodyshop, insertAuditTrail }) {
|
||||
const {
|
||||
treatments: { CriticalPartsScanning }
|
||||
} = useTreatmentsWithConfig({
|
||||
@@ -74,6 +78,11 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
|
||||
notification.success({
|
||||
title: t("joblines.successes.created")
|
||||
});
|
||||
insertAuditTrail({
|
||||
jobid: jobLineEditModal.context.jobid,
|
||||
operation: AuditTrailMapping.jobmanuallineinsert(buildJobLineInsertAuditDetails(values)),
|
||||
type: "jobmanuallineinsert"
|
||||
});
|
||||
} else {
|
||||
notification.error({
|
||||
title: t("joblines.errors.creating", {
|
||||
@@ -103,6 +112,17 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
|
||||
notification.success({
|
||||
title: t("joblines.successes.updated")
|
||||
});
|
||||
insertAuditTrail({
|
||||
jobid: jobLineEditModal.context.jobid,
|
||||
operation: AuditTrailMapping.joblineupdate(
|
||||
values.line_desc || jobLineEditModal.context.line_desc || "manual line",
|
||||
buildJobLineUpdateAuditDetails({
|
||||
originalLine: jobLineEditModal.context,
|
||||
values
|
||||
})
|
||||
),
|
||||
type: "joblineupdate"
|
||||
});
|
||||
} else {
|
||||
notification.success({
|
||||
title: t("joblines.errors.updating", {
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { UPDATE_JOB } from "../../graphql/jobs.queries";
|
||||
import { LaborAllocationsAdjustmentEdit } from "./labor-allocations-adjustment-edit.component.jsx";
|
||||
|
||||
const updateAdjustmentsMock = vi.fn();
|
||||
const useMutationMock = vi.fn();
|
||||
const notification = {
|
||||
success: vi.fn(),
|
||||
error: vi.fn()
|
||||
};
|
||||
const insertAuditTrailMock = vi.fn();
|
||||
const jobmodifylbradjMock = vi.fn(() => "audit-entry");
|
||||
|
||||
vi.mock("@apollo/client/react", () => ({
|
||||
useMutation: (...args) => useMutationMock(...args)
|
||||
}));
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key) => {
|
||||
const translations = {
|
||||
"joblines.fields.mod_lbr_ty": "Labor Type",
|
||||
"joblines.fields.lbr_types.LAA": "LAA",
|
||||
"jobs.fields.adjustmenthours": "Adjustment Hours",
|
||||
"general.actions.save": "Save",
|
||||
"jobs.successes.save": "Saved"
|
||||
};
|
||||
|
||||
return translations[key] || key;
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock("../../contexts/Notifications/notificationContext.jsx", () => ({
|
||||
useNotification: () => notification
|
||||
}));
|
||||
|
||||
vi.mock("../../utils/AuditTrailMappings", () => ({
|
||||
default: {
|
||||
jobmodifylbradj: (...args) => jobmodifylbradjMock(...args)
|
||||
}
|
||||
}));
|
||||
|
||||
describe("LaborAllocationsAdjustmentEdit", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
useMutationMock.mockImplementation((mutation) => {
|
||||
if (mutation === UPDATE_JOB) {
|
||||
return [updateAdjustmentsMock];
|
||||
}
|
||||
|
||||
return [vi.fn()];
|
||||
});
|
||||
|
||||
updateAdjustmentsMock.mockResolvedValue({});
|
||||
});
|
||||
|
||||
it("saves merged labor adjustments and records the adjustment delta", async () => {
|
||||
render(
|
||||
<LaborAllocationsAdjustmentEdit
|
||||
insertAuditTrail={insertAuditTrailMock}
|
||||
jobId="job-1"
|
||||
mod_lbr_ty="LAA"
|
||||
adjustments={{
|
||||
LAA: 1.2,
|
||||
LAB: 0.5
|
||||
}}
|
||||
refetchQueryNames={["QUERY_JOB"]}
|
||||
>
|
||||
<button type="button">Edit Adjustment</button>
|
||||
</LaborAllocationsAdjustmentEdit>
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Edit Adjustment" }));
|
||||
|
||||
fireEvent.change(screen.getByRole("spinbutton"), {
|
||||
target: { value: "3.7" }
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Save" }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(updateAdjustmentsMock).toHaveBeenCalledWith({
|
||||
variables: {
|
||||
jobId: "job-1",
|
||||
job: {
|
||||
lbr_adjustments: {
|
||||
LAA: 3.7,
|
||||
LAB: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
refetchQueries: ["QUERY_JOB"]
|
||||
});
|
||||
});
|
||||
|
||||
expect(jobmodifylbradjMock).toHaveBeenCalledWith({
|
||||
mod_lbr_ty: "LAA",
|
||||
hours: 2.5
|
||||
});
|
||||
expect(insertAuditTrailMock).toHaveBeenCalledWith({
|
||||
jobid: "job-1",
|
||||
operation: "audit-entry",
|
||||
type: "jobmodifylbradj"
|
||||
});
|
||||
expect(notification.success).toHaveBeenCalledWith({
|
||||
title: "Saved"
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -21,6 +21,8 @@ const mapStateToProps = createStructuredSelector({
|
||||
technician: selectTechnician
|
||||
});
|
||||
|
||||
const getRequestErrorMessage = (error) => error?.response?.data?.error || error?.message || "";
|
||||
|
||||
export function PayrollLaborAllocationsTable({
|
||||
jobId,
|
||||
joblines,
|
||||
@@ -43,16 +45,23 @@ export function PayrollLaborAllocationsTable({
|
||||
});
|
||||
const notification = useNotification();
|
||||
|
||||
useEffect(() => {
|
||||
async function CalculateTotals() {
|
||||
const loadTotals = async () => {
|
||||
try {
|
||||
const { data } = await axios.post("/payroll/calculatelabor", {
|
||||
jobid: jobId
|
||||
});
|
||||
setTotals(data);
|
||||
} catch (error) {
|
||||
setTotals([]);
|
||||
notification.error({
|
||||
title: getRequestErrorMessage(error)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!!joblines && !!timetickets && !!bodyshop) {
|
||||
CalculateTotals();
|
||||
loadTotals();
|
||||
}
|
||||
if (!jobId) setTotals([]);
|
||||
}, [joblines, timetickets, bodyshop, adjustments, jobId]);
|
||||
@@ -210,28 +219,36 @@ export function PayrollLaborAllocationsTable({
|
||||
<Button
|
||||
disabled={!hasTimeTicketAccess}
|
||||
onClick={async () => {
|
||||
const response = await axios.post("/payroll/payall", {
|
||||
jobid: jobId
|
||||
});
|
||||
try {
|
||||
const response = await axios.post("/payroll/payall", {
|
||||
jobid: jobId
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
if (response.data.success !== false) {
|
||||
notification.success({
|
||||
title: t("timetickets.successes.payall")
|
||||
});
|
||||
if (response.status === 200) {
|
||||
if (response.data.success !== false) {
|
||||
notification.success({
|
||||
title: t("timetickets.successes.payall")
|
||||
});
|
||||
} else {
|
||||
notification.error({
|
||||
title: t("timetickets.errors.payall", {
|
||||
error: response.data.error
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
if (refetch) refetch();
|
||||
} else {
|
||||
notification.error({
|
||||
title: t("timetickets.errors.payall", {
|
||||
error: response.data.error
|
||||
error: JSON.stringify("")
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
if (refetch) refetch();
|
||||
} else {
|
||||
} catch (error) {
|
||||
notification.error({
|
||||
title: t("timetickets.errors.payall", {
|
||||
error: JSON.stringify("")
|
||||
error: getRequestErrorMessage(error)
|
||||
})
|
||||
});
|
||||
}
|
||||
@@ -241,10 +258,7 @@ export function PayrollLaborAllocationsTable({
|
||||
</Button>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const { data } = await axios.post("/payroll/calculatelabor", {
|
||||
jobid: jobId
|
||||
});
|
||||
setTotals(data);
|
||||
await loadTotals();
|
||||
refetch();
|
||||
}}
|
||||
icon={<SyncOutlined />}
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import axios from "axios";
|
||||
import { describe, expect, it, beforeEach, vi } from "vitest";
|
||||
import { PayrollLaborAllocationsTable } from "./labor-allocations-table.payroll.component.jsx";
|
||||
|
||||
const notification = {
|
||||
success: vi.fn(),
|
||||
error: vi.fn()
|
||||
};
|
||||
|
||||
vi.mock("axios", () => ({
|
||||
default: {
|
||||
post: vi.fn()
|
||||
}
|
||||
}));
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key, values = {}) => {
|
||||
const translations = {
|
||||
"jobs.labels.laborallocations": "Labor Allocations",
|
||||
"timetickets.actions.payall": "Pay All",
|
||||
"general.labels.totals": "Totals",
|
||||
"jobs.labels.outstandinghours": "Outstanding hours remain."
|
||||
};
|
||||
|
||||
if (key === "timetickets.successes.payall") {
|
||||
return "All hours paid out successfully.";
|
||||
}
|
||||
|
||||
if (key === "timetickets.errors.payall") {
|
||||
return `Error flagging hours. ${values.error || ""}`.trim();
|
||||
}
|
||||
|
||||
return translations[key] || key;
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock("../../contexts/Notifications/notificationContext.jsx", () => ({
|
||||
useNotification: () => notification
|
||||
}));
|
||||
|
||||
vi.mock("../responsive-table/responsive-table.component", () => {
|
||||
function ResponsiveTable({ dataSource = [], summary }) {
|
||||
return (
|
||||
<div data-testid="responsive-table">
|
||||
<div>{`rows:${dataSource.length}`}</div>
|
||||
{summary ? <div>{summary()}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ResponsiveTable.Summary = {
|
||||
Row: ({ children }) => <div>{children}</div>,
|
||||
Cell: ({ children }) => <div>{children}</div>
|
||||
};
|
||||
|
||||
return {
|
||||
default: ResponsiveTable
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("../feature-wrapper/feature-wrapper.component", () => ({
|
||||
HasFeatureAccess: () => true
|
||||
}));
|
||||
|
||||
vi.mock("../upsell/upsell.component", () => ({
|
||||
default: () => <div>Upsell</div>,
|
||||
upsellEnum: () => ({
|
||||
timetickets: {
|
||||
allocations: "allocations"
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock("../lock-wrapper/lock-wrapper.component", () => ({
|
||||
default: ({ children }) => children
|
||||
}));
|
||||
|
||||
describe("PayrollLaborAllocationsTable", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("shows a success notification after Pay All completes", async () => {
|
||||
axios.post
|
||||
.mockResolvedValueOnce({
|
||||
data: [
|
||||
{
|
||||
employeeid: "emp-1",
|
||||
mod_lbr_ty: "LAA",
|
||||
expectedHours: 4,
|
||||
claimedHours: 1
|
||||
}
|
||||
]
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
status: 200,
|
||||
data: [{ id: "ticket-1" }]
|
||||
});
|
||||
|
||||
const refetch = vi.fn();
|
||||
|
||||
render(
|
||||
<PayrollLaborAllocationsTable
|
||||
jobId="job-1"
|
||||
joblines={[{ id: "line-1", convertedtolbr: false }]}
|
||||
timetickets={[]}
|
||||
bodyshop={{
|
||||
features: {
|
||||
timetickets: true
|
||||
},
|
||||
employees: [{ id: "emp-1", first_name: "Avery", last_name: "Johnson" }]
|
||||
}}
|
||||
adjustments={[]}
|
||||
refetch={refetch}
|
||||
/>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(axios.post).toHaveBeenNthCalledWith(1, "/payroll/calculatelabor", {
|
||||
jobid: "job-1"
|
||||
});
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Pay All" }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(axios.post).toHaveBeenNthCalledWith(2, "/payroll/payall", {
|
||||
jobid: "job-1"
|
||||
});
|
||||
});
|
||||
|
||||
expect(notification.success).toHaveBeenCalledWith({
|
||||
title: "All hours paid out successfully."
|
||||
});
|
||||
expect(refetch).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shows the returned pay-all error message when payroll rejects the request", async () => {
|
||||
axios.post
|
||||
.mockResolvedValueOnce({
|
||||
data: [
|
||||
{
|
||||
employeeid: "emp-1",
|
||||
mod_lbr_ty: "LAA",
|
||||
expectedHours: 4,
|
||||
claimedHours: 1
|
||||
}
|
||||
]
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
status: 200,
|
||||
data: {
|
||||
success: false,
|
||||
error: "Not all hours have been assigned."
|
||||
}
|
||||
});
|
||||
|
||||
render(
|
||||
<PayrollLaborAllocationsTable
|
||||
jobId="job-1"
|
||||
joblines={[{ id: "line-1", convertedtolbr: false }]}
|
||||
timetickets={[]}
|
||||
bodyshop={{
|
||||
features: {
|
||||
timetickets: true
|
||||
},
|
||||
employees: [{ id: "emp-1", first_name: "Avery", last_name: "Johnson" }]
|
||||
}}
|
||||
adjustments={[]}
|
||||
/>
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(axios.post).toHaveBeenNthCalledWith(1, "/payroll/calculatelabor", {
|
||||
jobid: "job-1"
|
||||
});
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Pay All" }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(notification.error).toHaveBeenCalledWith({
|
||||
title: "Error flagging hours. Not all hours have been assigned."
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Button } from "antd";
|
||||
import ConfigListEmptyState from "./config-list-empty-state.component.jsx";
|
||||
|
||||
export const buildConfigListActionButton = ({ key, label, onClick, id }) => (
|
||||
<Button key={key} type="primary" block id={id} onClick={onClick}>
|
||||
{label}
|
||||
</Button>
|
||||
);
|
||||
|
||||
export const renderConfigListOrEmpty = ({ fields, actionLabel, renderItems }) =>
|
||||
fields.length === 0 ? <ConfigListEmptyState actionLabel={actionLabel} /> : renderItems();
|
||||
|
||||
export const buildSectionActionButton = (key, label, onClick, id) =>
|
||||
buildConfigListActionButton({ key, label, onClick, id });
|
||||
|
||||
export const renderListOrEmpty = (fields, actionLabel, renderItems) =>
|
||||
renderConfigListOrEmpty({ fields, actionLabel, renderItems });
|
||||
@@ -0,0 +1,11 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function ConfigListEmptyState({ actionLabel, minHeight = 96 }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="imex-form-row-empty-state" style={{ minHeight }}>
|
||||
{t("general.labels.click_to_begin", { action: actionLabel })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { UnorderedListOutlined } from "@ant-design/icons";
|
||||
|
||||
export const inlineFormRowTitleStyles = Object.freeze({
|
||||
input: Object.freeze({
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
borderRadius: 0,
|
||||
boxShadow: "none",
|
||||
paddingInline: 0,
|
||||
paddingBlock: 0,
|
||||
lineHeight: 1.35,
|
||||
flex: "1 1 auto",
|
||||
minWidth: 0,
|
||||
width: "100%"
|
||||
}),
|
||||
row: Object.freeze({
|
||||
display: "flex",
|
||||
gap: 6,
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
paddingInline: 4
|
||||
}),
|
||||
group: Object.freeze({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
paddingInline: 8,
|
||||
paddingBlock: 4,
|
||||
borderRadius: 10,
|
||||
border: "1px solid var(--imex-form-title-group-border)",
|
||||
background: "var(--imex-form-title-group-bg)",
|
||||
minWidth: 0,
|
||||
flex: "1 1 0"
|
||||
}),
|
||||
label: Object.freeze({
|
||||
color: "var(--ant-color-text-secondary)",
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
lineHeight: 1,
|
||||
whiteSpace: "nowrap",
|
||||
paddingInline: 6,
|
||||
paddingBlock: 3,
|
||||
borderRadius: 999,
|
||||
border: "1px solid var(--imex-form-title-label-border)",
|
||||
background: "var(--imex-form-title-label-bg)"
|
||||
}),
|
||||
handle: Object.freeze({
|
||||
color: "var(--ant-color-text-tertiary)",
|
||||
fontSize: 14,
|
||||
flex: "0 0 auto",
|
||||
marginRight: 2
|
||||
}),
|
||||
separator: Object.freeze({
|
||||
width: 1,
|
||||
height: 16,
|
||||
background: "color-mix(in srgb, var(--imex-form-surface-border) 58%, transparent)",
|
||||
borderRadius: 999,
|
||||
flex: "0 0 auto",
|
||||
marginInline: 2
|
||||
}),
|
||||
text: Object.freeze({
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 500,
|
||||
fontSize: "var(--ant-font-size-lg)",
|
||||
lineHeight: 1.2
|
||||
})
|
||||
});
|
||||
|
||||
export const INLINE_TITLE_INPUT_STYLE = inlineFormRowTitleStyles.input;
|
||||
export const INLINE_TITLE_ROW_STYLE = inlineFormRowTitleStyles.row;
|
||||
export const INLINE_TITLE_GROUP_STYLE = inlineFormRowTitleStyles.group;
|
||||
export const InlineTitleListIcon = UnorderedListOutlined;
|
||||
export const INLINE_TITLE_SWITCH_GROUP_STYLE = Object.freeze({
|
||||
...inlineFormRowTitleStyles.group,
|
||||
flex: "0 0 auto"
|
||||
});
|
||||
export const INLINE_TITLE_LABEL_STYLE = inlineFormRowTitleStyles.label;
|
||||
export const INLINE_TITLE_HANDLE_STYLE = inlineFormRowTitleStyles.handle;
|
||||
export const INLINE_TITLE_SEPARATOR_STYLE = inlineFormRowTitleStyles.separator;
|
||||
export const INLINE_TITLE_TEXT_STYLE = inlineFormRowTitleStyles.text;
|
||||
|
||||
export const INLINE_FORM_ROW_WRAP_TITLE_STYLES = Object.freeze({
|
||||
title: Object.freeze({
|
||||
whiteSpace: "normal",
|
||||
overflow: "visible",
|
||||
textOverflow: "unset"
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Form } from "antd";
|
||||
import LayoutFormRow from "./layout-form-row.component";
|
||||
|
||||
export default function InlineValidatedFormRow({ actions, errorNames = [], extraErrors = [], form, ...layoutFormRowProps }) {
|
||||
const normalizedErrorNames = Array.isArray(errorNames) ? errorNames : [errorNames];
|
||||
const normalizedExtraErrors = Array.isArray(extraErrors) ? extraErrors.filter(Boolean) : [extraErrors].filter(Boolean);
|
||||
|
||||
return (
|
||||
<Form.Item noStyle shouldUpdate>
|
||||
{() => {
|
||||
const fieldErrors = normalizedErrorNames.flatMap((name) => form?.getFieldError?.(name) || []);
|
||||
const errors = [...new Set([...fieldErrors, ...normalizedExtraErrors])];
|
||||
const resolvedClassName = [
|
||||
layoutFormRowProps.className,
|
||||
errors.length > 0 ? "imex-form-row--error" : null
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const normalizedActions = Array.isArray(actions) ? actions.filter(Boolean) : [actions].filter(Boolean);
|
||||
const resolvedActions =
|
||||
errors.length > 0
|
||||
? [
|
||||
<div
|
||||
key="inline-form-row-footer"
|
||||
className="imex-inline-form-row-errors"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: normalizedActions.length > 0 ? 8 : 0,
|
||||
width: "100%",
|
||||
textAlign: "left"
|
||||
}}
|
||||
>
|
||||
<Form.ErrorList errors={errors} />
|
||||
{normalizedActions.length > 0 ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>{normalizedActions}</div> : null}
|
||||
</div>
|
||||
]
|
||||
: normalizedActions.length > 0
|
||||
? normalizedActions
|
||||
: undefined;
|
||||
|
||||
return <LayoutFormRow {...layoutFormRowProps} className={resolvedClassName} actions={resolvedActions} />;
|
||||
}}
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Card, Col, Row } from "antd";
|
||||
import { Children, isValidElement } from "react";
|
||||
import { INLINE_FORM_ROW_WRAP_TITLE_STYLES } from "./inline-form-row-title.utils.js";
|
||||
import "./layout-form-row.styles.scss";
|
||||
|
||||
export default function LayoutFormRow({
|
||||
@@ -7,32 +8,45 @@ export default function LayoutFormRow({
|
||||
children,
|
||||
grow = false,
|
||||
noDivider = false,
|
||||
gutter = [16, 16], // Responsive gutter: horizontal, vertical
|
||||
titleOnly = false,
|
||||
wrapTitle = false,
|
||||
gutter,
|
||||
rowProps,
|
||||
|
||||
// Optional overrides if you ever need per-section customization
|
||||
surface = true,
|
||||
surfaceBg,
|
||||
surfaceHeaderBg,
|
||||
surfaceBorderColor,
|
||||
|
||||
...cardProps
|
||||
}) {
|
||||
const items = Children.toArray(children).filter(Boolean);
|
||||
if (items.length === 0) return null;
|
||||
const isCompactRow = noDivider;
|
||||
|
||||
const title = !noDivider && header ? header : undefined;
|
||||
const resolvedTitle = cardProps.title ?? title;
|
||||
const isHeaderOnly = titleOnly || items.length === 0;
|
||||
const hideBody = isHeaderOnly;
|
||||
|
||||
if (items.length === 0 && !resolvedTitle) return null;
|
||||
const resolvedGutter = gutter ?? [16, isCompactRow ? 8 : 16];
|
||||
|
||||
const bg = surfaceBg ?? (surface ? "var(--imex-form-surface)" : undefined);
|
||||
const headBg = surfaceHeaderBg ?? (surface ? "var(--imex-form-surface-head)" : undefined);
|
||||
const borderColor = surfaceBorderColor ?? (surface ? "var(--imex-form-surface-border)" : undefined);
|
||||
|
||||
const mergedStyles = mergeSemanticStyles(
|
||||
{
|
||||
...(wrapTitle ? INLINE_FORM_ROW_WRAP_TITLE_STYLES : null),
|
||||
header: {
|
||||
paddingInline: 16,
|
||||
background: headBg
|
||||
paddingInline: isHeaderOnly ? 8 : isCompactRow ? 12 : 16,
|
||||
background: headBg,
|
||||
borderBottomColor: borderColor
|
||||
},
|
||||
body: {
|
||||
padding: 16,
|
||||
padding: hideBody ? 0 : isCompactRow ? 12 : 16,
|
||||
display: hideBody ? "none" : undefined,
|
||||
background: bg
|
||||
}
|
||||
},
|
||||
@@ -40,28 +54,12 @@ export default function LayoutFormRow({
|
||||
);
|
||||
|
||||
const baseCardStyle = {
|
||||
marginBottom: ".8rem",
|
||||
marginBottom: isHeaderOnly ? "0" : isCompactRow ? "8px" : ".8rem",
|
||||
...(bg ? { background: bg } : null), // ensures the “circled area” is tinted
|
||||
...(borderColor ? { borderColor } : null),
|
||||
...cardProps.style
|
||||
};
|
||||
|
||||
// single child => just render it
|
||||
if (items.length === 1) {
|
||||
return (
|
||||
<Card
|
||||
{...cardProps}
|
||||
title={cardProps.title ?? title}
|
||||
size={cardProps.size ?? "small"}
|
||||
variant={cardProps.variant ?? "outlined"}
|
||||
className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
|
||||
style={baseCardStyle}
|
||||
styles={mergedStyles}
|
||||
>
|
||||
{items[0]}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const count = items.length;
|
||||
|
||||
// Modern responsive strategy leveraging Ant Design 6:
|
||||
@@ -125,20 +123,32 @@ export default function LayoutFormRow({
|
||||
return (
|
||||
<Card
|
||||
{...cardProps}
|
||||
title={cardProps.title ?? title}
|
||||
title={resolvedTitle}
|
||||
size={cardProps.size ?? "small"}
|
||||
variant={cardProps.variant ?? "outlined"}
|
||||
className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
|
||||
className={[
|
||||
"imex-form-row",
|
||||
isCompactRow ? "imex-form-row--compact" : null,
|
||||
isHeaderOnly ? "imex-form-row--title-only" : null,
|
||||
cardProps.className
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
style={baseCardStyle}
|
||||
styles={mergedStyles}
|
||||
>
|
||||
<Row gutter={gutter} wrap {...rowProps}>
|
||||
{items.map((child, idx) => (
|
||||
<Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
|
||||
{child}
|
||||
</Col>
|
||||
{!isHeaderOnly &&
|
||||
(items.length === 1 ? (
|
||||
items[0]
|
||||
) : (
|
||||
<Row gutter={resolvedGutter} wrap {...rowProps}>
|
||||
{items.map((child, idx) => (
|
||||
<Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
|
||||
{child}
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
))}
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -152,6 +162,7 @@ function mergeSemanticStyles(defaults, userStyles) {
|
||||
return {
|
||||
...defaults,
|
||||
...computed,
|
||||
title: { ...(defaults.title || {}), ...(computed.title || {}) },
|
||||
header: { ...defaults.header, ...(computed.header || {}) },
|
||||
body: { ...defaults.body, ...(computed.body || {}) }
|
||||
};
|
||||
@@ -161,6 +172,7 @@ function mergeSemanticStyles(defaults, userStyles) {
|
||||
return {
|
||||
...defaults,
|
||||
...userStyles,
|
||||
title: { ...(defaults.title || {}), ...(userStyles.title || {}) },
|
||||
header: { ...defaults.header, ...(userStyles.header || {}) },
|
||||
body: { ...defaults.body, ...(userStyles.body || {}) }
|
||||
};
|
||||
|
||||
@@ -13,6 +13,12 @@
|
||||
--imex-form-surface: #fafafa; /* subtle contrast vs white page */
|
||||
--imex-form-surface-head: #f5f5f5; /* header strip */
|
||||
--imex-form-surface-border: #d9d9d9; /* matches AntD-ish border */
|
||||
--imex-form-title-input-bg: rgba(255, 255, 255, 0.96);
|
||||
--imex-form-title-input-border: rgba(0, 0, 0, 0.08);
|
||||
--imex-form-title-group-bg: rgba(255, 255, 255, 0.72);
|
||||
--imex-form-title-group-border: rgba(0, 0, 0, 0.08);
|
||||
--imex-form-title-label-bg: rgba(0, 0, 0, 0.04);
|
||||
--imex-form-title-label-border: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Pick the selector that matches your app and remove the rest */
|
||||
@@ -20,6 +26,12 @@ html[data-theme="dark"] {
|
||||
--imex-form-surface: rgba(255, 255, 255, 0.01); /* subtle lift off page bg */
|
||||
--imex-form-surface-head: rgba(255, 255, 255, 0.06); /* slightly stronger for header strip */
|
||||
--imex-form-surface-border: rgba(5, 5, 5, 0.12);
|
||||
--imex-form-title-input-bg: rgba(255, 255, 255, 0.12);
|
||||
--imex-form-title-input-border: rgba(255, 255, 255, 0.2);
|
||||
--imex-form-title-group-bg: rgba(255, 255, 255, 0.08);
|
||||
--imex-form-title-group-border: rgba(255, 255, 255, 0.16);
|
||||
--imex-form-title-label-bg: rgba(255, 255, 255, 0.06);
|
||||
--imex-form-title-label-border: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.imex-form-row {
|
||||
@@ -38,18 +50,111 @@ html[data-theme="dark"] {
|
||||
border-color: var(--imex-form-surface-border);
|
||||
}
|
||||
|
||||
&.imex-form-row--error.ant-card {
|
||||
border-color: var(--ant-color-error);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ant-color-error) 24%, transparent);
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
background: var(--imex-form-surface-head);
|
||||
border-bottom-color: var(--imex-form-surface-border);
|
||||
}
|
||||
|
||||
&.imex-form-row--error {
|
||||
.ant-card-head,
|
||||
.ant-card-actions {
|
||||
border-color: color-mix(in srgb, var(--ant-color-error) 34%, var(--imex-form-surface-border));
|
||||
}
|
||||
}
|
||||
|
||||
&.imex-form-row--compact {
|
||||
.ant-card-head {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.ant-card-head-title,
|
||||
.ant-card-extra {
|
||||
padding-block: 2px;
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.imex-form-row--title-only {
|
||||
.ant-card-head {
|
||||
min-height: auto;
|
||||
padding-inline: 6px;
|
||||
padding-block: 0;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.ant-card-head-wrapper {
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-card-head-title,
|
||||
.ant-card-extra {
|
||||
padding-block: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-card-head-title {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: unset;
|
||||
font-size: var(--ant-font-size);
|
||||
line-height: 1.1;
|
||||
padding-inline: 4px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
display: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-input-number,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-select-selector,
|
||||
.ant-picker {
|
||||
background: var(--imex-form-title-input-bg);
|
||||
border-color: var(--imex-form-title-input-border);
|
||||
}
|
||||
|
||||
.ant-input-number-input {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
background: var(--imex-form-surface);
|
||||
}
|
||||
|
||||
.ant-card-actions {
|
||||
background: var(--imex-form-surface-head);
|
||||
border-top-color: var(--imex-form-surface-border);
|
||||
}
|
||||
|
||||
.ant-card-actions > li {
|
||||
margin: 10px 0;
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.ant-card-actions .ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-form-item:last-child {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Optional: tighter spacing on phones for better space usage */
|
||||
@media (max-width: 575px) {
|
||||
.ant-card-head {
|
||||
&:not(.imex-form-row--title-only) .ant-card-head {
|
||||
padding-inline: 12px;
|
||||
padding-block: 12px;
|
||||
}
|
||||
@@ -70,6 +175,14 @@ html[data-theme="dark"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-form-item:has(.imex-form-row--compact) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-form-item:has(.imex-form-row--title-only) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Better form item spacing on mobile */
|
||||
@media (max-width: 575px) {
|
||||
.ant-form-item {
|
||||
@@ -77,3 +190,24 @@ html[data-theme="dark"] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.imex-form-row-empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--ant-color-text-description);
|
||||
font-size: var(--ant-font-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.imex-inline-form-row-errors {
|
||||
color: var(--ant-color-error);
|
||||
|
||||
.ant-form-item-explain,
|
||||
.ant-form-item-explain-error,
|
||||
.ant-form-item-additional {
|
||||
color: var(--ant-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
|
||||
import { Button, Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
|
||||
import PartsOrderModalPriceChange from "./parts-order-modal-price-change.component";
|
||||
@@ -50,6 +51,7 @@ export function PartsOrderModalComponent({
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
const partsOrderLines = Form.useWatch(["parts_order_lines", "data"], form) || [];
|
||||
const handleClick = ({ item }) => {
|
||||
form.setFieldsValue({ comments: item.props.value });
|
||||
};
|
||||
@@ -128,10 +130,38 @@ export function PartsOrderModalComponent({
|
||||
{(fields, { remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<LayoutFormRow grow noDivider style={{ flex: 1 }}>
|
||||
{fields.map((field, index) => {
|
||||
const partsOrderLine = partsOrderLines[field.name] || {};
|
||||
|
||||
return (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<LayoutFormRow
|
||||
grow
|
||||
noDivider
|
||||
title={getFormListItemTitle(
|
||||
t("parts_orders.fields.line_desc"),
|
||||
index,
|
||||
partsOrderLine.line_desc,
|
||||
partsOrderLine.oem_partno
|
||||
)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
//span={8}
|
||||
label={t("parts_orders.fields.line_desc")}
|
||||
@@ -220,20 +250,9 @@ export function PartsOrderModalComponent({
|
||||
</Form.Item>
|
||||
)}
|
||||
</LayoutFormRow>
|
||||
<Space wrap size="small" align="center">
|
||||
<div>
|
||||
<DeleteFilled
|
||||
style={{ margin: "1rem" }}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</div>
|
||||
</Form.Item>
|
||||
))}
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Form, Input, InputNumber, Select, Typography } from "antd";
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Typography } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
@@ -15,6 +16,7 @@ export default connect(mapStateToProps, null)(PartsReceiveModalComponent);
|
||||
|
||||
export function PartsReceiveModalComponent({ bodyshop, form }) {
|
||||
const { t } = useTranslation();
|
||||
const partsOrderLines = Form.useWatch(["partsorderlines"], form) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -42,16 +44,43 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
|
||||
{(fields, { remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
{fields.map((field, index) => {
|
||||
const partsOrderLine = partsOrderLines[field.name] || {};
|
||||
|
||||
return (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<Form.Item hidden key={`${index}joblineid`} name={[field.name, "joblineid"]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<LayoutFormRow grow style={{ flex: 1 }}>
|
||||
<LayoutFormRow
|
||||
grow
|
||||
title={getFormListItemTitle(
|
||||
t("parts_orders.fields.line_desc"),
|
||||
index,
|
||||
partsOrderLine.line_desc,
|
||||
partsOrderLine.oem_partno
|
||||
)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
@@ -84,7 +113,7 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
|
||||
key={`${index}location`}
|
||||
name={[field.name, "location"]}
|
||||
>
|
||||
<Select
|
||||
<Select
|
||||
style={{ width: "10rem" }}
|
||||
options={bodyshop.md_parts_locations.map((loc, idx) => ({
|
||||
key: idx,
|
||||
@@ -101,16 +130,9 @@ export function PartsReceiveModalComponent({ bodyshop, form }) {
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<DeleteFilled
|
||||
style={{ margin: "1rem" }}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</div>
|
||||
</Form.Item>
|
||||
))}
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -2,10 +2,13 @@ import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Form, Input, Select, Space } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
export default function PartsEmailPresetsComponent() {
|
||||
const { t } = useTranslation();
|
||||
const form = Form.useFormInstance();
|
||||
const emailPresets = Form.useWatch(["md_to_emails"], form) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -14,31 +17,46 @@ export default function PartsEmailPresetsComponent() {
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.labels.md_to_emails_emails")}
|
||||
key={`${index}emails`}
|
||||
name={[field.name, "emails"]}
|
||||
>
|
||||
<Select mode="tags" tokenSeparators={[",", ";"]} />
|
||||
</Form.Item>
|
||||
{fields.map((field, index) => {
|
||||
const preset = emailPresets[field.name] || {};
|
||||
|
||||
<Space>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={getFormListItemTitle(t("general.labels.label"), index, preset.label, preset.emails)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.labels.md_to_emails_emails")}
|
||||
key={`${index}emails`}
|
||||
name={[field.name, "emails"]}
|
||||
>
|
||||
<Select mode="tags" tokenSeparators={[",", ";"]} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
|
||||
@@ -2,10 +2,13 @@ import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Form, Input, Space } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
export default function PartsLocationsComponent() {
|
||||
const { t } = useTranslation();
|
||||
const form = Form.useFormInstance();
|
||||
const partsLocations = Form.useWatch(["md_parts_locations"], form) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -14,34 +17,49 @@ export default function PartsLocationsComponent() {
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
className="imex-flex-row__margin"
|
||||
label={t("bodyshop.fields.partslocation")}
|
||||
key={`${index}`}
|
||||
name={[field.name]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
{fields.map((field, index) => {
|
||||
const location = partsLocations[field.name];
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={getFormListItemTitle(t("bodyshop.fields.partslocation"), index, location)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
<Form.Item
|
||||
className="imex-flex-row__margin"
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
label={t("bodyshop.fields.partslocation")}
|
||||
key={`${index}`}
|
||||
name={[field.name]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
|
||||
@@ -2,10 +2,13 @@ import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Form, Input, Space } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
export default function PartsOrderCommentsComponent() {
|
||||
const { t } = useTranslation();
|
||||
const form = Form.useFormInstance();
|
||||
const orderComments = Form.useWatch(["md_parts_order_comment"], form) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -14,45 +17,65 @@ export default function PartsOrderCommentsComponent() {
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("general.labels.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.comments")}
|
||||
key={`${index}comment`}
|
||||
name={[field.name, "comment"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input.TextArea autoSize />
|
||||
</Form.Item>
|
||||
{fields.map((field, index) => {
|
||||
const comment = orderComments[field.name] || {};
|
||||
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={getFormListItemTitle(
|
||||
t("parts_orders.fields.comments"),
|
||||
index,
|
||||
comment.label,
|
||||
comment.comment
|
||||
)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("general.labels.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("parts_orders.fields.comments")}
|
||||
key={`${index}comment`}
|
||||
name={[field.name, "comment"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input.TextArea autoSize />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
|
||||
@@ -58,6 +58,7 @@ export function ProductionColumnsComponent({
|
||||
|
||||
const columnKeys = columns.map((i) => i.key);
|
||||
const cols = dataSource({
|
||||
bodyshop,
|
||||
technician,
|
||||
data,
|
||||
state: tableState,
|
||||
|
||||
@@ -6,7 +6,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
import { store } from "../../redux/store";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import { TimeFormatter } from "../../utils/DateFormatter";
|
||||
import PhoneFormatter from "../../utils/PhoneFormatter";
|
||||
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
|
||||
import { onlyUnique } from "../../utils/arrayHelper";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
||||
import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
|
||||
@@ -28,6 +28,7 @@ import ProductionListColumnCategory from "./production-list-columns.status.categ
|
||||
import ProductionListColumnStatus from "./production-list-columns.status.component";
|
||||
import ProductionListColumnTouchTime from "./prodution-list-columns.touchtime.component";
|
||||
import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
|
||||
import ChatOpenButton from "../chat-open-button/chat-open-button.component.jsx";
|
||||
|
||||
const getEmployeeName = (employeeId, employees) => {
|
||||
const employee = employees.find((e) => e.id === employeeId);
|
||||
@@ -271,14 +272,24 @@ const productionListColumnsData = ({ technician, state, activeStatuses, data, bo
|
||||
dataIndex: "ownr_ph1",
|
||||
key: "ownr_ph1",
|
||||
ellipsis: true,
|
||||
render: (text, record) => <PhoneFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneFormatter>
|
||||
render: (text, record) =>
|
||||
technician ? (
|
||||
<PhoneNumberFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneNumberFormatter>
|
||||
) : (
|
||||
<ChatOpenButton type={record.ownr_ph1_ty} phone={record.ownr_ph1} jobid={record.id} />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: i18n.t("jobs.fields.ownr_ph2"),
|
||||
dataIndex: "ownr_ph2",
|
||||
key: "ownr_ph2",
|
||||
ellipsis: true,
|
||||
render: (text, record) => <PhoneFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneFormatter>
|
||||
render: (text, record) =>
|
||||
technician ? (
|
||||
<PhoneNumberFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneNumberFormatter>
|
||||
) : (
|
||||
<ChatOpenButton type={record.ownr_ph2_ty} phone={record.ownr_ph2} jobid={record.id} />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: i18n.t("jobs.fields.specialcoveragepolicy"),
|
||||
@@ -598,7 +609,19 @@ const productionListColumnsData = ({ technician, state, activeStatuses, data, bo
|
||||
ellipsis: true,
|
||||
|
||||
render: (text, record) => <TimeFormatter>{record.date_repairstarted}</TimeFormatter>
|
||||
}
|
||||
},
|
||||
...(bodyshop && bodyshop.rr_dealerid
|
||||
? [
|
||||
{
|
||||
title: i18n.t("jobs.fields.dms.id"),
|
||||
dataIndex: "dms_id",
|
||||
key: "dms_id",
|
||||
ellipsis: true,
|
||||
sorter: (a, b) => alphaSort(a.dms_id, b.dms_id),
|
||||
sortOrder: state.sortedInfo.columnKey === "dms_id" && state.sortedInfo.order
|
||||
}
|
||||
]
|
||||
: []),
|
||||
];
|
||||
};
|
||||
export default productionListColumnsData;
|
||||
|
||||
@@ -244,6 +244,7 @@ export function ProductionListConfigManager({
|
||||
nextConfig.columns.columnKeys.map((k) => {
|
||||
return {
|
||||
...ProductionListColumns({
|
||||
bodyshop,
|
||||
technician,
|
||||
state: ensureDefaultState(state),
|
||||
refetch,
|
||||
@@ -270,6 +271,7 @@ export function ProductionListConfigManager({
|
||||
activeConfig.columns.columnKeys.map((k) => {
|
||||
return {
|
||||
...ProductionListColumns({
|
||||
bodyshop,
|
||||
technician,
|
||||
state: ensureDefaultState(state),
|
||||
refetch,
|
||||
|
||||
@@ -8,7 +8,7 @@ import { INSERT_VACATION } from "../../graphql/employees.queries";
|
||||
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
|
||||
export default function ShopEmployeeAddVacation({ employee }) {
|
||||
export default function ShopEmployeeAddVacation({ employee, buttonProps }) {
|
||||
const { t } = useTranslation();
|
||||
const [insertVacation] = useMutation(INSERT_VACATION);
|
||||
|
||||
@@ -117,7 +117,7 @@ export default function ShopEmployeeAddVacation({ employee }) {
|
||||
|
||||
return (
|
||||
<Popover content={overlay} open={visibility}>
|
||||
<Button loading={loading} disabled={!employee?.active} onClick={handleClick}>
|
||||
<Button loading={loading} disabled={!employee?.active} onClick={handleClick} {...buttonProps}>
|
||||
{t("employees.actions.addvacation")}
|
||||
</Button>
|
||||
</Popover>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
|
||||
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
|
||||
import ResponsiveTable from "../responsive-table/responsive-table.component";
|
||||
import { useForm } from "antd/es/form/Form";
|
||||
import queryString from "query-string";
|
||||
import { useEffect } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
@@ -26,9 +25,24 @@ import { DateFormatter } from "../../utils/DateFormatter";
|
||||
import dayjs from "../../utils/day";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
|
||||
import FormsFieldChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
INLINE_TITLE_SWITCH_GROUP_STYLE,
|
||||
INLINE_TITLE_TEXT_STYLE,
|
||||
InlineTitleListIcon
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
|
||||
import FormItemEmail from "../form-items-formatted/email-form-item.component.jsx";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
@@ -37,19 +51,37 @@ const mapDispatchToProps = () => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
export function ShopEmployeesFormComponent({ bodyshop, form, onDirtyChange, isDirty }) {
|
||||
const { t } = useTranslation();
|
||||
const [form] = useForm();
|
||||
const [internalIsDirty, setInternalIsDirty] = useState(false);
|
||||
const resolvedIsDirty = typeof isDirty === "boolean" ? isDirty : internalIsDirty;
|
||||
const employeeNumber = Form.useWatch("employee_number", form);
|
||||
const firstName = Form.useWatch("first_name", form);
|
||||
const lastName = Form.useWatch("last_name", form);
|
||||
const employeeOptionsColProps = {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 12,
|
||||
lg: 8,
|
||||
xl: 8,
|
||||
xxl: 8
|
||||
};
|
||||
const history = useNavigate();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const [deleteVacation] = useMutation(DELETE_VACATION);
|
||||
const { error, data } = useQuery(QUERY_EMPLOYEE_BY_ID, {
|
||||
const { error, data, refetch } = useQuery(QUERY_EMPLOYEE_BY_ID, {
|
||||
variables: { id: search.employeeId },
|
||||
skip: !search.employeeId || search.employeeId === "new",
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only"
|
||||
});
|
||||
const notification = useNotification();
|
||||
const isNewEmployee = search.employeeId === "new";
|
||||
const currentEmployeeData = data?.employees_by_pk?.id === search.employeeId ? data.employees_by_pk : null;
|
||||
const employeeTitleName = [firstName, lastName].filter(Boolean).join(" ").trim();
|
||||
const employeeCardTitle =
|
||||
[employeeNumber, employeeTitleName].filter(Boolean).join(" - ") ||
|
||||
(isNewEmployee ? t("employees.actions.new") : t("bodyshop.labels.employees"));
|
||||
|
||||
const {
|
||||
treatments: { Enhanced_Payroll }
|
||||
@@ -59,13 +91,46 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
splitKey: bodyshop.imexshopid
|
||||
});
|
||||
|
||||
const updateDirtyState = useCallback(
|
||||
(nextDirtyState) => {
|
||||
setInternalIsDirty(nextDirtyState);
|
||||
onDirtyChange?.(nextDirtyState);
|
||||
},
|
||||
[onDirtyChange]
|
||||
);
|
||||
|
||||
const client = useApolloClient();
|
||||
useEffect(() => {
|
||||
if (data && data.employees_by_pk) form.setFieldsValue(data.employees_by_pk);
|
||||
else {
|
||||
form.resetFields();
|
||||
const clearEmployeeFormMeta = useCallback(() => {
|
||||
const fieldMeta = form.getFieldsError().map(({ name }) => ({
|
||||
name,
|
||||
touched: false,
|
||||
validating: false,
|
||||
errors: [],
|
||||
warnings: []
|
||||
}));
|
||||
|
||||
if (fieldMeta.length > 0) {
|
||||
form.setFields(fieldMeta);
|
||||
}
|
||||
}, [form, data, search.employeeId]);
|
||||
|
||||
updateDirtyState(false);
|
||||
}, [form, updateDirtyState]);
|
||||
|
||||
const resetEmployeeFormToCurrentData = useCallback(() => {
|
||||
form.resetFields();
|
||||
|
||||
if (currentEmployeeData) {
|
||||
form.setFieldsValue(currentEmployeeData);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
clearEmployeeFormMeta();
|
||||
});
|
||||
}, [clearEmployeeFormMeta, currentEmployeeData, form]);
|
||||
|
||||
useEffect(() => {
|
||||
resetEmployeeFormToCurrentData();
|
||||
}, [resetEmployeeFormToCurrentData, search.employeeId]);
|
||||
|
||||
const [updateEmployee] = useMutation(UPDATE_EMPLOYEE);
|
||||
const [insertEmployees] = useMutation(INSERT_EMPLOYEES);
|
||||
@@ -85,6 +150,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
updateDirtyState(false);
|
||||
void refetch();
|
||||
notification.success({
|
||||
title: t("employees.successes.save")
|
||||
});
|
||||
@@ -104,6 +171,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
variables: { employees: [{ ...values, shopid: bodyshop.id }] },
|
||||
refetchQueries: ["QUERY_EMPLOYEES"]
|
||||
}).then((r) => {
|
||||
updateDirtyState(false);
|
||||
search.employeeId = r.data.insert_employees.returning[0].id;
|
||||
history({ search: queryString.stringify(search) });
|
||||
notification.success({
|
||||
@@ -141,6 +209,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
key: "actions",
|
||||
render: (text, record) => (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
onClick={async () => {
|
||||
await deleteVacation({
|
||||
variables: { id: record.id },
|
||||
@@ -168,226 +238,354 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={employeeCardTitle}
|
||||
extra={
|
||||
<Button type="primary" onClick={() => form.submit()}>
|
||||
{t("general.actions.save")}
|
||||
<Button type="primary" onClick={() => form.submit()} disabled={!resolvedIsDirty} style={{ minWidth: 170 }}>
|
||||
{t("employees.actions.save_employee")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
|
||||
<LayoutFormRow>
|
||||
<Form.Item
|
||||
name="first_name"
|
||||
label={t("employees.fields.first_name")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employees.fields.last_name")}
|
||||
name="last_name"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="employee_number"
|
||||
label={t("employees.fields.employee_number")}
|
||||
validateTrigger="onBlur"
|
||||
hasFeedback
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
() => ({
|
||||
async validator(rule, value) {
|
||||
if (value) {
|
||||
const response = await client.query({
|
||||
query: CHECK_EMPLOYEE_NUMBER,
|
||||
variables: {
|
||||
employeenumber: value
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.employees_aggregate.aggregate.count === 0) {
|
||||
return Promise.resolve();
|
||||
} else if (
|
||||
response.data.employees_aggregate.nodes.length === 1 &&
|
||||
response.data.employees_aggregate.nodes[0].id === form.getFieldValue("id")
|
||||
) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t("employees.validation.unique_employee_number"));
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
<Form
|
||||
onFinish={handleFinish}
|
||||
autoComplete={"off"}
|
||||
layout="vertical"
|
||||
form={form}
|
||||
onValuesChange={() => {
|
||||
updateDirtyState(form.isFieldsTouched());
|
||||
}}
|
||||
>
|
||||
<FormsFieldChanged form={form} onReset={resetEmployeeFormToCurrentData} onDirtyChange={updateDirtyState} />
|
||||
<LayoutFormRow
|
||||
title={
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_ROW_STYLE,
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_TEXT_STYLE,
|
||||
marginRight: "auto"
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.labels.employee_options")}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
flexWrap: "wrap",
|
||||
marginLeft: "auto"
|
||||
}}
|
||||
>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_SWITCH_GROUP_STYLE
|
||||
}}
|
||||
>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.labels.active")}</div>
|
||||
<Form.Item noStyle valuePropName="checked" name="active">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_SWITCH_GROUP_STYLE
|
||||
}}
|
||||
>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.flat_rate")}</div>
|
||||
<Form.Item noStyle valuePropName="checked" name="flat_rate">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
>
|
||||
<Row gutter={[16, 16]} wrap>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="first_name"
|
||||
label={t("employees.fields.first_name")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employees.fields.pin")}
|
||||
name="pin"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow>
|
||||
<Form.Item label={t("employees.fields.active")} valuePropName="checked" name="active">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("employees.fields.flat_rate")} name="flat_rate" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="hire_date"
|
||||
label={t("employees.fields.hire_date")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("employees.fields.termination_date")} name="termination_date">
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employees.fields.user_email")}
|
||||
name="user_email"
|
||||
validateTrigger="onBlur"
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
async validator(rule, value) {
|
||||
const user_email = getFieldValue("user_email");
|
||||
|
||||
if (user_email && value) {
|
||||
const response = await client.query({
|
||||
query: QUERY_USERS_BY_EMAIL,
|
||||
variables: {
|
||||
email: user_email
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.users.length === 1) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t("bodyshop.validation.useremailmustexist"));
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.last_name")}
|
||||
name="last_name"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("employees.fields.external_id")} name="external_id">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="employee_number"
|
||||
label={t("employees.fields.employee_number")}
|
||||
validateTrigger="onBlur"
|
||||
hasFeedback
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
() => ({
|
||||
async validator(rule, value) {
|
||||
if (value) {
|
||||
const response = await client.query({
|
||||
query: CHECK_EMPLOYEE_NUMBER,
|
||||
variables: {
|
||||
employeenumber: value
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.employees_aggregate.aggregate.count === 0) {
|
||||
return Promise.resolve();
|
||||
} else if (
|
||||
response.data.employees_aggregate.nodes.length === 1 &&
|
||||
response.data.employees_aggregate.nodes[0].id === form.getFieldValue("id")
|
||||
) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t("employees.validation.unique_employee_number"));
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.pin")}
|
||||
name="pin"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="hire_date"
|
||||
label={t("employees.fields.hire_date")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.termination_date")} name="termination_date">
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.user_email")}
|
||||
name="user_email"
|
||||
validateTrigger="onBlur"
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
async validator(rule, value) {
|
||||
const user_email = getFieldValue("user_email");
|
||||
|
||||
if (user_email && value) {
|
||||
const response = await client.query({
|
||||
query: QUERY_USERS_BY_EMAIL,
|
||||
variables: {
|
||||
email: user_email
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.users.length === 1) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t("bodyshop.validation.useremailmustexist"));
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<FormItemEmail />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.external_id")} name="external_id">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</LayoutFormRow>
|
||||
<Form.List name={["rates"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("employees.fields.cost_center")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "cost_center"]}
|
||||
valuePropName="value"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
|
||||
...(bodyshop.cdk_dealerid ||
|
||||
bodyshop.pbs_serialnumber ||
|
||||
bodyshop.rr_dealerid ||
|
||||
Enhanced_Payroll.treatment === "on"
|
||||
? CiecaSelect(false, true)
|
||||
: bodyshop.md_responsibility_centers.costs.map((c) => ({
|
||||
value: c.name,
|
||||
label: c.name
|
||||
})))
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employees.fields.rate")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "rate"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<LayoutFormRow
|
||||
title={t("bodyshop.labels.employee_rates")}
|
||||
actions={[
|
||||
<Button
|
||||
type="dashed"
|
||||
key="add-rate"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
id="add-employee-rate-button"
|
||||
>
|
||||
<span id="new-employee-rate">{t("employees.actions.newrate")}</span>
|
||||
<span id="new-employee-rate">{t("employees.actions.addrate")}</span>
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employees.actions.addrate")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["rates", field.name, "cost_center"]]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.cost_center")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
size="small"
|
||||
options={[
|
||||
{ value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
|
||||
...(bodyshop.cdk_dealerid ||
|
||||
bodyshop.pbs_serialnumber ||
|
||||
bodyshop.rr_dealerid ||
|
||||
Enhanced_Payroll.treatment === "on"
|
||||
? CiecaSelect(false, true)
|
||||
: bodyshop.md_responsibility_centers.costs.map((c) => ({
|
||||
value: c.name,
|
||||
label: c.name
|
||||
})))
|
||||
]}
|
||||
style={{ width: "100%" }}
|
||||
styles={{
|
||||
selector: INLINE_TITLE_INPUT_STYLE
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("employees.fields.rate")}
|
||||
name={[field.name, "rate"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<InputNumber min={0} precision={2} style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</Form>
|
||||
|
||||
<ResponsiveTable
|
||||
title={() => <ShopEmployeeAddVacation employee={data && data.employees_by_pk} />}
|
||||
columns={columns}
|
||||
mobileColumnKeys={["start", "length", "actions"]}
|
||||
rowKey={"id"}
|
||||
dataSource={data?.employees_by_pk?.employee_vacations ?? []}
|
||||
/>
|
||||
<LayoutFormRow
|
||||
title={t("bodyshop.labels.employee_vacation")}
|
||||
actions={[
|
||||
<ShopEmployeeAddVacation
|
||||
key="add-vacation"
|
||||
employee={data && data.employees_by_pk}
|
||||
buttonProps={{
|
||||
type: "primary",
|
||||
block: true
|
||||
}}
|
||||
/>
|
||||
]}
|
||||
>
|
||||
{(data?.employees_by_pk?.employee_vacations ?? []).length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employees.actions.addvacation")} />
|
||||
) : (
|
||||
<div>
|
||||
<ResponsiveTable
|
||||
columns={columns}
|
||||
mobileColumnKeys={["start", "length", "actions"]}
|
||||
rowKey={"id"}
|
||||
dataSource={data?.employees_by_pk?.employee_vacations ?? []}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</LayoutFormRow>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,9 +4,16 @@ import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import ResponsiveTable from "../responsive-table/responsive-table.component";
|
||||
|
||||
export default function ShopEmployeesListComponent({ loading, employees }) {
|
||||
export default function ShopEmployeesListComponent({
|
||||
loading,
|
||||
employees,
|
||||
onRequestEmployeeChange,
|
||||
selectedEmployeeId
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const history = useNavigate();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
@@ -16,13 +23,33 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
|
||||
filteredInfo: { text: "" }
|
||||
});
|
||||
|
||||
const navigateToEmployee = (employeeId) => {
|
||||
if (onRequestEmployeeChange) {
|
||||
onRequestEmployeeChange(employeeId);
|
||||
return;
|
||||
}
|
||||
|
||||
history({
|
||||
search: queryString.stringify({
|
||||
...search,
|
||||
employeeId
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const clearEmployeeSelection = () => {
|
||||
const { employeeId, ...nextSearch } = search;
|
||||
void employeeId;
|
||||
history({
|
||||
search: queryString.stringify(nextSearch)
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnRowClick = (record) => {
|
||||
if (record) {
|
||||
search.employeeId = record.id;
|
||||
history({ search: queryString.stringify(search) });
|
||||
navigateToEmployee(record.id);
|
||||
} else {
|
||||
delete search.employeeId;
|
||||
history({ search: queryString.stringify(search) });
|
||||
clearEmployeeSelection();
|
||||
}
|
||||
};
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
@@ -30,7 +57,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: t("employees.fields.employee_number"),
|
||||
title: t("employees.labels.employee_number_short"),
|
||||
dataIndex: "employee_number",
|
||||
key: "employee_number",
|
||||
sorter: (a, b) => alphaSort(a.employee_number, b.employee_number),
|
||||
@@ -89,44 +116,39 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
|
||||
}
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<ResponsiveTable
|
||||
title={() => {
|
||||
return (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
search.employeeId = "new";
|
||||
history({ search: queryString.stringify(search) });
|
||||
}}
|
||||
>
|
||||
{t("employees.actions.new")}
|
||||
</Button>
|
||||
);
|
||||
}}
|
||||
loading={loading}
|
||||
pagination={{ placement: "top" }}
|
||||
columns={columns}
|
||||
mobileColumnKeys={["employee_number", "employee_name", "active"]}
|
||||
rowKey="id"
|
||||
dataSource={employees}
|
||||
rowSelection={{
|
||||
onSelect: (props) => {
|
||||
search.employeeId = props.id;
|
||||
history({ search: queryString.stringify(search) });
|
||||
},
|
||||
type: "radio",
|
||||
selectedRowKeys: [search.employeeId]
|
||||
}}
|
||||
onChange={handleTableChange}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
handleOnRowClick(record);
|
||||
}
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<LayoutFormRow
|
||||
title={t("bodyshop.labels.employees")}
|
||||
actions={[
|
||||
<Button key="new-employee" type="primary" block onClick={() => navigateToEmployee("new")}>
|
||||
{t("employees.actions.new")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
{employees.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employees.actions.new")} />
|
||||
) : (
|
||||
<ResponsiveTable
|
||||
loading={loading}
|
||||
pagination={{ placement: "top" }}
|
||||
columns={columns}
|
||||
mobileColumnKeys={["employee_number", "employee_name", "active"]}
|
||||
rowKey="id"
|
||||
dataSource={employees}
|
||||
rowSelection={{
|
||||
onSelect: (props) => navigateToEmployee(props.id),
|
||||
type: "radio",
|
||||
selectedRowKeys: [selectedEmployeeId || search.employeeId]
|
||||
}}
|
||||
onChange={handleTableChange}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
handleOnRowClick(record);
|
||||
}
|
||||
};
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,101 @@
|
||||
import { Drawer, Form, Grid } from "antd";
|
||||
import { useQuery } from "@apollo/client/react";
|
||||
import queryString from "query-string";
|
||||
import { connect } from "react-redux";
|
||||
import { useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
|
||||
import useConfirmDirtyFormNavigation from "../../hooks/useConfirmDirtyFormNavigation.jsx";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import ShopEmployeesFormComponent from "./shop-employees-form.component";
|
||||
import ShopEmployeesListComponent from "./shop-employees-list.component";
|
||||
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
|
||||
import "./shop-employees.styles.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({});
|
||||
|
||||
function ShopEmployeesContainer() {
|
||||
const [form] = Form.useForm();
|
||||
const [isEmployeeFormDirty, setIsEmployeeFormDirty] = useState(false);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const search = queryString.parse(location.search);
|
||||
const { loading, error, data } = useQuery(QUERY_EMPLOYEES, {
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only"
|
||||
});
|
||||
const screens = Grid.useBreakpoint();
|
||||
const hasSelectedEmployee = Boolean(search.employeeId);
|
||||
|
||||
const bpoints = {
|
||||
xs: "100%",
|
||||
sm: "100%",
|
||||
md: "92%",
|
||||
lg: "80%",
|
||||
xl: "80%",
|
||||
xxl: "80%"
|
||||
};
|
||||
|
||||
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 hasDirtyEmployeeForm = Boolean(search.employeeId) && (isEmployeeFormDirty || form.isFieldsTouched());
|
||||
const confirmCloseDirtyEmployee = useConfirmDirtyFormNavigation(hasDirtyEmployeeForm);
|
||||
|
||||
const navigateToEmployee = (employeeId) => {
|
||||
if (employeeId === search.employeeId) return;
|
||||
if (!confirmCloseDirtyEmployee()) return;
|
||||
|
||||
const nextSearch = { ...search, employeeId };
|
||||
setIsEmployeeFormDirty(false);
|
||||
navigate({
|
||||
search: queryString.stringify(nextSearch)
|
||||
});
|
||||
};
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
if (!confirmCloseDirtyEmployee()) return;
|
||||
|
||||
const nextSearch = { ...search };
|
||||
delete nextSearch.employeeId;
|
||||
setIsEmployeeFormDirty(false);
|
||||
navigate({
|
||||
search: queryString.stringify(nextSearch)
|
||||
});
|
||||
};
|
||||
|
||||
if (error) return <AlertComponent title={error.message} type="error" />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<RbacWrapper action="employees:page">
|
||||
<ShopEmployeesListComponent employees={data ? data.employees : []} loading={loading} />
|
||||
<ShopEmployeesFormComponent />
|
||||
</RbacWrapper>
|
||||
</div>
|
||||
<RbacWrapper action="employees:page">
|
||||
<div className="shop-employees-layout">
|
||||
<div className="shop-employees-layout__list">
|
||||
<ShopEmployeesListComponent
|
||||
employees={data ? data.employees : []}
|
||||
loading={loading}
|
||||
onRequestEmployeeChange={navigateToEmployee}
|
||||
selectedEmployeeId={search.employeeId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Drawer
|
||||
open={hasSelectedEmployee}
|
||||
destroyOnHidden
|
||||
placement="right"
|
||||
size={drawerPercentage}
|
||||
onClose={handleDrawerClose}
|
||||
>
|
||||
{hasSelectedEmployee ? (
|
||||
<ShopEmployeesFormComponent form={form} onDirtyChange={setIsEmployeeFormDirty} isDirty={isEmployeeFormDirty} />
|
||||
) : null}
|
||||
</Drawer>
|
||||
</RbacWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.shop-employees-layout {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.shop-employees-layout__list {
|
||||
min-width: 0;
|
||||
}
|
||||
304
client/src/components/shop-info/shop-info.color.utils.js
Normal file
304
client/src/components/shop-info/shop-info.color.utils.js
Normal file
@@ -0,0 +1,304 @@
|
||||
/**
|
||||
* Default translucent card color used for tinting card surfaces when no specific color is provided.
|
||||
* @type {{r: number, g: number, b: number, a: number}}
|
||||
*/
|
||||
export const DEFAULT_TRANSLUCENT_CARD_COLOR = {
|
||||
r: 22,
|
||||
g: 119,
|
||||
b: 255,
|
||||
a: 0.5
|
||||
};
|
||||
|
||||
/**
|
||||
* Rounds a color channel value to two decimal places.
|
||||
* @param value
|
||||
* @returns {number}
|
||||
*/
|
||||
const roundColorChannel = (value) => Math.round(value * 100) / 100;
|
||||
|
||||
/**
|
||||
* Rounds a tint percentage value to two decimal places.
|
||||
* @param value
|
||||
* @returns {number}
|
||||
*/
|
||||
const roundTintPercentage = (value) => Math.round(value * 100) / 100;
|
||||
|
||||
/**
|
||||
* Clamps an alpha value to the range [0, 1] and rounds it to two decimal places.
|
||||
* @param value
|
||||
* @returns {number}
|
||||
*/
|
||||
const clampAlpha = (value) => {
|
||||
const numericValue = Number(value);
|
||||
|
||||
if (!Number.isFinite(numericValue)) return 1;
|
||||
if (numericValue <= 0) return 0;
|
||||
if (numericValue >= 1) return 1;
|
||||
|
||||
return numericValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts an RGB color object to a hexadecimal color string.
|
||||
* @param param0
|
||||
* @param param0.r
|
||||
* @param param0.g
|
||||
* @param param0.b
|
||||
* @returns {`#${string}`}
|
||||
*/
|
||||
const rgbToHex = ({ r, g, b }) =>
|
||||
`#${[r, g, b].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
|
||||
|
||||
/**
|
||||
* Converts an RGB color object to an HSL color object.
|
||||
* @param param0
|
||||
* @param param0.r
|
||||
* @param param0.g
|
||||
* @param param0.b
|
||||
* @param param0.a
|
||||
* @returns {{h: number, s: number, l: number, a: number}|{h: number, s: number, l: number, a: number}}
|
||||
*/
|
||||
const rgbToHsl = ({ r, g, b, a = 1 }) => {
|
||||
const red = r / 255;
|
||||
const green = g / 255;
|
||||
const blue = b / 255;
|
||||
const max = Math.max(red, green, blue);
|
||||
const min = Math.min(red, green, blue);
|
||||
const delta = max - min;
|
||||
const lightness = (max + min) / 2;
|
||||
|
||||
if (delta === 0) {
|
||||
return { h: 0, s: 0, l: roundColorChannel(lightness), a };
|
||||
}
|
||||
|
||||
const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
|
||||
let hue;
|
||||
|
||||
switch (max) {
|
||||
case red:
|
||||
hue = (green - blue) / delta + (green < blue ? 6 : 0);
|
||||
break;
|
||||
case green:
|
||||
hue = (blue - red) / delta + 2;
|
||||
break;
|
||||
default:
|
||||
hue = (red - green) / delta + 4;
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
h: roundColorChannel(hue * 60),
|
||||
s: roundColorChannel(saturation),
|
||||
l: roundColorChannel(lightness),
|
||||
a
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts an RGB color object to an HSV color object.
|
||||
* @param param0
|
||||
* @param param0.r
|
||||
* @param param0.g
|
||||
* @param param0.b
|
||||
* @param param0.a
|
||||
* @returns {{h: number, s: number, v: number, a: number}}
|
||||
*/
|
||||
const rgbToHsv = ({ r, g, b, a = 1 }) => {
|
||||
const red = r / 255;
|
||||
const green = g / 255;
|
||||
const blue = b / 255;
|
||||
const max = Math.max(red, green, blue);
|
||||
const min = Math.min(red, green, blue);
|
||||
const delta = max - min;
|
||||
const saturation = max === 0 ? 0 : delta / max;
|
||||
let hue = 0;
|
||||
|
||||
if (delta !== 0) {
|
||||
switch (max) {
|
||||
case red:
|
||||
hue = (green - blue) / delta + (green < blue ? 6 : 0);
|
||||
break;
|
||||
case green:
|
||||
hue = (blue - red) / delta + 2;
|
||||
break;
|
||||
default:
|
||||
hue = (red - green) / delta + 4;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
h: roundColorChannel(hue * 60),
|
||||
s: roundColorChannel(saturation),
|
||||
v: roundColorChannel(max),
|
||||
a
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Builds a comprehensive color value object for a color picker component based on an input RGB color object.
|
||||
* @param rgb
|
||||
* @returns {{hex: `#${string}`, rgb: *, hsl: {h: number, s: number, l: number, a: number}, hsv: {h: number, s: number, v: number, a: number}, oldHue: number, source: string}}
|
||||
*/
|
||||
const buildPickerColorValue = (rgb) => {
|
||||
const hsl = rgbToHsl(rgb);
|
||||
|
||||
return {
|
||||
hex: rgbToHex(rgb),
|
||||
rgb: { ...rgb },
|
||||
hsl,
|
||||
hsv: rgbToHsv(rgb),
|
||||
oldHue: hsl.h,
|
||||
source: "rgb"
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Default color value object for the color picker component, derived from the default translucent card color.
|
||||
* @type {{hex: `#${string}`, rgb: *, hsl: {h: number, s: number, l: number, a: number}, hsv: {h: number, s: number, v: number, a: number}, oldHue: number, source: string}}
|
||||
*/
|
||||
export const DEFAULT_TRANSLUCENT_PICKER_COLOR = buildPickerColorValue(DEFAULT_TRANSLUCENT_CARD_COLOR);
|
||||
|
||||
/**
|
||||
* Parses a color string that may be a JSON representation of a color object. If the string is valid JSON and represents
|
||||
* a color, it returns the parsed object; otherwise, it returns the original string.
|
||||
* @param color
|
||||
* @returns {*|string}
|
||||
*/
|
||||
const parseJsonColorString = (color) => {
|
||||
if (typeof color !== "string") return color;
|
||||
|
||||
const trimmedColor = color.trim();
|
||||
if (!trimmedColor.startsWith("{") && !trimmedColor.startsWith("[")) return color;
|
||||
|
||||
try {
|
||||
return JSON.parse(trimmedColor);
|
||||
} catch {
|
||||
return color;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses a hexadecimal color string (e.g., "#RRGGBB" or "#RRGGBBAA") and returns an object containing the corresponding
|
||||
* RGB color value and alpha transparency. Supports both 3/4-digit and 6/8-digit hex formats.
|
||||
* @param color
|
||||
* @returns {{colorCssValue: string, alpha: number}|null}
|
||||
*/
|
||||
const parseHexColor = (color) => {
|
||||
if (typeof color !== "string") return null;
|
||||
|
||||
const normalizedHex = color.trim().replace(/^#/, "");
|
||||
|
||||
if (![3, 4, 6, 8].includes(normalizedHex.length) || /[^0-9a-f]/i.test(normalizedHex)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const expandedHex =
|
||||
normalizedHex.length <= 4
|
||||
? normalizedHex
|
||||
.split("")
|
||||
.map((character) => `${character}${character}`)
|
||||
.join("")
|
||||
: normalizedHex;
|
||||
|
||||
const hasAlpha = expandedHex.length === 8;
|
||||
const red = Number.parseInt(expandedHex.slice(0, 2), 16);
|
||||
const green = Number.parseInt(expandedHex.slice(2, 4), 16);
|
||||
const blue = Number.parseInt(expandedHex.slice(4, 6), 16);
|
||||
const alpha = hasAlpha ? Number.parseInt(expandedHex.slice(6, 8), 16) / 255 : 1;
|
||||
|
||||
return {
|
||||
colorCssValue: `rgb(${red}, ${green}, ${blue})`,
|
||||
alpha: clampAlpha(alpha)
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses an RGB or RGBA color string (e.g., "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)") and returns an object
|
||||
* containing the corresponding RGB color value and alpha transparency. Supports both integer and percentage formats for
|
||||
* color channels and alpha.
|
||||
* @param color
|
||||
* @returns {{colorCssValue: string, alpha: number}|null}
|
||||
*/
|
||||
const parseRgbColor = (color) => {
|
||||
if (typeof color !== "string") return null;
|
||||
|
||||
const rgbMatch = color.trim().match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i);
|
||||
|
||||
if (!rgbMatch) return null;
|
||||
|
||||
const [, red, green, blue, alpha = 1] = rgbMatch;
|
||||
|
||||
return {
|
||||
colorCssValue: `rgb(${red}, ${green}, ${blue})`,
|
||||
alpha: clampAlpha(alpha)
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Normalizes a color input into a consistent descriptor object containing a CSS color value and an alpha transparency
|
||||
* level.
|
||||
* @param color
|
||||
* @returns {{colorCssValue: string, alpha: number}|{colorCssValue: string, alpha: number}|*|{colorCssValue: string, alpha: number}|null}
|
||||
*/
|
||||
const getNormalizedColorDescriptor = (color) => {
|
||||
if (!color) return null;
|
||||
|
||||
const normalizedColor = parseJsonColorString(color);
|
||||
|
||||
if (typeof normalizedColor === "string") {
|
||||
return (
|
||||
parseHexColor(normalizedColor) ||
|
||||
parseRgbColor(normalizedColor) || {
|
||||
colorCssValue: normalizedColor,
|
||||
alpha: 1
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof normalizedColor === "object" && normalizedColor.rgb) {
|
||||
return getNormalizedColorDescriptor(normalizedColor.rgb);
|
||||
}
|
||||
|
||||
if (typeof normalizedColor === "object" && typeof normalizedColor.hex === "string") {
|
||||
return getNormalizedColorDescriptor(normalizedColor.hex);
|
||||
}
|
||||
|
||||
if (
|
||||
typeof normalizedColor === "object" &&
|
||||
normalizedColor.r !== undefined &&
|
||||
normalizedColor.g !== undefined &&
|
||||
normalizedColor.b !== undefined
|
||||
) {
|
||||
return {
|
||||
colorCssValue: `rgb(${normalizedColor.r}, ${normalizedColor.g}, ${normalizedColor.b})`,
|
||||
alpha: clampAlpha(normalizedColor.a)
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates CSS styles for tinting card surfaces based on a provided color input. The function normalizes the input
|
||||
* color,
|
||||
* @param color
|
||||
* @returns {{surfaceBg: string, surfaceHeaderBg: string, surfaceBorderColor: string}|{}}
|
||||
*/
|
||||
export const getTintedCardSurfaceStyles = (color) => {
|
||||
const normalizedColor = getNormalizedColorDescriptor(color);
|
||||
if (!normalizedColor?.colorCssValue) return {};
|
||||
|
||||
const tintStrength = clampAlpha(normalizedColor.alpha);
|
||||
if (tintStrength === 0) return {};
|
||||
|
||||
const backgroundTint = roundTintPercentage(10 * tintStrength);
|
||||
const headerTint = roundTintPercentage(18 * tintStrength);
|
||||
const borderTint = roundTintPercentage(30 * tintStrength);
|
||||
|
||||
return {
|
||||
surfaceBg: `color-mix(in srgb, ${normalizedColor.colorCssValue} ${backgroundTint}%, var(--imex-form-surface))`,
|
||||
surfaceHeaderBg: `color-mix(in srgb, ${normalizedColor.colorCssValue} ${headerTint}%, var(--imex-form-surface-head))`,
|
||||
surfaceBorderColor: `color-mix(in srgb, ${normalizedColor.colorCssValue} ${borderTint}%, var(--imex-form-surface-border))`
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { getTintedCardSurfaceStyles } from "./shop-info.color.utils";
|
||||
|
||||
describe("shop info color utilities", () => {
|
||||
it("scales card tint intensity with alpha for plain rgba values", () => {
|
||||
expect(
|
||||
getTintedCardSurfaceStyles({
|
||||
r: 22,
|
||||
g: 119,
|
||||
b: 255,
|
||||
a: 0.5
|
||||
})
|
||||
).toEqual({
|
||||
surfaceBg: "color-mix(in srgb, rgb(22, 119, 255) 5%, var(--imex-form-surface))",
|
||||
surfaceHeaderBg: "color-mix(in srgb, rgb(22, 119, 255) 9%, var(--imex-form-surface-head))",
|
||||
surfaceBorderColor: "color-mix(in srgb, rgb(22, 119, 255) 15%, var(--imex-form-surface-border))"
|
||||
});
|
||||
});
|
||||
|
||||
it("returns no tint when the selected color alpha is zero", () => {
|
||||
expect(
|
||||
getTintedCardSurfaceStyles({
|
||||
hex: "#1677ff",
|
||||
rgb: {
|
||||
r: 22,
|
||||
g: 119,
|
||||
b: 255,
|
||||
a: 0
|
||||
}
|
||||
})
|
||||
).toEqual({});
|
||||
});
|
||||
|
||||
it("supports legacy JSON-stringified picker values", () => {
|
||||
expect(
|
||||
getTintedCardSurfaceStyles(
|
||||
JSON.stringify({
|
||||
rgb: {
|
||||
r: 255,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0.25
|
||||
}
|
||||
})
|
||||
)
|
||||
).toEqual({
|
||||
surfaceBg: "color-mix(in srgb, rgb(255, 0, 0) 2.5%, var(--imex-form-surface))",
|
||||
surfaceHeaderBg: "color-mix(in srgb, rgb(255, 0, 0) 4.5%, var(--imex-form-surface-head))",
|
||||
surfaceBorderColor: "color-mix(in srgb, rgb(255, 0, 0) 7.5%, var(--imex-form-surface-border))"
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Button, Card, Tabs } from "antd";
|
||||
import queryString from "query-string";
|
||||
import { useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
@@ -21,6 +22,7 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
|
||||
import ShopInfoRoGuard from "./shop-info.roguard.component";
|
||||
import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
|
||||
import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
|
||||
import ShopInfoSectionNavigator from "./shop-info.section-navigator.component.jsx";
|
||||
import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
|
||||
import ShopInfoTaskPresets from "./shop-info.task-presets.component";
|
||||
import ShopInfoIntellipay from "./shop-intellipay-config.component";
|
||||
@@ -33,7 +35,7 @@ const mapDispatchToProps = () => ({
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoComponent);
|
||||
|
||||
export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
|
||||
export function ShopInfoComponent({ bodyshop, form, saveLoading, isDirty }) {
|
||||
const {
|
||||
treatments: { CriticalPartsScanning, Enhanced_Payroll }
|
||||
} = useTreatmentsWithConfig({
|
||||
@@ -47,6 +49,7 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
|
||||
const history = useNavigate();
|
||||
const location = useLocation();
|
||||
const search = queryString.parse(location.search);
|
||||
const tabsRef = useRef(null);
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
@@ -154,23 +157,35 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
|
||||
]
|
||||
: [])
|
||||
];
|
||||
const activeTabKey = search.subtab || tabItems[0]?.key;
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={<ShopInfoSectionNavigator tabsRef={tabsRef} activeTabKey={activeTabKey} />}
|
||||
extra={
|
||||
<Button type="primary" loading={saveLoading} onClick={() => form.submit()} id="shop-info-save-button">
|
||||
{t("general.actions.save")}
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={!isDirty || saveLoading}
|
||||
loading={saveLoading}
|
||||
onClick={() => form.submit()}
|
||||
id="shop-info-save-button"
|
||||
style={{ minWidth: 210 }}
|
||||
>
|
||||
{t("bodyshop.actions.save_shop_information")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Tabs
|
||||
defaultActiveKey={search.subtab}
|
||||
onChange={(key) =>
|
||||
history({
|
||||
search: `?tab=${search.tab}&subtab=${key}`
|
||||
})
|
||||
}
|
||||
items={tabItems}
|
||||
/>
|
||||
<div ref={tabsRef}>
|
||||
<Tabs
|
||||
activeKey={activeTabKey}
|
||||
onChange={(key) =>
|
||||
history({
|
||||
search: `?tab=${search.tab}&subtab=${key}`
|
||||
})
|
||||
}
|
||||
items={tabItems}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Card, Typography } from "antd";
|
||||
import { Card } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -15,9 +15,8 @@ function ShopInfoConsentComponent({ bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Typography.Title level={4}>{t("settings.title")}</Typography.Title>
|
||||
{<PhoneNumberConsentList bodyshop={bodyshop} />}
|
||||
<Card title={t("settings.title")}>
|
||||
<PhoneNumberConsentList bodyshop={bodyshop} />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useMutation, useQuery } from "@apollo/client/react";
|
||||
import { Form } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
@@ -15,6 +15,7 @@ import { FEATURE_CONFIGS, useFormDataPreservation } from "./useFormDataPreservat
|
||||
export default function ShopInfoContainer() {
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation();
|
||||
const [isShopInfoDirty, setIsShopInfoDirty] = useState(false);
|
||||
const [saveLoading, setSaveLoading] = useState(false);
|
||||
const [updateBodyshop] = useMutation(UPDATE_SHOP);
|
||||
const { loading, error, data, refetch } = useQuery(QUERY_BODYSHOP, {
|
||||
@@ -33,7 +34,10 @@ export default function ShopInfoContainer() {
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const combinedFeatureConfig = combineFeatureConfigs(FEATURE_CONFIGS.general, FEATURE_CONFIGS.responsibilitycenters);
|
||||
const combinedFeatureConfig = useMemo(
|
||||
() => combineFeatureConfigs(FEATURE_CONFIGS.general, FEATURE_CONFIGS.responsibilitycenters),
|
||||
[]
|
||||
);
|
||||
|
||||
// Use form data preservation for all shop-info features
|
||||
const { createSubmissionHandler, preserveHiddenFormData } = useFormDataPreservation(
|
||||
@@ -51,7 +55,10 @@ export default function ShopInfoContainer() {
|
||||
})
|
||||
.then(() => {
|
||||
notification.success({ title: t("bodyshop.successes.save") });
|
||||
refetch().then(() => form.resetFields());
|
||||
refetch().then(() => {
|
||||
form.resetFields();
|
||||
setIsShopInfoDirty(false);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
notification.error({
|
||||
@@ -66,6 +73,7 @@ export default function ShopInfoContainer() {
|
||||
form.resetFields();
|
||||
// After reset, re-apply hidden field preservation so values aren't wiped
|
||||
preserveHiddenFormData();
|
||||
setIsShopInfoDirty(false);
|
||||
}, [data, form, preserveHiddenFormData]);
|
||||
|
||||
if (error) return <AlertComponent title={error.message} type="error" />;
|
||||
@@ -76,6 +84,9 @@ export default function ShopInfoContainer() {
|
||||
layout="vertical"
|
||||
autoComplete="new-password"
|
||||
onFinish={handleFinish}
|
||||
onValuesChange={() => {
|
||||
setIsShopInfoDirty(form.isFieldsTouched());
|
||||
}}
|
||||
initialValues={
|
||||
data
|
||||
? data?.bodyshops?.[0]?.accountingconfig?.ClosingPeriod
|
||||
@@ -99,8 +110,8 @@ export default function ShopInfoContainer() {
|
||||
: null
|
||||
}
|
||||
>
|
||||
<FormsFieldChanged form={form} />
|
||||
<ShopInfoComponent form={form} saveLoading={saveLoading} />
|
||||
<FormsFieldChanged form={form} onDirtyChange={setIsShopInfoDirty} />
|
||||
<ShopInfoComponent form={form} saveLoading={saveLoading} isDirty={isShopInfoDirty} />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,7 +5,19 @@ import styled from "styled-components";
|
||||
import { TemplateList } from "../../utils/TemplateConstants";
|
||||
import ConfigFormTypes from "../config-form-components/config-form-types";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
INLINE_TITLE_SWITCH_GROUP_STYLE,
|
||||
InlineTitleListIcon
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
|
||||
const SelectorDiv = styled.div`
|
||||
.ant-form-item .ant-select {
|
||||
@@ -19,306 +31,386 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
|
||||
const TemplateListGenerated = TemplateList();
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("bodyshop.labels.intakechecklist")} id="intakechecklist">
|
||||
<Form.List name={["intakechecklist", "form"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.name")}
|
||||
key={`${index}name`}
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.type")}
|
||||
key={`${index}type`}
|
||||
name={[field.name, "type"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
if (form.getFieldValue(["intakechecklist", "form", index, "type"]) !== "slider") return null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.min")}
|
||||
key={`${index}min`}
|
||||
name={[field.name, "min"]}
|
||||
dependencies={[[field.name, "type"]]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.max")}
|
||||
key={`${index}max`}
|
||||
name={[field.name, "max"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.required")}
|
||||
key={`${index}required`}
|
||||
name={[field.name, "required"]}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("general.actions.add")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
<SelectorDiv>
|
||||
<Form.Item
|
||||
name={["intakechecklist", "templates"]}
|
||||
label={t("bodyshop.fields.intake.templates")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
options={Object.keys(TemplateListGenerated).map((i) => ({
|
||||
value: TemplateListGenerated[i].key,
|
||||
label: TemplateListGenerated[i].title
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["intakechecklist", "next_contact_hours"]}
|
||||
label={t("bodyshop.fields.intake.next_contact_hours")}
|
||||
>
|
||||
<InputNumber min={0} precision={0} />
|
||||
</Form.Item>
|
||||
<LayoutFormRow header={t("bodyshop.labels.intake_delivery")} id="intake-delivery">
|
||||
<Form.Item
|
||||
col={{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }}
|
||||
name={["intakechecklist", "templates"]}
|
||||
label={t("bodyshop.fields.intake.templates")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
options={Object.keys(TemplateListGenerated).map((i) => ({
|
||||
value: TemplateListGenerated[i].key,
|
||||
label: TemplateListGenerated[i].title
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
col={{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }}
|
||||
name={["deliverchecklist", "templates"]}
|
||||
label={t("bodyshop.fields.deliver.templates")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
options={Object.keys(TemplateListGenerated).map((i) => ({
|
||||
value: TemplateListGenerated[i].key,
|
||||
label: TemplateListGenerated[i].title
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
col={{ xs: 24, sm: 10, md: 8, lg: 8, xl: 8, xxl: 8 }}
|
||||
name={["intakechecklist", "next_contact_hours"]}
|
||||
label={t("bodyshop.fields.intake.next_contact_hours")}
|
||||
>
|
||||
<InputNumber min={0} precision={0} suffix="hrs" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
col={{ xs: 24, sm: 14, md: 16, lg: 16, xl: 16, xxl: 16 }}
|
||||
name={["deliverchecklist", "actual_delivery"]}
|
||||
label={t("bodyshop.fields.deliver.require_actual_delivery_date")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</SelectorDiv>
|
||||
|
||||
<LayoutFormRow header={t("bodyshop.labels.deliverchecklist")} id="deliverchecklist">
|
||||
<Form.List name={["deliverchecklist", "form"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<Form.List name={["intakechecklist", "form"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.intakechecklist")}
|
||||
id="intakechecklist"
|
||||
actions={[
|
||||
<Button
|
||||
key="add-intake-checklist-item"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.add_intake_checklist_item")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.name")}
|
||||
key={`${index}named`}
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.add_intake_checklist_item")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["intakechecklist", "form", field.name, "name"]]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.intake.name")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("jobs.fields.intake.name")}
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_SWITCH_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.intake.required")}</div>
|
||||
<Form.Item noStyle name={[field.name, "required"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.type")}
|
||||
key={`${index}typed`}
|
||||
name={[field.name, "type"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
|
||||
</Form.Item>
|
||||
>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.type")}
|
||||
key={`${index}type`}
|
||||
name={[field.name, "type"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.label")}
|
||||
key={`${index}labeld`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
if (form.getFieldValue(["intakechecklist", "form", index, "type"]) !== "slider")
|
||||
return null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.min")}
|
||||
key={`${index}min`}
|
||||
name={[field.name, "min"]}
|
||||
dependencies={[[field.name, "type"]]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.max")}
|
||||
key={`${index}max`}
|
||||
name={[field.name, "max"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
if (form.getFieldValue(["deliverchecklist", "form", index, "type"]) !== "slider") return null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.min")}
|
||||
key={`${index}mind`}
|
||||
name={[field.name, "min"]}
|
||||
dependencies={[[field.name, "type"]]}
|
||||
rules={[
|
||||
{
|
||||
required: form.getFieldValue([field.name, "type"]) === "slider"
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.max")}
|
||||
key={`${index}maxd`}
|
||||
name={[field.name, "max"]}
|
||||
dependencies={[[field.name, "type"]]}
|
||||
rules={[
|
||||
{
|
||||
required: form.getFieldValue([field.name, "type"]) === "slider"
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.required")}
|
||||
key={`${index}requiredd`}
|
||||
name={[field.name, "required"]}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("general.actions.add")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
<SelectorDiv>
|
||||
<Form.Item
|
||||
name={["deliverchecklist", "templates"]}
|
||||
label={t("bodyshop.fields.deliver.templates")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
options={Object.keys(TemplateListGenerated).map((i) => ({
|
||||
value: TemplateListGenerated[i].key,
|
||||
label: TemplateListGenerated[i].title
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["deliverchecklist", "actual_delivery"]}
|
||||
label={t("bodyshop.fields.deliver.require_actual_delivery_date")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</SelectorDiv>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
<Form.List name={["deliverchecklist", "form"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.deliverchecklist")}
|
||||
id="deliverchecklist"
|
||||
actions={[
|
||||
<Button
|
||||
key="add-delivery-checklist-item"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.add_delivery_checklist_item")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.add_delivery_checklist_item")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["deliverchecklist", "form", field.name, "name"]]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.intake.name")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("jobs.fields.intake.name")}
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_SWITCH_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.intake.required")}</div>
|
||||
<Form.Item noStyle name={[field.name, "required"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.type")}
|
||||
key={`${index}typed`}
|
||||
name={[field.name, "type"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={Object.keys(ConfigFormTypes).map((i) => ({ value: i, label: i }))} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.label")}
|
||||
key={`${index}labeld`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{() => {
|
||||
if (form.getFieldValue(["deliverchecklist", "form", index, "type"]) !== "slider")
|
||||
return null;
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.min")}
|
||||
key={`${index}mind`}
|
||||
name={[field.name, "min"]}
|
||||
dependencies={[[field.name, "type"]]}
|
||||
rules={[
|
||||
{
|
||||
required: form.getFieldValue([field.name, "type"]) === "slider"
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.intake.max")}
|
||||
key={`${index}maxd`}
|
||||
name={[field.name, "max"]}
|
||||
dependencies={[[field.name, "type"]]}
|
||||
rules={[
|
||||
{
|
||||
required: form.getFieldValue([field.name, "type"]) === "slider"
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,344 +3,392 @@ import { Button, Form, Input, Space } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
InlineTitleListIcon
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
|
||||
export default function ShopInfoLaborRates() {
|
||||
const { t } = useTranslation();
|
||||
const form = Form.useFormInstance();
|
||||
|
||||
return (
|
||||
<>
|
||||
<LayoutFormRow header={t("bodyshop.labels.shoprates")}>
|
||||
<Form.Item label={t("jobs.fields.rate_ats")} name={["shoprates", "rate_ats"]}>
|
||||
<CurrencyInput min={0} />
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_ats_flat")} name={["shoprates", "rate_ats_flat"]}>
|
||||
<CurrencyInput min={0} />
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("bodyshop.labels.laborrates")}>
|
||||
<Form.List name={["md_labor_rates"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<Form.List name={["md_labor_rates"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.laborrates")}
|
||||
actions={[
|
||||
<Button
|
||||
key="add-labor-rate"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.newlaborrate")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider={index === 0}>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.labor_rate_desc")}
|
||||
key={`${index}rate_label`}
|
||||
name={[field.name, "rate_label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.newlaborrate")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["md_labor_rates", field.name, "rate_label"]]}
|
||||
noDivider={index === 0}
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("jobs.fields.labor_rate_desc")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "rate_label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("jobs.fields.labor_rate_desc")}
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_laa")}
|
||||
key={`${index}rate_laa`}
|
||||
name={[field.name, "rate_laa"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lab")}
|
||||
key={`${index}rate_lab`}
|
||||
name={[field.name, "rate_lab"]}
|
||||
rules={[
|
||||
>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_laa")}
|
||||
key={`${index}rate_laa`}
|
||||
name={[field.name, "rate_laa"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lab")}
|
||||
key={`${index}rate_lab`}
|
||||
name={[field.name, "rate_lab"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lad")}
|
||||
key={`${index}rate_lad`}
|
||||
name={[field.name, "rate_lad"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lae")}
|
||||
key={`${index}rate_lae`}
|
||||
name={[field.name, "rate_lae"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_laf")}
|
||||
key={`${index}rate_laf`}
|
||||
name={[field.name, "rate_laf"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lag")}
|
||||
key={`${index}rate_lag`}
|
||||
name={[field.name, "rate_lag"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lam")}
|
||||
key={`${index}rate_lam`}
|
||||
name={[field.name, "rate_lam"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lar")}
|
||||
key={`${index}rate_lar`}
|
||||
name={[field.name, "rate_lar"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_las")}
|
||||
key={`${index}rate_las`}
|
||||
name={[field.name, "rate_las"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la1")}
|
||||
key={`${index}rate_la1`}
|
||||
name={[field.name, "rate_la1"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la2")}
|
||||
key={`${index}rate_la2`}
|
||||
name={[field.name, "rate_la2"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la3")}
|
||||
key={`${index}rate_la3`}
|
||||
name={[field.name, "rate_la3"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la4")}
|
||||
key={`${index}rate_la4`}
|
||||
name={[field.name, "rate_la4"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_mash")}
|
||||
key={`${index}rate_mash`}
|
||||
name={[field.name, "rate_mash"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_mapa")}
|
||||
key={`${index}rate_mapa`}
|
||||
name={[field.name, "rate_mapa"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_ma2s")}
|
||||
key={`${index}rate_ma2s`}
|
||||
name={[field.name, "rate_ma2s"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_ma3s")}
|
||||
key={`${index}rate_ma3s`}
|
||||
name={[field.name, "rate_ma3s"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
// <Form.Item
|
||||
// label={t("jobs.fields.rate_mabl")}
|
||||
// key={`${index}rate_mabl`}
|
||||
// name={[field.name, "rate_mabl"]}
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// //message: t("general.validation.required"),
|
||||
// },
|
||||
// ]}
|
||||
// >
|
||||
// <CurrencyInput min={0} />
|
||||
// </Form.Item>
|
||||
// <Form.Item
|
||||
// label={t("jobs.fields.rate_macs")}
|
||||
// key={`${index}rate_macs`}
|
||||
// name={[field.name, "rate_macs"]}
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// //message: t("general.validation.required"),
|
||||
// },
|
||||
// ]}
|
||||
// >
|
||||
// <CurrencyInput min={0} />
|
||||
// </Form.Item>
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_matd")}
|
||||
key={`${index}rate_matd`}
|
||||
name={[field.name, "rate_matd"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_mahw")}
|
||||
key={`${index}rate_mahw`}
|
||||
name={[field.name, "rate_mahw"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput prefix="$" min={0} />
|
||||
</Form.Item>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lad")}
|
||||
key={`${index}rate_lad`}
|
||||
name={[field.name, "rate_lad"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lae")}
|
||||
key={`${index}rate_lae`}
|
||||
name={[field.name, "rate_lae"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_laf")}
|
||||
key={`${index}rate_laf`}
|
||||
name={[field.name, "rate_laf"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lag")}
|
||||
key={`${index}rate_lag`}
|
||||
name={[field.name, "rate_lag"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lam")}
|
||||
key={`${index}rate_lam`}
|
||||
name={[field.name, "rate_lam"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_lar")}
|
||||
key={`${index}rate_lar`}
|
||||
name={[field.name, "rate_lar"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_las")}
|
||||
key={`${index}rate_las`}
|
||||
name={[field.name, "rate_las"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la1")}
|
||||
key={`${index}rate_la1`}
|
||||
name={[field.name, "rate_la1"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la2")}
|
||||
key={`${index}rate_la2`}
|
||||
name={[field.name, "rate_la2"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la3")}
|
||||
key={`${index}rate_la3`}
|
||||
name={[field.name, "rate_la3"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_la4")}
|
||||
key={`${index}rate_la4`}
|
||||
name={[field.name, "rate_la4"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_mash")}
|
||||
key={`${index}rate_mash`}
|
||||
name={[field.name, "rate_mash"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_mapa")}
|
||||
key={`${index}rate_mapa`}
|
||||
name={[field.name, "rate_mapa"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_ma2s")}
|
||||
key={`${index}rate_ma2s`}
|
||||
name={[field.name, "rate_ma2s"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_ma3s")}
|
||||
key={`${index}rate_ma3s`}
|
||||
name={[field.name, "rate_ma3s"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
{
|
||||
// <Form.Item
|
||||
// label={t("jobs.fields.rate_mabl")}
|
||||
// key={`${index}rate_mabl`}
|
||||
// name={[field.name, "rate_mabl"]}
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// //message: t("general.validation.required"),
|
||||
// },
|
||||
// ]}
|
||||
// >
|
||||
// <CurrencyInput min={0} />
|
||||
// </Form.Item>
|
||||
// <Form.Item
|
||||
// label={t("jobs.fields.rate_macs")}
|
||||
// key={`${index}rate_macs`}
|
||||
// name={[field.name, "rate_macs"]}
|
||||
// rules={[
|
||||
// {
|
||||
// required: true,
|
||||
// //message: t("general.validation.required"),
|
||||
// },
|
||||
// ]}
|
||||
// >
|
||||
// <CurrencyInput min={0} />
|
||||
// </Form.Item>
|
||||
}
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_matd")}
|
||||
key={`${index}rate_matd`}
|
||||
name={[field.name, "rate_matd"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.rate_mahw")}
|
||||
key={`${index}rate_mahw`}
|
||||
name={[field.name, "rate_mahw"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput min={0} />
|
||||
</Form.Item>
|
||||
<Space>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.rate_length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.newlaborrate")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Form, Typography } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
@@ -11,43 +12,45 @@ export default function ShopInfoNotificationsAutoadd({ bodyshop }) {
|
||||
const employeeOptions = bodyshop?.employees?.filter((e) => e.active && e.user_email && e.id) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Paragraph>{t("bodyshop.fields.notifications.description")}</Paragraph>
|
||||
<Text type="secondary">{t("bodyshop.labels.notifications.followers")}</Text>
|
||||
{employeeOptions.length > 0 ? (
|
||||
<Form.Item
|
||||
normalize={(value) => (value || []).filter((id) => typeof id === "string" && id.trim() !== "")}
|
||||
name="notification_followers"
|
||||
rules={[
|
||||
{
|
||||
type: "array",
|
||||
message: t("general.validation.array")
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
if (!value || value.length === 0) {
|
||||
return Promise.resolve(); // Allow empty array
|
||||
<LayoutFormRow header={t("bodyshop.labels.notification_options")}>
|
||||
<div>
|
||||
<Paragraph>{t("bodyshop.fields.notifications.description")}</Paragraph>
|
||||
<Text type="secondary">{t("bodyshop.labels.notifications.followers")}</Text>
|
||||
{employeeOptions.length > 0 ? (
|
||||
<Form.Item
|
||||
normalize={(value) => (value || []).filter((id) => typeof id === "string" && id.trim() !== "")}
|
||||
name="notification_followers"
|
||||
rules={[
|
||||
{
|
||||
type: "array",
|
||||
message: t("general.validation.array")
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
if (!value || value.length === 0) {
|
||||
return Promise.resolve(); // Allow empty array
|
||||
}
|
||||
const hasInvalid = value.some((id) => id == null || typeof id !== "string" || id.trim() === "");
|
||||
if (hasInvalid) {
|
||||
return Promise.reject(new Error(t("bodyshop.fields.notifications.invalid_followers")));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
const hasInvalid = value.some((id) => id == null || typeof id !== "string" || id.trim() === "");
|
||||
if (hasInvalid) {
|
||||
return Promise.reject(new Error(t("bodyshop.fields.notifications.invalid_followers")));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<EmployeeSearchSelectComponent
|
||||
style={{ minWidth: "100%" }}
|
||||
mode="multiple"
|
||||
options={employeeOptions}
|
||||
placeholder={t("bodyshop.fields.notifications.placeholder")}
|
||||
showEmail={true}
|
||||
/>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Text type="secondary">{t("bodyshop.fields.no_employees_available")}</Text>
|
||||
)}
|
||||
</div>
|
||||
]}
|
||||
>
|
||||
<EmployeeSearchSelectComponent
|
||||
style={{ minWidth: "100%" }}
|
||||
mode="multiple"
|
||||
options={employeeOptions}
|
||||
placeholder={t("bodyshop.fields.notifications.placeholder")}
|
||||
showEmail={true}
|
||||
/>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Text type="secondary">{t("bodyshop.fields.no_employees_available")}</Text>
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,19 @@ import { Button, Col, Form, Input, Row, Select, Space, Switch } from "antd";
|
||||
import { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
INLINE_TITLE_SWITCH_GROUP_STYLE,
|
||||
InlineTitleListIcon
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
import i18n from "i18next";
|
||||
|
||||
const predefinedPartTypes = ["PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"];
|
||||
@@ -68,195 +80,223 @@ export default function ShopInfoPartsScan({ form }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("bodyshop.labels.md_parts_scan")}>
|
||||
<Form.List name={["md_parts_scan"]}>
|
||||
{(fields, { add, remove, move }) => (
|
||||
<Form.List name={["md_parts_scan"]}>
|
||||
{(fields, { add, remove, move }) => (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.md_parts_scan")}
|
||||
actions={[
|
||||
<Button
|
||||
key="add-parts-scan-rule"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() =>
|
||||
add({
|
||||
field: "line_desc",
|
||||
operation: "contains",
|
||||
mark_critical: true,
|
||||
caseInsensitive: true
|
||||
})
|
||||
}
|
||||
>
|
||||
{t("bodyshop.actions.addpartsrule")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.map((field, index) => {
|
||||
const selectedField = watchedFields?.[index]?.field || "line_desc";
|
||||
const fieldType = getFieldType(selectedField);
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.addpartsrule")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
const selectedField = watchedFields?.[index]?.field || "line_desc";
|
||||
const fieldType = getFieldType(selectedField);
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<Row gutter={[16, 16]} align="middle">
|
||||
{/* Select Field */}
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.field")}
|
||||
name={[field.name, "field"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.field")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
options={fieldSelectOptions}
|
||||
onChange={() => {
|
||||
form.setFields([
|
||||
{ name: ["md_parts_scan", index, "operation"], value: "contains" },
|
||||
{ name: ["md_parts_scan", index, "value"], value: undefined }
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["md_parts_scan", field.name, "field"]]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.md_parts_scan.field")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "field"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.field")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
options={fieldSelectOptions}
|
||||
onChange={() => {
|
||||
form.setFields([
|
||||
{ name: ["md_parts_scan", index, "operation"], value: "contains" },
|
||||
{ name: ["md_parts_scan", index, "value"], value: undefined }
|
||||
]);
|
||||
}}
|
||||
style={{
|
||||
width: "100%"
|
||||
}}
|
||||
styles={{
|
||||
selector: INLINE_TITLE_INPUT_STYLE
|
||||
}}
|
||||
size="small"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
{fieldType === "string" && (
|
||||
<>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_SWITCH_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>
|
||||
{t("bodyshop.fields.md_parts_scan.caseInsensitive")}
|
||||
</div>
|
||||
<Form.Item noStyle name={[field.name, "caseInsensitive"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_SWITCH_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>
|
||||
{t("bodyshop.fields.md_parts_scan.mark_critical")}
|
||||
</div>
|
||||
<Form.Item noStyle name={[field.name, "mark_critical"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Row gutter={[16, 16]} align="middle">
|
||||
{/* Operation */}
|
||||
{fieldType !== "predefined" && fieldType && (
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.operation")}
|
||||
name={[field.name, "operation"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.operation")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={operationOptions[fieldType]} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{/* Operation */}
|
||||
{fieldType !== "predefined" && fieldType && (
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.operation")}
|
||||
name={[field.name, "operation"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.operation")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={operationOptions[fieldType]} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
{/* Value */}
|
||||
{fieldType && (
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.value")}
|
||||
name={[field.name, "value"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.value")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
{fieldType === "predefined" ? (
|
||||
<Select
|
||||
options={
|
||||
selectedField === "part_type"
|
||||
? predefinedPartTypes.map((type) => ({
|
||||
label: type,
|
||||
value: type
|
||||
}))
|
||||
: predefinedModLbrTypes.map((type) => ({
|
||||
label: type,
|
||||
value: type
|
||||
}))
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Input />
|
||||
)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{/* Value */}
|
||||
{fieldType && (
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.value")}
|
||||
name={[field.name, "value"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.value")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
{fieldType === "predefined" ? (
|
||||
{/* Update Field */}
|
||||
<Col span={4}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.update_field")}
|
||||
name={[field.name, "update_field"]}
|
||||
>
|
||||
<Select
|
||||
options={
|
||||
selectedField === "part_type"
|
||||
? predefinedPartTypes.map((type) => ({
|
||||
label: type,
|
||||
value: type
|
||||
}))
|
||||
: predefinedModLbrTypes.map((type) => ({
|
||||
label: type,
|
||||
value: type
|
||||
}))
|
||||
options={fieldSelectOptions}
|
||||
allowClear
|
||||
onClear={() =>
|
||||
form.setFields([{ name: ["md_parts_scan", index, "update_field"], value: null }])
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
{/* Update Field */}
|
||||
<Col span={4}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.update_value")}
|
||||
name={[field.name, "update_value"]}
|
||||
dependencies={[["md_parts_scan", index, "update_field"]]}
|
||||
tooltip={t("bodyshop.tooltips.md_parts_scan.update_value_tooltip")}
|
||||
rules={[
|
||||
{
|
||||
required: form.getFieldValue(["md_parts_scan", index, "update_field"]),
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.update_value")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{/* Case Sensitivity */}
|
||||
{fieldType === "string" && (
|
||||
<Col span={4}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.caseInsensitive")}
|
||||
name={[field.name, "caseInsensitive"]}
|
||||
valuePropName="checked"
|
||||
labelCol={{ span: 14 }}
|
||||
wrapperCol={{ span: 10 }}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{/* Mark Line as Critical */}
|
||||
<Col span={4}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.mark_critical")}
|
||||
name={[field.name, "mark_critical"]}
|
||||
valuePropName="checked"
|
||||
labelCol={{ span: 14 }}
|
||||
wrapperCol={{ span: 10 }}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
{/* Update Field */}
|
||||
<Col span={4}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.update_field")}
|
||||
name={[field.name, "update_field"]}
|
||||
>
|
||||
<Select
|
||||
options={fieldSelectOptions}
|
||||
allowClear
|
||||
onClear={() =>
|
||||
form.setFields([{ name: ["md_parts_scan", index, "update_field"], value: null }])
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
{/* Update Field */}
|
||||
<Col span={4}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_parts_scan.update_value")}
|
||||
name={[field.name, "update_value"]}
|
||||
dependencies={[["md_parts_scan", index, "update_field"]]}
|
||||
tooltip={t("bodyshop.tooltips.md_parts_scan.update_value_tooltip")}
|
||||
rules={[
|
||||
{
|
||||
required: form.getFieldValue(["md_parts_scan", index, "update_field"]),
|
||||
message: t("general.validation.required", {
|
||||
label: t("bodyshop.fields.md_parts_scan.update_value")
|
||||
})
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
{/* Actions */}
|
||||
<Col span={2}>
|
||||
<Space>
|
||||
<DeleteFilled onClick={() => remove(field.name)} />
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() =>
|
||||
add({
|
||||
field: "line_desc",
|
||||
operation: "contains",
|
||||
mark_critical: true,
|
||||
caseInsensitive: true
|
||||
})
|
||||
}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.addpartsrule")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
</LayoutFormRow>
|
||||
)}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ export function ShopInfoRbacComponent({ bodyshop }) {
|
||||
});
|
||||
return (
|
||||
<RbacWrapper action="shop:rbac">
|
||||
<LayoutFormRow>
|
||||
<LayoutFormRow header={t("bodyshop.labels.rbac_options")}>
|
||||
{[
|
||||
...(HasFeatureAccess({ featureName: "export", bodyshop })
|
||||
? [
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
import { Collapse, Divider, Form, Input, InputNumber, Space, Switch } from "antd";
|
||||
import { Col, Collapse, Form, Input, InputNumber, Row, Switch } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -6,6 +6,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
|
||||
import "./shop-info.responsibilitycenters.taxes.styles.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
@@ -16,53 +17,102 @@ const mapDispatchToProps = () => ({
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoResponsibilityCenters);
|
||||
|
||||
const taxRootColProps = {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: { flex: "0 0 280px" },
|
||||
xl: { flex: "0 0 240px" },
|
||||
xxl: { flex: "0 0 300px" }
|
||||
};
|
||||
|
||||
const taxTierFieldColProps = {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
lg: 6
|
||||
};
|
||||
|
||||
export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
const { t } = useTranslation();
|
||||
//Iteratively build the form items.
|
||||
const formItems = [];
|
||||
for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
|
||||
const section = [];
|
||||
const profileTaxCards = [];
|
||||
for (let typeNum = 1; typeNum <= 5; typeNum++) {
|
||||
const rootTaxItems = getRootTaxFormItems({ typeNum, bodyshop, t });
|
||||
|
||||
section.push(
|
||||
TaxFormItems({
|
||||
typeNum: tyCounter,
|
||||
rootElements: true,
|
||||
bodyshop
|
||||
})
|
||||
profileTaxCards.push(
|
||||
<LayoutFormRow key={`profile-tax-type-${typeNum}`} header={t("bodyshop.labels.responsibilitycenters.tax_type_card", { typeNum })}>
|
||||
<div style={{ display: "grid", rowGap: 12 }}>
|
||||
<Row gutter={[16, 16]} wrap>
|
||||
{rootTaxItems.map((item, index) => (
|
||||
<Col key={item.key ?? `tax-root-${typeNum}-${index}`} {...taxRootColProps}>
|
||||
{item}
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
<Row gutter={[12, 12]} wrap className="responsibility-centers-tax-tier-grid">
|
||||
{Array.from({ length: 5 }, (_, index) => {
|
||||
const typeNumIterator = index + 1;
|
||||
const tierTaxItems = getTierTaxFormItems({
|
||||
typeNum,
|
||||
typeNumIterator,
|
||||
t
|
||||
});
|
||||
|
||||
return (
|
||||
<Col
|
||||
key={`tax-tier-row-${typeNum}-${typeNumIterator}`}
|
||||
xs={24}
|
||||
className="responsibility-centers-tax-tier-grid__col"
|
||||
>
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.responsibilitycenters.tax_tier_card", { typeNumIterator })}
|
||||
style={{ marginBottom: 0 }}
|
||||
styles={{
|
||||
header: {
|
||||
paddingInline: 12
|
||||
},
|
||||
body: {
|
||||
padding: 12
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Row gutter={[12, 8]} wrap>
|
||||
{tierTaxItems.map((item, tierIndex) => (
|
||||
<Col key={item.key ?? `tax-tier-${typeNum}-${typeNumIterator}-${tierIndex}`} {...taxTierFieldColProps}>
|
||||
{item}
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</LayoutFormRow>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
for (let iterator = 1; iterator <= 5; iterator++) {
|
||||
section.push(
|
||||
TaxFormItems({
|
||||
typeNum: tyCounter,
|
||||
typeNumIterator: iterator,
|
||||
rootElements: false
|
||||
})
|
||||
);
|
||||
}
|
||||
formItems.push(<Space wrap>{section}</Space>);
|
||||
formItems.push(<Divider />);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider titlePlacement="left" orientation="horizontal" style={{ marginTop: ".8rem" }}>
|
||||
{t("jobs.labels.cieca_pft")}
|
||||
</Divider>
|
||||
{formItems}
|
||||
<LayoutFormRow header={t("jobs.labels.cieca_pft")}>
|
||||
<div>{profileTaxCards}</div>
|
||||
</LayoutFormRow>
|
||||
|
||||
<Collapse
|
||||
items={[
|
||||
{
|
||||
key: "cieca_pfl",
|
||||
label: t("jobs.labels.cieca_pfl"),
|
||||
forceRender: true,
|
||||
children: (
|
||||
<>
|
||||
<LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.default_tax_setup")}>
|
||||
<Collapse
|
||||
items={[
|
||||
{
|
||||
key: "cieca_pfl",
|
||||
label: t("jobs.labels.cieca_pfl"),
|
||||
forceRender: true,
|
||||
children: (
|
||||
<>
|
||||
<LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAB", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -89,7 +139,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -135,7 +185,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAD", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -162,7 +212,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -208,7 +258,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAE", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -235,7 +285,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -281,7 +331,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAF", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -308,7 +358,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -354,7 +404,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAG", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -381,7 +431,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -427,7 +477,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAM", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -454,7 +504,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -500,7 +550,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAR", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -527,7 +577,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -573,7 +623,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.cieca_pfl.lbr_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfl", "LAS", "lbr_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfl.lbr_tax_in")}
|
||||
@@ -673,7 +723,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={2} />
|
||||
<InputNumber min={0} max={100} precision={2} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -740,7 +790,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.materials.mat_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfm", "MAPA", "mat_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.materials.tax_ind")}
|
||||
@@ -767,7 +817,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -825,7 +875,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
label={t("jobs.fields.materials.mat_adjp")}
|
||||
name={["md_responsibility_centers", "cieca_pfm", "MASH", "mat_adjp"]}
|
||||
>
|
||||
<InputNumber min={-100} max={100} precision={4} />
|
||||
<InputNumber min={-100} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.materials.tax_ind")}
|
||||
@@ -852,7 +902,7 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
<InputNumber min={0} max={100} precision={4} suffix="%" />
|
||||
</Form.Item>
|
||||
);
|
||||
}}
|
||||
@@ -893,15 +943,15 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "cieca_pfo",
|
||||
label: t("jobs.labels.cieca_pfo"),
|
||||
forceRender: true,
|
||||
children: (
|
||||
<>
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "cieca_pfo",
|
||||
label: t("jobs.labels.cieca_pfo"),
|
||||
forceRender: true,
|
||||
children: (
|
||||
<>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.cieca_pfo.tow_t_in1")}
|
||||
@@ -2145,76 +2195,74 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
|
||||
<InputNumber min={0} max={100} precision={4} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</LayoutFormRow>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TaxFormItems({ typeNum, typeNumIterator, rootElements, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (rootElements)
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_tax_type", {
|
||||
typeNum,
|
||||
typeNumIterator
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `tax_type${typeNum}`]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenters.state_tax")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "name"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountdesc"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_accountitem")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountitem"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{bodyshopHasDmsKey(bodyshop) && (
|
||||
function getRootTaxFormItems({ typeNum, bodyshop, t }) {
|
||||
return [
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_type`}
|
||||
label={t("bodyshop.fields.responsibilitycenter_tax_type", { typeNum })}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `tax_type${typeNum}`]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_name`}
|
||||
label={t("bodyshop.fields.responsibilitycenters.state_tax")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "name"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_accountdesc`}
|
||||
label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountdesc"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_accountitem`}
|
||||
label={t("bodyshop.fields.responsibilitycenter_accountitem")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountitem"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>,
|
||||
...(bodyshopHasDmsKey(bodyshop)
|
||||
? [
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_dms_acctnumber`}
|
||||
label={t("bodyshop.fields.dms.dms_acctnumber")}
|
||||
rules={[
|
||||
{
|
||||
@@ -2226,71 +2274,64 @@ function TaxFormItems({ typeNum, typeNumIterator, rootElements, bodyshop }) {
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_tax_tier", {
|
||||
typeNum,
|
||||
typeNumIterator
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_tier${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber precision={0} min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_tax_thres", {
|
||||
typeNum,
|
||||
typeNumIterator
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_thres${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_tax_rate", {
|
||||
typeNum,
|
||||
typeNumIterator
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_rate${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.responsibilitycenter_tax_sur", {
|
||||
typeNum,
|
||||
typeNumIterator
|
||||
})}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_sur${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
]
|
||||
: [])
|
||||
];
|
||||
}
|
||||
|
||||
function getTierTaxFormItems({ typeNum, typeNumIterator, t }) {
|
||||
return [
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_tier_${typeNumIterator}`}
|
||||
label={t("bodyshop.labels.responsibilitycenters.tax_tier_short")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_tier${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber precision={0} min={0} />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_threshold_${typeNumIterator}`}
|
||||
label={t("bodyshop.labels.responsibilitycenters.tax_threshold_short")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_thres${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_rate_${typeNumIterator}`}
|
||||
label={t("bodyshop.labels.responsibilitycenters.tax_rate_short")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_rate${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} suffix="%" />
|
||||
</Form.Item>,
|
||||
<Form.Item
|
||||
key={`tax_type_${typeNum}_surcharge_${typeNumIterator}`}
|
||||
label={t("bodyshop.labels.responsibilitycenters.tax_surcharge_short")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_sur${typeNumIterator}`]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} suffix="%" />
|
||||
</Form.Item>
|
||||
];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
.responsibility-centers-tax-tier-grid__col.ant-col {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.responsibility-centers-tax-tier-grid__col.ant-col {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.responsibility-centers-tax-tier-grid__col.ant-col {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2400px) {
|
||||
.responsibility-centers-tax-tier-grid__col.ant-col {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ export default function ShopInfoRoGuard({ form }) {
|
||||
{() => {
|
||||
const disabled = !form.getFieldValue(["md_ro_guard", "enabled"]);
|
||||
return (
|
||||
<LayoutFormRow noDivider>
|
||||
<LayoutFormRow header={t("bodyshop.labels.md_ro_guard_options")}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_ro_guard.totalgppercent_minimum")}
|
||||
name={["md_ro_guard", "totalgppercent_minimum"]}
|
||||
@@ -32,7 +32,7 @@ export default function ShopInfoRoGuard({ form }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={1} disabled={disabled} />
|
||||
<InputNumber min={0} max={100} precision={1} suffix="%" disabled={disabled} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { CloseOutlined, DeleteFilled, HolderOutlined } from "@ant-design/icons";
|
||||
import { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
|
||||
import { arrayMove, rectSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button, Form, Select, Space } from "antd";
|
||||
import { useState } from "react";
|
||||
import { ChromePicker } from "react-color";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { DEFAULT_TRANSLUCENT_CARD_COLOR, getTintedCardSurfaceStyles } from "./shop-info.color.utils";
|
||||
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -24,10 +31,341 @@ const SelectorDiv = styled.div`
|
||||
.ant-form-item .ant-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.production-status-color-title-select {
|
||||
min-width: 160px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.production-status-color-title-select .ant-select-selector {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.production-status-color-title-select .ant-select-selection-item,
|
||||
.production-status-color-title-select .ant-select-selection-placeholder {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.job-statuses-source-select .ant-select-selector {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.job-statuses-source-select .ant-select-selection-wrap {
|
||||
gap: 4px 0;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
margin-inline-end: 6px;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper .ant-select-selection-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 30px;
|
||||
min-width: 132px;
|
||||
max-width: 100%;
|
||||
padding-inline: 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
background: var(--ant-color-fill-quaternary);
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
cursor: grab;
|
||||
margin-inline-end: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper .job-statuses-source-tag-handle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper .ant-select-selection-item-content {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper .ant-select-selection-item:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper .ant-select-selection-item-remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
color: var(--ant-color-text-tertiary);
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper .ant-select-selection-item-remove:hover {
|
||||
background: var(--ant-color-fill-secondary);
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
|
||||
.job-statuses-source-tag-wrapper--dragging {
|
||||
opacity: 0.55;
|
||||
}
|
||||
`;
|
||||
|
||||
const normalizeStatuses = (statuses) => [...new Set((statuses || []).map((item) => item?.trim()).filter(Boolean))];
|
||||
|
||||
const getTranslatedDragRect = (active, delta) => {
|
||||
const rect = active?.rect?.current?.initial || active?.rect?.current?.translated;
|
||||
|
||||
if (!rect) return null;
|
||||
|
||||
const x = delta?.x || 0;
|
||||
const y = delta?.y || 0;
|
||||
|
||||
return {
|
||||
left: rect.left + x,
|
||||
right: rect.right + x,
|
||||
top: rect.top + y,
|
||||
bottom: rect.bottom + y,
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
};
|
||||
};
|
||||
|
||||
const isPointWithinRect = (point, rect) => {
|
||||
if (!point || !rect) return false;
|
||||
|
||||
return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
|
||||
};
|
||||
|
||||
const DraggableStatusTag = ({ label, value, closable, onClose }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: value
|
||||
});
|
||||
const labelText = String(label ?? value);
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={setNodeRef}
|
||||
className={`job-statuses-source-tag-wrapper ${isDragging ? "job-statuses-source-tag-wrapper--dragging" : ""}`}
|
||||
data-status-tag-value={value}
|
||||
style={{ transform: CSS.Transform.toString(transform), transition }}
|
||||
onMouseDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<span
|
||||
className="ant-select-selection-item"
|
||||
onMouseDown={(event) => {
|
||||
if (event.target.closest(".ant-select-selection-item-remove")) {
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onClick={(event) => {
|
||||
if (event.target.closest(".ant-select-selection-item-remove")) {
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
}}
|
||||
title={labelText}
|
||||
>
|
||||
<span className="job-statuses-source-tag-handle" aria-hidden>
|
||||
<HolderOutlined />
|
||||
</span>
|
||||
<span className="ant-select-selection-item-content">{labelText}</span>
|
||||
{closable ? (
|
||||
<span
|
||||
className="ant-select-selection-item-remove"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onClose?.(event);
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<CloseOutlined />
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const SortableStatusesSelect = ({ value, onChange, mode = "tags", options = [] }) => {
|
||||
const statuses = normalizeStatuses(value);
|
||||
const isTagsMode = mode === "tags";
|
||||
const [knownStatuses, setKnownStatuses] = useState(statuses);
|
||||
const selectWrapperRef = useRef(null);
|
||||
const dragRectRef = useRef(null);
|
||||
const tagSensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 6
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
const handleStatusesChange = (nextValues) => {
|
||||
const normalizedNextValues = normalizeStatuses(nextValues);
|
||||
if (isTagsMode) {
|
||||
setKnownStatuses((currentKnownStatuses) => normalizeStatuses([...currentKnownStatuses, ...normalizedNextValues]));
|
||||
}
|
||||
onChange?.(normalizedNextValues);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isTagsMode) {
|
||||
setKnownStatuses((currentKnownStatuses) => normalizeStatuses([...currentKnownStatuses, ...statuses]));
|
||||
}
|
||||
}, [isTagsMode, statuses]);
|
||||
|
||||
const shouldMoveStatusToEnd = (activeId, dragRect) => {
|
||||
const selectRect =
|
||||
selectWrapperRef.current?.querySelector?.(".ant-select-selector")?.getBoundingClientRect?.() ||
|
||||
selectWrapperRef.current?.getBoundingClientRect?.();
|
||||
if (!dragRect || !selectRect) return false;
|
||||
|
||||
const dragLeadingPoint = {
|
||||
x: dragRect.left,
|
||||
y: dragRect.top
|
||||
};
|
||||
const dragTrailingPoint = {
|
||||
x: dragRect.right,
|
||||
y: dragRect.bottom
|
||||
};
|
||||
|
||||
if (!isPointWithinRect(dragLeadingPoint, selectRect) && !isPointWithinRect(dragTrailingPoint, selectRect)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const trailingStatus = statuses.filter((status) => status !== activeId).at(-1);
|
||||
if (!trailingStatus) return false;
|
||||
|
||||
const trailingTagNode = selectWrapperRef.current?.querySelector?.(
|
||||
`.job-statuses-source-tag-wrapper[data-status-tag-value="${CSS.escape(String(trailingStatus))}"]`
|
||||
);
|
||||
const trailingTagRect = trailingTagNode?.getBoundingClientRect?.();
|
||||
|
||||
if (!trailingTagRect) return false;
|
||||
|
||||
const isOnTrailingRow = dragRect.bottom >= trailingTagRect.top && dragRect.top <= trailingTagRect.bottom;
|
||||
if (isOnTrailingRow) {
|
||||
return dragRect.left >= trailingTagRect.right - 4;
|
||||
}
|
||||
|
||||
return dragRect.top >= trailingTagRect.bottom - 4;
|
||||
};
|
||||
|
||||
const handleStatusSortEnd = ({ active, over, delta }) => {
|
||||
const oldIndex = statuses.indexOf(active.id);
|
||||
const dragRect = dragRectRef.current || getTranslatedDragRect(active, delta);
|
||||
dragRectRef.current = null;
|
||||
|
||||
if (oldIndex < 0) return;
|
||||
|
||||
if (!over) {
|
||||
if (oldIndex !== statuses.length - 1 && shouldMoveStatusToEnd(active.id, dragRect)) {
|
||||
onChange?.(arrayMove(statuses, oldIndex, statuses.length - 1));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (active.id === over.id) return;
|
||||
|
||||
const newIndex = statuses.indexOf(over.id);
|
||||
|
||||
if (newIndex < 0) return;
|
||||
|
||||
onChange?.(arrayMove(statuses, oldIndex, newIndex));
|
||||
};
|
||||
|
||||
const renderStatusTag = ({ label, value: tagValue, closable, onClose }) => {
|
||||
return <DraggableStatusTag closable={closable} label={label} onClose={onClose} value={tagValue} />;
|
||||
};
|
||||
|
||||
const statusSelectOptions = isTagsMode
|
||||
? knownStatuses.map((status) => ({
|
||||
value: status,
|
||||
label: status
|
||||
}))
|
||||
: options;
|
||||
|
||||
if (statuses.length === 0) {
|
||||
return (
|
||||
<Select
|
||||
className="job-statuses-source-select"
|
||||
mode={mode}
|
||||
onChange={handleStatusesChange}
|
||||
options={statusSelectOptions}
|
||||
value={statuses}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={selectWrapperRef}>
|
||||
<DndContext
|
||||
collisionDetection={closestCenter}
|
||||
onDragCancel={() => {
|
||||
dragRectRef.current = null;
|
||||
}}
|
||||
onDragEnd={handleStatusSortEnd}
|
||||
onDragMove={({ active, delta }) => {
|
||||
dragRectRef.current = getTranslatedDragRect(active, delta);
|
||||
}}
|
||||
sensors={tagSensors}
|
||||
>
|
||||
<SortableContext items={statuses} strategy={rectSortingStrategy}>
|
||||
<Select
|
||||
className="job-statuses-source-select"
|
||||
mode={mode}
|
||||
onChange={handleStatusesChange}
|
||||
options={statusSelectOptions}
|
||||
tagRender={renderStatusTag}
|
||||
value={statuses}
|
||||
/>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
const { t } = useTranslation();
|
||||
const allStatuses = normalizeStatuses(Form.useWatch(["md_ro_statuses", "statuses"], form));
|
||||
const productionStatuses = Form.useWatch(["md_ro_statuses", "production_statuses"], form) || [];
|
||||
const additionalBoardStatuses = Form.useWatch(["md_ro_statuses", "additional_board_statuses"], form) || [];
|
||||
const productionColors = Form.useWatch(["md_ro_statuses", "production_colors"], form) || [];
|
||||
const statusOptions = allStatuses;
|
||||
const statusSelectOptions = statusOptions.map((item) => ({ value: item, label: item }));
|
||||
const availableProductionStatuses = [...new Set([...productionStatuses, ...additionalBoardStatuses].filter(Boolean))];
|
||||
|
||||
const {
|
||||
treatments: { Production_List_Status_Colors }
|
||||
@@ -37,117 +375,119 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
splitKey: bodyshop.imexshopid
|
||||
});
|
||||
|
||||
const [options, setOptions] = useState(form.getFieldValue(["md_ro_statuses", "statuses"]) || []);
|
||||
|
||||
const [productionStatus, setProductionStatus] = useState(
|
||||
(form.getFieldValue(["md_ro_statuses", "production_statuses"]) || []).concat(
|
||||
form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]) || []
|
||||
) || []
|
||||
);
|
||||
|
||||
const handleBlur = () => {
|
||||
setOptions(form.getFieldValue(["md_ro_statuses", "statuses"]));
|
||||
setProductionStatus(
|
||||
form
|
||||
.getFieldValue(["md_ro_statuses", "production_statuses"])
|
||||
.concat(form.getFieldValue(["md_ro_statuses", "additional_board_statuses"]))
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SelectorDiv id="jobstatus">
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "statuses"]}
|
||||
label={t("bodyshop.labels.alljobstatuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" onBlur={handleBlur} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "active_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.active_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "pre_production_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.pre_production_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "production_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.production_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "post_production_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.post_production_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "ready_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.ready_statuses")}
|
||||
rules={[
|
||||
{
|
||||
//required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "additional_board_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.additional_board_statuses")}
|
||||
rules={[
|
||||
{
|
||||
//required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" options={options.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<LayoutFormRow noDivider>
|
||||
<LayoutFormRow grow header={t("bodyshop.labels.job_status_options")}>
|
||||
<div>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "statuses"]}
|
||||
label={t("bodyshop.labels.alljobstatuses")}
|
||||
required
|
||||
rules={[
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
const populatedStatuses = normalizeStatuses(value);
|
||||
|
||||
if (populatedStatuses.length === 0) {
|
||||
return Promise.reject(
|
||||
new Error(
|
||||
t("general.validation.required", {
|
||||
label: t("bodyshop.labels.alljobstatuses")
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (populatedStatuses.length !== (value || []).filter(Boolean).length) {
|
||||
return Promise.reject(new Error(t("bodyshop.errors.duplicate_job_status")));
|
||||
}
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "active_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.active_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect mode="multiple" options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "pre_production_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.pre_production_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect mode="multiple" options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "production_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.production_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect mode="multiple" options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "post_production_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.post_production_statuses")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect mode="multiple" options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "ready_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.ready_statuses")}
|
||||
rules={[
|
||||
{
|
||||
//required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect mode="multiple" options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_ro_statuses", "additional_board_statuses"]}
|
||||
label={t("bodyshop.fields.statuses.additional_board_statuses")}
|
||||
rules={[
|
||||
{
|
||||
//required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SortableStatusesSelect mode="multiple" options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow header={t("general.actions.defaults")}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_scheduled")}
|
||||
rules={[
|
||||
@@ -158,7 +498,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_scheduled"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_arrived")}
|
||||
@@ -170,7 +510,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_arrived"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_exported")}
|
||||
@@ -182,7 +522,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_exported"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_imported")}
|
||||
@@ -194,7 +534,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_imported"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_invoiced")}
|
||||
@@ -206,7 +546,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_invoiced"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_completed")}
|
||||
@@ -218,7 +558,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_completed"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_delivered")}
|
||||
@@ -230,7 +570,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_delivered"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.default_void")}
|
||||
@@ -242,73 +582,122 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
|
||||
]}
|
||||
name={["md_ro_statuses", "default_void"]}
|
||||
>
|
||||
<Select options={options.map((item) => ({ value: item, label: item }))} />
|
||||
<Select options={statusSelectOptions} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
{Production_List_Status_Colors.treatment === "on" && (
|
||||
<LayoutFormRow grow header={t("bodyshop.fields.statuses.production_colors")} id="production_colors">
|
||||
<Form.List name={["md_ro_statuses", "production_colors"]}>
|
||||
{(fields, { add, remove }) => {
|
||||
return (
|
||||
<Form.List name={["md_ro_statuses", "production_colors"]}>
|
||||
{(fields, { add, remove }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
grow
|
||||
header={t("bodyshop.fields.statuses.production_colors")}
|
||||
id="production_colors"
|
||||
actions={[
|
||||
<Button
|
||||
key="add-production-status-color"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add({
|
||||
color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.add_production_status_color")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
<Space size="large" wrap>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<Space orientation="vertical">
|
||||
<div style={{ display: "flex" }}>
|
||||
<Form.Item
|
||||
style={{ flex: 1 }}
|
||||
label={t("jobs.fields.status")}
|
||||
key={`${index}status`}
|
||||
name={[field.name, "status"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select options={productionStatus.map((item) => ({ value: item, label: item }))} />
|
||||
</Form.Item>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.statuses.color")}
|
||||
key={`${index}color`}
|
||||
name={[field.name, "color"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.add_production_status_color")} />
|
||||
) : (
|
||||
<Space size="large" wrap align="start">
|
||||
{fields.map((field, index) => {
|
||||
const productionColor = productionColors[field.name] || {};
|
||||
const productionColorSurfaceStyles = getTintedCardSurfaceStyles(productionColor.color);
|
||||
const selectedProductionColorStatuses = productionColors
|
||||
.map((item) => item?.status)
|
||||
.filter(Boolean);
|
||||
const productionColorStatusOptions = [
|
||||
...new Set([productionColor.status, ...availableProductionStatuses])
|
||||
]
|
||||
.filter(Boolean)
|
||||
.filter(
|
||||
(status) =>
|
||||
status === productionColor.status || !selectedProductionColorStatuses.includes(status)
|
||||
);
|
||||
|
||||
return (
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["md_ro_statuses", "production_colors", field.name, "status"]]}
|
||||
key={field.key}
|
||||
noDivider
|
||||
title={
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}status`}
|
||||
name={[field.name, "status"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
className="production-status-color-title-select"
|
||||
variant="borderless"
|
||||
placeholder={getFormListItemTitle(
|
||||
t("jobs.fields.status"),
|
||||
index,
|
||||
productionColor.status
|
||||
)}
|
||||
options={productionColorStatusOptions.map((item) => ({
|
||||
value: item,
|
||||
label: item
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
}
|
||||
extra={
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
{...productionColorSurfaceStyles}
|
||||
style={{ width: 260, marginBottom: 0 }}
|
||||
>
|
||||
<ColorPicker />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
))}
|
||||
</Space>
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("general.actions.add")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<div>
|
||||
<Form.Item
|
||||
key={`${index}color`}
|
||||
name={[field.name, "color"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ColorPicker />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</InlineValidatedFormRow>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
)}
|
||||
</SelectorDiv>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
|
||||
import { DeleteFilled, ReloadOutlined } from "@ant-design/icons";
|
||||
import { Button, Col, Form, Input, InputNumber, Row, Select, Space, Switch, TimePicker, Tooltip } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -7,8 +7,16 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
||||
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { ColorPicker } from "./shop-info.rostatus.component";
|
||||
import {
|
||||
DEFAULT_TRANSLUCENT_CARD_COLOR,
|
||||
DEFAULT_TRANSLUCENT_PICKER_COLOR,
|
||||
getTintedCardSurfaceStyles
|
||||
} from "./shop-info.color.utils";
|
||||
import "./shop-info.scheduling.styles.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
@@ -17,301 +25,514 @@ const mapDispatchToProps = () => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
const WORKING_DAYS = [
|
||||
{ key: "sunday", labelKey: "general.labels.sunday" },
|
||||
{ key: "monday", labelKey: "general.labels.monday" },
|
||||
{ key: "tuesday", labelKey: "general.labels.tuesday" },
|
||||
{ key: "wednesday", labelKey: "general.labels.wednesday" },
|
||||
{ key: "thursday", labelKey: "general.labels.thursday" },
|
||||
{ key: "friday", labelKey: "general.labels.friday" },
|
||||
{ key: "saturday", labelKey: "general.labels.saturday" }
|
||||
];
|
||||
|
||||
const APPOINTMENT_COLOR_PICKER_STYLES = {
|
||||
default: {
|
||||
wrap: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "12px",
|
||||
alignItems: "flex-start"
|
||||
},
|
||||
hue: {
|
||||
flex: "1 1 180px",
|
||||
height: "12px",
|
||||
position: "relative",
|
||||
marginTop: "20px"
|
||||
},
|
||||
swatches: {
|
||||
flex: "1 1 160px"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const SCHEDULING_BUCKET_COLOR_PICKER_STYLES = {
|
||||
default: {
|
||||
picker: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "color-mix(in srgb, var(--imex-form-surface) 92%, transparent)",
|
||||
boxShadow: "none",
|
||||
border: "1px solid color-mix(in srgb, var(--imex-form-surface-border) 72%, transparent)",
|
||||
borderRadius: "8px",
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden"
|
||||
},
|
||||
saturation: {
|
||||
width: "100%",
|
||||
paddingBottom: "48%",
|
||||
position: "relative",
|
||||
borderRadius: "8px 8px 0 0",
|
||||
overflow: "hidden"
|
||||
},
|
||||
body: {
|
||||
padding: "12px"
|
||||
},
|
||||
controls: {
|
||||
display: "flex",
|
||||
gap: "10px"
|
||||
},
|
||||
color: {
|
||||
width: "28px"
|
||||
},
|
||||
swatch: {
|
||||
marginTop: "0",
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
borderRadius: "999px"
|
||||
},
|
||||
toggles: {
|
||||
flex: "1"
|
||||
},
|
||||
hue: {
|
||||
height: "10px",
|
||||
position: "relative",
|
||||
marginBottom: "8px"
|
||||
},
|
||||
alpha: {
|
||||
height: "10px",
|
||||
position: "relative"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const SECTION_TITLE_INPUT_STYLE = {
|
||||
background: "color-mix(in srgb, var(--imex-form-surface) 78%, transparent)",
|
||||
border: "1px solid color-mix(in srgb, var(--imex-form-surface-border) 72%, transparent)",
|
||||
borderRadius: 6,
|
||||
fontWeight: 500
|
||||
};
|
||||
|
||||
const SECTION_TITLE_INPUT_ROW_STYLE = {
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
minWidth: 180,
|
||||
maxWidth: "100%"
|
||||
};
|
||||
|
||||
const SECTION_TITLE_INPUT_GROUP_STYLE = {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
minWidth: 0
|
||||
};
|
||||
|
||||
const SECTION_TITLE_INPUT_LABEL_STYLE = {
|
||||
fontSize: 12,
|
||||
lineHeight: 1.1,
|
||||
opacity: 0.75,
|
||||
whiteSpace: "nowrap"
|
||||
};
|
||||
|
||||
export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const appointmentColors = Form.useWatch(["appt_colors"], form) || form.getFieldValue(["appt_colors"]) || [];
|
||||
const schedulingBuckets = Form.useWatch(["ssbuckets"], form) || form.getFieldValue(["ssbuckets"]) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow id="shopinfo-scheduling">
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_length")}
|
||||
name={"appt_length"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={15} precision={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_start_time")}
|
||||
name={"schedule_start_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_start_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_end_time")}
|
||||
name={"schedule_end_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_end_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["appt_alt_transport"]}
|
||||
label={t("bodyshop.fields.appt_alt_transport")}
|
||||
rules={[
|
||||
{
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "dailyhrslimit"]}
|
||||
label={t("bodyshop.fields.ss_configuration.dailyhrslimit")}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "nobusinessdays"]}
|
||||
label={t("bodyshop.fields.ss_configuration.nobusinessdays")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_lost_sale_reasons"]}
|
||||
label={t("bodyshop.fields.md_lost_sale_reasons")}
|
||||
rules={[
|
||||
{
|
||||
// required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<LayoutFormRow grow header={t("bodyshop.labels.scheduling")} id="shopinfo-scheduling">
|
||||
<>
|
||||
<Form.Item
|
||||
name={["appt_alt_transport"]}
|
||||
label={t("bodyshop.fields.appt_alt_transport")}
|
||||
rules={[
|
||||
{
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_lost_sale_reasons"]}
|
||||
label={t("bodyshop.fields.md_lost_sale_reasons")}
|
||||
rules={[
|
||||
{
|
||||
// required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<Row gutter={[16, 0]} wrap>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_length")}
|
||||
name={"appt_length"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={15} precision={0} suffix="min" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_start_time")}
|
||||
name={"schedule_start_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_start_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_end_time")}
|
||||
name={"schedule_end_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_end_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "dailyhrslimit"]}
|
||||
label={t("bodyshop.fields.ss_configuration.dailyhrslimit")}
|
||||
>
|
||||
<InputNumber min={0} suffix="hrs" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "nobusinessdays"]}
|
||||
label={t("bodyshop.fields.ss_configuration.nobusinessdays")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
</LayoutFormRow>
|
||||
<Divider titlePlacement="left">{t("bodyshop.labels.workingdays")}</Divider>
|
||||
<Space wrap size="large" id="workingdays">
|
||||
<Form.Item label={t("general.labels.sunday")} name={["workingdays", "sunday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.monday")} name={["workingdays", "monday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.tuesday")} name={["workingdays", "tuesday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.wednesday")} name={["workingdays", "wednesday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.thursday")} name={["workingdays", "thursday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.friday")} name={["workingdays", "friday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.saturday")} name={["workingdays", "saturday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
|
||||
<Form.List name={["appt_colors"]}>
|
||||
<LayoutFormRow header={t("bodyshop.labels.workingdays")} id="workingdays">
|
||||
<Space wrap size="middle">
|
||||
{WORKING_DAYS.map(({ key, labelKey }) => (
|
||||
<Form.Item key={key} label={t(labelKey)} name={["workingdays", key]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
))}
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
<Form.List name={["appt_colors"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.apptcolors")}
|
||||
id="apptcolors"
|
||||
actions={[
|
||||
<Button
|
||||
key="add-appointment-color"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add({
|
||||
color: {
|
||||
...DEFAULT_TRANSLUCENT_PICKER_COLOR,
|
||||
rgb: { ...DEFAULT_TRANSLUCENT_PICKER_COLOR.rgb }
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.addapptcolor")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.addapptcolor")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
const appointmentColor =
|
||||
appointmentColors[field.name] || form.getFieldValue(["appt_colors", field.name]) || {};
|
||||
const appointmentColorSurfaceStyles = getTintedCardSurfaceStyles(appointmentColor.color);
|
||||
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["appt_colors", field.name, "label"]]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={{ minWidth: 180, maxWidth: "100%" }}>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}aptcolorlabel`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.appt_colors.label")}
|
||||
style={SECTION_TITLE_INPUT_STYLE}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
{...appointmentColorSurfaceStyles}
|
||||
>
|
||||
<Form.Item
|
||||
key={`${index}aptcolorcolor`}
|
||||
name={[field.name, "color"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ColorpickerFormItemComponent styles={APPOINTMENT_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
{HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
|
||||
<Form.List name={["ssbuckets"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_colors.label")}
|
||||
key={`${index}aptcolorlabel`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_colors.color")}
|
||||
key={`${index}aptcolorcolor`}
|
||||
name={[field.name, "color"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ColorpickerFormItemComponent />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.ssbuckets")}
|
||||
id="ssbuckets"
|
||||
actions={[
|
||||
<Button
|
||||
type="dashed"
|
||||
key="add-job-size-definition"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
add({
|
||||
color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
|
||||
});
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.addapptcolor")}
|
||||
{t("bodyshop.actions.addbucket")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.addbucket")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
const schedulingBucket =
|
||||
schedulingBuckets[field.name] || form.getFieldValue(["ssbuckets", field.name]) || {};
|
||||
const schedulingBucketSurfaceStyles = getTintedCardSurfaceStyles(schedulingBucket.color);
|
||||
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[
|
||||
["ssbuckets", field.name, "id"],
|
||||
["ssbuckets", field.name, "label"]
|
||||
]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={SECTION_TITLE_INPUT_ROW_STYLE}>
|
||||
<div style={SECTION_TITLE_INPUT_GROUP_STYLE}>
|
||||
<div style={SECTION_TITLE_INPUT_LABEL_STYLE}>{t("bodyshop.fields.ssbuckets.id")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.ssbuckets.id")}
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_STYLE,
|
||||
width: 72
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_GROUP_STYLE,
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<div style={SECTION_TITLE_INPUT_LABEL_STYLE}>
|
||||
{t("bodyshop.fields.ssbuckets.label")}
|
||||
</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.ssbuckets.label")}
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<Tooltip title={t("bodyshop.tooltips.reset-color")}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={() => {
|
||||
form.setFieldValue(["ssbuckets", field.name, "color"]);
|
||||
|
||||
form.setFields([
|
||||
{
|
||||
name: ["ssbuckets", field.name, "color"],
|
||||
touched: true
|
||||
}
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
{...schedulingBucketSurfaceStyles}
|
||||
>
|
||||
<div className="shop-info-scheduling__bucket-card-body">
|
||||
<div className="shop-info-scheduling__bucket-card-fields">
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.gte")}
|
||||
key={`${index}gte`}
|
||||
name={[field.name, "gte"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber suffix="hrs" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.lt")}
|
||||
key={`${index}lt`}
|
||||
name={[field.name, "lt"]}
|
||||
>
|
||||
<InputNumber suffix="hrs" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.target")}
|
||||
key={`${index}target`}
|
||||
name={[field.name, "target"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="shop-info-scheduling__bucket-card-color">
|
||||
<Form.Item key={`${index}color`} name={[field.name, "color"]}>
|
||||
<ColorPicker styles={SCHEDULING_BUCKET_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
{HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
|
||||
<LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
|
||||
<Form.List name={["ssbuckets"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.id")}
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.gte")}
|
||||
key={`${index}gte`}
|
||||
name={[field.name, "gte"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.lt")}
|
||||
key={`${index}lt`}
|
||||
name={[field.name, "lt"]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.target")}
|
||||
key={`${index}target`}
|
||||
name={[field.name, "target"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
<Space orientation="horizontal">
|
||||
<Form.Item
|
||||
label={
|
||||
<Space>
|
||||
{t("bodyshop.fields.ssbuckets.color")}
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
form.setFieldValue(["ssbuckets", field.name, "color"]);
|
||||
|
||||
form.setFields([
|
||||
{
|
||||
name: ["ssbuckets", field.name, "color"],
|
||||
touched: true
|
||||
}
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
key={`${index}color`}
|
||||
name={[field.name, "color"]}
|
||||
>
|
||||
<ColorPicker />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.addbucket")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
.shop-info-scheduling__bucket-card-body {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-fields {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(92px, 1fr));
|
||||
gap: 0 12px;
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-fields .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-color {
|
||||
flex: 0 0 360px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-color .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-color .ant-form-item-control,
|
||||
.shop-info-scheduling__bucket-card-color .ant-form-item-control-input,
|
||||
.shop-info-scheduling__bucket-card-color .ant-form-item-control-input-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.shop-info-scheduling__bucket-card-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-fields {
|
||||
grid-template-columns: repeat(2, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.shop-info-scheduling__bucket-card-color {
|
||||
flex-basis: auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.shop-info-scheduling__bucket-card-fields {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
import { Select } from "antd";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "./shop-info.section-navigator.styles.scss";
|
||||
|
||||
const HIGHLIGHT_CLASS = "shop-info-section-navigator__target--active";
|
||||
|
||||
export default function ShopInfoSectionNavigator({ tabsRef, activeTabKey }) {
|
||||
const { t } = useTranslation();
|
||||
const targetMapRef = useRef(new Map());
|
||||
const highlightedTargetRef = useRef(null);
|
||||
const [options, setOptions] = useState([]);
|
||||
const [selectedSection, setSelectedSection] = useState(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
const tabsContainer = tabsRef.current;
|
||||
if (!tabsContainer) return undefined;
|
||||
|
||||
let animationFrameId = 0;
|
||||
|
||||
const refreshOptions = () => {
|
||||
const activePane = tabsContainer.querySelector(".ant-tabs-tabpane-active");
|
||||
if (!activePane) {
|
||||
targetMapRef.current = new Map();
|
||||
setOptions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const nextTargetMap = new Map();
|
||||
const nextOptions = Array.from(activePane.querySelectorAll(".imex-form-row"))
|
||||
.filter((card) => {
|
||||
return shouldIncludeCardInNavigator(card, activePane);
|
||||
})
|
||||
.map((card, index) => {
|
||||
const { title, depth, searchLabel } = getCardNavigatorInfo(card, activePane);
|
||||
const value = `${activeTabKey}-shop-info-section-${index}`;
|
||||
|
||||
nextTargetMap.set(value, card);
|
||||
|
||||
return {
|
||||
label: renderNavigatorOptionLabel(title, depth),
|
||||
labelText: title,
|
||||
searchLabel,
|
||||
depth,
|
||||
value
|
||||
};
|
||||
});
|
||||
|
||||
targetMapRef.current = nextTargetMap;
|
||||
setOptions((currentOptions) => (areOptionsEqual(currentOptions, nextOptions) ? currentOptions : nextOptions));
|
||||
};
|
||||
|
||||
const scheduleRefresh = () => {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = requestAnimationFrame(refreshOptions);
|
||||
};
|
||||
|
||||
scheduleRefresh();
|
||||
|
||||
const observer = new MutationObserver(scheduleRefresh);
|
||||
observer.observe(tabsContainer, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
attributes: true,
|
||||
attributeFilter: ["class"]
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [activeTabKey, tabsRef]);
|
||||
|
||||
useEffect(() => {
|
||||
clearHighlightedTarget(highlightedTargetRef);
|
||||
setSelectedSection(undefined);
|
||||
}, [activeTabKey]);
|
||||
|
||||
const handleSectionChange = (value) => {
|
||||
setSelectedSection(value);
|
||||
|
||||
clearHighlightedTarget(highlightedTargetRef);
|
||||
if (!value) return;
|
||||
|
||||
const target = targetMapRef.current.get(value);
|
||||
if (target) {
|
||||
target.classList.add(HIGHLIGHT_CLASS);
|
||||
highlightedTargetRef.current = target;
|
||||
target.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start"
|
||||
});
|
||||
}
|
||||
|
||||
window.setTimeout(() => {
|
||||
setSelectedSection(undefined);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="shop-info-section-navigator">
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
value={selectedSection}
|
||||
placeholder={t("bodyshop.labels.jump_to_section")}
|
||||
options={options}
|
||||
popupMatchSelectWidth={false}
|
||||
disabled={options.length === 0}
|
||||
filterOption={(input, option) => option?.searchLabel?.toLowerCase().includes(input.toLowerCase())}
|
||||
onChange={handleSectionChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getOwnCardTitleNode(card) {
|
||||
const headNode = Array.from(card.children).find((child) => child.classList?.contains("ant-card-head"));
|
||||
return headNode?.querySelector(".ant-card-head-title");
|
||||
}
|
||||
|
||||
function getOwnCardTitle(card) {
|
||||
return getOwnCardTitleNode(card)?.textContent?.trim();
|
||||
}
|
||||
|
||||
function getAncestorCards(card, activePane) {
|
||||
const ancestors = [];
|
||||
let currentCard = card.parentElement?.closest(".imex-form-row");
|
||||
|
||||
while (currentCard && activePane.contains(currentCard)) {
|
||||
ancestors.push(currentCard);
|
||||
currentCard = currentCard.parentElement?.closest(".imex-form-row");
|
||||
}
|
||||
|
||||
return ancestors.reverse();
|
||||
}
|
||||
|
||||
function getCardDepth(card, activePane) {
|
||||
return getAncestorCards(card, activePane).length;
|
||||
}
|
||||
|
||||
function isVisibleCard(card) {
|
||||
return card.offsetParent !== null;
|
||||
}
|
||||
|
||||
function isNavigatorEligibleSubsection(card) {
|
||||
return (
|
||||
!card.classList.contains("imex-form-row--compact") &&
|
||||
!card.classList.contains("imex-form-row--title-only") &&
|
||||
!card.querySelector(":scope > .ant-card-actions")
|
||||
);
|
||||
}
|
||||
|
||||
function shouldIncludeCardInNavigator(card, activePane) {
|
||||
const title = getOwnCardTitle(card);
|
||||
if (!title || !isVisibleCard(card)) return false;
|
||||
|
||||
const depth = getCardDepth(card, activePane);
|
||||
if (depth === 0) return true;
|
||||
if (depth === 1) return isNavigatorEligibleSubsection(card);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getCardNavigatorInfo(card, activePane) {
|
||||
const title = getOwnCardTitle(card);
|
||||
const ancestors = getAncestorCards(card, activePane);
|
||||
const depth = ancestors.length;
|
||||
const parentTitle = depth === 1 ? getOwnCardTitle(ancestors[0]) : null;
|
||||
|
||||
return {
|
||||
title,
|
||||
depth,
|
||||
searchLabel: parentTitle ? `${parentTitle} ${title}` : title
|
||||
};
|
||||
}
|
||||
|
||||
function renderNavigatorOptionLabel(title, depth) {
|
||||
return (
|
||||
<span
|
||||
className={[
|
||||
"shop-info-section-navigator__option",
|
||||
depth > 0 ? "shop-info-section-navigator__option--subsection" : null
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
<span className="shop-info-section-navigator__option-label">{title}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function clearHighlightedTarget(highlightedTargetRef) {
|
||||
if (highlightedTargetRef.current) {
|
||||
highlightedTargetRef.current.classList.remove(HIGHLIGHT_CLASS);
|
||||
highlightedTargetRef.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
function areOptionsEqual(currentOptions, nextOptions) {
|
||||
if (currentOptions.length !== nextOptions.length) return false;
|
||||
|
||||
return currentOptions.every((option, index) => {
|
||||
const nextOption = nextOptions[index];
|
||||
return (
|
||||
option.labelText === nextOption.labelText &&
|
||||
option.searchLabel === nextOption.searchLabel &&
|
||||
option.depth === nextOption.depth &&
|
||||
option.value === nextOption.value
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.shop-info-section-navigator {
|
||||
max-width: 360px;
|
||||
width: min(360px, 100%);
|
||||
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info-section-navigator__option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.shop-info-section-navigator__option--subsection {
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.shop-info-section-navigator__option--subsection::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 1px;
|
||||
background: var(--ant-colorTextDescription);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.shop-info-section-navigator__option-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.imex-form-row.shop-info-section-navigator__target--active.ant-card {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--ant-colorPrimary, #1890ff) 65%,
|
||||
var(--imex-form-surface-border)
|
||||
);
|
||||
background: color-mix(in srgb, var(--ant-colorPrimary, #1890ff) 7%, var(--imex-form-surface));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-colorPrimary, #1890ff) 24%, transparent);
|
||||
transition: border-color 0.2s ease,
|
||||
background-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
|
||||
.ant-card-head {
|
||||
background: color-mix(in srgb, var(--ant-colorPrimary, #1890ff) 12%, var(--imex-form-surface-head));
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
background: color-mix(in srgb, var(--ant-colorPrimary, #1890ff) 7%, var(--imex-form-surface));
|
||||
}
|
||||
}
|
||||
@@ -3,11 +3,23 @@ import { Button, Form, Input, Select, Space } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TemplateList } from "../../utils/TemplateConstants";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
InlineTitleListIcon
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
||||
|
||||
export default function ShopInfoSpeedPrint() {
|
||||
const { t } = useTranslation();
|
||||
const form = Form.useFormInstance();
|
||||
const allTemplates = TemplateList("job");
|
||||
const TemplateListGenerated = InstanceRenderManager({
|
||||
imex: Object.fromEntries(Object.entries(allTemplates).filter(([, { enhanced_payroll }]) => !enhanced_payroll)),
|
||||
@@ -18,80 +30,131 @@ export default function ShopInfoSpeedPrint() {
|
||||
<Form.List name={["speedprint"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.speedprint.id")}
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.speedprint.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name={[field.name, "templates"]}
|
||||
label={t("bodyshop.fields.speedprint.templates")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
options={Object.keys(TemplateListGenerated).map((key) => ({
|
||||
value: TemplateListGenerated[key].key,
|
||||
label: TemplateListGenerated[key].title
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.speedprint_configurations")}
|
||||
actions={[
|
||||
<Button
|
||||
type="dashed"
|
||||
key="add-speedprint"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.addspeedprint")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.addspeedprint")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[
|
||||
["speedprint", field.name, "id"],
|
||||
["speedprint", field.name, "label"]
|
||||
]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.speedprint.id")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.speedprint.id")}
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.speedprint.label")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.speedprint.label")}
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
name={[field.name, "templates"]}
|
||||
label={t("bodyshop.fields.speedprint.templates")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
options={Object.keys(TemplateListGenerated).map((key) => ({
|
||||
value: TemplateListGenerated[key].key,
|
||||
label: TemplateListGenerated[key].title
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
|
||||
@@ -2,6 +2,8 @@ import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Checkbox, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
import { connect } from "react-redux";
|
||||
@@ -16,12 +18,51 @@ const mapDispatchToProps = () => ({
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoTaskPresets);
|
||||
|
||||
const normalizePercent = (value) => Math.round((Number(value || 0) + Number.EPSILON) * 10000) / 10000;
|
||||
|
||||
const getTaskPresetAllocationErrors = (presets = [], t) => {
|
||||
const totalsByLaborType = {};
|
||||
|
||||
presets.forEach((preset) => {
|
||||
const percent = normalizePercent(preset?.percent);
|
||||
|
||||
if (!percent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const laborTypes = Array.isArray(preset?.hourstype) ? preset.hourstype : [];
|
||||
|
||||
laborTypes.forEach((laborType) => {
|
||||
if (!laborType) {
|
||||
return;
|
||||
}
|
||||
|
||||
totalsByLaborType[laborType] = normalizePercent((totalsByLaborType[laborType] || 0) + percent);
|
||||
});
|
||||
});
|
||||
|
||||
return Object.entries(totalsByLaborType)
|
||||
.filter(([, total]) => total > 100)
|
||||
.map(([laborType, total]) => {
|
||||
const translatedLaborType = t(`joblines.fields.lbr_types.${laborType}`);
|
||||
const laborTypeLabel =
|
||||
translatedLaborType === `joblines.fields.lbr_types.${laborType}` ? laborType : translatedLaborType;
|
||||
|
||||
return t("bodyshop.errors.task_preset_allocation_exceeded", {
|
||||
laborType: laborTypeLabel,
|
||||
total
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export function ShopInfoTaskPresets({ bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const form = Form.useFormInstance();
|
||||
const taskPresets = Form.useWatch(["md_tasks_presets", "presets"], form) || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<LayoutFormRow noDivider>
|
||||
<LayoutFormRow header={t("bodyshop.labels.task_preset_options")}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.enable_tasks")}
|
||||
valuePropName="checked"
|
||||
@@ -38,173 +79,216 @@ export function ShopInfoTaskPresets({ bodyshop }) {
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow header={t("bodyshop.labels.md_tasks_presets")}>
|
||||
<Form.List name={["md_tasks_presets", "presets"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<Form.List
|
||||
name={["md_tasks_presets", "presets"]}
|
||||
rules={[
|
||||
{
|
||||
validator: async (_, presets) => {
|
||||
const allocationErrors = getTaskPresetAllocationErrors(presets, t);
|
||||
|
||||
if (allocationErrors.length > 0) {
|
||||
throw new Error(allocationErrors.join(" "));
|
||||
}
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
{(fields, { add, remove, move }, { errors }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.md_tasks_presets")}
|
||||
actions={[
|
||||
<Button
|
||||
key="add-task-preset"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.add_task_preset")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.name")}
|
||||
key={`${index}name`}
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.add_task_preset")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
const taskPreset = taskPresets[field.name] || {};
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={getFormListItemTitle(
|
||||
t("bodyshop.fields.md_tasks_presets.name"),
|
||||
index,
|
||||
taskPreset.name,
|
||||
taskPreset.memo
|
||||
)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.name")}
|
||||
key={`${index}name`}
|
||||
name={[field.name, "name"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={12}
|
||||
label={t("bodyshop.fields.md_tasks_presets.hourstype")}
|
||||
key={`${index}hourstype`}
|
||||
name={[field.name, "hourstype"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Checkbox.Group>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAA" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAA")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAB" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAB")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAD" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAD")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAE" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAE")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAF" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAF")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAG" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAG")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAM" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAM")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAR" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAR")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAS" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAS")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAU" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAU")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA1" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA1")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA2" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA2")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA3" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA3")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA4" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA4")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.percent")}
|
||||
key={`${index}percent`}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={[field.name, "percent"]}
|
||||
>
|
||||
<InputNumber min={0} max={100} suffix="%" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.memo")}
|
||||
key={`${index}memo`}
|
||||
name={[field.name, "memo"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.nextstatus")}
|
||||
key={`${index}nextstatus`}
|
||||
name={[field.name, "nextstatus"]}
|
||||
>
|
||||
<Select
|
||||
options={bodyshop.md_ro_statuses.production_statuses.map((o) => ({
|
||||
value: o,
|
||||
label: o
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
span={12}
|
||||
label={t("bodyshop.fields.md_tasks_presets.hourstype")}
|
||||
key={`${index}hourstype`}
|
||||
name={[field.name, "hourstype"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Checkbox.Group>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAA" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAA")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAB" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAB")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAD" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAD")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAE" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAE")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAF" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAF")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAG" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAG")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAM" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAM")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAR" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAR")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAS" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAS")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LAU" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LAU")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA1" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA1")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA2" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA2")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA3" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA3")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Checkbox value="LA4" style={{ lineHeight: "32px" }}>
|
||||
{t("joblines.fields.lbr_types.LA4")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.percent")}
|
||||
key={`${index}percent`}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
name={[field.name, "percent"]}
|
||||
>
|
||||
<InputNumber min={0} max={100} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.memo")}
|
||||
key={`${index}memo`}
|
||||
name={[field.name, "memo"]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.md_tasks_presets.nextstatus")}
|
||||
key={`${index}nextstatus`}
|
||||
name={[field.name, "nextstatus"]}
|
||||
>
|
||||
<Select
|
||||
options={bodyshop.md_ro_statuses.production_statuses.map((o) => ({
|
||||
value: o,
|
||||
label: o
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.add_task_preset")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Form.ErrorList errors={errors} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
@@ -17,19 +18,22 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoIntellipay);
|
||||
// noinspection JSUnusedLocalSymbols
|
||||
export function ShopInfoIntellipay({ bodyshop, form }) {
|
||||
const { t } = useTranslation();
|
||||
const cashDiscountEnabled = Form.useWatch(["intellipay_config", "enable_cash_discount"], form);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item dependencies={[["intellipay_config", "enable_cash_discount"]]}>
|
||||
{() => {
|
||||
const { intellipay_config } = form.getFieldsValue();
|
||||
{cashDiscountEnabled && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Alert title={t("bodyshop.labels.intellipay_cash_discount")} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
if (intellipay_config?.enable_cash_discount)
|
||||
return <Alert title={t("bodyshop.labels.intellipay_cash_discount")} />;
|
||||
}}
|
||||
</Form.Item>
|
||||
|
||||
<LayoutFormRow noDivider>
|
||||
<LayoutFormRow
|
||||
header={InstanceRenderManager({
|
||||
rome: t("bodyshop.labels.romepay"),
|
||||
imex: t("bodyshop.labels.imexpay")
|
||||
})}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.intellipay_config.enable_cash_discount")}
|
||||
valuePropName="checked"
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { useMutation, useQuery } from "@apollo/client/react";
|
||||
import { Button, Card, Form, Input, InputNumber, Space, Switch } from "antd";
|
||||
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Skeleton, Space, Switch, Typography } from "antd";
|
||||
|
||||
import querystring from "query-string";
|
||||
import { useEffect } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
@@ -11,9 +11,22 @@ import { createStructuredSelector } from "reselect";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import FormsFieldChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
INLINE_TITLE_SWITCH_GROUP_STYLE,
|
||||
InlineTitleListIcon
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
|
||||
import {
|
||||
INSERT_EMPLOYEE_TEAM,
|
||||
@@ -22,62 +35,181 @@ import {
|
||||
} from "../../graphql/employee_teams.queries";
|
||||
import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import {
|
||||
getSplitTotal,
|
||||
hasExactSplitTotal,
|
||||
LABOR_TYPES,
|
||||
normalizeEmployeeTeam,
|
||||
validateEmployeeTeamMembers
|
||||
} from "./shop-employee-teams.form.utils.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
const mapDispatchToProps = () => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
const mapDispatchToProps = () => ({});
|
||||
|
||||
export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
|
||||
const PAYOUT_METHOD_OPTIONS = [
|
||||
{ labelKey: "employee_teams.options.hourly", value: "hourly" },
|
||||
{ labelKey: "employee_teams.options.commission_percentage", value: "commission" }
|
||||
];
|
||||
|
||||
const TEAM_MEMBER_RATE_FIELD_COLS = { xs: 24, sm: 12, md: 8, lg: 6, xxl: 4 };
|
||||
|
||||
const formatAllocationPercentage = (percentage) => {
|
||||
if (percentage === null || percentage === undefined || percentage === "") return null;
|
||||
|
||||
const numericValue = Number(percentage);
|
||||
if (!Number.isFinite(numericValue)) return null;
|
||||
|
||||
return `${numericValue.toFixed(2).replace(/\.?0+$/, "")}%`;
|
||||
};
|
||||
|
||||
export function ShopEmployeeTeamsFormComponent({ bodyshop, form, onDirtyChange, isDirty }) {
|
||||
const { t } = useTranslation();
|
||||
const [form] = Form.useForm();
|
||||
const [internalForm] = Form.useForm();
|
||||
const [internalIsDirty, setInternalIsDirty] = useState(false);
|
||||
const teamForm = form ?? internalForm;
|
||||
const resolvedIsDirty = typeof isDirty === "boolean" ? isDirty : internalIsDirty;
|
||||
const history = useNavigate();
|
||||
const search = querystring.parse(useLocation().search);
|
||||
const notification = useNotification();
|
||||
const [hydratedTeamId, setHydratedTeamId] = useState(search.employeeTeamId === "new" ? "new" : null);
|
||||
const isNewTeam = search.employeeTeamId === "new";
|
||||
|
||||
const { error, data } = useQuery(QUERY_EMPLOYEE_TEAM_BY_ID, {
|
||||
const { error, data, loading, refetch } = useQuery(QUERY_EMPLOYEE_TEAM_BY_ID, {
|
||||
variables: { id: search.employeeTeamId },
|
||||
skip: !search.employeeTeamId || search.employeeTeamId === "new",
|
||||
skip: !search.employeeTeamId || isNewTeam,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only"
|
||||
nextFetchPolicy: "network-only",
|
||||
notifyOnNetworkStatusChange: true
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.employee_teams_by_pk) form.setFieldsValue(data.employee_teams_by_pk);
|
||||
else {
|
||||
form.resetFields();
|
||||
const currentTeamData = data?.employee_teams_by_pk?.id === search.employeeTeamId ? data.employee_teams_by_pk : null;
|
||||
|
||||
const updateDirtyState = useCallback(
|
||||
(nextDirtyState) => {
|
||||
setInternalIsDirty(nextDirtyState);
|
||||
onDirtyChange?.(nextDirtyState);
|
||||
},
|
||||
[onDirtyChange]
|
||||
);
|
||||
|
||||
const clearTeamFormMeta = useCallback(() => {
|
||||
const fieldMeta = teamForm.getFieldsError().map(({ name }) => ({
|
||||
name,
|
||||
touched: false,
|
||||
validating: false,
|
||||
errors: [],
|
||||
warnings: []
|
||||
}));
|
||||
|
||||
if (fieldMeta.length > 0) {
|
||||
teamForm.setFields(fieldMeta);
|
||||
}
|
||||
}, [form, data, search.employeeTeamId]);
|
||||
|
||||
updateDirtyState(false);
|
||||
}, [teamForm, updateDirtyState]);
|
||||
|
||||
const resetTeamFormToCurrentData = useCallback(() => {
|
||||
let hydrationFrameId;
|
||||
|
||||
teamForm.resetFields();
|
||||
|
||||
if (isNewTeam) {
|
||||
setHydratedTeamId("new");
|
||||
hydrationFrameId = window.requestAnimationFrame(() => {
|
||||
clearTeamFormMeta();
|
||||
});
|
||||
return () => {
|
||||
if (hydrationFrameId) window.cancelAnimationFrame(hydrationFrameId);
|
||||
};
|
||||
}
|
||||
|
||||
setHydratedTeamId(null);
|
||||
|
||||
if (loading) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (currentTeamData) {
|
||||
teamForm.setFieldsValue(normalizeEmployeeTeam(currentTeamData));
|
||||
}
|
||||
|
||||
hydrationFrameId = window.requestAnimationFrame(() => {
|
||||
setHydratedTeamId(search.employeeTeamId);
|
||||
clearTeamFormMeta();
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (hydrationFrameId) window.cancelAnimationFrame(hydrationFrameId);
|
||||
};
|
||||
}, [clearTeamFormMeta, currentTeamData, isNewTeam, loading, search.employeeTeamId, teamForm]);
|
||||
|
||||
useEffect(() => resetTeamFormToCurrentData(), [resetTeamFormToCurrentData]);
|
||||
|
||||
const [updateEmployeeTeam] = useMutation(UPDATE_EMPLOYEE_TEAM);
|
||||
const [insertEmployeeTeam] = useMutation(INSERT_EMPLOYEE_TEAM);
|
||||
const payoutMethodOptions = PAYOUT_METHOD_OPTIONS.map(({ labelKey, value }) => ({
|
||||
label: t(labelKey),
|
||||
value
|
||||
}));
|
||||
const teamName = Form.useWatch("name", teamForm);
|
||||
const teamMembers = Form.useWatch(["employee_team_members"], teamForm) || [];
|
||||
const isTeamHydrating = !isNewTeam && Boolean(search.employeeTeamId) && hydratedTeamId !== search.employeeTeamId;
|
||||
const isAllocationTotalExact = hasExactSplitTotal(teamMembers);
|
||||
const allocationTotalValue = formatAllocationPercentage(getSplitTotal(teamMembers))?.replace("%", "") || "0";
|
||||
const teamNameDisplay = teamName?.trim() || t("employee_teams.fields.name");
|
||||
const teamCardTitle = isTeamHydrating ? (
|
||||
t("employee_teams.fields.name")
|
||||
) : (
|
||||
<span>
|
||||
<span>{teamNameDisplay}</span>
|
||||
<span> - </span>
|
||||
<Typography.Text type={isAllocationTotalExact ? undefined : "danger"}>
|
||||
{t("employee_teams.labels.allocation_total", {
|
||||
total: allocationTotalValue
|
||||
})}
|
||||
</Typography.Text>
|
||||
</span>
|
||||
);
|
||||
|
||||
const handleFinish = async ({ employee_team_members = [], ...values }) => {
|
||||
const { normalizedTeamMembers, errorKey } = validateEmployeeTeamMembers(employee_team_members);
|
||||
|
||||
if (errorKey) {
|
||||
notification.error({
|
||||
title: t(errorKey)
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const handleFinish = async ({ employee_team_members, ...values }) => {
|
||||
if (search.employeeTeamId && search.employeeTeamId !== "new") {
|
||||
//Update a record.
|
||||
logImEXEvent("shop_employee_update");
|
||||
|
||||
const result = await updateEmployeeTeam({
|
||||
variables: {
|
||||
employeeTeamId: search.employeeTeamId,
|
||||
employeeTeam: values,
|
||||
teamMemberUpdates: employee_team_members
|
||||
.filter((e) => e.id)
|
||||
.map((e) => {
|
||||
delete e.__typename;
|
||||
return { where: { id: { _eq: e.id } }, _set: e };
|
||||
}),
|
||||
teamMemberInserts: employee_team_members
|
||||
.filter((e) => e.id === null || e.id === undefined)
|
||||
.map((e) => ({ ...e, teamid: search.employeeTeamId })),
|
||||
teamMemberDeletes: data.employee_teams_by_pk.employee_team_members.filter(
|
||||
(e) => !employee_team_members.find((etm) => etm.id === e.id)
|
||||
)
|
||||
teamMemberUpdates: normalizedTeamMembers
|
||||
.filter((teamMember) => teamMember.id)
|
||||
.map((teamMember) => ({
|
||||
where: { id: { _eq: teamMember.id } },
|
||||
_set: teamMember
|
||||
})),
|
||||
teamMemberInserts: normalizedTeamMembers
|
||||
.filter((teamMember) => teamMember.id === null || teamMember.id === undefined)
|
||||
.map((teamMember) => ({ ...teamMember, teamid: search.employeeTeamId })),
|
||||
teamMemberDeletes: data.employee_teams_by_pk.employee_team_members
|
||||
.filter(
|
||||
(teamMember) => !normalizedTeamMembers.find((currentTeamMember) => currentTeamMember.id === teamMember.id)
|
||||
)
|
||||
.map((teamMember) => teamMember.id)
|
||||
}
|
||||
});
|
||||
|
||||
if (!result.errors) {
|
||||
updateDirtyState(false);
|
||||
void refetch();
|
||||
notification.success({
|
||||
title: t("employees.successes.save")
|
||||
});
|
||||
@@ -89,20 +221,20 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
|
||||
});
|
||||
}
|
||||
} else {
|
||||
//New record, insert it.
|
||||
logImEXEvent("shop_employee_insert");
|
||||
|
||||
insertEmployeeTeam({
|
||||
variables: {
|
||||
employeeTeam: {
|
||||
...values,
|
||||
employee_team_members: { data: employee_team_members },
|
||||
employee_team_members: { data: normalizedTeamMembers },
|
||||
bodyshopid: bodyshop.id
|
||||
}
|
||||
},
|
||||
refetchQueries: ["QUERY_TEAMS"]
|
||||
}).then((r) => {
|
||||
search.employeeTeamId = r.data.insert_employee_teams_one.id;
|
||||
}).then((response) => {
|
||||
updateDirtyState(false);
|
||||
search.employeeTeamId = response.data.insert_employee_teams_one.id;
|
||||
history({ search: querystring.stringify(search) });
|
||||
notification.success({
|
||||
title: t("employees.successes.save")
|
||||
@@ -116,288 +248,272 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={isTeamHydrating ? undefined : teamCardTitle}
|
||||
extra={
|
||||
<Button type="primary" onClick={() => form.submit()}>
|
||||
{t("general.actions.save")}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => teamForm.submit()}
|
||||
disabled={isTeamHydrating || !resolvedIsDirty}
|
||||
style={{ minWidth: 190 }}
|
||||
>
|
||||
{t("employee_teams.actions.save_team")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
|
||||
<LayoutFormRow>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label={t("employee_teams.fields.name")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("employee_teams.fields.active")} name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employee_teams.fields.max_load")}
|
||||
name="max_load"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} precision={1} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<Form.List name={["employee_team_members"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<Form.Item label={t("employees.fields.id")} key={`${index}`} name={[field.name, "id"]} hidden>
|
||||
<Input type="hidden" />
|
||||
</Form.Item>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("employee_teams.fields.employeeid")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "employeeid"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<EmployeeSearchSelectComponent options={bodyshop.employees} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employee_teams.fields.percentage")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "percentage"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} max={100} precision={2} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAA")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAA"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAB")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAB"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAD")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAD"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAE")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAE"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAF")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAF"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAG")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAG"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAM")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAM"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAR")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAR"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAS")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAS"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LAU")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LAU"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LA1")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LA1"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LA2")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LA2"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LA3")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LA3"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("joblines.fields.lbr_types.LA4")}
|
||||
key={`${index}`}
|
||||
name={[field.name, "labor_rates", "LA4"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Space align="center">
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("employee_teams.actions.newmember")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
{isTeamHydrating ? (
|
||||
<Skeleton active title={false} paragraph={{ rows: 12 }} />
|
||||
) : (
|
||||
<Form
|
||||
onFinish={handleFinish}
|
||||
autoComplete={"off"}
|
||||
layout="vertical"
|
||||
form={teamForm}
|
||||
onValuesChange={() => {
|
||||
updateDirtyState(teamForm.isFieldsTouched());
|
||||
}}
|
||||
</Form.List>
|
||||
</Form>
|
||||
>
|
||||
<FormsFieldChanged form={teamForm} onReset={resetTeamFormToCurrentData} onDirtyChange={updateDirtyState} />
|
||||
<LayoutFormRow
|
||||
title={
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_ROW_STYLE,
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 500,
|
||||
fontSize: "var(--ant-font-size-lg)",
|
||||
lineHeight: 1.2,
|
||||
marginRight: "auto"
|
||||
}}
|
||||
>
|
||||
{t("employee_teams.labels.team_options")}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_SWITCH_GROUP_STYLE,
|
||||
marginLeft: "auto"
|
||||
}}
|
||||
>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employee_teams.fields.active")}</div>
|
||||
<Form.Item noStyle name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label={t("employee_teams.fields.name")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employee_teams.fields.max_load")}
|
||||
name="max_load"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} precision={1} suffix="%" />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<Form.List name={["employee_team_members"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
title={t("employee_teams.labels.members")}
|
||||
actions={[
|
||||
<Button
|
||||
key="add-team-member"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add({
|
||||
percentage: 0,
|
||||
payout_method: "hourly",
|
||||
labor_rates: {},
|
||||
commission_rates: {}
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("employee_teams.actions.newmember")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employee_teams.actions.newmember")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<Form.Item name={[field.name, "id"]} hidden>
|
||||
<Input type="hidden" />
|
||||
</Form.Item>
|
||||
<InlineValidatedFormRow
|
||||
form={teamForm}
|
||||
errorNames={[
|
||||
["employee_team_members", field.name, "employeeid"],
|
||||
["employee_team_members", field.name, "percentage"],
|
||||
["employee_team_members", field.name, "payout_method"]
|
||||
]}
|
||||
grow
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employee_teams.fields.employeeid")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "employeeid"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<EmployeeSearchSelectComponent options={bodyshop.employees} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employee_teams.fields.allocation")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "percentage"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={100}
|
||||
precision={2}
|
||||
size="small"
|
||||
aria-label={t("employee_teams.fields.allocation")}
|
||||
suffix="%"
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employee_teams.fields.payout_method")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}-payout-method`}
|
||||
name={[field.name, "payout_method"]}
|
||||
initialValue="hourly"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
aria-label={t("employee_teams.fields.payout_method")}
|
||||
size="small"
|
||||
options={payoutMethodOptions}
|
||||
style={{ width: "100%" }}
|
||||
styles={{
|
||||
selector: INLINE_TITLE_INPUT_STYLE
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
dependencies={[["employee_team_members", field.name, "payout_method"]]}
|
||||
>
|
||||
{() => {
|
||||
const payoutMethod =
|
||||
teamForm.getFieldValue(["employee_team_members", field.name, "payout_method"]) ||
|
||||
"hourly";
|
||||
const fieldName = payoutMethod === "commission" ? "commission_rates" : "labor_rates";
|
||||
|
||||
return (
|
||||
<Row gutter={[16, 0]}>
|
||||
{LABOR_TYPES.map((laborType) => (
|
||||
<Col
|
||||
{...TEAM_MEMBER_RATE_FIELD_COLS}
|
||||
key={`${index}-${fieldName}-${laborType}`}
|
||||
>
|
||||
<Form.Item
|
||||
label={t(`joblines.fields.lbr_types.${laborType}`)}
|
||||
name={[field.name, fieldName, laborType]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
{payoutMethod === "commission" ? (
|
||||
<InputNumber min={0} max={100} precision={2} suffix="%" />
|
||||
) : (
|
||||
<CurrencyInput prefix="$" />
|
||||
)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</div>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</Form>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { INSERT_EMPLOYEE_TEAM, UPDATE_EMPLOYEE_TEAM } from "../../graphql/employee_teams.queries";
|
||||
import { LABOR_TYPES } from "./shop-employee-teams.form.utils.js";
|
||||
import { ShopEmployeeTeamsFormComponent } from "./shop-employee-teams.form.component.jsx";
|
||||
|
||||
const insertEmployeeTeamMock = vi.fn();
|
||||
const updateEmployeeTeamMock = vi.fn();
|
||||
const useQueryMock = vi.fn();
|
||||
const useMutationMock = vi.fn();
|
||||
const navigateMock = vi.fn();
|
||||
const notification = {
|
||||
error: vi.fn(),
|
||||
success: vi.fn()
|
||||
};
|
||||
|
||||
vi.mock("@apollo/client/react", () => ({
|
||||
useQuery: (...args) => useQueryMock(...args),
|
||||
useMutation: (...args) => useMutationMock(...args)
|
||||
}));
|
||||
|
||||
vi.mock("react-router-dom", () => ({
|
||||
useLocation: () => ({
|
||||
search: "?employeeTeamId=new"
|
||||
}),
|
||||
useNavigate: () => navigateMock
|
||||
}));
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key, values = {}) => {
|
||||
const translations = {
|
||||
"employee_teams.fields.name": "Team Name",
|
||||
"employee_teams.fields.active": "Active",
|
||||
"employee_teams.fields.max_load": "Max Load",
|
||||
"employee_teams.fields.employeeid": "Employee",
|
||||
"employee_teams.fields.allocation_percentage": "Allocation %",
|
||||
"employee_teams.fields.payout_method": "Payout Method",
|
||||
"employee_teams.fields.allocation": "Allocation",
|
||||
"employee_teams.fields.employeeid_label": "Employee",
|
||||
"employee_teams.options.hourly": "Hourly",
|
||||
"employee_teams.options.commission": "Commission",
|
||||
"employee_teams.options.commission_percentage": "Commission",
|
||||
"employee_teams.actions.newmember": "New Team Member",
|
||||
"employee_teams.actions.save_team": "Save Employee Team",
|
||||
"employee_teams.errors.minimum_one_member": "Add at least one team member.",
|
||||
"employee_teams.errors.duplicate_member": "Team members must be unique.",
|
||||
"employee_teams.errors.allocation_total_exact": "Allocation must total exactly 100%.",
|
||||
"general.labels.click_to_begin": `Click ${values.action ?? ""} to begin`,
|
||||
"general.actions.save": "Save",
|
||||
"employees.successes.save": "Saved"
|
||||
};
|
||||
|
||||
if (key === "employee_teams.labels.allocation_total") {
|
||||
return `Allocation Total: ${values.total}%`;
|
||||
}
|
||||
|
||||
if (key.startsWith("joblines.fields.lbr_types.")) {
|
||||
return key.split(".").pop();
|
||||
}
|
||||
|
||||
return translations[key] || key;
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock("../../contexts/Notifications/notificationContext.jsx", () => ({
|
||||
useNotification: () => notification
|
||||
}));
|
||||
|
||||
vi.mock("../form-fields-changed-alert/form-fields-changed-alert.component.jsx", () => ({
|
||||
default: () => null
|
||||
}));
|
||||
|
||||
vi.mock("../../firebase/firebase.utils", () => ({
|
||||
logImEXEvent: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock("../employee-search-select/employee-search-select.component", () => ({
|
||||
default: ({ id, value, onChange, options = [] }) => (
|
||||
<select
|
||||
aria-label="Employee"
|
||||
id={id}
|
||||
value={value ?? ""}
|
||||
onChange={(event) => onChange?.(event.target.value || undefined)}
|
||||
>
|
||||
<option value="">Select Employee</option>
|
||||
{options.map((option) => (
|
||||
<option key={option.id} value={option.id}>
|
||||
{[option.first_name, option.last_name].filter(Boolean).join(" ")}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
}));
|
||||
|
||||
vi.mock("../form-items-formatted/currency-form-item.component", () => ({
|
||||
default: ({ id, value, onChange }) => (
|
||||
<input
|
||||
data-testid="currency-input"
|
||||
id={id}
|
||||
type="text"
|
||||
value={value ?? ""}
|
||||
onChange={(event) => onChange?.(event.target.value === "" ? null : Number(event.target.value))}
|
||||
/>
|
||||
)
|
||||
}));
|
||||
|
||||
vi.mock("../layout-form-row/layout-form-row.component", () => ({
|
||||
default: ({ title, extra, actions, children }) => (
|
||||
<div>
|
||||
{title}
|
||||
{extra}
|
||||
{children}
|
||||
{actions}
|
||||
</div>
|
||||
)
|
||||
}));
|
||||
|
||||
vi.mock("../form-list-move-arrows/form-list-move-arrows.component", () => ({
|
||||
default: () => null
|
||||
}));
|
||||
|
||||
const bodyshop = {
|
||||
id: "shop-1",
|
||||
employees: [
|
||||
{
|
||||
id: "emp-1",
|
||||
first_name: "Avery",
|
||||
last_name: "Johnson"
|
||||
},
|
||||
{
|
||||
id: "emp-2",
|
||||
first_name: "Morgan",
|
||||
last_name: "Lee"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const fillHourlyRates = (value) => {
|
||||
LABOR_TYPES.forEach((laborType) => {
|
||||
fireEvent.change(screen.getByLabelText(laborType), {
|
||||
target: { value: String(value) }
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const addBaseTeamMember = ({ employeeId = "emp-1", percentage = 100, rate = 25 } = {}) => {
|
||||
fireEvent.click(screen.getByRole("button", { name: "New Team Member" }));
|
||||
|
||||
fireEvent.change(screen.getByLabelText("Employee"), {
|
||||
target: { value: employeeId }
|
||||
});
|
||||
fireEvent.change(screen.getByRole("spinbutton", { name: "Allocation" }), {
|
||||
target: { value: String(percentage) }
|
||||
});
|
||||
fillHourlyRates(rate);
|
||||
};
|
||||
|
||||
describe("ShopEmployeeTeamsFormComponent", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
||||
useQueryMock.mockReturnValue({
|
||||
error: null,
|
||||
data: null,
|
||||
loading: false
|
||||
});
|
||||
|
||||
useMutationMock.mockImplementation((mutation) => {
|
||||
if (mutation === UPDATE_EMPLOYEE_TEAM) {
|
||||
return [updateEmployeeTeamMock];
|
||||
}
|
||||
|
||||
if (mutation === INSERT_EMPLOYEE_TEAM) {
|
||||
return [insertEmployeeTeamMock];
|
||||
}
|
||||
|
||||
return [vi.fn()];
|
||||
});
|
||||
|
||||
insertEmployeeTeamMock.mockResolvedValue({
|
||||
data: {
|
||||
insert_employee_teams_one: {
|
||||
id: "team-1"
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it("switches a new team member from hourly rates to commission percentages", async () => {
|
||||
render(<ShopEmployeeTeamsFormComponent bodyshop={bodyshop} />);
|
||||
|
||||
addBaseTeamMember();
|
||||
expect(screen.getAllByTestId("currency-input")).toHaveLength(LABOR_TYPES.length);
|
||||
|
||||
fireEvent.mouseDown(screen.getByRole("combobox", { name: "Payout Method" }));
|
||||
fireEvent.click(screen.getByText("Commission"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryAllByTestId("currency-input")).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
it("submits a valid new hourly team with normalized member data", async () => {
|
||||
render(<ShopEmployeeTeamsFormComponent bodyshop={bodyshop} />);
|
||||
|
||||
fireEvent.change(screen.getByRole("textbox", { name: "Team Name" }), {
|
||||
target: { value: "Commission Crew" }
|
||||
});
|
||||
fireEvent.change(screen.getByRole("spinbutton", { name: "Max Load" }), {
|
||||
target: { value: "8" }
|
||||
});
|
||||
|
||||
addBaseTeamMember({
|
||||
employeeId: "emp-1",
|
||||
percentage: 100,
|
||||
rate: 27.5
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Save Employee Team" }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(insertEmployeeTeamMock).toHaveBeenCalledWith({
|
||||
variables: {
|
||||
employeeTeam: {
|
||||
name: "Commission Crew",
|
||||
max_load: 8,
|
||||
employee_team_members: {
|
||||
data: [
|
||||
{
|
||||
employeeid: "emp-1",
|
||||
percentage: 100,
|
||||
payout_method: "hourly",
|
||||
labor_rates: Object.fromEntries(LABOR_TYPES.map((laborType) => [laborType, 27.5])),
|
||||
commission_rates: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
bodyshopid: "shop-1"
|
||||
}
|
||||
},
|
||||
refetchQueries: ["QUERY_TEAMS"]
|
||||
});
|
||||
});
|
||||
|
||||
expect(notification.success).toHaveBeenCalledWith({
|
||||
title: "Saved"
|
||||
});
|
||||
expect(navigateMock).toHaveBeenCalledWith({
|
||||
search: "employeeTeamId=team-1"
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,70 @@
|
||||
export const LABOR_TYPES = [
|
||||
"LAA",
|
||||
"LAB",
|
||||
"LAD",
|
||||
"LAE",
|
||||
"LAF",
|
||||
"LAG",
|
||||
"LAM",
|
||||
"LAR",
|
||||
"LAS",
|
||||
"LAU",
|
||||
"LA1",
|
||||
"LA2",
|
||||
"LA3",
|
||||
"LA4"
|
||||
];
|
||||
|
||||
export const normalizeTeamMember = (teamMember = {}) => ({
|
||||
...teamMember,
|
||||
payout_method: teamMember.payout_method || "hourly",
|
||||
labor_rates: teamMember.labor_rates || {},
|
||||
commission_rates: teamMember.commission_rates || {}
|
||||
});
|
||||
|
||||
export const normalizeEmployeeTeam = (employeeTeam = {}) => ({
|
||||
...employeeTeam,
|
||||
employee_team_members: (employeeTeam.employee_team_members || []).map(normalizeTeamMember)
|
||||
});
|
||||
|
||||
export const getSplitTotal = (teamMembers = []) =>
|
||||
teamMembers.reduce((sum, member) => sum + Number(member?.percentage || 0), 0);
|
||||
|
||||
export const hasExactSplitTotal = (teamMembers = []) => Math.abs(getSplitTotal(teamMembers) - 100) < 0.00001;
|
||||
|
||||
export const validateEmployeeTeamMembers = (employeeTeamMembers = []) => {
|
||||
const normalizedTeamMembers = employeeTeamMembers.map((teamMember) => {
|
||||
const nextTeamMember = normalizeTeamMember({ ...teamMember });
|
||||
delete nextTeamMember.__typename;
|
||||
return nextTeamMember;
|
||||
});
|
||||
|
||||
if (normalizedTeamMembers.length === 0) {
|
||||
return {
|
||||
normalizedTeamMembers,
|
||||
errorKey: "employee_teams.errors.minimum_one_member"
|
||||
};
|
||||
}
|
||||
|
||||
const employeeIds = normalizedTeamMembers.map((teamMember) => teamMember.employeeid).filter(Boolean);
|
||||
const duplicateEmployeeIds = employeeIds.filter((employeeId, index) => employeeIds.indexOf(employeeId) !== index);
|
||||
|
||||
if (duplicateEmployeeIds.length > 0) {
|
||||
return {
|
||||
normalizedTeamMembers,
|
||||
errorKey: "employee_teams.errors.duplicate_member"
|
||||
};
|
||||
}
|
||||
|
||||
if (!hasExactSplitTotal(normalizedTeamMembers)) {
|
||||
return {
|
||||
normalizedTeamMembers,
|
||||
errorKey: "employee_teams.errors.allocation_total_exact"
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
normalizedTeamMembers,
|
||||
errorKey: null
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,86 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
getSplitTotal,
|
||||
hasExactSplitTotal,
|
||||
normalizeTeamMember,
|
||||
validateEmployeeTeamMembers
|
||||
} from "./shop-employee-teams.form.utils.js";
|
||||
|
||||
describe("shop employee team form utilities", () => {
|
||||
it("normalizes missing payout defaults for a team member", () => {
|
||||
expect(
|
||||
normalizeTeamMember({
|
||||
employeeid: "emp-1",
|
||||
percentage: 100
|
||||
})
|
||||
).toEqual({
|
||||
employeeid: "emp-1",
|
||||
percentage: 100,
|
||||
payout_method: "hourly",
|
||||
labor_rates: {},
|
||||
commission_rates: {}
|
||||
});
|
||||
});
|
||||
|
||||
it("returns a minimum-member validation error when no team members are provided", () => {
|
||||
expect(validateEmployeeTeamMembers([])).toEqual({
|
||||
normalizedTeamMembers: [],
|
||||
errorKey: "employee_teams.errors.minimum_one_member"
|
||||
});
|
||||
});
|
||||
|
||||
it("rejects duplicate employees in the same team", () => {
|
||||
const result = validateEmployeeTeamMembers([
|
||||
{ employeeid: "emp-1", percentage: 50, labor_rates: { LAA: 25 } },
|
||||
{ employeeid: "emp-1", percentage: 50, labor_rates: { LAA: 30 } }
|
||||
]);
|
||||
|
||||
expect(result.errorKey).toBe("employee_teams.errors.duplicate_member");
|
||||
});
|
||||
|
||||
it("rejects team allocations that do not add up to exactly one hundred percent", () => {
|
||||
const result = validateEmployeeTeamMembers([
|
||||
{ employeeid: "emp-1", percentage: 60, labor_rates: { LAA: 25 } },
|
||||
{ employeeid: "emp-2", percentage: 30, labor_rates: { LAA: 30 } }
|
||||
]);
|
||||
|
||||
expect(getSplitTotal(result.normalizedTeamMembers)).toBe(90);
|
||||
expect(hasExactSplitTotal(result.normalizedTeamMembers)).toBe(false);
|
||||
expect(result.errorKey).toBe("employee_teams.errors.allocation_total_exact");
|
||||
});
|
||||
|
||||
it("accepts a valid mixed hourly and commission team and strips graph metadata", () => {
|
||||
const result = validateEmployeeTeamMembers([
|
||||
{
|
||||
__typename: "employee_team_members",
|
||||
employeeid: "emp-1",
|
||||
percentage: 40,
|
||||
labor_rates: { LAA: 28.5 }
|
||||
},
|
||||
{
|
||||
employeeid: "emp-2",
|
||||
percentage: 60,
|
||||
payout_method: "commission",
|
||||
commission_rates: { LAA: 35 }
|
||||
}
|
||||
]);
|
||||
|
||||
expect(result.errorKey).toBeNull();
|
||||
expect(result.normalizedTeamMembers).toEqual([
|
||||
{
|
||||
employeeid: "emp-1",
|
||||
percentage: 40,
|
||||
payout_method: "hourly",
|
||||
labor_rates: { LAA: 28.5 },
|
||||
commission_rates: {}
|
||||
},
|
||||
{
|
||||
employeeid: "emp-2",
|
||||
percentage: 60,
|
||||
payout_method: "commission",
|
||||
labor_rates: {},
|
||||
commission_rates: { LAA: 35 }
|
||||
}
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -2,20 +2,47 @@ import { Button } from "antd";
|
||||
import queryString from "query-string";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import ResponsiveTable from "../responsive-table/responsive-table.component";
|
||||
|
||||
export default function ShopEmployeeTeamsListComponent({ loading, employee_teams }) {
|
||||
export default function ShopEmployeeTeamsListComponent({
|
||||
loading,
|
||||
employee_teams,
|
||||
onRequestTeamChange,
|
||||
selectedTeamId
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const history = useNavigate();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
|
||||
const navigateToTeam = (employeeTeamId) => {
|
||||
if (onRequestTeamChange) {
|
||||
onRequestTeamChange(employeeTeamId);
|
||||
return;
|
||||
}
|
||||
|
||||
history({
|
||||
search: queryString.stringify({
|
||||
...search,
|
||||
employeeTeamId
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const clearTeamSelection = () => {
|
||||
const { employeeTeamId, ...nextSearch } = search;
|
||||
void employeeTeamId;
|
||||
history({
|
||||
search: queryString.stringify(nextSearch)
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnRowClick = (record) => {
|
||||
if (record) {
|
||||
search.employeeTeamId = record.id;
|
||||
history({ search: queryString.stringify(search) });
|
||||
navigateToTeam(record.id);
|
||||
} else {
|
||||
delete search.employeeTeamId;
|
||||
history({ search: queryString.stringify(search) });
|
||||
clearTeamSelection();
|
||||
}
|
||||
};
|
||||
const columns = [
|
||||
@@ -27,43 +54,38 @@ export default function ShopEmployeeTeamsListComponent({ loading, employee_teams
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ResponsiveTable
|
||||
title={() => {
|
||||
return (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
search.employeeTeamId = "new";
|
||||
history({ search: queryString.stringify(search) });
|
||||
}}
|
||||
>
|
||||
{t("employee_teams.actions.new")}
|
||||
</Button>
|
||||
);
|
||||
}}
|
||||
loading={loading}
|
||||
pagination={{ placement: "top" }}
|
||||
columns={columns}
|
||||
mobileColumnKeys={["name"]}
|
||||
rowKey="id"
|
||||
dataSource={employee_teams}
|
||||
rowSelection={{
|
||||
onSelect: (props) => {
|
||||
search.employeeTeamId = props.id;
|
||||
history({ search: queryString.stringify(search) });
|
||||
},
|
||||
type: "radio",
|
||||
selectedRowKeys: [search.employeeTeamId]
|
||||
}}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
handleOnRowClick(record);
|
||||
}
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<LayoutFormRow
|
||||
title={t("bodyshop.labels.employee_teams")}
|
||||
actions={[
|
||||
<Button key="new-team" type="primary" block onClick={() => navigateToTeam("new")}>
|
||||
{t("employee_teams.actions.new")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
{employee_teams.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employee_teams.actions.new")} />
|
||||
) : (
|
||||
<ResponsiveTable
|
||||
loading={loading}
|
||||
pagination={{ placement: "top" }}
|
||||
columns={columns}
|
||||
mobileColumnKeys={["name"]}
|
||||
rowKey="id"
|
||||
dataSource={employee_teams}
|
||||
rowSelection={{
|
||||
onSelect: (props) => navigateToTeam(props.id),
|
||||
type: "radio",
|
||||
selectedRowKeys: [selectedTeamId || search.employeeTeamId]
|
||||
}}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
handleOnRowClick(record);
|
||||
}
|
||||
};
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,36 +1,70 @@
|
||||
import { Form } from "antd";
|
||||
import { useQuery } from "@apollo/client/react";
|
||||
import queryString from "query-string";
|
||||
import { connect } from "react-redux";
|
||||
import { useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
|
||||
import useConfirmDirtyFormNavigation from "../../hooks/useConfirmDirtyFormNavigation.jsx";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
|
||||
import ShopEmployeeTeamsListComponent from "./shop-employee-teams.list";
|
||||
import ShopEmployeeTeamsFormComponent from "./shop-employee-teams.form.component";
|
||||
import { Col, Row } from "antd";
|
||||
import "./shop-teams.styles.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({});
|
||||
|
||||
function ShopTeamsContainer() {
|
||||
const [form] = Form.useForm();
|
||||
const [isTeamFormDirty, setIsTeamFormDirty] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const { loading, error, data } = useQuery(QUERY_TEAMS, {
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only"
|
||||
});
|
||||
const hasSelectedTeam = Boolean(search.employeeTeamId);
|
||||
const hasDirtyTeamForm = Boolean(search.employeeTeamId) && isTeamFormDirty;
|
||||
const confirmCloseDirtyTeam = useConfirmDirtyFormNavigation(hasDirtyTeamForm);
|
||||
|
||||
const navigateToTeam = (employeeTeamId) => {
|
||||
if (employeeTeamId === search.employeeTeamId) return;
|
||||
if (!confirmCloseDirtyTeam()) return;
|
||||
|
||||
setIsTeamFormDirty(false);
|
||||
navigate({
|
||||
search: queryString.stringify({
|
||||
...search,
|
||||
employeeTeamId
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
if (error) return <AlertComponent title={error.message} type="error" />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<RbacWrapper action="employee_teams:page">
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6}>
|
||||
<ShopEmployeeTeamsListComponent employee_teams={data ? data.employee_teams : []} loading={loading} />
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<ShopEmployeeTeamsFormComponent />
|
||||
</Col>
|
||||
</Row>
|
||||
</RbacWrapper>
|
||||
</div>
|
||||
<RbacWrapper action="employee_teams:page">
|
||||
<div
|
||||
className={["shop-teams-layout", hasSelectedTeam ? "shop-teams-layout--with-detail" : null]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
<div className="shop-teams-layout__list">
|
||||
<ShopEmployeeTeamsListComponent
|
||||
employee_teams={data ? data.employee_teams : []}
|
||||
loading={loading}
|
||||
onRequestTeamChange={navigateToTeam}
|
||||
selectedTeamId={search.employeeTeamId}
|
||||
/>
|
||||
</div>
|
||||
{hasSelectedTeam ? (
|
||||
<div className="shop-teams-layout__details">
|
||||
<ShopEmployeeTeamsFormComponent form={form} onDirtyChange={setIsTeamFormDirty} isDirty={isTeamFormDirty} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</RbacWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
16
client/src/components/shop-teams/shop-teams.styles.scss
Normal file
16
client/src/components/shop-teams/shop-teams.styles.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.shop-teams-layout {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.shop-teams-layout__list,
|
||||
.shop-teams-layout__details {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1700px) {
|
||||
.shop-teams-layout--with-detail {
|
||||
grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
|
||||
import { QUERY_SHOP_ASSOCIATIONS } from "../../graphql/user.queries";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
|
||||
import ResponsiveTable from "../responsive-table/responsive-table.component";
|
||||
import ShopUsersAuthEdit from "../shop-users-auth-edit/shop-users-auth-edit.component";
|
||||
@@ -66,7 +67,7 @@ export function ShopInfoUsersComponent({ bodyshop }) {
|
||||
return <AlertComponent type="error" title={JSON.stringify(error)} />;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow title={t("bodyshop.labels.licensing")}>
|
||||
<ResponsiveTable
|
||||
loading={loading}
|
||||
pagination={{ placement: "top" }}
|
||||
@@ -75,6 +76,6 @@ export function ShopInfoUsersComponent({ bodyshop }) {
|
||||
rowKey="id"
|
||||
dataSource={data && data.associations}
|
||||
/>
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { PageHeader } from "@ant-design/pro-layout";
|
||||
import { useMutation, useQuery } from "@apollo/client/react";
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Button, Form, Modal, Space } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -15,21 +15,27 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import dayjs from "../../utils/day";
|
||||
import TimeTicketsCommitToggleComponent from "../time-tickets-commit-toggle/time-tickets-commit-toggle.component";
|
||||
import TimeTicketModalComponent from "./time-ticket-modal.component";
|
||||
import { insertAuditTrail } from "../../redux/application/application.actions.js";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings";
|
||||
import { buildTimeTicketAuditSummary } from "../../utils/auditTrailDetails.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
timeTicketModal: selectTimeTicket,
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket"))
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
|
||||
insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
|
||||
});
|
||||
|
||||
export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible, bodyshop }) {
|
||||
export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible, bodyshop, insertAuditTrail }) {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
const [enterAgain, setEnterAgain] = useState(false);
|
||||
|
||||
const lastSubmittedRef = useRef(null);
|
||||
|
||||
const [lineTicketRefreshKey, setLineTicketRefreshKey] = useState(0);
|
||||
|
||||
const [insertTicket] = useMutation(INSERT_NEW_TIME_TICKET);
|
||||
@@ -48,47 +54,77 @@ export function TimeTicketModalContainer({ timeTicketModal, toggleModalVisible,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only"
|
||||
});
|
||||
const employees = EmployeeAutoCompleteData?.employees ?? [];
|
||||
|
||||
const handleFinish = (values) => {
|
||||
lastSubmittedRef.current = values;
|
||||
setLoading(true);
|
||||
const emps = EmployeeAutoCompleteData?.employees.filter((e) => e.id === values.employeeid);
|
||||
if (timeTicketModal.context.id) {
|
||||
updateTicket({
|
||||
variables: {
|
||||
timeticketId: timeTicketModal.context.id,
|
||||
timeticket: {
|
||||
...values,
|
||||
rate: emps.length === 1 ? emps[0].rates.filter((r) => r.cost_center === values.cost_center)[0]?.rate : null
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(handleMutationSuccess)
|
||||
.catch(handleMutationError);
|
||||
} else {
|
||||
//Get selected employee rate.
|
||||
insertTicket({
|
||||
variables: {
|
||||
timeTicketInput: [
|
||||
{
|
||||
const isEdit = Boolean(timeTicketModal.context.id);
|
||||
const emps = employees.filter((employee) => employee.id === values.employeeid);
|
||||
const mutation = isEdit
|
||||
? updateTicket({
|
||||
variables: {
|
||||
timeticketId: timeTicketModal.context.id,
|
||||
timeticket: {
|
||||
...values,
|
||||
rate:
|
||||
emps.length === 1 ? emps[0].rates.filter((r) => r.cost_center === values.cost_center)[0].rate : null,
|
||||
bodyshopid: bodyshop.id,
|
||||
created_by: timeTicketModal.context.created_by
|
||||
emps.length === 1 ? emps[0].rates.filter((r) => r.cost_center === values.cost_center)[0]?.rate : null
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
.then(handleMutationSuccess)
|
||||
.catch(handleMutationError);
|
||||
}
|
||||
}
|
||||
})
|
||||
: insertTicket({
|
||||
variables: {
|
||||
timeTicketInput: [
|
||||
{
|
||||
...values,
|
||||
rate:
|
||||
emps.length === 1 ? emps[0].rates.filter((r) => r.cost_center === values.cost_center)[0].rate : null,
|
||||
bodyshopid: bodyshop.id,
|
||||
created_by: timeTicketModal.context.created_by
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
mutation.then((result) => handleMutationSuccess(result, isEdit)).catch(handleMutationError);
|
||||
};
|
||||
|
||||
const handleMutationSuccess = () => {
|
||||
const handleMutationSuccess = (result, isEdit) => {
|
||||
notification.success({
|
||||
title: t("timetickets.successes.created")
|
||||
});
|
||||
|
||||
const savedTicket =
|
||||
result?.data?.update_timetickets?.returning?.[0] ?? result?.data?.insert_timetickets?.returning?.[0] ?? {};
|
||||
const originalTicket = timeTicketModal.context?.timeticket ?? {};
|
||||
const submittedValues = {
|
||||
...(lastSubmittedRef.current ?? {}),
|
||||
date: lastSubmittedRef.current?.date ?? savedTicket.date ?? originalTicket.date ?? null,
|
||||
employeeid: lastSubmittedRef.current?.employeeid ?? savedTicket.employeeid ?? originalTicket.employeeid ?? null,
|
||||
jobid:
|
||||
lastSubmittedRef.current?.jobid ??
|
||||
savedTicket.jobid ??
|
||||
timeTicketModal.context.jobId ??
|
||||
originalTicket.job?.id ??
|
||||
originalTicket.jobid ??
|
||||
null
|
||||
};
|
||||
const auditSummary = buildTimeTicketAuditSummary({
|
||||
originalTicket,
|
||||
submittedValues,
|
||||
employees
|
||||
});
|
||||
|
||||
if (auditSummary.jobid) {
|
||||
insertAuditTrail({
|
||||
jobid: auditSummary.jobid,
|
||||
operation: isEdit
|
||||
? AuditTrailMapping.timeticketupdated(auditSummary.employeeName, auditSummary.date, auditSummary.details)
|
||||
: AuditTrailMapping.timeticketcreated(auditSummary.employeeName, auditSummary.date, auditSummary.details),
|
||||
type: isEdit ? "timeticketupdated" : "timeticketcreated"
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh parent screens (Job Labor tab, etc.)
|
||||
if (timeTicketModal.actions.refetch) timeTicketModal.actions.refetch();
|
||||
|
||||
|
||||
@@ -15,6 +15,18 @@ const mapDispatchToProps = () => ({
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketTaskModalComponent);
|
||||
|
||||
const getPayoutMethodLabel = (payoutMethod, t) => {
|
||||
if (!payoutMethod) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (payoutMethod === "hourly" || payoutMethod === "commission") {
|
||||
return t(`timetickets.labels.payout_methods.${payoutMethod}`);
|
||||
}
|
||||
|
||||
return payoutMethod;
|
||||
};
|
||||
|
||||
export function TimeTicketTaskModalComponent({ bodyshop, form, loading, completedTasks, unassignedHours }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -35,7 +47,15 @@ export function TimeTicketTaskModalComponent({ bodyshop, form, loading, complete
|
||||
<JobSearchSelectComponent convertedOnly={true} notExported={true} />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<Form.Item name="task" label={t("timetickets.labels.task")}>
|
||||
<Form.Item
|
||||
name="task"
|
||||
label={t("timetickets.labels.task")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
{loading ? (
|
||||
<Spin />
|
||||
) : (
|
||||
@@ -93,33 +113,51 @@ export function TimeTicketTaskModalComponent({ bodyshop, form, loading, complete
|
||||
<th>{t("timetickets.fields.cost_center")}</th>
|
||||
<th>{t("timetickets.fields.ciecacode")}</th>
|
||||
<th>{t("timetickets.fields.productivehrs")}</th>
|
||||
<th>{t("timetickets.fields.payout_method")}</th>
|
||||
<th>{t("timetickets.fields.rate")}</th>
|
||||
<th>{t("timetickets.fields.amount")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{fields.map((field, index) => (
|
||||
<tr key={field.key}>
|
||||
<td>
|
||||
<Form.Item key={`${index}employeeid`} name={[field.name, "employeeid"]}>
|
||||
<ReadOnlyFormItemComponent type="employee" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}cost_center`} name={[field.name, "cost_center"]}>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}ciecacode`} name={[field.name, "ciecacode"]}>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}productivehrs`} name={[field.name, "productivehrs"]}>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{fields.map((field, index) => {
|
||||
const payoutMethod = form.getFieldValue(["timetickets", field.name, "payout_context", "payout_method"]);
|
||||
|
||||
return (
|
||||
<tr key={field.key}>
|
||||
<td>
|
||||
<Form.Item key={`${index}employeeid`} name={[field.name, "employeeid"]}>
|
||||
<ReadOnlyFormItemComponent type="employee" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}cost_center`} name={[field.name, "cost_center"]}>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}ciecacode`} name={[field.name, "ciecacode"]}>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}productivehrs`} name={[field.name, "productivehrs"]}>
|
||||
<ReadOnlyFormItemComponent />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>{getPayoutMethodLabel(payoutMethod, t)}</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}rate`} name={[field.name, "rate"]}>
|
||||
<ReadOnlyFormItemComponent type="currency" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
<td>
|
||||
<Form.Item key={`${index}payoutamount`} name={[field.name, "payoutamount"]}>
|
||||
<ReadOnlyFormItemComponent type="currency" />
|
||||
</Form.Item>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<Alert type="success" title={t("timetickets.labels.payrollclaimedtasks")} />
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { Form } from "antd";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { TimeTicketTaskModalComponent } from "./time-ticket-task-modal.component.jsx";
|
||||
|
||||
vi.mock("react-i18next", () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key, values = {}) => {
|
||||
const translations = {
|
||||
"timetickets.fields.ro_number": "RO Number",
|
||||
"timetickets.labels.task": "Task",
|
||||
"bodyshop.fields.md_tasks_presets.percent": "Percent",
|
||||
"bodyshop.fields.md_tasks_presets.hourstype": "Labor Types",
|
||||
"bodyshop.fields.md_tasks_presets.nextstatus": "Next Status",
|
||||
"timetickets.labels.claimtaskpreview": "Claim Task Preview",
|
||||
"timetickets.fields.employee": "Employee",
|
||||
"timetickets.fields.cost_center": "Cost Center",
|
||||
"timetickets.fields.ciecacode": "Labor Type",
|
||||
"timetickets.fields.productivehrs": "Hours",
|
||||
"timetickets.fields.payout_method": "Payout Method",
|
||||
"timetickets.fields.rate": "Rate",
|
||||
"timetickets.fields.amount": "Amount",
|
||||
"timetickets.labels.payout_methods.commission": "Commission",
|
||||
"timetickets.labels.payout_methods.hourly": "Hourly",
|
||||
"timetickets.labels.payrollclaimedtasks": "Payroll claimed tasks are ready.",
|
||||
"tt_approvals.labels.approval_queue_in_use": "Approval queue is enabled."
|
||||
};
|
||||
|
||||
if (key === "timetickets.validation.unassignedlines") {
|
||||
return `${values.unassignedHours} hours remain unassigned.`;
|
||||
}
|
||||
|
||||
return translations[key] || key;
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
vi.mock("../form-items-formatted/read-only-form-item.component", () => ({
|
||||
default: ({ value }) => <span>{value}</span>
|
||||
}));
|
||||
|
||||
vi.mock("../job-search-select/job-search-select.component", () => ({
|
||||
default: () => <div>Job Search</div>
|
||||
}));
|
||||
|
||||
function TestHarness({ unassignedHours = 0 }) {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
initialValues={{
|
||||
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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<TimeTicketTaskModalComponent
|
||||
bodyshop={{
|
||||
md_tasks_presets: {
|
||||
presets: [
|
||||
{
|
||||
name: "Body Prep",
|
||||
percent: 50,
|
||||
hourstype: ["LAA", "LAB"],
|
||||
nextstatus: "In Progress"
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
form={form}
|
||||
loading={false}
|
||||
completedTasks={[]}
|
||||
unassignedHours={unassignedHours}
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
describe("TimeTicketTaskModalComponent", () => {
|
||||
it("shows preview payout methods for both commission and hourly tickets", () => {
|
||||
render(<TestHarness />);
|
||||
|
||||
expect(screen.getByText("Claim Task Preview")).toBeInTheDocument();
|
||||
expect(screen.getByText("Commission")).toBeInTheDocument();
|
||||
expect(screen.getByText("Hourly")).toBeInTheDocument();
|
||||
expect(screen.getByText("Payroll claimed tasks are ready.")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows the unassigned-hours alert when payroll assignments are incomplete", () => {
|
||||
render(<TestHarness unassignedHours={1.25} />);
|
||||
|
||||
expect(screen.getByText("1.25 hours remain unassigned.")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -25,6 +25,22 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(TimeTickeTaskModalContainer);
|
||||
|
||||
const toFiniteNumber = (value) => {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : null;
|
||||
};
|
||||
|
||||
const getPreviewPayoutAmount = (ticket) => {
|
||||
const productiveHours = toFiniteNumber(ticket?.productivehrs);
|
||||
const rate = toFiniteNumber(ticket?.rate);
|
||||
|
||||
if (productiveHours === null || rate === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return productiveHours * rate;
|
||||
};
|
||||
|
||||
export function TimeTickeTaskModalContainer({ currentUser, technician, timeTicketTasksModal, toggleModalVisible }) {
|
||||
const [form] = Form.useForm();
|
||||
const { context, open, actions } = timeTicketTasksModal;
|
||||
@@ -90,7 +106,12 @@ export function TimeTickeTaskModalContainer({ currentUser, technician, timeTicke
|
||||
if (actions?.refetch) actions.refetch();
|
||||
toggleModalVisible();
|
||||
} else if (handleFinish === false) {
|
||||
form.setFieldsValue({ timetickets: data.ticketsToInsert });
|
||||
form.setFieldsValue({
|
||||
timetickets: (data.ticketsToInsert || []).map((ticket) => ({
|
||||
...ticket,
|
||||
payoutamount: getPreviewPayoutAmount(ticket)
|
||||
}))
|
||||
});
|
||||
setUnassignedHours(data.unassignedHours);
|
||||
} else {
|
||||
notification.error({
|
||||
@@ -101,7 +122,9 @@ export function TimeTickeTaskModalContainer({ currentUser, technician, timeTicke
|
||||
}
|
||||
} catch (error) {
|
||||
notification.error({
|
||||
title: t("timetickets.errors.creating", { message: error.message })
|
||||
title: t("timetickets.errors.creating", {
|
||||
message: error.response?.data?.error || error.message
|
||||
})
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
||||
@@ -130,7 +130,15 @@ export function TtApprovalsListComponent({
|
||||
key: "memo",
|
||||
sorter: (a, b) => alphaSort(a.memo, b.memo),
|
||||
sortOrder: state.sortedInfo.columnKey === "memo" && state.sortedInfo.order,
|
||||
render: (text, record) => (record.clockon || record.clockoff ? t(record.memo) : record.memo)
|
||||
render: (text, record) => (record.memo?.startsWith("timetickets.labels") ? t(record.memo) : record.memo)
|
||||
},
|
||||
{
|
||||
title: t("timetickets.fields.task_name"),
|
||||
dataIndex: "task_name",
|
||||
key: "task_name",
|
||||
sorter: (a, b) => alphaSort(a.task_name, b.task_name),
|
||||
sortOrder: state.sortedInfo.columnKey === "task_name" && state.sortedInfo.order,
|
||||
render: (text, record) => record.task_name || ""
|
||||
},
|
||||
{
|
||||
title: t("timetickets.fields.clockon"),
|
||||
@@ -140,12 +148,12 @@ export function TtApprovalsListComponent({
|
||||
render: (text, record) => <DateTimeFormatter>{record.clockon}</DateTimeFormatter>
|
||||
},
|
||||
{
|
||||
title: "Pay",
|
||||
title: t("timetickets.fields.pay"),
|
||||
dataIndex: "pay",
|
||||
key: "pay",
|
||||
render: (text, record) =>
|
||||
Dinero({ amount: Math.round(record.rate * 100) })
|
||||
.multiply(record.flat_rate ? record.productivehrs : record.actualhrs)
|
||||
Dinero({ amount: Math.round((record.rate || 0) * 100) })
|
||||
.multiply(record.flat_rate ? record.productivehrs || 0 : record.actualhrs || 0)
|
||||
.toFormat("$0.00")
|
||||
}
|
||||
];
|
||||
@@ -184,7 +192,7 @@ export function TtApprovalsListComponent({
|
||||
<ResponsiveTable
|
||||
loading={loading}
|
||||
columns={columns}
|
||||
mobileColumnKeys={["ro_number", "date", "employeeid", "cost_center"]}
|
||||
mobileColumnKeys={["ro_number", "date", "employeeid", "cost_center", "task_name"]}
|
||||
rowKey="id"
|
||||
scroll={{
|
||||
x: true
|
||||
|
||||
@@ -18,7 +18,15 @@ const mapStateToProps = createStructuredSelector({
|
||||
authLevel: selectAuthLevel
|
||||
});
|
||||
|
||||
export function TtApproveButton({ bodyshop, currentUser, selectedTickets, disabled, authLevel }) {
|
||||
export function TtApproveButton({
|
||||
bodyshop,
|
||||
currentUser,
|
||||
selectedTickets,
|
||||
disabled,
|
||||
authLevel,
|
||||
completedCallback,
|
||||
refetch
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const client = useApolloClient();
|
||||
const notification = useNotification();
|
||||
@@ -54,6 +62,12 @@ export function TtApproveButton({ bodyshop, currentUser, selectedTickets, disabl
|
||||
})
|
||||
});
|
||||
} else {
|
||||
if (typeof completedCallback === "function") {
|
||||
completedCallback([]);
|
||||
}
|
||||
if (typeof refetch === "function") {
|
||||
refetch();
|
||||
}
|
||||
notification.success({
|
||||
title: t("timetickets.successes.created")
|
||||
});
|
||||
@@ -68,8 +82,6 @@ export function TtApproveButton({ bodyshop, currentUser, selectedTickets, disabl
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
// if (!!completedCallback) completedCallback([]);
|
||||
// if (!!loadingCallback) loadingCallback(false);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -152,7 +152,7 @@ export function VendorsFormComponent({ bodyshop, form, formLoading, handleDelete
|
||||
{!isPartsEntry && (
|
||||
<>
|
||||
<Form.Item label={t("vendors.fields.discount")} name="discount">
|
||||
<InputNumber min={0} max={1} precision={2} step={0.01} />
|
||||
<InputNumber min={0} max={1} precision={3} step={0.01} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t("vendors.fields.due_date")} name="due_date">
|
||||
|
||||
@@ -152,6 +152,8 @@ export const QUERY_BODYSHOP = gql`
|
||||
id
|
||||
employeeid
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
@@ -285,6 +287,8 @@ export const UPDATE_SHOP = gql`
|
||||
id
|
||||
employeeid
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@ export const QUERY_TEAMS = gql`
|
||||
id
|
||||
employeeid
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
@@ -29,6 +31,8 @@ export const UPDATE_EMPLOYEE_TEAM = gql`
|
||||
employeeid
|
||||
id
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
@@ -40,6 +44,8 @@ export const UPDATE_EMPLOYEE_TEAM = gql`
|
||||
employeeid
|
||||
id
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
@@ -52,6 +58,8 @@ export const UPDATE_EMPLOYEE_TEAM = gql`
|
||||
employeeid
|
||||
id
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
@@ -69,6 +77,8 @@ export const INSERT_EMPLOYEE_TEAM = gql`
|
||||
employeeid
|
||||
id
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
@@ -86,6 +96,8 @@ export const QUERY_EMPLOYEE_TEAM_BY_ID = gql`
|
||||
employeeid
|
||||
id
|
||||
labor_rates
|
||||
payout_method
|
||||
commission_rates
|
||||
percentage
|
||||
}
|
||||
}
|
||||
|
||||
@@ -197,6 +197,7 @@ export const QUERY_EXACT_JOB_IN_PRODUCTION = gql`
|
||||
employee_prep
|
||||
employee_csr
|
||||
date_repairstarted
|
||||
dms_id
|
||||
joblines_status {
|
||||
part_type
|
||||
status
|
||||
@@ -269,6 +270,7 @@ export const QUERY_EXACT_JOBS_IN_PRODUCTION = gql`
|
||||
employee_prep
|
||||
employee_csr
|
||||
date_repairstarted
|
||||
dms_id
|
||||
joblines_status {
|
||||
part_type
|
||||
status
|
||||
@@ -2671,6 +2673,7 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
|
||||
suspended
|
||||
job_totals
|
||||
date_repairstarted
|
||||
dms_id
|
||||
joblines_status {
|
||||
part_type
|
||||
status
|
||||
|
||||
@@ -260,6 +260,7 @@ export const INSERT_TIME_TICKET_AND_APPROVE = gql`
|
||||
id
|
||||
clockon
|
||||
clockoff
|
||||
created_by
|
||||
employeeid
|
||||
productivehrs
|
||||
actualhrs
|
||||
@@ -267,6 +268,9 @@ export const INSERT_TIME_TICKET_AND_APPROVE = gql`
|
||||
date
|
||||
memo
|
||||
flat_rate
|
||||
task_name
|
||||
payout_context
|
||||
ttapprovalqueueid
|
||||
commited_by
|
||||
committed_at
|
||||
}
|
||||
|
||||
@@ -23,7 +23,14 @@ export const QUERY_ALL_TT_APPROVALS_PAGINATED = gql`
|
||||
ciecacode
|
||||
cost_center
|
||||
date
|
||||
memo
|
||||
flat_rate
|
||||
clockon
|
||||
clockoff
|
||||
rate
|
||||
created_by
|
||||
task_name
|
||||
payout_context
|
||||
}
|
||||
tt_approval_queue_aggregate {
|
||||
aggregate {
|
||||
@@ -42,9 +49,16 @@ export const INSERT_NEW_TT_APPROVALS = gql`
|
||||
productivehrs
|
||||
actualhrs
|
||||
ciecacode
|
||||
cost_center
|
||||
date
|
||||
memo
|
||||
flat_rate
|
||||
rate
|
||||
clockon
|
||||
clockoff
|
||||
created_by
|
||||
task_name
|
||||
payout_context
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -65,6 +79,11 @@ export const QUERY_TT_APPROVALS_BY_IDS = gql`
|
||||
ciecacode
|
||||
bodyshopid
|
||||
cost_center
|
||||
clockon
|
||||
clockoff
|
||||
created_by
|
||||
task_name
|
||||
payout_context
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
11
client/src/hooks/useConfirmDirtyFormNavigation.jsx
Normal file
11
client/src/hooks/useConfirmDirtyFormNavigation.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function useConfirmDirtyFormNavigation(isDirty) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useCallback(() => {
|
||||
if (!isDirty) return true;
|
||||
return window.confirm(t("general.messages.unsavedchangespopup"));
|
||||
}, [isDirty, t]);
|
||||
}
|
||||
@@ -8,13 +8,14 @@ import { createStructuredSelector } from "reselect";
|
||||
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
|
||||
import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
|
||||
import { QUERY_OWNER_FOR_JOB_CREATION } from "../../graphql/owners.queries";
|
||||
import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
|
||||
import { insertAuditTrail, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
|
||||
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
||||
import InstanceRenderManager from "../../utils/instanceRenderMgr";
|
||||
import JobsCreateComponent from "./jobs-create.component";
|
||||
import JobCreateContext from "./jobs-create.context";
|
||||
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -22,10 +23,11 @@ const mapStateToProps = createStructuredSelector({
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
|
||||
setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
|
||||
setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
|
||||
insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
|
||||
});
|
||||
|
||||
function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, currentUser }) {
|
||||
function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, currentUser, insertAuditTrail }) {
|
||||
const { t } = useTranslation();
|
||||
const notification = useNotification();
|
||||
|
||||
@@ -84,6 +86,11 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
|
||||
newJobId: resp.data.insert_jobs.returning[0].id
|
||||
});
|
||||
logImEXEvent("manual_job_create_completed", {});
|
||||
insertAuditTrail({
|
||||
jobid: resp.data.insert_jobs.returning[0].id,
|
||||
operation: AuditTrailMapping.jobmanualcreate(),
|
||||
type: "jobmanualcreate"
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
@@ -120,8 +120,9 @@
|
||||
"appointmentinsert": "Appointment created. Appointment Date: {{start}}.",
|
||||
"assignedlinehours": "Assigned job lines totaling {{hours}} units to {{team}}.",
|
||||
"billdeleted": "Bill with invoice number {{invoice_number}} deleted.",
|
||||
"billmarkforreexport": "Bill with invoice number {{invoice_number}} marked for re-export.",
|
||||
"billposted": "Bill with invoice number {{invoice_number}} posted.",
|
||||
"billupdated": "Bill with invoice number {{invoice_number}} updated.",
|
||||
"billupdated": "Bill with invoice number {{invoice_number}} updated with the following details: {{details}}.",
|
||||
"failedpayment": "Failed payment attempt.",
|
||||
"jobassignmentchange": "Employee {{name}} assigned to {{operation}}",
|
||||
"jobassignmentremoved": "Employee assignment removed for {{operation}}",
|
||||
@@ -136,6 +137,9 @@
|
||||
"jobintake": "Job intake completed. Status set to {{status}}. Scheduled completion is {{scheduled_completion}}.",
|
||||
"jobinvoiced": "Job has been invoiced.",
|
||||
"jobioucreated": "IOU Created.",
|
||||
"joblineupdate": "Job line {{lineDescription}} updated with the following details: {{details}}.",
|
||||
"jobmanualcreate": "Job manually created.",
|
||||
"jobmanuallineinsert": "Job line manually added with the following details: {{details}}.",
|
||||
"jobmodifylbradj": "Labor adjustments modified {{mod_lbr_ty}} / {{hours}}.",
|
||||
"jobnoteadded": "Note added to Job.",
|
||||
"jobnotedeleted": "Note deleted from Job.",
|
||||
@@ -151,7 +155,9 @@
|
||||
"tasks_deleted": "Task '{{title}}' deleted by {{deletedBy}}",
|
||||
"tasks_uncompleted": "Task '{{title}}' uncompleted by {{uncompletedBy}}",
|
||||
"tasks_undeleted": "Task '{{title}}' undeleted by {{undeletedBy}}",
|
||||
"tasks_updated": "Task '{{title}}' updated by {{updatedBy}}"
|
||||
"tasks_updated": "Task '{{title}}' updated by {{updatedBy}}",
|
||||
"timeticketcreated": "Time Ticket for {{employee}} on {{date}} created with the following details: {{details}}.",
|
||||
"timeticketupdated": "Time Ticket for {{employee}} on {{date}} updated with the following details: {{details}}"
|
||||
}
|
||||
},
|
||||
"billlines": {
|
||||
@@ -292,7 +298,23 @@
|
||||
},
|
||||
"bodyshop": {
|
||||
"actions": {
|
||||
"add_adjuster": "Add Adjuster",
|
||||
"add_control_number": "Add Control Number",
|
||||
"add_cost_center": "Add Cost Center",
|
||||
"add_courtesy_car_rate_preset": "Add Courtesy Car Contract Rate Preset",
|
||||
"add_delivery_checklist_item": "Add Delivery Checklist Item",
|
||||
"add_dms_allocation": "Add DMS Allocation",
|
||||
"add_estimator": "Add Estimator",
|
||||
"add_insurance_company": "Add Insurance Company",
|
||||
"add_intake_checklist_item": "Add Intake Checklist Item",
|
||||
"add_jobline_preset": "Add Jobline Preset",
|
||||
"add_messaging_preset": "Add Messaging Preset",
|
||||
"add_note_preset": "Add Note Preset",
|
||||
"add_parts_order_comment": "Add Parts Order Comment",
|
||||
"add_production_status_color": "Add Production Status Color",
|
||||
"add_profit_center": "Add Profit Center",
|
||||
"add_task_preset": "Add Task Preset",
|
||||
"add_to_email_preset": "Add To Email Preset",
|
||||
"addapptcolor": "Add Appointment Color",
|
||||
"addbucket": "Add Definition",
|
||||
"addpartslocation": "Add Parts Location",
|
||||
@@ -301,14 +323,17 @@
|
||||
"addtemplate": "Add Template",
|
||||
"newlaborrate": "New Labor Rate",
|
||||
"newsalestaxcode": "New Sales Tax Code",
|
||||
"save_shop_information": "Save Shop Information",
|
||||
"newstatus": "Add Status",
|
||||
"testrender": "Test Render"
|
||||
},
|
||||
"errors": {
|
||||
"creatingdefaultview": "Error creating default view.",
|
||||
"duplicate_job_status": "Duplicate job status. Each job status must be unique.",
|
||||
"duplicate_insurance_company": "Duplicate insurance company name. Each insurance company name must be unique",
|
||||
"loading": "Unable to load shop details. Please call technical support.",
|
||||
"saving": "Error encountered while saving. {{message}}"
|
||||
"saving": "Error encountered while saving. {{message}}",
|
||||
"task_preset_allocation_exceeded": "{{laborType}} task preset total is {{total}}% and cannot exceed 100%."
|
||||
},
|
||||
"fields": {
|
||||
"ReceivableCustomField": "QBO Receivable Custom Field {{number}}",
|
||||
@@ -338,6 +363,7 @@
|
||||
"require_actual_delivery_date": "Require Actual Delivery",
|
||||
"templates": "Delivery Templates"
|
||||
},
|
||||
"disableBillCostCalculation": "Disable Automatic Bill Cost Calculation",
|
||||
"dms": {
|
||||
"apcontrol": "AP Control Number",
|
||||
"appostingaccount": "AP Posting Account",
|
||||
@@ -401,6 +427,35 @@
|
||||
"logo_img_path": "Shop Logo",
|
||||
"logo_img_path_height": "Logo Image Height",
|
||||
"logo_img_path_width": "Logo Image Width",
|
||||
"scoreboard_setup": {
|
||||
"daily_body_target": "Daily Body Target",
|
||||
"daily_paint_target": "Daily Paint Target",
|
||||
"ignore_blocked_days": "Ignore Blocked Days",
|
||||
"last_number_working_days": "Last Number of Working Days",
|
||||
"production_target_hours": "Production Target Hours"
|
||||
},
|
||||
"system_settings": {
|
||||
"auto_email": {
|
||||
"attach_pdf_to_email": "Attach PDF to Sent Emails?",
|
||||
"from_emails": "Additional From Emails",
|
||||
"parts_order_cc": "Parts Orders CC",
|
||||
"parts_return_slip_cc": "Parts Returns CC"
|
||||
},
|
||||
"job_costing": {
|
||||
"paint_hour_split": "Paint Hour Split",
|
||||
"paint_materials_hourly_cost_rate": "Paint Materials Hourly Cost Rate",
|
||||
"prep_hour_split": "Prep Hour Split",
|
||||
"shop_materials_hourly_cost_rate": "Shop Materials Hourly Cost Rate",
|
||||
"target_touch_time": "Target Touch Time",
|
||||
"use_paint_scale_data": "Use Paint Scale Data"
|
||||
},
|
||||
"local_media_server": {
|
||||
"enabled": "Enabled",
|
||||
"http_path": "HTTP Path",
|
||||
"network_path": "Network Path",
|
||||
"token": "Token"
|
||||
}
|
||||
},
|
||||
"md_categories": "Categories",
|
||||
"md_ccc_rates": "Courtesy Car Contract Rate Presets",
|
||||
"md_classes": "Classes",
|
||||
@@ -461,9 +516,13 @@
|
||||
"use_approvals": "Use Time Ticket Approval Queue"
|
||||
},
|
||||
"messaginglabel": "Messaging Preset Label",
|
||||
"messaginglabel_short": "Label",
|
||||
"messagingtext": "Messaging Preset Text",
|
||||
"messagingtext_short": "Text",
|
||||
"noteslabel": "Note Label",
|
||||
"noteslabel_short": "Label",
|
||||
"notestext": "Note Text",
|
||||
"notestext_short": "Text",
|
||||
"notifications": {
|
||||
"description": "Select employees to automatically follow new jobs and receive notifications for job updates.",
|
||||
"invalid_followers": "Invalid selection. Please select valid employees.",
|
||||
@@ -597,12 +656,17 @@
|
||||
"federal_tax_itc": "Federal Tax Credit",
|
||||
"gogcode": "GOG Code (BreakOut)",
|
||||
"gst_override": "GST Override Account #",
|
||||
"invoice_federal_tax_rate_short": "Federal Tax Rate",
|
||||
"invoice_local_tax_rate_short": "Local Tax Rate",
|
||||
"invoice_state_tax_rate_short": "State Tax Rate",
|
||||
"invoiceexemptcode": "QuickBooks US - Invoice Tax Exempt Code",
|
||||
"invoiceexemptcode_short": "Invoice Tax Exempt Code",
|
||||
"item_type": "Item Type",
|
||||
"item_type_freight": "Freight",
|
||||
"item_type_gog": "GOG",
|
||||
"item_type_paint": "Paint Materials",
|
||||
"itemexemptcode": "QuickBooks US - Line Item Tax Exempt Code",
|
||||
"itemexemptcode_short": "Line Item Tax Exempt Code",
|
||||
"la1": "LA1",
|
||||
"la2": "LA2",
|
||||
"la3": "LA3",
|
||||
@@ -719,6 +783,7 @@
|
||||
"customtemplates": "Custom Templates",
|
||||
"defaultcostsmapping": "Default Costs Mapping",
|
||||
"defaultprofitsmapping": "Default Profits Mapping",
|
||||
"dms_setup": "DMS Setup",
|
||||
"deliverchecklist": "Delivery Checklist",
|
||||
"dms": {
|
||||
"cdk": {
|
||||
@@ -735,24 +800,33 @@
|
||||
},
|
||||
"emaillater": "Email Later",
|
||||
"employee_teams": "Employee Teams",
|
||||
"employee_options": "Employee Options",
|
||||
"employee_rates": "Employee Rates",
|
||||
"employee_vacation": "Employee Vacation",
|
||||
"employees": "Employees",
|
||||
"estimators": "Estimators",
|
||||
"filehandlers": "Adjusters",
|
||||
"imexpay": "ImEX Pay",
|
||||
"insurancecos": "Insurance Companies",
|
||||
"intake_delivery": "Intake / Delivery Options",
|
||||
"intakechecklist": "Intake Checklist",
|
||||
"intellipay_cash_discount": "Please ensure that cash discounting has been enabled on your merchant account. Reach out to IntelliPay Support if you need assistance. ",
|
||||
"job_status_options": "Job Status Options",
|
||||
"jobstatuses": "Job Statuses",
|
||||
"laborrates": "Labor Rates",
|
||||
"licensing": "Licensing",
|
||||
"md_parts_scan": "Parts Scan Rules",
|
||||
"md_ro_guard": "RO Guard",
|
||||
"md_ro_guard_options": "RO Guard Options",
|
||||
"md_tasks_presets": "Tasks Presets",
|
||||
"task_preset_options": "Task Preset Options",
|
||||
"md_to_emails": "Preset To Emails",
|
||||
"md_to_emails_emails": "Emails",
|
||||
"messagingpresets": "Messaging Presets",
|
||||
"notification_options": "Notification Options",
|
||||
"notemplatesavailable": "No templates available to add.",
|
||||
"notespresets": "Notes Presets",
|
||||
"jump_to_section": "Jump to section",
|
||||
"notifications": {
|
||||
"followers": "Notifications"
|
||||
},
|
||||
@@ -766,11 +840,22 @@
|
||||
"qbo_departmentid": "QBO Department ID",
|
||||
"qbo_usa": "QBO USA Compatibility",
|
||||
"rbac": "Role Based Access Control",
|
||||
"rbac_options": "Role Based Access Control Options",
|
||||
"responsibilitycenters": {
|
||||
"costs": "Cost Centers",
|
||||
"default_tax_setup": "Default Tax Setup",
|
||||
"invoices": "Invoices",
|
||||
"profits": "Profit Centers",
|
||||
"quickbooks_qbd": "QuickBooks / QBD",
|
||||
"quickbooks_us": "QuickBooks US",
|
||||
"sales_tax_codes": "Sales Tax Codes",
|
||||
"tax_accounts": "Tax Accounts",
|
||||
"tax_rate_short": "Rate",
|
||||
"tax_surcharge_short": "Surcharge",
|
||||
"tax_threshold_short": "Threshold",
|
||||
"tax_tier_card": "Tier {{typeNumIterator}}",
|
||||
"tax_tier_short": "Tier",
|
||||
"tax_type_card": "Tax Type {{typeNum}}",
|
||||
"title": "Responsibility Centers",
|
||||
"ttl_adjustment": "Subtotal Adjustment Account",
|
||||
"ttl_tax_adjustment": "Tax Adjustment Account"
|
||||
@@ -778,6 +863,9 @@
|
||||
"roguard": {
|
||||
"title": "RO Guard"
|
||||
},
|
||||
"autoemail": "Auto Email",
|
||||
"jobcosting": "Job Costing",
|
||||
"localmediaserver": "Local Media Server",
|
||||
"romepay": "Rome Pay",
|
||||
"scheduling": "SMART Scheduling",
|
||||
"scoreboardsetup": "Scoreboard Setup",
|
||||
@@ -785,6 +873,7 @@
|
||||
"shopinfo": "Shop Information",
|
||||
"shoprates": "Shop Rates",
|
||||
"speedprint": "Speed Print Configuration",
|
||||
"speedprint_configurations": "Speed Print Configurations",
|
||||
"ssbuckets": "Job Size Definitions",
|
||||
"systemsettings": "System Settings",
|
||||
"task-presets": "Task Presets",
|
||||
@@ -808,7 +897,8 @@
|
||||
"tooltips": {
|
||||
"md_parts_scan": {
|
||||
"update_value_tooltip": "Some fields require coded values in order to function properly (e.g. labor and part types). Please reach out to support if you have any questions."
|
||||
}
|
||||
},
|
||||
"reset-color": "Reset color"
|
||||
},
|
||||
"validation": {
|
||||
"centermustexist": "The chosen responsibility center does not exist.",
|
||||
@@ -1176,21 +1266,42 @@
|
||||
"employee_teams": {
|
||||
"actions": {
|
||||
"new": "New Team",
|
||||
"newmember": "New Team Member"
|
||||
"newmember": "New Team Member",
|
||||
"save_team": "Save Employee Team"
|
||||
},
|
||||
"errors": {
|
||||
"allocation_total_exact": "Team allocation must total exactly 100%.",
|
||||
"duplicate_member": "Each employee can only appear once per team.",
|
||||
"minimum_one_member": "Add at least one team member."
|
||||
},
|
||||
"fields": {
|
||||
"active": "Active",
|
||||
"allocation": "Allocation",
|
||||
"allocation_percentage": "Allocation %",
|
||||
"employeeid": "Employee",
|
||||
"max_load": "Max Load",
|
||||
"name": "Team Name",
|
||||
"payout_method": "Payout Method",
|
||||
"percentage": "Percent"
|
||||
},
|
||||
"labels": {
|
||||
"allocation_total": "Allocation Total: {{total}}%",
|
||||
"members": "Members",
|
||||
"team_options": "Team Options"
|
||||
},
|
||||
"options": {
|
||||
"commission": "Commission",
|
||||
"commission_percentage": "Commission %",
|
||||
"hourly": "Hourly"
|
||||
}
|
||||
},
|
||||
"employees": {
|
||||
"actions": {
|
||||
"addrate": "Add Rate",
|
||||
"addvacation": "Add Vacation",
|
||||
"new": "New Employee",
|
||||
"newrate": "New Rate",
|
||||
"save_employee": "Save Employee",
|
||||
"select": "Select Employee"
|
||||
},
|
||||
"errors": {
|
||||
@@ -1222,6 +1333,7 @@
|
||||
"labels": {
|
||||
"actions": "Actions",
|
||||
"active": "Active",
|
||||
"employee_number_short": "Employee #",
|
||||
"endmustbeafterstart": "End date must be after start date.",
|
||||
"flat_rate": "Flat Rate",
|
||||
"inactive": "Inactive",
|
||||
@@ -1365,6 +1477,7 @@
|
||||
"beta": "BETA",
|
||||
"cancel": "Are you sure you want to cancel? Your changes will not be saved.",
|
||||
"changelog": "Change Log",
|
||||
"click_to_begin": "Click {{action}} to begin",
|
||||
"clear": "Clear",
|
||||
"confirmpassword": "Confirm Password",
|
||||
"created_at": "Created At",
|
||||
@@ -1910,10 +2023,15 @@
|
||||
"employee_refinish": "Refinish",
|
||||
"est_addr1": "Estimator Address",
|
||||
"est_co_nm": "Estimator Company",
|
||||
"est_co_nm_short": "Company",
|
||||
"est_ct_fn": "Estimator First Name",
|
||||
"est_ct_fn_short": "First Name",
|
||||
"est_ct_ln": "Estimator Last Name",
|
||||
"est_ct_ln_short": "Last Name",
|
||||
"est_ea": "Estimator Email",
|
||||
"est_ea_short": "Email",
|
||||
"est_ph1": "Estimator Phone #",
|
||||
"est_ph1_short": "Phone #",
|
||||
"estimate_approved": "Estimate Approved",
|
||||
"estimate_sent_approval": "Estimate Sent for Approval",
|
||||
"federal_tax_payable": "Federal Tax Payable",
|
||||
@@ -1926,9 +2044,13 @@
|
||||
"ins_co_nm": "Insurance Company Name",
|
||||
"ins_co_nm_short": "Ins. Co.",
|
||||
"ins_ct_fn": "Adjuster First Name",
|
||||
"ins_ct_fn_short": "First Name",
|
||||
"ins_ct_ln": "Adjuster Last Name",
|
||||
"ins_ct_ln_short": "Last Name",
|
||||
"ins_ea": "Adjuster Email",
|
||||
"ins_ea_short": "Email",
|
||||
"ins_ph1": "Adjuster Phone #",
|
||||
"ins_ph1_short": "Phone #",
|
||||
"intake": {
|
||||
"label": "Label",
|
||||
"max": "Maximum",
|
||||
@@ -3610,6 +3732,7 @@
|
||||
},
|
||||
"fields": {
|
||||
"actualhrs": "Actual Hours",
|
||||
"amount": "Amount",
|
||||
"ciecacode": "CIECA Code",
|
||||
"clockhours": "Clock Hours",
|
||||
"clockoff": "Clock Off",
|
||||
@@ -3624,7 +3747,10 @@
|
||||
"employee_team": "Employee Team",
|
||||
"flat_rate": "Flat Rate?",
|
||||
"memo": "Memo",
|
||||
"pay": "Pay",
|
||||
"payout_method": "Payout Method",
|
||||
"productivehrs": "Productive Hours",
|
||||
"rate": "Rate",
|
||||
"ro_number": "Job to Post Against",
|
||||
"task_name": "Task"
|
||||
},
|
||||
@@ -3643,6 +3769,10 @@
|
||||
"lunch": "Lunch",
|
||||
"new": "New Time Ticket",
|
||||
"payrollclaimedtasks": "These time tickets will be automatically entered to the system as a part of claiming this task. These numbers are calculated using the jobs assigned lines. If lines are unassigned, they will be excluded from created tickets.",
|
||||
"payout_methods": {
|
||||
"commission": "Commission",
|
||||
"hourly": "Hourly"
|
||||
},
|
||||
"pmbreak": "PM Break",
|
||||
"pmshift": "PM Shift",
|
||||
"shift": "Shift",
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
"assignedlinehours": "",
|
||||
"billdeleted": "",
|
||||
"billposted": "",
|
||||
"billupdated": "",
|
||||
"billmarkforreexport": "",
|
||||
"failedpayment": "",
|
||||
"jobassignmentchange": "",
|
||||
"jobassignmentremoved": "",
|
||||
@@ -292,7 +292,23 @@
|
||||
},
|
||||
"bodyshop": {
|
||||
"actions": {
|
||||
"add_adjuster": "",
|
||||
"add_control_number": "",
|
||||
"add_cost_center": "",
|
||||
"add_courtesy_car_rate_preset": "",
|
||||
"add_delivery_checklist_item": "",
|
||||
"add_dms_allocation": "",
|
||||
"add_estimator": "",
|
||||
"add_insurance_company": "",
|
||||
"add_intake_checklist_item": "",
|
||||
"add_jobline_preset": "",
|
||||
"add_messaging_preset": "",
|
||||
"add_note_preset": "",
|
||||
"add_parts_order_comment": "",
|
||||
"add_production_status_color": "",
|
||||
"add_profit_center": "",
|
||||
"add_task_preset": "",
|
||||
"add_to_email_preset": "",
|
||||
"addapptcolor": "",
|
||||
"addbucket": "",
|
||||
"addpartslocation": "",
|
||||
@@ -301,14 +317,17 @@
|
||||
"addtemplate": "",
|
||||
"newlaborrate": "",
|
||||
"newsalestaxcode": "",
|
||||
"save_shop_information": "",
|
||||
"newstatus": "",
|
||||
"testrender": ""
|
||||
},
|
||||
"errors": {
|
||||
"creatingdefaultview": "",
|
||||
"duplicate_job_status": "",
|
||||
"duplicate_insurance_company": "",
|
||||
"loading": "No se pueden cargar los detalles de la tienda. Por favor llame al soporte técnico.",
|
||||
"saving": ""
|
||||
"saving": "",
|
||||
"task_preset_allocation_exceeded": ""
|
||||
},
|
||||
"fields": {
|
||||
"ReceivableCustomField": "",
|
||||
@@ -338,6 +357,7 @@
|
||||
"require_actual_delivery_date": "",
|
||||
"templates": ""
|
||||
},
|
||||
"disableBillCostCalculation": "",
|
||||
"dms": {
|
||||
"apcontrol": "",
|
||||
"appostingaccount": "",
|
||||
@@ -401,6 +421,35 @@
|
||||
"logo_img_path": "",
|
||||
"logo_img_path_height": "",
|
||||
"logo_img_path_width": "",
|
||||
"scoreboard_setup": {
|
||||
"daily_body_target": "",
|
||||
"daily_paint_target": "",
|
||||
"ignore_blocked_days": "",
|
||||
"last_number_working_days": "",
|
||||
"production_target_hours": ""
|
||||
},
|
||||
"system_settings": {
|
||||
"auto_email": {
|
||||
"attach_pdf_to_email": "",
|
||||
"from_emails": "",
|
||||
"parts_order_cc": "",
|
||||
"parts_return_slip_cc": ""
|
||||
},
|
||||
"job_costing": {
|
||||
"paint_hour_split": "",
|
||||
"paint_materials_hourly_cost_rate": "",
|
||||
"prep_hour_split": "",
|
||||
"shop_materials_hourly_cost_rate": "",
|
||||
"target_touch_time": "",
|
||||
"use_paint_scale_data": ""
|
||||
},
|
||||
"local_media_server": {
|
||||
"enabled": "",
|
||||
"http_path": "",
|
||||
"network_path": "",
|
||||
"token": ""
|
||||
}
|
||||
},
|
||||
"md_categories": "",
|
||||
"md_ccc_rates": "",
|
||||
"md_classes": "",
|
||||
@@ -461,9 +510,13 @@
|
||||
"use_approvals": ""
|
||||
},
|
||||
"messaginglabel": "",
|
||||
"messaginglabel_short": "",
|
||||
"messagingtext": "",
|
||||
"messagingtext_short": "",
|
||||
"noteslabel": "",
|
||||
"noteslabel_short": "",
|
||||
"notestext": "",
|
||||
"notestext_short": "",
|
||||
"notifications": {
|
||||
"description": "",
|
||||
"invalid_followers": "",
|
||||
@@ -597,12 +650,17 @@
|
||||
"federal_tax_itc": "",
|
||||
"gogcode": "",
|
||||
"gst_override": "",
|
||||
"invoice_federal_tax_rate_short": "",
|
||||
"invoice_local_tax_rate_short": "",
|
||||
"invoice_state_tax_rate_short": "",
|
||||
"invoiceexemptcode": "",
|
||||
"invoiceexemptcode_short": "",
|
||||
"item_type": "Item Type",
|
||||
"item_type_freight": "",
|
||||
"item_type_gog": "",
|
||||
"item_type_paint": "",
|
||||
"itemexemptcode": "",
|
||||
"itemexemptcode_short": "",
|
||||
"la1": "",
|
||||
"la2": "",
|
||||
"la3": "",
|
||||
@@ -719,6 +777,7 @@
|
||||
"customtemplates": "",
|
||||
"defaultcostsmapping": "",
|
||||
"defaultprofitsmapping": "",
|
||||
"dms_setup": "",
|
||||
"deliverchecklist": "",
|
||||
"dms": {
|
||||
"cdk": {
|
||||
@@ -735,24 +794,33 @@
|
||||
},
|
||||
"emaillater": "",
|
||||
"employee_teams": "",
|
||||
"employee_options": "",
|
||||
"employee_rates": "",
|
||||
"employee_vacation": "",
|
||||
"employees": "",
|
||||
"estimators": "",
|
||||
"filehandlers": "",
|
||||
"imexpay": "",
|
||||
"insurancecos": "",
|
||||
"intake_delivery": "",
|
||||
"intakechecklist": "",
|
||||
"intellipay_cash_discount": "",
|
||||
"job_status_options": "",
|
||||
"jobstatuses": "",
|
||||
"laborrates": "",
|
||||
"licensing": "",
|
||||
"md_parts_scan": "",
|
||||
"md_ro_guard": "",
|
||||
"md_ro_guard_options": "",
|
||||
"md_tasks_presets": "",
|
||||
"task_preset_options": "",
|
||||
"md_to_emails": "",
|
||||
"md_to_emails_emails": "",
|
||||
"messagingpresets": "",
|
||||
"notification_options": "",
|
||||
"notemplatesavailable": "",
|
||||
"notespresets": "",
|
||||
"jump_to_section": "",
|
||||
"notifications": {
|
||||
"followers": ""
|
||||
},
|
||||
@@ -766,11 +834,22 @@
|
||||
"qbo_departmentid": "",
|
||||
"qbo_usa": "",
|
||||
"rbac": "",
|
||||
"rbac_options": "",
|
||||
"responsibilitycenters": {
|
||||
"costs": "",
|
||||
"default_tax_setup": "",
|
||||
"invoices": "",
|
||||
"profits": "",
|
||||
"quickbooks_qbd": "",
|
||||
"quickbooks_us": "",
|
||||
"sales_tax_codes": "",
|
||||
"tax_accounts": "",
|
||||
"tax_rate_short": "",
|
||||
"tax_surcharge_short": "",
|
||||
"tax_threshold_short": "",
|
||||
"tax_tier_card": "",
|
||||
"tax_tier_short": "",
|
||||
"tax_type_card": "",
|
||||
"title": "",
|
||||
"ttl_adjustment": "",
|
||||
"ttl_tax_adjustment": ""
|
||||
@@ -778,6 +857,9 @@
|
||||
"roguard": {
|
||||
"title": ""
|
||||
},
|
||||
"autoemail": "",
|
||||
"jobcosting": "",
|
||||
"localmediaserver": "",
|
||||
"romepay": "",
|
||||
"scheduling": "",
|
||||
"scoreboardsetup": "",
|
||||
@@ -785,6 +867,7 @@
|
||||
"shopinfo": "",
|
||||
"shoprates": "",
|
||||
"speedprint": "",
|
||||
"speedprint_configurations": "",
|
||||
"ssbuckets": "",
|
||||
"systemsettings": "",
|
||||
"task-presets": "",
|
||||
@@ -808,7 +891,8 @@
|
||||
"tooltips": {
|
||||
"md_parts_scan": {
|
||||
"update_value_tooltip": ""
|
||||
}
|
||||
},
|
||||
"reset-color": ""
|
||||
},
|
||||
"validation": {
|
||||
"centermustexist": "",
|
||||
@@ -1176,21 +1260,42 @@
|
||||
"employee_teams": {
|
||||
"actions": {
|
||||
"new": "",
|
||||
"newmember": ""
|
||||
"newmember": "",
|
||||
"save_team": ""
|
||||
},
|
||||
"errors": {
|
||||
"allocation_total_exact": "",
|
||||
"duplicate_member": "",
|
||||
"minimum_one_member": ""
|
||||
},
|
||||
"fields": {
|
||||
"active": "",
|
||||
"allocation": "",
|
||||
"allocation_percentage": "",
|
||||
"employeeid": "",
|
||||
"max_load": "",
|
||||
"name": "",
|
||||
"payout_method": "",
|
||||
"percentage": ""
|
||||
},
|
||||
"labels": {
|
||||
"allocation_total": "",
|
||||
"members": "",
|
||||
"team_options": ""
|
||||
},
|
||||
"options": {
|
||||
"commission": "",
|
||||
"commission_percentage": "",
|
||||
"hourly": ""
|
||||
}
|
||||
},
|
||||
"employees": {
|
||||
"actions": {
|
||||
"addrate": "",
|
||||
"addvacation": "",
|
||||
"new": "Nuevo empleado",
|
||||
"newrate": "",
|
||||
"save_employee": "",
|
||||
"select": ""
|
||||
},
|
||||
"errors": {
|
||||
@@ -1222,6 +1327,7 @@
|
||||
"labels": {
|
||||
"actions": "",
|
||||
"active": "",
|
||||
"employee_number_short": "",
|
||||
"endmustbeafterstart": "",
|
||||
"flat_rate": "",
|
||||
"inactive": "",
|
||||
@@ -1365,6 +1471,7 @@
|
||||
"beta": "",
|
||||
"cancel": "",
|
||||
"changelog": "",
|
||||
"click_to_begin": "",
|
||||
"clear": "",
|
||||
"confirmpassword": "",
|
||||
"created_at": "",
|
||||
@@ -1910,10 +2017,15 @@
|
||||
"employee_refinish": "",
|
||||
"est_addr1": "Dirección del tasador",
|
||||
"est_co_nm": "Tasador",
|
||||
"est_co_nm_short": "",
|
||||
"est_ct_fn": "Nombre del tasador",
|
||||
"est_ct_fn_short": "",
|
||||
"est_ct_ln": "Apellido del tasador",
|
||||
"est_ct_ln_short": "",
|
||||
"est_ea": "Correo electrónico del tasador",
|
||||
"est_ea_short": "",
|
||||
"est_ph1": "Número de teléfono del tasador",
|
||||
"est_ph1_short": "",
|
||||
"estimate_approved": "",
|
||||
"estimate_sent_approval": "",
|
||||
"federal_tax_payable": "Impuesto federal por pagar",
|
||||
@@ -1926,9 +2038,13 @@
|
||||
"ins_co_nm": "Nombre de la compañía de seguros",
|
||||
"ins_co_nm_short": "",
|
||||
"ins_ct_fn": "Nombre del controlador de archivos",
|
||||
"ins_ct_fn_short": "",
|
||||
"ins_ct_ln": "Apellido del manejador de archivos",
|
||||
"ins_ct_ln_short": "",
|
||||
"ins_ea": "Correo electrónico del controlador de archivos",
|
||||
"ins_ea_short": "",
|
||||
"ins_ph1": "File Handler Phone #",
|
||||
"ins_ph1_short": "",
|
||||
"intake": {
|
||||
"label": "",
|
||||
"max": "",
|
||||
@@ -3610,6 +3726,7 @@
|
||||
},
|
||||
"fields": {
|
||||
"actualhrs": "",
|
||||
"amount": "",
|
||||
"ciecacode": "",
|
||||
"clockhours": "",
|
||||
"clockoff": "",
|
||||
@@ -3624,7 +3741,10 @@
|
||||
"employee_team": "",
|
||||
"flat_rate": "",
|
||||
"memo": "",
|
||||
"pay": "",
|
||||
"payout_method": "",
|
||||
"productivehrs": "",
|
||||
"rate": "",
|
||||
"ro_number": "",
|
||||
"task_name": ""
|
||||
},
|
||||
@@ -3643,6 +3763,10 @@
|
||||
"lunch": "",
|
||||
"new": "",
|
||||
"payrollclaimedtasks": "",
|
||||
"payout_methods": {
|
||||
"commission": "",
|
||||
"hourly": ""
|
||||
},
|
||||
"pmbreak": "",
|
||||
"pmshift": "",
|
||||
"shift": "",
|
||||
|
||||
@@ -120,8 +120,8 @@
|
||||
"appointmentinsert": "",
|
||||
"assignedlinehours": "",
|
||||
"billdeleted": "",
|
||||
"billmarkforreexport": "",
|
||||
"billposted": "",
|
||||
"billupdated": "",
|
||||
"failedpayment": "",
|
||||
"jobassignmentchange": "",
|
||||
"jobassignmentremoved": "",
|
||||
@@ -292,7 +292,23 @@
|
||||
},
|
||||
"bodyshop": {
|
||||
"actions": {
|
||||
"add_adjuster": "",
|
||||
"add_control_number": "",
|
||||
"add_cost_center": "",
|
||||
"add_courtesy_car_rate_preset": "",
|
||||
"add_delivery_checklist_item": "",
|
||||
"add_dms_allocation": "",
|
||||
"add_estimator": "",
|
||||
"add_insurance_company": "",
|
||||
"add_intake_checklist_item": "",
|
||||
"add_jobline_preset": "",
|
||||
"add_messaging_preset": "",
|
||||
"add_note_preset": "",
|
||||
"add_parts_order_comment": "",
|
||||
"add_production_status_color": "",
|
||||
"add_profit_center": "",
|
||||
"add_task_preset": "",
|
||||
"add_to_email_preset": "",
|
||||
"addapptcolor": "",
|
||||
"addbucket": "",
|
||||
"addpartslocation": "",
|
||||
@@ -301,14 +317,17 @@
|
||||
"addtemplate": "",
|
||||
"newlaborrate": "",
|
||||
"newsalestaxcode": "",
|
||||
"save_shop_information": "",
|
||||
"newstatus": "",
|
||||
"testrender": ""
|
||||
},
|
||||
"errors": {
|
||||
"creatingdefaultview": "",
|
||||
"duplicate_job_status": "",
|
||||
"duplicate_insurance_company": "",
|
||||
"loading": "Impossible de charger les détails de la boutique. Veuillez appeler le support technique.",
|
||||
"saving": ""
|
||||
"saving": "",
|
||||
"task_preset_allocation_exceeded": ""
|
||||
},
|
||||
"fields": {
|
||||
"ReceivableCustomField": "",
|
||||
@@ -338,6 +357,7 @@
|
||||
"require_actual_delivery_date": "",
|
||||
"templates": ""
|
||||
},
|
||||
"disableBillCostCalculation": "",
|
||||
"dms": {
|
||||
"apcontrol": "",
|
||||
"appostingaccount": "",
|
||||
@@ -401,6 +421,35 @@
|
||||
"logo_img_path": "",
|
||||
"logo_img_path_height": "",
|
||||
"logo_img_path_width": "",
|
||||
"scoreboard_setup": {
|
||||
"daily_body_target": "",
|
||||
"daily_paint_target": "",
|
||||
"ignore_blocked_days": "",
|
||||
"last_number_working_days": "",
|
||||
"production_target_hours": ""
|
||||
},
|
||||
"system_settings": {
|
||||
"auto_email": {
|
||||
"attach_pdf_to_email": "",
|
||||
"from_emails": "",
|
||||
"parts_order_cc": "",
|
||||
"parts_return_slip_cc": ""
|
||||
},
|
||||
"job_costing": {
|
||||
"paint_hour_split": "",
|
||||
"paint_materials_hourly_cost_rate": "",
|
||||
"prep_hour_split": "",
|
||||
"shop_materials_hourly_cost_rate": "",
|
||||
"target_touch_time": "",
|
||||
"use_paint_scale_data": ""
|
||||
},
|
||||
"local_media_server": {
|
||||
"enabled": "",
|
||||
"http_path": "",
|
||||
"network_path": "",
|
||||
"token": ""
|
||||
}
|
||||
},
|
||||
"md_categories": "",
|
||||
"md_ccc_rates": "",
|
||||
"md_classes": "",
|
||||
@@ -461,9 +510,13 @@
|
||||
"use_approvals": ""
|
||||
},
|
||||
"messaginglabel": "",
|
||||
"messaginglabel_short": "",
|
||||
"messagingtext": "",
|
||||
"messagingtext_short": "",
|
||||
"noteslabel": "",
|
||||
"noteslabel_short": "",
|
||||
"notestext": "",
|
||||
"notestext_short": "",
|
||||
"notifications": {
|
||||
"description": "",
|
||||
"invalid_followers": "",
|
||||
@@ -597,12 +650,17 @@
|
||||
"federal_tax_itc": "",
|
||||
"gogcode": "",
|
||||
"gst_override": "",
|
||||
"invoice_federal_tax_rate_short": "",
|
||||
"invoice_local_tax_rate_short": "",
|
||||
"invoice_state_tax_rate_short": "",
|
||||
"invoiceexemptcode": "",
|
||||
"invoiceexemptcode_short": "",
|
||||
"item_type": "Item Type",
|
||||
"item_type_freight": "",
|
||||
"item_type_gog": "",
|
||||
"item_type_paint": "",
|
||||
"itemexemptcode": "",
|
||||
"itemexemptcode_short": "",
|
||||
"la1": "",
|
||||
"la2": "",
|
||||
"la3": "",
|
||||
@@ -719,6 +777,7 @@
|
||||
"customtemplates": "",
|
||||
"defaultcostsmapping": "",
|
||||
"defaultprofitsmapping": "",
|
||||
"dms_setup": "",
|
||||
"deliverchecklist": "",
|
||||
"dms": {
|
||||
"cdk": {
|
||||
@@ -735,24 +794,33 @@
|
||||
},
|
||||
"emaillater": "",
|
||||
"employee_teams": "",
|
||||
"employee_options": "",
|
||||
"employee_rates": "",
|
||||
"employee_vacation": "",
|
||||
"employees": "",
|
||||
"estimators": "",
|
||||
"filehandlers": "",
|
||||
"imexpay": "",
|
||||
"insurancecos": "",
|
||||
"intake_delivery": "",
|
||||
"intakechecklist": "",
|
||||
"intellipay_cash_discount": "",
|
||||
"job_status_options": "",
|
||||
"jobstatuses": "",
|
||||
"laborrates": "",
|
||||
"licensing": "",
|
||||
"md_parts_scan": "",
|
||||
"md_ro_guard": "",
|
||||
"md_ro_guard_options": "",
|
||||
"md_tasks_presets": "",
|
||||
"task_preset_options": "",
|
||||
"md_to_emails": "",
|
||||
"md_to_emails_emails": "",
|
||||
"messagingpresets": "",
|
||||
"notification_options": "",
|
||||
"notemplatesavailable": "",
|
||||
"notespresets": "",
|
||||
"jump_to_section": "",
|
||||
"notifications": {
|
||||
"followers": ""
|
||||
},
|
||||
@@ -766,11 +834,22 @@
|
||||
"qbo_departmentid": "",
|
||||
"qbo_usa": "",
|
||||
"rbac": "",
|
||||
"rbac_options": "",
|
||||
"responsibilitycenters": {
|
||||
"costs": "",
|
||||
"default_tax_setup": "",
|
||||
"invoices": "",
|
||||
"profits": "",
|
||||
"quickbooks_qbd": "",
|
||||
"quickbooks_us": "",
|
||||
"sales_tax_codes": "",
|
||||
"tax_accounts": "",
|
||||
"tax_rate_short": "",
|
||||
"tax_surcharge_short": "",
|
||||
"tax_threshold_short": "",
|
||||
"tax_tier_card": "",
|
||||
"tax_tier_short": "",
|
||||
"tax_type_card": "",
|
||||
"title": "",
|
||||
"ttl_adjustment": "",
|
||||
"ttl_tax_adjustment": ""
|
||||
@@ -778,6 +857,9 @@
|
||||
"roguard": {
|
||||
"title": ""
|
||||
},
|
||||
"autoemail": "",
|
||||
"jobcosting": "",
|
||||
"localmediaserver": "",
|
||||
"romepay": "",
|
||||
"scheduling": "",
|
||||
"scoreboardsetup": "",
|
||||
@@ -785,6 +867,7 @@
|
||||
"shopinfo": "",
|
||||
"shoprates": "",
|
||||
"speedprint": "",
|
||||
"speedprint_configurations": "",
|
||||
"ssbuckets": "",
|
||||
"systemsettings": "",
|
||||
"task-presets": "",
|
||||
@@ -808,7 +891,8 @@
|
||||
"tooltips": {
|
||||
"md_parts_scan": {
|
||||
"update_value_tooltip": ""
|
||||
}
|
||||
},
|
||||
"reset-color": ""
|
||||
},
|
||||
"validation": {
|
||||
"centermustexist": "",
|
||||
@@ -1176,21 +1260,42 @@
|
||||
"employee_teams": {
|
||||
"actions": {
|
||||
"new": "",
|
||||
"newmember": ""
|
||||
"newmember": "",
|
||||
"save_team": ""
|
||||
},
|
||||
"errors": {
|
||||
"allocation_total_exact": "",
|
||||
"duplicate_member": "",
|
||||
"minimum_one_member": ""
|
||||
},
|
||||
"fields": {
|
||||
"active": "",
|
||||
"allocation": "",
|
||||
"allocation_percentage": "",
|
||||
"employeeid": "",
|
||||
"max_load": "",
|
||||
"name": "",
|
||||
"payout_method": "",
|
||||
"percentage": ""
|
||||
},
|
||||
"labels": {
|
||||
"allocation_total": "",
|
||||
"members": "",
|
||||
"team_options": ""
|
||||
},
|
||||
"options": {
|
||||
"commission": "",
|
||||
"commission_percentage": "",
|
||||
"hourly": ""
|
||||
}
|
||||
},
|
||||
"employees": {
|
||||
"actions": {
|
||||
"addrate": "",
|
||||
"addvacation": "",
|
||||
"new": "Nouvel employé",
|
||||
"newrate": "",
|
||||
"save_employee": "",
|
||||
"select": ""
|
||||
},
|
||||
"errors": {
|
||||
@@ -1222,6 +1327,7 @@
|
||||
"labels": {
|
||||
"actions": "",
|
||||
"active": "",
|
||||
"employee_number_short": "",
|
||||
"endmustbeafterstart": "",
|
||||
"flat_rate": "",
|
||||
"inactive": "",
|
||||
@@ -1365,6 +1471,7 @@
|
||||
"beta": "",
|
||||
"cancel": "",
|
||||
"changelog": "",
|
||||
"click_to_begin": "",
|
||||
"clear": "",
|
||||
"confirmpassword": "",
|
||||
"created_at": "",
|
||||
@@ -1910,10 +2017,15 @@
|
||||
"employee_refinish": "",
|
||||
"est_addr1": "Adresse de l'évaluateur",
|
||||
"est_co_nm": "Expert",
|
||||
"est_co_nm_short": "",
|
||||
"est_ct_fn": "Prénom de l'évaluateur",
|
||||
"est_ct_fn_short": "",
|
||||
"est_ct_ln": "Nom de l'évaluateur",
|
||||
"est_ct_ln_short": "",
|
||||
"est_ea": "Courriel de l'évaluateur",
|
||||
"est_ea_short": "",
|
||||
"est_ph1": "Numéro de téléphone de l'évaluateur",
|
||||
"est_ph1_short": "",
|
||||
"estimate_approved": "",
|
||||
"estimate_sent_approval": "",
|
||||
"federal_tax_payable": "Impôt fédéral à payer",
|
||||
@@ -1926,9 +2038,13 @@
|
||||
"ins_co_nm": "Nom de la compagnie d'assurance",
|
||||
"ins_co_nm_short": "",
|
||||
"ins_ct_fn": "Prénom du gestionnaire de fichiers",
|
||||
"ins_ct_fn_short": "",
|
||||
"ins_ct_ln": "Nom du gestionnaire de fichiers",
|
||||
"ins_ct_ln_short": "",
|
||||
"ins_ea": "Courriel du gestionnaire de fichiers",
|
||||
"ins_ea_short": "",
|
||||
"ins_ph1": "Numéro de téléphone du gestionnaire de fichiers",
|
||||
"ins_ph1_short": "",
|
||||
"intake": {
|
||||
"label": "",
|
||||
"max": "",
|
||||
@@ -3610,6 +3726,7 @@
|
||||
},
|
||||
"fields": {
|
||||
"actualhrs": "",
|
||||
"amount": "",
|
||||
"ciecacode": "",
|
||||
"clockhours": "",
|
||||
"clockoff": "",
|
||||
@@ -3624,7 +3741,10 @@
|
||||
"employee_team": "",
|
||||
"flat_rate": "",
|
||||
"memo": "",
|
||||
"pay": "",
|
||||
"payout_method": "",
|
||||
"productivehrs": "",
|
||||
"rate": "",
|
||||
"ro_number": "",
|
||||
"task_name": ""
|
||||
},
|
||||
@@ -3643,6 +3763,10 @@
|
||||
"lunch": "",
|
||||
"new": "",
|
||||
"payrollclaimedtasks": "",
|
||||
"payout_methods": {
|
||||
"commission": "",
|
||||
"hourly": ""
|
||||
},
|
||||
"pmbreak": "",
|
||||
"pmshift": "",
|
||||
"shift": "",
|
||||
|
||||
@@ -8,8 +8,9 @@ const AuditTrailMapping = {
|
||||
appointmentcancel: (lost_sale_reason) => i18n.t("audit_trail.messages.appointmentcancel", { lost_sale_reason }),
|
||||
appointmentinsert: (start) => i18n.t("audit_trail.messages.appointmentinsert", { start }),
|
||||
billdeleted: (invoice_number) => i18n.t("audit_trail.messages.billdeleted", { invoice_number }),
|
||||
billmarkforreexport: (invoice_number) => i18n.t("audit_trail.messages.billmarkforreexport", { invoice_number }),
|
||||
billposted: (invoice_number) => i18n.t("audit_trail.messages.billposted", { invoice_number }),
|
||||
billupdated: (invoice_number) => i18n.t("audit_trail.messages.billupdated", { invoice_number }),
|
||||
billupdated: (invoice_number, details) => i18n.t("audit_trail.messages.billupdated", { invoice_number, details }),
|
||||
jobassignmentchange: (operation, name) => i18n.t("audit_trail.messages.jobassignmentchange", { operation, name }),
|
||||
jobassignmentremoved: (operation) => i18n.t("audit_trail.messages.jobassignmentremoved", { operation }),
|
||||
jobchecklist: (type, inproduction, status) =>
|
||||
@@ -25,6 +26,10 @@ const AuditTrailMapping = {
|
||||
jobinproductionchange: (inproduction) => i18n.t("audit_trail.messages.jobinproductionchange", { inproduction }),
|
||||
jobinvoiced: () => i18n.t("audit_trail.messages.jobinvoiced"),
|
||||
jobclosedwithbypass: () => i18n.t("audit_trail.messages.jobclosedwithbypass"),
|
||||
joblineupdate: (lineDescription, details) =>
|
||||
i18n.t("audit_trail.messages.joblineupdate", { details, lineDescription }),
|
||||
jobmanualcreate: () => i18n.t("audit_trail.messages.jobmanualcreate"),
|
||||
jobmanuallineinsert: (details) => i18n.t("audit_trail.messages.jobmanuallineinsert", { details }),
|
||||
jobmodifylbradj: ({ mod_lbr_ty, hours }) => i18n.t("audit_trail.messages.jobmodifylbradj", { mod_lbr_ty, hours }),
|
||||
jobnoteadded: () => i18n.t("audit_trail.messages.jobnoteadded"),
|
||||
jobnoteupdated: () => i18n.t("audit_trail.messages.jobnoteupdated"),
|
||||
@@ -71,7 +76,11 @@ const AuditTrailMapping = {
|
||||
i18n.t("audit_trail.messages.tasks_uncompleted", {
|
||||
title,
|
||||
uncompletedBy
|
||||
})
|
||||
}),
|
||||
timeticketcreated: (employee, date, details) =>
|
||||
i18n.t("audit_trail.messages.timeticketcreated", { employee, date, details }),
|
||||
timeticketupdated: (employee, date, details) =>
|
||||
i18n.t("audit_trail.messages.timeticketupdated", { employee, date, details })
|
||||
};
|
||||
|
||||
export default AuditTrailMapping;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user