Fixed up scheduling logic using UTC dates instead of local dates. Updated scheduling header. Fixed month view not showing. BOD-179

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

@@ -6,8 +6,13 @@ import {
   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 { Progress, Statistic } from "antd";
+import {
+  MdCallReceived,
+  MdCallMissedOutgoing,
+  MdFileDownload,
+  MdFileUpload,
+} from "react-icons/md";
 import Icon from "@ant-design/icons";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 
@@ -34,18 +39,24 @@ export function ScheduleCalendarHeaderComponent({
   const loadData = load[date.toISOString().substr(0, 10)];
 
   const LoadComponent = loadData ? (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-      <Progress
-        style={{ display: "flex", alignItems: "center" }}
-        percent={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
+    <div className="imex-flex-row imex-flex-row__flex-space-around">
+      <Icon component={MdFileDownload} style={{ color: "green" }} />
+      {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
+      <Icon component={MdFileUpload} style={{ color: "red" }} />
+      {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
+      <Statistic
+        value={((loadData.expectedLoad || 0) / ShopTargetHrs) * 100}
+        suffix={"%"}
+        precision={0}
+        valueStyle={{
+          color:
+            Math.abs(
+              100 - ((loadData.expectedLoad || 0) / ShopTargetHrs) * 100
+            ) <= 10
+              ? "green"
+              : "red",
+        }}
       />
-
-      <div className="imex-flex-row imex-flex-row__flex-space-around">
-        <Icon component={MdCallReceived} />
-        {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
-        <Icon component={MdCallMissedOutgoing} />
-        {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
-      </div>
     </div>
   ) : null;
 
@@ -53,11 +64,7 @@ export function ScheduleCalendarHeaderComponent({
     <ScheduleBlockDay date={date} refetch={refetch}>
       <div>
         {label}
-        {calculating || JSON.stringify(load) === "{}" ? (
-          <LoadingSkeleton />
-        ) : (
-          LoadComponent
-        )}
+        {calculating ? <LoadingSkeleton /> : LoadComponent}
       </div>
     </ScheduleBlockDay>
   );

client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss

@@ -12,3 +12,11 @@
 .imex-event-block {
   background-color: rgba(212, 2, 2, 0.6);
 }
+
+.rbc-month-view {
+  height: 125rem;
+}
+
+.rbc-event.rbc-selected {
+  background-color: slategrey;
+}