Basic reporting completed.

src/components/pages/jobs/jobs.page.jsx

@@ -1,15 +1,11 @@
-import { Col, Row, Tabs, Grid } from "antd";
+import { Col, Grid, Row, Tabs } from "antd";
 import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import JobsDetailOrganism from "../../organisms/jobs-detail/jobs-detail.organism";
 import JobsListOrganism from "../../organisms/jobs-list-latest/jobs-list-latest.organism";
 import JobsListSearchOrganism from "../../organisms/jobs-list-search/jobs-list-search.organism";
 
-const mapStateToProps = createStructuredSelector({});
-const mapDispatchToProps = (dispatch) => ({});
-
-export function JobsPage() {
+export default function JobsPage() {
+  console.log("Jobs Page Rerender");
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
     .slice(-1)[0];
@@ -47,4 +43,3 @@ export function JobsPage() {
     </div>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(JobsPage);

src/components/pages/reporting/reporting.page.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectDates } from "../../../redux/reporting/reporting.selectors";
+import ReportingTitleAtom from "../../atoms/reporting-title/reporting-title.atom";
 import ReportingDatesMolecule from "../../molecules/reporting-dates/reporting-dates.molecule";
 import ReportingJobsListMolecule from "../../molecules/reporting-jobs-list/reporting-jobs-list.molecule";
 import ReportingTotalsStatsMolecule from "../../molecules/reporting-totals-stats/reporting-totals-stats.molecule";
@@ -20,6 +21,7 @@ export function ReportingPage({ dates }) {
       <ReportingDatesMolecule />
       {dates && dates.startDate && dates.endDate && (
         <div>
+          <ReportingTitleAtom />
           <ReportingTotalsStatsMolecule />
           <ReportingJobsListMolecule />
         </div>

src/components/pages/routes/routes.page.jsx

@@ -1,12 +1,12 @@
 import { Layout } from "antd";
 import React from "react";
 import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
+import { Route } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
-import Jobs from "../jobs/jobs.page";
+import JobsPage from "../jobs/jobs.page";
 import ReportingPage from "../reporting/reporting.page";
 import SettingsPage from "../settings/settings.page";
 
@@ -21,6 +21,7 @@ export function RoutesPage({ bodyshop }) {
         errorMessage="You do not currently have access to any shop. Please reach out to technical support."
       />
     );
+  console.log("routes render");
   return (
     <Layout style={{ background: "#fff", height: "100vh" }} hasSider>
       <Layout.Sider
@@ -32,11 +33,9 @@ export function RoutesPage({ bodyshop }) {
       </Layout.Sider>
       <Layout style={{ background: "#fff" }}>
         <Layout.Content style={{ margin: "1rem", height: "100%" }}>
-          <Switch>
-            <Route exact path="/settings" component={SettingsPage} />
-            <Route exact path="/reporting" component={ReportingPage} />
-            <Route path="/" component={Jobs} />
-          </Switch>
+          <Route exact path="/settings" component={SettingsPage} />
+          <Route exact path="/reporting" component={ReportingPage} />
+          <Route exact path="/" component={JobsPage} />
         </Layout.Content>
       </Layout>
     </Layout>