Labor allocation on job close BOD-131

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

@@ -1,35 +1,101 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import AllocationButton from "./jobs-close-labmat-allocation.button.component";
+import Dinero from "dinero.js";
+import AllocationTags from "./jobs-close-labmat-allocation.allocation-tags.component";
+import { List } from "antd";
 
 export default function JobCloseLabMatAllocation({
   labmatAllocations,
   setLabmatAllocations,
 }) {
-  console.log(
-    "JobCloseLabMatAllocation -> labmatAllocations",
-    labmatAllocations
-  );
+  const { t } = useTranslation();
+
+  const allocatedTotalsArray = Object.keys(labmatAllocations)
+    .filter((i) => !i.includes("subtotal"))
+    .map((i) => labmatAllocations[i].allocations)
+    .flat();
+
+  const allocatedTotal = Dinero({
+    amount: allocatedTotalsArray.reduce((acc, val) => {
+      console.log("acc", acc);
+      return (acc = acc + val.amount.getAmount());
+    }, 0),
+  });
+
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       <table>
         <thead>
           <tr>
-            <th>Rate</th>
-            <th>Available</th>
+            <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) => (
-            <tr>
-              <td>{alloc}</td>
-              <td>
-                {
-                  //labmatAllocations[alloc].total.toFormat()
-                }
-              </td>
-            </tr>
-          ))}
+          {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
+                      labmatAllocationKey={alloc}
+                      labmatAllocation={labmatAllocations[alloc]}
+                      setLabmatAllocations={setLabmatAllocations}
+                    />
+                  </td>
+                  <td>
+                    <AllocationTags
+                      labmatAllocationKey={alloc}
+                      labmatAllocation={labmatAllocations[alloc]}
+                      setLabmatAllocations={setLabmatAllocations}
+                    />
+                  </td>
+                </tr>
+              );
+            else return null;
+          })}
+          <tr>
+            <td></td>
+            <td>{labmatAllocations.subtotal.toFormat()}</td>
+            <td>{allocatedTotal.toFormat()}</td>
+            <td></td>
+            <td></td>
+          </tr>
         </tbody>
       </table>
+
+      <div>
+        <List>
+          {allocatedTotalsArray.map((i, idx) => (
+            <List.Item key={idx}>{`${
+              i.center
+            } ${i.amount.toFormat()}`}</List.Item>
+          ))}
+        </List>
+      </div>
     </div>
   );
 }