BOD-71 Added dependencies and pages for kanban production board.

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

@@ -80,6 +80,9 @@ const TimeTicketModalContainer = lazy(() =>
 const ProductionListPage = lazy(() =>
   import("../production-list/production-list.container")
 );
+const ProductionBoardPage = lazy(() =>
+  import("../production-board/production-board.container")
+);
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -173,6 +176,11 @@ export default function Manage({ match }) {
                 path={`${match.path}/production/list`}
                 component={ProductionListPage}
               />
+              <Route
+              exact
+              path={`${match.path}/production/board`}
+              component={ProductionBoardPage}
+            />
               <Route
                 exact
                 path={`${match.path}/vehicles/:vehId`}

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

@@ -0,0 +1,6 @@
+import React from "react";
+import ProductionBoardKanbanContainer from "../../components/production-board-kanban/production-board-kanban.container";
+
+export default function ProductionBoardComponent({ columnState }) {
+  return <ProductionBoardKanbanContainer columnState={columnState} />;
+}

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

@@ -0,0 +1,45 @@
+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 ProductionBoardComponent from "./production-board.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 ProductionBoardContainer({ setBreadcrumbs, bodyshop }) {
+  const { t } = useTranslation();
+  const columnState = useState(
+    (bodyshop.production_config &&
+      bodyshop.production_config.columnKeys.map((k) =>
+        ProductionListColumns.find((e) => e.key === k)
+      )) ||
+      []
+  );
+  // console.log("ProductionListContainer -> columnState", columnState);
+
+  useEffect(() => {
+    document.title = t("titles.productionboard");
+    setBreadcrumbs([
+      { link: "/manage/production/board", label: t("titles.bc.productionboard") },
+    ]);
+  }, [t, setBreadcrumbs]);
+
+  return (
+    <div>
+      <ProductionBoardComponent columnState={columnState} />
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProductionBoardContainer);