Files
bodyshop/client/src/components/job-reconciliation-totals/job-reconciliation-totals.component.jsx

82 lines
2.8 KiB
JavaScript

import { Button, Space, Statistic } from "antd";
import Dinero from "dinero.js";
import _ from "lodash";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { reconcileByAssocLine, reconcileByPrice } from "./job-reconciliation-totals.utility";
export default function JobReconciliationTotals({ billLines, jobLines, jobLineState, billLineState }) {
const [errors, setErrors] = useState([]);
const { t } = useTranslation();
const selectedBillLines = billLineState[0];
const selectedJobLines = jobLineState[0];
const totals = useMemo(() => {
const jlLookup = _.keyBy(selectedJobLines, (i) => i);
const billLookup = _.keyBy(selectedBillLines, (i) => i);
return {
joblinesTotal: jobLines
.filter((jl) => !!jlLookup[jl.id])
.reduce((acc, val) => {
return acc.add(Dinero({ amount: Math.round((val.act_price || 0) * 100) }).multiply(val.part_qty || 1));
}, Dinero()),
billLinesTotal: billLines
.filter((bl) => !!billLookup[bl.id])
.reduce((acc, val) => {
return acc.add(
Dinero({
amount: Math.round((val.actual_price || 0) * 100)
})
.multiply(val.quantity || 1)
.multiply(val.bill.is_credit_memo ? -1 : 1)
);
}, Dinero())
};
}, [billLines, jobLines, selectedBillLines, selectedJobLines]);
return (
<div style={{ display: "inline-block" }}>
<div>
<Space>
<Statistic title={t("jobs.labels.reconciliation.joblinestotal")} value={totals.joblinesTotal.toFormat()} />
<Statistic title={t("jobs.labels.reconciliation.billlinestotal")} value={totals.billLinesTotal.toFormat()} />
<Statistic
title={t("jobs.labels.reconciliation.discrepancy")}
value={totals.joblinesTotal.subtract(totals.billLinesTotal).toFormat()}
/>
</Space>
</div>
<div>
<Space orientation="horizontal">
<Button onClick={() => reconcileByAssocLine(jobLines, jobLineState, billLines, billLineState, setErrors)}>
{t("jobs.labels.reconciliation.byassoc")}
</Button>
<Button onClick={() => reconcileByPrice(jobLines, jobLineState, billLines, billLineState, setErrors)}>
{t("jobs.labels.reconciliation.byprice")}
</Button>
<Button
onClick={() => {
jobLineState[1]([]);
billLineState[1]([]);
setErrors([]);
}}
>
{t("jobs.labels.reconciliation.clear")}
</Button>
</Space>
</div>
{errors.length > 0 && (
<div>
{t("general.labels.errors")}
<ul>
{errors.map((error, idx) => (
<li key={idx}>{error}</li>
))}
</ul>
</div>
)}
</div>
);
}