BOD-84 Load calculates for this week. Bug exists going past current week.

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  selectScheduleLoad,
+  selectScheduleLoadCalculating,
+} from "../../redux/application/application.selectors";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import { Progress } from "antd";
+import { MdCallReceived, MdCallMissedOutgoing } from "react-icons/md";
+import Icon from "@ant-design/icons";
+const ShopTargetHrs = 100;
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  load: selectScheduleLoad,
+  calculating: selectScheduleLoadCalculating,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ScheduleCalendarHeaderComponent({
+  label,
+  date,
+  load,
+  calculating,
+  ...otherProps
+}) {
+  const loadData = load[date.toISOString().substr(0, 10)];
+
+  const LoadComponent = loadData ? (
+    <div>
+      <Progress
+        percent={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
+      />
+
+      <div>
+        <Icon component={MdCallReceived} />
+        {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
+        <Icon component={MdCallMissedOutgoing} />
+        {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <div>
+      {label}
+      {calculating || JSON.stringify(load) === "{}" ? (
+        <LoadingSkeleton />
+      ) : (
+        LoadComponent
+      )}
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleCalendarHeaderComponent);