IO-306 Dashboard monthly employee efficiency

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

@@ -1,6 +1,7 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
 import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
+import i18next from "i18next";
 import _ from "lodash";
 import moment from "moment";
 import React, { useState } from "react";
@@ -16,6 +17,9 @@ import {
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
+import DashboardMonthlyEmployeeEfficiency, {
+  DashboardMonthlyEmployeeEfficiencyGql,
+} from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.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";
@@ -195,7 +199,7 @@ export default connect(
 
 const componentList = {
   ProductionDollars: {
-    label: "Production Dollars",
+    label: i18next.t("dashboard.titles.productiondollars"),
     component: DashboardTotalProductionDollars,
     gqlFragment: null,
     w: 1,
@@ -204,7 +208,7 @@ const componentList = {
     minH: 1,
   },
   ProductionHours: {
-    label: "Production Hours",
+    label: i18next.t("dashboard.titles.productionhours"),
     component: DashboardTotalProductionHours,
     gqlFragment: DashboardTotalProductionHoursGql,
     w: 3,
@@ -213,7 +217,7 @@ const componentList = {
     minH: 1,
   },
   ProjectedMonthlySales: {
-    label: "Projected Monthly Sales",
+    label: i18next.t("dashboard.titles.projectedmonthlysales"),
     component: DashboardProjectedMonthlySales,
     gqlFragment: DashboardProjectedMonthlySalesGql,
     w: 2,
@@ -222,7 +226,7 @@ const componentList = {
     minH: 1,
   },
   MonthlyRevenueGraph: {
-    label: "Monthly Sales Graph",
+    label: i18next.t("dashboard.titles.monthlyrevenuegraph"),
     component: DashboardMonthlyRevenueGraph,
     gqlFragment: DashboardMonthlyRevenueGraphGql,
     w: 4,
@@ -231,7 +235,7 @@ const componentList = {
     minH: 2,
   },
   MonthlyJobCosting: {
-    label: "Monthly Job Costing",
+    label: i18next.t("dashboard.titles.monthlyjobcosting"),
     component: DashboardMonthlyJobCosting,
     gqlFragment: null,
     minW: 6,
@@ -240,7 +244,7 @@ const componentList = {
     h: 3,
   },
   MonthlyPartsSales: {
-    label: "Monthly Parts Sales",
+    label: i18next.t("dashboard.titles.productiondollars"),
     component: DashboardMonthlyPartsSales,
     gqlFragment: null,
     minW: 2,
@@ -249,7 +253,7 @@ const componentList = {
     h: 2,
   },
   MonthlyLaborSales: {
-    label: "Monthly Parts Sales",
+    label: i18next.t("dashboard.titles.monthlypartssales"),
     component: DashboardMonthlyLaborSales,
     gqlFragment: null,
     minW: 2,
@@ -257,6 +261,15 @@ const componentList = {
     w: 2,
     h: 2,
   },
+  MonthlyEmployeeEfficency: {
+    label: i18next.t("dashboard.titles.monthlyemployeeefficiency"),
+    component: DashboardMonthlyEmployeeEfficiency,
+    gqlFragment: DashboardMonthlyEmployeeEfficiencyGql,
+    minW: 2,
+    minH: 2,
+    w: 2,
+    h: 2,
+  },
 };
 
 const createDashboardQuery = (state) => {