From c568970fd828d87234278e59d4698347454dbd8e Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Mon, 24 Mar 2025 14:05:21 -0400 Subject: [PATCH] IO-3183-Dependency-Updates-and-maintenance - Refactor dashboard-grid.component.jsx to separate some of the logic into componentList.js and createDashboardQuery.js --- .../dashboard-grid/componentList.js | 132 +++++++++++ .../dashboard-grid/createDashboardQuery.js | 85 +++++++ .../dashboard-grid.component.jsx | 224 +----------------- 3 files changed, 223 insertions(+), 218 deletions(-) create mode 100644 client/src/components/dashboard-grid/componentList.js create mode 100644 client/src/components/dashboard-grid/createDashboardQuery.js diff --git a/client/src/components/dashboard-grid/componentList.js b/client/src/components/dashboard-grid/componentList.js new file mode 100644 index 000000000..015d3509e --- /dev/null +++ b/client/src/components/dashboard-grid/componentList.js @@ -0,0 +1,132 @@ +import i18next from "i18next"; +import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component.jsx"; +import { + DashboardTotalProductionHours, + DashboardTotalProductionHoursGql +} from "../dashboard-components/total-production-hours/total-production-hours.component.jsx"; +import DashboardProjectedMonthlySales, { + DashboardProjectedMonthlySalesGql +} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx"; +import DashboardMonthlyRevenueGraph, { + DashboardMonthlyRevenueGraphGql +} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx"; +import DashboardMonthlyJobCosting from "../dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx"; +import DashboardMonthlyPartsSales from "../dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx"; +import DashboardMonthlyLaborSales from "../dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx"; +import DashboardMonthlyEmployeeEfficiency, { + DashboardMonthlyEmployeeEfficiencyGql +} from "../dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx"; +import DashboardScheduledInToday, { + DashboardScheduledInTodayGql +} from "../dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx"; +import DashboardScheduledOutToday, { + DashboardScheduledOutTodayGql +} from "../dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx"; +import JobLifecycleDashboardComponent, { + JobLifecycleDashboardGQL +} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component.jsx"; + +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 + }, + // Typo in Efficency should be Efficiency, but changing it would reset users dashboard settings + 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"), + component: DashboardScheduledInToday, + gqlFragment: DashboardScheduledInTodayGql, + minW: 6, + minH: 2, + w: 10, + h: 3 + }, + ScheduleOutToday: { + label: i18next.t("dashboard.titles.scheduledouttoday"), + component: DashboardScheduledOutToday, + gqlFragment: DashboardScheduledOutTodayGql, + minW: 6, + minH: 2, + w: 10, + h: 3 + }, + JobLifecycle: { + label: i18next.t("dashboard.titles.joblifecycle"), + component: JobLifecycleDashboardComponent, + gqlFragment: JobLifecycleDashboardGQL, + minW: 6, + minH: 3, + w: 6, + h: 3 + } +}; + +export default componentList; diff --git a/client/src/components/dashboard-grid/createDashboardQuery.js b/client/src/components/dashboard-grid/createDashboardQuery.js new file mode 100644 index 000000000..a37f4aa4a --- /dev/null +++ b/client/src/components/dashboard-grid/createDashboardQuery.js @@ -0,0 +1,85 @@ +import { gql } from "@apollo/client"; +import dayjs from "../../utils/day.js"; +import componentList from "./componentList.js"; + +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: "${dayjs() + .startOf("month") + .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 + } + } + } + larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) { + aggregate { + sum { + mod_lb_hrs + } + } + } + } + }`; +}; + +export default createDashboardQuery; diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx index 6c3412a3d..83608e830 100644 --- a/client/src/components/dashboard-grid/dashboard-grid.component.jsx +++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx @@ -1,10 +1,8 @@ import Icon, { SyncOutlined } from "@ant-design/icons"; -import { gql, useMutation, useQuery } from "@apollo/client"; +import { useMutation, useQuery } from "@apollo/client"; import { Button, Dropdown, Space } from "antd"; import { PageHeader } from "@ant-design/pro-layout"; -import i18next from "i18next"; import _ from "lodash"; -import dayjs from "../../utils/day"; import React, { useState } from "react"; import { Responsive, WidthProvider } from "react-grid-layout"; import { useTranslation } from "react-i18next"; @@ -15,38 +13,13 @@ 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 -} 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"; -import DashboardMonthlyRevenueGraph, { - DashboardMonthlyRevenueGraphGql -} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.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 -} from "../dashboard-components/total-production-hours/total-production-hours.component"; import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component"; -//Combination of the following: -// /node_modules/react-grid-layout/css/styles.css -// /node_modules/react-resizable/css/styles.css -import DashboardScheduledInToday, { - DashboardScheduledInTodayGql -} from "../dashboard-components/scheduled-in-today/scheduled-in-today.component"; -import DashboardScheduledOutToday, { - DashboardScheduledOutTodayGql -} from "../dashboard-components/scheduled-out-today/scheduled-out-today.component"; -import JobLifecycleDashboardComponent, { - JobLifecycleDashboardGQL -} from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component"; -import "./dashboard-grid.styles.scss"; import { GenerateDashboardData } from "./dashboard-grid.utils"; import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; +import componentList from "./componentList.js"; +import createDashboardQuery from "./createDashboardQuery.js"; + +import "./dashboard-grid.styles.scss"; const ResponsiveReactGridLayout = WidthProvider(Responsive); @@ -54,6 +27,7 @@ const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser, bodyshop: selectBodyshop }); + const mapDispatchToProps = (dispatch) => ({ //setUserLanguage: language => dispatch(setUserLanguage(language)) }); @@ -193,189 +167,3 @@ export function DashboardGridComponent({ currentUser, bodyshop }) { } export default connect(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 - }, - // Typo in Efficency should be Efficiency, but changing it would reset users dashboard settings - 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"), - component: DashboardScheduledInToday, - gqlFragment: DashboardScheduledInTodayGql, - minW: 6, - minH: 2, - w: 10, - h: 3 - }, - ScheduleOutToday: { - label: i18next.t("dashboard.titles.scheduledouttoday"), - component: DashboardScheduledOutToday, - gqlFragment: DashboardScheduledOutTodayGql, - minW: 6, - minH: 2, - w: 10, - h: 3 - }, - JobLifecycle: { - label: i18next.t("dashboard.titles.joblifecycle"), - component: JobLifecycleDashboardComponent, - gqlFragment: JobLifecycleDashboardGQL, - minW: 6, - minH: 3, - w: 6, - h: 3 - } -}; - -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: "${dayjs() - .startOf("month") - .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 - } - } - } - larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) { - aggregate { - sum { - mod_lb_hrs - } - } - } - } - }`; -};