IO-306 Further development of dashboard.

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,6 +1,8 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
+import _ from "lodash";
+import moment from "moment";
 import React, { useState } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
@@ -14,10 +16,15 @@ import {
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
+import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component";
+import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component";
+import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component";
 import DashboardMonthlyRevenueGraph, {
   DashboardMonthlyRevenueGraphGql,
 } from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
-import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
+import DashboardProjectedMonthlySales, {
+  DashboardProjectedMonthlySalesGql,
+} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
 import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
 import DashboardTotalProductionHours, {
   DashboardTotalProductionHoursGql,
@@ -44,8 +51,9 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   const [state, setState] = useState({
     ...(bodyshop.associations[0].user.dashboardlayout
       ? bodyshop.associations[0].user.dashboardlayout
-      : { items: [], layout: [], layouts: [] }),
+      : { items: [], layout: {}, layouts: [] }),
   });
+
   const { loading, error, data, refetch } = useQuery(
     createDashboardQuery(state)
   );
@@ -74,7 +82,12 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   const handleRemoveComponent = (key) => {
     logImEXEvent("dashboard_remove_component", { name: key });
     const idxToRemove = state.items.findIndex((i) => i.i === key);
-    const items = state.items;
+    console.log(
+      "🚀  ~ file: dashboard-grid.component.jsx  ~ line 81  ~ idxToRemove",
+      idxToRemove
+    );
+    const items = _.cloneDeep(state.items);
+
     items.splice(idxToRemove, 1);
     setState({ ...state, items });
   };
@@ -88,7 +101,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         {
           i: e.key,
           x: (state.items.length * 2) % (state.cols || 12),
-          y: Infinity, // puts it at the bottom
+          y: 99, // puts it at the bottom
           w: componentList[e.key].w || 2,
           h: componentList[e.key].h || 2,
         },
@@ -100,11 +113,6 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
     () => GenerateDashboardData(data),
     [data]
   );
-
-  //   const onBreakpointChange = (breakpoint, cols) => {
-  //     setState({ ...state, breakpoint: breakpoint, cols: cols });
-  //   };
-
   const existingLayoutKeys = state.items.map((i) => i.i);
   const addComponentOverlay = (
     <Menu onClick={handleAddComponent}>
@@ -149,7 +157,14 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         {state.items.map((item, index) => {
           const TheComponent = componentList[item.i].component;
           return (
-            <div key={item.i} data-grid={item}>
+            <div
+              key={item.i}
+              data-grid={{
+                ...item,
+                minH: componentList[item.i].minH || 1,
+                minW: componentList[item.i].minW || 1,
+              }}
+            >
               <LoadingSkeleton loading={loading}>
                 <Icon
                   component={MdClose}
@@ -196,7 +211,7 @@ const componentList = {
   ProjectedMonthlySales: {
     label: "Projected Monthly Sales",
     component: DashboardProjectedMonthlySales,
-    gqlFragment: null,
+    gqlFragment: DashboardProjectedMonthlySalesGql,
     w: 2,
     h: 1,
   },
@@ -204,6 +219,35 @@ const componentList = {
     label: "Monthly Sales Graph",
     component: DashboardMonthlyRevenueGraph,
     gqlFragment: DashboardMonthlyRevenueGraphGql,
+    w: 4,
+    h: 2,
+    minW: 4,
+    minH: 2,
+  },
+  MonthlyJobCosting: {
+    label: "Monthly Job Costing",
+    component: DashboardMonthlyJobCosting,
+    gqlFragment: null,
+    minW: 6,
+    minH: 3,
+    w: 6,
+    h: 3,
+  },
+  MonthlyPartsSales: {
+    label: "Monthly Parts Sales",
+    component: DashboardMonthlyPartsSales,
+    gqlFragment: null,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2,
+  },
+  MonthlyLaborSales: {
+    label: "Monthly Parts Sales",
+    component: DashboardMonthlyLaborSales,
+    gqlFragment: null,
+    minW: 2,
+    minH: 2,
     w: 2,
     h: 2,
   },
@@ -216,6 +260,46 @@ const createDashboardQuery = (state) => {
   return gql`
     query QUERY_DASHBOARD_DETAILS {
          ${componentBasedAdditions}
+      monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
+        .startOf("month")
+        .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
+    .endOf("month")
+    .format("YYYY-MM-DD")}"}}]}) {
+    id
+    date_invoiced
+    job_totals
+          rate_la1
+      rate_la2
+      rate_la3
+      rate_la4
+      rate_laa
+      rate_lab
+      rate_lad
+      rate_lae
+      rate_laf
+      rate_lag
+      rate_lam
+      rate_lar
+      rate_las
+      rate_lau
+      rate_ma2s
+      rate_ma2t
+      rate_ma3s
+      rate_mabl
+      rate_macs
+      rate_mahw
+      rate_mapa
+      rate_mash
+      rate_matd
+    joblines(where: { removed: { _eq: false } }) {
+        id
+        mod_lbr_ty
+        mod_lb_hrs
+        act_price
+        part_qty
+        part_type
+    }
+  }
       production_jobs: jobs(where: { inproduction: { _eq: true } }) {
         id
         ro_number