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 f2906c338..255273419 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,14 +1,14 @@
 import { useLazyQuery } from "@apollo/client";
 import {
-	Button,
-	Card,
-	Col,
-	DatePicker,
-	Form,
-	Input,
-	Radio,
-	Row,
-	Typography,
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Form,
+  Input,
+  Radio,
+  Row,
+  Typography,
 } from "antd";
 import _ from "lodash";
 import moment from "moment";
@@ -26,281 +26,281 @@ import EmployeeSearchSelect from "../employee-search-select/employee-search-sele
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import "./report-center-modal.styles.scss";
 const mapStateToProps = createStructuredSelector({
-	reportCenterModal: selectReportCenter,
+  reportCenterModal: selectReportCenter,
 });
 const mapDispatchToProps = (dispatch) => ({
-	//setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-	mapStateToProps,
-	mapDispatchToProps
+  mapStateToProps,
+  mapDispatchToProps
 )(ReportCenterModalComponent);
 
 export function ReportCenterModalComponent({ reportCenterModal }) {
-	const [form] = Form.useForm();
-	const [search, setSearch] = useState("");
+  const [form] = Form.useForm();
+  const [search, setSearch] = useState("");
 
-	const [loading, setLoading] = useState(false);
-	const { t } = useTranslation();
-	const Templates = TemplateList("report_center");
-	const ReportsList = Object.keys(Templates).map((key) => {
-		return Templates[key];
-	});
-	const { visible } = reportCenterModal;
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+  const Templates = TemplateList("report_center");
+  const ReportsList = Object.keys(Templates).map((key) => {
+    return Templates[key];
+  });
+  const { visible } = reportCenterModal;
 
-	const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
-		useLazyQuery(QUERY_ALL_VENDORS, {
-			skip: !(
-				visible &&
-				Templates[form.getFieldValue("key")] &&
-				Templates[form.getFieldValue("key")].idtype
-			),
-		});
+  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
+    useLazyQuery(QUERY_ALL_VENDORS, {
+      skip: !(
+        visible &&
+        Templates[form.getFieldValue("key")] &&
+        Templates[form.getFieldValue("key")].idtype
+      ),
+    });
 
-	const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
-		useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
-			skip: !(
-				visible &&
-				Templates[form.getFieldValue("key")] &&
-				Templates[form.getFieldValue("key")].idtype
-			),
-		});
+  const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
+    useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
+      skip: !(
+        visible &&
+        Templates[form.getFieldValue("key")] &&
+        Templates[form.getFieldValue("key")].idtype
+      ),
+    });
 
-	const handleFinish = async (values) => {
-		setLoading(true);
-		const start = values.dates[0];
-		const end = values.dates[1];
-		const { id } = values;
+  const handleFinish = async (values) => {
+    setLoading(true);
+    const start = values.dates[0];
+    const end = values.dates[1];
+    const { id } = values;
 
-		await GenerateDocument(
-			{
-				name: values.key,
-				variables: {
-					...(start
-						? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
-						: {}),
-					...(end
-						? { end: moment(end).endOf("day").format("YYYY-MM-DD") }
-						: {}),
-					...(start ? { starttz: moment(start).startOf("day") } : {}),
-					...(end ? { endtz: moment(end).endOf("day") } : {}),
+    await GenerateDocument(
+      {
+        name: values.key,
+        variables: {
+          ...(start
+            ? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
+            : {}),
+          ...(end
+            ? { end: moment(end).endOf("day").format("YYYY-MM-DD") }
+            : {}),
+          ...(start ? { starttz: moment(start).startOf("day") } : {}),
+          ...(end ? { endtz: moment(end).endOf("day") } : {}),
 
-					...(id ? { id: id } : {}),
-				},
-			},
-			{
-				to: values.to,
-				subject: Templates[values.key]?.subject,
-			},
-			values.sendby === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
-			id
-		);
-		setLoading(false);
-	};
+          ...(id ? { id: id } : {}),
+        },
+      },
+      {
+        to: values.to,
+        subject: Templates[values.key]?.subject,
+      },
+      values.sendby === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
+      id
+    );
+    setLoading(false);
+  };
 
-	const FilteredReportsList =
-		search !== ""
-			? ReportsList.filter((r) =>
-					r.title.toLowerCase().includes(search.toLowerCase())
-			  )
-			: ReportsList;
+  const FilteredReportsList =
+    search !== ""
+      ? ReportsList.filter((r) =>
+          r.title.toLowerCase().includes(search.toLowerCase())
+        )
+      : ReportsList;
 
-	//Group it, create cards, and then filter out.
+  //Group it, create cards, and then filter out.
 
-	const grouped = _.groupBy(FilteredReportsList, "group");
+  const grouped = _.groupBy(FilteredReportsList, "group");
 
-	return (
-		<div>
-			<Form
-				onFinish={handleFinish}
-				autoComplete={"off"}
-				layout="vertical"
-				form={form}
-			>
-				<Input.Search
-					onChange={(e) => setSearch(e.target.value)}
-					value={search}
-				/>
-				<Form.Item
-					name="key"
-					label={t("reportcenter.labels.key")}
-					//  className="radio-group-columns"
-					rules={[
-						{
-							required: true,
-							//message: t("general.validation.required"),
-						},
-					]}
-				>
-					<Radio.Group>
-						{/* {Object.keys(Templates).map((key) => (
+  return (
+    <div>
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        layout="vertical"
+        form={form}
+      >
+        <Input.Search
+          onChange={(e) => setSearch(e.target.value)}
+          value={search}
+        />
+        <Form.Item
+          name="key"
+          label={t("reportcenter.labels.key")}
+          //  className="radio-group-columns"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Radio.Group>
+            {/* {Object.keys(Templates).map((key) => (
                 <Radio key={key} value={key}>
                   {Templates[key].title}
                 </Radio>
               ))} */}
 
-						<Row gutter={[16, 16]}>
-							{Object.keys(grouped).map((key) => (
-								<Col md={8} sm={12} key={key}>
-									<Card.Grid
-										style={{
-											width: "100%",
-											height: "100%",
-											maxHeight: "33vh",
-											overflowY: "scroll",
-										}}
-									>
-										<Typography.Title level={4}>
-											{t(`reportcenter.labels.groups.${key}`)}
-										</Typography.Title>
-										<ul style={{ columns: "2 auto" }}>
-											{grouped[key].map((item) => (
-												<li key={item.key}>
-													<Radio key={item.key} value={item.key}>
-														{item.title}
-													</Radio>
-												</li>
-											))}
-										</ul>
-									</Card.Grid>
-								</Col>
-							))}
-						</Row>
-					</Radio.Group>
-				</Form.Item>
-				<Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
-					{() => {
-						const key = form.getFieldValue("key");
-						if (!key) return null;
-						//Kind of Id
-						const rangeFilter = Templates[key] && Templates[key].rangeFilter;
-						if (!rangeFilter) return null;
-						return (
-							<div>
-								{t("reportcenter.labels.filterson", {
-									object: rangeFilter.object,
-									field: rangeFilter.field,
-								})}
-							</div>
-						);
-					}}
-				</Form.Item>
-				<Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
-					{() => {
-						const key = form.getFieldValue("key");
-						const currentId = form.getFieldValue("id");
-						if (!key) return null;
-						//Kind of Id
-						const idtype = Templates[key] && Templates[key].idtype;
-						if (!idtype && currentId) {
-							form.setFieldsValue({ id: null });
-							return null;
-						}
-						if (!vendorCalled && idtype === "vendor") callVendorQuery();
-						if (!employeeCalled && idtype === "employee") callEmployeeQuery();
-						if (idtype === "vendor")
-							return (
-								<Form.Item
-									name="id"
-									label={t("reportcenter.labels.vendor")}
-									rules={[
-										{
-											required: true,
-											//message: t("general.validation.required"),
-										},
-									]}
-								>
-									<VendorSearchSelect
-										options={vendorData ? vendorData.vendors : []}
-									/>
-								</Form.Item>
-							);
-						if (idtype === "employee")
-							return (
-								<Form.Item
-									name="id"
-									label={t("reportcenter.labels.employee")}
-									rules={[
-										{
-											required: true,
-											//message: t("general.validation.required"),
-										},
-									]}
-								>
-									<EmployeeSearchSelect
-										options={employeeData ? employeeData.employees : []}
-									/>
-								</Form.Item>
-							);
-						else return null;
-					}}
-				</Form.Item>
-				<Form.Item
-					name="dates"
-					label={t("reportcenter.labels.dates")}
-					rules={[
-						{
-							required: true,
-							//message: t("general.validation.required"),
-						},
-					]}
-				>
-					<DatePicker.RangePicker
-						format="MM/DD/YYYY"
-						ranges={DatePIckerRanges}
-					/>
-				</Form.Item>
-				<Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
-					{() => {
-						const key = form.getFieldValue("key");
-						const currentId = form.getFieldValue("id");
-						if (!key) return null;
-						//Kind of Id
-						const idtype = Templates[key] && Templates[key].idtype;
-						if (!idtype && currentId) {
-							form.setFieldsValue({ id: null });
-							return null;
-						}
-						if (idtype === "excel")
-							return (
-								<Form.Item
-									label={t("general.labels.sendby")}
-									name="sendby"
-									initialValue="print"
-								>
-									<Radio.Group>
-										<Radio value="excel">{t("general.labels.excel")}</Radio>
-									</Radio.Group>
-								</Form.Item>
-							);
-						if (idtype !== "excel")
-							return (
-								<Form.Item
-									label={t("general.labels.sendby")}
-									name="sendby"
-									initialValue="print"
-								>
-									<Radio.Group>
-										<Radio value="email">{t("general.labels.email")}</Radio>
-										<Radio value="print">{t("general.labels.print")}</Radio>
-									</Radio.Group>
-								</Form.Item>
-							);
-					}}
-				</Form.Item>
+            <Row gutter={[16, 16]}>
+              {Object.keys(grouped).map((key) => (
+                <Col md={8} sm={12} key={key}>
+                  <Card.Grid
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      maxHeight: "33vh",
+                      overflowY: "scroll",
+                    }}
+                  >
+                    <Typography.Title level={4}>
+                      {t(`reportcenter.labels.groups.${key}`)}
+                    </Typography.Title>
+                    <ul style={{ columns: "2 auto" }}>
+                      {grouped[key].map((item) => (
+                        <li key={item.key}>
+                          <Radio key={item.key} value={item.key}>
+                            {item.title}
+                          </Radio>
+                        </li>
+                      ))}
+                    </ul>
+                  </Card.Grid>
+                </Col>
+              ))}
+            </Row>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            if (!key) return null;
+            //Kind of Id
+            const rangeFilter = Templates[key] && Templates[key].rangeFilter;
+            if (!rangeFilter) return null;
+            return (
+              <div>
+                {t("reportcenter.labels.filterson", {
+                  object: rangeFilter.object,
+                  field: rangeFilter.field,
+                })}
+              </div>
+            );
+          }}
+        </Form.Item>
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            const currentId = form.getFieldValue("id");
+            if (!key) return null;
+            //Kind of Id
+            const idtype = Templates[key] && Templates[key].idtype;
+            if (!idtype && currentId) {
+              form.setFieldsValue({ id: null });
+              return null;
+            }
+            if (!vendorCalled && idtype === "vendor") callVendorQuery();
+            if (!employeeCalled && idtype === "employee") callEmployeeQuery();
+            if (idtype === "vendor")
+              return (
+                <Form.Item
+                  name="id"
+                  label={t("reportcenter.labels.vendor")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <VendorSearchSelect
+                    options={vendorData ? vendorData.vendors : []}
+                  />
+                </Form.Item>
+              );
+            if (idtype === "employee")
+              return (
+                <Form.Item
+                  name="id"
+                  label={t("reportcenter.labels.employee")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <EmployeeSearchSelect
+                    options={employeeData ? employeeData.employees : []}
+                  />
+                </Form.Item>
+              );
+            else return null;
+          }}
+        </Form.Item>
+        <Form.Item
+          name="dates"
+          label={t("reportcenter.labels.dates")}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <DatePicker.RangePicker
+            format="MM/DD/YYYY"
+            ranges={DatePIckerRanges}
+          />
+        </Form.Item>
+        <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
+          {() => {
+            const key = form.getFieldValue("key");
+            const currentId = form.getFieldValue("id");
+            if (!key) return null;
+            //Kind of Id
+            const idtype = Templates[key] && Templates[key].idtype;
+            if (!idtype && currentId) {
+              form.setFieldsValue({ id: null });
+              return null;
+            }
+            if (idtype === "excel")
+              return (
+                <Form.Item
+                  label={t("general.labels.sendby")}
+                  name="sendby"
+                  initialValue="print"
+                >
+                  <Radio.Group>
+                    <Radio value="excel">{t("general.labels.excel")}</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              );
+            if (idtype !== "excel")
+              return (
+                <Form.Item
+                  label={t("general.labels.sendby")}
+                  name="sendby"
+                  initialValue="print"
+                >
+                  <Radio.Group>
+                    <Radio value="email">{t("general.labels.email")}</Radio>
+                    <Radio value="print">{t("general.labels.print")}</Radio>
+                  </Radio.Group>
+                </Form.Item>
+              );
+          }}
+        </Form.Item>
 
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "center",
-						marginTop: "1rem",
-					}}
-				>
-					<Button onClick={() => form.submit()} style={{}} loading={loading}>
-						{t("reportcenter.actions.generate")}
-					</Button>
-				</div>
-			</Form>
-		</div>
-	);
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            marginTop: "1rem",
+          }}
+        >
+          <Button onClick={() => form.submit()} style={{}} loading={loading}>
+            {t("reportcenter.actions.generate")}
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
 }