Files
bodyshop/client/src/components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.component.jsx

92 lines
3.1 KiB
JavaScript

import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import AllocationButton from "../jobs-close-allocation-button/jobs-close-allocation-button.component";
import AllocationTags from "../jobs-close-allocation-tags/jobs-close-allocation-tags.component";
export default function JobCloseLabMatAllocation({
labmatAllocations,
setLabmatAllocations,
labMatTotalAllocation,
}) {
const { t } = useTranslation();
return (
<div style={{ display: "flex" }}>
<table>
<thead>
<tr>
<th>{t("jobs.labels.laborallocations")}</th>
<th>{t("jobs.labels.totals")}</th>
<th>{t("jobs.labels.available")}</th>
<th>{t("jobs.actions.allocate")}</th>
<th>{t("jobs.labels.allocations")}</th>
</tr>
</thead>
<tbody>
{Object.keys(labmatAllocations).map((alloc, idx) => {
if (!alloc.includes("subtotal"))
return (
<tr key={idx}>
<td>{t(`jobs.fields.${alloc}`)}</td>
<td>
{labmatAllocations[alloc].total &&
labmatAllocations[alloc].total.toFormat()}
</td>
<td>
{labmatAllocations[alloc].total
.subtract(
Dinero({
amount: labmatAllocations[alloc].allocations.reduce(
(acc, val) => {
return acc + val.amount.getAmount();
},
0
),
})
)
.toFormat()}
</td>
<td>
<AllocationButton
allocationKey={alloc}
remainingAmount={labmatAllocations[alloc].total
.subtract(
Dinero({
amount: labmatAllocations[alloc].allocations.reduce(
(acc, val) => {
return acc + val.amount.getAmount();
},
0
),
})
)
.getAmount()}
allocation={labmatAllocations[alloc]}
setAllocations={setLabmatAllocations}
/>
</td>
<td>
<AllocationTags
allocationKey={alloc}
allocation={labmatAllocations[alloc]}
setAllocations={setLabmatAllocations}
/>
</td>
</tr>
);
else return null;
})}
<tr>
<td></td>
<td>{labmatAllocations.subtotal.toFormat()}</td>
<td></td>
<td></td>
<td>{labMatTotalAllocation.toFormat()}</td>
</tr>
</tbody>
</table>
</div>
);
}