Added ATS Info to Calendar IO-711

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

@@ -1,6 +1,8 @@
 import Icon from "@ant-design/icons";
 import { Popover } from "antd";
-import React from "react";
+import _ from "lodash";
+import moment from "moment";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
@@ -15,8 +17,6 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
-import moment from "moment";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   load: selectScheduleLoad,
@@ -32,8 +32,17 @@ export function ScheduleCalendarHeaderComponent({
   date,
   load,
   calculating,
+  events,
   ...otherProps
 }) {
+  const ATSToday = useMemo(() => {
+    if (!events) return [];
+    return _.groupBy(
+      events.filter((e) => moment(date).isSame(moment(e.start), "day")),
+      "job.alt_transport"
+    );
+  }, [events, date]);
+
   const { t } = useTranslation();
   const loadData = load[date.toISOString().substr(0, 10)];
 
@@ -102,26 +111,37 @@ export function ScheduleCalendarHeaderComponent({
   );
 
   const LoadComponent = loadData ? (
-    <div className="imex-flex-row imex-flex-row__flex-space-around">
-      <Popover
-        placement={"bottom"}
-        content={jobsInPopup}
-        trigger="hover"
-        title={t("appointments.labels.arrivingjobs")}
-      >
-        <Icon component={MdFileDownload} style={{ color: "green" }} />
-        {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
-      </Popover>
-      <Popover
-        placement={"bottom"}
-        content={jobsOutPopup}
-        trigger="hover"
-        title={t("appointments.labels.completingjobs")}
-      >
-        <Icon component={MdFileUpload} style={{ color: "red" }} />
-        {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
-      </Popover>
-      <ScheduleCalendarHeaderGraph loadData={loadData} />
+    <div>
+      <div className="imex-flex-row imex-flex-row__flex-space-around">
+        <Popover
+          placement={"bottom"}
+          content={jobsInPopup}
+          trigger="hover"
+          title={t("appointments.labels.arrivingjobs")}
+        >
+          <Icon component={MdFileDownload} style={{ color: "green" }} />
+          {(loadData.hoursIn || 0) && loadData.hoursIn.toFixed(2)}
+        </Popover>
+        <Popover
+          placement={"bottom"}
+          content={jobsOutPopup}
+          trigger="hover"
+          title={t("appointments.labels.completingjobs")}
+        >
+          <Icon component={MdFileUpload} style={{ color: "red" }} />
+          {(loadData.hoursOut || 0) && loadData.hoursOut.toFixed(2)}
+        </Popover>
+        <ScheduleCalendarHeaderGraph loadData={loadData} />
+      </div>
+      <div>
+        <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
+          {Object.keys(ATSToday).map((key, idx) => (
+            <li key={idx}>{`${key === "null" ? "N/A" : key}: ${
+              ATSToday[key].length
+            }`}</li>
+          ))}
+        </ul>
+      </div>
     </div>
   ) : null;