- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/job-costing-modal/job-costing-modal.component.jsx

@@ -1,32 +1,32 @@
-import { Typography } from "antd";
+import {Typography} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
 import JobCostingPartsTable from "../job-costing-parts-table/job-costing-parts-table.component";
 import JobCostingStatistics from "../job-costing-statistics/job-costing-statistics.component";
 import JobCostingPie from "./job-costing-modal.pie.component";
 
 export default function JobCostingModalComponent({
-  summaryData,
-  costCenterData,
-}) {
-  const { t } = useTranslation();
+                                                     summaryData,
+                                                     costCenterData,
+                                                 }) {
+    const {t} = useTranslation();
 
-  return (
-    <div>
-      <JobCostingStatistics summaryData={summaryData} />
-      <JobCostingPartsTable data={costCenterData} summaryData={summaryData} />
-      <div className="imex-flex-row">
-        <div style={{ flex: 1 }}>
-          <Typography.Title level={4}>
-            {t("jobs.labels.sales")}
-          </Typography.Title>
-          <JobCostingPie type="sales" costCenterData={costCenterData} />
+    return (
+        <div>
+            <JobCostingStatistics summaryData={summaryData}/>
+            <JobCostingPartsTable data={costCenterData} summaryData={summaryData}/>
+            <div className="imex-flex-row">
+                <div style={{flex: 1}}>
+                    <Typography.Title level={4}>
+                        {t("jobs.labels.sales")}
+                    </Typography.Title>
+                    <JobCostingPie type="sales" costCenterData={costCenterData}/>
+                </div>
+                <div style={{flex: 1}}>
+                    <Typography.Title level={4}>{t("jobs.labels.cost")}</Typography.Title>
+                    <JobCostingPie type="cost" costCenterData={costCenterData}/>
+                </div>
+            </div>
         </div>
-        <div style={{ flex: 1 }}>
-          <Typography.Title level={4}>{t("jobs.labels.cost")}</Typography.Title>
-          <JobCostingPie type="cost" costCenterData={costCenterData} />
-        </div>
-      </div>
-    </div>
-  );
+    );
 }

client/src/components/job-costing-modal/job-costing-modal.container.jsx

@@ -1,71 +1,72 @@
-import { Modal } from "antd";
+import {Modal} from "antd";
 import axios from "axios";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import { selectJobCosting } from "../../redux/modals/modals.selectors";
+import React, {useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {toggleModalVisible} from "../../redux/modals/modals.actions";
+import {selectJobCosting} from "../../redux/modals/modals.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobCostingModalComponent from "./job-costing-modal.component";
 
 const mapStateToProps = createStructuredSelector({
-  jobCostingModal: selectJobCosting,
+    jobCostingModal: selectJobCosting,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("jobCosting")),
+    toggleModalVisible: () => dispatch(toggleModalVisible("jobCosting")),
 });
 
 export function JobCostingModalContainer({
-  jobCostingModal,
-  toggleModalVisible,
-}) {
-  const { t } = useTranslation();
-  const [costingData, setCostingData] = useState(null);
-  const { open, context } = jobCostingModal;
-  const { jobId } = context;
+                                             jobCostingModal,
+                                             toggleModalVisible,
+                                         }) {
+    const {t} = useTranslation();
+    const [costingData, setCostingData] = useState(null);
+    const {open, context} = jobCostingModal;
+    const {jobId} = context;
 
-  useEffect(() => {
-    async function getData() {
-      if (jobId && open) {
-        const { data } = await axios.post("/job/costing", { jobid: jobId });
+    useEffect(() => {
+        async function getData() {
+            if (jobId && open) {
+                const {data} = await axios.post("/job/costing", {jobid: jobId});
 
-        setCostingData(data);
-      }
-    }
-    getData();
-  }, [jobId, open]);
+                setCostingData(data);
+            }
+        }
 
-  return (
-    <Modal
-      open={open}
-      title={t("jobs.labels.jobcosting")}
-      onOk={() => {
-        toggleModalVisible();
-        setCostingData(null);
-      }}
-      onCancel={() => {
-        toggleModalVisible();
-        setCostingData(null);
-      }}
-      cancelButtonProps={{ style: { display: "none" } }}
-      width="90%"
-      destroyOnClose
-    >
-      {!costingData ? (
-        <LoadingSpinner loading={true} />
-      ) : (
-        <JobCostingModalComponent
-          costCenterData={costingData.costCenterData}
-          summaryData={costingData.summaryData}
-        />
-      )}
-    </Modal>
-  );
+        getData();
+    }, [jobId, open]);
+
+    return (
+        <Modal
+            open={open}
+            title={t("jobs.labels.jobcosting")}
+            onOk={() => {
+                toggleModalVisible();
+                setCostingData(null);
+            }}
+            onCancel={() => {
+                toggleModalVisible();
+                setCostingData(null);
+            }}
+            cancelButtonProps={{style: {display: "none"}}}
+            width="90%"
+            destroyOnClose
+        >
+            {!costingData ? (
+                <LoadingSpinner loading={true}/>
+            ) : (
+                <JobCostingModalComponent
+                    costCenterData={costingData.costCenterData}
+                    summaryData={costingData.summaryData}
+                />
+            )}
+        </Modal>
+    );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobCostingModalContainer);

client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx

@@ -1,67 +1,68 @@
-import React, { useCallback, useMemo } from "react";
-import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+import React, {useCallback, useMemo} from "react";
+import {Cell, Pie, PieChart, ResponsiveContainer} from "recharts";
 import Dinero from "dinero.js";
+
 export default function JobCostingPieComponent({
-  type = "sales",
-  costCenterData,
-}) {
-  const Calculatedata = useCallback(
-    (data) => {
-      if (data && data.length > 0) {
-        return data.reduce((acc, i) => {
-          const value =
-            type === "sales"
-              ? Dinero(i.sales_dinero).getAmount()
-              : Dinero(i.costs_dinero).getAmount();
+                                                   type = "sales",
+                                                   costCenterData,
+                                               }) {
+    const Calculatedata = useCallback(
+        (data) => {
+            if (data && data.length > 0) {
+                return data.reduce((acc, i) => {
+                    const value =
+                        type === "sales"
+                            ? Dinero(i.sales_dinero).getAmount()
+                            : Dinero(i.costs_dinero).getAmount();
 
-          if (value > 0) {
-            acc.push({
-              name: i.cost_center,
-              color: "#" + Math.floor(Math.random() * 16777215).toString(16),
+                    if (value > 0) {
+                        acc.push({
+                            name: i.cost_center,
+                            color: "#" + Math.floor(Math.random() * 16777215).toString(16),
 
-              label: `${i.cost_center} - ${
-                type === "sales"
-                  ? Dinero(i.sales_dinero).toFormat()
-                  : Dinero(i.costs_dinero).toFormat()
-              }`,
-              value:
-                type === "sales"
-                  ? Dinero(i.sales_dinero).getAmount()
-                  : Dinero(i.costs_dinero).getAmount(),
-            });
-          }
-          return acc;
-        }, []);
-      } else {
-        return [];
-      }
-    },
-    [type]
-  );
+                            label: `${i.cost_center} - ${
+                                type === "sales"
+                                    ? Dinero(i.sales_dinero).toFormat()
+                                    : Dinero(i.costs_dinero).toFormat()
+                            }`,
+                            value:
+                                type === "sales"
+                                    ? Dinero(i.sales_dinero).getAmount()
+                                    : Dinero(i.costs_dinero).getAmount(),
+                        });
+                    }
+                    return acc;
+                }, []);
+            } else {
+                return [];
+            }
+        },
+        [type]
+    );
 
-  const memoizedData = useMemo(() => Calculatedata(costCenterData), [
-    costCenterData,
-    Calculatedata,
-  ]);
+    const memoizedData = useMemo(() => Calculatedata(costCenterData), [
+        costCenterData,
+        Calculatedata,
+    ]);
 
-  return (
-    <ResponsiveContainer width="100%" height={175}>
-      <PieChart>
-        <Pie
-          data={memoizedData}
-          innerRadius={40}
-          outerRadius={50}
-          fill="#8884d8"
-          paddingAngle={5}
-          dataKey="value"
-          label={(entry) => entry.label}
-          labelLine
-        >
-          {memoizedData.map((entry, index) => (
-            <Cell key={`cell-${index}`} fill={entry.color} />
-          ))}
-        </Pie>
-      </PieChart>
-    </ResponsiveContainer>
-  );
+    return (
+        <ResponsiveContainer width="100%" height={175}>
+            <PieChart>
+                <Pie
+                    data={memoizedData}
+                    innerRadius={40}
+                    outerRadius={50}
+                    fill="#8884d8"
+                    paddingAngle={5}
+                    dataKey="value"
+                    label={(entry) => entry.label}
+                    labelLine
+                >
+                    {memoizedData.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={entry.color}/>
+                    ))}
+                </Pie>
+            </PieChart>
+        </ResponsiveContainer>
+    );
 }