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

import React from "react";
import { useTranslation } from "react-i18next";
import Dinero from "dinero.js";
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 JobsClosePartsAllocation({
  partsAllocations,
  setPartsAllocations,
  partsAllocatedTotal,
  invoiced,
}) {
  const { t } = useTranslation();

  return (
    <div>
      {
        <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(partsAllocations).map((alloc, idx) => {
              return (
                <tr key={idx}>
                  <td>{t(`jobs.fields.${alloc.toLowerCase()}`)}</td>
                  <td>
                    {partsAllocations[alloc].total &&
                      Dinero(partsAllocations[alloc].total).toFormat()}
                  </td>
                  <td>
                    {Dinero(partsAllocations[alloc].total)
                      .subtract(
                        Dinero({
                          amount: partsAllocations[alloc].allocations.reduce(
                            (acc, val) => {
                              return acc + Dinero(val.amount).getAmount();
                            },
                            0
                          ),
                        })
                      )
                      .toFormat()}
                  </td>
                  <td>
                    <AllocationButton
                      allocationKey={alloc}
                      invoiced={invoiced}
                      remainingAmount={Dinero(partsAllocations[alloc].total)
                        .subtract(
                          Dinero({
                            amount: partsAllocations[alloc].allocations.reduce(
                              (acc, val) => {
                                return acc + Dinero(val.amount).getAmount();
                              },
                              0
                            ),
                          })
                        )
                        .getAmount()}
                      allocation={partsAllocations[alloc]}
                      setAllocations={setPartsAllocations}
                    />
                  </td>
                  <td>
                    <AllocationTags
                      invoiced={invoiced}
                      allocationKey={alloc}
                      allocation={partsAllocations[alloc]}
                      setAllocations={setPartsAllocations}
                    />
                  </td>
                </tr>
              );
            })}
            <tr>
              <td></td>
              <td>
                {Dinero({
                  amount: Object.keys(partsAllocations).reduce((acc, val) => {
                    return (acc =
                      acc + Dinero(partsAllocations[val].total).getAmount());
                  }, 0),
                }).toFormat()}
              </td>
              <td></td>
              <td></td>
              <td>{partsAllocatedTotal.toFormat()}</td>
            </tr>
          </tbody>
        </table>
      }
    </div>
  );
}