diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index ba556935d..5e8b34dc7 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -12169,6 +12169,27 @@
+
+ cost
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
create
@@ -12384,6 +12405,27 @@
+
+ estimated
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
existing_jobs
false
@@ -12426,6 +12468,48 @@
+
+ gpdollars
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
+
+ gppercent
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
hrs_claimed
false
@@ -12510,6 +12594,27 @@
+
+ jobcosting
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
laborallocations
false
diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx
index 0733204cd..f63a7586f 100644
--- a/client/src/App/App.container.jsx
+++ b/client/src/App/App.container.jsx
@@ -108,12 +108,17 @@ if (process.env.NODE_ENV === "development") {
middlewares.push(retryLink.concat(errorLink.concat(authLink.concat(link))));
-const cache = new InMemoryCache();
+const cache = new InMemoryCache({});
export const client = new ApolloClient({
link: ApolloLink.from(middlewares),
cache,
connectToDevTools: process.env.NODE_ENV !== "production",
+ defaultOptions: {
+ watchQuery: {
+ fetchPolicy: "cache-and-network",
+ },
+ },
});
export default function AppContainer() {
diff --git a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
index be5c1ed23..21324666d 100644
--- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
+++ b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
@@ -1,11 +1,11 @@
-import React from "react";
+import React, { forwardRef } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { useTranslation } from "react-i18next";
//To be used as a form element only.
-const DateTimePicker = ({ value, onChange, onBlur }) => {
+const DateTimePicker = ({ value, onChange, onBlur }, ref) => {
const { t } = useTranslation();
const handleChange = (value) => {
@@ -30,4 +30,4 @@ const DateTimePicker = ({ value, onChange, onBlur }) => {
);
};
-export default DateTimePicker;
+export default forwardRef(DateTimePicker);
diff --git a/client/src/components/job-costing-modal/job-costing-modal.component.jsx b/client/src/components/job-costing-modal/job-costing-modal.component.jsx
new file mode 100644
index 000000000..8b36d8433
--- /dev/null
+++ b/client/src/components/job-costing-modal/job-costing-modal.component.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import JobCostingPartsTable from "../job-costing-parts-table/job-costing-parts-table.component";
+import { Row, Col } from "antd";
+
+const colSpan = {
+ md: { span: 24 },
+ lg: { span: 12 },
+};
+
+export default function JobCostingModalComponent({ job }) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/client/src/components/job-costing-modal/job-costing-modal.container.jsx b/client/src/components/job-costing-modal/job-costing-modal.container.jsx
new file mode 100644
index 000000000..51d1a0851
--- /dev/null
+++ b/client/src/components/job-costing-modal/job-costing-modal.container.jsx
@@ -0,0 +1,57 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_JOB_COSTING_DETAILS } from "../../graphql/jobs.queries";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectJobCosting } from "../../redux/modals/modals.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobCostingModalComponent from "./job-costing-modal.component";
+
+const mapStateToProps = createStructuredSelector({
+ jobCostingModal: selectJobCosting,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ toggleModalVisible: () => dispatch(toggleModalVisible("jobCosting")),
+});
+
+export function JobCostingModalContainer({
+ jobCostingModal,
+ toggleModalVisible,
+}) {
+ const { t } = useTranslation();
+
+ const { visible, context, actions } = jobCostingModal;
+ const { jobId } = context;
+
+ const { loading, error, data } = useQuery(QUERY_JOB_COSTING_DETAILS, {
+ variables: { id: jobId },
+ skip: !jobId,
+ });
+
+ return (
+ toggleModalVisible()}
+ width='90%'
+ destroyOnClose
+ forceRender>
+ {error ? : null}
+ {loading ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(JobCostingModalContainer);
diff --git a/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx b/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx
new file mode 100644
index 000000000..fb7a4c899
--- /dev/null
+++ b/client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx
@@ -0,0 +1,120 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import "./job-costing-parts-table.styles.scss";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import Dinero from "dinero.js";
+
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+ //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobCostingPartsTable({ bodyshop, job }) {
+ console.log("JobCostingPartsTable -> job", job);
+ const { t } = useTranslation();
+ const defaultProfits = bodyshop.md_responsibility_centers.defaults.profits;
+ console.log("JobCostingPartsTable -> defaultProfits", defaultProfits);
+ const defaultCosts = bodyshop.md_responsibility_centers.defaults.costs;
+
+ //Need to get the sums of the job lines by cost center.
+ const jobLineTotalsByProfitCenter = job.joblines.reduce(
+ (acc, val) => {
+ const laborProfitCenter = defaultProfits[val.mod_lbr_ty];
+ if (!!!laborProfitCenter)
+ console.log(
+ "Unknown cost/profit center mapping for labor.",
+ val.mod_lbr_ty
+ );
+
+ const rateName = `rate_${(val.mod_lbr_ty || "").toLowerCase()}`;
+ const laborAmount = Dinero({
+ amount: Math.round((job[rateName] || 0) * 100),
+ }).multiply(val.mod_lb_hrs || 0);
+ if (!!!acc.labor[laborProfitCenter])
+ acc.labor[laborProfitCenter] = Dinero();
+ acc.labor[laborProfitCenter] = acc.labor[laborProfitCenter].add(
+ laborAmount
+ );
+
+ const partsProfitCenter = defaultProfits[val.part_type];
+ if (!!!partsProfitCenter)
+ console.log(
+ "Unknown cost/profit center mapping for parts.",
+ val.part_type
+ );
+ const partsAmount = Dinero({
+ amount: Math.round((val.act_price || 0) * 100),
+ }).multiply(val.part_qty || 1);
+ if (!!!acc.parts[partsProfitCenter])
+ acc.parts[partsProfitCenter] = Dinero();
+ acc.parts[partsProfitCenter] = acc.parts[partsProfitCenter].add(
+ partsAmount
+ );
+
+ return acc;
+ },
+ { parts: {}, labor: {} }
+ );
+
+ const invoiceTotalsByProfitCenter = job.invoices.reduce(
+ (inv_acc, inv_val) => {
+ //At the invoice level.
+ const t = inv_val.invoicelines.map((line_val) => {
+ //At the invoice line level.
+ console.log("JobCostingPartsTable -> line_val", line_val);
+ if (!!!inv_acc[line_val.cost_center])
+ inv_acc[line_val.cost_center] = Dinero();
+
+ inv_acc[line_val.cost_center] = inv_acc[line_val.cost_center].add(
+ Dinero({
+ amount: Math.round((line_val.actual_cost || 0) * 100),
+ })
+ .multiply(line_val.quantity)
+ .multiply(inv_val.is_credit_memo ? -1 : 1)
+ );
+
+ return null;
+ });
+
+ return inv_acc;
+ },
+ {}
+ );
+ console.log(
+ "JobCostingPartsTable -> invoiceTotalsByProfitCenter",
+ invoiceTotalsByProfitCenter
+ );
+
+ return (
+
+
+
+
+ | {t("bodyshop.fields.responsibilitycenter")} |
+ {t("jobs.labels.estimated")} |
+ {t("jobs.labels.cost")} |
+ {t("jobs.labels.gpdollars")} |
+ {t("jobs.labels.gppercent")} |
+
+
+
+
+ | Cost Center |
+ $12345.45 |
+ $123.45 |
+ $1234.00 |
+ 50.58% |
+
+
+
+