IO-306 Further development of dashboard.
This commit is contained in:
Patrick Fic
@@ -1,6 +1,8 @@
|
||||
import Icon, { SyncOutlined } from "@ant-design/icons";
|
||||
import { gql, useMutation, useQuery } from "@apollo/client";
|
||||
import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import React, { useState } from "react";
|
||||
import { Responsive, WidthProvider } from "react-grid-layout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -14,10 +16,15 @@ import {
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import AlertComponent from "../alert/alert.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";
|
||||
import DashboardMonthlyRevenueGraph, {
|
||||
DashboardMonthlyRevenueGraphGql,
|
||||
} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
|
||||
import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
|
||||
import DashboardProjectedMonthlySales, {
|
||||
DashboardProjectedMonthlySalesGql,
|
||||
} from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
|
||||
import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
|
||||
import DashboardTotalProductionHours, {
|
||||
DashboardTotalProductionHoursGql,
|
||||
@@ -44,8 +51,9 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
const [state, setState] = useState({
|
||||
...(bodyshop.associations[0].user.dashboardlayout
|
||||
? bodyshop.associations[0].user.dashboardlayout
|
||||
: { items: [], layout: [], layouts: [] }),
|
||||
: { items: [], layout: {}, layouts: [] }),
|
||||
});
|
||||
|
||||
const { loading, error, data, refetch } = useQuery(
|
||||
createDashboardQuery(state)
|
||||
);
|
||||
@@ -74,7 +82,12 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
const handleRemoveComponent = (key) => {
|
||||
logImEXEvent("dashboard_remove_component", { name: key });
|
||||
const idxToRemove = state.items.findIndex((i) => i.i === key);
|
||||
const items = state.items;
|
||||
console.log(
|
||||
"🚀 ~ file: dashboard-grid.component.jsx ~ line 81 ~ idxToRemove",
|
||||
idxToRemove
|
||||
);
|
||||
const items = _.cloneDeep(state.items);
|
||||
|
||||
items.splice(idxToRemove, 1);
|
||||
setState({ ...state, items });
|
||||
};
|
||||
@@ -88,7 +101,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
{
|
||||
i: e.key,
|
||||
x: (state.items.length * 2) % (state.cols || 12),
|
||||
y: Infinity, // puts it at the bottom
|
||||
y: 99, // puts it at the bottom
|
||||
w: componentList[e.key].w || 2,
|
||||
h: componentList[e.key].h || 2,
|
||||
},
|
||||
@@ -100,11 +113,6 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
() => GenerateDashboardData(data),
|
||||
[data]
|
||||
);
|
||||
|
||||
// const onBreakpointChange = (breakpoint, cols) => {
|
||||
// setState({ ...state, breakpoint: breakpoint, cols: cols });
|
||||
// };
|
||||
|
||||
const existingLayoutKeys = state.items.map((i) => i.i);
|
||||
const addComponentOverlay = (
|
||||
<Menu onClick={handleAddComponent}>
|
||||
@@ -149,7 +157,14 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
{state.items.map((item, index) => {
|
||||
const TheComponent = componentList[item.i].component;
|
||||
return (
|
||||
<div key={item.i} data-grid={item}>
|
||||
<div
|
||||
key={item.i}
|
||||
data-grid={{
|
||||
...item,
|
||||
minH: componentList[item.i].minH || 1,
|
||||
minW: componentList[item.i].minW || 1,
|
||||
}}
|
||||
>
|
||||
<LoadingSkeleton loading={loading}>
|
||||
<Icon
|
||||
component={MdClose}
|
||||
@@ -196,7 +211,7 @@ const componentList = {
|
||||
ProjectedMonthlySales: {
|
||||
label: "Projected Monthly Sales",
|
||||
component: DashboardProjectedMonthlySales,
|
||||
gqlFragment: null,
|
||||
gqlFragment: DashboardProjectedMonthlySalesGql,
|
||||
w: 2,
|
||||
h: 1,
|
||||
},
|
||||
@@ -204,6 +219,35 @@ const componentList = {
|
||||
label: "Monthly Sales Graph",
|
||||
component: DashboardMonthlyRevenueGraph,
|
||||
gqlFragment: DashboardMonthlyRevenueGraphGql,
|
||||
w: 4,
|
||||
h: 2,
|
||||
minW: 4,
|
||||
minH: 2,
|
||||
},
|
||||
MonthlyJobCosting: {
|
||||
label: "Monthly Job Costing",
|
||||
component: DashboardMonthlyJobCosting,
|
||||
gqlFragment: null,
|
||||
minW: 6,
|
||||
minH: 3,
|
||||
w: 6,
|
||||
h: 3,
|
||||
},
|
||||
MonthlyPartsSales: {
|
||||
label: "Monthly Parts Sales",
|
||||
component: DashboardMonthlyPartsSales,
|
||||
gqlFragment: null,
|
||||
minW: 2,
|
||||
minH: 2,
|
||||
w: 2,
|
||||
h: 2,
|
||||
},
|
||||
MonthlyLaborSales: {
|
||||
label: "Monthly Parts Sales",
|
||||
component: DashboardMonthlyLaborSales,
|
||||
gqlFragment: null,
|
||||
minW: 2,
|
||||
minH: 2,
|
||||
w: 2,
|
||||
h: 2,
|
||||
},
|
||||
@@ -216,6 +260,46 @@ const createDashboardQuery = (state) => {
|
||||
return gql`
|
||||
query QUERY_DASHBOARD_DETAILS {
|
||||
${componentBasedAdditions}
|
||||
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
|
||||
rate_la1
|
||||
rate_la2
|
||||
rate_la3
|
||||
rate_la4
|
||||
rate_laa
|
||||
rate_lab
|
||||
rate_lad
|
||||
rate_lae
|
||||
rate_laf
|
||||
rate_lag
|
||||
rate_lam
|
||||
rate_lar
|
||||
rate_las
|
||||
rate_lau
|
||||
rate_ma2s
|
||||
rate_ma2t
|
||||
rate_ma3s
|
||||
rate_mabl
|
||||
rate_macs
|
||||
rate_mahw
|
||||
rate_mapa
|
||||
rate_mash
|
||||
rate_matd
|
||||
joblines(where: { removed: { _eq: false } }) {
|
||||
id
|
||||
mod_lbr_ty
|
||||
mod_lb_hrs
|
||||
act_price
|
||||
part_qty
|
||||
part_type
|
||||
}
|
||||
}
|
||||
production_jobs: jobs(where: { inproduction: { _eq: true } }) {
|
||||
id
|
||||
ro_number
|
||||
|
||||
@@ -127,13 +127,28 @@
|
||||
.dashboard-card {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.ant-card-body {
|
||||
// background-color: red;
|
||||
height: 90%;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// // background-color: red;
|
||||
// height: 90%;
|
||||
// width: 100%;
|
||||
// padding: 8px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
.ant-spin-container {
|
||||
height: 100%;
|
||||
.ant-table {
|
||||
height: 100%;
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user