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

IO-813 IO-829 IO-830 IO-814

Browse Source
This commit is contained in:
Patrick Fic
2021-04-01 00:52:26 +00:00
parent dae950e2d3 10690ec187
commit 9964d7f2d6
43 changed files with 1161 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.7.1"> <babeledit_project be_version="2.7.1" version="1.2">
<!-- <!--
BabelEdit project file BabelEdit project file
@@ -17226,6 +17226,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>pag</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>pal</name> <name>pal</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -19419,6 +19440,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>checklistdocuments</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>checklists</name> <name>checklists</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -28448,6 +28490,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>targets</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>weeklytarget</name> <name>weeklytarget</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

113
client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
View File

@@ -1,10 +1,10 @@
import { useMutation, useQuery } from "@apollo/client"; import { useMutation, useQuery } from "@apollo/client";
import { Button, Form, PageHeader, Popconfirm } from "antd"; import { Button, Drawer, Form, Grid, PageHeader, Popconfirm } from "antd";
import moment from "moment"; import moment from "moment";
import queryString from "query-string"; import queryString from "query-string";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom"; import { useLocation, useHistory } from "react-router-dom";
import { import {
INSERT_NEW_BILL_LINES, INSERT_NEW_BILL_LINES,
UPDATE_BILL_LINE, UPDATE_BILL_LINE,
@@ -17,6 +17,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
export default function BillDetailEditcontainer() { export default function BillDetailEditcontainer() {
const search = queryString.parse(useLocation().search); const search = queryString.parse(useLocation().search);
const history = useHistory();
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm(); const [form] = Form.useForm();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@@ -25,6 +26,22 @@ export default function BillDetailEditcontainer() {
const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES); const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
const [updateBillLine] = useMutation(UPDATE_BILL_LINE); const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const bpoints = {
xs: "100%",
sm: "100%",
md: "100%",
lg: "80%",
xl: "80%",
xxl: "70%",
};
const drawerPercentage = selectedBreakpoint
? bpoints[selectedBreakpoint[0]]
: "100%";
const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, { const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
variables: { billid: search.billid }, variables: { billid: search.billid },
skip: !!!search.billid, skip: !!!search.billid,
@@ -111,47 +128,59 @@ export default function BillDetailEditcontainer() {
const exported = data && data.bills_by_pk && data.bills_by_pk.exported; const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
return ( return (
<LoadingSkeleton loading={loading}> <Drawer
<PageHeader width={drawerPercentage}
title={ onClose={() => {
data && delete search.billid;
`${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}` history.push({ search: queryString.stringify(search) });
} }}
extra={ visible={search.billid}
<Popconfirm >
visible={visible} {loading && <LoadingSkeleton />}
onConfirm={() => form.submit()} {!loading && (
onCancel={() => setVisible(false)} <>
okButtonProps={{ loading: updateLoading }} <PageHeader
title={t("bills.labels.editadjwarning")} title={
data &&
`${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
}
extra={
<Popconfirm
visible={visible}
onConfirm={() => form.submit()}
onCancel={() => setVisible(false)}
okButtonProps={{ loading: updateLoading }}
title={t("bills.labels.editadjwarning")}
>
<Button
htmlType="submit"
disabled={exported}
onClick={handleSave}
loading={updateLoading}
type="primary"
>
{t("general.actions.save")}
</Button>
</Popconfirm>
}
/>
<Form
form={form}
onFinish={handleFinish}
initialValues={transformData(data)}
layout="vertical"
> >
<Button <BillFormContainer form={form} billEdit disabled={exported} />
htmlType="submit" <JobDocumentsGallery
disabled={exported} jobId={data ? data.bills_by_pk.jobid : null}
onClick={handleSave} billId={search.billid}
loading={updateLoading} documentsList={data ? data.bills_by_pk.documents : []}
type="primary" billsCallback={refetch}
> />
{t("general.actions.save")} </Form>
</Button> </>
</Popconfirm> )}
} </Drawer>
/>
<Form
form={form}
onFinish={handleFinish}
initialValues={transformData(data)}
layout="vertical"
>
<BillFormContainer form={form} billEdit disabled={exported} />
<JobDocumentsGallery
jobId={data ? data.bills_by_pk.jobid : null}
billId={search.billid}
documentsList={data ? data.bills_by_pk.documents : []}
billsCallback={refetch}
/>
</Form>
</LoadingSkeleton>
); );
} }

31
client/src/components/bill-form/bill-form.component.jsx
View File

@@ -1,16 +1,16 @@
import { useApolloClient } from "@apollo/client";
import { import {
Button, Button,
Divider,
Form, Form,
Input, Input,
Select, Select,
Space, Space,
Statistic, Statistic,
Switch, Switch,
Typography,
Upload, Upload,
} from "antd"; } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useApolloClient } from "@apollo/client";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -159,7 +159,6 @@ export function BillFormComponent({
> >
<Input disabled={disabled || disableInvNumber} /> <Input disabled={disabled || disableInvNumber} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("bills.fields.date")} label={t("bills.fields.date")}
name="date" name="date"
@@ -191,6 +190,17 @@ export function BillFormComponent({
> >
<CurrencyInput min={0} disabled={disabled} /> <CurrencyInput min={0} disabled={disabled} />
</Form.Item> </Form.Item>
<Form.Item label={t("bills.fields.allpartslocation")} name="location">
<Select style={{ width: "10rem" }} disabled={disabled} allowClear>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item <Form.Item
label={t("bills.fields.federal_tax_rate")} label={t("bills.fields.federal_tax_rate")}
name="federal_tax_rate" name="federal_tax_rate"
@@ -209,19 +219,8 @@ export function BillFormComponent({
> >
<CurrencyInput min={0} /> <CurrencyInput min={0} />
</Form.Item> </Form.Item>
<Form.Item label={t("bills.fields.allpartslocation")} name="location">
<Select style={{ width: "10rem" }} disabled={disabled} allowClear>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
</Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Typography.Title level={4}> <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
{t("bills.labels.bill_lines")}
</Typography.Title>
<BillFormLines <BillFormLines
lineData={lineData} lineData={lineData}
discount={discount} discount={discount}
@@ -264,7 +263,7 @@ export function BillFormComponent({
if (!!totals) if (!!totals)
return ( return (
<div> <div>
<Space> <Space split={<Divider type="vertical" />}>
<Statistic <Statistic
title={t("bills.labels.subtotal")} title={t("bills.labels.subtotal")}
value={totals.subtotal.toFormat()} value={totals.subtotal.toFormat()}

755
client/src/components/bill-form/bill-form.lines.component.jsx
View File

@@ -1,24 +1,22 @@
import { DeleteFilled, WarningOutlined } from "@ant-design/icons"; import { WarningOutlined } from "@ant-design/icons";
import { import {
Button, Button,
Divider,
Form, Form,
Input, Input,
InputNumber, InputNumber,
Select, Select,
Space, Space,
Switch, Switch,
Table,
} from "antd"; } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.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 { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser //currentUser: selectCurrentUser
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -38,331 +36,394 @@ export function BillEnterModalLinesComponent({
const { t } = useTranslation(); const { t } = useTranslation();
const { setFieldsValue, getFieldsValue, getFieldValue } = form; const { setFieldsValue, getFieldsValue, getFieldValue } = form;
const columns = [
{
title: t("billlines.fields.jobline"),
dataIndex: "joblineid",
editable: true,
width: "10%",
formItemProps: (field) => {
return {
key: `${field.index}joblinename`,
name: [field.name, "joblineid"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<BillLineSearchSelect
disabled={disabled}
options={lineData}
onSelect={(value, opt) => {
setFieldsValue({
billlines: getFieldsValue(["billlines"]).billlines.map(
(item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
quantity: opt.part_qty || 1,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults.costs[opt.part_type] ||
null
: null,
};
}
return item;
}
),
});
}}
/>
),
},
{
title: t("billlines.fields.line_desc"),
dataIndex: "line_desc",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}line_desc`,
name: [field.name, "line_desc"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => <Input disabled={disabled} />,
},
{
title: t("billlines.fields.quantity"),
dataIndex: "quantity",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}quantity`,
name: [field.name, "quantity"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<InputNumber precision={0} min={0} disabled={disabled} />
),
},
{
title: t("billlines.fields.actual_price"),
dataIndex: "actual_price",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}actual_price`,
name: [field.name, "actual_price"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<CurrencyInput
min={0}
disabled={disabled}
onBlur={(e) => {
setFieldsValue({
billlines: getFieldsValue("billlines").billlines.map(
(item, idx) => {
console.log("Checking", index, idx);
if (idx === index) {
console.log(
"Found and setting.",
!!item.actual_cost
? item.actual_cost
: Math.round(
(parseFloat(e.target.value) * (1 - discount) +
Number.EPSILON) *
100
) / 100
);
return {
...item,
actual_cost: !!item.actual_cost
? item.actual_cost
: Math.round(
(parseFloat(e.target.value) * (1 - discount) +
Number.EPSILON) *
100
) / 100,
};
}
return item;
}
),
});
}}
/>
),
},
{
title: t("billlines.fields.actual_cost"),
dataIndex: "actual_cost",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}actual_cost`,
name: [field.name, "actual_cost"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<CurrencyInput min={0} disabled={disabled} />
),
additional: (record, index) => (
<Form.Item shouldUpdate>
{() => {
const line = getFieldsValue(["billlines"]).billlines[index];
if (!!!line) return null;
const lineDiscount = (
1 -
Math.round((line.actual_cost / line.actual_price) * 100) / 100
).toPrecision(2);
if (lineDiscount - discount === 0) return <div />;
return <WarningOutlined style={{ color: "red" }} />;
}}
</Form.Item>
),
},
{
title: t("billlines.fields.cost_center"),
dataIndex: "cost_center",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}cost_center`,
name: [field.name, "cost_center"],
rules: [
{
required: true,
message: t("general.validation.required"),
},
],
};
},
formInput: (record, index) => (
<Select style={{ width: "150px" }} disabled={disabled}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item.name}>{item.name}</Select.Option>
))}
</Select>
),
},
{
title: t("billlines.fields.federal_tax_applicable"),
dataIndex: "applicable_taxes.federal",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}fedtax`,
valuePropName: "checked",
initialValue: true,
name: [field.name, "applicable_taxes", "federal"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
},
{
title: t("billlines.fields.state_tax_applicable"),
dataIndex: "applicable_taxes.state",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}statetax`,
valuePropName: "checked",
name: [field.name, "applicable_taxes", "state"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
},
{
title: t("billlines.fields.local_tax_applicable"),
dataIndex: "applicable_taxes.local",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}localtax`,
valuePropName: "checked",
name: [field.name, "applicable_taxes", "local"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
},
{
title: t("billlines.fields.location"),
dataIndex: "location",
editable: true,
formItemProps: (field) => {
return {
key: `${field.index}location`,
name: [field.name, "location"],
};
},
formInput: (record, index) => (
<Select style={{ width: "150px" }} disabled={disabled}>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
),
},
{
title: t("billlines.labels.deductedfromlbr"),
dataIndex: "deductedfromlbr",
editable: true,
formItemProps: (field) => {
return {
valuePropName: "checked",
key: `${field.index}deductedfromlbr`,
name: [field.name, "deductedfromlbr"],
};
},
formInput: (record, index) => <Switch disabled={disabled} />,
additional: (record, index) => (
<Form.Item shouldUpdate style={{ display: "inline-block" }}>
{() => {
if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
return (
<div>
<Form.Item
label={t("joblines.fields.mod_lbr_ty")}
key={`${index}modlbrty`}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
>
<Select allowClear>
<Select.Option value="LAA">
{t("joblines.fields.lbr_types.LAA")}
</Select.Option>
<Select.Option value="LAB">
{t("joblines.fields.lbr_types.LAB")}
</Select.Option>
<Select.Option value="LAD">
{t("joblines.fields.lbr_types.LAD")}
</Select.Option>
<Select.Option value="LAE">
{t("joblines.fields.lbr_types.LAE")}
</Select.Option>
<Select.Option value="LAF">
{t("joblines.fields.lbr_types.LAF")}
</Select.Option>
<Select.Option value="LAG">
{t("joblines.fields.lbr_types.LAG")}
</Select.Option>
<Select.Option value="LAM">
{t("joblines.fields.lbr_types.LAM")}
</Select.Option>
<Select.Option value="LAR">
{t("joblines.fields.lbr_types.LAR")}
</Select.Option>
<Select.Option value="LAS">
{t("joblines.fields.lbr_types.LAS")}
</Select.Option>
<Select.Option value="LAU">
{t("joblines.fields.lbr_types.LAU")}
</Select.Option>
<Select.Option value="LA1">
{t("joblines.fields.lbr_types.LA1")}
</Select.Option>
<Select.Option value="LA2">
{t("joblines.fields.lbr_types.LA2")}
</Select.Option>
<Select.Option value="LA3">
{t("joblines.fields.lbr_types.LA3")}
</Select.Option>
<Select.Option value="LA4">
{t("joblines.fields.lbr_types.LA4")}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={t("jobs.labels.adjustmentrate")}
name={[record.name, "lbr_adjustment", "rate"]}
initialValue={bodyshop.default_adjustment_rate}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber precision={2} min={0.01} />
</Form.Item>
</div>
);
return <span />;
}}
</Form.Item>
),
},
];
const mergedColumns = columns.map((col) => {
if (!col.editable) return col;
return {
...col,
onCell: (record) => ({
record,
formItemProps: col.formItemProps,
formInput: col.formInput,
additional: col.additional,
dataIndex: col.dataIndex,
title: col.title,
}),
};
});
return ( return (
<Form.List name="billlines"> <Form.List name="billlines">
{(fields, { add, remove, move }) => { {(fields, { add, remove, move }) => {
return ( return (
<div className="invoice-form-lines-wrapper"> <>
{fields.map((field, index) => ( <Table
<Form.Item required={false} key={field.key}> components={{
<div> body: {
<div style={{ display: "flex", alignItems: "center" }}> cell: EditableCell,
<LayoutFormRow style={{ flex: 1 }} grow> },
<Form.Item }}
span={8} size="small"
label={t("billlines.fields.jobline")} bordered
key={`${index}joblinename`} dataSource={fields}
name={[field.name, "joblineid"]} columns={mergedColumns}
rules={[ scroll={{ x: true }}
{ rowClassName="editable-row"
required: true, />
message: t("general.validation.required"),
},
]}
>
<BillLineSearchSelect
disabled={disabled}
options={lineData}
onSelect={(value, opt) => {
setFieldsValue({
billlines: getFieldsValue([
"billlines",
]).billlines.map((item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
quantity: opt.part_qty || 1,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults.costs[
opt.part_type
] || null
: null,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("billlines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input disabled={disabled} />
</Form.Item>
<Form.Item
label={t("billlines.fields.quantity")}
key={`${index}quantity`}
name={[field.name, "quantity"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber
precision={0}
min={0}
disabled={disabled}
/>
</Form.Item>
<Form.Item
label={t("billlines.fields.actual_price")}
key={`${index}actual_price`}
name={[field.name, "actual_price"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput
min={0}
disabled={disabled}
onBlur={(e) => {
setFieldsValue({
billlines: getFieldsValue(
"billlines"
).billlines.map((item, idx) => {
if (idx === index) {
return {
...item,
actual_cost: !!item.actual_cost
? item.actual_cost
: Math.round(
(parseFloat(e.target.value) *
(1 - discount) +
Number.EPSILON) *
100
) / 100,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<div>
<Form.Item
label={t("billlines.fields.actual_cost")}
key={`${index}actual_cost`}
name={[field.name, "actual_cost"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput min={0} disabled={disabled} />
</Form.Item>
<Form.Item shouldUpdate>
{() => {
const line = getFieldsValue(["billlines"])
.billlines[index];
if (!!!line) return null;
const lineDiscount = (
1 -
Math.round(
(line.actual_cost / line.actual_price) * 100
) /
100
).toPrecision(2);
if (lineDiscount - discount === 0) return <div />;
return <WarningOutlined style={{ color: "red" }} />;
}}
</Form.Item>
</div>
<Form.Item
label={t("billlines.fields.cost_center")}
key={`${index}cost_center`}
name={[field.name, "cost_center"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select style={{ width: "150px" }} disabled={disabled}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item.name}>
{item.name}
</Select.Option>
))}
</Select>
</Form.Item>
<Space flex>
<Form.Item
label={t("billlines.fields.federal_tax_applicable")}
key={`${index}fedtax`}
initialValue={true}
valuePropName="checked"
name={[field.name, "applicable_taxes", "federal"]}
>
<Switch disabled={disabled} />
</Form.Item>
<Form.Item
label={t("billlines.fields.state_tax_applicable")}
key={`${index}statetax`}
valuePropName="checked"
name={[field.name, "applicable_taxes", "state"]}
>
<Switch disabled={disabled} />
</Form.Item>
<Form.Item
label={t("billlines.fields.local_tax_applicable")}
key={`${index}localtax`}
valuePropName="checked"
name={[field.name, "applicable_taxes", "local"]}
>
<Switch disabled={disabled} />
</Form.Item>
</Space>
<Form.Item
label={t("billlines.fields.location")}
key={`${index}location`}
name={[field.name, "location"]}
>
<Select style={{ width: "10rem" }} disabled={disabled}>
{bodyshop.md_parts_locations.map((loc, idx) => (
<Select.Option key={idx} value={loc}>
{loc}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label={t("billlines.labels.deductedfromlbr")}
key={`${index}deductedfromlbr`}
valuePropName="checked"
name={[field.name, "deductedfromlbr"]}
>
<Switch disabled={disabled} />
</Form.Item>
<Form.Item shouldUpdate>
{() => {
if (
getFieldValue([
"billlines",
field.name,
"deductedfromlbr",
])
)
return (
<div>
<Form.Item
label={t("joblines.fields.mod_lbr_ty")}
key={`${index}modlbrty`}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
name={[
field.name,
"lbr_adjustment",
"mod_lbr_ty",
]}
>
<Select allowClear>
<Select.Option value="LAA">
{t("joblines.fields.lbr_types.LAA")}
</Select.Option>
<Select.Option value="LAB">
{t("joblines.fields.lbr_types.LAB")}
</Select.Option>
<Select.Option value="LAD">
{t("joblines.fields.lbr_types.LAD")}
</Select.Option>
<Select.Option value="LAE">
{t("joblines.fields.lbr_types.LAE")}
</Select.Option>
<Select.Option value="LAF">
{t("joblines.fields.lbr_types.LAF")}
</Select.Option>
<Select.Option value="LAG">
{t("joblines.fields.lbr_types.LAG")}
</Select.Option>
<Select.Option value="LAM">
{t("joblines.fields.lbr_types.LAM")}
</Select.Option>
<Select.Option value="LAR">
{t("joblines.fields.lbr_types.LAR")}
</Select.Option>
<Select.Option value="LAS">
{t("joblines.fields.lbr_types.LAS")}
</Select.Option>
<Select.Option value="LAU">
{t("joblines.fields.lbr_types.LAU")}
</Select.Option>
<Select.Option value="LA1">
{t("joblines.fields.lbr_types.LA1")}
</Select.Option>
<Select.Option value="LA2">
{t("joblines.fields.lbr_types.LA2")}
</Select.Option>
<Select.Option value="LA3">
{t("joblines.fields.lbr_types.LA3")}
</Select.Option>
<Select.Option value="LA4">
{t("joblines.fields.lbr_types.LA4")}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={t("jobs.labels.adjustmentrate")}
name={[field.name, "lbr_adjustment", "rate"]}
initialValue={
bodyshop.default_adjustment_rate
}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber precision={2} min={0.01} />
</Form.Item>
</div>
);
return <span />;
}}
</Form.Item>
</LayoutFormRow>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
/>
<DeleteFilled
disabled={disabled}
onClick={() => {
remove(field.name);
}}
/>
</div>
<Divider />
</div>
</Form.Item>
))}
<Form.Item> <Form.Item>
<Button <Button
disabled={disabled} disabled={disabled}
@@ -374,7 +435,7 @@ export function BillEnterModalLinesComponent({
{t("billlines.actions.newline")} {t("billlines.actions.newline")}
</Button> </Button>
</Form.Item> </Form.Item>
</div> </>
); );
}} }}
</Form.List> </Form.List>
@@ -385,3 +446,39 @@ export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(BillEnterModalLinesComponent); )(BillEnterModalLinesComponent);
const EditableCell = ({
dataIndex,
title,
inputType,
record,
index,
children,
formInput,
formItemProps,
additional,
...restProps
}) => {
if (additional)
return (
<td {...restProps}>
<Space>
<Form.Item
name={dataIndex}
{...(formItemProps && formItemProps(record))}
>
{formInput && formInput(record, record.key)}
</Form.Item>
{additional && additional(record, record.key)}
</Space>
</td>
);
return (
<td {...restProps}>
<Form.Item name={dataIndex} {...(formItemProps && formItemProps(record))}>
{formInput && formInput(record, record.key)}
</Form.Item>
</td>
);
};

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

@@ -3,6 +3,7 @@ import { Form } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import { Prompt, useLocation } from "react-router-dom"; import { Prompt, useLocation } from "react-router-dom";
import "./form-fields-changed.styles.scss";
export default function FormsFieldChanged({ form }) { export default function FormsFieldChanged({ form }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -11,13 +12,17 @@ export default function FormsFieldChanged({ form }) {
form.resetFields(); form.resetFields();
}; };
const loc = useLocation(); const loc = useLocation();
if (!form.isFieldsTouched()) return <></>; //if (!form.isFieldsTouched()) return <></>;
return ( return (
<Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}> <Form.Item
className="form-fields-changed"
shouldUpdate
style={{ margin: 0, padding: 0, minHeight: "unset" }}
>
{() => { {() => {
if (form.isFieldsTouched()) if (form.isFieldsTouched())
return ( return (
<div> <span>
<Prompt <Prompt
when={true} when={true}
message={(location) => { message={(location) => {
@@ -42,7 +47,7 @@ export default function FormsFieldChanged({ form }) {
</div> </div>
} }
/> />
</div> </span>
); );
return <div style={{ display: "none" }}></div>; return <div style={{ display: "none" }}></div>;
}} }}

7
client/src/components/form-fields-changed-alert/form-fields-changed.styles.scss Normal file
View File

@@ -0,0 +1,7 @@
.form-fields-changed {
.ant-form-item-control {
.ant-form-item-control-input {
min-height: unset !important;
}
}
}

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

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

97
client/src/components/global-search/global-search.component.jsx
View File

@@ -1,11 +1,11 @@
import { useLazyQuery } from "@apollo/client"; import { useLazyQuery } from "@apollo/client";
import { AutoComplete, Input } from "antd"; import { AutoComplete, Divider, Input, Space } from "antd";
import _ from "lodash"; import _ from "lodash";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries"; import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import PhoneNumberFormatter from "../../utils/PhoneFormatter";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
export default function GlobalSearch() { export default function GlobalSearch() {
@@ -16,13 +16,12 @@ export default function GlobalSearch() {
); );
const executeSearch = (v) => { const executeSearch = (v) => {
callSearch(v); if (v && v.variables.search && v.variables.search !== "") callSearch(v);
}; };
const debouncedExecuteSearch = _.debounce(executeSearch, 500); const debouncedExecuteSearch = _.debounce(executeSearch, 750);
const handleSearch = (value) => { const handleSearch = (value) => {
if (value && value !== "") debouncedExecuteSearch({ variables: { search: value } });
debouncedExecuteSearch({ variables: { search: value } });
}; };
const renderTitle = (title) => { const renderTitle = (title) => {
@@ -35,27 +34,20 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.jobs")), label: renderTitle(t("menus.header.search.jobs")),
options: data.search_jobs.map((job) => { options: data.search_jobs.map((job) => {
return { return {
key: job.id,
value: job.ro_number, value: job.ro_number,
label: ( label: (
<Link to={`/manage/jobs/${job.id}`}> <Link to={`/manage/jobs/${job.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large"> <strong>{job.ro_number || t("general.labels.na")}</strong>
<strong>{job.ro_number || t("general.labels.na")}</strong> <span>{`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
</span> job.ownr_co_nm || ""
}`}</span>
<span className="imex-flex-row__margin-large">{`${ <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
job.ownr_fn || ""
} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`}</span>
<span className="imex-flex-row__margin-large">{`${
job.v_model_yr || ""
} ${job.v_make_desc || ""} ${
job.v_model_desc || "" job.v_model_desc || ""
}`}</span> }`}</span>
<span className="imex-flex-row__margin-large">{`${job.clm_no}`}</span> <span>{`${job.clm_no}`}</span>
<span className="imex-flex-row__margin-large imex-flex-row__grow"> </Space>
<CurrencyFormatter>{`${job.clm_total}`}</CurrencyFormatter>
</span>
</div>
</Link> </Link>
), ),
}; };
@@ -65,16 +57,20 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.owners")), label: renderTitle(t("menus.header.search.owners")),
options: data.search_owners.map((owner) => { options: data.search_owners.map((owner) => {
return { return {
key: owner.id,
value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${ value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
owner.ownr_co_nm || "" owner.ownr_co_nm || ""
}`, }`,
label: ( label: (
<Link to={`/manage/owners/${owner.id}`}> <Link to={`/manage/owners/${owner.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${ <span>{`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
owner.ownr_fn || "" owner.ownr_co_nm || ""
} ${owner.ownr_ln || ""} ${owner.ownr_co_nm || ""}`}</span> }`}</span>
</div> <PhoneNumberFormatter>
{owner.ownr_ph1}
</PhoneNumberFormatter>
</Space>
</Link> </Link>
), ),
}; };
@@ -84,18 +80,21 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.vehicles")), label: renderTitle(t("menus.header.search.vehicles")),
options: data.search_vehicles.map((vehicle) => { options: data.search_vehicles.map((vehicle) => {
return { return {
key: vehicle.id,
value: `${vehicle.v_model_yr || ""} ${ value: `${vehicle.v_model_yr || ""} ${
vehicle.v_make_desc || "" vehicle.v_make_desc || ""
} ${vehicle.v_model_desc || ""}`, } ${vehicle.v_model_desc || ""}`,
label: ( label: (
<Link to={`/manage/vehicles/${vehicle.id}`}> <Link to={`/manage/vehicles/${vehicle.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${ <span>
vehicle.v_model_yr || "" {`${vehicle.v_model_yr || ""} ${
} ${vehicle.v_make_desc || ""} ${ vehicle.v_make_desc || ""
vehicle.v_model_desc || "" } ${vehicle.v_model_desc || ""}`}
} - ${vehicle.plate_no} - ${vehicle.v_vin}`}</span> </span>
</div> <span>{vehicle.plate_no}</span>
<span> {vehicle.v_vin}</span>
</Space>
</Link> </Link>
), ),
}; };
@@ -105,15 +104,16 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.payments")), label: renderTitle(t("menus.header.search.payments")),
options: data.search_payments.map((payment) => { options: data.search_payments.map((payment) => {
return { return {
key: payment.id,
value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`, value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
label: ( label: (
<Link to={`/manage/jobs/${payment.job.id}`}> <Link to={`/manage/jobs/${payment.job.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${payment.job.ro_number}`}</span> <span>{payment.job.ro_number}</span>
<span className="imex-flex-row__margin-large">{`${payment.job.memo}`}</span> <span>{payment.job.memo}</span>
<span className="imex-flex-row__margin-large">{`${payment.job.amount}`}</span> <span>{payment.job.amount}</span>
<span className="imex-flex-row__margin-large">{`${payment.job.transactionid}`}</span> <span>{payment.job.transactionid}</span>
</div> </Space>
</Link> </Link>
), ),
}; };
@@ -123,14 +123,15 @@ export default function GlobalSearch() {
label: renderTitle(t("menus.header.search.bills")), label: renderTitle(t("menus.header.search.bills")),
options: data.search_bills.map((bill) => { options: data.search_bills.map((bill) => {
return { return {
value: `${bill.invoice_number}`, key: bill.id,
value: `${bill.invoice_number} - ${bill.vendor.name}`,
label: ( label: (
<Link to={`/manage/bills?billid=${bill.id}`}> <Link to={`/manage/bills?billid=${bill.id}`}>
<div className="imex-flex-row"> <Space wrap split={<Divider type="vertical" />}>
<span className="imex-flex-row__margin-large">{`${bill.invoice_number}`}</span> <span>{bill.invoice_number}</span>
<span className="imex-flex-row__margin-large">{`${bill.vendor.name}`}</span> <span>{bill.vendor.name}</span>
<span className="imex-flex-row__margin-large">{`${bill.date}`}</span> <span>{bill.date}</span>
</div> </Space>
</Link> </Link>
), ),
}; };
@@ -144,11 +145,11 @@ export default function GlobalSearch() {
return ( return (
<AutoComplete <AutoComplete
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
style={{ flex: 2 }}
options={options} options={options}
onSearch={handleSearch} onSearch={handleSearch}
allowClear
> >
<Input.Search loading={loading} /> <Input.Search loading={loading} style={{ width: "20vw" }} />
</AutoComplete> </AutoComplete>
); );
} }

10
client/src/components/header/header.component.jsx
View File

@@ -298,11 +298,8 @@ function Header({
<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link> <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
</Menu.Item> </Menu.Item>
</Menu.SubMenu> </Menu.SubMenu>
<Menu.Item>
<GlobalSearch />
</Menu.Item>
<Menu.SubMenu <Menu.SubMenu
style={{ float: "right" }}
title={ title={
currentUser.displayName || currentUser.displayName ||
currentUser.email || currentUser.email ||
@@ -344,13 +341,16 @@ function Header({
</Menu.Item> </Menu.Item>
</Menu.SubMenu> </Menu.SubMenu>
</Menu.SubMenu> </Menu.SubMenu>
<Menu.SubMenu title={<ClockCircleFilled />}> <Menu.SubMenu style={{ float: "right" }} title={<ClockCircleFilled />}>
{recentItems.map((i, idx) => ( {recentItems.map((i, idx) => (
<Menu.Item key={idx}> <Menu.Item key={idx}>
<Link to={i.url}>{i.label}</Link> <Link to={i.url}>{i.label}</Link>
</Menu.Item> </Menu.Item>
))} ))}
</Menu.SubMenu> </Menu.SubMenu>
<Menu.Item style={{ float: "right" }}>
<GlobalSearch />
</Menu.Item>
</Menu> </Menu>
</Layout.Header> </Layout.Header>
); );

12
client/src/components/job-bills-total/job-bills-total.component.jsx
View File

@@ -32,7 +32,7 @@ export default function JobBillsTotalComponent({
if (p.return) { if (p.return) {
totalReturns = totalReturns.add( totalReturns = totalReturns.add(
Dinero({ Dinero({
amount: Math.round((pol.cost || 0) * 100), amount: Math.round((pol.act_price || 0) * 100),
}).multiply(pol.quantity) }).multiply(pol.quantity)
); );
} }
@@ -74,7 +74,7 @@ export default function JobBillsTotalComponent({
const discrepWithLbrAdj = discrepancy.add(lbrAdjustments); const discrepWithLbrAdj = discrepancy.add(lbrAdjustments);
const discrepWithCms = discrepWithLbrAdj.subtract(billCms); const discrepWithCms = discrepWithLbrAdj.subtract(billCms);
const creditsNotReceived = totalReturns.subtract(billCms); const creditsNotReceived = totalReturns.add(billCms); //billCms is tracked as a negative number.
return ( return (
<Card title={t("jobs.labels.jobtotals")}> <Card title={t("jobs.labels.jobtotals")}>
<Space wrap size="large"> <Space wrap size="large">
@@ -89,7 +89,7 @@ export default function JobBillsTotalComponent({
<Statistic <Statistic
title={t("bills.labels.discrepancy")} title={t("bills.labels.discrepancy")}
valueStyle={{ valueStyle={{
color: discrepancy.getAmount === 0 ? "green" : "red", color: discrepancy.getAmount() === 0 ? "green" : "red",
}} }}
value={discrepancy.toFormat()} value={discrepancy.toFormat()}
/> />
@@ -100,7 +100,7 @@ export default function JobBillsTotalComponent({
<Statistic <Statistic
title={t("bills.labels.discrepwithlbradj")} title={t("bills.labels.discrepwithlbradj")}
valueStyle={{ valueStyle={{
color: discrepWithLbrAdj.getAmount === 0 ? "green" : "red", color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red",
}} }}
value={discrepWithLbrAdj.toFormat()} value={discrepWithLbrAdj.toFormat()}
/> />
@@ -111,7 +111,7 @@ export default function JobBillsTotalComponent({
<Statistic <Statistic
title={t("bills.labels.discrepwithcms")} title={t("bills.labels.discrepwithcms")}
valueStyle={{ valueStyle={{
color: discrepWithCms.getAmount === 0 ? "green" : "red", color: discrepWithCms.getAmount() === 0 ? "green" : "red",
}} }}
value={discrepWithCms.toFormat()} value={discrepWithCms.toFormat()}
/> />
@@ -126,7 +126,7 @@ export default function JobBillsTotalComponent({
<Statistic <Statistic
title={t("bills.labels.creditsnotreceived")} title={t("bills.labels.creditsnotreceived")}
valueStyle={{ valueStyle={{
color: creditsNotReceived.getAmount === 0 ? "green" : "red", color: creditsNotReceived.getAmount() === 0 ? "green" : "red",
}} }}
value={creditsNotReceived.toFormat()} value={creditsNotReceived.toFormat()}
/> />

178
client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client"; import { useMutation } from "@apollo/client";
import { Button, Form, notification, Switch } from "antd"; import { Button, Card, Form, notification, Switch } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -112,94 +112,98 @@ export function JobChecklistForm({
}; };
return ( return (
<Form <Card
form={form} title={t("checklist.labels.checklist")}
onFinish={handleFinish} extra={
initialValues={{ !readOnly && (
...(type === "intake" && { <Button loading={loading} onClick={() => form.submit()}>
addToProduction: true, {t("general.actions.submit")}
scheduled_completion: job && job.scheduled_completion, </Button>
scheduled_delivery: job && job.scheduled_delivery, )
}), }
...(type === "deliver" && {
removeFromProduction: true,
actual_completion: job && job.actual_completion,
}),
...formItems
.filter((fi) => fi.value)
.reduce((acc, fi) => {
acc[fi.name] = fi.value;
return acc;
}, {}),
}}
> >
{t("checklist.labels.checklist")} <Form
form={form}
onFinish={handleFinish}
initialValues={{
...(type === "intake" && {
addToProduction: true,
scheduled_completion: job && job.scheduled_completion,
scheduled_delivery: job && job.scheduled_delivery,
}),
...(type === "deliver" && {
removeFromProduction: true,
actual_completion: job && job.actual_completion,
}),
...formItems
.filter((fi) => fi.value)
.reduce((acc, fi) => {
acc[fi.name] = fi.value;
return acc;
}, {}),
}}
>
<ConfigFormComponents componentList={formItems} readOnly={readOnly} />
<ConfigFormComponents componentList={formItems} readOnly={readOnly} /> {type === "intake" && (
<div>
{type === "intake" && ( <Form.Item
<div> name="addToProduction"
<Form.Item valuePropName="checked"
name="addToProduction" label={t("checklist.labels.addtoproduction")}
valuePropName="checked" disabled={readOnly}
label={t("checklist.labels.addtoproduction")} >
disabled={readOnly} <Switch disabled={readOnly} />
> </Form.Item>
<Switch /> <Form.Item
</Form.Item> name="scheduled_completion"
<Form.Item label={t("jobs.fields.scheduled_completion")}
name="scheduled_completion" disabled={readOnly}
label={t("jobs.fields.scheduled_completion")} rules={[
disabled={readOnly} {
rules={[ required: true,
{ message: t("general.validation.required"),
required: true, },
message: t("general.validation.required"), ]}
}, >
]} <DateTimePicker />
> </Form.Item>
<DateTimePicker /> <Form.Item
</Form.Item> name="scheduled_delivery"
<Form.Item label={t("jobs.fields.scheduled_delivery")}
name="scheduled_delivery" disabled={readOnly}
label={t("jobs.fields.scheduled_delivery")} >
disabled={readOnly} <DateTimePicker />
> </Form.Item>
<DateTimePicker /> </div>
</Form.Item> )}
</div> {type === "deliver" && (
)} <div>
{type === "deliver" && ( <Form.Item
<div> name="actual_completion"
<Form.Item label={t("jobs.fields.actual_completion")}
name="actual_completion" disabled={readOnly}
label={t("jobs.fields.actual_completion")} rules={[
disabled={readOnly} {
rules={[ required: true,
{ message: t("general.validation.required"),
required: true, },
message: t("general.validation.required"), ]}
}, >
]} <DateTimePicker />
> </Form.Item>
<DateTimePicker /> <Form.Item
</Form.Item> name="removeFromProduction"
<Form.Item valuePropName="checked"
name="removeFromProduction" label={t("checklist.labels.removefromproduction")}
valuePropName="checked" disabled={readOnly}
label={t("checklist.labels.removefromproduction")} >
disabled={readOnly} <Switch disabled={readOnly} defaultChecked={true} />
> </Form.Item>
<Switch defaultChecked={true} /> </div>
</Form.Item> )}
</div> </Form>
)} </Card>
{!readOnly && (
<Button loading={loading} htmlType="submit">
{t("general.actions.submit")}
</Button>
)}
</Form>
); );
} }

16
client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx
View File

@@ -1,5 +1,5 @@
import { PrinterFilled } from "@ant-design/icons"; import { PrinterFilled } from "@ant-design/icons";
import { Button, List } from "antd"; import { Button, Card, List } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
@@ -44,10 +44,14 @@ export default function JobIntakeTemplateList({ templates }) {
}; };
return ( return (
<div> <Card
<Button onClick={renderAllTemplates} loading={loading}> title={t("jobs.labels.checklistdocuments")}
{t("checklist.actions.printall")} extra={
</Button> <Button onClick={renderAllTemplates} loading={loading}>
{t("checklist.actions.printall")}
</Button>
}
>
<List <List
itemLayout="horizontal" itemLayout="horizontal"
dataSource={templates} dataSource={templates}
@@ -72,6 +76,6 @@ export default function JobIntakeTemplateList({ templates }) {
</List.Item> </List.Item>
)} )}
/> />
</div> </Card>
); );
} }

6
client/src/components/job-checklist/job-checklist.component.jsx
View File

@@ -6,11 +6,11 @@ export default function JobIntakeComponent({ checklistConfig, type, job }) {
const { form, templates } = checklistConfig; const { form, templates } = checklistConfig;
return ( return (
<Row gutter={[48, 48]}> <Row gutter={[16, 16]}>
<Col span={6}> <Col sm={24} md={8}>
<JobChecklistTemplateList templates={templates} type={type} /> <JobChecklistTemplateList templates={templates} type={type} />
</Col> </Col>
<Col span={18}> <Col sm={24} md={16}>
<JobChecklistForm formItems={form} type={type} job={job} /> <JobChecklistForm formItems={form} type={type} job={job} />
</Col> </Col>
</Row> </Row>

4
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -68,8 +68,8 @@ export function JobDetailCards({ setPrintCenterContext }) {
<Drawer <Drawer
visible={!!selected} visible={!!selected}
destroyOnClose destroyOnClose
height={drawerPercentage} width={drawerPercentage}
placement="top" placement="right"
onClose={handleDrawerClose} onClose={handleDrawerClose}
> >
{loading ? <LoadingSpinner /> : null} {loading ? <LoadingSpinner /> : null}

67
client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
View File

@@ -1,5 +1,5 @@
import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons"; import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
import { Button, Popover, Select, Spin } from "antd"; import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -40,35 +40,42 @@ export function JobEmployeeAssignments({
}; };
const popContent = ( const popContent = (
<div> <Row gutter={[16, 16]}>
<Select <Col span={24}>
id="employeeSelector" <Select
showSearch id="employeeSelector"
style={{ width: 200 }} showSearch
optionFilterProp="children" style={{ width: 200 }}
onChange={onChange} optionFilterProp="children"
filterOption={(input, option) => onChange={onChange}
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 filterOption={(input, option) =>
} option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
> 0
{bodyshop.employees.map((emp) => ( }
<Select.Option value={emp.id} key={emp.id}> >
{`${emp.first_name} ${emp.last_name}`} {bodyshop.employees.map((emp) => (
</Select.Option> <Select.Option value={emp.id} key={emp.id}>
))} {`${emp.first_name} ${emp.last_name}`}
</Select> </Select.Option>
<Button ))}
type="primary" </Select>
disabled={!assignment.employeeid || jobRO} </Col>
onClick={() => { <Col span={24}>
handleAdd(assignment); <Space wrap>
setVisibility(false); <Button
}} type="primary"
> disabled={!assignment.employeeid || jobRO}
Assign onClick={() => {
</Button> handleAdd(assignment);
<Button onClick={() => setVisibility(false)}>Close</Button> setVisibility(false);
</div> }}
>
Assign
</Button>
<Button onClick={() => setVisibility(false)}>Close</Button>
</Space>
</Col>
</Row>
); );
return ( return (

6
client/src/components/job-totals-table/job-totals-table.component.jsx
View File

@@ -46,13 +46,13 @@ export function JobsTotalsTableComponent({ jobRO, job }) {
</Card> </Card>
</Col> </Col>
<Col {...colSpan}> <Col {...colSpan}>
<Row gutter={[0, 32]}> <Row gutter={[16, 16]}>
<Col span={24}> <Col sm={24} md={12}>
<Card title={t("jobs.labels.partstotal")}> <Card title={t("jobs.labels.partstotal")}>
<JobTotalsTableParts job={job} /> <JobTotalsTableParts job={job} />
</Card> </Card>
</Col> </Col>
<Col span={24}> <Col sm={24} md={12}>
<Card title={t("jobs.labels.othertotal")}> <Card title={t("jobs.labels.othertotal")}>
<JobTotalsTableOther job={job} /> <JobTotalsTableOther job={job} />
</Card> </Card>

57
client/src/components/job-totals-table/job-totals.table.other.component.jsx
View File

@@ -13,13 +13,29 @@ export default function JobTotalsTableOther({ job }) {
const data = useMemo(() => { const data = useMemo(() => {
return [ return [
...((job.job_totals.additional.additionalCostItems &&
job.job_totals.additional.additionalCostItems.map((i) => {
return {
key: i.key,
total: i.total,
};
})) ||
[]),
{ {
key: t("jobs.labels.subletstotal"), key: t("jobs.fields.adjustment_bottom_line"),
total: job.job_totals.parts.sublets.total, total: job.job_totals.additional.adjustments,
}, },
{ {
key: t("jobs.labels.additionaltotal"), key: t("jobs.fields.towing_payable"),
total: job.job_totals.additional, total: job.job_totals.additional.towing,
},
{
key: t("jobs.fields.storage_payable"),
total: job.job_totals.additional.storage,
},
{
key: t("jobs.fields.ca_bc_pvrt"),
total: job.job_totals.additional.pvrt,
}, },
]; ];
}, [job.job_totals, t]); }, [job.job_totals, t]);
@@ -60,17 +76,30 @@ export default function JobTotalsTableOther({ job }) {
x: true, x: true,
}} }}
summary={() => ( summary={() => (
<Table.Summary.Row> <>
<Table.Summary.Cell> <Table.Summary.Row>
{t("jobs.labels.additionaltotal")} <Table.Summary.Cell>
</Table.Summary.Cell> {t("jobs.labels.additionaltotal")}
</Table.Summary.Cell>
<Table.Summary.Cell> <Table.Summary.Cell>
<strong> <strong>
{Dinero(job.job_totals.parts.parts.total).toFormat()} {Dinero(job.job_totals.additional.total).toFormat()}
</strong> </strong>
</Table.Summary.Cell> </Table.Summary.Cell>
</Table.Summary.Row> </Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell>
{t("jobs.labels.subletstotal")}
</Table.Summary.Cell>
<Table.Summary.Cell>
<strong>
{Dinero(job.job_totals.parts.sublets.total).toFormat()}
</strong>
</Table.Summary.Cell>
</Table.Summary.Row>
</>
)} )}
/> />
); );

24
client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
View File

@@ -1,5 +1,13 @@
import { useMutation } from "@apollo/client"; import { useMutation } from "@apollo/client";
import { Button, Form, notification, Popover, Select, Switch } from "antd"; import {
Button,
Form,
notification,
Popover,
Select,
Space,
Switch,
} from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -100,12 +108,14 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
> >
<Switch /> <Switch />
</Form.Item> </Form.Item>
<Button type="danger" htmlType="submit"> <Space wrap>
{t("jobs.actions.convert")} <Button type="danger" htmlType="submit">
</Button> {t("jobs.actions.convert")}
<Button onClick={() => setVisible(false)}> </Button>
{t("general.actions.close")} <Button onClick={() => setVisible(false)}>
</Button> {t("general.actions.close")}
</Button>
</Space>
</Form> </Form>
</div> </div>
); );

2
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -109,7 +109,7 @@ export function JobsDetailHeader({ job, bodyshop }) {
</Link> </Link>
</Col> </Col>
<Col {...colSpan}> <Col {...colSpan}>
<Link to={`/manage/vehicles/${job.vehicle.id}`}> <Link to={job.vehicle && `/manage/vehicles/${job.vehicle.id}`}>
<Card <Card
className="ant-card-grid-hoverable" className="ant-card-grid-hoverable"
style={{ height: "100%" }} style={{ height: "100%" }}

51
client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx
View File

@@ -52,6 +52,33 @@ export function JobsDetailRates({ jobRO, form }) {
> >
<CurrencyInput disabled={jobRO} /> <CurrencyInput disabled={jobRO} />
</Form.Item> </Form.Item>
<Space align="end">
<Form.Item label={t("jobs.fields.ca_bc_pvrt")} name="ca_bc_pvrt">
<CurrencyInput disabled={jobRO} />
</Form.Item>
<CABCpvrtCalculator form={form} disabled={jobRO} />
</Space>
</FormRow>
<FormRow>
<Form.Item
label={t("jobs.fields.federal_tax_rate")}
name="federal_tax_rate"
>
<InputNumber min={0} max={1} precision={2} disabled={jobRO} />
</Form.Item>
<Form.Item
label={t("jobs.fields.state_tax_rate")}
name="state_tax_rate"
>
<InputNumber min={0} max={1} precision={2} disabled={jobRO} />
</Form.Item>
<Form.Item
label={t("jobs.fields.local_tax_rate")}
name="local_tax_rate"
>
<InputNumber min={0} max={1} precision={2} disabled={jobRO} />
</Form.Item>
<Form.Item <Form.Item
label={t("jobs.fields.ca_gst_registrant")} label={t("jobs.fields.ca_gst_registrant")}
name="ca_gst_registrant" name="ca_gst_registrant"
@@ -59,12 +86,6 @@ export function JobsDetailRates({ jobRO, form }) {
> >
<Switch disabled={jobRO} /> <Switch disabled={jobRO} />
</Form.Item> </Form.Item>
<Space align="end">
<Form.Item label={t("jobs.fields.ca_bc_pvrt")} name="ca_bc_pvrt">
<CurrencyInput disabled={jobRO} />
</Form.Item>
<CABCpvrtCalculator form={form} disabled={jobRO} />
</Space>
</FormRow> </FormRow>
<JobsDetailRatesChangeButton form={form} disabled={jobRO} /> <JobsDetailRatesChangeButton form={form} disabled={jobRO} />
<FormRow header={t("jobs.forms.laborrates")}> <FormRow header={t("jobs.forms.laborrates")}>
@@ -134,24 +155,6 @@ export function JobsDetailRates({ jobRO, form }) {
<Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd"> <Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
<CurrencyInput disabled={jobRO} /> <CurrencyInput disabled={jobRO} />
</Form.Item> </Form.Item>
<Form.Item
label={t("jobs.fields.federal_tax_rate")}
name="federal_tax_rate"
>
<InputNumber min={0} max={1} precision={2} disabled={jobRO} />
</Form.Item>
<Form.Item
label={t("jobs.fields.state_tax_rate")}
name="state_tax_rate"
>
<InputNumber min={0} max={1} precision={2} disabled={jobRO} />
</Form.Item>
<Form.Item
label={t("jobs.fields.local_tax_rate")}
name="local_tax_rate"
>
<InputNumber min={0} max={1} precision={2} disabled={jobRO} />
</Form.Item>
</FormRow> </FormRow>
<JobsDetailRatesParts form={form} /> <JobsDetailRatesParts form={form} />

4
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -117,7 +117,9 @@ function JobsDocumentsComponent({
galleryImages={galleryImages} galleryImages={galleryImages}
deletionCallback={billsCallback || refetch} deletionCallback={billsCallback || refetch}
/> />
<JobsDocumentsGalleryReassign galleryImages={galleryImages} /> {!billId && (
<JobsDocumentsGalleryReassign galleryImages={galleryImages} />
)}
</Space> </Space>
</Col> </Col>
<Col span={24}> <Col span={24}>

6
client/src/components/jobs-notes/jobs.notes.component.jsx
View File

@@ -5,7 +5,7 @@ import {
EyeInvisibleFilled, EyeInvisibleFilled,
WarningFilled, WarningFilled,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Button, Card, Table } from "antd"; import { Button, Card, Space, Table } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -82,7 +82,7 @@ export function JobNotesComponent({
key: "actions", key: "actions",
width: 150, width: 150,
render: (text, record) => ( render: (text, record) => (
<span> <Space wrap>
<Button <Button
loading={deleteLoading} loading={deleteLoading}
disabled={record.audit || jobRO} disabled={record.audit || jobRO}
@@ -104,7 +104,7 @@ export function JobNotesComponent({
> >
<EditFilled /> <EditFilled />
</Button> </Button>
</span> </Space>
), ),
}, },
]; ];

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

@@ -1,5 +1,5 @@
import { Col, Divider, Row, Typography } from "antd";
import React from "react"; import React from "react";
import { Row, Col, Typography } from "antd";
import "./layout-form-row.styles.scss"; import "./layout-form-row.styles.scss";
export default function LayoutFormRow({ export default function LayoutFormRow({
@@ -41,10 +41,12 @@ export default function LayoutFormRow({
}, },
}; };
}; };
//{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
return ( return (
<div className="imex-form-row" {...restProps}> <div className="imex-form-row" {...restProps}>
{header ? <Typography.Title level={4}>{header}</Typography.Title> : null} <Divider orientation="left" type="horizontal">
{header}
</Divider>
<Row {...rowGutter}> <Row {...rowGutter}>
{children.map( {children.map(
(c, idx) => (c, idx) =>

74
client/src/components/note-upsert-modal/note-upsert-modal.component.jsx
View File

@@ -1,4 +1,4 @@
import { Form, Input, Switch } from "antd"; import { Col, Form, Input, Row, Switch } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import NotesPresetButton from "../notes-preset-button/notes-preset-button.component"; import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";
@@ -7,37 +7,45 @@ export default function NoteUpsertModalComponent({ form }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <Row gutter={[16, 16]}>
<Form.Item <Col span={8}>
label={t("notes.fields.critical")} <Form.Item
name="critical" label={t("notes.fields.critical")}
valuePropName="checked" name="critical"
> valuePropName="checked"
<Switch /> >
</Form.Item> <Switch />
<Form.Item </Form.Item>
label={t("notes.fields.private")} </Col>
name="private" <Col span={8}>
valuePropName="checked" <Form.Item
> label={t("notes.fields.private")}
<Switch /> name="private"
</Form.Item> valuePropName="checked"
<Form.Item >
label={t("notes.fields.text")} <Switch />
name="text" </Form.Item>
rules={[ </Col>
{ <Col span={8}>
required: true, <NotesPresetButton form={form} />
message: t("general.validation.required"), </Col>
}, <Col span={24}>
]} <Form.Item
> label={t("notes.fields.text")}
<Input.TextArea name="text"
rows={8} rules={[
placeholder={t("notes.labels.newnoteplaceholder")} {
/> required: true,
</Form.Item> message: t("general.validation.required"),
<NotesPresetButton form={form} /> },
</div> ]}
>
<Input.TextArea
rows={8}
placeholder={t("notes.labels.newnoteplaceholder")}
/>
</Form.Item>
</Col>
</Row>
); );
} }

7
client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
View File

@@ -90,7 +90,12 @@ export function NoteUpsertModalContainer({
}} }}
destroyOnClose destroyOnClose
> >
<Form form={form} onFinish={handleFinish} initialValues={existingNote}> <Form
form={form}
onFinish={handleFinish}
initialValues={existingNote}
layout="vertical"
>
<NoteUpsertModalComponent form={form} /> <NoteUpsertModalComponent form={form} />
</Form> </Form>
</Modal> </Modal>

5
client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
View File

@@ -1,3 +1,4 @@
import { Card } from "antd";
import moment from "moment"; import moment from "moment";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
@@ -68,7 +69,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
}, []); }, []);
return ( return (
<div> <Card>
<ResponsiveContainer width="100%" height={475}> <ResponsiveContainer width="100%" height={475}>
<ComposedChart <ComposedChart
data={data} data={data}
@@ -108,6 +109,6 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {
/> />
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </Card>
); );
} }

28
client/src/components/scoreboard-day-stats/scoreboard-day-stats.component.jsx
View File

@@ -26,18 +26,22 @@ export function ScoreboardDayStats({ bodyshop, date, entries }) {
}, 0); }, 0);
return ( return (
<div className='imex-flex-row__margin'> <Card
<Card title={moment(date).format("D - ddd")}> title={moment(date).format("D - ddd")}
<Statistic className="ant-card-grid-hoverable"
valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }} style={{ height: "100%" }}
value={bodyHrs.toFixed(1)} >
/> <Statistic
<Statistic valueStyle={{ color: dailyBodyTarget > bodyHrs ? "red" : "green" }}
valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }} label="B"
value={paintHrs.toFixed(1)} value={bodyHrs.toFixed(1)}
/> />
</Card> <Statistic
</div> valueStyle={{ color: dailyPaintTarget > paintHrs ? "red" : "green" }}
label="P"
value={paintHrs.toFixed(1)}
/>
</Card>
); );
} }
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDayStats); export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardDayStats);

21
client/src/components/scoreboard-display/scoreboard-display.component.jsx
View File

@@ -1,6 +1,6 @@
import { Col, Row } from "antd";
import React from "react"; import React from "react";
import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component"; import ScoreboardChart from "../scoreboard-chart/scoreboard-chart.component";
import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component"; import ScoreboardLastDays from "../scoreboard-last-days/scoreboard-last-days.component";
import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component"; import ScoreboardTargetsTable from "../scoreboard-targets-table/scoreboard-targets-table.component";
@@ -20,11 +20,18 @@ export default function ScoreboardDisplayComponent({ scoreboardSubscription }) {
}); });
return ( return (
<div> <Row gutter={[16, 16]}>
<ScoreboardTargetsTable /> <Col span={24}>
<ScoreboardJobsList scoreBoardlist={scoreBoardlist} /> <ScoreboardTargetsTable scoreBoardlist={scoreBoardlist} />
<ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} /> </Col>
<ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
</div> <Col span={24}>
<ScoreboardLastDays sbEntriesByDate={sbEntriesByDate} />
</Col>
<Col span={24}>
<ScoreboardChart sbEntriesByDate={sbEntriesByDate} />
</Col>
</Row>
); );
} }

17
client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx
View File

@@ -1,11 +1,13 @@
import { CalendarOutlined } from "@ant-design/icons"; import { CalendarOutlined } from "@ant-design/icons";
import { Col, Row, Statistic } from "antd"; import { Card, Col, Row, Statistic } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import ScoreboardJobsList from "../scoreboard-jobs-list/scoreboard-jobs-list.component";
import * as Util from "./scoreboard-targets-table.util"; import * as Util from "./scoreboard-targets-table.util";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
@@ -16,11 +18,14 @@ const mapDispatchToProps = (dispatch) => ({
const rowGutter = [16, 16]; const rowGutter = [16, 16];
const statSpans = { xs: 24, sm: 6 }; const statSpans = { xs: 24, sm: 6 };
export function ScoreboardTargetsTable({ bodyshop }) { export function ScoreboardTargetsTable({ bodyshop, scoreBoardlist }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <Card
title={t("scoreboard.labels.targets")}
extra={<ScoreboardJobsList scoreBoardlist={scoreBoardlist} />}
>
<Row gutter={rowGutter}> <Row gutter={rowGutter}>
<Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}> <Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
<Statistic <Statistic
@@ -35,7 +40,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
<Statistic <Statistic
title={t("scoreboard.labels.dailytarget")} title={t("scoreboard.labels.dailytarget")}
value={bodyshop.scoreboard_target.dailyBodyTarget} value={bodyshop.scoreboard_target.dailyBodyTarget}
prefix='B' prefix="B"
/> />
</Col> </Col>
<Col {...statSpans}> <Col {...statSpans}>
@@ -70,7 +75,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
<Col {...statSpans}> <Col {...statSpans}>
<Statistic <Statistic
value={bodyshop.scoreboard_target.dailyPaintTarget} value={bodyshop.scoreboard_target.dailyPaintTarget}
prefix='P' prefix="P"
/> />
</Col> </Col>
<Col {...statSpans}> <Col {...statSpans}>
@@ -100,7 +105,7 @@ export function ScoreboardTargetsTable({ bodyshop }) {
</Row> </Row>
</Col> </Col>
</Row> </Row>
</div> </Card>
); );
} }
export default connect( export default connect(

59
client/src/components/vendors-form/vendors-form.component.jsx
View File

@@ -1,13 +1,14 @@
import { DeleteFilled } from "@ant-design/icons"; import { DeleteFilled } from "@ant-design/icons";
import { import {
Button, Button,
Divider,
Form, Form,
Input, Input,
InputNumber, InputNumber,
PageHeader,
Select, Select,
Space, Space,
Switch, Switch,
Typography,
} from "antd"; } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -27,18 +28,31 @@ export default function VendorsFormComponent({
const { getFieldValue } = form; const { getFieldValue } = form;
return ( return (
<div> <div>
<Space> <PageHeader
<Button title={form.getFieldValue("name")}
onClick={() => form.submit()} extra={
type="primary" <Space>
loading={formLoading} <Form.Item
> label={t("vendors.fields.active")}
{t("general.actions.save")} name="active"
</Button> initialValue={true}
<Button type="danger" onClick={handleDelete} loading={formLoading}> valuePropName="checked"
{t("general.actions.delete")} >
</Button> <Switch />
</Space> </Form.Item>
<Button
onClick={() => form.submit()}
type="primary"
loading={formLoading}
>
{t("general.actions.save")}
</Button>
<Button type="danger" onClick={handleDelete} loading={formLoading}>
{t("general.actions.delete")}
</Button>
</Space>
}
/>
<FormFieldsChanged form={form} /> <FormFieldsChanged form={form} />
<LayoutFormRow grow> <LayoutFormRow grow>
<Form.Item <Form.Item
@@ -50,14 +64,7 @@ export default function VendorsFormComponent({
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item
label={t("vendors.fields.active")}
name="active"
initialValue={true}
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item <Form.Item
label={t("vendors.fields.email")} label={t("vendors.fields.email")}
rules={[ rules={[
@@ -104,7 +111,7 @@ export default function VendorsFormComponent({
<Input /> <Input />
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<LayoutFormRow> <LayoutFormRow grow>
<Form.Item label={t("vendors.fields.discount")} name="discount"> <Form.Item label={t("vendors.fields.discount")} name="discount">
<InputNumber min={0} max={1} precision={2} /> <InputNumber min={0} max={1} precision={2} />
</Form.Item> </Form.Item>
@@ -125,16 +132,14 @@ export default function VendorsFormComponent({
</Select> </Select>
</Form.Item> </Form.Item>
</LayoutFormRow> </LayoutFormRow>
<Typography.Title level={4}> <Divider align="left">{t("vendors.labels.preferredmakes")}</Divider>
{t("vendors.labels.preferredmakes")}
</Typography.Title>
<Form.List name="favorite"> <Form.List name="favorite">
{(fields, { add, remove }) => { {(fields, { add, remove }) => {
return ( return (
<div> <div>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item key={field.key}> <Form.Item key={field.key}>
<div style={{ display: "flex" }}> <Space wrap>
<Form.Item <Form.Item
label={t("vendors.fields.make")} label={t("vendors.fields.make")}
key={`${index}make`} key={`${index}make`}
@@ -154,7 +159,7 @@ export default function VendorsFormComponent({
remove(field.name); remove(field.name);
}} }}
/> />
</div> </Space>
</Form.Item> </Form.Item>
))} ))}
<Form.Item> <Form.Item>

1
client/src/components/vendors-form/vendors-form.container.jsx
View File

@@ -119,6 +119,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
if (loading) return <LoadingSpinner />; if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<Form <Form
onFinish={handleFinish} onFinish={handleFinish}

83
client/src/components/vendors-list/vendors-list.component.jsx
View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Input, Table } from "antd"; import { Button, Card, Input, Space, Table } from "antd";
import queryString from "query-string"; import queryString from "query-string";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -75,47 +75,44 @@ export default function VendorsListComponent({
: []; : [];
return ( return (
<Table <Card
loading={loading} extra={
title={() => { <Space wrap>
return ( <Button onClick={handleNewVendor}>{t("vendors.actions.new")}</Button>
<div className="imex-table-header"> <Button onClick={() => refetch()}>
<Button onClick={handleNewVendor}> <SyncOutlined />
{t("vendors.actions.new")} </Button>
</Button> <Input.Search
placeholder={t("general.labels.search")}
<Button onClick={() => refetch()}> onChange={(e) => {
<SyncOutlined /> setSearchText(e.target.value);
</Button> }}
<Input.Search value={searchText}
className="imex-table-header__search" enterButton
placeholder={t("general.labels.search")} />
onChange={(e) => { </Space>
setSearchText(e.target.value); }
}} >
value={searchText} <Table
enterButton loading={loading}
/> pagination={{ position: "top" }}
</div> columns={columns}
); rowKey="id"
}} onChange={handleTableChange}
pagination={{ position: "top" }} dataSource={filteredVendors}
columns={columns} rowSelection={{
rowKey="id" onSelect: handleOnRowClick,
onChange={handleTableChange} type: "radio",
dataSource={filteredVendors} selectedRowKeys: [selectedvendor],
rowSelection={{ }}
onSelect: handleOnRowClick, onRow={(record, rowIndex) => {
type: "radio", return {
selectedRowKeys: [selectedvendor], onClick: (event) => {
}} handleOnRowClick(record);
onRow={(record, rowIndex) => { },
return { };
onClick: (event) => { }}
handleOnRowClick(record); />
}, </Card>
};
}}
/>
); );
} }

6
client/src/components/vendors-list/vendors-list.container.jsx
View File

@@ -1,10 +1,10 @@
import React from "react";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import queryString from "query-string";
import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component"; import AlertComponent from "../../components/alert/alert.component";
import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries"; import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
import VendorsListComponent from "./vendors-list.component"; import VendorsListComponent from "./vendors-list.component";
import queryString from "query-string";
import { useHistory, useLocation } from "react-router-dom";
export default function VendorsListContainer() { export default function VendorsListContainer() {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS); const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS);

1
client/src/graphql/search.queries.js
View File

@@ -22,6 +22,7 @@ export const GLOBAL_SEARCH_QUERY = gql`
ownr_fn ownr_fn
ownr_ln ownr_ln
ownr_co_nm ownr_co_nm
ownr_ph1
} }
search_vehicles(args: { search: $search }) { search_vehicles(args: { search: $search }) {
id id

10
client/src/pages/scoreboard/scoreboard.page.component.jsx
View File

@@ -1,10 +0,0 @@
import React from "react";
import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
export default function ProductionBoardComponent({ scoreboardSubscription }) {
return (
<div>
<ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
</div>
);
}

6
client/src/pages/scoreboard/scoreboard.page.container.jsx
View File

@@ -7,7 +7,7 @@ import {
setSelectedHeader, setSelectedHeader,
} from "../../redux/application/application.actions"; } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import ScoreboardPageComponent from "./scoreboard.page.component"; import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
import { useSubscription } from "@apollo/client"; import { useSubscription } from "@apollo/client";
import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries"; import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
import moment from "moment"; import moment from "moment";
@@ -45,9 +45,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
return ( return (
<RbacWrapper action="scoreboard:view"> <RbacWrapper action="scoreboard:view">
<ScoreboardPageComponent <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
scoreboardSubscription={scoreboardSubscription}
/>
</RbacWrapper> </RbacWrapper>
); );
} }

53
client/src/pages/shop-vendor/shop-vendor.page.component.jsx generated
View File

@@ -1,28 +1,45 @@
import { Col, Row } from "antd"; import { Drawer, Grid } from "antd";
import queryString from "query-string";
import React from "react"; import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import VendorsFormContainer from "../../components/vendors-form/vendors-form.container"; import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
import VendorsListContainer from "../../components/vendors-list/vendors-list.container"; import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
const listSpan = {
md: { span: 24 },
lg: { span: 8 },
};
const formSapn = {
md: { span: 24 },
lg: { span: 16 },
};
export default function ShopVendorPageComponent() { export default function ShopVendorPageComponent() {
const search = queryString.parse(useLocation().search);
const { selectedvendor } = search;
const history = useHistory();
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const bpoints = {
xs: "100%",
sm: "100%",
md: "100%",
lg: "50%",
xl: "50%",
xxl: "45%",
};
const drawerPercentage = selectedBreakpoint
? bpoints[selectedBreakpoint[0]]
: "100%";
return ( return (
<div> <div>
<Row gutter={[16, 16]}> <VendorsListContainer />
<Col {...listSpan}>
<VendorsListContainer /> <Drawer
</Col> width={drawerPercentage}
<Col {...formSapn}> onClose={() => {
<VendorsFormContainer /> delete search.selectedvendor;
</Col> history.push({ search: queryString.stringify(search) });
</Row> }}
visible={selectedvendor}
>
<VendorsFormContainer />
</Drawer>
</div> </div>
); );
} }

15
client/src/pages/temporary-docs/temporary-docs.component.jsx
View File

@@ -12,14 +12,11 @@ export default function TemporaryDocsComponent() {
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
return ( return (
<div> <JobsDocumentsComponent
<div>Buttons to move and assign things.</div> data={data ? data.documents : []}
<JobsDocumentsComponent jobId={null}
data={data ? data.documents : []} billId={null}
jobId={null} refetch={refetch}
billId={null} />
refetch={refetch}
/>
</div>
); );
} }

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

@@ -1059,6 +1059,7 @@
"ownr_ph1": "Phone 1", "ownr_ph1": "Phone 1",
"paa": "Aftermarket", "paa": "Aftermarket",
"pae": "Existing", "pae": "Existing",
"pag": "Glass",
"pal": "LKQ", "pal": "LKQ",
"pam": "Remanufactured", "pam": "Remanufactured",
"pan": "OEM/New", "pan": "OEM/New",
@@ -1174,6 +1175,7 @@
}, },
"changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?", "changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?",
"checklistcompletedby": "Checklist completed by {{by}} at {{at}}", "checklistcompletedby": "Checklist completed by {{by}} at {{at}}",
"checklistdocuments": "Checklist Documents",
"checklists": "Checklists", "checklists": "Checklists",
"closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.", "closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.",
"cost": "Cost", "cost": "Cost",
@@ -1722,6 +1724,7 @@
"asoftodaytarget": "As of Today", "asoftodaytarget": "As of Today",
"dailytarget": "Daily", "dailytarget": "Daily",
"monthlytarget": "Monthly", "monthlytarget": "Monthly",
"targets": "Targets",
"weeklytarget": "Weekly", "weeklytarget": "Weekly",
"workingdays": "Working Days / Month" "workingdays": "Working Days / Month"
}, },

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

@@ -1059,6 +1059,7 @@
"ownr_ph1": "Teléfono 1", "ownr_ph1": "Teléfono 1",
"paa": "", "paa": "",
"pae": "", "pae": "",
"pag": "",
"pal": "", "pal": "",
"pam": "", "pam": "",
"pan": "", "pan": "",
@@ -1174,6 +1175,7 @@
}, },
"changeclass": "", "changeclass": "",
"checklistcompletedby": "", "checklistcompletedby": "",
"checklistdocuments": "",
"checklists": "", "checklists": "",
"closeconfirm": "", "closeconfirm": "",
"cost": "", "cost": "",
@@ -1722,6 +1724,7 @@
"asoftodaytarget": "", "asoftodaytarget": "",
"dailytarget": "", "dailytarget": "",
"monthlytarget": "", "monthlytarget": "",
"targets": "",
"weeklytarget": "", "weeklytarget": "",
"workingdays": "" "workingdays": ""
}, },

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

@@ -1059,6 +1059,7 @@
"ownr_ph1": "Téléphone 1", "ownr_ph1": "Téléphone 1",
"paa": "", "paa": "",
"pae": "", "pae": "",
"pag": "",
"pal": "", "pal": "",
"pam": "", "pam": "",
"pan": "", "pan": "",
@@ -1174,6 +1175,7 @@
}, },
"changeclass": "", "changeclass": "",
"checklistcompletedby": "", "checklistcompletedby": "",
"checklistdocuments": "",
"checklists": "", "checklists": "",
"closeconfirm": "", "closeconfirm": "",
"cost": "", "cost": "",
@@ -1722,6 +1724,7 @@
"asoftodaytarget": "", "asoftodaytarget": "",
"dailytarget": "", "dailytarget": "",
"monthlytarget": "", "monthlytarget": "",
"targets": "",
"weeklytarget": "", "weeklytarget": "",
"workingdays": "" "workingdays": ""
}, },

2
server/accounting/qbxml/qbxml-receivables.js
View File

@@ -199,7 +199,7 @@ const generateInvoiceQbxml = (
(i) => jobline.profitcenter_part.toLowerCase() === i.name.toLowerCase() (i) => jobline.profitcenter_part.toLowerCase() === i.name.toLowerCase()
); );
if (!!!account) { if (!account) {
throw new Error( throw new Error(
`A matching account does not exist for the allocation. Center: ${center}` `A matching account does not exist for the allocation. Center: ${center}`
); );

69
server/job/job-totals.js
View File

@@ -279,31 +279,41 @@ function IsAdditionalCost(jobLine) {
} }
function CalculateAdditional(job) { function CalculateAdditional(job) {
let ret = job.joblines let ret = {
additionalCosts: null,
additionalCostItems: [],
adjustments: null,
towing: null,
storage: null,
pvrt: null,
total: null,
};
ret.additionalCosts = job.joblines
.filter((jl) => !jl.removed && IsAdditionalCost(jl)) .filter((jl) => !jl.removed && IsAdditionalCost(jl))
.reduce((acc, val) => { .reduce((acc, val) => {
return acc.add( const lineValue = Dinero({
Dinero({ amount: Math.round((val.act_price || 0) * 100) }).multiply( amount: Math.round((val.act_price || 0) * 100),
val.part_qty || 1 }).multiply(val.part_qty || 1);
) ret.additionalCostItems.push({ key: val.line_desc, total: lineValue });
); return acc.add(lineValue);
}, Dinero()); }, Dinero());
ret = ret ret.adjustments = Dinero({
.add( amount: Math.round((job.adjustment_bottom_line || 0) * 100),
Dinero({ });
amount: Math.round((job.towing_payable || 0) * 100), ret.towing = Dinero({
}) amount: Math.round((job.towing_payable || 0) * 100),
) });
.add( ret.storage = Dinero({
Dinero({ amount: Math.round((job.storage_payable || 0) * 100),
amount: Math.round((job.storage_payable || 0) * 100), });
}) ret.pvrt = Dinero({
) amount: Math.round((job.ca_bc_pvrt || 0) * 100),
.add( });
Dinero({ ret.total = ret.additionalCosts
amount: Math.round((job.ca_bc_pvrt || 0) * 100), .add(ret.adjustments) //IO-813 Adjustment takes care of GST & PST at labor rate.
}) .add(ret.towing)
); .add(ret.storage)
.add(ret.pvrt);
return ret; return ret;
} }
@@ -312,7 +322,7 @@ function CalculateTaxesTotals(job, otherTotals) {
const subtotal = otherTotals.parts.parts.subtotal const subtotal = otherTotals.parts.parts.subtotal
.add(otherTotals.parts.sublets.subtotal) .add(otherTotals.parts.sublets.subtotal)
.add(otherTotals.rates.subtotal) //No longer using just rates subtotal to include mapa/mash. .add(otherTotals.rates.subtotal) //No longer using just rates subtotal to include mapa/mash.
.add(otherTotals.additional); .add(otherTotals.additional.total);
// .add(Dinero({ amount: (job.towing_payable || 0) * 100 })) // .add(Dinero({ amount: (job.towing_payable || 0) * 100 }))
// .add(Dinero({ amount: (job.storage_payable || 0) * 100 })); // .add(Dinero({ amount: (job.storage_payable || 0) * 100 }));
@@ -371,14 +381,15 @@ function CalculateTaxesTotals(job, otherTotals) {
otherTotals.rates.subtotal.percentage((job.tax_lbr_rt || 0) * 100) // THis is currently using the lbr tax rate from PFH not PFL. otherTotals.rates.subtotal.percentage((job.tax_lbr_rt || 0) * 100) // THis is currently using the lbr tax rate from PFH not PFL.
) )
.add( .add(
Dinero({ otherTotals.additional.adjustments.percentage(
amount: Math.round((job.towing_payable || 0) * 100), (job.tax_lbr_rt || 0) * 100
}).percentage((job.tax_tow_rt || 0) * 100) )
) )
.add( .add(
Dinero({ otherTotals.additional.towing.percentage((job.tax_tow_rt || 0) * 100)
amount: Math.round((job.storage_payable || 0) * 100), )
}).percentage((job.tax_str_rt || 0) * 100) .add(
otherTotals.additional.storage.percentage((job.tax_str_rt || 0) * 100)
) )
.add(additionalItemsTax), .add(additionalItemsTax),
local_tax: subtotal.percentage((job.local_tax_rate || 0) * 100), local_tax: subtotal.percentage((job.local_tax_rate || 0) * 100),