Further UI Improvements
This commit is contained in:
Patrick Fic
@@ -1,5 +1,4 @@
|
||||
import { Col, Collapse, Result, Row, Typography } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import { Card, Col, Collapse, Result, Row } from "antd";
|
||||
//import { JsonEditor as Editor } from "jsoneditor-react";
|
||||
//import "jsoneditor-react/es/editor.min.css";
|
||||
import React from "react";
|
||||
@@ -7,14 +6,16 @@ import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectJobReadOnly } from "../../redux/application/application.selectors";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import JobCalculateTotals from "../job-calculate-totals/job-calculate-totals.component";
|
||||
import "./job-totals-table.styles.scss";
|
||||
import JobTotalsTableLabor from "./job-totals.table.labor.component";
|
||||
import JobTotalsTableOther from "./job-totals.table.other.component";
|
||||
import JobTotalsTableParts from "./job-totals.table.parts.component";
|
||||
import JobTotalsTableTotals from "./job-totals.table.totals.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
jobRO: selectJobReadOnly,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const colSpan = {
|
||||
@@ -22,15 +23,17 @@ const colSpan = {
|
||||
lg: { span: 12 },
|
||||
};
|
||||
|
||||
export function JobsTotalsTableComponent({ bodyshop, jobRO, job }) {
|
||||
export function JobsTotalsTableComponent({ jobRO, job }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!!!job.job_totals) {
|
||||
return (
|
||||
<Result
|
||||
title={t("jobs.errors.nofinancial")}
|
||||
extra={<JobCalculateTotals job={job} disabled={jobRO} />}
|
||||
/>
|
||||
<Card>
|
||||
<Result
|
||||
title={t("jobs.errors.nofinancial")}
|
||||
extra={<JobCalculateTotals job={job} disabled={jobRO} />}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -38,334 +41,50 @@ export function JobsTotalsTableComponent({ bodyshop, jobRO, job }) {
|
||||
<div>
|
||||
<Row gutter={[32, 32]}>
|
||||
<Col {...colSpan}>
|
||||
<div className="job-totals-half">
|
||||
<Typography.Title level={4}>
|
||||
{t("jobs.labels.labortotals")}
|
||||
</Typography.Title>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_laa")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.laa.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.laa.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.laa.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lab")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lab.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lab.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lab.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lad")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lad.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lad.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lad.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lae")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lae.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lae.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lae.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_laf")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.laf.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.laf.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.laf.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lag")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lag.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lag.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lag.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lam")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lam.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lam.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lam.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lar")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lar.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lar.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lar.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_las")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.las.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.las.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.las.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lau")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.lau.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.lau.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.lau.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la1")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.la1.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.la1.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.la1.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la2")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.la2.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.la2.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.la2.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la3")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.la3.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.la3.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.la3.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la4")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.la4.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.la4.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.la4.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.labor_rates_subtotal")}</td>
|
||||
<td className="currency">
|
||||
<strong>
|
||||
{Dinero(job.job_totals.rates.rates_subtotal).toFormat()}
|
||||
</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.mapa")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.mapa.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.mapa.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.mapa.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.mash")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.rates.mash.total).toFormat()}
|
||||
</td>
|
||||
<td>{`(${job.job_totals.rates.mash.hours.toFixed(2)} @ ${
|
||||
job.job_totals.rates.mash.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.rates_subtotal")}</td>
|
||||
|
||||
<td className="currency">
|
||||
<strong>
|
||||
{Dinero(job.job_totals.rates.subtotal).toFormat()}
|
||||
</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Card title={t("jobs.labels.labortotals")}>
|
||||
<JobTotalsTableLabor job={job} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<div className="job-totals-half">
|
||||
<Typography.Title level={4}>
|
||||
{t("jobs.labels.partstotal")}
|
||||
</Typography.Title>
|
||||
<table>
|
||||
<tbody>
|
||||
{Object.keys(job.job_totals.parts.parts.list).map(
|
||||
(key, idx) => (
|
||||
<tr key={idx}>
|
||||
<td>{t(`jobs.fields.${key.toLowerCase()}`)}</td>
|
||||
<td className="currency">
|
||||
{Dinero(
|
||||
job.job_totals.parts.parts.list[key].total
|
||||
).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
<tr>
|
||||
<td>{t("jobs.labels.partstotal")}</td>
|
||||
<td className="currency">
|
||||
<strong>
|
||||
{Dinero(job.job_totals.parts.parts.total).toFormat()}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Typography.Title level={4}>
|
||||
{t("jobs.labels.othertotal")}
|
||||
</Typography.Title>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.subletstotal")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.parts.sublets.total).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>{t("jobs.labels.additionaltotal")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.additional).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Typography.Title level={4}>
|
||||
{t("jobs.labels.jobtotals")}
|
||||
</Typography.Title>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.subtotal")}</td>
|
||||
<td className="currency">
|
||||
<strong>
|
||||
{Dinero(job.job_totals.totals.subtotal).toFormat()}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.local_tax_amt")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.totals.local_tax).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.state_tax_amt")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.totals.state_tax).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.federal_tax_amt")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.totals.federal_tax).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.ded_amt")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(
|
||||
job.job_totals.totals.custPayable.deductible
|
||||
).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.federal_tax_payable")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(
|
||||
job.job_totals.totals.custPayable.federal_tax
|
||||
).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.other_amount_payable")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(
|
||||
job.job_totals.totals.custPayable.other_customer_amount
|
||||
).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.depreciation_taxes")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(
|
||||
job.job_totals.totals.custPayable.dep_taxes
|
||||
).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.total_repairs")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.totals.total_repairs).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.total_cust_payable")}</td>
|
||||
<td className="currency">
|
||||
{Dinero(job.job_totals.totals.custPayable.total).toFormat()}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.net_repairs")}</td>
|
||||
<td className="currency">
|
||||
<strong>
|
||||
{Dinero(job.job_totals.totals.net_repairs).toFormat()}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<JobCalculateTotals job={job} disabled={jobRO} />
|
||||
<Collapse>
|
||||
<Collapse.Panel header="JSON Tree Totals">
|
||||
<div>
|
||||
<pre>
|
||||
{JSON.stringify(
|
||||
{
|
||||
CIECA: job.cieca_ttl && job.cieca_ttl.data,
|
||||
ImEXCalc: job.job_totals,
|
||||
},
|
||||
null,
|
||||
2
|
||||
)}
|
||||
</pre>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
<Row gutter={[0, 32]}>
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.partstotal")}>
|
||||
<JobTotalsTableParts job={job} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.othertotal")}>
|
||||
<JobTotalsTableOther job={job} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Card title={t("jobs.labels.jobtotals")}>
|
||||
<JobTotalsTableTotals job={job} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Card title="DEVELOPMENT USE ONLY">
|
||||
<JobCalculateTotals job={job} disabled={jobRO} />
|
||||
<Collapse>
|
||||
<Collapse.Panel header="JSON Tree Totals">
|
||||
<div>
|
||||
<pre>
|
||||
{JSON.stringify(
|
||||
{
|
||||
CIECA: job.cieca_ttl && job.cieca_ttl.data,
|
||||
CIECASTL: job.cieca_stl && job.cieca_stl.data,
|
||||
ImEXCalc: job.job_totals,
|
||||
},
|
||||
null,
|
||||
2
|
||||
)}
|
||||
</pre>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
.job-totals-half {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// .job-totals-half {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
|
||||
table {
|
||||
border: 1px solid #ccc;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 80%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
// table {
|
||||
// border: 1px solid #ccc;
|
||||
// border-collapse: collapse;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// width: 80%;
|
||||
// table-layout: fixed;
|
||||
// }
|
||||
|
||||
table tr {
|
||||
//background-color: #f8f8f8;
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.35em;
|
||||
}
|
||||
// table tr {
|
||||
// //background-color: #f8f8f8;
|
||||
// border: 1px solid #ddd;
|
||||
// padding: 0.35em;
|
||||
// }
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.625em;
|
||||
//text-align: center;
|
||||
}
|
||||
table td.currency {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
// table th,
|
||||
// table td {
|
||||
// padding: 0.625em;
|
||||
// //text-align: center;
|
||||
// }
|
||||
// table td.currency {
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
|
||||
.job-totals-stats {
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
//flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
// .job-totals-stats {
|
||||
// margin: 1rem;
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// //flex-direction: column;
|
||||
// justify-content: space-evenly;
|
||||
// }
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import { Table } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
|
||||
export default function JobTotalsTableLabor({ job }) {
|
||||
const { t } = useTranslation();
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {
|
||||
columnKey: "profitcenter_labor",
|
||||
field: "profitcenter_labor",
|
||||
order: "ascend",
|
||||
},
|
||||
filteredInfo: {},
|
||||
});
|
||||
|
||||
const data = useMemo(() => {
|
||||
return Object.keys(job.job_totals.rates)
|
||||
.filter(
|
||||
(key) =>
|
||||
key !== "mapa" &&
|
||||
key !== "mash" &&
|
||||
key !== "subtotal" &&
|
||||
key !== "rates_subtotal"
|
||||
)
|
||||
.map((key) => {
|
||||
return {
|
||||
id: key,
|
||||
...job.job_totals.rates[key],
|
||||
};
|
||||
});
|
||||
}, [job.job_totals.rates]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("joblines.fields.profitcenter_labor"),
|
||||
dataIndex: "profitcenter_labor",
|
||||
key: "profitcenter_labor",
|
||||
defaultSortOrder: "ascend",
|
||||
sorter: (a, b) =>
|
||||
alphaSort(
|
||||
t(`jobs.fields.rate_${a.id.toLowerCase()}`),
|
||||
t(`jobs.fields.rate_${b.id.toLowerCase()}`)
|
||||
),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "profitcenter_labor" &&
|
||||
state.sortedInfo.order,
|
||||
render: (text, record) =>
|
||||
t(`jobs.fields.rate_${record.id.toLowerCase()}`),
|
||||
},
|
||||
{
|
||||
title: t("jobs.labels.rates"),
|
||||
dataIndex: "rate",
|
||||
key: "rate",
|
||||
align: "right",
|
||||
sorter: (a, b) => a.rate - b.rate,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "rate" && state.sortedInfo.order,
|
||||
render: (text, record) => (
|
||||
<CurrencyFormatter>{record.rate}</CurrencyFormatter>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("joblines.fields.mod_lb_hrs"),
|
||||
dataIndex: "mod_lb_hrs",
|
||||
|
||||
key: "mod_lb_hrs",
|
||||
sorter: (a, b) => a.mod_lb_hrs - b.mod_lb_hrs,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order,
|
||||
|
||||
render: (text, record) => record.hours.toFixed(1),
|
||||
},
|
||||
{
|
||||
title: t("joblines.fields.total"),
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
align: "right",
|
||||
sorter: (a, b) => a.total.amount - b.total.amount,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
|
||||
|
||||
render: (text, record) => Dinero(record.total).toFormat(),
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
console.log("sorter :>> ", sorter);
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
onChange={handleTableChange}
|
||||
dataSource={data}
|
||||
scroll={{
|
||||
x: true,
|
||||
}}
|
||||
summary={() => (
|
||||
<>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>
|
||||
{t("jobs.labels.labor_rates_subtotal")}
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell />
|
||||
<Table.Summary.Cell />
|
||||
<Table.Summary.Cell>
|
||||
<strong>
|
||||
{Dinero(job.job_totals.rates.rates_subtotal).toFormat()}
|
||||
</strong>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>{t("jobs.labels.mapa")}</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
{job.job_totals.rates.mapa.rate}
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
{job.job_totals.rates.mapa.hours.toFixed(2)}
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
{Dinero(job.job_totals.rates.mapa.total).toFormat()}
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>{t("jobs.labels.mash")}</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
{job.job_totals.rates.mash.rate}
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
{job.job_totals.rates.mash.hours.toFixed(2)}
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell>
|
||||
{Dinero(job.job_totals.rates.mash.total).toFormat()}
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>
|
||||
{t("jobs.labels.labor_rates_subtotal")}
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell />
|
||||
<Table.Summary.Cell />
|
||||
<Table.Summary.Cell>
|
||||
<strong>
|
||||
{Dinero(job.job_totals.rates.rates_subtotal).toFormat()}
|
||||
</strong>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Table } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
|
||||
export default function JobTotalsTableOther({ job }) {
|
||||
const { t } = useTranslation();
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: {},
|
||||
});
|
||||
|
||||
const data = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: t("jobs.labels.subletstotal"),
|
||||
total: job.job_totals.parts.sublets.total,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.additionaltotal"),
|
||||
total: job.job_totals.additional,
|
||||
},
|
||||
];
|
||||
}, [job.job_totals, t]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
//title: t("joblines.fields.part_type"),
|
||||
dataIndex: "key",
|
||||
key: "key",
|
||||
sorter: (a, b) => alphaSort(a.key, b.key),
|
||||
sortOrder: state.sortedInfo.columnKey === "key" && state.sortedInfo.order,
|
||||
width: "0%",
|
||||
},
|
||||
{
|
||||
title: t("joblines.fields.total"),
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
sorter: (a, b) => a.total.amount - b.total.amount,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
|
||||
width: "20%",
|
||||
align: "right",
|
||||
render: (text, record) => Dinero(record.total).toFormat(),
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey="key"
|
||||
pagination={false}
|
||||
onChange={handleTableChange}
|
||||
dataSource={data}
|
||||
scroll={{
|
||||
x: true,
|
||||
}}
|
||||
summary={() => (
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>
|
||||
{t("jobs.labels.additionaltotal")}
|
||||
</Table.Summary.Cell>
|
||||
|
||||
<Table.Summary.Cell>
|
||||
<strong>
|
||||
{Dinero(job.job_totals.parts.parts.total).toFormat()}
|
||||
</strong>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Table } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
|
||||
export default function JobTotalsTableParts({ job }) {
|
||||
const { t } = useTranslation();
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: {},
|
||||
});
|
||||
|
||||
const data = useMemo(() => {
|
||||
return Object.keys(job.job_totals.parts.parts.list)
|
||||
.filter(
|
||||
(key) =>
|
||||
key !== "mapa" &&
|
||||
key !== "mash" &&
|
||||
key !== "subtotal" &&
|
||||
key !== "rates_subtotal"
|
||||
)
|
||||
.map((key) => {
|
||||
return {
|
||||
id: key,
|
||||
...job.job_totals.parts.parts.list[key],
|
||||
};
|
||||
});
|
||||
}, [job.job_totals.parts.parts.list]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("joblines.fields.part_type"),
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
sorter: (a, b) =>
|
||||
alphaSort(
|
||||
t(`jobs.fields.${a.id.toLowerCase()}`),
|
||||
t(`jobs.fields.${b.id.toLowerCase()}`)
|
||||
),
|
||||
width: "80%",
|
||||
sortOrder: state.sortedInfo.columnKey === "id" && state.sortedInfo.order,
|
||||
render: (text, record) => t(`jobs.fields.${record.id.toLowerCase()}`),
|
||||
},
|
||||
{
|
||||
title: t("joblines.fields.total"),
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
sorter: (a, b) => a.total.amount - b.total.amount,
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
|
||||
width: "20%",
|
||||
align: "right",
|
||||
render: (text, record) => Dinero(record.total).toFormat(),
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
onChange={handleTableChange}
|
||||
dataSource={data}
|
||||
scroll={{
|
||||
x: true,
|
||||
}}
|
||||
summary={() => (
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell>{t("jobs.labels.partstotal")}</Table.Summary.Cell>
|
||||
|
||||
<Table.Summary.Cell>
|
||||
<strong>
|
||||
{Dinero(job.job_totals.parts.parts.total).toFormat()}
|
||||
</strong>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { Table } from "antd";
|
||||
import Dinero from "dinero.js";
|
||||
import React, { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function JobTotalsTableTotals({ job }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const data = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: t("jobs.labels.subtotal"),
|
||||
total: job.job_totals.totals.subtotal,
|
||||
bold: true,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.local_tax_amt"),
|
||||
total: job.job_totals.totals.local_tax,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.state_tax_amt"),
|
||||
total: job.job_totals.totals.state_tax,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.federal_tax_amt"),
|
||||
total: job.job_totals.totals.federal_tax,
|
||||
},
|
||||
{
|
||||
key: t("jobs.fields.ded_amt"),
|
||||
total: job.job_totals.totals.custPayable.deductible,
|
||||
},
|
||||
{
|
||||
key: t("jobs.fields.federal_tax_payable"),
|
||||
total: job.job_totals.totals.custPayable.federal_tax,
|
||||
},
|
||||
{
|
||||
key: t("jobs.fields.other_amount_payable"),
|
||||
total: job.job_totals.totals.custPayable.other_customer_amount,
|
||||
},
|
||||
{
|
||||
key: t("jobs.fields.depreciation_taxes"),
|
||||
total: job.job_totals.totals.custPayable.dep_taxes,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.total_repairs"),
|
||||
total: job.job_totals.totals.total_repairs,
|
||||
bold: true,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.total_cust_payable"),
|
||||
total: job.job_totals.totals.custPayable.total,
|
||||
},
|
||||
{
|
||||
key: t("jobs.labels.net_repairs"),
|
||||
total: job.job_totals.totals.net_repairs,
|
||||
bold: true,
|
||||
},
|
||||
];
|
||||
}, [job.job_totals, t]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
//title: t("joblines.fields.part_type"),
|
||||
dataIndex: "key",
|
||||
key: "key",
|
||||
width: "80%",
|
||||
onCell: (record, rowIndex) => {
|
||||
return { style: { fontWeight: record.bold && "bold" } };
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("joblines.fields.total"),
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
align: "right",
|
||||
render: (text, record) => Dinero(record.total).toFormat(),
|
||||
width: "20%",
|
||||
onCell: (record, rowIndex) => {
|
||||
return { style: { fontWeight: record.bold && "bold" } };
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey="key"
|
||||
showHeader={false}
|
||||
pagination={false}
|
||||
dataSource={data}
|
||||
scroll={{
|
||||
x: true,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user