Reformat all project files to use the prettier config file.
This commit is contained in:
Patrick Fic
@@ -1,26 +1,26 @@
|
||||
const CustomTooltip = ({active, payload, label}) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid gray",
|
||||
padding: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<p style={{margin: "0"}}>{label}</p>
|
||||
{payload.map((data, index) => {
|
||||
return (
|
||||
<p style={{margin: "10px 0", color: data.color}} key={index}>{`${
|
||||
data.name
|
||||
} : ${data.value.toFixed(1)}`}</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid gray",
|
||||
padding: "0.5rem"
|
||||
}}
|
||||
>
|
||||
<p style={{ margin: "0" }}>{label}</p>
|
||||
{payload.map((data, index) => {
|
||||
return (
|
||||
<p style={{ margin: "10px 0", color: data.color }} key={index}>{`${
|
||||
data.name
|
||||
} : ${data.value.toFixed(1)}`}</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
return null;
|
||||
};
|
||||
|
||||
export default CustomTooltip;
|
||||
|
||||
@@ -1,44 +1,34 @@
|
||||
import {Card} from "antd";
|
||||
import { Card } from "antd";
|
||||
import React from "react";
|
||||
import {Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis,} from "recharts";
|
||||
import { Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import CustomTooltip from "./chart-custom-tooltip";
|
||||
|
||||
const graphProps = {
|
||||
strokeWidth: 3,
|
||||
strokeWidth: 3
|
||||
};
|
||||
|
||||
export default function ScoreboardTimeTicketsChart({data, chartTitle}) {
|
||||
return (
|
||||
<Card title={chartTitle}>
|
||||
<ResponsiveContainer width="100%" height={275}>
|
||||
<ComposedChart
|
||||
data={data}
|
||||
margin={{top: 20, right: 20, bottom: 20, left: 20}}
|
||||
>
|
||||
<CartesianGrid stroke="#f5f5f5"/>
|
||||
<XAxis dataKey="date" strokeWidth={graphProps.strokeWidth}/>
|
||||
<YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth}/>
|
||||
<Tooltip content={<CustomTooltip/>}/>
|
||||
<Legend/>
|
||||
<Line
|
||||
name="Target Hours"
|
||||
type="monotone"
|
||||
dataKey="accTargetHrs"
|
||||
stroke="#ff7300"
|
||||
yAxisId="left"
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
/>
|
||||
export default function ScoreboardTimeTicketsChart({ data, chartTitle }) {
|
||||
return (
|
||||
<Card title={chartTitle}>
|
||||
<ResponsiveContainer width="100%" height={275}>
|
||||
<ComposedChart data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
|
||||
<CartesianGrid stroke="#f5f5f5" />
|
||||
<XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
|
||||
<YAxis yAxisId="left" strokeWidth={graphProps.strokeWidth} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Line
|
||||
name="Target Hours"
|
||||
type="monotone"
|
||||
dataKey="accTargetHrs"
|
||||
stroke="#ff7300"
|
||||
yAxisId="left"
|
||||
strokeWidth={graphProps.strokeWidth}
|
||||
/>
|
||||
|
||||
<Area
|
||||
type="monotone"
|
||||
name="MTD Hours"
|
||||
dataKey="accHrs"
|
||||
fill="lightblue"
|
||||
stroke="blue"
|
||||
yAxisId="left"
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
);
|
||||
<Area type="monotone" name="MTD Hours" dataKey="accHrs" fill="lightblue" stroke="blue" yAxisId="left" />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import {useQuery} from "@apollo/client";
|
||||
import {Col, Row} from "antd";
|
||||
import { useQuery } from "@apollo/client";
|
||||
import { Col, Row } from "antd";
|
||||
import _ from "lodash";
|
||||
import dayjs from "../../utils/day";
|
||||
import React, {useMemo} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {QUERY_TIME_TICKETS_IN_RANGE_SB} from "../../graphql/timetickets.queries";
|
||||
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||
import React, { useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { QUERY_TIME_TICKETS_IN_RANGE_SB } from "../../graphql/timetickets.queries";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
||||
import * as Utils from "../scoreboard-targets-table/scoreboard-targets-table.util";
|
||||
@@ -16,397 +16,320 @@ import ScoreboardTicketsStats from "./scoreboard-timetickets.stats.component";
|
||||
import ScoreboardTimeticketsTargetsTable from "./scoreboard-timetickets.targets-table.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ScoreboardTimeTicketsStats);
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTimeTicketsStats);
|
||||
|
||||
export function ScoreboardTimeTicketsStats({bodyshop}) {
|
||||
const {t} = useTranslation();
|
||||
const startDate = dayjs().startOf("month")
|
||||
const endDate = dayjs().endOf("month");
|
||||
export function ScoreboardTimeTicketsStats({ bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const startDate = dayjs().startOf("month");
|
||||
const endDate = dayjs().endOf("month");
|
||||
|
||||
const fixedPeriods = useMemo(() => {
|
||||
const endOfThisMonth = dayjs().endOf("month");
|
||||
const startofthisMonth = dayjs().startOf("month");
|
||||
const fixedPeriods = useMemo(() => {
|
||||
const endOfThisMonth = dayjs().endOf("month");
|
||||
const startofthisMonth = dayjs().startOf("month");
|
||||
|
||||
const endOfLastmonth = dayjs().subtract(1, "month").endOf("month");
|
||||
const startOfLastmonth = dayjs().subtract(1, "month").startOf("month");
|
||||
const endOfLastmonth = dayjs().subtract(1, "month").endOf("month");
|
||||
const startOfLastmonth = dayjs().subtract(1, "month").startOf("month");
|
||||
|
||||
const endOfThisWeek = dayjs().endOf("week");
|
||||
const startOfThisWeek = dayjs().startOf("week");
|
||||
const endOfThisWeek = dayjs().endOf("week");
|
||||
const startOfThisWeek = dayjs().startOf("week");
|
||||
|
||||
const endOfLastWeek = dayjs().subtract(1, "week").endOf("week");
|
||||
const startOfLastWeek = dayjs().subtract(1, "week").startOf("week");
|
||||
const endOfLastWeek = dayjs().subtract(1, "week").endOf("week");
|
||||
const startOfLastWeek = dayjs().subtract(1, "week").startOf("week");
|
||||
|
||||
const endOfPriorWeek = dayjs().subtract(2, "week").endOf("week");
|
||||
const startOfPriorWeek = dayjs().subtract(2, "week").startOf("week");
|
||||
const endOfPriorWeek = dayjs().subtract(2, "week").endOf("week");
|
||||
const startOfPriorWeek = dayjs().subtract(2, "week").startOf("week");
|
||||
|
||||
const allDates = [
|
||||
endOfThisMonth,
|
||||
startofthisMonth,
|
||||
endOfLastmonth,
|
||||
startOfLastmonth,
|
||||
endOfThisWeek,
|
||||
startOfThisWeek,
|
||||
endOfLastWeek,
|
||||
startOfLastWeek,
|
||||
endOfPriorWeek,
|
||||
startOfPriorWeek,
|
||||
];
|
||||
const start = dayjs.min(allDates);
|
||||
const end = dayjs.max(allDates);
|
||||
return {
|
||||
start,
|
||||
end,
|
||||
endOfThisMonth,
|
||||
startofthisMonth,
|
||||
endOfLastmonth,
|
||||
startOfLastmonth,
|
||||
endOfThisWeek,
|
||||
startOfThisWeek,
|
||||
endOfLastWeek,
|
||||
startOfLastWeek,
|
||||
endOfPriorWeek,
|
||||
startOfPriorWeek,
|
||||
};
|
||||
}, []);
|
||||
const allDates = [
|
||||
endOfThisMonth,
|
||||
startofthisMonth,
|
||||
endOfLastmonth,
|
||||
startOfLastmonth,
|
||||
endOfThisWeek,
|
||||
startOfThisWeek,
|
||||
endOfLastWeek,
|
||||
startOfLastWeek,
|
||||
endOfPriorWeek,
|
||||
startOfPriorWeek
|
||||
];
|
||||
const start = dayjs.min(allDates);
|
||||
const end = dayjs.max(allDates);
|
||||
return {
|
||||
start,
|
||||
end,
|
||||
endOfThisMonth,
|
||||
startofthisMonth,
|
||||
endOfLastmonth,
|
||||
startOfLastmonth,
|
||||
endOfThisWeek,
|
||||
startOfThisWeek,
|
||||
endOfLastWeek,
|
||||
startOfLastWeek,
|
||||
endOfPriorWeek,
|
||||
startOfPriorWeek
|
||||
};
|
||||
}, []);
|
||||
|
||||
const {loading, error, data} = useQuery(QUERY_TIME_TICKETS_IN_RANGE_SB, {
|
||||
variables: {
|
||||
start: startDate.format("YYYY-MM-DD"),
|
||||
end: endDate.format("YYYY-MM-DD"),
|
||||
fixedStart: fixedPeriods.start.format("YYYY-MM-DD"),
|
||||
fixedEnd: fixedPeriods.end.format("YYYY-MM-DD"),
|
||||
jobStart: startDate,
|
||||
jobEnd: endDate,
|
||||
const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE_SB, {
|
||||
variables: {
|
||||
start: startDate.format("YYYY-MM-DD"),
|
||||
end: endDate.format("YYYY-MM-DD"),
|
||||
fixedStart: fixedPeriods.start.format("YYYY-MM-DD"),
|
||||
fixedEnd: fixedPeriods.end.format("YYYY-MM-DD"),
|
||||
jobStart: startDate,
|
||||
jobEnd: endDate
|
||||
},
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
pollInterval: 60000,
|
||||
skip: !fixedPeriods
|
||||
});
|
||||
|
||||
const calculatedData = useMemo(() => {
|
||||
if (!data) return [];
|
||||
const ret = {
|
||||
totalThisWeek: 0,
|
||||
totalThisWeekLAB: 0,
|
||||
totalThisWeekLAR: 0,
|
||||
totalLastWeek: 0,
|
||||
totalLastWeekLAB: 0,
|
||||
totalLastWeekLAR: 0,
|
||||
totalPriorWeek: 0,
|
||||
totalPriorWeekLAB: 0,
|
||||
totalPriorWeekLAR: 0,
|
||||
totalThisMonth: 0,
|
||||
totalThisMonthLAB: 0,
|
||||
totalThisMonthLAR: 0,
|
||||
totalLastMonth: 0,
|
||||
totalLastMonthLAB: 0,
|
||||
totalLastMonthLAR: 0,
|
||||
actualTotalOverPeriod: 0,
|
||||
actualTotalOverPeriodLAB: 0,
|
||||
actualTotalOverPeriodLAR: 0,
|
||||
totalEffieciencyOverPeriod: 0,
|
||||
totalEffieciencyOverPeriodLAB: 0,
|
||||
totalEffieciencyOverPeriodLAR: 0,
|
||||
seperatedThisWeek: {
|
||||
sunday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
},
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
pollInterval: 60000,
|
||||
skip: !fixedPeriods,
|
||||
monday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
},
|
||||
tuesday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
},
|
||||
wednesday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
},
|
||||
thursday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
},
|
||||
friday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
},
|
||||
saturday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
data.fixedperiod.forEach((ticket) => {
|
||||
const ticketDate = dayjs(ticket.date);
|
||||
if (ticketDate.isBetween(fixedPeriods.startOfThisWeek, fixedPeriods.endOfThisWeek, undefined, "[]")) {
|
||||
ret.totalThisWeek = ret.totalThisWeek + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR") ret.totalThisWeekLAB = ret.totalThisWeekLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR") ret.totalThisWeekLAR = ret.totalThisWeekLAR + ticket.productivehrs;
|
||||
|
||||
//Seperate out to Day of Week
|
||||
ret.seperatedThisWeek[dayjs(ticket.date).format("dddd").toLowerCase()].total =
|
||||
ret.seperatedThisWeek[dayjs(ticket.date).format("dddd").toLowerCase()].total + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
ret.seperatedThisWeek[dayjs(ticket.date).format("dddd").toLowerCase()].lab =
|
||||
ret.seperatedThisWeek[dayjs(ticket.date).format("dddd").toLowerCase()].lab + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
ret.seperatedThisWeek[dayjs(ticket.date).format("dddd").toLowerCase()].lar =
|
||||
ret.seperatedThisWeek[dayjs(ticket.date).format("dddd").toLowerCase()].lar + ticket.productivehrs;
|
||||
} else if (ticketDate.isBetween(fixedPeriods.startOfLastWeek, fixedPeriods.endOfLastWeek, undefined, "[]")) {
|
||||
ret.totalLastWeek = ret.totalLastWeek + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR") ret.totalLastWeekLAB = ret.totalLastWeekLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR") ret.totalLastWeekLAR = ret.totalLastWeekLAR + ticket.productivehrs;
|
||||
} else if (ticketDate.isBetween(fixedPeriods.startOfPriorWeek, fixedPeriods.endOfPriorWeek, undefined, "[]")) {
|
||||
ret.totalPriorWeek = ret.totalPriorWeek + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR") ret.totalPriorWeekLAB = ret.totalPriorWeekLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR") ret.totalPriorWeekLAR = ret.totalPriorWeekLAR + ticket.productivehrs;
|
||||
}
|
||||
if (ticketDate.isBetween(fixedPeriods.startofthisMonth, fixedPeriods.endOfThisMonth, undefined, "[]")) {
|
||||
ret.totalThisMonth = ret.totalThisMonth + ticket.productivehrs;
|
||||
ret.actualTotalOverPeriod = ret.actualTotalOverPeriod + (ticket.actualhrs || 0);
|
||||
if (ticket.ciecacode !== "LAR") {
|
||||
ret.totalThisMonthLAB = ret.totalThisMonthLAB + ticket.productivehrs;
|
||||
ret.actualTotalOverPeriodLAB = ret.actualTotalOverPeriodLAB + (ticket.actualhrs || 0);
|
||||
}
|
||||
if (ticket.ciecacode === "LAR") {
|
||||
ret.totalThisMonthLAR = ret.totalThisMonthLAR + ticket.productivehrs;
|
||||
ret.actualTotalOverPeriodLAR = ret.actualTotalOverPeriodLAR + (ticket.actualhrs || 0);
|
||||
}
|
||||
} else if (ticketDate.isBetween(fixedPeriods.startOfLastmonth, fixedPeriods.endOfLastmonth, undefined, "[]")) {
|
||||
ret.totalLastMonth = ret.totalLastMonth + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR") ret.totalLastMonthLAB = ret.totalLastMonthLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR") ret.totalLastMonthLAR = ret.totalLastMonthLAR + ticket.productivehrs;
|
||||
}
|
||||
});
|
||||
|
||||
const calculatedData = useMemo(() => {
|
||||
if (!data) return [];
|
||||
const ret = {
|
||||
totalThisWeek: 0,
|
||||
totalThisWeekLAB: 0,
|
||||
totalThisWeekLAR: 0,
|
||||
totalLastWeek: 0,
|
||||
totalLastWeekLAB: 0,
|
||||
totalLastWeekLAR: 0,
|
||||
totalPriorWeek: 0,
|
||||
totalPriorWeekLAB: 0,
|
||||
totalPriorWeekLAR: 0,
|
||||
totalThisMonth: 0,
|
||||
totalThisMonthLAB: 0,
|
||||
totalThisMonthLAR: 0,
|
||||
totalLastMonth: 0,
|
||||
totalLastMonthLAB: 0,
|
||||
totalLastMonthLAR: 0,
|
||||
actualTotalOverPeriod: 0,
|
||||
actualTotalOverPeriodLAB: 0,
|
||||
actualTotalOverPeriodLAR: 0,
|
||||
totalEffieciencyOverPeriod: 0,
|
||||
totalEffieciencyOverPeriodLAB: 0,
|
||||
totalEffieciencyOverPeriodLAR: 0,
|
||||
seperatedThisWeek: {
|
||||
sunday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
monday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
tuesday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
wednesday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
thursday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
friday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
saturday: {
|
||||
total: 0,
|
||||
lab: 0,
|
||||
lar: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
ret.totalEffieciencyOverPeriod = ret.actualTotalOverPeriod
|
||||
? (ret.totalThisMonth / ret.actualTotalOverPeriod) * 100
|
||||
: 0;
|
||||
ret.totalEffieciencyOverPeriodLAB = ret.actualTotalOverPeriodLAB
|
||||
? (ret.totalThisMonthLAB / ret.actualTotalOverPeriodLAB) * 100
|
||||
: 0;
|
||||
ret.totalEffieciencyOverPeriodLAR = ret.actualTotalOverPeriodLAR
|
||||
? (ret.totalThisMonthLAR / ret.actualTotalOverPeriodLAR) * 100
|
||||
: 0;
|
||||
|
||||
data.fixedperiod.forEach((ticket) => {
|
||||
const ticketDate = dayjs(ticket.date);
|
||||
if (
|
||||
ticketDate.isBetween(
|
||||
fixedPeriods.startOfThisWeek,
|
||||
fixedPeriods.endOfThisWeek,
|
||||
undefined,
|
||||
"[]"
|
||||
)
|
||||
) {
|
||||
ret.totalThisWeek = ret.totalThisWeek + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
ret.totalThisWeekLAB = ret.totalThisWeekLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
ret.totalThisWeekLAR = ret.totalThisWeekLAR + ticket.productivehrs;
|
||||
roundObject(ret);
|
||||
|
||||
//Seperate out to Day of Week
|
||||
ret.seperatedThisWeek[
|
||||
dayjs(ticket.date).format("dddd").toLowerCase()
|
||||
].total =
|
||||
ret.seperatedThisWeek[
|
||||
dayjs(ticket.date).format("dddd").toLowerCase()
|
||||
].total + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
ret.seperatedThisWeek[
|
||||
dayjs(ticket.date).format("dddd").toLowerCase()
|
||||
].lab =
|
||||
ret.seperatedThisWeek[
|
||||
dayjs(ticket.date).format("dddd").toLowerCase()
|
||||
].lab + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
ret.seperatedThisWeek[
|
||||
dayjs(ticket.date).format("dddd").toLowerCase()
|
||||
].lar =
|
||||
ret.seperatedThisWeek[
|
||||
dayjs(ticket.date).format("dddd").toLowerCase()
|
||||
].lar + ticket.productivehrs;
|
||||
} else if (
|
||||
ticketDate.isBetween(
|
||||
fixedPeriods.startOfLastWeek,
|
||||
fixedPeriods.endOfLastWeek,
|
||||
undefined,
|
||||
"[]"
|
||||
)
|
||||
) {
|
||||
ret.totalLastWeek = ret.totalLastWeek + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
ret.totalLastWeekLAB = ret.totalLastWeekLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
ret.totalLastWeekLAR = ret.totalLastWeekLAR + ticket.productivehrs;
|
||||
} else if (
|
||||
ticketDate.isBetween(
|
||||
fixedPeriods.startOfPriorWeek,
|
||||
fixedPeriods.endOfPriorWeek,
|
||||
undefined,
|
||||
"[]"
|
||||
)
|
||||
) {
|
||||
ret.totalPriorWeek = ret.totalPriorWeek + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
ret.totalPriorWeekLAB = ret.totalPriorWeekLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
ret.totalPriorWeekLAR = ret.totalPriorWeekLAR + ticket.productivehrs;
|
||||
}
|
||||
if (
|
||||
ticketDate.isBetween(
|
||||
fixedPeriods.startofthisMonth,
|
||||
fixedPeriods.endOfThisMonth,
|
||||
undefined,
|
||||
"[]"
|
||||
)
|
||||
) {
|
||||
ret.totalThisMonth = ret.totalThisMonth + ticket.productivehrs;
|
||||
ret.actualTotalOverPeriod =
|
||||
ret.actualTotalOverPeriod + (ticket.actualhrs || 0);
|
||||
if (ticket.ciecacode !== "LAR") {
|
||||
ret.totalThisMonthLAB = ret.totalThisMonthLAB + ticket.productivehrs;
|
||||
ret.actualTotalOverPeriodLAB =
|
||||
ret.actualTotalOverPeriodLAB + (ticket.actualhrs || 0);
|
||||
}
|
||||
if (ticket.ciecacode === "LAR") {
|
||||
ret.totalThisMonthLAR = ret.totalThisMonthLAR + ticket.productivehrs;
|
||||
ret.actualTotalOverPeriodLAR =
|
||||
ret.actualTotalOverPeriodLAR + (ticket.actualhrs || 0);
|
||||
}
|
||||
} else if (
|
||||
ticketDate.isBetween(
|
||||
fixedPeriods.startOfLastmonth,
|
||||
fixedPeriods.endOfLastmonth,
|
||||
undefined,
|
||||
"[]"
|
||||
)
|
||||
) {
|
||||
ret.totalLastMonth = ret.totalLastMonth + ticket.productivehrs;
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
ret.totalLastMonthLAB = ret.totalLastMonthLAB + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
ret.totalLastMonthLAR = ret.totalLastMonthLAR + ticket.productivehrs;
|
||||
}
|
||||
const ticketsGroupedByDate = _.groupBy(data.timetickets, "date");
|
||||
|
||||
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
||||
|
||||
const combinedData = [],
|
||||
labData = [],
|
||||
larData = [];
|
||||
var acc_comb = 0;
|
||||
var acc_lab = 0;
|
||||
var acc_lar = 0;
|
||||
|
||||
listOfDays.forEach((day) => {
|
||||
const r = {
|
||||
date: dayjs(day).format("MM/DD"),
|
||||
actualhrs: 0,
|
||||
productivehrs: 0
|
||||
};
|
||||
|
||||
const combined = {
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
day
|
||||
) +
|
||||
(bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget),
|
||||
1
|
||||
),
|
||||
accHrs: 0
|
||||
};
|
||||
const lab = {
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(bodyshop.scoreboard_target.dailyBodyTarget, day) +
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
1
|
||||
),
|
||||
accHrs: 0
|
||||
};
|
||||
const lar = {
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(bodyshop.scoreboard_target.dailyPaintTarget, day) +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
1
|
||||
),
|
||||
accHrs: 0
|
||||
};
|
||||
|
||||
if (ticketsGroupedByDate[day]) {
|
||||
ticketsGroupedByDate[day].forEach((ticket) => {
|
||||
r.actualhrs = r.actualhrs + ticket.actualhrs;
|
||||
r.productivehrs = r.productivehrs + ticket.productivehrs;
|
||||
acc_comb = acc_comb + ticket.productivehrs;
|
||||
|
||||
if (ticket.ciecacode !== "LAR") acc_lab = acc_lab + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR") acc_lar = acc_lar + ticket.productivehrs;
|
||||
});
|
||||
}
|
||||
combined.accHrs = acc_comb;
|
||||
lab.accHrs = acc_lab;
|
||||
lar.accHrs = acc_lar;
|
||||
|
||||
ret.totalEffieciencyOverPeriod = ret.actualTotalOverPeriod
|
||||
? (ret.totalThisMonth / ret.actualTotalOverPeriod) * 100
|
||||
: 0;
|
||||
ret.totalEffieciencyOverPeriodLAB = ret.actualTotalOverPeriodLAB
|
||||
? (ret.totalThisMonthLAB / ret.actualTotalOverPeriodLAB) * 100
|
||||
: 0;
|
||||
ret.totalEffieciencyOverPeriodLAR = ret.actualTotalOverPeriodLAR
|
||||
? (ret.totalThisMonthLAR / ret.actualTotalOverPeriodLAR) * 100
|
||||
: 0;
|
||||
combinedData.push({ ...r, ...combined });
|
||||
labData.push({ ...r, ...lab });
|
||||
larData.push({ ...r, ...lar });
|
||||
});
|
||||
|
||||
roundObject(ret);
|
||||
const jobData = {};
|
||||
|
||||
const ticketsGroupedByDate = _.groupBy(data.timetickets, "date");
|
||||
const dataJobs = data.jobs.map((job) => ({
|
||||
...job,
|
||||
tthrs: job.joblines.reduce((acc, val) => acc + val.mod_lb_hrs, 0)
|
||||
}));
|
||||
|
||||
const listOfDays = Utils.ListOfDaysInCurrentMonth();
|
||||
jobData.tthrs = dataJobs.reduce((acc, val) => acc + val.tthrs, 0).toFixed(1);
|
||||
|
||||
const combinedData = [],
|
||||
labData = [],
|
||||
larData = [];
|
||||
var acc_comb = 0;
|
||||
var acc_lab = 0;
|
||||
var acc_lar = 0;
|
||||
jobData.count = dataJobs.length.toFixed(0);
|
||||
|
||||
listOfDays.forEach((day) => {
|
||||
const r = {
|
||||
date: dayjs(day).format("MM/DD"),
|
||||
actualhrs: 0,
|
||||
productivehrs: 0,
|
||||
};
|
||||
return {
|
||||
fixed: ret,
|
||||
combinedData: combinedData,
|
||||
labData: labData,
|
||||
larData: larData,
|
||||
jobData: jobData
|
||||
};
|
||||
}, [fixedPeriods, data, bodyshop]);
|
||||
|
||||
const combined = {
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
day
|
||||
) +
|
||||
(bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget),
|
||||
1
|
||||
),
|
||||
accHrs: 0,
|
||||
};
|
||||
const lab = {
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
day
|
||||
) + bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
1
|
||||
),
|
||||
accHrs: 0,
|
||||
};
|
||||
const lar = {
|
||||
accTargetHrs: _.round(
|
||||
Utils.AsOfDateTargetHours(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
day
|
||||
) + bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
1
|
||||
),
|
||||
accHrs: 0,
|
||||
};
|
||||
|
||||
if (ticketsGroupedByDate[day]) {
|
||||
ticketsGroupedByDate[day].forEach((ticket) => {
|
||||
r.actualhrs = r.actualhrs + ticket.actualhrs;
|
||||
r.productivehrs = r.productivehrs + ticket.productivehrs;
|
||||
acc_comb = acc_comb + ticket.productivehrs;
|
||||
|
||||
if (ticket.ciecacode !== "LAR")
|
||||
acc_lab = acc_lab + ticket.productivehrs;
|
||||
if (ticket.ciecacode === "LAR")
|
||||
acc_lar = acc_lar + ticket.productivehrs;
|
||||
});
|
||||
}
|
||||
combined.accHrs = acc_comb;
|
||||
lab.accHrs = acc_lab;
|
||||
lar.accHrs = acc_lar;
|
||||
|
||||
combinedData.push({...r, ...combined});
|
||||
labData.push({...r, ...lab});
|
||||
larData.push({...r, ...lar});
|
||||
});
|
||||
|
||||
const jobData = {};
|
||||
|
||||
const dataJobs = data.jobs.map((job) => ({
|
||||
...job,
|
||||
tthrs: job.joblines.reduce((acc, val) => acc + val.mod_lb_hrs, 0)
|
||||
}));
|
||||
|
||||
jobData.tthrs = dataJobs
|
||||
.reduce((acc, val) => acc + val.tthrs, 0)
|
||||
.toFixed(1);
|
||||
|
||||
jobData.count = dataJobs.length.toFixed(0);
|
||||
|
||||
return {
|
||||
fixed: ret,
|
||||
combinedData: combinedData,
|
||||
labData: labData,
|
||||
larData: larData,
|
||||
jobData: jobData,
|
||||
};
|
||||
}, [fixedPeriods, data, bodyshop]);
|
||||
|
||||
if (error) return <AlertComponent message={error.message} type="error"/>;
|
||||
if (loading) return <LoadingSpinner/>;
|
||||
return (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<ScoreboardTimeticketsTargetsTable/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<ScoreboardTicketsStats
|
||||
data={calculatedData.fixed}
|
||||
jobData={calculatedData.jobData}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<ScoreboardTimeTicketsChart
|
||||
data={calculatedData.combinedData}
|
||||
chartTitle={t("scoreboard.labels.combinedcharttitle")}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ScoreboardTimeTicketsChart
|
||||
data={calculatedData.labData}
|
||||
chartTitle={t("scoreboard.labels.bodycharttitle")}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ScoreboardTimeTicketsChart
|
||||
data={calculatedData.larData}
|
||||
chartTitle={t("scoreboard.labels.refinishcharttitle")}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
if (loading) return <LoadingSpinner />;
|
||||
return (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<ScoreboardTimeticketsTargetsTable />
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<ScoreboardTicketsStats data={calculatedData.fixed} jobData={calculatedData.jobData} />
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<ScoreboardTimeTicketsChart
|
||||
data={calculatedData.combinedData}
|
||||
chartTitle={t("scoreboard.labels.combinedcharttitle")}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ScoreboardTimeTicketsChart data={calculatedData.labData} chartTitle={t("scoreboard.labels.bodycharttitle")} />
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ScoreboardTimeTicketsChart
|
||||
data={calculatedData.larData}
|
||||
chartTitle={t("scoreboard.labels.refinishcharttitle")}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
function roundObject(inputObj) {
|
||||
for (var key of Object.keys(inputObj)) {
|
||||
if (typeof inputObj[key] === "number") {
|
||||
inputObj[key] = inputObj[key].toFixed(1);
|
||||
} else if (Array.isArray(inputObj[key])) {
|
||||
inputObj[key].forEach((item) => roundObject(item));
|
||||
} else if (typeof inputObj[key] === "object") {
|
||||
roundObject(inputObj[key]);
|
||||
}
|
||||
for (var key of Object.keys(inputObj)) {
|
||||
if (typeof inputObj[key] === "number") {
|
||||
inputObj[key] = inputObj[key].toFixed(1);
|
||||
} else if (Array.isArray(inputObj[key])) {
|
||||
inputObj[key].forEach((item) => roundObject(item));
|
||||
} else if (typeof inputObj[key] === "object") {
|
||||
roundObject(inputObj[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,286 +1,240 @@
|
||||
import {CalendarOutlined} from "@ant-design/icons";
|
||||
import {Card, Col, Divider, Row, Statistic} from "antd";
|
||||
import { CalendarOutlined } from "@ant-design/icons";
|
||||
import { Card, Col, Divider, Row, Statistic } from "antd";
|
||||
import dayjs from "../../utils/day";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectBodyshop} from "../../redux/user/user.selectors";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import * as Util from "../scoreboard-targets-table/scoreboard-targets-table.util";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
bodyshop: selectBodyshop
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
const rowGutter = [16, 16];
|
||||
const statSpans = {xs: 24, sm: 3};
|
||||
const statSpans = { xs: 24, sm: 3 };
|
||||
|
||||
export function ScoreboardTimeTicketsTargetsTable({bodyshop}) {
|
||||
const {t} = useTranslation();
|
||||
export function ScoreboardTimeTicketsTargetsTable({ bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card title={t("scoreboard.labels.targets")}>
|
||||
<Row gutter={rowGutter}>
|
||||
<Col xs={24} sm={{offset: 0, span: 3}} lg={{span: 3}}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.workingdays")}
|
||||
value={Util.CalculateWorkingDaysThisMonth()}
|
||||
prefix={<CalendarOutlined/>}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} sm={{offset: 0, span: 20}} lg={{offset: 0, span: 20}}>
|
||||
<Row>
|
||||
<Col {...statSpans}>
|
||||
<Statistic title="Type" value={t("scoreboard.labels.body")}/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.dailytarget")}
|
||||
value={bodyshop.scoreboard_target.dailyBodyTarget}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.thisweek")}
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.lastweek")}
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.priorweek")}
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.thismonth")}
|
||||
value={Util.MonthlyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.lastmonth")}
|
||||
value={Util.LastMonthTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.asoftodaytarget")}
|
||||
value={Util.AsOfTodayTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={t("scoreboard.labels.refinish")}/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={bodyshop.scoreboard_target.dailyPaintTarget}/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.WeeklyTargetHrsInPeriod(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.MonthlyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.LastMonthTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.AsOfTodayTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Divider style={{margin: 5}}/>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col {...statSpans}></Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget +
|
||||
bodyshop.scoreboard_target.dailyPaintTarget
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
) +
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
) +
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
) +
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.MonthlyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
bodyshop
|
||||
) +
|
||||
Util.MonthlyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.LastMonthTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
bodyshop
|
||||
) +
|
||||
Util.LastMonthTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.AsOfTodayTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
bodyshop
|
||||
) +
|
||||
Util.AsOfTodayTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
return (
|
||||
<Card title={t("scoreboard.labels.targets")}>
|
||||
<Row gutter={rowGutter}>
|
||||
<Col xs={24} sm={{ offset: 0, span: 3 }} lg={{ span: 3 }}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.workingdays")}
|
||||
value={Util.CalculateWorkingDaysThisMonth()}
|
||||
prefix={<CalendarOutlined />}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} sm={{ offset: 0, span: 20 }} lg={{ offset: 0, span: 20 }}>
|
||||
<Row>
|
||||
<Col {...statSpans}>
|
||||
<Statistic title="Type" value={t("scoreboard.labels.body")} />
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.dailytarget")}
|
||||
value={bodyshop.scoreboard_target.dailyBodyTarget}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.thisweek")}
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.lastweek")}
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.priorweek")}
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.thismonth")}
|
||||
value={Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.lastmonth")}
|
||||
value={Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
title={t("scoreboard.labels.asoftodaytarget")}
|
||||
value={Util.AsOfTodayTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={t("scoreboard.labels.refinish")} />
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={bodyshop.scoreboard_target.dailyPaintTarget} />
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.WeeklyTargetHrsInPeriod(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)} />
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)} />
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic value={Util.AsOfTodayTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Divider style={{ margin: 5 }} />
|
||||
</Row>
|
||||
<Row>
|
||||
<Col {...statSpans}></Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
) +
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().startOf("week"),
|
||||
dayjs().endOf("week"),
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
) +
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(1, "week").startOf("week"),
|
||||
dayjs().subtract(1, "week").endOf("week"),
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyBodyTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
) +
|
||||
Util.WeeklyTargetHrs(
|
||||
bodyshop.scoreboard_target.dailyPaintTarget,
|
||||
dayjs().subtract(2, "week").startOf("week"),
|
||||
dayjs().subtract(2, "week").endOf("week"),
|
||||
bodyshop
|
||||
)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
|
||||
Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
|
||||
Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...statSpans}>
|
||||
<Statistic
|
||||
value={(
|
||||
Util.AsOfTodayTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
|
||||
Util.AsOfTodayTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
|
||||
).toFixed(1)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ScoreboardTimeTicketsTargetsTable);
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTimeTicketsTargetsTable);
|
||||
|
||||
Reference in New Issue
Block a user