Progress

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

@@ -1,10 +1,10 @@
-import { FloatButton, Layout, Spin } from "antd";
+import {FloatButton, Layout, Spin} from "antd";
 // import preval from "preval.macro";
-import React, { lazy, Suspense, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Link, Route, Routes } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import React, {lazy, Suspense, useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Link, Route, Routes} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
 import ConflictComponent from "../../components/conflict/conflict.component";
@@ -17,14 +17,18 @@ import TestComponent from "../../components/_test/test.page";
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
-import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
+import PrintCenterModalContainer
+  from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
-import { requestForToken } from "../../firebase/firebase.utils";
-import { selectBodyshop, selectInstanceConflict, } from "../../redux/user/user.selectors";
+import {requestForToken} from "../../firebase/firebase.utils";
+import {selectBodyshop, selectInstanceConflict,} from "../../redux/user/user.selectors";
 
 import UpdateAlert from "../../components/update-alert/update-alert.component";
-import { setJoyRideFinished } from "../../redux/application/application.actions.js";
-import { selectEnableJoyRide, selectJoyRideSteps } from "../../redux/application/application.selectors.js";
+import {setJoyRideFinished} from "../../redux/application/application.actions.js";
+import {
+  selectEnableJoyRide,
+  selectJoyRideSteps
+} from "../../redux/application/application.selectors.js";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
 
@@ -180,6 +184,10 @@ const TtApprovals = lazy(() =>
     import("../tt-approvals/tt-approvals.page.container")
 );
 
+const TasksPage = lazy(() =>
+  import("../tasks/tasks.page.container")
+);
+
 const {Content, Footer} = Layout;
 
 
@@ -286,7 +294,15 @@ export function Manage({conflict, bodyshop,enableJoyRide,joyRideSteps,setJoyRide
                 <Route path='/temporarydocs/' element={<Suspense fallback={<Spin/>}>
                  <TempDocs/>
                 </Suspense>}/>
+                {/*Start Task Routes */}
                 <Route
+                  path='/tasks'
+                  element={   <Suspense fallback={<Spin/>}>
+                    <TasksPage/>
+                  </Suspense>}
+                />
+              {/*End Task Routes */}
+              <Route
                     path='/inventory/'
                     element={<Suspense fallback={<Spin/>}>
                  <InventoryListPage/>

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

@@ -0,0 +1,11 @@
+import React from "react";
+import TaskListContainer from "../../components/task-list/task-list.container.jsx";
+
+export default function TasksPageComponent({bodyshop, currentUser}) {
+
+  return (
+    <div>
+      <TaskListContainer />
+    </div>
+  );
+}

client/src/pages/tasks/tasks.page.container.jsx

@@ -0,0 +1,47 @@
+import React, {useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import TasksPageComponent from "./tasks.page.component";
+
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {setBreadcrumbs, setSelectedHeader} from "../../redux/application/application.actions";
+import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
+import {selectBodyshop, selectCurrentUser} from "../../redux/user/user.selectors.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export function TasksPageContainer({bodyshop, currentUser,  setBreadcrumbs, setSelectedHeader}) {
+  const {t} = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.tasks", {
+      app: InstanceRenderManager({
+        imex: '$t(titles.imexonline)',
+        rome: '$t(titles.romeonline)',
+        promanager: '$t(titles.promanager)'
+      })
+    });
+    setSelectedHeader("tasks");
+    setBreadcrumbs([
+      {
+        link: "/manage/tasks",
+        label: t("titles.bc.tasks"),
+      },]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  return (
+    <TasksPageComponent currentUser={currentUser} bodyshop={bodyshop}/>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TasksPageContainer);