Added payment list to jobs BOD-146
This commit is contained in:
Patrick Fic
@@ -1,130 +1,204 @@
|
||||
import { Col, Form, Input, Row } from "antd";
|
||||
import { Col, Form, Input, Row, Divider } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import JobTotalsTable from "../job-totals-table/job-totals-table.component";
|
||||
import FormRow from "../layout-form-row/layout-form-row.component";
|
||||
export default function JobsDetailFinancials({ job }) {
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import { DateTimeFormatter } from "../../utils/DateFormatter";
|
||||
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
|
||||
|
||||
export function JobsDetailFinancials({ job, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const colSpan = {
|
||||
sm: { span: 24 },
|
||||
lg: { span: 12 },
|
||||
};
|
||||
|
||||
return (
|
||||
<Row gutter={[32, 32]}>
|
||||
<Col span={12}>
|
||||
<FormRow header={t("jobs.forms.dedinfo")}>
|
||||
<Form.Item label={t("jobs.fields.ded_status")} name='ded_status'>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.ded_amt")} name='ded_amt'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</FormRow>
|
||||
<FormRow>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.depreciation_taxes")}
|
||||
name='depreciation_taxes'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.other_amount_payable")}
|
||||
name='other_amount_payable'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.towing_payable")}
|
||||
name='towing_payable'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.storage_payable")}
|
||||
name='storage_payable'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.federal_tax_payable")}
|
||||
name='federal_tax_payable'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.adjustment_bottom_line")}
|
||||
name='adjustment_bottom_line'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</FormRow>
|
||||
<FormRow header={t("jobs.forms.laborrates")}>
|
||||
<Form.Item label={t("jobs.fields.rate_laa")} name='rate_laa'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lab")} name='rate_lab'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lad")} name='rate_lad'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lae")} name='rate_lae'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lar")} name='rate_lar'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_las")} name='rate_las'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_laf")} name='rate_laf'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lam")} name='rate_lam'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lag")} name='rate_lag'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la1")} name='rate_la1'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la2")} name='rate_la2'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la3")} name='rate_la3'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la4")} name='rate_la4'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_atp")} name='rate_atp'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lau")} name='rate_lau'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mapa")} name='rate_mapa'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mash")} name='rate_mash'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mahw")} name='rate_mahw'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_ma2s")} name='rate_ma2s'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_ma3s")} name='rate_ma3s'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mabl")} name='rate_mabl'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_macs")} name='rate_macs'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_matd")} name='rate_matd'>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</FormRow>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<JobTotalsTable job={job} />
|
||||
</Col>
|
||||
</Row>
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<FormRow header={t("payments.labels.title")}>
|
||||
<table style={{ width: "100%" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("payments.fields.created_at")}</th>
|
||||
<th>{t("payments.fields.payer")}</th>
|
||||
<th>{t("payments.fields.amount")}</th>
|
||||
<th>{t("payments.fields.memo")}</th>
|
||||
<th>{t("payments.fields.transactionid")}</th>
|
||||
<th>{t("payments.fields.stripeid")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{job.payments.map((p, idx) => (
|
||||
<tr key={idx}>
|
||||
<td>
|
||||
<DateTimeFormatter>{p.created_at}</DateTimeFormatter>
|
||||
</td>
|
||||
<td>{p.payer}</td>
|
||||
<td>
|
||||
<CurrencyFormatter>{p.amount}</CurrencyFormatter>
|
||||
</td>
|
||||
<td>{p.memo}</td>
|
||||
<td>{p.transactionid}</td>
|
||||
<td>
|
||||
{p.stripeid ? (
|
||||
<a
|
||||
href={
|
||||
stripeTestEnv
|
||||
? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${p.stripeid}`
|
||||
: `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${p.stripeid}`
|
||||
}
|
||||
>
|
||||
{p.stripeid}
|
||||
</a>
|
||||
) : null}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</FormRow>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<Row gutter={[32, 32]}>
|
||||
<Col {...colSpan}>
|
||||
<FormRow header={t("jobs.forms.dedinfo")}>
|
||||
<Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</FormRow>
|
||||
<FormRow>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.depreciation_taxes")}
|
||||
name="depreciation_taxes"
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.other_amount_payable")}
|
||||
name="other_amount_payable"
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.towing_payable")}
|
||||
name="towing_payable"
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.storage_payable")}
|
||||
name="storage_payable"
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.federal_tax_payable")}
|
||||
name="federal_tax_payable"
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("jobs.fields.adjustment_bottom_line")}
|
||||
name="adjustment_bottom_line"
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</FormRow>
|
||||
<FormRow header={t("jobs.forms.laborrates")}>
|
||||
<Form.Item label={t("jobs.fields.rate_laa")} name="rate_laa">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lad")} name="rate_lad">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lae")} name="rate_lae">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lar")} name="rate_lar">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_las")} name="rate_las">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_laf")} name="rate_laf">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lam")} name="rate_lam">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lag")} name="rate_lag">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la1")} name="rate_la1">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la2")} name="rate_la2">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la3")} name="rate_la3">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_la4")} name="rate_la4">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_atp")} name="rate_atp">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_lau")} name="rate_lau">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mapa")} name="rate_mapa">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mash")} name="rate_mash">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mahw")} name="rate_mahw">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_ma2s")} name="rate_ma2s">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_ma3s")} name="rate_ma3s">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_mabl")} name="rate_mabl">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_macs")} name="rate_macs">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</FormRow>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<JobTotalsTable job={job} />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, null)(JobsDetailFinancials);
|
||||
|
||||
Reference in New Issue
Block a user