Reformat all project files to use the prettier config file.

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

@@ -1,32 +1,27 @@
-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();
+export default function JobCostingModalComponent({ 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}/>
-                </div>
-                <div style={{flex: 1}}>
-                    <Typography.Title level={4}>{t("jobs.labels.cost")}</Typography.Title>
-                    <JobCostingPie type="cost" costCenterData={costCenterData}/>
-                </div>
-            </div>
+  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>
+  );
 }

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

@@ -1,72 +1,63 @@
-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;
+export function JobCostingModalContainer({ 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);
-            }
-        }
+        setCostingData(data);
+      }
+    }
 
-        getData();
-    }, [jobId, open]);
+    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>
-    );
+  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
-)(JobCostingModalContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(JobCostingModalContainer);

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

@@ -1,68 +1,54 @@
-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();
+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();
 
-                    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>
+  );
 }