Added report center IO-636

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -0,0 +1,131 @@
+import { Button, DatePicker, Form, Select, Switch } from "antd";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+export default function ReportCenterModalComponent({ context }) {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  const Templates = TemplateList("report_center");
+
+  const handleFinish = (values) => {
+    const start = values.dates[0];
+    const end = values.dates[1];
+    console.log("values", values);
+    GenerateDocument(
+      {
+        name: values.key,
+        variables: {
+          ...(start ? { start: start } : {}),
+          ...(end ? { end: end } : {}),
+        },
+      },
+      {
+        to: values.to,
+      },
+      values.email ? "e" : "p"
+    );
+  };
+
+  return (
+    <div>
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        layout="vertical"
+        form={form}
+        initialValues={{
+          to: [
+            "allan.carr@thinkimex.com",
+            "allanlcarr@outlook.com",
+            "allanlcarr@icloud.com",
+          ],
+        }}
+      >
+        <Form.Item
+          name="key"
+          label={t("reportcenter.labels.key")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select>
+            {Object.keys(Templates).map((key) => (
+              <Select.Option key={key}>{Templates[key].title}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          name="dates"
+          label={t("reportcenter.labels.dates")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <DatePicker.RangePicker
+            format="YYYY-MM-DD"
+            ranges={{
+              Today: [moment(), moment()],
+              "Last 14 days": [moment().subtract(14, "days"), moment()],
+              "Last 7 days": [moment().subtract(7, "days"), moment()],
+              "Next 7 days": [moment(), moment().add(7, "days")],
+              "Next 14 days": [moment(), moment().add(14, "days")],
+              "Last Month": [
+                moment().startOf("month").subtract(1, "month"),
+                moment().startOf("month").subtract(1, "month").endOf("month"),
+              ],
+              "This Month": [
+                moment().startOf("month"),
+                moment().endOf("month"),
+              ],
+              "Next Month": [
+                moment().startOf("month").add(1, "month"),
+                moment().startOf("month").add(1, "month").endOf("month"),
+              ],
+              "Last Quarter": [
+                moment().startOf("quarter").subtract(1, "quarters"),
+                moment().startOf("quarter").subtract(1, "day"),
+              ],
+              "This Quarter": [
+                moment().startOf("quarter"),
+                moment()
+                  .startOf("quarter")
+                  .add(1, "quarter")
+                  .subtract(1, "day"),
+              ],
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="email"
+          label={t("reportcenter.labels.generateasemail")}
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            marginTop: "1rem",
+          }}
+        >
+          <Button onClick={() => form.submit()} style={{}}>
+            {t("reportcenter.actions.generate")}
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+}

client/src/components/report-center-modal/report-center-modal.container.jsx

@@ -0,0 +1,42 @@
+import { Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectReportCenter } from "../../redux/modals/modals.selectors";
+import ReportCenterModalComponent from "./report-center-modal.component";
+
+const mapStateToProps = createStructuredSelector({
+  reportCenterModal: selectReportCenter,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("reportCenter")),
+});
+
+export function ReportCenterModalContainer({
+  reportCenterModal,
+  toggleModalVisible,
+}) {
+  const { t } = useTranslation();
+
+  const { visible } = reportCenterModal;
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("printcenter.labels.reportcentermodal")}
+      onOk={() => toggleModalVisible()}
+      cancelButtonProps={{ style: { display: "none" } }}
+      destroyOnClose
+    >
+      <ReportCenterModalComponent />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ReportCenterModalContainer);