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

Added invoice totals + high level reconciliation on PLI jobs tab. BOD-26

Browse Source
This commit is contained in:
Patrick Fic
2020-05-13 16:34:03 -07:00
parent 23a6900906
commit 0473421c6c
15 changed files with 253 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/components/invoice-form/invoice-form.component.jsx
View File

@@ -44,21 +44,23 @@ export default function InvoiceFormComponent({
setDiscount(matchingVendors[0].discount);
}
}
}, [form, setDiscount, vendorAutoCompleteOptions]);
if (form.getFieldValue("jobid")) {
loadLines({ variables: { id: form.getFieldValue("jobid") } });
}
}, [form, setDiscount, vendorAutoCompleteOptions, loadLines]);
return (
<div className="invoice-form-wrapper">
<div className="invoice-form-invoice-details">
<div className='invoice-form-wrapper'>
<div className='invoice-form-invoice-details'>
<Form.Item
name="jobid"
name='jobid'
label={t("invoices.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
]}>
<JobSearchSelect
options={roAutoCompleteOptions}
disabled={invoiceEdit}
@@ -71,81 +73,73 @@ export default function InvoiceFormComponent({
</Form.Item>
<Form.Item
label={t("invoices.fields.vendor")}
name="vendorid"
name='vendorid'
style={{ display: invoiceEdit ? "none" : null }}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
]}>
<VendorSearchSelect
options={vendorAutoCompleteOptions}
onSelect={handleVendorSelect}
/>
</Form.Item>
</div>
<div className="invoice-form-invoice-details">
<div className='invoice-form-invoice-details'>
<Form.Item
label={t("invoices.fields.invoice_number")}
name="invoice_number"
name='invoice_number'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
]}>
<Input />
</Form.Item>
<Form.Item
label={t("invoices.fields.date")}
name="date"
name='date'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
]}>
<DatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}
name="is_credit_memo"
valuePropName="checked"
>
name='is_credit_memo'
valuePropName='checked'>
<Switch />
</Form.Item>
<Form.Item
label={t("invoices.fields.total")}
name="total"
name='total'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
]}>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("invoices.fields.federal_tax_rate")}
name="federal_tax_rate"
>
name='federal_tax_rate'>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("invoices.fields.state_tax_rate")}
name="state_tax_rate"
>
name='state_tax_rate'>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("invoices.fields.local_tax_rate")}
name="local_tax_rate"
>
name='local_tax_rate'>
<CurrencyInput />
</Form.Item>
</div>
@@ -161,19 +155,18 @@ export default function InvoiceFormComponent({
// </Form.Item>
}
<Form.Item
name="upload"
label="Upload"
name='upload'
label='Upload'
style={{ display: invoiceEdit ? "none" : null }}
valuePropName="fileList"
valuePropName='fileList'
getValueFromEvent={(e) => {
console.log("Upload event:", e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
}}
>
<Upload name="logo" beforeUpload={() => false} listType="picture">
}}>
<Upload name='logo' beforeUpload={() => false} listType='picture'>
<Button>Click to upload</Button>
</Upload>
</Form.Item>
@@ -196,7 +189,7 @@ export default function InvoiceFormComponent({
totals = CalculateInvoiceTotal(values);
if (!!totals)
return (
<div className="invoice-form-totals">
<div className='invoice-form-totals'>
<Statistic
title={t("invoices.labels.subtotal")}
value={totals.subtotal.toFormat()}

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

@@ -1,16 +1,18 @@
import { Button, Descriptions, Table } from "antd";
import { Button, Descriptions, Table, Checkbox } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
import { SyncOutlined } from "@ant-design/icons";
export default function InvoicesListTableComponent({
loading,
invoices,
selectedInvoice,
handleOnRowClick,
refetch,
}) {
const { t } = useTranslation();
@@ -65,8 +67,7 @@ export default function InvoicesListTableComponent({
key: "actions",
render: (text, record) => (
<Link
to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}
>
to={`/manage/invoices?invoiceid=${record.id}&vendorid=${record.vendorid}`}>
<Button>{t("invoices.actions.edit")}</Button>
</Link>
),
@@ -120,24 +121,74 @@ export default function InvoicesListTableComponent({
state.sortedInfo.columnKey === "cost_center" &&
state.sortedInfo.order,
},
{
title: t("invoicelines.fields.federal_tax_applicable"),
dataIndex: "applicable_taxes.federal",
key: "applicable_taxes.federal",
render: (text, record) => (
<Checkbox
disabled
checked={
(record.applicable_taxes && record.applicable_taxes.federal) ||
false
}
/>
),
},
{
title: t("invoicelines.fields.state_tax_applicable"),
dataIndex: "applicable_taxes.state",
key: "applicable_taxes.state",
render: (text, record) => (
<Checkbox
disabled
checked={
(record.applicable_taxes && record.applicable_taxes.state) ||
false
}
/>
),
},
{
title: t("invoicelines.fields.local_tax_applicable"),
dataIndex: "applicable_taxes.local",
key: "applicable_taxes.local",
render: (text, record) => (
<Checkbox
disabled
checked={
(record.applicable_taxes && record.applicable_taxes.local) ||
false
}
/>
),
},
];
return (
<div>
<Descriptions title="User Info">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
<Descriptions.Item label="Remark">empty</Descriptions.Item>
<Descriptions.Item label="Address">
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
<Descriptions
title={`${t("invoices.fields.invoice_number")} ${
record.invoice_number
}`}>
<Descriptions.Item label={t("invoices.fields.federal_tax_rate")}>
{record.federal_tax_rate || ""}
</Descriptions.Item>
<Descriptions.Item label={t("invoices.fields.state_tax_rate")}>
{record.state_tax_rate || ""}
</Descriptions.Item>
<Descriptions.Item label={t("invoices.fields.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>
<Table
size="small"
size='small'
pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns.map((item) => ({ ...item }))}
rowKey="id"
rowKey='id'
dataSource={record.invoicelines}
/>
</div>
@@ -147,11 +198,18 @@ export default function InvoicesListTableComponent({
return (
<Table
loading={loading}
size="small"
size='small'
title={() => (
<div>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
</div>
)}
expandedRowRender={rowExpander}
pagination={{ position: "top", defaultPageSize: 25 }}
columns={columns.map((item) => ({ ...item }))}
rowKey="id"
rowKey='id'
dataSource={invoices}
onChange={handleTableChange}
expandable={{

67
client/src/components/job-invoices-total/job-invoices-total.component.jsx Normal file
View File

@@ -0,0 +1,67 @@
import React from "react";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { Statistic, Descriptions } from "antd";
import { useTranslation } from "react-i18next";
import Dinero from "dinero.js";
export default function JobInvoiceTotals({ loading, invoices, jobTotals }) {
const { t } = useTranslation();
if (loading) return <LoadingSkeleton />;
const totals = JSON.parse(jobTotals);
let invoiceTotals = Dinero({ amount: 0 });
invoices.forEach((i) =>
i.invoicelines.forEach((il) => {
invoiceTotals = invoiceTotals.add(
Dinero({
amount:
((il.actual_price || 0) * i.is_credit_memo ? -1 : 1 || 0) * 100,
})
);
})
);
const discrepancy = Dinero(totals.parts.parts.total).subtract(invoiceTotals);
return (
<div>
<Descriptions
bordered
size='small'
column={1}
title={t("jobs.labels.partssubletstotal")}>
<Descriptions.Item label={t("jobs.labels.partstotal")}>
<Statistic
value={Dinero(totals.parts.parts.total).toFormat()}
suffix={`(${Dinero(
totals.parts.parts.subtotal
).toFormat()} ± ${Dinero(
totals.parts.parts.adjustments
).toFormat()})`}
/>
</Descriptions.Item>
<Descriptions.Item label={t("jobs.labels.subletstotal")}>
<Statistic
value={Dinero(totals.parts.sublets.total).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>
);
}

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

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component";
import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component";
import JobInvoicesTotalsComponent from "../job-invoices-total/job-invoices-total.component";
const mapDispatchToProps = (dispatch) => ({
setInvoiceEnterContext: (context) =>
@@ -27,13 +28,19 @@ export function JobsDetailPliComponent({
job,
},
});
}}
>
}}>
Enter Invoice
</Button>
{invoicesQuery.error ? (
<AlertComponent message={invoicesQuery.error.message} type="error" />
<AlertComponent message={invoicesQuery.error.message} type='error' />
) : null}
<JobInvoicesTotalsComponent
invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
loading={invoicesQuery.loading}
jobTotals={job.job_totals}
/>
<InvoicesListTableComponent
loading={invoicesQuery.loading}
handleOnRowClick={handleOnRowClick}

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

@@ -12,7 +12,7 @@ function JobsDocumentsComponent({
invoicesCallback,
}) {
const [galleryImages, setgalleryImages] = useState([]);
console.log("Gallery Data", data);
useEffect(() => {
setgalleryImages(
data.reduce((acc, value) => {
@@ -34,7 +34,7 @@ function JobsDocumentsComponent({
}, [data, setgalleryImages]);
return (
<div className="clearfix">
<div className='clearfix'>
<DocumentsUploadContainer
jobId={jobId}
invoiceId={invoiceId}

19
client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
View File

@@ -31,7 +31,7 @@ export function LaborAllocationsTable({ joblines, timetickets, bodyshop }) {
</Typography.Title>
<Row>
<Col span={12}>
<Col span={6}>
<strong>{t("timetickets.fields.cost_center")}</strong>
</Col>
<Col span={6}>
@@ -40,12 +40,23 @@ export function LaborAllocationsTable({ joblines, timetickets, bodyshop }) {
<Col span={6}>
<strong>{t("jobs.labels.hrs_claimed")}</strong>
</Col>
<Col span={6}>
<strong>{t("jobs.labels.difference")}</strong>
</Col>
</Row>
{totals.map((t, idx) => (
<Row key={idx}>
<Col span={12}>{t.cost_center}</Col>
<Col span={6}>{t.total}</Col>
<Col span={6}>{t.claimed}</Col>
<Col span={6}>{t.cost_center}</Col>
<Col span={6}>{t.total.toFixed(2)}</Col>
<Col span={6}>{t.claimed.toFixed(2)}</Col>
<Col span={6}>
<strong
style={{
color: Math.round(t.total - t.claimed) > 0 ? "green" : "red",
}}>
{(t.total - t.claimed).toFixed(2)}
</strong>
</Col>
</Row>
))}
</div>