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

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,6 +1,6 @@
 import Icon from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
-import { FaCheck, FaCheckDouble } from "react-icons/fa";
+import { MdDone, MdDoneAll } from "react-icons/md";
 import {
   AutoSizer,
   CellMeasurer,
@@ -38,8 +38,9 @@ export default function ChatMessageListComponent({ messages }) {
             style={style}
             className={`${
               messages[index].isoutbound ? "mine messages" : "yours messages"
-            }`}>
-            <div className='message msgmargin'>
+            }`}
+          >
+            <div className="message msgmargin">
               {MessageRender(messages[index])}
               {StatusRender(messages[index].status)}
             </div>
@@ -50,7 +51,7 @@ export default function ChatMessageListComponent({ messages }) {
   };
 
   return (
-    <div className='chat'>
+    <div className="chat">
       <AutoSizer>
         {({ height, width }) => (
           <List
@@ -73,12 +74,8 @@ export default function ChatMessageListComponent({ messages }) {
 const MessageRender = (message) => {
   if (message.image) {
     return (
-      <a href={message.image_path} target='__blank'>
-        <img
-          alt='Received'
-          className='message-img'
-          src={message.image_path}
-        />
+      <a href={message.image_path} target="__blank">
+        <img alt="Received" className="message-img" src={message.image_path} />
       </a>
     );
   } else {
@@ -89,9 +86,9 @@ const MessageRender = (message) => {
 const StatusRender = (status) => {
   switch (status) {
     case "sent":
-      return <Icon component={FaCheck} className='message-icon' />;
+      return <Icon component={MdDone} className="message-icon" />;
     case "delivered":
-      return <Icon component={FaCheckDouble} className='message-icon' />;
+      return <Icon component={MdDoneAll} className="message-icon" />;
     default:
       return null;
   }

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -36,7 +36,7 @@ export default function ProductionBoardCard(card) {
           <div className="imex-flex-row imex-flex-row__flex-space-around">
             <div className="mex-flex-row__margin">
               <div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
-              <div>{`R: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
+              <div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
             </div>
             <div className="mex-flex-row__margin">
               <div>{`B: ${

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -12,9 +12,9 @@ const mapStateToProps = createStructuredSelector({
 
 export function ProductionBoardKanbanContainer({ bodyshop }) {
   const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION, {
-    variables: {
-      statusList: bodyshop.md_ro_statuses.production_statuses || [],
-    },
+    // variables: {
+    //   statusList: bodyshop.md_ro_statuses.production_statuses || [],
+    // },
   });
 
   return (

client/src/components/production-list-table/production-list-table.container.jsx

@@ -15,9 +15,9 @@ export default connect(mapStateToProps, null)(ProductionListTableContainer);
 
 export function ProductionListTableContainer({ bodyshop }) {
   const { loading, data } = useSubscription(SUBSCRIPTION_JOBS_IN_PRODUCTION, {
-    variables: {
-      statusList: bodyshop.md_ro_statuses.production_statuses || [],
-    },
+    // variables: {
+    //   statusList: bodyshop.md_ro_statuses.production_statuses || [],
+    // },
   });
 
   const columnState = useState(

client/src/components/schedule-block-day/schedule-block-day.component.jsx

@@ -24,10 +24,7 @@ export function ScheduleBlockDay({ date, children, refetch, bodyshop }) {
   const handleMenu = async (e) => {
     e.domEvent.stopPropagation();
 
-
     if (e.key === "block") {
-  
-
       const blockAppt = {
         title: t("appointments.labels.blocked"),
         block: true,
@@ -38,7 +35,6 @@ export function ScheduleBlockDay({ date, children, refetch, bodyshop }) {
       };
       logImEXEvent("dashboard_change_layout");
 
-
       const result = await insertBlock({
         variables: { app: [blockAppt] },
       });
@@ -57,9 +53,7 @@ export function ScheduleBlockDay({ date, children, refetch, bodyshop }) {
 
   const menu = (
     <Menu onClick={handleMenu}>
-      <Menu.Item key='block'>{t("appointments.actions.block")}</Menu.Item>
-      <Menu.Item key='2'>2nd menu item</Menu.Item>
-      <Menu.Item key='3'>3rd menu item</Menu.Item>
+      <Menu.Item key="block">{t("appointments.actions.block")}</Menu.Item>
     </Menu>
   );
 

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;
+}

client/src/components/scoreboard-last-days/scoreboard-last-days.component.jsx

@@ -19,9 +19,7 @@ export function ScoreboardLastDays({ bodyshop, sbEntriesByDate }) {
 
   const ArrayOfDate = [];
   for (var i = lastNumberWorkingDays - 1; i >= 0; i--) {
-    ArrayOfDate.push(
-      moment().businessSubtract(i, "day").toISOString().substr(0, 10)
-    );
+    ArrayOfDate.push(moment().businessSubtract(i, "day").format("yyyy-MM-DD"));
   }
 
   return (