IO-306 Further development of dashboard.

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

@@ -1,30 +1,40 @@
-import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
 import { Card, Statistic } from "antd";
+import Dinero from "dinero.js";
+import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
-
+import DashboardRefreshRequired from "../refresh-required.component";
 export default function DashboardProjectedMonthlySales({ data, ...cardProps }) {
   const { t } = useTranslation();
-  const aboveTargetMonthlySales = false;
+  if (!data) return null;
+  if (!data.projected_monthly_sales)
+    return <DashboardRefreshRequired {...cardProps} />;
 
+  const dollars =
+    data.projected_monthly_sales &&
+    data.projected_monthly_sales.reduce(
+      (acc, val) => acc.add(Dinero(val.job_totals.totals.subtotal)),
+      Dinero()
+    );
   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 title={t("dashboard.titles.projectedmonthlysales")} {...cardProps}>
+      <Statistic value={dollars.toFormat()} />
     </Card>
   );
 }
+
+export const DashboardProjectedMonthlySalesGql = `
+    projected_monthly_sales: jobs(where: {_or: [{_and: [{date_invoiced: {_gte: "${moment()
+      .startOf("month")
+      .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}}]}, {_and: [{scheduled_completion: {_gte: "${moment()
+  .startOf("month")
+  .format("YYYY-MM-DD")}"}}, {scheduled_completion: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}}]}]}) {
+    id
+    date_invoiced
+    job_totals
+  }
+`;