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

IO-306 Creation of dashboard.

Browse Source
This commit is contained in:
Patrick Fic
2021-06-14 16:00:58 -07:00
parent 3ab31c8bee
commit db76992c70
29 changed files with 16016 additions and 12803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,29 +2,32 @@ import { Card } from "antd";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";
import _ from "lodash";
import {
Area,
Bar,
CartesianGrid,
ComposedChart,
Legend,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis
Area,
Bar,
CartesianGrid,
ComposedChart,
Legend,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";
import Dinero from "dinero.js";
import * as Utils from "../../scoreboard-targets-table/scoreboard-targets-table.util";
export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
const { t } = useTranslation();
if (!data) return null;
const jobsByDate = {
"2020-07-5": [{ clm_total: 1224 }],
"2020-07-8": [{ clm_total: 987 }, { clm_total: 8755 }],
"2020-07-12": [{ clm_total: 684 }, { clm_total: 12022 }],
"2020-07-21": [{ clm_total: 15000 }],
"2020-07-28": [{ clm_total: 122 }, { clm_total: 4522 }],
};
const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
moment(item.date_invoiced).format("YYYY-MM-DD")
);
console.log(
"🚀 ~ file: monthly-revenue-graph.component.jsx ~ line 27 ~ jobsByDate",
jobsByDate
);
const listOfDays = Utils.ListOfDaysInCurrentMonth();
@@ -33,17 +36,19 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
let dailySales;
if (!!jobsByDate[val]) {
dailySales = jobsByDate[val].reduce((dayAcc, dayVal) => {
return dayAcc + dayVal.clm_total;
}, 0);
return dayAcc.add(Dinero(dayVal.job_totals.totals.subtotal));
}, Dinero());
} else {
dailySales = 0;
dailySales = Dinero();
}
const theValue = {
date: moment(val).format("D dd"),
dailySales,
date: moment(val).format("DD"),
dailySales: dailySales.getAmount() / 100,
accSales:
acc.length > 0 ? acc[acc.length - 1].accSales + dailySales : dailySales,
acc.length > 0
? acc[acc.length - 1].accSales + dailySales.getAmount() / 100
: dailySales.getAmount() / 100,
};
return [...acc, theValue];
@@ -80,3 +85,15 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
</Card>
);
}
export const DashboardMonthlyRevenueGraphGql = `
monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
.startOf("month")
.format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
.endOf("month")
.format("YYYY-MM-DD")}"}}]}) {
id
date_invoiced
job_totals
}
`;

27
client/src/components/dashboard-components/total-production-dollars/total-production-dollars.component.jsx
View File

@@ -1,32 +1,25 @@
import React from "react";
import { Card, Statistic } from "antd";
import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
export default function DashboardTotalProductionDollars({
data,
...cardProps
}) {
const { t } = useTranslation();
const aboveTargetProductionDollars = false;
if (!data) return null;
const dollars = data.production_jobs.reduce(
(acc, val) => acc.add(Dinero(val.job_totals.totals.subtotal)),
Dinero()
);
return (
<Card {...cardProps}>
<Statistic
title={t("dashboard.titles.productiondollars")}
value={175000.0}
precision={2}
prefix={
<div>
{aboveTargetProductionDollars ? (
<ArrowUpOutlined />
) : (
<ArrowDownOutlined />
)}
$
</div>
}
valueStyle={{ color: aboveTargetProductionDollars ? "green" : "red" }}
title={t("dashboard.labels.dollarsinproduction")}
value={dollars.toFormat()}
/>
</Card>
);

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

@@ -1,19 +1,54 @@
import React from "react";
import { Card, Statistic } from "antd";
import { Card, Space, Statistic } from "antd";
import { useTranslation } from "react-i18next";
import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
export default function DashboardTotalProductionHours({ data, ...cardProps }) {
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({});
export default connect(
mapStateToProps,
mapDispatchToProps
)(DashboardTotalProductionHours);
export function DashboardTotalProductionHours({
bodyshop,
data,
...cardProps
}) {
const { t } = useTranslation();
const aboveTargetHours = true;
if (!data) return null;
const hours = data.production_jobs.reduce(
(acc, val) => {
return {
body: acc.body + val.labhrs.aggregate.sum.mod_lb_hrs,
ref: acc.ref + val.larhrs.aggregate.sum.mod_lb_hrs,
total:
acc.total +
val.labhrs.aggregate.sum.mod_lb_hrs +
val.larhrs.aggregate.sum.mod_lb_hrs,
};
},
{ body: 0, ref: 0, total: 0 }
);
const aboveTargetHours = hours.total >= bodyshop.prodtargethrs;
return (
<Card {...cardProps}>
<Statistic
title={t("dashboard.titles.productionhours")}
value={750}
prefix={aboveTargetHours ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
/>
<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.prodhrs")}
value={hours.total}
valueStyle={{ color: aboveTargetHours ? "green" : "red" }}
/>
</Space>
</Card>
);
}
export const DashboardTotalProductionHoursGql = ``;