- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,21 +1,19 @@
-import Icon, { SyncOutlined } from "@ant-design/icons";
-import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
+import Icon, {SyncOutlined} from "@ant-design/icons";
+import {gql, useMutation, useQuery} from "@apollo/client";
+import {Button, Dropdown, notification, Space} from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import i18next from "i18next";
 import _ from "lodash";
-import moment from "moment";
-import React, { useState } from "react";
-import { Responsive, WidthProvider } from "react-grid-layout";
-import { useTranslation } from "react-i18next";
-import { MdClose } from "react-icons/md";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
+import dayjs from "../../utils/day";
+import React, {useState} from "react";
+import {Responsive, WidthProvider} from "react-grid-layout";
+import {useTranslation} from "react-i18next";
+import {MdClose} from "react-icons/md";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {logImEXEvent} from "../../firebase/firebase.utils";
+import {UPDATE_DASHBOARD_LAYOUT} from "../../graphql/user.queries";
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import DashboardMonthlyEmployeeEfficiency, {
   DashboardMonthlyEmployeeEfficiencyGql,
@@ -29,7 +27,8 @@ import DashboardMonthlyRevenueGraph, {
 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 DashboardTotalProductionDollars
+  from "../dashboard-components/total-production-dollars/total-production-dollars.component";
 import DashboardTotalProductionHours, {
   DashboardTotalProductionHoursGql,
 } from "../dashboard-components/total-production-hours/total-production-hours.component";
@@ -44,343 +43,339 @@ import DashboardScheduledOutToday, {
   DashboardScheduledOutTodayGql,
 } from "../dashboard-components/scheduled-out-today/scheduled-out-today.component";
 import "./dashboard-grid.styles.scss";
-import { GenerateDashboardData } from "./dashboard-grid.utils";
+import {GenerateDashboardData} from "./dashboard-grid.utils";
 
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
+    currentUser: selectCurrentUser,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function DashboardGridComponent({ currentUser, bodyshop }) {
-  const { t } = useTranslation();
-  const [state, setState] = useState({
-    ...(bodyshop.associations[0].user.dashboardlayout
-      ? bodyshop.associations[0].user.dashboardlayout
-      : { items: [], layout: {}, layouts: [] }),
-  });
-
-  const { loading, error, data, refetch } = useQuery(
-    createDashboardQuery(state),
-    { fetchPolicy: "network-only", nextFetchPolicy: "network-only" }
-  );
-
-  const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
-
-  const handleLayoutChange = async (layout, layouts) => {
-    logImEXEvent("dashboard_change_layout");
-
-    setState({ ...state, layout, layouts });
-
-    const result = await updateLayout({
-      variables: {
-        email: currentUser.email,
-        layout: { ...state, layout, layouts },
-      },
+export function DashboardGridComponent({currentUser, bodyshop}) {
+    const {t} = useTranslation();
+    const [state, setState] = useState({
+        ...(bodyshop.associations[0].user.dashboardlayout
+            ? bodyshop.associations[0].user.dashboardlayout
+            : {items: [], layout: {}, layouts: []}),
     });
-    if (!!result.errors) {
-      notification["error"]({
-        message: t("dashboard.errors.updatinglayout", {
-          message: JSON.stringify(result.errors),
-        }),
-      });
-    }
-  };
-  const handleRemoveComponent = (key) => {
-    logImEXEvent("dashboard_remove_component", { name: key });
-    const idxToRemove = state.items.findIndex((i) => i.i === key);
 
-    const items = _.cloneDeep(state.items);
+    const {loading, error, data, refetch} = useQuery(
+        createDashboardQuery(state),
+        {fetchPolicy: "network-only", nextFetchPolicy: "network-only"}
+    );
 
-    items.splice(idxToRemove, 1);
-    setState({ ...state, items });
-  };
+    const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
 
-  const handleAddComponent = (e) => {
-    logImEXEvent("dashboard_add_component", { name: e });
-    setState({
-      ...state,
-      items: [
-        ...state.items,
-        {
-          i: e.key,
-          x: (state.items.length * 2) % (state.cols || 12),
-          y: 99, // puts it at the bottom
-          w: componentList[e.key].w || 2,
-          h: componentList[e.key].h || 2,
-        },
-      ],
-    });
-  };
+    const handleLayoutChange = async (layout, layouts) => {
+        logImEXEvent("dashboard_change_layout");
 
-  const dashboarddata = React.useMemo(
-    () => GenerateDashboardData(data),
-    [data]
-  );
-  const existingLayoutKeys = state.items.map((i) => i.i);
-  const addComponentOverlay = (
-    <Menu onClick={handleAddComponent}>
-      {Object.keys(componentList).map((key) => (
-        <Menu.Item
-          key={key}
-          value={key}
-          disabled={existingLayoutKeys.includes(key)}
-        >
-          {componentList[key].label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+        setState({...state, layout, layouts});
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
-
-  return (
-    <div>
-      <PageHeader
-        extra={
-          <Space>
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
-              <Button>{t("dashboard.actions.addcomponent")}</Button>
-            </Dropdown>
-          </Space>
+        const result = await updateLayout({
+            variables: {
+                email: currentUser.email,
+                layout: {...state, layout, layouts},
+            },
+        });
+        if (!!result.errors) {
+            notification["error"]({
+                message: t("dashboard.errors.updatinglayout", {
+                    message: JSON.stringify(result.errors),
+                }),
+            });
         }
-      />
+    };
+    const handleRemoveComponent = (key) => {
+        logImEXEvent("dashboard_remove_component", {name: key});
+        const idxToRemove = state.items.findIndex((i) => i.i === key);
 
-      <ResponsiveReactGridLayout
-        className="layout"
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
-        layouts={state.layouts}
-        onLayoutChange={handleLayoutChange}
-        //   onBreakpointChange={onBreakpointChange}
-      >
-        {state.items.map((item, index) => {
-          const TheComponent = componentList[item.i].component;
-          return (
-            <div
-              key={item.i}
-              data-grid={{
-                ...item,
-                minH: componentList[item.i].minH || 1,
-                minW: componentList[item.i].minW || 1,
-              }}
+        const items = _.cloneDeep(state.items);
+
+        items.splice(idxToRemove, 1);
+        setState({...state, items});
+    };
+
+    const handleAddComponent = (e) => {
+        logImEXEvent("dashboard_add_component", {name: e});
+        setState({
+            ...state,
+            items: [
+                ...state.items,
+                {
+                    i: e.key,
+                    x: (state.items.length * 2) % (state.cols || 12),
+                    y: 99, // puts it at the bottom
+                    w: componentList[e.key].w || 2,
+                    h: componentList[e.key].h || 2,
+                },
+            ],
+        });
+    };
+
+    const dashboarddata = React.useMemo(
+        () => GenerateDashboardData(data),
+        [data]
+    );
+    const existingLayoutKeys = state.items.map((i) => i.i);
+
+    const menuItems = Object.keys(componentList).map((key) => ({
+        key: key,
+        label: componentList[key].label,
+        value: key,
+        disabled: existingLayoutKeys.includes(key),
+    }));
+
+    const menu = {items: menuItems, onClick: handleAddComponent};
+
+    if (error) return <AlertComponent message={error.message} type="error"/>;
+
+    return (
+        <div>
+            <PageHeader
+                extra={
+                    <Space>
+                        <Button onClick={() => refetch()}>
+                            <SyncOutlined/>
+                        </Button>
+                        <Dropdown menu={menu} trigger={["click"]}>
+                            <Button>{t("dashboard.actions.addcomponent")}</Button>
+                        </Dropdown>
+                    </Space>
+                }
+            />
+
+            <ResponsiveReactGridLayout
+                className="layout"
+                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+                cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
+                width="100%"
+                layouts={state.layouts}
+                onLayoutChange={handleLayoutChange}
+                //   onBreakpointChange={onBreakpointChange}
             >
-              <LoadingSkeleton loading={loading}>
-                <Icon
-                  component={MdClose}
-                  key={item.i}
-                  style={{
-                    position: "absolute",
-                    zIndex: "2",
-                    right: ".25rem",
-                    top: ".25rem",
-                    cursor: "pointer",
-                  }}
-                  onClick={() => handleRemoveComponent(item.i)}
-                />
-                <TheComponent className="dashboard-card" data={dashboarddata} />
-              </LoadingSkeleton>
-            </div>
-          );
-        })}
-      </ResponsiveReactGridLayout>
-    </div>
-  );
+                {state.items.map((item, index) => {
+                    const TheComponent = componentList[item.i].component;
+                    return (
+                        <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}
+                                    key={item.i}
+                                    style={{
+                                        position: "absolute",
+                                        zIndex: "2",
+                                        right: ".25rem",
+                                        top: ".25rem",
+                                        cursor: "pointer",
+                                    }}
+                                    onClick={() => handleRemoveComponent(item.i)}
+                                />
+                                <TheComponent className="dashboard-card" data={dashboarddata}/>
+                            </LoadingSkeleton>
+                        </div>
+                    );
+                })}
+            </ResponsiveReactGridLayout>
+        </div>
+    );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(DashboardGridComponent);
 
 const componentList = {
-  ProductionDollars: {
-    label: i18next.t("dashboard.titles.productiondollars"),
-    component: DashboardTotalProductionDollars,
-    gqlFragment: null,
-    w: 1,
-    h: 1,
-    minW: 2,
-    minH: 1,
-  },
-  ProductionHours: {
-    label: i18next.t("dashboard.titles.productionhours"),
-    component: DashboardTotalProductionHours,
-    gqlFragment: DashboardTotalProductionHoursGql,
-    w: 3,
-    h: 1,
-    minW: 3,
-    minH: 1,
-  },
-  ProjectedMonthlySales: {
-    label: i18next.t("dashboard.titles.projectedmonthlysales"),
-    component: DashboardProjectedMonthlySales,
-    gqlFragment: DashboardProjectedMonthlySalesGql,
-    w: 2,
-    h: 1,
-    minW: 2,
-    minH: 1,
-  },
-  MonthlyRevenueGraph: {
-    label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
-    component: DashboardMonthlyRevenueGraph,
-    gqlFragment: DashboardMonthlyRevenueGraphGql,
-    w: 4,
-    h: 2,
-    minW: 4,
-    minH: 2,
-  },
-  MonthlyJobCosting: {
-    label: i18next.t("dashboard.titles.monthlyjobcosting"),
-    component: DashboardMonthlyJobCosting,
-    gqlFragment: null,
-    minW: 6,
-    minH: 3,
-    w: 6,
-    h: 3,
-  },
-  MonthlyPartsSales: {
-    label: i18next.t("dashboard.titles.monthlypartssales"),
-    component: DashboardMonthlyPartsSales,
-    gqlFragment: null,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2,
-  },
-  MonthlyLaborSales: {
-    label: i18next.t("dashboard.titles.monthlylaborsales"),
-    component: DashboardMonthlyLaborSales,
-    gqlFragment: null,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2,
-  },
-  MonthlyEmployeeEfficency: {
-    label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
-    component: DashboardMonthlyEmployeeEfficiency,
-    gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
-    minW: 2,
-    minH: 2,
-    w: 2,
-    h: 2,
-  },
-  ScheduleInToday: {
-    label: i18next.t("dashboard.titles.scheduledintoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
-    }),
-    component: DashboardScheduledInToday,
-    gqlFragment: DashboardScheduledInTodayGql,
-    minW: 10,
-    minH: 2,
-    w: 10,
-    h: 2,
-  },
-  ScheduleOutToday: {
-    label: i18next.t("dashboard.titles.scheduledouttoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
-    }),
-    component: DashboardScheduledOutToday,
-    gqlFragment: DashboardScheduledOutTodayGql,
-    minW: 10,
-    minH: 2,
-    w: 10,
-    h: 2,
-  },
+    ProductionDollars: {
+        label: i18next.t("dashboard.titles.productiondollars"),
+        component: DashboardTotalProductionDollars,
+        gqlFragment: null,
+        w: 1,
+        h: 1,
+        minW: 2,
+        minH: 1,
+    },
+    ProductionHours: {
+        label: i18next.t("dashboard.titles.productionhours"),
+        component: DashboardTotalProductionHours,
+        gqlFragment: DashboardTotalProductionHoursGql,
+        w: 3,
+        h: 1,
+        minW: 3,
+        minH: 1,
+    },
+    ProjectedMonthlySales: {
+        label: i18next.t("dashboard.titles.projectedmonthlysales"),
+        component: DashboardProjectedMonthlySales,
+        gqlFragment: DashboardProjectedMonthlySalesGql,
+        w: 2,
+        h: 1,
+        minW: 2,
+        minH: 1,
+    },
+    MonthlyRevenueGraph: {
+        label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
+        component: DashboardMonthlyRevenueGraph,
+        gqlFragment: DashboardMonthlyRevenueGraphGql,
+        w: 4,
+        h: 2,
+        minW: 4,
+        minH: 2,
+    },
+    MonthlyJobCosting: {
+        label: i18next.t("dashboard.titles.monthlyjobcosting"),
+        component: DashboardMonthlyJobCosting,
+        gqlFragment: null,
+        minW: 6,
+        minH: 3,
+        w: 6,
+        h: 3,
+    },
+    MonthlyPartsSales: {
+        label: i18next.t("dashboard.titles.monthlypartssales"),
+        component: DashboardMonthlyPartsSales,
+        gqlFragment: null,
+        minW: 2,
+        minH: 2,
+        w: 2,
+        h: 2,
+    },
+    MonthlyLaborSales: {
+        label: i18next.t("dashboard.titles.monthlylaborsales"),
+        component: DashboardMonthlyLaborSales,
+        gqlFragment: null,
+        minW: 2,
+        minH: 2,
+        w: 2,
+        h: 2,
+    },
+    MonthlyEmployeeEfficency: {
+        label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
+        component: DashboardMonthlyEmployeeEfficiency,
+        gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
+        minW: 2,
+        minH: 2,
+        w: 2,
+        h: 2,
+    },
+    ScheduleInToday: {
+        label: i18next.t("dashboard.titles.scheduledintoday", {
+            date: dayjs().startOf("day").format("MM/DD/YYYY"),
+        }),
+        component: DashboardScheduledInToday,
+        gqlFragment: DashboardScheduledInTodayGql,
+        minW: 10,
+        minH: 2,
+        w: 10,
+        h: 2,
+    },
+    ScheduleOutToday: {
+        label: i18next.t("dashboard.titles.scheduledouttoday", {
+            date: dayjs().startOf("day").format("MM/DD/YYYY"),
+        }),
+        component: DashboardScheduledOutToday,
+        gqlFragment: DashboardScheduledOutTodayGql,
+        minW: 10,
+        minH: 2,
+        w: 10,
+        h: 2,
+    },
 };
 
 const createDashboardQuery = (state) => {
-  const componentBasedAdditions =
-    state &&
-    Array.isArray(state.layout) &&
-    state.layout
-      .map((item, index) => componentList[item.i].gqlFragment || "")
-      .join("");
-  return gql`
-    query QUERY_DASHBOARD_DETAILS {
-         ${componentBasedAdditions || ""}
-      monthly_sales: jobs(where: {_and: [
-        { voided: {_eq: false}},
-        {date_invoiced: {_gte: "${moment()
+    const componentBasedAdditions =
+        state &&
+        Array.isArray(state.layout) &&
+        state.layout
+            .map((item, index) => componentList[item.i].gqlFragment || "")
+            .join("");
+    return gql`
+        query QUERY_DASHBOARD_DETAILS {
+            ${componentBasedAdditions || ""}
+            monthly_sales: jobs(where: {_and: [
+                { voided: {_eq: false}},
+                {date_invoiced: {_gte: "${dayjs()
           .startOf("month")
-          .startOf("day")
-          .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+                .startOf("day")
+                .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
     .endOf("month")
     .endOf("day")
     .toISOString()}"}}]}) {
     id
-    ro_number
-    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
-        ins_co_nm
-        job_totals
-        joblines(where: { removed: { _eq: false } }) {
-          id
-          mod_lbr_ty
-          mod_lb_hrs
-          act_price
-          part_qty
-          part_type
-        }
-        labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
-          aggregate {
-            sum {
-              mod_lb_hrs
+                ro_number
+                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
+                    ins_co_nm
+                    job_totals
+                    joblines(where: { removed: { _eq: false } }) {
+                    id
+                    mod_lbr_ty
+                    mod_lb_hrs
+                    act_price
+                    part_qty
+                    part_type
+                }
+                labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
+                    aggregate {
+                        sum {
+                            mod_lb_hrs
+                        }
+                    }
+                }
+                larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
+                    aggregate {
+                        sum {
+                            mod_lb_hrs
+                        }
+                    }
+                }
+                }
             }
-          }
-        }
-        larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
-          aggregate {
-            sum {
-              mod_lb_hrs
-            }
-          }
-        }
-      }
-    }
-  `;
+    `;
 };

client/src/components/dashboard-grid/dashboard-grid.styles.scss

@@ -1,6 +1,7 @@
 .react-resizable {
   position: relative;
 }
+
 .react-resizable-handle {
   position: absolute;
   width: 20px;
@@ -12,68 +13,82 @@
   background-position: bottom right;
   padding: 0 3px 3px 0;
 }
+
 .react-resizable-handle-sw {
   bottom: 0;
   left: 0;
   cursor: sw-resize;
   transform: rotate(90deg);
 }
+
 .react-resizable-handle-se {
   bottom: 0;
   right: 0;
   cursor: se-resize;
 }
+
 .react-resizable-handle-nw {
   top: 0;
   left: 0;
   cursor: nw-resize;
   transform: rotate(180deg);
 }
+
 .react-resizable-handle-ne {
   top: 0;
   right: 0;
   cursor: ne-resize;
   transform: rotate(270deg);
 }
+
 .react-resizable-handle-w,
 .react-resizable-handle-e {
   top: 50%;
   margin-top: -10px;
   cursor: ew-resize;
 }
+
 .react-resizable-handle-w {
   left: 0;
   transform: rotate(135deg);
 }
+
 .react-resizable-handle-e {
   right: 0;
   transform: rotate(315deg);
 }
+
 .react-resizable-handle-n,
 .react-resizable-handle-s {
   left: 50%;
   margin-left: -10px;
   cursor: ns-resize;
 }
+
 .react-resizable-handle-n {
   top: 0;
   transform: rotate(225deg);
 }
+
 .react-resizable-handle-s {
   bottom: 0;
   transform: rotate(45deg);
 }
+
 .react-grid-layout {
   position: relative;
   transition: height 200ms ease;
 }
+
 .react-grid-item {
   transition: all 200ms ease;
   transition-property: left, top;
 }
+
 .react-grid-item.cssTransforms {
   transition-property: transform;
 }
+
 .react-grid-item.resizing {
   z-index: 1;
   will-change: width, height;
@@ -124,9 +139,11 @@
 .react-resizable-hide > .react-resizable-handle {
   display: none;
 }
+
 .dashboard-card {
   height: 100%;
   width: 100%;
+
   .ant-card-body {
     height: 80%;
     width: 100%;
@@ -139,12 +156,16 @@
     // align-items: center;
     // justify-content: center;
   }
+
   .ant-spin-nested-loading {
     height: 100%;
+
     .ant-spin-container {
       height: 100%;
+
       .ant-table {
         height: 100%;
+
         .ant-table-container {
           height: 100%;
         }

client/src/components/dashboard-grid/dashboard-grid.utils.js

@@ -1,3 +1,3 @@
 export function GenerateDashboardData(data) {
-  return data;
+    return data;
 }