Minor fixed + refactored job details screens based on review.
This commit is contained in:
Patrick Fic
@@ -1,4 +1,4 @@
|
||||
import { Statistic } from "antd";
|
||||
import { Statistic, Typography, Row, Col } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
@@ -13,6 +13,11 @@ const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const colSpan = {
|
||||
md: { span: 24 },
|
||||
lg: { span: 12 },
|
||||
};
|
||||
|
||||
export function JobsTotalsTableComponent({ bodyshop, job }) {
|
||||
const { t } = useTranslation();
|
||||
const [totals, setTotals] = useState(null);
|
||||
@@ -26,194 +31,251 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='job-totals-container'>
|
||||
<div className='job-totals-tables'>
|
||||
<table className='job-totals-rates-table'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("jobs.labels.rates")}</th>
|
||||
<th>$</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_laa")}</td>
|
||||
<td>{totals.rates.laa.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.laa.hours.toFixed(2)} @ ${
|
||||
totals.rates.laa.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lab")}</td>
|
||||
<td>{totals.rates.lab.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lab.hours.toFixed(2)} @ ${
|
||||
totals.rates.lab.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lad")}</td>
|
||||
<td>{totals.rates.lad.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lad.hours.toFixed(2)} @ ${
|
||||
totals.rates.lad.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lae")}</td>
|
||||
<td>{totals.rates.lae.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lae.hours.toFixed(2)} @ ${
|
||||
totals.rates.lae.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_laf")}</td>
|
||||
<td>{totals.rates.laf.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.laf.hours.toFixed(2)} @ ${
|
||||
totals.rates.laf.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lag")}</td>
|
||||
<td>{totals.rates.lag.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lag.hours.toFixed(2)} @ ${
|
||||
totals.rates.lag.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lam")}</td>
|
||||
<td>{totals.rates.lam.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lam.hours.toFixed(2)} @ ${
|
||||
totals.rates.lam.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lar")}</td>
|
||||
<td>{totals.rates.lar.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lar.hours.toFixed(2)} @ ${
|
||||
totals.rates.lar.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_las")}</td>
|
||||
<td>{totals.rates.las.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.las.hours.toFixed(2)} @ ${
|
||||
totals.rates.las.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lau")}</td>
|
||||
<td>{totals.rates.lau.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.lau.hours.toFixed(2)} @ ${
|
||||
totals.rates.lau.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la1")}</td>
|
||||
<td>{totals.rates.la1.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.la1.hours.toFixed(2)} @ ${
|
||||
totals.rates.la1.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la2")}</td>
|
||||
<td>{totals.rates.la2.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.la2.hours.toFixed(2)} @ ${
|
||||
totals.rates.la2.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la3")}</td>
|
||||
<td>{totals.rates.la3.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.la3.hours.toFixed(2)} @ ${
|
||||
totals.rates.la3.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la4")}</td>
|
||||
<td>{totals.rates.la4.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.la4.hours.toFixed(2)} @ ${
|
||||
totals.rates.la4.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_atp")}</td>
|
||||
<td>{totals.rates.atp.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.atp.hours.toFixed(2)} @ ${
|
||||
totals.rates.atp.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.mapa")}</td>
|
||||
<td>{totals.rates.mapa.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.mapa.hours.toFixed(2)} @ ${
|
||||
totals.rates.mapa.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.mash")}</td>
|
||||
<td>{totals.rates.mash.total.toFormat()}</td>
|
||||
<td>{`(${totals.rates.mash.hours.toFixed(2)} @ ${
|
||||
totals.rates.mash.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.rates_subtotal")}</td>
|
||||
<td>{totals.rates.subtotal.toFormat()}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table className='job-totals-parts-table'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.partstotal")}</td>
|
||||
<td>{totals.parts.parts.total.toFormat()}</td>
|
||||
<td>{`(${totals.parts.parts.subtotal.toFormat()} ± ${totals.parts.parts.adjustments.toFormat()})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.subletstotal")}</td>
|
||||
<td>{totals.parts.sublets.total.toFormat()}</td>
|
||||
<td>{`(${totals.parts.sublets.subtotal.toFormat()} ± ${totals.parts.sublets.adjustments.toFormat()})`}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
className='job-totals-stats'
|
||||
onClick={(e) => {
|
||||
if (e.detail === 3) {
|
||||
try {
|
||||
console.log("Job", job);
|
||||
} catch {
|
||||
console.log("Unable to show job.");
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<Statistic
|
||||
title={t("jobs.labels.subtotal")}
|
||||
value={totals.totals.subtotal.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.state_tax_amt")}
|
||||
value={totals.totals.state_tax.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.local_tax_amt")}
|
||||
value={totals.totals.local_tax.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.federal_tax_amt")}
|
||||
value={totals.totals.federal_tax.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.total_repairs")}
|
||||
value={totals.totals.total_repairs.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.net_repairs")}
|
||||
value={totals.totals.net_repairs.toFormat()}
|
||||
/>
|
||||
</div>
|
||||
<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">
|
||||
{totals.rates.laa.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.laa.hours.toFixed(2)} @ ${
|
||||
totals.rates.laa.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lab")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lab.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lab.hours.toFixed(2)} @ ${
|
||||
totals.rates.lab.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lad")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lad.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lad.hours.toFixed(2)} @ ${
|
||||
totals.rates.lad.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lae")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lae.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lae.hours.toFixed(2)} @ ${
|
||||
totals.rates.lae.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_laf")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.laf.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.laf.hours.toFixed(2)} @ ${
|
||||
totals.rates.laf.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lag")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lag.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lag.hours.toFixed(2)} @ ${
|
||||
totals.rates.lag.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lam")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lam.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lam.hours.toFixed(2)} @ ${
|
||||
totals.rates.lam.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lar")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lar.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lar.hours.toFixed(2)} @ ${
|
||||
totals.rates.lar.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_las")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.las.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.las.hours.toFixed(2)} @ ${
|
||||
totals.rates.las.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_lau")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.lau.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.lau.hours.toFixed(2)} @ ${
|
||||
totals.rates.lau.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la1")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.la1.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.la1.hours.toFixed(2)} @ ${
|
||||
totals.rates.la1.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la2")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.la2.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.la2.hours.toFixed(2)} @ ${
|
||||
totals.rates.la2.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la3")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.la3.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.la3.hours.toFixed(2)} @ ${
|
||||
totals.rates.la3.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_la4")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.la4.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.la4.hours.toFixed(2)} @ ${
|
||||
totals.rates.la4.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.fields.rate_atp")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.atp.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.atp.hours.toFixed(2)} @ ${
|
||||
totals.rates.atp.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>{t("jobs.labels.rates_subtotal")}</td>
|
||||
<td>{totals.rates.subtotal.toFormat()}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<div className="job-totals-half">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.partstotal")}</td>
|
||||
<td className="currency">
|
||||
{totals.parts.parts.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.parts.parts.subtotal.toFormat()} ± ${totals.parts.parts.adjustments.toFormat()})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.subletstotal")}</td>
|
||||
<td className="currency">
|
||||
{totals.parts.sublets.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.parts.sublets.subtotal.toFormat()} ± ${totals.parts.sublets.adjustments.toFormat()})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.mapa")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.mapa.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.mapa.hours.toFixed(2)} @ ${
|
||||
totals.rates.mapa.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{t("jobs.labels.mash")}</td>
|
||||
<td className="currency">
|
||||
{totals.rates.mash.total.toFormat()}
|
||||
</td>
|
||||
<td>{`(${totals.rates.mash.hours.toFixed(2)} @ ${
|
||||
totals.rates.mash.rate
|
||||
})`}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
className="job-totals-stats"
|
||||
onClick={(e) => {
|
||||
if (e.detail === 3) {
|
||||
try {
|
||||
console.log("Job", job);
|
||||
} catch {
|
||||
console.log("Unable to show job.");
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Statistic
|
||||
title={t("jobs.labels.state_tax_amt")}
|
||||
value={totals.totals.state_tax.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.local_tax_amt")}
|
||||
value={totals.totals.local_tax.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.federal_tax_amt")}
|
||||
value={totals.totals.federal_tax.toFormat()}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="job-totals-stats"
|
||||
onClick={(e) => {
|
||||
if (e.detail === 3) {
|
||||
try {
|
||||
console.log("Job", job);
|
||||
} catch {
|
||||
console.log("Unable to show job.");
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Statistic
|
||||
title={t("jobs.labels.subtotal")}
|
||||
value={totals.totals.subtotal.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.total_repairs")}
|
||||
value={totals.totals.total_repairs.toFormat()}
|
||||
/>
|
||||
<Statistic
|
||||
title={t("jobs.labels.net_repairs")}
|
||||
value={totals.totals.net_repairs.toFormat()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,38 @@
|
||||
.job-totals-container {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
.job-totals-tables {
|
||||
.job-totals-half {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.job-totals-rates-table,
|
||||
.job-totals-parts-table {
|
||||
border: black;
|
||||
width: 100%;
|
||||
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 th,
|
||||
table td {
|
||||
padding: 0.625em;
|
||||
//text-align: center;
|
||||
}
|
||||
table td.currency {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.job-totals-stats {
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
.ant-statistic {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
width: 100%;
|
||||
//flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user