Fixed up job details lines table + jobs totals page.
This commit is contained in:
Patrick Fic
@@ -6,6 +6,8 @@ import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
||||
import { CalculateJob } from "./job-totals.utility";
|
||||
import "./job-totals-table.styles.scss";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -23,231 +25,186 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
|
||||
console.log("Totals was falsey.");
|
||||
return <LoadingSkeleton />;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Descriptions
|
||||
bordered
|
||||
size="small"
|
||||
column={3}
|
||||
title={t("jobs.labels.rates")}
|
||||
>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_laa")}>
|
||||
<Statistic
|
||||
value={totals.rates.laa.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.laa.hours.toFixed(2)} @ ${
|
||||
totals.rates.laa.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lab")}>
|
||||
<Statistic
|
||||
value={totals.rates.lab.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lab.hours.toFixed(2)} @ ${
|
||||
totals.rates.lab.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lad")}>
|
||||
<Statistic
|
||||
value={totals.rates.lad.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lad.hours.toFixed(2)} @ ${
|
||||
totals.rates.lad.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lae")}>
|
||||
<Statistic
|
||||
value={totals.rates.lae.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lae.hours.toFixed(2)} @ ${
|
||||
totals.rates.lae.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_laf")}>
|
||||
<Statistic
|
||||
value={totals.rates.laf.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.laf.hours.toFixed(2)} @ ${
|
||||
totals.rates.laf.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lag")}>
|
||||
<Statistic
|
||||
value={totals.rates.lag.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lag.hours.toFixed(2)} @ ${
|
||||
totals.rates.lag.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lam")}>
|
||||
<Statistic
|
||||
value={totals.rates.lam.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lam.hours.toFixed(2)} @ ${
|
||||
totals.rates.lam.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lar")}>
|
||||
<Statistic
|
||||
value={totals.rates.lar.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lar.hours.toFixed(2)} @ ${
|
||||
totals.rates.lar.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_las")}>
|
||||
<Statistic
|
||||
value={totals.rates.las.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.las.hours.toFixed(2)} @ ${
|
||||
totals.rates.las.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_lau")}>
|
||||
<Statistic
|
||||
value={totals.rates.lau.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.lau.hours.toFixed(2)} @ ${
|
||||
totals.rates.lau.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_la1")}>
|
||||
<Statistic
|
||||
value={totals.rates.la1.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.la1.hours.toFixed(2)} @ ${
|
||||
totals.rates.la1.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_la2")}>
|
||||
<Statistic
|
||||
value={totals.rates.la2.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.la2.hours.toFixed(2)} @ ${
|
||||
totals.rates.la2.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_la3")}>
|
||||
<Statistic
|
||||
value={totals.rates.la3.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.la3.hours.toFixed(2)} @ ${
|
||||
totals.rates.la3.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_la4")}>
|
||||
<Statistic
|
||||
value={totals.rates.la4.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.la4.hours.toFixed(2)} @ ${
|
||||
totals.rates.la4.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.fields.rate_atp")}>
|
||||
<Statistic
|
||||
value={totals.rates.atp.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.atp.hours.toFixed(2)} @ ${
|
||||
totals.rates.atp.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.labels.mapa")}>
|
||||
<Statistic
|
||||
value={totals.rates.mapa.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.mapa.hours.toFixed(2)} @ ${
|
||||
totals.rates.mapa.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.labels.shop_mat")}>
|
||||
<Statistic
|
||||
value={totals.rates.mash.total.toFormat()}
|
||||
precision={2}
|
||||
suffix={`(${totals.rates.mash.hours.toFixed(2)} @ ${
|
||||
totals.rates.mash.rate
|
||||
})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item
|
||||
style={{ color: "red" }}
|
||||
label={t("jobs.labels.rates_subtotal")}
|
||||
>
|
||||
<Statistic value={totals.rates.subtotal.toFormat()} />
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<Descriptions
|
||||
bordered
|
||||
size="small"
|
||||
column={1}
|
||||
title={t("jobs.labels.partssubletstotal")}
|
||||
>
|
||||
<Descriptions.Item label={t("jobs.labels.partstotal")}>
|
||||
<Statistic
|
||||
value={totals.parts.parts.total.toFormat()}
|
||||
suffix={`(${totals.parts.parts.subtotal.toFormat()} ± ${totals.parts.parts.adjustments.toFormat()})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.labels.subletstotal")}>
|
||||
<Statistic
|
||||
value={totals.parts.sublets.total.toFormat()}
|
||||
suffix={`(${totals.parts.sublets.subtotal.toFormat()} ± ${totals.parts.sublets.adjustments.toFormat()})`}
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
|
||||
<Col span={8}>
|
||||
<Descriptions
|
||||
bordered
|
||||
size="small"
|
||||
column={1}
|
||||
title={t("jobs.labels.totals")}
|
||||
>
|
||||
<Descriptions.Item label={t("jobs.labels.subtotal")}>
|
||||
<Statistic value={totals.totals.subtotal.toFormat()} />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.labels.federal_tax_amt")}>
|
||||
<Statistic value={totals.totals.federal_tax.toFormat()} />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.labels.state_tax_amt")}>
|
||||
<Statistic value={totals.totals.state_tax.toFormat()} />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label={t("jobs.labels.local_tax_amt")}>
|
||||
<Statistic value={totals.totals.local_tax.toFormat()} />
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<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()}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
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'>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
.job-totals-container {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
.job-totals-tables {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.job-totals-rates-table,
|
||||
.job-totals-parts-table {
|
||||
border: black;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.job-totals-stats {
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
.ant-statistic {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user