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()}
     >