WIP for Reporting. Pulled out calculations to utility functions.

src/components/molecules/jobs-targets-stats/jobs-targets-stats.molecule.jsx

@@ -1,9 +1,12 @@
 import { Skeleton, Statistic } from "antd";
-import Dinero from "dinero.js";
-import React, { useMemo } from "react";
+import React, { useCallback } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectSelectedJobTargetPc } from "../../../redux/application/application.selectors";
+import {
+  CalculateJobRpsDollars,
+  CalculateJobRpsPc,
+} from "../../../util/CalculateJobRps";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 
 const mapStateToProps = createStructuredSelector({
@@ -22,35 +25,12 @@ export function JobsTargetsStatsMolecule({
   job,
   selectedJobTargetPc,
 }) {
-  const currentRpsDollars = useMemo(() => {
-    if (!job) {
-      return 0;
-    }
-    return job.joblines
-      .filter((j) => !j.ignore)
-      .reduce((acc, val) => {
-        if (val.price_diff > 0) {
-          return acc.add(
-            Dinero({ amount: Math.round((val.price_diff || 0) * 100) })
-          );
-        } else {
-          return acc;
-        }
-      }, Dinero());
-  }, [job]);
+  const currentRpsDollars = useCallback(CalculateJobRpsDollars(job), [job]);
 
-  const currentRpsPc = useMemo(() => {
-    //TODO Redo this to do total of db price - act price / db price
-    if (!job) {
-      return 0;
-    }
-    const dbPriceSum = job.joblines
-      .filter((j) => !j.ignore)
-      .reduce((acc, val) => {
-        return acc + val.db_price;
-      }, 0);
-    return (currentRpsDollars.getAmount() / dbPriceSum).toFixed(1);
-  }, [job, currentRpsDollars]);
+  const currentRpsPc = useCallback(CalculateJobRpsPc(job, currentRpsDollars), [
+    job,
+    currentRpsDollars,
+  ]);
 
   if (loading) return <Skeleton active />;
   if (!job) return <ErrorResultAtom title="Error displaying job data." />;

src/components/molecules/reporting-dates/reporting-dates.molecule.jsx

@@ -0,0 +1,44 @@
+import { Button, DatePicker, Form } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { queryReportingData } from "../../../redux/reporting/reporting.actions";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({
+  queryReportingData: (dates) => dispatch(queryReportingData(dates)),
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ReportingDatesMolecule);
+
+export function ReportingDatesMolecule({ queryReportingData }) {
+  const [form] = Form.useForm();
+
+  const handleFinish = (values) => {
+    console.log("values", values);
+    queryReportingData({
+      startDate: values.dateRange[0],
+      endDate: values.dateRange[1],
+    });
+  };
+
+  return (
+    <Form form={form} onFinish={handleFinish}>
+      <div style={{ display: "flex" }}>
+        <Form.Item
+          label="Close Date Between"
+          name="dateRange"
+          rules={[{ type: "array", required: true }]}
+        >
+          <DatePicker.RangePicker />
+        </Form.Item>
+        <Button type="primary" htmlType="submit">
+          Run Search
+        </Button>
+      </div>
+    </Form>
+  );
+}

src/components/molecules/sider-sign-out/sider-sign-out.molecule.jsx

@@ -1,4 +1,4 @@
-import { UserOutlined } from "@ant-design/icons";
+import { LogoutOutlined } from "@ant-design/icons";
 import { Menu } from "antd";
 import React from "react";
 import { connect } from "react-redux";
@@ -11,7 +11,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function SiderSignOut({ signOutStart, ...restProps }) {
   return (
     <Menu.Item
-      icon={<UserOutlined />}
+      icon={<LogoutOutlined />}
       {...restProps}
       onClick={() => signOutStart()}
     >

src/components/organisms/sider-menu/sider-menu.organism.jsx

@@ -2,6 +2,7 @@ import {
   PieChartOutlined,
   SettingFilled,
   CloseOutlined,
+  BarChartOutlined,
 } from "@ant-design/icons";
 import { Menu } from "antd";
 import React from "react";
@@ -19,6 +20,9 @@ export default function SiderMenuOrganism() {
       <Menu.Item key="/" icon={<PieChartOutlined />}>
         <Link to="/">Jobs</Link>
       </Menu.Item>
+      <Menu.Item key="/reporting" icon={<BarChartOutlined />}>
+        <Link to="/reporting">Reporting</Link>
+      </Menu.Item>
       <Menu.Item key="/settings" icon={<SettingFilled />}>
         <Link to="/settings">Settings</Link>
       </Menu.Item>

src/components/pages/reporting/reporting.page.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReportingDatesMolecule from "../../molecules/reporting-dates/reporting-dates.molecule";
+
+export default function ReportingPage() {
+  return (
+    <div>
+      <ReportingDatesMolecule />
+    </div>
+  );
+}

src/components/pages/routes/routes.page.jsx

@@ -3,11 +3,13 @@ import React from "react";
 import { connect } from "react-redux";
 import { Route, Switch } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
-import Jobs from "../jobs/jobs.page";
-import SettingsPage from "../settings/settings.page";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
+import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
+import Jobs from "../jobs/jobs.page";
+import ReportingPage from "../reporting/reporting.page";
+import SettingsPage from "../settings/settings.page";
+
 const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop });
 const mapDispatchToProps = (dispatch) => ({});
 
@@ -32,6 +34,7 @@ export function RoutesPage({ bodyshop }) {
         <Layout.Content style={{ margin: "1rem", height: "100%" }}>
           <Switch>
             <Route exact path="/settings" component={SettingsPage} />
+            <Route exact path="/reporting" component={ReportingPage} />
             <Route path="/" component={Jobs} />
           </Switch>
         </Layout.Content>

src/components/pages/settings/settings.page.jsx

@@ -28,11 +28,3 @@ export default function SettingsPage() {
     </div>
   );
 }
-
-// <Button
-// onClick={() => {
-//   ipcRenderer.send(ipcTypes.default.filewatcher.start);
-// }}
-// >
-// Start Watcher
-// </Button>