IO-306 Creation of dashboard.

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

@@ -1,19 +1,54 @@
 import React from "react";
-import { Card, Statistic } from "antd";
+import { Card, Space, Statistic } from "antd";
 import { useTranslation } from "react-i18next";
 import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
 
-export default function DashboardTotalProductionHours({ data, ...cardProps }) {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DashboardTotalProductionHours);
+
+export function DashboardTotalProductionHours({
+  bodyshop,
+  data,
+  ...cardProps
+}) {
   const { t } = useTranslation();
-  const aboveTargetHours = true;
+  if (!data) return null;
+  const hours = data.production_jobs.reduce(
+    (acc, val) => {
+      return {
+        body: acc.body + val.labhrs.aggregate.sum.mod_lb_hrs,
+        ref: acc.ref + val.larhrs.aggregate.sum.mod_lb_hrs,
+        total:
+          acc.total +
+          val.labhrs.aggregate.sum.mod_lb_hrs +
+          val.larhrs.aggregate.sum.mod_lb_hrs,
+      };
+    },
+    { body: 0, ref: 0, total: 0 }
+  );
+  const aboveTargetHours = hours.total >= bodyshop.prodtargethrs;
   return (
     <Card {...cardProps}>
-      <Statistic
-        title={t("dashboard.titles.productionhours")}
-        value={750}
-        prefix={aboveTargetHours ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
-        valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
-      />
+      <Space wrap style={{ flex: 1 }}>
+        <Statistic title={t("dashboard.labels.bodyhrs")} value={hours.body} />
+        <Statistic title={t("dashboard.labels.refhrs")} value={hours.ref} />
+        <Statistic
+          title={t("dashboard.labels.prodhrs")}
+          value={hours.total}
+          valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
+        />
+      </Space>
     </Card>
   );
 }
+
+export const DashboardTotalProductionHoursGql = ``;