bodyshop/client/src/components/job-totals-table/job-totals-table.component.jsx

import { Col, Result, Row, Statistic, Typography } from "antd";
import Dinero from "dinero.js";
import { JsonEditor as Editor } from "jsoneditor-react";
import "jsoneditor-react/es/editor.min.css";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import JobCalculateTotals from "../job-calculate-totals/job-calculate-totals.component";
import "./job-totals-table.styles.scss";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});

const colSpan = {
  md: { span: 24 },
  lg: { span: 12 },
};

export function JobsTotalsTableComponent({ bodyshop, job }) {
  const { t } = useTranslation();

  if (!!!job.job_totals) {
    return (
      <Result
        title={t("jobs.errors.nofinancial")}
        extra={<JobCalculateTotals job={job} />}
      />
    );
  }

  return (
    <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.rates_subtotal")}</td>
                  <td>{Dinero(job.job_totals.rates.subtotal).toFormat()}</td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </Col>
        <Col {...colSpan}>
          <div className="job-totals-half">
            <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>
                      <td></td>
                    </tr>
                  )
                )}
                <tr>
                  <td>{t("jobs.labels.partstotal")}</td>
                  <td className="currency">
                    {Dinero(job.job_totals.parts.parts.total).toFormat()}
                  </td>
                  <td>{`(${Dinero(
                    job.job_totals.parts.parts.subtotal
                  ).toFormat()} ± ${Dinero(
                    job.job_totals.parts.parts.adjustments
                  ).toFormat()})`}</td>
                </tr>
                <tr>
                  <td>{t("jobs.labels.subletstotal")}</td>
                  <td className="currency">
                    {Dinero(job.job_totals.parts.sublets.total).toFormat()}
                  </td>
                  <td>{`(${Dinero(
                    job.job_totals.parts.sublets.subtotal
                  ).toFormat()} ± ${Dinero(
                    job.job_totals.parts.sublets.adjustments
                  ).toFormat()})`}</td>
                </tr>
                <tr>
                  <td>{t("jobs.labels.additionaltotal")}</td>
                  <td className="currency">
                    {Dinero(job.job_totals.additional).toFormat()}
                  </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>
              </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={Dinero(job.job_totals.totals.state_tax).toFormat()}
              />
              <Statistic
                title={t("jobs.labels.local_tax_amt")}
                value={Dinero(job.job_totals.totals.local_tax).toFormat()}
              />
              <Statistic
                title={t("jobs.labels.federal_tax_amt")}
                value={Dinero(job.job_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.fields.ded_amt")}
                value={Dinero(
                  job.job_totals.totals.custPayable.deductible
                ).toFormat()}
              />
              <Statistic
                title={t("jobs.fields.federal_tax_payable")}
                value={Dinero(
                  job.job_totals.totals.custPayable.federal_tax
                ).toFormat()}
              />
              <Statistic
                title={t("jobs.fields.other_amount_payable")}
                value={Dinero(
                  job.job_totals.totals.custPayable.other_customer_amount
                ).toFormat()}
              />
              <Statistic
                title={t("jobs.fields.depreciation_taxes")}
                value={Dinero(
                  job.job_totals.totals.custPayable.dep_taxes
                ).toFormat()}
              />
              <Statistic
                title={t("jobs.labels.total_cust_payable")}
                value={Dinero(
                  job.job_totals.totals.custPayable.total
                ).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={Dinero(job.job_totals.totals.subtotal).toFormat()}
              />
              <Statistic
                title={t("jobs.labels.total_repairs")}
                value={Dinero(job.job_totals.totals.total_repairs).toFormat()}
              />
              <Statistic
                title={t("jobs.labels.net_repairs")}
                value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
              />
            </div>
            <JobCalculateTotals job={job} />
            <Editor
              value={{ CIECA: job.cieca_ttl.data, ImEXCalc: job.job_totals }}
            />
          </div>
        </Col>
      </Row>
    </div>
  );
}
export default connect(mapStateToProps, null)(JobsTotalsTableComponent);