Reconfigured smart scheduling to use buckets instead of load.

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

@@ -1,15 +1,18 @@
 import { Popover } from "antd";
-import React from "react";
+import React, { useMemo } from "react";
 import { connect } from "react-redux";
 import {
   PolarAngleAxis,
   PolarGrid,
   PolarRadiusAxis,
   Radar,
+  Legend,
   RadarChart,
+  Tooltip,
 } from "recharts";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { RadarChartOutlined } from "@ant-design/icons";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -21,44 +24,54 @@ const mapDispatchToProps = (dispatch) => ({
 export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
   const { ssbuckets } = bodyshop;
 
-  const data = Object.keys(loadData.expectedLoad).map((key) => {
-    const metadataBucket = ssbuckets.filter((b) => b.id === key)[0];
+  const data = useMemo(() => {
+    return Object.keys(loadData.expectedLoad).map((key) => {
+      const metadataBucket = ssbuckets.filter((b) => b.id === key)[0];
 
-    return {
-      bucket: loadData.expectedLoad[key].label,
-      current: loadData.expectedLoad[key].count,
-      target: metadataBucket && metadataBucket.target,
-    };
-  });
+      return {
+        bucket: loadData.expectedLoad[key].label,
+        current: loadData.expectedLoad[key].count,
+        target: metadataBucket && metadataBucket.target,
+      };
+    });
+  }, [loadData, ssbuckets]);
 
-//d  console.log("data", data);
   const popContent = (
     <div>
       <RadarChart
-        cx={300}
-        cy={250}
-        outerRadius={150}
-        width={600}
-        height={500}
+        // cx={300}
+        // cy={250}
+        // outerRadius={150}
+        width={800}
+        height={600}
         data={data}
       >
         <PolarGrid />
         <PolarAngleAxis dataKey="bucket" />
-        <PolarRadiusAxis />
+        <PolarRadiusAxis angle={90} />
+        <Radar
+          name="Ideal Load"
+          dataKey="target"
+          stroke="darkgreen"
+          fill="whitr"
+          fillOpacity={0}
+        />
         <Radar
           name="Current"
           dataKey="current"
-          stroke="#8884d8"
-          fill="#8884d8"
+          stroke="dodgerblue"
+          fill="dodgerblue"
           fillOpacity={0.6}
         />
+        <Tooltip />
+        <Legend />
       </RadarChart>
     </div>
   );
 
   return (
     <Popover trigger="hover" placement="bottom" content={popContent}>
-      G
+      <RadarChartOutlined />
     </Popover>
   );
 }

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -70,12 +70,20 @@ export function ScheduleCalendarWrapperComponent({
         search.view = view;
         history.push({ search: queryString.stringify(search) });
       }}
-      step={15}
+      step={30}
       timeslots={1}
       showMultiDayTimes
       localizer={localizer}
-      min={new Date("2020-01-01T06:00:00")} //TODO Read from business settings.
-      max={new Date("2020-01-01T20:00:00")}
+      min={
+        bodyshop.schedule_start_time
+          ? new Date(bodyshop.schedule_start_time)
+          : new Date("2020-01-01T06:00:00")
+      } //TODO Read from business settings.
+      max={
+        bodyshop.schedule_end_time
+          ? new Date(bodyshop.schedule_end_time)
+          : new Date("2020-01-01T20:00:00")
+      }
       eventPropGetter={handleEventPropStyles}
       components={{
         event: (e) => Event({ event: e.event, refetch: refetch }),

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

@@ -8,7 +8,7 @@ import AlertComponent from "../alert/alert.component";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import FormsFieldChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
-
+import moment from "moment";
 export default function ShopInfoContainer() {
   const [form] = Form.useForm();
   const { t } = useTranslation();
@@ -49,7 +49,17 @@ export default function ShopInfoContainer() {
       layout="vertical"
       autoComplete="new-password"
       onFinish={handleFinish}
-      initialValues={data ? data.bodyshops[0] : null}
+      initialValues={
+        data
+          ? {
+              ...data.bodyshops[0],
+              schedule_start_time: moment(
+                data.bodyshops[0].schedule_start_time
+              ),
+              schedule_end_time: moment(data.bodyshops[0].schedule_end_time),
+            }
+          : null
+      }
     >
       <FormsFieldChanged form={form} />
       <ShopInfoComponent form={form} saveLoading={saveLoading} />

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

@@ -1,5 +1,14 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Col, Form, Input, InputNumber, Row, Select } from "antd";
+import {
+  Button,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+  TimePicker,
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
@@ -11,6 +20,30 @@ export default function ShopInfoSchedulingComponent({ form }) {
 
   return (
     <div>
+      <Form.Item
+        label={t("bodyshop.fields.schedule_start_time")}
+        name={"schedule_start_time"}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <TimePicker showSecond={false} />
+      </Form.Item>
+      <Form.Item
+        label={t("bodyshop.fields.schedule_end_time")}
+        name={"schedule_end_time"}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <TimePicker showSecond={false} />
+      </Form.Item>
       <strong>{t("bodyshop.labels.orderstatuses")}</strong>
       <Row>
         <Col span={24}>