BOD-21 Initial creation of the production schedule list framework.

client/src/pages/manage/manage.page.component.jsx

@@ -77,6 +77,9 @@ const EnterInvoiceModalContainer = lazy(() =>
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
+const ProductionListPage = lazy(() =>
+  import("../production-list/production-list.container")
+);
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -165,6 +168,11 @@ export default function Manage({ match }) {
                 path={`${match.path}/vehicles`}
                 component={VehiclesContainer}
               />
+              <Route
+                exact
+                path={`${match.path}/production/list`}
+                component={ProductionListPage}
+              />
               <Route
                 exact
                 path={`${match.path}/vehicles/:vehId`}

client/src/pages/production-list/production-list.component.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ProductionListColumns from "../../components/production-list-columns/production-list-columns.component";
+import ProductionListTable from "../../components/production-list-table/production-list-table.container";
+
+export default function ProductionListComponent({ columnState }) {
+  return (
+    <div>
+      <ProductionListColumns columnState={columnState} />
+      <ProductionListTable columnState={columnState} />
+    </div>
+  );
+}

client/src/pages/production-list/production-list.container.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ProductionListComponent from "./production-list.component";
+import ProductionListColumns from "../../components/production-list-columns/production-list-columns.data";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function ProductionListContainer({ setBreadcrumbs, bodyshop }) {
+  const { t } = useTranslation();
+  const columnState = useState(
+    ProductionListColumns.filter((c) =>
+      bodyshop.production_config.columnKeys.includes(c.key)
+    ) || []
+  );
+
+  useEffect(() => {
+    document.title = t("titles.productionlist");
+    setBreadcrumbs([
+      { link: "/manage/production/list", label: t("titles.bc.productionlist") },
+    ]);
+  }, [t, setBreadcrumbs]);
+
+  return (
+    <div>
+      <ProductionListComponent columnState={columnState} />
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionListContainer);