diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 0e03b408f..02df0f870 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -34524,6 +34524,116 @@
+
+ groups
+
+
+ customers
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
+
+ jobs
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
+
+ payroll
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
+
+ purchases
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
+
+ sales
+ false
+
+
+
+
+
+ en-US
+ false
+
+
+ es-MX
+ false
+
+
+ fr-CA
+ false
+
+
+
+
+
key
false
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 536d5deed..9d9f5a6ab 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,5 +1,16 @@
import { useLazyQuery } from "@apollo/client";
-import { Button, DatePicker, Form, Radio, Space } from "antd";
+import {
+ Button,
+ Card,
+ Col,
+ DatePicker,
+ Form,
+ Input,
+ Radio,
+ Row,
+ Typography,
+} from "antd";
+import _ from "lodash";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
@@ -14,7 +25,6 @@ import { TemplateList } from "../../utils/TemplateConstants";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import "./report-center-modal.styles.scss";
-
const mapStateToProps = createStructuredSelector({
reportCenterModal: selectReportCenter,
});
@@ -28,9 +38,14 @@ export default connect(
export function ReportCenterModalComponent({ reportCenterModal }) {
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 [callVendorQuery, { data: vendorData, called: vendorCalled }] =
@@ -80,6 +95,17 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
setLoading(false);
};
+ const FilteredReportsList =
+ search !== ""
+ ? ReportsList.filter((r) =>
+ r.title.toLowerCase().includes(search.toLowerCase())
+ )
+ : ReportsList;
+
+ //Group it, create cards, and then filter out.
+
+ const grouped = _.groupBy(FilteredReportsList, "group");
+
return (