44 lines
1.6 KiB
JavaScript
44 lines
1.6 KiB
JavaScript
import { useQuery } from "@apollo/client/react";
|
|
import { Statistic } from "antd";
|
|
import Dinero from "dinero.js";
|
|
import { useTranslation } from "react-i18next";
|
|
import { QUERY_JOB_PAYMENT_TOTALS } from "../../graphql/payments.queries";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
|
|
export default function PaymentFormTotalPayments({ jobid }) {
|
|
const { t } = useTranslation();
|
|
|
|
const { loading, error, data } = useQuery(QUERY_JOB_PAYMENT_TOTALS, {
|
|
variables: { id: jobid },
|
|
skip: !jobid,
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only"
|
|
});
|
|
|
|
if (loading) return <LoadingSpinner />;
|
|
if (error) return <AlertComponent title={error.message} type="error" />;
|
|
|
|
if (!data) return <></>;
|
|
const totalPayments = data.jobs_by_pk.payments.reduce((acc, val) => {
|
|
return acc.add(Dinero({ amount: Math.round((val?.amount || 0) * 100) }));
|
|
}, Dinero());
|
|
|
|
const balance =
|
|
data.jobs_by_pk.job_totals && Dinero(data.jobs_by_pk.job_totals.totals.total_repairs).subtract(totalPayments);
|
|
|
|
return (
|
|
<div style={{ display: "flex", justifyContent: "space-evenly" }}>
|
|
<Statistic title={t("payments.labels.totalpayments")} value={totalPayments.toFormat()} />
|
|
{balance && (
|
|
<Statistic
|
|
title={t("payments.labels.balance")}
|
|
styles={{ content: { color: balance.getAmount() !== 0 ? "red" : "green" } }}
|
|
value={(balance && balance.toFormat()) || ""}
|
|
/>
|
|
)}
|
|
{!balance && <div>{t("jobs.errors.nofinancial")}</div>}
|
|
</div>
|
|
);
|
|
}
|