Added report center IO-636

client/src/components/header/header.component.jsx

@@ -48,6 +48,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "timeTicket" })),
   setPaymentContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "payment" })),
+  setReportCenterContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "reportCenter" })),
   signOutStart: () => dispatch(signOutStart()),
 });
 
@@ -59,6 +61,7 @@ function Header({
   setBillEnterContext,
   setTimeTicketContext,
   setPaymentContext,
+  setReportCenterContext,
   recentItems,
 }) {
   const { t } = useTranslation();
@@ -268,7 +271,17 @@ function Header({
               {t("menus.header.shop_templates")}
             </Link>
           </Menu.Item>
-
+          <Menu.Item
+            key="reportcenter"
+            onClick={() => {
+              setReportCenterContext({
+                actions: {},
+                context: {},
+              });
+            }}
+          >
+            {t("menus.header.reportcenter")}
+          </Menu.Item>
           <Menu.Item key="shop-vendors">
             <Link to="/manage/shop/vendors">
               {t("menus.header.shop_vendors")}

client/src/components/print-center-speed-print/print-center-speed-print.component.jsx

@@ -72,8 +72,16 @@ const renderTemplateList = (templates) => {
     <span className="imex-flex-row__margin">
       {templates.map((template, idx) => {
         if (idx === templates.length - 1)
-          return TemplateListGenerated[template].title;
-        return `${TemplateListGenerated[template].title}, `;
+          return (
+            (TemplateListGenerated[template] &&
+              TemplateListGenerated[template].title) ||
+            ""
+          );
+        return `${
+          (TemplateListGenerated[template] &&
+            TemplateListGenerated[template].title) ||
+          ""
+        }, `;
       })}
     </span>
   );

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);