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

42
bodyshop_translations.babel
View File

@@ -5902,6 +5902,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>retailtotal</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>
<name>state_tax</name>
<definition_loaded>false</definition_loaded>
@@ -9374,6 +9395,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>difference</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>
<name>documents</name>
<definition_loaded>false</definition_loaded>

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>

4
client/src/graphql/invoices.queries.js
View File

@@ -49,6 +49,9 @@ export const QUERY_INVOICES_BY_JOBID = gql`
total
invoice_number
date
federal_tax_rate
state_tax_rate
local_tax_rate
invoicelines {
actual_price
quantity
@@ -56,6 +59,7 @@ export const QUERY_INVOICES_BY_JOBID = gql`
cost_center
id
line_desc
applicable_taxes
}
}
}

5
client/src/pages/invoice-detail/invoice-detail.page.component.jsx
View File

@@ -1,5 +0,0 @@
import React from "react";
export default function InvoiceDetailPageComponent() {
return <div>Invoice Detail Page Component</div>;
}

27
client/src/pages/invoice-detail/invoice-detail.page.container.jsx
View File

@@ -1,27 +0,0 @@
import React from "react";
import { useParams } from "react-router-dom";
import InvoiceDetailPageComponent from "./invoice-detail.page.component";
import { useQuery } from "@apollo/react-hooks";
import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries";
import AlertComponent from "../../components/alert/alert.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import { Form } from "antd";
export default function InvoiceDetailPageContainer() {
const { invoiceId } = useParams();
const [form] = Form.useForm();
const { loading, error, data } = useQuery(QUERY_INVOICE_BY_PK, {
variables: { invoiceid: invoiceId },
skip: !!!invoiceId,
});
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<Form form={form} initialValues={data ? data.invoices_by_pk : {}}>
<InvoiceDetailPageComponent />
</Form>
);
}

32
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -1,28 +1,16 @@
import Icon, {
BarsOutlined,
CalendarFilled,
DollarCircleOutlined,
FileImageFilled,
ToolFilled,
} from "@ant-design/icons";
import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons";
import { Form, notification, Tabs } from "antd";
import moment from "moment";
import queryString from "query-string";
import React, { lazy, Suspense } from "react";
import { useTranslation } from "react-i18next";
import {
FaHardHat,
FaHistory,
FaInfo,
FaRegStickyNote,
FaShieldAlt,
} from "react-icons/fa";
import { useHistory, useLocation } from "react-router-dom";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import queryString from "query-string";
import { FaHardHat, FaHistory, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
import { connect } from "react-redux";
import { useHistory, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
const JobsLinesContainer = lazy(() =>
import("../../components/job-detail-lines/job-lines.container")
@@ -127,14 +115,6 @@ export function JobsDetailPage({
fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}>
<ScheduleJobModalContainer />
<JobLineUpsertModalContainer />
<button
onClick={() => {
let r = CalculateJob(job, bodyshop.shoprates);
console.log("r", r);
}}>
Calculate
</button>
<Form
form={form}
//onFieldsChange={(a, b) => console.log("a,b", a, b)}

9
client/src/pages/manage/manage.page.component.jsx
View File

@@ -67,9 +67,7 @@ const ContractsList = lazy(() =>
const InvoicesListPage = lazy(() =>
import("../invoices/invoices.page.container")
);
const InvoiceDetailPage = lazy(() =>
import("../invoice-detail/invoice-detail.page.container")
);
const EnterInvoiceModalContainer = lazy(() =>
import("../../components/invoice-enter-modal/invoice-enter-modal.container")
);
@@ -201,11 +199,6 @@ export default function Manage({ match }) {
path={`${match.path}/invoices`}
component={InvoicesListPage}
/>
<Route
exact
path={`${match.path}/invoices/:invoiceId`}
component={InvoiceDetailPage}
/>
<Route
exact
path={`${match.path}/owners`}

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

@@ -407,6 +407,7 @@
"local_tax": "Local Tax",
"new": "New Invoice",
"noneselected": "No invoice selected.",
"retailtotal": "Retail Total of Invoices (Ex. Taxes)",
"state_tax": "State Tax",
"subtotal": "Subtotal"
},
@@ -597,6 +598,7 @@
"vehicleinfo": "Vehicle Info"
},
"creating_new_job": "Creating new job...",
"difference": "Difference",
"documents": "Documents",
"duplicateconfirm": "Are you sure you want to duplicate this job? Some elements of this job will not be duplicated.",
"existing_jobs": "Existing Jobs",

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

@@ -407,6 +407,7 @@
"local_tax": "",
"new": "",
"noneselected": "",
"retailtotal": "",
"state_tax": "",
"subtotal": ""
},
@@ -597,6 +598,7 @@
"vehicleinfo": ""
},
"creating_new_job": "Creando nuevo trabajo ...",
"difference": "",
"documents": "documentos",
"duplicateconfirm": "",
"existing_jobs": "Empleos existentes",

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

@@ -407,6 +407,7 @@
"local_tax": "",
"new": "",
"noneselected": "",
"retailtotal": "",
"state_tax": "",
"subtotal": ""
},
@@ -597,6 +598,7 @@
"vehicleinfo": ""
},
"creating_new_job": "Création d'un nouvel emploi ...",
"difference": "",
"documents": "Les documents",
"duplicateconfirm": "",
"existing_jobs": "Emplois existants",