admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-306 Dashboard monthly employee efficiency

Browse Source
This commit is contained in:
Patrick Fic
2021-06-16 10:51:53 -07:00
parent f20ef2d11d
commit 914a7e3c7b
11 changed files with 250 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bodyshop_translations.babel
View File

@@ -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>

166
client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx Normal file
View File

@@ -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
}
`;

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

@@ -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 title={t("dashboard.labels.refhrs")} value={hours.ref} />
<Statistic
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>

27
client/src/components/dashboard-grid/dashboard-grid.component.jsx
View File

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

4
client/src/components/header/header.component.jsx
View File

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

22
client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
View File

@@ -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 />

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

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

3
client/src/pages/jobs-create/jobs-create.container.jsx
View File

@@ -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",

7
client/src/translations/en_us/common.json
View File

@@ -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",
"productionhours": "Total hours in production",
"productiondollars": "Total dollars in Production",
"productionhours": "Total hours in Production",
"projectedmonthlysales": "Projected Monthly Sales"
}
},

1
client/src/translations/es/common.json
View File

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

1
client/src/translations/fr/common.json
View File

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