Add quick reports.

package.json

@@ -3,7 +3,7 @@
   "productName": "ImEX RPS",
   "author": "ImEX Systems Inc. <support@thinkimex.com>",
   "description": "ImEX RPS",
-  "version": "1.4.2-alpha.11",
+  "version": "1.4.2-alpha.12",
   "main": "electron/main.js",
   "homepage": "./",
   "dependencies": {

src/components/atoms/quick-report-float-button/quick-report-float-button.atom.jsx

@@ -0,0 +1,44 @@
+import { CalendarFilled } from "@ant-design/icons";
+import { FloatButton } from "antd";
+import { connect } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { queryReportingData } from "../../../redux/reporting/reporting.actions";
+import dayjs from "../../../util/day.js";
+
+const mapDispatchToProps = (dispatch) => ({
+  queryReportingData: (dates) => dispatch(queryReportingData(dates))
+});
+export default connect(null, mapDispatchToProps)(QuickReportFloatButton);
+
+function QuickReportFloatButton({ queryReportingData }) {
+  const navigate = useNavigate();
+
+  const handleQuickReport = (startDate, endDate) => {
+    queryReportingData({
+      startDate,
+      endDate
+    });
+    navigate("/reporting");
+  };
+
+  return (
+    <FloatButton.Group
+      shape="square"
+      trigger="hover"
+      icon={<CalendarFilled />}
+      style={{
+        marginBottom: "48px"
+      }}
+    >
+      <FloatButton
+        description="Mo."
+        size="large"
+        onClick={() => handleQuickReport(dayjs().startOf("month"), dayjs().endOf("month"))}
+      />
+      <FloatButton
+        description="3Mo."
+        onClick={() => handleQuickReport(dayjs().startOf("month").subtract(2, "month"), dayjs().endOf("month"))}
+      />
+    </FloatButton.Group>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { Button, DatePicker, Form, Space } from "antd";
+import { Button, DatePicker, Divider, Form, Space, Typography } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,7 +24,7 @@ export function ReportingDatesMolecule({ queryReportingData }) {
 
   return (
     <Form form={form} onFinish={handleFinish}>
-      <Space wrap align="middle">
+      <Space wrap align="start">
         <Form.Item
           label="Ready for Payment Date Between"
           name="dateRange"
@@ -78,6 +78,86 @@ export function ReportingDatesMolecule({ queryReportingData }) {
           Run Search
         </Button>
       </Space>
+      <Space align="baseline" wrap>
+        <Typography.Title level={5}>Quick Ranges:</Typography.Title>
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [
+                dayjs().startOf("month").subtract(1, "month"),
+                dayjs().startOf("month").subtract(1, "month").endOf("month")
+              ]
+            })
+          }
+        >
+          Last Month
+        </Button>
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [dayjs().startOf("month"), dayjs().endOf("month")]
+            })
+          }
+        >
+          This Month
+        </Button>
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [
+                dayjs().startOf("month").add(1, "month"),
+                dayjs().startOf("month").add(1, "month").endOf("month")
+              ]
+            })
+          }
+        >
+          Next Month
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [
+                dayjs().startOf("month").subtract(3, "month"),
+                dayjs().startOf("month").subtract(1, "month").endOf("month")
+              ]
+            })
+          }
+        >
+          Last 3 Months (Exclusive)
+        </Button>
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [dayjs().startOf("month").subtract(2, "month"), dayjs().endOf("month")]
+            })
+          }
+        >
+          Last 3 Months (Inclusive)
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [
+                dayjs().startOf("quarter").subtract(1, "quarter"),
+                dayjs().startOf("quarter").subtract(1, "day")
+              ]
+            })
+          }
+        >
+          Last Quarter
+        </Button>
+        <Button
+          onClick={() =>
+            handleFinish({
+              dateRange: [dayjs().startOf("quarter"), dayjs().startOf("quarter").add(1, "quarter").subtract(1, "day")]
+            })
+          }
+        >
+          This Quarter
+        </Button>
+      </Space>
     </Form>
   );
 }

src/components/pages/jobs/jobs.page.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import JobsDetailOrganism from "../../organisms/jobs-detail/jobs-detail.organism";
 import JobsListOrganism from "../../organisms/jobs-list-latest/jobs-list-latest.organism";
 import JobsListSearchOrganism from "../../organisms/jobs-list-search/jobs-list-search.organism";
+import QuickReportFloatButton from "../../atoms/quick-report-float-button/quick-report-float-button.atom";
 
 export default function JobsPage() {
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
@@ -15,12 +16,10 @@ export default function JobsPage() {
     md: { l: 10, r: 14 },
     lg: { l: 8, r: 16 },
     xl: { l: 6, r: 18 },
-    xxl: { l: 5, r: 19 },
+    xxl: { l: 5, r: 19 }
   };
 
-  const selectedSpans = selectedBreakpoint
-    ? bpoints[selectedBreakpoint[0]]
-    : { l: 18, r: 6 };
+  const selectedSpans = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : { l: 18, r: 6 };
 
   return (
     <div style={{ height: "100%" }}>
@@ -34,14 +33,14 @@ export default function JobsPage() {
                 key: "latest",
                 label: "Latest",
                 children: <JobsListOrganism />,
-                style: { height: "100%" },
+                style: { height: "100%" }
               },
               {
                 key: "search",
                 label: "Search",
                 children: <JobsListSearchOrganism />,
-                style: { height: "100%" },
-              },
+                style: { height: "100%" }
+              }
             ]}
           ></Tabs>
         </Col>
@@ -49,6 +48,7 @@ export default function JobsPage() {
           <JobsDetailOrganism />
         </Col>
       </Row>
+      <QuickReportFloatButton />
     </div>
   );
 }