IO-306 Creation of dashboard.

client/src/components/dashboard-components/total-production-dollars/total-production-dollars.component.jsx

@@ -1,32 +1,25 @@
-import React from "react";
 import { Card, Statistic } from "antd";
+import Dinero from "dinero.js";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
 
 export default function DashboardTotalProductionDollars({
   data,
   ...cardProps
 }) {
   const { t } = useTranslation();
-  const aboveTargetProductionDollars = false;
+  if (!data) return null;
+
+  const dollars = data.production_jobs.reduce(
+    (acc, val) => acc.add(Dinero(val.job_totals.totals.subtotal)),
+    Dinero()
+  );
 
   return (
     <Card {...cardProps}>
       <Statistic
-        title={t("dashboard.titles.productiondollars")}
-        value={175000.0}
-        precision={2}
-        prefix={
-          <div>
-            {aboveTargetProductionDollars ? (
-              <ArrowUpOutlined />
-            ) : (
-              <ArrowDownOutlined />
-            )}
-            $
-          </div>
-        }
-        valueStyle={{ color: aboveTargetProductionDollars ? "green" : "red" }}
+        title={t("dashboard.labels.dollarsinproduction")}
+        value={dollars.toFormat()}
       />
     </Card>
   );