IO-1914 Update inventory insert queries.

client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx

@@ -0,0 +1,157 @@
+import { Card } from "antd";
+import moment from "moment";
+import React, { useMemo } from "react";
+import { connect } from "react-redux";
+import {
+  Area,
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
+import _ from "lodash";
+
+const graphProps = {
+  strokeWidth: 3,
+};
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScoreboardTicketsBar);
+
+export function ScoreboardTicketsBar({ start, end, timetickets, bodyshop }) {
+  console.log(
+    "🚀  ~ file: scoreboard-timetickets.bar.component.jsx  ~ line 39  ~ start, end,",
+    start,
+    end
+  );
+  const listOfBusDays = Utils.ListOfDaysInCurrentMonth();
+
+  const data = useMemo(() => {
+    const ticketsGroupedByDate = _.groupBy(timetickets, "date");
+
+    const listOfDays = Utils.ListDaysBetween({ start, end });
+    console.log(
+      "🚀  ~ file: scoreboard-timetickets.bar.component.jsx  ~ line 45  ~ listOfDays",
+      listOfDays
+    );
+
+    console.log(
+      "🚀  ~ file: scoreboard-timetickets.bar.component.jsx  ~ line 43  ~ groupedByDate",
+      ticketsGroupedByDate
+    );
+
+    const ret = [];
+    listOfDays.forEach((day) => {
+      const r = {
+        date: day,
+        total: 0,
+      };
+    });
+  }, [timetickets]);
+  //   const data = listOfBusDays.reduce((acc, val) => {
+  //     //Sum up the current day.
+
+  //     const groupedbyDate = _.groupBy(data, "date");
+  //     let dayhrs;
+  //     if (!!sbEntriesByDate[val]) {
+  //       dayhrs = sbEntriesByDate[val].reduce(
+  //         (dayAcc, dayVal) => {
+  //           return {
+  //             bodyhrs: dayAcc.bodyhrs + dayVal.bodyhrs,
+  //             painthrs: dayAcc.painthrs + dayVal.painthrs,
+  //           };
+  //         },
+  //         { bodyhrs: 0, painthrs: 0 }
+  //       );
+  //     } else {
+  //       dayhrs = {
+  //         bodyhrs: 0,
+  //         painthrs: 0,
+  //       };
+  //     }
+
+  //     const theValue = {
+  //       date: moment(val).format("D ddd"),
+  //       paintHrs: _.round(dayhrs.painthrs, 1),
+  //       bodyHrs: _.round(dayhrs.bodyhrs, 1),
+  //       accTargetHrs: _.round(
+  //         Utils.AsOfDateTargetHours(
+  //           bodyshop.scoreboard_target.dailyBodyTarget +
+  //             bodyshop.scoreboard_target.dailyPaintTarget,
+  //           val
+  //         ),
+  //         1
+  //       ),
+  //       accHrs: _.round(
+  //         acc.length > 0
+  //           ? acc[acc.length - 1].accHrs + dayhrs.painthrs + dayhrs.bodyhrs
+  //           : dayhrs.painthrs + dayhrs.bodyhrs,
+  //         1
+  //       ),
+  //     };
+
+  //     return [...acc, theValue];
+  //   }, []);
+
+  return (
+    <Card>
+      <ResponsiveContainer width="100%" height={475}>
+        <ComposedChart
+          data={data}
+          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+        >
+          <CartesianGrid stroke="#f5f5f5" />
+          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
+          <YAxis strokeWidth={graphProps.strokeWidth} />
+          <Tooltip />
+          <Legend />
+          <Area
+            type="monotone"
+            name="Accumulated Hours"
+            dataKey="accHrs"
+            fill="lightgreen"
+            stroke="green"
+          />
+          <Bar
+            name="Body Hours"
+            dataKey="bodyHrs"
+            stackId="day"
+            barSize={20}
+            fill="darkblue"
+          />
+          <Bar
+            name="Paint Hours"
+            dataKey="paintHrs"
+            stackId="day"
+            barSize={20}
+            fill="darkred"
+          />
+          <Line
+            name="Target Hours"
+            type="monotone"
+            dataKey="accTargetHrs"
+            stroke="#ff7300"
+            strokeWidth={graphProps.strokeWidth}
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}

client/src/components/scoreboard-timetickets/scoreboard-timetickets.component.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import queryString from "query-string";
+import moment from "moment";
+import { useQuery } from "@apollo/client";
+import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
+import AlertComponent from "../alert/alert.component";
+import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-selector/time-tickets-dates-selector.component";
+import ScoreboardTicketsBar from "./scoreboard-timetickets.bar.component";
+
+export default function ScoreboardTimeTickets() {
+  const searchParams = queryString.parse(useLocation().search);
+  const { start, end } = searchParams;
+  const startDate = start
+    ? moment(start)
+    : moment().startOf("week").subtract(7, "days");
+  const endDate = end ? moment(end) : moment().endOf("week");
+  const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {
+    variables: {
+      start: startDate,
+      end: endDate,
+    },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      <TimeTicketsDatesSelector />
+      <ScoreboardTicketsBar
+        start={startDate}
+        end={endDate}
+        timetickets={data ? data.timetickets : []}
+      />
+    </div>
+  );
+}
+
+//Include a filter by employee.
+
+//Hours produced today.
+//Hours produced in last 7 days
+//Hours produced for time period by day
+//Hours produced by employee by day for time period.