Added detail for departing jos ons chedule BOD-254

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

@@ -1,20 +1,23 @@
 import Icon from "@ant-design/icons";
-import { Statistic } from "antd";
+import { Popover, Statistic } from "antd";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { MdFileDownload, MdFileUpload } from "react-icons/md";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import {
   selectScheduleLoad,
   selectScheduleLoadCalculating,
 } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 
-const ShopTargetHrs = 100;
-
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
   load: selectScheduleLoad,
   calculating: selectScheduleLoadCalculating,
 });
@@ -24,6 +27,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ScheduleCalendarHeaderComponent({
+  bodyshop,
   label,
   refetch,
   date,
@@ -31,28 +35,70 @@ export function ScheduleCalendarHeaderComponent({
   calculating,
   ...otherProps
 }) {
+  const { t } = useTranslation();
   const loadData = load[date.toISOString().substr(0, 10)];
 
-  const LoadComponent = loadData ? (
-    <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",
-        }}
-      />
+  const popContent = () => (
+    <div onClick={(e) => e.stopPropagation()}>
+      <table>
+        <tbody>
+          {loadData && loadData.jobsOut ? (
+            loadData.jobsOut.map((j) => (
+              <tr key={j.id}>
+                <td>
+                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                </td>
+                <td>
+                  {`(${(
+                    j.labhrs.aggregate.sum.mod_lb_hrs +
+                    j.larhrs.aggregate.sum.mod_lb_hrs
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
+                </td>
+                <td>
+                  <DateTimeFormatter>
+                    {j.scheduled_completion}
+                  </DateTimeFormatter>
+                </td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td>{t("appointments.labels.nocompletingjobs")}</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
     </div>
+  );
+
+  const LoadComponent = loadData ? (
+    <Popover
+      placement={"bottom"}
+      content={popContent}
+      trigger="hover"
+      title={t("appointments.labels.completingjobs")}
+    >
+      <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) / bodyshop.prodtargethrs) * 100}
+          suffix={"%"}
+          precision={0}
+          valueStyle={{
+            color:
+              Math.abs(
+                100 -
+                  ((loadData.expectedLoad || 0) / bodyshop.prodtargethrs) * 100
+              ) <= 10
+                ? "green"
+                : "red",
+          }}
+        />
+      </div>
+    </Popover>
   ) : null;
 
   return (

client/src/components/shop-info/shop-info.component.jsx

@@ -153,6 +153,18 @@ export default function ShopInfoComponent({ form, saveLoading }) {
             >
               <InputNumber min={0} max={12} precision={0} />
             </Form.Item>
+            <Form.Item
+              label={t("bodyshop.fields.prodtargethrs")}
+              name={["prodtargethrs"]}
+              rules={[
+                {
+                  required: true,
+                  message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <InputNumber min={1} precision={1} />
+            </Form.Item>
             <Form.Item
               name={["md_referral_sources"]}
               label={t("bodyshop.fields.md_referral_sources")}