Added scoreboard initial design BOD-91

client/src/components/scoreboard-targets-table/scoreboard-targets-table.component.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import * as Util from "./scoreboard-targets-table.util";
+import { Row, Col, Card, Statistic } from "antd";
+import { CalendarOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+const rowGutter = [16, 16];
+const statSpans = { xs: 24, sm: 6 };
+
+export function ScoreboardTargetsTable({ bodyshop }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Row gutter={rowGutter}>
+        <Col xs={24} sm={{ offset: 0, span: 4 }} lg={{ offset: 5, span: 4 }}>
+          <Statistic
+            title={t("scoreboard.labels.workingdays")}
+            value={Util.CalculateWorkingDaysThisMonth()}
+            prefix={<CalendarOutlined />}
+          />
+        </Col>
+        <Col xs={24} sm={{ offset: 0, span: 20 }} lg={{ offset: 0, span: 13 }}>
+          <Row>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.dailytarget")}
+                value={bodyshop.scoreboard_target.dailyBodyTarget}
+                prefix="B"
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.weeklytarget")}
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.monthlytarget")}
+                value={Util.MonthlyTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                title={t("scoreboard.labels.asoftodaytarget")}
+                value={Util.AsOfTodayTargetHrs(
+                  bodyshop.scoreboard_target.dailyBodyTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col {...statSpans}>
+              <Statistic
+                value={bodyshop.scoreboard_target.dailyPaintTarget}
+                prefix="P"
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.WeeklyTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.MonthlyTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+            <Col {...statSpans}>
+              <Statistic
+                value={Util.AsOfTodayTargetHrs(
+                  bodyshop.scoreboard_target.dailyPaintTarget,
+                  bodyshop
+                )}
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScoreboardTargetsTable);

client/src/components/scoreboard-targets-table/scoreboard-targets-table.util.js

@@ -0,0 +1,50 @@
+import moment from "moment";
+import momentbd from "moment-business-days";
+
+moment.updateLocale("ca", {
+  workingWeekdays: [1, 2, 3, 4, 5],
+});
+
+export const CalculateWorkingDaysThisMonth = () => {
+  return moment().endOf("month").businessDaysIntoMonth();
+};
+
+export const CalculateWorkingDaysAsOfToday = () => {
+  return moment().businessDaysIntoMonth();
+};
+
+export const WeeklyTargetHrs = (dailyTargetHrs, bodyshop) => {
+  return dailyTargetHrs * 5;
+};
+
+export const MonthlyTargetHrs = (dailyTargetHrs, bodyshop) => {
+  return dailyTargetHrs * CalculateWorkingDaysThisMonth();
+};
+
+export const AsOfTodayTargetHrs = (dailyTargetHrs, bodyshop) => {
+  return dailyTargetHrs * CalculateWorkingDaysAsOfToday();
+};
+
+export const AsOfDateTargetHours = (dailyTargetHours, date) => {
+  return (
+    dailyTargetHours * moment().startOf("month").businessDiff(moment(date))
+  );
+};
+
+export const ListOfBusinessDaysInCurrentMonth = () => {
+  const momentListOfDays = moment().monthBusinessDays();
+
+  return momentListOfDays.map((i) => i.format("YYYY-MM-DD"));
+};
+
+export const ListOfDaysInCurrentMonth = () => {
+  const days = [];
+  const dateStart = moment().startOf("month");
+  const dateEnd = moment().endOf("month");
+  while (dateEnd.diff(dateStart, "days") > 0) {
+    days.push(dateStart.format("YYYY-MM-DD"));
+    dateStart.add(1, "days");
+  }
+  days.push(dateEnd.format("YYYY-MM-DD"));
+  return days;
+};