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

Further refinement on jobs detail screen on header. BOD-155

Browse Source
This commit is contained in:
Patrick Fic
2020-06-11 16:29:55 -07:00
parent 4e5c305f95
commit 230b45847a
18 changed files with 319 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/App/App.styles.scss
View File

@@ -8,3 +8,17 @@
flex: 1; flex: 1;
} }
} }
.imex-flex-row {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
&__grow {
flex: 1;
}
&__margin {
margin: 0.2rem 0.2rem;
}
}

9
client/src/components/barcode-popup/barcode-popup.component.jsx
View File

@@ -2,7 +2,7 @@ import { Tag, Popover } from "antd";
import React from "react"; import React from "react";
import Barcode from "react-barcode"; import Barcode from "react-barcode";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function BarcodePopupComponent({ value }) { export default function BarcodePopupComponent({ value, children }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div> <div>
@@ -10,12 +10,11 @@ export default function BarcodePopupComponent({ value }) {
content={ content={
<Barcode <Barcode
value={value} value={value}
background="transparent" background='transparent'
displayValue={false} displayValue={false}
/> />
} }>
> {children ? children : <Tag>{t("general.labels.barcode")}</Tag>}
<Tag>{t("general.labels.barcode")}</Tag>
</Popover> </Popover>
</div> </div>
); );

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

@@ -266,7 +266,7 @@ function Header({
{currentUser.displayName || t("general.labels.unknown")} {currentUser.displayName || t("general.labels.unknown")}
</div> </div>
}> }>
<Menu.Item onClick={() => signOutStart()}> <Menu.Item danger onClick={() => signOutStart()}>
{t("user.actions.signout")} {t("user.actions.signout")}
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>

70
client/src/components/invoices-list-table/invoices-list-table.component.jsx
View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons"; import { SyncOutlined } from "@ant-design/icons";
import { Button, Checkbox, Descriptions, Table } from "antd"; import { Button, Checkbox, Descriptions, Table, Input, Typography } 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";
@@ -12,22 +12,29 @@ import { alphaSort } from "../../utils/sorters";
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
setPartsOrderContext: (context) => setPartsOrderContext: (context) =>
dispatch(setModalContext({ context: context, modal: "partsOrder" })), dispatch(setModalContext({ context: context, modal: "partsOrder" })),
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
setReconciliationContext: (context) =>
dispatch(setModalContext({ context: context, modal: "reconciliation" })),
}); });
export function InvoicesListTableComponent({ export function InvoicesListTableComponent({
job, job,
loading, loading,
invoices, invoicesQuery,
selectedInvoice, selectedInvoice,
handleOnRowClick, handleOnRowClick,
refetch,
setPartsOrderContext, setPartsOrderContext,
setInvoiceEnterContext,
setReconciliationContext,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [state, setState] = useState({ const [state, setState] = useState({
sortedInfo: {}, sortedInfo: {},
}); });
const invoices = invoicesQuery.data ? invoicesQuery.data.invoices : [];
const { refetch } = invoicesQuery;
const columns = [ const columns = [
{ {
title: t("invoices.fields.vendorname"), title: t("invoices.fields.vendorname"),
@@ -51,7 +58,6 @@ export function InvoicesListTableComponent({
title: t("invoices.fields.date"), title: t("invoices.fields.date"),
dataIndex: "date", dataIndex: "date",
key: "date", key: "date",
sorter: (a, b) => a.date - b.date, sorter: (a, b) => a.date - b.date,
sortOrder: sortOrder:
state.sortedInfo.columnKey === "date" && state.sortedInfo.order, state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
@@ -61,7 +67,6 @@ export function InvoicesListTableComponent({
title: t("invoices.fields.total"), title: t("invoices.fields.total"),
dataIndex: "total", dataIndex: "total",
key: "total", key: "total",
sorter: (a, b) => a.total - b.total, sorter: (a, b) => a.total - b.total,
sortOrder: sortOrder:
state.sortedInfo.columnKey === "total" && state.sortedInfo.order, state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
@@ -212,27 +217,25 @@ export function InvoicesListTableComponent({
return ( return (
<div> <div>
<Descriptions <Typography.Title level={3}>{`${t("invoices.fields.invoice_number")} ${
title={`${t("invoices.fields.invoice_number")} ${ record.invoice_number
record.invoice_number }`}</Typography.Title>
}`}> <Descriptions>
<Descriptions.Item label={t("invoices.fields.federal_tax_rate")}> <Descriptions.Item label={t("invoices.fields.federal_tax_rate")}>
{record.federal_tax_rate || ""} {`${record.federal_tax_rate}%` || ""}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={t("invoices.fields.state_tax_rate")}> <Descriptions.Item label={t("invoices.fields.state_tax_rate")}>
{record.state_tax_rate || ""} {`${record.state_tax_rate}%` || ""}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label={t("invoices.fields.local_tax_rate")}> <Descriptions.Item label={t("invoices.fields.local_tax_rate")}>
{record.local_tax_rate || ""} {`${record.local_tax_rate}%` || ""}
</Descriptions.Item>
<Descriptions.Item label={t("invoices.fields.is_credit_memo")}>
<Checkbox disabled checked={record.is_credit_memo || false} />
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
<Table <Table
size='small' size='small'
scroll={{ x: "50%", y: "40rem" }}
pagination={{ position: "top", defaultPageSize: 25 }} pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns.map((item) => ({ ...item }))} columns={columns}
rowKey='id' rowKey='id'
dataSource={record.invoicelines} dataSource={record.invoicelines}
/> />
@@ -245,12 +248,45 @@ export function InvoicesListTableComponent({
loading={loading} loading={loading}
size='small' size='small'
title={() => ( title={() => (
<div> <div className='imex-table-header'>
<Button onClick={() => refetch()}> <Button onClick={() => refetch()}>
<SyncOutlined /> <SyncOutlined />
</Button> </Button>
<Button
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: invoicesQuery.refetch },
context: {
job,
},
});
}}>
{t("jobs.actions.postInvoices")}
</Button>
<Button
onClick={() => {
setReconciliationContext({
actions: { refetch: invoicesQuery.refetch },
context: {
job,
invoices:
(invoicesQuery.data && invoicesQuery.data.invoices) || [],
},
});
}}>
{t("jobs.actions.reconcile")}
</Button>{" "}
<div className='imex-table-header__search'>
<Input.Search
placeholder={t("general.labels.search")}
onChange={(e) => {
e.preventDefault();
}}
/>
</div>
</div> </div>
)} )}
scroll={{ x: "50%", y: "40rem" }}
expandedRowRender={rowExpander} expandedRowRender={rowExpander}
pagination={{ position: "top", defaultPageSize: 25 }} pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns} columns={columns}

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

@@ -2,7 +2,7 @@ import {
EditFilled, EditFilled,
FileImageFilled, FileImageFilled,
PrinterFilled, PrinterFilled,
ShoppingFilled, ShoppingFilled
} from "@ant-design/icons"; } from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import { Button, PageHeader, Tag } from "antd"; import { Button, PageHeader, Tag } from "antd";

73
client/src/components/job-invoices-total/job-invoices-total.component.jsx
View File

@@ -1,12 +1,17 @@
import React from "react"; import { Statistic } from "antd";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { Statistic, Descriptions } from "antd";
import { useTranslation } from "react-i18next";
import Dinero from "dinero.js"; import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import "./job-invoices-total.styles.scss";
export default function JobInvoiceTotals({ loading, invoices, jobTotals }) { export default function JobInvoiceTotals({ loading, invoices, jobTotals }) {
const { t } = useTranslation(); const { t } = useTranslation();
if (loading) return <LoadingSkeleton />; if (loading) return <LoadingSkeleton />;
if (!!!jobTotals)
return (
<AlertComponent type='error' message={t("jobs.errors.nofinancial")} />
);
const totals = JSON.parse(jobTotals); const totals = JSON.parse(jobTotals);
let invoiceTotals = Dinero({ amount: 0 }); let invoiceTotals = Dinero({ amount: 0 });
@@ -24,44 +29,26 @@ export default function JobInvoiceTotals({ loading, invoices, jobTotals }) {
const discrepancy = Dinero(totals.parts.parts.total).subtract(invoiceTotals); const discrepancy = Dinero(totals.parts.parts.total).subtract(invoiceTotals);
return ( return (
<div> <div className='job-invoices-totals-container'>
<Descriptions <Statistic
bordered title={t("jobs.labels.partstotal")}
size='small' value={Dinero(totals.parts.parts.total).toFormat()}
column={1} />
title={t("jobs.labels.partssubletstotal")}> <Statistic
<Descriptions.Item label={t("jobs.labels.partstotal")}> title={t("jobs.labels.subletstotal")}
<Statistic value={Dinero(totals.parts.sublets.total).toFormat()}
value={Dinero(totals.parts.parts.total).toFormat()} />
suffix={`(${Dinero( <Statistic
totals.parts.parts.subtotal title={t("invoices.labels.retailtotal")}
).toFormat()} ± ${Dinero( value={invoiceTotals.toFormat()}
totals.parts.parts.adjustments />
).toFormat()})`} <Statistic
/> title={t("invoices.labels.discrepancy")}
</Descriptions.Item> valueStyle={{
<Descriptions.Item label={t("jobs.labels.subletstotal")}> color: discrepancy.getAmount === 0 ? "green" : "red",
<Statistic }}
value={Dinero(totals.parts.sublets.total).toFormat()} value={discrepancy.toFormat()}
suffix={`(${Dinero( />
totals.parts.sublets.subtotal
).toFormat()} ± ${Dinero(
totals.parts.sublets.adjustments
).toFormat()})`}
/>
</Descriptions.Item>
<Descriptions.Item label={t("invoices.labels.retailtotal")}>
<Statistic value={invoiceTotals.toFormat()} />
</Descriptions.Item>
<Descriptions.Item label={t("invoices.labels.discrepancy")}>
<Statistic
valueStyle={{
color: discrepancy.getAmount === 0 ? "green" : "red",
}}
value={discrepancy.toFormat()}
/>
</Descriptions.Item>
</Descriptions>
</div> </div>
); );
} }

7
client/src/components/job-invoices-total/job-invoices-total.styles.scss Normal file
View File

@@ -0,0 +1,7 @@
.job-invoices-totals-container {
margin: 0rem 2rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-wrap: wrap;
}

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

@@ -1,12 +1,12 @@
import { Col, Descriptions, Row, Statistic } from "antd"; import { Statistic } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } 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 LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { CalculateJob } from "./job-totals.utility";
import "./job-totals-table.styles.scss"; import "./job-totals-table.styles.scss";
import { CalculateJob } from "./job-totals.utility";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser //currentUser: selectCurrentUser

4
client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
View File

@@ -1,9 +1,9 @@
import { Col, Divider, Form, Input, InputNumber, Row } from "antd"; import { Col, Form, Input, Row } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobTotalsTable from "../job-totals-table/job-totals-table.component"; import JobTotalsTable from "../job-totals-table/job-totals-table.component";
import FormRow from "../layout-form-row/layout-form-row.component"; import FormRow from "../layout-form-row/layout-form-row.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function JobsDetailFinancials({ job }) { export default function JobsDetailFinancials({ job }) {
const { t } = useTranslation(); const { t } = useTranslation();

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

@@ -6,18 +6,19 @@ import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util"; import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
import { setModalContext } from "../../redux/modals/modals.actions";
import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component"; import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language)) setScheduleContext: (context) =>
dispatch(setModalContext({ context: context, modal: "schedule" })),
setInvoiceEnterContext: (context) => setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })), dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
}); });
@@ -26,35 +27,47 @@ export function JobsDetailHeaderActions({
job, job,
bodyshop, bodyshop,
refetch, refetch,
setScheduleContext,
setInvoiceEnterContext, setInvoiceEnterContext,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const client = useApolloClient(); const client = useApolloClient();
const history = useHistory(); const history = useHistory();
const statusmenu = ( const statusmenu = (
<Menu key="popovermenu"> <Menu key='popovermenu'>
<Menu.Item key="cccontract"> <Menu.Item
onClick={() => {
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: job.id,
job: job,
},
});
}}>
{t("jobs.actions.schedule")}
</Menu.Item>
<Menu.Item key='cccontract'>
<Link <Link
to={{ to={{
pathname: "/manage/courtesycars/contracts/new", pathname: "/manage/courtesycars/contracts/new",
state: { jobId: job.id }, state: { jobId: job.id },
}} }}>
>
{t("menus.jobsactions.newcccontract")} {t("menus.jobsactions.newcccontract")}
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
key="addtoproduction" key='addtoproduction'
disabled={!!!job.converted || !!job.inproduction} disabled={!!!job.converted || !!job.inproduction}
onClick={() => AddToProduction(client, job.id, refetch)} onClick={() => AddToProduction(client, job.id, refetch)}>
>
{t("jobs.actions.addtoproduction")} {t("jobs.actions.addtoproduction")}
</Menu.Item> </Menu.Item>
<Menu.Item key="duplicatejob"> <Menu.Item key='duplicatejob'>
<Popconfirm <Popconfirm
title={t("jobs.labels.duplicateconfirm")} title={t("jobs.labels.duplicateconfirm")}
okText="Yes" okText='Yes'
cancelText="No" cancelText='No'
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onConfirm={() => onConfirm={() =>
DuplicateJob( DuplicateJob(
@@ -66,13 +79,12 @@ export function JobsDetailHeaderActions({
} }
) )
} }
getPopupContainer={(trigger) => trigger.parentNode} getPopupContainer={(trigger) => trigger.parentNode}>
>
{t("menus.jobsactions.duplicate")} {t("menus.jobsactions.duplicate")}
</Popconfirm> </Popconfirm>
</Menu.Item> </Menu.Item>
<Menu.Item <Menu.Item
key="postinvoices" key='postinvoices'
onClick={() => { onClick={() => {
setInvoiceEnterContext({ setInvoiceEnterContext({
actions: { refetch: refetch }, actions: { refetch: refetch },
@@ -80,16 +92,14 @@ export function JobsDetailHeaderActions({
job: job, job: job,
}, },
}); });
}} }}>
>
{t("jobs.actions.postInvoices")} {t("jobs.actions.postInvoices")}
</Menu.Item> </Menu.Item>
<Menu.Item key="closejob"> <Menu.Item key='closejob'>
<Link <Link
to={{ to={{
pathname: `/manage/jobs/${job.id}/close`, pathname: `/manage/jobs/${job.id}/close`,
}} }}>
>
{t("menus.jobsactions.closejob")} {t("menus.jobsactions.closejob")}
</Link> </Link>
</Menu.Item> </Menu.Item>
@@ -97,7 +107,11 @@ export function JobsDetailHeaderActions({
</Menu> </Menu>
); );
return ( return (
<Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus"> <Dropdown
className='imex-flex-row__margin'
overlay={statusmenu}
trigger={["click"]}
key='changestatus'>
<Button> <Button>
{t("general.labels.actions")} <DownCircleFilled /> {t("general.labels.actions")} <DownCircleFilled />
</Button> </Button>

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

@@ -1,7 +1,5 @@
import { DownCircleFilled, PrinterFilled } from "@ant-design/icons"; import { DownCircleFilled, PrinterFilled } from "@ant-design/icons";
import { import {
Avatar,
Badge,
Button, Button,
Checkbox, Checkbox,
Descriptions, Descriptions,
@@ -9,7 +7,7 @@ import {
Menu, Menu,
notification, notification,
PageHeader, PageHeader,
Tag, Tag
} from "antd"; } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -17,20 +15,19 @@ import Moment from "react-moment";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import CarImage from "../../assets/car.svg"; import { setModalContext } from "../../redux/modals/modals.actions";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
import BarcodePopup from "../barcode-popup/barcode-popup.component"; import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component"; import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component"; import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component"; import "./jobs-detail-header.styles.scss";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
setScheduleContext: (context) =>
dispatch(setModalContext({ context: context, modal: "schedule" })),
setPrintCenterContext: (context) => setPrintCenterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "printCenter" })), dispatch(setModalContext({ context: context, modal: "printCenter" })),
}); });
@@ -46,143 +43,124 @@ export function JobsDetailHeader({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const tombstoneTitle = (
<div>
<Avatar size="large" alt="Vehicle Image" src={CarImage} />
{job.ro_number
? `${t("jobs.fields.ro_number")} ${job.ro_number}`
: `EST-${job.est_number}`}
</div>
);
const statusmenu = ( const statusmenu = (
<Menu <Menu
onClick={(e) => { onClick={(e) => {
updateJobStatus(e.key); updateJobStatus(e.key);
}} }}>
>
{bodyshop.md_ro_statuses.statuses.map((item) => ( {bodyshop.md_ro_statuses.statuses.map((item) => (
<Menu.Item key={item}>{item}</Menu.Item> <Menu.Item key={item}>{item}</Menu.Item>
))} ))}
</Menu> </Menu>
); );
const menuExtra = [ const menuExtra = (
<Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus"> <div className='imex-flex-row'>
<Button> <Dropdown
{t("jobs.actions.changestatus")} <DownCircleFilled /> className='imex-flex-row__margin'
</Button> overlay={statusmenu}
</Dropdown>, trigger={["click"]}
<Button key='changestatus'>
onClick={() => { <Button>
setPrintCenterContext({ {t("jobs.actions.changestatus")} <DownCircleFilled />
actions: { refetch: refetch }, </Button>
context: { </Dropdown>
id: job.id,
type: "job",
},
});
}}
key="printing"
>
<PrinterFilled />
{t("jobs.actions.printCenter")}
</Button>,
<Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
<Button <Button
//TODO Enabled logic based on status. className='imex-flex-row__margin'
onClick={() => { onClick={() => {
setScheduleContext({ setPrintCenterContext({
actions: { refetch: refetch }, actions: { refetch: refetch },
context: { context: {
jobId: job.id, id: job.id,
job: job, type: "job",
}, },
}); });
}} }}
> key='printing'>
{t("jobs.actions.schedule")} <PrinterFilled />
{t("jobs.actions.printCenter")}
</Button> </Button>
</Badge>, <Button
<Button key='convert'
key="convert" className='imex-flex-row__margin'
type="dashed" type='danger'
disabled={job.converted} style={{ display: job.converted ? "none" : "" }}
onClick={() => { disabled={job.converted}
mutationConvertJob({ onClick={() => {
variables: { jobId: job.id }, mutationConvertJob({
}).then((r) => { variables: { jobId: job.id },
refetch(); }).then((r) => {
refetch();
notification["success"]({ notification["success"]({
message: t("jobs.successes.converted"), message: t("jobs.successes.converted"),
});
}); });
}); }}>
}} {t("jobs.actions.convert")}
> </Button>
{t("jobs.actions.convert")} <JobsDetailHeaderActions key='actions' job={job} refetch={refetch} />
</Button>, <Button
<JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />, type='primary'
<Button type="primary" key="submit" htmlType="submit"> className='imex-flex-row__margin'
{t("general.actions.save")} key='submit'
</Button>, htmlType='submit'>
]; {t("general.actions.save")}
</Button>
</div>
);
return ( return (
<PageHeader <PageHeader
style={{ title={
border: "1px solid rgb(235, 237, 240)", job.ro_number
}} ? `${t("jobs.fields.ro_number")} ${job.ro_number}`
title={tombstoneTitle} : `${t("jobs.fields.est_number")} ${job.est_number}`
//subTitle={tombstoneSubtitle}
tags={
<span key="job-status">
{job.status ? <Tag color="blue">{job.status}</Tag> : null}
{job.inproduction ? (
<Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>
) : null}
<OwnerTagPopoverComponent job={job} />
<VehicleTagPopoverComponent job={job} />
<BarcodePopup value={job.id} />
</span>
} }
extra={menuExtra} subTitle={job.status}
> tags={[
<Descriptions size="small" column={5}> <OwnerTagPopoverComponent key='owner' job={job} />,
<Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}> <VehicleTagPopoverComponent key='vehicle' job={job} />,
<Tag
color='#f50'
key='production'
style={{ display: job.inproduction ? "" : "none" }}>
{t("jobs.labels.inproduction")}
</Tag>,
]}
extra={menuExtra}>
<Descriptions size='small' column={5}>
<Descriptions.Item key='total' label={t("jobs.fields.repairtotal")}>
<CurrencyFormatter>{job.clm_total}</CurrencyFormatter> <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item <Descriptions.Item
key="custowing" key='custowing'
label={t("jobs.fields.customerowing")} label={t("jobs.fields.customerowing")}>
>
<CurrencyFormatter>{job.owner_owing}</CurrencyFormatter> <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item <Descriptions.Item
key="scp" key='scp'
label={t("jobs.fields.specialcoveragepolicy")} label={t("jobs.fields.specialcoveragepolicy")}>
>
<Checkbox checked={job.special_coverage_policy} /> <Checkbox checked={job.special_coverage_policy} />
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item <Descriptions.Item
key="sched_comp" key='sched_comp'
label={t("jobs.fields.scheduled_completion")} label={t("jobs.fields.scheduled_completion")}>
>
{job.scheduled_completion ? ( {job.scheduled_completion ? (
<Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment> <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
) : null} ) : null}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}> <Descriptions.Item key='servicecar' label={t("jobs.fields.servicecar")}>
{job.cccontracts && {job.cccontracts &&
job.cccontracts.map((item) => ( job.cccontracts.map((item) => (
<Link <Link
key={item.id} key={item.id}
to={`/manage/courtesycars/contracts/${item.id}`} to={`/manage/courtesycars/contracts/${item.id}`}>
>
<div>{`${item.agreementnumber} - ${item.start} - ${item.scheduledreturn}`}</div> <div>{`${item.agreementnumber} - ${item.start} - ${item.scheduledreturn}`}</div>
</Link> </Link>
))} ))}

8
client/src/components/jobs-detail-header/jobs-detail-header.styles.scss Normal file
View File

@@ -0,0 +1,8 @@
.jobs-title-container {
display: block;
}
.jobs-subtitle-tags {
display: flex;
flex-wrap: wrap;
}

95
client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx
View File

@@ -1,76 +1,57 @@
import { Button } from "antd"; import { Col, Row } from "antd";
import React from "react"; import React from "react";
import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component"; import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component";
import JobInvoicesTotalsComponent from "../job-invoices-total/job-invoices-total.component"; import JobInvoicesTotalsComponent from "../job-invoices-total/job-invoices-total.component";
import { useTranslation } from "react-i18next"; import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container"; const tableCol = {
xs: {
span: 24,
},
md: {
span: 20,
},
};
const mapDispatchToProps = (dispatch) => ({ const totalsCol = {
setInvoiceEnterContext: (context) => xs: {
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })), span: 24,
setReconciliationContext: (context) => },
dispatch(setModalContext({ context: context, modal: "reconciliation" })), md: {
}); span: 4,
},
};
export function JobsDetailPliComponent({ export default function JobsDetailPliComponent({
setInvoiceEnterContext,
setReconciliationContext,
job, job,
invoicesQuery, invoicesQuery,
handleOnRowClick, handleOnRowClick,
selectedInvoice, selectedInvoice,
}) { }) {
const { t } = useTranslation();
return ( return (
<div> <div>
<PartsOrderModalContainer /> <PartsOrderModal />
<Button
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: invoicesQuery.refetch || null },
context: {
job,
},
});
}}>
{t("jobs.actions.postInvoices")}
</Button>
<Button
onClick={() => {
setReconciliationContext({
actions: { refetch: invoicesQuery.refetch },
context: {
job,
invoices: invoicesQuery.data && invoicesQuery.data.invoices,
},
});
}}>
{t("jobs.actions.reconcile")}
</Button>
{invoicesQuery.error ? ( {invoicesQuery.error ? (
<AlertComponent message={invoicesQuery.error.message} type='error' /> <AlertComponent message={invoicesQuery.error.message} type='error' />
) : null} ) : null}
<Row>
<JobInvoicesTotalsComponent <Col {...tableCol}>
invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null} <InvoicesListTableComponent
loading={invoicesQuery.loading} job={job}
jobTotals={job.job_totals} loading={invoicesQuery.loading}
/> handleOnRowClick={handleOnRowClick}
selectedInvoice={selectedInvoice}
<InvoicesListTableComponent invoicesQuery={invoicesQuery}
job={job} />
loading={invoicesQuery.loading} </Col>
handleOnRowClick={handleOnRowClick} <Col {...totalsCol}>
selectedInvoice={selectedInvoice} <JobInvoicesTotalsComponent
invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null} invoices={invoicesQuery.data ? invoicesQuery.data.invoices : []}
refetch={invoicesQuery.refetch} loading={invoicesQuery.loading}
/> jobTotals={job.job_totals}
/>
</Col>
</Row>
</div> </div>
); );
} }
export default connect(null, mapDispatchToProps)(JobsDetailPliComponent);

8
client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx
View File

@@ -1,9 +1,9 @@
import React from "react";
import { useQuery } from "@apollo/react-hooks"; import { useQuery } from "@apollo/react-hooks";
import JobsDetailPliComponent from "./jobs-detail-pli.component";
import { QUERY_INVOICES_BY_JOBID } from "../../graphql/invoices.queries";
import { useHistory, useLocation } from "react-router-dom";
import queryString from "query-string"; import queryString from "query-string";
import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import { QUERY_INVOICES_BY_JOBID } from "../../graphql/invoices.queries";
import JobsDetailPliComponent from "./jobs-detail-pli.component";
export default function JobsDetailPliContainer({ job }) { export default function JobsDetailPliContainer({ job }) {
const invoicesQuery = useQuery(QUERY_INVOICES_BY_JOBID, { const invoicesQuery = useQuery(QUERY_INVOICES_BY_JOBID, {

32
client/src/components/owner-tag-popover/owner-tag-popover.component.jsx
View File

@@ -13,19 +13,16 @@ export default function OwnerTagPopoverComponent({ job }) {
title={t("owners.labels.fromclaim")} title={t("owners.labels.fromclaim")}
size='small' size='small'
column={1}> column={1}>
<Descriptions.Item <Descriptions.Item key='1' label={t("jobs.fields.owner")}>{`${
key='1' job.ownr_fn || ""
label={t("jobs.fields.owner")}>{`${job.ownr_fn || } ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`}</Descriptions.Item>
""} ${job.ownr_ln || ""} ${job.ownr_co_nm ||
""}`}</Descriptions.Item>
<Descriptions.Item key='2' label={t("jobs.fields.ownr_ph1")}> <Descriptions.Item key='2' label={t("jobs.fields.ownr_ph1")}>
<PhoneFormatter>{job.ownr_ph1 || ""}</PhoneFormatter> <PhoneFormatter>{job.ownr_ph1 || ""}</PhoneFormatter>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key='3' label={t("owners.fields.address")}> <Descriptions.Item key='3' label={t("owners.fields.address")}>
{`${job.ownr_addr1 || ""} ${job.ownr_addr2 || {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
""} ${job.ownr_city || ""} ${job.ownr_st || job.ownr_city || ""
""} ${job.ownr_zip || ""} ${job.ownr_ctry || } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
""} ${job.ownr_city || ""}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key='4' label={t("owners.fields.ownr_ea")}> <Descriptions.Item key='4' label={t("owners.fields.ownr_ea")}>
{job.ownr_ea || ""} {job.ownr_ea || ""}
@@ -40,17 +37,20 @@ export default function OwnerTagPopoverComponent({ job }) {
title={t("owners.labels.fromowner")} title={t("owners.labels.fromowner")}
size='small' size='small'
column={1}> column={1}>
<Descriptions.Item key='1' label={t("jobs.fields.owner")}>{`${job <Descriptions.Item key='1' label={t("jobs.fields.owner")}>{`${
.owner.ownr_fn || ""} ${job.owner.ownr_ln || ""} ${job.owner job.owner.ownr_fn || ""
.ownr_co_nm || ""}`}</Descriptions.Item> } ${job.owner.ownr_ln || ""} ${
job.owner.ownr_co_nm || ""
}`}</Descriptions.Item>
<Descriptions.Item key='2' label={t("jobs.fields.ownr_ph1")}> <Descriptions.Item key='2' label={t("jobs.fields.ownr_ph1")}>
<PhoneFormatter>{job.owner.ownr_ph1 || ""}</PhoneFormatter> <PhoneFormatter>{job.owner.ownr_ph1 || ""}</PhoneFormatter>
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key='3' label={t("owners.fields.address")}> <Descriptions.Item key='3' label={t("owners.fields.address")}>
{`${job.owner.ownr_addr1 || ""} ${job.owner.ownr_addr2 || {`${job.owner.ownr_addr1 || ""} ${job.owner.ownr_addr2 || ""} ${
""} ${job.owner.ownr_city || ""} ${job.owner.ownr_st || job.owner.ownr_city || ""
""} ${job.owner.ownr_zip || ""} ${job.owner.ownr_ctry || } ${job.owner.ownr_st || ""} ${job.owner.ownr_zip || ""} ${
""} ${job.owner.ownr_city || ""}`} job.owner.ownr_ctry || ""
} `}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key='4' label={t("owners.fields.ownr_ea")}> <Descriptions.Item key='4' label={t("owners.fields.ownr_ea")}>
{job.owner.ownr_ea || ""} {job.owner.ownr_ea || ""}

48
client/src/components/vehicle-tag-popover/vehicle-tag-popover.component.jsx
View File

@@ -11,22 +11,21 @@ export default function VehicleTagPopoverComponent({ job }) {
<Col span={12}> <Col span={12}>
<Descriptions <Descriptions
title={t("owners.labels.fromclaim")} title={t("owners.labels.fromclaim")}
size="small" size='small'
column={1} column={1}>
> <Descriptions.Item key='1' label={t("jobs.fields.vehicle")}>
<Descriptions.Item key="1" label={t("jobs.fields.vehicle")}>
{`${job.v_model_yr || t("general.labels.na")} {`${job.v_model_yr || t("general.labels.na")}
${job.v_make_desc || t("general.labels.na")} ${job.v_make_desc || t("general.labels.na")}
${job.v_model_desc || t("general.labels.na")}`} ${job.v_model_desc || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="2" label={t("vehicles.fields.plate_no")}> <Descriptions.Item key='2' label={t("vehicles.fields.plate_no")}>
{`${job.plate_no || t("general.labels.na")}`} {`${job.plate_no || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="3" label={t("vehicles.fields.plate_st")}> <Descriptions.Item key='3' label={t("vehicles.fields.plate_st")}>
{`${job.plate_st || t("general.labels.na")}`} {`${job.plate_st || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="4" label={t("vehicles.fields.v_vin")}> <Descriptions.Item key='4' label={t("vehicles.fields.v_vin")}>
{`${job.v_vin || t("general.labels.na")}`} {`${job.v_vin || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
@@ -34,22 +33,21 @@ export default function VehicleTagPopoverComponent({ job }) {
<Col span={12}> <Col span={12}>
<Descriptions <Descriptions
title={t("owners.labels.fromowner")} title={t("owners.labels.fromowner")}
size="small" size='small'
column={1} column={1}>
> <Descriptions.Item key='1' label={t("jobs.fields.vehicle")}>
<Descriptions.Item key="1" label={t("jobs.fields.vehicle")}>
{`${job.vehicle.v_model_yr || t("general.labels.na")} {`${job.vehicle.v_model_yr || t("general.labels.na")}
${job.vehicle.v_make_desc || t("general.labels.na")} ${job.vehicle.v_make_desc || t("general.labels.na")}
${job.vehicle.v_model_desc || t("general.labels.na")}`} ${job.vehicle.v_model_desc || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="2" label={t("vehicles.fields.plate_no")}> <Descriptions.Item key='2' label={t("vehicles.fields.plate_no")}>
{`${job.vehicle.plate_no || t("general.labels.na")}`} {`${job.vehicle.plate_no || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="3" label={t("vehicles.fields.plate_st")}> <Descriptions.Item key='3' label={t("vehicles.fields.plate_st")}>
{`${job.vehicle.plate_st || t("general.labels.na")}`} {`${job.vehicle.plate_st || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item key="4" label={t("vehicles.fields.v_vin")}> <Descriptions.Item key='4' label={t("vehicles.fields.v_vin")}>
{`${job.vehicle.v_vin || t("general.labels.na")}`} {`${job.vehicle.v_vin || t("general.labels.na")}`}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
@@ -62,23 +60,21 @@ export default function VehicleTagPopoverComponent({ job }) {
); );
return ( return (
<Popover placement="bottom" content={content}> <Popover placement='bottom' content={content}>
<Tag color="green"> <Tag color='green'>
{job.vehicleid ? ( {job.vehicleid ? (
<Link to={`/manage/vehicles/${job.vehicleid}`}> <Link to={`/manage/vehicles/${job.vehicleid}`}>
{`${job.v_model_yr || t("general.labels.na")} {`${job.v_model_yr || ""}
${job.v_make_desc || t("general.labels.na")} ${job.v_make_desc || ""}
${job.v_model_desc || t("general.labels.na")} | ${job.v_model_desc || ""} |
${job.plate_no || t("general.labels.na")} | ${job.plate_no || ""}`}
${job.v_vin || t("general.labels.na")}`}
</Link> </Link>
) : ( ) : (
<span> <span>
{`${job.v_model_yr || t("general.labels.na")} {`${job.v_model_yr || ""}
${job.v_make_desc || t("general.labels.na")} ${job.v_make_desc || ""}
${job.v_model_desc || t("general.labels.na")} | ${job.v_model_desc || ""} |
${job.plate_no || t("general.labels.na")} | ${job.plate_no || ""}`}
${job.v_vin || t("general.labels.na")}`}
</span> </span>
)} )}
</Tag> </Tag>

6
client/src/graphql/jobs.queries.js
View File

@@ -249,7 +249,6 @@ export const GET_JOB_BY_PK = gql`
date_exported date_exported
status status
owner_owing owner_owing
joblines { joblines {
id id
unq_seq unq_seq
@@ -277,11 +276,6 @@ export const GET_JOB_BY_PK = gql`
scheduledreturn scheduledreturn
agreementnumber agreementnumber
} }
appointments_aggregate {
aggregate {
count
}
}
cieca_ttl cieca_ttl
} }
} }

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

@@ -573,7 +573,7 @@
"est_ct_fn": "Appraiser First Name", "est_ct_fn": "Appraiser First Name",
"est_ct_ln": "Appraiser Last Name", "est_ct_ln": "Appraiser Last Name",
"est_ea": "Appraiser Email", "est_ea": "Appraiser Email",
"est_number": "Estimate Number", "est_number": "Estimate #",
"est_ph1": "Appraiser Phone #", "est_ph1": "Appraiser Phone #",
"federal_tax_payable": "Federal Tax Payable", "federal_tax_payable": "Federal Tax Payable",
"ins_addr1": "Insurance Co. Address", "ins_addr1": "Insurance Co. Address",