Basic reporting completed.

src/components/atoms/reporting-title/reporting-title.atom.jsx

@@ -0,0 +1,22 @@
+import { Typography } from "antd";
+import React from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectDates } from "../../../redux/reporting/reporting.selectors";
+import moment from "moment";
+import { DateFormat } from "../../../util/constants";
+const mapStateToProps = createStructuredSelector({
+  dates: selectDates,
+});
+
+export function ReportingTitleAtom({ dates }) {
+  return (
+    <Typography.Title level={2}>
+      {`RPS Report for Period from ${moment(dates.startDate).format(
+        DateFormat
+      )} to ${moment(dates.endDate).format(DateFormat)}`}
+    </Typography.Title>
+  );
+}
+export default connect(mapStateToProps, null)(ReportingTitleAtom);

src/components/molecules/close-date-display/close-date-display.molecule.jsx

@@ -3,6 +3,7 @@ import { DatePicker, message, Spin } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
 import { UPDATE_JOB } from "../../../graphql/jobs.queries";
+import { DateFormat } from "../../../util/constants";
 
 export default function CloseDateDisplayMolecule({ jobId, close_date }) {
   const [editMode, setEditMode] = useState(false);
@@ -38,7 +39,7 @@ export default function CloseDateDisplayMolecule({ jobId, close_date }) {
 
   return (
     <div style={{ cursor: "pointer" }} onClick={() => setEditMode(true)}>
-      {value && value.isValid() ? value.format("MM/DD/yyyy") : "No date set"}
+      {value && value.isValid() ? value.format(DateFormat) : "No date set"}
     </div>
   );
 }

src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import CloseDateDisplayMolecule from "../close-date-display/close-date-display.molecule";
+import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.atom";
 
 export default function JobsDetailDescriptionMolecule({ loading, job }) {
   if (loading) return <Skeleton active />;
@@ -26,6 +27,9 @@ export default function JobsDetailDescriptionMolecule({ loading, job }) {
               close_date={job.close_date}
             />
           </Descriptions.Item>
+          <Descriptions.Item label="Last Updated">
+            <TimeAgoFormatter>{job.updated_at}</TimeAgoFormatter>
+          </Descriptions.Item>
         </Descriptions>
       </PageHeader>
     </div>

src/components/molecules/reporting-jobs-list/reporting-jobs-list.molecule.jsx

@@ -1,29 +1,26 @@
 import { Input, Table } from "antd";
 import React, { useState } from "react";
-import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
-import IgnoreJobLine from "../../atoms/ignore-job-line/ignore-job-line.atom";
-import partTypeConverterAtom from "../../atoms/part-type-converter/part-type-converter.atom";
-import PriceDiffPcFormatterAtom from "../../atoms/price-diff-pc-formatter/price-diff-pc-formatter.atom";
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   selectReportData,
   selectReportLoading,
 } from "../../../redux/reporting/reporting.selectors";
+import { setSelectedJobId } from "../../../redux/application/application.actions";
+import { Link } from "react-router-dom";
 const mapStateToProps = createStructuredSelector({
   reportingLoading: selectReportLoading,
   reportData: selectReportData,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  setSelectedJobId: (id) => dispatch(setSelectedJobId(id)),
 });
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ReportingJobsListMolecule);
 
-export function ReportingJobsListMolecule({ reportingLoading, reportData }) {
+export function ReportingJobsListMolecule({
+  reportingLoading,
+  reportData,
+  setSelectedJobId,
+}) {
   const [searchText, setSearchText] = useState("");
 
   const columns = [
@@ -31,6 +28,11 @@ export function ReportingJobsListMolecule({ reportingLoading, reportData }) {
       title: "Claim No.",
       dataIndex: "clm_no",
       key: "clm_no",
+      render: (text, record) => (
+        <Link onClick={() => setSelectedJobId(record.id)} to={"/"}>
+          {text}
+        </Link>
+      ),
     },
     {
       title: "Ins Co.",
@@ -138,3 +140,8 @@ export function ReportingJobsListMolecule({ reportingLoading, reportData }) {
     </div>
   );
 }
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ReportingJobsListMolecule);

src/components/molecules/reporting-totals-stats/reporting-totals-stats.molecule.jsx

@@ -1,8 +1,7 @@
 import { Skeleton, Statistic } from "antd";
-import React, { useCallback } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectSelectedJobTargetPc } from "../../../redux/application/application.selectors";
 import {
   selectReportLoading,
   selectScorecard,

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>