UI Fixes on Job list page. Refactored form row component. BOD-155

client/src/components/job-detail-cards/job-detail-cards.totals.component.jsx

@@ -1,17 +1,44 @@
+import { Statistic } from "antd";
+import Dinero from "dinero.js";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
 
 export default function JobDetailCardsTotalsComponent({ loading, data }) {
   const { t } = useTranslation();
+  let totals;
+
+  try {
+    totals = JSON.parse(data.job_totals);
+  } catch (error) {
+    console.log("Error in CardsTotal component", error);
+  }
 
   return (
     <CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}>
-      {data ? (
-        <span>
-            Totals stuff here.
-        </span>
-      ) : null}
+      {totals ? (
+        <div className='imex-flex-row'>
+          <Statistic
+            className='imex-flex-row__margin-large'
+            title={t("jobs.labels.total_repairs")}
+            value={Dinero(totals.totals.total_repairs).toFormat()}
+          />
+          <Statistic
+            className='imex-flex-row__margin-large'
+            title={t("jobs.fields.ded_amt")}
+            value={Dinero({
+              amount: Math.round((data.ded_amt || 0) * 100),
+            }).toFormat()}
+          />
+          <Statistic
+            className='imex-flex-row__margin-large'
+            title={t("jobs.labels.net_repairs")}
+            value={Dinero(totals.totals.net_repairs).toFormat()}
+          />
+        </div>
+      ) : (
+        t("jobs.errors.nofinancial")
+      )}
     </CardTemplate>
   );
 }