bodyshop/client/src/components/job-bills-total/job-bills-total.component.jsx

import { Card, Col, Row, Space, Statistic, Tooltip, Typography } from "antd";
import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import "./job-bills-total.styles.scss";

export default function JobBillsTotalComponent({
  loading,
  bills,
  partsOrders,
  jobTotals,
}) {
  const { t } = useTranslation();

  if (loading) return <LoadingSkeleton />;
  if (!!!jobTotals)
    return (
      <AlertComponent type="error" message={t("jobs.errors.nofinancial")} />
    );

  const totals = jobTotals;

  let billTotals = Dinero();
  let billCms = Dinero();
  let lbrAdjustments = Dinero();
  let totalReturns = Dinero();
  let totalReturnsMarkedNotReceived = Dinero();
  let totalReturnsMarkedReceived = Dinero();

  partsOrders.forEach((p) =>
    p.parts_order_lines.forEach((pol) => {
      if (p.return) {
        totalReturns = totalReturns.add(
          Dinero({
            amount: Math.round((pol.act_price || 0) * 100),
          }).multiply(pol.quantity)
        );

        if (pol.cm_received === null) {
          return; // Skip this calculation for bills posted prior to the CNR change.
        } else {
          if (pol.cm_received === false) {
            totalReturnsMarkedNotReceived = totalReturnsMarkedNotReceived.add(
              Dinero({
                amount: Math.round((pol.act_price || 0) * 100),
              }).multiply(pol.quantity)
            );
          } else {
            totalReturnsMarkedReceived = totalReturnsMarkedReceived.add(
              Dinero({
                amount: Math.round((pol.act_price || 0) * 100),
              }).multiply(pol.quantity)
            );
          }
        }
      }
    })
  );

  bills.forEach((i) =>
    i.billlines.forEach((il) => {
      if (!i.is_credit_memo) {
        billTotals = billTotals.add(
          Dinero({
            amount: Math.round((il.actual_price || 0) * 100),
          }).multiply(il.quantity)
        );
      } else {
        billCms = billCms.add(
          Dinero({
            amount: Math.round((il.actual_price || 0) * 100),
          }).multiply(il.quantity)
        );
      }
      if (il.deductedfromlbr) {
        lbrAdjustments = lbrAdjustments.add(
          Dinero({
            amount: Math.round((il.actual_price || 0) * 100),
          }).multiply(il.quantity)
        );
      }
    })
  );

  const totalPartsSublet = Dinero(totals.parts.parts.total)
    .add(Dinero(totals.parts.sublets.total))
    .add(Dinero(totals.additional.shipping))
    .add(Dinero(totals.additional.towing))
    .add(Dinero(totals.additional.additionalCosts));

  const discrepancy = totalPartsSublet.subtract(billTotals);

  const discrepWithLbrAdj = discrepancy.add(lbrAdjustments);

  const discrepWithCms = discrepWithLbrAdj.add(totalReturns);
  const calculatedCreditsNotReceived = totalReturns.subtract(billCms); //billCms is tracked as a negative number.

  return (
    <Row gutter={16}>
      <Col span={18}>
        <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
          <Space wrap size="large">
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.partstotal"),
                  }}
                />
              }
            >
              <Statistic
                title={t("jobs.labels.rosaletotal")}
                value={totalPartsSublet.toFormat()}
              />
            </Tooltip>
            <Typography.Title>-</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.billtotal"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.retailtotal")}
                value={billTotals.toFormat()}
              />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.discrep1"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.discrepancy")}
                valueStyle={{
                  color: discrepancy.getAmount() === 0 ? "green" : "red",
                }}
                value={discrepancy.toFormat()}
              />
            </Tooltip>
            <Typography.Title>+</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.laboradj"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.dedfromlbr")}
                value={lbrAdjustments.toFormat()}
              />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.discrep2"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.discrepancy")}
                valueStyle={{
                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red",
                }}
                value={discrepWithLbrAdj.toFormat()}
              />
            </Tooltip>
            <Typography.Title>+</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.creditmemos"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.totalreturns")}
                value={totalReturns.toFormat()}
              />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.discrep3"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.discrepancy")}
                valueStyle={{
                  color: discrepWithCms.getAmount() === 0 ? "green" : "red",
                }}
                value={discrepWithCms.toFormat()}
              />
            </Tooltip>
          </Space>
        </Card>
      </Col>
      <Col span={6}>
        <Card title={t("jobs.labels.returntotals")} style={{ height: "100%" }}>
          <Space wrap>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.totalreturns"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.totalreturns")}
                value={totalReturns.toFormat()}
              />
            </Tooltip>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t(
                      "jobs.labels.plitooltips.calculatedcreditsnotreceived"
                    ),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.calculatedcreditsnotreceived")}
                valueStyle={{
                  color:
                    calculatedCreditsNotReceived.getAmount() <= 0
                      ? "green"
                      : "red",
                }}
                value={
                  calculatedCreditsNotReceived.getAmount() >= 0
                    ? calculatedCreditsNotReceived.toFormat()
                    : Dinero().toFormat()
                }
              />
            </Tooltip>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.creditsnotreceived"),
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.creditsnotreceived")}
                valueStyle={{
                  color:
                    totalReturnsMarkedNotReceived.getAmount() <= 0
                      ? "green"
                      : "red",
                }}
                value={
                  totalReturnsMarkedNotReceived.getAmount() >= 0
                    ? totalReturnsMarkedNotReceived.toFormat()
                    : Dinero().toFormat()
                }
              />
            </Tooltip>
          </Space>
        </Card>
      </Col>
    </Row>
  );
}