Added dashboard framework. Components are not yet created nor is the query finalized. BOD-79

Missed in previous commit. BOD-79

client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx

@@ -0,0 +1,82 @@
+import { Card } from "antd";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+    Area,
+    Bar,
+    CartesianGrid,
+    ComposedChart,
+    Legend,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis
+} from "recharts";
+import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
+
+export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
+  const { t } = useTranslation();
+
+  const jobsByDate = {
+    "2020-07-5": [{ clm_total: 1224 }],
+    "2020-07-8": [{ clm_total: 987 }, { clm_total: 8755 }],
+    "2020-07-12": [{ clm_total: 684 }, { clm_total: 12022 }],
+    "2020-07-21": [{ clm_total: 15000 }],
+    "2020-07-28": [{ clm_total: 122 }, { clm_total: 4522 }],
+  };
+
+  const listOfDays = Utils.ListOfDaysInCurrentMonth();
+
+  const chartData = listOfDays.reduce((acc, val) => {
+    //Sum up the current day.
+    let dailySales;
+    if (!!jobsByDate[val]) {
+      dailySales = jobsByDate[val].reduce((dayAcc, dayVal) => {
+        return dayAcc + dayVal.clm_total;
+      }, 0);
+    } else {
+      dailySales = 0;
+    }
+
+    const theValue = {
+      date: moment(val).format("D dd"),
+      dailySales,
+      accSales:
+        acc.length > 0 ? acc[acc.length - 1].accSales + dailySales : dailySales,
+    };
+
+    return [...acc, theValue];
+  }, []);
+
+  return (
+    <Card title={t("dashboard.titles.monthlyrevenuegraph")} {...cardProps}>
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart
+          data={chartData}
+          margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+        >
+          <CartesianGrid stroke="#f5f5f5" />
+          <XAxis dataKey="date" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Area
+            type="monotone"
+            name="Accumulated Sales"
+            dataKey="accSales"
+            fill="#8884d8"
+            stroke="#8884d8"
+          />
+          <Bar
+            name="Daily Sales"
+            dataKey="dailySales"
+            //stackId="day"
+            barSize={20}
+            fill="#413ea0"
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}

client/src/components/dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx

@@ -0,0 +1,30 @@
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import { Card, Statistic } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function DashboardProjectedMonthlySales({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const aboveTargetMonthlySales = false;
+
+  return (
+    <Card {...cardProps}>
+      <Statistic
+        title={t("dashboard.titles.projectedmonthlysales")}
+        value={222000.0}
+        precision={2}
+        prefix={
+          <div>
+            {aboveTargetMonthlySales ? (
+              <ArrowUpOutlined />
+            ) : (
+              <ArrowDownOutlined />
+            )}
+            $
+          </div>
+        }
+        valueStyle={{ color: aboveTargetMonthlySales ? "green" : "red" }}
+      />
+    </Card>
+  );
+}

client/src/components/dashboard-components/total-production-dollars/total-production-dollars.component.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Card, Statistic } from "antd";
+import { useTranslation } from "react-i18next";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+
+export default function DashboardTotalProductionDollars({
+  data,
+  ...cardProps
+}) {
+  const { t } = useTranslation();
+  const aboveTargetProductionDollars = false;
+
+  return (
+    <Card {...cardProps}>
+      <Statistic
+        title={t("dashboard.titles.productiondollars")}
+        value={175000.0}
+        precision={2}
+        prefix={
+          <div>
+            {aboveTargetProductionDollars ? (
+              <ArrowUpOutlined />
+            ) : (
+              <ArrowDownOutlined />
+            )}
+            $
+          </div>
+        }
+        valueStyle={{ color: aboveTargetProductionDollars ? "green" : "red" }}
+      />
+    </Card>
+  );
+}

client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Card, Statistic } from "antd";
+import { useTranslation } from "react-i18next";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+
+export default function DashboardTotalProductionHours({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const aboveTargetHours = true;
+  return (
+    <Card {...cardProps}>
+      <Statistic
+        title={t("dashboard.titles.productionhours")}
+        value={750}
+        prefix={aboveTargetHours ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
+        valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
+      />
+    </Card>
+  );
+}