admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-3624 Extract shared title-row UI and polish config forms

Browse Source
This commit is contained in:
Dave
2026-03-24 20:56:30 -04:00
parent 1102670e66
commit 866e9581c2
23 changed files with 2706 additions and 1680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/components/layout-form-row/inline-form-row-title.utils.js Normal file
View File

@@ -0,0 +1,66 @@
export const inlineFormRowTitleStyles = Object.freeze({
input: Object.freeze({
background: "var(--imex-form-title-input-bg)",
border: "1px solid var(--imex-form-title-input-border)",
borderRadius: 6,
paddingInline: 10,
paddingBlock: 4,
lineHeight: 1.3
}),
row: Object.freeze({
display: "flex",
gap: 4,
flexWrap: "wrap",
alignItems: "center",
width: "100%",
paddingInline: 4
}),
group: Object.freeze({
display: "flex",
alignItems: "center",
gap: 6,
minWidth: 0
}),
label: Object.freeze({
color: "var(--ant-color-text)",
fontSize: "var(--ant-font-size)",
fontWeight: 500,
whiteSpace: "nowrap"
}),
handle: Object.freeze({
color: "var(--ant-color-text-tertiary)",
fontSize: 14,
flex: "0 0 auto",
marginRight: 4
}),
separator: Object.freeze({
width: 1,
height: 18,
background: "color-mix(in srgb, var(--imex-form-surface-border) 78%, 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 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"
})
});

64
client/src/components/layout-form-row/layout-form-row.component.jsx
View File

@@ -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,6 +8,8 @@ export default function LayoutFormRow({
children,
grow = false,
noDivider = false,
titleOnly = false,
wrapTitle = false,
gutter,
rowProps,
@@ -19,10 +22,14 @@ export default function LayoutFormRow({
...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);
@@ -31,13 +38,15 @@ export default function LayoutFormRow({
const mergedStyles = mergeSemanticStyles(
{
...(wrapTitle ? INLINE_FORM_ROW_WRAP_TITLE_STYLES : null),
header: {
paddingInline: isCompactRow ? 12 : 16,
paddingInline: isHeaderOnly ? 8 : isCompactRow ? 12 : 16,
background: headBg,
borderBottomColor: borderColor
},
body: {
padding: isCompactRow ? 12 : 16,
padding: hideBody ? 0 : isCompactRow ? 12 : 16,
display: hideBody ? "none" : undefined,
background: bg
}
},
@@ -45,31 +54,12 @@ export default function LayoutFormRow({
);
const baseCardStyle = {
marginBottom: isCompactRow ? "8px" : ".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", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
.filter(Boolean)
.join(" ")}
style={baseCardStyle}
styles={mergedStyles}
>
{items[0]}
</Card>
);
}
const count = items.length;
// Modern responsive strategy leveraging Ant Design 6:
@@ -133,22 +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", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
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={resolvedGutter} 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>
);
}
@@ -162,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 || {}) }
};
@@ -171,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 || {}) }
};

60
client/src/components/layout-form-row/layout-form-row.styles.scss
View File

@@ -13,6 +13,8 @@
--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);
}
/* Pick the selector that matches your app and remove the rest */
@@ -20,6 +22,8 @@ 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-row {
@@ -58,6 +62,54 @@ html[data-theme="dark"] {
}
}
&.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);
}
@@ -68,7 +120,7 @@ html[data-theme="dark"] {
/* 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;
}
@@ -89,10 +141,14 @@ html[data-theme="dark"] {
width: 100%;
}
.ant-form-item:has(> .imex-form-row--compact) {
.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 {

467
client/src/components/shop-employees/shop-employees-form.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
@@ -27,8 +27,16 @@ 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 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 {
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_TEXT_STYLE
} 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";
@@ -42,17 +50,16 @@ const mapDispatchToProps = () => ({
export function ShopEmployeesFormComponent({ bodyshop }) {
const { t } = useTranslation();
const [form] = useForm();
const employeeRates = Form.useWatch(["rates"], form) || [];
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: 8,
lg: { flex: "0 0 320px" },
xl: { flex: "0 0 280px" },
xxl: { flex: "0 0 380px" }
md: 12,
lg: 8,
xl: 8,
xxl: 8
};
const history = useNavigate();
const search = queryString.parse(useLocation().search);
@@ -194,161 +201,200 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
}
>
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
<LayoutFormRow title={t("bodyshop.labels.employee_options")}>
<div style={{ display: "grid", rowGap: 16 }}>
<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"),
}
]}
<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_GROUP_STYLE,
flex: "0 0 auto"
}}
>
<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"),
}
]}
<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_GROUP_STYLE,
flex: "0 0 auto"
}}
>
<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();
<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>
</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>
</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
}
return Promise.reject(t("employees.validation.unique_employee_number"));
} else {
});
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>
</Row>
<Row gutter={[16, 16]} wrap>
<Col {...employeeOptionsColProps}>
<Form.Item label={t("employees.fields.active")} valuePropName="checked" name="active">
<Switch />
</Form.Item>
</Col>
<Col {...employeeOptionsColProps}>
<Form.Item label={t("employees.fields.flat_rate")} name="flat_rate" valuePropName="checked">
<Switch />
</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");
})
]}
>
<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();
if (user_email && value) {
const response = await client.query({
query: QUERY_USERS_BY_EMAIL,
variables: {
email: user_email
}
return Promise.reject(t("bodyshop.validation.useremailmustexist"));
} else {
});
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>
</div>
}
})
]}
>
<FormItemEmail />
</Form.Item>
</Col>
<Col {...employeeOptionsColProps}>
<Form.Item label={t("employees.fields.external_id")} name="external_id">
<Input />
</Form.Item>
</Col>
</Row>
</LayoutFormRow>
<LayoutFormRow title={t("bodyshop.labels.employee_rates")}>
<Form.List name={["rates"]}>
@@ -356,17 +402,82 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
return (
<div>
{fields.map((field, index) => {
const employeeRate = employeeRates[field.name] || {};
return (
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
<LayoutFormRow
grow
title={getFormListItemTitle(
t("employees.fields.cost_center"),
index,
employeeRate.cost_center
)}
noDivider
titleOnly
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 260px"
}}
>
<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 aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "0 1 190px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.rate")}</div>
<Form.Item
noStyle
name={[field.name, "rate"]}
rules={[
{
required: true
}
]}
>
<InputNumber
min={0}
precision={2}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
</div>
}
wrapTitle
extra={
<Space align="center" size="small">
<Button
@@ -384,45 +495,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
/>
</Space>
}
>
<Form.Item
label={t("employees.fields.cost_center")}
name={[field.name, "cost_center"]}
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")}
name={[field.name, "rate"]}
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
>
<InputNumber min={0} precision={2} />
</Form.Item>
</LayoutFormRow>
/>
</Form.Item>
);
})}

55
client/src/components/shop-employees/shop-employees.container.jsx
View File

@@ -1,7 +1,8 @@
import { Drawer, Grid } from "antd";
import { useQuery } from "@apollo/client/react";
import queryString from "query-string";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import AlertComponent from "../alert/alert.component";
@@ -13,34 +14,58 @@ import "./shop-employees.styles.scss";
const mapStateToProps = createStructuredSelector({});
function ShopEmployeesContainer() {
const search = queryString.parse(useLocation().search);
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 handleDrawerClose = () => {
delete search.employeeId;
navigate({
search: queryString.stringify(search)
});
};
if (error) return <AlertComponent title={error.message} type="error" />;
return (
<RbacWrapper action="employees:page">
<div
className={[
"shop-employees-layout",
hasSelectedEmployee ? "shop-employees-layout--with-detail" : null
]
.filter(Boolean)
.join(" ")}
>
<div className="shop-employees-layout">
<div className="shop-employees-layout__list">
<ShopEmployeesListComponent employees={data ? data.employees : []} loading={loading} />
</div>
{hasSelectedEmployee ? (
<div className="shop-employees-layout__details">
<ShopEmployeesFormComponent />
</div>
) : null}
</div>
<Drawer
open={hasSelectedEmployee}
destroyOnHidden
placement="right"
size={drawerPercentage}
onClose={handleDrawerClose}
>
{hasSelectedEmployee ? <ShopEmployeesFormComponent /> : null}
</Drawer>
</RbacWrapper>
);
}

13
client/src/components/shop-employees/shop-employees.styles.scss
View File

@@ -1,16 +1,7 @@
.shop-employees-layout {
display: grid;
gap: 16px;
align-items: start;
}
.shop-employees-layout__list,
.shop-employees-layout__details {
min-width: 0;
}
@media (min-width: 1700px) {
.shop-employees-layout--with-detail {
grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
}
.shop-employees-layout__list {
min-width: 0;
}

869
client/src/components/shop-info/shop-info.general.component.jsx
View File

File diff suppressed because it is too large Load Diff

160
client/src/components/shop-info/shop-info.intake.component.jsx
View File

@@ -1,12 +1,19 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { Button, Form, Input, InputNumber, Select, Space, Switch } from "antd";
import { useTranslation } from "react-i18next";
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 { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
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
} from "../layout-form-row/inline-form-row-title.utils.js";
const SelectorDiv = styled.div`
.ant-form-item .ant-select {
@@ -18,8 +25,6 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
const { t } = useTranslation();
const TemplateListGenerated = TemplateList();
const intakeChecklistItems = Form.useWatch(["intakechecklist", "form"], form) || [];
const deliverChecklistItems = Form.useWatch(["deliverchecklist", "form"], form) || [];
return (
<div>
<SelectorDiv>
@@ -88,18 +93,54 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
return (
<div>
{fields.map((field, index) => {
const intakeChecklistItem = intakeChecklistItems[field.name] || {};
return (
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("jobs.fields.intake.name"),
index,
intakeChecklistItem.name,
intakeChecklistItem.label
)}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 320px"
}}
>
<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_GROUP_STYLE,
flex: "0 0 auto"
}}
>
<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
@@ -118,19 +159,6 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
</Space>
}
>
<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`}
@@ -195,14 +223,6 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
);
}}
</Form.Item>
<Form.Item
label={t("jobs.fields.intake.required")}
key={`${index}required`}
name={[field.name, "required"]}
valuePropName="checked"
>
<Switch />
</Form.Item>
</LayoutFormRow>
</Form.Item>
);
@@ -229,18 +249,54 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
return (
<div>
{fields.map((field, index) => {
const deliverChecklistItem = deliverChecklistItems[field.name] || {};
return (
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("jobs.fields.intake.name"),
index,
deliverChecklistItem.name,
deliverChecklistItem.label
)}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 320px"
}}
>
<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_GROUP_STYLE,
flex: "0 0 auto"
}}
>
<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
@@ -259,20 +315,6 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
</Space>
}
>
<Form.Item
label={t("jobs.fields.intake.name")}
key={`${index}named`}
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}typed`}
@@ -339,14 +381,6 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
);
}}
</Form.Item>
<Form.Item
label={t("jobs.fields.intake.required")}
key={`${index}requiredd`}
name={[field.name, "required"]}
valuePropName="checked"
>
<Switch />
</Form.Item>
</LayoutFormRow>
</Form.Item>
);

610
client/src/components/shop-info/shop-info.laborrates.component.jsx
View File

@@ -1,15 +1,19 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
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 { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
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
} from "../layout-form-row/inline-form-row-title.utils.js";
export default function ShopInfoLaborRates() {
const { t } = useTranslation();
const form = Form.useFormInstance();
const laborRates = Form.useWatch(["md_labor_rates"], form) || [];
return (
<>
@@ -27,13 +31,42 @@ export default function ShopInfoLaborRates() {
return (
<div>
{fields.map((field, index) => {
const laborRate = laborRates[field.name] || {};
return (
<Form.Item key={field.key}>
<LayoutFormRow
noDivider={index === 0}
title={getFormListItemTitle(t("jobs.fields.labor_rate_desc"), index, laborRate.rate_label)}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 340px"
}}
>
<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>
}
wrapTitle
extra={
<Space align="center" size="small">
<Button
@@ -52,294 +85,281 @@ export default function ShopInfoLaborRates() {
</Space>
}
>
<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"),
}
]}
>
<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"),
}
]}
>
<CurrencyInput 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 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 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>
<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 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 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 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>
</LayoutFormRow>
</Form.Item>
);

152
client/src/components/shop-info/shop-info.parts-scan.jsx
View File

@@ -1,10 +1,17 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
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 { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
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
} 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"];
@@ -76,23 +83,86 @@ export default function ShopInfoPartsScan({ form }) {
{fields.map((field, index) => {
const selectedField = watchedFields?.[index]?.field || "line_desc";
const fieldType = getFieldType(selectedField);
const selectedFieldLabel =
fieldSelectOptions.find((option) => option.value === selectedField)?.label ||
t("bodyshop.fields.md_parts_scan.field");
const ruleTitle = watchedFields?.[index]?.value
? `${selectedFieldLabel}: ${watchedFields[index].value}`
: null;
return (
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("bodyshop.fields.md_parts_scan.field"),
index,
ruleTitle,
selectedFieldLabel
)}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 260px"
}}
>
<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_GROUP_STYLE,
flex: "0 0 auto"
}}
>
<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_GROUP_STYLE,
flex: "0 0 auto"
}}
>
<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
@@ -112,32 +182,6 @@ export default function ShopInfoPartsScan({ form }) {
}
>
<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>
{/* Operation */}
{fieldType !== "predefined" && fieldType && (
<Col span={6}>
@@ -194,34 +238,6 @@ export default function ShopInfoPartsScan({ form }) {
</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

453
client/src/components/shop-info/shop-info.responsibilitycenters.component.jsx
View File

@@ -1,4 +1,4 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
import { useState } from "react";
@@ -13,6 +13,14 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.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 {
INLINE_TITLE_GROUP_STYLE,
INLINE_TITLE_HANDLE_STYLE,
INLINE_TITLE_INPUT_STYLE,
INLINE_TITLE_LABEL_STYLE,
INLINE_TITLE_ROW_STYLE,
INLINE_TITLE_SEPARATOR_STYLE
} from "../layout-form-row/inline-form-row-title.utils.js";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
import ShopInfoResponsibilitycentersTaxesComponent from "./shop-info.responsibilitycenters.taxes.component";
import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
@@ -34,8 +42,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoResponsibili
export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
const { t } = useTranslation();
const dmsPayers = Form.useWatch(["cdk_configuration", "payers"], form) || [];
const costResponsibilityCenters = Form.useWatch(["md_responsibility_centers", "costs"], form) || [];
const profitResponsibilityCenters = Form.useWatch(["md_responsibility_centers", "profits"], form) || [];
const hasDMSKey = bodyshopHasDmsKey(bodyshop);
@@ -659,18 +665,116 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
return (
<div>
{fields.map((field, index) => {
const responsibilityCenter = costResponsibilityCenters[field.name] || {};
const hasProfitCenterBodyFields =
(hasDMSKey && !bodyshop.rr_dealerid) || bodyshop.cdk_dealerid || bodyshop.rr_dealerid;
return (
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("bodyshop.fields.responsibilitycenter"),
index,
responsibilityCenter.name,
responsibilityCenter.accountname
)}
titleOnly={!hasProfitCenterBodyFields}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 340px",
maxWidth: 390
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter")}
</div>
<Form.Item noStyle name={[field.name, "name"]} rules={[{ required: true }]}>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 220px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter_accountname")}
</div>
<Form.Item noStyle name={[field.name, "accountname"]} rules={[{ required: true }]}>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter_accountname")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 220px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter_accountdesc")}
</div>
<Form.Item noStyle name={[field.name, "accountdesc"]} rules={[{ required: true }]}>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter_accountdesc")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
{!hasDMSKey && (
<>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "0.9 1 220px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter_accountitem")}
</div>
<Form.Item
noStyle
name={[field.name, "accountitem"]}
rules={[{ required: true }]}
>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter_accountitem")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
</>
)}
</div>
}
wrapTitle
extra={
<Space align="center" size="small">
<Button
@@ -689,31 +793,6 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</Space>
}
>
<Form.Item
label={t("bodyshop.fields.responsibilitycenter")}
key={`${index}name`}
name={[field.name, "name"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenter_accountname")}
key={`${index}accountname`}
name={[field.name, "accountname"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
key={`${index}accountdesc`}
name={[field.name, "accountdesc"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
{hasDMSKey && !bodyshop.rr_dealerid && (
<>
<Form.Item
@@ -774,18 +853,135 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
return (
<div>
{fields.map((field, index) => {
const responsibilityCenter = profitResponsibilityCenters[field.name] || {};
const hasProfitCenterBodyFields =
(hasDMSKey && !bodyshop.rr_dealerid) || bodyshop.cdk_dealerid || bodyshop.rr_dealerid;
return (
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("bodyshop.fields.responsibilitycenter"),
index,
responsibilityCenter.name,
responsibilityCenter.accountdesc
)}
titleOnly={!hasProfitCenterBodyFields}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1.4 1 440px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter")}
</div>
<Form.Item noStyle name={[field.name, "name"]} rules={[{ required: true }]}>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 260px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter_accountdesc")}
</div>
<Form.Item noStyle name={[field.name, "accountdesc"]} rules={[{ required: true }]}>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter_accountdesc")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
{!hasDMSKey && (
<>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "0.9 1 220px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenter_accountitem")}
</div>
<Form.Item
noStyle
name={[field.name, "accountitem"]}
rules={[{ required: true }]}
>
<Input
placeholder={t("bodyshop.fields.responsibilitycenter_accountitem")}
onBlur={handleBlur}
size="small"
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
</>
)}
{bodyshop.rr_dealerid && (
<>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "0.9 1 220px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenters.item_type")}
</div>
<Form.Item
noStyle
name={[field.name, "rr_item_type"]}
rules={[{ required: true }]}
>
<Select
size="small"
style={{ width: "100%" }}
styles={{
selector: INLINE_TITLE_INPUT_STYLE
}}
options={[
{
value: "G",
label: t("bodyshop.fields.responsibilitycenters.item_type_gog")
},
{
value: "P",
label: t("bodyshop.fields.responsibilitycenters.item_type_paint")
},
{
value: "F",
label: t("bodyshop.fields.responsibilitycenters.item_type_freight")
}
]}
/>
</Form.Item>
</div>
</>
)}
</div>
}
wrapTitle
extra={
<Space align="center" size="small">
<Button
@@ -804,32 +1000,6 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
</Space>
}
>
<Form.Item
label={t("bodyshop.fields.responsibilitycenter")}
key={`${index}name`}
name={[field.name, "name"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
key={`${index}accountdesc`}
name={[field.name, "accountdesc"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
{!hasDMSKey && (
<Form.Item
label={t("bodyshop.fields.responsibilitycenter_accountitem")}
key={`${index}accountitem`}
name={[field.name, "accountitem"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
)}
{hasDMSKey && !bodyshop.rr_dealerid && (
<Form.Item
label={t("bodyshop.fields.dms.dms_acctnumber")}
@@ -849,53 +1019,31 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
<Input onBlur={handleBlur} />
</Form.Item>
)}
{bodyshop.rr_dealerid && (
<>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.gogcode")}
key={`${index}rr_gogcode`}
name={[field.name, "rr_gogcode"]}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.item_type")}
key={`${index}rr_item_type`}
name={[field.name, "rr_item_type"]}
rules={[{ required: true }]}
>
<Select
options={[
{ value: "G", label: t("bodyshop.fields.responsibilitycenters.item_type_gog") },
{
value: "P",
label: t("bodyshop.fields.responsibilitycenters.item_type_paint")
},
{
value: "F",
label: t("bodyshop.fields.responsibilitycenters.item_type_freight")
}
]}
/>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.taxable_flag")}
key={`${index}rr_cust_txbl_flag`}
name={[field.name, "rr_cust_txbl_flag"]}
rules={[{ required: true }]}
>
<Select
options={[
{ value: "T", label: t("bodyshop.fields.responsibilitycenters.taxable") },
{ value: "N", label: t("bodyshop.fields.responsibilitycenters.nontaxable") }
]}
/>
</Form.Item>
</>
)}
{bodyshop.rr_dealerid && [
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.gogcode")}
key={`${index}rr_gogcode`}
name={[field.name, "rr_gogcode"]}
col={{ xs: 24, md: 8, lg: 8, xl: 8, xxl: 8 }}
rules={[{ required: true }]}
>
<Input onBlur={handleBlur} />
</Form.Item>,
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.taxable_flag")}
key={`${index}rr_cust_txbl_flag`}
name={[field.name, "rr_cust_txbl_flag"]}
col={{ xs: 24, md: 8, lg: 8, xl: 8, xxl: 8 }}
rules={[{ required: true }]}
>
<Select
options={[
{ value: "T", label: t("bodyshop.fields.responsibilitycenters.taxable") },
{ value: "N", label: t("bodyshop.fields.responsibilitycenters.nontaxable") }
]}
/>
</Form.Item>
]}
</LayoutFormRow>
</Form.Item>
);
@@ -3459,20 +3607,61 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
return (
<div>
{fields.map((field, index) => {
const salesTaxCode =
form.getFieldValue(["md_responsibility_centers", "sales_tax_codes", field.name]) || {};
return (
<Form.Item key={field.key}>
<LayoutFormRow
id="sales_tax_codes"
noDivider
title={getFormListItemTitle(
t("bodyshop.fields.responsibilitycenters.sales_tax_codes.description"),
index,
salesTaxCode.description,
salesTaxCode.code
)}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1.2 1 320px"
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenters.sales_tax_codes.description")}
</div>
<Form.Item noStyle name={[field.name, "description"]} rules={[{ required: true }]}>
<Input
size="small"
placeholder={t(
"bodyshop.fields.responsibilitycenters.sales_tax_codes.description"
)}
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "0 1 140px",
maxWidth: 170
}}
>
<div style={INLINE_TITLE_LABEL_STYLE}>
{t("bodyshop.fields.responsibilitycenters.sales_tax_codes.code")}
</div>
<Form.Item noStyle name={[field.name, "code"]} rules={[{ required: true }]}>
<Input
size="small"
placeholder={t("bodyshop.fields.responsibilitycenters.sales_tax_codes.code")}
style={{
...INLINE_TITLE_INPUT_STYLE,
width: "100%"
}}
/>
</Form.Item>
</div>
</div>
}
wrapTitle
extra={
<Button
type="text"
@@ -3483,22 +3672,6 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
/>
}
>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.sales_tax_codes.description")}
key={`${index}description`}
name={[field.name, "description"]}
rules={[{ required: true }]}
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.sales_tax_codes.code")}
key={`${index}code`}
name={[field.name, "code"]}
rules={[{ required: true }]}
>
<Input />
</Form.Item>
<Form.Item
label={t("bodyshop.fields.responsibilitycenters.sales_tax_codes.federal")}
key={`${index}federal`}

61
client/src/components/shop-info/shop-info.rostatus.component.jsx
View File

@@ -25,6 +25,23 @@ 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;
}
`;
export function ShopInfoROStatusComponent({ bodyshop, form }) {
@@ -264,7 +281,33 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
<LayoutFormRow
key={field.key}
noDivider
title={getFormListItemTitle(t("jobs.fields.status"), index, productionColor.status)}
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"
@@ -279,22 +322,6 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
>
<div>
<Form.Item
label={t("jobs.fields.status")}
key={`${index}status`}
name={[field.name, "status"]}
rules={[
{
required: true
//message: t("general.validation.required"),
}
]}
>
<Select
options={productionColorStatusOptions.map((item) => ({ value: item, label: item }))}
/>
</Form.Item>
<Form.Item
label={t("bodyshop.fields.statuses.color")}
key={`${index}color`}
name={[field.name, "color"]}
rules={[

359
client/src/components/shop-info/shop-info.scheduling.component.jsx
View File

@@ -1,5 +1,5 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
import { DeleteFilled, ReloadOutlined } from "@ant-design/icons";
import { Button, Form, Input, InputNumber, Select, Space, Switch, TimePicker, Tooltip } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -7,7 +7,6 @@ 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 { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { ColorPicker } from "./shop-info.rostatus.component";
import {
@@ -15,6 +14,7 @@ import {
DEFAULT_TRANSLUCENT_PICKER_COLOR,
getTintedCardSurfaceStyles
} from "./shop-info.color.utils";
import "./shop-info.scheduling.styles.scss";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -33,6 +33,106 @@ const WORKING_DAYS = [
{ 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"]) || [];
@@ -141,11 +241,27 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("bodyshop.fields.appt_colors.label"),
index,
appointmentColor.label
)}
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
@@ -166,20 +282,6 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
{...appointmentColorSurfaceStyles}
>
<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={[
@@ -189,7 +291,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
}
]}
>
<ColorpickerFormItemComponent />
<ColorpickerFormItemComponent styles={APPOINTMENT_COLOR_PICKER_STYLES} />
</Form.Item>
</LayoutFormRow>
</Form.Item>
@@ -231,12 +333,64 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
<Form.Item key={field.key}>
<LayoutFormRow
noDivider
title={getFormListItemTitle(
t("bodyshop.fields.ssbuckets.label"),
index,
schedulingBucket.label,
schedulingBucket.id
)}
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
@@ -246,85 +400,10 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
remove(field.name);
}}
/>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
orientation="horizontal"
/>
</Space>
}
{...schedulingBucketSurfaceStyles}
>
<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>
<Form.Item
label={
<Space>
{t("bodyshop.fields.ssbuckets.color")}
<Tooltip title={t("bodyshop.tooltips.reset-color")}>
<Button
size="small"
type="text"
icon={<ReloadOutlined />}
onClick={() => {
form.setFieldValue(["ssbuckets", field.name, "color"]);
@@ -335,16 +414,62 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
}
]);
}}
>
Reset
</Button>
</Space>
}
key={`${index}color`}
name={[field.name, "color"]}
>
<ColorPicker />
</Form.Item>
/>
</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 />
</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>
</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>
</LayoutFormRow>
</Form.Item>
);

58
client/src/components/shop-info/shop-info.scheduling.styles.scss Normal file
View File

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

118
client/src/components/shop-info/shop-info.speedprint.component.jsx
View File

@@ -1,17 +1,22 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
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 { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
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
} 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 speedPrintItems = Form.useWatch(["speedprint"], form) || [];
const TemplateListGenerated = InstanceRenderManager({
imex: Object.fromEntries(Object.entries(allTemplates).filter(([, { enhanced_payroll }]) => !enhanced_payroll)),
rome: allTemplates
@@ -24,18 +29,71 @@ export default function ShopInfoSpeedPrint() {
return (
<div>
{fields.map((field, index) => {
const speedPrintItem = speedPrintItems[field.name] || {};
return (
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
<LayoutFormRow
grow
title={getFormListItemTitle(
t("bodyshop.fields.speedprint.label"),
index,
speedPrintItem.label,
speedPrintItem.id
)}
noDivider
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "0 1 180px"
}}
>
<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,
flex: "1 1 280px"
}}
>
<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
@@ -45,37 +103,15 @@ export default function ShopInfoSpeedPrint() {
remove(field.name);
}}
/>
<FormListMoveArrows move={move} index={index} total={fields.length} orientation="horizontal" />
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
orientation="horizontal"
/>
</Space>
}
>
<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")}

14
client/src/components/shop-info/shop-intellipay-config.component.jsx
View File

@@ -18,17 +18,15 @@ 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"]]} style={{ marginBottom: 20 }}>
{() => {
const { intellipay_config } = form.getFieldsValue();
if (intellipay_config?.enable_cash_discount)
return <Alert title={t("bodyshop.labels.intellipay_cash_discount")} />;
}}
</Form.Item>
{cashDiscountEnabled && (
<div style={{ marginBottom: 12 }}>
<Alert title={t("bodyshop.labels.intellipay_cash_discount")} />
</div>
)}
<LayoutFormRow
header={InstanceRenderManager({

281
client/src/components/shop-teams/shop-employee-teams.form.component.jsx
View File

@@ -1,20 +1,6 @@
import { DeleteFilled } from "@ant-design/icons";
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
import { useMutation, useQuery } from "@apollo/client/react";
import {
Button,
Card,
Col,
Form,
Input,
InputNumber,
Row,
Select,
Skeleton,
Space,
Switch,
Tag,
Typography
} from "antd";
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Skeleton, Space, Switch, Typography } from "antd";
import querystring from "query-string";
import { useEffect, useState } from "react";
@@ -28,6 +14,14 @@ import AlertComponent from "../alert/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 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
} from "../layout-form-row/inline-form-row-title.utils.js";
import {
INSERT_EMPLOYEE_TEAM,
@@ -37,11 +31,10 @@ import {
import EmployeeSearchSelectComponent from "../employee-search-select/employee-search-select.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import {
LABOR_TYPES,
getSplitTotal,
hasExactSplitTotal,
LABOR_TYPES,
normalizeEmployeeTeam,
normalizeTeamMember,
validateEmployeeTeamMembers
} from "./shop-employee-teams.form.utils.js";
@@ -55,24 +48,8 @@ const PAYOUT_METHOD_OPTIONS = [
{ labelKey: "employee_teams.options.commission_percentage", value: "commission" }
];
const TEAM_MEMBER_PRIMARY_FIELD_COLS = {
employee: { xs: 24, lg: 13, xxl: 14 },
allocation: { xs: 24, sm: 12, lg: 4, xxl: 4 },
payoutMethod: { xs: 24, sm: 12, lg: 7, xxl: 6 }
};
const TEAM_MEMBER_RATE_FIELD_COLS = { xs: 24, sm: 12, md: 8, lg: 6, xxl: 4 };
const getPayoutMethodTagColor = (payoutMethod) => (payoutMethod === "commission" ? "gold" : "blue");
const getEmployeeDisplayName = (employees = [], employeeId) => {
const employee = employees.find((currentEmployee) => currentEmployee.id === employeeId);
if (!employee) return null;
const fullName = [employee.first_name, employee.last_name].filter(Boolean).join(" ").trim();
return fullName || employee.employee_number || null;
};
const formatAllocationPercentage = (percentage) => {
if (percentage === null || percentage === undefined || percentage === "") return null;
@@ -144,41 +121,19 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
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 getTeamMemberTitle = (teamMember = {}) => {
const employeeName =
getEmployeeDisplayName(bodyshop.employees, teamMember.employeeid) || t("employee_teams.fields.employeeid");
const allocation = formatAllocationPercentage(teamMember.percentage);
const payoutMethod =
teamMember.payout_method === "commission"
? t("employee_teams.options.commission")
: t("employee_teams.options.hourly");
return (
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
<Typography.Text strong>{employeeName}</Typography.Text>
<Tag variant="filled" color="geekblue">
{`${t("employee_teams.fields.allocation")}: ${allocation || "--"}`}
</Tag>
<Tag variant="filled" color={getPayoutMethodTagColor(teamMember.payout_method)}>
{payoutMethod}
</Tag>
</div>
);
};
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);
@@ -263,7 +218,42 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
<Skeleton active title={false} paragraph={{ rows: 12 }} />
) : (
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
<LayoutFormRow title={t("employee_teams.labels.team_options")}>
<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_GROUP_STYLE,
flex: "0 0 auto",
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")}
@@ -275,9 +265,6 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
>
<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"
@@ -287,7 +274,7 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
}
]}
>
<InputNumber min={0} precision={1} />
<InputNumber min={0} precision={1} suffix="%" />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow title={t("employee_teams.labels.members")}>
@@ -296,8 +283,6 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
return (
<div>
{fields.map((field, index) => {
const teamMember = normalizeTeamMember(teamMembers[field.name]);
return (
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
<Form.Item name={[field.name, "id"]} hidden>
@@ -305,7 +290,92 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
</Form.Item>
<LayoutFormRow
grow
title={getTeamMemberTitle(teamMember)}
title={
<div style={INLINE_TITLE_ROW_STYLE}>
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
<div
style={{
...INLINE_TITLE_GROUP_STYLE,
flex: "1 1 320px"
}}
>
<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,
flex: "0 1 170px"
}}
>
<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,
flex: "0 1 260px"
}}
>
<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
@@ -325,50 +395,10 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
}
>
<div>
<Row gutter={[16, 0]}>
<Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.employee}>
<Form.Item
label={t("employee_teams.fields.employeeid")}
name={[field.name, "employeeid"]}
rules={[
{
required: true
}
]}
>
<EmployeeSearchSelectComponent options={bodyshop.employees} />
</Form.Item>
</Col>
<Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.allocation}>
<Form.Item
label={t("employee_teams.fields.allocation_percentage")}
name={[field.name, "percentage"]}
rules={[
{
required: true
}
]}
>
<InputNumber min={0} max={100} precision={2} />
</Form.Item>
</Col>
<Col {...TEAM_MEMBER_PRIMARY_FIELD_COLS.payoutMethod}>
<Form.Item
label={t("employee_teams.fields.payout_method")}
key={`${index}-payout-method`}
name={[field.name, "payout_method"]}
initialValue="hourly"
rules={[
{
required: true
}
]}
>
<Select options={payoutMethodOptions} />
</Form.Item>
</Col>
</Row>
<Form.Item noStyle dependencies={[["employee_team_members", field.name, "payout_method"]]}>
<Form.Item
noStyle
dependencies={[["employee_team_members", field.name, "payout_method"]]}
>
{() => {
const payoutMethod =
form.getFieldValue(["employee_team_members", field.name, "payout_method"]) ||
@@ -378,7 +408,10 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
return (
<Row gutter={[16, 0]}>
{LABOR_TYPES.map((laborType) => (
<Col {...TEAM_MEMBER_RATE_FIELD_COLS} key={`${index}-${fieldName}-${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]}
@@ -389,9 +422,9 @@ export function ShopEmployeeTeamsFormComponent({ bodyshop }) {
]}
>
{payoutMethod === "commission" ? (
<InputNumber min={0} max={100} precision={2} />
<InputNumber min={0} max={100} precision={2} suffix="%" />
) : (
<CurrencyInput />
<CurrencyInput prefix="$" />
)}
</Form.Item>
</Col>

2
client/src/components/shop-teams/shop-employee-teams.form.component.test.jsx
View File

@@ -144,7 +144,7 @@ const addBaseTeamMember = ({ employeeId = "emp-1", percentage = 100, rate = 25 }
fireEvent.change(screen.getByLabelText("Employee"), {
target: { value: employeeId }
});
fireEvent.change(screen.getByRole("spinbutton", { name: "Allocation %" }), {
fireEvent.change(screen.getByRole("spinbutton", { name: "Allocation" }), {
target: { value: String(percentage) }
});
fillHourlyRates(rate);

16
client/src/translations/en_us/common.json
View File

@@ -463,9 +463,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.",
@@ -832,7 +836,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.",
@@ -1942,10 +1947,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",
@@ -1958,9 +1968,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",

16
client/src/translations/es/common.json
View File

@@ -463,9 +463,13 @@
"use_approvals": ""
},
"messaginglabel": "",
"messaginglabel_short": "",
"messagingtext": "",
"messagingtext_short": "",
"noteslabel": "",
"noteslabel_short": "",
"notestext": "",
"notestext_short": "",
"notifications": {
"description": "",
"invalid_followers": "",
@@ -832,7 +836,8 @@
"tooltips": {
"md_parts_scan": {
"update_value_tooltip": ""
}
},
"reset-color": ""
},
"validation": {
"centermustexist": "",
@@ -1942,10 +1947,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",
@@ -1958,9 +1968,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": "",

16
client/src/translations/fr/common.json
View File

@@ -463,9 +463,13 @@
"use_approvals": ""
},
"messaginglabel": "",
"messaginglabel_short": "",
"messagingtext": "",
"messagingtext_short": "",
"noteslabel": "",
"noteslabel_short": "",
"notestext": "",
"notestext_short": "",
"notifications": {
"description": "",
"invalid_followers": "",
@@ -832,7 +836,8 @@
"tooltips": {
"md_parts_scan": {
"update_value_tooltip": ""
}
},
"reset-color": ""
},
"validation": {
"centermustexist": "",
@@ -1942,10 +1947,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",
@@ -1958,9 +1968,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": "",