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

IO-306 Furhter dashboard development

Browse Source
This commit is contained in:
Patrick Fic
2021-06-15 15:00:07 -07:00
parent b12ad405c3
commit 471df3b659
10 changed files with 136 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bodyshop_translations.babel
View File

@@ -10532,6 +10532,27 @@
<folder_node>
<name>errors</name>
<children>
<concept_node>
<name>refreshrequired</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>updatinglayout</name>
<definition_loaded>false</definition_loaded>

97
client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx
View File

@@ -32,13 +32,9 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
return {
name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`),
value: laborData[key].getAmount() / 100,
// color: pieColor(i.status),
color: pieColor(key.toUpperCase()),
};
});
console.log(
"🚀 ~ file: monthly-parts-sales.component.jsx ~ line 34 ~ chartData",
chartData
);
return (
<Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
@@ -72,36 +68,56 @@ export const DashboardMonthlyRevenueGraphGql = `
`;
const pieColor = (type) => {
if (type === "LAA") return "lightgreen";
else if (type === "LAB") return "dodgerblue";
else if (type === "LAD") return "aliceblue";
else if (type === "LAE") return "seafoam";
else if (type === "LAG") return "chartreuse";
else if (type === "LAF") return "magenta";
else if (type === "LAM") return "gold";
else if (type === "LAR") return "crimson";
else if (type === "LAU") return "slategray";
else if (type === "LA1") return "slategray";
else if (type === "LA2") return "slategray";
else if (type === "LA3") return "slategray";
else if (type === "LA4") return "slategray";
return "slategray";
};
const renderActiveShape = (props) => {
const RADIAN = Math.PI / 180;
//const RADIAN = Math.PI / 180;
const {
cx,
cy,
midAngle,
//midAngle,
innerRadius,
outerRadius,
startAngle,
endAngle,
fill,
payload,
percent,
// percent,
value,
} = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos;
const sy = cy + (outerRadius + 10) * sin;
const mx = cx + (outerRadius + 30) * cos;
const my = cy + (outerRadius + 30) * sin;
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
const ey = my;
const textAnchor = cos >= 0 ? "start" : "end";
// const sin = Math.sin(-RADIAN * midAngle);
// const cos = Math.cos(-RADIAN * midAngle);
// // const sx = cx + (outerRadius + 10) * cos;
// const sy = cy + (outerRadius + 10) * sin;
// const mx = cx + (outerRadius + 30) * cos;
// const my = cy + (outerRadius + 30) * sin;
// //const ex = mx + (cos >= 0 ? 1 : -1) * 22;
// const ey = my;
//const textAnchor = cos >= 0 ? "start" : "end";
return (
<g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
<text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
{payload.name}
</text>
<text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
{Dinero({ amount: Math.round(value * 100) }).toFormat()}
</text>
<Sector
cx={cx}
cy={cy}
@@ -120,29 +136,28 @@ const renderActiveShape = (props) => {
outerRadius={outerRadius + 10}
fill={fill}
/>
<path
d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
stroke={fill}
fill="none"
/>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
textAnchor={textAnchor}
fill="#333"
>
{payload.name}
</text>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
dy={18}
textAnchor={textAnchor}
fill="#999"
>
{Dinero({ amount: Math.round(value * 100) }).toFormat()}
</text>
</g>
);
};
// <path
// d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
// stroke={fill}
// fill="none"
// />;
// <text
// x={ex + (cos >= 0 ? 1 : -1) * 12}
// y={ey}
// textAnchor={textAnchor}
// fill="#333"
// >
// {payload.name}
// </text>
// <text
// x={ex + (cos >= 0 ? 1 : -1) * 12}
// y={ey}
// dy={18}
// textAnchor={textAnchor}
// fill="#999"
// >
// {Dinero({ amount: Math.round(value * 100) }).toFormat()}
// </text>

73
client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx
View File

@@ -29,13 +29,9 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
return {
name: t(`joblines.fields.part_types.${key.toUpperCase()}`),
value: partData[key].getAmount() / 100,
// color: pieColor(i.status),
color: pieColor(key.toUpperCase()),
};
});
console.log(
"🚀 ~ file: monthly-parts-sales.component.jsx ~ line 34 ~ chartData",
chartData
);
return (
<Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
@@ -68,37 +64,55 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
export const DashboardMonthlyRevenueGraphGql = `
`;
const pieColor = (type) => {
if (type === "PAA") return "darkgreen";
else if (type === "PAC") return "green";
else if (type === "PAE") return "gold";
else if (type === "PAG") return "seafoam";
else if (type === "PAL") return "chartreuse";
else if (type === "PAM") return "magenta";
else if (type === "PAN") return "crimson";
else if (type === "PAO") return "gold";
else if (type === "PAP") return "crimson";
else if (type === "PAR") return "indigo";
else if (type === "PAS") return "dodgerblue";
else if (type === "PASL") return "dodgerblue";
return "slategray";
};
const renderActiveShape = (props) => {
const RADIAN = Math.PI / 180;
// const RADIAN = Math.PI / 180;
const {
cx,
cy,
midAngle,
// midAngle,
innerRadius,
outerRadius,
startAngle,
endAngle,
fill,
payload,
percent,
// percent,
value,
} = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos;
const sy = cy + (outerRadius + 10) * sin;
const mx = cx + (outerRadius + 30) * cos;
const my = cy + (outerRadius + 30) * sin;
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
const ey = my;
const textAnchor = cos >= 0 ? "start" : "end";
// const sin = Math.sin(-RADIAN * midAngle);
// const cos = Math.cos(-RADIAN * midAngle);
// const sx = cx + (outerRadius + 10) * cos;
//const sy = cy + (outerRadius + 10) * sin;
// const mx = cx + (outerRadius + 30) * cos;
//const my = cy + (outerRadius + 30) * sin;
// const ex = mx + (cos >= 0 ? 1 : -1) * 22;
// const ey = my;
// const textAnchor = cos >= 0 ? "start" : "end";
return (
<g>
<text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
<text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
{payload.name}
</text>
<text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
{Dinero({ amount: Math.round(value * 100) }).toFormat()}
</text>
<Sector
cx={cx}
cy={cy}
@@ -117,29 +131,6 @@ const renderActiveShape = (props) => {
outerRadius={outerRadius + 10}
fill={fill}
/>
<path
d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
stroke={fill}
fill="none"
/>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
textAnchor={textAnchor}
fill="#333"
>
{payload.name}
</text>
<text
x={ex + (cos >= 0 ? 1 : -1) * 12}
y={ey}
dy={18}
textAnchor={textAnchor}
fill="#999"
>
{Dinero({ amount: Math.round(value * 100) }).toFormat()}
</text>
</g>
);
};

4
client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx
View File

@@ -69,8 +69,8 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
type="monotone"
name="Accumulated Sales"
dataKey="accSales"
fill="#8884d8"
stroke="#8884d8"
fill="#3CB371"
stroke="#3CB371"
/>
<Bar
name="Daily Sales"

12
client/src/components/dashboard-components/refresh-required.component.jsx
View File

@@ -1,8 +1,8 @@
import { Card, Typography } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import { Card } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function DashboardRefreshRequired(props) {
const { t } = useTranslation();
@@ -11,14 +11,14 @@ export default function DashboardRefreshRequired(props) {
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
textOverflow: "ellipsis",
}}
>
<SyncOutlined />
<Typography.Title level={4}>
{t("dashboard.errors.refreshrequired")}
</Typography.Title>
<SyncOutlined style={{ fontSize: "300%", margin: "1rem" }} />
<div>{t("dashboard.errors.refreshrequired")}</div>
</div>
</Card>
);

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

@@ -198,15 +198,19 @@ const componentList = {
label: "Production Dollars",
component: DashboardTotalProductionDollars,
gqlFragment: null,
w: 2,
w: 1,
h: 1,
minW: 2,
minH: 1,
},
ProductionHours: {
label: "Production Hours",
component: DashboardTotalProductionHours,
gqlFragment: DashboardTotalProductionHoursGql,
w: 2,
w: 3,
h: 1,
minW: 3,
minH: 1,
},
ProjectedMonthlySales: {
label: "Projected Monthly Sales",
@@ -214,6 +218,8 @@ const componentList = {
gqlFragment: DashboardProjectedMonthlySalesGql,
w: 2,
h: 1,
minW: 2,
minH: 1,
},
MonthlyRevenueGraph: {
label: "Monthly Sales Graph",
@@ -254,12 +260,15 @@ const componentList = {
};
const createDashboardQuery = (state) => {
const componentBasedAdditions = state.layout
.map((item, index) => componentList[item.i].gqlFragment || "")
.join("");
const componentBasedAdditions =
state &&
Array.isArray(state.layout) &&
state.layout
.map((item, index) => componentList[item.i].gqlFragment || "")
.join("");
return gql`
query QUERY_DASHBOARD_DETAILS {
${componentBasedAdditions}
${componentBasedAdditions || ""}
monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
.startOf("month")
.format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()

9
client/src/graphql/appointments.queries.js
View File

@@ -228,7 +228,6 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql`
where: { scheduled_completion: { _gte: $start, _lte: $end } }
) {
id
ro_number
scheduled_completion
labhrs: joblines_aggregate(
@@ -250,15 +249,9 @@ export const QUERY_SCHEDULE_LOAD_DATA = gql`
}
}
}
arrJobs: jobs(
where: {
scheduled_in: { _gte: $start, _lte: $end }
removed: { _eq: false }
}
) {
arrJobs: jobs(where: { scheduled_in: { _gte: $start, _lte: $end } }) {
id
scheduled_in
ro_number
labhrs: joblines_aggregate(
where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }

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

@@ -668,6 +668,7 @@
"addcomponent": "Add Component"
},
"errors": {
"refreshrequired": "You must refresh the dashboard data to see this component.",
"updatinglayout": "Error saving updated layout {{message}}"
},
"labels": {

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

@@ -668,6 +668,7 @@
"addcomponent": ""
},
"errors": {
"refreshrequired": "",
"updatinglayout": ""
},
"labels": {

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

@@ -668,6 +668,7 @@
"addcomponent": ""
},
"errors": {
"refreshrequired": "",
"updatinglayout": ""
},
"labels": {