diff --git a/client/src/components/report-center-modal/report-center-modal.component.jsx b/client/src/components/report-center-modal/report-center-modal.component.jsx
index e4d5badef..d7b97dd06 100644
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -1,26 +1,56 @@
-import { Button, DatePicker, Form, Select, Switch } from "antd";
+import { useLazyQuery } from "@apollo/react-hooks";
+import { Button, DatePicker, Form, Input, Select, Switch } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
+import { selectReportCenter } from "../../redux/modals/modals.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 
-export default function ReportCenterModalComponent({ context }) {
+const mapStateToProps = createStructuredSelector({
+  reportCenterModal: selectReportCenter,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ReportCenterModalComponent);
+
+export function ReportCenterModalComponent({ reportCenterModal }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
-
   const Templates = TemplateList("report_center");
+  const { visible } = reportCenterModal;
+
+  const [callVendorQuery, { loading, error, data, called }] = useLazyQuery(
+    QUERY_ALL_VENDORS,
+    {
+      skip: !(
+        visible &&
+        Templates[form.getFieldValue("key")] &&
+        Templates[form.getFieldValue("key")].idtype
+      ),
+    }
+  );
 
   const handleFinish = (values) => {
     const start = values.dates[0];
     const end = values.dates[1];
+    const { id } = values;
     console.log("values", values);
     GenerateDocument(
       {
         name: values.key,
         variables: {
-          ...(start ? { start: start } : {}),
-          ...(end ? { end: end } : {}),
+          ...(start ? { start: moment(start).format("YYYY-MM-DD") } : {}),
+          ...(end ? { end: moment(end).format("YYYY-MM-DD") } : {}),
+          ...(id ? { id: id } : {}),
         },
       },
       {
@@ -54,7 +84,32 @@ export default function ReportCenterModalComponent({ context }) {
             ))}
           </Select>
         </Form.Item>
-
+        <Form.Item dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            if (!key) return null;
+            //Kind of Id
+            const idtype = Templates[key] && Templates[key].idtype;
+            if (!idtype) return null;
+            if (!called && idtype === "vendor") callVendorQuery();
+            if (idtype === "vendor")
+              return (
+                <Form.Item
+                  name="id"
+                  label={t("reportcenter.labels.vendor")}
+                  rules={[
+                    {
+                      required: true,
+                      message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <VendorSearchSelect options={data ? data.vendors : []} />
+                </Form.Item>
+              );
+            else return null;
+          }}
+        </Form.Item>
         <Form.Item
           name="dates"
           label={t("reportcenter.labels.dates")}