IO-306 Dashboard monthly employee efficiency

bodyshop_translations.babel

@@ -10689,6 +10689,27 @@
                             <folder_node>
                                 <name>titles</name>
                                 <children>
+                                    <concept_node>
+                                        <name>monthlyemployeeefficiency</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>monthlyjobcosting</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx

@@ -0,0 +1,166 @@
+import { Card } from "antd";
+import _ from "lodash";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardMonthlyEmployeeEfficiency({
+  data,
+  ...cardProps
+}) {
+  const { t } = useTranslation();
+  if (!data) return null;
+  if (!data.monthly_employee_efficiency)
+    return <DashboardRefreshRequired {...cardProps} />;
+
+  const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
+    moment(item.date).format("YYYY-MM-DD")
+  );
+
+  const listOfDays = Utils.ListOfDaysInCurrentMonth();
+
+  const chartData = listOfDays.reduce((acc, val) => {
+    //Sum up the current day.
+    let dailyHrs;
+    if (!!ticketsByDate[val]) {
+      dailyHrs = ticketsByDate[val].reduce(
+        (dayAcc, dayVal) => {
+          return {
+            actual: dayAcc.actual + dayVal.actualhrs,
+            productive: dayAcc.actual + dayVal.productivehrs,
+          };
+        },
+        { actual: 0, productive: 0 }
+      );
+    } else {
+      dailyHrs = { actual: 0, productive: 0 };
+    }
+
+    const dailyEfficiency =
+      ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.productive + 1) * 100;
+
+    const theValue = {
+      date: moment(val).format("DD"),
+      ...dailyHrs,
+      dailyEfficiency: isNaN(dailyEfficiency) ? 0 : dailyEfficiency.toFixed(1),
+      accActual:
+        acc.length > 0
+          ? acc[acc.length - 1].accActual + dailyHrs.actual
+          : dailyHrs.actual,
+
+      accProductive:
+        acc.length > 0
+          ? acc[acc.length - 1].accProductive + dailyHrs.productive
+          : dailyHrs.productive,
+      accEfficiency: 0,
+    };
+    theValue.accEfficiency = (
+      ((theValue.accProductive - theValue.accActual) /
+        (theValue.accProductive || 1) +
+        1) *
+      100
+    ).toFixed(1);
+
+    return [...acc, theValue];
+  }, []);
+
+  return (
+    <Card
+      title={t("dashboard.titles.monthlyemployeeefficiency")}
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart
+            data={chartData}
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          >
+            <CartesianGrid stroke="#f5f5f5" />
+            <XAxis dataKey="date" />
+            <YAxis
+              yAxisId="left"
+              orientation="left"
+              stroke="#8884d8"
+              unit=" hrs"
+            />
+            <YAxis
+              yAxisId="right"
+              orientation="right"
+              stroke="#82ca9d"
+              unit="%"
+            />
+            <Tooltip />
+            <Legend />
+            <Line
+              yAxisId="right"
+              name="Accumulated Efficiency"
+              type="monotone"
+              unit="%"
+              dataKey="accEfficiency"
+              stroke="#152228"
+              connectNulls
+              //    activeDot={{ r: 8 }}
+            />
+            <Line
+              name="Daily Efficiency"
+              yAxisId="right"
+              unit="%"
+              type="monotone"
+              connectNulls
+              dataKey="dailyEfficiency"
+              stroke="#d31717"
+            />
+            <Bar
+              name="Actual Hours"
+              dataKey="actual"
+              yAxisId="left"
+              unit=" hrs"
+              //stackId="day"
+              barSize={20}
+              fill="#102568"
+            />
+            <Bar
+              name="Productive Hours"
+              dataKey="productive"
+              yAxisId="left"
+              unit=" hrs"
+              //stackId="day"
+              barSize={20}
+              fill="#017664"
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardMonthlyEmployeeEfficiencyGql = `
+  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${moment()
+    .startOf("month")
+    .format("YYYY-MM-DD")}"}},{date: {_lte: "${moment()
+  .endOf("month")
+  .format("YYYY-MM-DD")}"}} ]}) {
+    actualhrs
+    productivehrs
+    employeeid
+    employee {
+      first_name
+      last_name
+    }
+    date
+  }
+`;

client/src/components/dashboard-components/total-production-hours/total-production-hours.component.jsx

@@ -42,11 +42,17 @@ export function DashboardTotalProductionHours({
   return (
     <Card {...cardProps} title={t("dashboard.titles.prodhrssummary")}>
       <Space wrap style={{ flex: 1 }}>
-        <Statistic title={t("dashboard.labels.bodyhrs")} value={hours.body} />
+        <Statistic
-        <Statistic title={t("dashboard.labels.refhrs")} value={hours.ref} />
+          title={t("dashboard.labels.bodyhrs")}
+          value={hours.body.toFixed(1)}
+        />
+        <Statistic
+          title={t("dashboard.labels.refhrs")}
+          value={hours.ref.toFixed(1)}
+        />
         <Statistic
           title={t("dashboard.labels.prodhrs")}
-          value={hours.total}
+          value={hours.total.toFixed(1)}
           valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
         />
       </Space>

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) => {

client/src/components/header/header.component.jsx

@@ -317,7 +317,9 @@ function Header({
               window.open("https://help.imex.online/", "_blank");
             }}
             icon={<Icon component={QuestionCircleFilled} />}
-          />
+          >
+            {t("menus.header.help")}
+          </Menu.Item>
           <Menu.Item
             key="rescue"
             onClick={() => {

client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -1,4 +1,4 @@
-import { Collapse, Form, Input, Select, Switch } from "antd";
+import { Collapse, Form, Input, InputNumber, Select, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -240,6 +240,26 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               <CurrencyInput />
             </Form.Item>
           </LayoutFormRow>
+          <LayoutFormRow>
+            <Form.Item
+              label={t("jobs.fields.federal_tax_rate")}
+              name="federal_tax_rate"
+            >
+              <InputNumber min={0} max={1} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.state_tax_rate")}
+              name="state_tax_rate"
+            >
+              <InputNumber min={0} max={1} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("jobs.fields.local_tax_rate")}
+              name="local_tax_rate"
+            >
+              <InputNumber min={0} max={1} precision={2} />
+            </Form.Item>
+          </LayoutFormRow>
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
               <CurrencyInput />

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.js

@@ -53,7 +53,7 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
           name="Ideal Load"
           dataKey="target"
           stroke="darkgreen"
-          fill="whitr"
+          fill="white"
           fillOpacity={0}
         />
         <Radar

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -162,6 +162,9 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
             tax_sub_rt: bodyshop.bill_tax_rates.state_tax_rate / 100,
             tax_lbr_rt: bodyshop.bill_tax_rates.state_tax_rate / 100,
             tax_levies_rt: bodyshop.bill_tax_rates.state_tax_rate / 100,
+            federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate / 100,
+            state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate / 100,
+            local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate / 100,
             parts_tax_rates: {
               PAA: {
                 prt_type: "PAA",

client/src/translations/en_us/common.json

@@ -674,18 +674,19 @@
 			},
 			"labels": {
 				"bodyhrs": "Body Hrs",
-				"dollarsinproduction": "Dollars in Production'",
+				"dollarsinproduction": "Dollars in Production",
 				"prodhrs": "Production Hrs",
 				"refhrs": "Refinish Hrs"
 			},
 			"titles": {
+				"monthlyemployeeefficiency": "Monthly Employee Efficiency",
 				"monthlyjobcosting": "Monthly Job Costing ",
 				"monthlylaborsales": "Monthly Labor Sales",
 				"monthlypartssales": "Monthly Parts Sales",
 				"monthlyrevenuegraph": "Monthly Revenue Graph",
 				"prodhrssummary": "Production Hours Summary",
-				"productiondollars": "Total dollars in production",
+				"productiondollars": "Total dollars in Production",
-				"productionhours": "Total hours in production",
+				"productionhours": "Total hours in Production",
 				"projectedmonthlysales": "Projected Monthly Sales"
 			}
 		},

client/src/translations/es/common.json

@@ -679,6 +679,7 @@
 				"refhrs": ""
 			},
 			"titles": {
+				"monthlyemployeeefficiency": "",
 				"monthlyjobcosting": "",
 				"monthlylaborsales": "",
 				"monthlypartssales": "",

client/src/translations/fr/common.json

@@ -679,6 +679,7 @@
 				"refhrs": ""
 			},
 			"titles": {
+				"monthlyemployeeefficiency": "",
 				"monthlyjobcosting": "",
 				"monthlylaborsales": "",
 				"monthlypartssales": "",